/* ==========================================================================
   ThriveChamp - app.css
   Purpose: Shared/global styles (tokens, base, header, layout, card shell,
            shared components, generic collapsibles, and utilities).
   NOTE:
     • Mind card + puzzles → /ui/css/mind.css
     • Body/Meals/Workout   → /ui/css/body.css
   --------------------------------------------------------------------------
   This file establishes:
   1) Global design tokens on :root (colors, sizes, shadows).
   2) Base reset + typography.
   3) Header layout & brand positioning.
   4) Card shell (.card) incl. floating shadow + "ground oval".
   5) Section tints for card variants (.card.mind/.body/.soul/.week/.mini-dash).
   6) Titlebar, shared components, dialogs, utilities.
   ========================================================================== */


/* ==========================================================================
   Design Tokens (:root)
   --------------------------------------------------------------------------
   These CSS variables are the single source of truth for colors, sizes,
   and shadows, used throughout this file AND by other CSS files:
     - /ui/css/mind.css consumes many "Mind" and elevation tokens.
     - /ui/css/body.css consumes recipe-pill tokens.
   Changing a token here updates every rule that references it.
   ========================================================================== */
:root{
  /* --- Site theme --- */
  --bg:#ffffff;              /* Global page background color (used by body) */
  --text:#0f172a;            /* Default text color (used across the app) */
  --muted:#475569;           /* Muted/secondary text */
  --ok:#16a34a;              /* Positive/“success” ink (chips, etc.) */
  --line:#e2e8f0;            /* Divider/line color (header bottom border, etc.) */

  /* --- Card tints --- */
  --mind:#f5fcff;            /* Mind card background; overrides .card bg via .card.mind */
  --body:#f7fff9;            /* Body card background; overrides .card bg via .card.body */
  --soul:#fdf6ff;            /* Soul card background; overrides .card bg via .card.soul */
  --week:#fdfbe6;            /* Week card background; overrides .card bg via .card.week */
  --planner:#f8faff;         /* Planner card background */
  --dash:#ffffff;            /* Mini-dashboard background; overrides via .card.mini-dash */

  /* --- Section header underline colors --- */
  --hdr-mind:#0284c7;        /* Underline color for .card.mind .titlebar */
  --hdr-body:#15803d;        /* Underline color for .card.body .titlebar */
  --hdr-soul:#9333ea;        /* Underline color for .card.soul .titlebar */
  --hdr-week:#b45309;        /* Underline color for .card.week .titlebar */

  /* --- Header (clean strip, no photo) --- */
  --header-photo: none;      /* Placeholder: if set to url(...), header could add a bg image */
  --headerPadX: 12px;        /* Horizontal padding inside header */
  --headerPadY: 2.5px;       /* Vertical padding inside header */
  --headerInk:#2e5575;       /* Icon (hamburger/login) color in header */

  /* --- Brand sizing (height-based only) --- */
  --brandLogoH: 36px;        /* Desktop/tablet logo height (header .brand img) */
  --brandLogoH-mobile: 32px; /* Mobile logo height (<=480px) */
  --brandTopNudge: 0px;      /* Vertical nudge for brand (desktop); used in translateY() */
  --brandTopNudge-mobile: 0px; /* Vertical nudge for brand (mobile) */

  /* --- Header chips --- */
  --chipH: 28px;             /* Height of pills like score/initials */
  --chipTopNudge: 2px;       /* Slight vertical adjustment for right-side header cluster */
  --chip-text-score: #065f46;/* Text color inside the green “score” chip */

  /* --- Icon button tap sizes --- */
  --iconTap: 52px;           /* Visual “tap area” of header icon buttons */
  --iconWH: 40px;            /* The forced size of SVGs inside those buttons */

  /* --- Mind (accordion) tokens — consumed by /ui/css/mind.css --- */
  --mind-row:#7698af67;           /* Closed row bg (Mind accordion rows) */
  --mind-row-open:#7698af67;      /* Open row bg */
  --mind-row-hover:#3c86b867;     /* Hover/active row bg */
  --mind-row-border:#ffffff67;    /* Optional borders (if enabled in mind.css) */
  --mind-row-border-open:#7698af5a;
  --mind-row-border-hover:#7698af52;
  --mind-panel-border:#eef8ff;    /* Panel border tint under a row */

  /* --- Puzzle tokens — used by /ui/css/mind.css --- */
  --good:#16a34a;                 /* Correct state color */
  --bad:#ef4444;                  /* Wrong/error state color */
  --mind-accent:#0ea5e9;          /* Accent color in puzzle UIs */
  --cell:#f8fafc;                 /* Puzzle cell bg */
  --cell-hi:#e0f2fe;              /* Highlight cell bg */
  --cw-tile: clamp(34px, 8.8vw, 52px); /* Crossword tile size */
  --sdk-given-text:#111827;       /* Sudoku “given” numbers color */
  --sdk-given-bg:#cccecfad;       /* Sudoku “given” cell bg */
  --sdk-max:300px;                /* Sudoku layout width clamp */

  /* --- Recipe pill tokens — used by /ui/css/body.css --- */
  --recipe-pill-bg:#92e0af;       /* Collapsible pill bg (Body card) */
  --recipe-pill-open:#92e0af;     /* Open state bg */
  --recipe-pill-hover:#92e0af;    /* Hover state bg */
  --recipe-pill-border:#91b49e;   /* Pill border */
  --recipe-pill-text:#000000;     /* Pill text color */
  --recipe-pill-font:inherit;     /* Pill font family (can be overridden by theme helpers) */
  --recipe-pill-size:14px;        /* Pill base font-size */
  --recipe-pill-weight:600;       /* Pill font-weight */
  --recipe-pill-caret:"▾";        /* Closed caret character */
  --recipe-pill-caret-open:"▴";   /* Open caret character */
  --recipe-pill-caret-size:14px;  /* Caret size */
  --recipe-pill-caret-ink:rgba(0,0,0,.75); /* Caret color */

  /* --- Elevation tokens --- */
  /* Pills */
  --pill-shadow:0 2px 10px rgba(0,0,0,.06);              /* Base pill shadow */
  --pill-shadow-hover:0 6px 18px rgba(0,0,0,.10);        /* Hovered pill shadow */
  --pill-focus-ring:#3b82f6;                             /* Focus outline color for pills */
  --pill-lift:-1px;                                      /* Subtle “lift” transform for pills */
  --pill-shadow-const:0 8px 18px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.05); /* Stronger pill shadow */
  --pill-shadow-strong:0 12px 30px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.06);/* Strongest pill shadow */
  --pill-oval-opacity:.38;                               /* Opacity for pill ground-oval */
  --pill-oval-height:14px;                               /* Height of pill ground-oval */
  --pill-oval-inset:10px;                                /* Horizontal inset of pill ground-oval */

  /* Cards */
  --card-lift:-3px;                                      /* Baseline translateY for .card (used in transform) */
  --card-shadow-floating:0 12px 30px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.06);          /* Default .card shadow */
  --card-shadow-floating-strong:0 16px 42px rgba(0,0,0,.16), 0 6px 16px rgba(0,0,0,.08);  /* Hover/focus .card shadow */
  --card-ground-opacity:.45;                             /* Opacity of the “ground oval” under .card::before */
  --card-ground-spread:18px;                             /* Height of that ground-oval */
  --card-ground-inset:12px;                              /* Horizontal inset of ground-oval from card edges */

  /* Controls (✓ toggles) */
  --ctrl-lift:-1px;                                      /* Toggle control “lift” */
  --ctrl-shadow:0 6px 14px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.05);         /* Base control shadow */
  --ctrl-shadow-strong:0 10px 22px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.06); /* Strong control shadow */
  --ctrl-oval-opacity:.35;                               /* Control ground-oval opacity */

  /* Accordion (Mind) — used by /ui/css/mind.css */
  --acc-lift:-1px;                                       /* Mind row lift */
  --acc-row-shadow:0 8px 18px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.05);         /* Closed row shadow */
  --acc-row-shadow-strong:0 12px 30px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.06); /* Open/hover row shadow */
  --acc-ground-opacity:.38;                              /* Row/panel ground-oval opacity */
  --acc-ground-spread:14px;                              /* Row/panel ground-oval height */
  --acc-ground-inset:10px;                               /* Row/panel ground-oval inset */

  /* Offset used by scroll-margin when opening things under the sticky header */
  --sticky-offset: calc(var(--chipH) + 14px);            /* Consumed by .mind-row { scroll-margin-top } */
}

