/* Zyntropio Clair — the user guide's shell and components.
 *
 * THE STRUCTURE IS BEE'S GUIDE, THE SURFACES ARE CLAIR'S. Owner instruction
 * 2026-09-13: rewrite the Clair guide in the bee guide's style. What that means
 * concretely, and what it deliberately does not:
 *
 *  - The CLASS NAMES AND IDS ARE BEE'S, on purpose — .gd-side, .gd-card,
 *    .gd-fig, #gd-toc, #gd-lightbox and the rest. guide.js is the same script
 *    doing the same two jobs (lightbox, scrollspy) and it keys off those ids;
 *    a renamed shell here would mean a second script to maintain for no gain.
 *    The GEOMETRY is bee's too — section rhythm, card padding, the 66ch prose
 *    measure, the 248px sidebar — read off website/bee/guide/guide-pages.css
 *    rather than re-chosen, because "the bee guide's style" is that rhythm.
 *
 *  - The PALETTE AND THE SURFACES ARE NOT. Clair's design decision D8 (see
 *    products/solopreneur/web/clair.css) puts Aurora in the background only and
 *    makes every content surface SOLID WHITE with a 1px --color-line hairline.
 *    bee's guide panels are glass — translucent white over a backdrop-filter.
 *    Copying that would have put a surface on this page that appears nowhere in
 *    the product it documents, so every .gd-card / .gd-next / .gd-inline-toc
 *    below is white + hairline instead. There is no backdrop-filter in this
 *    file. Do not "restore" glass to it.
 *
 *  - ONE GRADIENT PER SURFACE, the other rule this product holds to. The
 *    sidebar spends its on the active nav pill, exactly as the app's own
 *    sidebar does; nothing else on the page has one.
 *
 * NO COLOURS, FONTS OR SHADOWS ARE DECLARED HERE. Every value is a var() that
 * ../styles.css declares, so the guide, the marketing page and the app's own
 * clair.css stay one palette that moves together. Load order on the page is
 * ../styles.css first (tokens), then this.
 *
 * THE WORDS ON THE PAGE are governed by the rule CLAUDE.md sets for Zia's
 * skills, for the same reason: how to reach a feature, what a control does —
 * never architecture, stack, file names, endpoints, schema, hosting,
 * credentials or anyone's data.
 */

/* ── Page shell ─────────────────────────────────────────────────────────── */
/* ../styles.css sets the page background and zeroes the margin for the
   marketing page, which wraps everything in .cl and takes its font from there.
   This page has no such wrapper — it IS the document — so the body carries the
   type itself. */
body { color: var(--color-ink); font: 500 15px/1.65 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* Fixed, not absolute: the sidebar is fixed too, and an aurora that scrolls out
   from behind a chrome that does not leaves the bottom of a long page bare. */
.gd-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.gd-aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(38px); }

.gd-side {
  position: fixed; top: 0; left: 0; bottom: 0; width: 248px; box-sizing: border-box;
  background: var(--color-panel); border-right: 1px solid var(--color-line);
  display: flex; flex-direction: column; padding: 22px 16px 18px; z-index: 2; overflow-y: auto;
}
.gd-brand { display: flex; align-items: center; gap: 10px; color: var(--color-ink); padding: 0 8px; text-decoration: none; }
.gd-brand:hover { color: var(--color-ink); }
.gd-brand img { width: 30px; height: 30px; border-radius: 9px; display: block; }
.gd-brand-name { font: 800 14px/1.1 var(--font-display); letter-spacing: -.01em; }
.gd-brand-sub { font: 600 10.5px/1.2 var(--font-mono); color: var(--color-chrome-hint); letter-spacing: .04em; }

.gd-sidelabel {
  font: 800 9.5px/1 var(--font-body); letter-spacing: .07em;
  text-transform: uppercase; color: var(--color-chrome-hint); margin: 30px 8px 10px;
}
.gd-toc { display: flex; flex-direction: column; gap: 2px; }
.gd-toc a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  font: 700 12.5px/1.3 var(--font-body);
  color: var(--color-chrome-sub); text-decoration: none; transition: background .12s ease;
}
.gd-toc a .n { font: 600 10.5px var(--font-mono); color: var(--color-chrome-hint); width: 16px; flex: none; }
/* The page's ONE gradient, and the reason guide.js sets data-active rather than
   only aria-current: this is the same active pill the app's own nav item wears. */
#gd-toc a[data-active="1"] { background: var(--color-grad); color: #fff; box-shadow: var(--shadow-clay-button); }
#gd-toc a[data-active="1"] .n { color: rgba(255, 255, 255, .75); }
#gd-toc a:hover:not([data-active="1"]) { background: var(--color-chrome-item); color: var(--color-ink); }

