/* iwcoreadmin — admin portal stylesheet
   Foundation contract: card-based layout, 16px master scale
   (prose >= 1rem, secondary >= 0.9375rem, meta >= 0.8125rem),
   house language (Login/Logout, never Sign In). */

:root {
  --control-bg: #f2f4f7;
  --control-surface: #ffffff;
  --control-brand: #2d5f93;
  --control-brand-dark: #21486f;
  /* The action orange. Chosen against #fff for AA body-text contrast (4.7:1), so a
     button label is readable and not merely visible. Reserved for the DO-THIS
     affordances; the blue stays the navigation colour. */
  --control-action: #c2410c;
  --control-action-dark: #9a3412;
  --control-accent: #c58b2a;
  --control-text: #1c2733;
  --control-text-secondary: #4a5a6a;
  --control-border: #d7dee6;
  --control-radius: 8px;
  --control-shadow: 0 1px 3px rgba(28, 39, 51, 0.12);
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--control-text);
  background: var(--control-bg);
  min-height: 100vh;
}

/* ---------- Shell: header + sidebar + main (+ desk rail) ---------- */

.shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.shell-two-col {
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.shell-three-col {
  grid-template-columns: 220px minmax(0, 1fr) 400px;
  grid-template-areas:
    "header header header"
    "sidebar main rail"
    "footer footer footer";
}

.shell-header {
  grid-area: header;
  background: #fff;
  color: var(--control-text);
  padding: 0.5rem 1.25rem;
  border-bottom: 3px solid var(--control-brand);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* IW brand: the ball + the InvestmentWires name logo (authentic art, never text) */
.shell-header .brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.shell-header .brand-ball {
  display: block;
  height: 44px;
  width: auto;
}

.shell-header .brand-name {
  display: block;
  height: 32px;
  width: auto;
}

.shell-sidebar {
  grid-area: sidebar;
  background: var(--control-surface);
  border-right: 1px solid var(--control-border);
  padding: 1rem 0;
}

/* Sidebar nav is grant-driven and grouped by area (_Layout.cshtml): an entry
   appears only if the signed-in user holds the grant its policy requires. */
.shell-sidebar nav a {
  display: block;
  padding: 0.5rem 1.25rem;
  color: var(--control-brand-dark);
  text-decoration: none;
  font-size: 1rem;
}

.shell-sidebar nav a:hover,
.shell-sidebar nav a.active {
  background: var(--control-bg);
  border-left: 3px solid var(--control-accent);
  padding-left: calc(1.25rem - 3px);
}

.shell-main {
  grid-area: main;
  padding: 1.5rem;
  max-width: 1100px;
}

.shell-footer {
  grid-area: footer;
  border-top: 1px solid var(--control-border);
  color: var(--control-text-secondary);
  font-size: 0.8125rem;
  padding: 0.75rem 1.25rem;
  background: var(--control-surface);
}

.shell-rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  background: var(--control-surface);
  border-left: 1px solid var(--control-border);
  min-height: 0;
  position: sticky;
  top: 0;
  max-height: 100vh;
}

.rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--control-border);
  background: var(--control-bg);
}

.rail-tabs { display: inline-flex; gap: 0.25rem; }

.rail-tab {
  padding: 0.25rem 0.75rem;
  border-radius: var(--control-radius);
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--control-brand);
}

.rail-tab:hover { background: var(--control-surface); }

.rail-tab-current {
  background: var(--control-brand);
  color: #fff;
  font-weight: 600;
}

.rail-transcript {
  /* Sized to content, capped to the viewport: the prompt line sits DIRECTLY
     below the output box instead of being flexed to the bottom of a 100vh
     rail whose tail falls off-screen below the header (Sean, 2026-08-12). */
  flex: 0 1 auto;
  max-height: calc(100vh - 230px);
  overflow-y: auto;
  padding: 0.75rem 1rem;
  min-height: 0;
}

.rail-promptline {
  flex: 0 0 auto;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--control-border);
  border-bottom: 1px solid var(--control-border);
  background: var(--control-surface);
}

/* Sidebar groups: each is a <details> whose <summary> is the group header.
   Headers read as headers — larger, bolder, brand-coloured, with a caret —
   and collapse, because the lists under them will keep growing. */
.nav-section {
  margin-top: 0.5rem; /* the header's tinted band is the separator */
}

.nav-group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  /* Near-black on a tinted band — deliberately NOT the link blue, so a header
     never reads as one more link in the list. */
  color: var(--control-text);
  background: rgba(45, 95, 147, 0.10);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.nav-group::-webkit-details-marker { display: none; }

.nav-group::before {
  content: "";
  flex: 0 0 auto;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  padding: 2.5px;
  transform: rotate(-45deg); /* caret points right when collapsed */
  transition: transform 0.12s ease;
}

details[open] > .nav-group::before { transform: rotate(45deg); } /* points down */

.nav-group:hover { background: rgba(45, 95, 147, 0.18); }

/* The header's label is a link (to the section's KPI dashboard) but must keep
   reading as a header: inherit the header ink, fill the row so the whole label
   is clickable, and take none of the base sidebar-link treatment. The
   .shell-sidebar prefix outranks the base ".shell-sidebar nav a" rules. */
.shell-sidebar .nav-group a {
  flex: 1 1 auto;
  padding: 0;
  color: inherit;
  text-decoration: none;
}

.shell-sidebar .nav-group a:hover,
.shell-sidebar .nav-group a.active {
  background: none;
  border-left: none;
  padding: 0;
  text-decoration: underline;
}

/* Sub-menus inside a function tab (Reports, Tools): quieter than the tab
   header — smaller, secondary colour, no band — but still collapsible with
   the same caret language. Links under them indent one more step. */
.nav-subsection { margin: 0.15rem 0; }

.nav-subgroup {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 1.25rem 0.3rem 1.6rem;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--control-text-secondary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.nav-subgroup::-webkit-details-marker { display: none; }

.nav-subgroup::before {
  content: "";
  flex: 0 0 auto;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  padding: 2px;
  transform: rotate(-45deg); /* caret points right when collapsed */
  transition: transform 0.12s ease;
}

details[open] > .nav-subgroup::before { transform: rotate(45deg); } /* points down */

.nav-subgroup:hover { color: var(--control-text); }

/* .shell-sidebar prefix: must outrank the base ".shell-sidebar nav a" rules,
   which carry more compound selectors than a bare ".nav-subsection a". */
.shell-sidebar .nav-subsection a { padding-left: 2.1rem; }

.shell-sidebar .nav-subsection a:hover,
.shell-sidebar .nav-subsection a.active { padding-left: calc(2.1rem - 3px); }

/* Rail collapses first; then the sidebar */
@media (max-width: 1200px) {
  .shell-three-col {
    grid-template-columns: 220px 1fr;
    grid-template-areas:
      "header header"
      "sidebar main"
      "rail rail"
      "footer footer";
  }
  .shell-rail { position: static; max-height: 420px; border-left: none; border-top: 1px solid var(--control-border); }
}

/* ---------- Cards ---------- */

.card {
  background: var(--control-surface);
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  box-shadow: var(--control-shadow);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.card h1, .card h2 {
  margin-top: 0;
  color: var(--control-brand-dark);
}

.card h1 { font-size: 1.5rem; }
.card h2 { font-size: 1.1875rem; }

.card .meta { font-size: 0.8125rem; color: var(--control-text-secondary); }

/* Signed-in landing: grant-gated quick-link cards (Sean, 2026-08-03) */
.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}

.home-card {
  display: block;
  background: var(--control-surface);
  border: 1px solid var(--control-border);
  border-top: 3px solid var(--control-brand);
  border-radius: var(--control-radius);
  box-shadow: var(--control-shadow);
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  color: var(--control-text);
  transition: box-shadow 0.15s, transform 0.15s;
}

.home-card:hover {
  box-shadow: 0 6px 18px rgba(28, 39, 51, 0.15);
  transform: translateY(-2px);
}

.home-card h3 { margin: 0 0 0.375rem; color: var(--control-brand-dark); font-size: 1.0625rem; }
.home-card p { margin: 0; font-size: 0.8125rem; color: var(--control-text-secondary); }

/* Wide tables scroll inside their card, never the page */
.table-scroll { overflow-x: auto; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--control-border);
}

th { color: var(--control-text-secondary); font-weight: 600; }

a { color: var(--control-brand); }

.button,
button.button {
  display: inline-block;
  background: var(--control-brand);
  color: #fff;
  border: none;
  border-radius: var(--control-radius);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.button:hover { background: var(--control-brand-dark); }

/* ---------- Header account affordance ---------- */

.header-account {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.9375rem;
}

.header-account a { color: var(--control-brand); }

.header-account .who { color: var(--control-text-secondary); }

.inline-form { display: inline; }

/* Universal desk switcher (Lou / Jeeves) — rendered only when >1 desk is allowed */
.desk-switcher {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-right: 0.75rem;
  border-right: 1px solid var(--control-border, #ccc);
}

.desk-switcher .desk-link {
  color: var(--control-brand);
  text-decoration: underline;
}

.desk-switcher .desk-current {
  color: var(--control-text-secondary);
  font-weight: 600;
}

button.linklike {
  background: none;
  border: none;
  padding: 0;
  color: var(--control-brand);
  font-size: 0.9375rem;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- What's New ---------- */

.filter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.filter-row label { font-size: 0.9375rem; color: var(--control-text-secondary); }

.filter-row select {
  font-size: 1rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-surface);
  color: var(--control-text);
}

td.nowrap { white-space: nowrap; }

td.detail-cell { min-width: 24rem; }

/* ---------- License workbench: side-by-side wire-lever cards ---------- */

.wire-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.wire-grid + .wire-grid { margin-top: 0.75rem; }

@media (max-width: 760px) {
  .wire-grid { grid-template-columns: 1fr; }
}

/* ---------- Forms (login, temp-password door) ---------- */

.card-narrow { max-width: 26rem; }

.form-field { margin-bottom: 1rem; }

.form-field label {
  display: block;
  font-size: 0.9375rem;
  color: var(--control-text-secondary);
  margin-bottom: 0.25rem;
}

.form-field input,
.form-field select {
  width: 100%;
  font-size: 1rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-surface);
  color: var(--control-text);
}

.form-field input:focus,
.form-field select:focus {
  outline: 2px solid var(--control-brand);
  outline-offset: 1px;
}

.validation-summary ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.validation-summary li,
.field-error { color: #a4262c; font-size: 0.9375rem; }

.temp-password {
  border: 1px solid var(--control-accent);
  border-radius: var(--control-radius);
  background: #fdf7ec;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

.temp-password code {
  display: block;
  font-size: 1.1875rem;
  letter-spacing: 0.06em;
  margin: 0.25rem 0;
  user-select: all;
}

/* ---------- Lou: the editorial desk (chatbox-only post-login home) ---------- */

.lou-body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--control-bg);
}

.lou-header {
  background: #fff;
  border-bottom: 3px solid var(--control-brand);
  padding: 0.5rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.lou-header .brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.lou-header .brand-ball { display: block; height: 44px; width: auto; }
.lou-header .brand-name { display: block; height: 32px; width: auto; }

.lou-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 1rem 1.25rem 1.25rem;
  min-height: 0;
}

.lou-transcript {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.5rem 0.25rem;
  min-height: 0;
}

.lou-greeting-line {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--control-brand-dark);
}

.lou-degraded {
  font-size: 0.8125rem;
  color: var(--control-text-secondary);
  margin: 0.5rem 0 0;
}

.lou-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0.5rem;
}

.lou-chip {
  background: var(--control-surface);
  border: 1px solid var(--control-border);
  border-left: 3px solid var(--control-accent);
  border-radius: var(--control-radius);
  padding: 0.375rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--control-text);
  cursor: pointer;
  text-align: left;
}

.lou-chip:hover { border-color: var(--control-brand); background: #fff; }

.lou-turn { margin: 1rem 0; }

.lou-speaker {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--control-text-secondary);
  margin-bottom: 0.25rem;
}

.lou-bubble {
  background: var(--control-surface);
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  box-shadow: var(--control-shadow);
  padding: 0.75rem 1rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-size: 1rem;
}

.lou-turn-you .lou-bubble {
  background: #eef3f9;
  border-color: #c9d8e8;
}

.lou-turn-error .lou-bubble {
  border-color: #a4262c;
  color: #a4262c;
}

.lou-working {
  color: var(--control-text-secondary);
  font-size: 0.9375rem;
  font-style: italic;
  margin: 0.75rem 0;
}

/* Streaming tool status — one line under the live bubble, latest action only */
.lou-tool-line {
  color: var(--control-text-secondary);
  font-size: 0.875rem;
  font-style: italic;
  margin: 0.25rem 0 0;
}

.lou-promptline {
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  padding-top: 0.75rem;
  border-top: 1px solid var(--control-border);
}

.lou-promptline textarea {
  flex: 1 1 auto;
  resize: none;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-surface);
  color: var(--control-text);
  max-height: 200px;
}

.lou-promptline textarea:focus {
  outline: 2px solid var(--control-brand);
  outline-offset: 1px;
}

.lou-promptline .button:disabled { opacity: 0.6; cursor: default; }

/* Proposal preview cards (propose -> preview -> editor decides; Lou never writes) */
.lou-proposal {
  border: 1px solid var(--control-accent);
  border-radius: var(--control-radius);
  background: #fdf7ec;
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
}

.lou-proposal-head {
  font-size: 0.8125rem;
  color: var(--control-text-secondary);
  margin-bottom: 0.375rem;
}

.lou-proposal h3 {
  margin: 0 0 0.375rem;
  font-size: 1.125rem;
  color: var(--control-brand-dark);
}

.lou-proposal-sub { margin: 0 0 0.375rem; font-weight: 600; font-size: 0.9375rem; }
.lou-proposal-tease { margin: 0 0 0.5rem; font-size: 0.9375rem; }

.lou-proposal details { margin: 0.5rem 0; }
.lou-proposal summary { cursor: pointer; font-size: 0.9375rem; color: var(--control-brand); }

.lou-proposal-body {
  background: var(--control-surface);
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
}

.lou-proposal-sql {
  background: #1c2733;
  color: #dde4ec;
  border-radius: var(--control-radius);
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  overflow-x: auto;
}

.lou-proposal-notes { font-size: 0.9375rem; color: var(--control-text-secondary); }

@media (max-width: 760px) {
  .lou-header .brand-name { height: 24px; }
  .lou-stage { padding: 0.75rem; }
}

/* ---------- PPP registration review queue ---------- */

.page-note {
  max-width: 60rem;
  color: var(--control-text-secondary);
  line-height: 1.5;
}

.flash-card {
  border-left: 4px solid var(--control-brand);
  background: var(--control-surface);
}

.ack-card h2 { display: flex; align-items: baseline; gap: 0.75rem; }

.ack-card h3 {
  font-size: 1rem;
  margin: 1.25rem 0 0.25rem;
  color: var(--control-text-secondary);
}

.ack-status {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.5rem;
  border-radius: var(--control-radius);
  border: 1px solid var(--control-border);
  color: var(--control-text-secondary);
}

.ack-status-unmatched { border-color: var(--control-brand); color: var(--control-brand); }

.ack-apply form { display: flex; gap: 0.5rem; align-items: center; }

.ack-apply input[type="text"] { min-width: 16rem; }

.ack-card input[type="text"] {
  font-size: 0.9375rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  background: var(--control-surface);
  color: var(--control-text);
}

.ack-card .filter-row input[type="text"] { min-width: 22rem; }

/* ---------- Responsive: sidebar collapses under the header ---------- */

@media (max-width: 760px) {
  /* .shell-rail sizing/position (static, max-height, border) is already set by the
     1200px query above and stays in effect here — nothing to override at this width. */
  .shell-two-col {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "footer";
  }

  .shell-three-col {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "rail"
      "footer";
  }

  .shell-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--control-border);
    padding: 0.25rem 0;
  }

  .shell-sidebar nav { display: flex; flex-wrap: wrap; }

  .shell-sidebar nav a { padding: 0.5rem 1rem; }

  /* Each collapsible group takes its own row so a summary never sits mid-line. */
  .shell-sidebar nav .nav-section { flex: 1 1 100%; }
}

/* ==========================================================================
   Member workbench (/members/{id}) — spec: member-admin-tabbed-workbench-spec.md
   Scoped with the mw- prefix so nothing here reaches another page.
   No state is signalled by colour alone: primary, ended, purged and duplicate
   each carry a word as well as a treatment.
   ========================================================================== */

.mw-recordbar { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding: 0.75rem 0; border-bottom: 1px solid #e3e8ee; }
.mw-crumbs { display: flex; gap: 0.5rem; align-items: baseline; }
.mw-crumb-current { font-weight: 600; }
.mw-recordbar-actions { display: flex; gap: 0.5rem; }

/* Header band + workspace. The middle column is never subdivided (Sean,
   2026-08-12): profile facts sit ABOVE the tabs in a horizontal band, not in a
   side rail. Wide children still scroll inside their own box, never the document. */
.mw-shell { margin-top: 1rem; }
.mw-work { min-width: 0; }

.mw-head { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: flex-start;
  padding: 0.75rem 0 1.25rem; }
.mw-head-id { display: flex; gap: 1rem; align-items: flex-start; }
.mw-head .mw-avatar { width: 64px; height: 64px; flex: 0 0 auto; }
.mw-head .mw-initials { font-size: 1.35rem; }
.mw-head .mw-name { margin: 0 0 0.15rem; }
.mw-head .mw-status { margin: 0.4rem 0 0.5rem; }
.mw-head .mw-research { margin-bottom: 0; }

/* Facts flow left-to-right as label-over-value pairs; each pair is a <div>
   inside the <dl> so a label can never wrap away from its value. */
.mw-facts-row { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: flex-start; }
.mw-facts-row > div { min-width: 0; }
.mw-facts-row dt { margin-top: 0; }

.mw-head .mw-quickactions { flex-direction: row; flex-wrap: wrap; gap: 0.75rem;
  margin: 0 0 0 auto; padding: 0; border-top: 0; align-self: center; }
.mw-head .mw-summary { margin: 0; }
.mw-head-reach { max-width: 360px; }
.mw-head-reach .meta { margin: 0.4rem 0 0; }

.mw-avatar { width: 88px; height: 88px; border-radius: 50%; background: #dbe7f3;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mw-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mw-initials { font-size: 1.75rem; font-weight: 600; color: #1c4e80; }

.mw-name { font-size: 1.35rem; margin: 0.75rem 0 0.15rem; }
.mw-jobtitle, .mw-company { margin: 0; color: #5a6b7d; font-size: 0.9rem; }

.mw-status { display: inline-block; margin: 0.6rem 0; padding: 0.15rem 0.6rem;
  border-radius: 999px; font-size: 0.8rem; }
.mw-status-active { background: #e4f2e4; color: #24603a; }
.mw-status-dupe { background: #fdf0d5; color: #7a4b00; }

.mw-research { display: flex; gap: 0.4rem; margin-bottom: 0.9rem; }
.mw-icon { width: 30px; height: 30px; border-radius: 6px; display: flex;
  align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700;
  text-decoration: none; border: 1px solid #cfd8e3; }
.mw-icon-li { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.mw-icon-g { background: #fff; color: #3c4043; }
.mw-icon-bc { background: #16794f; color: #fff; border-color: #16794f; }
.mw-icon:focus-visible { outline: 2px solid #1c4e80; outline-offset: 2px; }

.mw-facts { margin: 0; }
.mw-facts dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: #7a8797; margin-top: 0.8rem; }
.mw-facts dd { margin: 0.1rem 0 0; font-weight: 600; }
.mw-empty { color: #7a8797; font-weight: 400; font-style: italic; }
.mw-wrap { overflow-wrap: anywhere; }

.mw-quickactions { display: flex; flex-direction: column; gap: 0.55rem;
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid #e3e8ee; }

/* The Access swap. Icon-only, so the hit target is padded out to something a mouse
   can actually land on rather than the 15px glyph itself. inline-flex keeps the glyph
   optically centred on the licence name's baseline row. */
.mw-swap {
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  margin-left: 0.15rem;
  border-radius: 4px;
  vertical-align: -3px;
}
.mw-swap:hover { background: #eef3f8; color: var(--control-brand-dark); }
.mw-swap:focus-visible { outline: 2px solid var(--control-brand); outline-offset: 1px; }

/* Quick actions are BUTTONS. As plain links they read as body copy and were being
   missed entirely (Sean, 2026-09-08). align-self keeps each one only as wide as its
   own label in the stacked layout, so they do not become three full-width slabs. */
.mw-action {
  display: inline-block;
  align-self: flex-start;
  background: var(--control-action);
  color: #fff;
  border-radius: var(--control-radius);
  padding: 0.45rem 0.9rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.mw-action:hover { background: var(--control-action-dark); color: #fff; }
.mw-action:focus-visible { outline: 2px solid var(--control-action-dark); outline-offset: 2px; }

/* Tab strip. Selected tab takes the strong blue underline from the approved design. */
.mw-tabs { display: flex; gap: 0.25rem; overflow-x: auto; border-bottom: 1px solid #e3e8ee; }
.mw-tab { padding: 0.6rem 0.85rem; text-decoration: none; color: #46586b;
  white-space: nowrap; border-bottom: 3px solid transparent; }
.mw-tab:hover { color: #1c4e80; }
.mw-tab-active { color: #1c4e80; font-weight: 700; border-bottom-color: #1c4e80; }
.mw-tab:focus-visible { outline: 2px solid #1c4e80; outline-offset: -2px; }

.mw-panel { margin-top: 1rem; }
.mw-panel-title { margin-top: 0; font-size: 1.05rem; }
.mw-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }

/* Wide tables scroll inside themselves, never the document. */
.mw-table { width: 100%; display: block; overflow-x: auto; }
.mw-row-primary { background: #f2f7fc; }
.mw-row-purged { color: #7a8797; }
.mw-mono { font-variant-numeric: tabular-nums; }

.mw-badge { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem;
  border-radius: 999px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  background: #dbe7f3; color: #1c4e80; }
.mw-badge-quiet { background: #eceff3; color: #5a6b7d; }

.mw-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mw-tag { border: 1px solid #cfd8e3; border-radius: 999px; padding: 0.25rem 0.7rem;
  display: inline-flex; align-items: baseline; gap: 0.4rem; }
.mw-tag-ended { border-style: dashed; color: #7a8797; }
.mw-tag-name { font-weight: 600; }
.mw-tag-state { font-size: 0.72rem; text-transform: uppercase; }

.mw-note { border-top: 1px solid #eef1f5; padding: 0.9rem 0; }
.mw-note:first-of-type { border-top: 0; }
.mw-note-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.mw-note-who { font-weight: 700; }
.mw-note-body { white-space: pre-wrap; margin: 0.4rem 0; }

.mw-bio { white-space: pre-wrap; }
.mw-revision { border-top: 1px solid #eef1f5; padding-top: 0.6rem; margin-top: 0.6rem; }
.mw-list { list-style: none; margin: 0; padding: 0; }
.mw-list li { padding: 0.3rem 0; border-bottom: 1px solid #f2f4f7;
  display: flex; justify-content: space-between; gap: 1rem; }

.mw-notyet { background: #f7f9fb; border: 1px solid #e3e8ee; border-radius: 8px; padding: 1rem; }
.mw-todo { color: #7a4b00; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 860px) {
  /* Narrow screens: the header band stacks its blocks; quick actions rejoin the flow. */
  .mw-head { gap: 1rem 1.5rem; }
  .mw-head .mw-quickactions { margin-left: 0; align-self: flex-start; }
}

.mw-form .mw-field { margin-bottom: 0.7rem; display: flex; flex-direction: column; gap: 0.2rem; }
.mw-form label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: #7a8797; }
.mw-form input { padding: 0.4rem 0.5rem; border: 1px solid #cfd8e3; border-radius: 4px; font: inherit; }
.mw-form input:focus-visible { outline: 2px solid #1c4e80; outline-offset: 1px; }
.mw-formactions { display: flex; gap: 0.5rem; align-items: center;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e3e8ee; }

.mw-inlinefields { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.mw-inlinefields .mw-field { margin-bottom: 0; }
.mw-inlineform { padding: 0.5rem 0; }
.mw-row-editing { background: #f7f9fb; }
.mw-rowactions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; white-space: nowrap; }
.mw-actionform { display: inline; }
.mw-linkbutton { background: none; border: 0; padding: 0; font: inherit; color: #1c4e80;
  text-decoration: underline; cursor: pointer; }
.mw-linkbutton:focus-visible { outline: 2px solid #1c4e80; outline-offset: 2px; }
.mw-linkbutton-warn { color: #9a3412; }
.mw-addform { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid #e3e8ee; }
.mw-addform summary { cursor: pointer; font-weight: 600; }

.mw-field-wide { flex: 1 1 260px; }
.mw-field-block { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.7rem; }
.mw-field-block textarea { padding: 0.4rem 0.5rem; border: 1px solid #cfd8e3; border-radius: 4px;
  font: inherit; resize: vertical; }
.mw-field-block textarea:focus-visible { outline: 2px solid #1c4e80; outline-offset: 1px; }
.mw-field-inline { display: flex; flex-direction: row; align-items: center; gap: 0.4rem; margin-top: 0.6rem; }
.mw-field-inline label { text-transform: none; letter-spacing: 0; font-size: 0.9rem; color: inherit; }
.mw-form select { padding: 0.4rem 0.5rem; border: 1px solid #cfd8e3; border-radius: 4px; font: inherit; }
.mw-followups { background: #fdf6e7; border: 1px solid #f0dfb8; border-radius: 8px;
  padding: 0.75rem 1rem; margin-bottom: 1rem; }
.mw-followups h3 { margin-top: 0; font-size: 0.95rem; }
.mw-note-done { opacity: 0.72; }
.mw-note-foot { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; }
.mw-note-actions { margin-left: auto; }

.mw-tags-managed { flex-direction: column; align-items: stretch; gap: 0.4rem; }
.mw-tags-managed .mw-tag { justify-content: flex-start; flex-wrap: wrap; gap: 0.6rem; padding: 0.45rem 0.8rem; }
.mw-tag-actions { margin-left: auto; display: flex; gap: 0.6rem; align-items: baseline; }
.mw-tagform { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; width: 100%; }
.mw-tagform .mw-field { margin-bottom: 0; }

.mw-advisor { border-top: 1px solid #eef1f5; padding-top: 0.9rem; margin-top: 0.9rem; }
.mw-advisor:first-of-type { border-top: 0; }
.mw-advisor h4 { margin: 0.9rem 0 0.35rem; font-size: 0.85rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: #5a6b7d; }
.mw-rule { border: 0; border-top: 1px solid #e3e8ee; margin: 1.2rem 0; }
.mw-bdpicker { position: relative; }
.mw-typeahead { list-style: none; margin: 0.25rem 0 0; padding: 0.25rem;
  border: 1px solid #cfd8e3; border-radius: 6px; background: #fff;
  max-height: 260px; overflow-y: auto; }
.mw-typeahead li { padding: 0.25rem 0.4rem; }
.mw-typeahead li:hover { background: #f2f7fc; }

.mw-activityfilters { margin-bottom: 0.75rem; }
.mw-summary { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0.75rem 0;
  padding: 0.75rem 0; border-top: 1px solid #e3e8ee; border-bottom: 1px solid #e3e8ee; }
.mw-stat { border-left: 3px solid #1c4e80; padding-left: 0.7rem; }
.mw-stat-label { display: block; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.03em; color: #7a8797; }
.mw-activity { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1.25rem;
  align-items: start; }
.mw-sessions { min-width: 0; }
.mw-session { margin-bottom: 1.1rem; }
.mw-session-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 0.75rem; padding-bottom: 0.35rem; }
.mw-detail { position: sticky; top: 1rem; border-left: 1px solid #e3e8ee; padding-left: 1rem; }
.mw-detail h3 { margin-top: 0; font-size: 0.95rem; }

@media (max-width: 1100px) {
  /* Medium width: the detail rail moves BELOW the event list rather than squeezing it. */
  .mw-activity { grid-template-columns: minmax(0, 1fr); }
  .mw-detail { position: static; border-left: 0; padding-left: 0;
    border-top: 1px solid #e3e8ee; padding-top: 0.75rem; }
}

/* Legacy mini-icons, reused so staff read the rows the same way they do on subDetail. */
.mw-star { vertical-align: -3px; margin-right: 0.35rem; }
.mw-inlineicon { vertical-align: -3px; margin-left: 0.35rem; }
.mw-starbutton, .mw-iconbutton { background: none; border: 0; padding: 0; cursor: pointer;
  line-height: 1; display: inline; }
.mw-starbutton:focus-visible, .mw-iconbutton:focus-visible { outline: 2px solid #1c4e80; outline-offset: 2px; }
.mw-emailcomment { display: block; margin-top: 0.15rem; }
/* Purged addresses: the <s> element carries the meaning; this only tones the row. */
.mw-row-purged { color: #7a8797; }
.mw-row-inactive { color: #7a8797; }

.mw-confirm-target { font-size: 1.25rem; font-weight: 700; margin: 0.15rem 0 1rem; }

/* ---------- Global search bar (spec 2026-08-11) ---------- */

/* flex:1 absorbs the middle of the header; .header-account keeps its margin-left:auto
   and stays hard right. max-width stops the box swallowing the whole bar on a wide screen. */
.header-search {
  position: relative;
  flex: 1 1 auto;
  max-width: 34rem;
  margin-left: 1.5rem;
}

/* The search box is the header's workhorse — a brand-bordered pill with a
   magnifier glyph, so it reads as "search here" at a glance instead of
   disappearing into the bar (Sean, 2026-08-12). */
.header-search input {
  width: 100%;
  padding: 0.55rem 1rem 0.55rem 2.5rem;
  font-size: 1rem;
  color: var(--control-text);
  background: var(--control-surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d5f93' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") no-repeat 0.9rem center / 1.05rem;
  border: 2px solid var(--control-brand);
  border-radius: 999px;
}

.header-search input::placeholder { color: var(--control-text-secondary); }

.header-search input:focus {
  outline: none;
  border-color: var(--control-brand-dark);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(45, 95, 147, 0.22);
}

.search-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 26rem;
  overflow-y: auto;
  background: var(--control-surface);
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  box-shadow: var(--control-shadow);
}

.search-group {
  margin: 0;
  padding: 0.35rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--control-text-secondary);
  background: var(--control-bg);
  border-bottom: 1px solid var(--control-border);
}

/* The accent marks the fuzzy block as a different KIND of answer, not a better one. */
.search-group-fuzzy {
  color: var(--control-accent);
  border-left: 3px solid var(--control-accent);
}

.search-list { list-style: none; margin: 0; padding: 0; }

.search-hit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 0.75rem;
  padding: 0.45rem 0.7rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--control-border);
}

.search-hit:hover,
.search-hit.is-active { background: var(--control-bg); }

.hit-name { font-weight: 600; }

.hit-chip {
  grid-row: 1;
  grid-column: 2;
  font-size: 0.75rem;
  color: var(--control-text-secondary);
  white-space: nowrap;
}

.hit-company,
.hit-email {
  grid-column: 1;
  font-size: 0.8125rem;
  color: var(--control-text-secondary);
}

.search-empty {
  margin: 0;
  padding: 0.7rem;
  font-size: 0.9375rem;
  color: var(--control-text-secondary);
}