/* Hallmark · genre: modern-minimal · macrostructure: Catalogue · theme: locked AE navy and teal · enrichment: none · nav: N9 edge-aligned minimal, sans, default spacing · footer: Ft2 wordmark-links-credit, pipe, spaced · F6 knobs: ratio=flexible, density=2-up, micro-action=View · pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass (40-41) · slop: pass (42-45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50-57) */
@import url("../tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { scroll-behavior: smooth; }
body { color: var(--ae-text); background: var(--ae-page); font-family: var(--ae-font); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.skip-link { position: fixed; inset: var(--ae-space-3) auto auto var(--ae-space-3); z-index: 10; padding: var(--ae-space-2) var(--ae-space-4); color: var(--ae-accent-ink); background: var(--ae-navy); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.tools-nav, main, .tools-footer { width: min(100% - 2rem, 76rem); margin-inline: auto; }
.tools-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--ae-space-4); min-height: 5rem; border-bottom: 1px solid var(--ae-rule); }
.brand { display: inline-flex; }
.brand img { display: block; width: auto; height: 2rem; }
.back-link, .tool-action { min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: 700; white-space: nowrap; text-underline-offset: var(--ae-space-2); text-decoration-color: var(--ae-teal); text-decoration-thickness: 0.15rem; }
.catalogue-head { display: grid; gap: var(--ae-space-4); padding-block: clamp(var(--ae-space-12), 9vw, 7rem); border-bottom: 1px solid var(--ae-border); }
.suite-name, .catalogue-count { margin: 0; color: var(--ae-accent-text); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.catalogue-count { color: var(--ae-subtle); letter-spacing: 0; text-transform: none; }
h1, h2, h3 { min-width: 0; margin: 0; color: var(--ae-heading); font-style: normal; overflow-wrap: anywhere; }
h1 { max-width: 16ch; font-size: clamp(2.6rem, 7vw, 5.1rem); line-height: 1.02; letter-spacing: -0.045em; }
.catalogue-head > p:last-child { max-width: 59ch; margin: var(--ae-space-4) 0 0; color: var(--ae-subtle); font-size: 1.125rem; }
.tool-shelf { padding-block: clamp(var(--ae-space-10), 7vw, var(--ae-space-16)); border-bottom: 1px solid var(--ae-border); }
.shelf-heading { display: grid; gap: var(--ae-space-2); margin-bottom: var(--ae-space-8); }
.shelf-heading h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
.shelf-heading p { margin: 0; color: var(--ae-subtle); }
.tool-grid { display: grid; gap: var(--ae-space-6); }
.tool-card { min-width: 0; display: grid; align-content: start; gap: var(--ae-space-6); border-top: 0.35rem solid var(--ae-teal); padding: var(--ae-space-6) 0 var(--ae-space-2); }
.tool-index { color: var(--ae-subtle); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.tool-copy { display: grid; align-content: start; gap: var(--ae-space-4); }
.tool-status { width: fit-content; margin: 0; padding: var(--ae-space-1) var(--ae-space-3); color: var(--ae-heading); background: var(--ae-accent-soft); font-size: 0.8rem; font-weight: 700; }
.tool-copy h3 { font-size: clamp(1.65rem, 5vw, 2.6rem); line-height: 1.08; letter-spacing: -0.025em; }
.tool-copy > p:not(.tool-status) { max-width: 52ch; margin: 0; }
dl { display: grid; gap: var(--ae-space-3); margin: 0; }
dl div { display: grid; gap: var(--ae-space-1); padding-top: var(--ae-space-3); border-top: 1px solid var(--ae-border); }
dt { color: var(--ae-heading); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
dd { margin: 0; color: var(--ae-subtle); }
.tool-action { width: fit-content; align-self: end; color: var(--ae-heading); }
.paused-shelf { background: var(--ae-accent-soft); box-shadow: 50vw 0 var(--ae-accent-soft), -50vw 0 var(--ae-accent-soft); }
.paused-card { max-width: 38rem; }
.paused-card .tool-status { color: var(--ae-heading); background: var(--ae-raised); border: 1px solid var(--ae-teal); }
.next-shelf { background: var(--ae-surface); box-shadow: 50vw 0 var(--ae-surface), -50vw 0 var(--ae-surface); }
.upcoming-grid { gap: var(--ae-space-8); }
.upcoming-card { border-top-width: 1px; border-top-color: var(--ae-border); }
.upcoming-card .tool-status { color: var(--ae-subtle); background: var(--ae-raised); border: 1px solid var(--ae-border); }
.choice-note { display: grid; gap: var(--ae-space-4); padding-block: clamp(var(--ae-space-10), 7vw, var(--ae-space-16)); }
.choice-note h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
.choice-note p { max-width: 64ch; margin: 0; font-size: 1.125rem; }
.tools-footer { padding-block: var(--ae-space-8); border-top: 1px solid var(--ae-rule); color: var(--ae-muted); font-size: 0.875rem; }
.tools-footer p { margin: 0; }
.tools-footer strong { color: var(--ae-navy); }
:focus-visible { outline: 0.2rem solid var(--ae-focus); outline-offset: 0.2rem; }
@media (hover: hover) and (pointer: fine) { .back-link:hover, .tool-action:hover { color: var(--ae-teal-dark); } }
.back-link:active, .tool-action:active { color: var(--ae-body); }
@media (min-width: 40rem) {
  .tools-nav, main, .tools-footer { width: min(100% - 3rem, 76rem); }
  .live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--ae-space-8), 5vw, var(--ae-space-16)); }
  .upcoming-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) { .live-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 150ms !important; } }