/*
 * csd.css — /services/custom-software-development/, light system.
 * Scope: body.apex-csd. Nothing else on the site loads this sheet.
 *
 * PASS 4, 2026-08-25. The page was replanned as a top-down funnel and every
 * control on it was deleted except the FAQ accordion. The user's note:
 * "I dislike all of the interactive widgets on this page. I dont think
 * theyre aesthetic or work to progress the funnel and sell the custom
 * software. I dont think theyre fun or educational." Gone with it: the hours
 * slider, the then/today toggle, the four cards you turned over, and the
 * screen picker. Pass 3 is archived whole at _archive/csd-pass3-2026-08-25/.
 *
 * What carries the page now is writing, real experience and motion. Every
 * comparison prints both halves, because a comparison the reader has to
 * operate is a comparison the reader skips.
 *
 * Ground rules, all user-set:
 *   · white top to bottom — NO tinted or grey bands anywhere. Contrast is
 *     cards and elevation, never a stripe.
 *   · real air: section rhythm 8rem to 14rem.
 *   · no pills, and no improvised geometry. Accents are hairlines and rules.
 *   · no mountain scenery near the close — the footer is a close-up ice
 *     shelf and two horizons at two scales fight each other.
 *   · captures are small and sit low on the page, described by result.
 *
 * Palette is the site's light system, same values as aic.css / svc.css.
 */

body.apex-csd,
body.apex-svc :is(.csd-bw, .csd-cw) {
    --csd-ink: var(--a-ink);
    --csd-body: var(--a-body);
    --csd-soft: var(--a-soft);
    --csd-brand: var(--a-brand);
    --csd-brand-deep: var(--a-brand-deep);
    --csd-line: var(--a-line);
    --csd-hair: var(--a-hair);
    --csd-card: var(--a-card);
    --csd-card-line: var(--a-card-line);
    --csd-lift: var(--a-lift);
    --csd-lift-2: var(--a-lift-2);
    --csd-plate-lift: var(--a-plate-lift);
    --csd-r: var(--a-r);
    /* No verdict colour on text since 2026-10-28: Lachlan read the green and
       red writing as AI. Text is ink, soft or the one blue. */
    --csd-go: var(--a-go);
    --csd-no: var(--a-no);
    --csd-hold: var(--a-hold);
    /* widget material: a neutral block, and the three tints the "wasted"
       state is drawn in. These exist so the diagrams and the week grid are
       built from the page's own palette rather than invented greys. */
    --csd-blk: rgba(13, 35, 80, .13);
    --csd-no-bg: rgba(160, 49, 35, .05);
    --csd-no-soft: rgba(160, 49, 35, .34);
    --csd-no-line: rgba(160, 49, 35, .3);
    --csd-sans: var(--a-sans);
    --csd-ease: var(--a-ease);
    background: #fff;
}

