/* ── THEME REFRESH ("colorful refresh", design/colorful-refresh, 2026-10-02) ──
   Design look only. Every rule is scoped under body.theme-refresh, a class
   app.js adds only when THEME_REFRESH is true, so with the flag off this
   file matches nothing. Component rules are further scoped to #app (the
   signed-in shell) and #modal-overlay, so the sign-in and registration
   screens are untouched. Loaded after styles.css. Mockups:
   ../design-refresh/mockups. Report:
   ../reports/100226_implementation_report_design_refresh_local.txt. */

/* ── Tokens ──
   Text on every tint pairs with its own darker "-ink" color, checked for
   WCAG AA (4.5:1 for normal text). Teal (#00A67E) is for icons and accents
   only, never small text. The existing variable names are re-pointed so
   inline var(--teal)/var(--muted)/... in app.js pick up the palette:
   --teal becomes the link blue (it's used for links and small text),
   --muted/--light the secondary text color. */
body.theme-refresh #app,
body.theme-refresh #modal-overlay,
body.theme-refresh #toast {
  --tr-blue:        #2456DB;
  --tr-link:        #1D46B8;
  --tr-teal:        #00A67E;
  --tr-green:       #1F8A2E;
  --tr-action:      #00805F;
  --tr-text:        #16305E;
  --tr-text-2:      #3A4F74;
  --tr-page:        #F4F6F9;
  --tr-line:        #E1E7F0;
  --tr-input-line:  #CDD7E5;

  --tr-mint:        #E6F6F2;  --tr-mint-ink:     #0B6B52;
  --tr-sky:         #E8F0FF;  --tr-sky-ink:      #1D46B8;
  --tr-lavender:    #EFEAFB;  --tr-lavender-ink: #5534B5;
  --tr-peach:       #FFF1E6;  --tr-peach-ink:    #9A4508;
  --tr-butter:      #FFF7DA;  --tr-butter-ink:   #6F5200;
  --tr-leaf:        #E9F5EB;  --tr-leaf-ink:     #1C6B28;

  --tr-radius-card: 20px;
  --tr-radius-ctl:  12px;
  --tr-shadow:      0 1px 2px rgba(22,48,94,0.05), 0 6px 20px rgba(22,48,94,0.06);

  --text:     var(--tr-text);
  --muted:    var(--tr-text-2);
  --light:    var(--tr-text-2);
  --teal:     var(--tr-link);
  --teal-dark: var(--tr-mint-ink);
  --teal-bg:  var(--tr-mint);
  --mint:     var(--tr-mint);
  /* #1F8A2E is 4.44:1 on white, under AA for small text; text that uses var(--green)
     (Synced, "Active" badges, legend dots) gets the darker leaf ink instead. */
  --green:    var(--tr-leaf-ink);
  --gold:     var(--tr-butter-ink);
  --gold-bg:  var(--tr-butter);
  --bg:       var(--tr-page);
  --surface2: #F1F4F9;
  --border:   var(--tr-line);
  --radius:   var(--tr-radius-card);
  --radius-sm: var(--tr-radius-ctl);
  --shadow:   var(--tr-shadow);
  --topbar-h: 72px;
  --disclaimer-h: 46px;

  font-family: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  color: var(--tr-text);
}
body.theme-refresh { background: #F4F6F9; }
body.theme-refresh :is(#app, #modal-overlay) :is(button, input, select, textarea) { font-family: inherit; }

/* ── Top bar: white, same controls, same order ── */
body.theme-refresh #topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--tr-line);
  box-shadow: none;
  padding: 0 24px;
}
body.theme-refresh #topbar-right { gap: 10px; }
body.theme-refresh #topbar :is(#sidebar-toggle, .btn-outline, .lang-select-trigger) {
  background: #ffffff; color: var(--tr-text);
  border: 1.5px solid var(--tr-line); border-radius: var(--tr-radius-ctl);
  min-height: 44px; padding: 8px 16px; font-size: 15px; font-weight: 700; white-space: nowrap;
}
body.theme-refresh #topbar :is(#sidebar-toggle, .btn-outline, .lang-select-trigger):hover { background: var(--tr-page); color: var(--tr-text); border-color: var(--tr-input-line); }
body.theme-refresh #topbar #sidebar-toggle > span:first-child { font-size: 18px; color: var(--tr-text); }
body.theme-refresh #topbar-left .btn-outline:disabled { opacity: 0.5; }
body.theme-refresh #topbar-logo-chip { border: 1.5px solid var(--tr-line); border-radius: var(--tr-radius-ctl); min-height: 44px; }
body.theme-refresh #user-name { color: var(--tr-text); font-size: 16px; font-weight: 700; }
body.theme-refresh #user-avatar { border-color: var(--tr-line); }
body.theme-refresh #user-tier-badge { background: var(--tr-leaf) !important; color: var(--tr-leaf-ink) !important; }
body.theme-refresh #user-plan-badge { background: var(--tr-butter) !important; color: var(--tr-butter-ink) !important; }
body.theme-refresh #topbar #btn-download-desktop { background: var(--tr-sky); color: var(--tr-link); border-color: var(--tr-sky); }
body.theme-refresh #topbar #btn-download-desktop:hover { background: #DCE7FF; }
body.theme-refresh #topbar #btn-logout { background: var(--tr-blue); color: #ffffff; border-color: var(--tr-blue); }
body.theme-refresh #topbar #btn-logout:hover { background: var(--tr-link); color: #ffffff; }
body.theme-refresh #alerts-unread-badge { background: #C2410C; color: #ffffff; }

