:root {
  --bg:#F5F7F6; --fg:#131A18; --ac:#0E6B5A;
  --ln:#DCE2E0; --ln2:#E9EDEB; --cell:#DEE5E2;
  --mut:#94A09C; --mid:#5A6562; --el:#FFFFFF; --sel:#EBF3F0; --bar:#EFF2F1;

  --k-show:#1F4E79; --k-anime:#A6401A; --k-movie:#5B3A8C;
  --k-book:#0F6B4F; --k-game:#8A5A14; --k-podcast:#6E6A2A;
  --k-course:#9C2E68;

  --sans:"Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cond:"Fira Sans Condensed", "Fira Sans", -apple-system, sans-serif;
  --mono:"Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;

  --cell-w:17px;
  --cell-h:30px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0D1211; --fg:#E9EFEC; --ac:#4ED3B5;
    --ln:#28322F; --ln2:#1C2523; --cell:#232C2A;
    --mut:#7E8B87; --mid:#A5B1AD; --el:#141B19; --sel:#14231F; --bar:#121917;

    --k-show:#5B9BD5; --k-anime:#E88A5C; --k-movie:#A98BD9;
    --k-book:#4FBF9A; --k-game:#D9A54E; --k-podcast:#BDB868;
    --k-course:#E58AB6;
  }
}

:root[data-theme="dark"] {
  --bg:#0D1211; --fg:#E9EFEC; --ac:#4ED3B5;
  --ln:#28322F; --ln2:#1C2523; --cell:#232C2A;
  --mut:#7E8B87; --mid:#A5B1AD; --el:#141B19; --sel:#14231F; --bar:#121917;

  --k-show:#5B9BD5; --k-anime:#E88A5C; --k-movie:#A98BD9;
  --k-book:#4FBF9A; --k-game:#D9A54E; --k-podcast:#BDB868;
    --k-course:#E58AB6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

.app { display: flex; min-height: 100vh; }

.sb {
  width: 232px;
  flex: 0 0 232px;
  border-right: 1px solid var(--ln);
  padding: 20px 0;
}

.br {
  padding: 0 20px 5px;
  font-family: var(--cond);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.br em { font-style: normal; color: var(--ac); }

.brs {
  padding: 0 20px 18px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mut);
  letter-spacing: .04em;
}

.gg {
  padding: 0 18px;
  margin: 19px 0 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mut);
}

.nv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 20px;
  color: var(--mid);
  font-size: 15px;
}
.nv b {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}
.nv.on { background: var(--fg); color: var(--bg); }
.nv.on b { color: var(--mut); }
.nv .d {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
  margin-right: 10px;
  vertical-align: 1px;
}

.k-show { background: var(--k-show); }
.k-anime { background: var(--k-anime); }
.k-movie { background: var(--k-movie); }
.k-book { background: var(--k-book); }
.k-game { background: var(--k-game); }
.k-podcast { background: var(--k-podcast); }
.k-course { background: var(--k-course); }

.mn { container-type: inline-size; flex: 1; min-width: 0; display: flex; flex-direction: column; }

.tp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  border-bottom: 1px solid var(--ln);
}
.q { flex: 1; color: var(--mut); font-family: var(--mono); font-size: 14px; }
.q em { font-style: normal; color: var(--ac); animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .q em { animation: none; } }

.kb {
  font-family: var(--mono);
  font-size: 11px;
  border: 1px solid var(--ln);
  border-radius: 3px;
  padding: 2px 6px;
  color: var(--mut);
}

.sum { display: flex; border-bottom: 1px solid var(--ln); background: var(--bar); overflow-x: auto; scrollbar-width: none; }
.sum::-webkit-scrollbar { display: none; }
.sum > div { flex: 0 0 auto; }
.sum div { padding: 13px 24px; border-right: 1px solid var(--ln2); }
.sum div:last-child { border-right: 0; margin-left: auto; text-align: right; }
.sum .n { font-family: var(--cond); font-size: 24px; font-weight: 700; line-height: 1; }
.sum .n s {
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mut);
  font-weight: 400;
  margin-left: 6px;
  letter-spacing: .05em;
}
.sum .u {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mut);
  margin-top: 5px;
  /* Three-line labels are worse than a bar that scrolls, and the panel takes a
     third of the width the moment it opens. */
  white-space: nowrap;
}

.gl {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mut);
}
.gl::after { content: ""; flex: 1; height: 1px; background: var(--ln2); }

.rw {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 70px minmax(0, 1fr) 140px 24px 32px;
  gap: 20px;
  align-items: center;
  padding: 13px 24px;
  border-bottom: 1px solid var(--ln2);
}
.rw.on { background: var(--sel); box-shadow: inset 2px 0 0 var(--ac); }
.rw.stale { opacity: .5; }
.rw > * { min-width: 0; }

