/* LogShare site styles. Tokens live in tokens.css. Structure:
   base → layout → nav → buttons → type helpers → landing hero + demo →
   sections/cards → share form → viewer → tools → content → state pages →
   footer → toast → responsive → motion. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.5;
  background: var(--bg-base); color: var(--text-primary);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition), color var(--transition);
}
a { color: inherit; text-decoration: none; }
code, pre, .mono { font-family: var(--font-mono); }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
::selection { background: var(--accent-solid); color: #fff; }

/* Visually hidden but present for assistive tech and search engines. */
.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; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--accent-solid); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Layout ---------- */
.page { min-height: 100%; display: flex; flex-direction: column; }
main { flex: 1; }
.wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section { padding-top: 72px; padding-bottom: 72px; }
.band { background: var(--bg-surface); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }

/* Signature label: monospace, prefixed with a comment slash pair. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-blue);
}
.eyebrow::before { content: '//'; color: var(--text-muted); letter-spacing: 0; }
.section-head { max-width: 640px; margin-bottom: 28px; }
.section-head h2 { font-size: 30px; letter-spacing: -0.025em; margin: 10px 0 8px; }
.section-head .sub { color: var(--text-secondary); font-size: 16px; }
.section-head .sub a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
.section-head .sub a:hover { text-decoration-color: currentColor; }

/* ---------- Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--glass); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav { display: flex; align-items: center; height: 60px; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; letter-spacing: -0.035em; }
.brand-name { display: inline-flex; line-height: 1; }
.brand-name .b1 { color: var(--logo-doc); }
.brand-name .b2 { color: var(--accent-blue); }
/* Logo mark (views/partials/logo.ejs) */
.logo-mark { display: block; flex-shrink: 0; }
.logo-doc { fill: var(--logo-doc); }
.logo-fold { fill: var(--accent-solid); }
.logo-line { fill: var(--bg-base); }
.logo-halo { fill: var(--bg-base); stroke: var(--bg-base); stroke-width: 7; }
.logo-halo circle { stroke-width: 3.6; }
.logo-share { fill: var(--accent-solid); stroke: var(--accent-solid); }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.nav-links > a, .nav-dropdown > a {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
}
.nav-links > a:hover, .nav-dropdown > a:hover, .nav-links > a:focus-visible, .nav-dropdown > a:focus-visible,
.nav-dropdown:hover > a { background: var(--bg-hover); color: var(--text-primary); }
.nav-links a.active { color: var(--text-primary); }
.nav-dropdown > a::after {
  content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: .7;
}
.nav-dropdown { position: relative; }
.nav-dropdown-panel {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 8px; display: none; flex-direction: column; gap: 2px;
}
.nav-dropdown::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel { display: flex; }
.nav-dropdown-panel a { display: flex; flex-direction: column; gap: 1px; padding: 9px 10px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.nav-dropdown-panel a small { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.nav-dropdown-panel a:hover, .nav-dropdown-panel a:focus-visible { background: var(--bg-hover); }
.nav-dropdown-more { color: var(--accent-blue); }
.nav-links > .nav-mobile-cta { display: none; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.theme-toggle {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-subtle);
  background: var(--bg-elevated); color: var(--text-secondary); font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { color: var(--text-primary); border-color: var(--border-strong); }
.nav-toggle { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), opacity var(--transition);
}
.btn:active { transform: translateY(1px); }
/* Monochrome-inverted primary: the accent stays reserved for links, focus and highlights. */
.btn-primary { background: var(--text-primary); color: var(--bg-base); }
.btn-primary:hover { opacity: .86; }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-hover); }
.btn-outline { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--bg-hover); border-color: var(--text-muted); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-hover); }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; border-radius: 12px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Page head (every non-landing page) ---------- */
.page-head { padding-top: 26px; padding-bottom: 22px; }
.page-head h1 { font-size: 38px; letter-spacing: -0.03em; margin-top: 10px; }
.page-head .lead { color: var(--text-secondary); font-size: 16.5px; line-height: 1.55; max-width: 680px; margin-top: 10px; }
.page-head.center { text-align: center; padding-top: 44px; }
.page-head.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding-top: 16px; font-size: 13px; color: var(--text-muted); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.breadcrumbs li + li::before { content: '/'; margin-right: 6px; color: var(--border-strong); }
.breadcrumbs a:hover, .breadcrumbs a:focus-visible { color: var(--text-primary); }
.breadcrumbs [aria-current="page"] { color: var(--text-secondary); }

/* ---------- Landing hero ---------- */
/* The first screen is a complete composition on any display: the hero
   fills the viewport below the 60px header, content vertically centred, so
   the fold never lands halfway through the next section. Short windows and
   phones fall back to natural flow. */
.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 40px 0 28px; min-height: calc(100vh - 60px); }
@supports (height: 100svh) { .hero { min-height: calc(100svh - 60px); } }
.hero-inner { width: 100%; margin: auto; }
/* The hero column runs wider than the rest of the page and the type scales
   with the screen, so a large monitor gets a larger composition, not a small
   one floating in black. */
.hero h1 { font-size: clamp(44px, 4.3vw, 74px); }
.hero .lead { font-size: clamp(16px, 1.15vw, 20px); max-width: 34em; }
.demo { font-size: clamp(12px, 0.75vw, 14px); }
/* Bottom band: four entry points that make the product's scope visible
   without scrolling, and anchor the fold. */
.hero-strip { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 36px; }
.strip-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-width: 0;
  border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-surface);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.strip-item:hover, .strip-item:focus-visible { border-color: var(--border-strong); background: var(--bg-elevated); transform: translateY(-1px); }