body.apex-csd .u-sr {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

body.apex-csd .site-shell,
body.apex-csd .site-main { background: #fff }

body.apex-csd .csd-main {
    display: block;
    background: #fff;
    color: var(--csd-body);
    font-family: var(--csd-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* Only class-less links inherit brand. A bare `.csd-main a` rule at (0,1,1)
   outranks every single-class component rule, which once painted a primary
   CTA navy on navy elsewhere in this theme. */
body.apex-csd .csd-main a:not([class]) { color: var(--csd-brand) }

body.apex-csd .csd-shell { width: min(1200px, 92vw); margin-inline: auto }
body.apex-csd .csd-shell--wide { width: min(1400px, 95vw) }

/* The page was called crammed. Rhythm opened from 5.5-10rem to 8-14rem,
   and the head rule below sits in that gap rather than eating it. */
body.apex-csd .csd-main > * { margin-block: var(--a-gap-move) }
body.apex-csd .csd-main > .csd-hero { margin-top: 0 }

/* main.css puts Source Serif 4 on every heading site-wide. The light system
   is Instrument Sans, so every heading here has to name its own family —
   inheriting from .csd-main is not enough against a direct h1/h2/h3 rule. */
/* The margin reset is split out with :where() so it scores (0,1,1) and any
   component that wants a heading margin wins. Left inside the rule below it
   scored (0,2,2) — two classes AND an element — and silently zeroed them. */
body.apex-csd :where(.csd-main :is(h1, h2, h3)) { margin: 0 }
body.apex-csd .csd-main :is(h1, h2, h3) {
    font-family: var(--csd-sans);
    color: var(--csd-ink);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.08;
    text-wrap: balance;
}
/* ⚠ This reset used to read `.csd-main p`, which scores (0,2,2) — two classes
   AND two elements — and so quietly beat every single-class component rule
   that set a paragraph margin: the hero note, the section eyebrows and the
   `.csd-head__intro > * + *` gap all measured 0 and the page read crammed.
   :where() drops the whole thing to the body class, so any component wins. */
body.apex-csd :where(.csd-main p) { margin: 0 }

/* ════ Shared vocabulary ════ */

body.apex-csd .csd-head {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    margin-bottom: clamp(4.4rem, 8vh, 6.6rem);
}
body.apex-csd .csd-head--solo { display: block }
/* one head rank. --solo ran 48.8px and the paired head 45.6, which is a
   difference nobody can name and everybody can see. */
body.apex-csd :is(.csd-head, .csd-head--solo) h2 { font-size: var(--a-t-head) }

body.apex-csd .csd-lead {
    font-size: var(--a-t-spoken);
    line-height: 1.66;
    color: var(--csd-body);
    text-wrap: pretty;
}
body.apex-csd .csd-head__intro > * + * { margin-top: 1.1rem }

/* buttons — square marks, never pills */
body.apex-csd .csd-btn {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .92rem 1.5rem;
    border: 1px solid transparent; border-radius: 12px;
    font: 600 .96rem/1 var(--csd-sans);
    text-decoration: none;
    cursor: pointer;
    transition: background .3s var(--csd-ease), color .3s var(--csd-ease),
                border-color .3s var(--csd-ease), box-shadow .3s var(--csd-ease),
                transform .3s var(--csd-ease);
}
body.apex-csd .csd-btn--solid {
    background: var(--csd-brand); border-color: var(--csd-brand); color: #fff;
    box-shadow: 0 2px 6px rgba(34, 69, 138, .26), 0 18px 34px -18px rgba(34, 69, 138, .7);
}
body.apex-csd .csd-btn--solid:hover {
    background: var(--csd-brand-deep); border-color: var(--csd-brand-deep);
    transform: translateY(-2px);
    box-shadow: var(--csd-lift-2);
}
body.apex-csd .csd-btn--quiet {
    background: #fff; border-color: var(--csd-line); color: var(--csd-ink);
}
body.apex-csd .csd-btn--quiet:hover { border-color: var(--csd-brand); color: var(--csd-brand) }
body.apex-csd .csd-btn__arw {
    width: 15px; height: 9px; flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M0 4.5h12.4M9 1l3.6 3.5L9 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M0 4.5h12.4M9 1l3.6 3.5L9 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .3s var(--csd-ease);
}
body.apex-csd .csd-btn:hover .csd-btn__arw { transform: translateX(3px) }

/* Pass 3, 2026-08-25: the captures are not the argument any more. `.csd-plate`
   (a full-bleed screenshot with a title bar), the guided magnifier and the
   trade-vocabulary table are all gone from this sheet — the first was a
   screenshot dump, and the other two argued from detail the user could not
   read on his own page. The only captures left are the five 220px screens in
   section 5, and they are described by what the business got back.
   Pass 2 is archived whole at _archive/csd-pass2-2026-08-25/. */

/* ════ Motion primitives (gated on html.csd-anim) ════ */

/* The first pass moved things 24px and faded them. Reading down the page you
   could not tell anything had happened, which is the same as no motion at all.
   Reveals now travel further, come out of a small blur, and settle over a
   longer curve; anything in a row also carries a stagger. */
html.csd-anim body.apex-csd [data-reveal] {
    opacity: 0;
    transform: translateY(var(--a-rev-y));
    filter: blur(var(--a-rev-blur));
    transition: opacity var(--a-rev-fade) var(--a-ease), transform var(--a-rev-move) var(--a-ease),
                filter var(--a-rev-fade) var(--a-ease);
    transition-delay: calc(var(--i, 0) * var(--a-rev-step));
}
html.csd-anim body.apex-csd [data-reveal].is-revealed {
    opacity: 1; transform: none; filter: none;
}

/* Section headings rule themselves off as they land. */
body.apex-csd .csd-head { position: relative }
body.apex-csd .csd-head::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: calc(-1 * clamp(1.8rem, 3.5vh, 2.8rem));
    height: 1px; background: var(--csd-hair);
    transform-origin: 0 50%;
}
html.csd-anim body.apex-csd .csd-head::after { transform: scaleX(0) }
html.csd-anim body.apex-csd .csd-head.is-ruled::after {
    transform: none;
    transition: transform 1.4s var(--csd-ease) .1s;
}

body.apex-csd .csd-word {
    display: inline-block; overflow: hidden; vertical-align: top;
    padding-bottom: .09em; margin-bottom: -.09em;
}
body.apex-csd .csd-word > span { display: inline-block }
html.csd-anim body.apex-csd [data-split].is-split .csd-word > span {
    transform: translateY(115%);
    transition: transform .82s var(--csd-ease);
    transition-delay: calc(var(--w, 0) * 42ms);
}
html.csd-anim body.apex-csd [data-split].is-split.is-revealed .csd-word > span { transform: none }

/* Drift: initDrift() writes --dy every frame from scroll position. Elements
   opt in with data-drift="<px at full travel>". Kept small on purpose; this
   is depth, not a ride. */
html.csd-anim body.apex-csd [data-drift] { will-change: transform }
html.csd-anim body.apex-csd [data-drift].is-drifting {
    transform: translate3d(0, var(--dy, 0px), 0);
}

/* ════ 1 · HERO ════ */

body.apex-csd .csd-hero { padding-top: var(--a-hero-pt) }
body.apex-csd .csd-hero__grid {
    display: grid;
    /* Site review R12 (27 Oct): the week figure in column 2 is gone, so the
       hero is one column: title, then the copy under it. */
    grid-template-columns: minmax(0, 1fr);
    /* min-content, not max-content: the figure in column 2 spans both rows, and
       a spanning item's height is distributed across the tracks it spans. With
       both tracks free to grow, that put a 93px hole between the title and the
       line under it, which `align-self: end` on the title used to paper over by
       pushing the title down instead. Row 1 is the title's own height now, so
       the pair stays tight and the title still opens at the site's first line. */
    grid-template-rows: min-content 1fr;
    gap: clamp(1.4rem, 2.6vh, 2rem) clamp(2rem, 5vw, 4.6rem);
    align-items: start;
    align-content: start;
}
body.apex-csd .csd-hero__title {
    grid-column: 1; grid-row: 1;
    font-size: var(--a-t-h1);
    line-height: 1.02;
    letter-spacing: -.032em;
}
/* The week runs taller than the title and the copy together, and the spare
   height was landing BETWEEN them as a 100px hole. Pinning one to the bottom
   of its row and the other to the top of the next closes it, and the left
   column ends up optically centred against the grid. */
/* Was `align-self: end`, which pinned the title to the bottom of its row and
   opened this page 93px below every other one. The hole it was closing was
   the row track being taller than the title; sizing the rows to their content
   closes it from the top instead. */
body.apex-csd .csd-hero__title { align-self: start }
body.apex-csd .csd-hero__aside { grid-column: 1; grid-row: 2; align-self: start }
body.apex-csd .csd-hero__lede {
    max-width: 36rem;
    font-size: var(--a-t-lede);
    line-height: 1.6;
    text-wrap: pretty;
}
body.apex-csd .csd-hero__acts {
    margin-top: clamp(1.5rem, 2.8vh, 2.1rem);
    display: flex; flex-wrap: wrap; gap: .85rem 1rem;
}
body.apex-csd .csd-hero__note {
    margin-top: 1.5rem;
    font-size: var(--a-t-mark); color: var(--csd-soft);
}
/* ── THE WEEK ──────────────────────────────────────────────────────────
   Forty blocks, five days of eight hours. The lit ones are the job that
   should not exist. Every block is a real button: click it and the year
   count follows, so the number on the page is the reader's own and the
   widget asserts nothing about anybody.

   The entrance is the page's opening argument in one gesture: the eight
   drain out of the week one at a time. */
body.apex-csd .csd-week {
    grid-column: 2; grid-row: 1 / span 2;
    align-self: center;
    margin: 0;
}
body.apex-csd .csd-week__cap {
    font-size: .95rem; color: var(--csd-soft);
    margin-bottom: 1.1rem;
}
body.apex-csd .csd-week__grid {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(.5rem, 1.1vw, .85rem);
}
body.apex-csd .csd-week__day { display: grid; gap: 5px }
body.apex-csd .csd-week__dayk {
    font-size: .7rem; font-weight: 600; letter-spacing: .06em;
    color: var(--csd-soft); margin-bottom: .3rem;
}
body.apex-csd .csd-week__blk {
    -webkit-appearance: none; appearance: none;
    /* 2:1 reads as an hour on a schedule. At 5/4 the forty blocks stood
       839px tall in the hero and pushed the whole first screen down. */
    display: block; width: 100%; aspect-ratio: 2 / 1; padding: 0;
    border: 0; border-radius: 3px;
    background: var(--csd-blk);
    cursor: pointer;
    transition: background .28s var(--csd-ease), transform .28s var(--csd-ease);
}
body.apex-csd .csd-week__blk:hover { transform: translateY(-2px) }
body.apex-csd .csd-week__blk:focus-visible { outline: var(--a-focus); outline-offset: var(--a-focus-off) }
/* the marked hours: hatched, hollow, visibly not doing anything */
body.apex-csd .csd-week__blk.is-gone {
    background:
        repeating-linear-gradient(135deg,
            var(--csd-no-soft) 0 3px, transparent 3px 6px),
        var(--csd-no-bg);
    box-shadow: 0 0 0 1px var(--csd-no-line) inset;
}
body.apex-csd .csd-week__out {
    margin-top: clamp(1.2rem, 2.4vh, 1.7rem);
    padding-top: clamp(1rem, 2vh, 1.4rem);
    border-top: 1px solid var(--csd-hair);
    font-size: 1.06rem; line-height: 1.6; color: var(--csd-body); text-wrap: pretty;
}
body.apex-csd .csd-week__out b {
    color: var(--csd-ink); font-weight: 600;
    font-variant-numeric: tabular-nums;
}
body.apex-csd .csd-week__out b[data-week-y] {
    font-size: 1.5em; letter-spacing: -.03em; color: var(--csd-brand);
}
body.apex-csd .csd-week__hint {
    margin-top: .75rem;
    font-size: .86rem; color: var(--csd-soft);
}
body.apex-csd .csd-week:not(.is-live) .csd-week__hint { visibility: hidden }
body.apex-csd .csd-week:not(.is-live) .csd-week__blk { cursor: default }

/* the drain: eight blocks empty out, one at a time, on arrival */
html.csd-anim body.apex-csd .csd-week.is-live .csd-week__blk.is-gone { background: var(--csd-blk); box-shadow: none }
html.csd-anim body.apex-csd .csd-week.is-live.is-drained .csd-week__blk.is-gone {
    background:
        repeating-linear-gradient(135deg,
            var(--csd-no-soft) 0 3px, transparent 3px 6px),
        var(--csd-no-bg);
    box-shadow: 0 0 0 1px var(--csd-no-line) inset;
    animation: csd-drain .5s var(--csd-ease) both;
    animation-delay: calc(var(--b, 0) * 90ms);
}
html.csd-anim body.apex-csd .csd-week.is-live.is-touched .csd-week__blk.is-gone { animation: none }
@keyframes csd-drain {
    0%   { transform: scale(1) }
    45%  { transform: scale(.7) }
    100% { transform: scale(1) }
}


/* ════ 2 · TYPE IT ONCE ════
   A quote with real fields, and the three real things it fills in. Each of the
   three is drawn as what it is, large enough to read. The list of four places
   before it is archived in _archive/csd-pre-loop-2026-11-04/. */
body.apex-csd .csd-once {
    margin-top: clamp(2.2rem, 4.5vh, 3.2rem);
    display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start;
}
body.apex-csd .csd-once__quote {
    padding: clamp(1.4rem, 2.6vw, 2rem);
    background: #fff; border: 1px solid var(--a-card-line); border-radius: var(--a-r);
    box-shadow: 0 30px 54px -26px rgba(16, 40, 92, .5);
}
body.apex-csd .csd-once__title { font-size: var(--a-t-sub); font-weight: 600; letter-spacing: -.02em; color: var(--csd-ink); margin-bottom: 1.1rem }
body.apex-csd .csd-once__quote label { display: block; margin-top: .85rem; font-size: .9rem; font-weight: 500; color: var(--csd-body) }
body.apex-csd .csd-once__quote input {
    display: block; width: 100%; margin-top: .35rem; padding: .72rem .85rem;
    font: 500 1.08rem/1.3 inherit; font-family: inherit; color: var(--csd-ink);
    background: #f7f9fd; border: 1px solid #cdd9ec; border-radius: 9px;
}
body.apex-csd .csd-once__quote input:focus { outline: 2px solid var(--a-brand); outline-offset: 1px; background: #fff }
body.apex-csd .csd-once__pen {
    margin-top: 1.25rem;
    font: 400 1.75rem/1.1 "Apex Hand", cursive; color: #1f5fd6;
}
body.apex-csd .csd-once__pen b { font-weight: 400; font-size: 1.2em }
body.apex-csd .csd-once__rest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem) }

/* the calendar: hours down the side, one booking across them */
body.apex-csd .csd-cal { background: #fff; border: 1px solid var(--a-card-line); border-radius: 12px; overflow: hidden; box-shadow: 0 18px 34px -24px rgba(16, 40, 92, .5) }
body.apex-csd .csd-cal__day { padding: .8rem 1rem; font-weight: 600; color: var(--csd-ink); border-bottom: 1px solid var(--csd-hair) }
body.apex-csd .csd-cal__hours { position: relative; padding-left: 3.6rem }
body.apex-csd .csd-cal__hours > p { position: relative; height: 2.5rem; margin: 0 0 0 -3.6rem; padding: .35rem 0 0 .8rem; font-size: .8rem; color: var(--csd-soft); border-bottom: 1px solid var(--csd-hair) }
body.apex-csd .csd-cal__hours > p:last-of-type { border-bottom: 0 }
body.apex-csd .csd-cal__event {
    position: absolute; left: 3.6rem; right: .7rem; top: 2.6rem; height: 4.8rem;
    padding: .55rem .7rem; border-radius: 7px; background: var(--a-brand); color: #fff;
    display: grid; align-content: start; gap: .1rem; font-size: .95rem; line-height: 1.3;
}
body.apex-csd .csd-cal__event > * { min-height: 1.3em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
body.apex-csd .csd-cal__event b { font-weight: 600 }

/* the invoice: paper, a little crooked */
body.apex-csd .csd-bill {
    padding: 1.2rem 1.25rem; background: #fff; border: 1px solid #e6ebf3;
    transform: rotate(1deg); box-shadow: 0 22px 34px -24px rgba(16, 40, 92, .55);
    align-self: center;
}
body.apex-csd .csd-bill__title { font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; color: var(--csd-ink) }
body.apex-csd .csd-bill__to { margin: .6rem 0 1.1rem; font-size: .84rem; color: var(--csd-soft); min-height: 2.8em }
body.apex-csd .csd-bill__to b { display: block; font-size: 1rem; font-weight: 500; color: var(--csd-ink) }
body.apex-csd .csd-bill__row { display: flex; justify-content: space-between; gap: 1rem; min-height: 2.5rem; padding: .55rem 0; font-size: .96rem; color: var(--csd-ink); border-top: 1px solid var(--csd-hair) }
body.apex-csd .csd-bill__row--total { border-top: 2px solid var(--csd-ink); font-weight: 600 }

/* the spreadsheet: a real grid, column letters and row numbers */
body.apex-csd .csd-grid { grid-column: 1 / -1; background: #fff; border: 1px solid var(--a-card-line); border-radius: 10px; overflow: hidden; box-shadow: 0 18px 34px -24px rgba(16, 40, 92, .5) }
body.apex-csd .csd-grid__bar { padding: .55rem .9rem; font-size: .9rem; font-weight: 600; color: var(--csd-ink); background: #eef1f6; border-bottom: 1px solid #d5dbe5 }
body.apex-csd .csd-grid__cells { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, .6fr); font-size: .96rem; color: var(--csd-ink) }
body.apex-csd .csd-grid__cells > * { min-height: 2.2rem; padding: .4rem .6rem; border-right: 1px solid #e2e6ee; border-bottom: 1px solid #e2e6ee; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
body.apex-csd .csd-grid__cells > i { font-style: normal; font-size: .82rem; text-align: center; color: var(--csd-soft); background: #f6f7fa }
body.apex-csd .csd-grid__cells > b { font-weight: 600 }
body.apex-csd .csd-grid__cells > *:nth-child(4n) { border-right: 0 }
body.apex-csd .csd-grid__cells > *:nth-last-child(-n + 4) { border-bottom: 0 }
@media (max-width: 960px) {
    body.apex-csd .csd-once { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 560px) {
    body.apex-csd .csd-once__rest { grid-template-columns: minmax(0, 1fr) }
    body.apex-csd .csd-bill { transform: rotate(.6deg) }
}

/* ════ 3 · THE TEN MINUTES, 4 · THE PAD and THE BOARD ════
   Replaced 6 Nov by the three widgets at the end of this sheet. The old rules
   are in _archive/csd-upgrade-2026-11-06/csd.css. */

/* ════ 5 · THE SWAP ════
   Each row turns over from Not long ago to Today as the reader crosses it.
   Scroll position is the only input. Both halves are in the DOM and both
   print with JS off. */

body.apex-csd .csd-swap {
    margin: clamp(2.4rem, 5vh, 3.4rem) 0 0;
    padding: clamp(1.4rem, 3vh, 2.2rem) clamp(1.6rem, 3vw, 2.4rem);
    background: var(--csd-card);
    border: 1px solid var(--a-card-line);
    border-radius: var(--a-r);
    box-shadow: var(--a-card-shadow);
}
body.apex-csd .csd-swap__row {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: .5rem clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.2rem, 2.6vh, 1.9rem) 0;
    border-top: 1px solid var(--csd-hair);
}
body.apex-csd .csd-swap__row:first-child { border-top: 0 }
body.apex-csd .csd-swap__row dt {
    font: 600 1.02rem/1.45 var(--csd-sans); color: var(--csd-ink);
    transition: color .4s var(--csd-ease);
}
body.apex-csd .csd-swap__row dd {
    margin: 0;
    font-size: 1.02rem; line-height: 1.6; text-wrap: pretty;
}
body.apex-csd .csd-swap__lab {
    display: block;
    font-size: .84rem; font-weight: 600; margin-bottom: .35rem;
}
body.apex-csd .csd-swap__then { color: var(--csd-soft) }
body.apex-csd .csd-swap__then .csd-swap__lab { color: var(--csd-soft) }
body.apex-csd .csd-swap__now { color: var(--csd-ink); margin-top: .9rem !important }
body.apex-csd .csd-swap__now .csd-swap__lab { color: var(--a-brand) }
/* live: the two answers share one cell and the row turns over on arrival */
body.apex-csd .csd-now.is-live .csd-swap__row { grid-template-rows: auto }
body.apex-csd .csd-now.is-live .csd-swap__row dd { grid-column: 2; grid-row: 1 }
body.apex-csd .csd-now.is-live .csd-swap__now { margin-top: 0 !important }
html.csd-anim body.apex-csd .csd-now.is-live .csd-swap__then,
html.csd-anim body.apex-csd .csd-now.is-live .csd-swap__now {
    transition: opacity .5s var(--csd-ease), transform .5s var(--csd-ease), filter .5s var(--csd-ease);
}
html.csd-anim body.apex-csd .csd-now.is-live .csd-swap__now { opacity: 0; transform: translateY(12px); filter: blur(4px) }
html.csd-anim body.apex-csd .csd-now.is-live .csd-swap__row.is-over .csd-swap__then { opacity: 0; transform: translateY(-12px); filter: blur(4px) }
html.csd-anim body.apex-csd .csd-now.is-live .csd-swap__row.is-over .csd-swap__now { opacity: 1; transform: none; filter: none }
html.csd-anim body.apex-csd .csd-now.is-live .csd-swap__row.is-over dt { color: var(--csd-brand) }

body.apex-csd .csd-now__claim {
    margin-top: clamp(2.4rem, 5vh, 3.4rem);
    max-width: 58rem;
    font-size: var(--a-t-sub); line-height: 1.34;
    color: var(--csd-ink); font-weight: 600; letter-spacing: -.022em;
    text-wrap: pretty;
}

/* ════ 7 · WHAT ONE LOOKS LIKE ════
   All five print with their own line. The five cells share four grid rows
   through subgrid so every hairline lands on the same baseline. */

/* THE SHELF. Five builds, one row each, the trade holding a column of its own
   so the eye reads down the trades and across the work. It carried five app
   screenshots until 2026-09-04; all five were fabrications with invented
   companies on them, so the words carry it now (see inc/csd-body.php).
   The trade drifts and the description reveals: NEVER both on one element,
   because [data-drift] and [data-reveal] each write transform and the reveal
   rule wins, leaving --dy updating on an element that never moves. */
body.apex-csd .csd-shelf {
    list-style: none;
    /* the head's rule IS this list's top rule, so close the gap the shared head
       margin leaves under it: 72px of margin against a 31px rule offset printed
       40px of blank between the rule and the first row's own padding */
    margin: calc(-1 * clamp(1.6rem, 3vh, 2.6rem)) 0 0;
    padding: 0;
    /* no border-top: .csd-head already draws the rule under the heading, and a
       second one 65px below it printed an empty band across the section */
}
body.apex-csd .csd-shelf__row {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2.8rem);
    align-items: baseline;
    padding: clamp(1.5rem, 3vw, 2.3rem) 0;
    border-bottom: 1px solid var(--csd-hair);
}
body.apex-csd .csd-shelf__trade {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--csd-ink);
    letter-spacing: -.015em;
    transform: translateY(var(--dy, 0px));
}
body.apex-csd .csd-shelf__built {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.45;
    color: var(--csd-ink);
    text-wrap: pretty;
}
body.apex-csd .csd-shelf__tell {
    font-size: .98rem;
    line-height: 1.6;
    color: var(--csd-body);
    text-wrap: pretty;
}

@media (max-width: 900px) {
    body.apex-csd .csd-shelf__row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1.4rem 2rem }
    body.apex-csd .csd-shelf__tell { grid-column: 2 }
}

/* ════ 8 · HOW IT STARTS ════ */

body.apex-csd .csd-start__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.6rem, 3.5vw, 3rem) clamp(2rem, 5vw, 4rem);
}
/* the four items open with their own rules, so the head's would be a second
   rule with nothing between the two */
body.apex-csd .csd-start .csd-head::after { display: none }
body.apex-csd .csd-start__item { padding-top: 1.2rem; border-top: 1px solid var(--csd-line) }
body.apex-csd .csd-start__item.is-common { border-top-color: var(--csd-brand) }
body.apex-csd .csd-start__item.is-common h3 { color: var(--csd-brand-deep) }
body.apex-csd .csd-start__item h3 { font-size: var(--a-t-sub); margin-bottom: .7rem }
body.apex-csd .csd-start__item p {
    font-size: 1.01rem; line-height: 1.62; color: var(--csd-body); text-wrap: pretty;
}

/* ════ 9 · WHO WRITES IT ════ */

body.apex-csd .csd-who__grid {
    display: grid;
    /* a fixed portrait column, not a fraction: at .58fr the picture grew to
       515px tall beside 280px of copy and opened a 200px void underneath */
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.8rem, 4vw, 3.6rem);
    align-items: stretch;
}
body.apex-csd .csd-who__media { margin: 0 }
body.apex-csd .csd-who__media img {
    display: block; width: 100%; height: auto;
    border-radius: var(--csd-r);
    box-shadow: var(--csd-lift);
}
/* the short column holds its own foot, or a void opens beside the portrait */
body.apex-csd .csd-who__side {
    display: grid; align-content: space-between;
    gap: 1.6rem;
    padding-block: clamp(.5rem, 2vh, 1.6rem);
}
body.apex-csd .csd-who__body h2 {
    font-size: var(--a-t-head);
    margin-bottom: 1.15rem;
}
body.apex-csd .csd-who__body p {
    max-width: 72ch;
    font-size: 1.02rem; line-height: 1.66; text-wrap: pretty;
}
body.apex-csd .csd-who__body p + p { margin-top: 1.05rem }
body.apex-csd .csd-who__say p { font-size: var(--a-t-spoken); line-height: 1.6; max-width: 56ch }
body.apex-csd .csd-who__say p + p { margin-top: 1.05rem }
@media (min-width: 861px) {
    body.apex-csd .csd-who__body { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: clamp(2.4rem, 5vw, 5rem); align-items: start }
    body.apex-csd .csd-who__body h2 { margin: 0 }
}

/* ════ 10 · QUESTIONS ════ */

/* The head is capped to the component's own measure so its rule is the list's
   top edge. Uncapped it ran the full 1200px shell over an 864px list and left
   335px of rule with nothing under it, which is not what the approved pilot
   looks like: AI Consulting's column is narrower than the cap, so there the
   rule and the rows have always been the same width. */
body.apex-csd .csd-faq .csd-head {
    margin-bottom: clamp(2.2rem, 4vh, 3.2rem);
    max-width: 54rem;
}
/* and the capped column is centred in the 1200px shell rather than parked
   against the left edge with 680px of white beside it. Text inside stays left;
   it is the block that moves. */
body.apex-csd .csd-faq .csd-head,
body.apex-csd .csd-faq .apex-faq { margin-inline: auto }
/* ── One FAQ, site-wide (critique item 1a). The rows, the summary type, the
   marker and the open/close motion all live in apex-faq.css now; what stayed
   here is this page's palette and the layout around the list. Same plus/minus mark; its csd-open keyframes went with it ── */
body.apex-csd .apex-faq {
    --faq-line:   var(--csd-hair);
    --faq-ink:    var(--csd-ink);
    --faq-body:   var(--csd-body);
    --faq-accent: var(--csd-brand);
}
/* The section head above draws its own hairline (.csd-head::after, 1200px wide).
   The component's first row draws one too, so the two stacked 30px apart at
   two different widths and read as a mistake. The head's rule is the one that
   belongs to the section, so the list's top row gives its up. */
body.apex-csd .apex-faq__item:first-child { border-top: 0 }
/* the questions sit beside their heading, on the shell's edge */
@media (min-width: 981px) {
    body.apex-csd .csd-faq .csd-shell { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: clamp(2.4rem, 5vw, 5rem); align-items: start }
    body.apex-csd .csd-faq .csd-head { display: block; margin: 0; max-width: none; position: sticky; top: 6.5rem }
    body.apex-csd .csd-faq .apex-faq { margin: 0; max-width: none; width: 100% }
}

/* ════ 11 · THE CLOSE ════ */

/* Site review R6 (27 Oct): the centred band read as one template on every
   page. The close sits on the page's left edge under a hairline: one heading,
   one line, one button, and the email as a plain link. */
body.apex-csd .csd-close__in {
    max-width: 44rem;
    border-top: 1px solid var(--csd-hair);
    padding-top: clamp(2.4rem, 5vh, 3.4rem);
}
body.apex-csd .csd-close__mail {
    align-self: center;
    font-weight: 600; color: var(--a-brand, #22458a);
    text-underline-offset: .18em;
}
body.apex-csd .csd-close h2 { font-size: var(--a-t-close) }
body.apex-csd .csd-close__lede {
    margin-top: 1.2rem;
    font-size: var(--a-t-lede); line-height: 1.6;
    text-wrap: pretty;
}
body.apex-csd .csd-close__acts {
    margin-top: clamp(1.8rem, 3.4vh, 2.5rem);
    display: flex; flex-wrap: wrap; gap: .85rem 1rem;
}
body.apex-csd .csd-relnav {
    margin-top: clamp(3.5rem, 7vh, 5.5rem);
    padding-top: 1.6rem;
    border-top: 1px solid var(--csd-hair);
    display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 2rem;
}
body.apex-csd .csd-relnav a {
    font: 600 var(--a-t-btn)/1 var(--csd-sans); color: var(--csd-brand); text-decoration: none;
    transition: color .25s var(--csd-ease);
}
body.apex-csd .csd-relnav a:hover { color: var(--csd-ink) }

/* ════ Footer landing ════
   The close hands straight to the ice shelf, faded out of white. */

body.apex-csd .nx-footer {
    position: relative;
    background: linear-gradient(to bottom, var(--footer-fade, #fff) 0, var(--footer-fade, #fff) 4px, #02122f 4px); /* the top 4px match the page, so a fractional footer edge never shows a grey seam */
    padding-top: 0;
    overflow: hidden;
}
body.apex-csd .nx-footer__ridge { display: none }
body.apex-csd .nx-footer::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 2172 / 374;
    /* the top of the shelf dissolves into the page above (Lachlan, 29 Oct:
       the hard top edge read as cut off); the ledge and icicles stay crisp */
    background:
        linear-gradient(to bottom, var(--footer-fade, #fff) 0%, var(--footer-fade, #fff) 4%, rgba(255, 255, 255, 0) 55%) top center / 100% 100% no-repeat,
        url("../media/fx/fx-ice-shelf.webp") top center / 100% auto no-repeat;
}

/* ════ Responsive ════ */

@media (max-width: 1080px) {
    body.apex-csd .csd-head { grid-template-columns: minmax(0, 1fr); gap: 1.4rem }
}


@media (max-width: 940px) {
    /* four columns of a record stop being readable long before the page does */
    /* two per row, and the odd one out runs full width as a closing shot */
}

@media (max-width: 900px) {
    body.apex-csd .csd-hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2.4rem, 5vh, 3.4rem) }
    body.apex-csd .csd-hero__title { align-self: start }
    body.apex-csd .csd-hero__title { grid-column: 1; grid-row: 1 }
    body.apex-csd .csd-hero__aside { grid-column: 1; grid-row: 2 }
    body.apex-csd .csd-week { grid-column: 1; grid-row: 3 }
    body.apex-csd .csd-start__list { grid-template-columns: minmax(0, 1fr) }
    body.apex-csd .csd-swap__row { grid-template-columns: minmax(0, 1fr); gap: .6rem }
    body.apex-csd .csd-now.is-live .csd-swap__row dd { grid-column: 1; grid-row: 2 }
}

@media (max-width: 860px) {
    body.apex-csd .csd-who__grid { grid-template-columns: minmax(0, 1fr) }
    body.apex-csd .csd-who__media { max-width: 20rem }
}

@media (max-width: 640px) {
    body.apex-csd .csd-week__grid { gap: .4rem }
}

@media (max-width: 560px) {
    body.apex-csd .csd-shelf__row { grid-template-columns: minmax(0, 1fr); gap: .5rem }
    /* ★ and release the tell from column 2. The 900px rule parks it there, and
       a grid-column: 2 inside a one-track grid does not wrap: it opens an
       implicit second track, which took the whole width and crushed the trade
       to nothing ("Concrete plant" wrapped in 359px of clear space). */
    body.apex-csd .csd-shelf__tell { grid-column: auto }
}

@media (prefers-reduced-motion: reduce) {
    body.apex-csd *,
    body.apex-csd *::before,
    body.apex-csd *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ── The shared hero ridge (apex-ridge.css + inc/parts/hero-ridge.php).
   The scene sits on a negative layer, so the hero has to be its own stacking
   context or that layer falls behind the page instead of behind the copy. This
   line is the whole integration, and nothing in the hero needs a z-index of its
   own: every child, positioned or static, keeps the order it already had. ── */
body.apex-csd .csd-hero { position: relative; isolation: isolate }


/* ════ 6 Nov · THE THREE WIDGETS ════
   Lachlan's model is the Services custom software widget: one object the reader
   knows on sight, their problem beside the result, one short pen note. These are
   that idea at full size, and each one works when you touch it. */

body:is(.apex-csd, .apex-svc) :is(.csd-bw, .csd-cw, .csd-wish) {
    --hand: "Apex Hand", "Bradley Hand", "Segoe Print", cursive;
    --pen: #1f5fd6;
    --red: #cf2a27;
    font-size: 15px; line-height: 1.35; color: #16233f;
}
body:is(.apex-csd, .apex-svc) :where(.csd-bw, .csd-cw, .csd-wish) :is(p, i, em) { margin: 0; font-style: normal }
body:is(.apex-csd, .apex-svc) :where(.csd-bw, .csd-cw, .csd-wish) button { font: inherit; color: inherit; text-align: inherit }

/* ── the spreadsheet and the system ── */
body:is(.apex-csd, .apex-svc) .csd-bw {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(1.4rem, 3.4vw, 3.4rem);
    align-items: start;
}
body:is(.apex-csd, .apex-svc) .csd-xl {
    grid-column: 1; grid-row: 1;
    margin-top: 1.4em;
    background: #fff;
    border: 1px solid #d5deea;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 22px 36px -24px rgba(16, 40, 92, .45);
    transform: rotate(-1.4deg);
    font-size: .9em;
}
body:is(.apex-csd, .apex-svc) .csd-xl__name { padding: .65em .9em; background: #1d6b41; color: #fff; font-weight: 600 }
body:is(.apex-csd, .apex-svc) .csd-xl__grid { display: grid; grid-template-columns: 2.2em .9fr 1.25fr 1fr .7fr 1fr 1.1fr }
body:is(.apex-csd, .apex-svc) .csd-xl__grid i { min-width: 0; min-height: 2.1em; padding: .42em .5em; border-top: 1px solid #e3e8ef; border-left: 1px solid #e3e8ef; white-space: nowrap; overflow: hidden; text-overflow: clip }
body:is(.apex-csd, .apex-svc) .csd-xl__grid :is(i.is-corner, i.is-col, i.is-row) { background: #f1f3f6; color: #6b7686; font-size: .86em; text-align: center }
body:is(.apex-csd, .apex-svc) .csd-xl__grid i.is-head { font-weight: 600 }
body:is(.apex-csd, .apex-svc) .csd-xl__grid i.is-bad { color: #a0312a; font-weight: 600 }
body:is(.apex-csd, .apex-svc) .csd-xl__grid i.is-yell { background: #fff27a; font-weight: 600; overflow: visible }
body:is(.apex-csd, .apex-svc) .csd-xl__tabs { display: flex; gap: 0; overflow: hidden; background: #f1f3f6; border-top: 1px solid #d5deea; font-size: .86em; white-space: nowrap }
body:is(.apex-csd, .apex-svc) .csd-xl__tabs :is(span, b) { padding: .5em .8em; border-right: 1px solid #d5deea; color: #6b7686 }
body:is(.apex-csd, .apex-svc) .csd-xl__tabs b { background: #fff; color: #1d6b41; font-weight: 600 }
body:is(.apex-csd, .apex-svc) .csd-bw__pen { font: 400 1.75em/1.1 var(--hand); color: var(--pen); text-wrap: balance }
body:is(.apex-csd, .apex-svc) :is(.csd-main, .svc-main) .csd-bw__pen--was { grid-column: 1; grid-row: 2; margin: .9em 0 0 1.2em; transform: rotate(-1deg) }
body:is(.apex-csd, .apex-svc) :is(.csd-main, .svc-main) .csd-bw__pen--now { grid-column: 2; grid-row: 2; margin: .7em 0 0 .4em }

body:is(.apex-csd, .apex-svc) .csd-app {
    grid-column: 2; grid-row: 1;
    position: relative;
    background: #fff;
    border: 1px solid #c9d8f2;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 34px 60px -28px rgba(16, 40, 92, .55), 0 2px 6px rgba(10, 23, 48, .08);
}
body:is(.apex-csd, .apex-svc) .csd-app__bar { display: flex; justify-content: space-between; align-items: center; padding: .75em 1.1em; background: var(--a-brand, #22458a); color: #fff }
body:is(.apex-csd, .apex-svc) .csd-app__bar b { font-weight: 600 }
body:is(.apex-csd, .apex-svc) .csd-app__bar i { font-size: .92em; opacity: .85 }
body:is(.apex-csd, .apex-svc) .csd-app__body { display: grid; grid-template-columns: 8.4em minmax(0, 1fr) }
body:is(.apex-csd, .apex-svc) .csd-app__nav { display: grid; align-content: start; gap: .2em; padding: .8em .5em; background: #f4f7fc }
body:is(.apex-csd, .apex-svc) .csd-app__nav button {
    display: flex; justify-content: space-between; align-items: center; gap: .4em;
    min-height: 2.6em; padding: 0 .7em;
    border: 0; border-radius: 7px; background: none; color: #4d5c77; cursor: pointer;
}
body:is(.apex-csd, .apex-svc) .csd-app__nav button:disabled { cursor: default }
body:is(.apex-csd, .apex-svc) .csd-app__nav button[aria-pressed="true"] { font-weight: 600; color: var(--pen); background: #e4edfd }
body:is(.apex-csd, .apex-svc) .csd-app__nav button:not(:disabled):hover { color: var(--pen) }
body:is(.apex-csd, .apex-svc) .csd-app__nav button:focus-visible { outline: 2px solid var(--pen); outline-offset: 1px }
body:is(.apex-csd, .apex-svc) .csd-app__nav em { min-width: 1.5em; padding: .1em .4em; border-radius: 99px; background: var(--red); color: #fff; font-size: .8em; font-weight: 600; text-align: center }
body:is(.apex-csd, .apex-svc) .csd-app__nav em[hidden] { display: none }
body:is(.apex-csd, .apex-svc) .csd-app__main { position: relative; display: grid; align-content: start; min-width: 0; min-height: 25.5em; padding: .9em 1em 1em }
body:is(.apex-csd, .apex-svc) .csd-app__screen[hidden] { display: none }
body:is(.apex-csd, .apex-svc) .csd-app__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3em 1em }
body:is(.apex-csd, .apex-svc) .csd-app__top b { font-size: 1.2em; font-weight: 600 }
body:is(.apex-csd, .apex-svc) .csd-app__top span { font-size: .88em; color: #66748c }
body:is(.apex-csd, .apex-svc) .csd-app__board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; margin-top: .8em }
body:is(.apex-csd, .apex-svc) .csd-app__col { display: grid; align-content: start; gap: .45em; min-height: 13.5em; padding: .5em; background: #f4f7fc; border-radius: 9px; transition: background-color .2s var(--csd-ease), box-shadow .2s var(--csd-ease) }
body:is(.apex-csd, .apex-svc) .csd-app__col.is-over { background: #e4edfd; box-shadow: inset 0 0 0 2px var(--pen) }
body:is(.apex-csd, .apex-svc) .csd-app__col > p { padding: .1em .2em; font-size: .9em; font-weight: 600; color: #4d5c77 }
body:is(.apex-csd, .apex-svc) .csd-app__card {
    display: grid; gap: .1em;
    width: 100%; padding: .55em .65em;
    background: #fff; border: 1px solid #dfe8f5; border-radius: 7px;
    box-shadow: 0 1px 2px rgba(10, 23, 48, .06);
    line-height: 1.3; color: #4d5c77;
    touch-action: none; user-select: none; -webkit-user-select: none;
}
body:is(.apex-csd, .apex-svc) .csd-app.is-live .csd-app__card { cursor: grab }
body:is(.apex-csd, .apex-svc) .csd-app__card:disabled { cursor: default }
body:is(.apex-csd, .apex-svc) .csd-app__card:focus-visible { outline: 2px solid var(--pen); outline-offset: 1px }
body:is(.apex-csd, .apex-svc) .csd-app__card b { font-weight: 600; color: #16233f }
body:is(.apex-csd, .apex-svc) .csd-app__meta { display: flex; justify-content: space-between; gap: .5em; font-size: .9em }
body:is(.apex-csd, .apex-svc) .csd-app__meta i { color: #8794aa }
body:is(.apex-csd, .apex-svc) .csd-app__card.is-lifted { position: relative; z-index: 5; cursor: grabbing; box-shadow: 0 18px 28px -10px rgba(16, 40, 92, .5); rotate: 2deg; pointer-events: none }
body:is(.apex-csd, .apex-svc) .csd-app__card.is-new { animation: csd-card-in .6s var(--csd-ease) }
@keyframes csd-card-in { from { background: #e4edfd; border-color: var(--pen) } }
/* the hint that moves itself once, so a reader who never touches it sees a job go across */
body:is(.apex-csd, .apex-svc) .csd-app__card.is-nudge { animation: csd-nudge 1.4s var(--csd-ease) 2 }
@keyframes csd-nudge { 0%, 100% { translate: 0 0; rotate: 0deg } 30%, 60% { translate: .5em -.2em; rotate: 1.5deg } }
body:is(.apex-csd, .apex-svc) .csd-app__note {
    margin-top: .9em; padding: .7em .85em;
    background: #eef4fe; border: 1px solid #c9d8f2; border-radius: 9px;
    color: #16233f;
}
body:is(.apex-csd, .apex-svc) .csd-app__note[hidden] { display: none }
body:is(.apex-csd, .apex-svc) .csd-app__note b { color: var(--pen); font-weight: 600 }
html:is(.csd-anim, .svc-anim) body:is(.apex-csd, .apex-svc) .csd-app__note.is-fresh { animation: csd-note-in .45s var(--csd-ease) }
@keyframes csd-note-in { from { opacity: 0; translate: 0 .5em } }
body:is(.apex-csd, .apex-svc) .csd-app__list { display: grid; margin-top: .8em; border: 1px solid #e3eaf5; border-radius: 9px; overflow: hidden }
body:is(.apex-csd, .apex-svc) .csd-app__list p { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr); gap: .8em; align-items: center; padding: .65em .85em; border-top: 1px solid #e3eaf5 }
body:is(.apex-csd, .apex-svc) .csd-app__list p:first-child { border-top: 0 }
body:is(.apex-csd, .apex-svc) .csd-app__list b { font-weight: 600; color: #16233f }
body:is(.apex-csd, .apex-svc) .csd-app__list span { color: #4d5c77; font-size: .94em }
body:is(.apex-csd, .apex-svc) .csd-app__list em { justify-self: end; padding: .15em .55em; border-radius: 6px; background: #f1f4f9; color: #4d5c77; font-size: .86em; font-weight: 500 }
body:is(.apex-csd, .apex-svc) .csd-app__list em.is-go { background: #e4edfd; color: var(--pen) }
body:is(.apex-csd, .apex-svc) .csd-app__list p.is-new { animation: csd-card-in .8s var(--csd-ease) }

/* ── the clips ── */
body:is(.apex-csd, .apex-svc) .csd-cw {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(1.6rem, 4vw, 4rem);
    row-gap: clamp(1.6rem, 3.4vh, 2.4rem);
    align-items: center;
}
body:is(.apex-csd, .apex-svc) .csd-cw__desk { position: relative; width: fit-content; max-width: 100%; display: flex; align-items: flex-end; gap: clamp(1rem, 2.4vw, 2.2rem); padding-top: 3.4em }
body:is(.apex-csd, .apex-svc) .csd-cw__tray { display: flex; gap: .8em }
body:is(.apex-csd, .apex-svc) .csd-clip {
    display: grid; gap: .45em; width: 8.8em;
    padding: 0; border: 0; background: none;
    touch-action: none; user-select: none; -webkit-user-select: none;
    transition: opacity .3s var(--csd-ease), filter .3s var(--csd-ease);
}
body:is(.apex-csd, .apex-svc) .csd-cw.is-live .csd-clip { cursor: grab }
body:is(.apex-csd, .apex-svc) .csd-clip:disabled { cursor: default }
body:is(.apex-csd, .apex-svc) .csd-clip:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; border-radius: 8px }
body:is(.apex-csd, .apex-svc) .csd-clip__pic { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: #c9d3e0; box-shadow: 0 14px 24px -14px rgba(16, 40, 92, .6) }
body:is(.apex-csd, .apex-svc) .csd-clip__pic img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; user-select: none }
/* a real mouse press on a picture starts the browser's own image drag, which cancels ours */
body:is(.apex-csd, .apex-svc) :is(.csd-clip, .csd-app__card) { -webkit-user-drag: none }
body:is(.apex-csd, .apex-svc) .csd-clip__pic i { position: absolute; right: .4em; bottom: .4em; padding: .1em .4em; border-radius: 4px; background: rgba(8, 16, 34, .72); color: #fff; font-size: .78em; font-weight: 600 }
body:is(.apex-csd, .apex-svc) .csd-clip__name { font-size: .84em; font-weight: 500; text-align: center; color: #4d5c77 }
body:is(.apex-csd, .apex-svc) .csd-clip.is-lifted { position: relative; z-index: 6; pointer-events: none; rotate: -3deg; filter: drop-shadow(0 18px 18px rgba(16, 40, 92, .35)) }
body:is(.apex-csd, .apex-svc) .csd-clip.is-used { opacity: .35; filter: grayscale(1) }
body:is(.apex-csd, .apex-svc) .csd-clip.is-nudge { animation: csd-nudge 1.4s var(--csd-ease) 2 }
body:is(.apex-csd, .apex-svc) .csd-cw__folder { position: relative; display: grid; justify-items: center; gap: .3em; width: 11em; padding: .6em .4em .4em; border-radius: 12px; transition: background-color .2s var(--csd-ease) }
body:is(.apex-csd, .apex-svc) .csd-cw__folder svg { width: 8.8em; height: auto; overflow: visible }
body:is(.apex-csd, .apex-svc) .csd-cw__back { fill: #4f80dc }
body:is(.apex-csd, .apex-svc) .csd-cw__front { fill: #78a2ee; transform-origin: 50% 100%; transition: transform .3s var(--csd-ease) }
body:is(.apex-csd, .apex-svc) .csd-cw__folder.is-over { background: #e4edfd }
body:is(.apex-csd, .apex-svc) .csd-cw__folder.is-over .csd-cw__front,
body:is(.apex-csd, .apex-svc) .csd-cw__folder.is-busy .csd-cw__front { transform: skewX(-10deg) scaleY(.9) }
body:is(.apex-csd, .apex-svc) .csd-cw__folder b { font-weight: 600 }
body:is(.apex-csd, .apex-svc) .csd-cw__status { min-height: 1.3em; font-size: .86em; color: #66748c; text-align: center }
body:is(.apex-csd, .apex-svc) .csd-cw__pen { font: 400 1.75em/1.1 var(--hand); color: var(--pen) }
body:is(.apex-csd, .apex-svc) :is(.csd-main, .svc-main) .csd-cw__pen--drag { position: absolute; top: 0; right: -.6em; white-space: nowrap; transform: rotate(-2deg) }
body:is(.apex-csd, .apex-svc) :is(.csd-main, .svc-main) .csd-cw__pen--then { margin: 0 0 .35em 1em }
html:is(.csd-anim, .svc-anim) body:is(.apex-csd, .apex-svc) .csd-cw.is-live .csd-cw__pen--then { opacity: 0; transition: opacity .4s var(--csd-ease) }
html:is(.csd-anim, .svc-anim) body:is(.apex-csd, .apex-svc) .csd-cw.is-live.has-out .csd-cw__pen--then { opacity: 1 }

body:is(.apex-csd, .apex-svc) .csd-pad__sheet {
    --line: 2.35rem;
    padding: calc(1em + 14px) clamp(1em, 2.4vw, 1.8em) 1.2em;
    background: #fff repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), #c9d8ee calc(var(--line) - 1px), #c9d8ee var(--line));
    background-position: 0 calc(.9em + 14px);
    border: 1px solid #e6ebf3;
    transform: rotate(1.2deg);
    box-shadow: inset 0 14px 0 #22458a, 0 30px 50px -28px rgba(16, 40, 92, .6);
}
body:is(.apex-csd, .apex-svc) .csd-pad__title { font: 400 1.9em/var(--line) var(--hand); color: #16233f }
body:is(.apex-csd, .apex-svc) .csd-pad__steps { list-style: none; margin: 0; padding: 0 }
body:is(.apex-csd, .apex-svc) .csd-pad__steps li { font: 400 1.5em/var(--line) var(--hand); color: var(--pen); white-space: nowrap }
body:is(.apex-csd, .apex-svc) .csd-pad__steps span { position: relative; display: inline-block }
body:is(.apex-csd, .apex-svc) .csd-pad__steps svg { position: absolute; left: -.3rem; top: 36%; width: calc(100% + .6rem); height: .5rem; overflow: visible; fill: none }
/* a wipe, not a dash: a dash set in pathLength breaks once the stroke is non-scaling */
body:is(.apex-csd, .apex-svc) .csd-pad__steps path { stroke: var(--red); stroke-width: 2.4px; vector-effect: non-scaling-stroke; stroke-linecap: round }
body:is(.apex-csd, .apex-svc) .csd-cw.is-live .csd-pad__steps svg { clip-path: inset(-60% 100% -60% -2%); transition: clip-path .45s var(--csd-ease) }
body:is(.apex-csd, .apex-svc) .csd-cw.is-live .csd-pad__steps li.is-struck svg { clip-path: inset(-60% -2% -60% -2%) }

body:is(.apex-csd, .apex-svc) .csd-cw__out { grid-column: 1 / -1; min-width: 0 }
body:is(.apex-csd, .apex-svc) .csd-ss { background: #fff; border: 1px solid #d5deea; border-radius: 10px; overflow: hidden; box-shadow: 0 26px 44px -24px rgba(16, 40, 92, .4) }
body:is(.apex-csd, .apex-svc) .csd-ss__name { padding: .6em .9em; background: #1d6b41; color: #fff; font-weight: 600 }
body:is(.apex-csd, .apex-svc) .csd-ss__scroll { overflow-x: auto; overscroll-behavior-x: contain }
body:is(.apex-csd, .apex-svc) .csd-ss__table { width: 100%; min-width: 66rem; table-layout: fixed; border-collapse: collapse; font-size: .92em }
body:is(.apex-csd, .apex-svc) .csd-ss__table th:nth-child(1) { width: 15% }
body:is(.apex-csd, .apex-svc) .csd-ss__table th:nth-child(2) { width: 10% }
body:is(.apex-csd, .apex-svc) .csd-ss__table th:nth-child(3) { width: 23% }
body:is(.apex-csd, .apex-svc) .csd-ss__table th:nth-child(4) { width: 15% }
body:is(.apex-csd, .apex-svc) .csd-ss__table th:nth-child(5) { width: 21% }
body:is(.apex-csd, .apex-svc) .csd-ss__table :is(th, td) { padding: .6em .7em; border-top: 1px solid #e3e8ef; border-left: 1px solid #e3e8ef; text-align: left; vertical-align: top; overflow-wrap: anywhere }
body:is(.apex-csd, .apex-svc) .csd-ss__table :is(th, td):first-child { border-left: 0 }
body:is(.apex-csd, .apex-svc) .csd-ss__table th { background: #f1f3f6; font-weight: 600; color: #16233f }
body:is(.apex-csd, .apex-svc) .csd-ss__table td { height: 4.6em; color: #2b3954; transition: color .25s var(--csd-ease), background-color .6s var(--csd-ease) }
body:is(.apex-csd, .apex-svc) .csd-cw.is-live .csd-ss__table td.is-empty { color: transparent }
body:is(.apex-csd, .apex-svc) .csd-cw.is-live .csd-ss__table td.is-hot { background: #e4edfd }

/* ── the things owners say ── */
body.apex-csd .csd-wish {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 5vw, 4.4rem);
    align-items: start;
}
body.apex-csd .csd-wish__ask { font: 400 1.9em/1.1 var(--hand); color: var(--pen) }
body.apex-csd .csd-wish__pile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.2rem); margin-top: 1em }
body.apex-csd .csd-sticky {
    position: relative; display: flex; align-items: center;
    min-height: 5.4em; padding: .7em .8em;
    font: 400 1.62em/1.18 var(--hand); color: #16233f;
    background: #fdf1a8; border: 0; border-radius: 2px;
    transform: rotate(var(--r));
    box-shadow: 0 16px 22px -16px rgba(60, 50, 10, .55);
    transition: transform .3s var(--csd-ease), box-shadow .3s var(--csd-ease), background-color .3s var(--csd-ease);
}
body.apex-csd .csd-wish.is-live .csd-sticky { cursor: pointer }
body.apex-csd .csd-wish.is-live .csd-sticky:not(.is-on) { background: #fbf3c6 }
body.apex-csd .csd-wish.is-live .csd-sticky:not(.is-on):hover { transform: rotate(0deg) translateY(-3px) }
body.apex-csd .csd-sticky:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px }
body.apex-csd .csd-sticky.is-on { z-index: 1; background: #fde97a; transform: rotate(var(--r)) translateY(-5px) scale(1.04); box-shadow: 0 26px 30px -18px rgba(60, 50, 10, .7), 0 0 0 2px var(--pen) }
body.apex-csd .csd-wish__built { display: grid }
body.apex-csd .csd-wish__set { margin: 0 }
body.apex-csd .csd-wish.is-live .csd-wish__set { grid-area: 1 / 1; transition: opacity .35s var(--csd-ease), translate .35s var(--csd-ease), visibility 0s linear 0s }
body.apex-csd .csd-wish.is-live .csd-wish__set[data-off] { opacity: 0; translate: 0 .6em; visibility: hidden; transition: opacity .2s var(--csd-ease), translate .2s var(--csd-ease), visibility 0s linear .2s }
body.apex-csd .csd-wish:not(.is-live) .csd-wish__set + .csd-wish__set { margin-top: 2.4em }
body.apex-csd .csd-wish__pen { margin-bottom: .7em; font: 400 1.6em/1.15 var(--hand); color: var(--pen); text-wrap: balance }

body.apex-csd .csd-scr { max-width: 34em; background: #fff; border: 1px solid #c9d8f2; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 54px -28px rgba(16, 40, 92, .55), 0 2px 6px rgba(10, 23, 48, .08) }
body.apex-csd .csd-scr--narrow { max-width: 24em }
body.apex-csd .csd-scr__bar { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .75em 1.1em; background: var(--a-brand, #22458a); color: #fff }
body.apex-csd .csd-scr__bar b { font-weight: 600 }
body.apex-csd .csd-scr__bar i { font-size: .9em; opacity: .85 }
body.apex-csd .csd-scr__in { display: grid; gap: .6em; padding: 1.1em }
body.apex-csd .csd-scr__field { display: flex; justify-content: space-between; gap: 1em; padding: .55em .75em; background: #f4f7fc; border-radius: 7px }
body.apex-csd .csd-scr__field span { color: #66748c }
body.apex-csd .csd-scr__field b { font-weight: 600 }
body.apex-csd .csd-scr__big { margin-top: .3em; font-size: 2.4em; font-weight: 600; letter-spacing: -.02em; line-height: 1 }
body.apex-csd .csd-scr__small { font-size: .9em; color: #66748c }
body.apex-csd .csd-scr__btn { justify-self: start; margin-top: .3em; padding: .6em 1em; border-radius: 8px; background: var(--pen); color: #fff; font-weight: 600 }
body.apex-csd .csd-scr__btn--quiet { background: #fff; color: var(--pen); border: 1px solid var(--pen) }
body.apex-csd button.csd-scr__btn { font: inherit; font-weight: 600; cursor: pointer }
body.apex-csd button.csd-scr__btn:not(.csd-scr__btn--quiet) { border: 0 }
body.apex-csd button.csd-scr__btn:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px }
body.apex-csd button.csd-scr__btn:disabled { cursor: default; opacity: .7 }
body.apex-csd .csd-scr__track { list-style: none; margin: 0; padding: 0 }
body.apex-csd .csd-scr__track li { position: relative; padding: 0 0 1.1em 1.9em; color: #66748c }
body.apex-csd .csd-scr__track li::before { content: ""; position: absolute; left: .3em; top: .3em; width: .75em; height: .75em; border-radius: 50%; background: #fff; border: 2px solid #c3cfe2 }
body.apex-csd .csd-scr__track li::after { content: ""; position: absolute; left: calc(.3em + .375em + 1px - 1px); top: 1.2em; bottom: .05em; width: 2px; background: #dfe6f1 }
body.apex-csd .csd-scr__track li:last-child { padding-bottom: 0 }
body.apex-csd .csd-scr__track li:last-child::after { display: none }
body.apex-csd .csd-scr__track li.is-past::before { background: var(--pen); border-color: var(--pen) }
body.apex-csd .csd-scr__track li.is-past::after { background: var(--pen) }
body.apex-csd .csd-scr__track li.is-now::before { border-color: var(--pen); box-shadow: 0 0 0 4px #dbe7fd }
body.apex-csd .csd-scr__track li b { display: block; font-weight: 600; color: #16233f }
body.apex-csd .csd-scr__track li.is-now { color: var(--pen); font-weight: 500 }
body.apex-csd .csd-scr__q { padding: .75em .9em; border: 1px solid #c9d8f2; border-radius: 9px; background: #fff; color: #16233f; font-weight: 500 }
body.apex-csd .csd-scr__a { padding: .2em .1em 0; font-size: 1.12em; line-height: 1.45; color: #16233f }
body.apex-csd .csd-scr__src { justify-self: start; display: grid; padding: .55em .8em; background: #f4f7fc; border-radius: 8px; font-size: .9em; color: #66748c }
body.apex-csd .csd-scr__src b { font-weight: 600; color: var(--pen) }
body.apex-csd .csd-scr__src[hidden] { display: none }
body.apex-csd .csd-scr__row { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: .6em; padding: .5em .2em; border-top: 1px solid #e3eaf5 }
body.apex-csd .csd-scr__row.is-head { border-top: 0; font-size: .86em; font-weight: 600; color: #66748c }
body.apex-csd .csd-scr__row b { font-weight: 600 }
body.apex-csd .csd-scr__row.is-loss b { color: #a0312a }
body.apex-csd .csd-scr__mail { gap: 1em }
body.apex-csd .csd-scr__mail p { line-height: 1.5 }
body.apex-csd .csd-scr__mail b { display: block; font-weight: 600 }
body.apex-csd .csd-scr--idea .csd-scr__in { justify-items: start; gap: 1.1em; padding: 2.4em 1.4em }
body.apex-csd .csd-scr__blank { color: #8794aa }

@media (max-width: 1080px) {
    body:is(.apex-csd, .apex-svc) :is(.csd-bw, .csd-cw, .csd-wish) { font-size: 14px }
}
@media (max-width: 960px) {
    body:is(.apex-csd, .apex-svc) .csd-bw { grid-template-columns: minmax(0, 1fr) }
    body:is(.apex-csd, .apex-svc) .csd-xl { grid-column: 1; grid-row: 1; max-width: 36rem; margin-top: 0 }
    body:is(.apex-csd, .apex-svc) :is(.csd-main, .svc-main) .csd-bw__pen--was { grid-column: 1; grid-row: 2; margin: .7em 0 1.4em 1em }
    body:is(.apex-csd, .apex-svc) .csd-app { grid-column: 1; grid-row: 3 }
    body:is(.apex-csd, .apex-svc) :is(.csd-main, .svc-main) .csd-bw__pen--now { grid-column: 1; grid-row: 4 }
    body:is(.apex-csd, .apex-svc) .csd-cw { grid-template-columns: minmax(0, 1fr) }
    /* on one column the spreadsheet comes straight after the folder it fills from */
    body:is(.apex-csd, .apex-svc) .csd-cw__out { order: 2 }
    body:is(.apex-csd, .apex-svc) .csd-pad { order: 3; width: 100%; max-width: 30rem }
    body.apex-csd .csd-wish { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 640px) {
    body:is(.apex-csd, .apex-svc) .csd-app__body { grid-template-columns: minmax(0, 1fr) }
    body:is(.apex-csd, .apex-svc) .csd-app__nav { display: flex; overflow-x: auto; padding: .4em }
    body:is(.apex-csd, .apex-svc) .csd-app__nav button { flex: none }
    body:is(.apex-csd, .apex-svc) .csd-app__main { min-height: 0; padding: .7em .6em .8em }
    body:is(.apex-csd, .apex-svc) .csd-app__board { gap: .35em }
    body:is(.apex-csd, .apex-svc) .csd-app__col { padding: .35em; min-height: 12em }
    body:is(.apex-csd, .apex-svc) .csd-app__card { padding: .45em .45em; font-size: .9em }
    body:is(.apex-csd, .apex-svc) .csd-app__meta { flex-direction: column; gap: 0 }
    body:is(.apex-csd, .apex-svc) .csd-app__list p { grid-template-columns: minmax(0, 1fr) auto; }
    body:is(.apex-csd, .apex-svc) .csd-app__list p span { grid-column: 1; grid-row: 2 }
    body:is(.apex-csd, .apex-svc) .csd-app__list p em { grid-column: 2; grid-row: 1 / 3; align-self: center }
    body:is(.apex-csd, .apex-svc) .csd-xl { font-size: .78em }
    body:is(.apex-csd, .apex-svc) .csd-cw__desk { width: auto; flex-wrap: wrap; align-items: center; padding-top: 0 }
    body:is(.apex-csd, .apex-svc) .csd-cw__tray { width: 100%; justify-content: space-between }
    body:is(.apex-csd, .apex-svc) .csd-clip { width: calc((100% - 1.6em) / 3) }
    body:is(.apex-csd, .apex-svc) :is(.csd-main, .svc-main) .csd-cw__pen--drag { position: static; order: 2; flex: 1; white-space: normal; font-size: 1.5em }
    body:is(.apex-csd, .apex-svc) .csd-cw__folder { order: 3 }
    body:is(.apex-csd, .apex-svc) .csd-pad__sheet { --line: 2.1rem }
    body:is(.apex-csd, .apex-svc) .csd-pad__steps li { font-size: 1.22em }
    body:is(.apex-csd, .apex-svc) .csd-pad__title { font-size: 1.6em }
    body.apex-csd .csd-wish__pile { gap: .7em }
    body.apex-csd .csd-sticky { min-height: 6.2em; font-size: 1.3em; padding: .6em }
}
@media (prefers-reduced-motion: reduce) {
    body:is(.apex-csd, .apex-svc) :is(.csd-app__card, .csd-clip) { animation: none !important }
}

/* ════ 8 Nov · guess the price, ask the files, the sheet's jokes ════
   Each ends in a pen link to the form. */
body.apex-csd .csd-guess { display: flex; gap: .5em; align-items: stretch }
body.apex-csd .csd-guess label { flex: 1; display: flex; align-items: center; gap: .3em; padding: 0 .7em; background: #fff; border: 1px solid #c9d8f2; border-radius: 8px; font-weight: 600; color: #16233f }
body.apex-csd .csd-guess input { flex: 1; min-width: 0; padding: .55em 0; font: inherit; font-size: 1.05em; color: #16233f; background: none; border: 0 }
body.apex-csd .csd-guess input:focus { outline: none }
body.apex-csd .csd-guess label:focus-within { border-color: var(--pen); box-shadow: 0 0 0 2px rgba(31, 95, 214, .2) }
body.apex-csd .csd-guess button { padding: .55em 1em; font: inherit; font-weight: 600; color: #fff; background: var(--pen); border: 0; border-radius: 8px; cursor: pointer }
body.apex-csd .csd-guess button:hover { background: #164bb0 }
body.apex-csd .csd-main .csd-guess__pen { font: 400 clamp(1.5rem, 1.9vw, 1.75rem)/1.12 var(--hand); color: var(--pen); text-wrap: balance }
body.apex-csd .csd-guess__pen:empty { display: none }
body.apex-csd .csd-ask { display: grid; gap: .3em; margin-top: .3em; font-size: .9em; color: #66748c }
body.apex-csd .csd-ask input { padding: .6em .8em; font: inherit; font-size: 1.05em; color: #16233f; background: #fff; border: 1px dashed #9db8e8; border-radius: 9px }
body.apex-csd .csd-ask input:focus-visible { outline: none; border-style: solid; border-color: var(--pen) }
body:is(.apex-csd, .apex-svc) .csd-penlink { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em }
body:is(.apex-csd, .apex-svc) .csd-penlink:hover { color: #16233f }
body:is(.apex-csd, .apex-svc) .csd-app__note .csd-penlink { color: var(--pen); font-weight: 600 }
body:is(.apex-csd, .apex-svc) :is(.csd-main, .svc-main) .csd-cw__end { grid-column: 1 / -1; margin-top: 1em; font: 400 clamp(1.6rem, 2vw, 1.9rem)/1.12 var(--hand); color: var(--pen) }
body:is(.apex-csd, .apex-svc) .csd-xl__grid i.is-yell, body:is(.apex-csd, .apex-svc) .csd-xl__tabs { cursor: pointer }
body:is(.apex-csd, .apex-svc) .csd-xl__tabs { scroll-behavior: smooth }

/* 8 Nov: on a tablet the one-column wish left the screen at 443px with 300px of
   white beside it. Between phone and desktop the notes stack into one column
   beside the screen instead, so the answer sits next to the note you tapped. */
@media (min-width: 641px) and (max-width: 960px) {
    body.apex-csd .csd-wish { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.6rem }
    body.apex-csd .csd-wish__pile { grid-template-columns: minmax(0, 1fr); gap: .45em }
    body.apex-csd .csd-sticky { min-height: 0; padding: .55em .75em; font-size: 1.5em }
}
body:is(.apex-csd, .apex-svc) :is(.csd-xl__grid i.is-yell, .csd-xl__tabs):focus-visible { outline: 2px solid var(--pen); outline-offset: -2px }

/* ════ 8 Nov · Custom Software audit ════
   Send on a drafted invoice, the spreadsheet going out of date beside the
   board, the pocket clip, the loss that says why, and the clips sheet as
   cards on a phone. */
body:is(.apex-csd, .apex-svc) .csd-app__send { justify-self: end; padding: .3em .8em; font: inherit; font-size: .88em; font-weight: 600; color: #fff; background: var(--pen); border: 0; border-radius: 6px; cursor: pointer }
body:is(.apex-csd, .apex-svc) .csd-app__note .csd-app__send { display: inline-block; margin-top: .4em; font-size: .92em }
body:is(.apex-csd, .apex-svc) .csd-app__send:hover { background: #164bb0 }
body:is(.apex-csd, .apex-svc) .csd-app__send:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px }
/* a pen ring round the cell nobody went back and changed */
body:is(.apex-csd, .apex-svc) .csd-xl__grid i.is-stale { overflow: visible; position: relative }
body:is(.apex-csd, .apex-svc) .csd-xl__grid i.is-stale::after { content: ""; position: absolute; inset: -.2em -.35em; border: 2px solid var(--red); border-radius: 50%; rotate: -3deg; pointer-events: none }
html:is(.csd-anim, .svc-anim) body:is(.apex-csd, .apex-svc) .csd-xl__grid i.is-stale::after { animation: csd-ring .5s var(--csd-ease) }
@keyframes csd-ring { from { opacity: 0; scale: 1.4 } }
body:is(.apex-csd, .apex-svc) .csd-cw__tray { gap: .7em }
body:is(.apex-csd, .apex-svc) .csd-clip { width: 7.6em }
body:is(.apex-csd, .apex-svc) .csd-clip--pocket .csd-clip__pic img { filter: brightness(.16) blur(3px); scale: 1.2 }
body:is(.apex-csd, .apex-svc) .csd-cw.is-live .csd-ss__table tr.is-skip td:not(.is-empty) { color: #8794aa; font-style: italic }
body:is(.apex-csd, .apex-svc) .csd-ss__empty { display: none }
body.apex-csd button.csd-scr__loss { padding: 0; font: inherit; font-weight: 600; color: #a0312a; background: none; border: 0; border-bottom: 1px dashed currentColor; cursor: pointer }
body.apex-csd button.csd-scr__loss:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px }
@media (max-width: 640px) {
    body:is(.apex-csd, .apex-svc) .csd-clip { width: calc((100% - 2.1em) / 4) }
    body:is(.apex-csd, .apex-svc) .csd-app__list p .csd-app__send { grid-column: 2; grid-row: 1 / 3; align-self: center }
    /* six columns scrolled sideways at 390: each clip is a card instead */
    body:is(.apex-csd, .apex-svc) .csd-ss__scroll { overflow: visible }
    body:is(.apex-csd, .apex-svc) .csd-ss__table { min-width: 0; table-layout: auto }
    body:is(.apex-csd, .apex-svc) .csd-ss__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
    body:is(.apex-csd, .apex-svc) :is(.csd-ss__table, .csd-ss__table tbody, .csd-ss__table tr, .csd-ss__table td) { display: block }
    body:is(.apex-csd, .apex-svc) .csd-ss__table tr { padding: .5em .8em .7em; border-top: 1px solid #e3e8ef }
    body:is(.apex-csd, .apex-svc) .csd-ss__table tbody tr:first-child { border-top: 0 }
    body:is(.apex-csd, .apex-svc) .csd-ss__table td { height: auto; padding: .25em 0; border: 0 }
    body:is(.apex-csd, .apex-svc) .csd-ss__table td::before { content: attr(data-label); display: block; font-size: .82em; font-weight: 600; color: #66748c }
    body:is(.apex-csd, .apex-svc) .csd-ss__table td[data-label="File name"] { font-weight: 600; color: #16233f }
    body:is(.apex-csd, .apex-svc) .csd-cw.is-live .csd-ss__table tr:not(.is-in) { display: none }
    body:is(.apex-csd, .apex-svc) .csd-cw.is-live:not(.has-in) .csd-ss__empty { display: block; padding: 1em .9em; color: #66748c }
}

/* 9 Nov: the spreadsheet keeps up with the board, and the changed cell says so */
body:is(.apex-csd, .apex-svc) .csd-xl__grid i.is-synced { background: #dbe7fd; color: #16233f; font-weight: 600; transition: background-color 1.6s var(--csd-ease) .9s }
html:is(.csd-anim, .svc-anim) body:is(.apex-csd, .apex-svc) .csd-xl__grid i.is-synced { animation: csd-sync 2.4s var(--csd-ease) both }
@keyframes csd-sync { 0% { background: #a9c6f7 } 100% { background: #e9f0fc } }