.nm {
  display: block;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.005em;
}
.sb2 {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mut);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tyc {
  /* A badge that outgrew this column used to sit on top of the track. */
  overflow: hidden;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tint, var(--mid));
  white-space: nowrap;
  font-weight: 500;
}
.pos {
  font-family: var(--mono);
  font-size: 13.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pos s {
  text-decoration: none;
  display: block;
  color: var(--mut);
  font-size: 11.5px;
  letter-spacing: .04em;
  margin-top: 3px;
}
.pl {
  width: 32px;
  height: 32px;
  border: 1px solid var(--ln);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mut);
  font-size: 15px;
  background: var(--el);
  justify-self: end;
  font-family: var(--mono);
}
.pl.w { font-size: 11.5px; font-weight: 600; letter-spacing: .01em; }
.rw.on .pl { background: var(--ac); border-color: var(--ac); color: #fff; }

/* Cells shrink rather than wrap: a track is always one line, however long.
   Cells are buttons, the season divider is an <i>, so states match on class. */
.trk { display: flex; gap: 3px; align-items: center; flex-wrap: nowrap; min-width: 0; }
.trk > * {
  height: var(--cell-h);
  border-radius: 2px;
  background: var(--cell);
  display: block;
  flex: 1 1 var(--cell-w);
  max-width: var(--cell-w);
  min-width: 4px;
  position: relative;
}
.trk .f { background: var(--tint, var(--fg)); }
.trk .a { background: var(--cell); box-shadow: inset 0 0 0 1.3px color-mix(in srgb, var(--tint, var(--fg)) 45%, transparent); }
.trk .n { background: color-mix(in srgb, var(--ac) 13%, transparent); box-shadow: inset 0 0 0 1.6px var(--ac); }
.trk .n::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid var(--ac);
}
.trk .u { background: transparent; box-shadow: inset 0 0 0 1px var(--ln); }
.trk .sn {
  flex: 0 0 1px;
  max-width: 1px;
  min-width: 1px;
  height: 14px;
  background: var(--ln);
  border-radius: 0;
  box-shadow: none;
  margin: 0 5px;
}

.bar {
  height: var(--cell-h);
  border-radius: 2px;
  background: var(--cell);
  overflow: hidden;
  max-width: 420px;
}
.bar i { display: block; height: 100%; background: var(--tint, var(--fg)); }
.bar.open {
  height: 4px;
  align-self: center;
  max-width: 240px;
  background: linear-gradient(90deg, var(--tint, var(--fg)) 0 26px, var(--ln) 26px);
}

.stq {
  display: flex;
  border: 1px solid var(--ln);
  border-radius: 3px;
  overflow: hidden;
  width: max-content;
}
.stq span {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 11px;
  color: var(--mut);
  border-right: 1px solid var(--ln);
}
.stq span:last-child { border-right: 0; }
.stq span.on { background: var(--tint, var(--fg)); color: #fff; }

.empty { padding: 84px 30px 60px; text-align: center; }
.empty .trk { justify-content: center; margin-bottom: 26px; }
.empty h1 {
  margin: 0;
  font-family: var(--cond);
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
}
.empty p {
  font-size: 14px;
  color: var(--mid);
  max-width: 42ch;
  margin: 11px auto 0;
  line-height: 1.6;
}
.empty .bt { margin-top: 24px; display: flex; gap: 10px; justify-content: center; }
.empty .bt button {
  appearance: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid var(--ln);
  border-radius: 3px;
  padding: 9px 15px;
  color: var(--mid);
  background: var(--el);
  letter-spacing: .04em;
}
.empty .bt button.on { background: var(--ac); border-color: var(--ac); color: #fff; }
.empty .bt button:hover { filter: brightness(1.05); border-color: var(--mid); }

.ft {
  margin-top: auto;
  border-top: 1px solid var(--ln);
  padding: 11px 24px;
  display: flex;
  gap: 18px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mut);
  background: var(--bar);
  flex-wrap: wrap;
}
.ft b { color: var(--mid); font-weight: 500; }
.ft .rt { margin-left: auto; }

.trk button,
.stq button,
button.pl {
  appearance: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

.trk button { border: 0; transition: transform .08s ease; }
.trk button:hover { transform: scaleY(1.18); }
.trk button:active { transform: scaleY(.92); }

.stq button {
  background: none;
  border: 0;
  border-right: 1px solid var(--ln);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 11px;
  color: var(--mut);
}
.stq button:last-child { border-right: 0; }
.stq button.on { background: var(--tint, var(--fg)); color: #fff; }
.stq button:hover:not(.on) { color: var(--fg); background: var(--ln2); }

button.pl:hover { border-color: var(--fg); color: var(--fg); }
.rw.on button.pl:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.pl.ghost { opacity: .35; }

.htmx-request .pl,
.pl.htmx-request { opacity: .5; }

#toast {
  position: fixed;
  left: 50%;
  bottom: 58px;
  transform: translateX(-50%);
  z-index: 40;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--fg);
  color: var(--bg);
  border-radius: 3px;
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5);
  pointer-events: auto;
  animation: toast-in .16s ease-out, toast-out .3s 5s forwards;
}
.toast button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ac);
  cursor: pointer;
}
.toast button:hover { text-decoration: underline; }

