@font-face {
  font-family: "Trindle Sans";
  src: url("/assets/fonts/TrindleSans-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Lightmorphic dark tokens (dark only: this is Lightmorphic's own site). */
:root {
  color-scheme: dark;
  --bg: #1c2030;  --fg: #fafafa;
  --border: #4c5470;  --muted: #3c4362;  --muted-fg: #c2c2cc;
  --panel: #333955;   --panel-border: rgba(255,255,255,.09);
  --raised: #424a6a;  --raised-border: rgba(255,255,255,.12);
  --field: #151824;   --field-border: #7d87a6;
  --edge-light: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.4);
  --shadow-panel: var(--edge-light), 0 0 0 1px rgba(0,0,0,.55),
    0 10px 16px rgba(0,0,0,.6), 0 34px 60px -8px rgba(0,0,0,.85),
    0 72px 120px -16px rgba(0,0,0,.9);
  --shadow-raised: var(--edge-light), 0 0 0 1px rgba(0,0,0,.4),
    0 6px 10px rgba(0,0,0,.5), 0 18px 32px -8px rgba(0,0,0,.65);
  --shadow-field: inset 0 2px 5px rgba(0,0,0,.5);
  --accent: #fbc711;  --accent-hover: #ddaf0f;  --on-accent: #645007;
  --accent-container: #4b3c05;  --on-accent-container: #fde694;
  --brand-navy: #111827;
  --link: #80c2f9;
  --danger: #ffa39b;   --danger-bg: #350f0c;  --on-danger: #350f0c;
  --success: #80cf83;  --success-bg: #102611;
  --warning: #ffc006;  --warning-bg: #382a01;
  --info: #80c2f9;     --info-bg: #072135;
  --state-calm: #2295f1;  --state-good: #4bae4f;  --state-busy: #fe9700;
  --state-bad: #f34236;   --state-quiet: #9e9d9e;
  --radius: 0.875rem;
  --panel-radius: 1.375rem;
  --gap: 36px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 1rem/1.6 "Trindle Sans", system-ui, sans-serif;
}
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--fg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
code { font: .875rem/1.4 ui-monospace, monospace; background: var(--field); padding: .1rem .35rem; border-radius: 6px; overflow-wrap: anywhere; }
h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
h2 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 .5rem; }
h2.section { font-size: 1.75rem; letter-spacing: -0.01em; margin: 1rem 0 0; padding: 0 var(--gap); }
h3 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 .5rem; }
p { margin: 0 0 .75rem; }
.hint { font-size: .875rem; color: var(--muted-fg); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: #111; padding: .5rem 1rem; z-index: 9; }
.skip:focus { left: 1rem; top: 1rem; }

.wrap { max-width: 96rem; margin: 0 auto; }
html:not(.js) .needs-js { display: none !important; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  max-width: 96rem; margin: 0 auto; padding: 28px var(--gap) 0; }
.brand { display: flex; align-items: center; gap: .625rem; color: var(--fg); text-decoration: none; font-size: 1.0625rem; }
.brand svg { width: 34px; height: 34px; flex: none; }
.top nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.top nav a { color: var(--fg); font-weight: 600; text-decoration: none; padding: .5rem 0; }
.top nav a:hover { text-decoration: underline; }

/* The i */
.intro { margin: 1.75rem var(--gap) 1.25rem; }
.eye > summary { list-style: none; cursor: pointer; }
.eye > summary::-webkit-details-marker { display: none; }
.eye--head > summary { display: flex; align-items: center; gap: .75rem; }
.eye-btn { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid var(--border);
  display: inline-grid; place-items: center; font-weight: 700; font-size: .9375rem; color: var(--muted-fg); }
.eye--head > summary:hover .eye-btn { color: var(--fg); border-color: var(--muted-fg); }
.eye--head[open] > summary .eye-btn { background: var(--accent-container); border-color: var(--accent-container); color: var(--on-accent-container); }
.intro p { margin-top: .75rem; }

/* Surfaces: page, then panel, then raised card */
.panel { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--panel-radius);
  box-shadow: var(--shadow-panel); padding: 1.5rem; min-width: 0; }
