/* Library-specific components, layered on tokens.css + app.css (ported from Iregi). */
.auth-bg{background:linear-gradient(135deg,var(--c-primary),color-mix(in srgb,var(--c-accent) 60%,var(--c-primary)));}
.auth-messages{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:60;width:min(92vw,28rem);}

/* Search trigger + command palette ------------------------------------------ */
.searchtrigger{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .7rem;border-radius:.65rem;
  border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-muted);font-size:.85rem;}
.searchtrigger kbd,.palette kbd{margin-left:auto;font-size:.65rem;padding:.1rem .35rem;border-radius:.35rem;
  border:1px solid var(--c-border);background:var(--c-surface-2);color:var(--c-muted);font-family:inherit;}
.palette{padding:0;border:0;background:transparent;width:min(94vw,40rem);max-height:80vh;margin:8vh auto auto;}
.palette::backdrop{background:rgba(2,6,15,.45);backdrop-filter:blur(2px);}
.palette-box{background:var(--c-surface);border:1px solid var(--c-border);border-radius:1rem;box-shadow:var(--shadow);overflow:hidden;}
.palette-input{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid var(--c-border);color:var(--c-muted);}
.palette-input input{flex:1;border:0!important;box-shadow:none!important;background:transparent!important;font-size:1rem;padding:.2rem 0;color:var(--c-ink);}
.palette-results{max-height:60vh;overflow-y:auto;}
.palette-group{padding:.5rem 1rem .2rem;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);}
.palette-item{display:flex;align-items:center;gap:.7rem;padding:.55rem 1rem;font-size:.9rem;}
.palette-item:hover,.palette-item:focus{background:var(--c-surface-2);outline:none;}

/* Scan station ------------------------------------------------------------------ */
.scanbar{display:flex;gap:.5rem;align-items:stretch;}
.scanbar input{flex:1;font-size:1.15rem;padding:.85rem 1rem;letter-spacing:.02em;min-width:0;}
.scanbar .btn{padding:.75rem 1rem;}
.scan-hint{font-size:.75rem;color:var(--c-muted);margin-top:.4rem;}
.scan-result{border-radius:1rem;padding:1rem 1.1rem;border:2px solid transparent;}
.scan-ok{background:var(--c-success-soft);border-color:color-mix(in srgb,var(--c-success) 45%,transparent);}
.scan-warn{background:var(--c-warning-soft);border-color:color-mix(in srgb,var(--c-warning) 45%,transparent);}
.scan-error{background:var(--c-danger-soft);border-color:color-mix(in srgb,var(--c-danger) 45%,transparent);}
.scan-ok .scan-title{color:var(--c-success);} .scan-warn .scan-title{color:var(--c-warning);} .scan-error .scan-title{color:var(--c-danger);}
.scan-title{font-size:1.15rem;font-weight:750;display:flex;align-items:center;gap:.5rem;}
.flash-ok{animation:flashok .6s ease-out;} .flash-warn{animation:flashwarn .8s ease-out;} .flash-error{animation:flasherr .8s ease-out;}
@keyframes flashok{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c-success) 60%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
@keyframes flashwarn{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c-warning) 60%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
@keyframes flasherr{0%,40%{transform:translateX(0)}10%,30%{transform:translateX(-6px)}20%{transform:translateX(6px)}}

