/* «Διάφανο» (DESIGN.md): φως μέσα από σκοτεινό γυαλί. Σκοτεινό θέμα πρώτα, φωτεινό ως εναλλακτική.
   Τα ονόματα των tokens μένουν ίδια για όλες τις σελίδες· εδώ αλλάζουν μόνο οι τιμές. */
@font-face {
  font-family: "Commissioner";
  src: url("fonts/commissioner-greek-wght-normal.woff2") format("woff2-variations"), url("fonts/commissioner-greek-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Commissioner";
  src: url("fonts/commissioner-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/commissioner-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Commissioner Fallback"; src: local("Segoe UI"), local("Roboto"), local("Arial"); size-adjust: 101%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; }
:root {
  --bg: #0b0e14; --surface: rgba(255, 255, 255, .04); --surface-2: rgba(255, 255, 255, .07);
  --pop: #151a24;                                   /* αδιαφανής επιφάνεια: μενού, παράθυρα, κάτω μπάρα */
  --field: rgba(255, 255, 255, .05);
  --ink: #eef1f6; --muted: #8b93a7;
  --line: rgba(255, 255, 255, .08); --line-soft: rgba(255, 255, 255, .05);
  --accent: #7cf2d0; --accent-ink: #06251d; --accent-text: #7cf2d0;
  --amber: #f6c177; --lilac: #b7a6ff; --danger: #ff7a85;
  --deep: var(--lilac); --personal: var(--lilac); --now: var(--accent);
  --fixed: rgba(255, 255, 255, .09); --fixed-ink: var(--ink);
  --ok: #5fd38d; --warn: var(--amber); --crit: var(--danger);
  --warn-soft: rgba(246, 193, 119, .12); --crit-soft: rgba(255, 122, 133, .12); --ok-soft: rgba(95, 211, 141, .12);
  --shadow: 0 12px 32px rgba(0, 0, 0, .45); --shadow-up: 0 -12px 32px rgba(0, 0, 0, .4); --scrim: rgba(5, 7, 11, .62);
  --body: system-ui, "Segoe UI", Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: "Commissioner", "Commissioner Fallback", system-ui, "Segoe UI", Roboto, sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f3f5f9; --surface: rgba(255, 255, 255, .78); --surface-2: #ffffff;
    --pop: #ffffff; --field: #ffffff;
    --ink: #141a26; --muted: #5b6479;
    --line: rgba(20, 26, 38, .12); --line-soft: rgba(20, 26, 38, .07);
    --accent: #0e9f86; --accent-ink: #031f19; --accent-text: #086b5b;
    --amber: #8a5a00; --lilac: #5b49c9; --danger: #c0303f;
    --fixed: rgba(20, 26, 38, .08);
    --ok: #1a7445;
    --warn-soft: rgba(138, 90, 0, .10); --crit-soft: rgba(192, 48, 63, .09); --ok-soft: rgba(26, 116, 69, .10);
    --shadow: 0 12px 32px rgba(20, 26, 38, .16); --shadow-up: 0 -12px 32px rgba(20, 26, 38, .16); --scrim: rgba(20, 26, 38, .45);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line) transparent; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--body); -webkit-tap-highlight-color: transparent; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
a { color: var(--accent-text); text-underline-offset: 3px; }
.wrap { max-width: 1420px; margin: 0 auto; padding-inline: 16px; padding-block: 16px 48px; display: grid; gap: 16px; }
.wrap > * { min-width: 0; }
.wrap.narrow { max-width: 760px; }

/* Τίτλος σελίδας */
header.top > .btn { white-space: nowrap; flex: none; }
header.top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
h1 { font-family: var(--display); font-weight: 700; font-size: min(34px, 8.2vw); line-height: 1.08; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.wl-short { display: none; }
.week-label { color: var(--muted); margin-top: 4px; font-size: 15px; font-variant-numeric: tabular-nums; }
.top-tools { display: flex; align-items: center; gap: 0; flex: none; }

/* Κατάσταση: μία κουκκίδα */
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; display: inline-block; }
.health { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); max-width: 60ch; }
.health-ok .dot { background: var(--ok); }
.health-warn .dot { background: var(--amber); }
.health-error { color: var(--crit); }
.health-error .dot { background: var(--crit); }
.status-dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; }
.status-dot.health-ok .dot { background: var(--ok); }
.status-dot.health-warn .dot { background: var(--amber); }
.status-dot.health-error .dot { background: var(--crit); }
.status-dot .dot { width: 12px; height: 12px; }
.healths { display: grid; gap: 4px; justify-items: end; }

