/* Shared components, one block per maud component in src/components/.
 * Tokens only: no raw colours. See web/DESIGN.md.
 *
 *   Structure: .page-header .breadcrumb .section(--tight, --band) .section-header .cta
 *   Actions:   .btn(--primary, --secondary, --ghost, --disabled) .badge .chip
 *   Content:   .card--product .app-strip .app-logo .feature-list .steps .callout
 *              .code-block .install-cmd .keys .data-table .spec-sheet .prose
 *   Chrome:    .site-header .brand .site-nav .nav-list .icon-btn .site-footer
 */

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: var(--sp-2) var(--sp-6);
  border: 1px solid transparent; border-radius: var(--radius);
  font: 600 var(--fs-base)/1.2 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.25s var(--ease), transform 0.18s var(--ease);
}
.btn--primary { background: var(--accent); color: var(--accent-text); box-shadow: var(--glow); }
.btn--primary:hover { background: var(--accent-hover); color: var(--accent-text); transform: translateY(-1px); }
.btn--secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--secondary:hover { color: var(--text); border-color: var(--text-muted); background: var(--surface); }
.btn--ghost { background: transparent; color: var(--link); padding-inline: var(--sp-3); }
.btn--ghost:hover { background: var(--surface); }
.btn--disabled {
  background: var(--surface); color: var(--text-muted); border: 1px dashed var(--border-strong);
  cursor: not-allowed; flex-direction: column; gap: 0;
}
.btn__note { font: 400 var(--fs-xs)/1.3 var(--font-sans); color: var(--text-muted); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 1px var(--sp-3); border-radius: 999px; border: 1px solid var(--border-strong);
  font: 600 var(--fs-xs)/1.7 var(--font-sans); color: var(--text-muted); white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--alpha { color: var(--straw); border-color: color-mix(in srgb, var(--straw) 45%, transparent); }
:root[data-theme="light"] .badge--alpha { color: var(--link); border-color: color-mix(in srgb, var(--link) 40%, transparent); }

/* ---------- Product cards: flat steel plates with a temper edge ---------- */
.card {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-6); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color 0.2s var(--ease), transform 0.25s var(--ease);
}
.card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.card__title { margin: 0; font: 800 var(--fs-xl)/1.1 var(--font-display); }
.card__kind { margin: 0; font-size: var(--fs-sm); color: var(--text-faint); }
.card__body { color: var(--text-muted); flex: 1; margin: var(--sp-2) 0 var(--sp-4); }
.card__link { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; text-decoration: none; align-self: flex-start; }
.card__link .icon { transition: transform 0.2s var(--ease); }
.card--product::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  border-radius: var(--radius) var(--radius) 0 0; background: var(--app-accent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
}
.card--product:hover, .card--product:focus-within { border-color: var(--border-strong); }
.card--product:hover::before, .card--product:focus-within::before { transform: scaleX(1); }
.card--product:hover .card__link .icon { transform: translateX(3px); }
/* Whole card clickable via the "Learn more" link. */
.card--product .card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* ---------- Features ---------- */
.feature-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8) var(--sp-12);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.feature { padding-top: var(--sp-4); border-top: 1px solid var(--border-strong); }
.feature__icon { display: none; }
.feature__title { margin-bottom: var(--sp-2); }
.feature__text { color: var(--text-muted); margin: 0; font-size: var(--fs-sm); }

/* ---------- Screenshot placeholder ---------- */
.screenshot-placeholder {
  display: grid; place-items: center; aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--radius-lg); border: 1px dashed var(--border-strong);
  color: var(--text-muted); font-size: var(--fs-sm); background: var(--bg-elev);
}

/* ---------- Callout (components/callout.rs) ---------- */
.callout {
  --callout-color: var(--info);
  margin-block: var(--sp-6); padding: var(--sp-4) var(--sp-6); border-radius: var(--radius);
  border: var(--rule); border-left: 3px solid var(--callout-color);
  background: color-mix(in srgb, var(--callout-color) 6%, var(--bg-elev)); color: var(--text-muted);
}
.callout > :last-child { margin-bottom: 0; }
.callout strong, .callout code { color: var(--text); }
.callout__title { margin-bottom: var(--sp-2); font-weight: 600; color: var(--text); }
.callout--warn { --callout-color: var(--warn); }
.callout--security { --callout-color: var(--security); }
.callout .prose-list { margin-bottom: 0; }

/* ---------- Misc ---------- */
.section-header { max-width: 62ch; margin-bottom: var(--sp-12); }
.icon { display: inline-block; flex: none; }

