/* Interface v3.5 — OSTEN.
   Every colour of the interface lives here, never in Python, never inline.
   The mother brand is achromatic: Ink, Slate, Rule, Steel and Bone build the
   whole chassis. Only three states and one vertical hue are allowed to be a
   colour, and each of them means something.

   Type — the body is 17px and no rendered text is below 14px. Archivo for the
   interface, IBM Plex Mono for anything measured, Source Serif 4 for long
   documents. If it is a number, it is monospaced and tabular.

   Contrast — measured, not assumed. Ratios of each text colour against the
   four grounds it can land on:

                        Ink       Slate     panel-2   panel-3
                        #0B0D0F   #14171B   #191D22   #1F242A
     Bone    #EDEAE3     16.2      15.0      14.1      13.0
     ink-2   #B9C0C8     10.6       9.8       9.2       8.5
     Steel   #9AA3AD      7.6       7.0       6.6       6.1
     accent  #6E8CFF      6.4       5.9       5.5       5.1
     Pass    #4FA96B      6.7       6.2       5.8       5.4
     Watch   #D4A03C      8.2       7.6       7.2       6.6
     Fail    #D95F4C      5.3       4.9       4.6       4.2

   This table describes the historical charter, not the final cascade.
   The effective two-theme palette below is checked by check_readability.py.
   September 13: secondary text and status hues adjusted for readable contrast. */

