/* ============================================================================
   certs.net — clean data tool
   A utility for looking up WebPKI certificates. Dense, fast, familiar, quiet.
   Craft bar: Linear / Sentry / Stripe Docs. Accent is teal (NOT violet).
   Colour is meaning: green/amber/red/blue = certificate state, not decoration.
   ========================================================================== */

:root {
	/* neutrals — warm paper (neo-mirai borrow) */
	--bg:#F1EADB; --surface:#FBF7EE; --surface-2:#ECE4D2; --surface-3:#E3DAC4;
	--border:#DBD1BB; --border-strong:#C6BB9F;
	--text:#221D14; --text-dim:#59503D; --text-mute:#6A6150;
	/* accent + semantics (tuned for AA on warm paper) */
	--accent:#0C7565; --accent-fg:#FBF7EE; --accent-wash:rgba(12,117,101,.10); --accent-line:rgba(12,117,101,.34);
	--valid:#177F42;   --valid-wash:rgba(23,127,66,.11);
	--expiring:#7E5610; --expiring-wash:rgba(126,86,16,.14);
	--expired:#7A7159;  --expired-wash:rgba(122,113,89,.16);
	--revoked:#A8301F;  --revoked-wash:rgba(168,48,31,.12);
	--info:#2A66A8;    --info-wash:rgba(42,102,168,.11);

	--mono: "Azeret Mono", ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
	--sans: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	--display: "Chakra Petch", var(--sans);

	--maxw:1200px;
	--r:6px; --r-sm:4px;
	--shadow-pop:0 8px 28px -10px rgba(20,20,18,.28), 0 2px 6px -2px rgba(20,20,18,.12);
	--h-topbar:56px;
}
/* light-only — dark mode removed by request (neo-mirai is light-only too) */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
	margin:0; background:var(--bg); color:var(--text);
	font-family:var(--sans); font-size:15px; line-height:1.5;
	-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
	display:flex; flex-direction:column; min-height:100vh;   /* sticky footer */
}
body > main{ flex:1 0 auto; width:100%; }   /* grows so footer stays at bottom; full width (auto margins in a flex column otherwise shrink it to content) */
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:2px; }
::selection{ background:var(--accent-wash); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.01em; }
h1{ font-family:var(--display); letter-spacing:-.02em; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.mono{ font-family:var(--mono); }
.mute{ color:var(--text-mute); } .dim{ color:var(--text-dim); }
.tnum{ font-variant-numeric:tabular-nums; }
.label{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); }
.hidden{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.select{ font-family:var(--mono); font-size:13px; color:var(--text); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:4px 8px; cursor:pointer; }
.select:hover{ border-color:var(--text-mute); }

/* ---- top bar ------------------------------------------------------------- */
.topbar{ position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid var(--border); }
.topbar__in{ display:flex; align-items:center; gap:16px; height:var(--h-topbar); }
/* non-home headers carry a search box: lay the bar out as logo | centred search | nav */
.topbar__in:has(.topbar__search){ display:grid; grid-template-columns:1fr minmax(0,560px) 1fr; }
.topbar__in:has(.topbar__search) .wordmark{ justify-self:start; }
.topbar__in:has(.topbar__search) .topbar__nav{ justify-self:end; }
.wordmark{ font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:.01em; text-transform:uppercase; color:var(--text); white-space:nowrap; }
.wordmark .dot{ color:var(--accent); }
/* header wordmark stands as tall as the search box beside it (footer keeps 17px) */
.topbar .wordmark{ display:inline-flex; align-items:center; height:37px; font-size:34px; line-height:1; }
.topbar__search{ width:100%; max-width:560px; justify-self:center; }
.topbar__nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.navlink{ font-size:14px; color:var(--text-dim); padding:6px 10px; border-radius:var(--r-sm); white-space:nowrap; }
.navlink:hover{ background:var(--surface-2); color:var(--text); text-decoration:none; }
.navlink.is-active{ color:var(--text); }

.iconbtn{ display:inline-grid; place-items:center; width:30px; height:30px; flex:none; cursor:pointer;
	border:1px solid var(--border); background:var(--surface); color:var(--text-dim); border-radius:var(--r-sm); }
.iconbtn:hover{ color:var(--text); background:var(--surface-2); border-color:var(--border-strong); }
.iconbtn svg{ width:15px; height:15px; }

/* ---- search -------------------------------------------------------------- */
.search{ position:relative; }
.search__box{ display:flex; align-items:center; gap:10px; background:var(--surface);
	border:1px solid var(--border-strong); border-radius:var(--r); padding:0 12px; transition:border-color .12s, box-shadow .12s; }
.search__box:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.search__box .lens{ width:16px; height:16px; color:var(--text-mute); flex:none; }
.search__input{ flex:1; min-width:0; border:0; background:none; outline:none; color:var(--text);
	font-family:var(--mono); font-size:15px; padding:9px 0; text-align:left; }
.search__input::placeholder{ color:var(--text-mute); }
/* home hero: overlay that cross-fades example queries (see app.js) */
.search__field{ position:relative; display:flex; flex:1; min-width:0; }
.ph-rotator{ position:absolute; left:0; top:0; bottom:0; display:flex; align-items:center;
	pointer-events:none; font-family:var(--mono); font-size:20px; color:var(--text-mute);
	white-space:nowrap; overflow:hidden; max-width:100%; opacity:1; transition:opacity .24s ease; }
.search__kbd{ font-family:var(--mono); font-size:13px; color:var(--text-mute); border:1px solid var(--border);
	border-radius:3px; padding:1px 5px; flex:none; }
.search--hero .search__box{ padding:0 20px; border-width:1.5px; }
.search--hero .search__input{ font-size:20px; padding:21px 0; }
.search--hero .lens{ width:20px; height:20px; }
/* live detected-type readout under the hero field */
.detected{ display:flex; align-items:center; gap:8px; min-height:20px; margin-top:10px;
	font-family:var(--mono); font-size:13.5px; color:var(--text-dim); }
.detected .k{ color:var(--accent); }
.detected .arrow{ color:var(--text-mute); }

/* ---- buttons ------------------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:14px; font-weight:500;
	padding:7px 12px; border-radius:var(--r-sm); border:1px solid var(--border-strong); background:var(--surface);
	color:var(--text); cursor:pointer; white-space:nowrap; transition:background .12s,border-color .12s; }
.btn:hover{ background:var(--surface-2); text-decoration:none; }
.btn svg{ width:14px; height:14px; }
.btn--primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
.btn--primary:hover{ filter:brightness(1.06); background:var(--accent); }
.btn--sm{ padding:5px 9px; font-size:13px; }
.btn--ghost{ border-color:transparent; background:none; color:var(--text-dim); }
.btn--ghost:hover{ background:var(--surface-2); color:var(--text); }

/* ---- chips / pills ------------------------------------------------------- */
.chip{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:13px;
	padding:3px 8px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--text-dim); white-space:nowrap; }
