/* door.css — GENERATED, COMPONENTS ONLY. Do not hand-edit; re-run the extractor.
 *
 * The design round's component rules. Produced by scripts/extract-door.mjs from
 * the round's own door.css; the rule is in that script's header.
 *
 *   source        salocin/Design/rounds/mhf/2026-09-17-portal-front-door-r2/_ui/door.css
 *   source sha256 0459aab070c20d9945f6c2bfc99f5cde1256f03cdc42ce8652e1a00baa4d6fcf
 *   kept          288 blocks
 *   dropped       5 blocks — 4 @font-face and 1 :root, both now owned by tokens.css
 *   removed       19 Schedule .path/.stop rules (R-4) — shell.css draws the Schedule
 *
 * The round's copy of those blocks came from the website at 72b90db. tokens.css
 * carries them from 605bf19, the sha that actually shipped. Keeping one owner is
 * what makes the next website copy a replacement rather than a merge.
 * An edit to this file fails test/tokens-provenance.test.mjs.
 */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);       /* the site's settle curve family */
  --t-step: 460ms;
  --field-h: clamp(46px, 6vh, 56px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100%; background: var(--ground); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.022em; line-height: var(--lh-tight); }

p { margin: 0; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.bg-logo { position: absolute; top: 50%; left: 50%; width: calc(min(190vw, 1500px) * var(--bg-scale)); aspect-ratio: var(--bg-ratio); transform: translate(-50%, -50%); background: var(--bg-image) center / 100% 100% no-repeat; }

.bg-scrim { position: absolute; inset: 0; background: var(--ground); opacity: var(--scrim); }

body[data-surface='app'] .bg-scrim { opacity: .62; }

.glassy { background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); }

.btn { appearance: none; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--pill-h); padding: 0 clamp(18px, 2.2vw, 30px); border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: 500; white-space: nowrap; text-decoration: none;
  transition: transform .18s var(--ease-out), filter .18s, opacity .18s; }

.btn:hover { filter: brightness(1.08); }

.btn:active { transform: scale(.98); }

