/*
 * Enverno Client Hub. Built from the handoff kit's starter.html over tokens.css
 * (copied unchanged). No inline styles anywhere, so the CSP forbids them.
 */
@font-face { font-family: Inter; src: url(/static/fonts/InterVariable.ttf) format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url(/static/fonts/InterVariable-Italic.ttf) format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--enverno-paper); color: var(--enverno-ink); font: var(--text-body)/var(--leading-body) var(--font); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid var(--enverno-focus); outline-offset: 2px; border-radius: 4px; }
a { color: inherit; }
img { max-width: 100%; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Top bar: the same co-brand lockup as the email's Client Portal card. */
/* The bar's content shares the page container, so the mark lines up with the sidebar. */
.top { position: sticky; top: 0; z-index: 2; padding: 12px 0; background: rgb(251 250 249 / .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--enverno-hair); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(1320px, calc(100% - 48px)); margin: 0 auto; }
.lockup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ours { display: flex; align-items: center; gap: 10px; }
/* 32px mark (smaller than the email's 40, at Bryce's request), corners at the approved 13/46 ratio. */
.ours img { width: 32px; height: 32px; border-radius: 9px; display: block; }
.wordmark { font-size: 19px; line-height: 1; font-weight: 800; letter-spacing: -.045em; color: var(--enverno-ink-display); }
.wordmark span { color: var(--enverno-pink); }
.client { padding-left: 14px; border-left: 1px solid var(--enverno-divider); font-size: 13px; line-height: 24px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--enverno-ink-display); }
.who { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--enverno-muted); }
.who form { margin: 0; }
.link-btn { appearance: none; background: none; border: 0; padding: 4px 0; white-space: nowrap; font: inherit; color: var(--enverno-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--enverno-ink); }

.main { width: min(1320px, calc(100% - 48px)); margin: 0 auto; padding: clamp(24px, 4vw, 40px) 0 80px; }
.main.narrow { width: min(480px, calc(100% - 32px)); padding-top: clamp(40px, 8vw, 88px); }

.label { margin: 0; font-size: var(--label-size); line-height: 1.2; font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--enverno-pink-text); }
.label.muted { color: var(--enverno-muted); }
h1 { margin: 10px 0 6px; font-size: clamp(30px, 5vw, 44px); line-height: 1.08; font-weight: 700; letter-spacing: -.035em; color: var(--enverno-ink-display); text-wrap: balance; }
.lede { margin: 0; max-width: 60ch; color: var(--enverno-muted); }

/* ---------- The site around the cards ---------- */
.home-link { text-decoration: none; border-radius: 12px; }
.shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 44px; width: min(1320px, calc(100% - 48px)); margin: 0 auto; padding: 36px 0 88px; }
.content { min-width: 0; }

/* Sidebar: the project, a permanent link per section, other projects. */
.side { position: sticky; top: 92px; align-self: start; display: grid; gap: 28px; }
.side-name { margin: 6px 0 2px; font-size: 18px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; color: var(--enverno-ink-display); }
.side-stage { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--enverno-muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-now { background: var(--enverno-pink); box-shadow: 0 0 0 3px var(--enverno-pink-soft); }
.dot-done { background: var(--enverno-ink-display); }
/*
 * Highlight system:
 *   where you are   an ink rule on the hairline track beside the links, ink text. No box, no pink.
 *   when it is      a pink dot (the timeline's Now, the sidebar stage).
 *   what to do      the action's own colour fill (pink, plum, pine).
 *   what happened   a soft status chip.
 */
.side-nav, .mnav-links { display: grid; border-left: 1px solid var(--enverno-hair); }
.side-nav a, .mnav-links a { position: relative; display: block; padding: 7px 0 7px 16px; text-decoration: none; font-size: 14px; font-weight: 550; color: var(--enverno-muted); }
.side-nav a:hover, .mnav-links a:hover { color: var(--enverno-ink-display); }
.side-nav a[aria-current], .mnav-links a[aria-current] { color: var(--enverno-ink-display); font-weight: 700; }
.side-nav a[aria-current]::before, .mnav-links a[aria-current]::before { content: ""; position: absolute; left: -1px; top: 5px; bottom: 5px; width: 2px; background: var(--enverno-ink-display); }
/* Sub-pages: the open section is ink and bold; its sub-pages sit under it, and the current one gets the rule. */
.side-nav a.is-open, .mnav-links a.is-open { color: var(--enverno-ink-display); font-weight: 700; }
.side-sub { display: grid; margin: 0 0 6px; }
.side-sub a { padding: 5px 0 5px 30px; font-size: 13.5px; }
.soon { margin-left: 6px; padding: 1px 6px; border-radius: var(--radius-chip); background: #f3efed; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--enverno-muted); vertical-align: 1px; }
.fin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.fin-card { display: block; padding: 20px 22px; text-decoration: none; color: inherit; transition: box-shadow var(--motion-base) var(--ease-standard); }
.fin-card:hover { box-shadow: 0 10px 30px rgb(23 20 23 / .07); }
.fin-big { margin: 2px 0 0; font-size: var(--text-hero); font-weight: 700; letter-spacing: -.03em; color: var(--enverno-ink-display); }
.fin-line { margin: 2px 0 0; font-size: 13.5px; color: var(--enverno-muted); }
.inline-btn { width: auto; display: inline-flex; }
.side-others { display: grid; gap: 2px; padding-top: 20px; border-top: 1px solid var(--enverno-rule); }
.side-others .label { margin-bottom: 6px; }
.side-others a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; text-decoration: none; font-size: 14px; color: var(--enverno-ink); }
.side-others a small { font-size: 12px; color: var(--enverno-muted); }
.side-others a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.side-others .side-all { margin-top: 4px; font-size: 13px; font-weight: 650; color: var(--enverno-pink-text); justify-content: flex-start; }

/* Phones: the same links in a disclosure. Hidden on wide screens. */
.mnav { display: none; margin-bottom: 22px; background: var(--enverno-surface); border: 1px solid var(--enverno-hair); border-radius: 14px; }
.mnav summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav-name { font-weight: 700; color: var(--enverno-ink-display); }
.mnav-stage { font-size: 13px; color: var(--enverno-muted); }
.mnav-btn { margin-left: auto; padding: 6px 12px; border: 1px solid var(--enverno-hair); border-radius: var(--radius-button); font-size: 13px; font-weight: 650; }
.mnav[open] .mnav-btn { background: var(--enverno-ink-display); color: #fff; border-color: transparent; }
.mnav-links { margin: 0 14px 14px; }
.mnav .side-others { margin: 0 6px; padding: 14px 6px 12px; }

/* Project header: the letter's label and headline, with the still when there is one. */
.phead { display: grid; gap: 28px; align-items: center; }
.phead.has-still { grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); }
.phead h1 { margin-bottom: 8px; }
.phead-still { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; border: 1px solid var(--enverno-hair); }

/* Timeline strip: done in ink, now in pink, the rest quiet. */
.tl { margin-top: 34px; padding: 22px 24px 20px; background: var(--enverno-surface); border: 1px solid var(--enverno-hair); border-radius: var(--radius-card); }
/*
 * The stops sit at 0, 25, 50, 75 and 100% of the strip: four equal columns plus a zero-width
 * last column whose dot and label hang off the right edge. The line runs edge to edge.
 */
.tl { container-type: inline-size; }
.tl ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.tl-step { position: relative; display: grid; align-content: start; gap: 2px; padding: 28px 12px 0 0; }
.tl-step::before { content: ""; position: absolute; top: 7px; left: 16px; right: 0; height: 2px; background: var(--enverno-hair); }
.tl-step:last-child::before { display: none; }
/* Too narrow for five labels side by side: stack them, whatever the page width. */
@container (max-width: 620px) {
  .tl ol { grid-template-columns: minmax(0, 1fr); }
  .tl-step, .tl-step:last-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; padding: 0 0 14px 28px; text-align: left; white-space: normal; }
  .tl-step::before { display: block; top: 18px; left: 7px; right: auto; bottom: 0; width: 2px; height: auto; }
  .tl-step:last-child::before { display: none; }
  .tl-step:last-child > .tl-dot { left: 0; right: auto; }
}
.tl-step.is-done::before { background: var(--enverno-ink-display); }
.tl-dot { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #d4cdd0; }
.is-done > .tl-dot, .is-done .vtl-head .tl-dot { background: var(--enverno-ink-display); border-color: var(--enverno-ink-display); }
.is-now > .tl-dot, .is-now .vtl-head .tl-dot { background: var(--enverno-pink); border-color: var(--enverno-pink); box-shadow: 0 0 0 5px var(--enverno-pink-soft); }
.tl-label { font-size: 13px; line-height: 1.3; font-weight: 650; color: var(--enverno-ink-display); }
.is-upcoming .tl-label { color: var(--enverno-muted); font-weight: 550; }
.is-now .tl-label { color: var(--enverno-pink-text); }
.tl-date { font-size: 12px; line-height: 1.3; color: var(--enverno-muted); }

.nownext { display: flex; flex-wrap: wrap; gap: 6px 32px; margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: var(--enverno-ink); }
.nownext p { margin: 0; }
.nownext .label { display: inline; margin-right: 8px; }
.owner { margin-left: 6px; padding: 2px 9px; border-radius: var(--radius-chip); font-size: 12px; font-weight: 650; white-space: nowrap; background: #f3efed; color: var(--enverno-muted); }
.owner-client { background: var(--enverno-pink-soft); color: var(--enverno-pink-text); }

/* Overview: the letter's cards in the main column, the facts beside them. */
/* One grid: the main column flexes, the side column is fixed, and both end on the page's right edge,
   the same edge as the header, the timeline and the top bar. */
.ov { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; margin-top: 34px; }
.ov-main { min-width: 0; }
.ov-h { margin: 0 0 12px; }
.ov-main > .ov-h:not(:first-child), .ov-main > .section-title { margin-top: 34px; }
.stack { display: grid; gap: 18px; }
.quiet { padding: 22px 24px; color: var(--enverno-muted); }
.quiet p { margin: 0; }
.section-title { margin: 34px 0 12px; }
.ov-rail { display: grid; gap: 18px; position: sticky; top: 92px; }
/* Both columns open with a label; the -6px makes the rail's label-to-card gap the main column's 12px. */
.ov-rail > .ov-h { margin-bottom: -6px; }
.lead-wrap { display: grid; align-content: start; }
.rail-card { padding: 18px 20px 20px; }
.rail-h { margin: 0 0 14px; font-size: var(--label-size); line-height: 1.2; font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--enverno-muted); }
/* One shared grid for every row, so a long date ("Nov 12 and 13") widens the column instead of colliding. */
.kd { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 16px; font-size: 14px; line-height: 1.4; }
.kd li { display: contents; }
.kd-date { font-weight: 700; color: var(--enverno-ink-display); white-space: nowrap; }
.kd-label { color: var(--enverno-ink); }
.more { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 650; color: var(--enverno-pink-text); text-decoration: none; }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }
.ql { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ql a { font-size: 14px; font-weight: 650; color: var(--enverno-ink-display); text-decoration: none; }
.ql a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ql small { display: block; font-size: 12px; color: var(--enverno-muted); }

.person { display: flex; gap: 14px; align-items: center; }
.avatar { display: block; flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.person.large .avatar { width: 72px; height: 72px; }
.mono { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: #ece7e4; color: var(--enverno-ink-display); font-size: 16px; font-weight: 800; letter-spacing: .02em; }
.person.large .mono { width: 72px; height: 72px; font-size: 24px; }
.person-name { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--enverno-ink-display); }
.person.large .person-name { font-size: 20px; letter-spacing: -.01em; }
.person-role { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--enverno-muted); }
.person-line { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--enverno-ink); }
.contact { list-style: none; display: grid; gap: 8px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--enverno-rule); }
.contact li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.4; }
.ct-k { font-size: 12px; color: var(--enverno-muted); }
.contact a { font-weight: 600; color: var(--enverno-ink-display); text-decoration: none; overflow-wrap: anywhere; }
.contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sierra-note { margin: 10px 4px 0; font-size: 12.5px; line-height: 1.5; color: var(--enverno-muted); }

