/* Humble Services, Phase 1 review site. A serif for headings, a readable sans for everything else, one deliberate
   light theme, and an earthy green scale whose steps sit at the same luminances as the crest's hexagons. */
/* ===== BEGIN BRAND TOKENS: Humble Services =====
   The ONLY place this client's brand values live in the stylesheet. To reskin for another client, change these values,
   then the Google Fonts link, wordmark and assets/logo.png in the pages (see the site plan's reskinning notes).
   Rules after this block use these tokens only: the site check fails if a color or font name appears anywhere else.

   The green scale. The crest is achromatic - every pixel of assets/logo.png and of the original in
   source_docs/media/humble_logo_from_docs.png is grey (max channel spread 7/255, i.e. compression noise). What the
   crest actually contributes is its TONAL LADDER: the hexagons plateau at #000000, #343434, #646464, #989898,
   #c4c4c4 and #f0f0f0. Each green below was solved to sit at the SAME WCAG relative luminance as its crest step, so
   the artwork's light-to-dark rhythm is preserved exactly and only the hue moves - forest at the dark end drifting
   to olive at the light end, saturation raised on the light and mid steps (2026-09-15) so the page reads as green at a glance while the
   luminance ladder is untouched: every step still sits within 0.06 relative luminance of its crest grey and every
   declared pair still clears WCAG AA. Muted, not vivid - the most saturated step is the button ground.
   Every text pair is verified by design/check_palette.py, which recomputes the ratios from these values. */
:root {
  /* Green scale, dark to light. Luminance-matched to the crest steps named in brackets. */
  --ink: #16241a;        /* [near #000000] body text, headings */
  --char: #2a4630;       /* [#343434] secondary headings, nav, labels */
  --mid: #4a6b50;        /* [#646464] quiet text, still 5.5:1 on paper */
  --soft: #769475;       /* [#989898] input borders and hints, 3.35:1 on white */
  --line: #d9d9d7;       /* neutralised: look E (white ground, solid green nav bar) */
  --wash: #f5f5f4;       /* look E: near-white neutral grey */
  --stripe: #f0f0ef;     /* look E: near-white neutral */
  --paper: #ffffff;      /* look E: pure white ground */
  --card: #fff;
  --on-ink: #fff;        /* text on the green buttons */
  /* The one saturated-but-earthy family, used for action and accent only. */
  --brand: #2b5138;      /* button ground, accent rules */
  --brand-hi: #3a6a49;   /* top of the button gradient */
  --brand-deep: #1f3c2a; /* bottom of the button gradient, and hover */
  --alert: #8a2118;      /* form errors only */
  --serif: "Source Serif 4", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --caps: Cinzel, "Trajan Pro", "Iowan Old Style", Georgia, serif; /* echoes the crest's wordmark */
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; /* system-demo.html: figures and IDs only */
  /* Status grounds for the system demo. Green, amber and red keep their meanings: works, waiting / not built, problem. */
  --ok-wash: #e8f1ea;
  --warn: #7a4600;
  --warn-wash: #fbf0dc;
  --alert-wash: #f9e5e2;
  /* AI agents (Clark 2026-10-01): one blue-purple family, a shade each; people stay green. */
  --ai-ink: #3b2f7e;
  --ai-wash: #efecfa;
  --ai-line: #6a5bb8;
  --ai: var(--ai-wash);   /* per-agent fill, overridden by .ai-sN */
  --ai-bd: var(--ai-line);
  /* ORG-GEN TOKENS */
  --ai-1: #74bcfa; --ai-bd-1: #086395;
  --ai-2: #e799fc; --ai-bd-2: #87409d;
  --ai-3: #f5e2f9; --ai-bd-3: #97869b;
  --ai-4: #c8b1f0; --ai-bd-4: #6d5a92;
  --ai-5: #a4b8cf; --ai-bd-5: #4d6075;
  --ai-6: #cdb3d3; --ai-bd-6: #725b78;
  --ai-7: #bacbfc; --ai-bd-7: #5f719d;
  --ai-8: #9cb4ff; --ai-bd-8: #3d5da0;
  --ai-9: #caa5fe; --ai-bd-9: #6d4e9f;
  --ai-10: #cadff7; --ai-bd-10: #6f8399;
  --ai-11: #f1cafb; --ai-bd-11: #93709c;
  --ai-12: #edb2fc; --ai-bd-12: #8e599d;
  --ai-13: #90bae5; --ai-bd-13: #346288;
  --ai-14: #dbd2f8; --ai-bd-14: #7f779a;
  --ai-15: #b6b1e1; --ai-bd-15: #5d5a85;
  --ai-16: #b6acfd; --ai-bd-16: #5a559e;
  --ai-17: #9bb6f0; --ai-bd-17: #3f5f92;
  --ai-18: #cfa9d8; --ai-bd-18: #74527d;
  --ai-19: #bebede; --ai-bd-19: #656582;
  --ai-20: #acd0f6; --ai-bd-20: #517698;
  --ai-21: #b9bcfd; --ai-bd-21: #5e649e;
  --ai-22: #d7a5e3; --ai-bd-22: #7a4e86;
  --ai-23: #d5c4f9; --ai-bd-23: #796b9b;
  /* /ORG-GEN TOKENS */
  color-scheme: light;
}
/* ===== END BRAND TOKENS ===== */
* { box-sizing: border-box; }
html { font-size: 18px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--char); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
/* Anything that sits on a solid --brand (green) ground needs a LIGHT outline instead: the site-wide green
   outline above is invisible against its own color. Found 2026-09-26 (look E put a solid green bar under
   the nav): grep every "background: ... var(--brand)" rule in this file and list the focusable things
   inside it here, so the next brand-background block is not missed the same way. */
