/* Live Twice — Edit Tracker.
   Phone first. Leo opens this standing up, between edits; James, Hamish and
   Indiah paste into it one-handed while scrolling Reels. Every decision below
   follows from that: big tap targets, one column, no hover-only affordances,
   and the tick is the largest control on the row.

   Monochrome with a single functional accent (LT red, #e90053) used ONLY for
   the primary action and the "left to do" count. No second accent anywhere. */

:root {
  --bg: #ffffff;
  --surface: #fafafa;
  --surface-2: #f4f4f5;
  --border: #e5e5e8;
  --border-soft: #f0f0f2;
  --text: #17171a;
  --text-2: #5c5c66;
  --text-3: #86868f;

  --accent: #e90053;
  --accent-hover: #c70047;
  --accent-tint: rgba(233, 0, 83, 0.07);

  --ok: #15803d;
  --ok-bg: #f0fdf4;
  --ok-bd: #d3f0dd;

  --r-card: 12px;
  --r-ctl: 9px;
  --tap: 44px;            /* iOS minimum comfortable tap target */
  --wrap: 720px;
}

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

/* [hidden] MUST WIN. Any class that sets `display` beats the browser's own
   `[hidden] { display: none }`, so `.previewbar { display: flex }` left the
   "you are viewing as Leo" banner permanently on screen even though the
   attribute was correctly set. Global, so the next element with a display rule
   does not repeat it. */
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;               /* 16px min or iOS Safari zooms on focus */
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 48px;
}

a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- shell ------------------------------------------------------ */

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

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-in {
  max-width: var(--wrap); margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; min-height: 56px;
}
/* nowrap + a shrinking spacer: at 390px the brand, the name and the button do
   not all fit, and letting the brand wrap drove it straight into the sign-out
   button. The suffix and the name are the two things worth losing first. */
.brand { font-weight: 700; letter-spacing: -0.02em; font-size: 17px; white-space: nowrap; }
.brand span { color: var(--text-3); font-weight: 500; }
.spacer { flex: 1; min-width: 0; }
.who { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 460px) {
  .brand span { display: none; }
}
@media (max-width: 380px) {
  .who { display: none; }
}

.btn {
  min-height: var(--tap); padding: 0 18px; border-radius: var(--r-ctl);
  border: 1px solid var(--border); background: var(--bg); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.btn-link { border: 0; background: none; color: var(--text-2); text-decoration: underline; padding: 0; min-height: 0; }

/* ---------- creator tabs ----------------------------------------------- */

.tabs {
  display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; min-height: var(--tap); padding: 0 16px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg);
  font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.tab[aria-selected="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.tab .n {
  font-size: 12px; font-weight: 700; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--accent-tint); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.tab[aria-selected="true"] .n { background: rgba(255,255,255,0.18); color: #fff; }
.tab .n.zero { background: var(--surface-2); color: var(--text-3); }

/* ---------- add box ----------------------------------------------------- */

.add {
  margin: 14px 0 20px; padding: 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card);
}
.add .row { display: flex; flex-direction: column; gap: 10px; }
.add input[type="url"], .add input[type="text"], .add select, .add input[type="password"], .add input[type="email"] {
  width: 100%; min-height: var(--tap); padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--bg);
}
.add select { padding-right: 34px; }
.add .two { display: flex; gap: 10px; }
.add .two > * { flex: 1; min-width: 0; }
.hint { font-size: 13px; color: var(--text-3); }

/* ---------- list -------------------------------------------------------- */

.sec-head {
  display: flex; align-items: baseline; gap: 10px;
  margin: 22px 0 10px; padding-top: 4px;
}
.sec-head h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }

.card {
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--bg); padding: 14px; margin-bottom: 10px;
  display: flex; gap: 12px; align-items: flex-start;
}
.card.done { background: var(--surface); border-color: var(--border-soft); }
.card.done .card-link { color: var(--text-3); text-decoration: line-through; }

.card-body { flex: 1; min-width: 0; }
/* The Dropbox reference. Tap to copy — it is the join key between this row and
   the filename Leo saves, so it leads the card. */
