:root{
  --ink:#16182B;
  --ink-soft:#5B5F78;
  /* The default button is a filled box, and it needs its own tokens because it
     cannot borrow either of the obvious ones: --ink is the body text colour and
     flips to near-white in dark mode (a near-white button with white text), and
     leaving --btn-bg fixed at this navy — which is what it did until dark mode's
     --paper turned out to be #191B2C, the same navy — made the button disappear
     into the panel it sits on (about 1.05:1; "Save my topics" read as plain
     text). So the pair flips together in the dark block below: a light
     periwinkle box with dark text, which clears 3:1 against the panel and 4.5:1
     for its own label. Buttons with a more specific rule of their own (.ghost,
     .tabs button, .am-row, the day picker) are untouched — they set both their
     background and their colour. .danger sets only a background, so it names its
     white text explicitly in app/dashboard.py rather than inheriting --btn-fg. */
  --btn-bg:#16182B;
  --btn-fg:#fff;
  --btn-hover:#4E58A6;
  /* The ask-toast is a dark card in both themes, so it cannot follow --btn-bg
     any more — it keeps the navy that token used to be. */
  --card-dark:#16182B;
  --periwinkle:#6C77C9;
  --periwinkle-deep:#4E58A6;
  /* --periwinkle-deep does double duty: it's the masthead's own background AND,
     everywhere else, the accent color for links/labels/badges — text that reads
     fine in dark blue on this light paper. Dark mode needs the masthead to stay
     a dark, saturated tint, but that same dark tint as *text* on a dark page is
     unreadable. --accent is the one that varies with theme; --periwinkle-deep
     stays fixed for the masthead and other surfaces that want to stay dark. */
  --accent:#4E58A6;
  --wash:#EDEFFA;
  --paper:#FCFCFE;
  --rule:#D5D8EC;
  --highlight:#F7D94C;
  --highlight-wash:#FFFAE3;
  /* The ground the cells float on. It is not --paper: the whole point is that the
     cells are lighter than what surrounds them, which is what lets the grid lose
     its border lines without losing its structure. */
  --canvas:#F1F2F9;
  --gutter:4px;
  /* matches the masthead's page padding, so the matrix's right margin lines up
     with everything else on the page rather than being its own number */
  --edge:18px;
  --edge-b:10px;
  --cell-w:230px;
  /* Today is the one column re-read every day; the rest are for looking things up.
     A 1.5x column says that without a label. */
  --cell-w-today:calc(230px * 1.5);
  --rail-w:56px;
  --f-cond:"Avenir Next Condensed","Avenir Next",-apple-system,sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --f-data:ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
.account-delete-dialog{width:min(430px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:24px;border:1px solid var(--rule);border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:0 20px 60px #0004}
.account-delete-dialog::backdrop{background:#10142699}
.account-delete-dialog h2{margin:0 0 14px;font-size:18px}
.account-delete-dialog p{line-height:1.55;color:var(--ink-soft)}
.account-delete-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:22px}
.account-delete-actions .danger{background:#b32635;color:#fff}
html{height:100%}
body{
  margin:0;padding:0;
  height:100dvh;display:flex;flex-direction:column;overflow:hidden;
  background:var(--periwinkle-deep);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:13px;
  -webkit-text-size-adjust:100%;
}

/* ---------- masthead ---------- */
/* Desktop and mobile deliberately share the same navigation geometry: tabs at the
   left edge and the account at the right edge. The matrix below may show a week on
   desktop and one selected day on mobile, but the controls never move when the
   viewport changes. */
.masthead{
  flex:none;height:auto;
  background:var(--periwinkle-deep);
  padding:9px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  position:relative;
  border-bottom:1px solid rgba(255,255,255,.18);
  /* A quick double-tap on a fixed bar reads as the browser's built-in
     double-tap-to-zoom gesture on mobile; this is the one place that
     matters, since the masthead (and, on mobile, the footer bar below)
     is what a reader's thumb actually lands on repeatedly. Doesn't touch
     the viewport meta, so pinch-zoom elsewhere on the page still works. */
  touch-action:manipulation;
}
/* The wordmark/date remain in the DOM because the date is also used by the page
   script, but the compact mobile header is now the header at every width. */
.mast-side{flex:none;display:flex;align-items:baseline;gap:12px;min-width:0}
.mast-side:not(.mast-right){display:none}
.mast-right{
  position:static;
  width:auto;margin-left:auto;justify-content:flex-end;align-items:center;gap:10px;
}
.masthead{flex-wrap:wrap}
.lang-toggle{font-family:var(--f-data);letter-spacing:.06em;text-transform:none}
.account{position:relative;display:flex;align-items:center;font-family:var(--f-data);font-size:11px}
/* GIS is a network-loaded iframe. Reserve its final footprint before the script
   arrives so the control never jumps, and do not fade the iframe in: the fade made
   every ordinary refresh look like the button was flashing. */
#gsi-button{width:96px;height:40px;display:flex;justify-content:flex-end;overflow:hidden}
.avatar{
  width:30px;height:30px;flex:none;padding:0;border-radius:50%;overflow:hidden;
  background:#8E97D8;color:#fff;font-family:var(--f-cond);font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center;letter-spacing:.02em;
}
.avatar.admin{background:var(--highlight);color:var(--ink)}
.avatar:hover{background:#A2AADF}
.avatar.admin:hover{background:#FBE58A}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.account-menu{
  /* anchored to the avatar, not to a guessed pixel offset: the masthead is a
     different height on mobile, and 38px put the menu inside the dark bar there */
  position:absolute;top:calc(100% + 14px);right:0;z-index:60;width:220px;
  background:var(--paper);color:var(--ink);padding:6px;
  box-shadow:0 8px 24px rgba(22,24,43,.18),0 0 0 1px var(--rule);
}
.account-menu[hidden]{display:none}
.am-who{display:flex;flex-direction:column;gap:3px;padding:8px 9px 10px;border-bottom:1px solid var(--rule);margin-bottom:4px}
.am-who b{font-family:var(--f-body);font-size:12px;font-weight:600;overflow-wrap:anywhere}
.am-who span{font-size:10px;color:var(--ink-soft)}
.am-row{
  display:flex;align-items:center;gap:8px;width:100%;
  background:transparent;color:var(--ink);text-transform:none;
  font-family:var(--f-body);font-size:12px;letter-spacing:0;padding:8px 9px;text-align:left;
}
.am-row:hover{background:var(--wash)}
.badge{background:var(--wash);color:var(--accent);padding:2px 7px;font-family:var(--f-cond);font-size:10px;letter-spacing:.05em;text-transform:uppercase;flex:none}
.badge.admin{background:var(--highlight);color:var(--ink)}
/* the ask box is the one thing an anonymous reader cannot do — say so instead of
   showing a textarea whose save would 401 */
.ask-locked{margin-top:8px;font-family:var(--f-cond);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.ask-locked button{font-size:10px;padding:4px 8px;margin-left:6px}
.wordmark{
  font-family:var(--f-cond);
  font-size:23px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;
}
.masthead .date{font-family:var(--f-data);font-size:12px;color:rgba(255,255,255,.72);letter-spacing:.04em}

/* Lives in the bottom bar, on paper — it was on the dark masthead when it was
   written, which is why the colour used to be a white it can no longer be. */
.legend{display:flex;flex:none;gap:14px;align-items:center;font-family:var(--f-data);font-size:10.5px;color:var(--ink-soft);letter-spacing:.03em}
.legend b{font-weight:400;display:flex;align-items:center;gap:5px;white-space:nowrap}

/* density glyphs — a traffic light, not a shape to learn: filled and largest
   means urgent, filled and smaller means notable, an outline only (no fill)
   means "on file, no rush". Color plus size carries the whole hierarchy. */
/* Color-coding (red/amber) turned out to read as arbitrary rather than as a
   priority order — a reader couldn't tell which of two similar warm colors
   outranked the other without the legend. A star for "must read" and a plain
   dot for everything else needs no legend: it's the one thing a star already
   means everywhere else. */
.g{display:inline-block;border-radius:50%;flex:none;box-sizing:border-box;background:var(--ink-soft)}
.g-must{
  width:auto;height:auto;background:none;border-radius:0;
  font-size:11px;line-height:1;color:var(--ink);
}
.g-must::before{content:"★"}
.g-good,.g-file{width:6px;height:6px}
.legend .g-must{color:#fff}

/* ---------- pending questions tray ---------- */
.tray{
  background:var(--highlight-wash);
  border-bottom:2px solid var(--highlight);
  padding:10px 18px;display:none;
}
.tray.on{display:block}
.tray-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tray-title{font-family:var(--f-cond);font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.tray-list{margin:8px 0 0;padding:0;list-style:none;font-size:12px;max-height:130px;overflow:auto}
.tray-list li{padding:3px 0;border-top:1px solid rgba(0,0,0,.08)}
.tray-list code{font-family:var(--f-data);font-size:10.5px;color:var(--accent);margin-right:6px}
button{
  font-family:var(--f-cond);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  background:var(--btn-bg);color:var(--btn-fg);border:0;padding:6px 12px;cursor:pointer;
}
/* not var(--periwinkle-deep): that token is a dark *surface* colour in dark mode,
   so hovering used to take the button back to invisible-against-the-panel */
button:hover{background:var(--btn-hover)}
button.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
button.ghost:hover{background:var(--ink);color:#fff}
/* masthead sits on deep periwinkle — ghost buttons need the inverse treatment */
.masthead button.ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.masthead button.ghost:hover{background:#fff;color:var(--accent);border-color:#fff}
.masthead a.ghost{display:inline-block;color:#fff;border:1px solid rgba(255,255,255,.55);padding:6px 9px;font-size:11px;text-decoration:none}
.masthead a.ghost:hover{background:#fff;color:var(--accent)}
:focus-visible{outline:2px solid var(--periwinkle-deep);outline-offset:2px}
.masthead :focus-visible{outline-color:#fff}

/* ---------- tray ---------- */
.tray{flex:none}

/* ---------- grid ---------- */
/* The clearance is deliberately right-and-bottom only, not a symmetric inset. The
   left edge is anchored by the sticky rail, which has to stay flush with the
   scrollport or it stops looking attached to the frame; the right and bottom edges
   are where the scrollbars live. Without it today's column — the one column a
   reader opens the page for — ends flush against the vertical scrollbar, and on
   platforms with overlay scrollbars the bar is drawn straight over its content. */
.scroll{
  flex:1;min-height:0;
  overflow:auto;
  padding:0 var(--edge) var(--edge-b) 0;
  background:var(--canvas);border-top:1px solid var(--rule);
}
table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%}

/* 13 rows x 7 columns of 1px rules is a lot of line for a page whose content is
   already dense. The separation is the canvas showing through instead: same grid,
   none of the mesh. The borders stay borders rather than becoming border-spacing so
   the sticky header and sticky rail keep covering what scrolls under them. */
#grid th,#grid td{vertical-align:top;border-right:var(--gutter) solid var(--canvas);border-bottom:var(--gutter) solid var(--canvas)}

thead th{
  position:sticky;top:0;z-index:20;
  background:var(--wash);
  font-family:var(--f-cond);font-weight:600;
  letter-spacing:.05em;
  padding:7px 10px;text-align:left;
  width:var(--cell-w);min-width:var(--cell-w);
  font-size:13px;
}
thead th .dow{font-family:var(--f-data);font-weight:400;font-size:10px;color:var(--ink-soft);letter-spacing:.06em;display:block;margin-top:1px}
/* the emphasis line is drawn inside the box rather than as the bottom border: the
   border is the 4px gutter every other column has, and replacing it here would set
   today's cells 2px higher than the rest of their own row */
thead th.today{background:var(--highlight);box-shadow:inset 0 -3px 0 var(--ink);width:var(--cell-w-today);min-width:var(--cell-w-today)}
thead th.today .dow{color:var(--ink)}
thead th.rail{left:0;z-index:30;width:var(--rail-w);min-width:var(--rail-w);background:var(--wash)}

/* group bands */
/* --periwinkle-deep, not --periwinkle: white on the lighter blue was 4.1:1 in light
   mode and 3.6:1 in dark, both under AA for an 11px label. The deep tone carries
   white at 6.4:1 and 11.6:1 respectively, and it matches the masthead — the band
   and the masthead are the same kind of thing, a label the page owns. */
tr.band td{
  background:var(--periwinkle-deep);color:#fff;
  font-family:var(--f-cond);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  padding:4px 10px;position:sticky;left:0;
}

th.rail{
  position:sticky;left:0;z-index:10;
  background:var(--wash);
  width:var(--rail-w);min-width:var(--rail-w);max-width:var(--rail-w);
  overflow:hidden;
  padding:8px 6px;text-align:center;
  font-family:var(--f-cond);font-size:14px;font-weight:600;letter-spacing:.01em;
}
th.rail.lab{position:sticky;vertical-align:top;height:154px;padding:12px 4px}
/* The name was an absolutely-centred rotate(-90deg) span, which left no room for
   anything else in the rail. It is now a normal flow child in a column, so the
   company's own mark can sit above it — and vertical-rl reads top-to-bottom, which
   matches the direction the eye already travels down the rail. */
th.rail.lab .rail-in{display:flex;flex-direction:column;align-items:center;gap:9px;height:100%}
th.rail.lab .rail-name{
  writing-mode:vertical-rl;text-orientation:mixed;
  white-space:nowrap;letter-spacing:.04em;font-size:12.5px;line-height:1;
}
/* One slot, two occupants: the fetched mark, or the two-letter fallback for a company
   whose favicon we could not get. Identical box either way, so the rail keeps its
   rhythm whichever renders. */
.rail-logo,.rail-mark{
  width:30px;height:30px;flex:none;border-radius:8px;
  background:#fff;box-shadow:inset 0 0 0 1px var(--rule);
}
.rail-logo{object-fit:contain;padding:3px}
.rail-mark{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-cond);font-size:11px;font-weight:600;color:var(--ink-soft);letter-spacing:.02em;
}
th.rail.topic{font-size:10.5px;line-height:1.25;color:var(--accent);width:var(--rail-w);min-width:var(--rail-w);max-width:var(--rail-w)}
th.rail.topic .rail-name{display:block;overflow-wrap:anywhere}

td.cell{padding:11px 12px 13px;width:var(--cell-w);min-width:var(--cell-w);background:#FFFFFF}
td.cell.today{background:#FFFDF2;width:var(--cell-w-today);min-width:var(--cell-w-today)}
td.cell.future{background:repeating-linear-gradient(135deg,var(--paper),var(--paper) 7px,#F6F7FC 7px,#F6F7FC 14px)}

.marks{display:flex;gap:3px;align-items:center;min-height:9px;margin-bottom:8px}
.count{font-family:var(--f-data);font-size:9.5px;color:var(--ink-soft);margin-left:3px;letter-spacing:.02em}

.item{margin:0 0 15px;line-height:1.55;overflow-wrap:anywhere}
.item:last-of-type{margin-bottom:8px}
/* the item's own tier glyph reuses the exact .g classes from the legend/density-marks
   row instead of a separate hand-tuned dot, so the three places agree pixel-for-pixel */
.item .ihead{display:flex;align-items:flex-start;gap:6px}
.item .ihead .g{flex:none;margin-top:6px}
.item .t{flex:1;min-width:0;font-weight:600;font-size:12.5px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;max-height:4.35em}
/* A border-bottom used to draw this, since text-decoration used to be
   unstylable — but a border on a wrapped inline element is sliced per line
   box by the renderer, and with -webkit-line-clamp forcing a flex-based
   layout on the parent, that per-line slicing came out inconsistent for
   CJK text (character-wrapped, no spaces) specifically: the underline would
   just be missing on some wrapped lines. text-decoration is a real per-line
   text decoration, not a fragmented border, so it doesn't have this problem. */
.item .t a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-decoration-thickness:1px;text-underline-offset:3px}
.item .t a:hover{text-decoration-color:var(--ink)}
.item .w{font-size:11.5px;line-height:1.58;display:block;margin:7px 0 0 14px;padding:3px 0 3px 8px;border-left:2px solid var(--highlight)}
/* the dimension reads as a label on the reason, not as part of the sentence */
.item .w b{font-weight:600}
.item .w b.wk{
  font-family:var(--f-cond);font-size:10px;font-weight:600;letter-spacing:.08em;
  background:var(--highlight-wash);border:1px solid var(--highlight);
  padding:1px 5px;margin-right:5px;white-space:nowrap;
}
.item .w b.wk-risk{background:#FBE9EA;border-color:#C97B84}
.item .w b.wk-plain{background:transparent;border:0;padding:0;letter-spacing:.04em}
.item .src{font-family:var(--f-data);font-size:9.5px;color:var(--ink-soft);margin:6px 0 0 14px}
.item .src a{color:var(--accent);display:block;padding:2px 0}

/* answer block — the point of the whole thing */
.ans{
  margin:0 0 14px;padding:10px 11px;
  background:var(--wash);border-left:3px solid var(--periwinkle-deep);
}
.ans .from{font-family:var(--f-data);font-size:9.5px;color:var(--accent);letter-spacing:.03em;display:block;margin-bottom:3px}
.ans .q{font-weight:600;font-size:12px;line-height:1.5;display:block;margin-bottom:7px}
.ans .a{font-size:11.5px;line-height:1.62;color:var(--ink)}
.ans .doc{font-family:var(--f-data);font-size:9.5px;margin-top:5px;display:block}
.ans .doc a{color:var(--accent)}
/* a correction isn't an answer — mark it as resolved-and-fixed, not periwinkle Q&A */
.ans.fix{border-left-color:var(--highlight);background:var(--highlight-wash)}
.ans.fix .from{color:#8a6d00}

/* ask affordance */
.ask{margin-top:6px}
.ask summary{
  font-family:var(--f-cond);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);cursor:pointer;list-style:none;padding:2px 0;
}
.ask summary::-webkit-details-marker{display:none}
/* These three labels are pseudo-element content because the open/written states are
   pure CSS. applyLang() rewrites the custom properties so they follow the language
   toggle without turning the state machine into JavaScript. */
.ask summary:before{content:var(--l-ask-open,"＋ 提问")}
.ask[open] summary:before{content:var(--l-ask-close,"− 收起")}
.ask.has summary{color:var(--accent);font-weight:600}
.ask.has summary:before{content:var(--l-ask-written,"✎ 已写")}
textarea{
  width:100%;min-height:52px;margin-top:4px;padding:5px 6px;
  font-family:var(--f-body);font-size:12px;line-height:1.45;color:var(--ink);
  border:1px solid var(--rule);background:#fff;resize:vertical;
}
textarea:focus{border-color:var(--accent);outline:none}
/* min-height, not height: the fixed line kept the box from jumping as the transient
   "saving…"/"submitted" states come and go, but it also clipped the one message that
   is more than a few words — the per-run cap, which has to be readable to be acted
   on. Reserving the line still stops the jump; only the long case grows. */
.saved{font-family:var(--f-data);font-size:9.5px;line-height:1.45;color:var(--accent);margin-top:2px;min-height:11px}

/* --ink-soft, not a hardcoded pale grey: #B9BCD2 was 1.9:1 on white — the marker
   for "nothing here today" was itself unreadable — and being fixed it also never
   dimmed for dark mode, where it came out brighter than the secondary text around
   it. The token is the one that already means "recessive but legible", both ways. */
.empty{color:var(--ink-soft);font-family:var(--f-data);font-size:10.5px;letter-spacing:.04em}

/* ---------- tabs ---------- */
/* A segmented control rather than filing-cabinet tabs: the tabs no longer touch the
   panel they open, so the old flush-bottom treatment was drawing a join that isn't
   there. Flush left at every width — they are the first thing in the bar, not a
   centred ornament between two counterweights. */
.tabs{
  flex:none;display:flex;
  background:rgba(0,0,0,.18);padding:2px;border-radius:8px;gap:2px;
  align-self:center;max-width:max-content;
}
.tabs button,.tabs .site-tab{
  background:transparent;color:rgba(255,255,255,.78);
  border:0;border-radius:7px;padding:6px 9px;font-size:10px;white-space:nowrap;
}
.tabs button:hover,.tabs .site-tab:hover{background:rgba(255,255,255,.14);color:#fff}
.tabs button[aria-selected="true"],.tabs .site-tab[aria-current="page"]{background:#fff;color:var(--accent)}
.panel[hidden]{display:none}
.masthead #tab-manage[hidden]{display:none}

/* ---------- bottom bar ---------- */
/* `order` rather than a second DOM position: the bar is already the last element in
   the document, but app/dashboard.py injects the Manage panel just above it and the
   panels themselves must stay in the flex flow above the bar. Ordering explicitly
   says "last, whatever else gets injected" instead of depending on injection sites.
   Mobile takes this bar out of flow entirely (position:fixed), where `order` is
   inert — so this one declaration is desktop-only without needing a media query. */
.subbar{
  order:9;
  position:relative;
  flex:none;display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:8px 10px;background:var(--paper);
  border-top:1px solid var(--rule);
  /* see the .masthead comment — a thumb lands here repeatedly on a phone */
  touch-action:manipulation;
}
.subbar[hidden]{display:none}
.subbar .scope{flex:none;white-space:nowrap;font-family:var(--f-data);font-size:10.5px;color:var(--ink-soft);letter-spacing:.03em}
/* One height for both buttons at both breakpoints. Different font-sizes with the
   same padding still come out different heights, since the line box scales with
   the font — and the bar's own height is whatever the taller button says it is,
   so a mismatch here shifts the whole page. */
#langToggle,#toggleDetail{flex:none;font-size:10px;padding:5px 9px;line-height:16px}
.legal-menu-wrap{position:relative;flex:none;margin-right:auto}
#legalMenuToggle{font-size:10px;padding:5px 9px;line-height:16px}
.legal-menu[hidden]{display:none}
.legal-menu{position:absolute;left:0;bottom:calc(100% + 8px);z-index:40;width:min(230px,calc(100vw - 20px));padding:6px;background:var(--paper);border:1px solid var(--rule);box-shadow:0 8px 24px rgba(22,24,43,.18)}
.legal-menu a{display:block;padding:8px 10px;color:var(--ink);font-family:var(--f-body);font-size:12px;text-decoration:none}
.legal-menu a:hover,.legal-menu a:focus-visible{background:var(--wash);color:var(--accent)}
/* The matrix's reading aids. They are about the table, so they go when the table
   does — but the bar itself stays on every tab, because the language toggle lives
   in it and a reader on Settings must still be able to switch language. */
.subbar.no-matrix .legend,
.subbar.no-matrix .scope,
.subbar.no-matrix #toggleDetail{display:none}
/* Match the mobile control bar at every width: the bar carries the two display
   controls and nothing else. The legend and the scope stay in the markup because
   applyLang and renderScope still write them and the tab logic toggles them, but
   neither is rendered at any width. (The per-tab note that used to sit here was
   removed outright — a string nothing can display is not worth translating.) */
.subbar .legend,.subbar .scope{display:none}

/* ---------- manage panel ---------- */
/* Named .method/.method-in from when the Manage tab shared this layout with a
   since-removed Method tab. Kept as-is rather than renamed: app/dashboard.py's
   PANEL constant still emits class="method panel" / "method-in manage-in". */
.method{
  flex:1;min-height:0;overflow:auto;
  background:var(--paper);border-top:1px solid var(--rule);
}
.method-in{max-width:1000px;margin:0 auto;padding:22px 18px 40px}

/* ---------- ask-toast ---------- */
/* --card-dark, not --btn-bg: this card stays the same dark navy in both themes,
   and --btn-bg no longer does — it flips light in dark mode so the filled buttons
   stay visible against the panel. See the token comment in :root. */
/* bottom clears the bottom bar rather than sitting on top of it — the bar is
   ~42px of button plus padding at every width, so the toast starts above it */
.toast{
  position:fixed;left:50%;bottom:58px;transform:translateX(-50%);z-index:70;
  width:calc(100% - 36px);max-width:420px;
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;
  background:var(--card-dark);color:#fff;
  padding:12px 14px;font-size:12.5px;line-height:1.5;
  box-shadow:0 10px 28px rgba(22,24,43,.28);
  animation:toast-in .25s ease;
}
.toast[hidden]{display:none}
.toast span{flex:1 1 200px}
.toast button{flex:none;font-size:10.5px;padding:5px 10px}
.toast button.ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.toast button.ghost:hover{background:#fff;color:var(--card-dark)}
@keyframes toast-in{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

.day-picker{display:none}

@media (prefers-reduced-motion:no-preference){
  .item,.ans{animation:in .3s ease both}
  @keyframes in{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
}
@media (max-width:700px){
  /* The mobile grid stacks one day at a time and never scrolls sideways, so the
     right clearance would just be dead width on the narrowest screen there is —
     and today is not a wider column here, it is the only column, so it takes the
     same width as every other day. Left at 1.5x it overflowed a 375px screen. */
  :root{--cell-w:calc(100vw - 48px);--cell-w-today:calc(100vw - 48px);--rail-w:48px;--edge:0px;--edge-b:0px}
  /* Everything used to be fixed chrome around one internally-scrolling panel
     (the grid, or the method/manage body) — which meant the masthead, the
     stats line and the day picker all stayed put no matter how far the reader
     scrolled, stacking into a wall of bars. Now the page scrolls as a whole and
     only the masthead pins itself back to the top; see the sticky rule below. */
  /* Reserves room for the fixed footer bar (see .subbar below) so the last
     row of the grid can scroll clear of it instead of sitting underneath. */
  body{height:auto;min-height:100dvh;overflow-y:auto;padding-bottom:56px}
  /* The controls keep the same positions as desktop; only the bar becomes sticky
     because the phone scrolls the whole document instead of the matrix pane. */
  .masthead{flex-wrap:nowrap;position:sticky;top:0;z-index:50}
  .avatar{width:28px;height:28px}
  .account-menu{width:min(240px,calc(100vw - 24px))}
  /* Same bar, pinned instead of flowed: the page scrolls as a whole here, so the
     two preferences a reader may want mid-scroll have to be fixed to the viewport
     rather than parked at the end of the document. Everything on its left goes —
     the legend is read once and remembered, the scope line said "last 7 days" for
     a grid that shows one day, and the per-tab note is not worth a phone's width.
     The buttons themselves do not move: same pair, same order, same edge. */
  .subbar{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
  }
  .subbar .legend,.subbar .scope{display:none}
  .day-picker{
    display:flex;flex:none;gap:6px;overflow-x:auto;
    padding:8px 9px;background:var(--paper);border-bottom:1px solid var(--rule);
    scrollbar-width:none;
  }
  .day-picker::-webkit-scrollbar{display:none}
  .day-picker button{
    flex:0 0 auto;background:var(--wash);color:var(--ink);
    border:1px solid var(--rule);padding:7px 10px;font-size:10px;
  }
  .day-picker button.active{background:var(--highlight);border-color:var(--ink)}
  /* The day picker above already says which day this is — the grid's own date
     header repeated it (twice, once per "today" pill) and added nothing else,
     since only one day is ever visible on mobile anyway. */
  #grid thead{display:none}
  #grid{display:block;width:100%;min-width:100%}
  #grid tbody{display:block;width:100%}
  #grid tr{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);width:100%}
  #grid tr.band{display:block}
  #grid tr.band td{display:block;width:100%}
  #grid td.cell{display:none}
  #grid td.cell.mobile-visible{display:block;width:100%}
  th.rail.lab{height:auto;min-height:132px;padding:9px 3px;display:flex;align-items:flex-start;justify-content:center;align-self:stretch}
  th.rail.lab .rail-in{gap:7px}
  .rail-logo,.rail-mark{width:26px;height:26px;border-radius:7px}
  th.rail.topic{width:var(--rail-w);min-width:var(--rail-w);font-size:10px;padding:6px 3px}
  td.cell{width:100%;min-width:0;padding:13px 13px 16px}
  tr.band td{position:static;padding-left:10px}
  .item{margin-bottom:17px;font-size:13px}
  .item .t{font-size:14px;line-height:1.45;margin-bottom:7px}
  .item .w{font-size:12.5px;line-height:1.68}
  .ask{margin-top:10px}
  /* clears the fixed footer bar (EN/中 + Expand detail) instead of sitting under it */
  .toast{bottom:64px;width:calc(100% - 20px)}
  /* .scroll/.method used to be flex:1 panes that scrolled internally, which is
     exactly the "fixed chrome around one scrolling pane" layout this whole
     block is undoing — now they're just more of the page the body scrolls. */
  .scroll{flex:none;overflow:visible}
  .method{flex:none;overflow:visible}
  .method-in{padding:16px 12px 32px}
  .eyebrow{margin-top:26px}
}

/* ---------- dark mode ----------
   The palette is already tokenised, so a theme is a token swap plus the handful of
   places that hardcode a light surface (form fields, the today column). Driven by
   the reader's saved preference, applied to <html> before first paint. */
html[data-theme="dark"]{
  --ink:#E7E9F7;
  --ink-soft:#9AA0C0;
  --paper:#191B2C;
  --wash:#232640;
  --rule:#343858;
  --periwinkle:#7681CE;
  --periwinkle-deep:#2E3563;
  /* the accent role flips to the lighter of the two blues here — see the
     --accent comment in :root for why it can't just stay --periwinkle-deep */
  --accent:#7681CE;
  --highlight-wash:#38321A;
  --canvas:#12131F;
  /* The filled button inverts here rather than staying navy: on a #191B2C panel a
     #16182B box is invisible (1.05:1). Light periwinkle on the panel is 4.7:1, and
     the navy label on it is 4.8:1, so both the shape and the text clear WCAG. */
  --btn-bg:#7681CE;
  --btn-fg:#16182B;
  --btn-hover:#98A1DD;
}
html[data-theme="dark"] td.cell{background:var(--paper)}
html[data-theme="dark"] textarea,
html[data-theme="dark"] .manage-table input,
html[data-theme="dark"] .manage-table select,
html[data-theme="dark"] .topic-editor{background:var(--wash);color:var(--ink);border-color:var(--rule)}
html[data-theme="dark"] td.cell.today{background:#22243C}
html[data-theme="dark"] .item .w b.wk{background:var(--highlight-wash)}
html[data-theme="dark"] .item .w b.wk-risk{background:#3A2226;border-color:#8E5A62}
html[data-theme="dark"] .sed{background:repeating-linear-gradient(135deg,var(--paper),var(--paper) 7px,#1F2137 7px,#1F2137 14px)}
html[data-theme="dark"] .stg:last-child .stg-bar{color:#16182B}
html[data-theme="dark"] button.ghost{color:var(--ink);border-color:var(--ink-soft)}
html[data-theme="dark"] button.ghost:hover{background:var(--ink);color:var(--paper)}
/* Same problem as --accent above, one level more specific: this gold was picked
   to read on --highlight-wash's pale light-mode cream, not its dark-mode brown. */
html[data-theme="dark"] .pricing-table th.cur,
html[data-theme="dark"] .pricing-table th .here{color:var(--highlight)}
/* --highlight is the one background that deliberately stays the same bright
   yellow in both themes, so the text sitting on it should too — var(--ink),
   correct in light mode, becomes near-white in dark mode and disappears here. */
html[data-theme="dark"] .avatar.admin,
html[data-theme="dark"] .badge.admin,
html[data-theme="dark"] thead th.today,
/* the weekday under today's date sets its own colour a rule later, so listing the
   cell alone left this one child near-white on the yellow — 1.16:1, the worst pair
   on the page */
html[data-theme="dark"] thead th.today .dow,
html[data-theme="dark"] .stg:last-child .stg-bar,
html[data-theme="dark"] .day-picker button.active{color:#16182B}
/* The selected tab is a white pill on the dark masthead in both themes, so its
   label cannot follow --accent, which lightens for dark mode: #7681CE on white is
   3.6:1. --periwinkle-deep is the token that stays dark, which is what a fixed
   white background needs. */
html[data-theme="dark"] .tabs button[aria-selected="true"],html[data-theme="dark"] .tabs .site-tab[aria-current="page"]{color:var(--periwinkle-deep)}

.legal-menu::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.legal-menu a[aria-current="page"]{background:var(--wash);color:var(--accent);font-weight:600}

.tabs .site-tab{font-family:var(--f-cond);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;line-height:normal}

#legalMenuToggle{background:none;border:none;color:var(--ink);text-decoration:underline;cursor:pointer;font-family:inherit}
#legalMenuToggle:hover{color:var(--accent)}
.cookie-menu-row{display:flex;align-items:center;gap:6px;padding-right:6px}
.cookie-menu-row a{flex:1;min-width:0}
.legal-menu #cookieStatus{flex:none;margin:0;padding:4px 7px;font-size:10px;text-transform:none;text-align:center}

/* Settings uses the viewport width, independently of matrix column geometry. */
.method .manage-in{width:100%;max-width:none;min-width:0}
#panel-manage .table-scroll{width:100%;max-width:100%;overflow-x:auto}
#panel-manage .manage-table th{width:auto;min-width:0}
#panel-manage .pricing-table{width:100%;min-width:0;table-layout:fixed}
#panel-manage .pricing-table th,#panel-manage .pricing-table td{width:auto;min-width:0;white-space:normal;overflow-wrap:anywhere}
#panel-manage .pricing-table th:first-child,#panel-manage .pricing-table td.f{width:40%}
#panel-manage .manage-note{overflow-wrap:anywhere}
.product-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;font-size:11px}
.product-links span{width:100%;color:var(--ink-soft)}
.product-chip{border:1px solid var(--rule);border-radius:3px;padding:3px 6px;color:var(--accent);text-decoration:none}
.reader-highlight{outline:2px solid var(--accent);outline-offset:3px}
.history-status{display:block;font-size:10px;color:var(--ink-soft);margin-top:5px}
.collected-summary{display:block;font-size:12px;line-height:1.7;margin-top:8px;color:var(--ink-soft)}
.details-collapsed .collected-summary{display:none}
/* Titles are the sole collapsed content. Hidden panels are absent from tab order. */
.item[hidden],.story-details[hidden],.cell-more[hidden],.ask[hidden]{display:none!important}
.story-toggle{display:flex;align-items:flex-start;gap:9px;width:100%;padding:0;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;font:inherit;text-transform:none;letter-spacing:normal}
.story-toggle .t{font-size:12.5px;line-height:1.6;margin:0;display:block;max-height:none;overflow:visible;-webkit-line-clamp:unset;font-weight:550;overflow-wrap:anywhere}
.story-chevron{flex:none;font-size:19px;line-height:1.2;color:var(--ink-soft);transition:transform .12s}
.story-toggle:hover,.story-ask:hover,.cell-more:hover{background:transparent;color:var(--accent)}
.story-toggle[aria-expanded="true"] .story-chevron{transform:rotate(90deg)}
.story-toggle:focus-visible,.cell-more:focus-visible,.story-ask:focus-visible,.product-chip:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:3px}
.item:has(.story-toggle[aria-expanded="true"]){padding-bottom:18px;border-bottom:1px solid var(--rule)}
/* One editorial column: the warm marker sits in the gutter, not in the text. */
.story-details{padding:0 18px 0 0}
.item .w{position:relative;margin:9px 0 0;padding:0;font:inherit;font-size:12px;line-height:1.75;border:0;color:var(--ink)}
.item .w::before{content:"";position:absolute;left:-7px;top:5px;bottom:5px;width:2px;background:var(--highlight)}
.item .src{margin:9px 0 0;font-family:inherit;font-size:11px;line-height:1.8;overflow-wrap:anywhere}
.item .src a{display:inline;padding:0;color:var(--accent);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.source-separator{color:var(--ink-soft);padding:0 2px}
.deep-dive{margin:12px 0 0;font-size:11px;line-height:1.8}
.deep-dive h3{font:inherit;font-weight:500;text-transform:none;letter-spacing:normal;color:var(--ink-soft);margin:0 0 2px}
.product-links{margin:0;gap:2px 12px}
.deep-dive .product-links{margin-left:12px}
.product-chip{display:inline-flex;gap:4px;align-items:baseline;padding:0;border:0;border-radius:0;font:inherit;line-height:1.8;color:var(--accent);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px;max-width:100%;overflow-wrap:anywhere}
.product-chip span{width:auto;color:inherit;flex:none}
.item .src a:hover,.product-chip:hover{text-decoration-color:currentColor;color:var(--accent)}
.story-ask,.cell-more{border:0;background:transparent;color:var(--accent);font:inherit;font-size:11px;line-height:1.6;text-transform:none;letter-spacing:normal;padding:0;cursor:pointer}
.story-ask{margin-top:12px;color:var(--accent);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}.story-ask span{margin-left:4px}
.cell>.story-ask{display:block}
.story-ask:hover{text-decoration-color:currentColor}
.story-questions{margin-top:12px;font-size:11px;line-height:1.8}
.targeted-questions h3{margin:0 0 2px;font:inherit;font-weight:500;color:var(--ink-soft)}
.suggested-question-list{margin-left:12px}
.story-questions .story-ask{margin-top:5px}
.suggested-question{display:block;max-width:100%;padding:2px 0;border:0;background:transparent;color:var(--accent);font:inherit;text-align:left;white-space:normal;overflow-wrap:anywhere;text-transform:none;letter-spacing:normal;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px;cursor:pointer}
.suggested-question:hover{background:transparent;color:var(--accent);text-decoration-color:currentColor}
.suggested-question:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.inline-answer{font-size:12px;line-height:1.75;color:var(--ink);overflow-wrap:anywhere}
.inline-answer p{margin:8px 0}.inline-answer a{margin-right:10px;font-size:11px;color:var(--accent)}
.inline-answer[hidden]{display:none}
.ask textarea{background:var(--paper);border-radius:3px}
.story-details > .ask .question-about{display:none}
.ask summary{font:inherit;letter-spacing:normal;text-transform:none}
.question-send{border:1px solid var(--rule);background:transparent;color:var(--accent);text-transform:none;letter-spacing:normal;border-radius:3px;padding:4px 8px}
.cell-more{margin:3px 0 12px;text-decoration:underline;text-underline-offset:4px}
.ask textarea{font:inherit;line-height:1.6;max-width:100%}.question-send{margin-top:7px;font-size:11px}
.question-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:7px;min-width:0}
.question-actions .saved{margin:0;min-height:0;min-width:0;flex:0 1 auto;text-align:right;overflow-wrap:anywhere}
.question-actions .question-send{margin:0;flex:none;max-width:50%;white-space:normal;overflow-wrap:anywhere}
.question-signin{background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:10px;padding:25px;max-width:min(390px,calc(100% - 30px))}
.question-signin::backdrop{background:rgba(20,22,40,.35)}
.question-signin h2{font-size:20px;margin:0 0 12px}.question-signin p{font-size:13px;line-height:1.7}.signin-cancel{margin-top:18px}
@media(max-width:700px){.story-toggle .t{font-size:14px;line-height:1.65}.item .w{font-size:13px}.item .src,.deep-dive,.story-ask,.story-questions,.cell-more{font-size:12px}.story-toggle{gap:12px}.story-details{padding-right:0}}
@media(max-width:600px){
  #panel-manage .pricing-table th,#panel-manage .pricing-table td{padding:8px 5px;font-size:11px}
}

.ask summary::before,.ask[open] summary::before,.ask.has summary::before{content:none}
.question-about{font-size:11px;color:var(--ink-soft);line-height:1.7;margin:7px 0;overflow-wrap:anywhere}.question-about:empty{display:none}
@media(max-width:400px){.masthead{flex-wrap:wrap}.mast-right{gap:6px}}

/* Compact news reading: content comes first; briefing and matrix share controls. */
:root{
  --ink:#202C2A;--ink-soft:#64716C;--accent:#236B58;
  --periwinkle:#5C8F7F;--periwinkle-deep:#244E42;
  --btn-bg:#244E42;--btn-fg:#fff;--btn-hover:#34725F;--card-dark:#203D33;
  --paper:#FFFEFA;--canvas:#F4F3ED;--wash:#ECEFE8;--rule:#DCDDD3;
  --highlight:#B2CBB7;--highlight-wash:#EFF4EC;--today-paper:#F4F8F1;
  --gutter:1px;--edge:0px;--edge-b:0px;--rail-w:112px;--cell-w:250px;--cell-w-today:320px;
  --f-body:"Segoe UI","Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif;
  --f-cond:var(--f-body);
}
body{background:var(--paper);font-size:14px}
button{font-size:12px;letter-spacing:0;text-transform:none;border-radius:4px;line-height:1.5}
button.ghost{border-color:var(--rule);color:var(--ink-soft)}
button.ghost:hover{background:var(--wash);color:var(--ink);border-color:var(--rule)}
:focus-visible,.masthead :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
::selection{background:var(--highlight);color:var(--ink)}
.masthead{padding:4px 14px;min-height:48px;background:var(--paper);border-bottom:1px solid var(--rule);gap:24px;flex-wrap:nowrap}
.mast-side:not(.mast-right){display:flex}
.brand-link{display:inline-flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand-icon{display:flex;align-items:center;justify-content:center;flex:none;width:23px;height:25px;background:var(--periwinkle-deep);border-radius:3px;color:#fff;font:700 18px/1 Georgia,serif}
.brand-icon span{display:none}
.wordmark{font:650 16px/1.3 var(--f-body);letter-spacing:-.6px;text-transform:none;color:var(--ink)}
.wordmark>span{color:var(--accent);font-weight:450}
.tabs{background:transparent;padding:0;gap:18px;border-radius:0;margin:0}
.tabs button,.tabs .site-tab{position:relative;padding:7px 0;background:transparent;color:var(--ink-soft);border-radius:0;font:500 12px/1.5 var(--f-body);letter-spacing:0;text-transform:none}
.tabs button:hover,.tabs .site-tab:hover{background:transparent;color:var(--accent)}
.tabs button[aria-selected="true"],.tabs .site-tab[aria-current="page"]{background:#fff;color:var(--accent);font-weight:650}
.tabs button[aria-selected="true"]::after,.tabs .site-tab[aria-current="page"]::after{content:"";position:absolute;bottom:-8px;left:0;right:0;height:2px;background:var(--accent)}
.mast-right{gap:12px}
.masthead button.ghost,.masthead a.ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--rule);padding:4px 8px;font:11px/1.5 var(--f-body);border-radius:4px}
.masthead button.ghost:hover,.masthead a.ghost:hover{background:var(--wash);color:var(--accent);border-color:var(--rule)}
.masthead #tab-manage[aria-selected="true"]{background:var(--wash);color:var(--accent);border-color:var(--accent)}
.avatar{background:var(--accent);width:28px;height:28px}
.avatar:hover{background:var(--btn-hover)}
.account-menu,.legal-menu{border-radius:6px;box-shadow:0 8px 24px #202C2A14;border:1px solid var(--rule)}
.am-row{border-radius:4px;font-size:12px}
.badge{border-radius:3px;text-transform:none;letter-spacing:0}
.day-picker.briefing-hidden{display:none!important}
#panel-matrix{margin:0 8px;border:0;border-radius:0;background:var(--paper);scrollbar-color:#B7C1B6 var(--canvas);scrollbar-width:thin;container-type:inline-size}
#grid{min-width:100%}
#grid th,#grid td{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
#grid th:last-child,#grid td:last-child{border-right:0}
#grid thead th{background:var(--canvas);padding:6px 12px;font-size:12px;font-weight:600;letter-spacing:0;height:44px}
#grid thead th .dow{margin-top:2px;font:10px/1.4 var(--f-body);color:var(--ink-soft);letter-spacing:0}
#grid thead th.today{background:var(--periwinkle-deep);color:#fff;box-shadow:none}
#grid thead th.today .dow{color:#D5E7D8}
#grid thead th.rail{background:var(--canvas);font-size:10px;color:var(--ink-soft);font-weight:500;vertical-align:middle}
#grid tr.band td{background:var(--canvas);color:var(--ink-soft);font-size:10px;font-weight:500;letter-spacing:.03em;padding:3px 10px}
.group-label{position:sticky;left:10px;display:inline-block}
#grid th.rail{background:var(--paper);text-align:left;padding:11px 8px;box-shadow:2px 0 6px #202C2A04}
#grid th.rail.lab{height:auto;min-height:0}
#grid th.rail.lab .rail-in{flex-direction:row;align-items:center;gap:5px;height:auto}
#grid th.rail.lab .rail-name{writing-mode:horizontal-tb;white-space:normal;font:600 11px/1.4 var(--f-body);letter-spacing:0;overflow-wrap:anywhere}
.rail-logo,.rail-mark{width:20px;height:20px;border-radius:4px;background:#fff;box-shadow:inset 0 0 0 1px var(--rule)}
.rail-logo{padding:2px}.rail-mark{background:var(--wash);color:var(--accent);font-size:9px}
#grid th.rail.topic{padding:12px 8px;color:var(--accent);font-size:11px;line-height:1.5}
#grid td.cell{background:var(--paper);padding:10px 12px}
#grid td.cell.today{background:var(--today-paper)}
.item{margin:0 0 10px}
.item,.ans{animation:none}
.item:last-of-type{margin-bottom:0}
.story-toggle{gap:8px;min-height:25px}
.story-toggle .t{font-size:14px;font-weight:500;line-height:1.55;letter-spacing:0;display:block;overflow:visible;-webkit-line-clamp:unset;max-height:none}
.story-toggle:hover .t,.story-toggle[aria-expanded="true"] .t{color:var(--accent)}
.story-chevron{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;font-size:18px;color:var(--ink-soft);line-height:1;transform-origin:center;transition:none}
.story-details{padding-right:18px}
.item .w{font-size:13px;line-height:1.75;color:var(--ink-soft);margin-top:7px}
.item .w::before{left:-7px;background:var(--highlight);width:2px}
.item .src,.deep-dive,.story-questions{font-size:12px;line-height:1.75}
.item .src{margin-top:7px}
.deep-dive h3,.targeted-questions h3{font-size:11px;font-weight:500}
.cell-more{font-size:11px;text-decoration:none;padding:3px 0;margin:0;min-height:25px}
.cell-more:hover{text-decoration:underline;text-underline-offset:3px}
.empty{display:block;color:var(--ink-soft);font:11px/1.5 var(--f-body);padding:0}
.ans{border-left-color:var(--accent);padding:10px;font-size:12px}
.ans .q{font-size:13px}.ans .a{font-size:12px;line-height:1.75}
.ask textarea{padding:8px;font-size:13px;border-radius:4px}
.question-send{border-color:var(--rule);background:var(--wash);font-size:12px;padding:5px 8px;border-radius:4px}
.tray{background:var(--highlight-wash);border-bottom:1px solid var(--rule);padding:8px 14px}
.tray-title{font-size:12px;text-transform:none;letter-spacing:0}
.tray-list{line-height:1.6}
.subbar{padding:4px 14px;gap:6px;background:var(--paper);border-top:1px solid var(--rule);min-height:40px}
.legal-menu-wrap{margin-right:auto;order:1}
.subbar>#langToggle,.subbar>#themeToggle{order:2}
#legalMenuToggle{color:var(--ink-soft);text-decoration:none;font-size:10px}
#langToggle,#themeToggle{font-size:10px;line-height:17px;padding:3px 8px;min-height:29px}
.method{background:var(--paper);border-top:0}
.method-in{padding:20px 16px;line-height:1.7}
.method .manage-in{max-width:1120px}
#pricing-in>.manage-title{margin:0;font-size:22px;font-weight:600}
#pricing-in>.manage-section:first-of-type{margin-top:16px}
.manage-title{font-family:var(--f-body)!important;letter-spacing:0!important}
.manage-table input,.manage-table select,.topic-editor{background:var(--paper);border-radius:4px}
.toast{border-radius:6px;bottom:52px}

/* The briefing uses the same story and question elements, in DOM reading order.
   Nonempty company/day groups replace the comparison table's empty cells. */
#grid.briefing-mode,#grid.briefing-mode tbody{display:block;width:100%;min-width:0}
#grid.briefing-mode thead{display:none}
#grid.briefing-mode tr{display:grid;grid-template-columns:136px minmax(0,1fr);width:100%;border-bottom:1px solid var(--rule)}
#grid.briefing-mode th.rail{position:static;width:auto;min-width:0;max-width:none;height:auto;min-height:0;padding:10px 7px;border:0;box-shadow:none}
#grid.briefing-mode .rail-name{font-size:12px}
#grid.briefing-mode tr.briefing-day{display:block;position:sticky;top:0;z-index:3;background:var(--canvas)}
#grid.briefing-mode .briefing-day th{display:block;padding:7px 12px;border:0;min-height:36px;text-align:left;background:var(--canvas)}
.briefing-day h2{display:flex;align-items:center;gap:12px;margin:0;font:600 14px/1.5 var(--f-data);color:var(--ink)}
.briefing-day h2 span{font:11px/1.5 var(--f-body);color:var(--ink-soft)}
#grid.briefing-mode td.cell{display:block;width:100%;min-width:0;padding:9px 12px;border:0;background:var(--paper)}
#grid.briefing-mode .item{margin:0 0 8px}
#grid.briefing-mode .item:last-of-type{margin-bottom:0}
#grid.briefing-mode .story-toggle .t{font-weight:600}
#grid.briefing-mode .item{border-left:2px solid var(--accent);padding-left:9px;margin-left:-11px}
#grid.briefing-mode .story-toggle .t{line-height:1.65}
#grid.briefing-mode .item:has(.story-toggle[aria-expanded="true"]){padding-bottom:10px}
#grid.briefing-mode .briefing-empty{display:block;border:0}
#grid.briefing-mode .briefing-empty td{display:block;padding:10px 12px;border:0;color:var(--ink-soft);font-size:12px}

html[data-theme="dark"]{
  --ink:#E6EBE4;--ink-soft:#A8B7AD;--accent:#9ECFB5;
  --periwinkle:#9ECFB5;--periwinkle-deep:#284C3F;
  --paper:#1C2722;--canvas:#151E19;--wash:#2B3B30;--rule:#36473A;
  --highlight:#73977C;--highlight-wash:#283B2C;--today-paper:#233127;
  --btn-bg:#9ECFB5;--btn-fg:#152A1D;--btn-hover:#B7DEC4;color-scheme:dark;
}
html[data-theme="dark"] .tabs button[aria-selected="true"],html[data-theme="dark"] .tabs .site-tab[aria-current="page"]{background:var(--paper);color:var(--accent)}
html[data-theme="dark"] button.ghost{border-color:var(--rule);color:var(--ink-soft)}
html[data-theme="dark"] button.ghost:hover{background:var(--wash);color:var(--ink)}
html[data-theme="dark"] #grid td.cell.today{background:var(--today-paper)}
html[data-theme="dark"] #grid.briefing-mode td.cell{background:var(--paper)}
html[data-theme="dark"] #grid thead th.today{color:#fff}
html[data-theme="dark"] #grid thead th.today .dow{color:#D5E7D8}
html[data-theme="dark"] .avatar.admin,html[data-theme="dark"] .badge.admin{color:#152A1D}
html[data-theme="dark"] .pricing-table .y,html[data-theme="dark"] .pricing-table th.pro{color:var(--accent)}
@media(min-width:701px) and (max-width:999px){#grid{--cell-w:calc(100cqw - var(--rail-w) - var(--cell-w-today) - 3px)}}
@media(min-width:1000px) and (max-width:1199px){#grid{--cell-w:calc((100cqw - var(--rail-w) - var(--cell-w-today) - 4px)/2)}}
@media(min-width:1200px){#grid{--cell-w:calc((100cqw - var(--rail-w) - var(--cell-w-today) - 5px)/3)}}
@media(max-width:700px){
  :root{--rail-w:100%;--cell-w:100%;--cell-w-today:100%;--edge:0px;--edge-b:0px}
  body{height:auto;min-height:100dvh;padding-bottom:46px;overflow-y:auto}
  .masthead{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:36px 32px;height:auto;min-height:76px;padding:4px 10px;gap:0 12px;position:sticky;top:0;z-index:50}
  .wordmark{font-size:15px}.brand-icon{width:22px;height:24px;font-size:17px}.brand-link{gap:5px}
  .mast-side:not(.mast-right){grid-column:1;grid-row:1}.mast-right{grid-column:2;grid-row:1;gap:7px;margin-left:auto}
  .masthead #tab-manage{font-size:10px;padding:3px 6px}
  #gsi-button{width:80px;height:40px}.account-menu{top:calc(100% + 10px)}
  .tabs{grid-column:1/-1;grid-row:2;order:0;width:100%;max-width:none;gap:20px;height:32px;justify-content:flex-start;align-items:center}
  .tabs button,.tabs .site-tab{font-size:11px;padding:6px 0}
  .tabs button[aria-selected="true"]::after,.tabs .site-tab[aria-current="page"]::after{bottom:-2px}
  .day-picker{background:var(--canvas);border-bottom:1px solid var(--rule);padding:5px 10px;gap:5px}
  .day-picker button{background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:5px 9px;font-size:10px;min-height:30px}
  .day-picker button.active,html[data-theme="dark"] .day-picker button.active{background:var(--periwinkle-deep);color:#fff;border-color:var(--periwinkle-deep)}
  #panel-matrix{margin:0 10px 6px;background:var(--paper);border:0;border-radius:0;overflow:visible}
  #grid,#grid tbody{display:block;width:100%;min-width:0}
  #grid thead{display:none}
  #grid tr{display:block;width:100%;margin:0;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:var(--paper)}
  #grid tr.band{border:0;background:transparent}
  #grid tr.band td{padding:5px 0;border:0;font-size:9px;background:var(--canvas)}
  #grid th.rail,#grid th.rail.lab,#grid th.rail.topic{position:static;display:block;min-height:0;height:auto;max-width:none;min-width:0;width:100%;padding:7px 0 0;border:0;background:var(--paper);box-shadow:none}
  #grid th.rail.lab .rail-in{flex-direction:row;align-items:center;gap:6px}
  #grid th.rail.lab .rail-name{font-size:12px;line-height:1.5;font-weight:600}
  .rail-logo,.rail-mark{width:18px;height:18px;border-radius:3px}
  #grid td.cell{width:100%;min-width:0;padding:7px 0 10px;border:0;background:var(--paper)}
  #grid td.cell.today,html[data-theme="dark"] #grid td.cell.today{background:var(--paper)}
  #grid td.cell:not(.mobile-visible){display:none}
  #grid td.cell.mobile-visible{display:block}
  .story-toggle{gap:8px;min-height:30px}.story-toggle .t{font-size:15px;line-height:1.65;font-weight:500;display:block;overflow:visible;-webkit-line-clamp:unset}
  .item{margin-bottom:9px}.item:last-of-type{margin-bottom:0}
  .item .w{font-size:14px;line-height:1.75}.item .src,.deep-dive,.story-questions{font-size:12px}
  .story-details{padding-right:0}.story-ask,.cell-more{font-size:12px;min-height:32px}
  .empty{font-size:11px;padding:0}
  #grid.briefing-mode tr{display:block;padding:0}
  #grid.briefing-mode th.rail{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:9px 0 0}
  #grid.briefing-mode .rail-in{min-width:0}
  #grid.briefing-mode tr.briefing-day{top:77px;margin:0}
  #grid.briefing-mode .briefing-day th{padding:7px 0;min-height:34px}
  #grid.briefing-mode td.cell{display:block;padding:6px 0 10px}
  #grid.briefing-mode .item{padding-left:7px;margin-left:0}
  .subbar{position:fixed;left:0;right:0;bottom:0;min-height:40px;z-index:40;padding:4px 10px calc(4px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);gap:5px}
  .subbar .scope{display:none}.legal-menu-wrap{margin-right:auto}.legal-menu{left:0}
  #langToggle,#themeToggle{font-size:10px;padding:3px 7px;min-height:30px}
  #legalMenuToggle{font-size:9px;padding:4px 0}
  .method-in{padding:16px 10px}.tray{padding:8px 10px}.toast{bottom:54px}
}
@media(max-width:420px){.masthead .wordmark{display:block}.masthead{column-gap:8px}.tabs{gap:16px}}
@media(prefers-reduced-motion:reduce){.story-chevron{transition:none}}