/* Org HQ app shell, redesign step 1 (2026-11-08), step 1.1 (same day).
   Every color, size, radius and spacing value comes from
   design-spec/tokens-v1.css plus the v1.1 and v1.2 appends.
   No new values. Step 1.1, at Wilson's direction: the typeface is his
   website's Public Sans (self-hosted below; sizes stay token), the
   theme is chosen in the app and remembered on the device (light by
   default; the phone's system setting is never followed), and every
   answer choice renders as an unmistakable button. */

/* Public Sans, the Wilson Nicolas website typeface, self-hosted.
   One variable file covers weights 400 to 700. */
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/public-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #14213D;
  --navy-2: #1E2D4F;
  --gold: #CFA74C;
  --gold-text: #7A5B12;
  --gold-tint: #F6EEDB;
  --surface: #FFFFFF;
  --grouped: #F4F5F7;
  --hairline: #E3E5EA;
  --text: #14213D;
  --secondary: #5B6476;
  --red: #B42318;
  --amber: #B54708;
  --green: #2E6B4F;
  --green-tint: #E8F1EC;
  --navy-tint: #E7E9EF;
  --seg-track: #E7E9EE;
  --tab-idle: #8E98AE;
  --font: "Public Sans", -apple-system, "SF Pro Text", Inter, system-ui, sans-serif;
  --margin: 16px;
  --radius: 14px;
}

/* Themes (Wilson, 2026-11-08): three named looks, set by data-theme
   on <html> and remembered on the device. Classic (the :root tokens
   above) is the default: navy banner and bars on a warm ivory page.
   Navy is the night look: the old dark tokens. Light is all white
   and ivory with navy text. There is no system theme. */
[data-theme="navy"] {
  --surface: #131C2E;
  --grouped: #0B1220;
  --text: #F2F4F8;
  --secondary: #A3ACBF;
  --hairline: #24304A;
  --seg-track: #1E2D4F;
  --navy-tint: #1E2D4F;
}

[data-theme="light"] {
  --surface: #FFFFFF;
  --grouped: #F7F2E7;
  --text: #14213D;
  --secondary: #5B6476;
  --hairline: #E3DAC4;
  --seg-track: #EFE8D6;
  --navy-tint: #EAE8DF;
  --tab-idle: #5B6476;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--grouped);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 99px;
}

body.locked { overflow: hidden; }

.hidden { display: none !important; }

button { font-family: inherit; }

/* Type scale (tokens) */
.screen-title { font-size: 28px; line-height: 34px; font-weight: 700; }
.hero h2 { font-size: 22px; line-height: 28px; font-weight: 600; }
.row .t { font-size: 17px; line-height: 22px; font-weight: 600; }
.body { font-size: 17px; line-height: 24px; font-weight: 400; }
.row .w { font-size: 15px; line-height: 20px; color: var(--secondary); }
.meta { font-size: 13px; line-height: 18px; }
.chip { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .2px; }

/* Top bar (design v1.6, full width 2026-11-08): one bar, edge to
   edge, holding the gold skyline mark, the spelled-out name, and
   the working icons in a single row. It follows the theme: navy in
   Classic and Navy, white with navy text in Light (the override
   below). The bar is sticky, so it is on every page, Messages
   included, with no separate icon row under it. */
.app-header { position: sticky; top: 0; z-index: 40; background: var(--navy); padding-top: env(safe-area-inset-top); }
.topbar { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px var(--margin); }
.topbar-mark { width: 28px; height: 28px; flex: none; display: block; }
.topbar-name { color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .28em; white-space: nowrap; }

.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar .theme-btn { color: #F2F4F8; }
.topbar .chat-btn { color: #F2F4F8; }

/* Light / dark toggle: 44px target, sun in dark, moon in light. */
.theme-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.theme-btn svg { width: 22px; height: 22px; }
.theme-btn:active { opacity: .85; }
.theme-btn .ic-sun { display: none; }
[data-theme="navy"] .theme-btn .ic-sun { display: block; }
[data-theme="navy"] .theme-btn .ic-moon { display: none; }

.plus-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--gold);
  color: var(--navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.plus-btn svg { width: 18px; height: 18px; }
.plus-btn:active { opacity: .85; }

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--navy-2);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.avatar:active { opacity: .85; }

/* Refresh (Wilson, 2026-11-08): a labeled control in the top bar on
   every page. It pulls fresh data in place and picks up the newest
   app version, so the app never has to be closed to refresh. */
.refresh-btn {
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4);
  background: transparent;
  color: #F2F4F8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 0 12px;
}
.refresh-btn svg { width: 18px; height: 18px; flex: none; }
.refresh-btn:active { opacity: .85; }
.refresh-btn:disabled { opacity: .55; }
.refresh-btn.spinning svg { animation: refresh-spin .9s linear infinite; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }
[data-theme="navy"] .refresh-btn { color: var(--gold); border-color: rgba(207,167,76,.55); }
[data-theme="light"] .refresh-btn { color: var(--navy); border-color: rgba(20,33,61,.35); }

.offline-bar {
  background: var(--navy-2);
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  padding: 8px var(--margin);
}