.btn[data-style='blue'] { background: var(--blue); color: #fff; }

.btn[data-style='green'] { background: var(--green); color: #fff; }

.btn[data-style='wine'] { background: var(--wine); color: #fff; }

.btn[data-style='outline'] { background: transparent; color: inherit; border-color: currentColor; }

.btn[data-style='quiet'] { background: transparent; color: var(--ink-soft); min-height: 0; padding: 6px 4px; text-decoration: underline; text-underline-offset: 3px; }

.btn[disabled], .btn[aria-disabled='true'] { opacity: .38; cursor: not-allowed; filter: none; transform: none; }

.btn[data-wide] { width: 100%; }

.btn-arrow { width: var(--pill-h); padding: 0; flex: 0 0 auto; border: 1px solid currentColor; background: transparent; }

.eyebrow { display: inline-flex; width: fit-content; justify-self: start; align-items: center; gap: 7px; align-self: flex-start; padding: .42em 1.05em; border-radius: var(--r-pill); font-size: var(--fs-eyebrow); font-weight: 600; }

.eyebrow[data-tone='green'] { background: var(--eyebrow-green-bg); color: var(--green); }

.eyebrow[data-tone='blue'] { background: var(--eyebrow-blue-bg); color: var(--blue); }

.eyebrow[data-tone='wine'] { background: var(--tag-on-wine); color: var(--wine); }

.eyebrow[data-tone='grey'] { background: var(--tag-grey); color: var(--ink); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: .2em .8em; border-radius: var(--r-pill); font-size: clamp(.64rem, 1vw, .74rem); font-weight: 500; white-space: nowrap; }

.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.pill[data-tone='green'] { background: var(--eyebrow-green-bg); color: var(--green); }

.pill[data-tone='blue'] { background: var(--eyebrow-blue-bg); color: var(--blue); }

.pill[data-tone='wine'] { background: var(--tag-on-wine); color: var(--wine); }

.pill[data-tone='grey'] { background: var(--tag-grey); color: var(--ink); }

.brand { position: fixed; z-index: 40; top: clamp(8px, 1.4vh, 16px); left: var(--gutter); right: var(--gutter);
  height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 clamp(8px, 1vw, 14px) 0 clamp(10px, 1.2vw, 18px); border-radius: var(--r-pill); }

.brand-mark { display: flex; align-items: center; gap: 9px; text-decoration: none; }

.brand-mark img { height: clamp(26px, 3.6vh, 38px); width: auto; }

.brand-mark b { font-size: clamp(.78rem, 1.2vw, .9rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }

.brand-mark small { display: block; font-size: clamp(.58rem, .9vw, .66rem); font-weight: 500; color: var(--ink-soft); letter-spacing: .04em; }

.brand-side { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); }

.brand-side a { text-decoration: none; font-weight: 500; }

.brand-side .btn { min-height: clamp(34px, 4.6vh, 44px); letter-spacing: .06em; }

@media (max-width: 560px) { .brand-side .long { display: none; } }

.door { position: relative; z-index: 10; min-height: 100dvh; display: grid; align-items: center;
  padding: calc(var(--nav-h) + clamp(22px, 5vh, 60px)) var(--gutter) clamp(24px, 5vh, 56px);
  grid-template-columns: 1fr; gap: clamp(18px, 3.2vh, 40px); max-width: 1320px; margin: 0 auto; }

@media (min-width: 960px) { .door { grid-template-columns: 1.08fr .92fr; gap: clamp(40px, 5vw, 96px); } }

.door-say { display: grid; gap: clamp(10px, 1.8vh, 22px); align-content: center; }

.door-say h1 { font-size: clamp(2.5rem, 7.4vw, 6.4rem); letter-spacing: -.035em; line-height: .96; }

.door-say h1 em { font-style: normal; color: var(--blue); }

.door-say h1[data-tone='wine'] em { color: var(--wine); }

.door-say h1[data-tone='green'] em { color: var(--green); }

.door-say .lede { font-size: clamp(.95rem, 1.6vw, 1.15rem); color: var(--ink-soft); max-width: 44ch; }

@media (max-width: 959px) {
  .door { align-content: start; min-height: 0; }
  .door-say { text-align: left; }
  .door-say h1 { font-size: clamp(2.3rem, 11vw, 3.6rem); }
}

.card { position: relative; display: grid; gap: clamp(14px, 2vh, 22px); padding: var(--card-pad); border-radius: var(--r-form); }

.card h2 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); letter-spacing: -.02em; }

.card .hint { font-size: var(--fs-small); color: var(--ink-soft); }

.card hr { border: 0; border-top: 1px solid var(--hairline); margin: 0; width: 100%; }

.steps { display: flex; gap: 6px; align-items: center; font-size: clamp(.62rem, 1vw, .72rem); font-weight: 500; color: var(--ink-soft); flex-wrap: wrap; }

.steps span { display: inline-flex; align-items: center; gap: 6px; }

.steps span + span::before { content: ''; width: clamp(10px, 2vw, 22px); height: 1px; background: var(--hairline); margin-right: 2px; }

.steps i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .66rem; font-weight: 600; border: 1px solid var(--hairline); background: rgba(255,255,255,.6); }

.steps [data-at='done'] i { background: var(--green); border-color: var(--green); color: #fff; }

.steps [data-at='now'] { color: var(--ink); }

.steps [data-at='now'] i { background: var(--blue); border-color: var(--blue); color: #fff; }

.field { display: grid; gap: 7px; }

.field label, .field .label { font-size: var(--fs-small); font-weight: 600; }

.input { width: 100%; min-height: var(--field-h); padding: 0 clamp(16px, 1.6vw, 22px); border-radius: var(--r-pill);
  border: 1px solid var(--hairline); background: rgba(255,255,255,.72); font-size: clamp(1rem, 1.5vw, 1.06rem);
  transition: border-color .18s, box-shadow .18s; }

.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(2,71,142,.16); }

.input[aria-invalid='true'] { border-color: var(--wine); box-shadow: 0 0 0 3px rgba(110,2,46,.12); }

textarea.input { min-height: 96px; padding: 12px 18px; border-radius: 22px; resize: vertical; line-height: 1.5; }

select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }

.field .error { font-size: var(--fs-small); color: var(--wine); font-weight: 500; }

.row2 { display: grid; gap: 12px; grid-template-columns: 1fr; }

@media (min-width: 560px) { .row2 { grid-template-columns: 1fr 1fr; } }

.code { display: grid; grid-template-columns: repeat(3, 1fr) 14px repeat(3, 1fr); gap: clamp(6px, 1vw, 10px); align-items: center; }

