/* CHIKARA Utilities hub: page-specific styles. Shell, kit, motion come from shell.css, chikara-theme.css, motion.css. ASCII only. */
/* Home */
.app { padding-top: 18px; }
.eyebrow { margin: 0; font-size: .72rem; letter-spacing: .22em; color: var(--muted); }
.hero { padding: 6px 2px 4px; }
.hero-title { font-size: clamp(2rem, 8vw, 3rem); line-height: 1.05; margin: 6px 0 14px; font-weight: 600; }
.intent { display: flex; gap: 8px; align-items: stretch; }
.intent .field { flex: 1; }
.intent-out { margin-top: 10px; }
.intent-out .hit { display: block; margin: 8px 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; margin: 18px 0; }
.tile { display: flex; flex-direction: column; gap: 8px; padding: 18px 16px 14px; color: inherit; text-decoration: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--ck-panel-shadow, var(--shadow)); position: relative; overflow: hidden; min-height: 168px; transition: transform var(--m-d3) var(--m-ease), border-color var(--m-d2) var(--m-ease); }
a.tile:hover { transform: translateY(-3px); border-color: var(--gold); }
a.tile:active { transform: scale(.97); transition-duration: var(--m-d1); }
a.tile:focus-visible { outline: 3px solid var(--primary-ink); outline-offset: 3px; }
.tile.off { opacity: .78; border-style: dashed; }
.tile-icon { width: 44px; height: 44px; color: var(--gold); }
.tile-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tile h3 { font-family: var(--f-display); font-size: 1.55rem; font-weight: 600; margin: 2px 0 0; }
.tile p { margin: 0; color: var(--muted); font-size: .9rem; flex: 1; }
.tile-foot { display: flex; justify-content: space-between; align-items: center; font-size: .74rem; }
.tag { padding: 3px 9px; border-radius: 999px; background: var(--surface-3); color: var(--ink); font-weight: 700; }
.tag.on { color: var(--state-text); }
.resume { padding: 20px 16px 16px; margin-top: 6px; }
.resume h2 { font-size: 1.5rem; margin: 4px 0 8px; }
.rec-item { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.rec-item:first-child { border-top: 0; }
.rec-item h3 { font-size: 1rem; margin: 0; font-family: var(--f-body); font-weight: 700; }
.rec-item p { margin: 2px 0 0; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.rec-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.count { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); font-size: .75rem; }
.fx-row { position: relative; }
.stack { display: grid; gap: 8px; margin-top: 10px; }
select.field { appearance: auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } .boot { transition: opacity .32s linear; } }

/* no inline style attributes anywhere (CSP style-src 'self'): stagger lives here */
.hero > :nth-child(1) { --i: 0; } .hero > :nth-child(2) { --i: 1; } .hero > :nth-child(3) { --i: 2; } .hero > :nth-child(4) { --i: 3; } .hero > :nth-child(5) { --i: 4; }
/* footer sits above the Halo's home position, never under it, even on a short page */
.app { display: flex; flex-direction: column; min-height: calc(100dvh - 60px); padding-bottom: 12px; }
.app > .footer { margin-top: auto; padding-top: 22px; padding-bottom: calc(var(--halo-size) + 40px + env(safe-area-inset-bottom, 0px)); }