.nav-menu :focus-visible, .nav-toggle:focus-visible { outline-color: var(--on-ink); }

.skip { position: absolute; left: -9999px; top: 0; background: var(--brand); color: var(--on-ink); padding: 10px 16px; z-index: 10; }
.skip:focus { left: 12px; top: 12px; }

.review-banner { background: var(--wash); color: var(--char); border-bottom: 1px solid var(--line); font-size: .8rem; padding: 7px 20px; text-align: center; }
.dagger { color: var(--mid); } /* marks wording awaiting legal review, as on the scorecard */

/* Header: the crest and wordmark, one "Book a Consultation" link that is always visible, and the main nav inside a
   <details> "Menu" disclosure. No script: at 999px and under the nav stays folded behind the Menu button,
   which opens by tap, Enter or Space and shows the site-wide focus outline. Wider screens show the nav unfolded. */
.site-header { background: linear-gradient(180deg, var(--wash), var(--paper)); border-bottom: 1px solid var(--line); }
.header-inner { max-width: 1100px; margin: 0 auto; padding: 14px 20px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; }
.brand { grid-column: 1; grid-row: 1; justify-self: start; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 44px; }
.wordmark { font-family: var(--caps); font-weight: 500; letter-spacing: .12em; font-size: 1rem; line-height: 1.2; }
.wordmark small { display: block; font-family: var(--sans); letter-spacing: .04em; font-size: .72rem; color: var(--mid); }
.header-cta { grid-column: 2; grid-row: 1; display: inline-block; border: 1.5px solid var(--brand-deep); border-radius: 8px; padding: 8px 16px; background: linear-gradient(180deg, var(--brand-hi), var(--brand), var(--brand-deep)) 0 0 / 100% 200%; color: var(--on-ink); font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.header-cta:hover { background-position: 0 100%; color: var(--on-ink); } /* the lower half of the same gradient: brand to brand-deep, as before, but it can glide */
/* look E: the nav row itself is a solid green bar (the header above stays the white/wash gradient so the crest and
   wordmark keep their original card-on-white treatment - only the nav row is painted, not the whole header). */
/* fix D, 2026-09-26: padding/gap trims tried in fix C did not fix the wrap at 561px. A flex-wrap: nowrap content-
   width estimate (~740px) badly undercounted the real cost (the nav row also carries the grid layout, the
   details/summary box and the toggle it hides at this width): a direct binary search in real Chromium, setting
   the viewport across a scan of widths and counting rows, found the true one-row threshold between 940px (still
   wraps) and 945px (fits). Restored padding/gap to their original values (not needed once the breakpoint below
   is moved) and moved the unfold breakpoint from 561px to 1000px, a real margin over the measured threshold so
   normal run-to-run variance (fonts, subpixel rounding) can't tip it into two rows again. */
.nav-menu { grid-column: 1 / -1; grid-row: 2; background: var(--brand); border-radius: 8px; padding: 2px 14px; margin: 2px 0 0; }
.nav-toggle { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; border: 1.5px solid var(--on-ink); border-radius: 8px; padding: 8px 16px; background: transparent; color: var(--on-ink); font-size: .88rem; font-weight: 600; }
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle::after { content: "▾"; font-size: .85em; }
.nav-menu[open] > .nav-toggle::after { content: "▴"; }
.site-nav { padding: 2px 0 2px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 18px; }
.site-nav a { display: inline-block; padding: 6px 0; font-size: .88rem; color: var(--on-ink); text-decoration: none; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--on-ink); border-bottom-color: var(--on-ink); background: var(--brand-hi); }
.site-nav a[aria-current="page"] { color: var(--on-ink); border-bottom-color: var(--on-ink); font-weight: 700; }
/* Tap targets: every header, menu and footer link is at least 44px tall (WCAG 2.5.5). */
.site-nav a, .nav-toggle, .header-cta, .site-footer li a { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
.site-footer li { margin-bottom: 0; }
/* Browser note: unfolding a closed <details> on wide screens needs ::details-content (Chrome/Edge 131+, Safari 18.4+,
   Firefox 143+). Ceiling: an older browser shows the Menu button at every width, so desktop visitors there tap once
   to see the nav; nothing is lost. Upgrade path: the Phase 2 Next.js header renders a plain nav on wide screens. */
@media (min-width: 1000px) {
  @supports selector(::details-content) {
    .nav-toggle { display: none; }
    .nav-menu::details-content { display: block; content-visibility: visible; }
  }
}

main { max-width: 1100px; margin: 0 auto; padding: 36px 20px 64px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--char); line-height: 1.2; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: 2.3rem; }
h2 { font-size: 1.65rem; margin-top: 0; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.narrow { max-width: 42rem; }
.lede { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--char); }
.eyebrow { font-family: var(--caps); font-size: .8rem; letter-spacing: .14em; color: var(--brand); margin-bottom: .4rem; }
.crumb { font-size: .9rem; color: var(--mid); margin-bottom: .6rem; }
.sample-note { border-left: 3px solid var(--brand); background: var(--wash); padding: 12px 16px; border-radius: 0 8px 8px 0; }
/* Sample Review: the embedded map takes the site's look-E ground instead of its own green one. */
.sample-band .m360 { --m-ground: var(--paper); --m-surface: var(--paper); --m-wash: var(--wash); --m-line: var(--line); }
.review-preview { display: block; max-width: 44rem; margin: 1.2rem 0 .6rem; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.review-preview img { display: block; width: 100%; }
section.band { padding: 44px 0; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
section.band:first-of-type { border-top: 0; padding-top: 0; }

.btn { display: inline-block; border-radius: 8px; padding: 13px 24px; border: 1.5px solid var(--brand-deep); background: linear-gradient(180deg, var(--brand-hi), var(--brand), var(--brand-deep)) 0 0 / 100% 200%; color: var(--on-ink); text-decoration: none; cursor: pointer; }
.btn:hover { background-position: 0 100%; color: var(--on-ink); }
.btn.ghost { background: transparent; border-color: var(--brand); color: var(--brand); }
.btn.ghost:hover { background: var(--wash); color: var(--brand-deep); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 1.4rem; }

.hero { display: grid; grid-template-columns: 1fr 220px; gap: 40px; align-items: center; }
.hero .crest { width: 220px; justify-self: end; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 18px; }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; }
.card h3 { color: var(--brand); }
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }
.plain { padding-left: 1.2rem; }
.plain li { margin-bottom: .4em; }
.sub-list { margin: 0 0 1em; }
/* A plain, non-interactive list of topics: no borders or pills, so nothing looks like a button. */
.topic-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 4px 28px; max-width: 52rem; }
.topic-list li { position: relative; padding-left: 1.1rem; }
.topic-list li::before { content: "–"; position: absolute; left: 0; color: var(--soft); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; counter-reset: step; }
.steps li { counter-increment: step; border-top: 4px solid var(--brand); padding-top: 10px; }
.steps li::before { content: counter(step); display: block; font-family: var(--caps); color: var(--mid); font-size: .8rem; }
.steps b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.1rem; }
.steps span { display: block; font-size: .88rem; color: var(--mid); }

