/* =========================================================
   THEME: CLASSIC (version 1, the default)
   Calm and clear for every age: flat dark grey instead of black-and-crimson,
   one soft coral red for buttons and key numbers, thin borders, no glows.
   Everything here only applies when <html data-theme="calm"> (theme.js sets it).
   The Vibrant theme (version 2) is style.css on its own, so it stays exactly as it was.
   ========================================================= */

[data-theme="calm"] {
  --bg: #111317;
  --card: #181a1f;
  --card-hover: #1e2127;
  --inset: #14161a;
  --border: #272a31;
  --text: #f3f4f6;
  --muted: #9aa0aa;
  --accent: #f2545b;
  --accent-hover: #f46970;
  --accent-soft: #f2545b1f;
  --gradient: linear-gradient(135deg, #f2545b, #d63a43);
  --save: #34c77b;
  --save-soft: #34c77b1f;

  /* Only for this file */
  --calm-surface: #181a1f;
  --calm-surface-2: #1d2026;
  --calm-line: rgba(255, 255, 255, 0.08);
  --calm-line-strong: rgba(255, 255, 255, 0.14);
  --calm-red: #f2545b;
  --calm-red-text: #ff6b70;
}

/* ---- The page, the menu and the top bar ---- */
[data-theme="calm"] body {
  background: var(--bg);
}

[data-theme="calm"] .ambient {
  display: none;               /* no coloured glow behind the page */
}

[data-theme="calm"] .sidebar {
  background: #0e1013;
  border-right-color: var(--calm-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-theme="calm"] .tab.active {
  background: rgba(242, 84, 91, 0.12);
}

[data-theme="calm"] .tab.active::before {
  display: none;
}

[data-theme="calm"] .tab.active svg.tab-icon,
[data-theme="calm"] .tab.active .tab-label {
  color: var(--calm-red-text);
}

[data-theme="calm"] header::before {
  background: rgba(17, 19, 23, 0.92);
}

[data-theme="calm"] header {
  border-bottom-color: var(--calm-line);
}

[data-theme="calm"] .top-search input {
  border-radius: 12px;
}

/* Cards everywhere: flat grey with a thin border */
[data-theme="calm"] section {
  background: var(--calm-surface);
  border-color: var(--calm-line);
}

/* App logos: the flat brand colour, no shine or coloured shadow */
[data-theme="calm"] .app-icon {
  background: var(--brand, var(--accent));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="calm"] .app-icon::after {
  display: none;
}

[data-theme="calm"] .logo-letters {
  text-shadow: none;
}

/* =========================================================
   HOME
   ========================================================= */
/* The layout (tile cluster, insights after a line, picture-on-top highlight cards) is the
   same in both themes: style.css "HOME LAYOUT". Here: Classic's colours only. */

/* ---- The hero: dark grey with a soft red light ---- */
[data-theme="calm"] .home-hero {
  border: 1px solid var(--calm-line);
  background:
    radial-gradient(70% 120% at 38% 30%, rgba(160, 30, 45, 0.38), transparent 70%),
    linear-gradient(110deg, #1d1416 0%, #24161a 45%, #1a1518 100%);
  box-shadow: none;
}

[data-theme="calm"] .hh-greeting {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

[data-theme="calm"] .hh-title {
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  letter-spacing: -0.025em;
}

[data-theme="calm"] .hh-amount strong {
  color: var(--calm-red-text);
}

[data-theme="calm"] .hh-amount small {
  color: var(--text);
}

[data-theme="calm"] .hh-line {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.05rem;
}

[data-theme="calm"] .hh-primary,
[data-theme="calm"] .hh-secondary {
  padding: 13px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
}

[data-theme="calm"] .hh-primary {
  background: var(--calm-red);
  box-shadow: none;
}

[data-theme="calm"] .hh-primary:hover {
  background: var(--accent-hover);
}

[data-theme="calm"] .hh-secondary {
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
}

/* Your apps: dark tiles with white logos (the front one keeps its colour) */
[data-theme="calm"] .hh-fan .hh-tile {
  background: #1b1d22;
  filter: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 34px -18px rgba(0, 0, 0, 0.9);
}

[data-theme="calm"] .hh-fan .hh-tile[style*="--n: 0"] {
  background: var(--brand);
}

/* ---- TrackBot insights ---- */
[data-theme="calm"] .insights {
  border-left-color: var(--calm-line-strong);
}

[data-theme="calm"] .insight {
  border-radius: 10px;
  border: 1px solid var(--calm-line);
  background: rgba(255, 255, 255, 0.035);
}

[data-theme="calm"] .insight:hover {
  background: rgba(255, 255, 255, 0.07);
}

/* Line icons in coral, no coloured squares */
[data-theme="calm"] .insight .insight-icon {
  width: 30px;
  height: 30px;
  background: none;
  color: var(--calm-red-text);
}

[data-theme="calm"] .insight.save .insight-icon { color: var(--save); }

[data-theme="calm"] .insight .insight-icon .icon {
  width: 26px;
  height: 26px;
}

/* ---- The four numbers ---- */
[data-theme="calm"] .home-stat {
  border: 1px solid var(--calm-line);
  background: var(--calm-surface);
}

[data-theme="calm"] .home-stat:hover {
  border-color: var(--calm-line-strong);
  background: var(--calm-surface-2);
  transform: none;
}

[data-theme="calm"] .home-stat-icon {
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: var(--calm-red-text);
}

[data-theme="calm"] .home-stat-icon .icon {
  width: 34px;
  height: 34px;
  stroke-width: 1.6;
}

[data-theme="calm"] .home-stat-label {
  color: rgba(255, 255, 255, 0.85);
}

[data-theme="calm"] #see-savings .home-stat-value {
  color: var(--text);
}

[data-theme="calm"] .home-stat-note,
[data-theme="calm"] .home-stat-go {
  color: rgba(255, 255, 255, 0.75);
}

/* ---- Highlights: the full logo, bright, on a clean dark panel with a hint of its colour.
        No photos in Classic (Vibrant has them). ---- */
[data-theme="calm"] .highlights button.hl-card,
[data-theme="calm"] .highlights button.hl-card.has-photo {
  border-color: var(--calm-line);
  --hl-bg:
    linear-gradient(var(--calm-surface), var(--calm-surface)) bottom / 100% calc(100% - 108px) no-repeat,
    radial-gradient(75% 110% at 50% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 75%) top / 100% 108px no-repeat,
    linear-gradient(180deg, #23262c, #1b1d22) top / 100% 108px no-repeat;
}

[data-theme="calm"] .highlights button.hl-card:hover {
  border-color: var(--calm-line-strong);
  box-shadow: none;
}

[data-theme="calm"] .highlights .hl-logo .app-logo {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)) brightness(1.08);
}

/* ---- The other cards on Home ---- */
[data-theme="calm"] .home-card {
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--calm-line);
  background: var(--calm-surface);
}

[data-theme="calm"] .home-card.highlights {
  padding: 0;
  border: 0;
  background: none;
}

[data-theme="calm"] .home-card-icon {
  border: 0;
  background: none;
  color: var(--calm-red-text);
}

[data-theme="calm"] .home-see-all {
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  color: var(--calm-red-text);
  font-weight: 600;
}

[data-theme="calm"] .home-see-all:hover {
  background: none;
  text-decoration: underline;
}

[data-theme="calm"] .pay-row,
[data-theme="calm"] .subs-card #sub-list li {
  border-radius: 10px;
  border-color: var(--calm-line);
  background: rgba(255, 255, 255, 0.025);
}

