/* Arclathe — one stylesheet over the tokens (assets/tokens.css).
   No build. Areas colour themselves from the audience they serve, which comes from content, so
   adding an area is a content change, not a CSS change.

   TWO GROUNDS. The topbar and the footer are the logo's own near-black; the
   reading surface between them is paper. That is not decoration — the mark is
   drawn for a dark canvas and looks wrong on white, while research entries and
   CRM tables are not read on black. Each ground has its own verified text
   colours in tokens.css (--on-dark-* against --ink-deep, --ink-* against
   --paper) and they are not interchangeable. */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--step-0); line-height: var(--leading-normal);
  display: flex; flex-direction: column; min-height: 100vh;
}

/* A SECTION LOCKS TO THE WINDOW. `min-height` is a floor, so a body holding a
 * long tree grows past the viewport and takes the topbar and the footer with
 * it, which is not what a section is: the chrome and the rail stay put and the
 * workspace scrolls inside them.
 *
 * A height and an overflow, and only when a section is being drawn. Every other
 * page is a document and must scroll normally, which is why this is a class the
 * shell sets rather than a rule on `body`.
 *
 * It also gives `.page-section` a DEFINITE height to be a fraction of. Without
 * one, `.sec { height: 100% }` resolves against a content-sized box and means
 * nothing, which is how a fix for a section 44px too tall turned into a section
 * with no ceiling at all. */
body.is-section { height: 100vh; overflow: hidden; }
a { color: inherit; }
code { font-family: var(--mono); font-size: 0.88em; background: var(--sunk); padding: 1px 5px; border-radius: 4px; }

/* ---------- chrome: the brand ground ---------- */
.topbar {
  display: flex; align-items: center; gap: var(--s6);
  padding: 0 var(--s6); height: 64px; flex: none;
  background: var(--ink-deep); color: var(--on-dark);
  border-bottom: 1px solid var(--ink-raise);
  /* the mark hangs out of this box */
  overflow: visible; position: relative; z-index: 3;
}
/* The faint constellation behind the mark in the logo, as a ground rather than
   an image: two soft radial washes, no request, no file to keep in sync. */
.topbar {
  background-image:
    radial-gradient(60ch 20ch at 12% 140%, color-mix(in oklab, var(--brand-500) 14%, transparent), transparent 70%),
    radial-gradient(40ch 16ch at 88% -40%, color-mix(in oklab, var(--brand-300) 10%, transparent), transparent 70%);
}

.wordmark {
  display: flex; align-items: center; gap: var(--s3);
  text-decoration: none;
  /* The name is set in the DISPLAY family and in brand green, so the word
     beside the mark reads as the same object the mark is. It was inheriting
     the body face and painted --on-dark, which made it the one piece of
     branding on the page that came from neither the logo nor the ramp.
     --on-dark-accent is brand.300, the step this system reserves for dark
     grounds, measured at 10.39:1 on surface.ink. */
  font-family: var(--display); color: var(--on-dark-accent);
  font-weight: var(--wordmark-weight); font-size: 20px;
  letter-spacing: var(--wordmark-tracking); text-transform: uppercase;
}
.wordmark img {
  width: var(--chrome-mark-size); height: var(--chrome-mark-size); display: block;
  /* Hangs past the bottom edge. `position: relative` gives it a stacking
     context so it sits OVER the content it now overlaps rather than under it. */
  position: relative; top: var(--chrome-mark-drop); z-index: 2;
  filter: var(--chrome-mark-glow);
}
.wordmark .division {
  font-size: 11px; font-weight: 700; letter-spacing: var(--tagline-tracking);
  color: var(--on-dark-muted); align-self: center; padding-top: 2px;
}
.wordmark:hover .division { color: var(--on-dark-accent); }

.nav { display: flex; gap: var(--s5); }
.nav a {
  text-decoration: none; color: var(--on-dark-muted); font-size: 15px; font-weight: 500;
  padding: var(--s1) 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--on-dark); border-bottom-color: var(--brand-500); }
