/* WellDoc Re ERM Platform — visual system ported from the Governance Portal
   (WellDoc_Re_Governance_Portal 2026-07-26, sole UX reference by Co-CEO decision).
   Warm-paper editorial design: Fraunces display serif, Manrope body, JetBrains Mono
   accents. A compatibility layer maps the pre-existing template classes onto the
   portal components so all screens carry the look. */
:root {
  --wd-blue: #00317F;
  --wd-blue-dark: #001A4D;
  --wd-blue-light: #E8EEF7;
  --wd-yellow: #F5A423;
  --wd-yellow-dark: #C77D00;
  --wd-yellow-light: #FDF4E1;
  --ink: #0A1628;
  --ink-soft: #2C3E5A;
  --ink-muted: #5C6B82;
  --paper: #FAF8F3;
  --paper-warm: #F2EDE0;
  --rule: #D7CFBF;
  --rule-strong: #1F2A44;
  --success: #0F7A4D;
  --success-light: #DAEEE2;
  --warn: #B85C00;
  --warn-light: #FCE8D0;
  --danger: #A8201A;
  --danger-light: #F5DDDB;
  --serif: 'Fraunces', Georgia, 'Times New Roman', 'Noto Serif CJK SC', 'Songti SC', SimSun, serif;
  --sans: 'Manrope', -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --mono: 'JetBrains Mono', Consolas, Menlo, monospace;
}
html[lang="zh-Hant"] {
  --serif: 'Fraunces', 'Noto Serif CJK TC', 'Songti TC', 'PMingLiU',
    'Microsoft JhengHei', Georgia, serif;
  --sans: 'Manrope', 'Noto Sans CJK TC', 'PingFang TC', 'Microsoft JhengHei',
    'Heiti TC', -apple-system, "Segoe UI", sans-serif;
}
html[lang="zh-Hant"] .demo-eyebrow,
html[lang="zh-Hant"] .demo-nav-label,
html[lang="zh-Hant"] .eyebrow,
html[lang="zh-Hant"] label,
html[lang="zh-Hant"] th,
html[lang="zh-Hant"] .metric-label,
html[lang="zh-Hant"] .auth-field label {
  letter-spacing: .06em;
  text-transform: none;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--paper); color: var(--ink);
  line-height: 1.55; font-weight: 400; font-size: 15px; min-height: 100vh; }

/* ============== PILOT BANNER (portal demo-banner pattern -> persona switcher) ===== */
.demo-banner { background: linear-gradient(135deg, #2C3E5A 0%, #1F2A44 100%); color: #fff;
  padding: 12px 32px; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; position: sticky; top: 0; z-index: 200;
  border-bottom: 2px solid var(--wd-yellow); }
.demo-banner-left { display: flex; align-items: center; gap: 16px; }
.demo-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--wd-yellow); text-transform: uppercase; }
.demo-title { font-family: var(--serif); font-size: 15px; font-weight: 500; }
.demo-nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.demo-nav-label { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.6);
  letter-spacing: 0.1em; text-transform: uppercase; margin-right: 8px; }
.demo-pill { padding: 5px 14px; background: rgba(255,255,255,0.08); color: #fff;
  border-radius: 100px; font-size: 12px; font-weight: 500; cursor: pointer;
  border: 1px solid transparent; transition: all 0.15s; text-decoration: none; }
.demo-pill:hover { background: rgba(255,255,255,0.16); border-color: rgba(245,164,35,0.4); }
.demo-pill.active { background: var(--wd-yellow); color: var(--ink); font-weight: 700; }

/* ============== TOP NAV ============== */
header.topbar, nav.topbar { background: var(--ink); color: #fff; padding: 14px 0;
  border-bottom: 3px solid var(--wd-yellow); }
.topbar .container { display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; }
/* Corporate identity. The topbar is dark, so it carries the white lockup; the English
   wordmark only, because the Chinese line is unreadable at bar height. The full lockup
   with 睿達健康再保險 is used on the sign-in page, where there is room for it. */
.brand { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; }
.brand-logo { height: 26px; width: auto; display: block; }
.brand-divider { width: 1px; height: 26px; background: rgba(255,255,255,0.22); }
.brand-product { font-family: var(--serif); font-weight: 500; font-size: 17px;
  letter-spacing: -0.01em; }