[data-theme="calm"] .home-deal {
  border-radius: 12px;
  border: 1px solid var(--calm-line);
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="calm"] .home-deal-kind,
[data-theme="calm"] .pay-row.urgent .pay-when strong,
[data-theme="calm"] #sub-list li.soon .sub-when strong {
  color: var(--calm-red-text);
}

[data-theme="calm"] .home-deal-go,
[data-theme="calm"] .home-deal-go:hover {
  border-radius: 10px;
  background: var(--calm-red);
}

[data-theme="calm"] .subs-card #sub-list li.soon {
  box-shadow: inset 3px 0 0 var(--calm-red);
}

[data-theme="calm"] .subs-search input,
[data-theme="calm"] .subs-add {
  border-radius: 10px;
}

[data-theme="calm"] .transport-promo {
  border-radius: 14px;
  border-color: var(--calm-line);
  background: var(--calm-surface);
}

/* =========================================================
   HUB
   ========================================================= */
[data-theme="calm"] .hub-overview-head h2 {
  font-size: 2rem;
  letter-spacing: -0.02em;
}

[data-theme="calm"] .hub-stat {
  padding: 20px 22px;
  border-radius: 12px;
  border-color: var(--calm-line);
  background: var(--calm-surface);
}

/* Tinted rounded-square icons in coral */
[data-theme="calm"] .hub-stat-icon,
[data-theme="calm"] .hub-stat-main .hub-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(242, 84, 91, 0.14);
  color: var(--calm-red-text);
}

[data-theme="calm"] .hub-stat-label {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
}

[data-theme="calm"] .hub-stat-value,
[data-theme="calm"] .hub-stat-main .hub-stat-value {
  font-size: 1.85rem;
}

