/* ---------------------------------------------------------------
   motionref_xyz
   Tokens are estimated from screenshots — replace with your real
   values and the whole site follows.
   --------------------------------------------------------------- */

/* Kode Mono is self-hosted. The @font-face rules live in
   fonts/kode-mono.css, generated by `node fetch-font.js` and linked
   from index.html ahead of this file.

   Prefer Google's CDN? Drop that link and use this instead:
   <link rel="stylesheet"
         href="https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap"> */

:root {
  --bg:            #25282c;
  --surface:       #33373c;
  --surface-hover: #3d4147;
  --text:          #c8ccd0;
  --text-dim:      #8a9096;
  --text-bright:   #e8ebee;
  --accent:        #f2eb3a;
  --accent-ink:    #16181a;
  --scrim:         rgba(0, 0, 0, .88);

  --font-mono: 'Kode Mono', ui-monospace, 'SF Mono', 'Cascadia Mono',
               'Roboto Mono', Menlo, Consolas, monospace;

  --gap: 8px;
  --pad: 28px;
  --radius: 0px;
}

* { box-sizing: border-box; }

html { scrollbar-color: var(--surface) var(--bg); }

body {
  margin: 0;
  padding: var(--pad);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------ header */

.head { margin-bottom: 26px; }

.wordmark {
  margin: 0 0 2px;
  font-size: 33px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-bright);
}

.tagline {
  position: relative;
  margin: 0;
  padding-bottom: 9px;
  color: var(--text);
}

/* The short accent rule under the start of the tagline.
   Measured in ch so it tracks the type instead of drifting
   when the base size changes. */
.tagline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 15ch;
  height: 2px;
  background: var(--accent);
}

/* ------------------------------------------------------------ chips */

.chip {
  display: inline-block;
  padding: 2px 6px;
  margin: 0 3px 5px 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  line-height: 1.45;
  text-decoration: none;
  cursor: pointer;
  transition: background .08s linear, color .08s linear;
}

.chip:hover,
.chip:focus-visible {
  background: var(--accent);
  color: var(--accent-ink);
  outline: none;
}

.chip[aria-pressed='true'] {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Tag facet count. Hide the counts entirely by setting display: none. */
.chip .n {
  margin-left: 6px;
  opacity: .45;
  font-size: .85em;
}

.chip[aria-pressed='true'] .n { opacity: .6; }

/* A tag that would return nothing alongside the current filter.
   Still clickable — clicking replaces the filter rather than adding. */
.chip.dead {
  opacity: .3;
}

.chip.dead:hover {
  opacity: 1;
}

/* ------------------------------------------------------------ controls */

.controls { margin-bottom: 22px; }

.tagcloud {
  max-width: 74ch;
  margin-bottom: 16px;
}

.searchrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

/* The field and the button need the same box model, or their top and
   bottom edges won't line up. Two things fight that by default:

   1. .chip carries `margin-bottom: 5px` so chips breathe when the tag
      cloud wraps onto several lines. In a flex row that margin is part
      of the margin box, so centring shifts the chip up by half of it.
   2. An input and a button pad and line-height differently.

   Fixing both with an explicit height is more reliable than trying to
   match paddings, since box-sizing: border-box makes the height final. */
.search,
.searchrow .chip {
  height: 28px;
  margin: 0;
  padding: 0 9px;
  border: 0;
  border-radius: var(--radius);
  font: inherit;
}

.searchrow .chip {
  display: inline-flex;
  align-items: center;
}

.search {
  width: 260px;
  max-width: 100%;
  background: var(--surface);
  color: var(--text-bright);
  caret-color: var(--accent);
}

.search::placeholder { color: var(--text-dim); }

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

.search::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }

.sortrow {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.count {
  margin-left: 10px;
  color: var(--text-dim);
  font-size: 12px;
}

/* ------------------------------------------------------------ grid */

.grid {
  position: relative;
  width: 100%;
}

/* Thin cross cursor over thumbnails, drawn as an inline SVG so it's
   pixel-exact rather than whatever crosshair the OS supplies.
   The 32 32 at the end is the hotspot — dead centre of the cross.

   The dark pass under the white one is a legibility outline: pure white
   disappears over pale clips like the grey mouse render. For the plain
   white cross with no outline, delete the first <path>. */
.cell {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background: var(--surface);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 32 32'%3E%3Cpath d='M16 8v22M5 16h22' stroke='%23000' stroke-opacity='.4' stroke-width='3.5'/%3E%3Cpath d='M16 5v22M5 16h22' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 32 32, crosshair;
  contain: strict;
}

.cell img,
.cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cell video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .25s linear;
}

.cell video.ready { opacity: 1; }

.cell::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color .08s linear;
}

.cell:hover::after,
.cell:focus-visible::after { border-color: var(--accent); }

.cell.picked::after { border-color: var(--accent); }

/* Add-to-board control. Hidden until hover on pointer devices, always
   visible once picked, and always visible on touch where there is no hover. */
.pick {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .1s linear, background .1s linear;
}

.cell:hover .pick,
.pick:focus-visible { opacity: 1; }

.cell.picked .pick {
  opacity: 1;
  background: var(--accent);
  color: var(--accent-ink);
}

.pick:hover { background: var(--accent); color: var(--accent-ink); }

@media (hover: none) {
  .pick { opacity: 1; }
}

/* ------------------------------------------------------------ actions */

.actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.btn {
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  cursor: pointer;
}

.btn:hover, .btn:focus-visible { background: var(--text-bright); outline: none; }
.btn[hidden] { display: none; }

.empty {
  padding: 40px 0;
  color: var(--text-dim);
}

.linkish {
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ------------------------------------------------------------ lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--scrim);
}

.lightbox[hidden] { display: none; }

.lb-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  max-height: 100%;
}

.lb-stage {
  display: flex;
  min-height: 0;
}

.lb-stage video,
.lb-stage img {
  display: block;
  max-width: min(1100px, 84vw);
  max-height: 72vh;
  object-fit: contain;
  background: #000;
}

.lb-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 18px 0 0;
  max-width: 84vw;
}

.lb-meta dt {
  justify-self: end;
  font-weight: 700;
  color: var(--text-bright);
  white-space: nowrap;
}

.lb-meta dd {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.lb-meta dd.desc { max-width: 62ch; }

.lb-meta a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--text-dim); }
.lb-meta a:hover { color: var(--accent); border-color: var(--accent); }

.lb-meta .tagbtn {
  border: 0;
  padding: 0;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.lb-meta .tagbtn:hover { color: var(--accent); }

.lb-close, .lb-nav {
  position: absolute;
  border: 0;
  background: none;
  color: var(--text-bright);
  font-family: var(--font-mono);
  cursor: pointer;
  line-height: 1;
  opacity: .55;
  transition: opacity .1s linear;
}

.lb-close:hover, .lb-nav:hover,
.lb-close:focus-visible, .lb-nav:focus-visible { opacity: 1; outline: none; }

.lb-close { top: 18px; right: 24px; font-size: 40px; }
.lb-nav   { top: 50%; transform: translateY(-50%); font-size: 26px; padding: 20px; }
.lb-prev  { left: 8px; }
.lb-next  { right: 8px; }

/* ------------------------------------------------------------ related */

.lb-related {
  display: flex;
  gap: 6px;
  margin-top: 18px;
  max-width: 84vw;
  overflow-x: auto;
}

.lb-related[hidden] { display: none; }

.rel {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  padding: 0;
  border: 2px solid transparent;
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
}

.rel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rel:hover, .rel:focus-visible { border-color: var(--accent); outline: none; }

.lb-pick { margin-top: 12px; }

/* ------------------------------------------------------------ tray */

.tray {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px var(--pad);
  background: var(--surface);
  border-top: 2px solid var(--accent);
}

.tray[hidden] { display: none; }

.tray-strip {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.tray-strip img {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: cover;
  display: block;
}

.tray-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tray-actions .chip,
.tray-actions .btn { margin: 0; }

.tray-count { color: var(--text-dim); white-space: nowrap; }

/* Keep the last row of the grid clear of the tray. */
body:has(.tray:not([hidden])) main { padding-bottom: 68px; }

/* ------------------------------------------------------------ board */

.board[hidden] { display: none; }

.board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.board-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-bright);
}

.board-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.board-actions .chip,
.board-actions .btn { margin: 0; }

.board-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bcard {
  display: flex;
  gap: 14px;
  padding: 8px;
  background: rgba(255, 255, 255, .025);
}

.bthumb {
  position: relative;
  flex: 0 0 auto;
  width: 168px;
  height: 168px;
  padding: 0;
  border: 0;
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
}

.bthumb img,
.bpreview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bpreview { position: absolute; inset: 0; }

.bbody {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.bbody h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-bright);
}

.bbody p { margin: 0; max-width: 68ch; }

.bmeta a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--text-dim); }
.bmeta a:hover { color: var(--accent); border-color: var(--accent); }

.btags { color: var(--text-dim); }

.bbody .chip { margin: auto 0 0; }

/* ------------------------------------------------------------ toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  z-index: 60;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: var(--accent);
  color: var(--accent-ink);
}

.toast[hidden] { display: none; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 720px) {
  :root { --pad: 16px; }
  .wordmark { font-size: 24px; }
  .search { width: 100%; }
  .lightbox { padding: 16px; }
  .lb-stage video, .lb-stage img { max-height: 50vh; max-width: 92vw; }
  .lb-meta { grid-template-columns: 1fr; gap: 0 0; max-width: 92vw; }
  .lb-meta dt { justify-self: start; margin-top: 8px; }
  .lb-related { max-width: 92vw; }
  .lb-nav { padding: 12px; }

  .tray { flex-wrap: wrap; gap: 8px; }
  .tray-strip { order: 2; flex-basis: 100%; }
  .tray-actions { flex-wrap: wrap; }
  body:has(.tray:not([hidden])) main { padding-bottom: 130px; }

  .bcard { flex-direction: column; }
  .bthumb { width: 100%; height: auto; aspect-ratio: 1; }
}

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

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; }
}