/* kept for any surface still rendering the pre-logo lettermark */
.brand-mark { width: 36px; height: 36px; background: var(--wd-yellow); display: grid;
  place-items: center; font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: 18px; border-radius: 2px; }
.brand-name { font-family: var(--serif); font-weight: 500; font-size: 18px;
  letter-spacing: -0.01em; }
.brand-name .small { display: block; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.15em; color: var(--wd-yellow); text-transform: uppercase;
  margin-bottom: 2px; font-weight: 400; }
.nav-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav-link { color: rgba(255,255,255,0.8); font-size: 13px; font-weight: 500;
  padding: 6px 12px; cursor: pointer; border-radius: 4px; transition: background 0.15s;
  text-decoration: none; }
.nav-link:hover { background: rgba(255,255,255,0.1); color: #fff; }
.nav-link.active { background: rgba(245,164,35,0.18); color: var(--wd-yellow); font-weight: 700; }
.user-pill { display: flex; align-items: center; gap: 10px; padding: 6px 14px;
  background: rgba(255,255,255,0.08); border-radius: 100px; font-size: 13px; }
.user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--wd-yellow);
  color: var(--ink); display: grid; place-items: center; font-weight: 700; font-size: 12px;
  font-family: var(--serif); }
.user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.user-meta .name { font-weight: 600; font-size: 13px; }
.user-meta .role { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  color: var(--wd-yellow); text-transform: uppercase; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
main { padding: 32px 0 80px; }
main > .container { min-width: 0; }

/* ============== HEADINGS ============== */
h1 { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.05;
  letter-spacing: -0.02em; color: var(--ink); margin-bottom: 8px; }
h1 .accent { font-style: italic; color: var(--wd-blue); font-weight: 400; }
h2 { font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: -0.01em;
  color: var(--ink); margin-bottom: 12px; }
h3 { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 16px; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--wd-yellow-dark); margin-bottom: 8px; }
.sub, .subtitle { font-size: 14px; color: var(--ink-soft); max-width: 78ch; margin: 5px 0 20px; }
.page-header { padding-bottom: 24px; border-bottom: 1px solid var(--rule);
  margin-bottom: 32px; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 24px; }
.today-pill { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--ink-muted); background: var(--paper-warm); padding: 8px 14px;
  border-radius: 100px; white-space: nowrap; }

/* ============== CARDS ============== */
.grid { display: grid; gap: 16px; }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.card { background: #fff; border: 1px solid var(--rule); padding: 22px 24px;
  margin-bottom: 16px; position: relative; min-width: 0; }
.card.accent, .card-soon { border-left: 4px solid var(--wd-yellow); }
.card-urgent { border-left: 4px solid var(--danger); }
.card-normal { border-left: 4px solid var(--wd-blue); }
.card-done { border-left: 4px solid var(--success); opacity: 0.9; }
.card h2 { border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 14px; }
.card-title { font-family: var(--serif); font-weight: 500; font-size: 18px;
  color: var(--ink); line-height: 1.3; }
.kpi { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--ink);
  letter-spacing: -0.01em; }
.kpi small { font-family: var(--sans); font-size: 12px; color: var(--ink-muted); font-weight: 400; }

/* ============== METRICS STRIP ============== */
.metrics-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 32px; }
.metric { background: #fff; padding: 18px 20px; }
.metric-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px; }
.metric-value { font-family: var(--serif); font-weight: 500; font-size: 24px;
  color: var(--ink); line-height: 1; letter-spacing: -0.01em; }
.metric-status { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 2px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 500; }
.metric-status.GREEN { background: var(--success-light); color: var(--success); }
.metric-status.AMBER { background: var(--warn-light); color: var(--warn); }
.metric-status.RED { background: var(--danger-light); color: var(--danger); }
.metric-notes { font-size: 11px; color: var(--ink-muted); margin-top: 6px; line-height: 1.4; }

/* ============== BADGES (compat: .chip/.ref and .pill.* map here) ============== */
.badge, .chip, .ref { display: inline-block; padding: 3px 10px; font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
  border-radius: 2px; white-space: nowrap; background: var(--wd-blue-light);
  color: var(--wd-blue); border: 0; }