.ref {
  display: inline-block; margin-bottom: 6px; padding: 3px 9px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2);
  font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.06em; color: var(--text);
}
.ref:hover { border-color: var(--text-3); }
.ref.copied { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.card.done .ref { opacity: 0.55; }

/* Clamped to two lines. A full TikTok URL is ~55 characters and at 390px it
   ran to three wrapped lines of monospace-ish noise, which pushed the note and
   the "added by" line — the two things that tell you what this row IS — below
   the fold of the card. The href is still the whole URL. */
.card-link {
  font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-clamp: 2; overflow: hidden; word-break: break-all;
  line-height: 1.35; margin-bottom: 4px;
}
.card-note { color: var(--text-2); font-size: 14px; margin-bottom: 4px; word-break: break-word; }
.card-meta { font-size: 13px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px; background: var(--surface-2); color: var(--text-2);
}

/* Priority is a select, styled to read as a chip. Only "Do now" gets the accent
   — the single-accent rule means the urgent bucket is the one thing on the row
   competing with the tick for attention, which is correct. */
.prio {
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 3px 22px 3px 7px; border-radius: 5px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-2); -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 9px center, right 5px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  min-height: 26px;
}
.prio-asap           { background-color: var(--accent-tint); border-color: rgba(233,0,83,0.25); color: var(--accent); }
.prio-very_important { background-color: #fff1e8; border-color: #f6d3bd; color: #b4460b; }
.prio-important      { background-color: #fff8e6; border-color: #f0e0b4; color: #8a6a12; }
.prio-normal         { opacity: 0.85; }
.prio:disabled { opacity: 0.45; }

/* The tick is the biggest thing on the row — it is the only control Leo needs
   while holding a phone in one hand. */
.tick {
  flex: 0 0 auto; width: var(--tap); height: var(--tap); border-radius: 50%;
  border: 2px solid var(--border); background: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
}
.tick svg { width: 22px; height: 22px; stroke: var(--text-3); stroke-width: 3; fill: none; }
.tick:hover { border-color: var(--text-3); }
.tick[aria-pressed="true"] { background: var(--ok-bg); border-color: var(--ok-bd); }
.tick[aria-pressed="true"] svg { stroke: var(--ok); }
.tick:disabled { opacity: 0.4; cursor: not-allowed; }
.tick.busy { opacity: 0.5; }

.empty {
  text-align: center; padding: 40px 20px; color: var(--text-3);
  border: 1px dashed var(--border); border-radius: var(--r-card);
}

.flash {
  margin: 12px 0; padding: 12px 14px; border-radius: var(--r-ctl);
  border: 1px solid var(--border); background: var(--surface); font-size: 14px;
}
.flash.err { border-color: #f5c6d3; background: #fff1f5; color: #a30040; }
.flash.ok { border-color: var(--ok-bd); background: var(--ok-bg); color: var(--ok); }

/* ---------- auth pages -------------------------------------------------- */

.auth { max-width: 380px; margin: 12vh auto 0; padding: 0 20px; }
.auth h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.auth p.sub { color: var(--text-2); margin-bottom: 22px; font-size: 15px; }
.auth label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.auth input {
  width: 100%; min-height: var(--tap); padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--bg);
}
.auth .btn { width: 100%; margin-top: 20px; }

/* ---------- admin table ------------------------------------------------- */

/* Wide content scrolls inside its own container so the PAGE never scrolls
   sideways. tabindex="0" is required or the scroll region is unreachable by
   keyboard (axe: scrollable-region-focusable). */
.tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-card); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); font-weight: 700; }
tr:last-child td { border-bottom: 0; }

/* ---------- view as Leo ------------------------------------------------- */

.previewbar {
  margin: 14px 0 4px; padding: 10px 14px; border-radius: var(--r-ctl);
  background: var(--text); color: #fff; font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.previewbar button {
  border: 1px solid rgba(255,255,255,0.35); background: transparent; color: #fff;
  border-radius: 6px; padding: 4px 10px; font-size: 13px; font-weight: 600;
}
.previewbar button:hover { background: rgba(255,255,255,0.12); }

/* Leo's screen is a WORK LIST, not an admin console. He does not add items, so
   the whole add box goes; the Done pile is collapsed to a single line because
   what he needs on opening it is "what is next", and a finished pile pushing
   the work below the fold is the thing that made WhatsApp useless for this. */
body.leo-view #doneh::after {
  content: ' — tap to show';
  font-weight: 500; text-transform: none; letter-spacing: 0;
}
body.leo-view #doneh { cursor: pointer; }
body.leo-view #done { display: none; }
body.leo-view #done.open { display: block; }

/* Priority is information for Leo, not a control — he works the order he is
   given. Left readable, but it stops looking like something to fiddle with. */
body.leo-view .prio { pointer-events: none; background-image: none; padding-right: 7px; }

/* ---------- due date ---------------------------------------------------- */

.duefield {
  display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2);
}
.duefield input[type="date"] {
  flex: 1; min-height: var(--tap); padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--bg);
}

.pill-who { background: var(--text); color: #fff; }

/* Overdue is the ONE place a second colour is justified — it is a different
   kind of fact from priority, and Leo needs it to survive a glance. */
.due { background: var(--surface-2); color: var(--text-2); text-transform: none; letter-spacing: 0; }
.due-today { background: #fff7ed; color: #b45309; }
.due-late  { background: var(--accent-tint); color: var(--accent); font-weight: 700; }

/* ---------- Queue / Schedule switch ------------------------------------- */

/* A segmented control, not two more pills: these two are a MODE, and the
   creator and platform rows below them are filters. Making them look the same
   would read as a third filter row. */
.viewswitch {
  display: flex; gap: 4px; margin: 14px 0 2px; padding: 4px;
  background: var(--surface-2); border-radius: var(--r-ctl); width: fit-content;
}
.vbtn {
  min-height: 36px; padding: 0 18px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text-2); font-weight: 600; font-size: 14px;
}
.vbtn[aria-selected="true"] {
  background: var(--bg); color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* The platform row is subordinate to the creator row — same control, quieter. */
.subtabs { padding-top: 8px; }
.subtabs .tab { min-height: 36px; padding: 0 13px; font-size: 14px; font-weight: 600; }
.subtabs .tab .n { min-width: 20px; height: 20px; font-size: 11px; }

/* ---------- destination platforms --------------------------------------- */

.targets {
  border: 1px solid var(--border); border-radius: var(--r-ctl);
  padding: 8px 12px 10px; background: var(--bg);
}
.targets legend {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-3); padding: 0 4px;
}
.targets label {
  display: inline-flex; align-items: center; gap: 7px; margin-right: 18px;
  min-height: 32px; font-size: 15px; font-weight: 500;
}
.targets input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }

/* Monochrome on purpose. The single-accent rule means the accent belongs to the
   primary action and to urgency — a brand colour per platform would put two
   more competing colours on every row, and the word already says which it is. */
.pill-tiktok, .pill-instagram {
  background: var(--bg); border: 1px solid var(--border); color: var(--text-2);
  text-transform: none; letter-spacing: 0; font-weight: 600;
}
.pill-instagram { border-style: dashed; }
.pill-posted { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }

/* ---------- edit panel --------------------------------------------------- */

.card-actions { margin-top: 8px; display: flex; gap: 14px; align-items: center; }
.card-actions .btn-link { font-size: 13px; min-height: 32px; }

.panel {
  margin-top: 12px; padding: 12px; border-radius: var(--r-ctl);
  background: var(--surface); border: 1px solid var(--border);
}
.panel-fields { display: flex; flex-direction: column; gap: 10px; }
.panel input[type="url"], .panel input[type="text"], .panel textarea {
  width: 100%; min-height: var(--tap); padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--bg);
}
.panel textarea { min-height: 62px; resize: vertical; line-height: 1.4; }
.panel .duefield input[type="date"] { background: var(--bg); }
.panel-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.panel-h {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-3); margin-bottom: 8px;
}
.panel-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Leo's screen keeps the note, loses the editing. He works the list; the people
   who own what is on it are the ones who change what it says. */