@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes toast-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .toast { animation: toast-out .01s 5s forwards; }
  .trk button { transition: none; }
}

#palette {
  width: min(660px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--ln);
  border-radius: 5px;
  background: var(--el);
  color: var(--fg);
  margin-top: 12vh;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .5);
}
#palette::backdrop { background: rgba(0, 0, 0, .35); }

#palette-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ln);
  background: none;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  padding: 15px 17px;
  outline: none;
}
#palette-input::placeholder { color: var(--mut); }

#palette-results:not(:empty) { padding: 6px 0; }

.sc {
  padding: 8px 17px 5px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--mut);
}

.res {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 17px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13.5px;
  color: var(--mid);
  cursor: pointer;
  text-align: left;
}
.res.on, .res:hover { background: var(--sel); color: var(--fg); box-shadow: inset 2px 0 0 var(--ac); }
.res .st { width: 3px; height: 16px; border-radius: 1px; flex: 0 0 3px; }
.res .nn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res .nn s { text-decoration: none; color: var(--mut); }
.res .tg {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
}
.res .yy {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mut);
  width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hintline {
  padding: 14px 17px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--mut);
}
.hintline.warn { color: var(--k-anime); }

.pfoot {
  display: flex;
  gap: 15px;
  padding: 9px 17px;
  border-top: 1px solid var(--ln);
  background: var(--bar);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mut);
}
.pfoot b { color: var(--mid); font-weight: 500; }
.pfoot .rt { margin-left: auto; }

.sb { display: flex; flex-direction: column; }
.attr {
  margin: auto 18px 0;
  padding-top: 20px;
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.6;
  color: var(--mut);
}
.attr a { color: var(--mid); text-decoration: underline; }

.del {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  width: 22px;
  height: 22px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: var(--mut);
  cursor: pointer;
  opacity: 0;
  transition: opacity .1s ease;
}
.rw:hover .del, .del:focus-visible { opacity: 1; }
.del:hover { color: var(--k-anime); }
@media (prefers-reduced-motion: reduce) { .del { transition: none; } }

.mform, .step { padding: 4px 0 14px; }
.mform .fl, .step .fl {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 12px;
  align-items: center;
  padding: 7px 17px;
}
.k2 {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mut);
}
.v2 {
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--ln);
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  padding: 4px 2px;
  outline: none;
  width: 100%;
}
.v2:focus { border-color: var(--ac); }
.v2.num { width: 92px; }
.withunit { display: flex; align-items: baseline; gap: 10px; }
.withunit s {
  text-decoration: none;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--mut);
}

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  border: 1px solid var(--ln);
  border-radius: 3px;
  padding: 4px 9px;
  color: var(--mid);
  cursor: pointer;
  letter-spacing: .04em;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip .d { width: 7px; height: 7px; border-radius: 2px; margin-right: 7px; }
.chip.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip:hover:not(.on) { border-color: var(--mid); }

button.primary {
  margin: 10px 17px 0;
  appearance: none;
  border: 0;
  border-radius: 3px;
  background: var(--ac);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .05em;
  padding: 9px 16px;
  cursor: pointer;
}
button.primary:hover { filter: brightness(1.08); }

#flow-log:not(:empty) {
  border-top: 1px solid var(--ln);
  max-height: 190px;
  overflow-y: auto;
  padding: 6px 0;
}
.flow-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 17px;
  font-size: 13px;
  color: var(--mid);
}
.flow-item .st { width: 3px; height: 14px; border-radius: 1px; flex: 0 0 3px; }
.flow-item .nn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-item .tg {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mut);
}
.flow-item .ok { color: var(--ac); font-size: 11px; }
.flow-item:nth-child(n+4) { opacity: .6; }
.flow-item:nth-child(n+7) { opacity: .35; }

.tp.sub { border-bottom: 1px solid var(--ln); }
a.chp { text-decoration: none; }
a.chp:hover:not(.on) { border-color: var(--mid); color: var(--fg); }
.yr-rows { margin-bottom: 4px; }

