/* One stylesheet for every page.
 *
 * The discipline, kept from FDI:
 *   · ONE signal colour. It means "this matters", and it is spent on two things only:
 *     severity, and the figures that demand an action. Everything else is greyscale.
 *     Severity is the weight of that one colour, not a second and third hue.
 *   · Monospace, tabular figures for every number, so a column of them lines up and a
 *     change between two loads is visible rather than a reflow.
 *   · Nothing decorative. A rule, a stripe or a tint is here because it separates two
 *     things that are different; if it does not, it is not here.
 *
 * Two layouts, written separately rather than one scaled into the other:
 *   380px  a single column, read standing up, before a call.
 *   1440px two columns — what is open on the left, what is arriving and the assistant
 *          on the right — because at that width a single column is a ribbon of white.
 *
 * Arabic is RTL. Everything is written in logical properties, so the same rules lay out
 * both ways; the few places that cannot be (the severity stripe, the timeline spine) use
 * inset-inline and are checked visually, not only by reading the direction attribute.
 */

/* ═══════════════════════════════ the faces ════════════════════════════════
 * IBM Plex, served from this machine. One superfamily drawn across all three things
 * this site sets: Latin text, Arabic text, and figures. That is the answer to "Arabic
 * set as carefully as the Latin" — not a fallback stack that lands on whatever the
 * reader's system happens to have, which is how an Arabic page ends up looking like a
 * mirrored English one.
 *
 * Self-hosted rather than fetched from a font CDN. "Everything local" is a rule about
 * the model and the record; it is also the right answer for a page an investor opens,
 * because a webfont request is a third party learning who read it and when.
 *
 * `font-display: swap` on purpose: this record is read for its figures, and a page that
 * withholds them for 300ms to avoid a reflow has the priority backwards.
 */
