/* Shield base styles. Fonts come from Google Fonts <link> in base.html (no font-face rules here). */
:root {
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-subtle: #f8f9fb;
  --color-text: #17202e;
  --color-ink: #14213a;
  --color-muted: #5d6676;
  --color-faint: #8a92a0;
  --color-border: #e1e4ea;
  --color-border-strong: #c9ced8;
  --color-primary: #24467e;
  --color-primary-hover: #1b3765;
  --color-primary-ink: #ffffff;
  --color-primary-soft: #eaf0f8;
  --sev-critical: #a3262e;
  --sev-high: #c2541c;
  --sev-medium: #a87f12;
  --sev-low: #3d7a45;
  --sev-info: #6b7383;
  --ok: #2f6b3d;
  --ok-soft: #e9f3eb;
  --warn: #8a5a00;
  --warn-soft: #fbf3e2;
  --danger-soft: #f9e9ea;
  --radius: 10px;
  --radius-sm: 4px;
  --space: 16px;
  --shadow: 0 1px 2px rgba(20, 33, 58, .05), 0 4px 16px -8px rgba(20, 33, 58, .10);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); }

.container { max-width: 1040px; margin: 0 auto; padding: 0 var(--space); }

.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: var(--space); flex-wrap: wrap; }
.brand { font-weight: 700; color: var(--color-text); text-decoration: none; }
.site-nav { display: flex; gap: var(--space); font-size: 14px; }
.site-nav a { color: var(--color-muted); text-decoration: none; }
.site-nav a:hover { color: var(--color-text); }

main.container { padding-top: calc(var(--space) * 2); padding-bottom: calc(var(--space) * 3); }

.site-footer { border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 13px; padding: var(--space) 0; }

.hero h1 { font-size: 28px; line-height: 1.4; margin: 0 0 8px; }
.lead { color: var(--color-muted); margin: 0 0 var(--space); }
.notice { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 12px var(--space); }

.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space); }

