/* ===========================================================================
   brain.css -- σελιδα προϊοντος "Hospitality Brain"
   Φορτωνεται 4η: theme.css -> site.css -> page.css -> brain.css

   ΓΛΩΣΣΑ ΣΧΕΔΙΑΣΗΣ (ονομασμενη, οχι "minimal"):
   λογιστικο καθολικο / πινακας αναχωρησεων. Σταθερες στηλες, λεξεις-καταστασεις
   σε mono, τριχοειδεις γραμμες αντι για καρτες, ο αριθμος στοιχιζεται παντα στην
   ιδια θεση. Η στοιχιση ΕΙΝΑΙ το σχεδιο. Το ember ειναι λυχνια κατοιχηση
   (status LED), οχι διακοσμηση -- συνεπες με τον κανονα του site.css:
   "idle = graphite, touch = heat".

   ΚΑΝΟΝΕΣ ΑΥΤΟΥ ΤΟΥ ΑΡΧΕΙΟΥ:
   - καμια hex/rgb κυριολεξια εκτος του token block παρακατω
   - καμια σκια (box-shadow / drop-shadow / text-shadow) -- μονο γραμμες
   - κανενα backdrop-filter, κανενα background-clip:text, κανενα gradient σε heading
   - καθε αριθμος tabular-nums
   ========================================================================= */

/* --- τοπικο επιπεδο tokens ------------------------------------------------
   Το ember ερχεται απο theme.css (--ember-*). Το μελανι/φοντο ερχονται απο
   site.css (--ink / --bg-void / --elev / --hairline).

   ⚠ ΓΝΩΣΤΗ ΑΠΟΚΛΙΣΗ, καταγεγραμμενη οχι κρυμμενη: το theme.css λεει
   --fg-1:#F2F2F0 / --bg-0:#09090A, το site.css λεει --ink:#F4F1EC /
   --bg-void:#060606. Ζωγραφιζει το site.css. Η μονη κυριολεξια εδω ειναι το
   --bx-ink-rgb, που ΠΡΕΠΕΙ να ισουται με το --ink του site.css. Οταν
   ενοποιηθουν τα δυο συστηματα, αλλαζει ΕΔΩ, σε μια γραμμη. */
.brain {
  --bx-ink-rgb: 244 241 236;          /* == site.css --ink #F4F1EC */

  --bx-bg:        var(--bg-void);
  --bx-panel:     var(--elev);
  --bx-ink:       var(--ink);
  /* Οι τιμες ειναι ΜΕΤΡΗΜΕΝΕΣ πανω στο --bg-void #060606 ΚΑΙ στο --elev #0B0B0D:
       ink   1.00 -> 17.98:1   ink-2 0.64 -> 7.43:1
       ink-3 0.52 ->  5.15:1   ink-4 0.38 -> 3.10:1
     Η αρχικη κλιμακα του theme.css (.42/.26) εδινε 3.68:1 και 2.05:1 -- κατω απο
     το 4.5:1 -- και σε αυτη τη σελιδα κουβαλαει ΠΛΗΡΟΦΟΡΙΑ (στηλη ωρας, στηλη
     καταστασης, αριθμηση βηματων). Ανεβηκε.
     ⚠ --bx-ink-4 ειναι ΜΟΝΟ για μη-κειμενο (το 6px τετραγωνο). Ποτε για λεξεις. */
  --bx-ink-2:     rgb(var(--bx-ink-rgb) / 0.64);
  --bx-ink-3:     rgb(var(--bx-ink-rgb) / 0.52);
  --bx-ink-4:     rgb(var(--bx-ink-rgb) / 0.38);

  --bx-rule:      rgb(var(--bx-ink-rgb) / 0.10);
  --bx-rule-soft: rgb(var(--bx-ink-rgb) / 0.06);
  --bx-rule-hard: rgb(var(--bx-ink-rgb) / 0.22);

  --bx-sig:       var(--accent-ember);
  --bx-sig-hi:    var(--ember-200);
  --bx-sig-line:  var(--ember-line);

  /* ρυθμος: τρια σκαλοπατια, οχι εννεα */
  --bx-gut: clamp(20px, 4vw, 56px);
  --bx-col: 1240px;

  /* mono που ΟΝΤΩΣ εχει ελληνικα -- το Geist Mono δεν εχει */
  --bx-mono: var(--font-mono-el);
}