.gd-sidefoot { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--color-line); display: flex; flex-direction: column; gap: 10px; }
/* Quiet, not accent — the gradient above is spent. */
.gd-cta {
  display: flex; align-items: center; justify-content: center; height: 34px;
  border-radius: 10px; background: rgba(38, 39, 43, .05); color: var(--color-ink);
  font: 800 11.5px var(--font-body); text-decoration: none;
}
.gd-cta:hover { background: rgba(38, 39, 43, .09); color: var(--color-ink); }
.gd-sidenote { font: 600 10.5px var(--font-mono); color: var(--color-chrome-hint); text-align: center; }

.gd-main { position: relative; z-index: 1; margin-left: 248px; padding: 0 48px 88px; box-sizing: border-box; }
.gd-wrap { max-width: 1080px; margin: 0 auto; }
/* The hero is its own measure — narrower than the body column, so the title and
   the standfirst read as a block rather than running the full width. */
.gd-hero { padding: 72px 0 0; max-width: 760px; }

/* ── Type ───────────────────────────────────────────────────────────────── */
.gd-eyebrow { font: 800 9.5px/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--color-clay); margin-bottom: 16px; }
.gd-wrap h1 { margin: 0 0 18px; font: 700 clamp(30px, 4.2vw, 44px)/1.1 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
/* `.gd-wrap p` below would otherwise win on specificity and widen this to 66ch. */
.gd-wrap p.gd-lede { margin: 0; font-size: 17px; line-height: 1.6; color: var(--color-sub); max-width: 62ch; text-wrap: pretty; }

.gd-wrap section { margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--color-line); scroll-margin-top: 28px; }
.gd-seclabel { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.gd-seclabel .n { font: 600 12px var(--font-mono); color: var(--color-clay); letter-spacing: .06em; }
.gd-seclabel .t { font: 800 9.5px/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted); }
.gd-wrap h2 { margin: 0 0 16px; font: 700 clamp(22px, 3vw, 28px)/1.2 var(--font-display); letter-spacing: -.02em; }
.gd-wrap h3 { margin: 30px 0 10px; font: 700 16.5px/1.35 var(--font-body); }
.gd-wrap p { margin: 0 0 13px; max-width: 66ch; text-wrap: pretty; }
.gd-wrap ul, .gd-wrap ol { max-width: 66ch; padding-left: 20px; margin: 0 0 14px; }
.gd-wrap li { margin-bottom: 7px; }

/* A control as it is spelled on screen. Clair's clay is blue, so this chip is
   the blue pair — not bee's clay-on-rose. */
.ui { font: 700 13px var(--font-body); background: var(--color-clay-bg); color: #2F5BB8; border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
kbd { font: 600 12px var(--font-mono); background: var(--color-panel); border: 1px solid var(--color-line); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; color: var(--color-ink); white-space: nowrap; }

/* ── The reference card: a panel of label / explanation rows ─────────────── */
/* White and hairlined, per D8 — this is the .cl-card / .zc-card surface, not
   bee's glass. */
.gd-card {
  max-width: 66ch; background: var(--color-panel);
  border: 1px solid var(--color-line); border-radius: 16px;
  box-shadow: var(--shadow-glass-card); padding: 6px 22px; margin: 16px 0 22px;
}
.gd-card .row { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-line); align-items: flex-start; }
.gd-card .row:last-child { border-bottom: none; }
.gd-card .row > span:last-child { font-size: 14px; line-height: 1.55; }
.gd-card .row .ui { flex: none; }

/* ── Figures ────────────────────────────────────────────────────────────── */
/* Every crop is captured at 2x by scripts/clair-guide-shots.mjs, so each <img>
   carries an explicit width/height of HALF its pixel size. Without it a 340px
   filter control paints 680px wide and reads as a different product. */
.gd-fig { margin: 18px 0 22px; }
.gd-fig img {
  display: block; max-width: 100%; height: auto; border-radius: 14px;
  border: 1px solid var(--color-line); box-shadow: var(--shadow-glass-card);
  background: var(--color-panel); cursor: zoom-in; transition: box-shadow .16s ease;
}
.gd-fig img:hover { box-shadow: var(--shadow-glass-raise); }
.gd-fig img.plain { box-shadow: none; border-radius: 9px; }
.gd-fig figcaption { margin-top: 10px; font: 500 12.5px/1.55 var(--font-body); color: var(--color-muted); max-width: 60ch; }
/* Full-width crops of a whole screen, which stops being readable squeezed into
   the prose measure. */
.gd-fig.wide img { width: 100%; }
.gd-duo { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; margin: 18px 0 22px; }
.gd-duo .gd-fig { margin: 0; }

/* ── Callouts ───────────────────────────────────────────────────────────── */
/* Amber and red on purpose, and the only two hues on this page that are not the
   brand's: a note that shared the blue would read as decoration rather than as
   "stop and read this one". */
.gd-note, .gd-warn { margin: 20px 0; padding: 15px 17px; border-radius: 16px; font-size: 14px; line-height: 1.6; max-width: 66ch; }
.gd-note { background: #fffbe8; box-shadow: 0 0 0 1.5px #ffe9b8 inset; }
.gd-note b { color: #8a6100; }
.gd-warn { background: #fff1f0; box-shadow: 0 0 0 1.5px #ffd3cf inset; }
.gd-warn b { color: #a3322f; }
.gd-note p:last-child, .gd-warn p:last-child { margin-bottom: 0; }

/* ── Shortcut table ─────────────────────────────────────────────────────── */
.gd-keys { width: 100%; max-width: 66ch; border-collapse: collapse; font-size: 14px; margin: 16px 0 4px; }
.gd-keys th { text-align: left; font: 800 9.5px var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted); padding: 0 14px 9px 0; }
.gd-keys td { padding: 9px 14px 9px 0; border-top: 1px solid var(--color-line); vertical-align: top; }
.gd-keys td:first-child { white-space: nowrap; width: 1%; }
.gd-scroll { overflow-x: auto; max-width: 100%; }

.gd-footer { margin-top: 80px; padding-top: 26px; border-top: 1px solid var(--color-line); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--color-muted); }
.gd-footer img { width: 22px; height: 22px; border-radius: 6px; }
.gd-footer .spacer { flex: 1; min-width: 8px; }

/* ── Phone ──────────────────────────────────────────────────────────────── */
/* The sidebar becomes a masthead and the section list moves inline. bee gets
   this from its generated stylesheet keyed off the same #gd- ids; there is no
   generated half here, so it is written out. */
@media (max-width: 900px) {
  .gd-side {
    position: static; width: auto; height: auto; bottom: auto;
    border-right: none; border-bottom: 1px solid var(--color-line); padding: 16px 20px;
  }
  #gd-toc, #gd-side-foot { display: none; }
  /* With the contents list gone, this stops being a heading over a list and
     becomes the masthead's second line — so it sits under the brand rather than
     30px below it with nothing beneath. */
  .gd-sidelabel { margin: 10px 0 0; }
  .gd-main { margin-left: 0; padding: 0 20px 64px; }
  .gd-hero { padding-top: 32px; }
  #gd-toc-inline { display: block; }
}

/* The inline contents card, shown only under 900px. */
.gd-inline-toc {
  display: none; margin-top: 28px; padding: 16px 18px; border-radius: 16px;
  background: var(--color-panel); border: 1px solid var(--color-line); box-shadow: var(--shadow-glass-card);
}
.gd-inline-toc b { display: block; font: 800 9.5px/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 10px; }
.gd-inline-toc .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 18px; font: 700 13px/1.4 var(--font-body); }
.gd-inline-toc a { color: var(--color-ink); text-decoration: none; }
.gd-inline-toc a:hover { color: var(--color-clay); }

/* ── The end-of-page cards ──────────────────────────────────────────────── */
.gd-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; max-width: 760px; margin-top: 4px; }
.gd-next a {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 22px;
  background: var(--color-panel); border: 1px solid var(--color-line);
  border-radius: 16px; box-shadow: var(--shadow-glass-card);
  color: var(--color-ink); text-decoration: none; transition: box-shadow .16s ease;
}
.gd-next a:hover { box-shadow: var(--shadow-glass-raise); color: var(--color-ink); }
.gd-next .k { font: 800 9.5px/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--color-muted); }
.gd-next .t { font: 700 17px/1.3 var(--font-display); letter-spacing: -.01em; }
.gd-next .d { font-size: 13px; line-height: 1.55; color: var(--color-sub); }
.gd-next .u { font: 700 12.5px var(--font-body); color: var(--color-clay); margin-top: 6px; }

/* ── Behaviour styling (paired with guide.js) ────────────────────────────────
   `hidden` alone does NOT hide the lightbox: its display:flex is an inline
   style, and an inline display beats the user-agent rule `hidden` relies on —
   leaving an invisible full-screen overlay that swallows every click on the
   page. One !important rule settles it and lets the script keep toggling the
   semantically-correct attribute. */
#gd-lightbox[hidden] { display: none !important; }
[data-toc] { text-decoration: none; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }