:root {
  /* Petline brand (petline.gr): slate text #1e293b/#334155, red #c8102e for the «line» in the wordmark.
     Red stays an accent — a red primary button would read as an error in a tool full of validation states. */
  --primary: #1e293b;
  --primary-dark: #0f172a;
  --accent: #c8102e;
  --green: #1e8e3e;
  --green-text: #0b5a2a;
  --green-bg: #dcf5e3;
  --amber-text: #7a4a00;
  --amber-bg: #fff1d6;
  --red: #c62828;
  --red-text: #8a1c1c;
  --red-bg: #fde8e8;
  --bg: #f3f5f9;
  --card: #fff;
  --text: #1b1f27;
  --muted: #566074;
  --border: #d5dbe5;
  --disabled-bg: #c9d2e3;
  --disabled-text: #1f3a73;
  --radius: 12px;
  /* spacing scale (4-unit base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
}
/* Petline's web typeface (SIL OFL, bundled locally — see fonts/OFL-DidactGothic.txt). Has Greek. */
@font-face {
  font-family: "Didact Gothic";
  src: local("Didact Gothic"), url("/static/fonts/DidactGothic-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Didact Gothic", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg);
  /* Top inset is handled by the header itself (its dark background runs under the status bar / Dynamic Island). */
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
[hidden] { display: none !important; }
h2 { font-size: 1.25rem; margin: 0 0 var(--s2); }
h3 { font-size: 1rem; margin: var(--s4) 0 var(--s2); }
.card h3 { margin-top: 0; }
.muted { color: var(--muted); font-size: .9rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Icons: 24px, currentColor, stroke 1.75 */
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 18px; height: 18px; }
.icon.xs { width: 14px; height: 14px; stroke-width: 2.25; }

/* Focus ring: 2px primary, 2px offset, on everything interactive */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.app-header :focus-visible, .photo-overlay :focus-visible { outline-color: #fff; }

/* Header: one row at 375px, taller, and its dark background extends under the iPhone status bar /
   Dynamic Island (standalone PWA with viewport-fit=cover + black-translucent status bar). The content
   itself starts below the inset, so nothing hides behind the island. */
.top { position: sticky; top: 0; z-index: 10; max-width: 640px; margin: 0 auto; background: var(--primary); }
.top::before { content: ""; display: block; height: env(safe-area-inset-top); background: var(--primary); }
@media (min-width: 640px) { .top { border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; } }
.app-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  min-height: 60px; padding: 10px var(--s4);
  background: var(--primary); color: #fff;
}
.app-header .brand .icon { width: 30px; height: 30px; }
/* Phones: a slimmer header (the bar and the header together should stay near a fifth of the screen) */
@media (max-width: 639px) { .app-header { min-height: 52px; padding: 4px var(--s4); } }
/* Offline: slim banner under the header (amber 7a4a00 on fff1d6 ≈ 7:1) */
.offline-bar {
  display: flex; align-items: center; gap: var(--s2);
  padding: 6px var(--s4); background: var(--amber-bg); color: var(--amber-text);
  border-bottom: 1px solid #f0c36d; font-size: .85rem; font-weight: 600; line-height: 1.3;
}
.brand { display: flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: 1.45rem; }
/* Wordmark as on petline.gr: PET in caps, «line» in red script-like italic */
.brand-word { letter-spacing: .04em; }
.brand-word em { font-style: italic; font-weight: 600; color: #ff5a6e; letter-spacing: 0; text-transform: lowercase; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
/* The tagline sits under the wordmark and only on the login screen (≈10:1 on the slate header) */
/* «Sales portal»: always under the wordmark, same small-caps voice as the tagline (slate-300 on the dark header) */
.brand-role { display: block; margin-top: 2px; font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #cbd5e1; }
body[data-screen="login"] .brand-role { margin-top: 1px; }
.who { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
.who-name { font-size: 1rem; white-space: nowrap; }
.link { background: none; border: 0; color: #fff; text-decoration: underline; text-underline-offset: 3px; font: inherit; font-size: .9rem; min-height: 44px; padding: 0 var(--s2); cursor: pointer; }

main { max-width: 640px; margin: 0 auto; padding: var(--s4) var(--s4) 32px; }
.screen.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 10px; }

/* Buttons */
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; min-height: 48px; padding: 10px var(--s4);
  border-radius: var(--radius); border: 1px solid transparent;
  font: inherit; font-weight: 600; cursor: pointer; text-align: center;
}
.btn.big { min-height: 56px; font-size: 1.1rem; }
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:active { background: var(--primary-dark); }
.btn.secondary { background: #fff; color: var(--primary); border-color: var(--primary); margin-top: 10px; }
.btn.ghost { background: transparent; color: var(--primary); border: 1px dashed var(--primary); margin-top: 10px; }
.btn.small { width: auto; min-height: 44px; padding: 6px var(--s4); margin-top: 0; }
.btn.link-btn { background: none; color: var(--muted); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
/* Disabled stays readable (text ≥ 3:1, here ~7:1) and clearly not pressable */
.btn.primary:disabled, .btn.primary[aria-disabled="true"] { background: var(--disabled-bg); color: var(--disabled-text); border-color: #9fb0d0; cursor: not-allowed; }
/* In flight: keeps the primary look (it is working, not blocked) */
.btn.primary.loading:disabled, .btn.primary.loading[aria-disabled="true"] { background: var(--primary); color: #fff; border-color: transparent; cursor: progress; }
/* Destructive choice in the sheet: outlined, red text (red is an accent here, never a fill) */
.btn.danger { background: #fff; color: var(--red-text); border-color: var(--red-text); margin-top: 10px; }
.btn.link-btn:disabled { opacity: .5; cursor: not-allowed; }
a.btn { text-decoration: none; }
.salesman-btn { justify-content: flex-start; background: #fff; color: var(--text); border: 1px solid var(--border); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--muted); border-radius: 8px; cursor: pointer; flex: none; }

/* Cards & fields */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3) 14px; margin-top: var(--s3); }
.field { display: block; margin-bottom: var(--s3); }
.field:last-child { margin-bottom: 0; }
.field > label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: var(--s1); }
.input {
  width: 100%; min-height: 44px; padding: var(--s2) 10px; font: inherit;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text);
}
textarea.input { min-height: 64px; resize: vertical; }
/* Placeholders: 7.4:1 on white, 6.3:1 on the pink error field (Firefox dims placeholders by default: opacity 1 fixes that) */
.input::placeholder { color: #4d5668; opacity: 1; }
select.input { padding-right: var(--s1); }
.date-row { display: flex; align-items: center; gap: var(--s3); }
.date-row .input { flex: 0 1 11rem; min-width: 0; }
.date-echo { font-weight: 600; white-space: nowrap; }
/* «Από τη φωτογραφία: «Τρίτη πρωί»»: what the sheet said, next to the date; amber when the weekday disagrees (7a4a00 on fff1d6 ≈ 7:1) */
.date-from { margin: 6px 0 0; font-size: .85rem; color: var(--muted); }
.date-from.mismatch { display: inline-block; padding: 3px 8px; border-radius: 6px; background: var(--amber-bg); color: var(--amber-text); font-weight: 600; }
/* «Από το πρόγραμμα: Λάρισα, Τρίτη & Παρασκευή»: where the date came from; the rule's note and a missed cutoff on their own lines */
.date-sched { margin: 6px 0 0; font-size: .85rem; line-height: 1.35; color: var(--muted); }
.date-sched .sched-note, .date-sched .sched-cutoff { display: block; margin-top: 2px; }
.date-sched .sched-note { color: var(--text); }
.date-sched .sched-cutoff { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 6px; background: var(--amber-bg); color: var(--amber-text); font-weight: 600; }
.date-sched .sched-demo { margin-left: 6px; padding: 0 6px; border: 1px dashed var(--border); border-radius: 6px; font-size: .75rem; white-space: nowrap; }
/* Quick switches under the date: «Επόμενη: Παρασκευή 16/10», «Πρόγραμμα: …», «Σημείωμα: …». 36px look, 44px touch area */
.date-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
/* «Η Τετάρτη δεν είναι μέρα παράδοσης για αυτόν τον πελάτη (παραδόσεις: …). Επόμενη: …» + «Βάλε Παρασκευή 23/10» */
.date-off { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s2); margin: var(--s2) 0 0; padding: 8px 10px; border-radius: 8px; background: var(--amber-bg); color: var(--amber-text); font-size: .88rem; font-weight: 600; line-height: 1.35; }
.date-off[hidden] { display: none; }
.date-off .date-chip { border-color: #f0c36d; background: #fff; color: var(--amber-text); }
.date-chip { position: relative; min-height: 36px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 18px; background: var(--card); color: var(--text); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.date-chip::after { content: ""; position: absolute; inset: -4px -2px; }
.date-chip:active { background: #eef1f7; }
/* Finalisation bar: the numbers the salesman commits to, one line, never wraps */
.bar-summary { margin: 0 0 6px; font-size: .9rem; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.bar-summary b { font-weight: 800; }
/* «7 κωδικοί · 2 διορθώθηκαν από εσένα · Παράδοση Τρίτη 20/10»: wraps rather than being cut */
.bar-commit { margin: -2px 0 6px; font-size: .85rem; line-height: 1.35; color: var(--muted); text-align: center; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.bar-commit:empty { display: none; }
/* «καθαρή 426,60 €» next to a grand total that includes VAT: muted and smaller */
.net-frag { font-weight: 500; font-size: .85em; color: var(--muted); }
.res-net { margin: -2px 0 6px; font-size: .9rem; font-variant-numeric: tabular-nums; }
.orders .vat-hint { font-weight: 500; font-size: .75rem; color: var(--muted); }

/* Home */
.greeting { margin: var(--s1) 0 var(--s4); }
.greeting h2 { margin: 0 0 2px; font-size: 1.35rem; }
.greeting p { margin: 0; }
.orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.orders > li { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 10px var(--s3); display: flex; justify-content: space-between; gap: var(--s2); }
.orders > li.has-acc { display: block; padding: 0; }
.orders .fin { font-weight: 600; }
.orders > li > div { min-width: 0; }
.orders .cust { color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.orders .amt { font-weight: 600; white-space: nowrap; }
.orders .when { display: block; font-size: .8rem; color: var(--muted); }
.resume-card { background: #fff; border: 1px solid var(--primary); border-radius: var(--radius); padding: var(--s3) 14px; margin-bottom: var(--s3); }
.resume-text { margin: 0 0 var(--s3); font-weight: 600; }
.resume-actions { display: flex; gap: var(--s2); }
.resume-actions .btn { flex: 1; }
/* three choices (quality-gate card): the main one on its own row */
.resume-actions.stack { flex-wrap: wrap; }
.resume-actions.stack .btn:first-child { flex-basis: 100%; }
.resume-text { overflow-wrap: anywhere; }
/* Photo that could not be read (cancelled / failed): keep it, offer a retry */
.pending-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3) 14px; margin-bottom: var(--s3); }
.pending-main { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.pending-thumb { width: 56px; height: 56px; flex: none; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: #e4e8f0; }
.pending-text { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

/* Processing */
/* The status block sits in the middle of the free height (photo, PDF and sheet alike) */
#screen-processing { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100dvh - 140px); }
#screen-processing > * { max-width: 100%; }
#screen-processing .proc-slow { width: 100%; }
.proc-photo { max-width: 60%; max-height: 40vh; border-radius: var(--radius); border: 1px solid var(--border); margin: var(--s2) auto 20px; display: block; }
.spinner { width: 48px; height: 48px; margin: 0 auto var(--s3); border: 5px solid #cfd8ea; border-top-color: var(--primary); border-radius: 50%; animation: spin 0.9s linear infinite; }
/* Boot: until the session answers no screen is shown; a quiet ring instead of a blank page (no copy: nothing to translate) */
body:not([data-screen]) main::after { content: ''; display: block; width: 36px; height: 36px; margin: 20vh auto 0; border: 4px solid #cfd8ea; border-top-color: var(--primary); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.proc-msg { font-size: 1.05rem; }
/* The pet-flavoured line under the real status: muted, swaps every few seconds */
.proc-joke { min-height: 2.9em; margin: var(--s1) 0 0; color: var(--muted); font-size: .92rem; font-style: italic; line-height: 1.45; white-space: pre-line; transition: opacity .3s; }
.proc-joke.fade { opacity: 0; }
.proc-slow-text { margin: var(--s3) 0 0; color: var(--muted); }
.proc-slow .btn { max-width: 320px; margin: var(--s3) auto 0; }
/* Small ring that works on both the primary and the disabled button (inherits the text colour) */
.spinner.sm { width: 20px; height: 20px; margin: 0; border: 3px solid rgba(255, 255, 255, .35); border-top-color: currentColor; }

/* Review: photo first */
/* The whole sheet is visible: object-fit contain up to 38vh, the letterbox is a very light slate. */
.photo-hero {
  position: relative; display: block; width: 100%; min-height: 96px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: #eef1f6; cursor: zoom-in;
}
.screen-head + .photo-hero { margin-top: var(--s2); }
.photo-hero img { display: block; width: 100%; height: auto; max-height: 38vh; object-fit: contain; object-position: center; }
.photo-pill {
  position: absolute; right: var(--s2); bottom: var(--s2);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--s3); border-radius: 999px;
  background: rgba(0, 0, 0, .78); color: #fff; font-size: .85rem; font-weight: 600;
}
.photo-overlay { position: fixed; inset: 0; z-index: 100; display: flex; background: rgba(15, 23, 42, .96); }
.photo-scroll { flex: 1; display: flex; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; }
/* Open at screen width so the whole note is readable at once; pinch (or browser zoom) enlarges from there. */
.photo-scroll img { flex: none; width: 100%; height: auto; max-width: none; margin: auto; }
/* Photo mode: no scrolling, the picture is moved by app.js (pointer zoom / pan) */
.photo-scroll.zoom { position: relative; display: block; overflow: hidden; touch-action: none; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.photo-scroll.zoom.zoomed { cursor: grab; }
.photo-scroll.zoom img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; object-fit: contain; transform-origin: 0 0; -webkit-user-drag: none; user-select: none; will-change: transform; }
.photo-scroll.zoom img.anim { transition: transform .22s ease-out; }
.photo-hint {
  position: fixed; left: 50%; bottom: calc(var(--s4) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1;
  max-width: calc(100% - 2 * var(--s4)); margin: 0; padding: 6px var(--s3); border-radius: 999px; pointer-events: none;
  background: rgba(15, 23, 42, .85); color: #e2e8f0; font-size: .85rem; text-align: center;
}
.photo-close {
  position: fixed; top: calc(var(--s2) + env(safe-area-inset-top)); right: calc(var(--s2) + env(safe-area-inset-right));
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .7); color: #fff; cursor: pointer;
}

/* Review: customer, lines */
.row { display: flex; gap: var(--s2); align-items: center; }
.row > .input { flex: 1; min-width: 0; }
.cust-raw { font-size: .85rem; color: var(--muted); margin: 0 0 6px; overflow-wrap: anywhere; }
.cust-none { margin: 0 0 var(--s2); }
.group-title { margin: var(--s5) 0 var(--s2); font-size: .95rem; }
.group-title + .group-legend { margin: calc(var(--s1) * -1) 0 var(--s2); font-size: .8rem; color: var(--muted); }
/* Model notes that match no line: one small line under the heading */
.group-note { margin: calc(var(--s1) * -1) 0 var(--s2); font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
/* Resumed draft without its photo */
.banner { display: flex; align-items: flex-start; gap: var(--s2); margin-top: var(--s2); padding: var(--s3); background: var(--amber-bg); border: 1px solid #f0c36d; border-radius: var(--radius); color: var(--amber-text); font-size: .92rem; }
.banner > .icon { margin-top: 2px; }
.banner p { margin: 0; }
/* The link is part of the sentence; its touch area (44px tall) extends past the text */
.inline-btn::after { content: ""; position: absolute; inset: -12px -6px; }
.inline-btn { position: relative; display: inline; padding: 0; border: 0; line-height: inherit; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Customer: full card when it is the open question, one line once the ΑΦΜ vouched for it */
.cust-card.compact { padding: 2px var(--s2) 2px var(--s3); margin-top: var(--s4); }
.cust-line { display: flex; align-items: center; gap: var(--s2); min-height: 48px; }
.cust-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 4px 0; }
.cust-name { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.cust-afm { display: inline-flex; align-items: center; gap: 3px; flex: none; color: var(--green-text); font-size: .85rem; font-weight: 700; white-space: nowrap; }
.cust-change { flex: none; min-width: 64px; min-height: 44px; margin-left: auto; padding: 0 var(--s3); border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; }
.empty-card { margin-top: var(--s4); text-align: center; border-style: dashed; }
.empty-title { margin: 0 0 2px; font-weight: 700; }
.empty-card .muted { margin: 0 0 var(--s1); }
.line { min-width: 0; border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: #fafbfd; scroll-margin: calc(100px + env(safe-area-inset-top)) 0 160px; }
.line.invalid { border-color: var(--red); background: #fffafa; }
.line-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); margin-bottom: 6px; }
.raw { font-style: italic; color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; min-width: 0; padding-top: 2px; }
.del { color: var(--red-text); margin: -10px -10px 0 0; }
.item-detail { margin: 6px 0 0; font-size: .9rem; color: var(--text); overflow-wrap: anywhere; }
.line-bottom { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s2); flex-wrap: wrap; }
.badges { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.qty { width: 90px; flex: 0 0 90px; text-align: center; }
.unit { width: 84px; flex: 0 0 84px; }
/* Optional line discount: «%» sits inside the field once a value is typed */
.disc-field { position: relative; width: 96px; flex: 0 0 96px; }
.disc-field .input { text-align: center; padding-right: 22px; }
.disc-field .input:placeholder-shown { padding-right: var(--s2); }
.disc-suffix { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input.disc.bad { border-color: var(--red); background: var(--red-bg); }
/* Discount policy tag next to a discount field: «από πολιτική» (muted) / «δική σου» (amber). Tap shows the reason. */
.disc-tag { position: relative; display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--muted); font: inherit; font-size: .75rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
button.disc-tag { cursor: pointer; }
button.disc-tag::after { content: ""; position: absolute; inset: -9px -4px; }
.disc-tag.manual { background: var(--amber-bg); border-color: #f0c36d; color: var(--amber-text); }
.disc-note { flex: 0 0 100%; margin-top: -2px; }
.disc-note[hidden], .cl-tag[hidden], .tot-tag[hidden] { display: none; }
.cl-tag { display: inline-flex; }
.tot-lab { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
/* Species icon before an item name: small, muted, decorative (the name is in its title) */
.species { display: inline-flex; flex: none; color: var(--muted); margin-top: 3px; }
.icon.sp { width: 16px; height: 16px; stroke-width: 2.25; }
/* Species colour codes (Chris): one hue per animal, readable on white and on the pink error tint. */
.species[data-species="dog"]     { color: #b45309; } /* amber-brown */
.species[data-species="cat"]     { color: #ca8a04; } /* yellow */
.species[data-species="bird"]    { color: #16a34a; } /* green */
.species[data-species="fish"]    { color: #2563eb; } /* blue */
.species[data-species="rodent"]  { color: #9333ea; } /* violet */
.species[data-species="reptile"] { color: #0d9488; } /* teal */
.species[data-species="generic"] { color: var(--muted); }
.item-detail { display: flex; align-items: flex-start; gap: 6px; }
.c-disc { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); }
.qty.bad { border-color: var(--red); background: var(--red-bg); }
/* Unusual quantity: amber, never blocks */
.qty.unusual:not(.bad) { border-color: #a86400; background: var(--amber-bg); }
/* Similar catalogue items (the handwritten brand is not in the catalogue): neutral chips, one tap picks */
.alts { margin-top: 6px; }
.alts-head { margin: 0 0 4px; line-height: 1.3; font-size: .85rem; color: var(--muted); }
.alts-head strong { color: var(--text); font-weight: 600; }
.alts-toggle { min-height: 44px; padding: 0 var(--s1); border: 0; background: none; color: var(--primary); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 8px; }
.alt-list { display: flex; flex-direction: column; gap: 6px; }
.alt-chip { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font: inherit; font-size: .88rem; line-height: 1.25; text-align: left; cursor: pointer; }
.alt-chip .species { margin-top: 0; }
.alt-chip.on { border-color: var(--primary); background: #eef1f7; }
.alt-text { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: var(--s2); min-width: 0; }
.alt-name { min-width: 0; overflow-wrap: anywhere; }
.alt-meta { flex: none; font-size: .8rem; color: var(--muted); white-space: nowrap; }
/* Product family, size/colour unknown: the question sits in the line's card, amber like the quantity question */
.variant-ask { margin: 0 0 var(--s2); padding: var(--s2) var(--s3) var(--s3); border: 1px solid #a86400; border-radius: 8px; background: var(--amber-bg); color: var(--amber-text); }
.variant-q { margin: 0 0 var(--s2); display: flex; flex-direction: column; gap: 2px; font-size: .92rem; line-height: 1.3; }
.variant-q strong { font-weight: 700; }
.variant-family { font-size: .85rem; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.variant-list { display: flex; flex-wrap: wrap; gap: var(--s2); }
.variant-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 64px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font: inherit; line-height: 1.2; cursor: pointer; }
.variant-chip:active { background: #eef1f7; }
.variant-label { font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.variant-price { font-size: .78rem; color: var(--muted); }
/* Promo family («Ποια προσφορά;»): the amber .variant-ask block, one wide chip per member, the selected one marked */
.promo-list { display: flex; flex-direction: column; gap: var(--s2); }
.promo-chip { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font: inherit; line-height: 1.25; text-align: left; cursor: pointer; }
.promo-chip:active { background: #eef1f7; }
.promo-chip.on { border-color: var(--primary); background: #eef1f7; box-shadow: inset 0 0 0 1px var(--primary); }
.promo-label { font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.promo-price { flex: none; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Customer with several shops: the question reuses the amber .variant-ask block; chips are wide, name over city · address */
.cust-card .branch-ask { margin: var(--s2) 0 var(--s3); }
.cust-card.compact .branch-ask { margin: 0 0 var(--s2); }
.branch-list { display: flex; flex-wrap: wrap; gap: var(--s2); }
.branch-chip { display: flex; flex: 1 1 140px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font: inherit; line-height: 1.25; text-align: left; cursor: pointer; }
.branch-chip:active { background: #eef1f7; }
.branch-chip.on { border-color: var(--primary); background: #eef1f7; }
.branch-name { font-weight: 700; font-size: .98rem; overflow-wrap: anywhere; }
.branch-meta { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
/* «Κατάστημα: Τρίκαλα» under the customer; the whole row is the button that reopens the chips */
.cust-branch { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; margin: 0 0 var(--s1); padding: 0; border: 0; border-top: 1px solid var(--border); background: none; color: var(--text); font: inherit; font-size: .92rem; text-align: left; cursor: pointer; }
.cust-card:not(.compact) .cust-branch { margin-top: var(--s2); border: 1px solid var(--border); border-radius: 8px; padding: 0 var(--s3); background: #fff; }
.cb-label { flex: none; color: var(--muted); }
.cb-name { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.cb-chev { flex: none; color: var(--primary); width: 16px; height: 16px; }
/* A line that is one of several made from one «όλα τα μεγέθη» handwriting */
.from-all-sizes { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--muted); font-size: .75rem; font-style: normal; font-weight: 600; white-space: nowrap; vertical-align: baseline; }
.c-main .from-all-sizes { align-self: flex-start; margin: 2px 0 0; }
/* The lines of one «όλα τα μεγέθη» fold into one card, the same header + panel as the orders on the home screen (.acc-*) */
.gf { background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.gf-head { align-items: center; }
.gf-name { font-weight: 700; overflow-wrap: anywhere; }
.gf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 2px; color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.gf-meta .from-all-sizes { margin: 0; }
.gf-body { padding: var(--s3); border-top: 1px solid var(--border); }
.gf-body .from-all-sizes { display: none; } /* the header says it once */
/* What the model said about this line: one muted sentence */
.line-notes:empty { display: none; }
.line-note { margin: 0 0 6px; font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
/* Unusual quantity: the question sits in the line's own card */
.qty-ask { margin-top: var(--s2); padding: var(--s2) var(--s3) var(--s3); border: 1px solid #a86400; border-radius: 8px; background: var(--amber-bg); color: var(--amber-text); }
.qty-ask-text { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 var(--s2); font-weight: 600; font-size: .92rem; }
.qty-ask-text .icon { margin-top: 1px; }
.qty-ask-actions { display: flex; gap: var(--s2); }
.qty-ask-actions .btn { flex: 1; margin-top: 0; }
.qty-warn { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: .85rem; font-weight: 600; color: var(--amber-text); }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; padding: 3px var(--s2); border-radius: 999px; white-space: nowrap; }
.badge.green { background: var(--green-bg); color: var(--green-text); }
.badge.amber { background: var(--amber-bg); color: var(--amber-text); }
.badge.red { background: var(--red-bg); color: var(--red-text); }

/* Compact row for confident lines: [✓ over species] [name + handwriting] [3 × ΤΕΜ] [Διόρθωση].
   Under 420px the quantity and «Διόρθωση» drop to a second row so the name keeps the full width. */
.line.compact {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; grid-template-areas: "lead main qty edit";
  align-items: center; gap: 0 10px; padding: 2px 2px 2px var(--s3); min-height: 52px; background: #fff;
}
.c-lead { grid-area: lead; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 10px; }
.c-lead .species { margin-top: 0; }
.c-main { grid-area: main; display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 7px 0; }
.c-text { overflow-wrap: anywhere; min-width: 0; }
/* The handwriting the match came from: small, muted, one line */
.c-raw { font-size: .8rem; font-style: italic; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--green-bg); color: var(--green-text); flex: none; }
.c-qty { grid-area: qty; font-weight: 600; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.edit-btn { grid-area: edit; min-width: 64px; min-height: 44px; padding: 0 var(--s3); border: 0; background: none; color: var(--primary); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 8px; }
@media (max-width: 419px) {
  .line.compact { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "lead main main" "lead qty edit"; }
  .c-qty { text-align: left; align-self: center; padding-bottom: 2px; }
  .c-qty .c-disc { display: inline; margin-left: var(--s2); }
  .edit-btn { min-height: 40px; margin-bottom: 4px; }
}

.search { margin-top: var(--s2); padding: var(--s2); background: #eef2fa; border-radius: 8px; }
.results { display: flex; flex-direction: column; gap: var(--s1); margin-top: 6px; max-height: 260px; overflow-y: auto; }
.result { text-align: left; min-height: 44px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.result small { color: var(--muted); display: block; }
.result .mine-badge { margin-left: 8px; font-size: .75rem; font-weight: 600; padding: 1px var(--s2); vertical-align: 1px; }
/* Sticky confirm bar: solid, full-bleed. Customer + totals on the left, the small «Έλεγξε N κωδικούς» jump on the right,
   the button below (its label carries the reason it is off). Header + bar stay near a fifth of a 375×812 screen. */
.sticky-bar {
  position: sticky; bottom: 0; z-index: 5;
  margin: var(--s3) calc(var(--s4) * -1) 0; padding: 6px var(--s4) calc(6px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--border);
}
.bar-top { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s1); }
.summary { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; flex-direction: column; font-size: .82rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
/* Customer name, then the ΑΦΜ under it: the name wraps instead of being cut (two lines at 375px) */
.sum-cust { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; font-weight: 700; }
.sum-name { min-width: 0; overflow-wrap: anywhere; }
.sum-afm { display: inline-flex; align-items: center; gap: 2px; flex: none; color: var(--green-text); font-size: .78rem; white-space: nowrap; }
.sum-rest { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Small outlined button, not an underlined link; the hit area is 44px tall even though the button looks 36px */
.hint-link { position: relative; display: inline-flex; align-items: center; gap: var(--s1); flex: none; min-height: 36px; padding: 0 10px; border: 1px solid var(--primary); border-radius: 999px; background: #fff; color: var(--primary); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.hint-link::after { content: ""; position: absolute; inset: -4px 0; }
.hint-link .icon { width: 14px; height: 14px; }
@media (max-width: 419px) { .hint-link .icon { display: none; } }
/* Persistent send error: stays until retried (toasts are for transient info only) */
.bar-error {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px var(--s3);
  margin: 0 0 var(--s2); padding: var(--s2) var(--s3);
  background: var(--red-bg); border: 1px solid var(--red); border-radius: 10px; color: var(--red-text);
}
.bar-error-text { flex: 1 1 14rem; min-width: 0; display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
.bar-error-text .icon { margin-top: 2px; }
.err-retry {
  flex: none; min-height: 44px; min-width: 44px; margin-left: auto; padding: 0 var(--s4);
  border: 1px solid var(--red-text); border-radius: 8px; background: #fff; color: var(--red-text);
  font: inherit; font-weight: 700; cursor: pointer;
}
.err-retry:disabled { opacity: .55; cursor: not-allowed; }
.bar-actions { display: flex; gap: var(--s2); align-items: center; }
.bar-actions .link-btn { width: auto; flex: none; min-height: 56px; padding: 0 var(--s2); }
.bar-actions .primary { flex: 1; min-width: 0; padding: 8px var(--s2); font-size: 1rem; line-height: 1.2; }
.sticky-bar .btn.big { min-height: 52px; }
/* Review header row: the destructive «Ακύρωση» sits top-right, far from the primary button */
.screen-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.screen-head h2 { margin: 0; }
.head-link { width: auto; min-height: 44px; padding: 0 var(--s2); }

/* Phone keyboard open (set from visualViewport): the bar keeps only the summary so the form stays visible */
body.kb-open .sticky-bar { padding-bottom: 6px; }
body.kb-open .sticky-bar .bar-actions, body.kb-open .sticky-bar .hint-link { display: none; }

/* Short screens (home, result): the bar is pushed to the bottom of the viewport so the primary action
   is in the thumb zone even when the content is short. 48px header + 16px gutter. */
#screen-home, #screen-result { display: flex; flex-direction: column; min-height: calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
#screen-home > .sticky-bar, #screen-result > .sticky-bar { margin-top: auto; }

/* Desktop: a 640px column. Buttons are sized to content, primary at the end of the Z-scan (bottom-right);
   centred bars (home, result) follow their centred content. Bars that follow short content are static. */
@media (min-width: 640px) {
  .bar-actions { justify-content: flex-end; }
  .bar-actions .primary { flex: none; width: auto; min-width: 260px; max-width: 440px; padding: 10px var(--s5); }
  .sticky-bar.centered .bar-actions { justify-content: center; }
}
/* Tablets and up: a wider column, still one reading path */
@media (min-width: 768px) {
  main, .top { max-width: 720px; }
}
/* Review on tablets and up: two columns. The photo stays on the left, sticky under the header and as tall as the
   viewport allows, so the handwriting can be compared with the lines on the right while scrolling them.
   Only this screen is wider (data-screen is set by show() in app.js). The bottom bar keeps its behaviour (sticky,
   at the bottom of the lines column). */
@media (min-width: 768px) {
  body[data-screen="review"] main, body[data-screen="review"] .top { max-width: 1100px; }
  #screen-review { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s5); align-items: start; }
  #screen-review > * { grid-column: 2; min-width: 0; }
  #screen-review > .screen-head { margin-top: 0; }
  #screen-review > .photo-hero {
    grid-column: 1; grid-row: 1 / span 30;
    position: sticky; top: calc(60px + env(safe-area-inset-top) + var(--s3));
    height: calc(100dvh - 60px - env(safe-area-inset-top) - var(--s3) - var(--s4)); min-height: 320px;
  }
  #screen-review > .photo-hero img { height: 100%; max-height: none; }
  #screen-review > .sticky-bar { margin-left: 0; padding-left: 0; }
}
/* Mouse-driven screens only: bars that follow short content become static under it.
   Touch tablets keep the bottom bar in the thumb zone like phones. */
@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
  #screen-home, #screen-result { min-height: 0; }
  .sticky-bar.centered { position: static; margin-top: var(--s5); border-top: 0; background: transparent; }
}

/* Result */
.big-check { width: 88px; height: 88px; margin: var(--s3) auto 0; align-self: center; color: var(--green); stroke-width: 1.5; }
.result-card { text-align: center; margin-bottom: 20px; }
.fincode { font-size: 1.4rem; font-weight: 700; color: var(--accent); margin-bottom: var(--s1); overflow-wrap: anywhere; }
.fincode-label { display: block; color: var(--muted); font-size: .8rem; font-weight: 600; }
.total { font-size: 1.6rem; font-weight: 700; margin: 6px 0; }
.result-card > div { overflow-wrap: anywhere; }
.res-deliv { font-weight: 600; margin-bottom: 2px; }
.res-next { margin: 0 0 var(--s4); color: var(--text); font-size: .95rem; }
.res-mistake { margin: 0 0 var(--s4); color: var(--muted); font-size: .9rem; }
.res-mistake strong { display: block; color: var(--text); }
.res-mistake .tel-link { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 12px 4px; margin: -12px -4px; }
.nowrap { white-space: nowrap; }
.res-note { margin: var(--s2) 0 0; color: var(--muted); font-size: .9rem; font-style: italic; }

/* Easter egg: five taps on the paw make it rain paws for a moment */
.paw-rain { position: fixed; inset: 0; z-index: 150; pointer-events: none; overflow: hidden; }
/* Each animal keeps its species colour (.species[data-species] above); paws take the brand red. Size, spin and sideways
   drift come inline from app.js (animalStorm). opacity 0 until its delay is over, so late waves do not sit at the top. */
.paw-rain .icon { position: absolute; top: -48px; width: 28px; height: 28px; opacity: 0; stroke-width: 2; animation: paw-fall 2.4s ease-in forwards; }
.paw-rain .icon[data-paw] { color: #ff5a6e; }
@keyframes paw-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: .9; }
  100% { transform: translate(var(--drift, 0), 115vh) rotate(var(--spin, 40deg)); opacity: 0; }
}
.paw-rain.up .icon { top: auto; bottom: -48px; animation-name: paw-rise; }
@keyframes paw-rise {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: .9; }
  100% { transform: translate(var(--drift, 0), -115vh) rotate(var(--spin, -40deg)); opacity: 0; }
}
/* The header paw shakes itself off when the storm starts */
.brand .icon.wiggle { animation: paw-wiggle .7s ease-in-out; }
@keyframes paw-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-22deg) scale(1.25); } 50% { transform: rotate(20deg) scale(1.25); } 80% { transform: rotate(-10deg); } }
@media (prefers-reduced-motion: reduce) { .paw-rain .icon { animation-duration: .8s !important; } .brand .icon.wiggle { animation: none; } }
.brand { cursor: default; user-select: none; }
.res-comments { margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px solid var(--border); text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Toast */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 200;
  width: max-content; max-width: calc(100% - 32px); padding: var(--s3) var(--s4); border-radius: 10px;
  background: #222; color: #fff; font-size: .95rem; box-shadow: 0 4px 16px rgba(0,0,0,.3);
  pointer-events: none; /* never blocks the confirm bar underneath */
}
.toast-msg { white-space: pre-line; text-align: center; }
.toast.has-action .toast-msg { text-align: left; } /* next to an «Αναίρεση» button the text reads as a label */ /* a "\n" in the copy (lines.js milestones) puts the light line under the fact */
.toast.has-action { display: flex; align-items: center; gap: var(--s3); padding-right: var(--s2); }
.toast-action { pointer-events: auto; min-height: 44px; padding: 0 var(--s3); border: 1px solid rgba(255, 255, 255, .55); border-radius: 8px; background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.toast.error { background: var(--red-text); }
.toast.ok { background: var(--green-text); }

/* Browser surfaces */
::selection { background: #cfdcf6; color: var(--text); }

/* Login (email code + Google / Apple) */
/* The login screen has nothing else on it: sit the form around the vertical middle, slightly low,
   so the inputs and the primary button land in the thumb zone on a phone. */
#screen-login {
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding-top: 6vh;
}
@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
  #screen-login { min-height: 0; padding-top: var(--s5); }
}
.login-step { margin-top: var(--s4); }
.login-step .btn.primary { margin-top: var(--s3); }
.login-status { margin: var(--s2) 0 0; }
.login-status:empty { margin: 0; }
.code-input { font-size: 1.5rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.sent { margin: 0 0 var(--s3); font-weight: 600; overflow-wrap: anywhere; }
.dev-note { margin: var(--s1) 0 0; }
/* Inline error under the field (red-text on the page background ≈ 8:1) */
.field-err { margin: var(--s1) 0 0; color: var(--red-text); font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
.field-err:empty { margin: 0; }
.input[aria-invalid="true"] { border-color: var(--red); }
.login-links { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.login-links .btn { width: auto; min-width: 44px; }
.or-divider { display: flex; align-items: center; gap: var(--s3); margin: var(--s5) 0 var(--s2); color: var(--muted); font-size: .9rem; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.btn.social { background: #fff; color: var(--text); border-color: var(--border); margin-top: 10px; }
.icon.glyph { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.social-host { display: flex; justify-content: center; margin-top: 10px; }

/* In-app confirmation sheet (askSheet in app.js): bottom sheet on phones, centred dialog from 640px */
.sheet-backdrop { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; justify-content: center; background: rgba(15, 23, 42, .55); animation: sheet-fade .2s ease-out; }
.sheet {
  width: 100%; max-width: 480px; padding: var(--s5) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  background: var(--card); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 32px rgba(15, 23, 42, .25);
  animation: sheet-up .28s cubic-bezier(.16, 1, .3, 1);
}
.sheet-title { margin: 0 0 var(--s2); font-size: 1.15rem; text-wrap: balance; }
.sheet-body { margin: 0 0 var(--s4); color: var(--muted); }
.sheet-actions { display: flex; flex-direction: column; }
.sheet-actions .btn { margin-top: 0; }
.sheet-actions .btn + .btn { margin-top: 10px; }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 640px) {
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: 16px; padding-bottom: var(--s5); box-shadow: 0 12px 40px rgba(15, 23, 42, .3); }
}
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-backdrop { animation: none; } }

/* Order accordion: row header (button) + panel that opens in place. Height animates via grid rows 0fr -> 1fr. */
.acc-head {
  display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 56px; padding: 10px var(--s3);
  border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.acc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.acc-main .cust { overflow-wrap: anywhere; } /* the customer's name is never cut: it wraps under the number */
.acc-main .afm { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.acc-side { flex: none; text-align: right; }
.acc-chev { width: 20px; height: 20px; color: var(--muted); transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
.acc-head[aria-expanded="true"] .acc-chev { transform: rotate(180deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s cubic-bezier(.16, 1, .3, 1); }
.acc-panel.open { grid-template-rows: 1fr; }
.acc-inner { min-height: 0; overflow: hidden; }
.acc-body { padding: 0 var(--s3) var(--s3); border-top: 1px solid var(--border); }
.ord-lines { list-style: none; margin: 0; padding: 0; }
/* [icon] name · line value, with «2 × ΤΕΜ −10%» under the name */
.ord-line { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: "ic name val" "ic qty val"; column-gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ord-line:last-child { border-bottom: 0; }
.ord-line .species { grid-area: ic; margin-top: 3px; }
.ord-name { grid-area: name; overflow-wrap: anywhere; }
.ord-qty { grid-area: qty; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ord-disc { margin-left: var(--s2); font-weight: 700; color: var(--green-text); }
.ord-val { grid-area: val; align-self: center; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Brand group: a native <details>; the summary reads brand · «N κωδικοί» · Σ, with a chevron that turns when open */
.ord-brand { padding: 0; border-bottom: 1px solid var(--border); }
.ord-brand:last-child { border-bottom: 0; }
.ord-brand-head { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: "ic name val" "ic n val"; column-gap: 10px; padding: 10px 0; cursor: pointer; list-style: none; }
.ord-brand-head::-webkit-details-marker { display: none; }
.ord-brand-head::before { grid-area: ic; content: ""; width: 8px; height: 8px; margin: 7px 0 0 2px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.ord-brand-box[open] > .ord-brand-head::before { transform: rotate(45deg); }
.ord-brand-name { grid-area: name; font-weight: 600; overflow-wrap: anywhere; }
.ord-brand-n { grid-area: n; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ord-brand-lines { padding-left: 26px; border-top: 1px dashed var(--border); }
.ord-brand-lines > :last-child { border-bottom: 0; }
.ord-brand-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ord-foot { margin: 0; padding-top: var(--s2); font-size: .9rem; }
.ord-foot + .ord-foot { padding-top: 2px; }
.ord-comments { color: var(--muted); overflow-wrap: anywhere; white-space: pre-wrap; }
.skel-row { display: block; }
.orders > li.skel-row { flex-direction: column; justify-content: flex-start; padding: var(--s3); }
.skel-row .skel { margin-top: 0; width: 55%; }
.skel-row .skel.short { width: 30%; height: 14px; margin-top: var(--s2); }
.skel { height: 20px; margin-top: var(--s3); border-radius: 6px; background: linear-gradient(90deg, #e4e8f0 25%, #f1f4f9 50%, #e4e8f0 75%); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
@keyframes skel { to { background-position: -200% 0; } }
.acc-error { padding-top: var(--s3); }
.acc-error p { margin: 0 0 var(--s2); color: var(--red-text); font-weight: 600; }
.acc-error .btn { margin-top: 0; }
/* Result screen: the same component as a standalone, collapsed card under the result card */
.acc.plain { margin: 0 0 var(--s4); text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.acc.plain .acc-main { font-weight: 600; }
.res-order { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .acc-panel, .acc-chev { transition: none; }
  .skel { animation: none; }
}

/* Finalisation screen («Οριστικοποίηση παραγγελίας») */
.cart-sub { margin: 2px 0 var(--s3); }
/* The subtitle with the order's photo, small, on its right (a tap opens the full-size viewer) */
.cart-intro { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: 2px 0 var(--s3); }
.cart-intro .cart-sub { margin: 0; }
.cart-photo { flex: none; width: 56px; height: 56px; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; cursor: zoom-in; }
.cart-photo[hidden] { display: none; }
.cart-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cart-photo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cart-customer { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.cc-main { flex: 1 1 auto; min-width: 0; }
.cc-name { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.cc-meta { display: flex; align-items: center; gap: 4px; margin: 2px 0 0; font-size: .88rem; color: var(--muted); }
.cc-meta .icon { color: var(--green-text); }
.cart-customer .cust-change { margin-left: 0; }
.cart-line {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 44px; grid-template-areas: "lead name val del" ". meta meta meta" ". recent recent recent" "ask ask ask ask";
  column-gap: 10px; align-items: center;
  padding: 2px 0 6px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff;
}
.cart-line.invalid { border-color: var(--red); background: #fffafa; }
.cl-lead { grid-area: lead; display: flex; justify-content: center; }
.cl-lead .species { margin-top: 0; }
.cl-name {
  grid-area: name; min-width: 0; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.cl-val { grid-area: val; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-line .del { grid-area: del; width: 44px; height: 44px; margin: 0; }
/* Line 2: quantity chip, discount chip, «Διόρθωση». Chips look small (36px) but keep a 44px touch area. */
.cl-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s2); min-width: 0; margin: -2px 8px 0 0; }
.cl-chip, .cl-edit .input, .cl-meta .disc-field .input { min-height: 36px; }
.cl-chip {
  position: relative; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px;
  background: #f6f8fc; color: var(--text); font: inherit; font-size: .92rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.cl-chip::after { content: ""; position: absolute; inset: -4px -2px; }
.cl-chip.unusual { border-color: var(--amber-text); background: var(--amber-bg); color: var(--amber-text); }
.cl-chip.cl-disc { background: none; border-style: dashed; color: var(--muted); font-weight: 500; }
.cl-chip.cl-disc.has { background: var(--green-bg); border-style: solid; border-color: transparent; color: var(--green-text); font-weight: 700; }
.cl-edit { display: inline-flex; align-items: center; gap: 6px; }
.cl-unit { font-weight: 600; color: var(--muted); white-space: nowrap; }
.cart-line .qty { width: 64px; flex: 0 0 64px; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
.cart-line .disc-field { width: 76px; flex: 0 0 76px; }
.cart-line .disc-field .input { padding-top: 0; padding-bottom: 0; }
/* «Διόρθωση» looks small (32px) but keeps a 44px touch area */
.cart-line .edit-btn { position: relative; min-height: 32px; min-width: 0; margin-left: auto; padding: 0 4px; white-space: nowrap; }
.cart-line .edit-btn::after { content: ""; position: absolute; inset: -6px -4px; }
.cart-line .qty-ask { grid-area: ask; margin: var(--s2) 12px 4px 0; }
/* «Το ξαναπήρε 3× το τρίμηνο · τελευταία 12/09 (×3)»: calm green (same family as «Σίγουρο», lighter); grey when older than a quarter.
   The short form («3× τρίμηνο · 12/09») replaces the long one on phones. A button: tap shows the full sentence in a toast. */
.recent-tag { position: relative; display: inline-flex; align-items: center; max-width: 100%; padding: 1px 8px; border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: .75rem; font-weight: 600; line-height: 1.5; text-align: left; white-space: nowrap; cursor: pointer; }
.recent-tag::after { content: ""; position: absolute; inset: -9px -4px; }
.recent-tag.hot { background: #eef8f1; border-color: #c3e4cd; color: var(--green-text); }
.recent-tag.old { background: var(--card); border-color: var(--border); color: var(--muted); font-weight: 500; }
.rc-short { display: none; }
.recent-row { margin-top: 6px; }
.alias-tag { display: inline-block; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--muted); font-size: .75rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.c-main .alias-tag { align-self: flex-start; margin-top: 3px; }
.alias-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
.alias-forget { min-height: 44px; padding: 0 var(--s1); border: 0; background: none; color: var(--primary); font: inherit; font-size: .85rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 8px; }
.alias-forget:disabled { opacity: .5; cursor: default; }
.c-main .recent-tag { align-self: flex-start; margin-top: 3px; }
.cl-recent { grid-area: recent; margin: 2px 8px 2px 0; }
@media (max-width: 479px) {
  .rc-long { display: none; }
  .rc-short { display: inline; }
  /* Review row at phone width: quantity · unit · discount on one line, the status chip on the next, the policy tag under it */
  .line-bottom .badges { flex: 0 0 100%; }
  .recent-tag { overflow: hidden; text-overflow: ellipsis; }
  .sum-rest .net-frag, .bar-summary .net-frag { display: none; }
}
.cart-totals { padding-top: var(--s2); padding-bottom: var(--s2); }
.tot-row { display: flex; justify-content: space-between; gap: var(--s3); padding: 6px 0; font-variant-numeric: tabular-nums; }
.tot-row.disc .tot-val { color: var(--green-text); font-weight: 600; }
/* Order-level discount: the label on the left, the same «Έκπ. %» field as on a line on the right */
.tot-input { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 6px 0; }
.tot-input label { min-width: 0; }
.tot-input .disc-field { width: 96px; flex: 0 0 96px; }
.ord-orderdisc { display: flex; justify-content: space-between; gap: var(--s3); font-variant-numeric: tabular-nums; }
.ord-orderdisc span:last-child { color: var(--green-text); font-weight: 600; white-space: nowrap; }
/* Καθαρή αξία: a thin rule above, semibold; ΦΠΑ rows are quiet; «με ΦΠΑ» is a small hint in the Σύνολο label */
.tot-row.net { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); font-weight: 600; }
.tot-row.vat { padding-top: 2px; padding-bottom: 2px; color: var(--muted); }
.tot-hint { font-size: .75rem; font-weight: 500; color: var(--muted); }
.ord-tot { display: flex; justify-content: space-between; gap: var(--s3); font-variant-numeric: tabular-nums; }
.ord-tot.net { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--border); font-weight: 600; }
.ord-tot.vat { color: var(--muted); }
.ord-tot.total { font-weight: 700; }
.tot-row.total { margin-top: 4px; padding-top: var(--s3); border-top: 1px solid var(--border); font-size: 1.25rem; font-weight: 700; }
#cartTitle:focus { outline: none; }

/* An expanded «Σίγουρες» line: its header (the handwriting) folds it back */
.raw.collapsible { flex: 1 1 auto; align-self: stretch; cursor: pointer; }

/* ---------- Import from file / export ---------- */
/* Home: «Από αρχείο» sits beside the primary button, sized to its content (the primary takes the rest) */
.bar-actions .secondary { width: auto; flex: none; min-height: 52px; margin-top: 0; padding: 8px var(--s3); font-size: .95rem; }
/* Processing: a file with no picture to show — its name stands in for the photo */
.proc-file { display: flex; align-items: center; justify-content: center; gap: var(--s2); max-width: 100%; margin: var(--s2) auto 20px; padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--radius); background: #fff; font-weight: 600; }
.proc-file span { min-width: 0; overflow-wrap: anywhere; }
.proc-file .icon { flex: none; color: var(--muted); }
.file-thumb { display: flex; align-items: center; justify-content: center; background: #eef2fa; color: var(--muted); }
.pending-name { display: block; font-weight: 400; font-size: .85rem; color: var(--muted); }

/* «PDF · σελίδα 1 από N» on the photo hero */
.src-chip {
  position: absolute; left: var(--s2); bottom: var(--s2); padding: 5px var(--s3); border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--primary); border: 1px solid var(--border); font-size: .8rem; font-weight: 700;
}

/* Sheet hero: the table that was read, header row sticky, the matched columns tinted. Same footprint as the photo hero. */
.sheet-hero { position: relative; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; }
.sheet-hero { margin-top: var(--s2); }
.sheet-scroll { overflow: auto; max-height: min(30vh, 240px); padding-bottom: 44px; overscroll-behavior: contain; }
.sheet-hero .photo-pill { border: 0; font: inherit; font-size: .85rem; font-weight: 600; cursor: zoom-in; min-height: 36px; }
.sheet-hero .photo-pill::after { content: ""; position: absolute; inset: -4px; }
@media (min-width: 640px) { .sheet-scroll { max-height: min(38vh, 300px); } }
.sheet-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8rem; line-height: 1.3; }
.sheet-table th {
  position: sticky; top: 0; z-index: 1; padding: 7px 8px; text-align: left; white-space: nowrap;
  background: #f1f4f9; border-bottom: 1px solid var(--border); font-weight: 700; color: var(--muted);
}
.sheet-table td { padding: 6px 8px; border-bottom: 1px solid #e8ecf3; white-space: nowrap; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; }
.sheet-table tbody tr:last-child td { border-bottom: 0; }
.sheet-table td.col-name { max-width: 19ch; }
@media (min-width: 640px) { .sheet-table td { max-width: 15ch; } .sheet-table td.col-name { max-width: 26ch; } }
.sheet-table .num { text-align: right; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.sheet-table td[class*="col-"] { background: #e9eff9; }
.sheet-table th[class*="col-"] { background: #dde5f3; color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); }
/* Full-screen viewer: the card scrolls both ways, header row stays on top, cells wrap */
.photo-scroll.sheet-mode { display: block; overflow: hidden; }
.sheet-full { height: 100%; display: flex; flex-direction: column; padding: calc(64px + env(safe-area-inset-top)) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom)); }
.sheet-card { flex: 0 1 auto; min-height: 0; overflow: auto; border-radius: var(--radius); background: #fff; overscroll-behavior: contain; }
.sheet-card:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sheet-caption { flex: none; margin: var(--s2) 0 0; color: #dbe2ee; font-size: .85rem; text-align: center; }
.sheet-table.full { width: 100%; font-size: .92rem; }
.sheet-table.full th, .sheet-table.full td { padding: 9px 10px; }
.sheet-table.full td { white-space: normal; max-width: none; overflow: visible; overflow-wrap: anywhere; }
.sheet-table.full td.col-code { white-space: nowrap; }
.sheet-table.full td.col-name { min-width: 9rem; }
@media (min-width: 768px) {
  #screen-review > .sheet-hero { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: calc(60px + env(safe-area-inset-top) + var(--s3)); }
  #screen-review > .sheet-hero .sheet-scroll { max-height: calc(100dvh - 60px - env(safe-area-inset-top) - var(--s3) - var(--s4)); }
}

/* Export row: «Εξαγωγή: Excel · CSV · Εκτύπωση / PDF» — buttons, 44px targets */
.export-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); }
.exp-label { flex: 0 0 auto; color: var(--muted); font-size: .85rem; font-weight: 700; margin-right: var(--s1); }
.exp-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s3);
  border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--primary);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.exp-btn .icon { width: 18px; height: 18px; flex: none; }
.exp-btn:active { background: #eef2fa; }
.res-export { width: 100%; margin: 0 0 var(--s4); }
.res-export .export-row { justify-content: center; margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 419px) { .exp-label { flex-basis: 100%; margin: 0; } }
/* Home bar: row 1 «Από αρχείο» + the camera, row 2 the spoken order, then the small links (text order, dev-only sample) */
#screen-home .voice-row { margin-top: var(--s2); }
#screen-home .voice-row .btn { flex: 1; width: auto; min-height: 52px; margin-top: 0; font-size: 1rem; }
.home-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s4); margin-top: 2px; }
.home-links .btn { width: auto; min-height: 44px; padding: 0 var(--s2); font-size: .92rem; }
@media (min-width: 640px) {
  #screen-home .voice-row .btn { flex: none; min-width: 260px; max-width: 440px; }
}
@media (max-width: 419px) {
  .sheet-table.full { font-size: .82rem; }
  .sheet-table.full th, .sheet-table.full td { padding: 8px 6px; }
  .sheet-table.full td.col-name { min-width: 7rem; }
  .sheet-full { padding-left: var(--s2); padding-right: var(--s2); }
}
@media (max-width: 419px) { .export-row { gap: 6px; } .exp-btn { padding: 0 9px; gap: 5px; font-size: .86rem; } .exp-btn .icon { width: 16px; height: 16px; } }

/* ---------- Voice / text orders ---------- */
.voice-hint { margin: var(--s2) 0 0; }
.voice-example { margin: var(--s1) 0 0; padding: var(--s1) var(--s3); border-left: 3px solid var(--border); color: var(--muted); font-size: .85rem; font-style: italic; line-height: 1.45; }
.voice-stage { display: flex; flex-direction: column; align-items: center; gap: var(--s2); margin: var(--s5) 0 var(--s3); text-align: center; }
/* The big round button: tap to start, tap again to stop. The ring that pulses while it listens is slate, never red. */
.mic-btn {
  position: relative; display: flex; align-items: center; justify-content: center; width: 108px; height: 108px; padding: 0;
  border: 0; border-radius: 50%; background: var(--primary); color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(15, 23, 42, .25);
}
.mic-btn .icon { width: 46px; height: 46px; }
.mic-btn:active { background: var(--primary-dark); }
.mic-btn:disabled { background: var(--disabled-bg); color: var(--disabled-text); box-shadow: none; cursor: progress; }
.mic-btn::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--primary); opacity: 0; pointer-events: none; }
.mic-btn.on::after { animation: mic-ring 1.6s ease-out infinite; }
@keyframes mic-ring { from { transform: scale(.92); opacity: .55; } to { transform: scale(1.28); opacity: 0; } }
.voice-clock { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin: var(--s1) 0 0; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The one place red is used here: a small dot that pulses while recording */
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); animation: rec-pulse 1.1s ease-in-out infinite; }
@keyframes rec-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .rec-dot, .mic-btn.on::after { animation: none; } }
.voice-state { margin: 0; color: var(--muted); }
.voice-live { min-height: 96px; max-height: 34vh; overflow: auto; margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: #fff; line-height: 1.5; overflow-wrap: anywhere; }
.voice-live .interim { color: var(--muted); }
.voice-live .empty { color: var(--muted); font-style: italic; }
#screen-voice .banner { margin-top: var(--s3); }
.voice-alt { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s4); margin-top: var(--s4); }
.voice-alt .btn { width: auto; min-height: 44px; padding: 0 var(--s2); }
.voice-alt .btn.attn { color: var(--primary); font-weight: 700; }
.voice-field { margin-top: var(--s3); }
.voice-field > label { font-weight: 600; }
.voice-field textarea.input { min-height: 180px; line-height: 1.5; }
#voiceEdit .btn.primary { margin-top: 0; }
.proc-voice { max-width: 100%; }
.proc-voice span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-weight: 500; font-style: italic; }

/* Review: the transcript card stands where the photo normally is */
.voice-hero { margin-top: var(--s2); }
.vh-head { display: flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: .85rem; font-weight: 700; }
.vh-quote { margin: var(--s2) 0 0; padding: 0 0 0 var(--s3); border-left: 3px solid var(--border); font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.vh-quote.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.vh-more { min-height: 36px; margin-top: var(--s1); color: var(--primary); font-size: .9rem; }
.vh-audio { margin-top: var(--s3); }
.vh-audio audio { display: block; width: 100%; }
.vh-gone { margin: 0; }
@media (min-width: 768px) {
  #screen-review > .voice-hero { grid-column: 1; grid-row: 1 / span 30; position: sticky; top: calc(60px + env(safe-area-inset-top) + var(--s3)); }
}
.voice-link { display: block; margin-top: 4px; word-break: break-all; font-weight: 600; color: var(--ink); }
.variant-said { margin: 0 0 6px; font-size: .88rem; color: var(--muted); }

/* Progressive read: «Διαβάζω ακόμη… N γραμμές» above the lines while the rest of the note is still being read. */
.reading-more { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); padding: var(--s2) var(--s3); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--muted); font-size: .9rem; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }
.reading-more[hidden] { display: none; }
.reading-dot { flex: none; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .reading-dot { animation-duration: 3s; } }

/* ---------- Privacy & transparency (GDPR / AI Act): login note, AI line, «Απόρρητο & δεδομένα», notices, legal pages ---------- */
/* A link inside running text: primary slate, underlined; 44px touch area without moving the line (pseudo-element) */
.text-link { position: relative; color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.text-link::after { content: ""; position: absolute; inset: -12px -4px; }
.login-legal { margin: var(--s5) 0 0; color: var(--muted); font-size: .85rem; line-height: 1.5; text-wrap: pretty; }
.login-legal .inline-btn { font-weight: 600; color: var(--primary); }
/* The two links of the login note are real 44px boxes (padding, cancelled by the margin, so the line does not move) */
.login-legal .text-link, .login-legal .inline-btn { display: inline-block; padding: 12px 0; margin: -12px 0; line-height: 20px; }
.login-legal .text-link::after, .login-legal .inline-btn::after { display: none; }
/* Review: one quiet line under the title — who read the note, and that the salesman checks it */
.ai-note { margin: var(--s1) 0 var(--s2); color: var(--muted); font-size: .8rem; line-height: 1.35; overflow-wrap: anywhere; }
/* Sheets: the «where to read more» line and the optional reason field */
.sheet-note { margin: calc(-1 * var(--s2)) 0 var(--s4); color: var(--muted); font-size: .85rem; }
.sheet-field { margin-bottom: var(--s4); }
.sheet-field textarea { min-height: 76px; }
/* The screen */
.priv-lead { margin: var(--s2) 0 0; }
.priv-card h3 { margin: 0 0 var(--s2); }
.priv-note { margin: 0 0 var(--s2); }
.priv-note:last-child { margin-bottom: 0; }
.priv-table { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.35; }
.priv-table thead th { padding: 0 0 6px; color: var(--muted); font-size: .78rem; font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: .06em; }
.priv-table tbody th, .priv-table tbody td { padding: var(--s2) 0; border-top: 1px solid var(--border); vertical-align: top; text-align: left; }
.priv-table tbody th { width: 52%; padding-right: var(--s3); font-weight: 600; }
.priv-table + .priv-note { margin-top: var(--s2); }
.priv-subs { list-style: none; margin: 0; padding: 0; }
.priv-subs li { padding: var(--s2) 0; border-top: 1px solid var(--border); }
.priv-subs li:first-child { border-top: 0; padding-top: 0; }
.priv-sub-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s3); margin: 0; }
.priv-sub-country { color: var(--muted); font-size: .85rem; }
.priv-sub-purpose { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }
/* «Λεπτομέρειες»: the full region wording and what the provider receives, one tap away (44px summary) */
.priv-sub-more { margin-top: 2px; font-size: .85rem; }
.priv-sub-more > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.priv-sub-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.priv-sub-more dl { margin: 0 0 var(--s1); }
.priv-sub-more dt { color: var(--muted); font-weight: 600; }
.priv-sub-more dd { margin: 0 0 var(--s1); overflow-wrap: anywhere; }
.priv-actions .btn.secondary:first-child { margin-top: 0; }
.priv-contact { margin: 0; overflow-wrap: anywhere; }
.priv-docs { display: flex; flex-direction: column; }
.priv-doc { display: flex; align-items: center; gap: var(--s2); min-height: 48px; padding: var(--s1) 0; border-top: 1px solid var(--border); color: var(--primary); font-weight: 600; text-decoration: none; }
.priv-doc:first-child { border-top: 0; }
.priv-doc span:not(.sr) { flex: 1; text-decoration: underline; text-underline-offset: 3px; }
.priv-doc .icon.sm { color: var(--muted); }
@media (min-width: 640px) {
  .priv-actions { display: flex; gap: var(--s2); }
  .priv-actions .btn { flex: 1; margin-top: 0; }
}

/* static/privacy.html, static/terms.html (legal.js): the app header and a readable column for the markdown */
.doc-page main, .doc-page .top { max-width: 720px; }
a.hdr-back { text-decoration: none; }
.doc { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4) var(--s4) var(--s5); line-height: 1.55; overflow-wrap: anywhere; }
.doc h1 { font-size: 1.4rem; margin: 0 0 var(--s3); line-height: 1.25; }
.doc h2 { font-size: 1.15rem; margin: var(--s5) 0 var(--s2); }
.doc h3 { font-size: 1rem; margin: var(--s4) 0 var(--s2); }
.doc p { margin: 0 0 var(--s3); }
.doc ul, .doc ol { margin: 0 0 var(--s3); padding-left: 1.4em; }
.doc li { margin: 0 0 var(--s1); }
.doc a { color: var(--primary); font-weight: 600; text-underline-offset: 3px; }
.doc hr { border: 0; border-top: 1px solid var(--border); margin: var(--s5) 0; }
.doc code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .9em; background: var(--bg); padding: 0 4px; border-radius: 4px; }
.doc .doc-table { overflow-x: auto; margin: 0 0 var(--s3); }
.doc table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.doc th, .doc td { padding: 6px 8px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.doc th { background: var(--bg); }
.doc .doc-status { margin: 0; color: var(--muted); }
.doc blockquote { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-left: 3px solid var(--border); border-radius: 0 8px 8px 0; background: var(--bg); color: var(--muted); font-size: .92rem; }
.doc blockquote p:last-child { margin-bottom: 0; }
@media (min-width: 640px) { .doc { padding: var(--s5); } }

/* Header back control: every non-root screen (show() sets body.has-back). The iPhone home-screen app has no browser
   Back, so this is the only way back there; it runs the same transition as the edge swipe / Android back button. */
.hdr-back {
  display: inline-flex; align-items: center; gap: 2px; flex: none; min-height: 44px; margin-left: -10px; padding: 0 8px 0 4px;
  border: 0; border-radius: 8px; background: none; color: #fff; font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
}
.hdr-back .icon { width: 22px; height: 22px; stroke-width: 2.25; }
.hdr-back:active { background: rgba(255, 255, 255, .12); }
.hdr-back:disabled { opacity: .5; cursor: not-allowed; }
body.has-back #brandPaw { display: none; }
body.has-back .app-header .brand { margin-right: auto; }
/* Phones: Back + wordmark + name + «Αποσύνδεση» on one row. The wordmark shrinks, the role line goes (it sets the width),
   the name gives way first (ellipsis) so «Αποσύνδεση» never wraps. */
@media (max-width: 479px) {
  body.has-back .app-header { gap: 6px; }
  body.has-back .app-header .brand { font-size: 1.15rem; }
  body.has-back .brand-role { display: none; }
  body.has-back .who { flex: 0 1 auto; }
  body.has-back .who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
  body.has-back .who .link { padding: 0 4px; }
}

/* Offline outbox: on home, what was sent without signal and waits (static/offline.js). Amber, never red: nothing is wrong, it is saved. */
.outbox { margin-bottom: var(--s3); }
.outbox-card {
  display: flex; align-items: flex-start; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) 14px; background: var(--amber-bg); color: var(--amber-text);
  border: 1px solid #f0c36d; border-radius: var(--radius);
}
.outbox-icon { flex: none; margin-top: 2px; }
.outbox-body { flex: 1 1 200px; min-width: 0; }
.outbox-title { margin: 0 0 var(--s1); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.outbox-count { margin: 0; font-size: .9rem; font-weight: 600; }
.outbox-list { margin: var(--s2) 0 0; padding: 0; list-style: none; font-size: .85rem; line-height: 1.4; }
.outbox-list li { overflow-wrap: anywhere; }
.outbox-card .btn { flex: 1 1 100%; }

/* Demo accounts on the login screen: one .btn.social per account, stacked */
.demo-box { display: grid; gap: 8px; }
.demo-box[hidden] { display: none; }

/* Customer ΑΦΜ shown as a number: green with a tick when it matched the sheet, muted when the salesman chose the customer */
.cust-afm.plain, .sum-afm.plain { color: var(--muted); font-weight: 400; }

/* ---- History (OPEN-ITEMS §3.1): «Ιστορικό» link on the review's customer card, its sheet, and the home screen «Ιστορικό» ---- */
.cust-hist { flex: none; min-height: 44px; margin-left: auto; padding: 0 var(--s2); border: 0; background: none; color: var(--primary); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cust-hist + .cust-change { margin-left: 0; }
.cust-hist-row { margin-top: var(--s1); }
.cust-hist-row .cust-hist { margin-left: 0; padding-left: 0; }
.badge.slate { background: #e8ecf3; color: var(--primary); }
.hist-sheet { display: flex; flex-direction: column; max-height: min(86vh, 640px); }
.hist-sheet .sheet-title { margin-bottom: var(--s3); }
.hist-sheet-body { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; margin: 0 calc(var(--s2) * -1); padding: 0 var(--s2); }
.hist-sheet .sheet-actions { flex: none; margin-top: var(--s3); }
.hist-back { width: auto; min-height: 44px; margin: calc(var(--s2) * -1) 0 var(--s1) calc(var(--s2) * -1); padding: 0 var(--s2); }
.hist-orders, .hist-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.hist-order { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 56px; padding: 8px var(--s3); border: 1px solid var(--border); border-radius: 10px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hist-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.hist-cust { font-weight: 700; overflow-wrap: anywhere; }
.hist-meta { color: var(--muted); font-size: .85rem; }
.hist-src { flex: none; }
.hist-chev-r { transform: rotate(-90deg); }
.hist-order[aria-expanded="true"] .acc-chev { transform: rotate(180deg); }
.hist-line { display: flex; align-items: center; gap: var(--s2); padding: 8px var(--s3); border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.hist-line-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.hist-line-name { font-weight: 600; overflow-wrap: anywhere; }
.hist-line-meta { color: var(--muted); font-size: .85rem; }
.hist-add { flex: none; width: auto; min-height: 44px; margin-top: 0; padding: 0 var(--s3); white-space: nowrap; }
.hist-add:disabled { border-color: transparent; background: var(--green-bg); color: var(--green-text); }
.hist-unknown { flex: none; max-width: 9em; color: var(--muted); font-size: .8rem; text-align: right; }
.hist-periods { display: flex; gap: var(--s2); margin: var(--s3) 0; }
.hist-period { flex: 1 1 0; min-height: 44px; padding: 0 var(--s2); border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; }
.hist-period.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.hist-day { margin-top: var(--s4); }
.hist-day-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin: 0 0 var(--s2); font-size: 1rem; }
.hist-day-n { color: var(--muted); font-size: .85rem; font-weight: 400; }
.hist-detail { margin: var(--s2) 0 0 var(--s3); }
.hist-detail[hidden] { display: none; }