.chip--wild{ color:var(--expiring); border-color:color-mix(in srgb,var(--expiring) 40%,var(--border)); background:var(--expiring-wash); }
.chip--more{ cursor:pointer; color:var(--text-mute); border:0; background:none; padding:3px 2px; }
.chip--more:hover{ color:var(--accent); }

/* certificate-state pill: dot + word, colour never the only signal */
.state{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:13px; font-weight:600; white-space:nowrap; }
.state .dot{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.state--valid{ color:var(--valid); } .state--expiring{ color:var(--expiring); }
.state--expired{ color:var(--expired); } .state--revoked{ color:var(--revoked); }
.state--precert{ color:var(--info); }

/* small lint status squares */
.lint{ display:inline-flex; gap:3px; align-items:center; }
.lint i{ width:7px; height:7px; border-radius:1.5px; display:block; }
.lint .pass{ background:var(--valid); } .lint .warn{ background:var(--expiring); }
.lint .err{ background:var(--revoked); } .lint .na{ background:var(--border-strong); }

/* ---- generic surfaces ---------------------------------------------------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r); }
.sec-head{ display:flex; align-items:baseline; gap:10px; margin:0 0 12px; }
.sec-head h2{ font-size:14px; font-family:var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--text-dim); font-weight:600; }
.sec-head .count{ font-family:var(--mono); font-size:13px; color:var(--text-mute); }
.sec-head .spacer{ margin-left:auto; }

/* ---- data table (ledger) ------------------------------------------------- */
.table-scroll{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); }
table.dt{ width:100%; border-collapse:collapse; font-size:14px; }
table.dt thead th{ position:sticky; top:0; z-index:5; text-align:left; background:var(--surface-2);
	font-family:var(--mono); font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-mute);
	font-weight:600; padding:9px 12px; border-bottom:1px solid var(--border); white-space:nowrap; }
table.dt tbody td{ padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:middle; white-space:nowrap; }
table.dt tbody tr:last-child td{ border-bottom:0; }
table.dt tbody tr{ cursor:pointer; }
table.dt tbody tr:hover{ background:var(--surface-2); }
table.dt tbody tr[aria-selected="true"]{ background:var(--accent-wash); box-shadow:inset 2px 0 0 var(--accent); }
table.dt .name{ font-family:var(--mono); color:var(--text); font-weight:500; }
table.dt tr:hover .name{ color:var(--accent); }
table.dt .muted-cell{ font-family:var(--mono); color:var(--text-mute); font-size:13px; }
table.dt .num{ text-align:right; font-variant-numeric:tabular-nums; }
.idx{ font-family:var(--mono); font-size:13px; color:var(--text-mute); }

/* mini validity bar in a row */
.vbar{ position:relative; width:88px; height:4px; border-radius:2px; background:var(--surface-3); overflow:hidden; }
.vbar i{ position:absolute; inset:0 auto 0 0; background:var(--valid); }
.vbar.is-expiring i{ background:var(--expiring); } .vbar.is-expired i{ background:var(--border-strong); }

/* ---- key/value document rows -------------------------------------------- */
.kv{ display:grid; grid-template-columns:200px 1fr; }
.kv > dt{ font-family:var(--mono); font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-mute);
	padding:10px 16px 10px 0; border-bottom:1px solid var(--border); }
