/* ============================================================
   Comply Wallet — design system
   Brand tokens lifted from credentry.com (Geist + teal on slate)
   ============================================================ */
/* ---------------------------------------------------------------------------
   Ready's names, the design system's values (#538).

   This stylesheet was written before the Credentry SDK and names its own tokens
   (--fg, --surface, --slate-400, --r-lg). They resolved against
   Credenxia.Components/theme-tokens.css, which is our own pre-SDK palette — so
   Ready and the Manager portal drew their neutrals, status colours and corner
   radii from two different places and slowly stopped matching. Ready's cards
   were rounded to 22px while the Manager's were 12px, which is the sort of
   difference nobody can name and everybody notices.

   Rather than rewrite 479 lines of selectors, the names stay and the values come
   from the SDK. Each alias keeps today's value as the fallback, so a token the
   SDK drops degrades to what Ready looks like now instead of to nothing.

   theme-tokens.css is shared with the Manager portal, so this block lives here,
   after it in index.html — the change is Ready's, and only Ready's.

   Deliberately NOT aliased:
     --t-fast / --t-slow  --ce-transition-* is a whole shorthand
                          ("150ms cubic-bezier(...)"), while these are durations
                          used as `transition: all var(--t-fast) var(--ease)`.
                          Aliasing yields two timing functions and invalid CSS.
     --mono               --ce-font-mono asks for JetBrains Mono, which this app
                          does not load; Geist Mono is in index.html.
     --blue-bg            --ce-blue-light is translucent, this is an opaque chip
                          background, and the two are not the same thing over a
                          coloured card.
     --teal-*, --blue,
     --font, --r-md,
     --link, --sh-brand   already derived from --brand-*, which the theme writes
                          at runtime from the tenant's branding. These are the
                          part that was working; leave them be.
   --------------------------------------------------------------------------- */
:root {
  --rail-w:230px;

  /* Text and surfaces */
  --fg: var(--ce-text-primary, #37424a);
  --fg-strong: var(--ce-gray-900, #232931);
  --fg-muted: var(--ce-text-secondary, #5d697d);
  --fg-subtle: var(--ce-text-muted, #5d697d);
  --bg: var(--ce-bg-secondary, #f2f5f8);
  --surface: var(--ce-bg-primary, #fff);
  --line: var(--ce-border-primary, #37424a24);

  /* Neutral ramp */
  --slate-50: var(--ce-gray-50, #f4f6f9);
  --slate-100: var(--ce-gray-100, #e9edf2);
  --slate-200: var(--ce-gray-200, #d7dde5);
  --slate-300: var(--ce-gray-300, #b3bcc9);
  --slate-400: var(--ce-gray-400, #8b96a8);
  --slate-800: var(--ce-gray-800, #2c333c);
  --slate-900: var(--ce-gray-900, #232931);

  /* Status. Semantically the same colours, so one design system should own them. */
  --red: var(--ce-danger, #e53935);
  --red-bg: var(--ce-danger-light, #fcdbd9);
  --green: var(--ce-success, #4caf50);
  --green-bg: var(--ce-success-light, #dcefdd);
  --amber: var(--ce-warning, #f19f4f);
  --amber-bg: var(--ce-warning-light, #fcead7);

  /* Geometry — the visible half of looking like one product */
  --r-sm: var(--ce-radius-sm, 8px);
  --r-lg: var(--ce-radius-lg, 22px);
  --r-xl: var(--ce-radius-xl, 32px);
  --r-full: var(--ce-radius-full, 999px);
  --sh-2: var(--ce-shadow-md, 0 2px 4px #37424a0d, 0 14px 38px #37424a1a);
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--font); color:var(--fg); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:15px; line-height:1.5;
}
h1,h2,h3,h4 { color:var(--fg-strong); font-weight:700; letter-spacing:-.02em; margin:0; }
a { color:var(--link); text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
:focus-visible { outline:2px solid var(--teal-500); outline-offset:2px; border-radius:var(--r-xs); }
/* headings receive programmatic focus on navigation (a11y) — no visible box */
h1:focus, h1:focus-visible, h2:focus, h2:focus-visible { outline:none; }

/* ---- boot / loading ---- */
.boot { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; background:var(--bg); }
.boot-mark { font-size:30px; font-weight:800; letter-spacing:-.03em; color:var(--fg-strong); }
/* The Comply mark sits inside the wordmark lockups. Sized in em so it tracks whatever
   font-size the surrounding lockup already sets, and spaced with a margin rather than a
   gap so the two-tone wordmark beside it keeps its existing tight pairing. */
.brand-glyph { width:1.3em; height:1.3em; flex:none; margin-right:.3em; vertical-align:-.2em; }
.boot-mark, .brand { display:inline-flex; align-items:center; }
.boot-mark span { color:var(--teal-500); }
.boot-bar { width:160px; height:5px; border-radius:var(--r-full); background:var(--slate-200); overflow:hidden; }
.boot-bar span { display:block; width:40%; height:100%; border-radius:var(--r-full); background:var(--teal-500); animation:boot 1.1s var(--ease) infinite; }
@keyframes boot { 0%{transform:translateX(-110%)} 100%{transform:translateX(360%)} }
#blazor-error-ui { display:none; position:fixed; bottom:0; left:0; right:0; padding:12px 18px; background:var(--slate-900); color:#fff; z-index:100; }
#blazor-error-ui .reload { color:var(--teal-300); }
#blazor-error-ui .dismiss { float:right; cursor:pointer; }

/* ============================================================
   App shell
   ============================================================ */
/* .ce-app is on this element so credentry-ui.css applies to the page at all — the stylesheet is
   scoped to it. But .ce-app is also the Manager shell's anatomy, a flex row holding a sidebar
   beside a main column, and Ready has neither: its rail is position:fixed and .main offsets past
   it with a margin. Inheriting that row made .main a flex item at the default min-width:auto, so
   it refused to shrink below its content and laid out 369px wide in a 320px viewport — a 49px
   sideways scroll on the phone-first portal (#553). The scope is wanted; the layout is not. */
.shell.ce-app { display:block; }
.shell { min-height:100vh; }

.holder-list { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.holder-choice {
  width:100%; text-align:left; cursor:pointer; font:inherit;
  display:flex; flex-direction:column; gap:3px; min-width:0;
  background:var(--surface, #fff); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px;
}
.holder-choice:hover { border-color:var(--teal-500); }
.holder-choice.current { border-color:var(--teal-500); box-shadow:inset 3px 0 0 var(--teal-500); }
.holder-name { font-size:16px; font-weight:650; color:var(--fg-strong); }
.holder-meta { font-size:13px; color:var(--fg-muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.holder-readonly {
  background:var(--slate-100, #e9edf2); color:var(--fg-muted);
  border-radius:var(--r-full); padding:1px 8px; font-size:11px; font-weight:650;
  letter-spacing:.04em; text-transform:uppercase;
}

/* Acting for a holder who is not you (ADR 0025, #577). The whole frame carries it, not a line
   inside the page: the question "whose record is this" has to be answerable at a glance, and an
   upload onto the wrong Person's record cannot be undone. The amber is the same one the nav badge
   uses for "something needs you" — this is the same register of attention, not an error. */
.shell.acting-for { box-shadow: inset 0 0 0 3px var(--amber); }
.acting-banner {
  position:sticky; top:0; z-index:25;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--amber-bg); color:#3a2400;
  padding:10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  border-bottom:1px solid var(--amber);
  margin-left:var(--rail-w);
}
.acting-who { display:flex; flex-direction:column; min-width:0; }
.acting-who strong { font-size:15px; font-weight:700; letter-spacing:-.01em; }
.acting-who small { font-size:12px; opacity:.85; }
.acting-leave {
  margin-left:auto; flex:none;
  background:#3a2400; color:#fff; border:0; border-radius:var(--r-full);
  padding:7px 14px; font:inherit; font-size:13px; font-weight:600; cursor:pointer;
}
.acting-leave:hover { background:#000; }

.rail {
  position:fixed; inset:0 auto 0 0; width:var(--rail-w);
  background:var(--slate-900); color:var(--slate-300);
  display:flex; flex-direction:column; padding:22px 14px; gap:4px; z-index:20;
}
.rail .brand { font-size:21px; font-weight:800; letter-spacing:-.03em; color:#fff; padding:6px 10px 2px; }
.rail .brand span { color:var(--teal-400); }
.rail .brand small { display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-400); margin-top:2px; }
.rail nav { margin-top:18px; display:flex; flex-direction:column; gap:3px; }
.nav-item {
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-md);
  color:var(--slate-300); font-weight:500; font-size:14px; transition:background var(--t-fast),color var(--t-fast);
}
.nav-item:hover { background:#ffffff14; color:#fff; }
.nav-item.active { background:var(--teal-500); color:var(--brand-on-primary); box-shadow:var(--sh-brand); }
.nav-item .badge { margin-left:auto; background:var(--amber); color:#3a2400; font-size:11px; font-weight:700; border-radius:var(--r-full); padding:1px 7px; }
.nav-item.active .badge { background:#fff; color:var(--teal-700); }
.rail .spacer { flex:1; }
.rail .me { display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--r-md); background:#ffffff10; }
.rail .me .av { width:34px; height:34px; border-radius:var(--r-full); background:linear-gradient(135deg,var(--teal-400),var(--teal-700)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.rail .me .who { font-size:13px; color:#fff; font-weight:600; line-height:1.2; }
.rail .me .who small { display:block; color:var(--slate-400); font-weight:400; font-size:11px; }

.main { margin-left:var(--rail-w); min-height:100vh; }
.topbar { display:none; }
.content { max-width:920px; margin:0 auto; padding:34px 28px 80px; }

/* bottom tabbar (mobile) */
.tabbar { display:none; }

/* ============================================================
   Status Home
   ============================================================ */
.context-chip {
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  color:var(--teal-700); background:var(--teal-50); border:1px solid var(--teal-200);
  padding:5px 12px; border-radius:var(--r-full); letter-spacing:.01em;
}
.context-chip .dot { width:7px; height:7px; border-radius:var(--r-full); background:var(--teal-500); }
.context-chip b { color:var(--teal-800); }
/* It is a link now, not a label — the chevron always claimed it was something you could press. */
.context-chip { text-decoration:none; cursor:pointer; }
.context-chip:hover { background:var(--teal-100); border-color:var(--teal-300); }
.context-chip:focus-visible { outline:2px solid var(--teal-500); outline-offset:2px; }

/* The greeting sits on its own surface rather than on the page. Everything here was white on
   near-white: no depth, no accent, and the most important block on the page looked like a gap
   between two cards. The tint follows the tenant's brand, so this is one surface and not a
   second palette. */
.home-head {
  display:flex; align-items:center; gap:26px; margin:16px 0 18px; flex-wrap:wrap;
  padding:22px 24px; border-radius:var(--r-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--brand-primary) 13%, transparent), transparent 60%),
    var(--surface);
  border:1px solid var(--line); box-shadow:var(--sh-1);
}
.home-head .hi { flex:1; min-width:240px; }
.home-head h1 { font-size:30px; margin:2px 0 6px; }
.home-head .sub { color:var(--fg-muted); font-size:15px; }
.home-head .sub b { color:var(--fg-strong); }

/* readiness ring — status is a colour, the same as everywhere else in the product. It used to
   draw the brand gradient when ready and nothing at all otherwise, so "Not ready" — the state
   that most needs attention — was a flat grey donut saying less than the words inside it. */
.ring { width:112px; height:112px; flex:0 0 auto; position:relative;
  --ring-from:var(--brand-primary); --ring-to:var(--brand-primary-hover); --ring-halo:transparent; }
.ring-ready    { --ring-from:var(--green); --ring-to:#5ab55f; --ring-halo:var(--green-bg); }
.ring-expiring { --ring-from:var(--amber); --ring-to:#f7bd7f; --ring-halo:var(--amber-bg); }
.ring-notready { --ring-from:var(--red);   --ring-to:#f08b86; --ring-halo:var(--red-bg); }
/* A soft disc behind the arc so the ring reads as a status object rather than an outline. Kept
   pale: the arc carries the colour, and a saturated band around a saturated disc turns "there is
   work to do" into "something has gone wrong". */
.ring::before { content:""; position:absolute; inset:12px; border-radius:var(--r-full);
  background:color-mix(in srgb, var(--ring-halo) 32%, var(--surface)); }
.ring svg { transform:rotate(-90deg); width:100%; height:100%; position:relative; }
.ring .track { fill:none; stroke:var(--slate-200); stroke-width:6; }
.ring .arc { fill:none;  stroke-width:6; stroke-linecap:round; transition:stroke-dashoffset 1s var(--ease); }
.ring .mid { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
/* The verdict carries the colour too. A coloured band around black text makes the band the
   message; the words are the message. */
.ring .mid b { font-size:17px; font-weight:800; color:var(--ring-from); letter-spacing:-.02em; line-height:1.15; text-align:center; max-width:94px; }
.ring .mid small { font-size:11px; color:var(--fg-muted); font-weight:600; letter-spacing:.08em; text-transform:uppercase; }

/* card surface */


/* journey */
.journey { margin-top:22px; padding:24px 26px; }
.journey > .lbl { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-subtle); margin-bottom:18px; }
/* The link to the recorded milestones at /journey. Sits under the last stage, not beside the
   label, so it reads as "and then what happened" rather than a heading action (#605). */
.journey-all { display:inline-block; margin-top:6px; font-size:13.5px; font-weight:600; color:var(--brand-600, var(--fg)); text-decoration:none; }
.journey-all:hover, .journey-all:focus-visible { text-decoration:underline; }
.stage { display:flex; gap:16px; }
.stage .spine { display:flex; flex-direction:column; align-items:center; }
.stage .node { width:30px; height:30px; border-radius:var(--r-full); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex:0 0 auto; border:2px solid transparent; }
.stage .line { width:2px; flex:1; background:var(--slate-200); min-height:18px; margin:4px 0; }
.stage:last-child .line { display:none; }
.stage.done .node { background:var(--green); color:#fff; }
.stage.done .line { background:var(--green); opacity:.45; }
.stage.active .node { background:var(--teal-500); color:var(--brand-on-primary); box-shadow:0 0 0 5px var(--teal-100); }
.stage.locked .node { background:var(--slate-100); color:var(--slate-400); }
.stage .body { flex:1; padding-bottom:22px; }
.stage .body h3 { font-size:16px; }
.stage.active .body h3 { color:var(--teal-700); }
.stage.locked .body h3 { color:var(--slate-400); }
.stage .body .meta { font-size:13px; color:var(--fg-muted); margin-top:2px; }

.reveal { animation:rise var(--t-slow) var(--ease) both; }
@keyframes rise { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* stroke-SVG icon set (nav + row marks) */
.stroke-icon {
  width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linejoin:round; flex:0 0 auto;
}
.stroke-icon.filled,
.nav-item.active .stroke-icon,
.tab.active .stroke-icon { fill:currentColor; }

/* one row component — flat --surface, no extra shadows */
.wallet-item {
  display:flex; align-items:center; gap:14px; padding:15px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
}
.wallet-item + .wallet-item { margin-top:8px; }
.wallet-item-mark {
  width:42px; height:42px; flex:0 0 auto; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  background:var(--slate-50); color:var(--fg-muted);
}
.wallet-item-mark .stroke-icon { width:18px; height:18px; }
.wallet-item-mark.ok { background:var(--green-bg); color:var(--green); }
.wallet-item-mark.warn { background:var(--amber-bg); color:var(--amber); }
.wallet-item-mark.info { background:var(--blue-bg); color:var(--blue); }
.wallet-item-body { flex:1; min-width:0; }
.wallet-item-title { font-size:15px; font-weight:600; color:var(--fg-strong); }
.wallet-item-sub { font-size:12.5px; color:var(--fg-muted); margin-top:3px; }
.wallet-item-trail { flex:0 0 auto; }
.wallet-item.actionable { cursor:pointer; }
.wallet-item.is-action { border-color:var(--teal-300); }
.wallet-item.is-action .wallet-item-mark { background:var(--teal-100); color:var(--teal-700); }
.wallet-item.is-expiring { border-color:#f3d6ab; }
.wallet-item.is-expiring .wallet-item-mark { background:var(--amber-bg); color:var(--amber); }
.wallet-item.settled .wallet-item-mark { background:var(--green-bg); color:var(--green); }
/* On a phone a wide trailing element — "Ready — 3 expiring", a Renew button — squeezed the text
   beside it until the subtitle wrapped to three lines and the row looked broken. Below this width
   the trailing element takes its own line instead, indented to line up with the text rather than
   the icon. The row gets taller; nothing gets crushed. */
@media (max-width:520px) {
  .wallet-item { flex-wrap:wrap; row-gap:10px; }
  .wallet-item-body { flex-basis:calc(100% - 56px); }
  .wallet-item-trail { margin-left:56px; }
}

.reveal > .wallet-item { margin:11px 0; }
.reveal > .wallet-item + .wallet-item { margin-top:11px; }

.collapsed-row { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fg-muted); padding:10px 4px 2px; cursor:pointer; user-select:none; }
.collapsed-row:hover { color:var(--fg); }
.settled-list { margin-top:6px; }

/* inline upload — sits under an actionable requirement card */
.req-detail { margin:-7px 0 11px; }
.req-upload { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:0 16px 14px 72px; }
.req-upload input[type=file] { font-size:12.5px; max-width:230px; color:var(--fg-muted); }

/* The browser's own file control, which rendered as a grey "Choose File" box sitting in the
   middle of an otherwise designed page. Restyled rather than replaced: a custom picker loses
   the keyboard and assistive behaviour the native one has for free. */
.ce-app input[type="file"], input[type="file"] {
  display:block; width:100%; max-width:100%; font:inherit; font-size:14px; color:var(--fg-muted);
  background:var(--surface); border:1px dashed var(--line-strong, #b3bcc9);
  border-radius:var(--r-md); padding:12px 14px; cursor:pointer;
}
.ce-app input[type="file"]:hover, input[type="file"]:hover { border-color:var(--teal-500); color:var(--fg); }
.ce-app input[type="file"]::file-selector-button, input[type="file"]::file-selector-button {
  font:inherit; font-size:13px; font-weight:650; cursor:pointer; margin-right:12px;
  color:var(--teal-800); background:color-mix(in srgb, var(--brand-primary) 14%, var(--surface));
  border:0; border-radius:var(--r-full); padding:7px 14px;
}
.ce-app input[type="file"]::file-selector-button:hover, input[type="file"]::file-selector-button:hover { background:color-mix(in srgb, var(--brand-primary) 24%, var(--surface)); }

/* pills + buttons */
.pill { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:var(--r-full); white-space:nowrap; }
.pill .d { width:6px; height:6px; border-radius:var(--r-full); }
.pill.blue { color:#0b6f93; background:var(--blue-bg); } .pill.blue .d{background:var(--blue);}
.pill.amber { color:#9a5a13; background:var(--amber-bg); } .pill.amber .d{background:var(--amber);}
.pill.green { color:#2c6e2f; background:var(--green-bg); } .pill.green .d{background:var(--green);}
.pill.red { color:#a3201d; background:var(--red-bg); } .pill.red .d{background:var(--red);}
.pill.slate { color:var(--fg-muted); background:var(--slate-100); } .pill.slate .d{background:var(--slate-400);}













/* ready banner */
.ready-banner { margin-top:22px; padding:22px 24px; border-radius:var(--r-lg);
  background:linear-gradient(120deg,var(--teal-600),var(--teal-800)); color:#fff; box-shadow:var(--sh-brand);
  display:flex; align-items:center; gap:16px; }
.ready-banner .big { display:flex; }
.ready-banner .stroke-icon { width:28px; height:28px; }
.ready-banner h3 { color:#fff; font-size:18px; }
.ready-banner p { margin:3px 0 0; color:var(--teal-100); font-size:14px; }

/* ============================================================
   Focused wizard — page content inside shared WizardShell
   (chrome lives in Credenxia.Components/wwwroot/wizard-shell.css)
   ============================================================ */
.focus-inner .step-kicker { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-600); }
.focus-inner h2 { font-size:23px; margin:10px 0 6px; }
.focus-inner .lead { color:var(--fg-muted); font-size:15px; margin-bottom:22px; }

/* selectable options */
.choice { display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:15px 16px; margin:10px 0;
  border:1.5px solid var(--line); border-radius:var(--r-md); background:var(--surface); transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast); }
.choice:hover { border-color:var(--teal-300); transform:translateY(-1px); }
.choice.sel { border-color:var(--teal-500); background:var(--teal-50); }
.choice .radio { width:20px; height:20px; border-radius:var(--r-full); border:2px solid var(--slate-300); flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.choice.sel .radio { border-color:var(--teal-500); }
.choice.sel .radio::after { content:""; width:10px; height:10px; border-radius:var(--r-full); background:var(--teal-500); }
.choice .ic { font-size:20px; } .choice .lab { font-weight:600; color:var(--fg-strong); } .choice .lab small{ display:block; font-weight:400; color:var(--fg-muted); font-size:12.5px; }

/* dropzone (simulated upload) */
.drop { border:2px dashed var(--slate-300); border-radius:var(--r-lg); padding:30px 20px; text-align:center; cursor:pointer; transition:border-color var(--t-fast),background var(--t-fast); background:var(--slate-50); }
.drop:hover { border-color:var(--teal-400); background:var(--teal-50); }
.drop .dico { font-size:34px; }
.drop h4 { margin:8px 0 2px; font-size:15px; }
.drop p { color:var(--fg-muted); font-size:13px; margin:0; }
.drop.filled { border-style:solid; border-color:var(--green); background:var(--green-bg); cursor:default; }
.drop.filled .dico { color:var(--green); }

/* selfie sim */
.selfie { width:170px; height:170px; border-radius:var(--r-full); margin:6px auto 4px; border:3px solid var(--teal-200);
  background:radial-gradient(circle at 50% 38%,var(--teal-50),var(--slate-100)); display:flex; align-items:center; justify-content:center; font-size:60px; position:relative; overflow:hidden; }
.selfie.scan::after { content:""; position:absolute; left:0; right:0; height:36px; background:linear-gradient(var(--teal-300),transparent); animation:scan 1.4s var(--ease) infinite; }
@keyframes scan { 0%{top:-36px} 100%{top:170px} }
.selfie.done { border-color:var(--green); background:var(--green-bg); }

/* review list */
.review { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.review .row { display:flex; justify-content:space-between; gap:12px; padding:12px 15px; font-size:14px; border-bottom:1px solid var(--line); }
.review .row:last-child { border-bottom:none; }
.review .row span { color:var(--fg-muted); } .review .row b { color:var(--fg-strong); font-weight:600; }

.escape { display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-size:13px; color:var(--fg-muted); text-decoration:underline; text-underline-offset:3px; background:none; border:none; }
.escape:hover { color:var(--fg); }

/* done */
.done-wrap { text-align:center; padding:14px 0; }
.done-check { width:84px; height:84px; border-radius:var(--r-full); background:var(--green-bg); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:42px; margin:0 auto 18px; animation:pop var(--t-slow) var(--ease); }
@keyframes pop { 0%{transform:scale(.4); opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1); opacity:1} }

/* ============================================================
   Stub pages
   ============================================================ */



.ce-page-header .add-credential { display:inline-block; margin-top:12px; text-decoration:none; }
.wallet-item-trail .renew-action { margin-left:8px; }
.stub-note { display:flex; gap:12px; align-items:center; padding:14px 16px; margin-top:18px; border-radius:var(--r-md); background:var(--teal-50); border:1px dashed var(--teal-300); color:var(--teal-800); font-size:13.5px; }
.empty-state { padding:36px 32px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--fg-muted); }
.empty-state h3 { margin:10px 0 0; color:var(--fg-strong); font-size:18px; }
/* The icon sat bare on white, a thin grey outline in a lot of space. A tinted disc gives the
   empty state something to be about. */
.empty-state .stroke-icon {
  width:26px; height:26px; color:var(--teal-700); box-sizing:content-box;
  padding:15px; border-radius:var(--r-full);
  background:color-mix(in srgb, var(--brand-primary) 12%, var(--surface));
}
.org-group { margin-bottom:20px; }
.org-group h3 { margin:0 0 8px; }
.present-cta { margin:0 0 16px; }
.last-share {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; margin:0 0 16px; border-radius:var(--r-md);
  background:var(--teal-50); border:1px solid var(--teal-200);
  color:var(--teal-800); font-size:13.5px; font-weight:600;
}
.last-share small { display:block; font-weight:500; color:var(--teal-700); margin-top:2px; }

/* ============================================================
   B3 consent sheet (/share)
   ============================================================ */
.share-page {
  min-height:100vh; background:var(--slate-800);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.consent-sheet {
  background:var(--surface); border-radius:28px 28px 0 0;
  padding:12px 22px 32px; min-height:88vh;
}
.sheet-handle {
  width:44px; height:4px; border-radius:var(--r-full);
  background:var(--slate-200); margin:8px auto 10px;
}
.consent-sheet h1 { font-size:26px; margin:8px 0 8px; }
.consent-sheet .lead { color:var(--fg-muted); font-size:15px; margin:0 0 8px; }
.consent-kicker {
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-subtle); margin:18px 0 8px;
}
.consent-row {
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:14px 16px; margin:8px 0; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--surface); color:inherit;
}
.consent-row.required { background:var(--slate-50); }
.consent-row.asked { background:var(--green-bg); border-color:#c8e6c9; }
.consent-mark {
  width:36px; height:36px; border-radius:var(--r-full); flex:0 0 auto;
  background:var(--slate-200);
}
.consent-mark.asked-mark { border-radius:var(--r-sm); background:#c8e6c9; }
.consent-row .lab { flex:1; font-weight:600; color:var(--fg-strong); }
.consent-row .lab small { display:block; font-weight:400; color:var(--fg-muted); font-size:12.5px; margin-top:2px; }
.consent-note {
  background:var(--teal-50); border:1px solid var(--teal-200); border-radius:var(--r-md);
  padding:14px 16px; color:var(--teal-800); font-size:14px; margin:16px 0 18px;
}
.consent-switch { flex:0 0 auto; display:flex; align-items:center; }
.consent-switch input[type=checkbox] {
  appearance:none; -webkit-appearance:none; position:relative;
  width:44px; height:26px; border-radius:var(--r-full); border:none;
  background:var(--slate-300); cursor:pointer; transition:background var(--t-fast);
}
.consent-switch input[type=checkbox]::after {
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:var(--r-full); background:#fff;
  transition:transform var(--t-fast);
}
.consent-switch input[type=checkbox]:checked { background:var(--teal-500); }
.consent-switch input[type=checkbox]:checked::after { transform:translateX(18px); }

/* ============================================================
   B3 present mode (/present)
   ============================================================ */
.present-page {
  min-height:100vh; background:var(--surface);
  padding:16px 22px 40px; max-width:440px; margin:0 auto; text-align:center;
}
.present-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.present-done {
  background:none; border:none; color:var(--fg-muted); font-weight:600; font-size:15px; padding:8px 0;
}
.present-photo {
  width:88px; height:88px; border-radius:var(--r-full);
  background:var(--slate-100); color:var(--fg-subtle);
  display:flex; align-items:center; justify-content:center;
  margin:24px auto 12px; font-size:11px; font-weight:600; text-align:center; line-height:1.2;
}
.present-page h1 { font-size:28px; }
.present-role { color:var(--fg-muted); margin:6px 0 22px; }
.present-code {
  background:var(--slate-900); color:var(--surface); border-radius:var(--r-lg);
  padding:42px 16px; font-family:var(--mono); font-size:28px; font-weight:700;
  letter-spacing:.16em; margin:0 auto 10px; max-width:280px;
}
.present-meta { color:var(--fg-subtle); font-size:13px; margin-bottom:18px; }
.present-sharing {
  text-align:left; background:var(--green-bg); border:1px solid #c8e6c9;
  border-radius:var(--r-lg); padding:16px 18px; margin:8px 0 22px;
}
.present-sharing .kicker {
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#2c6e2f;
}
.present-sharing ul { list-style:none; padding:8px 0 10px; margin:0; }
.present-sharing li {
  font-weight:600; color:var(--fg-strong); padding:4px 0 4px 18px; position:relative;
}
.present-sharing li::before {
  content:""; position:absolute; left:0; top:11px; width:8px; height:8px;
  border-radius:var(--r-full); background:var(--green);
}
.present-not { color:var(--fg-muted); font-size:13.5px; border-top:1px solid #c8e6c9; padding-top:10px; }
.present-foot { color:var(--fg-subtle); font-size:13.5px; line-height:1.45; margin:0; }

/* ============================================================
   B4 public verify (/v/{code})
   ============================================================ */
.verify-page {
  min-height:100vh; background:var(--bg);
  padding:18px 18px 40px; max-width:440px; margin:0 auto;
}
.verify-top {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px;
}
.verify-top .brand { font-size:18px; font-weight:800; letter-spacing:-.03em; color:var(--fg-strong); }
.verify-top .brand span { color:var(--teal-500); }
.verify-host { font-size:12px; color:var(--fg-subtle); font-weight:600; }
.verify-card {
  background:var(--surface); border-radius:var(--r-lg);
  padding:18px 18px 16px; margin:0 0 14px; border:1px solid var(--line);
}
.verify-banner {
  display:flex; align-items:center; gap:10px;
  margin:-18px -18px 16px; padding:16px 18px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.verify-banner h1 { font-size:22px; }
.verify-banner.cleared { background:var(--green-bg); color:#1b5e20; }
.verify-banner.cleared h1 { color:#1b5e20; }
.verify-banner.not-cleared { background:var(--red-bg); color:#a3201d; }
.verify-banner.not-cleared h1 { color:#a3201d; }
.verify-dot {
  width:10px; height:10px; border-radius:var(--r-full); background:currentColor; flex:0 0 auto;
}
.verify-who { display:flex; align-items:center; gap:12px; margin:4px 0 16px; }
.verify-photo {
  width:56px; height:56px; border-radius:var(--r-full);
  background:var(--slate-100); color:var(--fg-subtle);
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; text-align:center; line-height:1.2;
}
.verify-name { font-weight:700; color:var(--fg-strong); font-size:16px; }
.verify-checked { color:var(--fg-muted); font-size:13px; }
.verify-cred {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:var(--r-md); border:1px solid var(--line);
}
.verify-cred.ok { background:var(--green-bg); border-color:#c8e6c9; }
.verify-cred.bad { background:var(--red-bg); border-color:#f5c2c0; }
.verify-mark {
  width:28px; height:28px; border-radius:var(--r-full); flex:0 0 auto;
  background:#c8e6c9;
}
.verify-cred.bad .verify-mark { background:#f5c2c0; }
.verify-cred .lab { flex:1; font-weight:700; color:var(--fg-strong); }
.verify-cred .lab small { display:block; font-weight:400; color:var(--fg-muted); font-size:12.5px; }
.verify-expiry { color:var(--fg-muted); font-size:13.5px; margin:10px 0 0; }
.verify-why { margin:14px 0 0; color:var(--fg-strong); }
.verify-kicker {
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-subtle); margin:0 0 8px;
}
.verify-muted { color:var(--fg-muted); font-size:13.5px; }
.verify-snapshot {
  background:var(--teal-50); border:1px solid var(--teal-200); border-radius:var(--r-md);
  padding:14px 16px; color:var(--teal-800); font-size:14px; margin:0 0 14px;
}
.verify-foot { color:var(--fg-subtle); font-size:13px; margin:8px 2px 0; }
.verify-rednote { color:var(--fg-muted); font-size:13px; margin:8px 2px 0; }
.not-cleared-card { overflow:hidden; }

.me-edit { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin:4px 0 18px; }
.me-edit .field { flex:1; min-width:180px; margin:0; }

.share-history-section { margin:28px 0 8px; }
.share-history-section h2 { font-size:18px; margin:0 0 4px; }
.share-history-section > p { color:var(--fg-muted); margin:0 0 12px; font-size:14px; }
.share-history { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.share-history-item {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px 16px;
}
.share-history-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:4px; }
.share-history-head strong { color:var(--fg-strong); }
.share-history-head span { color:var(--fg-muted); font-size:13px; }
.share-history-item p { margin:4px 0 0; font-size:13.5px; }

@media (min-width:821px) {
  .share-page { justify-content:center; align-items:center; padding:40px 20px; background:var(--bg); }
  .consent-sheet {
    min-height:0; max-width:440px; width:100%; border-radius:var(--r-xl); box-shadow:var(--sh-2);
  }
}
.mini-bar { height:6px; border-radius:var(--r-full); background:var(--slate-200); overflow:hidden; width:120px; margin-top:6px; }
.mini-bar span { display:block; height:100%; background:var(--teal-500); border-radius:var(--r-full); }

/* ============================================================
   Responsive — phone / native feel
   ============================================================ */
@media (max-width:820px) {
  body { font-size:16px; }
  .rail { display:none; }
  /* The rail becomes a bottom tab bar here, so the banner's offset would be a dead gutter. */
  .acting-banner { margin-left:0; }
  .acting-leave { margin-left:0; width:100%; }
  .main { margin-left:0; padding-bottom:74px; }
  .content { padding:18px 16px 40px; }
  .topbar { display:flex; align-items:center; gap:10px; padding:14px 16px; position:sticky; top:0; background:#f2f5f8ee; backdrop-filter:blur(8px); z-index:15; border-bottom:1px solid var(--line); }
  .topbar .brand { font-size:18px; font-weight:800; letter-spacing:-.03em; color:var(--fg-strong); }
  .topbar .brand span { color:var(--teal-500); }
  .topbar .me { margin-left:auto; width:32px; height:32px; border-radius:var(--r-full); background:linear-gradient(135deg,var(--teal-400),var(--teal-700)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
  .home-head h1 { font-size:25px; }

  .tabbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:20; background:#fff;
    border-top:1px solid var(--line); padding:7px 6px calc(7px + env(safe-area-inset-bottom)); box-shadow:0 -6px 20px #37424a14; }
  .tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px; color:var(--fg-subtle); font-size:10.5px; font-weight:600; position:relative; }
  .tab .stroke-icon { width:18px; height:18px; }
  .tab.active { color:var(--teal-600); }
  .tab .dot { position:absolute; top:2px; right:50%; transform:translateX(16px); width:8px; height:8px; border-radius:var(--r-full); background:var(--amber); border:2px solid #fff; }

  .focus-inner h2 { font-size:21px; }
}
@media (min-width:821px) { .topbar { display:none; } }

/* Native rail actions use the same anatomy as navigation links. */
.rail button.nav-item { width:100%; background:transparent; border:0; text-align:left; }
.rail button.nav-item:hover { background:#ffffff14; color:var(--surface); }