/* Control room UI. Colours, type and spacing come ONLY from tokens.css (master brand); nothing is invented here. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.5}
h1,h2,h3{font-family:var(--font-head);letter-spacing:var(--tracking-head);margin:0;line-height:var(--lh-tight)}
h1{font-size:1.6rem}h2{font-size:1.25rem}h3{font-size:1.05rem;margin-bottom:var(--sp-2)}
a{color:var(--primary)}
.skip{position:absolute;left:-999px;top:0;background:var(--primary);color:var(--on-primary);padding:var(--sp-2) var(--sp-3);z-index:var(--z-modal)}
.skip:focus{left:var(--sp-2);top:var(--sp-2)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.muted{color:var(--muted)}.small{font-size:12px}.mono{font-family:var(--font-mono)}.right{text-align:right}
.hidden{display:none!important}
.noscript{padding:var(--sp-5)}

/* shell */
.app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.side{background:var(--surface);border-right:var(--border);padding:var(--sp-4) var(--sp-3);position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-1) var(--sp-2) var(--sp-3)}
.brand img{height:30px;width:auto;display:block}
.badge{font-size:11px;background:var(--soft);color:var(--primary);border-radius:var(--r-pill);padding:2px 8px;font-weight:600}
.nav-group{display:block;color:var(--muted);font-size:11px;margin:var(--sp-4) var(--sp-3) var(--sp-1);text-transform:uppercase;letter-spacing:.06em}
.nav a{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:9px;color:var(--text);text-decoration:none;margin:1px 0}
.nav a:hover{background:var(--surface-2)}
.nav a[aria-current="page"]{background:var(--soft);color:var(--primary);font-weight:700}
.nav .n{background:var(--danger-bg);color:var(--danger);border-radius:99px;padding:0 7px;font-size:11px;font-weight:700}
.nav .soon{font-size:10px;color:var(--muted)}
.menu-btn{display:none}
main{padding:var(--sp-5);min-width:0}
.top{display:flex;gap:var(--sp-3);align-items:center;margin-bottom:var(--sp-4);flex-wrap:wrap}
.top .sp{flex:1}
.me{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-5);padding:var(--sp-3);border-top:var(--border);font-size:12px;flex-wrap:wrap}

/* surfaces */
.card{background:var(--surface);border:var(--border);border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--shadow-sm);min-width:0}
.grid{display:grid;gap:var(--sp-3)}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g21{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.stack>*+*{margin-top:var(--sp-3)}
.kpi b{font-size:1.5rem;display:block;margin-top:2px;font-family:var(--font-head)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;color:var(--muted);padding:8px;border-bottom:var(--border);white-space:nowrap;font-weight:600}
td{padding:10px 8px;border-bottom:var(--border);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tr.click{cursor:pointer}tr.click:hover td{background:var(--surface-2)}
tr.sel td{background:var(--soft)}
.row-actions{display:flex;gap:var(--sp-1);flex-wrap:wrap}

/* pills + chips */
.pill{display:inline-block;border-radius:99px;padding:2px 9px;font-size:12px;font-weight:600;background:var(--soft);color:var(--primary);white-space:nowrap}
.pill.ok{background:var(--success-bg);color:var(--success)}.pill.warn{background:var(--warning-bg);color:var(--warning)}.pill.bad{background:var(--danger-bg);color:var(--danger)}.pill.grey{background:var(--surface-2);color:var(--muted)}
.flow{display:flex;gap:6px;flex-wrap:wrap;margin:var(--sp-2) 0}
.flow span{background:var(--surface-2);border-radius:99px;padding:3px 10px;font-size:12px;color:var(--muted)}
.flow span.on{background:var(--primary);color:var(--on-primary);font-weight:600}
.flow span.past{color:var(--text)}

/* controls */
.btn{background:var(--primary);color:var(--on-primary);border:1px solid transparent;border-radius:var(--r-md);padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;min-height:36px}
.btn:hover{background:var(--primary-hover)}
.btn.g{background:var(--surface);color:var(--text);border-color:var(--line)}.btn.g:hover{background:var(--surface-2)}
.btn.danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger)}
.btn.s{padding:4px 10px;font-size:12px;min-height:30px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
input,select,textarea{padding:8px 10px;border:var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font:inherit;width:100%;min-height:36px}
textarea{min-height:70px;resize:vertical}
input[type=checkbox]{width:auto;min-height:0}
label{display:block;font-size:12px;font-weight:600;margin:var(--sp-3) 0 4px}
.row{display:flex;gap:var(--sp-3);flex-wrap:wrap}.row>*{flex:1 1 140px;min-width:0}
.hint{color:var(--muted);font-size:12px;margin:4px 0 0}
.search{max-width:260px}
.pager{display:flex;gap:var(--sp-2);align-items:center;justify-content:flex-end;margin-top:var(--sp-3);flex-wrap:wrap}
.switch{display:inline-flex;align-items:center;gap:6px}
.sw{appearance:none;-webkit-appearance:none;width:36px;height:20px;border-radius:99px;background:var(--line);position:relative;cursor:pointer;border:0;padding:0;min-height:0;flex:none}
.sw:after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--surface);transition:left var(--dur-fast)}
.sw:checked{background:var(--primary)}.sw:checked:after{left:19px}
.sw[disabled]{opacity:.5;cursor:not-allowed}
.bar{height:8px;background:var(--surface-2);border-radius:9px;overflow:hidden;min-width:70px}
.bar i{display:block;height:100%;background:var(--primary)}
.bar i.warn{background:var(--warning)}.bar i.bad{background:var(--danger)}

/* timeline */
.tl{list-style:none;padding:0 0 0 8px;margin:0}
.tl li{padding:6px 0 6px 14px;border-left:2px solid var(--line);position:relative;font-size:13px}
.tl li:before{content:"";position:absolute;left:-6px;top:11px;width:10px;height:10px;border-radius:50%;background:var(--accent)}

/* toast + dialog */
#toasts{position:fixed;bottom:var(--sp-4);right:var(--sp-4);display:grid;gap:var(--sp-2);z-index:var(--z-modal);max-width:min(380px,calc(100vw - 2rem))}
.toast{background:var(--text);color:var(--bg);border-radius:var(--r-md);padding:10px 14px;box-shadow:var(--shadow-lg);font-weight:500}
.toast.bad{background:var(--danger);color:var(--surface)}
dialog{border:var(--border);border-radius:var(--r-lg);background:var(--surface);color:var(--text);padding:var(--sp-5);width:min(520px,calc(100vw - 2rem));box-shadow:var(--shadow-lg)}
dialog::backdrop{background:rgba(9,17,42,.55)}
dialog .actions{display:flex;gap:var(--sp-2);justify-content:flex-end;margin-top:var(--sp-4);flex-wrap:wrap}
.secret{font-family:var(--font-mono);background:var(--surface-2);border:var(--border);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);word-break:break-all;user-select:all}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-1);font-family:var(--font-mono)}
.err{color:var(--danger);font-weight:600;min-height:1.2em;margin-top:var(--sp-2)}

/* auth */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:var(--sp-4)}
.auth-card{width:min(420px,100%)}
.auth-card .logo{height:36px;margin-bottom:var(--sp-4)}
.auth-card .btn{width:100%;margin-top:var(--sp-4)}
.coming{border:1px dashed var(--line);border-radius:var(--r-lg);padding:var(--sp-5);text-align:center;color:var(--muted)}

@media(max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.g21{grid-template-columns:minmax(0,1fr)}}
@media(max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;border-right:0;border-bottom:var(--border);padding:var(--sp-3)}
  .menu-btn{display:inline-flex;margin-left:auto}
  .brand{margin:0}
  .nav{display:none;margin-top:var(--sp-3)}.nav.open{display:block}
  .me{display:none}.nav.open~.me{display:flex}
  main{padding:var(--sp-4) var(--sp-3)}
  .g2{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){.g4,.g3{grid-template-columns:minmax(0,1fr)}h1{font-size:1.35rem}.search{max-width:none;width:100%}}

.top select{width:auto;min-width:170px}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-3)}
label.switch{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:13px;margin:0}
label.switch .sw{margin:0}
input[type=checkbox].sw{width:36px;height:20px;min-height:0;flex:none}

/* product switcher (sidebar) */
.product-switch{margin:0 var(--sp-2) var(--sp-2);display:grid;gap:4px}
.product-switch label{margin:0;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.product-switch select{min-height:34px}
/* requests: details + flags */
.pill.due{background:var(--danger-bg);color:var(--danger)}
tr.overdue td{background:var(--danger-bg)}
.kv{display:grid;grid-template-columns:minmax(110px,max-content) minmax(0,1fr);gap:4px var(--sp-3);margin:0}
.kv dt{color:var(--muted);font-size:12px}.kv dd{margin:0;word-break:break-word}
.wrap-text{white-space:pre-wrap}
/* email templates editor */
.ed{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--sp-3);align-items:start}
.blk{border:var(--border);border-radius:var(--r-md);padding:var(--sp-2);background:var(--surface)}
.blk .bar-row{display:flex;gap:var(--sp-1);align-items:center;margin-bottom:6px;flex-wrap:wrap}
.blk textarea{min-height:60px}
.chips{display:flex;flex-wrap:wrap;gap:4px;max-height:140px;overflow:auto}
.chip{border:var(--border);background:var(--surface-2);color:var(--text);border-radius:99px;padding:2px 9px;font:inherit;font-size:12px;cursor:pointer;min-height:26px}
.chip.secret{border-color:var(--warning);color:var(--warning)}
.preview{border:var(--border);border-radius:var(--r-md);background:#fff;width:100%;height:560px}
pre.plain{background:var(--surface-2);border-radius:var(--r-md);padding:var(--sp-3);white-space:pre-wrap;word-break:break-word;font-family:var(--font-mono);font-size:12px;max-height:300px;overflow:auto;margin:0}
@media(max-width:1000px){.ed{grid-template-columns:minmax(0,1fr)}}

/* ---- tickets (ticket inbox) ---- */
.tk-chips{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.tk-chip{border:var(--border);background:var(--surface);color:var(--text);border-radius:99px;padding:4px 12px;font:inherit;font-size:13px;cursor:pointer;min-height:32px}
.tk-chip b{font-family:var(--font-head)}
.tk-chip.on{background:var(--soft);border-color:var(--primary);color:var(--primary)}
.tk-chip.bad b{color:var(--danger)}.tk-chip.warn b{color:var(--warning)}
.tk-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2);margin-bottom:var(--sp-3)}
.tk-filters .search{max-width:none;grid-column:1/-1}
.tk-filters select{width:100%;min-width:0}
.tk-bulk{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;background:var(--soft);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3)}
.tk-inline{display:inline-flex;gap:var(--sp-2);align-items:center;margin:0;font-weight:500}
.tk-inline select,.tk-inline input{width:auto}
.tk-list{display:grid;gap:var(--sp-2)}
.tk-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-3);align-items:start;border:var(--border);border-radius:var(--r-md);padding:var(--sp-3);background:var(--surface)}
.tk-row.over{border-color:var(--danger)}
.tk-row.crit{border-left:4px solid var(--danger)}
.tk-row:hover{background:var(--surface-2)}
.tk-pick{padding-top:2px}
.tk-line1{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.tk-ref{font-size:12px;color:var(--muted)}
.tk-subject{font-weight:600;color:var(--text);text-decoration:none;overflow-wrap:anywhere}
.tk-subject:hover{text-decoration:underline}
.tk-line2{margin-top:2px;overflow-wrap:anywhere}
.tk-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.tk-plan{display:inline-block;border:1px solid var(--primary);color:var(--primary);border-radius:6px;padding:1px 8px;font-size:12px;font-weight:700;white-space:nowrap}
.tk-plan small{font-weight:500;opacity:.8}
.tk-title{margin-bottom:var(--sp-3);overflow-wrap:anywhere}
.tk-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--sp-3);align-items:start}
.tk-col{display:grid;gap:var(--sp-3);min-width:0}
.tk-thread{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.tk-ev{border-left:3px solid var(--line);padding-left:var(--sp-3);min-width:0}
.tk-ev.cust{border-color:var(--primary)}.tk-ev.staff{border-color:var(--accent)}.tk-ev.note{border-color:var(--warning);background:var(--warning-bg);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm)}
.tk-ev.sys{color:var(--muted);font-size:12px}
.tk-ev-body{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px}
.tk-compose textarea{margin:var(--sp-2) 0}
.tk-compose-bar{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.tk-compose-bar select{width:auto;max-width:100%;flex:1 1 180px}
.tk-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px var(--sp-3);margin:var(--sp-2) 0}
.tk-dl dt{color:var(--muted);font-size:12px}.tk-dl dd{margin:0;overflow-wrap:anywhere}
.actions-row{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}
.tk-actions{display:grid;gap:var(--sp-3);margin-top:var(--sp-3)}
.tk-block{margin:var(--sp-1) 0 0;padding-left:1.1em;color:var(--danger);font-size:13px}
.tk-oncall{margin-top:var(--sp-2);background:var(--danger-bg);color:var(--danger);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);font-size:13px}
.tk-res{margin:var(--sp-2) 0}
.tk-shots{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.tk-shots img{max-width:150px;max-height:110px;border:var(--border);border-radius:var(--r-sm);display:block;background:var(--surface-2)}
.tk-pre{white-space:pre-wrap;word-break:break-word;font-family:var(--font-mono);font-size:11px;background:var(--surface-2);border-radius:var(--r-sm);padding:var(--sp-2);max-height:220px;overflow:auto}
.tk-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0 var(--sp-3);align-items:end;margin-top:var(--sp-3)}
.tk-canned{border-bottom:var(--border);padding:var(--sp-2) 0;display:grid;gap:4px;justify-items:start}
.tk-canned p{margin:0;white-space:pre-wrap}
.nav-badge{background:var(--danger-bg);color:var(--danger);border-radius:99px;padding:0 7px;font-size:11px;font-weight:700}
@media(max-width:1000px){.tk-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.tk-row{grid-template-columns:auto minmax(0,1fr)}.tk-meta{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center}.tk-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- billing, alerts, guide (Wave C) ---- */
.pay-shot{max-width:100%;max-height:520px;border:var(--border);border-radius:var(--r-md);display:block;background:var(--surface-2)}
.pay-checks{display:grid;gap:var(--sp-1);margin:var(--sp-2) 0}
.pay-checks label.switch{margin:0}
.pay-flags{border-color:var(--danger)}
.kpi{display:grid;gap:2px}
@media(max-width:560px){.pay-shot{max-height:360px}}

/* ---- stacks: provisioning, secrets, deletion (Wave D) ---- */
dialog.wide{width:min(760px,calc(100vw - 2rem));max-height:92vh;overflow:auto}
.steps{list-style:none;margin:var(--sp-2) 0;padding:0;display:grid;gap:6px}
.steps li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--sp-2);align-items:center;border:var(--border);border-radius:var(--r-md);padding:8px 10px;background:var(--surface)}
.steps li .why{grid-column:1/-1;font-size:12px;color:var(--muted);word-break:break-word}
.steps li.failed{border-color:var(--danger);background:var(--danger-bg)}
.steps li.failed .why{color:var(--danger)}
.steps li.running,.steps li.waiting{border-color:var(--warning)}
.sec{border-top:var(--border);margin-top:var(--sp-4);padding-top:var(--sp-3)}
.sec h3{margin-bottom:var(--sp-1)}
.sec .row.tight{align-items:end}
.danger-zone{border:1px solid var(--danger);border-radius:var(--r-md);padding:var(--sp-3);background:var(--danger-bg);margin-top:var(--sp-4)}
.danger-zone h3{color:var(--danger)}
.confirm-name{font-family:var(--font-mono);background:var(--surface);border:var(--border);border-radius:var(--r-sm);padding:2px 6px;word-break:break-all}
.check-msg{min-height:1.4em;font-size:12px;margin-top:4px}
.check-msg.ok{color:var(--success)}.check-msg.bad{color:var(--danger)}
.btn-row{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2)}
.mini-list{list-style:none;margin:var(--sp-1) 0 0;padding:0;display:grid;gap:4px;font-size:12px}
.mini-list li{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
@media(max-width:560px){dialog.wide{padding:var(--sp-3)}.steps li{grid-template-columns:minmax(0,1fr)}.steps li .pill{justify-self:start}}