/* Insurance Warehouse broker portal — visual language per docs/styleguide/visual-language.md */

:root {
  --iw-navy: #02345D;
  --iw-red: #AD0426;
  --iw-paper: #F7F4EE;
  --iw-white: #FFFFFF;
  --iw-navy-soft: rgba(2, 52, 93, 0.10);

  --stroke: 7px;              /* door-frame line weight */
  --sb-collapsed: 176px;
  --sb-expanded: 340px;
  --door-y: 158px;            /* where the door frame starts, below the wordmark */
  --door-x: 317px;            /* door edge position when open */
  --ease-door: cubic-bezier(0.3, 0.9, 0.2, 1);
  --t-door: 450ms;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Libre Franklin", sans-serif;
  color: var(--iw-navy);
  background:
    linear-gradient(var(--iw-navy-soft) 1px, transparent 1px) 0 0 / 100% 36px,
    linear-gradient(90deg, var(--iw-navy-soft) 1px, transparent 1px) 0 0 / 36px 100%,
    var(--iw-paper);
  background-blend-mode: normal;
  min-height: 100vh;
}


/* ---------------- Sidebar: the building ---------------- */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sb-collapsed);
  overflow: hidden;
  z-index: 10;
  transition: width var(--t-door) var(--ease-door);
}
body.expanded .sidebar { width: var(--sb-expanded); }

/* geometry traced from the logo at scale 0.22 — see docs/styleguide/assets/building.svg */

/* the facade's white face: the "sheet of paper" (solid white, no grid) */
.bldg-paper {
  position: absolute;
  left: 68px; top: 0; bottom: 0; width: 102.5px;
  background: var(--iw-white);
  clip-path: polygon(0 3px, 100% 48px, 100% 100%, 0 100%);
}

/* white interior revealed as the door opens (continuous with the paper) */
.bldg-door-fill {
  position: absolute;
  left: 165px; top: var(--door-y); bottom: 0;
  width: 0;
  background: var(--iw-white);
  transition: width var(--t-door) var(--ease-door);
}
body.expanded .bldg-door-fill { width: calc(var(--door-x) - 165px + var(--stroke)); }

/* the tower: dark left side, slanted top rising to its apex */
.bldg-tower {
  position: absolute;
  left: 6px; top: 28px; bottom: 0; width: 41px;
  background: var(--iw-navy);
  clip-path: polygon(0 19px, 100% 0, 100% 100%, 0 100%);
}

/* the tower's white front face, below its descending cap band */
.bldg-front {
  position: absolute;
  left: 46.6px; top: 36px; bottom: 0; width: 17.4px;
  background: var(--iw-white);
  clip-path: polygon(0 1px, 100% 9px, 100% 100%, 0 100%);
}

/* cap band + roofline/return strokes */
.bldg-cap { position: absolute; top: 0; left: 0; }

/* facade left wall, continuing below the cap */
.bldg-wall {
  position: absolute;
  left: 68px; top: 3px; bottom: 0; width: 9.2px;
  background: var(--iw-navy);
  clip-path: polygon(0 0, 100% 4.1px, 100% 100%, 0 100%); /* top follows the roofline slant */
}

/* collapsed: the return continues as a full-height right border;
   expanded: it fades, the wordmark crosses and the door frame takes over below */
.bldg-return {
  position: absolute;
  left: 165.2px; top: 70px; bottom: 0; width: 5.3px;
  background: var(--iw-navy);
  transition: opacity 200ms ease;
}
body.expanded .bldg-return { opacity: 0; }

/* the door: lintel tracks out from under the return, edge rides its far end */
.bldg-lintel {
  position: absolute;
  left: 165.2px; top: var(--door-y); height: var(--stroke);
  width: 0;
  background: var(--iw-navy);
  transition: width var(--t-door) var(--ease-door);
}
body.expanded .bldg-lintel { width: calc(var(--door-x) - 165.2px + var(--stroke)); }

.bldg-door-edge {
  position: absolute;
  left: 165.2px; top: var(--door-y); bottom: 0; width: var(--stroke);
  background: var(--iw-navy);
  opacity: 0;
  transition: left var(--t-door) var(--ease-door), opacity 150ms ease;
}
body.expanded .bldg-door-edge { left: var(--door-x); opacity: 1; }

/* wordmark left-aligned on the paper with a buffer, as in the logo lockup;
   sits just below the return, which has no line where the text crosses */
.wordmark {
  position: absolute;
  left: 101px; top: 79px;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 300ms ease, transform var(--t-door) var(--ease-door);
  white-space: nowrap;
}
body.expanded .wordmark {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 120ms;
}
.wordmark-name {
  font-size: 23px;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--iw-red);
}
.wordmark-tag {
  margin-top: 7px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--iw-navy);
}

/* ---------------- Nav inside the face ---------------- */

.nav {
  position: absolute;
  top: 180px;
  left: 100px;
  width: 44px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: left var(--t-door) var(--ease-door), width var(--t-door) var(--ease-door);
}
body.expanded .nav { left: 97px; width: 204px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 12px;
  border-radius: 5px;
  color: var(--iw-navy);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  transition: background 150ms ease;
}
.nav-item:hover { background: rgba(2, 52, 93, 0.07); }
.nav-item.is-active {
  background: var(--iw-navy);
  color: var(--iw-paper);
  box-shadow: inset 3px 0 0 var(--iw-red);
}
.nav-item svg {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-item span {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 200ms ease, transform 250ms var(--ease-door);
}
body.expanded .nav-item span {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(180ms + var(--i) * 35ms);
}

/* ---------------- Toggle ---------------- */

.toggle {
  position: absolute;
  bottom: 18px;
  left: 100px;
  width: 44px; height: 38px;
  display: grid;
  place-items: center;
  background: none;
  border: 1.5px solid var(--iw-navy-soft);
  border-radius: 5px;
  cursor: pointer;
  transition: left var(--t-door) var(--ease-door), border-color 150ms ease;
}
body.expanded .toggle { left: 97px; }
.toggle:hover { border-color: var(--iw-navy); }
.toggle svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: var(--iw-navy);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--t-door) var(--ease-door);
}
body.expanded .toggle svg { transform: rotate(180deg); }

/* ---------------- Content ---------------- */

.content {
  margin-left: var(--sb-collapsed);
  padding: 88px 72px 48px;
  /* Wider than the original shell: a dashboard needs room for two chart
     columns, and the panel grid handles the narrow case by collapsing. */
  max-width: 1440px;
  transition: margin-left var(--t-door) var(--ease-door);
}
/* Make room for the report builder when it is docked open. */
body.agent-open .content { margin-right: var(--agent-w); }
body.expanded .content { margin-left: var(--sb-expanded); }

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--iw-red);
  margin-bottom: 20px;
}

/* Two sizes, deliberately far apart.
   `.display` is the dashboard greeting and nothing else — one page in the app
   gets to shout. Everywhere else the all-caps eyebrow above IS the page header,
   and `.page-title` is only for detail pages that must name the specific report
   or carrier being shown. */
h1 {
  font-size: clamp(52px, 7vw, 84px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin-bottom: 26px;
}
h1 em {
  font-family: "Source Serif 4", serif;
  font-style: italic;
  font-weight: 600;
  color: var(--iw-red);
  letter-spacing: -0.01em;
}

h1.page-title {
  font-size: clamp(23px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 22px;
}

/* The eyebrow is now the page header on every page but the dashboard, so it
   carries the space that the h1 used to. Pages that follow it with a
   .page-title tighten that back up. */
.eyebrow { margin-bottom: 28px; }
.eyebrow:has(+ h1) { margin-bottom: 12px; }
.eyebrow a { color: inherit; text-decoration: none; border-bottom: 1.5px solid currentColor; }
.eyebrow a:hover { color: var(--iw-navy); }

.lede {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  max-width: 52ch;
  color: rgba(2, 52, 93, 0.82);
  margin-bottom: 56px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-bottom: 64px;
}
.card {
  background: var(--iw-white);
  border: 1.5px solid var(--iw-navy-soft);
  border-top: 4px solid var(--iw-navy);
  padding: 22px 22px 20px;
}
.card h2 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.card-kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(2, 52, 93, 0.55);
  margin: 5px 0 18px;
}
.card-empty {
  border: 1.5px dashed var(--iw-navy-soft);
  border-radius: 4px;
  padding: 26px 12px;
  text-align: center;
  font-family: "Source Serif 4", serif;
  font-style: italic;
  font-size: 14.5px;
  color: rgba(2, 52, 93, 0.5);
}

.foot {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(2, 52, 93, 0.45);
  border-top: 1.5px solid var(--iw-navy-soft);
  padding-top: 18px;
}

/* ================================================================
   Reporting: KPIs, panels, tables, report builder
   ================================================================ */

:root { --agent-w: 420px; }

.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;
}

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

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.kpi {
  background: var(--iw-white);
  border: 1.5px solid var(--iw-navy-soft);
  border-top: 4px solid var(--iw-navy);
  padding: 16px 18px 14px;
}
.kpi:first-child { border-top-color: var(--iw-red); }
.kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(2, 52, 93, 0.55);
}
.kpi-value {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.kpi-sub {
  font-family: "Source Serif 4", serif;
  font-style: italic;
  font-size: 12.5px;
  color: rgba(2, 52, 93, 0.5);
  margin-top: 3px;
}

/* ---------------- Loading skeletons ----------------
   The dashboard paints its whole layout before any number arrives, so what
   lands is text rather than structure and nothing reflows under the reader.
   These are the placeholders that hold the space in the meantime. */

.skel {
  display: inline-block;
  height: 1em;
  vertical-align: middle;
  border-radius: 3px;
  background:
    linear-gradient(90deg,
      rgba(2, 52, 93, 0.07) 0%,
      rgba(2, 52, 93, 0.14) 40%,
      rgba(2, 52, 93, 0.07) 80%);
  background-size: 220% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
/* The KPI numbers are 30px/900, so their placeholder needs the same optical
   weight or the cards visibly grow when the figures arrive. */
.skel-lg { height: 0.8em; border-radius: 4px; }

@keyframes skel-shimmer {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}

/* Stagger the bars so the panel shimmers as a wave rather than a block. */
/* The dashboard's charts are horizontal bars sorted longest-first, so the
   placeholder distributes down the panel and steps its widths down to match.
   Bottom-anchoring it left a void where the longest bars belong. */
.skel-chart {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 300px;
  padding: 14px 0;
}
.skel-chart .skel-bar { height: 14px; border-radius: 2px; }
.skel-chart .skel-bar:nth-child(2n)   { animation-delay: 0.12s; }
.skel-chart .skel-bar:nth-child(3n)   { animation-delay: 0.24s; }

.skel-table table { width: 100%; border-collapse: collapse; }
.skel-table td { padding: 11px 10px; border-bottom: 1px solid var(--iw-navy-soft); }
.skel-table tr:nth-child(2n) .skel { animation-delay: 0.18s; }

.skel-facts li { border-bottom: 1px solid var(--iw-navy-soft); padding: 10px 0; }
.skel-facts li:nth-child(2n) .skel { animation-delay: 0.18s; }

/* The caveat placeholder is three stacked lines of prose. */
.caveat .skel { margin-bottom: 7px; }

/* Respect the OS setting: keep the grey blocks, drop the motion. */
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; background: rgba(2, 52, 93, 0.10); }
}

/* ---------------- Caveat block ----------------
   Deliberately prominent. The premium estimate is the one number on this page
   most likely to be quoted in a meeting, and it needs its asterisk attached. */

.caveat {
  background: rgba(173, 4, 38, 0.04);
  border-left: 4px solid var(--iw-red);
  padding: 14px 18px;
  font-size: 13.5px;
  line-height: 1.62;
  color: rgba(2, 52, 93, 0.85);
  max-width: 92ch;
  margin-bottom: 40px;
}
.caveat strong { font-weight: 700; }

/* ---------------- Panels ---------------- */

.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
  gap: 20px;
  margin-bottom: 56px;
  align-items: start;
}
.panel {
  background: var(--iw-white);
  border: 1.5px solid var(--iw-navy-soft);
  border-top: 4px solid var(--iw-navy);
  padding: 20px 22px 18px;
  min-width: 0;                 /* let charts shrink inside the grid track */
}
.panel-wide { grid-column: 1 / -1; }
.panel > header { margin-bottom: 16px; }
.panel h2 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.panel-kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(2, 52, 93, 0.5);
  margin-top: 4px;
}
.panel-body { min-height: 60px; min-width: 0; }
.panel-note {
  font-family: "Source Serif 4", serif;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(2, 52, 93, 0.55);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--iw-navy-soft);
}

.panel-loading, .panel-empty, .panel-error {
  padding: 30px 14px;
  text-align: center;
  font-family: "Source Serif 4", serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(2, 52, 93, 0.5);
}
.panel-error {
  font-family: "Libre Franklin", sans-serif;
  font-style: normal;
  font-size: 13px;
  color: var(--iw-red);
  background: rgba(173, 4, 38, 0.05);
  border: 1px solid rgba(173, 4, 38, 0.2);
  text-align: left;
  padding: 14px 16px;
}

/* Vega renders into a div; keep it from overflowing its track. */
.panel-body .vega-embed,
.agent-chart .vega-embed { width: 100%; }
.panel-body svg, .agent-chart svg { max-width: 100%; height: auto; }

/* ---------------- Facts list ---------------- */

.facts { list-style: none; }
.facts li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--iw-navy-soft);
  font-size: 13.5px;
  line-height: 1.45;
}
.facts li:last-child { border-bottom: 0; }
.facts span {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 4.5ch;
  text-align: right;
  color: var(--iw-navy);
}
.facts em {
  font-family: "Source Serif 4", serif;
  font-size: 12.5px;
  color: rgba(2, 52, 93, 0.5);
}

/* ---------------- Tables ---------------- */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(2, 52, 93, 0.55);
  padding: 0 12px 9px 0;
  border-bottom: 1.5px solid var(--iw-navy-soft);
  white-space: nowrap;
}
tbody td {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid rgba(2, 52, 93, 0.06);
  vertical-align: top;
}
tbody tr:hover { background: rgba(2, 52, 93, 0.025); }
td.num, th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-right: 0;
}
.table-more {
  font-size: 12px;
  color: rgba(2, 52, 93, 0.5);
  margin-top: 10px;
}

/* ---------------- Report list ---------------- */

.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 18px;
  margin-bottom: 48px;
}
.report-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--iw-white);
  border: 1.5px solid var(--iw-navy-soft);
  border-top: 4px solid var(--iw-navy);
  padding: 20px 20px 16px;
  transition: transform 140ms ease, border-color 140ms ease;
}
.report-card:hover {
  transform: translateY(-2px);
  border-color: rgba(2, 52, 93, 0.3);
  border-top-color: var(--iw-red);
}
.report-card.is-default { border-top-color: var(--iw-red); }
.report-card h3 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.report-prompt {
  font-family: "Source Serif 4", serif;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(2, 52, 93, 0.62);
  margin-bottom: 12px;
}
.report-meta {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(2, 52, 93, 0.45);
}

.empty-state {
  border: 1.5px dashed var(--iw-navy-soft);
  padding: 40px 24px;
  text-align: center;
}
.empty-state p { font-size: 15px; margin-bottom: 8px; }
.empty-hint {
  font-family: "Source Serif 4", serif;
  font-style: italic;
  color: rgba(2, 52, 93, 0.55);
  max-width: 46ch;
  margin: 0 auto;
}

/* ---------------- Report page bits ---------------- */

.link-back { color: var(--iw-red); text-decoration: none; }
.link-back:hover { text-decoration: underline; }

.sql-details {
  border: 1.5px solid var(--iw-navy-soft);
  background: var(--iw-white);
  margin-bottom: 24px;
}
.sql-details summary {
  cursor: pointer;
  padding: 12px 18px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(2, 52, 93, 0.6);
}
.sql-details pre {
  padding: 0 18px 18px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  color: rgba(2, 52, 93, 0.85);
}

.report-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1.5px solid var(--iw-navy-soft);
  padding-top: 18px;
  margin-bottom: 40px;
}

/* ---------------- Buttons ---------------- */

.btn-primary, .btn-danger, .btn-quiet {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 11px 18px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.btn-primary { background: var(--iw-navy); color: var(--iw-paper); }
.btn-primary:hover { background: var(--iw-red); }
.btn-primary:disabled { opacity: 0.5; cursor: default; }
.btn-quiet {
  background: transparent;
  color: rgba(2, 52, 93, 0.6);
  border-color: var(--iw-navy-soft);
}
.btn-quiet:hover { color: var(--iw-navy); border-color: var(--iw-navy); }
.btn-danger {
  background: transparent;
  color: var(--iw-red);
  border-color: rgba(173, 4, 38, 0.35);
}
.btn-danger:hover { background: var(--iw-red); color: var(--iw-paper); }

/* ---------------- Report builder ----------------
   A docked panel rather than a modal: you want to see the dashboard you are
   describing while you describe it. */

.agent-fab {
  position: fixed;
  right: 26px; bottom: 26px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--iw-navy);
  color: var(--iw-paper);
  border: 0;
  padding: 14px 20px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(2, 52, 93, 0.24);
  transition: background 160ms ease;
}
.agent-fab:hover { background: var(--iw-red); }
.agent-fab svg { width: 17px; height: 17px; fill: currentColor; }
body.agent-open .agent-fab { display: none; }

