/* Assessments · iPad v4 — tablet interaction styles (pairs with touch.js). Tokens only; no hex, no font-size / font-weight. */

/* ---------- touch baseline: no grey tap flash, no 300 ms delay, no accidental text selection on controls ---------- */
button, [role=button], .lrow, .sw__row, .numpad__k, .when, label.app-field, .tab-primary, .app-segment { -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--primary-main); outline-offset: 2px; border-radius: 6px; }
.app, .app * { -webkit-touch-callout: none; }
.pane__bd, .form-scroll, .sheet__bd, .panel__bd { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scroll-behavior: smooth; }

/* ---------- press feedback (the finger always gets an answer) ---------- */
.btn, .bigbtn, .iconbtn, .tab-iconbox, .tab-primary, .app-segment, .app-radio, .numpad__k, .when, .fab, .tabnav button, .x, .hdr__back, .link, .chip, .type, .sw__act, .refs button { transition: transform .08s ease, filter .08s ease, background-color .15s ease; }
.btn:active, .bigbtn:active, .iconbtn:active, .tab-iconbox:active, .tab-primary:active, .app-radio:active, .when:active, .fab:active, .type:active, .sw__act:active, .refs button:active, .x:active, .hdr__back:active { transform: scale(.96); filter: brightness(.95); }
.app-segment:active, .tabnav button:active .ic, .link:active { transform: scale(.94); }
.lrow { transition: background-color .15s ease, transform .15s ease; }
.lrow:active { background: var(--surface-variant-a40); }
.is-holding { transform: scale(.985); transition: transform .45s ease !important; }
@media (hover: none) { .lrow:hover { background: transparent; } .lrow.on:hover { background: var(--primary-main-a10); } }

/* ---------- swipe-to-reveal rows ---------- */
.sw { position: relative; overflow: hidden; background: var(--on-primary); }
.sw__acts { position: absolute; right: 0; top: 0; bottom: 0; display: flex; }
.sw__act { width: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); border: 0; color: var(--on-primary); cursor: pointer; }
.sw__act--add { background: var(--primary-main); }
.sw__act--hist, .sw__act--edit { background: var(--on-primary-container); }
.sw__act--del { background: var(--error); }
.sw__row { position: relative; z-index: 1; background: var(--on-primary); transition: transform .28s cubic-bezier(.2, .8, .2, 1); touch-action: pan-y; }
.sw.dragging .sw__row { box-shadow: 4px 0 12px var(--neutral-primary-a10); }
.sw.armed .sw__acts .sw__act:first-child { width: 100%; transition: width .15s ease; }
.sw.armed .sw__acts { left: 0; }
.sw.armed .sw__acts .sw__act:not(:first-child) { display: none; }
.rec { padding-left: var(--sp-4); padding-right: var(--sp-4); }