.strip-item .mode-icon { margin: 0; width: 38px; height: 38px; flex-shrink: 0; }
.strip-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.strip-text strong { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.strip-text span { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-height: 700px) { .hero { min-height: 0; } }
@media (max-width: 1100px) { .hero-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .hero { min-height: 0; padding: 48px 0 40px; }
  .hero-strip { display: none; } /* the mode cards follow immediately on phones */
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000 20%, transparent 80%);
}
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero h1 { font-size: 58px; letter-spacing: -0.038em; line-height: 1.02; margin-top: 16px; }
.hero h1 .accent { color: var(--accent-blue); }
.hero .lead { font-size: 18px; color: var(--text-secondary); line-height: 1.55; max-width: 520px; margin-top: 18px; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.btn-hero { height: 52px; padding: 0 28px; font-size: 16px; min-width: 220px; }
.hero-note { margin-top: 14px; font-size: 13.5px; color: var(--text-muted); }
.hero-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 24px; font-size: 13px; color: var(--text-muted); }
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* The signature: a mock log viewer that "types" itself in, then produces a link. */
.hero-visual { position: relative; }
.hero-visual::before {
  content: ''; position: absolute; inset: -10% -6%; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 60% 40%, var(--accent-glow), transparent 62%);
  filter: blur(30px);
}
.demo {
  position: relative; z-index: 1; background: var(--bg-surface); border: 1px solid var(--border-strong);
  border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; font-family: var(--font-mono); font-size: 12.5px;
}
.demo-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-elevated); }
.demo-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.demo-bar .dot:nth-child(1) { background: #ff5f57; } .demo-bar .dot:nth-child(2) { background: #febc2e; } .demo-bar .dot:nth-child(3) { background: #28c840; }
.demo-title { margin-left: 8px; color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-log { list-style: none; padding: 14px 0; line-height: 1.75; }
.demo-log li { display: grid; grid-template-columns: 34px 1fr; padding: 0 14px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(4px); animation: demo-in .35s ease forwards; }
.demo-log li:nth-child(1) { animation-delay: .25s; } .demo-log li:nth-child(2) { animation-delay: .5s; }
.demo-log li:nth-child(3) { animation-delay: .8s; } .demo-log li:nth-child(4) { animation-delay: 1.1s; }
.demo-log li:nth-child(5) { animation-delay: 1.35s; } .demo-log li:nth-child(6) { animation-delay: 1.7s; }
.demo-log li:nth-child(7) { animation-delay: 1.95s; } .demo-log li:nth-child(8) { animation-delay: 2.2s; } .demo-log li:nth-child(9) { animation-delay: 2.45s; }
.demo-log .ln { color: var(--text-muted); text-align: right; padding-right: 12px; user-select: none; }
.demo-log .ts { color: var(--text-muted); }
.demo-log .lv { display: inline-block; min-width: 46px; font-weight: 700; }
.demo-log .lv-info { color: var(--log-info); } .demo-log .lv-warn { color: var(--log-warn); } .demo-log .lv-error { color: var(--log-error); }
.demo-log li.hit { background: rgba(248, 113, 113, 0.07); }
.demo-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px;
  border-top: 1px solid var(--border-subtle); background: var(--bg-elevated);
  opacity: 0; transform: translateY(4px); animation: demo-in .4s ease 2.2s forwards;
}
.demo-link { display: inline-flex; align-items: center; gap: 0; padding: 7px 10px; border-radius: 8px; background: var(--bg-base); border: 1px solid var(--border-strong); color: var(--text-primary); font-size: 12.5px; }
.demo-link .k { color: var(--text-muted); }
.demo-pill { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 11.5px; }
.demo-copied { margin-left: auto; color: var(--ok); font-size: 12px; font-weight: 600; opacity: 0; animation: demo-in .3s ease 2.9s forwards; }
@keyframes demo-in { to { opacity: 1; transform: translateY(0); } }

/* ---------- Cards ---------- */
.card-link, .mode-card, .tool-card, .use-case {
  position: relative; display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 20px;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.mode-card::after, .tool-card::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent-solid);
  transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
a.mode-card:hover, a.tool-card:hover, a.mode-card:focus-visible, a.tool-card:focus-visible {
  border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md);
}
a.mode-card:hover::after, a.tool-card:hover::after, a.mode-card:focus-visible::after, a.tool-card:focus-visible::after { transform: scaleX(1); }

.mode-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mode-icon {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 6px;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--accent-blue);
}
.mode-card h3 { font-size: 17px; }
.mode-card p { color: var(--text-secondary); font-size: 14px; line-height: 1.5; flex: 1; }
.mode-card .go { font-size: 13px; font-weight: 600; color: var(--accent-blue); margin-top: 4px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tool-card { padding: 18px; gap: 6px; border-radius: 12px; }
.tool-card .cat, .use-case .cat {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.tool-card h3 { font-size: 15.5px; }
.tool-card p { color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; }
.use-case h3 { font-size: 16px; }
.use-case p { color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.use-case code { font-size: 12px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); padding: 1px 5px; border-radius: 5px; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; background: var(--bg-base); }
.step { padding: 26px; border-right: 1px solid var(--border-subtle); }
.step:last-child { border-right: 0; }
.step .num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent-blue); margin-bottom: 14px; }
.step h3 { font-size: 17px; margin-bottom: 8px; }
.step p { color: var(--text-secondary); font-size: 14px; line-height: 1.55; }

/* ---------- Share mode switcher ---------- */
.share-tabs {
  display: inline-flex; gap: 4px; padding: 4px; margin: 2px 0 18px;
  border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-surface);
}
.share-tab { padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); transition: background var(--transition), color var(--transition); }
.share-tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.share-tab.active { background: var(--text-primary); color: var(--bg-base); }

/* ---------- Share form ---------- */
.share-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.share-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-sm); }
.share-card textarea {
  width: 100%; min-height: 440px; resize: vertical; tab-size: 2;
  border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--bg-base); color: var(--text-primary);
  padding: 16px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6;
}
.share-card textarea:focus { outline: 2px solid var(--accent-blue); outline-offset: -1px; }
.form-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.form-fields { display: flex; gap: 12px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .form-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.field select, .select {
  height: 40px; min-width: 160px; padding: 0 34px 0 12px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--bg-elevated) var(--select-chevron) no-repeat right 11px center; color: var(--text-primary);
  appearance: none; -webkit-appearance: none; font-size: 14px; cursor: pointer;
}
.field select:hover, .select:hover { border-color: var(--text-muted); }
.form-actions { display: flex; gap: 8px; margin-left: auto; }
.form-option { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.45; }
.form-option input { margin-top: 3px; accent-color: var(--accent-solid); }
.meta-strip { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

.notice {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 10px; margin-bottom: 14px;
  border: 1px solid var(--border-subtle); background: var(--bg-elevated); color: var(--text-secondary); font-size: 13.5px; line-height: 1.5;
}
.notice::before { content: 'i'; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; background: var(--bg-hover); color: var(--text-secondary); }
.notice-warning { border-color: rgba(245, 158, 11, 0.4); color: var(--accent-warning); background: rgba(245, 158, 11, 0.08); }
.notice-warning::before { content: '!'; background: var(--accent-warning); color: #000; }
.notice strong { font-weight: 600; }
/* Legacy alert classes still used by a few templates and tool scripts. */
.alert { border-radius: 10px; padding: 11px 13px; font-size: 13.5px; line-height: 1.5; border: 1px solid; margin-bottom: 14px; }
.alert-warning { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.4); color: var(--accent-warning); }
.alert-danger { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.4); color: var(--accent-danger); }
.alert-info { background: var(--bg-elevated); border-color: var(--border-subtle); color: var(--text-secondary); }

.tool-error { display: none; color: var(--accent-danger); font-size: 13px; margin-top: 10px; }
.tool-error.show { display: block; }

.result-box { display: none; margin-top: 16px; padding: 16px; border-radius: 12px; border: 1px solid rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.06); }
.result-box.show { display: block; }
.result-box strong { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.result-box strong::before { content: '✓'; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #000; font-size: 12px; font-weight: 700; }
.result-url { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.result-url input {
  flex: 1; min-width: 200px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--bg-base); color: var(--text-primary); font-family: var(--font-mono); font-size: 13px;
}
.result-expiry { font-size: 12.5px; color: var(--text-muted); margin-top: 8px; font-family: var(--font-mono); }

.side-stack { display: flex; flex-direction: column; gap: 14px; }
.side-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 18px; }
.side-card h3 { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.side-card p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }
.side-card ul { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.45; }
.side-card li { display: flex; gap: 9px; }
.side-card li::before { content: '→'; color: var(--accent-blue); flex-shrink: 0; }
.side-card .btn { margin-top: 12px; }

/* ---------- Share viewer ---------- */
.viewer-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 0 14px; }
.viewer-head h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 26px; margin-top: 8px; }
.type-badge {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--accent-blue);
}
.viewer-head .meta-strip { margin-top: 8px; }
.expiry-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
}
.viewer-toolbar {
  position: sticky; top: 60px; z-index: 20; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px; margin-bottom: 12px; border: 1px solid var(--border-subtle); border-radius: 12px;
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.toolbar-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.toolbar-group.right { margin-left: auto; }
.viewer-toolbar input[type="search"] {
  height: 34px; min-width: 220px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--bg-elevated); font-size: 13px;
}
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); padding: 0 6px; }
.toggle input { accent-color: var(--accent-solid); }
.viewer-pane { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-surface); height: calc(100vh - 320px); min-height: 420px; overflow: auto; }
.viewer-pane.fullscreen { position: fixed; inset: 0; z-index: 500; height: 100vh; min-height: 0; border-radius: 0; }
.viewer-pane .CodeMirror { height: 100%; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; background: transparent; }
.viewer-pane .CodeMirror-gutters { background: transparent; border-right: 1px solid var(--border-subtle); }
.viewer-note { color: var(--text-muted); font-size: 13px; margin-top: 14px; }

/* ---------- Tools ---------- */
.cat-section { padding: 26px 0 8px; }
.cat-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.cat-head h2 { font-size: 22px; }
.cat-head p { color: var(--text-secondary); font-size: 14px; }

.tool-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.tool-panel { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-sm); }
.tool-panel + .tool-panel { margin-top: 20px; }
.tool-io { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#tool-app label { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 11px !important; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted) !important; }
#tool-app textarea, #tool-app pre {
  width: 100%; min-height: max(280px, 38vh); border-radius: 12px; border: 1px solid var(--border-subtle);
  background: var(--bg-base); color: var(--text-primary); padding: 14px; font-family: var(--font-mono);
  font-size: 13px; line-height: 1.55; overflow: auto; white-space: pre-wrap; word-break: break-word; resize: vertical;
}
#tool-app textarea:focus { outline: 2px solid var(--accent-blue); outline-offset: -1px; }
#tool-app select, #tool-app input[type="text"], #tool-app input[type="number"], #tool-app input[type="datetime-local"], #tool-app input:not([type]) {
  height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text-primary); font-size: 14px;
}
#tool-app select { appearance: none; -webkit-appearance: none; padding-right: 32px; background: var(--bg-elevated) var(--select-chevron) no-repeat right 10px center; }
#tool-app input[type="checkbox"], #tool-app input[type="radio"] { accent-color: var(--accent-solid); }
.tool-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.badge-error { background: rgba(239, 68, 68, 0.15); color: var(--accent-danger); }
.badge-warning { background: rgba(245, 158, 11, 0.15); color: var(--accent-warning); }
.badge-info { background: rgba(59, 130, 246, 0.15); color: var(--accent-info); }
.check-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13.5px; }
.check-row:last-child { border-bottom: none; }

.tool-docs h2 { font-size: 20px; margin: 26px 0 10px; }
.tool-docs h2:first-child { margin-top: 0; }
.tool-docs .example-io { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 8px; }
.tool-docs .example-io pre { min-height: 0; margin: 0; }
.tool-docs .example-io .arrow { color: var(--text-muted); font-family: var(--font-mono); }
.related-list { display: flex; flex-direction: column; gap: 6px; }
.related-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border-subtle); background: var(--bg-elevated); font-size: 13.5px; font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}
.related-list a::after { content: '→'; color: var(--text-muted); }
.related-list a:hover, .related-list a:focus-visible { border-color: var(--border-strong); background: var(--bg-hover); }

/* ---------- Content ---------- */
.content-block { font-size: 15px; line-height: 1.7; color: var(--text-secondary); max-width: 720px; }
.content-block h2 { font-size: 20px; color: var(--text-primary); margin: 28px 0 10px; }
.content-block h2:first-child { margin-top: 0; }
.content-block ol, .content-block ul { padding-left: 20px; margin: 8px 0; }
.content-block li { margin: 4px 0; }
.content-block a { color: var(--accent-blue); }
.content-block code, .tool-docs code { font-size: 12.5px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); padding: 1px 5px; border-radius: 5px; }
.content-block pre, .tool-docs pre { background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px; overflow: auto; font-size: 12.5px; line-height: 1.55; }
.faq-list { max-width: 760px; }
.faq-item { padding: 16px 0; border-bottom: 1px solid var(--border-subtle); }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { font-size: 15.5px; color: var(--text-primary); margin-bottom: 6px; }
.faq-item p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }

/* ---------- State pages (404 / 410 / 500) ---------- */
.state-page { max-width: 560px; margin: 0 auto; text-align: center; padding: 96px 24px; }
.state-page .code {
  display: inline-grid; place-items: center; width: 68px; height: 68px; border-radius: 18px; margin-bottom: 20px;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--accent-blue);
}
.state-page h1 { font-size: 30px; letter-spacing: -0.03em; margin-bottom: 10px; }
.state-page p { color: var(--text-secondary); font-size: 16px; line-height: 1.55; }
.state-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border-subtle); padding: 48px 0 28px; margin-top: 72px; color: var(--text-muted); font-size: 13px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 24px; padding-bottom: 28px; margin-bottom: 20px; border-bottom: 1px solid var(--border-subtle); }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 4px; }
.footer-col a { font-size: 13px; color: var(--text-muted); transition: color var(--transition); }
.footer-col a:hover, .footer-col a:focus-visible { color: var(--text-primary); }
.footer-brand .brand { font-size: 18px; }
.footer-brand p { font-size: 13px; line-height: 1.55; margin-top: 12px; max-width: 280px; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links a:hover { color: var(--text-primary); }
.footer-bottom span { font-size: 12.5px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 1000;
  background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-strong);
  padding: 10px 18px; border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 13.5px;
  opacity: 0; transition: opacity var(--transition), transform var(--transition);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero-visual, .demo, .demo-log li > span { min-width: 0; }
  .hero .lead { max-width: 620px; }
  .hero-visual { max-width: 720px; }
  .share-layout, .tool-layout { grid-template-columns: 1fr; }
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .step:last-child { border-bottom: 0; }
}
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) { .tool-io { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .section { padding-top: 48px; padding-bottom: 48px; }
  .section-head h2 { font-size: 26px; }
  .hero { padding: 48px 0 40px; }
  .hero h1 { font-size: 38px; }
  .hero .lead { font-size: 16px; }
  .hero-cta .btn { flex: 1; }
  .page-head h1 { font-size: 30px; }
  .page-head.center { padding-top: 28px; }
  .mode-grid { grid-template-columns: 1fr; }
  .nav-links {
    position: fixed; top: 60px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px; margin: 0; background: var(--bg-elevated); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg);
  }
  .nav-links.open { display: flex; }
  .nav-dropdown > a::after { display: none; }
  .nav-dropdown-panel { position: static; display: flex; box-shadow: none; border: 0; padding: 0 0 8px 10px; min-width: 0; }
  .nav-dropdown::before { display: none; }
  .nav-links > .nav-mobile-cta { display: flex; justify-content: center; margin-top: 6px; height: 42px; border-radius: 10px; background: var(--text-primary); color: var(--bg-base) !important; font-weight: 600; }
  .nav-cta { display: none; }
  .nav-toggle {
    display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; margin-left: auto;
    border-radius: 8px; border: 1px solid var(--border-subtle); background: var(--bg-elevated); color: var(--text-primary); cursor: pointer; font-size: 16px;
  }
  .nav-actions { margin-left: 0; }
  .share-card { padding: 14px; }
  .share-card textarea { min-height: 320px; }
  .form-toolbar { align-items: stretch; }
  .form-fields { width: 100%; }
  .field { flex: 1; }
  .field select { width: 100%; min-width: 0; }
  .form-actions { width: 100%; margin-left: 0; }
  .form-actions .btn { flex: 1; }
  .viewer-toolbar { position: static; }
  .viewer-toolbar input[type="search"] { flex: 1; min-width: 0; }
  .toolbar-group.right { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .toolbar-group.right .btn { width: 100%; }
  .viewer-pane { height: 70vh; min-height: 0; }
  .tool-docs .example-io { grid-template-columns: 1fr; }
  .tool-docs .example-io .arrow { transform: rotate(90deg); justify-self: center; }
  .state-page { padding: 64px 20px; }
  .site-footer { margin-top: 48px; }
}
@media (max-width: 560px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .demo-log li, .demo-foot, .demo-copied { opacity: 1; transform: none; }
}

/* ---------- Icons ---------- */
.icon { display: inline-block; flex-shrink: 0; vertical-align: -2px; }
.btn .icon { width: 15px; height: 15px; }
.theme-toggle .icon-sun, :root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: inline-block; }

/* ---------- Small affordances ---------- */
kbd {
  display: inline-block; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border-strong);
  background: var(--bg-elevated); font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); line-height: 1.5;
}
.kbd-hint { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; }
.field-hint { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ok); margin-left: 6px; }
.mask-hint:empty { display: none; }
.mask-hint.ok { color: var(--ok); }
.mask-hint.warn { color: var(--accent-warning); }
.share-card textarea.dragover { outline: 2px dashed var(--accent-blue); outline-offset: -2px; background: rgba(59, 130, 246, 0.05); }

