/* oomoo -- the media log page. This file is the page, same deal as css/home/main.css.
 *
 * Imports are the whole dependency list: tokens first so everything after can read --ink,
 * --line and --text, then the reset and faces, then the two pieces of ambient chrome this
 * page borrows from home (the ruler and the theme toggle).
 *
 * Mobile-first: what's outside a media query is the phone. One column throughout -- the
 * log is a reading page, not a layout -- so the ladder is short: 480px opens the side
 * margin, 768px clears the ruler.
 */

@import url('../tokens.css');
@import url('../reset.css');
@import url('../utilities.css');
@import url('../home/fonts.css');
@import url('../home/ruler.css');
@import url('../home/theme-toggle.css');
@import url('../home/lightbox.css');

/* ------------------------------------------------------------------- Page */

/* No html font-size bump here: home dropped its 112.5% rule, and "same reading size
   as home" means following it out the door. */

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'National Park', system-ui, sans-serif;
  line-height: 1.55;
}

.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 24px 14px 64px;
}

@media (min-width: 480px) {
  .page {
    padding-inline: 24px;
  }
}

@media (min-width: 768px) {
  .page {
    padding-left: 72px; /* stand off the ruler, like home */
  }
}

.label {
  /* The label voice here is casing, not typeface: everything on this page reads in
     National Park, and uppercase alone is what marks the chrome. */
  text-transform: uppercase;
  font-family: 'National Park', system-ui, sans-serif;
}

a {
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* --------------------------------------------------------------- Masthead */

.head {
  margin-bottom: 2rem;
}

.back {
  font-size: 11px;
  color: var(--dim);
  text-decoration: none;
}

.back:hover {
  color: var(--accent);
}

.logo {
  margin-top: 0.5rem;
  font-family: 'Terminal Grotesque', 'National Park', sans-serif;
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  line-height: 1;
  color: var(--ink);
}

.tagline {
  margin-top: 0.4rem;
  color: var(--dim);
  font-size: 0.85rem;
}

/* -------------------------------------------------------------- Currently */

.now {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1.5rem;
}

.now__card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  padding: 8px 12px 8px 8px;
  max-width: 100%;
}

.now__art {
  width: 34px;
  height: 51px;
  object-fit: cover;
  image-rendering: pixelated; /* dithered art: whole pixels or nothing */
}

.now__text {
  display: grid;
  line-height: 1.3;
}

.now__slot {
  font-size: 9px;
  color: var(--accent);
}

.now__title {
  font-size: 0.9rem;
}

.now__detail {
  font-size: 11px;
  font-family: 'National Park', system-ui, sans-serif;
  color: var(--dim);
}

/* ---------------------------------------------------------------- Readout */

.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  border-block: 1px solid var(--line);
  margin-bottom: 1.5rem;
}

.stat {
  display: grid;
  gap: 2px;
  padding: 14px 10px;
  text-align: center;
}

.stat + .stat {
  border-left: 1px solid var(--line);
}

/* The same gifs the entries wear, one per tile, so the readout is also the legend.
   Bigger than the entry marks -- these have a tile to themselves. */
/* All the same height, so the canvas bottoms align on their grid row -- the margin below
   is what actually sets the icon-to-number gap, and it's deliberately uniform. No per-icon
   correction here: with bottoms as the shared edge, the tv's antenna just makes it read
   taller, which is fine. */
.stat__gif {
  height: 34px;
  width: auto;
  justify-self: center;
  image-rendering: pixelated;
  margin-bottom: 6px;
}

.stat__n {
  font-family: 'National Park', system-ui, sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
}

.stat__what {
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 0.1em;
}

/* No .label here on purpose: "65h watched" is a remark, not a machine readout, so it
   keeps its case and only borrows the mono face. */
.stat__sub {
  font-family: 'National Park', system-ui, sans-serif;
  font-size: 10px;
  color: var(--dim);
}

/* The estimates say how they got their number. Not a title attribute -- browsers sit on
   those for a second or two and render them tiny -- but the tile's own data-hint, drawn
   as a pseudo-element the instant the pointer (or keyboard focus) arrives. */
.stat--hint {
  position: relative;
  cursor: help;
}

.stat--hint::after {
  content: attr(data-hint);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: min(16rem, 75vw);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--accent);
  padding: 8px 10px;
  font-family: 'National Park', system-ui, sans-serif;
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 5;
}

.stat--hint:hover::after,
.stat--hint:focus-visible::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .stat--hint::after {
    transition: none;
  }
}

