/* HINWE UI v2: approved components, adapted for real app state.
   Every value comes from src/hinwe-tokens.css; write none here. */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg-canvas);color:var(--fg-2);font-family:var(--font-ui);font-size:var(--t-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
a{color:var(--fg-1);text-decoration:none;border-bottom:var(--bw-1) solid var(--bd-strong)}
a:hover{color:var(--red-bright);border-color:var(--red-bright)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--fg-1);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:var(--tr-tight);margin:0}
h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3);line-height:var(--lh-snug)} h4{font-size:var(--t-h4);line-height:var(--lh-snug);letter-spacing:var(--tr-normal)}
p{margin:0}
.mono{font-family:var(--font-mono);font-size:var(--t-mono);font-feature-settings:"tnum" 1,"zero" 1}
.caps{font-family:var(--font-ui);font-size:var(--t-caps);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--tr-cap);color:var(--fg-3)}
.caps-wide{letter-spacing:var(--tr-cap-wide)}
.rule{height:var(--bw-1);background:var(--bd-hairline);border:0;margin:0}

/* ============================================================
   SHELL — nav rail + viewport
   ============================================================ */
.app{display:grid;grid-template-columns:var(--size-rail) 1fr;min-height:100vh}
.rail{background:var(--bg-surface);border-right:var(--bw-1) solid var(--bd-hairline);position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.rail-head{padding:var(--space-20) var(--space-20) var(--space-16);display:flex;gap:var(--space-10);align-items:center;border-bottom:var(--bw-1) solid var(--bd-hairline)}
.rail-mark{width:var(--size-mark);height:var(--size-mark);display:grid;place-items:center;flex:0 0 auto}
.rail-mark img{width:100%;height:100%;object-fit:contain;display:block}
.rail-wordmark{height:var(--size-wordmark);display:block}
.rail-title{font-family:var(--font-display);font-weight:var(--fw-heavy);color:var(--fg-1);letter-spacing:var(--tr-06);font-size:var(--t-15)}
.rail-sub{font-size:var(--t-11);color:var(--fg-4);letter-spacing:var(--tr-cap);text-transform:uppercase}
.rail-section{padding:var(--space-14) var(--space-12) var(--space-4)}
.rail-section-title{padding:var(--space-4) var(--space-10);font-size:var(--t-10);letter-spacing:var(--tr-cap-wide);color:var(--fg-4);text-transform:uppercase;font-weight:var(--fw-bold)}
.rail-item{display:flex;justify-content:space-between;align-items:center;gap:var(--space-8);padding:var(--space-8) var(--space-10);border-radius:var(--r-2);color:var(--fg-2);font-size:var(--t-13);cursor:pointer;border-left:var(--bw-2) solid transparent}
.rail-item:hover{background:var(--bg-hover);color:var(--fg-1)}
.rail-item.on{background:var(--bg-raised);color:var(--fg-1);border-left-color:var(--red)}
.rail-item .tag{font-family:var(--font-mono);font-size:var(--t-10);color:var(--fg-4)}
.rail-foot{margin-top:auto;padding:var(--space-14) var(--space-20);border-top:var(--bw-1) solid var(--bd-hairline);font-size:var(--t-11);color:var(--fg-4);letter-spacing:var(--tr-cap);text-transform:uppercase}

.stage{padding:0;min-width:0}
.crumb{display:flex;justify-content:space-between;align-items:center;gap:var(--space-16);padding:var(--space-14) var(--space-32);border-bottom:var(--bw-1) solid var(--bd-hairline);background:linear-gradient(180deg,var(--bg-surface),transparent);position:sticky;top:0;z-index:var(--z-sticky);backdrop-filter:blur(var(--blur-crumb))}
.crumb-l{display:flex;align-items:center;gap:var(--space-12);font-size:var(--t-12);color:var(--fg-3);letter-spacing:var(--tr-cap);text-transform:uppercase}
.crumb-l .sep{color:var(--fg-5)}
.crumb-l .cur{color:var(--fg-1);font-weight:var(--fw-semibold)}
.crumb-r{display:flex;align-items:center;gap:var(--space-8)}
.state-strip{display:flex;flex-wrap:wrap;gap:var(--space-6);padding:var(--space-12) var(--space-32);border-bottom:var(--bw-1) solid var(--bd-hairline);background:var(--bg-sunken)}
.state-strip .caps{margin-right:var(--space-6);align-self:center}
.chip{font-family:var(--font-mono);font-size:var(--t-11);color:var(--fg-3);background:transparent;border:var(--bw-1) solid var(--bd-strong);padding:var(--space-4) var(--space-8);border-radius:var(--r-1);cursor:pointer;letter-spacing:var(--tr-02)}
.chip:hover{color:var(--fg-1);border-color:var(--fg-3)}
.chip.on{color:var(--fg-1);border-color:var(--red);background:var(--red-tint-8)}

.screen{padding:var(--space-32);max-width:var(--size-page);margin:0 auto}
.screen[hidden]{display:none}

/* ============================================================
   COMPONENTS
   ============================================================ */
/* status pill */
.pill{display:inline-flex;align-items:center;gap:var(--space-6);padding:var(--space-3) var(--space-8) var(--space-3) var(--space-8);border-radius:var(--r-1);font-family:var(--font-mono);font-size:var(--t-11);letter-spacing:var(--tr-08);text-transform:uppercase;border:var(--bw-1) solid var(--bd-strong);color:var(--fg-3);background:var(--bg-sunken)}
.pill::before{content:"";width:var(--size-dot);height:var(--size-dot);background:var(--fg-4);border-radius:var(--r-round)}
.pill.draft::before{background:var(--fg-4)}
.pill.active{color:var(--fg-1);border-color:var(--bd-strong)}
.pill.active::before{background:var(--warn)}
.pill.submitted{color:var(--fg-1)} .pill.submitted::before{background:var(--info)}
.pill.verified{color:var(--ok)} .pill.verified::before{background:var(--ok)}
.pill.rejected,.pill.failed,.pill.missed{color:var(--red-bright);border-color:var(--red-line);background:var(--red-bg)}
.pill.rejected::before,.pill.failed::before,.pill.missed::before{background:var(--red)}
.pill.closed{color:var(--fg-3)}
.pill.armed{color:var(--red-bright);border-color:var(--red-line);background:var(--red-bg)}
.pill.armed::before{background:var(--red)}
.pill.due{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg-strong)}
.pill.due::before{background:var(--warn)}
.pill.completed{color:var(--ok)} .pill.completed::before{background:var(--ok)}
.pill.nottrig{color:var(--fg-3)}
.pill.pending::before{background:var(--warn)}
.pill.pending{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg-strong)}
.pill.accepted::before{background:var(--info)}
.pill.accepted{color:var(--info-text)}
.pill.notiffail::before{background:var(--red)}
.pill.notiffail{color:var(--red-bright);border-color:var(--red-line);background:var(--red-bg)}
.pill.receipt::before{background:var(--ok)}
.pill.receipt{color:var(--ok)}

