/* admin.css: the owners' portal (MM-1075). Its own small surface on the kit's tokens
   (tokens.css: colours for light and dark, spacing, type). The portal's CSP allows no inline
   style, so every chart colour is a class here. */
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.5; -webkit-text-size-adjust:100%}
h1{font-family:var(--f-display); font-weight:600; font-size:clamp(24px, 20px + 1.5vw, 32px); margin:var(--sp-4) 0 var(--sp-2); line-height:1.2}
h1:focus{outline:none}
h2{font-size:18px; margin:var(--sp-6) 0 var(--sp-2)}
a{color:var(--accent)}
.ad-vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.ad-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); background:var(--card); border-bottom:1px solid var(--line)}
.ad-brand{margin:0; font-family:var(--f-display); font-weight:600; font-size:18px}
.ad-brand span{color:var(--ink-soft); font-weight:400}
.ad-who{margin:0; display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; color:var(--ink-soft); font-size:14px; min-width:0; overflow-wrap:anywhere}
.ad-role{display:inline-block; padding:0 var(--sp-2); border-radius:var(--r-pill); background:var(--accent-soft); color:var(--ink); font-size:13px}
.ad-nav{background:var(--card); border-bottom:1px solid var(--line); overflow-x:auto}
.ad-nav ul{display:flex; gap:var(--sp-1); margin:0 auto; padding:0 var(--sp-2); list-style:none; max-width:1100px}
.ad-nav a{display:block; padding:var(--sp-3) var(--sp-3); color:var(--ink-soft); text-decoration:none; white-space:nowrap; border-bottom:3px solid transparent; min-height:44px}
.ad-nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent); font-weight:600}
.ad-main{max-width:1100px; margin:0 auto; padding:var(--sp-2) var(--sp-4) var(--sp-8)}
.ad-signin{max-width:520px; padding-top:var(--sp-7)}

.ad-btn{font:inherit; font-weight:600; min-height:44px; padding:0 var(--sp-4); border-radius:var(--r-md); border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); cursor:pointer}
.ad-btn:disabled{opacity:.6; cursor:default}
.ad-btn--quiet{background:transparent; color:var(--accent); border-color:var(--line); min-height:36px; padding:0 var(--sp-3)}
.ad-btn--danger{background:var(--err); border-color:var(--err)}
.ad-btn:focus-visible, .ad-nav a:focus-visible, .ad-chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.ad-asof, .ad-note{color:var(--ink-soft); font-size:14px; margin:0 0 var(--sp-3)}
.ad-empty{color:var(--ink-soft); font-style:italic}
.ad-problem, .ad-warn, .ad-notice{padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); margin:var(--sp-3) 0}
.ad-problem{background:var(--err-soft); color:var(--ink); border-left:4px solid var(--err)}
.ad-warn{background:var(--warn-soft); color:var(--ink); border-left:4px solid var(--warn)}
.ad-notice{background:var(--ok-soft); color:var(--ink); border-left:4px solid var(--ok)}
.ad-loading{color:var(--ink-soft)}
[aria-busy="true"]{opacity:.6}

.ad-tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap:var(--sp-3); margin:var(--sp-3) 0}
.ad-tile{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); min-width:0}
.ad-tile--warn{border-left:4px solid var(--warn)}
.ad-tile--alert{border-left:4px solid var(--err)}
.ad-tile__title{font-size:14px; font-weight:500; color:var(--ink-soft); margin:0}
.ad-tile__value{font-family:var(--f-num); font-size:28px; font-weight:600; margin:var(--sp-1) 0 0; line-height:1.2}
.ad-tile__sub{font-size:13px; color:var(--ink-soft); margin:0 0 var(--sp-2)}
.ad-tile__link{font-size:14px}

.ad-filters{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin:var(--sp-3) 0}
.ad-filters__group{display:flex; flex-wrap:wrap; gap:var(--sp-1)}
.ad-chip{display:inline-flex; align-items:center; min-height:36px; padding:0 var(--sp-3); border:1px solid var(--line); border-radius:var(--r-pill); color:var(--ink); text-decoration:none; font-size:14px; background:var(--card)}
.ad-chip.is-on{background:var(--accent-soft); border-color:var(--accent); color:var(--ink); font-weight:600}

.ad-tablewrap{overflow-x:auto; margin:var(--sp-2) 0 var(--sp-4); max-width:100%}
.ad-table{border-collapse:collapse; width:100%; font-size:14px}
.ad-table caption{text-align:left; color:var(--ink-soft); padding:0 0 var(--sp-2); font-size:13px}
.ad-table th, .ad-table td{padding:var(--sp-2) var(--sp-2); border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:top}
.ad-table thead th{font-weight:600; color:var(--ink-soft); border-bottom:1px solid var(--line)}
.ad-table tbody th{font-weight:500}
.ad-table .n{text-align:right; font-family:var(--f-num); font-variant-numeric:tabular-nums; white-space:nowrap}
.ad-table--meter td:last-child{width:40%}
.ad-table--wide{min-width:720px}

/* charts: one series in the accent; axes and grid recessive; text in the ink colours */
.ad-spark{display:block; width:100%; max-width:240px; height:32px; margin-top:var(--sp-1); overflow:visible}
.ad-cols{display:block; width:100%; height:auto; margin:var(--sp-2) 0}
.ad-meter{display:block; width:100%; height:8px; margin-top:6px}
.ad-line{fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.ad-dot{fill:var(--accent); stroke:var(--card); stroke-width:2}
.ad-hit, .ad-hitbox{fill:transparent}
.ad-bar{fill:var(--accent)}
.ad-bar--soft{fill:var(--accent-soft); stroke:var(--accent); stroke-width:1; stroke-dasharray:3 2}
.ad-meter__track{fill:var(--line-soft)}
.ad-axis{stroke:var(--line); stroke-width:1}
.ad-grid{stroke:var(--grid, var(--line-soft)); stroke-width:1; stroke-dasharray:2 3}
.ad-tick{fill:var(--ink-soft); font-size:12px; font-family:var(--f-body)}
.ad-hitbox:hover + .ad-bar, .ad-bar:hover{opacity:.8}

/* the cohort grid: one hue, light to dark; still arriving is hatched as well as said */
.ad-grid-table td.ad-heat{text-align:center; font-family:var(--f-num); font-size:13px; min-width:52px}
.ad-heat--none{background:transparent}
.ad-heat--0{background:var(--card-2); color:var(--ink-soft)}
.ad-heat--1{background:color-mix(in srgb, var(--accent) 14%, var(--card)); color:var(--ink)}
.ad-heat--2{background:color-mix(in srgb, var(--accent) 30%, var(--card)); color:var(--ink)}
.ad-heat--3{background:color-mix(in srgb, var(--accent) 50%, var(--card)); color:var(--ink)}
.ad-heat--4{background:var(--accent); color:var(--accent-ink)}
.ad-heat--arriving{background-image:repeating-linear-gradient(135deg, transparent 0 5px, var(--scrim) 5px 7px)}
.ad-legend{display:flex; flex-wrap:wrap; gap:var(--sp-1); font-size:12px; color:var(--ink-soft)}
.ad-legend .ad-heat{display:inline-block; min-width:56px; padding:2px var(--sp-2); border-radius:var(--r-xs); text-align:center}

@media (max-width:480px){
  .ad-main{padding-left:var(--sp-4); padding-right:var(--sp-4)}
  .ad-tile__value{font-size:24px}
  .ad-table--meter td:last-child{width:30%}
}
@media (forced-colors:active){
  .ad-bar, .ad-dot{fill:CanvasText}
  .ad-line{stroke:CanvasText}
}

/* Operations (MM-1076): panels, facts, the watch's checks; a status is a word and a symbol */
h3{font-size:15px; margin:var(--sp-4) 0 var(--sp-1); color:var(--ink-soft)}
.ad-panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-2) var(--sp-4) var(--sp-4); margin:var(--sp-4) 0; min-width:0}
.ad-panel h2{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-top:var(--sp-3)}
.ad-badge{display:inline-flex; align-items:center; gap:4px; padding:1px var(--sp-2); border-radius:var(--r-pill); font-size:13px; font-weight:600; border:1px solid var(--line); color:var(--ink); white-space:nowrap}
.ad-badge--ok{background:var(--ok-soft); border-color:var(--ok)}
.ad-badge--warn, .ad-badge--requested, .ad-badge--running{background:var(--warn-soft); border-color:var(--warn)}
.ad-badge--alert{background:var(--err-soft); border-color:var(--err)}
.ad-badge--unknown{background:var(--card-2)}
.ad-facts{display:grid; grid-template-columns:minmax(0, 10rem) minmax(0, 1fr); gap:var(--sp-1) var(--sp-3); margin:var(--sp-2) 0; font-size:14px}
.ad-facts dt{color:var(--ink-soft)}
.ad-facts dd{margin:0; overflow-wrap:anywhere}
.ad-checks{list-style:none; margin:0; padding:0; font-size:14px}
.ad-checks li{padding:var(--sp-2) 0; border-bottom:1px solid var(--line-soft); overflow-wrap:anywhere}
.ad-confirm{border:1px solid var(--warn); background:var(--warn-soft); border-radius:var(--r-sm); padding:var(--sp-3); margin:var(--sp-3) 0}
.ad-confirm p{margin:0 0 var(--sp-2)}
code{font-family:var(--f-num); font-size:13px; overflow-wrap:anywhere}
@media (max-width:480px){ .ad-facts{grid-template-columns:1fr} .ad-facts dd{margin-bottom:var(--sp-2)} }

/* Lookup and flag triage (MM-1077) */
.ad-form{margin:var(--sp-3) 0}
.ad-field{display:grid; gap:var(--sp-1); margin:0 0 var(--sp-3); max-width:480px}
.ad-field label{font-weight:600}
.ad-form input, .ad-form select{font:inherit; min-height:44px; padding:0 var(--sp-3); border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card); color:var(--ink); width:100%; min-width:0}
.ad-form input:focus-visible, .ad-form select:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.ad-hint{font-size:13px; color:var(--ink-soft)}
.ad-flags{list-style:none; margin:0; padding:0}
.ad-flag{border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); padding:var(--sp-2) var(--sp-4); margin:0 0 var(--sp-3); overflow-wrap:anywhere}
.ad-q{margin:var(--sp-2) 0; padding:var(--sp-2) var(--sp-3); border-left:3px solid var(--line); background:var(--card-2); white-space:pre-wrap}
.ad-form--row{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center}
.ad-form--row select{width:auto}
.ad-form--row input{flex:1 1 12rem; width:auto}