.stat--hint .stat__sub {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

@media (max-width: 520px) {
  .readout {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat + .stat {
    border-left: 0;
  }
}

/* ---------------------------------------------------------------- Filters */

.filters {
  display: grid;
  gap: 10px;
  margin-bottom: 2rem;
}

.filters__types,
.filters__sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 11px;
}

.filters__types a,
.filters__sort a {
  text-decoration: none;
  color: var(--dim);
  padding: 2px 0;
}

.filters__types a:hover,
.filters__sort a:hover {
  color: var(--accent);
}

.filters__types a[aria-current],
.filters__sort a[aria-current] {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}

.filters__sort > span {
  color: var(--dim);
  opacity: 0.6;
}

.filters__search {
  margin-left: auto;
}

.filters__q {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  font-family: 'National Park', system-ui, sans-serif;
  font-size: 11px;
  padding: 4px 8px;
  width: 11em;
}

.filters__q:focus {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

/* -------------------------------------------------------------------- Log */

.log__month {
  font-size: 11px;
  color: var(--accent);
  margin: 2.2rem 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none; /* the chevron is the marker */
}

.log__month::-webkit-details-marker {
  display: none;
}

.month__chevron {
  transition: rotate 0.15s;
}

.month:not([open]) .month__chevron {
  rotate: -90deg;
}

.log__month::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--line);
}

.entry {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.entry:first-child,
.month__body > .entry:first-child {
  border-top: 0;
}

.entry__cover {
  width: 72px;
  height: 108px;
  flex-shrink: 0;
  object-fit: cover;
  image-rendering: pixelated;
}

.entry__cover--empty {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--dim);
  font-size: 9px;
  text-align: center;
}

.entry__body {
  min-width: 0;
}

.entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

/* The type marks are tiny animated gifs now, not bordered text badges. They ride the
   head row's baseline like the text does (an image's baseline is its bottom edge), then
   get nudged down so their mass centers on the title's cap height -- centering on the
   line box instead leaves them floating visibly high. No pixelated rendering at this
   size: the gifs draw below their natural size, and nearest-neighbor downscaling eats
   their pixels. */
.entry__type {
  height: 17px;
  width: auto;
  flex-shrink: 0;
  translate: 0 3px;
}

/* The tv's top quarter is antenna, so its visual mass -- the set itself -- sits low in
   the canvas. Alignment goes by the canvas, so the tv alone gets less of the downward
   nudge to bring the set level with its neighbours. */
.entry__type[src$='/tv.gif'] {
  translate: 0 1px;
}

.entry__title {
  font-size: 1.05rem;
  line-height: 1.25;
}

.entry__year,
.entry__creator {
  color: var(--dim);
  font-size: 0.85rem;
}

.entry__stars {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  letter-spacing: 2px;
  margin-top: 2px;
}

/* The rewatch mark: the music player's loop glyph, sat beside the stars. */
.entry__rewatch {
  display: flex;
}

.entry__rewatch svg {
  width: 0.85em;
  height: 0.85em;
}

.entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: 4px;
  font-size: 10px;
  color: var(--dim);
}

.entry__tag {
  color: var(--accent);
}

.entry__review {
  margin-top: 0.6rem;
  font-size: 0.92rem;
}

.entry__review + .entry__review {
  margin-top: 0.5rem;
}

.log__empty {
  color: var(--dim);
  padding: 2rem 0;
}

/* ---------------------------------------------------------------- Roundup */

.roundup {
  border: 1px solid var(--line);
  padding: 14px;
  margin: 14px 0;
}

.roundup__title {
  font-size: 11px;
  color: var(--accent);
  margin-bottom: 10px;
}
.roundup__list {
  list-style: none;
  display: grid;
  gap: 8px;
}

@media (min-width: 700px) {
  .roundup__list {
    grid-template-columns: 1fr 1fr;
  }
}

.roundup__song {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.roundup__art {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: cover;
  image-rendering: pixelated;
}

.roundup__name {
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roundup__artist {
  font-family: 'National Park', system-ui, sans-serif;
  font-size: 10px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------- Pagination */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-top: 2.5rem;
  font-size: 11px;
}

.pager a {
  color: var(--dim);
  text-decoration: none;
  padding: 2px 4px;
}

.pager a:hover {
  color: var(--accent);
}

.pager__num[aria-current] {
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 2px 6px;
}

.pager__gap {
  color: var(--dim);
  opacity: 0.5;
}

/* ------------------------------------------------------------------- Foot */

.foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 3rem;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--dim);
}

.foot a {
  text-decoration: none;
}

.foot a:hover {
  color: var(--accent);
}

/* ------------------------------------------------------------------ Admin
 *
 * Only ever rendered into the page for an admin session; for everyone else none of this
 * markup exists. Same voice as the filters -- mono labels, hairline borders.
 */

.admin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  border: 1px dashed var(--accent);
  padding: 8px 12px;
  margin-bottom: 1.5rem;
  font-size: 10px;
}

.admin-bar button {
  background: none;
  border: 0;
  color: var(--dim);
  font: inherit;
  text-transform: inherit;
  cursor: pointer;
  padding: 2px 0;
}

.admin-bar button:hover {
  color: var(--accent);
}

