/* Hallmark · shape: Index-First Workbench · genre: atmospheric · theme: Lumen (deal 2/3) · job: try · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V4 · weakest: H, template pages reuse homepage chrome so the task itself stays the hero */
@import url("./tokens.css");
@import url("./base.css");

h1, h2, h3, .nav, .btn, .label { text-transform: lowercase; }
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-md); }
.wordmark { font-family: var(--font-display); font-size: var(--text-xl); text-decoration: none; letter-spacing: var(--tracking-display); }
.wordmark span { color: var(--color-accent); }
.nav-links { display: flex; gap: var(--space-lg); align-items: center; }
.nav-links a { text-decoration: none; color: var(--color-ink-2); font-size: var(--text-sm); }
.nav-links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-lg); font-weight: 500; font-size: var(--text-sm); text-decoration: none; border: 0; cursor: pointer; min-height: 44px; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--secondary { box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); color: var(--color-ink); background: transparent; }
.btn--secondary:hover { background: var(--color-paper-2); }
.btn:active { transform: scale(0.98); }
.btn:disabled { background: var(--color-paper-3); color: var(--color-muted); cursor: not-allowed; }
.crumbs { padding-block: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.crumbs a { color: var(--color-ink-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.page-head { padding-block: var(--space-lg) var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.page-head h1 { max-width: 22ch; }
.lead { color: var(--color-ink-2); margin-top: var(--space-md); }
.readout { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--color-ink-2); }
.label { font-size: var(--text-sm); color: var(--color-muted); }
.badge { font-size: var(--text-xs); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); padding: var(--space-2xs) var(--space-sm); white-space: nowrap; color: var(--color-ink-2); }
.badge--free { color: var(--color-live); }
.badge--pick { color: var(--color-accent); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-accent); }
.section { padding-block: var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.section-head { margin-bottom: var(--space-lg); }
.section-head p { color: var(--color-muted); margin-top: var(--space-xs); }
.filterbar { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); position: sticky; top: 65px; background: var(--color-paper); z-index: var(--z-sticky); }
.chip { border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); background: transparent; color: var(--color-ink); padding: var(--space-xs) var(--space-md); cursor: pointer; font-size: var(--text-sm); min-height: 36px; }
.chip:active { transform: scale(0.98); }
.chip[aria-pressed="true"] { background: var(--color-paper-3); }
select.sort { background: var(--color-paper-2); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-md); min-height: 36px; }
.toggle-row { display: flex; align-items: center; gap: var(--space-sm); }
.toggle { width: 52px; height: 28px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); background: var(--color-paper); position: relative; cursor: pointer; border: 0; flex: none; }
.toggle::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--color-muted); transition: transform var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out); }
.toggle[aria-pressed="true"]::after { transform: translateX(24px); background: var(--color-accent); }
.tool-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--space-md); align-items: start; padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.rank { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-muted); }
.tool-row h3 a { text-decoration: none; }
.tool-row h3 a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.tool-row p { color: var(--color-ink-2); font-size: var(--text-sm); margin-top: var(--space-2xs); }
.tool-meta { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-sm); align-items: center; }
.well { background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.faq { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-md); }
.faq h3 { font-family: var(--font-body); text-transform: none; font-size: var(--text-md); font-weight: 500; }
.faq p { color: var(--color-ink-2); font-size: var(--text-sm); margin-top: var(--space-xs); }
table.alt { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.alt th, table.alt td { text-align: left; padding: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
table.alt th { color: var(--color-muted); font-weight: 400; }
.slot { border: var(--rule-hair) dashed var(--color-rule-2); border-radius: var(--radius-card); padding: var(--space-xl); text-align: center; color: var(--color-muted); background-image: linear-gradient(var(--rule-blueprint) 1px, transparent 1px), linear-gradient(90deg, var(--rule-blueprint) 1px, transparent 1px); background-size: 48px 48px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
footer { padding-block: var(--space-2xl); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--gap-columns); }
.footer-grid a { display: block; color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); margin-top: var(--space-xs); }
.muted { color: var(--color-muted); font-size: var(--text-sm); }
@media (max-width: 60rem) { .grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .footer-grid, .grid2 { grid-template-columns: minmax(0, 1fr); } .nav-links a:not(.btn) { display: none; } .filterbar { position: static; } }
@media (max-width: 40rem) { .grid3 { grid-template-columns: minmax(0, 1fr); } .tool-row { grid-template-columns: minmax(0, 1fr); } .rank { display: none; } }
@media (prefers-reduced-motion: reduce) { .toggle::after { transition: none; } }
.article { max-width: 760px; }
.article p { margin-top: var(--space-md); color: var(--color-ink-2); }
.article h2 { margin-top: var(--space-2xl); }
.article h3 { margin-top: var(--space-xl); }
.article h3 a { text-decoration: none; }
.article h3 a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.article ul { color: var(--color-ink-2); }
.article a.inline { color: var(--color-ink); text-decoration-color: var(--color-accent); }