/* plex_guide_solo — the guide's own palette and type, without covers.
   Tokens are plex_guide.py's, so the two read as one thing. */
:root{
  --ink:#17161c; --ink-2:#4a4754; --ink-3:#6e6b7a;
  --ground:#f7f5f0; --card:#fffefb; --line:#e2ded4;
  --accent:#8c3b1e; --accent-soft:#f0e3dc; --on-accent:#fff;
  --deep:#3f6b52; --some:#6f6c38; --thin:#7d6a35;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#eceaf2; --ink-2:#b3afbe; --ink-3:#8a8598;
  --ground:#131218; --card:#1c1a22; --line:#302d3a;
  --accent:#e0855f; --accent-soft:#2e2119; --on-accent:#17161c;
  --deep:#6fae8a; --some:#b7b26a; --thin:#c99a5c;
}}
:root[data-theme="dark"]{
  --ink:#eceaf2; --ink-2:#b3afbe; --ink-3:#8a8598;
  --ground:#131218; --card:#1c1a22; --line:#302d3a;
  --accent:#e0855f; --accent-soft:#2e2119; --on-accent:#17161c;
  --deep:#6fae8a; --some:#b7b26a; --thin:#c99a5c;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font:16px/1.55 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
.wrap{max-width:1080px;margin:0 auto;padding:48px 24px 96px}
h1{font-size:2.6rem;line-height:1.08;margin:0 0 .3em;letter-spacing:-.02em;text-wrap:balance}
.lede{font-size:1.12rem;color:var(--ink-2);max-width:34em;margin:0 0 2em}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.8rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.hint{font-size:.86rem;color:var(--ink-3);margin:0 0 14px;max-width:46em}
.hint b{color:var(--ink-2)}

.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin:0 0 26px;
  overflow-x:auto;overflow-y:hidden;padding-bottom:1px}
.tabs button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  font:inherit;font-size:.98rem;color:var(--ink-3);padding:9px 9px;margin-bottom:-1px;
  white-space:nowrap;flex:0 0 auto;cursor:pointer}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Five doors came to 372px in a 375px phone's 343px column and cut "A place"
   off at the edge; at .9rem with 5px sides they fit. */
@media (max-width:440px){ .tabs button{padding:9px 5px;font-size:.9rem} }
.panel[hidden]{display:none}

/* the strip: one bar per day of the year, the whole height a hit target */
.daystrip{display:flex;align-items:stretch;height:64px;margin:6px 0 0}
.daystrip button{flex:1 1 0;min-width:0;height:100%;padding:0 0 6px;border:0;background:none;
  cursor:pointer;display:flex;align-items:flex-end}
.daystrip i{display:block;width:100%;min-height:2px;background:var(--ink-3);opacity:.45;
  border-radius:1px 1px 0 0}
.daystrip button:hover i{opacity:.8}
.daystrip button.inweek i{background:var(--accent);opacity:.45}
.daystrip button[aria-pressed="true"]{background:linear-gradient(var(--accent),var(--accent))
  bottom/100% 3px no-repeat}
.daystrip button[aria-pressed="true"] i{background:var(--accent);opacity:1}
.daystrip button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.dayaxis{position:relative;height:1.4em;margin:4px 0 14px;border-top:1px solid var(--line)}
.dayaxis span{position:absolute;top:3px;transform:translateX(-50%)}
@media (max-width:560px){ .dayaxis .alt{display:none} }

.pick{display:flex;gap:8px;align-items:center;margin:0 0 14px;flex-wrap:wrap}
.pick select{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:3px;
  background:var(--card);color:var(--ink)}
.pick .step{appearance:none;font:inherit;font-size:1.2rem;line-height:1;width:2.2em;height:2.1em;
  border:1px solid var(--line);border-radius:3px;background:var(--card);color:var(--ink);cursor:pointer}
