/* Pulse dashboard — craft pass. Loaded last: hand-finished details layered on the existing design.
   Rule of thumb: craft never costs clarity. Marginalia (Caveat) is always decorative + aria-hidden. */

:root {
  --grain-opacity: .032;            /* information-dense UI: quieter grain than the website */
  --shadow-craft: 0 1px 0 var(--hairline-hi) inset, 0 18px 40px -24px rgba(0, 0, 0, .75), 0 2px 6px -3px rgba(0, 0, 0, .45);
  --panel-sheen: linear-gradient(180deg, rgba(255, 255, 255, .034), rgba(255, 255, 255, 0) 120px);
  --ink-soft: rgba(255, 210, 122, .16);
}
body::after { opacity: .5; }        /* softer vignette so the sidebar foot and toasts stay crisp */

/* ---------- boot: Blip with a beating chest line ---------- */
.boot { display: grid; place-items: center; align-content: center; gap: 10px; }
.boot-blip { overflow: visible; }
.boot-body { transform-origin: 60px 104px; animation: bootBob 1.6s ease-in-out infinite; }
.boot-beat { stroke-dasharray: 64; stroke-dashoffset: 64; animation: bootBeat 1.1s linear infinite; }
.boot-bulb { animation: blink 1.1s steps(2) infinite; }
.boot-text { font: 700 20px/1 var(--font-hand); color: var(--hand-ink); transform: rotate(-2deg); opacity: .85; }
@keyframes bootBob { 50% { transform: translateY(-4px) scaleY(1.02); } }
@keyframes bootBeat { to { stroke-dashoffset: -64; } }

/* ---------- material finish ---------- */
.panel { background: var(--panel-sheen), var(--panel); box-shadow: var(--shadow-craft); }
.panel.crafted, .tiles.crafted, .monitor.crafted { box-shadow: var(--shadow-craft); }
/* isolated panels must still let an open picker/menu float over their neighbours */
.crafted:focus-within, .crafted:has(.picker.open), .crafted:has(.menu) { z-index: 3; }
.panel-head h2 { letter-spacing: -.01em; }
.tiles { background: var(--panel-sheen), var(--panel); }
.tile .ticks { inset: 9px; opacity: 0; transition: opacity var(--dur-2); }
.tile:hover .ticks, .tile.bump .ticks { opacity: 1; }
.monitor .ticks { inset: 7px; }
.monitor .ticks::before, .monitor .ticks::after { border-color: rgba(76, 201, 255, .35); }
.health { box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset; }
.health.on { background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 60%), rgba(19, 23, 41, .6); }
.guild-card { box-shadow: var(--shadow-craft); }
.menu, .picker-pop { box-shadow: 0 1px 0 var(--hairline-hi) inset, 0 30px 60px -24px #000, 0 2px 8px -2px rgba(0, 0, 0, .5); }
.modal { box-shadow: 0 1px 0 var(--hairline-hi) inset, 0 40px 120px -30px #000, 0 0 0 1px rgba(124, 92, 255, .08); }
.toast { box-shadow: 0 1px 0 var(--hairline-hi) inset, 0 20px 50px -20px #000; }

/* tabular figures on every number that changes */
.num, .tile-value, .count-n, .mon-rate-n, .lb-level-n, .lb-xp, .mini-xp, .mini-rank, .gw-count, .num-readout, .num-input, .cc-uses, .poll-votes, .hb-ping, .feed-time, .tag-count, .chart-tip b {
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}

/* buttons: tactile press + a lit top edge */
.btn { transition: background var(--dur-1), border-color var(--dur-1), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2); }
.btn:not(:disabled):active { transform: translateY(1px) scale(.985); }
.btn-primary { box-shadow: 0 8px 24px -10px rgba(124, 92, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(20, 10, 60, .22); }
.btn-primary:active { box-shadow: 0 4px 14px -8px rgba(124, 92, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 1px 3px rgba(20, 10, 60, .35); }
.btn-ghost, .btn:not(.btn-primary):not(.btn-discord):not(.btn-danger) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.icon-btn:active, .fchip:active, .legend-item:active, .seg:active span, .step-btn:active, .chip-x:active { transform: scale(.94); }
.icon-btn, .fchip, .legend-item, .step-btn { transition: background var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease-out); }

/* switches: a little spring — the thumb squashes while pressed */
.switch-thumb { box-shadow: 0 1px 2px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(0, 0, 0, .12); transform-origin: left center; transition: transform var(--dur-3) var(--ease-spring), background var(--dur-2), width var(--dur-2) var(--ease-spring); }
.switch:active .switch-thumb { width: 22px; }
.switch:active .switch-input:checked + .switch-track .switch-thumb { transform: translateX(14px); }
.switch.lg:active .switch-thumb { width: 27px; }
.switch.lg:active .switch-input:checked + .switch-track .switch-thumb { transform: translateX(19px); }
.switch-track { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45); }
.switch-input:checked + .switch-track { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), 0 0 14px -4px rgba(124, 92, 255, .7); }

/* slider: a proper thumb with a pip */
.range { height: 6px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
.range::-webkit-slider-thumb { width: 20px; height: 20px; border: 0; background: radial-gradient(circle, var(--violet) 0 3px, #fff 3.5px); box-shadow: 0 0 0 1px rgba(124, 92, 255, .6), 0 3px 10px rgba(124, 92, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .1); transition: transform var(--dur-2) var(--ease-spring); }
.range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.range:active::-webkit-slider-thumb { transform: scale(.94); cursor: grabbing; }
.range::-moz-range-thumb { width: 18px; height: 18px; border: 0; background: radial-gradient(circle, var(--violet) 0 3px, #fff 3.5px); box-shadow: 0 0 0 1px rgba(124, 92, 255, .6), 0 3px 10px rgba(124, 92, 255, .55); }
.range:focus-visible { outline: 2px solid var(--mint); outline-offset: 6px; }

/* segmented / radio pills: the selected one reads as a raised key */
.seg input:checked + span { background: linear-gradient(180deg, #2e3555, var(--ink-600)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px -2px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--line-strong); }
.seg span { transition: background var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease-out); }
.seg-btn[aria-selected="true"] { background: linear-gradient(180deg, #2e3555, var(--ink-600)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px -2px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--line-strong); }

.kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; background: linear-gradient(180deg, var(--ink-700), var(--ink-800)); box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05); font-weight: 600; line-height: 1; }

/* ---------- sidebar: active item gets a marker swash + drawn stroke ---------- */
.nav-link.active { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 40' preserveAspectRatio='none'%3E%3Cpath d='M6 9C40 4 120 3 232 6c4 9 4 19 1 28-70 4-150 4-226 1C3 27 3 17 6 9z' fill='%237c5cff' fill-opacity='.2'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.nav-link.active::before { content: none; }
.nav-marker { position: absolute; left: -10px; top: 5px; bottom: 5px; width: 7px; pointer-events: none; opacity: 0; }
.nav-link.active .nav-marker { opacity: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%237c5cff'/%3E%3Cstop offset='.55' stop-color='%234cc9ff'/%3E%3Cstop offset='1' stop-color='%233df5b0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 2c1.6 6-.8 11 .6 18S2 32 3.4 38' fill='none' stroke='url(%23g)' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: markerIn .45s var(--ease-out) both; }
.shell.collapsed .nav-link.active .nav-marker { left: -10px; }
@keyframes markerIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- topbar: palette trigger ---------- */
.pal-trigger { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 12px; border-radius: 11px; border: 1px solid var(--line); background: rgba(8, 10, 20, .5); color: var(--text-3); font-size: 13px; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); }
.pal-trigger:hover { color: var(--text-2); border-color: var(--line-strong); }
.pal-trigger-text { min-width: 64px; text-align: left; }
.pal-trigger-keys { display: inline-flex; gap: 3px; }
@media (max-width: 1100px) { .pal-trigger-text, .pal-trigger-keys { display: none; } .pal-trigger { width: 36px; padding: 0; justify-content: center; } }

/* ---------- marginalia ---------- */
.hand-note { font-size: 21px; }
.hand-note .hand-arrow { width: 44px; height: 32px; }
.hand-arrow.flip-up { transform: scaleY(-1); }
.hand-text { white-space: nowrap; }
[hidden].hand-note { display: none !important; }

/* ---------- login ---------- */
.login-brand { position: absolute; top: 22px; left: 24px; z-index: 2; font-size: 16px; }
.login-stack { position: relative; width: min(460px, 100%); margin-top: 72px; }
.login-stack .login-card { width: 100%; z-index: 1; }
.login-blip { position: absolute; left: 50%; top: -92px; z-index: 0; transform: translateX(-50%); animation: peek .9s var(--ease-spring) .15s both; }
.login-blip .blip { animation: hello 1.4s ease-in-out 1s 2; transform-origin: 50% 90%; }
.login-note { position: absolute; left: calc(50% + 58px); top: -74px; z-index: 2; }
.login-note .hand-arrow { transform: rotate(-24deg) translate(2px, 8px); }
@keyframes peek { from { transform: translate(-50%, 70px); } }
@keyframes hello { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 60% { transform: rotate(6deg); } }
@media (max-width: 520px) { .login-note { left: auto; right: calc(50% + 52px); font-size: 19px; flex-direction: row-reverse; } .login-note .hand-arrow { transform: scaleX(-1) rotate(-24deg) translate(2px, 8px); } .login-card { padding: 34px 22px 26px; } }

/* ---------- picker ---------- */
.picker-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 52px; }
.picker-hero-text { min-width: 0; }
.picker-blip { flex: none; margin: -10px 0 -14px -8px; }
.guild-grid-wrap { position: relative; }
.picker-note { position: absolute; left: 34px; top: -44px; z-index: 2; }
@media (max-width: 560px) { .picker-hero { gap: 10px; } .picker-blip .blip { --blip-size: 64px !important; } }

/* ---------- states: Blip fronts every empty / error state ---------- */
.state-blip { display: grid; margin-bottom: 2px; }
.state.compact .state-blip svg { width: 64px; }
.state-error h3 { font-size: 17px; }

/* ---------- overview: greeting, digest, checklist ---------- */
.ov-head h1 { font-size: clamp(24px, 3vw, 34px); }
.ov-sub { color: var(--text-2); }
.ov-line { color: var(--text); font-weight: 600; }
.ov-sep { color: var(--text-3); padding: 0 2px; }
.ov-hub { margin-bottom: 18px; align-items: stretch; }
.digest { padding-top: 20px; overflow: visible; display: flex; flex-direction: column; }
.digest .tape { left: 50%; top: -11px; opacity: .7; }
.digest-h { display: flex; flex-direction: column; gap: 8px; }
.digest-date { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.digest-body p { font-size: 15.5px; line-height: 1.7; color: var(--text-2); max-width: 70ch; }
.digest-body b { color: var(--text); font-weight: 700; }
.digest-body a { font-weight: 700; color: var(--sky); }
.digest-aside { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 12px; min-height: 0; }
.digest-aside:empty { display: none; }
.digest-note .hand-arrow { transform: rotate(18deg) translateY(-6px); }
.digest .sticker { font-size: 11px; padding: 4px 9px 5px; }

.checklist { display: flex; flex-direction: column; }
.checklist .panel-head { margin-bottom: 12px; }
.cl-score { color: var(--mint); }
.cl-meter { height: 8px; border-radius: 6px 9px 7px 8px; background: var(--ink-700); overflow: hidden; margin-bottom: 14px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.cl-meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--mint)); transition: width .9s var(--ease-out); }
.cl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cl-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 8px; margin: 0 -8px; border-radius: 10px; color: var(--text); }
.cl-item:hover { background: rgba(160, 170, 255, .05); text-decoration: none; }
.cl-item > .ic { color: var(--text-3); }
.cl-text { display: grid; min-width: 0; font-size: 13px; }
.cl-text b { font-size: 14px; }
.cl-text span { color: var(--amber); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-item.soft .cl-text span { color: var(--text-3); }
.cl-opt { font-size: 11px; color: var(--text-3); border: 1px dashed var(--line-strong); border-radius: 999px; padding: 1px 8px; }
.cl-more { margin-top: 10px; }
.cl-done { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--line-strong); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cl-done a { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.cl-done a:hover { color: var(--text); }
.cl-done-all { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-2); }
.cl-done-all b { color: var(--text); }
.hand-check { width: 22px; height: 22px; display: block; overflow: visible; }
.cl-mark.sm .hand-check { width: 16px; height: 16px; }
.hand-check path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hc-ring { stroke: var(--text-3); stroke-width: 1.7; }
.hand-check.done .hc-ring { stroke: rgba(61, 245, 176, .35); }
.hc-tick { stroke: var(--mint); stroke-width: 2.8; stroke-dasharray: 24; stroke-dashoffset: 24; animation: tickDraw .5s var(--ease-out) .35s forwards; }
.cl-item:hover .hc-ring { stroke: var(--hand-ink); }
@keyframes tickDraw { to { stroke-dashoffset: 0; } }

/* monitor */
.mon-title .eyebrow { color: var(--sky); }
.mon-title .eyebrow::before { background: var(--sky); }

/* tiles: odometer digits */
.roll, .roll-static { display: inline-block; }
.roll { height: 1.15em; overflow: hidden; vertical-align: top; }
.roll-col { display: flex; flex-direction: column; }
.roll-col > span { display: block; height: 1.15em; line-height: 1.15em; }
.roll.up .roll-col { animation: rollUp .62s var(--ease-spring) var(--d, 0ms) both; }
.roll.down .roll-col { animation: rollDown .62s var(--ease-spring) var(--d, 0ms) both; }
@keyframes rollUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes rollDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.tile.bump .tile-value { animation: none; }
.tile.bump .tile-value .roll { color: var(--c); transition: color .6s; }

/* mini leaderboard crown */
.mini-row { position: relative; }
.mini-crown { position: absolute; left: 24px; top: -3px; font-size: 10px; padding: 2px 6px 3px; z-index: 1; }

/* chart: pencilled crosshair, hover ring, hand annotation */
.chart-svg .crosshair { stroke: rgba(255, 210, 122, .55); stroke-width: 1.4; stroke-dasharray: none; fill: none; stroke-linecap: round; }
.chart-svg .hover-ring { fill: none; stroke: var(--hand-ink); stroke-width: 1.3; stroke-dasharray: 4 3; opacity: .75; }
.hand-ann-ring { fill: none; stroke: var(--hand-ink); stroke-width: 2.1; stroke-linecap: round; stroke-dasharray: 130; stroke-dashoffset: 130; animation: annDraw .9s var(--ease-out) .5s forwards; }
.hand-ann-lead { fill: none; stroke: var(--hand-ink); stroke-width: 1.6; stroke-linecap: round; opacity: .8; }
.hand-ann-text { font: 700 19px var(--font-hand); fill: var(--hand-ink); paint-order: stroke; stroke: rgba(9, 11, 22, .9); stroke-width: 4px; stroke-linejoin: round; }
@keyframes annDraw { to { stroke-dashoffset: 0; } }
.chart-tip { box-shadow: 0 1px 0 var(--hairline-hi) inset, 0 14px 40px -12px #000; }

/* heat strip "now" marker */
.heat.has-now-note { padding-bottom: 42px; }
.has-now-note .heat-axis { bottom: 22px; }
.has-now-note .heat-axis span:last-child { transform: translateX(-50%); }
.heat-now { position: absolute; right: 2px; bottom: -6px; font-size: 20px; gap: 0; align-items: flex-end; }
.heat-now .hand-arrow { width: 34px; height: 26px; margin-bottom: 8px; }
.heat-cell:last-child { box-shadow: inset 0 0 0 1.5px var(--hand-ink); }

/* feed: arrivals overshoot a touch and leave a hairline trail */
.feed-item { position: relative; }
.feed-item.fresh { animation: feedArrive .7s var(--ease-spring) both; }
.feed-item.fresh::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--tc), transparent); transform-origin: left; animation: feedTrail 1.6s var(--ease-out) forwards; }
@keyframes feedArrive { 0% { opacity: 0; transform: translateY(-14px) scale(.985); } 55% { opacity: 1; transform: translateY(2.5px); } 100% { transform: none; } }
@keyframes feedTrail { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: .9; } 100% { transform: scaleX(1); opacity: 0; } }

/* ---------- module headers: hand-made vignettes ---------- */
.page-head:has(.vignette) { align-items: center; }
.vignette { width: 84px; height: 84px; flex: none; display: grid; place-items: center; color: var(--tc); border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tc) 14%, transparent), transparent 92%); margin: -8px 0 -8px -6px; }
.vignette svg { width: 76px; height: 76px; overflow: visible; }
.vignette path, .vignette rect, .vignette circle { stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.vignette .v-soft { opacity: .5; }
.vignette .v-ink { stroke: var(--hand-ink); }
.vignette .v-fill { fill: var(--ink-soft); }
.vignette .v-dot { fill: currentColor; stroke: none; }
.vignette .v-bar { stroke-width: 7; }
.vignette .v-cursor { fill: var(--hand-ink); stroke: none; animation: blink 1.1s steps(2) infinite; }
.vignette .v-hand { font: 700 15px var(--font-hand); fill: var(--hand-ink); stroke: none; }
.vignette svg > g { animation: vigIn .7s var(--ease-spring) both; transform-origin: center; transform-box: fill-box; }
@keyframes vigIn { from { opacity: 0; transform: rotate(-6deg) scale(.9); } }
@media (max-width: 640px) { .vignette { width: 62px; height: 62px; margin: -4px 0; } .vignette svg { width: 56px; height: 56px; } }

/* jump-to-setting spotlight */
.field.spot, [data-path].spot { animation: spot 2.2s var(--ease-out); border-radius: var(--r-md); }
@keyframes spot { 0%, 30% { box-shadow: 0 0 0 3px rgba(255, 210, 122, .55), 0 0 30px -6px rgba(255, 210, 122, .5); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* ---------- toasts: Blip faces ---------- */
.toast { align-items: center; }
.toast-face { position: relative; width: 38px; height: 38px; flex: none; display: grid; place-items: center; }
.toast-blip { display: grid; }
.toast-blip .blip { width: 38px; }
.toast-blip .blip .blip-body { animation: none; }
.toast-face .toast-ic { position: absolute; right: -5px; bottom: -3px; width: 18px; height: 18px; border-radius: 6px; box-shadow: 0 0 0 2px var(--ink-800); background: var(--ink-700); }
.toast-success .toast-face .toast-ic { background: #12352f; }
.toast-error .toast-face .toast-ic { background: #3a1922; }
.toast-warn .toast-face .toast-ic { background: #3a3020; }
.toast-info .toast-face .toast-ic { background: #12293a; }
.toast-party { border-color: rgba(255, 210, 122, .45); background: linear-gradient(120deg, rgba(124, 92, 255, .18), rgba(19, 23, 41, 1) 55%), var(--ink-800); }
.toast-party .toast-face .toast-ic { background: #3a3020; color: var(--hand-ink); }
.toast-party .toast-body strong { color: #fff; }

/* ---------- save bar: "don't forget!" ---------- */
.savebar-inner { position: relative; }
.savebar-note { position: absolute; left: 22px; bottom: calc(100% + 10px); z-index: 2; font-size: 22px; align-items: flex-end; transition: opacity .6s; text-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 0 12px rgba(9, 11, 22, .9); }
.savebar-note .hand-arrow { width: 40px; height: 30px; margin-bottom: -22px; }
/* wide screens: sit in the gutter left of the bar, arrow pointing in — clear of the toast stack */
@media (min-width: 1280px) { .savebar-note { left: auto; right: calc(100% + 2px); bottom: 14px; } }
.savebar-note.gone { opacity: 0; }

/* ---------- command palette ---------- */
.palette-wrap { position: fixed; inset: 0; z-index: 85; display: flex; justify-content: center; align-items: flex-start; padding: min(14vh, 120px) 16px 16px; }
.palette-backdrop { position: absolute; inset: 0; background: rgba(3, 4, 10, .62); backdrop-filter: blur(3px); animation: fade var(--dur-2); }
.palette { position: relative; width: min(620px, 100%); max-height: min(560px, calc(100vh - 140px)); display: flex; flex-direction: column; border-radius: 18px; background: var(--ink-850); border: 1px solid var(--line-strong); box-shadow: 0 1px 0 var(--hairline-hi) inset, 0 40px 120px -30px #000, 0 0 0 1px rgba(124, 92, 255, .12); animation: palIn var(--dur-3) var(--ease-spring); overflow: hidden; }
.palette-wrap.out .palette { animation: modalOut .16s forwards; }
.palette-wrap.out .palette-backdrop { animation: fade .16s reverse forwards; }
@keyframes palIn { from { transform: translateY(-10px) scale(.98); opacity: 0; } }
.pal-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--text-3); }
.pal-input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; font-weight: 600; padding: 4px 0; color: var(--text); }
.pal-input:focus { outline: none; }
.pal-input::placeholder { color: var(--text-3); font-weight: 500; }
.pal-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; scrollbar-width: thin; }
.pal-group { font-size: 11.5px; font-weight: 700; color: var(--text-3); padding: 10px 10px 4px; }
.pal-opt { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; color: var(--text-2); font-weight: 600; font-size: 14px; }
.pal-opt.active { background: rgba(124, 92, 255, .18); color: var(--text); box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .3); }
.pal-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: rgba(160, 170, 255, .07); color: var(--text-2); }
.pal-opt.active .pal-ic { color: var(--violet-2); background: rgba(124, 92, 255, .18); }
.pal-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-label mark { background: none; color: var(--hand-ink); text-decoration: underline; text-decoration-color: rgba(255, 210, 122, .5); text-underline-offset: 3px; }
.pal-kind, .pal-hint { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.pal-hint.on { color: var(--mint); } .pal-hint.off { color: var(--text-3); }
.pal-empty { padding: 28px 16px; text-align: center; color: var(--text-2); font-size: 14px; display: grid; gap: 8px; }
.pal-empty-face { font-size: 20px; color: var(--hand-ink); }
.pal-foot { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); }
.pal-foot > span { display: inline-flex; align-items: center; gap: 4px; }
.pal-foot .sticker { font-size: 11px; padding: 3px 8px 4px; }
@media (max-width: 560px) { .palette-wrap { padding: 12px; } .pal-foot > span:not(.grow):not(.sticker) { display: none; } }

/* ---------- shortcuts sheet ---------- */
.shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
@media (max-width: 620px) { .shortcuts { grid-template-columns: minmax(0, 1fr); } }
.sc-h { font-size: 13px; font-weight: 800; color: var(--text-2); margin: 4px 0 8px; }
.sc-list { list-style: none; margin: 0; padding: 0; display: grid; }
.sc-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.sc-row:last-child { border-bottom: 0; }
.sc-keys { display: inline-flex; align-items: center; gap: 5px; min-width: 92px; }
.sc-then { font-size: 11px; color: var(--text-3); }
.sc-note { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding-top: 10px; }

/* ---------- stickers in context ---------- */
.sticker { font-size: 11.5px; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .digest-date { font-size: 15px; }
  .digest-body p { font-size: 15px; }
  .heat-now { font-size: 18px; }
}

/* ---------- reduced motion: no rolls, tilt-ins, draws or wiggles ---------- */
@media (prefers-reduced-motion: reduce) {
  .hc-tick, .hand-ann-ring { stroke-dashoffset: 0 !important; animation: none !important; }
  .login-blip, .login-blip .blip, .vignette svg > g, .boot-body, .boot-beat, .feed-item.fresh, .feed-item.fresh::after, .nav-link.active .nav-marker { animation: none !important; }
  .boot-beat { stroke-dashoffset: 0; }
  .feed-item.fresh::after { display: none; }
}

/* marginalia must never cause horizontal scroll */
.digest-aside .hand-note { max-width: 100%; }
.digest-note .hand-text { white-space: normal; text-align: right; }
@media (max-width: 640px) { .digest-note .hand-arrow { display: none; } .digest-note { font-size: 19px; } }
.savebar-note .hand-text { background: rgba(9, 11, 22, .82); backdrop-filter: blur(4px); border-radius: 10px; padding: 0 8px 2px; }