/* ---------- FAQ accordion ---------- */
details.faq-item summary { list-style: none; display: flex; align-items: center; gap: 14px; cursor: pointer; }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::marker { content: ''; display: none; }
/* Chevron sits in front of the question: points right when closed, down when open. */
details.faq-item summary::before {
  content: ''; width: 7px; height: 7px; flex-shrink: 0; margin-left: 3px;
  border-right: 2px solid var(--accent-blue); border-bottom: 2px solid var(--accent-blue);
  transform: rotate(-45deg); transition: transform var(--transition);
}
details.faq-item[open] summary::before { transform: rotate(45deg); }
details.faq-item summary:hover h3 { color: var(--accent-blue); }
details.faq-item h3 { margin: 0; transition: color var(--transition); }
details.faq-item p { margin-top: 10px; padding-left: 24px; }

/* ---------- Closing CTA band ---------- */
.cta-band {
  text-align: center; padding: 80px 24px;
  border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
  background: radial-gradient(ellipse 60% 90% at 50% 110%, var(--accent-glow), transparent 70%), var(--bg-surface);
}
.cta-band h2 { font-size: 36px; letter-spacing: -0.032em; max-width: 720px; margin: 12px auto 24px; }
.cta-band .hero-cta { justify-content: center; margin-top: 0; }
.cta-band .hero-meta { justify-content: center; margin-top: 20px; }

/* ---------- Tools filter ---------- */
.tools-filter {
  display: flex; align-items: center; gap: 10px; max-width: 540px; height: 46px; padding: 0 14px; margin: 4px 0 10px;
  border-radius: 12px; border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-muted);
}
.tools-filter:focus-within { border-color: var(--accent-blue); }
.tools-filter input { flex: 1; height: 100%; border: 0; background: transparent; font-size: 14.5px; color: var(--text-primary); outline: none; }
.filter-empty { color: var(--text-secondary); padding: 28px 0; }

/* ---------- Viewer: log highlighting and line permalinks ---------- */
.cm-log-error { color: var(--log-error); font-weight: 600; }
.cm-log-warn { color: var(--log-warn); font-weight: 600; }
.cm-log-info { color: var(--log-info); }
.cm-log-debug { color: var(--text-muted); }
.cm-log-time { color: var(--text-muted); }
.cm-log-ip { color: #a78bfa; }
:root[data-theme="light"] .cm-log-ip { color: #7c3aed; }
.cm-log-method { color: var(--ok); font-weight: 600; }
.cm-log-key { color: var(--text-secondary); }
.log-line-error { background: rgba(248, 113, 113, 0.08); }
.log-line-warn { background: rgba(251, 191, 36, 0.07); }
.log-line-active { background: rgba(59, 130, 246, 0.14); box-shadow: inset 3px 0 0 var(--accent-blue); }
.viewer-pane .CodeMirror-linenumber { cursor: pointer; }
.viewer-pane .CodeMirror-linenumber:hover { color: var(--accent-blue); }
.search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap .icon { position: absolute; left: 10px; color: var(--text-muted); pointer-events: none; }
.viewer-toolbar .search-wrap input[type="search"] { padding-left: 32px; }
.search-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
@media (max-width: 720px) { .search-wrap { flex: 1; } .search-wrap input { width: 100%; } .kbd-hint { display: none; } }

/* ---------- HTML Viewer (wide tool) ---------- */
.tool-layout-wide { grid-template-columns: 1fr; }
.tool-layout-wide .side-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hv-toolbar { margin: 0 0 12px; align-items: center; }
.hv-status { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.hv-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; height: 70vh; min-height: 480px; }
.hv-editor { border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; background: var(--bg-base); min-width: 0; }
.hv-editor .CodeMirror { height: 100%; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; background: transparent; }
.hv-editor .CodeMirror-gutters { background: transparent; border-right: 1px solid var(--border-subtle); }
.hv-preview { border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; background: #fff; min-width: 0; }
.hv-preview iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) {
  .hv-split { grid-template-columns: 1fr; height: auto; }
  .hv-editor, .hv-preview { height: 48vh; min-height: 320px; }
  .hv-status { width: 100%; margin-left: 0; }
}

/* The generic tool textarea/pre styling above must not reach CodeMirror,
   which renders every line as a <pre> (min-height: 380px per line pushed
   everything but line 1 out of view). */
#tool-app .CodeMirror pre {
  min-height: 0; width: auto; padding: 0 4px; border: 0; border-radius: 0; background: transparent;
  overflow: visible; resize: none; font-size: inherit; line-height: inherit; color: inherit; word-break: normal;
}
#tool-app .CodeMirror textarea { min-height: 0; width: 1000px; padding: 0; border: 0; resize: none; }

/* ---------- Tool pages: wider canvas, compact header, shell bar, full screen ---------- */
[hidden] { display: none !important; }
body.tool-page .page-head { padding-top: 14px; padding-bottom: 12px; }
body.tool-page .page-head h1 { font-size: 30px; margin-top: 6px; }
body.tool-page .page-head .lead { font-size: 15px; margin-top: 6px; max-width: 820px; }
body.tool-page .breadcrumbs { padding-top: 12px; }
.tool-shell { padding: 0; overflow: hidden; }
.tool-shell-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 10px 6px 16px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-elevated);
}
.tool-shell-note { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.tool-shell-note .icon { color: var(--ok); }
.tool-shell #tool-app { padding: 16px; }
.tool-shell.is-fullscreen {
  position: fixed; inset: 0; z-index: 600; border: 0; border-radius: 0; box-shadow: none;
  display: flex; flex-direction: column; background: var(--bg-base);
}
.tool-shell.is-fullscreen #tool-app { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px; }
/* Beats the #tool-app id rule above: in full screen the work areas take the viewport. */
.tool-shell.is-fullscreen #tool-app .tool-io textarea, .tool-shell.is-fullscreen #tool-app .tool-io pre,
.tool-shell.is-fullscreen #tool-app > div > textarea, .tool-shell.is-fullscreen #tool-app > textarea { min-height: calc(100vh - 220px); }
.tool-shell.is-fullscreen .hv-split { height: calc(100vh - 150px); min-height: 0; }
body.tool-fullscreen { overflow: hidden; }
.hv-split { height: min(74vh, 860px); }
@media (max-width: 720px) {
  .tool-shell-note { display: none; }
  .tool-shell-bar { justify-content: flex-end; }
  .tool-shell.is-fullscreen .hv-split { height: auto; }
}

/* Tool scripts lay out inline controls with .row (a class the old form
   stylesheet defined). Restore it here so fields sit side by side. */
#tool-app .row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
#tool-app .row > div { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Tool results read as results, not as more inputs ---------- */
#tool-app pre { background: var(--bg-surface); border-style: dashed; }
#tool-app pre:not(:empty) { border-style: solid; }
#tool-app pre:empty::before { content: 'Output appears here'; color: var(--text-muted); font-family: var(--font-sans); font-size: 13px; }
.tool-shell-actions { display: inline-flex; align-items: center; gap: 6px; }
.tool-shell-kbd { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; font-size: 12px; color: var(--text-muted); }
@media (max-width: 720px) { .tool-shell-kbd { display: none; } }

#tool-app .tool-actions.is-top { margin: 0 0 14px; }

/* ---------- Segmented mode toggle (Encode | Decode) ---------- */
.segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-elevated); }
.segmented .btn { height: 32px; padding: 0 14px; border-radius: 7px; border: 0; }
.segmented .btn-secondary { background: transparent; color: var(--text-secondary); }
.segmented .btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); }
/* Inline rows (regex pattern + flags) must be able to shrink on phones. */
#tool-app .row > input { min-width: 0; }