/* Services: a jump index of the three groups, each with its services linked underneath. */
.service-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 12px 18px; margin-top: 1.6rem; }
.index-group { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; }
.index-head { font-family: var(--serif); font-size: 1.2rem; color: var(--char); }
.index-group ul { list-style: none; padding: 0; margin: .3rem 0 0; }
.index-group li { font-size: .92rem; padding: 3px 0; }

.service { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; margin-bottom: 18px; scroll-margin-top: 16px; }
.price { font-size: .95rem; color: var(--char); background: var(--wash); border-left: 3px solid var(--brand); padding: 8px 12px; margin: .8rem 0 0; }
.price .prelim-label { display: block; font-size: .78rem; color: var(--mid); }

.not-list { border-left: 3px solid var(--brand); padding-left: 1rem; }
.empty { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 28px; text-align: center; }
.empty p { margin: 0; }
.empty .empty-title { font-family: var(--serif); font-size: 1.3rem; margin-bottom: .4rem; }

/* Placeholders: dashed box, a label no reader can mistake for real content. */
.placeholder { border: 2px dashed var(--soft); border-radius: 8px; background: repeating-linear-gradient(135deg, var(--card), var(--card) 10px, var(--stripe) 10px, var(--stripe) 20px); padding: 12px 16px; margin: .6rem 0 1rem; color: var(--char); }
span.placeholder { display: inline-block; padding: 2px 8px; margin: 0; }
.placeholder .ph-label { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--mid); margin: 0 0 .3rem; text-transform: none; }
span.placeholder .ph-label { display: inline; margin: 0; }
.placeholder .ph-title { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); margin: .2rem 0 .6rem; }
.placeholder > :last-child { margin-bottom: 0; }

.draft-legal { border: 2px solid var(--brand); border-radius: 8px; padding: 12px 16px; margin-bottom: 1.4rem; background: var(--card); }

form.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; max-width: 46rem; }
.field { display: grid; gap: 4px; align-content: start; }
.field.wide, .check, .fine, form.contact .actions, .notice { grid-column: 1 / -1; }
label, legend { font-size: .9rem; color: var(--char); }
.opt-label { color: var(--mid); }
input[type=text], input[type=email], input[type=tel], input[type=url], select, textarea { width: 100%; padding: 11px 12px; border: 1.5px solid var(--soft); border-radius: 8px; background: var(--card); }
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); }
[aria-invalid="true"] { border-color: var(--alert) !important; }
fieldset { border: 0; padding: 0; margin: 0; }
.radios { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.radios label, .check { display: flex; gap: 8px; align-items: flex-start; }
.check input, .radios input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--brand); }
.err { color: var(--alert); font-size: .86rem; margin: 0; }
.fine { font-size: .86rem; color: var(--mid); margin: 0; }
.notice { background: var(--wash); padding: 12px 16px; border-radius: 6px; margin: 0; }

.site-footer { border-top: 2px solid var(--brand); background: linear-gradient(180deg, var(--paper), var(--wash)); }
.site-footer .inner { max-width: 1100px; margin: 0 auto; padding: 28px 20px 36px; font-size: .86rem; color: var(--mid); display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .3rem; }
.site-footer .disclaimer { grid-column: 1 / -1; margin: 0; }

/* Platform preview: screenshots and the launch-check list. */
.shots { display: grid; gap: 22px; margin-top: 1.2rem; max-width: 62rem; }
.shot { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.shot img { display: block; border: 1px solid var(--line); border-radius: 6px; }
.shot figcaption { font-size: .86rem; color: var(--mid); margin-top: 8px; }
.shot.phone { max-width: 20rem; }
.gate-list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 10px; max-width: 52rem; }
.gate-list li { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; }
.gate-list b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.1rem; color: var(--char); }
.gate-list .status { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--char); background: var(--wash); border-radius: 999px; padding: 1px 10px; margin: 4px 8px 4px 0; }

