/* Serenade Pricing: the model pages' colours (pricing_page.css) */
:root{--bg:#121212;--panel:#1a1a1a;--line:rgba(201,169,110,.22);--text:#e8e4da;--soft:#d6d3cc;--mute:#8d8a83;--dim:#6d6a63;--gold:#e3c48e;--goldl:rgba(201,169,110,.45);--goldbg:rgba(201,169,110,.12);--warn:#ffb070;--bad:#ff8f8f;--ok:#8fd19e}
*{box-sizing:border-box}
[hidden]{display:none!important}      /* a display: rule below would otherwise show what is hidden (the sign-in screen's Lock and Sign out did) */
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button,input,select{font:inherit;color:inherit}
button{font-size:13px;padding:6px 12px;border-radius:6px;border:1px solid var(--goldl);background:transparent;color:var(--gold);cursor:pointer;white-space:nowrap}
button:hover{background:var(--goldbg)}
button.go{background:var(--gold);color:#1a1a1a;border-color:var(--gold);font-weight:600}
button.go:hover{background:#ecd3a6}
button:disabled{opacity:.45;cursor:default}
input,select{background:#0e0e0e;border:1px solid #3a3833;border-radius:6px;padding:6px 9px;min-width:0}
input:focus,select:focus{outline:none;border-color:var(--gold)}
.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.02em}
.chk{display:inline-flex;align-items:center;gap:6px;color:var(--soft);font-size:13px;white-space:nowrap}
.chk input{accent-color:var(--gold)}

header.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:5}      /* header only: a price row is tr.top too */
.brand{display:flex;align-items:baseline;gap:10px}
.brand b{color:var(--gold);font-size:16px}
.brand span{color:var(--soft)}
.who{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--mute);font-size:13px}
.live{display:inline-flex;align-items:center;gap:6px}
.live i{width:8px;height:8px;border-radius:50%;background:var(--dim)}
.live.on i{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.live.off i{background:var(--warn)}

main{padding:16px;max-width:1400px;margin:0 auto}
.card{max-width:560px;margin:40px auto;padding:22px 24px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.card h1{font-size:19px;margin:0 0 10px;color:var(--gold);font-weight:600}
.card p{color:var(--soft);margin:0 0 12px}
.card form{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.card form input{padding:9px 11px}
.card .warn{color:var(--warn)}
.said{min-height:1.4em;color:var(--bad);margin:10px 0 0!important}
.said.ok{color:var(--mute)}

.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.levels{display:inline-flex;border:1px solid var(--goldl);border-radius:8px;overflow:hidden}
.levels button{border:0;border-radius:0;padding:7px 14px;border-right:1px solid var(--goldl)}
.levels button:last-child{border-right:0}
.levels button[aria-selected=true]{background:var(--gold);color:#1a1a1a;font-weight:600}
.pick{display:inline-flex;align-items:center;gap:6px;color:var(--mute);font-size:13px}
.pick input{width:150px}
.explain{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;margin:12px 0 10px;color:var(--soft)}
.explain b{color:var(--gold);font-weight:600}
.status{margin-left:auto;color:var(--mute);font-size:13px}
.status.bad{color:var(--bad)}
.tools{margin-bottom:8px}
.tools input[type=search]{width:220px}
.count{color:var(--mute);font-size:13px}
.gap{flex:1}

.scroll{overflow:auto;border:1px solid var(--line);border-radius:8px;max-height:calc(100vh - 230px)}
table{border-collapse:collapse;width:100%;font-size:13px}
th{position:sticky;top:0;background:var(--panel);text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1}
td{padding:5px 10px;border-bottom:1px solid #222;vertical-align:middle}
th.r,td.r{text-align:right}
tr.band td{background:#161616;color:var(--gold);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding-top:9px}
td.m{min-width:200px}
td.m .len{display:block;color:var(--mute);font-size:12px}
tr.kid td.m{padding-left:28px;color:var(--soft)}
td.code{color:var(--dim);font-size:12px;white-space:nowrap}
td.lay{color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
td.ed{white-space:nowrap}
td.ed select{padding:4px 6px;margin-right:6px}
td.ed input.p{width:96px;text-align:right;font-variant-numeric:tabular-nums}
td.ed input.n{width:62px;text-align:right;margin-left:6px}
td.ed .ro{color:var(--mute)}
td.uses{white-space:nowrap;font-variant-numeric:tabular-nums}
td.uses b{font-weight:600}
td.uses .src{display:inline-block;margin-left:7px;font-size:11px;padding:1px 7px;border-radius:9px;border:1px solid #3a3833;color:var(--mute)}
td.uses .src.master{border-color:#5a5446}
td.uses .src.customer{border-color:#4f6b8f;color:#a9c2e0}
td.uses .src.community{border-color:#6f8f4f;color:#bcd9a0}
td.uses .src.user{border-color:var(--goldl);color:var(--gold)}
td.uses.none{color:var(--dim)}
.tw{display:inline-block;width:14px;cursor:pointer;color:var(--mute)}
tr.flash td{animation:flash 1.6s ease-out}
@keyframes flash{from{background:rgba(227,196,142,.25)}to{background:transparent}}
.empty{color:var(--mute);text-align:center;margin:40px 0}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#24221e;border:1px solid var(--goldl);color:var(--text);padding:9px 16px;border-radius:8px;font-size:13px;z-index:10;max-width:calc(100vw - 32px)}

@media (max-width:760px){
  main{padding:12px}
  header.top{padding:8px 12px}
  .who #me{display:none}
  .levels{width:100%}
  .levels button{flex:1;padding:8px 4px}
  .pick{width:100%}
  .pick select,.pick input{flex:1}
  .tools input[type=search]{flex:1;width:auto}
  td.code,th.code,td.lay,th.lay{display:none}
  td.m{min-width:0}
  td.ed input.p{width:76px}
  td.uses .src{display:block;width:max-content;margin:3px 0 0}
  .scroll{max-height:none}
}

/* the two tabs, the jobs, Excel */
.tabs{display:inline-flex;gap:2px;margin-left:8px}
.tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;padding:6px 12px;color:var(--soft);font-size:14px}
.tabs button[aria-selected=true]{color:var(--gold);border-bottom-color:var(--gold);background:transparent}
.tabs .n{display:inline-block;min-width:18px;margin-left:4px;padding:0 5px;border-radius:9px;background:var(--goldbg);color:var(--gold);font-size:11px;line-height:17px}
.tabs .n:empty{display:none}
label.btn{display:inline-block;font-size:13px;padding:6px 12px;border-radius:6px;border:1px solid var(--goldl);color:var(--gold);cursor:pointer;white-space:nowrap}
label.btn:hover{background:var(--goldbg)}
label.btn.off{opacity:.45;cursor:default;pointer-events:none}
a.btn{display:inline-block;font-size:12px;padding:4px 10px;border-radius:6px;border:1px solid var(--goldl);color:var(--gold);text-decoration:none;white-space:nowrap}
a.btn:hover{background:var(--goldbg)}
button.link{border:0;padding:0;color:var(--gold);text-decoration:underline;text-underline-offset:3px;background:transparent;font-size:13px}
#jobs .tools select{max-width:240px}
.job{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:12px 14px;margin:0 0 10px}
.job.flash{animation:flash 1.6s ease-out}
.jh{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.jh b{color:var(--text);font-size:15px}
.jh .jm{color:var(--soft);font-size:13px}
.jh .rev,.orev .rev{color:var(--mute);font-size:12px}
.jh button.link{margin-left:auto}
.job .note{color:var(--soft);margin:6px 0 0;font-size:13px}
.files{list-style:none;margin:8px 0 0;padding:0}
.files li{display:flex;align-items:center;gap:10px;padding:5px 0;border-top:1px solid #222}
.files .kind{flex:0 0 52px;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.files .fn{flex:1;min-width:0;overflow-wrap:anywhere}
.files .sz{color:var(--dim);font-size:12px;white-space:nowrap}
.older{margin-top:8px;color:var(--mute);font-size:13px}
.older summary{cursor:pointer}
.orev{margin:8px 0 0 12px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:20;padding:16px}
.modal .box{max-width:560px;width:100%;background:var(--panel);border:1px solid var(--goldl);border-radius:10px;padding:18px 20px}
.modal h2{font-size:17px;color:var(--gold);margin:0 0 8px;font-weight:600}
.modal .from{color:var(--mute);margin:0 0 6px;font-size:13px;overflow-wrap:anywhere}
.modal ul{margin:0 0 8px;padding-left:20px;color:var(--soft)}
.modal .iss{color:var(--warn);font-size:13px;margin:6px 0;overflow-wrap:anywhere}
.modal .iss b{color:var(--warn)}
.modal .row{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
@media (max-width:760px){
  .tabs{order:3;width:100%;margin:0}
  .tabs button{flex:1}
  .files li{flex-wrap:wrap}
  .files .fn{flex-basis:calc(100% - 62px)}
  .jh button.link{margin-left:0}
}

/* regions and locations: where a job stands, the overview */
td.uses .src.region{border-color:#6b5a8f;color:#c5b5e6}
td.uses .src.location{border-color:#8f6b4f;color:#e0c2a9}
.st{display:inline-block;font-size:11px;padding:1px 8px;border-radius:9px;border:1px solid #3a3833;color:var(--soft);white-space:nowrap}
.st.bidding,select.st-pick.bidding{border-color:#4f6b8f;color:#a9c2e0}
.st.quoted,select.st-pick.quoted{border-color:var(--goldl);color:var(--gold)}
.st.won,select.st-pick.won{border-color:#4f8f5a;color:var(--ok)}
.st.lost,select.st-pick.lost{border-color:#7a4a4a;color:var(--bad)}
select.st-pick{font-size:12px;padding:2px 6px}
.dim{color:var(--dim)}
.hint{color:var(--mute);font-size:12px}
.ov-sum{display:flex;gap:6px 14px;flex-wrap:wrap;color:var(--mute);font-size:12px}
.ov-sum .m{color:var(--soft);font-variant-numeric:tabular-nums}
.ov-region{border-top:1px solid var(--line);margin-top:14px;padding-top:4px}
.ov-region h2{font-size:15px;color:var(--gold);margin:8px 0 4px;font-weight:600}
.ov-loc{margin:12px 0 0 0}
.ov-loc h3{font-size:13px;margin:0 0 4px;color:var(--text);font-weight:600}
.ov-loc .scroll{max-height:none;margin-top:6px}
#overview td{vertical-align:top}
#overview td.t .sub{display:block;color:var(--mute);font-size:12px}
#overview td.v{font-variant-numeric:tabular-nums;white-space:nowrap}
#overview .part{display:block;font-size:11px;color:var(--warn)}
@media (max-width:760px){
  #overview th:nth-child(n+5),#overview td:nth-child(n+5),#overview th:nth-child(2),#overview td:nth-child(2){display:none}
  .hint{flex-basis:100%}
}