/* 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 24px;
  /* 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 assistant 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, assistant
   ================================================================ */

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

/* ---------------- Quick links ---------------- */

/* Sits between the greeting and the KPI strip, so it reads as part of the
   welcome rather than as another row of figures. Deliberately not a .kpi: these
   are doors, and giving them the KPI card's navy top rule would file them with
   the numbers. A left rule instead, in red, which is the accent the sidebar's
   active item already uses for "you are going here". */
.quicks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 34px;
}
.quick {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--iw-white);
  border: 1.5px solid var(--iw-navy-soft);
  border-left: 4px solid var(--iw-red);
  padding: 15px 16px 14px;
  text-decoration: none;
  color: var(--iw-navy);
  transition: border-color 150ms ease, transform 150ms ease;
}
.quick-label {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* Full width so it always takes the second line, whatever the label's length —
   otherwise the blurb wraps up beside short labels and the tiles disagree about
   how tall they are. */
.quick-blurb {
  flex: 0 0 100%;
  font-family: "Source Serif 4", serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(2, 52, 93, 0.55);
}
/* margin-left:auto rather than order/justify-content: the arrow has to stay on
   the label's baseline, which puts it in the first flex line with the label. */
.quick-arrow {
  margin-left: auto;
  font-size: 17px;
  font-weight: 700;
  color: var(--iw-red);
  transition: transform 150ms ease;
}
.quick:hover { border-color: var(--iw-navy); border-left-color: var(--iw-red); }
.quick:hover .quick-arrow { transform: translateX(3px); }
.quick:focus-visible { outline: 2px solid var(--iw-navy); outline-offset: 2px; }

/* Same treatment the disabled sidebar items get. No hover response at all: the
   tile should not promise anything when there is nowhere to go. */
.quick.is-disabled {
  opacity: 0.42;
  cursor: default;
  border-left-color: var(--iw-navy-soft);
}
.quick.is-disabled:hover { border-color: var(--iw-navy-soft); }

/* ---------------- 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;
  position: relative;            /* anchors the corner .info icon */
}
.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);
  padding-right: 16px;           /* keep the label clear of the corner icon */
  /* Reserve two lines whether or not this label needs them. "Endorsement growth"
     wraps at the narrower card widths and the others do not, which left one
     card's value sitting 10px below the rest of the row. */
  line-height: 1.4;
  min-height: 2.8em;
}
.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; }

/* 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 ----------------
   No longer used on the dashboard — that page's caveats moved into the per-metric
   notes below — but still the standard way the report, carrier and quoting pages
   attach an asterisk to something. */

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

/* ---------------- Metric notes ----------------
   Every number on the front page is a reconstruction of something, and the
   reasoning used to sit in a block of prose under the strip that was long enough
   nobody read it. It now hangs off each figure individually, next to the one it
   explains. Light grey on purpose: available when wanted, not competing with the
   numbers. */

.info {
  /* Reset the button; it is an icon, not a control surface. */
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-left: 5px;
  cursor: help;
  color: rgba(2, 52, 93, 0.28);
  vertical-align: middle;
  line-height: 0;
  transition: color 0.12s ease;
}
.info svg { width: 12px; height: 12px; display: block; }

/* Pinned to the card corner rather than left inline after the label. Inline, the
   icon counts toward the line's width, and "Endorsement growth" is just long
   enough that adding 17px wrapped it onto a second line — which made that one
   card's value sit lower than the other five. Out of the flow it cannot. */
.kpi .info { position: absolute; top: 15px; right: 14px; margin-left: 0; }
.info:hover, .info:focus-visible { color: var(--iw-red); }
.info:focus { outline: none; }
.info:focus-visible { outline: 2px solid var(--iw-navy); outline-offset: 2px; }

.tip {
  position: fixed;                 /* placed by showTip() in viewport coords */
  z-index: 60;
  width: min(360px, calc(100vw - 20px));
  background: var(--iw-white);
  border: 1.5px solid var(--iw-navy-soft);
  border-top: 3px solid var(--iw-red);
  box-shadow: 0 8px 24px rgba(2, 52, 93, 0.13);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.58;
  color: rgba(2, 52, 93, 0.85);
  /* The tooltip is not interactive, so never let it swallow the mouseout that
     dismisses it. */
  pointer-events: none;
}
.tip strong { font-weight: 700; color: var(--iw-navy); }

/* ---------------- 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; }

/* Premium at risk, endorsement net change and carrier concentration, as one
   row of three boxes that end level.
 *
 * Giving their charts the same Vega `height` is not enough: `height` sizes the
 * plot area only, and the two by-month charts carry rotated month labels the
 * horizontal bar chart does not, so equal plots still produced boxes ~40px
 * apart. A nested grid of their own, stretched rather than start-aligned, ends
 * them level whatever chrome Vega adds — and keeps the three together on one
 * row instead of leaving it to how the outer auto-fit happens to wrap. */