.pick .step.wide{width:auto;padding:0 .8em;font-size:.9rem}
.scope{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.scope button{appearance:none;font:inherit;font-size:.86rem;background:none;cursor:pointer;
  border:1px solid var(--line);border-radius:3px;padding:5px 11px;color:var(--ink-2)}
.scope button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pick button:focus-visible,.scope button:focus-visible,.pick select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* the sound door */
.sliders{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:20px 22px}
.slider{display:grid;grid-template-columns:6.5em 1fr 6.5em;gap:14px;align-items:center;margin-bottom:13px}
.slider label{font-size:.86rem;color:var(--ink-3);text-align:right}
.slider label.hi{text-align:left}
.slider input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}
.slider input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.slider.low{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.lowread{display:flex;gap:10px;align-items:center;justify-content:center;margin:2px 0 0;min-height:2em}
.lowread button{appearance:none;font:inherit;font-size:.78rem;padding:3px 9px;border:1px solid var(--line);
  border-radius:3px;background:var(--card);color:var(--ink-2);cursor:pointer;text-transform:none;letter-spacing:0}
.scope select{font:inherit;font-size:.86rem;padding:5px 8px;border:1px solid var(--line);border-radius:3px;
  background:var(--card);color:var(--ink);max-width:14em}
@media (max-width:560px){
  .sliders{padding:16px 14px}
  .slider{grid-template-columns:4.6em 1fr 4.6em;gap:8px}
  .slider label{font-size:.78rem}
}

/* the year door: one bar per year, gaps kept so the strip is to scale in time */
.yearstrip{display:flex;align-items:stretch;gap:1px;height:88px;margin:6px 0 0}
.yearstrip button{flex:1 1 0;min-width:0;height:100%;padding:0 0 6px;border:0;background:none;
  cursor:pointer;display:flex;align-items:flex-end}
.yearstrip button:disabled{cursor:default}
.yearstrip i{display:block;width:100%;min-height:2px;background:var(--ink-3);opacity:.45;
  border-radius:2px 2px 0 0}
.yearstrip button:disabled i{min-height:0;height:0}
.yearstrip button:hover i{opacity:.8}
.yearstrip button[aria-pressed="true"]{background:linear-gradient(var(--accent),var(--accent))
  bottom/100% 3px no-repeat}
.yearstrip button[aria-pressed="true"] i{background:var(--accent);opacity:1}
.yearstrip button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* the place door */
.filter{display:block;width:100%;max-width:26em;font:inherit;padding:8px 11px;margin:0 0 14px;
  border:1px solid var(--line);border-radius:3px;background:var(--card);color:var(--ink)}
.filter:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.places{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}
.place{appearance:none;font:inherit;font-size:.9rem;cursor:pointer;background:var(--card);
  border:1px solid var(--line);border-radius:2px;padding:6px 11px;color:var(--ink)}
.place:hover{border-color:var(--accent)}
.place[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.place .n{color:var(--ink-3);font-size:.8rem;margin-left:6px;font-variant-numeric:tabular-nums}
.place[aria-pressed="true"] .n{color:var(--on-accent);opacity:.8}
.place:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.coverage{border:1px solid var(--line);border-radius:3px;margin:20px 0 0;background:var(--card);
  padding:13px 16px;display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline}
.coverage b{font-weight:600}
.coverage .n{color:var(--ink-3);font-size:.88rem;font-variant-numeric:tabular-nums}
.badge{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  padding:2px 8px;border-radius:2px;border:1px solid currentColor}
.b-deep{color:var(--deep)} .b-some{color:var(--some)} .b-thin{color:var(--thin)}

/* the hour door */
.nowstrip{margin:18px 0 6px}
.nowstrip svg{display:block;max-width:100%;overflow:visible}
.nowstrip .bar{fill:var(--ink-3)}
.nowstrip .bar.thin{fill:none;stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 2}
.nowstrip .bar.on{fill:var(--accent)}
.nowstrip .hit{fill:transparent;cursor:pointer}
.nowstrip .hit:hover + .bar, .nowstrip .hit:focus-visible + .bar{fill:var(--ink-2)}
.nowstrip .hit:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.nowstrip .zero{stroke:var(--line);stroke-width:1}
.nowstrip text{font:11px ui-monospace,"SF Mono",Menlo,monospace;fill:var(--ink-3)}
.nowstrip text.on{fill:var(--ink);font-weight:600}
.nowlead{font-size:1.05rem;line-height:1.55;max-width:62ch;margin:14px 0 0}
.nowlead b{font-weight:600}
.nownote{font-size:.86rem;color:var(--ink-3);max-width:66ch;margin:8px 0 0;line-height:1.55}
.section{margin:28px 0 0}

/* results: one section per year, one row per record */
.count{margin:24px 0 0}
.legend{display:flex;gap:10px;align-items:center;margin:6px 0 0;font-size:.82rem;color:var(--ink-3)}
.dayyear{margin-top:24px}
.dayyear h3{display:flex;align-items:baseline;gap:12px;margin:0;font-size:1.3rem;font-weight:600;
  border-bottom:1px solid var(--line);padding-bottom:5px}
.dayyear h3 .mono{font-size:.72rem}
.row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:4px 16px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line)}
.row[hidden]{display:none}
.row .title{font-size:1.08rem;line-height:1.3;text-wrap:balance}
.row .meta{font-size:.9rem;color:var(--ink-2);margin-top:1px}
.row .when{font-size:.8rem;color:var(--ink-3);margin-top:3px}
.row .when a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line)}
.row .when a:hover{color:var(--accent);border-bottom-color:currentColor}
.row .when a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.row .plays{font-size:.86rem;color:var(--ink-2);text-align:right;white-space:nowrap}
.row .plays small{display:block;font-size:.78rem;color:var(--ink-3)}
.row .plays em{font-style:normal;color:var(--accent)}
.mark{display:block}
.mark .base{stroke:var(--line);stroke-width:1}
.mark rect{fill:var(--accent)}
.mark rect.near{opacity:.4}
.mark.none text{fill:var(--ink-3);font:9px ui-monospace,Menlo,monospace}
.more{appearance:none;font:inherit;font-size:.86rem;background:none;border:0;color:var(--accent);
  cursor:pointer;padding:9px 0 0;border-bottom:1px solid transparent}