.nav a:active { color: var(--on-dark-accent); }
.nav-lock { color: var(--on-dark-faint); margin-left: 4px; }
.account { margin-left: auto; display: flex; align-items: center; gap: var(--s4); font-size: 14px; }
.who { color: var(--on-dark-muted); }

.btn {
  display: inline-block; text-decoration: none;
  background: var(--brand-600); color: var(--ink-invert);
  padding: 9px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 600;
}
.btn:hover { background: var(--brand-700); }
.btn:active { transform: translateY(1px); }
.btn-quiet { background: transparent; color: var(--ink-muted); border: 1px solid var(--line-strong); }
.btn-quiet:hover { background: var(--sunk); color: var(--ink); }

/* On the dark chrome a quiet button has to borrow the dark ground's palette,
   or it renders as invisible grey-on-black. */
.topbar .btn-quiet { color: var(--on-dark-muted); border-color: var(--ink-raise); }
.topbar .btn-quiet:hover { background: color-mix(in oklab, var(--on-dark) 8%, transparent); color: var(--on-dark); }
.topbar .btn { background: var(--brand-500); color: var(--ink-deep); }
.topbar .btn:hover { background: var(--brand-400); }

main { flex: 1; width: 100%; max-width: 860px; margin: 0 auto; padding: 56px 28px 72px; }
main.wide { max-width: 1180px; }

.footer {
  flex: none; display: flex; gap: var(--s5); align-items: center;
  padding: 0 var(--s6); height: 56px;
  border-top: 1px solid var(--ink-raise); background: var(--ink-deep);
  font-size: 13px; color: var(--on-dark-faint);
}
.footer-host { margin-left: auto; font-family: var(--mono); }
.footer a { color: var(--on-dark-muted); }

/* ---------- a mounted module's workspace ----------
   Atlas draws its own workspace; the page around it is the host's. These rules
   are the seam: enough to place the module's head and tabs on our page, and no
   opinion about anything inside the mount point. */
.atlas-module-head {
  display: flex; align-items: flex-end; gap: var(--s6); flex-wrap: wrap;
  margin-bottom: var(--s5);
}
.atlas-module-title {
  font-size: var(--step-3); margin: 0;
  font-weight: var(--wordmark-weight); letter-spacing: 0.06em;
}
/* The attribution rides the heading rather than sitting under it: at this size
   a second line would read as a subtitle competing with the lede below. */
.atlas-module-by {
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.1em;
  color: var(--ink-faint); text-transform: none;
  margin-left: var(--s1);
}
.atlas-module-lede { color: var(--ink-muted); margin: var(--s1) 0 0; max-width: var(--measure); }
.atlas-module-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.atlas-module .explorer-mount { margin-top: var(--s5); }

/* Four columns need more room than a reading measure — but NOT unlimited. The
   explorer caps its own view at 1280px and centres it, so a full-width page
   leaves a gap after the rail and pushes the last column off the screen. The
   page is sized to hold the rail plus that view, and no wider. */
/* The explorer was built to own a viewport: a rail on the left and a canvas
   that fills what is left. Inside the page's reading column it has neither, so
   the module goes FULL BLEED — the same geometry it has standalone — while the
   page furniture above it stays in the column where it belongs.

   `width: 100vw` with a negative half-viewport margin is the standard escape.
   `overflow-x: clip` on the page stops the extra width becoming a sideways
   scrollbar on narrow windows. */
main:has(.atlas-module) { max-width: none; padding-left: 0; padding-right: 0; }
/* The work workspace is two panes side by side; at 1180px the rail squeezes the
   document into a column narrower than the prose it holds. Same seam as atlas:
   the HOST widens the page for a module it knows about, rather than the module
   reaching out of its own box with negative margins. */
main:has(.gb) { max-width: 1560px; }
.atlas-module > .atlas-module-head,
.atlas-module > .atlas-module-tabs {
  max-width: 1180px; margin-inline: auto; padding-inline: var(--s6);
}
.atlas-module > .explorer-mount {
  width: 100vw; margin-left: calc(50% - 50vw);
  /* The board is as wide as its columns need. Scroll it rather than clipping —
     `overflow-x: clip` here cut the last column off entirely, which looks like
     a missing column rather than a narrow window. */
  overflow-x: auto;
}