/* --------------------------------------------------------------------------
   .lit -- ΙΣΟΠΕΔΩΣΗ, ΣΚΟΠΙΜΗ
   Το site.css βαφει το .lit με gradient clipped σε κειμενο + δυο drop-shadow
   λαμψεις. Η αναθεση της σελιδας απαγορευει ρητα "gradient πανω σε headings"
   και "φωτεινες κηλιδες". Το markup του ΟΜΗΡΟΥ ομως ζητα <span class="lit">,
   και ολο το site το χρησιμοποιει.
   Λυση: ιδιο markup, συμπαγες ember, μηδεν λαμψη. Μια δηλωση για επαναφορα.
   -------------------------------------------------------------------------- */
/* Και οι 5 επικεφαλιδες ειχαν φραση σε ember. Ενα σημα που επαναλαμβανεται
   πεντε φορες παυει να ειναι σημα. Μενει στις ΔΥΟ στιγμες που μετρανε -- την
   υποσχεση (hero) και το αιτημα (τελικο CTA). Στις ενδιαμεσες το ιδιο markup
   του ΟΜΗΡΟΥ αποδιδεται σε απλο μελανι: ιδιο κειμενο, χωρις ξοδεμα accent. */
.brain .bx-sec .lit {
  color: var(--bx-ink);
  -webkit-text-fill-color: var(--bx-ink);
}
.brain .bx-hero .lit,
.brain #next .lit {
  color: var(--bx-sig);
  -webkit-text-fill-color: var(--bx-sig);
}
.brain .lit {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--bx-sig);
  color: var(--bx-sig);
  filter: none;
}

/* --------------------------------------------------------------------------
   Σκελετος
   -------------------------------------------------------------------------- */
body.brain { background: var(--bx-bg); }

.brain .bx-wrap { max-width: var(--bx-col); margin: 0 auto; }

.brain .bx-sec {
  position: relative;
  padding: clamp(72px, 11vh, 132px) var(--bx-gut);
  border-top: 1px solid var(--bx-rule-soft);
}
.brain .bx-sec:first-of-type { border-top: 0; }

/* eyebrow -- ιδιο με .zone-label του site, μικροτερο κατω περιθωριο γιατι εδω
   η πληροφορια ειναι πυκνη, οχι αραιη */
.brain .bx-k {
  margin: 0 0 clamp(24px, 3vw, 40px);
  font: 400 11.5px/1 var(--bx-mono);
  letter-spacing: 0.10em;
  color: var(--bx-ink-3);
  text-transform: uppercase;
}
.brain .bx-k b { color: var(--bx-sig-hi); font-weight: 400; }

.brain .bx-h {
  margin: 0;
  font: 300 clamp(30px, 4.1vw, 54px)/1.12 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--bx-ink);
  max-width: 20ch;
  text-wrap: balance;
}
.brain .bx-p {
  margin: 22px 0 0;
  font: 300 16.5px/1.68 var(--font-sans);
  color: var(--bx-ink-2);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   1 · HERO
   Ασυμμετρο: ο τιτλος αριστερα, το σημα δεξια, ο δεικτης καταστασης απο κατω
   σαν υποσελιδο εντυπου. Οχι κεντραρισμενη στοιβα.
   -------------------------------------------------------------------------- */
.brain .bx-hero {
  padding-top: calc(env(safe-area-inset-top, 0px) + 148px);
  padding-bottom: clamp(56px, 9vh, 104px);
}
.brain .bx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
}
.brain .bx-hero h1 {
  margin: 0;
  font: 300 clamp(38px, 6vw, 82px)/1.06 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--bx-ink);
  max-width: 16ch;
  text-wrap: balance;
}
.brain .bx-hero-sub {
  margin: 26px 0 0;
  font: 300 clamp(16px, 1.5vw, 19px)/1.62 var(--font-sans);
  color: var(--bx-ink-2);
  max-width: 52ch;
}

/* Το σημα καθεται ΔΙΠΛΑ στο eyebrow, στο ιδιο υψος -- οχι σαν αιωρουμενο
   διακοσμητικο πανω δεξια. Μικρο σκοπιμα: ειναι υπογραφη, οχι εικονογραφηση. */
