:root {
  --ink: #0b1f3a;
  --indigo: #1d3a5f;
  --mist: #eef2f6;
  --paper: #ffffff;
  --line: #d7dee8;
  --quiet: #4f5f73;
  --violet: #007c89;
  --supported: #0b7a6b;
  --supported-bg: #d9f2ec;
  --disputed: #b4236a;
  --disputed-bg: #fbe3ef;
  --unverified: #8a5800;
  --unverified-bg: #fbeecb;
  --display: "Bricolage Grotesque", "Avenir Next", sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--mist); color: var(--ink); font: 15px/1.5 var(--body); }
a { color: var(--violet); }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0; }
h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 20px; font-weight: 650; margin-bottom: 12px; }
h3 { font-size: 15px; font-weight: 650; margin-bottom: 6px; }
p { margin: 0 0 10px; }
code, .mono { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.quiet { color: var(--quiet); }
.small { font-size: 13px; }

/* Shell */
.shell { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 100vh; }
.rail { background: var(--paper); color: var(--ink); border-right: 1px solid var(--line); padding: 22px 14px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; }
.brand { font: 700 19px/1.1 var(--display); letter-spacing: -0.01em; padding: 0 10px 20px; }
.rail a { color: var(--ink); text-decoration: none; padding: 8px 10px; border-radius: 7px; font-weight: 500; }
.rail a:hover { background: var(--mist); color: var(--ink); }
.rail a.on { background: var(--mist); color: var(--violet); font-weight: 600; }
.rail form { margin-top: auto; padding: 0 10px; }
.rail .who { color: var(--quiet); font-size: 13px; margin-bottom: 6px; }
.rail button { background: none; border: 1px solid var(--line); color: var(--ink); padding: 5px 10px; }
.rail button:hover { border-color: var(--ink); }
main { padding: 28px 32px 64px; max-width: 1240px; width: 100%; }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }

/* Primitives */
.card { background: var(--paper); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; box-shadow: 0 1px 0 var(--line); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 20px; }
.stat b { display: block; font: 700 26px/1.1 var(--display); }
.stat span { color: var(--quiet); font-size: 13px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; color: var(--quiet); font-weight: 600; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); }
td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--mist); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.scroll { overflow-x: auto; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--mist); color: var(--indigo); white-space: nowrap; }
.pill.supported, .pill.low, .pill.delivered { background: var(--supported-bg); color: var(--supported); }
.pill.disputed, .pill.high, .pill.dead, .pill.blocked { background: var(--disputed-bg); color: var(--disputed); }
.pill.unverified, .pill.medium, .pill.retry, .pill.paused { background: var(--unverified-bg); color: var(--unverified); }
.score { font: 700 18px var(--display); color: var(--violet); }

.flush { margin-bottom: 0; }
.flushleft { margin-left: 0; }
.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mb4 { margin-bottom: 4px; }
.mb8 { margin-bottom: 8px; }
.mb16 { margin-bottom: 16px; }
.grow { flex: 1; }
.nowrap { white-space: nowrap; }
.bad { color: var(--disputed); }
.bare { border: 0; padding: 0; margin: 12px 0 0; }
.legend { font-size: 13px; font-weight: 600; }

/* Forms */
label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=url], input[type=number], input[type=datetime-local], textarea, select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font: inherit;
}
textarea { min-height: 80px; resize: vertical; }
select.auto { width: auto; }
textarea.tall { min-height: 160px; }
textarea.mid { min-height: 110px; }
textarea.body { min-height: 440px; font: 13px/1.55 var(--mono); }
button, .button { display: inline-block; font: 600 14px var(--body); padding: 8px 14px; border-radius: 7px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; }
button:hover, .button:hover { border-color: var(--ink); color: var(--ink); }
button.primary, .button.primary { background: var(--violet); border-color: var(--violet); color: #fff; }
button.primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
button.danger { color: var(--disputed); border-color: var(--disputed); }
button:disabled { opacity: .45; cursor: not-allowed; }
.inline { display: inline-block; margin: 0 4px 4px 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin: 6px 0; }
details summary { cursor: pointer; font-weight: 600; }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; background: var(--supported-bg); color: var(--supported); font-weight: 500; }
.flash.error { background: var(--disputed-bg); color: var(--disputed); }

/* Story shell */
.pipeline { display: flex; flex-wrap: wrap; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; font-weight: 600; color: var(--quiet); }
.pipeline li { white-space: nowrap; }
.pipeline li:not(:last-child)::after { content: "→"; margin: 0 8px; color: var(--line); }
.pipeline li.done { color: var(--supported); }
.pipeline li.now { color: var(--violet); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--line); margin: 18px 0; }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--quiet); font-weight: 600; margin-bottom: -2px; border-bottom: 2px solid transparent; }
.tabs a.on { color: var(--ink); border-color: var(--violet); }
.banner { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.banner.risk-low { background: var(--supported-bg); }
.banner.risk-medium { background: var(--unverified-bg); }
.banner.risk-high, .banner.alert { background: var(--disputed-bg); }
.claim { border-left: 4px solid var(--line); padding: 4px 0 4px 14px; margin-bottom: 16px; }
.claim.supported { border-color: var(--supported); }
.claim.disputed { border-color: var(--disputed); }
.claim.unverified { border-color: #d9a02b; }
.excerpt { font-size: 13.5px; color: var(--quiet); border-left: 2px solid var(--mist); padding-left: 10px; margin: 6px 0; }
.preview { font-size: 15px; overflow-wrap: anywhere; }
.preview h2 { margin-top: 18px; font-size: 18px; }
.diff { font: 12.5px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.diff .add { background: var(--supported-bg); display: block; }
.diff .del { background: var(--disputed-bg); display: block; }

/* Signature: the fingerprint seal */
.seal { display: block; max-width: 100%; height: auto; }
.seal-mini .seal { width: 72px; }
.sealbox { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.sealbox .seal { padding: 0; }
.sealbox h2 { margin: 0 0 4px; }
.sealbox .sha { font: 12px var(--mono); color: var(--quiet); overflow-wrap: anywhere; }
.sealbox > div { flex: 1 1 260px; min-width: 0; }
.sealbox.broken { background: var(--disputed-bg); color: var(--disputed); }

.story-img { display: block; width: 100%; height: auto; border-radius: 8px; margin-bottom: 8px; }
.slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.slides img { width: 100%; height: auto; display: block; border-radius: 8px; }

.login { display: grid; place-items: center; min-height: 100vh; background: var(--mist); padding: 16px; }
.login .card { width: 100%; max-width: 380px; margin: 0; }
.login h1 { margin-bottom: 4px; }

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; }
  .brand { padding: 0 10px 0 0; width: 100%; }
  .rail form { margin: 0 0 0 auto; padding: 0; }
  .rail .who { display: none; }
  main { padding: 18px 16px 48px; }
  .grid2, .split { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 25px; }
}