@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --bg: #0D0D0D;
  --line: #364959;
  --primary: #BFBFBF;
  --muted: #8C8C8B;
  --text: #F0F0F2;
  --danger: #EA1F0A;
  --warn: #F2B138;
  --hover: #F25A38;
  --model: #6BA7BF; /* model tags */

  /* Material Web tokens */
  --md-ref-typeface-brand: 'Bebas Neue', Impact, sans-serif;
  --md-ref-typeface-plain: 'IBM Plex Sans', system-ui, sans-serif;
  --md-sys-color-primary: var(--model);
  --md-sys-color-on-primary: var(--bg);
  --surface: #171717;
  --md-sys-color-secondary: var(--model);
  --md-sys-color-on-secondary: var(--bg);
  --md-sys-color-tertiary: var(--warn);
  --md-sys-color-on-tertiary: var(--bg);
  --md-sys-color-error: var(--danger);
  --md-sys-color-on-error: var(--bg);
  --md-sys-color-surface: var(--bg);
  --md-sys-color-on-surface: var(--text);
  --md-sys-color-on-surface-variant: var(--muted);
  --md-sys-color-surface-container: var(--surface);
  --md-sys-color-surface-container-highest: var(--line);
  --md-sys-color-outline: var(--muted);
  --md-sys-color-outline-variant: var(--line);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  color-scheme: dark;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.5 'IBM Plex Sans', system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--text);
}

a { color: var(--primary); }
a:hover { color: var(--hover); }
hr { border: 0; border-top: 1px solid var(--line); }
small, .muted { color: var(--muted); }
mark { background: var(--warn); color: var(--bg); }
.error { color: var(--danger); }

/* layout */
.page { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; overflow-x: hidden; min-width: 0;
  padding: 1rem; border-right: 1px solid var(--line); display: flex; flex-direction: column;
}
.sidebar h2 { margin: 1.25rem 0 .5rem; font-size: 1.5rem; }
.sidebar ul { list-style: none; margin: 0; padding: 0; }

.grid {
  display: grid; gap: 1rem; padding: 1rem; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}
.cell { display: flex; flex-direction: column; gap: .5rem; padding: .5rem; border: 1px solid var(--line); background: var(--surface); }
.thumb { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #000; }
.thumb .bg { position: absolute; inset: -16px; width: calc(100% + 32px); height: calc(100% + 32px); object-fit: cover; filter: blur(12px) brightness(.55); cursor: default; }
.thumb img { position: relative; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; display: block; }
.cell footer { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }

.cell footer > a { color: var(--primary); flex: none; }

dialog#viewer { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100vh; }
dialog#viewer::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(8px); }
dialog#viewer img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-out; }

@media (max-width: 700px) {
  .page { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
}

.pager {
  grid-column: 1 / -1; justify-self: center; width: fit-content; max-width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem;
  margin: 1rem 0; padding: .375rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  --md-text-button-container-height: 36px;
  --md-text-button-leading-space: 10px;
  --md-text-button-trailing-space: 10px;
  --md-text-button-label-text-color: var(--text);
  --md-filled-button-container-height: 36px;
  --md-filled-button-leading-space: 10px;
  --md-filled-button-trailing-space: 10px;
}
.pager span { color: var(--muted); padding: 0 .25rem; }

.logo { display: block; text-align: center; }
.logo img { display: block; width: 100%; max-width: 274px; height: auto; margin: 0 auto; }

.badges, .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.badge { --name: var(--text); --edge: var(--muted); --tint: rgba(240, 240, 242, .06);
  display: inline-flex; font-size: 11px; line-height: 1; text-decoration: none; border-radius: 4px; overflow: hidden; border: 1px solid var(--edge); }
.badge.model { --name: color-mix(in srgb, var(--model) 45%, var(--text)); --edge: var(--model); --tint: rgba(107, 167, 191, .08); }
.badge span { padding: 3px 5px; color: var(--name); background: var(--tint); }
/* count: dull grey at the bottom decile, through yellow, to red at the top */
.badge b { padding: 3px 5px; font-weight: 600; color: var(--bg);
  background: color-mix(in oklab, var(--danger) calc(var(--w) * var(--w) * 100%), color-mix(in oklab, var(--warn) calc(var(--w) * 100%), var(--muted))); }
.badge:hover span { color: #fff; }
.badge:hover b { filter: brightness(1.15); }

.sidebar details { margin: 1.25rem 0 .5rem; }
.sidebar summary { cursor: pointer; font: 400 1.5rem/1.2 'Bebas Neue', Impact, sans-serif; letter-spacing: .03em; color: var(--text); margin-bottom: .5rem; list-style: none; }
.sidebar summary::-webkit-details-marker { display: none; }
.sidebar summary::after { content: '+'; float: right; color: var(--muted); }
.sidebar details[open] > summary::after { content: '\2212'; }

.menu a { display: block; padding: .4rem .75rem; border-radius: 6px; color: var(--text); text-decoration: none; }
.menu a[aria-current] { background: rgba(107, 167, 191, .15); color: var(--model); }
.menu a:hover { background: var(--warn); color: var(--bg); }

.heading { grid-column: 1 / -1; margin: 0; font-size: 2.5rem; line-height: 1; }

.search { grid-column: 1 / -1; display: grid; align-content: start; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; max-width: 1000px; }
.search fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 0; padding: .5rem .75rem; display: flex; flex-wrap: wrap; align-content: flex-start; gap: .25rem 1rem; }
.search legend { padding: 0 .25rem; color: var(--muted); }
.tagfield { position: relative; display: flex; flex-direction: column; gap: .5rem; }
md-filled-text-field {
  --md-filled-text-field-container-color: var(--surface);
  --md-filled-text-field-hover-state-layer-color: var(--text);
  --md-filled-text-field-active-indicator-color: var(--muted);
  --md-filled-text-field-hover-active-indicator-color: var(--line);
  --md-filled-text-field-focus-active-indicator-color: var(--model);
  --md-filled-text-field-input-text-color: var(--text);
  --md-filled-text-field-focus-input-text-color: var(--text);
  --md-filled-text-field-hover-input-text-color: var(--text);
  --md-filled-text-field-caret-color: var(--model);
  --md-filled-text-field-label-text-color: var(--muted);
  --md-filled-text-field-hover-label-text-color: var(--text);
  --md-filled-text-field-focus-label-text-color: var(--model);
  --md-filled-text-field-supporting-text-color: var(--muted);
  --md-filled-text-field-hover-supporting-text-color: var(--muted);
  --md-filled-text-field-focus-supporting-text-color: var(--muted);
  --md-filled-text-field-container-shape: 6px;
}
.tagfield .chips { min-height: 32px; }
/* tag chips: light tint, clear edge */
md-input-chip {
  --md-input-chip-container-height: 32px;
  --md-input-chip-container-shape: 6px;
  --md-input-chip-selected-container-color: var(--line);
  --md-input-chip-selected-label-text-color: var(--text);
  --md-input-chip-selected-outline-color: var(--model);
  --md-input-chip-selected-trailing-icon-color: var(--text);
  --md-input-chip-outline-color: var(--muted);
  --md-input-chip-label-text-color: var(--text);
  --md-input-chip-label-text-weight: 600;
  --md-input-chip-trailing-icon-color: var(--text);
  --md-input-chip-hover-trailing-icon-color: var(--hover);
}
.not md-input-chip { --md-input-chip-selected-container-color: #6b1409; --md-input-chip-selected-outline-color: var(--danger); }
/* category chips: off = quiet outline, on = solid cyan */
.search md-filter-chip {
  --md-filter-chip-container-height: 32px;
  --md-filter-chip-container-shape: 6px;
  --md-filter-chip-outline-color: var(--muted);
  --md-filter-chip-label-text-color: var(--text);
  --md-filter-chip-hover-label-text-color: var(--text);
  --md-filter-chip-selected-container-color: var(--model);
  --md-filter-chip-selected-label-text-color: var(--bg);
  --md-filter-chip-selected-hover-label-text-color: var(--bg);
  --md-filter-chip-selected-focus-label-text-color: var(--bg);
  --md-filter-chip-selected-pressed-label-text-color: var(--bg);
  --md-filter-chip-label-text-weight: 600;
  --md-filter-chip-selected-with-leading-icon-leading-icon-color: var(--bg);
  --md-filter-chip-with-leading-icon-leading-icon-color: var(--bg);
}
.search fieldset:last-of-type md-filter-chip { --md-filter-chip-selected-container-color: var(--danger); --md-filter-chip-selected-label-text-color: var(--text); --md-filter-chip-selected-hover-label-text-color: var(--text); --md-filter-chip-selected-focus-label-text-color: var(--text); --md-filter-chip-selected-pressed-label-text-color: var(--text); --md-filter-chip-selected-with-leading-icon-leading-icon-color: var(--text); }
.search .actions { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; }

.sidebar h2 a { color: inherit; text-decoration: none; }
.sidebar h2 a:hover, .sidebar h2 a[aria-current] { color: var(--model); }

.suggest { position: absolute; z-index: 10; left: 0; right: 0; top: 56px; margin: 0; padding: .25rem 0; list-style: none;
  max-height: 260px; overflow-y: auto; background: var(--surface); border: 1px solid var(--muted); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }
.suggest li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem .75rem; cursor: pointer; }
.suggest li.model { color: var(--model); }
.suggest li small { color: var(--muted); }
.suggest li:hover, .suggest li.active { background: rgba(240, 240, 242, .1); }

/* image page: as large as fits the viewport, never above natural size */
.detail { display: flex; flex-direction: column; gap: .75rem; height: 100vh; padding: 1rem; min-width: 0; }
.detail figure { flex: 1; min-height: 0; margin: 0; display: flex; justify-content: center; align-items: center; }
.detail figure img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.detail header { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.detail header small { color: var(--muted); }
/* category badge: solid steel name, light-grey count (fixed, not decile-colored) */
.badge.cat { --name: var(--text); --edge: var(--line); --tint: var(--line); }
.badge.cat b { background: var(--primary); }
.badge.cat:hover b { filter: brightness(1.15); }

.sidebar .rss { position: sticky; bottom: -1rem; margin: auto -1rem -1rem; padding: .75rem 1rem; background: var(--bg); border-top: 1px solid var(--line); color: var(--muted); display: flex; }
.sidebar .rss:hover { color: var(--hover); }

.search md-outlined-button { --md-outlined-button-outline-color: var(--muted); --md-outlined-button-label-text-color: var(--text); --md-outlined-button-icon-color: var(--hover); }

.tagfield md-filled-text-field { width: 100%; }