.badge-yellow { background: var(--wd-yellow-light); color: var(--wd-yellow-dark); }
.badge-green { background: var(--success-light); color: var(--success); }
.badge-warn { background: var(--warn-light); color: var(--warn); }
.badge-danger { background: var(--danger-light); color: var(--danger); }
.badge-neutral { background: var(--paper-warm); color: var(--ink-soft); }
.pill { display: inline-block; padding: 3px 10px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; border-radius: 2px;
  white-space: nowrap; }
.pill.green, .pill.g { background: var(--success-light); color: var(--success); }
.pill.amber, .pill.a { background: var(--warn-light); color: var(--warn); }
.pill.red, .pill.r { background: var(--danger-light); color: var(--danger); }
.pill.navy, .pill.n { background: var(--wd-blue-light); color: var(--wd-blue); }
.pill.grey, .pill.gr { background: var(--paper-warm); color: var(--ink-soft); }

/* ============== TABLES (portal audit/scenarios table treatment) ============== */
.tblwrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px;
  font-variant-numeric: tabular-nums; }
th { background: var(--ink); color: #fff; padding: 10px 14px; font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
  text-align: left; white-space: nowrap; }
td { padding: 10px 14px; border-bottom: 1px solid var(--rule); vertical-align: top;
  color: var(--ink); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-family: var(--mono); font-size: 12px;
  white-space: nowrap; }
tr.tot td { border-top: 1.5px solid var(--rule-strong); font-weight: 600; }
tr:hover td { background: var(--wd-blue-light); }

/* ============== NOTES / ALERT BANNERS ============== */
.note { background: var(--wd-yellow-light); border-left: 4px solid var(--wd-yellow);
  padding: 14px 18px; font-size: 12.5px; color: var(--ink-soft); margin: 12px 0;
  line-height: 1.6; border-radius: 2px; }
.banner, .alert { padding: 14px 20px; border-radius: 2px; margin-bottom: 24px;
  border-left: 4px solid; font-size: 13px; }
.banner.ok, .alert-success { background: var(--success-light); border-color: var(--success);
  color: var(--success); }
.banner.err { background: var(--danger-light); border-color: var(--danger);
  color: var(--danger); }
.alert-info { background: var(--wd-blue-light); border-color: var(--wd-blue);
  color: var(--wd-blue); }
.alert-warn { background: var(--warn-light); border-color: var(--warn); color: var(--warn); }

/* ============== BUTTONS & FORMS ============== */
button, .btn, .button { display: inline-block; padding: 9px 18px; font-family: var(--sans);
  font-weight: 600; font-size: 13px; text-decoration: none; border: 1px solid transparent;
  border-radius: 2px; cursor: pointer; transition: all 0.15s; text-align: center;
  letter-spacing: 0.02em; background: var(--wd-blue); color: #fff; }
button:hover, .btn-primary:hover, .button:hover { background: var(--wd-blue-dark); }
.btn-sign, button.sign { background: var(--wd-yellow); color: var(--ink); font-weight: 700; }
.btn-sign:hover, button.sign:hover { background: var(--wd-yellow-dark); color: #fff; }
button.ghost, .btn-ghost, .button.ghost { background: transparent; color: var(--ink-muted);
  border-color: var(--rule); }
button.ghost:hover, .btn-ghost:hover, .button.ghost:hover { background: var(--paper-warm); color: var(--ink); }
button.small { padding: 4px 12px; font-size: 12px; }
form.inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px; font-weight: 500; }
input, select, textarea { padding: 9px 12px; font-family: var(--sans); font-size: 13px;
  border: 1px solid var(--rule); background: #fff; border-radius: 2px; max-width: 100%; }
textarea { display: block; width: 100%; min-height: 96px; resize: vertical; }

/* ============== SIGN-OFF COMPONENTS (portal) ============== */
.signoff-panel-action { border: 2px solid var(--wd-yellow); background: var(--wd-yellow-light);
  padding: 20px; margin-bottom: 16px; }
.signoff-progress { width: 100%; height: 6px; background: var(--rule); border-radius: 3px;
  overflow: hidden; margin: 8px 0 14px; }
.signoff-progress-bar { height: 100%; background: var(--wd-yellow); transition: width 0.3s; }
.signoff-progress-bar.complete { background: var(--success); }
.signoff-row { display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px dashed var(--rule); }
.signoff-row:last-child { border-bottom: none; }
.signoff-status { width: 28px; height: 28px; border-radius: 50%; display: grid;
  place-items: center; color: #fff; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.signoff-status.signed { background: var(--success); }
.signoff-status.pending { background: var(--rule); color: var(--ink-muted); }
.signoff-name { font-size: 13px; font-weight: 600; }
.signoff-role { font-family: var(--mono); font-size: 10px; color: var(--ink-muted); }
.signoff-when { font-family: var(--mono); font-size: 9px; color: var(--success); margin-top: 2px; }
/* compat: old .sig grid */
.sig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.sig { border: 1px solid var(--rule); padding: 10px 12px; background: #fff; }
.sig .who { font-weight: 700; font-size: 13px; }
.sig.signed { border-left: 3px solid var(--success); background: var(--success-light); }

/* ============== COMMENTS (portal) ============== */
.comment-card { background: #fff; border: 1px solid var(--rule); padding: 18px 22px;
  margin-bottom: 12px; border-left: 3px solid var(--wd-blue); }
.comment-card.ined { border-left-color: var(--wd-yellow); }
.comment-header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.comment-anchor { font-family: var(--mono); font-size: 11px; color: var(--ink-muted);
  margin-bottom: 8px; }
.comment-body { font-size: 14px; color: var(--ink); line-height: 1.6; }
.comment-meta { margin-top: 10px; display: flex; justify-content: space-between;
  align-items: center; font-family: var(--mono); font-size: 10px; color: var(--ink-muted); }

/* ============== LONG-VALUE CONTAINMENT (kept from ops build) ============== */
.clamp { display: block; max-width: 300px; overflow-wrap: anywhere; word-break: break-word;
  font-size: 12px; color: var(--ink-soft); }
details.val { max-width: 320px; }
details.val summary { cursor: pointer; font-family: var(--mono); font-size: 11px;
  color: var(--wd-blue); list-style: none; overflow-wrap: anywhere; }
details.val summary::before { content: "\25B8  "; font-size: 9px; color: var(--ink-muted); }
details.val[open] summary::before { content: "\25BE  "; }
details.val pre { margin: 6px 0 0; background: var(--paper-warm); border: 1px solid var(--rule);
  padding: 8px 10px; font-family: var(--mono); font-size: 11px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; max-width: 420px; }

/* ============== MISC ============== */
.mono { font-family: var(--mono); font-size: 12px; }
.hash { font-family: var(--mono); font-size: 10.5px; color: var(--ink-muted);
  word-break: break-all; }
.section-header { display: flex; align-items: center; justify-content: space-between;
  margin: 32px 0 16px; }
.section-count { font-family: var(--mono); font-size: 12px; color: var(--ink-muted);
  padding: 4px 12px; background: var(--paper-warm); border-radius: 100px; }
.bar-out { background: var(--paper-warm); border-radius: 99px; height: 7px; overflow: hidden;
  min-width: 70px; }
.bar-in { height: 100%; border-radius: 99px; background: var(--wd-blue); }
footer { padding: 24px 0; background: var(--ink); color: rgba(255,255,255,0.5);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; margin-top: 48px; }
footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* ============== AUTH PAGES (corporate navy + amber) ============== */
.auth-body{margin:0;min-height:100vh;display:grid;grid-template-columns:11fr 9fr;
  font-family:var(--sans);background:var(--paper)}
.auth-brand{position:relative;overflow:hidden;color:#fff;padding:56px 64px;
  display:flex;flex-direction:column;
  background:linear-gradient(160deg,var(--wd-blue) 0%,var(--wd-blue-dark) 78%)}
.auth-brand::before{content:'';position:absolute;top:-160px;right:-160px;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(circle,var(--wd-yellow) 0%,transparent 68%);opacity:.14}
/* the corporate mark as a watermark, in place of a typographic stand-in */
.auth-brand::after{content:'';position:absolute;bottom:-70px;right:-70px;
  width:520px;height:520px;background:url('/static/img/welldoc-re-mark-white.png')
  no-repeat center/contain;opacity:.05;pointer-events:none}
.auth-logo{display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  margin-bottom:72px;position:relative;z-index:1}
.auth-logo-img{height:76px;width:auto;display:block}
.auth-logo-legal{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
  color:var(--wd-yellow);text-transform:uppercase}
/* kept for any surface still rendering the pre-logo lettermark */
.auth-mark{width:52px;height:52px;background:var(--wd-yellow);display:grid;place-items:center;
  font-family:var(--serif);font-weight:600;color:var(--wd-blue-dark);font-size:26px;border-radius:3px;
  box-shadow:0 6px 18px rgba(0,0,0,.25)}
.auth-logo .t1{font-family:var(--serif);font-size:24px;font-weight:500;letter-spacing:-.01em}
.auth-logo .t2{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
  color:var(--wd-yellow);text-transform:uppercase;margin-top:3px}
.auth-headline{font-family:var(--serif);font-weight:500;font-size:50px;line-height:1.06;
  letter-spacing:-.02em;margin:0 0 18px;position:relative;z-index:1;color:#fff}
.auth-headline em{font-style:italic;font-weight:400;color:var(--wd-yellow)}
.auth-tagline{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.72);max-width:460px;
  margin:0 0 44px;position:relative;z-index:1}
.auth-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:520px;
  position:relative;z-index:1}
.auth-fact{padding:14px 16px;background:rgba(255,255,255,.06);
  border-left:3px solid var(--wd-yellow)}
.auth-fact .num{font-family:var(--serif);font-weight:500;font-size:24px;color:var(--wd-yellow)}
.auth-fact .label{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  color:rgba(255,255,255,.75);margin-top:5px;text-transform:uppercase;line-height:1.5}
.auth-brand-foot{margin-top:auto;padding-top:40px;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;color:rgba(255,255,255,.45);position:relative;z-index:1}
.auth-panel{display:flex;flex-direction:column;justify-content:center;padding:56px 48px;
  background:linear-gradient(0deg, rgba(0,49,127,.03), rgba(0,49,127,.03)), var(--paper)}
.auth-card{max-width:400px;width:100%;margin:0 auto;background:#fff;border:1px solid var(--rule);
  border-top:4px solid var(--wd-yellow);padding:36px 34px;
  box-shadow:0 16px 48px rgba(0,26,77,.10)}
.auth-card .language-switch{display:flex;align-items:center;justify-content:flex-end;gap:5px;
  margin:-18px -12px 22px 0;min-width:0}
.auth-card .language-switch button{min-width:0;padding:5px 10px;border:1px solid var(--rule);
  border-radius:100px;background:transparent;color:var(--ink-muted);font-family:var(--sans);
  font-size:11px;font-weight:600;line-height:1.35;letter-spacing:0;text-transform:none;
  white-space:nowrap;box-shadow:none}
.auth-card .language-switch button:hover{background:var(--paper-warm);border-color:var(--wd-blue);
  color:var(--wd-blue)}
.auth-card .language-switch button:focus-visible{outline:2px solid var(--wd-blue);
  outline-offset:2px}
html[lang^="en"] .auth-card .language-switch button[value="en"],
html[lang="zh-Hant"] .auth-card .language-switch button[value="zh-Hant"],
.auth-card .language-switch button.active,
.auth-card .language-switch button[aria-current="true"]{background:var(--wd-blue);
  border-color:var(--wd-blue);color:#fff}
.auth-card h1{font-family:var(--serif);font-weight:500;font-size:30px;letter-spacing:-.015em;
  margin:0 0 6px;color:var(--ink)}
.auth-card .lead{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin:0 0 26px}
.auth-field{margin-bottom:18px}
.auth-field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-muted);margin-bottom:7px;font-weight:500}
.auth-field input{width:100%;padding:12px 14px;font-family:var(--sans);font-size:14.5px;
  border:1.5px solid var(--rule);background:#fff;border-radius:3px;
  transition:border-color .15s, box-shadow .15s}
.auth-field input:focus{outline:none;border-color:var(--wd-blue);
  box-shadow:0 0 0 3px rgba(0,49,127,.12)}
.auth-field input.code{font-family:var(--mono);font-size:26px;letter-spacing:.4em;text-align:center}
.auth-submit{width:100%;padding:14px;background:var(--wd-blue);color:#fff;border:none;
  border-radius:3px;font-family:var(--sans);font-weight:700;font-size:13.5px;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .15s;margin-top:4px}
.auth-submit:hover{background:var(--wd-blue-dark)}
.auth-submit.amber{background:var(--wd-yellow);color:var(--wd-blue-dark)}
.auth-submit.amber:hover{background:var(--wd-yellow-dark);color:#fff}
.auth-fineprint{margin-top:22px;font-size:11.5px;line-height:1.65;color:var(--ink-muted)}
.auth-err{background:var(--danger-light);border-left:4px solid var(--danger);color:var(--danger);
  padding:11px 14px;font-size:13px;margin:0 0 18px;border-radius:2px}
.auth-qr{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:6px 0 20px}
.auth-qr img{width:172px;height:172px;border:1px solid var(--rule);background:#fff;padding:8px;border-radius:3px}
.auth-secret{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--wd-blue);
  background:var(--wd-blue-light);padding:6px 10px;border-radius:3px;display:inline-block;
  margin-top:6px;overflow-wrap:anywhere}
.auth-provision-link{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;
  color:var(--wd-blue);overflow-wrap:anywhere}
.auth-steps{display:flex;gap:8px;margin:0 0 22px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase}
.auth-step{padding:5px 12px;border-radius:100px;background:var(--paper-warm);color:var(--ink-muted)}
.auth-step.on{background:var(--wd-blue);color:#fff}
.auth-step.done{background:var(--success-light);color:var(--success)}
@media (max-width:960px){
  .auth-body{grid-template-columns:1fr}
  .auth-brand{padding:32px;min-height:auto}
  .auth-headline{font-size:34px}
  .auth-logo{margin-bottom:32px}
  .auth-facts{display:none}
  .auth-brand::after{display:none}
  .auth-panel{padding:32px 20px}
}

/* ============== PRINT (INEDs print) ============== */
@media print {
  .demo-banner, header.topbar, nav.topbar, form, button, footer { display: none !important; }
  body { background: #fff; }
  .card { border: none; padding: 0; margin-bottom: 18px; }
  main { padding: 0; }
  th { color: var(--ink); background: #fff; border-bottom: 1.5px solid var(--ink); }
}

/* ============== SIGN-WITH-COMMENT ==============
   A signature given under a stated reservation is a different governance act from a
   silent one, so the reservation renders beside the signature rather than in a
   separate list where the two could drift apart. */
.sig-reservation { margin: 6px 0 4px; padding: 8px 11px; background: var(--wd-yellow-light);
  border-left: 3px solid var(--wd-yellow); border-radius: 0 4px 4px 0; font-size: 12.5px;
  color: var(--ink-soft); }
.sig-reservation-label { font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--warn); margin-bottom: 3px; font-weight: 600; }

/* ============== MVC PORTAL HYDRATION ============== */
.portal-load-state { margin: 0 0 16px; padding: 10px 13px; border: 1px solid var(--rule);
  border-radius: 6px; background: #fff; color: var(--ink-soft); font-size: 13px; }
.portal-load-warning { border-color: var(--wd-yellow); background: var(--wd-yellow-light);
  color: var(--warn); }
.nav-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
.nav-right .nav-link { white-space: nowrap; }
@media (max-width:1200px) {
  .topbar .container { align-items: flex-start; }
  .nav-right { max-width: 72%; }
}

/* ============== RESPONSIVE LAYOUT & EVIDENCE CONTAINMENT ==============
   Wide governance tables contain hashes and verbatim JSON.  Their complete evidence
   remains selectable and readable, while scrolling is contained inside the table card
   instead of widening the whole document. */
.portal-page, .page-header > *, .demo-banner-left, .brand, .nav-right,
.grid > *, .grid-2 > *, .form-grid > * { min-width: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 16px; }
.portal-page > form.inline { margin-bottom: 24px; }

.table-wrap, .tblwrap { display: block; width: 100%; max-width: 100%; overflow-x: auto;
  overflow-y: hidden; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible, .tblwrap:focus-visible { outline: 2px solid var(--wd-blue);
  outline-offset: 3px; }
.table-wrap table, .tblwrap table { min-width: 640px; }
.table-wrap th, .table-wrap td, .tblwrap th, .tblwrap td { word-break: normal;
  overflow-wrap: break-word; }
.table-wrap pre, .tblwrap pre { width: 100%; max-width: 100%; margin: 0;
  font-family: var(--mono); font-size: 11px; line-height: 1.55; white-space: pre-wrap;
  overflow-wrap: anywhere; word-break: break-word; tab-size: 2; }
.portal-page > pre, .portal-page .card > pre { display: block; width: 100%; max-width: 100%;
  overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  font-family: var(--mono); font-size: 11px; line-height: 1.55; tab-size: 2; }
.portal-page li, .portal-page .mono { max-width: 100%; overflow-wrap: anywhere; }

/* The audit table has stable evidence-oriented columns.  Dates never collapse into one
   word per line; long JSON wraps inside the evidence cell without being clipped. */
.audit-table { table-layout: fixed; min-width: 1100px !important; }
.audit-col-id { width: 58px; }
.audit-col-time { width: 132px; }
.audit-col-action { width: 220px; }
.audit-col-entity { width: 220px; }
.audit-col-actor { width: 132px; }
.audit-col-evidence { width: auto; }
.audit-id, .audit-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.audit-time { font-family: var(--mono); font-size: 11px; }
.audit-action, .audit-entity, .audit-actor { overflow-wrap: anywhere !important; }
.audit-evidence { min-width: 0; }
.audit-evidence pre { color: var(--ink-soft); }

img, svg, video, canvas { max-width: 100%; height: auto; }
.topbar .container { max-width: 1600px; }
.nav-right, .demo-nav { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.user-pill, .today-pill, .demo-pill { flex: 0 0 auto; }
.language-form { display: inline-flex; align-items: center; gap: 4px; margin: 0;
  min-width: max-content; flex: 0 0 auto; }
.language-form .demo-pill { padding: 5px 12px; font-family: inherit; line-height: 1.45; }

@media (max-width: 1500px) {
  .topbar .container { flex-direction: column; align-items: stretch; gap: 12px; }
  .nav-right { width: 100%; max-width: none; flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; padding-bottom: 4px; }
}

@media (max-width: 760px) {
  .container { padding-left: 16px; padding-right: 16px; }
  main { padding: 22px 0 52px; }
  .demo-banner { position: static; padding: 10px 16px; align-items: flex-start; gap: 9px; }
  .demo-banner-left { width: 100%; justify-content: space-between; gap: 10px; }
  .demo-nav { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .demo-nav-label { margin-right: 2px; white-space: nowrap; }
  header.topbar, nav.topbar { padding: 12px 0; }
  .brand { gap: 10px; }
  .brand-logo { height: 22px; }
  .brand-divider { height: 22px; }
  .brand-product { font-size: 15px; line-height: 1.2; }
  h1 { max-width: 100%; font-size: clamp(26px, 6vw, 34px); overflow-wrap: anywhere;
    word-break: break-word; }
  .page-header { flex-direction: column; align-items: stretch; gap: 14px;
    margin-bottom: 22px; padding-bottom: 18px; }
  .page-header .button, .page-header > button, .page-header > .today-pill {
    align-self: flex-start; }
  .grid.c2, .grid.c3, .grid-2, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 17px 16px; }
  .section-header, .comment-header, .comment-meta { align-items: flex-start; flex-wrap: wrap; }
  footer .container { flex-direction: column; }
  .auth-card { padding: 28px 22px; }
  .auth-card .language-switch { margin: -12px -4px 20px 0; }
}

@media (max-width: 560px) {
  .demo-banner-left { flex-direction: column; align-items: flex-start; }
  .demo-eyebrow { max-width: 100%; line-height: 1.6; overflow-wrap: anywhere; }
  .demo-title { font-size: 14px; }
  form.inline { flex-direction: column; align-items: stretch; }
  form.inline > div, form.inline > input:not([type="hidden"]), form.inline > select,
  form.inline > textarea, form.inline > button { width: 100%; }
  form.inline input:not([type="hidden"]), form.inline select { width: 100%; }
  .metrics-strip { grid-template-columns: minmax(0, 1fr); }
  .table-wrap table, .tblwrap table { min-width: 600px; }
  .audit-table { min-width: 980px !important; }
  .auth-brand { padding: 26px 20px; }
  .auth-logo-img { height: auto; max-height: 64px; }
  .auth-panel { padding: 24px 14px; }
  .auth-qr img { width: min(172px, 100%); height: auto; }
  .auth-card .language-switch { justify-content: stretch; margin-right: 0; }
  .auth-card .language-switch button { flex: 1 1 0; }
}