.brain .bx-hero-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(30px, 4vw, 46px);
}
.brain .bx-hero-top .bx-k { margin: 0; }
.brain .bx-mark { width: 44px; height: 44px; display: block; flex: none; }

/* --- το λεξιλογιο καταστασεων (δεξια στηλη hero) ------------------------- */
.brain .bx-legend {
  border-top: 1px solid var(--bx-rule);
  padding-top: 16px;
  min-width: 300px;
}
.brain .bx-legend-h {
  font: 400 10.5px/1.4 var(--bx-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bx-ink-3);
  margin-bottom: 4px;
}
.brain .bx-legend-l { list-style: none; margin: 0; padding: 0; counter-reset: lg; }
.brain .bx-legend-l li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bx-rule-soft);
  font: 400 12px/1.4 var(--bx-mono);
  letter-spacing: 0.05em;
}
.brain .bx-legend-l li:last-child { border-bottom: 0; }
.brain .bx-legend-l em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--bx-ink-3);
}

.brain .bx-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(32px, 4vw, 44px);
}

/* --------------------------------------------------------------------------
   Κουμπια -- 44px ελαχιστο υψος αφης (το .pill-cta του site ειναι 42px)
   -------------------------------------------------------------------------- */
.brain .bx-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--radius-control);   /* 2px -- η τιμη που δηλωνει το ιδιο το theme.css */
  font: 500 13px/1 var(--font-sans);
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--bx-ink);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.brain .bx-btn-solid {
  background: var(--bx-sig);
  color: var(--bx-bg);
  border-color: var(--bx-sig);
}
.brain .bx-btn-solid:hover { background: var(--accent-ember-hover); border-color: var(--accent-ember-hover); text-decoration: none; }
.brain .bx-btn-solid:active { background: var(--accent-ember-press); border-color: var(--accent-ember-press); }
.brain .bx-btn-line { border-color: var(--bx-sig); color: var(--bx-sig); }
.brain .bx-btn-line:hover { background: var(--ember-wash); border-color: var(--accent-ember-hover); color: var(--accent-ember-hover); text-decoration: none; }
.brain .bx-btn-ghost { border-color: var(--bx-rule-hard); color: var(--bx-ink); }
.brain .bx-btn-ghost:hover { border-color: var(--bx-sig); color: var(--bx-sig); text-decoration: none; }

.brain .bx-btn:focus-visible,
.brain .bx-tab:focus-visible,
.brain .bx-scn:focus-visible { outline: 2px solid var(--bx-sig); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   2 · ΒΗΜΑΤΑ (tabs)
   Ευρετηριο προδιαγραφων, οχι καρτες. Αριθμημενη στηλη αριστερα, περιεχομενο
   δεξια. Η ενεργη γραμμη σημαδευεται με ΓΡΑΜΜΗ, οχι με γεμισμα.
   -------------------------------------------------------------------------- */
.brain .bx-steps {
  display: grid;
  max-width: 940px;
  grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(32px, 4vw, 52px);
}

.brain .bx-tabs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--bx-rule);
}
.brain .bx-tab {
  display: grid;
  grid-template-columns: 2.6ch 1fr;
  gap: 14px;
  align-items: baseline;
  width: 100%;
  min-height: 56px;
  padding: 16px 4px 16px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--bx-rule);
  border-left: 0;
  text-align: left;
  cursor: pointer;
  color: var(--bx-ink-3);
  font: 400 15.5px/1.3 var(--font-sans);
  transition: color var(--dur-fast) var(--ease-out);
}
.brain .bx-tab .n {
  font: 400 11.5px/1.3 var(--bx-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--bx-ink-3);
  transition: color var(--dur-fast) var(--ease-out);
}
.brain .bx-tab:hover { color: var(--bx-ink-2); }
.brain .bx-tab[aria-selected="true"] { color: var(--bx-ink); border-bottom-color: var(--bx-sig-line); }
.brain .bx-tab[aria-selected="true"] .n { color: var(--bx-sig-hi); }

/* Σταθεροποιει το υψος ωστε η εναλλαγη καρτελας να μη τιναζει τη σελιδα.
   Ηταν 168px ενω το μακρυτερο περιεχομενο ειναι ~135px -> νεκρο κενο. */
