/* Emonics Starts Console — design tokens shared with the portal
   (services/eos-portal/static/portal.css) and the org directory
   (services/org-hierarchy/static/app.css): same navy/coral/bg/border palette,
   same spacing scale, so this console reads as part of one product family
   rather than a bolted-on tool.

   Built for 1440px and exec presentation: large panels rather than chips,
   real type hierarchy, generous whitespace, and an empty state designed as a
   first-class case — the Healthcare board is genuinely empty today and has to
   look deliberate, not broken. Nothing scrolls horizontally at any width. */

:root {
  --navy: #1E2A5E;
  --navy-dark: #141b40;
  --navy-mid: #2c3a72;
  --navy-tint: rgba(30, 42, 94, 0.06);
  --navy-tint-2: rgba(30, 42, 94, 0.11);
  --orange: #E65F3C;
  --orange-dark: #c94d2d;
  --orange-tint: rgba(230, 95, 60, 0.12);
  --icon-bg: #FDF0EC;
  --ink: #1a1f36;
  --ink-soft: #3d4560;
  --muted: #6b7280;
  --muted-light: #98a0b0;
  --bg: #F4F5F9;
  --card: #ffffff;
  --border: #E5E8F0;
  --border-soft: #EEF0F6;
  --error: #b91c1c;
  --error-bg: #fef2f2;
  --amber: #b45309;
  --amber-bg: #fef3c7;
  --amber-border: #fcd34d;
  --green: #15803d;
  --green-bg: #dcfce7;
  --blue: #1d4ed8;
  --blue-bg: #dbeafe;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 24px 60px rgba(16, 24, 40, 0.22);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* The page body must never scroll sideways. Wide content gets its own
     overflow container instead. */
  overflow-x: hidden;
}
a { color: var(--navy); }

/* ==================== login ==================== */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.login-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--orange);
  border-radius: 16px;
  width: 100%;
  max-width: 380px;
  padding: var(--space-6) var(--space-6) var(--space-5);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
}

.login-card .logo { display: block; height: 40px; width: auto; margin: 0 auto var(--space-5); }
.login-card h1 {
  font-size: 22px; font-weight: 700; color: var(--navy);
  text-align: center; margin: 0 0 var(--space-1);
}
.login-card .sub { text-align: center; color: var(--muted); margin: 0 0 var(--space-5); font-size: 13px; }
.login-card label {
  display: block; font-size: 12px; font-weight: 600; color: var(--navy);
  margin: 0 0 var(--space-2); letter-spacing: 0.02em;
}
.login-card input[type="email"], .login-card input[type="text"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 14px; font-family: inherit;
  background: #fff; color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.login-card input:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 42, 94, 0.12);
}
.login-card input[name="code"] {
  letter-spacing: 0.5em; text-align: center; font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.login-card .row { margin-bottom: var(--space-4); }
.login-card button {
  width: 100%; padding: 11px 14px; border: none; border-radius: var(--radius-sm);
  background: var(--navy); color: #fff; font-size: 14px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: background .12s ease;
}
.login-card button:hover:not(:disabled) { background: var(--navy-dark); }
.login-card button:disabled { opacity: .6; cursor: default; }
.login-card .link-btn {
  background: none; color: var(--muted); font-weight: 500; font-size: 13px;
  margin-top: var(--space-3); padding: 4px;
}
.login-card .link-btn:hover { background: none; color: var(--navy); text-decoration: underline; }
.login-card .msg {
  margin: var(--space-4) 0 0; font-size: 13px; color: var(--muted);
  text-align: center; line-height: 1.45;
}
.login-card .msg.error { color: var(--error); }
.login-card .foot {
  margin: var(--space-5) 0 0; text-align: center;
  font-size: 11.5px; color: var(--muted-light); letter-spacing: .04em;
}

/* ==================== app shell ==================== */

.app-header {
  background: var(--navy);
  border-bottom: 2px solid var(--orange);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-6);
  flex-wrap: wrap;
}

/* Canonical lockup in a WHITE CHIP.

   Sizing is evidence-based, not taste: a measured height ladder on this exact
   asset found the two-line lockup illegible at 26px, legible at 36px, crisp at
   44px (finance window's finding, 2026-07-25). 36px is the floor.

   height-only + width:auto so the asset is never distorted, and flex:none so
   the brand -- a flex ITEM of the flex .app-header -- can never be shrunk back
   down by sibling pressure. Both of those have regressed before. */