.trk.dense { gap: 1px; }
.trk.dense > * { min-width: 3px; max-width: 9px; border-radius: 1px; }
.trk.dense .sn { margin: 0 3px; }
.trk.dense .n::after { border-left-width: 3px; border-right-width: 3px; bottom: -5px; }

button.kb { appearance: none; background: none; cursor: pointer; }
button.kb:hover { border-color: var(--mid); color: var(--fg); }

.nv.sel { background: var(--sel); color: var(--fg); box-shadow: inset 2px 0 0 var(--ac); }
.nv.sel b { color: var(--mid); }

#help {
  width: min(580px, calc(100vw - 32px));
  padding: 0 0 4px;
  border: 1px solid var(--ln);
  border-radius: 5px;
  background: var(--el);
  color: var(--fg);
  margin-top: 12vh;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .5);
}
#help::backdrop { background: rgba(0, 0, 0, .35); }
.keys { margin: 0; padding: 0 17px 10px; display: grid; grid-template-columns: 84px 1fr; gap: 7px 14px; }
.keys dt { font-family: var(--mono); font-size: 11.5px; color: var(--fg); }
.keys dd { margin: 0; font-size: 13px; color: var(--mid); }

.fbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--ln);
  background: var(--bar);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--mid);
}
.fbar .st { width: 3px; height: 14px; border-radius: 1px; }
.fbar a { margin-left: auto; color: var(--mut); }
.fbar a:hover { color: var(--fg); }

/* Proper phone layout is M10; this keeps it usable until then: the sidebar
   becomes a scrolling strip instead of a full screen you must scroll past. */
@media (max-width: 720px) {
  .app { flex-direction: column; }

  .sb {
    width: auto;
    flex: none;
    border-right: 0;
    border-bottom: 1px solid var(--ln);
    padding: 12px 0 0;
    display: block;
  }
  .sb .br, .sb .brs { padding-left: 16px; }
  .sb .gg, .sb .attr { display: none; }
  #nav { display: flex; gap: 0; overflow-x: auto; padding: 6px 10px 8px; scrollbar-width: none; }
  #nav::-webkit-scrollbar { display: none; }
  #nav .nv {
    flex: 0 0 auto;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 3px;
    white-space: nowrap;
  }
  #nav .nv.sel { box-shadow: none; background: var(--fg); color: var(--bg); }

  .sum { overflow-x: auto; scrollbar-width: none; }
  .sum::-webkit-scrollbar { display: none; }
  .sum div { flex: 0 0 auto; padding: 10px 16px; }
  .sum div:last-child { margin-left: 0; text-align: left; }

  .tp, .fbar, .ft, .gl { padding-left: 16px; padding-right: 16px; }
  .ft { font-size: 10px; gap: 12px; }

  #palette, #help { margin-top: 6vh; }
}

/* Two-tier track: finished seasons collapse to a labelled block, the season
   you are in keeps full-size cells. Detail sits where it is actually used. */
.tier {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tier::-webkit-scrollbar { display: none; }

.blk {
  flex: 0 0 auto;
  /* Uniform, not proportional to the season's length: a width nobody can
     count episodes from is noise pretending to be information, and the exact
     number is one click away now that a block opens its season. */
  width: 30px;
  overflow: hidden;
  height: var(--cell-h);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
}
.blk.done { background: var(--tint, var(--fg)); color: var(--el); }
.blk.later { background: transparent; box-shadow: inset 0 0 0 1px var(--ln); color: var(--mut); }
.blk.later.out { box-shadow: inset 0 0 0 1.3px color-mix(in srgb, var(--tint, var(--fg)) 45%, transparent); }
.blk.barblk {
  width: auto;
  flex: 1 1 auto;
  background: var(--cell);
  overflow: hidden;
  padding: 0;
}
.blk.barblk i { display: block; height: 100%; background: var(--tint, var(--fg)); }

/* The current season keeps its natural width so collapsed seasons stay next
   to it instead of being flung to the far edge of the row. */
.trk.cur {
  /* The strip gives up width first, because it can scroll inside itself and a
     collapsed season block cannot. Cells keep their size either way. */
  flex: 0 1 auto;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 6px;
  border-left: 1px solid var(--ln);
  border-right: 1px solid var(--ln);
}
/* Fixed width, not flexible: a flex container sized from shrinkable children
   collapses to their minimum, which turned the whole strip into a sliver.
   A season that still will not fit scrolls instead of squashing. */
.trk.cur > * { flex: 0 0 var(--cell-w); max-width: none; min-width: 0; }
.trk.cur.dense > * { flex: 0 0 9px; }
.trk.cur::-webkit-scrollbar { display: none; }
.tier .trk.cur:first-child { border-left: 0; padding-left: 0; }
.tier .trk.cur:last-child { border-right: 0; padding-right: 0; }

.mform.folded { border-top: 1px solid var(--ln2); margin-top: 6px; }
.res .tg { flex: 0 0 auto; }

.tyc .rate {
  display: inline-block;
  margin-left: 9px;
  padding: 1px 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ac) 14%, transparent);
  color: var(--ac);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

#panel-slot:empty { display: none; }

.pn {
  width: 420px;
  flex: 0 0 420px;
  border-left: 1px solid var(--ln);
  background: var(--el);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
}

.pnh { padding: 18px 20px 16px; border-bottom: 1px solid var(--ln); }
.pnh .x {
  float: right;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--mut);
  padding: 0;
}
.pnh .x:hover { color: var(--fg); }
.pnh h2 {
  margin: 0;
  font-family: var(--cond);
  font-size: 27px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: .005em;
  max-width: 86%;
}
.pnh .orig { font-family: var(--mono); font-size: 11.5px; color: var(--mid); margin-top: 5px; }
.pnh .mt { font-family: var(--mono); font-size: 10.5px; color: var(--mut); margin-top: 8px; letter-spacing: .03em; }

.rt2 { margin-top: 13px; display: flex; align-items: center; gap: 10px; }
/* Ten squares mean nothing without a word next to them. */
.rt2 .k3 {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mut);
}
.rt2 .dots { display: flex; gap: 3px; }
.rt2 .dots button {
  appearance: none;
  border: 0;
  padding: 0;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--cell);
  cursor: pointer;
}
.rt2 .dots button.f { background: var(--tint, var(--fg)); }
/* Hover previews the rating you are about to click: the hovered dot and all
   before it light up, everything after goes quiet. */
.rt2 .dots:hover button.f:not(:hover):not(:has(~ button:hover)) { background: var(--cell); }
.rt2 .dots button:hover,
.rt2 .dots button:has(~ button:hover) { background: var(--tint, var(--fg)); }
.rt2 b { font-family: var(--mono); font-size: 13px; }
.rt2 .hint { font-family: var(--mono); font-size: 10px; color: var(--mut); margin-left: auto; }

.pns { overflow-y: auto; flex: 1; scrollbar-width: none; }
.pns::-webkit-scrollbar { display: none; }

.pg {
  padding: 0 20px;
  margin: 20px 0 9px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mut);
  display: flex;
  justify-content: space-between;
}
.pg b { color: var(--mid); font-weight: 400; letter-spacing: .06em; }

.ptrk { padding: 0 20px; }
.tier.big > .blk, .tier.big .trk.cur > * { height: 34px; }

.nxt {
  margin: 16px 20px;
  border: 1px solid var(--ac);
  border-radius: 4px;
  padding: 13px 15px;
  background: var(--sel);
}
.nxt .l { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ac); margin-bottom: 7px; }
.nxt .t { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.nxt .d { font-family: var(--mono); font-size: 10.5px; color: var(--mid); margin-top: 5px; }
.nxt .go { margin-top: 12px; display: flex; gap: 7px; flex-wrap: wrap; }
.nxt .go button {
  appearance: none;
  font-family: var(--mono);
  font-size: 10px;
  border: 1px solid var(--ac);
  color: var(--ac);
  background: none;
  border-radius: 3px;
  padding: 5px 10px;
  letter-spacing: .06em;
  cursor: pointer;
}
.nxt .go button:hover { background: var(--ac); color: #fff; }

.pp { padding: 0 20px; font-size: 13.5px; line-height: 1.65; color: var(--mid); margin: 0; }

.eps { padding: 0 20px; }
.ep {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--ln2);
  background: none;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  color: var(--mid);
}
.ep:last-child { border-bottom: 0; }
.ep:hover { color: var(--fg); }
.ep s { text-decoration: none; font-family: var(--mono); color: var(--mut); width: 32px; flex: 0 0 32px; font-size: 11px; }
.ep .t2 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep .d2b { font-family: var(--mono); font-size: 10px; color: var(--mut); }
.ep .c { width: 16px; height: 16px; border-radius: 3px; flex: 0 0 16px; background: var(--cell); }
.ep .c.f { background: var(--tint, var(--fg)); }
.ep .c.a { box-shadow: inset 0 0 0 1.3px color-mix(in srgb, var(--tint, var(--fg)) 45%, transparent); }
.ep .c.n { background: color-mix(in srgb, var(--ac) 13%, transparent); box-shadow: inset 0 0 0 1.6px var(--ac); }
.ep .c.u { background: transparent; box-shadow: inset 0 0 0 1px var(--ln); }
.ep.now { margin: 0 -20px; padding: 8px 20px; background: var(--sel); }
.ep.now .t2 { color: var(--fg); font-weight: 600; }

.hs { padding: 0 20px; font-family: var(--mono); font-size: 12px; color: var(--mid); }
.hs div { display: flex; justify-content: space-between; padding: 4px 0; }
.hs div b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }

.ntz { margin: 0 20px; }
.ntz textarea {
  width: 100%;
  border: 1px dashed var(--ln);
  border-radius: 3px;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  padding: 10px 12px;
  resize: vertical;
  outline: none;
}
.ntz textarea:focus { border-style: solid; border-color: var(--ac); }
.ntz button {
  appearance: none;
  margin-top: 8px;
  border: 0;
  border-radius: 3px;
  background: var(--ac);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  padding: 7px 13px;
  cursor: pointer;
}

.pnf {
  border-top: 1px solid var(--ln);
  padding: 10px 20px;
  display: flex;
  gap: 15px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--mut);
  background: var(--bar);
  flex-wrap: wrap;
}
.pnf b { color: var(--mid); font-weight: 500; }

@media (max-width: 1100px) {
  .pn { position: fixed; right: 0; top: 0; z-index: 30; box-shadow: -20px 0 50px -20px rgba(0, 0, 0, .3); }
}
@media (max-width: 720px) {
  .pn { width: 100%; flex-basis: 100%; }
}

.big4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--ln);
}
.big4 > div { padding: 18px 24px; border-right: 1px solid var(--ln2); }
.big4 > div:last-child { border-right: 0; }
.big4 .n { font-family: var(--cond); font-size: 34px; font-weight: 700; line-height: 1; }
.big4 .u {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mut);
  margin-top: 7px;
}
.big4 .d { font-family: var(--mono); font-size: 11px; color: var(--mid); margin-top: 6px; }
.big4 .d em { font-style: normal; color: var(--ac); }

.heat { display: flex; gap: 3px; padding: 4px 24px 0; overflow-x: auto; scrollbar-width: none; }
.heat::-webkit-scrollbar { display: none; }
.heat .cl { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.heat b {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--cell);
  display: block;
}
.heat b.void { background: transparent; }
.heat b.l1 { opacity: .38; }
.heat b.l2 { opacity: .68; }
.heat b.l3 { opacity: 1; }
.heat b.l1, .heat b.l2, .heat b.l3 { background: var(--fg); }
.heat b.l1.k-show, .heat b.l2.k-show, .heat b.l3.k-show { background: var(--k-show); }
.heat b.l1.k-anime, .heat b.l2.k-anime, .heat b.l3.k-anime { background: var(--k-anime); }
.heat b.l1.k-movie, .heat b.l2.k-movie, .heat b.l3.k-movie { background: var(--k-movie); }
.heat b.l1.k-book, .heat b.l2.k-book, .heat b.l3.k-book { background: var(--k-book); }
.heat b.l1.k-game, .heat b.l2.k-game, .heat b.l3.k-game { background: var(--k-game); }
.heat b.l1.k-podcast, .heat b.l2.k-podcast, .heat b.l3.k-podcast { background: var(--k-podcast); }
.k-course { background: var(--k-course); }

.lgnd { display: flex; gap: 16px; padding: 14px 24px 0; flex-wrap: wrap; }
.lgnd span {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--mut);
  letter-spacing: .05em;
  display: flex;
  align-items: center;
  gap: 7px;
}
.lgnd i { width: 10px; height: 10px; border-radius: 2px; display: block; }

.mrows { padding: 6px 24px 10px; }
.mrow { display: flex; align-items: center; gap: 14px; padding: 5px 0; }
.mrow s {
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mut);
  width: 30px;
  flex: 0 0 30px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.mrow .stack { flex: 1; display: flex; height: 18px; border-radius: 2px; overflow: hidden; background: var(--cell); }