.code .gap { height: 2px; background: var(--hairline); border-radius: 2px; }

.code .cell { aspect-ratio: 4 / 5; display: grid; place-items: center; border-radius: var(--r-card); border: 1px solid var(--hairline);
  background: rgba(255,255,255,.62); font-size: clamp(1.5rem, 4.4vh, 2.6rem); font-weight: 700; line-height: 1; color: var(--blue);
  font-variant-numeric: tabular-nums; transition: border-color .2s, transform .28s var(--ease-out), background .2s; }

.code .cell[data-filled='true'] { border-color: rgba(2,71,142,.45); background: #fff; animation: pop .28s var(--ease-out); }

.code .cell[data-caret='true'] { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(2,71,142,.14); }

.code .cell[data-caret='true']::after { content: ''; width: 2px; height: 42%; background: var(--blue); animation: blink 1.05s steps(1) infinite; }

.code[data-state='wrong'] .cell { border-color: var(--wine); color: var(--wine); animation: shake .42s var(--ease-out); }

.code[data-state='locked'] .cell { background: rgba(255,255,255,.35); color: transparent; border-style: dashed; }

.code[data-state='ok'] .cell { border-color: var(--green); color: var(--green); background: #fff; }

@keyframes pop { from { transform: scale(.86); } to { transform: none; } }

@keyframes blink { 50% { opacity: 0; } }

@keyframes shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.notice { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; padding: 14px 16px; border-radius: var(--r-card); font-size: var(--fs-small); }

.notice b { font-weight: 600; }

.notice .ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; grid-row: span 2; }

.notice[data-tone='blue'] { background: rgba(190,231,255,.55); }

.notice[data-tone='blue'] .ico { background: var(--blue); color: #fff; }

.notice[data-tone='green'] { background: rgba(204,232,181,.6); }

.notice[data-tone='green'] .ico { background: var(--green); color: #fff; }

.notice[data-tone='wine'] { background: rgba(255,220,226,.7); }

.notice[data-tone='wine'] .ico { background: var(--wine); color: #fff; }

.notice[data-tone='grey'] { background: rgba(209,209,209,.45); }

.notice[data-tone='grey'] .ico { background: var(--ink); color: #fff; }

.sent { display: grid; place-items: center; height: clamp(84px, 13vh, 120px); }

.sent svg { width: clamp(84px, 12vh, 118px); height: auto; overflow: visible; }

.sent .env { animation: land .9s var(--ease-out) both; transform-origin: 50% 100%; }

.sent .trail { stroke-dasharray: 90; stroke-dashoffset: 90; animation: draw .8s .1s var(--ease-out) forwards; }

@keyframes land { from { transform: translate(-40px, -26px) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }

@keyframes draw { to { stroke-dashoffset: 0; } }

.enrol { display: grid; gap: clamp(14px, 2vh, 20px); grid-template-columns: 1fr; align-items: start; }

@media (min-width: 560px) { .enrol { grid-template-columns: auto 1fr; } }

.qr { width: clamp(148px, 22vh, 188px); aspect-ratio: 1; padding: 10px; border-radius: var(--r-card); background: #fff; border: 1px solid var(--hairline); position: relative; justify-self: center; }

.qr svg { width: 100%; height: 100%; display: block; }

.qr::after { content: 'placeholder'; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px; background: var(--tag-grey); font-size: .58rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.secret { display: grid; gap: 8px; }

.secret code { display: flex; flex-wrap: wrap; gap: 4px 10px; font-family: var(--font); font-size: clamp(1rem, 2vw, 1.22rem); font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.72); border: 1px solid var(--hairline); user-select: all; }

.apps { display: flex; flex-wrap: wrap; gap: 8px; }

.app { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--r-pill); background: rgba(255,255,255,.7); border: 1px solid var(--hairline); font-size: var(--fs-small); font-weight: 500; }

.app i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: .62rem; font-weight: 700; color: #fff; }

.app[data-state='done'] { border-color: var(--green); background: rgba(204,232,181,.55); }

.app[data-state='done']::after { content: '✓'; color: var(--green); font-weight: 700; }

.phone-only { display: none !important; }

@media (max-width: 700px) { .phone-only { display: flex !important; } .desk-only { display: none !important; } }

.codes { list-style: none; margin: 0; padding: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; border-radius: var(--r-card);
  background: #fff; border: 1px solid var(--hairline); counter-reset: rc; }

.codes li { counter-increment: rc; display: flex; align-items: baseline; gap: 8px; font-size: clamp(.95rem, 1.7vw, 1.08rem); font-weight: 600; letter-spacing: .05em; font-variant-numeric: tabular-nums; opacity: 0; animation: rise .5s var(--ease-out) forwards; }

.codes li::before { content: counter(rc, decimal-leading-zero); font-size: .62rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }

.codes li:nth-child(2) { animation-delay: .04s }

.codes li:nth-child(3) { animation-delay: .08s }

.codes li:nth-child(4) { animation-delay: .12s }

.codes li:nth-child(5) { animation-delay: .16s }

.codes li:nth-child(6) { animation-delay: .2s }

.codes li:nth-child(7) { animation-delay: .24s }

.codes li:nth-child(8) { animation-delay: .28s }

.codes li:nth-child(9) { animation-delay: .32s }

.codes li:nth-child(10) { animation-delay: .36s }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.save { display: flex; flex-wrap: wrap; gap: 8px; }

.save .btn { min-height: 40px; }

.ack { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-card); border: 1px solid var(--hairline); background: rgba(255,255,255,.55); cursor: pointer; font-size: var(--fs-small); }

.ack input { width: 22px; height: 22px; margin: 0; accent-color: var(--green); flex: 0 0 auto; }

.ack:has(input:checked) { border-color: var(--green); background: rgba(204,232,181,.45); }

.lock { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }

.ring { width: 84px; height: 84px; position: relative; }

.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.ring circle { fill: none; stroke-width: 6; }

.ring .track { stroke: rgba(110,2,46,.14); }

.ring .run { stroke: var(--wine); stroke-linecap: round; stroke-dasharray: 226; stroke-dashoffset: 0; animation: drain 60s linear forwards; }

.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.05rem; font-weight: 700; color: var(--wine); font-variant-numeric: tabular-nums; }

@keyframes drain { to { stroke-dashoffset: 226; } }

.done-mark svg { width: 64px; height: 64px; }

.done-mark circle { fill: var(--green); transform-origin: center; animation: pop .45s var(--ease-out) both; }

.done-mark path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .45s .25s var(--ease-out) forwards; }

.enter > * { animation: settle var(--t-step) var(--ease-out) both; }

.enter > *:nth-child(2) { animation-delay: 70ms; }

@keyframes settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.app-shell { position: relative; z-index: 10; min-height: 100dvh; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }

@media (min-width: 900px) { .app-shell { grid-template-columns: clamp(196px, 15vw, 232px) 1fr; grid-template-rows: auto 1fr; } .topbar { grid-column: 2; } .rail { grid-row: 1 / -1; grid-column: 1; } .main { grid-column: 2; } }

.rail { display: none; flex-direction: column; gap: 4px; position: sticky; top: var(--gutter); height: calc(100dvh - 2 * var(--gutter)); margin: var(--gutter) 0 var(--gutter) var(--gutter); padding: clamp(12px, 1.6vh, 18px) 10px; border-radius: var(--r-glass); }

@media (min-width: 900px) { .rail { display: flex; } }

.rail .brand-mark { padding: 0 8px clamp(14px, 2.4vh, 24px); }

.rail .foot { margin-top: auto; display: grid; gap: 6px; padding: 10px 8px 2px; border-top: 1px solid var(--hairline); font-size: clamp(.62rem, 1vw, .7rem); color: var(--ink-soft); }

.navitem { appearance: none; cursor: pointer; border: 0; background: transparent; display: flex; align-items: center; gap: 10px; padding: clamp(9px, 1.3vh, 12px) 12px; border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 500; color: var(--ink); text-align: left; width: 100%; text-decoration: none; transition: background .2s; }

.navitem:hover { background: rgba(2,71,142,.08); }

.navitem[aria-current='page'] { background: var(--blue); color: #fff; font-weight: 600; }

.navitem svg { width: 16px; height: 16px; flex: 0 0 auto; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: var(--gutter) var(--gutter) 0; padding: clamp(8px, 1.3vh, 12px) clamp(10px, 1.4vw, 16px) clamp(8px, 1.3vh, 12px) clamp(16px, 1.8vw, 22px); border-radius: var(--r-pill); position: sticky; top: var(--gutter); z-index: 30; }

.topbar .org { display: grid; min-width: 0; }

.topbar .org b { font-size: var(--fs-small); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar .org span { font-size: clamp(.6rem, 1vw, .7rem); color: var(--ink-soft); }

.topbar .who { display: flex; align-items: center; gap: 10px; }

.topbar .who div { display: none; text-align: right; }

@media (min-width: 620px) { .topbar .who div { display: grid; } }

.topbar .who b { font-size: var(--fs-small); font-weight: 600; }

.topbar .who span { font-size: clamp(.6rem, 1vw, .7rem); color: var(--ink-soft); }

.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-size: .7rem; font-weight: 600; }

.topbar .mark-sm { display: flex; }

@media (min-width: 900px) { .topbar .mark-sm { display: none; } }

.topbar .mark-sm img { height: 28px; width: auto; }

.tabbar { display: none; position: sticky; bottom: var(--gutter); z-index: 30; gap: 2px; margin: 0 var(--gutter) var(--gutter); padding: 6px; border-radius: var(--r-pill); }

@media (max-width: 899px) { .tabbar { display: flex; } }

.tabbar .navitem { flex: 1 1 0; justify-content: center; flex-direction: column; gap: 2px; padding: 7px 4px; font-size: .64rem; border-radius: 22px; }

.main { padding: clamp(18px, 3vh, 34px) var(--gutter) clamp(18px, 3vh, 40px); display: grid; gap: clamp(14px, 2vh, 22px); align-content: start; max-width: 1180px; width: 100%; }

.view-head { display: grid; gap: 8px; animation: settle var(--t-step) var(--ease-out) both; }

.view-head h1 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); letter-spacing: -.03em; }

.view-head p { color: var(--ink-soft); max-width: 62ch; font-size: clamp(.88rem, 1.4vw, 1rem); }

.view-head .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.panel { padding: clamp(16px, 2.2vh, 26px); border-radius: var(--r-glass); display: grid; gap: clamp(10px, 1.6vh, 16px); animation: settle var(--t-step) 60ms var(--ease-out) both; }

.panel > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.panel > header h2 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.012em; }

.panel[data-ground='blue'] { background: var(--blue); color: #fff; border-color: rgba(255,255,255,.22); }

.panel[data-ground='blue'] p { color: rgba(255,255,255,.86); }

.grid-2 { display: grid; gap: clamp(12px, 1.6vw, 18px); grid-template-columns: 1fr; }

@media (min-width: 980px) { .grid-2 { grid-template-columns: 1.4fr 1fr; } }

.table { display: grid; }

.tr { display: grid; gap: 4px 14px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--hairline); font-size: var(--fs-small); }

.tr:last-child { border-bottom: 0; }

.th { font-weight: 600; color: var(--ink-soft); font-size: clamp(.6rem, 1vw, .68rem); letter-spacing: .08em; text-transform: uppercase; padding-block: 6px; }

.tr b { font-weight: 600; }

.tr .muted { color: var(--ink-soft); }

.tr .acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.tr .acts .btn { min-height: 34px; padding: 0 14px; }

.members .tr { grid-template-columns: 2fr .8fr 1fr 1.3fr auto; }

.versions .tr { grid-template-columns: .6fr 1fr 1.6fr auto; }

@media (max-width: 760px) {
  .th { display: none; }
  .members .tr, .versions .tr { grid-template-columns: 1fr auto; padding: 14px 4px; }
  .tr .wide { grid-column: 1 / -1; }
  .tr .acts { grid-column: 1 / -1; justify-content: flex-start; }
}

.seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: rgba(32,32,32,.06); gap: 2px; flex-wrap: wrap; }

.seg button { appearance: none; border: 0; cursor: pointer; padding: 6px 11px; border-radius: var(--r-pill); background: transparent; font-size: clamp(.66rem, 1vw, .74rem); font-weight: 500; color: var(--ink-soft); transition: background .22s var(--ease-out), color .22s; }

.seg button[aria-pressed='true'] { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(32,32,32,.12); }

.seg button[aria-pressed='true'][data-v='done'] { background: var(--green); color: #fff; }

.seg button[aria-pressed='true'][data-v='in_progress'] { background: var(--blue); color: #fff; }

.mat { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px; border-radius: var(--r-card); background: rgba(226,236,246,.62); border: 1px solid var(--glass-border); }

.mat .file { width: 44px; height: 54px; border-radius: 10px; background: #fff; border: 1px solid var(--hairline); display: grid; place-items: end center; padding-bottom: 7px; font-size: .56rem; font-weight: 700; color: var(--wine); }

.mat b { font-size: var(--fs-small); font-weight: 600; display: block; }

.mat span { font-size: clamp(.64rem, 1vw, .72rem); color: var(--ink-soft); }

@media (max-width: 560px) { .mat { grid-template-columns: auto 1fr; } .mat > .btn, .mat > .win { grid-column: 1 / -1; } }

.win { display: grid; gap: 6px; min-width: 200px; }

.win .bar { height: 6px; border-radius: 6px; background: rgba(32,32,32,.1); overflow: hidden; }

.win .bar i { display: block; height: 100%; background: var(--green); transform-origin: left; animation: shrink 120s linear forwards; }

@keyframes shrink { to { transform: scaleX(0); } }

.stamp { font-size: clamp(.62rem, 1vw, .7rem); color: var(--ink-soft); }

.scrim-dlg[hidden] { display: none; }

.scrim-dlg { position: fixed; inset: 0; z-index: 60; background: rgba(32,32,32,.28); display: grid; place-items: center; padding: var(--gutter); animation: fade .25s both; }

.dlg { width: min(460px, 100%); padding: var(--card-pad); border-radius: var(--r-form); display: grid; gap: 14px; background: rgba(255,255,255,.9); animation: settle .38s var(--ease-out) both; }

.dlg h2 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

.dlg .acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

@keyframes fade { from { opacity: 0; } }

.toast { position: fixed; z-index: 70; left: 50%; bottom: clamp(84px, 12vh, 110px); transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 10px 18px 10px 10px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: var(--fs-small); animation: toast 3.4s var(--ease-out) both; white-space: nowrap; }

.toast i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--green); font-style: normal; font-weight: 700; font-size: .75rem; }

@media (min-width: 900px) { .toast { bottom: 28px; } }

@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 12px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 6px); } }

