/* Echo 560 — εμφάνιση (Karagiannis Security Systems). Παλέτα «Γραφίτης»: μαύρο της μάρκας + τιρκουάζ.
   Πρώτα κινητό (360–430 px), μετά υπολογιστής. Θέμα ανοιχτό/σκούρο από τη συσκευή. Μόνο γραμματοσειρές συστήματος. */

:root {
  color-scheme: light dark;
  interpolate-size: allow-keywords;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Roboto Mono", Consolas, monospace;
  --bg: #f6f6f5;
  --surface: #ffffff;
  --surface-2: #f0efee;
  --surface-3: #e6e4e3;
  --raised: #ffffff;
  --line: #e3e1e0;
  --field-border: #8a8584;
  --text: #231f20;
  --text-2: #5e5958;
  --accent: #087b9b;
  --accent-text: #066e8b;
  --on-accent: #ffffff;
  --accent-container: #e0f2f6;
  --on-accent-container: #05506a;
  --missed: #b93815;
  --missed-bg: #fbeae5;
  --on-missed: #ffffff;
  --warn: #8a5a00;
  --warn-bg: #fff3d6;
  --ok: #0b7a5e;
  --ok-bg: #e3f4ee;
  --night: #5b52c6;
  --chart-muted: #8a8584;
  --focus: #087b9b;
  --shadow-1: 0 1px 2px rgb(16 24 32 / .06), 0 1px 1px rgb(16 24 32 / .04);
  --shadow-2: 0 6px 16px -4px rgb(16 24 32 / .12), 0 2px 4px -2px rgb(16 24 32 / .06);
  --shadow-3: 0 18px 48px -12px rgb(16 24 32 / .28);
  --edge: 0 0 0 0 transparent;
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px;
  --gutter: 16px;
  --nav-h: 64px;
  --mini-h: 0px;
  --stack-h: 112px;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-enter: cubic-bezier(.05, .7, .1, 1);
  --ease-exit: cubic-bezier(.3, 0, .8, .15);
  --ease-spring: linear(0, .161 8%, .43 17%, .659 25%, .815 33%, .909 42%, .96 50%, .985 58%, .996 67%, 1 75%, 1);
  --heat-0: #f0efee; --heat-1: #d3ecf2; --heat-2: #a3d5e2; --heat-3: #62b3c9; --heat-4: #2a93af; --heat-5: #087b9b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121111;
    --surface: #1b1a1a;
    --surface-2: #242222;
    --surface-3: #2f2c2c;
    --raised: #2a2828;
    --line: #363232;
    --field-border: #726d6c;
    --text: #edebea;
    --text-2: #a9a3a2;
    --accent: #4cc2dd;
    --accent-text: #4cc2dd;
    --on-accent: #032029;
    --accent-container: #0c3a46;
    --on-accent-container: #bdebf6;
    --missed: #ff8a70;
    --missed-bg: #3a1914;
    --on-missed: #2a0e08;
    --warn: #f2c14e;
    --warn-bg: #33270a;
    --ok: #4fd1b0;
    --ok-bg: #11342b;
    --night: #a59cff;
    --chart-muted: #6f6a69;
    --focus: #4cc2dd;
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: 0 18px 48px -12px rgb(0 0 0 / .6);
    --edge: inset 0 1px 0 rgb(255 255 255 / .05);
    --heat-0: #242222; --heat-1: #113842; --heat-2: #16535f; --heat-3: #1e7385; --heat-4: #349ab2; --heat-5: #4cc2dd;
  }
}

/* ------------------------------------------------------------------ βάση */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.5 var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--accent); color: var(--on-accent); border-radius: 10px; }
.skip:focus { top: 8px; }
.muted { color: var(--text-2); }
.small { font-size: .8125rem; }
.t-bad { color: var(--missed); }
time, .row-dur, .tile-value, .player-time, .dock-time, .top-n, .mrow-val, .num, .cell-n, .act-badge, .chip-count, .legend strong { font-variant-numeric: tabular-nums; }
.i { width: 24px; height: 24px; flex: none; }
.i-xs { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ σκελετός */
.app { min-height: 100dvh; padding-bottom: calc(var(--nav-h) + var(--mini-h) + env(safe-area-inset-bottom, 0px)); }
.app.has-dock { --mini-h: 64px; }
.frame { max-width: 760px; margin: 0 auto; }
.main { padding: 0 var(--gutter) 28px; outline: none; }
.rail { display: none; }

.tabbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); padding: 6px 8px env(safe-area-inset-bottom, 0px);
  background: color-mix(in oklab, var(--surface) 88%, transparent); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px);
  border-top: 1px solid var(--line); view-transition-name: tabbar; }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-2); font-size: .75rem; line-height: 1rem; font-weight: 600; text-decoration: none !important; }
.tab-ic { position: relative; display: grid; place-items: center; width: 56px; height: 32px; border-radius: 999px; transition: background 200ms var(--ease); }
.tab.is-active { color: var(--text); }
.tab.is-active .tab-ic { background: var(--accent-container); color: var(--on-accent-container); }
.tab-badge { position: absolute; top: -4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--missed); color: var(--on-missed); font-size: .6875rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
@media (min-width: 600px) { .tab { flex-direction: row; gap: 8px; font-size: .875rem; } .tab-ic { width: 44px; } }

/* ------------------------------------------------------------------ κορυφή λίστας: αναζήτηση + chips */
.list-head { position: sticky; top: 0; z-index: 20; margin: 0 calc(-1 * var(--gutter)); padding: calc(8px + env(safe-area-inset-top, 0px)) var(--gutter) 6px;
  background: color-mix(in oklab, var(--bg) 90%, transparent); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px); view-transition-name: appbar; }