/* ---------- Tutorials ---------- */
.tutorial-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; padding-bottom: 64px; }
.tutorial-body { max-width: 720px; min-width: 0; font-size: 15.5px; line-height: 1.7; color: var(--text-secondary); }
.tutorial-body h2 { font-size: 22px; letter-spacing: -0.02em; color: var(--text-primary); margin: 44px 0 14px; }
.tutorial-body h3 { color: var(--text-primary); }
.tutorial-body pre { background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px 14px; overflow: auto; font-size: 12.5px; line-height: 1.55; margin-top: 10px; color: var(--text-primary); }
.tutorial-intro { font-size: 17px; line-height: 1.65; color: var(--text-primary); }
.learn-box { margin-top: 28px; padding: 18px 20px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--bg-surface); }
.learn-box h2 { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
.learn-list { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.learn-list li { display: flex; gap: 10px; align-items: flex-start; }
.learn-list .icon { flex-shrink: 0; margin-top: 4px; color: var(--accent-blue); }
.tut-steps { list-style: none; }
.tut-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-top: 1px solid var(--border-subtle); scroll-margin-top: 80px; }
.tut-step:last-child { border-bottom: 1px solid var(--border-subtle); }
.tut-step-num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent-blue); padding-top: 3px; }
.tut-step-body h3 { font-size: 16px; margin-bottom: 6px; }
.tut-step-body p { font-size: 15px; }
.tut-step-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; font-size: 13.5px; color: var(--text-muted); }
.tut-step-cta .btn .icon { margin-left: 8px; }
.problem { padding: 14px 16px; margin-top: 10px; border-left: 3px solid var(--border-strong); background: var(--bg-surface); border-radius: 0 10px 10px 0; }
.problem h3 { font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; margin-bottom: 6px; }
.problem p { font-size: 14.5px; }
.tutorial-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 48px; }
.tutorial-pager a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-surface); color: var(--text-primary); font-weight: 500; font-size: 14px; line-height: 1.4; }
.tutorial-pager a:hover, .tutorial-pager a:focus-visible { border-color: var(--border-strong); background: var(--bg-hover); }
.tutorial-pager a small { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.tutorial-pager .pager-next { text-align: right; grid-column: 2; }
.tutorial-aside { position: sticky; top: 76px; }
.side-card-cta { border-color: var(--border-strong); }
.toc { list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; counter-reset: toc; }
.toc a { color: var(--text-secondary); display: flex; gap: 10px; align-items: baseline; }
.toc a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.toc a:hover, .toc a:focus-visible { color: var(--text-primary); }
.tutorial-aside .related-list a { white-space: normal; line-height: 1.4; }
.tutorial-card { display: flex; flex-direction: column; }
.tutorial-card .card-more { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 500; color: var(--accent-blue); }
.tool-docs-more { margin-top: 10px; }
section[id] { scroll-margin-top: 80px; }
@media (max-width: 960px) {
  .tutorial-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tutorial-aside { position: static; }
}
@media (max-width: 600px) {
  .tutorial-pager { grid-template-columns: 1fr; }
  .tutorial-pager .pager-next { grid-column: auto; text-align: left; }
  .tut-step { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
}

/* ---------- Layout stability ----------
   Tool markup is built by a deferred script; reserving the work area's
   height keeps the docs panel and aside from jumping when it appears (CLS). */
#tool-app { min-height: 440px; }
.tool-layout-wide #tool-app { min-height: 600px; }
#tool-app > p:only-child { color: var(--text-muted); font-size: 13px; }

/* ---------- Site documents (About, Privacy, Terms) ---------- */
.site-doc { padding-bottom: 72px; }
.site-doc .doc-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.site-doc h2 { scroll-margin-top: 80px; }
.site-doc ul { padding-left: 20px; }
.site-doc li { margin: 6px 0; }

/* ---------- Ad units (render only when configured, see partials/ad.ejs) ----------
   Height is reserved so a late ad never shifts content; unfilled units collapse. */
.ad-unit { display: flex; flex-direction: column; gap: 6px; margin: 22px 0; min-height: 290px; }
.ad-unit-sidebar { min-height: 270px; margin: 0; }
.ad-unit .ad-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.ad-unit ins { flex: 1; min-height: 250px; }
.ad-unit:has(ins[data-ad-status="unfilled"]) { display: none; }
.tool-main .ad-unit { margin: 20px 0 0; }

/* ---------- Cron example pages ---------- */
.cron-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 4px 0 26px; }
.cron-expr { max-width: 100%; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: clamp(18px, 3vw, 34px); font-weight: 500; letter-spacing: .02em; padding: 12px 18px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-surface); color: var(--text-primary); }
.cron-fields { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 4px; }
.cron-fields th, .cron-fields td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.cron-fields th { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.cron-fields td:first-child { font-family: var(--font-mono); color: var(--text-primary); white-space: nowrap; }
.cron-runs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 10px; }
.cron-runs .runs-col { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 14px 16px; background: var(--bg-surface); }
.cron-runs h3 { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.cron-runs ol { list-style: none; font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); display: flex; flex-direction: column; gap: 5px; }
.cron-runs p { font-size: 13px; color: var(--text-muted); }
.variations { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.variations li { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 14px; align-items: baseline; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-surface); }
.variations code { font-size: 13px; color: var(--text-primary); }
.variations a { color: var(--accent-blue); }
.cron-grid .tool-card code { font-family: var(--font-mono); font-size: 13px; color: var(--accent-blue); }
.related-list a code { font-size: 12px; color: var(--text-muted); margin-left: 6px; }
.platform-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.platform-table th, .platform-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.platform-table th { color: var(--text-primary); font-weight: 600; }
.table-scroll { overflow-x: auto; margin: 8px 0 4px; }
@media (max-width: 600px) { .variations li { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Reference pages (HTTP codes, CIDR) ---------- */
.cause-list { padding-left: 20px; }
.cause-list li { margin: 6px 0; }
.http-grid .code-num { font-family: var(--font-mono); color: var(--accent-blue); margin-right: 6px; }
.cidr-table td:first-child a { font-family: var(--font-mono); font-weight: 600; }
@media (min-width: 961px) { .footer-grid { grid-template-columns: 1.4fr repeat(6, 1fr); } }

/* ---------- Private room creation form ---------- */
.private-form .field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.pin-row { display: flex; gap: 8px; align-items: center; }
.pin-row input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--bg-base); color: var(--text-primary); font-family: var(--font-mono); font-size: 16px; letter-spacing: .08em; }
.pin-row input:focus { outline: none; border-color: var(--accent-blue); }
.pin-row .btn span { margin-left: 6px; }
.field-hint { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; }
.private-form .form-toolbar { margin-top: 18px; }
.private-next { margin-top: 12px; font-size: 13px; color: var(--text-muted); }
.private-form .tool-error:empty { display: none; }

/* Private form: the toolbar must wrap and nothing may force the card wider than the screen. */
.share-layout > * { min-width: 0; }
.private-form .form-toolbar { flex-wrap: wrap; gap: 12px 16px; }
.private-form .form-fields, .private-form .form-actions { min-width: 0; }
@media (max-width: 600px) {
  .private-form .form-fields, .private-form .form-fields .field, .private-form select { width: 100%; }
  .private-form .form-actions, .private-form .form-actions .btn { width: 100%; justify-content: center; }
}

/* ---------- Full-screen tool bar: brand, tool name, Esc hint ----------
   In normal mode the site header carries the logo, so these stay hidden;
   in full screen the shell bar is the only chrome and must say where you are. */
.tool-shell-left { display: inline-flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.tool-shell-brand, .tool-shell-divider, .tool-shell-title, .tool-shell-esc { display: none; }
.tool-shell.is-fullscreen .tool-shell-bar { min-height: 52px; padding: 0 12px 0 16px; justify-content: space-between; }
.tool-shell.is-fullscreen .tool-shell-brand { display: inline-flex; font-size: 16px; flex-shrink: 0; }
.tool-shell.is-fullscreen .tool-shell-divider { display: block; width: 1px; height: 20px; background: var(--border-strong); flex-shrink: 0; }
.tool-shell.is-fullscreen .tool-shell-title { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-shell.is-fullscreen .tool-shell-note { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-shell.is-fullscreen .tool-shell-esc { display: inline-block; margin-left: 8px; font-size: 10.5px; padding: 1px 5px; }
@media (max-width: 1100px) { .tool-shell.is-fullscreen .tool-shell-note { display: none; } }
@media (max-width: 720px) {
  .tool-shell.is-fullscreen .tool-shell-bar { justify-content: space-between; }
  .tool-shell.is-fullscreen .tool-shell-title, .tool-shell.is-fullscreen .tool-shell-divider { display: none; }
  .tool-shell.is-fullscreen .tool-shell-esc { display: none; }
}
@media (max-width: 480px) { .tool-shell.is-fullscreen .tool-shell-brand .brand-name { display: none; } }

.tool-shell-back { margin-left: 4px; white-space: nowrap; flex-shrink: 0; }
.tool-shell-back .back-short, .tool-shell-back .back-min { display: none; }
.tool-shell.is-fullscreen .tool-shell-back { color: var(--text-primary); border: 1px solid var(--border-strong); }
.tool-shell-left { overflow: hidden; }
@media (max-width: 720px) {
  .tool-shell-back { font-size: 12px; padding: 0 8px; }
  .tool-shell-back .back-full { display: none; }
  .tool-shell-back .back-short { display: inline; }
}
@media (max-width: 400px) {
  .tool-shell-back .back-short { display: none; }
  .tool-shell-back .back-min { display: inline; font-size: 14px; }
}

/* Small phones: the shell actions must fit beside the brand and Back button. */
@media (max-width: 480px) {
  #toolFullscreen .label { display: none; }
  #toolFullscreen { padding: 0 8px; }
  #toolExample { font-size: 12px; padding: 0 8px; }
  .tool-shell-actions { gap: 4px; }
}

/* ---------- Hero demo: continuous loop (public/js/hero-demo.js) ----------
   Without JS or with reduced motion the card keeps its one-shot entrance. */
.demo-bar { position: relative; }
.demo-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent-blue); opacity: .75; transition-property: width; transition-timing-function: linear; }
.demo-title .cursor { display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; background: var(--text-secondary); vertical-align: -2px; animation: demo-blink 1s steps(1) infinite; }
@keyframes demo-blink { 50% { opacity: 0; } }
.demo.is-live .demo-log { min-height: calc(1.75em * 9 + 28px); }
.demo.is-live .demo-log li { animation: none; opacity: 0; transform: translateY(5px); }
.demo.is-live .demo-log li.is-in { animation: demo-in .32s ease forwards; }
.demo.is-live .demo-log li.is-out { animation: demo-out .38s ease forwards; }
@keyframes demo-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } }
.demo.is-live .demo-log li.hit { background: transparent; box-shadow: inset 2px 0 0 transparent; transition: background .45s ease, box-shadow .45s ease; }
.demo.is-live .demo-log li.hit.is-lit { background: rgba(248, 113, 113, 0.09); box-shadow: inset 2px 0 0 var(--log-error); }
.demo.is-live .demo-copied { animation: none; opacity: 0; transition: opacity .3s ease, color .3s ease; }
.demo.is-live .demo-copied.is-in { opacity: 1; }
.demo.is-live .demo-copied.is-busy { color: var(--text-muted); font-weight: 500; }
.demo.is-live .demo-pill { transition: opacity .3s ease, transform .3s ease; }
.demo.is-live .demo-foot.is-pending .demo-pill { opacity: 0; transform: translateY(4px); }
.demo.is-live .demo-link .tok { display: inline-block; min-width: 11ch; font-variant-numeric: tabular-nums; }
.demo.is-live .demo-link .tok.is-empty { color: var(--text-muted); letter-spacing: .08em; }