body.leo-view .panel-fields { display: none; }
body.leo-view .card-actions .btn-link { font-weight: 600; }

/* ---------- Leo's note back --------------------------------------------- */

.makernote {
  margin: 8px 0 6px; padding: 9px 11px; border-radius: 8px;
  background: var(--surface-2); color: var(--text-2);
  font-size: 14px; line-height: 1.4; word-break: break-word;
}
.makernote strong { color: var(--text); }
/* Blocked is the one state that has to survive a glance down a long list, so it
   borrows the accent — the same treatment overdue gets, for the same reason. */
.makernote.is-blocked {
  background: var(--accent-tint); color: #8d0033;
  border: 1px solid rgba(233,0,83,0.2);
}
.makernote.is-blocked strong { color: var(--accent); }
.card.blocked { border-color: rgba(233,0,83,0.35); }

/* ---------- schedule: the week board ------------------------------------ */

/* Direction A, picked by James from three mockups on 15 Sep 2026. Seven day
   columns on a desktop; the same seven as stacked rows on a phone, because a
   150px column cannot hold a post AND a date input. */

.weekbar { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 12px; flex-wrap: wrap; }
.weekbar h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.weekcount { font-size: 13px; color: var(--text-3); }
.wnav { margin-left: auto; display: flex; gap: 6px; }
.wbtn {
  min-height: 38px; padding: 0 13px; border: 1px solid var(--border);
  border-radius: var(--r-ctl); background: var(--bg); font-weight: 600; font-size: 14px;
}
.wbtn:hover { background: var(--surface-2); }
.wbtn:disabled { opacity: 0.45; cursor: default; }

.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: stretch; }
.day {
  border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg);
  display: flex; flex-direction: column; min-height: 190px;
}
.day.past { background: var(--surface); }
/* Today is the only thing on this screen that gets a ring. The accent stays on
   the missed state, where it means something has gone wrong. */
.day.today { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); background: var(--bg); }
.day.dragover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }
.dayh {
  padding: 9px 10px 7px; border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: baseline; gap: 6px;
}
.dayh b { font-size: 15px; letter-spacing: -0.01em; }
.dayh .dow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-3);
}
.day.today .dayh .dow { color: var(--accent); }
.daybody { padding: 8px; display: flex; flex-direction: column; gap: 7px; flex: 1; }

.post {
  border: 1px solid var(--border); border-left: 3px solid var(--text-3);
  border-radius: 8px; padding: 7px 8px; background: var(--bg);
}
.post:hover { border-color: var(--text-3); }
/* Platform is carried by the left edge, not by a colour: solid for TikTok,
   dashed for Instagram, matching the pills on the queue. */
.post-tiktok { border-left-color: #17171a; }
.post-instagram { border-left-color: #9a9aa3; border-left-style: dashed; }
.post.posted { background: var(--ok-bg); border-color: var(--ok-bd); border-left-color: var(--ok); }
.post.posted .post-ttl { color: var(--text-2); }
.post.late { background: var(--accent-tint); border-color: rgba(233,0,83,0.3); border-left-color: var(--accent); }
.post-t { font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-2); }
.post-ttl {
  font-size: 13px; font-weight: 600; line-height: 1.3; margin: 3px 0 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2;
  overflow: hidden; word-break: break-word;
}
.post-row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.post-st { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.st {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text-3);
}
.st.ok { color: var(--ok); }
.st.bad { color: var(--accent); }
.post-open {
  margin-top: 6px; border: 0; background: none; padding: 0; min-height: 26px;
  font-size: 12px; font-weight: 600; color: var(--text-2); text-decoration: underline;
}
.post-panel { margin-top: 7px; display: flex; flex-direction: column; gap: 6px; }
.post-panel input[type="date"], .post-panel input[type="time"] {
  width: 100%; min-height: 38px; padding: 0 8px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg); font-size: 13px;
}
.post-panel-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.post-panel-l { font-size: 12px; color: var(--text-2); }
.post-panel .btn-link { font-size: 12px; }