.search { display: flex; align-items: center; gap: 10px; margin: 0; }
.search-mark { width: 28px; height: 28px; flex: none; }
.search-box { flex: 1; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 6px 0 14px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); border: 1px solid transparent; transition: border-color 200ms var(--ease), background 200ms var(--ease); }
.search-box .i { width: 20px; height: 20px; }
.search-box:focus-within { background: var(--surface); border-color: var(--accent); }
.search-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 1rem; }
.search-box input::placeholder { color: var(--text-2); }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-clear { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text-2); }
.search-clear:hover { background: color-mix(in oklab, var(--text) 8%, transparent); text-decoration: none; }
.search-clear .i { width: 20px; height: 20px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 6px var(--gutter); scroll-snap-type: x proximity; scroll-padding: var(--gutter);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.chips-scroll::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text-2); font-size: .875rem; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none !important; scroll-snap-align: start; transition: background 200ms var(--ease), color 200ms var(--ease); }
.chip:hover { background: var(--surface-2); }
.chip.is-on { background: var(--accent-container); border-color: transparent; color: var(--on-accent-container); }
.chip .i { width: 16px; height: 16px; }
.i-chip-check { width: 16px; height: 16px; }
.i-chip-x { width: 16px; height: 16px; margin-right: -4px; }
.chip-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--missed); color: var(--on-missed); font-size: .75rem; }
.chip-ctx { background: var(--text); color: var(--bg); }
.chip-ctx:hover { background: var(--text); }
.new-calls { display: block; margin: 6px auto 0; width: max-content; padding: 8px 16px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: .875rem; box-shadow: var(--shadow-2); }
.new-calls[hidden] { display: none; }
.results { color: var(--text-2); font-size: .8125rem; font-weight: 600; margin: 6px 4px 0; }

/* ------------------------------------------------------------------ λίστα κλήσεων */
.list, .more, .list-end, #list-status { overflow-anchor: none; }
.day { content-visibility: auto; contain-intrinsic-size: auto 600px; }
.day-h { position: sticky; top: var(--stack-h); z-index: 5; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; height: 40px; padding: 14px 4px 4px; background: var(--bg); font-size: .8125rem; font-weight: 600; color: var(--text-2); }
.day-sum { font-size: .75rem; font-weight: 400; }
.calls { list-style: none; margin: 0; padding: 4px 0; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1), var(--edge); }
.day-cont .calls { margin-top: 8px; }
.calls > li { position: relative; }
.calls > li + li::before { content: ""; position: absolute; left: 68px; right: 0; top: 0; height: 1px; background: var(--line); }
.calls > li:has(> .call[open]) + li::before, .calls > li:has(> .call[open])::before { display: none; }
.call > summary { list-style: none; }
.call > summary::-webkit-details-marker { display: none; }
.row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 72px; padding: 10px 16px; cursor: pointer;
  scroll-margin-top: calc(var(--stack-h) + 44px); scroll-margin-bottom: calc(var(--nav-h) + var(--mini-h) + 8px); border-radius: 0; transition: background 100ms var(--ease); }
.row:hover { background: color-mix(in oklab, var(--text) 5%, transparent); }
.row:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); }
.row:active { background: color-mix(in oklab, var(--text) 10%, transparent); }
.row-main { display: flex; flex-direction: column; min-width: 0; }
.row-title { font-size: 1.0625rem; line-height: 1.375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; color: var(--text-2); font-size: .875rem; line-height: 1.25rem; }
.row-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { display: flex; flex-direction: column; align-items: flex-end; margin-left: 8px; color: var(--text-2); font-size: .875rem; line-height: 1.25rem; }
.row-meta time { font-weight: 500; }
.row-dur { font-size: .75rem; line-height: 1rem; min-height: 1rem; }
.i-open { display: none; width: 20px; height: 20px; color: var(--text-2); }
.tone-missed .row-title, .tone-missed .row-text, .tone-missed time { color: var(--missed); }
.tone-quiet .row-title { color: var(--text-2); font-weight: 500; }
.tag { flex: none; height: 20px; padding: 0 6px; border: 1px solid var(--field-border); border-radius: var(--r-xs); font-size: .75rem; line-height: 18px; color: var(--text-2); }

/* avatar = σύμβολο κατάστασης */
.av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--surface-3); color: var(--text-2); }
.av .i { width: 20px; height: 20px; }
.av-missed { background: var(--missed-bg); color: var(--missed); }
.av-warn { background: var(--warn-bg); color: var(--warn); }
.av-quiet { background: var(--surface-2); color: var(--text-2); }
.av-neutral { background: var(--surface-3); color: var(--text-2); }

/* ανοιχτή γραμμή → κάρτα */
.call::details-content { block-size: 0; overflow: clip; transition: block-size 300ms var(--ease-spring), content-visibility 300ms allow-discrete; }
.call[open]::details-content { block-size: auto; }
.call[open]:has(.act-more[open])::details-content { overflow: visible; }
.call.snap::details-content { transition: none; }
/* ίδια περιθώρια κύλισης με τη γραμμή: η κεφαλίδα δεν κρύβεται κάτω από την αναζήτηση ή το mini-player */
.call { transition: margin 300ms var(--ease-spring); scroll-margin-top: calc(var(--stack-h) + 44px); scroll-margin-bottom: calc(var(--nav-h) + var(--mini-h) + 8px); }
.call[open] { margin: 8px; border-radius: var(--r-md); background: var(--raised); box-shadow: var(--shadow-2), var(--edge); }
.call[open] > .row { border-radius: var(--r-md) var(--r-md) 0 0; }
.call[open] .i-open { display: block; position: absolute; right: 12px; top: 10px; }
.call[open] .row-meta { margin-right: 22px; }
.call-body { display: flex; flex-direction: column; gap: 14px; padding: 2px 16px 12px; animation: body-in 200ms 60ms both; }
@keyframes body-in { from { opacity: 0; } to { opacity: 1; } }
.status-strip { display: flex; flex-direction: column; gap: 2px; }
.status-a { display: flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 600; }
.status-b { font-size: .75rem; color: var(--text-2); }
.strip { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 6px 6px 12px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); font-size: .875rem; }
.strip .i { width: 18px; height: 18px; }
.strip-missed { background: var(--missed-bg); color: var(--missed); font-weight: 600; }
.strip span { flex: 1; }
.btn-strip { margin-left: auto; min-height: 36px; padding: 0 10px; border-radius: var(--r-sm); color: inherit; font-weight: 700; }
.btn-strip:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
.note { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: .875rem; }
.note .i { width: 16px; height: 16px; }

/* player */
.player { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px 0; }
.player-time { display: flex; justify-content: space-between; color: var(--text-2); font-size: .75rem; padding: 0 2px; }
.player-ctl { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; height: 60px; }
.player-ctl .chip-speed { position: absolute; right: 0; }
.player-play { display: grid; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; transition: transform 100ms var(--ease); }
.player-play:active { transform: scale(.94); }
.player-play .i { width: 28px; height: 28px; }
.i-pause { display: none; }
.is-playing .player-play .i-play, .dock.is-playing .i-play { display: none; }
.is-playing .player-play .i-pause, .dock.is-playing .i-pause { display: block; }
.player-sticky { position: sticky; bottom: calc(var(--nav-h) + 8px + env(safe-area-inset-bottom, 0px)); z-index: 10; margin-top: 12px; padding: 8px 12px 0; border-radius: var(--r-md); background: var(--raised); box-shadow: var(--shadow-2), var(--edge); border: 1px solid var(--line); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; accent-color: var(--accent); }
input[type=range] { --p: 0%; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--p), var(--field-border) var(--p)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--field-border); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--raised); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid var(--raised); }
input[type=range]:disabled::-webkit-slider-runnable-track { background: var(--surface-3); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--accent); }
input[type=range]:disabled { cursor: default; }
input[type=range]:disabled::-webkit-slider-thumb { background: var(--chart-muted); }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; flex: none; }
.icon-btn:hover { background: color-mix(in oklab, var(--text) 8%, transparent); text-decoration: none; }
.chip-speed { height: 32px; min-width: 52px; padding: 0 10px; justify-content: center; }

/* κείμενο (προεπισκόπηση) */
.tx { display: flex; flex-direction: column; gap: 4px; }
.tx-label { font-size: .75rem; font-weight: 600; color: var(--text-2); }
.tx-clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .875rem; line-height: 1.25rem; }
.tx-clamp b { font-weight: 600; }
.tx-quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--missed); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--surface-2); font-size: .9375rem;
  display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.skel { display: block; height: 12px; margin: 4px 0; border-radius: var(--r-xs); background: var(--surface-3); animation: pulse 1.2s ease-in-out infinite alternate; }
.skel-short { width: 60%; }
@keyframes pulse { from { opacity: .6; } to { opacity: 1; } }
.link-more { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 36px; font-weight: 600; font-size: .875rem; color: var(--accent-text); }

/* ενέργειες */
.acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0 -8px; }
.act { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-height: 64px; padding: 8px 2px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text); font-size: .75rem; font-weight: 600; text-align: center; line-height: 1rem; cursor: pointer; text-decoration: none !important; }
.act:hover { background: color-mix(in oklab, var(--text) 6%, transparent); }
.act .i { width: 24px; height: 24px; color: var(--accent-text); }
.act:disabled { opacity: .4; cursor: default; }
.act-ic { position: relative; display: block; }
.act-badge { position: absolute; top: -6px; left: 16px; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: .6875rem; line-height: 18px; }
.act-more { padding: 0; }
.act-more > summary { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 64px; padding: 8px 2px; border-radius: var(--r-sm); cursor: pointer; }
.act-more > summary::-webkit-details-marker { display: none; }
.act-more > summary:hover { background: color-mix(in oklab, var(--text) 6%, transparent); }
.pop { position: absolute; right: 0; bottom: calc(100% + 4px); z-index: 15; min-width: 240px; padding: 6px; border-radius: var(--r-md); background: var(--raised); box-shadow: var(--shadow-3), var(--edge); border: 1px solid var(--line); text-align: left; }
.menu-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); font-size: .9375rem; font-weight: 500; cursor: pointer; text-decoration: none !important; }
.menu-row:hover { background: var(--surface-2); }
.menu-row .i { width: 20px; height: 20px; color: var(--text-2); }
.more-phones { display: flex; flex-direction: column; gap: 6px; }
.more-phones .label { color: var(--text-2); font-size: .75rem; font-weight: 600; }

.more { display: flex; justify-content: center; margin: 16px 0 4px; }
.list-end { text-align: center; color: var(--text-2); font-size: .8125rem; margin: 18px 0 6px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 16px; text-align: center; color: var(--text-2); }
.empty h2 { color: var(--text); font-size: 1.0625rem; font-weight: 600; }
.empty-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface-2); }
.empty-ic .i { width: 28px; height: 28px; }
.empty-ok .empty-ic { background: var(--ok-bg); color: var(--ok); }

.context { display: flex; align-items: center; gap: 12px; margin: 8px 0 0; padding: 12px 6px 12px 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1), var(--edge); }
.context-main { flex: 1; min-width: 0; }
.context-main h2 { font-size: 1.0625rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.context-main p { color: var(--text-2); font-size: .875rem; }

/* ------------------------------------------------------------------ κουμπιά */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; font-weight: 600; font-size: .9375rem; cursor: pointer; text-decoration: none !important; transition: background 100ms var(--ease), transform 100ms var(--ease); }
.btn:active { transform: scale(.98); }
.btn .i { width: 20px; height: 20px; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: color-mix(in oklab, var(--accent) 88%, var(--text)); }
.btn-tonal { background: var(--accent-container); color: var(--on-accent-container); }
.btn-tonal:hover { background: color-mix(in oklab, var(--accent-container) 90%, var(--text)); }
.btn-danger { background: var(--missed-bg); color: var(--missed); }
.btn-text { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 0; background: transparent; color: var(--text-2); font-weight: 600; cursor: pointer; border-radius: 999px; }
.btn-text:hover { background: color-mix(in oklab, var(--text) 6%, transparent); text-decoration: none; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: .875rem; }
.btn-sm .i { width: 18px; height: 18px; }
.btn-block { display: flex; width: 100%; }

