/* ITAware dashboard.
   Brand blue #005D7F, sampled from the Minimines logo.
   Information design over decoration: this is scanned and operated, not read. */

:root{
  --ground:#F4F6F8; --surface:#FFFFFF; --surface-2:#ECF0F3;
  --ink:#0E141A; --ink-2:#3A444D; --ink-3:#6B7680;
  --rule:#D5DCE2; --rule-strong:#B8C3CB;
  --accent:#005D7F; --accent-2:#00779F; --accent-wash:#E1EDF3;
  --ok:#2C6B50; --ok-wash:#E2EFE8;
  --warn:#87560E; --warn-wash:#F6EAD6;
  --bad:#9E3227; --bad-wash:#F7E3E0;
  --mute:#6B7680; --mute-wash:#ECF0F3;
  --shadow:0 1px 2px rgba(15,20,23,.05), 0 8px 24px -18px rgba(15,20,23,.2);
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0B1013; --surface:#11181D; --surface-2:#171F26;
    --ink:#E6EEF2; --ink-2:#AFBEC7; --ink-3:#7A8894;
    --rule:#232E36; --rule-strong:#324149;
    --accent:#4FB6DB; --accent-2:#7ACBE9; --accent-wash:#06242F;
    --ok:#5FBE8D; --ok-wash:#11251C;
    --warn:#D9A34C; --warn-wash:#291F12;
    --bad:#E37D6E; --bad-wash:#2B1714;
    --mute:#7A8894; --mute-wash:#171F26;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -20px rgba(0,0,0,.9);
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-2); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px; border-radius:2px}
h1,h2,h3{margin:0; letter-spacing:-.015em; text-wrap:balance}

/* --- chrome --- */
header.top{background:var(--surface); border-bottom:1px solid var(--rule-strong)}
.top-in{
  max-width:1240px; margin:0 auto; padding:0 22px; display:flex;
  align-items:center; gap:26px; min-height:58px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:11px; font-weight:600; font-size:16px}
.brand img{height:26px; width:auto}
.brand .sub{color:var(--ink-3); font-weight:400; font-size:12.5px}
nav.main{display:flex; gap:2px; margin-left:auto; flex-wrap:wrap}
nav.main a{
  padding:7px 13px; border-radius:3px; color:var(--ink-2); font-size:13.5px;
  font-weight:500;
}
nav.main a:hover{background:var(--surface-2); text-decoration:none}
nav.main a.on{background:var(--accent-wash); color:var(--accent)}
main{max-width:1240px; margin:0 auto; padding:26px 22px 70px}

.pagehead{display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:20px}
.pagehead h1{font-size:24px; font-weight:600}
.pagehead .note{color:var(--ink-3); font-size:13.5px}
.pagehead .right{margin-left:auto; display:flex; gap:8px; align-items:center}

.eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3);
}

/* --- tiles --- */
.tiles{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); margin-bottom:24px}
.tile{
  background:var(--surface); border:1px solid var(--rule); border-radius:4px;
  padding:15px 16px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.tile .stripe{position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--rule-strong)}