.brain .bx-panel { min-height: 138px; }
.brain .bx-panel[hidden] { display: none; }
.brain .bx-panel h3 {
  margin: 0 0 16px;
  font: 300 clamp(22px, 2.4vw, 31px)/1.2 var(--font-display);
  letter-spacing: -0.018em;
  color: var(--bx-ink);
}
.brain .bx-panel p {
  margin: 0;
  font: 300 16px/1.7 var(--font-sans);
  color: var(--bx-ink-2);
  max-width: 56ch;
}
/* κωδικοποιημενη κατασταση μεσα σε τρεχον κειμενο */
.brain .bx-state {
  font: 400 0.86em/1 var(--bx-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--bx-sig-hi);
  border: 1px solid var(--bx-rule);
  border-radius: 2px;
  padding: 2px 6px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3 · ΠΡΟΣΟΜΟΙΩΤΗΣ -- το καθολικο
   Τρεις στηλες, σταθερες σε ολα τα σεναρια: ΩΡΑ | ΚΑΤΑΣΤΑΣΗ | ΕΝΕΡΓΕΙΑ.
   -------------------------------------------------------------------------- */
.brain .bx-simhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(22px, 3vw, 32px);
}

/* επιλογεας σεναριου -- ουρα καρτελων, οχι κουμπακια */
.brain .bx-scns {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: clamp(26px, 3.5vw, 40px) 0 0;
  border: 1px solid var(--bx-rule);
  border-radius: 3px;
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
}
.brain .bx-scn {
  min-height: 44px;
  padding: 0 18px;
  background: none;
  border: 0;
  border-right: 1px solid var(--bx-rule);
  border-bottom: 2px solid transparent;   /* κρατα τη θεση· γεμιζει οταν ενεργο */
  color: var(--bx-ink-3);
  font: 400 12.5px/1 var(--bx-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.brain .bx-scn:last-child { border-right: 0; }
.brain .bx-scn:hover { color: var(--bx-ink-2); }
/* Γραμμη, οχι γεμισμα -- ιδια λογικη με τις καρτελες βηματων. Δυο συμπαγη
   πορτοκαλι πλακακια στην ιδια οθονη εκαναν το accent θορυβο αντι για σημα. */
.brain .bx-scn[aria-selected="true"] {
  color: var(--bx-ink);
  background: none;
  border-bottom-color: var(--bx-sig);
}

/* το ιδιο το καθολικο */
.brain .bx-ledger {
  max-width: 940px;
  margin-top: clamp(22px, 3vw, 30px);
  border: 1px solid var(--bx-rule);
  border-radius: 3px;
  background: var(--bx-panel);
  overflow: hidden;
}
.brain .bx-ledger-bar {
  padding: 12px 16px 0;
  font: 400 11px/1.3 var(--bx-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bx-ink-3);
}
.brain .bx-ledger-title { display: block; color: var(--bx-ink-2); }

/* Οι ετικετες στηλων καθονται ΠΑΝΩ ΑΠΟ ΤΙΣ ΠΡΑΓΜΑΤΙΚΕΣ ΣΤΗΛΕΣ -- ιδιο grid με
   τη γραμμη. Ηταν μια δεξια-στοιχισμενη συμβολοσειρα που δεν κυβερνουσε τιποτα:
   πινακας αναχωρησεων του οποιου οι κεφαλιδες δεν δειχνουν τις στηλες. */
.brain .bx-cols {
  display: grid;
  grid-template-columns: 6.5ch 16.5ch minmax(0, 1fr);
  gap: 12px;
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bx-rule);
  /* ΤΟ ΙΔΙΟ font-size με τη γραμμη (13px). Το `ch` λυνεται ως προς το font-size:
     με 10px εδω και 13px στις γραμμες, οι "ιδιες" 6.5ch/16.5ch εβγαιναν 42px
     πιο αριστερα και η κεφαλιδα δεν κυβερνουσε τη στηλη της. Το οπτικο μεγεθος
     της ετικετας το δινει το παιδι, οχι ο γονεας. */
  font: 400 13px/1.3 var(--bx-mono);
  color: var(--bx-ink-3);
}
.brain .bx-cols span { font-size: 10px; letter-spacing: 0.12em; }
/* το τετραγωνο-λυχνια (6px) + το κενο του (7px) μετατοπιζουν το κειμενο της
   καταστασης· η κεφαλιδα ακολουθει ωστε να καθεται πανω απο τη ΛΕΞΗ, οχι
   πανω απο τη λυχνια. */
.brain .bx-cols span:nth-child(2) { padding-left: 13px; }

.brain .bx-rows { display: block; }

/* ΓΡΑΜΜΗ: τρεις σταθερες στηλες. ch μοναδες ωστε η στοιχιση να μη σπαει. */
.brain .bx-row {
  display: grid;
  /* 16.5ch = η μακρυτερη κατασταση (ΕΚΤΕΛΕΣΤΗΚΕ, 13 χαρ.) + το τετραγωνο + το κενο.
     Σταθερη, ωστε η στηλη ΕΝΕΡΓΕΙΑ να ξεκινα στο ιδιο x σε ολα τα σεναρια. */
  grid-template-columns: 6.5ch 16.5ch minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 11px 16px;
  border-top: 1px solid var(--bx-rule-soft);
  font: 400 13px/1.5 var(--bx-mono);
  font-variant-numeric: tabular-nums;
}
.brain .bx-row:first-child { border-top: 0; }

/* Οι γραμμες ειναι ΟΡΑΤΕΣ εξ ορισμου -- χωρις JS το καθολικο διαβαζεται πληρες.
   Μονο οταν ο προσομοιωτης αναλαβει (κλαση .staged απο το brain-sim.js) κρυβονται
   για να ξετυλιχτουν. Αν το JS δεν τρεξει, δεν χανεται τιποτα. */
.brain .bx-ledger.staged .bx-row {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.brain .bx-ledger.staged .bx-row.on { opacity: 1; transform: none; }

.brain .bx-t { color: var(--bx-ink-3); font-variant-numeric: tabular-nums; }
.brain .bx-s {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  letter-spacing: 0.06em;
  color: var(--bx-ink-2);
  white-space: nowrap;
}
/* λυχνια κατοιχηση -- τετραγωνο 6px, χωρις σκια */
.brain .bx-s::before {
  content: "";
  width: 6px; height: 6px;
  flex: none;
  transform: translateY(-1px);
  border: 1px solid var(--bx-ink-4);
  background: transparent;
}
.brain .bx-row[data-s="queued"] .bx-s { color: var(--bx-sig-hi); }
.brain .bx-row[data-s="queued"] .bx-s::before { border-color: var(--bx-sig); background: transparent; }
.brain .bx-row[data-s="done"] .bx-s { color: var(--bx-ink); }
.brain .bx-row[data-s="done"] .bx-s::before { border-color: var(--bx-sig); background: var(--bx-sig); }
.brain .bx-row[data-s="approve"] .bx-s { color: var(--bx-ink); }
.brain .bx-row[data-s="approve"] .bx-s::before { border-color: var(--bx-sig); background: var(--bx-sig); }

.brain .bx-a { color: var(--bx-ink-2); min-width: 0; overflow-wrap: anywhere; }
.brain .bx-a em { font-style: normal; color: var(--bx-ink-3); }

.brain .bx-ledger-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--bx-rule);
  font: 400 11px/1.3 var(--bx-mono);
  letter-spacing: 0.08em;
  color: var(--bx-ink-3);
  text-transform: uppercase;
}
.brain .bx-replay {
  min-height: 44px;
  padding: 0 14px;
  margin: -11px -6px -11px 0;
  background: none;
  border: 0;
  color: var(--bx-ink-3);
  font: 400 11px/1 var(--bx-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.brain .bx-replay:hover { color: var(--bx-sig); }
.brain .bx-replay:focus-visible { outline: 2px solid var(--bx-sig); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   4 · ΕΝΣΩΜΑΤΩΣΕΙΣ -- πινακας κατηγορια -> κατασταση
   -------------------------------------------------------------------------- */
.brain .bx-int {
  width: 100%;
  max-width: 940px;   /* ιδιο μετρο με .bx-steps και .bx-ledger */
  margin-top: clamp(28px, 4vw, 44px);
  border-collapse: collapse;
  text-align: left;
}
.brain .bx-int caption {
  caption-side: top;
  text-align: left;
  max-width: 68ch;              /* ητανε μια γραμμη ~150 χαρακτηρων */
  padding-bottom: 14px;
  font: 400 11px/1.4 var(--bx-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bx-ink-3);
}
.brain .bx-int th,
.brain .bx-int td {
  padding: 15px 12px 15px 0;
  border-bottom: 1px solid var(--bx-rule-soft);
  vertical-align: baseline;
}
.brain .bx-int thead th:last-child { text-align: right; padding-right: 0; }
.brain .bx-int thead th {
  border-bottom: 1px solid var(--bx-rule);
  font: 400 10.5px/1.4 var(--bx-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bx-ink-3);
  font-weight: 400;
}
.brain .bx-int tbody th {
  font: 400 15.5px/1.5 var(--font-sans);
  color: var(--bx-ink);
  font-weight: 400;
}
.brain .bx-int td {
  font: 400 12.5px/1.5 var(--bx-mono);
  letter-spacing: 0.04em;
  color: var(--bx-ink-3);
  white-space: nowrap;
  text-align: right;
  padding-right: 0;
}

/* ιδια λεξη-κατασταση με το καθολικο: ομοιομορφια που διαβαζεται ως δηλωση */
.brain .bx-chip {
  display: inline-block;
  font: 400 10.5px/1.4 var(--bx-mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bx-ink-3);
  border: 1px solid var(--bx-rule);
  border-radius: 2px;
  padding: 4px 8px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5 · ΕΠΟΜΕΝΟ ΒΗΜΑ
   -------------------------------------------------------------------------- */
.brain .bx-end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--bx-rule);   /* κλειδωνει στο ιδιο y με το .bx-end-note */
  padding-top: 16px;
}
.brain .bx-end-grid { margin-top: clamp(28px, 3.5vw, 40px); }
/* Το CTA επιανε μονο το αριστερο τριτο και εσβηνε. Δυο στηλες: το αιτημα
   αριστερα, τα καναλια δεξια με την ιδια τυπογραφια καθολικου. */
.brain .bx-end-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
}
.brain .bx-end-side { min-width: 300px; max-width: 380px; display: grid; gap: 26px; }
.brain .bx-end-note { border-top: 1px solid var(--bx-rule); padding-top: 16px; }
.brain .bx-end-note p {
  margin: 0;
  font: 300 14.5px/1.62 var(--font-sans);
  color: var(--bx-ink-2);
}
.brain .bx-end-meta {
  border-top: 1px solid var(--bx-rule);
  padding-top: 16px;
  min-width: 300px;
}
.brain .bx-end-meta .bx-legend-h { margin-bottom: 4px; }
.brain .bx-end-meta ul { list-style: none; margin: 0; padding: 0; }
.brain .bx-end-meta li {
  padding: 9px 0;
  border-bottom: 1px solid var(--bx-rule-soft);
  font: 400 13px/1.4 var(--bx-mono);
  letter-spacing: 0.03em;
}
.brain .bx-end-meta li:last-child { border-bottom: 0; }
.brain .bx-end-meta a { color: var(--bx-ink-2); }
.brain .bx-end-meta a:hover { color: var(--bx-sig); }
@media (max-width: 720px) {
  .brain .bx-end-grid { grid-template-columns: minmax(0, 1fr); }
  .brain .bx-end-side { min-width: 0; max-width: none; }
}
.brain .bx-end-meta a { color: var(--bx-ink-2); }
.brain .bx-end-meta a:hover { color: var(--bx-sig); }

/* --------------------------------------------------------------------------
   Το badge συνθετικων -- ΑΚΡΙΒΩΣ οι τιμες του site.css .wf-example.
   ADR-001(g): ειναι η ιδια η σημανση, οχι διακοσμηση. Δεν μικραινει, δεν ξεθωριαζει.
   Το site ηδη το ριχνει σε var(--font-sans) στα ελληνικα (το Geist Mono δεν
   εχει ελληνικα) -- το ιδιο εδω, ωστε να διαβαζεται ταυτοσημα.
   -------------------------------------------------------------------------- */
.brain .bx-synth {
  display: inline-block;
  font: 400 10.5px/1.35 var(--font-sans);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.92);
  background: var(--ember-wash);
  border: 1px solid var(--ember-line);
  border-radius: 3px;
  padding: 5px 9px;
  white-space: nowrap;
}
.brain .bx-hero .bx-synth { margin-bottom: 26px; }