.app-header .brand {
  flex: none;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: var(--radius);
  padding: 6px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.app-header .brand img { display: block; height: 36px; width: auto; }

.app-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: var(--space-1);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  padding-left: var(--space-5);
}
.app-title-main { color: #fff; font-size: 15px; font-weight: 650; letter-spacing: -0.005em; }
.app-title-sub { color: rgba(255, 255, 255, 0.62); font-size: 12px; }

.app-account { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
.app-account .who { color: rgba(255, 255, 255, 0.78); font-size: 13px; white-space: nowrap; }
.all-tools {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: background .12s ease, color .12s ease;
}
.all-tools:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.btn-ghost {
  background: none; border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.92); border-radius: var(--radius-sm);
  padding: 7px 14px; font-size: 13px; font-family: inherit; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.06); }

.app-main { max-width: 1240px; margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-7); }

.view { display: none; }
.view.active { display: block; }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-5);
}
.page-head-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.page-title {
  font-size: 25px; font-weight: 700; color: var(--navy);
  letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
.page-sub { color: var(--muted); font-size: 13.5px; margin: 0; max-width: 68ch; }

/* ==================== segmented control (division tabs) ==================== */

.segmented { display: inline-flex; background: #e9ecf3; border-radius: 8px; padding: 3px; gap: 2px; }
.seg {
  background: none; border: none; color: var(--muted); font-family: inherit;
  font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 6px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.seg:hover:not(.active) { color: var(--ink); }
.seg.active { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
.seg-count {
  background: var(--navy-tint-2); color: var(--navy); font-size: 11px; font-weight: 700;
  min-width: 20px; height: 18px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
  font-variant-numeric: tabular-nums;
}
.seg.active .seg-count { background: var(--orange); color: #fff; }
/* A zero count reads as "nothing here", so it is dimmed rather than shouted. */
.seg-count.zero { background: #dfe3ec; color: var(--muted-light); }
.seg.active .seg-count.zero { background: #e9ecf3; color: var(--muted); }

/* ==================== banners ==================== */

.banner {
  border-radius: var(--radius); padding: var(--space-3) var(--space-4);
  font-size: 13px; margin-bottom: var(--space-4); line-height: 1.5;
  border: 1px solid transparent;
}
.banner-warn { background: var(--amber-bg); border-color: var(--amber-border); color: #78350f; }
.banner-info { background: #eef1f8; border-color: var(--border); color: var(--ink-soft); }
.banner strong { font-weight: 650; }

/* ==================== stage panels ==================== */

/* Large panels, not chips: each stage is a full-width surface with its own
   header, so an exec scanning the board reads stage-by-stage rather than
   hunting through a uniform grid. */
.stage-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: var(--space-5);
  overflow: hidden;
}

.stage-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, #fcfcfe 0%, #ffffff 100%);
}
.stage-marker { width: 4px; height: 26px; border-radius: 2px; flex: none; background: var(--muted-light); }
.stage-marker.stage-pre-offer-bgc { background: var(--blue); }
.stage-marker.stage-legal         { background: var(--amber); }
.stage-marker.stage-offer         { background: var(--orange); }

.stage-title { font-size: 16px; font-weight: 680; color: var(--navy); letter-spacing: -0.01em; margin: 0; }
.stage-meta { color: var(--muted); font-size: 12.5px; margin-left: auto; font-variant-numeric: tabular-nums; }

.stage-body { padding: var(--space-4) var(--space-5) var(--space-5); }

/* ==================== start cards ==================== */

.card-grid {
  display: grid;
  /* auto-fill + minmax keeps the grid fluid without a horizontal scrollbar at
     any width; at 1440px this settles into three generous columns. */
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-4);
}

.start-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.start-card:hover {
  border-color: var(--navy-tint-2);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.start-card:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.card-consultant {
  font-size: 15px; font-weight: 660; color: var(--ink);
  letter-spacing: -0.01em; line-height: 1.3; margin: 0;
}
.card-role { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }

.card-ref {
  font-family: var(--mono); font-size: 11px; color: var(--muted-light);
  white-space: nowrap; flex: none; padding-top: 2px;
}

.card-rows { display: flex; flex-direction: column; gap: 5px; }
.card-row { display: flex; gap: var(--space-3); font-size: 12.5px; align-items: baseline; }
.card-row .k { color: var(--muted-light); width: 74px; flex: none; }
.card-row .v { color: var(--ink-soft); font-weight: 500; overflow-wrap: anywhere; }

/* Pills on one row, owner always on its own row beneath.

   The owner used to share the row with `margin-left:auto`, which read fine on
   a card with two pills and broke on a card with four — the name wrapped to a
   second line on some cards and not others, so a grid of cards had ragged,
   inconsistent heights. Separating the rows makes every card the same shape
   regardless of how many state pills it carries. */
.card-foot {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding-top: var(--space-3); border-top: 1px solid var(--border-soft);
}
.card-pills { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 650; padding: 3px 9px; border-radius: 999px;
  letter-spacing: .01em;
}
.pill-div  { background: var(--navy-tint); color: var(--navy); }
.pill-days { background: #eef1f8; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* Ageing is the one thing on the card that should catch the eye. */
.pill-days.warn { background: var(--amber-bg); color: var(--amber); }
.pill-days.hot  { background: #fee2e2; color: #b91c1c; }
.pill-po   { background: var(--green-bg); color: var(--green); }
.pill-bgc  { background: var(--blue-bg); color: var(--blue); }
.pill-owner {
  color: var(--muted); font-weight: 500; background: none;
  padding: 0; font-size: 11.5px;
}
.pill-owner::before { content: "Owner · "; color: var(--muted-light); }

/* ==================== empty states ====================

   Designed as a first-class case, not an afterthought. Healthcare is
   genuinely empty today and the board will be near-empty at review, so this
   is a surface the exec team WILL see. It has to look intentional. */

.empty-state {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-7) var(--space-6);
  text-align: center;
}
.empty-mark {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--icon-bg); color: var(--orange);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: var(--space-4);
}
.empty-title {
  font-size: 17px; font-weight: 660; color: var(--navy);
  margin: 0 0 var(--space-2); letter-spacing: -0.01em;
}
.empty-body {
  font-size: 13.5px; color: var(--muted); margin: 0 auto;
  max-width: 46ch; line-height: 1.6;
}

/* ==================== detail view ==================== */

.back-link {
  background: none; border: none; color: var(--muted); font-family: inherit;
  font-size: 13px; cursor: pointer; padding: 0; margin-bottom: var(--space-4);
}
.back-link:hover { color: var(--navy); }

.detail-head {
  background: var(--card); border: 1px solid var(--border);
  border-top: 3px solid var(--orange);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: var(--space-5); margin-bottom: var(--space-5);
}
.detail-head-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
}
.detail-name {
  font-size: 24px; font-weight: 700; color: var(--navy);
  letter-spacing: -0.02em; margin: 0 0 var(--space-1);
}
.detail-sub { color: var(--muted); font-size: 13.5px; margin: 0; }
.detail-pills { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

.detail-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; flex: none; }

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 1000px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } }

.panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  overflow: hidden; margin-bottom: var(--space-5);
}
.panel-head {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px; font-weight: 680; color: var(--navy);
  letter-spacing: .02em; text-transform: uppercase;
}
.panel-body { padding: var(--space-4) var(--space-5) var(--space-5); }

/* 180px min so the left panel resolves to THREE columns at 1440px rather than
   two — the detail view is scanned, not read, and a shorter panel keeps the
   whole start on one screen with the history beside it. */
.field-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4) var(--space-5);
}
.field .k {
  display: block; font-size: 11px; color: var(--muted-light);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px;
}
.field .v { font-size: 14px; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.field .v.empty { color: var(--muted-light); font-weight: 400; }

/* Append-only event history. Read top-down as a timeline. */
.event-list { list-style: none; margin: 0; padding: 0; }
.event {
  display: flex; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border-soft);
}
.event:last-child { border-bottom: none; }
.event-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--orange);
  flex: none; margin-top: 6px;
}
.event-dot.deferred { background: var(--amber); }
.event-body { min-width: 0; }
.event-summary { font-size: 13.5px; color: var(--ink); margin: 0 0 2px; overflow-wrap: anywhere; }
.event-meta { font-size: 11.5px; color: var(--muted-light); font-variant-numeric: tabular-nums; }
.event-override {
  display: inline-block; margin-left: var(--space-2);
  background: var(--amber-bg); color: var(--amber);
  font-size: 10.5px; font-weight: 650; padding: 1px 7px; border-radius: 999px;
}

