/* Pitch Tracker — visual design pass.
 *
 * Single accent: indigo-600. Used for the primary button, active
 * filter chip, focus ring, and brand. Status pills use distinct
 * Tailwind-style hues (sky / emerald / amber / slate) so the four
 * states are unambiguous at a glance.
 *
 * Neutrals: Tailwind slate. The previous warm beige palette competed
 * with the colored pills; cool grays let them sit forward.
 */

:root {
  /* Accent (single, consistent) */
  --accent: #4f46e5;          /* indigo-600 */
  --accent-2: #4338ca;        /* indigo-700 */
  --accent-soft: #eef2ff;     /* indigo-50  */
  --accent-ring: rgba(99, 102, 241, 0.35);

  /* Surfaces */
  --bg: #ffffff;
  --bg-2: #f8fafc;            /* slate-50  */
  --bg-3: #f1f5f9;            /* slate-100 */
  --bg-4: #e2e8f0;            /* slate-200 */

  /* Text */
  --text: #0f172a;            /* slate-900 */
  --text-2: #475569;          /* slate-600 */
  --text-3: #94a3b8;          /* slate-400 */

  /* Lines */
  --border: #e2e8f0;          /* slate-200 */
  --border-2: #cbd5e1;        /* slate-300 */

  /* Semantic — used by pills + toasts only, not as accent */
  --info-bg: #e0f2fe;         /* sky-100   */
  --info-text: #0369a1;       /* sky-700   */
  --info-border: #bae6fd;     /* sky-200   */
  --success-bg: #d1fae5;      /* emerald-100 */
  --success-text: #047857;    /* emerald-700 */
  --success-border: #a7f3d0;  /* emerald-200 */
  --warning-bg: #fef3c7;      /* amber-100 */
  --warning-text: #b45309;    /* amber-700 */
  --warning-border: #fde68a;  /* amber-200 */
  --danger: #dc2626;          /* red-600   */
  --danger-bg: #fee2e2;       /* red-100   */

  /* Geometry */
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 10px -2px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 20px 40px -10px rgba(15, 23, 42, 0.25), 0 10px 20px -5px rgba(15, 23, 42, 0.10);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #818cf8;         /* indigo-400 */
    --accent-2: #6366f1;       /* indigo-500 */
    --accent-soft: #1e1b4b;    /* indigo-950 */
    --accent-ring: rgba(129, 140, 248, 0.45);

    --bg: #0f172a;             /* slate-900 */
    --bg-2: #1e293b;           /* slate-800 */
    --bg-3: #283549;
    --bg-4: #334155;           /* slate-700 */
    --text: #f1f5f9;           /* slate-100 */
    --text-2: #cbd5e1;         /* slate-300 */
    --text-3: #64748b;         /* slate-500 */
    --border: #1e293b;
    --border-2: #334155;

    --info-bg: #082f49;        /* sky-950 */
    --info-text: #7dd3fc;      /* sky-300 */
    --info-border: #0c4a6e;
    --success-bg: #052e1f;
    --success-text: #6ee7b7;
    --success-border: #064e3b;
    --warning-bg: #422006;
    --warning-text: #fcd34d;
    --warning-border: #78350f;
    --danger: #f87171;
    --danger-bg: #450a0a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-2);
  padding: 20px;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; color: inherit; }

/* Visible keyboard focus everywhere. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

/* --- shell --- */

.tp {
  background: var(--bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  max-width: 1500px;
  margin: 0 auto;
}

.tp-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.tp-logo {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}
.tp-sw { position: relative; flex: 1; max-width: 480px; }
.tp-search {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 13px;
  background: var(--bg-2);
  color: var(--text);
}
.tp-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.tp-search:disabled { opacity: 0.55; cursor: not-allowed; }
.tp-search::placeholder { color: var(--text-3); }
/* One-click clear ✕. Hidden while the box is empty (placeholder shows);
   webkit's native cancel button is suppressed so there's only one ✕. */
.tp-search { padding-right: 30px; }
.tp-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.tp-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: var(--radius);
}
.tp-search-clear:hover { color: var(--text); background: var(--bg-3); }
.tp-search:placeholder-shown + .tp-search-clear { display: none; }

