/* ══════════════════════════════════════════════════════════════════
   CloudGuard — application shell and components.

   Layer 1 (brand tokens) lives in tokens.css and is shared verbatim with
   m365-guardian. Nothing here invents a colour: every value resolves to a
   token, which is what makes the two products look like one house.

   Two consequences of that system worth stating, because they are easy to
   undo by accident:

   · There is no green. Every escalation runs the same ramp — yellow, orange,
     red — and blue is reserved for "came from somewhere else". A green
     "healthy" state would read as a fifth signal nobody defined.

   · Colour never carries meaning alone. The ramp is more robust under colour
     vision deficiency than red-versus-green, but only just, so every signal
     on screen ships with a glyph and a word as well. On the topology diagram
     role is carried by shape and a written label, and link kind by line style.
   ══════════════════════════════════════════════════════════════════ */

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
  --font-display: 'Franie', 'Franie Variable', 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Aptos', 'Aptos Display', 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'Geist Mono Variable', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 600;
}
p, ul, ol { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

.tabular { font-variant-numeric: tabular-nums; }

/* The title shape: a short mono accent line above a display-face heading. */
.kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: hsl(var(--signal-ok-ink));
  margin-bottom: 10px;
}

.t-label   { font-size: 11px; color: hsl(var(--muted-foreground)); }
.t-ui      { font-size: 12.5px; }
.t-title   { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.t-section { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.t-page    { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.mono      { font-family: var(--font-mono); }
.muted     { color: hsl(var(--muted-foreground)); }

/* Big numbers are font-light: scale carries the emphasis, weight would shout. */
.t-readout {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ── Shell ── */
.topnav {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  padding: 10px 16px;
  border-bottom: 1px solid hsl(var(--border) / 0.08);
  background: hsl(var(--background));
}
.topnav > * { min-width: 0; }
.topnav-end { min-width: max-content; display: flex; align-items: center; gap: 12px; }
@media (min-width: 640px) { .topnav { padding-left: 22px; padding-right: 22px; } }

.brand { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.brand em { font-style: normal; color: hsl(var(--signal-ok-ink)); }
.spacer { flex: 1; }

.wrap { max-width: 1180px; margin: 0 auto; padding: var(--gutter-lg) 16px 64px; }
@media (min-width: 640px) { .wrap { padding-left: 22px; padding-right: 22px; } }

.lede { color: hsl(var(--muted-foreground)); font-size: 13px; max-width: 74ch; margin-top: 6px; }

/* ── Cards ── */
.glass {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.09);
  border-radius: var(--r-lg);
  padding: 22px;
  color: hsl(var(--card-foreground));
  margin-bottom: var(--gutter);
  min-width: 0;
}

/* ── Readout tiles ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: var(--gutter); margin-bottom: var(--gutter); }
.tile {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.09);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  min-width: 0;
}
.tile .k { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 4px; }
.tile .note { font-size: 11px; color: hsl(var(--signal-watch-ink)); margin-top: 6px; }

/* ── Chips: the one signal vocabulary, shared with Guardian ── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  background: hsl(var(--foreground) / 0.07);
  color: hsl(var(--muted-foreground));
}
.chip-ok    { background: hsl(var(--signal-ok) / 0.15);    color: hsl(var(--signal-ok-ink)); }
.chip-watch { background: hsl(var(--signal-watch) / 0.15); color: hsl(var(--signal-watch-ink)); }
.chip-risk  { background: hsl(var(--signal-risk) / 0.15);  color: hsl(var(--signal-risk-ink)); }
.chip-data  { background: hsl(var(--signal-data) / 0.15);  color: hsl(var(--signal-data-ink)); }
/* An absence of a result is not a result: it gets a shape, not a fifth colour. */
.chip-none  { background: transparent; border: 1px dashed hsl(var(--border) / 0.3); color: hsl(var(--muted-foreground)); }
.chip .gl { font-family: var(--font-mono); font-size: 10px; font-weight: 600; }

/* The theme toggle is a control, so it gets a control's hit area rather than a
   chip's padding — a 20px tap target is a defect on a phone. */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-md);
  border: 1px solid hsl(var(--border) / 0.12);
  background: transparent; color: hsl(var(--muted-foreground));
  font-size: 14px; line-height: 1;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.btn-icon:hover { border-color: hsl(var(--border) / 0.26); color: hsl(var(--foreground)); }

/* ── Observations ── */
.obs { border-top: 1px solid hsl(var(--border) / 0.08); padding: 15px 0; }
.obs:first-of-type { border-top: 0; padding-top: 0; }
.obs-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.obs p { margin-top: 7px; color: hsl(var(--muted-foreground)); font-size: 12.5px; max-width: 78ch; }
.refs { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.ref {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border) / 0.1);
  border-radius: var(--r-sm);
  padding: 2px 7px;
  overflow-wrap: anywhere;
}

/* ── Verdict ── */
.verdict { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.reasons { color: hsl(var(--muted-foreground)); font-size: 12.5px; }
.reasons li { position: relative; padding-left: 16px; margin: 6px 0; max-width: 78ch; }
.reasons li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: hsl(var(--signal-ok-ink)); }

/* ── Banners: one accent per component, as a left bar ── */
.banner {
  border-left: 3px solid hsl(var(--signal-watch));
  background: hsl(var(--card));
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: 14px 18px;
  margin-bottom: var(--gutter);
}
.banner-risk { border-left-color: hsl(var(--signal-risk)); }
.banner p { color: hsl(var(--muted-foreground)); font-size: 12.5px; margin-top: 3px; max-width: 78ch; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 600;
  font-size: 12.5px;
  padding: 9px 16px;
  border-radius: var(--r-md);
  transition: filter 0.16s var(--ease);
}
.btn:hover { filter: brightness(1.06); }
.btn-quiet {
  background: transparent;
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border) / 0.14);
}

/* ── Tables ── */
.t-scroll { overflow-x: auto; margin-top: 16px; -webkit-overflow-scrolling: touch; }
table { font-size: 12.5px; min-width: 540px; }
th {
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  padding: 0 18px 9px 0;
  border-bottom: 1px solid hsl(var(--border) / 0.1);
}
td { padding: 11px 18px 11px 0; border-bottom: 1px solid hsl(var(--border) / 0.06); vertical-align: top; }
tr:last-child td { border-bottom: 0; }

/* ── Topology ──
   Role is shape and a written label; status is the signal ramp with a glyph;
   link kind is line style. Nothing here reads by hue alone. */
.topo { width: 100%; height: auto; display: block; }
.topo text { font-family: var(--font-sans); fill: hsl(var(--foreground)); }
.topo .lbl { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; }
.topo .sub-lbl { font-size: 10.5px; fill: hsl(var(--muted-foreground)); }
.topo .chip-txt { font-family: var(--font-mono); font-size: 9.5px; fill: hsl(var(--muted-foreground)); letter-spacing: 0.06em; }
.topo .node-box { fill: hsl(var(--card)); stroke: hsl(var(--border) / 0.16); stroke-width: 1.5; }
.topo .node-hub { stroke: hsl(var(--signal-ok-ink)); stroke-width: 2.5; }
.topo .edge { stroke: hsl(var(--border) / 0.28); stroke-width: 2; fill: none; }
.topo .edge-lateral { stroke: hsl(var(--signal-watch-ink)); stroke-width: 2.5; }
.topo .edge-external { stroke: hsl(var(--border) / 0.3); stroke-width: 2; stroke-dasharray: 6 4; }
.topo .edge-broken { stroke: hsl(var(--signal-risk-ink)); stroke-width: 2.5; stroke-dasharray: 3 3; }

.legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; padding-top: 16px; border-top: 1px solid hsl(var(--border) / 0.08); }
.legend .it { display: flex; align-items: center; gap: 8px; font-size: 11px; color: hsl(var(--muted-foreground)); }
.legend svg { flex: none; }

/* Nothing may exceed the viewport: a horizontal scrollbar on the document is
   always a layout bug, never a feature. */
.glass, .tile, .obs { min-width: 0; }

@media (max-width: 720px) {
  .tiles { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }
  .t-readout { font-size: 28px; }
  .glass { padding: 18px; }
}