/* Small-screen token tweaks
   - Only chip height is reduced on very narrow phones; everything that depends
     on --chipH (e.g., sticky offset, pill sizes) adjusts automatically. */
@media (max-width:420px){
  :root{ --chipH: 26px; }
}


/* ==========================================================================
   Base
   --------------------------------------------------------------------------
   Minimal reset & base typography. Mostly page-level concerns.
   ========================================================================== */
*{ box-sizing:border-box; }            /* Include borders in element width/height calculation */

body{
  max-width: 460px;                    /* Clamp entire app width (mobile-first center column) */
  margin:0 auto;                       /* Center the app horizontally within the viewport */
  overflow-x: hidden;                   /* Prevent horizontal scroll bleed on effects */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; /* System font stack */
  color:var(--text);                   /* Base text color from tokens */
  background: var(--bg);               /* Page background from tokens */
}

ul{ margin:8px 0 0 18px; padding:0; }  /* Tighter list spacing than browser default */
li{ margin:6px 0; }                    /* Consistent vertical rhythm for list items */
.muted{ color:var(--muted); font-size:14px; } /* Utility muted text */
.k{ font-weight:700; }                 /* “Key” highlight class */
.ok{ color:var(--ok); font-weight:700; } /* Positive highlight text */

.sr-only{
  position:absolute !important;        /* Screen-reader only content */
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


/* ==========================================================================
   Header (clean, centered brand)
   Layout: LEFT login icon, CENTER logo, RIGHT initials + hamburger
   --------------------------------------------------------------------------
   The brand is absolutely centered via transform; left/right controls
   flow with flex layout. Brand box is pointer-events:none so it doesn’t
   block taps on icons underneath on small screens.
   ========================================================================== */
header{
  position:sticky; top:0; z-index:10;                      /* Sticks to top; sits over scrolled content */
  display:flex; align-items:center; gap:12px;              /* Icon cluster layout */
  padding: var(--headerPadY) var(--headerPadX);            /* Header inner padding (tokens) */
  background:#fff;                                         /* Solid header background */
  border-bottom:1px solid var(--line);                     /* Hairline divider under header */
}

/* No decorative layers while you iterate brand */
/* (If header::before/::after were used for photo/gradients, we explicitly disable them here.) */
header::before, header::after{ content:none !important; }

/* Center the brand/logo — iOS-safe (avoid left:50% drift) */
header .brand{
  position:absolute; left:0; right:0; top:50%;             /* Center horizontally; vertical center anchor */
  display:flex; justify-content:center; align-items:center;/* Center the image inside the brand box */
  transform: translateY(calc(-50% + var(--brandTopNudge)));/* Precisely center, plus optional nudge */
  pointer-events:none;                                     /* Don’t block taps to header icons */
  z-index:1;                                               /* Above header background; below menus */
}
@media (max-width:480px){
  header .brand{ transform: translateY(calc(-50% + var(--brandTopNudge-mobile))); }
}

/* Brand image: lock by height only (width auto to preserve aspect ratio) */
header .brand img{
  width:auto !important;                                   /* Prevent accidental width overrides elsewhere */
  height:var(--brandLogoH) !important;                     /* Token controls brand size desktop/tablet */
  display:block;                                           /* Remove inline-gap baseline quirks */
}
@media (max-width:480px){
  header .brand img{ height:var(--brandLogoH-mobile) !important; }
}

/* Right cluster stays at right edge */
.header-left{
  display:flex; align-items:center; gap:8px;
  margin-top: var(--chipTopNudge);
  margin-left: 10px;
  z-index: 2;
}
.header-right{
  margin-left:auto;                                        /* Push to right edge of header row */
  display:flex; align-items:center; gap:8px;               /* Horizontal cluster of pills/icons */
  margin-top: var(--chipTopNudge);                         /* Subtle vertical alignment tweak */
}
.header-right > *{ flex-shrink:0; }                        /* Don’t let items shrink/collapse */

/* Login + hamburger buttons (hit target padding via --iconTap) */
.icon-btn,
.hamburger{
  width:var(--iconTap);
  height:var(--iconTap);
  display:inline-flex; align-items:center; justify-content:center;
  appearance:none; background:transparent; border:0; border-radius:6px;
  color:var(--headerInk); cursor:pointer;
}
.icon-btn{ line-height:0; font-size:0; } /* Remove stray inline text metrics that can shift layout */
.icon-btn:focus-visible,
.hamburger:focus-visible{
  outline:2px solid rgba(0,0,0,.35);                       /* Accessible focus indication */
  outline-offset:2px;
}
.hamburger-icon{ width:var(--iconWH); height:var(--iconWH); display:block; fill:currentColor; }

/* Force consistent header icon SVG sizing (login+hamburger specifically) */
#loginBtn svg,
#hamburgerBtn svg{
  width: var(--iconWH) !important;
  height: var(--iconWH) !important;
  display:block;
  stroke-width: 3 !important;                              /* Ensure visual weight of strokes */
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke;                       /* Keep stroke widths crisp on scale */
}

/* Header dropdown menu (under hamburger) */
.hdr-menu{
  position:absolute;
  right: var(--headerPadX);                                /* Align with header right padding */
  top: calc(100% + 8px);                                   /* Drop just below header */
  z-index: 20;                                             /* Above everything in header */
  width: 50vw;
  min-width: 0;
  max-width: 260px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  box-shadow: var(--card-shadow-floating);                 /* Reuse card shadow token for consistency */
  padding:8px;
}
.hdr-menu button{
  width:100%; text-align:left;
  padding:10px 12px; border-radius:8px;
  border:1px solid transparent; background:#fff;
}
.hdr-menu button:hover{
  background:#f1f5f9; border-color:#e2e8f0;
}

/* Score pill + initials */
.score-badge{
  height: var(--chipH);
  display:inline-flex; align-items:center; justify-content:center;
  padding: 0 10px; line-height:1; font-weight:700; white-space:nowrap;
  background:#e2f7eb; border:1px solid #b7f0c7; color:var(--chip-text-score);
  border-radius:999px;
}
.pill{
  height: var(--chipH); min-width: var(--chipH);
  padding:0 6px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; font-weight:800; font-size:12px; letter-spacing:.3px;
  background:#f1f5f9; border:2px solid var(--headerInk); color:var(--headerInk); white-space:nowrap;
  appearance:none; cursor:pointer;
}

/* Auth toggles (pure CSS visibility control based on header[data-auth]) */
header[data-auth="in"]  #loginBtn{ display:none !important; }         /* Hide login when authed */
header[data-auth="in"]  #userInitials{ display:inline-flex !important; }
header:not([data-auth="in"]) #loginBtn{ display:inline-flex !important; } /* Show login when not authed */
header:not([data-auth="in"]) #userInitials{ display:none !important; }


/* ==========================================================================
   Grid + Card Shell (floating cards with soft ground ovals)
   --------------------------------------------------------------------------
   .grid lays out the cards. The .card block below is the “card shell”.
   IMPORTANT OVERRIDES:
   - The base .card sets a thin border and white bg.
   - Section variants (.card.mind/.body/.soul/.week/.mini-dash) immediately
     override the border to NONE and set their tinted backgrounds.
   - That’s why your base border won’t appear on those section cards unless
     you remove/override the later `border: none !important`.
   ========================================================================== */
.grid{
  display:grid; gap:16px; padding:16px;
  grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); /* Responsive: 1–n columns depending on width */
}

/* ---- CARD SHELL ---------------------------------------------------------
   This affects ALL .card elements (including section cards)… BUT see the
   section-specific overrides below that zero out the border.
   ------------------------------------------------------------------------ */
.card{
  position: relative;                                  /* Needed for ::before ground-oval positioning */
  border:1px solid rgba(0,0,0,.05);                    /* Thin hairline border for NEW/neutral cards */
  border-radius:16px;                                   /* Rounded corners for all cards */
  padding:16px; background:#fff;                       /* Inner padding + base white bg */
  transform: translateY(var(--card-lift));             /* Subtle “lift” (negative translate) via token */
  box-shadow: var(--card-shadow-floating);             /* Base drop shadow via tokens */
  transition: box-shadow .18s ease;                    /* Smooth hover/focus shadow transition */
  will-change: transform;                              /* Hint to browser: transform may animate (perf) */

  /* NOTE ON OVERRIDES:
     .card.mini-dash/.mind/.body/.soul/.week below set:
       background: var(--sectionTint);
       border: none !important;   ← THIS NULLIFIES the border line above
     That’s why your base border isn’t visible on the main section cards. */
}

/* The “ground oval” shadow under each card (visual depth on the page) */
.card::before{
  content:"";                                          /* Generate the oval shape element */
  position:absolute;                                   /* Position relative to .card (because .card is relative) */
  left: var(--card-ground-inset);                      /* Inset left edge (token) */
  right: var(--card-ground-inset);                     /* Inset right edge (token) */
  bottom: -10px;                                       /* Place the oval just below the card */
  height: var(--card-ground-spread);                   /* Height of the oval “puddle” */
  pointer-events:none;                                 /* Non-interactive */
  background: radial-gradient(50% 50% at 50% 50%,      /* Soft radial fade to simulate contact shadow */
    rgba(0,0,0,.18), rgba(0,0,0,0) 70%);
  filter: blur(6px);                                   /* Feather the edges */
  opacity: var(--card-ground-opacity);                 /* Strength of the oval—tweak per section if needed */
  z-index: 0;                                          /* Sits below the card content (card’s children are z-index:1) */
}

/* On hover-capable devices, deepen the card’s drop shadow */
@media (hover:hover){
  .card:hover{ box-shadow: var(--card-shadow-floating-strong); }
}

/* When any focusable within a card is focused, also deepen the card shadow */
.card:focus-within{ box-shadow: var(--card-shadow-floating-strong); }

/* Ensure all direct children render above ::before oval shadow */
.card > *{ position: relative; z-index: 1; }

/* ---- Compact sponsored card shell --------------------------------------- */
.card.ad-card{
  padding:12px;
}

.card.ad-card .ad-header{
  margin:0 0 8px;
  line-height:1.1;
  font-size:14px;
  color:var(--muted);
  font-weight:400;
}

.card.ad-card .ad-slot{
  display:flex;
  justify-content:center;
  align-items:center;
}

.fake-ad{
  box-sizing:border-box;
  width:min(var(--fake-ad-width, 320px), 100%);
  height:var(--fake-ad-height, 50px);
  border-radius:8px;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  overflow:hidden;
  background:linear-gradient(135deg, #ffffff 0%, #eef8f2 100%);
  color:#0f172a;
}

.fake-ad--rect{
  min-height:250px;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  gap:12px;
  padding:18px;
}

.fake-ad--banner{
  min-height:100px;
  padding:10px 12px;
}

.fake-ad--sky{ background:linear-gradient(135deg, #f7fcff 0%, #dff3ff 100%); }
.fake-ad--gold{ background:linear-gradient(135deg, #fffdf4 0%, #f8e7a0 100%); }
.fake-ad--mint{ background:linear-gradient(135deg, #f8fffb 0%, #ccefdc 100%); }
.fake-ad--violet{ background:linear-gradient(135deg, #fbf8ff 0%, #e7d3ff 100%); }
.fake-ad--rose{ background:linear-gradient(135deg, #fff8fa 0%, #ffd6df 100%); }
.fake-ad--green{ background:linear-gradient(135deg, #ffffff 0%, #dff6e8 100%); }
.fake-ad--blue{ background:linear-gradient(135deg, #f9fbff 0%, #d9e8ff 100%); }
.fake-ad--orange{ background:linear-gradient(135deg, #fffaf4 0%, #ffe0bd 100%); }
.fake-ad--cyan{ background:linear-gradient(135deg, #f7feff 0%, #c9f4f6 100%); }
.fake-ad--indigo{ background:linear-gradient(135deg, #f8f9ff 0%, #dde1ff 100%); }

.fake-ad-tag{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:800 10px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:#6b7280;
  background:#f3f4f6;
  border:1px solid #d1d5db;
  border-radius:999px;
  padding:3px 6px;
}

.fake-ad-copy{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font:600 12px/1.15 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

.fake-ad--rect .fake-ad-copy{
  white-space:normal;
  font-size:16px;
  line-height:1.25;
  max-width:220px;
}

.fake-ad--banner .fake-ad-copy{
  white-space:normal;
  line-height:1.2;
}

.fake-ad-copy strong{
  font-weight:900;
  color:#0b7a3f;
}

.fake-ad-cta{
  flex:0 0 auto;
  border:none;
  border-radius:999px;
  background:#0b7a3f;
  color:#fff;
  font:800 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  padding:6px 10px;
}

.fake-ad--rect .fake-ad-cta{
  padding:8px 16px;
  font-size:13px;
}

.adsbygoogle[data-ad-hidden="mock"]{
  display:none !important;
}

.tc-ad-placeholder{
  width:100%;
  min-height:50px;
}

/* ---- Section tints + colored underlines ---------------------------------
   These rules OVERRIDE the base .card background and border for the main
   dashboard cards. The `border: none !important;` here is what removes the
   hairline border you set on .card above for these specific cards.

   If you want borders on these, you must either:
     a) remove the `!important` here, or
     b) set a more specific selector (e.g., `.card.mind{ border:1px solid ... !important; }`)
------------------------------------------------------------------------- */
.card.mini-dash{ background: var(--dash);  border: none !important; }
.card.mind{      background:var(--mind);   border: none !important; }
.card.body{      background:var(--body);   border: none !important; }
.card.soul{      background:var(--soul);   border: none !important; }
.card.week{      background:var(--week);   border: none !important; }
.card.planner{   background:var(--planner); border: none !important; }

/* ===== Titlebar: shared look + flex layout (all cards) ===================
   Visuals: heavy type, colored underline (overridden per-section below).
   Layout: flexible left label, right-aligned action button.
   ======================================================================== */
.titlebar{
  /* visual style */
  font-weight:900;                                      /* Bold title */
  font-size: clamp(20px, 2.2vw, 26px);                  /* Fluid size within bounds */
  padding-bottom:8px;                                   /* Space for underline */
  margin-bottom:12px;                                   /* Space below titlebar */
  color:#0b1320;                                        /* Title color */
  border-bottom: 3px solid rgba(15,23,42,.25);          /* Default underline (overridden by section rules) */

  /* layout */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* Left label can grow; avoids pushing the button */
.titlebar .ttl{ flex:1 1 auto; min-width:0; }

/* Right action button stays hard-right */
.titlebar .js-card-btn{ flex:0 0 auto; margin-left:auto; align-self:center; }

/* Small, consistent action button size */
.card .titlebar .icon-emoji{ width:34px; height:34px; font-size:18px; }

/* Section-specific underline colors (override the default underline above) */
.card.mind .titlebar{  border-bottom-color: var(--hdr-mind); }


 /* .mind-gauntlet-circle {
  position: absolute;
  left: 50%;
  top: calc(50% - 15px);
  transform: translate(-50%, -50%);
  width: 61px;
  height: 61px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f6fcff, #7cc0df);
  border: .5px solid #3ab4e4;
  pointer-events: none;
}  */

.mind-gauntlet-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  pointer-events: none;
}
.mind-gauntlet-btn{
  position: absolute;
  left: 50%;
  top: calc(50% - 13px);
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  z-index: 2;
}
.mind-gauntlet-btn[disabled]{
  opacity: 1 !important;
}
.mind-gauntlet-btn:focus-visible{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 2px;
}
.mind-gauntlet-btn.is-live{
  cursor: pointer;
  animation: mindGauntletPulse 1.6s ease-in-out infinite;
}
@keyframes mindGauntletPulse{
  0%   { transform: translate(-50%, -50%) scale(1);   filter: drop-shadow(0 0 0 rgba(8, 28, 70, 0)); }
  50%  { transform: translate(-50%, -50%) scale(1.06); filter: drop-shadow(0 0 12px rgba(8, 28, 70, .78)); }
  100% { transform: translate(-50%, -50%) scale(1);   filter: drop-shadow(0 0 0 rgba(8, 28, 70, 0)); }
}
.card.body .titlebar{  border-bottom-color: var(--hdr-body); }
.card.soul .titlebar{  border-bottom-color: var(--hdr-soul); }
.card.week .titlebar{  border-bottom-color: var(--hdr-week); }
.card.week{ container-type:inline-size; }

/* ===== Week recap card ====================================================
   Replaces the old debug-style weekly rollup with a compact Monday-Sunday
   recap: one headline total, a few summary stats, category chips, and
   seven day rows with per-card point totals.
   ======================================================================== */
.week-summary{
  display:grid;
  gap:12px;
  margin-bottom:14px;
}
.week-titlebar{
  align-items:flex-start;
}
.week-tools{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.week-updated{
  color:#7c5f22;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.2;
  text-align:right;
  white-space:normal;
  max-width:150px;
}
.week-refresh-btn{
  width:30px;
  height:30px;
  min-width:30px;
  border-radius:999px;
  border:1px solid rgba(180, 83, 9, .24);
  background:rgba(255,255,255,.78);
  color:#7c4a03;
  font-size:17px;
  font-weight:900;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(120, 83, 22, .08);
}
.week-refresh-btn:disabled{
  opacity:.62;
  cursor:default;
}
.week-refresh-btn.is-loading{
  animation: week-refresh-spin .8s linear infinite;
}
@keyframes week-refresh-spin{
  to{ transform:rotate(360deg); }
}
.week-hero{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:12px;
  align-items:stretch;
}
.week-top-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  min-width:0;
}
.week-total-card,
.week-average-card,
.week-stat,
.week-row,
.week-chip{
  border:1px solid rgba(180, 83, 9, .14);
  background:rgba(255,255,255,.72);
  border-radius:16px;
  box-shadow:0 8px 20px rgba(120, 83, 22, .06);
}
.week-total-card{
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:112px;
  min-width:0;
}
.week-average-card{
  padding:12px 12px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:112px;
  min-width:0;
}
.week-total-label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9a6706;
  text-align:inherit;
}
.week-total-value{
  margin-top:4px;
  font-size:34px;
  font-weight:900;
  line-height:1;
  color:#111827;
  white-space:nowrap;
}
.week-average-medal{
  position:relative;
  width:62px;
  height:62px;
  border-radius:50%;
  background:
    radial-gradient(120% 90% at 30% 25%, rgba(255,255,255,.75), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 35% 30%, #f7e2c8 0%, #e7c08f 40%, #d6a66a 70%, #c08a3e 100%);
  border:1px solid #b77b2e;
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.60),
    inset 0 -10px 16px rgba(0,0,0,.07),
    0 4px 14px rgba(0,0,0,.12);
  display:grid;
  place-items:center;
  box-sizing:border-box;
  aspect-ratio:1 / 1;
}
.week-average-medal::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.9), transparent 55%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.70),
    inset 0 8px 12px rgba(0,0,0,.05);
  pointer-events:none;
}
.week-average-medal.medal--silver{
  background:
    radial-gradient(120% 90% at 30% 25%, rgba(255,255,255,.85), rgba(255,255,255,0) 56%),
    radial-gradient(circle at 35% 32%, #f9fbff 0%, #e6ecf5 36%, #d2dae6 60%, #b2bdcd 78%, #9ea9bb 100%);
  border-color:#9aa5b7;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 10px 18px rgba(0,0,0,.05),
    inset 0 -12px 18px rgba(0,0,0,.06),
    0 6px 16px rgba(0,0,0,.14);
}
.week-average-medal.medal--gold{
  background:
    radial-gradient(120% 90% at 30% 25%, rgba(255,255,255,.75), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 35% 30%, #fff4c7 0%, #f7de7f 40%, #f0cb54 70%, #e3b341 100%);
  border-color:#d7a425;
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.60),
    inset 0 -10px 16px rgba(0,0,0,.07),
    0 4px 14px rgba(227,179,65,.35);
}
.week-average-medal.medal--perfect{
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.66),
    inset 0 -10px 16px rgba(0,0,0,.07),
    0 6px 18px rgba(227,179,65,.45);
}
.week-average-score{
  position:relative;
  z-index:1;
  font-size:20px;
  font-weight:900;
  color:#111827;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.week-average-meta{
  min-height:13px;
  font-size:11px;
  font-weight:700;
  line-height:1.15;
  color:#8a6a28;
  text-align:center;
  white-space:normal;
}
.week-stat-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  min-width:0;
}
.week-stat{
  padding:10px 12px;
  display:grid;
  gap:4px;
  min-width:0;
}
.week-stat-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8a6a28;
}
.week-stat-value{
  font-size:14px;
  color:#1f2937;
  overflow-wrap:anywhere;
}
.week-category-strip{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:8px;
}
.week-chip{
  padding:9px 8px;
  text-align:center;
}
.week-chip span{
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#8a6a28;
}
.week-chip strong{
  display:block;
  margin-top:4px;
  font-size:16px;
  color:#1f2937;
}
.week-rows{
  display:grid;
  gap:10px;
}
.week-row{
  padding:11px 12px;
}
.week-row-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.week-day-meta{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
}
.week-dow{
  font-size:18px;
  font-weight:900;
  color:#111827;
}
.week-date{
  font-size:12px;
  color:#6b7280;
}
.week-day-total{
  white-space:nowrap;
  font-size:18px;
  font-weight:900;
  color:#111827;
}
.week-row-breakdown{
  margin-top:6px;
  font-size:13px;
  color:#4b5563;
}
.week-row.is-today{
  border-color:rgba(180, 83, 9, .4);
  background:rgba(255, 248, 220, .92);
}
.week-row.is-best{
  box-shadow:0 12px 24px rgba(180, 83, 9, .12);
}
.week-row.is-future{
  opacity:.78;
}

@container (min-width:680px){
  .week-hero{
    grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
  }
  .week-stat-grid{
    grid-template-columns:minmax(0, 1fr);
  }
}

@media (max-width:480px){
  .week-titlebar{
    align-items:center;
  }
  .week-tools{
    gap:6px;
  }
  .week-updated{
    max-width:112px;
    font-size:10.5px;
  }
  .week-hero{
    grid-template-columns:1fr;
  }
  .week-top-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .week-stat-grid{
    grid-template-columns:minmax(0, 1fr);
  }
  .week-total-value{
    font-size:28px;
  }
  .week-category-strip{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width:360px){
  .week-top-grid{
    grid-template-columns:minmax(0, 1fr);
  }
  .week-category-strip{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}


/* ===== Mini Dashboard date header (simple + centered) ====================
   Only applies inside the .card.mini-dash card.
   ======================================================================== */
.card.mini-dash .dash-datewrap{
  padding: 8px 8px 8px;                 /* Tight vertical spacing for date area */
  text-align:center;                     /* Center the date text */
}
.card.mini-dash .dash-datewrap time{
  font: 800 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; /* Compact, bold date */
  color:#0f172a; letter-spacing:.2px;
}
.card.mini-dash .dash-datewrap::after{
  content:""; display:block; width:80%; height:1px; margin:6px auto 0; /* Decorative hairline under date */
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.08) 15%,
    rgba(0,0,0,.12) 50%,
    rgba(0,0,0,.08) 85%,
    rgba(0,0,0,0) 100%);
  border-radius:1px;
}


/* ==========================================================================
   Icon pill buttons (titlebar) — single source of truth
   --------------------------------------------------------------------------
   Reusable circular buttons for emoji/SVG icons (e.g., Achievements).
   The sizing inside titlebars is further tuned by variables below.
   ========================================================================== */

/* Base button used across the app */
.icon-emoji{
  width: 36px;
  height: 36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;                                  /* Fully rounded pill */
  border: 1px solid #cbd5e1;                             /* Hairline border */
  background: #fff;                                      /* White pill background */
  font-size: 18px;                                       /* Emoji size if using text emoji */
  line-height: 1;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, transform .04s ease;
}
.icon-emoji:hover{ background:#f1f5f9; }                 /* Light hover feedback */
.icon-emoji:active{ transform: translateY(0.5px); }      /* Tiny press depth */
.icon-emoji:focus-visible{ outline: 2px solid rgba(0,0,0,.35); outline-offset: 2px; } /* A11y focus */

/* ── Titlebar-specific sizing (emoji or SVG inside the pill) ────────────── */
/* All sizes flow from these three variables. Tweak here only. */
:root{
  --title-pill: 32px;       /* pill diameter in titlebars (we made it 4px smaller) */
  --title-icon: 22px;       /* SVG icon size inside titlebar pill */
  --title-emoji: 20px;      /* emoji font-size inside titlebar pill */
}

/* Apply the variables to pills when they’re in a .titlebar context */
.card .titlebar .icon-emoji{
  width: var(--title-pill);
  height: var(--title-pill);
  color: var(--text);       /* Ensure stroked SVGs inherit readable ink */
}

/* Scope the image sizing/reset to titlebar only (so base pill visuals stay intact) */
.card .titlebar .icon-emoji .card-icon{
  width: 28px;             /* Image size inside the pill (adjustable) */
  height: 28px;
  display: block;
  object-fit: contain;
}
/* Minimal reset: keep background/border from .icon-emoji; only fix inline text metrics */
.card .titlebar .icon-emoji{
  line-height: 0;          /* Prevent vertical wiggle from inline metrics */
  padding: 0;              /* Keep icon snug without extra padding */
}

.titlebar .js-card-btn svg{
  width: var(--title-icon);
  height: var(--title-icon);
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
  display: block;
}

.titlebar .js-card-btn .emoji{
  font-size: var(--title-emoji);
  line-height: 1;
  display: block;
}

/* Narrow phones: scale down titlebar pill/icon sizes */
@media (max-width:360px){
  :root{
    --title-pill: 30px;
    --title-icon: 20px;
    --title-emoji: 18px;
  }
}


/* Achievements icon: tint the medal coin with brand accent
   (Targets the .coin part inside the SVG.) */
.icon-card-ach .coin{
  fill: color-mix(in srgb, var(--chip-text-score, #0ea5e9) 65%, #fff 35%);
}


/* ==========================================================================
   Shared Components
   --------------------------------------------------------------------------
   Small reusable elements like chips and rows.
   ========================================================================== */
.chip{
  display:inline-block; padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
  font-size:12px;
  margin-right:6px; margin-top:6px;
  background:#ffffff60;                           /* Slight translucency for visual layering */
}
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }  /* Generic horizontal row */

button{
  padding:10px 14px; border-radius:10px;
  border:1px solid #cbd5e1; background:#fff;
  color:var(--text); cursor:pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
button:hover{ background:#f1f5f9; }               /* Soft button hover */


/* ==========================================================================
   Generic Collapsibles (<details/summary>)
   --------------------------------------------------------------------------
   Used outside the Mind accordion (Mind uses its own in /ui/css/mind.css).
   ========================================================================== */
details{ border:none; border-radius:12px; background:#ffffff80; }
details:not(.pill-dropdown) + details:not(.pill-dropdown){ margin-top:10px; } /* Spacing between peers */
summary{
  list-style:none; cursor:pointer; padding:10px 12px; user-select:none;
  display:flex; align-items:center; gap:10px;
}
summary::-webkit-details-marker{ display:none; }  /* Hide default marker */
.caret{ transition: transform .2s ease; }
details[open] .caret{ transform: rotate(90deg); }/* Rotate custom caret on open */
.content{
  padding:10px 14px 12px 14px;
  border-top:1px solid rgba(0,0,0,.06);
  background:#fff; border-radius:0 0 12px 12px;
}


/* ==========================================================================
   Shared Utilities + Theme helpers
   ========================================================================== */
[hidden]{ display:none !important; }                /* Hard hide utility */

.panel-acc button.locked{ pointer-events:none; opacity:.9; } /* Disable buttons visually/interaction */
.btn-pass{ background:#dcfce7; border-color:#16a34a; color:#065f46; } /* Positive button theme */
.btn-fail{ background:#fee2e2; border-color:#ef4444; color:#991b1b; } /* Negative button theme */

.pill-theme-amber{
  --recipe-pill-bg:#fff7ed; --recipe-pill-hover:#ffedd5; --recipe-pill-open:#ffffff;
  --recipe-pill-border:#fed7aa; --recipe-pill-text:#7c2d12;
}
.pill-theme-lilac{
  --recipe-pill-bg:#f3e8ff; --recipe-pill-hover:#ede9fe; --recipe-pill-open:#ffffff;
  --recipe-pill-border:#ddd6fe; --recipe-pill-text:#4c1d95;
}
.pill-font-poppins{ --recipe-pill-font:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial; }
.pill-font-inter{   --recipe-pill-font:"Inter",   system-ui, -apple-system, Segoe UI, Roboto, Arial; }

/* Prevent Chrome’s “layout jump” on expanding sections near viewport edge
   (opt-out of scroll anchoring to avoid auto scroll corrections) */
#bodyCard, #weekPlan{ overflow-anchor: none; }

/* ── Dialog base & native backdrop ─────────────────────────────────────────
   Styles for <dialog class="modal"> (native) with a customized backdrop.
--------------------------------------------------------------------------- */
dialog.modal{
  border:0; border-radius:12px; padding:0;
  width:min(92vw, 460px);                           /* Mobile-friendly width clamp */
  box-shadow: var(--card-shadow-floating-strong);   /* Strong elevation for modal */
}
dialog.modal::backdrop{
  background: rgba(0,0,0,.45);                      /* Dim page behind dialog */
  backdrop-filter: blur(1px);                       /* Subtle blur if supported */
}

/* ── Fallback (for iOS that lacks/bugs showModal) ─────────────────────────
   When .is-open is added by JS, we emulate a modal using fixed positioning
   and add a sibling .modal-backdrop manually.
--------------------------------------------------------------------------- */
dialog.modal.is-open{
  position: fixed;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}
.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(1px);
  z-index: 999;
}

/* Scoring modal content spacing */
#scoringInfo .modal-hd{
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(15,23,42,.10);
}
#scoringInfoTitle{
  font-size:20px;
  line-height: 1.1;
}
#scoringInfo .modal-bd{
  padding: 12px 16px;
  font-size: 17px;
}
#scoringInfo .modal-ft{
  padding: 0 16px 14px;
}
#scoringInfo .modal-bd .scoring-h{
  margin: 12px 0 6px;
  font-size: 16px;
  line-height: 1.25;
}
#scoringInfo .modal-bd .scoring-list{
  margin: 0 0 8px;
  padding-left: 18px;
}
#scoringInfo .modal-bd .scoring-list li{
  margin: 4px 0;
  line-height: 1.3;
}

/* Mini-dashboard info modal spacing */
#miniDashInfo .modal-hd{
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(15,23,42,.10);
}
#miniDashInfo .modal-bd{
  padding: 12px 14px;
}
#miniDashInfo .modal-ft{
  padding: 0 14px 12px;
}
#miniDashInfo .modal-bd .mini-info-list{
  margin: 8px 0 0;
  padding-left: 18px;
}
#miniDashInfo .modal-bd .mini-info-list li{
  margin: 4px 0;
  line-height: 1.3;
}

/* Achievements modal spacing */
#cardsModal .modal-hd{
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(15,23,42,.10);
}
#cardsModal .modal-bd{
  padding: 12px 14px;
}
#cardsModal .modal-ft{
  padding: 0 14px 12px;
}
#cardsModal .modal-bd p{
  margin: 0 0 10px;
}
#aboutAppModal .modal-hd,
#newsAppModal .modal-hd{
  padding: 14px 16px 10px;
}
#aboutAppModal .modal-bd,
#newsAppModal .modal-bd{
  padding: 12px 16px;
  font-size: 17px;
}
#aboutAppModal .modal-ft,
#newsAppModal .modal-ft{
  padding: 0 16px 14px;
}
#aboutAppModal .modal-bd p,
#newsAppModal .modal-bd p{
  margin:0;
  line-height:1.4;
}
#aboutAppModal .modal-bd p + p,
#newsAppModal .modal-bd p + p{
  margin-top:10px;
}

/* Hamburger menu modals: match the warm demo/archive modal treatment */
#cardsModal,
#scoringInfo,
#aboutAppModal,
#newsAppModal,
#miniDashInfo{
  background: linear-gradient(180deg, #fff9df 0%, #ffefb5 100%);
  border: 1px solid rgba(177, 122, 12, .32);
  color:#102033;
}
#cardsModal .modal-hd,
#scoringInfo .modal-hd,
#aboutAppModal .modal-hd,
#newsAppModal .modal-hd,
#miniDashInfo .modal-hd{
  background: rgba(255, 244, 201, .86);
  border-bottom-color: rgba(177, 122, 12, .22);
}
#cardsModal .modal-ft,
#scoringInfo .modal-ft,
#aboutAppModal .modal-ft,
#newsAppModal .modal-ft,
#miniDashInfo .modal-ft{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
#cardsModal .modal-ft button,
#scoringInfo .modal-ft button,
#aboutAppModal .modal-ft button,
#newsAppModal .modal-ft button,
#miniDashInfo .modal-ft button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  min-width:76px;
  padding:0 18px;
  border-radius:14px;
  border:1px solid #cbd5e1;
  background:rgba(255,255,255,.7);
  color:#1f2f44;
  font:800 15px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* ==========================================================================
   Mind Gauntlet modal (fullscreen overlay)
   -------------------------------------------------------------------------- */
.gauntlet-modal{
  position:fixed;
  inset:0;
  z-index: 9999;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gauntlet-scrim{
  position:absolute;
  inset:0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(3px);
}
.gauntlet-shell{
  position:relative;
  width: min(96vw, 520px);
  max-height: 92vh;
  background: linear-gradient(180deg, #6e91bc 0%, #d3e0f0 52%, #f4f8fd 100%);
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.30);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  z-index: 1;
}
.gauntlet-banner{
  width:100%;
  background: transparent;
  border-bottom:1px solid rgba(0,0,0,.18);
  padding: 4px 0 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.gauntlet-banner img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}
.gauntlet-banner .gauntlet-banner-logo{
  max-height:64px;
}
.gauntlet-banner .gauntlet-banner-vs{
  width:auto;
  max-width:100%;
  height:50px;
  object-fit:contain;
  margin-top:-9px;
}
.gauntlet-header{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.18);
  background: transparent;
  position:sticky;
  top:0;
  z-index: 2;
  color:#f8fafc;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.gauntlet-header .g-left{ display:flex; flex-direction:column; gap:2px; }
.gauntlet-header .g-title{ font-weight:900; font-size:18px; color:#f8fafc; }
.gauntlet-header .g-sub{ font-size:12px; color:#e2e8f0; }
.gauntlet-header .g-mid{ text-align:center; }
.gauntlet-header .g-timer{ font-weight:800; display:flex; gap:8px; align-items:center; justify-content:center; }
.gauntlet-header #gTime{ font-variant-numeric: tabular-nums; min-width:52px; text-align:right; }
.gauntlet-header .g-penalty{ color:#f97316; font-weight:700; }
.gauntlet-header .g-progress{ font-size:12px; color:#e2e8f0; margin-top:2px; }
.gauntlet-header .g-close{
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  width:34px; height:34px;
  display:grid; place-items:center;
  background: linear-gradient(180deg, #b91c1c, #7f1d1d);
  color:#f8fafc;
  box-shadow: 0 8px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter: blur(4px);
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
  font-weight:900;
  font-size:18px;
  line-height:1;
  padding:0;
}
.gauntlet-header .g-close:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.45);
}
.gauntlet-header .g-close:active{
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3);
}
.gauntlet-body{
  padding:14px;
  overflow:auto;
}
.gauntlet-vs-bottom{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:6px 10px 8px;
  border-top:1px solid rgba(0,0,0,.14);
}
.gauntlet-vs-bottom .gauntlet-banner-vs{
  height:50px;
  width:auto;
  max-width:100%;
  object-fit:contain;
}

/* Gameplay mode: timer + puzzles, with more vertical room */
.gauntlet-shell.is-running{
  width: min(97vw, 560px);
  max-height: 95vh;
}
.gauntlet-shell.is-results{
  width:min(94vw, 404px);
  max-height:none;
  background:transparent;
  border:none;
  box-shadow:none;
  overflow:visible;
}
.gauntlet-shell.is-results .gauntlet-banner,
.gauntlet-shell.is-results .gauntlet-header,
.gauntlet-shell.is-results .gauntlet-body,
.gauntlet-shell.is-results .gauntlet-vs-bottom,
.gauntlet-shell.is-results .g-info-modal{
  display:none;
}
.gauntlet-modal.is-results .gauntlet-scrim{
  display:none;
}
.gauntlet-shell.is-running .gauntlet-banner,
.gauntlet-shell.is-running .gauntlet-vs-bottom,
.gauntlet-shell.is-running .gauntlet-header .g-left,
.gauntlet-shell.is-running .gauntlet-header .g-progress{
  display:none;
}
.gauntlet-shell.is-running .gauntlet-header{
  padding:8px 12px;
  justify-content:space-between;
}
.gauntlet-shell.is-running .gauntlet-body{
  padding:10px 12px 12px;
}
.g-message{
  background: rgba(255, 240, 230, .9);
  border: 1px solid rgba(220, 120, 70, .35);
  color: #5a2a12;
  padding:10px 12px;
  border-radius:12px;
  margin-bottom:10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.g-controls{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  min-height:40px;
  margin-bottom:12px;
}
#gStartBtn{
  border:1px solid rgba(122, 20, 0, .55);
  color:#fff;
  font-weight:900;
  background: linear-gradient(180deg, #ff6a00 0%, #ff2d00 58%, #d31a00 100%);
  box-shadow: 0 8px 20px rgba(255, 77, 0, .30), inset 0 1px 0 rgba(255,255,255,.25);
}
#gStartBtn:hover{
  filter: brightness(1.05);
}
#gStartBtn:disabled{
  opacity:.6;
  box-shadow:none;
}
.g-info-btn{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background: linear-gradient(180deg, #16a34a, #0f8a3f);
  color:#fff;
  font:900 18px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  display:grid;
  place-items:center;
  cursor:pointer;
  padding:0;
  box-sizing:border-box;
  -webkit-appearance:none;
  appearance:none;
  box-shadow: 0 6px 14px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.28);
}
.g-info-btn svg{
  width:18px;
  height:18px;
  display:block;
  margin:0;
}
.g-info-btn:hover{
  filter: brightness(1.06);
}
.g-info-modal{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(1px);
}
.g-info-card{
  width:min(90%, 420px);
  background:#fff;
  border-radius:14px;
  box-shadow: 0 20px 42px rgba(0,0,0,.26);
  border:1px solid rgba(15,23,42,.10);
}
.g-info-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid rgba(15,23,42,.10);
}
.g-info-body{
  padding:10px 14px 12px;
  color:#0f172a;
}
.g-info-body ul{
  margin:0;
  padding-left:18px;
}
.g-info-body li{
  margin:4px 0;
  line-height:1.3;
}
.g-info-close{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background: linear-gradient(180deg, #b91c1c, #7f1d1d);
  color:#f8fafc;
  font:900 18px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  display:grid;
  place-items:center;
  padding:0;
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.3);
}
.g-label{
  font-weight:800;
  margin-bottom:8px;
  color:#0f172a;
}
.g-puzzle{ width:100%; }
.g-section{
  background:transparent;
  border:none;
  padding:0;
  margin-bottom:12px;
  box-shadow:none;
}
.g-solved{
  opacity: .92;
  pointer-events: none;
}
.gauntlet-shell .g-row{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:12px 14px; border-radius:12px; cursor:pointer; text-align:left;
  border:1px solid rgba(0,0,0,.10); background:var(--g-row, var(--mind-row, #e2e8f0));
  font:800 16px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  -webkit-appearance:none; appearance:none; background-image:none;
  -webkit-tap-highlight-color:transparent;
  position:relative; transform:translateY(var(--acc-lift));
  box-shadow:var(--acc-row-shadow); z-index:1;
  transition: box-shadow .18s ease, transform .12s ease, background-color .12s ease;
  color:#0f172a;
}
@media (hover:hover) and (pointer:fine){
  .gauntlet-shell .g-row[aria-expanded="false"]:hover{
    background: var(--g-row-hover, var(--g-row));
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    transform: translateY(calc(var(--acc-lift) - 1px));
  }
}
.gauntlet-shell .g-row[aria-expanded="true"]{
  background: var(--g-row-open, var(--g-row));
  box-shadow: 0 10px 26px rgba(0,0,0,.20);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.gauntlet-shell .g-row:focus-visible{
  outline:2px solid var(--pill-focus-ring);
  outline-offset:3px; border-radius:12px;
}
.gauntlet-shell .g-row::before{
  content:"";
  position:absolute; left:var(--acc-ground-inset); right:var(--acc-ground-inset);
  bottom:-9px; height:var(--acc-ground-spread); pointer-events:none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.18), rgba(0,0,0,0) 70%);
  filter:blur(5px); opacity:var(--acc-ground-opacity); z-index:0;
}
.gauntlet-shell .g-row .label{ flex:1; }
.gauntlet-shell .g-row .row-right{ display:flex; align-items:center; gap:8px; }
.gauntlet-shell .g-row .chev{ font-size:18px; line-height:1; user-select:none; transition: transform .18s ease; }
.gauntlet-shell .g-row[aria-expanded="true"] .chev{ transform: rotate(180deg); }

.gauntlet-shell .g-panel{
  background:#fff; border:none; border-radius:12px; padding:10px 12px;
  position:relative; transform:translateY(var(--acc-lift));
  box-shadow:var(--acc-row-shadow);
  overflow:visible;
  transition: box-shadow .18s ease, transform .12s ease;
}
.gauntlet-shell .g-row[aria-expanded="true"] + .g-panel:not([hidden]){
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: -1px;
  border-top: 1px solid rgba(0,0,0,.10);
}
.gauntlet-shell .g-panel::before{
  content:"";
  position:absolute; left:calc(var(--acc-ground-inset) - 2px); right:calc(var(--acc-ground-inset) - 2px);
  bottom:-10px; height:calc(var(--acc-ground-spread) + 2px); pointer-events:none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.16), rgba(0,0,0,0) 70%);
  filter:blur(6px); opacity:var(--acc-ground-opacity); z-index:0;
}
.gauntlet-shell .g-panel > *{ position:relative; z-index:1; }

/* Per-kind row colors mirror the Mind Card tokens. */
.gauntlet-shell .g-row--trivia{
  --g-row:var(--mind-trivia-closed, #8accf1);
  --g-row-hover:var(--mind-trivia-hover, #8accf1);
  --g-row-open:var(--mind-trivia-open, #8accf1);
}
.gauntlet-shell .g-row--crossword{
  --g-row:var(--mind-crossword-closed, #f0d27f);
  --g-row-hover:var(--mind-crossword-hover, #f0d27f);
  --g-row-open:var(--mind-crossword-open, #f0d27f);
}
.gauntlet-shell .g-row--sudoku{
  --g-row:var(--mind-sudoku-closed, #8eeebe);
  --g-row-hover:var(--mind-sudoku-hover, #8eeebe);
  --g-row-open:var(--mind-sudoku-open, #8eeebe);
}
.gauntlet-shell .g-row--wordsearch{
  --g-row:var(--mind-wordsearch-closed, #c697f1);
  --g-row-hover:var(--mind-wordsearch-hover, #c697f1);
  --g-row-open:var(--mind-wordsearch-open, #c697f1);
}
.gauntlet-shell .g-row--logic{
  --g-row:var(--mind-logic-closed, #eb8f94);
  --g-row-hover:var(--mind-logic-hover, #eb8f94);
  --g-row-open:var(--mind-logic-open, #eb8f94);
}

/* Per-panel backgrounds (mirror Mind) */
#g-panel-trivia.g-panel{ background:#e7faff; }
#g-panel-crossword.g-panel{ background:#fffbed; }
#g-panel-sudoku.g-panel{ background:#f7fff4; }
#g-panel-wordsearch.g-panel{ background:#fbf5ff; }
#g-panel-logic.g-panel{ background:#fffafb; }

/* Keep gauntlet puzzle footprints aligned with regular Mind card sizing */
#g-panel-logic.g-panel{
  --lg-gap:10px;
  --lg-max:270px;
  --lg-opt:70px;
}
#g-panel-logic.g-panel .lg-wrap{
  width:100%;
}
#g-panel-logic.g-panel .lg-grid{
  width:min(100%, var(--lg-max));
}
#g-panel-logic.g-panel .lg-choices{
  width:min(100%, var(--lg-max));
}
#g-panel-crossword.g-panel .cw-inline{
  width:100%;
}
#g-panel-crossword.g-panel .cw-kbd{
  width:100%;
  max-width:100%;
  overflow-x:auto;
}
#g-panel-crossword.g-panel .cw-kbd .row{
  justify-content:flex-start;
}
@media (max-width:380px){
  #g-panel-logic.g-panel{ --lg-opt:62px; }
}

.gauntlet-shell .g-placeholder{
  height:56px;
  border-radius:12px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(0,0,0,.05);
}
.g-results{
  position:absolute;
  inset:0;
  background: rgba(15,23,42,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 3;
}
.gauntlet-shell.is-results .g-results{
  position:relative;
  inset:auto;
  background:transparent;
  width:100%;
  z-index:1;
}
.g-results-card{
  background:#ffffff;
  border-radius:16px;
  padding:18px 18px 16px;
  min-width: 320px;
  width: min(92vw, 420px);
  text-align:center;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  border:1px solid rgba(15,23,42,.10);
}
.gauntlet-shell.is-results .g-results-card{
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
  padding:0;
  min-width:0;
  width:100%;
  position:relative;
}
.g-results-card.tier-gold{
  background: linear-gradient(180deg, #fff7dc 0%, #f7e5a6 100%);
  border-color:#d8b24a;
}
.g-results-card.tier-silver{
  background: linear-gradient(180deg, #f8fbff 0%, #dde5f0 100%);
  border-color:#aab6c8;
}
.g-results-card.tier-bronze{
  background: linear-gradient(180deg, #fbe9dc 0%, #e8bf9c 100%);
  border-color:#c78952;
}
.g-results-card.tier-highfive{
  background: linear-gradient(180deg, #edf5ee 0%, #d6e5d7 100%);
  border-color:#92b098;
}
.g-result-preview{
  width:min(100%, 360px);
  height:auto;
  display:block;
  margin:0 auto 16px;
  border-radius:18px;
  box-shadow: 0 12px 28px rgba(15,23,42,.16);
}
.gauntlet-shell.is-results .g-result-preview{
  width:min(100%, 372px);
  margin:0 auto;
}
.g-results-actions{ margin-top:0; display:flex; justify-content:center; gap:10px; }
.gauntlet-shell.is-results .g-results-actions{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  gap:12px;
  pointer-events:none;
}
.gauntlet-shell.is-results .g-results-actions > *{
  pointer-events:auto;
}
.gauntlet-shell.is-results .g-results-actions .btn{
  min-width:96px;
  border-radius:999px;
  border:1px solid rgba(214, 203, 255, .55);
  background: linear-gradient(180deg, rgba(105, 83, 191, .96) 0%, rgba(74, 56, 155, .96) 52%, rgba(43, 30, 103, .98) 100%);
  color:#f8fbff;
  box-shadow: 0 12px 28px rgba(22, 16, 60, .34), inset 0 1px 0 rgba(255,255,255,.24);
  text-shadow: 0 1px 2px rgba(12, 10, 30, .42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.g-share-btn{
  border:1px solid rgba(136, 98, 33, .20);
  background:#fff;
  color:#1f2937;
  box-shadow: 0 2px 5px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.55);
}
.gauntlet-shell.is-results .g-share-btn{
  border-color: rgba(230, 220, 255, .62);
  background: linear-gradient(180deg, rgba(126, 101, 224, .98) 0%, rgba(93, 72, 196, .98) 55%, rgba(58, 39, 144, .98) 100%);
}
.gauntlet-shell.is-results .g-results-actions .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(22, 16, 60, .40), inset 0 1px 0 rgba(255,255,255,.28);
  filter: brightness(1.05);
}
.gauntlet-shell.is-results .g-results-actions .btn:active{
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(22, 16, 60, .28), inset 0 1px 0 rgba(255,255,255,.2);
}
.gauntlet-shell.is-results .g-results-actions .btn:focus-visible{
  outline:2px solid rgba(223, 216, 255, .9);
  outline-offset:2px;
}
.gauntlet-shell.is-results .g-share-icon{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='8.2' y1='11.2' x2='15.8' y2='6.7' stroke='%23f8fbff' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='8.2' y1='12.8' x2='15.8' y2='17.3' stroke='%23f8fbff' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='12' r='3.1' fill='%23f8fbff'/%3E%3Ccircle cx='18' cy='5' r='3.1' fill='%23f8fbff'/%3E%3Ccircle cx='18' cy='19' r='3.1' fill='%23f8fbff'/%3E%3C/svg%3E");
}
.g-share-icon{
  width:14px;
  height:14px;
  display:inline-block;
  flex:0 0 14px;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='8.2' y1='11.2' x2='15.8' y2='6.7' stroke='%231f2937' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='8.2' y1='12.8' x2='15.8' y2='17.3' stroke='%231f2937' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='12' r='3.1' fill='%231f2937'/%3E%3Ccircle cx='18' cy='5' r='3.1' fill='%231f2937'/%3E%3Ccircle cx='18' cy='19' r='3.1' fill='%231f2937'/%3E%3C/svg%3E");
  transform: translateY(1px);
}

/* Account modal (initials pill) */
.account-modal .modal-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background: transparent;
}
.account-modal .modal-hd .k{
  font-size: 18px;
}
.account-modal{
  position: fixed;
  left: 50%;
  top: 72px;
  transform: translateX(-50%);
  margin: 0;
  width: min(92vw, 420px);
  --md-center: #fff9de;
  --md-edge: #ffffff;
  --md-center-y: 180%;
  background: radial-gradient(
    circle farthest-corner at 50% var(--md-center-y),
    var(--md-center) 0%,
    var(--md-center) 20%,
    var(--md-edge) 100%
  );
  background-clip: padding-box;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.account-modal .modal-bd{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding: 12px 12px 16px;
}
.account-card{
  padding:12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  background:#fff;
}
.account-name{
  font-weight:700;
  color:var(--headerInk);
}
.account-email{
  font-size:13px;
  margin-top:2px;
}
.account-actions{
  display:flex;
  gap:10px;
  margin-bottom: 2px;
}
.account-actions .btn{
  flex:1;
}
.btn.danger{
  background:#fee2e2;
  border-color:#ef4444;
  color:#991b1b;
}
.modal-close{
  width:32px;
  height:32px;
  border-radius:999px;
  font-size:14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ------ MINI DASHBOARD SHADOW ---------
   This rule is your recent tweak:
   - It applies ONLY to .card.mini-dash (not other cards).
   - Because earlier .card.mini-dash sets `border: none !important;`,
     you re-introduce a border here with higher specificity and !important.
   - The color is a warm hairline to match the yellowish week theme.
--------------------------------------- */
.card.mini-dash{

  /* Mini-dash: soft hairline to define edges
     NOTE: This WINS because:
       - Same selector specificity (.card.mini-dash),
       - Declared later in the file,
       - Uses !important, which overrides the earlier `border:none !important`. */
  border:1px solid rgba(255, 254, 220, 0.65) !important;

}
/* ==========================================================================
   Meals: row layout + swap pill (NEW)
   --------------------------------------------------------------------------
   Why here (app.css)?
   - The swap pill is a shared UI control (like the ✓ pill), not specific
     to recipe styling; keeping it global avoids duplication.

   What you get:
   1) .meal-row   – a predictable 3-part flex row: [✓] [text] [⇄]
   2) .meal-text  – flexible text block that never crowds the right action
   3) .swap-btn   – circular pill that visually matches the ✓ control,
                    pinned HARD to the right via margin-left:auto
   ========================================================================== */

/* 1) A sturdy flex row so actions have a stable anchor on the far right */
.meal-row{
  display:flex;
  align-items:flex-start;    /* keeps icon/top lines aligned nicely */
  gap:.75rem;                /* breathing room between ✓, text, and ⇄ */
}

/* 2) The middle text column expands, letting the right control stay fixed */
.meal-text{
  flex:1 1 auto;             /* grow/shrink with available width */
  min-width:0;               /* prevents overflow-induced wrapping weirdness */
}

/* 3) Swap pill: mirrors the visual of your check pill and stays at hard-right */
.swap-btn{
  /* sizing & shape (mirrors the check pill look) */
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;

  /* layout */
  display:grid;
  place-items:center;
  margin-left:auto;          /* <<< pins the control to the far right */
  cursor:pointer;

  /* depth & micro-interactions */
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:box-shadow .12s ease, transform .04s ease, border-color .12s ease;
}
.swap-btn:hover{
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  border-color:rgba(0,0,0,.18);
}
.swap-btn:active{
  transform:translateY(1px);
}
/* Accessible focus ring consistent with other controls */
.swap-btn:focus-visible{
  outline:2px solid var(--pill-focus-ring, #3b82f6);
  outline-offset:2px;
}

/* Keep the inline SVG clean and crisp */
.swap-btn svg{
  width:14px;
  height:14px;
  display:block;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

/* Optional: if you want a tiny nudge on *all* circular controls, reuse this */
.meal-toggle,
.swap-btn{
  will-change: transform, box-shadow;
}

/* ==========================================================================
   End of NEW section
   ========================================================================== */


/* Legal footer links used across app, demo, archive, and account pages. */
.app-legal-links {
  width: min(100%, 460px);
  margin: 10px auto 30px;
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  color: #5b6c80;
  font-size: .82rem;
  line-height: 1.4;
  text-align: center;
}

.app-legal-links a {
  color: #1f5f8b;
  font-weight: 700;
  text-decoration: none;
}

/* Session / connection banner for long-lived app tabs */
.session-banner{
  position: sticky;
  top: 58px;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(430px, calc(100% - 24px));
  margin: 8px auto 0;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(22, 163, 74, .28);
  background: #f0fdf4;
  color: #14532d;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .10);
  font: 700 13px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}
.session-banner[hidden]{ display:none !important; }
.session-banner.is-expired{
  border-color: rgba(22, 163, 74, .32);
  background: #ecfdf5;
  color: #14532d;
}
.session-banner.is-restored{
  border-color: rgba(22, 101, 52, .28);
  background: #ecfdf5;
  color: #14532d;
}
.session-banner span{ flex:1 1 auto; min-width:0; }
.session-banner button{
  flex:0 0 auto;
  min-height: 32px;
  border: 1px solid rgba(21, 128, 61, .75);
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  color: #ffffff;
  border-radius: 999px;
  padding: 0 14px;
  box-shadow: 0 5px 12px rgba(21, 128, 61, .22);
  font: 850 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  letter-spacing: 0;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.session-banner button:hover{
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 7px 14px rgba(21, 128, 61, .28);
}
.session-banner button:active{
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(21, 128, 61, .20);
}
.session-banner button:focus-visible{
  outline: 3px solid rgba(74, 222, 128, .45);
  outline-offset: 2px;
}
.session-banner button:disabled{
  cursor: not-allowed;
  opacity: .72;
  box-shadow: none;
}
.session-banner button[hidden]{ display:none !important; }