/* Horizon assistant dashboard. Built on apple-tokens.css (colors, type, spacing) and glass-motion.css (the phone tab
   bar). One stylesheet, organised top to bottom: tokens, shell, shared parts, then each page.
   Type: 34 page titles and headline numbers · 20 section titles · 15 rows and body · 13 secondary · 12 small labels.
   Color: Horizon blue for anything you can tap; red, orange and green only where they mean something. */

/* ---------- Tokens ---------- */
:root {
  --tint: rgb(31 84 140); --tint-text: rgb(31 84 140); --on-tint: #fff;
  --red-text: rgb(176 12 24); --orange-text: rgb(150 58 0); --green-text: rgb(0 120 48);
  --label-secondary: rgb(60 60 67 / 0.76);        /* 4.5:1+ on both the gray page and white cards */
  --card-edge: 0 0 0 0.5px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
  --thumb: #fff;
  --sidebar-w: 236px;
  /* The phone tab bar: 52px tall, lifted off the bottom edge: clear of the home indicator (the safe area) plus 14px,
     and never closer than 20px to the edge where there's no safe area (Safari with its own bar under the page) */
  --bar-h: 52px;
  --bar-lift: max(20px, calc(env(safe-area-inset-bottom) + 14px));
  --gutter: 16px;
  --row-x: 16px;
}
@media (min-width: 768px) { :root { --gutter: 28px; } }
@media (min-width: 1180px) { :root { --gutter: 40px; } }
:root[data-theme="dark"] {
  --tint: rgb(120 170 225); --tint-text: rgb(120 170 225); --on-tint: #000;
  --red-text: rgb(255 120 112); --orange-text: rgb(255 179 92); --green-text: rgb(80 220 120);
  --label-secondary: rgb(235 235 245 / 0.62); --card-edge: none; --thumb: rgb(99 99 102);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tint: rgb(120 170 225); --tint-text: rgb(120 170 225); --on-tint: #000;
    --red-text: rgb(255 120 112); --orange-text: rgb(255 179 92); --green-text: rgb(80 220 120);
    --label-secondary: rgb(235 235 245 / 0.62); --card-edge: none; --thumb: rgb(99 99 102);
  }
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
::view-transition-group(sidebar) { animation: none; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg-grouped); color: var(--label); font-family: var(--font-sans);
  font-size: var(--text-subhead); line-height: var(--lh-subhead); letter-spacing: var(--tr-subhead); -webkit-font-smoothing: antialiased; }
a { color: var(--tint-text); text-decoration: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }
.ic { flex: none; display: block; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Shell: sidebar from tablet width, floating tab bar on phones ---------- */
.app { min-height: 100dvh; }
.sidebar { display: none; }
main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter) calc(var(--bar-h) + var(--bar-lift) + 36px); }
@media (min-width: 768px) {
  .app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .sidebar { display: flex; }
  .tabbar-wrap { display: none; }
  main { padding-bottom: 40px; }
}

.sidebar {
  position: sticky; top: 0; height: 100dvh; flex-direction: column; min-width: 0;
  padding: calc(env(safe-area-inset-top) + 20px) 12px 0;
  background: var(--bg-grouped-secondary); border-right: 0.5px solid var(--separator);
  view-transition-name: sidebar;
}
/* Three bands that never overlap: the logo, the list (it scrolls on its own, however long: Greg's Yahoo has ~300
   folders), and the foot (Appearance and who's signed in), which stays put on a solid background with a line above. */
.brand { flex: none; display: grid; justify-items: start; gap: 6px; padding: 0 8px 16px; }
.brand-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 32px; }
.brand-sub { font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.side-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.side-secs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.side-row {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px;   /* finger-sized on tablets */
  border-radius: 9px; color: var(--label); font-size: var(--text-subhead);
}
.side-row .ic { color: var(--tint); }
.side-rl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1180px) { .side-row { height: 38px; } }
.side-row[aria-current="page"] { background: color-mix(in srgb, var(--tint) 12%, transparent); color: var(--tint-text); font-weight: var(--weight-semibold); }
@media (hover: hover) { .side-row:not([aria-current]):hover { background: var(--fill-quaternary); } }
.side-row .count { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); display: grid; place-items: center;
  background: color-mix(in srgb, var(--red) 85%, #000); color: #fff; font-size: 12px; font-weight: var(--weight-semibold); }   /* a little deeper than system red: white 12px text keeps 4.5:1 */
.side-foot { flex: none; display: grid; gap: 12px; margin: 0 -12px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 0.5px solid var(--separator); background: var(--bg-grouped-secondary); }
@media (max-height: 640px) { .side-foot { gap: 8px; padding-top: 8px; padding-bottom: 10px; } .side-foot .appearance legend { display: none; } }

/* Tab bar (glass-motion.css): its tabs (up to five) share the width. Its glass is a little thicker than the kit's, so the
   labels stay readable over busy rows scrolling under it. */
.tabbar.liquid-glass { background: rgb(255 255 255 / 0.6); }
:root[data-theme="dark"] .tabbar.liquid-glass { background: rgb(36 36 40 / 0.62); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabbar.liquid-glass { background: rgb(36 36 40 / 0.62); } }
/* Its size: a little smaller than the kit's (Jamo, Oct 21: was 60px tall with 26px icons and 10px semibold labels; now
   52px, 22px icons, 9.5px medium labels, still crisp on an iPhone's screen) and lifted off the bottom edge (--bar-lift).
   Every tab is still at least 44px to tap. */
.tabbar-wrap { bottom: var(--bar-lift); }
.tabbar { width: 100%; max-width: 400px; padding: 3px; }
.tab { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 0 2px; gap: 0; text-decoration: none; }
.tab svg { width: 22px; height: 22px; }
.tab .tl { font-size: 9.5px; line-height: 12px; font-weight: var(--weight-medium); letter-spacing: 0.01em; }
.tab[aria-current="page"] .tl { font-weight: var(--weight-semibold); }
.tabbar[data-minimized] .tab { min-height: 44px; }
.tabbar[data-minimized] .tab svg { width: 22px; height: 22px; }
.tab-selection { view-transition-name: tab-pill; }
.tabbar[data-minimized] { width: auto; }
.tabbar[data-minimized] .tab { flex: 0 0 auto; }
.tabbar[data-minimized] .tab .tl { display: none; }
.tabbar { transition: padding var(--dur) var(--ease); }

/* Compact title bar: slides in once the large title scrolls away; always there on a page with Back (an open email, a
   person or company, a report, a figure, a search), from phones up to 1179px */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  height: calc(44px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
  border-radius: 0; border-width: 0 0 0.5px;
  font-size: var(--text-subhead); font-weight: var(--weight-semibold);
  transform: translateY(-110%); transition: transform var(--dur) var(--ease-out);
  view-transition-name: app-header;
}
.topbar[data-shown], .topbar.always { transform: none; }
@media (min-width: 768px) { .topbar { left: var(--sidebar-w); } }
@media (min-width: 1180px) { .topbar.always { display: none; } }
.tb-back { position: absolute; left: 8px; bottom: 0; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding-right: 10px; font-weight: var(--weight-regular); }

/* ---------- Page head ---------- */
.head-back { display: none; align-items: center; gap: 2px; min-height: 32px; margin: 0 0 4px -4px; font-size: var(--text-subhead); }
@media (min-width: 1180px) { .head-back { display: inline-flex; } }
/* A page with Back (has-back, set by shell.js whenever there is a Back bar): the page starts below the bar and the logo row
   isn't drawn under it (the large title is enough, like a pushed screen on iOS); wide screens show Back above the title. */
@media (max-width: 1179px) {
  main.has-back { padding-top: calc(44px + env(safe-area-inset-top)); }
  main.has-back .head-top { display: none; }
  main.has-back .head { padding-top: 14px; }   /* the safe area is already in main's padding, above the bar's height */
}
@media (min-width: 768px) and (max-width: 1179px) { main.has-back .head { padding-top: 34px; } }
.head { padding: calc(env(safe-area-inset-top) + 14px) 0 4px; }
.head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.head h1 { margin: 0; font-size: var(--text-large-title); line-height: var(--lh-large-title); letter-spacing: var(--tr-large-title); font-weight: var(--weight-bold); }
.head-sub { margin: 4px 0 0; max-width: 68ch; color: var(--label-secondary); }
@media (min-width: 768px) { .head { padding-top: calc(env(safe-area-inset-top) + 34px); } .head-top { display: none; } }

.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-full); white-space: nowrap;
  background: color-mix(in srgb, var(--orange) 15%, transparent); color: var(--orange-text); font-size: 12px; font-weight: var(--weight-semibold); }

/* Horizon's logo: full color on light, their white-and-orange version on dark (never recolored) */
.logo { display: inline-flex; }
.logo img { display: block; width: auto; }
.logo-side img { height: 30px; }
.logo-head img { height: 24px; }
.logo .logo-dark { display: none; }
:root[data-theme="dark"] .logo .logo-light { display: none; }
:root[data-theme="dark"] .logo .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo .logo-dark { display: block; }
}

/* ---------- Shared parts ---------- */
section { margin-top: 30px; }
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 4px 10px; }
.sec-h h2 { flex: 1 1 auto; margin: 0; font-size: var(--text-title3); line-height: var(--lh-title3); letter-spacing: var(--tr-title3); font-weight: var(--weight-bold); }
.sec-h h2 .n { color: var(--label-secondary); font-weight: var(--weight-regular); }
.sec-meta { font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); white-space: nowrap; }
.sec-link { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -12px 0; font-weight: var(--weight-medium); }
.note { margin: 10px 4px 0; max-width: 72ch; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }

.card { background: var(--bg-grouped-secondary); border-radius: var(--radius-md); box-shadow: var(--card-edge); overflow: clip; }

/* Rows: the one list layout every page uses */
.row { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px var(--row-x); min-height: 52px; color: var(--label); }
.list > * + .row::before { content: ""; position: absolute; top: 0; left: var(--row-x); right: 0; border-top: 0.5px solid var(--separator); }
a.row { transition: background-color var(--dur-fast, 120ms) var(--ease); }
a.row:active { background: var(--fill-quaternary); }
@media (hover: hover) { a.row:hover { background: var(--fill-quaternary); } }
.row > .ic { color: var(--label-tertiary); }
.row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.row-title { flex: 1; min-width: 0; font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-title.wrap { white-space: normal; overflow: visible; }
.row-time { flex: none; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); font-variant-numeric: tabular-nums; }
.row-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.row-text { font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Pills: the words always say it; color only reinforces */
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-full); white-space: nowrap; flex: none;
  font-size: 12px; line-height: 1; font-weight: var(--weight-semibold); letter-spacing: 0; }
.row-sub .pill { height: 20px; }
.p-today { color: var(--red-text); background: color-mix(in srgb, var(--red) 13%, transparent); }
.p-week { color: var(--orange-text); background: color-mix(in srgb, var(--orange) 15%, transparent); }
.p-done { color: var(--green-text); background: color-mix(in srgb, var(--green) 14%, transparent); }
.p-reply { color: var(--tint-text); background: color-mix(in srgb, var(--tint) 13%, transparent); }
.p-later, .p-neutral { color: var(--label-secondary); background: var(--fill-tertiary); }

/* Empty states: small and intentional, never a big blank box */
.empty { display: flex; align-items: center; gap: 14px; padding: 18px var(--row-x); }
.empty-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-tertiary); color: var(--label-secondary); }
.empty-ok .empty-ic { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green-text); }
.empty-text { min-width: 0; }
.empty-text b { display: block; font-weight: var(--weight-semibold); }
.empty-text p { margin: 2px 0 0; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.empty-text a { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 -12px; font-size: var(--text-footnote); font-weight: var(--weight-semibold); }

.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--tint) 14%, transparent); color: var(--tint-text); font-size: var(--text-footnote); font-weight: var(--weight-semibold); }
.avatar-sm { width: 30px; height: 30px; font-size: 12px; }

/* Segmented control (Appearance) */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border-radius: 9px; background: var(--fill-tertiary); }
.appearance { border: 0; padding: 0; margin: 0; min-width: 0; }
.appearance legend { padding: 0; margin-bottom: 6px; font-size: 12px; color: var(--label-secondary); }
.appearance label { position: relative; isolation: isolate; display: grid; place-items: center; height: 30px; border-radius: 7px; cursor: pointer;
  font-size: var(--text-footnote); font-weight: var(--weight-medium); color: var(--label); }
.appearance label::after { content: ""; position: absolute; inset: -8px 0; }
.appearance input { position: absolute; opacity: 0; pointer-events: none; }
.appearance input:checked + span { font-weight: var(--weight-semibold); }
.appearance label:has(input:checked)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 7px; background: var(--thumb);
  box-shadow: 0 3px 8px rgb(0 0 0 / .12), 0 3px 1px rgb(0 0 0 / .04); }
