/* Layout: a setup header over a scrolling ledger of immutable rows. */
:root{
  --bg:#EDF0F3; --surface:#FFFFFF; --surface-2:#F6F8FA; --surface-3:#E4E9EE;
  --line:#D3DBE2; --line-strong:#B6C2CD;
  --ink:#141C26; --ink-2:#596876; --ink-3:#8795A3;
  --accent:#0B6A6A; --accent-ink:#FFFFFF; --accent-soft:#DCEDED; --accent-line:#9BC9C9;
  --warn:#8F5100; --warn-soft:#FBEEDA; --warn-line:#E6CFA4;
  --danger:#9E2B2B; --danger-soft:#F8E4E3;
  --font-ui:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:6px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0D1219; --surface:#151D25; --surface-2:#1B242E; --surface-3:#232E39;
  --line:#2A3540; --line-strong:#3A4753;
  --ink:#E7EDF3; --ink-2:#8E9DAC; --ink-3:#6B7986;
  --accent:#43B2B2; --accent-ink:#06211F; --accent-soft:#102E2D; --accent-line:#1E4D4C;
  --warn:#DFA55C; --warn-soft:#2C2317; --warn-line:#4A3A1F;
  --danger:#E0786F; --danger-soft:#30201F;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0D1219; --surface:#151D25; --surface-2:#1B242E; --surface-3:#232E39;
  --line:#2A3540; --line-strong:#3A4753;
  --ink:#E7EDF3; --ink-2:#8E9DAC; --ink-3:#6B7986;
  --accent:#43B2B2; --accent-ink:#06211F; --accent-soft:#102E2D; --accent-line:#1E4D4C;
  --warn:#DFA55C; --warn-soft:#2C2317; --warn-line:#4A3A1F;
  --danger:#E0786F; --danger-soft:#30201F;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:1140px;margin:0 auto;padding-inline:16px;padding-block:22px 60px}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:600;letter-spacing:-0.01em}
p{margin:0}
button{font:inherit;cursor:pointer}
input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.spacer{flex:1 1 auto;min-width:0}

.masthead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;margin-bottom:18px}
.masthead h1{font-size:22px;letter-spacing:-0.02em}
.masthead .sub{color:var(--ink-2);font-size:12.5px;margin-top:2px}
.counts{display:flex;gap:16px;font-size:12px;color:var(--ink-2)}
.counts b{display:block;font-family:var(--font-mono);font-size:17px;font-weight:600;color:var(--ink);line-height:1.2}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.panel+.panel{margin-top:14px}
.panel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.panel-head h2{font-size:13px}
.panel-body{padding:14px}

.setup{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.field .hint{font-size:11.5px;color:var(--ink-3);line-height:1.35}
input[type=text],input[type=date],input[type=search],select{
  width:100%;padding:7px 9px;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:4px;min-width:0}
input:disabled,select:disabled{opacity:.55;cursor:not-allowed}
input.pfx{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;font-weight:500}
.invalid{border-color:var(--danger)!important;background:var(--danger-soft)!important}
.req::after{content:" *";color:var(--danger)}

.anatomy{display:grid;grid-template-columns:repeat(4,minmax(0,auto));justify-content:start;width:max-content;
  border:1px solid var(--accent-line);border-radius:5px;overflow:hidden;max-width:100%}
.anatomy > div{padding:7px 10px;border-right:1px solid var(--accent-line);background:var(--accent-soft);min-width:0}
.anatomy > div:last-child{border-right:0}
.anatomy .seg{font-family:var(--font-mono);font-size:15px;font-weight:600;letter-spacing:.1em;color:var(--ink)}
.anatomy .cap{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);margin-top:1px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border-radius:4px;
  border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink);font-size:13px;font-weight:500;
  white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--surface-3)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn-primary:hover{filter:brightness(1.08)}
.btn-sm{padding:5px 9px;font-size:12px}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-3);color:var(--ink)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.alloc{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:12px 14px;background:var(--surface-2);border-top:1px solid var(--line)}
.next{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;min-width:0}
.next .label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.next .code{font-family:var(--font-mono);font-size:17px;font-weight:600;letter-spacing:.07em;color:var(--accent)}
.next .code.none{color:var(--ink-3);font-size:13px;letter-spacing:0;font-weight:400}

.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.formgrid .wide{grid-column:1/-1}
.formfoot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.err{color:var(--danger);font-size:12.5px;flex:1 1 220px;min-width:0}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:11px 14px;border-bottom:1px solid var(--line)}
.toolbar .grow{flex:1 1 180px;min-width:0}
.seg-ctl{display:inline-flex;border:1px solid var(--line-strong);border-radius:4px;overflow:hidden}
.seg-ctl button{padding:6px 11px;font-size:12px;background:var(--surface-2);border:0;color:var(--ink-2);border-right:1px solid var(--line-strong)}
.seg-ctl button:last-child{border-right:0}
.seg-ctl button[aria-pressed=true]{background:var(--accent-soft);color:var(--ink);font-weight:600}

.lhead,.row{display:grid;gap:12px;align-items:center;
  grid-template-columns:15ch minmax(0,2.3fr) 5.5ch 4.2rem 6.6rem minmax(0,1fr) 2.1rem;padding:9px 14px}