.upd { padding: 6px 22px; }
.upd-list { list-style: none; margin: 0; padding: 0; }
.upd-list li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
.upd-list li + li { border-top: 1px solid var(--enverno-rule); }
.upd-list p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.upd-date { font-size: 13px; font-weight: 700; color: var(--enverno-ink-display); white-space: nowrap; }
.upd .more { margin: 0 0 14px; }

/* Section pages */
.shead { margin-bottom: 26px; }
.shead h1 { margin-top: 8px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.vtl { list-style: none; margin: 0; padding: 0; }
.vtl-ch { position: relative; padding: 0 0 26px 32px; }
.vtl-ch::before { content: ""; position: absolute; left: 7px; top: 20px; bottom: 0; width: 2px; background: var(--enverno-hair); }
.vtl-ch.is-done::before { background: var(--enverno-ink-display); }
.vtl-ch:last-child::before { display: none; }
.vtl-head { display: flex; align-items: center; gap: 10px; }
.vtl-head .tl-dot { position: absolute; left: 0; top: 4px; }
.vtl-head h2 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--enverno-ink-display); }
.is-upcoming .vtl-head h2 { color: var(--enverno-muted); }
.vtl-status { font-size: 11px; font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--enverno-muted); }
.is-now .vtl-status { color: var(--enverno-pink-text); }
.ms { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: minmax(88px, max-content) minmax(0, 1fr) auto; gap: 6px 16px; font-size: 14px; line-height: 1.45; }
.ms li { display: contents; }
.ms-date { font-weight: 650; color: var(--enverno-ink-display); }
.ms-check { color: var(--pine); font-weight: 700; }

/* Payment plan: paid filled pine, open ringed pine, planned dashed grey. */
.paysteps { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; padding: 0; }
.paysteps li { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; background: var(--enverno-surface); border: 1px solid var(--enverno-hair); border-radius: 14px; }
.paysteps li.is-planned { background: transparent; border-style: dashed; border-color: #d4cdd0; }
.ps-dot { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #d4cdd0; font-size: 13px; font-weight: 800; }
.paysteps .is-paid .ps-dot { background: var(--pine); border-color: var(--pine); color: #fff; }
.paysteps .is-open .ps-dot { border-color: var(--pine); }
.paysteps .is-planned .ps-dot { border-style: dashed; }
.ps-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.ps-name { font-size: 14px; font-weight: 650; color: var(--enverno-ink-display); }
.is-planned .ps-name { color: var(--enverno-muted); }
.ps-status { font-size: 13px; color: var(--enverno-muted); }
.paysteps.compact { display: grid; gap: 12px; margin: 0; }
.paysteps.compact li { padding: 0; background: none; border: 0; align-items: flex-start; }
.paysteps.compact .ps-dot { width: 20px; height: 20px; font-size: 11px; margin-top: 1px; }
.paysteps.compact .ps-text { display: grid; }
.paysteps.compact .ps-status { font-size: 12px; }
.tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-chip); background: #f3efed; font-size: 11px; font-weight: 700; color: var(--enverno-muted); vertical-align: 1px; }

/* A payment not invoiced yet: greyed, no button. */
.row.planned .disc { filter: grayscale(1); opacity: .5; }
.row.planned .title, .row.planned .fact strong { color: var(--enverno-muted); }

/* Add-on context, opened on demand. */
.addon-more { grid-column: 1 / -1; margin: -4px 10px 18px 78px; }
.addon-more + .row { border-top: 1px solid var(--enverno-rule); }
.addon-more summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 650; color: var(--enverno-pink-text); }
.addon-more summary::-webkit-details-marker { display: none; }
.addon-more summary::before { content: "▸"; display: inline-block; transition: transform var(--motion-fast) var(--ease-standard); }
.addon-more[open] summary::before { transform: rotate(90deg); }
.addon-body { margin-top: 12px; padding: 16px 18px; background: var(--enverno-paper); border: 1px solid var(--enverno-rule); border-radius: 12px; font-size: 14px; line-height: 1.55; }
.addon-body p { margin: 0 0 10px; }
.addon-list { margin: 0 0 14px; padding-left: 18px; }
.addon-who { margin: 0; font-size: 13px; color: var(--enverno-muted); }
.addon-who strong { color: var(--enverno-ink-display); font-weight: 650; }
.addon-quote { margin: 10px 0 0; padding: 12px 14px; background: var(--enverno-surface); border: 1px solid var(--enverno-hair); border-radius: 10px; font-size: 14px; line-height: 1.55; color: var(--enverno-ink); }
.addon-quote::before { content: "“"; } .addon-quote::after { content: "”"; }
.ov-h + .wide-card + .ov-h { margin-top: 30px; }
.content > .ov-h:not(:first-of-type) { margin-top: 30px; }

.gallery + .gallery { margin-top: 40px; }
.gallery-h { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--enverno-ink-display); }
.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gfig { margin: 0; }
.gfig a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--enverno-hair); }
.gfig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--motion-base) var(--ease-standard); }
.gfig a:hover img { transform: scale(1.02); }
.gfig figcaption { margin-top: 8px; font-size: 13px; color: var(--enverno-muted); }

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.pgrid + .ov-h { margin-top: 30px; }
.person-card { padding: 22px; }

/* All projects, as a gallery */
.pgallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 32px; }
.pcard { display: block; background: var(--enverno-surface); border: 1px solid var(--enverno-hair); border-radius: var(--radius-card); overflow: hidden; text-decoration: none; transition: box-shadow var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard); }
.pcard:hover { box-shadow: 0 10px 30px rgb(23 20 23 / .08); transform: translateY(-2px); }
.pcard-art { aspect-ratio: 16 / 9; background: #f1ecea; display: grid; place-items: center; }
.pcard-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pcard-mono { font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: var(--enverno-muted); }
.pcard-body { padding: 16px 20px 20px; }
.pcard-body h2 { margin: 6px 0 4px; font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; color: var(--enverno-ink-display); }
.pcard-line { margin: 0; font-size: 14px; color: var(--enverno-muted); }

/* Card */
.card { background: var(--enverno-surface); border: 1px solid var(--enverno-hair); border-radius: var(--radius-card); overflow: hidden; }
.hero { padding: 28px 26px 22px; text-align: center; }
.hero h2 { margin: 8px 0 0; font-size: var(--text-hero); line-height: 1.15; font-weight: 700; letter-spacing: -.03em; color: var(--enverno-ink-display); }
.hero p:not(.label) { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--enverno-muted); }
.hero > img { display: block; margin: 0 auto 14px; }

/* Spotlight: one action alone. */
.spotlight { padding: 30px 26px 26px; text-align: center; }
.disc-lg { display: block; width: 64px; height: 64px; margin: 0 auto 14px; }
.spotlight h2 { margin: 8px 0 0; font-size: var(--text-hero); line-height: 1.15; font-weight: 700; letter-spacing: -.03em; color: var(--enverno-ink-display); }
.spotlight .sub { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--enverno-muted); }
.spotlight .act { margin: 18px auto 0; width: max-content; min-width: var(--button-min-width); }
.spotlight .when { margin: 10px 0 0; font-size: 13px; font-weight: 650; color: var(--enverno-ink-display); }