@media (max-width: 800px) {
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .founder-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  html { font-size: 17px; }
  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.4rem; }
  /* Phone header: crest and wordmark on the first row; Menu (left) and Book a Consultation (right) on the second.
     The opened list spans the full width below; the link sits on top of the details box, so it stays tappable. */
  .header-inner { row-gap: 10px; }
  .brand { grid-column: 1 / -1; } /* full first row, so the wordmark is not squeezed by the link's column */
  .header-cta { grid-column: 2; grid-row: 2; align-self: start; position: relative; z-index: 1; }
  .site-nav { padding: 8px 0 0; }
  .site-nav ul { display: block; }
  .site-nav a { display: flex; padding: 9px 0; border-bottom: 1px solid var(--line); }
  .site-nav li:last-child a { border-bottom: 0; }
  .site-nav a[aria-current="page"] { border-bottom: 1px solid var(--line); }
  .hero { grid-template-columns: 1fr; gap: 12px; }
  .hero .crest { display: none; } /* the header already carries the crest */
  form.contact { grid-template-columns: 1fr; }
  .site-footer .inner { grid-template-columns: 1fr; }
  .btn { width: 100%; text-align: center; }
}
/* ===== MOTION (2026-09-27: calm and professional) =====
   Everything that moves sits inside this ONE block, so a visitor who asks for reduced motion gets the site exactly as
   it was before motion existed: there is no second rule to override and none to forget. Only colour, opacity, the
   buttons' gradient position and the height of things that open are animated - never position or scale, so there is
   no bounce, no slide and no parallax. Each feature is plain CSS that an older browser ignores, leaving the instant
   change it had before; no content ever waits on an animation to become visible. Durations stay at or under 220ms.
   Checked by site_tools/check_motion.js (static rules + real-browser rungs, each proven by a red mutant). */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; } /* lets heights ease to "auto" (Chrome/Edge 129+); elsewhere they snap */
  html { scroll-behavior: smooth; } /* in-page jumps (Services index, skip link) glide instead of cutting */
  /* Page to page: a 200ms cross-fade between pages of this site (Chrome/Edge 126+, Safari 18.2+; others cut). */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
  /* Hover feedback. The focus outline stays instant on purpose: a keyboard user must see it at once. */
  a { transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
  .btn, .header-cta { transition: background-position .18s ease, background-color .18s ease, color .15s ease, border-color .15s ease; }
  input, select, textarea { transition: border-color .15s ease; }
  /* Contact form: an error or the notice fades in and its space opens smoothly, instead of the form jumping. */
  .err, .notice { overflow-y: clip; transition: opacity .2s ease, block-size .2s ease; }
  @starting-style { .err, .notice { opacity: 0; block-size: 0; } }
}
/* The phone Menu unfolds and folds. Only below the 1000px unfold breakpoint: above it the nav is always open. */
@media (prefers-reduced-motion: no-preference) and (max-width: 999px) {
  .nav-menu::details-content { block-size: 0; overflow-y: clip; opacity: 0; transition: block-size .22s ease, opacity .22s ease, content-visibility .22s allow-discrete; }
  .nav-menu[open]::details-content { block-size: auto; opacity: 1; }
}
/* ===== END MOTION ===== */
@media print {
  .review-banner, .site-nav, .nav-toggle, .header-cta, .skip { display: none; }
}
/* books-and-hosting.html: one big overhead map in plain HTML (no SVG), so the words stay large on any screen.
   Top to bottom: people -> private network -> the Mac mini (sign-in, platform, AI, data) -> back-ups. Bluehost sits beside.
   Each box carries a status chip in words: "Works in test" or "Not built yet". */
.mm-map { margin: 1.4rem 0 0; display: grid; gap: 0; max-width: 60rem; font-size: 1.08rem; }
.mm-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.mm-box { background: var(--card); border: 2px solid var(--mid); border-radius: 12px; padding: 16px 18px; }
.mm-box h3 { font-family: var(--sans); font-weight: 600; font-size: 1.2rem; color: var(--ink); margin: 0 0 .3em; }
.mm-box p { margin: 0; color: var(--char); }
.mm-box.mm-todo { border-style: dashed; }
.mm-box.mm-wall { border-width: 4px; border-color: var(--brand-deep); }
.mm-chip { display: inline-block; margin-top: .6em; font-size: .85rem; font-weight: 600; padding: 2px 10px; border-radius: 99px; background: var(--wash); color: var(--brand-deep); border: 1px solid var(--line); }
.mm-todo .mm-chip { color: var(--alert); }
.mm-down { height: 34px; position: relative; }
.mm-down::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 10px; border-left: 3px solid var(--mid); }
.mm-down::after { content: ""; position: absolute; left: calc(50% - 8px); bottom: 2px; border: 8px solid transparent; border-top: 10px solid var(--mid); border-bottom: 0; }
.mm-band { border: 3px solid var(--brand); border-radius: 14px; padding: 14px 18px; background: var(--wash); }
.mm-band > h3 { font-family: var(--caps); font-weight: 500; font-size: 1.05rem; letter-spacing: .04em; color: var(--brand-deep); margin: 0 0 .4em; }
.mm-band > p { margin: 0 0 .8em; color: var(--char); }
.mm-mini { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-ink); }
.mm-mini > h3, .mm-mini > p { color: var(--on-ink); }
.mm-mini .mm-box { border-color: var(--paper); }
.mm-inner { display: grid; gap: 0; }
.mm-mini .mm-down::before { border-left-color: var(--on-ink); }
.mm-mini .mm-down::after { border-top-color: var(--on-ink); }
.mm-side { margin-top: 18px; }
.mm-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 1rem; color: var(--mid); font-size: .98rem; }
.mm-legend span::before { content: ""; display: inline-block; width: 2.2rem; height: 1rem; margin-right: .45rem; vertical-align: -3px; border: 2px solid var(--mid); border-radius: 4px; }
.mm-legend .l-todo::before { border-style: dashed; }
.mm-legend .l-wall::before { border: 4px solid var(--brand-deep); }
.big-steps { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 12px; max-width: 48rem; counter-reset: bs; }
.big-steps li { counter-increment: bs; display: grid; grid-template-columns: 2.6rem 1fr; gap: 4px 14px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.big-steps li::before { content: counter(bs); grid-row: span 2; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--brand); color: var(--on-ink); display: grid; place-items: center; font-weight: 600; }
.big-steps b { font-size: 1.12rem; }
.big-steps span { color: var(--char); }
.big-steps li.bs-next { border: 2px solid var(--brand); }
.big-steps em.mm-chip { font-style: normal; margin: 0 0 0 .5em; vertical-align: 2px; }
/* system-demo.html: a clickable demo of Clark's system, SAMPLE data only. The layout follows our dashboard deck:
   pill nav, stat tiles with a coloured left edge, a right-hand inspector, status badges and corner brackets, dressed in
   this site's tokens. Green = works in our test version, amber = waiting or not built yet, red = a problem. The heavy
   dark border is the wall around client records, as on the map. No motion: every change is instant. */