.kv > dd{ margin:0; font-family:var(--mono); font-size:14px; color:var(--text); padding:10px 0; border-bottom:1px solid var(--border); word-break:break-word; }
.kv > dt:last-of-type, .kv > dd:last-of-type{ border-bottom:0; }
.copy{ cursor:pointer; border:0; background:none; color:var(--text-mute); padding:2px; border-radius:3px; vertical-align:-2px; }
.copy:hover{ color:var(--accent); background:var(--accent-wash); }
.copy svg{ width:13px; height:13px; }

/* ---- tabs ---------------------------------------------------------------- */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); }
.tab{ font-family:var(--sans); font-size:14px; font-weight:500; color:var(--text-dim); background:none; border:0;
	padding:9px 12px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab:hover{ color:var(--text); }
.tab[aria-selected="true"]{ color:var(--text); border-bottom-color:var(--accent); }
.tab .n{ font-family:var(--mono); font-size:13px; color:var(--text-mute); margin-left:5px; }
.tabpane{ display:none; padding-top:20px; } .tabpane.is-active{ display:block; }

/* ---- validity timeline (detail) ----------------------------------------- */
.vtimeline{ }
.vtimeline .bar{ position:relative; height:6px; border-radius:3px; background:var(--surface-3); }
.vtimeline .bar i{ position:absolute; inset:0 auto 0 0; border-radius:3px; background:var(--valid); }
.vtimeline.is-expiring .bar i{ background:var(--expiring); }
.vtimeline .now{ position:absolute; top:-5px; width:2px; height:16px; background:var(--text); }
.vtimeline .ends{ display:flex; justify-content:space-between; margin-top:8px; font-family:var(--mono); font-size:13px; color:var(--text-dim); }
.vtimeline .ends b{ color:var(--text); font-weight:600; }

/* ---- sightings timeline -------------------------------------------------- */
.timeline{ list-style:none; margin:0; padding:0; position:relative; }
.timeline::before{ content:""; position:absolute; left:6px; top:4px; bottom:4px; width:1px; background:var(--border-strong); }
.tl li{ position:relative; padding:0 0 16px 26px; }
.tl li:last-child{ padding-bottom:0; }
.tl .marker{ position:absolute; left:0; top:2px; width:13px; height:13px; border-radius:50%; border:2px solid var(--surface); }
.tl .marker.ct{ background:var(--info); } .tl .marker.scan{ background:var(--accent); }
.tl .marker.store{ background:var(--expiring); } .tl .marker.crtsh{ background:var(--text-mute); }
.tl .when{ font-family:var(--mono); font-size:13px; color:var(--text-mute); }
.tl .what{ font-family:var(--mono); font-size:14px; color:var(--text); }
.tl .what a{ color:var(--accent); }

/* ---- pivot list ---------------------------------------------------------- */
.pivots{ display:flex; flex-direction:column; }
.pivot{ display:flex; align-items:center; gap:11px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r);
	background:var(--surface); margin-bottom:8px; transition:border-color .12s, background .12s; }
.pivot:last-child{ margin-bottom:0; }
.pivot:hover{ border-color:var(--accent-line); background:var(--accent-wash); text-decoration:none; }
.pivot .pi{ width:28px; height:28px; border-radius:var(--r-sm); background:var(--surface-2); display:grid; place-items:center; color:var(--accent); flex:none; }
.pivot .pi svg{ width:15px; height:15px; }
.pivot > span:not([class]){ flex:1 1 auto; min-width:0; }
.pivot .pt{ display:block; font-family:var(--mono); font-size:14px; color:var(--text); }
.pivot .pd{ display:block; font-size:13px; color:var(--text-mute); margin-top:1px; }
.pivot .pn{ margin-left:auto; font-family:var(--mono); font-size:14px; color:var(--accent); font-weight:600; flex:none; }

/* ---- trust-store chips --------------------------------------------------- */
.trust{ display:flex; flex-wrap:wrap; gap:8px; }
.tstore{ display:flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:var(--r-sm);
	font-family:var(--mono); font-size:13px; background:var(--surface); }
.tstore svg{ width:13px; height:13px; }
.tstore.ok{ color:var(--text); } .tstore.ok svg{ color:var(--valid); }
.tstore.no{ color:var(--text-mute); } .tstore.no svg{ color:var(--text-mute); }

/* ---- banner (compromised key / notice) ---------------------------------- */
.banner{ display:flex; gap:12px; align-items:flex-start; padding:13px 15px; border-radius:var(--r); border:1px solid; }
.banner svg{ width:18px; height:18px; flex:none; margin-top:1px; }
.banner .banner-title{ font-family:var(--mono); font-size:14px; margin:0 0 2px; }
.banner p{ margin:0; font-size:13.5px; color:var(--text-dim); }
.banner--danger{ background:var(--revoked-wash); border-color:color-mix(in srgb,var(--revoked) 40%,var(--border)); }
.banner--danger svg, .banner--danger .banner-title{ color:var(--revoked); }
.banner--info{ background:var(--info-wash); border-color:color-mix(in srgb,var(--info) 40%,var(--border)); }
.banner--info svg, .banner--info .banner-title{ color:var(--info); }

/* ---- code / PEM block ---------------------------------------------------- */
.codeblock{ position:relative; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r);
	font-family:var(--mono); font-size:13px; line-height:1.7; color:var(--text-dim); padding:12px 14px; overflow-x:auto; white-space:pre; }
