/* ============================================================================
   DENTAL BOOKS — THE GUIDE (/guide/DentalBooks · public/guides/dentalbooks/)
   ----------------------------------------------------------------------------
   The second member of the guides family (the first: guides/logbooks/), and a
   deliberate sibling: SAME schema, SAME tokens, SAME white vibe — one white
   sheet on the cosmos, a white porcelain rail, the machined-silver trim, navy
   ink, gold only where it carries meaning. Tokens MIRROR the guides family's,
   which mirror the landing/app measured ink ladders. Do not re-pick by eye.

   What is specific here: the exhibits depict the Dental Books desktop client
   (the "SkyRock White" system of public/dental-books/styles.css) — the patient
   sheet and its tabs, the odontogram, the library and its shares, the backup
   key surfaces and the Agent drawer. The odontogram mock classes (.gd-od-*)
   live at the end of this file.
   ========================================================================== */

:root {
    /* ground */
    --gd-cosmos: #0b0e1a;
    --gd-sheet: #ffffff;
    --gd-tray: #f7f7f7;
    --gd-tray-2: #ebebeb;
    --gd-line: #e4e4e4;
    --gd-line-strong: #d2d2d2;

    /* ink ladder (measured on the tray — see landing styles for the ratios) */
    --gd-text: #232731;
    --gd-muted: #3f454f;
    --gd-subtle: #545a63;
    --gd-gold-ink: #7a5e17;
    --gd-gold-ink-ws: #695114;   /* the canvas-scoped harder gold-ink */
    --gd-green-ink: #21714d;

    /* on the cosmos */
    --gd-on-dark: #FFF6F6;
    --gd-on-dark-muted: rgba(255,255,255,0.76);
    --gd-on-dark-faint: rgba(255,255,255,0.55);
    --gd-gold-light: #d9c08a;

    /* brand */
    --gd-accent: #3C486B;
    --gd-accent-hover: #2e3a56;
    --gd-accent-soft: #eef1f7;
    --gd-gold: #c2a35a;
    --gd-gold-soft: rgba(194,163,90,0.40);
    --gd-green: #2e9e6b;
    --gd-danger-ink: #b3372f;
    --gd-steel-grad: linear-gradient(-145deg, #2e3a56, #3C486B, #283350, #46557e, #2e3a56);
    --gd-silver-grad: linear-gradient(-145deg, #f4f4f4, #e0e0e0, #fcfcfc, #d8d8d8, #eeeeee);
    --gd-plate: linear-gradient(145deg, #5a6068 0%, #34383f 38%, #23272d 55%, #444a52 78%, #2b2f35 100%);
    --gd-check-hi: #d9bc72;
    --gd-check-lo: #ab8a3c;

    /* canvas kind stripes (the app's exact hues) */
    --gd-k-in: #8b97b5;
    --gd-k-roll: #2e9e6b;

    /* type */
    --gd-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --gd-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --fs-xs: 0.72rem; --fs-sm: 0.84rem; --fs-md: 0.95rem; --fs-lg: 1.12rem;
    --fs-h2: clamp(1.55rem, 3.6vw, 2.35rem);
    --fs-hero: clamp(2.4rem, 7vw, 4.4rem);

    /* space · radius · depth · focus · motion */
    --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
    --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
    --sh-rest: 0 1px 2px rgba(8,12,24,0.06);
    --sh-sheet: 0 2px 6px rgba(8,12,24,0.20), 0 22px 60px rgba(8,12,24,0.40);
    --sh-pop: 0 4px 14px rgba(8,12,24,0.28);
    --gd-ring: 0 0 0 3px rgba(60,72,107,0.70);
    --gd-ring-dark: 0 0 0 3px rgba(244,244,244,0.85);
    --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
    --dur: 160ms;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
figure { margin: 0; }

/* The ground is Webb's Tarantula Nebula in MIRI light (weic2212b — owner pick,
   2026-08-26) under the family scrim; its visible credit rides .gd-sky-credit
   (the owner's rule: Webb imagery always carries its credit). */
body {
    font-family: var(--gd-font);
    color: var(--gd-text);
    background-color: var(--gd-cosmos);
    background-image: linear-gradient(180deg, rgba(8,11,22,0.55), rgba(8,11,22,0.74)), url('/components/files/images/tarantula-miri-webb.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

.gd-sky-credit {
    position: fixed; left: 10px; bottom: 6px; z-index: 5;
    font-size: 0.62rem; color: rgba(255,255,255,0.45);
    pointer-events: none;
}

.mono { font-family: var(--gd-mono); font-variant-numeric: tabular-nums; }

a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--gd-ring-dark); border-radius: var(--r-sm); }
.gd-sheet a:focus-visible { box-shadow: var(--gd-ring); }

/* =========================== Top bar ======================================= */
/* The SkyRock Superior WHITE VIBE (owner, 2026-08-26; the 15f verdict): white
   porcelain surfaces, the machined-silver gradient as the ONE trim, navy ink.
   The guide's chrome wears it — a white rail with the brand on its brushed-
   metal placard and links as quiet navy pills; silver marks the call to
   action. Gold remains only where it carries meaning (the canvas vocabulary,
   derived/locked marks, the attention rule on notes). */
/* The guides' header is BLACK (owner, 2026-08-27): the landings' black-metal
   family bar, not the white rail — one family bar across every public door. */
.gd-top {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: 0.55rem clamp(1rem, 4vw, 2.4rem);
    background: linear-gradient(-145deg, #1c1c1c, #2a2a2a, #141414, #333333, #1c1c1c);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.gd-brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.gd-brand-plate {
    width: 3.6rem; height: 1.8rem; border-radius: 8px;
    background-image: url('/components/files/icons/OfficialSkyRockWhiteLogo.svg'), var(--gd-plate);
    background-repeat: no-repeat; background-position: center; background-size: auto 1.46rem, cover;
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.4);
}
.gd-brand-text {
    color: var(--gd-on-dark); font-weight: 800; letter-spacing: 0.08em; font-size: 1.02rem;
    display: flex; flex-direction: column; line-height: 1.05;
}
.gd-brand-sub {
    font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5); font-weight: 700;
}
.gd-nav { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.gd-nav a {
    color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: 0.9rem; font-weight: 600;
    padding: 0.42rem 0.8rem; border-radius: var(--r-pill); border: 1px solid transparent;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.gd-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.gd-nav a.is-cta { background: var(--gd-silver-grad); color: var(--gd-accent); border-color: var(--gd-line-strong); box-shadow: var(--sh-rest); }
.gd-nav a.is-cta:hover { filter: brightness(1.04); color: var(--gd-accent); }
.gd-lang { display: inline-flex; align-items: center; }

/* =========================== Hero ========================================= */
.gd-hero {
    max-width: 76rem; margin: 0 auto; padding: clamp(3rem, 8vw, 5.5rem) var(--s-5) var(--s-7);
    text-align: center;
}
.gd-hero-badge {
    display: inline-block; padding: 0.35rem 0.9rem; border-radius: var(--r-pill);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gd-on-dark); background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.45);
}
.gd-hero-title {
    margin-top: var(--s-4); font-size: var(--fs-hero); font-weight: 800;
    letter-spacing: -0.03em; line-height: 0.98; text-shadow: 0 2px 24px rgba(0,0,0,0.45);
}
.gd-hero-t1 { display: block; color: var(--gd-on-dark); }
.gd-hero-t2 {
    display: block;
    background: linear-gradient(180deg, #ffffff 0%, #e6e6e6 45%, #c2c2c2 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gd-hero-lead {
    max-width: 46rem; margin: var(--s-5) auto 0; color: var(--gd-on-dark-muted);
    font-size: var(--fs-lg); line-height: 1.6;
}
.gd-hero-cta { margin-top: var(--s-6); display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* buttons — silver on the cosmos, steel on the sheet */
.gd-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0.65rem 1.35rem; border-radius: var(--r-md);
    font-weight: 700; font-size: var(--fs-md); text-decoration: none; border: 1px solid transparent;
    transition: filter var(--dur) var(--ease), background var(--dur) var(--ease), transform 80ms var(--ease);
}
.gd-btn:active { transform: translateY(1px); }
.gd-btn--silver { background: var(--gd-silver-grad); color: var(--gd-accent); box-shadow: var(--sh-pop); }
.gd-btn--silver:hover { filter: brightness(1.04); }
.gd-btn--ghost { background: rgba(255,255,255,0.08); color: var(--gd-on-dark); border-color: rgba(255,255,255,0.42); }
.gd-btn--ghost:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.62); }

/* =========================== The sheet ==================================== */
.gd-sheet {
    max-width: 76rem; margin: 0 auto; background: var(--gd-sheet);
    border-radius: var(--r-lg); box-shadow: var(--sh-sheet); overflow: hidden;
}
.gd-band { padding: clamp(2rem, 5vw, 3.4rem) clamp(1.1rem, 4vw, 3rem); background: var(--gd-sheet); scroll-margin-top: 4.6rem; }
.gd-band + .gd-band { border-top: 1px solid var(--gd-line); }
.gd-band--tray { background: var(--gd-tray); }
.gd-band--head { padding-top: clamp(1.6rem, 4vw, 2.6rem); }

.gd-bandhead { margin-bottom: var(--s-5); }
.gd-bandhead--split {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-6); align-items: start;
}
.gd-eyebrow {
    display: flex; align-items: center; gap: 0.55rem;
    color: var(--gd-accent); font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--s-3);
}
.gd-ch {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.7rem; height: 1.7rem; padding: 0 0.3rem; border-radius: var(--r-sm);
    background: var(--gd-accent); color: #fff;
    font-family: var(--gd-mono); font-size: 0.78rem; letter-spacing: 0.04em;
}
.gd-h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; max-width: 34ch; }
.gd-h3 { font-size: var(--fs-lg); font-weight: 700; margin: var(--s-6) 0 var(--s-3); }
.gd-lead { margin-top: var(--s-3); max-width: 60ch; color: var(--gd-muted); font-size: var(--fs-md); line-height: 1.65; }
.gd-p { max-width: 66ch; color: var(--gd-muted); font-size: var(--fs-md); line-height: 1.65; margin-bottom: var(--s-3); }
.gd-p--fine { font-size: var(--fs-sm); color: var(--gd-subtle); max-width: none; }

