/* ===================================================================
   Shared look for every admin page.

   One stylesheet for the whole dashboard: change it here and all four
   pages follow. The rule throughout is room to breathe -- a mistake on
   these pages changes what every viewer sees, so nothing important
   should sit shoulder to shoulder with something else.
   =================================================================== */

:root {
  /* Warm paper, white cards, near-black text. The dashboards this is
     drawn from are all light in the middle with one dark rail down the
     side -- the rail is the only dark thing on the page, which is what
     makes it read as a frame rather than as another panel. */
  --bg: #f4f2ef;
  --panel: #ffffff;
  --card: #ffffff;
  --sunk: #f6f4f1;
  --line: #e5e0da;
  --line-soft: #eeeae5;
  --text: #17161b;
  --dim: #6b6676;
  --faint: #9a94a2;
  --brand: #ff2d55;
  --brand-soft: rgba(255, 45, 85, 0.1);
  --gold: #a9741a;
  --ok: #15924f;
  --warn: #9a5b06;
  --danger: #d81b48;

  /* Soft tints for tiles. One number per colour, never two the same
     next to each other. */
  --t-lime: #e4f2a8;
  --t-pink: #fbd9e9;
  --t-sun:  #fbe6a0;
  --t-sky:  #d8e6fb;
  --t-sage: #d9e8c2;
  --t-lilac:#e4dcf8;
  --t-ink:  #17161b;

  /* Generous corners. Nothing in the references is sharp. */
  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(23, 22, 27, 0.04),
            0 10px 30px rgba(23, 22, 27, 0.06);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  padding: 0 0 120px;
  -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------------
   Top bar. Where you are, and everywhere else you can go.
   ------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(11, 11, 15, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.3px;
  margin-right: 10px;
}
.brand .mark {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--brand), #ff7a4d);
  box-shadow: 0 2px 10px rgba(255, 45, 85, 0.4);
}
.links { display: flex; gap: 2px; flex-wrap: wrap; }
.links a {
  color: var(--dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 9px;
  transition: color .15s, background .15s;
}
.links a:hover { color: var(--text); background: rgba(23, 22, 27, 0.05); }
.links a.on { color: var(--text); background: rgba(23, 22, 27, 0.08); }
.topbar .spacer { flex: 1; }

/* -------------------------------------------------------------------
   Page frame
   ------------------------------------------------------------------- */
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

.pagehead { padding: 40px 0 28px; }
.pagehead .back {
  display: inline-block;
  color: var(--dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px;
}
.pagehead .back:hover { color: var(--text); }
h1 {
  font-size: 32px;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.8px;
  font-weight: 800;
}
.sub { color: var(--dim); margin: 8px 0 0; font-size: 15px; max-width: 60ch; }

/* A labelled group of cards. */
.section {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
  color: var(--faint);
  margin: 40px 0 12px;
}
.section:first-child { margin-top: 0; }

/* -------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 6px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
/* Cards holding free-standing labels and inputs rather than .field
   rows need their own padding back. */
.card.pad { padding: 24px; }

/* -------------------------------------------------------------------
   A row inside a card: what it is on the left, the control on the right
   ------------------------------------------------------------------- */
.field {
  padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
}
.field:last-child { border-bottom: 0; }
.field .name { font-weight: 600; font-size: 15px; }
.field .help {
  color: var(--dim);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 4px;
  max-width: 58ch;
}
.field input, .field select, .field textarea { margin-bottom: 0; }
.field input + input, .field select + input { margin-top: 10px; }
.field .name + input,
.field .name + select,
.field .help + input,
.field .help + select,
.field .help + textarea { margin-top: 12px; }

/* Wide screens put the control beside its label instead of beneath. */
@media (min-width: 760px) {
  .field:not(.row):not(.stack) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    column-gap: 36px;
    align-items: start;
  }
  .field:not(.row):not(.stack) > .name { grid-column: 1; }
  .field:not(.row):not(.stack) > .help { grid-column: 1; }
  .field:not(.row):not(.stack) > input,
  .field:not(.row):not(.stack) > select,
  .field:not(.row):not(.stack) > textarea,
  .field:not(.row):not(.stack) > button {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin-top: 0;
  }
  /* Several controls that belong to one setting, stacked together. */
  .field:not(.row):not(.stack) > .ctl {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
  /* A button is as wide as its words, not as wide as the column. */
  .field:not(.row):not(.stack) > button { justify-self: end; }
  /* Anything laid out for itself spans the whole row. */
  .field:not(.row):not(.stack) > .row,
  .field:not(.row):not(.stack) > .two { grid-column: 1 / -1; }
}

.ctl > * + * { margin-top: 10px; }
.field .name + .ctl, .field .help + .ctl { margin-top: 12px; }
@media (min-width: 760px) {
  .field:not(.row):not(.stack) > .help + .ctl,
  .field:not(.row):not(.stack) > .name + .ctl { margin-top: 0; }
}
.row { display: flex; align-items: center; gap: 18px; }
.row > div:first-child { flex: 1; min-width: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------
   Form controls
   ------------------------------------------------------------------- */
label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--dim);
  margin-bottom: 7px;
}
input[type=email], input[type=password], input[type=number],
input[type=text], input[type=url], input[type=datetime-local], select, textarea {
  width: 100%;
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  margin-bottom: 16px;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--dim) 50%),
    linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px),
                       calc(100% - 13px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
input[type=color] {
  width: 100%; height: 46px; padding: 4px; background: var(--sunk);
  border: 1px solid var(--line); border-radius: 10px; margin-bottom: 16px;
}

/* -------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------- */
button {
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: filter .15s, background .15s, border-color .15s;
}
button:hover:not(:disabled) { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: default; }
button.full { width: 100%; }
button.ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 600;
}
button.ghost:hover:not(:disabled) {
  background: rgba(23, 22, 27, 0.04);
  border-color: #cfc9c1;
}
button.danger {
  background: transparent;
  border: 1px solid rgba(255, 107, 133, 0.3);
  color: var(--danger);
  font-weight: 600;
}
button.danger:hover:not(:disabled) {
  background: rgba(255, 107, 133, 0.1);
  border-color: rgba(255, 107, 133, 0.55);
}
button.sm { padding: 8px 14px; font-size: 13px; }