.flash { border-radius: 14px; padding: 12px 16px; font-size: 15px; border: 1px solid var(--line); }
.flash-ok { background: var(--ok-soft); color: var(--ink); }
.flash-error { background: var(--crit-soft); color: var(--crit); }

/* Επιφάνειες «γυαλί» */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; }
.connect { padding: 20px 24px; display: grid; gap: 8px; }
.connect h2 { margin: 0; font-family: var(--display); font-weight: 650; }
.connect p { margin: 0; max-width: 65ch; }
.warn { color: var(--warn); }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bar form { margin: 0; }
.spacer { flex: 1 1 auto; }

/* Κουμπιά */
.btn { font: 600 15px/1.2 var(--body); border-radius: 14px; padding: 0 16px; min-height: 44px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), transform 120ms ease-out; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.big { min-height: 56px; font-size: 18px; border-radius: 16px; width: 100%; }
.btn.disabled, .btn:disabled { opacity: .45; cursor: default; }
.btn:active:not(.disabled):not(:disabled) { transform: scale(.97); }
.btn.danger { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 50%, transparent); }
@media (hover: hover) {
  .btn:hover:not(.disabled):not(:disabled) { background: var(--surface-2); border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
  .btn.primary:hover:not(.disabled):not(:disabled) { background: color-mix(in srgb, var(--accent) 86%, white); border-color: transparent; }
}
@media (hover: hover) and (pointer: fine) { .btn { min-height: 40px; } .btn.big { min-height: 52px; } }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-text); outline-offset: 2px; }
.linkbtn { background: none; border: 0; color: var(--muted); font: 14px var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 12px 8px; min-height: 44px; }
.mini { font: 600 14px var(--body); border-radius: 10px; padding: 0 12px; min-height: 36px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
  transition: background-color 150ms var(--ease), transform 120ms ease-out; }
.mini:active { transform: scale(.97); }
.mini.ok { border-color: var(--ok); color: var(--ok); }
@media (hover: hover) { .mini:hover { background: var(--surface-2); } }

/* Επιλογές (Δευ–Κυρ, Όλα/Δουλειά/Προσωπικά) */
.seg { display: inline-flex; max-width: 100%; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.seg a { padding: 0 14px; min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background-color 150ms var(--ease); }
.seg a + a { border-left: 1px solid var(--line); }
.seg a[aria-current="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
@media (hover: hover) { .seg a:hover:not([aria-current="true"]) { background: var(--surface-2); } }
@media (hover: hover) and (pointer: fine) { .seg a { min-height: 38px; } }

/* Μενού (details) */
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.icon-btn { min-width: 44px; font-size: 20px; padding: 0 12px; }
.menu-word { display: none; font-size: 15px; }
.menu-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; background: var(--pop); border: 1px solid var(--line); border-radius: 18px; padding: 8px;
  display: grid; gap: 2px; min-width: 250px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 120px); overflow-y: auto; box-shadow: var(--shadow); }
.menu-list a, .menu-form button { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 15px; }
.menu-head { margin: 8px 12px 2px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.menu-head:first-child { margin-top: 4px; }
.menu-list a:focus-visible, .menu-form button:focus-visible { background: var(--surface-2); }
@media (hover: hover) { .menu-list a:hover, .menu-form button:hover { background: var(--surface-2); } }
.menu-form { margin: 0; }
.menu-form button { all: unset; box-sizing: border-box; display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--ink); font-size: 15px; cursor: pointer; }
.menu-form button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; background: var(--surface-2); }
@media (hover: hover) { .menu-form button:hover { background: var(--surface-2); } }
.menu-list .seg { margin: 4px 4px 8px; width: calc(100% - 8px); }
.menu-list .seg a { flex: 1 1 auto; justify-content: center; padding: 0 10px; }
.view-menu .menu-list { right: auto; left: 0; min-width: 280px; }
@media (max-width: 760px) { .view-menu .menu-list { left: auto; right: 0; } }