.lhead{border-bottom:1px solid var(--line);background:var(--surface-2);
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.row{border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row:hover{background:var(--surface-2)}
.row.retired{opacity:.58}
.c-isrc{font-family:var(--font-mono);font-size:12.5px;font-weight:500;white-space:nowrap}
.row.retired .c-isrc{text-decoration:line-through;text-decoration-color:var(--danger)}
.c-title{min-width:0}
.c-title .t{font-weight:500;overflow-wrap:anywhere}
.c-title .a{font-size:12px;color:var(--ink-2);overflow-wrap:anywhere}
.c-title .v{font-size:11.5px;color:var(--ink-3)}
.c-dur,.c-rel{font-family:var(--font-mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.c-imp{font-size:12.5px;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.chip{display:inline-block;padding:2px 7px;border-radius:3px;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.chip-audio{background:var(--accent-soft);color:var(--ink);border:1px solid var(--accent-line)}
.chip-video{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-line)}
.chip-retired{background:var(--danger-soft);color:var(--danger)}
.rowmenu{position:relative;justify-self:end}
.menu{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:172px;padding:4px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:5px;box-shadow:0 8px 26px rgba(10,20,30,.17)}
.menu button{display:block;width:100%;text-align:left;padding:7px 10px;border:0;background:transparent;color:var(--ink);font-size:12.5px;border-radius:3px}
.menu button:hover{background:var(--surface-3)}
.menu button.danger{color:var(--danger)}
.detail{grid-column:1/-1;border-top:1px dashed var(--line);padding-top:4px}
.detail dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 18px;margin:10px 0 4px}
.detail dt{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.detail dd{margin:1px 0 0;font-size:12.5px;overflow-wrap:anywhere}

.empty{padding:30px 16px;text-align:center;color:var(--ink-2)}
.empty h3{font-size:15px;color:var(--ink);margin-bottom:6px}
.empty p{max-width:48ch;margin:0 auto;font-size:13px}
.note{padding:10px 12px;border-radius:5px;font-size:12.5px;line-height:1.45;margin-bottom:14px;
  background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:60;padding:9px 16px;border-radius:5px;
  background:var(--ink);color:var(--bg);font-size:13px;font-weight:500;box-shadow:0 8px 26px rgba(10,20,30,.26);max-width:calc(100vw - 32px)}
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px 22px;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.rules b{display:block;color:var(--ink);font-size:12px;font-weight:600;margin-bottom:1px}
.foot{margin-top:18px;font-size:11.5px;color:var(--ink-3);line-height:1.55}
.foot code{font-family:var(--font-mono);font-size:11px;background:var(--surface-3);padding:1px 4px;border-radius:3px}

@media (max-width:880px){
  .lhead{display:none}
  .row{grid-template-columns:1fr auto;gap:5px 10px;padding:12px 14px}
  .c-isrc{grid-column:1;font-size:13px}
  .rowmenu{grid-column:2;grid-row:1}
  .c-title,.c-imp{grid-column:1/-1}
  .row>.c-dur::before{content:"Length ";color:var(--ink-3)}
  .row>.c-rel::before{content:"Released ";color:var(--ink-3)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* --- utility classes replacing inline style attributes (strict CSP) --- */
.field-bottom{justify-content:flex-end}
.form-code{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--accent)}
.isrc-input{text-transform:uppercase;letter-spacing:.08em}

/* --- login --- */
.login-wrap{max-width:380px;margin:0 auto;padding-inline:16px;padding-block:14vh 40px}
.login-wrap .eyebrow{margin-bottom:4px}
.login-wrap h1{font-size:20px;letter-spacing:-0.02em;margin-bottom:4px}
.login-wrap .sub{color:var(--ink-2);font-size:12.5px;margin-bottom:18px}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.login-card .field{margin-bottom:12px}
.login-card .btn{width:100%}
.login-err{color:var(--danger);font-size:12.5px;margin-top:10px;min-height:1.2em}
input[type=password]{width:100%;padding:7px 9px;background:var(--surface-2);
  border:1px solid var(--line-strong);border-radius:4px;min-width:0;font:inherit;color:inherit}

/* --- release form --- */
.tracks-head{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);margin-bottom:10px}
.tracks-head h3{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.trow{display:grid;grid-template-columns:2rem minmax(0,2fr) minmax(0,1.1fr) 5rem minmax(0,1.3fr) 12rem 2rem;gap:8px;align-items:center;margin-bottom:6px}
.trow.thead{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.trow input{padding:6px 8px;font-size:13px}
.tnum{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
.tremove{justify-self:end}
.trow input.isrc-input{font-size:12px}
.tracks-note{margin-top:10px;display:block}
.paste{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;padding:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:5px}
.paste textarea{width:100%;min-height:7.5rem;padding:8px 9px;background:var(--surface);border:1px solid var(--line-strong);border-radius:4px;
  font-family:var(--font-mono);font-size:12.5px;line-height:1.5;color:var(--ink);resize:vertical}
#rel-preview{text-align:right}
.c-title .rel{font-size:11px;color:var(--ink-3)}
.c-title .rel b{font-weight:600;color:var(--ink-2)}

@media (max-width:760px){
  .trow.thead{display:none}
  .trow{grid-template-columns:1fr auto;padding:10px 0 4px;border-top:1px dashed var(--line);margin-bottom:0}
  .trow > *{grid-column:1/-1;order:2}
  .trow > .tnum{grid-column:1;order:0;text-align:left}
  .trow > .tremove{grid-column:2;order:1}
}

@media (max-width:420px){.anatomy > div{padding:6px 7px}.anatomy .seg{font-size:13.5px;letter-spacing:.06em}.anatomy .cap{font-size:8.5px;letter-spacing:.04em}}