/* ════════════════════════════════════════════════════════════════════════
   ΕΚΔΟΧΗ «OUTPLAN» (εκτός σχεδίου) — v1 · claude design 2026-07-28
   ────────────────────────────────────────────────────────────────────────
   255 δημοσιευμένες σελίδες. Ροή: hero → 01 ο κανόνας → 02 αρτιότητα &
   παρεκκλίσεις → 03 κατοικία (~186 κλιμακωτά) → σημαίες → 04 βεβαιότητα.

   ΑΝΤΙΣΤΟΙΧΙΣΗ TOKENS. Ο καμβάς του σχεδίου είναι δεμένος στο design system
   και χρησιμοποιεί τα ονόματά του (--ink/--panel/--line/--font-serif). Οι
   σελίδες όρων δόμησης έχουν το δικό τους σύνολο (--text-1/--surface/--border/
   --serif) — ίδια οπτική γλώσσα, άλλα ονόματα. Το markup μεταγράφεται
   ΑΥΤΟΥΣΙΟ και τα ονόματα του σχεδίου ορίζονται εδώ πάνω στα tokens του repo,
   ΜΟΝΟ μέσα στο .opl-root. Έτσι: (α) καμία επινόηση χρώματος, (β) η σελίδα
   μένει ίδια με τις 6.400 αδελφές της, (γ) το html[data-theme] δουλεύει
   αυτόματα και στα δύο θέματα. Είναι ο ίδιος τρόπος που ακολούθησε ο
   σχεδιαστής στο handoff του pre1923 (έγραψε κατευθείαν σε repo tokens).

   Όπου το repo ΔΕΝ έχει αντίστοιχο token (--accent-line, --amber-line…), η
   τιμή παράγεται με color-mix από το ΥΠΑΡΧΟΝ χρώμα, με το alpha που ορίζει το
   design system — δηλαδή ο ορισμός του DS εκφρασμένος στην παλέτα του repo.
   ════════════════════════════════════════════════════════════════════════ */

.opl-root{
  /* γραμματοσειρές */
  --font-serif:var(--serif);
  --font-body:var(--sans);
  --font-mono:var(--mono);
  /* επιφάνειες */
  --panel:var(--surface);
  --panel-2:var(--surface-2);
  --panel-3:var(--surface-3);
  --inset:var(--surface-2);
  /* μελάνι — το repo έχει 3 βαθμίδες, το DS 4· η 4η πέφτει στην 3η */
  --ink:var(--text-1);
  --ink-2:var(--text-2);
  --ink-3:var(--text-3);
  --ink-4:var(--text-3);
  /* γραμμές */
  --line:var(--border);
  --line-2:color-mix(in oklch,var(--border) 60%,transparent);
  --line-strong:var(--border-strong);
  /* σημασιολογικά — wash = υπάρχον soft· line = το alpha του DS στο repo χρώμα */
  --accent-wash:var(--accent-soft);
  --accent-line:color-mix(in oklch,var(--accent) 28%,transparent);
  --amber-wash:var(--amber-soft);
  --amber-line:color-mix(in oklch,var(--amber) 28%,transparent);
  --green-wash:var(--green-soft);
  --green-line:color-mix(in oklch,var(--green) 26%,transparent);
  --coral-wash:var(--coral-soft);
  --coral-line:color-mix(in oklch,var(--coral) 26%,transparent);
  /* γεωμετρία & elevation */
  /* --r-md/--r-lg ΔΕΝ ξαναορίζονται: υπάρχουν στο :root του oroi-v3.css και
     `--r-lg:var(--r-lg)` θα ήταν κυκλική αναφορά → κενή τιμή → γωνίες 0. */
  --r-xs:5px; --r-sm:var(--r);
  --shadow-lg:var(--shadow-md);
  --hi:0 0 transparent;
  --ease:cubic-bezier(.2,.6,.25,1);
}

/* ═══ Α · Το ίδιο το CSS του σχεδίου (αυτούσιο) ═══ */
@keyframes opl-livepulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
.opl-root .livepulse{animation:opl-livepulse 2.4s cubic-bezier(.4,0,.2,1) infinite}
@media(prefers-reduced-motion:reduce){.opl-root .livepulse{animation:none}}
/* Ο καμβάς έγραφε `.opl-root a`. Σε production το .opl-root τυλίγει και την
   ενότητα σημαιών (υπάρχων intelHtml, μπαίνει ανάμεσα στο 03 και το 04 κατά
   τη ροή του σχεδίου), οπότε ο κανόνας περιορίζεται στα δικά του δοχεία —
   ώστε να μη βάψει σύνδεσμο που δεν σχεδίασε. */
