/* ============================================================
   Αρχείο 78 στροφών — newforum3
   One explicit light palette. No prefers-color-scheme: the previous
   version relied on it, and <dialog>'s UA stylesheet sets `color:
   CanvasText` regardless, which produced black text on a black panel.
   Every colour below is stated outright.
   ============================================================ */
:root{
  --paper:#f7f4ee;        /* page */
  --card:#ffffff;
  --card-2:#f1ece3;
  --line:#e0d8ca;
  --ink:#231d18;          /* primary text — always dark */
  --ink-2:#6b6055;        /* secondary text */
  --accent:#8c2f1e;       /* oxblood, like a shellac label */
  --accent-2:#b8860b;     /* brass */
  --ok:#2f6b3a;
  --shadow:0 1px 2px rgba(35,29,24,.06),0 6px 20px rgba(35,29,24,.07);
  /* η ρίγα των λιστών του φόρουμ — ΚΑΘΑΡΑ διακριτή και από το λευκό της
     κάρτας και από το κρεμ φόντο της σελίδας */
  --stripe:color-mix(in srgb, var(--accent) 15%, #fff);
  --stripe-hover:color-mix(in srgb, var(--accent) 24%, #fff);
  --r:12px;
}
*{box-sizing:border-box}
/* Any class that sets `display` beats the UA stylesheet's [hidden]{display:none},
   so the attribute silently stops working.  State it explicitly and win. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  padding-bottom:96px;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:min(1140px,100%);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- masthead ---------- */
.masthead{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.masthead .wrap{display:flex;align-items:center;gap:14px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;gap:11px;font-size:1.06rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.logo:hover{text-decoration:none}
.disc{width:30px;height:30px;flex:0 0 auto;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,#2c2622 0 1px,#3a332d 1px 2px);
  position:relative;box-shadow:inset 0 0 0 1px #1b1714}
.disc::after{content:"";position:absolute;inset:38%;border-radius:50%;background:var(--accent)}
.counts{margin-left:auto;font-size:.8rem;color:var(--ink-2);text-align:right;line-height:1.35}
@media(max-width:620px){.counts{display:none}}

/* ---------- finder ---------- */
.finder{background:var(--card-2);border-bottom:1px solid var(--line);padding:16px 0}
.fields{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:600px){.fields{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.fields{grid-template-columns:repeat(4,1fr)}}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field>span{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}
.field select,.field input{
  width:100%;padding:11px 12px;font-size:.94rem;font-family:inherit;
  color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:10px;outline:none;
  appearance:none;text-overflow:ellipsis}
.field select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6055' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.field select:focus,.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(140,47,30,.12)}
.field select.on{border-color:var(--accent);font-weight:600}
.fields.adv{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.finderbar{display:flex;gap:9px;margin-top:13px;flex-wrap:wrap;align-items:center}
.sortbox{display:inline-flex;align-items:center;gap:9px;background:var(--card-2);
  border:1px solid var(--line);border-radius:999px;padding:5px 6px 5px 15px}
.sortbox>span{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-2);white-space:nowrap}
.sortbox select{font:inherit;font-size:.86rem;color:var(--ink);background-color:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:7px 34px 7px 14px;cursor:pointer;
  appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238c2f1e' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
.sortbox select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(140,47,30,.12)}
.sortbox select.on{border-color:var(--accent);font-weight:600;color:var(--accent)}
.chip{font:inherit;font-size:.84rem;padding:8px 14px;border-radius:999px;cursor:pointer;
  background:var(--card);border:1px solid var(--line);color:var(--ink-2)}
.chip:hover{border-color:var(--ink-2)}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.chip.clear{color:var(--accent);border-color:rgba(140,47,30,.45)}

/* ---------- artist header ---------- */
.ahead{display:flex;gap:18px;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:18px;margin:20px 0 4px}
.aphoto{width:104px;height:104px;flex:0 0 auto;object-fit:cover;border-radius:50%;
  border:3px solid var(--card-2);box-shadow:0 2px 10px rgba(35,29,24,.16)}
@media(max-width:520px){.ahead{flex-direction:column;align-items:center;text-align:center}}
.atext{flex:1;min-width:0}
.atext h1{margin:0 0 5px;font-size:1.4rem;letter-spacing:-.01em;color:var(--ink)}
.aroles{font-size:.85rem;color:var(--ink-2);margin-bottom:9px}
.asum{margin:0 0 11px;font-size:.92rem;line-height:1.55;color:var(--ink)}
.alinks{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.alinks .btn{font-size:.85rem;padding:8px 14px;min-height:0;text-decoration:none}
.aalias{font-size:.78rem;color:var(--ink-2)}

/* ---------- results: a playable list ---------- */
.meta{color:var(--ink-2);font-size:.86rem}
.resultbar{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin:20px 0 12px}
.list{display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.row{display:flex;align-items:center;gap:12px;padding:9px 14px;cursor:pointer;
  border-bottom:1px solid var(--line);background:var(--card)}
.row:last-child{border-bottom:none}
.row:hover{background:var(--card-2)}
.row.playing{background:#fdf3dd;box-shadow:inset 3px 0 0 var(--accent)}
.num{width:26px;flex:0 0 auto;text-align:right;font-size:.8rem;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.play{flex:0 0 auto;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:.8rem;
  border:1px solid var(--line);background:var(--card-2);color:var(--accent);
  display:grid;place-items:center;font-family:inherit}
.play:hover:not(:disabled){background:var(--accent);color:#fff;border-color:var(--accent)}
.play:disabled{opacity:.32;cursor:default;color:var(--ink-2)}
.rthumb{width:44px;height:44px;flex:0 0 auto;border-radius:6px;object-fit:cover;
  background:var(--card-2);border:1px solid var(--line);display:block}
.rthumb.ph{display:grid;place-items:center;color:#c3b8a7;font-size:1.05rem}
.rthumb.ph .phtext{display:none}          /* no room for a caption on a list row */
/* The large placeholder on the song page: centred, captioned, and obviously
   deliberate rather than a picture that failed to load. */
.dart.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;background:var(--card-2);border:1px dashed var(--line);
  color:var(--ink-2);text-align:center;padding:16px}
.dart.ph .phicon{font-size:2.6rem;line-height:1;opacity:.55}
.dart.ph .phtext{font-size:.78rem;max-width:22ch}
/* performer portrait standing in for a missing label scan */
.dart.phart{width:100%;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;
  position:relative;background:var(--card-2);border:1px solid var(--line)}
.dart.phart img{width:100%;height:100%;object-fit:cover;display:block}
.dart.phart span{position:absolute;left:0;right:0;bottom:0;padding:6px 8px;
  font-size:.7rem;line-height:1.25;color:#fff;background:rgba(19,15,12,.72)}
.rbody{flex:1;min-width:0}
.rtitle{font-size:.96rem;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsub{font-size:.81rem;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rmeta{flex:0 0 auto;display:none}
@media(min-width:620px){.rmeta{display:block}}
.pill{display:inline-block;font-size:.71rem;padding:2px 8px;border-radius:999px;
  background:var(--card-2);color:var(--ink-2);border:1px solid var(--line)}
.pill.audio{background:rgba(47,107,58,.10);color:var(--ok);border-color:rgba(47,107,58,.3)}

/* ---------- detail (a view, not a modal) ---------- */
.detail{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:22px;margin:20px 0}
.back{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.88rem;
  color:var(--ink-2);justify-self:start;align-self:start;margin-bottom:14px;
  background:none;border:none;padding:0;cursor:pointer;color:var(--accent);font-family:inherit}
.dtop{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:720px){.dtop{grid-template-columns:260px 1fr}}
.dart{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);
  border:1px solid var(--line);background:var(--card-2);display:block}
.dgal{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.dgal img{width:56px;height:56px;object-fit:cover;border-radius:7px;border:1px solid var(--line);cursor:pointer}
.dgal img.unsure{border-style:dashed;opacity:.85}
.detail h1{margin:0 0 4px;font-size:1.5rem;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.byline{color:var(--ink-2);font-size:.95rem;margin:0 0 16px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;font-size:.9rem;margin:0 0 16px}
.facts dt{color:var(--ink-2)}
.facts dd{margin:0;color:var(--ink)}
.acts{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.btn{font:inherit;font-size:.9rem;font-weight:600;padding:11px 17px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--card-2);color:var(--ink);min-height:44px;
  display:inline-flex;align-items:center;gap:7px}
.btn:hover{border-color:var(--ink-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#742718}
.btn:disabled{opacity:.55;cursor:default}
.lyrics{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:.95rem;color:var(--ink)}
.lyrics h2{font-size:1rem;margin:0 0 8px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.lyrics p{margin:.55em 0}
.lyrics a{color:var(--accent)}

/* ---------- floating player, pinned bottom-left ---------- */
.player{position:fixed;left:18px;bottom:18px;z-index:60;width:min(300px,calc(100vw - 36px));
  background:var(--card);border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:14px;box-shadow:0 12px 38px rgba(35,29,24,.28);padding:12px}
.pcovers{position:relative;line-height:0}
.pcovers>img#p-cover{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;
  background:var(--card-2);border:1px solid var(--line)}
.pcovers>img#p-artist{position:absolute;right:8px;bottom:8px;width:62px;height:62px;
  object-fit:cover;border-radius:50%;border:3px solid var(--card);display:none;
  box-shadow:0 2px 10px rgba(35,29,24,.35)}
#p-min{position:absolute;top:7px;right:40px;width:27px;height:27px;border-radius:50%;
  border:none;background:rgba(35,29,24,.6);color:#fff;cursor:pointer;font-size:1.05rem;
  line-height:1;font-family:inherit;padding:0}
#p-min:hover{background:var(--accent)}
#p-close{position:absolute;top:7px;right:7px;width:27px;height:27px;border-radius:50%;
  border:none;background:rgba(35,29,24,.6);color:#fff;cursor:pointer;font-size:.85rem;
  line-height:1;font-family:inherit}
#p-close:hover{background:var(--accent)}
.pinfo{margin-top:10px}
.pfrom{display:block;font-size:.7rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--accent);margin-bottom:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.partist{display:block;font-size:.8rem;color:var(--accent);margin-top:3px;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.partist:hover{text-decoration:underline}
#p-title.linked{cursor:pointer}
#p-title.linked:hover{color:var(--accent);text-decoration:underline}
.pinfo b{display:block;font-size:.92rem;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pinfo span{font-size:.78rem;color:var(--ink-2);display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player audio{width:100%;height:34px;margin-top:9px}
.pnav{display:flex;align-items:center;gap:8px;margin-top:7px}
.pnav button{flex:1;min-height:34px;border-radius:8px;cursor:pointer;font-family:inherit;
  border:1px solid var(--line);background:var(--card-2);color:var(--ink)}
.pnav button:hover{border-color:var(--accent);color:var(--accent)}
.plyr-btn{width:100%;margin-top:7px;padding:6px;font-size:.76rem;font-family:inherit;
  background:none;border:none;border-top:1px solid var(--line);color:var(--ink-2);cursor:pointer;
  letter-spacing:.04em}
.plyr-btn:hover{color:var(--accent)}
.plyr-panel{margin-top:6px;max-height:190px;overflow-y:auto;font-size:.82rem;line-height:1.5;
  color:var(--ink);background:var(--card-2);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.plyr-panel p{margin:.45em 0}
.plyr-none{color:var(--ink-2);font-style:italic;margin:0}
.pnav span{font-size:.75rem;color:var(--ink-2);min-width:56px;text-align:center;
  font-variant-numeric:tabular-nums}
.pnav span.live{color:var(--accent);font-weight:600;min-width:0;flex:1;text-align:left}
.hidden{display:none!important}

/* ---------- misc ---------- */
.empty{text-align:center;color:var(--ink-2);padding:46px 16px;grid-column:1/-1}
.spin{width:24px;height:24px;border:2px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:sp .7s linear infinite;margin:30px auto}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:110px;z-index:60;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-size:.88rem;
  box-shadow:0 8px 26px rgba(0,0,0,.25);max-width:92vw;text-align:center}
.toast.err{background:var(--accent)}
.toast.ok{background:var(--ok)}

/* ---------- audio lab ---------- */
.lab{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.lab h2{font-size:1rem;margin:0 0 10px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.lab-card{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r);padding:15px;margin-bottom:12px}
.lab-k{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}
.lab-v{font-size:1.25rem;font-weight:700;margin:3px 0 5px;color:var(--ink)}
.lab-note{font-size:.8rem;color:var(--ink-2);line-height:1.5;margin-top:7px}
.lab-row{margin:13px 0}
.lab-head{display:flex;justify-content:space-between;font-size:.86rem;margin-bottom:5px;color:var(--ink)}
.lab-row input[type=range]{width:100%;accent-color:var(--accent)}
.lab-actions{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.lab-spec{width:100%;height:88px;background:var(--card);border:1px solid var(--line);border-radius:10px;display:block}
.lab-status{color:var(--ink-2);font-size:.88rem;padding:12px 0}

/* ---------- always-on radio widget ---------- */
.radiobox{position:fixed;right:18px;bottom:18px;z-index:70;
  width:min(300px,calc(100vw - 36px));
  background:var(--card);border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:14px;box-shadow:0 12px 38px rgba(35,29,24,.28);padding:11px 12px}
@media(max-width:900px){.radiobox{left:12px;right:12px;bottom:12px;width:auto;border-radius:12px}}
.rb-head{display:flex;align-items:center;gap:7px;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-2);margin-bottom:8px}
.rb-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto;
  animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.rb-label{font-weight:700;color:var(--accent)}
.rb-listeners{margin-left:auto;text-transform:none;letter-spacing:0}
.rb-hide{background:none;border:none;cursor:pointer;color:var(--ink-2);font-size:.85rem;
  padding:0 0 0 4px;line-height:1;font-family:inherit}
.rb-hide:hover{color:var(--accent)}
.rb-now{display:flex;gap:9px;align-items:center;width:100%;text-align:left;cursor:pointer;
  background:none;border:none;padding:0;font-family:inherit;color:var(--ink)}
.rb-now img{cursor:pointer;width:42px;height:42px;flex:0 0 auto;border-radius:6px;object-fit:cover;
  border:1px solid var(--line);background:var(--card-2)}
.rb-now span{min-width:0;flex:1}
.rb-now #rb-title{display:block;font-size:.85rem;font-weight:700;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-now #rb-title:hover{color:var(--accent);text-decoration:underline}
.rb-now #rb-sub{display:block;font-style:normal;font-size:.72rem;color:var(--ink-2);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-now #rb-sub:hover{color:var(--accent);text-decoration:underline}

.rb-play{width:100%;margin-top:9px;min-height:36px;font-size:.84rem;padding:8px}

/* ---------- minimised player ---------- */
.player.mini{padding:0;width:min(260px,calc(100vw - 36px));border-top-width:3px}
.player.mini .pcovers,.player.mini .pinfo,.player.mini .pnav,
.player.mini audio,.player.mini .plyr-btn,.player.mini .plyr-panel{display:none}
.pmini-bar{display:flex;align-items:center;gap:8px;width:100%;padding:11px 13px;
  background:none;border:none;cursor:pointer;font-family:inherit;font-size:.85rem;
  color:var(--ink);text-align:left}
.pmini-bar>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-weight:600}
.pmini-up{color:var(--accent);font-size:.75rem;flex:0 0 auto}
.pmini-bar:hover{background:var(--card-2)}

/* ---------- landing ---------- */
.landing{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:34px 24px;margin:22px 0;text-align:center;box-shadow:var(--shadow)}
.landing h2{margin:0 0 8px;font-size:1.35rem;color:var(--ink)}
.landing p{margin:0 auto 18px;max-width:46ch;color:var(--ink-2);font-size:.92rem}
.lstats{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-bottom:20px}
.lstat{min-width:88px}
.lstat b{display:block;font-size:1.45rem;color:var(--accent);line-height:1.15}
.lstat span{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-2)}
.lquick{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.lquick button{font:inherit;font-size:.82rem;padding:7px 14px;border-radius:999px;
  cursor:pointer;background:var(--card-2);border:1px solid var(--line);color:var(--ink)}
.lquick button:hover{border-color:var(--accent);color:var(--accent)}

/* ΣΗΜΕΙΩΣΕΙΣ in the player: clipped server-side, and capped to three lines
   here as well so an unusually long note cannot stretch the box. */
/* Two-line preview in the player.  -webkit-line-clamp is honoured by every
   current browser; the max-height is the fallback that bounds the box if it
   is not, so the player can never be stretched by a long note. */
.pnotes{margin-top:6px;padding-top:6px;
  border-top:1px dashed var(--line);font-size:.75rem;color:var(--ink-2);
  line-height:1.4;max-height:2.8em;overflow:hidden;cursor:pointer;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pnotes:hover{color:var(--ink)}
.lyrics.notes p{white-space:pre-wrap}
.player.mini .pnotes{display:none}

/* ---------- licence notice ---------- */
.licence{max-width:820px;margin:26px auto 0;padding-top:18px;
  border-top:1px solid var(--line);text-align:left;
  font-size:.78rem;line-height:1.5;color:var(--ink-2)}
.licence p{margin:0 0 8px;max-width:none;font-size:.78rem}
.licence ol{margin:0 0 8px;padding-left:20px}
.licence li{margin-bottom:5px}
.licence a{color:var(--accent)}
.licence .cc{display:inline-block;margin-bottom:8px;font-weight:700;
  color:var(--ink);font-size:.8rem}

/* composer sits under the performer, quieter than it */
.pcomposer{color:var(--ink-2);font-size:.76rem;margin-top:1px}
.pcomposer:hover{color:var(--accent)}

/* ---------- cover lightbox ---------- */
/* Colours are stated outright: this sits over the page on its own backdrop,
   so it must not inherit anything that could render text on a like colour. */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(18,14,11,.88);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:14px;padding:24px;cursor:zoom-out}
.lightbox img{max-width:min(1400px,95vw);max-height:82vh;width:auto;height:auto;
  object-fit:contain;border-radius:6px;background:#fff;
  box-shadow:0 18px 60px rgba(0,0,0,.5);cursor:default}
.lbbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.lbbtn{font:inherit;font-size:.84rem;padding:8px 16px;border-radius:999px;
  cursor:pointer;text-decoration:none;
  background:#ffffff;border:1px solid #d8cfc0;color:#231d18}
.lbbtn:hover{background:var(--accent);border-color:var(--accent);color:#ffffff}

/* which version of the audio you are hearing right now */
.lab-state{margin-top:8px;font-size:.82rem;font-weight:600;color:var(--accent)}
.lab-card button[aria-pressed="true"]{background:var(--accent-2);border-color:var(--accent-2)}

/* live radio: play/pause and volume in place of a timeline that cannot mean
   anything for a stream */
.plive{display:flex;align-items:center;gap:10px;margin-top:9px}
.plive button{font:inherit;font-size:.9rem;line-height:1;padding:7px 13px;
  border-radius:999px;cursor:pointer;background:var(--accent);border:1px solid var(--accent);
  color:#fff;min-width:44px}
.plive button:hover{filter:brightness(1.08)}
.plive input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}
/* the domain, quieter than the archive's name */
.logo .domain{display:block;font-size:.7rem;font-weight:400;opacity:.75;
  letter-spacing:.02em;margin-top:1px}

/* why a label for a different song is on this page */
.covernote{margin-top:9px;padding:9px 11px;border-radius:9px;
  background:var(--card-2);border:1px dashed var(--line);
  font-size:.76rem;line-height:1.4;color:var(--ink-2)}
/* the main image can be a disc-level match too, not just the thumbnails */
.dart.unsure{border:2px dashed var(--line);opacity:.92}

/* link to the wiki article, with a word on what is in it */
.wikibox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.wikibox .btn{text-decoration:none;display:inline-block}
.wikiwhat{font-size:.78rem;color:var(--ink-2);min-width:0}

/* credits are navigation, so they have to look like it */
.byline a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.byline a:hover{border-bottom-color:currentColor}
.facts dd a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.facts dd a:hover{border-bottom-color:currentColor}

/* licence: a disclosure, not a modal - no JS, keyboard-friendly, prints */
.lic-more{margin-top:10px}
.lic-more>summary{cursor:pointer;list-style:none;display:inline-flex;
  align-items:center;gap:10px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--card-2);
  font-size:.78rem;color:var(--ink-2);user-select:none}
.lic-more>summary::-webkit-details-marker{display:none}
.lic-more>summary:hover{border-color:var(--accent);color:var(--ink)}
.lic-more>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cc-badge{font-weight:700;letter-spacing:.04em;color:var(--accent);
  font-size:.72rem;white-space:nowrap}
.cc-text::after{content:" \25BE"}
.lic-more[open]>summary .cc-text::after{content:" \25B4"}
.lic-body{margin-top:12px;padding-left:2px}
.lic-body p{margin:0 0 8px;font-size:.78rem;line-height:1.5}
.lic-body ol{margin:0 0 8px;padding-left:20px}
.lic-body li{margin-bottom:5px;font-size:.78rem;line-height:1.5}

/* επεξήγηση του καθαρισμού: περίληψη για όλους, λεπτομέρειες όποιος θέλει */
.lab-explain{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.lab-explain p{margin:0 0 8px;font-size:.82rem;color:var(--ink-2);line-height:1.5}
.lab-more>summary{cursor:pointer;list-style:none;display:inline-block;
  padding:5px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--card-2);font-size:.76rem;color:var(--ink-2)}
.lab-more>summary::-webkit-details-marker{display:none}
.lab-more>summary::after{content:" \25BE"}
.lab-more[open]>summary::after{content:" \25B4"}
.lab-more>summary:hover{border-color:var(--accent);color:var(--ink)}
.lab-more-body{margin-top:10px}
.lab-more-body dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
  font-weight:700;color:var(--accent);margin-top:10px}
.lab-more-body dd{margin:3px 0 0;font-size:.8rem;line-height:1.5;color:var(--ink-2)}

/* η άλλη πλευρά του δίσκου */
.samedisc{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line)}
.samedisc h2{margin:0 0 4px;font-size:1.05rem}
.sdnote{margin:0 0 10px;font-size:.8rem;color:var(--ink-2)}
.samedisc .row{cursor:pointer}

/* ένα χειριστήριο για όλο το εργαστήριο, πάντα ορατό στην κορυφή */
.lab-transport{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:12px 16px;margin-bottom:14px;box-shadow:var(--shadow)}
.lab-now{font-size:.84rem;color:var(--ink-2);min-width:0}

/* τι ακριβώς αφαίρεσε ο καθαρισμός */
.lab-stats{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.lab-statline{font-size:.85rem;margin-bottom:7px;line-height:1.55}
.lab-table{width:100%;border-collapse:collapse;font-size:.8rem;margin:10px 0 4px}
.lab-table th{text-align:left;font-weight:600;color:var(--ink-2);
  padding:4px 8px 4px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.lab-table td{padding:4px 8px 4px 0;border-bottom:1px solid var(--line)}
.lab-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lab-table td.good{color:var(--ok,#2e7d32);font-weight:600}
.lab-table td.warn{color:var(--warn,#b45309);font-weight:600}
.lab-actions button[disabled]{opacity:.45;cursor:not-allowed}

/* ασφαλιστική δικλείδα: αν το κουμπί φτάσει σε μικρή οθόνη, δεν φαίνεται */
@media (max-width: 700px) and (pointer: coarse) { .lab, .lab-transport { display: none } }

/* η δυνατότητα υπάρχει, απλώς όχι εδώ */
.labnote{flex-basis:100%;font-size:.8rem;line-height:1.5;color:var(--ink-2);
  background:var(--card);border:1px dashed var(--line);border-radius:10px;
  padding:10px 12px;margin-top:2px}


/* η γραμμή διακοπτών της σύνθετης αναζήτησης */
.advbar{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}
.advbar[hidden]{display:none}

/* τεκμηρίωση: διακριτή από τους στίχους, αλλά όχι υποβαθμισμένη */
.refs{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.refs h2{margin:0 0 10px;font-size:1.08rem;letter-spacing:-.01em}
.refs h3{margin:18px 0 6px;font-size:.74rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-2)}
.refs p{margin:0 0 10px;font-size:.9rem;line-height:1.62;max-width:74ch}
.refs-more{margin:6px 0 4px;font-size:.86rem}
.refs-more summary{cursor:pointer;color:var(--accent);font-weight:600;
  list-style:none;padding:6px 0}
.refs-more summary::-webkit-details-marker{display:none}
.refs-more summary::before{content:'▸ ';font-size:.8em}
.refs-more[open] summary::before{content:'▾ '}
.refs-more p{font-size:.84rem;color:var(--ink-2)}
.reflist{margin:0;padding-left:18px;font-size:.86rem;line-height:1.55}
.reflist li{margin-bottom:9px}
.reflist a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.reflist a:hover{border-bottom-color:currentColor}
.refmeta{color:var(--ink-2);font-size:.82rem}
.refnote{color:var(--ink-2);font-size:.8rem;line-height:1.5;margin-top:2px;max-width:60ch}

/* θεματική συλλογή: διακριτική ετικέτα, όχι διαφημιστικό πλαίσιο */
.themetags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:20px}
.themelabel{font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-2)}
.themetag{font:inherit;font-size:.82rem;padding:5px 12px;border-radius:999px;
  cursor:pointer;background:var(--card-2);border:1px solid var(--line);
  color:var(--ink)}
.themetag:hover{border-color:var(--accent);color:var(--accent)}

/* τα τεκμήρια: η σελίδα της εφημερίδας και το αρχείο για λήψη */
.reffiles{display:grid;gap:18px 16px;margin:8px 0 4px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));align-items:start}
.reffile{max-width:260px}
.reffile img{width:100%;height:auto;display:block;border:1px solid var(--line);cursor:zoom-in;
  border-radius:6px;background:#fff}
.reffile img:hover{border-color:var(--accent)}
.reffcap{font-size:.78rem;font-weight:600;margin-top:6px}
.refdl{display:inline-block;font-size:.86rem;padding:9px 14px;border-radius:9px;
  background:var(--card);border:1px solid var(--line);color:var(--accent);
  text-decoration:none;font-weight:600}
.refdl:hover{border-color:var(--accent)}
.people h4{margin:12px 0 4px;font-size:.8rem;font-weight:700;color:var(--ink)}
.peoplelist{margin:0;padding-left:18px;font-size:.83rem;line-height:1.5;
  columns:2;column-gap:26px}
@media(max-width:620px){.peoplelist{columns:1}}
.peoplelist li{margin-bottom:2px;break-inside:avoid}

/* η πηγή του τεκμηρίου, δίπλα στο ίδιο το τεκμήριο */
.refsource{font-size:.75rem;color:var(--ink-2);margin-top:5px}
.refsource a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.refsource a:hover{border-bottom-color:currentColor}

/* ετικέτα που έχει ψηφιοποιήσει άλλο αρχείο: δείχνουμε τον δρόμο */

/* προορισμός, όχι φίλτρο: το ξεχωρίζουμε διακριτικά */
.chip.doc{border-color:rgba(140,47,30,.35)}
.chip.doc[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}

/* πρωτογενές τεκμήριο που δεν υπάρχει online: κείμενο, όχι σύνδεσμος */
.refoffline{font-weight:600;color:var(--ink)}
.reflist .refmeta{color:var(--ink-2);font-size:.84rem}

/* ---- μόνο για τηλέφωνο ---- */

/* Το κουμπί της σύνθετης δηλώνει ότι υπάρχουν ενεργά φίλτρα, χωρίς να
   ανοίγει το πλαίσιο και να σπρώχνει τα αποτελέσματα εκτός οθόνης. */
.has-filters{position:relative}
.has-filters::after{content:'';position:absolute;top:3px;right:3px;
  width:7px;height:7px;border-radius:50%;background:var(--accent)}

@media(max-width:760px){
  /* Όσο διαβάζεται ένα τραγούδι, το ράδιο δεν κάθεται πάνω στο κείμενο. */
  body.reading .radiobox{display:none}
  /* Στη λίστα μένει, αλλά πιο συμμαζεμένο. */
  .radiobox{padding:8px 10px;bottom:8px;left:8px;right:8px}
  .rb-head{margin-bottom:5px;font-size:.64rem}
  .rb-now img{width:34px;height:34px}
}

.dcredit{font-size:.78rem;color:var(--dim);margin:.35rem 0 0;line-height:1.3}
.dcredit a{color:var(--dim);text-decoration:underline}
.dcredit a:hover{color:var(--ink)}

.topicbox{margin-top:1.1rem}


.refdls{margin-top:14px}
.refdls li{margin-bottom:11px}
@media(max-width:520px){.reffiles{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}

.portrait{display:block;float:none;max-width:230px;margin:0 0 1.2rem;
  text-align:center}
.portrait img{width:100%;height:auto;border-radius:3px;
  box-shadow:0 1px 6px rgba(0,0,0,.28)}
.portrait figcaption{font-size:.76rem;color:var(--dim);margin-top:.4rem;
  line-height:1.35}
/* καμία ενότητα δεν ξεκινά μέσα σε τυλιγμένο κείμενο */
.refs h2,.refs h3{clear:both}

/* Ρυθμός και δρόμος στη λίστα στοιχείων. Ό,τι έγραψε άνθρωπος είναι σκέτος
   σύνδεσμος· ό,τι εκτίμησε η μηχανή φοράει πάντα την ένδειξή του, ώστε να
   μη μοιάζει ποτέ τεκμηριωμένο. */
.autoval { opacity: .8; }
.automark { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
            opacity: .75; white-space: nowrap; }
.automark::before { content: '· '; }

/* Οι τρεις γραμμές του κουτακιού του ράδιου. Καθεμιά κόβεται με αποσιωπητικά
   αντί να ξεχειλίζει, και μόνο ο ερμηνευτής είναι σύνδεσμος — ώστε να ξέρεις
   πού σε πάει το πάτημα. */
#rb-title, #rb-sub, .rb-meta {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
#rb-sub { font-size: .82rem; }
.rb-meta { font-size: .74rem; opacity: .62; line-height: 1.35; }

/* Το κουμπί αναπαραγωγής/παύσης έχει σταθερό κουτί, και η παύση σχεδιάζεται
   με δύο μπάρες CSS — όχι με τη γλυφή «▮▮» που έχει άλλες μετρικές από το
   «▶» και παραμόρφωνε το κουμπί σε κάθε εναλλαγή. */
#p-livetoggle{width:44px;height:38px;display:inline-flex;align-items:center;
  justify-content:center;padding:0;line-height:1;font-size:1rem}
#p-livetoggle.is-playing::before,#p-livetoggle.is-playing::after{
  content:'';width:4px;height:14px;background:currentColor;border-radius:1px}
#p-livetoggle.is-playing::before{margin-right:4px}

/* Είσοδος χρήστη στην κεφαλίδα. */
.userbox{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
#u-form{display:flex;gap:.3rem;align-items:center}
#u-form input{font:inherit;font-size:.85rem;padding:.3rem .5rem;width:9.5rem;
  border:1px solid var(--line,#ccc);border-radius:4px;background:transparent;color:inherit}
#u-err{color:#b0501e;font-size:.8rem}

/* Παράθυρο σύνδεσης/εγγραφής. Οι ψηφίδες ζουν στη γραμμή εργαλείων· η φόρμα
   ανοίγει κεντραρισμένη και δεν αγγίζει τη στοίχιση της σελίδας. */
.uchips{display:inline-flex;gap:.4rem;margin-left:auto}
.umodal-φόντο{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:1rem}
.umodal{position:relative;background:var(--card,#fff);color:var(--ink,#231d18);border-radius:10px;
  padding:1.6rem 1.7rem 1.3rem;width:min(24rem,94vw);
  box-shadow:0 12px 40px rgba(0,0,0,.3)}
.umodal h2{margin:0 0 1rem;font-size:1.2rem}
.umodal form{display:flex;flex-direction:column;gap:.7rem}
.umodal label{display:flex;flex-direction:column;gap:.25rem;font-size:.88rem;opacity:.9}
.umodal input{font:inherit;padding:.5rem .6rem;border:1px solid rgba(128,128,128,.4);
  border-radius:6px;background:transparent;color:inherit}
.umodal-x{position:absolute;top:.6rem;right:.7rem;background:none;border:0;
  font-size:1.1rem;cursor:pointer;color:inherit;opacity:.6}
.umodal-x:hover{opacity:1}
.umodal-πόδι{display:flex;align-items:center;justify-content:space-between;
  gap:.8rem;margin-top:.3rem}
#u-err{color:#b0501e}
#u-err.καλό{color:var(--ok,#2f6b3a)}
.umodal-έξτρα{display:flex;flex-direction:column;gap:.25rem;margin-top:.9rem;
  padding-top:.7rem;border-top:1px solid var(--line,#e0d8ca);font-size:.82rem;
  color:var(--ink-2,#6b6055)}
.umodal-έξτρα a{color:var(--accent,#8c2f1e)}

/* επιθυμίες ακροατών στο κουτάκι του ράδιου */
.rb-wishes{display:block;padding:.35rem .7rem .5rem;font-size:.78rem;
  color:var(--accent);text-decoration:none;border-top:1px dashed var(--line)}
.rb-wishes:hover{text-decoration:underline}
/* αφιερώσεις στη λίστα του ράδιου */
.αφιέρωση{grid-column:1/-1;margin:-.35rem 0 .5rem;padding:.45rem .8rem;
  font-size:.86rem;color:var(--ink-2);background:var(--card-2);
  border-left:3px solid var(--accent-2);border-radius:0 8px 8px 0}
.αφιέρωση b{color:var(--ink)}
/* το πόδι της αρχικής — διακριτικοί σύνδεσμοι, όχι μενού */
.σελ-πόδι{margin:2.5rem auto 1rem;text-align:center;font-size:.85rem;
  color:var(--ink-2);display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.σελ-πόδι a{color:var(--ink-2);text-decoration:none;border-bottom:1px dotted var(--line)}
.σελ-πόδι a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* παράθυρο παραγγελίας ράδιου */
#rq-κείμενο{width:100%;min-height:4rem;font:inherit;padding:.5rem .6rem;
  border:1px solid var(--line);border-radius:8px;background:var(--card);
  color:var(--ink);resize:vertical}


/* το ραδιοκουμπί στις γραμμές των λιστών — διακριτικό, ζωντανεύει στο πέρασμα */
.rradio{background:none;border:1px solid transparent;border-radius:8px;
  line-height:0;padding:.3rem;cursor:pointer;color:var(--ink-2);
  opacity:.45;transition:opacity .15s,color .15s}
.rradio:hover{color:var(--accent)}
.row:hover .rradio,.rradio:focus{opacity:1}
.rradio:hover{border-color:var(--line);background:var(--card-2)}
@media(hover:none){.rradio{opacity:.8}}


/* Η συζήτηση του τραγουδιού — τα μηνύματα του φόρουμ, εδώ */
.talk{margin-top:1.6rem}
.talk h2{font-size:1.1rem;margin:0 0 .7rem}
.talknote{color:var(--ink-2);font-size:.92rem}
.talktopic{margin-bottom:1rem}
.talkhead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  flex-wrap:wrap;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:.8rem 1.1rem;
  margin-bottom:10px}
.talklink{color:var(--accent);text-decoration:none;font-size:.85rem;white-space:nowrap}
.talklink:hover{text-decoration:underline}
.talkpost{display:flex;gap:.75rem;padding:.9rem 1rem;margin:0 0 10px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow)}
.tavatar{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;color:#fff;font-weight:600;
  font-size:.95rem;user-select:none}
.tbody2{flex:1;min-width:0}
.talkby{font-size:.86rem;margin-bottom:.3rem;display:flex;align-items:baseline;gap:.55rem}
.talkby b{color:var(--ink);font-weight:600}
.ttime{color:var(--ink-2);font-size:.78rem}
.talkbody{font-size:.94rem;line-height:1.55;overflow-wrap:anywhere}
.talkbody blockquote{margin:.5rem 0;padding:.4rem .8rem;border-left:3px solid var(--line);
  background:var(--card-2);border-radius:0 8px 8px 0;font-size:.9rem}
.talkbody blockquote cite{display:block;font-style:normal;font-weight:600;
  font-size:.8rem;color:var(--ink-2);margin-bottom:.2rem}
.talkform{margin-top:.8rem}
.talkform textarea{width:100%;min-height:4.2rem;font:inherit;padding:.55rem .65rem;
  border:1px solid var(--line);border-radius:8px;background:var(--card);
  color:var(--ink);resize:vertical}
.talkfoot{display:flex;gap:.8rem;align-items:center;margin-top:.45rem}
.talkfoot .btn{font:inherit;padding:.45rem 1rem;border-radius:8px;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:#fff}
.talkfoot .btn:disabled{opacity:.5}

.talkwhere{margin:.35rem 0 0;font-size:.78rem;color:var(--ink-2)}

.forumchild{margin-left:1.6rem}
.forumrow .num{font-size:.9rem}


/* ---- Συζητήσεις: κατηγορίες ---- */
.fκατ{grid-column:1/-1;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.fκατ-κεφ{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.85rem 1.1rem;cursor:pointer;border-left:4px solid var(--accent)}
.fκατ-κεφ:hover{background:var(--card-2)}
.fκατ-όνομα{font-weight:600;font-size:1.02rem}
.fκατ-περ{font-size:.82rem;color:var(--ink-2);margin-top:.15rem}
.fκατ-στατ{font-size:.8rem;color:var(--ink-2);white-space:nowrap}
.fκατ-παιδιά{border-top:1px solid var(--line)}
.fυπο{display:flex;align-items:center;padding:.55rem 1.1rem .55rem 1.6rem;
  text-decoration:none;color:inherit}
.fυπο + .fυπο{border-top:1px solid var(--line)}
.fυπο:hover{background:var(--card-2)}
.fυπο-σώμα{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;width:100%;min-width:0}
.fυπο-όνομα{font-size:.92rem;font-weight:500}
.fυπο-στατ{font-size:.78rem;color:var(--ink-2);white-space:nowrap}

/* ---- Συζητήσεις: λίστα νημάτων με ζέβρα ---- */
.fθ-περ{grid-column:1/-1;color:var(--ink-2);font-size:.88rem;margin:.2rem 0 .6rem}
.fθ{grid-column:1/-1;display:flex;flex-direction:column;gap:10px}
.fθρ{display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;
  text-decoration:none;color:inherit;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  transition:border-color .12s, transform .12s}
.fθρ:hover{border-color:var(--accent);transform:translateY(-1px)}
.fθρ .tavatar{width:34px;height:34px;font-size:.88rem}
.fθ-σώμα{flex:1;min-width:0;display:flex;flex-direction:column;gap:.12rem}
.fθ-τίτλος{font-size:.95rem;font-weight:500;overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis}
.fθ-υπό{font-size:.78rem;color:var(--ink-2);overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis}
.fθ-δεξιά{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;
  flex:0 0 auto;min-width:9rem}
@media(max-width:600px){
  .fθ-δεξιά{min-width:0}
  .fθ-στατ{gap:.7rem}
  .fθ-κελί b{font-size:.92rem}
  .fθ-κελί.κύριο b{font-size:1.05rem}
}
/* Τα μεγέθη του νήματος, με την ετικέτα τους. Πριν υπήρχε ένας αριθμός μέσα
   σε κύκλο, χωρίς να λέει τι μετρά. */
.fθ-στατ{display:flex;align-items:flex-start;gap:1.1rem}
.fθ-κελί{display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  line-height:1.15}
.fθ-κελί b{font-size:1.02rem;font-weight:700;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.fθ-κελί.κύριο b{font-size:1.22rem;color:var(--ink)}
.fθ-κελί span{font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-2);white-space:nowrap}
.fθ-πλήθος{background:var(--card-2);border:1px solid var(--line);border-radius:99px;
  font-size:.78rem;padding:.05rem .55rem;font-variant-numeric:tabular-nums}
.fθ-χρόνος{font-size:.74rem;color:var(--ink-2);white-space:nowrap}



/* όνομα μέλους — πατιέται και ανοίγει την καρτέλα του */
.μέλος-δεσμός{cursor:pointer}
.μέλος-δεσμός:hover{color:var(--accent);text-decoration:underline}
/* καρτέλα μέλους */
.umodal.μέλος{width:min(21rem,94vw)}
.μλ-κεφ{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.μλ-κεφ h2{margin:0}
.μλ-αβατάρ{width:46px;height:46px;font-size:1.25rem}
.μλ-στατ{display:grid;grid-template-columns:1fr auto;gap:.45rem 1rem;margin:0;
  font-size:.92rem}
.μλ-στατ dt{color:var(--ink-2)}
.μλ-στατ dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
/* φόρμα διόρθωσης */
.umodal.φαρδύ{width:min(44rem,94vw);max-height:90vh;overflow-y:auto}
.δρθ-φόρμα{display:grid;grid-template-columns:1fr 1fr;gap:.7rem .9rem;margin:.4rem 0 .9rem}
.δρθ-φόρμα label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;
  color:var(--ink-2)}
.δρθ-φόρμα label.πλήρες{grid-column:1/-1}
.δρθ-φόρμα input,.δρθ-φόρμα textarea{font:inherit;padding:.45rem .6rem;
  border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
.δρθ-φόρμα textarea{min-height:3.6rem;resize:vertical}
@media(max-width:600px){.δρθ-φόρμα{grid-template-columns:1fr}}
/* ιστορικό αλλαγών */
.umodal.πλατύ{width:min(72rem,96vw);max-height:90vh;overflow-y:auto}
.ιστ-τύλιγμα{overflow:auto;max-height:62vh;border:1px solid var(--line);
  border-radius:10px}
.ιστ-πίνακας{border-collapse:collapse;font-size:.84rem;min-width:100%}
.ιστ-πίνακας th{position:sticky;top:0;background:var(--card-2);text-align:left;
  padding:.5rem .6rem;border-bottom:2px solid var(--line);white-space:nowrap}
.ιστ-πίνακας td{padding:.45rem .6rem;border-bottom:1px solid var(--line);
  vertical-align:top;max-width:13rem;overflow-wrap:anywhere}
.ιστ-στενό{white-space:nowrap;width:1%;font-variant-numeric:tabular-nums}
.ιστ-στενό-θ{white-space:normal !important;max-width:6rem;line-height:1.15;
  font-size:.78rem;vertical-align:bottom}
.ιστ-φαρδύ{min-width:16rem;max-width:26rem}
.ιστ-πίνακας tr:last-child td{border-bottom:0}
.ιστ-πότε{white-space:nowrap;color:var(--ink-2)}
.ιστ-περ{font-style:italic;color:var(--ink-2);max-width:12rem}
.ιστ-άλλαξε{background:color-mix(in srgb, var(--accent-2) 22%, #fff);
  font-weight:600;border-radius:4px}

/* μπάρα μορφοποίησης πάνω από τα πλαίσια γραφής */
.εργ{display:flex;flex-wrap:wrap;gap:.2rem;margin-bottom:.35rem;align-items:center}
.εργ-κ{font:inherit;font-size:.82rem;min-width:1.9rem;padding:.25rem .45rem;
  border:1px solid var(--line);border-radius:7px;background:var(--card);
  color:var(--ink);cursor:pointer;line-height:1.2}
.εργ-κ:hover{background:var(--card-2);border-color:var(--accent)}
.εργ-φατσούλες{display:inline-flex;flex-wrap:wrap;gap:.2rem;margin-left:.35rem;
  padding-left:.45rem;border-left:1px solid var(--line)}
.talkform textarea.μεγάλο{min-height:15rem}

/* τα κουμπιά του τραγουδιού: η Ακρόαση μόνη της, τα υπόλοιπα συμμαζεμένα */
.actbreak{flex-basis:100%;height:0}
.acts .btn:not(.primary){padding:.45rem .75rem;font-size:.88rem}

/* ---- στατιστικά ---- */
.στ-σύνολα{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.στ-σύνολο{flex:1;min-width:9rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:.9rem 1rem;text-align:center;
  display:flex;flex-direction:column;gap:.15rem}
.στ-σύνολο b{font-size:1.5rem;color:var(--accent);font-variant-numeric:tabular-nums}
.στ-σύνολο span{font-size:.8rem;color:var(--ink-2)}
.στ-πλέγμα{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
  gap:14px;align-items:start}
@media(max-width:920px){.στ-πλέγμα{grid-template-columns:1fr}}
.στ-κάρτα{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:1rem 1.2rem}
.στ-κάρτα.πλήρης{grid-column:1/-1}
.στ-κάρτα h3{margin:0 0 .7rem;font-size:.98rem}
.στ-γραμμή{display:grid;grid-template-columns:minmax(7rem,40%) 1fr auto;gap:.6rem;
  align-items:center;padding:.18rem 0;font-size:.86rem}
.στ-όνομα{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.στ-μπάρα{background:var(--card-2);border-radius:99px;height:.6rem;overflow:hidden}
.στ-γέμισμα{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:99px}
.στ-ν{font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:.8rem}
.στ-svg{width:100%;height:auto;display:block}
.στ-ράβδος{fill:var(--accent);opacity:.85}
.στ-ράβδος:hover{fill:var(--accent-2);opacity:1}
.στ-άξονας{font-size:11px;fill:var(--ink-2)}

/* πίτες στατιστικών */
.στ-πίτα{display:flex;gap:1rem;align-items:flex-start}
.στ-πίτα-svg{width:140px;height:140px;flex:0 0 auto}
.στ-πίτα-svg path{stroke:#fff;stroke-width:.02}
.στ-υπόμνημα{flex:1;min-width:0;display:flex;flex-direction:column;gap:.14rem}
.στ-υπ-γραμμή{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:.45rem;align-items:center;font-size:.82rem}
.στ-υπ-γραμμή .στ-όνομα{white-space:normal;overflow:visible;text-overflow:clip;
  line-height:1.25}
.στ-υπ-χρώμα{width:.7rem;height:.7rem;border-radius:3px;flex:0 0 auto}
@media(max-width:480px){.στ-πίτα{flex-direction:column;align-items:center}}

/* ═══ ΑΝΤΙΘΕΣΕΙΣ ═══════════════════════════════════════════════════════════
   Μετρήθηκε: το --line (#e0d8ca) πάνω σε λευκή κάρτα δίνει 1,41:1 — κάτω από
   το όριο όπου το μάτι διαβάζει περίγραμμα. Γι' αυτό όλα τα κουμπιά έμοιαζαν
   επίπεδα: υπήρχαν, αλλά δεν ξεχώριζαν.

   Δεν αλλάζει το --line καθολικά: στις μεγάλες επιφάνειες (κάρτες, πλαίσια) η
   απαλή γραμμή είναι σωστή. Τα ΜΙΚΡΑ χειριστήρια όμως χρειάζονται πιο καθαρό
   όριο, γιατί έχουν λίγη επιφάνεια να το δείξουν.                          */
:root{
  --line-ctrl:#c3b69e;                    /* 2,00:1 σε λευκό — απαλό αλλά ορατό */
  --accent-line:rgba(140,47,30,.42);      /* 2,3:1 — το περίγραμμα του τόνου   */
  --accent-wash:#f6eeed;                  /* 8% τόνος σε λευκό                 */
}

.chip{border-color:var(--line-ctrl)}
.chip:hover{border-color:var(--accent);color:var(--ink)}

/* ── Λογαριασμός ──────────────────────────────────────────────────────────
   Τα δύο κουμπιά διαβάζονται ως ζευγάρι και ξεχωρίζουν από τα φίλτρα, χωρίς
   να φωνάζουν: παίρνουν το χρώμα του τόνου στο κείμενο και στο περίγραμμα.
   Η «Σύνδεση» είναι η κύρια από τις δύο και έχει ελαφρύ γέμισμα.           */
.uchips{display:inline-flex;gap:6px;align-items:center;
  padding-left:10px;margin-left:4px;border-left:1px solid var(--line-ctrl)}
.uchips .chip{color:var(--accent);border-color:var(--accent-line)}
.uchips .chip:hover{border-color:var(--accent);background:var(--accent-wash)}
#u-login{background:var(--accent-wash);font-weight:600}
#u-login:hover{background:color-mix(in srgb,var(--accent) 14%,#fff)}

/* Τα πατημένα φίλτρα κρατούν το λευκό τους κείμενο και στο πέρασμα του δείκτη:
   ο κανόνας .chip:hover παραπάνω θα τους το έσβηνε. Το ίδιο και ο τόνος του
   «Καθαρισμός φίλτρων». */
.chip[aria-pressed=true]:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.clear:hover{color:var(--accent)}

/* Το ίδιο και στα υπόλοιπα μικρά χειριστήρια. Μετρημένες αντιθέσεις με το
   παλιό --line:  πεδία και λίστες σε λευκό 1,41:1 · κουμπιά .btn πάνω στο
   χρωματιστό --card-2 μόλις 1,20:1 — το χειρότερο της σελίδας.             */
.field select,.field input,
input[type=text],input[type=search],input[type=number],input[type=email],
input[type=password],textarea,select{border-color:var(--line-ctrl)}
.btn{border-color:var(--line-ctrl)}
.btn:hover{border-color:var(--accent)}
/* Το πρωτεύον κουμπί έχει ήδη δικό του περίγραμμα στον τόνο — δεν το πειράζουμε. */
.btn.primary{border-color:var(--accent)}

/* ── Η σελίδα του ράδιου ────────────────────────────────────────────────────
   Οι γραμμές των τραγουδιών σχηματίζουν συνεχή λευκή κάρτα. Ο τίτλος ενότητας
   πρέπει να ΒΓΑΙΝΕΙ από αυτήν, αλλιώς διαβάζεται ως άλλη μια γραμμή της
   λίστας — που ήταν και το πρόβλημα. Κάθεται στο φόντο της σελίδας, με αέρα
   πάνω και κάτω, και η λίστα που ακολουθεί ξαναρχίζει με στρογγυλεμένη κορυφή. */
.radiosec{margin:26px 0 0;padding:0 14px 10px;background:transparent}
.radiosec:first-child{margin-top:6px}
.radiosec h2{font-size:.78rem;margin:0;color:var(--accent);font-weight:700;
  text-transform:uppercase;letter-spacing:.09em}
.radiosub{display:block;font-size:.84rem;color:var(--ink-2);margin-top:3px}
.radiosec + .row{border-top-left-radius:var(--r);border-top-right-radius:var(--r);
  border-top:1px solid var(--line)}
.radiosec + .empty{border-radius:var(--r)}
/* Η ώρα μετάδοσης κάτω από τον τίτλο, διακριτικά. */
.playedat{display:block;font-size:.76rem;color:var(--ink-2);margin-top:2px;
  font-variant-numeric:tabular-nums}
/* Το τραγούδι που παίζει αυτή τη στιγμή ξεχωρίζει διακριτικά. */
.row.rnow{background:#fdf6ec;box-shadow:inset 3px 0 0 var(--accent-2)}

/* Παραγγελία μέσα στην προβολή του ράδιου. Το πεδίο πρέπει να διαβάζεται ως
   πεδίο — γι' αυτό περίγραμμα ελέγχου, όχι η αχνή γραμμή του κειμένου. */
.radioask{margin:0 0 .4rem;padding:0 14px}
.radioask input{width:100%;padding:12px 14px;font:inherit;font-size:1rem;
  border-radius:10px;border:1.5px solid var(--line-ctrl);
  background:var(--card);color:var(--ink);outline:none}
.radioask input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.asklist{list-style:none;margin:8px 0 0;padding:0;background:var(--card);
  border-radius:10px;overflow:hidden}
.asklist:empty{display:none}
.asklist:not(:empty){border:1px solid var(--line-ctrl)}
.asklist li{padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.asklist li:last-child{border-bottom:none}
.asklist li:hover,.asklist li:focus-visible{background:var(--card-2)}
.asklist b{display:block;font-size:.95rem}
.asklist span{font-size:.8rem;color:var(--ink-2)}

/* ── Κουβέντα ───────────────────────────────────────────────────────────────
   Ζει στο κεφαλίδι κάθε σελίδας. Το πάνελ κάθεται πάνω από το κουτάκι του
   ράδιου (70) αλλά κάτω από τα παράθυρα διαλόγου (120). */
.κβ-σημ{display:inline-block;min-width:17px;height:17px;line-height:17px;
  margin-left:6px;padding:0 4px;border-radius:9px;background:var(--accent);
  color:#fff;font-size:.68rem;font-weight:700;text-align:center;
  font-variant-numeric:tabular-nums}
.κβ-πάνελ{position:fixed;left:18px;bottom:18px;z-index:80;
  width:min(340px,calc(100vw - 36px));height:min(460px,70vh);
  display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line-ctrl);border-top:3px solid var(--accent);
  border-radius:14px;box-shadow:0 12px 38px rgba(35,29,24,.28);overflow:hidden}
.κβ-πάνελ[hidden]{display:none}
.κβ-κεφ{display:flex;align-items:baseline;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--line);background:var(--card-2)}
.κβ-κεφ b{font-size:.95rem}
.κβ-x{margin-left:auto;border:none;background:transparent;color:var(--ink-2);
  font-size:.95rem;cursor:pointer;padding:2px 4px;line-height:1}
.κβ-x:hover{color:var(--ink)}
.κβ-μην{list-style:none;margin:0;padding:10px 14px;flex:1;overflow-y:auto}
.κβ-μην li{padding:5px 0;font-size:.92rem;line-height:1.45;overflow-wrap:anywhere}
.κβ-μην li b{color:var(--accent);margin-right:5px}
.κβ-ω{float:right;font-size:.7rem;color:var(--ink-2);margin-left:8px;
  font-variant-numeric:tabular-nums}
.κβ-κρύψε{color:var(--ink-2);text-decoration:none;font-size:.78rem;margin-left:6px}
.κβ-κενό{color:var(--ink-2);font-size:.88rem}
.κβ-γρ{border-top:1px solid var(--line);padding:9px 12px 11px}
.κβ-φατσ{display:flex;flex-wrap:wrap;gap:1px;margin-bottom:7px}
.κβ-φατσ button{border:none;background:transparent;font-size:1.2rem;line-height:1;
  padding:3px 4px;border-radius:7px;cursor:pointer;min-width:32px;min-height:32px}
.κβ-φατσ button:hover,.κβ-φατσ button:active{background:var(--card-2)}
.κβ-σειρά{display:flex;gap:7px}
.κβ-σειρά input{flex:1;min-width:0;padding:9px 11px;font:inherit;font-size:.95rem;
  border-radius:9px;border:1.5px solid var(--line-ctrl);background:var(--paper);
  color:var(--ink);outline:none}
.κβ-σειρά input:focus{border-color:var(--accent)}
.κβ-υπενθ{font-size:.86rem;color:var(--ink-2)}
.κβ-υπενθ a{color:var(--accent)}
.κβ-λάθος{margin-top:7px;font-size:.84rem;color:#8c2f1e}
/* Στο κινητό το κουτάκι του ράδιου πιάνει όλη την κάτω λωρίδα· η κουβέντα
   ανοίγει ως φύλλο από κάτω και το σκεπάζει όσο είναι ανοιχτή. */
@media(max-width:720px){
  .κβ-πάνελ{left:8px;right:8px;bottom:8px;width:auto;height:min(72vh,540px)}
}

/* ── Η είσοδος στο ράδιο, στο κεφαλίδι ──────────────────────────────────────
   Ήταν θαμμένη στα ψιλά του υποσέλιδου: κύλιση ως κάτω, εντοπισμός μικρού
   συνδέσμου, πάτημα. Στο κινητό το .counts κρύβεται και η πάνω δεξιά γωνία
   μένει άδεια — εκεί ανήκει, ορατή χωρίς καμία κύλιση. */
.masthead .wrap .logo{margin-right:auto}
.masthead .counts{margin-left:0}
.mastradio{display:inline-flex;align-items:center;gap:7px;margin-left:12px;
  padding:9px 14px;border-radius:999px;font-size:.92rem;font-weight:600;
  color:#fff;background:var(--accent);border:1px solid var(--accent);
  white-space:nowrap;flex:0 0 auto;
  box-shadow:0 2px 9px rgba(140,47,30,.26)}
.mastradio:hover,.mastradio:focus-visible{text-decoration:none;
  background:color-mix(in srgb,var(--accent) 88%,#000)}
.mr-dot{width:8px;height:8px;border-radius:50%;background:#fff;opacity:.5;
  flex:0 0 auto}
.mastradio.live .mr-dot{opacity:1;animation:mrσφυγμός 2s infinite}
@keyframes mrσφυγμός{0%,100%{opacity:1}50%{opacity:.25}}
.mr-n{font-weight:400;font-size:.78rem;opacity:.9;
  font-variant-numeric:tabular-nums}
/* Σε πολύ στενές οθόνες μένει το εικονίδιο και ο αριθμός των ακροατών */
@media(max-width:360px){.mastradio{padding:9px 11px}.mr-t{display:none}}

/* ── Η δεξιά ομάδα του κεφαλιδιού ───────────────────────────────────────────
   Κουβεντούλα, λογαριασμός και ράδιο μαζί, ορατά χωρίς κύλιση σε κάθε σελίδα.
   Ήταν στη μπάρα των φίλτρων, που στο κινητό θέλει κύλιση για να τη βρεις. */
.masthead .wrap{flex-wrap:wrap;row-gap:10px}
.mastδεξιά{display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;justify-content:flex-end}
.mastδεξιά .mastradio{margin-left:2px}
.mastδεξιά .uchips{padding-left:8px;margin-left:0}
#u-chat{white-space:nowrap}
/* Σε στενή οθόνη μένει το εικονίδιο· η λέξη θα έσπρωχνε τα υπόλοιπα κάτω. */
@media(max-width:560px){
  /* Η ετικέτα ΔΕΝ κρύβεται πια: τα εικονίδια βγήκαν από τις ψηφίδες, οπότε
   χωρίς αυτήν το κουμπί θα ήταν κενό. */
  .masthead .wrap{gap:8px}
  .mastδεξιά{gap:6px}
}

/* ── Προθήκη συζητήσεων ─────────────────────────────────────────────────────
   Ίδια γωνία και ίδια στοίβαξη με την κουβέντα — ανοίγει ένα τη φορά. */
.συζ-πάνελ{position:fixed;left:18px;bottom:18px;z-index:80;
  width:min(400px,calc(100vw - 36px));height:min(520px,74vh);
  display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line-ctrl);border-top:3px solid var(--accent);
  border-radius:14px;box-shadow:0 12px 38px rgba(35,29,24,.28);overflow:hidden}
.συζ-πάνελ[hidden]{display:none}
.συζ-κεφ{display:flex;align-items:center;padding:10px 12px;
  border-bottom:1px solid var(--line);background:var(--card-2)}
.συζ-κεφ b{font-size:.95rem}
.συζ-x{margin-left:auto;border:none;background:transparent;color:var(--ink-2);
  font-size:.95rem;cursor:pointer;padding:2px 4px;line-height:1}
.συζ-x:hover{color:var(--ink)}
.συζ-ταξ{display:flex;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);
  flex-wrap:wrap}
.συζ-ταξ button{font:inherit;font-size:.78rem;padding:5px 10px;border-radius:999px;
  border:1px solid var(--line-ctrl);background:var(--card);color:var(--ink-2);
  cursor:pointer;white-space:nowrap}
.συζ-ταξ button:hover{border-color:var(--accent)}
.συζ-ταξ button.ενεργό{background:var(--accent-wash);border-color:var(--accent);
  color:var(--accent);font-weight:600}
.συζ-λίστα{list-style:none;margin:0;padding:0;flex:1;overflow-y:auto}
.συζ-λίστα li{display:flex;gap:10px;align-items:baseline;padding:10px 12px;
  border-bottom:1px solid var(--line);cursor:pointer}
.συζ-λίστα li:last-child{border-bottom:none}
.συζ-λίστα li:hover{background:var(--card-2)}
.συζ-κ{flex:1;min-width:0}
.συζ-κ b{display:block;font-size:.9rem;line-height:1.35;overflow-wrap:anywhere}
.συζ-κ small{display:block;font-size:.75rem;color:var(--ink-2);margin-top:2px}
/* Ο αριθμός των προβολών είναι το επιχείρημα — δικό του βάρος, δεξιά. */
.συζ-π{flex:0 0 auto;font-size:.78rem;font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.συζ-κενό{padding:16px 12px;color:var(--ink-2);font-size:.88rem;
  border-bottom:none;cursor:default}
.συζ-πόδι{border-top:1px solid var(--line);padding:9px 12px;background:var(--card-2)}
.συζ-πόδι a{font-size:.85rem}
@media(max-width:720px){
  .συζ-πάνελ{left:8px;right:8px;bottom:8px;width:auto;height:min(76vh,560px)}
}

/* ── Αποστάσεις στη συζήτηση ────────────────────────────────────────────────
   Τα μηνύματα είναι κάρτες με 1rem εσωτερικό περιθώριο. Το υποσέλιδο με τα
   «Προηγούμενα/Επόμενα», η φόρμα απάντησης και η σημείωση «Συνδέσου για να
   απαντήσεις» κάθονταν γυμνά με μηδέν πλάγιο περιθώριο, οπότε ακουμπούσαν
   την άκρη ενώ όλα από πάνω τους ήταν στοιχισμένα παραμέσα. */
.talkfoot{padding:0 1rem;margin-top:.7rem}
.talknote{padding:.85rem 1rem;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);margin-top:.7rem}
.talkform{margin-top:.7rem;padding:.9rem 1rem;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
/* Η σημείωση δίπλα στον τίτλο του νήματος δεν είναι κάρτα — είναι υπότιτλος. */
.talkhead .talknote{padding:0;background:none;border:none;box-shadow:none;margin:0}

/* Οι αναγνώσεις: διακριτικά αλλά ορατά. Είκοσι χρόνια κίνησης αξίζουν να
   φαίνονται — χωρίς να φωνάζουν πάνω από τον τίτλο. */
.fθ-προβ{font-size:.74rem;color:var(--ink-2);font-variant-numeric:tabular-nums;
  white-space:nowrap;margin-left:.5rem}
.fσύνολα{font-size:.82rem;color:var(--ink-2);margin:0 0 .9rem;padding:.55rem .9rem;
  background:var(--card-2);border:1px solid var(--line);border-radius:10px;
  font-variant-numeric:tabular-nums}

/* ═══ ΣΥΖΗΤΗΣΕΙΣ — παρουσίαση ══════════════════════════════════════════════
   Δύο προβλήματα μαζί:

   1. Το #results φοράει .list, που είναι το ίδιο κάρτα με overflow:hidden και
      μηδέν περιθώριο — φτιαγμένη για .row που φέρνουν δικό τους. Οι προβολές
      του φόρουμ όμως ρίχνουν μέσα ΚΑΡΤΕΣ, που ακουμπούσαν το περίγραμμα του
      δοχείου. Στις συζητήσεις το δοχείο γίνεται διάφανο και τα παιδιά του
      αναπνέουν πάνω στο χαρτί.

   2. Όλα ήταν η ίδια λευκή κάρτα με την ίδια σκιά: μηνύματα, κεφαλίδες,
      σημειώσεις. Χωρίς ιεραρχία, η σελίδα διαβαζόταν επίπεδη. Εδώ το πρώτο
      μήνυμα ξεχωρίζει, τα στοιχεία γίνονται ταμπελάκια, και η σκιά φεύγει
      υπέρ καθαρής γραμμής.                                                  */
.list.φόρουμ{background:none;border:none;box-shadow:none;overflow:visible;
  border-radius:0;gap:12px;padding:0}

/* ── Κεφαλίδα νήματος ─────────────────────────────────────────────────────── */
.list.φόρουμ .talkhead{display:block;background:var(--card);
  border:1px solid var(--line-ctrl);border-top:3px solid var(--accent);
  border-radius:14px;box-shadow:none;padding:1.05rem 1.25rem;margin:0}
.list.φόρουμ .talkhead h2,.list.φόρουμ .talkhead b{font-size:1.12rem;
  line-height:1.3;display:block;margin:0 0 .35rem}
/* Τα στοιχεία γίνονται ταμπελάκια: διαβάζονται με μια ματιά αντί για γκρίζα
   πρόταση που την προσπερνάς. */
.list.φόρουμ .talkhead .talknote{display:inline-block;font-size:.76rem;
  color:var(--ink-2);background:var(--card-2);border:1px solid var(--line);
  border-radius:999px;padding:.2rem .6rem;margin:.15rem .35rem 0 0;
  font-variant-numeric:tabular-nums;box-shadow:none}
.list.φόρουμ .talklink{font-size:.82rem}

/* ── Το κουμπί επιστροφής: ψίθυρος, όχι κάρτα ─────────────────────────────── */
.list.φόρουμ .back{align-self:flex-start;background:none;border:none;
  color:var(--ink-2);font-size:.85rem;padding:.2rem 0;cursor:pointer}
.list.φόρουμ .back:hover{color:var(--accent)}

/* ── Μηνύματα ─────────────────────────────────────────────────────────────── */
.talkpost{padding:1rem 1.15rem;margin:0 0 10px;border-radius:14px;
  border:1px solid var(--line);box-shadow:none;gap:.85rem;
  transition:border-color .14s, background .14s}
.talkpost:hover{border-color:var(--line-ctrl)}
.list.φόρουμ .tavatar{box-shadow:none}
.talkby{display:flex;align-items:baseline;gap:.5rem;
  margin-bottom:.35rem;flex-wrap:wrap}
.list.φόρουμ .talkby b{font-size:.92rem}
.list.φόρουμ .talkbody{line-height:1.62}
.talkbody a{border-bottom:1px solid var(--accent-line);overflow-wrap:anywhere}
.list.φόρουμ .talkbody a:hover{text-decoration:none;border-bottom-color:var(--accent)}

/* ── Υποσέλιδο, φόρμα, σημείωση ───────────────────────────────────────────── */
.list.φόρουμ .talkfoot{padding:0;margin:.2rem 0 0}
.list.φόρουμ .talknote{border-radius:14px;border-color:var(--line);box-shadow:none;
  margin:0}
.list.φόρουμ .talkform{border-radius:14px;border-color:var(--line-ctrl);
  box-shadow:none;margin:0;padding:1rem 1.15rem}

/* ── Λίστα νημάτων μιας θεματικής ─────────────────────────────────────────── */
.list.φόρουμ .fθ{gap:8px}
.list.φόρουμ .fθρ{box-shadow:none;border-color:var(--line);border-radius:12px;
  padding:.75rem 1rem;transition:border-color .14s, background .14s}
.list.φόρουμ .fθρ:hover{border-color:var(--accent-line);background:var(--accent-wash);
  transform:none}
.list.φόρουμ .fθ-τίτλος{font-weight:600}
/* Τα δύο νούμερα δεξιά: μηνύματα σε ταμπελάκι τόνου, αναγνώσεις από κάτω. */
.list.φόρουμ .fθ-πλήθος{background:var(--accent-wash);border-color:var(--accent-line);
  color:var(--accent);font-weight:700}
.list.φόρουμ .fθ-προβ{margin-left:0}

/* ── Κατάλογος θεματικών ──────────────────────────────────────────────────── */
.list.φόρουμ .fκατ{box-shadow:none;border-color:var(--line-ctrl);border-radius:14px;
  margin-bottom:0}
.list.φόρουμ .fσύνολα{background:var(--card);border-color:var(--line-ctrl);
  border-radius:12px;padding:.7rem 1rem;margin:0}

/* ═══ ΣΥΖΗΤΗΣΕΙΣ — χρώμα και ιεραρχία ══════════════════════════════════════
   Το παράπονο ήταν «μονότονο άσπρο παντού», και ήταν σωστό: κάθε στοιχείο
   ήταν η ίδια λευκή κάρτα. Το χρώμα δεν προστίθεται ως διακόσμηση — βγαίνει
   από κάτι που ήδη υπάρχει: κάθε μέλος έχει δικό του χρώμα από παλέτα έξι
   γήινων τόνων, θαμμένο ως τώρα σε έναν κύκλο 36 εικονοστοιχείων. */

/* Η κεφαλίδα γίνεται ζώνη, όχι άλλη μια λευκή κάρτα. */
/* Η κεφαλίδα του νήματος πρέπει να ξεχωρίζει από ΔΥΟ πράγματα: το χαρτί της
   σελίδας και τα λευκά μηνύματα κάτω της.

   Με --card-2 χανόταν στο χαρτί, με λευκό γινόταν άλλο ένα μήνυμα, και με
   σκούρο κρεμ έβγαινε βαρύτερο από το φόντο. Η λύση δεν είναι η φωτεινότητα
   αλλά η ΑΠΟΧΡΩΣΗ: η παλέτα είναι ζεστή (κρασί 9°, μπρούντζος 43°, χαρτί
   40°), οπότε ένας ψυχρός τόνος στην ίδια φωτεινότητα διαβάζεται αμέσως ως
   άλλο επίπεδο. Το #e1e8e6 είναι στις 163° — συμπληρωματικό του ζεστού
   άξονα — αλλά το ψυχρό βγαίνει ξένο σε ζεστή παλέτα.

   Δοκιμάστηκαν και απορρίφθηκαν: ψυχρό 163° (ξένο σε ζεστή παλέτα), λαδί
   73° (δεν έδεσε), ρόδινο 339° (άσχετο). Η απόχρωση που κρατήθηκε είναι
   στις 26°, δηλαδή ΑΝΑΜΕΣΑ στο κρασί (9°) και τον μπρούντζο (43°): δεν
   είναι νέο χρώμα αλλά το ενδιάμεσο των δύο που ήδη υπάρχουν στη σελίδα.
   Υπολογισμένο, όχι μαντεμένο — audit/xrwmatikes_armonies.py. */
.list.φόρουμ .talkhead{background:#e8ddd4;border-color:var(--line-ctrl)}
.talkeyebrow{display:block;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--accent);font-weight:700;margin-bottom:.3rem}

/* Κάθε μήνυμα κρατά το χρώμα του γράφοντος σε κάθετη γραμμή. Έξι άνθρωποι σε
   ένα νήμα δίνουν έξι λωρίδες — η σελίδα αποκτά ρυθμό από το περιεχόμενό της. */
.talkpost{border-left:4px solid var(--χρ,var(--line))}
.talkby b{color:var(--χρ,var(--ink))}
/* Το μήνυμα που άνοιξε τη συζήτηση: απαλό γέμισμα στο χρώμα του γράφοντος. */

.talkpost.πρώτο .tavatar{width:42px;height:42px;font-size:1.05rem}
.talkbody{font-size:.98rem}
.ttime{font-size:.76rem;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* Μήνυμα που είναι σκέτος σύνδεσμος: κάρτα με το όνομα του τόπου αντί για
   γυμνή διεύθυνση τριών σειρών. */
.συνδκάρτα{display:inline-flex;align-items:center;gap:.5rem;margin-top:.15rem;
  padding:.6rem .85rem;border-radius:10px;background:var(--card-2);
  border:1px solid var(--line-ctrl);text-decoration:none;
  border-bottom:1px solid var(--line-ctrl) !important;
  transition:border-color .14s, background .14s}
.συνδκάρτα:hover{border-color:var(--accent) !important;background:var(--accent-wash)}
.συνδτόπος{font-size:.9rem;font-weight:600;color:var(--accent)}
.συνδουρά{font-size:.8rem;color:var(--ink-2)}

/* Η σημείωση «Συνδέσου για να απαντήσεις» ήταν λευκή κάρτα σαν τα μηνύματα,
   και τα μιμούνταν χωρίς να είναι. Γίνεται λεπτή ζώνη. */
.list.φόρουμ .talknote{background:var(--card-2);border-color:var(--line);
  padding:.7rem 1rem;font-size:.88rem}

/* ── Χρώμα μέλους στις λίστες ────────────────────────────────────────────────
   Η ίδια παλέτα έξι τόνων που έχει το αβατάρ, ως λωρίδα στη γραμμή. Είκοσι
   πέντε νήματα έπαυαν να είναι είκοσι πέντε ίδια λευκά κουτιά — το χρώμα
   βγαίνει από το ποιος έγραψε, όχι από πρόσθετη διακόσμηση. */
.list.φόρουμ .fθρ{border-left:4px solid var(--χρ,var(--line))}
.list.φόρουμ .fθρ:hover{border-color:var(--line);
  border-left-color:var(--χρ,var(--accent));
  background:color-mix(in srgb,var(--χρ,var(--accent)) 6%,#fff)}
.list.φόρουμ .fθ-τίτλος{color:var(--ink)}
.συζ-λίστα li{border-left:3px solid var(--χρ,transparent)}
.συζ-λίστα li:hover{background:color-mix(in srgb,var(--χρ,var(--accent)) 6%,#fff)}

/* ── Χρώμα μέλους στις λίστες ────────────────────────────────────────────────
   Η ίδια παλέτα έξι τόνων που έχει το αβατάρ, ως λωρίδα στη γραμμή. Είκοσι
   πέντε νήματα έπαυαν να είναι είκοσι πέντε ίδια λευκά κουτιά — και το χρώμα
   βγαίνει από το ποιος έγραψε, όχι από πρόσθετη διακόσμηση. */
.list.φόρουμ .fθρ{border-left:4px solid var(--χρ,var(--line))}
.list.φόρουμ .fθρ:hover{border-color:var(--line);
  border-left-color:var(--χρ,var(--accent));
  background:color-mix(in srgb,var(--χρ,var(--accent)) 6%,#fff)}
.συζ-λίστα li{border-left:3px solid var(--χρ,transparent)}
.συζ-λίστα li:hover{background:color-mix(in srgb,var(--χρ,var(--accent)) 6%,#fff)}

/* ── Τα μηνύματα ξεχωρίζουν ΠΡΑΓΜΑΤΙΚΑ ──────────────────────────────────────
   Το 5% γέμισμα ήταν αόρατο, και η λωρίδα των 4px χανόταν. Χειρότερα: όταν το
   χρώμα του γράφοντος έτυχε να είναι το πρώτο της παλέτας — το οξίμμα — το
   αποτέλεσμα διαβαζόταν σαν «ροζ», σαν διακόσμηση αντί για πληροφορία.

   Εδώ κάθε μήνυμα παίρνει ορατό γέμισμα στο χρώμα ΤΟΥ ΓΡΑΦΟΝΤΟΣ. Δύο
   διαδοχικά μηνύματα από διαφορετικούς ανθρώπους δεν μπορούν πια να μοιάζουν. */
.talkpost{border-left:4px solid var(--χρ,var(--line-ctrl));background:var(--card)}
/* Το μήνυμα που ανοίγει τη συζήτηση ξεχωρίζει από τη ΘΕΣΗ και το βάρος του,
   όχι από βαφή: πιο χοντρή λωρίδα και μια διακριτική ετικέτα. Τα χρωματιστά
   γεμίσματα έκαναν τη σελίδα να διαβάζεται ροζ αντί για συζήτηση. */
.talkpost.πρώτο{border-left-width:8px;background:var(--card)}
.talkpost.πρώτο .talkby b::after{content:'ερώτηση';margin-left:.5rem;
  font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-2);border:1px solid var(--line-ctrl);border-radius:999px;
  padding:.1rem .45rem;vertical-align:.1em}
/* Το όνομα σε πλήρες χρώμα και βάρος — είναι η ταυτότητα της γραμμής. */
.talkby b{color:var(--χρ,var(--ink));font-weight:700}
/* Το αβατάρ αποκτά δακτύλιο ώστε να μη χάνεται μέσα στο ίδιο του το χρώμα. */
.tavatar{box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--χρ,transparent)}

/* ── Το πέρασμα του δείκτη ───────────────────────────────────────────────────
   Οι γραμμές άλλαζαν ΦΟΝΤΟ στο hover, και επειδή το φόντο ήταν το ίδιο κρεμ
   για όλες, ό,τι ακουμπούσε ο δείκτης γινόταν «το ίδιο σκοτεινό κρεμ». Χάνεται
   η ταυτότητα της γραμμής και βαραίνει η σελίδα.

   Εδώ το φόντο ΔΕΝ αλλάζει. Αντί γι' αυτό δυναμώνει η λωρίδα του μέλους και
   μπαίνει μια αχνή σκιά: η γραμμή «σηκώνεται» αντί να λερώνεται. */
.talkpost:hover{background:var(--card)}
.list.φόρουμ .fθρ:hover{background:var(--card);border-color:var(--line);
  border-left-color:var(--χρ,var(--accent));border-left-width:6px;
  box-shadow:0 2px 10px rgba(35,29,24,.10)}
.συζ-λίστα li:hover{background:transparent;
  border-left-color:var(--χρ,var(--accent));border-left-width:5px}
.asklist li:hover,.asklist li:focus-visible{background:var(--card)}

/* ── Συνημμένα μηνυμάτων ─────────────────────────────────────────────────────
   4,1 GB τεκμηρίων ήταν αόρατα: το κείμενο έγραφε «[συνημμένο: … — στο φόρουμ]»
   χωρίς καν σύνδεσμο. Ανάμεσά τους ολόκληρες σαρώσεις εφημερίδων — π.χ. όλος ο
   Τύπος του Ιανουαρίου 1984 για τον θάνατο του Τσιτσάνη. */
.synim{margin-top:.7rem;display:flex;flex-direction:column;gap:.5rem}
.synim-εικόνα{display:inline-block;max-width:230px;text-decoration:none;
  border:1px solid var(--line-ctrl);border-radius:10px;overflow:hidden;
  background:var(--card);transition:border-color .14s}
.synim-εικόνα:hover{border-color:var(--accent);text-decoration:none}
.synim-εικόνα img{display:block;width:100%;height:auto}
.synim-λεζ{display:block;padding:.35rem .5rem;font-size:.72rem;color:var(--ink-2);
  border-top:1px solid var(--line);overflow-wrap:anywhere}
.synim-pdf{border:1px solid var(--line-ctrl);border-radius:10px;
  background:var(--card);overflow:hidden}
.synim-κεφ{display:flex;align-items:center;gap:.55rem;padding:.55rem .7rem;
  flex-wrap:wrap}
.synim-εικ{font-size:1.05rem;flex:0 0 auto}
.synim-ον{font-size:.86rem;font-weight:600;flex:1;min-width:0;
  overflow-wrap:anywhere}
.synim-kb{font-size:.74rem;color:var(--ink-2);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.synim-κ{padding:.3rem .7rem;font-size:.8rem;min-height:0}
.synim-λ{font-size:.8rem;white-space:nowrap}
/* Η προεπισκόπηση: ψηλή αλλά όχι ατέλειωτη· το πλήρες ανοίγει σε καρτέλα. */
.synim-πλ{display:block;width:100%;height:min(70vh,620px);border:0;
  border-top:1px solid var(--line);background:var(--card-2)}
@media(max-width:720px){.synim-πλ{height:60vh}}

/* ═══ ΣΥΖΗΤΗΣΕΙΣ — ΚΛΙΜΑΚΩΤΗ ΣΤΟΙΧΙΣΗ ══════════════════════════════════════
   Οι απαντήσεις ξεχωρίζουν από τη ΘΕΣΗ και το ΒΑΡΟΣ τους, ποτέ από γέμισμα.
   Δοκιμάστηκαν και απορρίφθηκαν: όλα λευκά (μονότονο), γέμισμα 5% (αόρατο),
   γέμισμα 9–17% (ροζ). Εδώ κανένα φόντο δεν αλλάζει.

   Η ερώτηση πιάνει όλο το πλάτος, με χοντρό περίγραμμα και μεγαλύτερο κείμενο.
   Οι απαντήσεις μπαίνουν παραμέσα, πιο στενές, πιο ελαφριές, με τη λωρίδα του
   γράφοντος. */
/* Η εσοχή έχει νόημα μόνο εκεί που υπάρχει «πρώτο» μήνυμα να ξεχωρίζει: στη
   συζήτηση κάτω από ένα τραγούδι. Σε νήμα του φόρουμ όλα τα μηνύματα είναι
   ισότιμα και η κλιμάκωση δεν λέει τίποτα — μπαίνει μόνο όταν υπάρχει
   ερώτηση, δηλαδή στο πάνελ των συζητήσεων. */
.talkpost{background:var(--card);border-width:1px;
  border-left-width:4px;border-radius:10px}
.talkpost.πρώτο{margin-left:0;border-width:2px;border-left-width:6px;
  border-radius:14px;padding:1.15rem 1.3rem;background:var(--card)}
.talkpost.πρώτο .talkbody{font-size:1.04rem;line-height:1.65}
.talkpost.πρώτο .talkby b{font-size:1rem}
/* Οι απαντήσεις ελαφρύτερες: μικρότερο αβατάρ, πιο ήσυχο κείμενο. */
.talkpost:not(.πρώτο) .tavatar{width:30px;height:30px;font-size:.8rem}
.talkpost:not(.πρώτο) .talkbody{font-size:.93rem}
/* Το πέρασμα του δείκτη σηκώνει, δεν βάφει. */
.talkpost:hover{background:var(--card);box-shadow:0 2px 12px rgba(35,29,24,.10)}
@media(max-width:600px){
  .talkpost{margin-left:1rem}
}

/* ── Τεκμήρια προσώπου, κάτω από την κεφαλίδα καλλιτέχνη ─────────────────────
   Κλειστά εξ ορισμού: η δισκογραφία είναι ο λόγος που ήρθε κανείς εδώ. */
.atekm{grid-column:1/-1;margin:0 0 14px;background:var(--card);
  border:1px solid var(--line-ctrl);border-radius:var(--r)}
.atekm > summary{cursor:pointer;padding:.7rem 1rem;display:flex;
  align-items:baseline;gap:.6rem;list-style:none}
.atekm > summary::-webkit-details-marker{display:none}
.atekm > summary::before{content:'▸';color:var(--accent);font-size:.9rem}
.atekm[open] > summary::before{content:'▾'}
.atekm > summary b{font-size:.92rem}
.atekm-n{font-size:.76rem;color:var(--ink-2)}
.atekm > .refs,.atekm > div{padding:0 1rem 1rem}

/* ---------------- άρθρα από το wiki ----------------
   Το κείμενο έρχεται από τον αναλυτή του MediaWiki, οπότε φέρνει τις δικές
   του κλάσεις (wikitable, thumb, infobox). Τους δίνουμε το ντύσιμο του
   ιστότοπου και, κυρίως, αέρα: τίποτα δεν ακουμπάει το πλαίσιο. */
.wikiσελ{grid-column:1/-1;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:1.6rem 1.9rem 1.9rem;margin:0 0 18px;
  max-width:none;overflow-wrap:break-word}
@media(max-width:700px){.wikiσελ{padding:1.1rem 1.15rem 1.4rem}}

/* Ο δρόμος πίσω, πάνω από τον τίτλο του άρθρου. */
.wikiπίσω{display:inline-flex;align-items:center;gap:.4rem;margin:0 0 1rem;
  padding:.4rem .8rem .4rem .6rem;font:inherit;font-size:.88rem;cursor:pointer;
  background:none;border:1px solid var(--line);border-radius:999px;
  color:var(--ink-2);transition:border-color .15s,color .15s}
.wikiπίσω:hover{border-color:var(--accent);color:var(--accent)}

.wikiκεφ{border-bottom:2px solid var(--line);padding-bottom:.7rem;margin-bottom:1.3rem}
.wikiκεφ h1{margin:0 0 .45rem;font-size:1.75rem;line-height:1.25;
  text-wrap:balance;color:var(--ink)}
.wikiυπ{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;align-items:center;
  font-size:.86rem;color:var(--ink-2)}
.wikiυπ > span{display:inline-flex;align-items:center;gap:.35rem}
.wikiπρος{color:var(--accent);font-weight:600}

.wikiσώμα{font-size:1.02rem;line-height:1.72;color:var(--ink)}
.wikiσώμα p{margin:0 0 1.05rem}
.wikiσώμα h1,.wikiσώμα h2,.wikiσώμα h3,.wikiσώμα h4{
  margin:1.9rem 0 .75rem;line-height:1.3;color:var(--ink);text-wrap:balance}
.wikiσώμα h2{font-size:1.32rem;border-bottom:1px solid var(--line);padding-bottom:.3rem}
.wikiσώμα h3{font-size:1.12rem}
.wikiσώμα ul,.wikiσώμα ol{margin:0 0 1.05rem;padding-left:1.6rem}
.wikiσώμα li{margin:.3rem 0}
.wikiσώμα a{color:var(--accent);border-bottom:1px solid transparent}
.wikiσώμα a:hover{border-bottom-color:var(--accent)}
.wikiσώμα hr{border:0;border-top:1px solid var(--line);margin:1.6rem 0}
.wikiσώμα blockquote{margin:0 0 1.05rem;padding:.2rem 0 .2rem 1.1rem;
  border-left:3px solid var(--line);color:var(--ink-2)}

/* Ο σύνδεσμος που έδειχνε σε σελίδα η οποία δεν γράφτηκε ποτέ. */
.wikiλείπει{color:var(--ink-2);border-bottom:1px dotted var(--line)}

/* Εικόνες: το wikitext τις στέλνει δεξιά με σταθερό πλάτος — στο κινητό
   πρέπει να κατέβουν και να χωρέσουν. */
.wikiσώμα img{max-width:100%;height:auto;border-radius:6px}
.wikiσώμα .thumb{float:right;margin:.2rem 0 1rem 1.4rem;max-width:min(320px,45%)}
.wikiσώμα .thumbinner{background:var(--card-2);border:1px solid var(--line);
  border-radius:10px;padding:.5rem;font-size:.82rem}
.wikiσώμα .thumbcaption{color:var(--ink-2);padding-top:.35rem;line-height:1.45}
.wikiσώμα .magnify{display:none}
@media(max-width:640px){
  .wikiσώμα .thumb{float:none;margin:.6rem auto 1.2rem;max-width:100%}
}

/* Πίνακες: τα κουτιά των δίσκων έχουν σταθερό πλάτος 408px στο πρότυπο. */
.wikiσώμα .table-περιτύλιγμα{overflow-x:auto;margin:0 0 1.2rem}
.wikiσώμα table{border-collapse:collapse;font-size:.92rem;max-width:100%}
.wikiσώμα table.wikitable{background:var(--card);border:1px solid var(--line)}
.wikiσώμα table.wikitable th,.wikiσώμα table.wikitable td{
  border:1px solid var(--line);padding:.45rem .6rem;vertical-align:top}
.wikiσώμα table.wikitable th{background:var(--card-2);text-align:left}
.wikiσώμα table[style*="float"]{float:none !important;margin:0 0 1.2rem !important;
  width:auto !important;max-width:100%}

/* Ο πίνακας περιεχομένων του MediaWiki. */
.wikiσώμα #toc,.wikiσώμα .toc{background:var(--card-2);border:1px solid var(--line);
  border-radius:10px;padding:.85rem 1.1rem;margin:0 0 1.4rem;display:inline-block;
  max-width:100%;font-size:.92rem}
.wikiσώμα .toctitle h2{border:0;margin:0 0 .4rem;font-size:1rem}
.wikiσώμα .toc ul{list-style:none;padding-left:1rem;margin:0}
.wikiσώμα .toctogglecheckbox,.wikiσώμα .toctogglespan{display:none}
.wikiσώμα .tocnumber{color:var(--ink-2);margin-right:.4rem}

/* Κατηγορίες: ψηφίδες με αέρα, και καθεμιά οδηγεί στα υπόλοιπα άρθρα της. */
.wikiκατ{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin:1.8rem 0 0;padding-top:1.1rem;border-top:1px solid var(--line)}
.wikiκατ > b{font-size:.88rem;color:var(--ink-2);font-weight:600;margin-right:.2rem}
.wikiετ{display:inline-block;padding:.28rem .7rem;border-radius:999px;
  background:var(--card-2);border:1px solid var(--line);font-size:.85rem;
  color:var(--accent);cursor:pointer;transition:border-color .15s}
.wikiετ:hover{border-color:var(--accent)}

/* Ιστορικό αλλαγών: μία γραμμή ανά αναθεώρηση, στήλες που στοιχίζονται. */
.wikiιστ{margin:1.4rem 0 0;border-top:1px solid var(--line);padding-top:1rem}
.wikiιστ > summary{cursor:pointer;list-style:none;display:flex;
  align-items:center;gap:.6rem;font-size:.95rem;color:var(--ink-2)}
.wikiιστ > summary::-webkit-details-marker{display:none}
.wikiιστ > summary::before{content:'▸';color:var(--accent);font-size:.9rem}
.wikiιστ[open] > summary::before{content:'▾'}
.wikiιστ > summary b{color:var(--ink);font-weight:600}
.wikiιστ-λ{margin-top:.9rem;border:1px solid var(--line);border-radius:10px;
  overflow:hidden}
/* Οι στήλες έχουν ελάχιστο 0 ώστε να μπορούν να συρρικνωθούν· χωρίς αυτό το
   περιεχόμενο ξεχείλιζε πάνω στη διπλανή στήλη αντί να κοπεί. */
.wikiγρ{display:grid;grid-template-columns:5.6rem minmax(0,10rem) minmax(0,1fr) 5rem;
  gap:.9rem;
  padding:.5rem .85rem;font-size:.87rem;align-items:baseline;
  border-top:1px solid var(--line)}
.wikiγρ:first-child{border-top:0}
/* Ίδια αρμονία με το ευρετήριο: λαδί στις 73°, όχι το χαρτί ξεθωριασμένο. */
.wikiγρ:nth-child(even){background:#f9f6f4}
.wikiημ{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.wikiποιος{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wikiσχ{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wikiμηκ{color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap}
@media(max-width:700px){
  .wikiγρ{grid-template-columns:5.6rem 1fr;gap:.2rem .7rem}
  .wikiσχ,.wikiμηκ{grid-column:1/-1;text-align:left}
}

/* Διόρθωση επί τόπου. */
.wikiεργ{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
  margin:0 0 1.2rem}
.wikiσώμα[contenteditable="true"]{outline:2px dashed var(--accent-2);
  outline-offset:.7rem;border-radius:4px;background:var(--card)}
.wikiπερ{flex:1 1 16rem;min-width:12rem;padding:.45rem .65rem;
  border:1px solid var(--line);border-radius:8px;background:var(--card);
  color:var(--ink);font:inherit;font-size:.92rem}

/* Το άρθρο όπως ήταν σε μια παλιά στιγμή. */
.umodal.wikiπαλιό{max-width:min(940px,94vw)}
.wikiπαλιό-σώμα{max-height:70vh;overflow-y:auto;padding-right:.4rem}
.wikiπαλιό-κεφ{display:flex;flex-wrap:wrap;gap:.4rem 1rem;
  padding:0 0 .8rem;margin-bottom:1rem;border-bottom:1px solid var(--line);
  font-size:.88rem;color:var(--ink-2)}
.wikiπηγή{white-space:pre-wrap;word-break:break-word;font-size:.85rem;
  line-height:1.6;background:var(--card-2);border:1px solid var(--line);
  border-radius:10px;padding:1rem 1.15rem;margin:0;color:var(--ink)}

/* Γραμμή ιστορικού: πατιέται, και η μεταβολή μεγέθους έχει χρώμα. */
.wikiγρ{cursor:pointer;transition:background .12s}
.wikiγρ:hover{background:var(--stripe)}
.wikiεν{color:var(--accent);font-style:italic}
.wikiάδειο{color:var(--ink-2);opacity:.65;font-style:italic}
.wikiμηκ.θετ{color:#2f6b3a}
.wikiμηκ.αρν{color:var(--accent)}

/* Οι κατάλογοι του wiki στο προφίλ του καλλιτέχνη. */
.ακαταλ{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  margin:.8rem 0 0;padding-top:.75rem;border-top:1px solid var(--line)}
.ακαταλ > b{font-size:.82rem;color:var(--ink-2);font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;margin-right:.25rem}
.ακαταλ-ε{display:inline-block;padding:.3rem .75rem;border-radius:999px;
  background:var(--card-2);border:1px solid var(--line);font-size:.86rem;
  color:var(--accent);transition:border-color .15s,background .15s}
.ακαταλ-ε:hover{border-color:var(--accent);background:var(--card)}

/* Το δοχείο των άρθρων. Το #results φοράει .list, που είναι λευκή κάρτα με
   overflow:hidden και μηδέν περιθώριο — φτιαγμένη για τις αράδες τραγουδιών
   που φέρνουν δικό τους. Οι προβολές των άρθρων ρίχνουν μέσα δικό τους
   περιεχόμενο, που ακουμπούσε το περίγραμμα και πνιγόταν στο λευκό. Ίδια
   λύση με τις συζητήσεις: το δοχείο γίνεται διάφανο και τα παιδιά του
   αναπνέουν πάνω στο χαρτί. */
.list.άρθρα{background:none;border:none;box-shadow:none;overflow:visible;
  border-radius:0;padding:0;gap:0;display:block}

/* ---------------- το ευρετήριο των άρθρων ----------------
   Μορφή και φόντο. Το κρεμ είναι το ΦΟΝΤΟ· πάνω του κάθονται λευκές
   επιφάνειες με περίγραμμα και σκιά. «Όλα λευκά» και «όλα κρεμ» είναι
   εξίσου επίπεδα: στο πρώτο δεν ξεχωρίζει τίποτα, στο δεύτερο δεν φαίνεται
   πού τελειώνει τι.

   Μία επιφάνεια ανά ενότητα, με αέρα κρεμ ανάμεσά τους — εκεί διαβάζεται το
   όριο. Μέσα στην επιφάνεια, οι αράδες χωρίζονται με τρίχινες γραμμές.
   Κλίμακα αποστάσεων σε πολλαπλάσια του 4· το χρώμα μπαίνει μόνο σε λεπτές
   επιφάνειες, ποτέ ως γέμισμα. */
.ευρ{grid-column:1/-1;display:flex;flex-direction:column;gap:20px;
  margin:0 0 32px;background:none;border:0;padding:0}

/* Η κεφαλίδα κάθεται στο χαρτί, χωρίς επιφάνεια: είναι τίτλος σελίδας και
   πρέπει να διαβάζεται ως ανώτερο επίπεδο από τις κάρτες που ακολουθούν. */
.ευρ-κεφ{margin:4px 0 0}
.ευρ-κεφ h1{margin:0 0 8px;font-size:2rem;line-height:1.12;
  letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.ευρ-στατ{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.85rem;
  color:var(--ink-2);font-variant-numeric:tabular-nums}
.ευρ-στατ > span + span::before{content:'·';margin-right:16px;opacity:.45}

.ευρ-ψάξε{margin:0}
.ευρ-ψάξε input{width:100%;padding:14px 16px;font:inherit;font-size:1rem;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  color:var(--ink);box-shadow:0 1px 2px rgba(35,29,24,.04)}
.ευρ-ψάξε input::placeholder{color:var(--ink-2);opacity:.75}
.ευρ-ψάξε input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.ευρ-πλήθος{font-size:.74rem;color:var(--ink-2);margin:0 0 8px;
  text-transform:uppercase;letter-spacing:.1em}
.ευρ-κενό{color:var(--ink-2);font-style:italic;margin:0}

/* Η ΕΠΙΦΑΝΕΙΑ: λευκή κάρτα πάνω στο κρεμ, με περίγραμμα και χαμηλή σκιά.
   Το overflow:hidden κρατά τις αράδες μέσα στις στρογγυλεμένες γωνίες. */
.ευρ-εν,.ευρ-απ:not(:empty){background:var(--card);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;
  box-shadow:0 1px 2px rgba(35,29,24,.05),0 10px 24px -18px rgba(35,29,24,.35)}
/* Οι αράδες φέρνουν δικό τους περιθώριο 20px· η κάρτα των αποτελεσμάτων δεν
   πρέπει να το διπλασιάσει. Περιθώριο μπαίνει μόνο στην επιγραφή. */
.ευρ-απ:not(:empty){padding:16px 0 0}
.ευρ-απ .ευρ-πλήθος{padding:0 20px}
.ευρ-απ:empty{display:none}

/* Η επικεφαλίδα της ενότητας: απλό κείμενο με κατακόρυφη λωρίδα και λεπτή
   γραμμή από κάτω. Δοκιμάστηκε σκούρα ταινία με ανοιχτά γράμματα και ήταν
   πολύ έντονη. */
.ευρ-εν > summary{cursor:pointer;list-style:none;display:flex;
  align-items:center;gap:12px;padding:16px 20px;color:var(--ink)}
.ευρ-εν > summary::-webkit-details-marker{display:none}
.ευρ-εν > summary::before{content:'';width:3px;height:1.05em;flex:0 0 auto;
  background:var(--accent);border-radius:2px}
.ευρ-εν > summary::after{content:'+';margin-left:auto;color:var(--ink-2);
  font-size:1.1rem;line-height:1;font-weight:400}
.ευρ-εν[open] > summary::after{content:'–'}
.ευρ-εν > summary b{font-size:.82rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.11em}
.ευρ-ν{font-size:.78rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ευρ-υπ{font-size:.82rem;color:var(--ink-2);font-style:italic}

/* Η αράδα. Στήλες που στοιχίζονται, τρίχινη γραμμή ανάμεσα, και πραγματικό
   περιθώριο ώστε τίποτα να μην ακουμπά το περίγραμμα της κάρτας.
   Δοκιμάστηκε εναλλαγή τόνου στις μονές/ζυγές και αφαιρέθηκε. */
.ευρ-γρ{display:grid;grid-template-columns:1fr auto 3.4rem;gap:0 20px;
  align-items:center;padding:11px 20px 11px 17px;
  border-bottom:1px solid var(--line);border-left:3px solid transparent;
  transition:border-left-color .14s}
.ευρ-λίστα > .ευρ-γρ:last-child{border-bottom:0}

/* Εναλλαγή τόνου ανά αράδα, ώστε μια ενότητα με τριάντα εγγραφές να μη
   διαβάζεται ως μία λευκή έκταση.

   ΟΧΙ το χαρτί ξεθωριασμένο: αυτό είναι η ίδια απόχρωση σε άλλη ένταση και
   μοιάζει με το φόντο. Ο τόνος έρχεται από την ίδια αρμονία με την κεφαλίδα
   των νημάτων — λαδί στις 73°, γειτονικό του μπρούντζου — σε πολύ υψηλή
   φωτεινότητα. Απέχει 1,07 από το λευκό και 1,10 από το χαρτί, δηλαδή
   περισσότερο από το φόντο παρά από το λευκό. */
.ευρ-λίστα > .ευρ-γρ:nth-child(even){background:#f9f6f4}

/* Ρυθμός αντί για χρώμα. Μια ενότητα με 79 εγγραφές διαβάζεται ως μία
   αδιάκοπη λευκή έκταση· κάθε έξι αράδες μπαίνει ανάσα και πιο έντονη
   γραμμή, ώστε το μάτι να έχει πού να πιαστεί. Καμία βαφή. */
.ευρ-λίστα > .ευρ-γρ:nth-child(6n):not(:last-child){
  padding-bottom:24px;border-bottom-width:2px}
.ευρ-λίστα > .ευρ-γρ:nth-child(6n+1):not(:first-child){padding-top:24px}
/* Χωρίς αλλαγή φόντου στο πέρασμα του δείκτη — μόνο η λωρίδα κι ο τίτλος. */
.ευρ-γρ:hover{border-left-color:var(--accent)}
.ευρ-γρ:hover .ευρ-γρ-τ{text-decoration:underline;text-underline-offset:3px}
/* Η στήλη του τίτλου: τίτλος, από κάτω τα στοιχεία της σελίδας, και τελευταία
   η ράβδος μήκους. */
.ευρ-γρ-κ{display:flex;flex-direction:column;gap:4px;min-width:0}
.ευρ-γρ-δεύτερη{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;
  font-size:.78rem;color:var(--ink-2);line-height:1.4}
.ευρ-τελεία{opacity:.45}
.ευρ-πρόσωπο{color:var(--ink)}
.ευρ-ράβδος{margin-top:3px}
.ευρ-γρ-τ{color:var(--accent);line-height:1.4;font-size:.95rem;
  overflow:hidden;text-overflow:ellipsis}

/* Τα μεγάλα άρθρα βαραίνουν τυπογραφικά. Αυτό σπάει την ομοιομορφία των
   τριάντα ίδιων αράδων — όχι το φόντο τους. */
.ευρ-γρ.μεσαίο .ευρ-γρ-τ{font-size:1.04rem}
.ευρ-γρ.μεγάλο .ευρ-γρ-τ{font-size:1.18rem;font-weight:600;letter-spacing:-.01em}
.ευρ-γρ.μεγάλο{padding-top:15px;padding-bottom:15px}

/* Η ράβδος: λεπτή επιφάνεια στο χρώμα του ιστότοπου, όχι γέμισμα. Δείχνει
   πόσο μεγάλο είναι το άρθρο σε σχέση με το μεγαλύτερο της ενότητας. */
.ευρ-ράβδος{display:block;height:3px;border-radius:2px;
  background:color-mix(in srgb,var(--line) 70%,transparent);
  max-width:22rem;overflow:hidden}
.ευρ-ράβδος i{display:block;height:100%;border-radius:2px;
  background:color-mix(in srgb,var(--accent) 42%,transparent)}
.ευρ-γρ.μεγάλο .ευρ-ράβδος i{background:var(--accent)}
.ευρ-γρ.μεσαίο .ευρ-ράβδος i{background:color-mix(in srgb,var(--accent) 68%,transparent)}
.ευρ-γρ-π{font-size:.83rem;color:var(--ink-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:12rem}
.ευρ-γρ-μ{font-size:.8rem;color:var(--ink-2);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* Η πρώτη ενότητα είναι η κύρια: λεπτή ταινία στην κορυφή της κάρτας. */
.ευρ-εν:first-of-type{box-shadow:0 1px 2px rgba(35,29,24,.06),
  0 14px 30px -18px rgba(35,29,24,.42)}
.ευρ-εν:first-of-type > summary{border-top:3px solid var(--accent);
  padding-top:14px}

.ευρ-κατ{padding:16px 20px 20px;margin:0;border:0}
.ευρ-σημ{margin:0;padding:0 4px;font-size:.85rem;color:var(--ink-2)}

@media(max-width:600px){
  .ευρ{gap:14px}
  .ευρ-κεφ h1{font-size:1.55rem}
  .ευρ-εν > summary{padding:14px 16px}
  .ευρ-γρ{grid-template-columns:1fr 3rem;gap:0 12px;padding:12px 16px 12px 13px}
  .ευρ-γρ-π{grid-column:1/-1;max-width:none;margin-top:2px}
  .ευρ-απ:not(:empty){padding:14px 0 0}
  .ευρ-απ .ευρ-πλήθος{padding:0 16px}
}

/* Οι ψηφίδες της γραμμής εργαλείων: το εικονίδιο δεξιά από το κείμενο (η
   σειρά είναι στο index.html). Με flex και gap δεν χρειάζεται κενό μέσα στο
   κείμενο, ώστε όταν η ετικέτα κρύβεται στο κινητό να μένει μόνο το
   εικονίδιο, χωρίς περίσσιο διάστημα. */
.mastδεξιά .chip{display:inline-flex;align-items:center;gap:.4rem}

/* Όταν η γραμμή δεν χωράει, τυλίγεται και η δεύτερη σειρά ξεκινούσε από
   αριστερά, κάτω από τον τίτλο. Στοιχίζουμε τη σειρά δεξιά.

   Όχι με δεύτερο margin:auto — το .logo έχει ήδη margin-right:auto, και δύο
   αυτόματα περιθώρια θα μοίραζαν τον κενό χώρο στη μέση, μετακινώντας τους
   μετρητές στο κέντρο. Το justify-content δρα μόνο στη σειρά που ΔΕΝ έχει
   αυτόματο περιθώριο, δηλαδή ακριβώς στη δεύτερη. */
.masthead .wrap{justify-content:flex-end}
.masthead .mastδεξιά{justify-content:flex-end}

/* Το πάνελ αναζήτησης έπαιρνε δικό του κρεμ (#f4efe4) ανάμεσα στη λευκή
   γραμμή τίτλου και στο κρεμ της σελίδας (#f1ece2). Τρία φόντα που
   κατεβαίνουν σκαλοπάτι-σκαλοπάτι, με τα δύο τελευταία σχεδόν ίδια: βγαίνει
   θολό. Μένουν δύο επίπεδα — λευκή γραμμή τίτλου, κρεμ σελίδα — και το
   πάνελ ορίζεται από τη γραμμή του, όχι από δικό του φόντο. */
.finder{background:var(--paper)}

/* ---------------- η σελίδα ενός συντάκτη ----------------
   Λευκές κάρτες πάνω στο χαρτί, όπως και το ευρετήριο. Τα γραφήματα είναι
   καθαρό SVG και CSS — καμία βιβλιοθήκη. */
.στατ-πλέγμα{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));
  gap:12px;margin:0 0 20px}
.στατ-κ{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;display:flex;flex-direction:column;gap:2px;
  box-shadow:0 1px 2px rgba(35,29,24,.05)}
.στατ-κ b{font-size:1.6rem;line-height:1.05;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.στατ-κ span{font-size:.78rem;color:var(--ink-2);text-transform:uppercase;
  letter-spacing:.08em}

.γρφ{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px 20px;margin:0 0 20px;
  box-shadow:0 1px 2px rgba(35,29,24,.05)}
.γρφ.γρφ-λίστα{padding:18px 0 0}
.γρφ.γρφ-λίστα > h2{padding:0 20px}
.γρφ > h2{margin:0 0 16px;font-size:.82rem;font-weight:700;color:var(--ink);
  text-transform:uppercase;letter-spacing:.11em}

/* ράβδοι ανά χρονιά */
.ράβδοι-έτη{display:flex;align-items:flex-end;gap:6px;height:170px;
  overflow-x:auto;padding-bottom:2px}
.ρε-στήλη{flex:1 1 0;min-width:24px;display:flex;flex-direction:column;
  align-items:center;gap:6px;height:100%}
.ρε-ρ{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;
  position:relative}
.ρε-ρ i{display:block;width:100%;max-width:34px;border-radius:3px 3px 0 0;
  background:var(--accent);transition:opacity .15s}
.ρε-στήλη:hover .ρε-ρ i{opacity:.78}
.ρε-στήλη.κενή .ρε-ρ{border-bottom:1px dashed var(--line)}
.ρε-ν{position:absolute;top:-16px;font-size:.7rem;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ρε-έτος{font-size:.72rem;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* δακτύλιος με υπόμνημα */
.πίτα-κ{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.πίτα{width:150px;height:150px;flex:0 0 auto;transform:rotate(-90deg)}
.υπόμνημα{list-style:none;margin:0;padding:0;flex:1 1 12rem;min-width:11rem;
  display:flex;flex-direction:column;gap:7px}
.υπόμνημα li{display:flex;align-items:center;gap:9px;font-size:.88rem}
.υπόμνημα i{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.υπ-όν{color:var(--ink)}
.υπ-ν{margin-left:auto;color:var(--ink-2);font-size:.8rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* οριζόντιες ράβδοι */
.ορ-ράβδοι{display:flex;flex-direction:column;gap:9px}
.ορ-γρ{display:grid;grid-template-columns:minmax(0,15rem) 1fr 2.4rem;gap:12px;
  align-items:center;padding:3px 0}
.ορ-όν{color:var(--accent);font-size:.9rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ορ-γρ:hover .ορ-όν{text-decoration:underline;text-underline-offset:3px}
.ορ-ρ{height:9px;border-radius:5px;background:var(--card-2);overflow:hidden}
.ορ-ρ i{display:block;height:100%;border-radius:5px;background:var(--accent-2)}
.ορ-ν{font-size:.8rem;color:var(--ink-2);text-align:right;
  font-variant-numeric:tabular-nums}

.ευρ-γρ-σχ{font-size:.8rem;color:var(--ink-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* το όνομα του συντάκτη, όπου κι αν εμφανίζεται */
.συντ{color:var(--accent);cursor:pointer;border-bottom:1px solid transparent}
.συντ:hover{border-bottom-color:var(--accent)}

@media(max-width:600px){
  .ορ-γρ{grid-template-columns:1fr 2.2rem;gap:4px 10px}
  .ορ-ρ{grid-column:1/-1}
  .πίτα-κ{gap:16px}
  .πίτα{width:118px;height:118px}
}

/* Η εικόνα σε παράθυρο, αντί για ταξίδι σε ξεχωριστή σελίδα αρχείου.
   Το .umodal έχει σταθερό width:min(24rem,94vw) — μόνο με max-width η εικόνα
   έβγαινε ΜΙΚΡΟΤΕΡΗ από τη μικρογραφία μέσα στο άρθρο. Χρειάζεται width. */
.umodal.εικόνα{width:auto;max-width:min(1200px,96vw);padding:2.4rem 1.2rem 1.2rem}
.εικ-κ{display:flex;flex-direction:column;gap:14px}
.εικ-μεγάλη{display:block;max-width:100%;max-height:74vh;margin:0 auto;
  border-radius:8px;background:var(--card-2)}
.εικ-υπ{display:flex;flex-direction:column;gap:5px;text-align:center}
.εικ-υπ b{font-size:.98rem;color:var(--ink)}
.εικ-στ{font-size:.82rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.εικ-περ{margin:6px 0 0;font-size:.86rem;color:var(--ink-2);line-height:1.55}

/* Υποενότητα μέσα στα τεκμήρια, όταν είναι πολλά και απλώνονται σε εποχές. */
.refομάδα{margin:18px 0 8px;font-size:.78rem;font-weight:700;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.1em;
  padding-bottom:5px;border-bottom:1px solid var(--line)}
.refομάδα:first-of-type{margin-top:10px}

/* Η ημερομηνία στις τελευταίες αλλαγές θέλει περισσότερο χώρο από το μέγεθος
   αρχείου: «12.3.2024» δεν χωράει σε 3,4rem και κοβόταν στο «2». */
.ευρ-γρ-ημ{width:auto;min-width:5.4rem}
.γρφ-λίστα .ευρ-γρ{grid-template-columns:1fr auto 5.6rem}

/* ---- τα φίλτρα στο κινητό ----
   Τρία κουτιά επιλογής, το καθένα με τη δική του ετικέτα, γέμιζαν την οθόνη
   και έπρεπε να τα προσπεράσεις για να φτάσεις στα αποτελέσματα. Μένει το
   πεδίο αναζήτησης· τα υπόλοιπα ανοίγουν με πάτημα. */
.κφίλτρα{display:none}
@media(max-width:700px){
  .κφίλτρα{display:inline-block}
  /* Μόνο η πρώτη ομάδα πεδίων. Τα πεδία της σύνθετης αναζήτησης έχουν δικό
     τους κουμπί και δεν πρέπει να τα κρύβει αυτός ο κανόνας. */
  .finder .fields:not(.adv) > .field:not(.αναζήτηση){display:none}
  .finder.φίλτρα-ανοιχτά .fields:not(.adv) > .field{display:flex}
  .finder .fields:not(.adv){gap:0}
  .finder.φίλτρα-ανοιχτά .fields:not(.adv){gap:12px}
  .finder{padding:12px 0}
  .finderbar{margin-top:10px}
}

/* ---- γκαλερί του MediaWiki μέσα σε άρθρο ----
   Ο αναλυτής παράγει <ul class="gallery"> με <li class="gallerybox">, και
   βασιζόταν στο φύλλο στυλ του wiki για να τα βάλει δίπλα-δίπλα. Χωρίς αυτό
   στοιβάζονταν κάθετα σε πλάτος 250 πίξελ και η σελίδα έμενε κατά τα τρία
   τέταρτα άδεια. Επιπλέον, ο κανόνας μας για τις μεμονωμένες εικόνες
   (.thumb{float:right}) τραβούσε δεξιά και τα κουτιά της γκαλερί. */
.wikiσώμα ul.gallery{display:flex;flex-wrap:wrap;gap:16px;
  list-style:none;padding:0;margin:0 0 1.5rem}
.wikiσώμα li.gallerybox{display:flex;flex-direction:column;gap:6px;
  width:auto;max-width:270px;margin:0}
.wikiσώμα .gallerybox .thumb{float:none;margin:0;max-width:none;
  width:auto;height:auto;background:var(--card-2);border:1px solid var(--line);
  border-radius:8px;padding:8px;display:flex;align-items:center;
  justify-content:center;min-height:0}
.wikiσώμα .gallerybox .thumb > *{margin:0}
.wikiσώμα .gallerybox img{max-width:100%;height:auto;border-radius:4px}
.wikiσώμα .gallerytext{font-size:.8rem;color:var(--ink-2);line-height:1.5;
  text-align:left;padding:0}
.wikiσώμα .gallerytext p{margin:0}
@media(max-width:520px){
  .wikiσώμα ul.gallery{gap:12px}
  .wikiσώμα li.gallerybox{max-width:100%;width:100%}
}

/* ---- η ερώτηση απέναντι στις απαντήσεις ----
   Το πρώτο μήνυμα ενός νήματος είχε το ίδιο λευκό με τα υπόλοιπα και το νήμα
   διαβαζόταν επίπεδο. Παίρνει τον λαδί τόνο της παλέτας (73°, γειτονικό του
   μπρούντζου) — την ίδια αρμονία με την κεφαλίδα και το ευρετήριο. Οι
   απαντήσεις μένουν λευκές, οπότε η διαφορά διαβάζεται με μια ματιά. */
.list.φόρουμ .talkpost.πρώτο{background:#f4efeb}
.list.φόρουμ .talkpost.πρώτο:hover{background:#f4efeb}

/* Η κλιμακωτή στοίχιση ισχύει μόνο στο πάνελ συζήτησης ενός τραγουδιού. */
.συζ-πάνελ .talkpost, #detailview .talkpost{margin-left:2.4rem}
.συζ-πάνελ .talkpost.πρώτο, #detailview .talkpost.πρώτο{margin-left:0}
@media(max-width:600px){
  .συζ-πάνελ .talkpost, #detailview .talkpost{margin-left:1rem}
}

/* Η εικόνα του μέλους πάνω από το αρχικό γράμμα. Το γράμμα μένει από κάτω ως
   υπόστρωμα, οπότε όποιος δεν έχει ανεβάσει τίποτα δεν βλέπει κενό κουτί. */
.tavatar{position:relative;overflow:hidden}
.tavatar-εικ{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;display:block}

/* ---------------- το πλαίσιο του ράδιου ----------------
   Ήταν στριμωγμένο: 11 πίξελ περιθώριο, και δύο στοιχεία κολλημένα στο κάτω
   χείλος — η γραμμή των παραγγελιών με διακεκομμένο περίγραμμα και από κάτω
   το κουμπί. Το «τι παίζει τώρα» χανόταν ανάμεσά τους, ενώ αυτό είναι το
   νόημα του πλαισίου: σχεδόν πάντα παίζει ένα τραγούδι, σπάνια υπάρχει ουρά. */
.radiobox{padding:14px 15px 15px;width:min(320px,calc(100vw - 36px))}
.radiobox .rb-head{margin-bottom:11px}

/* Ό,τι παίζει: μεγαλύτερο εξώφυλλο, τίτλος σε δική του γραμμή με βάρος. */
.rb-now{gap:12px;align-items:flex-start}
.rb-now img{width:56px;height:56px;border-radius:8px}
.rb-now > span{display:flex;flex-direction:column;gap:2px;min-width:0}
#rb-title{font-size:.98rem;font-weight:600;line-height:1.3;color:var(--ink);
  text-decoration:none;overflow:hidden;text-overflow:ellipsis}
#rb-title:hover{color:var(--accent)}
#rb-sub{font-size:.84rem;color:var(--ink-2);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis}
#rb-sub:hover{color:var(--accent)}
.rb-meta{font-size:.76rem;color:var(--ink-2);opacity:.85}

/* Οι παραγγελίες: σημείωση κάτω από το τραγούδι, όχι δεύτερο κουμπί. */
.rb-wishes{border-top:none;padding:0;margin-top:10px;font-size:.79rem;
  display:block}
.rb-play{margin-top:12px;min-height:40px;font-size:.88rem}

/* ---- τεκμήρια μέσα σε άρθρο ----
   Οι σελίδες των εφημερίδων όπως τυπώθηκαν, με το σχόλιο της καθεμιάς. Ίδια
   λογική με τα τεκμήρια των τραγουδιών: μικρογραφία που μεγεθύνεται. */
.wikiσώμα .τεκμ-πλέγμα{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px 16px;margin:0 0 1.4rem}
.wikiσώμα figure.τεκμ{margin:0;display:flex;flex-direction:column;gap:7px}
.wikiσώμα figure.τεκμ img{width:100%;height:auto;display:block;cursor:zoom-in;
  border:1px solid var(--line);border-radius:6px;background:#fff}
.wikiσώμα figure.τεκμ img:hover{border-color:var(--accent)}
.wikiσώμα figure.τεκμ figcaption{display:flex;flex-direction:column;gap:3px;
  font-size:.78rem;color:var(--ink-2);line-height:1.5;text-align:left;padding:0}
.wikiσώμα figure.τεκμ figcaption b{color:var(--ink);font-size:.8rem}

/* Το πορτρέτο στην κορυφή του άρθρου. */
.wikiσώμα figure.τεκμ-πορτρέτο{float:right;margin:0 0 1rem 1.4rem;
  max-width:min(230px,42%);display:flex;flex-direction:column;gap:6px}
.wikiσώμα figure.τεκμ-πορτρέτο img{width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:8px;background:#fff;cursor:zoom-in}
.wikiσώμα figure.τεκμ-πορτρέτο figcaption{font-size:.76rem;color:var(--ink-2);
  line-height:1.45}
@media(max-width:640px){
  .wikiσώμα figure.τεκμ-πορτρέτο{float:none;margin:0 auto 1.2rem;max-width:100%}
}

/* ── Το προφίλ του μέλους ────────────────────────────────────────────────
   Η ψηφίδα δείχνει την εικόνα του δίπλα στο όνομα — το γράμμα μέσα σε κύκλο
   δεν έλεγε τίποτε σε κανέναν. Πατώντας, ανοίγει το προφίλ· η έξοδος είναι
   μέσα, δεν γίνεται πια κατά λάθος. */
.chip.ψηφ-προφίλ{display:inline-flex;align-items:center;gap:.42rem;
  padding:.22rem .62rem .22rem .24rem}
.chip.ψηφ-προφίλ .tavatar{width:24px;height:24px;font-size:.72rem;
  box-shadow:0 0 0 2px var(--card,#fff)}
.ψηφ-όνομα{font-weight:600;max-width:11rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.umodal.προφίλ{text-align:center}
.umodal.προφίλ h2{margin-bottom:.9rem}
.πρ-όψη{display:flex;justify-content:center;margin:.2rem 0 1rem}
.πρ-αβατάρ{width:116px;height:116px;font-size:2.6rem;
  box-shadow:0 0 0 3px var(--card,#fff),0 0 0 4px rgba(140,47,30,.22)}
.πρ-κουμπιά{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.πρ-κουμπιά .btn{font-size:.86rem}
/* Η έξοδος δεν είναι ισότιμη με τις άλλες δύο: στέκεται πιο πίσω, χωριστή. */
.πρ-έξοδος{margin-left:auto;margin-right:auto;flex-basis:100%;
  margin-top:.55rem;opacity:.72}
.πρ-έξοδος:hover{opacity:1}
.πρ-αρχείο{display:none}
.πρ-μήνυμα{min-height:1.1em;margin:0 0 .7rem;opacity:.85}
.πρ-σημ{margin:.95rem 0 0;opacity:.6;line-height:1.45}

/* ── Τα στοιχεία μέσα στο προφίλ ─────────────────────────────────────────
   Τα νούμερα σε πλέγμα, με λεπτή γραμμή για διαχωρισμό αντί για γέμισμα.
   Οι φράσεις από κάτω: ό,τι δεν λέγεται με αριθμό. */
.umodal.προφίλ{width:min(24rem,94vw)}
.πρ-στοιχεία{text-align:left;margin:.2rem 0 1rem}
.πρ-από{margin:0 0 .85rem;font-size:.86rem;opacity:.7;text-align:center}
.πρ-μετρά{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 .9rem;
  border-top:1px solid rgba(140,47,30,.16)}
.πρ-μέτρο{display:flex;align-items:baseline;justify-content:space-between;
  gap:.6rem;padding:.4rem .1rem;border-bottom:1px solid rgba(140,47,30,.16)}
.πρ-μέτρο:nth-child(odd){padding-right:.9rem}
.πρ-μέτρο:nth-child(even){padding-left:.9rem;
  border-left:1px solid rgba(140,47,30,.16)}
.πρ-μέτρο dt{font-size:.79rem;opacity:.72;line-height:1.25}
.πρ-μέτρο dd{margin:0;font-weight:700;font-size:1.02rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.πρ-μεράκι{margin:0 0 .6rem;font-size:.88rem;line-height:1.55}
.πρ-μεράκι b{color:var(--accent,#8c2f1e)}
.πρ-πρώτο{margin:0 0 .55rem;font-size:.85rem;line-height:1.5;opacity:.9}
.πρ-πρώτο a,.πρ-σύνδεσμος a{color:var(--accent,#8c2f1e)}
.πρ-σύνδεσμος{margin:.2rem 0 0;font-size:.86rem}
.πρ-μεηλ{margin:.7rem 0 0;font-size:.78rem;opacity:.55;
  word-break:break-all;text-align:center}
@media (max-width:420px){.πρ-μετρά{grid-template-columns:1fr}
  .πρ-μέτρο:nth-child(even){padding-left:.1rem;border-left:0}
  .πρ-μέτρο:nth-child(odd){padding-right:.1rem}}

/* Το προφίλ γέμισε με στοιχεία και δεν χωράει πάντα στην οθόνη. Το φόντο
   είναι flex με align-items:center — και ό,τι δεν χωράει σε κεντραρισμένο
   flex κρύβεται ΚΑΙ από πάνω ΚΑΙ από κάτω, χωρίς τρόπο να το φτάσεις.
   Λύση: το φόντο κυλάει, και το κουτί κεντράρεται με margin:auto όσο
   χωράει — μόλις ψηλώσει, πιάνει την κορυφή και κυλάς κανονικά. */
#πρ-φόντο{align-items:flex-start;overflow-y:auto;overscroll-behavior:contain;
  padding:1rem 1rem 2rem}
#πρ-φόντο .umodal{margin:auto}
/* Σε κοντές οθόνες (κινητό οριζόντια, μικρά laptop) μαζεύει το αβατάρ. */
@media (max-height:700px){
  .πρ-αβατάρ{width:84px;height:84px;font-size:1.9rem}
  .πρ-όψη{margin:.1rem 0 .7rem}
  .umodal.προφίλ{padding-top:1.2rem}
}

/* ── Το ζωνάρι των παρόντων ──────────────────────────────────────────────
   Κλειστό: μια λαβή στο αριστερό άκρο με τρία αβατάρ και τον αριθμό.
   Ανοιχτό: κυλάει έξω το πάνελ. Το πλάτος της σελίδας δεν θυσιάζεται για
   κάτι που δεν κοιτάει κανείς συνέχεια. */
.παρ-ζωνάρι{position:fixed;left:0;top:50%;transform:translateY(-50%);
  z-index:40;display:flex;align-items:stretch;pointer-events:none}
.παρ-ζωνάρι>*{pointer-events:auto}

/* Λευκή λαβή με ακμή στο χρώμα της παλέτας — όχι κόκκινο ταμπελάκι. Το
   «θαμπό» το έλυσε η πιο σκούρη γραμμή και η πιο στέρεη σκιά, όχι το
   γέμισμα. */
.παρ-λαβή{display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:.85rem .5rem;background:var(--card,#fff);color:inherit;
  border:1px solid rgba(140,47,30,.45);border-left:0;
  border-right:4px solid var(--accent,#8c2f1e);
  border-radius:0 13px 13px 0;cursor:pointer;font:inherit;
  box-shadow:3px 3px 16px rgba(60,40,30,.26);
  transition:box-shadow .15s,padding-right .15s}
.παρ-λαβή:hover{padding-right:.8rem;box-shadow:5px 4px 24px rgba(60,40,30,.36)}
/* Κλειστό, κάθεται πίσω — αλλά όχι κρυμμένο όπως στην πρώτη απόπειρα.
   Στο πέρασμα του δείκτη και όσο είναι ανοιχτό, πλήρες. */
.παρ-ζωνάρι:not(.ανοιχτό) .παρ-λαβή{opacity:.74;transition:opacity .15s,
  box-shadow .15s,padding-right .15s}
.παρ-ζωνάρι:not(.ανοιχτό) .παρ-λαβή:hover,
.παρ-ζωνάρι:not(.ανοιχτό) .παρ-λαβή:focus-visible{opacity:1}
.παρ-λαβή:focus-visible{outline:3px solid #b8860b;outline-offset:2px}
.παρ-στοίβα{display:flex;flex-direction:column;gap:-4px}
.παρ-στοίβα .tavatar.παρ-μικρό{width:26px;height:26px;font-size:.72rem;
  box-shadow:0 0 0 2px var(--card,#fff),0 0 0 3px rgba(140,47,30,.35);
  margin-bottom:-7px}
.παρ-αριθμός{font-weight:700;font-size:1.02rem;font-variant-numeric:tabular-nums;
  color:var(--accent,#8c2f1e);margin-top:.15rem;line-height:1}
/* Μεγαλύτερο και πιο ευδιάκριτο, αλλά γωνιάκι και όχι γεμάτο τρίγωνο —
   ώστε να δείχνει κατεύθυνση χωρίς να βαραίνει. */
.παρ-βέλος{width:10px;height:10px;border:0 solid var(--accent,#8c2f1e);
  border-width:0 2px 2px 0;transform:rotate(-45deg);opacity:.9;
  margin:.15rem 3px 0 0;transition:transform .2s}
.παρ-ζωνάρι.ανοιχτό .παρ-βέλος{transform:rotate(135deg);margin:.15rem 0 0 3px}

.παρ-σώμα{width:0;overflow:hidden;background:var(--card,#fff);
  border:1px solid var(--line,#e0d8ca);border-left:0;border-radius:0 10px 10px 0;
  box-shadow:4px 4px 22px rgba(0,0,0,.14);opacity:0;
  transition:width .18s ease,opacity .18s ease,padding .18s ease;padding:0}
.παρ-ζωνάρι.ανοιχτό .παρ-σώμα{width:min(19.5rem,80vw);opacity:1;
  padding:.9rem 1rem 1rem;max-height:70vh;overflow-y:auto}
.παρ-ζωνάρι.ανοιχτό .παρ-λαβή{border-radius:0;box-shadow:none}

.παρ-τίτλος{margin:0 0 .6rem;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;opacity:.6}
.παρ-λίστα{list-style:none;margin:0 0 .7rem;padding:0;display:flex;
  flex-direction:column;gap:.45rem}
.παρ-λίστα li{display:flex;align-items:center;gap:.5rem}
.παρ-λίστα .tavatar{width:26px;height:26px;font-size:.75rem}
.παρ-όνομα{font-size:.9rem;color:inherit;text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.παρ-όνομα:hover{color:var(--accent,#8c2f1e)}
.παρ-κανείς,.παρ-επισκέπτες{margin:0 0 .7rem;font-size:.83rem;opacity:.7}
.παρ-κουβέντα{width:100%;justify-content:center}
.παρ-υπόμνηση{margin:.55rem 0 0;font-size:.76rem;opacity:.6;line-height:1.4}

/* Σε τηλέφωνο το αριστερό άκρο είναι ο αντίχειρας: το ζωνάρι κατεβαίνει
   χαμηλά, πάνω από το πλαίσιο του ράδιου, και μικραίνει. */
@media (max-width:760px){
  /* Ψηλότερα από το ζωνάρι του ράδιου: στο ίδιο ύψος και τα δύο, το ένα
     στοιβαζόταν πίσω από το άλλο και δεν φαινόταν. Και αρκετά πάνω από τον
     πάτο, ώστε να μην πέφτει στη μπάρα διευθύνσεων του φυλλομετρητή. */
  .παρ-ζωνάρι{top:auto;bottom:9.4rem;transform:none;z-index:71}
  .παρ-λαβή{padding:.5rem .3rem}
  .παρ-στοίβα .tavatar.παρ-μικρό{width:20px;height:20px;font-size:.62rem}
  .παρ-ζωνάρι.ανοιχτό .παρ-σώμα{width:min(13rem,68vw);max-height:50vh}
}
body.reading .παρ-ζωνάρι{display:none}
/* Όσο η κουβέντα είναι ανοιχτή, το ζωνάρι κάνει στην άκρη: μοιράζονται την
   ίδια γωνία και η κουβέντα έχει προτεραιότητα — εκεί μιλάει κανείς. */
/* Η κουβέντα άνοιγε ακριβώς πάνω στο ζωνάρι. Μετακινείται δεξιά όσο
   χρειάζεται για να χωρέσει η λαβή· σε τηλέφωνο δεν υπάρχει τέτοιο πλάτος,
   οπότε εκεί μαζεύεται το ζωνάρι. */
.κβ-πάνελ,.συζ-πάνελ{left:84px}
/* Ανοιχτό ζωνάρι: λαβή ~46px + πάνελ 15rem. Η κουβέντα ξεκινά μετά από
   αυτά — αλλιώς σκέπαζε ακριβώς τα ονόματα που μόλις άνοιξες για να δεις. */
body.ζωνάρι-ανοιχτό .κβ-πάνελ,
body.ζωνάρι-ανοιχτό .συζ-πάνελ{left:calc(46px + min(19.5rem,80vw) + 18px)}
/* Σε στενή οθόνη δεν χωρούν και τα δύο: το ζωνάρι μαζεύεται από το js. */
@media (max-width:980px){
  body.ζωνάρι-ανοιχτό .κβ-πάνελ,
  body.ζωνάρι-ανοιχτό .συζ-πάνελ{left:84px}
}
@media (max-width:760px){.κβ-πάνελ,.συζ-πάνελ{left:18px}}
.παρ-ζωνάρι.στην-άκρη .παρ-λαβή{opacity:1}
.παρ-ζωνάρι.στην-άκρη .παρ-λαβή:hover{opacity:1}
@media (max-width:760px){.παρ-ζωνάρι.στην-άκρη{display:none}}

/* ── Το ράδιο σε ζωνάρι, δεξιά ────────────────────────────────────────────
   Καθρέφτης του ζωναριού των παρόντων. Κλειστό: μια κουκκίδα που χτυπά, η
   λέξη «Ράδιο» κάθετα και πόσοι ακούνε. Ανοιχτό: το κουτί όπως ήταν πάντα,
   με το εξώφυλλο, τον τίτλο και το «Άκου».

   Γιατί άλλαξε: το κουτί ήταν μονίμως ανοιχτό κάτω δεξιά και έπιανε χώρο
   ακόμη κι όταν κανείς δεν άκουγε. */
.ρδ-ζωνάρι{position:fixed;right:0;top:50%;transform:translateY(-50%);
  z-index:70;display:flex;align-items:center;pointer-events:none}
.ρδ-ζωνάρι>*{pointer-events:auto}

.ρδ-λαβή{order:2;display:flex;flex-direction:column;align-items:center;
  gap:.5rem;padding:.9rem .5rem;background:var(--card,#fff);color:inherit;
  border:1px solid rgba(140,47,30,.45);border-right:0;
  border-left:4px solid var(--accent,#8c2f1e);
  border-radius:13px 0 0 13px;cursor:pointer;font:inherit;
  box-shadow:-3px 3px 16px rgba(60,40,30,.26);
  transition:box-shadow .15s,padding-left .15s,opacity .15s}
.ρδ-λαβή:hover{padding-left:.8rem;box-shadow:-5px 4px 24px rgba(60,40,30,.36)}
.ρδ-λαβή:focus-visible{outline:3px solid #b8860b;outline-offset:2px}
.ρδ-ζωνάρι:not(.ανοιχτό) .ρδ-λαβή{opacity:.74}
.ρδ-ζωνάρι:not(.ανοιχτό) .ρδ-λαβή:hover,
.ρδ-ζωνάρι:not(.ανοιχτό) .ρδ-λαβή:focus-visible{opacity:1}

/* Η λέξη κάθετα: το ζωνάρι είναι στενό, ο οριζόντιος χώρος πολύτιμος. */
.ρδ-κάθετο{writing-mode:vertical-rl;text-orientation:mixed;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2,#6b6055)}
.ρδ-ακροατές{font-weight:700;font-size:.95rem;color:var(--accent,#8c2f1e);
  font-variant-numeric:tabular-nums;line-height:1}
.ρδ-ακροατές:empty{display:none}
.ρδ-κουκκίδα{width:8px;height:8px;border-radius:50%}
.ρδ-βέλος{width:10px;height:10px;border:0 solid var(--accent,#8c2f1e);
  border-width:0 2px 2px 0;transform:rotate(135deg);opacity:.9;
  margin:0 0 .1rem 3px;transition:transform .2s}
.ρδ-ζωνάρι.ανοιχτό .ρδ-βέλος{transform:rotate(-45deg);margin-left:0;margin-right:3px}

/* Το κουτί κυλάει μέσα από το άκρο. */
.ρδ-ζωνάρι .radiobox{order:1;position:static;right:auto;bottom:auto;
  width:0;padding:0;border:0;border-radius:14px 0 0 14px;overflow:hidden;
  opacity:0;box-shadow:none;
  transition:width .18s ease,opacity .18s ease,padding .18s ease}
.ρδ-ζωνάρι.ανοιχτό .radiobox{width:min(20rem,78vw);opacity:1;
  padding:14px 15px 15px;border:1px solid var(--line,#e0d8ca);border-right:0;
  border-top:3px solid var(--accent,#8c2f1e);
  box-shadow:-4px 4px 22px rgba(35,29,24,.22)}
.ρδ-ζωνάρι.ανοιχτό .ρδ-λαβή{border-radius:0;box-shadow:none}
/* Το ✕ έκρυβε ολόκληρο το κουτί· τώρα απλώς το μαζεύει. */
.ρδ-ζωνάρι .rb-hide{display:none}

@media (max-width:760px){
  /* Ένα σημείο αναφοράς για λαβή και κουτί: ο πάτος της οθόνης, συν το ύψος
     του παίκτη όταν υπάρχει (αλλιώς μηδέν). Πριν, η λαβή αγκίστρωνε σε
     ποσοστό και το κουτί σε άλλο — γι' αυτό χώριζαν και κοβόταν η μία. */
  .ρδ-ζωνάρι{top:auto;bottom:calc(var(--ύψος-παίκτη,0px) + 1.1rem);
    transform:none}
  .ρδ-λαβή{padding:.6rem .35rem;gap:.35rem}
  .ρδ-ζωνάρι.ανοιχτό .radiobox{width:min(17rem,72vw)}
}
body.reading .ρδ-ζωνάρι{display:none}

/* ── Τα ζωνάρια όσο διαβάζεις τραγούδι ────────────────────────────────────
   Κρύβονταν εντελώς, που σήμαινε ότι μπαίνοντας σε τραγούδι έχανες και τους
   παρόντες και το ράδιο. Τώρα μένουν — μαζεμένα, και μετακινημένα ώστε να
   μη συναντήσουν τον παίκτη, που κάθεται κάτω αριστερά. */
body.reading .παρ-ζωνάρι,
body.reading .ρδ-ζωνάρι{display:flex}
body.reading .παρ-ζωνάρι.ανοιχτό .παρ-σώμα,
body.reading .ρδ-ζωνάρι.ανοιχτό .radiobox{max-height:52vh}

/* Με ανοιχτό παίκτη, το αριστερό ζωνάρι ΑΓΚΙΣΤΡΩΝΕΤΑΙ πάνω από αυτόν.
   Το ποσοστό (38%) δεν αρκούσε: με το ζωνάρι ανοιχτό το πάνελ είναι ψηλό
   και κατέβαινε πάλι μέσα στον παίκτη. Εδώ το κάτω άκρο του ζωναριού
   ξεκινά ακριβώς πάνω από την κορυφή του — όσο ψηλός κι αν είναι. */
/* Ο παίκτης κάθεται κάτω αριστερά και μπορεί να φτάσει τα 600 pixel — στην
   ίδια στήλη με το ζωνάρι. Δύο απόπειρες απέτυχαν: το ποσοστό (38%) άφηνε
   το ανοιχτό πάνελ να κατεβαίνει μέσα του, και η αγκίστρωση από κάτω το
   εκτόξευε έξω από την οθόνη όταν ο παίκτης ψήλωνε.

   Εδώ το ζωνάρι πιάνει την ΚΟΡΥΦΗ, και το ύψος του κόβεται σε ό,τι μένει
   πάνω από τον παίκτη. Όσο ψηλός κι αν γίνει εκείνος, ο χώρος μοιράζεται
   χωρίς επικάλυψη· αν στενέψει πολύ, το πάνελ κυλάει μέσα του. */
body.με-παίκτη .παρ-ζωνάρι{
  /* Στα 14px κολλούσε στην κορυφή. Κατεβαίνει κάτω από την κεφαλίδα όταν
     υπάρχει χώρος, και ανεβαίνει μόνο όσο χρειάζεται αν ο παίκτης ψηλώσει. */
  top:min(96px, max(14px, calc(100vh - var(--ύψος-παίκτη,300px) - 300px)));
  bottom:auto;transform:none;
  max-height:max(150px, calc(100vh - var(--ύψος-παίκτη,300px) - 130px))}
body.με-παίκτη .παρ-ζωνάρι .παρ-σώμα{
  max-height:max(120px, calc(100vh - var(--ύψος-παίκτη,300px) - 176px))}
@media (max-width:760px){
  /* Το ζωνάρι των παρόντων δεν υπάρχει στο κινητό — μόνο η οριζόντια
     γραμμή. Το ράδιο ανεβαίνει μόνο του με τον υπολογισμό παραπάνω. */
}

/* ── Η λαβή του ράδιου, πιο παρούσα σε οθόνη υπολογιστή ─────────────────── */
@media (min-width:761px){
  .ρδ-λαβή{padding:1.15rem .62rem;gap:.6rem;
    box-shadow:-3px 3px 20px rgba(60,40,30,.32)}
  .ρδ-κάθετο{font-size:.78rem;letter-spacing:.14em}
  .ρδ-ακροατές{font-size:1.08rem}
  .ρδ-κουκκίδα{width:10px;height:10px}
  .ρδ-ζωνάρι:not(.ανοιχτό) .ρδ-λαβή{opacity:.88}
}

/* ── Ο παίκτης και η γωνία κάτω αριστερά ──────────────────────────────────
   Βάζοντας το ράδιο από το δεξί ζωνάρι, ο παίκτης ανοίγει κάτω αριστερά —
   ακριβώς πάνω στην κουβέντα και στο ζωνάρι των παρόντων. Λύση: όσο ο
   παίκτης είναι εκεί, η κουβέντα ανεβαίνει ΠΑΝΩ από αυτόν. Το ύψος του το
   μετράει το js, γιατί αλλάζει όταν μαζεύεται. */
/* ΠΡΩΤΗ ΑΠΟΠΕΙΡΑ: η κουβέντα ανέβαινε πάνω από τον παίκτη. Σε κοντή οθόνη
   έμενε μια λωρίδα — άχρηστη. Καλύτερα δίπλα: ο παίκτης πιάνει 300px στη
   γωνία, η κουβέντα ξεκινά μετά από αυτόν και κρατά όλο της το ύψος. */
body.με-παίκτη .κβ-πάνελ,
body.με-παίκτη .συζ-πάνελ{
  left:max(84px, calc(var(--πλάτος-παίκτη,300px) + 36px))}
/* Με ανοιχτό και το ζωνάρι, όποιο από τα δύο σπρώχνει πιο μακριά. */
body.με-παίκτη.ζωνάρι-ανοιχτό .κβ-πάνελ,
body.με-παίκτη.ζωνάρι-ανοιχτό .συζ-πάνελ{
  left:max(calc(46px + min(19.5rem,80vw) + 18px),
           calc(var(--πλάτος-παίκτη,300px) + 36px))}

/* Κάτω από 980px δεν χωρούν πλάι-πλάι: εκεί η κουβέντα ανεβαίνει πάνω από
   τον παίκτη, με ό,τι ύψος περισσεύει. */
@media (max-width:980px){
  body.με-παίκτη .κβ-πάνελ,
  body.με-παίκτη .συζ-πάνελ{left:18px;
    bottom:calc(var(--ύψος-παίκτη,300px) + 28px);
    height:min(460px,calc(100vh - var(--ύψος-παίκτη,300px) - 80px))}
}

/* Και το ανοιχτό ζωνάρι δεν κατεβαίνει ως τον παίκτη. */

/* Και το ράδιο δεξιά: εκεί δεν υπάρχει παίκτης, αλλά αν το ζωνάρι είναι
   ανοιχτό και η οθόνη κοντή, να μη βγαίνει έξω από πάνω. */
body.με-παίκτη .ρδ-ζωνάρι.ανοιχτό .radiobox{max-height:70vh;overflow-y:auto}

/* Άνοιγμα του ράδιου από την κεφαλίδα: μια σύντομη λάμψη, ώστε το μάτι να
   βρει πού πήγε — αλλιώς πατάς «Ράδιο» και δεν φαίνεται να έγινε κάτι. */
.ρδ-ζωνάρι.τράβα-το-μάτι .radiobox{animation:ρδ-λάμψη 1.2s ease-out}
@keyframes ρδ-λάμψη{
  0%{box-shadow:-4px 4px 22px rgba(35,29,24,.22),0 0 0 0 rgba(140,47,30,.55)}
  35%{box-shadow:-4px 4px 22px rgba(35,29,24,.22),0 0 0 8px rgba(140,47,30,.22)}
  100%{box-shadow:-4px 4px 22px rgba(35,29,24,.22),0 0 0 0 rgba(140,47,30,0)}
}
@media (prefers-reduced-motion:reduce){
  .ρδ-ζωνάρι.τράβα-το-μάτι .radiobox{animation:none}
}

/* ── Η μπάρα του ράδιου μέσα στη λίστα ────────────────────────────────────
   Τα δύο κουμπιά μπαίνουν ΜΕΣΑ στη λευκή κάρτα των αποτελεσμάτων, που έχει
   overflow:hidden και μηδέν περιθώριο — οπότε κάθονταν κολλητά στην πάνω
   αριστερή γωνία της. Παίρνουν το ίδιο εσωτερικό περιθώριο με τους τίτλους
   των ενοτήτων (14px) και μια γραμμή που τα χωρίζει από ό,τι ακολουθεί. */
.list .acts.ραδιοπράξεις{padding:16px 14px;margin:0;
  border-bottom:1px solid var(--line);background:var(--card)}
.list .acts.ραδιοπράξεις .btn{min-height:46px}
/* Το πρώτο κεφάλαιο μετά τη μπάρα δεν χρειάζεται τη μεγάλη απόσταση: η
   γραμμή κάνει ήδη τον χωρισμό. */
.list .acts.ραδιοπράξεις + .radiosec{margin-top:16px}

/* «Παίζει τώρα» είναι ΕΝΑ τραγούδι, όχι λίστα — ο αριθμός «1» δίπλα του δεν
   μετράει τίποτα. Η γραμμή είναι η ίδια με του καταλόγου, οπότε ο αριθμός
   φεύγει εδώ και το κενό του το παίρνει το κουμπί. */
.row.rnow .num{display:none}

/* Η αφιέρωση δίπλα στο τραγούδι, στο κενό ανάμεσα στον τίτλο και στα
   στοιχεία του δίσκου — όχι σε δική της γραμμή από κάτω, που διαβαζόταν
   σαν δεύτερη εγγραφή. */
/* ΣΤΑΘΕΡΟ πλάτος, όχι «όσο χρειάζεται»: με ελεύθερο πλάτος το αριστερό
   άκρο κάθε αφιέρωσης εξαρτιόταν από το μήκος του τίτλου, οπότε οι
   διαδοχικές γραμμές δεν στοίχιζαν μεταξύ τους. Έτσι ξεκινούν όλες από
   την ίδια κολόνα. */
.row > .αφιέρωση.μέσα{grid-column:auto;margin:0 .8rem 0 .1rem;
  padding:.4rem .8rem .4rem .65rem;background:var(--card-2);border:0;
  border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
  flex:0 0 min(16rem,38%);min-width:0;order:9;
  display:flex;align-items:flex-start;gap:.55rem;line-height:1.34}
/* Τα στοιχεία του δίσκου κρατούν σταθερή κολόνα, ώστε το αριστερό άκρο της
   αφιέρωσης να μη χοροπηδά ανάμεσα σε γραμμές με και χωρίς αριθμό. */
@media(min-width:620px){
  .row:has(> .αφιέρωση.μέσα) .rmeta{flex:0 0 7.5rem;text-align:right}
}
/* Το γαρύφαλλο κρατά το χρώμα της παλέτας και στέκεται δίπλα στα λόγια,
   όχι μέσα τους. */
.αφ-σήμα{flex:0 0 auto;color:var(--accent);opacity:1;margin-top:1px;
  display:inline-flex}
.αφ-κείμενο{display:flex;flex-direction:column;gap:1px;min-width:0}
/* Ποιος το ζήτησε: μικρό, με το όνομα να ξεχωρίζει. */
.αφ-ποιος{font-size:.75rem;color:var(--ink-2);letter-spacing:.03em;
  font-weight:600}
/* Τα λόγια του: αυτά είναι το νόημα, οπότε παίρνουν το βάρος. Ως δύο
   γραμμές — μία έκοβε στη μέση ό,τι έγραψε κανείς. */
.αφ-λόγια{font-size:.86rem;color:var(--ink);font-style:italic;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
@media (max-width:820px){
  /* Δεν υπάρχει κενό: η γραμμή τυλίγεται και η αφιέρωση πέφτει από κάτω. */
  .row:has(> .αφιέρωση.μέσα){flex-wrap:wrap}
  .row > .αφιέρωση.μέσα{flex:0 0 100%;margin:.4rem 0 .1rem}
  .αφ-λόγια{-webkit-line-clamp:3}
}

/* ── Οι παρόντες μέσα στη ροή, για το κινητό ──────────────────────────────
   Το αιωρούμενο ζωνάρι δεν φαινόταν σε τηλέφωνο: στα λίγα εκατοστά πάνω από
   τον πάτο περνά η μπάρα του φυλλομετρητή, και από πάνω του κάθεται ο
   παίκτης. Εδώ είναι κανονικό στοιχείο της σελίδας — δεν το σκεπάζει τίποτα. */
.παρ-γραμμή{display:none}
@media (max-width:760px){
  .παρ-ζωνάρι{display:none}
  .παρ-γραμμή{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
    margin:0 0 .7rem;padding:.55rem .7rem;background:var(--card);
    border:1px solid var(--line);border-left:3px solid var(--accent);
    border-radius:0 10px 10px 0;font-size:.84rem}
  .παργ-στοίβα{display:flex;flex:0 0 auto}
  .παργ-στοίβα .tavatar.παργ-μικρό{width:24px;height:24px;font-size:.7rem;
    margin-right:-7px;box-shadow:0 0 0 2px var(--card)}
  .παργ-λέξη{flex:1 1 8rem;min-width:0;color:var(--ink-2);line-height:1.35}
  .παργ-κουβ{flex:0 0 auto;font:inherit;font-size:.82rem;font-weight:600;
    padding:.35rem .8rem;border-radius:8px;cursor:pointer;
    border:1px solid var(--accent);background:transparent;color:var(--accent)}
  .παργ-κουβ:active{background:var(--accent);color:#fff}
}

/* ── Στο κινητό ΜΟΝΟ η οριζόντια γραμμή ───────────────────────────────────
   Το πλάγιο ζωνάρι επανερχόταν γιατί το «.παρ-ζωνάρι{display:none}» έχανε
   σε ειδικότητα από τα «body.reading .παρ-ζωνάρι» και «body.με-παίκτη
   .παρ-ζωνάρι» που ορίστηκαν παραπάνω. Εδώ γράφονται όλες οι μορφές, στο
   τέλος του αρχείου, ώστε να μη μένει περιθώριο. */
@media (max-width:760px){
  .παρ-ζωνάρι,
  body.reading .παρ-ζωνάρι,
  body.με-παίκτη .παρ-ζωνάρι,
  .παρ-ζωνάρι.ανοιχτό{display:none !important}
}

/* ── Το ράδιο στο κινητό: ανοίγει ΠΑΝΩ από τη λαβή, όχι πλάι ─────────────
   Το πλάγιο κύλισμα (width από 0) δεν άνοιγε ποτέ σε τηλέφωνο. Αντί να
   ψάχνω ποιος κανόνας το ακύρωνε, εδώ το κουτί τοποθετείται μόνο του:
   δική του θέση, δικό του πλάτος, εμφάνιση με διαφάνεια. Τίποτα δεν
   εξαρτάται από το flex του ζωναριού. */
@media (max-width:760px){
  /* Φύλλο που ανοίγει από τον πάτο, σε ΟΛΟ το πλάτος. Το κουτί στα δεξιά
     σπρωχνόταν εκτός οθόνης όταν ο παίκτης ψήλωνε — εδώ πιάνει και τα δύο
     άκρα, οπότε δεν έχει πού να ξεφύγει. */
  .ρδ-ζωνάρι .radiobox{display:block;position:fixed;left:8px;right:8px;
    width:auto;bottom:calc(var(--ύψος-παίκτη,0px) + 1.1rem + 76px);
    padding:12px 13px 13px;opacity:0;pointer-events:none;
    transform:translateY(10px);
    border:1px solid var(--line);border-top:3px solid var(--accent);
    border-radius:12px;box-shadow:0 14px 34px rgba(35,29,24,.32);
    max-height:52vh;overflow-y:auto;
    transition:opacity .18s ease,transform .18s ease}
  .ρδ-ζωνάρι.ανοιχτό .radiobox{opacity:1;pointer-events:auto;transform:none}
  .ρδ-ζωνάρι.ανοιχτό .ρδ-λαβή{border-radius:13px 0 0 13px}
  .ρδ-λαβή{padding:.7rem .45rem}
}

/* Το «hidden» δεν έπιανε: οι κανόνες display:flex/block του ζωναριού το
   ακυρώνουν. Ρητά, με τη μορφή που δεν αφήνει περιθώριο. */
.ρδ-ζωνάρι[hidden]{display:none !important}
.ρδ-ζωνάρι[hidden] .radiobox{display:none !important}

/* ── Αριστερά οι άνθρωποι, δεξιά ο ήχος ───────────────────────────────────
   Ο παίκτης άνοιγε κάτω αριστερά — στην ίδια στήλη με το ζωνάρι των
   παρόντων και την κουβέντα. Τρεις γύροι διορθώσεων προσπάθησαν να τους
   χωρέσουν όλους εκεί. Η πραγματική λύση είναι να μη μοιράζονται πλευρά:
   ο ήχος πάει δεξιά, μαζί με το ράδιο που τον ξεκινά.

   Σε τηλέφωνο μένει όπου ήταν: εκεί δεν υπάρχουν δύο πλευρές. */
@media (min-width:761px){
  .player{left:auto;right:18px}
  /* Το ζωνάρι του ράδιου ανεβαίνει πάνω από τον παίκτη, με τον ίδιο
     υπολογισμό που χρησιμοποιεί και το αριστερό. */
  body.με-παίκτη .ρδ-ζωνάρι{
    top:min(96px, max(14px, calc(100vh - var(--ύψος-παίκτη,300px) - 300px)));
    bottom:auto;transform:none;
    max-height:max(150px, calc(100vh - var(--ύψος-παίκτη,300px) - 130px))}
  body.με-παίκτη .ρδ-ζωνάρι .radiobox{
    max-height:max(120px, calc(100vh - var(--ύψος-παίκτη,300px) - 176px));
    overflow-y:auto}

  /* Το αριστερό ζωνάρι δεν έχει πια λόγο να μετακινείται: η στήλη του
     είναι ελεύθερη. Επιστρέφει στο κέντρο. */
  body.με-παίκτη .παρ-ζωνάρι{top:50%;bottom:auto;
    transform:translateY(-50%);max-height:82vh}
  body.με-παίκτη .παρ-ζωνάρι .παρ-σώμα{max-height:70vh}

  /* Και η κουβέντα ξαναπιάνει τη γωνία της, χωρίς να παραμερίζει τον
     παίκτη — εκείνος δεν είναι πια εκεί. */
  body.με-παίκτη .κβ-πάνελ,
  body.με-παίκτη .συζ-πάνελ{left:84px;bottom:18px}
  body.με-παίκτη.ζωνάρι-ανοιχτό .κβ-πάνελ,
  body.με-παίκτη.ζωνάρι-ανοιχτό .συζ-πάνελ{
    left:calc(46px + min(19.5rem,80vw) + 18px)}
}

/* ── Σελίδα αρχείου ───────────────────────────────────────────────────────
   2.283 σελίδες του wiki περιγράφουν μια ανεβασμένη εικόνα. Έδειχναν μόνο
   τη λεζάντα — τα πάντα εκτός από το ίδιο το πράγμα. */
.αρχ-κάρτα{margin:0 0 1.4rem;padding:0;display:flex;flex-direction:column;
  align-items:flex-start;gap:.7rem}
.αρχ-εικ{display:block;max-width:100%;line-height:0;cursor:zoom-in;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--card-2);box-shadow:0 4px 18px rgba(35,29,24,.14);
  transition:box-shadow .15s}
.αρχ-εικ:hover{box-shadow:0 6px 26px rgba(35,29,24,.24)}
.αρχ-εικ img{display:block;max-width:100%;max-height:70vh;height:auto}
.αρχ-λήψη{align-self:flex-start}
.αρχ-λεζ{display:flex;flex-wrap:wrap;gap:.2rem .8rem;font-size:.83rem;
  color:var(--ink-2);padding:0}
.αρχ-στοιχ{font-variant-numeric:tabular-nums}
.αρχ-χρήση{margin-top:.3rem;font-size:.88rem}
.αρχ-χρήση b{display:block;font-size:.76rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-2);margin-bottom:.3rem;font-weight:600}
.αρχ-χρήση ul{list-style:none;margin:0;padding:0;display:flex;
  flex-wrap:wrap;gap:.35rem .8rem}
.αρχ-χρήση a{color:var(--accent)}

/* ── Μόλις ανέβηκαν ───────────────────────────────────────────────────────
   Οριζόντια σειρά που κυλάει, πριν από τον κατάλογο. Δείχνει ότι το αρχείο
   κινείται — ο κατάλογος από κάτω είναι ταξινομημένος αλλιώς και δεν το
   έλεγε. */
.μόλις{margin:0 0 1.1rem}
.μόλις h2{font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--accent);margin:0 0 .55rem;font-weight:700}
.μόλις-σειρά{display:flex;gap:.6rem;overflow-x:auto;padding-bottom:.35rem;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.μόλις-σειρά::-webkit-scrollbar{height:6px}
.μόλις-σειρά::-webkit-scrollbar-thumb{background:rgba(140,47,30,.28);
  border-radius:3px}
.μόλις-κάρτα{flex:0 0 auto;width:8.6rem;scroll-snap-align:start;
  display:flex;flex-direction:column;gap:.4rem;padding:.5rem;cursor:pointer;
  font:inherit;text-align:left;color:inherit;background:var(--card);
  border:1px solid var(--line);border-radius:10px;
  transition:border-color .15s,box-shadow .15s}
.μόλις-κάρτα:hover{border-color:var(--accent);
  box-shadow:0 4px 16px rgba(35,29,24,.16)}
.μόλις-εικ{width:100%;aspect-ratio:1;border-radius:7px;overflow:hidden;
  background:var(--card-2);flex:0 0 auto}
.μόλις-εικ img{width:100%;height:100%;object-fit:cover;display:block}
.μόλις-κ{display:flex;flex-direction:column;gap:1px;min-width:0}
.μόλις-τίτλος{font-size:.83rem;font-weight:600;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.μόλις-υπο{font-size:.75rem;color:var(--ink-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){.μόλις-κάρτα{width:7.4rem}}

/* ── Η παραγγελία μέσα στον παίκτη ────────────────────────────────────────
   Το ράδιο ακουγόταν σαν αυτόματη λίστα. Λέγοντας ότι αυτό που παίζει το
   ζήτησε κάποιος — και ότι άλλοι περιμένουν — γίνεται παιχνίδι. */
.pafier{display:flex;flex-direction:column;gap:2px;margin-top:5px;
  font-size:.79rem;line-height:1.35}
.παφ-κύριο{color:var(--ink-2)}
.παφ-σήμα{color:var(--accent);display:inline-flex;vertical-align:-3px;
  margin-right:2px}
.παφ-λόγια{color:var(--ink);font-style:italic;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.παφ-ουρά{align-self:flex-start;margin-top:3px;font:inherit;font-size:.75rem;
  font-weight:600;padding:.2rem .55rem;cursor:pointer;border-radius:99px;
  border:1px solid var(--accent);background:transparent;color:var(--accent)}
.παφ-ουρά:hover{background:var(--accent);color:#fff}
.player.mini .pafier{display:none}

/* Η ενότητα στην οποία μόλις προσγειώθηκες: μια σύντομη λάμψη, ώστε το μάτι
   να ξέρει γιατί μετακινήθηκε η σελίδα. */
.radiosec.τράβα-το-μάτι h2{animation:ρδ-τόνος 1.4s ease-out}
@keyframes ρδ-τόνος{
  0%{background:rgba(184,134,11,.35)}
  100%{background:transparent}
}
.radiosec.τράβα-το-μάτι h2{border-radius:5px;padding:2px 6px;margin-left:-6px}
@media (prefers-reduced-motion:reduce){
  .radiosec.τράβα-το-μάτι h2{animation:none}
}

/* Ποιος το ζήτησε, μέσα στο κουτί του ράδιου. Στο κινητό αυτό είναι το μόνο
   που βλέπει κανείς όταν ανοίγει το ζωνάρι. */
.rb-ζητ{display:block;margin-top:4px;font-size:.78rem;color:var(--accent);
  font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}