.atlas-module-label { color: var(--ink-faint); font-size: var(--step--1); }
.atlas-module-stamp { color: var(--ink-faint); font-size: var(--step--1); font-family: var(--mono); }
.atlas-module-picker {
  font: inherit; font-family: var(--mono); font-size: var(--step--1);
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: var(--s1) var(--s2);
}
.atlas-module-picker:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }

.atlas-module-tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--line); }
.atlas-module-tabs .tab {
  background: none; border: none; cursor: pointer;
  padding: var(--s3) var(--s4);
  font: inherit; font-size: var(--step--1); font-weight: 600;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.atlas-module-tabs .tab:hover { color: var(--ink); }
.atlas-module-tabs .tab[aria-selected="true"] { color: var(--brand-700); border-bottom-color: var(--brand-500); }

/* ---------- a gated entry's header ----------
   The mark sits ABOVE the title rather than beside it: at 44px next to a 44px
   heading it would compete, and the point of decoration is to be recognised
   without being read. */
.hero-entry .entry-mark {
  display: block; width: 44px; height: 44px;
  margin: 0 0 var(--s4);
  /* This ground is paper, not chrome, so the mark needs no glow — it is
     navy-on-blue and already has its own contrast here. */
}

/* ---------- sections ---------- */
.hero h1 { font-size: 44px; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 12px; }
.hero-sub { font-size: 19px; color: var(--ink-muted); margin: 0 0 8px; max-width: var(--measure); }
.prose { margin-top: 44px; }
.prose h2 { font-size: 22px; letter-spacing: -0.01em; margin: 0 0 8px; }
.prose p { color: var(--ink-muted); margin: 0; max-width: var(--measure); }
.unknown-kind p { color: var(--warn); background: var(--warn-bg); padding: 12px 14px; border-radius: 8px; }
.areas { margin-top: 56px; }

/* ---------- the area badges ----------
   A card's colour says WHO THE AREA IS FOR: anyone, partners, customers, or
   employees only. The four grounds and the argument for them live in the
   design system under `audience.*`, measured; the level itself is declared in
   content, because which audience an area serves is a fact about the area and
   not a fact about a stylesheet.

   This used to be a hue number per area and a gradient computed from it. That
   put a colour decision in content, where nothing could check it, and the
   numbers were a violet-indigo-blue sweep chosen when the brand was hue 198.
   A card with no level named falls back to `anyone`, which is the most open
   and therefore the safest thing to look like if the declaration is missing. */
.badge-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.aud-anyone    { --badge-from: var(--audience-anyone-from);    --badge-to: var(--audience-anyone-to); }
.aud-partners  { --badge-from: var(--audience-partners-from);  --badge-to: var(--audience-partners-to); }
.aud-customers { --badge-from: var(--audience-customers-from); --badge-to: var(--audience-customers-to); }
.aud-employees { --badge-from: var(--audience-employees-from); --badge-to: var(--audience-employees-to); }
.badge {
  display: block; text-decoration: none;
  background: linear-gradient(160deg,
    var(--badge-from, var(--audience-anyone-from)) 0%,
    var(--badge-to, var(--audience-anyone-to)) 100%);
  color: var(--ink-invert);
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  box-shadow: var(--elevation-raised);
  position: relative; overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.badge::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 88% 0%, color-mix(in oklab, var(--on-dark) 12%, transparent), transparent 60%);
  pointer-events: none;
}
a.badge:hover { transform: translateY(-2px); box-shadow: 0 2px 4px color-mix(in oklab, var(--ink-deep) 8%, transparent), 0 14px 34px color-mix(in oklab, var(--ink-deep) 12%, transparent); }
a.badge:active { transform: translateY(0); }

.badge-name {
  display: inline-block;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em;
  background: color-mix(in oklab, var(--ink-deep) 22%, transparent);
  padding: 5px 11px; border-radius: 999px;
  margin-bottom: 14px;
}
.badge-title { display: block; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.badge-desc { margin: 10px 0 16px; font-size: 15px; line-height: 1.5; color: color-mix(in oklab, var(--on-dark) 92%, transparent); }
.badge-lock, .badge-open {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in oklab, var(--ink-deep) 20%, transparent); color: color-mix(in oklab, var(--on-dark) 94%, transparent);
}
.badge-open { background: color-mix(in oklab, var(--on-dark) 22%, transparent); }