/* buttons */
.btn{font-family:var(--font-ui);font-weight:var(--fw-semibold);font-size:var(--t-13);letter-spacing:var(--tr-06);text-transform:uppercase;padding:var(--space-11) var(--space-18);border:var(--bw-1) solid var(--bd-strong);background:var(--bg-raised);color:var(--fg-1);cursor:pointer;border-radius:var(--r-1);display:inline-flex;align-items:center;gap:var(--space-8)}
.btn:hover{background:var(--bg-hover);border-color:var(--fg-4)}
.btn:disabled,.btn[aria-disabled="true"]{color:var(--fg-4);border-color:var(--bd-hairline);background:var(--bg-sunken);cursor:not-allowed}
.btn.primary{background:var(--red);border-color:var(--red);color:var(--on-red)}
.btn.primary:hover{background:var(--red-bright);border-color:var(--red-bright)}
.btn.primary:disabled{background:var(--red-disabled-bg);color:var(--red-disabled-text);border-color:var(--red-disabled-bg)}
.btn.danger{background:transparent;border-color:var(--red-line);color:var(--red-bright)}
.btn.danger:hover{background:var(--red-bg)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--fg-2)}
.btn.ghost:hover{color:var(--fg-1);background:var(--bg-hover)}
.btn.sm{padding:var(--space-7) var(--space-12);font-size:var(--t-11)}
.btn-row{display:flex;gap:var(--space-10);flex-wrap:wrap}

/* panel / card */
.panel{background:var(--bg-surface);border:var(--bw-1) solid var(--bd-hairline);border-radius:var(--r-3);padding:var(--space-24)}
.panel h2, .panel h3{margin-bottom:var(--space-8)}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-12);margin-bottom:var(--space-16)}
.panel-title{font-family:var(--font-display);font-size:var(--t-14);color:var(--fg-3);letter-spacing:var(--tr-cap-wide);text-transform:uppercase;font-weight:var(--fw-bold)}

/* tactical card w/ shield cut */
.tcard{background:var(--bg-surface);border:var(--bw-1) solid var(--bd-hairline);clip-path:var(--shield-cut-md);padding:var(--space-22) var(--space-24);position:relative}
.tcard::before{content:"";position:absolute;left:0;top:0;width:var(--bw-3);height:100%;background:var(--red)}
.tcard.dim::before{background:var(--fg-5)}
.tcard.warn::before{background:var(--warn)}
.tcard.ok::before{background:var(--ok)}

