/* ==========================================================================
   Article diagrams — transcriber/macos
   Inline SVG on the light field, the same world as the log: a white glass
   panel with the lit edge, ink lines, and the one orange for the path that
   carries the lesson. Every diagram is
   fully visible at rest; the stepper only moves emphasis (dims the rest),
   so nothing is gated behind input or motion.
   ========================================================================== */

.dg {
    --accent: var(--accent-bright);
    --dg-line: rgba(11, 12, 14, 0.2);
    --dg-line-strong: rgba(11, 12, 14, 0.55);
    --dg-node: #ffffff;
    --dg-node-edge: rgba(11, 12, 14, 0.14);
    --dg-glow: rgba(255, 71, 38, 0.35);
    position: relative;
    margin: 38px 0 34px;
    padding: 28px 30px 22px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: var(--lift-1);
    color: var(--ink);
    border-radius: var(--radius);
    font-family: var(--text);
    overflow: hidden;
}
.dg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.dg .dg-title {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    font-stretch: 82%;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink);
}
.dg .dg-title em { font-style: normal; color: var(--accent-on-light); }
.dg .dg-sub { max-width: 52ch; margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* The drawing. Below 720px the SVG keeps a readable size and the frame scrolls. */
.dg-scroll {
    margin: 18px -30px 0;
    padding: 0 30px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ink-4) transparent;
}
.dg-svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Below this width the labels would drop under ~11px, so the frame scrolls instead. */
@media (min-width: 721px) { .dg-scroll { overflow: visible; } }
@media (max-width: 720px) { .dg-svg { min-width: 640px; } }

/* ----- SVG vocabulary: use these classes, never inline colours ---------- */
.dg-svg text { font-family: var(--display); fill: var(--ink); }
.dg-svg .t-label { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.dg-svg .t-big { font-size: 22px; font-weight: 800; font-stretch: 85%; letter-spacing: -0.02em; }
.dg-svg .t-small { font-size: 12.5px; font-weight: 500; fill: var(--ink-3); }
.dg-svg .t-cap { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ink-4); }
.dg-svg .t-hot { fill: var(--accent-on-light); }
.dg-svg .t-ink { fill: var(--ink); }
/* Text on the dark model slabs goes white. */
.dg-svg .fill-on ~ .t-ink { fill: #fff; }
.dg-svg .t-num { font-variant-numeric: tabular-nums; }

.dg-svg .node { fill: var(--dg-node); stroke: var(--dg-node-edge); stroke-width: 1.5; filter: drop-shadow(0 2px 3px rgba(16, 20, 28, 0.06)); }
.dg-svg .node-soft { fill: rgba(255, 255, 255, 0.4); stroke: var(--dg-line); stroke-width: 1.2; stroke-dasharray: 4 4; }
.dg-svg .node-hot { fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 14px var(--dg-glow)); }
.dg-svg .node-edge-hot { fill: var(--dg-node); stroke: var(--accent); stroke-width: 1.5; }
.dg-svg .zone { fill: rgba(11, 12, 14, 0.028); stroke: var(--dg-node-edge); stroke-width: 1; }
.dg-svg .wire { fill: none; stroke: var(--dg-line-strong); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dg-svg .wire-dim { fill: none; stroke: var(--dg-line); stroke-width: 1.2; stroke-dasharray: 3 5; }
.dg-svg .wire-hot { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--dg-glow)); }
.dg-svg .fill-hot { fill: var(--accent); }
.dg-svg .fill-dim { fill: rgba(11, 12, 14, 0.14); }
.dg-svg .fill-on { fill: var(--ink); filter: drop-shadow(0 6px 10px rgba(16, 20, 28, 0.22)); }
.dg-svg .stroke-hot { stroke: var(--accent); }
.dg-svg .arrow { fill: var(--dg-line-strong); }
.dg-svg .arrow-hot { fill: var(--accent); }