.card { background: var(--raised); border: 1px solid var(--raised-border); border-radius: var(--radius);
  box-shadow: var(--shadow-raised); }

/* Verdict headline */
.headline { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; margin: 0 var(--gap); }
.headline .dot { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--dot, var(--state-quiet)); }
.headline p { margin: 0; font-size: 1.375rem; font-weight: 600; line-height: 1.35; }
.dot.busy { --dot: var(--state-busy); } .dot.calm { --dot: var(--state-calm); }
.verdict { align-items: flex-start; flex-wrap: wrap; }
.verdict .dot { margin-top: .4rem; width: 22px; height: 22px; display: grid; place-items: center; }
.verdict .dot::after { content: ""; font-size: 14px; font-weight: 800; color: #111; line-height: 1; }
.verdict[data-state="green"] { --dot: var(--state-good); }
.verdict[data-state="green"] .dot::after { content: "\2713"; }
.verdict[data-state="red"] { --dot: var(--state-bad); background: var(--danger-bg); }
.verdict[data-state="red"] .dot::after { content: "!"; }
.verdict[data-state="amber"] { --dot: var(--state-busy); }
.verdict[data-state="amber"] .dot::after { content: "?"; }
.verdict[data-state="running"] { --dot: var(--state-calm); }
.verdict[data-state="running"] .dot { animation: pulse 1s ease-in-out infinite; }
.verdict-text { flex: 1 1 22rem; min-width: 0; }
.verdict .sentence { font-size: 1.5rem; font-weight: 700; line-height: 1.3; transition: opacity .3s; }
.verdict .basis { font-size: 1rem; font-weight: 400; color: var(--muted-fg); margin-top: .5rem; }
.verdict .basis:empty { display: none; }
.fixes { margin: .75rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.fixes:empty { display: none; }
.fixes li { font-size: 1rem; font-weight: 500; }
.fixes a { font-weight: 600; white-space: nowrap; }
.verdict-actions { flex: none; display: flex; gap: .75rem; align-items: center; }
@keyframes pulse { 50% { opacity: .35; } }

/* Buttons: worded, this is a public site */
.button { font: inherit; font-weight: 600; font-size: 1rem; min-height: 2.75rem; padding: .625rem 1.25rem;
  border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--muted); color: var(--fg);
  cursor: pointer; white-space: normal; text-align: center; }
.button:hover { border-color: var(--muted-fg); }
.button.primary { background: var(--accent); border-color: var(--accent); color: #111; }
.button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button.quiet { background: transparent; }
.button.armed { border-color: var(--accent); }
.button[disabled] { opacity: .7; cursor: progress; }
.row-buttons { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: auto; }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: row dense; gap: var(--gap); padding: var(--gap); }
.bento > * { min-width: 0; }
.bento p, .bento code { overflow-wrap: anywhere; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
.picture { grid-row: span 2; }
.side { display: flex; flex-direction: column; }
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .span-3 { grid-column: span 3; } .span-4 { grid-column: span 3; } .span-6, .span-8, .span-12 { grid-column: span 6; }
  .picture { grid-row: auto; }
}
@media (max-width: 720px) {
  :root { --gap: 16px; }
  .bento { grid-template-columns: 1fr; }
  .bento > * { grid-column: 1 / -1 !important; }
  .panel { padding: 1.125rem; }
  .headline { padding: 1.125rem; }
  .verdict .sentence { font-size: 1.25rem; }
  .verdict-actions, .verdict-actions .button { width: 100%; }
}

/* The main picture: one raised strip per way out */
.lanes { display: grid; gap: 10px; margin-top: .75rem; }
.lane { display: grid; grid-template-columns: 9.5rem minmax(6rem, 1fr) minmax(8rem, 15rem); align-items: center; gap: .75rem;
  padding: .25rem .75rem; }
.lane .ln { font-weight: 600; font-size: .9375rem; }
.lane .out { font-size: .875rem; color: var(--muted-fg); overflow-wrap: anywhere; }
.lane[data-state="leak"] .out { color: var(--danger); font-weight: 600; }
.lane svg { width: 100%; height: 34px; display: block; overflow: visible; }
.lane .tunnel { fill: var(--field); stroke: var(--field-border); }
.lane path { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.lane[data-state="pass"] path, .lane[data-state="note"] path { stroke: var(--state-good); }
.lane[data-state="leak"] path { stroke: var(--state-bad); stroke-width: 3.5; }
.lane[data-state="leak"] .tunnel { opacity: .55; }
.lane[data-state="untested"] path, .lane[data-state="idle"] path { stroke: var(--state-quiet); stroke-dasharray: 4 6; }
.lane[data-state="running"] path { stroke: var(--state-calm); stroke-dasharray: 6 8; animation: flow 1s linear infinite; }
.lane-head { display: grid; grid-template-columns: 9.5rem minmax(6rem, 1fr) minmax(8rem, 15rem); gap: .75rem; padding: 0 .75rem;
  font-size: .875rem; color: var(--muted-fg); }
.lane-head span:nth-child(2) { text-align: center; }
@keyframes flow { to { stroke-dashoffset: -14; } }
@media (max-width: 720px) {
  .lane, .lane-head { grid-template-columns: 1fr auto; }
  .lane svg { grid-column: 1 / -1; grid-row: 2; }
  .lane-head span:nth-child(2) { display: none; }
  .lane .out { text-align: right; }
}

/* Check cards */
.check { display: flex; flex-direction: column; gap: .375rem; }
.check .state { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9375rem; }
.check .state i { width: 14px; height: 14px; border-radius: 50%; background: var(--state-quiet); flex: none; }
.check[data-state="pass"] .state i { background: var(--state-good); }
.check[data-state="leak"] { background: var(--danger-bg); }
.check[data-state="leak"] .state i { background: var(--state-bad); }
.check[data-state="note"] .state i { background: var(--state-busy); }
.check[data-state="running"] .state i { background: var(--state-calm); animation: pulse 1s ease-in-out infinite; }
.check .seen { font-size: 1.0625rem; font-weight: 700; overflow-wrap: anywhere; }
.check .meaning { font-size: .9375rem; margin: 0; }
.check .num { color: var(--muted-fg); font-weight: 600; font-size: .875rem; }
.check details { margin-top: auto; font-size: .875rem; }
.check summary { cursor: pointer; color: var(--link); font-weight: 600; min-height: 2rem; display: flex; align-items: center; }
.check details ul { margin: .25rem 0 0; padding-left: 1.1rem; color: var(--muted-fg); overflow-wrap: anywhere; }
.check .fixlink { font-weight: 600; font-size: .9375rem; }

/* Watch timeline */
.watch .watch-say { font-size: 1.25rem; font-weight: 600; }
.watch[data-state="leak"] { background: var(--danger-bg); }
.timeline { display: flex; flex-wrap: wrap; gap: 3px; margin: .75rem 0; min-height: 18px; padding: 8px; border-radius: var(--radius);
  background: var(--field); box-shadow: var(--shadow-field); }
.timeline span, .k { display: inline-block; width: 10px; height: 18px; border-radius: 3px; background: var(--state-quiet); }
.timeline .ok, .k.ok { background: var(--state-good); }
.timeline .blocked, .k.blocked { background: var(--muted-fg); }
.timeline .leak, .k.leak { background: var(--state-bad); }
.k { vertical-align: middle; margin: 0 .25rem 0 .75rem; }
.k:first-child { margin-left: 0; }

/* Footer: a raised panel, then the legal line on the page */
.foot { margin: .5rem var(--gap) 0; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1.5rem; }
.foot h2 { font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-fg); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.legal { max-width: 96rem; margin: 0 auto; padding: 1.25rem var(--gap) 2.5rem; font-size: .875rem; color: var(--muted-fg); }
.legal p { margin: 0 0 .375rem; }
@media (max-width: 720px) { .foot { grid-template-columns: 1fr; } }

/* Plain pages */
.page { max-width: 96rem; margin: 0 auto; }
.page h1 { margin: 1.75rem var(--gap) 1.25rem; }
.page h2 { font-size: 1.25rem; }
.page ul { padding-left: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.page .updated { margin: .75rem var(--gap) 0; }