/* ── Sidebar: white, light right border, icon chips ── */
body.theme-refresh #sidebar { background: #ffffff; border-right: 1px solid var(--tr-line); }
@media (min-width: 1025px) {
  body.theme-refresh #sidebar:not(.collapsed) { width: 260px; min-width: 260px; }
}
body.theme-refresh #sidebar-logo-wrap { border-bottom: none; padding: 22px 20px 10px; display: flex; align-items: center; gap: 10px; }
body.theme-refresh #sidebar-logo-wrap::before {
  content: ''; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  background: #ffffff url('logo-icon.png') center / 80% no-repeat;
  border: 1.5px solid var(--tr-line);
}
body.theme-refresh #sidebar-app-name { color: var(--tr-blue); font-size: 17px; font-weight: 800; }
body.theme-refresh #nav { padding: 12px 14px; }
body.theme-refresh .nav-btn {
  color: var(--tr-text); font-size: 15px; font-weight: 500;
  padding: 8px 10px; gap: 12px; border-radius: 14px; margin-bottom: 4px; min-height: 48px;
}
body.theme-refresh .nav-btn:hover { background: var(--tr-page); color: var(--tr-text); }
body.theme-refresh .nav-btn.active { background: var(--tr-blue); color: #ffffff; font-weight: 700; }
body.theme-refresh .nav-btn-highlight { background: transparent; border: none; }
body.theme-refresh .nav-btn-highlight:hover { background: var(--tr-page); }
body.theme-refresh .nav-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tr-chip, #EEF2F7); color: var(--tr-chip-ink, var(--tr-text));
  font-size: 15px; opacity: 1; position: relative;
}
body.theme-refresh .nav-btn.active .nav-icon { background: rgba(255,255,255,0.18); color: #ffffff; }
body.theme-refresh #sidebar-footer { border-top: none; padding: 14px 20px; }
body.theme-refresh #sync-status { color: var(--tr-leaf-ink); font-size: 13px; font-weight: 600; text-align: left; }
/* Desktop: tighter spacing so every Individual item fits without scrolling at
   1280 x 720 and up (about 450px of logo + 9 items + footer, against about
   600px between the top bar and the disclaimer footer). Same items, same order. */
@media (min-width: 1025px) {
  body.theme-refresh #sidebar-logo-wrap { padding: 12px 20px 4px; }
  body.theme-refresh #sidebar-logo-wrap::before { width: 38px; height: 38px; }
  body.theme-refresh #nav { padding: 4px 14px; }
  body.theme-refresh .nav-btn { min-height: 38px; padding: 3px 10px; margin-bottom: 2px; }
  body.theme-refresh .nav-icon { width: 30px; height: 30px; }
  body.theme-refresh #sidebar-footer { padding: 6px 20px 8px; }
  body.theme-refresh #sync-status { margin-top: 0; }
}

/* Per-item chip colors and icons (decorative; same items, same order). */
body.theme-refresh .nav-btn[data-view="dashboard"]  { --tr-chip: var(--tr-sky);      --tr-chip-ink: var(--tr-sky-ink); }
body.theme-refresh #nav-checkin-btn                  { --tr-chip: var(--tr-butter);   --tr-chip-ink: var(--tr-butter-ink); }
body.theme-refresh .nav-btn[data-view="toolkit"]    { --tr-chip: var(--tr-mint);     --tr-chip-ink: var(--tr-mint-ink); }
body.theme-refresh .nav-btn[data-view="patients"]   { --tr-chip: var(--tr-peach);    --tr-chip-ink: var(--tr-peach-ink); }
body.theme-refresh .nav-btn[data-view="find-care-team"] { --tr-chip: var(--tr-lavender); --tr-chip-ink: var(--tr-lavender-ink); }
body.theme-refresh .nav-btn[data-view="library"]    { --tr-chip: var(--tr-lavender); --tr-chip-ink: var(--tr-lavender-ink); }
body.theme-refresh .nav-btn[data-view="history"]    { --tr-chip: var(--tr-leaf);     --tr-chip-ink: var(--tr-leaf-ink); }
body.theme-refresh .nav-btn[data-view="resources"]  { --tr-chip: var(--tr-sky);      --tr-chip-ink: var(--tr-sky-ink); }
body.theme-refresh .nav-btn[data-view="videos"]     { --tr-chip: var(--tr-butter);   --tr-chip-ink: var(--tr-butter-ink); }
body.theme-refresh .nav-btn[data-view="profile"]    { --tr-chip: #EEF2F7;            --tr-chip-ink: var(--tr-text); }
body.theme-refresh .nav-btn[data-view="population"] { --tr-chip: var(--tr-mint);     --tr-chip-ink: var(--tr-mint-ink); }
body.theme-refresh .nav-btn[data-view="compose-alert"] { --tr-chip: var(--tr-peach); --tr-chip-ink: var(--tr-peach-ink); }

/* These items hide the old glyph and paint a line icon (--tr-icon) instead;
   any other item keeps its glyph inside the chip. */
body.theme-refresh .nav-btn[data-view="dashboard"] .nav-icon,
body.theme-refresh #nav-checkin-btn .nav-icon,
body.theme-refresh .nav-btn[data-view="toolkit"] .nav-icon,
body.theme-refresh .nav-btn[data-view="patients"] .nav-icon,
body.theme-refresh .nav-btn[data-view="find-care-team"] .nav-icon,
body.theme-refresh .nav-btn[data-view="library"] .nav-icon,
body.theme-refresh .nav-btn[data-view="history"] .nav-icon,
body.theme-refresh .nav-btn[data-view="resources"] .nav-icon,
body.theme-refresh .nav-btn[data-view="videos"] .nav-icon,
body.theme-refresh .nav-btn[data-view="profile"] .nav-icon { font-size: 0; }
body.theme-refresh .nav-btn[data-view="dashboard"] .nav-icon::before,
body.theme-refresh #nav-checkin-btn .nav-icon::before,
body.theme-refresh .nav-btn[data-view="toolkit"] .nav-icon::before,
body.theme-refresh .nav-btn[data-view="patients"] .nav-icon::before,
body.theme-refresh .nav-btn[data-view="find-care-team"] .nav-icon::before,
body.theme-refresh .nav-btn[data-view="library"] .nav-icon::before,
body.theme-refresh .nav-btn[data-view="history"] .nav-icon::before,
body.theme-refresh .nav-btn[data-view="resources"] .nav-icon::before,
body.theme-refresh .nav-btn[data-view="videos"] .nav-icon::before,
body.theme-refresh .nav-btn[data-view="profile"] .nav-icon::before {
  content: ''; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--tr-icon) center / contain no-repeat; mask: var(--tr-icon) center / contain no-repeat;
}
body.theme-refresh .nav-btn[data-view="dashboard"] { --tr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
body.theme-refresh #nav-checkin-btn { --tr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cpath d='M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E"); }
body.theme-refresh .nav-btn[data-view="toolkit"] { --tr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); }
body.theme-refresh .nav-btn[data-view="patients"] { --tr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7M18 14a6.5 6.5 0 0 1 3.5 6'/%3E%3C/svg%3E"); }
body.theme-refresh .nav-btn[data-view="find-care-team"] { --tr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); }
body.theme-refresh .nav-btn[data-view="library"] { --tr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E"); }
body.theme-refresh .nav-btn[data-view="history"] { --tr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M6 17v-5M10 17V7M14 17v-8M18 17v-3'/%3E%3C/svg%3E"); }
body.theme-refresh .nav-btn[data-view="resources"] { --tr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6c-2-1.5-5-2-8-2v14c3 0 6 .5 8 2 2-1.5 5-2 8-2V4c-3 0-6 .5-8 2z'/%3E%3Cpath d='M12 6v14'/%3E%3C/svg%3E"); }
body.theme-refresh .nav-btn[data-view="videos"] { --tr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='m16 10 5-3v10l-5-3z'/%3E%3C/svg%3E"); }
body.theme-refresh .nav-btn[data-view="profile"] { --tr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }

/* ── Main area, page header banner ── */
body.theme-refresh #main { background: var(--tr-page); padding: 24px 32px 32px; }
body.theme-refresh #app .page-title { color: var(--tr-text); font-size: 34px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
body.theme-refresh #app .page-sub { color: var(--tr-text-2); font-size: 17px; }

body.theme-refresh .tr-hero {
  position: relative; isolation: isolate;
  min-height: 150px; margin-bottom: 24px;
  border-radius: var(--tr-radius-card); overflow: hidden;
  /* Sky and the line of clouds sit behind the title panel. */
  background: url('images/hero_beach.jpg') center 30% / cover no-repeat;
  display: flex; align-items: center;
  padding: 26px 24px;
}
body.theme-refresh .tr-hero[data-tr-pos="left"]   { background-position: 0% 30%; }
body.theme-refresh .tr-hero[data-tr-pos="center"] { background-position: 50% 30%; }
body.theme-refresh .tr-hero[data-tr-pos="right"]  { background-position: 100% 30%; }
body.theme-refresh .tr-hero-panel {
  width: 100%; background: rgba(255,255,255,0.9);
  border-radius: 16px; padding: 18px 26px;
}
body.theme-refresh .tr-hero-panel .page-sub { margin-bottom: 0; margin-top: 4px; }
/* A header row that already holds buttons/inputs next to the title. */
body.theme-refresh .tr-hero.tr-hero-row {
  padding: 44px 50px; gap: 16px; flex-wrap: wrap; justify-content: space-between;
}
body.theme-refresh .tr-hero.tr-hero-row::before {
  content: ''; position: absolute; inset: 26px 24px; z-index: -1;
  background: rgba(255,255,255,0.9); border-radius: 16px;
}
body.theme-refresh .tr-hero.tr-hero-row .page-sub { margin-bottom: 0; }

/* ── Cards, headings, buttons, inputs ── */
body.theme-refresh :is(#app, #modal-overlay) .card {
  border: none; border-radius: var(--tr-radius-card);
  box-shadow: var(--tr-shadow); padding: 24px; background: #ffffff;
}
body.theme-refresh :is(#app, #modal-overlay) .card-title {
  font-size: 20px; font-weight: 800; color: var(--tr-text);
  text-transform: none; letter-spacing: 0;
}
body.theme-refresh :is(#app, #modal-overlay) .stat-card { border: none; border-radius: 16px; box-shadow: var(--tr-shadow); }
body.theme-refresh :is(#app, #modal-overlay) .stat-label { color: var(--tr-text-2); }

body.theme-refresh :is(#app, #modal-overlay) .btn {
  border-radius: var(--tr-radius-ctl); min-height: 44px;
  padding: 10px 18px; font-weight: 700; font-size: 15px;
  justify-content: center; gap: 6px;
}
body.theme-refresh :is(#app, #modal-overlay) .btn-sm { padding: 8px 16px; font-size: 14px; }
body.theme-refresh :is(#app, #modal-overlay) .btn-primary { background: var(--tr-blue); color: #ffffff; }
body.theme-refresh :is(#app, #modal-overlay) .btn-primary:hover { background: var(--tr-link); opacity: 1; }
body.theme-refresh :is(#app, #modal-overlay) .btn-outline { background: #ffffff; border: 1.5px solid var(--tr-blue); color: var(--tr-link); }
body.theme-refresh :is(#app, #modal-overlay) .btn-outline:hover { background: var(--tr-sky); opacity: 1; }
/* Action green: Calculate Score, Send, Ask, Add Note. */
body.theme-refresh #app :is([id$="btn-checkin-submit"], .btn[id$="-send"], #btn-add-note.btn-primary) {
  background: var(--tr-action); border-color: var(--tr-action); color: #ffffff;
}
body.theme-refresh #app :is([id$="btn-checkin-submit"], .btn[id$="-send"], #btn-add-note.btn-primary):hover { background: #006B4F; }
body.theme-refresh #app [id$="btn-checkin-submit"] { min-height: 52px; font-size: 17px; border-radius: 14px; }

body.theme-refresh :is(#app, #modal-overlay) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
  border: 1.5px solid var(--tr-input-line); border-radius: var(--tr-radius-ctl);
  background: #ffffff; color: var(--tr-text); min-height: 44px; padding: 10px 14px; font-size: 15px;
}
body.theme-refresh :is(#app, #modal-overlay) :is(input, select, textarea):focus { border-color: var(--tr-blue); }
body.theme-refresh :is(#app, #modal-overlay) ::placeholder { color: #5D6E8C; }
body.theme-refresh :is(#app, #modal-overlay) input[type="checkbox"] { accent-color: var(--tr-blue); }
body.theme-refresh #app a { color: var(--tr-link); }

body.theme-refresh #app :is(.table-wrap, .table-wrap-fit) { border: none; border-radius: 16px; }
body.theme-refresh #app th { background: var(--tr-page); color: var(--tr-text-2); border-bottom: 1px solid var(--tr-line); font-size: 12px; letter-spacing: 0.08em; }
body.theme-refresh #app td { border-bottom: 1px solid var(--tr-line); color: var(--tr-text); }

body.theme-refresh #app .tk-tab.active { color: var(--tr-link); border-bottom-color: var(--tr-blue); }

/* Read aloud / microphone */
body.theme-refresh #app :is(.tts-btn, .dictation-btn) {
  border: 1.5px solid var(--tr-blue); color: var(--tr-link); background: #ffffff; border-radius: 50%;
  min-width: 44px; min-height: 44px;
}
body.theme-refresh #app .dictation-btn { width: 48px; height: 48px; }

/* ── Category tiles: rotate the six tints with matching darker headings ── */
body.theme-refresh #app .tk-section-tile {
  border: none; border-top: none; border-radius: 16px; padding: 18px 20px; min-height: 96px;
  background: var(--tr-t-bg); box-shadow: none;
}
body.theme-refresh #app .tk-section-tile .tk-section-label { color: var(--tr-t-ink); font-size: 16px; font-weight: 800; }
body.theme-refresh #app .tk-section-tile .tk-section-desc { color: var(--tr-text-2); font-size: 13px; }
body.theme-refresh #app .tk-section-tile .tk-section-icon { color: var(--tr-t-ink); }
body.theme-refresh #app .tk-section-tile.active { outline: 3px solid var(--tr-blue); outline-offset: -3px; background: var(--tr-t-bg); }
body.theme-refresh #app .tk-section-tile:nth-child(6n+1) { --tr-t-bg: var(--tr-mint);     --tr-t-ink: var(--tr-mint-ink); }
body.theme-refresh #app .tk-section-tile:nth-child(6n+2) { --tr-t-bg: var(--tr-sky);      --tr-t-ink: var(--tr-sky-ink); }
body.theme-refresh #app .tk-section-tile:nth-child(6n+3) { --tr-t-bg: var(--tr-lavender); --tr-t-ink: var(--tr-lavender-ink); }
body.theme-refresh #app .tk-section-tile:nth-child(6n+4) { --tr-t-bg: var(--tr-peach);    --tr-t-ink: var(--tr-peach-ink); }
body.theme-refresh #app .tk-section-tile:nth-child(6n+5) { --tr-t-bg: var(--tr-butter);   --tr-t-ink: var(--tr-butter-ink); }
body.theme-refresh #app .tk-section-tile:nth-child(6n+6) { --tr-t-bg: var(--tr-leaf);     --tr-t-ink: var(--tr-leaf-ink); }

/* Toolkit Library cards and saved/assigned toolkit cards, same rotation. */
body.theme-refresh #app :is(.tk-library-grid .toolkit-card, .tk-list-card) {
  border: none; border-top: none; border-radius: 18px; background: var(--tr-t-bg, #ffffff); box-shadow: none;
}
body.theme-refresh #app :is(.tk-library-grid .toolkit-card, .tk-list-card):nth-child(6n+1) { --tr-t-bg: var(--tr-mint);     --tr-t-ink: var(--tr-mint-ink); }
body.theme-refresh #app :is(.tk-library-grid .toolkit-card, .tk-list-card):nth-child(6n+2) { --tr-t-bg: var(--tr-sky);      --tr-t-ink: var(--tr-sky-ink); }
body.theme-refresh #app :is(.tk-library-grid .toolkit-card, .tk-list-card):nth-child(6n+3) { --tr-t-bg: var(--tr-lavender); --tr-t-ink: var(--tr-lavender-ink); }
body.theme-refresh #app :is(.tk-library-grid .toolkit-card, .tk-list-card):nth-child(6n+4) { --tr-t-bg: var(--tr-peach);    --tr-t-ink: var(--tr-peach-ink); }
body.theme-refresh #app :is(.tk-library-grid .toolkit-card, .tk-list-card):nth-child(6n+5) { --tr-t-bg: var(--tr-butter);   --tr-t-ink: var(--tr-butter-ink); }
body.theme-refresh #app :is(.tk-library-grid .toolkit-card, .tk-list-card):nth-child(6n+6) { --tr-t-bg: var(--tr-leaf);     --tr-t-ink: var(--tr-leaf-ink); }
body.theme-refresh #app .tk-library-grid .toolkit-card .toolkit-card-meta { color: var(--tr-t-ink); font-weight: 700; }
body.theme-refresh #app :is(.toolkit-card, .lib-card, .resource-tile) { border-color: var(--tr-line); border-radius: 16px; }
body.theme-refresh #app :is(.toolkit-card-summary, .toolkit-card-meta, .lib-card-domain, .lib-card-meta, .resource-tile-org) { color: var(--tr-text-2); }
body.theme-refresh #app .tk-library-section-header { border-bottom-color: var(--tr-line); }

/* ── Check In mood buttons (Check In page and Dashboard card) ── */
body.theme-refresh #app .mood-btn {
  border: none; border-radius: 16px; background: var(--tr-m-bg); flex: 1 1 0; min-width: 0;
  box-shadow: none;
}
body.theme-refresh #app .mood-btn:nth-child(1) { --tr-m-bg: var(--tr-sky); }
body.theme-refresh #app .mood-btn:nth-child(2) { --tr-m-bg: var(--tr-lavender); }
body.theme-refresh #app .mood-btn:nth-child(3) { --tr-m-bg: var(--tr-butter); }
body.theme-refresh #app .mood-btn:nth-child(4) { --tr-m-bg: var(--tr-mint); }
body.theme-refresh #app .mood-btn:nth-child(5) { --tr-m-bg: var(--tr-peach); }
body.theme-refresh #app .mood-btn .mood-label { color: var(--tr-text); font-weight: 700; }
body.theme-refresh #app .mood-btn.selected { background: var(--tr-m-bg); outline: 3px solid var(--tr-blue); outline-offset: -3px; }
body.theme-refresh #app .mood-btn.selected .mood-label { color: var(--tr-text); }
body.theme-refresh #app label[for$="checkin-note"] {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px !important; font-weight: 800 !important; color: var(--tr-text-2);
}
body.theme-refresh #app .dictation-field-row { gap: 12px; align-items: center; }
/* Check In page: the picker sits on a white card, as in mockup 02. */
body.theme-refresh #view-assess > div:has(> #mood-picker) {
  max-width: none !important; background: #ffffff; border-radius: var(--tr-radius-card);
  box-shadow: var(--tr-shadow); padding: 28px 32px;
}
body.theme-refresh #view-assess #mood-question-text { font-size: 24px !important; font-weight: 800 !important; color: var(--tr-text); }
body.theme-refresh #view-assess #mood-picker .mood-btn { padding: 22px 6px; }
body.theme-refresh #view-assess #mood-picker .mood-emoji { font-size: 44px; }
body.theme-refresh #view-assess #mood-picker .mood-label { font-size: 17px; }

/* ── Crisis elements: calm brand blue, never alarming red ── */
body.theme-refresh :is(#app, #modal-overlay) .crisis-banner {
  background: var(--tr-sky); border: 2px solid var(--tr-blue); border-radius: 16px; padding: 16px 20px;
}
body.theme-refresh :is(#app, #modal-overlay) .crisis-banner-title { color: var(--tr-link); font-size: 15px; }
/* Inline var(--red) inside a crisis banner (crisis line links) becomes calm blue. */
body.theme-refresh :is(#app, #modal-overlay) .crisis-banner { --red: var(--tr-link); --red-bg: var(--tr-sky); }
body.theme-refresh :is(#app, #modal-overlay) .crisis-banner a[target="_blank"] {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  background: #ffffff; border: 1.5px solid var(--tr-blue); border-radius: var(--tr-radius-ctl);
  color: var(--tr-link) !important; font-size: 14px !important; font-weight: 700;
}
body.theme-refresh :is(#app, #modal-overlay) .crisis-banner-body { color: var(--tr-text); font-size: 14px; }

/* ── Disclaimer footer: white panel look ── */
body.theme-refresh #disclaimer-footer {
  background: #ffffff; border-top: 1px solid var(--tr-line);
  color: var(--tr-text-2); font-size: 12px; line-height: 1.35;
}

/* ── Modal and toast ── */
body.theme-refresh #modal-box { border-radius: var(--tr-radius-card); color: var(--tr-text); }
body.theme-refresh #toast { background: var(--tr-text); color: #ffffff; border-radius: 12px; }

/* ── Individual Dashboard (THEME_REFRESH layout in renderIndividualDashboard) ── */
/* Compact welcome banner: greeting and date on the left over the sky, the
   Daily Reflection quote on a white panel on the right over the beach. */
body.theme-refresh .tr-welcome {
  position: relative; min-height: 150px; margin-bottom: 24px;
  border-radius: var(--tr-radius-card); overflow: hidden;
  background: url('images/hero_beach.jpg') 0% 22% / cover no-repeat;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 20px 18px clamp(24px, 4%, 48px);
}
body.theme-refresh .tr-welcome-text { flex: 1 1 auto; min-width: 0; }
body.theme-refresh .tr-welcome .page-title {
  font-size: 34px; line-height: 1.15; margin-bottom: 6px;
  text-shadow: 0 0 18px rgba(255,255,255,0.85), 0 0 3px rgba(255,255,255,0.9);
}
body.theme-refresh .tr-welcome .page-sub {
  color: var(--tr-text); font-size: 17px; margin: 0; font-weight: 500;
  text-shadow: 0 0 14px rgba(255,255,255,0.9), 0 0 3px rgba(255,255,255,0.95);
}
/* Heading and New quote button share the first line, the quote runs below.
   95% white with dark ink, 16px and up, so it reads clearly over the photo. */
body.theme-refresh .tr-welcome-quote {
  flex: 0 1 460px; min-width: 0;
  background: rgba(255,255,255,0.95); border-radius: 16px; padding: 12px 16px 14px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
}
body.theme-refresh #app .tr-welcome-quote .card-title { grid-column: 1; grid-row: 1; font-size: 17px; color: var(--tr-text); margin: 0; }
body.theme-refresh #app .tr-welcome-quote #btn-new-quote { grid-column: 2; grid-row: 1; }
body.theme-refresh #app .tr-welcome-quote #daily-quote-text { grid-column: 1 / -1; grid-row: 2; color: var(--tr-text) !important; font-size: 16px !important; margin: 6px 0 0 !important; }

/* Tinted cards (no photo headers): soft tint, darker ink for links. */
body.theme-refresh #app .tr-tint-card { min-width: 0; }
body.theme-refresh #app .tr-tint-card.tr-tint-lavender { background: var(--tr-lavender); --tr-ink: var(--tr-lavender-ink); }
body.theme-refresh #app .tr-tint-card.tr-tint-mint     { background: var(--tr-mint);     --tr-ink: var(--tr-mint-ink); }
body.theme-refresh #app .tr-tint-card.tr-tint-sky      { background: var(--tr-sky);      --tr-ink: var(--tr-sky-ink); }
body.theme-refresh #app .tr-tint-card [style*="border-bottom:1px solid var(--surface2)"] { border-bottom-color: rgba(22,48,94,0.1) !important; }
body.theme-refresh #app .tr-tint-card :is(#btn-view-full-history, .tr-link) {
  color: var(--tr-ink) !important; font-size: 15px !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
body.theme-refresh #app .tr-link { background: none; border: none; padding: 6px 0; min-height: 44px; cursor: pointer; }
/* Existing cards nested inside a tinted card (Resources, Messages) lose their own chrome. */
body.theme-refresh #app .tr-tint-card > .card {
  margin: 0 !important; padding: 0; border: none; box-shadow: none; background: transparent; border-radius: 0; width: 100%;
}
body.theme-refresh #app .tr-tint-card.tr-tint-sky > .card div[style*="color:var(--teal)"] { color: var(--tr-ink) !important; font-size: 15px !important; font-weight: 700; text-decoration: underline; }

/* Icon chip beside the title of each tinted card, in the sidebar's chip style
   (34px rounded square, line icon in the card's ink color). Decorative. */
body.theme-refresh #app .tr-tint-card .card-title { display: flex; align-items: center; gap: 10px; }
body.theme-refresh #app .tr-tint-card .card-title::before {
  content: ''; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  background: var(--tr-chip-bg) var(--tr-chip-icon) center / 18px 18px no-repeat;
}
body.theme-refresh #app .tr-card-recent { --tr-chip-bg: #DCD2F6; --tr-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235534B5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E"); }
body.theme-refresh #app .tr-card-resources { --tr-chip-bg: #CFDFFF; --tr-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D46B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6c-2-1.5-5-2-8-2v14c3 0 6 .5 8 2 2-1.5 5-2 8-2V4c-3 0-6 .5-8 2z'/%3E%3Cpath d='M12 6v14'/%3E%3C/svg%3E"); }

/* ── Dashboard fit (third pass): 18px card padding, 16px gaps, 20px card titles,
   cards sized to their own content and aligned to the top of their row, text
   14px and up, buttons 44px and up (the .btn rule above). The banner and its
   quote panel are left exactly as they are. ── */
body.theme-refresh #view-dashboard .tr-welcome { margin-bottom: 16px; }
body.theme-refresh #app #view-dashboard .card { padding: 18px; }
body.theme-refresh #app #view-dashboard .tr-tint-card > .card { padding: 0; }
body.theme-refresh #app #view-dashboard .card .card-title { font-size: 20px; }
body.theme-refresh #app #view-dashboard .card :is([style*="font-size:11px"], [style*="font-size:12px"], [style*="font-size:13px"], .badge, .stat-label, .ai-ask-remaining, .mood-label, label) { font-size: 14px !important; }
body.theme-refresh #app #view-dashboard .card :is(.tts-btn, .dictation-btn) { font-size: 18px; }

/* Rows keep their columns down to 1100px (Creg's 1280px laptop included). */
body.theme-refresh :is(.tr-row-2, .tr-row-3) { display: grid; gap: 16px; margin-bottom: 16px; align-items: start; }
body.theme-refresh .tr-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.theme-refresh .tr-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.theme-refresh :is(.tr-row-2, .tr-row-3) > .card { margin: 0; }
/* Link requests card (only when requests are pending), right under the banner. */
body.theme-refresh #view-dashboard > .tr-welcome + .card { margin: 0 0 16px !important; }

/* About This Portal: a slim full-width strip (title, description, Share). */
body.theme-refresh .tr-about-strip { margin-bottom: 16px; }
body.theme-refresh #app #view-dashboard .tr-about-strip > .card { display: flex; align-items: center; gap: 16px; padding: 8px 18px; min-height: 60px; }
body.theme-refresh #app #view-dashboard .tr-about-strip .card-title { margin: 0 !important; font-size: 17px; white-space: nowrap; flex-shrink: 0; }
body.theme-refresh #app #view-dashboard .tr-about-strip p { flex: 1; min-width: 0; margin: 0 !important; font-size: 14px !important; line-height: 1.45 !important; }
body.theme-refresh #app #view-dashboard .tr-about-strip #btn-share-about { flex-shrink: 0; }

/* Ask Aspire Navigator: a slim full-width strip under About. Title and description on
   the left; question box, Ask button and "questions remaining" line on the right. When
   the Navigator is off, wireAskAspireNavigatorCard() removes the card and the empty
   wrapper is hidden. */
body.theme-refresh .tr-ask-strip { margin-bottom: 16px; }
body.theme-refresh .tr-ask-strip:not(:has(.card)) { display: none; }
body.theme-refresh #app #view-dashboard .tr-ask-strip > .card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); column-gap: 20px; align-items: center;
  padding: 10px 18px; min-height: 60px;
}
body.theme-refresh #app #view-dashboard .tr-ask-strip .card-title { grid-column: 1; grid-row: 1; margin: 0 0 2px !important; font-size: 17px; }
body.theme-refresh #app #view-dashboard .tr-ask-strip > .card > p { grid-column: 1; grid-row: 2; margin: 0 !important; font-size: 14px !important; line-height: 1.45 !important; }
body.theme-refresh #app #view-dashboard .tr-ask-strip .ai-ask-input-row { grid-column: 2; grid-row: 1 / span 2; }
body.theme-refresh #app #view-dashboard .tr-ask-strip .ai-ask-remaining { grid-column: 2; grid-row: 3; margin-top: 4px; }

/* Today's Wellbeing (half width): 150px ring with the legend beside it, then the three stats
   as compact lines (value, then its label on the same line, wrapping to at most a second line). */
body.theme-refresh .tr-wellbeing-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 20px; row-gap: 14px; align-items: center; }
body.theme-refresh .tr-wellbeing-detail { display: contents; }
body.theme-refresh #app #view-dashboard .card .tr-wellbeing-detail > div:first-child { grid-column: 2; font-size: 16px !important; color: var(--tr-text-2) !important; line-height: 1.9 !important; }
body.theme-refresh .tr-snapshot { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }
body.theme-refresh #app .tr-snapshot .stat-card {
  display: block; grid-column: auto !important; background: none; box-shadow: none; border: none; border-radius: 0;
  padding: 0; min-width: 0; text-align: left; line-height: 22px;
}
body.theme-refresh #app .tr-snapshot .stat-card > * { display: inline; line-height: 22px; margin: 0; }
body.theme-refresh #app .tr-snapshot .stat-card > .stat-label { margin-left: 6px; }
body.theme-refresh #app .tr-snapshot .stat-card:nth-child(1) > div:first-child { font-size: 15px !important; }
body.theme-refresh #app .tr-snapshot .stat-num { font-size: 18px; font-weight: 800; }

/* Check In (half width): five roomy mood buttons on one line, a two-line note box. */
body.theme-refresh #app .tr-checkin .card-title { margin-bottom: 2px; }
body.theme-refresh #app .tr-checkin #dash-mood-question-text { color: var(--tr-text-2); font-weight: 500 !important; }
body.theme-refresh #app .tr-checkin #dash-mood-picker { gap: 10px !important; margin-bottom: 14px !important; }
body.theme-refresh #app .tr-checkin .mood-btn { padding: 14px 6px; min-width: 44px; min-height: 44px; }
body.theme-refresh #app .tr-checkin .mood-emoji { font-size: 32px; }
body.theme-refresh #app .tr-checkin .mood-label { font-weight: 600; }
/* "Very Low" on one line where the buttons are wide enough (1280px laptop and up to 1100px). */
@media (min-width: 1100px) { body.theme-refresh #app .tr-checkin .mood-label { white-space: nowrap; } }
body.theme-refresh #app .tr-checkin textarea { min-height: 0; line-height: 1.5; height: calc(3em + 23px); }

/* Full-width sections (Recent Assessments, My Tasks, Resources, Today's Video): a header
   row with the title on the left and its links/buttons on the right, then the content. */
body.theme-refresh #view-dashboard .tr-section { margin: 0 0 16px; }
body.theme-refresh .tr-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 12px; }
body.theme-refresh #app #view-dashboard .tr-section-head .card-title { margin: 0; }
body.theme-refresh .tr-section-actions { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
body.theme-refresh #app .tr-section-actions #btn-view-full-history { margin-top: 0 !important; }

/* Recent Assessments: the latest results side by side, each with its name, date (never
   wrapped) and result badge. */
body.theme-refresh .tr-recent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.theme-refresh #app .tr-recent-grid > div {
  flex-direction: column; align-items: flex-start !important; justify-content: flex-start !important; gap: 6px;
  padding: 12px 14px !important; border-bottom: none !important; background: #ffffff; border-radius: 12px; min-width: 0;
}
body.theme-refresh #app .tr-recent-grid > div > div > strong { display: block; }
body.theme-refresh #app .tr-recent-grid > div > div > span { display: block; white-space: nowrap; margin-top: 2px; }

/* My Tasks: the task list (two columns on wide screens), then the add task box. */
body.theme-refresh #app .tr-tasks #dash-tasks-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
body.theme-refresh #app .tr-tasks #dash-tasks-list > p { grid-column: 1 / -1; }

/* Resources: the featured resources side by side, "View all resources" on the right of
   the header. The whole card stays one button (unchanged behaviour). */
body.theme-refresh #app .tr-card-resources > button.card {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; row-gap: 12px; align-items: stretch; text-align: left;
}
body.theme-refresh #app .tr-card-resources > button.card > .card-title { grid-column: 1 / 3; grid-row: 1; margin: 0 !important; align-self: center; }
body.theme-refresh #app .tr-card-resources > button.card > div:last-child { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; margin-top: 0 !important; }
body.theme-refresh #app .tr-card-resources > button.card > div:not(.card-title):not(:last-child) {
  grid-row: 2; padding: 12px 14px !important; border-bottom: none !important; background: #ffffff; border-radius: 12px; min-width: 0;
}

body.theme-refresh #app .tr-tasks { display: flex; flex-direction: column; }
body.theme-refresh #app .tr-tasks > .card-title { order: -1; margin-bottom: 12px; }
body.theme-refresh #app .tr-tasks > #btn-view-all-tasks { align-self: flex-start; }
body.theme-refresh #app .tr-tasks .task-row { background: var(--tr-page); border: none; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
body.theme-refresh #app #btn-view-all-tasks { font-size: 15px !important; font-weight: 700; text-decoration: underline; color: var(--tr-mint-ink) !important; }

/* Quick Tools: a full-width section; the admin-featured tools first, then the fixed items,
   in a grid of compact items (5 per row from 1100px, 3 below that, 2 on phones). A long
   (e.g. translated) label wraps onto a second line rather than being cut off. */
body.theme-refresh #app .tr-quick-access .qt-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
body.theme-refresh #app .tr-quick-access .qt-tile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; text-align: left !important; width: 100%;
  border: none; border-radius: 12px; padding: 6px 12px; min-height: 44px; box-shadow: none;
  background: var(--tr-q-bg); position: relative;
}
body.theme-refresh #app .tr-quick-access .qt-tile:hover { box-shadow: var(--tr-shadow); }
body.theme-refresh #app .tr-quick-access .qt-tile::after { content: '›'; margin-left: auto; font-size: 20px; color: var(--tr-text); }
body.theme-refresh #app .tr-quick-access .qt-tile-icon { margin: 0; font-size: 18px; }
body.theme-refresh #app .tr-quick-access .qt-tile-label { flex: 1 1 0; min-width: 5.5em; font-size: 15px; font-weight: 700; color: var(--tr-text); line-height: 1.25; overflow-wrap: break-word; }
/* Messages: unread count badge; it drops under the label if the column is too narrow. */
body.theme-refresh #app .tr-quick-access .tr-qt-badge { flex-shrink: 0; white-space: nowrap; background: #FEE4E2 !important; color: #B42318 !important; } /* ~5.7:1, AA */
/* Seven Quick Tools items, seven soft tints in turn. */
body.theme-refresh #app .tr-quick-access .qt-tile:nth-child(7n+1) { --tr-q-bg: var(--tr-butter); }
body.theme-refresh #app .tr-quick-access .qt-tile:nth-child(7n+2) { --tr-q-bg: var(--tr-sky); }
body.theme-refresh #app .tr-quick-access .qt-tile:nth-child(7n+3) { --tr-q-bg: var(--tr-lavender); }
body.theme-refresh #app .tr-quick-access .qt-tile:nth-child(7n+4) { --tr-q-bg: var(--tr-mint); }
body.theme-refresh #app .tr-quick-access .qt-tile:nth-child(7n+5) { --tr-q-bg: var(--tr-peach); }
body.theme-refresh #app .tr-quick-access .qt-tile:nth-child(7n+6) { --tr-q-bg: var(--tr-leaf); }
body.theme-refresh #app .tr-quick-access .qt-tile:nth-child(7n+7) { --tr-q-bg: var(--tr-sky); }

/* Today's Video: a full-width strip at the bottom, no photo. The embed (400px wide, 16:9)
   on the left; the heading, title, category, summary, Play and Switch to favorite (side by
   side) and the favorite video field on the right. Six rows hold the most right-hand items
   the card can have; the last, flexible row takes the embed's extra height. The embed box's
   16:9 shape comes from aspect-ratio instead of its inline padding trick. Below 1100px it
   stacks (see the 1099px rule). */
body.theme-refresh #app .tr-video {
  display: grid; grid-template-columns: 412px auto minmax(0, 1fr); grid-template-rows: repeat(6, auto) 1fr;
  column-gap: 8px; align-items: start; margin-bottom: 8px;
}
body.theme-refresh #app .tr-video > * { grid-column: 2 / -1; min-width: 0; }
body.theme-refresh #app .tr-video > div:has(> iframe) {
  grid-column: 1; grid-row: 1 / -1; margin: 0 12px 0 0 !important;
  padding-bottom: 0 !important; height: auto !important; aspect-ratio: 16 / 9;
}
body.theme-refresh #app .tr-video > #btn-play-video { grid-column: 2; justify-self: start; margin: 6px 0 0 !important; }
body.theme-refresh #app .tr-video > #btn-toggle-video-choice { grid-column: 3; justify-self: start; margin: 6px 0 0 !important; }
/* No embed (a channel link, the favorite video, or no video): one plain column. */
body.theme-refresh #app .tr-video:not(:has(> div > iframe)) { display: block; }

/* Ask Aspire Navigator bar/card (shown only when the Navigator is enabled). */
body.theme-refresh #app .ai-ask-bar { background: var(--tr-sky); border: none; border-radius: var(--tr-radius-card); }
/* Question box: wide enough for its placeholder; the Ask button wraps below on a narrow card. */
body.theme-refresh #app #ai-ask-card-dashboard .ai-ask-input-row { flex-wrap: wrap; }
body.theme-refresh #app #ai-ask-card-dashboard .ai-ask-input-row input { flex: 1 1 160px; min-width: 160px; }

/* ── Other pages: small touches to match the mockups ── */
body.theme-refresh #app .qt-tile { border-color: var(--tr-line); border-radius: 14px; }
body.theme-refresh #app .badge { border-radius: 999px; }

/* ── iPad range (769-1024px): sidebar narrows and stays visible (styles.css keeps 175px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  body.theme-refresh .nav-btn { min-height: 44px; font-size: 13px; gap: 8px; padding: 6px 8px; }
  body.theme-refresh .nav-icon { width: 28px; height: 28px; border-radius: 8px; }
  body.theme-refresh #sidebar-logo-wrap::before { width: 34px; height: 34px; }
  body.theme-refresh #sidebar-app-name { font-size: 14px; }
}

/* ── Narrower desktops and tablets (769-1280px): the top bar keeps every item, as on live,
   including the Tier and plan badges (Creg, 2026-10-08: never hidden). To make room it
   tightens: less padding and gap, slimmer buttons (still 44px tall), and the account name
   on one line with the two badges in a smaller row under it. Phones (768px and below) keep
   styles.css's own phone top bar, which already hides #user-info there, as on live. ── */
@media (min-width: 769px) and (max-width: 1280px) {
  body.theme-refresh #topbar { padding: 0 16px; }
  body.theme-refresh #topbar-left, body.theme-refresh #topbar-right { gap: 8px; }
  body.theme-refresh #topbar :is(#sidebar-toggle, .btn-outline, .lang-select-trigger) { padding: 8px 12px; font-size: 14px; }
  body.theme-refresh #topbar #user-info {
    display: grid; grid-template-columns: auto auto auto; column-gap: 6px; row-gap: 3px;
    align-items: center; justify-items: start;
  }
  body.theme-refresh #topbar #user-avatar { grid-column: 1; grid-row: 1 / span 2; }
  body.theme-refresh #topbar #user-name { grid-column: 2 / span 2; grid-row: 1; font-size: 14px; line-height: 1.2; white-space: nowrap; }
  body.theme-refresh #topbar #user-tier-badge { grid-column: 2; grid-row: 2; }
  body.theme-refresh #topbar #user-plan-badge { grid-column: 3; grid-row: 2; }
  body.theme-refresh #topbar :is(#user-tier-badge, #user-plan-badge) { font-size: 11px; line-height: 1.4; padding: 1px 7px; }
}
/* ── Tablets and narrow windows (769-1031px; iPad Air 820, iPad 810, iPad Mini landscape):
   one row can't hold every top bar item, so the top bar becomes two rows instead of hiding
   anything (Creg, 2026-10-08): Menu, logo and Back on the first row; Share, language, alerts,
   the account name with its badges, Download Desktop App and Sign Out on the second, at the
   right. --topbar-h grows to match, so the sidebar and page start below it as before. The
   Download label may wrap onto two lines in its button. 1032px and up stay one row (RC8). ── */