.more:hover{border-bottom-color:currentColor}
.more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.empty{padding:34px;text-align:center;color:var(--ink-3);background:var(--card);
  border:1px solid var(--line);border-radius:3px;margin-top:22px}
/* the lock */
.lock{max-width:30em;margin:0 0 2em;padding:20px 22px;background:var(--card);
  border:1px solid var(--line);border-radius:3px}
.lock > label{display:block;margin:0 0 10px}
.lock-row{display:flex;gap:8px}
.lock input[type=password]{flex:1;min-width:0;font:inherit;padding:7px 10px;border:1px solid var(--line);
  border-radius:3px;background:var(--ground);color:var(--ink)}
.lock button{appearance:none;font:inherit;padding:7px 16px;border:1px solid var(--accent);border-radius:3px;
  background:var(--accent);color:var(--on-accent);cursor:pointer}
.lock button:disabled{opacity:.6;cursor:progress}
.lock-keep{display:flex;gap:7px;align-items:center;margin:10px 0 0;font-size:.86rem;color:var(--ink-2)}
.lock-msg{margin:8px 0 0;font-size:.86rem;color:var(--accent);min-height:1.3em}
.lock input:focus-visible,.lock button:focus-visible,.relock:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.relock{appearance:none;font:inherit;font-size:inherit;background:none;border:0;padding:0;
  color:var(--ink-3);border-bottom:1px solid var(--line);cursor:pointer;margin-left:4px}
.relock:hover{color:var(--accent)}
.shape{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:.9rem;max-width:42em}
/* A phone: the plays move under the record rather than squeezing its title. */
@media (max-width:560px){
  .wrap{padding:32px 16px 72px}
  .coverage{grid-template-columns:1fr auto}
  .coverage .n{grid-column:1 / -1;grid-row:2}
  h1{font-size:2.1rem}
  .row{grid-template-columns:44px minmax(0,1fr)}
  .row .plays{grid-column:2;text-align:left;white-space:normal}
  .row .plays small{display:inline;margin-left:4px}
}