/* ===== digital layer: dot field, HUD, spotlight, reveals, situations, hero concepts ===== */

/* dot field and custom scroll */
.field { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
html { scrollbar-width: thin; scrollbar-color: var(--color-rule-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: var(--radius-pill); background: linear-gradient(var(--opal-1), var(--opal-2)) padding-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--opal-3), var(--opal-2)) padding-box; }

.hud { position: fixed; inset: 0 0 auto; z-index: var(--z-toast); height: 0; pointer-events: none; }
.hud-bar { position: absolute; left: 0; top: 0; width: 100%; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--opal-1), var(--opal-2), var(--opal-3)); }
.hud-read { position: fixed; left: max(var(--space-md), env(safe-area-inset-left, 0px)); bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px)); display: inline-flex; gap: var(--space-sm); align-items: center; min-height: 32px; padding: 0 var(--space-sm); border: 1px solid var(--glass-edge); border-radius: var(--radius-pill); background: var(--hud-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 500 12px/1 var(--font-outlier); color: var(--color-muted); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js.fx .hud:not(.is-on) .hud-read { opacity: 0; transform: translateY(8px); }
.hud-read b { font-weight: 500; color: var(--color-ink-2); }
.hud-read em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--opal-2); }

@media (max-width: 40rem) { .hud-read { display: none; } }

/* mono eyebrows */
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-xs); font: 500 12px/1.2 var(--font-outlier); color: var(--color-muted); }
.eyebrow::before { content: "//"; color: var(--opal-1); }
.eyebrow + h1, .eyebrow + h2 { margin-top: var(--space-md); }

/* spotlight cards: a soft light and a lit edge follow the pointer */
.spot { position: relative; isolation: isolate; }
.spot::before, .spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.spot::before { z-index: -1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--opal-1a), transparent 60%); }
.spot::after { padding: 1px; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--opal-1), var(--opal-2) 35%, transparent 70%); -webkit-mask: linear-gradient(var(--color-ink) 0 0) content-box, linear-gradient(var(--color-ink) 0 0); -webkit-mask-composite: xor; mask: linear-gradient(var(--color-ink) 0 0) content-box exclude, linear-gradient(var(--color-ink) 0 0); }
@media (hover: hover) { .spot:hover::before, .spot:hover::after, .spot:focus-within::after { opacity: 1; } }

/* blur-in reveals, only once scripts run and motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  .js.fx [data-reveal] { transition: opacity 700ms var(--ease-out) var(--d, 0ms), filter 700ms var(--ease-out) var(--d, 0ms), translate 700ms var(--ease-out) var(--d, 0ms); }
  .js.fx [data-reveal]:not(.is-in) { opacity: 0; filter: blur(12px); translate: 0 18px; }
}

/* nav additions */
.nav li > a[aria-current="page"] { color: var(--color-ink); }
.nav-pill .kbd { margin-left: var(--space-2xs); }
.kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 1px solid var(--color-rule-2); border-bottom-width: 2px; border-radius: 6px; font: 500 12px/1 var(--font-outlier); color: var(--color-muted); }

/* ---------- find your situation ---------- */
.find { padding-block: 0 var(--section-gap); }
.find-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-lg); }
.find-head .lead { max-width: 42ch; }
.palette { margin-top: var(--space-xl); border: 1px solid var(--glass-edge); border-radius: var(--radius-card); background: linear-gradient(160deg, var(--glass-c), var(--glass-d)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow: hidden; }
.palette-bar { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); border-bottom: 1px solid var(--glass-edge); }
.palette-bar svg { width: 20px; height: 20px; flex: none; color: var(--opal-1); }
.palette-bar input { flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: 12px; background: var(--tint-1); color: var(--color-ink); font: 500 var(--text-lg)/1.2 var(--font-body); caret-color: var(--opal-2); }
.palette-bar input::placeholder { color: var(--color-muted); }
.palette-bar input:focus { outline: none; border-color: var(--opal-1); }
.palette:focus-within { border-color: var(--opal-1); }
.palette-count { font: 500 12px/1 var(--font-outlier); color: var(--color-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chips { display: flex; gap: var(--space-xs); padding: var(--space-sm) var(--space-lg); overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips + .chips { padding-top: 0; }
.chip { flex: none; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 36px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font: 500 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.chip span { font: 500 12px/1 var(--font-outlier); color: var(--color-muted); }
.chip:hover { color: var(--color-ink); border-color: var(--color-ink-2); }
.chip[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.chip[aria-pressed="true"] span { color: var(--color-paper); }
.chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip--src { min-height: 32px; font-size: var(--text-xs); }
.palette-list { padding: var(--space-sm) var(--space-lg) var(--space-lg); }
.find-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); align-items: center; margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.find-foot a { font-weight: 600; color: var(--color-ink); text-underline-offset: 0.2em; }

.sit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-sm); }
.sit { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-inner); background: var(--color-paper-2); }
.sit-head { display: flex; justify-content: space-between; gap: var(--space-sm); align-items: center; }
.sit-group { font: 500 12px/1.2 var(--font-outlier); color: var(--color-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--font-outlier); color: var(--color-ink-2); white-space: nowrap; }
.src::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink-2); }
.src--harness::before { background: var(--opal-1); }
.src--companion::before { background: var(--opal-2); }
.src--plugin::before { background: var(--opal-3); }
.src--claude::before { background: transparent; border: 1px solid var(--color-ink-2); }
.sit h3 { font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.015em; }
.sit-what { color: var(--color-ink-2); font-size: var(--text-sm); }
.sit-call { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-2xs) 0 var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: 10px; background: var(--color-paper); }
.sit-call code { color: var(--color-ink); font-size: 13px; overflow-wrap: anywhere; min-width: 0; padding-block: var(--space-xs); }
.sit-prompt { margin-top: auto; display: grid; gap: var(--space-xs); padding: var(--space-sm); border-radius: 10px; background: linear-gradient(150deg, var(--opal-1a), var(--opal-2a)); transition: filter var(--dur-long) var(--ease-out), opacity var(--dur-long) var(--ease-out); }
.sit-prompt p { font-size: var(--text-sm); color: var(--color-ink); }
.sit-label { font: 500 12px/1 var(--font-outlier); color: var(--opal-2); }
.sit-prompt .copy { justify-self: start; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sit .sit-prompt { filter: blur(2px); opacity: 0.7; }
  .sit:hover .sit-prompt, .sit:focus-within .sit-prompt { filter: none; opacity: 1; }
}
.copy { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule-2); border-radius: 8px; background: transparent; color: var(--color-ink-2); font: 500 12px/1 var(--font-body); cursor: pointer; white-space: nowrap; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.copy:hover { color: var(--color-ink); border-color: var(--color-ink-2); }
.copy:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.copy.is-done { color: var(--color-paper); background: var(--opal-2); border-color: var(--opal-2); }
.sit-empty { display: grid; gap: var(--space-xs); padding: var(--space-xl) 0; color: var(--color-ink-2); }

/* the full catalog page */
.cat-hero { padding-block: var(--space-3xl) var(--space-xl); }
.cat-hero h1 { max-width: 14ch; }
.cat-hero .lead { margin-top: var(--space-lg); font-size: var(--text-lead); max-width: 44ch; }
.habits { margin: var(--space-2xl) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); }
.habits li { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg); border: 1px solid var(--glass-edge); border-radius: var(--radius-inner); background: linear-gradient(160deg, var(--glass-a), var(--glass-b)); }
.habits b { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.015em; line-height: 1.2; }
.habits code { color: var(--opal-2); font-size: 12px; overflow-wrap: anywhere; }
.habits span { color: var(--color-muted); font-size: var(--text-sm); }
.catalog { padding-block: 0 var(--section-gap); }
.catalog .palette { position: sticky; top: calc(64px + var(--space-xl)); z-index: var(--z-sticky); margin-top: 0; background: var(--hud-bg); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); }
.sit-block { padding-top: var(--space-2xl); scroll-margin-top: 260px; }
.sit-block-head { display: grid; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.sit-block-head h2 { font-size: var(--text-section); }
.sit-block-head p { color: var(--color-ink-2); }
.cat-list { margin-top: var(--space-lg); }
.cat-list > .sit-grid { margin-top: var(--space-lg); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
@media (max-width: 60rem) { .habits { grid-template-columns: repeat(2, minmax(0, 1fr)); } .catalog .palette { position: static; } }
@media (max-width: 40rem) { .habits { grid-template-columns: minmax(0, 1fr); } .palette-bar, .chips, .palette-list { padding-inline: var(--space-md); } }

/* ---------- hero A: the mark in 3D, the harness built around it ---------- */
.hero .stage2d { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.hero.has-3d .hero-mark > img, .hero.has-3d .wires { visibility: hidden; }
.hero.has-3d .hero-mark::before { opacity: 0.6; }
.labels3d { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.label3d { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--glass-edge); border-radius: var(--radius-pill); background: var(--hud-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 500 12px/1 var(--font-outlier); color: var(--color-ink-2); white-space: nowrap; pointer-events: auto; cursor: default; will-change: transform, opacity; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.label3d::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--color-line-2); }
.label3d.is-hot { color: var(--color-ink); border-color: var(--opal-1); }
.label3d.is-hot::before { background: var(--opal-2); box-shadow: 0 0 10px var(--opal-2); }
.route-log { position: absolute; z-index: 2; right: var(--gutter); top: var(--space-lg); display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font: 500 12px/1.3 var(--font-outlier); color: var(--color-muted); text-align: right; pointer-events: none; }
.route-log li { transition: opacity var(--dur-long) var(--ease-out); }
.route-log li:first-child { color: var(--color-ink-2); }
.route-log li:first-child b { color: var(--opal-2); }
.route-log b { font-weight: 500; }
.route-log li:nth-child(3) { opacity: 0.45; }
@media (max-width: 60rem) { .route-log { display: none; } }