@media (min-width: 769px) and (max-width: 1031px) {
  body.theme-refresh #app { --topbar-h: 116px; }
  body.theme-refresh #topbar { flex-wrap: wrap; align-content: center; row-gap: 8px; padding: 6px 12px; }
  body.theme-refresh #topbar-left { flex: 1 1 100%; }
  body.theme-refresh #topbar-right { flex: 1 1 100%; justify-content: flex-end; }
  body.theme-refresh #topbar #btn-download-desktop { white-space: normal; max-width: 130px; line-height: 1.15; text-align: left; }
}
/* Below about 1100px every row goes to two columns; a lone last card takes the full width. */
@media (max-width: 1099px) {
  body.theme-refresh .tr-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.theme-refresh .tr-row-3 > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  body.theme-refresh .tr-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.theme-refresh #app .tr-tasks #dash-tasks-list { display: block; }
  body.theme-refresh #app .tr-quick-access .qt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.theme-refresh #app .tr-card-resources > button.card { display: block; }
  body.theme-refresh #app .tr-card-resources > button.card > div:not(.card-title):not(:last-child) { margin-top: 8px; }
  body.theme-refresh #app .tr-card-resources > button.card > div:last-child { margin-top: 10px !important; }
  body.theme-refresh #app .tr-video { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: 8px; }
  body.theme-refresh #app .tr-video > * { flex: 0 0 100%; }
  body.theme-refresh #app .tr-video > .card-title { order: -2; }
  body.theme-refresh #app .tr-video > div:has(> iframe) { order: -1; margin: 2px 0 12px !important; max-width: 427px; }
  body.theme-refresh #app .tr-video > :is(a, button) { flex: 0 0 auto; margin: 4px 0 0 !important; }
}