/* ------------------------------------------------------------------ mini-player */
.dock { position: fixed; z-index: 45; left: 8px; right: 8px; bottom: calc(var(--nav-h) + 8px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 44px; align-items: center; gap: 8px;
  padding: 8px; border-radius: var(--r-md); background: var(--raised); color: var(--text); box-shadow: var(--shadow-3), var(--edge); border: 1px solid var(--line); animation: dock-in 300ms var(--ease-enter); }
.dock[hidden] { display: none; }
@keyframes dock-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
/* input.dock-seek: ίδια ειδικότητα με το input[type=range]{width:100%} και πιο κάτω, άρα κερδίζει (αλλιώς βγαίνει έξω από την κάρτα) */
input.dock-seek { position: absolute; left: 14px; right: 14px; top: -11px; width: auto; }
.dock-play { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.dock-play .i { width: 22px; height: 22px; }
.dock-info { display: flex; flex-direction: column; min-width: 0; color: var(--text); text-decoration: none !important; }
.dock-title { font-weight: 600; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-time { font-size: .75rem; color: var(--text-2); }

/* ------------------------------------------------------------------ sheet / toast */
.sheet { width: 100%; max-width: 520px; margin: auto auto 0; padding: 0; border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--raised); color: var(--text); box-shadow: var(--shadow-3), var(--edge); overscroll-behavior: contain; }
.sheet::backdrop { background: rgb(10 8 8 / .45); }
.sheet[open] { animation: sheet-in 400ms var(--ease-enter); }
@keyframes sheet-in { from { transform: translateY(48px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.sheet-grip { width: 32px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: var(--field-border); opacity: .6; }
.sheet-title { font-size: 1.375rem; line-height: 1.75rem; font-weight: 600; text-align: center; }
.sheet-sub { display: flex; flex-direction: column; align-items: center; color: var(--text-2); margin-bottom: 12px; }
.sheet-sub .num { color: var(--text); font-size: 1.25rem; font-weight: 600; letter-spacing: .02em; }
.sheet-actions { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px 16px; border-radius: var(--r-md); background: var(--surface-2); color: var(--text); text-decoration: none !important; }
.opt:hover { background: var(--surface-3); }
.opt > .i { width: 28px; height: 28px; color: var(--accent-text); }
.opt-main { display: flex; flex-direction: column; }
.opt-title { font-weight: 600; font-size: 1rem; }
.opt-sub { color: var(--text-2); font-size: .8125rem; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--nav-h) + var(--mini-h) + 20px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); width: max-content; max-width: calc(100% - 32px);
  padding: 12px 16px; border-radius: var(--r-sm); background: var(--text); color: var(--bg); font-size: .875rem; font-weight: 500; box-shadow: var(--shadow-3); opacity: 0; transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------------ σελίδες */
.page-head { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: calc(8px + env(safe-area-inset-top, 0px)) 0 4px; }
.page-head h1 { font-size: 1.375rem; line-height: 1.75rem; font-weight: 700; flex: 1; }
.page-sub { color: var(--text-2); font-size: .875rem; }
.back { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; border-radius: 50%; color: var(--text); flex: none; }
.back:hover { background: color-mix(in oklab, var(--text) 8%, transparent); text-decoration: none; }
.card { margin: 12px 0; padding: 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1), var(--edge); border: 0; }
.card-flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.card-head h2 { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.card-lead { color: var(--text-2); font-size: .875rem; margin-bottom: 10px; }
.card-lead strong { color: var(--text); }
.card-note { color: var(--text-2); font-size: .8125rem; margin-top: 8px; }
.card-big { color: var(--text-2); margin-bottom: 6px; }
.card-big strong { font-size: 2rem; line-height: 1.1; color: var(--text); margin-right: 6px; font-variant-numeric: tabular-nums; }
.info { position: relative; }
.info > summary { list-style: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--text-2); cursor: pointer; }
.info > summary::-webkit-details-marker { display: none; }
.info > summary .i { width: 18px; height: 18px; }
.info[open] > summary { background: var(--surface-2); color: var(--text); }
.info > p { position: absolute; right: 0; top: 40px; z-index: 12; width: min(300px, 80vw); padding: 12px 14px; border-radius: var(--r-sm); background: var(--text); color: var(--bg); font-size: .8125rem; line-height: 1.45; box-shadow: var(--shadow-3); }

/* στατιστικά */
.stats-head { gap: 10px; }
.stats-chips { position: sticky; top: 0; z-index: 20; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; background: color-mix(in oklab, var(--bg) 90%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.range-line { color: var(--text-2); font-size: .8125rem; margin: 2px 2px 0; }
.custom { position: relative; flex: none; }
.custom > summary { list-style: none; }
.custom > summary::-webkit-details-marker { display: none; }
/* αναδυόμενη φόρμα ημερομηνιών: Popover API (πάνω από όλα, έξω από τη γραμμή των chips).
   Κρυφή από προεπιλογή· φαίνεται με :popover-open ή, σε παλιούς browsers, με .is-open (app.js). Κύλιση σε χαμηλές οθόνες. */
.custom-form[popover] { display: none; position: fixed; inset: calc(env(safe-area-inset-top, 0px) + 96px) auto auto 50%; transform: translateX(-50%); width: min(360px, calc(100% - 2 * var(--gutter)));
  max-height: calc(100vh - 96px - env(safe-area-inset-top, 0px) - 16px); max-height: calc(100dvh - 96px - env(safe-area-inset-top, 0px) - 16px); overflow: auto; overscroll-behavior: contain;
  margin: 0; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-md); background: var(--raised); color: var(--text); box-shadow: var(--shadow-3), var(--edge); border: 1px solid var(--line); z-index: 50; }
.custom-form[popover]:popover-open { display: flex; }
.custom-form.is-open { display: flex; }
.custom-form[popover]::backdrop { background: rgb(10 8 8 / .25); }
.custom-form .chips { margin-bottom: 4px; }
.custom-form .chip { height: 40px; }
.custom-title { font-size: .9375rem; font-weight: 600; }
.custom-form label { display: flex; flex-direction: column; gap: 4px; font-size: .8125rem; font-weight: 600; color: var(--text-2); }
.custom-form input { height: 48px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--field-border); background: var(--surface); color: var(--text); }
.summary { margin: 12px 0; padding: 16px 18px; border-radius: var(--r-md); background: var(--accent-container); color: var(--on-accent-container); font-size: 1rem; line-height: 1.5rem; }
.summary strong { font-weight: 700; }
.summary .t-bad { color: var(--missed); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 2px; min-height: 140px; padding: 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1), var(--edge); color: var(--text); text-decoration: none !important; }
a.tile:hover { background: color-mix(in oklab, var(--surface) 92%, var(--text)); }
.tile-label { color: var(--text-2); font-size: .8125rem; line-height: 1.125rem; font-weight: 600; }
.tile-value { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin-top: 4px; }
.tile-value small { font-size: .9375rem; font-weight: 600; color: var(--text-2); letter-spacing: 0; }
.tile-sub { color: var(--text-2); font-size: .8125rem; line-height: 1.125rem; }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.tile-bad .tile-value { color: var(--missed); }
.tile-ok .tile-value { color: var(--ok); }
.delta { display: inline-flex; align-items: center; height: 22px; font-size: .75rem; font-weight: 700; padding: 0 8px; border-radius: 999px; white-space: nowrap; }
.d-good { background: var(--ok-bg); color: var(--ok); }
.d-bad { background: var(--warn-bg); color: var(--warn); }
.d-same, .d-neutral { background: var(--surface-2); color: var(--text-2); }
.spark { width: 64px; height: 24px; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; }
.stack { width: 100%; height: 16px; border-radius: 8px; overflow: hidden; margin: 2px 0 12px; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .875rem; color: var(--text); }
.legend li { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.legend li a { color: var(--text); }
.legend strong { margin-left: auto; font-weight: 600; }
.legend .muted { min-width: 40px; text-align: right; font-size: .8125rem; }
.legend-row { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8125rem; }
.legend-row strong { margin-left: 4px; }
.sw { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.sw-line { height: 0; border-top: 2px dashed var(--text-2); border-radius: 0; }
.s-ok, .b-ok { fill: var(--accent); background: var(--accent); }
.s-ok2 { fill: color-mix(in oklab, var(--accent) 70%, var(--surface)); background: color-mix(in oklab, var(--accent) 70%, var(--surface)); }
.s-ok3 { fill: color-mix(in oklab, var(--accent) 45%, var(--surface)); background: color-mix(in oklab, var(--accent) 45%, var(--surface)); }
.s-bad, .b-bad { fill: var(--missed); background: var(--missed); }
.s-bad2 { fill: color-mix(in oklab, var(--missed) 70%, var(--surface)); background: color-mix(in oklab, var(--missed) 70%, var(--surface)); }
.s-bad3 { fill: color-mix(in oklab, var(--missed) 45%, var(--surface)); background: color-mix(in oklab, var(--missed) 45%, var(--surface)); }
.s-warn { fill: var(--warn); background: var(--warn); }
.s-quiet, .b-quiet { fill: var(--chart-muted); background: var(--chart-muted); }
.s-quiet2 { fill: color-mix(in oklab, var(--chart-muted) 50%, var(--surface)); background: color-mix(in oklab, var(--chart-muted) 50%, var(--surface)); }
.s-night { fill: var(--night); background: var(--night); }
.s-night2 { fill: color-mix(in oklab, var(--night) 55%, var(--surface)); background: color-mix(in oklab, var(--night) 55%, var(--surface)); }
.bars { width: 100%; height: 168px; }
.b-gap { fill: var(--surface-2); }
.b-hit { fill: transparent; }
.b-hit:hover { fill: color-mix(in oklab, var(--text) 6%, transparent); }
.b-avg { stroke: var(--text-2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.axis { display: flex; justify-content: space-between; color: var(--text-2); font-size: .75rem; margin: 4px 0 10px; }
.segmented { display: inline-flex; padding: 3px; margin-bottom: 10px; border-radius: 999px; background: var(--surface-2); }
.seg { padding: 6px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 600; color: var(--text-2); text-decoration: none !important; }
.seg.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.heat-wrap { overflow-x: auto; }
.heat { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.heat th { color: var(--text-2); font-size: .6875rem; font-weight: 600; text-align: center; }
.heat tbody th { width: 40px; text-align: right; padding-right: 4px; font-variant-numeric: tabular-nums; }
.heat td { height: 24px; border-radius: 5px; padding: 0; }
.heat td a, .heat td > .cell-n { display: grid; place-items: center; width: 100%; height: 24px; border-radius: 5px; text-decoration: none !important; }
.heat td a:hover { box-shadow: inset 0 0 0 2px var(--text); }
.cell-n { font-size: .6875rem; font-weight: 600; color: var(--text); visibility: hidden; }
.h0 { background: var(--heat-0); } .h1 { background: var(--heat-1); } .h2 { background: var(--heat-2); } .h3 { background: var(--heat-3); } .h4 { background: var(--heat-4); } .h5 { background: var(--heat-5); }
.h5 .cell-n { color: #fff; }
@media (prefers-color-scheme: dark) { .h4 .cell-n, .h5 .cell-n { color: #032029; } }
.heat-scale { display: flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--text-2); font-size: .75rem; }
.heat-scale span[class] { width: 16px; height: 10px; border-radius: 3px; }
.mlist, .people, .tops, .menu, .users, .route, .audit, .wait-list { list-style: none; margin: 0; padding: 0; }
.mrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; }
.mrow + .mrow { border-top: 1px solid var(--line); }
.mrow .meter, .mrow-sub { grid-column: 1 / -1; }
.mrow-label { color: var(--text); font-size: .9375rem; }
.mrow-val { font-weight: 700; }
.mrow-sub { color: var(--text-2); font-size: .8125rem; }
.meter { width: 100%; height: 6px; }
.m-track { fill: var(--surface-2); }
.m-ok { fill: var(--accent); }
.m-night { fill: var(--night); }
.person { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; }
.person + .person { border-top: 1px solid var(--line); }
.person-name { font-weight: 600; color: var(--text); }
.person-sub { color: var(--text-2); font-size: .8125rem; }
.tops { counter-reset: top; }
.top a { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--text); text-decoration: none; }
.top + .top { border-top: 1px solid var(--line); }
.top a::before { counter-increment: top; content: counter(top); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font-size: .75rem; font-weight: 700; flex: none; }
.top-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.top-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-sub { color: var(--text-2); font-size: .8125rem; }
.top-n { font-weight: 700; font-size: 1.0625rem; }
.wait-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.wait-item + .wait-item { border-top: 1px solid var(--line); }
.wait-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none !important; }
.wait-text { display: flex; flex-direction: column; min-width: 0; }
.wait-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wait-sub { color: var(--text-2); font-size: .8125rem; }
.wait-item .btn span { display: none; }
.inline-form { margin: 0; display: flex; }
.values { margin-top: 10px; }
.values > summary { cursor: pointer; color: var(--text-2); font-size: .8125rem; font-weight: 600; }
.vtable { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: .8125rem; }
.vtable th, .vtable td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); }
.vtable td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.how > summary { list-style: none; cursor: pointer; }
.how > summary::-webkit-details-marker { display: none; }
.how > summary h2 { font-size: 1rem; color: var(--text-2); font-weight: 600; }
.how p { margin-top: 10px; color: var(--text-2); font-size: .875rem; line-height: 1.5; }
.stat-card { margin: 12px 0; }

/* κείμενο συνομιλίας */
.dialogue { display: flex; flex-direction: column; gap: 16px; max-width: 68ch; margin: 8px 0 0; }
.turn { position: relative; padding: 4px 12px 4px 0; border-radius: var(--r-sm); transition: background 200ms var(--ease); }
.turn-plain { padding: 4px 12px 4px 0; }   /* κείμενο χωρίς χρόνους: ίδια απόσταση, χωρίς ακρόαση */
.turn-us { padding-left: 13px; border-left: 3px solid var(--accent); }
.turn-gap { margin-top: 16px; }
.turn-who { display: block; font-size: .75rem; font-weight: 600; color: var(--text-2); margin-bottom: 2px; }
.turn-us .turn-who { color: var(--accent-text); }
.turn-text { font-size: 1rem; line-height: 1.5rem; }
.turn.is-now { background: var(--accent-container); }
.sr-seek { position: absolute; left: -9999px; }
.sr-seek:focus { position: static; display: inline-flex; margin: 4px 0; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--accent); background: var(--surface); color: var(--accent-text); }
.has-audio .turn { cursor: pointer; }
.tx-note { color: var(--text-2); font-size: .75rem; margin: 20px 0 8px; }

/* φόρμες, μενού, διαχείριση */
.form { display: flex; flex-direction: column; gap: 14px; }
.form h2 { font-size: 1.0625rem; font-weight: 600; }
fieldset.card { display: flex; flex-direction: column; gap: 12px; }
fieldset.card legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font-size: 1rem; font-weight: 600; }
.group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.group legend { padding: 0; margin-bottom: 4px; font-size: .875rem; font-weight: 600; color: var(--text-2); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: .8125rem; font-weight: 600; color: var(--text-2); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--field-border); background: var(--surface); color: var(--text); font-size: 1rem; }
.field textarea { min-height: 96px; font-family: var(--mono); font-size: .875rem; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent); }
.field-row { flex-direction: row; align-items: center; gap: 12px; }
.field-row > span { width: 56px; flex: none; font-size: .9375rem; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: .9375rem; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.hint { color: var(--text-2); font-size: .8125rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.flash { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); font-size: .9375rem; }
.flash .i { width: 20px; height: 20px; }
.flash-ok { background: var(--ok-bg); color: var(--ok); }
.flash-bad { background: var(--missed-bg); color: var(--missed); }
.menu li + li { border-top: 1px solid var(--line); }
.menu-item { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 16px; color: var(--text); text-decoration: none !important; }
.menu-item:hover { background: var(--surface-2); }
.menu-item > .i:first-child { color: var(--accent-text); }
.menu-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.menu-title { font-weight: 600; }
.menu-sub { color: var(--text-2); font-size: .8125rem; }
.i-chev { width: 20px; height: 20px; color: var(--text-2); }
.user-card { display: flex; align-items: center; gap: 12px; }
.user-card > div { flex: 1; display: flex; flex-direction: column; }
.about { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 0 4px; color: var(--text-2); font-size: .8125rem; text-align: center; }
.about img, .login-logo { width: 200px; height: auto; }
@media (prefers-color-scheme: dark) { .about img, .login-logo { filter: invert(1) hue-rotate(180deg); } }
.weather-line { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: .875rem; }
.weather-line .i { width: 20px; height: 20px; }
.user-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.user-row + .user-row { border-top: 1px solid var(--line); }
.user-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.user-name { font-weight: 600; overflow-wrap: anywhere; }
.user-sub { color: var(--text-2); font-size: .8125rem; overflow-wrap: anywhere; }
.pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.pill-bad { background: var(--missed-bg); color: var(--missed); }
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-quiet { background: var(--surface-2); color: var(--text-2); }
.route li { display: grid; grid-template-columns: 70px 1fr; gap: 2px 10px; padding: 8px 0; }
.route li + li { border-top: 1px solid var(--line); }
.route-time { color: var(--text-2); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.route-res { grid-column: 2; color: var(--text-2); font-size: .8125rem; }
.status > summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; }
.status > summary::-webkit-details-marker { display: none; }
.status h2 { font-size: 1rem; font-weight: 600; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: .75rem; color: var(--text-2); margin: 12px 0 0; }
.audit li { padding: 6px 0; font-size: .8125rem; border-top: 1px solid var(--line); }
.call-card .call-body { padding: 0; animation: none; }

/* σύνδεση */
.bare { min-height: 100dvh; }
.login { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 16px; }
.login-card { width: min(400px, 100%); padding: 28px 22px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-3), var(--edge); display: flex; flex-direction: column; gap: 14px; }
.login-logo { margin: 0 auto 4px; }
.login-title { font-size: 1.375rem; line-height: 1.75rem; text-align: center; font-weight: 600; }
.login-sub { text-align: center; color: var(--text-2); font-size: .9375rem; margin-top: -8px; }
.login-hint { text-align: center; color: var(--text-2); font-size: .75rem; }
.login-credit { color: var(--text-2); font-size: .75rem; }