/* Pink story band (delivery) and the 16:9 still. */
.band { background: var(--enverno-pink); color: #fff; padding: 24px 22px 22px; }
.band .label { color: #fff; }
.band h2 { margin: 12px 0 0; font-size: var(--text-display); line-height: 1.05; font-weight: 600; letter-spacing: -.035em; overflow-wrap: anywhere; }
.still { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #ddd; }

/*
 * Action rows: disc · words · fact · button. The rows of one card share a grid
 * through subgrid, so every button in a card takes the widest label's width
 * (never less than 176px) and the buttons line up.
 */
/* A subgrid's padding is taken out of its edge tracks, so the 22px side padding is two
   explicit 10px tracks (plus the 12px gap) instead, and the rows carry no side padding. */
.rows { display: grid; grid-template-columns: 10px var(--disc) minmax(0, 1fr) auto minmax(var(--button-min-width), max-content) 10px; column-gap: 12px; }
.row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 18px 0; }
.row > .disc { grid-column: 2; }
.row > .words { grid-column: 3; }
.row > .fact { grid-column: 4; }
.row > .act { grid-column: 5; }
.row + .row { border-top: 1px solid var(--enverno-rule); }
.row.paper { background: var(--enverno-paper); }
.disc { width: var(--disc); height: var(--disc); display: block; }
.kicker { font-size: var(--label-size); line-height: 1.2; font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; }
.title { margin-top: 4px; font-size: var(--text-title); line-height: 1.3; font-weight: 650; color: var(--enverno-ink-display); }
.meta { font-size: var(--text-meta); line-height: var(--leading-meta); color: var(--enverno-muted); }
.fact { text-align: right; padding-right: 8px; }
.fact small { display: block; font-size: 12px; line-height: 1.3; color: var(--enverno-muted); }
.fact strong { display: block; font-size: var(--text-hero); line-height: 1.05; font-weight: 700; letter-spacing: -.03em; color: var(--enverno-ink-display); white-space: nowrap; }
.fact .date { font-size: 14px; line-height: 1.35; font-weight: 650; color: var(--enverno-ink-display); white-space: nowrap; }
.act { display: flex; justify-content: flex-end; }
.act.center { justify-content: center; }
.stripe { display: flex; white-space: nowrap; align-items: center; gap: 4px; margin-top: 6px; font-size: 11.5px; line-height: 1; color: var(--enverno-muted); }
.stripe.center { justify-content: center; margin-top: 14px; }
.stripe img { width: 38px; height: auto; display: block; }

/* Kicker and label colours: the action's family. Small pink text is always the text tone. */
.k-plum { color: var(--plum); }
.k-pine { color: var(--pine); }
.k-pink { color: var(--enverno-pink-text); }
.k-muted { color: var(--enverno-muted); }

/* Buttons: 10px rounded rectangles, never pills. One colour per action. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: var(--button-pad); border-radius: var(--radius-button); border: 1px solid transparent; font: 600 14px/1 var(--font); color: #fff; text-decoration: none; white-space: nowrap; cursor: pointer; transition: filter var(--motion-fast) var(--ease-standard); }
.btn:hover { filter: brightness(.94); }
.btn.pink { background: var(--enverno-pink); }
.btn.plum { background: var(--plum); }
.btn.pine { background: var(--pine); }
.btn.ember { background: var(--ember); }
.btn.lagoon { background: var(--lagoon); }
.k-ember { color: var(--ember); }
.k-lagoon { color: var(--lagoon); }
.c-ember { background: var(--ember-soft); color: var(--ember); }
.c-lagoon { background: var(--lagoon-soft); color: var(--lagoon); }
.btn.outline { background: #fff; border-color: currentColor; }
.btn.o-pine { color: var(--pine); }
.btn.o-plum { color: var(--plum); }
.btn.o-pink { color: var(--enverno-pink-text); }
.btn.wide { margin-top: 18px; }
.pending { font-size: 13px; color: var(--enverno-muted); }

/* Status chips: the only fully round shape. Never a button. */
.chip { display: inline-block; white-space: nowrap; border-radius: var(--radius-chip); padding: 7px 14px; font-size: 13px; line-height: 1.2; font-weight: 650; }
.c-pine { background: var(--pine-soft); color: var(--pine); }
.c-plum { background: var(--plum-soft); color: var(--plum); }
.c-pink { background: var(--enverno-pink-soft); color: var(--enverno-pink-text); }

/* Sign-in and simple pages. */
.signin { padding: 30px 28px 28px; }
.signin h1 { font-size: var(--text-hero); letter-spacing: -.03em; margin: 8px 0 4px; }
.signin .sub { margin: 0; color: var(--enverno-muted); font-size: 14px; line-height: 1.5; }
.signin form { margin-top: 22px; }
.field-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 650; color: var(--enverno-ink-display); }
.input { display: block; width: 100%; padding: 12px 14px; border: 1px solid #d9d3d6; border-radius: var(--radius-button); background: #fff; font: 15px/1.3 var(--font); color: var(--enverno-ink); }
.input:focus-visible { outline: 3px solid var(--enverno-focus); outline-offset: 1px; border-color: transparent; }
.input.code { font-size: 22px; letter-spacing: .3em; font-weight: 650; }
.error { margin: 16px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--enverno-pink-soft); color: var(--enverno-pink-text); font-size: 13px; font-weight: 650; }
.alt { margin: 18px 0 0; font-size: 13px; color: var(--enverno-muted); }
.dev-note { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--enverno-rule); font-size: 12px; line-height: 1.5; color: var(--enverno-muted); }
.rows.plain { display: block; }
.row.mail { display: block; }
.mail-body { margin: 8px 0 0; white-space: pre-wrap; font: 13px/1.5 var(--font); color: var(--enverno-ink); }

/* ---------- Review ---------- */
/* The still leads, at 16:9, like the delivery card; the details sit under it. */
.review-card { display: grid; grid-template-columns: minmax(0, 1fr); }
.review-still { display: block; }
.review-still img, .rv-still { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.review-body { padding: 22px 24px; display: grid; align-content: center; gap: 4px; }
.review-body h2 { margin: 4px 0 0; font-size: var(--text-heading); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--enverno-ink-display); }
.review-body .sub, .rv-cut .sub { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--enverno-muted); }
.review-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.review-acts .btn { width: auto; min-width: var(--button-min-width); }
.rv-cut-body { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 20px 24px 22px; }
.rv-cut-body h2 { margin: 4px 0 0; font-size: var(--text-heading); line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--enverno-ink-display); }
.rv-cut-act { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.rv-cut-act .btn { width: auto; min-width: var(--button-min-width); }
.rv .ov-main > .ov-h:not(:first-child) { margin-top: 30px; }
.rv-thread { padding: 4px 22px; }
.notes { list-style: none; margin: 0; padding: 0; }
.note { padding: 16px 0; }
.note + .note { border-top: 1px solid var(--enverno-rule); }
.note-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tc { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--enverno-ink-display); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.note-by { font-size: 12.5px; color: var(--enverno-muted); }
.note-body { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--enverno-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.note-reply { margin: 12px 0 0; padding: 12px 14px; background: var(--enverno-paper); border: 1px solid var(--enverno-rule); border-radius: 10px; }
.note-reply p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-wait { margin: 8px 0 0; font-size: 12.5px; font-weight: 650; color: var(--enverno-pink-text); }
.note-event p { margin: 0; font-size: 13.5px; color: var(--enverno-muted); }
.note-event strong { color: var(--enverno-ink-display); font-weight: 650; }
.quiet-line { margin: 0; padding: 18px 0; color: var(--enverno-muted); font-size: 14px; }
.rv-form { margin-top: 18px; padding: 20px 22px 22px; }
.rv-howto { margin: 0; padding: 12px 24px 16px; border-top: 1px solid var(--enverno-rule); font-size: 13.5px; line-height: 1.5; color: var(--enverno-muted); }
.rv-ask { padding: 16px 0 20px; border-top: 1px solid var(--enverno-rule); }
.rv-thread .notes + .rv-ask, .rv-thread .quiet-line + .rv-ask { margin-top: 0; }
.review-acts .more { margin-top: 0; }
.rv-fields { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.optional { font-weight: 500; color: var(--enverno-muted); }
textarea.input { resize: vertical; min-height: 44px; font: 15px/1.5 var(--font); }
select.input { appearance: none; background: #fff url("/static/icons/chevron-down.svg") no-repeat right 14px center; padding-right: 36px; }
.rv-submit { width: auto; min-width: var(--button-min-width); margin-top: 14px; justify-self: start; }
.rv-decide form + form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--enverno-rule); }
.dec-q { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--enverno-ink-display); }
.dec-line { margin: 6px 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--enverno-muted); }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; font-size: 14px; line-height: 1.45; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--enverno-pink); flex: none; }
.signing .check input { accent-color: var(--plum); } /* signing is plum, everywhere on the page */
.rv-decide .btn, .adm-form .btn { margin-top: 12px; }
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.hist-name { font-weight: 700; color: var(--enverno-ink-display); }
.hist-meta { grid-column: 1; font-size: 12.5px; color: var(--enverno-muted); }
.hist li > span:last-child { grid-column: 2; grid-row: 1 / span 2; }
.flash { margin: 0 0 20px; padding: 12px 16px; border-radius: 12px; background: var(--pine-soft); color: var(--pine); font-size: 14px; font-weight: 650; }

/* ---------- Admin Hub ---------- */
.nav-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: var(--radius-chip); background: var(--enverno-ink-display); color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.btn.o-ink { color: var(--enverno-ink-display); }
.q-item { padding: 18px 22px 20px; }
.q-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.q-where { font-size: 14px; font-weight: 650; color: var(--enverno-ink-display); }
.q-where a { text-decoration: none; }
.q-where a:hover { text-decoration: underline; text-underline-offset: 3px; }
.q-when { margin-left: auto; font-size: 12.5px; color: var(--enverno-muted); }
.q-body { margin: 10px 0 0; font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.q-next { margin: 8px 0 0; font-size: 13.5px; color: var(--enverno-muted); }
.q-next a { color: var(--enverno-pink-text); font-weight: 650; text-decoration: none; }
.q-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 14px; }
.q-actions form { margin: 0; }
.q-reply { display: flex; flex: 1 1 420px; gap: 12px; align-items: flex-end; }
.q-reply textarea { flex: 1; }
.q-actions .btn { width: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { padding: 12px 18px; text-align: left; font-size: var(--label-size); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--enverno-muted); border-bottom: 1px solid var(--enverno-rule); }
.tbl td { padding: 14px 18px; border-bottom: 1px solid var(--enverno-rule); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl a { font-weight: 650; color: var(--enverno-ink-display); text-decoration: none; }
.tbl a:hover { text-decoration: underline; text-underline-offset: 3px; }
.adm-cut { padding: 18px 22px 20px; }
.adm-cut-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.adm-cut-head h3 { margin: 4px 0 0; font-size: 20px; font-weight: 700; color: var(--enverno-ink-display); }
.adm-thread { margin-top: 14px; gap: 10px; }
.aspect-sync { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.aspect-sync .btn { width: auto; padding: 9px 14px; }
.adm-thread .q-item { box-shadow: none; background: var(--enverno-paper); }
.adm-form { display: grid; gap: 6px; }
.adm-form .field-label { margin: 8px 0 0; }

/* ---------- Add-on quotes and requests ---------- */
.row.quoted { background: var(--enverno-pink-soft); }
.quote-more { grid-column: 1 / -1; padding: 0 10px 18px 78px; background: var(--enverno-pink-soft); }
.quote-inc { font-size: 14px; line-height: 1.55; }
.quote-inc p { margin: 0 0 8px; }
.quote-decide { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px; margin-top: 6px; }
.quote-decide form:first-child { display: grid; gap: 10px; }
.quote-decide .check { margin: 0; }
.quote-decide .btn { width: auto; min-width: var(--button-min-width); }
.quote-more + .row { border-top: 1px solid var(--enverno-rule); }
.paysteps li.is-quoted { border-style: dashed; border-color: var(--enverno-pink); background: var(--enverno-pink-soft); }
.paysteps .is-quoted .ps-dot { border-color: var(--enverno-pink); border-style: dashed; }
.ask-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.ask-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--enverno-rule); font-size: 14px; }
.ask-title { font-weight: 650; color: var(--enverno-ink-display); }
.ask-state { color: var(--enverno-muted); text-align: right; }
.q-draft { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--enverno-paper); border: 1px dashed #d4cdd0; font-size: 13px; color: var(--enverno-muted); }
.q-proposal .q-reply { margin-top: 12px; }
.q-proposal .q-reply input { flex: 0 0 110px; width: 110px; }
.q-proposal .q-reply textarea { flex: 1 1 auto; min-width: 0; }
.q-proposal .q-reply .btn { flex: none; width: auto; }
.q-proposal .q-actions { align-items: center; }
.q-quote { margin-top: 14px; padding: 14px 16px; background: var(--pine-soft); border-radius: 12px; }
.q-quote summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--pine); }
.q-quote form { margin-top: 12px; }
.q-quote .btn { width: auto; }
.btn.pine { background: var(--pine); }
.btn.ember { background: var(--ember); }
.btn.lagoon { background: var(--lagoon); }
.k-ember { color: var(--ember); }
.k-lagoon { color: var(--lagoon); }
.c-ember { background: var(--ember-soft); color: var(--ember); }
.c-lagoon { background: var(--lagoon-soft); color: var(--lagoon); }