.appearance label:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* Who's signed in */
.side-acct, .foot-acct { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.acct { display: flex; align-items: center; gap: 10px; min-width: 0; }
.acct-who { display: grid; min-width: 0; }
.acct { flex: 1 1 auto; }
.acct-name { font-size: var(--text-footnote); line-height: var(--lh-footnote); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-how { font-size: 12px; line-height: 16px; color: var(--label-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-note { margin: 0; font-size: 12px; line-height: 16px; color: var(--label-secondary); }
.sign-out { flex: none; margin: 0; }
.sign-out button { position: relative; height: 30px; padding: 0 12px; border-radius: var(--radius-full); border: 0; cursor: pointer; white-space: nowrap;
  background: var(--fill-tertiary); color: var(--label); font: inherit; font-size: var(--text-footnote); font-weight: var(--weight-semibold); }
.sign-out button::after { content: ""; position: absolute; inset: -7px -4px; }   /* 44px to tap */
/* In the sidebar (236px) the address gets the whole width, and Sign out goes under it as a text button: side by side
   there was room for only "greg.herl…". */
.side-acct { flex-wrap: wrap; justify-content: flex-start; row-gap: 0; }
.side-acct .acct { flex-basis: 100%; }
.side-acct .sign-out { padding-left: 40px; }
.side-acct .sign-out button { height: 28px; margin-left: -10px; padding: 0 10px; background: none; color: var(--tint-text); }
.side-acct .sign-out button::after { inset: -8px -4px; }
@media (hover: hover) { .sign-out button:hover { background: var(--fill-secondary); } }

/* Footer: settings card on phones (the sidebar has them on bigger screens) and the read-only promise */
.page-foot { margin-top: 44px; display: grid; gap: 16px; }
.foot-card { display: grid; gap: 16px; padding: 16px var(--row-x); background: var(--bg-grouped-secondary); border-radius: var(--radius-md); box-shadow: var(--card-edge); }
@media (min-width: 768px) { .foot-card { display: none; } }
.foot-note-c { margin: 0 auto; max-width: 60ch; text-align: center; font-size: 12px; line-height: 16px; color: var(--label-secondary); }

/* Two columns on wide screens (Writing Style) */
.cols { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; }
@media (min-width: 1180px) { .cols { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } }

/* A metric line: name and context, a small trend, then the number and its change */
.metric { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 14px; }
.metric-spark { width: 64px; display: flex; justify-content: flex-end; }
.metric-spark:empty { width: 0; }
.spark { width: 64px; height: 22px; color: var(--tint); }
.metric-nums { display: grid; justify-items: end; gap: 1px; min-width: 76px; }
.metric-v { font-weight: var(--weight-semibold); }
.delta { font-size: 12px; line-height: 16px; color: var(--label-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta.flag { color: var(--orange-text); font-weight: var(--weight-semibold); }
@media (max-width: 420px) { .metric-spark { display: none; } .metric { column-gap: 10px; } }

/* Chips: a row of choices that scrolls sideways on phones (Writing Style's groups, the Reports explorer's periods and filters) */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 14px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 6px; }   /* 4px: a chip's 44px tap area isn't cut off by the row it scrolls in */
.chips::-webkit-scrollbar { display: none; }
.chip { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--radius-full);
  background: var(--bg-grouped-secondary); box-shadow: var(--card-edge), inset 0 0 0 0.5px var(--separator); color: var(--label);
  font-size: var(--text-subhead); font-weight: var(--weight-medium); white-space: nowrap; }
.chip::after { content: ""; position: absolute; inset: -4px 0; }   /* 44px hit area */
.chip-n { font-size: 12px; font-weight: var(--weight-semibold); color: var(--label-secondary); }
.chip[aria-current="page"] { background: var(--tint); color: var(--on-tint); box-shadow: none; }
.chip[aria-current="page"] .chip-n { color: color-mix(in srgb, var(--on-tint) 75%, transparent); }
@media (hover: hover) { .chip:not([aria-current]):hover { background: var(--fill-quaternary); } }
@media (min-width: 768px) { .chips { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; } }

/* Day headings (Home's mail and the audit log): a quiet label above each day's card. Not sticky: a pinned band with
   rows sliding under it looked broken beside the list card. */
.day { margin: 12px 0 0; padding: 10px 4px 8px; font-size: var(--text-footnote); line-height: var(--lh-footnote); font-weight: var(--weight-semibold); color: var(--label-secondary); }

/* ---------- One email on Home: the subject card, the summary, the reply ---------- */
.msg { padding: 22px 20px 26px; }
@media (min-width: 768px) { .msg { padding: 26px 28px 30px; } }
.msg-subject { margin: 0; font-size: var(--text-title2); line-height: var(--lh-title2); letter-spacing: var(--tr-title2); font-weight: var(--weight-bold); }
.msg > .tags { margin-top: 10px; }
.from { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; margin-top: 16px; padding-top: 16px; border-top: 0.5px solid var(--separator); }
.from-text { display: grid; gap: 1px; min-width: 0; }
.from-name { font-weight: var(--weight-semibold); }
.from-meta { font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.from-when { display: grid; justify-items: end; gap: 1px; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); white-space: nowrap; }
@media (max-width: 600px) { .from { grid-template-columns: 40px minmax(0, 1fr); } .from-when { grid-column: 2; justify-items: start; display: flex; gap: 6px; margin-top: 2px; } .from-when span + span::before { content: "· "; } }
.why { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--tint) 7%, var(--bg-grouped-secondary)); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--tint) 18%, transparent); }
.why-sum { margin: 0; font-weight: var(--weight-medium); }
.why-reason { margin: 6px 0 0; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.why-reason b { font-weight: var(--weight-semibold); color: var(--label); }
details.reply { margin-top: 12px; padding: 0 14px; border-radius: 12px; box-shadow: inset 0 0 0 0.5px var(--separator); }
details.reply summary { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; color: var(--tint-text); font-weight: var(--weight-semibold); }
details.reply summary::-webkit-details-marker { display: none; }
details.reply summary .ic { transition: transform var(--dur) var(--ease); }
details.reply[open] summary .ic { transform: rotate(90deg); }
.reply-body { padding-bottom: 14px; }
.quote { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--bg-grouped); white-space: pre-wrap; font: inherit; }
.copy { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-top: 10px; padding: 0 14px; border: 0; border-radius: var(--radius-full); cursor: pointer;
  background: color-mix(in srgb, var(--tint) 13%, transparent); color: var(--tint-text); font: inherit; font-size: var(--text-footnote); font-weight: var(--weight-semibold); }
.copy.done { color: var(--green-text); background: color-mix(in srgb, var(--green) 14%, transparent); }
.mbody { margin-top: 20px; padding-top: 20px; border-top: 0.5px solid var(--separator); max-width: 72ch;
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-subhead); line-height: 1.55; }
.atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.att { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--fill-tertiary); font-size: var(--text-footnote); }

/* Attachments on an email: one row each, the whole row downloads */
.files { margin-top: 22px; padding-top: 18px; border-top: 0.5px solid var(--separator); display: grid; gap: 8px; }
.files-h { margin: 0 0 2px; font-size: var(--text-footnote); line-height: var(--lh-footnote); font-weight: var(--weight-semibold); color: var(--label-secondary); }
.file { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: 12px; background: var(--bg-grouped); color: var(--label); }
a.file { transition: background-color var(--dur-fast, 120ms) var(--ease); }
@media (hover: hover) { a.file:hover { background: var(--fill-tertiary); } }
.file-ic { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--bg-grouped-secondary); color: var(--label-secondary); }
.file-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.file-name { font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.file-dl { flex: none; font-size: var(--text-footnote); font-weight: var(--weight-semibold); color: var(--tint-text); }

/* ---------- Reports ---------- */
.rep-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; }
@media (min-width: 1180px) { .rep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.hero { padding: 16px var(--row-x) 6px; }
.hero-n { font-size: var(--text-large-title); line-height: var(--lh-large-title); letter-spacing: var(--tr-large-title); font-weight: var(--weight-bold); }
.hero-l { margin-top: 2px; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.chart { display: block; width: 100%; height: 110px; margin: 12px 0 4px; }
.chart .area { fill: var(--tint); opacity: 0.1; }
.chart .ln { fill: none; stroke: var(--tint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.axis { display: flex; justify-content: space-between; padding-bottom: 8px; font-size: 12px; color: var(--label-secondary); }
.list > .hero + .row::before { left: 0; }

/* ---------- Accuracy ---------- */
.hero-card { margin-top: 18px; padding: 20px var(--row-x) 18px; }
.hero-unit { margin-left: 10px; font-size: var(--text-subhead); font-weight: var(--weight-regular); letter-spacing: var(--tr-subhead); color: var(--label-secondary); }
.hero-card .hero-l { font-size: var(--text-subhead); line-height: var(--lh-subhead); max-width: 60ch; }
.hero-note { margin: 14px 0 0; padding-top: 12px; border-top: 0.5px solid var(--separator); font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.matrix { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.matrix th, .matrix td { padding: 12px 10px; text-align: center; border-top: 0.5px solid var(--separator); }
.matrix thead th { border-top: 0; font-size: 12px; font-weight: var(--weight-semibold); color: var(--label-secondary); }
.matrix th[scope="row"] { text-align: left; padding-left: var(--row-x); font-weight: var(--weight-semibold); }
.matrix td.hit { color: var(--green-text); font-weight: var(--weight-semibold); }
.matrix td.miss { color: var(--orange-text); font-weight: var(--weight-semibold); }
.matrix td.zero { color: var(--label-tertiary); }
.matrix td.caught { color: var(--label-secondary); }

/* ---------- Audit log ---------- */
.arow { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; grid-template-areas: "action time chev" "detail detail chev"; column-gap: 12px; row-gap: 2px; align-items: center; }
.a-action { grid-area: action; font-weight: var(--weight-semibold); min-width: 0; }
.a-time { grid-area: time; font-size: var(--text-footnote); color: var(--label-secondary); }
.a-detail { grid-area: detail; min-width: 0; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-what:not(:empty)::before { content: " · "; }
.arow > .ic, .arow > .ic-space { grid-area: chev; }
@media (min-width: 900px) {
  .arow { grid-template-columns: 92px minmax(150px, 0.9fr) minmax(0, 1fr) minmax(0, 1.2fr) 16px; grid-template-areas: none; }
  .arow > *, .arow > .ic, .arow > .ic-space { grid-area: auto; }
  .a-time { order: -1; }
  .a-detail { display: contents; }
  .a-who, .a-what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-footnote); color: var(--label-secondary); }
  .a-what:not(:empty)::before { content: none; }
}

/* ---------- Sign in (Horizon's account) ---------- */
.signin-body { min-height: 100dvh; display: grid; place-items: center; background: var(--bg-grouped); }
.signin { width: min(400px, calc(100% - 32px)); background: var(--bg-grouped-secondary); border-radius: var(--radius-lg); padding: 34px 26px 28px; text-align: center; box-shadow: var(--card-edge), var(--shadow-2); }
.signin .logo { justify-content: center; }
.signin .logo img { height: 42px; }
.signin h1 { margin: 16px 0 0; font-size: var(--text-title2); line-height: var(--lh-title2); font-weight: var(--weight-bold); }
.signin .badge { margin-top: 10px; }
.signin-msg { margin: 16px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--fill-quaternary); font-size: var(--text-footnote); line-height: var(--lh-footnote); }
.ms-button { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px 0 0; height: 48px; padding: 0 16px; border-radius: 12px;
  border: 1px solid rgb(140 140 140 / 0.5); background: var(--bg-grouped-secondary); color: var(--label); font-size: var(--text-callout); font-weight: var(--weight-semibold); }
@media (hover: hover) { .ms-button:hover { background: var(--fill-quaternary); } }
.signin-note { margin: 14px 0 0; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }

/* ---------- Draft a reply (drafter.js, ui/draft-views.js, draft.js) ----------
   On an email: a link near the top that says where the reply stands, and at the foot the panel: ask (with an optional
   instruction), "Writing a reply…", then "Ready to send" (edit, copy, files, what to check, try again, earlier drafts). */
.draft-jump { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-top: 14px; padding: 0 14px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--tint) 12%, transparent); color: var(--tint-text); font-size: var(--text-footnote); font-weight: var(--weight-semibold); }
.draft-jump::after { content: ""; position: absolute; inset: -5px 0; }   /* 44px hit area */
.draft-jump.is-ready { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green-text); }
@media (hover: hover) { .draft-jump:hover { background: color-mix(in srgb, var(--tint) 18%, transparent); } .draft-jump.is-ready:hover { background: color-mix(in srgb, var(--green) 20%, transparent); } }
.pill-ic { gap: 4px; }

.draft { margin-top: 22px; padding-top: 20px; border-top: 0.5px solid var(--separator); scroll-margin-top: calc(60px + env(safe-area-inset-top)); outline: none; }
.draft:focus-visible { box-shadow: none; }
.draft-head { display: flex; align-items: center; gap: 10px; }
.draft-head h3 { margin: 0; font-size: var(--text-subhead); line-height: var(--lh-subhead); font-weight: var(--weight-semibold); }
.draft-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--tint) 13%, transparent); color: var(--tint-text); }
.draft-ready .draft-ic { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green-text); }

.draft-form { margin-top: 0; }
.draft-label { display: flex; align-items: flex-end; gap: 6px; min-height: 44px; padding-bottom: 6px; font-size: var(--text-footnote); line-height: var(--lh-footnote); font-weight: var(--weight-semibold); }   /* tapping it focuses the box */
.draft-label span { font-weight: var(--weight-regular); color: var(--label-secondary); }
.draft-input, .draft-text { display: block; width: 100%; margin: 0; padding: 10px 12px; border: 0; border-radius: 12px; resize: vertical; field-sizing: content;
  background: var(--bg-grouped); box-shadow: inset 0 0 0 0.5px var(--separator); color: var(--label);
  font: inherit; font-size: var(--text-subhead); line-height: 1.5; letter-spacing: var(--tr-subhead); }
.draft-input { min-height: 68px; max-height: 200px; }
.draft-text { min-height: 200px; max-width: 72ch; }
.draft-input::placeholder { color: var(--label-secondary); }
.draft-input:focus-visible, .draft-text:focus-visible { box-shadow: inset 0 0 0 1px var(--tint), var(--focus-ring); border-radius: 12px; }
.draft-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.draft-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-full); cursor: pointer;
  background: color-mix(in srgb, var(--tint) 12%, transparent); color: var(--tint-text); font: inherit; font-size: var(--text-subhead); font-weight: var(--weight-semibold); white-space: nowrap;
  transition: background-color var(--dur-fast, 120ms) var(--ease), opacity var(--dur-fast, 120ms) var(--ease); }
.draft-primary { background: var(--tint); color: var(--on-tint); }
.draft-btn[disabled] { opacity: 0.55; cursor: progress; }
.draft-btn.done { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-text); }
@media (hover: hover) { .draft-btn:not(.draft-primary):not(.done):hover { background: color-mix(in srgb, var(--tint) 18%, transparent); } .draft-primary:not(.done):hover { background: color-mix(in srgb, var(--tint) 88%, var(--label)); } }
.draft-btn:active { opacity: 0.8; }
.draft-hint, .draft-meta, .draft-said, .draft-err { margin: 10px 0 0; max-width: 72ch; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.draft-meta { margin: 10px 0 12px; }
.draft-said:empty { margin: 0; }
.draft-err { color: var(--red-text); }

/* Writing, and couldn't write */
.draft-wait, .draft-fail { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--tint) 7%, var(--bg-grouped-secondary)); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--tint) 18%, transparent); }
.draft-fail { background: color-mix(in srgb, var(--red) 7%, var(--bg-grouped-secondary)); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--red) 22%, transparent); }
.draft-wait-text { display: grid; gap: 2px; min-width: 0; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); overflow-wrap: anywhere; }
.draft-wait-text b { font-size: var(--text-subhead); line-height: var(--lh-subhead); color: var(--label); font-weight: var(--weight-semibold); }
.draft-fail-ic { flex: none; color: var(--red-text); margin-top: 1px; }
.spin { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--tint) 25%, transparent); border-top-color: var(--tint); animation: draft-spin 0.9s linear infinite; }
@keyframes draft-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }

/* Ready to send: files, what to check, where each figure came from */
.draft-files { display: grid; gap: 8px; margin-top: 18px; }
.draft-files .file-name { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }   /* long names wrap (up to three lines) */
.draft-sub { margin: 0 0 2px; font-size: var(--text-footnote); line-height: var(--lh-footnote); font-weight: var(--weight-semibold); color: var(--label-secondary); }
.draft-check { margin-top: 18px; }
.checks { list-style: none; margin: 6px 0 0; padding: 0 14px; border-radius: 12px; background: var(--bg-grouped); }
.check { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; padding: 11px 0; font-size: var(--text-footnote); line-height: var(--lh-footnote); }
.check + .check { border-top: 0.5px solid var(--separator); }
.check > .pill { height: 20px; }
.check-text { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.src-chips { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }
.src-chip { position: relative; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 30px; padding: 0 10px; border-radius: var(--radius-full);
  background: var(--bg-grouped-secondary); box-shadow: inset 0 0 0 0.5px var(--separator); color: var(--tint-text); font-size: 12px; font-weight: var(--weight-semibold); }
.src-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-chip::after { content: ""; position: absolute; inset: -7px 0; }   /* 44px hit area */
@media (hover: hover) { .src-chip:hover { background: var(--fill-quaternary); } }

/* Try again, and earlier drafts */
.draft-again, .draft-older { margin-top: 16px; border-top: 0.5px solid var(--separator); }
.draft-again > summary, .draft-older > summary { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 48px; cursor: pointer;
  color: var(--tint-text); font-weight: var(--weight-semibold); }
.draft-again > summary::-webkit-details-marker, .draft-older > summary::-webkit-details-marker { display: none; }
.draft-again > summary .ic, .draft-older > summary .ic { transition: transform var(--dur) var(--ease); }
.draft-again[open] > summary .ic, .draft-older[open] > summary .ic { transform: rotate(90deg); }
.draft-again .draft-form { margin-top: -10px; }
.draft-older .n { color: var(--label-secondary); font-weight: var(--weight-regular); }
.draft-old { padding: 4px 0 14px; }
.draft-old + .draft-old { border-top: 0.5px solid var(--separator); padding-top: 4px; }
.draft-old .draft-meta { margin: 8px 0; }
.draft-old .quote { max-width: 72ch; overflow-wrap: anywhere; }
@media (max-width: 600px) { .draft-actions .draft-btn { flex: 1 1 auto; } }

/* ---------- Reports explorer (src/ui/explore-views.js and explore-charts.js) ----------
   The Reports home (Explore & export card, At a glance), the explorer (filters, chart, figures table), one figure's
   page, and a report page's period picker. Chart series colors: six hues in a fixed order, checked for color
   blindness against the card in light and dark (dataviz validator). Text never wears a series color; a short
   line key next to it carries the identity. */
:root {
  --ser0: #2a78d6; --ser1: #eb6834; --ser2: #1baf7a; --ser3: #eda100; --ser4: #e87ba4; --ser5: #008300;
  --chart-grid: rgb(60 60 67 / 0.14); --chart-rest: rgb(209 209 214);   /* solid: bar ends overlap */
}
:root[data-theme="dark"] {
  --ser0: #3987e5; --ser1: #d95926; --ser2: #199e70; --ser3: #c98500; --ser4: #d55181; --ser5: #008300;
  --chart-grid: rgb(235 235 245 / 0.14); --chart-rest: rgb(84 84 88);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ser0: #3987e5; --ser1: #d95926; --ser2: #199e70; --ser3: #c98500; --ser4: #d55181; --ser5: #008300;
    --chart-grid: rgb(235 235 245 / 0.14); --chart-rest: rgb(84 84 88);
  }
}
.ser0 { color: var(--ser0); } .ser1 { color: var(--ser1); } .ser2 { color: var(--ser2); }
.ser3 { color: var(--ser3); } .ser4 { color: var(--ser4); } .ser5 { color: var(--ser5); }

/* Buttons: tinted capsules; solid for the one main action */
.ex-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px;
  border: 0; border-radius: var(--radius-full); cursor: pointer; white-space: nowrap;
  background: color-mix(in srgb, var(--tint) 12%, transparent); color: var(--tint-text);
  font: inherit; font-size: var(--text-subhead); font-weight: var(--weight-semibold); transition: background-color var(--dur-fast) var(--ease); }
.ex-btn::after { content: ""; position: absolute; inset: -4px 0; }   /* 44px hit area */
.ex-btn-primary { background: var(--tint); color: var(--on-tint); }
.ex-btn-sm { height: 30px; padding: 0 12px; font-size: var(--text-footnote); }
.ex-btn-sm::after { inset: -7px 0; }
.ex-btn:active { opacity: 0.8; }
@media (hover: hover) {
  .ex-btn:hover { background: color-mix(in srgb, var(--tint) 20%, transparent); }
  .ex-btn-primary:hover { background: color-mix(in srgb, var(--tint) 86%, var(--label)); }
}

/* Form controls: 44px tall, gray fill like the segmented control. 16px text so phones don't zoom in on focus. */
.ex-field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.ex-l { padding: 0 4px; font-size: 12px; line-height: 16px; font-weight: var(--weight-semibold); color: var(--label-secondary); }
.ex-ctl { display: block; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0 36px 0 12px; border: 0; border-radius: var(--radius-sm);
  background: var(--fill-tertiary); color: var(--label); font: inherit; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  appearance: none; -webkit-appearance: none; cursor: pointer; }
.ex-ctl:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ex-ctl::placeholder { color: var(--label-secondary); opacity: 1; }
.ex-sel { position: relative; display: block; min-width: 0; }
.ex-sel::after, .ex-pick > summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border: solid var(--label-secondary); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
.ex-search-box { position: relative; display: block; min-width: 0; }
.ex-search-box > .ic { position: absolute; left: 12px; top: 13px; color: var(--label-secondary); pointer-events: none; }
.ex-search-box .ex-ctl { padding: 0 12px 0 38px; cursor: text; }

/* Reports home: the Explore & export card, then At a glance */
.ex-hero { margin-top: 18px; padding: 18px var(--row-x) 6px; }
.ex-hero-top { display: flex; align-items: flex-start; gap: 14px; }
.ex-hero-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--tint) 12%, transparent); color: var(--tint-text); }
.ex-hero h2 { margin: 0; font-size: var(--text-title3); line-height: var(--lh-title3); letter-spacing: var(--tr-title3); font-weight: var(--weight-bold); }
.ex-hero p { margin: 4px 0 0; max-width: 66ch; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.ex-search { display: flex; gap: 10px; margin-top: 16px; }
.ex-search .ex-search-box { flex: 1; }
.ex-search .ex-btn { height: 44px; }
.ex-hero-link { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin-top: 4px; font-weight: var(--weight-semibold); }

.gl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1000px) { .gl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gl { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px 12px; color: var(--label); transition: background-color var(--dur-fast) var(--ease); }
.gl:active { background: color-mix(in srgb, var(--label) 5%, var(--bg-grouped-secondary)); }
@media (hover: hover) { .gl:hover { background: color-mix(in srgb, var(--label) 4%, var(--bg-grouped-secondary)); } }
.gl-name { font-weight: var(--weight-semibold); }
.gl-sub { font-size: 12px; line-height: 16px; color: var(--label-secondary); }
.gl-v { margin-top: auto; padding-top: 10px; font-size: var(--text-title3); line-height: var(--lh-title3); letter-spacing: var(--tr-title3);
  font-weight: var(--weight-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.gl-d { min-width: 0; font-size: 12px; line-height: 16px; color: var(--label-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl .spark { flex: none; width: 56px; }
@media (max-width: 420px) { .gl-vs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* The explorer's filters */
.ex-filters { margin-top: 18px; padding: 16px var(--row-x); }
.ex-f-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.ex-f-wide, .ex-f-figs { grid-column: 1 / -1; }
@media (min-width: 1000px) {
  .ex-f-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ex-f-wide, .ex-f-figs { grid-column: span 2; }
}
.ex-f-figs:has(details[open]) { grid-column: 1 / -1; }
.ex-more { margin-top: 14px; }
.ex-more-s { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; min-height: 44px; padding: 12px 30px 10px 4px;
  border-top: 0.5px solid var(--separator); list-style: none; cursor: pointer; }
.ex-more-s::-webkit-details-marker { display: none; }
.ex-more-s::after { content: ""; position: absolute; right: 8px; top: 17px; width: 7px; height: 7px; border: solid var(--label-secondary); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ex-more[open] > .ex-more-s::after { transform: rotate(-135deg); top: 21px; }
.ex-more-t { font-weight: var(--weight-semibold); }
.ex-more-on { min-width: 0; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); overflow-wrap: anywhere; }
.ex-more-s:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.ex-more-body { padding-top: 4px; }
.ex-f-hint { margin: 12px 4px 0; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.ex-f-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.auto .ex-apply { display: none; }
.auto .ex-f-foot:not(:has(a)) { display: none; }
.ex-pick { min-width: 0; }
.ex-pick > summary { position: relative; display: flex; align-items: center; list-style: none; }
.ex-pick > summary::-webkit-details-marker { display: none; }
.ex-pick[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.ex-pick-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-subhead); }
.ex-pick-panel { margin-top: 8px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 0.5px var(--separator); }
.ex-pick fieldset { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); max-height: 312px; overflow-y: auto; margin: 0; padding: 4px 0; border: 0; min-width: 0; }
.ex-check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; cursor: pointer; }
.ex-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--tint); }
.ex-pick-foot { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; border-top: 0.5px solid var(--separator); }

/* Results: title and downloads, the chart, the table. While the next view loads this one stays, dimmed. */
.ex-results { transition: opacity var(--dur) var(--ease); }
.ex-results.loading { opacity: 0.5; pointer-events: none; }
.ex-res-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 30px 4px 0; }
.ex-res-t { flex: 1 1 320px; min-width: 0; }
.ex-res-t h2 { margin: 0; font-size: var(--text-title3); line-height: var(--lh-title3); letter-spacing: var(--tr-title3); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.ex-meta { margin: 2px 0 0; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.ex-dl { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-res-h + .ex-chart { margin-top: 18px; }
.ex-chips { margin-top: 0; }

/* Line chart: y labels in their own column, lines stretched to the plot, dots and x labels placed in percentages */
.mc { margin: 0; padding: 18px var(--row-x) 14px; container-type: inline-size; }
.mc-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
.mc-y { display: flex; flex-direction: column; justify-content: space-between; height: 200px; min-width: 30px;
  font-size: 12px; line-height: 16px; color: var(--label-secondary); font-variant-numeric: tabular-nums; }
.mc-y span { display: flex; align-items: center; justify-content: flex-end; height: 0; white-space: nowrap; }
.mc-plot { position: relative; height: 200px; }
.mc-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mc-grid { stroke: var(--chart-grid); stroke-width: 1; }
.mc-ln { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mc-dot { fill: currentColor; stroke: var(--bg-grouped-secondary); stroke-width: 2; }
.mc-dot.hollow { fill: var(--bg-grouped-secondary); stroke: currentColor; }
.mc-hit { fill: transparent; }
.mc-x { grid-column: 2; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 10px;
  font-size: 12px; line-height: 16px; color: var(--label-secondary); text-align: center; }
.mc-x span { display: flex; justify-content: center; padding: 0 2px; white-space: nowrap; }   /* a label may spill (centred) into its neighbours' cells: only every few are shown */
@container (max-width: 480px) { .mc-x .hn { visibility: hidden; } }
@container (min-width: 481px) { .mc-x .hw { visibility: hidden; } }
.mc-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none;
  font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label); }
.mc-legend li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mc-legend .mc-legend-note { color: var(--label-secondary); }
.mc-key { display: inline-block; flex: none; width: 16px; height: 3px; border-radius: 2px; background: currentColor; vertical-align: middle; }
.mc-key-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--label-secondary); }

/* Bar list: label, value, a bar from zero. On a figure's page "this one" is in color and the rest gray. */
.bl { margin: 0; padding: 6px 0; list-style: none; }
.bl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label v" "bar bar"; align-items: center; gap: 6px 12px;
  min-height: 44px; padding: 8px var(--row-x); color: var(--label); }
@media (min-width: 700px) {
  .bl-row { grid-template-columns: minmax(140px, 0.9fr) minmax(0, 2fr) minmax(88px, auto); grid-template-areas: "label bar v"; }
}
a.bl-row { transition: background-color var(--dur-fast) var(--ease); }
a.bl-row:active { background: var(--fill-quaternary); }
@media (hover: hover) { a.bl-row:hover { background: var(--fill-quaternary); } }
.bl-label { grid-area: label; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-this { font-size: var(--text-footnote); color: var(--label-secondary); }
.bl-v { grid-area: v; justify-self: end; font-weight: var(--weight-semibold); }
.bl-bar { grid-area: bar; display: block; width: 100%; height: 10px; overflow: visible; }
.bl-fill { fill: var(--chart-rest); }
.bl-all .bl-fill, .is-current .bl-fill { fill: var(--ser0); }
.bl-all .bl-fill.neg { fill: var(--chart-rest); }
.is-current .bl-label { font-weight: var(--weight-semibold); }

/* Figures table: the first column stays put; the numbers scroll sideways inside the card, never the page */
.ex-scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }   /* relative: screen-reader text in cells stays inside, not widening the page */
.ex-scroll:focus-visible { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--tint) 45%, transparent); border-radius: var(--radius-md); }
.ex-table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.ex-table th, .ex-table td { padding: 0; text-align: right; white-space: nowrap; vertical-align: middle; border-top: 0.5px solid var(--separator); }
.ex-table thead th { padding: 12px 14px 8px; border-top: 0; font-size: 12px; line-height: 16px; font-weight: var(--weight-semibold); color: var(--label-secondary); }
.ex-table td a { display: block; min-height: 44px; padding: 12px 14px; color: var(--label); }
.ex-table td.ex-none, .ex-table td.ex-chg { padding: 12px 14px; color: var(--label-tertiary); }
.ex-table.has-mk td a, .ex-table.has-mk td.ex-none { position: relative; padding-right: 36px; }   /* markers sit in the padding, so numbers stay aligned */
.ex-table .mk { position: absolute; right: 12px; top: 50%; margin: -8px 0 0; }
.ex-table .ex-fig { position: sticky; left: 0; z-index: 1; width: 150px; min-width: 150px; text-align: left; white-space: normal;
  background: var(--bg-grouped-secondary); box-shadow: inset -0.5px 0 0 var(--separator); }
.ex-table thead .ex-fig { padding-left: var(--row-x); }
@media (min-width: 700px) { .ex-table .ex-fig { width: 300px; min-width: 200px; } }
.ex-fig a { display: grid; gap: 1px; min-height: 44px; padding: 11px 14px 11px var(--row-x); color: var(--label); }
@media (hover: hover) { .ex-table td a:hover, .ex-fig a:hover { background: var(--fill-quaternary); } }
.ex-fig-n { font-weight: var(--weight-semibold); }
.ex-fig-n .mc-key { margin: 0 8px 0 0; vertical-align: 4px; }
.ex-fig-s { font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.ex-grp th { padding: 16px 0 6px; text-align: left; font-size: var(--text-footnote); line-height: var(--lh-footnote); font-weight: var(--weight-semibold); color: var(--label-secondary); background: var(--bg-grouped-secondary); }
.ex-grp th span { position: sticky; left: var(--row-x); padding: 0 var(--row-x); }
.mk { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 5px; border-radius: 50%; vertical-align: 1px;
  color: var(--orange-text); background: color-mix(in srgb, var(--orange) 16%, transparent); font-size: 12px; line-height: 1; font-weight: var(--weight-bold); }
.ex-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 4px 0; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.ex-lg { display: inline-flex; align-items: center; gap: 6px; }
.ex-lg .mk { margin: 0; }

/* A report's period picker and Explore button; a figure's explorer link and downloads */
.ex-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 18px; }
.ex-tools .ex-btn { height: 44px; }
.ex-period { display: flex; align-items: flex-end; gap: 10px; margin: 0; }
.ex-period .ex-field { width: 230px; max-width: 100%; }

