/* ============================================================
   FITZ GROUP — SHARED LIGHT THEME
   Used by the home hub and the UniFi Access tool. The DC Bus
   page keeps its own inline copy of these tokens for now.
   Every colour below clears WCAG AA (4.5:1) for text on --page.
   ============================================================ */
:root{
  /* surfaces */
  --page:#F4F7F9;        /* page background */
  --sheet:#FFFFFF;       /* drawing / input area */
  --panel:#FFFFFF;       /* card body */
  --panel2:#EDF2F6;      /* card header, table header */
  --panel3:#E1E9F0;      /* button fill */
  --rule:#C3D0DA;        /* borders */
  --rule-soft:#E4EBF1;   /* hairlines between rows */

  /* ink */
  --txt:#16232E;         /* primary          15.1:1 */
  --txt-dim:#455767;     /* secondary         8.0:1 */
  --txt-faint:#5E7284;   /* tertiary          5.0:1 */

  /* function colours */
  --ink:#0B5FA5;         /* structure, links  7.0:1 */
  --ink-tint:#E3EEF8;
  --ink-dark:#094B83;    /* pressed / hover */
  --on-ink:#FFFFFF;
  --bus:#A85F00;         /* amber accent      5.1:1 */
  --bus-tint:#FBF1DF;
  --hot:#B23A22;         /* red accent        5.7:1 */
  --hot-tint:#FAEDE9;
  --ok:#177A4C;          /* pass              4.8:1 */
  --ok-tint:#E9F5EF;
  --warn:#8A6100;        /* check             5.4:1 */
  --warn-tint:#FBF3DF;
  --fail:#B3252B;        /* fail              6.4:1 */
  --fail-tint:#FAEAEA;

  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--page); color:var(--txt);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ink)}
.num,td.num,th.num,.mono,code{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.wrap{max-width:1560px;margin:0 auto;padding:0 24px 80px}
header.top{
  border-bottom:2px solid var(--rule); margin-bottom:24px;
  padding:26px 0 18px; display:flex; flex-wrap:wrap; gap:20px;
  align-items:flex-end; justify-content:space-between;
}
.brandmark{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
h1{margin:0; font-size:23px; font-weight:650; letter-spacing:-.015em; color:var(--txt)}
h1 em{font-style:normal;color:var(--ink)}
.strap{font-size:14px;color:var(--txt-faint)}
.topmeta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- buttons ---------- */
button,.btn{
  background:var(--panel3);border:1px solid var(--rule);color:var(--txt);
  padding:8px 14px;font-size:14px;font-weight:500;cursor:pointer;border-radius:3px;
  font-family:var(--sans);text-decoration:none;display:inline-flex;align-items:center;gap:6px;
}
button:hover,.btn:hover{border-color:var(--ink);color:var(--ink);background:var(--ink-tint)}
button:focus-visible,.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
button.primary,.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--on-ink);font-weight:600}
button.primary:hover,.btn.primary:hover{background:var(--ink-dark);border-color:var(--ink-dark);color:var(--on-ink)}
button.ghost,.btn.ghost{background:var(--sheet)}
button.mini,.btn.mini{padding:3px 8px;font-size:13px}
button:disabled,.btn:disabled{opacity:.55;cursor:not-allowed}
button:disabled:hover,.btn:disabled:hover{border-color:var(--rule);color:var(--txt);background:var(--panel3)}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- fields ---------- */
.grid{display:grid;gap:14px 16px}
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
.f label{font-size:13px;color:var(--txt-dim);display:flex;justify-content:space-between;gap:8px}
.f label .u{color:var(--txt-faint)}
input,select,textarea{
  background:var(--sheet);border:1px solid var(--rule);color:var(--txt);
  padding:8px 10px;font-size:15px;font-family:var(--mono);width:100%;
  border-radius:3px;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--ink-tint)}
select{cursor:pointer;font-family:var(--sans)}
.hint{font-size:13.5px;color:var(--txt-dim);line-height:1.6}
.hint b{color:var(--txt);font-weight:600}

/* ---------- card ---------- */
section.card{background:var(--panel);border:1px solid var(--rule);margin-bottom:24px}
section.card > h2{
  margin:0;padding:13px 16px;font-size:15px;font-weight:650;color:var(--txt);
  border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;
  align-items:baseline;gap:12px;background:var(--panel2)
}
section.card > h2 .idx{color:var(--txt-faint);margin-right:10px;font-family:var(--mono);font-size:13px;font-weight:500}
section.card > h2 .note{font-size:13px;color:var(--txt-faint);font-weight:400}
.body{padding:16px}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:13px;color:var(--txt-dim);text-align:left;font-weight:600;padding:9px 10px;
   border-bottom:1px solid var(--rule);background:var(--panel2);white-space:nowrap}
td{padding:6px 10px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
tbody tr:hover td{background:var(--panel2)}
td.num,th.num{text-align:right}
.scrollx{overflow-x:auto}

/* ---------- status chrome ---------- */
.tag{display:inline-block;font-size:12.5px;font-weight:600;padding:2px 8px;
     border:1px solid currentColor;border-radius:3px;line-height:1.45;white-space:nowrap}
.tag.ok{color:var(--ok);background:var(--ok-tint)}
.tag.warn{color:var(--warn);background:var(--warn-tint)}
.tag.fail{color:var(--fail);background:var(--fail-tint)}
.tag.ink{color:var(--ink);background:var(--ink-tint)}
.tag.dim{color:var(--txt-faint);background:var(--panel2)}

.notice{
  border:1px solid var(--rule);background:var(--panel2);border-radius:3px;
  padding:12px 14px;font-size:14px;color:var(--txt-dim);line-height:1.6;
}
.notice.warn{border-color:#E7CF8E;background:var(--warn-tint);color:#5F4400}
.notice b{color:var(--txt);font-weight:650}

/* ============================================================
   HOME HUB — tool cards
   ============================================================ */
.hub-intro{font-size:15px;color:var(--txt-dim);margin:0 0 22px;max-width:640px}
.tool-grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.tool-card{
  display:flex;flex-direction:column;gap:12px;
  background:var(--panel);border:1px solid var(--rule);border-radius:6px;
  padding:22px;text-decoration:none;color:inherit;position:relative;
  transition:border-color .12s,box-shadow .12s,transform .12s;
}
.tool-card:not(.disabled):hover{
  border-color:var(--ink);box-shadow:0 4px 18px rgba(11,95,165,.10);
  transform:translateY(-2px);
}
.tool-card .ic{
  width:48px;height:48px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink-tint);color:var(--ink);
}
.tool-card .ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tool-card h3{margin:0;font-size:16px;font-weight:650;letter-spacing:-.01em;color:var(--txt)}
.tool-card p{margin:0;font-size:13.5px;color:var(--txt-dim);line-height:1.55}
.tool-card .go{margin-top:auto;font-size:13px;font-weight:600;color:var(--ink)}
.tool-card.disabled{opacity:.72;cursor:default}
.tool-card.disabled .ic{background:var(--panel2);color:var(--txt-faint)}
.tool-card .soon{
  position:absolute;top:16px;right:16px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--txt-faint);
  background:var(--panel2);border:1px solid var(--rule);border-radius:100px;padding:2px 9px;
}
footer.foot{border-top:1px solid var(--rule);margin-top:8px;padding:20px 0;
  font-size:12.5px;color:var(--txt-faint);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:8px}

@media(max-width:640px){.wrap{padding:0 16px 60px}}