/* meta grid */
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--size-meta-min),1fr));gap:var(--space-14) var(--space-24)}
.meta .k{font-size:var(--t-10);letter-spacing:var(--tr-cap-wide);text-transform:uppercase;color:var(--fg-4);font-weight:var(--fw-bold);margin-bottom:var(--space-4)}
.meta .v{color:var(--fg-1);font-size:var(--t-14)}
.meta .v.mono{font-size:var(--t-13);color:var(--fg-2)}

/* form */
label.field{display:block;margin-bottom:var(--space-18)}
label.field .l{display:flex;justify-content:space-between;font-size:var(--t-11);letter-spacing:var(--tr-cap);text-transform:uppercase;color:var(--fg-3);font-weight:var(--fw-semibold);margin-bottom:var(--space-6)}
label.field .l .req{color:var(--red)}
label.field .hint{font-size:var(--t-12);color:var(--fg-4);margin-top:var(--space-6)}
label.field .err{font-size:var(--t-12);color:var(--red-bright);margin-top:var(--space-6);display:flex;gap:var(--space-6);align-items:center}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=datetime-local],textarea,select{
  width:100%;background:var(--bg-sunken);border:var(--bw-1) solid var(--bd-strong);color:var(--fg-1);
  padding:var(--space-11) var(--space-12);font-family:var(--font-ui);font-size:var(--t-14);border-radius:var(--r-1);outline:none
}
textarea{min-height:var(--size-textarea-min);resize:vertical;font-family:var(--font-ui)}
input:focus,textarea:focus,select:focus{border-color:var(--fg-3);background:var(--bg-canvas)}
input.err,textarea.err{border-color:var(--red)}
input::placeholder,textarea::placeholder{color:var(--fg-5)}


/* deadline strip */
.deadline{display:flex;justify-content:space-between;align-items:center;padding:var(--space-14) var(--space-18);border:var(--bw-1) solid var(--bd-strong);background:var(--bg-sunken);border-radius:var(--r-1);margin-bottom:var(--space-16);gap:var(--space-16)}
.deadline .t{color:var(--fg-3);font-size:var(--t-11);letter-spacing:var(--tr-cap);text-transform:uppercase;font-weight:var(--fw-semibold)}
.deadline .v{color:var(--fg-1);font-family:var(--font-mono);font-size:var(--t-16)}
.deadline.warn{border-color:var(--warn-line);background:var(--warn-bg)}
.deadline.warn .v{color:var(--warn)}
.deadline.crit{border-color:var(--red-line);background:var(--red-bg)}
.deadline.crit .v{color:var(--red-bright)}

/* alert / banner */
.banner{padding:var(--space-14) var(--space-18);border:var(--bw-1) solid var(--bd-strong);border-left:var(--bw-3) solid var(--fg-3);background:var(--bg-sunken);margin-bottom:var(--space-16);font-size:var(--t-13);color:var(--fg-2)}
.banner.warn{border-left-color:var(--warn);background:var(--warn-bg);color:var(--warn-text)}
.banner.crit{border-left-color:var(--red);background:var(--red-bg);color:var(--crit-text)}
.banner.ok{border-left-color:var(--ok);color:var(--ok-text);background:var(--ok-bg)}
.banner .h{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--fg-1);font-size:var(--t-14);letter-spacing:var(--tr-06);text-transform:uppercase;margin-bottom:var(--space-4)}
.banner.crit .h{color:var(--crit-text)} .banner.warn .h{color:var(--warn-text)} .banner.ok .h{color:var(--ok-text)}

/* table */
table.log{width:100%;border-collapse:collapse;font-size:var(--t-13)}
table.log th{font-family:var(--font-ui);font-size:var(--t-10);letter-spacing:var(--tr-cap-wide);text-transform:uppercase;color:var(--fg-4);text-align:left;padding:var(--space-10) var(--space-12);border-bottom:var(--bw-1) solid var(--bd-strong);font-weight:var(--fw-bold)}
table.log td{padding:var(--space-12);border-bottom:var(--bw-1) solid var(--bd-hairline);color:var(--fg-2);vertical-align:top}
table.log td.mono{font-family:var(--font-mono);font-size:var(--t-12);color:var(--fg-1)}
table.log tr:hover td{background:var(--bg-surface)}

/* stat grid */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--size-stat-min),1fr));gap:var(--space-12);margin-bottom:var(--space-20)}
.stat{background:var(--bg-surface);border:var(--bw-1) solid var(--bd-hairline);padding:var(--space-14) var(--space-16);border-radius:var(--r-3)}
.stat .k{font-size:var(--t-10);letter-spacing:var(--tr-cap-wide);text-transform:uppercase;color:var(--fg-4);margin-bottom:var(--space-6);font-weight:var(--fw-bold)}
.stat .v{font-family:var(--font-display);font-size:var(--t-28);color:var(--fg-1);font-weight:var(--fw-bold)}
.stat .v.red{color:var(--red-bright)}
.stat .v.ok{color:var(--ok)}


/* auth center */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:var(--space-32);background:radial-gradient(circle at 50% -10%,var(--red-tint-8),transparent 60%),var(--bg-canvas)}
.auth-card{width:100%;max-width:var(--size-auth-card);background:var(--bg-surface);border:var(--bw-1) solid var(--bd-hairline);padding:var(--space-36) var(--space-32);border-radius:var(--r-3)}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:var(--space-12);margin-bottom:var(--space-26)}
.auth-brand .mark{width:var(--size-mark-lg);height:var(--size-mark-lg);display:grid;place-items:center}
.auth-brand .mark img{width:100%;height:100%;object-fit:contain;display:block}

/* skeleton / spinner */
.skel{background:linear-gradient(90deg,var(--bg-sunken),var(--bg-hover),var(--bg-sunken));background-size:200% 100%;animation:skel var(--dur-skel) linear infinite;border-radius:var(--r-1);color:transparent}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
.spinner{width:var(--size-spinner);height:var(--size-spinner);border:var(--bw-2) solid var(--bd-strong);border-top-color:var(--red);border-radius:var(--r-round);animation:spin var(--dur-spin) linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* skeleton primitives — ghost versions of real UI elements */
.skel-line{height:var(--size-skel-line);border-radius:var(--r-1);background:linear-gradient(90deg,var(--bg-sunken),var(--bg-hover),var(--bg-sunken));background-size:200% 100%;animation:skel var(--dur-skel) linear infinite}
.skel-line.lg{height:var(--size-skel-line-lg)}
.skel-line.sm{height:var(--size-skel-line-sm)}
.skel-pill{display:inline-block;height:var(--size-skel-pill-h);width:var(--size-skel-pill-w);border-radius:var(--r-1);border:var(--bw-1) solid var(--bd-strong);background:linear-gradient(90deg,var(--bg-sunken),var(--bg-hover),var(--bg-sunken));background-size:200% 100%;animation:skel var(--dur-skel-slow) linear infinite;vertical-align:middle}
.skel-pill::before{content:"";display:inline-block;width:var(--size-dot);height:var(--size-dot);border-radius:var(--r-round);background:var(--fg-5);margin:var(--space-7) var(--space-6) 0 var(--space-8);vertical-align:top}
.skel-btn{display:inline-block;height:var(--size-skel-btn-h);min-width:var(--size-skel-btn-w);border:var(--bw-1) solid var(--bd-hairline);border-radius:var(--r-1);background:var(--bg-sunken);vertical-align:middle;opacity:var(--o-70)}
.skel-btn.primary{border-color:var(--red-disabled-bg);background:var(--red-skeleton-bg)}
.skel-count{display:inline-block;height:var(--size-skel-count-h);width:var(--size-skel-count-w);border-radius:var(--r-1);background:linear-gradient(90deg,var(--bg-sunken),var(--bg-hover),var(--bg-sunken));background-size:200% 100%;animation:skel var(--dur-skel) linear infinite}
.skel-bar{height:var(--size-skel-bar);border:var(--bw-1) solid var(--bd-strong);background:var(--bg-sunken);border-radius:var(--r-1);position:relative;overflow:hidden}
.skel-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--bg-hover),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:skel-sweep var(--dur-skel-slow) linear infinite}
@keyframes skel-sweep{0%{background-position:-40% 0}100%{background-position:140% 0}}
.skel-tcard{background:var(--bg-surface);border:var(--bw-1) solid var(--bd-hairline);clip-path:var(--shield-cut-md);padding:var(--space-22) var(--space-24);position:relative}
.skel-tcard::before{content:"";position:absolute;left:0;top:0;width:var(--bw-3);height:100%;background:var(--fg-5)}

/* degraded / reconnecting banner */
.banner.degraded{border-left-color:var(--warn);background:var(--warn-bg);color:var(--warn-text)}
.banner.degraded .h{color:var(--warn-text)}
.banner.degraded .dot{display:inline-block;width:var(--size-dot-lg);height:var(--size-dot-lg);border-radius:var(--r-round);background:var(--warn);margin-right:var(--space-8);vertical-align:middle;animation:pulse-warn var(--dur-pulse) ease-in-out infinite}
@keyframes pulse-warn{0%,100%{opacity:1}50%{opacity:var(--o-35)}}

/* stale-content marker — differentiates ghost/cached content from live */
.stale{position:relative;opacity:var(--o-55);filter:var(--filter-stale)}
.stale-tag{display:inline-flex;align-items:center;gap:var(--space-6);font-family:var(--font-mono);font-size:var(--t-10);letter-spacing:var(--tr-cap);text-transform:uppercase;color:var(--warn);border:var(--bw-1) solid var(--warn-line);background:var(--warn-bg-strong);padding:var(--space-3) var(--space-8);border-radius:var(--r-1)}
.stale-tag::before{content:"";width:var(--size-dot);height:var(--size-dot);background:var(--warn);border-radius:var(--r-round)}


/* dialog (design: onboarding confirmation); not used by the app yet */
.scrim{background:var(--scrim);backdrop-filter:blur(var(--blur-scrim));border:var(--bw-1) solid var(--bd-hairline);border-radius:var(--r-3);padding:var(--space-48) var(--space-24);display:grid;place-items:center;min-height:var(--size-scrim-min)}
.dialog{background:var(--bg-surface);border:var(--bw-1) solid var(--bd-strong);border-top:var(--bw-2) solid var(--red);border-radius:var(--r-3);padding:var(--space-24) var(--space-28);max-width:var(--size-dialog);width:100%;box-shadow:var(--shadow-dialog)}
.dialog h2{margin:0}

/* two-col */
.two{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-20)}
.two.rev{grid-template-columns:1fr 2fr}

/* utils */
.gap-y > * + *{margin-top:var(--space-16)}
.gap-y-sm > * + *{margin-top:var(--space-8)}
.row{display:flex;gap:var(--space-12);flex-wrap:wrap;align-items:center}
.between{display:flex;justify-content:space-between;align-items:center;gap:var(--space-12);flex-wrap:wrap}
.dim{color:var(--fg-3)}
.dimmer{color:var(--fg-4)}
.red{color:var(--red-bright)}
.ok{color:var(--ok)}
.warn{color:var(--warn)}
.strike{text-decoration:line-through;color:var(--fg-4)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .rail{position:static;height:auto;border-right:0;border-bottom:var(--bw-1) solid var(--bd-hairline)}
  .rail-foot{display:none}
  .two,.two.rev{grid-template-columns:1fr}
  .review-block{grid-template-columns:1fr}
  .screen{padding:var(--space-20)}
  .crumb,.state-strip{padding:var(--space-12) var(--space-20)}
}


/* App additions to the design's components. The design has no button reset, shows
   no keyboard focus and hides option and tick-box inputs entirely (display:none);
   here every input stays reachable by keyboard while looking exactly like the design. */
[hidden],.hidden{display:none!important}
/* Zero-specificity resets, so the design's own input and textarea sizes still apply. */
:where(button,input,select,textarea){font:inherit}
:where(button){cursor:pointer;max-width:100%}
:is(button,a,summary,input.box):focus-visible,.opt:has(input:focus-visible),.check:has(input:not(.box):focus-visible){outline:var(--bw-2) solid var(--bd-focus);outline-offset:var(--space-3)}
.opt,.check{position:relative}
.check:has(input:checked) .box{background:var(--red);border-color:var(--red);color:var(--on-red)}
.check input.box{appearance:none;margin:0;cursor:pointer}
.check input.box::after{content:"✓"}
.err:not(input,textarea,select){color:var(--red-bright)}
textarea{max-width:100%}
.sr-only{position:absolute;width:var(--size-visually-hidden);height:var(--size-visually-hidden);padding:0;margin:var(--space-neg-1);overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Live shell: the prototype's state picker and sample data are intentionally absent. */
.rail-sub{margin-top:var(--space-5)}
#nav{padding:var(--space-14) var(--space-12);display:grid;gap:var(--space-4)}
#nav .rail-item{width:100%;text-align:left;border:0;border-left:var(--bw-2) solid transparent;background:transparent;letter-spacing:var(--tr-normal);text-transform:none;min-height:var(--size-touch)}
#nav .rail-item:hover{background:var(--bg-hover)}
#nav .rail-item.on{border-left-color:var(--red);background:var(--bg-raised)}
.rail-account{margin-top:auto;padding:var(--space-20);border-top:var(--bw-1) solid var(--bd-hairline)}
#auth-status{display:block;font-family:var(--font-mono);font-size:var(--t-11);overflow-wrap:anywhere;color:var(--fg-2);margin:var(--space-6) 0 var(--space-12)}
.rail-account button{width:100%;justify-content:center}
.crumb{flex-wrap:wrap}
.crumb-l{min-width:0;flex-wrap:wrap}
.crumb-r{flex-wrap:wrap}
#app{display:block;min-width:0;outline:none}
#app:empty{min-height:var(--size-app-placeholder)}
#app p,#app h1,#app h3,#app .mono,.panel{overflow-wrap:anywhere}

/* Authentication retains the approved centered card and typography. */
#auth-gate{min-height:100dvh}
.auth-brand-wordmark{font-family:var(--font-display);font-size:var(--t-wordmark);font-weight:var(--fw-heavy);letter-spacing:var(--tr-cap);color:var(--fg-1);line-height:var(--lh-wordmark)}
.auth-title{font-size:var(--t-24);text-align:center;margin-bottom:var(--space-6)}
#auth-sub{text-align:center;margin-bottom:var(--space-20);color:var(--fg-3)}
#auth-form{display:grid;gap:var(--space-18)}
#auth-form label.field{margin-bottom:0}
#auth-form .btn{width:100%;justify-content:center}
#auth-error,#auth-info{margin:0}  /* design banners; the form's gap spaces them */
#auth-error:empty,#auth-info:empty{display:none}
.auth-switch{text-align:center;margin-top:var(--space-14);color:var(--fg-3)}
.auth-switch .link{color:var(--fg-1);border:0;border-bottom:var(--bw-1) solid var(--bd-strong);background:none;padding:0;letter-spacing:var(--tr-normal);border-radius:0;min-height:var(--size-target-min)}
#auth-loading{text-align:center;padding:var(--space-10) 0}
#auth-loading .spinner{width:var(--size-spinner-lg);height:var(--size-spinner-lg);margin:var(--space-10) 0 var(--space-18)}
#auth-retry{margin-top:var(--space-14);width:100%;justify-content:center}

/* Live dashboard: the approved cards render only recorded state. */
.dashboard-head{margin-bottom:var(--space-24)}
.dashboard-head p{margin-top:var(--space-8);color:var(--fg-3)}
.dashboard-section{margin-top:var(--space-28)}
.dashboard-section-head{margin-bottom:var(--space-14)}
.dashboard-section-head p{color:var(--fg-3);font-size:var(--t-13);margin-top:var(--space-6)}
.dashboard-cards{display:grid;gap:var(--space-16)}
.dashboard-card .card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-16)}
.dashboard-card .card-heading>div{min-width:0}
.dashboard-card .card-heading>.pill{flex-shrink:0}
.dashboard-card h3{margin:var(--space-5) 0 var(--space-7)}
.dashboard-card .card-meta{font-size:var(--t-13);color:var(--fg-3)}
.dashboard-card .card-standard{font-size:var(--t-13);color:var(--fg-2);margin-top:var(--space-10)}
.dashboard-card .card-footer{display:flex;justify-content:space-between;align-items:center;gap:var(--space-16);flex-wrap:wrap}
.dashboard-card .card-actions{display:flex;gap:var(--space-8);flex-wrap:wrap;align-items:center}
.dashboard-card .card-deadline{font-family:var(--font-mono);font-size:var(--t-12);margin-bottom:var(--space-8)}
.dashboard-card .card-note{font-size:var(--t-13);color:var(--fg-3);margin-top:var(--space-12)}
.dashboard-message{margin-bottom:var(--space-20)}
.dashboard-message .btn{margin-top:var(--space-12)}
.dashboard-stale .deadline-countdown{color:var(--warn)}
.dashboard-loading .stats{margin-top:var(--space-24)}
.dashboard-loading .skel-tcard{margin-top:var(--space-16)}
@media(max-width:900px){
  #nav{grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--space-12) var(--space-16)}
  .rail-account{margin-top:0;display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-20)}
  .rail-account>div{min-width:0;flex:1}
  .rail-account>button{width:auto;flex:none}
  #auth-status{margin:var(--space-3) 0 0}
  .crumb{position:static;backdrop-filter:none}
}
@media(max-width:600px){
  .crumb-r{width:100%}
  .dashboard-card .card-heading{flex-direction:column;gap:var(--space-10)}
  .dashboard-card .card-footer{align-items:flex-start}
  .dashboard-card .card-actions{width:100%}
  .dashboard-card .card-actions>.btn{flex:1;justify-content:center}
}
/* Approved Create flow (reference #s-create). Rules below the first comment are
   copied from design/hinwe-ui-v2.html; the scoped rules lay out the real wizard. */
.opt{display:block;border:var(--bw-1) solid var(--bd-strong);background:var(--bg-sunken);padding:var(--space-14) var(--space-16);border-radius:var(--r-1);cursor:pointer;margin-bottom:var(--space-10)}
.opt input{display:none}
.opt .t{color:var(--fg-1);font-weight:var(--fw-semibold);font-size:var(--t-14);margin-bottom:var(--space-2);display:flex;justify-content:space-between;align-items:center}
.opt .d{color:var(--fg-3);font-size:var(--t-13)}
.opt:hover{border-color:var(--fg-4)}
.opt.on{border-color:var(--red);background:var(--red-tint-6)}
.opt.on .t::after{content:"SELECTED";font-family:var(--font-mono);font-size:var(--t-10);color:var(--red-bright);letter-spacing:var(--tr-cap)}
.check{display:flex;gap:var(--space-10);align-items:flex-start;padding:var(--space-14) var(--space-16);border:var(--bw-1) solid var(--bd-strong);border-radius:var(--r-1);background:var(--bg-sunken);cursor:pointer;user-select:none}
.check .box{width:var(--size-check);height:var(--size-check);border:var(--bw-1) solid var(--fg-3);border-radius:var(--r-1);flex:0 0 auto;display:grid;place-items:center;color:transparent;font-size:var(--t-12);font-weight:var(--fw-heavy)}
.check.on .box{background:var(--red);border-color:var(--red);color:var(--on-red)}
.check .txt{color:var(--fg-1);font-size:var(--t-13);line-height:var(--lh-140)}
/* Keep the keyboard override after the prototype's input-hiding rules. */
.opt input,.check input:not(.box){display:block;position:absolute;opacity:0;width:var(--size-visually-hidden);height:var(--size-visually-hidden);margin:0;pointer-events:none}
.stepper{display:flex;gap:0;margin-bottom:var(--space-24);border:var(--bw-1) solid var(--bd-hairline);border-radius:var(--r-1);overflow:hidden;background:var(--bg-surface)}
.stepper .s{flex:1;padding:var(--space-12) var(--space-14);font-size:var(--t-11);letter-spacing:var(--tr-cap);text-transform:uppercase;color:var(--fg-4);border-right:var(--bw-1) solid var(--bd-hairline);position:relative;font-weight:var(--fw-semibold)}
.stepper .s:last-child{border-right:0}
.stepper .s .n{font-family:var(--font-mono);color:var(--fg-5);margin-right:var(--space-8)}
.stepper .s.done{color:var(--fg-2)}
.stepper .s.done .n{color:var(--ok)}
.stepper .s.cur{color:var(--fg-1);background:var(--bg-raised)}
.stepper .s.cur .n{color:var(--red)}
.review-block{border:var(--bw-1) solid var(--bd-strong);padding:var(--space-16) var(--space-18);background:var(--bg-sunken);margin-bottom:var(--space-12);border-radius:var(--r-1);display:grid;grid-template-columns:var(--size-review-label) 1fr auto;gap:var(--space-16);align-items:baseline}
.review-block .k{font-size:var(--t-10);letter-spacing:var(--tr-cap-wide);text-transform:uppercase;color:var(--fg-3);font-weight:var(--fw-bold)}
.review-block .v{color:var(--fg-1);font-size:var(--t-14);min-width:0;overflow-wrap:anywhere}
.review-block .edit{font-size:var(--t-11);color:var(--fg-3);letter-spacing:var(--tr-cap);text-transform:uppercase;background:none;border:0;cursor:pointer}
.review-block .edit:hover{color:var(--red-bright)}
.create-flow .create-nav{margin-top:var(--space-8)}
.create-flow .create-status{margin-bottom:var(--space-12);min-height:var(--size-status-line)}
.create-flow .create-window{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16)}
.create-flow .check{width:100%}
.create-flow [role=radiogroup] .err{font-size:var(--t-12);color:var(--red-bright);margin:var(--space-6) 0 var(--space-10)}
.create-draft-statement{color:var(--fg-1);font-size:var(--t-15);margin:var(--space-16) 0 0}
@media(max-width:900px){
  .create-flow .create-window{grid-template-columns:1fr;gap:0}
  .review-block{grid-template-columns:1fr} /* design's responsive rule, repeated after the base rule above */
}
@media(max-width:600px){
  .stepper .s{padding:var(--space-10) var(--space-4);text-align:center;letter-spacing:var(--tr-06)}
  .stepper .s .n{margin-right:0}
  .stepper .s .sl{position:absolute;width:var(--size-visually-hidden);height:var(--size-visually-hidden);overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .stepper .s.cur{flex:3}
  .stepper .s.cur .sl{position:static;width:auto;height:auto;clip:auto;margin-left:var(--space-6)}
  .create-flow .btn-row{flex-wrap:wrap}
  .create-flow .create-nav .btn{flex:1;justify-content:center}
  .create-draft .btn-row{width:100%}
  .create-draft .btn-row .btn{flex:1;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important}
}

/* Approved Submit Proof (#s-proof) and Verification Queue (#s-queue). */
.proof-screen{overflow-wrap:anywhere}
.proof-head{gap:var(--space-20);margin-bottom:var(--space-20);align-items:flex-start}
.proof-head h1{margin:var(--space-8) 0}.proof-id{overflow-wrap:anywhere}
.proof-screen .banner{margin:var(--space-16) 0}.proof-screen .deadline{margin-bottom:var(--space-20)}
.proof-paths{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-20);margin:var(--space-20) 0}
.proof-paths>*,.review-card>*{min-width:0}
.proof-success{border-left:var(--bw-3) solid var(--ok)}.proof-failure{border-left:var(--bw-3) solid var(--red)}
.proof-paths h2,.failure-confirm h2{margin:var(--space-6) 0 var(--space-16)}.proof-paths .field{display:block;margin:var(--space-18) 0}
.proof-screen fieldset{border:0;padding:0;margin:0;min-width:0}
.proof-screen .check{margin:var(--space-16) 0}
.proof-submit{width:100%;margin:var(--space-8) 0 var(--space-12)}.proof-text{white-space:pre-wrap;overflow-wrap:anywhere;margin:var(--space-10) 0}
.proof-link{display:block;overflow-wrap:anywhere;margin:var(--space-10) 0}
.proof-history{margin:var(--space-20) 0}.proof-history summary{cursor:pointer;color:var(--fg-1);font-weight:var(--fw-bold);margin-bottom:var(--space-10)}
.proof-attempt{padding:var(--space-18) 0;border-top:var(--bw-1) solid var(--bd-strong)}
.proof-attempt>.between{gap:var(--space-12);margin-bottom:var(--space-8)}.proof-decision{margin-top:var(--space-14);padding:var(--space-12);background:var(--bg-sunken);border-left:var(--bw-2) solid var(--fg-4)}
.proof-skeleton{height:var(--size-textarea-min);margin:var(--space-20) 0}.queue-tools{margin-bottom:var(--space-20)}.queue-empty{text-align:center;padding:var(--space-64) var(--space-24)}.queue-empty h2{margin:var(--space-8) 0 var(--space-12)}
.review-card{overflow-wrap:anywhere}.review-card .between{gap:var(--space-18);align-items:flex-start}.review-card .rule{margin:var(--space-16) 0}
.review-footer .field{margin:var(--space-16) 0}.review-footer .btn-row{justify-content:flex-end}.review-footer .err{margin:var(--space-12) 0}
@media(max-width:900px){.proof-paths{grid-template-columns:1fr}.proof-head{flex-wrap:wrap}.review-card>.between,.proof-attempt>.between{flex-wrap:wrap}.proof-screen .deadline{flex-wrap:wrap;gap:var(--space-12)}}