/* Camera overlay */
.camera{position:fixed;inset:0;z-index:70;background:#000;display:flex;flex-direction:column;}
.camera[hidden]{display:none;}
.camera-view{flex:1;position:relative;overflow:hidden;}
.camera-view video{width:100%;height:100%;object-fit:cover;}
.camera-frame{position:absolute;inset:25% 12%;border:3px solid rgba(255,255,255,.85);border-radius:1rem;box-shadow:0 0 0 999px rgba(0,0,0,.35);pointer-events:none;}
.camera-bar{display:flex;gap:.75rem;justify-content:center;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));background:#000;}
.camera-bar .btn{background:rgba(255,255,255,.15);color:#fff;}
.camera-msg{position:absolute;left:0;right:0;bottom:1rem;text-align:center;color:#fff;font-size:.9rem;text-shadow:0 1px 3px #000;}

/* Book cover thumbnails */
.cover{width:3rem;height:4.2rem;border-radius:.4rem;object-fit:cover;background:var(--c-surface-2);flex:0 0 auto;
  display:grid;place-items:center;color:var(--c-muted);border:1px solid var(--c-border);overflow:hidden;}
.cover-lg{width:6rem;height:8.4rem;}
.cover img{width:100%;height:100%;object-fit:cover;}

/* Toasts (undo) */
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(5.5rem + env(safe-area-inset-bottom));z-index:80;display:grid;gap:.5rem;width:min(92vw,26rem);}
@media (min-width:768px){.toasts{bottom:1.5rem;}}
.toast{background:var(--c-ink);color:var(--c-surface);border-radius:.8rem;padding:.7rem .9rem;display:flex;align-items:center;gap:.75rem;font-size:.875rem;box-shadow:var(--shadow);}
.toast button{margin-left:auto;font-weight:700;color:var(--c-accent);}

/* Touch targets: at least 44px on coarse pointers */
@media (pointer:coarse){.btn,.navlink,.tabitem,.chip{min-height:44px;}}
.counter-big{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;}
.progress{height:.5rem;border-radius:999px;background:var(--c-surface-2);overflow:hidden;}
.progress > span{display:block;height:100%;background:var(--c-primary);border-radius:999px;}

/* `overflow-x:hidden` on html/body (app.css) turns body into a scroll container on
   some mobile browsers; `clip` prevents sideways scroll without that side effect. */
html,body{overflow-x:clip;}
.dropzone{display:grid;place-items:center;gap:.4rem;text-align:center;padding:2rem 1rem;border:2px dashed var(--c-border);border-radius:1rem;background:var(--c-surface-2);cursor:pointer;}
.dropzone:hover{border-color:var(--c-primary);}
/* Chips that wrap a real checkbox or radio reflect its state. */
.chip input[type=checkbox],.chip input[type=radio]{margin-right:.35rem;accent-color:var(--c-primary);}
.chip:has(input:checked){background:var(--c-primary-soft);border-color:transparent;color:var(--c-primary-600);font-weight:600;}
.rowcheck{width:1.1rem;height:1.1rem;accent-color:var(--c-primary);flex:0 0 auto;}
.bulkbar{position:sticky;bottom:5rem;z-index:15;}
@media (min-width:768px){.bulkbar{bottom:1rem;}}
/* The `hidden` attribute must win over utility display classes (flex, grid…). */
[hidden]{display:none!important;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.htmx-indicator{opacity:0;transition:opacity .2s;} .htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1;}
.station-title{display:flex;gap:.9rem;align-items:center;}
/* Segmented control (desk mode) */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.25rem;padding:.3rem;border-radius:.9rem;background:var(--c-surface-2);border:1px solid var(--c-border);}
.seg-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem;border-radius:.65rem;font-weight:600;color:var(--c-muted);}
.seg-btn.on{background:var(--c-surface);color:var(--c-primary-600);box-shadow:0 1px 2px rgba(0,0,0,.08);}
.text-success{color:var(--c-success);}
/* Charts (apps/reports/charts.py): data in the primary colour, chrome recessive. */
.chart-wrap{display:flex;gap:.5rem;}
.chart-y{display:flex;flex-direction:column;justify-content:space-between;font-size:.7rem;color:var(--c-muted);padding-bottom:1.3rem;text-align:right;min-width:1.5rem;}
.chart-plot{flex:1;min-width:0;}
.chart{width:100%;display:block;}
.chart-x{display:flex;justify-content:space-between;font-size:.7rem;color:var(--c-muted);margin-top:.35rem;}
.chart-fill{fill:var(--c-primary);}
.chart-bar:hover .chart-fill{fill:var(--c-primary-600);}
.chart-axis{stroke:var(--c-border);stroke-width:1;}
.chart-grid{stroke:var(--c-border);stroke-width:1;stroke-dasharray:3 4;}
.kpi{display:flex;flex-direction:column;gap:.15rem;padding:1rem;border-radius:1rem;background:var(--c-surface);border:1px solid var(--c-border);}
.kpi-value{font-size:1.8rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;}
.kpi-label{font-size:.78rem;color:var(--c-muted);display:flex;align-items:center;gap:.35rem;}
.quick{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1rem .5rem;border-radius:1rem;background:var(--c-surface);border:1px solid var(--c-border);text-align:center;font-weight:600;font-size:.85rem;}
.quick:hover{border-color:var(--c-primary);}
.quick .q-ico{width:2.6rem;height:2.6rem;border-radius:.8rem;display:grid;place-items:center;background:var(--c-primary-soft);color:var(--c-primary-600);}
.dot-badge{position:absolute;top:.45rem;right:.45rem;width:.5rem;height:.5rem;border-radius:999px;background:var(--c-danger);box-shadow:0 0 0 2px var(--c-surface);}