.opl-root .opl-hero a,.opl-root .opl-sec a{color:var(--accent-ink);text-decoration:none}
.opl-root .opl-hero a:hover,.opl-root .opl-sec a:hover{color:var(--accent)}

/* Ο καμβάς χρησιμοποιούσε @container (max-width:560px) επειδή τα frames ήταν
   ένθετα. Σε production το ίδιο κατώφλι εκφράζεται ως media query. */
@media (max-width:560px){
  .opl-hero{padding:18px 16px 6px !important}
  .opl-h1{font-size:28px !important}
  .opl-heroval{font-size:15px !important}
  .opl-sec{padding:40px 16px !important}
  .opl-sectitle{font-size:23px !important}
  .opl-two{grid-template-columns:1fr !important;gap:20px !important;padding:18px 14px 16px !important}
  .opl-two03{grid-template-columns:1fr !important;gap:22px !important}
  .opl-cards2{grid-template-columns:1fr !important}
  .opl-gaterow{grid-template-columns:1fr !important;gap:4px !important}
}
/* Ενδιάμεσο εύρος: οι δίστηλες διατάξεις στενεύουν πριν σπάσουν. */
@media (max-width:860px){
  .opl-two{grid-template-columns:1fr !important;gap:22px !important}
  .opl-two03{grid-template-columns:1fr !important}
  .opl-cards2{grid-template-columns:1fr !important}
}

/* ═══ Β · Components του design system (ps-*) — αυτούσια από το _ds bundle,
       scoped στο .opl-root ώστε να μην επηρεάσουν τις άλλες εκδοχές ═══ */
.opl-root .ps-eyebrow{display:inline-block;font-family:var(--font-mono);font-weight:500;text-transform:uppercase;color:var(--ink-4);line-height:1.3}
.opl-root .ps-eyebrow--sm{font-size:10px;letter-spacing:.16em}
.opl-root .ps-eyebrow--md{font-size:10.5px;letter-spacing:.15em;color:var(--ink-3)}
.opl-root .ps-eyebrow--accent{color:var(--accent-ink)}

.opl-root .ps-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;font-family:var(--font-body);font-size:12px;font-weight:450;color:var(--ink-2);background:var(--panel);border:1px solid var(--line);white-space:nowrap}
.opl-root .ps-chip .ps-chip-dot{width:6px;height:6px;border-radius:50%;background:var(--ink-4);flex:0 0 auto}
.opl-root .ps-chip--amber{color:var(--amber);background:var(--amber-wash);border-color:var(--amber-line)}
.opl-root .ps-chip--amber .ps-chip-dot{background:var(--amber)}
.opl-root .ps-chip--accent{color:var(--accent-ink);background:var(--accent-wash);border-color:var(--accent-line)}
.opl-root .ps-chip--accent .ps-chip-dot{background:var(--accent)}

.opl-root .ps-cite{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--r-xs);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.01em;color:var(--accent-ink);background:var(--accent-wash);border:1px solid var(--accent-line);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s var(--ease),transform .15s var(--ease)}
.opl-root .ps-cite:hover{background:color-mix(in oklch,var(--accent) 18%,transparent);transform:translateY(-1px)}
.opl-root .ps-cite svg{width:12px;height:12px;opacity:.85;flex:0 0 auto}
.opl-root .ps-cite--static{cursor:default}
.opl-root .ps-cite--static:hover{transform:none;background:var(--accent-wash)}

.opl-root .ps-cert{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:99px;font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;border:1px solid var(--line-2);background:var(--panel-3);color:var(--ink-3)}
.opl-root .ps-cert .ps-cert-dot{width:6px;height:6px;border-radius:50%;background:var(--ink-4);flex:0 0 auto}
.opl-root .ps-cert--high{color:var(--green);background:var(--green-wash);border-color:var(--green-line)}
.opl-root .ps-cert--high .ps-cert-dot{background:var(--green)}
.opl-root .ps-cert--mid{color:var(--amber);background:var(--amber-wash);border-color:var(--amber-line)}
.opl-root .ps-cert--mid .ps-cert-dot{background:var(--amber)}
.opl-root .ps-cert--low{color:var(--coral);background:var(--coral-wash);border-color:var(--coral-line)}
.opl-root .ps-cert--low .ps-cert-dot{background:var(--coral)}