.dock { position: fixed; z-index: 90; right: 10px; bottom: 10px; display: flex; gap: 6px; align-items: center; }

.dock button, .dock a { appearance: none; cursor: pointer; border: 0; text-decoration: none; padding: 8px 13px; border-radius: 999px; background: rgba(32,32,32,.86); color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .02em; }

.dock button[aria-pressed='true'] { background: var(--wine); }

@media (max-width: 899px) { .dock { right: 8px; bottom: 8px; } .dock button, .dock a { padding: 6px 10px; font-size: .64rem; opacity: .9; } body[data-surface='app'] .dock { bottom: 96px; } body[data-surface='door'] .door { padding-bottom: 64px; } }

.drawer { position: fixed; z-index: 95; inset: 0 0 0 auto; width: min(360px, 92vw); padding: 18px 16px; overflow-y: auto; background: rgba(32,32,32,.94); color: #fff; font-size: .78rem; transform: translateX(105%); transition: transform .35s var(--ease-out); }

.drawer[data-open='true'] { transform: none; }

.drawer h2 { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin: 16px 0 6px; font-weight: 600; }

.drawer a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 10px; text-decoration: none; color: #fff; }

.drawer a:hover, .drawer a[aria-current='true'] { background: rgba(255,255,255,.14); }

.drawer a small { opacity: .55; white-space: nowrap; }

.drawer .close { float: right; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition: none !important; }
  .ring .run, .win .bar i { animation: none !important; }
  .codes li { opacity: 1; }
}

