/* The `hidden` attribute is only `display: none` from the UA sheet, so any
   author `display` rule beats it. Both top-level panes set `display`, so they
   need this or a hidden pane keeps painting. */
[hidden] { display: none !important; }

/* =========================================================
   NashvilleTN LIVE — operations console
   Layers on styles.css. Same tokens, same type, denser.
   ========================================================= */

/* The console stays light. The public site went dark by changing the values
   of these tokens in styles.css; the console reads the same tokens, so it
   puts the light values back here and the desk's working surface is exactly
   what it was. This file loads after styles.css, so these win. */
:root {
    --cream:          #F7F5EF;
    --surface:        #FFFFFF;
    --surface-lift:   #FAF8F3;
    --surface-hi:     #F3F0E8;
    --card-border:    #E3DDD0;
    --row-div:        #EDE8DC;
    --media-bg:       #E7E2D7;
    --line:           #D2CCBE;
    --chip-on:        #EDE9DF;
    --text:           #16191A;
    --text-2:         #5A6060;
    --text-3:         #6E7370;
    --text-body:      #3A3F3C;
    --text-lede:      #2A2E2C;
    --muted:          #8A8F86;
    --mint-tint:      #F2FBF6;
    --mint-tint-hi:   #E8F7EF;
    --amber-wash:     #FBF3DA;
    --amber-wash-hi:  #F7EDCB;
    --link:           #0E9660;
    --amber:          #B47407;
    --amber-tint:     #FDF8EC;
    --danger:         #8A2F2F;
    --danger-line:    #E0CFCF;
    --danger-tint:    #FCF2F2;
    --lift:           0 10px 24px -18px rgba(11, 12, 11, .5);
}

.crm {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    background: var(--cream);
    color: var(--text);
    font-family: var(--body);
}

/* ---------- sidebar ---------- */
.crm-side {
    background: var(--surface); color: var(--text);
    border-right: 1px solid var(--card-border);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}