/* the formula chip — the family's typographic signature */
.gd-formula {
    justify-self: end; align-self: start;
    font-family: var(--gd-mono); font-size: var(--fs-md); color: var(--gd-text);
    background: var(--gd-tray-2); border: 1px solid var(--gd-line-strong);
    border-left: 3px solid #c2c2c2; border-radius: var(--r-sm);
    padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: 0.3rem;
    max-width: 100%; overflow-x: auto; white-space: nowrap;
}
.gd-formula-c { color: var(--gd-subtle); font-size: var(--fs-sm); white-space: normal; }

/* chips row (reserved words) */
.gd-chips {
    font-size: var(--fs-md); color: var(--gd-accent);
    background: var(--gd-tray-2); border: 1px solid var(--gd-line-strong); border-radius: var(--r-sm);
    padding: var(--s-3) var(--s-4); display: inline-block; margin-bottom: var(--s-3);
}

/* =========================== TOC ========================================== */
.gd-toc {
    list-style: none; margin-top: var(--s-5);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.5rem;
    counter-reset: none;
}
.gd-toc a {
    display: flex; align-items: baseline; gap: 0.7rem; text-decoration: none;
    color: var(--gd-text); font-weight: 600; font-size: var(--fs-md);
    padding: 0.55rem 0.7rem; border-radius: var(--r-sm); border: 1px solid transparent;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.gd-toc a:hover { background: var(--gd-tray); border-color: var(--gd-line-strong); }
.gd-toc-n { font-family: var(--gd-mono); font-size: var(--fs-xs); color: var(--gd-accent); }

/* =========================== Cards & grids ================================= */
.gd-grid { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.gd-grid--2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.gd-grid--3 { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.gd-grid--4 { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
.gd-grid--top { align-items: start; }
.gd-card {
    background: var(--gd-sheet); border: 1px solid var(--gd-line); border-radius: var(--r-md);
    box-shadow: var(--sh-rest); padding: var(--s-4) var(--s-4) var(--s-4);
}
.gd-band--tray .gd-card { border-color: var(--gd-line-strong); }
.gd-card h3 { font-size: var(--fs-md); font-weight: 700; margin-bottom: 0.45rem; }
.gd-card p { font-size: var(--fs-sm); color: var(--gd-muted); line-height: 1.6; }
.gd-card p + p { margin-top: 0.4rem; }
.gd-card--do { border-left: 3px solid var(--gd-green); }
.gd-card--dont { border-left: 3px solid var(--gd-danger-ink); }
.gd-card--pm { display: flex; flex-direction: column; gap: 0.5rem; }

/* premade trees */
.gd-tree { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.3rem; }
.gd-tree li { display: flex; flex-direction: column; gap: 0.25rem; }
.gd-tree li + li { border-left: 3px solid var(--gd-gold-soft); padding-left: 0.7rem; margin-left: 0.35rem; }
.gd-tree i { font-style: normal; font-size: var(--fs-sm); color: var(--gd-muted); line-height: 1.55; }
.gd-pill {
    align-self: flex-start; display: inline-block; padding: 0.14rem 0.6rem; border-radius: var(--r-pill);
    font-family: var(--gd-mono); font-size: var(--fs-xs); font-weight: 700;
    color: var(--gd-accent); background: var(--gd-accent-soft); border: 1px solid rgba(60,72,107,0.25);
}
.gd-pill--navy { color: #fff; background: var(--gd-accent); border-color: var(--gd-accent); }
.gd-pill--gold { color: var(--gd-gold-ink); background: rgba(194,163,90,0.14); border-color: var(--gd-gold-soft); }

/* steps */
.gd-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.gd-step {
    position: relative; background: var(--gd-sheet); border: 1px solid var(--gd-line-strong);
    border-radius: var(--r-md); box-shadow: var(--sh-rest); padding: var(--s-4);
}
.gd-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--gd-steel-grad); color: #fff; font-weight: 800; font-size: var(--fs-sm);
    margin-bottom: 0.6rem;
}
.gd-step h4 { font-size: var(--fs-md); margin-bottom: 0.35rem; }
.gd-step p { font-size: var(--fs-sm); color: var(--gd-muted); line-height: 1.6; }

/* notes — read, don't shout */
.gd-note {
    margin-top: var(--s-4); padding: var(--s-4);
    background: var(--gd-tray); border: 1px solid var(--gd-line-strong);
    border-left: 3px solid var(--gd-gold); border-radius: var(--r-sm);
    font-size: var(--fs-sm); color: var(--gd-muted); line-height: 1.6;
}
.gd-band--tray .gd-note { background: var(--gd-sheet); }
.gd-note b { color: var(--gd-text); display: block; margin-bottom: 0.25rem; }
.gd-note--warn { border-left-color: var(--gd-danger-ink); }

/* =========================== Tables ======================================= */
.gd-tablewrap { overflow-x: auto; margin-top: var(--s-4); border: 1px solid var(--gd-line-strong); border-radius: var(--r-md); background: var(--gd-sheet); }
.gd-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 34rem; }
.gd-table thead th {
    text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--gd-subtle); background: var(--gd-tray); padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--gd-line-strong); white-space: nowrap;
}
.gd-table td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--gd-line); color: var(--gd-muted); vertical-align: top; line-height: 1.5; }
.gd-table tbody tr:last-child td { border-bottom: none; }
.gd-table td:first-child { color: var(--gd-text); font-weight: 600; white-space: nowrap; }
.gd-table--mods td:first-child, .gd-table td.mono { font-family: var(--gd-mono); font-weight: 600; }
.gd-table .num { text-align: right; font-family: var(--gd-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gd-table .ok { color: var(--gd-green-ink); font-weight: 600; white-space: normal; }
.gd-table .mid { color: var(--gd-gold-ink); font-weight: 600; white-space: normal; }
.gd-table .no { color: var(--gd-danger-ink); font-weight: 600; white-space: normal; }
.gd-table--sheet td { white-space: nowrap; }
.gd-th--derived { color: var(--gd-gold-ink) !important; }
.gd-tr--derived td { background: rgba(194,163,90,0.05); }
.gd-tchip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 7px; margin-right: 0.5rem;
    font-family: var(--gd-mono); font-size: 0.8rem; font-weight: 800;
    color: var(--gd-accent); background: var(--gd-accent-soft);
}
.gd-tchip--res { background: rgba(60,72,107,0.10); border: 1px solid rgba(60,72,107,0.35); }
.gd-tchip--roll { color: var(--gd-green-ink); background: rgba(46,158,107,0.12); border: 1px solid rgba(46,158,107,0.4); }
.gd-tchip--up { background: rgba(60,72,107,0.10); border: 1px solid rgba(60,72,107,0.35); }
.gd-tchip--op { color: var(--gd-gold-ink); background: rgba(194,163,90,0.16); border: 1px solid var(--gd-gold-soft); }

/* =========================== Figures ====================================== */
.gd-fig { margin-top: var(--s-4); }
.gd-cap {
    margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--gd-subtle); line-height: 1.6; max-width: 72ch;
}
.gd-cap b { color: var(--gd-text); }
.gd-cap--list { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 0.4rem 1.2rem; max-width: none; }
.gd-cap--list > span { display: flex; gap: 0.5rem; }
.gd-cap--list b {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--gd-accent); color: #fff;
    font-size: var(--fs-xs);
}

/* ---- the workspace frame: chrome bar + dotted paper ---- */
.gd-bp-frame {
    background: #f6f6f6; border: 1px solid var(--gd-line-strong); border-radius: var(--r-lg);
    overflow: hidden; box-shadow: var(--sh-rest), inset 0 1px 0 rgba(255,255,255,0.5);
}
.gd-bp-frame--pad { padding-top: 0.4rem; }
.gd-bp-bar {
    display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0.9rem;
    background: linear-gradient(180deg, #ffffff, #f4f4f4); border-bottom: 1px solid var(--gd-line);
}
.gd-bp-dots { display: inline-flex; gap: 0.32rem; }
.gd-bp-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--gd-line-strong); }
.gd-bp-crumb { font-family: var(--gd-mono); font-size: var(--fs-xs); color: var(--gd-subtle); }
.gd-bp-scroll { overflow-x: auto; }
.gd-bp-svg { display: block; width: 100%; min-width: 34rem; height: auto; font-family: var(--gd-font); }

/* ---- SVG module vocabulary (values from the app stylesheet) ---- */
.gd-mod-box { fill: #ffffff; stroke: #d2d2d2; stroke-width: 1; filter: drop-shadow(0 2px 4px rgba(8,12,24,0.12)); }
.gd-out-box { fill: #fdfcf8; stroke: var(--gd-gold-soft); }
.gd-mod-head { fill: #f7f7f7; }
.gd-mod--error { stroke: #b3261e; stroke-width: 1.6; filter: drop-shadow(0 0 3px rgba(179,38,30,0.35)); }
.gd-kind-box { fill: #eef1f7; }
.gd-kind-box--op { fill: rgba(194,163,90,0.16); stroke: var(--gd-gold-soft); }
.gd-kind-box--res { fill: rgba(60,72,107,0.10); stroke: rgba(60,72,107,0.35); }
.gd-kind-box--roll { fill: rgba(46,158,107,0.12); stroke: rgba(46,158,107,0.4); }
.gd-kind-box--up { fill: rgba(60,72,107,0.10); stroke: rgba(60,72,107,0.35); }
.gd-kind { fill: var(--gd-accent); font-size: 11px; font-weight: 800; font-family: var(--gd-mono); }
.gd-title { fill: var(--gd-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.8px; }
.gd-title--gold { fill: var(--gd-gold-ink-ws); }
.gd-field { fill: #f7f7f7; stroke: #e4e4e4; }
.gd-note-t { fill: #474c53; font-size: 11px; }
.gd-formula-well { fill: #f7f7f7; stroke: #e4e4e4; }
.gd-formula-t { fill: var(--gd-accent); font-size: 11px; font-family: var(--gd-mono); }
.gd-formula-t--empty { fill: #8a8a8a; font-style: italic; }
.gd-lit { fill: #ffffff; stroke: #d2d2d2; }
.gd-lit--bad { fill: #fdf0ef; stroke: #d9534f; }
.gd-lit-t { fill: var(--gd-text); font-size: 11px; font-family: var(--gd-mono); }
.gd-plug-t { fill: var(--gd-gold-ink-ws); font-size: 11px; font-weight: 600; }
.gd-btn-mock { fill: #f0f0f0; stroke: #d2d2d2; }
.gd-btn-mock-t { fill: var(--gd-accent); font-size: 11px; font-weight: 600; }
.gd-paltab { fill: #ffffff; stroke: #d2d2d2; }
.gd-paltab-t { fill: var(--gd-accent); font-size: 11px; font-weight: 700; letter-spacing: 2px; }
.gd-call circle { fill: var(--gd-accent); }
.gd-call text { fill: #ffffff; font-size: 11px; font-weight: 800; }
.gd-x { fill: #8a8a8a; font-size: 13px; }
.gd-x2 { color: #8a8a8a; font-size: 0.95rem; padding: 0 0.3rem; }
.gd-rule { stroke: var(--gd-line); stroke-width: 1; }
.gd-chip3 { fill: rgba(194,163,90,0.16); stroke: var(--gd-gold); }
.gd-chip3-t { fill: var(--gd-gold-ink-ws); font-size: 11px; font-weight: 700; }
.gd-ax { fill: var(--gd-subtle); font-size: 10px; font-family: var(--gd-mono); }
.gd-ax--val { fill: var(--gd-gold-ink); font-weight: 700; }
.gd-bar { fill: #4a6fd4; opacity: 0.82; }
.gd-bar--neg { fill: #b3372f; opacity: 0.82; }
.gd-bar--now { fill: var(--gd-gold); stroke: var(--gd-gold-ink); stroke-width: 1; opacity: 1; }

/* ---- ports: shape says the kind; fill says the direction ---- */
.gd-port { fill: #ffffff; stroke: var(--gd-accent); stroke-width: 2; }
.gd-port--out { fill: var(--gd-gold); stroke: var(--gd-gold-ink-ws); }
.gd-port--base { stroke: var(--gd-gold-ink-ws); filter: drop-shadow(0 0 3px rgba(194,163,90,0.55)); }
.gd-port--bad { fill: #f6d7d4; stroke: #b3261e; filter: drop-shadow(0 0 3px rgba(179,38,30,0.35)); }
.gd-port--any { fill: var(--gd-gold); stroke: var(--gd-gold-ink-ws); stroke-width: 2; }
.gd-port--bool { fill: var(--gd-accent); stroke: var(--gd-accent-hover); stroke-width: 2; }
.gd-pin { fill: #ffffff; stroke: var(--gd-accent); stroke-width: 2; }
.gd-pin--wired { fill: var(--gd-check-hi); stroke: var(--gd-gold-ink-ws); }

/* ---- cables (stroke recipes verbatim from the app) ---- */
.gd-cable { fill: none; stroke: rgba(60,72,107,0.55); stroke-width: 2.25; stroke-linecap: round; }
.gd-cable--chain { fill: none; stroke: var(--gd-gold); stroke-width: 2; stroke-dasharray: 7 6; opacity: 0.85; stroke-linecap: round; }
.gd-cable--ghost { fill: none; stroke: var(--gd-gold); stroke-width: 2.25; stroke-dasharray: 5 5; stroke-linecap: round; }
.gd-cable--gate { fill: none; stroke: var(--gd-gold-ink-ws); stroke-width: 2; stroke-dasharray: 4 5; opacity: 0.85; stroke-linecap: round; }
.gd-cable--err { fill: none; stroke: #c6362c; stroke-width: 2.5; stroke-linecap: round; }
.gd-reroute { fill: #ffffff; stroke: var(--gd-accent); stroke-width: 2; }

/* ---- the health strips ---- */
.gd-strip {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.9rem; font-size: var(--fs-sm); line-height: 1.5;
}
.gd-strip--error { background: rgba(179,38,30,0.10); border-bottom: 1px solid rgba(179,38,30,0.55); color: #8f1d16; }
.gd-strip--warn {
    margin-top: var(--s-4); border: 1px solid var(--gd-gold-soft); border-radius: var(--r-sm);
    background: rgba(194,163,90,0.14); color: var(--gd-gold-ink);
}

/* =========================== The golden diamond =========================== */
.gd-diamond { position: relative; display: inline-block; width: 1.2rem; height: 1.2rem; flex: none; }
.gd-diamond::before {
    content: ''; position: absolute; inset: 2px; transform: rotate(45deg); border-radius: 3px;
    background: #ffffff; border: 2px solid var(--gd-accent); box-sizing: border-box;
}
.gd-diamond.is-on::before, .gd-diamond.is-wired::before {
    background: linear-gradient(135deg, var(--gd-check-hi), var(--gd-check-lo));
    border-color: var(--gd-gold-ink); box-shadow: 0 1px 4px rgba(194,163,90,0.38);
}
.gd-diamond.is-on::after, .gd-diamond.is-wired::after {
    content: ''; position: absolute; inset: 28%; background: var(--gd-accent);
    clip-path: polygon(12% 48%, 0 66%, 38% 100%, 100% 20%, 84% 4%, 36% 66%);
}
.gd-diamond.is-wired { opacity: 0.55; }
.gd-diamond-states {
    justify-self: end; display: flex; flex-direction: column; gap: 0.7rem;
    background: var(--gd-sheet); border: 1px solid var(--gd-line-strong); border-radius: var(--r-md);
    box-shadow: var(--sh-rest); padding: var(--s-4);
}
.gd-diamond-states > span { display: flex; align-items: center; gap: 0.7rem; }
.gd-diamond-states i { font-style: normal; font-size: var(--fs-sm); color: var(--gd-muted); }

/* =========================== Legend (ports & cables) ====================== */
.gd-legend {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--s-5);
    background: var(--gd-tray); border: 1px solid var(--gd-line-strong); border-radius: var(--r-md);
    padding: var(--s-4);
}
.gd-legend-t { font-size: var(--fs-sm); font-weight: 700; color: var(--gd-text); margin-bottom: 0.7rem; }
.gd-lg-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.3rem 0; font-size: var(--fs-sm); color: var(--gd-muted); line-height: 1.5; }
.gd-lg-row svg { flex: none; width: 3.2rem; height: 1.6rem; overflow: visible; }
.gd-lg-row svg[viewBox="0 0 28 28"] { width: 1.6rem; }

/* =========================== Mocks ======================================== */
/* modal (entry form · import plan · agent card) */
.gd-modal {
    max-width: 30rem; background: var(--gd-sheet); border: 1px solid var(--gd-line-strong);
    border-radius: var(--r-md); box-shadow: var(--sh-pop); padding: var(--s-4);
}
.gd-modal--card { max-width: 34rem; }
.gd-modal-t { font-size: var(--fs-md); font-weight: 700; margin-bottom: var(--s-3); }
.gd-form { display: flex; flex-direction: column; gap: 0.6rem; }
.gd-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: var(--fs-xs); font-weight: 600; color: var(--gd-subtle); }
.gd-form input, .gd-form-still {
    font-size: var(--fs-sm); color: var(--gd-text); background: var(--gd-sheet);
    border: 1px solid var(--gd-line-strong); border-radius: var(--r-sm); padding: 0.45rem 0.6rem;
    font-family: inherit; pointer-events: none;
}
.gd-form input.num { text-align: right; font-family: var(--gd-mono); font-weight: 700; }
.gd-form input::placeholder { color: #8a8a8a; font-style: italic; }
.gd-form-still {
    display: flex; justify-content: space-between; align-items: center; gap: 0.6rem;
    border-style: dashed; background: var(--gd-tray); color: var(--gd-subtle); font-size: var(--fs-xs); font-weight: 600;
}
.gd-form-still b { color: var(--gd-text); font-size: var(--fs-sm); }
.gd-form-check { flex-direction: row !important; align-items: center; gap: 0.6rem !important; font-size: var(--fs-sm) !important; color: var(--gd-text) !important; }
.gd-selface {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    font-size: var(--fs-sm); color: var(--gd-text);
    background: linear-gradient(180deg, #ffffff, #f6f6f6);
    border: 1px solid var(--gd-line-strong); border-radius: var(--r-sm); padding: 0.45rem 0.6rem;
}
.gd-selface i { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--gd-accent); }
.gd-selface--sm { padding: 0.3rem 0.5rem; font-size: var(--fs-xs); flex: none; min-width: 5.4rem; }
.gd-modal-btns { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: var(--s-4); }
.gd-btn-mock2 {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.4rem 0.9rem; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 700;
    color: var(--gd-accent); background: var(--gd-sheet); border: 1px solid var(--gd-line-strong); white-space: nowrap;
}
.gd-btn-mock2.is-silver { background: var(--gd-silver-grad); box-shadow: var(--sh-rest); }

/* agent review card items */
.gd-card-hint { font-size: var(--fs-sm); color: var(--gd-subtle); margin-bottom: var(--s-3); }
.gd-card-item {
    display: flex; gap: 0.7rem; align-items: flex-start;
    border: 1px solid var(--gd-line); border-radius: var(--r-sm); padding: 0.6rem 0.7rem; margin-bottom: 0.5rem;
    background: var(--gd-tray);
}
.gd-card-item > div { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.gd-card-item b { font-size: var(--fs-sm); }
.gd-card-item .mono { font-size: var(--fs-xs); color: var(--gd-muted); overflow-wrap: anywhere; }
.gd-card-foot {
    display: flex; align-items: center; gap: 0.6rem; justify-content: flex-end;
    font-size: var(--fs-xs); color: var(--gd-subtle); margin-top: var(--s-3);
}

/* sheet mock */
.gd-sheetmock { background: var(--gd-sheet); border: 1px solid var(--gd-line-strong); border-radius: var(--r-md); box-shadow: var(--sh-rest); padding: var(--s-4); }
.gd-crumbs { font-size: var(--fs-xs); color: var(--gd-subtle); margin-bottom: 0.6rem; }
.gd-crumbs .is-here { color: var(--gd-text); font-weight: 700; border-bottom: 2px solid var(--gd-gold); }
.gd-sheetbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.gd-sheetbar b { font-size: var(--fs-lg); margin-right: auto; }
.gd-sheetmock .gd-tablewrap { margin-top: 0.5rem; }
.gd-pager { text-align: center; margin-top: 0.7rem; font-size: var(--fs-sm); color: var(--gd-subtle); }

/* totals board */
.gd-board { background: var(--gd-sheet); border: 1px solid var(--gd-line-strong); border-radius: var(--r-md); box-shadow: var(--sh-rest); padding: var(--s-4); }
.gd-board-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: var(--s-3); }
.gd-board-head b { font-size: var(--fs-lg); }
.gd-tiles {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1px;
    background: var(--gd-line-strong); border: 1px solid var(--gd-line-strong); border-radius: var(--r-sm); overflow: hidden;
}
.gd-tile { background: var(--gd-sheet); padding: 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
.gd-tile span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gd-subtle); font-weight: 600; }
.gd-tile b { font-size: 1.35rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gd-tile--gold b { color: var(--gd-gold-ink); }
.gd-tabs { display: flex; gap: 0.3rem; margin: var(--s-3) 0 0.5rem; }
.gd-tabs span { padding: 0.3rem 0.8rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; color: var(--gd-subtle); border: 1px solid transparent; }
.gd-tabs .is-on { color: var(--gd-accent); background: var(--gd-accent-soft); border-color: rgba(60,72,107,0.25); }
.gd-chart-scroll { overflow-x: auto; }
.gd-chart-scroll svg { display: block; width: 100%; min-width: 28rem; height: auto; }

/* boundary management mock */
.gd-outmock {
    max-width: 30rem; background: #fdfcf8; border: 1px solid var(--gd-gold-soft); border-radius: var(--r-md);
    border-top: 3px solid var(--gd-gold); box-shadow: var(--sh-rest); padding: var(--s-4);
}
.gd-outmock-t { font-size: var(--fs-sm); font-weight: 700; color: var(--gd-gold-ink); letter-spacing: 0.06em; margin-bottom: 0.7rem; }
.gd-outmock-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.gd-outmock-row input {
    flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--gd-text); font-family: inherit;
    border: 1px solid var(--gd-line-strong); border-radius: var(--r-sm); padding: 0.35rem 0.55rem; pointer-events: none; background: var(--gd-sheet);
}
.gd-outmock-add { font-size: var(--fs-sm); font-weight: 700; color: var(--gd-accent); margin-top: 0.6rem; }

/* import plan mock */
.gd-plan { display: flex; flex-direction: column; gap: 0.45rem; font-size: var(--fs-sm); }
.gd-plan > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--gd-line); padding-bottom: 0.4rem; }
.gd-plan span { color: var(--gd-subtle); }
.gd-plan b { color: var(--gd-text); }
.gd-plan-safe { margin-top: var(--s-3); font-size: var(--fs-sm); font-weight: 700; color: var(--gd-green-ink); }
.gd-plan-note { margin-top: 0.3rem; font-size: var(--fs-xs); color: var(--gd-subtle); }

/* layers nesting figure */
.gd-ly { display: flex; flex-direction: column; gap: 0.6rem; }
.gd-ly-box {
    border: 1px solid var(--gd-line-strong); border-radius: var(--r-md); background: var(--gd-sheet);
    padding: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.gd-ly-box--u { border-color: var(--gd-gold-soft); border-top: 3px solid var(--gd-gold); background: #fdfcf8; }
.gd-ly-box--in { margin-left: 1.1rem; border-left: 3px solid var(--gd-gold); background: var(--gd-tray); }
.gd-ly-pill { align-self: flex-start; display: inline-block; padding: 0.14rem 0.6rem; border-radius: var(--r-pill); font-family: var(--gd-mono); font-size: var(--fs-xs); font-weight: 700; color: #fff; background: var(--gd-accent); }
.gd-ly-pill--gold { color: var(--gd-gold-ink); background: rgba(194,163,90,0.14); border: 1px solid var(--gd-gold-soft); }
.gd-ly-name { font-size: var(--fs-sm); color: var(--gd-muted); }

/* =========================== Closing & footer ============================= */
/* The closing panel wears the white vibe as well: a porcelain card echoing the
   sheet, navy ink, and — the landing's own law: silver on white is invisible —
   a STEEL primary with a quiet porcelain secondary. */
.gd-close { max-width: 76rem; margin: var(--s-7) auto 0; padding: 0 var(--s-5); }
.gd-close-panel {
    background: var(--gd-sheet); border: 1px solid var(--gd-line-strong); border-radius: var(--r-lg);
    box-shadow: var(--sh-sheet); padding: clamp(2rem, 5vw, 3rem); text-align: center; color: var(--gd-text);
}
.gd-close-panel h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.02em; }
.gd-close-panel p { max-width: 46rem; margin: var(--s-4) auto 0; color: var(--gd-muted); font-size: var(--fs-md); line-height: 1.65; }
.gd-close-cta { margin-top: var(--s-5); display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
.gd-close-panel .gd-btn--silver { background: var(--gd-steel-grad); color: #ffffff; box-shadow: var(--sh-rest); }
.gd-close-panel .gd-btn--silver:hover { filter: brightness(1.12); }
.gd-close-panel .gd-btn--ghost { background: var(--gd-sheet); color: var(--gd-accent); border-color: var(--gd-line-strong); }
.gd-close-panel .gd-btn--ghost:hover { background: var(--gd-tray); border-color: var(--gd-accent); }
.gd-close-panel a:focus-visible { box-shadow: var(--gd-ring); }

.gd-foot {
    max-width: 76rem; margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-7);
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem;
    color: var(--gd-on-dark-faint); font-size: var(--fs-sm); text-align: center;
}
.gd-foot a { color: var(--gd-on-dark-muted); text-decoration: none; }
.gd-foot a:hover { color: #fff; text-decoration: underline; }
.gd-foot-dot { opacity: 0.5; }

/* =========================== Responsive =================================== */
@media (max-width: 60rem) {
    .gd-sheet { border-radius: 0; }
    .gd-close { padding: 0 var(--s-3); }
}
@media (max-width: 56rem) {
    .gd-bandhead--split { grid-template-columns: 1fr; }
    .gd-formula, .gd-diamond-states { justify-self: start; }
}
@media (max-width: 38rem) {
    .gd-top { flex-direction: column; align-items: center; gap: 0.5rem; }
    .gd-nav { justify-content: center; }
    .gd-hero-cta .gd-btn, .gd-close-cta .gd-btn { width: 100%; }
    .gd-table { min-width: 30rem; }
}
@media (max-width: 30rem) {
    .gd-ly-box--in { margin-left: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .gd-btn, .gd-nav a, .gd-toc a { transition: none; }
}


/* ============================================================================
   THE APP, COPIED — .gd-app scoped component library
   ----------------------------------------------------------------------------
   Owner rule (2026-08-27): the exhibits must copy EXACTLY the Dental Books
   client's menus and images. Everything below is transcribed from the client's
   own stylesheets — DentalSystem front/styles/tokens.css, base.css, app.css,
   odontogram.css and front/style.css — with the app's REAL class names, scoped
   under .gd-app so the guide's chrome and the app's chrome never mix. The
   images (logo, book cover, tooth renders) are the app's actual files, copied
   into /guides/dentalbooks/img/. Do not restyle by eye: when the client moves,
   re-transcribe.
   ========================================================================== */

.gd-app {
    /* the client's design tokens, verbatim (tokens.css + style.css --accent-deep) */
    --bg: #eef2f8; --surface: #ffffff; --surface-2: #f7f9fc; --surface-3: #eef2f8;
    --line: #e3e8f0; --line-strong: #d3dae6;
    --text: #2a2f3a; --muted: #5b6473; --subtle: #8a93a3; --on-accent: #ffffff;
    --accent: #3C486B; --accent-hover: #2e3a56; --accent-press: #283350;
    --accent-soft: #eef1f7; --accent-ring: rgba(60, 72, 107, 0.22); --accent-deep: #2e3a56;
    --gold: #c2a35a; --gold-soft: rgba(194, 163, 90, 0.40);
    --silver-grad: linear-gradient(-145deg, #f2f4f8, #dfe4ec, #fbfcfe, #d7dde7, #eef1f6);
    --steel-grad: linear-gradient(-145deg, #2e3a56, #3C486B, #283350, #46557e, #2e3a56);
    --success: #2e9e6b; --success-soft: #e6f4ee;
    --warning: #e3a93c; --warning-soft: #fbf1dd;
    --danger: #d9534f; --danger-hover: #c33b37; --danger-soft: #fbe9e8;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-20: 1.25rem; --fs-24: 1.5rem;
    --fw-regular: 400; --fw-medium: 600; --fw-bold: 700; --lh: 1.5;
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
    --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
    --sh-sm: 0 1px 2px rgba(20, 30, 50, 0.06), 0 2px 6px rgba(20, 30, 50, 0.06);
    --sh-md: 0 1px 3px rgba(20, 30, 50, 0.08), 0 6px 16px rgba(20, 30, 50, 0.08);
    --sh-lg: 0 12px 32px rgba(20, 30, 50, 0.16);
    --topbar-h: 60px;
    --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --dur: 160ms;

    /* the app canvas: body{background: var(--bg)} in the "Fondo: Ninguno" state */
    font-family: var(--font);
    font-size: var(--fs-14);
    line-height: var(--lh);
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--gd-line-strong);
    border-radius: var(--r-md);
    overflow: hidden;
}
.gd-app h4, .gd-app p, .gd-app dl, .gd-app dd { margin: 0; }
.gd-app--pad { padding: var(--s-5); }
.gd-app--center { display: flex; justify-content: center; }
.gd-app--col { display: flex; flex-direction: column; gap: var(--s-4); }
.gd-app .icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.gd-app .icon svg { display: block; }

/* ---- helpers (base.css / app.css) ---- */
.gd-app .row { display: flex; align-items: center; gap: var(--s-3); }
.gd-app .stack { display: flex; flex-direction: column; gap: var(--s-4); }
.gd-app .muted { color: var(--muted); }
.gd-app .page__title { font-size: var(--fs-24); font-weight: var(--fw-bold); }
.gd-app .page__actions { display: flex; gap: var(--s-2); align-items: center; }
.gd-app .field__label { font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

/* ---- top navigation bar (app.css, verbatim) ---- */
.gd-app .topnav {
    display: flex; align-items: center; gap: var(--s-6); height: var(--topbar-h);
    padding: 0 var(--s-6);
    background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--sh-sm);
    overflow-x: auto;
}
.gd-app .topnav__brand { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; padding-right: var(--s-3); border-right: 1px solid var(--line); height: 80%; }
.gd-app .topnav__logo-plate {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 11px; border-radius: 10px;
    background: linear-gradient(145deg, #5a6068 0%, #34383f 38%, #23272d 55%, #444a52 78%, #2b2f35 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 1px 3px rgba(10, 12, 16, 0.40), inset 0 -1px 0 rgba(255, 255, 255, 0.30), inset 0 1px 1px rgba(0, 0, 0, 0.35);
}
.gd-app .topnav__logo { height: 34px; width: auto; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
.gd-app .topnav__brand-text { font-weight: var(--fw-bold); letter-spacing: 0.02em; line-height: 1.1; white-space: nowrap; color: var(--text); }
.gd-app .topnav__brand-text small { display: block; font-weight: var(--fw-regular); font-size: 0.64rem; color: var(--subtle); letter-spacing: 0.14em; text-transform: uppercase; }
.gd-app .topnav__nav { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; }
.gd-app .nav-item {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: 0.5rem 0.85rem; border-radius: var(--r-md);
    color: var(--muted); font-weight: var(--fw-medium); white-space: nowrap;
    border: none; background: transparent;
}
.gd-app .nav-item .icon { color: var(--subtle); }
.gd-app .nav-item.is-active { background: var(--accent-soft); color: var(--accent); }
.gd-app .nav-item.is-active .icon { color: var(--accent); }
.gd-app .topnav__right { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }
.gd-app .userchip { display: flex; align-items: center; gap: var(--s-3); }
.gd-app .userchip__avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--steel-grad); color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-14); flex: 0 0 auto;
}
.gd-app .userchip__meta { display: flex; flex-direction: column; line-height: 1.2; max-width: 16rem; }
.gd-app .userchip__name { font-weight: var(--fw-medium); white-space: nowrap; }
.gd-app .userchip__email { font-size: var(--fs-12); color: var(--subtle); white-space: nowrap; }

/* ---- buttons (app.css, verbatim; static mocks drop the transitions) ---- */
.gd-app .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    height: 38px; padding: 0 var(--s-4);
    border-radius: var(--r-md); border: 1px solid transparent;
    font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap;
}
.gd-app .btn--primary { background: var(--accent); color: var(--on-accent); }
.gd-app .btn--secondary { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.gd-app .btn--ghost { background: transparent; color: var(--muted); }
.gd-app .btn--danger { background: var(--danger); color: #fff; }
.gd-app .btn--danger-ghost { background: transparent; color: var(--danger); border-color: var(--danger-soft); }
.gd-app .btn--sm { height: 30px; padding: 0 var(--s-3); font-size: var(--fs-12); }
.gd-app .btn--icon { width: 34px; height: 34px; padding: 0; border-radius: var(--r-md); background: transparent; color: var(--muted); border: none; }

/* ---- cards (app.css, verbatim) ---- */
.gd-app .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.gd-app .card--interactive { cursor: pointer; }
.gd-app .card__media { display: flex; align-items: center; justify-content: center; height: 120px; background: var(--surface-2); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.gd-app .card__media img { max-height: 84px; max-width: 70%; object-fit: contain; }
.gd-app .card__body { padding: var(--s-4); }
.gd-app .card__title { font-weight: var(--fw-bold); font-size: var(--fs-16); }
.gd-app .card__meta { color: var(--muted); font-size: var(--fs-12); margin-top: 2px; }
.gd-app .card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }

/* ---- tabs (app.css, verbatim: the gold underline) ---- */
.gd-app .tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); }
.gd-app .tab {
    padding: 0.7rem var(--s-4); border: none; background: transparent;
    color: var(--muted); font-weight: var(--fw-medium);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.gd-app .tab.is-active { color: var(--accent); border-bottom-color: var(--gold); }
.gd-app .lbk-tab { display: inline-flex; align-items: center; gap: 6px; }

/* ---- badges (app.css, verbatim) ---- */
.gd-app .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: var(--fw-medium); }
.gd-app .badge--neutral { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.gd-app .badge--accent { background: var(--accent-soft); color: var(--accent); }
.gd-app .badge--success { background: var(--success-soft); color: var(--success); }
.gd-app .badge--warning { background: var(--warning-soft); color: #9a6b12; }
.gd-app .badge--danger { background: var(--danger-soft); color: var(--danger); }

/* ---- definition list (app.css, verbatim) ---- */
.gd-app .dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-5); }
.gd-app .dl dt { color: var(--muted); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.04em; }
.gd-app .dl dd { margin: 0; color: var(--text); }

/* ---- modal (app.css, verbatim; shown as a resting box, no overlay) ---- */
.gd-app .modal {
    width: min(560px, 100%);
    display: flex; flex-direction: column;
    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden;
}
.gd-app .modal--lg { width: min(880px, 100%); }
.gd-app .modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.gd-app .modal__title { font-size: var(--fs-20); font-weight: var(--fw-bold); }
.gd-app .modal__body { padding: var(--s-5); }
.gd-app .modal__foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); background: var(--surface-2); }

/* ---- the first-contact fingerprint block (shareTrust.js inline styles, verbatim) ---- */
.gd-app .fp-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.35rem; letter-spacing: 0.12em; font-weight: 700;
    text-align: center; padding: 14px 10px; margin: 10px 0;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px;
    word-break: break-all;
}

/* ---- the checkbox (app.css, verbatim) ---- */
.gd-app .checkbox { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; }
.gd-app .checkbox input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }

/* ---- Cambios: the change log (app.css, verbatim) ---- */
.gd-app .change-log { display: flex; flex-direction: column; }
.gd-app .change-row { display: grid; grid-template-columns: 9.5rem 1fr auto; gap: var(--s-3); align-items: baseline; padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: var(--fs-14); }
.gd-app .change-row:last-child { border-bottom: none; }
.gd-app .change-row__at { color: var(--subtle); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--fs-12); }
.gd-app .change-row__what { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.gd-app .change-row__what .icon { color: var(--subtle); flex: 0 0 auto; }
.gd-app .change-row__action { font-weight: var(--fw-medium); }
.gd-app .change-row__who { white-space: nowrap; font-size: var(--fs-12); }

/* ---- Agent chat (app.css, verbatim) ---- */
.gd-app .agent-chat__log { display: flex; flex-direction: column; gap: var(--s-3); padding: 4px 2px; }
.gd-app .agent-msg { max-width: 82%; border-radius: var(--r-md); padding: 10px 12px; border: 1px solid var(--line); background: var(--surface-2); }
.gd-app .agent-msg--user { align-self: flex-end; background: var(--accent-soft); border-color: var(--accent-ring); }
.gd-app .agent-msg--agent { align-self: flex-start; }
.gd-app .agent-msg__who { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-12); color: var(--muted); margin-bottom: 4px; }
.gd-app .agent-msg__text { white-space: pre-wrap; word-break: break-word; font-size: var(--fs-14); }
.gd-app .agent-undo { align-self: flex-start; }

/* ---- odontogram tile (odontogram.css + style.css .white, verbatim) ---- */
.gd-app .odontogramTeeth {
    display: flex; flex-direction: row; width: 14rem; height: 10rem; margin: 0.4rem;
    border-radius: var(--r-sm); background: var(--surface); border: 1px solid transparent; cursor: pointer;
}
.gd-app .odontogramTeeth > section { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; }
.gd-app .odontogramTeeth > section:first-of-type { background-color: var(--accent); border-radius: var(--r-sm) 0 0 var(--r-sm); position: relative; }
.gd-app .Teeth { display: flex; flex-direction: column; align-items: center; justify-content: space-between !important; width: 40% !important; height: 100%; }
.gd-app .Teeth p { color: var(--text); font-size: 1.1rem; margin: 0.4rem 0; padding: 0.1rem 0.4rem; border-radius: var(--r-sm); box-shadow: var(--sh-sm); background: var(--surface); }
.gd-app .Teeth div { display: flex; align-items: center; justify-content: center; background-color: var(--accent-deep); box-shadow: var(--sh-sm); border-radius: var(--r-md); margin: 0 0.2rem 0.2rem 0.2rem; }
.gd-app .Teeth img { width: 150%; height: auto; }
.gd-app .TeethController { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; }
.gd-app .TeethController .TeethController { flex-direction: row; }
.gd-app .TeethControllerPhase { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.10); }
.gd-app .TeethControllerMiddle {
    display: flex; align-items: center; justify-content: center; position: absolute;
    width: 5rem; height: 5rem; border-radius: 100%; z-index: 9;
    background-color: #ffffff; box-shadow: var(--sh-sm); border: 1px solid rgba(0, 0, 0, 0.10);
}
.gd-app .roundCorner0 { border-radius: 50% 0 0 0; }
.gd-app .roundCorner90 { border-radius: 0 50% 0 0; }
.gd-app .roundCorner180 { border-radius: 0 0 0 50%; }
.gd-app .roundCorner360 { border-radius: 0 0 50% 0; }
.gd-app .TeethContraction { width: 7rem !important; height: 7rem !important; }
.gd-app .Rotation45 { rotate: 45deg; }
.gd-app .white { background: linear-gradient(150deg, #ffffff 0%, #f7f9fc 55%, #eef2f8 100%); }

/* dc1 surface coding (odontogram.css, verbatim) */
.gd-app .TeethControllerPhase.dc1-multi, .gd-app .TeethControllerMiddle.dc1-multi { outline: 2px dashed rgba(20, 20, 20, 0.55); outline-offset: -2px; }
.gd-app .TeethControllerPhase.dc1-ca, .gd-app .TeethControllerMiddle.dc1-ca { background: #d32f2f; }
.gd-app .TeethControllerPhase.dc1-pu, .gd-app .TeethControllerMiddle.dc1-pu { background: #7b1fa2; }
.gd-app .TeethControllerPhase.dc1-pe, .gd-app .TeethControllerMiddle.dc1-pe { background: #ef6c00; }
.gd-app .TeethControllerPhase.dc1-pr, .gd-app .TeethControllerMiddle.dc1-pr { background: #f9a825; }
.gd-app .TeethControllerPhase.dc1-tr, .gd-app .TeethControllerMiddle.dc1-tr { background: #37474f; }
.gd-app .TeethControllerPhase.dc1-tw, .gd-app .TeethControllerMiddle.dc1-tw { background: #00838f; }
.gd-app .TeethControllerPhase.dc1-dv, .gd-app .TeethControllerMiddle.dc1-dv { background: #283593; }
.gd-app .TeethControllerPhase.dc1-om, .gd-app .TeethControllerMiddle.dc1-om { background: #c2185b; }
.gd-app .TeethControllerPhase.dc1-tm, .gd-app .TeethControllerMiddle.dc1-tm { background: #6d4c41; }
.gd-app .TeethControllerPhase.dc1-im, .gd-app .TeethControllerMiddle.dc1-im { background: #1565c0; }

/* the board legend (odontogram.css, verbatim) */
.gd-app .odo-legend { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.gd-app .odo-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--muted); }
.gd-app .odo-legend__dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* the editor's tooth-image box (odontogram.css, verbatim) */
.gd-app .odo-tw__imgbox { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--accent-deep); border-radius: var(--r-md); overflow: hidden; }
.gd-app .odo-tw__img { height: 42px; width: auto; }

/* ---- B.P. index (odontogram.css, verbatim; the gauge fill is static here) ---- */
.gd-app .bp-summary {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap;
    padding: var(--s-5); background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.gd-app .bp-summary::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.gd-app .bp-gauge {
    --bp-fill: 0%;
    position: relative; width: 7.5rem; height: 7.5rem; border-radius: 50%; flex: 0 0 auto;
    background: conic-gradient(var(--gold) var(--bp-fill), var(--surface-3) 0);
    box-shadow: inset 0 1px 2px rgba(20, 30, 50, 0.08);
}
.gd-app .bp-gauge__hole {
    position: absolute; inset: 9px; border-radius: 50%; background: var(--surface);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 1px 2px rgba(20, 30, 50, 0.10);
}
.gd-app .bp-gauge__num { font-size: var(--fs-24); font-weight: var(--fw-bold); color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.gd-app .bp-gauge__cap { margin-top: 3px; font-size: var(--fs-12); color: var(--muted); text-align: center; padding: 0 var(--s-2); }
.gd-app .bp-stats { display: flex; gap: var(--s-6); flex: 1 1 auto; flex-wrap: wrap; align-items: center; }
.gd-app .bp-stat { min-width: 8rem; }
.gd-app .bp-stat__val { font-size: var(--fs-24); font-weight: var(--fw-bold); color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.gd-app .bp-stat__label { margin-top: 2px; font-size: var(--fs-12); color: var(--muted); }
.gd-app .bp-legend { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.gd-app .bp-legend__item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-12); color: var(--muted); }
.gd-app .bp-legend__swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--surface-2); flex: 0 0 auto; }
.gd-app .bp-legend__swatch.is-on { background: #f9a825; border-color: #e08e00; }
.gd-app .bp-tooth {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
    min-width: 10.5rem; padding: var(--s-3) var(--s-3) var(--s-4);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.gd-app .bp-tooth__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: 100%; min-height: 24px; }
.gd-app .bp-tooth__head .checkbox span { font-size: var(--fs-12); }
.gd-app .bp-tooth__num { font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.gd-app .bp-tooth__num::after { content: ""; display: block; width: 14px; height: 2px; margin-top: 3px; border-radius: 1px; background: var(--gold); }
.gd-app .bp-tooth__foot { display: flex; align-items: center; justify-content: center; min-height: 22px; }
.gd-app .bp-tooth__count {
    font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--muted); font-variant-numeric: tabular-nums;
    padding: 2px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.gd-app .bp-tooth__count.is-marked { background: var(--gold-soft); border-color: var(--gold); color: var(--text); }
.gd-app .bp-cross { display: grid; grid-template-columns: repeat(3, 2.4rem); grid-template-rows: repeat(3, 2.4rem); gap: 4px; }
.gd-app .bp-cell {
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2);
    color: var(--muted); font-size: var(--fs-12); font-weight: var(--fw-bold);
}
.gd-app .bp-cell--top { grid-area: 1 / 2; border-radius: var(--r-md) var(--r-md) var(--r-sm) var(--r-sm); }
.gd-app .bp-cell--left { grid-area: 2 / 1; border-radius: var(--r-md) var(--r-sm) var(--r-sm) var(--r-md); }
.gd-app .bp-cell--center { grid-area: 2 / 2; border-radius: 50%; }
.gd-app .bp-cell--right { grid-area: 2 / 3; border-radius: var(--r-sm) var(--r-md) var(--r-md) var(--r-sm); }
.gd-app .bp-cell--bottom { grid-area: 3 / 2; border-radius: var(--r-sm) var(--r-sm) var(--r-md) var(--r-md); }
.gd-app .bp-cross__void { grid-area: 2 / 2; display: flex; align-items: center; justify-content: center; }
.gd-app .bp-cross__void::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1px dashed var(--line-strong); }
.gd-app .bp-cell.is-on { background: #f9a825; border-color: #e08e00; color: #3a2c00; }

/* ---- exhibit-only layout shims (NOT app rules: how the copies sit in the page) ---- */
.gd-exrow { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-start; justify-content: center; }
.gd-exlab { text-align: center; font-size: var(--fs-12, 0.75rem); color: var(--muted, #5b6473); margin-top: 2px; }
.gd-exstate { display: flex; flex-direction: column; align-items: center; gap: 6px; }

@media (max-width: 760px) {
    .gd-app--pad { padding: var(--s-3); }
    .gd-app .change-row { grid-template-columns: 1fr; gap: 2px; }
    .gd-app .dl { grid-template-columns: 1fr; }
}

/* the reference table's value column (C18) */
.gd-table--ref td:nth-child(2) { white-space: nowrap; }