main { max-width: 640px; margin: 0 auto; }

/* Greeting line (v1.1) */
.greet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px var(--margin) 8px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.org-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; color: var(--secondary); white-space: nowrap; }
.org-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.org-dot.blocked i { background: var(--amber); }

/* Segmented filter (tokens) */
.seg { margin: 0 var(--margin); background: var(--seg-track); border-radius: 10px; padding: 2px; display: flex; }
.seg button {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  min-height: 32px;
}
.seg button.on { background: var(--surface); font-weight: 600; box-shadow: 0 1px 2px rgba(20,33,61,.12); }

/* Label chips: word + icon, never color alone */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 6px; }
.chip svg { width: 12px; height: 12px; }
.chip.personal { color: var(--green); background: var(--green-tint); }
.chip.business { color: var(--navy); background: var(--navy-tint); }
.chip.clients { color: var(--gold-text); background: var(--gold-tint); }
[data-theme="navy"] .chip.business { color: var(--text); }

/* Hero (Up next): the only rounded block on Home */
.hero { background: var(--surface); margin: 12px var(--margin) 0; border-radius: var(--radius); padding: 14px; }
.hero .line1 { margin-bottom: 8px; }
.hero h2 { margin: 0 0 6px; }
.hero .why {
  font-size: 15px;
  line-height: 20px;
  color: var(--secondary);
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero .btn { height: 50px; }

/* Buttons (tokens) */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  border-radius: var(--radius);
  font-size: 17px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  padding: 0 16px;
  font-family: inherit;
}
.btn svg { width: 22px; height: 22px; flex: none; }
.btn.outline { background: var(--surface); color: var(--text); border: 1px solid #D9DCE3; box-shadow: none; }
.btn.outline:active { background: var(--grouped); }
.signin-sheet .btn.outline { background: #FFFFFF; color: var(--navy); }
.btn.gold { background: var(--gold); color: var(--navy); box-shadow: 0 1px 3px rgba(20,33,61,.20); }
.btn.gold:active { filter: brightness(.94); }
.btn:disabled { opacity: .55; }

/* Rows: full width, surface, hairlines, no borders, no shadows */
.rows { margin-top: 12px; }
.row { display: flex; gap: 12px; padding: 12px var(--margin); position: relative; background: var(--surface); }
.row + .row::before { content: ""; position: absolute; top: 0; left: var(--margin); right: 0; height: .5px; background: var(--hairline); }
.row .main { flex: 1; min-width: 0; }
.line1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.due { font-size: 13px; white-space: nowrap; }
.due.over { color: var(--red); font-weight: 600; }
.due.soon { color: var(--amber); font-weight: 600; }

/* Counts line (Wilson, 2026-11-08): one line on Home and Next
   moves, rendered from the server counts so both screens agree.
   The today part carries the red due treatment, the same red as
   the badge and the Due today label. */
.counts-line { margin: 10px var(--margin) 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text); }
.counts-line .counts-today { color: var(--red); font-weight: 800; }
.counts-line.week-progress { margin-top: 0; }

/* Compact rows (v1.1) */
.row.c { align-items: center; padding: 10px 16px; cursor: pointer; }
.row.c + .row.c::before { left: 60px; }
.row.c .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.c .w { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.c .txt { flex: 1; min-width: 0; }
.lead { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.lead svg { width: 17px; height: 17px; }
.lead.personal { color: var(--green); background: var(--green-tint); }
.lead.business { color: var(--navy); background: var(--navy-tint); }
.lead.clients { color: var(--gold-text); background: var(--gold-tint); }
[data-theme="navy"] .lead.business { color: var(--text); }
.lab { font-weight: 600; }
.lab.personal { color: var(--green); }
.lab.business { color: var(--navy); }
.lab.clients { color: var(--gold-text); }
[data-theme="navy"] .lab.business { color: var(--text); }
.amt { font-size: 17px; font-weight: 600; flex: none; }
.more {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  background: var(--surface);
  border: none;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.more .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more .r { font-weight: 600; flex: none; }

/* Declutter (item 49): Home group rows breathe (taller padding, one
   line each), collapsed rows stay in the DOM out of sight, and each
   group or panel carries one clear See all control. */
.rows.roomy .row.c { padding-top: 15px; padding-bottom: 15px; }
.row.is-collapsed, .corner-row.is-collapsed { display: none; }
.group-more {
  display: block;
  width: calc(100% - 2 * var(--margin));
  margin: 10px var(--margin) 0;
  padding: 12px 16px;
  background: var(--surface);
  border: 1.5px solid var(--hairline);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  min-height: 50px;
}
.corner .group-more { width: 100%; margin: 8px 0 10px; }

/* Section labels */
.section { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--secondary); padding: 16px 16px 6px; }

/* Tab bar (tokens) */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  min-height: 83px;
  background: var(--navy);
  display: flex;
  padding-top: 8px;
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--tab-idle);
  font-size: 11px;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  min-height: 44px;
}
.tab.on { color: var(--gold); font-weight: 600; }
.tab-ic { position: relative; display: block; width: 24px; height: 24px; }
.tab-ic svg { width: 24px; height: 24px; display: block; }
.badge {
  position: absolute;
  top: -5px;
  left: 16px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid var(--navy);
  display: grid;
  place-items: center;
  padding: 0 4px;
  line-height: 1;
}
.dot {
  position: absolute;
  top: -2px;
  left: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--navy);
}

/* Pages */
.page-title { margin: 0; padding: 16px var(--margin) 0; }
.page-sub { color: var(--secondary); padding: 2px var(--margin) 0; margin: 0; }
.back-row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: none;
  color: var(--gold-text);
  font-size: 17px;
  font-weight: 500;
  padding: 12px var(--margin) 0;
  cursor: pointer;
  min-height: 44px;
}
.back-row svg { width: 20px; height: 20px; }
[data-theme="navy"] .back-row { color: var(--gold); }

/* Empty states */
.empty { background: var(--surface); margin: 12px var(--margin) 0; border-radius: var(--radius); padding: 16px; }
.empty .t { font-size: 17px; line-height: 22px; font-weight: 600; margin: 0 0 4px; }
.empty .w { font-size: 15px; line-height: 20px; color: var(--secondary); margin: 0; }
.empty.flat { background: transparent; margin: 0; padding: 12px var(--margin); }

/* Sheets */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(20,33,61,.5);
  opacity: 0;
  transition: opacity 180ms ease-out;
}
.scrim.show { opacity: 1; }
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  max-width: 640px;
  margin: 0 auto;
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 8px var(--margin) calc(20px + env(safe-area-inset-bottom));
  transform: translateY(102%);
  transition: transform 250ms ease-out;
}
.sheet.show { transform: translateY(0); }
.grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--hairline); margin: 2px auto 10px; }

.sheet .line1 { margin-bottom: 10px; }
.sheet h2 { font-size: 22px; line-height: 28px; font-weight: 600; margin: 0 0 8px; }
/* Minimal sheets (Wilson, 2026-11-08): the permission sheet reads
   at body hierarchy, its promises as separated rows, not a wall. */
.sheet h2.small { font-size: 17px; line-height: 23px; }
.sheet-lede { font-size: 15px; line-height: 21px; color: var(--secondary); margin: 2px 0 2px; }
.perm-item { padding: 12px 0; border-top: 0.5px solid var(--hairline); }
.perm-item:last-child { padding-bottom: 2px; }
.perm-k { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text); }
.perm-v { font-size: 15px; line-height: 21px; color: var(--secondary); margin-top: 2px; }
/* Approval cards (Wilson, 2026-11-08): the explanation lives
   behind the Details tap, in body text, under the one short line. */
.details-btn { background: none; border: none; padding: 0 4px 0 0; margin-top: 4px; min-height: 32px; font: inherit; font-size: 14px; font-weight: 600; color: var(--gold-text); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.details-btn .chev { color: var(--secondary); font-weight: 400; }
.details-box { margin-top: 2px; }
.details-box .w { margin-top: 4px; }
.sheet .what { margin: 0 0 4px; }
.sheet .why { font-size: 15px; line-height: 20px; color: var(--secondary); margin: 0 0 8px; }
.close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--grouped);
  color: var(--secondary);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  flex: none;
}
.close-btn svg { width: 16px; height: 16px; }

.facts { margin: 6px 0 2px; }
.fact { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: 15px; line-height: 20px; }
.fact + .fact { border-top: .5px solid var(--hairline); }
.fact .k { color: var(--secondary); }
.fact .v { font-weight: 600; text-align: right; }

.choices { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
/* Choices are buttons, unmistakably: full width, 56px tall, a strong
   1.5px border in the text color (navy on light, near-white on dark),
   a lift shadow, and a fill change while pressed. A choice that looks
   like plain text is the failure Wilson reported on Nov 8. */
.choice {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--text);
  border-radius: var(--radius);
  padding: 13px 16px;
  min-height: 56px;
  cursor: pointer;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(20,33,61,.20);
  font-family: inherit;
}
.choice .cl { font-size: 17px; line-height: 22px; font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.choice .cl .picked-mark { flex: none; display: inline-grid; place-items: center; }
.choice .cl .picked-mark svg { width: 20px; height: 20px; }
.choice .pick-tag { font-size: 12px; font-weight: 600; color: var(--gold-text); white-space: nowrap; }
.choice .cw { font-size: 13px; line-height: 18px; color: var(--secondary); margin-top: 2px; }
.choice.gold { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.choice.gold .cw { color: rgba(20,33,61,.75); }
.choice.gold .pick-tag { color: var(--navy); }
.choice:active { background: var(--navy-tint); }
.choice.gold:active { background: var(--gold); filter: brightness(.93); }

/* Confirmation sheet (Wilson, 2026-11-08): a tap chooses, and only
   Send answer records it. The chosen words are stated plainly, with
   two large buttons: Send answer and Go back. */
.confirm-line { font-size: 19px; line-height: 26px; font-weight: 600; margin: 6px 0 4px; }
.confirm-error { color: var(--red); font-size: 14px; line-height: 20px; margin: 10px 0 0; }
.confirm-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.choice:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* The tapped choice stays vivid while the save runs, even though the
   sheet disables its controls: Wilson sees what he picked. */
.choice.picked { background: var(--navy); border-color: var(--navy); color: #fff; }
.choice.picked .cw { color: rgba(255,255,255,.8); }
.choice.gold.picked { background: var(--gold); border-color: var(--gold); color: var(--navy); filter: brightness(1.07); }
.choice:disabled { opacity: .55; }
.choice.picked:disabled { opacity: 1; }

.write-in { display: flex; gap: 8px; margin-top: 10px; }
.write-in input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  font-size: 17px;
  padding: 10px 14px;
  border: none;
  border-radius: var(--radius);
  background: var(--grouped);
  color: var(--text);
  font-family: inherit;
}
.write-in button {
  min-height: 52px;
  padding: 0 18px;
  border-radius: var(--radius);
  border: none;
  background: var(--navy);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
[data-theme="navy"] .write-in button { background: var(--gold); color: var(--navy); }
.write-in button:disabled { opacity: .55; }

/* Do nothing is a real button too, in the quiet style: grouped fill,
   a visible border, full width, 50px tall. Never a plain text line. */
.do-nothing {
  display: block;
  width: 100%;
  background: var(--grouped);
  border: 1.5px solid var(--secondary);
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
  padding: 13px 16px;
  margin-top: 10px;
  font-family: inherit;
  font-size: 15px;
  line-height: 20px;
  color: var(--text);
  min-height: 50px;
}
.do-nothing:active { filter: brightness(.96); }
.do-nothing:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.do-nothing b { font-weight: 600; }
.do-nothing span { color: var(--secondary); }
.do-nothing:disabled { opacity: .55; }

.sheet-foot { font-size: 12px; line-height: 16px; color: var(--secondary); text-align: center; margin: 12px 0 0; }

.saved-state { text-align: center; padding: 34px 16px 26px; }
.saved-state .ok-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green);
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
}
.saved-state .ok-ring svg { width: 28px; height: 28px; }
.saved-state .t { font-size: 17px; line-height: 22px; font-weight: 600; margin: 0 0 4px; }
.saved-state .w { font-size: 15px; line-height: 20px; color: var(--secondary); margin: 0; }

.sheet textarea {
  width: 100%;
  min-height: 110px;
  font-size: 17px;
  line-height: 24px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
}
.sheet .btn { margin-top: 12px; }

.account-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; font-size: 15px; line-height: 20px; }
.account-row + .account-row { border-top: .5px solid var(--hairline); }
.account-row .k { color: var(--secondary); }
.account-row .v { font-weight: 600; }
.sign-out-btn {
  display: block;
  width: 100%;
  min-height: 56px;
  margin-top: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--red);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  line-height: 56px;
  cursor: pointer;
}

/* Org lists */
.pill {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  flex: none;
}
.pill.ready { background: var(--green-tint); color: var(--green); }
.pill.blocked { background: var(--gold-tint); color: var(--amber); }
.pill.done { background: var(--navy-tint); color: var(--secondary); }
.row .b { font-size: 15px; line-height: 20px; font-weight: 400; }
.row .when { font-size: 13px; line-height: 18px; color: var(--secondary); display: block; margin-top: 2px; }
.row .picked { font-weight: 600; }

/* Sign-in (design v1.3/v1.4/v1.5 as amended by v1.6): full-bleed hero
   brand block, white sheet overlapping the skyline band. The hero is
   navy in dark mode and light in light mode; the sheet stays white in
   both, so its text keeps the light-theme colors on purpose. */
/* One screen, no scrolling: the view is exactly the viewport height.
   An earlier build pulled the view up by (10px + safe-area) with a
   negative top margin and stretched it past 100dvh; the app header is
   display:none on this screen, so the hero's top (WILSON NICOLAS) sat
   above the reachable scroll origin and overscroll showed dead white
   body. Both are gone: margin-top 0, height exactly 100dvh, and the
   hero is sized so hero + sheet fit inside it at phone sizes. */