/* ----- stepper: emphasis only ------------------------------------------- */
.dg-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.dg-steps button {
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: var(--lift-1);
    color: var(--ink-2);
    font-family: var(--display);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.dg-steps button:hover { color: var(--ink); background: #fff; }
.dg-steps button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.dg-steps button:focus-visible { outline: 2px solid var(--accent-on-light); outline-offset: 3px; }
.dg .dg-step-note { min-height: 3em; margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.dg .dg-step-note b { color: var(--accent-on-light); font-weight: 600; }

/* When a step is chosen, everything tagged with other steps dims. */
.dg-svg [data-step] { transition: opacity .35s var(--ease); }
.dg[data-active] .dg-svg [data-step] { opacity: 0.14; }
.dg[data-active="1"] .dg-svg [data-step~="1"],
.dg[data-active="2"] .dg-svg [data-step~="2"],
.dg[data-active="3"] .dg-svg [data-step~="3"],
.dg[data-active="4"] .dg-svg [data-step~="4"],
.dg[data-active="5"] .dg-svg [data-step~="5"],
.dg[data-active="6"] .dg-svg [data-step~="6"] { opacity: 1; }

/* ----- the lesson the diagram carries ----------------------------------- */
.dg-rule {
    display: flex;
    gap: 14px;
    align-items: baseline;
    margin-top: 18px;
    padding: 14px 18px;
    background: #fff;
    border-left: 3px solid var(--accent);
    border-radius: 4px 12px 12px 4px;
}
.dg-rule span {
    flex: 0 0 auto;
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-on-light);
}
.dg .dg-rule p { margin: 0; font-family: var(--display); font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); }

.dg figcaption {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--hair);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-4);
}

@media (max-width: 820px) {
    .dg { padding: 22px 18px 18px; border-radius: 18px; margin-left: -4px; margin-right: -4px; }
    .dg-scroll { margin: 16px -18px 0; padding: 0 18px; }
    .dg-rule { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .dg *, .dg *::before, .dg *::after { transition: none !important; animation: none !important; }
}
@media print {
    .dg { background: #fff; color: #000; border: 1px solid #bbb; break-inside: avoid; }
    .dg-steps { display: none; }
    .dg[data-active] .dg-svg [data-step] { opacity: 1; }
    .dg-svg { min-width: 0; }
    .dg-svg text { fill: #000 !important; }
    .dg-svg .node, .dg-svg .node-edge-hot, .dg-svg .zone { fill: #fff; stroke: #999; }
    .dg-svg .wire, .dg-svg .wire-hot { stroke: #000; filter: none; }
    .dg-svg .node-hot { fill: #ddd; stroke: #000; filter: none; }
    .dg-title, .dg-title em, .dg-sub, .dg-rule p, .dg-rule span, .dg figcaption, .dg-step-note { color: #000 !important; }
    .dg-rule { background: #fff; border: 1px solid #bbb; }
}



/* ----- story figure: a few rows read top to bottom, no stepper ---------- */
.dg-story .story { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.dg-story .story > li.story-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    margin: 0;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    box-shadow: var(--lift-1);
}
.dg-story .story > li.story-row::before { content: none; }
.dg-story .story-text h4 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 6px;
    font-family: var(--display);
    font-size: 18px;
    font-weight: 800;
    font-stretch: 88%;
    letter-spacing: -0.015em;
    color: var(--ink);
}
.dg-story .story-text h4 span { font-size: 13px; font-weight: 700; color: var(--accent-on-light); font-variant-numeric: tabular-nums; }
.dg-story .story-text p { margin: 0; font-family: var(--text); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.dg-story .story-visual { display: grid; gap: 8px; }
.dg-story .lane { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dg-story .lane.is-gone { opacity: 0.5; }
.dg-story .chip {
    padding: 5px 10px;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--hair-strong);
    font-family: var(--display);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    white-space: nowrap;
}
.dg-story .chip.is-dim { color: var(--ink-4); box-shadow: inset 0 0 0 1px var(--hair); background: rgba(255, 255, 255, 0.5); }
.dg-story .chip.is-late { box-shadow: inset 0 0 0 1px var(--hair-strong); color: var(--ink-4); text-decoration: line-through; }
.dg-story .chip.is-x { box-shadow: inset 0 0 0 1.5px var(--accent-on-light); color: var(--accent-on-light); }
.dg-story .arrow { color: var(--ink-4); font-weight: 700; }
.dg-story .engine {
    display: inline-grid;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--ink);
    color: #fff;
    font-family: var(--display);
}
.dg-story .engine b { font-size: 15px; font-weight: 800; }
.dg-story .engine small { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.72); }
.dg-story .engine.is-stuck { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--hair-strong); }
.dg-story .engine.is-stuck small { color: var(--accent-on-light); }
.dg-story .engine.is-new { background: var(--accent-bright); color: var(--ink); }
.dg-story .engine.is-new small { color: rgba(11, 12, 14, 0.72); }
.dg-story .engine.is-bench { background: rgba(11, 12, 14, 0.06); color: var(--ink-2); }
.dg-story .engine.is-bench small { color: var(--ink-4); }
@media (max-width: 720px) {
    .dg-story .story > li.story-row { grid-template-columns: 1fr; gap: 12px; }
}

/* ----- the Yuri code walkthrough under the stack ------------------------- */
.h-part { margin: 28px 0 8px; font-family: var(--display); font-size: 19px; font-weight: 800; font-stretch: 88%; letter-spacing: -0.015em; color: var(--ink); }
.part-source { padding-left: 14px; border-left: 2px solid var(--accent-bright); color: var(--ink-3); }

/* ==========================================================================
   Part five figures: the naming rule (interactive), the diarizer bench,
   the echo meter and the model update flow. Plain HTML so they reflow on a
   phone; the light panel, ink and one orange as everywhere else.
   ========================================================================== */
.dg .namer-rules,
.dg .bench-side ul,
.dg .flow-steps { margin: 0; padding: 0; list-style: none; }
.dg .namer-rules > li,
.dg .bench-side li,
.dg .flow-steps > li { margin: 0; }
.dg .namer-rules li::marker,
.dg .bench-side li::marker,
.dg .flow-steps li::marker { content: none; }
.dg .flow-steps > li::before { content: none; }
.dg .namer-rules > li { margin: 0; padding-left: 24px; }

/* ----- who is this: the naming rule --------------------------------------- */
.namer-body { display: grid; gap: 18px; margin-top: 20px; }
.namer-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 22px; }
.namer-range { display: grid; gap: 6px; font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.namer-range > span { display: flex; justify-content: space-between; gap: 10px; }
.namer-range output { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--accent-on-light); }
.namer-range.is-next output { color: var(--ink); }
.namer-range input { width: 100%; min-height: 28px; accent-color: var(--accent-bright); }
.namer-range.is-next input { accent-color: var(--ink-3); }
.namer-toggles { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.namer-check { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; font-family: var(--display); font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.namer-check input { width: 18px; height: 18px; accent-color: var(--accent-bright); }
.namer-model { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(11, 12, 14, 0.06); }
.namer-model button {
    min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent;
    font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--ink-3); cursor: pointer;
}
.namer-model button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--lift-1); }
.namer-model button:focus-visible, .namer-check input:focus-visible, .namer-range input:focus-visible { outline: 2px solid var(--accent-on-light); outline-offset: 3px; }

.namer-scale { position: relative; height: 92px; margin: 4px 6px 0; }
.namer-zones { position: absolute; left: 0; right: 0; top: 18px; height: 28px; display: flex; border-radius: 8px; overflow: hidden; }
.namer-zone { position: relative; height: 100%; overflow: hidden; transition: flex-basis .3s var(--ease); }
.namer-zone span {
    position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
    font-family: var(--display); font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}
.namer-zone.z-none { background: rgba(11, 12, 14, 0.05); color: var(--ink-4); }
.namer-zone.z-ask { background: rgba(11, 12, 14, 0.12); color: var(--ink-3); }
.namer-zone.z-name { background: var(--ink); color: #fff; }
.namer-zone.z-learn { background: var(--accent-bright); color: var(--ink); }
.namer-gap { position: absolute; top: 52px; height: 10px; border: 2px solid var(--ink-3); border-top: 0; border-radius: 0 0 4px 4px; transition: left .2s var(--ease), width .2s var(--ease), border-color .2s; }
.namer-gap::after {
    content: attr(data-label); position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
    font-family: var(--display); font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--ink-3);
}
.namer-gap.is-short { border-color: var(--accent-on-light); }
.namer-gap.is-short::after { color: var(--accent-on-light); }
.namer-dot { position: absolute; top: 12px; width: 20px; height: 40px; margin-left: -10px; border-radius: 10px; transition: left .2s var(--ease); }
.namer-dot.is-best { background: var(--accent-bright); box-shadow: 0 0 0 3px #fff, 0 0 16px var(--dg-glow); }
.namer-dot.is-next { background: #fff; box-shadow: inset 0 0 0 3px var(--ink-3), 0 0 0 3px #fff; }
.namer-ticks { position: absolute; left: 0; right: 0; top: 0; height: 14px; }
.namer-ticks span { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--display); font-size: 11px; font-weight: 600; color: var(--ink-4); white-space: nowrap; font-variant-numeric: tabular-nums; }
.namer-ticks span.is-cal { color: var(--ink-3); }
.namer-ticks span.is-cal::after { content: ''; position: absolute; left: 50%; top: 14px; width: 1px; height: 36px; background: var(--ink-3); opacity: .5; }

.namer-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: var(--lift-1); }
.namer-chip {
    grid-row: span 2; padding: 8px 12px; border-radius: 10px;
    font-family: var(--display); font-size: 14px; font-weight: 800; white-space: nowrap;
    background: rgba(11, 12, 14, 0.06); color: var(--ink-3);
}
.namer-verdict.is-learn .namer-chip { background: var(--accent-bright); color: var(--ink); }
.namer-verdict.is-name .namer-chip { background: var(--ink); color: #fff; }
.namer-verdict.is-ask .namer-chip { background: rgba(11, 12, 14, 0.12); color: var(--ink); }
.namer-what { font-family: var(--display); font-size: 17px; font-weight: 800; color: var(--ink); }
.dg .namer-why { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

.namer-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.namer-rules li { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.namer-rules b { font-family: var(--display); color: var(--ink); }
.namer-cases button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* ----- bench: paired bars ------------------------------------------------- */
.bench-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; margin-top: 20px; align-items: start; }
.bench-rows { display: grid; gap: 18px; }
.dg .bench-row h4 { margin: 0 0 8px; font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--ink); }
.bench-row h4 small { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--ink-4); }
.bench-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 30px; margin-top: 6px; padding: 0 10px; border-radius: 8px; font-family: var(--display); font-size: 13px; font-weight: 700; isolation: isolate; }
.bench-bar::before { content: ''; position: absolute; inset: 0 auto 0 0; z-index: -1; width: calc(var(--v) / var(--max) * 100%); min-width: 6px; border-radius: 8px; }
.bench-bar.is-old { color: var(--ink-3); background: rgba(11, 12, 14, 0.04); }
.bench-bar.is-old::before { background: rgba(11, 12, 14, 0.16); }
.bench-bar.is-new { color: var(--ink); background: rgba(255, 71, 38, 0.06); }
.bench-bar.is-new::before { background: var(--accent-bright); }
.bench-bar b { font-variant-numeric: tabular-nums; font-weight: 800; }
.bench-side, .meter-notes > div { padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: var(--lift-1); }
.bench-side .k, .meter-notes .k { display: block; margin-bottom: 8px; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-on-light); }
.dg .bench-side li { position: relative; padding: 6px 0 6px 16px; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.bench-side li:first-child { border-top: 0; }
.dg .bench-side li::before { content: ''; position: absolute; left: 0; top: 13px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }

/* ----- echo meter --------------------------------------------------------- */
.meter-row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 7.5em; align-items: center; gap: 14px; }
.meter-row { margin-top: 10px; }
.dg-head + .meter-row { margin-top: 22px; }
.meter-label { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.meter-track { position: relative; height: 26px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(11, 12, 14, 0.07) 0 1px, transparent 1px calc(100% / 7)), rgba(11, 12, 14, 0.035); }
.meter-fill { position: absolute; inset: 0 auto 0 0; width: calc((70 - var(--db)) / 70 * 100%); border-radius: 6px; background: var(--ink); }
.meter-row.is-hot .meter-fill { background: var(--accent-bright); }
.meter-row b { font-family: var(--display); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.meter-axis-row { margin-top: 4px; }
.meter-axis { display: flex; justify-content: space-between; font-family: var(--display); font-size: 11px; font-weight: 600; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.meter-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.dg .meter-notes p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }

/* ----- update flow: numbered rows joined by a line ------------------------- */
.dg .flow-steps { position: relative; display: grid; gap: 8px; margin: 20px 0 0; }
.flow-steps::before { content: ''; position: absolute; left: 31px; top: 24px; bottom: 24px; width: 2px; background: var(--hair-strong); }
.flow-steps > li { position: relative; display: grid; grid-template-columns: 11.5em minmax(0, 1fr); align-items: baseline; gap: 4px 18px; padding: 14px 18px; border-radius: 14px; background: #fff; box-shadow: var(--lift-1); }
.flow-steps .flow-head { display: flex; align-items: center; gap: 12px; }
.flow-steps .n { position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--display); font-size: 13px; font-weight: 800; }
.flow-steps b { font-family: var(--display); font-size: 16px; font-weight: 800; line-height: 1.2; color: var(--ink); }
.dg .flow-steps p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.flow-steps > li.is-stop .n { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink-3); }
.flow-steps > li.is-hot { box-shadow: inset 0 0 0 2px var(--accent-bright), var(--lift-1); }
.flow-steps > li.is-hot .n { background: var(--accent-bright); color: var(--ink); box-shadow: 0 0 12px var(--dg-glow); }
.flow-steps > li.is-done .n { background: var(--ink); }
.flow-steps > li.is-todo .n { background: #fff; color: var(--ink-3); box-shadow: inset 0 0 0 2px var(--hair-strong); }

@media (max-width: 820px) {
    .namer-controls, .namer-rules, .bench-grid, .meter-notes { grid-template-columns: 1fr; }
    .flow-steps > li { grid-template-columns: 1fr; }
    .dg .flow-steps p { padding-left: 40px; }
    .meter-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
    .meter-label { grid-column: 1 / -1; }
    .meter-axis-row > span:empty { display: none; }
    .namer-zone span { font-size: 10px; left: 5px; }
    .namer-verdict { grid-template-columns: 1fr; }
    .namer-chip { grid-row: auto; justify-self: start; }
}
@media print {
    .namer-controls, .namer-scale, .namer-verdict, .namer-cases { display: none !important; }
}

/* ----- the models ---------------------------------------------------------- */
.models-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; align-items: start; }
.models-job { padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: var(--lift-1); }
.dg .models-job h4 { margin: 0 0 8px; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.dg .models-job h4 + ul + h4, .dg .models-job ul + h4 { margin-top: 18px; }
.dg .models-job ul { margin: 0; padding: 0; list-style: none; }
.dg .models-job li { margin: 0; padding: 9px 0 9px 14px; border-top: 1px solid var(--hair); position: relative; }
.dg .models-job li:first-child { border-top: 0; padding-top: 2px; }
.dg .models-job li::before { content: ''; position: absolute; left: 0; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.dg .models-job li:first-child::before { top: 8px; }
.dg .models-job li.is-mine::before { background: var(--accent-bright); box-shadow: 0 0 8px var(--dg-glow); }
.dg .models-job li.is-next::before { background: #fff; box-shadow: inset 0 0 0 1.5px var(--accent-on-light); }
.dg .models-job li::marker { content: none; }
.models-job b { display: block; font-family: var(--display); font-size: 15px; font-weight: 800; color: var(--ink); }
.models-job li.is-mine b { color: var(--accent-on-light); }
.models-job li span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.dg .models-note { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-4); }
@media (max-width: 820px) { .models-grid { grid-template-columns: 1fr; } }

/* ----- who is this: the app's sheet, rebuilt ------------------------------ */
.sheet-app { margin-top: 20px; padding: 14px 14px 18px; border-radius: 16px; background: #d9d8d6; font-family: var(--display); overflow: hidden; }
.dg .sheet-banner { margin: 0 0 10px; padding-left: 12px; border-left: 3px solid #d36a52; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.sheet-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet-pills span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.5); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.sheet-pills span::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.sheet-pills span.is-who { color: #c0533c; }
.sheet-pills small { font-size: 11.5px; color: var(--ink-4); }
.sheet-card { display: grid; justify-items: start; gap: 8px; max-width: 560px; margin: 14px auto 0; padding: 20px 22px; border-radius: 18px; background: #ecebea; box-shadow: 0 18px 40px -18px rgba(16, 20, 28, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.sheet-top { display: flex; justify-content: space-between; align-items: baseline; width: 100%; gap: 10px; }
.sheet-top b { font-size: 21px; font-weight: 800; color: var(--ink); }
.sheet-top span { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.dg .sheet-card p { margin: 2px 0; font-family: var(--text); font-size: 14px; color: var(--ink-2); }
.sheet-btn { padding: 6px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink-3); font-size: 14px; font-weight: 700; color: var(--ink); }
.sheet-btn.is-ink { background: var(--ink); color: #fff; box-shadow: none; padding: 9px 20px; }
.sheet-label { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.sheet-field { width: 100%; padding: 8px 12px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 2px #6d9ef0; font-family: var(--text); font-size: 14px; color: var(--ink-4); }
.sheet-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet-chips span { padding: 5px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(11, 12, 14, 0.3); font-size: 13px; font-weight: 700; color: var(--ink); }
.sheet-check { font-family: var(--text); font-size: 13.5px; color: var(--ink-2); }
.sheet-foot { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sheet-actions { display: inline-flex; align-items: center; gap: 16px; font-size: 15px; font-weight: 700; }

/* ----- the People section, feature by feature ------------------------------ */
.dg .feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.dg .feat-grid > li { margin: 0; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: var(--lift-1); }
.dg .feat-grid > li::before { content: none; }
.dg .feat-grid > li::marker { content: none; }
.dg .feat-grid > li.is-wide { grid-column: span 2; }
.dg .feat-grid > li.is-hot { background: var(--accent-bright); }
.feat-grid .k { display: block; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-on-light); }
.feat-grid li.is-hot .k { color: var(--ink); }
.dg .feat-grid h4 { margin: 6px 0 0; font-family: var(--display); font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.dg .feat-grid p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.dg .feat-grid li.is-hot p { color: rgba(11, 12, 14, 0.78); }
.feat-levels, .feat-brief { display: inline-flex; gap: 3px; margin-top: 10px; padding: 3px; border-radius: 999px; background: rgba(11, 12, 14, 0.06); }
.feat-levels span, .feat-brief span { padding: 4px 10px; border-radius: 999px; font-family: var(--display); font-size: 12px; font-weight: 700; color: var(--ink-3); }
.feat-levels span.on { background: var(--ink); color: #fff; }
.feat-brief span.on { background: #fff; color: var(--ink); box-shadow: var(--lift-1); }
.feat-goal { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 10px; }
.feat-goal span { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.feat-goal span.on { background: var(--accent-bright); box-shadow: none; }
.feat-goal small { margin-left: 6px; font-family: var(--display); font-size: 12px; font-weight: 600; color: var(--ink-3); }
@media (max-width: 980px) { .dg .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .dg .feat-grid { grid-template-columns: 1fr; } .dg .feat-grid > li.is-wide { grid-column: auto; } }