.dlg {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--accent);
  padding: 18px;
  width: min(30rem, calc(100vw - 28px));
}

.dlg::backdrop {
  background: rgb(0 0 0 / 0.6);
}

.dlg__form {
  display: grid;
  gap: 10px;
}

.dlg__form h2 {
  font-size: 11px;
  color: var(--accent);
}

.dlg__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.dlg__input {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  font-family: 'National Park', system-ui, sans-serif;
  font-size: 12px;
  padding: 6px 8px;
}

.dlg__input:focus {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

input.dlg__input[name='search'] {
  flex: 1;
}

textarea.dlg__input {
  font-family: 'National Park', system-ui, sans-serif;
  font-size: 0.9rem;
  resize: vertical;
}

.dlg__results {
  list-style: none;
  display: grid;
  max-height: 40vh;
  overflow-y: auto;
}

.dlg__results button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  padding: 6px 4px;
  cursor: pointer;
}

.dlg__results button:hover {
  color: var(--accent);
}

.dlg__results img {
  width: 32px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
}

.dlg__picked {
  font-size: 11px;
  color: var(--accent);
}

.dlg__check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--dim);
}

.dlg__actions {
  justify-content: flex-end;
}

.dlg__actions button {
  background: none;
  border: 1px solid var(--line);
  color: var(--text);
  font: inherit;
  font-size: 10px;
  padding: 5px 12px;
  cursor: pointer;
}

.dlg__actions button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.dlg__actions button:disabled {
  opacity: 0.4;
  cursor: default;
}

.dlg__delete {
  margin-right: auto;
  color: var(--dim);
}

.dlg__error {
  font-family: 'National Park', system-ui, sans-serif;
  font-size: 10px;
  color: var(--accent);
}

/* The edit button hanging off each entry's meta line. */
.entry__edit {
  background: none;
  border: 1px dashed var(--accent);
  color: var(--accent);
  font: inherit;
  font-size: 9px;
  text-transform: inherit;
  padding: 0 5px;
  cursor: pointer;
}

/* The admin login page's little form. */
.admin-login {
  display: flex;
  gap: 8px;
}

.admin-login button {
  background: none;
  border: 1px solid var(--line);
  color: var(--text);
  font-family: 'National Park', system-ui, sans-serif;
  font-size: 11px;
  padding: 5px 12px;
  cursor: pointer;
}

.admin-login button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------------------------------------------------- Tags, titles, months */

.entry__title a {
  color: inherit;
  text-decoration: none;
}

.entry__title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.entry__tag {
  text-decoration: none;
}

a.entry__tag:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.filters__tag {
  color: var(--accent);
  border: 1px dashed var(--accent);
  padding: 1px 6px;
}

.log__month-hours {
  color: var(--dim);
  margin-left: 8px;
}

.entry__coverlink {
  flex-shrink: 0;
  line-height: 0;
}

/* ------------------------------------------------------- Roundup collapse */

.roundup__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  cursor: pointer;
  list-style: none; /* the chevron is the marker */
}

.roundup__summary::-webkit-details-marker {
  display: none;
}

.roundup__title {
  margin-bottom: 0;
}

.roundup__chevron {
  color: var(--accent);
  font-size: 11px;
  transition: rotate 0.15s;
}

.roundup[open] .roundup__chevron {
  rotate: 180deg;
}

.roundup__collage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  width: 100%;
}

.roundup__collage img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  image-rendering: pixelated;
}


.roundup[open] .roundup__collage {
  display: none; /* the full list has taken over */
}

.roundup__list {
  margin-top: 12px;
}

/* ----------------------------------------------------------- Cover veil
 *
 * Same recipe as the favorites shelf's hover: flat ink over the artwork, red in both
 * themes, no blend mode (see the note in css/home/main.css about why flat).
 */

.entry__coverlink {
  position: relative;
  /* The entry row's align-items: stretch would pull this to the full entry height,
     and the veil (inset: 0) with it -- hug the artwork instead. */
  align-self: flex-start;
}

.entry__coverlink::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
}

.entry__coverlink:hover::after,
.entry__coverlink:focus-visible::after {
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .entry__coverlink::after,
  .month__chevron {
    transition: none;
  }
}

/* ---------------------------------------------------------------- Spoilers */

.spoiler {
  margin-top: 0.6rem;
}

.spoiler__warning {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  font-size: 10px;
  color: var(--accent);
  border: 1px dashed var(--accent);
  padding: 4px 10px;
}

.spoiler__warning::-webkit-details-marker {
  display: none;
}

.spoiler[open] .spoiler__warning {
  display: none; /* once lifted, the curtain doesn't hang around */
}

/* ------------------------------------------------------------ Hidden badge */

/* Only ever rendered for the admin -- the reminder that this one has a curtain. */
.entry__hidden {
  color: var(--bg);
  background: var(--accent);
  padding: 0 5px;
}