.mrow .stack i { display: block; height: 100%; }
.mrow b {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mid);
  font-weight: 400;
  width: 60px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.strow {
  display: grid;
  grid-template-columns: 130px auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--ln2);
}
.strow:last-child { border-bottom: 0; }
.strow .tn { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.strow .tn .d { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; }
.strow .sw { display: inline-flex; border: 1px solid var(--ln); border-radius: 3px; overflow: hidden; }
.strow .sw button {
  appearance: none;
  background: none;
  border: 0;
  border-right: 1px solid var(--ln);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  padding: 6px 12px;
  color: var(--mut);
  cursor: pointer;
}
.strow .sw button:last-child { border-right: 0; }
.strow .sw button.on { background: var(--fg); color: var(--bg); }
.strow .sw button:hover:not(.on) { color: var(--fg); background: var(--ln2); }
.strow .pv { font-family: var(--mono); font-size: 11px; color: var(--mut); display: flex; align-items: center; }

/* The palette inserts rows out-of-band; the moment one lands, the empty state
   is a lie and hides itself. */
#rows:not(:empty) ~ .empty { display: none; }

/* Number spinners overlap the value at this field width and add nothing on a
   keyboard-first form. */
.v2.num::-webkit-outer-spin-button,
.v2.num::-webkit-inner-spin-button { appearance: none; margin: 0; }
.v2.num { appearance: textfield; -moz-appearance: textfield; }

.sum.off { display: none; }

.step .pstep {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 7px 17px;
}
.step .pstep .k2 { white-space: nowrap; }
.step .withunit { flex-wrap: wrap; row-gap: 2px; }
/* The step's own footer sits inside the block, so it keeps the block's indent
   instead of the palette footer's full-width bar. */
.pfoot.sfoot { border: 0; background: none; padding: 9px 17px 0; }

/* Dialogs sit above the page and are read close up; the micro-labels that work
   in a dense list are too small there. Scoped to dialog so the list keeps its
   own scale. */
dialog #palette-input { font-size: 17.5px; }
dialog .sc { font-size: 11px; }
dialog .res { font-size: 15px; }
dialog .res .tg { font-size: 11px; }
dialog .res .yy { font-size: 12.5px; width: 44px; }
dialog .hintline { font-size: 13px; }
dialog .pfoot { font-size: 11.5px; }
dialog .k2 { font-size: 11px; }
dialog .v2 { font-size: 15.5px; }
dialog .v2.num { width: 104px; }
dialog .withunit s { font-size: 12px; }
dialog .flow-item { font-size: 14.5px; }
dialog .flow-item .tg { font-size: 11px; }
dialog .flow-item .ok { font-size: 12.5px; }
dialog .keys { grid-template-columns: 100px 1fr; }
dialog .keys dt { font-size: 13px; }
dialog .keys dd { font-size: 14.5px; }
dialog .chip { font-size: 13px; }
dialog .mform .fl, dialog .step .fl { grid-template-columns: 124px 1fr; }
dialog .step .pstep { grid-template-columns: 168px 1fr; }

/* A row reflows when its own column is narrow, which happens both on a phone
   and the moment the panel opens on a laptop. The window is the wrong thing to
   measure: the list can be cramped while the window is wide. */
@container (max-width: 820px) {
  .rw {
    grid-template-columns: 1fr auto 28px;
    grid-template-areas: "name type del" "track track btn" "pos pos btn";
    gap: 6px 12px;
    padding: 12px 16px;
  }
  .rw .lb { grid-area: name; }
  .rw .tyc { grid-area: type; justify-self: end; }
  .rw .tier, .rw .trk, .rw .bar, .rw .stq { grid-area: track; }
  /* Eighty-six cells never fit a phone; let the track scroll rather than
     spill over the button beside it. */
  .rw .tier, .rw .trk { overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
  .rw .tier::-webkit-scrollbar, .rw .trk::-webkit-scrollbar { display: none; }
  .rw .pos { grid-area: pos; text-align: left; }
  .rw .pos s { display: inline; margin-left: 8px; }
  .rw .del { grid-area: del; opacity: 1; }
  .rw .pl, .rw > span:last-child { grid-area: btn; align-self: end; justify-self: end; }
  .rw .stq { justify-self: start; }
}

/* Editing is a repair, not a daily action: folded away until asked for. */
.pedit { border-top: 1px solid var(--ln2); margin-top: 18px; }
.pedit summary {
  padding: 13px 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mut);
  cursor: pointer;
}
.pedit summary:hover { color: var(--mid); }
.pedit form { padding: 0 20px 18px; }
.pedit .fl { display: grid; grid-template-columns: 78px 1fr; gap: 10px; align-items: center; padding: 6px 0; }
.pedit .primary { margin-top: 10px; }

.imp { padding: 4px 24px 0; max-width: 760px; }
.imp textarea {
  width: 100%;
  border: 1px solid var(--ln);
  border-radius: 4px;
  background: var(--el);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  padding: 12px 14px;
  outline: none;
  resize: vertical;
}
.imp textarea:focus { border-color: var(--ac); }
.impf { display: flex; align-items: center; gap: 14px; margin: 12px 0 4px; flex-wrap: wrap; }
.impf .sw { display: inline-flex; border: 1px solid var(--ln); border-radius: 3px; overflow: hidden; }
.impf .sw label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .07em;
  padding: 7px 13px;
  border-right: 1px solid var(--ln);
  color: var(--mut);
  cursor: pointer;
}
.impf .sw label:last-child { border-right: 0; }
.impf .sw label:has(input:checked) { background: var(--fg); color: var(--bg); }
.impf .sw input { position: absolute; opacity: 0; pointer-events: none; }
.impf .htmx-indicator {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mut);
  opacity: 0;
}
.impf .htmx-indicator.htmx-request { opacity: 1; }