:root {
  /* OSTEN — the mother brand is achromatic. Ink, Slate, Rule, Steel, Bone and
     nothing else builds the chassis. Three interface states own the only
     colours that mean something, and the vertical blue carries interaction.
     A green on an Osten screen means "it passed", never "it is pretty". */

  --bg:        #0B0D0F;   /* Ink   — the ground, always */
  --bg-deep:   #07080A;
  --panel:     #171B21;   /* Slate — cards, tables, blocks */
  --panel-2:   #1D2229;
  --panel-3:   #242A32;
  --line:      #2C333B;   /* Rule  — one pixel, never a shadow */
  --line-2:    #3B434D;
  --ink:       #F2EFE9;   /* Bone  — main text and the sign. Never #FFF */
  --ink-2:     #C7CDD5;
  --ink-3:     #A6AFBA;   /* Steel — secondary text, 7:1 on Ink */

  /* Interaction. Osten Agency — the vertical this installation runs. */
  --accent:    #6E8CFF;
  --accent-2:  #4A6BE8;
  --accent-ink:#0A1024;

  /* Interface states — separate from the brand, non-negotiable. */
  --pass:      #4FA96B;
  --watch:     #D4A03C;
  --fail:      #D95F4C;
  --amber:     #D4A03C;
  --red:       #D95F4C;
  --blue:      #6E8CFF;

  /* Vertical hues. Decoration may borrow these; it may never borrow a state. */
  --v-agency:  #6E8CFF;
  --v-export:  #38B2A3;
  --v-industry:#C77D3A;
  --v-legal:   #A98BE0;
  --violet:    #A98BE0;
  --teal:      #38B2A3;

  /* Corners are almost square. Past 4px an interface reads as consumer SaaS. */
  --r-lg: 2px;
  --r-md: 2px;
  --r-sm: 2px;

  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --rail: 252px;
  --banner: 96px;         /* the Osten bar, measured once and reused */
  --shadow: none;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, .mono { font-family: var(--mono); font-size: 14px; }
/* A scale wide enough to be read at a glance. Three levels within four points
   of each other is not a hierarchy, it is one level printed three times. */
h1 { font-size: 34px; font-weight: 650; letter-spacing: -0.025em; margin: 0;
     line-height: 1.15; }
h2 { font-size: 22px; font-weight: 620; letter-spacing: -0.015em; margin: 0;
     line-height: 1.25; }
h3 { font-size: 16px; font-weight: 600; margin: 0; }
p  { margin: 0 0 12px; }

.fine  { color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.dim   { color: var(--ink-2); }
.cut   { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline{ display: inline; }

/* ---------- shell ---------- */

.shell { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }

.rail {
  background: var(--bg-deep);
  border-right: 1px solid var(--line);
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.mark { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.mark:hover { text-decoration: none; }
.mark-glyph {
  width: 28px; height: 28px; border-radius: 2px; flex: none;
  background: linear-gradient(150deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 0 0 1px rgba(110,140,255,.25), 0 6px 16px -8px rgba(110,140,255,.7);
}
.mark-name { color: var(--ink); font-weight: 650; font-size: 17px; letter-spacing: -0.01em; }
.mark-sub  { display: block; color: var(--ink-3); font-size: 14px; letter-spacing: .06em;
             text-transform: uppercase; font-weight: 600; }

.rail-group { display: flex; flex-direction: column; gap: 2px; }
.rail-label {
  color: var(--ink-3); font-size: 14px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; padding: 0 8px 8px;
}
.rail-link {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 8px; border-radius: var(--r-md);
  color: var(--ink-2); border: 1px solid transparent;
}
.rail-link:hover { background: var(--panel); color: var(--ink); text-decoration: none; }
.rail-link.on {
  background: var(--panel-2); color: var(--ink); border-color: var(--line-2);
}
.rail-link.on .rail-icon { color: var(--accent); }
.rail-icon { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--ink-3); }
.rail-icon svg { width: 100%; height: 100%; display: block; }
.rail-text { display: flex; flex-direction: column; line-height: 1.3; }
.rail-text b { font-weight: 570; font-size: 15px; }
.rail-text span { color: var(--ink-3); font-size: 14px; }

.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.who {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel);
}
.who-avatar {
  width: 30px; height: 30px; border-radius: 2px; flex: none;
  background: var(--panel-3); border: 1px solid var(--line-2);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; color: var(--ink-2); letter-spacing: .04em;
}
.who-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.who-id b { font-size: 14.5px; font-weight: 570; overflow: hidden; text-overflow: ellipsis; }
.who-id span { color: var(--ink-3); font-size: 14px; text-transform: uppercase; letter-spacing: .07em; }
.rail-note { color: var(--ink-3); font-size: 14px; padding: 0 4px; }

/* ---------- page ---------- */

/* v3.4, chapter 1 — measured defect. This rule capped the width and never
   centred what it capped, so every pixel past the cap piled up on one side and
   the page sat against the rail with a dead band on the right. The cap is
   right; `margin-inline` is what was missing. */
.page { padding: 34px 40px 64px; max-width: 1360px; width: 100%;
        margin-inline: auto; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between;
             gap: 24px; margin-bottom: 30px; padding-bottom: 22px; flex-wrap: wrap;
             border-bottom: 1px solid var(--line); }
.page-head .lede { color: var(--ink-2); font-size: 17px; line-height: 1.6;
                   margin: 10px 0 0; max-width: 64ch; }

.banner {
  border-radius: var(--r-md); padding: 11px 14px; margin: 0 0 18px;
  font-size: 15px; border: 1px solid var(--line-2); background: var(--panel);
}
.banner-ok    { border-color: rgba(110,140,255,.35); background: rgba(110,140,255,.07); color: #C9D6FF; }
.banner-warn  { border-color: rgba(212,160,60,.35); background: rgba(212,160,60,.07); color: #E6C88A; }
.banner-error { border-color: rgba(217,95,76,.35); background: rgba(217,95,76,.08); color: #EFB3A8; }

.empty {
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  padding: 40px; text-align: center; color: var(--ink-3); background: var(--panel);
}

/* ---------- buttons ---------- */

button, .button {
  font: inherit; font-size: 15px; font-weight: 570;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 8px 14px; cursor: pointer; display: inline-block;
}
button:hover, .button:hover { background: #8FB89F; text-decoration: none; }
.ghost {
  font: inherit; font-size: 15px; font-weight: 520;
  background: var(--panel-2); color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 8px 14px; cursor: pointer; display: inline-block;
}
.ghost:hover { background: var(--panel-3); color: var(--ink); text-decoration: none; }
.danger { background: transparent; color: var(--red); border-color: rgba(217,95,76,.45); }
.danger:hover { background: rgba(217,95,76,.12); }

input[type=text], input[type=password], input[type=search], input[type=date],
select, textarea {
  font: inherit; font-size: 15px;
  background: var(--bg-deep); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 8px 10px; width: 100%;
}
textarea { font-family: var(--sans); resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(110,140,255,.12);
}
label { display: block; font-size: 14px; font-weight: 640; letter-spacing: .08em;
        text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }

/* ---------- budget meter ---------- */

.meter-card {
  border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-lg);
  padding: 16px 18px; min-width: 300px; box-shadow: var(--shadow);
}
.meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.meter-top b { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.meter-label { font-size: 14px; font-weight: 700; letter-spacing: .1em;
               text-transform: uppercase; color: var(--ink-3); }

.meter-fill  { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.meter-fill.hot { background: linear-gradient(90deg, #B08034, var(--amber)); }
.meter-fill.full{ background: linear-gradient(90deg, #A8483A, var(--red)); }

/* ---------- agent cards ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }

.card {
  border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-lg);
  padding: 20px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--shadow); transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--line-2); transform: translateY(-1px); }

.card-head { display: flex; align-items: flex-start; gap: 14px; }
.card-head h2 { line-height: 1.2; }
.card-head .job { color: var(--ink-2); font-size: 14.5px; margin: 2px 0 0; }
.card-head .grow { flex: 1; min-width: 0; }
.short { color: var(--ink-2); font-size: 15px; margin: 0; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
         border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
         padding: 14px 0; }
.stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stat-k { font-size: 14px; font-weight: 700; letter-spacing: .1em;
          text-transform: uppercase; color: var(--ink-3); }
.stat-v { font-size: 19px; font-weight: 620; letter-spacing: -0.01em; color: var(--ink); }
.stat-v.mono { font-size: 14.5px; font-weight: 550; }
.stat-v a { color: var(--ink); }
.stat-v.quiet { color: var(--ink-3); font-weight: 500; }

.last {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px 12px;
}
.last .grow { flex: 1; min-width: 0; }
.last-title { display: block; font-size: 15px; font-weight: 550; color: var(--ink);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.last-title:hover { color: var(--accent); }
.file-glyph { width: 26px; height: 26px; flex: none; color: var(--ink-3); }
.file-glyph svg { width: 100%; height: 100%; display: block; }

.card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.card-foot .button { flex: 1; text-align: center; }

/* ---------- agent icons ---------- */

.ai { flex: none; display: block; border-radius: 2px; }
.ai svg { display: block; width: 100%; height: 100%; }
.ai-bg    { fill: var(--ai-bg, var(--panel-3)); }
.ai-line  { fill: none; stroke: var(--ai-ink, var(--accent)); stroke-width: 2.4;
            stroke-linecap: round; stroke-linejoin: round; }
.ai-fill  { fill: var(--ai-ink, var(--accent)); }
.ai-soft  { fill: var(--ai-ink, var(--accent)); opacity: .32; }

.ai-green  { --ai-ink: #6E8CFF; --ai-bg: #151A22; }
.ai-teal   { --ai-ink: #38B2A3; --ai-bg: #141821; }
.ai-amber  { --ai-ink: #D4A03C; --ai-bg: #221C0E; }
.ai-blue   { --ai-ink: #6E8CFF; --ai-bg: #111524; }
.ai-violet { --ai-ink: #A98BE0; --ai-bg: #191428; }
.ai-slate  { --ai-ink: #9AA3AD; --ai-bg: #191D22; }

/* ---------- pills ---------- */

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 2px;
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink-2);
  white-space: nowrap;
}
.tag::before { content: ""; width: 5px; height: 5px; border-radius: 2px; background: currentColor; }
.tag-mode::before { display: none; }
.tag-pending  { color: var(--amber); border-color: rgba(212,160,60,.35); background: rgba(212,160,60,.09); }
.tag-approved { color: var(--accent); border-color: rgba(110,140,255,.35); background: rgba(110,140,255,.09); }
.tag-rejected,
.tag-failed   { color: var(--red); border-color: rgba(217,95,76,.35); background: rgba(217,95,76,.09); }
.tag-running  { color: var(--blue); border-color: rgba(110,140,255,.35); background: rgba(110,140,255,.09); }
.tag-done     { color: var(--accent); border-color: rgba(110,140,255,.35); background: rgba(110,140,255,.09); }
.tag-mode     { color: var(--ink-3); }

/* ---------- panels, tables, forms ---------- */

.panel {
  border: 1px solid var(--line); background: var(--panel);
  border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow);
}
.panel + .panel { margin-top: 18px; }
.panel-head { display: flex; align-items: center; justify-content: space-between;
              gap: 16px; margin-bottom: 14px; }

.filters {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  border: 1px solid var(--line); background: var(--panel);
  border-radius: var(--r-lg); padding: 16px; margin-bottom: 18px;
}
.filters .field { display: flex; flex-direction: column; min-width: 150px; flex: 1 1 150px; }
.filters .field-wide { flex: 2 1 240px; }
.filters .actions { display: flex; gap: 8px; }

.grid { width: 100%; border-collapse: collapse; font-size: 15px; }
.grid th {
  text-align: left; font-size: 14px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 0 12px 10px; border-bottom: 1px solid var(--line-2);
}
.grid td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.grid tbody tr:hover { background: var(--panel-2); }
.grid .fine { display: block; }
.grid.mono td { font-family: var(--mono); font-size: 14px; }

.table-wrap { overflow-x: auto; }
.count { color: var(--ink-3); font-size: 14px; margin-top: 12px; }

/* ---------- approvals ---------- */

.queue-item {
  border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-lg);
  padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.queue-head { display: flex; align-items: flex-start; justify-content: space-between;
              gap: 16px; margin-bottom: 12px; }
.queue-meta { color: var(--ink-3); font-size: 14px; margin: 4px 0 0;
              display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.queue-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px;
                 padding-top: 14px; border-top: 1px solid var(--line); }
.reject { display: flex; gap: 8px; flex: 1 1 320px; min-width: min(260px, 100%); flex-wrap: wrap; }
.reject input { flex: 1; }

.preview { border: 1px solid var(--line); border-radius: var(--r-md);
           background: var(--bg-deep); }
.preview > summary {
  cursor: pointer; padding: 10px 14px; font-size: 14px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  list-style: none;
}
.preview > summary::-webkit-details-marker { display: none; }
.preview > summary::before { content: "▸ "; color: var(--ink-3); }
.preview[open] > summary::before { content: "▾ "; }
.preview[open] > summary { border-bottom: 1px solid var(--line); }
.preview .markdown, .preview .answer { padding: 4px 16px 14px; margin: 0; }

/* ---------- reading ---------- */

/* A document sits on a sheet. On a dark interface a long text laid straight on
   the page ground reads as terminal output; the panel gives it edges, and the
   edges are what tell the eye where the document starts and stops. */
.doc { background: var(--panel); border: 1px solid var(--line);
       border-radius: var(--r-lg); padding: 40px 44px; margin: 0 0 26px; }
@media (max-width: 700px) { .doc { padding: 24px 20px; } }

/* A document is read, not scanned like a form. Three things make that possible
   and none of them were here: a measure (a line of 120 characters is re-read,
   not read), a serif at a size meant for prose, and heading steps wide enough
   to be seen without comparing. The serif was declared in the variables and
   never used.

   The measure is applied to the text elements, never to the container, so a
   table or a code block still takes the full width it needs. */

.markdown { font-family: var(--serif); font-size: 18.5px; line-height: 1.75;
            color: var(--ink-2); overflow-wrap: break-word; }
.markdown > *:first-child { margin-top: 0; }

.markdown p, .markdown li, .markdown blockquote { max-width: 72ch; }
.markdown ul, .markdown ol { margin: 14px 0; padding-left: 22px; }
.markdown li { margin: 6px 0; }
.markdown p { margin: 0 0 18px; }

/* 30 / 23 / 15-uppercase. Each step is visible on its own, which is what makes
   a page skimmable — the eye finds the level without reading the words. */
.markdown h1 { font-family: var(--sans); font-size: 32px; font-weight: 640;
               color: var(--ink); letter-spacing: -0.02em; line-height: 1.2;
               max-width: 40ch; margin: 42px 0 16px; }
.markdown h2 { font-family: var(--sans); font-size: 26px; font-weight: 620;
               color: var(--ink); letter-spacing: -0.015em; line-height: 1.25; max-width: 44ch;
               margin: 40px 0 14px; padding-top: 20px;
               border-top: 1px solid var(--line); }
.markdown h3 { font-family: var(--sans); font-size: 15px; font-weight: 700;
               text-transform: uppercase; letter-spacing: .1em;
               color: var(--ink-3); max-width: 60ch; margin: 28px 0 10px; }
.markdown h1:first-child, .markdown h2:first-child { margin-top: 0; }
.markdown h2:first-child { border-top: none; padding-top: 0; }

/* The opening paragraph carries the eye into the page. */
.markdown > p:first-of-type { font-size: 19.5px; color: var(--ink);
                              line-height: 1.65; }

.markdown strong { font-weight: 650; color: var(--ink); }
.markdown hr { border: none; border-top: 1px solid var(--line); margin: 34px 0; }

.markdown table { border-collapse: collapse; width: 100%; margin: 22px 0;
                  font-family: var(--sans); font-size: 15px; line-height: 1.5; }
.markdown th, .markdown td { border: 1px solid var(--line-2); padding: 9px 12px;
                             text-align: left; vertical-align: top; }
.markdown th { background: var(--panel-2); color: var(--ink-2); font-weight: 620;
               font-size: 14px; letter-spacing: .03em; text-transform: uppercase; }
.markdown pre { background: var(--bg-deep); border: 1px solid var(--line);
                border-radius: var(--r-md); padding: 14px; overflow-x: auto;
                margin: 22px 0; }
.markdown code { background: var(--panel-3); border-radius: 2px; padding: 1px 5px;
                 font-size: 15px; }
.markdown pre code { background: none; padding: 0; font-size: 14px; }
.markdown blockquote { border-left: 2px solid var(--accent-2); margin: 22px 0;
                       padding: 4px 0 4px 18px; color: var(--ink-2);
                       font-style: normal; }

.answer, .quote {
  background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px; white-space: pre-wrap; overflow-x: auto;
  font-family: var(--mono); font-size: 14px; line-height: 1.6; color: var(--ink);
}
.quote { color: var(--ink-2); }
/* v5 — the waiting indicator moves, so a run in progress cannot be mistaken
   for a frozen screen. Three dots, staggered, and still when the reader has
   asked the system for less motion. */
.waiting { color: var(--ink-2); font-size: 15px; }
.waiting-dots { display: inline-flex; gap: .18em; margin-left: .3em;
                vertical-align: middle; }
.waiting-dots i { width: .3em; height: .3em; border-radius: 50%;
                  background: currentColor; opacity: .25;
                  animation: osten-dot 1.2s ease-in-out infinite; }
.waiting-dots i:nth-child(2) { animation-delay: .18s; }
.waiting-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes osten-dot {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-.2em); }
}
@media (prefers-reduced-motion: reduce) {
  .waiting-dots i { animation: none; opacity: .6; }
}

.detail-head { display: flex; align-items: flex-start; justify-content: space-between;
               gap: 20px; margin-bottom: 26px; padding-bottom: 20px;
               border-bottom: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
         color: var(--ink-3); font-size: 14px; margin: 6px 0 0; }
.chip { background: var(--panel-2); border: 1px solid var(--line);
        border-radius: var(--r-sm); padding: 2px 8px; font-size: 14px; }

/* Eyebrow, title, measurements. Four identical chips under a title give the eye
   nothing to land on: the agent that produced a file and the path it sits at are
   not the same kind of fact and should not look alike. */
.eyebrow { font-family: var(--sans); font-size: 14px; font-weight: 700;
           letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
           margin: 0 0 8px; }
.meta-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
            font-family: var(--mono); font-size: 14px; color: var(--ink-3);
            margin: 10px 0 0; }
.meta-row .sep { color: var(--line-2); }

.can { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.can li { position: relative; padding-left: 20px; color: var(--ink-2); font-size: 15px; }
.can li::before { content: ""; position: absolute; left: 4px; top: 9px;
                  width: 6px; height: 6px; border-radius: 2px; background: var(--accent-2); }

.ask { display: grid; gap: 12px; }
.ask .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.principles { list-style: none; margin: 0; padding: 0;
              display: flex; flex-wrap: wrap; gap: 8px; }
.principles li {
  font-family: var(--mono); font-size: 14px; color: var(--ink-3);
  border: 1px solid var(--line); background: var(--panel);
  border-radius: 2px; padding: 3px 11px;
}

/* ---------- gate ---------- */

body.gate { display: grid; place-items: center; min-height: 100vh;
            background: radial-gradient(1000px 600px at 50% -10%, #14171B 0%, var(--bg) 60%); }
.gate-box {
  width: 380px; max-width: calc(100vw - 32px);
  border: 1px solid var(--line-2); background: var(--panel);
  border-radius: var(--r-lg); padding: 28px; box-shadow: 0 30px 60px -30px #000;
  display: grid; gap: 16px;
}
.gate-box form { display: grid; gap: 12px; }
.gate-box .code { font-family: var(--mono); font-size: 42px; font-weight: 700;
                  color: var(--ink-3); margin: 0; }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: column; }
  .page { padding: 24px 18px 48px; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* ---------- onboarding block ---------- */

.onboard { padding: 12px 0 40px; max-width: 1000px; }
.display {
  font-size: clamp(30px, 4.4vw, 46px); font-weight: 640; letter-spacing: -0.035em;
  line-height: 1.1; margin: 0 0 18px;
  background: linear-gradient(180deg, var(--ink) 0%, #9AA3AD 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.display-lede { font-size: 19px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 16px; margin-top: 34px; }
.step { border: 1px solid var(--line); background: var(--panel);
        border-radius: var(--r-lg); padding: 20px; }
.step-n {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 2px;
  background: var(--panel-3); border: 1px solid var(--line-2);
  color: var(--accent); font-size: 14px; font-weight: 700; margin-bottom: 12px;
}
.step h3 { font-size: 17px; margin-bottom: 6px; }
.step p { color: var(--ink-2); font-size: 15px; margin: 0; }

/* ---------- headline numbers ---------- */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: 16px; margin-bottom: 44px; }
.kpi {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--line); background: var(--panel); border-radius: var(--r-lg);
  padding: 18px 20px; color: var(--ink); box-shadow: var(--shadow);
}
a.kpi:hover { border-color: var(--line-2); text-decoration: none; background: var(--panel-2); }
.kpi-k { font-size: 14px; font-weight: 700; letter-spacing: .11em;
         text-transform: uppercase; color: var(--ink-3); }
.kpi-v { font-size: 36px; font-weight: 640; letter-spacing: -0.035em; line-height: 1.1; }
.kpi-of { font-size: 20px; color: var(--ink-3); font-weight: 500; }
.kpi-note { font-size: 14px; color: var(--ink-3); }

/* ---------- bands ---------- */

.band { margin-bottom: 44px; }
.band-head { display: flex; align-items: flex-end; justify-content: space-between;
             gap: 20px; margin-bottom: 16px; padding-bottom: 12px;
             border-bottom: 1px solid var(--line); }
.band-head h2 { font-size: 22px; letter-spacing: -0.02em; }
.card-watch { background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 60%); }
.stats-2 { grid-template-columns: repeat(2, 1fr); }
.face { border-radius: 2px; object-fit: cover; flex: none;
        border: 1px solid var(--line-2); background: var(--panel-3); display: block; }

/* ---------- layout helpers ---------- */

.split { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; align-items: start;
         margin-bottom: 18px; }
.split > .panel + .panel { margin-top: 0; }
.split-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
           gap: 16px; margin-bottom: 18px; }
.split-3 > .panel + .panel { margin-top: 0; }
.role-card h2 { text-transform: capitalize; margin-bottom: 8px; color: var(--accent); }

/* ---------- charts ---------- */


.chart-bar { flex: 1; height: 100%; display: flex; align-items: flex-end;
             background: linear-gradient(180deg, transparent 60%, var(--panel-2) 100%);
             border-radius: 2px; }
.chart-bar-fill { display: block; width: 100%; min-height: 2px; border-radius: 2px;
                  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%); }
.chart-bar-fill.zero { background: var(--line-2); }
.chart-axis { display: flex; gap: 6px; margin-top: 8px; }
.chart-axis span { flex: 1; text-align: center; font-size: 14px; color: var(--ink-3);
                   font-family: var(--mono); }

.hbars { display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: 130px 1fr 48px; gap: 12px; align-items: center; }
.hbar-name { font-size: 14.5px; color: var(--ink-2); overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 10px; border-radius: 2px; background: var(--panel-3); overflow: hidden; }
.hbar-fill { display: block; height: 100%; border-radius: 2px;
             background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.hbar-value { font-size: 14.5px; font-weight: 620; text-align: right; }

.donut-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.donut { position: relative; flex: none; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 12; }
.donut-track { stroke: var(--panel-3); }
.donut-arc { stroke-linecap: butt; }
.donut-pending  { stroke: var(--amber); }
.donut-approved { stroke: var(--accent); }
.donut-rejected { stroke: var(--red); }
.donut-hole { position: absolute; inset: 0; display: grid; place-content: center;
              text-align: center; line-height: 1.1; }
.donut-hole b { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; }
.donut-hole span { font-size: 14px; color: var(--ink-3); text-transform: uppercase;
                   letter-spacing: .1em; }

.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.legend li { display: flex; align-items: center; gap: 9px; font-size: 15px;
             color: var(--ink-2); }
.legend b { margin-left: auto; color: var(--ink); font-weight: 620; }
.dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.dot-pending { background: var(--amber); }
.dot-approved { background: var(--accent); }
.dot-rejected { background: var(--red); }

.tally { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tally li { display: flex; align-items: center; justify-content: space-between;
            padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px;
            color: var(--ink-2); }
.tally li:last-child { border-bottom: none; }
.tally b { font-size: 19px; font-weight: 640; color: var(--ink); }

.tag-wip { color: var(--blue); border-color: rgba(110,140,255,.35);
           background: rgba(110,140,255,.09); }

/* ---------- knowledge drop zone ---------- */

.dropzone {
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: 36px; text-align: center; display: grid; justify-items: center; gap: 6px;
}
.dropzone-icon { width: 40px; height: 40px; color: var(--accent-2); margin-bottom: 6px; }
.dropzone-icon svg { width: 100%; height: 100%; }
.dropzone h2 { font-size: 20px; }

/* ---------- chat ---------- */

.chat-wrap { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; }
.chat-head { display: flex; align-items: center; gap: 14px;
             padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.chat-head .grow { flex: 1; min-width: 0; }

.thread { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.bubble { display: flex; gap: 10px; max-width: 88%; }
.bubble-you { align-self: flex-end; flex-direction: row-reverse; }
.bubble-agent { align-self: flex-start; }
.bubble-body { border-radius: 2px; padding: 12px 15px; font-size: 15.5px;
               line-height: 1.6; min-width: 0; }
.bubble-you .bubble-body { background: var(--accent-2); color: #EDEAE3;
                           border-bottom-right-radius: 4px; }
.bubble-agent .bubble-body { background: var(--panel); border: 1px solid var(--line);
                             border-bottom-left-radius: 4px; }
.bubble-agent.intro .bubble-body { background: var(--panel-2); }
/* A rendered answer is HTML, not a printout.

   `pre-wrap` belonged to the version that printed the source in a <pre>. With
   the renderer in place it turned every newline the renderer writes between two
   blocks into a visible gap, on top of the margins those blocks already carry —
   which is the whole of the irregular spacing. It stays where it means
   something: inside code.

   The bubble also carries .markdown, written for an article: a 32px heading, a
   19.5px lead paragraph and a rule above every h2, none of which belong inside
   a conversation. The scale below is the thread's, and the rhythm is a
   conversation's. */
.bubble-answer { margin: 0; font-family: var(--sans);
                 font-size: 15.5px; line-height: 1.6; background: none; border: none;
                 padding: 0; overflow-x: auto; }
.bubble-answer p, .bubble-answer li, .bubble-answer blockquote { max-width: 68ch; }
.bubble-answer p { margin: 0 0 12px; }
.bubble-answer > p:first-of-type { font-size: 15.5px; color: inherit; }
.bubble-answer > *:last-child { margin-bottom: 0; }
.bubble-answer ul, .bubble-answer ol { margin: 12px 0; padding-left: 20px; }
.bubble-answer li { margin: 4px 0; }
.bubble-answer h1, .bubble-answer h2, .bubble-answer h3 {
                 font-family: var(--sans); font-weight: 650; letter-spacing: 0;
                 border: none; padding: 0; margin: 18px 0 8px; }
.bubble-answer h1 { font-size: 18px; }
.bubble-answer h2 { font-size: 16.5px; }
.bubble-answer h3 { font-size: 15.5px; text-transform: none; }
.bubble-answer h1:first-child, .bubble-answer h2:first-child,
.bubble-answer h3:first-child { margin-top: 0; }
.bubble-answer table { margin: 14px 0; font-size: 14.5px; }
.bubble-answer blockquote { margin: 14px 0; }
.bubble-answer hr { margin: 18px 0; }
.bubble-answer pre { white-space: pre; margin: 14px 0; }
.bubble-answer code { white-space: pre-wrap; }
.bubble-meta { display: flex; align-items: center; gap: 10px; margin: 10px 0 0;
               font-size: 14px; color: var(--ink-3); }

.composer { display: flex; gap: 10px; align-items: flex-end;
            border: 1px solid var(--line-2); background: var(--panel);
            border-radius: var(--r-lg); padding: 10px;
            box-shadow: 0 16px 34px -22px #000; }
.composer textarea { border: none; background: transparent; resize: none; padding: 6px 4px; }
.composer textarea:focus { box-shadow: none; }
.composer button { flex: none; }
.composer-note { text-align: center; margin: 10px 0 0; }

@media (max-width: 960px) {
  .split, .split-3 { grid-template-columns: 1fr; }
  .hbar { grid-template-columns: 96px 1fr 40px; }
  .chart-axis span.hide-odd { display: none; }
}

/* ---------- sizes and utilities ----------
   The page is served under a policy that forbids inline style attributes.
   Every size and every spacing is therefore a class, and every dynamic
   geometry (bars, meters, arcs) is an SVG attribute — never a style. */

.sz-30 { width: 30px; height: 30px; }
.sz-34 { width: 34px; height: 34px; }
.sz-44 { width: 44px; height: 44px; }
.sz-52 { width: 52px; height: 52px; }
.sz-56 { width: 56px; height: 56px; }
.sz-60 { width: 60px; height: 60px; }
.sz-72 { width: 72px; height: 72px; }

.m0     { margin: 0; }
.mt-sm  { margin-top: 10px; }
.mt-md  { margin-top: 18px; }
.mt-lg  { margin-top: 26px; }
.mb-md  { margin-bottom: 18px; }
.w-full { width: 100%; }
.tc     { text-align: center; }
.fs-14  { font-size: 15px; }
.fs-15  { font-size: 17px; }
.fs-22  { font-size: 24px; }
.narrow { max-width: 70ch; }
.min0   { min-width: 0; }
/* Document 50, B1 — a native file chooser is as wide as the name of the file
   it holds. Beside a button on one unbreakable line it pushed the import page
   to 466px; it wraps now, and the chooser never claims more than the row. */
.row-tight { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row-tight input[type=file] { min-width: 0; max-width: 100%; flex: 1 1 220px; }
.pad-list { padding: 16px 4px 4px; }

img { max-width: 100%; }

/* charts drawn as svg, because svg geometry is an attribute, not a style */
.chart-svg { width: 100%; height: 140px; display: block; }
.chart-col { fill: url(#barfill); }
.chart-col.zero { fill: var(--line-2); }
.chart-axis-svg { fill: var(--ink-3); font-family: var(--mono); font-size: 14px;
                  text-anchor: middle; }
.hbar-svg { width: 100%; height: 10px; display: block; border-radius: 2px;
            background: var(--panel-3); overflow: hidden; }
.hbar-rect { fill: var(--accent); }
.meter-svg { width: 100%; height: 6px; display: block; margin: 12px 0 8px;
             background: var(--panel-3); border-radius: 2px; overflow: hidden; }
.meter-rect { fill: var(--accent); }
.meter-rect.hot { fill: var(--amber); }
.meter-rect.full { fill: var(--red); }
.sz-132 { width: 132px; height: 132px; }
.bar-top    { stop-color: var(--accent); }
.bar-bottom { stop-color: var(--accent-2); }
.mb-sm { margin-bottom: 12px; }
.mb-lg { margin-bottom: 26px; }
.align-center { align-items: center; }
.section-title { margin: 32px 0 6px; font-size: 22px; letter-spacing: -0.02em; }
.preview-note { padding: 0 16px 14px; }
.reports { border: 1px solid var(--line); background: var(--panel);
           border-radius: var(--r-lg); margin-bottom: 22px; }
.reports > summary { cursor: pointer; padding: 12px 16px; font-size: 14px;
                     font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
                     color: var(--ink-3); list-style: none; }
.reports > summary::-webkit-details-marker { display: none; }
.reports > summary::before { content: "▸ "; }
.reports[open] > summary::before { content: "▾ "; }
.reports[open] > summary { border-bottom: 1px solid var(--line); }
.reports-body { padding: 14px 16px; display: grid; gap: 10px; }
.stats-1 { grid-template-columns: 1fr; }

/* ---------- the weekly gauge, at the foot of the rail ---------- */

.gauge-link { display: block; color: var(--ink); }
.gauge-link:hover { text-decoration: none; }
.gauge-link:hover .gauge { border-color: var(--line-2); background: var(--panel-2); }
.gauge {
  padding: 11px 13px; border: 1px solid var(--line); background: var(--panel);
  border-radius: var(--r-md);
}
.gauge-top { display: flex; align-items: baseline; justify-content: space-between; }
.gauge-label { font-size: 14px; font-weight: 700; letter-spacing: .11em;
               text-transform: uppercase; color: var(--ink-3); }
.gauge-share { font-size: 14.5px; font-weight: 650; }
.gauge-value { font-size: 19px; font-weight: 640; letter-spacing: -0.02em;
               margin: 2px 0 0; }
.gauge-value .unit { font-size: 14px; font-weight: 600; color: var(--ink-3);
                     text-transform: uppercase; letter-spacing: .08em; }
.gauge-track { width: 100%; height: 5px; display: block; margin: 8px 0 6px;
               background: var(--panel-3); border-radius: 2px; overflow: hidden; }
.gauge-fill { fill: var(--accent); }
.gauge-fill.hot { fill: var(--amber); }
.gauge-fill.full { fill: var(--red); }
.rail-rule { border: none; border-top: 1px solid var(--line); margin: 0 0 4px; }
.mark-logo { border-radius: 2px; display: block; flex: none; }

/* ---------- floating assistant ---------- */

.dock { position: fixed; right: 22px; bottom: 22px; z-index: 60;
        display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.dock-button {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: 2px; padding: 9px 16px 9px 10px; cursor: pointer;
  box-shadow: 0 18px 34px -18px #000;
}
.dock-button:hover { background: var(--panel-2); }
.dock-glyph { width: 30px; height: 30px; flex: none;
              background: #151A22; border-radius: 2px; }
.dock-line { fill: none; stroke: var(--accent); stroke-width: 2.4;
             stroke-linecap: round; stroke-linejoin: round; }
.dock-fill { fill: var(--accent); }
.dock-hint { font-size: 14.5px; font-weight: 570; white-space: nowrap; }

.dock-panel[hidden] { display: none; }
.dock-panel {
  width: 400px; max-width: calc(100vw - 44px); max-height: 70vh;
  display: flex; flex-direction: column; gap: 0;
  background: var(--bg-deep); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); box-shadow: 0 30px 60px -28px #000; overflow: hidden;
}
.dock-panel .thread { flex: 1; overflow-y: auto; padding: 16px; margin: 0; gap: 14px; }
.dock-panel .bubble { max-width: 94%; }
.dock-panel .composer { margin: 0 12px; }
.dock-panel .composer-note { margin: 8px 12px 12px; }
.dock-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
             border-bottom: 1px solid var(--line); background: var(--panel); }
.dock-head b { font-size: 15px; }
.dock-head .fine { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                   white-space: nowrap; }
.dock-head .ghost { padding: 4px 10px; font-size: 14px; }
.dock-open .dock-button { display: none; }

@media (max-width: 640px) {
  .dock { right: 12px; bottom: 12px; left: 12px; align-items: stretch; }
  .dock-panel { width: auto; max-height: 76vh; }
}

/* ==========================================================================
   v3 — the four statuses, the new screens, and the reader that expands.
   Still the same rule: no colour outside this file, no inline style anywhere.
   ========================================================================== */

/* ---------- statuses: freshness, never a backlog ---------- */

.tag-new     { color: var(--blue);   border-color: rgba(110,140,255,.35);
               background: rgba(110,140,255,.09); }
.tag-seen    { color: var(--ink-3);  border-color: var(--line-2); }
.tag-action  { color: var(--amber);  border-color: rgba(212,160,60,.35);
               background: rgba(212,160,60,.09); }
.tag-applied { color: var(--accent); border-color: rgba(110,140,255,.35);
               background: rgba(110,140,255,.09); }

.dot-new { background: var(--blue); }
.dot-seen { background: var(--ink-3); }
.dot-action { background: var(--amber); }
.dot-applied { background: var(--accent); }
.donut-new { stroke: var(--blue); }
.donut-seen { stroke: var(--ink-3); }
.donut-action { stroke: var(--amber); }
.donut-applied { stroke: var(--accent); }

.unit { font-size: 14px; font-weight: 600; color: var(--ink-3);
        text-transform: uppercase; letter-spacing: .08em; }
.chart-col.unknown { fill: none; stroke: var(--line-2); stroke-width: .5; }
.panel-live { border-color: var(--line-2);
              background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.h-sub { font-size: 14px; font-weight: 700; letter-spacing: .1em;
         text-transform: uppercase; color: var(--ink-3); margin: 14px 0 8px; }

/* ---------- home: the accompanying text ---------- */

.intro-band { padding: 4px 0 34px; }
.intro-band h1 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.03em;
                 margin-bottom: 12px; }
.intro-band .lede { color: var(--ink-2); font-size: 18px; max-width: 68ch; }
.intro-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px;
              align-items: start; margin-top: 30px; padding-top: 26px;
              border-top: 1px solid var(--line); }
.intro-text h2 { font-size: 20px; margin-bottom: 10px; }
.intro-text p { color: var(--ink-2); font-size: 15px; max-width: 56ch; }
.intro-text b { color: var(--ink); }
.intro-figure .flow { width: 100%; height: auto; display: block;
                      background: var(--panel); border: 1px solid var(--line);
                      border-radius: var(--r-lg); padding: 8px; }
.flow-box { fill: var(--panel-2); stroke: var(--line-2); stroke-width: 1; }
.flow-mid { fill: #151A22; stroke: var(--accent-2); }
.flow-t { fill: var(--ink); font-size: 14px; font-weight: 600; text-anchor: middle;
          font-family: var(--sans); }
.flow-s { fill: var(--ink-3); font-size: 14px; text-anchor: middle;
          font-family: var(--sans); }
.flow-arrow { fill: none; stroke: var(--accent-2); stroke-width: 1.4;
              stroke-linecap: round; }

/* ---------- home: the onboarding block ---------- */

.onboard-card {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  background: linear-gradient(120deg, #151A22 0%, var(--panel) 60%);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 18px 20px; margin-bottom: 40px; cursor: pointer; color: var(--ink);
}
.onboard-card:hover { border-color: var(--accent-2); background:
  linear-gradient(120deg, #16211C 0%, var(--panel-2) 60%); }
.onboard-face { flex: none; }
.onboard-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.onboard-body b { font-size: 17px; font-weight: 600; }
.onboard-go { width: 22px; height: 22px; flex: none; color: var(--accent); }
.onboard-go svg { width: 100%; height: 100%; display: block; }

/* ---------- home: recap ---------- */

.recap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.recap > .panel + .panel { margin-top: 0; }
.recap-open { border-style: dashed; background: none; box-shadow: none; }
.recap-open h3 { color: var(--ink-3); }
.card-soon { border-style: dashed; background: none; box-shadow: none; }
.card-soon h2 { color: var(--ink-2); }

/* ---------- library: the agent strip ---------- */

.agent-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
               gap: 12px; margin-bottom: 22px; }
.agent-tile {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); background: var(--panel);
  border-radius: var(--r-lg); color: var(--ink);
}
.agent-tile:hover { border-color: var(--line-2); background: var(--panel-2);
                    text-decoration: none; }
.agent-tile.on { border-color: var(--accent-2); background: var(--panel-2); }
.agent-tile-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.agent-tile-id b { font-size: 15px; font-weight: 570; }
.agent-tile-count { font-size: 17px; font-weight: 640; color: var(--ink-2);
                    display: flex; align-items: center; gap: 6px; }
.pip { font-size: 14px; font-weight: 700; color: var(--accent-ink);
       background: var(--accent); border-radius: 2px; padding: 1px 6px; }

/* ---------- library: the file list ---------- */

/* Thirty files in a list are thirty identical grey lines unless the title and
   the measurements sit at different levels. The title is the only thing read on
   the way past; everything else is checked once the eye has stopped. */
.filelist { list-style: none; margin: 0; padding: 0; }
.filerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
           padding: 13px 12px 13px 10px; border-bottom: 1px solid var(--line);
           border-left: 2px solid transparent; }
.filerow:last-child { border-bottom: none; }
.filerow:hover { background: var(--panel-2); border-left-color: var(--accent-2); }
.filerow-open { display: flex; align-items: center; gap: 12px; flex: 1 1 320px;
                min-width: 0; background: none; border: none; color: var(--ink);
                padding: 0; text-align: left; cursor: pointer; }
.filerow-open:hover { background: none; }
.filerow-open:hover b { color: var(--accent); }
.filerow-id { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.filerow-id b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
                line-height: 1.3; }
.filerow-id .fine { font-family: var(--mono); font-size: 14px; color: var(--ink-3); }
.filerow-tags { display: flex; align-items: center; gap: 8px; }
.filerow-actions { display: flex; align-items: center; gap: 8px; }
.filerow-note { padding: 0 0 10px 38px; border-bottom: 1px solid var(--line); }

/* ---------- the reader that expands ---------- */

.sheet[hidden] { display: none; }
.sheet { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
         background: rgba(11,13,15,.72); padding: 24px; }
.sheet-box { width: min(900px, 100%); max-height: 86vh; display: flex;
             flex-direction: column; background: var(--bg-deep);
             border: 1px solid var(--line-2); border-radius: var(--r-lg);
             box-shadow: 0 40px 80px -30px #000; overflow: hidden; }
.sheet-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px;
              border-bottom: 1px solid var(--line); background: var(--panel); }
.sheet-head b { font-size: 17px; display: block; }
.sheet-head .fine { display: block; }
.sheet-head > div { flex: 1; }
.sheet-body { padding: 22px 24px 30px; overflow-y: auto; }
body.sheet-open { overflow: hidden; }

/* ---------- connectors ---------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
         gap: 14px; }
.tile { border: 1px solid var(--line); background: var(--panel);
        border-radius: var(--r-lg); box-shadow: var(--shadow); }
.tile-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px;
             cursor: pointer; list-style: none; }
.tile-head::-webkit-details-marker { display: none; }
.tile-head b { display: block; font-size: 17px; font-weight: 570; }
.tile-head .fine { display: block; }
.tile-head > span.min0 { flex: 1; min-width: 0; }
.tile-dot { width: 9px; height: 9px; border-radius: 2px; flex: none;
            background: var(--line-2); }
.tile-dot.on { background: var(--accent); box-shadow: 0 0 0 3px rgba(110,140,255,.15); }
.tile-dot.off { background: var(--ink-3); }
.tile-dot.unknown { background: var(--blue); }
.tile-body { padding: 0 18px 18px; border-top: 1px solid var(--line); }
.tile-body p:first-child { margin-top: 14px; }
.steps-list { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 15px; }
.steps-list li { margin-bottom: 6px; }

/* ---------- knowledge: the confirmation ---------- */

.confirm { display: grid; gap: 10px; padding: 14px 0;
           border-bottom: 1px solid var(--line); }
.confirm:last-child { border-bottom: none; }
.confirm-id { display: flex; align-items: center; gap: 12px; }
.confirm-id b { font-size: 15px; display: block; }
.confirm-line { margin: 0; font-size: 17px; color: var(--ink); }
.confirm-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.confirm-form select { flex: 1 1 240px; }
.dropzone input[type=file] { width: auto; }

/* ---------- people ---------- */

.account { border: 1px solid var(--line); background: var(--panel);
           border-radius: var(--r-md); margin-bottom: 10px; }
.account-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
                cursor: pointer; list-style: none; }
.account-head::-webkit-details-marker { display: none; }
.account-head b { display: block; font-size: 15px; }
.account-head .fine { display: block; }
.account-head > span.min0 { flex: 1; min-width: 0; }
.account-body { display: grid; grid-template-columns: 2fr 1fr; gap: 20px;
                padding: 16px 14px 18px; border-top: 1px solid var(--line); }
.account-side { display: grid; gap: 14px; align-content: start; }
.stack { display: grid; gap: 12px; }
.row-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
              gap: 12px; }
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
          gap: 6px; }
.check { display: flex; align-items: center; gap: 8px; text-transform: none;
         letter-spacing: 0; font-size: 15px; font-weight: 450; color: var(--ink-2);
         margin: 0; }
.check input { width: auto; }

/* ---------- one agent ---------- */

/* v3.4, chapter 1 — the 900px cap that used to be here is gone. The page of an
   agent was the narrowest screen of the site while carrying the widest content,
   and the conversation paid for it. */
.agent-hero { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 18px; }
.agent-hero h1 { font-size: 27px; margin-bottom: 0; }
.agent-job { color: var(--ink-2); font-size: 17px; margin: 2px 0 10px; }
.agent-hero .lede { color: var(--ink-2); font-size: 15.5px; max-width: 60ch; }
.agent-actions { display: flex; gap: 10px; align-items: center; margin-bottom: 22px; }
/* v3.2 — the conversation is the left column and starts right under the
   buttons. The three document blocks are the narrow column on the right, and
   none of them is full width any more. */
.agent-page .chat-wrap { max-width: none; margin: 0; }
.agent-columns > .chat-wrap .thread { margin-bottom: 20px; }
.agent-side .panel { padding: 16px 18px; }
.agent-side .panel-head { margin-bottom: 10px; }
.agent-side .panel-head h2 { font-size: 17px; }
.agent-side .last { padding: 8px 10px; }
.dots { margin: 6px 0 10px; padding-left: 18px; color: var(--ink-2); font-size: 14.5px; }
.dots li { margin-bottom: 3px; }

@media (max-width: 1100px) {
  .recap { grid-template-columns: 1fr; }
  .intro-grid { grid-template-columns: 1fr; }
  .account-body { grid-template-columns: 1fr; }
}

/* ==========================================================================
   v3.1 — bigger type, lighter greys, spend as a share, and the screens that
   changed shape. Still: no colour outside this file, no inline style anywhere.
   ========================================================================== */

/* ---------- intro paragraphs sit between the body and the title ---------- */

.page-head .lede, .intro-band .lede, .agent-hero .lede { font-size: 19px;
  line-height: 1.55; }

/* ---------- the diagram, resized so its labels clear the 14px floor ------- */

.flow-t { font-size: 15px; font-weight: 620; }
.flow-s { font-size: 14px; }

/* ---------- a share and its bar ---------- */

.sharebar { display: block; }
.sharebar-top { display: flex; align-items: baseline; justify-content: space-between;
                gap: 12px; }
.sharebar-label { font-size: 14px; font-weight: 700; letter-spacing: .1em;
                  text-transform: uppercase; color: var(--ink-3); }
.sharebar-value { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.sharebar-value .unit { font-size: 15px; margin-left: 2px; }
.sharebar-track { width: 100%; height: 6px; display: block; margin: 8px 0 0;
                  background: var(--panel-3); border-radius: 2px; overflow: hidden; }
.sharebar-fill { fill: var(--accent); }
.sharebar-fill.hot { fill: var(--amber); }
.sharebar-fill.full { fill: var(--red); }

/* ---------- home: the guide block, wide, visible, and inert ---------- */

.guide-card {
  display: flex; align-items: center; gap: 24px;
  background: linear-gradient(115deg, #141E1A 0%, var(--panel-2) 55%, var(--panel) 100%);
  border: 1px solid var(--line-2); border-left: 3px solid var(--accent-2);
  border-radius: var(--r-lg); padding: 26px 30px; margin: 0 0 44px;
}
.guide-face { flex: none; }
.guide-body { min-width: 0; }
.guide-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
             margin-bottom: 8px; }
.guide-top h2 { font-size: 24px; letter-spacing: -0.02em; }
.guide-lede { font-size: 17px; color: var(--ink-2); max-width: 70ch; margin: 0 0 8px; }
.sz-96 { width: 96px; height: 96px; }

/* ---------- home: the three blocks ---------- */

.recap { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 16px; }
.recap-count { font-size: 40px; font-weight: 650; letter-spacing: -0.035em;
               line-height: 1.05; margin: 0 0 10px; }
.recap-unit { font-size: 17px; font-weight: 500; color: var(--ink-3);
              margin-left: 8px; letter-spacing: 0; }
.recap-side .highlight-title { font-size: 17px; font-weight: 570; margin: 0 0 4px; }
.recap-side .highlight-title a { color: var(--ink); }
.recap-side .highlight-title a:hover { color: var(--accent); }

/* ---------- folded categories ---------- */

.folds { display: grid; gap: 10px; }
.fold { border: 1px solid var(--line); background: var(--panel);
        border-radius: var(--r-md); }
.fold-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
             cursor: pointer; list-style: none; }
.fold-head::-webkit-details-marker { display: none; }
.fold-head b { display: block; font-size: 17px; font-weight: 570; }
.fold-head .fine { display: block; }
.fold-head > span.min0 { flex: 1; min-width: 0; }
.fold-caret { width: 9px; height: 9px; flex: none; border-right: 2px solid var(--ink-3);
              border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); }
.fold[open] .fold-caret { transform: rotate(45deg); border-color: var(--accent); }
.fold-body { padding: 4px 16px 18px; border-top: 1px solid var(--line); }
.fold-body > p:first-child { margin-top: 12px; }

/* ---------- one agent, in two columns ---------- */

.agent-columns { display: grid; grid-template-columns: 1.75fr 1fr; gap: 20px;
                 align-items: start; margin-bottom: 26px; }
.agent-columns > .panel + .panel { margin-top: 0; }
.agent-side { display: grid; gap: 18px; align-content: start; }
.agent-side > .panel + .panel { margin-top: 0; }
.agent-actions { margin: 26px 0 28px; padding-top: 22px;
                 border-top: 1px solid var(--line); }
.can { margin-bottom: 4px; }
.drop-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
               margin-bottom: 10px; }
.drop-inline input[type=file] { width: auto; flex: 1 1 160px; font-size: 14px; }

/* ---------- connector tiles are buttons now ---------- */

.tile { display: flex; flex-direction: column; align-items: stretch; gap: 0;
        width: 100%; text-align: left; background: var(--panel);
        border: 1px solid var(--line); border-radius: var(--r-lg);
        padding: 0; cursor: pointer; color: var(--ink); box-shadow: var(--shadow); }
.tile:hover { background: var(--panel-2); border-color: var(--line-2); }
.tile-more { display: block; padding: 0 18px 16px; color: var(--accent);
             font-size: 14px; font-weight: 570; }
.sheet-inline .table-wrap { margin-top: 10px; }
.sheet-inline h3:first-child { margin-top: 0; }

@media (max-width: 1100px) {
  .recap { grid-template-columns: 1fr; }
  .agent-columns { grid-template-columns: 1fr; }
  .guide-card { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   v3.3 — the conversation that closes itself, and the loop of learned rules.
   Still the same rule: no colour outside this file, no inline style anywhere,
   and nothing rendered under 14px.
   ========================================================================== */

/* ---------- the thread renders ten at a time ---------- */

.thread-earlier[hidden] { display: none; }
.thread-earlier { margin: 0 0 14px; text-align: center; }
.thread-earlier .ghost { width: 100%; }
.dock-panel .thread-earlier { margin: 12px 12px 0; }

/* ---------- Correct this: two fields, and nothing else ---------- */

.correct-form { display: grid; gap: 14px; }
.correct-form label { margin-bottom: 0; }
.correct-form label input, .correct-form label textarea { margin-top: 6px; }
.correct-form .fine { margin: 0; }
.correct-form + .correct-form { margin-top: 14px; }
.sheet-inline > .correct-form { margin-top: 22px; padding-top: 20px;
                                border-top: 1px solid var(--line); }

/* ---------- the Learnings screen ---------- */

.rule { border: 1px solid var(--line); background: var(--panel-2);
        border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 12px; }
.rule:last-child { margin-bottom: 0; }
.rule-head { display: flex; align-items: flex-start; justify-content: space-between;
             gap: 14px; margin-bottom: 8px; }
.rule-head b { display: block; font-size: 17px; font-weight: 570; }
.rule-head .fine { display: block; }
.rule-text { margin: 0; color: var(--ink); white-space: pre-wrap;
             overflow-wrap: break-word; }
.rule-actions { display: flex; align-items: flex-start; gap: 10px;
                flex-wrap: wrap; margin-top: 12px; }
.rule-actions .reports { flex: 1 1 260px; margin-bottom: 0; }
.rule-actions .reports-body { gap: 14px; }

/* ==========================================================================
   v3.4 — the page of one agent. Three measured defects and what replaces them.

   1. `.page` capped the width and never centred it, so the leftover space piled
      up on one side. Fixed at the source, on `.page`, for every screen.
   2. `.agent-page` capped itself at 900px on top of that.
   3. `.thread` had no height and no overflow, so a pasted article grew the
      document and pushed the portrait, the buttons and the whole right column
      out of reach. Only the thread scrolls now.

   And the reason the two columns came out near-equal despite a 1.75fr / 1fr
   grid: a track sized in `fr` keeps an automatic minimum, and the file input in
   the right column had a wide intrinsic minimum that overrode the ratio. The
   right column is sized in pixels now, and the conversation takes the rest.
   ========================================================================== */

.page-agent { height: 100vh; overflow: hidden; padding-bottom: 26px; }
.page-agent .agent-page { display: flex; flex-direction: column; height: 100%;
                          max-width: none; min-height: 0; }

.agent-columns { display: grid; grid-template-columns: minmax(0, 1fr) 300px;
                 gap: 24px; align-items: stretch; margin-bottom: 0;
                 flex: 1 1 auto; min-height: 0; }

/* `min-height: 0` on every ancestor is not decoration: without it a flex child
   refuses to shrink below its content, the scrolling box never scrolls, and the
   defect being fixed comes straight back with no error to show for it. */
.agent-page .chat-wrap { max-width: none; margin: 0; display: flex;
                         flex-direction: column; min-height: 0; }
.chat-head-row { flex: 0 0 auto; }
.agent-columns > .chat-wrap .thread {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin-bottom: 14px; padding-right: 8px; scrollbar-gutter: stable;
}
.agent-columns > .chat-wrap .composer,
.agent-columns > .chat-wrap .composer-note,
.agent-columns > .chat-wrap .attached,
.agent-columns > .chat-wrap .banner { flex: 0 0 auto; }

.agent-side { display: flex; flex-direction: column; gap: 16px; min-height: 0;
              overflow-y: auto; padding-right: 4px; }

/* A bubble is capped in characters, not in per cent: a line 900px wide is not
   readable however wide the column that holds it. */
.agent-columns .bubble { max-width: 76ch; }

/* ---------- the tools of the right column, as icons ---------- */

/* v3.4.1 — two buttons, not three. The one that opened the routing form left
   this screen with the form itself. */
.side-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
              flex: 0 0 auto; }
.tool { display: flex; flex-direction: column; align-items: center; gap: 5px;
        padding: 12px 6px 10px; background: var(--panel);
        border: 1px solid var(--line); border-radius: var(--r-md);
        color: var(--ink-2); cursor: pointer; font-family: var(--sans); }
.tool:hover { background: var(--panel-2); border-color: var(--line-2);
              color: var(--ink); }
.tool svg { width: 21px; height: 21px; flex: none; }
.tool-label { font-size: 14px; font-weight: 560; letter-spacing: .01em; }
.tool-count { font-size: 14px; font-weight: 700; color: var(--accent);
              line-height: 1; }

/* ---------- files attached to the conversation ---------- */

.attached[hidden] { display: none; }
.attached { border-top: 1px solid var(--line); padding-top: 10px;
            margin-bottom: 10px; }
.attached-lead { display: block; margin-bottom: 6px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; list-style: none;
            margin: 0; padding: 0; }
.chip-file { display: inline-flex; align-items: center; gap: 7px;
             background: var(--panel-2); border: 1px solid var(--line-2);
             border-radius: 999px; padding: 5px 6px 5px 11px; font-size: 14px; }
.chip-file svg { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
.chip-name { max-width: 26ch; overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; }
.chip-x { display: inline-flex; align-items: center; justify-content: center;
          width: 22px; height: 22px; padding: 0; border: none; border-radius: 999px;
          background: transparent; color: var(--ink-3); cursor: pointer; }
.chip-x:hover { background: var(--panel-3); color: var(--red); }
.warn-line { color: var(--amber); margin: 8px 0 0; }
.warn-line[hidden] { display: none; }
.context-dropped { color: var(--ink-3); margin: 0 0 8px; text-align: center; }
.context-dropped[hidden] { display: none; }

/* ---------- the paperclip, inside the question box ---------- */

/* v3.4.1 — the paperclip carries its name. An icon on its own was mistaken for
   the routing button that used to sit in the right column with the same
   glyph, which is exactly the confusion two upload paths on one screen
   produce. There is one upload here now, and it says what it does. */
.composer .clip { display: inline-flex; align-items: center; gap: 7px;
                  height: 34px; padding: 0 11px; flex: none;
                  border: 1px solid var(--line-2); border-radius: var(--r-sm);
                  color: var(--ink-2); cursor: pointer; font-size: 14px;
                  font-weight: 560; }
.clip-label { white-space: nowrap; }
.composer .clip:hover { background: var(--panel-3); color: var(--accent); }
.composer .clip svg { width: 19px; height: 19px; }
.composer .clip:focus-within { outline: 2px solid var(--accent);
                               outline-offset: 2px; }

/* ---------- a very long message is folded ---------- */

/* Document 49 — the body is never the thing that is folded. It is
   `overflow: hidden` when folded, and the button that opens it used to be
   appended inside it: drawn, and invisible. The fold is a child; the button
   sits under it, in the open. */
.bubble-clip { display: block; }
.bubble-body > .answer-clamped { max-height: 26em; overflow: hidden; position: relative; }
.bubble-body > .answer-clamped::after { content: ""; position: absolute; left: 0; right: 0;
  bottom: 0; height: 4.5em; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--panel) 88%); }
.bubble-you .bubble-body > .answer-clamped::after {
  background: linear-gradient(to bottom, transparent, var(--accent-2) 88%); }
.bubble-more { display: block; margin-top: 10px; background: none; border: none;
               padding: 0; color: var(--accent); font-size: 15px; font-weight: 570;
               font-family: var(--sans); cursor: pointer; }
.bubble-you .bubble-more { color: #EDEAE3; text-decoration: underline; }

/* ---------- the paliers ---------- */

@media (max-width: 1199px) {
  .agent-columns { grid-template-columns: minmax(0, 1fr) 260px; }
}

/* Below this width the fixed height goes away and the page scrolls the way
   every other page does. A box of fixed height on a phone is unusable. */
@media (max-width: 899px) {
  .page-agent { height: auto; overflow: visible; padding-bottom: 64px; }
  .page-agent .agent-page { display: block; height: auto; }
  .agent-columns { grid-template-columns: 1fr; flex: none; }
  .agent-columns > .chat-wrap .thread { overflow-y: visible; flex: none;
                                        padding-right: 0; }
  .agent-side { overflow-y: visible; }
  .agent-columns .bubble { max-width: 88%; }
}

/* ==========================================================================
   v3.4.1 — one upload on the page of an agent, and it attaches to the
   conversation. v3.4.2 — the shortcut to an agent, in the rail.
   ========================================================================== */

/* The rail can now hold a row of agents on top of five groups of links. It has
   to be allowed to scroll, or the foot — the gauge, the account, the way out —
   is what falls off the bottom of a short screen. */
.rail { overflow-y: auto; }

.rail-agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
               padding: 0 4px; }
.rail-agent { display: flex; flex-direction: column; align-items: center; gap: 6px;
              padding: 9px 4px 8px; border-radius: var(--r-md);
              border: 1px solid transparent; color: var(--ink-2); min-width: 0; }
.rail-agent:hover { background: var(--panel); border-color: var(--line-2);
                    color: var(--ink); text-decoration: none; }
.rail-agent.on { background: var(--panel-2); border-color: var(--accent);
                 color: var(--ink); }
.rail-agent .face { border-radius: 2px; }
.rail-agent-name { font-size: 14px; font-weight: 560; max-width: 100%;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* On the narrow palier the rail is already a horizontal band, so the squares
   line up with it instead of forcing three per row. */
@media (max-width: 960px) {
  .rail { overflow-y: visible; }
  .rail-agents { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}


/* ==========================================================================
   OSTEN — brand layer. Everything above stays as it was written; this section
   enforces the rules the brand standard makes non-negotiable.

     1. the accent means "you can act on this", never "this succeeded"
     2. a green means PASS, an amber means WATCH, a red means FAIL — and
        nothing decorative is allowed to borrow them
     3. measured values are set in the mono face, always
     4. no shadow separates anything; a one-pixel rule does
     5. the product is Osten's; the client's name is the guest on the bar
   ========================================================================== */

/* ---------- the faces -------------------------------------------------- */
/* Self-hosted in static/fonts/, so the interface renders correctly on a
   machine with no route to the internet — which is every machine we install
   on. Nothing is fetched from Google or from any CDN at any point.

   Two files per weight, split by unicode-range: the `latin` file carries
   Western European, the `-ext` file carries Central and Eastern European and
   the extended Latin the export markets need — Polish, Czech, Turkish,
   Romanian, and the accented forms used across francophone Africa. A browser
   downloads the second file only when a page actually contains one of those
   characters, so the ordinary cost stays at one file per weight.

   Vietnamese is not bundled. It is a separate subset, no target market uses
   it, and an unused 13 KB per weight is 13 KB we do not ship.

   Archivo and IBM Plex Mono are both SIL Open Font License 1.1. The licence
   text of each sits beside the files. They may be redistributed to a client
   as part of the installation; that is what the OFL is for. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/archivo-400.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/archivo-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("fonts/archivo-500.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("fonts/archivo-500-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/archivo-600.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/archivo-600-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Source Serif 4 — the reading face. Self-hosted like the other two: a design
   that depends on Georgia being installed is not reproducible at a client. */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/source-serif-400.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/source-serif-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/source-serif-600.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/source-serif-600-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/plex-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/plex-mono-400-ext.woff2") format("woff2");
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,
    U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- type discipline -------------------------------------------- */

h1, h2, h3, .stat, .display, .h-sub { letter-spacing: -.018em; }
.k, .eyebrow, thead th, .rail-label { letter-spacing: .15em;
  text-transform: uppercase; font-weight: 600; }

/* If it is measured, it is monospaced. */
.stat, .amount, .share, .meter-label, .cost, .mono,
td.mono, .fine.mono, .tally b, .counter, time, .date {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
table td, table th, .tally, .hbar { font-variant-numeric: tabular-nums; }

/* ---------- corners and separation ------------------------------------- */

.tile, .panel, .card, .last, .banner, .sheet-box, .tool, .grid,
.table-wrap, .drop-inline, .composer, .bubble-body, .chip-file {
  border-radius: 2px;
}
.chip, .tag, .tool-count, .pill { border-radius: 999px; }
* { box-shadow: none !important; }
.panel, .tile, .card { border: 1px solid var(--line); }

/* ---------- the accent is interaction, never success -------------------- */

a, .last-title:hover, .ghost:hover, .rail-link.on .rail-icon { color: var(--accent); }
.button, button[type=submit] { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- the three states, and only these three ---------------------- */

.tag-done, .tag-applied, .tag-approved, .ok, .status-pass, .banner-ok {
  color: var(--pass);
  border-color: color-mix(in srgb, var(--pass) 35%, transparent);
  background: color-mix(in srgb, var(--pass) 9%, transparent);
}
.tag-action, .tag-pending, .banner-warn, .status-watch {
  color: var(--watch);
  border-color: color-mix(in srgb, var(--watch) 35%, transparent);
  background: color-mix(in srgb, var(--watch) 9%, transparent);
}
.tag-failed, .tag-rejected, .banner-error, .status-fail {
  color: var(--fail);
  border-color: color-mix(in srgb, var(--fail) 35%, transparent);
  background: color-mix(in srgb, var(--fail) 9%, transparent);
}
.tag-new, .tag-running, .tag-wip {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.meter-fill { background: var(--accent); }
.meter-fill.is-watch { background: var(--watch); }
.meter-fill.is-fail  { background: var(--fail); }

/* Decoration may not borrow a state. The agent tints run on the vertical
   palette instead — an avatar in Watch amber makes every amber on the screen
   mean two things at once. */
.ai-green  { --ai-ink: var(--v-agency);   --ai-bg: #151A22; }
.ai-blue   { --ai-ink: var(--v-agency);   --ai-bg: #111524; }
.ai-teal   { --ai-ink: var(--v-export);   --ai-bg: #141821; }
.ai-amber  { --ai-ink: var(--v-industry); --ai-bg: #221C0E; }
.ai-violet { --ai-ink: var(--v-legal);    --ai-bg: #191428; }
.ai-slate  { --ai-ink: var(--ink-3);      --ai-bg: #191D22; }

/* ==========================================================================
   THE OSTEN BAR
   A band across the top of every screen, centred, carrying the mother brand
   and the vertical beneath it — standard §7 rule 3: the sign and the word are
   Bone, only the descriptor takes a colour.

   It is a masthead, not a toolbar: nothing sits at its edges, the lockup is
   centred on the full viewport, and the two lines are given room to breathe.

   The client's own mark is not here. It sits at the head of the rail, above
   the navigation, where the client works all day.

   The bar takes --banner off the viewport, so every rule that was written
   against 100vh is restated here against 100vh minus the bar. Miss one and
   the page grows a scrollbar nobody asked for. Change the height in one
   place — the token — and the three rules below follow.
   ========================================================================== */

.shell { grid-template-rows: var(--banner) minmax(0, 1fr); }

.osten-bar {
  grid-column: 1 / -1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 13px;
  height: var(--banner); padding: 0 20px;
  background: var(--bg-deep); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}

.osten-sign { display: flex; align-items: center; gap: 13px; }
.osten-sign:hover { text-decoration: none; }
/* The sign is drawn at its construction weight — 2.6u on a 48u grid — and
   rendered at 26px, well clear of the point where that weight falls under one
   device pixel. Bone on Ink, never a colour: standard §7 rule 3. */
.osten-sign svg { width: 26px; height: 26px; display: block; flex: none;
                  color: var(--mark); }
.osten-word {
  font-family: var(--sans); font-weight: 600; font-size: 19px;
  letter-spacing: .16em; text-indent: .16em; line-height: 1;
  color: var(--mark);
}
/* The vertical sits under the mother brand, tracked wider so that a shorter
   word spans the same measure as the one above it. */
.osten-vertical {
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  letter-spacing: .34em; text-indent: .34em; line-height: 1;
  color: var(--mark);
}

/* v3.6, chapter 2 — the masthead is the secondary lockup, and it carries the
   colour of the vertical this installation runs. One line per vertical, named
   after the key in `company.vertical`; a new vertical is a line here and a line
   of configuration, never a line of Python. `--mark` falls back to Bone, so an
   installation whose vertical is not declared, or not known to this stylesheet,
   renders correctly instead of rendering colourless by accident. */
.osten-bar { --mark: var(--ink); }
.osten-bar[data-vertical="agency"]   { --mark: var(--v-agency); }
.osten-bar[data-vertical="export"]   { --mark: var(--v-export); }
.osten-bar[data-vertical="industry"] { --mark: var(--v-industry); }
.osten-bar[data-vertical="legal"]    { --mark: var(--v-legal); }

/* ---------- the client's mark, at the head of the rail ------------------ */
/* Above the navigation, which is where the client spends the day. No name
   printed beside it: a logo that needs its own name next to it is not a logo.
   The text only appears when no file has been dropped in static/brand/. */

.rail-mark { display: flex; align-items: center; padding: 2px 8px 0;
             margin-bottom: 2px; }
.rail-mark:hover { text-decoration: none; }
/* The client's file governs its own shape. A horizontal lockup lands at the
   width of the rail, capped at 44px tall; a square symbol lands at 44x44.
   Both are supported because both are what clients actually have. */
.rail-mark img { height: auto; width: auto; max-height: 44px; max-width: 100%;
                 display: block; }
.rail-mark b { color: var(--ink); font-weight: 600; font-size: 15px;
               letter-spacing: .1em; text-transform: uppercase; }

.rail { height: calc(100vh - var(--banner)); top: var(--banner);
        padding-top: 20px; }
.page-agent { height: calc(100vh - var(--banner)); }

@media (max-width: 960px) {
  .shell { grid-template-rows: var(--banner) auto minmax(0, 1fr); }
  .rail { height: auto; top: auto; }
  .page-agent { height: auto; }
}

/* The sign-in screen carries the same bar, and the box is centred under it.
   The radial glow behind the box goes: Osten separates with a rule, not with
   a gradient, and the first screen is not the place to make an exception. */
body.gate { grid-template-rows: var(--banner) minmax(0, 1fr);
            place-items: stretch; background: var(--bg); }
body.gate .gate-box { place-self: center; }

/* The rail mark and its glyph are no longer rendered by any template — the
   client's mark lives in the bar. The rules are left in place rather than
   deleted so that a client who restores an older template does not land on an
   unstyled header, but nothing on screen uses them today. */

/* v3.6, chapter 1 — the deliverables an answer named.
   Rendered inside the agent bubble, below the text. The thumbnail is an
   ordinary <img> served from this host: the content policy allows no other
   origin, and no script draws anything here. */
.answer-group { display: block; }
.answer-files { display: flex; flex-direction: column; gap: 8px;
                margin: 12px 0 0; padding: 12px 0 0;
                border-top: 1px solid var(--line); }
.answer-file { display: flex; align-items: center; gap: 12px; min-width: 0; }
.answer-thumb { flex: none; display: block; width: 96px; height: 72px;
                border: 1px solid var(--line-2); border-radius: 2px;
                overflow: hidden; background: var(--panel-2); }
.answer-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.answer-file-body { flex: 1 1 auto; min-width: 0; }
.answer-file-name { display: block; font-size: 14.5px; color: var(--ink);
                    text-decoration: none; overflow-wrap: anywhere; }
.answer-file-name:hover { color: var(--accent); }
.answer-file-meta { display: block; color: var(--ink-3); font-family: var(--mono);
                    overflow-wrap: anywhere; }
.answer-file-get { flex: none; }

/* A bubble carrying files folds its TEXT, never its files: hiding the thing the
   answer was about behind Show full text is the opposite of the point. */
.bubble-answer.answer-clamped { max-height: 26em; overflow: hidden;
                                position: relative; }
.bubble-answer.answer-clamped::after { content: ""; position: absolute;
                                       left: 0; right: 0; bottom: 0; height: 3em;
                                       background: linear-gradient(to bottom,
                                         rgba(20, 23, 27, 0), var(--panel)); }

/* v3.6, chapter 3 — the system band on Home.
   Replaces the explainer diagram. Everything here is a measured value; the only
   motion on the screen is the dot, and it moves only while the engine is
   actually answering something. A reader who has asked for less motion gets a
   steady dot rather than none: the state must stay legible. */
.system-band { border-bottom: 1px solid var(--line); padding: 0 0 22px;
               margin: 0 0 26px; }
.system-line { display: flex; align-items: baseline; justify-content: space-between;
               gap: 16px; flex-wrap: wrap; }
.system-title { margin: 0; }
.system-live { display: inline-flex; align-items: center; gap: 9px;
               color: var(--ink-3); font-size: 14px; }
.system-live-on { color: var(--ink-2); }
.system-dot { width: 8px; height: 8px; border-radius: 50%; flex: none;
              background: var(--ink-3); display: block; }
.system-live-on .system-dot { background: var(--pass);
                              animation: system-pulse 1.7s ease-in-out infinite; }
@keyframes system-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
  .system-live-on .system-dot { animation: none; }
}

.system-grid { display: grid; gap: 18px; margin-top: 20px;
               grid-template-columns: repeat(4, minmax(0, 1fr)); }
.system-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.system-k { color: var(--ink-3); font-size: 14px; letter-spacing: .04em; }
.system-v { font-family: var(--mono); font-variant-numeric: tabular-nums;
            font-size: 26px; line-height: 1.15; color: var(--ink);
            font-weight: 600; }
.system-v-text { font-family: var(--sans); font-size: 17px; overflow-wrap: anywhere; }
.system-v-text a { color: var(--ink); text-decoration: none; }
.system-v-text a:hover { color: var(--accent); }
@media (max-width: 900px) {
  .system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v3.6, chapter 4 — the reverse prompt.
   One field, one proposal. The proposal is a question to read, not an answer:
   it is set in the reading face, indented behind a rule, so it does not look
   like something the system already did. */
.router { border-bottom: 1px solid var(--line); padding: 0 0 22px; margin: 0 0 26px; }
.router-label { display: block; color: var(--ink-2); margin-bottom: 9px; }
.router-form { display: flex; gap: 10px; align-items: stretch; }
.router-input { flex: 1 1 auto; min-width: 0; }
.router-hint { margin: 8px 0 0; color: var(--ink-3); }
.router-result { margin-top: 16px; }
.router-result[hidden] { display: none; }
.router-who { margin: 0 0 8px; }
.router-why { color: var(--ink-3); }
.router-question { margin: 0 0 14px; padding: 10px 0 10px 15px;
                   border-left: 2px solid var(--accent); color: var(--ink);
                   font-family: var(--serif); font-size: 17px; line-height: 1.55; }
.router-plain { margin: 10px 0 0; color: var(--ink-3); }

/* v3.6, chapter 5 — the first-login tour, and the companion below it.
   Numbered, two columns on a wide screen, with the way out at both ends: a
   quiet Skip at the top for somebody who knows the product, and a real button
   at the bottom for somebody who read it. */
.tour { border: 1px solid var(--line-2); background: var(--panel);
        border-radius: var(--r-lg); padding: 22px 24px; margin: 0 0 26px; }
.tour-head { display: flex; align-items: flex-start; justify-content: space-between;
             gap: 16px; }
.tour-eyebrow { display: block; color: var(--accent); font-size: 14px;
                letter-spacing: .12em; text-transform: uppercase;
                margin-bottom: 6px; }
.tour-title { margin: 0; font-size: 21px; }
.tour-steps { list-style: none; margin: 22px 0 0; padding: 0;
              display: grid; gap: 14px;
              grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); }
.tour-step { display: flex; gap: 13px; align-items: flex-start; min-width: 0;
             background: var(--panel-2); border: 1px solid var(--line);
             border-radius: 3px; padding: 15px 16px; }
.tour-num { flex: none; width: 26px; height: 26px; border-radius: 50%;
            border: 1px solid var(--line-2); color: var(--ink-3);
            font-family: var(--mono); font-size: 14px; line-height: 24px;
            text-align: center; }
.tour-step-title { display: block; color: var(--ink); margin-bottom: 4px; }
.tour-step p { color: var(--ink-3); }
.tour-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
             margin: 22px 0 0; padding-top: 18px;
             border-top: 1px solid var(--line); color: var(--ink-3); }
@media (max-width: 860px) {
  .tour-steps { grid-template-columns: minmax(0, 1fr); }
}

/* v3.6, chapter 6 — a conversation several people share. */
.bubble-who { display: block; opacity: .8; margin-bottom: 3px; }
.sharing { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.sharing-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sharing-form { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; }
.sharing-pick { max-width: 260px; }
.sharing-note { margin: 8px 0 0; color: var(--ink-3); }
.sharing-error { margin: 10px 0 0; }
.sharing-error[hidden] { display: none; }
.chip-owner { opacity: .85; }

/* v3.6.3 — the field of agents on Home.
   One canvas, no SVG, no library. The small points are the field; the large
   ones are the agents, and they carry their own label. The list underneath is
   the same information as real links: a canvas is invisible to a keyboard and
   to a screen reader, and drawing something is not an excuse for hiding it. */
.system-map { position: relative; margin: 22px 0 6px; }
.field { display: block; width: 100%; height: 300px; cursor: default; }
.field-list { list-style: none; margin: 0; padding: 0;
              position: absolute; width: 1px; height: 1px; overflow: hidden;
              clip-path: inset(50%); white-space: nowrap; }
.field-list a:focus { position: static; width: auto; height: auto;
                      clip-path: none; }
@media (prefers-reduced-motion: reduce) {
  .field { display: none; }
  .field-list { position: static; width: auto; height: auto; overflow: visible;
                clip-path: none; white-space: normal;
                display: flex; gap: 18px; flex-wrap: wrap; margin: 8px 0 0; }
}
@media (max-width: 720px) { .field { display: none; } }

/* v3.6, chapter 5 — the first-login tour, and the companion below it.
   Numbered, two columns on a wide screen, with the way out at both ends: a
   quiet Skip at the top for somebody who knows the product, and a real button
   at the bottom for somebody who read it. */
.tour { border: 1px solid var(--line-2); background: var(--panel);
        border-radius: var(--r-lg); padding: 22px 24px; margin: 0 0 26px; }
.tour-head { display: flex; align-items: flex-start; justify-content: space-between;
             gap: 16px; }
.tour-eyebrow { display: block; color: var(--accent); font-size: 14px;
                letter-spacing: .12em; text-transform: uppercase;
                margin-bottom: 6px; }
.tour-title { margin: 0; font-size: 21px; }
.tour-steps { list-style: none; margin: 20px 0 0; padding: 0;
              display: grid; gap: 18px 28px;
              grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tour-step { display: flex; gap: 13px; align-items: flex-start; min-width: 0; }
.tour-num { flex: none; width: 26px; height: 26px; border-radius: 50%;
            border: 1px solid var(--line-2); color: var(--ink-3);
            font-family: var(--mono); font-size: 14px; line-height: 24px;
            text-align: center; }
.tour-step-title { display: block; color: var(--ink); margin-bottom: 4px; }
.tour-step p { color: var(--ink-2); }
.tour-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
             margin: 22px 0 0; padding-top: 18px;
             border-top: 1px solid var(--line); color: var(--ink-3); }
@media (max-width: 860px) {
  .tour-steps { grid-template-columns: minmax(0, 1fr); }
}

/* v3.6, chapter 6 — a conversation several people share. */
.bubble-who { display: block; opacity: .8; margin-bottom: 3px; }
.sharing { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.sharing-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sharing-form { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; }
.sharing-pick { max-width: 260px; }
.sharing-note { margin: 8px 0 0; color: var(--ink-3); }
.sharing-error { margin: 10px 0 0; }
.sharing-error[hidden] { display: none; }
.chip-owner { opacity: .85; }

/* v3.6.1 — the map of the installation on Home.
   Inline SVG, no library, no inline style: the content policy allows a script
   and a stylesheet from this host and nothing else, so every coordinate is an
   attribute and every colour and animation is here. */
.system-map { margin: 22px 0 4px; position: relative; }
.map { width: 100%; height: auto; display: block; overflow: visible;
       position: relative; z-index: 1; }

/* v3.6.2 — the particle field. Behind everything, inert to the pointer, and
   sized by the script from the box it sits in. It carries no information: it is
   the one decorative thing on the screen, and it is kept faint enough that the
   nodes on top of it stay the thing you look at. */
.particles { position: absolute; inset: 0; width: 100%; height: 100%;
             display: block; z-index: 0; pointer-events: none; }


/* v3.6.4 — the tour, one card at a time.
   A wall of steps on a dark screen is read by nobody. One idea on screen, a
   count, and two arrows: the reader knows how much is left, which a scrolling
   list never tells them. */
.tour { border: 1px solid var(--line-2); background: var(--panel);
        border-radius: 3px; padding: 20px 24px 18px; margin: 0 0 28px; }
.tour-head { display: flex; align-items: center; justify-content: space-between;
             gap: 16px; }
.tour-eyebrow { color: var(--accent); font-size: 14px; letter-spacing: .14em;
                text-transform: uppercase; }
.tour-stage { min-height: 132px; display: flex; align-items: center;
              padding: 18px 0 6px; }
.tour-slide[hidden] { display: none; }
.tour-slide { max-width: 62ch; }
.tour-count { display: block; color: var(--ink-3); font-family: var(--mono);
              font-size: 14px; margin-bottom: 8px; }
.tour-slide-title { font-size: 26px; margin: 0 0 8px; }
.tour-slide-body { color: var(--ink-2); font-size: 17px; line-height: 1.6;
                   margin: 0; }
.tour-foot { display: flex; align-items: center; gap: 16px;
             padding-top: 16px; border-top: 1px solid var(--line); }
.tour-prev { min-width: 42px; }
.tour-prev[disabled] { opacity: .35; cursor: default; }
.tour-pips { list-style: none; display: flex; gap: 7px; margin: 0; padding: 0;
             flex: 1; }
.tour-pip { width: 6px; height: 6px; border-radius: 50%;
            background: var(--line-2); }
.tour-pip.on { background: var(--accent); }

/* The engine cell on the band: a dot that means something, inline with a word,
   rather than a status floating in a corner nobody reads twice. */
.system-v-text .system-dot { display: inline-block; margin-right: 9px;
                             vertical-align: middle; }
.system-cell .system-v-text { font-size: 20px; }

/* ---------- rooms — v3.8 ---------- */

/* People talking to each other, with one agent present. The visual grammar is
   deliberately not the chat screen's: a chat is a question and an answer taking
   turns, a room is a column of voices where the name matters more than the
   side. Nothing is aligned right — alternating sides makes a three-person
   thread unreadable, which is exactly the case this screen exists for. */

.room { border: 1px solid var(--line); background: var(--panel);
        border-radius: var(--r-lg); padding: 0; margin: 0 0 16px;
        overflow: hidden; }
.room-feed { list-style: none; margin: 0; padding: 0; }
.room-msg { padding: 12px 22px; border-left: 2px solid transparent; }
.room-msg + .room-msg { border-top: 1px solid var(--line); }
.room-who { display: block; font-family: var(--sans); font-size: 14px;
            font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
            color: var(--ink-3); margin: 0 0 5px; }
.room-body { font-size: 17px; line-height: 1.6; color: var(--ink);
             max-width: 74ch; overflow-wrap: break-word; }

/* The agent is marked, always. In a thread between people, a machine that looks
   like one of them is a machine somebody will quote as a colleague. */
.room-msg-agent { background: var(--panel-2); border-left-color: var(--accent-2); }
.room-msg-agent .room-who { color: var(--accent); }

/* Its own band, with a rule above it: sitting flush under the last message it
   reads as part of what that person wrote. */
.room-waiting { padding: 14px 22px; margin: 0; color: var(--ink-3);
                font-size: 15px; border-top: 1px solid var(--line);
                background: var(--bg-deep); }

.room-say { display: flex; gap: 12px; align-items: flex-end; margin: 0 0 8px; }
.room-say textarea { flex: 1; font: inherit; font-size: 17px; line-height: 1.5;
                     background: var(--panel); color: var(--ink);
                     border: 1px solid var(--line-2); border-radius: var(--r-md);
                     padding: 12px 14px; resize: vertical; }
.room-say textarea:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
                   clip-path: inset(50%); white-space: nowrap; }

/* ==== OSTEN-V4-LAYER:BEGIN — managed block, do not edit between markers ====
   Appended to app.css by ui-v4/install.sh. Removing everything between the two
   markers restores the previous look exactly; the installer does that itself
   before re-appending, so running it twice is safe.

   What this layer does, and the two brand rules it deliberately overturns:

     - "2px corners, past 4px it reads as consumer SaaS". Untrue. Linear,
       Vercel, Raycast and the Stripe dashboard sit between 8 and 14px. What
       reads as consumer is pastel, mascots and emoji, never the radius.
     - "box-shadow: none !important" on the universal selector. That removed
       every means of putting one surface above another. No drop shadow is
       introduced here either: a block is raised by a 1px light line along its
       top edge, which is how a dark interface says "raised" without smearing
       grey underneath.

   What it keeps, because they are the difference between Osten and every
   other agent SaaS: the chassis stays achromatic, the accent still means
   "you can act on this", green PASS / amber WATCH / red FAIL keep their
   meaning and nothing decorative borrows them, and anything measured stays
   monospaced and tabular.

   Contrast, measured against the new grounds rather than assumed:

                         bg        panel     panel-2   panel-3
                         #0A0C0F   #151A21   #212932   #2C3540
     ink     #F4F1EB      17.37     15.50     13.05     11.02
     ink-2   #C9D0D9      12.60     11.24      9.46      7.99
     ink-3   #A6AFBA       8.82      7.87      6.63      5.60
     accent  #6E8CFF       6.40      5.71      4.80      4.06
     pass    #4FA96B       6.73      6.01      5.06      4.27
     watch   #D4A03C       8.29      7.40      6.23      5.26
     fail    #D95F4C       5.31      4.74      3.99      3.37

   Secondary text stays above the 7:1 floor the standard sets. One value is
   under 4.5:1 as before: Fail on panel-3, at 3.37. It affects a failed-state
   tag whose own background is a tint of Fail over panel, where it measures
   4.74 — it is written down here rather than left to be found.
   ========================================================================== */

:root{
  /* ---- ground and surfaces. The ladder between levels is what was missing:
         v3.8 separated panel from page by 1.13, which no eye resolves. ---- */
  --bg:        #0A0C0F;
  --bg-deep:   #07090B;
  --panel:     #151A21;
  --panel-2:   #212932;
  --panel-3:   #2C3540;

  /* ---- two rules with two jobs. v3.8 used one value for both, which is why
         a block edge ended up as discreet as a table row. ---- */
  --line:      #252D37;   /* inside a block: rows, separators. Stays quiet. */
  --edge:      #3B4653;   /* the boundary of a block. 1.85:1, seen at a glance */
  --line-2:    #4A5766;   /* hover, and any edge that has to answer. 2.37:1 */

  --ink:       #F4F1EB;
  --ink-2:     #C9D0D9;
  --ink-3:     #A6AFBA;

  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 8px;

  --banner: 70px;         /* was 96: the masthead was two stacked lines */

  --panel-grad: linear-gradient(180deg, #1A2029 0%, #141920 100%);
  --elev:    inset 0 1px 0 rgba(255,255,255,.055);
  --elev-hi: inset 0 1px 0 rgba(255,255,255,.10);
}

/* ---------- corners ------------------------------------------------------ */

.tile, .panel, .card, .last, .banner, .sheet-box, .tool, .grid, .table-wrap,
.drop-inline, .composer, .bubble-body, .kpi, .queue-item, .meter-card, .room,
.account, .fold, .reports, .gauge, .agent-tile, .step, .filters, .doc, .empty,
.gate-box, .dock-panel, .tour, .dropzone, .rule, .preview, .onboard-card,
.guide-card, .home, .system-map, .intro-figure .flow {
  border-radius: var(--r-lg);
}
.rail-link, .rail-agent, .face, .who-avatar, .ai, .mark-glyph, .dock-glyph,
.answer-thumb, .step-n, .tour-num, .hbar-track, .meter-svg, .gauge-track,
.sharebar-track { border-radius: var(--r-md); }
.chip, .tag, .tool-count, .pill, .chip-file, .principles li { border-radius: 999px; }
button, .button, .ghost, .danger { border-radius: 999px; }
input[type=text], input[type=password], input[type=search], input[type=date],
select, textarea { border-radius: var(--r-md); }

/* ---------- relief, without a single drop shadow ------------------------- */
/* The universal `box-shadow: none !important` in the brand layer is beaten
   here by higher specificity carrying its own !important. Nothing else in the
   file regains a shadow. */

.panel, .card, .kpi, .tile, .queue-item, .meter-card, .room, .tour, .account,
.fold, .reports, .gauge, .agent-tile, .step, .filters, .gate-box, .sheet-box,
.dock-panel, .composer, .doc, .onboard-card, .guide-card, .home {
  box-shadow: var(--elev) !important;
}
.card:hover, .kpi:hover, .tile:hover, .agent-tile:hover, .onboard-card:hover {
  box-shadow: var(--elev-hi) !important;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(110,140,255,.14) !important;
}

/* ---------- a block is a surface, not an outline ------------------------- */

.panel, .card, .kpi, .tile, .queue-item, .meter-card, .room, .account, .fold,
.reports, .doc {
  background-image: var(--panel-grad);
}
.panel, .card, .kpi, .tile, .queue-item, .meter-card, .room, .account, .fold,
.reports, .gauge, .agent-tile, .step, .filters, .last, .who, .doc, .empty,
.rule, .preview, .table-wrap {
  border-color: var(--edge);
}
.grid th { border-bottom-color: var(--edge); }
.page-head, .band-head, .detail-head, .chat-head, .system-band, .router,
.sec-head { border-bottom-color: var(--edge); }

/* ---------- the pointer has to land on something ------------------------- */

.card, .kpi, .tile, .agent-tile, .onboard-card {
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.card:hover, .kpi:hover, .tile:hover, .agent-tile:hover, .onboard-card:hover {
  border-color: var(--line-2); transform: translateY(-2px);
}
.filerow, .grid tbody tr, .rail-link, .rail-agent {
  transition: background .14s ease, border-color .14s ease;
}
.filerow:hover { background: var(--panel-2); border-left-color: var(--accent); }
.grid tbody tr:hover { background: var(--panel-2); }
.grid tbody tr:hover td:first-child {
  box-shadow: inset 2px 0 0 var(--accent) !important;
}
.rail-link:hover { background: var(--panel-2); }
.rail-link.on { border-color: var(--line-2); }

/* ---------- air. Limova's real weapon is not colour, it is space --------- */

.page { padding: 44px 44px 88px; }
.panel { padding: 24px; }
.panel + .panel { margin-top: 20px; }
.card { padding: 22px; gap: 16px; }
.kpi { padding: 20px 22px; }
.kpis { gap: 16px; margin-bottom: 34px; }
.band { margin-bottom: 52px; }
.cards { gap: 18px; }
.filerow { padding: 15px 14px 15px 12px; }
.grid td { padding: 13px 14px; }

/* ---------- type: one step up, no rescale ------------------------------- */

h1 { font-size: 38px; }
.kpi-v { font-size: 42px; }
.recap-count { font-size: 46px; }
.page-head .lede, .intro-band .lede, .agent-hero .lede { font-size: 19.5px; }
.eyebrow, .tour-eyebrow {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(110,140,255,.12); border: 1px solid rgba(110,140,255,.22);
  font-size: 14px; letter-spacing: .14em;
}

/* ---------- the masthead: one line, and 26px given back to every screen --- */
/* Standard §7 rule 3, applied literally at last: the square is Bone, the word
   OSTEN is Bone, and only the crossing line and the descriptor carry the
   colour of the vertical. The three paths of the sign are addressed by
   position, so no template changes: paths 1 and 2 draw the square, path 3 is
   the line that crosses it. */

.osten-bar {
  flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 16px; height: var(--banner); padding: 0 26px;
  border-bottom: 1px solid var(--edge);
}
.osten-sign { gap: 12px; }
.osten-sign svg { width: 24px; height: 24px; color: var(--ink); }
.osten-sign svg path:nth-of-type(3) { stroke: var(--mark); }
.osten-word { font-size: 18px; color: var(--ink); }
.osten-vertical {
  font-size: 14px; letter-spacing: .26em; text-indent: .26em; color: var(--mark);
}

/* ---------- the sign-in box never distributes its own height ------------- */
/* Defensive, and deliberately so: `align-content: start` makes the accordion
   impossible rather than merely absent, whatever the row it lands in. */

body.gate .gate-box {
  align-self: center; justify-self: center; align-content: start;
  width: 360px; padding: 30px; gap: 18px;
}
body.gate .gate-box form { align-content: start; }

/* ---------- states keep their meaning ------------------------------------ */

.tag { padding: 4px 12px; font-size: 14px; }
.tag-done, .tag-applied, .tag-approved, .ok, .status-pass, .banner-ok {
  border-color: color-mix(in srgb, var(--pass) 42%, transparent);
}
.tag-action, .tag-pending, .banner-warn, .status-watch {
  border-color: color-mix(in srgb, var(--watch) 42%, transparent);
}
.tag-failed, .tag-rejected, .banner-error, .status-fail {
  border-color: color-mix(in srgb, var(--fail) 42%, transparent);
}
.tag-new, .tag-running, .tag-wip {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
}

@media (max-width: 900px) { .page { padding: 24px 18px 64px; } }


/* ==========================================================================
   v4.1 — the masthead centred, the promise where it lands, the field given
   room. Everything below needs the markup the template patch inserts; without
   it these rules match nothing and change nothing.
   ========================================================================== */

/* ---------- the masthead, centred ---------- */

.osten-bar { justify-content: center; }

/* ---------- the promise, at the foot of every screen ---------- */
/* Quiet on purpose. A promise repeated on forty screens a day stops being
   read; this one is a signature, not a banner. The loud placements are the
   sign-in screen and Home, where somebody arrives rather than works. */

.osten-foot {
  margin: 64px 0 0; padding: 26px 0 0;
  border-top: 1px solid var(--edge);
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  text-align: center;
}
.osten-foot-line { margin: 0; font-size: 15px; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink-2); }
.osten-foot-line em { font-style: normal; color: var(--accent); }
.osten-foot-sub { margin: 0; font-size: 14px; color: var(--ink-3); max-width: 64ch; }
.page-agent .osten-foot { display: none; }

/* ---------- the sign-in screen ---------- */
/* Three rows now: the bar, the promise, the box. The box keeps its own row and
   stays centred in it. */

body.gate { grid-template-rows: var(--banner) auto minmax(0, 1fr); }
.gate-promise {
  padding: 54px 24px 10px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.gate-promise-line {
  margin: 0; font-size: clamp(24px, 3.2vw, 36px); font-weight: 640;
  letter-spacing: -.03em; line-height: 1.15; color: var(--ink);
}
.gate-promise-line em { font-style: normal; color: var(--accent); }
.gate-promise-sub {
  margin: 0; font-size: 16px; color: var(--ink-2); max-width: 52ch;
}
@media (max-height: 760px) { .gate-promise { padding-top: 26px; } }

/* ---------- Home: the field, and the promise on it ---------- */

canvas.field { height: 420px; }
.field-promise {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 46px 30px 28px;
  background: linear-gradient(to top, var(--bg) 40%, rgba(10,12,15,0));
  pointer-events: none;
}
.field-promise-line {
  margin: 0 0 10px; font-size: clamp(24px, 3vw, 38px); font-weight: 640;
  letter-spacing: -.032em; line-height: 1.14; max-width: 22ch; color: var(--ink);
}
.field-promise-line em { font-style: normal; color: var(--accent); }
.field-promise-sub {
  margin: 0; font-size: 16px; color: var(--ink-2); max-width: 58ch;
}
.system-band { padding-bottom: 30px; margin-bottom: 34px; }
.system-title { margin-bottom: 20px; }
.system-grid { margin-top: 28px; }

@media (max-width: 720px) {
  .field-promise { position: static; padding: 20px 0 0; background: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* the canvas stays: it draws one still frame rather than nothing, so the
     promise keeps the ground it is set on */
  .field { display: block; }
}


/* ==========================================================================
   v4.2 — three defects and one reduction.
   ========================================================================== */

/* ---------- the green that was left behind ---------- */
/* app.css still turns every primary button #8FB89F on hover: a grey-green from
   before the brand was decided. On an Osten screen a green means PASS, so a
   button that turns green when the pointer lands on it says "this succeeded"
   before anybody has pressed it. Corrected to a lighter accent, which is what
   the rule "the accent means you can act on this" actually asks for. */

button:hover, .button:hover, button[type=submit]:hover {
  background: #8AA3FF; color: #0A1024;
}
.ghost:hover, .danger:hover { background: var(--panel-3); color: var(--ink); }
.danger:hover { color: var(--fail); }

/* ---------- the promise needs air under the field ---------- */

canvas.field { height: 470px; }
.field-promise { padding: 72px 30px 34px; }
.field-promise-line { margin-bottom: 12px; }
.system-band { padding-bottom: 34px; margin-bottom: 40px; }

/* ---------- the reverse prompt, on one line ---------- */
/* "Find who" was wrapping into two lines inside a pill, which is what a button
   does when it is given a width and a long label. */

.router { padding-bottom: 26px; margin-bottom: 30px; }
.router-form button { white-space: nowrap; flex: none; }
.router-label { font-size: 14px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }

/* ---------- the tour, half the height ---------- */
/* It is read once. It does not deserve a third of the home page for the life
   of the account. */

.tour { padding: 16px 20px 14px; margin-bottom: 22px; }
.tour-stage { min-height: 0; padding: 12px 0 4px; }
.tour-slide-title { font-size: 20px; margin-bottom: 6px; }
.tour-slide-body { font-size: 15.5px; }
.tour-foot { padding-top: 12px; }
.tour-eyebrow { padding: 4px 12px; }

/* ---------- the companion, a row rather than a poster ---------- */

.guide-card { padding: 16px 20px; gap: 16px; margin-bottom: 30px; }
.guide-card .sz-96 { width: 52px; height: 52px; }
.guide-top h2 { font-size: 19px; }
.guide-lede { font-size: 15px; margin: 0; }
.guide-card .btn, .guide-card .button { padding: 7px 14px; font-size: 14px; }


/* ---------- v4.3 — the tour leaves the page ---------- */

.home-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 26px; }
.home-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; padding: 12px 18px; border-radius: 999px;
  background: var(--accent-soft, rgba(110,140,255,.12));
  border: 1px solid rgba(110,140,255,.24); color: var(--ink); cursor: pointer;
}
.home-chip:hover { background: rgba(110,140,255,.18); border-color: var(--accent);
  box-shadow: none; }
.home-chip-k { font-size: 14px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); }
.home-chip-v { font-size: 15px; color: var(--ink-2); }

.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 90; display: grid;
  place-items: center; padding: 24px; background: rgba(7,9,11,.78); }
.modal-box { width: min(720px, 100%); max-height: 84vh; overflow-y: auto; }
.modal-box .tour { margin: 0; padding: 24px 26px 20px; }
.modal-box .tour-stage { min-height: 104px; }
body.modal-open { overflow: hidden; }


/* ---------- v4.4 — Learnings, read rather than listed ---------- */

/* The band the screen opens on. Four measured figures, monospaced and tabular
   like every measured value in this interface, so the eye can compare them
   without reading them. */
.learned { border: 1px solid var(--edge); background: var(--panel);
  background-image: var(--panel-grad); border-radius: var(--r-lg);
  box-shadow: var(--elev) !important; padding: 24px 26px 20px; margin: 0 0 34px; }
.learned-grid { display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.learned-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.learned-k { font-size: 14px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); }
.learned-v { font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 38px; font-weight: 600; letter-spacing: -.035em; line-height: 1.05;
  color: var(--ink); }
.learned-v-date { font-size: 22px; letter-spacing: -.01em; }
.learned-note { margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; }

/* A pack, and the rules inside it. */
.pack { margin-bottom: 20px; }
.pack-name { font-size: 17px; font-weight: 600; display: block; }
.pack .panel-body { padding-top: 4px; }

.rule { border: 1px solid var(--edge); background: var(--panel-2);
  border-radius: var(--r-md); padding: 18px 20px; margin: 14px 0 0; }
.rule:first-child { margin-top: 10px; }
.rule-head { display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 10px; }
.rule-n { flex: none; font-family: var(--mono); font-size: 14px;
  font-weight: 600; color: var(--accent); background: rgba(110,140,255,.12);
  border: 1px solid rgba(110,140,255,.24); border-radius: 999px;
  padding: 3px 11px; letter-spacing: .04em; }
.rule-title { display: block; font-size: 17px; font-weight: 600;
  letter-spacing: -.012em; line-height: 1.3; }
.rule-by { display: block; margin-top: 3px; font-family: var(--mono);
  font-size: 14px; }
.rule-text { margin: 0; color: var(--ink-2); white-space: pre-wrap;
  overflow-wrap: break-word; max-width: 78ch; }
.rule-actions { margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line); }

/* Retired: the same card, visibly out of service. Dimmed rather than hidden —
   the point of keeping it is that somebody can read it and change their mind. */
.rule-retired { background: none; border-style: dashed; }
.rule-retired .rule-n { color: var(--ink-3); background: none;
  border-color: var(--line-2); }
.rule-retired .rule-title { color: var(--ink-2); }
.rule-retired .rule-text { color: var(--ink-3); }


/* ==========================================================================
   v4.5 — Home stops repeating itself, and three measured spacing defects.
   ========================================================================== */

/* ---------- Home: the band said twice what the cards say once ---------- */
/* Engine, delivered this week, next run, last file: every one of those four
   figures is already on the agent cards further down the same page. A number
   printed twice on one screen is a number nobody trusts the second time. */
.system-grid { display: none; }

/* The companion card is gone from Home. The onboarding agent is an agent like
   the others and it is in the rail; a card on the home page that opens a chat
   reads as a chatbot, which is the one thing this product is not. */
.guide-card { display: none; }

/* ---------- the promise, lower and with room ---------- */
canvas.field { height: 520px; }
.field-promise { padding: 96px 30px 40px; }
.field-promise-line { margin-bottom: 14px; }
.system-band { padding-bottom: 40px; margin-bottom: 44px; }

/* ---------- the sign-in box and the account form ---------- */
/* Belt and braces: the box may not distribute its own height, and neither may
   the form inside it. !important here because the defect is a stretch coming
   from a grid two levels up, and a later rule of equal weight would not win. */
body.gate .gate-box,
body.gate .gate-box form,
.account-body .stack,
.account-body form.ask,
form.correct-form {
  align-content: start !important;
  align-items: start !important;
}
body.gate .gate-box { align-self: center !important; gap: 20px !important; }
body.gate .gate-box form { gap: 16px !important; }
body.gate .gate-box .field { display: block; }
body.gate .gate-box .field + .field { margin-top: 2px; }
.gate-promise { padding: 40px 24px 8px; }

/* ---------- the filter panels stop reserving an empty screen ---------- */
/* Library and the activity log both showed a filter block several hundred
   pixels tall with nothing in it: the row is a flex container aligned to its
   own bottom, so any child that grows leaves the void above it. */
.filters {
  align-items: flex-end;
  align-content: flex-start;
  padding: 18px 20px;
  gap: 14px 16px;
}
.filters .field { flex: 0 1 220px; min-width: 160px; }
.filters .field-wide { flex: 1 1 320px; }
.filters .actions { flex: 0 0 auto; margin-left: auto; align-self: flex-end; }
.filters select, .filters input { min-height: 40px; }

/* ---------- the file list, denser and easier to scan ---------- */
.filerow { padding: 12px 14px 12px 12px; gap: 12px; }
.filerow-id b { font-size: 16px; }
.filerow-id .fine { font-size: 14px; opacity: .8; }
.filerow-actions { gap: 6px; }
.filerow-actions .ghost, .filerow-actions .button { padding: 6px 13px; font-size: 14px; }

/* ---------- the activity log, readable at a glance ---------- */
.grid.mono td { font-size: 14px; }
.grid td:first-child { white-space: nowrap; }
.page-head + .filters, .page-head + .panel { margin-top: 4px; }


/* ---------- v4.6 — the field answers the pointer ---------- */
/* Drawn as HTML rather than on the canvas: text on a canvas cannot be
   selected, cannot wrap properly and does not inherit the type scale. The
   canvas draws the picture; the bubble is a real element on top of it. */

.field-bubble[hidden] { display: none; }
.field-bubble {
  position: absolute; z-index: 3; width: 260px; pointer-events: none;
  padding: 14px 16px; border-radius: var(--r-md);
  background: var(--panel-2); border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.field-bubble b { display: block; font-size: 16px; font-weight: 640;
  letter-spacing: -.01em; color: var(--ink); }
.field-bubble span { display: block; margin-top: 2px; font-family: var(--mono);
  font-size: 14px; color: var(--accent); }
.field-bubble p { margin: 8px 0 0; font-size: 14px; line-height: 1.5;
  color: var(--ink-2); }


/* ==========================================================================
   v4.7 — the rail keeps the work, Settings keeps the rest, and an agent's
   page gets a place to read.
   ========================================================================== */

/* ---------- where am I ---------- */
/* Six screens left the rail. A screen you reach from one place has to say
   which place, or the way back is the browser button — and a product whose
   way back is the browser button has no navigation. */
.crumb {
  margin: 0 0 18px; font-size: 14px; letter-spacing: .01em; color: var(--ink-3);
}
.crumb a { color: var(--ink-2); text-decoration: none;
  border-bottom: 1px solid var(--line-2); padding-bottom: 1px; }
.crumb a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- Settings, as a hub ---------- */
/* Each card carries a figure read live. A card that only names a screen is a
   menu; a card that says "41 documents in 6 folders" answers the question that
   made you open Settings in the first place. */
.hub {
  display: grid; gap: 16px; margin-bottom: 34px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.hub-card {
  display: flex; gap: 16px; align-items: flex-start; text-decoration: none;
  padding: 20px 22px; border-radius: var(--r-lg);
  border: 1px solid var(--edge); background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.hub-card:hover {
  background: var(--panel-2); border-color: var(--line-2);
  transform: translateY(-1px);
}
.hub-icon { flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: rgba(110,140,255,.10); border: 1px solid rgba(110,140,255,.22);
  color: var(--accent); }
.hub-icon svg { width: 20px; height: 20px; }
.hub-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hub-body b { font-size: 17px; font-weight: 620; letter-spacing: -.012em;
  color: var(--ink); }
.hub-what { font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
  max-width: 44ch; }
.hub-figure { margin-top: 2px; font-family: var(--mono); font-size: 14px;
  color: var(--accent); font-variant-numeric: tabular-nums; }

.section-title { margin: 34px 0 6px; font-size: 20px; font-weight: 620;
  letter-spacing: -.014em; }

/* ---------- pages, not scrolls ---------- */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.pager .fine { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- the activity log ---------- */
.grid.log td { font-size: 14.5px; vertical-align: top; }
.grid.log td b { font-weight: 600; color: var(--ink); }
.nowrap { white-space: nowrap; }
.filelist-airy .filerow { padding: 15px 14px 15px 12px; }
.filelist-airy .filerow-id b { font-size: 16.5px; letter-spacing: -.01em; }

/* ---------- an agent's page: the tools go up, the column reads ---------- */
.hero-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 16px;
}
.hero-tools .button { margin-left: auto; }

/* The two columns. app.css already lays this out and nothing in this file can
   measure it from here, so the width is stated twice — once as a grid track,
   once as a flex basis. Whichever of the two that file uses, the other is
   inert. */
.agent-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
.agent-side { flex: 0 0 480px; min-width: 0; max-width: 100%; }
@media (max-width: 1360px) {
  .agent-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
  .agent-side { flex-basis: 400px; }
}
@media (max-width: 1080px) {
  .agent-columns { grid-template-columns: 1fr; }
  .agent-side { flex-basis: auto; width: 100%; }
}

/* ---------- long plain text stops being a wall ---------- */
/* A deliverable that is not Markdown was rendered as one unbroken monospace
   block the width of the window. Wrapped, measured and given a line height,
   the same file is readable without leaving the screen. */
.sheet-body pre.answer, .bubble-answer {
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 14.5px; line-height: 1.7; max-width: 82ch;
}
.sheet-body .markdown p, .sheet-body .markdown li,
.sheet-body .markdown blockquote { max-width: 74ch; }
.sheet-body .markdown { font-size: 16px; line-height: 1.7; }

/* ---------- a room says who is in it, at the top ---------- */
.room-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 16px 20px; margin-bottom: 6px;
  border: 1px solid var(--edge); background: var(--panel);
  border-radius: var(--r-lg);
}
.room-people { display: flex; align-items: center; gap: 14px;
  flex: 1 1 320px; min-width: 0; }
.room-people-lead { flex: none; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; font-size: 14px; color: var(--ink-3); }
.room-people .chip-row { display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0; padding: 0; }
.room-people .chip { display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px; }
.room-people .who-avatar { width: 26px; height: 26px; font-size: 14px; }
.chip-agent { padding: 6px 12px !important; gap: 8px; }
.chip-agent .fine { font-family: var(--mono); }
.room-invite { display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto; margin-left: auto; }
.room-invite select { min-height: 40px; min-width: 180px; }
.room-invite-note { margin: 10px 0 22px; max-width: 76ch; }
@media (max-width: 720px) {
  .room-invite { margin-left: 0; width: 100%; }
  .room-invite select { flex: 1 1 auto; min-width: 0; }
}

/* ==========================================================================
   v4.8 — one class name was doing two jobs, and it cost four screens.
   ========================================================================== */

/* ---------- the 600px of nothing under the filters ---------- */
/* Measured, not guessed. `field` names two different things in this codebase:
   the canvas on Home, and every label-plus-input on Library, the activity log,
   the sign-in box and My account. The base stylesheet gives `.field` a height
   of 300px because the canvas needs one — so since v3.6.3 every form field on
   those four screens has been 300 pixels tall, and the v4 layer raised it to
   520. That is the void under the filter bar, and it is also what the account
   and sign-in spacing patches of v4.5 were treating without naming.

   The height belongs to the canvas and to nothing else. Two rules, and the
   symptom disappears everywhere at once rather than screen by screen. */
.field:not(canvas) { height: auto; }
.filters .field { height: auto; }

/* ---------- a card is not a paragraph with a link in it ---------- */
/* The whole card is the link, so the underline the base gives every anchor on
   hover lands across three lines of description. The card already answers the
   pointer with its own background and border. */
.hub-card, .hub-card:hover, .hub-card:focus { text-decoration: none; }
.hub-card b, .hub-card span { text-decoration: none; }

/* ---------- the rail: one group ---------- */
/* Home, Rooms, the agents, then what they produce. Two labelled groups made a
   division nobody was making in their head — the reports are the agents' work,
   not a separate department. */
.rail-group + .rail-group { margin-top: 4px; }
.rail-foot .rail-link { margin-top: 2px; }

/* ---------- the weekly meter ---------- */
.gauge-label { white-space: nowrap; }

/* ==========================================================================
   v4.8.4 — the agent's page is one column, and the conversation gets the room.
   ========================================================================== */

/* The right-hand column is gone from the template, so the grid stops reserving
   a track for it. Kept as a grid rather than switched to a block: the thread is
   the only box on this screen allowed to scroll, and it can only do that while
   its parent still hands it a bounded height. */
.agent-columns { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1360px) { .agent-columns { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1080px) { .agent-columns { grid-template-columns: 1fr; } }

/* ---------- the buttons, at the size of buttons ---------- */
/* `.tool` was drawn for a two-by-two grid in a narrow column: a tall tile with
   the icon over the word over the count. In a header row that shape reads as
   four cards competing with the title. On one line they are what they are —
   four small buttons and a count. */
.hero-tools .tool {
  flex-direction: row; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
}
.hero-tools .tool svg { width: 17px; height: 17px; }
.hero-tools .tool-label { font-size: 14.5px; font-weight: 560; }
.hero-tools .tool-count {
  font-size: 14px; padding: 1px 7px; border-radius: 999px;
  background: rgba(110,140,255,.14); border: 1px solid rgba(110,140,255,.24);
}
.hero-tools { gap: 8px; margin-top: 14px; }

/* ---------- and the height that column was taking ---------- */
/* This screen governs its own height, so every pixel above the thread is a
   pixel the conversation does not get. The portrait was 88, the lede was set
   at the page-head size, and the hero carried the padding of a page header.
   None of that is load-bearing on a screen somebody comes to in order to
   type. */
.page-agent .agent-hero { gap: 16px; margin-bottom: 10px; }
.page-agent .agent-hero .face { width: 56px; height: 56px; }
.page-agent .agent-hero h1 { font-size: 23px; }
.page-agent .agent-hero .agent-job { margin: 2px 0 0; }
.page-agent .agent-hero .lede {
  font-size: 15.5px; line-height: 1.5; margin: 6px 0 0; max-width: 92ch;
}
.page-agent .agent-hero .chips { margin: 8px 0 0; }
.page-agent { padding-bottom: 14px; }
.page-agent .chat-wrap .panel-head { padding-bottom: 10px; margin-bottom: 10px; }
.page-agent .composer-note { margin-top: 8px; }

/* The window that opens from those buttons now carries the file list too, so
   it is allowed to be tall enough to hold one. */
.sheet-body .last { padding: 10px 2px; }
.sheet-body .last + .last { border-top: 1px solid var(--line); }

/* ==========================================================================
   v4.8.5 — a pass over the whole interface, with a ruler.
   ========================================================================== */

/* ---------- the conversation gets the screen ---------- */
/* This is the one screen that governs its own height, so height here is a
   fixed budget and everything above the thread spends it. Measured on a
   1200px window before this rule: the masthead 70, the hero 180, the heading
   row 46, the note under the box 52 — 348 pixels of chrome for a box that got
   500. Each of the four is reduced to what it is actually for. */
.osten-bar { height: 56px; }
:root { --banner: 56px; }
.page-agent .agent-hero { gap: 14px; margin-bottom: 8px; padding-bottom: 0; }
.page-agent .agent-hero .face { width: 48px; height: 48px; }
.page-agent .agent-hero h1 { font-size: 21px; line-height: 1.2; }
.page-agent .agent-hero .agent-job { font-size: 14.5px; margin: 1px 0 0; }
.chat-head-note { margin: 0 0 8px; }
.page-agent .composer-note { margin-top: 6px; text-align: left; }
.page-agent .thread { margin-bottom: 14px; }

/* ---------- a message is allowed to be a paragraph wide ---------- */
/* 88% of a column that used to be two-thirds of the page was a sensible cap.
   The column is the page now, so the same percentage draws a ribbon down the
   middle with a wide empty gutter on each side. The cap moves onto the text,
   where a measure belongs, and the bubble takes the room it needs. */
.thread .bubble { max-width: 100%; }
.bubble-body { max-width: 82ch; }
.bubble-you .bubble-body { max-width: 68ch; }
.thread { gap: 14px; }

/* Show full text belongs under the text it folds. The button is appended to
   the bubble body now rather than beside it; this is what it looks like there. */
.bubble-more { margin-top: 10px; text-decoration: none; opacity: .9; }
.bubble-more:hover { opacity: 1; text-decoration: underline; }

/* ---------- the rail breathes where it changes subject ---------- */
/* The agents are people and the meter is a measurement. Running one into the
   other made the meter read as a ninth agent. */
.rail-agents { margin-bottom: 4px; }
.rail-foot { margin-top: 26px; }
.rail-rule { margin: 0 0 16px; }
.rail-foot .gauge { margin-bottom: 14px; }

/* ---------- and the same ruler over the rest ---------- */
/* Three measurements taken across the other screens, none of them a matter of
   taste: a page head that took 52 pixels to say one word, a lede set wider
   than the eye tracks, and panels whose padding did not match their siblings. */
.page-head { margin-bottom: 22px; padding-bottom: 16px; }
.page-head .lede, .agent-hero .lede { max-width: 78ch; }
.section-title { margin: 28px 0 6px; }
.panel + .panel { margin-top: 16px; }

/* ==========================================================================
   v4.8.7 — an agent in the rail is a card, not a floating portrait.
   ========================================================================== */

/* Measured: `.rail-agent` carries `border: 1px solid transparent` and no
   background at rest, so the tile only exists once the pointer is on it. Eight
   agents then read as eight loose pictures on the rail's own ground rather than
   as eight things you can click. The states were all there — hover, active —
   except the one people spend all their time looking at.

   The ladder is the same one the rest of the interface uses: panel at rest,
   panel-2 on hover, and the accent reserved for the one you are on. */
.rail-agent {
  background: var(--panel);
  border-color: var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.rail-agent:hover { background: var(--panel-2); border-color: var(--line-2); }
.rail-agent.on { background: var(--panel-2); border-color: var(--accent); }
.rail-agents { gap: 9px; }
.rail-agent .face, .rail-agent .ai { border-radius: var(--r-sm); }

/* An agent with no portrait yet gets the same card, so the row stays even
   while the pictures are being made. */
.rail-agent .ai-bg { fill: var(--panel-3); }

/* ==== OSTEN-V4-LAYER:END ==== */

/* ---------- approvals (lot 1) ---------- */
.approval h2 { font-size: 17px; margin: 0; }
.approval code { font-size: 14px; }
.body-preview { white-space: pre-wrap; background: var(--bg-deep); border: 1px solid var(--line);
                border-radius: var(--r-md); padding: 12px 14px; margin: 10px 0 0; font-size: 14px;
                max-height: 320px; overflow: auto; }
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.approval details > summary { cursor: pointer; }
.approval form input[type=text] { min-width: min(200px, 100%); }
.rail-text > span { display: block; color: var(--amber); font-size: 14px; }


/* ==========================================================================
   ==== OSTEN-V5-LAYER:BEGIN — interface v4 épuré (6 September 2026) ====
   ==========================================================================

   Two themes, one set of tokens. The dark ground is anthracite, not black:
   near-white text on #0A0C0F is the strongest contrast a screen can show and
   the most tiring one to read a full report on. The light theme is the same
   layout with the tokens swapped; nothing below chooses a colour by name.

   The home animation keeps its deep black container in both themes — it was
   drawn for it — and it is the only place the old ground survives.

   Contrast, measured (WCAG ratio, text on its ground):

     dark   ink #E8E6E1 on bg #1A1D22     13.6      ink-3 #98A0AA on bg   6.2
            ink on panel #22262C          12.1      accent #6E8CFF on bg  5.6
     light  ink #1C1E22 on bg #F5F4F0     15.3      ink-3 #6B727C on bg   4.9
            accent #4460E6 on bg           5.6      amber #A8781E on bg   4.6

   Everything under 4.5 is decoration, never text. */

:root {
  /* anthracite, cool. The brown belongs to the light theme; here it appears
     only as the bronze ring around a face. Measured: ink on bg 13.6:1. */
  --bg:        #1A1D22;
  --bg-deep:   #15181C;
  --panel:     #22262C;
  --panel-2:   #2A2F36;
  --panel-3:   #343A43;
  --line:      #2F353D;
  --edge:      #414852;
  --line-2:    #4F5866;
  --ink:       #E8E6E1;
  --ink-2:     #C3C8CF;
  --ink-3:     #A6AFBA;
  --warm:      #C9A26B;   /* bronze — people only: the ring around a face */
  --warm-2:    #8F6E3F;
  --accent:    #92A6FF;
  --accent-2:  #5A78F0;
  --accent-ink:#0A1024;
  --amber:     #D4A03C;  --watch: #D4A03C;
  --red:       #F28B78;  --fail:  #F28B78;
  --pass:      #68BA82;
  --blue:      #92A6FF;
  --user-bubble: #344EA6;
  --user-bubble-ink: #FFFFFF;
  --field-bg:  #0A0C0F;   /* the one black left: the home animation */
  --field-paper: #F4F1EB; /* what the animation draws with, whatever the theme */
  --field-dust:  #A6AFBA;
  --field-accent:#6E8CFF;
  --tint-accent: rgba(110,140,255,.10);
  --tint-amber:  rgba(212,160,60,.10);
  --tint-red:    rgba(217,95,76,.10);
  --tint-pass:   rgba(79,169,107,.10);
  --panel-grad: none;
  --elev: none;
  --elev-hi: none;
  --logo-filter: none;
  color-scheme: dark;
}

:root[data-theme="light"] {
  /* the light theme is brown for real: sand paper, tan rail, dark-brown ink,
     a saddle-brown accent for what can be pressed. The masthead keeps the
     neutral label; the home animation keeps its black. Final text and status
     tokens meet 4.5:1 on the five solid surface tokens (see check_readability.py). */
  --bg:        #F1E9DC;
  --bg-deep:   #E7DAC5;
  --panel:     #FAF5EC;
  --panel-2:   #EFE3D0;
  --panel-3:   #E1D1B8;
  --line:      #DBCCB3;
  --edge:      #C4AE8E;
  --line-2:    #A88E68;
  --ink:       #2A2018;
  --ink-2:     #4F4032;
  --ink-3:     #62503D;
  --accent:    #7A5230;
  --accent-2:  #5F3E22;
  --accent-ink:#FFF8EE;
  --amber:     #754D08;  --watch: #754D08;
  --red:       #9C3525;  --fail:  #9C3525;
  --pass:      #285E35;
  --blue:      #3651BC;
  --user-bubble: #5F3E22;
  --user-bubble-ink: #FFF8EE;
  --warm:      #A8783E;
  --warm-2:    #6E4C22;
  --tint-accent: rgba(122,82,48,.10);
  --tint-amber:  rgba(168,120,30,.10);
  --tint-red:    rgba(184,67,45,.08);
  --tint-pass:   rgba(61,127,74,.09);
  --logo-filter: invert(1) hue-rotate(180deg);
  color-scheme: light;
}

/* ---------- what the earlier layers hardcoded, now on tokens ---------- */

html, body { background: var(--bg); color: var(--ink); font-size: 16px; }
.panel, .card, .kpi, .tile, .queue-item, .meter-card, .room, .account, .fold,
.reports, .doc, .gauge, .agent-tile, .step, .filters, .gate-box, .sheet-box,
.dock-panel, .composer, .onboard-card, .guide-card, .home {
  background-image: none; background-color: var(--panel);
  box-shadow: none !important; border-color: var(--edge);
}
.rail-mark img { filter: var(--logo-filter); }
.face-i { display: inline-flex; align-items: center; justify-content: center; flex: none;
          font-family: var(--sans); font-weight: 650; color: var(--accent);
          background: var(--tint-accent); border: 1px solid var(--accent); border-radius: 10px; }
.person .face-i { border-radius: 999px; }
.face-i.sz-20 { width: 20px; height: 20px; font-size: 14px; border-radius: 6px; }
.face-i.sz-28 { width: 28px; height: 28px; font-size: 14px; border-radius: 8px; }
.face-i.sz-34 { width: 34px; height: 34px; font-size: 14px; }
.face-i.sz-36 { width: 36px; height: 36px; font-size: 15px; }
.face-i.sz-40 { width: 40px; height: 40px; font-size: 16px; }
.face-i.sz-44 { width: 44px; height: 44px; font-size: 18px; }
.face-i.sz-52 { width: 52px; height: 52px; font-size: 20px; border-radius: 12px; }
.face-i.sz-56 { width: 56px; height: 56px; font-size: 22px; border-radius: 12px; }
.face-i.sz-60 { width: 60px; height: 60px; font-size: 24px; border-radius: 12px; }
.face-i.sz-72 { width: 72px; height: 72px; font-size: 28px; border-radius: 16px; }
.face-i.sz-88 { width: 88px; height: 88px; font-size: 34px; border-radius: 16px; }
.face-i.sz-96 { width: 96px; height: 96px; font-size: 36px; border-radius: 16px; }
.head-lean { align-items: flex-end; }
.chips-lean { margin-top: 22px; }
.pager-lean { margin-top: 20px; }
.decide-stack { margin: 0; flex-direction: column; align-items: stretch; gap: 10px; }
.decide-stack .pill { align-self: flex-start; }
.stack-lean { margin-top: 24px; }
.decision .subject { font-weight: 600; }
/* Document 50, B1 — these two minimums pushed a decision card to 433px. They
   are what keeps the note and its buttons on one line on a desk; `min()` keeps
   that and stops them demanding more than the screen has. */
.decision-actions .note { min-width: min(240px, 100%); flex: 1; }
.decision-actions form.row { display: flex; gap: 8px; align-items: center; flex: 1;
                             min-width: min(320px, 100%); flex-wrap: wrap; }
button.ghost, button.ghost[type=submit] { background: transparent; color: var(--ink-2);
  border: 1px solid var(--line-2); }
button.ghost:hover { background: var(--panel-2); color: var(--ink); }
button.chip, button.chip[type=submit] { background: transparent; color: var(--ink-2);
  border: 1px solid var(--line-2); min-height: 0; padding: 7px 14px; font-size: 14px; }
button.chip.on { background: var(--panel-2); color: var(--ink); border-color: var(--accent); }
.thumb-sm.sz-44 { width: 44px; height: 44px; }
details.band-lean > summary.kicker { cursor: pointer; list-style: none; }
.btn.wide { width: 100%; }
.tc { text-align: center; }
.appearance { margin-bottom: 22px; }
.row.wrap { flex-wrap: wrap; gap: 14px; }
.router { border: 0; padding: 0; margin: 0; }
body:has(.page-agent-lean) .dock, body:has(.decision) .dock { display: none; }
.banner-ok    { color: var(--accent); background: var(--tint-accent); border-color: var(--accent); }
.banner-warn  { color: var(--amber);  background: var(--tint-amber);  border-color: var(--amber); }
.banner-error { color: var(--red);    background: var(--tint-red);    border-color: var(--red); }
.tag-pending, .tag-action { color: var(--amber); background: var(--tint-amber); border-color: var(--amber); }
.tag-approved, .tag-done, .tag-applied, .tag-new, .tag-running, .tag-wip
  { color: var(--accent); background: var(--tint-accent); border-color: var(--accent); }
.tag-failed { color: var(--red); background: var(--tint-red); border-color: var(--red); }
.ai-green, .ai-blue, .ai-teal, .ai-amber, .ai-violet, .ai-slate { --ai-bg: var(--panel-2); }
.ai-green, .ai-blue { --ai-ink: var(--accent); }
.bubble-you .bubble-body { background: var(--user-bubble); color: var(--user-bubble-ink); }
.bubble-you .bubble-more { color: #FFFFFF; }
.bubble-agent .bubble-body { background: var(--panel); border: 1px solid var(--line); }
button:hover, .button:hover { background: var(--accent-2); }
.body-preview { background: var(--panel-2); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--tint-accent) !important; }
.system-map, .field-wrap { background: var(--field-bg); border: 1px solid var(--line);
                           border-radius: var(--r-lg); overflow: hidden; }
.field-promise-line, .field-promise-sub { color: #F4F1EB; }
.field-promise { background: linear-gradient(180deg, rgba(10,12,15,0) 0%, rgba(10,12,15,.92) 55%, #0A0C0F 100%); }
.system-band { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.field-promise-line em { color: #6E8CFF; }
.osten-foot { display: none; }

/* ---------- type: 16px body, nothing measured under 14 ---------- */

h1 { font-size: 32px; }
h2 { font-size: 21px; }
p  { font-size: 16px; }
.fine { font-size: 14px; }
.sub { color: var(--ink-3); font-size: 16px; margin: 6px 0 0; }
.kicker { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
          color: var(--ink-3); margin: 0 0 6px; }
.btn { font: inherit; font-weight: 570; background: var(--accent); color: var(--accent-ink);
       border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center;
       justify-content: center; gap: 8px; border-radius: 999px; text-decoration: none; }
.btn:hover { background: var(--accent-2); color: var(--accent-ink); text-decoration: none; }
button, .button, .btn { font-size: 16px; padding: 11px 20px; min-height: 44px; }
.rail-agent-name { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ghost { font-size: 15px; padding: 10px 18px; min-height: 40px; }
.ghost.sm { font-size: 14px; padding: 7px 14px; min-height: 32px; }

/* ---------- the rail ---------- */

.rail { gap: 16px; padding: 16px 14px 14px; overflow-y: auto; scrollbar-width: thin; }
.rail-foot .gauge { padding: 10px 12px; }
.rail-foot .gauge .fine { font-size: 14px; }
.rail-signout { align-self: flex-start; margin: 2px 0 0 8px; }
.rail-link { padding: 10px 12px; font-size: 16px; }
.rail-link .rail-text b { font-weight: 560; }
.rail-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
              background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 700;
              display: inline-flex; align-items: center; justify-content: center; }
.rail-agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.rail-agent { padding: 8px 2px 6px; gap: 5px; font-size: 14px; font-weight: 520; }
.rail-agent .face { width: 44px; height: 44px; }
.rail-agent.on { background: var(--panel-2); border-color: var(--accent); }
.rail-foot .rail-group a.ghost { display: none; }
.rail-foot { gap: 8px; }
.rail-foot .gauge-link .gauge { padding: 10px 12px; }

/* ---------- the ask field ---------- */

.ask { display: flex; gap: 12px; align-items: stretch; margin: 28px 0 0; }
.ask-input { flex: 1; min-width: 0; font: inherit; font-size: 17px; color: var(--ink);
             background: var(--panel); border: 1px solid var(--edge); border-radius: 999px;
             padding: 15px 22px; }
.ask-input::placeholder { color: var(--ink-3); }
.ask .btn, .ask button { border-radius: 999px; padding: 0 26px; font-size: 17px; }
.ask-hint { color: var(--ink-3); font-size: 14px; margin: 10px 0 0; }
.ask-result { margin-top: 14px; }
.ask-result .card { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; }
.ask-result .card p { margin: 0 0 8px; }
.ask-result textarea { width: 100%; font: inherit; font-size: 16px; min-height: 84px; }

/* ---------- the team, as people ---------- */

.people { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
.person { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px;
          border: 1px solid var(--line); border-radius: 999px; color: var(--ink);
          background: var(--panel); text-decoration: none; }
.person:hover { border-color: var(--line-2); text-decoration: none; }
.person .face { width: 36px; height: 36px; border-radius: 999px; }
.person b { font-weight: 600; display: block; line-height: 1.15; }
.person .j { color: var(--ink-3); font-size: 14px; display: block; }

/* ---------- one decision, on one line ---------- */

.decide-strip { display: flex; align-items: center; gap: 16px; margin: 30px 0 0; padding: 16px 20px;
                border: 1px solid var(--amber); border-radius: var(--r-lg); background: var(--panel); }
.decide-strip .pill { flex: none; }
.decide-strip .what { flex: 1; font-size: 17px; min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600;
        padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); }
.pill.wait { color: var(--amber); border-color: var(--amber); background: var(--tint-amber); }
.pill.new  { color: var(--accent); border-color: var(--accent); background: var(--tint-accent); }
.pill.ok   { color: var(--pass); border-color: var(--pass); background: var(--tint-pass); }

/* ---------- the feed ---------- */

.feed { display: flex; flex-direction: column; margin: 4px 0 0; }
.fi { display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: center;
      padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.fi:hover { text-decoration: none; }
.fi:hover .t { color: var(--accent); }
.fi .face, .fi .thumb-sm { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.fi .thumb-sm { background: var(--panel-2); border: 1px solid var(--line); display: flex;
                align-items: center; justify-content: center; color: var(--ink-3); }
.fi .thumb-sm svg { width: 22px; height: 22px; }
.fi > span:nth-child(2) { display: block; min-width: 0; }
.fi .t, .fi .x, .fi .w { display: block; }
.fi .t { font-size: 18px; font-weight: 600; line-height: 1.3; }
.fi .t .dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--accent);
              margin-right: 10px; vertical-align: middle; }
.fi .x { color: var(--ink-2); font-size: 15px; margin-top: 4px; }
.fi .w { color: var(--ink-3); font-size: 14px; margin-top: 4px; }
.fi .ghost { white-space: nowrap; }
.feed-more { display: inline-block; margin-top: 14px; font-size: 15px; color: var(--ink-3); }
.feed-more:hover { color: var(--ink); }

/* ---------- reading in place ---------- */

.read { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; align-items: start; }
.read-main { min-width: 0; }
.read-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 20px; }
.read-side .btn, .read-side .ghost { justify-content: center; text-align: center; }
.read-side .fine a { color: var(--ink-3); }
.byline { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 14px; margin: 0 0 14px; }
.byline .face { width: 28px; height: 28px; border-radius: 999px; }
.article { font-family: var(--serif); font-size: 18px; line-height: 1.65; color: var(--ink); }
.article h1 { font-family: var(--sans); font-size: 30px; font-weight: 650; letter-spacing: -.02em;
              line-height: 1.15; margin: 0 0 18px; }
.article h2 { font-family: var(--sans); font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
              font-weight: 700; color: var(--ink-3); margin: 26px 0 8px; }
.article h3 { font-family: var(--sans); font-size: 17px; font-weight: 650; margin: 18px 0 6px; }
.article p { font-size: 18px; margin: 0 0 12px; }
.article blockquote { margin: 8px 0 12px; padding: 10px 16px; border-left: 3px solid var(--accent);
                      background: var(--panel); font-family: var(--sans); font-size: 15px; color: var(--ink-2);
                      border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.article blockquote p { font-size: 15px; margin: 0; }
.article ul, .article ol { padding-left: 22px; }
.article li { margin: 0 0 6px; }
.article table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 15px; margin: 8px 0 16px; }
.article th, .article td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.article th { color: var(--ink-3); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.article code { font-family: var(--mono); font-size: 14px; color: var(--ink-2); }
.article pre { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
               padding: 12px 14px; overflow: auto; font-size: 14px; }
.article hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.article img { max-width: 100%; border-radius: var(--r-md); }
.article-text { font-family: var(--serif); font-size: 17px; line-height: 1.65; white-space: pre-wrap; }
.read-figure { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.read-figure img { display: block; width: 100%; height: auto; }
.read-frame { width: 100%; height: 78vh; border: 1px solid var(--line); border-radius: var(--r-lg);
              background: var(--panel); }
.read-back { display: inline-block; color: var(--ink-3); font-size: 15px; margin: 0 0 16px; }
.read-back:hover { color: var(--ink); text-decoration: none; }
.read-sources { color: var(--ink-3); font-size: 14px; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---------- an agent's page, lean ---------- */

.hero-lean { display: flex; gap: 18px; align-items: center; margin: 0 0 22px; }
.hero-lean .face { width: 72px; height: 72px; border-radius: 16px; }
.hero-lean h1 { font-size: 32px; }
.hero-lean .sub { margin-top: 2px; }
.hero-lean .fine a { color: var(--ink-3); }
.page-agent .agent-hero { display: none; }
.latest { margin-top: 12px; padding: 26px 30px; border: 1px solid var(--edge); border-radius: var(--r-lg);
          background: var(--panel); }
.latest .article h1 { font-size: 26px; }
.latest-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.latest-foot .fine a { color: var(--ink-3); }
.chat-lean .thread { max-height: 62vh; overflow-y: auto; overscroll-behavior: contain;
                     padding-right: 8px; scrollbar-gutter: stable; }
.chat-lean .chat-wrap { max-width: none; margin: 0; }
.page-agent-lean .system-band { display: none; }
.hero-lean .fine a { color: var(--ink-3); } .hero-lean .fine a:hover { color: var(--ink); }

/* ---------- decisions ---------- */

.decision { border: 1px solid var(--edge); border-radius: var(--r-lg); background: var(--panel); padding: 22px 26px; }
.decision-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.decision-head .face { width: 44px; height: 44px; border-radius: 999px; }
.decision-head h2 { font-size: 20px; }
.decision-head .fine { margin: 0; }
.decision-body { font-family: var(--serif); font-size: 17px; line-height: 1.6; white-space: pre-wrap;
                 background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-md);
                 padding: 18px 22px; margin: 0 0 16px; }
.decision-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.decision-actions form { display: inline; margin: 0; }
.decision-actions .danger { margin-left: auto; }
/* The later layer set its own minimum, which is the one that wins. Same fix,
   same reason: a note may ask for 260px where there are 260px to give. */
.decision-actions .note { font: inherit; font-size: 15px; min-width: min(260px, 100%); }
.decided .fi { grid-template-columns: 44px 1fr auto; padding: 14px 0; }
.decided .fi .t { font-size: 16px; font-weight: 560; }

/* ---------- this week ---------- */

.week { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.missing { border: 1px solid var(--amber); border-radius: var(--r-lg); padding: 18px 20px; background: var(--panel); }
.missing ul { margin: 8px 0 0; padding-left: 18px; }
.missing li { margin: 0 0 6px; font-size: 15px; }

/* ---------- misc ---------- */

.row { display: flex; gap: 12px; align-items: center; }
.row.between { justify-content: space-between; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
        border: 1px solid var(--line-2); color: var(--ink-2); font-size: 14px; font-weight: 520; background: transparent; }
.chip.on { background: var(--panel-2); color: var(--ink); border-color: var(--accent); }
.chip:hover { text-decoration: none; border-color: var(--line-2); color: var(--ink); }
.chip .face { width: 20px; height: 20px; border-radius: 6px; }
/* Document 50, B1 — 340px was a width, not a maximum, so on a 390px screen the
   page grew to 487px and the reader had to drag sideways to reach a button.
   The cause is fixed here rather than hidden with overflow further down. */
.search-lean { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--edge);
               border-radius: 999px; padding: 9px 16px; width: 340px; max-width: 100%;
               color: var(--ink-3); }
.search-lean svg { width: 16px; height: 16px; flex: none; }
.search-lean input { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px;
                     flex: 1; min-width: 0; outline: none; padding: 0; }
.theme-switch { display: flex; gap: 8px; }
.theme-switch .chip.on { border-color: var(--accent); }
.empty-lean { color: var(--ink-3); font-size: 16px; padding: 24px 0; }
.band-lean { margin-top: 36px; }
.band-lean .kicker { margin-top: 0; }

@media (max-width: 1100px) {
  .read, .week { grid-template-columns: 1fr; }
  .read-side { position: static; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .ask { flex-direction: column; }
  .fi { grid-template-columns: 44px 1fr; }
  .fi .ghost { grid-column: 2; justify-self: start; }
}

/* ==== OSTEN-V5-LAYER:END ==== */

/* ---------- v5.1 — after the first day on the real screen ---------- */

:root { --banner: 72px; }
.osten-bar { height: var(--banner); }
.osten-sign svg { width: 28px; height: 28px; }
.osten-word { font-size: 21px; }
.osten-vertical { font-size: 15px; }

/* ---------- faces: the head, large, in a ring ---------- */
/* The portraits are busts; at 40px the face was a dot on a jacket. The image
   is zoomed on the head inside a circle, with a bronze ring and a soft shadow,
   so a person reads as a person from across the room. */
.face { position: relative; display: inline-block; flex: none; overflow: hidden;
        border-radius: 999px; border: 0; background: var(--panel-3);
        box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--warm), 0 8px 18px -8px rgba(0,0,0,.7); }
.face-img { display: block; width: 100%; height: 100%; object-fit: cover;
            object-position: 50% 20%; transform: scale(1.25); transform-origin: 50% 28%; }
.face::after { content: ""; position: absolute; inset: 0; border-radius: 999px;
               box-shadow: inset 0 -10px 16px -10px rgba(0,0,0,.55), inset 0 2px 4px rgba(255,255,255,.18); }
.face-i { border-radius: 999px; }
.face.sz-18 { width: 18px; height: 18px; } .face.sz-20 { width: 20px; height: 20px; }
.face.sz-28 { width: 28px; height: 28px; } .face.sz-34 { width: 34px; height: 34px; }
.face.sz-36 { width: 36px; height: 36px; } .face.sz-40 { width: 40px; height: 40px; }
.face.sz-44 { width: 44px; height: 44px; } .face.sz-52 { width: 52px; height: 52px; }
.face.sz-56 { width: 56px; height: 56px; } .face.sz-60 { width: 60px; height: 60px; }
.face.sz-72 { width: 72px; height: 72px; } .face.sz-88 { width: 88px; height: 88px; }
.face.sz-96 { width: 96px; height: 96px; }
.face.sz-20, .face.sz-28 { box-shadow: 0 0 0 1px var(--warm); }
.face.sz-20::after, .face.sz-28::after { display: none; }
.rail-agents { grid-template-columns: repeat(3, 1fr); gap: 6px 4px; }
.rail-agent { padding: 10px 2px 8px; gap: 8px; }
.rail-agent .face { width: 54px; height: 54px; }
.rail-agent.on { background: var(--panel-2); border-color: var(--warm); }
.rail-agent .rail-agent-name { color: var(--ink); font-weight: 560; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.person { padding: 10px 16px 10px 10px; }
.person .face { width: 44px; height: 44px; }
.person b { font-size: 17px; }
.hero-lean .face { width: 84px; height: 84px; }
.fi .face { width: 52px; height: 52px; border-radius: 999px; }

/* ---------- the theme switch, in the rail ---------- */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
              padding: 8px 12px; color: var(--ink-2); font-size: 15px; }
.switch { position: relative; width: 44px; height: 24px; border-radius: 999px; border: 1px solid var(--line-2);
          background: var(--panel-3); cursor: pointer; padding: 0; min-height: 0; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
                 border-radius: 999px; background: var(--ink); transition: left .15s ease; }
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"]::after { left: 22px; background: #FFFFFF; }
.switch:hover { background: var(--panel-3); }
.switch[aria-checked="true"]:hover { background: var(--accent-2); }
.face.face-i { display: inline-flex; align-items: center; justify-content: center; overflow: visible;
               background: var(--panel-2); color: var(--warm); border: 0;
               box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--warm); }
.face.face-i::after { display: none; }
.face.face-i.sz-20, .face.face-i.sz-28 { box-shadow: 0 0 0 1px var(--warm); }
.face.face-i, .face.face-i[class*="sz-"] { border-radius: 999px; }
/* The team scrolls inside the rail when the window is short; the switch,
   the gauge and Settings stay where the hand expects them. */
.rail { overflow: hidden; }
.rail-team { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
.rail-foot { flex: none; margin-top: 0; }
.rail { height: calc(100vh - var(--banner)); top: var(--banner); }
.rail-agent .face, .rail-agent .face-i { border-radius: 999px; }
/* light: the masthead keeps the vertical's blue, the rest of the accent is brown */
:root[data-theme="light"] .osten-vertical { color: var(--ink-2); }
:root[data-theme="light"] .rail-badge { background: var(--accent); color: var(--accent-ink); }


/* ---------------------------------------------------------------------------
   Document 48, chantier 1 — the page card.
   A page or an article on the site: the picture of it once it is live, the
   status, one button to the site. Used as "Last delivered" on a colleague's
   page, on its own reading page, and inside the library's reader.
   --------------------------------------------------------------------------- */
.page-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 900px) { .page-card { grid-template-columns: minmax(0, 3fr) minmax(220px, 2fr); align-items: start; } }
.page-shot { display: block; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.page-shot img { display: block; width: 100%; height: auto; }
.page-shot-empty { min-height: 180px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 14px; padding: 24px; text-align: center; }
.page-body { display: flex; flex-direction: column; gap: 12px; }
.page-title { font-size: 26px; line-height: 1.2; margin: 0; }
.page-status { display: flex; align-items: center; gap: 12px; margin: 0; }
.page-links { margin: 0; }


/* ---------------------------------------------------------------------------
   Document 48, §3 — the watches on Home.
   Two cards drawn from the shape of the files: pills, a bar per market, the
   items with their impact line, the price signals, Watch next.
   --------------------------------------------------------------------------- */
.watches { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 1100px) { .watches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.watch { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.watch-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.watch-head .person { padding: 0; border: 0; background: none; }
.watch-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.watch-title { font-size: 18px; font-weight: 600; margin: 0; line-height: 1.3; }
.watch-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.watch-bars { width: 100%; max-width: 420px; height: auto; display: block; }
.watch-bar-label { font-size: 14px; fill: var(--ink-3); font-family: inherit; }
.watch-bar-n { font-size: 14px; fill: var(--ink-2); font-family: inherit; }
.watch-bar-now { fill: var(--accent); }
.watch-bar-before { fill: var(--line-2); }
.watch-legend { display: flex; gap: 14px; align-items: center; margin: 0; }
.watch-key-now, .watch-key-before { display: inline-block; width: 14px; height: 6px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.watch-key-now { background: var(--accent); }
.watch-key-before { background: var(--line-2); }
.watch-items { display: flex; flex-direction: column; gap: 10px; }
.watch-item { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.watch-item-head { display: flex; gap: 8px; align-items: center; margin: 0; }
.watch-item-title { margin: 0; font-weight: 600; }
.watch-impact { margin: 0; color: var(--ink-2); }
.watch-signals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.watch-signals li { display: flex; gap: 10px; align-items: baseline; }
.watch-arrow { display: inline-block; width: 22px; text-align: center; font-weight: 700; flex: none; }
.watch-arrow-up { color: var(--pass); }
.watch-arrow-down { color: var(--amber); }
.watch-arrow-flat, .watch-arrow-none { color: var(--ink-3); }
.watch-next { margin: 0; border-top: 1px solid var(--line); padding-top: 10px; }
.watch-plain { margin: 0; color: var(--ink-2); }
.previous-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.previous-row { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: 1px solid var(--line); border-radius: var(--r-md, 8px); padding: 10px 12px; color: var(--ink); cursor: pointer; font: inherit; }
.previous-row:hover { border-color: var(--line-2); }
.previous-row .x { color: var(--ink-3); font-size: 14px; }

/* ---------------------------------------------------------------------------
   Document 48, §3 — the tiles of This week (and §3 bis, the site on Home).
   A figure, its target, the previous period, a meter and a sparkline; all
   drawn with attributes, never an inline style.
   --------------------------------------------------------------------------- */
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
@media (min-width: 900px) { .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .figs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.fig { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fig-label { margin: 0; font-size: 14px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.fig-value { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.1; }
.fig-target { font-size: 16px; font-weight: 500; color: var(--ink-3); }
.fig-none { color: var(--ink-3); }
.fig-sub { margin: 0; font-size: 14px; color: var(--ink-3); }
.fig-delta { font-weight: 600; color: var(--ink-2); }
.fig-delta.up { color: var(--pass); }
.fig-delta.down { color: var(--amber); }
.fig-meter { width: 100%; height: 4px; display: block; }
.fig-meter-track { fill: var(--line); }
.fig-meter-fill { fill: var(--accent); }
.fig-spark { width: 100%; height: 28px; display: block; }
.fig-spark-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fig-note { margin: 0; }
.fig-unmeasured { border-style: dashed; }

/* ---------------------------------------------------------------------------
   Document 48, §5 bis — decide in place: the window and the bubble.
   Same box as the reading window; the bubble sits at the bottom, one line
   and one button, and goes away on its own when pressed.
   --------------------------------------------------------------------------- */
.decide-window[hidden], .decide-call[hidden] { display: none; }
.decide-window { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; z-index: 60; overflow: auto; }
.decide-box { width: min(760px, 100%); background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: none; }
.decide-box .sheet-body { padding: 18px 22px 22px; }
.decide-call { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: min(720px, calc(100% - 32px)); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 12px 14px 12px 18px; z-index: 55; font-size: 15px; }
#decisions-badge { cursor: pointer; }
.figs-site { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .figs-site { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-now { margin-left: 12px; text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.decide-all { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 12px 16px; margin: 0 0 12px; background: var(--panel-2); }
.decision-brief { display: flex; flex-direction: column; gap: 6px; font-family: var(--serif); font-size: 17px; line-height: 1.5; padding: 4px 0 8px; }
.pictures { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0 0 18px; }
.pictures .picture { display: block; }

/* Document 48 — what the team produced this week, as one table on Home. */
.produced { width: 100%; border-collapse: collapse; }
.produced th, .produced td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 16px; }
.produced th { color: var(--ink-3); font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.produced td.n { font-weight: 700; font-size: 20px; width: 90px; }
.produced td.who { color: var(--ink-3); }

/* ---------------------------------------------------------------------------
   Document 49 — the conversation says which one it is, and every exchange
   carries what it caused: what waits for a person, what changed outside, what
   did not go through. Two screens for one request was half of why a request
   could not be found again.
   --------------------------------------------------------------------------- */
.conv-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 2px 0 4px; }
.conv-name { font-size: 16px; color: var(--ink); max-width: 46ch; overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
.conv-line .fine { white-space: nowrap; }

.thread-marks { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 14px 46px; }
.thread-mark {
  display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.45;
  padding: 10px 14px; border: 1px solid var(--edge); border-left-width: 3px;
  border-radius: var(--r-md); background: var(--panel);
}
.thread-mark .grow { flex: 1 1 auto; min-width: 0; }
.thread-mark .btn { flex: none; }
.thread-mark-waiting { border-left-color: var(--amber, #D4A03C); color: var(--ink); }
.thread-mark-done    { border-left-color: var(--accent); color: var(--ink-2); }
.thread-mark-failed  { border-left-color: #C4574B; color: var(--ink); }
.thread-mark-refused { border-left-color: var(--line-2); color: var(--ink-3); }
.thread-undo { margin-left: 14px; word-break: break-all; }
@media (max-width: 700px) { .thread-marks { margin-left: 0; } }

/* A layout edit, read before it is approved: what goes, what arrives. */
.decision-edit ul.can { margin: 4px 0 0; }
.decision-edit ul.can li { font-size: 16px; }
.decision-edit .mono { margin-left: 8px; }
.btn-careful { background: #8C3A31; border-color: #A8483D; }
.btn-careful:hover { background: #A8483D; }

/* Document 49 — asking for a change without leaving the page. */
.change-first > summary { cursor: pointer; color: var(--accent); font-size: 15px; list-style: none; }
.change-first > summary::-webkit-details-marker { display: none; }
.change-first[open] > summary { color: var(--ink-2); }
.change-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; min-width: min(280px, 100%); }
.change-form textarea {
  width: 100%; resize: vertical; font: inherit; font-size: 15px; line-height: 1.5;
  padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid var(--edge); background: var(--panel-2); color: var(--ink);
}
.change-form button { align-self: flex-start; }

/* Document 49 — a decision being carried out, and a message the reader did not
   write. Approving a picture makes the broker generate it there and then: tens
   of seconds during which the card used to sit unchanged with its buttons
   live, so it was pressed again, and again. */
.decision-working { display: block; }
.decision-working .waiting { font-size: 15px; color: var(--ink-2); }
.thread-sent {
  margin: 8px 0 8px 46px; padding: 8px 0 8px 14px; font-size: 14px;
  color: var(--ink-3); border-left: 2px solid var(--edge); max-width: 68ch;
}
@media (max-width: 700px) { .thread-sent { margin-left: 0; } }

/* Immutable deliverables and resilient narrow layouts. */
.artifact-pdf { width:100%; height:72vh; border:1px solid var(--rule); }
.artifact-image { display:block; max-width:100%; max-height:75vh; object-fit:contain; }
.thread .bubble-answer { overflow-wrap:anywhere; min-width:0; white-space:normal; }
.bubble-answer table { display:block; overflow-x:auto; max-width:100%; }
.page .chat-wrap, .page .chat-lean { min-width:0; }
.answer-thumb img { max-width:100%; aspect-ratio:4/3; object-fit:contain; }

.mail-text { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65; max-width:78ch; }

/* Progressive disclosure keeps navigation reachable on a narrow screen. */
.mobile-menu { display:none; }
body .shell { min-width:0; }
body .page { min-width:0; }
.page .panel form > label { display:block; margin-bottom:14px; }
.page .panel input[type=text], .page .panel input[type=datetime-local] { display:block; width:100%; min-width:0; }
@media (max-width:720px) {
  body .shell { grid-template-columns:minmax(0,1fr); }
  body .osten-bar { padding-inline:14px; gap:12px; }
  body .osten-bar .osten-vertical { font-size:14px; letter-spacing:.15em; }
  body .osten-bar .osten-word { font-size:18px; letter-spacing:.15em; }
  body .osten-bar .mobile-menu { display:inline-flex; padding:7px 12px; margin-right:auto; }
  body .rail { display:none; }
  body .rail[data-open=true] { display:flex; height:auto; position:static; }
  body .page { padding:24px 16px; }
  .page .bubble { min-width:0; }
  .page .bubble-body { min-width:0; max-width:calc(100vw - 76px); }
  .page .chat-lean .thread { max-height:65vh; }
  .page .composer { flex-wrap:wrap; }
  .page .hero-lean { flex-wrap:wrap; }
}

body .security-key { overflow-wrap: anywhere; }

body .answer-technical { margin: 12px 0; border-top: 1px solid var(--line); padding-top: 10px; }
body .answer-technical summary { cursor: pointer; font-family: var(--sans); font-size: 14px; color: var(--ink-3); }
@media (max-width: 700px) {
  body .chat-lean .answer-file { flex-wrap: wrap; gap: 8px; }
  body .chat-lean .answer-file-body { flex: 1 0 100%; }
  body .chat-lean .answer-file-name { overflow-wrap: anywhere; }
  body .chat-lean .answer-file-meta { font-family: var(--sans); }
  body .chat-lean .answer-file .btn { padding: 10px 14px; font-size: 14px; }
}

/* Conversation orientation and readable deliverables; existing themes and rail stay. */
.conversation-bar, .history-heading, .history-row-main { display: flex; align-items: center; gap: 20px; }
.conversation-bar { padding: 18px 0; margin-bottom: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.conversation-bar .kicker { margin: 0 0 6px; }
.conversation-title { margin: 0 0 5px; font-size: 1.15rem; line-height: 1.4; overflow-wrap: anywhere; }
.conversation-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.conversation-actions .btn { white-space: nowrap; }
.thread .bubble-answer { line-height: 1.65; }
.thread .bubble-answer > :first-child { margin-top: 0; }
.thread .bubble-answer > :last-child { margin-bottom: 0; }
.thread .bubble-answer h1, .thread .bubble-answer h2 { font-size: 1.15em; line-height: 1.4; margin: 1.3em 0 .55em; }
.thread .bubble-answer h3 { font-size: 1.05em; margin: 1.2em 0 .5em; }
.thread .bubble-answer p { margin: .7em 0; }
.thread .bubble-answer li { margin: .3em 0; }
.thread .answer-file-meta { display: block; margin-top: 4px; }
.thread .answer-files { margin-top: 18px; }
.thread-update { text-align: center; }
.thread-update:has(button:not([hidden])) { padding: 8px 0; }
.history-page { max-width: 1100px; }
.history-heading { justify-content: space-between; margin-bottom: 28px; }
.history-heading h1 { margin-bottom: 8px; }
.history-heading .btn { flex-shrink: 0; }
.history-search { max-width: 680px; margin-bottom: 22px; }
.history-search label { display: block; margin-bottom: 8px; }
.history-search > div { display: flex; gap: 10px; }
.history-search input[type=search] { min-width: 0; flex: 1; }
.history-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); }
.history-tabs a { padding: 12px 0; color: var(--ink-3); border-bottom: 2px solid transparent; }
.history-tabs a[aria-current=page] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.history-list { margin-bottom: 24px; }
.history-row { padding: 22px 0; border-bottom: 1px solid var(--line); }
.history-row-main h2 { margin: 7px 0; font-size: 1.1rem; line-height: 1.4; overflow-wrap: anywhere; }
.history-row-main h2 a { color: var(--ink); }
.history-preview { color: var(--ink-3); margin: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.history-manage { margin-top: 12px; font-size: .85rem; color: var(--ink-3); }
.history-manage summary { cursor: pointer; width: fit-content; }
.history-manage form { display: flex; align-items: end; gap: 10px; margin-top: 12px; }
.history-manage label { flex: 1; max-width: 560px; }
.history-manage input { display: block; width: 100%; margin-top: 6px; }
@media (max-width: 700px) {
  .conversation-bar, .history-heading { align-items: stretch; flex-direction: column; gap: 14px; }
  .conversation-actions .btn { padding: 9px 13px; }
  .history-row-main { gap: 12px; }
  .history-manage form { align-items: stretch; flex-direction: column; }
  .history-heading > .btn { align-self: flex-start; }
  .thread .answer-file { flex-wrap: wrap; }
}

.new-reply[hidden] { display: none; }

/* Private connection journeys. Reuses the existing Osten palette and typography. */
.connections-page { max-width: 1100px; margin: 0 auto; }
.connection-heading { max-width: 750px; margin-bottom: 28px; }
.connection-heading h1 { margin: 6px 0 14px; }
.connection-heading .lede { max-width: 65ch; }
.connection-steps { display: flex; gap: 24px; padding: 0; margin: 0 0 32px; list-style: none; color: var(--ink-2); }
.connection-steps li { display: flex; align-items: center; gap: 9px; }
.connection-steps b { border: 1px solid var(--line-2); border-radius: 50%; width: 30px; height: 30px; display: inline-grid; place-items: center; flex-shrink: 0; }
.connection-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: start; }
.connection-card { background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; padding: 28px; margin-bottom: 24px; min-width: 0; overflow-wrap: anywhere; }
.connection-card > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; }
.connection-card h2 { margin: 14px 0 8px; }
.connection-icon { display: inline-grid; place-items: center; font-size: 24px; font-weight: 700; color: var(--accent); width: 50px; height: 50px; border: 1px solid var(--line-2); border-radius: 12px; flex-shrink: 0; }
.connection-status { display: inline-block; font-size: 14px; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 20px; padding: 5px 12px; }
.connection-status.is-ready { color: var(--pass); border-color: var(--pass); }
.connection-description { color: var(--ink-2); max-width: 48ch; }
.connection-benefits { margin: 22px 0; padding-left: 20px; color: var(--ink-2); }
.connection-benefits li { margin: 9px 0; }
.connected-identity { font-weight: 600; padding: 12px 0; border-top: 1px solid var(--line); }
.connection-checks { padding: 0; list-style: none; margin: 16px 0; }
.connection-checks li { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.check-ok { color: var(--pass); }.check-wait { color: var(--watch); }
.connection-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 12px; }
.connection-options { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.connection-options summary { cursor: pointer; font-weight: 600; }
.connection-options form { margin: 22px 0; }
.connection-choice { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-2); text-transform: none; letter-spacing: normal; }
.connection-choice input { width: auto; flex-shrink: 0; margin-top: 6px; }
.connection-next { padding: 16px; border-left: 3px solid var(--watch); background: var(--panel-2); }
.connection-footer { display: flex; align-items: center; gap: 24px; padding: 12px 0 28px; }
.connection-footer div { flex: 1; }.connection-footer h2 { font-size: 20px; }.connection-footer p { color: var(--ink-3); max-width: 70ch; }
.connection-instructions { padding-left: 22px; }.connection-instructions li { padding: 7px 0; }
.pairing-box { border-top: 1px solid var(--line); padding-top: 16px; }.pairing-code { display: block; padding: 12px; background: var(--panel-2); overflow-wrap: anywhere; user-select: all; }
.whatsapp-examples { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }.whatsapp-examples p { color: var(--ink-2); }
.whatsapp-event { border-top: 1px solid var(--line); padding: 16px 0; }.whatsapp-event p { white-space: pre-wrap; overflow-wrap: anywhere; }
.connection-welcome { display: flex; gap: 18px; align-items: center; padding: 20px 24px; margin-bottom: 24px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); }
.connection-welcome div { flex: 1; }.connection-welcome p { margin: 3px 0 0; color: var(--ink-3); }.connection-welcome form { margin: 0; }
@media(max-width: 1000px) { .connection-grid { grid-template-columns: 1fr; }.connection-welcome { flex-wrap: wrap; }.connection-welcome div { flex-basis: 100%; } }
@media(max-width: 600px) { .connection-card { padding: 20px; }.connection-steps { flex-direction: column; gap: 10px; }.connection-footer { align-items: flex-start; flex-direction: column; }.whatsapp-examples { grid-template-columns: 1fr; gap: 8px; }.connection-card > header { align-items: flex-start; }.connection-checks li { gap: 10px; }.connection-welcome { padding: 18px; } }

/* Client journey: a primary action, a readable work area, contextual options. */
.workspace-page, .onboarding-page, .tools-page { max-width: 1180px; margin: 0 auto; }
.workspace-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
.workspace-heading .lede { max-width: 62ch; margin-top: 10px; font-size: 17px; line-height: 1.6; }
.workspace-heading > .btn { flex: none; }
.workspace-date { color: var(--ink-3); font-size: 14px; margin-bottom: 10px; }
.workspace-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
.workspace-main, .workspace-side { min-width: 0; }
.workspace-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 32px; overflow-x: auto; }
.workspace-tabs a { padding: 0 0 14px; color: var(--ink-3); white-space: nowrap; font-size: 15px; border-bottom: 2px solid transparent; }
.workspace-tabs a[aria-current] { color: var(--ink); border-color: var(--accent); font-weight: 600; }
.workspace-tabs a span { margin-left: 7px; font-family: var(--mono); font-size: 14px; color: var(--ink-3); }
.section-heading { display: flex; gap: 16px; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.section-heading h2, .side-section h2 { font-size: 19px; line-height: 1.3; }
.due-label { color: var(--watch); font-size: 14px; }
.task-row { display: flex; gap: 15px; border-bottom: 1px solid var(--line); padding: 20px 0; }
.task-content { flex: 1; min-width: 0; }
.task-content h3 { font-size: 17px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.task-description { font-size: 15px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; }
.task-toggle { padding-top: 3px; }
.task-check { display: grid; place-items: center; padding: 0; width: 25px; height: 25px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--panel); color: var(--ink); cursor: pointer; }
.task-check:hover, .task-check:focus-visible { border-color: var(--accent); }
.task-check.is-done { background: var(--accent); color: var(--accent-ink); }
.task-edit > summary { margin-top: 8px; width: fit-content; color: var(--ink-3); font-size: 14px; cursor: pointer; }
.task-edit .journey-form { margin-top: 18px; }
.task-archive { margin-top: 10px; }
.task-composer { border: 1px solid var(--line-2); border-radius: var(--r-md); margin-top: 28px; background: var(--panel); }
.task-composer > summary { display: flex; justify-content: space-between; padding: 18px 20px; cursor: pointer; font-size: 16px; }
.task-composer .journey-form { padding: 0 20px 22px; }
.archive-link { display: block; margin-top: 20px; width: fit-content; }
.journey-form { display: grid; gap: 20px; }
.journey-form label { display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); font-weight: 500; }
.journey-form input:not([type=checkbox]):not([type=hidden]), .journey-form textarea, .journey-form select { width: 100%; min-width: 0; font-size: 16px; line-height: 1.5; font-family: var(--sans); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 11px 12px; background: var(--bg); color: var(--ink); }
.journey-form .btn { justify-self: start; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.subtle-options > summary { cursor: pointer; color: var(--ink-3); font-size: 14px; }
.subtle-options[open] > summary { margin-bottom: 16px; }
.workspace-side { padding-top: 4px; }
.side-section { padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid var(--line); }
.side-section h2 { margin-bottom: 12px; }
.side-section p { font-size: 15px; color: var(--ink-3); line-height: 1.6; }
.side-section .btn { margin-top: 6px; }
.workspace-link { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; color: var(--ink-2); font-size: 15px; }
.workspace-link b { display: block; font-weight: 550; color: var(--ink); }
.workspace-link small { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-3); }
.workspace-empty { padding: 45px 24px; text-align: center; background: var(--panel); margin: 24px 0; }
.workspace-empty h3 { font-size: 19px; margin: 15px 0 8px; }
.workspace-empty p { max-width: 38ch; margin: 0 auto 20px; color: var(--ink-3); font-size: 15px; }
.empty-symbol { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink-3); }
.journey-progress { margin-bottom: 42px; }
.journey-progress ol { display: flex; list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--line); }
.journey-progress li { flex: 1; }
.journey-progress a { display: flex; align-items: center; gap: 12px; padding: 0 8px 20px 0; color: var(--ink-3); border-bottom: 2px solid transparent; font-size: 15px; }
.journey-progress a span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line-2); border-radius: 50%; font-family: var(--mono); font-size: 14px; flex: none; }
.journey-progress a[aria-current] { border-color: var(--accent); color: var(--ink); font-weight: 600; }
.journey-progress a[aria-current] span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.onboarding-layout { display: grid; grid-template-columns: minmax(0, 650px) minmax(200px, 1fr); gap: 64px; }
.onboarding-content > h2 { margin-bottom: 12px; font-size: 25px; }
.onboarding-content > p { color: var(--ink-2); max-width: 60ch; margin-bottom: 28px; font-size: 16px; }
.onboarding-help { border-left: 1px solid var(--line); padding-left: 28px; }
.onboarding-help h3 { margin-bottom: 14px; font-size: 17px; }
.onboarding-help p, .onboarding-help li { font-size: 15px; line-height: 1.7; color: var(--ink-3); }
.onboarding-help ol { padding-left: 22px; }
.onboarding-help li { padding-bottom: 16px; }
.document-start { padding: 32px 24px; border: 1px dashed var(--line-2); background: var(--panel); text-align: center; }
.document-start > span { font-size: 30px; color: var(--accent); }
.document-start h3 { font-size: 19px; margin: 12px 0; }
.document-start p { color: var(--ink-3); font-size: 15px; margin-bottom: 22px; }
.document-receipts { margin-top: 25px; }
.document-receipts p { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.document-receipts p span { overflow-wrap: anywhere; }
.document-receipts b { flex: none; font-weight: 500; color: var(--ink-3); }
.journey-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; }
.tool-choice { display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--line); padding: 24px; margin-bottom: 12px; color: var(--ink); }
.tool-choice:hover { border-color: var(--accent); text-decoration: none; }
.tool-choice h3 { font-size: 18px; margin-bottom: 5px; }
.tool-choice p { color: var(--ink-3); font-size: 15px; margin: 0; }
.starter-item { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.starter-item h3 { font-size: 19px; margin-bottom: 8px; }
.starter-item p { font-size: 15px; color: var(--ink-3); margin-bottom: 6px; }
.starter-item .btn { flex: none; }
.onboarding-banner { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px; border: 1px solid var(--line-2); margin-bottom: 30px; background: var(--panel); }
.onboarding-banner h2 { font-size: 20px; margin-bottom: 6px; }
.onboarding-banner p { font-size: 15px; color: var(--ink-3); margin: 0; }
.onboarding-banner .btn { flex: none; }
@media (max-width: 1180px) { .workspace-layout { grid-template-columns: minmax(0,1fr) 250px; gap: 28px; } .onboarding-layout { gap: 32px; } }
@media (max-width: 850px) {
  .workspace-layout, .onboarding-layout { grid-template-columns: 1fr; gap: 32px; }
  .workspace-side { border-top: 1px solid var(--line); padding-top: 28px; }
  .onboarding-help { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; }
}
@media (max-width: 520px) {
  .workspace-heading { flex-wrap: wrap; gap: 16px; margin-bottom: 26px; }
  .workspace-heading h1 { font-size: 30px; }
  .workspace-tabs { gap: 20px; }
  .journey-progress a { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14px; }
  .journey-progress { margin-bottom: 28px; }
  .form-pair { grid-template-columns: 1fr; }
  .starter-item { gap: 16px; }
  .onboarding-banner { align-items: flex-start; flex-direction: column; padding: 20px; }
  .section-heading { align-items: flex-start; }
}
.tool-section { margin: 36px 0; scroll-margin-top: 120px; }
.tool-section-description { color: var(--ink-3); font-size: 16px; max-width: 72ch; margin-bottom: 24px; }
.provider-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.provider-card { border: 1px solid var(--line); padding: 24px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.provider-card h3 { margin-top: 16px; font-size: 18px; }
.provider-card p { font-size: 15px; color: var(--ink-3); margin: 10px 0 20px; overflow-wrap: anywhere; }
.provider-card p.fine { font-size: 14px; margin: 12px 0 0; }
.provider-monogram { display: grid; place-items: center; width: 38px; height: 38px; font-size: 20px; font-weight: 600; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--ink-2); }
.provider-card form { margin-top: auto; }
.provider-card .btn { font-size: 15px; }
.tool-category-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.tool-category-grid .tool-choice { margin: 0; }
.company-tools-status { margin-top: 26px; }
.configured-tool { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.operator-links { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 28px; margin-top: 36px; border-top: 1px solid var(--line); font-size: 14px; }
@media(max-width: 1150px) { .provider-grid { grid-template-columns: 1fr; } .provider-card { display: block; } }
@media(max-width: 650px) { .tool-category-grid { grid-template-columns: 1fr; } }
.join-page { max-width: 460px; margin: 48px auto; }
.join-page .lede { margin: 16px 0 30px; font-size: 17px; }
.join-page .journey-form { margin-bottom: 26px; }
#invitation-link { font-size: 14px; margin: 10px 0 16px; }

/* Keep the setup form unobstructed while the team is available in the rail. */
body:has(.onboarding-page) .dock, body:has(.join-page) .dock { display: none; }
.task-check { min-height: 25px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.mail-search { max-width: 680px; margin: 24px 0; }
.mail-search input[type=search] { flex: 1; min-width: min(180px, 100%); }
.mail-count { margin: 30px 0 8px; }
.mail-row { display: block; padding: 22px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.mail-row:hover { text-decoration: none; }
.mail-row:hover h2 { color: var(--accent); }
.mail-row-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; color: var(--ink-2); font-size: 14px; }
.mail-row-meta time { color: var(--ink-3); }
.mail-row h2 { font-size: 19px; margin: 8px 0; }
.mail-row p { max-width: 80ch; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mail-reading { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; margin-bottom: 24px; }
.calendar-row { padding: 20px 0; border-bottom: 1px solid var(--line); }
.calendar-row h3 { margin: 8px 0; }
@media (max-width: 650px) { .mail-row-meta { flex-direction: column; gap: 5px; } }
/* A secondary action should not compete with the next step. */
.btn.btn-quiet, button.btn.btn-quiet, button.btn-quiet[type=submit] {
  color: var(--ink-2); background: transparent; border: 1px solid var(--line-2);
}
.btn.btn-quiet:hover, button.btn.btn-quiet:hover {
  color: var(--ink); background: var(--panel-2); border-color: var(--edge);
}
@media (max-width: 700px) {
  .dock { display: none; }
}

/* Preserve readable table columns in narrow chat replies. */
/* Company mail setup: readable controls, clear order and no floating overlap. */
.outreach-page { max-width: 920px; margin-inline: auto; }
.outreach-notice { border: 1px solid var(--line-2); border-left: 3px solid var(--accent); padding: 16px; color: var(--ink); background: var(--panel); }
.outreach-page .panel { margin-top: 24px; scroll-margin-top: 100px; }
.outreach-page .panel > p { max-width: 74ch; margin: 14px 0 22px; }
.outreach-page form { margin: 20px 0; }
.outreach-page form > p { margin: 18px 0; }
.outreach-page input:not([type=hidden]):not([type=checkbox]),
.outreach-page textarea, .outreach-page select {
  display: block; width: 100%; min-width: 0; min-height: 46px;
  padding: 11px 13px; margin: 8px 0; border: 1px solid var(--line-2);
  border-radius: 4px; background: var(--panel-2); color: var(--ink);
  font: 400 16px/1.5 var(--sans);
}
.outreach-page textarea { resize: vertical; }
.outreach-page input::placeholder, .outreach-page textarea::placeholder { color: var(--ink-3); opacity: 1; }
.outreach-page input[readonly] { background: var(--panel); color: var(--ink-2); }
.outreach-page input[type=checkbox] { width: 20px; height: 20px; vertical-align: middle; margin: 0 8px 3px 0; accent-color: var(--accent); }
.outreach-page label:has(input[type=checkbox]) { font-size: 16px; font-weight: 400; text-transform: none; letter-spacing: normal; line-height: 1.7; }
.outreach-page .fine { display: block; font-size: 14px; line-height: 1.6; }
.outreach-page .btn { white-space: normal; min-height: 44px; text-align: center; }
.outreach-page .fold-head { white-space: normal; overflow-wrap: anywhere; }
.outreach-page :is(input, select, textarea, button, a, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.outreach-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 24px 0; }
.outreach-steps a { border: 1px solid var(--line-2); padding: 16px; color: var(--ink); font-size: 16px; }
.outreach-steps b { display: inline-block; margin-right: 7px; font-family: var(--mono); }
.outreach-steps span { display: block; color: var(--ink-3); font-size: 14px; margin-top: 6px; }
body:has(.outreach-page) .dock { display: none; }
@media (max-width: 650px) {
  .outreach-steps { grid-template-columns: 1fr; gap: 8px; }
  .outreach-steps a { padding: 12px 14px; }
  .outreach-steps span { margin: 0; padding-left: 24px; }
  .outreach-page .panel { padding: 20px 16px; }
  .outreach-page .btn { width: 100%; }
}
@media (max-width: 700px) {
  .bubble-answer table { overflow-wrap: normal; word-break: normal; }
  .bubble-answer th, .bubble-answer td { min-width: 8rem; }
}