[data-theme="calm"] .hub-card {
  border-radius: 12px;
}

[data-theme="calm"] .range-toggle {
  border-radius: 10px;
}

[data-theme="calm"] .range-toggle button[aria-pressed="true"] {
  background: rgba(242, 84, 91, 0.14);
  box-shadow: inset 0 0 0 1px rgba(242, 84, 91, 0.5);
}

/* Bars: one flat coral, softly faded at the bottom */
[data-theme="calm"] .forecast-bar {
  background: linear-gradient(180deg, var(--calm-red), rgba(242, 84, 91, 0.45));
  box-shadow: none;
}

[data-theme="calm"] .rank-fill {
  background: var(--calm-red);
  box-shadow: none;
}

[data-theme="calm"] .rank-track {
  background: rgba(255, 255, 255, 0.08);
}

/* =========================================================
   DEALS: the same pages, with the glow and red borders turned down
   ========================================================= */
[data-theme="calm"] .deal-hero {
  border-radius: 18px;
  border-color: var(--calm-line);
  box-shadow: none;
}

[data-theme="calm"] .deal-assistant {
  border-radius: 18px;
  border-color: var(--calm-line);
  background: var(--calm-surface);
  box-shadow: none;
}

[data-theme="calm"] .hero-primary,
[data-theme="calm"] .da-view {
  border-radius: 10px;
  background: var(--calm-red);
  box-shadow: none;
}

[data-theme="calm"] .hero-ask {
  border-radius: 10px;
}

[data-theme="calm"] .deal-tab,
[data-theme="calm"] .deals-search input {
  border-radius: 10px;
}

/* Every deal card: no photo or drawing, a clean dark panel with a hint of the app's colour
   in its top corner. (Vibrant keeps the photos and the glow.) */
[data-theme="calm"] .match-card,
[data-theme="calm"] .library-card,
[data-theme="calm"] .compare-card,
[data-theme="calm"] .deal-card,
[data-theme="calm"] .match-card.has-photo,
[data-theme="calm"] .library-card.has-photo,
[data-theme="calm"] .compare-card.has-photo,
[data-theme="calm"] .deal-card.has-photo {
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--brand) 22%, rgba(255, 255, 255, 0.08));
  --card-bg:
    radial-gradient(90% 70% at 85% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
    linear-gradient(180deg, #1e2126, #17191d);
  background: var(--card-bg);
  box-shadow: none;
}

[data-theme="calm"] .match-card:hover,
[data-theme="calm"] .library-card:hover,
[data-theme="calm"] .compare-card:hover,
[data-theme="calm"] .deal-card:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, rgba(255, 255, 255, 0.12));
  box-shadow: none;
  transform: translateY(-2px);
}

/* The app's full logo, clear and bright, instead of a faint tilted watermark */
[data-theme="calm"] .card-mark {
  top: 44px;
  right: 14px;
  bottom: auto;
  z-index: 0;
  place-items: center end;
  width: 34%;
  height: 40px;
  aspect-ratio: auto;
  opacity: 0.95;
  rotate: none;
}

[data-theme="calm"] .card-mark .app-logo {
  width: auto;
  max-width: 100%;
  height: 40px;
  object-fit: contain;
  object-position: right center;
}

[data-theme="calm"] .card-mark .logo-letters {
  font-size: 80cqh;
}

/* There's a full logo, so no small square icon beside the name */
[data-theme="calm"] .match-card .match-head .app-icon,
[data-theme="calm"] .deal-card:not(.mini) .deal-head .app-icon {
  display: none;
}

[data-theme="calm"] .match-name,
[data-theme="calm"] .deal-card:not(.mini) .deal-title {
  max-width: 62%;
}

/* The library: the big logo, white and bright, with only a soft hint of colour behind it */
[data-theme="calm"] .library-logo::before {
  inset: -10%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 14%, transparent), transparent);
}

[data-theme="calm"] .library-logo .app-logo {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)) brightness(1.08);
}

/* Logos in their own colour (Spotify green, Netflix red…) on the dark cards: the logo's
   shape (--logo, helpers.js appLogo) is used as a stencil and painted in --logo-colour.
   Black brands stay white so they show on the dark. */
[data-theme="calm"] :is(.highlights .hl-logo, .library-logo, .card-mark, .hh-fan .hh-tile:not([style*="--n: 0"])) img.app-logo {
  object-position: -99999px 0;                 /* hide the white picture itself… */
  background: var(--logo-colour, #fff);        /* …and paint its shape in the app's colour */
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}

[data-theme="calm"] :is(.highlights .hl-logo, .library-logo, .card-mark, .hh-fan .hh-tile:not([style*="--n: 0"])) .logo-letters {
  color: var(--logo-colour, #fff);
}

[data-theme="calm"] .library-tag {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: none;
}

/* The big carousel: a clean dark panel with the app's tile, no photo */
[data-theme="calm"] .hero-slide.intro,
[data-theme="calm"] .hero-slide.intro.has-photo {
  background:
    radial-gradient(60% 90% at 75% 40%, rgba(160, 30, 45, 0.35), transparent 70%),
    linear-gradient(110deg, #1b1416 0%, #22161a 50%, #1a1518 100%);
}

[data-theme="calm"] .hero-slide.deal,
[data-theme="calm"] .hero-slide.deal.has-photo {
  background:
    radial-gradient(55% 85% at 78% 45%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 72%),
    linear-gradient(110deg, #17191d 0%, #1d2025 100%);
}

[data-theme="calm"] .hero-swoosh,
[data-theme="calm"] .hero-spark {
  display: none;
}

[data-theme="calm"] .hero-orb {
  opacity: 0.35;
}

[data-theme="calm"] .hero-tile,
[data-theme="calm"] .hero-big-tile {
  background: var(--brand, #e63946);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 20px 40px -18px rgba(0, 0, 0, 0.85);
}

[data-theme="calm"] .hero-tile::after,
[data-theme="calm"] .hero-big-tile::after {
  display: none;
}

/* Phones: a shorter banner, so the deals come sooner. The logo tile gets small and sits
   beside the heading; the brand slide shows just its words. */
@media (max-width: 700px) {
  [data-theme="calm"] .deal-hero,
  [data-theme="calm"] .hero-slide {
    min-height: 300px;
  }

  [data-theme="calm"] .hero-slide {
    padding-bottom: 54px;
  }

  [data-theme="calm"] .hero-big-tile {
    --size: 17cqi;
    top: 22px;
    bottom: auto;
    right: 18px;
  }

  [data-theme="calm"] .hero-slide.deal .hero-copy h2 {
    padding-right: 19cqi;           /* clear of the logo tile */
  }

  [data-theme="calm"] .hero-save {
    display: none;                  /* the saving is already in the words */
  }

  [data-theme="calm"] .hero-slide.intro .hero-tile {
    display: none;                  /* no room beside the words and the slide dots */
  }
}

[data-theme="calm"] .match-add,
[data-theme="calm"] .match-add:hover {
  background: var(--calm-red);
}

[data-theme="calm"] .match-add,
[data-theme="calm"] .deal-go,
[data-theme="calm"] .compare-button {
  border-radius: 10px;
  box-shadow: none;
}

/* =========================================================
   TRACKBOT: the new friendly robot, calm cards
   ========================================================= */
[data-theme="calm"] .ask-hero::before {
  top: -34px;
  right: 0;
  width: min(420px, 50%);
  height: calc(100% + 30px);
  background: url("icons/art/trackbot-calm.webp") right 10px top 0 / 300px auto no-repeat;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 32%);
  mask-image: linear-gradient(to top, transparent 0%, #000 32%);
}

[data-theme="calm"] .ask-feature {
  border-radius: 12px;
  border-color: var(--calm-line);
  background: var(--calm-surface);
  backdrop-filter: none;
}

[data-theme="calm"] .ask-feature:hover {
  border-color: var(--calm-line-strong);
  background: var(--calm-surface-2);
  transform: none;
}

[data-theme="calm"] .ask-feature-icon {
  background: none;
  color: var(--calm-red-text);
}

[data-theme="calm"] #page-ask .chat {
  border-radius: 14px;
  border-color: var(--calm-line);
  background: var(--calm-surface);
}

[data-theme="calm"] .ask-panel {
  border-radius: 14px;
}

/* =========================================================
   SETTINGS: the theme picker (both themes use it)
   ========================================================= */
[data-theme="calm"] .setting-card {
  border-radius: 14px;
}

@media (max-width: 700px) {
  [data-theme="calm"] .home-stat-icon,
  [data-theme="calm"] .home-stat-icon .icon {
    width: 26px;
    height: 26px;
  }

  [data-theme="calm"] .home-card {
    padding: 14px;
  }

  /* Hub's numbers: two to a row, so smaller icons and numbers */
  [data-theme="calm"] .hub-stat {
    gap: 10px;
    padding: 14px 12px;
  }

  [data-theme="calm"] .hub-stat-icon,
  [data-theme="calm"] .hub-stat-main .hub-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  [data-theme="calm"] .hub-stat-value,
  [data-theme="calm"] .hub-stat-main .hub-stat-value {
    font-size: 1.35rem;
  }
}