/* The save bar follows you down the page, so the way to keep your work
   is never somewhere you have to go looking for. */
.savebar {
  position: sticky;
  bottom: 0;
  margin: 28px -24px 0;
  padding: 16px 24px;
  background: linear-gradient(to top, var(--bg) 62%, rgba(244, 242, 239, 0));
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 30;
}
.savebar button { min-width: 170px; }
.savebar .hint { color: var(--faint); font-size: 13px; }

/* -------------------------------------------------------------------
   Messages
   ------------------------------------------------------------------- */
.msg {
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
.msg.err  { background: rgba(255,45,85,.08); color: #b00e37; border-color: rgba(255,45,85,.22); }
.msg.ok   { background: rgba(21,146,79,.08); color: var(--ok); border-color: rgba(21,146,79,.22); }
.msg.warn { background: rgba(154,91,6,.08); color: var(--warn); border-color: rgba(154,91,6,.22); }
.hidden { display: none !important; }

/* -------------------------------------------------------------------
   Switch, built from a checkbox so it needs no library
   ------------------------------------------------------------------- */
.sw { position: relative; width: 50px; height: 30px; flex: none; }
.sw input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sw span {
  position: absolute; inset: 0; border-radius: 999px;
  background: #d9d4cd; transition: background .18s; pointer-events: none;
}
.sw span::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; transition: transform .18s;
  box-shadow: 0 1px 3px rgba(23,22,27,.28);
}
.sw input:checked + span { background: var(--brand); }
.sw input:checked + span::after { transform: translateX(20px); }

.who {
  color: var(--faint);
  font-size: 12px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  word-break: break-all;
}

/* -------------------------------------------------------------------
   Sign in
   ------------------------------------------------------------------- */
.authbox { max-width: 400px; margin: 10px auto 0; }

/* -------------------------------------------------------------------
   The list of stories
   ------------------------------------------------------------------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.toolbar .spacer { flex: 1; }
.toolbar .count { color: var(--dim); font-size: 14px; }

/* minmax(0, 1fr) rather than 1fr: a plain 1fr column refuses to go
   narrower than its widest contents, so on a half-width window the
   story cards grew past the right edge of the page instead of
   shrinking. */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 820px) { .grid { grid-template-columns: 1fr; } }