@media print {
  .bg, .brand, .dock, .drawer, .door-say, .save, .ack, .steps, .card > .btn, .card .notice { display: none !important; }
  .door { display: block; padding: 0; } .card { box-shadow: none; border: 0; background: #fff; backdrop-filter: none; }
  .codes li { opacity: 1; animation: none; }
}

@media (max-width: 899px) {
  .app-shell .main { order: 2; } .app-shell .tabbar { order: 3; }
  .seg button { padding: 6px 8px; }
}

.topbar .who .avatar { color: #fff; }

[data-code-entry]:focus-within .code { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 24px; }

.matlink { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 500; color: var(--blue); text-decoration: none; padding: 5px 10px; border-radius: var(--r-pill); background: rgba(190,231,255,.45); }

.matlink svg { width: 14px; height: 14px; }

.matlink:hover { background: rgba(190,231,255,.8); }

.beads { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }

.beads i { height: 10px; border-radius: 99px; background: rgba(32,32,32,.1); }

.beads i[data-s='done'] { background: var(--green); }

.beads i[data-s='in_progress'] { background: linear-gradient(90deg, var(--blue) 50%, rgba(2,71,142,.22) 50%); }

.beads i[data-s='skipped'] { background: repeating-linear-gradient(135deg, var(--tag-grey) 0 4px, transparent 4px 8px); }

.matgroup { display: grid; gap: 8px; }

.matgroup + .matgroup { padding-top: 12px; border-top: 1px solid var(--hairline); }

.matgroup h3 { font-size: var(--fs-small); font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }

.panel[data-ground='blue'] .mat { background: rgba(255,255,255,.92); color: var(--ink); }

.panel[data-ground='blue'] .mat span { color: var(--ink-soft); }

.panel[data-ground='blue'] .mat .btn[data-style='outline'] { color: var(--ink); }

.people { display: grid; }

.person { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--hairline); }

.person:last-child { border-bottom: 0; }

.person b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-small); font-weight: 600; }