.crm-brand {
    padding: 18px 20px; border-bottom: 1px solid var(--card-border);
    display: flex; align-items: flex-start; gap: 10px;

    /* Antonio 700 at 22px, measured: the capitals occupy 19.35px and start
       2.87px into the 22px line box. The CRM tag is sized and offset to those
       numbers so its border sits exactly on the cap line and the baseline.
       If the wordmark's size changes, re-measure these two. */
    --mark-cap-height: 19.35px;
    --mark-cap-top: 2.87px;
}
.crm-brand .wordmark { font-size: 22px; color: var(--text); line-height: 1; }
.crm-brand .wordmark span { color: var(--link); }
.crm-brand .wordmark:hover { color: var(--link); }
.crm-tag {
    box-sizing: border-box;
    height: var(--mark-cap-height);
    margin-top: var(--mark-cap-top);
    display: inline-flex; align-items: center;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 0 8px; line-height: 1;
    font-family: var(--label); font-size: 9px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
}
.crm-nav { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.crm-nav-label {
    padding: 14px 12px 6px;
    font-family: var(--label); font-size: 9px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
}
.crm-nav button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 11px 12px; border-radius: var(--r-sm); cursor: pointer;
    background: transparent; border: 0; border-left: 3px solid transparent;
    font-family: var(--label); font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-2); text-align: left;
    min-height: 44px;
}
.crm-nav button:hover { background: var(--surface-hi); color: var(--text); }
.crm-nav button.is-on { background: var(--mint-tint); border-left-color: var(--link); color: var(--link); font-weight: 600; }
.crm-nav button .lbl { flex: 1; }
.crm-count {
    background: var(--chip-on); color: var(--text-3);
    font-family: var(--label); font-size: 10px; padding: 3px 7px;
    border-radius: var(--r-sm); white-space: nowrap;
}
.crm-count.is-alert { background: var(--amber); color: #FFF; }
.crm-foot {
    padding: 16px 20px; border-top: 1px solid var(--card-border);
    display: flex; flex-direction: column; gap: 8px;
}
.crm-foot span, .crm-foot a {
    font-family: var(--label); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.crm-foot span { color: var(--muted); }
.crm-foot a { color: var(--link); }

/* ---------- main ---------- */
.crm-main { min-width: 0; display: flex; flex-direction: column; }
.crm-head {
    position: sticky; top: 0; z-index: 10;
    background: var(--surface); border-bottom: 1px solid var(--card-border);
    padding: 18px 28px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.crm-head-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.crm-crumb {
    font-family: var(--label); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
}
.crm-head h1 {
    font-family: var(--display); font-weight: 700; font-size: 34px;
    line-height: 1; letter-spacing: .005em; text-transform: uppercase;
}
.crm-head .grow { flex: 1; }
.crm-search {
    flex: 0 1 300px; background: var(--cream); border: 1px solid var(--line);
    border-radius: var(--r-sm); padding: 12px 14px;
    font-family: var(--body); font-size: 14.5px; color: var(--text); min-height: 44px;
}
.crm-body { padding: 24px 28px 48px; display: flex; flex-direction: column; gap: 22px; }

/* ---------- stats ---------- */
.crm-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 1px; background: var(--card-border);
    border: 1px solid var(--card-border); border-radius: var(--r); overflow: hidden;
}
.crm-stat { padding: 20px 22px; background: var(--surface); display: flex; flex-direction: column; gap: 5px; }
.crm-stat .n {
    font-family: var(--display); font-weight: 700; font-size: 38px;
    line-height: 1; letter-spacing: .01em;
}
.crm-stat .n.amber { color: var(--amber); }
.crm-stat .n.green { color: var(--link); }
.crm-stat .l { font-family: var(--label); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }

/* ---------- tabs + toolbars ---------- */
.crm-tabs { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.crm-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: var(--r-sm); cursor: pointer;
    background: transparent; border: 1px solid var(--line);
    font-family: var(--label); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text); white-space: nowrap; min-height: 40px;
}
.crm-tab.is-on { background: var(--text); border-color: var(--text); color: var(--cream); }
.crm-tab .pip { background: var(--amber); color: #FFF; font-size: 9.5px; padding: 2px 6px; border-radius: var(--r-sm); }

.crm-bar {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
    justify-content: space-between;
}
.crm-note {
    font-family: var(--label); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
}
.crm-note.warn { color: var(--amber); text-transform: none; letter-spacing: .02em; font-size: 12.5px; }

/* the bulk action bar only exists when something is selected */
.crm-bulk {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    background: var(--mint-tint); border: 1px solid var(--link);
    border-radius: var(--r); padding: 12px 16px;
}
.crm-bulk[hidden] { display: none; }
.crm-bulk .count {
    font-family: var(--label); font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--link); font-weight: 600;
}

/* ---------- tables ---------- */
.crm-table {
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: var(--r); overflow-x: auto;
}
.crm-row, .crm-thead {
    display: grid; gap: 14px; padding: 15px 20px; align-items: center;
    border-bottom: 1px solid var(--row-div); min-width: 880px;
}
.crm-thead {
    border-bottom: 1px solid var(--card-border); padding: 13px 20px;
    font-family: var(--label); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
}
.crm-row:hover { background: var(--surface-hi); }
.crm-row.is-sponsored { background: var(--mint-tint); }
.crm-row.is-pending { background: var(--amber-tint); }
.crm-row.is-picked { background: var(--mint-tint-hi); }

/* column templates per view */
.cols-master { grid-template-columns: 34px 104px minmax(200px, 1.5fr) minmax(120px, .9fr) 92px 90px auto 44px; }
.cols-events { grid-template-columns: 34px 104px minmax(200px, 1.4fr) minmax(110px, .9fr) 88px 62px 84px auto 44px; }
.cols-cov    { grid-template-columns: 52px 34px minmax(200px, 1.6fr) 110px 90px 80px auto 44px; }
/* The schedule's "when" is a sentence — "Sun Sep 6 · 8:00 PM" — not a chip,
   so it needs a column of its own rather than the coverage grid's 110px. */
.cols-sched  { grid-template-columns: 52px 34px minmax(200px, 1.6fr) 180px 110px 64px auto 44px; }
.cols-trash  { grid-template-columns: 34px 96px minmax(220px, 1.6fr) 120px 100px auto; }
.cols-inbox  { grid-template-columns: 34px 110px minmax(200px, 1.2fr) minmax(180px, 1fr) 110px 44px; }
.cols-deals  { grid-template-columns: 96px minmax(220px, 1.5fr) minmax(180px, 1fr) 118px 96px 118px auto; }
/* The notes a request came in with: budget, the livestream add-on, their details. */
.crm-deal-notes { font-size: 13px; line-height: 1.45; color: var(--text-2); white-space: pre-line; margin-top: 3px; }
/* A value or a stage set right in the row. */
.crm-inline {
    width: 100%; min-height: 36px; padding: 6px 10px; border-radius: var(--r-sm);
    border: 1px solid var(--card-border); background: var(--surface); color: var(--text);
    font: inherit; font-size: 13.5px;
}
.crm-inline:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--mint-tint-hi); }

.crm-title {
    font-family: var(--display); font-weight: 600; font-size: 22px;
    line-height: 1.12; letter-spacing: .015em; text-transform: uppercase;
}
.crm-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.crm-date { font-family: var(--label); font-size: 13px; color: var(--amber); white-space: nowrap; }
.crm-sub { font-size: 13.5px; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.crm-state {
    font-family: var(--label); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.crm-state.live    { color: var(--link); }
.crm-state.pending { color: var(--amber); }
.crm-state.off     { color: var(--muted); }
.crm-state.bad     { color: var(--danger); }
.crm-cat {
    font-family: var(--label); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--link); white-space: nowrap;
}
.crm-num { font-family: var(--label); font-size: 13px; white-space: nowrap; }
.crm-actions { display: flex; gap: 7px; justify-content: flex-end; flex-wrap: wrap; }

/* buttons */
.crm-btn {
    border: 1px solid var(--line); background: transparent; color: var(--text);
    border-radius: var(--r-sm); padding: 9px 12px; cursor: pointer;
    font-family: var(--label); font-size: 9.5px; letter-spacing: .08em;
    text-transform: uppercase; white-space: nowrap; min-height: 36px;
}
.crm-btn:hover { border-color: var(--link); color: var(--link); }
.crm-btn.primary { background: var(--mint); border-color: var(--mint); color: var(--on-mint); font-weight: 600; }
.crm-btn.primary:hover { background: #34c789; color: var(--on-mint); }
.crm-btn.danger { color: var(--danger); border-color: var(--danger-line); }
.crm-btn.danger:hover { background: #FCF2F2; border-color: var(--danger); color: var(--danger); }
.crm-btn.lg { padding: 13px 20px; font-size: 11px; letter-spacing: .1em; min-height: 44px; }
.crm-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* the row X */
.crm-x {
    width: 34px; height: 34px; min-height: 34px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--card-border); background: transparent;
    color: var(--muted); border-radius: var(--r-sm); cursor: pointer;
    font-size: 15px; line-height: 1;
}
.crm-x:hover { border-color: var(--danger); color: var(--danger); background: #FCF2F2; }

input[type="checkbox"].crm-check { width: 18px; height: 18px; min-height: 0; accent-color: #0E8F63; cursor: pointer; }

/* ---------- confidence meter ---------- */
.conf { display: flex; align-items: center; gap: 8px; }
.conf-bar { width: 42px; height: 5px; border-radius: 3px; background: var(--card-border); overflow: hidden; flex: none; }
.conf-bar i { display: block; height: 100%; background: var(--link); }
.conf-bar.mid i { background: var(--amber); }
.conf-bar.low i { background: var(--danger); }
.conf-n { font-family: var(--label); font-size: 12px; }

/* ---------- run log ---------- */
.runlog {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--card-border); border-radius: var(--r);
    padding: 18px 20px; display: flex; flex-direction: column; gap: 10px;
}
.runlog h2 {
    font-family: var(--display); font-weight: 600; font-size: 20px;
    letter-spacing: .03em; text-transform: uppercase; line-height: 1;
}
.runlog .grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 14px;
}
.runlog .k { font-family: var(--label); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.runlog .v { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; }
.runlog .v.amber { color: var(--amber); }
.runlog ul { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--row-div); padding-top: 10px; }
.runlog li { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.runlog li b { color: var(--text); font-weight: 600; }
.runlog .note {
    font-size: 13px; line-height: 1.55; color: var(--amber);
    border-left: 2px solid var(--amber); padding-left: 12px;
    background: var(--amber-tint); padding: 10px 12px; border-radius: var(--r-sm);
}

/* ---------- editor panel ---------- */
.crm-panel {
    background: var(--surface); border: 1px solid var(--card-border);
    border-radius: var(--r); padding: 24px;
    display: flex; flex-direction: column; gap: 18px;
}
.crm-panel h2 {
    font-family: var(--display); font-weight: 600; font-size: 26px;
    letter-spacing: .015em; text-transform: uppercase; line-height: 1;
}
.crm-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px;
}
.crm-grid.wide { grid-template-columns: 1fr; }
.crm-field { display: flex; flex-direction: column; gap: 7px; }
.crm-field > span {
    font-family: var(--label); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
}
.crm-field input, .crm-field select, .crm-field textarea {
    background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 12px 14px; font-family: var(--body); font-size: 15px; color: var(--text);
    width: 100%; min-height: 44px;
}
.crm-field textarea { min-height: 96px; resize: vertical; }
.crm-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.crm-toggle input { width: 18px; height: 18px; min-height: 0; accent-color: #0E8F63; }
.crm-toggle span { font-size: 14.5px; }

/* coverage item rows inside the editor */
.cov-items { display: flex; flex-direction: column; border: 1px solid var(--card-border); border-radius: var(--r); overflow: hidden; }
.cov-item {
    display: grid; grid-template-columns: 96px minmax(160px, 1.4fr) minmax(140px, 1fr) 96px 44px;
    gap: 12px; padding: 12px 14px; align-items: center; border-bottom: 1px solid var(--row-div);
    background: var(--surface);
}
.cov-item:last-child { border-bottom: 0; }
.cov-item .k { font-family: var(--label); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.cov-item .t { font-size: 15px; font-weight: 700; line-height: 1.3; }
.cov-item.new { background: var(--mint-tint); }
.cov-item input, .cov-item select { padding: 9px 11px; font-size: 14px; min-height: 40px; }

/* ---------- misc ---------- */
.crm-empty {
    padding: 40px 22px; text-align: center; color: var(--muted);
    font-family: var(--label); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.crm-toast {
    position: fixed; right: 20px; bottom: 20px; z-index: 100;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--card-border); border-left: 3px solid var(--link);
    border-radius: var(--r); padding: 14px 18px; max-width: 380px;
    font-size: 14px; line-height: 1.45;
    box-shadow: 0 2px 10px rgba(11,12,11,.10);
}
.crm-toast[hidden] { display: none; }
.crm-toast.bad { border-left-color: var(--danger); }

/* ---------- login ----------
   One plain card on cream. Nothing on the screen but the two fields, so it
   can afford the space and does not need explaining. */
.crm-gate {
    min-height: 100vh;
    display: grid; place-items: center;
    background: var(--cream);
    padding: 32px 24px;
}
.crm-gate form {
    width: min(100%, 440px);
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: var(--r);
    padding: 44px 44px 36px;
    display: flex; flex-direction: column; gap: 22px;
}
.crm-gate .mark {
    font-family: var(--display); font-weight: 700; font-size: 38px;
    letter-spacing: .015em; text-transform: uppercase; color: var(--text);
    line-height: 1; margin: 0 0 4px; text-align: center;
}
/* the wordmark reads as one word here — no accent colour */
.crm-gate .mark span { color: inherit; }
.crm-gate label { display: flex; flex-direction: column; gap: 9px; }
.crm-gate label span {
    font-family: var(--label); font-size: 10.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
}
.crm-gate input {
    background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 17px 18px; color: var(--text); font-family: var(--body); font-size: 16px;
    min-height: 56px; width: 100%;
}
.crm-gate input:focus { border-color: var(--link); outline: 2px solid rgba(61,220,151,.35); outline-offset: 1px; }
.crm-gate .btn { padding: 19px 26px; font-size: 12px; justify-content: center; }
.crm-gate .err {
    color: var(--danger); font-size: 14px; line-height: 1.5;
    background: #FCF2F2; border: 1px solid var(--danger-line);
    border-radius: var(--r-sm); padding: 12px 14px; margin: 0;
}
.crm-gate .err[hidden] { display: none; }
.crm-gate .foot {
    display: flex; justify-content: center;
    border-top: 1px solid var(--row-div); padding-top: 20px;
}
.crm-gate .foot a {
    font-family: var(--label); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--link);
    min-height: 44px; display: inline-flex; align-items: center;
}

@media (max-width: 560px) {
    .crm-gate form { padding: 32px 24px 26px; }
    .crm-gate .mark { font-size: 30px; }
}

/* The open-access marker. It sits on every console view while sign-in is off,
   so it is a small badge rather than a banner: enough to notice, not enough to
   push the work down the page every time you switch tabs. */
.crm-warn {
    align-self: flex-start; width: fit-content;
    margin: 14px 28px 0; padding: 7px 13px;
    background: var(--amber-wash); border: 1px solid var(--amber-wash-hi);
    border-radius: var(--r-sm);
    color: var(--amber); font-size: 13px; line-height: 1.35;
}
.crm-warn[hidden] { display: none; }
.crm-warn b { color: var(--amber); font-weight: 700; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
    .crm { grid-template-columns: 1fr; }
    .crm-side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--card-border); }
    .crm-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding: 12px; }
    .crm-nav button { width: auto; border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
    .crm-nav button.is-on { border-left: 0; border-bottom-color: var(--mint); }
    .crm-nav-label { display: none; }
    .crm-foot { flex-direction: row; justify-content: space-between; align-items: center; }
    .crm-head { padding: 14px 20px; }
    .crm-head h1 { font-size: 26px; }
    .crm-body { padding: 18px 20px 40px; }
}
@media (max-width: 700px) {
    .crm-head { gap: 12px; }
    .crm-search { flex: 1 1 100%; }
    .cov-item { grid-template-columns: 1fr; gap: 8px; }
    .crm-panel { padding: 18px; }
}

/* the spotlight star — sets `spotlight`, which pins an event
   to the top of the public board whether it is live yet or not */
.crm-star {
    width: 36px; height: 36px; min-height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); background: transparent;
    color: var(--line); border-radius: var(--r-sm); cursor: pointer;
    font-size: 15px; line-height: 1;
}
.crm-star:hover { border-color: var(--amber); color: var(--amber); }
.crm-star.is-on { border-color: var(--amber-soft); color: var(--amber-soft); background: var(--amber-tint); }

/* Happening Now — the headline list */
.cols-news { grid-template-columns: 34px 78px minmax(240px, 1.8fr) minmax(130px, .9fr) 92px auto 44px; }

/* The bulk bar follows you down a long list — with 196 candidates the
   actions must not be 4,000px above the row you just ticked. */
.crm-bulk {
    position: sticky; top: 92px; z-index: 9;
}
@media (max-width: 1000px) { .crm-bulk { top: 0; } }
.crm-num.soon { color: var(--amber); font-weight: 600; }

/* a sortable column head */
.crm-sort {
    background: transparent; border: 0; padding: 0; cursor: pointer;
    font: inherit; color: inherit; text-align: left; white-space: nowrap;
}
.crm-sort:hover { color: var(--link); }
/* a reminder count worth noticing */
.crm-num.has { color: var(--link); font-weight: 600; }

/* Audience */
.cols-aud { grid-template-columns: 34px minmax(200px, 1.4fr) 110px minmax(140px, 1fr) 88px 110px 44px; }
.aud-chip {
    display: inline-block; background: var(--chip-on); color: var(--text-3);
    font-family: var(--label); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
    padding: 2px 6px; border-radius: var(--r-sm); margin: 0 4px 4px 0;
}

/* the "any @mediafarm.agency address" note under the login field */
.crm-gate .hint {
    font-family: var(--label); font-size: 9.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
}
.crm-gate .hint[hidden] { display: none; }
/* an email is longer than a username — let it wrap rather than overflow */
.crm-foot span { overflow-wrap: anywhere; }

/* ---------- coverage running order ----------
   The list on screen is the order the homepage rail renders, so it can be
   rearranged directly rather than through a number field. */
.crm-grip-cell { display: flex; align-items: center; gap: 6px; }
.crm-grip {
    width: 30px; height: 34px; padding: 0; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--card-border);
    border-radius: var(--r-sm); color: var(--muted);
    cursor: grab; font-size: 14px; line-height: 1;
}
.crm-grip:hover { border-color: var(--link); color: var(--link); }
.crm-grip:active { cursor: grabbing; }
.crm-pos {
    font-family: var(--label); font-size: 11px; color: var(--muted);
    min-width: 14px; text-align: right;
}
.crm-row[draggable="true"] { cursor: default; }
.crm-row.is-dragging { opacity: .45; }
.crm-row.is-drop-target { box-shadow: inset 0 2px 0 var(--link); }

@media (max-width: 700px) {
    /* The handle keeps its own row rather than squeezing the title. */
    .cols-cov, .cols-sched { grid-template-columns: 52px 34px minmax(0, 1fr); }
    .cols-cov > *:nth-child(n+4),
    .cols-sched > *:nth-child(n+4) { grid-column: 1 / -1; }
}

/* The two finders are the tools, not a content list — they read heavier. */
.crm-nav button.is-finder .lbl { font-weight: 600; color: var(--text); }
.crm-nav button.is-finder.is-on .lbl { color: var(--link); }

/* how far ahead the Events view reaches */
.crm-range { display: flex; align-items: center; gap: 10px; }
.crm-range .seg { border: 1px solid var(--line); border-radius: var(--r-sm); display: flex; overflow: hidden; }
.crm-range .seg button {
    background: transparent; border: 0; cursor: pointer;
    font-family: var(--label); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-3);
    padding: 10px 13px; white-space: nowrap; min-height: 40px;
}
.crm-range .seg button.is-on { background: var(--text); color: var(--cream); }

/* ---------- editor forms ----------
   A deliberate row grid rather than auto-fit. Every label is one line and the
   hint lives under the input, so inputs line up across a row instead of each
   one sitting wherever its label happened to end. */
.crm-panel-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    border-bottom: 1px solid var(--row-div); padding-bottom: 18px;
}
.crm-panel-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.crm-form { display: flex; flex-direction: column; gap: 20px; }
.crm-form-row {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px; align-items: start;
}
.crm-form-row .crm-field.span-1 { grid-column: span 1; }
.crm-form-row .crm-field.span-2 { grid-column: span 2; }
.crm-form-row .crm-field.span-4 { grid-column: span 4; }
.crm-form .crm-field > span {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A section head inside an editor panel. The event editor is long enough that
   without them it reads as one undifferentiated wall of inputs. */
.crm-form-h {
    font-family: var(--display); font-weight: 600; font-size: 21px;
    letter-spacing: .02em; text-transform: uppercase; line-height: 1;
    margin: 30px 0 4px; padding-top: 22px; border-top: 1px solid var(--row-div);
}
.crm-panel > .crm-form-h:first-of-type { border-top: 0; padding-top: 0; margin-top: 22px; }
/* A field cell that holds toggles rather than an input. */
.crm-field.is-toggles { gap: 2px; }
.crm-toggle span small {
    display: inline; font-family: var(--body); font-size: 13.5px;
    text-transform: none; letter-spacing: 0; color: var(--text-3);
}
.crm-hint {
    font-family: var(--label); font-size: 9.5px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); line-height: 1.5;
}

.crm-toggles {
    border: 1px solid var(--card-border); border-radius: var(--r);
    padding: 14px 18px 16px; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 4px 20px;
}
.crm-toggles > legend {
    font-family: var(--label); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted); padding: 0 6px;
}

@media (max-width: 1100px) {
    .crm-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-form-row .crm-field.span-2 { grid-column: span 2; }
}
@media (max-width: 620px) {
    .crm-form-row { grid-template-columns: 1fr; }
    .crm-form-row .crm-field.span-2 { grid-column: span 1; }
}

/* A nav item with something waiting carries a dot, so it reads at a glance
   without parsing the number beside it. */
.crm-nav button.has-waiting { position: relative; }
.crm-nav button.has-waiting .lbl::after {
    content: ""; display: inline-block;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--amber); margin-left: 8px;
    vertical-align: 1px;
}
.crm-nav button.has-waiting .lbl { color: var(--text); font-weight: 600; }

/* A headline row opens its editor. The Prepare button stays as the keyboard
   path — a clickable div is not focusable, so it cannot be the only way in. */
.crm-row.is-clickable { cursor: pointer; }
.crm-row.is-clickable:hover { background: var(--surface-hi); }

/* the outlet a headline came from, linked to the piece itself */
.crm-source {
    font-family: var(--label); font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--link);
    overflow-wrap: anywhere; line-height: 1.5;
}
.crm-source:hover { text-decoration: underline; }