.impres { padding: 18px 24px 24px; max-width: 760px; }
.impr { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--ln2); font-size: 14px; }
.impr:last-child { border-bottom: 0; }
.impr .st { width: 3px; height: 15px; border-radius: 1px; flex: 0 0 3px; background: var(--ln); }
.impr .nn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.impr .tg { font-family: var(--mono); font-size: 11px; color: var(--mut); }
.impr .ok { font-family: var(--mono); font-size: 11px; color: var(--ac); width: 62px; text-align: right; }
.impr.miss { color: var(--mut); }
.impr.miss .ok { color: var(--mut); }

body.lg { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.lgb { width: min(360px, calc(100vw - 32px)); text-align: center; }
.lgb .br { justify-content: center; margin-bottom: 26px; }
.lgb form { display: flex; flex-direction: column; gap: 12px; }
.lgb .v2 { text-align: center; font-size: 16px; padding: 10px 12px; }
.lgb .primary { width: 100%; }
.lgh, .lge { font-family: var(--mono); font-size: 11.5px; margin: 16px 0 0; line-height: 1.6; }
.lgh { color: var(--mut); }
.lge { color: var(--k-anime); }

.ghostbtn {
  appearance: none;
  border: 1px solid var(--ln);
  border-radius: 3px;
  background: none;
  color: var(--mid);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .07em;
  padding: 7px 14px;
  cursor: pointer;
}
.ghostbtn:hover { border-color: var(--mid); color: var(--fg); }

/* What landed while you were away, marked where the eye already is. */
.gl.fresh { color: var(--ac); }
.gl.fresh::after { background: color-mix(in srgb, var(--ac) 35%, transparent); }
.sb2 .new {
  color: var(--ac);
  font-weight: 600;
  font-style: normal;
}

.plinks { padding: 4px 0 2px; }
.lnk { display: flex; align-items: center; gap: 10px; padding: 5px 20px; }
.lnk a { flex: 1; min-width: 0; font-size: 14px; color: var(--ac); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lnk a:hover { text-decoration: underline; }
.lnk button {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: var(--mut); font: inherit; font-size: 12px; padding: 0 2px;
}
.lnk button:hover { color: var(--k-anime); }
.lnkadd { display: flex; gap: 8px; padding: 8px 20px 4px; }
.lnkadd .v2 { flex: 1; font-size: 13.5px; }

/* Shelf hits are links, not add-buttons: the same row shape, a different job. */
.res.mine { text-decoration: none; }
.res.mine .yy { width: auto; min-width: 54px; }

a.ghostbtn { display: inline-block; text-decoration: none; }

.bar.hit { cursor: pointer; }
.bar.hit:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tint, var(--fg)) 55%, transparent); }
.setpos {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 2px;
}
.setpos .v2.num { width: 84px; }

/* Season and episode side by side: nobody remembers "episode 46 of 86". */
.se { display: flex; align-items: baseline; gap: 8px; }
.se label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mut);
}
.v2.num.sm { width: 58px; }

/* Things without a finish line live at the bottom, folded: they are a habit to
   tick, not a queue to work through. */
.ong summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mut);
  cursor: pointer;
}
.ong summary::after { content: ""; flex: 1; height: 1px; background: var(--ln2); }
.ong summary:hover { color: var(--mid); }

/* Season blocks are buttons now: a finished season is the only way back into
   one you already passed. */
button.blk {
  appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: var(--mono);
  font-size: 10px;
  cursor: pointer;
  transition: transform .08s ease;
}
button.blk:hover { transform: scaleY(1.14); }
button.blk:active { transform: scaleY(.94); }
@media (prefers-reduced-motion: reduce) { button.blk { transition: none; } }

/* Season tabs in the panel: a season you have passed is collapsed in the track,
   so this is the only way to reach an episode inside it. */
.stabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 20px 8px; }
.stabs button {
  appearance: none;
  border: 1px solid var(--ln);
  border-radius: 3px;
  background: none;
  color: var(--mut);
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 4px 8px;
  cursor: pointer;
}
.stabs button:hover { border-color: var(--mid); color: var(--fg); }
.stabs button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }