/* ============================================================================
   SemperWise Client Portal — portal.css
   Always Wise. Always Ahead.
   ----------------------------------------------------------------------------
   The SemperWise design system: the component vocabulary and shell of the
   RunVAPT security console, re-tuned to the brand palette published on
   semperwise.com so the portal and the marketing site read as one company.

   Palette source: public_website_new/assets/css/site.css
       navy-900 #050b1a · teal #17b8c4 · cyan #3fd8e8 · gold #d99a1e

   LIGHT is the default theme. Dark is opt-in via :root[data-theme="dark"] and
   every colour is a token, so a value only ever has to be changed in one place.
   No framework, no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typography + metrics
   -------------------------------------------------------------------------- */
:root {
  /* Emoji families terminate every stack: neither Inter nor Space Grotesk
     carries emoji, and the icon fallbacks would render as tofu without them. */
  --emoji: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Noto Emoji", Symbola;
  --font-body:    "Inter", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif, var(--emoji);
  --font-display: "Space Grotesk", "Inter", "Segoe UI", system-ui, sans-serif, var(--emoji);
  --font-mono:    "JetBrains Mono", "Space Grotesk", ui-monospace, Consolas, monospace, var(--emoji);

  --r-sm: 6px;  --r: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-pill: 999px;
  --topbar-h: 64px;  --side-w: 268px;  --side-w-min: 72px;
  --container: 1440px;  --gutter: 24px;
  --ease: cubic-bezier(0.22, 0.68, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Light theme (default)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --bg:        #eef2f8;   /* page ground   */
  --bg2:       #ffffff;   /* sidebar / top bar */
  --panel:     #ffffff;   /* card surface  */
  --panel2:    #f4f7fb;   /* inset surface */
  --panel3:    #e9eff7;   /* deepest inset */
  --line:      #dbe3ee;
  --line2:     #c3cfe0;

  --txt:       #0d1b3e;   /* --ink on the marketing site */
  --mut:       #5f6f8c;   /* --muted                     */
  --mut2:      #7c8aa5;

  --acc:       #0f8d99;   /* teal, darkened for AA contrast on white */
  --acc2:      #17b8c4;   /* brand teal                              */
  --acc3:      #3fd8e8;   /* brand cyan                              */
  --acc-soft:  #ddf4f7;
  --acc-ink:   #0a6b74;
  --on-acc:    #ffffff;
  --gold:      #b87d0f;   /* brand gold, darkened for light backgrounds */
  --gold-soft: #fdf3dd;

  --crit: #c62828;  --high: #dd6100;  --med: #a8730a;  --low: #1e7f45;  --info: #5f6f8c;
  --ok:   #1e7f45;  --warn: #a8730a;  --err: #c62828;
  --ok-soft: #e3f6ea;  --warn-soft: #fdf2dc;  --err-soft: #fdeaea;  --info-soft: #eef2f8;

  --code-bg: #f5f8fc;  --code-txt: #1d2b38;
  --bar-bg:  #dfe7f1;  --ring-track: #e2eaf3;
  --head:    #0a4e63;

  --shadow:  rgba(13, 27, 62, 0.08);
  --shadow2: rgba(13, 27, 62, 0.18);
  --glass:   rgba(255, 255, 255, 0.80);
  --glow:    0 0 0 1px rgba(23, 184, 196, 0.12), 0 12px 34px -14px rgba(13, 27, 62, 0.28);
  --scrim:   rgba(5, 11, 26, 0.52);
  --hi:      rgba(23, 184, 196, 0.06);
  --grad:    linear-gradient(120deg, var(--acc2), var(--acc3));
}

/* --------------------------------------------------------------------------
   3. Dark theme
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:      #050b1a;   /* --navy-900, identical to the marketing site */
  --bg2:     #071125;   /* --navy-850 */
  --panel:   #0a1730;   /* --navy-800 */
  --panel2:  #0e1d3a;
  --panel3:  #071228;
  --line:    rgba(120, 170, 220, 0.16);
  --line2:   rgba(120, 170, 220, 0.30);

  --txt:     #eaf1fb;   /* --on-dark      */
  --mut:     #9db0cd;   /* --on-dark-soft */
  --mut2:    #7f93b3;

  --acc:      #3fd8e8;
  --acc2:     #17b8c4;
  --acc3:     #6fe6f2;
  --acc-soft: rgba(63, 216, 232, 0.14);
  --acc-ink:  #a9eef6;
  --on-acc:   #04222c;
  --gold:     #d99a1e;
  --gold-soft: rgba(217, 154, 30, 0.14);

  --crit: #ff5f5f;  --high: #ff9147;  --med: #ffc043;  --low: #35e08a;  --info: #8ea3c0;
  --ok:   #35e08a;  --warn: #ffc043;  --err: #ff5f5f;
  --ok-soft: rgba(53, 224, 138, 0.13);  --warn-soft: rgba(255, 192, 67, 0.13);
  --err-soft: rgba(255, 95, 95, 0.13);  --info-soft: rgba(142, 163, 192, 0.13);

  --code-bg: #040a16;  --code-txt: #cbd8ea;
  --bar-bg:  #12233f;  --ring-track: #17294a;
  --head:    #a9d8e6;

  --shadow:  rgba(0, 0, 0, 0.55);
  --shadow2: rgba(0, 0, 0, 0.72);
  --glass:   rgba(10, 23, 48, 0.74);
  --glow:    0 0 22px rgba(63, 216, 232, 0.12);
  --scrim:   rgba(2, 6, 15, 0.76);
  --hi:      rgba(63, 216, 232, 0.06);
}