.btn { display: inline-block; border: 0; border-radius: var(--radius); padding: 10px 20px; font: inherit; font-weight: 700; cursor: pointer; background: var(--color-primary); color: var(--color-primary-ink); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.sev { display: inline-block; min-width: 3em; text-align: center; border-radius: 4px; padding: 0 6px; font-size: 13px; font-weight: 700; color: #fff; }
.sev--critical { background: var(--sev-critical); }
.sev--high { background: var(--sev-high); }
.sev--medium { background: var(--sev-medium); }
.sev--low { background: var(--sev-low); }
.sev--info { background: var(--sev-info); }

@media (max-width: 600px) {
  .hero h1 { font-size: 22px; }
}

@media print {
  .site-header, .site-footer { display: none; }
  body { background: #fff; }
}

/* ---- shared ---- */
.muted { color: var(--color-muted); }
.small { font-size: 13px; }
.h2 { font-size: 20px; margin: calc(var(--space) * 2) 0 var(--space); }
.h3 { font-size: 17px; margin: 0 0 8px; }
.input { font: inherit; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 6px; background: #fff; color: var(--color-text); max-width: 100%; }
.input--lg { font-size: 18px; padding: 12px 14px; width: 100%; }
.btn--lg { font-size: 18px; padding: 14px 28px; }
.btn--ghost { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); padding: 6px 14px; }
.field-label { display: block; font-weight: 700; margin-bottom: 6px; }
.badge { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; background: #e8edf7; color: #1b2a4a; }
.badge--warn { background: #fff1d6; color: #7a4b00; border: 1px solid #f0c36d; }
.badge--muted { background: #eef0f3; color: var(--color-muted); }
.badge--grade-A, .badge--grade-B { background: #e3f4e4; color: #1f5f22; }
.badge--grade-C { background: #fff4d1; color: #6d5200; }
.badge--grade-D, .badge--grade-E { background: #fde4e1; color: #8a1c13; }
.notice--ok { border-color: #9fd3a3; background: #effaf0; }

/* ---- input screen ---- */
.scan-form { display: grid; gap: var(--space); }
.check { display: flex; gap: 8px; align-items: center; font-weight: 700; cursor: pointer; }
.check input { width: 20px; height: 20px; }
.form-error { color: var(--sev-critical); font-weight: 700; margin: 0; }

/* ---- scan screen ---- */
.scan-head { margin-bottom: var(--space); }
.scan-head__domain { margin: 0; color: var(--color-muted); font-weight: 500; }
.scan-head__status { margin: 0; font-size: 24px; }
.running { display: grid; gap: var(--space); }
.progress-card { display: grid; gap: 8px; }
.progress { height: 10px; background: #e7eaf0; border-radius: 999px; overflow: hidden; }
.progress__bar { height: 100%; background: var(--color-primary); transition: width .4s ease; }
.progress__step { margin: 0; font-weight: 700; }
.company-box { border-top: 1px dashed var(--color-border); padding-top: 8px; }
.company-box__name { margin: 0; font-size: 18px; font-weight: 700; }
.profile-form { display: grid; gap: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.form-grid label { display: grid; gap: 4px; font-size: 14px; font-weight: 500; }
.amount-input { display: flex; gap: 6px; }
.amount-input input { flex: 1; min-width: 0; }

/* top: amount + scenarios */
.loss-top { display: grid; gap: var(--space); }
.loss-hero__note { margin: 0; font-size: 13px; color: var(--warn); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.scenario-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space); }
.scenario-card--top { border: 2px solid var(--color-primary); }
.scenario-card__head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.scenario-card__title { font-size: 15px; margin: 0; }
.scenario-card__amount { font-size: 22px; font-weight: 700; margin: 8px 0; }
.scenario-card__split { display: grid; gap: 2px; margin: 0; font-size: 13px; }
.scenario-card__split div { display: flex; justify-content: space-between; gap: 8px; }
.scenario-card__split dt { color: var(--color-muted); }
.scenario-card__split dd { margin: 0; font-weight: 500; }
.likelihood { font-size: 12px; font-weight: 700; border-radius: 4px; padding: 0 6px; white-space: nowrap; }
.likelihood--high { background: #fde4e1; color: #8a1c13; }
.likelihood--medium { background: #fff4d1; color: #6d5200; }
.likelihood--low { background: #e3f4e4; color: #1f5f22; }
.tag-provisional { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: #7a4b00; }

/* evidence strip */
.evidence-grid { display: grid; grid-template-columns: minmax(260px, 1fr) 2.4fr; gap: 12px; align-items: start; }
.ev-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space); }
.ev-card__title { font-size: 15px; margin: 0 0 8px; }
.ev-revenue__value { font-size: 26px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-revenue__label { margin: 4px 0; font-weight: 500; }
.ev-revenue--missing { border: 2px solid #f0a020; background: #fffaf0; }
.ev-revenue__missing { font-size: 17px; font-weight: 700; color: #7a4b00; margin: 0 0 4px; }
.ev-revenue__company { margin: 0 0 4px; font-weight: 700; }
.excerpt { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--color-border); color: var(--color-muted); font-size: 13px; }
.conf { font-size: 12px; font-weight: 700; border-radius: 4px; padding: 1px 8px; }
.conf--high { background: #e3f4e4; color: #1f5f22; }
.conf--medium { background: #e6effc; color: #1b3f8a; }
.conf--low { background: #fff4d1; color: #6d5200; }
.conf--default { background: #eef0f3; color: var(--color-muted); }
.conf--input { background: #efe6fb; color: #4b2a85; }
.revenue-fix { display: grid; gap: 8px; margin-top: 8px; }
.revenue-fix__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.attribution { font-size: 11px; color: var(--color-muted); margin: 8px 0 0; }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.case-card { display: flex; flex-direction: column; gap: 4px; }
.case-card__head { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--color-muted); }
.case-card__company { margin: 0; font-size: 16px; }
.case-card__facts { margin: 4px 0; font-size: 13px; display: grid; gap: 2px; }
.case-card__facts dt { color: var(--color-muted); font-size: 12px; }
.case-card__facts dd { margin: 0 0 4px; }
.case-card__scaled { margin: 4px 0; font-weight: 700; color: #0f1b3d; background: #f1f4fb; border-radius: 6px; padding: 6px 8px; font-size: 14px; }
.case-card__foot { margin-top: auto; display: grid; gap: 2px; }
.verify--primary { color: #1f5f22; font-weight: 700; }
.verify--secondary { color: #7a4b00; font-weight: 700; }
.ev-ratio { margin-top: 12px; display: grid; gap: 12px; }
.ratio-row__label { margin: 0; font-weight: 500; }
.ratio-row--top .ratio-row__label { font-weight: 700; }
.ratio-bar { position: relative; height: 18px; background: #eef0f3; border-radius: 999px; margin: 6px 0; }
.ratio-bar__range { position: absolute; top: 4px; height: 10px; background: #b9c6e4; border-radius: 999px; min-width: 2px; }
.ratio-bar__median { position: absolute; top: 0; width: 2px; height: 18px; background: #1b3f8a; }
.ratio-bar__ours { position: absolute; top: -3px; width: 14px; height: 24px; margin-left: -7px; background: var(--sev-high); border-radius: 4px; box-shadow: 0 0 0 2px #fff; }
.ratio-row__legend { margin: 0; }
.ratio-row__reason { margin: 2px 0 0; color: #6d5200; }

/* findings */
.finding { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 8px; }
.finding summary { cursor: pointer; padding: 10px var(--space); font-weight: 500; }
.finding__body { padding: 0 var(--space) var(--space); }
.check-list { margin: 0; padding-left: 1.2em; }
.result-failed { display: grid; gap: 8px; }

@media (max-width: 860px) {
  .scenario-grid, .case-grid, .evidence-grid { grid-template-columns: 1fr; }
}

[hidden] { display: none !important; }

/* line-item evidence drawer (T061) */
.scenario-grid { grid-auto-flow: row dense; }
.scenario-card:has(> .breakdown[open]) { grid-column: 1 / -1; }
.breakdown { margin-top: 8px; border-top: 1px solid var(--color-border); padding-top: 8px; }
.breakdown__toggle { cursor: pointer; font-weight: 700; color: var(--color-primary); font-size: 14px; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.breakdown__toggle::-webkit-details-marker { display: none; }
.breakdown__toggle::before { content: "▸"; display: inline-block; transition: transform .15s ease; }
.breakdown[open] > .breakdown__toggle::before { transform: rotate(90deg); }
.breakdown__body { display: grid; gap: 10px; margin-top: 10px; }
.breakdown__h { font-size: 14px; margin: 0 0 4px; }
.breakdown__findings { background: #f7f8fa; border-radius: 6px; padding: 8px 12px; }
.breakdown__lead { margin: 0; }
.breakdown__total { margin: 0; font-weight: 700; text-align: right; }
.ref-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.li-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.li { border: 1px solid var(--color-border); border-left: 4px solid #8aa2d8; border-radius: 6px; padding: 10px 12px; display: grid; gap: 6px; }
.li--indirect { border-left-color: #c9a227; }
.li__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.li__label { margin: 0; font-weight: 700; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.li__amounts { display: grid; grid-template-columns: repeat(3, minmax(72px, auto)); gap: 12px; margin: 0; text-align: right; }
.li__amounts dt { font-size: 11px; color: var(--color-muted); }
.li__amounts dd { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.li__mid dd { font-weight: 700; }
.li__row { margin: 0; font-size: 13px; display: grid; grid-template-columns: 5.5em 1fr; gap: 8px; align-items: start; }
.li__k { color: var(--color-muted); font-size: 12px; font-weight: 700; }
.li__formula { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.li__inputs { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 16px; }
.li__inputs div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-bottom: 1px dotted var(--color-border); }
.li__inputs dt { flex: none; }
.li__inputs dt { color: var(--color-muted); }
.li__inputs dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; min-width: 0; }
.li__src { display: block; font-size: 11px; color: var(--color-muted); font-weight: 400; }
.src-list { margin: 0; padding-left: 1.1em; }
.assume-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: #5c4400; }
.li__note { margin: 0; color: var(--color-muted); }
.badge--assume { background: #fff1d6; color: #7a4b00; border: 1px solid #f0c36d; font-size: 11px; padding: 0 8px; }

/* countermeasures */
.cm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cm-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space); display: flex; gap: 12px; }
.cm-card__rank { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #0f1b3d; color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 14px; }
.cm-card__body { display: grid; gap: 4px; min-width: 0; }
.cm-card__body p { margin: 0; }
.cm-card__title { font-size: 15px; margin: 0; line-height: 1.5; }
.cm-card__saves { font-weight: 700; color: #1f5f22; font-size: 16px; }
.cm-card__k { font-weight: 700; margin-top: 4px !important; }

@media (max-width: 860px) {
  .cm-list { grid-template-columns: 1fr; }
  .li__row { grid-template-columns: 1fr; gap: 2px; }
  .li__amounts { grid-template-columns: repeat(3, 1fr); width: 100%; }
}

/* ---- Phase 7 (US4): presentation toggle, sample shortcut, about, admin ---- */
.present-toggle { margin: 4px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sample-shortcut { margin: 12px 0; padding: 10px 14px; border-radius: var(--radius); background: #fff4dc; color: #7a4b00; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sample-shortcut[hidden] { display: none; }

.about h1 { margin-bottom: 4px; }
.about section { margin: 24px 0; }
.about ul { padding-left: 1.2em; }
.about li { margin-bottom: 6px; }
.kv { width: 100%; border-collapse: collapse; }
.kv th, .kv td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--color-border); }
.kv th { width: 30%; white-space: nowrap; color: var(--color-muted); font-weight: 700; }
.kv code { word-break: break-all; }

.admin-tabs { display: flex; gap: 12px; margin: 16px 0; flex-wrap: wrap; }
.admin-tabs a[aria-current="page"] { font-weight: 700; text-decoration: none; color: var(--color-text); }
.admin-filter { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.admin-filter label { display: flex; flex-direction: column; font-size: 13px; font-weight: 700; }
.table-wrap { overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; white-space: nowrap; }
.admin-table th { background: #f1f3f6; position: sticky; top: 0; }
.admin-table td.num { text-align: right; }
.admin-table form { margin: 0; }
.btn--danger { background: var(--sev-critical); padding: 4px 12px; font-size: 13px; }

@media (max-width: 640px) {
  .kv th { width: auto; white-space: normal; }
}

/* entry points vs. weaknesses (benchmark 2026.10.3 rule roles) */
.scenario-card__why { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.scenario-card__why-h { margin: 0 0 4px; font-size: 13px; font-weight: 700; }
.scenario-card__why .ref-list { margin: 0; padding-left: 0; list-style: none; font-size: 13px; }
.scenario-card__why .ref-list li + li { margin-top: 6px; }
.role { display: inline-block; border-radius: 4px; padding: 0 6px; font-size: 12px; font-weight: 700; border: 1px solid currentColor; }
.role--vector { color: var(--sev-critical); }
.role--weakness { color: var(--sev-medium); }
.role--hygiene { color: var(--color-muted); }
.finding--hygiene summary { color: var(--color-muted); }

/* ==========================================================================
   Design system v2 (2026-10-23): consulting-report look for executives.
   One accent (ink navy), one gray family, square labels, tabular numbers.
   ========================================================================== */
html { scroll-behavior: smooth; }
body { font-size: 15px; line-height: 1.75; font-feature-settings: "palt" 1; }
h1, h2, h3, h4 { color: var(--color-ink); letter-spacing: -.005em; text-wrap: balance; }
p { text-wrap: pretty; }
.num, .li__amounts dd, .scenario-card__split dd, .admin-table td.num { font-variant-numeric: tabular-nums; font-feature-settings: "palt" 0, "tnum" 1; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--color-muted); }
.h2 { font-size: 19px; font-weight: 700; margin: 40px 0 12px; }
.h3 { font-size: 16px; }
.small { font-size: 12.5px; }
a { text-underline-offset: 2px; }
a:hover { color: var(--color-primary-hover); }

/* header / footer */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(8px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: .01em; }
.brand::before { content: ""; width: 18px; height: 18px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 2px var(--color-ink), inset 0 0 0 5px #fff, inset 0 0 0 9px var(--color-ink); }
.site-nav a { padding: 4px 0; border-bottom: 2px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); }
.site-nav a:hover { border-bottom-color: var(--color-border-strong); }
.site-footer { background: var(--color-surface); padding: 20px 0; }

/* controls */
.btn { border-radius: 6px; font-weight: 700; letter-spacing: .02em; transition: background-color .2s var(--ease), transform .1s var(--ease); }
.btn:hover { background: var(--color-primary-hover); }
.btn:active { transform: translateY(1px); }
.btn--ghost { border-color: var(--color-border-strong); color: var(--color-ink); background: var(--color-surface); }
.btn--ghost:hover { background: var(--color-subtle); border-color: var(--color-ink); }
.btn--lg { font-size: 16px; padding: 14px 28px; }
.btn:focus-visible, .input:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.input { border-color: var(--color-border-strong); border-radius: 6px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); outline: none; }
.badge { border-radius: var(--radius-sm); padding: 1px 8px; font-weight: 500; background: var(--color-primary-soft); color: var(--color-ink); }
.badge--warn, .badge--assume { background: var(--warn-soft); color: var(--warn); border: 0; }
.badge--muted { background: #eef0f3; color: var(--color-muted); }
.sev { border-radius: var(--radius-sm); min-width: 2.8em; font-size: 11.5px; letter-spacing: .04em; padding: 1px 6px; vertical-align: 1px; }
.likelihood { border-radius: var(--radius-sm); padding: 2px 8px; font-weight: 500; }
.likelihood--high { background: var(--danger-soft); color: var(--sev-critical); }
.likelihood--medium { background: var(--warn-soft); color: var(--warn); }
.likelihood--low { background: var(--ok-soft); color: var(--ok); }
.conf { border-radius: var(--radius-sm); font-weight: 500; }
.card, .ev-card, .cm-card, .table-wrap { box-shadow: var(--shadow); }

/* scan header */
.scan-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.scan-head__status { font-size: 22px; }
.present-toggle { margin: 0; }

/* verdict (top of the result) */
.loss-top { gap: 12px; }
.verdict { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; position: relative; }
.verdict::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--color-ink); }
.verdict--grade-A::before, .verdict--grade-B::before { background: var(--ok); }
.verdict--grade-C::before { background: var(--sev-medium); }
.verdict--grade-D::before, .verdict--grade-E::before { background: var(--sev-critical); }
.verdict__main { padding: 28px 32px 26px 36px; display: grid; gap: 12px; align-content: start; }
.verdict__side { padding: 28px 28px 26px; background: var(--color-subtle); border-left: 1px solid var(--color-border); display: grid; gap: 10px; align-content: start; }
.verdict__title-row { display: flex; gap: 18px; align-items: center; }
.verdict__title { margin: 0; font-size: 27px; line-height: 1.4; }
.verdict__lead { margin: 0; max-width: 40em; }
.verdict__amount-label { margin-top: 4px; }
.verdict__amount { margin: 0; font-size: 42px; font-weight: 700; line-height: 1.15; color: var(--color-ink); letter-spacing: -.01em; }
.verdict__amount-note { margin: 0; color: var(--color-muted); font-size: 13px; }
.grade-seal { margin: 0; flex: none; width: 76px; height: 76px; border-radius: 12px; display: grid; place-content: center; text-align: center; background: var(--color-ink); color: #fff; line-height: 1; }
.grade-seal--A, .grade-seal--B { background: var(--ok); }
.grade-seal--C { background: var(--sev-medium); }
.grade-seal--D, .grade-seal--E { background: var(--sev-critical); }
.grade-seal__k { font-size: 10.5px; letter-spacing: .08em; opacity: .85; }
.grade-seal__v { font-size: 38px; font-weight: 700; margin-top: 4px; }
.verdict__stats { list-style: none; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--color-border); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stat { display: grid; gap: 2px; }
.stat__n { font-size: 24px; font-weight: 700; color: var(--color-ink); line-height: 1.2; }
.stat__k { font-size: 12px; color: var(--color-muted); }
.stat--vector .stat__n { color: var(--sev-critical); }
.verdict--exposure .stat--vector .stat__n { color: var(--ok); }
.scale__amount { margin: 0; font-size: 34px; font-weight: 700; color: var(--color-ink); line-height: 1.2; letter-spacing: -.01em; }
.scale__note { margin: 0; font-size: 13px; color: var(--color-muted); }
.scale__range { margin: 0; font-size: 13px; }
.entry-callout { margin: 0; display: grid; gap: 6px; font-size: 14px; }
.entry-callout__ev { font-size: 12.5px; color: var(--color-muted); line-height: 1.7; }
.basis-line { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--color-border); display: grid; gap: 2px; }
.basis-line p { margin: 0; }
.basis-line__k { font-size: 12px; color: var(--color-muted); }
.basis-line__v { font-weight: 700; font-size: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.basis-line__src { font-size: 12.5px; color: var(--color-muted); }
.basis-line .badges { margin-top: 4px; }
.revenue-fix--inline { margin-top: 4px; padding: 12px; background: var(--color-surface); border: 1px dashed var(--color-border-strong); border-radius: 8px; gap: 8px; }
.revenue-fix__label { font-size: 13px; font-weight: 500; color: var(--color-ink); }
.revenue-fix--inline .input { padding: 7px 9px; }
.revenue-fix--inline .btn { padding: 7px 14px; white-space: nowrap; }
.revenue-fix--inline .revenue-fix__status:empty { display: none; }

/* scenarios: one row per scenario — name, figures, entry points */
.section-head { margin-top: 28px; }
.section-head .h2 { margin: 0 0 2px; }
.section-head p { margin: 0 0 12px; max-width: 60em; }
.scenario-grid { grid-template-columns: 1fr; gap: 10px; }
.scenario-card { display: grid; grid-template-columns: 220px minmax(200px, 250px) minmax(0, 1fr); grid-template-areas: "head fig why" "path path path" "drawer drawer drawer"; gap: 6px 28px; padding: 20px 24px; box-shadow: var(--shadow); }
.scenario-card--top { border-color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-ink), var(--shadow); }
.scenario-card__head { grid-area: head; display: grid; gap: 8px; align-content: start; justify-items: start; }
.scenario-card__title { font-size: 16px; line-height: 1.5; }
.scenario-card__figures { grid-area: fig; display: grid; gap: 2px; align-content: start; }
.scenario-card__amount { margin: 0; font-size: 26px; font-weight: 700; color: var(--color-ink); line-height: 1.25; }
.scenario-card__unit { font-size: 11.5px; font-weight: 500; color: var(--color-muted); margin-left: 6px; letter-spacing: .04em; }
.scenario-card__range { margin: 0 0 6px; font-size: 12.5px; color: var(--color-muted); }
.scenario-card__split { font-size: 12.5px; gap: 1px; }
.scenario-card__why { grid-area: why; margin: 0; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--color-border); }
.scenario-card__why-h { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--color-muted); margin-bottom: 6px; }
.scenario-card__why .ref-list { font-size: 13.5px; gap: 10px; }
.scenario-card__why .ref-list li + li { margin-top: 0; }
.ref-list__ev { display: block; margin-top: 2px; font-size: 12.5px; color: var(--color-muted); line-height: 1.7; }
.scenario-card__none { margin: 0; font-size: 13.5px; color: var(--ok); }
.scenario-card__none::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 8px; vertical-align: 2px; }
.scenario-card > .breakdown { grid-area: drawer; margin-top: 10px; padding-top: 10px; }
.scenario-card:has(> .breakdown[open]) { grid-column: auto; }
.breakdown__toggle { font-weight: 500; }
.breakdown__findings { background: var(--color-subtle); }
.li { border-left-color: #93a6c9; }
.li--indirect { border-left-color: #c5a35a; }

/* report CTA */
.report-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 20px 0 8px; padding: 18px 24px; background: var(--color-ink); border-radius: var(--radius); }
.report-cta .btn { background: #fff; color: var(--color-ink); }
.report-cta .btn:hover { background: #e9edf4; }
.report-cta .muted { color: #c3cbd9; }

/* countermeasures / evidence */
.cm-card__rank { border-radius: 6px; background: var(--color-ink); font-size: 13px; }
.cm-card__saves { color: var(--ok); }
.ev-revenue--missing { border: 1px solid #e3c88c; background: #fffbf2; }
.case-card__scaled { background: var(--color-primary-soft); color: var(--color-ink); }
.ratio-bar { background: #edf0f4; }
.ratio-bar__range { background: #c3cfe4; }
.ratio-bar__median { background: var(--color-ink); }
.ratio-bar__ours { background: var(--color-primary); border-radius: 3px; }

/* findings */
.finding { border-radius: 8px; transition: border-color .2s var(--ease); }
.finding:hover { border-color: var(--color-border-strong); }
.finding summary { display: flex; gap: 8px; align-items: center; list-style: none; }
.finding summary::-webkit-details-marker { display: none; }
.finding summary::after { content: "＋"; margin-left: auto; color: var(--color-faint); font-weight: 400; }
.finding[open] summary::after { content: "−"; }
.role { border-radius: var(--radius-sm); font-weight: 500; font-size: 11.5px; padding: 0 6px; background: var(--color-surface); }
.check-list--passed { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 20px; font-size: 13px; }
.check-list--passed li { position: relative; padding-left: 20px; }
.check-list--passed li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 9px; height: 5px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }

/* presentation mode: bigger figures for the booth screen */
.scan--present .verdict__amount { font-size: 54px; }
.scan--present .scale__amount { font-size: 44px; }
.scan--present .verdict__title { font-size: 32px; }

@media (max-width: 960px) {
  .verdict { grid-template-columns: 1fr; }
  .verdict__side { border-left: 0; border-top: 1px solid var(--color-border); }
  .scenario-card { grid-template-columns: 1fr; grid-template-areas: "head" "fig" "why" "path" "drawer"; }
  .scenario-card__why { border-left: 0; padding: 10px 0 0; border-top: 1px solid var(--color-border); }
}
@media (max-width: 600px) {
  .verdict__main { padding: 22px 18px 20px 22px; }
  .verdict__side { padding: 20px 18px; }
  .verdict__title { font-size: 21px; }
  .verdict__amount { font-size: 32px; }
  .grade-seal { width: 60px; height: 60px; }
  .grade-seal__v { font-size: 30px; }
  .verdict__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* v2 polish */
.scan-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "domain toggle" "status toggle"; align-items: end; column-gap: 16px; }
.scan-head__domain { grid-area: domain; font-size: 13px; letter-spacing: .02em; }
.scan-head__status { grid-area: status; }
.present-toggle { grid-area: toggle; }
.verdict__main { display: flex; flex-direction: column; }
.verdict__stats { margin-top: auto; }
.revenue-fix--inline .amount-input { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.revenue-fix--inline .amount-input .input { width: 100%; min-width: 0; }
.entry-callout { display: grid; gap: 8px; }
.entry-callout p { margin: 0; }
.entry-callout__title { font-weight: 700; color: var(--color-ink); line-height: 1.6; }
.entry-callout__key { font-weight: 700; color: var(--sev-critical); font-size: 14px; }
.entry-callout__ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px; color: var(--color-text); line-height: 1.65; }
.entry-callout__ev li { padding-left: 12px; border-left: 2px solid var(--color-border-strong); }
.scenario-card__why .ref-list__ev { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 600px) {
  .scan-head { grid-template-columns: 1fr; grid-template-areas: "domain" "status" "toggle"; row-gap: 8px; }
  .present-toggle .btn { padding: 4px 12px; font-size: 13px; }
}

/* ==========================================================================
   Attack routes of published Japanese incidents × this site (evidence.attack.*)
   ========================================================================== */
.attack { margin-top: 8px; }
.attack-table { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.attack-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.35fr); gap: 0 24px; padding: 18px 22px; border-top: 1px solid var(--color-border); position: relative; }
.attack-row p { margin: 0; }
.attack-row--head { border-top: 0; padding-top: 10px; padding-bottom: 10px; background: var(--color-subtle); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--color-muted); }
.attack-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.attack-row--hit::before { background: var(--sev-critical); }
.attack-row--weak::before { background: var(--sev-medium); }
.attack-row--hit { background: linear-gradient(90deg, var(--danger-soft), transparent 38%); }
.attack-row__route { display: grid; gap: 4px; align-content: start; }
.attack-row__label { font-weight: 700; color: var(--color-ink); font-size: 15px; line-height: 1.5; }
.attack-row__damage { font-size: 12.5px; color: var(--color-muted); line-height: 1.7; }
.attack-row__site { display: grid; gap: 8px; align-content: start; }
.attack-row__note { font-size: 12.5px; color: var(--color-muted); line-height: 1.7; }
.attack-row__findings { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--color-ink); }
.route-status { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 2px 9px; border-radius: var(--radius-sm); background: #eef0f3; color: var(--color-muted); }
.route-status--hit { background: var(--sev-critical); color: #fff; }
.route-status--weak { background: var(--warn-soft); color: var(--warn); }
.route-status--clear { background: var(--ok-soft); color: var(--ok); }
.route-status--out_of_scope { background: transparent; color: var(--color-muted); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.route-stat { margin: 2px 0 0; padding: 10px 12px; background: var(--color-subtle); border-radius: 6px; display: grid; gap: 5px; }
.route-stat figcaption { font-size: 12px; font-weight: 500; color: var(--color-ink); }
.route-stat__bar { display: grid; grid-template-columns: minmax(0, 1fr) 64px 3.4em; gap: 8px; align-items: center; font-size: 12px; }
.route-stat__k { color: var(--color-muted); line-height: 1.5; }
.route-stat__track { height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; }
.route-stat__track > span { display: block; height: 100%; background: var(--color-ink); border-radius: 3px; }
.route-stat__v { text-align: right; font-weight: 700; color: var(--color-ink); }
.attack-row__cases { display: grid; gap: 10px; align-content: start; }
.route-case { display: grid; gap: 2px; padding-left: 12px; border-left: 2px solid var(--color-border); }
.attack-row--hit .route-case { border-left-color: #e3b8bb; }
.route-case__who { font-size: 13.5px; color: var(--color-ink); }
.route-case__when { font-size: 12px; color: var(--color-muted); margin-left: 4px; }
.route-case__entry { font-size: 12.5px; line-height: 1.7; }
.route-case__src { font-size: 11.5px; color: var(--color-muted); }
.route-case__src a { color: var(--color-muted); }

/* the real attack chain inside a scenario row */
.real-path { grid-area: path; margin-top: 12px; padding: 12px 14px; background: var(--color-subtle); border-radius: 8px; display: grid; gap: 8px; }
.real-path--match { background: var(--danger-soft); }
.real-path p { margin: 0; }
.real-path__h { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 13.5px; color: var(--color-ink); }
.real-path__k { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--color-muted); margin-right: 4px; }
.real-path__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; counter-reset: none; }
.real-path__steps li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; align-items: start; padding: 8px 22px 8px 10px; font-size: 12.5px; line-height: 1.6; background: var(--color-surface); border: 1px solid var(--color-border); margin-right: 10px; border-radius: 6px; }
.real-path__steps li:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid var(--color-faint); border-right: 1.5px solid var(--color-faint); transform: translateY(-50%) rotate(45deg); }
.real-path__steps li:last-child { margin-right: 0; }
.real-path__steps li.is-here { border-color: var(--sev-critical); box-shadow: inset 0 0 0 1px var(--sev-critical); }
.real-path__n { width: 18px; height: 18px; border-radius: 50%; background: var(--color-ink); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-content: center; margin-top: 1px; }
.real-path__steps li.is-here .real-path__n { background: var(--sev-critical); }
.real-path__here { grid-column: 2; font-style: normal; font-size: 11px; font-weight: 700; color: var(--sev-critical); letter-spacing: .04em; }
.real-path__src { font-size: 11.5px; color: var(--color-muted); }
.real-path__src a { color: var(--color-muted); }

@media (max-width: 860px) {
  .attack-row { grid-template-columns: 1fr; gap: 10px; }
  .attack-row--head { display: none; }
  .real-path__steps { grid-auto-flow: row; gap: 8px; }
  .real-path__steps li { margin-right: 0; }
  .real-path__steps li:not(:last-child)::after { right: auto; left: 18px; top: auto; bottom: -9px; transform: rotate(135deg); }
}
.attack-row, .real-path { overflow-wrap: anywhere; }

/* ==========================================================================
   v3 alignment pass (2026-10-24): one column rhythm for every block.
   Rows share the scenario grid (220px | 250px | 1fr), controls share one height,
   cards in a row align their parts with subgrid.
   ========================================================================== */
:root { --row-cols: 220px minmax(200px, 250px) minmax(0, 1fr); --control-h: 44px; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 32px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235d6676' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--color-text); }

/* running state: progress + optional profile form */
.running { display: grid; gap: 16px; }
.progress-card { padding: 22px 24px; gap: 10px; }
.progress { height: 6px; }
.progress__step { font-size: 15px; }
.company-box { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--color-border); display: grid; gap: 2px; }
.profile-form { padding: 24px; gap: 20px; }
.profile-form__head { display: grid; gap: 2px; }
.profile-form__head p { margin: 0; }
.profile-form__title { margin: 0; font-size: 16px; }
.profile-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; align-items: start; }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field__label { font-size: 13px; font-weight: 500; color: var(--color-ink); line-height: 1.5; }
.field__control.input, .field__control .input { height: var(--control-h); padding-top: 0; padding-bottom: 0; width: 100%; }
.field__control.amount-input { display: grid; grid-template-columns: minmax(0, 1fr) 7.5em; gap: 8px; }
.field__hint { margin: 0; font-size: 12px; color: var(--color-muted); line-height: 1.6; }
.profile-form__actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.profile-form__actions .btn { min-width: 9em; }
.revenue-fix--inline .input { height: 38px; padding-top: 0; padding-bottom: 0; }

/* countermeasures: rows on the same columns as the scenarios */
.cm-list--rows { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cm-row { display: grid; grid-template-columns: var(--row-cols); grid-template-areas: "head saves refs" "basis basis basis"; gap: 6px 28px; padding: 20px 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); align-items: start; }
.cm-row p { margin: 0; }
.cm-row__head { grid-area: head; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.cm-row__rank { width: 28px; height: 28px; border-radius: 6px; background: var(--color-ink); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-content: center; }
.cm-row__title { margin: 0; font-size: 15px; line-height: 1.55; }
.cm-row__meta { margin-top: 6px !important; font-size: 12px; color: var(--color-muted); }
.cm-row__saves { grid-area: saves; display: grid; gap: 4px; }
.cm-row__saves .cm-card__saves { font-size: 16px; line-height: 1.55; font-weight: 700; color: var(--ok); }
.cm-row__range { font-size: 12.5px; color: var(--color-muted); }
.cm-row__refs { grid-area: refs; padding-left: 24px; border-left: 1px solid var(--color-border); }
.cm-row__k { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--color-muted); margin-bottom: 6px !important; }
.cm-row__refs .ref-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; }
.cm-row__basis { grid-area: basis; margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-muted); }

/* evidence: revenue strip on top, then the three case cards with aligned parts */
.evidence-grid { grid-template-columns: 1fr; gap: 20px; }
.ev-card__title { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--color-muted); margin: 0 0 8px; }
.ev-revenue:not(.ev-revenue--missing) { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; grid-template-areas: "title title title" "main detail fix" "form form form"; gap: 4px 28px; align-items: start; padding: 20px 24px; }
.ev-revenue > .ev-card__title { grid-area: title; }
.ev-revenue__main { grid-area: main; }
.ev-revenue__detail { grid-area: detail; display: grid; gap: 6px; padding-left: 24px; border-left: 1px solid var(--color-border); }
.ev-revenue__detail p, .ev-revenue__main p { margin: 0; }
.ev-revenue__detail .excerpt { margin: 0; }
.ev-revenue__fix { grid-area: fix; align-self: center; }
.ev-revenue > .revenue-fix { grid-area: form; margin-top: 12px; }
.ev-revenue > .attribution { grid-column: 1 / -1; }
.ev-revenue__value { font-size: 26px; }
.ev-cases__title { margin: 0 0 10px; font-size: 15px; color: var(--color-ink); }
.case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.case-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; gap: 6px; padding: 18px 20px; }
.case-card > * { margin: 0; }
.case-card__facts { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--color-border); align-self: start; }
.case-card__scaled { align-self: end; }
.case-card__foot { margin-top: 0; align-self: end; }
.ev-ratio { margin-top: 20px; padding: 20px 24px; }

/* findings → passed spacing */
.passed { margin-top: 32px; }
.passed .h3, .passed h2, .passed h3 { margin-bottom: 10px; }

@media (max-width: 960px) {
  .cm-row { grid-template-columns: 1fr; grid-template-areas: "head" "saves" "refs" "basis"; }
  .cm-row__refs { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--color-border); }
  .ev-revenue:not(.ev-revenue--missing) { grid-template-columns: 1fr; grid-template-areas: "title" "main" "detail" "fix" "form"; }
  .ev-revenue__detail { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--color-border); }
  .ev-revenue__fix { justify-self: start; margin-top: 8px; }
  .case-grid { grid-template-columns: 1fr; }
  .case-card { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 600px) {
  .profile-form .form-grid { grid-template-columns: 1fr; }
  .profile-form__actions { flex-direction: column-reverse; align-items: stretch; }
}
.progress-card > p, .progress-card .company-box p { margin: 0; }
.progress-card .sample-shortcut { margin: 4px 0; }
.cm-row__amount { font-size: 22px; font-weight: 700; color: var(--ok); line-height: 1.3; }

/* findings grouped by role; fixed-width severity so every title starts on one line */
.findings__group { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 8px; padding-left: 10px; font-size: 14px; border-left: 3px solid var(--color-border-strong); }
.findings__group .num { font-size: 13px; color: var(--color-muted); font-weight: 500; }
.findings__group--vector { border-left-color: var(--sev-critical); }
.findings__group--weakness { border-left-color: var(--sev-medium); }
.finding summary { gap: 12px; padding: 11px 18px; }
.finding summary .sev { flex: none; width: 3.2em; text-align: center; }
.finding__title { min-width: 0; }
.finding { margin-bottom: 6px; }
.ev-revenue:not(.ev-revenue--missing) { grid-template-columns: 260px minmax(0, 1fr) auto; }
.cm-row { grid-template-columns: 300px 220px minmax(0, 1fr); }
@media (max-width: 960px) { .cm-row { grid-template-columns: 1fr; } }

/* ---- staff sign-in (login page + header user menu) ---- */
.site-nav { align-items: center; }
.site-nav__user { display: flex; align-items: center; gap: 10px; margin: 0 0 0 8px; padding-left: 16px; border-left: 1px solid var(--color-border); }
.site-nav__email { max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-muted); font-size: 13px; }
.site-nav__logout { border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 13px; padding: 3px 10px; cursor: pointer; transition: background-color .2s var(--ease); }
.site-nav__logout:hover { background: var(--color-subtle); }
.site-nav__logout:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.login { max-width: 440px; margin: 72px auto; padding: 36px 32px; text-align: center; }
.login__title { margin: 0 0 8px; font-size: 22px; color: var(--color-ink); }
.login__lead { margin: 0 0 24px; color: var(--color-muted); text-wrap: balance; }
.login__button { display: flex; justify-content: center; min-height: 44px; }
.login__status { min-height: 1.6em; margin: 16px 0 0; font-size: 14px; color: var(--color-muted); }
.login__status.is-error { color: var(--sev-critical); }
.login__note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-faint); }
@media (max-width: 600px) {
  .site-nav__email { display: none; }
  .login { margin: 32px auto; padding: 28px 20px; }
}

/* ---- technical reference (templates/guide.html): plain document tables ---- */
.page-guide main.container { max-width: 1240px; padding-top: 0; }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.doc-toc { position: sticky; top: 0; z-index: 10; margin: 0 calc(var(--space) * -1); padding: 0 var(--space); background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.doc-toc ol { display: flex; gap: 20px; margin: 0; padding: 10px 0; list-style: none; overflow-x: auto; font-size: 14px; }
.doc-toc a { color: var(--color-muted); text-decoration: none; white-space: nowrap; padding-bottom: 8px; border-bottom: 2px solid transparent; }
.doc-toc a:hover { color: var(--color-ink); }
.doc-toc a[aria-current] { color: var(--color-ink); font-weight: 700; border-bottom-color: var(--color-primary); }
.doc { font-size: 15px; }
.doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; color: var(--color-ink); }
.doc-head { padding: 28px 0 8px; }
.doc-head h1 { margin: 0 0 6px; font-size: 24px; color: var(--color-ink); }
.doc-head p { margin: 0; max-width: 60em; color: var(--color-muted); }
.doc-sec { padding: 28px 0 8px; scroll-margin-top: 48px; }
.doc-sec h2 { margin: 0 0 10px; padding-bottom: 8px; font-size: 20px; color: var(--color-ink); border-bottom: 2px solid var(--color-ink); }
.doc-sec h3 { margin: 24px 0 8px; font-size: 16px; color: var(--color-ink); }
.doc-note { margin: 0 0 12px; max-width: 64em; color: var(--color-muted); font-size: 14px; }
.doc-meta { margin: 0 0 12px; font-size: 13.5px; }
.doc-table-wrap { overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.doc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.55; }
.doc-table th, .doc-table td { padding: 8px 10px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.doc-table thead th { background: var(--color-subtle); font-size: 12px; color: var(--color-muted); white-space: nowrap; }
.doc-table tbody th { font-weight: 700; color: var(--color-ink); }
.doc-table tr:last-child > * { border-bottom: 0; }
.doc-table .num { text-align: right; }
.doc-table .sev { width: 3.2em; }
.doc-table--compact { font-size: 13px; background: var(--color-surface); border: 1px solid var(--color-border); }
.doc-group-start > td { border-top: 1px solid var(--color-border-strong); }
.doc-sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--color-muted); }
.doc-role--vector { color: var(--sev-critical); font-weight: 700; }
.doc-role--weakness { color: var(--warn); }
.doc-role--hygiene { color: var(--color-muted); }
.doc-route { font-weight: 700; color: var(--color-ink); }
.doc-tag { display: inline-block; margin-left: 4px; padding: 0 5px; border: 1px solid var(--color-border-strong); border-radius: 3px; font-size: 11px; color: var(--color-muted); white-space: nowrap; }
.doc-tag--hot { border-color: var(--sev-critical); color: var(--sev-critical); }
.doc-link { display: block; font-size: 12.5px; color: var(--color-muted); }
.doc-cves { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.doc-srcs a { display: block; max-width: 22em; font-size: 12px; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-loss { display: block; white-space: nowrap; }
.doc-loss + .doc-loss { margin-top: 4px; }
.doc-table--incidents td { font-size: 13px; }
.doc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.doc-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.doc-stat__title { margin: 0 0 6px; font-weight: 700; font-size: 13.5px; color: var(--color-ink); }
.doc-ol, .doc-ul { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; font-size: 14px; }
.doc-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; font-size: 13px; }
.doc-filter button { border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-sm); padding: 3px 12px; font: inherit; cursor: pointer; }
.doc-filter button[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.doc-filter label { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.doc-filter select { font: inherit; padding: 2px 6px; }
.doc-filter output { margin-left: auto; }
.doc-cmds { margin: 0; display: grid; gap: 4px 0; font-size: 13.5px; }
.doc-cmds dt code { display: inline-block; padding: 2px 6px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 3px; }
.doc-cmds dd { margin: 0 0 8px; color: var(--color-muted); }
.arch { margin: 8px 0 0; padding: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.arch svg { display: block; width: 100%; height: auto; font-family: var(--font); }
.arch text { font-size: 14px; font-weight: 700; fill: var(--color-ink); text-anchor: middle; }
.arch text.sub { font-size: 11.5px; font-weight: 400; fill: var(--color-muted); }
.arch-zone rect { fill: var(--color-subtle); stroke: var(--color-border-strong); stroke-dasharray: 5 4; }
.arch-zone text { text-anchor: start; font-size: 12px; fill: var(--color-muted); }
.arch-box rect { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 1.5; }
.arch-box--main rect { fill: var(--color-primary-soft); }
.arch-store rect { fill: var(--color-surface); stroke: var(--color-border-strong); }
.arch-ext rect { fill: var(--color-surface); stroke: var(--color-faint); stroke-dasharray: 3 3; }
.arch-line path { fill: none; stroke: var(--color-muted); stroke-width: 1.5; }
.arch-line path.dash { stroke-dasharray: 4 3; }
.arch marker path { fill: var(--color-muted); }
@media (max-width: 900px) {
  .doc-cols, .doc-cols--3 { grid-template-columns: 1fr; }
}