/* One figure's page */
.fig-hero { margin-top: 18px; padding: 18px var(--row-x) 6px; }
.fig-hero p { margin: 0; }
.fig-when { font-size: var(--text-footnote); line-height: var(--lh-footnote); font-weight: var(--weight-semibold); color: var(--label-secondary); }
.fig-hero .hero-n { margin-top: 2px; }
.fig-chg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.fig-hero .tags { margin: 8px 0 4px; }
.fig-hero .mc { padding: 18px 0 12px; }
.fig-p { margin: 20px 4px 8px; font-size: var(--text-footnote); line-height: var(--lh-footnote); font-weight: var(--weight-semibold); color: var(--label-secondary);
  scroll-margin-top: calc(60px + env(safe-area-inset-top)); }
.fig-p:target { color: var(--tint-text); }
.ver-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ver-v { margin-right: 2px; font-weight: var(--weight-semibold); }
.ver-src { flex: none; display: flex; gap: 8px; }
@media (max-width: 520px) { .ver { flex-direction: column; align-items: stretch; gap: 10px; } }

/* ---------- Writing style (/voice, admins) ---------- */
/* Status: when it was built, Rebuild and Download */
.vc-status { display: grid; gap: 14px; margin-top: 18px; padding: 16px var(--row-x); }
.vc-status-top { display: flex; align-items: flex-start; gap: 12px; }
.vc-status-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--tint) 13%, transparent); color: var(--tint-text); }
.vc-status-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.vc-status-title { font-weight: var(--weight-semibold); }
.vc-status-sub { margin: 0; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.vc-status .tags { margin-top: 4px; }
.vc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vc-actions form { margin: 0; }
.vc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-full); cursor: pointer;
  background: var(--tint); color: var(--on-tint); font: inherit; font-size: var(--text-subhead); font-weight: var(--weight-semibold); white-space: nowrap;
  transition: background-color var(--dur-fast, 120ms) var(--ease); }
.vc-btn-2 { background: color-mix(in srgb, var(--tint) 13%, transparent); color: var(--tint-text); }
.vc-btn:disabled { cursor: default; background: var(--fill-tertiary); color: var(--label-secondary); }
@media (hover: hover) { .vc-btn:not(:disabled):hover { background: color-mix(in srgb, var(--tint) 88%, var(--label)); } .vc-btn-2:not(:disabled):hover { background: color-mix(in srgb, var(--tint) 20%, transparent); } }
@media (max-width: 480px) { .vc-actions > * { flex: 1 1 0; } .vc-actions .vc-btn { width: 100%; padding: 0 12px; } }
@media (min-width: 768px) { .vc-status { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.vc-status + .chips { margin-top: 20px; }
.chip[aria-current="page"]:focus-visible { box-shadow: var(--focus-ring); }   /* the selected chip kept no focus ring (Inbox too) */
main > .card.empty { margin-top: 18px; }

/* A guide: summary, one row per habit, phrases, do and don't, the made-up example */
.vc-guide { padding-bottom: 6px; }
.vc-summary { margin: 0; padding: 16px var(--row-x) 4px; font-size: var(--text-subhead); line-height: 1.5; }
.vc-rule { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; align-items: baseline; min-height: 0; padding-top: 11px; padding-bottom: 11px; }
.vc-aspect { font-size: var(--text-footnote); line-height: var(--lh-footnote); font-weight: var(--weight-semibold); color: var(--label-secondary); }
.vc-text { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 600px) { .vc-rule { grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; } }
.vc-block { margin-top: 6px; padding: 12px var(--row-x) 12px; border-top: 0.5px solid var(--separator); }
.vc-h { margin: 0 0 10px; font-size: var(--text-footnote); line-height: var(--lh-footnote); font-weight: var(--weight-semibold); color: var(--label-secondary); }
.vc-h-note { font-weight: var(--weight-regular); }
.vc-h-note::before { content: "· "; }
.vc-phrases { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vc-phrase { display: grid; gap: 1px; min-width: 0; max-width: 100%; padding: 8px 12px; border-radius: 12px; background: var(--bg-grouped); }
.vc-phrase b { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.vc-phrase span { font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.vc-dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 24px; }
@media (min-width: 600px) { .vc-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vc-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vc-list li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.vc-list li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.vc-yes, .vc-no { flex: none; width: 20px; height: 20px; margin-top: 0; border-radius: 50%; display: grid; place-items: center; }
.vc-yes { color: var(--green-text); background: color-mix(in srgb, var(--green) 14%, transparent); }
.vc-no { color: var(--red-text); background: color-mix(in srgb, var(--red) 12%, transparent); }
.vc-example { overflow-wrap: anywhere; }

/* The privacy check: label and count */
.vc-kv { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
.vc-k { flex: 1; min-width: 0; }
.vc-v { flex: none; font-weight: var(--weight-semibold); }
.vc-sub .vc-k { padding-left: 14px; font-size: var(--text-footnote); color: var(--label-secondary); }
.vc-sub .vc-v { font-size: var(--text-footnote); color: var(--label-secondary); }

/* People in a group: tap a person to move them */
.vc-person > summary { list-style: none; cursor: pointer; }
.vc-person > summary::-webkit-details-marker { display: none; }
.vc-person > summary .row-sub .pill { height: 20px; }
.vc-chev { flex: none; display: grid; color: var(--label-tertiary); transition: transform var(--dur) var(--ease); }
.vc-person[open] .vc-chev { transform: rotate(90deg); }
.vc-person { position: relative; }
.list > .vc-person + .vc-person::before { content: ""; position: absolute; top: 0; left: calc(var(--row-x) + 42px); right: 0; border-top: 0.5px solid var(--separator); }
@media (hover: hover) { .vc-person > summary:hover { background: var(--fill-quaternary); } }
.vc-move { display: grid; gap: 8px; margin: 0; padding: 0 var(--row-x) 14px calc(var(--row-x) + 42px); }
.vc-move-l { font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.vc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-opt { position: relative; height: 34px; padding: 0 14px; border: 0; border-radius: var(--radius-full); cursor: pointer;
  background: var(--fill-tertiary); color: var(--label); font: inherit; font-size: var(--text-subhead); font-weight: var(--weight-medium); }
.vc-opt::after { content: ""; position: absolute; inset: -5px 0; }   /* 44px hit area */
.vc-opt[aria-current="true"] { cursor: default; background: var(--tint); color: var(--on-tint); }
@media (hover: hover) { .vc-opt:not([aria-current]):hover { background: var(--fill-secondary); } }
@media (max-width: 480px) { .vc-move { padding-left: var(--row-x); } }

/* ---------- Reports, made simple (src/ui/reports-home.js, saved-views.js, explore-views.js) ----------
   One search with suggestions (an ARIA combobox), pinned cards that scroll sideways inside their own row, the Saved
   list (with an Edit mode), reports in categories with long groups and families folded, and the step-by-step
   explorer: period chips, a Custom range, Figures and breakdowns folded under one line, applied filters as chips. */

/* Search: the field, and the suggestions under it */
.sx { display: block; margin-top: 18px; }
.sx-form { margin: 0; }
.sx-box { position: relative; display: block; }
.sx-box > .ic { position: absolute; left: 12px; top: 13px; color: var(--label-secondary); pointer-events: none; }
.sx-input { padding: 0 12px 0 38px; cursor: text; background: var(--bg-grouped-secondary); box-shadow: var(--card-edge), inset 0 0 0 0.5px var(--separator); }
.sx-input::-webkit-search-cancel-button { cursor: pointer; }
.sx-list { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; max-height: min(62vh, 460px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 0; border-radius: var(--radius-md); background: var(--bg-grouped-secondary); box-shadow: var(--card-edge), var(--shadow-2); }
:root[data-theme="dark"] .sx-list { background: var(--bg-grouped-tertiary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sx-list { background: var(--bg-grouped-tertiary); } }
.sx-list[hidden] { display: none; }
.sx-gh { padding: 10px var(--row-x) 4px; font-size: 12px; line-height: 16px; font-weight: var(--weight-semibold); color: var(--label-secondary); }
.sx-opt { display: grid; gap: 1px; min-height: 44px; padding: 7px var(--row-x); cursor: pointer; align-content: center; }
.sx-opt[aria-selected="true"] { background: color-mix(in srgb, var(--tint) 13%, transparent); }
@media (hover: hover) { .sx-opt:hover:not([aria-selected="true"]) { background: var(--fill-quaternary); } }
.sx-t { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.sx-t mark { background: none; color: var(--tint-text); }
.sx-s { font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); overflow-wrap: anywhere; }
.sx-all { margin-top: 4px; border-top: 0.5px solid var(--separator); color: var(--tint-text); font-weight: var(--weight-semibold); }
.sx-more { margin: 4px 4px 0; }
.sx-more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: var(--weight-semibold); }

/* Pinned reports: one row of small cards, scrolling sideways inside itself (never the page) */
.pins-sec { margin-top: 18px; }
/* position: the screen-reader text in a card (a compact value's full figure) must stay inside the strip's own scroll;
   left to the page, a card scrolled off to the right widened the page on phones once there were a few pins */
.pins { position: relative; display: flex; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 8px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
.pins > li { flex: none; width: 216px; scroll-snap-align: start; }
@media (min-width: 768px) { .pins { margin: 0; padding: 2px 2px 8px; scroll-padding-inline: 2px; } .pins > li { width: 232px; } }
.pin { position: relative; display: flex; flex-direction: column; gap: 2px; height: 100%; min-height: 128px; padding: 12px 14px 10px; color: var(--label); transition: background-color var(--dur-fast) var(--ease); }
.pin:active { background: color-mix(in srgb, var(--label) 5%, var(--bg-grouped-secondary)); }
@media (hover: hover) { .pin:hover { background: color-mix(in srgb, var(--label) 4%, var(--bg-grouped-secondary)); } }
.pin-t { font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-f { font-size: 12px; line-height: 16px; color: var(--label-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-v { margin-top: auto; padding-top: 8px; font-size: var(--text-title3); line-height: var(--lh-title3); letter-spacing: var(--tr-title3); font-weight: var(--weight-bold); white-space: nowrap; }
.pin-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.pin .spark { flex: none; width: 56px; }
.pins-sec .empty { margin: 0; }

/* Save on a view: a button that opens a small panel (name, Save / Save and pin); saved views say so */
.sv { position: relative; }
.sv > summary { list-style: none; }
.sv > summary::-webkit-details-marker { display: none; }
.sv-panel { display: grid; gap: 12px; margin-top: 10px; padding: 14px var(--row-x); box-shadow: var(--card-edge), var(--shadow-2); }
/* Wide screens: a small panel under the button. Phones and tablets: it opens in place, on a line of its own. */
@media (min-width: 1180px) { .sv-panel { position: absolute; z-index: 25; left: 0; top: 100%; width: 360px; } }
@media (max-width: 1179px) { .sv[open] { flex: 1 1 100%; } }
.sv-f { display: grid; gap: 8px; margin: 0; }
.sv-name { padding: 0 12px; cursor: text; }
.sv-row { display: flex; align-items: flex-end; gap: 8px; }
.sv-row .ex-field { flex: 1; }
.sv-row .ex-btn { height: 44px; }
.sv-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-acts .sv-f { display: block; }
.sv-acts .ex-btn { height: 44px; }
.sv-note { margin: 0; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.sv-all { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0 -10px; font-size: var(--text-footnote); font-weight: var(--weight-semibold); }
.ex-btn-danger { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red-text); }
@media (hover: hover) { .ex-btn-danger:hover { background: color-mix(in srgb, var(--red) 18%, transparent); } }
.ex-acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.ex-tools .sv-btn { height: 44px; }

/* The Saved list: name and what it is; pin and one-tap Excel; Edit mode adds rename, order and remove */
.sl { margin: 0; padding: 0; list-style: none; }
.sl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding-top: 6px; padding-bottom: 6px; }
.sl-main { display: grid; gap: 2px; min-width: 0; min-height: 44px; align-content: center; color: var(--label); }
@media (hover: hover) { .sl-main:hover .row-title { color: var(--tint-text); } }
.sl-acts { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; }   /* above the next row, so its buttons keep their whole 44px */
.sl-acts .sv-f { display: block; }
.ic-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--tint-text); }
.ic-btn.on { color: var(--tint-text); background: color-mix(in srgb, var(--tint) 12%, transparent); }
@media (hover: hover) { .ic-btn:not(:disabled):hover { background: var(--fill-quaternary); } }
.ic-btn:disabled { color: var(--label-tertiary); cursor: default; }
.sl-row.is-edit { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding-top: 12px; padding-bottom: 12px; }
.sl-rename { display: flex; gap: 8px; align-items: center; }
.sl-rename .ex-ctl { flex: 1; padding: 0 12px; cursor: text; }
.sl-rename .ex-btn { height: 44px; }
.sl-desc { margin-top: -2px; }
.is-edit .sl-acts { flex-wrap: wrap; }
.is-edit .sl-acts .ex-btn { height: 36px; }
.sv-undo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 8px 8px 8px var(--row-x); }
.sv-undo .ex-btn { height: 36px; }

/* Pin to Home: one tap, wherever a report or figure shows (saved-views.js pinToggle). The outline pin and "Pin to Home"
   until it's pinned; then the pin fills and it says "Pinned". The full button sits by a page's title and in the
   explorer's results; the compact one (just the pin, 44px to tap) on report rows, At a glance cards and Saved. */
.pt-f { display: inline-flex; margin: 0; }
.pt .ic path { transition: fill var(--dur-fast) var(--ease); }
.pt.on .ic path:last-child { fill: currentColor; }
.pt-c { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--label-secondary); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.pt-c::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }   /* 44px hit area */
.pt-c.on { color: var(--tint-text); background: color-mix(in srgb, var(--tint) 12%, transparent); }
.pt-c:active { background: var(--fill-tertiary); }
.pt-c:focus-visible { border-radius: 50%; }
@media (hover: hover) { .pt-c:hover { color: var(--tint-text); background: var(--fill-quaternary); } .pt-c.on:hover { background: color-mix(in srgb, var(--tint) 18%, transparent); } }
.head-tools > .pt-f .pt, .ex-tools .pt { height: 44px; }
@media (min-width: 1000px) {
  .head.has-tools > .head-tools:has(> .pt-f) { grid-row: 1 / span 3; align-self: center; justify-self: end; }
}
/* A report row: the title is the link, stretched over the whole row; the pin sits on top of it */
.rr { gap: 8px; padding-right: calc(var(--row-x) - 4px); scroll-margin-top: 30vh; }   /* back from a pin without scripts: the row in view, clear of the title bar */
.rr-a { color: inherit; }
.rr-a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.rr-a:focus-visible { box-shadow: none; }
.rr-a:focus-visible::after { box-shadow: inset 0 0 0 2px var(--tint); border-radius: inherit; }
.rr > .pt-f { position: relative; z-index: 1; margin: -4px -2px; }
.rr { transition: background-color var(--dur-fast, 120ms) var(--ease); }
.rr:has(.rr-a:active) { background: var(--fill-quaternary); }
@media (hover: hover) { .rr:has(.rr-a:hover) { background: var(--fill-quaternary); } }
/* An At a glance card: the figure's name is the link, stretched over the card; the pin in its top corner */
.gl { position: relative; }
.gl-a { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; color: inherit; }
.gl-a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.gl-a .gl-name { padding-right: 16px; }
.gl-a:focus-visible { box-shadow: none; }
.gl-a:focus-visible::after { box-shadow: var(--focus-ring); }
.gl > .pt-f { position: absolute; top: 6px; right: 4px; z-index: 1; }
.gl .pt-c, .gl .pt-c.on { background: transparent; }   /* just the pin in the card's corner; it fills once pinned */
@media (hover: hover) { .gl .pt-c:hover { background: var(--fill-quaternary); } }
/* Arriving from Home's "Pin a report": one line that points at the pins, and the pins tinted until he picks one */
.pin-hint { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; padding: 10px 14px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--tint) 10%, var(--bg-grouped-secondary)); font-size: var(--text-subhead); line-height: var(--lh-subhead); }
.pin-hint > .ic { flex: none; color: var(--tint-text); }
.pin-hint ~ * .pt-c:not(.on) { color: var(--tint-text); background: color-mix(in srgb, var(--tint) 10%, transparent); }

/* Every report, in categories: two balanced columns on wide screens; long groups and families fold */
@media (min-width: 1000px) { .cat-grid { columns: 2; column-gap: 28px; } .cat-grid > .cat { break-inside: avoid; } .cat-grid > .cat:first-child { margin-top: 30px; } }
.cat-grid > .cat { display: inline-block; width: 100%; }
.fam > summary { list-style: none; cursor: pointer; }
.fam > summary::-webkit-details-marker { display: none; }
.fam-chev { flex: none; display: grid; color: var(--label-tertiary); transition: transform var(--dur) var(--ease); }
.fam[open] .fam-chev { transform: rotate(90deg); }
@media (hover: hover) { .fam > summary:hover, .more-s:hover { background: var(--fill-quaternary); } }
.fam-list { padding-left: 14px; }
.fam, .more-in { position: relative; }
.list > * + .fam::before, .list > * + .more-in::before, .fam-list > .row::before, .more-in > .row::before, .more-in > .fam::before {
  content: ""; position: absolute; top: 0; left: var(--row-x); right: 0; border-top: 0.5px solid var(--separator); }
.more-in > summary { list-style: none; cursor: pointer; color: var(--tint-text); font-weight: var(--weight-semibold); }
.more-in > summary::-webkit-details-marker { display: none; }
.more-in > summary::before { display: none; }
.more-in[open] > summary::before { display: block; content: ""; position: absolute; top: 0; left: var(--row-x); right: 0; border-top: 0.5px solid var(--separator); }
.more-c, .more-in[open] .more-o { display: none; }
.more-in[open] .more-c { display: inline; }
.more-in[open] > summary { order: 2; }
.more-in[open] { display: flex; flex-direction: column; }

/* The explorer, step by step */
.xp-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin: 2px 4px 0; font-size: var(--text-footnote); line-height: var(--lh-footnote); }
.xp-ctx a { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--weight-semibold); }
.chip[aria-current="true"] { background: var(--tint); color: var(--on-tint); box-shadow: none; }
.chip[aria-current="true"]:focus-visible { box-shadow: var(--focus-ring); }
.ex-per { margin-top: 6px; }
.ex-custom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; margin-top: 10px; padding: 14px var(--row-x); }
.ex-custom .ex-f-hint { grid-column: 1 / -1; margin: 0 4px; }
.ex-custom .ex-apply { grid-column: 1 / -1; justify-self: start; height: 44px; }
@media (min-width: 700px) { .ex-custom { grid-template-columns: 220px 220px auto; } .ex-custom .ex-apply { grid-column: auto; } }
.auto.ex-custom .ex-apply { display: none; }
.ex-refine { margin-top: 12px; padding: 0 var(--row-x); }
.ex-refine > .ex-more-s { border-top: 0; }
.ex-refine[open] > .ex-more-s { border-bottom: 0.5px solid var(--separator); }
.ex-refine .ex-more-body { padding: 14px 0 16px; }
.ex-refine .ex-f-foot { margin-top: 14px; }
.ex-pick-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 12px 4px; }
.ex-applied { margin-top: 8px; }
.chip-x { gap: 6px; padding-right: 10px; }
.chip-x .ic { color: var(--label-secondary); }
.chip-clear { box-shadow: none; background: transparent; color: var(--tint-text); }
.xp + .ex-results > .ex-res-h { margin-top: 24px; }
.xp + .ex-results > section:first-child { margin-top: 18px; }

/* ---------- An open email: the conversation, each email as designed (ui/mail-views.js, mail.js) ----------
   The subject card, one card per email in the thread (oldest first), then the reply. A folded email shows sender ·
   time · one line; an open one, who it went to and what's new in it. Quoted history folds behind "Show quoted text";
   a forward is its own inset card. An email's HTML sits on white paper, in dark mode too (emails are designed for white). */
.msg-head .draft-jump { margin-top: 16px; }
.convo { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.convo-inner { margin-top: 10px; }
.msg-reply { margin-top: 10px; }
.msg-reply .draft { margin-top: 0; padding-top: 0; border-top: 0; }

.mm-d > summary, .mm-more-d > summary, .fwd-d > summary, .quoted > summary { list-style: none; cursor: pointer; }
.mm-d > summary::-webkit-details-marker, .mm-more-d > summary::-webkit-details-marker, .fwd-d > summary::-webkit-details-marker, .quoted > summary::-webkit-details-marker { display: none; }
.mm-h { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: start; min-height: 64px; padding: 14px var(--row-x); border-radius: var(--radius-md);
  transition: background-color var(--dur-fast, 120ms) var(--ease); }
@media (min-width: 768px) { .mm-h { padding: 16px 20px; } }
@media (hover: hover) { .mm-d:not([open]) > .mm-h:hover { background: var(--fill-quaternary); } }
.mm-h:focus-visible, .mm-more-h:focus-visible { box-shadow: inset 0 0 0 2px var(--tint); border-radius: var(--radius-md); }
.mm-av { width: 36px; height: 36px; font-size: var(--text-footnote); }
.mm-av.is-mine { background: var(--tint); color: var(--on-tint); }
.mm-who { display: grid; gap: 2px; min-width: 0; }
.mm-top { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 22px; }
.mm-name { flex: 0 1 auto; min-width: 0; font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-you { height: 20px; }
.mm-time { flex: none; margin-left: auto; padding-left: 8px; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); font-variant-numeric: tabular-nums; }
.mm-snip { font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-meta { display: none; gap: 1px; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); min-width: 0; }
.mm-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-d[open] .mm-snip { display: none; }
.mm-d[open] .mm-meta { display: grid; }
.mm-d[open] > .mm-h { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mm-body { padding: 2px var(--row-x) 18px; }
@media (min-width: 768px) { .mm-body { padding: 2px 20px 22px; } }
.mm-body > * + * { margin-top: 14px; }
.mm-body > .files { margin-top: 18px; }
.mm-empty { margin: 0; font-size: var(--text-footnote); color: var(--label-secondary); }

/* The email itself: a frame sized by mail.js (it scrolls on its own if that file doesn't run) */
.mframe { display: block; width: 100%; height: 60vh; border: 0; margin: 0; background: #fff; color-scheme: light; }
:root[data-theme="dark"] .mframe { padding: 14px 16px; border-radius: 12px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mframe { padding: 14px 16px; border-radius: 12px; } }
/* Plain-text emails, in the dashboard's own type */
.mtext { max-width: 72ch; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-subhead); line-height: 1.55; }
.mtext a { padding-block: 13px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }   /* 44px tall to tap, same line spacing */
.mtext-img { display: block; max-width: min(240px, 100%); height: auto; margin: 4px 0; border-radius: 4px; }

/* A forward: its own inset card with who sent it, when and the subject */
.fwd { border-radius: 14px; background: var(--bg-grouped); box-shadow: inset 0 0 0 0.5px var(--separator); overflow: clip; }
.fwd-h { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; color: var(--label-secondary); font-size: var(--text-footnote); font-weight: var(--weight-semibold); }
.fwd-h > .ic:last-child { margin-left: auto; transform: rotate(90deg); transition: transform var(--dur) var(--ease); }
.fwd-d:not([open]) > .fwd-h > .ic:last-child { transform: none; }
.fwd-meta { display: grid; gap: 3px; margin: 0; padding: 0 14px 12px; font-size: var(--text-footnote); line-height: var(--lh-footnote); }
.fwd-row { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 8px; }
.fwd-row dt { color: var(--label-secondary); }
.fwd-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fwd-row:first-child dd { font-weight: var(--weight-semibold); }
.fwd-addr { font-weight: var(--weight-regular); color: var(--label-secondary); }
.fwd-body { padding: 0 10px 10px; }
.fwd .mframe { padding: 12px 14px; border-radius: 10px; }
.fwd .mtext { padding: 2px 4px 4px; }
.fwd > details > .quoted { margin: 0 14px 12px; }

/* Quoted history */
.quoted-h { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--tint-text); font-size: var(--text-footnote); font-weight: var(--weight-semibold); }
.q-dots { display: inline-grid; place-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius-full); background: var(--fill-tertiary); color: var(--label-secondary); font-size: 12px; letter-spacing: 1px; }
.quoted[open] .q-show, .quoted:not([open]) .q-hide { display: none; }
.q-list { display: grid; gap: 16px; margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--separator); }
.q-attr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0 0 8px; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.q-attr b { color: var(--label); font-weight: var(--weight-semibold); }
.q-date::before { content: "· "; }

/* Many emails: the middle ones fold into one row */
.mm-more-h { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; color: var(--tint-text); font-size: var(--text-footnote); font-weight: var(--weight-semibold); }
.mm-more-h .ic { transform: rotate(90deg); }
.mm-more-d[open] > .mm-more-h { display: none; }
.mm-more-d[open] > .convo-inner { margin-top: 0; }

/* ---------- Home: the date and what needs him, pinned reports, one line from the reports, then his mail ----------
   (src/ui/views.js homeView). The list's title is the view menu ("Needs You ⌄ 44", like Apple Mail's mailbox
   switcher): a details/summary that opens a small menu of the five views; app.js adds Escape, arrow keys and closing on
   a tap outside. Phones and tablets show the list or one email; 1180px and up show both side by side. */

/* The head: the date, what needs him, and search (on the date's row on wide screens; under it on phones and tablets) */
.head-tools { margin-top: 14px; }
.hs { margin: 0; }
@media (min-width: 1000px) {
  .head.has-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); column-gap: 24px; align-items: center; }
  .head.has-tools > * { grid-column: 1; }
  .head.has-tools > .head-tools { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}
main.home .head-back { display: none; }   /* the list is beside the email on wide screens; phones have the title bar's */

/* Pinned reports: a quiet label (the mail is the main thing), and a last card that says how to pin one */
.home .pins-sec { margin-top: 22px; }
.home .pins-sec .sec-h { margin-bottom: 8px; }
.home .pins-sec .sec-h h2 { font-size: var(--text-footnote); line-height: var(--lh-footnote); letter-spacing: var(--tr-footnote); font-weight: var(--weight-semibold); color: var(--label-secondary); }
.home .pins-sec .sec-link { font-size: var(--text-footnote); }
.pins > li:has(.pin-add) { width: 168px; }
.pin-add { display: flex; flex-direction: column; gap: 2px; height: 100%; min-height: 128px; padding: 12px 14px 10px; background: transparent; box-shadow: inset 0 0 0 1px var(--separator);
  transition: background-color var(--dur-fast) var(--ease); }
.pin-add-t { margin-top: auto; font-weight: var(--weight-semibold); color: var(--tint-text); }
.pin-add-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--tint) 12%, transparent); color: var(--tint-text); }
.pin-add:active { background: var(--fill-quaternary); }
@media (hover: hover) { .pin-add:hover { background: var(--fill-quaternary); } }

/* Worth a look: one line into the report whose figure moved most */
.look { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; min-height: 44px; margin-top: 4px; padding: 0 4px; color: var(--label-secondary);
  font-size: var(--text-footnote); line-height: var(--lh-footnote); }
.look-t { flex: none; font-weight: var(--weight-semibold); color: var(--tint-text); }
.look-d { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look-m { color: var(--label); }
.look .delta { font-size: inherit; }
.look > .ic { color: var(--label-tertiary); }

/* The view menu */
.split { margin-top: 18px; }
.look + .split { margin-top: 8px; }
.split > section { margin-top: 0; }   /* the list and the open email aren't page sections */
.mail-h { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.vm { position: relative; }
.vm > summary { list-style: none; }
.vm > summary::-webkit-details-marker { display: none; }
.vm-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: -6px; padding: 0 10px 0 6px; border-radius: var(--radius-sm);
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; color: var(--label); }
.vm-btn:focus-visible { border-radius: var(--radius-sm); }
.vm-t { margin: 0; font-size: var(--text-title3); line-height: var(--lh-title3); letter-spacing: var(--tr-title3); font-weight: var(--weight-bold); }
.vm-btn > .ic { color: var(--tint-text); transition: transform var(--dur) var(--ease); }
.vm[open] .vm-btn > .ic { transform: rotate(180deg); }
.vm-n { margin-left: 2px; font-size: var(--text-title3); line-height: var(--lh-title3); color: var(--label-secondary); }
.vm-btn:active { background: var(--fill-quaternary); }
@media (hover: hover) { .vm-btn:hover { background: var(--fill-quaternary); } }
.vm-list { position: absolute; z-index: 35; top: calc(100% + 4px); left: -6px; width: 260px; max-width: calc(100vw - 2 * var(--gutter)); margin: 0; padding: 6px 0; list-style: none;
  border-radius: var(--radius-md); background: var(--bg-grouped-secondary); box-shadow: var(--card-edge), var(--shadow-3); transform-origin: 24px 0; }
:root[data-theme="dark"] .vm-list { background: var(--bg-grouped-tertiary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vm-list { background: var(--bg-grouped-tertiary); } }
@media (prefers-reduced-motion: reduce) { .vm-btn > .ic { transition: none; } }   /* the menu itself opens with Motion (app.js) */
.vm-sep { margin-top: 6px; padding-top: 6px; border-top: 0.5px solid var(--separator); }
.vm-i { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 44px; padding: 0 16px 0 14px; color: var(--label); }
.vm-i > .ic { visibility: hidden; color: var(--tint-text); }
.vm-i[aria-current="page"] > .ic { visibility: visible; }
.vm-i[aria-current="page"] .vm-l { font-weight: var(--weight-semibold); }
.vm-c { font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.vm-i:focus-visible { border-radius: 0; box-shadow: inset 0 0 0 2px var(--tint); }
.vm-i:active { background: var(--fill-quaternary); }
@media (hover: hover) { .vm-i:hover { background: var(--fill-quaternary); } }
.mail-find { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 0; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.mail-find a { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--weight-semibold); }
@media (min-width: 768px) { .mail-find { margin-left: auto; } }

/* The mail: a row is who and when, the subject, the summary, then the labels that say something */
.mail-h + .day { margin-top: 2px; }
.mrow { display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: start; column-gap: 10px; padding-left: 14px; }
.list > * + .mrow::before { left: 32px; }
.mrow .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; }
.dot.today { background: var(--red); } .dot.week { background: var(--orange); }
.row-files { flex: none; display: flex; align-self: center; color: var(--label-secondary); }
.row-box { flex: none; font-size: 12px; color: var(--label-secondary); }
.row-files + .row-box, .row-files + .row-time, .row-box + .row-time { margin-left: -4px; }
.mrow .row-subject { margin-top: 1px; }
.mrow .row-text { margin-top: 2px; }
.mrow .tags { margin-top: 7px; }
.mrow[aria-current="true"] { background: color-mix(in srgb, var(--tint) 11%, transparent); }
.mrow[aria-current="true"] .p-neutral, .mrow[aria-current="true"] .p-done, .mrow[aria-current="true"] .p-later { background: var(--bg-grouped-secondary); }   /* pills keep their contrast */

/* The list, or one email (phones and tablets); both side by side from 1180px */
.split .detail { display: none; }
.split.has-detail .list-col { display: none; }
.split.has-detail .detail { display: block; }
@media (max-width: 1179px) {
  main.detail-open { padding-top: calc(52px + env(safe-area-inset-top)); }
  main.detail-open .split { margin-top: 0; }
  main.detail-open .head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }   /* the h1 stays for screen readers */
  main.detail-open .head-tools, main.detail-open .pins-sec, main.detail-open .look { display: none; }
}
@media (min-width: 1180px) {
  .split { display: grid; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .split .list-col, .split.has-detail .list-col { display: block; }
  .split .detail { display: block; position: sticky; top: 56px; max-height: calc(100dvh - 72px); overflow: auto; border-radius: var(--radius-md); }
}

/* ---------- Organizing his Outlook (src/organize.js, ui/organize-views.js, public/organize.js) ----------
   A star and a select circle on each row, unread mail in bold, his folders (with their dashboard colors) under Home
   in the sidebar and in the view menu on phones, the open email's toolbar, the floating selection bar (it takes the
   tab bar's place on phones, like Mail's edit mode), Move to… / New Folder / Folder Color as sheets, and the toast.
   The star is Outlook's flag: amber, deeper in light mode so it keeps 3:1 against a white or selected row. */
:root { --star: rgb(200 110 0); }
:root[data-theme="dark"] { --star: rgb(255 179 64); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --star: rgb(255 179 64); } }
.d1 { --depth: 1; } .d2 { --depth: 2; } .d3 { --depth: 3; } .d4 { --depth: 4; }   /* a folder's nesting (organize-views.js) */

/* A row: the link fills it; the select circle sits where the urgency dot is, the star under the time */
.mr { position: relative; }
.list > * + .mr::before { content: ""; position: absolute; z-index: 1; top: 0; left: 32px; right: 0; border-top: 0.5px solid var(--separator); pointer-events: none; }
.mr .row-subject, .mr .row-text { padding-right: 30px; }
.mr[data-yahoo] .row-subject, .mr[data-yahoo] .row-text { padding-right: 0; }
.mr.unread .row-title { font-weight: var(--weight-bold); }
.mr.unread .row-subject { font-weight: var(--weight-semibold); }
.mr.unread .row-time { color: var(--tint-text); font-weight: var(--weight-semibold); }
.mr.is-sel > .mrow { background: color-mix(in srgb, var(--tint) 9%, transparent); }
.sel { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 32px; display: flex; justify-content: center; padding-top: 14px; cursor: pointer; }
.sel-cb { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sel-c { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--label-secondary); color: transparent;
  background: var(--bg-grouped-secondary); opacity: 0; transition: opacity var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.sel-cb:checked + .sel-c { background: var(--tint); box-shadow: none; color: var(--on-tint); }
.sel-cb:focus-visible + .sel-c { opacity: 1; box-shadow: var(--focus-ring); }
.mail.selecting .sel-c, .sel-cb:checked + .sel-c { opacity: 1; }
.mail.selecting .mr .dot, .mr:has(.sel-cb:focus-visible) .dot { visibility: hidden; }
@media (hover: hover) { .mr:hover .sel-c { opacity: 1; } .mr:hover .dot { visibility: hidden; } }
@media (hover: none) { .mail:not(.selecting) .sel { pointer-events: none; } }   /* an invisible circle never catches a tap */
.star { position: absolute; z-index: 2; right: 2px; top: 28px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--label-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.star[aria-pressed="true"] { color: var(--star); }
.star[aria-pressed="true"] .ic { fill: currentColor; }
.star:active { background: var(--fill-quaternary); }
@media (hover: hover) { .star:hover { background: var(--fill-quaternary); } }
.star.busy, .tb-b.busy, .sb-b.busy { opacity: 0.45; pointer-events: none; }
.mail.selecting .mr .star { visibility: hidden; }
/* A row leaving the list slides away and the rows under it close the gap (Motion: organize.js) */

/* The list's header: Select, or (while selecting) Select All · n Selected · Done */
.sel-go, .selh button { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--tint-text); font: inherit; font-weight: var(--weight-semibold); cursor: pointer; border-radius: var(--radius-sm); }
.sel-go { margin-left: auto; }
.mail-h .mail-find { order: 3; flex-basis: 100%; margin-left: 0; }
.selh { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.selh[hidden] { display: none; }
.selh-n { font-size: var(--text-headline); font-weight: var(--weight-semibold); color: var(--label); }
.mail.selecting .vm, .mail.selecting .sel-go { display: none; }
/* While selecting on a phone, Select All · n Selected · Done stay in reach at the top across the full width, like Mail's
   edit mode. From tablet width it stays in place: a band pinned over the list column with rows sliding under it looks
   broken there (the floating bar at the bottom carries the count). */
@media (max-width: 767px) {
  .mail.selecting .mail-h { position: sticky; z-index: 25; top: calc(44px + env(safe-area-inset-top)); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
    background: var(--bg-grouped); border-bottom: 0.5px solid var(--separator); }
}
@media (hover: hover) { .sel-go:hover, .selh button:hover { background: var(--fill-quaternary); } }

/* A folder's list: the mail system's own counts under its title */
.fmeta { order: 4; flex-basis: 100%; margin: 0 0 2px; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }

/* The view menu on phones: Starred and his folders under the five views (the sidebar has them on bigger screens) */
.vm-list { max-height: min(70dvh, 640px); overflow-y: auto; overscroll-behavior: contain; }
.vm-list { --gut: 34px; }
/* Phones: the menu is nearly the screen's width, and a folder's chevron is a full 44px to tap */
@media (max-width: 767px) { .vm-list { --gut: 44px; width: min(360px, calc(100vw - 2 * var(--gutter))); } }
.vm-f { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; width: 100%; min-height: 44px;
  padding: 0 16px 0 calc(var(--gut) + var(--depth, 0) * 18px); border: 0; background: none; color: var(--label); font: inherit; text-align: left; cursor: pointer; }
.vm-f > .ic, .vm-f > .fi { justify-self: center; color: var(--tint-text); }
.vm-star > .ic { color: var(--star); }
.vm-f .vm-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-tree { padding: 0; }
.vm-f[aria-current="page"] .vm-l { font-weight: var(--weight-semibold); }
.vm-f[aria-current="page"] { background: color-mix(in srgb, var(--tint) 10%, transparent); }
.vm-new { color: var(--tint-text); }
.vm-gh { padding: 10px 16px 2px var(--gut); font-size: 12px; line-height: 16px; font-weight: var(--weight-semibold); color: var(--label-secondary); }
.vm-f:focus-visible { border-radius: 0; box-shadow: inset 0 0 0 2px var(--tint); }
.vm-f:active { background: var(--fill-quaternary); }
@media (hover: hover) { .vm-f:hover { background: var(--fill-quaternary); } }
@media (min-width: 768px) { .vm-fx { display: none; } }

/* The sidebar: Starred and his folders, under Home. The list scrolls on its own between the logo and the foot. Every
   grid here is one column that may shrink (minmax(0, 1fr)): a long name is cut with "…" instead of widening the list
   and pushing the counts off the edge. */
.sidebar .side-nav { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; margin: 0 -12px; padding: 0 12px 12px;
  scrollbar-width: thin; scrollbar-gutter: stable; }
.side-org { --gut: 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 10px 0 6px; padding-top: 10px; border-top: 0.5px solid var(--separator); }
@media (min-width: 1180px) { .side-org { --gut: 26px; } }
.side-f { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px 0 calc(var(--gut) + var(--depth, 0) * 18px); border-radius: 9px; color: var(--label); font-size: var(--text-subhead); }
@media (min-width: 1180px) { .side-f { min-height: 34px; } }
.side-fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-f .fn { flex: none; font-size: var(--text-footnote); color: var(--label-secondary); }
.side-f[aria-current="page"] .fn { color: var(--tint-text); }
/* Folder pictures as masks in the folder's color (currentColor): one rule each here instead of a drawing in every row, so
   ~300 folders in the sidebar and the phone menu cost almost nothing to send, parse or style (organize-views.js ficon). */
.fk::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--fk) center / 18px 18px no-repeat; mask: var(--fk) center / 18px 18px no-repeat; }
.fk-folder { --fk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E"); }
.fk-inbox { --fk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); }
.fk-filePen { --fk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 22H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v9.5'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M13.378 15.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z'/%3E%3C/svg%3E"); }
.fk-send { --fk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E"); }
.fk-trash { --fk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E"); }
.fk-archive { --fk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='5' x='2' y='3' rx='1'/%3E%3Cpath d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E"); }
.fk-ban { --fk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.9 4.9 14.2 14.2'/%3E%3C/svg%3E"); }
.fk-messages { --fk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M13 8H7'/%3E%3Cpath d='M17 12H7'/%3E%3C/svg%3E"); }
.fk-outbox { --fk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E"); }
.fk-clock { --fk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 14v2.2l1.6 1'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5'/%3E%3Cpath d='M3 10h5'/%3E%3Cpath d='M8 2v4'/%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3C/svg%3E"); }
.tog-ic { width: 14px; height: 14px; background: currentColor; -webkit-mask: 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat; mask: 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat; }
@media (forced-colors: active) { .fk::before, .tog-ic { forced-color-adjust: none; background: CanvasText; } }
/* A folder's icon: the standard one for its kind, in the account's tint (Horizon blue; Personal's below). Folders have
   no color of their own. */
.fi { flex: none; display: grid; place-items: center; width: 22px; color: var(--tint); }
.fi-star, .vm-star .ic { color: var(--star); }
/* Folders inside a folder: indented under it, folded away with the chevron in front of it (public/folders.js) */
.sf-list, .sf-kids { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.sf { min-width: 0; }
/* ~300 folders: rows off screen aren't laid out or painted until they scroll near (keeps scrolling smooth on phones) */
.sf:not(.has-kids) { content-visibility: auto; contain-intrinsic-size: auto 44px; }
@media (min-width: 1180px) { .side-fl .sf:not(.has-kids) { contain-intrinsic-size: auto 34px; } }
.sf-r { position: relative; }
.sf-tog { position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(var(--depth, 0) * 18px); width: var(--gut); display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 9px; background: none; color: var(--label-secondary); cursor: pointer; }
.sf-tog .ic { transition: transform 200ms var(--ease-out); }
.sf.is-closed > .sf-r > .sf-tog .ic { transform: rotate(-90deg); }
.sf.is-closed > .sf-kids { display: none; }
.sf-tog:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--tint); }
@media (hover: hover) { .sf-tog:hover { color: var(--label); } }
@media (prefers-reduced-motion: reduce) { .sf-tog .ic { transition: none; } }
.side-f[aria-current="page"] { background: color-mix(in srgb, var(--tint) 12%, transparent); color: var(--tint-text); font-weight: var(--weight-semibold); }
.side-f:focus-visible, .side-row:focus-visible, .mbx-a:focus-visible { box-shadow: inset 0 0 0 2px var(--tint); }   /* inside the row: long lists don't paint outside their rows */
@media (hover: hover) { .side-f:not([aria-current]):hover { background: var(--fill-quaternary); } }
.side-fh { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 0 2px 0 var(--gut); }
.side-fh-t { font-size: 12px; line-height: 16px; font-weight: var(--weight-semibold); color: var(--label-secondary); }
.side-add { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tint-text); cursor: pointer; }
@media (min-width: 1180px) { .side-add { width: 30px; height: 30px; } }
@media (hover: hover) { .side-add:hover { background: var(--fill-quaternary); } }


/* The open email's toolbar, and the folder it's in */
.org-tb { display: flex; justify-content: flex-end; gap: 2px; margin: -14px -10px 8px; }
@media (max-width: 600px) { .org-tb { justify-content: space-between; margin: -12px -8px 6px; } }
.tb-b { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tint-text); cursor: pointer; }
.tb-b.star { position: static; }
.tb-b.star[aria-pressed="true"] { color: var(--star); }
.tb-b:active { background: var(--fill-quaternary); }
@media (hover: hover) { .tb-b:hover { background: var(--fill-quaternary); } }
.fchip { gap: 5px; }
.fchip .fi { width: 14px; color: inherit; }
.fchip .fk::before { width: 14px; height: 14px; -webkit-mask-size: 14px 14px; mask-size: 14px 14px; }
.tb-read[data-act="unread"] .ic:last-child, .tb-read[data-act="read"] .ic:first-child { display: none; }   /* the envelope shows what it will do */

/* The selection bar: floating glass, where the tab bar is on phones; icons with words on wider screens */
.selbar-wrap { position: fixed; left: 0; right: 0; bottom: var(--bar-lift); z-index: 41; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.selbar-wrap[hidden] { display: none; }
.selbar { display: flex; align-items: center; gap: 2px; max-width: 100%; padding: 4px; pointer-events: auto; }
.sb-n { display: none; padding: 0 10px 0 12px; font-weight: var(--weight-semibold); white-space: nowrap; }
.sb-b { display: grid; place-items: center; min-width: 50px; height: 52px; padding: 0 4px; border: 0; border-radius: 9999px; background: none; color: var(--tint-text); font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.sb-b[hidden] { display: none; }
.sb-b .sb-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sb-b[aria-disabled="true"] { color: var(--label-tertiary); cursor: default; }
.sb-b:active { background: var(--fill-tertiary); }
@media (hover: hover) { .sb-b:not([aria-disabled="true"]):hover { background: var(--fill-tertiary); } }
body.org-selecting .tabbar-wrap { display: none; }
@media (min-width: 768px) {
  .selbar-wrap { left: var(--sidebar-w); bottom: 20px; }
  .sb-n { display: block; }
  .sb-b { display: flex; gap: 6px; padding: 0 12px; min-width: 0; height: 44px; font-size: var(--text-subhead); font-weight: var(--weight-medium); }
  .sb-b .sb-l { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .sb-b .ic { width: 19px; height: 19px; }
}
@media (min-width: 768px) and (max-width: 1099px) { .sb-b .sb-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .sb-b { padding: 0 10px; } }
@media (prefers-reduced-motion: no-preference) { .selbar-wrap:not([hidden]) .selbar { animation: sb-in var(--spring-snappy-duration, 400ms) var(--spring-snappy, ease-out); } }
@keyframes sb-in { from { transform: translateY(24px); opacity: 0; } }

/* Sheets: Move to…, New Folder, Folder Color. A bottom sheet on phones, a small panel on wider screens. */
.org-dlg { width: min(440px, calc(100vw - 32px)); max-height: min(620px, 86dvh); padding: 0; border: 0; border-radius: 16px; overflow: hidden;
  background: var(--bg-grouped-secondary); color: var(--label); box-shadow: var(--shadow-3); }
.org-dlg::backdrop { background: rgb(0 0 0 / 0.32); }
:root[data-theme="dark"] .org-dlg { background: var(--bg-grouped-tertiary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .org-dlg { background: var(--bg-grouped-tertiary); } }
@media (max-width: 599px) {
  /* A bottom sheet (it rises with Motion, organize.js). With the iPhone keyboard up (--kb, app.js) it sits just above it. */
  .org-dlg { width: 100%; max-width: 100%; margin: auto 0 var(--kb, 0px); max-height: calc(min(620px, 86dvh) - var(--kb, 0px)); border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
}
.org-dlg-in { display: flex; flex-direction: column; max-height: inherit; }
.org-dlg-h { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 56px; padding: 0 8px; border-bottom: 0.5px solid var(--separator); }
.org-dlg-h h2 { margin: 0; font-size: var(--text-headline); line-height: var(--lh-headline); font-weight: var(--weight-semibold); }
.dlg-text { justify-self: start; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--tint-text); font: inherit; font-size: var(--text-body); cursor: pointer; border-radius: var(--radius-sm); }
.dlg-save { justify-self: end; font-weight: var(--weight-semibold); }
.dlg-save:disabled { color: var(--label-tertiary); cursor: default; }
.org-fl { list-style: none; margin: 0; padding: 6px 0 10px; overflow-y: auto; overscroll-behavior: contain; }
.org-fi { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 20px 0 calc(20px + var(--depth, 0) * 18px); border: 0; background: none;
  color: var(--label); font: inherit; font-size: var(--text-body); text-align: left; cursor: pointer; }
.org-fi > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-fi[aria-current="true"] { color: var(--label-secondary); }
.org-fi[aria-current="true"]::after { content: "Here now"; margin-left: auto; font-size: var(--text-footnote); color: var(--label-secondary); }
.org-new { color: var(--tint-text); border-top: 0.5px solid var(--separator); margin-top: 6px; }
.org-fi:focus-visible { border-radius: 0; box-shadow: inset 0 0 0 2px var(--tint); }
.org-fi:active { background: var(--fill-quaternary); }
@media (hover: hover) { .org-fi:hover { background: var(--fill-quaternary); } }
.org-form { display: grid; gap: 8px; padding: 16px 20px 22px; overflow-y: auto; }
.org-field { display: grid; gap: 8px; }
.org-lbl { margin-top: 6px; font-size: 12px; line-height: 16px; font-weight: var(--weight-semibold); color: var(--label-secondary); }
.org-name { padding-right: 12px; cursor: text; }
.org-err { margin: 4px 0 0; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--red-text); }
.org-err[hidden] { display: none; }
.org-hint { margin: 6px 0 0; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }

/* The toast: what just happened, with Undo; or the one calm line while the dashboard may only read */
.org-toast-wrap { position: fixed; left: 0; right: 0; bottom: calc(var(--bar-lift) + var(--bar-h) + 12px); z-index: 45; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
@media (min-width: 768px) { .org-toast-wrap { left: var(--sidebar-w); bottom: 80px; } }
.org-toast { display: flex; align-items: center; gap: 10px; max-width: 520px; min-height: 48px; padding: 6px 4px 6px 16px; border-radius: 14px; pointer-events: auto;
  background: rgb(44 44 46); color: #fff; box-shadow: var(--shadow-3); font-size: var(--text-subhead); }
:root[data-theme="dark"] .org-toast { background: rgb(72 72 74); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .org-toast { background: rgb(72 72 74); } }
.org-toast[hidden] { display: none; }
.ot-ic { flex: none; display: none; color: rgb(120 170 225); }
.org-toast.info .ot-ic { display: grid; }
.ot-t { flex: 1; min-width: 0; padding: 4px 0; }
.ot-undo, .ot-x { flex: none; min-height: 44px; min-width: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: rgb(140 186 236); font: inherit; font-weight: var(--weight-semibold); cursor: pointer; }
.ot-x { display: grid; place-items: center; padding: 0; color: rgb(235 235 245 / 0.7); }
.ot-undo[hidden] { display: none; }
@media (hover: hover) { .ot-undo:hover, .ot-x:hover { background: rgb(255 255 255 / 0.12); } }
.ot-undo:focus-visible, .ot-x:focus-visible { box-shadow: 0 0 0 2px rgb(140 186 236); }
/* (it rises and leaves with Motion: organize.js) */
a.ot-undo { display: inline-flex; align-items: center; text-decoration: none; }

/* Home's list a page at a time (views.js): its row icons point at one sprite on the page (icons.js use()), drawn the
   same as icon(); and at the end, "Show more", a plain link that app.js turns into the next page loading as it comes
   into view, with a small spinner while it does. */
.sprite { display: none; }
.ics { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.more { display: flex; justify-content: center; align-items: center; min-height: 44px; margin-top: 8px; }
.more-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-sm); color: var(--tint-text); font-size: var(--text-subhead); font-weight: var(--weight-semibold); text-decoration: none; }
@media (hover: hover) { .more-link:hover { background: var(--fill-quaternary); } }
.more-wait { display: none; }
.more.loading .more-link, .more.loading .note { display: none; }
.more.loading .more-wait { display: block; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--tint) 25%, transparent); border-top-color: var(--tint); animation: draft-spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .more.loading .more-wait { animation-duration: 2.4s; } }

/* Focused | Other (views.js): the app's segmented control (as Appearance), two links so the address keeps the choice.
   Full width on phones, a compact control beside the list's title on bigger screens. The thumb slides between pages
   with the page's view transition. */
.fo { order: 5; flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; padding: 2px; margin: 6px 0 8px; border-radius: 9px; background: var(--fill-tertiary); }
@media (min-width: 768px) { .fo { flex: 0 1 320px; margin-top: 4px; } }
.fo-s { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 32px; padding: 0 8px; border-radius: 7px;
  color: var(--label); font-size: var(--text-footnote); font-weight: var(--weight-medium); white-space: nowrap; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.fo-s::after { content: ""; position: absolute; inset: -6px 0; }   /* a 44px hit area */
.fo-s[aria-current="page"] { font-weight: var(--weight-semibold); }
.fo-thumb { position: absolute; inset: 0; z-index: -1; border-radius: 7px; background: var(--thumb); box-shadow: 0 3px 8px rgb(0 0 0 / .12), 0 3px 1px rgb(0 0 0 / .04); view-transition-name: fo-thumb; }
.fo-n { color: var(--label-secondary); font-weight: var(--weight-regular); }
.fo-n[hidden] { display: none; }
.fo-s:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.fo-s:active:not([aria-current]) { background: var(--fill-quaternary); }
@media (hover: hover) { .fo-s:not([aria-current]):hover { background: var(--fill-quaternary); } }
::view-transition-group(fo-thumb) { animation-duration: 250ms; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(fo-thumb) { animation: none; } }
.mail.selecting .fo { display: none; }

/* The open email: its labels with Move to Other / Focused beside them; why it's on its side goes in the why box */
.msg-tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: 10px; }
.msg-tags > .tags { margin: 0; }
.fo-move { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; margin: -6px -8px -6px auto; padding: 0 8px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--tint-text); font: inherit; font-size: var(--text-subhead); font-weight: var(--weight-semibold); cursor: pointer; }
.fo-move.busy { opacity: 0.45; pointer-events: none; }
.fo-move:active { background: var(--fill-quaternary); }
@media (hover: hover) { .fo-move:hover { background: var(--fill-quaternary); } }
.why[hidden], .fo-why[hidden] { display: none; }
.why-sum + .why-reason.fo-why, .why-reason + .fo-why { margin-top: 4px; }
.why > .fo-why:first-child { margin-top: 0; }

/* The choice: just this one, always for the sender, always for the domain */
.fo-opt { min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
.fo-opt > .ic { flex: none; color: var(--tint-text); }
.org-fi.fo-opt > span:last-child { display: grid; gap: 2px; white-space: normal; }
.fo-opt-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-opt-s { font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); overflow-wrap: anywhere; }
.fo-opt-s[hidden], .fo-opts li[hidden] { display: none; }
.fo-opt:disabled { cursor: default; }
.fo-opt:disabled .fo-opt-l { color: var(--label-secondary); }
.fo-hint { padding: 0 20px 18px; margin: 0; }

/* Writing Style: Focused & Other, his sender rules */
.fr { gap: 12px; }
.fr-x, .fr-undo { min-height: 44px; padding: 0 8px; margin-right: -8px; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; font-weight: var(--weight-semibold); cursor: pointer; }
.fr-x { color: var(--red-text); }
.fr-undo { color: var(--tint-text); margin-left: auto; }
.fr-gone { margin-bottom: 10px; align-items: center; }
.fr-gone form { margin-left: auto; }
@media (hover: hover) { .fr-x:hover, .fr-undo:hover { background: var(--fill-quaternary); } }

/* ---------- Horizon Core: Directory, profiles, Search, More, and the About card on an open email ----------
   (src/ui/core-views.js). Lists are the app's rows; the profile's facts are one grouped card (label, value, where it
   came from); People | Companies is the same segmented switch as Focused | Other. */
.dir-tabs { order: 0; margin: 4px 0 0; max-width: 360px; }
.dir-tabs .fo-s .ic { color: var(--label-secondary); }
.dir-tabs .fo-s[aria-current="page"] .ic { color: var(--label); }
.dir-chips { margin-top: 14px; }
.dir-chips + .card, .dir-tabs + .card, .dir-chips + .sr-group, .dir-chips + section { margin-top: 14px; }
.dir-tabs + .dir-chips { margin-top: 12px; }
.dir-row .row-sub { min-width: 0; }
.dir-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-org { background: var(--fill-tertiary); color: var(--label-secondary); }
.dir-more { display: flex; justify-content: center; margin: 8px 0 0; }
.btn-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-sm); color: var(--tint-text); font-size: var(--text-subhead); font-weight: var(--weight-semibold); text-decoration: none; }
@media (hover: hover) { .btn-more:hover { background: var(--fill-quaternary); } }
.btn-more:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.profile > .facts { margin-top: 4px; }
.facts { margin: 0; padding: 4px 0; }
.fact { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); gap: 2px 16px; padding: 11px var(--row-x); position: relative; }
.fact + .fact::before { content: ""; position: absolute; top: 0; left: var(--row-x); right: 0; border-top: 0.5px solid var(--separator); }
.fact dt { color: var(--label-secondary); font-size: var(--text-footnote); line-height: var(--lh-footnote); padding-top: 1px; }
.fact dd { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; overflow-wrap: anywhere; }
.fact dd .pill { align-self: center; }
.fact-src { flex-basis: 100%; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.fact-addr { flex-basis: 100%; }
.fact-addr .fact-src { display: inline; flex-basis: auto; }
@media (max-width: 480px) { .fact { grid-template-columns: 1fr; } }

.tl-dir { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-tertiary); color: var(--label-secondary); align-self: flex-start; margin-top: 1px; }
.tl-row .row-sub .ic { vertical-align: -2px; }
.dir-files { margin: 0; padding: 8px; border: 0; display: grid; gap: 8px; }
.sr-group .card { margin-top: 0; }

.more-list .more-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--fill-tertiary); color: var(--label-secondary); }

/* The About card: who sent the open email, from the Directory */
.about { margin-top: 12px; }
.about-row { padding-top: 11px; padding-bottom: 11px; }
.about-k { font-size: var(--text-footnote); line-height: var(--lh-footnote); font-weight: var(--weight-semibold); color: var(--label-secondary); }
.profile > div > section:first-child { margin-top: 0; }
.profile-main, .profile-side { margin-top: 30px; }
@media (min-width: 1180px) {
  .profile { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); grid-template-areas: "facts main" "side main"; grid-template-rows: auto 1fr; column-gap: 28px; align-items: start; }
  .profile-facts { grid-area: facts; }
  .profile-main { grid-area: main; margin-top: 0; }
  .profile-side { grid-area: side; }
  .profile .fact { grid-template-columns: 104px minmax(0, 1fr); }
}
.fact dd > a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }   /* a 44px target inside a tight row */

/* ---------- Two accounts, like Outlook with two mailboxes: Horizon (his Outlook) and Personal (his Yahoo; the owner only)
   Never mixed: each has its own section in the sidebar (its address is the title; it folds away), the account he's
   in is named at the top of the list, and Reports and the Directory have a Horizon | Personal control. Personal's
   marks are system indigo (text a shade deeper for 4.5:1); Horizon's are Horizon blue. */
:root { --personal: rgb(97 85 245); --personal-text: rgb(76 60 200); }
:root[data-theme="dark"] { --personal: rgb(109 124 255); --personal-text: rgb(170 172 255); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --personal: rgb(109 124 255); --personal-text: rgb(170 172 255); } }
.p-personal { color: var(--personal-text); background: color-mix(in srgb, var(--personal) 14%, transparent); }
.fmeta .p-personal { height: 20px; margin-right: 4px; vertical-align: 1px; }
.head-sub .p-personal { vertical-align: 1px; }

/* The account at the top of the list */
.mbx-line { order: -1; flex-basis: 100%; display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0 0 2px; font-size: var(--text-footnote); line-height: var(--lh-footnote); color: var(--label-secondary); }
.mbx-line .ic { flex: none; color: var(--tint); }
.mbx-line.mbx-personal .ic { color: var(--personal); }
.mbx-k { flex: none; font-weight: var(--weight-semibold); color: var(--label); }
.mbx-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Horizon | Personal */
.scope-sw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 2px; border-radius: 9px; background: var(--fill-tertiary); }
.sc-s { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-width: 0; height: 32px; padding: 0 8px;
  border: 0; border-radius: 7px; background: none; color: var(--label); font: inherit; font-size: var(--text-subhead); letter-spacing: var(--tr-subhead); cursor: pointer; }
.sc-s::after { content: ""; position: absolute; inset: -6px 0; }   /* a 44px hit area */
.sc-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-s[aria-pressed="true"] { font-weight: var(--weight-semibold); cursor: default; }
.sc-thumb { position: absolute; inset: 0; z-index: -1; border-radius: 7px; background: var(--thumb); box-shadow: 0 3px 8px rgb(0 0 0 / .12), 0 3px 1px rgb(0 0 0 / .04); }   /* the page cross-fades (a whole new account), no sliding thumb over its label */
.sc-s:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sc-s:active:not([aria-pressed="true"]) { background: var(--fill-quaternary); }
@media (hover: hover) { .sc-s:not([aria-pressed="true"]):hover { background: var(--fill-quaternary); } }
.scope-head, .scope-head-phone { margin: 12px 0 2px; max-width: 280px; }
@media (min-width: 768px) { .scope-head-phone { display: none; } }
main.detail-open .scope-head-phone { display: none; }
.scope-note { margin-top: 12px; max-width: 280px; }

/* Each account's section in the sidebar */
.side-org.two-mbx { gap: 2px; }
.mbx { margin-top: 0; }   /* a section, but not a page section (those have 30px above) */
.mbx + .mbx { margin-top: 12px; padding-top: 10px; border-top: 0.5px solid var(--separator); }
.mbx-b { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.mbx.is-closed > .mbx-b { display: none; }
.mbx-h { position: relative; margin-top: 0; padding: 0 2px 0 var(--gut); min-height: 44px; }
@media (min-width: 1180px) { .mbx-h { min-height: 34px; } }
.mbx-tog { position: absolute; top: 0; bottom: 0; left: 0; width: var(--gut); display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--label-secondary); cursor: pointer; }
.mbx-tog .ic { transition: transform 200ms var(--ease-out); }
.mbx.is-closed .mbx-tog .ic { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .mbx-tog .ic { transition: none; } }
.mbx-tog:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--tint); }
.mbx-a { flex: 1; min-width: 0; display: grid; align-content: center; min-height: 44px; padding: 2px 6px; margin-left: -6px; border-radius: 9px; color: var(--label); }
@media (min-width: 1180px) { .mbx-a { min-height: 34px; } }
.mbx-a .mbx-k { font-size: 12px; line-height: 16px; color: var(--label-secondary); }
.mbx-a .mbx-n { font-size: var(--text-footnote); line-height: var(--lh-footnote); font-weight: var(--weight-semibold); }
.mbx-a[aria-current="true"] .mbx-k { color: var(--tint-text); }
.mbx-personal .mbx-a[aria-current="true"] .mbx-k { color: var(--personal-text); }
@media (hover: hover) { .mbx-a:hover { background: var(--fill-quaternary); } }
.mbx-personal .fi { color: var(--personal); }

/* The phone menu: each account's title, then its Starred and folders */
.vm-acct { padding: 2px 8px 0; }
.vm-mbx-a { display: grid; align-content: center; min-height: 44px; padding: 0 8px; border-radius: 8px; color: var(--label); }
.vm-mbx-k { font-size: 12px; line-height: 16px; font-weight: var(--weight-semibold); color: var(--label-secondary); }
.vm-mbx-a[aria-current="true"] .vm-mbx-k { color: var(--tint-text); }
.vm-acct-personal .vm-mbx-a[aria-current="true"] .vm-mbx-k { color: var(--personal-text); }
.vm-mbx-n { font-size: var(--text-footnote); line-height: var(--lh-footnote); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-tree[data-acct="personal"] .fi { color: var(--personal); }

/* Each set's reports under its own heading */
.set-h { display: flex; align-items: center; gap: 8px; margin: 32px 0 4px; font-size: var(--text-title3); line-height: var(--lh-title3); letter-spacing: var(--tr-title3); font-weight: var(--weight-bold); }

/* ---------- Each person's own sidebar (src/nav.js, public/nav.js) ----------
   Greg and the super admin only, each their own; the dashboard's alone. Two Edits, one at a time:
   - Edit at the top of the sidebar (Edit Sections on a phone, a full-screen sheet there): the sections' order.
   - The small Edit on each account's row (sidebar and phone menu): that account's folders.
   Editing puts a handle (three lines, like iOS) at the end of each row being arranged, 44px wide. */
.nav-edit, .mbx-edit { position: relative; flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-full); cursor: pointer;
  background: var(--fill-tertiary); color: var(--tint-text); font: inherit; font-size: var(--text-footnote); line-height: 1; font-weight: var(--weight-semibold); }
.nav-edit { margin-right: -4px; }
.nav-edit::after { content: ""; position: absolute; inset: -7px -2px; }   /* 44px to tap */
.nav-edit[aria-pressed="true"], .mbx-edit[aria-pressed="true"] { background: var(--tint); color: var(--on-tint); }
@media (hover: hover) { :is(.nav-edit, .mbx-edit):not([aria-pressed="true"]):hover { background: var(--fill-secondary); } }
/* An account's row: its name and address, with Edit (and New Folder for Outlook) on the name's line, so the address
   below it keeps the whole width. While editing: Reset and Done there, and a line under it that says what it does. */
.side-fh.mbx-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.mbx-h > .mbx-a { grid-area: 1 / 1 / 2 / 3; }
.mbx-h .mbx-k { display: flex; align-items: center; min-height: 30px; }
.mbx-tools { grid-area: 1 / 2; z-index: 1; display: flex; align-items: center; gap: 2px; min-height: 30px; margin-top: 2px; }
.mbx-tools .side-add { position: relative; width: 30px; height: 30px; }
.mbx-tools .side-add::after { content: ""; position: absolute; inset: -7px; }   /* 44px to tap */
.mbx-edit { height: 26px; padding: 0 10px; }
.mbx-edit::after { content: ""; position: absolute; inset: -9px -2px; }   /* 44px to tap */
.mbx-reset { position: relative; flex: none; height: 26px; padding: 0 8px; border: 0; border-radius: var(--radius-full); background: none; cursor: pointer;
  color: var(--red-text); font: inherit; font-size: var(--text-footnote); line-height: 1; font-weight: var(--weight-semibold); }
.mbx-reset[hidden] { display: none; }
.mbx-reset::after { content: ""; position: absolute; inset: -9px -2px; }   /* 44px to tap */
@media (hover: hover) { .mbx-reset:hover { background: var(--fill-quaternary); } }
.mbx-tip { margin: -2px 0 6px; padding: 0 0 0 var(--gut); font-size: 12px; line-height: 16px; color: var(--label-secondary); }
.mbx-tip[hidden] { display: none; }
.mbx-tip .nav-tip-ic { display: inline-grid; vertical-align: -3px; }
.nv-editing .side-add, .nv-editing .fn, .nv-editing .vm-c { display: none; }
/* The phone menu: each account's row with its Edit; the line under it while editing */
@media (max-width: 767px) {
  .vm-acct { display: flex; align-items: center; gap: 8px; padding-right: 12px; }
  .vm-acct .vm-mbx-a { flex: 1; min-width: 0; }
  .vm-acct .mbx-tools { gap: 6px; }
  .vm-tip { padding: 0; }
  .vm-tip .mbx-tip { margin: 0; padding: 0 16px 8px; font-size: var(--text-footnote); line-height: var(--lh-footnote); }
}

/* The sections' Edit: its tip, Reset Section Order at the foot */
.nav-tip, .nav-foot, .nav-sheet-h { display: none; }
.nav-tip { margin: -4px 8px 12px; font-size: 12px; line-height: 16px; color: var(--label-secondary); }
.nav-tip-ic { display: inline-grid; vertical-align: -3px; }
.nav-foot { flex: none; margin: 0 -12px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 0.5px solid var(--separator); background: var(--bg-grouped-secondary); }
.nav-reset { width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--fill-tertiary); color: var(--red-text); font: inherit; font-size: var(--text-subhead); font-weight: var(--weight-semibold); }
@media (hover: hover) { .nav-reset:hover { background: var(--fill-secondary); } }
.sidebar.editing .nav-tip, .sidebar.editing .nav-foot { display: block; }
.sidebar.editing .side-foot, .sidebar.editing .side-secs .count { display: none; }

/* The handle: at the end of each row being arranged, 44px wide */
.side-item, .sf-r, .mbx-h { position: relative; }
.nv-h { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px;
  background: none; color: var(--label-secondary); cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.nv-h:focus-visible { box-shadow: inset 0 0 0 2px var(--tint); }
.nv-grip { width: 18px; height: 18px; background: currentColor; -webkit-mask: 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.2' stroke-linecap='round'%3E%3Cpath d='M4 8h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 16h16'/%3E%3C/svg%3E") center / 18px 18px no-repeat; mask: 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.2' stroke-linecap='round'%3E%3Cpath d='M4 8h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 16h16'/%3E%3C/svg%3E") center / 18px 18px no-repeat; }
@media (forced-colors: active) { .nv-grip { forced-color-adjust: none; background: CanvasText; } }
@media (hover: hover) { .nv-h:hover { color: var(--label); background: var(--fill-quaternary); } }
.sidebar.editing .side-secs .side-row, .nv-editing .side-f { padding-right: 44px; }
.nv-editing .vm-f { padding-right: 52px; }
/* With a mouse, a row being arranged drags too */
@media (hover: hover) { .sidebar.editing .side-secs .side-row, .nv-editing :is(.side-f, .vm-f) { cursor: grab; } }
/* Being dragged: lifted above the rest; its neighbours spring aside (Motion) */
.nv-drag, .nv-drag * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.nv-dragging { position: relative; z-index: 6; border-radius: 10px; background: var(--bg-grouped-secondary); box-shadow: 0 0 0 0.5px var(--separator), 0 8px 24px rgb(0 0 0 / 0.16); }
:root[data-theme="dark"] .nv-dragging { background: var(--bg-grouped-tertiary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nv-dragging { background: var(--bg-grouped-tertiary); } }
:root[data-theme="dark"] .vm-list .nv-dragging { background: var(--fill-secondary); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vm-list .nv-dragging { background: var(--fill-secondary); } }
.nv-drag .sf, .nv-drag .side-item { content-visibility: visible; will-change: transform; }

/* The foot of each page's way in (phones) */
.foot-edit { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: -4px 0; padding: 0; border: 0; border-top: 0.5px solid var(--separator); background: none;
  color: var(--tint-text); font: inherit; font-weight: var(--weight-semibold); text-align: left; cursor: pointer; }
.foot-edit > span { flex: 1; }
.foot-edit > .ic:last-child { color: var(--label-tertiary); }
.foot-card:has(.foot-edit) { padding-bottom: 8px; }

/* On a phone: the sections as a full-screen sheet over the page (the folders have their own Edit in the menu) */
@media (max-width: 767px) {
  :root.nav-editing, :root.nav-editing body { overflow: hidden; }
  .sidebar.editing { display: flex; position: fixed; inset: 0; z-index: 70; width: 100%; height: 100dvh; padding: 0 var(--gutter); border: 0; background: var(--bg-grouped); }
  .sidebar.editing .brand, .sidebar.editing .nav-foot, .sidebar.editing .side-org { display: none; }
  .sidebar.editing .nav-sheet-h { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; flex: none; min-height: 52px; margin: 0 calc(-1 * var(--gutter)) 8px;
    padding: env(safe-area-inset-top) 8px 0; border-bottom: 0.5px solid var(--separator); background: var(--bg-grouped-secondary); }
  .nav-sheet-t { margin: 0; font-size: var(--text-headline); line-height: var(--lh-headline); font-weight: var(--weight-semibold); text-align: center; }
  .sidebar.editing .nav-sheet-h [data-nav="reset"] { color: var(--red-text); }
  .sidebar.editing .nav-tip { margin: 6px 4px 12px; font-size: var(--text-footnote); line-height: var(--lh-footnote); }
  .sidebar.editing .side-nav { margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) calc(24px + env(safe-area-inset-bottom)); }
  .sidebar.editing .side-secs { padding: 4px; border-radius: var(--radius-md); background: var(--bg-grouped-secondary); }
  :root.nav-editing .tabbar-wrap, :root.nav-editing .selbar-wrap { display: none; }
}

/* Each account's Inbox dropdown (his own folders; closed until opened, the chevron turns like any folder's, and not at
   all with Reduce Motion) */
.sf-drop > .sf-kids { padding-bottom: 4px; }

/* ---------- Opening and closing an email (theme.js names the move; Reduce Motion keeps the cross-fade) ----------
   Phones and tablets: the email slides in from the right over the list, Back slides the list in from the left (iOS's
   push), on a spring (Motion's, 0.32 s, no bounce). The tab bar, the title bar and the sidebar stay put. Wide screens:
   the email beside the list rises into place. */
:root { --spring-page: linear(0 0%, 0.055 4.2%, 0.1733 8.3%, 0.3101 12.5%, 0.4421 16.7%, 0.5591 20.8%, 0.6574 25%, 0.7374 29.2%, 0.8008 33.3%, 0.8503 37.5%, 0.8883 41.7%, 0.9171 45.8%, 0.9389 50%, 0.9551 54.2%, 0.9672 58.3%, 0.9761 62.5%, 0.9826 66.7%, 0.9874 70.8%, 0.9909 75%, 0.9935 79.2%, 0.9953 83.3%, 0.9966 87.5%, 0.9976 91.7%, 0.9983 95.8%, 1 100%); --spring-page-duration: 550ms; }
/* (The name goes on the bar, not its wrapper: a named wrapper would cut the bar's glass off from the page behind it.) */
.tabbar { view-transition-name: tabbar; }
::view-transition-group(tabbar) { animation: none; z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
  @media (max-width: 1179px) {
    :root:active-view-transition-type(email-open)::view-transition-old(root) { animation: vt-push-old var(--spring-page-duration) var(--spring-page) both; }
    :root:active-view-transition-type(email-open)::view-transition-new(root) { animation: vt-push-new var(--spring-page-duration) var(--spring-page) both; }
    :root:active-view-transition-type(email-close)::view-transition-old(root) { animation: vt-pop-old var(--spring-page-duration) var(--spring-page) both; z-index: 1; }
    :root:active-view-transition-type(email-close)::view-transition-new(root) { animation: vt-pop-new var(--spring-page-duration) var(--spring-page) both; }
  }
  @media (min-width: 1180px) {
    .split .detail { view-transition-name: detail; }
    ::view-transition-group(detail) { animation: none; }
    :root:is(:active-view-transition-type(email-open), :active-view-transition-type(email-switch))::view-transition-old(detail) { animation: vt-fade-out 120ms ease both; }
    :root:is(:active-view-transition-type(email-open), :active-view-transition-type(email-switch))::view-transition-new(detail) { animation: vt-detail-in 360ms var(--spring-page) both; }
  }
}
@keyframes vt-detail-in { from { opacity: 0; translate: 0 10px; } }

/* ---------- The phone keyboard ----------
   A text field in focus on a phone: the tab bar and the selection bar step aside (on Android the page shrinks above the
   keyboard and they would sit on top of what he's typing; on iPhone they'd hover over the keyboard's edge). A sheet
   with a text field (New Folder) sits just above the iPhone keyboard (--kb, app.js). */
@media (max-width: 767px) {
  body:has(:is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select):focus) :is(.tabbar-wrap, .selbar-wrap),
  :root.kb-open :is(.tabbar-wrap, .selbar-wrap) { display: none; }
}

/* To check (Reports, Greg and the super admin): a report from a sender not known for it. The email opens from the
   text; Confirm and Reject sit at the end of the row, and drop under it on narrow screens. */
.ck { flex-wrap: wrap; gap: 8px 12px; }
.ck-main { flex: 1 1 240px; min-width: 0; display: grid; gap: 2px; color: inherit; text-decoration: none; }
.ck-p { font-weight: var(--weight-regular); color: var(--label-secondary); }
.ck-act { display: flex; gap: 8px; margin-left: auto; }

/* Going to the other account is a small form (POST /scope, L17), never a link: its button looks and sits exactly like
   the link it replaced (the form itself takes no room). */
.acct-f { display: contents; }
:where(.acct-f) > button { font: inherit; letter-spacing: inherit; word-spacing: inherit; text-transform: inherit; text-align: start; background: none; border: 0; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
:where(.acct-f) > :is(.side-f, .vm-f) { width: 100%; }
.mbx-h > .acct-f > .mbx-a { grid-area: 1 / 1 / 2 / 3; }