#view-signin { margin: 0 calc(-1 * var(--margin)); padding-bottom: 0; display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
.signin-hero { position: relative; overflow: hidden; text-align: center; background: linear-gradient(180deg, #1B2B4F 0%, #14213D 55%); padding: calc(12px + env(safe-area-inset-top)) 20px 0; }
[data-theme="classic"] .signin-hero, [data-theme="light"] .signin-hero { background: linear-gradient(180deg, #FFFFFF 0%, #EEF0F4 100%); }
.signin-top { margin: 0; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .32em; color: #fff; }
[data-theme="classic"] .signin-top, [data-theme="light"] .signin-top { color: var(--navy); }
.signin-mark { width: 76px; height: 76px; margin: 16px auto 12px; display: block; }
.mark-navy { display: none; }
[data-theme="classic"] .mark-gold, [data-theme="light"] .mark-gold { display: none; }
[data-theme="classic"] .mark-navy, [data-theme="light"] .mark-navy { display: block; }
.signin-strategy { margin: 0; font-size: 34px; line-height: 38px; font-weight: 800; letter-spacing: .22em; color: #fff; text-indent: .22em; }
[data-theme="classic"] .signin-strategy, [data-theme="light"] .signin-strategy { color: var(--navy); }
.signin-stage { margin: 6px 0 0; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .42em; text-indent: .42em; color: var(--gold); }
[data-theme="classic"] .signin-stage, [data-theme="light"] .signin-stage { color: #7A5B12; }
.signin-skyline { display: block; width: 100%; height: 92px; margin-top: 10px; }
.sky-light { display: none; }
[data-theme="classic"] .sky-dark, [data-theme="light"] .sky-dark { display: none; }
[data-theme="classic"] .sky-light, [data-theme="light"] .sky-light { display: block; }
.signin-sheet { flex: 1; position: relative; background: #fff; border-radius: 24px 24px 0 0; margin-top: -20px; padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(20,33,61,.08); display: flex; flex-direction: column; }
#signin-methods { display: flex; flex-direction: column; flex: 1; }
.signin-title { font-size: 24px; line-height: 30px; font-weight: 700; color: var(--navy); margin: 0 0 6px; }
.signin-sub { font-size: 15px; line-height: 21px; color: #5B6476; margin: 0 0 16px; }
.signin-buttons { display: flex; flex-direction: column; gap: 10px; }
.signin-buttons .btn { margin-top: 0; }
/* Discreet opt-in line under the Face ID button (Wilson 2026-11-08):
   one short line, small secondary text, the way most apps note it. */
.signin-faceid-note { margin: 0; font-size: 13px; line-height: 18px; color: #5B6476; text-align: center; }
.signin-note { color: #5B6476; margin: 10px 0 0; min-height: 18px; }
.signin-sheet .code-label { color: #5B6476; }
.signin-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; font-size: 13px; }
.signin-private { display: inline-flex; align-items: center; gap: 6px; color: #5B6476; }
.signin-private svg { width: 14px; height: 14px; }
.signin-team { color: var(--navy); font-weight: 600; text-decoration: none; font-size: 13px; }
.signin-back { display: inline-flex; align-items: center; gap: 2px; background: transparent; border: none; color: var(--navy); font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 14px; cursor: pointer; min-height: 32px; font-family: inherit; }
.signin-back svg { width: 18px; height: 18px; }
.signin-resend { color: #5B6476; margin-top: 14px; }
/* Short screens (iPhone SE, 667pt and under): compress the hero and
   the sheet further so the whole sign-in and code composition still
   fits one screen with no scrolling. */
@media (max-height: 720px) {
  .signin-hero { padding-top: calc(6px + env(safe-area-inset-top)); }
  .signin-top { font-size: 12px; line-height: 16px; }
  .signin-mark { width: 54px; height: 54px; margin: 10px auto 8px; }
  .signin-strategy { font-size: 28px; line-height: 32px; }
  .signin-stage { margin-top: 4px; font-size: 11px; }
  .signin-skyline { height: 54px; margin-top: 6px; }
  .signin-sheet { margin-top: -16px; padding-top: 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .signin-title { font-size: 22px; line-height: 27px; }
  .signin-sub { font-size: 14px; line-height: 20px; margin-bottom: 12px; }
  .signin-buttons { gap: 8px; }
  .signin-buttons .btn { height: 50px; font-size: 16px; }
  .signin-faceid-note { font-size: 12px; line-height: 16px; }
  .signin-note { margin-top: 8px; }
  .signin-back { margin-bottom: 8px; }
  .signin-sheet .code-cell { height: 50px; }
  .signin-resend { margin-top: 10px; }
}
.linklike { background: none; border: none; padding: 0; color: var(--navy); font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit; }
.linklike:disabled { color: #5B6476; font-weight: 400; cursor: default; }
/* Six code boxes over one real input, so iPhone fills the code from
   Mail in a single tap (autocomplete="one-time-code"). */
.code-boxes { position: relative; display: flex; gap: 8px; margin-top: 6px; }
.code-cell { flex: 1; height: 58px; border: 1px solid #D9DCE3; border-radius: 12px; display: grid; place-items: center; font-size: 26px; font-weight: 600; color: var(--navy); background: #fff; }
.code-cell.filled { border-color: var(--navy); }
.code-cell.active { border: 2px solid var(--gold); }
.code-boxes.error .code-cell { border-color: var(--red); }
.code-boxes.shake { animation: shake 300ms ease-in-out; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.code-real { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .01; border: none; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; }
.error-box { padding: 32px var(--margin) 0; }
.error-box .screen-title { margin: 0 0 8px; }
.error-box p { color: var(--secondary); margin: 0 0 20px; }

/* Loading skeleton: static blocks in the real layout, no fake text */
.skel { display: block; background: var(--hairline); border-radius: 6px; height: 14px; }
.skel-seg { height: 36px; display: flex; align-items: center; padding: 0 8px; }
.skel-hero { display: flex; flex-direction: column; gap: 10px; }
.skel-btn { height: 50px; border-radius: var(--radius); }
.skel-rows { margin-top: 12px; background: var(--surface); }
.skel-rows .row { align-items: center; }
.skel-lead { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.w25 { width: 25%; } .w30 { width: 30%; } .w40 { width: 40%; }
.w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; }
.w80 { width: 80%; } .w90 { width: 90%; } .w100 { width: 100%; }

/* ---------- Client and partner view (one app, role-scoped) ---------- */
/* Tokens only, from org-hq tokens v1 plus the v1.2 portal additions. */

.top-actions { display: flex; align-items: center; gap: 10px; }
.chat-btn { position: relative; width: 32px; height: 32px; border: 0; background: transparent; color: var(--ink); display: grid; place-items: center; padding: 0; }
.chat-btn svg { width: 22px; height: 22px; }
.chat-dot { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }

.viewas-banner { position: sticky; top: calc(64px + env(safe-area-inset-top)); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--gold); color: var(--navy); padding: 10px 16px; font-size: 15px; font-weight: 600; }
.viewas-banner button { flex: none; border: 1.5px solid var(--navy); background: transparent; color: var(--navy); font-size: 14px; font-weight: 600; border-radius: 8px; padding: 6px 12px; min-height: 36px; }

.code-form { margin-top: 20px; text-align: left; }
.code-label { display: block; font-size: 13px; font-weight: 600; color: var(--secondary); margin: 14px 0 6px; }
.code-input { width: 100%; box-sizing: border-box; font-size: 17px; padding: 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); color: var(--text); font-family: var(--font); }
.code-form .btn { margin-top: 12px; }
.signin-owner { display: block; margin-top: 22px; font-size: 15px; color: var(--gold-text); }

.portal-users .lead { font-size: 13px; font-weight: 700; }
.portal-users .w.pad, .pad { padding: 12px 16px; }
p.w { font-size: 15px; line-height: 20px; color: var(--secondary); }
.viewas-btn { flex: none; align-self: center; border: 1.5px solid var(--gold); background: var(--gold-tint); color: var(--gold-text); font-size: 15px; font-weight: 600; border-radius: 10px; padding: 9px 14px; min-height: 44px; }

.portal-row { align-items: flex-start; }
.portal-row .txt { flex: 1; min-width: 0; }
.portal-row .t { font-size: 17px; line-height: 22px; font-weight: 600; }
.portal-row .t.strike { text-decoration: line-through; color: var(--secondary); }
.need-action { flex: none; width: 132px; }
.need-action .btn { height: 44px; font-size: 15px; }
.upload-wrap { display: block; }
.library-search { margin: 4px 16px 12px; width: calc(100% - 32px); }
.file-link { flex: none; align-self: center; color: var(--gold-text); font-weight: 600; font-size: 15px; }
.more-row { display: block; width: 100%; text-align: left; border: 0; background: var(--surface); padding: 12px 16px; font-size: 15px; color: var(--gold-text); font-weight: 600; }

/* v1.2 portal tokens */
.head { background: #14213D; color: #fff; border-radius: 14px; padding: 14px 16px; margin: 12px 16px 0; }
.head .big { font-size: 30px; line-height: 36px; font-weight: 700; }
.head .corner-h { font-size: 13px; font-weight: 600; color: var(--gold); letter-spacing: .2px; }
.head .head-line { font-size: 15px; line-height: 21px; margin: 8px 0 0; }
.corner { background: var(--surface); border-radius: 14px; padding: 4px 14px; margin: 16px 16px 0; }
.corner .h { font-size: 13px; font-weight: 600; color: #7A5B12; padding-top: 10px; }
.corner-row { display: flex; gap: 12px; padding: 10px 0; }
.corner-when { flex: none; width: 52px; font-size: 13px; font-weight: 600; color: var(--secondary); }
.corner-text { font-size: 15px; line-height: 20px; }
.box { width: 24px; height: 24px; border-radius: 7px; border: 1.75px solid #B6BBC6; background: transparent; color: #fff; flex: none; margin-top: 2px; font-size: 14px; line-height: 1; display: grid; place-items: center; padding: 0; }
.box.done { background: #2E6B4F; border-color: #2E6B4F; }
.box:disabled { opacity: .55; }
.who { font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: #E7E9EF; color: #14213D; }
.who.you { background: #F6EEDB; color: #7A5B12; }

/* Ordered lists and approvals (Wilson, 2026-11-08): position
   numbers on every to-do row, the reason line under an item that
   sits out of plain due order, the first item marked with a gold
   edge, and the client approvals block on both surfaces. Colors
   ride the theme tokens, so all three themes keep their contrast. */
.pos { font-size: 13px; font-weight: 700; line-height: 22px; color: var(--secondary); min-width: 18px; text-align: center; flex: none; }
.why { font-size: 13.5px; line-height: 19px; color: var(--secondary); margin-top: 2px; }
.row.is-first, .flow-card.is-first { box-shadow: inset 3px 0 0 var(--gold); }
.approval-btns { display: flex; gap: 10px; margin-top: 10px; }
.approval-btns .btn { flex: 1; }
.approval-state { font-size: 13.5px; line-height: 19px; font-weight: 600; color: var(--secondary); }
.approval-state.ok { color: var(--green); }
.client-block { margin-bottom: 18px; }
.client-head { display: flex; align-items: baseline; gap: 8px; padding: 4px var(--margin) 0; }
.client-head .t { font-size: 17px; line-height: 22px; font-weight: 600; }
.client-head .w { font-size: 13px; color: var(--secondary); }
.client-first { background: var(--gold-tint); color: #14213D; border-radius: 10px; margin: 8px var(--margin); padding: 10px 12px; }
/* Approval type tags and the client permission panel (Wilson, 2026-11-08). */
.tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .02em; border-radius: 999px; padding: 2px 9px; }
.tag-approval { background: var(--gold-tint); color: var(--gold-text); margin-left: 8px; flex: none; }
.tag-type { background: var(--gold-tint); color: var(--gold-text); }
/* Home link rows (Wilson, 2026-11-08): standing content and full
   lists sit behind one compact row on Home, never a text block. */
.home-link-row { border-top: 0.5px solid var(--hairline); }
.client-first .t { font-size: 17px; line-height: 22px; font-weight: 600; }
.client-first .why, .client-first .meta { color: #5B5340; }
.client-first .meta { margin-top: 4px; }
.kpi { background: var(--surface); border-radius: 12px; padding: 10px 12px; }
.kpi .v { font-size: 20px; font-weight: 700; }
.prog { height: 6px; border-radius: 3px; background: #E7E9EE; }
.prog i { display: block; height: 100%; border-radius: 3px; background: #CFA74C; }
.fchip { font-size: 13px; font-weight: 600; padding: 6px 11px; border-radius: 16px; border: 1px solid #E3E5EA; background: var(--surface); }
.fchip.on { background: #14213D; color: #fff; }
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 16px 0; }
.kpi .spark { width: 100%; height: 28px; margin-top: 6px; }
.spark polyline, .chart-line polyline { stroke: #14213D; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-line { width: 100%; height: 72px; }
.num-block { margin-top: 4px; }
.num-amt { margin-left: auto; text-align: right; font-size: 16px; font-weight: 600; white-space: nowrap; padding-left: 12px; }
.num-total .t, .num-total .num-amt { font-weight: 700; }
.row .prog { margin-top: 8px; }
[data-theme="navy"] .spark polyline, [data-theme="navy"] .chart-line polyline { stroke: #CFA74C; }

.thread { padding-bottom: 8px; }
.msg { margin: 10px 16px; max-width: 85%; }
.msg .msg-body { font-size: 16px; line-height: 22px; background: var(--surface); color: var(--text); border: 1px solid var(--hairline); border-radius: 16px; border-bottom-left-radius: 6px; padding: 10px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .meta { margin-top: 3px; }
.msg.from-you { margin-left: auto; }
.msg.from-you .msg-body { background: var(--navy); color: #fff; border-color: var(--navy); border-radius: 16px; border-bottom-right-radius: 6px; }
.msg.from-you .meta { text-align: right; }
.composer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--grouped); }
.composer .btn { margin-top: 10px; }
.btn.disabled, .btn:disabled { opacity: .55; }
/* Chat composer (2026-11-08): pinned at the bottom of the Messages
   page, above the tab bar, with a round gold send button. */
.chat-composer { position: sticky; bottom: calc(91px + env(safe-area-inset-bottom)); z-index: 20; display: flex; gap: 8px; align-items: flex-end; background: var(--bg); padding: 8px var(--margin); }
.chat-input { flex: 1; border: 1px solid var(--hairline); border-radius: 20px; background: var(--surface); color: var(--text); font: inherit; font-size: 16px; line-height: 1.4; padding: 10px 14px; resize: none; }
.send-round { flex: none; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--gold); color: var(--navy); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.send-round svg { width: 20px; height: 20px; }
.send-round:disabled { opacity: .45; }
.chat-readonly { position: sticky; bottom: calc(91px + env(safe-area-inset-bottom)); z-index: 20; margin: 0 var(--margin); border: 1.5px solid var(--hairline); border-radius: 14px; background: var(--surface); padding: 12px 14px; }
.chat-note { color: var(--red); margin: 4px var(--margin) 0; }
/* The report row sits just above the message box. */
.report-row { width: calc(100% - 2 * var(--margin)); margin: 4px var(--margin) 10px; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; }
.report-ic { flex: none; width: 22px; height: 22px; color: var(--gold-deep); display: flex; }
.report-ic svg { width: 22px; height: 22px; }
.report-txt { flex: 1; }
.report-row .chev { color: var(--faint); font-size: 20px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pick-chip { border: 1px solid var(--hairline); background: var(--surface); color: var(--text); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 40px; }
.pick-chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.thread-row { width: 100%; text-align: left; font: inherit; cursor: pointer; background: none; border: none; }
.own-reports { margin: 0 var(--margin) 6px; }
/* Get your numbers flowing card (2026-11-08). */
.flow-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px; margin: 10px var(--margin); }
.flow-card > .t { font-size: 17px; font-weight: 700; }
.flow-card > .w { margin: 4px 0 12px; }
.flow-opt { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--grouped); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 14px; font: inherit; text-align: left; color: var(--text); cursor: pointer; margin-top: 8px; }
.flow-opt.static { cursor: default; }
.flow-main { flex: 1; }
.flow-line { display: flex; align-items: center; gap: 8px; }
.rec { background: var(--gold); color: var(--navy); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 3px 8px; }
.flow-opt .chev { color: var(--faint); font-size: 20px; }
.flow-note { margin-top: 6px; }
.flow-note:empty { display: none; }
.flow-link { background: none; border: none; padding: 10px 0 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--gold-deep); cursor: pointer; }
.file-link.as-btn { background: none; border: none; font: inherit; cursor: pointer; }
.tiller-video { width: 100%; border-radius: 12px; background: #000; margin: 8px 0 12px; }
.video-after .btn { margin-top: 8px; }
.w.center { text-align: center; }
[data-theme="navy"] .flow-card { background: #131C2E; }
[data-theme="navy"] .flow-opt { background: #0B1220; }
[data-theme="navy"] .flow-link { color: #CFA74C; }

[data-theme="navy"] .corner, [data-theme="navy"] .kpi { background: #131C2E; }
[data-theme="navy"] .corner-when { color: #8E98AE; }
[data-theme="navy"] .more-row { background: #131C2E; }
[data-theme="navy"] .msg .msg-body { background: #131C2E; }
[data-theme="navy"] .msg.from-you .msg-body { background: #1E2D4F; border-color: #26314A; }
[data-theme="navy"] .chat-input { background: #131C2E; }
[data-theme="navy"] .report-row { background: #131C2E; }
[data-theme="navy"] .pick-chip { background: #131C2E; }
[data-theme="navy"] .pick-chip.on { background: var(--gold); color: var(--navy); border-color: var(--gold); }
[data-theme="navy"] .fchip { background: #131C2E; border-color: #26314A; }
[data-theme="navy"] .code-input { background: #131C2E; }
[data-theme="navy"] .theme-btn { color: var(--gold); }

/* Appearance (v1.6): the three-way choice inside Account. */
.seg.sheet-seg { margin: 0 0 6px; }
.account-note { font-size: 13px; line-height: 18px; color: var(--secondary); margin: 4px 0 0; }
body.signed-out { padding-bottom: 0; }

/* Navy label fixes (Wilson, 2026-11-08): these labels carried
   light-theme foregrounds onto Navy surfaces and fell under the
   4.5:1 text minimum. Each now uses a foreground that passes on
   its Navy surface; verify.mjs pairs every one of them. */
[data-theme="navy"] .more-row { color: var(--gold); }
[data-theme="navy"] .corner .h { color: var(--gold); }
[data-theme="navy"] .file-link { color: var(--gold); }
[data-theme="navy"] .due.over { color: #F0766B; }
[data-theme="navy"] .counts-line .counts-today { color: #F0766B; }
[data-theme="navy"] .due.soon { color: #E89A4E; }
[data-theme="navy"] .sign-out-btn { color: #F0766B; }

/* Light theme surfaces: the banner, the bars, and the navy panel
   go white and ivory, with navy text (Claude's reference). */
[data-theme="light"] .app-header { background: var(--surface); border-bottom: 1px solid var(--hairline); }
[data-theme="light"] .topbar-name { color: var(--navy); }
[data-theme="light"] .topbar .theme-btn { color: var(--navy); }
[data-theme="light"] .topbar .chat-btn { color: var(--navy); }
[data-theme="light"] .tabbar { background: var(--surface); border-top: 1px solid var(--hairline); }
[data-theme="light"] .tab.on { color: var(--gold-text); }
[data-theme="light"] .head { background: var(--surface); color: var(--text); border: 1px solid var(--hairline); }
[data-theme="light"] .head .corner-h { color: var(--gold-text); }

/* Appearance options (Wilson, 2026-11-08): the three named themes
   as full rows with a preview swatch, a one-line description, and
   a radio that fills gold on the chosen one. */
.theme-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.theme-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  background: var(--surface);
  border: 1.5px solid var(--hairline);
  border-radius: 12px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 64px;
}
.theme-opt.on { border-color: var(--gold); }
.theme-swatch { width: 46px; height: 34px; border-radius: 7px; border: 1px solid var(--hairline); flex: none; }
.theme-swatch.sw-classic { background: linear-gradient(180deg, #14213D 0 32%, #F4F5F7 32% 100%); }
.theme-swatch.sw-navy { background: linear-gradient(180deg, #1E2D4F 0 32%, #0B1220 32% 100%); }
.theme-swatch.sw-light { background: linear-gradient(180deg, #FFFFFF 0 32%, #F7F2E7 32% 100%); }
.theme-opt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.theme-opt-txt .t { font-size: 16px; line-height: 21px; font-weight: 600; color: var(--text); }
.theme-opt-txt .w { font-size: 13px; line-height: 18px; color: var(--secondary); }
.theme-radio {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--hairline);
  color: var(--navy);
  display: grid;
  place-items: center;
  flex: none;
}
.theme-radio svg { width: 14px; height: 14px; display: none; }
.theme-opt.on .theme-radio { background: var(--gold); border-color: var(--gold); }
.theme-opt.on .theme-radio svg { display: block; }
.theme-saved { margin-top: 10px; }