.who {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; background: var(--text); color: #fff;
}
.who-kayleigh { background: #3f3f46; }
.who-dolly { background: #6b6b76; }
.pf {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-2);
}
.pf-instagram { border-style: dashed; }

.addslot {
  margin-top: auto; border: 1px dashed var(--border); border-radius: 8px; color: var(--text-3);
  font-size: 12px; font-weight: 600; padding: 8px; background: transparent; min-height: 36px;
}
.addslot:hover { border-color: var(--text-3); color: var(--text-2); }

/* Missed posts sit ABOVE the board and OUTSIDE the week — they are no longer
   "on Monday", they are decisions nobody has taken. */
.missed {
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  background: var(--bg); border-radius: var(--r-card); padding: 12px 14px; margin-bottom: 14px;
}
.missed-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.missed-h strong { font-size: 14px; color: var(--accent); }
.missed-h span { font-size: 13px; color: var(--text-2); }
.missed-list { display: flex; flex-wrap: wrap; gap: 8px; }
.missed-list .post { flex: 0 1 280px; }

.tray {
  margin-top: 20px; border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 14px; background: var(--surface);
}
.tray-h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.tray-h strong {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-3);
}
.tray-h span { font-size: 13px; color: var(--text-3); }
.tray-h.picking strong { font-size: 15px; letter-spacing: -0.01em; text-transform: none; color: var(--text); }
.tray-empty { font-size: 14px; color: var(--text-3); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--border); background: var(--bg); border-radius: 9px;
  padding: 8px 10px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  max-width: 100%;
}
.chip .mono {
  font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.06em; color: var(--text-3);
}
.chip-ttl {
  font-size: 13px; font-weight: 600; max-width: 260px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.chip-date {
  min-height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg); font-size: 13px;
}
.tick-sm { width: 38px; height: 38px; border-width: 2px; }
.tick-sm svg { width: 17px; height: 17px; }

/* A phone gets the same seven days as rows. Below ~760px a column is narrower
   than the date input inside it, and the board stops being readable before it
   stops fitting. */
@media (max-width: 760px) {
  .week { grid-template-columns: 1fr; gap: 6px; }
  .day { min-height: 0; }
  /* Earlier this week is history — unless something in it never went out. */
  .day.past-quiet { display: none; }
  .dayh { position: relative; }
  .daybody { padding: 8px; }
  .addslot { margin-top: 0; }
  .chip-ttl { max-width: 160px; }
  .missed-list { grid-template-columns: 1fr; }
}

/* The week board needs a wider page than the queue's reading measure. Scoped to
   the view, so the queue keeps its 720px column. */
body.sched-view .wrap,
body.sched-view .topbar-in { max-width: 1160px; }
body.sched-view .week { gap: 10px; }
body.sched-view .post-ttl { -webkit-line-clamp: 3; line-clamp: 3; }

/* Two states on one row read as one phrase — "MISSED EDIT MADE". A separator
   makes them two facts again. */
.post-st .st + .st::before { content: '·'; margin-right: 4px; color: var(--text-3); }

/* ======================================================================
   Model Custom Requests
   ----------------------------------------------------------------------
   The screen is read in two situations: James P scanning what is
   outstanding on a phone, and a model reading the instructions before she
   films. The second one decides the layout — the verbatim request is the
   largest block on the card and is never truncated, never clamped and
   never behind a "show more", because a dropped line is a re-shoot.
   ====================================================================== */

.pagetitle { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 20px 0 4px; }

.modelsec { margin-top: 26px; }
.modelhead {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.modelhead h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.modelhead .alias { font-size: 12px; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.modelhead > .btn { margin-left: auto; }

.counts { display: flex; gap: 8px; flex-wrap: wrap; }
.tile {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--r-ctl);
  background: var(--surface); min-width: 72px;
}
.tile-n { font-size: 17px; font-weight: 700; line-height: 1.1; }
.tile-l { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.tile-zero { opacity: 0.55; }
.tile-warn { background: #fff8e6; border-color: #f0e0b4; }
.tile-warn .tile-n { color: #8a6a12; }

.cards { display: flex; flex-direction: column; gap: 14px; }

.custom {
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--bg); padding: 14px 16px;
}
.custom.is-done { background: var(--surface); border-color: var(--border-soft); }

.custom-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.custom-who { min-width: 0; flex: 1; }
.fan-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; word-break: break-word; }
.fan-handle {
  font-size: 14px; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid rgba(233, 0, 83, 0.3); word-break: break-all;
}
.fan-handle:hover { border-bottom-color: var(--accent); }
.fan-handle.missing { color: var(--text-3); border: 0; }
.custom-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pill-model { background: var(--text); color: #fff; }
.pill-review { background: #fff8e6; border-color: #f0e0b4; color: #8a6a12; cursor: help; }

.custom-fields { margin: 10px 0 12px; display: flex; flex-direction: column; gap: 3px; }
.frow { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 15px; }
.flabel { color: var(--text-3); min-width: 74px; font-size: 13px; }
.fvalue { font-weight: 600; word-break: break-word; }
/* "Not provided" must look different from a real answer — JP §12 asks for the
   gap to be visible rather than filled in with a guess. */
.fvalue.missing { font-weight: 500; color: var(--text-3); font-style: italic; }
.fnote { flex-basis: 100%; font-size: 12px; color: var(--text-3); }

.refshots { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.refshot {
  display: block; border: 1px solid var(--border); border-radius: var(--r-ctl);
  overflow: hidden; line-height: 0; background: var(--surface-2);
}
.refshot img { width: 104px; height: 104px; object-fit: cover; display: block; }
.refshot:hover { border-color: var(--text-3); }

.req-head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 6px;
}
/* pre-wrap, not a clamp. Atlanta's line breaks ARE the instructions. */
.req-body {
  font-family: inherit; font-size: 15px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-ctl); padding: 10px 12px; margin-bottom: 12px;
}

.custom-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tickbtn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-ctl);
  background: var(--bg); font-size: 14px; font-weight: 600;
}
.tickbox {
  width: 20px; height: 20px; border: 2px solid var(--text-3); border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; color: var(--ok);
}
.tickbtn[aria-pressed="true"] { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.tickbtn[aria-pressed="true"] .tickbox { border-color: var(--ok); }
.tickbtn:disabled { opacity: 0.5; cursor: not-allowed; }
.custom-meta { font-size: 13px; color: var(--text-3); margin-left: auto; text-align: right; }

.searchbar { display: flex; gap: 8px; margin: 14px 0; }
.searchbar input {
  flex: 1; min-width: 0; min-height: var(--tap); padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--bg);
}

.addsec { margin-top: 32px; }
.addsec summary { cursor: pointer; font-weight: 600; font-size: 15px; padding: 6px 0; }
.addsec textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--r-ctl); background: var(--bg); resize: vertical;
}

.ingestnote { margin-top: 28px; font-size: 12px; color: var(--text-3); }
.ingestnote.warn { color: #8a6a12; font-weight: 600; }

.editor { border: 0; border-radius: var(--r-card); padding: 20px; max-width: 420px; width: calc(100% - 32px); }
.editor::backdrop { background: rgba(0, 0, 0, 0.35); }
.editor h3 { font-size: 18px; margin-bottom: 4px; }
.editor label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
.editor input, .editor select {
  width: 100%; min-height: 40px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--bg);
}
.editor .two { display: flex; gap: 10px; }
.editor .two > label { flex: 1; min-width: 0; }
.editor-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

@media (max-width: 460px) {
  .modelhead > .btn { margin-left: 0; }
  .custom-meta { margin-left: 0; text-align: left; flex-basis: 100%; }
  .refshot img { width: 88px; height: 88px; }
}

/* The topbar here carries one more control than the Edit Tracker's (a Team
   link), so the name has to go sooner or "Sign out" is clipped off the right
   edge at 390px — which is the width this is actually read at. Raised from the
   base stylesheet's 380px, where it was tuned for a two-control row. */
@media (max-width: 520px) {
  .who { display: none; }
}