.badge-xl { padding: 40px 34px 34px; }
.badge-xl .badge-title { font-size: 40px; }
.badge-xl .badge-desc { font-size: 17px; max-width: 64ch; }
.badge-xl .badge-name { font-size: 13px; }

/* ---------- area index ---------- */
.entries { margin-top: 44px; }
.entries h2 { font-size: 22px; margin: 0 0 20px; }
.entry-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.entry {
  display: block; text-decoration: none;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 20px;
  transition: border-color 120ms ease, transform 120ms ease;
}
.entry:hover { border-color: var(--ink-faint); transform: translateY(-1px); }
.entry:active { transform: translateY(0); }
.entry h3 { margin: 0 0 6px; font-size: 17px; }
.entry p { margin: 0 0 12px; color: var(--ink-muted); font-size: 15px; }
.entry code { font-size: 12px; color: var(--ink-faint); background: var(--sunk); }
.empty { color: var(--ink-muted); background: var(--card); border: 1px dashed var(--line-strong); border-radius: 12px; padding: 22px; }

/* ---------- stub panels ---------- */
.panel { background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; padding: 22px; margin-top: 24px; }
.panel h3 { margin: 0 0 10px; font-size: 17px; }
.panel dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; font-size: 15px; }
.panel dt { color: var(--ink-faint); }
.panel dd { margin: 0; font-family: var(--mono); font-size: 14px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- tables of contents ----------
   Two kinds: the reading list for an area, and the in-page jump list for one
   piece. Both are navigation, so both are numbered and neither competes with
   the prose for weight. */
.toc {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--radius);
  padding: var(--s5) var(--s6);
  margin: var(--s8) 0;
  max-width: var(--measure);
}
.toc-label {
  margin: 0 0 var(--s3);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.toc ol { margin: 0; padding-left: var(--s5); }
.toc li { margin: var(--s2) 0; }
.toc a { color: var(--brand-600); text-decoration: none; font-weight: 500; }
.toc a:hover { text-decoration: underline; }
.toc a:active { color: var(--brand-700); }
.toc-area li { margin: var(--s4) 0; }
.toc-sum { display: block; color: var(--ink-muted); font-size: var(--step--1); margin-top: 2px; }

/* ---------- data tables ---------- */
.table-wrap { overflow-x: auto; margin: var(--s4) 0; }
table.data { border-collapse: collapse; width: 100%; font-size: var(--step--1); min-width: 520px; }
table.data th {
  text-align: left; padding: var(--s2) var(--s4) var(--s2) 0;
  border-bottom: 2px solid var(--brand-500);
  font-weight: 600; color: var(--ink);
  white-space: nowrap;
}
table.data td { padding: var(--s2) var(--s4) var(--s2) 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-muted); }
table.data td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }

/* prose sections are anchor targets now — keep the heading clear of the topbar */
.prose[id] { scroll-margin-top: var(--s8); }

/* ---------- citation lists ---------- */
ul.links { list-style: none; margin: var(--s4) 0 0; padding: 0; max-width: var(--measure); }
ul.links li { padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
ul.links a { color: var(--brand-600); text-decoration: none; font-weight: 500; }
ul.links a:hover { text-decoration: underline; }
ul.links a:active { color: var(--brand-700); }
.link-note { display: block; color: var(--ink-faint); font-size: var(--step--1); margin-top: 2px; }

/* ---------- the brand lockup ----------
   The full drawn mark. Used once, at the top of the public home page: it is the
   one place with room for the illustration, and repeating it would spend the
   impact it has by being rare.

   The asset is a PNG with a real alpha channel, so it sits on any ground. The
   panel behind it stays dark anyway — the artwork's outlines and its glow were
   drawn for a dark canvas and it is simply strongest there — but that is now a
   choice rather than a constraint the file imposes. */
.hero-brand {
  margin: calc(var(--s12) * -1) calc(var(--s6) * -1) var(--s10);
  padding: var(--s8) var(--s6) var(--s10);
  background: var(--ink-deep);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  text-align: center;
}
.hero-brand .emblem {
  display: block; width: 100%; max-width: 300px; height: auto;
  margin: 0 auto var(--s5);
}
/* The name, set rather than drawn. Tracked and uppercased to match the
   wordmark in the bar, so the two readings of the same word agree. Its size is
   capped in ch rather than px: this is one word, and a viewport-scaled heading
   that outgrows the emblem above it inverts the hierarchy. */
.hero-brand h1 {
  color: var(--on-dark-accent);
  font-family: var(--display);
  font-weight: var(--wordmark-weight); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: clamp(32px, 7vw, 52px);
  margin: 0 0 var(--s4);
  /* Uppercase tracking adds a trailing gap after the last letter that optical
     centring has to pay back, or the word sits visibly right of the emblem. */
  text-indent: 0.14em;
}
.hero-brand .hero-sub {
  font-size: var(--step-1); max-width: 46ch;
  color: var(--on-dark-muted); margin-left: auto; margin-right: auto;
}

/* ---------- the section shell ------------------------------------------------
 *
 * `ui-architecture` defines the construct and `sectionShell()` emits its
 * structure; this is the only place that says how wide the rail is or what
 * colour it sits on. The markup carries no appearance at all, which is what
 * lets a theme move the rail without anybody editing a renderer.
 *
 * No media queries, deliberately. D5 of `review/section-shells` decided against
 * a responsive collapse this round: these are operator tools used at a desk,
 * and the phone layout is a named limitation rather than an oversight.
 */

/* The section FILLS what the page leaves it, and is told so by the layout
 * rather than by arithmetic. `body` is already a flex column with the topbar
 * and the footer both `flex: none`, so claiming the remainder is one line and
 * it is right at every viewport. */
.page-section { display: block; flex: 1 1 auto; min-height: 0; }

.sec {
  display: grid;
  grid-template-columns: var(--sec-rail-width, 260px) minmax(0, 1fr);
  grid-template-areas: "chrome chrome" "rail workspace";
  /* FILL, not a minimum. A full-width application inside the workspace has to
   * be able to reach the bottom of the frame: with `min-height` and
   * `align-items: start` it sat at its content height and left the ground
   * showing under its own footer. */
  /* 100% of the slot, NOT 100vh minus a guess. `--chrome-height` was 64px and
   * the real chrome is the topbar AND the footer, so the section came out 44px
   * taller than the space it had and `.page-section`'s overflow:hidden ate the
   * bottom of the rail and the workspace. A number that has to be kept in
   * agreement with two other elements is a number that will stop agreeing. */
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
}
/* Only the workspace scrolls. The rail and the chrome stay put, which is what
 * makes a long table feel like a pane rather than a page. */
.page-section { overflow: hidden; }

.sec-chrome {
  grid-area: chrome;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) var(--s6);
  /* `--line-strong`, not `--line`. Measured at APCA Lc 9 against the card it
   * sits on, which is below the Lc 15 floor where a rule stops being visible at
   * all: a divider nobody can see is dead weight, and this one separates the
   * section's name from its content. */
  border-bottom: 1px solid var(--line-strong);
  background: var(--card);
}
.sec-title {
  font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
  text-decoration: none; font-size: var(--step-0);
}
a.sec-title:hover { color: var(--brand-600); }
.sec-chrome-aside { color: var(--ink-muted); font-size: var(--step--1); }

.sec-rail {
  grid-area: rail;
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s4) var(--s3);
  /* `--sunk`, not `--ink-panel`. The ink- family is the DARK ground, and
   * `--ink-panel` is "one step up, for panels on the deep ground": using it
   * here painted a black rail beside a white workspace. `--sunk` is the
   * recessed light surface, which is what a rail beside content is. */
  /* `--line-strong` for the same reason the chrome uses it: measured at APCA
    * Lc 10 against the sunk ground, under the Lc 15 floor where a rule stops
    * being visible. This one is the whole boundary between navigation and
    * content. */
  border-right: 1px solid var(--line-strong);
  background: var(--sunk);
  overflow-y: auto;
}