/* ---------- Crew portal and settings ---------- */
.crew-day { padding: 20px 22px; }
.crew-day.is-past { opacity: .75; }
.crew-day-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.crew-day-head h2 { margin: 4px 0 2px; font-size: 22px; letter-spacing: -.02em; color: var(--enverno-ink-display); }
.crew-line { margin: 10px 0 0; font-size: 14px; }
.crew-line .ct-k { display: inline-block; min-width: 96px; }
.crew-notes { margin: 10px 0 0; padding: 10px 12px; background: var(--enverno-paper); border-radius: 10px; font-size: 14px; white-space: pre-wrap; }
.crew-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.crew-acts .btn { width: auto; min-width: var(--button-min-width); }
.crew-dl { align-items: flex-start; }
.crew-dl > div { flex: 1; }
.crew-dl p { margin: 0 0 4px; }
.crew-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.crew-form .input { flex: 1 1 200px; width: auto; }
.crew-form .btn { width: auto; }
.crew-ed { align-items: flex-start; }
.crew-ed > div { flex: 1; }
.crew-list { margin-top: 6px; gap: 4px; }
.ed-sub { margin: 18px 0 6px; font-size: var(--label-size); font-weight: 700; letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--enverno-muted); }
.setting { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.setting .pub-line { max-width: 62ch; }
.btn.toggle { width: auto; min-width: 88px; }

/* ---------- Admin editor ---------- */
.crumb { color: inherit; text-decoration: none; }
.crumb:hover { text-decoration: underline; text-underline-offset: 3px; }
.pub-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; padding: 16px 22px; border-left: 0; }
.pub-bar.is-changed { background: var(--butter-soft); border-color: #f0dfa6; }
.pub-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--enverno-ink-display); }
.pub-line { margin: 2px 0 0; font-size: 13px; color: var(--enverno-muted); }
.pub-bar .btn { width: auto; }
/* Project editor tabs: the current one is an ink rule on the track, nothing louder. */
.ed-tabs { display: flex; gap: 22px; margin: 4px 0 18px; border-bottom: 1px solid var(--enverno-rule); overflow-x: auto; scrollbar-width: none; }
.ed-tabs::-webkit-scrollbar { display: none; }
.ed-tabs a { flex: none; padding: 10px 0 11px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--enverno-muted); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.ed-tabs a:hover { color: var(--enverno-ink-display); }
.ed-tabs a[aria-current="page"] { color: var(--enverno-ink-display); border-bottom-color: var(--enverno-ink); }
.ed-tab { max-width: 860px; }
@media (max-width: 640px) { .ed-tabs { flex-wrap: wrap; gap: 0 18px; overflow: visible; } }
.ed-card { padding: 18px 22px 20px; scroll-margin-top: 90px; }
.ed-hint { margin: -6px 0 12px; font-size: 13px; color: var(--enverno-muted); }
.ed-hint a { color: var(--enverno-pink-text); font-weight: 600; }
.ed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-bottom: 14px; }
.fld { display: grid; gap: 6px; align-content: start; }
.fld .field-label { margin: 0; }
.ed-row, .ed-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--enverno-rule); }
.ed-item p { flex: 1; margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.ed-line { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 8px; }
.ed-line .input { width: auto; flex: 1 1 140px; padding: 9px 12px; font-size: 14px; }
.ed-line .input.grow { flex: 3 1 240px; }
.ed-line select.input { flex: 0 1 170px; }
.ed-line .check { margin: 0; white-space: nowrap; font-size: 13px; }
.ed-line .btn, .ed-add .btn { width: auto; padding: 9px 14px; }
.ed-line.sign-link { flex-wrap: nowrap; max-width: 420px; }
.ed-line.sign-link select.input { flex: 1 1 auto; min-width: 0; }
.ed-add { margin-top: 10px; padding-top: 12px; border-top: 1px dashed #d9d3d6; }
.ed-more { margin-top: 12px; }
.ed-more summary { cursor: pointer; font-size: 13px; font-weight: 650; color: var(--enverno-pink-text); }
.ed-more .ed-grid { margin-top: 12px; }
.ed-url { color: var(--enverno-muted); font-size: 12.5px; }
form.inline { margin: 0; display: inline; }
.link-btn.danger { color: var(--enverno-pink-text); text-decoration: none; font-size: 13px; font-weight: 600; }
.link-btn.danger:hover { text-decoration: underline; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.plain-list a { font-weight: 650; color: var(--enverno-ink-display); text-decoration: none; }
.plain-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dir-group + .dir-group { margin-top: 26px; }
.tbl td.nw { white-space: nowrap; }
.tbl td.nw a { font-weight: 500; }
/* Milestone rows: one line each, on a fixed grid. */
.ed-line.ed-ms { display: grid; grid-template-columns: 128px minmax(0, 1fr) 92px auto auto; gap: 6px; }
.ed-line.ed-ms .input { width: 100%; min-width: 0; }

@media (max-width: 1180px) {
  .ov { grid-template-columns: minmax(0, 1fr); }
  .ov-rail { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
  .ov-rail > .ov-h { grid-column: 1 / -1; }
  .cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 0; width: calc(100% - 32px); padding-top: 18px; }
  .top-inner, .main { width: calc(100% - 32px); }
  .side { display: none; }
  .mnav { display: block; }
  .phead.has-still { grid-template-columns: minmax(0, 1fr); }
  .phead.has-still .phead-still { order: -1; }
}

/* Phones: the fact and button drop under the words and line up with them. */
@media (max-width: 560px) {
  .tl { padding: 18px 18px 6px; }
  .nownext { display: grid; }

  .rows { display: block; }
  .row { display: grid; grid-template-columns: var(--disc) minmax(0, 1fr); column-gap: 12px; row-gap: 10px; padding: 18px; }
  .row > .disc { grid-column: 1; }
  .row > .words, .row > .fact, .row > .act { grid-column: 2; }
  .fact, .row > .act { text-align: left; justify-self: start; padding-right: 0; }
  .fact:empty { display: none; }
  .addon-more { margin: 0 18px 18px; }
  .quote-more { padding: 0 18px 18px; }
  .rv-fields { grid-template-columns: minmax(0, 1fr); }
  .rv-cut-act { align-items: flex-start; }
  .q-reply { flex-direction: column; align-items: stretch; }
  .q-when { margin-left: 0; }
  .tbl th:nth-child(4), .tbl td:nth-child(4) { display: none; }
  .ed-grid { grid-template-columns: minmax(0, 1fr); }
  .ed-row, .ed-item { align-items: flex-start; }
  .ed-line.ed-ms { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dir-group .tbl th:nth-child(2), .dir-group .tbl td:nth-child(2) { display: none; }
  .row > .act .btn { width: auto; min-width: var(--button-min-width); }
  .who-email { display: none; }
  .band h2 { font-size: 32px; }
  .projects { gap: 4px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .count { box-shadow: 0 0 0 2px rgb(138 90 0 / .45); }
}

/* Crew back-office (draft) */
.rail-h .chip, .rail-h .tag { margin-left: 8px; vertical-align: 2px; font-size: 12px; padding: 4px 10px; }
.tbl-h { padding: 18px 18px 0; }
.tbl-foot { margin: 0; padding: 14px 18px 18px; }
.tbl .num { text-align: right; }
.tbl tr.tot td { border-top: 1px solid var(--enverno-ink-display); }
.c-muted { background: #f3efed; color: var(--enverno-muted); }
.crew-stats { display: grid; gap: 6px; }
.crew-stats .fact { text-align: left; padding: 0 0 8px; }
.crew-stats .btn { width: auto; justify-self: start; margin-top: 8px; }
.crew-stats .crew-line { margin: 0; }
.crew-mock { margin: 0 0 12px; padding: 10px 12px; border: 1px dashed #d4cdd0; border-radius: 10px; }
.crew-sub { margin: 4px 0 0; font-size: 12.5px; }
.inv-head { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 18px 18px 6px; }
.inv-head p { margin: 0 0 4px; font-size: 14px; }
.ed-item.is-unread p { font-weight: 650; }
.dot-new { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--enverno-pink); vertical-align: 1px; }
.paysteps .ps-name .optional { font-weight: 500; }
/* "Bryce replied in Aspect": an Enverno moment, so a small pink dot and pink text. */
.rv-replied { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 13px; font-weight: 650; color: var(--enverno-pink-text); }
.dot-pink { width: 7px; height: 7px; border-radius: 50%; background: var(--enverno-pink); flex: none; }
.crew .adm-form > .btn, .crew .adm-form .crew-acts .btn { width: auto; justify-self: start; min-width: var(--button-min-width); }
.card > .ed-item:first-child { border-top: 0; }
.crew-stats .crew-line .ct-k { display: inline; min-width: 0; margin-right: 4px; }
.crew-tabs { gap: 4px 24px; margin: 4px 0 26px; border-bottom: 1px solid var(--enverno-hair); font-size: 14px; }
.crew-tabs a { position: relative; padding: 0 0 10px; }
.crew-tabs a[aria-current] { color: var(--enverno-ink-display); font-weight: 700; }
.crew-tabs a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--enverno-ink-display); }
.crew-lines { margin: 4px 0 0; gap: 2px; font-size: 13.5px; color: var(--enverno-muted); }
.crew-totals { display: flex; flex-wrap: wrap; gap: 16px 48px; margin: 0 0 8px; }
.crew-totals .fact { text-align: left; padding: 0; }
.crew-sched { display: inline-flex; align-items: center; gap: 8px; margin: 0 10px 0 0; }
.crew-sched .input { width: 150px; padding: 7px 10px; font-size: 13px; }

/* Crew pay: days with the round-up, the estimate line, Bryce's approve form, the invoice view. */
.pay-days { margin: 12px 0 4px; }
.pay-days td, .pay-days th { padding-left: 0; }
.pay-sum { margin: 14px 0 0; font-size: 14.5px; }
.pay-exp { margin: 10px 0 0; gap: 6px; font-size: 14px; }
.pay-card .pay-approve { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--enverno-hair); }
.pay-card .q-actions { margin-top: 0; }
.invoice-doc .inv-head { grid-template-columns: 1.2fr 1fr 1fr; padding: 22px 18px 6px; }
.invoice-doc .inv-head h1 { margin: 2px 0; font-size: 26px; letter-spacing: -.02em; color: var(--enverno-ink-display); }
.invoice-doc .card > p { padding: 0 18px; }
@media print {
  .no-print, .top { display: none !important; }
  body { background: #fff; }
  .invoice-doc .card { box-shadow: none; border: 0; }
}
.content > .card + .ov-h { margin-top: 30px; }
.content > .card + .ed-hint { margin-top: 14px; }
.pay-card .pay-or { margin: 22px 0 8px; padding-top: 16px; border-top: 1px solid var(--enverno-hair); }
.pay-days td:last-child, .pay-days th:last-child { padding-right: 0; }
@media (max-width: 560px) {
  .pay-days thead { display: none; }
  .pay-days tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--enverno-hair); }
  .pay-days td { padding: 0; border: 0; white-space: normal; }
  .pay-days td:nth-child(even) { text-align: right; }
  .pay-days th:nth-child(4), .pay-days td:nth-child(4) { display: block; } /* every column of a days table stays on phones */
}


/* Expenses with receipts (crew portal and Admin Hub). */
.exp-list { display: grid; gap: 2px; margin: 4px 0 8px; }
.exp-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--enverno-rule); }
.exp-row:last-child { border-bottom: 0; }
.exp-row:has(.thumb + .thumb) { grid-template-columns: auto minmax(0, 1fr) auto; }
.exp-text p { margin: 0 0 2px; }
.exp-side { display: grid; justify-items: end; gap: 6px; }
.thumb { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 1px solid var(--enverno-hair); background: var(--enverno-paper); color: var(--enverno-muted); font-size: 11px; font-weight: 750; text-decoration: none; }
.thumb + .thumb { margin-left: 6px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-none { border-style: dashed; }
.exp-add { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--enverno-hair); }
.file-input { padding: 9px 10px; }
.pay-submit { margin-top: 12px; }
.pay-submit .btn { width: auto; }
/* Ready to pay: one card per request, with how it was paid. */
.pay-ready { padding: 20px 22px; }
.pr-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.pr-who { margin: 0 0 4px; font-weight: 650; }
.pr-amt { display: grid; justify-items: end; gap: 2px; }
.pr-amt strong { font-size: 24px; letter-spacing: -.02em; }
.pr-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 4px; }
.pr-inv { width: auto; min-height: 34px; padding: 6px 14px; }
.pr-form { margin-top: 10px; }
.pr-grid { grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(180px, 1.2fr); }
.pr-form .btn { width: auto; }
.fin-card.is-placeholder { border-style: dashed; }
.acct-mini { display: flex; flex-wrap: wrap; gap: 10px; }
.acct-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px dashed #d4cdd0; border-radius: 10px; color: var(--enverno-ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.acct-state { margin-top: 10px !important; }
.search-hit { text-decoration: none; color: inherit; }
@media (max-width: 760px) { .pr-grid { grid-template-columns: 1fr; } .pr-head { flex-direction: column; } .pr-amt { justify-items: start; } }