.agent[hidden] { display: none; }
.agent {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--agent-w);
  z-index: 45;
  display: flex;
  flex-direction: column;
  background: var(--iw-white);
  border-left: 1.5px solid var(--iw-navy-soft);
  box-shadow: -8px 0 28px rgba(2, 52, 93, 0.1);
}
.agent-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 16px;
  border-bottom: 1.5px solid var(--iw-navy-soft);
}
.agent-head .eyebrow { margin-bottom: 6px; }
.agent-head h2 { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; }
.agent-close {
  background: none; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1;
  color: rgba(2, 52, 93, 0.45);
}
.agent-close:hover { color: var(--iw-red); }

.agent-body { flex: 1; overflow-y: auto; padding: 20px 22px; min-width: 0; }
.agent-hint {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(2, 52, 93, 0.75);
  margin-bottom: 20px;
}
.agent-sub {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(2, 52, 93, 0.5);
  margin: 16px 0 10px;
}
.agent-examples { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  background: var(--iw-paper);
  border: 1.5px solid var(--iw-navy-soft);
  color: rgba(2, 52, 93, 0.85);
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.chip:hover { border-color: var(--iw-navy); background: var(--iw-white); }

.agent-result h3 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.agent-note {
  background: rgba(2, 52, 93, 0.04);
  border-left: 3px solid var(--iw-navy);
  padding: 10px 13px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(2, 52, 93, 0.8);
  margin-bottom: 16px;
}
.agent-chart { margin-bottom: 14px; min-width: 0; }
.agent-chart table { font-size: 11.5px; }
.agent-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.agent-form {
  border-top: 1.5px solid var(--iw-navy-soft);
  padding: 16px 22px 20px;
  background: var(--iw-paper);
}
.agent-form textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--iw-navy);
  background: var(--iw-white);
  border: 1.5px solid var(--iw-navy-soft);
  padding: 11px 13px;
  resize: vertical;
  margin-bottom: 10px;
}
.agent-form textarea:focus { outline: 2px solid var(--iw-navy); outline-offset: -1px; }
.agent-form textarea:disabled { opacity: 0.6; }
.agent-form button {
  width: 100%;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--iw-navy);
  color: var(--iw-paper);
  border: 0;
  padding: 13px;
  cursor: pointer;
  transition: background 140ms ease;
}
.agent-form button:hover { background: var(--iw-red); }
.agent-form button:disabled { opacity: 0.55; cursor: default; }

/* Disabled nav items read as placeholders, not broken links. */
.nav-item.is-disabled { opacity: 0.42; cursor: default; }

/* ---------------- Narrow screens ---------------- */

@media (max-width: 1180px) {
  .content { padding: 72px 40px 40px; }
  body.agent-open .content { margin-right: 0; }
  .agent { width: min(var(--agent-w), 100vw); }
}
@media (max-width: 820px) {
  .content { padding: 64px 24px 32px; }
  .panels { grid-template-columns: 1fr; }
  .agent { width: 100vw; }
}

/* ---------------- Narrow viewports: the sidebar must yield ----------------
   The building is 176px wide and fixed, and .content carries a matching
   margin-left. Below ~700px that leaves too little room for the display h1
   (52px floor, unbreakable words) and for .kpis, whose auto-fit tracks cannot
   shrink below their 168px minimum — both overflowed the viewport horizontally
   with nothing to clip them. Shrink the building and relax the minimums. */

@media (max-width: 700px) {
  :root { --sb-collapsed: 84px; }

  /* Scale the traced geometry down with the rail so it stays coherent. */
  .sidebar { transform-origin: left top; }
  .bldg-paper, .bldg-tower, .bldg-front, .bldg-cap,
  .bldg-wall, .bldg-return, .bldg-lintel, .bldg-door-edge { transform: scale(0.48); transform-origin: left top; }
  .nav { left: 22px; top: 96px; width: 44px; }
  .toggle { left: 22px; }
  .wordmark { display: none; }

  .content { padding: 40px 16px 28px; }
  h1 { font-size: clamp(34px, 11vw, 52px); }
  .lede { font-size: 15px; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
  .kpi-value { font-size: 24px; }
  .caveat { padding: 12px 14px; font-size: 12.5px; }
  .panel { padding: 16px 14px 14px; }
}

/* Last-resort guard: no page state should scroll the body sideways. Wide
   content (tables, charts) scrolls inside its own container instead. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ---------------- Sign-in page ----------------
   Standalone: login.html does not include the building sidebar, so nothing here
   depends on the .sidebar geometry above. */

.login-body {
  display: grid;
  place-items: center;
  padding: 32px 20px;
}

.login-card {
  width: 100%;
  max-width: 460px;
  background: var(--iw-white);
  border: 2px solid var(--iw-navy);
  padding: 44px 40px 34px;
  text-align: center;
  box-shadow: 12px 12px 0 var(--iw-navy-soft);
}

.login-mark {
  width: 108px;
  height: auto;
  margin: 0 auto 22px;
  display: block;
}

.login-card h1 {
  font-size: clamp(28px, 6vw, 38px);
  line-height: 1.06;
  margin: 4px 0 14px;
}

.login-lede {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(2, 52, 93, 0.72);
  margin-bottom: 26px;
}

/* Google's iframe is inline-block and centres poorly inside a text-align
   container on Safari; the flex row pins it. */
.login-button {
  display: flex;
  justify-content: center;
  min-height: 44px;
}
.login-button.is-busy { opacity: 0.45; pointer-events: none; }

.login-error {
  margin-top: 20px;
  padding: 12px 14px;
  border-left: 4px solid var(--iw-red);
  background: rgba(173, 4, 38, 0.06);
  color: var(--iw-red);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
}

.login-foot {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--iw-navy-soft);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(2, 52, 93, 0.5);
}

/* ---------------- Signed-in identity + sign out ----------------
   Sits at the foot of the building rail, above the expand toggle. */

.whoami {
  position: fixed;
  left: 0;
  bottom: 0;
  width: var(--sb-collapsed);
  padding: 10px 12px 12px;
  z-index: 12;
  text-align: center;
  transition: width var(--t-door) var(--ease-door);
}
body.expanded .whoami { width: var(--sb-expanded); }

.whoami-initial {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--iw-navy);
  color: var(--iw-white);
  font-size: 14px;
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 2px solid var(--iw-white);
}

.whoami-email {
  display: none;
  font-size: 11.5px;
  color: rgba(2, 52, 93, 0.62);
  margin-top: 6px;
  word-break: break-all;
}
body.expanded .whoami-email { display: block; }

.whoami-out {
  display: none;
  margin: 8px auto 0;
  background: none;
  border: 1px solid var(--iw-navy);
  color: var(--iw-navy);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  cursor: pointer;
}
body.expanded .whoami-out { display: block; }
.whoami-out:hover { background: var(--iw-navy); color: var(--iw-white); }

/* The nav column stops short of the identity block so they cannot collide. */
.nav { padding-bottom: 96px; }

@media (max-width: 700px) {
  .login-card { padding: 32px 22px 26px; }
  .whoami { padding: 8px 6px 10px; }
  .whoami-initial { width: 28px; height: 28px; font-size: 12px; }
}

/* ---------------- Access list (admin) ---------------- */

.access-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 22px 0 8px;
}
.access-add input[type="email"] {
  flex: 1 1 280px;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--iw-navy);
  background: var(--iw-white);
  border: 1.5px solid var(--iw-navy-soft);
  padding: 11px 13px;
}
.access-add input[type="email"]:focus {
  outline: none;
  border-color: var(--iw-navy);
}
.access-add button {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--iw-navy);
  color: var(--iw-white);
  border: none;
  padding: 12px 20px;
  cursor: pointer;
}
.access-add button:hover { background: var(--iw-red); }

.check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(2, 52, 93, 0.75);
  white-space: nowrap;
  cursor: pointer;
}

.access-error {
  margin: 4px 0 16px;
  padding: 10px 13px;
  border-left: 4px solid var(--iw-red);
  background: rgba(173, 4, 38, 0.06);
  color: var(--iw-red);
  font-size: 13px;
}

/* Non-error outcome of an add: "added — welcome email: sent". */
.access-note {
  margin: 4px 0 16px;
  padding: 10px 13px;
  border-left: 4px solid var(--iw-navy);
  background: var(--iw-navy-soft);
  color: var(--iw-navy);
  font-size: 13px;
}

.tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--iw-navy);
  color: var(--iw-white);
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: 1px;
}

.muted { color: rgba(2, 52, 93, 0.4); font-size: 12px; }
tbody tr.is-off td { color: rgba(2, 52, 93, 0.38); }
td.row-action { text-align: right; padding-right: 0; white-space: nowrap; }

/* Sign-out-everywhere sits under the ordinary sign-out, visually quieter. */
.whoami-all {
  margin-top: 5px;
  border-color: rgba(2, 52, 93, 0.3);
  color: rgba(2, 52, 93, 0.55);
  font-size: 10px;
}
.whoami-all:hover { background: var(--iw-red); border-color: var(--iw-red); color: var(--iw-white); }

/* ---------------- Carrier specs ---------------- */

.spec-import { margin-top: 34px; }
.spec-import summary {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(2, 52, 93, 0.6);
  cursor: pointer;
}
.spec-import summary:hover { color: var(--iw-navy); }
.spec-import .access-add input[type="text"] {
  flex: 0 1 220px;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--iw-navy);
  background: var(--iw-white);
  border: 1.5px solid var(--iw-navy-soft);
  padding: 11px 13px;
}
.spec-import .access-add input[type="text"]:focus {
  outline: none;
  border-color: var(--iw-navy);
}
.spec-import .access-add input[type="file"] {
  flex: 1 1 240px;
  font-family: inherit;
  font-size: 13px;
  color: rgba(2, 52, 93, 0.75);
}

.spec-rules { margin-bottom: 14px; }
.spec-rules .facts { margin-top: 12px; }
.spec-rules .facts li { display: block; font-size: 13px; }

/* Each portal page: fields on the left, screenshot rail on the right. */
.spec-step { margin-bottom: 26px; }
.spec-step .step-no {
  display: inline-block;
  min-width: 26px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--iw-white);
  background: var(--iw-navy);
  padding: 3px 6px;
  margin-right: 8px;
}
.spec-step h2 { text-transform: capitalize; }
.spec-step-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 26px;
}
@media (max-width: 1100px) {
  .spec-step-body { grid-template-columns: 1fr; }
  .spec-side { display: none; }
}

/* Placeholder for the page screenshot that will ride alongside the fields. */
.spec-shot {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 170px;
  border: 1.5px dashed rgba(2, 52, 93, 0.25);
  color: rgba(2, 52, 93, 0.45);
  text-align: center;
  padding: 18px;
}
.spec-shot svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  margin-bottom: 4px;
}
.spec-shot span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.spec-shot em { font-size: 12px; }

.spec-field {
  padding: 14px 0;
  border-bottom: 1px solid rgba(2, 52, 93, 0.08);
}
.spec-field:last-child { border-bottom: 0; }
.spec-field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.spec-field-head h4 { font-size: 14.5px; font-weight: 700; }

/* Stable ids, monospaced: field_id (navy) and core-model fact (dimmer). */
.fid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: rgba(2, 52, 93, 0.55);
  background: rgba(2, 52, 93, 0.06);
  padding: 2px 6px;
}
.fid-fact { color: rgba(2, 52, 93, 0.4); background: transparent; }

.conf {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  cursor: default;
}
.conf-verified { background: rgba(92, 138, 106, 0.16); color: #3d6a4d; }
.conf-convention { background: rgba(2, 52, 93, 0.1); color: var(--iw-navy); }
.conf-default_assumption { background: rgba(199, 105, 47, 0.14); color: #9a5c2f; }

.spec-value { font-size: 13.5px; margin-top: 6px; }
.spec-value strong { font-weight: 600; }
.spec-source {
  font-size: 12px;
  color: rgba(2, 52, 93, 0.5);
  margin-left: 8px;
}
.spec-note {
  font-family: "Source Serif 4", serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(2, 52, 93, 0.65);
  margin-top: 4px;
}

/* Guidelines: the editable layer. */
.gl-list { margin-top: 10px; }
.gl {
  border-left: 3px solid var(--iw-navy);
  background: rgba(2, 52, 93, 0.035);
  padding: 9px 12px;
  margin-bottom: 8px;
}
.gl.is-retired { border-left-color: rgba(2, 52, 93, 0.2); opacity: 0.55; }
.gl.is-retired .gl-text { text-decoration: line-through; }
.gl-text { font-size: 13px; line-height: 1.5; }
.gl-meta {
  font-size: 11.5px;
  color: rgba(2, 52, 93, 0.5);
  margin-top: 5px;
}
.gl-scope {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
}
.gl-actions { float: right; }
.tag-warn { background: #9a5c2f; }

.btn-link {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(2, 52, 93, 0.55);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 10px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn-link:hover { color: var(--iw-red); }
.gl-add { margin: 2px 0 0; text-decoration: none; }
.gl-add:hover { text-decoration: underline; }

.gl-form { margin: 8px 0; }
.gl-form textarea {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  color: var(--iw-navy);
  background: var(--iw-white);
  border: 1.5px solid var(--iw-navy-soft);
  padding: 10px 12px;
  resize: vertical;
}
.gl-form textarea:focus { outline: none; border-color: var(--iw-navy); }
.gl-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.gl-form-row .btn-primary, .gl-form-row .btn-quiet { padding: 8px 14px; }
.gl-scope-input {
  font-family: inherit;
  font-size: 12.5px;
  color: var(--iw-navy);
  background: var(--iw-white);
  border: 1.5px solid var(--iw-navy-soft);
  padding: 7px 9px;
}
.gl-error { margin: 8px 0 0; }

/* ---------------- Quoting log (SharePoint, via Graph) ---------------- */

.q-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 22px 0 18px;
}
.q-tools input[type="search"] { min-width: 220px; flex: 1 1 220px; }
.q-tools input[type="search"],
.q-tools select {
  font: inherit;
  font-size: 13px;
  color: var(--iw-navy);
  background: var(--iw-white);
  border: 1.5px solid var(--iw-navy-soft);
  border-radius: 5px;
  padding: 8px 10px;
}
.q-tools input[type="search"]:focus,
.q-tools select:focus { outline: 2px solid var(--iw-navy); outline-offset: -1px; }

/* The table is wide by nature — thirteen carriers — so it scrolls inside its
   own wrapper rather than pushing the page sideways. */
.q-table { font-size: 13px; }
.q-table thead th { padding-right: 14px; }
.q-table tbody { border: 0; }
.q-table tbody.q-group + tbody.q-group tr.q-row td { border-top: 1px solid var(--iw-navy-soft); }
.q-table td { padding: 7px 14px 7px 0; vertical-align: middle; }
.q-table tbody.is-open tr.q-row { background: rgba(2, 52, 93, 0.04); }

.q-title { min-width: 240px; }
.q-name { font-weight: 600; }
.q-center { text-align: center; }
.q-expand { width: 26px; padding-right: 4px !important; }

.q-toggle {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 0; border-radius: 4px;
  background: transparent;
  color: var(--iw-navy);
  cursor: pointer;
}
.q-toggle:hover { background: var(--iw-navy-soft); }
.q-toggle svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.q-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

/* Editors. Sized to sit inside a table row without changing its height. */
.q-input {
  font: inherit;
  font-size: 12.5px;
  color: var(--iw-navy);
  background: var(--iw-white);
  border: 1.5px solid var(--iw-navy-soft);
  border-radius: 4px;
  padding: 5px 7px;
  max-width: 170px;
}
.q-input-wide { max-width: 100%; width: 100%; }
.q-input:focus { outline: 2px solid var(--iw-navy); outline-offset: -1px; }
.q-input:disabled { opacity: 0.55; cursor: progress; }
.q-textarea { width: 100%; max-width: 100%; resize: vertical; line-height: 1.5; }
.q-check { width: 15px; height: 15px; accent-color: var(--iw-navy); cursor: pointer; }

/* Save state. Reserves its width so a row does not jump when text appears. */
.q-state {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  min-width: 58px;
}
.q-state.is-saving { color: rgba(2, 52, 93, 0.45); }
.q-state.is-ok { color: #5C8A6A; }
.q-state.is-bad { color: var(--iw-red); cursor: help; }

/* Expanded detail: the per-carrier working grid plus notes. */
.q-detail-row td { padding: 0 0 18px !important; }
.q-detail {
  background: var(--iw-white);
  border: 1.5px solid var(--iw-navy-soft);
  border-radius: 6px;
  padding: 16px 18px;
}
.q-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 1fr);
  gap: 26px;
}
.q-detail h4 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(2, 52, 93, 0.55);
  margin-bottom: 8px;
}
.q-notes h4:not(:first-child) { margin-top: 18px; }

.q-carriers { font-size: 12.5px; }
.q-carriers th[scope="row"] {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  padding: 5px 14px 5px 0;
}
.q-carriers td { padding: 5px 10px 5px 0; }
/* A carrier the agent actually asked for. Everything else stays available —
   quoters do add markets — but the requested ones read first. */
.q-carriers tr.is-asked th[scope="row"] { color: var(--iw-navy); }
.q-carriers tr:not(.is-asked) th[scope="row"] { color: rgba(2, 52, 93, 0.45); }

.q-readonly {
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: rgba(2, 52, 93, 0.8);
}
.q-muted { color: rgba(2, 52, 93, 0.45); font-size: 12px; }

.tag-go { background: #5C8A6A; }

@media (max-width: 1000px) {
  .q-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}