.person > div span:not(.pill) { font-size: clamp(.64rem, 1vw, .72rem); color: var(--ink-soft); }

.person .count { font-size: clamp(.64rem, 1vw, .74rem); color: var(--ink-soft); text-align: right; }

.avatar[data-tone='soft'] { background: var(--tint-blue); color: var(--blue); }

@media (max-width: 520px) { .person { grid-template-columns: auto 1fr; } .person .count { grid-column: 2; text-align: left; } }

.cards-list { display: grid; gap: 8px; }

.rowcard { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--r-card); background: rgba(255,255,255,.55); border: 1px solid var(--glass-border); text-decoration: none; color: inherit; transition: background .2s, transform .2s var(--ease-out); }

a.rowcard:hover { background: #fff; transform: translateY(-1px); }

.rowcard b { display: block; font-size: clamp(.9rem, 1.4vw, 1rem); font-weight: 600; }

.rowcard > div > span { font-size: clamp(.64rem, 1vw, .74rem); color: var(--ink-soft); }

.rowcard em { font-style: normal; color: var(--wine); font-weight: 600; }

.rowcard .right { display: grid; justify-items: end; gap: 4px; }

.rowcard .sub { font-size: clamp(.62rem, 1vw, .7rem); color: var(--ink-soft); }

.rowcard .file { width: 36px; height: 44px; border-radius: 9px; background: #fff; border: 1px solid var(--hairline); display: grid; place-items: end center; padding-bottom: 5px; font-size: .5rem; font-weight: 700; color: var(--wine); }

.avatar.sq { width: 44px; height: 44px; border-radius: 14px; font-size: .78rem; }

@media (max-width: 600px) { .rowcard { grid-template-columns: auto 1fr; } .rowcard .right { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; } }

.howto { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: var(--fs-small); color: var(--ink-soft); }

.howto b { color: var(--ink); font-weight: 600; }

.choice { display: grid; gap: 8px; }

.opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-card); border: 1px solid var(--hairline); background: rgba(255,255,255,.55); cursor: pointer; }

.opt input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--blue); flex: 0 0 auto; }

.opt b { display: block; font-size: var(--fs-small); font-weight: 600; }

.opt small { font-size: clamp(.64rem, 1vw, .72rem); color: var(--ink-soft); }

.opt:has(input:checked) { border-color: var(--blue); background: rgba(190,231,255,.4); }

.preview { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: pv; }

.preview li { counter-increment: pv; display: grid; grid-template-columns: 26px 110px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.18); font-size: var(--fs-small); color: #fff; align-items: baseline; }

.preview li::before { content: counter(pv); font-weight: 700; opacity: .6; }

.preview li span { font-weight: 600; color: var(--tag-on-blue); font-variant-numeric: tabular-nums; }

@media (max-width: 520px) { .preview li { grid-template-columns: 22px 1fr; } .preview li span { grid-column: 2; } }

@media (min-width: 980px) { .matgroup { grid-template-columns: 1fr 1fr; } .matgroup h3 { grid-column: 1 / -1; } }

.preview { margin-top: -4px; }