/* --------------------------------------------------------------------------
   Αποκριση
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Καθετη στοιβα -- ιδια λογικη με desktop, απλα σε πληρες πλατος πανω απο το
     περιεχομενο. Ο πινακας αναχωρησεων δεν κυλαει οριζοντια. */
  .brain .bx-steps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .brain .bx-panel { min-height: 0; }
}

@media (max-width: 720px) {
  .brain .bx-hero { padding-top: calc(env(safe-area-inset-top, 0px) + 116px); }
  .brain .bx-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .brain .bx-mark { order: -1; width: 76px; }

  /* Το καθολικο σε στενη οθονη: η ΩΡΑ και η ΚΑΤΑΣΤΑΣΗ μενουν σε μια σειρα
     (κρατανε τη στοιχιση), η ΕΝΕΡΓΕΙΑ πεφτει απο κατω με εσοχη ισοπλατη με
     τη στηλη της ωρας -- ωστε να διαβαζεται ακομη σαν καθολικο, οχι σαν καρτα. */
  .brain .bx-row {
    grid-template-columns: 6.5ch minmax(0, 1fr);
    gap: 6px 12px;
    padding: 12px 14px;
    font-size: 12.5px;
  }
  .brain .bx-a { grid-column: 2 / -1; }

  /* Παραμενει ΠΙΝΑΚΑΣ και σε στενη οθονη: κατηγορια αριστερα, κατασταση δεξια.
     Η προηγουμενη εκδοχη εκρυβε τις κεφαλιδες και το εκανε λιστα. */
  .brain .bx-int, .brain .bx-int tbody, .brain .bx-int thead,
  .brain .bx-int tr, .brain .bx-int th, .brain .bx-int td { display: revert; }
  .brain .bx-int th, .brain .bx-int td { padding: 12px 0; }
  .brain .bx-int tbody th { font-size: 14px; padding-right: 12px; }
  .brain .bx-int td { white-space: normal; }
  .brain .bx-chip { font-size: 9.5px; letter-spacing: 0.08em; padding: 4px 6px; }
}