/* ── Narrow Dashboard content area (769px and up): decided by the Dashboard's own width, not
   the window's, so it covers the iPad Pro 13 in portrait (1032px, 175px sidebar) and laptops
   from 1025 to about 1220px with the 260px sidebar open. Below 900px of content: the quote
   panel goes under the welcome text (as on phones, so the date stays over the sky), Today's
   Wellbeing and Check In stack, and the Navigator question box goes under its description.
   Phones and iPad Mini (768px and below) keep their own rules below. ── */
@media (min-width: 769px) {
  body.theme-refresh #view-dashboard { container: tr-dash / inline-size; }
  @container tr-dash (max-width: 899px) {
    body.theme-refresh .tr-welcome {
      min-height: 0; flex-direction: column; align-items: stretch; gap: 12px;
      background-position: 0% 0%;
    }
    body.theme-refresh .tr-welcome-quote { flex: none; }
    body.theme-refresh .tr-row-health { grid-template-columns: minmax(0, 1fr); }
    body.theme-refresh #app .tr-checkin .mood-label { white-space: nowrap; }
    body.theme-refresh #app #view-dashboard .tr-ask-strip > .card { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
    body.theme-refresh #app #view-dashboard .tr-ask-strip .card-title { grid-column: 1; grid-row: 1; }
    body.theme-refresh #app #view-dashboard .tr-ask-strip > .card > p { grid-column: 1; grid-row: 2; }
    body.theme-refresh #app #view-dashboard .tr-ask-strip .ai-ask-input-row { grid-column: 1; grid-row: 3; }
    body.theme-refresh #app #view-dashboard .tr-ask-strip .ai-ask-remaining { grid-column: 1; grid-row: 4; margin-top: 0; }
  }
}