.sec-rail-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-sm);
  color: var(--ink-muted); text-decoration: none;
  font-size: var(--step--1); line-height: 1.3;
  /* A rail row is a target, and 36px is the smallest one worth aiming at with
   * a trackpad. The button token's 44px is for a primary action. */
  min-height: 36px;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.sec-rail-row:hover { background: var(--card); color: var(--ink); }
.sec-rail-row.is-current {
  background: var(--card); color: var(--ink); font-weight: 600;
  /* The marker is on the inline start edge rather than a background change
   * alone: current-ness should survive a theme that flattens the surfaces. */
  box-shadow: inset 2px 0 0 var(--brand-500);
}

.sec-rail-icon {
  flex: 0 0 20px; width: 20px; height: 20px;
  display: grid; place-items: center;
  color: currentColor; opacity: 0.85;
}
.sec-rail-row.is-current .sec-rail-icon { opacity: 1; }
.sec-rail-mono {
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  color: var(--ink-muted);
}
.sec-rail-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sec-workspace {
  grid-area: workspace;
  padding: var(--s6);
  min-width: 0;   /* a grid child that can shrink, or a wide table pushes the rail off */
  /* Wide content scrolls INSIDE the workspace, and so does long content. The
   * Everything table is wider than any column it will be given; without this it
   * pushed its own last column off the screen instead of offering a scrollbar. */
  overflow: auto;
}

/* The three widths, and no more. A fourth would be a width per screen, which is
 * how a layout stops being predictable. */
.sec-w-reading .sec-workspace { max-width: var(--measure); margin-inline: auto; }
.sec-w-wide .sec-workspace    { max-width: 1180px; }
.sec-w-full .sec-workspace    { max-width: none; }

/* THE ONE WAY OUT OF THE GUTTER, declared per tool rather than implied by the
 * width. Only a tool that genuinely draws to the workspace edge wants this, and
 * there is exactly one: atlas, whose explorer fills the space it is given. Every
 * other full-width tool wanted the gutter and had been putting it back by hand. */
.sec-bleed .sec-workspace { padding: 0; }

/* A module's own destinations, as children of its row in the ONE rail.
 * Indented: they are inside the row above them, not beside it.
 *
 * The indent USED to clear the parent's 20px icon so a text-only child lined up
 * under the parent's label. A child carries its own icon now, so that indent
 * would push eleven labels a whole icon further right than the tool naming
 * them. It clears the gutter and nothing else, and the nesting is carried by
 * the rule and the smaller mark. */
.sec-rail-children {
  display: flex; flex-direction: column;
  margin: var(--s1) 0 var(--s2) calc(var(--s3) + var(--s2));
  /* The fourth boundary, measured at Lc 0 against the sunk rail. Every rule
   * this shell draws BETWEEN two things is --line-strong; --line is for rules
   * inside one. */
  border-left: 1px solid var(--line-strong);
}
.sec-rail-child {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3);
  color: var(--ink-muted); text-decoration: none;
  font-size: var(--step--1); line-height: 1.3;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
/* Smaller than the parent's 20px: a destination is subordinate to the tool that
 * holds it, and drawing both marks at one size says they are peers. */
.sec-rail-child .sec-rail-icon { flex: 0 0 16px; width: 16px; height: 16px; }
.sec-rail-child .sec-rail-icon svg { width: 15px; height: 15px; }
.sec-rail-child:hover { background: var(--card); color: var(--ink); }
.sec-rail-child.is-current {
  color: var(--ink); font-weight: 600; background: var(--card);
  box-shadow: inset 2px 0 0 var(--brand-500);
}

/* The other mode: a strip across the top of the workspace, which is the pattern
 * CRM drew for itself before this was canonical. */