/* --------------------------------------------------------------------------
   Μειωμενη κινηση -- καθηλωνει την ΤΕΛΙΚΗ κατασταση, οχι μιση.
   Το ιδιο μοτιβο που ηδη χρησιμοποιει το site.css σε 12 σημεια.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .brain .bx-ledger.staged .bx-row,
  .brain .bx-row {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .brain .bx-btn,
  .brain .bx-tab,
  .brain .bx-scn,
  .brain .bx-replay { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Διορθωση αντιθεσης υποσελιδου (scoped στη σελιδα)
   Το site.css δινει .foot-h rgba(255,255,255,0.35) ~3.0:1 και .foot-bottom
   0.30 ~2.5:1 -- και τα δυο κατω απο 4.5:1, σε ΚΑΘΕ σελιδα του site.
   Εδω ανεβαινουν. Δεν το επιβαλλω καθολικα χωρις εγκριση: αλλαζει καθε σελιδα.
   -------------------------------------------------------------------------- */
.brain .site-footer .foot-h { color: rgb(var(--bx-ink-rgb) / 0.62); }
.brain .site-footer .foot-bottom { color: rgb(var(--bx-ink-rgb) / 0.58); }
.brain .site-footer .foot-col a { color: rgb(var(--bx-ink-rgb) / 0.72); }

/* --------------------------------------------------------------------------
   Αποκριση των νεων στοιχειων
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .brain .bx-legend { min-width: 0; }
}
@media (max-width: 720px) {
  /* Το λεζαντακι "ωρα · κατασταση · ενεργεια" περιγραφει τρεις στηλες που σε
     στενη οθονη δεν υπαρχουν. Φευγει αντι να τυλιγεται σε δυο σειρες. */
  .brain .bx-cols { display: none; }
  .brain .bx-legend { margin-top: 8px; }
}

/* Το .fi-botbar .bb-cta του site ειναι συμπαγες πορτοκαλι και μενει ΜΟΝΙΜΑ στην
   οθονη σε <=720px -- δευτερο γεμισμα accent ακριβως εκει που το accent πρεπει
   να ειναι σπανιο. Γινεται περιγραμμα· η σελιδα κραταει ΕΝΑ γεμισμα συνολικα. */
.brain .fi-botbar .bb-cta {
  background: none;
  color: var(--bx-sig);
  border: 1px solid var(--bx-sig);
  border-radius: var(--radius-control);
}
.brain .fi-botbar .bb-item { border-radius: var(--radius-control); }