/* ---------- Share composer focus mode (public/js/share-focus.js) ---------- */
.share-shell-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -18px -18px 14px; padding: 6px 10px 6px 16px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-elevated); border-radius: 16px 16px 0 0; min-height: 44px; }
.share-shell-left { display: inline-flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.share-shell-brand, .share-shell-tabs { display: none; }
.share-shell-actions { display: inline-flex; align-items: center; gap: 6px; }
.share-shell-esc { display: none; margin-left: 8px; font-size: 10.5px; padding: 1px 5px; }
.share-card.is-fullscreen { position: fixed; inset: 0; z-index: 600; border: 0; border-radius: 0; box-shadow: none; background: var(--bg-base); padding: 0 20px 20px; display: flex; flex-direction: column; overflow: auto; }
.share-card.is-fullscreen .share-shell-bar { position: sticky; top: 0; z-index: 2; margin: 0 -20px 16px; border-radius: 0; min-height: 52px; padding: 0 12px 0 16px; }
.share-card.is-fullscreen .share-shell-brand { display: inline-flex; font-size: 16px; flex-shrink: 0; }
.share-card.is-fullscreen .share-shell-tabs { display: inline-flex; margin: 0; }
.share-card.is-fullscreen .share-shell-esc { display: inline-block; }
.share-card.is-fullscreen > #shareCreateForm, .share-card.is-fullscreen > form { flex: 1; display: flex; flex-direction: column; min-height: 0; max-width: 1400px; width: 100%; margin: 0 auto; }
.share-card.is-fullscreen #shareContent { flex: 1; min-height: 40vh; resize: none; }
.share-card.is-fullscreen .private-form { justify-content: center; max-width: 640px; }
body.share-focus { overflow: hidden; }
@media (max-width: 720px) {
  .share-card.is-fullscreen .share-shell-tabs { display: none; }
  .share-card.is-fullscreen .share-shell-esc { display: none; }
  .share-card.is-fullscreen { padding: 0 14px 14px; }
  .share-card.is-fullscreen .share-shell-bar { margin: 0 -14px 12px; }
}
@media (max-width: 480px) { .share-card.is-fullscreen .share-shell-brand .brand-name { display: none; } }

/* Hero: the demo card's top edge lines up with the headline, not the column's centre. */
@media (min-width: 1025px) {
  .hero-inner { align-items: start; }
  .hero-visual { padding-top: 40px; }
}

/* ---------- Accessibility ----------
   Links inside running text are underlined (colour alone is not a cue);
   keyboard-focusable scroll regions show a ring. */
main p a:not(.btn), main li a:not(.btn), .faq-item a, .problem a, .tutorial-body a:not(.btn), .content-block a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
main p a:not(.btn):hover, main li a:not(.btn):hover, .content-block a:hover { text-decoration-color: currentColor; }
pre[tabindex="0"]:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* ---------- Code Share landing ---------- */
.code-landing-cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-bottom: 18px; }
.code-landing .code-demo { font-size: 13px; }
.code-landing .code-demo .demo-log li { animation: demo-in .35s ease forwards; }
.code-landing .code-demo .lv { min-width: 0; }

/* Long unbroken strings in prose (commands, URLs, tokens) wrap instead of widening the page. */
main p, main li, .faq-item p, .problem p, .tool-docs p { word-break: break-word; overflow-wrap: anywhere; }

/* Tool columns may never be wider than the screen: grid tracks and panels
   shrink to zero, and result rows wrap their long values. */
.tool-main, .tool-panel, #tool-app { min-width: 0; }
@media (max-width: 1024px) { .tool-layout { grid-template-columns: minmax(0, 1fr); } }
#tool-app .check-row { flex-wrap: wrap; row-gap: 2px; }
#tool-app .check-row > * { min-width: 0; overflow-wrap: anywhere; }

/* Hero type scale — declared last so it wins over the base hero rules above. */
.hero h1 { font-size: clamp(44px, 4.3vw, 74px); }
.hero .lead { font-size: clamp(16px, 1.15vw, 20px); max-width: 34em; }
.demo { font-size: clamp(12px, 0.75vw, 14px); }
@media (max-width: 720px) {
  .hero h1 { font-size: 38px; }
  .hero .lead { font-size: 16px; }
}

/* Below 1400px the strip's four columns get narrow: let the subtitles wrap
   to a second line rather than clip. */
@media (max-width: 1400px) {
  .strip-item { align-items: flex-start; }
  .strip-item .mode-icon { margin-top: 1px; }
  .strip-text span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
}