/* ==================== buttons ==================== */

.btn-primary, .btn-secondary {
  border-radius: var(--radius-sm); padding: 9px 16px; font-size: 13px;
  font-weight: 600; font-family: inherit; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-primary { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.btn-primary:hover:not(:disabled) { background: var(--navy-dark); border-color: var(--navy-dark); }
.btn-primary:disabled { opacity: .5; cursor: default; }
.btn-secondary { background: #fff; color: var(--ink-soft); border: 1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { border-color: var(--muted-light); color: var(--ink); }
.btn-secondary:disabled { opacity: .5; cursor: default; }
.btn-action { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn-action:hover:not(:disabled) { background: var(--orange-dark); border-color: var(--orange-dark); }

/* ==================== modal ==================== */

.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(20, 27, 64, 0.45);
  align-items: center; justify-content: center; padding: var(--space-5); z-index: 50;
}
.modal-overlay.open { display: flex; }
.modal-card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 520px; padding: var(--space-5);
  max-height: 90vh; overflow-y: auto;
}
.modal-card h2 { font-size: 18px; font-weight: 680; color: var(--navy); margin: 0 0 var(--space-2); }
.modal-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 var(--space-4); }
.modal-note-box {
  background: #eef1f8; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
  font-size: 12.5px; color: var(--ink-soft); margin-bottom: var(--space-4); line-height: 1.55;
}
.modal-card label {
  display: block; font-size: 12px; font-weight: 600; color: var(--navy);
  margin: 0 0 var(--space-2); letter-spacing: .02em;
}
.label-hint { color: var(--muted-light); font-weight: 400; }
.modal-card textarea {
  width: 100%; min-height: 74px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13.5px; font-family: inherit; resize: vertical; color: var(--ink);
}
.modal-card textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30, 42, 94, 0.12);
}
.modal-actions {
  display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5);
}
.form-error {
  background: var(--error-bg); border: 1px solid #fecaca; color: var(--error);
  border-radius: var(--radius-sm); padding: var(--space-3);
  font-size: 12.5px; margin-top: var(--space-3);
}