.story {
  display: flex; gap: 14px; align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, transform .15s, background .15s;
}
.story:hover {
  border-color: #d5cfc7;
  box-shadow: 0 6px 20px rgba(23, 22, 27, 0.08);
  transform: translateY(-1px);
}
.poster {
  width: 50px; height: 71px; border-radius: 8px; flex: none;
  object-fit: cover; background: #e9e5e0;
}
.story { min-width: 0; }
.story .meta { flex: 1; min-width: 0; }
.story .t {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.story .d { color: var(--dim); font-size: 13px; margin-top: 3px; }
.pill {
  display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px;
  padding: 3px 9px; margin-right: 5px; vertical-align: 1px;
}
.pill.hot  { background: var(--t-pink); color: #a81243; }
.pill.soon { background: var(--t-sun); color: #7a4704; }
.pill.live { background: var(--t-sage); color: #2b5e19; }
.pill.off  { background: #ece8e3; color: var(--dim); }
.chev { color: var(--faint); flex: none; }

/* -------------------------------------------------------------------
   Episode rows on the story editor
   ------------------------------------------------------------------- */
.ep {
  display: flex; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.ep:last-child { border-bottom: 0; }
.ep .num {
  width: 32px; color: var(--faint);
  font-variant-numeric: tabular-nums; flex: none; font-size: 13px;
}
.ep input { margin: 0; padding: 10px 12px; font-size: 14px; }
.ep .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ep .dot.has { background: var(--ok); }
.ep .dot.none { background: #d9d4cd; }

/* -------------------------------------------------------------------
   Choosing video files to upload
   ------------------------------------------------------------------- */
input[type=file] {
  width: 100%; background: var(--sunk); border: 1px dashed var(--line);
  border-radius: 12px; color: var(--dim); padding: 20px; font-size: 14px;
  margin-bottom: 16px; cursor: pointer;
}
input[type=file]:hover { border-color: #cfc9c1; }
input[type=file]::file-selector-button {
  background: #ece8e3; color: var(--text); border: 0; border-radius: 999px;
  padding: 9px 16px; margin-right: 12px; font-size: 14px;
  font-weight: 600; cursor: pointer;
}
input[type=file]:disabled { opacity: .5; cursor: default; }

@media (max-width: 640px) {
  .wrap, .topbar-inner { padding-left: 16px; padding-right: 16px; }
  .savebar { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  h1 { font-size: 26px; }
  .pagehead { padding: 28px 0 22px; }
  .card { padding: 4px 18px; }
  .card.pad { padding: 18px; }
}


/* ===================================================================
   THE SHELL
   -------------------------------------------------------------------
   Taken from the five dashboards Almat chose. What they share, and
   what is copied here:

     * one dark rail down the left against a light page -- the rail is
       the only dark thing, which is what makes it read as a frame
       rather than as another panel
     * the section you are in is a solid filled pill, not a tint
     * big corners, pill buttons, nothing sharp anywhere
     * the account sits top right, above the page
     * numbers live on soft coloured blocks, one colour each
     * one dark card among the light ones, to carry the thing worth
       reading
   =================================================================== */

:root {
  --rail: 256px;
  --rail-bg: #17161b;
}

body.shelled { padding-left: var(--rail); }

.shell {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--rail);
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--rail-bg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.shell .brand {
  padding: 24px 22px 20px;
  margin: 0;
  font-size: 17px;
  color: #fff;
}
.shell .brand .mark {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}

.shell .rail {
  flex: 1;
  padding: 0 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.shell .railhead {
  padding: 16px 10px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6f6a7a;
}

.shell a.item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 999px;
  color: #a9a3b4;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  transition: background 0.12s, color 0.12s;
}
.shell a.item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

/* Solid, not a wash. In every reference the current section is the one
   block of colour in the rail, and nothing else competes with it. */
.shell a.item.on {
  background: var(--brand);
  color: #fff;
  font-weight: 650;
}
.shell a.item.on .later {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.shell a.item svg {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell a.item.pending { color: #7d7788; }
.shell a.item.pending:hover { color: #fff; }
/* Last word, because a section can be both the current one and one
   with nothing behind it yet, and then it must still be readable. */
.shell a.item.on,
.shell a.item.on.pending { color: #fff; }
.shell a.item .later {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #8d8799;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 3px 7px;
}

/* The small card at the foot of the rail, as Eduplex has. It earns its
   place by saying something true rather than by decorating. */
.shell .foot { padding: 16px 14px 20px; }
.shell .pad {
  background: var(--t-lime);
  color: var(--t-ink);
  border-radius: 18px;
  padding: 16px 16px 14px;
}
.shell .pad .t { font-weight: 700; font-size: 13.5px; }
.shell .pad .d {
  font-size: 12px;
  line-height: 1.45;
  margin-top: 5px;
  color: #4a4a2e;
}

/* -------------------------------------------------------------------
   The line above the page: who is signed in, and the way out.
   ------------------------------------------------------------------- */
.topline {
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px 24px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 7px 5px 5px;
  box-shadow: var(--shadow);
}
.chip .av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand), #ff7a4d);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
}
.chip .em {
  font-size: 13px;
  color: var(--dim);
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 560px) { .chip .em { display: none; } }

.topline button.ghost {
  border-radius: 999px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

/* With the top line there, the page heading needs less air above it. */
body.shelled .pagehead { padding-top: 22px; }
body.shelled .wrap.wide,
body.shelled .topline.wide { max-width: 1240px; }


/* ===================================================================
   TILES -- one number, on its own colour
   -------------------------------------------------------------------
   The rule the references all follow: a tile says one thing, the
   number is large enough to read across a desk, and the colour is
   what tells the tiles apart at a glance. A tile that needs a second
   look to work out what it counts has failed.
   =================================================================== */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.tile {
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: 20px 22px 22px;
  box-shadow: var(--shadow);
  color: var(--t-ink);
}
.tile.lime  { background: var(--t-lime); }
.tile.pink  { background: var(--t-pink); }
.tile.sun   { background: var(--t-sun); }
.tile.sky   { background: var(--t-sky); }
.tile.sage  { background: var(--t-sage); }
.tile.lilac { background: var(--t-lilac); }

.tile .k {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.62;
}
.tile .v {
  font-size: 34px;
  font-weight: 760;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.tile .n { font-size: 12.5px; margin-top: 7px; opacity: 0.65; }
.tile .n.up { color: #1d6b36; opacity: 1; font-weight: 600; }
.tile .n.down { color: #a81243; opacity: 1; font-weight: 600; }

/* No honest number yet, so it says so rather than showing a zero that
   looks like a measurement. */
.tile.empty .v { opacity: 0.45; font-weight: 650; font-size: 21px; }


/* ===================================================================
   SECTION LANDING -- the tools inside one part of the dashboard
   =================================================================== */
.tools { display: grid; gap: 14px; }
@media (min-width: 760px) { .tools { grid-template-columns: 1fr 1fr; } }

.tool {
  display: block;
  position: relative;
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: 20px 22px 22px;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform 0.14s, box-shadow 0.14s;
}
a.tool:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(23, 22, 27, 0.12);
}

/* The soft rounded square an icon or initial sits in, straight out of
   Eduplex and Projector. Here it carries the first letter, because an
   invented icon per tool would say less than the word already does. */
.tool .sq {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 14px;
  background: var(--t-sky);
  color: var(--t-ink);
}
.tool:nth-child(2n) .sq { background: var(--t-pink); }
.tool:nth-child(3n) .sq { background: var(--t-lime); }
.tool:nth-child(4n) .sq { background: var(--t-sun); }

.tool .t { font-weight: 700; font-size: 16px; letter-spacing: -0.2px; }
.tool .d { color: var(--dim); font-size: 13.5px; margin-top: 7px; line-height: 1.55; }

.tool .flag {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
  background: #f0ece7;
  border-radius: 999px;
  padding: 4px 9px;
}
.tool.locked .t { color: var(--text); }

/* One dark card among the light ones -- the Eduplex "Go Premium"
   trick. Used for the single thing on a page worth actually reading. */
.note {
  background: var(--t-ink);
  color: #e9e6ef;
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
}
.note strong { color: #fff; }
.note a { color: #ffa7b9; }
.note a:hover { color: #fff; }


/* Links written into help text. Left to the browser they come out the
   default blue, which belongs to no part of this design. */
.help a, .sub a, .tool .d a { color: var(--brand); }
.help a:hover, .sub a:hover { color: var(--text); }


/* -------------------------------------------------------------------
   Narrow screens. The rail slides away and a bar with a menu button
   takes its place, because 256px of rail on a phone leaves nowhere to
   read.
   ------------------------------------------------------------------- */
.mobilebar { display: none; }
.scrim { display: none; }

@media (max-width: 900px) {
  body.shelled { padding-left: 0; }

  .shell {
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 0 0 50px rgba(23, 22, 27, 0.3);
  }
  body.railopen .shell { transform: none; }

  .mobilebar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 11px 16px;
    background: rgba(244, 242, 239, 0.92);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line-soft);
  }
  .mobilebar .brand { font-size: 15px; color: var(--text); }

  .topline { padding-top: 14px; }
  body.railopen .scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(23, 22, 27, 0.4);
  }
}

/* The menu button. Three lines, nothing clever. */
.burger {
  width: 40px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.burger span {
  display: block;
  width: 15px;
  height: 1.7px;
  background: var(--text);
  box-shadow: 0 -5px 0 var(--text), 0 5px 0 var(--text);
}


/* ===================================================================
   OVERVIEW
   -------------------------------------------------------------------
   Panels that hold a short list rather than a single number, plus the
   small bar chart and the activity trail the references use.
   =================================================================== */
.cols { display: grid; gap: 14px; margin-top: 14px; }
@media (min-width: 900px) { .cols.two-up { grid-template-columns: 1.15fr 1fr; } }

.panel {
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: 20px 22px 14px;
  box-shadow: var(--shadow);
}
.panel > h2 {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin: 0 0 2px;
}
.panel > .cap { color: var(--faint); font-size: 12.5px; margin-bottom: 14px; }
.panel .none {
  color: var(--faint);
  font-size: 13.5px;
  line-height: 1.6;
  padding: 10px 0 16px;
}

/* A row with a name, a number, and a bar showing its share. */
.lrow { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.lrow:last-child { border-bottom: 0; }
.lrow .top { display: flex; align-items: baseline; gap: 10px; }
.lrow .nm {
  font-weight: 600; font-size: 14px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lrow .qt {
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 14px; flex: none;
}
.lrow .sm { color: var(--faint); font-size: 12px; flex: none; }
.bar {
  height: 7px; border-radius: 999px; background: #efece7;
  margin-top: 8px; overflow: hidden;
}
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }

/* Something that needs doing. */
.todo {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: var(--text);
}
.todo:last-child { border-bottom: 0; }
.todo .w { font-weight: 650; font-size: 14px; }
.todo .y { color: var(--dim); font-size: 13px; margin-top: 3px; line-height: 1.5; }
.todo:hover .w { color: var(--brand); }
.todo .mark {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); margin-right: 9px; vertical-align: 2px;
}

/* The trail of what you changed, as in Lector's recent activity. */
.act { display: flex; gap: 12px; padding: 10px 0; }
.act .when {
  width: 86px; flex: none; color: var(--faint);
  font-size: 12px; padding-top: 2px;
}
.act .dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  margin-top: 6px; background: var(--t-lilac);
}
.act .dot.save { background: var(--t-lime); }
.act .dot.in { background: var(--t-sky); }
.act .what { font-size: 13.5px; }
.act .what .q { color: var(--dim); }

/* The quiet strip of standing totals under the day's numbers. */
/* Flex rather than grid: when these wrap onto a second row they
   stretch to fill it. A grid left a grey hole where the fifth cell
   would have been, which looked like something had failed to load. */
.strip {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  background: var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 14px;
}
.strip > div {
  background: var(--panel);
  padding: 16px 18px;
  flex: 1 1 150px;
  min-width: 0;
}
.strip .k { font-size: 12.5px; font-weight: 600; color: var(--faint); }
.strip .v {
  font-size: 20px; font-weight: 720; margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

/* Before anything has been recorded at all. */
.firstday {
  background: var(--t-ink);
  color: #e9e6ef;
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  line-height: 1.6;
  font-size: 14.5px;
}
.firstday h2 { margin: 0 0 8px; font-size: 19px; color: #fff; }


/* ===================================================================
   USERS
   =================================================================== */
.split { display: grid; gap: 14px; align-items: start; }
@media (min-width: 1000px) { .split { grid-template-columns: 320px minmax(0, 1fr); } }

/* The search box sits in the panel rather than above it, so it is
   clearly searching the list underneath and nothing else. */
.finder input { margin-bottom: 10px; }
/* Pinned only where there is a column for it to be pinned in. On a
   phone the list sits above the person, and a sticky panel there just
   covers up what you came to read. */
@media (min-width: 1000px) { .finder { position: sticky; top: 14px; } }

.person {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  padding: 10px 11px; border-radius: 14px;
  background: transparent; border: 1px solid transparent;
  color: var(--text); cursor: pointer; font: inherit;
}
.person:hover { background: var(--sunk); }
.person.on { background: var(--brand-soft); border-color: rgba(255,45,85,.2); }
.person .av {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--t-sky); color: var(--t-ink);
  font-weight: 800; font-size: 13px; text-transform: uppercase;
}
.person.anon .av { background: var(--t-lilac); }
.person .nm {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.person .cn {
  flex: none; font-size: 12px; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.person .vip {
  flex: none; font-size: 10px; font-weight: 800; color: #6b4a05;
  background: var(--t-sun); border-radius: 999px; padding: 2px 6px;
}

/* One line of the coin ledger. */
.led {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.led:last-child { border-bottom: 0; }
.led .amt {
  width: 66px; flex: none; text-align: right;
  font-weight: 750; font-variant-numeric: tabular-nums; font-size: 14px;
}
.led .amt.plus { color: #15924f; }
.led .amt.minus { color: #c21244; }
.led .bod { flex: 1; min-width: 0; }
.led .rs { font-size: 13.5px; font-weight: 600; }
.led .dt { color: var(--dim); font-size: 12.5px; margin-top: 2px; }
.led .bal {
  flex: none; color: var(--faint); font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 3px 9px; background: #efece7;
  color: var(--dim);
}
.tag.good { background: var(--t-sage); color: #2b5e19; }
.tag.gold { background: var(--t-sun); color: #6b4a05; }

/* The two dangerous forms, held apart from everything else. */
.act2 { display: grid; gap: 14px; }
@media (min-width: 760px) { .act2 { grid-template-columns: 1fr 1fr; } }
.act2 .panel { padding-bottom: 20px; }
.inline { display: flex; gap: 10px; align-items: flex-start; }
.inline input { margin-bottom: 10px; }
.inline .w1 { width: 108px; flex: none; }

/* The two per-episode controls on the story page. Narrow on purpose:
   the title is the thing being read down the column, and these sit
   beside it rather than competing with it. */
.ep .epac { width: 168px; flex: none; margin: 0; padding: 9px 30px 9px 11px; font-size: 13px; }
.ep .eppr { width: 84px; flex: none; margin: 0; padding: 9px 10px; font-size: 13px; }
@media (max-width: 760px) {
  .ep { flex-wrap: wrap; }
  .ep .epac { width: 150px; }
  .ep .eppr { width: 72px; }
}

/* ===================================================================
   Analytics
   =================================================================== */
.an-period { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.an-period span { color: var(--dim); font-size: 13.5px; margin-right: 4px; }
.an-period button {
  background: var(--panel); color: var(--text); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600;
  box-shadow: none; cursor: pointer;
}
.an-period button.on { background: var(--t-ink); color: #fff; border-color: var(--t-ink); }

.an-days { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding: 6px 0 22px; }
.an-days .d { flex: 1; height: 100%; position: relative; display: flex; align-items: flex-end; min-width: 0; }
.an-days .d i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--brand); }
.an-days .d span {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 6px; font-size: 11px; color: var(--faint); white-space: nowrap;
}

.an-pick { margin-bottom: 10px; }
.an-verdict { font-size: 13.5px; line-height: 1.6; color: var(--dim); margin: 4px 0 12px; }
.an-verdict strong { color: var(--text); }
.an-ep { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.an-ep .k { width: 44px; flex: none; font-size: 12.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.an-ep .bar { flex: 1; margin-top: 0; height: 9px; }
.an-ep .v { width: 38px; flex: none; text-align: right; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.an-ep .p { width: 40px; flex: none; text-align: right; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.an-ep .t { width: 104px; flex: none; text-align: right; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.an-ep .s { width: 118px; flex: none; text-align: right; }
@media (max-width: 760px) { .an-ep .s { width: auto; } }
.an-wall {
  margin: 8px 0 4px; padding-top: 8px; border-top: 2px dashed #e4ddd5;
  font-size: 11.5px; font-weight: 700; color: #a81243; letter-spacing: 0.2px;
}

.an-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 8px; }
.an-tbl th {
  text-align: left; font-size: 11.5px; font-weight: 700; color: var(--faint);
  text-transform: uppercase; letter-spacing: 0.4px; padding: 0 10px 10px 0;
}
.an-tbl td { padding: 11px 10px 11px 0; border-top: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.an-tbl td.wk { font-weight: 600; }
.an-tbl td.wait { color: var(--faint); font-size: 12.5px; }
.an-tbl .of { color: var(--faint); font-size: 12px; margin-left: 8px; }
.an-pc { display: inline-block; min-width: 44px; padding: 3px 8px; border-radius: 999px; font-weight: 700; font-size: 12.5px; text-align: center; }
.an-pc.good { background: var(--t-sage); color: #2b5e19; }
.an-pc.ok   { background: var(--t-sun);  color: #6b4a05; }
.an-pc.low  { background: var(--t-pink); color: #a81243; }

.an-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--dim); margin-bottom: 4px; }
.an-legend span { display: inline-flex; align-items: center; gap: 6px; }
.an-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.an-stack { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: #efece7; margin-top: 8px; }
.an-stack i { display: block; height: 100%; }
.an-legend i.free, .an-stack i.free   { background: #b9d98a; }
.an-legend i.coins, .an-stack i.coins { background: #f2b630; }
.an-legend i.ads, .an-stack i.ads     { background: #7fa7e8; }
.an-legend i.vip, .an-stack i.vip     { background: var(--brand); }

/* ===================================================================
   Content Collections
   =================================================================== */
.co-mode { display: inline-flex; background: #efece7; border-radius: 999px; padding: 3px; margin-bottom: 12px; }
.co-mode button {
  background: transparent; color: var(--dim); border: 0; box-shadow: none;
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.co-mode button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.co-list { border-top: 1px solid var(--line-soft); margin-bottom: 10px; }
.co-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.co-row .no { width: 22px; flex: none; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.co-row .nm { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-row .pill { flex: none; }
.co-row button { flex: none; padding: 6px 10px; }
.co-add select { margin: 0; }
.co-warn { color: #a81243; }
.co-prev-head { margin-top: 16px; font-size: 11.5px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: 0.4px; }
.co-prev { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 4px; }
.co-p { flex: none; width: 74px; }
.co-prev.wide .co-p { width: 150px; }
.co-p img, .co-p .ph {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px;
  background: #222;
}
.co-prev.wide .co-p img, .co-prev.wide .co-p .ph { aspect-ratio: 16 / 10; }
.co-p .ph { color: rgba(255,255,255,0.75); font-size: 10px; font-weight: 800; padding: 6px; overflow: hidden; }
.co-p span { display: block; font-size: 11px; color: var(--dim); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-save { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.co-save .hint { color: var(--faint); font-size: 12.5px; }

.an-export { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--dim); font-size: 13px; }
.an-export button { background: transparent; border: 1px dashed #cfc8bf; color: var(--text); box-shadow: none; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.an-export button:hover { border-style: solid; }
@media (max-width: 760px) { .an-ep .t { display: none; } .an-export { margin-left: 0; } }

/* Sign-in box: title, note and the small links under the button. */
.authtitle { font-size: 18px; font-weight: 750; letter-spacing: -0.2px; margin-bottom: 12px; }
.authnote { margin: -4px 0 14px; }
.authlinks { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; font-size: 13px; }
.authlinks a { color: var(--brand); text-decoration: none; }
.authlinks a:hover { text-decoration: underline; }

/* ===================================================================
   Team and Activity
   =================================================================== */
.tm-roles { display: grid; gap: 8px; margin: 6px 0 4px; }
@media (min-width: 760px) { .tm-roles { grid-template-columns: 1fr 1fr; } }
.tm-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px; cursor: pointer; font-size: 13.5px; }
.tm-check input { width: auto; margin: 3px 0 0; flex: none; }
.tm-check small { color: var(--faint); font-size: 12px; }
.tm-actions { margin-top: 12px; display: flex; gap: 10px; }
.tm-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.tm-row:last-child { border-bottom: 0; }
.tm-who { flex: 1; min-width: 220px; }
.tm-who .name { font-weight: 650; }
.tm-chips { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tm-btns { display: flex; gap: 8px; }
.tm-editor { flex-basis: 100%; }
.tm-role { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.tm-role:last-of-type { border-bottom: 0; }
.tm-role .name { font-weight: 650; }
.tm-permline { margin-top: 4px; font-size: 12px; }
.tm-role button { margin-top: 8px; }
.tm-new { margin-top: 14px; }
.tm-new summary { cursor: pointer; color: var(--brand); font-weight: 650; font-size: 14px; }
.tm-perms { display: grid; gap: 6px; }
@media (min-width: 760px) { .tm-perms { grid-template-columns: 1fr 1fr; } }

.ac-filters { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.ac-filters select { width: auto; min-width: 200px; margin: 0; }
.ac-filters input { flex: 1; min-width: 200px; margin: 0; }
.ac-row { padding: 14px 20px; border-bottom: 1px solid var(--line-soft); }
.ac-row:last-child { border-bottom: 0; }
.ac-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.ac-when { color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ac-who { font-weight: 650; font-size: 13.5px; }
.ac-what { font-size: 13.5px; }
.ac-diff { margin-top: 8px; border-collapse: collapse; font-size: 12.5px; width: 100%; }
.ac-diff td { padding: 3px 8px 3px 0; vertical-align: top; word-break: break-word; }
.ac-diff .k { color: var(--dim); font-weight: 650; width: 140px; }
.ac-diff .b { color: #a81243; text-decoration: line-through; opacity: .8; }
.ac-diff .arrow { color: var(--faint); width: 16px; }
.ac-diff .a { color: #1d6b36; }
.ac-fields { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--dim); }

/* The on-page "Are you sure?" (askSure in admin.js). */
.sure-shade { position: fixed; inset: 0; background: rgba(20, 18, 24, 0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.sure-box { background: var(--panel); border-radius: 16px; padding: 22px; max-width: 440px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
.sure-text { white-space: pre-line; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.sure-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.pill.gold { background: var(--t-sun); color: #6b4a05; }