.tile.ok .stripe{background:var(--ok)}
.tile.warn .stripe{background:var(--warn)}
.tile.bad .stripe{background:var(--bad)}
.tile.accent .stripe{background:var(--accent)}
.tile .label{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.tile .value{font-size:31px; font-weight:600; letter-spacing:-.03em; margin-top:4px;
  font-variant-numeric:tabular-nums; line-height:1.05}
.tile .foot{font-size:12.5px; color:var(--ink-3); margin-top:3px}
.tile.ok .value{color:var(--ok)}
.tile.warn .value{color:var(--warn)}
.tile.bad .value{color:var(--bad)}

/* --- panels --- */
.cols{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.panel{
  background:var(--surface); border:1px solid var(--rule); border-radius:4px;
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:18px;
}
.panel > h2{
  font-size:13.5px; font-weight:600; padding:12px 16px;
  border-bottom:1px solid var(--rule); background:var(--surface-2);
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
}
.panel > h2 .hint{font-weight:400; color:var(--ink-3); font-size:12px}
.panel .body{padding:16px}
.panel .body.tight{padding:0}
.empty{padding:26px 16px; text-align:center; color:var(--ink-3); font-size:13.5px}

/* --- tables --- */
.tw{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:13.5px}
th{
  text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); font-weight:400;
  padding:9px 14px; border-bottom:1px solid var(--rule-strong);
  background:var(--surface-2); white-space:nowrap; position:sticky; top:0;
}
td{padding:10px 14px; border-bottom:1px solid var(--rule); vertical-align:top; color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
td.k{color:var(--ink); font-weight:500}
td.num{font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right}
td .sub{display:block; color:var(--ink-3); font-size:12px; margin-top:2px}
td .mono{font-family:var(--mono); font-size:12.5px}

/* --- chips --- */
.chip{
  display:inline-block; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.09em; text-transform:uppercase; padding:2.5px 7px;
  border-radius:2px; white-space:nowrap; border:1px solid transparent;
  font-weight:500;
}
.chip.ok{color:var(--ok); background:var(--ok-wash); border-color:color-mix(in srgb,var(--ok) 26%,transparent)}
.chip.warn{color:var(--warn); background:var(--warn-wash); border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.chip.bad{color:var(--bad); background:var(--bad-wash); border-color:color-mix(in srgb,var(--bad) 28%,transparent)}
.chip.mute{color:var(--ink-3); background:var(--mute-wash); border-color:var(--rule)}
.chip.accent{color:var(--accent); background:var(--accent-wash); border-color:color-mix(in srgb,var(--accent) 26%,transparent)}

/* --- score --- */
.scoreblock{display:flex; gap:18px; align-items:stretch; flex-wrap:wrap}
.scorebox{
  min-width:132px; padding:16px 20px; border-radius:4px; text-align:center;
  border:1px solid transparent;
}
.scorebox.ok{background:var(--ok-wash); border-color:color-mix(in srgb,var(--ok) 26%,transparent)}
.scorebox.warn{background:var(--warn-wash); border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.scorebox.bad{background:var(--bad-wash); border-color:color-mix(in srgb,var(--bad) 28%,transparent)}
.scorebox .n{font-size:46px; font-weight:600; letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums}
.scorebox.ok .n{color:var(--ok)} .scorebox.warn .n{color:var(--warn)} .scorebox.bad .n{color:var(--bad)}
.scorebox .b{font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; margin-top:6px; font-weight:500}
.scorebox.ok .b{color:var(--ok)} .scorebox.warn .b{color:var(--warn)} .scorebox.bad .b{color:var(--bad)}
.scoremeta{flex:1; min-width:240px; display:flex; flex-direction:column; gap:5px; justify-content:center}
.scoremeta .line{font-size:13.5px; color:var(--ink-2)}
.scoremeta .line b{color:var(--ink); font-weight:600}

/* --- bar --- */
.bar{height:6px; background:var(--surface-2); border-radius:3px; overflow:hidden; display:flex}
.bar span{display:block; height:100%}
.bar .s-ok{background:var(--ok)} .bar .s-warn{background:var(--warn)} .bar .s-bad{background:var(--bad)}

/* --- spark --- */
.spark{display:flex; align-items:flex-end; gap:3px; height:34px; max-width:250px}
.spark i{
  flex:1; min-width:5px; max-width:18px; background:var(--accent-wash); border-top:2px solid var(--accent);
  display:block; border-radius:1px 1px 0 0;
}
.spark i.bad{background:var(--bad-wash); border-top-color:var(--bad)}
.spark i.warn{background:var(--warn-wash); border-top-color:var(--warn)}
.spark i.ok{background:var(--ok-wash); border-top-color:var(--ok)}

/* --- forms and buttons --- */
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px;
  border-radius:3px; border:1px solid var(--rule-strong); background:var(--surface);
  color:var(--ink); font-family:var(--sans); font-size:13.5px; font-weight:500;
  cursor:pointer; text-decoration:none;
}
.btn:hover{background:var(--surface-2); text-decoration:none}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-2); border-color:var(--accent-2)}
input[type=text], input[type=search], input[type=file], select{
  padding:7px 11px; border:1px solid var(--rule-strong); border-radius:3px;
  background:var(--surface); color:var(--ink); font-family:var(--sans); font-size:13.5px;
}
input[type=search]{min-width:260px}
form.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
label.field{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--ink-3)}

/* --- notices --- */
.notice{
  padding:12px 15px; border-radius:3px; font-size:13.5px; margin-bottom:16px;
  border:1px solid transparent; border-left-width:3px;
}
.notice.info{background:var(--accent-wash); border-color:color-mix(in srgb,var(--accent) 26%,transparent); border-left-color:var(--accent)}
.notice.warn{background:var(--warn-wash); border-color:color-mix(in srgb,var(--warn) 28%,transparent); border-left-color:var(--warn); color:var(--ink-2)}
.notice.bad{background:var(--bad-wash); border-color:color-mix(in srgb,var(--bad) 28%,transparent); border-left-color:var(--bad)}
.notice b{color:var(--ink)}

/* --- key/value --- */
.kv{display:grid; grid-template-columns:auto 1fr; gap:0}
.kv dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding:8px 18px 8px 0; border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
.kv dd{margin:0; padding:8px 0; border-bottom:1px solid var(--rule); font-size:13.5px}
.kv dt:last-of-type, .kv dd:last-of-type{border-bottom:0}

/* --- findings --- */
.finding{border-bottom:1px solid var(--rule); padding:14px 16px}
.finding:last-child{border-bottom:0}
.finding .head{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.finding .head .t{font-weight:600; color:var(--ink); font-size:14px}
.finding .obs{margin-top:5px; font-size:13.5px}
.finding .why{margin-top:5px; font-size:13px; color:var(--ink-3)}
.finding .fix{
  margin-top:7px; font-size:13px; padding:9px 12px; background:var(--accent-wash);
  border-radius:3px; border-left:2px solid var(--accent);
}
.finding .fix b{color:var(--accent); font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:2px}
.thresh{font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}

footer{
  max-width:1240px; margin:0 auto; padding:18px 22px 50px; color:var(--ink-3);
  font-size:12px; border-top:1px solid var(--rule);
}

/* The logo artwork is brand blue #005D7F on transparent, which disappears
   against the dark header. Brightening keeps the brand hue rather than
   flattening it to white. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand img{filter:brightness(1.9) saturate(1.15)}
}
:root[data-theme="dark"] .brand img{filter:brightness(1.9) saturate(1.15)}

/* --- sign-in and public pages --- */
.solo{min-height:100vh; display:grid; place-items:center; padding:30px}
.solobox{width:100%; max-width:420px}
.solobox .brandmark{display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:26px}
.solobox .brandmark img{height:46px; width:auto}
.solobox .brandmark .n{font-weight:600; font-size:19px; letter-spacing:-.01em}
.solobox .brandmark .n span{color:var(--ink-3); font-weight:400; font-size:14px}
.wide{max-width:620px}
label.f{display:block; margin-bottom:15px}
label.f .l{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:5px}
label.f .h{display:block; font-size:12.5px; color:var(--ink-3); margin-top:4px}
input[type=password], input[type=date]{
  width:100%; padding:10px 12px; border:1px solid var(--rule-strong); border-radius:3px;
  background:var(--surface); color:var(--ink); font-family:var(--sans); font-size:14.5px;
}
label.f input[type=text]{width:100%}
.btn.block{width:100%; justify-content:center; padding:12px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
@media (max-width:620px){.grid2{grid-template-columns:1fr}}
.roles{display:flex; gap:8px; flex-wrap:wrap}
.dl{
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  padding:18px; border:1px solid var(--rule); border-radius:5px;
  background:var(--surface-2); margin:16px 0;
}
.dl .meta{flex:1; min-width:190px; font-size:13px; color:var(--ink-3)}
.dl .meta b{color:var(--ink); font-size:15px; display:block; font-family:var(--mono)}
ol.steps-num{margin:0; padding-left:1.3em; font-size:14px; color:var(--ink-2)}
ol.steps-num li{margin-bottom:9px}
ol.steps-num li::marker{color:var(--accent); font-weight:600}