/* ==========================================================================
   C-Advisor 2 — "Briefing"
   Visual language taken verbatim from advisor2/docs/ca-concept-briefing.html.
   Everything below the "APP ADDITIONS" rule is new surface the mock did not
   have to show (auth, menus, streaming, notices) styled in the same idiom.
   ========================================================================== */

:root {
  --paper: #FAF6EE;
  --card: #FFFDF7;
  --ink: #262119;
  --muted: #6E6455;
  --hairline: #E4DCCB;
  --accent: #A9640C;
  --accent-soft: rgba(169, 100, 12, 0.09);
  --blue: #2B5FB8;
  --good: #2F7D5B;
  --bad: #B3362A;
  --radius: 10px;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --sans: "Seravek", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); }
body {
  font-family: var(--sans);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.num, .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
[x-cloak] { display: none !important; }

/* ---------- Masthead (sticky) ----------
   Full-bleed so the paper background covers the whole strip while scrolling;
   the rows inside stay on the 1080px measure. position: relative anchors the
   popovers, which cannot live inside the scrolling company line. */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.mast-top {
  max-width: 1080px; margin: 0 auto; padding: 0.75rem 1.5rem 0.6rem;
  display: flex; align-items: baseline; gap: 0.7rem;
}
.masthead .brand {
  font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0.01em; white-space: nowrap;
}
.masthead .date {
  font-size: 0.74rem; color: var(--muted); font-style: italic; font-family: var(--serif);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.masthead .right {
  margin-left: auto; display: flex; align-items: center; gap: 0.8rem;
  font-size: 0.78rem; color: var(--muted);
}
.btn-quiet {
  background: none; border: 1px solid var(--hairline); border-radius: 6px;
  padding: 0.3rem 0.7rem; font: inherit; font-size: 0.76rem; color: var(--muted); cursor: pointer;
}
.btn-quiet:hover { border-color: var(--muted); color: var(--ink); }
.btn-quiet:disabled, .btn-quiet.is-disabled { opacity: 0.5; cursor: not-allowed; }
/* The picker's <label> is the visible control; its <input> is visually hidden,
   so the focus ring has to be borrowed from one to the other. */
.sr-only:focus-visible + .btn-quiet { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Hamburger + drawer ---------- */
/* flex: 0 0 auto — the masthead's right group is a flex row, so with a long
   email the button was allowed to shrink below its width and the bars came out
   squashed. align-self: center because .mast-top aligns on the baseline, which
   for an icon button means "hanging off it". */
.hamburger {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; flex: 0 0 auto; align-self: center;
  width: 30px; height: 30px; padding: 0;
  background: none; border: none; cursor: pointer;
}
.hamburger span {
  display: block; width: 20px; height: 2px; flex: 0 0 auto;
  background: var(--ink); border-radius: 1px;
}
.hamburger:hover span { background: var(--accent); }
.hamburger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.scrim, .modal-scrim {
  position: fixed; inset: 0; z-index: 60; background: rgba(38, 33, 25, 0.32);
}
.modal-scrim { z-index: 80; }

/* Full height, off-canvas to the right. Transform rather than `right` so the
   slide is composited; `visibility` keeps it out of the tab order when shut. */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(340px, 86vw);
  background: var(--card); border-left: 1px solid var(--hairline);
  box-shadow: -10px 0 30px rgba(38, 33, 25, 0.10);
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }

.drawer-x {
  align-self: flex-end; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 1.1rem; color: var(--muted);
  padding: 1rem 1.2rem 0.4rem; line-height: 1;
}
.drawer-x:hover { color: var(--ink); }

/* Scrolls internally so the menu can outgrow the viewport. */
.drawer-nav {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; padding-bottom: 1.5rem;
}
.drawer-group { padding: 0.5rem 0; }
.drawer-group + .drawer-group { border-top: 1px solid var(--hairline); }
/* Ieșire sits at the bottom of the panel, away from everything else. */
.drawer-last { margin-top: auto; }

.drawer-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  font-family: var(--serif); font-size: 1.05rem; font-weight: 400; color: var(--ink);
  padding: 0.7rem 1.4rem;
}
.drawer-item:hover { color: var(--accent); background: var(--accent-soft); }
.drawer-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- Modals ---------- */
.modal {
  position: fixed; inset: 0; z-index: 90;
  background: var(--paper);
  display: flex; flex-direction: column;
}
.modal-head {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 1rem 1.5rem; border-bottom: 2px solid var(--ink);
  max-width: 1080px; margin: 0 auto; width: 100%;
}
.modal-head h2 {
  font-family: var(--serif); font-weight: 500; font-size: 1.3rem; margin-right: auto;
}
.modal-x {
  background: none; border: none; cursor: pointer; font: inherit; font-size: 1.1rem;
  color: var(--muted); line-height: 1; padding: 0.2rem 0.3rem;
}
.modal-x:hover { color: var(--ink); }
.modal-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.4rem 1.5rem 3rem; max-width: 1080px; margin: 0 auto; width: 100%;
}

/* Drop anywhere on the files modal. The stage is everything below the masthead
   rule; it does not scroll, so the outline stays put while the list moves.
   min-height: 0 — without it a flex item refuses to shrink below its content
   and .modal-body never gets a scrollbar. */
.modal-stage { flex: 1; position: relative; min-height: 0; display: flex; flex-direction: column; }
.drop-outline {
  position: absolute; inset: 50px; z-index: 5; pointer-events: none;
  border: 2px dashed var(--blue); border-radius: var(--radius);
}

/* Years down the side, that year's documents beside them. */
.files-modal { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.6rem; align-items: start; }
.year-tabs { display: flex; flex-direction: column; gap: 0.15rem; position: sticky; top: 0; }
.year-tab {
  text-align: left; background: none; border: none; cursor: pointer; font: inherit;
  font-variant-numeric: tabular-nums; color: var(--muted);
  padding: 0.45rem 0.7rem; border-radius: 7px; border-left: 2px solid transparent;
}
.year-tab:hover { background: var(--accent-soft); color: var(--ink); }
.year-tab.current {
  color: var(--accent); font-weight: 700;
  background: var(--accent-soft); border-left-color: var(--accent);
}

.year-files { display: flex; flex-direction: column; }
.file-row {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.7rem 0.2rem; border-bottom: 1px solid var(--hairline);
}
.file-row:last-child { border-bottom: none; }
.file-state { font-size: 0.85rem; }
.file-state.ready { color: var(--good); }
.file-state.processing, .file-state.pending { color: var(--accent); }
.file-state.error, .file-state.failed { color: var(--bad); }
.file-state.unsupported { color: var(--muted); }
.file-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.file-main b { font-weight: 500; overflow-wrap: anywhere; }
.file-main small { font-size: 0.76rem; color: var(--muted); }
.file-note { font-size: 0.76rem; color: var(--muted); font-style: italic; }

/* Uploads and extractions in flight. Spans both grid columns so it reads as a
   banner over the whole list rather than as an entry under one year. */
.files-progress { grid-column: 1 / -1; display: flex; flex-direction: column; }
.progress-row { align-items: center; gap: 1rem; }
/* Indeterminate: the server reports a status, never a byte count, so a bar
   claiming a percentage would be inventing one. */
.file-bar {
  flex: 0 0 7rem; height: 3px; border-radius: 2px;
  background: var(--hairline); overflow: hidden; position: relative;
}
.file-bar i {
  position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 2px;
  background: var(--accent); animation: file-bar-slide 1.15s ease-in-out infinite;
}
@keyframes file-bar-slide { from { left: -40%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .file-bar i { animation: none; left: 0; width: 100%; opacity: 0.45; }
}

.member-form {
  display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline);
}
.member-form input, .member-form select {
  font: inherit; font-size: 0.85rem; padding: 0.4rem 0.6rem;
  border: 1px solid var(--hairline); border-radius: 7px;
  background: var(--card); color: var(--ink);
}
.member-form input { flex: 1 1 14rem; min-width: 0; }

/* ---------- Company line ----------
   One line, never wraps. Scrolls sideways so `+ profil` stays reachable when a
   company has three profiles and a long name. The dropdowns are NOT children of
   this element: `overflow-x: auto` makes the browser clip on the y axis too,
   which would slice every popover off at the header's edge. */
.company-line {
  max-width: 1080px; margin: 0 auto; padding: 0 1.5rem 0.7rem;
  display: flex; align-items: center; gap: 0.6rem;
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  font-size: 0.9rem;
  scrollbar-width: thin; scrollbar-color: var(--hairline) transparent;
  -webkit-overflow-scrolling: touch;
}
.company-line > * { flex: 0 0 auto; }
.company-line::-webkit-scrollbar { height: 4px; }
.company-line::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 2px; }
.company-line::-webkit-scrollbar-track { background: transparent; }
.company-btn {
  font: inherit; font-weight: 700; background: none; border: none; cursor: pointer;
  color: var(--ink); border-bottom: 2px solid var(--accent); padding: 0 0.1rem 1px;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.company-btn .chev { font-size: 0.65rem; color: var(--accent); }
.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; padding: 0.18rem 0.65rem; font-size: 0.75rem; font-weight: 600;
}
.chip .x {
  cursor: pointer; opacity: 0.5; font-style: normal; background: none; border: none;
  color: inherit; font: inherit; line-height: 1; padding: 0 0 0 0.1rem;
}
.chip .x:hover { opacity: 1; }
.chip-add {
  background: none; border: 1px dashed var(--hairline); color: var(--muted);
  border-radius: 999px; padding: 0.18rem 0.65rem; font: inherit; font-size: 0.75rem; cursor: pointer;
}
.chip-add:hover { color: var(--accent); border-color: var(--accent); }

/* Company switcher dropdown */
.company-pop {
  position: absolute; top: 100%; left: max(1.5rem, calc(50% - 540px + 1.5rem)); z-index: 30;
  width: min(300px, calc(100vw - 3rem));
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: 0 10px 28px rgba(38, 33, 25, 0.14);
  padding: 0.5rem;
}
.company-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  width: 100%; text-align: left; background: none; border: none; font: inherit; cursor: pointer;
  padding: 0.55rem 0.7rem; border-radius: 7px;
}
.company-opt:hover { background: var(--accent-soft); }
.company-opt.current { background: var(--accent-soft); }
.company-opt b { font-size: 0.86rem; display: block; }
.company-opt small { font-size: 0.7rem; color: var(--muted); }
.company-opt .check { color: var(--accent); font-weight: 700; }
.company-new {
  width: 100%; margin-top: 0.3rem; background: none; border-top: 1px solid var(--hairline);
  font: inherit; font-size: 0.8rem; color: var(--accent); font-weight: 600;
  padding: 0.55rem 0.7rem; text-align: left; cursor: pointer;
  border-left: none; border-right: none; border-bottom: none;
}
.company-new:hover { color: #8C5209; }

/* ---------- Layout ---------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 1.6rem 1.5rem 7rem; }
.rubric {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.45rem;
}

/* ---------- Lead story ---------- */
/* Source order is head -> charts -> body. On desktop the grid puts head and
   body back into the left column and spans the charts down the right, so the
   reading order is unchanged. Mobile keeps the source order, which is the
   point: on a phone the charts are the answer and the prose is the footnote. */
/* Block, not grid. A grid pinned the prose to one column and the charts to the
   other, so a long analysis beside short charts left the right half blank for
   screens at a time — and the foot rule ended up under a field of whitespace,
   reading as though it belonged to nothing. Floated, the prose runs alongside
   the charts and then closes underneath them, which is what makes a long
   article read as ONE article. */
.lead { padding-bottom: 0.6rem; }
.lead::after { content: ''; display: block; clear: both; }
.lead-charts { float: right; width: 45%; margin: 0.25rem 0 1.3rem 2.2rem; }
.stories > .story { min-width: 0; }
.lead h1 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem);
  line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; margin-bottom: 0.7rem;
}
/* No `max-width` here. It used to be 58ch, which is a fine measure on its own
   and fatal next to a float: beside the charts the text was already narrower
   than the cap, and below them the cap kept it narrow while the right half of
   the column stayed empty. The float sets the measure at the top; the full
   column sets it underneath. */
.lead .lede { font-size: 1rem; color: var(--ink); margin-bottom: 0.9rem; }
.lead .lede b, .lead .lede strong { font-variant-numeric: tabular-nums; }
/* What you asked, set as a quotation. The rule does the work that "la
   întrebarea: «…»" used to do in words — and does it better, because a quote
   rule reads as YOUR voice while the prose read as the agent describing you. */
.byline {
  font-size: 0.86rem; color: var(--muted); font-style: italic;
  font-family: var(--serif); margin-bottom: 1.1rem;
  border-left: 2px solid var(--accent); padding-left: 0.85rem;
  overflow-wrap: anywhere;
}

.chart-card {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 1rem 1.1rem;
}
.chart-card + .chart-card { margin-top: 1rem; }
.chart-card h3 { font-size: 0.85rem; margin-bottom: 0.1rem; font-weight: 600; }
.chart-card .sub { font-size: 0.74rem; color: var(--muted); margin-bottom: 0.6rem; }
.legend { display: flex; gap: 1rem; margin-bottom: 0.5rem; font-size: 0.74rem; color: var(--muted); flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 0.3rem; vertical-align: -1px; }

/* ---------- Article foot: the two things you can do with an analysis ----------
   One component, two instances, at opposite ends of the rule that closes the
   article. Same icon family, same small-caps label, same size — only the colour
   differs, because only the meaning does. The rule between them IS the
   separation, and it doubles as the divider to the next analysis. */
.article-foot { display: flex; align-items: center; gap: 0.9rem; width: 100%; }
.article-foot .perf { flex: 1; height: 0; border-top: 1.5px dashed var(--hairline); transition: border-color .14s; }
.article-act {
  display: inline-flex; align-items: center; gap: 0.45rem; flex: 0 0 auto;
  background: none; border: none; cursor: pointer; font-family: var(--sans);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap; color: var(--muted); padding: 0.85rem 0.2rem;
}
.article-act svg { width: 17px; height: 17px; flex: 0 0 auto; }
/* Peers behave alike: both underline, the danger one only swaps the colour.
   underline-offset because the letter-spacing leaves descenders sitting on it. */
.article-act:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.article-act.danger { color: var(--bad); }
.article-act.danger:hover { color: var(--bad); }
.article-foot:hover .perf { border-top-color: rgba(169, 100, 12, 0.35); }
.article-act:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}

.article-act:disabled { opacity: 0.55; cursor: progress; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .article-foot .perf { transition: none; } }

/* ---------- Secondary stories ---------- */
.stories {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
  padding: 1.6rem 0; border-bottom: 1px solid var(--hairline);
}
.story h2 {
  font-family: var(--serif); font-weight: 500; font-size: 1.25rem; line-height: 1.2;
  margin-bottom: 0.4rem; text-wrap: balance;
}
.story p { font-size: 0.84rem; color: var(--muted); margin-bottom: 0.7rem; }
.story p b, .story p strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.story .fig {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 0.7rem 0.8rem;
}
.story .fig + .fig { margin-top: 0.7rem; }
.story a, .story .linkish {
  font-size: 0.78rem; color: var(--blue); font-weight: 600; text-decoration: none;
  background: none; border: none; font-family: inherit; cursor: pointer; padding: 0;
}
.story a:hover, .story .linkish:hover { text-decoration: underline; }

/* ---------- Prepared analyses ---------- */
.index-list { padding: 1.6rem 0; border-bottom: 1px solid var(--hairline); }

/* 3-up on the desktop layout the 1080px wrap was built for, 2-up on tablet,
   1-up on phones. Fixed track counts rather than auto-fit: the card copy is a
   title plus one line of Romanian description, and auto-fit would let a wide
   window stretch cards to a line length that reads as a paragraph. */
.analysis-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem;
  margin-top: 0.6rem;
}

/* minmax(0, 1fr) on both the grid and the card, not a bare 1fr: a bare `1fr` is
   minmax(auto, 1fr) and so has a min-content floor, which is how the previous
   layout (a flex row with a nowrap title and a 46ch summary) grew wider than
   the viewport between 681px and 900px. That inflated the page, and the charts
   — responsive:true, sized to their container — stretched off-screen with it.
   A zero minimum means the cards can always shrink instead. */
.analysis-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.15rem 0.6rem;
  align-items: start; text-align: left; width: 100%;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 0.85rem 0.95rem 0.9rem;
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.analysis-card:hover { border-color: var(--accent); background: #fff; transform: translateY(-1px); }
.analysis-card:hover .t { color: var(--accent); }
.analysis-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.analysis-card:disabled { opacity: 0.45; cursor: not-allowed; }
.analysis-card:disabled:hover { border-color: var(--hairline); background: var(--card); transform: none; }
.analysis-card:disabled:hover .t { color: inherit; }

/* The mark sits on the title's optical baseline, not floating above it. */
.analysis-card .mark {
  grid-row: 1; grid-column: 1; width: 19px; height: 19px;
  color: var(--accent); opacity: 0.7; margin-top: 0.12rem;
}
.analysis-card .t {
  grid-row: 1; grid-column: 2;
  font-family: var(--serif); font-weight: 500; font-size: 1rem; line-height: 1.25;
  text-wrap: balance; overflow-wrap: anywhere; transition: color 0.15s;
}
/* Indented to the title's left edge, not spanning both columns: the mark then
   sits in its own margin and the title/description read as one block. */
.analysis-card .d {
  grid-row: 2; grid-column: 2;
  font-size: 0.79rem; color: var(--muted); line-height: 1.45; margin-top: 0.2rem;
}

/* ---------- Files ---------- */
.files {
  display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center;
  padding-top: 1.4rem; font-size: 0.78rem; color: var(--muted);
}
.file-pill {
  border: 1px solid var(--hairline); background: var(--card); border-radius: 7px;
  padding: 0.28rem 0.65rem; display: inline-flex; align-items: center; gap: 0.4rem;
}
.file-pill .ok { color: var(--good); font-weight: 700; }
.file-pill .busy { color: var(--accent); font-weight: 700; display: inline-block; animation: spin 1.6s linear infinite; }
.file-pill .bad { color: var(--bad); font-weight: 700; }
.file-pill .neutral { color: var(--muted); font-weight: 700; }

/* ---------- Ask bar ---------- */
.askbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--card); border-top: 1px solid var(--hairline); padding: 0.8rem 1.5rem;
}
.askbar-inner { max-width: 1080px; margin: 0 auto; display: flex; gap: 0.7rem; }
.askbar input {
  flex: 1; border: 1px solid var(--hairline); border-radius: 9px; padding: 0.7rem 1rem;
  font: inherit; font-size: 0.9rem; background: var(--paper); color: var(--ink); min-width: 0;
}
.askbar input::placeholder { color: var(--muted); font-style: italic; font-family: var(--serif); }
.askbar input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.askbar input:disabled { opacity: 0.65; }
.btn-ask {
  background: var(--accent); color: #fff; border: none; border-radius: 9px;
  padding: 0 1.3rem; font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer;
  white-space: nowrap;
}
.btn-ask:hover { background: #8C5209; }
.btn-ask:disabled { background: var(--muted); cursor: not-allowed; opacity: 0.7; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ==========================================================================
   APP ADDITIONS — same idiom, surfaces the static mock did not need
   ========================================================================== */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes shimmer { 0% { background-position: -240px 0; } 100% { background-position: 240px 0; } }

/* ---------- Sign-in ---------- */
.signin { max-width: 1080px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.signin-panel { max-width: 30rem; }
.signin h1 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.4rem);
  line-height: 1.14; letter-spacing: -0.015em; margin-bottom: 0.6rem; text-wrap: balance;
}
.signin p.lede { font-size: 0.98rem; color: var(--muted); margin-bottom: 1.4rem; max-width: 46ch; }
.signin-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.signin-form input {
  flex: 1 1 16rem; border: 1px solid var(--hairline); border-radius: 9px;
  padding: 0.7rem 1rem; font: inherit; font-size: 0.9rem; background: var(--card); color: var(--ink);
}
.signin-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.signin-note { font-size: 0.8rem; margin-top: 0.9rem; font-family: var(--serif); font-style: italic; }
.signin-note.ok { color: var(--good); }
.signin-note.err { color: var(--bad); }
.boot { max-width: 1080px; margin: 0 auto; padding: 3rem 1.5rem; color: var(--muted); font-family: var(--serif); font-style: italic; }

/* ---------- Connection dot + conversation controls ----------
   Dot only. The words appear for CONN_LABEL_MS on hover or tap — a permanent
   "conectat" is noise in a strip the user reads dozens of times a day, but the
   state still has to be recoverable on demand. */
.conn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; color: var(--muted);
  background: none; border: none; padding: 0 0 0 0.15rem; cursor: default;
  font-family: inherit; align-self: center;
}
.conn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.conn .conn-label { white-space: nowrap; }

.conn i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); display: inline-block; }
.conn.connected i { background: var(--good); }
.conn.stale i, .conn.reconnecting i { background: var(--accent); }
.conn.reconnecting i { animation: blink 1.2s ease-in-out infinite; }
/* Cold start: the VM is coming up. Distinct from "reconnecting" — nothing is
   wrong, it just takes about a minute, and the label says so. */
.conn.waking i { background: #B07D2B; animation: blink 1.2s ease-in-out infinite; }
.conn.disconnected i { background: var(--bad); }

/* Small ✕ affordance, used by file rows and member rows */
.btn-x {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 0.8rem; padding: 0.3rem 0.4rem; border-radius: 6px; line-height: 1;
}
.btn-x:hover { color: var(--bad); }
.pop-empty { padding: 0.7rem; font-size: 0.8rem; color: var(--muted); font-style: italic; font-family: var(--serif); }

/* ---------- Profile menu ---------- */
.profile-pop {
  position: absolute; top: 100%; z-index: 30; width: 190px;
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: 0 10px 28px rgba(38, 33, 25, 0.14); padding: 0.4rem;
}
.profile-opt {
  display: block; width: 100%; text-align: left; background: none; border: none;
  font: inherit; font-size: 0.82rem; cursor: pointer; padding: 0.45rem 0.6rem; border-radius: 7px;
}
.profile-opt:hover { background: var(--accent-soft); color: var(--accent); }

/* ---------- New company form ---------- */
.company-form { padding: 0.6rem 0.7rem 0.7rem; display: flex; flex-direction: column; gap: 0.55rem; }
.company-form label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.company-form input[type="text"] {
  width: 100%; border: 1px solid var(--hairline); border-radius: 7px;
  padding: 0.45rem 0.6rem; font: inherit; font-size: 0.85rem; background: var(--paper); color: var(--ink);
}
.company-form .checks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.company-form .checks label {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem;
  text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 500; cursor: pointer;
}
.company-form .actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.btn-solid {
  background: var(--ink); color: var(--paper); border: none; border-radius: 7px;
  padding: 0.4rem 0.9rem; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.btn-solid:hover { background: #3a3226; }
.btn-solid:disabled { opacity: 0.5; cursor: not-allowed; }
.form-err { font-size: 0.76rem; color: var(--bad); }

/* ---------- Notice ---------- */
.notice {
  max-width: 1080px; margin: 0 auto; padding: 0.55rem 1.5rem;
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.8rem; color: var(--bad); border-bottom: 1px solid var(--hairline);
  background: rgba(179, 54, 42, 0.05);
}
.notice button { margin-left: auto; }

/* ---------- Story / lead body ---------- */
.story-body.clamped {
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical;
  line-clamp: 7; overflow: hidden;
}
.article { animation: fade-rise 320ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.writing { font-family: var(--serif); font-style: italic; font-size: 0.82rem; color: var(--accent); }
.writing i { font-style: normal; animation: blink 1.1s ease-in-out infinite; }
.shim {
  display: block; border-radius: 4px; height: 0.8rem; margin-bottom: 0.5rem;
  background: linear-gradient(90deg, var(--hairline) 25%, var(--card) 50%, var(--hairline) 75%);
  background-size: 240px 100%; animation: shimmer 1.4s infinite;
}
.shim.title { height: 2.2rem; width: 70%; margin-bottom: 0.8rem; }
.shim.w88 { width: 88%; }
.shim.w64 { width: 64%; }
.rubric-sub { color: var(--muted); margin-top: 1.1rem; }
.quiet-italic { font-family: var(--serif); font-style: italic; }
.chart-box { position: relative; height: 260px; min-width: 0; }
.fig .chart-box { height: 150px; }

/* ---------- Markdown ---------- */
.md > *:first-child { margin-top: 0; }
.md > *:last-child { margin-bottom: 0; }
.md p { margin: 0 0 0.7em; }
.md h1, .md h2, .md h3, .md h4 {
  font-family: var(--serif); font-weight: 500; line-height: 1.2;
  margin: 1.2em 0 0.4em; letter-spacing: -0.01em;
}
.md h1 { font-size: 1.35em; }
.md h2 { font-size: 1.2em; }
.md h3 { font-size: 1.08em; }
.md h4 { font-size: 1em; }
.md ul, .md ol { margin: 0 0 0.7em; padding-left: 1.25em; }
.md li { margin-bottom: 0.2em; }
.md strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.md code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em;
  background: var(--accent-soft); border-radius: 4px; padding: 0.1em 0.32em;
}
.md pre {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 8px;
  padding: 0.7em 0.85em; overflow-x: auto; margin: 0 0 0.7em;
}
.md pre code { background: none; padding: 0; font-size: 0.85em; }
.md blockquote {
  border-left: 3px solid var(--accent-soft); padding-left: 0.8em;
  color: var(--muted); margin: 0 0 0.7em;
}
.md hr { border: none; border-top: 1px solid var(--hairline); margin: 1.1em 0; }
.md a { color: var(--blue); }
.md .table-scroll { overflow-x: auto; margin: 0 0 0.8em; }
.md table { border-collapse: collapse; font-size: 0.88em; font-variant-numeric: tabular-nums; min-width: 100%; }
.md th, .md td { border-bottom: 1px solid var(--hairline); padding: 0.35em 0.7em; text-align: left; }
.md th { font-weight: 700; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
.md td.r, .md th.r { text-align: right; }
.md td.c, .md th.c { text-align: center; }

/* ---------- Empty state ---------- */
.empty-lead { padding-bottom: 1.8rem; border-bottom: 1px solid var(--hairline); }
.empty-lead h1 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.5rem);
  line-height: 1.14; letter-spacing: -0.015em; margin-bottom: 0.6rem; text-wrap: balance;
}
.empty-lead p { color: var(--muted); max-width: 52ch; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* One column, source order — charts land between the title and the prose. */
  .lead-charts { float: none; width: auto; margin: 0 0 1.2rem; }
  .stories { grid-template-columns: 1fr; }
  .company-pop { left: 1.5rem; }
  .story-body.clamped { -webkit-line-clamp: 5; line-clamp: 5; }
  .analysis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .mast-top { padding: 0.7rem 1rem 0.5rem; gap: 0.5rem; }
  .masthead .right span.email { display: none; }
  .masthead .brand { font-size: 1.05rem; }
  .company-line { padding: 0 1rem 0.6rem; }

  /* Dropdowns stay ABSOLUTE here, unlike before. They used to become inline
     cards so they could not cover the headline — but the masthead is sticky
     now, and an inline card inside it would grow the fixed strip to fill the
     screen. Anchored under the header they cover content that scrolls anyway. */
  .company-pop { left: 1rem; right: 1rem; width: auto; }
  .profile-pop { width: min(190px, calc(100vw - 2rem)); }

  .wrap { padding: 1.3rem 1rem 7rem; }
  .analysis-grid { grid-template-columns: 1fr; }
  .modal-head, .modal-body { padding-left: 1rem; padding-right: 1rem; }
  /* Years become a horizontal strip: a fixed side column would eat a third of
     a phone screen for what is usually two or three entries. */
  .files-modal { grid-template-columns: 1fr; gap: 0.9rem; }
  .year-tabs {
    flex-direction: row; overflow-x: auto; position: static;
    border-bottom: 1px solid var(--hairline); padding-bottom: 0.3rem;
  }
  .year-tabs .year-tab { flex: 0 0 auto; border-left: none; border-bottom: 2px solid transparent; }
  .year-tabs .year-tab.current { border-left-color: transparent; border-bottom-color: var(--accent); }
  .askbar { padding: 0.65rem 1rem; }
  .signin { padding: 2rem 1rem 3rem; }
  .notice { padding: 0.55rem 1rem; }
}