.codeblock .armor{ color:var(--accent); }
.codeblock__copy{ position:absolute; top:8px; right:8px; }

/* ---- ASN.1 tree ---------------------------------------------------------- */
.asn1{ font-family:var(--mono); font-size:13.5px; line-height:1.85; }
.asn1 .r{ display:flex; gap:12px; padding:1px 4px; border-radius:3px; }
.asn1 .r:hover{ background:var(--surface-2); }
.asn1 .o{ color:var(--text-mute); width:66px; flex:none; }
.asn1 .t{ color:var(--info); } .asn1 .v{ color:var(--text); } .asn1 .i{ color:var(--border-strong); }

/* ---- fingerprint barcode + seal (signature details, kept small) --------- */
.barcode{ display:flex; align-items:stretch; gap:1px; height:20px; }
.barcode i{ width:2px; background:var(--text-dim); display:block; }
.seal svg{ display:block; }

/* ---- dense certificate document ----------------------------------------- */
.cert-section{ margin-top:26px; }
.cert-section > .sec-head{ margin-bottom:10px; padding-bottom:7px; border-bottom:1px solid var(--border); }
.cert-section > .sec-head h2{ font-size:13px; }
/* two-column dense field grid, tighter than .kv */
.fields{ display:grid; grid-template-columns:172px 1fr; }
.fields > dt{ font-family:var(--mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-mute);
	padding:7px 14px 7px 0; border-bottom:1px solid var(--border); }
.fields > dd{ margin:0; font-family:var(--mono); font-size:13.5px; color:var(--text); padding:7px 0; border-bottom:1px solid var(--border); word-break:break-word; }
.fields > dt:last-of-type, .fields > dd:last-of-type{ border-bottom:0; }
.fields .crit{ color:var(--seal, var(--revoked)); font-size:13px; text-transform:uppercase; letter-spacing:.05em; margin-left:6px; }
.fields .crit{ color:var(--revoked); }
.fields a{ color:var(--accent); }
/* collapsible hex / long value block */
.hexblock{ font-family:var(--mono); font-size:13px; line-height:1.65; color:var(--text-dim); background:var(--surface-2);
	border:1px solid var(--border); border-radius:var(--r-sm); padding:8px 10px; margin-top:4px; max-height:112px; overflow:auto; white-space:pre-wrap; word-break:break-all; }
details.hex > summary{ cursor:pointer; font-family:var(--mono); font-size:13px; color:var(--accent); list-style:none; padding:2px 0; }
details.hex > summary::-webkit-details-marker{ display:none; }
details.hex > summary::before{ content:"▸ "; color:var(--text-mute); }
details.hex[open] > summary::before{ content:"▾ "; }
/* policy OID rows */
.oid{ font-family:var(--mono); font-size:13.5px; }
.oid .code{ color:var(--info); } .oid .name{ color:var(--text-mute); margin-left:6px; }
/* compact table variant for entries/revocation */
table.dt.compact td, table.dt.compact th{ padding:6px 10px; font-size:13px; }
table.dt.compact thead th{ top:0; }
.wrap-cell{ white-space:normal !important; }
/* SAN full list */
.sanlist{ display:flex; flex-wrap:wrap; gap:5px; }
.sanlist .san{ font-family:var(--mono); font-size:13px; padding:3px 8px; border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); }
.sanlist .san.primary{ color:var(--text); border-color:var(--border-strong); }
.sanlist .san.wild{ color:var(--expiring); border-color:color-mix(in srgb,var(--expiring) 35%,var(--border)); }
.status-ok{ color:var(--valid); } .status-bad{ color:var(--revoked); } .status-unk{ color:var(--text-mute); }

