/*
 * Lantern's own admin. Dark always — not at the mercy of the visitor's OS,
 * because the only person here is Nathaniel and a client page repainting itself
 * is a different problem entirely (see viewer.css).
 */

body.admin {
  --ink: #ececec;
  --ink-soft: #b2b2b2;
  --rule: #333;
  --page: #141414;
  --panel: #1e1e1e;
  --surface: #1c1c1c;
  --shadow: none;

  /* The admin belongs to Lantern, not to any client, so it takes the lantern's
     own amber rather than whichever navy happens to be first in the client
     table. Sampled from the logo's flame. */
  --accent: #e0a44c;
  --accent-contrast: #1a1a1a;

  background: var(--page);
  color: var(--ink);
}

body.admin .errors { background: #2a1616; border-color: #4a2020; color: #f0b6b6; }

/* --- Header --------------------------------------------------------------- */

.admin__header {
  display: flex;
  /* Centre, not baseline: an image in the brand has no useful baseline, which
     is what once pushed the wordmark onto a second line. */
  align-items: center;
  padding: 0 1.5rem;
  background: #1a1a1a;
  border-bottom: 1px solid #2a2a2a;
  color: #fff;
}

.admin__brand {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  white-space: nowrap;
}

/* The logo gets 20px of room on every side. content-box on purpose: with the
   global border-box, padding would eat into the 78px and shrink the artwork
   rather than surround it. */
.admin__mark {
  box-sizing: content-box;
  height: 78px;
  width: auto;
  display: block;
  padding: 20px;
}

.admin__brandtext {
  /* Pulled left and dropped a little: the lens sits low in the artwork, so the
     beam passes under the wordmark's centre line unless the text meets it. */
  margin-left: -12px;
  transform: translateY(6px);
  padding-right: 0.75rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.admin__sub {
  color: #8d8d8d;
  font-size: 0.8rem;
  white-space: nowrap;
  transform: translateY(6px);
}

.admin__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.85rem;
}

.admin__nav a { color: #fff; text-decoration: none; border-bottom: 1px solid #4a4a4a; padding-bottom: 1px; }
.admin__nav a:hover { border-color: var(--accent); }
.admin__scope, .admin__user { color: #8d8d8d; }
.admin__nav button.linkish { color: #fff; }

.admin__main { max-width: 1000px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

.flash { padding: 0.85rem 1.5rem; background: #1c2a1c; border-bottom: 1px solid #2f4a2f; }
.flash p { margin: 0; word-break: break-all; }

/* --- Headings and rhythm -------------------------------------------------- */

.admin__main h1 { font-size: 1.6rem; margin: 0 0 1.25rem; line-height: 1.25; }

.admin__main h2 {
  font-size: 1.05rem;
  margin: 2.5rem 0 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}

.admin__main h2:first-of-type { margin-top: 2rem; }

/* A submit sitting flush against the last field reads as part of it. */
.admin__main form > input[type="submit"] { margin-top: 0.5rem; }
.admin__main fieldset + input[type="submit"] { margin-top: 0; }

/* --- Breadcrumbs ---------------------------------------------------------- */

.crumbs { margin: 0 0 1rem; font-size: 0.85rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.crumbs li + li::before { content: "›"; margin-right: 0.4rem; color: var(--ink-soft); }
.crumbs [aria-current="page"] { color: var(--ink-soft); }

/* --- Toolbars ------------------------------------------------------------- */

/* Actions sat as bare links jammed together. They are now chips with real
   spacing, which also keeps them from colliding with adjacent button_to forms. */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 2rem;
}

/* Tinted with the accent rather than sitting on the page as white boxes — a
   control should look like it belongs to the client's palette, not like a gap
   cut out of it. */
.toolbar > a,
.toolbar > form.button_to > button,
.media__action,
.rows__item > a {
  display: inline-block;
  border: 1px solid color-mix(in srgb, var(--accent-bright) 40%, var(--page));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-bright) 15%, var(--page));
  color: color-mix(in srgb, var(--accent) 85%, var(--ink));
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
}

.toolbar > a,
.toolbar > form.button_to > button { padding: 0.45rem 0.85rem; font-size: 0.9rem; }

.toolbar > a:hover,
.toolbar > form.button_to > button:hover,
.media__action:hover,
.rows__item > a:hover {
  background: color-mix(in srgb, var(--accent-bright) 30%, var(--page));
  border-color: var(--accent-bright);
  color: var(--ink);
  filter: none;
}

.toolbar button.danger,
.toolbar > .danger button {
  background: color-mix(in srgb, #8b2020 12%, var(--page));
  border-color: #6b2626;
  color: #e08b8b;
}

.toolbar button.danger:hover,
.toolbar > .danger button:hover { border-color: #a33; color: #ff9d9d; }

/* --- Lists ---------------------------------------------------------------- */

.cards, .rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }

.card, .rows__item {
  padding: 1rem 1.15rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.card { transition: border-color 120ms ease; }
.card:hover { border-color: #444; }
.card h2 { margin: 0 0 0.25rem; font-size: 1.1rem; border: 0; padding: 0; }
.card h2 a { text-decoration: none; }

.rows__item { display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.rows__item--stacked { flex-direction: column; align-items: stretch; gap: 0.75rem; }
.rows__main { flex: 1; min-width: 0; }
.card__meta, .rows__meta { color: var(--ink-soft); font-size: 0.85rem; margin: 0; }
.rows__meta code { font-size: 0.8rem; word-break: break-all; }
.rows__thumb { width: 100px; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; flex: none; }

/* Row actions need the same breathing room as a toolbar. */
.rows__item > a,
.rows__item > form.button_to { flex: none; }

.rows__item > a { padding: 0.35rem 0.7rem; font-size: 0.85rem; }

.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
}

/* --- The two links a leader hands out ------------------------------------- */

.links { display: grid; gap: 0.5rem; }
.links__row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0; }

.links__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  min-width: 5.5rem;
}

.links code {
  font-size: 0.8rem;
  word-break: break-all;
  background: #191919;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
}

/* --- Vimeo library -------------------------------------------------------- */

.filters {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.filters input[type="text"] { max-width: 260px; margin: 0; }
.warn { color: #d79a3f; }

/* --- Client preview ------------------------------------------------------- */

.preview {
  margin-bottom: 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

.preview iframe { display: block; width: 100%; height: 78vh; border: 0; background: #fff; }
.preview--tablet { max-width: 820px; }
.preview--phone { max-width: 420px; }
.preview__widths .is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

/* --- Sign in -------------------------------------------------------------- */

/* Transparent artwork, so the card needs no dark box of its own — it sits on
   the admin's own background. */
.signin { max-width: 380px; margin: 3rem auto; padding: 0 1.5rem; }
.signin__logo { display: block; width: 220px; height: auto; margin: 0 auto 1.75rem; }

/* --- A client admin's own surface ------------------------------------------
 *
 * Brighter than Nathaniel's, and in their colour, so it is obvious at a glance
 * whose tool you are in. Only the accent comes from the client: their page and
 * ink are chosen for a public site, and borrowing those would mean an admin
 * whose legibility depends on a marketing palette.
 */
body.admin--client {
  /* Their own page and ink where they have them — St Patrick's parchment rather
     than a white that fights it. Everything else is derived from those two, so
     the surface stays in key whatever a client's colours are. */
  --page: var(--client-page, #fbfaf8);
  --ink: var(--client-ink, #1e1e1c);
  /* 52% of a dark olive on parchment is a whisper. Muted text still has to be
     read, not merely present. */
  --ink-soft: color-mix(in srgb, var(--ink) 72%, var(--page));

  /* On a warm page, white reads as raised paper — which is where the depth
     comes from. --panel stays a deeper tint for things that sit *in* the page. */
  --surface: color-mix(in srgb, #ffffff 78%, var(--page));
  --panel: color-mix(in srgb, var(--ink) 8%, var(--page));
  --rule: color-mix(in srgb, var(--ink) 24%, var(--page));
}

body.admin--client .admin__header {
  background: var(--accent);
  border-bottom: 0;
  color: var(--accent-contrast);
}

body.admin--client .admin__brandtext,
body.admin--client .admin__nav a,
body.admin--client .admin__nav button.linkish { color: var(--accent-contrast); }

body.admin--client .admin__sub,
body.admin--client .admin__scope,
body.admin--client .admin__user { color: color-mix(in srgb, var(--accent-contrast) 70%, transparent); }

body.admin--client .admin__nav a { border-bottom-color: color-mix(in srgb, var(--accent-contrast) 45%, transparent); }
body.admin--client .admin__nav a:hover { border-bottom-color: var(--accent-contrast); }

body.admin--client .links code,
body.admin--client .panel__lead code { background: color-mix(in srgb, var(--ink) 10%, var(--page)); }
body.admin--client .errors { background: #fdeeee; border-color: #f0c0c0; color: #7a1f1f; }
body.admin--client .flash { background: #eef6ee; border-bottom-color: #cde0cd; color: #1e3a1e; }

/* A panel groups actions that act on something rather than fields that describe
   it — an API call, a destructive step. Deliberately unlike a fieldset, so it
   doesn't read as more of the form above it. */
.panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.35rem;
  margin: 0 0 2rem;
}

.panel__lead { margin: 0 0 1rem; }
.panel__lead code { background: #191919; padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.85rem; }
.panel .hint { margin-top: 0.6rem; }
.panel form { margin: 0; }

.panel--danger { border-color: #5a2626; background: #1d1414; }
.panel--danger p { margin: 0 0 1rem; }


/* --- Media list ------------------------------------------------------------
 *
 * Videos as cards with their thumbnail, because a list of titles gives no clue
 * which one you mean. The source is a badge rather than a raw id: which service
 * it comes from is worth knowing at a glance, the number never is.
 */
.media { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.75rem; }

/* Two across once there is room: these are short cards, and one per row left a
   column of white space as wide as the card itself. */
@media (min-width: 860px) {
  .media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.media__item {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.media__item.is-unpublished { opacity: 0.72; }

.media__thumb {
  position: relative;
  flex: none;
  width: 108px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
}

.media__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media__placeholder { color: var(--ink-soft); opacity: 0.5; }

.media__duration {
  position: absolute;
  right: 0.3rem;
  bottom: 0.3rem;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.media__body { flex: 1; min-width: 0; }

.media__heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.media__title { font-size: 0.98rem; line-height: 1.3; }
.media__blurb { margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 0.83rem; }

.media__action { flex: none; padding: 0.35rem 0.8rem; font-size: 0.85rem; }

.badge {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--accent-bright) 22%, var(--surface));
  color: color-mix(in srgb, var(--accent) 88%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--accent-bright) 45%, var(--surface));
}

.badge--muted {
  background: var(--panel);
  color: var(--ink-soft);
  border-color: var(--rule);
}

@media (max-width: 600px) {
  .media__item { flex-wrap: wrap; }
  .media__thumb { width: 100px; }
}

/* --- Page header and stat tiles -------------------------------------------- */

.pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.pagehead h1 { margin: 0 0 0.35rem; }
.pagehead__meta { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }
.pagehead__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.4rem; }

/* Single headline numbers, so tiles rather than a plot. Values wear ink, not
   the accent — colour here would imply an encoding that isn't there. */
.tiles {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.tile {
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent-bright);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.tile__value {
  display: block;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.tile__label {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 600;
}

/* --- Client bar ------------------------------------------------------------
 *
 * Persistent inside a client: which one you are in, and the way to everything
 * in it. It sits between Lantern's header and the page so the two identities
 * never compete.
 */
.clientbar {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow);
}

.clientbar__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.clientbar__identity { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }

.clientbar__name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}

.clientbar__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.clientbar__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.clientbar__nav a {
  display: block;
  padding: 0.5rem 0.8rem;
  border-bottom: 3px solid transparent;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.clientbar__nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--accent-bright) 10%, transparent); }

/* The underline marks where you are — the one thing a persistent nav must say. */
.clientbar__nav a.is-current {
  color: var(--ink);
  border-bottom-color: var(--accent-bright);
}

.clientbar__external { color: var(--ink-soft); }

/* A disclosure for "add one", so the primary action is at the top of the page
   without a permanent form pushing the list down. */
.adder { margin: 0 0 2rem; }

.adder > summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  padding: 0.5rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--accent-bright) 45%, var(--page));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-bright) 18%, var(--page));
  color: color-mix(in srgb, var(--accent) 88%, var(--ink));
  font-weight: 600;
  font-size: 0.9rem;
}

.adder > summary::-webkit-details-marker { display: none; }
.adder > summary::before { content: "+ "; font-weight: 700; }
.adder[open] > summary::before { content: "− "; }
.adder > summary:hover { background: color-mix(in srgb, var(--accent-bright) 30%, var(--page)); }

.adder__body {
  margin-top: 1rem;
  padding: 1.25rem 1.35rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.adder__body fieldset { background: transparent; border: 0; padding: 0; }

.links__copy {
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  border: 1px solid color-mix(in srgb, var(--accent-bright) 45%, var(--page));
  background: color-mix(in srgb, var(--accent-bright) 15%, var(--page));
  color: color-mix(in srgb, var(--accent) 85%, var(--ink));
}

.links__copy.is-copied {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}