/* ---------- Header + nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.site-header__inner { position: relative; display: flex; align-items: center; gap: var(--sp-4); min-height: var(--header-h); }
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-3); margin-right: auto;
  color: var(--text); text-decoration: none; font: 800 1.5rem/1 var(--font-display); letter-spacing: 0.01em;
}
.brand:hover { color: var(--text); }
.brand__logo { display: block; width: 32px; height: 32px; }
.site-header__actions { display: flex; align-items: center; gap: var(--sp-2); order: 3; }
.site-nav { order: 2; }
.nav-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin: 0; padding: 0; }
.nav-link {
  display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
  color: var(--text-muted); text-decoration: none; font-weight: 500;
}
.nav-link:hover { color: var(--text); }
.nav-link[aria-current="page"] { color: var(--text); }
.nav-link[aria-current="page"]:not(.nav-link--cta) { text-decoration: underline; text-decoration-color: var(--straw); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.nav-link--cta { margin-left: var(--sp-2); padding-inline: var(--sp-4); background: var(--accent); color: var(--accent-text); font-weight: 600; }
.nav-link--cta:hover, .nav-link--cta[aria-current="page"]:hover { background: var(--accent-hover); color: var(--accent-text); }
.nav-link--cta[aria-current="page"] { color: var(--accent-text); }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border-radius: var(--radius); border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer;
}
.icon-btn:hover { border-color: var(--border-strong); color: var(--text); }
.theme-toggle .icon--moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon--sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon--moon { display: block; }
.nav-toggle { display: none; }
.icon-menu__top, .icon-menu__mid, .icon-menu__bot { transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); transform-origin: 12px 12px; }
.nav-toggle[aria-expanded="true"] .icon-menu__top { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .icon-menu__mid { opacity: 0; }
.nav-toggle[aria-expanded="true"] .icon-menu__bot { transform: translateY(-5px) rotate(-45deg); }
/* Without JS the toggles do nothing, so hide them; links stay visible. */
html:not(.js) .theme-toggle, html:not(.js) .nav-toggle { display: none; }

@media (max-width: 899px) {
  .site-header__inner { flex-wrap: wrap; }
  html:not(.js) .site-nav { order: 4; width: 100%; padding-bottom: var(--sp-2); }
  html.js .nav-toggle { display: inline-grid; }
  html.js .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    padding: var(--sp-3) var(--gutter) var(--sp-4);
    background: var(--bg-elev); border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
  }
  html.js .site-header.is-open .site-nav { display: block; }
  html.js .nav-list { flex-direction: column; align-items: stretch; }
  html.js .nav-link { padding: var(--sp-3); }
  html.js .nav-link--cta { margin: var(--sp-2) 0 0; text-align: center; }
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: var(--sp-16); padding-block: var(--sp-16) var(--sp-8);
  border-top: 1px solid var(--border); font-size: var(--fs-sm); background: var(--bg-elev);
}
.footer-credit {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-4) var(--sp-8);
  padding-bottom: var(--sp-12); margin-bottom: var(--sp-12); border-bottom: 1px solid var(--border);
}
.footer-credit__line { margin: 0; font: 800 var(--fs-2xl)/1 var(--font-display); color: var(--text); max-width: 22ch; }
.footer-credit__line a {
  color: inherit; text-decoration: none;
  background: var(--temper); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer-credit__line a:hover { text-decoration: underline; text-decoration-color: var(--straw); }
.footer-grid { display: grid; gap: var(--sp-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.footer-col a:not(.brand) { color: var(--text-muted); text-decoration: none; }
.footer-col a:not(.brand):hover { color: var(--text); text-decoration: underline; }
.footer-col--brand .brand { margin-bottom: var(--sp-3); }
.footer-col__title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin-bottom: var(--sp-3); }
.footer-bottom {
  margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); color: var(--text-faint);
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: var(--text-muted); }
.footer-copy { margin-left: auto !important; }

/* ---------- Logos ---------- */
.app-logo { display: block; flex: none; width: 56px; height: 56px; }
.app-logo--hero {
  width: clamp(7rem, 26vw, 11rem); height: auto; aspect-ratio: 1;
  filter: drop-shadow(0 18px 40px color-mix(in srgb, var(--app-accent) 40%, transparent));
}
.app-logo--sm { width: 44px; height: 44px; }
.app-logo--xs { width: 26px; height: 26px; }

/* ---------- Steps (a real sequence, so numbered) ---------- */
.steps {
  list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.step { counter-increment: step; position: relative; min-width: 0; padding-top: var(--sp-4); border-top: 1px solid var(--border-strong); }
.step::before {
  content: counter(step); display: block; margin-bottom: var(--sp-3);
  font: 800 2.6rem/1 var(--font-display); color: transparent;
  background: var(--temper); -webkit-background-clip: text; background-clip: text;
}
.step__title { margin-bottom: var(--sp-2); }
.step__body { color: var(--text-muted); font-size: var(--fs-sm); }
.step__body > :last-child { margin-bottom: 0; }
.step__body code { color: var(--text); overflow-wrap: anywhere; }
.step .code-block { white-space: pre-wrap; overflow-wrap: anywhere; }

.code-block {
  margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4); overflow-x: auto;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-size: var(--fs-sm);
}

/* One-line install command with a copy button (js/site.js fills the label). */
.install-cmd {
  display: flex; align-items: stretch; max-width: 100%; width: fit-content;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.install-cmd code {
  display: block; min-width: 0; padding: var(--sp-3) var(--sp-4); overflow-x: auto; white-space: nowrap;
  font-size: var(--fs-sm); color: var(--text);
}
.install-cmd code::before { content: "$ "; color: var(--straw); }
:root[data-theme="light"] .install-cmd code::before { color: var(--link); }
.install-cmd__copy {
  flex: none; padding: 0 var(--sp-4); border: 0; border-left: 1px solid var(--border-strong);
  background: transparent; color: var(--text-muted); font: 600 var(--fs-sm)/1 var(--font-sans); cursor: pointer;
}
.install-cmd__copy:hover { color: var(--text); background: var(--surface); }
html:not(.js) .install-cmd__copy { display: none; }

/* Row of app logos with names (launcher, download and features pages). */
.app-strip {
  list-style: none; margin: var(--sp-8) 0 0; padding: 0; display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
.app-strip__link {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--text); text-decoration: none; font-weight: 600;
  transition: border-color 0.2s var(--ease);
}
.app-strip__link:hover { color: var(--text); border-color: var(--app-accent); }

/* ---------- Page header (components/page_header.rs) ----------
   The system's signature: a stamped display title over the temper rule.
   App pages tint the corner with the app's colour and show its logo. */
.page-header {
  position: relative; padding-block: var(--sp-12) var(--sp-16);
  border-bottom: var(--rule);
}
.page-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--temper);
}
.page-header--app {
  background: radial-gradient(50% 90% at 100% 0%, color-mix(in srgb, var(--app-accent) 16%, transparent), transparent 70%);
}
.page-header--app::after { background: linear-gradient(90deg, var(--app-accent), color-mix(in srgb, var(--app-accent) 10%, transparent) 70%); }
.page-header__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); align-items: center; }
@media (min-width: 820px) {
  .page-header__inner:has(.page-header__media) { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-12); }
}
.page-header__copy { min-width: 0; }
.page-header__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-6); }
.page-header__title { margin: 0; font-size: var(--fs-3xl); max-width: 18ch; }
/* Only app pages (which show the logo) get the hero-size title. */
.page-header__inner:has(.page-header__media) .page-header__copy { container-type: inline-size; }
/* Scales with its column so long names (FerrumContainers) never hit the logo. */
.page-header__inner:has(.page-header__media) .page-header__title { font-size: min(var(--fs-hero), 14cqi); line-height: 0.9; max-width: none; }
.page-header__lead { max-width: 62ch; font-size: var(--fs-lg); color: var(--text-muted); }
.page-header__lead > :last-child { margin-bottom: 0; }
.page-header__lead a { color: var(--text); }
.page-header__tagline { font-size: var(--fs-xl); font-weight: 500; color: var(--text); line-height: var(--lh-snug); max-width: 36ch; }
.page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-8); }
.page-header__media { justify-self: start; }
@media (max-width: 819px) {
  .page-header__media { order: -1; }
  .page-header__media .app-logo--hero { width: 5.5rem; }
}

/* ---------- Breadcrumb (components/breadcrumb.rs) ---------- */
.breadcrumb { margin-bottom: var(--sp-6); font-size: var(--fs-sm); }
.breadcrumb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
.breadcrumb__list li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.breadcrumb__list li + li::before { content: "/"; color: var(--text-faint); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; }
.breadcrumb a[aria-current="page"] { color: var(--text); font-weight: 600; }

/* ---------- Sections (components/section.rs) ---------- */
.section--band { background: var(--bg-elev); border-block: var(--rule); }
.section-header .lead > :last-child { margin-bottom: 0; }

/* ---------- Chips: small status labels ---------- */
.chip {
  display: inline-block; padding: 0 var(--sp-2); border-radius: var(--radius-sm);
  border: 1px solid currentColor; font: 600 var(--fs-xs)/1.6 var(--font-sans); white-space: nowrap;
}
.chip--stable { color: var(--ok); }
.chip--beta { color: var(--info); }
.chip--alpha { color: var(--link); }

/* ---------- Keys (components/code.rs) ---------- */
kbd { font-family: var(--font-mono); font-size: 0.85em; }
.keys { display: inline-flex; align-items: center; gap: 0; white-space: nowrap; font-size: inherit; }
.keys kbd, .prose kbd:not(.keys), .shortcut-table kbd:not(.keys) {
  display: inline-block; min-width: 1.6em; margin-right: 2px; padding: 0 0.35em;
  border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--radius-xs);
  background: var(--surface); color: var(--text); text-align: center; line-height: 1.5;
}
.keys__then { display: inline-block; width: 0.4em; }
.keys-or { color: var(--text-faint); font-size: var(--fs-sm); }

/* ---------- Tables (shortcuts, shell commands, comparisons) ---------- */
.table-wrap { overflow-x: auto; margin-block: var(--sp-4) var(--sp-8); border: var(--rule); border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table th, .data-table td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; border-bottom: var(--rule); }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table thead th { background: var(--bg-elev); color: var(--text-muted); font-weight: 600; }
.data-table tbody th { font-weight: 600; color: var(--text); }
.data-table td { color: var(--text-muted); }
.data-table code { color: var(--text); }

/* A coloured dot before an app name, from --app-accent. */
.app-dot { display: inline-flex; align-items: center; gap: var(--sp-2); }
.app-dot::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--app-accent); flex: none; }

/* ---------- Prose: long-form text in docs and info pages ---------- */
.prose { max-width: var(--measure); }
.prose h2 { margin: var(--sp-16) 0 var(--sp-4); font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem); line-height: 1; scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin: var(--sp-8) 0 var(--sp-3); }
.prose p, .prose li { color: var(--text-muted); }
.prose strong, .prose code { color: var(--text); }
.prose .install-cmd { margin-block: var(--sp-4); }
.prose-list, .prose-steps { margin: 0 0 var(--sp-6); padding: 0; list-style: none; }
.prose-list li, .prose-steps li { position: relative; padding-left: var(--sp-8); margin-bottom: var(--sp-3); }
.prose-list li::before {
  content: ""; position: absolute; left: var(--sp-2); top: 0.75em; width: 10px; height: 2px; background: var(--app-accent);
}
.prose-steps { counter-reset: prose-step; }
.prose-steps li { counter-increment: prose-step; }
.prose-steps li::before {
  content: counter(prose-step); position: absolute; left: 0; top: 0.1em;
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid var(--border-strong); color: var(--text); font: 600 var(--fs-xs)/1 var(--font-sans);
}

/* ---------- App strip variants and guide links ---------- */
.app-strip__link .app-logo { flex: none; }
.app-strip--rows .app-strip__link { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-3); }
.app-strip--rows .app-strip__link .app-logo { grid-row: span 2; }
.app-strip__kind { font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); }
.guide-links { margin-bottom: var(--sp-8); }
.guide-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); }
.guide-links a { font-weight: 600; }

/* ---------- Status lists on app pages ---------- */
.status-group { padding-top: var(--sp-4); border-top: var(--rule-strong); }

/* ---------- Closing call to action (components/cta.rs) ---------- */
.cta { margin-top: var(--sp-16); }
.cta__inner {
  position: relative; display: grid; gap: var(--sp-6) var(--sp-12); align-items: end;
  padding-block: var(--sp-12);
}
.cta__inner::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; border-top: var(--rule-strong); }
.cta__inner::before { content: ""; position: absolute; z-index: 1; left: var(--gutter); top: -1px; width: 6rem; height: 3px; background: var(--temper); }
@media (min-width: 900px) { .cta__inner { grid-template-columns: minmax(0, 1fr) auto; } }
.cta__title { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.cta__copy p { margin: 0; color: var(--text-muted); max-width: 52ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
main:has(> .cta:last-child) + .site-footer { margin-top: 0; }
/* The page already closed with a download CTA: don't repeat the button. */
main:has(> .cta:last-child) + .site-footer .footer-credit .btn { display: none; }