@font-face { font-family: "Plex"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Plex"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/static/fonts/plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "Plex"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/static/fonts/plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Plex"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/plex-sans-700.woff2") format("woff2"); }

/* The Arabic is its own family rather than a unicode-range on the Latin one, because it
   needs its own line height and its own size to sit level with Latin at 13px — see
   `--ar-adjust` below. */
@font-face { font-family: "PlexAr"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/plex-arabic-400.woff2") format("woff2"); }
@font-face { font-family: "PlexAr"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/static/fonts/plex-arabic-500.woff2") format("woff2"); }
@font-face { font-family: "PlexAr"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/static/fonts/plex-arabic-600.woff2") format("woff2"); }
@font-face { font-family: "PlexAr"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/plex-arabic-700.woff2") format("woff2"); }

@font-face { font-family: "PlexMono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "PlexMono"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/static/fonts/plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "PlexMono"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/static/fonts/plex-mono-600.woff2") format("woff2"); }

:root {
  /* The identity — plaster, kohl and terracotta — is docs/DESIGN.md; it changes these values only. */
  /* ── ink ─────────────────────────────────────────────────────────────────
     Four weights of one near-black, cooled very slightly, and nothing else. Every
     greyscale decision on this site is one of these four; a fifth would be a decision
     nobody could repeat. */
  --ink:        #16130f;   /* headings, figures that are not severity, the subject line */
  --ink-2:      #3d3833;   /* body text */
  --ink-3:      #6f6860;   /* labels, meta, the second sentence */
  --ink-4:      #a39b90;   /* a figure that is zero, a caveat, anything receding */

  --paper:      #f4f1ea;
  --card:       #fffdf8;
  --line:       #e4ddd1;   /* the one border */
  --line-2:     #eee8de;   /* a rule INSIDE a card, which is a quieter thing */

  /* The dark band. Its own four, for the same reason. */
  --band:       #13182a;
  --band-2:     #1c2338;
  --band-ink:   #f2efe8;
  --band-ink-2: #a7adbf;
  --band-ink-3: #6d7590;   /* the label under a figure: small and certain, never loud */
  --band-line:  #2a3149;

  /* ── the one signal colour ───────────────────────────────────────────────
     It means "this matters". It is spent on severity and on the figures that demand an
     action, and on nothing else — never on a heading, a border for decoration, or a
     chart series chosen because it needed a colour. Severity is two WEIGHTS of it, not
     two hues: full for critical, the amber for "worth knowing". */
  --signal:     #b23a1e;
  --signal-ink: #86290f;   /* the same colour, dark enough to read as text on its tint */
  --signal-mid: #a46d12;
  --signal-bg:  #f9e9e1;
  --signal-bg-2:#f7eedb;
  --good:       #22665a;   /* one green, and only for "this connector is up" */
  /* Borders, hovers and tints that were written inline, now tokens (docs/DESIGN.md). */
  --signal-line:   #e7bfae;
  --signal-line-2: #e4d3a9;
  --signal-mid-ink:#77500f;
  --signal-on-band:#f0a08a;
  --signal-on-band-2:#ffdccf;
  --good-bg:       #e8f2ee;
  --good-line:     #c6ddd5;
  --band-hover:    #3d4766;
  --button-hover:  #232a40;

  --mono: "PlexMono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Plex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --ar:   "PlexAr", "Plex", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;

  /* ── the type scale ──────────────────────────────────────────────────────
     Eight sizes for fifteen pages. Everything on this site is one of these; a size
     written inline somewhere is a size that will not repeat on the next page. */
  --t-display: 32px;  /* the band's figures */
  --t-h1:      25px;
  --t-lg:      16.5px; /* a card's subject */
  --t-md:      14.5px; /* body */
  --t-sm:      13.5px; /* the second sentence, a list row */
  --t-xs:      12.5px; /* meta, provenance, a form label */
  --t-2xs:     11.5px; /* a stamp, a hint */
  --t-micro:   10.5px; /* a tracked uppercase label, and nothing else */

  /* ── the spacing scale ───────────────────────────────────────────────────
     Powers of the same 4px step. Density is a decision made here, once, rather than
     eight times in eight files. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 22px; --s6: 32px; --s7: 44px;

  /* ── one card ────────────────────────────────────────────────────────────
     One radius, one border, one shadow, everywhere. The shadow is almost nothing on
     purpose: it lifts a card off the paper and does not announce itself. */
  --r:    10px;
  --r-sm: 6px;
  --shadow: 0 1px 2px rgba(11, 15, 20, .04);
  --gutter: 16px;

  /* Arabic sits smaller than Latin at the same point size. One number, applied on the
     RTL body, so 13px Arabic reads level with 13px Latin instead of a size smaller. */
  --ar-adjust: 1.04;
}

* { box-sizing: border-box; min-width: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--t-md)/1.55 var(--sans);
  font-feature-settings: "cv05" 1, "ss03" 1;   /* a single-storey l, a straighter g */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Arabic is not the Latin page with the direction flipped: it is its own face, a size
   step up so it reads level with Latin at the same nominal size, and a looser line —
   Arabic ascenders and descenders need the room that Latin does not. */
[dir="rtl"] body { font-family: var(--ar); font-size: calc(var(--t-md) * var(--ar-adjust)); line-height: 1.7; }
[dir="rtl"] .lede, [dir="rtl"] .context, [dir="rtl"] .turn, [dir="rtl"] .msg .body { line-height: 1.75; }
/* A Latin fragment or a figure inside an Arabic sentence keeps its own direction, so
   "«tomorrow» → 22 Aug" does not come apart in the middle of an Arabic line. */
[dir="rtl"] .num, [dir="rtl"] .stamp, [dir="rtl"] code, [dir="rtl"] .cite,
[dir="rtl"] .pagefoot, [dir="rtl"] .tick .who, [dir="rtl"] .msg .who { direction: ltr; unicode-bidi: isolate; }
/* A figure, a name or a citation sitting inside an Arabic sentence is isolated so the
   sentence closes around it instead of the number migrating to the end of the line.
   `isolate` rather than `embed`: the surrounding Arabic keeps its own direction. */
[dir="rtl"] .tick .who, [dir="rtl"] .msg .who { justify-content: flex-end; }

/* A pasted URL is one unbreakable word. Without this a link with no title pushed the
   whole page 66px wider than a 380px phone and gave it a sideways scroll. */
a { color: inherit; overflow-wrap: anywhere; }
.strip li .t, .context, .subject, .msg .body, .tick .body, .turn { overflow-wrap: anywhere; }
/* Every number on this site, in one rule: the mono face, tabular so a column lines up
   and a change between two loads is a change rather than a reflow, and slashed zero so
   0 and O are never each other in a reference number. */
.num, .stamp, .cite, code, .pagefoot, table.numbers td.num,
.fig b, .tile b, .stat b, .msg .who, .tick .who {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

/* ───────────────────────────────── the masthead ───────────────────────────── */

.masthead { background: var(--band); color: var(--band-ink); }
.masthead .wrap { display: flex; align-items: center; gap: var(--s3); padding-block: var(--s3); flex-wrap: wrap; }

/* A company's own name now, not a short fixed word: it wraps rather than pushing the page
   sideways at 380 px, and has no letter-spacing, which would pull an Arabic name apart. */
.wordmark { font-weight: 600; font-size: var(--t-sm); overflow-wrap: anywhere; min-width: 0; }
.wordmark em { font-style: normal; color: var(--band-ink-3); font-weight: 400; letter-spacing: .02em; }

/* Fifteen pages and a control cluster, as two groups. The links wrap (or scroll, on a
   phone) as one thing; the controls stay together at the end, so a second line is a
   second line of LINKS rather than the language buttons stranded under Innovation. */
nav { display: flex; gap: var(--s3); margin-inline-start: auto; flex-wrap: wrap;
      align-items: center; row-gap: var(--s2); justify-content: flex-end; flex: 1 1 auto; }
.nav-pages { display: flex; gap: 1px; align-items: center; flex-wrap: wrap;
             justify-content: flex-end; min-width: 0; }
/* A link never shrinks. Allowed to, they compressed into each other on the phone
   instead of scrolling, which is a word salad rather than a menu. */
.nav-pages > a { flex: 0 0 auto; }
.nav-controls { display: flex; gap: 2px; align-items: center; flex: 0 0 auto; }

/* On a phone the links are one line that scrolls sideways. Wrapped, they took five rows
   of Arabic and pushed the band below the fold — and the band is what the site is for. */
@media (max-width: 899px) {
  .masthead .wrap { padding-block: var(--s2); row-gap: var(--s2); }
  /* Two rows: the links, then the controls. On one row the English control cluster —
     three languages, Presentation, Sign out — took 300 of a 380px screen and left the
     navigation a sliver. */
  nav { gap: var(--s2); width: 100%; margin-inline-start: 0; flex-wrap: wrap; align-items: center; }
  .nav-pages {
    flex: 1 1 100%; min-width: 0; width: 100%;
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scrollbar-width: none; -ms-overflow-style: none;
    /* The scroll is a fade at the end rather than a bar: a scrollbar inside a dark
       masthead is a widget, and this is a hint. */
    mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
  }
  [dir="rtl"] .nav-pages { mask-image: linear-gradient(to left, #000 calc(100% - 18px), transparent); }
  .nav-pages::-webkit-scrollbar { display: none; }
  .nav-controls { margin-inline-start: auto; }
}
nav a {
  padding: 5px 9px; border-radius: var(--r-sm); font-size: var(--t-xs); text-decoration: none;
  color: var(--band-ink-2); white-space: nowrap; transition: color .12s ease, background .12s ease;
}
nav a:hover { background: var(--band-2); color: var(--band-ink); }
nav a[aria-current="page"] { background: var(--band-2); color: #fff; font-weight: 600; }

.chrome-btn {
  font: inherit; font-size: var(--t-2xs); padding: 4px 8px; border-radius: var(--r-sm); cursor: pointer;
  background: transparent; border: 1px solid var(--band-line); color: var(--band-ink-3);
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.chrome-btn:hover { color: #fff; border-color: var(--band-hover); }
.chrome-btn[aria-pressed="true"] { background: var(--band-ink); color: var(--band); border-color: var(--band-ink); font-weight: 600; }

/* `.chrome-btn` is drawn for the dark masthead — pale text on a transparent background.
   Anywhere else on the site it sits on white paper, so it takes the page's colours
   instead. Written once here rather than as an inline override on each page that used
   one, which is what a system is for. */
main .chrome-btn, .signin .chrome-btn {
  background: var(--card); border-color: var(--line); color: var(--ink-2); text-decoration: none;
}
main .chrome-btn:hover, .signin .chrome-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
main .chrome-btn[aria-pressed="true"], .signin .chrome-btn[aria-pressed="true"],
main .chrome-btn.on {
  background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600;
}
main .chrome-btn:disabled { opacity: .45; }
.langs { display: flex; gap: 2px; margin-inline-start: var(--s3); }

/* The two thinking pages: quieter than the daily ones, and still readable. An SVG mark
   plus the word — never a bare Unicode glyph, which is only as visible as the reader's
   font is complete. */
.aside-link {
  display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
  padding: 5px 8px; border-radius: var(--r-sm); font-size: var(--t-xs); color: var(--band-ink-3);
  border: 1px solid transparent; white-space: nowrap; transition: color .12s ease, background .12s ease;
}
.aside-link:hover { background: var(--band-2); color: var(--band-ink); }
.aside-link[aria-current="page"] { background: var(--band-2); color: #fff; font-weight: 600; }
.aside-link svg { flex: 0 0 auto; opacity: .85; }

/* ───────────────────────────── the position band ──────────────────────────── */
/* Readable in two seconds. Figures large and monospace, labels small. */

/* The band is the first thing either of us sees every morning, so it is the one place
   on this site that is allowed to be the loudest. Three decisions make it:
     · the figure that demands an action is the biggest thing on the screen;
     · a zero recedes — same size, quiet ink, lighter weight, because "0 critical" is
       good news and should not shout like bad news;
     · the label under each figure is small and certain: one size, tracked, never bold.
   Hairlines between the figures rather than a 1px grid of boxes: this is a row of
   readings on an instrument, not a table. */
.position { background: var(--band); color: var(--band-ink); }
.position .wrap { padding-block: var(--s4) var(--s3); }
/* Three across, so the three figures that ask for an action are one row and the three
   that describe the record are the row under them. At two across the grid cut the groups
   in half and the band stopped reading as two things. */
.figures {
  display: grid; column-gap: var(--s4); row-gap: var(--s4);
  grid-template-columns: repeat(3, 1fr);
}
/* Labels on one baseline whatever size the figure above them is: the column grows from
   the bottom, so a 32px action figure and a 21px context figure still read as one row. */
.fig { display: flex; flex-direction: column; gap: 4px; }
.fig span { margin-top: auto; padding-top: 4px; }
/* Inside the Achievements headline the figures sit in a box, which needs its own
   padding. In the position band they sit straight on the band and line up with the page
   gutter — the same component, two containers. */
#headline .fig { padding: var(--s3) var(--s4); }
/* ONE rule in the band, and it is the one that means something: everything before it
   asks for an action, everything after it is the record these are measured against. Only
   where the band is a single row — across two columns on a phone the same border lands
   in the middle of the grid, where it separates nothing. */
@media (min-width: 900px) {
  .position .fig.act + .fig:not(.act) {
    border-inline-start: 1px solid var(--band-line); padding-inline-start: var(--s5);
  }
}
.fig b {
  font-size: 26px; line-height: 1; font-weight: 500; letter-spacing: -.02em;
  color: var(--band-ink); font-variant-numeric: tabular-nums;
}
.fig span {
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--band-ink-3); font-weight: 500;
}
.fig.live b { color: var(--signal); font-weight: 600; }
/* Good news, set as good news. */
.fig.zero b { color: var(--band-ink-3); font-weight: 400; }
[dir="rtl"] .fig b { direction: ltr; text-align: right; }

/* The three figures that demand an ACTION are the band. The three that describe the
   record's size — days, messages, facts — are the context you read them against, and
   setting all six at one weight was the band saying that 115 facts is as urgent as 3
   things needing a decision. */
.position .fig.act b { font-size: var(--t-display); letter-spacing: -.03em; }
.position .fig:not(.act) b { font-size: 21px; color: var(--band-ink-2); font-weight: 400; }
.position .fig:not(.act) span { color: var(--band-ink-3); }

.position .foot {
  display: flex; gap: var(--s4); flex-wrap: wrap; align-items: center;
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--band-line);
  font-size: var(--t-xs); color: var(--band-ink-3);
}
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-inline-end: 6px; }
.dot.on { background: var(--good); } .dot.off { background: var(--signal); }
.position .foot b { color: var(--band-ink); font-weight: 500; }
.position .foot .bad { color: var(--signal-on-band); }

/* ────────────────────────────────── page ──────────────────────────────────── */

main { padding-block: var(--s5) var(--s7); }
.columns { display: block; }

/* Three things readable in order on every page: the title, then the section labels, then
   the items. The gap above a section is twice the gap below it, so a heading belongs to
   what follows it rather than floating between two groups. */
h1 { font-size: var(--t-h1); margin: 0 0 var(--s1); letter-spacing: -.022em; font-weight: 600; line-height: 1.15; }
.lede { color: var(--ink-3); font-size: var(--t-sm); margin: 0 0 var(--s5); max-width: 68ch; line-height: 1.6; }

h2.section {
  font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  margin: var(--s6) 0 var(--s3); font-weight: 600; display: flex; align-items: baseline; gap: var(--s2);
}
h2.section .count { color: var(--ink-4); letter-spacing: 0; font-family: var(--mono); }
h2.section .why { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--t-xs); color: var(--ink-4); }
h2.section:first-of-type { margin-top: var(--s2); }

.changed {
  background: var(--ink); color: #fff; border-radius: var(--r);
  padding: var(--s2) var(--s4); font-size: var(--t-sm); font-weight: 500; margin-bottom: var(--s3);
}
.changed.quiet { background: transparent; color: var(--ink-4); border: none; padding-inline: 0; font-weight: 400; }

/* A NOTE is not a card. It is the page talking about itself — what the record covers,
   what a figure excludes, what a zero means — and it reads as an aside: no shadow, a
   flat tint, and a hairline on the start edge that is the one place on this site an edge
   rule survives, because it is what tells a note from an item at a glance. */
.scope {
  border: none; border-inline-start: 2px solid var(--line);
  background: transparent; border-radius: 0;
  padding: var(--s1) var(--s4); font-size: var(--t-xs); color: var(--ink-3);
  margin-bottom: var(--s3); line-height: 1.65; max-width: 96ch;
}
.scope + .scope { margin-top: calc(var(--s3) * -1 + var(--s2)); }
.scope b { font-family: var(--mono); color: var(--ink); font-weight: 500; }
.scope .warn { display: block; margin-top: var(--s2); color: var(--signal-ink); }
.scope ul { margin: var(--s2) 0 0; padding-inline-start: 18px; }

/* ─────────────────────────────────── cards ────────────────────────────────── */

/* ONE card. One shape, one radius, one border, one shadow — on every page, for every
   kind of thing. Severity is carried by the colour of that one border, because a stripe
   down the edge is a second shape pretending to be information, and this way the whole
   object changes rather than a decoration on it. */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: var(--s4); margin-bottom: var(--s2);
}
.card.sev { border-color: var(--line); }
.card.critical { border-color: var(--signal-line); }
.card.critical .subject { color: var(--signal-ink); }
.card.warning  { border-color: var(--signal-line-2); }
.card.info     { border-color: var(--line); }

/* A grid, not a flex row: with flex the stamp dropped to its own line the moment the
   title wrapped to two, which put the date under the card instead of beside it. */
.card-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s4); align-items: baseline; margin-bottom: var(--s1); }
.subject { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.016em; line-height: 1.35; }
.context { color: var(--ink-2); font-size: var(--t-sm); margin-top: var(--s1); line-height: 1.55; }

.stamp {
  font-size: var(--t-2xs); color: var(--ink-4); white-space: nowrap;
  text-align: end; font-weight: 400;
}
.stamp .est { color: var(--ink-4); font-style: normal; font-family: var(--sans); font-size: var(--t-micro); }
.stamp.hot { color: var(--signal); font-weight: 600; }

.tags { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: center; margin-top: var(--s3); }
.tag {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px; white-space: nowrap; line-height: 1.4;
  background: var(--line-2); color: var(--ink-3);
}
.tag.critical { background: var(--signal-bg); color: var(--signal-ink); }
.tag.warning  { background: var(--signal-bg-2); color: var(--signal-mid); }
.tag.who { background: transparent; border: 1px solid var(--line); color: var(--ink-2); text-transform: none; letter-spacing: .01em; font-weight: 500; }
.tag.num { font-family: var(--mono); letter-spacing: 0; text-transform: none; }
/* A reading that is true but is in no total: the direction of money that has not moved
   yet. Full strength beside "quoted, not spent" it reads as a contradiction. */
.tag.quiet { background: transparent; border: 1px dashed var(--line); color: var(--ink-4); }

/* The line that says something failed. Inside the dark position band, full width, and
   present only when there IS something — a band that is there every day is a band
   nobody reads. */
#trouble {
  max-width: var(--wrap); margin: 0 auto; padding: 8px 16px 10px;
  font-size: 13px; line-height: 1.5; color: var(--signal-on-band-2);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
}
#trouble .trouble { display: contents; }
#trouble b { color: var(--signal); font-weight: 700; }
#trouble a { color: #fff; text-decoration: underline; white-space: nowrap; }

/* The week/month picker on Achievements. The range is written out in full beside the
   arrows, because "← Earlier" with no dates is a button nobody presses twice. */
.ach-picker { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 0 0 16px; }
.ach-tabs, .ach-step { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ach-step b { font-family: var(--mono); font-size: 13px; letter-spacing: -.01em; }
.ach-step .est { color: var(--ink-4); font-size: 12px; }
#headline .figures {
  border-radius: var(--r); overflow: hidden; margin: var(--s2) 0 var(--s4);
  background: var(--band); border: 1px solid var(--band); padding: var(--s2);
  column-gap: 0; row-gap: 0;
}
/* The band's own colours, spelled out: these figures sit in the page body and not inside
   .position, so nothing above them was setting the ink. Dark numbers on a dark band read
   as an empty box. */
#headline .figures .fig { background: transparent; color: var(--band-ink); }
#headline .figures .fig + .fig { border-inline-start: 1px solid var(--band-line); }
#headline .figures .fig b { color: var(--band-ink); }
#headline .figures .fig span { color: var(--band-ink-2); }
#headline .figures .fig.zero b { color: var(--band-ink-2); }
/* A zero the record cannot support. Marked rather than dimmed away: the reader has to
   connect the figure to the sentence under it that says why. */
#headline .figures .fig.blind b i { font-style: normal; color: var(--signal); font-size: 17px;
  vertical-align: super; margin-inline-start: 2px; }
@media (max-width: 719px) { #headline .figures { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 419px) { .figures { column-gap: var(--s3); } .fig span { letter-spacing: .07em; } }
@media (min-width: 720px) { #headline .figures { grid-template-columns: repeat(5, 1fr); } }

/* who put it there, and what happened to it */
.provenance {
  margin-top: 8px; font-size: 11.5px; color: var(--ink-3);
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.provenance .sep { color: var(--ink-4); }
/* "« bkra » — from a message of 21 Aug". A sentence, so it wraps and never sets the
   card's width: min-width:0 is what lets a flex item shrink below its content. */
.provenance .anchor { color: var(--ink-4); font-style: italic; min-width: 0; overflow-wrap: anywhere; }

/* Done / Not relevant / Reopen / private */
.actions { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-2);
           display: flex; gap: var(--s1); flex-wrap: wrap; }
button.act {
  font: inherit; font-size: var(--t-xs); font-weight: 500; padding: 5px 11px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
button.act:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
button.act.quiet { color: var(--ink-4); font-weight: 500; }
/* Delete is not close. It carries the signal colour on hover only — visible enough to
   find, quiet enough that it is not the first thing the eye lands on. */
button.act.danger { color: var(--ink-4); font-weight: 500; }
button.act.danger:hover:not(:disabled) { background: var(--signal); border-color: var(--signal); color: #fff; }
button.act:disabled { opacity: .5; cursor: default; }

/* Correcting a card in place, and adding one by hand.
   Both are forms inside a card, so they inherit the card's width and wrap at 380 the way
   everything else does — a fixed two-column grid here was the one thing that put a
   sideways scroll back on the phone. */
.editor, .adder {
  margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); display: flex; flex-direction: column; gap: 7px;
}
.editor[hidden], .adder[hidden] { display: none; }
.ed-row, .adder label {
  display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-3);
  flex-wrap: wrap;
}
.ed-row > span, .adder label > span { flex: 0 0 84px; font-weight: 600; }
.ed-row input, .adder input, .adder select {
  flex: 1 1 140px; min-width: 0; font: inherit; font-size: 13px; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink);
}
.ed-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 3px; }
.ed-note { font-size: 11.5px; color: var(--signal); }
.ed-history { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
.ed-history summary { cursor: pointer; }
.ed-history ul { margin: 5px 0 0; padding-inline-start: 16px; }
.adder .hint { font-size: 11.5px; color: var(--ink-4); margin: 2px 0 0; }
.add-here { margin: 12px 0; }

/* The Orders box. Wider than the assistant's, because an order is one long line rather
   than a conversation. */
.orderbox {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: var(--s4); margin-bottom: var(--s4);
}
.orderbox textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 6px; resize: vertical; background: var(--paper);
  color: var(--ink);
}
ul.examples { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 5px; }
ul.examples code {
  font-family: var(--mono); font-size: 12px; background: var(--card); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; display: block;
  overflow-wrap: anywhere;
}

/* What the brain asked about this card. Set apart, because it is the record talking
   about its own doubt rather than about the company. */
/* The record talking about its own doubt. A note, so it takes the note's start rule. */
.asked {
  margin-top: var(--s3); padding: var(--s3) var(--s4);
  border-inline-start: 2px solid var(--signal-mid);
  background: var(--signal-bg-2); border-radius: var(--r-sm);
  font-size: var(--t-xs); color: var(--ink-3); line-height: 1.6;
}
.asked .q { color: var(--ink-2); font-weight: 500; }

.card.closed { opacity: .78; }
.card.closed .subject { text-decoration: line-through; text-decoration-color: var(--ink-4); }
.card.is-private { border-inline-start-style: dashed; }

/* Presentation mode: impossible to forget it is on. */
.presenting-flag {
  background: var(--signal); color: #fff; text-align: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; padding: 5px 12px;
}
.presenting-flag[hidden] { display: none; }
body.is-presenting .masthead { box-shadow: inset 0 -2px 0 var(--signal); }

/* the message behind a card */
details.src { margin-top: var(--s3); border-top: 1px solid var(--line-2); padding-top: var(--s3); }
details.src > summary { font-size: var(--t-2xs); }

.msg { margin-top: 8px; background: var(--paper); border-radius: 6px; padding: 9px 11px; font-size: 13px; }
.msg + .msg { margin-top: 6px; }
.msg .who { font-size: 11px; color: var(--ink-3); margin-bottom: 4px; font-family: var(--mono); }
.msg .body { white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
.msg .note { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; font-style: italic; }
.none { font-size: 12px; color: var(--ink-4); font-style: italic; }

/* ──────────────────────────── empty, on purpose ───────────────────────────── */

/* "Nothing needs you right now" is an achievement, not a page that failed to load. So
   it is not a dashed box — a dashed border is the universal sign for a slot with
   something missing from it. It is a solid card with a lot of air in it, the statement
   set at the size of a heading, and the sentence under it kept quiet. */
.empty {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  box-shadow: var(--shadow);
  padding: var(--s6) var(--s5); text-align: center; color: var(--ink-3); font-size: var(--t-sm);
  line-height: 1.6;
}
.empty b {
  display: block; color: var(--ink); font-size: var(--t-lg); font-weight: 600;
  letter-spacing: -.016em; margin-bottom: var(--s2);
}
.empty .hint { font-size: var(--t-xs); color: var(--ink-4); margin-top: var(--s2); }
/* A dash, drawn rather than typed, because a checkmark would claim more than "there is
   nothing here" and an emoji would claim a mood. */
.empty::before {
  content: ""; display: block; width: 20px; height: 1px; background: var(--line);
  margin: 0 auto var(--s4);
}

/* ── the weekly interview ───────────────────────────────────────────────────
   The dimension tally is NOT a `.bar-row`: that layout's third column is a figure of
   two or three characters, and this one is a whole sentence ("4 asked · 0 refused · 0
   answered"). At 380 it pushed the page 29px sideways in English and 32px in French and
   not in Arabic — which was not Arabic being fine, only Arabic being shorter. The tally
   goes UNDER the bar instead of beside it, and the whole row wraps. */
.iv-dim { margin-bottom: var(--s3); }
.iv-dim .top { display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap; }
.iv-dim .name { flex: 1 1 130px; min-width: 0; color: var(--ink-2); font-size: var(--t-sm);
                overflow-wrap: anywhere; }
.iv-dim .bar-track { flex: 1 1 90px; min-width: 60px; }
.iv-dim .tally { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3);
                 letter-spacing: -.01em; }
/* A dimension's label is a phrase and not a word — "The gap between what we decided and
   what happened" is 376px of nowrap tag inside a 314px card, which is what pushed the
   page 29px sideways at 380 in English and 32px in French. Uppercase tracking on a whole
   sentence was wrong anyway; this one is set as the phrase it is. */
.tag.iv-dim-tag {
  white-space: normal; text-transform: none; letter-spacing: .01em;
  font-size: var(--t-2xs); font-weight: 500; overflow-wrap: anywhere;
}
/* What a guard matched, and the pattern it matched with. A regex is not a word and will
   not break on one. */
.iv-guard .sub { overflow-wrap: anywhere; word-break: break-word; }

/* ════════════════════════ the small shared pieces ═════════════════════════
 * These exist so that no page has to write a size, a colour or a gap of its own. Every
 * inline `style=` that used to be scattered through the fifteen pages is one of these
 * now — which is the difference between a stylesheet and a convention: a new page built
 * out of these cannot come out off-style, and one built out of inline rules always will.
 */

/* The line under a heading that says how a figure was counted, or what it excludes. It
   is fine print and it is set as fine print — never the same weight as the thing it is
   explaining. */
.fineprint { font-size: var(--t-2xs); color: var(--ink-4); line-height: 1.6; margin: var(--s2) 0 0; }
.fineprint b { font-family: var(--mono); font-weight: 500; color: var(--ink-3); }

/* A word used as a label above something — the only place a size is named rather than
   described, because that IS what these are for. */
.kicker { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase;
          color: var(--ink-4); font-weight: 600; }
.t-md { font-size: var(--t-md); }
.strong { font-weight: 600; }

/* Small grey text beside something: a timestamp, a count, a qualifier. */
.meta { font-size: var(--t-xs); color: var(--ink-3); overflow-wrap: anywhere; }   /* an address (a bucket, a host) is one long word */
.meta.dim { color: var(--ink-4); }
.meta.hot { color: var(--signal); }

/* A list of rows INSIDE a card: a figure or a name, then the thing, then the meta and
   the citations. One primitive, used by Finance's recurring costs, Achievements' threads
   and every list on Reading. */
ul.rows { margin: var(--s2) 0 0; padding: 0; list-style: none; }
ul.rows > li {
  display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap;
  padding: var(--s2) 0; border-top: 1px solid var(--line-2); font-size: var(--t-sm);
}
ul.rows > li:first-child { border-top: none; padding-top: 0; }
ul.rows .lead { flex: 0 0 auto; min-width: 104px; font-weight: 500; }
ul.rows .lead.wide { min-width: 150px; }
ul.rows .fill { flex: 1 1 200px; color: var(--ink-2); }
ul.rows .trail { flex: 0 0 auto; margin-inline-start: auto; color: var(--ink-4); font-size: var(--t-xs); }
ul.rows .why-row { flex: 1 1 100%; color: var(--signal-ink); font-size: var(--t-xs); }
ul.rows .sub { flex: 1 1 100%; color: var(--ink-3); font-size: var(--t-xs); line-height: 1.55; }

/* What a folded document is made of, under the one line it became. A quiet block inside
   a card, so it reads as part of the line rather than as a second one. */
.breakdown { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-2); }
.breakdown .label {
  font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
}
.breakdown ul.rows > li { border-top: none; padding: 2px 0; }

/* The note's start rule carries severity when the note is about something that matters.
   The same one colour, and only ever these two weights of it. */
.scope.is-signal { border-inline-start-color: var(--signal); }
.scope.is-mid    { border-inline-start-color: var(--signal-mid); }

/* Every collapsible on this site opens the same way: a caret we draw, never the
   browser's black triangle, which is a different shape in every engine. */
details > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-xs); color: var(--ink-3);
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: ""; width: 0; height: 0; flex: 0 0 auto;
  border-inline-start: 4px solid var(--ink-4); border-block: 3.5px solid transparent;
  transition: transform .12s ease;
}
[dir="rtl"] details > summary::before { transform: scaleX(-1); }
details[open] > summary::before { transform: rotate(90deg); }
[dir="rtl"] details[open] > summary::before { transform: scaleX(-1) rotate(-90deg); }
details > summary:hover { color: var(--ink); }

/* ───────────────────────────────── timeline ───────────────────────────────── */

.month { margin-bottom: var(--s6); }
.month > h3 {
  font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 var(--s3); font-weight: 600;
  display: flex; align-items: center; gap: var(--s3);
}
.month > h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.month > h3 .count { font-family: var(--mono); color: var(--ink-4); letter-spacing: 0; }

.spine { list-style: none; margin: 0; padding: 0; position: relative; }
.spine::before {
  content: ""; position: absolute; inset-block: 18px 18px; inset-inline-start: 5px;
  width: 1px; background: var(--line);
}
.spine > li { position: relative; padding-inline-start: 26px; margin-bottom: var(--s2); }
/* The node on the spine is the one place a dot earns its keep: it is what makes a list
   of decisions read as a sequence. Hollow for an ordinary one, ringed where the same
   decision was recorded twice, filled where it reverses an earlier one. */
.spine > li::before {
  content: ""; position: absolute; inset-inline-start: 1px; top: 19px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--card);
  border: 1.5px solid var(--ink-4);
}
.spine > li.merged::before { border-color: var(--signal-mid); }
.spine > li.reversal::before { background: var(--signal); border-color: var(--signal); }

.why {
  margin-top: var(--s3); padding: var(--s3) var(--s4); background: var(--paper); border-radius: var(--r-sm);
  font-size: var(--t-sm); color: var(--ink); line-height: 1.55;
}
.why b { display: block; font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase;
         color: var(--ink-4); margin-bottom: var(--s1); font-weight: 600; }
.nowhy { margin-top: var(--s3); font-size: var(--t-xs); color: var(--ink-4); }

/* What came before this, or what else is on this day. It hangs off the item it belongs
   to, so it is set as a quiet list rather than a second card — it had no style at all
   until 2026-09-25 and inherited the body's 14.5px, which put it at the same weight as
   the thing it is subordinate to. */
.after { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-2); }
.after > b {
  display: block; font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600; margin-bottom: var(--s2);
}
.after ul { margin: 0; padding-inline-start: 0; list-style: none; }
.after li {
  font-size: var(--t-xs); color: var(--ink-3); line-height: 1.55; padding: 3px 0;
  padding-inline-start: var(--s3); position: relative;
}
.after li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 11px;
  width: 4px; height: 1px; background: var(--ink-4);
}

/* ─────────────────────────── the live activity rail ───────────────────────── */

.rail { margin-top: 30px; }
.rail-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; flex-wrap: wrap;
}
.rail-head h2 { margin: 0; font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.rail-head .when { font-family: var(--mono); font-size: 11px; color: var(--ink-4); margin-inline-start: auto; }
.rail-head .when.stale { color: var(--signal); font-weight: 600; }

.feed { max-height: none; overflow: visible; }
.tick { border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
        box-shadow: var(--shadow); padding: var(--s3) var(--s4); margin-bottom: var(--s2); }
/* Something ARRIVING should be noticeable. One fade, no movement: a card that slid or
   bounced would be decoration, and this is a record of what came in. */
.tick.fresh { animation: settle 1.6s ease-out; }
@keyframes settle { from { background: var(--signal-bg); } to { background: var(--card); } }
.tick .who { font-size: var(--t-2xs); color: var(--ink-4); display: flex; gap: var(--s2); flex-wrap: wrap; }
.tick .who .ch { color: var(--ink-4); }
.tick .body { font-size: 13px; margin-top: 4px; line-height: 1.45; word-break: break-word; }
.tick .read { margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--line-2); font-size: 12px; color: var(--ink-2); }
.tick .read i { font-style: normal; color: var(--ink-3); font-family: var(--mono); font-size: 10.5px;
                text-transform: uppercase; letter-spacing: .05em; margin-inline-end: 5px; }
.tick .pending { font-size: 11.5px; color: var(--ink-4); font-style: italic; margin-top: 6px; }

/* ───────────────────────────────── assistant ──────────────────────────────── */

.assistant { border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
             box-shadow: var(--shadow); overflow: hidden; }
.assistant header { display: flex; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); flex-wrap: wrap; align-items: center; }
.assistant header .t { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.boxes { display: flex; gap: 4px; margin-inline-start: auto; }
.box-btn {
  font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
}
.box-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.assistant .log { padding: 12px; display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.convos { border-bottom: 1px solid var(--line); padding: 8px 12px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.convos .t { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; }
button.convo {
  font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
button.convo[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
button.convo.new { border-style: dashed; color: var(--ink-3); }
.assistant .log:empty { display: none; }
.turn { font-size: 13.5px; line-height: 1.5; }
.turn.user { color: var(--ink-2); border-inline-start: 2px solid var(--line); padding-inline-start: 9px; }
.turn.bot { background: var(--paper); border-radius: 6px; padding: 10px 11px; white-space: pre-wrap; word-break: break-word; }
.turn.bot.refused { background: var(--signal-bg); color: var(--signal-ink); }
.turn.bot .meta { margin-top: 8px; font-size: 11px; color: var(--ink-3); font-family: var(--mono); display: flex; gap: 8px; flex-wrap: wrap; }
.cite {
  font: inherit; font-family: var(--mono); font-size: var(--t-2xs); cursor: pointer;
  background: var(--line-2); border: 1px solid transparent; border-radius: 4px;
  padding: 1px 6px; color: var(--ink-3); transition: background .12s ease, color .12s ease;
}
.cite:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.assistant form { display: flex; gap: 7px; padding: 10px 12px; border-top: 1px solid var(--line); align-items: flex-end; }
.assistant textarea { min-height: 42px; max-height: 140px; resize: vertical; }

/* ───────────────────────────────── controls ───────────────────────────────── */

label { display: block; font-size: var(--t-xs); font-weight: 600; margin-bottom: var(--s2); color: var(--ink-2); }
input[type=email], input[type=password], input[type=file], textarea, select {
  width: 100%; padding: 10px 12px; font: inherit; font-size: var(--t-md); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
  transition: border-color .12s ease;
}
input:hover, textarea:hover, select:hover { border-color: var(--ink-4); }
/* A select was the one control that ignored the system: the browser drew it at its own
   height, with its own arrow, beside inputs drawn at ours. The caret is the same
   triangle every <details> on this site uses. */
select {
  appearance: none; -webkit-appearance: none;
  padding-inline-end: 30px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-4) 50%),
                    linear-gradient(135deg, var(--ink-4) 50%, transparent 50%);
  background-position: right 13px center, right 8px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
[dir="rtl"] select { background-position: left 13px center, left 8px center; }
input[type="date"] { font-family: var(--mono); font-size: var(--t-sm); }
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus, button:focus-visible, .cite:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 1px;
}
button {
  font: inherit; font-size: var(--t-sm); font-weight: 600; padding: 10px 18px; border-radius: var(--r-sm);
  border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
button:hover:not(:disabled) { background: var(--button-hover); border-color: var(--button-hover); }
button.quiet { background: var(--card); color: var(--ink); border-color: var(--line); font-weight: 500; }
button:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

.note { font-size: var(--t-sm); padding: var(--s3) var(--s4); border-radius: var(--r-sm);
        margin-top: var(--s3); border: 1px solid var(--line); line-height: 1.6; }
.note.ok  { background: var(--good-bg); border-color: var(--good-line); color: var(--good); }
.note.bad { background: var(--signal-bg); border-color: var(--signal-line); color: var(--signal-ink); }
.note.warn{ background: var(--signal-bg-2); border-color: var(--signal-line-2); color: var(--signal-mid-ink); }
.note ul { margin: 6px 0 0; padding-inline-start: 17px; }

/* a message opened from a citation */
dialog.sheet {
  border: none; border-radius: var(--r); padding: 0; max-width: 640px; width: calc(100% - 32px);
  box-shadow: 0 24px 60px rgba(6, 10, 16, .22), 0 2px 6px rgba(6, 10, 16, .08);
}
dialog.sheet::backdrop { background: rgba(8, 12, 18, .45); }
dialog.sheet header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
dialog.sheet header b { font-size: 14px; }
dialog.sheet .inner { padding: 14px; max-height: 70vh; overflow-y: auto; }
dialog.sheet .x { margin-inline-start: auto; background: none; border: none; color: var(--ink-3); font-size: 20px; padding: 0 4px; cursor: pointer; }

/* ──────────────────────────────── charts ──────────────────────────────────── */
/* Two series is EMPHASIS, not categorical: the signal colour on the series that is the
   point, the de-emphasis grey on the one it is measured against. Identity never rests
   on colour alone — there is a legend, both series are directly labelled on the most
   recent month, and the numbers are one click away in a table. */

.grid.kpi { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 8px; }
@media (min-width: 700px) { .grid.kpi { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .grid.kpi { grid-template-columns: repeat(6, 1fr); } }

.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: var(--s4); display: flex; flex-direction: column; gap: 3px; cursor: help;
}
.tile b { font-size: 25px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); }
.tile b.none { color: var(--ink-4); font-size: var(--t-md); font-weight: 400; }
.tile span { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; }
.tile .n { font-family: var(--mono); text-transform: none; letter-spacing: 0; color: var(--ink-4); }
[dir="rtl"] .tile b { direction: ltr; text-align: right; }

svg.chart { width: 100%; height: auto; display: block; }
svg.chart .tick { font-family: var(--mono); font-size: 10px; fill: var(--ink-4); }
svg.chart .cap { font-family: var(--mono); font-size: 11px; font-weight: 600; fill: var(--ink-2); }
svg.chart g:hover rect[fill="transparent"] { fill: var(--line-2); }

.legend { display: flex; gap: 14px; margin-bottom: 8px; font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
            margin-inline-end: 5px; vertical-align: -1px; }

.bars { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 150px) 1fr auto; gap: 10px;
           align-items: center; font-size: 13px; }
.bar-label { color: var(--ink-2); }
.bar-track { background: var(--line-2); border-radius: 3px; height: 10px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 0 3px 3px 0; background: var(--ink-3); }
.bar-fill.bad { background: var(--signal); }
[dir="rtl"] .bar-fill { border-radius: 4px 0 0 4px; }
.bar-value { color: var(--ink); font-weight: 600; min-width: 2ch; text-align: end; }

table.numbers { width: 100%; border-collapse: collapse; font-size: 13px; }
table.numbers th { text-align: start; font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
                   color: var(--ink-4); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); font-weight: 600; }
table.numbers td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-2); }
table.numbers td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: end; }