/* ---------- navigation stack inside the detail pane (push / pop + swipe from the left edge) ---------- */
.stack { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--on-primary); transition: transform .18s ease, opacity .18s ease; will-change: transform; }
.stack.push { animation: pushIn .3s cubic-bezier(.2, .8, .2, 1); }
.stack.pop { animation: popIn .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes pushIn { from { transform: translateX(48px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes popIn { from { transform: translateX(-32px); opacity: 0; } to { transform: none; opacity: 1; } }
.pane--main { position: relative; }
.pane--main.is-backing::before { content: ''; position: absolute; inset: 0; background: var(--background); }
.edge-hint { position: absolute; left: 0; top: 0; bottom: 0; width: 20px; z-index: 2; }

/* ---------- collapsible list pane (sidebar toggle) ---------- */
.split .pane--list { transition: width .3s cubic-bezier(.2, .8, .2, 1), flex-basis .3s cubic-bezier(.2, .8, .2, 1), margin .3s, opacity .2s; }
.split.is-collapsed .pane--list { width: 0; flex-basis: 0; margin-right: calc(var(--sp-16) * -1); opacity: 0; pointer-events: none; }
.tab-iconbox.is-on { background: var(--on-primary-container); }

/* ---------- sticky group labels ---------- */
.pane__bd .label { position: sticky; top: 0; z-index: 2; background: var(--on-primary); }

/* ---------- pull to refresh ---------- */
.pane--list { position: relative; }
.ptr { position: absolute; left: 0; right: 0; top: 56px; height: 48px; display: flex; align-items: center; justify-content: center; gap: var(--sp-8); color: var(--neutral-secondary); opacity: 0; }
.ptr .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--outline-variant); border-top-color: var(--primary-main); transition: transform .2s; }
.ptr.ready .spinner { transform: rotate(180deg); }
.ptr.spin .spinner { animation: spin .7s linear infinite; }
.ptr .when-ready { display: none; } .ptr.ready .when-ready { display: inline; } .ptr.ready .when-pull { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
[data-ptr] { position: relative; z-index: 1; background: var(--on-primary); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }

/* ---------- bottom sheet: grabber, detents, drag ---------- */
.sheet { transition: transform .26s cubic-bezier(.2, .8, .2, 1), max-height .26s cubic-bezier(.2, .8, .2, 1); touch-action: pan-y; }
.sheet[data-detent=medium] { max-height: 64%; }
.sheet[data-detent=large] { max-height: calc(100% - 48px); height: calc(100% - 48px); }
.sheet__drag { display: flex; justify-content: center; padding: var(--sp-8) 0 var(--sp-4); cursor: grab; touch-action: none; }
.sheet__drag .sheet__grab { margin: 0; width: 40px; height: 5px; border-radius: 3px; }
.sheet__hd[data-drag] { cursor: grab; touch-action: none; padding-top: var(--sp-4); }

/* ---------- number pad ---------- */
.pad-display { display: flex; align-items: baseline; gap: var(--sp-8); padding: var(--sp-12) var(--sp-16); border-radius: 12px; background: var(--background); min-height: 80px; }
.pad-display.is-err { box-shadow: inset 0 0 0 1.5px var(--error); }
.pad-caret { display: inline-block; width: 3px; height: 1em; margin: 0 2px; vertical-align: -.14em; border-radius: 2px; background: var(--primary-main); animation: pad-caret 1.06s step-end infinite; }   /* text cursor: after the digits, before the "0" placeholder; each key redraws it, so it holds solid while typing and blinks when idle */
@keyframes pad-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pad-caret { animation: none; } }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.numpad__k { height: 60px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: var(--on-primary); color: var(--neutral-primary); box-shadow: 0 1px 0 var(--outline-variant), inset 0 0 0 1px var(--surface-variant); cursor: pointer; }
.numpad__k--fn { background: var(--background); }
.numpad__k:active, .numpad__k.is-pressed { transform: scale(.95); background: var(--surface-variant); }

/* ---------- segmented control with a sliding indicator ---------- */
.app-segmented.has-ind { position: relative; }
.seg-ind { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 5px; background: var(--primary-main); transition: transform .3s cubic-bezier(.2, .8, .2, 1), width .3s cubic-bezier(.2, .8, .2, 1); z-index: 0; pointer-events: none; }
.has-ind .app-segment { position: relative; z-index: 1; }
.has-ind .app-segment--active { background: transparent; }

/* ---------- graph scrub ---------- */
.graph svg { touch-action: pan-y; cursor: crosshair; }
.graph-hint { color: var(--neutral-secondary); }

/* ---------- invalid: shake ---------- */
.is-shake { animation: shake .36s ease; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

/* ---------- context menu (long-press) ---------- */
.pop.ctx { min-width: 260px; transform-origin: top left; animation: ctxIn .18s cubic-bezier(.2, .8, .2, 1); }
.pop.ctx .pop__head { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-8) var(--sp-12) var(--sp-12); border-bottom: 1px solid var(--surface-variant); margin-bottom: var(--sp-4); }
@keyframes ctxIn { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- hold ⌘: shortcut sheet ---------- */
.kbd-sheet { position: absolute; left: 50%; top: 50%; z-index: 50; transform: translate(-50%, -50%); width: 420px; display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-20); border-radius: 16px; background: var(--on-primary); box-shadow: 0 16px 48px var(--neutral-primary-a30); color: var(--on-surface-variant); }
.kbd-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); padding: var(--sp-4) 0; }
kbd { min-width: 28px; padding: 2px var(--sp-8); border-radius: 6px; background: var(--background); color: var(--on-primary-container); text-align: center; font-family: inherit; }

/* ---------- orientation: portrait 810 × 1080 (default) · landscape 1080 × 810 ---------- */
.app.is-land { width: 1080px; height: 810px; }
.app.is-land .pane--list { width: 320px; flex-basis: 320px; }
.app.is-land .tabnav { height: 76px; }
.app { transition: width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1); }
@media (max-width: 1200px) and (max-height: 830px) and (orientation: landscape) { .app, .app.is-land { width: 100vw; height: 100dvh; border-radius: 0; } body { padding: 0; background: var(--background); } .devbar { display: none; } }

/* ---------- review bar (desktop only, outside the device) ---------- */
.devbar { position: fixed; left: var(--sp-16); top: var(--sp-24); width: 220px; display: flex; flex-direction: column; gap: var(--sp-12); color: var(--on-primary); }
.devbar .grp { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-12); border-radius: 12px; background: var(--neutral-primary-a50); }
.devbar button { height: 36px; border: 0; border-radius: 8px; background: var(--on-primary-a10); color: var(--on-primary); cursor: pointer; }
.devbar button.on { background: var(--on-primary); color: var(--on-primary-container); }
.devbar .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.devbar ul { margin: 0; padding-left: var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 1340px) { .devbar { display: none; } }

/* just-saved row */
.lrow.is-flash { animation: flash 2.4s ease-out; }
/* horizontal gestures belong to the app (edge-back, row swipes); vertical stays native scrolling */
.pane--main .stack, .pane--main .pane__bd { touch-action: pan-y; }
/* landscape: keep the graph from pushing the records off screen */
.app.is-land .graph svg { max-height: 240px; }
/* review bar never overlaps the device */
@media (min-width: 1341px) and (max-width: 1660px) { body:has(.app.is-land) { justify-content: flex-start; padding-left: 256px; } }