.sec-tabs {
  display: flex; gap: var(--s5);
  margin: calc(var(--s6) * -1) calc(var(--s6) * -1) var(--s6);
  padding: 0 var(--s6);
  /* The third of the three, measured at Lc 10. Every boundary this shell draws
   * uses --line-strong; --line is for rules INSIDE a surface, not between two. */
  border-bottom: 1px solid var(--line-strong);
}
/* The base rule pulls the tabs out by exactly the workspace padding, so the
 * bottom border spans the full width. With no padding to cancel there is
 * nothing to pull against, so the strip that bleeds gets its own. */
.sec-bleed .sec-tabs { margin: 0 0 var(--s4); padding: 0 var(--s5); }
.sec-tab {
  padding: var(--s3) 2px;
  color: var(--ink-muted); text-decoration: none;
  font-size: var(--step-0); font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.sec-tab:hover { color: var(--ink); }
.sec-tab.is-current { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand-600); }

/* ---------- the sync control, in the section chrome ---------- */

/* It lives in the chrome's aside, which had been an empty slot since the shell
 * was written, and it is drawn only where it can run: a laptop with a cloud-sql
 * proxy. The deployment renders nothing rather than a button that cannot work. */
.sync { position: relative; }
.sync-open {
  list-style: none; cursor: pointer; user-select: none;
  padding: var(--s2) var(--s4); border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--card);
  font-size: var(--step--1); font-weight: 600; color: var(--ink-muted);
}
.sync-open::-webkit-details-marker { display: none; }
.sync-open:hover { color: var(--ink); background: var(--sunk); }
.sync[open] .sync-open { color: var(--ink); background: var(--sunk); }
.sync-panel {
  position: absolute; right: 0; top: calc(100% + var(--s2)); z-index: 30;
  width: min(520px, 80vw); padding: var(--s4);
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-deep);
}
.sync-dirs { display: flex; gap: var(--s3); margin-bottom: var(--s3); }
/* The log is monospace and scrolls itself: the run is a sequence of short
 * lines, and a panel that grew with them would push the page around while
 * somebody is reading it. */
.sync-log {
  margin: 0; max-height: 300px; overflow: auto;
  padding: var(--s3); border-radius: var(--radius-sm);
  background: var(--sunk); border: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--type-size-xs); line-height: 1.5;
  color: var(--ink-muted); white-space: pre-wrap;
}
.sync-log:empty { display: none; }
.sync-log .bad { color: var(--stop); font-weight: 600; }

/* ---------- the sync manifest ----------
   A TABLE OF PROPOSALS, each one a switch. Nothing in it has happened: the
   point of drawing it is that somebody reads it before it does. */
.sync-table { max-height: 46vh; overflow: auto; margin: var(--s3) 0; }
.sync-tool { display: flex; gap: var(--s2); align-items: baseline; padding: var(--s3) 0 var(--s2); }
.sync-tool b { font-size: var(--step--1); }
.sync-skip { color: var(--ink-faint); font-size: var(--step--1); }
.sync-rows { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.sync-rows th { text-align: left; font-weight: 400; color: var(--ink-faint);
  padding: 2px 8px 4px 0; border-bottom: 1px solid var(--line); }
.sync-rows td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line);
  vertical-align: top; }
.sync-rows td:first-child, .sync-rows th:first-child { width: 24px; }
.sync-rows td:nth-child(3) { white-space: nowrap; color: var(--ink-muted); }
.sync-rows td:last-child { color: var(--ink-faint); }
/* A conflict is the row nobody should apply without reading it, so it is the
   row that does not look like the others. */
.sync-rows tr.is-conflict td { background: color-mix(in srgb, var(--stop) 7%, transparent); }
.sync-rows tr.is-conflict td:nth-child(3) { color: var(--stop); font-weight: 600; }
.sync-progress { display: flex; align-items: center; gap: var(--s3); margin: var(--s3) 0 0; }
.sync-bar { flex: 1; height: 6px; accent-color: var(--brand-600); }
.sync-now { font-size: var(--step--1); color: var(--ink-faint); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40ch; }
/* A row that has landed is no longer a proposal, and says so where its
   direction used to be. */
.sync-rows tr.is-applied td { color: var(--ink-faint); }
.sync-rows tr.is-applied td:nth-child(3) { color: var(--brand-600); font-weight: 600; }