.panel-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.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.is-standard { border-top-color: var(--iw-navy); }

/* A saved-report tile is a div holding one anchor, not an anchor, because it also
   holds a delete button — a button inside a link is invalid and the keyboard
   handles it badly. Stretching the title's anchor over the whole card keeps the
   tile one big click target while leaving exactly one focusable link in it. */
.report-card { position: relative; }
.report-card h3 a { color: inherit; text-decoration: none; }
.report-card h3 a::after { content: ""; position: absolute; inset: 0; }

/* Above the stretched anchor, or the card link would swallow the click. Reveals
   on hover and on keyboard focus — focus-within, so tabbing to it shows it. */
.card-del {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: transparent;
  border: 1.5px solid transparent;
  color: rgba(2, 52, 93, 0.45);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;
}
.report-card:hover .card-del,
.report-card:focus-within .card-del { opacity: 1; }
.card-del:hover { color: var(--iw-red); border-color: var(--iw-red); }
.card-del:focus-visible { opacity: 1; outline: 2px solid var(--iw-red); outline-offset: 1px; }

/* The confirmation covers the whole card so there is nothing else to click. It
   has to repeat the report's title, because covering the card also covers the
   heading — "delete this report?" over a hidden title is not a confirmation. */
.card-confirm {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  background: var(--iw-white);
}
.card-confirm[hidden] { display: none; }
.card-confirm p { font-size: 14px; font-weight: 700; line-height: 1.35; }
/* Selector deliberately more specific than `.card-confirm p` above, rather than
   reaching for !important to undo that rule's weight. */
.card-confirm p.card-confirm-sub {
  font-family: "Source Serif 4", serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 400;
  color: rgba(2, 52, 93, 0.6);
}
.card-confirm-actions { display: flex; gap: 8px; margin-top: 8px; }
.card-confirm .btn-danger, .card-confirm .btn-quiet { padding: 8px 14px; font-size: 11px; }
.report-card.is-confirming { border-top-color: var(--iw-red); }
.card-error { font-size: 13px; color: var(--iw-red); }

.section-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(2, 52, 93, 0.55);
  border-bottom: 1.5px solid var(--iw-navy-soft);
  padding-bottom: 8px;
  margin-bottom: 18px;
}

/* Detail-page delete: the same two-step, laid out in a row. */
.delete-block { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.delete-confirm { display: flex; align-items: center; gap: 10px; }
.delete-confirm[hidden] { display: none; }
.delete-confirm > span { font-size: 13px; font-weight: 700; }

/* Standing-report panels: a note above the chart explaining what the numbers
   mean, and the SQL folded away under each one. */
.panel-note {
  font-family: "Source Serif 4", serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(2, 52, 93, 0.7);
  max-width: 76ch;
  margin-bottom: 18px;
}
.panel-chart { margin-bottom: 20px; }
.sql-details.sql-inline {
  border: 0;
  border-top: 1.5px solid var(--iw-navy-soft);
  background: transparent;
  margin: 18px 0 0;
}
.sql-details.sql-inline summary { padding: 10px 0 0; }
.sql-details.sql-inline pre { padding: 8px 0 0; }

/* The New report tile — a button that opens the assistant with a "New report"
   context chip, so it inherits the card look but reads as an invitation. */
.report-card.report-new {
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-style: dashed;
  border-top: 4px solid var(--iw-navy);
}
.report-card.report-new:hover { background: var(--iw-white); }
.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); }

/* ---------------- Assistant ----------------
   A docked panel rather than a modal: you want to see the page you are
   asking about while you ask. The launcher is styled as a prompt — an empty
   input inviting a question — because that is literally what clicking it
   gives you. */

.agent-fab {
  position: fixed;
  right: 26px; bottom: 26px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 260px;
  background: var(--iw-white);
  color: rgba(2, 52, 93, 0.5);
  border: 1.5px solid var(--iw-navy-soft);
  padding: 13px 16px;
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(2, 52, 93, 0.18);
  transition: border-color 160ms ease, color 160ms ease;
}
.agent-fab:hover { border-color: var(--iw-navy); color: var(--iw-navy); }
.agent-fab svg { width: 16px; height: 16px; fill: var(--iw-red); flex: none; }
body.agent-open .agent-fab { display: none; }

.agent-head-actions { display: flex; align-items: center; gap: 14px; }

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

/* The conversation thread. */
.msg { margin-bottom: 14px; font-size: 13.5px; line-height: 1.55; }
.msg-user {
  margin-left: 36px;
  background: var(--iw-navy);
  color: var(--iw-paper);
  padding: 10px 13px;
}
.msg-assistant { margin-right: 12px; color: rgba(2, 52, 93, 0.85); }
.msg-assistant.is-error {
  border-left: 3px solid var(--iw-red);
  padding-left: 10px;
  color: var(--iw-red);
}
.msg-assistant code {
  font-size: 12px;
  background: rgba(2, 52, 93, 0.06);
  padding: 1px 4px;
}
.msg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.msg-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(247, 244, 238, 0.45);
  padding: 2px 7px;
}

.msg-typing span {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(2, 52, 93, 0.4);
  margin-right: 4px;
  animation: typing 1s infinite;
}
.msg-typing span:nth-child(2) { animation-delay: 0.15s; }
.msg-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* A report draft, inline in the thread. */
.msg-report {
  margin-top: 10px;
  border: 1.5px solid var(--iw-navy-soft);
  border-top: 3px solid var(--iw-navy);
  background: var(--iw-white);
  padding: 14px;
}
.msg-report h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
a.btn-primary { text-decoration: none; display: inline-block; }

/* Context chips above the prompt: the ambient page chip, plus any pinned
   references ("New report", later a policy or association). */
.ctx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.ctx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--iw-white);
  border: 1.5px solid var(--iw-navy);
  color: var(--iw-navy);
  padding: 4px 9px;
  max-width: 230px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctx-chip.is-page {
  background: transparent;
  border-color: var(--iw-navy-soft);
  color: rgba(2, 52, 93, 0.55);
}
.ctx-chip button {
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.ctx-chip button:hover { color: var(--iw-red); }

.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 14px; }
  body.agent-open .content { margin-right: 0; }
  .agent { width: min(var(--agent-w), 100vw); }
}
@media (max-width: 820px) {
  .content { padding: 64px 24px 32px 8px; }
  .panels, .panel-row { 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 6px; }
  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; }

/* Carrier knowledge blocks: appetite, run scope, computations, … The lists are
   recursive (a block value can nest arrays in objects), so only the outermost
   level carries panel spacing and the inner ones just indent. */
.spec-block { margin-bottom: 18px; }
.spec-block-body { font-size: 13px; line-height: 1.55; }
.spec-block-kv > li,
.spec-block-list > li { display: block; margin-top: 9px; }
.spec-block-kv > li > strong { color: var(--iw-navy); }
.spec-block-kv .spec-block-kv,
.spec-block-kv .spec-block-list,
.spec-block-list .spec-block-kv,
.spec-block-list .spec-block-list {
  margin: 4px 0 0 14px;
  border-left: 2px solid rgba(2, 52, 93, 0.12);
  padding-left: 12px;
}

/* A page's own prose: the data-model mapping sentence. The mechanics that used
   to sit beside it are rows now, and render as .mech-list below. */
.spec-step-prose {
  font-size: 13px;
  color: rgba(2, 52, 93, 0.75);
  margin: 2px 0 10px;
}
.spec-step-mapping { font-weight: 600; color: var(--iw-navy); }

/* Guidance about the PAGE rather than about one of its controls
 * (field_guideline target 'step'). Set in from the prose above it, because a
 * rule someone can retire in a click reads differently from the mapping
 * sentence the portal was mapped under. */
.spec-step-gls {
  margin: 0 0 10px;
  padding-left: 12px;
  border-left: 2px solid var(--iw-gold, rgba(2, 52, 93, 0.2));
}

/* Field kind chip and the enumerated options a choice control offers. */
.spec-kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(2, 52, 93, 0.55);
  background: rgba(2, 52, 93, 0.06);
  padding: 2px 7px;
}
.spec-options {
  font-size: 12.5px;
  color: rgba(2, 52, 93, 0.6);
  margin-top: 4px;
}

/* 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; }

/* Browser mechanics: the sibling plane, agent-authored. Same row furniture as a
   guideline, tinted differently on purpose — the two say different kinds of
   thing and a reader should be able to tell at a glance which one they are
   reading without parsing the sentence. */
.mech-list { margin-top: 10px; }
.mech-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(2, 52, 93, 0.45);
  margin-bottom: 6px;
}
.gl.mech {
  border-left-color: #9a5c2f;
  background: rgba(154, 92, 47, 0.05);
}
.gl.mech.is-retired { border-left-color: rgba(154, 92, 47, 0.25); }
.mech-key {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(154, 92, 47, 0.85);
  margin-bottom: 3px;
}
.mech-error { margin-top: 6px; }

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

/*
 * An agent is waiting on an answer. Deliberately the loudest tag on the row —
 * louder than `urgent`, which describes how the request arrived, where this is
 * work stopped right now that only a person here can restart. The other two tags
 * say what a row IS; this one is the only one that is a request to do something.
 */
.tag-ask { background: #A33A2E; }

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