/* ==================== card inline action ==================== */

/* The raise button sits on the card because the marketing floor works the
   board, not the detail page. Quiet by default so a grid of cards still reads
   as data rather than as a wall of buttons; it commits to coral on hover. */
.card-actions {
  display: flex; gap: var(--space-2);
  padding-top: var(--space-3); margin-top: var(--space-1);
  border-top: 1px solid var(--border-soft);
}
.btn-inline {
  background: #fff; border: 1px solid var(--border);
  color: var(--ink-soft); border-radius: var(--radius-sm);
  padding: 6px 12px; font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-inline:hover {
  background: var(--icon-bg); border-color: var(--orange); color: var(--orange-dark);
}

/* ==================== economics ==================== */

.pay-details { margin-top: var(--space-4); }
.pay-details .k {
  display: block; font-size: 11px; color: var(--muted-light);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: var(--space-2);
}
/* Free text, so it keeps the operator's own line breaks — the structure a
   person typed IS the information. */
.pay-details-body {
  margin: 0; font-size: 14px; color: var(--ink); line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: #fbfbfd; border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
}

.provenance { margin: var(--space-4) 0 0; font-size: 12px; color: var(--muted-light); }
/* Inherited figures are visually quieter than confirmed ones — an exec should
   be able to tell at a glance which numbers a colleague actually stood behind. */
.provenance.inherited { color: var(--amber); }

.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 560px) { .field-pair { grid-template-columns: 1fr; } }
/* De-emphasized, never hidden: a C2C start can legitimately carry an
   annualized figure, and hiding the field would lose data someone meant to
   record. */
.de-emphasized { opacity: .55; }
.de-emphasized:focus-within { opacity: 1; }

.field-hint { margin: var(--space-2) 0 0; font-size: 11.5px; color: var(--muted-light); line-height: 1.5; }

.modal-text-input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 13.5px; font-family: inherit;
  color: var(--ink); background: #fff;
}
.modal-text-input:focus, .modal-card select:focus, .modal-card input[type="file"]:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30, 42, 94, 0.12);
}
.modal-card select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 13.5px; font-family: inherit;
  background: #fff; color: var(--ink); margin-bottom: var(--space-4);
}
.modal-card input[type="file"] {
  width: 100%; padding: 9px 12px; border: 1px dashed var(--border);
  border-radius: var(--radius-sm); font-size: 13px; font-family: inherit;
  background: #fbfbfd;
}
.modal-card .modal-text-input + label,
.modal-card textarea + label { margin-top: var(--space-4); }

/* ==================== evidence, expanding inline ==================== */

.evidence-item {
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: var(--space-3); overflow: hidden; background: #fff;
}
.evidence-item:last-child { margin-bottom: 0; }

.evidence-head {
  display: flex; align-items: flex-start; gap: var(--space-3);
  width: 100%; padding: var(--space-3) var(--space-4);
  background: none; border: none; font-family: inherit; cursor: pointer;
  text-align: left;
}
.evidence-head:hover { background: #fbfbfd; }
.evidence-caret { color: var(--muted-light); font-size: 11px; padding-top: 3px; flex: none; }
.evidence-label { min-width: 0; }
.evidence-kind {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.evidence-meta {
  display: block; font-size: 11.5px; color: var(--muted-light);
  margin-top: 2px; overflow-wrap: anywhere;
}

.evidence-body { border-top: 1px solid var(--border-soft); background: #f7f8fb; padding: var(--space-3); }
.evidence-image { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); }
/* A PDF gets real height — evidence you have to squint at is evidence nobody
   checks. */
.evidence-frame { width: 100%; height: 560px; border: none; border-radius: var(--radius-sm); background: #fff; }
.panel-hint { margin: 0 0 var(--space-4); }