.dm-app { margin-top: 1.4rem; background: var(--wash); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.dm-frame { position: relative; background-color: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px;
  background-image: linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--brand), var(--brand)),
    linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--brand), var(--brand));
  background-repeat: no-repeat;
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%; }
.dm-frame + .dm-frame, .dm-body > div > * + * { margin-top: 14px; }
.dm-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -12px -14px 12px; padding: 9px 16px 8px; background: var(--wash); border-bottom: 1px solid var(--line);
  font-family: var(--caps); font-weight: 500; font-size: .84rem; letter-spacing: .06em; color: var(--char); }
.dm-hd .dm-badge { margin-left: auto; font-family: var(--sans); letter-spacing: 0; font-size: .72rem; padding: 0 8px; }
.dm-gloss { font-size: .9rem; color: var(--mid); margin: -4px 0 8px; }
.dm-sample { display: inline-block; margin: 0 0 .8rem; padding: 3px 12px; border: 2px solid var(--ink); border-radius: 4px; background: var(--paper); color: var(--ink);
  font-family: var(--caps); font-weight: 500; font-size: .8rem; letter-spacing: .12em; }
.dm-headline { font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; color: var(--ink); margin: 0 0 1rem; max-width: 46rem; }
.dm-note { border-left: 3px solid var(--warn); background: var(--warn-wash); color: var(--ink); padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 0 0 1rem; max-width: 50rem; }
/* The front door: who is opening the demo. */
.dm-door { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 12px; margin-top: .6rem; }
.dm-person { display: grid; gap: 4px; text-align: left; cursor: pointer; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 6px; padding: 14px 16px; }
.dm-person b { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--char); }
.dm-person span { font-size: .92rem; color: var(--mid); }
.dm-person:hover { background: var(--ok-wash); }
/* The top strip: who you are, the pill nav, and a way back to the door. */
.dm-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.dm-who { font-size: .92rem; color: var(--char); }
.dm-who b { color: var(--ink); }
.dm-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dm-pill, .dm-btn { cursor: pointer; border: 1px solid var(--line); border-radius: 999px; padding: 6px 15px; background: var(--card); color: var(--char); font-size: .9rem; font-weight: 600; }
.dm-pill:hover, .dm-btn:hover { border-color: var(--brand); color: var(--brand-deep); }
.dm-pill[aria-current="page"] { border: 2px solid var(--brand); color: var(--brand-deep); background: var(--ok-wash); padding: 5px 14px; }
.dm-btn { border-radius: 6px; border-color: var(--soft); font-weight: 600; }
.dm-btn.go { background: var(--brand); border-color: var(--brand-deep); color: var(--on-ink); }
.dm-btn.go:hover { background: var(--brand-deep); color: var(--on-ink); }
.dm-btn[disabled] { cursor: not-allowed; color: var(--mid); background: var(--wash); border-style: dashed; }
.dm-change { margin-left: auto; }
/* Stat tiles with a coloured left edge. */
.dm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 10px; margin: 0 0 14px; }
.dm-tile { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--mid); border-radius: 4px; padding: 10px 12px; }
.dm-tile.ok { border-left-color: var(--brand); }
.dm-tile.warn { border-left-color: var(--warn); }
.dm-tile.bad { border-left-color: var(--alert); }
.dm-tile .v { display: block; font-family: var(--mono); font-size: 1.6rem; font-weight: 600; line-height: 1.2; color: var(--ink); }
.dm-tile .v.words { font-family: var(--sans); font-size: 1.05rem; padding: 3px 0 2px; }
.dm-tile .k { display: block; font-family: var(--caps); font-size: .8rem; letter-spacing: .06em; color: var(--ink); margin-top: 3px; }
/* Status badges: always a word, never a colour alone. */
.dm-badge { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: .78rem; font-weight: 600; padding: 1px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--wash); color: var(--char); }
.dm-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.dm-badge.ok { color: var(--brand-deep); background: var(--ok-wash); border-color: var(--brand); }
.dm-badge.todo { color: var(--warn); background: var(--warn-wash); border: 1px dashed var(--warn); }
.dm-badge.warn { color: var(--warn); background: var(--warn-wash); border-color: var(--warn); }
.dm-badge.bad { color: var(--alert); background: var(--alert-wash); border-color: var(--alert); }
.dm-badge.lock { color: var(--on-ink); background: var(--brand-deep); border-color: var(--brand-deep); }
.dm-badge.key { color: var(--ink); background: var(--paper); border-color: var(--ink); }
.dm-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 14px; font-size: .86rem; color: var(--char); }
/* Main column plus the inspector on the right; the inspector drops below on narrow screens. */
.dm-body { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 14px; align-items: start; }
.dm-insp { position: sticky; top: 12px; }
.dm-insp-empty { color: var(--mid); margin: 0; }
.dm-detail > :last-child { margin-bottom: 0; }
.dm-detail .dm-badge { margin: .15rem 0; }
.dm-back { margin: 0 0 .8rem; }
.dm-detail h4 { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; color: var(--char); margin: 0 0 .4em; }
.dm-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0 0 .8rem; font-size: .92rem; }
.dm-kv dt { color: var(--mid); }
.dm-kv dd { margin: 0; color: var(--ink); }
.dm-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: .6rem 0 0; }
.dm-say { min-height: 1.4em; margin: .6rem 0 0; font-size: .9rem; color: var(--brand-deep); }
/* Rows: a whole row is one button that fills the inspector. */
.dm-list { list-style: none; margin: 0; padding: 0; }
.dm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; width: 100%; text-align: left; cursor: pointer;
  background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; padding: 10px 8px; }