/* --------------------------------------------------------------------------
   4. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .display { font-family: var(--font-display); letter-spacing: -0.015em; }
/* `:not(.btn)` matters. `:root[data-theme="dark"] a` has specificity (0,2,1),
   which beats `.btn` (0,1,0) — without the exclusion every button rendered as
   an anchor took the link colour in dark mode, painting cyan text on a cyan
   button. Excluding is safer than inflating .btn's specificity, which would
   then have to be out-specified again by every .btn-* modifier. */
a:not(.btn) { color: var(--acc-ink); text-decoration: none; }
a:not(.btn):hover { color: var(--acc); }
:root[data-theme="dark"] a:not(.btn) { color: var(--acc); }
a.btn { text-decoration: none; }

::selection { background: var(--acc-soft); color: var(--txt); }
:focus-visible { outline: 2px solid var(--acc2); outline-offset: 2px; border-radius: var(--r-sm); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line2); border-radius: var(--r-pill);
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--mut2); background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }

/* --------------------------------------------------------------------------
   5. Material Symbols, with an emoji fallback
   --------------------------------------------------------------------------
   The page STARTS in the fallback state (html.msym-wait, set before first
   paint) and switches to real icons only once the font is confirmed loaded.
   Done the other way round, every icon flashes its literal ligature word
   ("dashboard", "settings") on a slow connection, and stays that way forever
   on a host that cannot reach Google Fonts.
   -------------------------------------------------------------------------- */