/* ★ Μπάρα σταδίων της εβδομάδας (SPEC §8.1μ) */
.stages { position: sticky; top: max(8px, env(safe-area-inset-top)); z-index: 20; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 20px;
  background: color-mix(in srgb, var(--bg) 80%, transparent); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.stage-list { display: flex; gap: 0; flex: 1 1 auto; margin: 0; padding: 0; list-style: none; min-width: 0; }
.stage-list li { flex: 1 1 0; min-width: 0; }
.stage { display: grid; justify-items: center; align-content: center; gap: 0; min-height: 48px; border-radius: 14px; text-decoration: none; border: 1px solid var(--line); color: var(--muted);
  transition: background-color 150ms var(--ease), transform 120ms ease-out; }
.stage:active { transform: scale(.97); }
.st-l { font: 600 12px/1.2 var(--body); }
.st-n { font: 700 16px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.stage.past { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: transparent; color: var(--ink); }
.stage.future { background: transparent; }
.stage.today { background: var(--accent); border-color: transparent; color: var(--accent-ink);
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, .35); }
@media (hover: hover) { .stage:not(.today):hover { background: var(--surface-2); color: var(--ink); } }
.progress { flex: none; display: grid; gap: 6px; justify-items: end; min-width: 60px; }
.prog-num { font: 700 15px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prog-bar, .tbar { display: block; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.prog-bar { width: 100%; }
.prog-bar i, .tbar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; }
.day { scroll-margin-top: 92px; }
html { scroll-padding-top: 92px; }

/* ★ Κάρτα «Σήμερα» */
.today-card { padding: 20px; display: grid; gap: 16px; }
.today-head { display: grid; gap: 4px; }
.today-card h2 { margin: 0; font: 650 22px/1.2 var(--display); }
.wx-calm { margin: 0; font-size: 14px; color: var(--muted); }
.wx-calm a { color: inherit; text-decoration: none; display: inline-block; padding-block: 12px; margin-block: -12px; }
.today-body { display: grid; gap: 12px; }
.trow { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.tag { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.trow-now .tag { color: var(--accent-text); }
.tmain { min-width: 0; display: grid; gap: 4px; }
.ttitle { margin: 0; font: 650 20px/1.25 var(--display); overflow-wrap: anywhere; }
.ttitle.small-t { font-size: 17px; font-weight: 600; }
.tsub { margin: 0; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tsub a { color: var(--accent-text); display: inline-block; padding-block: 12px; margin-block: -12px; }
.tbar { margin-top: 4px; }
.done-form { margin: 4px 0 0; }
.done-note { margin: 0; color: var(--ok); font-weight: 600; }
.today-more { font-size: 14px; color: var(--muted); text-decoration: none; justify-self: start; padding: 12px 0; min-height: 44px; }
@media (hover: hover) { .today-more:hover { color: var(--ink); } }

/* ⓘ Ρυθμίσεις που μένουν: μία ήσυχη γραμμή */
.nudge-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; padding: 0 8px 0 16px; min-height: 44px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.nudge-text { padding-block: 8px; }
.nudge-actions { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.nudge-actions a { padding: 12px 8px; }
.nudge-line .linkbtn { padding-inline: 8px; }

/* Εργαλεία εβδομάδας */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.stepper { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.stepper .btn { min-width: 44px; padding: 0 12px; font-size: 18px; }
.step-label { flex: 1 1 auto; min-width: 0; text-align: center; font: 650 16px/1.25 var(--display); color: var(--ink); text-decoration: none; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
a.step-label { color: var(--accent-text); }
.tb-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tb-actions form { margin: 0; }
.pending-note { margin: -8px 0 0; }
@media (min-width: 761px) {
  .stepper { flex: 0 1 auto; }
  .step-label { flex: 0 1 auto; min-width: 11em; }
}

/* Πάνω δεξιά κουμπιά και κάτω μπάρα */
.badge { font-size: 13px; font-weight: 700; background: var(--accent-ink); color: var(--accent); border-radius: 999px; padding: 0 8px; min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.refresh .ico { display: inline-block; font-size: 1.15em; line-height: 1; }
.refresh.is-busy { opacity: .85; }
.actionbar { display: none; }

/* Πλέγμα 7 ημερών (υπολογιστής) */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 16px; align-items: start; }
.layout > .grid-panel { grid-column: 1; grid-row: 1 / span 2; }
.layout > .side { grid-column: 2; grid-row: 1; }
.list-panel { display: none; }
.side { display: grid; gap: 12px; min-width: 0; }
.grid-panel { padding: 8px 8px 12px; }
.grid-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 4px; position: relative; }
.grid-title h2 { margin: 0; font: 650 20px/1.2 var(--display); }
.help summary { list-style: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: 15px;
  transition: background-color 150ms var(--ease); }
.help summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .help summary:hover { background: var(--surface-2); color: var(--ink); } }
.help-body { position: absolute; right: 12px; top: calc(100% + 4px); z-index: 30; width: min(360px, calc(100vw - 32px)); background: var(--pop); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); display: grid; gap: 8px; }
.help-body p { margin: 0; font-size: 14px; color: var(--ink); }
.lg { display: inline-block; width: 16px; height: 12px; border-radius: 4px; margin-right: 8px; vertical-align: -1px; border: 1px solid transparent; }
.lg-busy { background: var(--fixed); border-color: var(--line); }
.lg-blk { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.lg-deep { background: color-mix(in srgb, var(--accent) 36%, transparent); border-color: var(--accent); }
.lg-personal { background: color-mix(in srgb, var(--lilac) 18%, transparent); border-color: color-mix(in srgb, var(--lilac) 50%, transparent); }
.lg-rtn { background: color-mix(in srgb, var(--amber) 16%, transparent); border-color: color-mix(in srgb, var(--amber) 50%, transparent); }
.lg-free { border: 1px dashed var(--muted); }
.lg-off { background: color-mix(in srgb, var(--ink) 8%, transparent); border-color: var(--line); }

.grid { display: grid; grid-template-columns: 48px repeat(7, minmax(0, 1fr)); padding: 8px 4px 4px; }
.dayhead { padding: 6px 6px 8px; border-bottom: 1px solid var(--line); }
.dayhead b { display: block; font: 650 15px/1.3 var(--display); }
.dayhead small { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.dayhead.today b { color: var(--accent-text); }
.dayhead.we b { color: var(--lilac); }
.dayhead.today.we b { color: var(--accent-text); }
.corner { border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); display: flex; align-items: end; padding-bottom: 6px; }
.allday { min-height: 30px; padding: 4px 3px; border-bottom: 1px solid var(--line); display: grid; gap: 3px; align-content: start; }
.allday .ev { position: static; display: block; }
.hours { position: relative; height: calc(54px * var(--hours)); }
.hours span { position: absolute; right: 8px; transform: translateY(-50%); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.col { position: relative; height: calc(54px * var(--hours)); border-left: 1px solid var(--line-soft);
  background-image: repeating-linear-gradient(to bottom, var(--line-soft) 0 1px, transparent 1px 54px); }
.off { position: absolute; left: 0; right: 0; pointer-events: none; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.ev, .blk, .rtn { position: absolute; border-radius: 10px; padding: 3px 8px; font-size: 12.5px; line-height: 1.25; overflow: hidden; border: 1px solid transparent;
  transition: background-color 150ms var(--ease); }
.ev { background: var(--fixed); color: var(--fixed-ink); border-color: var(--line); }
.ev.free { background: transparent; border: 1px dashed var(--muted); color: var(--muted); }
.ev.free .h { color: var(--muted); }
.ev.personal { border-color: color-mix(in srgb, var(--lilac) 50%, transparent); }
.ev .t, .blk .t, .rtn .t { font-weight: 600; display: block; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ev .h, .blk .h, .rtn .h { font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--ink) 86%, var(--bg)); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk { padding-right: 8px; background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--ink); }
.blk.deep { background: color-mix(in srgb, var(--accent) 32%, transparent); border-color: var(--accent); }
.blk.personal { background: color-mix(in srgb, var(--lilac) 16%, transparent); border-color: color-mix(in srgb, var(--lilac) 45%, transparent); }
.rtn { background: color-mix(in srgb, var(--amber) 14%, transparent); border-color: color-mix(in srgb, var(--amber) 45%, transparent); color: var(--ink); }
.rtn.done { opacity: .72; }
.blk.locked { box-shadow: inset 0 0 0 1px var(--ink); }
.blk.conflict { box-shadow: inset 0 0 0 2px var(--crit); }
.blk.past { opacity: .7; }
@media (hover: hover) {
  .blk:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
  .blk.deep:hover { background: color-mix(in srgb, var(--accent) 42%, transparent); }
  .blk.personal:hover { background: color-mix(in srgb, var(--lilac) 26%, transparent); }
  .rtn:hover { background: color-mix(in srgb, var(--amber) 24%, transparent); }
}
.nowline { position: absolute; left: -1px; right: 0; height: 2px; background: var(--accent); z-index: 2; }
.nowline::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.blk-link { color: inherit; text-decoration: none; display: block; }
@media (hover: hover) { .blk-link:hover .t { text-decoration: underline; } }
/* 🔒/🔓: κρυμμένο μέχρι hover ή εστίαση· στο άγγιγμα ποτέ μέσα στο κομμάτι (υπάρχει στο παράθυρο του κομματιού) */
.pinform { position: absolute; top: 2px; right: 2px; margin: 0; z-index: 1; opacity: 0; transition: opacity 150ms var(--ease); }
.blk:hover .pinform, .rtn:hover .pinform, .pinform:focus-within, .blk:focus-within .pinform, .rtn:focus-within .pinform, .rtn.done .pinform { opacity: 1; }
.pin { border: 0; background: var(--pop); border-radius: 8px; cursor: pointer; font-size: 14px; padding: 2px 4px; line-height: 1; }
@media (hover: none) { .pinform { display: none; } }

/* ✕ Σβήσιμο ανά στοιχείο (SPEC §8.1μ): στο πλέγμα εμφανίζεται με hover/εστίαση, στη λίστα του κινητού πάντα, στόχος ≥ 36px */
.delform { margin: 0; }
.del { border: 0; background: transparent; color: var(--muted); font: 600 15px/1 var(--body); min-width: 36px; min-height: 36px; border-radius: 10px; cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), transform 120ms var(--ease); }
.del:active { transform: scale(.97); }
@media (hover: hover) { .del:hover { background: var(--surface-2); color: var(--ink); } }
.day li .delform { align-self: start; justify-self: end; margin: -6px -8px -6px 0; }
.col .delform { position: absolute; top: 2px; right: 28px; z-index: 1; opacity: 0; transition: opacity 150ms var(--ease); }
.col .del { min-width: 22px; min-height: 22px; font-size: 12px; padding: 2px 4px; background: var(--pop); color: var(--ink); border-radius: 8px; }
.col .ev:hover .delform, .col .blk:hover .delform, .col .rtn:hover .delform, .col .delform:focus-within,
.col .ev:focus-within .delform, .col .blk:focus-within .delform, .col .rtn:focus-within .delform { opacity: 1; }
@media (hover: none) { .col .delform { display: none; } }

.legend { display: none; }
.lock-row { margin: 0; }

/* Ημέρες (κινητό) */
.list-panel { gap: 12px; }
.day { padding: 16px 20px 8px; }
.day-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.day h2 { font: 650 22px/1.2 var(--display); margin: 0; letter-spacing: -.01em; }
.day h2 small { font: 400 14px var(--body); color: var(--muted); margin-left: 4px; font-variant-numeric: tabular-nums; }
.day.today { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; color: color-mix(in srgb, var(--ink) 78%, var(--bg)); text-decoration: none; white-space: nowrap; }
.chip { position: relative; }
.chip::after { content: ""; position: absolute; inset: -7px 0; }
.wx-calm a, .tsub a { position: relative; }
.wx-line { margin: 0 0 4px; font-size: 14px; color: var(--muted); }
.wx-tip { color: var(--muted); }
.dayhead .wx { display: grid; justify-items: start; gap: 0; font-size: 13px; line-height: 1.35; color: var(--muted); text-decoration: none; margin-top: 2px; }
.dayhead .wx-t, .dayhead .wx-r { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dayhead .wx-r { color: color-mix(in srgb, var(--ink) 78%, var(--bg)); }
.day ul { list-style: none; margin: 0; padding: 0; display: grid; }
.day li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: 16px; }
.day li:first-child { border-top: 0; }
.day li .h { color: var(--muted); font-variant-numeric: tabular-nums; }
.day li .h b { display: block; font-size: 16px; font-weight: 650; color: var(--ink); }
.day li .h small { display: block; font-size: 13px; }
.day li .what { min-width: 0; overflow-wrap: anywhere; }
.day li .what::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; border: 1px solid var(--muted); }
.day li.task .what::before { background: var(--accent); border-color: var(--accent); }
.day li.personal .what::before { background: var(--lilac); border-color: var(--lilac); }
.day li.routine .what::before { background: var(--amber); border-color: var(--amber); }
.day li.task .h b { color: var(--accent-text); }
.day li.personal .h b { color: var(--lilac); }
.day li.routine .h b { color: var(--amber); }
.day li.task .what { font-weight: 600; }
.day li.free { color: var(--muted); }
.day li.past { opacity: .72; }
.day li.routine.done { opacity: .72; }
.day li a { color: inherit; text-decoration: none; }
.day li .what a { display: inline-block; padding-block: 10px; margin-block: -10px; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 25%, transparent); text-underline-offset: 4px; }
.day li form.inline { margin: 0; }
.step { display: block; font-weight: 400; color: var(--muted); font-size: 14px; margin-top: 2px; }
.empty { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.foot { display: flex; justify-content: flex-end; }
.allday details.more summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.allday details.more[open] summary { margin-bottom: 4px; }
.day details.more summary { cursor: pointer; font-size: 14px; color: var(--muted); }

/* Πλαίσια στο πλάι: μαζεμένα, ανοιχτά μόνο όσα έχουν πρόβλημα */
.fold { padding: 0; overflow: hidden; }
.fold > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 20px; cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h2 { margin: 0; font: 650 18px/1.2 var(--display); flex: 1 1 auto; }
.fold > summary::after { content: "›"; color: var(--muted); font-size: 22px; transition: transform 200ms var(--ease); }
.fold[open] > summary::after { transform: rotate(90deg); }
.fold > :not(summary) { margin-inline: 20px; }
.fold > :last-child { margin-bottom: 20px; }
.count { min-width: 26px; padding: 0 8px; text-align: center; border-radius: 999px; background: var(--surface-2); color: var(--ink); font: 700 14px/24px var(--body); font-variant-numeric: tabular-nums; }
.fold.problem { border-color: color-mix(in srgb, var(--crit) 40%, var(--line)); background: color-mix(in srgb, var(--crit) 5%, var(--surface)); }
.fold.problem .count { background: var(--crit-soft); color: var(--crit); }
@media (hover: hover) { .fold > summary:hover { background: var(--surface-2); } }
.fold-empty { margin: 0; padding: 4px 8px; font-size: 14px; color: var(--muted); }
.dl, .chg, .nofit ul { list-style: none; padding: 0; display: grid; gap: 12px; }
.dl, .chg { margin-top: 0; margin-bottom: 12px; }
.dl li, .chg li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; font-size: 15px; }
.dl small, .chg small, .nofit small { display: block; color: var(--muted); font-size: 13px; }
.dl .risk-red b { color: var(--crit); }
.k { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.k-add { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-text); }
.k-move { background: color-mix(in srgb, var(--lilac) 18%, transparent); color: var(--lilac); }
.k-remove { background: var(--crit-soft); color: var(--crit); }
.nofit li { padding: 2px 0; font-size: 15px; }
.nofit li b::before { content: "• "; color: var(--crit); }

/* Φόρμες */
.card { padding: 20px 24px; display: grid; gap: 12px; }
.card h2 { margin: 0; font: 650 20px/1.25 var(--display); }
.card p { margin: 0; max-width: 65ch; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.ok-text { color: var(--ok); font-weight: 600; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.nudge { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.settings fieldset { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 16px 0 4px; display: grid; gap: 12px; min-width: 0; }
.settings fieldset:first-of-type { border-top: 0; padding-top: 0; }
.settings legend { font: 650 18px var(--display); padding: 0; }
.field { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
input, select, textarea { color-scheme: inherit; }
.field input, select, .editform input, .composer textarea {
  font: 16px var(--body); padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--ink); min-height: 44px; }
::placeholder { color: var(--muted); opacity: 1; }
.field input[type="number"] { width: 5em; }
.field input[type="text"] { min-width: 0; flex: 1 1 12em; }
select { max-width: 100%; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.switch input, .daypick input { width: 20px; height: 20px; min-height: 0; accent-color: var(--accent); }
.days { display: flex; flex-wrap: wrap; gap: 8px; }
.daypick { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 14px; }

/* Προς έλεγχο */
.review .count { color: inherit; }
.rev { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rev li { border-top: 1px solid var(--line-soft); padding: 12px 0; display: grid; gap: 4px; font-size: 15px; }
.rev li:first-child { border-top: 0; padding-top: 0; }
.rev small { display: block; color: var(--muted); font-size: 13px; }
.rev .actions form { margin: 0; }
.rev details summary { cursor: pointer; font-size: 14px; color: var(--muted); padding: 6px 0; }
.editform { display: grid; gap: 8px; margin-top: 8px; }
.editform label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.editform input { min-width: 0; }

/* Ρουτίνες, κρατήσεις, λίστες */
.fill-list { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 8px; }
.fill-list li { padding: 12px 14px; background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 14px; }
.fill-list li.hold-free { background: color-mix(in srgb, var(--ok) 9%, transparent); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.fill-list b { font-variant-numeric: tabular-nums; margin-right: 6px; }
.fill-list a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 3px; }
.fill-list li form.inline { display: inline; margin-left: 6px; }
.onrow { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.onrow.bad { background: var(--crit-soft); border-radius: 14px; padding: 12px; }
.onrow input[type="url"] { width: 100%; }
.cal-list { list-style: none; padding: 0; }
.cal-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.del { margin: -8px 0 4px; text-align: right; }

/* «⏳ Τώρα» (SPEC §8.1ζ) */
.nowcard { text-align: center; display: grid; justify-items: center; gap: 8px; padding-block: 24px; }
.nowcard h2 { font-size: 22px; margin: 4px 0 0; }
.nowcard.personal .ring { --ring: var(--lilac); }
.ring { --ring: var(--accent); width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--ring) calc(var(--p) * 1%), var(--line) 0); }
.ring > div { width: 136px; height: 136px; border-radius: 50%; background: var(--bg); display: grid; place-content: center; }
.ring b { font: 700 38px/1 var(--display); font-variant-numeric: tabular-nums; }
.ring small { color: var(--muted); font-size: 14px; }
.step-big { font-size: 17px; background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 12px 16px; border-radius: 14px; }

/* 💬 Βοηθός δίπλα στην εβδομάδα + αναδυόμενο παράθυρο (SPEC §8.1λ): από εδώ και κάτω μόνο tokens */
.chatbox { padding: 4px; display: grid; gap: 12px; max-height: 62vh; overflow-y: auto; }
.msg { display: grid; gap: 2px; max-width: 88%; }
.msg.user { justify-self: end; text-align: right; }
.msg .bubble { white-space: pre-line; padding: 10px 14px; border-radius: 18px; font-size: 15px; text-align: left; }
.msg.user .bubble { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 6px; }
.msg.assistant .bubble { background: var(--surface-2); border-bottom-left-radius: 6px; }
.msg small { color: var(--muted); font-size: 12px; }
.did { list-style: none; margin: 2px 0 0; padding: 0; font-size: 13px; color: var(--ok); }
.composer { display: flex; gap: 8px; align-items: end; }
.composer textarea { flex: 1; min-width: 0; resize: vertical; }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; }
.suggest form { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-panel .chatbox { max-height: 38vh; padding: 4px; }
.chat-panel .msg { max-width: 96%; }
.chat-panel .composer { flex-wrap: wrap; }
.chat-panel .composer .btn { margin-left: auto; }

/* Αναδυόμενο παράθυρο: ομάδες χωρίς κάρτα μέσα σε κάρτα */
.modal-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: start center; overflow-y: auto;
  padding: 24px 16px; background: var(--scrim); }
.modal { position: relative; width: 100%; max-width: 640px; background: var(--pop); color: var(--ink); border: 1px solid var(--line);
  border-radius: 24px; padding: 24px 20px 20px; display: grid; gap: 16px; box-shadow: var(--shadow); }
.modal-close { position: absolute; top: 12px; right: 12px; min-width: 44px; min-height: 44px; }
.modal h1 { font-size: 24px; padding-right: 48px; }
.modal-body { display: grid; gap: 16px; min-width: 0; }
.modal .panel { background: none; border: 0; border-radius: 0; }
.modal .card { padding: 0; }
.modal .card + .card, .modal .lock-row + .card { border-top: 1px solid var(--line); padding-top: 16px; }
body.modal-open { overflow: hidden; }

/* Σελίδες με λίγο περιεχόμενο */
.page-week .wrap { padding-bottom: 48px; }

/* Κινητό */
@media (max-width: 760px) {
  .page-week .wrap { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .grid-panel, .tb-actions, .toolbar .spacer { display: none; }
  .layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .layout > .side, .layout > .grid-panel { grid-column: auto; grid-row: auto; }
  .list-panel { display: grid; }
  .chat-panel { display: none; }
  .chat-panel.sheet-open { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; max-height: 86dvh; overflow-y: auto; background: var(--pop);
    border-radius: 24px 24px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-up); }
  .chat-panel.sheet-open .chatbox { max-height: 34vh; }
  .chat-panel.sheet-open .composer textarea { font-size: 16px; }
  .toolbar { gap: 8px; }
  header.top { gap: 12px 4px; }
  .title-block { min-width: 0; flex: 1 1 auto; }
  .status-dot { width: 44px; }
  .mini, .btn { min-height: 44px; }
  .page-week .wl-full { display: none; }
  .page-week .wl-short { display: inline; }
  .page-week .week-label { white-space: nowrap; }
  .stages { flex-wrap: wrap; row-gap: 6px; padding: 6px 4px 8px; margin-inline: -4px; }
  .stage-list { flex-basis: 100%; }
  .stage-list li { padding-inline: 1px; }
  .progress { flex: 1 1 100%; display: flex; align-items: center; gap: 12px; padding-inline: 8px; min-width: 0; }
  .progress .prog-bar { flex: 1 1 auto; width: auto; }
  html { scroll-padding-top: 108px; }
  .day { scroll-margin-top: 108px; }
  .actionbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 84%, transparent); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .actionbar form { margin: 0; display: grid; }
  .act { font: 600 14px/1.2 var(--body); min-height: 52px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); text-decoration: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 4px; white-space: nowrap; min-width: 0; transition: background-color 150ms var(--ease), transform 120ms ease-out; }
  .act:active { transform: scale(.97); }
  .act.refresh { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
  .act:disabled { opacity: .7; }
  .ai { font-size: 18px; line-height: 1; display: inline-block; }
  body.chat-sheet-open .actionbar { display: none; }
}
@media (max-width: 360px) { .st-n { font-size: 15px; } }
@media (min-width: 761px) {
  h1 { font-size: 44px; }
  .menu-word { display: inline; }
  .wrap { padding-inline: 24px; gap: 20px; }
  .today-card { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); align-items: start; gap: 16px 40px; padding: 20px 24px; }
  .today-head { grid-column: 1; }
  .today-body { grid-column: 2; grid-template-columns: minmax(0, 24rem) minmax(0, 16rem) minmax(max-content, 1fr); align-items: start; gap: 24px 40px; }
  .trow-next { padding-left: 32px; border-left: 1px solid var(--line); }
  .today-more { display: none; }
  .trow { grid-template-columns: 1fr; gap: 4px; }
  .done-form { margin: 0; align-self: center; justify-self: end; }
  .done-form .btn.big { width: auto; padding: 0 28px; }
  .chat-panel.chat-closed { display: none; }
}
@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout > .grid-panel, .layout > .side { grid-column: auto; grid-row: auto; }
  .healths { justify-items: start; }
}

/* Κίνηση (Emil Kowalski): μόνο transform και opacity, μόνο όταν ο χρήστης δεν ζητά λιγότερη κίνηση */
@keyframes grow { from { transform: scaleX(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { transform: scale(.5); opacity: 0; } }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .prog-bar i, .tbar i { animation: grow 420ms var(--ease) both; }
  .refresh.is-busy .ico { animation: spin 900ms linear infinite; }
  .refresh.is-done .ico { animation: pop 300ms var(--ease) both; }
  .chat-panel.sheet-open { animation: sheet-in 240ms var(--ease) both; }
  .modal { animation: sheet-in 220ms var(--ease) both; }
  .modal-backdrop { animation: fade-in 180ms ease-out both; }
  /* Ομαλές μεταβάσεις εγγράφων: τα κομμάτια του προγράμματος γλιστρούν στη νέα θέση, τα νέα σβήνουν-ανάβουν */
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: 240ms; animation-timing-function: var(--ease); }
  ::view-transition-old(*):only-child { animation-duration: 160ms; }
  ::view-transition-new(*):only-child { animation: fade-in 200ms ease-out both; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; animation-timing-function: ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .refresh.is-busy .ico { opacity: .5; }
}
@media (pointer: coarse) { .mini, .btn { min-height: 44px; } }

/* Είσοδος και συσκευές (SPEC §8.1ν) */
.login-wrap { padding-top: 12vh; }
.device-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.device { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.device:first-child { border-top: 0; }
.device-now { color: var(--accent-text); font-size: 14px; font-weight: 600; }