.dm-list li:last-child .dm-row { border-bottom: 0; }
.dm-row:hover { background: var(--wash); }
.dm-row[aria-pressed="true"] { background: var(--ok-wash); border-left-color: var(--brand); }
.dm-row b { display: block; font-weight: 600; }
.dm-row small { display: block; font-size: .86rem; color: var(--mid); }
.dm-row .dm-badge { justify-self: start; }
.dm-row.stack { grid-template-columns: minmax(0, 1fr); }
.dm-app + section.band { padding-top: 44px; }
.dm-table .dm-badge { font-size: .74rem; }
.dm-fig { font-family: var(--mono); font-size: .9rem; }
/* Pipeline: one button per stage, with its count. */
.dm-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dm-stage { display: grid; gap: 2px; text-align: left; cursor: pointer; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: 4px; padding: 8px 10px; }
.dm-stage.lost { border-top-color: var(--mid); }
.dm-stage:hover { background: var(--wash); }
.dm-stage[aria-pressed="true"] { background: var(--ok-wash); border-color: var(--brand); }
.dm-stage span { font-size: .86rem; color: var(--char); }
.dm-stage b { font-family: var(--mono); font-size: 1.2rem; }
.dm-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 14px; }
.dm-two > .dm-frame + .dm-frame { margin-top: 0; }
.dm-two > .dm-wide { grid-column: 1 / -1; }
.dm-table td:last-child { white-space: nowrap; }
.dm-table th { white-space: nowrap; }
.dm-detail .dm-table + p { margin-top: .8rem; }
/* Disk meter. */
.dm-meter { height: 14px; border-radius: 7px; background: var(--wash); border: 1px solid var(--soft); overflow: hidden; margin: .3rem 0 .5rem; }
.dm-meter span { display: block; height: 100%; background: var(--brand); }
/* The wall around client records, drawn the same way as on the map. */
.dm-wall { border: 4px solid var(--brand-deep); }
table.dm-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.dm-table th, .dm-table td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dm-table th { font-weight: 600; color: var(--char); font-size: .84rem; }
.dm-table td.n, .dm-table th.n { text-align: right; font-family: var(--mono); white-space: nowrap; }
.dm-scroll { overflow-x: auto; }
.dm-screen > h2 { margin: .2rem 0 .6rem; }
.dm-screen > h2:focus { outline: none; } /* focus moves here after a screen change (tabindex -1, never a Tab stop), so the reader hears it without a box around the title */
@media (max-width: 900px) {
  .dm-body { grid-template-columns: minmax(0, 1fr); }
  .dm-insp { position: static; scroll-margin-top: 130px; }
  /* the screen switcher stays in reach on long phone pages */
  .dm-strip { position: sticky; top: 0; z-index: 6; background: var(--wash); margin: -16px -16px 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .dm-app { padding: 10px; margin-left: -10px; margin-right: -10px; border-radius: 10px; }
  .dm-frame { padding: 12px; }
  .dm-hd { margin: -10px -10px 10px; padding: 8px 10px; }
  .dm-strip nav { order: 3; flex-basis: 100%; }
  .dm-strip { margin: -10px -10px 14px; padding: 10px; } /* matches .dm-app's 10px padding here */
  .dm-pills { flex-wrap: nowrap; overflow-x: auto; }
  .dm-pill { white-space: nowrap; padding: 6px 12px; }
  .dm-headline { font-size: 1.18rem; }
  .dm-row { grid-template-columns: minmax(0, 1fr); }
  .dm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dm-pill, .dm-btn, .dm-stage { min-height: 44px; }
}
.dm-door { margin-bottom: 1.2rem; }
/* system demo, whole-company seats (2026-09-30): the CEO's org map and each seat's access view. */
.dm-door-h { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: var(--char); margin: 1.6rem 0 .2rem; }
.dm-door-sm { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.dm-door-sm .dm-person { padding: 10px 12px; }
.dm-door-sm .dm-person b { font-size: 1rem; }
.dm-person.ai, .og-node.ai { border-style: dashed; }
.og-map { position: relative; padding: 4px 0 8px; }
.og-lines { position: absolute; left: 0; top: 0; pointer-events: none; }
.og-lines path { fill: none; stroke: var(--char); stroke-width: 2; }
.og-lines path.ai { stroke-dasharray: 4 3; }
.og-top { display: flex; justify-content: center; gap: 16px; }
.og-top .og-node { flex: 1 1 0; }
.og-mid { display: flex; justify-content: center; margin-top: 26px; }
.og-mid .og-node, .og-top .og-node { width: 100%; max-width: 12rem; }
.og-depts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 14px; margin-top: 30px; }
.og-col { display: grid; gap: 8px; align-content: start; }
.og-node { position: relative; display: grid; gap: 1px; text-align: left; cursor: pointer; background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 6px; padding: 7px 10px; font: inherit; }
.og-node.ai { border-color: var(--warn); background: var(--warn-wash); }
.og-node b { font-size: .9rem; line-height: 1.25; }
.og-node small { font-size: .78rem; color: var(--mid); }
.og-node.ai small { color: var(--warn); }
.og-node[aria-pressed="true"] { outline: 3px solid var(--brand); outline-offset: 2px; }
.og-kid { margin-left: 22px; }
.og-nojs { color: var(--mid); }
.og-table td { white-space: nowrap; }
.og-table thead th { white-space: normal; vertical-align: bottom; min-width: 5.5rem; }
.og-tframe { margin-top: 14px; }
.og-node.ai { border-color: var(--warn); }
.og-table td.ac-O { color: var(--brand-deep); font-weight: 600; }
.og-table td.ac-N { color: var(--mid); }
.ac-wall { border-color: var(--alert); background: var(--alert-wash); }
.ac-wall .dm-headline { color: var(--alert); font-weight: 700; margin: 0 0 .3em; }
@media (max-width: 900px) { .dm-strip nav { min-width: 0; max-width: 100%; } .og-depts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .og-top { gap: 10px; } }
/* r1 panel fixes: AI chip, grouped door, phone table cards, wrapped pills, one-column map on small phones */
.dm-badge.ai { color: var(--char); background: var(--warn-wash); border: 1px solid var(--warn); justify-self: start; }
.dm-badge.ai::before { background: var(--warn); }
.og-node.ai { border-width: 2px; border-color: var(--warn); }
.og-node .dm-badge.ai { margin-top: 3px; font-size: .72rem; }
.dm-door-sub { font-family: var(--caps); font-size: .85rem; letter-spacing: .06em; color: var(--char); margin: 1rem 0 .1rem; }
.dm-person-map { margin-top: .8rem; border-left-width: 6px; background: var(--ok-wash); max-width: 32rem; }
.dm-door-sm { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
@media (max-width: 900px) {
  .dm-pills { -webkit-mask-image: linear-gradient(90deg, var(--ink) 85%, transparent); mask-image: linear-gradient(90deg, var(--ink) 85%, transparent); padding-right: 28px; }
  .og-tbl > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; border: 1px solid var(--brand); border-radius: 999px; padding: 0 16px; width: max-content; color: var(--brand-deep); }
  .og-table thead { display: none; }
  .og-table, .og-table tbody, .og-table tr { display: block; }
  .og-table tr { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
  .og-table th[scope="row"] { display: block; font-size: 1rem; padding: 0 0 4px; }
  .og-table td { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; border: 0; white-space: normal; }
  .og-table td::before { content: attr(data-label); color: var(--mid); font-weight: 400; }
}
@media (max-width: 480px) { .og-depts { grid-template-columns: minmax(0, 1fr); } }
/* r4 panel: table reads by hierarchy with the seat column pinned; AI rows tinted; locked lines recede so access stands out */
.og-table tr[data-kind="ai"] > * { background: var(--warn-wash); }
@media (min-width: 901px) { .og-table th[scope="row"] { position: sticky; left: 0; background: var(--card); z-index: 1; } .og-table tr[data-kind="ai"] th[scope="row"] { background: var(--warn-wash); } }
#ac-list .dm-row.locked b, #ac-list .dm-row.locked small { color: var(--mid); font-weight: 400; }
#ac-list .dm-row.locked .dm-badge { opacity: .75; }
#ac-list .dm-row[aria-pressed="true"] { box-shadow: inset 4px 0 0 var(--brand); }
.og-all { margin-top: .8rem; }
.og-all > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; border: 1px solid var(--brand); border-radius: 999px; padding: 0 16px; width: max-content; max-width: 100%; color: var(--brand-deep); }
@media (max-width: 900px) { .og-hint { display: none; } }
.og-all { margin-bottom: 1rem; }
/* polish pass: Clark's examples, table edge fade, phone spine */
.og-ex li { margin: .3rem 0; }
@media (min-width: 901px) { .og-tbl .dm-scroll { -webkit-mask-image: linear-gradient(90deg, var(--ink) 92%, transparent); mask-image: linear-gradient(90deg, var(--ink) 92%, transparent); padding-right: 40px; } }
@media (max-width: 480px) { .og-depts .og-col { margin-left: 22px; } }
/* B2: seat summary. Access screen leads with Can open / Totals only / Cannot open; below 600px the seat table is one card per seat. */
.ac-sum li { margin: .35rem 0; }
.ac-sum .dm-badge { margin-right: .4rem; }
.og-table td.og-sum { display: none; }
@media (max-width: 600px) {
  .og-table td[data-level] { display: none; }
  .og-table { width: 100%; }
  .og-table td.og-sum { display: block; padding: 4px 0 0; white-space: normal; overflow-wrap: anywhere; }
  .og-table td.og-sum::before { content: none; }
  .og-sum .og-g { display: block; margin: 3px 0; }
  .og-sum .og-g2 { color: var(--mid); }
}
/* r2 page critic: the sticky switcher must not cover a screen's heading when it is focused or scrolled to */
@media (max-width: 900px) { #dm-app .dm-screen h2, #dm-app .og-table tr { scroll-margin-top: 150px; } }
/* r8 panel pass (2026-09-30): plain headline list, bigger phone map rows, compact locked rows, sign-in note, back to top */
.og-head { margin: 0 0 14px; display: grid; gap: 6px; max-width: 46rem; }
.og-head li { padding-left: 12px; border-left: 3px solid var(--brand); }
.og-node { min-height: 44px; }
#ac-list .dm-row.locked { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
#ac-list .dm-row.locked .dm-badge { opacity: 1; }
.dm-signin { color: var(--mid); }
.dm-top { display: inline-flex; align-items: center; min-height: 44px; margin: 8px 0 0; }
@media (max-width: 480px) {
  #dm-company .dm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #dm-company .dm-tile:last-child:nth-child(odd) { grid-column: auto; }
  .og-node { padding: 8px 10px; }
  .og-node b { font-size: 1rem; }
  .og-node small { font-size: .85rem; }
}
@media (max-width: 600px) { .dm-signin { display: none; } }
/* r5: the email's two examples stand out from the 23 */
.og-start .dm-person { border-color: var(--brand); background: var(--ok-wash); }
.og-start .dm-badge { align-self: flex-start; width: max-content; margin: 4px 0; }

/* Clark 2026-10-01: people are green, AI agents blue-purple, one shade per agent (tokens and .ai-sN generated by design/clark_system_view/org_seats.py) */
/* ORG-GEN SHADES */
.ai-s1 { --ai: var(--ai-1); --ai-bd: var(--ai-bd-1); }
.ai-s2 { --ai: var(--ai-2); --ai-bd: var(--ai-bd-2); }
.ai-s3 { --ai: var(--ai-3); --ai-bd: var(--ai-bd-3); }
.ai-s4 { --ai: var(--ai-4); --ai-bd: var(--ai-bd-4); }
.ai-s5 { --ai: var(--ai-5); --ai-bd: var(--ai-bd-5); }
.ai-s6 { --ai: var(--ai-6); --ai-bd: var(--ai-bd-6); }
.ai-s7 { --ai: var(--ai-7); --ai-bd: var(--ai-bd-7); }
.ai-s8 { --ai: var(--ai-8); --ai-bd: var(--ai-bd-8); }
.ai-s9 { --ai: var(--ai-9); --ai-bd: var(--ai-bd-9); }
.ai-s10 { --ai: var(--ai-10); --ai-bd: var(--ai-bd-10); }
.ai-s11 { --ai: var(--ai-11); --ai-bd: var(--ai-bd-11); }
.ai-s12 { --ai: var(--ai-12); --ai-bd: var(--ai-bd-12); }
.ai-s13 { --ai: var(--ai-13); --ai-bd: var(--ai-bd-13); }
.ai-s14 { --ai: var(--ai-14); --ai-bd: var(--ai-bd-14); }
.ai-s15 { --ai: var(--ai-15); --ai-bd: var(--ai-bd-15); }
.ai-s16 { --ai: var(--ai-16); --ai-bd: var(--ai-bd-16); }
.ai-s17 { --ai: var(--ai-17); --ai-bd: var(--ai-bd-17); }
.ai-s18 { --ai: var(--ai-18); --ai-bd: var(--ai-bd-18); }
.ai-s19 { --ai: var(--ai-19); --ai-bd: var(--ai-bd-19); }
.ai-s20 { --ai: var(--ai-20); --ai-bd: var(--ai-bd-20); }
.ai-s21 { --ai: var(--ai-21); --ai-bd: var(--ai-bd-21); }
.ai-s22 { --ai: var(--ai-22); --ai-bd: var(--ai-bd-22); }
.ai-s23 { --ai: var(--ai-23); --ai-bd: var(--ai-bd-23); }
/* /ORG-GEN SHADES */
.dm-badge.hu { color: var(--brand-deep); background: var(--ok-wash); border: 1px solid var(--brand); }
.dm-badge.hu::before { background: var(--brand); }
.dm-badge.ai { color: var(--ai-ink); background: var(--ai-wash); border: 1px solid var(--ai-line); }
.dm-badge.ai::before { background: var(--ai-line); }
.og-node { background: var(--ok-wash); border-color: var(--brand); }
.og-node.ai, .dm-person.ai { background: var(--ai); border-color: var(--ai-bd); }
.og-node.ai small, .og-node.ai b, .dm-person.ai b, .dm-person.ai span:not(.dm-badge) { color: var(--ink); }
.og-lines path.ai { stroke: var(--ai-line); }
.og-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; background: var(--ai); border: 1.5px solid var(--ai-bd); }
.og-chips { display: grid; gap: 4px; margin-top: 5px; }
.og-chip { display: block; font-size: .76rem; line-height: 1.3; padding: 3px 7px; border-radius: 4px; color: var(--ink); }
.og-chip.ai { background: var(--ai); border: 1.5px solid var(--ai-bd); }
.og-chip.open, .og-chip.h { background: var(--paper); border: 1.5px dashed var(--brand); }
.og-chip.h.owner { border-style: solid; background: var(--ok-wash); }
.dm-legend .og-chip { display: inline-block; margin: 0 6px 6px 0; }
.og-keyfold > summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; border: 1px solid var(--brand); border-radius: 999px; color: var(--brand-deep); font-size: .92rem; font-weight: 600; margin: .2rem 0 .6rem; list-style: none; }
.og-keyfold > summary::-webkit-details-marker { display: none; }
.og-keyfold > summary::after { content: '\25BE'; font-size: 1.1rem; }
.og-keyfold[open] > summary::after { content: '\25B4'; }
@media (min-width: 901px) { .og-keyfold > summary { display: none; } }
.og-key { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 4px 12px; list-style: none; margin: .4rem 0 1rem; padding: 0; font-size: .85rem; }
.og-table td .og-sw { margin-right: 6px; }