/* Instrument-panel palette. Signal colours (clear / caution / critical) are
   reserved for governance state and never used as decoration.
   
   Two palettes, one set of names. Nothing outside this block knows which is in
   use — that is the whole reason the colours were variables to begin with, and
   it means the day palette cannot drift out of step with the night one by being
   edited somewhere else.
   
   The signal colours are not the same hex in both. A green that reads as calm on
   a dark panel is nearly invisible on white, and a report where "met" and "not
   met" are hard to tell apart is worse than one with no colour at all. */

:root {
  --ground:   #0E151C;
  --panel:    #16202A;
  --panel-2:  #1B2733;
  --rule:     #26333F;
  --paper:    #DDE6ED;
  --muted:    #7E93A5;
  --dim:      #58697A;

  --clear:    #3E9E7A;
  --caution:  #D9A03C;
  --critical: #D0555B;
  --lineage:  #4E86C6;
  --pii:      #A374C9;

  --sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

  --shadow: rgba(0, 0, 0, 0.45);
  /* Reads on a signal colour used as a background, and the dotted canvas grid.
     Both were hardcoded to the night palette; on white the first was invisible
     and the second nearly black. */
  --on-signal: #06120D;
  --grid-dot:  #1D2833;
  --overlay:   rgba(22, 32, 42, .93);
  --tag-clear-edge:  #23503F;
  --tag-warn-edge:   #4E3C1B;
  --tag-crit-edge:   #4D2226;
  --tag-pii-edge:    #3C2B4C;
  --region-fill: rgba(255, 255, 255, 0.018);
  color-scheme: dark;
}

/* Day. Darker signal colours, because the same hues on white lose the contrast
   they carry the meaning with. */
:root[data-theme="light"] {
  --ground:   #F4F6F8;
  --panel:    #FFFFFF;
  --panel-2:  #EDF1F5;
  --rule:     #D3DBE3;
  --paper:    #1A242E;
  --muted:    #55677A;
  --dim:      #7C8C9C;

  --clear:    #1F7A56;
  --caution:  #9A6B12;
  --critical: #B3353C;
  --lineage:  #2B5F9E;
  --pii:      #6F42A8;

  --shadow: rgba(15, 25, 35, 0.14);
  --on-signal: #FFFFFF;
  --grid-dot:  #D8E0E8;
  --overlay:   rgba(255, 255, 255, .95);
  --tag-clear-edge:  #A9D4C1;
  --tag-warn-edge:   #E0C78B;
  --tag-crit-edge:   #E6B0B4;
  --tag-pii-edge:    #CDBBE4;
  --region-fill: rgba(20, 40, 60, 0.035);
  color-scheme: light;
}

/* Following the machine is the default, so somebody who has set their laptop to
   switch at dusk gets that here without being asked. */
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --ground:   #F4F6F8;
    --panel:    #FFFFFF;
    --panel-2:  #EDF1F5;
    --rule:     #D3DBE3;
    --paper:    #1A242E;
    --muted:    #55677A;
    --dim:      #7C8C9C;

    --clear:    #1F7A56;
    --caution:  #9A6B12;
    --critical: #B3353C;
    --lineage:  #2B5F9E;
    --pii:      #6F42A8;

    --shadow: rgba(15, 25, 35, 0.14);
  --on-signal: #FFFFFF;
    --grid-dot:  #D8E0E8;
    --overlay:   rgba(255, 255, 255, .95);
    --tag-clear-edge:  #A9D4C1;
    --tag-warn-edge:   #E0C78B;
    --tag-crit-edge:   #E6B0B4;
    --tag-pii-edge:    #CDBBE4;
    --region-fill: rgba(20, 40, 60, 0.035);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

/* A class that sets `display` outranks the hidden attribute's UA rule, which
   leaves an invisible panel still catching clicks. Settle it once, globally. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ground);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

.shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  height: 100%;
}

/* ---------------------------------------------------------------- rail */

.rail {
  border-right: 1px solid var(--rule);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rail-head {
  display: flex;
  gap: 10px;
  padding: 18px 16px 16px;
  border-bottom: 1px solid var(--rule);
}

.mark {
  width: 22px; height: 22px;
  flex: none;
  margin-top: 2px;
  border: 1.5px solid var(--clear);
  border-radius: 50%;
  position: relative;
}
.mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: var(--clear);
  border-radius: 50%;
}

.rail-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.rail-sub { font-size: 12px; color: var(--muted); }

#nav { display: flex; flex-direction: column; padding: 10px 8px; gap: 1px; }

.nav-item {
  text-align: left;
  background: none;
  border: 0;
  border-radius: 3px;
  padding: 8px 10px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-item:hover { background: var(--panel-2); color: var(--paper); }
.nav-item.is-active { background: var(--panel-2); color: var(--paper); box-shadow: inset 2px 0 0 var(--clear); }
.nav-item:focus-visible { outline: 2px solid var(--lineage); outline-offset: 1px; }

.pip {
  margin-left: auto;
  min-width: 18px;
  text-align: center;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--critical);
  color: var(--ground);
  font-weight: 600;
}
.pip.warn { background: var(--caution); }

.rail-foot { margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--rule); }
.who { display: flex; flex-direction: column; gap: 4px; }
.who label { font-size: 12px; color: var(--muted); }
.who input {
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 6px 8px;
}
.rail-note { font-size: 11.5px; color: var(--dim); margin: 10px 0 0; }

/* --------------------------------------------------------------- strip */

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

.strip {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
}
.strip .stats { display: flex; flex-wrap: wrap; gap: 26px; flex: 1; }

/* The scope selector sits first because it changes the meaning of every number
   to its right, and a filter people cannot see is a filter people forget. */
.scope {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 20px;
  border-right: 1px solid var(--rule);
  min-width: 190px;
}
.scope label { font-size: 11.5px; color: var(--muted); }
.scope select {
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 5px 8px;
  max-width: 220px;
}
.scope.is-filtered select { border-color: var(--clear); }

.stat { display: flex; flex-direction: column; gap: 1px; }
.stat .n { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat .l { font-size: 11.5px; color: var(--muted); }
.stat.alert .n { color: var(--critical); }
.stat.warn .n { color: var(--caution); }

/* ---------------------------------------------------------------- view */

.view { flex: 1; min-height: 0; overflow: auto; }
.view.is-canvas { overflow: hidden; display: flex; flex-direction: column; }

.pad { padding: 20px 22px 48px; max-width: 1100px; }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
.lede { color: var(--muted); margin: 0 0 18px; max-width: 68ch; }

/* toolbar above the canvas */
.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filters label { display: flex; gap: 5px; align-items: center; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.filters input { accent-color: var(--lineage); }
.spacer { flex: 1; }

.btn {
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 5px 10px;
  cursor: pointer;
  color: var(--paper);
}
.btn:hover { border-color: var(--dim); }
.btn:focus-visible { outline: 2px solid var(--lineage); outline-offset: 1px; }
.btn.primary { background: var(--clear); border-color: var(--clear); color: var(--on-signal); font-weight: 600; }
.btn.danger  { background: transparent; border-color: var(--critical); color: var(--critical); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.small { padding: 3px 8px; font-size: 12.5px; }

#canvasWrap { flex: 1; position: relative; min-height: 0; }
#graph { width: 100%; height: 100%; display: block; cursor: grab; background:
  radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 0) 0 0 / 26px 26px; }
#graph.is-panning { cursor: grabbing; }

.legend {
  position: absolute;
  left: 14px; bottom: 14px;
  background: var(--overlay);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--muted);
  display: grid;
  gap: 5px;
}
.legend .row { display: flex; align-items: center; gap: 7px; }
.legend .swatch { width: 15px; height: 11px; border-radius: 2px; border: 1px solid var(--rule); background: var(--panel-2); }

/* --------------------------------------------------------------- table */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 500; }
tbody tr:hover { background: var(--panel); }
td.num { font-variant-numeric: tabular-nums; }

.qname { font-family: var(--mono); font-size: 12px; color: var(--muted); word-break: break-all; }

.tag {
  display: inline-block;
  font-size: 11.5px;
  padding: 1px 7px;
  border-radius: 3px;
  border: 1px solid var(--rule);
  color: var(--muted);
  white-space: nowrap;
}
.tag.clear { color: var(--clear); border-color: var(--tag-clear-edge); }
.tag.warn { color: var(--caution); border-color: var(--tag-warn-edge); }
.tag.crit { color: var(--critical); border-color: var(--tag-crit-edge); }
.tag.pii { color: var(--pii); border-color: var(--tag-pii-edge); }

.reasons { margin: 6px 0 0; padding-left: 16px; color: var(--caution); font-size: 12.5px; }
.reasons li { margin-bottom: 2px; }

.card {
  border: 1px solid var(--rule);
  background: var(--panel);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.card h3 { margin: 0 0 2px; font-size: 14px; font-weight: 600; }
.card .meta { color: var(--muted); font-size: 12.5px; }
.card .actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field label { font-size: 12px; color: var(--muted); }
.field input, .field select, .field textarea {
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 7px 9px;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.empty { color: var(--muted); border: 1px dashed var(--rule); padding: 22px; text-align: center; }

/* ----------------------------------------------------------- inspector */

.inspector {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 360px;
  max-width: 90vw;
  background: var(--panel);
  border-left: 1px solid var(--rule);
  padding: 16px 18px 28px;
  overflow: auto;
  z-index: 30;
}
.inspector-close { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; margin-bottom: 10px; }
.inspector h3 { margin: 0 0 2px; font-size: 15px; }
.inspector dl { display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px; margin: 14px 0 0; font-size: 13px; }
.inspector dt { color: var(--muted); }
.inspector dd { margin: 0; word-break: break-word; }
.inspector h4 { font-size: 12px; color: var(--muted); font-weight: 500; margin: 18px 0 6px; }

/* --------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--clear);
  padding: 9px 14px;
  z-index: 60;
  max-width: 560px;
}
.toast.bad { border-left-color: var(--critical); }

@media (max-width: 780px) {
  .shell { grid-template-columns: 1fr; }
  .rail { flex-direction: row; align-items: center; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--rule); }
  .rail-head, .rail-foot { border: 0; }
  #nav { flex-direction: row; }
  .rail-foot { padding: 8px 12px; }
  .rail-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ------------------------------------------------------------- sign in */

.signin {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ground);
  z-index: 80;
  padding: 20px;
}

.signin-card {
  width: 100%;
  max-width: 340px;
  border: 1px solid var(--rule);
  background: var(--panel);
  padding: 26px 24px 22px;
}
.signin-card h1 { font-size: 17px; font-weight: 600; margin: 14px 0 6px; letter-spacing: -0.01em; }
.signin-card p { color: var(--muted); font-size: 12.5px; margin: 0 0 18px; }
.signin-card .btn { width: 100%; margin-top: 6px; }
.signin-error { color: var(--critical); margin: 12px 0 0; font-size: 12.5px; }

.who { display: flex; flex-direction: column; gap: 1px; margin-bottom: 10px; }
.who-name { font-size: 13px; }
.who-roles { font-size: 11.5px; color: var(--muted); }

.role-grid { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.role-grid label { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.role-grid input { accent-color: var(--clear); }
.role-note { color: var(--dim); font-size: 12px; margin: 4px 0 0; }
tr.is-disabled td { opacity: .55; }


.hint { color: var(--dim); font-size: 11.5px; margin: 2px 0 0; }

.secret {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.08em;
  background: var(--ground);
  border: 1px solid var(--rule);
  padding: 10px 12px;
  word-break: break-all;
  margin: 8px 0;
}
.codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
  font-family: var(--mono);
  font-size: 13px;
  margin: 10px 0 4px;
}
.codes span { background: var(--ground); border: 1px solid var(--rule); padding: 6px 9px; }
.notice { border-left: 3px solid var(--caution); padding: 10px 14px; background: var(--panel-2); margin-bottom: 16px; }
.notice.crit { border-left-color: var(--critical); }


.signin-or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dim);
  font-size: 12px;
  margin: 14px 0 10px;
}
.signin-or::before, .signin-or::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule);
}
#ssoButton { width: 100%; }


/* ------------------------------------------------------ histogram */

.histogram {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 150px;
  padding: 10px 0 0;
  border-bottom: 1px solid var(--rule);
}
.histogram .bar { flex: 1; min-width: 2px; display: flex; flex-direction: column; justify-content: flex-end; }
.histogram .bar span { display: block; width: 100%; }
.histogram .attended { background: var(--clear); }
.histogram .unattended { background: var(--critical); }
.histogram .bar:hover span { filter: brightness(1.4); }
.hist-axis { display: flex; justify-content: space-between; color: var(--dim); font-size: 11.5px; margin-top: 6px; }
.hist-key { display: flex; gap: 16px; font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.hist-key i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; font-style: normal; }

.span-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.span-bar { flex: 1; height: 8px; background: var(--ground); position: relative; border: 1px solid var(--rule); }
.span-bar i { position: absolute; top: 0; bottom: 0; background: var(--lineage); }
.span-bar i.ended { background: var(--dim); }

.timeline { border-left: 1px solid var(--rule); margin-left: 6px; padding-left: 16px; }
.timeline .entry { position: relative; padding: 7px 0; }
.timeline .entry::before {
  content: ""; position: absolute; left: -21px; top: 13px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--rule);
}
.timeline .entry.prompt::before { background: var(--caution); }
.timeline .entry.finding::before { background: var(--critical); }
.timeline .entry.decision::before { background: var(--clear); }


/* ------------------------------------------------- canvas swimlanes */

.lane {
  fill: var(--region-fill);
  stroke: var(--rule);
  stroke-dasharray: 3 5;
}
.lane.is-shared { fill: rgba(78, 134, 198, 0.05); }
.lane.is-unassigned { fill: rgba(217, 160, 60, 0.05); }
.lane-label {
  fill: var(--paper);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.lane-count { fill: var(--muted); font-size: 12px; }

.canvas-note {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel-2);
  border: 1px solid var(--caution);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--muted);
  z-index: 3;
}

.toolbar .toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}


/* --------------------------------------------- canvas regions (spatial) */

.region {
  fill: var(--region-fill);
  stroke: rgba(110, 168, 216, 0.30);
  stroke-width: 1.2;
  stroke-dasharray: 4 6;
}
.region.is-shared {
  fill: rgba(78, 134, 198, 0.07);
  stroke: rgba(78, 134, 198, 0.40);
  stroke-dasharray: none;
}
.region.is-unassigned {
  fill: rgba(217, 160, 60, 0.06);
  stroke: rgba(217, 160, 60, 0.38);
}
.region-label {
  fill: var(--paper);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.region-count { fill: var(--muted); font-size: 12px; }


/* ------------------------------------------------------ day and night */

.theme-switch {
  display: flex;
  gap: 2px;
  margin-top: 10px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.theme-switch button {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--dim);
  font: inherit;
  font-size: 11.5px;
  padding: 5px 0;
  cursor: pointer;
}
.theme-switch button:hover { color: var(--paper); }
.theme-switch button[aria-pressed="true"] {
  background: var(--panel-2);
  color: var(--paper);
}


/* -------------------------------------------------- authenticator enrolment */

.enrol {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  margin: 12px 0;
}
/* The code keeps its own white background whatever the theme — a camera reading
   an inverted code is a coin toss. The frame stops it looking like a mistake. */
.enrol-code {
  background: #FFFFFF; /* palette-exempt: a camera reading an inverted QR code is a coin toss */
  padding: 8px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  line-height: 0;
}
.enrol-code svg { display: block; width: 176px; height: 176px; }