.tp-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius);
  background: var(--accent);
  color: white;
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, transform 80ms ease;
}
.tp-new:hover { background: var(--accent-2); }
.tp-new:active { transform: translateY(1px); }

/* "Signed in:" presence circles. Double-click one to send a smiley. */
.tp-who-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tp-who-label {
  font-size: 12px;
  color: var(--text-3);
  margin-right: 2px;
  white-space: nowrap;
}
.tp-who {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  user-select: none;
  cursor: pointer;
}
.tp-who:hover { box-shadow: 0 0 0 3px var(--accent-ring); }

/* --- filter bar / tabs --- */

.tp-f {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  flex-wrap: wrap;
  background: var(--bg-2);
}
.tp-c {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tp-c:hover { background: var(--bg-3); color: var(--text); }
.tp-co {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.tp-co:hover { background: var(--accent-2); border-color: var(--accent-2); color: white; }
.tp-ct { margin-left: auto; color: var(--text-3); font-size: 12px; }

/* --- table --- */

.tp-t {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.tp-t th {
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  white-space: nowrap;
}
.tp-t th.cn { text-align: center; padding: 10px 4px; }
.tp-t td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.tp-t td.cn { text-align: center; padding: 8px 4px; }
.tp-t tbody tr { transition: background-color 80ms ease; }
.tp-t tbody tr:hover td { background: var(--bg-2); }
.tp-t tbody tr:last-child td { border-bottom: none; }

.tp-row-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}
.tp-row-link:hover { color: var(--accent); }

.tp-date { color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Status pills — distinct hue per state so 0/1/2/11 are unambiguous. */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
  transition: transform 80ms ease, box-shadow 120ms ease;
}
.pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pill.s1 { background: var(--info-bg);    color: var(--info-text);    border-color: var(--info-border); }
.pill.s2 { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.pill.s11 { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
/* Fallback for statuses without a picked colour and outside the legacy
   1/2/11 palette — includes an uncoloured default (code 0). */
.pill:not(.s1):not(.s2):not(.s11):not(.pill-custom) {
  background: var(--bg-3);
  color: var(--text);
  border-color: var(--border-2);
}
/* Operator-picked colour (Settings → Pitch statuses). --pill-c is the
   stored #rrggbb used as the EXACT fill — a tinted wash read as "grey"
   to the team. --pill-tc is the server-computed black/white text
   colour that stays readable on that fill. Declared after the
   s1/s2/s11 rules so it wins at equal specificity. */
.pill.pill-custom {
  background: var(--pill-c);
  color: var(--pill-tc, #ffffff);
  border-color: var(--pill-c);
}

/* Red dot next to the artist name when pitch-critical fields are
   missing (see PITCH_READY_FIELDS in app/routers/releases.py). The
   title attribute lists exactly which fields. */
.tp-missing {
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--danger);
  vertical-align: middle;
  cursor: help;
}

/* Tiny inline action button, e.g. "Use default" next to a form label. */
.nr-mini {
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 11px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.nr-mini:hover { background: var(--bg-3); color: var(--text); }

/* Compact buttons inside action cells — Edit/Deactivate on the pitch
   statuses page and Reset/Demote/Deactivate on the users page have to
   fit side by side without colliding. */
td.st-actions form { display: inline-block; margin: 1px 0; }
td.st-actions .nr-btn {
  padding: 4px 9px;
  font-size: 11.5px;
  white-space: nowrap;
}

/* Stats table sort links. */
.st-sort { color: inherit; text-decoration: none; }
.st-sort:hover { text-decoration: underline; }
.st-sort-on { color: var(--accent); }
.st-count-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 16px;
  font-size: 14px;
}
.st-row-click:hover td { background: var(--bg-2); }

/* Subtle pulse when the pill is swapped in by HTMX. */
.pill.pt-just-changed { animation: pt-pulse 600ms ease; }
@keyframes pt-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-ring); }
  60%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.tp-ty {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--text-2);
  font-weight: 500;
}

.tp-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--radius);
  color: var(--text-3);
  text-decoration: none;
  font-size: 14px;
  transition: background-color 120ms ease, color 120ms ease;
}
.tp-go:hover { background: var(--accent-soft); color: var(--accent); }

.tp-ft {
  padding: 12px 18px;
  font-size: 12px;
  color: var(--text-3);
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* --- empty states --- */

.tp-empty {
  text-align: center !important;
  padding: 56px 24px !important;
  color: var(--text-2);
}
.tp-empty-icon {
  width: 44px; height: 44px;
  margin: 0 auto 14px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
}
.tp-empty-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.tp-empty-sub   { font-size: 13px; color: var(--text-3); }

/* --- modal --- */

.nr-back {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  padding: 28px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 100;
  overflow-y: auto;
  animation: pt-fade-in 140ms ease-out;
}
.nr-modal {
  width: 100%;
  max-width: 660px;
  background: var(--bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pt-modal-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pt-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pt-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.nr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.nr-title { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.nr-x {
  width: 32px; height: 32px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-3);
  font-size: 20px;
  line-height: 1;
  border: none;
  background: transparent;
  transition: background-color 120ms ease, color 120ms ease;
}
.nr-x:hover { background: var(--bg-3); color: var(--text); }

.nr-body { padding: 20px; max-height: 65vh; overflow-y: auto; }
.nr-sect { margin-bottom: 22px; }
.nr-sect:last-child { margin-bottom: 0; }
.nr-sect h3 {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}
.nr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}
.nr-row.one { grid-template-columns: 1fr; }
.nr-field { display: flex; flex-direction: column; gap: 6px; }
.nr-field label { font-size: 12px; font-weight: 500; color: var(--text-2); }
.nr-req { color: var(--danger); }
.nr-hint { font-size: 11.5px; color: var(--text-3); }

.nr-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}

.nr-btn {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
  font-weight: 500;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}
.nr-btn:active { transform: translateY(1px); }
.nr-btn-pri {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.nr-btn-pri:hover { background: var(--accent-2); border-color: var(--accent-2); }
.nr-btn-sec {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border-2);
}
.nr-btn-sec:hover { background: var(--bg-3); }
.nr-btn-danger {
  background: var(--bg);
  color: var(--danger);
  border-color: var(--border-2);
}
.nr-btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }

.nr-in {
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--radius);
  border: 1px solid var(--border-2);
  font-size: 13.5px;
  background: var(--bg);
  color: var(--text);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.nr-in:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.nr-in[readonly] { background: var(--bg-3); color: var(--text-2); cursor: not-allowed; }
.nr-ta { resize: vertical; min-height: 72px; font-family: inherit; }

/* --- settings pages --- */

.st-body { padding: 22px; }

.st-add {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.st-add-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 160px;
}
.st-add-field.st-add-narrow { flex: 0 0 130px; min-width: 0; }
.st-add-field label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.st-help {
  font-size: 12px;
  color: var(--text-3);
  margin: 0 0 14px;
}

.st-t {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.st-t th {
  font-weight: 500;
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  text-align: left;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.st-t th.cn { text-align: center; }
.st-t td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.st-t td.cn { text-align: center; }
.st-t tbody tr:last-child td { border-bottom: none; }
.st-t tbody tr:hover td { background: var(--bg-2); }
.st-t tr.st-row-inactive td { opacity: 0.55; }

.st-col-narrow { width: 90px; }
.st-actions { width: 150px; }
.st-actions form { display: inline; margin: 0; }

.st-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.st-badge-active   { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.st-badge-inactive { background: var(--bg-3); color: var(--text-3); }
.st-badge-default  { background: var(--accent-soft); color: var(--accent); }

/* --- login + change-password --- */

.lg-shell {
  min-height: calc(100vh - 40px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lg-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.lg-card.wide { max-width: 440px; }
.lg-head {
  padding: 20px 22px 10px;
  text-align: center;
}
.lg-head h1 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.lg-head p { font-size: 13px; color: var(--text-3); margin: 0; }
.lg-form {
  padding: 14px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lg-error {
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 12.5px;
  border: 1px solid rgba(220, 38, 38, 0.2);
}
.lg-notice {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.45;
  border: 1px solid var(--accent-ring);
}

/* --- sign out (small inline button in the top bar) --- */

.tp-logout-btn {
  background: none;
  border: none;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
  border-radius: var(--radius);
  transition: color 120ms ease, background-color 120ms ease;
}
.tp-logout-btn:hover { color: var(--text); background: var(--bg-3); }

/* --- toast --- */

.pt-toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.pt-toast {
  background: var(--bg);
  color: var(--text);
  padding: 12px 16px 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow-md);
  font-size: 13px;
  min-width: 220px;
  max-width: 360px;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: pt-toast-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pt-toast.pt-toast-success { border-left-color: var(--success-text); }
.pt-toast.pt-toast-error   { border-left-color: var(--danger); }
.pt-toast.pt-toast-hide    { animation: pt-toast-out 180ms ease forwards; }
.pt-toast-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--accent);
}
.pt-toast-success .pt-toast-dot { background: var(--success-text); }
.pt-toast-error   .pt-toast-dot { background: var(--danger); }
@keyframes pt-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pt-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* --- week dividers ---
   One row per Saturday→Friday block, rendered above the block's first
   row (the Friday — the grid sorts newest-first). The treatment stops
   after the Label column by design: Type, the platform pills and the
   link column stay visually uncovered so the pill grid reads as one
   continuous column down the page. That's why the row is two cells
   rather than a single full-width colspan. */

.tp-wk td {
  padding: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.tp-wk-c {
  border-top: 2px solid var(--border-2);
}
/* No top border and no fill: the uncovered columns should look like the
   divider simply isn't there, not like an empty continuation of it. */
.tp-wk-e {
  background: var(--bg) !important;
}
.tp-wk-l {
  display: block;
  padding: 7px 12px;
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.tp-wk-l:hover,
.tp-wk-l:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-2);
}
.tp-wk-l:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: -2px;
}

/* The way back out of a filtered week, sat next to the Active/Archived
   tabs. Filled rather than outlined so it reads as an applied filter
   instead of a third tab. */
.tp-wk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--accent-ring);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.tp-wk-chip:hover { background: var(--bg-4); }

/* --- expire button ---
   Sits in the date cell for releases whose date has passed. Muted until
   hover, then red: it archives, which is reversible from the Archived
   tab, but it is still a destructive-feeling action and shouldn't look
   like a decoration. The date column is widened to 104px in grid.html
   to fit it — .tp-t td is overflow:hidden, so a tighter column clips. */

.tp-exp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tp-exp:hover,
.tp-exp:focus-visible {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}
.tp-exp:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 1px;
}

/* --- pitch-link pop-out ---
   Appears in the pill cell on the click that marks a platform pitched,
   offering that platform's own pitch portal. Absolutely positioned so
   the grid doesn't reflow; the cell is the positioning context. */

/* The pill cells host the pop-out, so they need to be a positioning
   context AND to stop clipping it. `.tp-t td` sets overflow:hidden for
   text-overflow ellipsis on the wide text columns; inherited here it
   clipped 56 of the pop-out's 60 pixels — the element was in the DOM
   and reported visible, but nothing was drawn. These centred cells hold
   a pill, a type badge or a link glyph, none of which need ellipsis. */
.tp-t td.cn { position: relative; overflow: visible; }

.pill-pop {
  position: absolute;
  top: calc(100% - 4px);
  /* Anchored to the cell's right edge, not centred on it. The platform
     columns are ~38px wide and the last one sits at the table's right
     edge, so a centred 190px pop-out hung 7px off the page. Extending
     leftwards keeps every column's pop-out on screen; the pills occupy
     the right half of a wide grid, so there is always room that way. */
  right: 0;
  left: auto;
  z-index: 40;
  min-width: 190px;
  padding: 9px 11px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--bg);
  box-shadow: var(--shadow-md);
  text-align: left;
  white-space: normal;
  cursor: default;
}
.pill-pop-h {
  margin-bottom: 5px;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pill-pop-l {
  display: block;
  color: var(--accent-2);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.pill-pop-l:hover { text-decoration: underline; }
/* Amber, not red: a missing deeplink is a to-do, not a failure. */
.pill-pop-w {
  color: var(--warning-text);
  font-size: 11.5px;
  line-height: 1.35;
}

/* Deeplink editor in Settings → Platforms. */
.st-dl { display: flex; align-items: center; gap: 8px; }
.st-dl-in { flex: 1 1 auto; min-width: 180px; font-size: 12px; }
.st-dl-chk {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-2);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}