/* ============================================================================
   feed.css — the entire look. THEME: black & grey computer terminal.
   Monospace, square "cells", bracketed controls, pure monochrome (no color).

   All look-and-feel lives here and is token-driven. The grid/markup hooks
   (.tile, .paste*, .profile*, #avatar, [data-handle] …) are untouched — only
   presentation changes. Swap --accent for a phosphor look (see below).
   ========================================================================== */

:root {
  --bg:        #0a0a0a;   /* terminal black */
  --bg-raise:  #0f0f10;   /* cell fill before media loads */
  --ink:       #cccccc;   /* grey type */
  --ink-dim:   #6f6f74;   /* dim grey / comments */
  --line:      rgba(255, 255, 255, 0.14); /* grey cell borders / hairlines */
  --accent:    #e6e6e6;   /* light-grey highlight (was chartreuse) */
  /* phosphor swaps — change --accent above to one of these:
     green: #3bd16f   amber: #ffb000 */

  --font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --wrap:      935px;
  --cols:      3;
  --gap:       12px;
  --radius:    0;         /* square everything — terminal cells */
  --edge:      clamp(12px, 3vw, 20px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.2s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

::selection { background: var(--accent); color: #000; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--edge); }

/* ---- Profile header (terminal head) --------------------------------------- */
.profile {
  display: flex;
  align-items: center;
  gap: clamp(16px, 4vw, 36px);
  padding: clamp(24px, 5vw, 48px) 0 clamp(18px, 4vw, 32px);
}

.profile__avatar {
  flex: none;
  width: clamp(64px, 15vw, 104px);
  height: clamp(64px, 15vw, 104px);
  border-radius: var(--radius);       /* square */
  background: var(--bg-raise) center / cover no-repeat;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: clamp(20px, 5vw, 34px);
  font-weight: 700;
  color: var(--ink-dim);
  overflow: hidden;
}
.profile__avatar.has-img { color: transparent; }

.profile__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.profile__top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.profile__handle {
  font-size: clamp(17px, 4vw, 21px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Instagram logo link (replaces Follow) */
.profile__ig {
  display: inline-grid;
  place-items: center;
  color: var(--ink-dim);
  line-height: 0;
  transition: color var(--dur) var(--ease);
}
.profile__ig:hover { color: var(--accent); }

/* video / photo section tabs */
.tabs { display: flex; align-items: center; gap: 18px; font-size: 13px; }
.tabs__link {
  color: var(--ink-dim);
  letter-spacing: 0.02em;
  transition: color var(--dur) var(--ease);
}
/* underline lives on the label word only — so the "// " prefix stays clean */
.tabs__link span {
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease);
}
.tabs__link:hover { color: var(--ink); }
.tabs__link.is-active { color: var(--ink); }
.tabs__link.is-active span { border-bottom-color: var(--accent); }
.tabs__link:first-child::before { content: "// "; color: var(--ink-dim); }

/* empty-section note (e.g. photo page before photos are added) */
.grid-empty {
  color: var(--ink-dim);
  font-size: 13px;
  padding: 40px 2px 80px;
}
.grid-empty::before { content: "// "; }

/* ---- Command bar (paste-to-add) ------------------------------------------- */
.paste { margin-bottom: 18px; }
.paste__row { display: flex; align-items: stretch; gap: 8px; }
.paste__row::before {
  content: "$";
  flex: none;
  display: grid;
  place-items: center;
  padding: 0 4px 0 2px;
  color: var(--ink-dim);
  font-weight: 700;
}
.paste__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  caret-color: var(--accent);
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  transition: border-color var(--dur) var(--ease);
}
.paste__input::placeholder { color: var(--ink-dim); }
.paste__input:focus { outline: none; border-color: var(--accent); }

/* [ add ] */
.paste__add {
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  padding: 0 16px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.paste__add::before { content: "[ "; color: var(--ink-dim); }
.paste__add::after  { content: " ]"; color: var(--ink-dim); }
.paste__add:hover { background: var(--accent); color: #000; border-color: var(--accent); }
.paste__add:hover::before, .paste__add:hover::after { color: #000; }

.paste__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-dim);
}
.paste__spacer { flex: 1 1 auto; }
.paste__count { color: var(--ink-dim); }
.paste__note { min-height: 1em; }
.paste__note.is-ok { color: var(--accent); }
.paste__note.is-err { color: #e06c75; }

/* [reorder] [set loops] [copy for publish] [clear added] */
.paste__link {
  background: none; border: 0; padding: 2px 2px;
  color: var(--ink-dim); font: inherit; font-size: 12px;
  cursor: pointer; text-decoration: none;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.paste__link::before { content: "["; }
.paste__link::after  { content: "]"; }
.paste__link:hover { color: var(--accent); }
.paste__link.is-on { color: #000; background: var(--accent); }

/* ---- Grid (cells) --------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
  padding-bottom: 64px;
}

/* Photo grid: ROW-MAJOR grid — photos read left→right (1,2,3…) then wrap, each
   at its EXACT aspect (never cropped). Inherits display:grid + columns + gap
   from .grid; align-items:start keeps shorter (landscape) tiles from stretching. */
.grid--masonry { align-items: start; padding-bottom: 64px; }
.grid--masonry .tile { aspect-ratio: auto; }        /* drop the square */
.grid--masonry .tile__img {
  position: static;            /* flow at natural size, no crop */
  width: 100%;
  height: auto;
}

/* Reorder mode: compact square thumbnails where drag is reliable + nudge arrows */
.grid--sort {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
  padding-bottom: 64px;
}
.grid--sort .tile { aspect-ratio: 1 / 1; }
.tile__idx {
  position: absolute; top: 3px; left: 3px;
  min-width: 17px; height: 16px; padding: 0 3px;
  background: rgba(0, 0, 0, 0.72); border: 1px solid var(--line);
  color: var(--ink); font-size: 10px; line-height: 15px; text-align: center;
  z-index: 2; pointer-events: none;
}
.tile__nudge {
  position: absolute; bottom: 3px;
  width: 22px; height: 20px;
  background: rgba(0, 0, 0, 0.72); border: 1px solid var(--line);
  color: var(--ink); font-size: 12px; line-height: 1;
  display: grid; place-items: center; cursor: pointer; z-index: 3;
  opacity: 0; transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.grid--sort .tile:hover .tile__nudge { opacity: 1; }
.tile__nudge--prev { left: 3px; }
.tile__nudge--next { right: 3px; }
.tile__nudge:hover { border-color: var(--accent); color: var(--accent); }

.tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-raise);
  overflow: hidden;
  display: block;
  outline: none;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease);
}
.tile:hover { border-color: var(--accent); }

/* Empty placeholder cell (no post yet) */
.tile--empty {
  background: transparent;
  border: 1px dashed var(--line);
}

/* Muted looping video layer (over the poster; transparent until playing). */
.tile__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  /* sit a touch larger than the tile so the clip's bottom-edge line is clipped */
  transform: scale(1.04);
  transition: opacity var(--dur) var(--ease);
}
.tile__video.is-playing { opacity: 1; }

/* ---- Reorder mode --------------------------------------------------------- */
.grid.editing .tile { cursor: grab; }
.grid.editing .tile:hover { border-color: var(--accent); }
.grid.editing .tile.dragging { opacity: 0.4; cursor: grabbing; }
.grid.editing .tile__remove { opacity: 1; }
.tile__grip {
  position: absolute;
  left: 50%; bottom: 6px; transform: translateX(-50%);
  color: var(--ink);
  font-size: 15px; letter-spacing: -2px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  pointer-events: none;
}

/* ---- Set-loops mode (scrubber overlay) ------------------------------------ */
.grid.looping .tile { cursor: default; }
.grid.looping .tile__remove { display: none; }
.loopbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85) 40%);
  z-index: 3;
}
.loopbar__range {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--accent);
  cursor: pointer;
  height: 16px;
}
.loopbar__len {
  flex: none;
  font-size: 11px; font-weight: 500;
  color: var(--ink); background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2px 6px; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.loopbar__len:hover { background: var(--accent); color: #000; border-color: var(--accent); }
.loopbar__read {
  flex: none;
  font-size: 10px;
  color: var(--ink);
  min-width: 62px; text-align: right;
}

/* A tile bound to a real link but without a captured still yet */
.tile__glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-dim);
}
.tile__code {
  position: absolute;
  left: 0; right: 0; bottom: 9px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  pointer-events: none;
}

