/* TRUCKNOW 0:00 — η ταυτότητα της Luminous (1.10.2026), πάνω στις σελίδες του teal.

   Το φύλλο αυτό μπαίνει **μόνο** όταν η ταυτότητα είναι `zero`
   (`surfaces/brand.py`): ξαναδηλώνει τις ίδιες μεταβλητές που έχει κάθε
   σελίδα στο `:root` της και αλλάζει σχήμα όπου χρειάζεται. Καμία σελίδα δεν
   ξέρει ότι υπάρχει. Με `teal` δεν φορτώνεται καν.

   Οι κανόνες της ταυτότητας:
   · Lime #E6FF00 είναι γέμισμα, ποτέ κείμενο πάνω σε ανοιχτό. Το PDF της Luminous
     γράφει #D7DB00 (Pantone 389 C)· στην οθόνη έβγαινε μουσταρδί, και οι δικές της
     φωτογραφίες δείχνουν neon (Βασίλης, 2.10.2026: «όχι τόσο μουστάρδα αλλά neon»).
     Κείμενο πάνω σε lime: πάντα ink. Σε ink, το lime γίνεται κείμενο και σήμα.
   · Τετράγωνο χαρτί, στρογγυλά χειριστήρια: πλαίσια με γωνίες μηδέν, κουμπιά
     και πεδία χάπια, κύκλοι για τα βέλη.
   · Geologica ως προσωρινή γραμματοσειρά (έχει ελληνικά)· η αυθεντική της
     Luminous δεν έχει δοθεί. */

html[data-brand="zero"]{
  --lime:#E6FF00; --paper:#F4F4F1; --soft:#D8D8D2;
  /* οι μεταβλητές των σελίδων */
  --o:#1D1D1B; --o2:#55554F; --bk:#1D1D1B; --wt:#FFFFFF; --ln:#1D1D1B; --bg:#F4F4F1;
  --teal:#E6FF00; --deep:#1D1D1B; --pine2:#000000; --ink:#1D1D1B; --foam:#F3FF99;
  --r:0px; --rl:0px;
  /* και του σκηνικού των πορτών (choose.css) */
  --pine:#1D1D1B; --muted:#55554F; --text:#1D1D1B; --line:#1D1D1B;
}
html[data-brand="zero"] body,
html[data-brand="zero"] .d,
html[data-brand="zero"] .pinlist{ font-family:'Geologica',system-ui,sans-serif; }
html[data-brand="zero"] body{ background:var(--paper); }
html[data-brand="zero"] ::selection{ background:var(--lime); color:var(--ink); }
html[data-brand="zero"] :focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* ---- Το λογότυπο. Το «t» + «rucknow» κρύβεται και στη θέση του μπαίνει το
   0:00 με το TRUCKNOW, ως μάσκα: βάφεται από το χρώμα του κειμένου, άρα
   δουλεύει σε χαρτί, σε ink και σε lime χωρίς δεύτερο αρχείο. */
html[data-brand="zero"] .wm,
html[data-brand="zero"] .sig{ font-size:0 !important; line-height:0; letter-spacing:0; align-items:center; }
html[data-brand="zero"] .wm svg,
html[data-brand="zero"] .sig svg{ display:none; }
html[data-brand="zero"] .wm span,
html[data-brand="zero"] .sig span{ display:block; width:clamp(170px,22vw,260px); aspect-ratio:260.1/24;
  background:currentColor;
  -webkit-mask:url(lockup-h.svg) center/contain no-repeat; mask:url(lockup-h.svg) center/contain no-repeat; }
html[data-brand="zero"] .sig span{ width:170px; }

/* Το σήμα μέσα στον κύκλο (είσοδος, αναμονή): ένα μηδέν σε lime. */
html[data-brand="zero"] .avatar{ background:var(--lime); border-radius:50%; }
html[data-brand="zero"] .avatar .ring{ border-color:transparent; }
html[data-brand="zero"] .avatar .arc{ border-top-color:var(--ink); }
html[data-brand="zero"] .avatar img.k{ content:url(ring.svg); width:50%; }