/* ------------------------------------------------------------------ tablet / υπολογιστής */
@media (min-width: 600px) {
  :root { --gutter: 24px; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .acts { grid-template-columns: repeat(4, minmax(0, 120px)); justify-content: start; }
  .dock { left: 50%; right: auto; width: min(560px, calc(100% - 32px)); transform: translateX(-50%); }
  @keyframes dock-in { from { transform: translate(-50%, 16px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
  .wait-item .btn span { display: inline; }
  .cell-n { visibility: visible; }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
  .app { padding-bottom: calc(var(--mini-h) + 24px); padding-left: 240px; }
  .app.has-dock { --mini-h: 80px; }
  .frame { max-width: 1000px; }
  .tabbar { display: none; }
  .rail { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 240px; display: flex; flex-direction: column; gap: 20px; padding: 20px 12px; background: var(--surface); border-right: 1px solid var(--line); }
  .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px; color: var(--text); text-decoration: none !important; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-text { display: flex; flex-direction: column; min-width: 0; }
  .brand-name { font-weight: 700; font-size: 1.0625rem; }
  .brand-sub { color: var(--text-2); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rail-tabs { display: flex; flex-direction: column; gap: 4px; }
  .rail .tab { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 999px; font-size: .9375rem; }
  .rail .tab-ic { width: auto; height: auto; background: none !important; }
  .rail .tab.is-active { background: var(--accent-container); color: var(--on-accent-container); }
  .rail .tab-badge { position: absolute; top: -8px; left: 12px; right: auto; box-shadow: 0 0 0 2px var(--surface); }
  .rail .tab:hover { background: var(--surface-2); text-decoration: none; }
  .rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; color: var(--text-2); font-size: .8125rem; padding: 0 8px; }
  .rail-weather, .rail-user { display: flex; align-items: center; gap: 8px; }
  .rail-weather .i, .rail-user .i { width: 18px; height: 18px; }
  .rail-weather[hidden] { display: none; }
  .rail-credit { font-size: .75rem; color: var(--text-2); }
  .dock { bottom: 16px; left: calc(240px + (100% - 240px) / 2); }
  .toast { left: calc(240px + (100% - 240px) / 2); bottom: calc(var(--mini-h) + 24px); }
  .list-head .search-mark { display: none; }
  .stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
  .stat-grid .span-wide { grid-column: 1 / -1; }
  .tile-value { font-size: 2.5rem; }
  .sheet { margin: auto; border-radius: var(--r-lg); }
  .custom-form[popover] { left: calc(240px + (100% - 240px) / 2); }
}
@media print {
  .tabbar, .rail, .dock, .stats-chips .chips, .info, .values, .list-head { display: none !important; }
  .app { padding: 0; }
  .card, .tile, .summary { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}

/* συμπληρώσεις */
.users > li.muted, .users > .muted { padding: 14px 16px; }


/* ------------------------------------------------------------------ διορθώσεις ελέγχου 2.0 */
.empty h1 { color: var(--text); font-size: 1.0625rem; font-weight: 600; }
.i-empty { width: 32px; height: 32px; }
/* αγγίγματα: ελάχιστο 40–44 px όπου το δάχτυλο είναι ο δείκτης */
@media (pointer: coarse) {
  .chip { height: 40px; }
  .chip-speed { height: 40px; }
  .link-more { min-height: 44px; }
  .btn-sm { min-height: 44px; }
  .seg { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; }
  .legend a { display: inline-block; padding: 10px 0; }
  .values > summary, .how > summary { display: flex; align-items: center; min-height: 44px; }
  .info > summary { min-width: 44px; min-height: 44px; }
  /* στατιστικά: ονόματα/γραμμές ως σύνδεσμοι, σύνδεσμος σημείωσης· κατάσταση συστήματος */
  a.person-name { display: block; padding: 10px 0; }
  .person:has(> a.person-name) { padding-top: 0; }
  a.mrow-label { display: block; padding: 11px 0; }
  .mrow:has(> a.mrow-label) { padding-top: 0; }
  .mrow:has(> a.mrow-label) > .mrow-val { align-self: center; }
  .card-note a { display: inline-block; padding: 12px 0; margin: -6px 0; }
  .status > summary { min-height: 44px; }
}
/* το «πέρασμα» του ποντικιού μένει μόνο εκεί που υπάρχει ποντίκι (όχι «κολλημένο» γκρι μετά από άγγιγμα) */
@media (hover: none) {
  .row:hover, .act:hover, .act-more > summary:hover, .icon-btn:hover, .menu-row:hover, .btn-strip:hover, .btn-text:hover, .search-clear:hover { background: transparent; }
  .chip:not(.is-on):not(.chip-ctx):hover { background: var(--surface); }
  .opt:hover { background: var(--surface-2); }
}

/* ------------------------------------------------------------------ ημερολόγιο διαστήματος (echo_ui.range_calendar + app.js [data-range-cal])
   Κελιά ≥ 40 px, 5 ή 6 σειρές (όσες θέλει ο μήνας), «ταινία» από την αρχή ως το τέλος του διαστήματος. */
.rcal { --rcal-bg: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.custom-form .rcal { --rcal-bg: var(--raised); }
.form .rcal { max-width: 340px; }
.card > .chips + .form { margin-top: 14px; }
.custom-form .rcal-fallback { grid-template-columns: 1fr; }
.rcal-status { min-height: 2.7em; font-size: .875rem; line-height: 1.35; color: var(--text-2); }
.rcal-status strong { color: var(--text); font-weight: 600; }
.rcal-cal { display: flex; flex-direction: column; }
.rcal-head { display: flex; align-items: center; gap: 4px; }
.rcal-month { flex: 1; text-align: center; font-size: 1rem; font-weight: 600; }
.rcal-nav { width: 40px; height: 40px; }
.rcal-nav .i { width: 20px; height: 20px; }
.rcal-prev .i { transform: scaleX(-1); }
.rcal-nav:disabled { opacity: .3; cursor: default; background: transparent; }
.rcal-wd, .rcal-days { display: grid; grid-template-columns: repeat(7, minmax(40px, 1fr)); }
.rcal-wd span { font-size: .75rem; font-weight: 600; line-height: 24px; text-align: center; color: var(--text-2); }
.rcal-day { position: relative; z-index: 0; display: grid; place-items: center; height: 40px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  color: var(--text); font-size: .9375rem; font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; }
.rcal-day::before { content: ""; position: absolute; inset: 2px 0; z-index: -1; }
.rcal-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; }
.rcal-day.is-blank { visibility: hidden; }
.rcal-day:disabled { color: var(--text-2); opacity: .45; cursor: default; }
.rcal-day.is-today .rcal-n { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-text); font-weight: 700; }
/* ταινία: ολόκληρη στα ενδιάμεσα, μισή στην αρχή/το τέλος, στρογγυλή στις άκρες της σειράς */
.rcal-day.is-in::before, .rcal-day.is-start:not(.is-end)::before, .rcal-day.is-end:not(.is-start)::before { background: var(--accent-container); }
.rcal-day.is-start:not(.is-end)::before { left: 50%; }
.rcal-day.is-end:not(.is-start)::before { right: 50%; }
.rcal-day.is-start.is-row-end:not(.is-end)::before, .rcal-day.is-end.is-row-start:not(.is-start)::before { display: none; }
.rcal-day.is-in.is-row-start::before { left: 2px; border-radius: 999px 0 0 999px; }
.rcal-day.is-in.is-row-end::before { right: 2px; border-radius: 0 999px 999px 0; }
.rcal-day.is-in.is-row-start.is-row-end::before { border-radius: 999px; }
.rcal-day.is-in { color: var(--on-accent-container); }
.rcal-day:is(.is-start, .is-end) .rcal-n { background: var(--accent); color: var(--on-accent); font-weight: 700; box-shadow: none; }
/* προεπισκόπηση (ποντίκι/πληκτρολόγιο πριν το 2ο πάτημα): πιο απαλή ταινία, το άκρο που δεν πατήθηκε με περίγραμμα */
.rcal.is-preview .rcal-day:is(.is-in, .is-start, .is-end)::before { background: color-mix(in oklab, var(--accent-container) 60%, transparent); }
.rcal.is-preview .rcal-day:is(.is-start, .is-end):not(.is-anchor) .rcal-n { background: var(--rcal-bg); color: var(--accent-text); box-shadow: inset 0 0 0 2px var(--accent); }
.rcal-day:focus-visible { outline: 0; }
.rcal-day:focus-visible .rcal-n { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (hover: hover) {
  .rcal-day:not(:disabled):not(.is-start):not(.is-end):hover .rcal-n { background: color-mix(in oklab, var(--text) 9%, transparent); }
}
/* αναδυόμενο με ημερολόγιο: ~340 px· στα στενά κινητά (< 360 px) λιγότερο περιθώριο ώστε 7 × 40 px να χωρούν */
.custom-form[popover] { width: min(340px, calc(100% - 2 * var(--gutter))); }
@media (max-width: 359px) {
  .custom-form[popover] { width: calc(100% - 16px); padding: 12px 10px; }
  .rcal-status { min-height: calc(3 * 1.35em); }      /* η γραμμή κατάστασης δεν «σπρώχνει» τον μήνα μετά το 1ο πάτημα */
  .card .rcal-cal { margin-inline: -12px; }           /* export: 7 × 40 px χωρούν και στα 320 px */
}
/* χαμηλή οθόνη (κινητό οριζόντια): ψηλά, σε δύο στήλες — αριστερά τίτλος/έτοιμα/κατάσταση, δεξιά ο μήνας */
@media (max-height: 480px) and (min-width: 560px) {
  .custom-form[popover] { top: calc(env(safe-area-inset-top, 0px) + 8px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .custom-form:has(> .rcal.is-ready):is(:popover-open, .is-open) { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto auto 1fr;
    column-gap: 20px; row-gap: 8px; align-items: start; width: min(620px, calc(100% - 2 * var(--gutter))); padding: 10px 16px; }
  .custom-form:has(> .rcal.is-ready) > .custom-title { grid-column: 1; grid-row: 1; padding-top: 8px; }
  .custom-form:has(> .rcal.is-ready) > .chips { grid-column: 1; grid-row: 2; }
  .custom-form > .rcal.is-ready { display: contents; }
  .custom-form > .rcal.is-ready > .rcal-status { grid-column: 1; grid-row: 3; }
  .custom-form > .rcal.is-ready > .rcal-cal { grid-column: 2; grid-row: 1 / span 3; }
  .custom-form .rcal-wd span { line-height: 20px; }
}