/*
 * AndSecure (&Secure) styles — light theme.

 */

/* The [hidden] attribute must always win — several components set display via a
 * class (e.g. .assign-person { display:flex }) which otherwise ties on
 * specificity with the UA [hidden] rule and, coming later, keeps the element
 * visible. This is what breaks JS that hides rows by toggling `el.hidden`. */
[hidden] { display: none !important; }

:root {
  /* Surfaces */
  --bg: #f4f8fe;          /* page background */
  --panel: #ffffff;       /* cards / surfaces */
  --panel-2: #f9fbfe;     /* subtle fills, table headers */
  --panel-3: #eef4fc;     /* hover fills */
  --ice: #e8f1fd;         /* accent chips / pills */
  --sidebar: #0a1f4d;     /* dark navy nav rail */
  --sidebar-2: #0d2c6e;   /* raised sidebar surfaces */

  /* Lines */
  --border: #dfe7f2;      /* card borders */
  --border-2: #e8eef7;    /* section rules */
  --row: #edf2f9;         /* row dividers */

  /* Text */
  --text: #0b2e6b;        /* deep navy — primary text */
  --text-2: #46586f;      /* body copy */
  --muted: #6b7d99;       /* secondary */
  --muted-2: #8296b3;     /* labels / meta */
  --faint: #a4b3c9;       /* faint captions */

  /* Brand */
  --brand: #1553c0;       /* primary blue */
  --brand-hover: #0d3d92;
  --accent: #2f7ff2;      /* light blue accent (logo &, highlights) */
  --accent-2: #7db8ff;    /* on-navy accent */

  /* Status */
  --green: #1d9e57;  --green-bg: #e3f6ec;
  --red: #c43d3d;    --red-bg: #fdeaea;
  --amber: #b07a1e;  --amber-bg: #fdf2df;
  --crit: #c43d3d;

  --shadow: 0 1px 3px rgba(16,42,84,0.06);
  --shadow-lg: 0 4px 16px rgba(16,42,84,0.08);

  --sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  display: flex;
  flex-direction: column;      /* top strip stacks above the sidebar+main row */
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
body.app--auth { display: block; background: var(--bg); }
/* The sidebar + main content, side by side, below the admin top strip. */
.app-shell { display: flex; flex: 1; min-height: 0; }
/* Full-width bar above the header AND the sidebar. */
.admin-topstrip {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 8px 20px; background: var(--brand); color: #eaf1ff;
}
.admin-topstrip__label { font-size: 0.82rem; color: rgba(234,241,255,0.82); }
.admin-topstrip__label strong { color: #fff; }
/* Active item in the employee portal top nav. */
.portal-top .linklike.is-active { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: none; }

/* ------- Brand mark (& Secure) ------- */
.brand { display: inline-flex; align-items: baseline; }
.brand:hover { text-decoration: none; }
.brand__amp { font-family: var(--serif); font-style: italic; font-weight: 500; line-height: 1; color: var(--accent); }
.brand__word { font-weight: 600; letter-spacing: -0.02em; }

/* ================= Left sidebar (dark navy) ================= */
.sidebar {
  width: 232px; flex-shrink: 0; box-sizing: border-box;
  background: var(--sidebar); border-right: 0;
  display: flex; flex-direction: column; padding: 22px 14px; gap: 22px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; align-self: flex-start;
}
.sidebar__head { display: flex; flex-direction: column; gap: 22px; }
.sidebar__brand { display: flex; align-items: baseline; padding: 0 10px; }
.sidebar__brand:hover { text-decoration: none; }
.sidebar__brand .brand__amp { font-size: 26px; color: var(--accent-2); }
.sidebar__brand .brand__word { font-size: 18px; color: #fff; }

.sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar__group { display: flex; flex-direction: column; gap: 1px; margin-bottom: 12px; }
.sidebar__grouptitle { font-family: var(--mono); font-size: 10px; color: #5872a8; letter-spacing: 0.14em; padding: 0 10px; margin: 2px 0 5px; text-transform: uppercase; }
.sidebar__link {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px;
  color: #c7d5ee; font-size: 13.5px; font-weight: 500;
}
.sidebar__link:hover { background: rgba(125,184,255,0.10); color: #fff; text-decoration: none; }
.sidebar__link.active { background: rgba(125,184,255,0.16); color: #fff; font-weight: 600; }
.sidebar__link svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.85; }
.sidebar__icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 0.95rem; }
.sidebar__badge { margin-left: auto; font-family: var(--mono); font-size: 10px; background: rgba(255,120,120,0.2); color: #ff9d9d; padding: 2px 7px; border-radius: 999px; }

.sidebar__divider { height: 1px; background: rgba(125,184,255,0.15); margin: 12px 8px; }
.sidebar__footer { border-top: 1px solid rgba(125,184,255,0.15); padding-top: 12px; margin-top: 4px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sidebar__footer form { margin: 0; width: 100%; }
.sidebar__switch { width: 100%; }
.sidebar__tenant { font-size: 0.82rem; color: #c7d5ee; }
.sidebar__user { font-size: 0.82rem; color: #9db8e8; }
.sidebar__sync { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; color: #6ee7a0; }
.sidebar__sync::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6ee7a0; }
.sidebar__sync--running { color: #f5c26e; }
.sidebar__sync--running::before { background: #f5c26e; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Workspace switcher (on navy) — a native <details> dropdown */
.ws { position: relative; }
.ws-switch {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; list-style: none;
  border: 1px solid rgba(125,184,255,0.25); background: rgba(125,184,255,0.08);
  border-radius: 9px; padding: 9px 11px; cursor: pointer; font-family: var(--sans);
}
.ws-switch::-webkit-details-marker { display: none; }
.ws-switch:hover { background: rgba(125,184,255,0.14); }
.ws-switch__glyph { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; background: #fff;
  display: flex; align-items: center; justify-content: center; }
.ws-switch__glyph--sm { width: 22px; height: 22px; border-radius: 6px; }
.ws-switch__name { font-size: 12.5px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-switch__domain { font-family: var(--mono); font-size: 10px; color: #9db8e8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-switch__caret { color: #9db8e8; font-size: 10px; transition: transform .15s; }
.ws[open] .ws-switch__caret { transform: rotate(180deg); }

.ws-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--sidebar-2); border: 1px solid rgba(125,184,255,0.3); border-radius: 10px;
  padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 10px 28px rgba(4,14,40,0.5);
}
.ws-menu__form { margin: 0; width: 100%; }
.ws-menu__item, .ws-menu__add {
  width: 100%; display: flex; align-items: center; gap: 9px; text-align: left; border: none; cursor: pointer;
  border-radius: 7px; padding: 8px 9px; font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  background: transparent; color: #fff;
}
.ws-menu__item:hover, .ws-menu__add:hover { background: rgba(125,184,255,0.14); }
.ws-menu__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-menu__add { color: var(--accent-2); justify-content: flex-start; }
.ws-menu__divider { height: 1px; background: rgba(125,184,255,0.2); margin: 4px 6px; }

@media (max-width: 820px) {
  body { display: block; }
  /* Sidebar → off-canvas drawer, slid in by the hamburger. */
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 60;
    width: 264px; max-width: 84vw; height: 100vh; align-self: auto;
    flex-direction: column; gap: 20px; padding: 18px 14px;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 4px 0 28px rgba(4,14,40,0.45); overflow-y: auto;
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .sidebar__head { flex-direction: column; gap: 20px; }
  .sidebar .ws { flex: none; }
  .sidebar__nav { flex-direction: column; flex: 1; gap: 2px; overflow-y: visible; }
  .sidebar__group { flex-direction: column; margin-bottom: 12px; gap: 1px; }
  .sidebar__grouptitle { display: block; }
  .sidebar__footer { display: flex; }

  /* Backdrop behind the open drawer. */
  .nav-backdrop {
    display: block !important; position: fixed; inset: 0; z-index: 55;
    background: rgba(10,31,77,0.45); opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

  /* Top bar: hamburger + brand on the left, profile popout on the right. */
  .topbar { padding: 12px 16px; }
  .topbar__burger { display: inline-flex !important; }
  /* Center the logo in the bar regardless of the burger/avatar widths. */
  .topbar__brand { display: flex !important; position: absolute; left: 50%; transform: translateX(-50%); }

  .main__inner { padding: 20px 16px 60px; }
}

/* ================= Main column & top bar ================= */
.main { flex: 1; min-width: 0; background: var(--panel); display: flex; flex-direction: column; }
.main__inner { max-width: 1200px; margin: 0 auto; padding: 36px 44px 80px; width: 100%; }
.container { max-width: 1000px; margin: 0 auto; padding: 28px 20px 80px; }

.topbar {
  display: flex; align-items: center; gap: 16px; padding: 14px 28px;
  background: var(--panel); border-bottom: 1px solid var(--border-2); position: sticky; top: 0; z-index: 20;
}
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* Mobile-only top-bar controls (hidden on desktop) */
.topbar__burger { display: none; background: none; border: 0; cursor: pointer; color: var(--text); padding: 6px; border-radius: 8px; align-items: center; }
.topbar__burger:hover { background: var(--panel-2); }
.topbar__brand { display: none; align-items: baseline; }
.topbar__brand .brand__amp { font-size: 24px; color: var(--brand-hover); }
.topbar__brand .brand__word { font-size: 17px; color: var(--text); }
.nav-backdrop { display: none; }
.topbar__ask { border: none; background: var(--ice); color: var(--brand); border-radius: 8px; padding: 8px 15px; font-size: 13.5px; font-weight: 600; font-family: var(--sans); cursor: pointer; }
.topbar__ask:hover { background: #d3e3f9; }
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(150deg, var(--accent), var(--brand-hover)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }

/* Account popout (top-right) */
.usermenu { position: relative; }
.usermenu > summary { list-style: none; cursor: pointer; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover { filter: brightness(1.06); }
.usermenu__panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; min-width: 220px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 6px; display: flex; flex-direction: column; gap: 1px; box-shadow: var(--shadow-lg);
}
.usermenu__head { padding: 10px 12px 8px; border-bottom: 1px solid var(--border-2); margin-bottom: 4px; }
.usermenu__name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.usermenu__email { font-family: var(--mono); font-size: 11px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; }
.usermenu__form { margin: 0; }
.usermenu__item {
  display: block; width: 100%; text-align: left; border: none; background: transparent; cursor: pointer;
  padding: 9px 12px; border-radius: 8px; font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--text);
}
.usermenu__item:hover { background: var(--panel-3); color: var(--brand); text-decoration: none; }
.usermenu__divider { height: 1px; background: var(--border-2); margin: 4px 6px; }
.usermenu__signout { color: var(--red); }
.usermenu__signout:hover { background: var(--red-bg); color: var(--red); }

/* Button dropdown — a native <details> menu anchored under a .btn summary.
   Use for grouping related actions instead of a row of competing buttons. */
.btnmenu { position: relative; display: inline-block; }
.btnmenu > summary { list-style: none; cursor: pointer; }
.btnmenu > summary::-webkit-details-marker { display: none; }
.btnmenu__panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 260px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 6px; display: flex; flex-direction: column; gap: 1px; box-shadow: var(--shadow-lg);
}
.btnmenu__item {
  display: block; text-align: left; padding: 9px 12px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--text);
}
.btnmenu__item:hover { background: var(--panel-3); color: var(--brand); text-decoration: none; }
.btnmenu__sub { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted-2); margin-top: 2px; }
.btnmenu__item:hover .btnmenu__sub { color: var(--muted); }

/* ================= Typography ================= */
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin: 28px 0 12px; }
.subtitle { color: var(--muted); margin: 0 0 24px; }
.muted { color: var(--muted); }
.ok { color: var(--green); } .bad { color: var(--red); }
.mono { font-family: var(--mono); font-size: 0.82rem; }
.label {
  font-family: var(--mono); font-size: 11px; color: var(--muted-2);
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ================= Flash ================= */
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 18px; font-size: 0.92rem; }
.flash--notice { background: var(--green-bg); border: 1px solid rgba(29,158,87,0.35); color: #12613a; }
.flash--alert  { background: var(--red-bg); border: 1px solid rgba(196,61,61,0.35); color: #8c2b2b; }

/* ================= Cards ================= */
.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 22px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.card--pad-lg { padding: 32px; }

/* ================= Buttons ================= */
.btn {
  display: inline-block; border: 0; border-radius: 8px; cursor: pointer;
  padding: 10px 18px; font-size: 0.92rem; font-weight: 600; font-family: var(--sans);
  background: var(--brand); color: #fff; white-space: nowrap;
}
.page-head > .btn { flex-shrink: 0; }
.btn:hover { text-decoration: none; background: var(--brand-hover); color: #fff; }
.btn--sm { padding: 6px 13px; font-size: 0.82rem; }
.btn--warn { background: var(--amber); }
.btn--warn:hover { background: #946417; }
.btn--ghost { background: var(--panel); border: 1px solid var(--border); color: var(--brand); }
.btn--ghost:hover { background: var(--panel-2); color: var(--brand); }
.btn--danger { background: var(--panel); border: 1px solid #f3c6c6; color: var(--red); }
.btn--danger:hover { background: var(--red-bg); color: var(--red); }
.btn--google { background: var(--panel); color: var(--text); border: 1px solid #c9d9f0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn--google:hover { background: var(--panel-2); color: var(--text); }
.btn--microsoft { background: var(--panel); color: var(--text); border: 1px solid #c9d9f0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn--microsoft:hover { background: var(--panel-2); color: var(--text); }
.btn--google svg, .btn--microsoft svg { flex-shrink: 0; }
.btn form { margin: 0; }
.linklike { background: none; border: 0; color: var(--brand); cursor: pointer; padding: 0; font: inherit; font-weight: 600; }
.linklike:hover { text-decoration: underline; }

/* ================= Forms & tables ================= */
.input, .select, textarea.input {
  background: var(--panel); border: 1px solid #c9d9f0; color: var(--text);
  border-radius: 8px; padding: 9px 12px; font-size: 0.9rem; font-family: var(--sans);
}
.input:focus, .select:focus, textarea.input:focus { outline: none; border-color: var(--accent); }
.input--sm, .select--sm { padding: 5px 9px; font-size: 0.82rem; }
.inline-form { display: inline; margin: 0; }
.inline-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline-actions form { margin: 0; }

.table { width: 100%; border-collapse: collapse; }
table { width: 100%; border-collapse: collapse; }
.table th, .table td, th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--row); font-size: 0.9rem; vertical-align: middle; }
.table th, th { color: var(--muted-2); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--mono); }

/* ================= Stats ================= */
.stat-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 4px; }
.stat {
  flex: 1; min-width: 120px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px; padding: 16px;
}
.stat__num { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; }
.stat__label { color: var(--muted-2); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--mono); }
.stat--pass .stat__num { color: var(--green); }
.stat--fail .stat__num { color: var(--red); }
.stat--err  .stat__num { color: var(--amber); }
.stat--manual .stat__num { color: var(--brand); }
a.stat { display: block; text-decoration: none; color: inherit; transition: border-color .12s, background .12s; }
a.stat:hover { border-color: var(--accent); }
.stat--active { border-color: var(--accent); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--accent); }

/* Column stat group (borders between) — overview score band */
.metric-group { display: grid; grid-template-columns: repeat(3, 1fr); }
.metric { text-align: left; cursor: pointer; background: none; border: none; border-left: 1px solid var(--border-2); padding: 2px 24px; display: flex; flex-direction: column; gap: 3px; font-family: var(--sans); }
.metric__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; }
.metric__num { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.metric__sub { font-size: 12.5px; color: var(--muted); }
.metric--pass .metric__label, .metric--pass .metric__num { color: var(--green); }
.metric--fail .metric__label, .metric--fail .metric__num { color: var(--red); }
.metric--review .metric__label, .metric--review .metric__num { color: var(--amber); }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 10px; }
.rule-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--border-2); margin-bottom: 4px; }

/* ================= Score hero (dashboard) ================= */
.score-hero { display: flex; gap: 22px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; box-shadow: var(--shadow); }
.score-ring { width: 108px; height: 108px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.score-ring--good { background: conic-gradient(var(--green) calc(var(--pct, 100) * 1%), var(--border-2) 0); }
.score-ring--ok   { background: conic-gradient(var(--amber) calc(var(--pct, 60) * 1%), var(--border-2) 0); }
.score-ring--bad  { background: conic-gradient(var(--red) calc(var(--pct, 30) * 1%), var(--border-2) 0); }
.score-ring--na   { background: var(--border-2); }
.score-ring__inner { width: 84px; height: 84px; border-radius: 50%; background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-ring__num { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; }
.score-ring--good .score-ring__num { color: var(--green); }
.score-ring--ok   .score-ring__num { color: var(--amber); }
.score-ring--bad  .score-ring__num { color: var(--red); }
.score-ring__label { font-size: 0.62rem; color: var(--muted-2); text-transform: uppercase; letter-spacing: .08em; font-family: var(--mono); }
.score-hero__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.score-delta { font-size: 0.82rem; font-weight: 700; }
.score-delta--up { color: var(--green); }
.score-delta--down { color: var(--red); }

.banner { padding: 10px 14px; border-radius: 8px; margin-top: 14px; font-size: 0.9rem; }
.banner--warn { background: var(--amber-bg); border: 1px solid rgba(176,122,30,0.4); color: var(--amber); }
.banner--info { background: var(--ice); border: 1px solid rgba(21,83,192,0.25); color: var(--brand); display: flex; align-items: center; gap: 10px; }
.setup-steps { padding-left: 20px; color: var(--text-2); line-height: 1.9; margin: 8px 0 0; }

/* ================= Findings ================= */
.finding {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; margin-bottom: 12px; background: var(--panel); box-shadow: var(--shadow);
}
.finding--pass { border-left: 4px solid var(--green); }
.finding--fail { border-left: 4px solid var(--red); }
.finding--error { border-left: 4px solid var(--amber); }
.finding--manual { border-left: 4px solid var(--brand); }
.finding__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.finding__title { font-weight: 600; }
.finding__meta { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.finding__body { margin-top: 10px; font-size: 0.9rem; color: var(--text-2); }
.finding__remediation { margin-top: 10px; font-size: 0.88rem; }
.finding pre {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; overflow-x: auto; font-size: 0.8rem; color: var(--text); margin-top: 10px; font-family: var(--mono);
}

/* Human-readable evidence */
.evidence { margin-top: 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 0.85rem; }
.evidence-msg { margin-bottom: 6px; }
.evidence-msg--error { color: var(--amber); background: var(--amber-bg); border-left: 3px solid var(--amber); padding: 8px 10px; border-radius: 6px; }
.evidence-list { display: flex; flex-direction: column; gap: 3px; }
.evidence-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.evidence-key { color: var(--muted); min-width: 150px; flex-shrink: 0; font-family: var(--mono); font-size: 0.8rem; }
.evidence-val { color: var(--text); }
.evidence-items { margin: 2px 0 4px; padding-left: 18px; }
.evidence-items li { font-size: 0.82rem; }
.evidence-sub { padding: 2px 0; }
.evidence-kv { color: var(--text); }

/* ================= Action items (attestation to-dos) ================= */
.action-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.action-item { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.action-item__summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.action-item__summary::-webkit-details-marker { display: none; }
.action-item__title { flex: 1; font-weight: 600; }
.action-item__tags { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.action-item__chev { color: var(--muted); transition: transform .15s; }
.action-item[open] .action-item__chev { transform: rotate(90deg); }
.action-item[open] .action-item__summary { border-bottom: 1px solid var(--border); }
.action-item__body { padding: 4px 16px 16px; font-size: 0.9rem; }
.action-item__next { margin-top: 12px; background: var(--ice); border-left: 3px solid var(--brand); border-radius: 6px; padding: 10px 12px; }
.action-item__next p { margin: 0 0 8px; }

/* ================= Tags / badges ================= */
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: var(--ice); color: var(--muted); white-space: nowrap; }
.tag--verify { background: var(--ice); color: var(--brand); }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.badge--pass { background: var(--green-bg); color: var(--green); }
.badge--fail { background: var(--red-bg); color: var(--red); }
.badge--error { background: var(--amber-bg); color: var(--amber); }
.badge--manual { background: var(--ice); color: var(--brand); }
.badge--auto { background: var(--panel-3); color: var(--muted); }
.badge--fix { background: var(--ice); color: var(--brand); }
.badge--cataloged { background: var(--panel-2); color: var(--muted); }
.badge--role { background: var(--ice); color: var(--brand); }

/* mono status pill used across new list screens */
.pill { display: inline-block; font-family: var(--mono); font-size: 10px; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.pill--green { background: var(--green-bg); color: var(--green); }
.pill--red { background: var(--red-bg); color: var(--red); }
.pill--amber { background: var(--amber-bg); color: var(--amber); }
.pill--blue { background: var(--ice); color: var(--brand); }
.pill--muted { background: var(--panel-3); color: var(--muted); }

/* colored severity dot */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot--crit, .dot--critical { background: var(--crit); }
.dot--high { background: var(--red); }
.dot--medium { background: var(--amber); }
.dot--low { background: var(--muted-2); }
.fail-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; }

/* ================= Coverage / compliance ================= */
.cov-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cov-item { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
.cov-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; list-style: none; font-size: 0.88rem; }
.cov-row::-webkit-details-marker { display: none; }
.cov-id { color: var(--muted); font-size: 0.76rem; min-width: 92px; white-space: nowrap; font-family: var(--mono); }
.cov-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cov-covered { font-size: 0.72rem; color: var(--muted); white-space: nowrap; font-family: var(--mono); }
.cov-covered--yes { color: var(--green); }
.cov-chev { color: var(--muted); transition: transform .15s; }
.cov-item[open] .cov-chev { transform: rotate(90deg); }
.cov-item[open] .cov-row { border-bottom: 1px solid var(--border); }
.cov-body { padding: 6px 14px 14px; font-size: 0.88rem; }
.cov-proof { margin-top: 8px; }

/* Framework score cards (compliance top row) */
.fw-scores { display: grid; grid-template-columns: repeat(3, 1fr); }
.fw-score { border-right: 1px solid var(--border-2); padding: 2px 24px; display: flex; flex-direction: column; gap: 3px; }
.fw-score:last-child { border-right: 0; }
.fw-score__name {
  font-family: var(--mono); font-size: 11px; color: var(--muted-2); letter-spacing: 0.06em;
  line-height: 1.35; min-height: 2.7em; /* reserve 2 lines so % / notes align across columns */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fw-score__pct { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.fw-score__note { font-size: 12.5px; color: var(--muted); }

/* Framework mapping badges (on findings) */
.fw-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fw { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 0.72rem; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); font-family: var(--mono); }
.fw strong { font-family: var(--sans); margin-right: 4px; }
.fw--cis    { border-color: rgba(29,158,87,0.5); }
.fw--cis strong    { color: var(--green); }
.fw--scuba  { border-color: rgba(21,83,192,0.5); }
.fw--scuba strong  { color: var(--brand); }
.fw--google { border-color: rgba(176,122,30,0.5); }
.fw--google strong { color: var(--amber); }

/* Coverage matrix */
.matrix { overflow-x: auto; }
.matrix table { min-width: 720px; }
.matrix td.control { min-width: 220px; }
.matrix .status-dot { font-size: 0.72rem; font-weight: 700; }
.sev { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; font-family: var(--mono); }
.sev--critical { color: var(--crit); }
.sev--high { color: var(--red); }
.sev--medium { color: var(--amber); }
.sev--low { color: var(--muted); }

/* ================= Fix list — service groups ================= */
.fix-group { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; box-shadow: var(--shadow); }
.fix-group__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 600; }
.fix-group__head::-webkit-details-marker { display: none; }
.fix-group__icon { display: inline-flex; align-items: center; color: var(--muted-2); }
.fix-group__name { flex: 1; }
.fix-group__count { font-weight: 400; font-size: 0.85rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.fix-group__chev { color: var(--muted); transition: transform .15s; }
.fix-group[open] .fix-group__chev { transform: rotate(90deg); }
.fix-group__items { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 6px; }

.fix-item { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; }
.fix-item__main { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.fix-item__title { flex: 1; font-weight: 500; }
.fix-item__action { flex-shrink: 0; }
.fix-item__more { border-top: 1px solid var(--border); }
.fix-item__more > summary { cursor: pointer; padding: 7px 12px; font-size: 0.8rem; color: var(--muted); list-style: none; }
.fix-item__more > summary::-webkit-details-marker { display: none; }
.fix-item__detail { padding: 4px 12px 10px; }

/* ================= Generic list rows (People / Apps / Actions / etc.) ================= */
.list { display: flex; flex-direction: column; }
.list__head, .list__row {
  display: grid; gap: 12px; align-items: center; padding: 12px 8px;
}
.list__head { padding: 10px 8px; border-bottom: 1px solid var(--border-2); font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); letter-spacing: 0.05em; }
.list__row { border-bottom: 1px solid var(--row); background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; font-family: var(--sans); cursor: pointer; border-radius: 6px; }
button.list__row:hover, a.list__row:hover { background: var(--panel-3); text-decoration: none; }
.list__name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__sub { font-family: var(--mono); font-size: 11px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* boxed data table (findings/actions) */
.dtable { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.dtable__head { display: grid; gap: 14px; padding: 11px 20px; border-bottom: 1px solid var(--border-2); background: var(--panel-2); font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); letter-spacing: 0.05em; }
.dtable__row { display: grid; gap: 14px; padding: 13px 20px; border: none; border-bottom: 1px solid var(--row); background: var(--panel); cursor: pointer; text-align: left; align-items: center; width: 100%; font-family: var(--sans); }
.dtable__row:hover { background: var(--panel-2); }
.dtable__row:last-child { border-bottom: 0; }

/* Expandable findings rows (boxed table) */
.frow { border-bottom: 1px solid var(--row); }
.frow:last-child { border-bottom: 0; }
.frow__summary { display: grid; grid-template-columns: var(--frow-cols, 84px 1fr 190px 78px 92px 22px); gap: 14px; align-items: center; padding: 13px 20px; cursor: pointer; list-style: none; }
.frow__summary::-webkit-details-marker { display: none; }
.frow__summary:hover { background: var(--panel-2); }
.frow__title { font-size: 13.5px; font-weight: 500; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow[open] .frow__title { white-space: normal; }
.frow__ref { font-family: var(--mono); font-size: 12px; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frow__detected { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.frow__chev { color: var(--muted); transition: transform .15s; justify-self: end; font-size: 1.1rem; line-height: 1; }
.frow[open] .frow__chev { transform: rotate(90deg); }
.frow__summary .pill { justify-self: start; }
.frow__body { padding: 16px 20px 20px; border-top: 1px solid var(--border-2); display: flex; flex-direction: column; gap: 16px; background: var(--panel-2); }
.fd-block { display: flex; flex-direction: column; gap: 6px; }
.fd-text { font-size: 14px; color: var(--text-2); line-height: 1.65; margin: 0; }
.fd-block .evidence { background: var(--panel); }

/* avatar circle */
.avatar { border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.avatar--sm { width: 30px; height: 30px; font-size: 11.5px; }
.avatar--md { width: 34px; height: 34px; font-size: 12px; }
.avatar--lg { width: 52px; height: 52px; font-size: 18px; }
.avatar--b1 { background: linear-gradient(150deg, #2f7ff2, #0d3d92); }
.avatar--b2 { background: linear-gradient(150deg, #38b6a0, #0f766e); }
.avatar--b3 { background: linear-gradient(150deg, #a06bff, #6d28d9); }
.avatar--b4 { background: linear-gradient(150deg, #ff8a5b, #c2410c); }
.avatar--b5 { background: linear-gradient(150deg, #f2b705, #b07a1e); }

/* filter chip row */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--border); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; font-family: var(--sans); cursor: pointer; text-decoration: none; }
.chip:hover { border-color: var(--accent); color: var(--brand); text-decoration: none; }
.chip--active { border-color: var(--brand); background: var(--ice); color: var(--brand); }
.chip--dot { display: inline-flex; align-items: center; gap: 7px; }
.filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filter-row__label { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); letter-spacing: 0.08em; width: 62px; flex-shrink: 0; }

/* tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-2); }
.tab { border: none; background: none; cursor: pointer; font-family: var(--sans); font-size: 13.5px; font-weight: 600; padding: 9px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.tab:hover { color: var(--brand); text-decoration: none; }
.tab--active { color: var(--brand); border-bottom-color: var(--brand); }

/* key/value metric strip */
.kv-strip { display: grid; gap: 0; }
.kv { border-right: 1px solid var(--border-2); padding: 0 20px; }
.kv:first-child { padding-left: 0; }
.kv:last-child { border-right: 0; padding-right: 0; }
.kv__k { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); letter-spacing: 0.06em; }
.kv__v { font-size: 14px; font-weight: 500; margin-top: 4px; }

/* page header block */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.page-head__title { display: flex; flex-direction: column; gap: 4px; }
.page-head__sub { font-size: 14px; color: var(--muted); }
.back-link { border: none; background: none; color: var(--brand); font-size: 13.5px; font-weight: 600; cursor: pointer; align-self: flex-start; font-family: var(--sans); padding: 0; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* domain chip */
.domain-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12.5px; color: var(--brand); background: var(--ice); padding: 4px 11px; border-radius: 999px; }
.domain-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* &Secure AI review card */
.ai-card { display: flex; gap: 14px; background: var(--panel-2); border-radius: 12px; padding: 18px 20px; align-items: flex-start; }
.ai-card__glyph { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(150deg, var(--accent), var(--brand-hover)); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--serif); font-style: italic; font-size: 22px; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { width: 16px; height: 16px; border: 2px solid #c9d9f0; border-top-color: var(--brand); border-radius: 50%; animation: spin 0.8s linear infinite; }

/* utility */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stack { display: flex; flex-direction: column; gap: 6px; }
.stack-lg { display: flex; flex-direction: column; gap: 20px; }
.row-flex { display: flex; align-items: center; gap: 12px; }
.empty { color: var(--muted); font-size: 0.88rem; font-style: italic; }

.diff-grid { display: flex; gap: 14px; flex-wrap: wrap; }
.diff-col { flex: 1; min-width: 200px; }
.diff-col h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 8px; font-family: var(--mono); }
.diff-col--fixed h3 { color: var(--green); }
.diff-col--new h3 { color: var(--crit); }
.diff-col--open h3 { color: var(--amber); }
.diff-item { font-size: 0.88rem; padding: 6px 0; border-bottom: 1px solid var(--row); }

/* ================= Devise auth pages ================= */
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 48px; }
.auth-brand { display: flex; align-items: baseline; }
.auth-brand .brand__amp { font-size: 40px; }
.auth-brand .brand__word { font-size: 28px; color: var(--text); }
.auth-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 36px; width: 400px; max-width: 100%; display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--shadow-lg); margin: 0;
}
.auth-card__title { font-size: 20px; font-weight: 600; text-align: center; }
.auth-card label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin: 6px 0 4px; }
.auth-card input[type=email],
.auth-card input[type=password],
.auth-card input[type=text] {
  width: 100%; padding: 11px 13px; border-radius: 8px;
  border: 1px solid #c9d9f0; background: var(--panel); color: var(--text); font-family: var(--sans); font-size: 14.5px;
}
.auth-card input:focus { outline: none; border-color: var(--accent); }
.auth-card .btn { width: 100%; margin-top: 8px; }
.auth-sep { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--border-2); }
.auth-links { margin-top: 6px; font-size: 13.5px; text-align: center; color: var(--muted); }

/* ================= Employee portal ================= */
.portal-top { display: flex; align-items: center; gap: 14px; padding: 14px 28px; border-bottom: 1px solid var(--border-2); background: var(--panel); }
.portal-top .brand__amp { font-size: 26px; }
.portal-top .brand__word { font-size: 18px; color: var(--text); }
.portal-top__tag { font-family: var(--mono); font-size: 11px; color: var(--muted-2); letter-spacing: 0.08em; text-transform: uppercase; }
.portal-top__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.portal-top__right form { margin: 0; }

/* Employee portal: responsive content width + header across mobile/tablet/desktop. */
.portal-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 32px 32px 80px; box-sizing: border-box; }
@media (max-width: 900px) { .portal-wrap { padding: 24px 22px 64px; } }
@media (max-width: 560px) { .portal-wrap { padding: 18px 15px 56px; } }
.app-item { border-bottom: 1px solid var(--border-2); }
.app-item__summary { display: grid; align-items: center; gap: 12px; padding: 12px 2px; cursor: pointer; list-style: none; }
.app-item__summary::-webkit-details-marker { display: none; }
.app-item__chev { color: var(--muted); transition: transform .15s; justify-self: end; }
.app-item[open] .app-item__chev { transform: rotate(180deg); }
.app-item__body { padding: 4px 2px 16px 46px; }
@media (max-width: 560px) { .app-item__body { padding-left: 2px; } }
.portal-top__burger { display: none; background: none; border: 0; cursor: pointer; color: var(--text); padding: 6px; border-radius: 8px; align-items: center; }
@media (max-width: 640px) {
  .portal-top { flex-wrap: wrap; padding: 12px 16px; row-gap: 8px; }
  .portal-top__burger { display: inline-flex; margin-left: auto; }
  .portal-top__right { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; }
  .portal-top.is-open .portal-top__right { display: flex; }
  .portal-top__right .linklike { padding: 9px 4px; font-size: 0.95rem; border-bottom: 1px solid var(--border-2); }
  .portal-top__right .usermenu { align-self: flex-start; padding: 6px 0; }
}

/* ================= Danger zone + confirmation modal ================= */
.danger-zone { border-color: #f3c6c6; }
dialog.modal {
  border: 1px solid var(--border); border-radius: 14px; padding: 24px;
  max-width: 460px; width: 90%; background: var(--panel); color: var(--text);
  box-shadow: var(--shadow-lg);
}
dialog.modal::backdrop { background: rgba(10, 31, 77, 0.45); }
dialog.modal h3 { font-size: 1.1rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ================= Charts =================
   One series, so the marks carry identity and the text stays in ink tokens:
   values and labels never wear the series color. Grid and axes are solid
   hairlines a shade off the surface — recessive, never dashed. */
.chart { position: relative; margin: 14px 0 0; }
.chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart__svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

.chart__grid line { stroke: var(--border-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart__ytick, .chart__xticks text {
  font-family: var(--mono); font-size: 10px; fill: var(--faint);
  font-variant-numeric: tabular-nums;
}

.chart__area { fill: var(--brand); fill-opacity: 0.07; }
.chart__line {
  fill: none; stroke: var(--brand); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
/* A 2px surface ring, not a border, so overlapping markers stay separable. */
.chart__markers circle, .chart__last, .chart__hover {
  fill: var(--brand); stroke: var(--panel); stroke-width: 2; vector-effect: non-scaling-stroke;
}
.chart__last { fill: var(--brand); }
.chart__crosshair { stroke: var(--muted-2); stroke-width: 1; stroke-opacity: 0.5; vector-effect: non-scaling-stroke; }

/* The current value, beside the chart heading — the one direct label. */
.chart__figure { font-family: var(--sans); font-size: 1.7rem; font-weight: 700; color: var(--text); line-height: 1; }
.chart__figure-unit { font-size: 0.85rem; font-weight: 600; color: var(--muted-2); margin-left: 2px; }

.chart__tooltip {
  position: absolute; transform: translateY(-100%); margin-top: -14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: 9px 12px; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px; white-space: nowrap; z-index: 2;
}
.chart__tooltip[hidden] { display: none; }
.chart__tip-score { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.chart__tip-unit { font-size: 0.72rem; font-weight: 600; color: var(--muted-2); }
.chart__tip-when { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); }
.chart__tip-counts { font-size: 12px; color: var(--muted); }

/* ================= Segmented control (range picker) ================= */
.segmented { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 2px; gap: 2px; }
.segmented__item {
  padding: 5px 12px; border-radius: 7px; font-size: 0.82rem; font-weight: 600;
  color: var(--muted); text-decoration: none; white-space: nowrap;
}
.segmented__item:hover { background: var(--panel-3); color: var(--brand); text-decoration: none; }
.segmented__item.is-active { background: var(--panel); color: var(--brand); box-shadow: var(--shadow); }

/* ================= Pagination ================= */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pager__status { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.btn.is-disabled { opacity: 0.45; cursor: default; pointer-events: none; }

/* Numeric table cells align down the column, so they get equal-width digits. */
td.num, th.num { font-variant-numeric: tabular-nums; }

/* ================= Form rows =================
   A row of fields ending in a submit button.
   
   Bottom-aligned, not centred: these fields carry a label above them, so the
   field box starts lower than the button. Centring the row leaves the button
   floating above the input it belongs to.
   
   This lives in CSS rather than an inline style because `form_with(style: ...)`
   is silently DROPPED by Rails — only `class:` survives at the top level — so a
   layout expressed inline on a form never actually applies. */
.form-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.form-row__grow { flex: 1; min-width: 260px; }
.form-row .input, .form-row .select { width: 100%; }
.form-row .btn { flex: 0 0 auto; }
/* The inline sibling of .form-row: a field + button that has to sit INSIDE a
   line of other controls (a table cell's action column) rather than own a row. */
.form-inline { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }

/* A banner that carries an action (a reconnect button, say) rather than only
   telling the reader what to do. */
.banner--action { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.banner--action form { margin: 0; }
.banner--action .btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }

/* ================= Assign-training modal ================= */
/* Wider than the confirm dialog — it carries a scrollable people list. */
dialog.modal--wide { max-width: 620px; }
.assign-people {
  max-height: 300px; overflow-y: auto; border: 1px solid var(--border-2);
  border-radius: 10px; padding: 4px;
}
.assign-person {
  display: flex; align-items: center; gap: 10px; padding: 7px 9px;
  border-radius: 8px; font-size: 13.5px; cursor: pointer;
}
.assign-person:hover { background: var(--panel-2, var(--panel)); }

/* Monthly / annual billing toggle */
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--panel-2, var(--panel)); border: 1px solid var(--border-2); }
.seg__opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg__opt input { display: none; }
.seg__opt.is-active { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Assign wizard stepper */
.wiz-steps { display: flex; gap: 8px; margin-bottom: 16px; }
.wiz-step {
  flex: 1; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 7px 6px; border-radius: 8px; background: var(--panel-2, var(--panel));
  border: 1px solid var(--border-2); white-space: nowrap;
}
.wiz-step.is-active { color: #fff; background: var(--brand, #2b50e0); border-color: var(--brand, #2b50e0); }
.wiz-step.is-done { color: var(--brand, #2b50e0); border-color: var(--brand, #2b50e0); background: var(--ice, #e8f1fd); }
.assign-person__meta { margin-left: auto; font-size: 11px; color: var(--muted); font-family: var(--mono); }

/* Auto-enroll module picker: collapsible track sections (no inner scroll). */
.ae-track { border: 1px solid var(--border-2); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.ae-track[open] { background: var(--panel-2, var(--panel)); }
.ae-track__summary {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: pointer; list-style: none; user-select: none;
}
.ae-track__summary::-webkit-details-marker { display: none; }
.ae-track__summary::after {
  content: "▸"; color: var(--muted); font-size: 11px; transition: transform .12s ease;
}
.ae-track[open] .ae-track__summary::after { transform: rotate(90deg); }
.ae-track__all { display: flex; align-items: center; margin: 0; cursor: pointer; }
.ae-track__title { font-weight: 600; font-size: 13px; flex: 1; }
.ae-track__meta { font-size: 11.5px; color: var(--muted); font-family: var(--mono); white-space: nowrap; }
.ae-track__body { padding: 4px 12px 12px 32px; }
.ae-mod {
  display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13px; cursor: pointer;
}

/* ===== Portal training: module player progress ===== */
.video-progress { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.video-progress__track {
  flex: 1; height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--border-2);
}
.video-progress__fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--brand, #2b50e0); transition: width .25s ease;
}
.video-progress__label { white-space: nowrap; font-size: 12px; }

/* ===== Portal training: module list cards ===== */
.tr-card { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.tr-card__thumb {
  position: relative; flex: 0 0 auto; width: 180px; aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden; cursor: pointer;
  background: linear-gradient(135deg, var(--brand, #2b50e0), #1b2a6b);
}
.tr-card__video { width: 100%; height: 100%; object-fit: cover; display: block; background: transparent; }
.tr-card__thumb--test {
  background: linear-gradient(135deg, #3a3f52, #20232e);
  display: flex; align-items: center; justify-content: center;
}
.tr-card__badge {
  font: 600 11px/1 var(--mono, monospace); letter-spacing: .14em; color: #fff;
  border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: 5px 10px;
}
.tr-card__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; text-shadow: 0 1px 6px rgba(0,0,0,.6);
  pointer-events: none; opacity: .9; transition: opacity .15s ease;
}
.tr-card__play svg { display: block; }
/* The play affordance stays visible even while a preview plays on hover. */
.tr-card__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.25);
}
.tr-card__progress-fill { display: block; height: 100%; width: 0; background: var(--brand, #2b50e0); transition: width .25s ease; }
.tr-card__body { flex: 1; min-width: 200px; }
.tr-card__action {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; text-align: right;
}
@media (max-width: 560px) {
  .tr-card__thumb { width: 100%; }
  .tr-card__action { align-items: flex-start; text-align: left; width: 100%; }
}

/* ================= Email security ================= */
.es-copy { display: flex; gap: 8px; align-items: flex-start; }
.es-value {
  flex: 1; min-width: 0; display: block; font-family: var(--mono); font-size: 12px; line-height: 1.55;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px;
  word-break: break-all; white-space: pre-wrap; color: var(--text);
}
.es-value--old { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(196,61,61,0.45); }
.es-code { font-family: var(--mono); font-size: 0.85em; background: var(--panel-3); padding: 1px 5px; border-radius: 4px; }
.es-issues { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.es-issue { display: flex; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.es-issue__icon {
  flex: 0 0 18px; height: 18px; border-radius: 50%; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.es-issue--fail .es-issue__icon { background: var(--red-bg); color: var(--red); }
.es-issue--warn .es-issue__icon { background: var(--amber-bg); color: var(--amber); }
.es-issue--info .es-issue__icon { background: var(--ice); color: var(--brand); }
.es-record-grid { display: grid; grid-template-columns: 90px 1fr; gap: 8px 14px; align-items: start; margin-top: 12px; }
.es-record-grid .label { padding-top: 9px; }
.es-steps { margin: 8px 0 0; padding-left: 20px; color: var(--text-2); font-size: 13px; line-height: 1.75; }
.es-steps li { padding-left: 2px; }
.es-domain-row { grid-template-columns: minmax(0,1.6fr) 78px 78px 78px minmax(0,1fr) 110px; }
@media (max-width: 760px) {
  .es-domain-row { grid-template-columns: minmax(0,1fr) 64px 64px 64px; }
  .es-domain-row > :nth-child(n+5) { display: none; }
  .es-record-grid { grid-template-columns: 1fr; }
  .es-record-grid .label { padding-top: 0; }
}