/* ---- Κεφαλίδα των σελίδων του πελάτη ---- */
html[data-brand="zero"] header{ align-items:center; }
html[data-brand="zero"] header nav{ padding-bottom:0; }
html[data-brand="zero"] header .k,
html[data-brand="zero"] header .lbl{ text-transform:none; letter-spacing:0; font-size:15px; color:var(--ink); }
html[data-brand="zero"] header .k:hover{ text-decoration:underline; text-underline-offset:4px; }
html[data-brand="zero"] #lang{ display:inline-grid; place-items:center; width:44px; height:44px; padding:0;
  border:1.5px solid currentColor; border-radius:50%; font-size:13px; font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; text-decoration:none; }
html[data-brand="zero"] .eyebrow,
html[data-brand="zero"] .label{ color:var(--ink); font-weight:500; letter-spacing:.16em; font-size:12px; }

/* ---- Φούσκες, κάρτες, πεδία ---- */
html[data-brand="zero"] .bubble,
html[data-brand="zero"] .card,
html[data-brand="zero"] .sheet,
html[data-brand="zero"] .adr{ background:var(--wt); }
html[data-brand="zero"] .me .bubble,
html[data-brand="zero"] .user .bubble{ background:var(--ink); color:var(--wt); }
html[data-brand="zero"] .cell.hero .v{ text-decoration:none; font-weight:500; letter-spacing:-.04em; }
/* Η τιμή κάθεται στο σβήσιμο προς lime: το ένα σημείο της κάρτας που μετρά. */
html[data-brand="zero"] .cell.hero{ background:linear-gradient(90deg,var(--wt) 0%,var(--wt) 45%,var(--lime) 100%); }
html[data-brand="zero"] .card .state{ font-weight:500; }

/* Όσο το φορτίο είναι στον δρόμο, η κάρτα του tracking ανοίγει με το φορτηγό.
   Η κατάσταση έρχεται από τον server (`status` της κάρτας)· εδώ μόνο φαίνεται. */
html[data-brand="zero"] .card[data-status="In transit"]::before,
html[data-brand="zero"] .card[data-status="On delivery"]::before{ content:""; display:block;
  height:clamp(120px,24vw,210px); border-bottom:1px solid var(--ln);
  background:#FFFFFF url(truck.jpg?v=2) center/contain no-repeat; }

/* Το πεδίο στο κάτω μέρος (τιμή, tracking, κρατήσεις): ένα λευκό χάπι. */
html[data-brand="zero"] form.in,
html[data-brand="zero"] .inbar{ background:var(--wt); border:1.5px solid var(--ink); border-radius:999px;
  padding:6px; align-items:center; overflow:hidden; }
html[data-brand="zero"] form.in{ margin:0 clamp(20px,6vw,90px) 24px; }
html[data-brand="zero"] form.in input{ padding:14px 20px; background:transparent; }
html[data-brand="zero"] .inbar input{ background:transparent; }
html[data-brand="zero"] .inbar input:first-child{ flex:1; padding-left:20px; }
html[data-brand="zero"] form.in button,
html[data-brand="zero"] .inbar #send{ border:0; border-radius:999px; align-self:stretch; min-height:48px;
  text-transform:none; letter-spacing:0; font-size:16px; font-weight:500; padding:0 26px; }
html[data-brand="zero"] form.in #mic{ background:transparent; color:var(--ink); padding:0 18px; }
html[data-brand="zero"] form.in #mic:hover,
html[data-brand="zero"] form.in #mic[aria-pressed="true"]{ background:var(--lime); color:var(--ink); }
html[data-brand="zero"] form.in #send,
html[data-brand="zero"] .inbar #send{ background:var(--ink); color:var(--wt); }
html[data-brand="zero"] form.in #send:hover,
html[data-brand="zero"] .inbar #send:hover{ background:#000; }

/* Τα δύο κουμπιά κάτω από την τιμή: η κράτηση είναι το lime. */
html[data-brand="zero"] .acts button{ color:var(--ink); font-weight:500; }
html[data-brand="zero"] .acts button.solid{ background:var(--lime); color:var(--ink); font-weight:600; }
html[data-brand="zero"] .acts button:hover{ background:var(--ink); color:var(--wt); }
html[data-brand="zero"] .chips button,
html[data-brand="zero"] .back,
html[data-brand="zero"] .msbtn{ border-radius:999px; color:var(--ink); }
html[data-brand="zero"] .chips button:hover,
html[data-brand="zero"] .back:hover,
html[data-brand="zero"] .msbtn:hover{ color:var(--wt); }

/* ---- Είσοδος, «δεν τη βλέπεις» ---- */
html[data-brand="zero"] form.mail input{ border-radius:999px; padding-left:20px; }
html[data-brand="zero"] form.mail button{ border-radius:999px; }
html[data-brand="zero"] body > .card{ background:var(--wt); }
/* Πίσω από την κάρτα της εισόδου, οι δρόμοι. */
html[data-brand="zero"] body:has(> .card){ background:var(--ink) url(roads.svg?v=2) center/cover no-repeat fixed; }

/* ---- Η αρχική του πελάτη (home.html): ο ήρωας χωρίς φωτογραφία. Χαρτί που
   σβήνει σε lime, όπως το επιστολόχαρτο· το 0:00 κάτω δεξιά, όπως η καρότσα.

   **Όλη σε μία οθόνη** (Βασίλης, 3.10.2026: «να μην χρειάζεται scroll και να
   φαίνεται αυτό του footer»). Γι' αυτό τα μεγέθη ακολουθούν και το ύψος, όχι
   μόνο το πλάτος: σε λάπτοπ 1000×545 ο τίτλος μικραίνει αντί να σπρώχνει πόρτες
   και δρόμους κάτω από την άκρη. Κάτω από 520 px ύψος η σελίδα ξανακυλά. */
html[data-brand="zero"] section.hero{ background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 48%,var(--lime) 88%);
  color:var(--ink); height:100svh; min-height:520px; }
html[data-brand="zero"] section.hero picture,
html[data-brand="zero"] section.hero .shade{ display:none; }
html[data-brand="zero"] section.hero .top{ padding-top:clamp(12px,2.6vh,28px); }
html[data-brand="zero"] section.hero .top nav a{ color:var(--ink); }
html[data-brand="zero"] section.hero .mid{ margin:0; flex:1 1 auto; min-height:0; width:100%; display:grid;
  grid-template-columns:minmax(0,1fr) auto; align-content:center; align-items:end;
  column-gap:clamp(16px,4vw,64px); row-gap:clamp(10px,2.6vh,30px); padding:clamp(8px,2vh,24px) var(--gx); }
html[data-brand="zero"] section.hero .mid::before{ content:"Time\A at will"; white-space:pre; font-size:13px; line-height:1.25;
  grid-column:1 / -1; grid-row:1; margin:0; }
html[data-brand="zero"] section.hero h1{ grid-column:1 / -1; grid-row:2; margin:0; max-width:none;
  font-weight:300; font-size:clamp(36px,min(7.6vw,10vh),116px); line-height:.92; letter-spacing:-.03em; }
html[data-brand="zero"] section.hero h1 span:nth-child(2){ color:inherit; text-align:left; font-weight:600; }
html[data-brand="zero"] section.hero form.ask{ grid-column:1; grid-row:3; max-width:820px; }
html[data-brand="zero"] section.hero .mid::after{ content:""; grid-column:2; grid-row:3; margin:0;
  width:clamp(120px,min(22vw,38vh),360px); aspect-ratio:149.49/36.1; background:var(--ink);
  -webkit-mask:url(mark.svg) center/contain no-repeat; mask:url(mark.svg) center/contain no-repeat; }
html[data-brand="zero"] form.ask{ border:1.5px solid var(--ink); border-radius:999px; padding:6px; background:var(--wt); flex-wrap:nowrap; }
html[data-brand="zero"] form.ask input{ flex:1 1 auto; min-height:0; border-bottom:0; padding:clamp(10px,1.8vh,14px) 22px; }
html[data-brand="zero"] form.ask button{ flex:0 0 auto; border:0; border-radius:999px; background:var(--ink); color:var(--wt);
  text-transform:none; letter-spacing:0; font-size:18px; font-weight:500; padding:0 6px 0 28px; gap:18px; }
html[data-brand="zero"] form.ask button::after{ content:""; width:46px; height:46px; border-radius:50%;
  background:var(--lime) url(arrow-ink.svg) center/24px no-repeat; }
