/* ============================================================================
   Epidaurus Review — application shell styles
   The editorial look is taken faithfully from the design reference; this file
   adds the production container, the reader view, the offline toggle, the
   refined palette switcher, and responsive behaviour.
   ========================================================================== */

:root{
  /* Ember (default) — warm cream, oxblood accent */
  --bg:#faf8f3; --ink:#15120e; --ink2:#5a544a; --ink3:#8e887c;
  --line:#16120c; --hair:#ddd6c8; --accent:#8a2b1c;
  --plate1:#b06a44; --plate2:#7a3f26; --plate3:#4a2615;
  --plate-hi:rgba(255,232,202,0.35); --plate-fg:#f6e9da; --glow:transparent; --veil:transparent;
  --card:rgba(0,0,0,0.02);
}

/* ── Dark science-magazine-cover themes ── */
body.dark{ background-image:radial-gradient(130% 85% at 84% -8%, var(--veil), transparent 60%); }
body.dark .fplate{ height:296px;
  box-shadow:0 0 90px -24px var(--glow), 0 26px 54px -26px rgba(0,0,0,0.75); }
body.dark .fplate .cap{ text-shadow:0 1px 14px rgba(0,0,0,0.5); }
body.dark .kicker{ text-shadow:0 0 22px var(--glow); }
body.dark{ --card:rgba(255,255,255,0.03); }

/* Persimmon · cool teal ground + warm coral spark */
body.pal-persimmon{
  --bg:#0c1a1b; --ink:#ece5d7; --ink2:#94a09a; --ink3:#5b6962;
  --line:#ece5d7; --hair:#1a2928; --accent:#ff6a45;
  --plate1:#ff7a4e; --plate2:#c23f5a; --plate3:#0e2f30;
  --plate-hi:rgba(255,200,150,0.45); --plate-fg:#fff0e6;
  --glow:rgba(255,106,69,0.40); --veil:rgba(255,106,69,0.07);
}
/* Chartreuse Noir · warm oxblood ground + acid chartreuse */
body.pal-chartreuse{
  --bg:#180d0c; --ink:#ece3d0; --ink2:#a89c88; --ink3:#6b5f50;
  --line:#ece3d0; --hair:#2a1917; --accent:#c6e84a;
  --plate1:#bce23f; --plate2:#5f8a2e; --plate3:#3a1311;
  --plate-hi:rgba(220,255,150,0.40); --plate-fg:#f2fbdc;
  --glow:rgba(198,232,74,0.32); --veil:rgba(198,232,74,0.06);
}
/* Slate & Brass · cool slate neutral ground + warm brass */
body.pal-slate{
  --bg:#0f1319; --ink:#e7e7e2; --ink2:#969ea8; --ink3:#5a626c;
  --line:#e7e7e2; --hair:#1c222b; --accent:#d6a23a;
  --plate1:#d8ad4a; --plate2:#9c6f3a; --plate3:#161c26;
  --plate-hi:rgba(255,225,160,0.42); --plate-fg:#fdf1d8;
  --glow:rgba(214,162,58,0.30); --veil:rgba(214,162,58,0.06);
}
/* Sulphur · neutral warm-black ground + sulphur yellow, violet in the plate */
body.pal-sulphur{
  --bg:#131211; --ink:#ece8df; --ink2:#a39e92; --ink3:#655f57;
  --line:#ece8df; --hair:#25221e; --accent:#efc92a;
  --plate1:#f2cf30; --plate2:#6a4bc4; --plate3:#241a44;
  --plate-hi:rgba(255,240,170,0.45); --plate-fg:#fff7d8;
  --glow:rgba(239,201,42,0.30); --veil:rgba(118,80,200,0.08);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:'Work Sans',system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  min-height:100vh; min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease,color .25s ease;
}
::selection{background:var(--accent);color:#fff;}
a{color:inherit;}

/* centered, fluid production container */
.shell{
  max-width:1320px; margin:0 auto;
  padding:clamp(20px,4vw,42px) clamp(18px,4vw,56px);
  display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;
}

/* ── masthead ─────────────────────────────────────────────────────────── */
.mast{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  flex-wrap:wrap;border-bottom:3px solid var(--line);padding-bottom:14px;}
.mast h1{font-family:'Playfair Display',serif;font-weight:800;
  font-size:clamp(2.2rem,6vw,3.5rem);line-height:0.9;letter-spacing:-0.01em;}
.mast .sub{font-size:0.72rem;letter-spacing:0.32em;text-transform:uppercase;color:var(--ink2);margin-top:8px;}
.mast-right{display:flex;flex-direction:column;align-items:flex-end;gap:13px;}
.issue{text-align:right;font-size:0.74rem;color:var(--ink2);line-height:1.7;letter-spacing:0.04em;}
.issue b{font-family:'Playfair Display',serif;font-weight:600;font-size:1rem;color:var(--ink);}

/* refined palette switcher */
.palette{display:flex;align-items:center;gap:10px;}
.palette .pname{font-family:'Playfair Display',serif;font-style:italic;font-size:0.9rem;
  color:var(--ink2);min-width:84px;text-align:right;
  transition:color .15s;}
.palette .pmode{display:inline-flex;color:var(--ink3);}
.palette .pmode svg{width:14px;height:14px;display:block;}
.swatches{display:flex;align-items:center;gap:8px;}
.swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;padding:0;
  border:1px solid var(--hair);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06);
  transition:transform .15s, box-shadow .15s;}
.swatch:hover{transform:scale(1.14);}
.swatch:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.swatch.active{outline:1.5px solid var(--ink);outline-offset:2.5px;border-color:transparent;}

/* ── nav ──────────────────────────────────────────────────────────────── */
nav{display:flex;gap:clamp(16px,2.5vw,30px);align-items:center;padding:13px 0;
  border-bottom:1px solid var(--line);flex-wrap:wrap;}
nav a{text-decoration:none;color:var(--ink2);font-size:0.82rem;font-weight:500;
  letter-spacing:0.04em;cursor:pointer;white-space:nowrap;transition:color .15s;}
nav a:hover{color:var(--ink);}
nav a.on{color:var(--accent);}
nav a.on::after{content:'';display:block;height:2px;background:var(--accent);margin-top:3px;}
nav .count{font-size:0.62rem;color:var(--ink3);vertical-align:super;margin-left:3px;}
nav .spacer{flex:1;min-width:12px;}
.search{display:flex;align-items:center;gap:8px;color:var(--ink3);}
.search svg{flex-shrink:0;}
.search input{border:0;background:transparent;outline:none;font-family:'Playfair Display',serif;
  font-style:italic;font-size:1rem;color:var(--ink);width:clamp(110px,18vw,170px);}
.search input::placeholder{color:var(--ink3);}

/* ── library body ─────────────────────────────────────────────────────── */
.body{flex:1;display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(28px,4vw,48px);
  padding-top:clamp(20px,3vw,30px);}

/* feature */
.feature{display:flex;flex-direction:column;}
.kicker{font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);
  font-weight:600;margin-bottom:14px;}
.feature h2{font-family:'Playfair Display',serif;font-weight:600;
  font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.0;letter-spacing:-0.01em;margin-bottom:18px;cursor:pointer;}
.feature .lead{font-size:1.02rem;line-height:1.6;color:var(--ink2);max-width:520px;}
.feature .lead .drop{font-family:'Playfair Display',serif;font-weight:600;}
.fmeta{display:flex;gap:18px;align-items:center;margin-top:16px;font-size:0.78rem;
  color:var(--ink3);flex-wrap:wrap;}
.fmeta .src{font-family:'Playfair Display',serif;font-style:italic;font-size:0.95rem;color:var(--accent);}
.fmeta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink3);}
.fplate{margin-top:auto;height:230px;position:relative;overflow:hidden;cursor:pointer;
  background:radial-gradient(125% 95% at 80% 12%, var(--plate-hi), transparent 58%),
    linear-gradient(125deg,var(--plate1) 0%,var(--plate2) 58%,var(--plate3) 100%);}
.fplate::after{content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,0.06) 0 2px,transparent 2px 12px);}
.fplate .cap{position:absolute;bottom:16px;left:18px;color:var(--plate-fg);
  font-family:'Playfair Display',serif;font-style:italic;font-size:1.05rem;}
.fplate .saved-flag{position:absolute;top:14px;right:14px;color:var(--plate-fg);
  font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;display:none;align-items:center;gap:5px;
  background:rgba(0,0,0,0.28);padding:4px 8px;}
.fplate.is-saved .saved-flag{display:inline-flex;}

/* contents list */
.contents{display:flex;flex-direction:column;}
.ct-head{font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink2);
  border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:6px;
  display:flex;justify-content:space-between;}
.entry{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid var(--hair);
  cursor:pointer;transition:padding-left .15s;}
.entry:hover{padding-left:6px;}
.entry .no{font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--ink3);
  width:38px;flex-shrink:0;line-height:1;transition:color .15s;}
.entry:hover .no{color:var(--accent);}
.entry .txt{flex:1;}
.entry .txt h4{font-family:'Playfair Display',serif;font-weight:600;font-size:1.28rem;
  line-height:1.1;margin-bottom:5px;color:var(--ink);}
.entry .txt p{font-size:0.8rem;color:var(--ink2);line-height:1.45;margin-bottom:7px;}
.entry .txt .em{display:flex;gap:14px;align-items:center;font-size:0.68rem;color:var(--ink3);
  letter-spacing:0.06em;text-transform:uppercase;flex-wrap:wrap;}
.entry .txt .em .tp{color:var(--accent);font-weight:600;}
.entry .txt .em .saved{display:inline-flex;align-items:center;gap:4px;color:var(--accent);}
.entry .txt .em .saved svg{width:10px;height:10px;}

.empty{padding:48px 0;color:var(--ink3);font-family:'Playfair Display',serif;
  font-style:italic;font-size:1.1rem;}

/* ── reader view ──────────────────────────────────────────────────────── */
.reader{position:fixed;inset:0;background:var(--bg);display:none;flex-direction:column;z-index:50;}
body.reading .reader{display:flex;}
body.reading{overflow:hidden;}

.reader-bar{display:flex;align-items:center;gap:14px;flex-shrink:0;
  padding:10px clamp(14px,3vw,26px);
  border-bottom:1px solid var(--line);background:var(--bg);position:relative;}
.reader-bar .back{display:inline-flex;align-items:center;gap:8px;background:none;border:0;
  cursor:pointer;color:var(--ink);font-family:'Work Sans',sans-serif;font-size:0.8rem;
  font-weight:500;letter-spacing:0.04em;padding:4px 0;}
.reader-bar .back svg{width:16px;height:16px;}
.reader-bar .back:hover{color:var(--accent);}
.reader-bar .rtitle{font-family:'Playfair Display',serif;font-size:1rem;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw;}
.reader-bar .rtopic{font-size:0.64rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--accent);font-weight:600;flex-shrink:0;}
.reader-bar .rsep{width:1px;height:18px;background:var(--hair);flex-shrink:0;}
.reader-bar .rspace{flex:1;}
.reader-bar .rmeta{font-size:0.7rem;color:var(--ink3);white-space:nowrap;flex-shrink:0;}

/* offline / save-for-offline toggle */
.offline-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:none;border:1px solid var(--hair);color:var(--ink2);
  padding:6px 12px;font-family:'Work Sans',sans-serif;font-size:0.72rem;
  letter-spacing:0.04em;font-weight:500;transition:.15s;white-space:nowrap;flex-shrink:0;}
.offline-toggle svg{width:15px;height:15px;flex-shrink:0;}
.offline-toggle:hover{border-color:var(--ink3);color:var(--ink);}
.offline-toggle.on{border-color:var(--accent);color:var(--accent);background:var(--card);}
.offline-toggle.busy{opacity:.6;pointer-events:none;}
.offline-toggle .lbl-on{display:none;}
.offline-toggle.on .lbl-off{display:none;}
.offline-toggle.on .lbl-on{display:inline;}

/* scroll-progress bar pinned to the bottom of the reader bar */
.reader-bar .progress{position:absolute;left:0;bottom:-1px;height:2px;width:0%;
  background:var(--accent);transition:width .08s linear;}

.reader-frame-wrap{flex:1;position:relative;overflow:hidden;background:#fff;}
.reader-frame{width:100%;height:100%;border:0;display:block;}

.reader-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--ink3);font-family:'Playfair Display',serif;font-style:italic;font-size:1rem;
  background:var(--bg);}

/* a small "you're offline" ribbon */
.netstate{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--bg);font-size:0.72rem;letter-spacing:0.04em;
  padding:8px 16px;z-index:80;display:none;box-shadow:0 6px 24px -8px rgba(0,0,0,.4);}
body.is-offline .netstate{display:block;}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width:900px){
  .body{grid-template-columns:1fr;}
  .feature{order:1;}
  .contents{order:2;}
  .fplate{height:200px;margin-top:24px;}
  .mast-right{align-items:flex-start;width:100%;}
  .issue{text-align:left;}
  .palette .pname{text-align:left;min-width:0;}
}
@media (max-width:560px){
  nav{gap:14px;}
  .reader-bar .rtitle{max-width:40vw;font-size:0.9rem;}
  .reader-bar .rmeta,.reader-bar .rtopic{display:none;}
  .offline-toggle{padding:6px 10px;}
}