/* ---- alarm states (expired / revoked / untrusted) ----------------------- */
.state--untrusted{ color:var(--revoked); }
.banner--warn{ background:var(--expiring-wash); border-color:color-mix(in srgb,var(--expiring) 40%,var(--border)); }
.banner--warn svg, .banner--warn .banner-title{ color:var(--expiring); }
.banner--muted{ background:var(--surface-2); border-color:var(--border-strong); }
.banner--muted svg, .banner--muted .banner-title{ color:var(--text-dim); }
.alarms{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.badge-item.bad{ border-color:color-mix(in srgb,var(--revoked) 45%,var(--border)); background:var(--revoked-wash); }
.badge-item.warn{ border-color:color-mix(in srgb,var(--expiring) 45%,var(--border)); background:var(--expiring-wash); }
.vtimeline.is-expired .bar i{ background:var(--border-strong); }
.vtimeline.is-revoked .bar i{ background:var(--revoked); }
.tstore.no svg{ color:var(--revoked); }
.tstore.no{ color:var(--revoked); border-color:color-mix(in srgb,var(--revoked) 30%,var(--border)); }
.report .g.err svg{ stroke:#fff; }

/* ---- domain certificate timeline (Gantt) -------------------------------- */
.gantt__head{ position:relative; height:16px; margin-bottom:8px; }
.gantt__head span{ position:absolute; transform:translateX(-50%); font-family:var(--mono); font-size:13px; color:var(--text-mute); }
.gantt__body{ position:relative; }
.gantt__grid{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.gantt__grid span{ position:absolute; top:0; bottom:0; width:1px; background:var(--border); }
.gantt__lane{ position:relative; height:23px; margin-bottom:5px; z-index:1; }
.gantt__bar{ position:absolute; top:2px; height:19px; border-radius:3px; display:flex; align-items:center;
	padding:0 7px; font-family:var(--mono); font-size:13px; color:#fff; white-space:nowrap; overflow:hidden;
	cursor:pointer; text-decoration:none; border:1px solid rgba(0,0,0,.12); transition:filter .12s, box-shadow .12s; min-width:8px; }
.gantt__bar:hover{ filter:brightness(1.08); z-index:5; box-shadow:0 0 0 2px var(--accent-wash); text-decoration:none; }
.gantt__bar.ca-digicert{ background:#2E6FB8; } .gantt__bar.ca-le{ background:#1A8F4C; }
.gantt__bar.ca-gts{ background:#0F8C79; } .gantt__bar.ca-sectigo{ background:#B4791C; }
.gantt__bar.current{ outline:2px solid var(--accent); outline-offset:1px; }
.gantt__bar.revoked{ background:var(--revoked) !important;
	background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 3px, transparent 3px 7px) !important; }
.gantt__now{ position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--text); z-index:6; }
.gantt__now::after{ content:"now"; position:absolute; top:-15px; left:50%; transform:translateX(-50%);
	font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--text); background:var(--surface); padding:0 3px; }
.gantt__legend{ display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; font-family:var(--mono); font-size:13px; color:var(--text-dim); }
.gantt__legend b{ display:inline-block; width:11px; height:11px; border-radius:2px; margin-right:5px; vertical-align:-1px; }

/* ---- home use-cases grid ------------------------------------------------ */
.usecases{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px 28px; font-size:14px; }
.usecases .h{ font-family:var(--mono); color:var(--text); margin-bottom:3px; }
@media (max-width:680px){ .usecases{ grid-template-columns:1fr; } }

/* ---- stat readouts (home) ----------------------------------------------- */
.stats{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.stat{ padding:12px 18px; border-right:1px solid var(--border); }
.stat:last-child{ border-right:0; }
.stat .v{ font-family:var(--mono); font-size:19px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.stat .l{ font-size:13px; color:var(--text-mute); margin-top:1px; }

/* ---- example query row (home) ------------------------------------------- */
.examples{ display:flex; flex-wrap:wrap; gap:8px; }
.example{ font-family:var(--mono); font-size:13.5px; color:var(--text-dim); background:var(--surface); border:1px solid var(--border);
	padding:6px 10px; border-radius:var(--r-sm); }
.example:hover{ border-color:var(--accent-line); color:var(--accent); text-decoration:none; }
.example .t{ color:var(--text-mute); }

/* ---- live indicator (no pulsing dot) ------------------------------------ */
.live{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:13px; letter-spacing:.06em;
	text-transform:uppercase; color:var(--valid); }
.live .sq{ width:7px; height:7px; border-radius:2px; background:var(--valid); }

/* ---- filters / facets (search) ------------------------------------------ */
.facet{ display:flex; align-items:center; gap:7px; font-size:14px; color:var(--text-dim); padding:5px 0; cursor:pointer; }
.facet input{ accent-color:var(--accent); }
.facet .c{ margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--text-mute); }

/* ---- footer -------------------------------------------------------------- */
.foot{ border-top:1px solid var(--border); margin-top:48px; background:var(--surface); }
.foot__in{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:28px; padding:32px 0 40px; }
.foot .foot-h{ font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute); margin:0 0 10px; }
.foot a{ display:block; font-size:14px; color:var(--text-dim); padding:3px 0; }
.foot a:hover{ color:var(--accent); }
.foot p{ font-size:13.5px; color:var(--text-mute); margin:8px 0 0; max-width:34ch; }

/* ---- layout helpers ------------------------------------------------------ */
.grid-detail{ display:grid; grid-template-columns:1fr 320px; gap:28px; align-items:start; }
.grid-results{ display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:start; }
.stack-16 > * + *{ margin-top:16px; } .stack-24 > * + *{ margin-top:24px; } .stack-8 > * + *{ margin-top:8px; }
.rowflex{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.spread{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
hr.rule{ border:0; border-top:1px solid var(--border); margin:20px 0; }
.page{ padding:24px 0 0; }
.crumbs{ font-family:var(--mono); font-size:13px; color:var(--text-mute); margin-bottom:14px; }
.crumbs a{ color:var(--text-dim); } .crumbs .sep{ margin:0 6px; }

/* ---- certificate document header ---------------------------------------- */
.dochead{ display:flex; align-items:flex-start; gap:20px; }
.dochead__main{ flex:1; min-width:0; }
.dochead__title{ font-family:var(--mono); font-size:22px; font-weight:600; letter-spacing:-.02em; word-break:break-all; }
.dochead__seal{ flex:none; text-align:center; }
.dochead__seal .cap{ display:block; margin-top:4px; }
.fpline{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:13.5px; color:var(--text-dim); flex-wrap:wrap; }
.fpline .k{ color:var(--text-mute); }
.fpline .v{ color:var(--text); word-break:break-all; }

/* badge row on the certificate */
.badges{ display:flex; flex-wrap:wrap; gap:10px; }
.badge-item{ display:flex; flex-direction:column; gap:3px; padding:9px 13px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); min-width:120px; }
.badge-item .bl{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); }
.badge-item .bv{ font-family:var(--mono); font-size:14px; font-weight:600; display:flex; align-items:center; gap:6px; }

/* plain-language explain panel */
.explain{ background:var(--accent-wash); border:1px solid var(--accent-line); border-radius:var(--r); padding:16px 18px; }
.explain h2{ font-size:15px; margin:0 0 8px; }
.explain p{ margin:0 0 8px; font-size:14.5px; color:var(--text-dim); line-height:1.6; }
.explain p:last-child{ margin-bottom:0; }
.explain b{ color:var(--text); font-weight:600; }
.btn.is-on{ background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }

/* SAN analyzer */
.sans{ display:flex; flex-wrap:wrap; gap:6px; }
.san{ font-family:var(--mono); font-size:13.5px; padding:4px 9px; border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); }
.san.primary{ color:var(--text); border-color:var(--border-strong); }
.san.wild{ color:var(--expiring); border-color:color-mix(in srgb,var(--expiring) 35%,var(--border)); }

/* report card rows (lint / hygiene) */
.report{ display:flex; flex-direction:column; }
.report .line{ display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:14px; }
.report .line:last-child{ border-bottom:0; }
.report .g{ flex:none; width:15px; height:15px; border-radius:3px; display:grid; place-items:center; margin-top:1px; }
.report .g svg{ width:10px; height:10px; color:#fff; }
.report .g.pass{ background:var(--valid); } .report .g.warn{ background:var(--expiring); } .report .g.err{ background:var(--revoked); }
.report .rt{ font-family:var(--mono); color:var(--text); }
.report .rd{ color:var(--text-mute); font-size:13px; }
.report .src{ margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--text-mute); flex:none; }

@media (max-width:980px){
	.grid-detail{ grid-template-columns:1fr; }
	.dochead{ flex-direction:column; }
	.grid-results{ grid-template-columns:1fr; }
	.foot__in{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
	.topbar__search{ display:none; }
	.kv{ grid-template-columns:1fr; }
	.kv > dt{ border-bottom:0; padding-bottom:0; } .kv > dd{ padding-top:2px; }
	.foot__in{ grid-template-columns:1fr; gap:20px; }
	.stat{ flex:1 1 40%; }
}
/* ---- polish pass: overflow, mobile order, scrollbars ------------------- */
/* grid children default to min-width:auto, which lets wide tables/timelines
   blow the track out and force a page-wide horizontal scroll. Pin to 0. */
.grid-results > *, .grid-detail > * { min-width:0; }
/* on narrow screens, results come before the filter rail */
@media (max-width:980px){ .grid-results > aside{ order:2; } }
/* wide timeline scrolls horizontally instead of crushing to unreadable */
.gantt{ overflow-x:auto; }
.gantt__head, .gantt__body{ min-width:560px; }
/* dense field grid stacks label-over-value on phones */
@media (max-width:560px){
	.fields{ grid-template-columns:1fr; }
	.fields > dt{ border-bottom:0; padding:8px 0 0; }
	.fields > dd{ padding:2px 0 12px; }
	.fields > dt:last-of-type{ border-bottom:0; }
}
/* theme the scrollbars the browser would otherwise leave default */
.table-scroll, .hexblock, .codeblock, .gantt, .asn1{ scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
.table-scroll::-webkit-scrollbar, .hexblock::-webkit-scrollbar, .codeblock::-webkit-scrollbar, .gantt::-webkit-scrollbar{ height:9px; width:9px; }
.table-scroll::-webkit-scrollbar-thumb, .hexblock::-webkit-scrollbar-thumb, .codeblock::-webkit-scrollbar-thumb, .gantt::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:5px; }
.table-scroll::-webkit-scrollbar-thumb:hover, .gantt::-webkit-scrollbar-thumb:hover{ background:var(--text-mute); }
.table-scroll::-webkit-scrollbar-track, .gantt::-webkit-scrollbar-track{ background:transparent; }

/* ---- sortable column headers ------------------------------------------- */
table.dt th.sortable{ cursor:pointer; user-select:none; }
table.dt th.sortable::after{ content:"↕"; margin-left:6px; opacity:.35; font-weight:400; }
table.dt th.is-sorted::after{ opacity:1; color:var(--accent); }
table.dt th.is-sorted.asc::after{ content:"↑"; }
table.dt th.is-sorted.desc::after{ content:"↓"; }

/* ---- pagination -------------------------------------------------------- */
.pager{ display:flex; align-items:center; gap:4px; }
.pager__btn{ font-family:var(--mono); font-size:13px; min-width:32px; height:32px; padding:0 9px;
	border:1px solid var(--border); background:var(--surface); border-radius:var(--r-sm); color:var(--text-dim); cursor:pointer; }
.pager__btn:hover:not(:disabled):not(.is-current){ border-color:var(--border-strong); color:var(--text); background:var(--surface-2); }
.pager__btn.is-current{ background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
.pager__btn:disabled{ opacity:.45; cursor:default; }
.pager__gap{ color:var(--text-mute); padding:0 3px; }

/* ---- home hero: live certificate counter ------------------------------- */
.counter__num{ font-family:var(--display); font-weight:600; font-size:64px; line-height:1;
	letter-spacing:-.02em; color:var(--text); }
.counter__num .d{ display:inline-block; width:.62em; text-align:center; }
.counter__num .c{ display:inline-block; width:.30em; text-align:center; }
.counter__label{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
	color:var(--text-mute); margin-top:12px; }
@media (max-width:560px){ .counter__num{ font-size:44px; } }

/* ---- neo-mirai borrow: ring markers on section + group labels ---------- */
.sec-head h2::before,
.label:not(.cap)::before{
	content:""; display:inline-block; width:6px; height:6px; flex:none;
	border:1.5px solid var(--accent); border-radius:50%; margin-right:8px; vertical-align:1px;
}

/* ---- vis-timeline (certificate history) theming ------------------------ */
.tl-wrap{ position:relative; }
#timeline{ font-family:var(--mono); height:264px; }
.vis-timeline{ border:1px solid var(--border); border-radius:var(--r); background:var(--surface); }
.vis-panel.vis-center, .vis-panel.vis-left, .vis-panel.vis-right, .vis-panel.vis-top, .vis-panel.vis-bottom{ border-color:var(--border); }
.vis-time-axis .vis-text{ color:var(--text-mute); font-family:var(--mono); font-size:11px; }
.vis-time-axis .vis-text.vis-major{ color:var(--text-dim); font-weight:600; }
.vis-time-axis .vis-grid.vis-minor{ border-color:var(--border); }
.vis-time-axis .vis-grid.vis-major{ border-color:var(--border-strong); }
.vis-current-time{ background-color:var(--text); width:2px; }
.vis-item{ border-radius:3px; border-width:1px; color:#fff; font-family:var(--mono); font-size:11px; }
.vis-item .vis-item-content{ padding:2px 7px; }
.vis-item.vis-selected{ box-shadow:0 0 0 2px var(--accent); border-color:var(--accent); }
.vis-tooltip{ background:var(--surface) !important; border:1px solid var(--border-strong) !important; color:var(--text) !important;
	font-family:var(--mono) !important; font-size:12px !important; border-radius:var(--r-sm) !important; box-shadow:var(--shadow-pop) !important; white-space:pre-line; }
.tlitem.ca-gts{ background-color:#0F8C79; border-color:#0b5e52; }
.tlitem.ca-le{ background-color:#1A8F4C; border-color:#12673a; }
.tlitem.ca-digicert{ background-color:#2E6FB8; border-color:#20507f; }
.tlitem.ca-cf{ background-color:#7A5CC0; border-color:#5b4494; }
.tlitem.ca-sectigo{ background-color:#B4791C; border-color:#8a5c13; }
.tlitem.ca-other{ background-color:#8A8168; border-color:#645c48; }
.tlitem.is-expired{ opacity:.5; }
.tlitem.is-revoked{ background-color:#A8301F !important; border-color:#7d2216 !important;
	background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 3px, transparent 3px 7px); }
.tl-zoom{ position:absolute; right:10px; bottom:10px; z-index:5; display:flex; flex-direction:column; gap:4px; }
.tl-zoom__btn{ font-family:var(--mono); font-size:14px; min-width:30px; height:28px; padding:0 9px;
	border:1px solid var(--border); background:var(--surface); border-radius:var(--r-sm); color:var(--text-dim); cursor:pointer;
	box-shadow:0 1px 3px rgba(20,16,8,.12); }
.tl-zoom__btn:hover{ border-color:var(--border-strong); color:var(--text); background:var(--surface-2); }
.tl-zoom__btn.is-on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.tl-legend{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-family:var(--mono); font-size:12px; color:var(--text-dim); }
.tl-legend b{ display:inline-block; width:11px; height:11px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.tl-legend b.ca-gts{ background:#0F8C79; } .tl-legend b.ca-le{ background:#1A8F4C; } .tl-legend b.ca-digicert{ background:#2E6FB8; } .tl-legend b.ca-cf{ background:#7A5CC0; }
.tl-legend b.is-revoked{ background:#A8301F; background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 2px, transparent 2px 5px); }
table.dt tbody tr.row-hi{ background:var(--accent-wash); box-shadow:inset 3px 0 0 var(--accent); }

/* ---- cert-detail: fingerprint copy · validity ends · download · trust · chain -- */
.fp{ display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:2px 6px; margin:-2px -6px;
	border:0; background:none; border-radius:var(--r-sm); font:inherit; color:inherit; cursor:pointer; text-align:left; }
.fp:hover{ background:var(--surface-2); }
.fp .v{ font-family:var(--mono); }
.fp__ico{ width:14px; height:14px; color:var(--text-mute); flex:none; }
.fp:hover .fp__ico{ color:var(--accent); }
.fp.is-copied, .fp.is-copied .fp__ico{ color:var(--accent); }

.v-ends{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:10px;
	font-family:var(--mono); font-size:13px; color:var(--text-dim); }
.v-ends b{ color:var(--text); }
#validity{ min-height:92px; }

/* Hostname reveal: hover any hostname string to expose a homoglyph-proof
   rendering — Atkinson Hyperlegible, uppercased, with letters / digits /
   punctuation in three obvious colours so look-alike characters stand out. */
.hostname{ transition:color .1s; }
.hostname:hover{ font-family:"Atkinson Hyperlegible Mono", var(--mono); text-transform:uppercase; }
/* Vivid blue/green/red for maximum legibility — this is a security aid, so it
   deliberately overrides the restrained palette. */
.hostname:hover .l{ color:#1d4ed8; }               /* letters — blue  */
.hostname:hover .d{ color:#15803d; }               /* digits — green  */
.hostname:hover .p{ color:#dc2626; font-weight:700; } /* punctuation — red, bold */

/* download dropdown (hover / focus to open) */
.dl{ position:relative; }
.dl__btn{ width:100%; justify-content:center; gap:7px; }
.dl__ico{ width:15px; height:15px; }
.dl__caret{ width:13px; height:13px; margin-left:1px; opacity:.85; }
.dl__menu{ position:absolute; top:100%; left:0; right:0; z-index:30; padding:6px;
	background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r);
	opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .13s, transform .13s, visibility .13s; }
.dl:hover .dl__menu, .dl:focus-within .dl__menu{ opacity:1; visibility:visible; transform:none; }
.dl__item{ display:flex; flex-direction:column; gap:1px; padding:7px 9px; border-radius:var(--r-sm); text-decoration:none; }
.dl__item:hover{ background:var(--surface-2); }
.dl__item b{ font-family:var(--mono); font-size:13.5px; font-weight:600; color:var(--text); }
.dl__item span{ font-size:12px; color:var(--text-mute); }

/* trust-store table */
.trust-tbl{ width:100%; border-collapse:collapse; }
.trust-tbl td{ padding:8px 0; border-bottom:1px solid var(--border); vertical-align:middle; }
.trust-tbl tr:last-child td{ border-bottom:0; }
.trust-tbl td.nm{ display:flex; align-items:center; gap:9px; font-size:14px; }
.trust-tbl td.st{ text-align:right; font-family:var(--mono); font-size:12.5px; white-space:nowrap; }
.trust-tbl tr.ok td.nm, .trust-tbl tr.ok td.st{ color:var(--valid); }
.trust-tbl tr.no td.nm, .trust-tbl tr.no td.st{ color:var(--revoked); }
.favi{ width:18px; height:18px; flex:none; border-radius:4px; display:inline-flex; align-items:center; justify-content:center;
	color:#fff; font-family:var(--mono); font-size:11px; font-weight:600; overflow:hidden; }
.favi--light{ background:#fff; box-shadow:inset 0 0 0 1px var(--border); }

/* issues (shown only when the certificate has problems) */
.issue-list{ display:flex; flex-direction:column; gap:10px; }
.issue{ display:flex; gap:11px; align-items:flex-start; padding:12px 14px; border-radius:var(--r); border:1px solid; }
.issue > svg{ width:18px; height:18px; flex:none; margin-top:1px; }
.issue__t{ font-weight:600; font-size:14.5px; }
.issue__d{ font-size:13px; margin-top:3px; line-height:1.5; color:var(--text-dim); }
.issue--danger{ background:#F6E7E3; border-color:#E0B6AC; color:var(--revoked); }
.issue--warn{ background:#F6EEDD; border-color:#E1CFA4; color:var(--expiring); }

/* signing-chain graph */
#chain{ height:236px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); }

/* X.509 / ASN.1 interactive decoder — frameless; tree left (flexible), hex right (narrow) */
.asn{ display:flex; flex-direction:row; align-items:flex-start; gap:16px; max-width:100%; }
.asn__tree{ flex:1 1 auto; min-width:0; overflow-x:hidden; padding:2px 0; font-family:var(--mono); font-size:12px; }
.asn__hex{ flex:none; width:fit-content; max-width:100%; max-height:440px; overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
	padding:11px 13px; background:var(--surface-2); border-radius:var(--r-sm); font-family:var(--mono); font-size:10px; line-height:1.6; }
.asn__hex::-webkit-scrollbar{ display:none; }
@media (max-width:900px){ .asn{ flex-direction:column; } }
.asn-row{ display:inline-flex; gap:8px; align-items:baseline; padding:1.5px 6px; border-radius:3px; white-space:nowrap; cursor:default; max-width:100%; }
.asn-row:hover, .asn-row.hl{ background:var(--accent-wash); }
.asn-caret{ display:inline-block; width:10px; color:var(--text-mute); cursor:pointer; transition:transform .1s; flex:none; }
.asn-caret--none{ visibility:hidden; }
.asn-item.collapsed > .asn-row .asn-caret{ transform:rotate(-90deg); }
.asn-item.collapsed > .asn-kids{ display:none; }
.asn-label{ color:var(--text); font-weight:600; }
.asn-type{ color:var(--info); }
.asn-val{ color:var(--text-dim); }
.asn-len{ color:var(--text-mute); font-size:11px; }
.hexrow{ display:flex; gap:14px; white-space:pre; }
.hoff{ color:var(--text-mute); flex:none; }
.hbytes, .hascii{ flex:none; }
.hb{ padding:0 1.5px; }
.hb--pad{ color:transparent; }
.hascii{ color:var(--text-dim); }
.hb.hl, .ha.hl{ background:var(--accent); color:#fff; border-radius:2px; }

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }