/* ── TheJay — Artist Operating System ─────────────────────────────────
   Deliberately single-theme. This is a night product: studio at 2am,
   backstage, a phone in a dark room. Every colour is painted explicitly
   so the page holds on any host ground.

   Two accents, and the split is architectural:
     --acid  is TheJay.      Acid yellow. The product you are in.
     --su    is Starting Up. Warm amber. The foundation underneath.
   Wherever a record actually belongs to Starting Up, it wears amber.
   You can see the ownership boundary without reading a word.
   ──────────────────────────────────────────────────────────────────── */
:root{
  /* The ground is lifted off pure black. #0D0D10 under a saturated accent
     is what makes an interface buzz — there is no headroom left, so every
     coloured thing lands at maximum. A few points of lift and a slight blue
     bias give the warm accent something to sit against instead of fight. */
  --ink:#0D0D10; --ink-2:#101014; --panel:#15151A; --panel-2:#1A1A20; --raise:#22222A;
  --line:#26262D; --line-2:#33333C;
  /* Four tiers, and --body is the one that was missing.
     --text  15.9:1  headings, and a word inside a sentence that must land
     --body  10.1:1  ANY sentence somebody has to read
     --dim    6.7:1  a secondary line beside one they have already read
     --faint  3.96:1 labels and meta ONLY — it fails WCAG AA for body text,
                     and the public site was setting 12.5px captions in it.
     A page that paints every sentence --dim is a page that reads as blurry
     without any one thing on it being wrong. */
  --text:#E9E9E6; --body:#C6C6CC; --dim:#9797A1; --faint:#70707A; --ghost:#4A4A54;

  /* Two tiers, because the accent was doing two jobs at one brightness.
     --acid is a FILL: buttons, bars, the wordmark, a dot. It is never small
     text. --acid-soft is the TEXT and line tier — same hue, enough luminance
     taken out that a screen full of it does not glare. */
  --acid:#CFE255; --acid-soft:#B7CB4C; --acid-deep:#8E9E36;
  --acid-wash:rgba(207,226,85,.09); --acid-line:rgba(207,226,85,.24);

  /* Starting Up's amber, rendered for a dark ground. Same identity, no glare. */
  --su:#E3B74E; --su-wash:rgba(227,183,78,.09); --su-line:rgba(227,183,78,.26);

  /* Semantics pulled back too — five fully saturated signals shouting at
     once is why none of them read as urgent. */
  --ok:#5FBF93; --ok-wash:rgba(95,191,147,.11);
  --warn:#D8A05A; --warn-wash:rgba(216,160,90,.11);
  --hot:#DE7266; --hot-wash:rgba(222,114,102,.11);
  --cool:#8496D6; --cool-wash:rgba(132,150,214,.11);
  --d:'Archivo',-apple-system,'Segoe UI',sans-serif;
  --u:'Instrument Sans',-apple-system,'Segoe UI',sans-serif;
  --m:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --r:4px; --r2:3px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--u);font-size:14px;line-height:1.5;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{margin:0;font-family:var(--d);font-weight:800;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acid);outline-offset:2px;border-radius:2px}
::selection{background:var(--acid-soft);color:#12140B}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:#2C2C34;border:3px solid var(--ink);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#43434E}

/* ── primitives ─────────────────────────────────────────────────── */
.mono{font-family:var(--m);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.hrule{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.hrule::after{content:'';flex:1;height:1px;background:var(--line)}
/* The ⓘ beside a section heading. Explanation a screen needs to be able to
   give but does not need to spend a column on — see INFO in app.js. Inside a
   .hrule it lands between the last real child and the ::after rule, which is
   where it wants to be: against the heading, not floating at the far right. */
.ibtn{width:16px;height:16px;flex:none;border-radius:50%;border:1px solid var(--line-2);
      background:transparent;color:var(--faint);font-family:var(--m);font-size:10px;line-height:1;
      cursor:pointer;display:grid;place-items:center;padding:0}
.ibtn:hover{border-color:var(--acid-line);color:var(--acid-soft)}
.dim{color:var(--dim)} .faint{color:var(--faint)}
.num{font-family:var(--d);font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.03em;
     font-stretch:105%;line-height:1}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.card.pad{padding:18px}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.grow{flex:1;min-width:0}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:11px;
      font-weight:600;letter-spacing:.01em;background:var(--raise);color:var(--dim);border:1px solid transparent;white-space:nowrap}
.pill.acid{background:var(--acid-wash);color:var(--acid-soft);border-color:var(--acid-line)}
.pill.su{background:var(--su-wash);color:var(--su);border-color:var(--su-line)}
.pill.ok{background:var(--ok-wash);color:var(--ok)}
.pill.warn{background:var(--warn-wash);color:var(--warn)}
.pill.hot{background:var(--hot-wash);color:var(--hot)}
.pill.cool{background:var(--cool-wash);color:var(--cool)}
.pill.ghost{background:transparent;border-color:var(--line-2);color:var(--faint)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 14px;
     border-radius:var(--r2);border:1px solid var(--line-2);color:var(--text);font-size:13px;font-weight:600;
     transition:background .13s,border-color .13s,color .13s;white-space:nowrap}
.btn:hover{background:var(--raise);border-color:#43434E}
.btn.acid{background:var(--acid);color:#12140B;border-color:var(--acid)}
.btn.acid:hover{background:#DCEC72;border-color:#DCEC72}
.btn.ghost{border-color:transparent;color:var(--dim)}
.btn.ghost:hover{color:var(--text);background:var(--raise)}
.btn.sm{height:28px;padding:0 10px;font-size:12px}
.btn.su{border-color:var(--su-line);color:var(--su)}
.btn.su:hover{background:var(--su-wash);border-color:var(--su)}
.btn[disabled]{opacity:.4;cursor:not-allowed}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

.inp{height:36px;padding:0 11px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r2);
     color:var(--text);font-size:13px;width:100%}
.inp:focus{border-color:var(--acid-line);outline:none;background:#0F0F13}
textarea.inp{height:auto;padding:9px 11px;resize:vertical;line-height:1.5}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 15px) 16px,calc(100% - 10px) 16px;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
.toggle{width:34px;height:19px;border-radius:999px;background:var(--raise);border:1px solid var(--line-2);
        position:relative;flex:none;transition:background .15s,border-color .15s;cursor:pointer}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
        background:var(--faint);transition:transform .15s,background .15s}
.toggle[aria-pressed="true"]{background:var(--acid-wash);border-color:var(--acid-line)}
.toggle[aria-pressed="true"]::after{transform:translateX(15px);background:var(--acid)}

/* avatars: initials on a slab, tinted by owner */
.av{width:32px;height:32px;border-radius:var(--r2);display:grid;place-items:center;flex:none;
    font-family:var(--d);font-weight:800;font-size:12px;letter-spacing:.01em;
    background:var(--raise);color:var(--dim);border:1px solid var(--line)}
.av.lg{width:56px;height:56px;font-size:19px;border-radius:var(--r)}
.av.xl{width:96px;height:96px;font-size:32px;border-radius:var(--r)}
.av.sm{width:24px;height:24px;font-size:10px}
.art{border-radius:var(--r2);flex:none;position:relative;overflow:hidden;
     background:linear-gradient(135deg,#1D1D24,#121217)}
.art::after{content:'';position:absolute;inset:0;background:
  repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px)}

/* ── app shell ──────────────────────────────────────────────────── */
#app{display:none;grid-template-columns:250px minmax(0,1fr)}
#app.on{display:grid}
.rail{position:sticky;top:0;height:100dvh;border-right:1px solid var(--line);background:var(--ink-2);
      display:flex;flex-direction:column;z-index:30}
.brand{padding:20px 18px 16px;border-bottom:1px solid var(--line)}
.wordmark{font-family:var(--d);font-weight:900;font-size:23px;letter-spacing:-.045em;font-stretch:112%;line-height:1}
.wordmark i{font-style:normal;color:var(--acid)}
.tagline{font-family:var(--m);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:5px}

.entity{margin:12px 12px 4px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r);
        background:var(--panel);cursor:pointer;text-align:left;width:calc(100% - 24px);
        display:flex;gap:10px;align-items:center;transition:border-color .13s}
.entity:hover{border-color:var(--su-line)}
.entity .mark{width:28px;height:28px;border-radius:var(--r2);background:var(--su-wash);border:1px solid var(--su-line);
        color:var(--su);display:grid;place-items:center;font-family:var(--d);font-weight:900;font-size:11px;flex:none}
.entity .nm{font-weight:700;font-size:13px;line-height:1.2}
.entity .sub{font-family:var(--m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--su);opacity:.75;margin-top:3px}
.rail .sulink{display:block;padding:2px 14px 12px;margin:0 12px;font-size:11.5px;color:var(--faint);transition:color .13s}
.rail .sulink:hover{color:var(--su)}
/* Represented by — a fact about the brand above it, so it is styled as a
   caption on that card rather than as a nav entry. `[hidden]` is spelled out
   because the rule above it sets `display`. */
.repline{display:block;width:calc(100% - 24px);margin:2px 12px 0;padding:0 14px 6px;
     text-align:left;font-size:11.5px;line-height:1.4;color:var(--faint);transition:color .13s}
.repline:hover{color:var(--text)}
.repline b{color:var(--dim);font-weight:600}
.repline[hidden]{display:none}

nav{padding:10px 12px;display:flex;flex-direction:column;gap:1px;overflow-y:auto;flex:1}
.nav-item{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:var(--r2);color:var(--dim);
     font-size:13.5px;font-weight:500;position:relative;transition:color .13s,background .13s;text-align:left;width:100%}
.nav-item:hover{color:var(--text);background:var(--panel)}
.nav-item.on{color:var(--text);background:var(--panel);font-weight:600}
.nav-item.on::before{content:'';position:absolute;left:-12px;top:6px;bottom:6px;width:2px;background:var(--acid)}
.nav-item svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;
     stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.nav-item .cnt{margin-left:auto;font-family:var(--m);font-size:10px;color:var(--faint);
     background:var(--raise);padding:1px 6px;border-radius:999px}
.nav-item.on .cnt{color:var(--acid-soft);background:var(--acid-wash)}
.nav-sep{margin:12px 11px 6px;font-family:var(--m);font-size:9.5px;letter-spacing:.18em;
     text-transform:uppercase;color:var(--ghost)}
/* The unnamed division under the three groups. A rule rather than a heading:
   what is below it is about the whole workspace and so has no name that is not
   already a lie about the part of it it belongs to. */
.nav-gap{margin:11px 11px 10px;border-top:1px solid var(--line)}
.rail-foot{border-top:1px solid var(--line);padding:12px 14px;display:flex;align-items:center;gap:9px}
.rail-foot .su-mk{width:18px;height:18px;border-radius:3px;background:var(--su);color:#17130C;
     display:grid;place-items:center;font-family:var(--d);font-weight:900;font-size:10px;flex:none}
.rail-foot span{font-size:11px;color:var(--faint);line-height:1.25}

main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:25;height:56px;padding:0 26px;display:flex;align-items:center;gap:14px;
    border-bottom:1px solid var(--line);background:rgba(13,13,16,.84);backdrop-filter:blur(14px)}
.crumb{font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
    display:flex;align-items:center;gap:9px}
.crumb b{color:var(--text);font-weight:500}
.crumb .sl{color:var(--ghost)}
.wrap{padding:30px 26px 90px;max-width:1440px;width:100%}
.wrap.tight{max-width:1120px}

/* assistant trigger sits in the topbar, not floating in a corner */
.asst-btn{display:flex;align-items:center;gap:9px;height:34px;padding:0 12px 0 10px;border:1px solid var(--acid-line);
    border-radius:var(--r2);background:var(--acid-wash);color:var(--acid-soft);font-size:12.5px;font-weight:600}
.asst-btn:hover{background:rgba(227,255,62,.16)}
.asst-btn .n{font-family:var(--m);font-size:10px;background:var(--acid);color:#12140B;
    padding:1px 5px;border-radius:999px;font-weight:700}

/* ── section scaffolding ────────────────────────────────────────── */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px;flex-wrap:wrap}
.page-head h1{font-size:clamp(28px,3.4vw,42px);font-stretch:108%;letter-spacing:-.035em;line-height:.98;text-transform:uppercase}
.page-head .lede{color:var(--dim);font-size:14.5px;margin-top:9px;max-width:60ch}
.head-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:24px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:9px 13px;font-size:13px;font-weight:600;color:var(--faint);border-bottom:2px solid transparent;
     margin-bottom:-1px;white-space:nowrap;transition:color .13s,border-color .13s}
.tab:hover{color:var(--dim)}
.tab.on{color:var(--text);border-bottom-color:var(--acid)}
.tab .c{font-family:var(--m);font-size:10px;color:var(--faint);margin-left:6px}
.seg{display:inline-flex;padding:2px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2)}
.seg button{padding:5px 11px;border-radius:2px;font-size:12px;font-weight:600;color:var(--faint)}
.seg button.on{background:var(--raise);color:var(--text)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:5px 11px;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:600;
      color:var(--dim);background:var(--panel);transition:all .13s}
.chip:hover{border-color:var(--line-2);color:var(--text)}
.chip.on{background:var(--acid);border-color:var(--acid);color:#12140B}

/* ── metrics: mixer channel strips ──────────────────────────────── */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;background:var(--line);
     border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.metric{background:var(--panel);padding:16px 16px 14px;position:relative}
.metric .k{font-family:var(--m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);padding-right:36px;min-height:26px}
.metric .v{font-size:30px;margin:9px 0 7px;font-family:var(--d);font-weight:800;font-variant-numeric:tabular-nums;
     letter-spacing:-.035em;line-height:1;font-stretch:105%}
.metric .v small{font-size:14px;font-weight:600;color:var(--faint);margin-left:2px;letter-spacing:0}
.metric .d{font-size:11.5px;display:flex;align-items:center;gap:5px;font-weight:600}
.metric .d.up{color:var(--ok)} .metric .d.down{color:var(--hot)} .metric .d.flat{color:var(--faint)}
.metric .strip{position:absolute;right:14px;top:16px;display:flex;gap:2px;align-items:flex-end;height:34px}
.metric .strip i{width:3px;background:var(--line-2);border-radius:1px;display:block}
.metric .strip i.hi{background:var(--acid-deep)}

/* ── attention cards ────────────────────────────────────────────── */
.attn{display:grid;gap:10px}
.acard{display:flex;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
   overflow:hidden;transition:border-color .15s,transform .15s}
.acard:hover{border-color:var(--line-2)}
.acard .sev{width:3px;flex:none;background:var(--line-2)}
.acard.hot .sev{background:var(--hot)} .acard.warn .sev{background:var(--warn)}
.acard.acid .sev{background:var(--acid)} .acard.cool .sev{background:var(--cool)}
.acard .bd{flex:1;min-width:0;padding:15px 17px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.acard .ttl{font-weight:700;font-size:14.5px;letter-spacing:-.01em}
.acard .sub{color:var(--dim);font-size:13px;margin-top:3px}
.acard .acts{display:flex;gap:7px;margin-left:auto}
.acard.done{opacity:.42}
.acard.done .ttl{text-decoration:line-through;text-decoration-color:var(--faint)}

/* ── kanban ─────────────────────────────────────────────────────── */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x proximity}
.col{width:274px;flex:none;scroll-snap-align:start;display:flex;flex-direction:column}
.col-h{display:flex;align-items:center;gap:8px;padding:0 3px 10px;border-bottom:2px solid var(--line);margin-bottom:12px}
.col-h .nm{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.col-h .c{font-family:var(--m);font-size:10.5px;color:var(--faint);margin-left:auto}
.col.act .col-h{border-bottom-color:var(--acid-deep)}
.col.act .col-h .nm{color:var(--dim)}
.col-b{display:flex;flex-direction:column;gap:8px;min-height:90px;border-radius:var(--r);padding:2px;
       transition:background .13s,box-shadow .13s}
.col-b.over{background:var(--acid-wash);box-shadow:inset 0 0 0 1px var(--acid-line)}
.kc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px;cursor:grab;
    transition:border-color .13s,transform .13s,box-shadow .13s;text-align:left;width:100%;display:block}
.kc:hover{border-color:var(--line-2);transform:translateY(-1px)}
.kc:active{cursor:grabbing}
.kc.drag{opacity:.35}
.kc .t{font-weight:700;font-size:13.5px;letter-spacing:-.01em;margin-bottom:3px}
.kc .s{font-size:12px;color:var(--faint)}
.kc .meta{display:flex;gap:7px;align-items:center;margin-top:10px;flex-wrap:wrap}
.kc .rule{height:1px;background:var(--line);margin:10px -12px 10px}
/* The stage as a control on the card, for the hand that cannot drag. */
.kc select.lane{margin-top:10px;width:100%;height:28px;font-size:12px;padding:0 8px;cursor:pointer}

/* ── waveform: the recurring data device ────────────────────────── */
.wave{display:flex;align-items:center;gap:1.5px;height:26px;width:100%}
.wave i{flex:1;background:var(--line-2);border-radius:1px;min-height:2px;display:block;transition:background .2s}
.wave i.on{background:var(--acid-soft)}
.wave.dim i.on{background:var(--acid-deep)}
.wave.tall{height:56px}
.wave.mini{height:15px;gap:1px}

/* ── tables ─────────────────────────────────────────────────────── */
.tbl-wrap{border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;background:var(--panel)}
/* A table dropped straight into a card — the agency roster, the dashboard's
   Next up, Clients, Availability, Representation — met `table{min-width:720px}`
   inside a card with no overflow, under a body with overflow-x hidden, and on
   a phone the right-hand columns (Your fee, Upcoming, Value) were cut off with
   nothing to say so. The card scrolls now, exactly as `.tbl-wrap` does. */
.card:has(> table){overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:720px}
th{text-align:left;font-family:var(--m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
   color:var(--faint);font-weight:400;padding:11px 14px;border-bottom:1px solid var(--line);
   background:var(--ink-2);position:sticky;top:0;white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
tbody tr{cursor:pointer;transition:background .1s}
tbody tr:hover{background:var(--panel-2)}
tbody tr:last-child td{border-bottom:0}
td.num-c{font-family:var(--m);font-variant-numeric:tabular-nums;color:var(--dim)}

/* ── list rows ──────────────────────────────────────────────────── */
.rows{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.lrow{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line);
      width:100%;text-align:left;transition:background .1s}
.lrow:last-child{border-bottom:0}
.lrow:hover{background:var(--panel-2)}

/* ── overlays ───────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(4,4,6,.72);backdrop-filter:blur(3px);z-index:100;
   display:none;align-items:center;justify-content:center;padding:24px}
.scrim.on{display:flex}
.modal{background:var(--panel);border:1px solid var(--line-2);border-radius:6px;width:100%;max-width:520px;
   max-height:88dvh;overflow-y:auto;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:pop .16s ease-out}
.modal.wide{max-width:760px}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.99)}}
.modal-h{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:16px}
.modal-h h3{font-size:18px;text-transform:uppercase;font-stretch:106%;letter-spacing:-.02em}
/* Row-wrap rather than a column, so a form that is a list of the same kind of
   thing — six store links, say — can go two to a row instead of six deep.
   Everything is full width until it asks not to be. */
.modal-b{padding:20px;display:flex;flex-flow:row wrap;gap:16px}
.modal-b > *{width:100%}
.modal-b > .field.half{width:calc(50% - 8px)}
@media(max-width:520px){.modal-b > .field.half{width:100%}}
.modal-f{padding:15px 20px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end}
.x{margin-left:auto;width:28px;height:28px;border-radius:var(--r2);color:var(--faint);display:grid;place-items:center;font-size:17px}
.x:hover{background:var(--raise);color:var(--text)}

/* assistant rail — a working surface, not a chat bubble */
.asst{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:var(--ink-2);
   border-left:1px solid var(--line);z-index:110;transform:translateX(100%);transition:transform .22s cubic-bezier(.4,0,.2,1);
   display:flex;flex-direction:column}
.asst.on{transform:none;box-shadow:-30px 0 70px rgba(0,0,0,.5)}
.asst-h{padding:17px 18px;border-bottom:1px solid var(--line)}
.asst-b{flex:1;overflow-y:auto;padding:18px}
.brief{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--line)}
.brief:last-child{border-bottom:0}
.brief .n{font-family:var(--d);font-weight:800;font-size:12px;color:var(--acid-soft);width:20px;flex:none;
   padding-top:2px;font-variant-numeric:tabular-nums}
.brief .t{font-size:13.5px;font-weight:600;line-height:1.4}
.brief .w{font-size:12.5px;color:var(--dim);margin-top:4px;line-height:1.45}
.brief .a{margin-top:9px;display:flex;gap:7px;flex-wrap:wrap}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:200;
  background:var(--acid);color:#12140B;padding:11px 18px;border-radius:var(--r2);font-weight:700;font-size:13px;
  opacity:0;transition:opacity .18s,transform .18s;pointer-events:none;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── grids ──────────────────────────────────────────────────────── */
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.split{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:22px;align-items:start}
.split-r{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;align-items:start}
@media(max-width:1180px){.split,.split-r{grid-template-columns:minmax(0,1fr)}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.g2,.g3{grid-template-columns:minmax(0,1fr)}
  #app.on{grid-template-columns:1fr}.rail{position:fixed;transform:translateX(-100%);transition:transform .2s}
  .rail.open{transform:none}.wrap{padding:22px 16px 80px}.topbar{padding:0 16px}}
.burger{display:none;width:34px;height:34px;border:1px solid var(--line);border-radius:var(--r2);place-items:center}
.rail-scrim{display:none;position:fixed;inset:0;background:rgba(4,4,6,.6);z-index:29}
@media(max-width:860px){.rail-scrim.on{display:block}}
@media(max-width:860px){.burger{display:grid}}

/* progress */
.bar{height:5px;background:var(--raise);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--acid);border-radius:999px;transition:width .4s cubic-bezier(.4,0,.2,1)}
.bar.thin{height:3px}
.bar i.ok{background:var(--ok)} .bar i.warn{background:var(--warn)} .bar i.su{background:var(--su)}

/* timeline */
.tl{position:relative;padding-left:26px}
.tl::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:var(--line)}
.tl-i{position:relative;padding-bottom:22px}
.tl-i:last-child{padding-bottom:0}
.tl-i::before{content:'';position:absolute;left:-23px;top:5px;width:9px;height:9px;border-radius:50%;
   background:var(--ink);border:1.5px solid var(--line-2)}
.tl-i.on::before{background:var(--acid);border-color:var(--acid)}
.tl-i.now::before{background:var(--ink);border-color:var(--acid);box-shadow:0 0 0 4px var(--acid-wash)}

/* checklist */
.chk{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);width:100%;text-align:left}
.chk:last-child{border-bottom:0}
.chk .bx{width:16px;height:16px;border:1.5px solid var(--line-2);border-radius:3px;flex:none;margin-top:1px;
   display:grid;place-items:center;transition:all .13s}
.chk[aria-checked="true"] .bx{background:var(--acid);border-color:var(--acid)}
.chk[aria-checked="true"] .bx::after{content:'';width:8px;height:4px;border-left:2px solid #12140B;
   border-bottom:2px solid #12140B;transform:rotate(-45deg) translate(1px,-1px)}
.chk[aria-checked="true"] .lb{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--ghost)}
.chk .lb{font-size:13.5px;line-height:1.4}
.chk:hover .bx{border-color:var(--acid-line)}

.hide-sm{display:block}
@media(max-width:620px){.hide-sm{display:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* ── sign-in: the ecosystem handshake ───────────────────────────── */
#auth{min-height:100dvh;display:grid;place-items:center;padding:28px;position:relative;overflow:hidden}
#auth::before{content:'';position:absolute;width:760px;height:760px;border-radius:50%;
  background:radial-gradient(circle,rgba(207,226,85,.07),transparent 64%);top:-320px;left:50%;
  transform:translateX(-50%);pointer-events:none;filter:blur(30px)}
#auth::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.010) 0 1px,transparent 1px 4px)}
.auth-card{position:relative;z-index:2;width:100%;max-width:430px;text-align:center}
.auth-mark{font-family:var(--d);font-weight:900;font-size:60px;letter-spacing:-.05em;font-stretch:115%;line-height:.9}
.auth-mark i{font-style:normal;color:var(--acid)}
.auth-sub{font-family:var(--m);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--faint);margin-top:12px}
.auth-lede{color:var(--dim);font-size:15px;margin:26px auto 30px;max-width:34ch;line-height:1.55}
.su-btn{width:100%;height:50px;border-radius:var(--r);background:var(--su);color:#17130C;font-weight:700;
   font-size:14.5px;display:flex;align-items:center;justify-content:center;gap:11px;transition:background .13s}
.su-btn:hover{background:#EFC763}
.su-btn .mk{width:22px;height:22px;border-radius:4px;background:#17130C;color:var(--su);display:grid;
   place-items:center;font-family:var(--d);font-weight:900;font-size:11px}
.auth-note{margin-top:18px;font-size:12px;color:var(--faint);line-height:1.6}
.auth-note b{color:var(--su);font-weight:600}
.ent-pick{display:flex;flex-direction:column;gap:9px;margin-top:8px;text-align:left}
.ent-opt{display:flex;align-items:center;gap:13px;padding:15px 16px;border:1px solid var(--line);
   border-radius:var(--r);background:var(--panel);transition:all .13s;width:100%;text-align:left}
.ent-opt:hover{border-color:var(--acid-line);background:var(--panel-2)}
.ent-opt[disabled]{opacity:.42;cursor:not-allowed}
.ent-opt[disabled]:hover{border-color:var(--line);background:var(--panel)}
.ent-opt .mk{width:38px;height:38px;border-radius:var(--r2);display:grid;place-items:center;flex:none;
   font-family:var(--d);font-weight:900;font-size:13px;background:var(--su-wash);border:1px solid var(--su-line);color:var(--su)}
.auth-step{display:none} .auth-step.on{display:block}
.hand{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:28px;
   font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ghost)}
.hand b{color:var(--su);font-weight:400} .hand u{color:var(--acid-soft);text-decoration:none}
.spin{width:15px;height:15px;border:2px solid var(--line-2);border-top-color:var(--su);border-radius:50%;
   animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── public surfaces: artist link, EPK, private demo ─────────────── */
#pub{position:fixed;inset:0;z-index:150;background:#0B0B0E;display:none;overflow-y:auto}
#pub.on{display:block}
.pub-bar{position:sticky;top:0;z-index:5;height:46px;display:flex;align-items:center;gap:12px;padding:0 16px;
  background:rgba(11,11,14,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.pub-url{font-family:var(--m);font-size:11.5px;color:var(--dim);background:var(--panel);border:1px solid var(--line);
  padding:5px 11px;border-radius:999px;display:flex;align-items:center;gap:7px}
.pub-url b{color:var(--acid-soft);font-weight:400}
.pub-body{max-width:720px;margin:0 auto;padding:56px 24px 90px}
.pub-hero{position:relative}
.pub-name{font-family:var(--d);font-weight:900;font-size:clamp(44px,10vw,86px);letter-spacing:-.05em;
  line-height:.86;text-transform:uppercase;font-stretch:112%}
.pub-name i{font-style:normal;color:var(--acid)}
.pub-links{display:grid;gap:9px}
.pub-link{display:flex;align-items:center;gap:13px;padding:15px 17px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel);transition:all .14s;font-weight:600}
.pub-link:hover{border-color:var(--acid-line);background:var(--panel-2);transform:translateX(2px)}
.pub-link .ar{margin-left:auto;color:var(--faint);font-family:var(--m);font-size:12px}
.pub-link:hover .ar{color:var(--acid-soft)}
.player{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:17px}
.play-btn{width:46px;height:46px;border-radius:50%;background:var(--acid);color:#12140B;display:grid;
  place-items:center;flex:none;transition:transform .13s}
.play-btn:hover{transform:scale(1.05)}
.play-btn.lg{width:64px;height:64px}
.gig{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.gig .dt{font-family:var(--m);font-size:11px;color:var(--acid-soft);width:62px;flex:none;line-height:1.35}
.stat-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat-band>div{background:var(--panel);padding:14px}
.locked{border:1px dashed var(--line-2);border-radius:var(--r);padding:26px;text-align:center;background:var(--ink-2)}

/* ── charts ─────────────────────────────────────────────────────── */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grid-l{stroke:var(--line);stroke-width:1}
.chart .ax{fill:var(--faint);font-family:var(--m);font-size:9px}
.bars{display:flex;align-items:flex-end;gap:5px;height:96px}
.bars .b{flex:1;background:var(--raise);border-radius:2px 2px 0 0;position:relative;min-height:3px;transition:background .15s}
.bars .b.hi{background:var(--acid)}
.bars .b:hover{background:var(--acid-deep)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--dim)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:2px;display:block}

/* insight card — the "so what", not the chart */
.insight{border:1px solid var(--line);border-left:2px solid var(--acid);border-radius:var(--r);
  background:var(--panel);padding:15px 17px}
.insight.warnl{border-left-color:var(--warn)} .insight.okl{border-left-color:var(--ok)}
.insight .h{font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.insight .b{font-size:12.5px;color:var(--dim);margin-top:6px;line-height:1.5}

/* integrations */
.intg{display:flex;align-items:center;gap:14px;padding:15px 17px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel);transition:border-color .13s}
.intg:hover{border-color:var(--line-2)}
.intg .lg{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;flex:none;
  font-family:var(--d);font-weight:900;font-size:14px;background:var(--raise);color:var(--dim)}
.intg.core{border-color:var(--su-line);background:linear-gradient(180deg,var(--su-wash),transparent 70%)}
.intg.core .lg{background:var(--su);color:#17130C}

/* relationship graph */
.graph{border:1px solid var(--line);border-radius:var(--r);background:
  radial-gradient(circle at 50% 50%,#16161B,#101014);position:relative;overflow:hidden}
.graph svg{display:block;width:100%;height:auto}
.gnode{cursor:pointer}
.gnode text{font-family:var(--u);font-size:10.5px;font-weight:600;fill:var(--text)}
.gnode .ring{fill:var(--panel);stroke:var(--line-2);stroke-width:1}
.gnode.you .ring{fill:var(--acid);stroke:var(--acid)}
.gnode.su .ring{stroke:var(--su-line)}
.gedge{stroke:var(--line-2);stroke-width:1;fill:none}
.gedge.hot{stroke:var(--acid-line);stroke-dasharray:3 3}
.gedge-l{font-family:var(--m);font-size:8px;fill:var(--ghost);letter-spacing:.06em}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cal .hd{background:var(--ink-2);padding:8px;font-family:var(--m);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);text-align:center}
.cal .dy{background:var(--panel);min-height:104px;padding:7px;display:flex;flex-direction:column;gap:4px}
.cal .dy.out{background:var(--ink-2);opacity:.5}
.cal .dy.rel{background:linear-gradient(180deg,var(--acid-wash),transparent 60%),var(--panel)}
.cal .dn{font-family:var(--m);font-size:10.5px;color:var(--faint)}
.cal .dy.rel .dn{color:var(--acid-soft);font-weight:700}
.cal .ev{font-size:10.5px;padding:3px 5px;border-radius:2px;background:var(--raise);color:var(--dim);
  line-height:1.3;border-left:2px solid var(--line-2);text-align:left;width:100%;cursor:pointer}
.cal .ev:hover{background:#2C2C34;color:var(--text)}
.cal .ev.sched,.cal .ev.scheduled{border-left-color:var(--cool)} .cal .ev.posted{border-left-color:var(--ok)}
.cal .ev.ready{border-left-color:var(--acid)} .cal .ev.idea{border-left-color:var(--hot)}
.cal .ev.gig{border-left-color:var(--warn)}

/* asset tiles */
.assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px}
.asset{aspect-ratio:1;border-radius:var(--r);border:1px solid var(--line);position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1D1D24,#131318);display:flex;align-items:flex-end;padding:9px;cursor:pointer}
.asset:hover{border-color:var(--acid-line)}
.asset .tag{font-family:var(--m);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  background:rgba(8,8,10,.8);padding:2px 6px;border-radius:2px;backdrop-filter:blur(4px)}
.asset::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 1px,transparent 1px 9px)}

/* misc */
.kv{display:grid;grid-template-columns:118px minmax(0,1fr);gap:9px 14px;font-size:13.5px;align-items:baseline}
.kv dt{font-family:var(--m);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);padding-top:2px}
.kv dd{margin:0}
.owner{display:inline-flex;align-items:center;gap:5px;font-family:var(--m);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--su);opacity:.8}
.owner::before{content:'';width:5px;height:5px;border-radius:1px;background:var(--su)}
.owner.jay{color:var(--acid-deep)} .owner.jay::before{background:var(--acid-deep)}
.empty{padding:42px 20px;text-align:center;color:var(--faint);font-size:13px}
.note{background:var(--panel-2);border:1px solid var(--line);border-left:2px solid var(--su);
  border-radius:var(--r);padding:12px 15px;font-size:12.5px;color:var(--dim);line-height:1.55}
.note b{color:var(--su);font-weight:600}
.demo-banner{display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);font-size:11px;color:var(--faint);font-family:var(--m);
  letter-spacing:.08em;text-transform:uppercase}

/* ── the smart release link ─────────────────────────────────────── */
/* A row per store on the public page. Big, tappable, and the same shape
   whether it says Play or Pre-save — a fan on a phone in a queue is the
   only user this page has. */
.svc{display:flex;align-items:center;gap:13px;padding:13px 15px;background:var(--panel);
     border:1px solid var(--line);border-radius:var(--r);transition:border-color .12s,background .12s}
.svc:hover{border-color:var(--acid-line);background:var(--panel-2)}
.svc .mk{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:var(--r2);
         background:var(--raise);font-family:var(--m);font-size:11px;font-weight:700;color:var(--dim)}
.svc:hover .mk{background:var(--acid-wash);color:var(--acid-soft)}
.svc .grow{font-weight:600;font-size:14px}
.svc .go{font-family:var(--m);font-size:11px;color:var(--faint);letter-spacing:.04em}
.svc:hover .go{color:var(--acid-soft)}

/* ── the content workflow ───────────────────────────────────────── */
/* Production stage is drawn as POSITION rather than as a sixth colour. The
   palette already spends five hues on severity, and five saturated signals
   shouting at once is why none of them read as urgent. */
.track{display:inline-flex;gap:2px;align-items:center;vertical-align:middle}
.track i{width:9px;height:3px;border-radius:1px;background:var(--line-2);display:block}
.track i.on{background:var(--acid-deep)}
.stage-nm{font-family:var(--m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

/* a platform, in the two letters a row has room for */
.pm{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:3px;flex:none;
  font-family:var(--m);font-size:8.5px;font-weight:700;letter-spacing:-.02em;
  background:var(--raise);color:var(--dim);border:1px solid transparent}
.pm.on{background:var(--acid-wash);color:var(--acid-soft);border-color:var(--acid-line)}
.pm.sched{background:var(--cool-wash);color:var(--cool);border-color:rgba(132,150,214,.26)}
.pm.posted{background:var(--ok-wash);color:var(--ok);border-color:rgba(95,191,147,.26)}
.pm.fail{background:var(--hot-wash);color:var(--hot);border-color:rgba(222,114,102,.3)}
.pmrow{display:inline-flex;gap:3px;align-items:center}

/* one content row, used wherever content is listed */
.crow{display:flex;align-items:center;gap:13px;padding:11px 14px;border-bottom:1px solid var(--line);
  width:100%;text-align:left;transition:background .1s}
.crow:last-child{border-bottom:0}
.crow:hover{background:var(--panel-2)}
.crow .thumb{width:38px;height:38px;border-radius:var(--r2);flex:none;display:grid;place-items:center;
  font-family:var(--m);font-size:9px;letter-spacing:.05em;color:var(--faint);
  background:linear-gradient(135deg,#1D1D24,#121217);border:1px solid var(--line)}
.crow .thumb.has{border-color:var(--acid-line);color:var(--acid-soft)}
.crow .thumb.miss{border-style:dashed;border-color:rgba(222,114,102,.5);color:var(--hot);background:var(--hot-wash)}
.crow .nm{font-weight:600;font-size:13.5px;letter-spacing:-.01em;display:block}
.crow .sub{font-family:var(--m);font-size:10.5px;color:var(--faint);margin-top:3px;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* the calendar card — a planned post, finished or not */
.cal .dy.today{box-shadow:inset 0 0 0 1px var(--acid-line)}
.cal .dy.over{background:var(--acid-wash);box-shadow:inset 0 0 0 1px var(--acid)}
.cal.week .dy{min-height:330px}
.cal .add{margin-top:auto;font-family:var(--m);font-size:9.5px;color:var(--ghost);text-align:left;
  padding:2px 3px;border-radius:2px;opacity:0;transition:opacity .12s}
.cal .dy:hover .add,.cal .add:focus-visible{opacity:1}
.cal .add:hover{color:var(--acid-soft);background:var(--acid-wash)}
.cal .ev{display:block;cursor:grab}
.cal .ev:active{cursor:grabbing}
.cal .ev.dragging{opacity:.35}
.cal .ev .t{font-size:11px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal .ev .m{font-family:var(--m);font-size:9px;color:var(--faint);margin-top:3px;
  display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cal .ev .pmrow{margin-top:4px}
.cal .ev .warnln{font-family:var(--m);font-size:9px;color:var(--hot);margin-top:3px}
.cal .ev.attn{border-left-color:var(--hot)}
.cal .ev.posted{opacity:.7}
.cal .ev.rel{background:var(--acid-wash);border-left-color:var(--acid)}

/* the production note on a board card: the line that makes it actionable
   a week after it was written */
.kc .pnote{font-size:11.5px;color:var(--dim);line-height:1.45;margin-top:8px}
.kc.blocked{border-color:rgba(222,114,102,.34)}
.kc.dragging{opacity:.35}

/* ideas */
.ideas{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.idea{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;
  display:flex;flex-direction:column;gap:9px;transition:border-color .13s}
.idea:hover{border-color:var(--line-2)}
.idea.ai{border-color:var(--su-line);background:linear-gradient(180deg,var(--su-wash),transparent 55%),var(--panel)}
.idea .t{font-weight:700;font-size:14px;letter-spacing:-.015em;line-height:1.3}
.idea .b{font-size:12.5px;color:var(--dim);line-height:1.5}
.idea .f{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}

/* ── the composer ───────────────────────────────────────────────── */
/* Two columns: what TheJay knows on the left, what it wrote on the right.
   The context panel is not decoration — it is the argument for the whole
   feature, so it is on screen while the artist reads the captions. */
.modal.comp-modal{max-width:1080px}
.comp{display:grid;grid-template-columns:250px minmax(0,1fr) 296px;gap:0;align-items:stretch}
@media(max-width:1100px){.comp{grid-template-columns:1fr}}
.comp-ctx{padding:18px 20px;border-right:1px solid var(--line);background:var(--ink-2);
          display:flex;flex-direction:column;gap:14px}
.comp-pv{padding:18px 20px;border-left:1px solid var(--line);background:var(--ink-2);
         display:flex;flex-direction:column;gap:13px}
@media(max-width:1100px){.comp-ctx{border-right:0;border-bottom:1px solid var(--line)}
  .comp-pv{border-left:0;border-top:1px solid var(--line)}}

/* readiness: the answer to "can this go out", one line per reason */
.ready-box{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.ready-h{display:flex;align-items:center;gap:9px;padding:10px 13px;border-bottom:1px solid var(--line);
  font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.ready-h.go{color:var(--ok);background:var(--ok-wash)}
.ready-h.no{color:var(--hot);background:var(--hot-wash)}
.chk{display:flex;gap:9px;align-items:flex-start;padding:9px 13px;font-size:12.5px;
  border-bottom:1px solid rgba(38,38,45,.6)}
.chk:last-child{border-bottom:0}
.chk .mk{width:14px;height:14px;border-radius:3px;flex:none;display:grid;place-items:center;
  font-size:9px;font-weight:800;margin-top:1px;font-family:var(--m)}
.chk.ok .mk{background:var(--ok-wash);color:var(--ok)}
.chk.no .mk{background:var(--hot-wash);color:var(--hot)}
.chk.warn .mk{background:var(--warn-wash);color:var(--warn)}
.chk .tx{color:var(--dim);line-height:1.45}
.chk.no .tx{color:var(--text)}
.chk .fix{margin-left:auto;flex:none}

/* a platform preview: enough chrome to judge the crop and the first line */
.pv{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#0A0A0C}
.pv-h{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--panel)}
.pv-av{width:22px;height:22px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--acid-deep),#3A4415)}
.pv-h .hn{font-size:11.5px;font-weight:700}
.pv-media{aspect-ratio:4/5;background:linear-gradient(150deg,#191920,#0E0E12);display:grid;place-items:center;
  position:relative;overflow:hidden}
.pv-media.tall{aspect-ratio:9/16}
.pv-media.wide{aspect-ratio:1.91/1}
.pv-media.square{aspect-ratio:1}
.pv-media::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(118deg,rgba(255,255,255,.028) 0 1px,transparent 1px 8px)}
.pv-media .ph{font-family:var(--m);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ghost);text-align:center;padding:14px;z-index:1;line-height:1.6;overflow-wrap:anywhere}
.pv-media.missing{background:var(--hot-wash);border-bottom:1px dashed rgba(222,114,102,.4)}
.pv-media.missing .ph{color:var(--hot)}
.pv-cap{padding:9px 11px;font-size:11.5px;line-height:1.5;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.pv-cap .hn{font-weight:700}

/* the media slot: a real drop target, empty by design */
.slot.over{border-color:var(--acid);background:var(--acid-wash)}
.slot.need{border-color:rgba(222,114,102,.45);background:var(--hot-wash)}
.slot.need .ic{background:transparent;color:var(--hot);border:1px dashed rgba(222,114,102,.5)}

/* one channel's words, inherited or its own */
.pcap{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.pcap.own{border-color:var(--su-line)}
.pcap-h{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pcap-h .ch{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.pcap textarea{width:100%;border:0;background:transparent;padding:11px 12px;font-size:13px;line-height:1.55;
  resize:vertical;min-height:76px;display:block;font-family:var(--u)}
.pcap textarea:focus{outline:none;background:var(--ink-2)}
.pcap-read{padding:11px 12px;font-size:13px;line-height:1.55;color:var(--dim);white-space:pre-wrap;
  min-height:44px;overflow-wrap:anywhere}
.pcap-f{display:flex;align-items:center;gap:8px;padding:7px 12px;border-top:1px solid var(--line)}
.pcap .cnt{font-family:var(--m);font-size:10px;color:var(--faint);margin-left:auto;flex:none}
.pcap .cnt.over{color:var(--hot)}
.inherit{font-family:var(--m);font-size:10px;color:var(--faint)}

/* AI as inline verbs, never a chat box */
.ai-bar{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.ai-act{font-size:11.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--su-line);color:var(--su);
  background:var(--su-wash);font-weight:600;transition:background .12s}
.ai-act:hover{background:rgba(227,183,78,.17)}
.ai-act.busy{opacity:.5;pointer-events:none}

.btn.xs{height:24px;padding:0 8px;font-size:11px}
.comp-main{padding:18px 20px;display:flex;flex-direction:column;gap:16px;min-width:0}
.ctx-row{display:flex;gap:10px;font-size:12.5px;align-items:baseline}
.ctx-row .k{font-family:var(--m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
            color:var(--faint);width:74px;flex:none;padding-top:2px}
.ctx-row .v{color:var(--text);line-height:1.45;min-width:0;overflow-wrap:anywhere}
.ctx-row .v.miss{color:var(--ghost);font-style:italic}

/* One caption per channel, framed the way the platform frames it. Not a
   pixel-accurate mock — a reminder that these are four different rooms. */
.post{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.post.on{border-color:var(--acid-line)}
.post-h{display:flex;align-items:center;gap:9px;padding:9px 13px;border-bottom:1px solid var(--line);
        background:var(--ink-2)}
.post-h .ch{font-weight:700;font-size:12.5px}
.post textarea{width:100%;border:0;background:transparent;padding:13px;font-size:13.5px;line-height:1.55;
               resize:vertical;min-height:104px;font-family:var(--u);white-space:pre-wrap}
.post textarea:focus{outline:0;background:var(--panel-2)}
.post-f{display:flex;align-items:center;gap:8px;padding:8px 13px;border-top:1px solid var(--line)}
.post-f .cnt{font-family:var(--m);font-size:10.5px;color:var(--faint);margin-left:auto}

.chan-pick{display:flex;gap:7px;flex-wrap:wrap}
.chan{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;font-size:12px;
      font-weight:600;background:var(--panel);border:1px solid var(--line);color:var(--faint)}
.chan[aria-pressed="true"]{background:var(--acid-wash);border-color:var(--acid-line);color:var(--acid-soft)}

/* The asset slot. There is no file storage yet and the interface says so
   rather than drawing an upload box that drops what you give it. */
.slot{display:flex;gap:12px;align-items:center;padding:13px;border:1px dashed var(--line-2);
      border-radius:var(--r);background:var(--ink-2)}
.slot.has{border-style:solid;border-color:var(--acid-line);background:var(--acid-wash)}
.slot .ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:var(--r2);
          background:var(--raise);color:var(--faint);font-family:var(--m);font-size:10px}
.slot.has .ic{background:var(--acid);color:#12140B}

/* ── plan timeline on the release workspace ─────────────────────── */
.plan{display:flex;flex-direction:column}
.plan-i{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.plan-i:last-child{border-bottom:0}
.plan-i .off{font-family:var(--m);font-size:11px;color:var(--faint);width:42px;flex:none;text-align:right;
             padding-top:3px;font-variant-numeric:tabular-nums}
.plan-i.day .off{color:var(--acid);font-weight:700}
.plan-i .bd{flex:1;min-width:0}
.plan-i .st{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}

/* A channel chip carrying its own state, used wherever a content row is
   listed. Green means that platform is finished, not that the item is. */
.cst{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:10.5px;
     font-family:var(--m);letter-spacing:.03em;background:var(--raise);color:var(--faint)}
.cst.draft{color:var(--dim)}
.cst.sched{background:var(--cool-wash);color:var(--cool)}
.cst.posted{background:var(--ok-wash);color:var(--ok)}
.cst.none{border:1px dashed var(--line-2);background:transparent;color:var(--ghost)}

/* ── today ──────────────────────────────────────────────────────── */
/* Home's spine. Numbered like the assistant briefing because it is the same
   list — the panel is the overflow, not a separate opinion. */
.today{display:flex;flex-direction:column;gap:9px}
.tcard{display:flex;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
       overflow:hidden;transition:border-color .12s}
.tcard:hover{border-color:var(--line-2)}
.tcard .sev{width:3px;flex:none;background:var(--line-2)}
.tcard.hot .sev{background:var(--hot)} .tcard.warn .sev{background:var(--warn)}
.tcard.acid .sev{background:var(--acid)} .tcard.cool .sev{background:var(--cool)}
.tcard .bd{flex:1;min-width:0;padding:14px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.tcard .n{font-family:var(--d);font-weight:800;font-size:11px;color:var(--faint);width:16px;flex:none}
.tcard .ttl{font-weight:700;font-size:14px;letter-spacing:-.01em}
.tcard .sub{color:var(--dim);font-size:12.5px;margin-top:3px;line-height:1.45}
.tcard .acts{display:flex;gap:7px;margin-left:auto;flex-wrap:wrap}
.tcard.done{opacity:.4}
.tcard.done .ttl{text-decoration:line-through;text-decoration-color:var(--faint)}

/* ── pricing: the plan columns and the comparison ────────────────── */
/*
 * These live here rather than in a `<style>` block on `pricing.html`, and that
 * is not a filing preference — it is the CSP.
 *
 * `style-src-elem 'self'` means an inline `<style>` element is dropped by the
 * browser with no error anybody sees, which is exactly the defect that left
 * every `style="…"` attribute in this product discarded for months. A pricing
 * page whose layout silently collapses in production is the worst page to
 * learn that lesson on twice.
 */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;margin-top:26px}
.tier{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
      padding:22px;display:flex;flex-direction:column;gap:14px}
.tier.lead{border-color:var(--acid-line);background:linear-gradient(170deg,var(--acid-wash),transparent 62%),var(--panel)}
.tier ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.tier li{padding-left:16px;position:relative;font-size:13px;line-height:1.5;color:var(--dim)}
.tier li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;
                 border-radius:50%;background:var(--ghost)}
.tier.lead li::before{background:var(--acid-deep)}
.tier .price{font-family:var(--m);font-variant-numeric:tabular-nums;font-size:30px;
             color:var(--text);margin-top:10px;line-height:1.1}
.tier .price span{font-size:12.5px;letter-spacing:.04em;color:var(--faint)}
.tier .plan-name{font-family:var(--d);font-weight:800;font-size:20px;letter-spacing:-.02em;margin-top:9px}
.tier .under{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;
             text-transform:uppercase;color:var(--faint);margin-top:5px}

/* The matrix scrolls inside its own box. The page body must never scroll
   sideways — a horizontal scrollbar under a price list reads as broken. */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.cmp{width:100%;min-width:560px;border-collapse:collapse;font-size:13.5px}
.cmp th{font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
        color:var(--faint);font-weight:400;text-align:left;padding:10px 12px;
        border-bottom:1px solid var(--line-2)}
.cmp td{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--dim);vertical-align:top}
.cmp td:first-child{color:var(--text)}
.cmp tr:last-child td{border-bottom:0}
.cmp tr.grp td{background:var(--ink-2);font-family:var(--m);font-size:9.5px;letter-spacing:.15em;
               text-transform:uppercase;color:var(--acid-deep);padding:8px 12px}
.cmp .y{color:var(--ok)}
.cmp .n{color:var(--faint)}
.cmp .num{font-family:var(--m);font-variant-numeric:tabular-nums;color:var(--text)}

/* ── landing: audiences and the network map ─────────────────────── */
/* The four participant types, with today's honesty attached to each. Only
   one of them is a product; the row would be a lie without the pills. */
.aud{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:1px;
     background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.aud > div{background:var(--panel);padding:15px 16px;display:flex;flex-direction:column;
           gap:7px;align-items:flex-start}
/* Opaque base, wash on top. `.aud` is a 1px-gap grid on a --line ground,
   so the old translucent-first gradient let the gridline colour bleed
   through the top of the two highlighted cells — on the landing page,
   in production, for as long as this rule has existed. */
.aud > div.on{background:linear-gradient(170deg,var(--acid-wash),transparent 70%),var(--panel)}
.aud b{font-size:15px;letter-spacing:-.01em}
.aud .dim{font-size:12.5px;line-height:1.45}

/* Hub and spokes. Drawn rather than described because the claim is a shape:
   one layer in the middle, four kinds of participant around it, and exactly
   one of them lit. */
.netmap{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:18px 10px}
.netmap svg{width:100%;height:auto;display:block;overflow:visible}
.netmap .e{stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:4 4}
/* A spoke that carries something today. Solid rather than dashed, because the
   dash is the whole visual claim being made about the other two: an intention
   rather than a connection. */
.netmap .e.live{stroke:var(--acid-line);stroke-width:1.8;stroke-dasharray:none}
.netmap .hub circle{fill:var(--acid-wash);stroke:var(--acid-line);stroke-width:1.5}
.netmap .hub-t{fill:var(--acid);font-family:var(--d);font-weight:800;font-size:17px;letter-spacing:-.02em}
.netmap .hub-t .i{fill:var(--text)}
.netmap .hub-s{fill:var(--faint);font-family:var(--m);font-size:7.5px;letter-spacing:.11em;text-transform:uppercase}
.netmap .n circle{fill:var(--panel-2);stroke:var(--line-2);stroke-width:1.2}
.netmap .n text{fill:var(--dim);font-family:var(--u);font-size:12px;font-weight:600}
.netmap .n.on circle{fill:var(--acid-wash);stroke:var(--acid-line)}
.netmap .n.on text{fill:var(--text)}
.netmap .tag{fill:var(--acid-soft);font-family:var(--m);font-size:8px;letter-spacing:.11em;text-transform:uppercase}
/* A tag on a node that is not lit. The promoter needs no account, which is a
   fact about them rather than a stage of the roadmap — so it is labelled, but
   not in the colour that means "this shipped". */
.netmap .tag.quiet{fill:var(--faint)}
@media(max-width:560px){.netmap .n text{font-size:14px}.netmap .hub-t{font-size:20px}}

/* ── landing: panels ─────────────────────────────────────────────────
   A drawing of a screen, on a page a stranger reads before they have
   signed in to anything.

   The landing page used to be entirely prose: twelve cards of claims and
   one SVG, and the SVG was the network map — a picture of the part that
   does not exist yet. Every competitor in this category leads with a
   screenshot; this product led with an argument and then asked somebody to
   make an account to find out whether the argument came with software.

   ## Why these are markup and not screenshots

   A PNG of a dark UI compresses badly, so six of them is a landing page
   that loads slower than the app it advertises. A PNG also goes stale in
   silence, on a page that already has a test failing when its *copy* goes
   stale. And the rows would be invented either way — there is no
   customer's real demo queue that can be published — so the choice is not
   between evidence and illustration, it is between an illustration that
   weighs two megabytes and one that weighs two kilobytes.

   The reason that decided it: a panel is *rendered by* the design system
   rather than photographed from it. The classes below are a frame; almost
   everything inside a panel on the landing page is `.card`, `.chip`,
   `.pill`, `.av`, `.bar` and `.kv` — the same rules the product draws
   with. Restyle a chip and the marketing page is restyled the same
   afternoon, for nothing, forever.

   ## The rule that keeps one honest

   A panel is hand-written and could therefore lie. Two things stop it: it
   may only show behaviour a screen actually has, and it must be built out
   of real class names — which
   `test/the_site_says_what_the_code_does.test.js` enforces by asserting
   every class on the landing page exists as a selector in this file. A
   rename breaks the build rather than quietly flattening a panel that
   nobody looks at until a customer does.
──────────────────────────────────────────────────────────────────── */
.pn{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;
    background:linear-gradient(178deg,var(--panel-2),var(--panel) 60%);
    box-shadow:0 18px 44px -22px #000}
/* The chrome strip. Not a fake browser bar with three coloured dots — it
   names the screen, which is the one thing a reader needs in order to know
   what they are looking at. */
.pn-top{display:flex;align-items:center;gap:9px;padding:9px 13px;
        border-bottom:1px solid var(--line);background:var(--ink-2)}
.pn-top .dot{width:7px;height:7px;border-radius:50%;background:var(--acid);flex:none;
             box-shadow:0 0 0 3px var(--acid-wash)}
.pn-top .w{font-family:var(--m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
           color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pn-top .w b{color:var(--dim);font-weight:500}
.pn-top .r{margin-left:auto;font-family:var(--m);font-size:10px;color:var(--ghost);
           letter-spacing:.08em;white-space:nowrap}
.pn-in{padding:15px 15px 17px}

/* The line under a panel. Quiet on purpose: the panel is the loud half, and
   a caption competing with it is two things asking to be read first. */
.pn-note{font-size:12.5px;line-height:1.6;color:var(--faint);
         padding-left:12px;border-left:2px solid var(--line-2)}
.pn-note i{color:var(--dim);font-style:italic}

/* A row in a drawn queue: initials, what it is, when it landed. */
.qr{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.qr:first-of-type{border-top:0}
.qr .t{display:block;font-size:13.5px;color:var(--text);line-height:1.35;
       overflow:hidden;text-overflow:ellipsis}
.qr .s{display:block;font-size:11.5px;color:var(--faint);line-height:1.4;margin-top:2px;
       overflow:hidden;text-overflow:ellipsis}
.qr .m{font-family:var(--m);font-size:10.5px;color:var(--ghost);letter-spacing:.05em;
       white-space:nowrap;flex:none}
.qr .av{width:28px;height:28px;font-size:10px}

/* A field with the answer already in it — the store scan's identifier. */
.pn-inp{display:flex;align-items:center;gap:9px;background:var(--ink-2);
        border:1px solid var(--line-2);border-radius:var(--r2);padding:9px 12px;
        font-family:var(--m);font-size:12.5px;color:var(--text);letter-spacing:.04em}
.pn-inp .k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ghost)}
.pn-inp .go{margin-left:auto;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
            color:var(--acid-soft)}

/* The same scheduled post on both plans, which is the entire subscription
   argument and needs no pricing table to make it. Amber is the free line
   and acid the paid one — the product's own two accents, doing the job they
   already do everywhere else. */
.pn-line{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r2);
         border:1px solid var(--line);background:var(--panel-2);font-size:13px;color:var(--dim)}
.pn-line .b{width:6px;height:6px;border-radius:50%;flex:none}
.pn-line.free{border-color:var(--warn-line)}
.pn-line.free .b{background:var(--warn)}
.pn-line.pro{border-color:var(--acid-line);background:var(--acid-wash)}
.pn-line.pro .b{background:var(--acid)}
.pn-line b{color:var(--text);font-weight:600}
.pn-line .tail{font-family:var(--m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
               color:var(--ghost);white-space:nowrap;flex:none}

/* Inside a panel the label column is narrower than it is on a real screen:
   the panel is half a page wide and a 118px column would leave the values
   nowhere to go. */
.pn .kv{grid-template-columns:92px minmax(0,1fr);gap:7px 12px;font-size:13px}
.pn .chips{gap:5px}
.pn .chip{font-size:11.5px;padding:4px 9px}
/* A store's click count, the one number a chip carries anywhere. */
.pn .chip b{color:var(--acid-soft);font-family:var(--m);font-size:10.5px;font-weight:500;
            font-variant-numeric:tabular-nums;margin-left:5px}
/* The tail of a list that has more in it than there is room for. */
.pn .chip.ghost{border-style:dashed;color:var(--ghost);background:transparent}

/* A panel is an illustration, not a control. Nothing in one may answer a
   hover it cannot honour — a chip that lights up and then does nothing when
   it is clicked is worse than a flat one. Selection is deliberately left
   working rather than killed with `pointer-events`, because the copy inside
   a panel is real text and somebody may want to quote it. */
.pn .chip:hover{border-color:var(--line);color:var(--dim)}
.pn .chip.on:hover{background:var(--acid);border-color:var(--acid);color:#12140B}
.pn .chip.ghost:hover{color:var(--ghost)}
.pn .btn.acid:hover{background:var(--acid);border-color:var(--acid)}
@media(max-width:560px){.pn-top .w{font-size:9px}.pn-top .r{display:none}}

/* ── the ecosystem's public surfaces ─────────────────────────────────
   The agency catalogue, the booking form, the external booking portal and
   the invitation page.

   Written as CLASSES rather than as the style attributes the older public
   pages use, and that is not a preference. The CSP this app sends carries
   `style-src 'self'` with no `unsafe-inline`, and `style-src-attr` falls
   back to `style-src` — so a browser drops a style="" attribute as quietly
   as it drops an inline script. Everything below therefore survives the
   header the server actually sends. See AGENTS.md, "Inline styles and the
   CSP", for the existing pages that do not.
   ──────────────────────────────────────────────────────────────────── */

.pub-wide{max-width:1080px}
.pub-top{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.pub-top .grow{min-width:240px}
.pub-lede{font-size:16px;line-height:1.6;max-width:56ch;color:var(--dim);margin-top:14px}
.pub-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.pub-foot{margin-top:64px;padding-top:22px;border-top:1px solid var(--line);
          display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pub-foot .wordmark{font-size:15px}

/* The filter bar over a roster. One row on a laptop, wraps on a phone. */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.filters .inp{width:auto;min-width:150px;flex:1 1 150px;max-width:260px}
.chipset{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;color:var(--faint);
      border:1px solid var(--line-2);background:transparent;transition:color .13s,border-color .13s}
.chip:hover{color:var(--text);border-color:var(--ghost)}
.chip.on{background:var(--acid-wash);border-color:var(--acid-line);color:var(--acid-soft)}

/* The roster grid. Cards stay legible down to a phone by dropping to one
   column rather than by shrinking the type. */
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px}
.rcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
       border-radius:var(--r);overflow:hidden;transition:border-color .13s;text-align:left}
.rcard:hover{border-color:var(--acid-line)}
.rcard .top{height:104px;position:relative;
            background:linear-gradient(140deg,var(--acid-deep),#1C2209 55%,#0D0D10)}
.rcard .top .flag{position:absolute;top:9px;right:9px}
.rcard .bd{padding:14px 15px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.rcard .nm{font-family:var(--d);font-weight:800;font-size:18px;letter-spacing:-.02em;line-height:1.1}
.rcard .sub{color:var(--dim);font-size:12.5px;line-height:1.5}
.rcard .tags{display:flex;gap:5px;flex-wrap:wrap}
.rcard .price{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);
              display:flex;align-items:center;gap:8px}
.rcard .price .n{font-family:var(--m);font-size:13px;color:var(--acid-soft)}

/* A form a stranger fills in. Two columns where there is room, one where
   there is not, and the wide fields say so rather than guessing. */
.pubform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pubform .wide{grid-column:1/-1}
@media(max-width:640px){.pubform{grid-template-columns:minmax(0,1fr)}}
.formnote{font-size:12.5px;color:var(--faint);line-height:1.5}
.formerr{border-left:2px solid var(--hot);background:var(--hot-wash);padding:10px 13px;
         border-radius:var(--r2);font-size:13px;color:var(--text)}
.formok{border-left:2px solid var(--ok);background:var(--ok-wash);padding:14px 16px;
        border-radius:var(--r2);font-size:14px;line-height:1.55}

/* ── the booking portal ──────────────────────────────────────────── */
/* A booker opens this from an email, usually on a phone. One column, big
   targets, and nothing that needs a second screen to make sense. */
.portal{max-width:760px;margin:0 auto;padding:34px 20px 90px}
.portal-hd{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:26px}
.portal-hd .grow{min-width:200px}
.portal-when{font-family:var(--m);font-size:12px;color:var(--acid-soft);letter-spacing:.04em}
.portal-title{font-family:var(--d);font-weight:900;font-size:clamp(26px,5vw,38px);
              letter-spacing:-.035em;line-height:1.05;margin-top:6px}
.psec{margin-bottom:26px}
.psec > .eyebrow{margin-bottom:10px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:13.5px}
.kv dt{color:var(--faint);font-family:var(--m);font-size:11px;letter-spacing:.1em;
       text-transform:uppercase;padding-top:2px}
.kv dd{margin:0}
.total{display:flex;align-items:baseline;gap:10px;padding:16px 0;border-top:1px solid var(--line);
       border-bottom:1px solid var(--line);margin:14px 0}
.total .n{font-family:var(--d);font-weight:900;font-size:30px;letter-spacing:-.03em}
.qrow{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);
      flex-wrap:wrap}
.qrow .lbl{flex:0 0 190px;min-width:150px}
.qrow .lbl b{font-size:13.5px;font-weight:600;display:block}
.qrow .lbl .why{color:var(--faint);font-size:11.5px;line-height:1.45;margin-top:3px}
.qrow .val{flex:1;min-width:190px}
@media(max-width:560px){.qrow .lbl{flex:1 1 100%}}
.riderline{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);
           font-size:13.5px}
.riderline .q{font-family:var(--m);color:var(--acid-soft);flex:none;width:34px}
.riderline .sub{color:var(--faint);font-size:12px}
.doclist{display:grid;gap:8px}
.doc{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);
     border-radius:var(--r);background:var(--panel);transition:border-color .13s}
.doc:hover{border-color:var(--acid-line)}
.doc .sz{margin-left:auto;font-family:var(--m);font-size:11.5px;color:var(--faint)}
.stateline{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:8px}
.saveflag{font-family:var(--m);font-size:11px;color:var(--ok);opacity:0;transition:opacity .2s}
.saveflag.on{opacity:1}

/* Loading, empty, gone. Written once so no screen invents its own. */
.state-msg{text-align:center;padding:80px 20px}
.state-msg h1{font-size:26px;text-transform:uppercase;margin-top:22px}
.state-msg p{color:var(--dim);margin-top:12px;line-height:1.6;max-width:44ch;
             margin-left:auto;margin-right:auto}
.skeleton{height:14px;border-radius:3px;background:var(--panel-2);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:.8}}

/* ── A face, wherever one is shown ───────────────────────────────────── */

/* The avatar has drawn initials since the first screen; it now draws a
   photograph where somebody has uploaded one. Same box and the same four
   sizes, so a roster where half the artists have a picture still lines up
   with one where none of them do. */
.av{overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover;display:block}

/* The photo on a roster card. `.rcard .top` has been a gradient placeholder
   since the public catalogue was written, sized and positioned already — the
   image fills it, so a card with a photo and a card without are the same
   shape and the grid does not reflow as photos arrive. */
.rcard .top img{width:100%;height:100%;object-fit:cover;display:block}
.rcard .top .ini{position:absolute;inset:0;display:grid;place-items:center;
                 font-family:var(--d);font-weight:800;font-size:30px;
                 letter-spacing:-.02em;color:var(--acid-soft);opacity:.45}
.rcard .top .flags{position:absolute;top:9px;right:9px;display:flex;gap:5px}

/* Four across, which is what a roster of faces is for — scanning. `auto-fill`
   is right for the public catalogue, where the roster length is unknown and
   the viewport is a stranger's; here the agency asked for four and the steps
   down are by breakpoint rather than by stretching four cards across a
   2000px screen. */
.roster.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1180px){.roster.four{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.roster.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.roster.four{grid-template-columns:minmax(0,1fr)}}

/* Choosing a photo. The control sits beside the face rather than under it, so
   the thing being changed and the button that changes it read as one object. */
.facepick{display:flex;gap:14px;align-items:flex-start}
.facepick .grow{display:flex;flex-direction:column;gap:8px}

/* ── the agency calendar ────────────────────────────────────────────────
   The roster against time: three of the four grains are a grid of artists by
   days, and the fourth is the month grid the artist's calendar already draws.

   **The absence colours are the important half of this block.** Availability
   has four different absences — nobody answered, nobody shared, we are past
   the thirty-day floor, and there is no artist at all — and every one of them
   used to be "no row in a list". A cell has to draw them, and it must never
   draw any of them the way it draws a yes: an empty green square is how an
   agency confirms a date the artist cannot play. So `free` is the only
   colour-filled state, and the absences are texture, not hue. */

.rgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
       border-radius:var(--r2);overflow:auto;max-width:100%}
.rgrid .h,.rgrid .c,.rgrid .nm{background:var(--panel);min-height:38px;padding:6px 8px}
.rgrid .h{background:var(--ink-2);font-family:var(--m);font-size:9.5px;letter-spacing:.11em;
          text-transform:uppercase;color:var(--faint);text-align:center;line-height:1.35}
.rgrid .h.today{color:var(--acid-soft)}
/* The artist column stays put, because a roster of twenty scrolled sideways
   through a quarter is otherwise a grid of numbers belonging to nobody. */
.rgrid .nm{position:sticky;left:0;z-index:2;font-size:12px;font-weight:600;color:var(--text);
           display:flex;align-items:center;white-space:nowrap;overflow:hidden;
           text-overflow:ellipsis;box-shadow:1px 0 0 var(--line)}
.rgrid .nm.off{color:var(--faint);font-weight:500;font-style:italic}
.rgrid .h.nm{background:var(--ink-2);z-index:3}
.rgrid .c{display:flex;flex-direction:column;gap:3px;justify-content:center}
.rgrid .c .q{font-family:var(--m);font-size:10px;color:var(--ghost);text-align:center}

/* One vocabulary of cell states, shared by the week grid and the day list, so
   the two grains cannot teach different colours for the same fact. */
.rgrid .c.free{background:var(--ok-wash)}
.rgrid .c.soft{background:var(--warn-wash)}
.rgrid .c.blocked{background:var(--hot-wash)}
.rgrid .c.unknown{background-image:repeating-linear-gradient(135deg,transparent 0 5px,
                  rgba(112,112,122,.10) 5px 6px)}
.rgrid .c.unshown{background:var(--ink-2);
                  background-image:repeating-linear-gradient(135deg,transparent 0 3px,
                  rgba(112,112,122,.16) 3px 4px)}
.rgrid .c.unshared,.rgrid .c.unclaimed{background:var(--ink-2)}
.rgrid .c.none{background:var(--ink-2);opacity:.6}

/* A booking chip. Not `.cal .ev` — that one is draggable and this one is not,
   and inheriting its grab cursor would promise a verb this screen refuses. */
.agev{display:block;width:100%;text-align:left;font-size:10px;font-weight:600;line-height:1.2;
      color:var(--text);background:var(--raise);border-left:2px solid var(--warn);
      border-radius:2px;padding:3px 5px;overflow:hidden;text-overflow:ellipsis;
      white-space:nowrap;cursor:pointer}
.agev:hover{background:#2C2C34}
.agev.conf{border-left-color:var(--ok)}
.agev.offer{border-left-color:var(--cool)}
.agev.dead{border-left-color:var(--ghost);opacity:.55;text-decoration:line-through}

/* The month cell's composition bar: one segment per state, sized by how many
   artists are in it. A strip of one sliver per artist stops being readable at
   about eight; a bar of proportions never does. */
.cal.agcal .dy{min-height:92px}
.avbar{margin-top:auto;display:flex;gap:1px;height:4px;border-radius:2px;overflow:hidden}
.avbar i{display:block;background:var(--raise)}
.avbar i.free{background:var(--ok)} .avbar i.soft{background:var(--warn)}
.avbar i.blocked{background:var(--hot)} .avbar i.unknown{background:var(--ghost);opacity:.5}
.avbar i.unshared{background:var(--line-2)} .avbar i.unshown{background:var(--line-2);opacity:.6}
.cal.agcal .dn.unknown,.cal.agcal .dn.unshared,.cal.agcal .dn.unshown{margin-top:auto;
      color:var(--ghost);font-size:9px}
.cal.agcal .dn.free{margin-top:auto;color:var(--ok)}
.cal.agcal .dn.soft{margin-top:auto;color:var(--warn)}
.cal.agcal .dn.blocked{margin-top:auto;color:var(--hot)}

/* One date, the whole roster, grouped by what is known about it. */
.daylist{display:flex;flex-direction:column}
.daylist .dayrow{display:flex;gap:12px;align-items:center;padding:10px 14px;
                 border-bottom:1px solid var(--line);border-left:2px solid transparent}
.daylist .dayrow:last-child{border-bottom:0}
.daylist .dayrow.free{border-left-color:var(--ok)}
.daylist .dayrow.soft{border-left-color:var(--warn)}
.daylist .dayrow.blocked{border-left-color:var(--hot)}
.daylist .dayrow.unknown{border-left-color:var(--ghost)}
.daylist .dayrow.unshared,.daylist .dayrow.unshown,
.daylist .dayrow.unclaimed{border-left-color:var(--line-2)}
.daylist .nm{font-size:13px;font-weight:600;min-width:170px}
.daylist .st{font-family:var(--m);font-size:10.5px;color:var(--dim);flex:1;
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Thirteen weeks of how busy somebody is. Counts, so a blank cell is an open
   week rather than an unanswered one — which is why this grain uses the acid
   scale and not the availability colours. */
.qheat{display:grid;gap:2px;overflow:auto;max-width:100%;padding-bottom:4px}
.qheat .nm{position:sticky;left:0;z-index:2;background:var(--ink);font-size:12px;
           font-weight:600;display:flex;align-items:center;white-space:nowrap;
           padding-right:10px;overflow:hidden;text-overflow:ellipsis}
.qheat .nm.off{color:var(--faint);font-weight:500;font-style:italic}
.qheat .h{font-family:var(--m);font-size:8.5px;letter-spacing:.04em;color:var(--ghost);
          text-align:center;padding-bottom:2px;white-space:nowrap}
.qheat .k{height:24px;border-radius:2px;background:var(--panel-2);display:grid;
          place-items:center;font-family:var(--m);font-size:9.5px;color:var(--ghost)}
.qheat .k.n1{background:rgba(207,226,85,.17);color:var(--acid-soft)}
.qheat .k.n2{background:rgba(207,226,85,.36);color:#DCE98A}
.qheat .k.n3{background:rgba(207,226,85,.64);color:var(--ink)}
.qheat .k.away{background:var(--hot-wash);color:var(--hot)}

.legend.agleg{margin-top:14px;font-size:11px}
.legend.agleg .sw.free{background:var(--ok)} .legend.agleg .sw.soft{background:var(--warn)}
.legend.agleg .sw.blocked{background:var(--hot)}
.legend.agleg .sw.unknown{background:var(--ghost);opacity:.5}
.legend.agleg .sw.unshared,.legend.agleg .sw.unshown{background:var(--line-2)}
.legend.agleg .sw.n1{background:rgba(207,226,85,.17)}
.legend.agleg .sw.n2{background:rgba(207,226,85,.36)}
.legend.agleg .sw.n3{background:rgba(207,226,85,.64)}
.legend.agleg .sw.away{background:var(--hot-wash)}

/* ── Communication Hub ───────────────────────────────────────────────
   Written as classes rather than inline attributes, deliberately. The CSP
   relaxation of 1 September was scoped to `style-src-attr` and is not a
   licence to keep adding to the debt it uncovered — everything that arrived
   with the agency work is classes, and so is this.
   ─────────────────────────────────────────────────────────────────── */

.comm-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:13px;width:100%;
          padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;
          background:none;transition:background .12s}
.comm-row:last-child{border-bottom:0}
.comm-row:hover{background:var(--panel-2)}
/* Unread is a wash from the leading edge rather than a bold row: the list is
   read left to right, and the thing that has to be noticed is the person. */
.comm-row.unread{background:linear-gradient(90deg,var(--acid-wash),transparent 32%)}
.comm-row.unread .comm-who{color:var(--text)}
.comm-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
         font-family:var(--d);font-weight:800;font-size:12.5px;color:#12140B;
         background:var(--acid-deep);flex:none}
.comm-who{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
          color:var(--dim);flex-wrap:wrap}
.comm-who .dot{width:6px;height:6px;border-radius:50%;background:var(--acid);flex:none}
.comm-snip{display:block;font-size:12.8px;color:var(--dim);margin-top:4px}
.comm-ctx{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.comm-ctx:empty{display:none}
.comm-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.comm-when{font-size:10.5px;color:var(--faint)}

.comm-msg{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;max-width:82%}
.comm-msg:last-child{margin-bottom:0}
.comm-msg.mine{margin-left:auto;align-items:flex-end}
.comm-bub{border:1px solid var(--line);background:var(--panel-2);border-radius:8px;
          border-bottom-left-radius:2px;padding:12px 14px}
.comm-msg.mine .comm-bub{background:var(--acid-wash);border-color:var(--acid-line);
          border-bottom-left-radius:8px;border-bottom-right-radius:2px}
.comm-from{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--faint);
           margin-bottom:7px;flex-wrap:wrap}
.comm-subject{font-size:13.5px;font-weight:600;margin-bottom:6px}
.comm-body{font-size:13.4px;line-height:1.62;color:#DCDCD8;white-space:pre-wrap;word-break:break-word}
.comm-sys{align-self:center;margin:0 auto 16px;font-family:var(--m);font-size:10.5px;
          color:var(--faint);border:1px solid var(--line);border-radius:999px;
          padding:4px 13px;background:var(--ink-2);width:fit-content}

/* A card carries what was ASKED and never the answer — the answer is a row in
   the availability table, so this re-renders from the domain rather than from
   a value frozen into the message. */
.comm-card{border:1px solid var(--line-2);border-radius:7px;background:var(--ink-2);
           overflow:hidden;max-width:340px}
.cc-head{padding:8px 13px;background:var(--panel-2);border-bottom:1px solid var(--line);
         font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
         color:var(--acid-soft)}
.cc-body{padding:13px}
.cc-big{font-family:var(--d);font-weight:800;font-size:16px;letter-spacing:-.02em}
.cc-sub{font-size:12.2px;color:var(--dim);margin-top:3px}
.cc-note{font-size:12.5px;color:var(--dim);margin-top:8px;line-height:1.55}
.cc-foot{display:flex;gap:6px;padding:0 13px 13px;flex-wrap:wrap}
.cc-foot .btn{flex:1;min-width:88px}

.comm-as{display:flex;align-items:center;gap:9px;padding:10px 14px;font-size:12.2px;
         background:var(--ink-2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.comm-input{width:100%;border:0;background:transparent;padding:13px 14px;resize:vertical;
            min-height:86px;font-size:13.4px;line-height:1.6;outline:none;display:block;
            color:var(--text);font-family:var(--u)}
.comm-foot{display:flex;align-items:center;gap:8px;padding:11px 14px;
           border-top:1px solid var(--line);flex-wrap:wrap}

@media (max-width:720px){
  .comm-row{grid-template-columns:32px minmax(0,1fr)}
  .comm-meta{grid-column:2;flex-direction:row;align-items:center;gap:10px}
  .comm-msg{max-width:100%}
}

/* ── the Demo Inbox ───────────────────────────────────────────────────
   A review queue, not a mailbox. The row carries enough to decide without
   opening anything, the rail carries the context so nothing needs to
   expand, and the focus ring is loud on purpose — at speed the eye tracks
   the ring, not the text.

   One colour of its own: --alien, for music that belongs to somebody
   else. Acid means TheJay, amber means Starting Up, and there was nothing
   that meant "a stranger's unreleased record".
   ──────────────────────────────────────────────────────────────────── */
:root{ --alien:#A98BD8; --alien-wash:rgba(169,139,216,.10); --alien-line:rgba(169,139,216,.30); }
.pill.alien{background:var(--alien-wash);color:var(--alien);border-color:var(--alien-line)}

.dsess{display:inline-flex;align-items:center;gap:14px;height:28px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r2);background:var(--ink-2);
  font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.dsess-g{color:var(--acid-soft)}

.dtabs{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--line);
  margin-bottom:0;overflow-x:auto}
.dtab{padding:9px 13px;font-size:12.5px;color:var(--faint);border-bottom:2px solid transparent;
  display:flex;gap:7px;align-items:center;white-space:nowrap}
.dtab:hover{color:var(--dim)}
.dtab.on{color:var(--text);border-bottom-color:var(--acid)}
.dtab .c{font-family:var(--m);font-size:10px;padding:1px 6px;border-radius:999px;
  background:var(--raise);color:var(--dim)}
.dtab.on .c{background:var(--acid-wash);color:var(--acid-soft)}
.dfilters{margin-left:auto;display:flex;gap:7px;align-items:center;padding:5px 0}
.inp.sm{height:27px;font-size:12px;padding:0 9px}
select.inp.sm{background-position:calc(100% - 14px) 12px,calc(100% - 9px) 12px}

.dbody{display:grid;grid-template-columns:minmax(0,1fr) 336px;
  min-height:0;height:calc(100vh - 268px)}
.dlist{overflow-y:auto;min-height:0}
.drail{border-left:1px solid var(--line);background:var(--ink-2);overflow-y:auto;min-height:0}

.drow{display:flex;align-items:center;gap:13px;padding:0 16px;height:72px;
  border-bottom:1px solid var(--line);cursor:pointer;position:relative;
  transition:background .1s;outline:none}
.drow:hover{background:var(--panel)}
.drow.cur{background:var(--panel-2)}
.drow.cur::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acid)}
.drow.playing::before{box-shadow:0 0 14px var(--acid-line)}
.drow.gone{opacity:.34}
.drow.gone .dttl{text-decoration:line-through;text-decoration-color:var(--ghost)}

.dplay{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid var(--line-2);color:var(--dim);transition:border-color .12s,color .12s,background .12s}
.drow.cur .dplay{border-color:var(--acid-line);color:var(--acid-soft)}
.drow.playing .dplay{background:var(--acid);border-color:var(--acid);color:#12140B}
.dplay:hover{border-color:var(--acid);color:var(--acid)}
.dplay.dead{border-style:dashed;color:var(--ghost)}
.dplay.dead:hover{border-color:var(--line-2);color:var(--faint)}

.dart{width:42px;height:42px;border-radius:var(--r2);flex:none;position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.dmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.drow-1{display:flex;align-items:baseline;gap:9px;min-width:0}
.dttl{font-family:var(--d);font-weight:800;font-size:14.5px;letter-spacing:-.01em;
  text-transform:uppercase;font-stretch:104%;color:var(--text)}
.drow-2{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--faint);min-width:0}
.drow-2 b{color:var(--dim);font-weight:500}
.dsep{color:var(--ghost)}

.dwrap{width:180px;flex:none;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.dwave{display:flex;align-items:center;gap:1.5px;height:26px;width:100%}
.dwave i{flex:1;background:var(--line-2);border-radius:1px;min-height:2px;transition:background .08s}
.dwave i.on{background:var(--acid-deep)}
.drow.playing .dwave i.on{background:var(--acid)}
.dwave.dead i{background:#232329}
.dtm{font-family:var(--m);font-size:10px;color:var(--ghost);font-variant-numeric:tabular-nums}
.dright{width:112px;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}

.dgroup{display:flex;align-items:center;gap:11px;padding:14px 16px 9px;
  border-bottom:1px solid var(--line);background:var(--ink);position:sticky;top:0;z-index:2}
.dgroup h3{font-size:11px;font-family:var(--m);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.dgroup .ln{flex:1;height:1px;background:var(--line)}
.dgroup-act{font-family:var(--m);font-size:10.5px;color:var(--acid-soft);
  border:1px solid var(--acid-line);border-radius:var(--r2);padding:3px 9px}
.dgroup-act:hover{background:var(--acid-wash)}
.dempty{padding:70px 30px;text-align:center;color:var(--faint)}
.dempty h3{font-size:20px;color:var(--dim);margin-bottom:9px}
.dempty p{font-size:13.5px;max-width:40ch;margin:0 auto}

.drail-s{padding:16px 17px;border-bottom:1px solid var(--line)}
.drail-s h4{margin:0 0 10px;font-family:var(--m);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ghost);font-weight:500}
.dkv{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:4px 0}
.dkv .k{color:var(--ghost);font-family:var(--m);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;padding-top:2px;flex:none}
.dkv .v{color:var(--dim);text-align:right;min-width:0;overflow-wrap:anywhere}
.dmsg{font-size:13px;color:var(--dim);font-style:italic;line-height:1.6;
  border-left:2px solid var(--line-2);padding-left:12px;overflow-wrap:anywhere}
.ditm{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.ditm:last-child{border-bottom:0}
.ditm .n{font-family:var(--m);font-size:10px;color:var(--ghost);width:14px;flex:none}
.dstar{color:var(--ghost);font-size:13px;line-height:1}
.dstar.on,.dstar:hover{color:var(--acid)}
.dwarn{background:var(--warn-wash);border:1px solid var(--warn-line);border-radius:var(--r2);
  padding:9px 11px;font-size:12px;color:var(--warn);line-height:1.45}
.dlink{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);
  padding:9px 11px;font-size:12px;color:var(--dim);margin-top:9px;overflow-wrap:anywhere}
.dlink:hover{border-color:var(--acid-line);color:var(--acid-soft)}

.dqr{display:flex;flex-direction:column;gap:5px}
.dqrb{display:flex;gap:9px;align-items:flex-start;text-align:left;padding:8px 10px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);font-size:12.5px;
  color:var(--dim);line-height:1.42}
.dqrb:hover{border-color:var(--acid-line);color:var(--text);background:var(--panel-2)}
.dqrb kbd{font-family:var(--m);font-size:10px;font-weight:700;width:17px;height:17px;flex:none;
  display:grid;place-items:center;background:var(--raise);border:1px solid var(--line-2);
  border-radius:2px;color:var(--faint);margin-top:1px}
.dchan{display:flex;gap:7px;align-items:center;font-size:11.5px;color:var(--faint);
  font-family:var(--m);margin-top:9px}

/* Sticky, because the verdicts live in it now and a thumb should find them
   wherever the list has scrolled to. */
.dfoot{display:flex;align-items:center;gap:5px;padding:8px 0 6px;border-top:1px solid var(--line);
  overflow-x:auto;position:sticky;bottom:0;background:var(--ink);z-index:3}
.dhint{display:flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;border-radius:var(--r2);
  white-space:nowrap;font-size:11.5px;color:var(--faint);background:none;border:0;font-family:inherit;line-height:inherit}
button.dhint{cursor:pointer}
button.dhint:hover{background:var(--panel);color:var(--text)}
button.dhint:focus-visible{outline:2px solid var(--acid);outline-offset:1px}
.dhint kbd{font-family:var(--m);font-size:10.5px;font-weight:700;min-width:20px;height:20px;padding:0 5px;
  display:grid;place-items:center;background:var(--raise);border:1px solid var(--line-2);
  border-bottom-width:2px;border-radius:3px;color:var(--dim)}
.dhint.k1 kbd{border-color:var(--hot-line,rgba(222,114,102,.3));color:var(--hot)}
.dhint.k2 kbd{border-color:var(--warn-line,rgba(216,160,90,.3));color:var(--warn)}
.dhint.k3 kbd{border-color:var(--ok-line,rgba(95,191,147,.3));color:var(--ok)}
.dhint.k4 kbd{border-color:var(--acid-line);color:var(--acid-soft)}

.dsheet{position:fixed;inset:0;z-index:70;background:rgba(6,6,9,.72);display:none;
  align-items:center;justify-content:center;padding:24px}
.dsheet.open{display:flex}
.dsheet-card{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);
  width:min(620px,100%);max-height:82vh;overflow-y:auto;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.dsheet-hd{padding:15px 19px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.dsheet-hd h3{font-size:16px}
.dsheet-x{margin-left:auto;color:var(--faint);font-family:var(--m);font-size:11px}
.dsheet-bd{padding:17px 19px}
.dkeys{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:7px}
.dkey{display:flex;gap:10px;align-items:center;padding:7px 10px;background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r2)}
.dkey kbd{font-family:var(--m);font-size:11px;font-weight:700;min-width:22px;height:22px;padding:0 6px;
  display:grid;place-items:center;background:var(--raise);border:1px solid var(--line-2);
  border-bottom-width:2px;border-radius:3px;color:var(--text);flex:none}
.dkey span{font-size:12.5px;color:var(--dim)}

/* Narrow: the rail stacks under the list rather than vanishing. It carries
   the message, the tracks, who sent it and the verdict buttons — on a tablet
   held upright that was everything about the focused demo, gone. */
@media(max-width:1080px){ .dbody{grid-template-columns:1fr;height:auto}
  .drail{border-left:0;border-top:1px solid var(--line);max-height:50vh} }

/* ═══════════════════════════════════════════════════════════════════
   MUSIC — the catalogue, the sleeve and the campaign

   The unit of an artist's catalogue is a square. This product drew
   26px, 30px, 32px and 34px gradient chips beside text rows, and the
   one column that could have held a real sleeve — tracks.artwork_asset_id,
   there since migration 001 — was read by nothing.
   ═══════════════════════════════════════════════════════════════════ */

/* A real sleeve, where one has been uploaded. The diagonal sheen on .art
   is right over a flat gradient and wrong over a photograph, so it comes
   off — the image has its own texture and does not need ours. */
.art.has{background:var(--ink-2)}
.art.has img{width:100%;height:100%;object-fit:cover;display:block}
.art.has::after{background:radial-gradient(ellipse at 30% 18%,transparent 52%,rgba(0,0,0,.28) 100%)}

/* ── the artwork grid ───────────────────────────────────────────── */
.cat{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
@media(max-width:1320px){.cat{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1080px){.cat{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(max-width:640px){.cat{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

.tile{display:block;width:100%;text-align:left;cursor:pointer}
.tile .sq{position:relative;margin-bottom:9px;border-radius:var(--r2);
          transition:transform .16s ease,box-shadow .16s ease}
.tile:hover .sq,.tile:focus-visible .sq{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.tile .sq .art{border-radius:var(--r2)}
/* An idea with no sleeve is not a record yet, and the edge says so. It
   reads as deliberate rather than as a picture that failed to load. */
.tile .sq.none .art{outline:1px dashed var(--line-2);outline-offset:-1px}
.tile .nm{display:block;font-weight:600;font-size:13.5px;line-height:1.3;
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .sub{display:block;font-family:var(--m);font-size:10.5px;color:var(--faint);
           margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile.out .sub{color:var(--ghost)}

/* Three marks, and only three. A percentage bar across artwork is a
   project tool announcing itself; the stage is already the band heading. */
.tile .datechip{position:absolute;left:8px;bottom:8px;z-index:2;
  background:rgba(9,9,12,.82);border:1px solid var(--acid-line);color:var(--acid);
  font-family:var(--m);font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:3px 7px;border-radius:2px;backdrop-filter:blur(3px)}
.tile .needs{position:absolute;right:8px;top:8px;z-index:2;width:9px;height:9px;
  border-radius:50%;background:var(--acid);box-shadow:0 0 0 3px rgba(9,9,12,.82)}
.tile .needs.late{background:var(--hot)}

.band{margin-bottom:36px}
.band:last-child{margin-bottom:0}
.band-h{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.band-h .t{font-family:var(--d);font-weight:800;font-size:15px;letter-spacing:-.015em}
.band-h .c{font-family:var(--m);font-size:11px;color:var(--ghost)}
.band-h .ln{flex:1;height:1px;background:var(--line);min-width:16px}

/* The kanban lane's one-line reminder of what the lane means. */
.col-h .hint{font-family:var(--m);font-size:9.5px;color:var(--ghost);letter-spacing:.06em;
             width:100%;margin-top:-4px;padding-bottom:2px}
.col-h{flex-wrap:wrap}

/* ── track detail ───────────────────────────────────────────────── */
.thero{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start;
       margin-bottom:30px}
@media(max-width:760px){.thero{grid-template-columns:minmax(0,1fr);gap:18px}
  .thero .tart{max-width:220px}}
.thero .tart .art{border-radius:var(--r)}
.thero h1{font-size:clamp(30px,5vw,52px);line-height:.94;margin-top:9px}
.thero .credit{font-size:15px;margin-top:12px;color:var(--dim)}
.thero .credit b{color:var(--text);font-weight:600}
.thero .imprint{font-family:var(--m);font-size:11.5px;color:var(--faint);margin-top:5px}
.thero .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.thero .specs{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line);font-family:var(--m);font-size:11.5px;color:var(--faint)}
.thero .specs i{color:var(--ghost);font-style:normal}
.btn.lg{height:40px;padding:0 18px;font-size:14px}

/* ── the campaign, as four buckets rather than six open phases ──── */
.buckets{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.bk{border-bottom:1px solid var(--line)}
.bk:last-child{border-bottom:0}
.bk-h{display:flex;align-items:center;gap:11px;width:100%;padding:12px 16px;text-align:left}
.bk-h:hover{background:var(--panel-2)}
.bk-h .tw{font-family:var(--m);font-size:10px;color:var(--ghost);width:11px;text-align:center;flex:none}
.bk-h .lb{font-family:var(--d);font-weight:800;font-size:13.5px;letter-spacing:-.01em}
.bk-h .n{font-family:var(--m);font-size:11px;color:var(--ghost);margin-left:auto}
.bk.late .bk-h .lb,.bk.late .bk-h .dot{color:var(--hot)}
.bk.due .bk-h .lb{color:var(--acid-soft)} .bk.due .bk-h .dot{color:var(--acid)}
.bk.soon .bk-h .lb{color:var(--dim)} .bk.soon .bk-h .dot{color:var(--ghost)}
.bk.shut .bk-h .lb,.bk.shut .bk-h .dot{color:var(--ok)}
.bk-b{padding:0 16px 12px;display:flex;flex-direction:column}
.tk{display:flex;align-items:center;gap:11px;padding:8px 0;text-align:left;width:100%;
    border-top:1px solid var(--line)}
.tk .bx{width:15px;height:15px;border-radius:3px;border:1px solid var(--line-2);flex:none;
        display:grid;place-items:center;font-size:9px;color:transparent;transition:background .12s}
.tk:hover .bx{border-color:var(--acid-line)}
.tk[aria-checked="true"] .bx{background:var(--acid);border-color:var(--acid);color:#12140B}
.tk .lb{font-size:13.5px;color:var(--dim);line-height:1.35;text-align:left}
.tk[aria-checked="true"] .lb{color:var(--ghost);text-decoration:line-through}
.tk .when{font-family:var(--m);font-size:10.5px;color:var(--ghost);margin-left:auto;
          white-space:nowrap;padding-left:10px}
.tk .when.late{color:var(--hot)} .tk .when.soon{color:var(--acid-soft)}
.tk .ph{font-family:var(--m);font-size:9.5px;color:var(--ghost);letter-spacing:.09em;
        text-transform:uppercase;margin-left:auto;white-space:nowrap;padding-left:10px}
.prog{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--panel-2);
      border-top:1px solid var(--line)}
.prog .t{font-family:var(--m);font-size:11px;color:var(--faint);white-space:nowrap}

/* ── a content row on the track page ────────────────────────────── */
.trow{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;text-align:left;
      border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.trow:hover{background:var(--panel-2)}
.trow .dt{font-family:var(--m);font-size:11px;color:var(--faint);width:56px;flex:none}
.trow .nm{display:block;font-size:13.5px;font-weight:500;line-height:1.3}
.trow .ch{display:block;font-family:var(--m);font-size:10px;color:var(--ghost);margin-top:2px}

/* ── the release link, and where its clicks went ────────────────── */
.linkbox{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--ink-2);
         border:1px solid var(--line);border-radius:var(--r2);flex-wrap:wrap}
.linkbox .u{font-family:var(--m);font-size:12px;color:var(--acid-soft);flex:1;min-width:170px;
            overflow-wrap:anywhere}
.store{margin-bottom:11px}
.store:last-child{margin-bottom:0}
.store .r1{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}
.store .nm{font-weight:600;font-size:13px}
.store .sh{font-family:var(--m);font-size:11px;color:var(--faint);margin-left:auto}
.store .n{font-family:var(--m);font-size:12.5px;color:var(--dim);min-width:44px;text-align:right}
.store.top .n{color:var(--acid-soft)}

/* A campaign task on the calendar. Quieter than a post on purpose: a task is
   a thing you do, a content item is a thing you make and then publish — and
   only one of the two has an asset, a caption and a publish state. Same
   calendar, two weights, no second row type pretending to be a post. */
.cal .tsk{display:flex;align-items:center;gap:6px;width:100%;text-align:left;
  font-size:10.5px;padding:2px 5px;border-radius:2px;color:var(--faint);
  border-left:2px solid var(--line-2);background:transparent}
.cal .tsk:hover{background:var(--raise);color:var(--text)}
.cal .tsk .bx{width:8px;height:8px;border-radius:2px;border:1px solid var(--line-2);flex:none}
.cal .tsk .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.cal .tsk.late{border-left-color:var(--hot);color:var(--hot)}
.cal .tsk.late .bx{border-color:var(--hot)}

/* ── the agency on a phone, since 3 September 2026 ──────────────────────
   The board was a horizontal-scroll flex of 274px columns and the roster grid
   150px plus seven 72px cells, with no rule for either below a laptop — the
   two screens an agent needs at a venue at midnight were the two that did not
   fit. Under 720px the board stacks its lanes into a list grouped by stage,
   the row grids scroll inside their own frame, and the head actions wrap. */
@media (max-width:720px){
  .board{flex-direction:column;overflow-x:visible;scroll-snap-type:none}
  .col{width:auto;flex:none}
  .col-b{min-height:0}
  .kc{cursor:default}
  .page-head{flex-wrap:wrap;gap:12px}
  .page-head .head-acts{width:100%;display:flex;flex-wrap:wrap;gap:8px}
  .tcard .bd{flex-wrap:wrap;gap:8px 12px}
  .tcard .acts{width:100%;display:flex;gap:6px;flex-wrap:wrap}
  .rgrid,.qheat{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
  .rgrid .nm,.qheat .nm{position:sticky;left:0;z-index:1}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seg{flex-wrap:wrap}
  .daylist .dayrow{flex-wrap:wrap}
}
/* A roster row being dragged into a new order. */
tr[data-rid].drag{opacity:.4}
tr[data-rid][draggable="true"]{cursor:grab}