.msym {
  font-family: "Material Symbols Outlined";
  font-weight: 400; font-style: normal; font-size: 20px; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased; user-select: none;
  flex: 0 0 auto; vertical-align: middle;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.msym.fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.msym.xs { font-size: 15px; } .msym.sm { font-size: 17px; }
.msym.lg { font-size: 26px; } .msym.xl { font-size: 34px; }

html.msym-wait .msym, html.no-msym .msym { font-family: var(--font-body); font-size: 0 !important; }
html.msym-wait .msym::after, html.no-msym .msym::after {
  content: attr(data-fb); font-size: 15px; line-height: 1;
}
html.msym-wait .msym.xs::after, html.no-msym .msym.xs::after { font-size: 12px; }
html.msym-wait .msym.lg::after, html.no-msym .msym.lg::after,
html.msym-wait .msym.xl::after, html.no-msym .msym.xl::after { font-size: 24px; }

/* --------------------------------------------------------------------------
   6. App shell
   -------------------------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }

.side {
  width: var(--side-w); flex: 0 0 auto;
  background: var(--bg2); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; z-index: 20;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px 16px; border-bottom: 1px solid var(--line);
}
/* The shield mark is a full-bleed image with its own artwork, so it needs no
   gradient plate behind it — that only muddied the emblem. The gradient is kept
   for the icon-only fallback used where no image is available. */
.brand-mark {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: #04222c; overflow: hidden;
}
.brand-mark:has(img) { background: none; box-shadow: none; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-text { min-width: 0; line-height: 1.15; }
.brand-word {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  color: var(--txt); display: block; letter-spacing: -0.02em;
}
.brand-word em { font-style: normal; color: var(--acc); }
.brand-sub {
  display: block; font-size: 11px; color: var(--mut);
  font-weight: 500; margin-top: 2px; white-space: nowrap;
}

.nav { flex: 1; padding: 12px 10px; overflow-y: auto; }
.nav-head {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--mut2); padding: 12px 12px 6px;
}
.nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r); margin: 2px 0;
  color: var(--mut); font-weight: 600; font-size: 13.5px;
  position: relative; transition: background .16s var(--ease), color .16s var(--ease);
}
.nav a:hover { background: var(--panel2); color: var(--txt); }
.nav a.on { background: var(--acc-soft); color: var(--acc-ink); font-weight: 700; }
.nav a.on::before {
  content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--acc2);
}
:root[data-theme="dark"] .nav a.on { color: var(--acc); }
.nav a .count {
  margin-left: auto; font-size: 10.5px; font-weight: 700;
  background: var(--panel3); color: var(--mut);
  border-radius: var(--r-pill); padding: 1px 8px; min-width: 22px; text-align: center;
}
.nav a.on .count { background: var(--acc2); color: var(--on-acc); }
.nav a .count.alert { background: var(--err); color: #fff; }

.side-foot { padding: 10px; border-top: 1px solid var(--line); }
.side-foot a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border-radius: var(--r); font-size: 12.5px; color: var(--mut); font-weight: 600;
}
.side-foot a:hover { background: var(--panel2); color: var(--txt); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 10px;
  height: var(--topbar-h); padding: 0 24px;
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 15;
}
.topbar .spacer { flex: 1; }
.topbar h1 {
  margin: 0; font-size: 16px; font-weight: 600; white-space: nowrap;
}
.crumb { color: var(--mut); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.crumb::before { content: "/"; margin-right: 8px; opacity: .45; }

.view { padding: 26px 24px 64px; max-width: var(--container); width: 100%; }

/* Page header: title, one-line purpose, primary actions. */
.pagehead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; padding: 26px 24px 0;
  max-width: var(--container); width: 100%;
}
.pagehead + .view { padding-top: 20px; }
.pagehead h1 {
  margin: 0; font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: -0.025em;
}
.pagehead .lede { margin: 6px 0 0; color: var(--mut); font-size: 14.5px; max-width: 760px; }
.pagehead .actions { display: flex; gap: 9px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   7. Cards + surfaces
   -------------------------------------------------------------------------- */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px;
  margin-bottom: var(--gutter);
  box-shadow: 0 1px 2px var(--shadow); position: relative;
}
.card > h2, .card > h3 {
  margin: 0 0 16px; font-family: var(--font-body);
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--head);
  display: flex; align-items: center; gap: 9px;
}
.card > h3 .msym { font-size: 17px; color: var(--acc); }
.card.rail { overflow: hidden; }
.card.rail::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--acc2);
}
.card.rail-ok::before   { background: var(--ok); }
.card.rail-warn::before { background: var(--warn); }
.card.rail-err::before  { background: var(--err); }
.card.flush { padding: 0; }
.card.flush > h3 { padding: 18px 20px; margin: 0; border-bottom: 1px solid var(--line); }

.grid   { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.split  { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gutter); align-items: start; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }

/* A grid item defaults to min-width:auto, which means it refuses to shrink
   below the intrinsic width of its content. A card holding a wide table
   therefore blew the column out to ~690px on a 390px phone and took the whole
   page into horizontal scroll — even though .table-wrap was ready to scroll on
   its own. Letting the items shrink is what lets the table scroll instead of
   the page. */
.split > *, .grid > *, .tiles > * { min-width: 0; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   8. Stat tiles + rings
   -------------------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; }
.tile {
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px 16px; text-align: center;
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.tile .n {
  font-family: var(--font-display); font-size: 30px; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.1;
}
.tile .l {
  font-size: 10.5px; color: var(--mut); margin-top: 6px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
}
.tile .sub { font-size: 11px; color: var(--mut2); margin-top: 3px; }
.tile.t-crit .n { color: var(--crit); }  .tile.t-high .n { color: var(--high); }
.tile.t-med  .n { color: var(--med); }   .tile.t-low  .n { color: var(--low); }
.tile.t-ok   .n { color: var(--ok); }    .tile.t-warn .n { color: var(--warn); }
.tile.t-err  .n { color: var(--err); }   .tile.t-acc  .n { color: var(--acc); }
a.tile { display: block; color: inherit; }
a.tile:hover { border-color: var(--acc2); transform: translateY(-2px); box-shadow: 0 10px 24px -14px var(--shadow2); }

.ring { position: relative; width: 88px; height: 88px; flex: 0 0 auto; }
.ring svg { width: 100%; height: 100%; display: block; }
.ring .rt { stroke: var(--ring-track); }
.ring .rc {
  stroke: var(--acc2); transition: stroke-dashoffset .6s var(--ease);
  transform: rotate(-90deg); transform-origin: 50% 50%;
}
.ring.ok .rc { stroke: var(--ok); } .ring.warn .rc { stroke: var(--warn); } .ring.err .rc { stroke: var(--err); }
.ring .rv {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
}
.ring.ok .rv { color: var(--ok); } .ring.warn .rv { color: var(--warn); } .ring.err .rv { color: var(--err); }

.ringcard { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ringcard h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  margin: 0; text-transform: none; letter-spacing: -0.01em; color: var(--txt);
}
.ringcard p { margin: 5px 0 0; font-size: 12.5px; color: var(--mut); line-height: 1.5; }
.ringstats { display: flex; gap: 26px; margin-top: 18px; flex-wrap: wrap; }
.ringstats .k {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--mut); font-weight: 700;
}
.ringstats .v { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 600; margin-top: 3px; }

/* --------------------------------------------------------------------------
   9. Buttons
   -------------------------------------------------------------------------- */
/* One selector for the base, so every modifier below (.btn-sec, .btn-ghost, …)
   wins on specificity. Writing this as `.btn, a.btn` would make the base rule
   (0,1,1) out-specify `.btn-ghost` (0,1,0) and every ghost link would render as
   a solid primary button. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r); border: 1px solid transparent;
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.35;
  cursor: pointer; transition: .16s var(--ease); text-decoration: none;
  background: var(--acc); color: var(--on-acc);
}
.btn:hover { filter: brightness(1.07); box-shadow: 0 6px 16px -8px var(--shadow2); color: var(--on-acc); }
.btn:active { transform: translateY(1px); }
.btn .msym { font-size: 18px; }
.btn-sec {
  background: var(--panel); color: var(--txt); border-color: var(--line2);
}
.btn-sec:hover { background: var(--panel2); border-color: var(--acc2); color: var(--acc-ink); filter: none; }
:root[data-theme="dark"] .btn-sec:hover { color: var(--acc); }
.btn-ghost { background: transparent; color: var(--mut); border-color: transparent; }
.btn-ghost:hover { background: var(--panel2); color: var(--txt); filter: none; box-shadow: none; }
.btn-danger { background: var(--err); color: #fff; }
.btn-ok     { background: var(--ok);  color: #fff; }
.btn-gold   { background: var(--gold); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn-sm .msym { font-size: 15px; }
.btn-lg { padding: 14px 26px; font-size: 15px; }
.btn-block { width: 100%; }
.btn:disabled, .btn.is-disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: var(--r);
  background: transparent; border: 1px solid transparent; color: var(--mut);
  cursor: pointer; transition: .16s var(--ease);
}
.iconbtn:hover { background: var(--panel2); color: var(--txt); border-color: var(--line); }
.iconbtn.on { background: var(--acc-soft); color: var(--acc-ink); border-color: var(--acc2); }

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: 18px; }
.field > label, .label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--txt); margin-bottom: 7px;
}
.field .req { color: var(--err); font-weight: 700; }
.field .hint { font-size: 12px; color: var(--mut); margin-top: 6px; line-height: 1.5; }
.field .err { font-size: 12px; color: var(--err); margin-top: 6px; font-weight: 600; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="url"], input[type="number"], input[type="date"], input[type="search"],
select, textarea {
  width: 100%; padding: 11px 13px;
  background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r);
  color: var(--txt); font-size: 14px; font-family: inherit;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--mut2); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acc2); box-shadow: 0 0 0 3px var(--acc-soft);
}
input::placeholder, textarea::placeholder { color: var(--mut2); opacity: .8; }
textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--err); }

select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mut) 50%),
    linear-gradient(135deg, var(--mut) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 36px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--acc2); width: auto; }

.check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.check input { margin-top: 3px; flex: 0 0 auto; }
.check label { font-size: 13.5px; font-weight: 500; color: var(--txt); margin: 0; line-height: 1.55; }
.check .hint { margin-top: 3px; }

/* Selectable option card — plans, scan types, framework picker. */
.optcard {
  display: block; position: relative; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px; background: var(--panel2);
  transition: .18s var(--ease);
}
.optcard:hover { border-color: var(--acc2); transform: translateY(-2px); }
.optcard input { position: absolute; opacity: 0; pointer-events: none; }
.optcard .t { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 10px 0 5px; }
.optcard .d { font-size: 13px; color: var(--mut); line-height: 1.55; }
.optcard .msym { color: var(--acc); }
.optcard:has(input:checked) {
  border-color: var(--acc2); background: var(--acc-soft);
  box-shadow: 0 0 0 1px var(--acc2), var(--glow);
}
.optcard:has(input:checked)::after {
  content: ""; position: absolute; top: 14px; right: 14px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--acc2);
  box-shadow: inset 0 0 0 3px var(--panel);
}

fieldset { border: none; margin: 0 0 8px; padding: 0; }
legend {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--mut); padding: 0; margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   11. Tables
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--mut); background: var(--panel2);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--hi); }
td.mono, .mono { font-family: var(--font-mono); font-size: 12.5px; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-empty { padding: 44px 20px; text-align: center; color: var(--mut); }
.table-empty .msym { display: block; font-size: 38px; opacity: .35; margin: 0 auto 12px; }

/* --------------------------------------------------------------------------
   12. Pills, badges, chips
   -------------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 3px 11px;
  border-radius: var(--r-pill); background: var(--panel3); color: var(--mut);
  white-space: nowrap;
}
.pill.s-ok, .pill.s-done   { background: var(--ok-soft);   color: var(--ok); }
.pill.s-run, .pill.s-queued{ background: var(--acc-soft);  color: var(--acc-ink); }
.pill.s-wait, .pill.s-warn { background: var(--warn-soft); color: var(--warn); }
.pill.s-err                { background: var(--err-soft);  color: var(--err); }
.pill.s-idle               { background: var(--info-soft); color: var(--mut); }
:root[data-theme="dark"] .pill.s-run, :root[data-theme="dark"] .pill.s-queued { color: var(--acc); }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-sm);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; color: #fff;
}
.badge.b-crit { background: var(--crit); }
.badge.b-high { background: var(--high); }
.badge.b-med  { background: var(--med); }
.badge.b-low  { background: var(--low); }
.badge.b-info { background: var(--info); }
/* The dark palette brightens every severity colour so it reads against a navy
   ground — which then makes white badge text fail contrast (High measured
   2.24:1). Bright fills need dark ink, so all severity badges flip together
   rather than only the two obvious ones. */
:root[data-theme="dark"] .badge { color: #06101f; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--panel2); border: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--mut);
}
.chip.accent { background: var(--acc-soft); border-color: var(--acc2); color: var(--acc-ink); }
.chip.gold   { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }

.eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--gold); margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   13. Alerts + notices
   -------------------------------------------------------------------------- */
.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--panel2);
  font-size: 13.5px; line-height: 1.6; margin-bottom: 18px;
  position: relative; overflow: hidden;
}
.alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mut); }
.alert .msym { flex: 0 0 auto; margin-top: 1px; }
.alert strong { display: block; margin-bottom: 2px; }
.alert.ok   { background: var(--ok-soft);   border-color: transparent; color: var(--txt); }
.alert.ok::before   { background: var(--ok); }   .alert.ok .msym   { color: var(--ok); }
.alert.warn { background: var(--warn-soft); border-color: transparent; }
.alert.warn::before { background: var(--warn); } .alert.warn .msym { color: var(--warn); }
.alert.err  { background: var(--err-soft);  border-color: transparent; }
.alert.err::before  { background: var(--err); }  .alert.err .msym  { color: var(--err); }
.alert.info { background: var(--acc-soft);  border-color: transparent; }
.alert.info::before { background: var(--acc2); } .alert.info .msym { color: var(--acc); }

/* Toasts, injected by app.js */
#toasts { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--panel); border: 1px solid var(--line2);
  border-left: 3px solid var(--acc2); padding: 13px 17px;
  border-radius: var(--r); font-size: 13.5px; max-width: 360px;
  box-shadow: 0 16px 36px -14px var(--shadow2); animation: slidein .2s var(--ease);
}
.toast.ok  { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--err); }
@keyframes slidein { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   14. Progress + meters
   -------------------------------------------------------------------------- */
.bar { height: 8px; background: var(--bar-bg); border-radius: var(--r-pill); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--grad); transition: width .45s var(--ease); }
.bar.ok > i   { background: var(--ok); }
.bar.warn > i { background: var(--warn); }
.bar.err > i  { background: var(--err); }

.sevbar { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--bar-bg); }
.sevbar > i { display: block; height: 100%; }
.sevbar > i.crit { background: var(--crit); } .sevbar > i.high { background: var(--high); }
.sevbar > i.med  { background: var(--med); }  .sevbar > i.low  { background: var(--low); }
.sevbar > i.info { background: var(--info); }

/* --------------------------------------------------------------------------
   15. Wizard (onboarding)
   -------------------------------------------------------------------------- */
.wizard-rail { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 26px; }
.wizard-rail .step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--panel2); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--mut);
  text-decoration: none; transition: .16s var(--ease);
}
.wizard-rail .step .n {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--line2); color: var(--txt);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.wizard-rail .step.on { background: var(--acc2); border-color: var(--acc2); color: var(--on-acc); font-weight: 700; }
.wizard-rail .step.on .n { background: rgba(255,255,255,.32); color: inherit; }
.wizard-rail .step.done { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.wizard-rail .step.done .n { background: var(--ok); color: #fff; }
.wizard-rail .sep { width: 14px; height: 1px; background: var(--line2); flex: 0 0 auto; }

.wizard-nav {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
}
.wizard-nav .spacer { flex: 1; }

/* Repeating rows (contacts, assets) added client-side. */
.repeat-row {
  display: grid; gap: 12px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel2); margin-bottom: 12px; position: relative;
}
.repeat-row .remove {
  position: absolute; top: 10px; right: 10px;
  background: none; border: none; color: var(--mut); cursor: pointer; padding: 4px;
  border-radius: var(--r-sm);
}
.repeat-row .remove:hover { color: var(--err); background: var(--err-soft); }

/* --------------------------------------------------------------------------
   16. Auth + public pages
   -------------------------------------------------------------------------- */
.auth-shell {
  min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } }

.auth-aside {
  background: var(--bg2); color: var(--txt);
  padding: 48px 44px; display: flex; flex-direction: column; justify-content: space-between;
  border-right: 1px solid var(--line);
}
:root[data-theme="dark"] .auth-aside { background: var(--panel); }
@media (max-width: 900px) { .auth-aside { display: none; } }
.auth-aside .headline {
  font-family: var(--font-display); font-size: 34px; line-height: 1.2;
  font-weight: 600; letter-spacing: -0.028em; margin: 0 0 16px;
}
.auth-aside .headline em { font-style: normal; color: var(--acc); }
.auth-aside .sub { color: var(--mut); font-size: 15px; line-height: 1.65; max-width: 460px; }
.auth-points { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.auth-points li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: var(--mut); }
.auth-points .msym { color: var(--acc); flex: 0 0 auto; }

.auth-main {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px; background: var(--bg);
}
.auth-card { width: 100%; max-width: 430px; }
.auth-card h1 { font-size: 26px; margin: 0 0 6px; font-weight: 600; }
.auth-card .lede { color: var(--mut); font-size: 14px; margin: 0 0 26px; }
.auth-foot { margin-top: 22px; font-size: 13.5px; color: var(--mut); text-align: center; }

/* --------------------------------------------------------------------------
   17. Modal
   -------------------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 80; padding: 24px;
  animation: fadein .16s var(--ease);
}
.modal .box {
  background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-lg);
  width: min(720px, 96vw); max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 34px 76px -22px var(--shadow2); animation: pop .18s var(--ease);
}
.modal .hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.modal .hd h2 { margin: 0; font-size: 17px; font-weight: 600; }
.modal .bd { padding: 22px; overflow-y: auto; }
.modal .ft { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   18. Detail lists, logs, misc
   -------------------------------------------------------------------------- */
.dl { display: grid; gap: 0; }
.dl .r {
  display: flex; align-items: baseline; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.dl .r:last-child { border-bottom: none; }
/* `flex: 0 1 190px` rather than `0 0 190px`: the same definition list is used in
   the wide main column and in the ~340px sidebar, and a fixed basis cannot
   shrink there — it pushed the row past the viewport. Both sides need
   min-width:0 or their content (a meter, a pill) sets an implicit floor. */
.dl .k { flex: 0 1 190px; min-width: 96px; color: var(--mut); font-weight: 600; font-size: 12.5px; }
.dl .v { flex: 1 1 auto; min-width: 0; word-break: break-word; text-align: right; }
.dl .v .bar, .dl .v .sevbar { min-width: 90px; }
@media (max-width: 640px) { .dl .r { flex-direction: column; gap: 3px; } .dl .k { flex: none; } }

pre.log {
  background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px; max-height: 420px; overflow: auto;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--code-txt);
  white-space: pre-wrap; line-height: 1.6; margin: 0;
}
code {
  font-family: var(--font-mono); background: var(--panel2);
  padding: 2px 6px; border-radius: var(--r-sm); font-size: 0.9em;
}

.muted { color: var(--mut); }
.small { font-size: 12.5px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.divider { height: 1px; background: var(--line); margin: 22px 0; border: none; }

.empty-state { text-align: center; padding: 56px 24px; color: var(--mut); }
.empty-state .msym { font-size: 44px; opacity: .3; display: block; margin: 0 auto 14px; }
.empty-state h3 { font-size: 17px; color: var(--txt); margin: 0 0 8px; font-weight: 600; }
.empty-state p { margin: 0 auto 20px; max-width: 420px; font-size: 14px; }

/* Trust strip — the commitments the marketing site makes, kept visible. */
.commitments { display: grid; gap: 10px; }
.commitments li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--mut); }
.commitments .msym { color: var(--ok); flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .side { width: var(--side-w-min); }
  .side .brand-text, .side .nav a span.lbl, .side .nav a .count,
  .side .nav-head, .side .side-foot a span.lbl { display: none; }
  .side .brand { justify-content: center; padding: 16px 0; }
  .nav a, .side-foot a { justify-content: center; padding: 12px 0; }
  .nav a.on::before { left: -8px; }
}
@media (max-width: 720px) {
  .view { padding: 18px 14px 56px; }
  .pagehead { padding: 20px 14px 0; }
  .pagehead h1 { font-size: 23px; }
  .topbar { padding: 0 12px; gap: 6px; }
  .topbar h1 { font-size: 15px; }
  .crumb { display: none; }
  .card { padding: 18px; }
  .dl .k { flex-basis: 130px; }
  /* The organisation name plus four controls do not fit a phone top bar, and
     the truncated result pushed the sign-out button off screen. The name is on
     the dashboard and in Settings, so the bar keeps the controls instead. */
  .topbar .chip:not(.gold) { display: none; }
}
@media (max-width: 560px) {
  /* Narrow the icon rail further — on a 390px screen the sidebar was taking
     nearly a fifth of the width before the content even started. */
  :root { --side-w-min: 56px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .ringcard { flex-direction: column-reverse; align-items: flex-start; }
  .ringstats { gap: 18px; }
  .view { padding: 16px 12px 48px; }
  .pagehead { padding: 18px 12px 0; }
  .card { padding: 16px; }
  .card.flush > h3 { padding: 15px 16px; }
  #toasts { left: 14px; right: 14px; bottom: 14px; }
  .toast { max-width: none; }
  /* Long identifiers (targets, references) must wrap rather than force a
     minimum width on their table cell. */
  td.mono, .mono { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .side, .topbar, .pagehead .actions, #toasts, .btn { display: none !important; }
  body { background: #fff; }
  .card { break-inside: avoid; box-shadow: none; border-color: #ccc; }
}