/* Commitment Details (#s-details), Permanent Record (#s-history) and Partner Invitation
   (no design screen: built from the review-card pattern). Spacing follows the design. */
.details-head h1{margin-top:var(--space-8)}
.details-skel-title{flex:1;max-width:75%}
.details-skel-title .skel-line{margin-top:var(--space-8)}
.screen-actions{justify-content:flex-end}
.panel-rule{margin:var(--space-14) 0}
/* App-only panels (no design counterpart) keep their own paragraph spacing. */
.proof-history>p,.consequence-complete>p{margin:var(--space-10) 0 var(--space-18)}
.empty-state{text-align:center;padding:var(--space-64) var(--space-24)}
.empty-state h2{margin:var(--space-8) 0 0}
.empty-state p{max-width:var(--size-form);margin:var(--space-8) auto 0}
.empty-state .btn-row{justify-content:center;margin-top:var(--space-20)}
.table-scroll{overflow-x:auto;position:relative}  /* also anchors .sr-only cells so they scroll with the table */
.table-scroll table.log{min-width:var(--size-wide)}
.table-scroll .pill,.table-scroll .nowrap,.table-scroll .btn{white-space:nowrap}
.invite-card .meta{margin:var(--space-16) 0}
.invite-note{margin-bottom:var(--space-12)}

/* Confirmation dialog (design #s-onb). The design frames .scrim inside the page; here it
   covers the whole viewport, so its frame (border, radius, minimum height) is removed. */
#dialog-root .dialog-layer{position:fixed;inset:0;z-index:var(--z-dialog);border:0;border-radius:var(--r-0);min-height:0;padding:var(--space-24) var(--space-16)}
.dialog-eyebrow{margin-bottom:var(--space-8)}
.dialog-text{margin:var(--space-10) 0 var(--space-20);color:var(--fg-2)}
.dialog h2 + .dialog-actions,.dialog h2 + .dialog-error{margin-top:var(--space-20)}
.dialog-error{margin-bottom:var(--space-16)}
.dialog-actions{justify-content:flex-end}