/* Remove (×) control on authoring tiles */
.tile__remove {
  position: absolute;
  top: 5px; right: 5px;
  width: 22px; height: 22px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px; line-height: 1;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  z-index: 2;
}
.tile:hover .tile__remove,
.tile:focus-within .tile__remove { opacity: 1; }
.tile__remove:hover { background: #b3261e; border-color: #b3261e; color: #fff; }

/* Rotate control (photo manager) — top-left, mirror of remove */
.tile__rotate {
  position: absolute;
  top: 5px; left: 5px;
  width: 22px; height: 22px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 2;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tile__rotate:hover { border-color: var(--accent); color: var(--accent); }

.tile__ph {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--a), var(--b));
}

.tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur) var(--ease);
}

.tile__ov {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.tile__ov svg { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6)); }

/* Hover / keyboard focus: reveal glyph, gently push in the still */
.tile:hover .tile__ov,
.tile:focus-visible .tile__ov { opacity: 1; }
.tile:hover .tile__img,
.tile:focus-visible .tile__img { transform: scale(1.03); }
.tile:focus-visible { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* ---- Footer --------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 22px 0 40px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  color: var(--ink-dim);
}
.footer a { transition: color var(--dur) var(--ease); }
.footer a:hover { color: var(--accent); }
.footer__spacer { margin-left: auto; }

/* ---- Motion / responsive -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tile__img, .tile__ov { transition: none; }
  .tile:hover .tile__img { transform: none; }
}

/* Keep 3-up on phones; gutters shrink but cells stay separated. */
@media (max-width: 600px) {
  :root { --gap: 6px; }
  .paste__add { padding: 0 12px; }
}