/* ── Phones (≤768px): everything stacks to one column, no sideways scroll ── */
@media (max-width: 768px) {
  body.theme-refresh #app { --topbar-h: 64px; }
  body.theme-refresh #topbar { padding: 0 10px; }
  body.theme-refresh #topbar :is(#sidebar-toggle, .btn-outline) { padding: 8px 10px; font-size: 14px; }
  body.theme-refresh #sidebar { box-shadow: 4px 0 24px rgba(22,48,94,0.18); }
  body.theme-refresh #main { padding: 16px; }
  body.theme-refresh #app .page-title { font-size: 26px; }
  body.theme-refresh #app .page-sub { font-size: 15px; }
  body.theme-refresh .tr-hero { min-height: 120px; padding: 16px; }
  body.theme-refresh .tr-hero-panel { padding: 14px 16px; }
  body.theme-refresh .tr-hero.tr-hero-row { padding: 30px 30px; }
  body.theme-refresh .tr-hero.tr-hero-row::before { inset: 16px; }
  /* Welcome text stacked above the quote panel; the banner stays short. */
  body.theme-refresh .tr-welcome {
    min-height: 0; padding: 14px; flex-direction: column; align-items: stretch; gap: 10px;
    background-position: 0% 0%;
  }
  body.theme-refresh .tr-welcome-text { padding: 2px 4px 0; }
  body.theme-refresh .tr-welcome .page-title { font-size: 24px; margin-bottom: 2px; }
  body.theme-refresh .tr-welcome .page-sub { font-size: 14px; }
  body.theme-refresh .tr-welcome-quote { flex: none; padding: 12px 14px; }
  body.theme-refresh #app .tr-welcome-quote #daily-quote-text { margin: 4px 0 0 !important; }
  body.theme-refresh :is(.tr-row-2, .tr-row-3, .tr-row-3.grid-2) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body.theme-refresh #app #view-dashboard .tr-about-strip > .card { flex-wrap: wrap; row-gap: 8px; padding: 12px 18px; }
  body.theme-refresh #app #view-dashboard .tr-about-strip p { flex: 1 1 100%; }
  body.theme-refresh .tr-recent-grid { grid-template-columns: minmax(0, 1fr); }
  body.theme-refresh #app #view-dashboard .tr-ask-strip > .card { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 12px 18px; }
  body.theme-refresh #app #view-dashboard .tr-ask-strip :is(.card-title, p, .ai-ask-input-row, .ai-ask-remaining) { grid-column: 1; grid-row: auto; }
  body.theme-refresh #app .tr-quick-access .qt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.theme-refresh #app .card { padding: 18px; }
  body.theme-refresh #app .tr-checkin #dash-mood-picker { gap: 6px !important; }
  body.theme-refresh #app .tr-checkin .mood-emoji { font-size: 24px; }
  body.theme-refresh #app .tr-checkin .mood-label { font-size: 11px; }
  body.theme-refresh #view-assess > div:has(> #mood-picker) { padding: 18px; }
  body.theme-refresh #view-assess #mood-question-text { font-size: 18px !important; }
  body.theme-refresh #view-assess #mood-picker { gap: 6px !important; }
  body.theme-refresh #view-assess #mood-picker .mood-btn { padding: 12px 2px; }
  body.theme-refresh #view-assess #mood-picker .mood-emoji { font-size: 26px; }
  body.theme-refresh #view-assess #mood-picker .mood-label { font-size: 11px; }
  body.theme-refresh #disclaimer-footer { height: auto; }
}