html[data-brand="zero"] form.ask button:hover{ background:#000; }
/* Η εστίαση στο χάπι, όχι τετράγωνη μέσα του (Σωτήρης, 4.10.2026). */
html[data-brand="zero"] form.ask input:focus-visible{ outline:none; }
html[data-brand="zero"] form.ask:focus-within{ outline:2px solid var(--ink); outline-offset:3px; }

/* Οι τρεις πόρτες: χαρτί, lime, χαρτί, με μαύρη τρίχα ανάμεσα και βέλος σε κύκλο
   δεξιά, ώστε κάθε πόρτα να είναι μία χαμηλή λωρίδα. */
html[data-brand="zero"] .three{ margin:0; flex:none; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
html[data-brand="zero"] .three a,
html[data-brand="zero"] .three button{ border:0; border-left:1px solid var(--ink); border-radius:0; background:var(--paper);
  padding:clamp(12px,2.4vh,28px) clamp(20px,3vw,48px); display:grid; grid-template-columns:minmax(0,1fr) auto;
  column-gap:16px; align-items:center; align-content:center; }
html[data-brand="zero"] .three > :first-child{ border-left:0; padding-left:var(--gx); }
html[data-brand="zero"] .three > :nth-child(2){ background:var(--lime); }
html[data-brand="zero"] .three .k{ grid-column:1; font-weight:500; font-size:clamp(18px,min(2.2vw,3.6vh),30px); line-height:1.1; letter-spacing:-.02em; }
html[data-brand="zero"] .three .s{ grid-column:1; font-size:clamp(13px,min(1.1vw,2vh),16px); margin-top:4px; line-height:1.35; }
html[data-brand="zero"] .three > :nth-child(2) .s{ color:var(--ink); }
html[data-brand="zero"] .three a::after,
html[data-brand="zero"] .three button::after{ content:""; grid-column:2; grid-row:1 / span 2; margin:0;
  width:clamp(40px,6.5vh,56px); height:clamp(40px,6.5vh,56px);
  border-radius:50%; background:var(--ink) url(arrow-lime.svg?v=2) center/50% no-repeat; }
html[data-brand="zero"] .three a:hover,
html[data-brand="zero"] .three button:hover{ background:var(--ink); color:var(--wt); }
html[data-brand="zero"] .three a:hover::after,
html[data-brand="zero"] .three button:hover::after{ background:var(--lime) url(arrow-ink.svg) center/50% no-repeat; }

/* Το υποσέλιδο της αρχικής: οι δρόμοι της ταυτότητας, με τα βέλη να κινούνται.
   Λωρίδα σταθερού ύψους στον πάτο της οθόνης, όχι ενότητα από κάτω. */
html[data-brand="zero"] section.hero .foot{ background:var(--ink) url(roads.svg?v=2) center/cover no-repeat; color:var(--lime);
  flex:0 0 clamp(52px,12vh,150px); min-height:0; display:flex; align-items:flex-end; padding:0 var(--gx) clamp(10px,2vh,18px); }
html[data-brand="zero"] section.hero .foot a{ color:var(--ink); background:var(--lime); padding:8px 14px; text-decoration:none; }

/* Κινητό: ο τίτλος, ένα πεδίο σε μία γραμμή, τρεις λωρίδες, οι δρόμοι. Το
   μεγάλο 0:00 φεύγει — το λογότυπο είναι ήδη πάνω — για να χωρέσουν τα υπόλοιπα. */
@media (max-width:720px){
  html[data-brand="zero"] section.hero .mid{ grid-template-columns:minmax(0,1fr); align-content:center; row-gap:clamp(10px,2.2vh,22px); }
  html[data-brand="zero"] section.hero .mid::after{ display:none; }
  html[data-brand="zero"] section.hero h1{ font-size:clamp(34px,min(11.5vw,6.6vh),56px); }
  html[data-brand="zero"] form.ask input{ padding:10px 16px; font-size:16px; }
  html[data-brand="zero"] form.ask button{ font-size:0; gap:0; padding:0 3px; }
  html[data-brand="zero"] form.ask button::after{ width:44px; height:44px; }
  html[data-brand="zero"] .three a,
  html[data-brand="zero"] .three button{ border-left:0; border-top:1px solid var(--ink); padding:clamp(10px,1.8vh,16px) 20px; }
  html[data-brand="zero"] .three > :first-child{ border-top:0; padding-left:20px; }
  html[data-brand="zero"] .three .k{ font-size:18px; }
  html[data-brand="zero"] .three .s{ font-size:13px; margin-top:2px; }
  html[data-brand="zero"] .three a::after,
  html[data-brand="zero"] .three button::after{ width:40px; height:40px; }
  html[data-brand="zero"] section.hero .foot{ flex-basis:clamp(44px,9vh,90px); }
}
@media (prefers-reduced-motion:reduce){
  html[data-brand="zero"] section.hero .foot,
  html[data-brand="zero"] .bg,
  html[data-brand="zero"] body:has(> .card){ background-image:url(roads.png?v=1) !important; }
}

/* ---- Η κλειστή αρχική (holding.html) και οι πόρτες (choose.css): το φόντο
   είναι οι δρόμοι, όχι φωτογραφία. Το κείμενο κάθεται σε χαρτί. ---- */
html[data-brand="zero"] .bg{ background:var(--ink) url(roads.svg?v=2) center/cover no-repeat; }
html[data-brand="zero"] .bg::after{ display:none; }
html[data-brand="zero"] .top a,
html[data-brand="zero"] .cta{ border-radius:999px; }
html[data-brand="zero"] body > main > .wm{ align-self:flex-start; background:var(--paper); padding:clamp(20px,3vw,40px); }
html[data-brand="zero"] body > main > .wm span{ width:min(64vw,620px); aspect-ratio:149.5/61.23;
  -webkit-mask-image:url(lockup.svg); mask-image:url(lockup.svg); }
html[data-brand="zero"] body > main > .rule{ display:none; }
html[data-brand="zero"] body > main > .wm + .rule + p{ align-self:flex-start; background:var(--paper); box-sizing:border-box;
  width:calc(min(64vw,620px) + 2 * clamp(20px,3vw,40px)); max-width:none;
  padding:0 clamp(20px,3vw,40px) clamp(20px,3vw,40px); }
html[data-brand="zero"] body > footer{ background:var(--paper); }

/* Οι πόρτες (choose.css): τρεις επιφάνειες — λευκό, ink, lime. */
html[data-brand="zero"] body > main > h1{ align-self:flex-start; background:var(--paper); padding:14px 20px; max-width:none; }
html[data-brand="zero"] body > header{ background:var(--paper); }
html[data-brand="zero"] .row > .lbl{ align-self:flex-start; background:var(--lime); color:var(--ink); padding:6px 12px; font-weight:500; }
html[data-brand="zero"] .doors{ border:10px solid var(--paper); background:var(--paper); }
html[data-brand="zero"] .door.pine{ background:var(--lime); color:var(--ink); }
html[data-brand="zero"] .door.pine .k{ color:var(--ink); }
html[data-brand="zero"] .door.soon{ background:var(--paper); }

/* ---- Η πύλη του πελάτη (portal.html): σελίδα εργασίας, με πίνακες. Οι
   γραμμές μαλακώνουν — μαύρη τρίχα σε κάθε κελί πίνακα κουράζει. ---- */
html[data-brand="zero"]:has(nav.tabs){ --ln:#C4C4BD; }
html[data-brand="zero"] tbody tr.open:hover td{ background:rgba(230,255,0,.3); }
html[data-brand="zero"] nav.tabs button.on{ border-bottom-color:var(--ink); font-weight:600; }
html[data-brand="zero"] .band .cta,
html[data-brand="zero"] header .cta{ background:var(--lime); color:var(--ink); }
html[data-brand="zero"] .band .cta:hover,
html[data-brand="zero"] header .cta:hover{ background:var(--wt); color:var(--ink); }
html[data-brand="zero"] form.enter input,
html[data-brand="zero"] form.enter button{ border-radius:999px; }
/* Η κεφαλίδα της πύλης είναι ink: η γραμμή πριν το όνομα ήταν teal, και το .sub
   (var(--o) = ink) χανόταν πάνω της. */
html[data-brand="zero"] .acct{ border-left-color:rgba(255,255,255,.3); }
html[data-brand="zero"] .acct .sub{ color:rgba(255,255,255,.65); }
html[data-brand="zero"] .maplibregl-popup-content,
html[data-brand="zero"] .maplibregl-ctrl-group,
html[data-brand="zero"] .maplibregl-ctrl-group button{ border-radius:0 !important; }