/* ============================================================
   Αρχείο 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:.15rem;
  flex:0 0 auto}
.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){
  #u-chat .ετ{display:none}
  .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 εικονοστοιχείων. */

/* Η κεφαλίδα γίνεται ζώνη, όχι άλλη μια λευκή κάρτα. */
.list.φόρουμ .talkhead{background:var(--card-2);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);margin-left:2.4rem;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}
.wikiγρ{display:grid;grid-template-columns:6.5rem 10rem 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}
.wikiγρ:nth-child(even){background:var(--card-2)}
.wikiημ{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.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:12px 20px 12px 17px;
  border-bottom:1px solid var(--line);border-left:3px solid transparent;
  transition:border-left-color .14s}
.ευρ-λίστα > .ευρ-γρ:last-child{border-bottom:0}

/* Ρυθμός αντί για χρώμα. Μια ενότητα με 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:6px;min-width:0}
.ευρ-γρ-τ{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}