/* =================== Contracts: the sheet, the page being placed, signatures, the seal ===================
   One sheet of paper (8.5 wide by 11 tall per page). On a first visit page one is placed on the table and
   the rest follow below it. Signing inks the signature onto its line and stamps the Enverno seal. Still under reduced motion; plain in print. */
:root { --sig-ink: #1f2a5c; --paper: #fffefb; }
.sign-main { max-width: 900px; margin: 0 auto; padding: 36px 24px 90px; }
.signing { background: radial-gradient(1200px 600px at 50% -10%, #fff 0%, var(--enverno-paper) 60%); }
.sheet-wrap { position: relative; width: min(816px, 100%); margin: 0 auto; }
/* A soft shadow all round, not a long one cast downward: paper resting on the desk. */
.sheet { position: relative; width: 100%; background: var(--paper); color: var(--enverno-ink); border-radius: 6px; padding: 64px 76px 54px; box-shadow: 0 0 0 1px rgba(22,22,22,.035), 0 1px 3px rgba(22,22,22,.05), 0 6px 20px -6px rgba(31,24,40,.10); counter-reset: clause; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--enverno-hair); }
.sheet-brand { display: flex; align-items: center; gap: 10px; }
.sheet-brand img { border-radius: 8px; }
.sheet-word { font-weight: 800; font-size: 19px; letter-spacing: -.03em; color: var(--enverno-ink-display); }
.sheet-word span { color: var(--enverno-pink); }
.sheet-x { margin: 0 2px; color: var(--enverno-muted); font-size: 18px; font-weight: 400; }
.sheet-their { display: inline-flex; align-items: center; gap: 10px; }
.sheet-their-logo { display: block; height: 34px; width: auto; max-width: 140px; object-fit: contain; border-radius: 6px; }
.sheet-mono { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--enverno-ink-display); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.sheet-their-name { color: var(--enverno-ink-display); font-size: 13px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.sheet-co { padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--enverno-divider); color: var(--enverno-muted); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sheet-ref { display: grid; justify-items: end; gap: 2px; color: var(--enverno-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sheet-ref span:first-child { color: var(--plum); font-weight: 700; letter-spacing: .06em; }
.sheet-kind { margin: 34px 0 6px; color: var(--plum); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sheet-title { margin: 0 0 18px; font-size: 40px; line-height: 1.06; letter-spacing: -.035em; color: var(--enverno-ink-display); }
.sheet-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 24px; margin: 0 0 30px; padding: 14px 0; border-top: 1px solid var(--enverno-rule); border-bottom: 1px solid var(--enverno-rule); }
.sheet-meta div { min-width: 0; }
.sheet-meta dt { color: var(--enverno-muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sheet-meta dd { margin: 3px 0 0; font-size: 14.5px; font-weight: 600; }
.sheet-body p, .sheet-body li { font-size: 15.5px; line-height: 1.7; max-width: 66ch; }
.sheet-body p { margin: 0 0 12px; }
.sheet-body ul, .sheet-body ol { margin: 0 0 14px; padding-left: 22px; }
.sheet-body li { margin: 0 0 4px; padding-left: 4px; }
.sheet-body li::marker { color: var(--plum); }
.sheet-body strong { font-weight: 650; color: var(--enverno-ink-display); }
.ct-open { margin-bottom: 8px; }
.ct-sec { padding: 18px 0 4px; break-inside: auto; }
.ct-sec h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; font-size: 15px; font-weight: 750; letter-spacing: -.005em; color: var(--enverno-ink-display); break-after: avoid; }
.ct-n { flex: 0 0 auto; min-width: 22px; color: var(--plum); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ct-n::before { counter-increment: clause; content: counter(clause) "."; }
.ct-gap { display: inline-block; padding: 0 7px; border-radius: 6px; background: var(--enverno-pink-soft); color: var(--enverno-pink-text); font-size: .9em; font-weight: 650; border: 1px dashed rgba(217,0,89,.35); }
.ct-break { border: 0; border-top: 1px dashed var(--enverno-hair); margin: 20px 0; }
.ct-sigs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--enverno-hair); break-inside: avoid; scroll-margin-top: 30vh; }
.sig-for { margin: 0 0 4px; color: var(--enverno-muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sig { position: relative; display: flex; align-items: flex-end; height: 74px; margin: 0; padding: 0 4px 4px; border-bottom: 1.5px solid var(--enverno-ink-display); color: var(--sig-ink); white-space: nowrap; overflow: visible; }
.sig span { display: inline-block; line-height: 1; transform-origin: left bottom; }
.sig-empty { border-bottom: 1.5px dashed #c9c1c4; }
.sig-delafield { font-family: SigDelafield, cursive; font-size: 54px; }
.sig-greatvibes { font-family: SigGreatVibes, cursive; font-size: 42px; }
.sig-allura { font-family: SigAllura, cursive; font-size: 46px; }
.sig-dancing { font-family: SigDancing, cursive; font-size: 36px; font-weight: 600; }
.sig-drawn svg { width: 100%; max-width: 280px; height: 76px; overflow: visible; }
.sig-drawn path { fill: none; stroke: var(--sig-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sig-who { margin: 8px 0 2px; font-size: 14px; }
.sig-when { margin: 0; color: var(--enverno-muted); font-size: 12.5px; }
.sheet-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--enverno-rule); color: var(--enverno-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
/* The stamp: once they've signed, the Enverno seal sits on the signatures. */
.ct-stamp { position: absolute; left: calc(50% - 58px); top: 58px; width: 76px; height: 76px; display: grid; place-items: center; transform: rotate(-9deg); pointer-events: none; }
.ct-stamp svg { position: absolute; inset: 0; }
.ct-stamp .st-ring { fill: none; stroke: var(--plum); stroke-width: 2; opacity: .85; }
.ct-stamp .st-ring2 { fill: none; stroke: var(--plum); stroke-width: .8; opacity: .55; }
.ct-stamp text { fill: var(--plum); font-size: 7.8px; font-weight: 800; }
.ct-stamp svg { opacity: .92; mix-blend-mode: multiply; }
.ct-stamp img { position: relative; width: 24px; height: 24px; border-radius: 6px; opacity: .95; }
/* First visit: the agreement rises from low on the screen (its top a little past halfway down)
   with its top edge lifted toward you, then settles flat where it sits and its shadow lands. */
.sheet-wrap.unfold > .sheet { transform-origin: 50% 70vh; animation: page-place .95s cubic-bezier(.16,1,.3,1) .05s backwards; }
@keyframes page-place {
  from { opacity: 0; transform: perspective(2400px) translateY(46vh) rotateX(-8deg); box-shadow: 0 2px 4px rgba(22,22,22,.02), 0 60px 90px -40px rgba(31,24,40,.22); }
  30% { opacity: 1; }
  to { opacity: 1; transform: perspective(2400px) translateY(0) rotateX(0); box-shadow: 0 1px 1px rgba(22,22,22,.04), 0 2px 6px rgba(22,22,22,.04), 0 24px 60px -28px rgba(31,24,40,.28); } }
/* Above the sheet: back to their portal on the left, the PDF on the right wall. */
.sign-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: min(816px, 100%); margin: 0 auto 18px; }
.sign-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; color: var(--enverno-muted); text-decoration: none; }
.sign-back:hover { color: var(--enverno-ink-display); }
.sign-back svg, .btn-sm svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn.btn-sm { width: auto; padding: 9px 14px; font-size: 13.5px; }
.sign-tools { display: inline-flex; align-items: center; gap: 10px; }
/* Pages: a quiet switch; on, it reads ink. */
.pg-toggle { position: relative; display: inline-grid; place-items: center; box-sizing: border-box; width: 40px; height: 40px; padding: 0; border: 1px solid var(--enverno-hair); border-radius: 10px; background: var(--enverno-surface); color: var(--enverno-muted); font: inherit; cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
/* Its name, below it, on hover or keyboard focus. */
.pg-tip { position: absolute; top: calc(100% + 7px); left: 50%; z-index: 5; padding: 5px 9px; border-radius: 8px; background: var(--enverno-ink-display); color: #fff; font-size: 12px; font-weight: 650; white-space: nowrap; opacity: 0; transform: translate(-50%, -3px); transition: opacity .16s ease, transform .22s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.pg-toggle:hover .pg-tip, .pg-toggle:focus-visible .pg-tip { opacity: 1; transform: translate(-50%, 0); transition-delay: .25s, .25s; }
.pg-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.pg-toggle svg rect { transition: transform .5s cubic-bezier(.2,.8,.2,1); transform-box: fill-box; }
.pg-toggle:hover { color: var(--enverno-ink-display); border-color: #d9d1d4; }
.pg-toggle[aria-pressed="true"] { color: var(--enverno-ink-display); border-color: var(--enverno-ink-display); }
.pg-toggle[aria-pressed="true"] svg rect:first-child { transform: translateY(-1.5px); }
.pg-toggle[aria-pressed="true"] svg rect:last-child { transform: translateY(1.5px); }
/* The page view: between two pages, the rest of the first page's paper (with its number), a
   gap, and the next page's top margin. All three grow from nothing, so the sheet
   eases apart; turning it off closes them again. */
.pg-gap { position: relative; display: block; }
.pg-gap > span { display: block; height: 0; transition: height .75s cubic-bezier(.22,1,.36,1); }
.pg-gap.is-still > span { transition: none; }
.pg-fill { position: relative; }
.pg-num { position: absolute; right: 0; bottom: 18px; color: var(--enverno-faint); font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .04em; opacity: 0; transition: opacity .4s ease .35s; white-space: nowrap; }
.pg-gap.is-open .pg-num { opacity: 1; }
.pg-band { position: relative; }
.pg-end .pg-num { display: none; } /* the footer ends the last page */
/* Paged, the sheet turns clear and each page is its own card of paper behind the words. */
.sheet.is-paged { background: transparent; box-shadow: none; isolation: isolate; }
/* Each page the same soft, even shadow, so the gap between pages reads as the desk, not as the shadow of the page above. */
.pg-paper { position: absolute; left: 0; right: 0; z-index: -1; border-radius: 6px; background: var(--paper); box-shadow: 0 0 0 1px rgba(22,22,22,.035), 0 1px 3px rgba(22,22,22,.05), 0 4px 14px -6px rgba(31,24,40,.09); pointer-events: none; }
.sheet.is-paged .ct-break { visibility: hidden; margin: 0; height: 0; }
@media (prefers-reduced-motion: reduce) { .pg-gap > span, .pg-num, .pg-toggle svg rect, .pg-tip { transition: none; } }
@media print { .pg-gap, .pg-toggle, .pg-paper { display: none !important; } .sheet.is-paged { background: var(--paper); } }
@media (max-width: 719px) { .pg-toggle { display: none; } }
/* A new version: what it replaces, and the "What changed" view. Added words in pine, removed struck. */
.ver-note { display: flex; justify-content: space-between; align-items: center; gap: 18px; width: min(816px, 100%); margin: 0 auto 18px; padding: 14px 18px; background: var(--enverno-surface); border: 1px solid rgba(142,36,112,.22); border-radius: 12px; }
.ver-note p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--enverno-ink); }
.ver-note .label { margin-right: 8px; }
.sheet ins, .ver-note ins { text-decoration: none; background: #e3f2eb; color: #0a5c45; border-radius: 3px; padding: 0 2px; }
.sheet del, .ver-note del { text-decoration: line-through; text-decoration-color: rgba(31,24,40,.5); color: var(--enverno-muted); background: #f3efed; border-radius: 3px; padding: 0 2px; }
.ct-sec-del { opacity: .8; }
@media (max-width: 640px) { .ver-note { flex-direction: column; align-items: flex-start; } }
/* Version history: every version in the line, newest first, to read or compare. */
.ver-note, .sheet-wrap { scroll-margin-top: 90px; }
.versions { width: min(816px, 100%); margin: 0 auto 18px; padding: 0 18px; background: var(--enverno-surface); border: 1px solid var(--enverno-hair); border-radius: 12px; }
.versions > summary { display: flex; align-items: center; gap: 10px; padding: 13px 0; cursor: pointer; list-style: none; font-size: 14px; font-weight: 650; color: var(--enverno-ink-display); }
.versions > summary::-webkit-details-marker { display: none; }
.versions > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 1.5px solid var(--enverno-muted); border-bottom: 1.5px solid var(--enverno-muted); transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.versions[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.vh-list { list-style: none; margin: 0; padding: 0 0 6px; border-top: 1px solid var(--enverno-rule); }
.vh-list li { display: grid; grid-template-columns: minmax(150px, auto) 1fr auto; align-items: center; gap: 6px 16px; padding: 11px 0; font-size: 14px; }
.vh-list li + li { border-top: 1px solid var(--enverno-rule); }
.vh-n { font-weight: 700; color: var(--enverno-ink-display); font-variant-numeric: tabular-nums; }
.vh-n .chip { margin-left: 6px; font-size: 11px; padding: 2px 8px; }
.vh-when { color: var(--enverno-muted); }
.vh-acts { display: flex; gap: 14px; justify-content: flex-end; }
.vh-acts a { font-weight: 650; color: var(--plum); text-decoration: none; }
.vh-acts a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vh-list li.is-here .vh-n { color: var(--plum); }
.sheet-wrap.is-old .sheet { box-shadow: 0 0 0 1px rgba(22,22,22,.035), 0 1px 3px rgba(22,22,22,.04), 0 4px 14px -6px rgba(31,24,40,.08); }
.sheet-wrap.is-old .sheet::after { content: "Replaced"; position: absolute; top: 28px; right: -6px; padding: 4px 12px; border-radius: 6px 0 0 6px; background: #f3efed; color: var(--enverno-muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 640px) { .vh-list li { grid-template-columns: 1fr auto; } .vh-when { grid-column: 1 / -1; grid-row: 2; } }
/* The signature: one style, shown on its line, with "Change style" for the rest. */
.sig-change { margin-top: 8px; }
.sig-change > summary { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 14px 16px 10px; border: 1.5px solid var(--plum); border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 3px rgba(142,36,112,.1); cursor: pointer; list-style: none; }
.sig-change > summary::-webkit-details-marker { display: none; }
.sig-now { flex: 1; min-width: 0; padding: 10px 0 6px; border-bottom: 1.5px solid var(--enverno-ink-display); color: var(--sig-ink); line-height: 1.35; white-space: nowrap; overflow: hidden; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; }
/* Script capitals (Flowing's most of all) rise well above the line: long names are trimmed
   sideways only, never across the top. */
.sig-now > span { display: none; }
.sig-change-l { flex: none; padding-bottom: 6px; font-size: 13px; font-weight: 650; color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }
.sig-change[open] .sig-change-l { color: var(--enverno-muted); }
.sig-change .sig-options { margin-top: 10px; }
.sig-now .sig-delafield { font-size: 40px; } .sig-now .sig-greatvibes { font-size: 32px; } .sig-now .sig-allura { font-size: 34px; } .sig-now .sig-dancing { font-size: 27px; } .sig-now .sig-draw-hint { font-size: 15px; }
.sig-pick:has(input[value="delafield"]:checked) .sn-delafield, .sig-pick:has(input[value="greatvibes"]:checked) .sn-greatvibes, .sig-pick:has(input[value="allura"]:checked) .sn-allura,
.sig-pick:has(input[value="dancing"]:checked) .sn-dancing, .sig-pick:has(input[value="drawn"]:checked) .sn-drawn { display: inline-block; }
/* The way down to the signing box: floats at the foot of the screen until the box is in view. */
.sign-jump { position: fixed; left: 50%; bottom: 22px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 16px; border-radius: var(--radius-button); background: var(--plum); color: #fff; font-size: 15px; font-weight: 650; text-decoration: none;
  box-shadow: 0 10px 30px -10px rgba(78, 18, 62, .55), 0 2px 6px rgba(78, 18, 62, .2); transform: translateX(-50%); transition: opacity .25s ease, transform .25s ease, visibility 0s; animation: jump-in .4s cubic-bezier(.2,.7,.2,1) .7s backwards; }
.sign-jump:hover { background: #7a1d60; }
.sign-jump .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sign-jump.is-there { opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; }
@keyframes jump-in { from { opacity: 0; transform: translate(-50%, 12px); } }
/* Signing: the signature inks on, the stamp lands. */
.just-signed .sig.ink span { animation: ink-wipe 1.15s cubic-bezier(.55,.1,.3,1) .45s backwards; }
.just-signed .sig.ink path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ink-draw 1.5s cubic-bezier(.55,.1,.3,1) .45s forwards; }
.just-signed .ct-stamp { animation: stamp-press .55s cubic-bezier(.3,1.5,.5,1) 1.7s both; }
/* The wipe only reveals left to right; it leaves generous room above and below, and once it has
   finished there's no clip at all, so no flourish is ever trimmed. */
@keyframes ink-wipe { from { clip-path: inset(-150% 100% -100% -40%); } to { clip-path: inset(-150% -40% -100% -40%); } }
@keyframes ink-draw { to { stroke-dashoffset: 0; } }
@keyframes stamp-press { 0% { opacity: 0; transform: rotate(-9deg) scale(1.9); filter: blur(2px); } 60% { opacity: 1; transform: rotate(-9deg) scale(.94); filter: none; } 100% { transform: rotate(-9deg) scale(1); } }
/* The seal banner above a signed agreement. */
.seal { display: grid; justify-items: center; text-align: center; margin: 0 auto 26px; padding: 8px 20px 18px; }
.seal-mark { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.seal-glow { position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(142,36,112,.18), rgba(142,36,112,0) 70%); }
.seal-mark img { position: relative; border-radius: 14px; box-shadow: 0 10px 24px -10px rgba(142,36,112,.55); }
.seal-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.seal-track { fill: var(--plum-soft); stroke: none; }
.seal-draw { fill: none; stroke: var(--plum); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 0; }
.seal.fresh .seal-draw { stroke-dashoffset: 340; animation: seal-draw 1s cubic-bezier(.6,0,.2,1) .1s forwards; }
.seal.fresh .seal-mark img { animation: seal-press .7s cubic-bezier(.3,1.4,.5,1) .55s both; }
.seal.fresh .seal-glow { animation: glow 1.6s ease-out .6s both; }
.seal.fresh .seal-line, .seal.fresh .seal-sub, .seal.fresh .seal-links { animation: seal-rise .6s ease-out 1.05s both; }
.seal-line { display: flex; gap: 10px; align-items: baseline; margin: 16px 0 4px; }
.seal-date { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--enverno-ink-display); }
.seal-sub { margin: 0; color: var(--enverno-muted); }
.seal-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin: 14px 0 0; font-size: 14px; }
.seal-links .btn { width: auto; min-height: 40px; }
@keyframes seal-draw { to { stroke-dashoffset: 0; } }
@keyframes seal-press { 0% { opacity: 0; transform: scale(1.7); } 60% { opacity: 1; transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes seal-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes glow { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; } 100% { opacity: .5; transform: scale(1.25); } }
/* The signing panel: three steps, then adopt a signature. */
.sign-panel { width: min(816px, 100%); margin: 26px auto 0; scroll-margin-top: 90px; padding: 28px 32px 30px; border-color: rgba(142,36,112,.24); box-shadow: 0 1px 3px rgba(142,36,112,.06), 0 6px 20px -8px rgba(142,36,112,.16); }
.sheet-wrap.unfold ~ .sign-panel { animation: seal-rise .6s ease-out .7s both; }
.sign-panel h2 { margin: 6px 0 12px; font-size: 26px; letter-spacing: -.025em; color: var(--enverno-ink-display); }
.sign-panel .adm-form .btn, .sign-panel .btn { width: auto; min-width: var(--button-min-width); }
.sign-panel .inline { margin-top: 12px; }
.sign-steps { display: flex; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; counter-reset: step; }
.sign-steps li { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; color: var(--enverno-muted); font-size: 12.5px; font-weight: 650; }
.sign-steps li::before { counter-increment: step; content: counter(step); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid #d8cfd4; font-size: 11px; }
.sign-steps li.done { color: var(--plum); }
.sign-steps li.done::before { content: "✓"; background: var(--plum); border-color: var(--plum); color: #fff; }
.sign-steps li.now { color: var(--enverno-ink-display); background: var(--plum-soft); }
.sign-steps li.now::before { border-color: var(--plum); color: var(--plum); }
/* Read it: a drawn check. With JavaScript it waits empty until the signing box comes into view,
   then the disc fills and the check draws itself; scrolling back up resets it. */
.sign-steps li.st-read::before { display: none; }
.st-mark { position: relative; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--plum); background: var(--plum); transition: background-color .32s cubic-bezier(.2,.7,.2,1), border-color .32s ease, transform .45s cubic-bezier(.3,1.6,.5,1); }
.st-mark svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.st-mark path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .42s cubic-bezier(.65,0,.35,1) .16s; }
.st-read { transition: color .3s ease; }
.st-read.is-waiting { color: var(--enverno-muted); }
.st-read.is-waiting .st-mark { background: transparent; border-color: #d8cfd4; transform: scale(.86); }
.st-read.is-waiting .st-mark path { stroke-dashoffset: 1; transition: none; }
@media (prefers-reduced-motion: reduce) { .st-mark, .st-mark path, .st-read { transition: none; } }
.sign-terms { margin: 14px 0 16px; }
.sign-terms summary { color: var(--plum); }
.sign-terms-body p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; }
.sig-pick { margin: 6px 0 14px; padding: 0; border: 0; }
.sig-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 8px; }
.sig-opt { position: relative; cursor: pointer; }
.sig-opt input { position: absolute; opacity: 0; inset: 0; }
.sig-opt-card { display: grid; gap: 6px; height: 100%; padding: 14px 14px 10px; border: 1.5px solid var(--enverno-hair); border-radius: 12px; background: var(--paper); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.sig-opt:hover .sig-opt-card { border-color: #d9c9d3; transform: translateY(-1px); }
.sig-opt input:checked + .sig-opt-card { border-color: var(--plum); box-shadow: 0 0 0 3px rgba(142,36,112,.14); }
.sig-opt input:focus-visible + .sig-opt-card { outline: 3px solid var(--enverno-focus); outline-offset: 2px; }
.sig-preview { display: block; min-height: 52px; padding: 8px 0 4px; border-bottom: 1px solid #d8d0d4; color: var(--sig-ink); line-height: 1.35; white-space: nowrap; overflow: hidden; overflow-x: clip; overflow-y: visible; text-overflow: clip; }
.sig-preview.sig-delafield { font-size: 40px; } .sig-preview.sig-greatvibes { font-size: 32px; } .sig-preview.sig-allura { font-size: 34px; } .sig-preview.sig-dancing { font-size: 27px; }
.sig-draw-hint { font-size: 15px; color: var(--enverno-muted); display: flex; align-items: center; }
.sig-opt-name { color: var(--enverno-muted); font-size: 12px; font-weight: 650; }
.sig-pad { position: relative; margin-top: 12px; border: 1.5px dashed #d0c5cb; border-radius: 12px; background: var(--paper); }
.sig-pad canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; touch-action: none; cursor: crosshair; --sig-ink: #1f2a5c; }
.sig-pad-line { position: absolute; left: 6%; right: 6%; bottom: 26%; border-bottom: 1.5px solid #cfc4ca; pointer-events: none; }
.sig-pad [data-sig-clear] { position: absolute; right: 12px; top: 8px; }
.sig-pad.needs-ink { border-color: var(--enverno-pink-text); }
.sign-form.is-signing .sign-go { opacity: .7; transform: scale(.98); }
.sign-foot { margin-top: 18px; text-align: center; }
.cert h1 { margin: 6px 0 14px; font-size: 28px; letter-spacing: -.02em; color: var(--enverno-ink-display); }
.cert .rail-h { margin-top: 24px; }
.cert-facts { display: flex; gap: 40px; margin: 0 0 14px; }
.cert-facts .fact { text-align: left; padding: 0; }
.cert-facts .fact strong { font-size: 20px; }
.cert-hash { display: grid; gap: 4px; }
.cert-hash code { font: 12.5px/1.5 ui-monospace, Menlo, monospace; word-break: break-all; color: var(--enverno-ink); }
.cert-sig .sig { height: 48px; border-bottom: 0; }
.cert-sig .sig-delafield { font-size: 34px; } .cert-sig .sig-greatvibes { font-size: 28px; } .cert-sig .sig-allura { font-size: 30px; } .cert-sig .sig-dancing { font-size: 24px; }
.cert-sig .sig-drawn svg { height: 48px; max-width: 160px; }
.chip-fields { display: grid; gap: 8px; margin: 8px 0 10px; }
.chip-fields div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; font-size: 14px; }
.chip-fields dt { color: var(--enverno-muted); }
.chip-fields dd { margin: 0; }
.ct-preview .sheet { box-shadow: 0 1px 2px rgba(22,22,22,.05), 0 10px 30px -18px rgba(22,22,22,.25); }
.tpl-title { font-size: 24px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 640px) {
  .sign-main { padding: 18px 10px 60px; }
  .sheet { padding: 30px 22px 28px; }
  .sheet-title { font-size: 30px; }
  .sheet-co { display: none; }
  .ct-sigs { grid-template-columns: 1fr; gap: 28px; }
  .ct-stamp { left: auto; right: 0; top: 66px; width: 66px; height: 66px; }
  .sign-panel { padding: 22px 18px 24px; }
  .sign-steps li { font-size: 11.5px; padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet-wrap.unfold > .sheet, .sheet-wrap.unfold ~ .sign-panel, .sign-jump, .just-signed .sig.ink span, .just-signed .ct-stamp, .seal.fresh *, .seal.fresh .seal-mark img { animation: none !important; }
  .just-signed .sig.ink path, .seal.fresh .seal-draw { animation: none !important; stroke-dashoffset: 0; }
}
/* Print and PDF (8.5 × 11): the sheet as the page, then the certificate. */
@media print {
  .signing .top, .sign-panel, .sign-foot, .seal, .sign-jump, .sign-bar, .ver-note { display: none !important; }
  .sheet-wrap, .sheet-wrap.unfold > .sheet { animation: none !important; }
}
.print-doc { background: #fff; }
.print-doc .sheet { width: 100%; max-width: none; padding: 0 0.75in; border-radius: 0; box-shadow: none; background: #fff; }
.print-doc .sheet-title { font-size: 30pt; }
.print-doc .sheet-body p, .print-doc .sheet-body li { font-size: 10.5pt; line-height: 1.55; max-width: none; }
.print-doc .ct-sec h2 { font-size: 11pt; }
.print-doc .ct-break { break-after: page; border: 0; margin: 0; }
.print-doc .sheet-foot { display: none; }
.print-doc .print-cert { break-before: page; padding: 0 0.75in; }
.print-doc .print-cert .cert { border: 0; box-shadow: none; padding: 0; }

/* Crew: forms folded behind one button, no script. */
.crew-fold > summary { list-style: none; width: max-content; cursor: pointer; }
.crew-fold > summary::-webkit-details-marker { display: none; }
details.card.crew-fold:not([open]) { padding: 0; background: none; border: 0; box-shadow: none; }
details.crew-fold[open] > summary { margin-bottom: 14px; }
.exp-fold { margin-top: 12px; }
@media (max-width: 640px) {
  .exp-row { grid-template-columns: 56px minmax(0, 1fr); }
  .exp-row > .exp-side { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; }
}
.signin .input + .field-label { margin-top: 16px; }
.act-pair { display: inline-flex; align-items: center; gap: 16px; }
.act-pair .link-btn { font-weight: 650; }
/* A step already taken care of, checked off inside its steps card. */
.disc.disc-done { display: grid; place-items: center; border-radius: 50%; }
.disc-done svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.row.is-done .title { color: var(--enverno-muted); }
/* Already signed in: who, Continue, Sign out; the form below still signs in as someone else. */
.signed-as { margin: 16px 0 20px; padding: 14px 16px; border: 1px solid var(--enverno-hair); border-radius: 12px; background: var(--enverno-paper); font-size: 14px; }
.signed-as p { margin: 0; }
.signed-as-acts { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.signed-as-acts .btn { width: auto; }
.signed-as .ct-k { margin-top: 10px !important; }
/* Phones: both marks on one line (their name is in the meta below), the reference under them. */
@media (max-width: 640px) {
  .sheet-head { flex-wrap: wrap; gap: 12px; }
  .sheet-their-name { display: none; }
  .sheet-ref { flex-basis: 100%; grid-auto-flow: column; justify-content: start; gap: 10px; }
}
/* Coming up, quietly: while something needs the client, the dates without coloured buttons. */
.coming-quiet { list-style: none; margin: 0; padding: 4px 24px; }
.coming-quiet li { display: grid; grid-template-columns: minmax(150px, max-content) 1fr auto; align-items: baseline; gap: 4px 18px; padding: 13px 0; font-size: 14.5px; }
.coming-quiet li + li { border-top: 1px solid var(--enverno-rule); }
.cq-when { font-weight: 700; color: var(--enverno-ink-display); }
.cq-what { color: var(--enverno-ink); }
.cq-cal { justify-self: end; font-size: 13px; font-weight: 650; color: var(--enverno-muted); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cq-cal:hover { color: var(--enverno-ink-display); }
@media (max-width: 560px) { .coming-quiet li { grid-template-columns: 1fr auto; } .cq-what { grid-column: 1; } }
/* Bryce's preview of a client page (Admin Hub › project › Preview as …). */
.preview-bar { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; padding: 10px 24px; background: var(--enverno-ink-display); color: #fff; font-size: 13.5px; }
.preview-bar p { margin: 0; }
.preview-bar a { color: #fff; font-weight: 650; }
body[data-preview] .top { top: 41px; }
/* A finished project: the ink band with the still inset (decision D8), then what's kept. */
.arch-band { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; padding: 30px 30px 32px; border-radius: var(--radius-card); background: var(--enverno-ink-display); color: #fff; }
.arch-band.has-still { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.arch-band .label { color: #ffd5e5; }
.arch-band h1 { margin: 8px 0 6px; color: #fff; }
.arch-band .lede { color: #d9d4d6; }
.arch-still { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.arch-more { margin: 0 24px 18px; }
.arch-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px 24px 4px; }
.arch-thumbs img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--enverno-hair); }
.decisions { list-style: none; margin: 0; padding: 4px 24px; }
.decisions li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 12px 0; font-size: 14.5px; }
.decisions li + li { border-top: 1px solid var(--enverno-rule); }
.dc-when { font-weight: 700; color: var(--enverno-ink-display); white-space: nowrap; }
@media (max-width: 760px) { .arch-band.has-still { grid-template-columns: 1fr; } .arch-band { padding: 22px; } }
.dc-h { margin-top: 28px; }
/* Try it as (render/admin.js tryPage) */
.try-made { display: grid; gap: 6px; margin-bottom: 18px; border-color: var(--enverno-pink); }
.try-link { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.try-mail summary { display: grid; gap: 2px; cursor: pointer; list-style: none; }
.try-mail summary::-webkit-details-marker { display: none; }
.try-body { margin: 12px 0 0; white-space: pre-wrap; word-break: break-word; font: 13px/1.55 var(--font); color: var(--enverno-ink); }
.try-designed { margin: 12px 0 0; }

/* The signing code as boxes (web/app/otp.js). Adapted from affectUI's OTP Input (MIT); plum for signing. */
.otp { container-type: inline-size; width: 100%; max-width: 360px; }
/* Boxes as tall as the text field beside them (.input: 12px padding, 15px text, 1px border). */
.otp-slots { --gap: 8px; --size: min(46px, calc((100cqi - (var(--n) - 1) * var(--gap)) / var(--n))); --box-h: 46px; position: relative; display: inline-flex; gap: var(--gap); }
.otp-box { position: relative; display: grid; place-items: center; flex: none; width: var(--size); height: var(--box-h); overflow: hidden; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #d9d3d6; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--enverno-ink-display); transition: box-shadow .22s ease, background-color .22s ease; }
.otp-box[data-filled] { background: #fff; box-shadow: inset 0 0 0 1px #c9c0c5; }
.otp-char { display: block; animation: otp-pop .28s cubic-bezier(.22,1,.36,1) both; }
@keyframes otp-pop { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }
.otp-ring { position: absolute; top: 0; left: 0; z-index: 1; display: grid; place-items: center; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--plum), 0 0 0 4px var(--plum-soft); opacity: 0; pointer-events: none; transition: transform .26s cubic-bezier(.22,1,.36,1), opacity .18s ease, box-shadow .22s ease; }
.otp-ring[data-show] { opacity: 1; }
.otp-caret { width: 1.5px; height: 40%; border-radius: 1px; background: var(--plum); opacity: 0; }
/* It blinks only while the field has focus (the ring shows), so an idle page has no endless motion. */
.otp-ring[data-show] .otp-caret[data-show] { animation: otp-blink 1.1s ease-in-out infinite; }
@keyframes otp-blink { 0%, 100% { opacity: 0; } 45%, 55% { opacity: 1; } }
.otp-input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: none; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: -1em; cursor: text; appearance: none; box-shadow: none; }
.otp-input::selection { background: transparent; }
.otp-slots .otp-input:focus, .otp-slots .otp-input:focus-visible { outline: none; box-shadow: none; border: 0; }
.otp-slots:has(.otp-input:focus-visible) .otp-ring { box-shadow: inset 0 0 0 1.5px var(--plum), 0 0 0 4px var(--plum-soft), 0 0 0 6px rgba(142, 36, 112, .25); }
/* A code the server turned down: the borders go pink-red, once with a calm shake. */
.otp[data-error] .otp-box { box-shadow: inset 0 0 0 1px rgba(217, 0, 89, .55); }
.otp[data-error] .otp-ring { box-shadow: inset 0 0 0 1.5px var(--enverno-pink-text), 0 0 0 4px var(--enverno-pink-soft); }
.otp[data-error] .otp-caret { background: var(--enverno-pink-text); }
.otp-shake { animation: otp-shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes otp-shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
/* Signing: a soft light passes over the boxes, one after another. */
.otp-box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.9) 50%, transparent 80%); transform: translateX(-120%); opacity: 0; pointer-events: none; }
.otp[data-status="checking"] .otp-box::after { opacity: 1; animation: otp-shimmer 1.3s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms); }
.otp[data-status="checking"] .otp-box { background: var(--plum-soft); }
@keyframes otp-shimmer { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .otp-char, .otp-shake, .otp-ring[data-show] .otp-caret[data-show], .otp[data-status="checking"] .otp-box::after { animation: none; } .otp-ring[data-show] .otp-caret[data-show] { opacity: 1; } .otp-ring { transition: none; } }

/* Progress Tracker on the client's steps card (render/components.js stepsCard), CSS only: the bar
   fills to what's done and the done ticks draw themselves. Adapted from affectUI (MIT). */
.st-track { display: block; height: 5px; margin: 8px 0 4px; overflow: hidden; border-radius: 3px; background: var(--enverno-rule, #f0edeb); max-width: 220px; }
.st-fill { display: block; height: 100%; border-radius: 3px; background: var(--pine); transform-origin: left; transform: scaleX(var(--st, 0)); animation: st-fill .9s .15s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes st-fill { from { transform: scaleX(0); } }
.st-f0-2 { --st: 0.000; }
.st-f1-2 { --st: 0.500; }
.st-f2-2 { --st: 1.000; }
.st-f0-3 { --st: 0.000; }
.st-f1-3 { --st: 0.333; }
.st-f2-3 { --st: 0.667; }
.st-f3-3 { --st: 1.000; }
.st-f0-4 { --st: 0.000; }
.st-f1-4 { --st: 0.250; }
.st-f2-4 { --st: 0.500; }
.st-f3-4 { --st: 0.750; }
.st-f4-4 { --st: 1.000; }
.st-f0-5 { --st: 0.000; }
.st-f1-5 { --st: 0.200; }
.st-f2-5 { --st: 0.400; }
.st-f3-5 { --st: 0.600; }
.st-f4-5 { --st: 0.800; }
.st-f5-5 { --st: 1.000; }
.st-f0-6 { --st: 0.000; }
.st-f1-6 { --st: 0.167; }
.st-f2-6 { --st: 0.333; }
.st-f3-6 { --st: 0.500; }
.st-f4-6 { --st: 0.667; }
.st-f5-6 { --st: 0.833; }
.st-f6-6 { --st: 1.000; }
.row.is-done .disc-done path { stroke-dasharray: 1; stroke-dashoffset: 0; animation: st-tick .5s .35s ease backwards; }
@keyframes st-tick { from { stroke-dashoffset: 1; } }
@media (prefers-reduced-motion: reduce) { .st-fill, .row.is-done .disc-done path { animation: none; } }