/* ─────────────────────────────── calendar ─────────────────────────────────── */

.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line);
            border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 16px; }
.calendar .dow { background: var(--paper); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
                 color: var(--ink-4); padding: var(--s2) var(--s1); text-align: center; font-weight: 600; }
.calendar .day { background: var(--card); min-height: 74px; padding: 5px; display: flex;
                 flex-direction: column; gap: 3px; }
.calendar .day.out { background: var(--paper); }
.calendar .day .n { font-size: 11px; color: var(--ink-4); font-family: var(--mono); }
.calendar .day.today { background: var(--signal-bg); }
.calendar .day.today .n { color: var(--signal); font-weight: 700; }
.pip {
  font: inherit; font-family: var(--sans); font-size: var(--t-micro); text-align: start; cursor: pointer;
  width: 100%; border: none; border-radius: 4px; padding: 2px 6px; background: var(--ink); color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500;
}
.pip.off { background: var(--line); color: var(--ink-3); text-decoration: line-through; }
.pip:hover { background: var(--signal); }

.week { display: grid; gap: 6px; margin-bottom: 16px; }
.wday { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
        box-shadow: var(--shadow); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s1); }
.wday.today { border-color: var(--signal); }
.wday .h { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.wday .h .num { color: var(--ink-4); font-size: 11.5px; }

.cal-bar { margin-bottom: var(--s3); }
.cal-label { margin-inline-start: auto; font-size: 13px; color: var(--ink-3); font-weight: 600; }
/* A dated fact is not a meeting and does not pretend to be one: no time, so it is drawn
   as an outline rather than a solid block. */
.pip.fact { background: transparent; border: 1px solid var(--ink-4); color: var(--ink-2); }
.pip.fact:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
/* Upcoming, grouped by the week each entry falls in. */
.cal-week { margin-bottom: 18px; }
.cal-week > h3 {
  font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 var(--s3); display: flex; gap: var(--s2); align-items: baseline; font-weight: 600;
}
.cal-week > h3 .count { font-family: var(--mono); color: var(--ink-4); font-size: 11px; }
#more-row { margin: 4px 0 18px; }
#more-row .hint { font-size: 12px; color: var(--ink-4); margin: 0; }

@media (min-width: 900px) { .week { grid-template-columns: repeat(7, 1fr); } .calendar .day { min-height: 100px; } }
@media (max-width: 559px) { .calendar .day { min-height: 52px; padding: 3px; } .pip { font-size: 9px; padding: 1px 3px; } }

/* ────────────────────────── clients and products ──────────────────────────── */

.grid { display: grid; gap: var(--s2); grid-template-columns: 1fr; }
/* The same card. Severity in the border, never a stripe. */
.entity {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: var(--s4);
}
.entity.quiet  { border-color: var(--signal-line-2); }
.entity.silent { border-color: var(--signal-line); }
.entity > header { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s1); row-gap: var(--s1); }
.entity > header h3 { margin: 0; font-size: var(--t-lg); letter-spacing: -.016em; font-weight: 600; }
.entity .stat-row { display: flex; gap: var(--s5); flex-wrap: wrap; margin: var(--s3) 0 0; padding: var(--s3) 0 0; border-top: 1px solid var(--line-2); }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font-size: 19px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; }
.stat b.live { color: var(--signal); font-weight: 600; }
.stat b.none { color: var(--ink-4); font-weight: 400; }
.stat span { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; }
[dir="rtl"] .stat b { direction: ltr; text-align: right; }

.strip { margin-top: 12px; }
.strip h4 {
  margin: 0 0 var(--s2); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 600;
}
.strip ul { margin: 0; padding: 0; list-style: none; }
.strip li { font-size: 13px; padding: 5px 0; border-top: 1px solid var(--line-2); color: var(--ink-2); display: flex; gap: 9px; }
.strip li:first-child { border-top: none; }
.strip li .d { font-family: var(--mono); font-size: 11px; color: var(--ink-4); white-space: nowrap; flex: 0 0 auto; }
.strip li .t { flex: 1 1 auto; }
.strip .none { padding: 5px 0; display: block; }

.thread { margin-top: 12px; }

/* ──────────────────────────────── sign-in ─────────────────────────────────── */

.signin { max-width: 400px; margin: 14vh auto 0; }
.signin .card { padding: var(--s6) var(--s5); }
.signin h1 { margin: 0 0 var(--s1); letter-spacing: .18em; font-size: var(--t-lg); font-weight: 600; }

.pagefoot {
  margin-top: var(--s7); padding-top: var(--s3); border-top: 1px solid var(--line);
  font-size: var(--t-2xs); color: var(--ink-4); font-family: var(--mono);
  display: flex; gap: var(--s4); flex-wrap: wrap;
}

/* ───────────────────────────── 380px and up ───────────────────────────────── */

@media (min-width: 560px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
}

@media (min-width: 900px) {
  :root { --gutter: 28px; }
  .figures { grid-template-columns: repeat(6, 1fr); }
  main { padding-block: var(--s6) 80px; }

  /* Two columns: what is open on the left, what is arriving and the assistant on the
     right. At this width one column is a ribbon of white down the middle of the screen. */
  .columns { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .95fr); gap: 26px; align-items: start; }
  .columns > aside { position: sticky; top: 16px; }
  .rail { margin-top: 0; }
  .rail .feed { max-height: calc(100vh - 430px); min-height: 180px; overflow-y: auto; padding-inline-end: 2px; }
  .assistant { margin-bottom: 18px; }
  .assistant .log { max-height: 300px; }
}

@media (min-width: 1200px) {
  :root { --t-display: 38px; --t-h1: 27px; }
}

/* Motion is one fade, on the one thing that ARRIVES. Everything else on this site is
   already there when the page loads, and animating it would be decoration. */
@media (prefers-reduced-motion: reduce) {
  .tick.fresh { animation: none; }
  * { transition: none !important; }
}

/* ───────────────────────── the organisation's pages ─────────────────────────
   The same paper, ink and single signal colour as every brain page; nothing new but
   the shapes a form and a two-sided finding need. Logical properties throughout, so
   Arabic mirrors without a second stylesheet. */
.synthetic-flag {
  background: var(--band); color: var(--band-ink); text-align: center; font-size: var(--t-xs, 12px);
  padding: 6px var(--gutter, 16px); font-weight: 600;
}
.org-section { margin-block: var(--s6, 32px) 0; }
.org-section h2 { font-size: var(--t-md, 17px); margin: 0 0 var(--s3, 12px); color: var(--ink); }
.org-body > .card, .org-body > .org-form { margin-bottom: var(--s3, 12px); }
.org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s3, 12px); }
.org-form {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--s2, 8px) var(--s3, 12px);
  align-items: end; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: var(--s3, 12px);
}
.org-form.wide { grid-template-columns: 1fr; }
.org-form > button, .org-form > div { grid-column: 1 / -1; justify-self: start; }
.org-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm, 14px); color: var(--ink-3); min-width: 0; }
.org-field input, .org-field select, .org-field textarea {
  font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: 7px 9px; min-width: 0; width: 100%; box-sizing: border-box;
}
.org-check { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; font-size: var(--t-sm, 14px); color: var(--ink-2); }
.org-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm, 14px); margin-top: var(--s2, 8px); }
.org-table th { text-align: start; color: var(--ink-3); font-weight: 500; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.org-table td { padding: 6px 4px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); overflow-wrap: anywhere; }
.org-table td.num { font-family: var(--mono); text-align: end; }
.org-figs { grid-template-columns: repeat(3, 1fr); margin: var(--s2, 8px) 0; }
.org-figs .fig b { color: var(--ink); }
.finding-sides { display: grid; grid-template-columns: 1fr; gap: var(--s2, 8px); margin-top: var(--s2, 8px); }
.finding-sides .side { background: var(--paper); border-radius: 6px; padding: 8px 10px; overflow-wrap: anywhere; }
.finding-sides .vs { color: var(--signal); font-weight: 700; justify-self: center; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: var(--s2, 8px); margin-top: var(--s2, 8px); }
.kpi { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-xs, 12px); color: var(--ink-3); }
.kpi b { font-size: var(--t-md, 17px); color: var(--ink); }
.org-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; background: var(--paper); padding: 8px; border-radius: 6px; margin: 6px 0; }
.late { color: var(--signal); }
.card.is-coming { opacity: .7; }
.org-link { font-weight: 600; }
@media (min-width: 900px) {
  .finding-sides { grid-template-columns: 1fr auto 1fr; align-items: center; }
}

/* A card an assistant's answer linked to (org.js jumpToCite). */
.card.cited { outline: 2px solid var(--ink); outline-offset: 2px; }
.cite-id { font-family: var(--mono, monospace); font-size: 12px; color: var(--ink-3); margin-inline-end: 8px; }

/* ── The guided tour (overnight Phase 5): a panel at the bottom, and one outlined thing. ── */
.tour-panel { position: fixed; inset-inline: 16px; bottom: 16px; z-index: 50; max-width: 560px; margin-inline: auto;
  background: var(--card); color: var(--ink-2); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(11, 15, 20, .18); padding: 16px 18px; }
.tour-panel h2 { margin: 6px 0 6px; font-size: 17px; color: var(--ink); }
.tour-panel p { margin: 0 0 10px; line-height: 1.5; }
.tour-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.tour-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tour-guard { border-inline-start: 3px solid var(--line); padding: 6px 10px; margin: 0 0 10px; font-size: 14px; }
.tour-guard .r.refused { color: var(--signal-ink); font-weight: 600; }
.tour-guard .r.passed { color: var(--ink-3); }
.tour-spot { outline: 3px solid var(--signal); outline-offset: 4px; border-radius: 6px; }
body.touring main { padding-bottom: 260px; }
.tour-start { max-width: 640px; padding-top: 48px; }

/* "Show the other n" under a long group on Today (page review, 2026-10-01). */
.more-btn { display: block; margin: 4px 0 18px; }

/* The calendar's event form (added by hand): fields side by side where there is room. */
.ev-form { margin-block: 12px 20px; }
.ev-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ev-row > .org-field { flex: 1 1 140px; min-width: 0; }
.ev-form textarea { width: 100%; }

/* infoTip(): a small "i" that explains a figure in plain words, on hover, keyboard focus or a tap. */
.info-tip { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-inline: 4px;
  padding: 0; border-radius: 50%; border: 1px solid var(--rule, #ccc); background: transparent; color: inherit;
  font: italic 600 11px/1 Georgia, "Times New Roman", serif; cursor: help; vertical-align: middle; }
.info-tip::after { content: attr(data-tip); position: absolute; z-index: 30; inset-block-end: calc(100% + 6px); inset-inline-start: 50%;
  translate: -50% 0; width: max-content; max-width: min(260px, 80vw); padding: 8px 10px; border-radius: 8px;
  background: var(--ink, #222); color: var(--paper, #fff); font: 400 12.5px/1.4 var(--sans, system-ui, sans-serif);
  text-align: start; white-space: normal; opacity: 0; pointer-events: none; transition: opacity .15s; }
[dir="rtl"] .info-tip::after { translate: 50% 0; }
.info-tip:hover::after, .info-tip:focus-visible::after, .info-tip:focus::after { opacity: 1; }

/* Vision access: one card per department, each site's cameras as checkboxes. */
.vi-site { margin-block: 8px; }
.vi-cams { display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* Sales: one bar per day, hour or item; numbers at the end of each row. */
.bars { display: grid; gap: 4px; margin-block: 8px 16px; }
.bar-row { display: grid; grid-template-columns: minmax(70px, 22%) 1fr auto; gap: 8px; align-items: center; }
.bar { height: 10px; background: var(--rule, #e5e1d8); border-radius: 5px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ink, #222); }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.grid-table { border-collapse: collapse; font-size: 13px; }
.grid-table th, .grid-table td { padding: 4px 8px; border-bottom: 1px solid var(--rule, #ddd); text-align: start; white-space: nowrap; }
.grid-table .dim { opacity: .45; }

/* The morning brief, first on Today (V1 Phase 3.3). */
.brief-card { margin-block: 8px 16px; }
.brief-text { white-space: pre-line; line-height: 1.55; }

/* Requests for an account (the integrator's System page, go live). */
.rq-card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 12px;
  display: grid; gap: 6px; }
.rq-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.rq-status { font-size: var(--t-xs); padding: 2px 8px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); }
.rq-status.rq-pending, .rq-status.rq-provisioning { background: var(--signal-bg-2, #f7eedb); color: var(--ink); }
.rq-status.rq-failed { background: var(--signal-bg); color: var(--signal-ink); }
.rq-status.rq-approved { background: #e3efe9; color: var(--good); }
.rq-watch { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rq-link { overflow-wrap: anywhere; margin: 0; }
.su-steps { padding-inline-start: 20px; margin: 0 0 16px; }
.su-steps li { margin-block: 4px; }
.su-secret { font-size: var(--t-md, 16px); letter-spacing: .04em; overflow-wrap: anywhere; }

/* The owner's set-up (go live). */
.ob-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 16px; }
.ob-chip { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink-2); text-decoration: none; font-size: var(--t-sm, 14px); }
.ob-chip span { font-family: var(--mono, monospace); color: var(--ink-3); }
.ob-chip.on { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.ob-chip.done { background: #e3efe9; }
.ob-chip.skipped { color: var(--ink-3); }
.ob-card { padding: 16px; }
.ob-card h2 { margin-top: 0; }
.ob-days { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ob-days legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.ob-check { display: inline-flex; gap: 6px; align-items: center; }
.ob-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.ob-two { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 12px 0; }
.ob-box { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 12px 0; background: var(--card); }
.ob-box.quiet { background: var(--line-2); }
.ob-box h3 { margin-top: 0; }
.ob-depts { display: grid; gap: 10px; }
.ob-dept { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; }
.ob-dept.made { background: var(--line-2); }
.ob-foot { margin-top: 16px; }
.ob-brief { white-space: pre-wrap; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px; overflow-wrap: anywhere; }
.pm-policy { margin: 12px 0; }
.pm-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.pm-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--card); display: grid; gap: 6px; }
.pm-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-move { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pm-move select { width: auto; max-width: 100%; }
.welcome h1 { letter-spacing: normal; }
.welcome h2 { font-size: var(--t-md, 16px); margin: 18px 0 6px; }
.wl-list { padding-inline-start: 20px; margin: 0; }
.wl-list li { margin-block: 6px; }

/* A client's cameras (go live): the request, the plan, each camera's state. */
.vi-request { display: grid; gap: 10px; }
.vi-request label { display: grid; gap: 4px; font-weight: 600; }
.vi-plan .card-top { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; }
.vi-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }