/* Admin desk. Stat graphics follow the marketing .st cards, in the console palette. */

.desk-head{margin:0 0 18px}
.desk-head h1{margin:0}
.desk-head .sub{max-width:36rem}
.desk-head .sub.is-behind{color:var(--bad)}

.desk-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 12px}
.desk .st{position:relative;display:grid;align-content:start;gap:6px;margin:0;padding:16px 16px 18px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(224,122,122,.12),rgba(12,12,14,.85) 62%);color:var(--text);min-height:8.5rem}
.desk a.st:hover{text-decoration:none;border-color:rgba(230,168,92,.45)}
.desk .st b{font:400 clamp(1.8rem,3vw,2.6rem)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#fff}
.desk .st span{font-size:13px;line-height:1.35;color:var(--mist);max-width:16rem}
.desk .st-day{display:block;height:4px;margin-top:8px;border-radius:4px;background:rgba(125,206,160,.35);overflow:hidden}
.desk .st-day em{display:block;height:100%;width:var(--share,0%);margin-left:calc(100% - var(--share,0%));background:var(--bad);box-shadow:0 0 8px rgba(224,122,122,.7)}
.desk .st-months{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-top:8px}
.desk .st-months em{height:12px;border-radius:2px;background:rgba(255,255,255,.08)}
.desk .st-months em.is-on{background:linear-gradient(180deg,var(--ember) 0 22%,rgba(255,255,255,.12) 22%)}
.desk .st-ring{background:linear-gradient(160deg,rgba(230,168,92,.14),rgba(12,12,14,.85) 60%)}
.desk .st-ring svg{position:absolute;top:14px;right:14px;width:42px;height:42px;transform:rotate(-90deg)}
.desk .st-ring circle{fill:none;stroke:rgba(255,255,255,.12);stroke-width:4}
.desk .st-ring .arc{stroke:var(--ember);stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(230,168,92,.65))}

.desk-flags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px;margin:0 0 14px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02)}
.desk-flags a{color:var(--text)}
.desk-flags a:hover{text-decoration:none;color:var(--ember-2)}
.desk-flags b{display:block;font:400 1.35rem/1 var(--display);font-variant-numeric:tabular-nums}
.desk-flags span{color:var(--mute);font-size:12.5px}
.desk-flags .flag-bar{grid-column:1 / -1;display:flex;height:6px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.06)}
.desk-flags .flag-bar em{display:block;min-width:0}
.desk-flags .flag-bar .c{background:var(--bad)}
.desk-flags .flag-bar .w{background:var(--ember)}
.desk-flags .flag-bar .i{background:#8aa0b8}

.desk-health,.desk-open{margin:18px 0}

.desk-loop{display:grid;gap:2px;margin:0 0 8px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);border-left:3px solid var(--line-2);background:linear-gradient(180deg,#14161c,#0f1116);color:var(--text)}
.desk-loop:hover{text-decoration:none;border-color:rgba(230,168,92,.4)}
.desk-loop.sev-critical{border-left-color:var(--bad)}
.desk-loop.sev-warn{border-left-color:var(--ember)}
.desk-loop.sev-info{border-left-color:#8aa0b8}
.desk-loop b{font-weight:600}
.desk-loop span{color:var(--mist);font-size:12.5px}

.desk-alerts{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:12px;margin:0 0 16px}
.desk-alerts .desk-flags{margin:0;align-content:start}
.alert-list .desk-loop{margin:0 0 8px}
.alert-list .quiet,.desk-open .quiet{color:var(--mist);font-size:13px}

.desk-usage{margin:6px 0 18px}
.desk-usage h2,.desk-health h2,.desk-open h2{margin:0 0 10px;font:500 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.desk .st-wide{display:block;margin:0 0 12px;min-height:0}
.desk .st-wide span{max-width:none}
.reel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.reel>div{display:grid;align-content:end;gap:2px;min-height:9.5rem;padding:12px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02)}
.reel b{font:400 1rem/1.2 var(--display);font-variant-numeric:tabular-nums}
.reel span,.reel small{color:var(--mist);font-size:12px}
.reel small{display:block}
.reel-col{display:flex;align-items:flex-end;height:4.5rem;margin-bottom:6px;border-radius:6px;background:rgba(255,255,255,.05);overflow:hidden}
.reel-col em{display:block;width:100%;height:0;background:linear-gradient(180deg,var(--ember),rgba(230,168,92,.25));border-radius:6px 6px 0 0}
.funds{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.funds a{display:grid;gap:2px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(230,168,92,.1),rgba(12,12,14,.8) 60%);color:var(--text)}
.funds a:hover{text-decoration:none;border-color:rgba(230,168,92,.45)}
.funds a.low{border-color:rgba(224,122,122,.55)}
.funds strong{font-size:12.5px;color:var(--mist);font-weight:600}
.funds b{font:400 1.35rem/1.2 var(--display)}
.funds span{color:var(--mute);font-size:12.5px}

.machine-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.machine{display:grid;gap:2px;padding:12px 14px 14px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.machine i{display:block;height:6px;border-radius:6px;margin-bottom:8px;background:rgba(255,255,255,.12)}
.machine.ok i{background:var(--ok);box-shadow:0 0 10px rgba(125,206,160,.45)}
.machine.bad i{background:var(--bad);box-shadow:0 0 10px rgba(224,122,122,.4)}
.machine.quiet i{background:rgba(255,255,255,.16)}
.machine strong{font-weight:600}
.machine span,.desk-health p{color:var(--mist);font-size:13px}
.machine em{font-style:normal;font-size:12.5px;color:var(--mute)}
.machine.ok em{color:var(--ok)}
.machine.bad em{color:var(--bad)}
.desk-health p{margin:10px 0 0}

.desk-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.desk-index a{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);color:var(--mist);font-size:12.5px}
.desk-index a:hover{text-decoration:none;border-color:rgba(230,168,92,.4);color:var(--text)}
.desk-index b{font:400 1.35rem/1 var(--display);color:#fff;font-variant-numeric:tabular-nums}
.desk-index small{color:var(--mute);font-size:12px}

.desk-tables{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.desk-tables a{color:var(--mist);font-size:12.5px}
.desk-tables a:hover{color:var(--text);text-decoration:none}
.desk-tables b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.desk-tables span{color:var(--mute)}

@media (max-width:64em){
  .desk-stats,.desk-flags,.desk-alerts,.machine-bar,.desk-index,.funds,.reel{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .desk .st-day em,.desk .st-ring .arc{box-shadow:none;filter:none}
}