/* asksathi_app.css — AskSathi light-canvas layout for SUS-impact-app */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-stack);
  font-size: var(--font-size-body);
  line-height: 1.6;
}

button { font: inherit; cursor: pointer; }
a { color: var(--color-accent); text-underline-offset: 3px; }

#page {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4) 120px;
}

h3 { font-size: 16.5px; font-weight: 700; margin: var(--space-3) 0 var(--space-2); color: var(--color-text-primary); letter-spacing: -.005em; }
h3 small { font-size: 12px; }
h3 small { color: var(--color-text-faint); font-weight: 400; }
.req { color: var(--sev-amber); margin-left: 2px; }
.reveal-link {
  /* v2.4 fix 5: the escape hatch must be impossible to miss — a real bordered
     button, not a quiet underlined link */
  display: block; width: 100%; margin-top: var(--space-2);
  background: var(--color-accent-soft);
  border: 1.5px dashed var(--color-accent); border-radius: 10px;
  color: var(--color-accent); font-weight: 700;
  padding: 9px 12px; font-size: var(--font-size-small);
  text-decoration: none; cursor: pointer;
  transition: background var(--transition-quick);
}
.reveal-link:hover { background: var(--tile-hover-bg); }

/* ---- app banner ---- */
/* v2.4: both banners are new art (Top 1728x256, Bottom 2000x200). width:100%
   + height:auto keeps each at its OWN aspect ratio — no fixed heights. */
.app-banner {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-modal);
  border: 1px solid var(--color-border);
  box-shadow: var(--box-engrave);
  margin-top: var(--space-3);
}

/* ---- B2: page header ---- */

.page-header {
  text-align: center;
  padding: var(--space-4) 0 var(--space-4);
}
.page-header h1 {
  font-family: var(--font-display);
  font-size: var(--header-title-size);
  font-weight: 500;
  margin: 0;
  letter-spacing: -.02em;
  color: var(--color-text-primary);
  line-height: 1.15;
}
.page-header h1::after {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  background: var(--action-accent);
  margin: 12px auto 0;
  border-radius: 2px;
}
.header-sub {
  font-size: var(--header-sub-size);
  color: var(--color-text-faint);
  margin: var(--space-2) auto 0;
  max-width: none;
  white-space: nowrap;
  line-height: 1.7;
}
.header-owner {
  font-family: var(--font-mono);
  font-size: var(--header-owner-size);
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 0;
}

/* ---- C8: stepper ---- */

.stepper { display: flex; gap: 10px; justify-content: center; align-items: center; padding: var(--space-2) 0 var(--space-3); }
.step-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--step-dot);
  transition: background var(--transition-soft), transform var(--transition-soft);
}
.step-dot.active { background: var(--step-dot-active); transform: scale(1.3); }
.step-dot.done   { background: var(--step-dot-done); }
.step-note { margin-left: var(--space-2); font-size: var(--font-size-small); color: var(--color-text-faint); }

/* ---- boxes ---- */

/* v2.4 item 1: left strip + dominant map; sections/downloads/banner are
   full-width rows of the same grid below */
.layout-main {
  display: grid; grid-template-columns: 372px minmax(0, 1fr);
  gap: var(--space-3); align-items: start; margin-top: var(--space-3);
}
.strip { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; grid-column: 1; grid-row: 1; }
.layout-main .map-panel {
  grid-column: 2; grid-row: 1;
  margin-top: 0; position: sticky; top: 12px;
  display: flex; flex-direction: column;
  min-width: 0; max-width: 100%;   /* v2.5 B1: the panel pans over a wide map —
                                      it never blows out the grid/flex track */
  min-height: min(88vh, 1000px);   /* v2.5 B1: taller panel for the vertical flow */
  z-index: 0;                      /* v2.5 B2: the sticky map NEVER paints over
                                      content the user scrolled to or expanded */
}
.layout-main .canvas-stage { flex: 1; }
.layout-main .sections, .layout-main .download-box, .layout-main .contact-crop {
  grid-column: 1 / -1; min-width: 0;
  position: relative; z-index: 2;  /* v2.5 B2: summary/download content stacks
                                      ABOVE the sticky map at every viewport */
  background: var(--color-bg);
}
@media (max-width: 980px) { .layout-main { grid-template-columns: 1fr; } .layout-main .map-panel, .strip { grid-column: 1; } .layout-main .map-panel { grid-row: auto; position: static; min-height: 0; } .strip { grid-row: auto; } }

/* the question accordion (one row open at a time) */
.qa-accordion { display: flex; flex-direction: column; gap: var(--space-2); }
.qrow-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--box-head-bg); border: none; cursor: pointer;
  padding: 12px 14px; border-radius: var(--radius-modal);
  font: 700 15px/1.3 var(--font-body); color: var(--color-text-primary);
  text-align: left;
}
.qrow.open .qrow-head { border-radius: var(--radius-modal) var(--radius-modal) 0 0; }
.qrow-label { flex: 1; }
.qrow-chevron { flex: none; width: 9px; height: 9px; border-right: 2px solid var(--color-text-secondary); border-bottom: 2px solid var(--color-text-secondary); transform: rotate(45deg); transition: transform var(--transition-quick); }
.qrow.open .qrow-chevron { transform: rotate(-135deg); }
.qrow-head .padlock { position: static; flex: none; width: 15px; height: 14px; }
.qrow-body { display: none; }
.qrow.open .qrow-body { display: block; }
.qrow.locked .qrow-body { display: none; }

.box {
  position: relative; display: flex; flex-direction: column;
  background: var(--box-bg);
  border: 1px solid var(--box-border);
  border-radius: var(--radius-modal);
  box-shadow: var(--box-engrave);
  transition: filter var(--transition-soft), opacity var(--transition-soft), transform var(--transition-soft);
  overflow: hidden;
}
.box-head {
  background: var(--box-head-bg);
  border-bottom: 1px solid var(--box-border);
  border-top: 2px solid var(--action-accent);
  padding: var(--space-2) var(--space-3);
}
.box-head h2 {
  font-family: var(--font-display);
  font-size: var(--box-title-size);
  font-weight: 500;
  margin: 0;
  color: var(--color-text-primary);
  letter-spacing: -.01em;
}
.box-body { padding: var(--space-2) var(--space-3) var(--space-3); flex: 1; }
.box-body > h3:first-child { margin-top: var(--space-2); }

/* question label strips — lift each question above its choice tiles */
.box-body h3 {
  background: var(--color-accent-soft);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
  padding: 9px 14px;
  color: var(--color-text-primary);
}
.box-body h3 small { color: var(--color-text-secondary); }

.box.locked {
  /* v2.3.1 Fix 3 (V231-01): fully visible and legible — no blur, no dim.
     The unlock SEQUENCE is unchanged: still non-interactive until the prior
     box completes; the padlock is the "not yet active" indicator. */
  pointer-events: none; user-select: none;
}
.box:not(.locked) { animation: box-unlock 360ms ease; }
@keyframes box-unlock { 0% { transform: scale(.986); } 60% { transform: scale(1.005); } 100% { transform: scale(1); } }

.padlock { position: absolute; top: 12px; right: 12px; z-index: 2; width: 16px; height: 16px; opacity: 0; transition: opacity var(--transition-soft); }
.box.locked .padlock { opacity: 1; }
.padlock::before { content: ""; position: absolute; left: 3px; top: 0; width: 10px; height: 8px; border: 2px solid var(--color-text-faint); border-bottom: none; border-radius: 6px 6px 0 0; }
.padlock::after  { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 10px; background: var(--color-text-faint); border-radius: 3px; }

.box-icon { display: inline-block; width: 20px; margin-right: 6px; opacity: .5; filter: grayscale(1); }
.box-icon[data-icon="people"]::before   { content: "👥"; }
.box-icon[data-icon="data"]::before     { content: "💻"; }
.box-icon[data-icon="building"]::before { content: "🏢"; }
.box-icon[data-icon="money"]::before    { content: "💰"; }

.box-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 700px) { .box-cols { grid-template-columns: 1fr; } }

/* ---- tiles ---- */

.tile-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tile {
  width: var(--tile-w); height: var(--tile-h);
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-2);
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: var(--radius-tile);
  color: var(--color-text-primary);
  font-size: var(--font-size-small);
  text-align: left;
  transition: background var(--transition-quick), border-color var(--transition-quick), transform var(--transition-quick), box-shadow var(--transition-quick);
}
.tile:hover { background: var(--tile-hover-bg); border-color: var(--tile-hover-border); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(94,124,107,.1); }
.tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tile[aria-pressed="true"] {
  background: var(--tile-selected-bg);
  border-color: var(--tile-selected-border);
  border-width: 2px;
  padding-left: calc(var(--space-2) - 1px);
  box-shadow: inset 4px 0 0 var(--tile-selected-border), 0 4px 12px rgba(94,124,107,.14);
  font-weight: 600;
}
.tile[aria-pressed="true"]::after {
  content: "✓"; margin-left: auto; flex: none;
  color: #fff; background: var(--tile-selected-border);
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 10px; line-height: 16px; text-align: center; font-weight: 700;
}
.tile-icon { width: 36px; height: 36px; flex: none; }
.tile-big  { width: calc(var(--tile-w) * 2 + var(--space-2)); font-weight: 600; }
.tile span { overflow: hidden; }

/* v2.4 item 3: every non-industry option is a compact horizontal row —
   muted glyph left, label filling, check right when selected. Industry keeps
   its vivid designed cards (the one place icons stay colorful). */
.qrow .tile-row:not(#industry-tiles) { flex-direction: column; gap: 6px; }
.qrow .tile-row:not(#industry-tiles) .tile {
  width: 100%; height: auto; min-height: 40px; padding: 8px 10px;
}
.tile-glyph {
  flex: none; width: 17px; height: 17px;
  background-color: var(--color-text-faint); opacity: .5;
  -webkit-mask: var(--qg) center / contain no-repeat;
          mask: var(--qg) center / contain no-repeat;
}
.qglyph-people   { --qg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="9" cy="8" r="4"/><path d="M1 21c0-4.4 3.6-7 8-7s8 2.6 8 7Z"/><circle cx="17.5" cy="9" r="3"/><path d="M15.4 14.3c3.9.3 6.6 2.6 6.6 6.7h-3"/></svg>'); }
.qglyph-doc      { --qg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 2h9l5 5v15H5Z"/><path d="M14 2v5h5" fill="white"/></svg>'); }
.qglyph-building { --qg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 22V8l7-5v19Zm8 0V10l10 4v8Z"/></svg>'); }
.qglyph-cart     { --qg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 3h3l3 12h11l3-9H7"/><circle cx="9" cy="20" r="2"/><circle cx="17" cy="20" r="2"/></svg>'); }
.qglyph-truck    { --qg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 5h13v11H1Z"/><path d="M14 9h5l4 4v3h-9Z"/><circle cx="6" cy="19" r="2.4"/><circle cx="18" cy="19" r="2.4"/></svg>'); }
.qglyph-coin     { --qg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><text x="12" y="17" font-size="14" text-anchor="middle" fill="white" font-family="sans-serif" font-weight="bold">$</text></svg>'); }
.qglyph-briefcase{ --qg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M8 7V4h8v3" fill="none" stroke="black" stroke-width="2.4"/></svg>'); }

/* v2.4 item 2: the ordinary-default option ("Nothing right now") reads calm,
   first, and clearly the resting state — not a fifth active-sounding event */
.tile-calm {
  background: var(--sev-grey-soft);
  border-style: dashed; border-color: var(--color-border-strong);
  color: var(--color-text-secondary); font-style: italic;
}
.tile-calm[aria-pressed="true"] { font-style: normal; }

/* industry picker — larger card tiles: big icon on top, label beneath */
#industry-tiles { gap: var(--space-3); }
#industry-tiles .tile {
  flex-direction: column; justify-content: center; align-items: center;
  gap: 10px; width: 152px; height: 120px; padding: 14px 10px;
  text-align: center; position: relative;
}
#industry-tiles .tile-icon { width: 58px; height: 58px; }
#industry-tiles .tile span { overflow: visible; white-space: normal; line-height: 1.25; font-size: 13px; }
#industry-tiles .tile-big { width: calc(152px * 2 + var(--space-3)); }
#industry-tiles .tile[aria-pressed="true"] {
  padding-left: 10px;
  box-shadow: inset 0 4px 0 var(--tile-selected-border), 0 4px 14px rgba(94,124,107,.16);
}
#industry-tiles .tile[aria-pressed="true"]::after {
  position: absolute; top: 8px; right: 8px; margin: 0;
}

.slider-wrap { margin-bottom: var(--space-2); }
#headcount-slider { width: 100%; accent-color: var(--color-accent); }
.slider-labels { display: flex; justify-content: space-between; font-size: var(--font-size-small); color: var(--color-text-secondary); }
.slider-hint   { font-size: var(--font-size-small); color: var(--color-text-faint); margin: var(--space-1) 0 0; }

/* ---- E: echo panel ---- */

.echo-box { background: var(--echo-bg); border-color: var(--color-border-strong); }
.echo-box .box-head { background: linear-gradient(180deg, #E4DDCC 0%, #DCD4C0 100%); border-bottom-color: var(--color-border-strong); }
.echo-body { display: flex; flex-direction: column; }
.echo-list { list-style: none; margin: 0; padding: 0; font-size: var(--font-size-small); flex: 1; overflow-y: auto; }
.echo-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 0; border-bottom: 1px solid var(--color-border); }
.echo-field { color: var(--color-text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.echo-value { text-align: left; font-weight: 600; color: var(--color-text-primary); }
.echo-value.unsure { color: var(--sev-grey); font-style: italic; font-weight: 400; }
.echo-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.echo-actions button {
  flex: 1; padding: 9px var(--space-2);
  border-radius: var(--radius-tile); border: none;
  background: var(--action-accent); color: var(--action-accent-text);
  font-weight: 700; font-size: var(--font-size-small);
  transition: background var(--transition-quick), transform var(--transition-quick);
}
.echo-actions button:hover { background: var(--action-accent-hover); transform: translateY(-1px); }

/* ---- F: map ---- */

/* v2.4 item 6 / v2.5 B4: business-name input wears the same treatment as the
   question-section headers (accent-soft strip + left accent bar) */
.bizname-wrap {
  padding: 10px 14px 12px;
  background: var(--color-accent-soft);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
  box-shadow: var(--box-engrave);
}
.bizname-wrap label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); margin-bottom: 5px; }
.bizname-wrap label small { text-transform: none; letter-spacing: 0; color: var(--color-text-faint); }
.bizname-wrap input {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid var(--color-border-strong); border-radius: 8px;
  background: var(--color-panel); color: var(--color-text-primary);
  font: 600 var(--font-size-body)/1.3 var(--font-body);
}
.bizname-wrap input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.map-title {
  margin: 0 0 var(--space-2); font-family: var(--font-display);
  font-size: 22px; font-weight: 700; color: var(--color-text-primary);
  position: sticky; left: 0;  /* v2.5 B1: stays readable while the panel pans */
}

.map-panel {
  margin-top: var(--space-3);
  background: var(--echo-bg);   /* V23-11: matches the "Built from your answers" box */
  border: 2px solid var(--action-accent);
  border-radius: var(--radius-modal);
  padding: var(--space-3);
  overflow-x: auto;
  box-shadow: 0 0 0 1px rgba(201,168,76,.22), 0 10px 34px -14px rgba(201,168,76,.45);
}
.canvas-stage { position: relative; margin: 0 auto; }
.canvas-wires { position: absolute; inset: 0; pointer-events: none; }

.wire { stroke: var(--color-flow-line); fill: none; transition: stroke var(--transition-quick), opacity var(--transition-soft); }
.wire.flow-arrow { stroke-width: 2; }
.wire.display-link, .wire.anchor-link { stroke: var(--link-dotted); stroke-width: 1.2; stroke-dasharray: 3 6; }
.wire.cart-link   { stroke: var(--cart-color); stroke-width: 1.2; stroke-dasharray: 3 6; }
.wire.pulsing     { stroke: var(--color-flow-pulse); stroke-width: 2.8; }
.wire-arrowhead   { fill: var(--color-flow-line); }

.cart-glyph { stroke: var(--cart-color); fill: var(--cart-color); stroke-width: 1.2; }
.cart-glyph circle { stroke: none; }
.cart-glyph.ghost, .globe.ghost { opacity: var(--state-ghost-opacity); }
.globe-sea  { fill: none; stroke: var(--globe-green); stroke-width: 1.4; }
.globe-land { fill: var(--globe-green); opacity: .45; }
.globe-line { fill: none; stroke: var(--globe-green-light); stroke-width: .7; opacity: .55; }

.map-node {
  position: absolute;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-node);
  box-shadow: var(--shadow-node);
  padding: var(--space-2);
  transition: border-color var(--transition-soft), background var(--transition-soft),
              opacity var(--transition-soft), transform var(--transition-soft), box-shadow var(--transition-quick);
}
.map-node.entering, .map-node.leaving { opacity: 0; transform: scale(.88); }
.map-node.ghost { opacity: var(--state-ghost-opacity); pointer-events: none; }
.map-node:hover { z-index: 5; transform: translateY(-3px); box-shadow: 0 8px 28px rgba(94,124,107,.2); }
.map-node.display-only { border-style: dashed; }

.map-node.sev-red    { border-color: var(--sev-red);   border-left-width: 3px; background: var(--sev-red-soft); }
.map-node.sev-amber  { border-color: var(--sev-amber); border-left-width: 3px; background: var(--sev-amber-soft); }
.map-node.sev-green  { border-color: var(--sev-green); border-left-width: 3px; background: var(--sev-green-soft); }
.map-node.sev-grey   { border-color: var(--sev-grey);  background: var(--sev-grey-soft); }
.map-node.sev-pending{ border-color: var(--color-border); background: var(--sev-grey-soft); }

.node-head  { display: flex; align-items: center; gap: var(--space-2); min-height: 38px; }
.node-icon  { width: 36px; height: 36px; flex: none; }
.core-node .node-icon { width: 52px; height: 52px; }
.node-label { font-weight: 600; font-size: var(--font-size-small); color: var(--color-text-primary); }
.core-node .node-label { font-weight: 700; font-size: var(--node-core-label); }

.node-cluster { display: flex; gap: 6px; margin-top: var(--space-2); flex-wrap: wrap; }
.cluster-chip { display: inline-flex; align-items: center; gap: 3px; font-size: var(--font-size-small); font-weight: 700; font-family: var(--font-mono); }
.cluster-chip.zero { opacity: .3; font-weight: 400; }
.display-note { font-size: var(--font-size-small); color: var(--color-text-faint); font-style: italic; }

.node-flags {
  position: absolute; left: -1px; right: -1px; top: 100%;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-node) var(--radius-node);
  padding: var(--space-1); z-index: 6;
  box-shadow: 0 8px 20px rgba(94,124,107,.12);
}
.flag-row {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; background: none; border: none;
  padding: 5px var(--space-2);
  border-radius: 6px; text-align: left; font-size: var(--font-size-small);
}
.flag-row:hover { background: var(--color-accent-soft); }

.sev-red   { color: var(--sev-red); }
.sev-amber { color: var(--sev-amber); }
.sev-green { color: var(--sev-green); }
.sev-grey  { color: var(--sev-grey); }
.sev-glyph { font-size: var(--font-size-small); }

/* ---- H5: score ring ---- */

#score-ring {
  position: fixed; right: 22px; bottom: 74px; z-index: 40;
  width: var(--ring-size); height: var(--ring-size);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: var(--shadow-modal);
  transition: box-shadow var(--transition-soft);
}
#score-ring[hidden] { display: none; }
#score-ring.complete { box-shadow: 0 0 0 2px var(--step-dot-done), var(--shadow-modal); }
.ring-track { fill: none; stroke: var(--ring-track); stroke-width: 4; }
.ring-fill  { fill: none; stroke: var(--ring-fill); stroke-width: 4; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset var(--transition-soft); }
.ring-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; font-family: var(--font-mono); }

/* v2.3.1 Fix 2: live answered/remaining counter, pinned to the ring's LEFT and
   centered on its midline. Informational only — clicks stay on the ring. */
.ring-note {
  position: fixed; right: calc(22px + var(--ring-size) + 14px);
  bottom: calc(74px + var(--ring-size) / 2); transform: translateY(50%);
  z-index: 40; max-width: 250px; text-align: right; pointer-events: none;
  font-size: 12.5px; line-height: 1.45; font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-panel); border: 1px solid var(--color-border);
  border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow-modal);
}
.ring-note[hidden] { display: none; }
.ring-note.unlocked { color: var(--sev-green); border-color: var(--tile-selected-border); pointer-events: auto; }
/* v2.5 B6: the unlocked note carries a Check Result action */
.ring-note .note-link {
  display: inline; background: none; border: none; padding: 0; margin-left: 4px;
  color: var(--color-accent); font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
/* v2.5 B5: Check Result button at the end of the questionnaire — same
   treatment as the Reset/Download buttons */
.check-result {
  width: 100%; margin-top: var(--space-2);
  background: var(--action-accent); color: var(--action-accent-text);
  border: none; border-radius: 999px; padding: 10px 16px; font-weight: 700;
  transition: background var(--transition-quick);
}
.check-result:hover { background: var(--action-accent-hover); }
.ring-chip { position: absolute; font-family: var(--font-mono); font-size: 11px; font-weight: 700; background: var(--color-panel); border: 1px solid currentColor; border-radius: 999px; padding: 1px 7px; display: inline-flex; align-items: center; gap: 3px; }
.ring-chip[hidden] { display: none; }  /* v2.3.1: display:inline-flex would defeat [hidden] (form[hidden]-guard precedent) */
.ring-chip::before { font-size: 10px; }
#ring-red   { top: -9px; left: 50%; transform: translateX(-50%); color: var(--sev-red); }
#ring-red::before   { content: "⚠"; }
#ring-amber { right: -16px; top: 50%; transform: translateY(-50%); color: var(--sev-amber-ink); }
#ring-amber::before { content: "◆"; color: var(--sev-amber); }
#ring-green { bottom: -9px; left: 50%; transform: translateX(-50%); color: var(--sev-green); }
#ring-green::before { content: "✓"; }

/* ---- H: summary sections ---- */

.sections { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.summary-section {
  background: #EAE3D6;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-modal);
  box-shadow: var(--box-engrave);
  overflow: hidden;
}
.summary-section[data-section="good"] { border-left: 3px solid var(--section-good-accent); }
.summary-section[data-section="bad"]  { border-left: 3px solid var(--section-bad-accent); }
.summary-section[data-section="info"] { border-left: 3px solid var(--section-info-accent); }

.summary-section[data-section="good"] .section-head h2 { color: var(--section-good-accent); }
.summary-section[data-section="bad"]  .section-head h2 { color: var(--section-bad-accent); }
.summary-section[data-section="info"] .section-head h2 { color: var(--section-info-accent); }

.section-head {
  position: relative; width: 100%; display: flex; align-items: center; gap: var(--space-2);
  background: linear-gradient(180deg, #E4DDCC 0%, #DCD4C0 100%);
  border: none; border-top: 2px solid var(--action-accent);
  border-bottom: 1px solid var(--color-border-strong);
  color: inherit; cursor: pointer; padding: var(--space-3);
}
.section-head h2 { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 500; }
.section-sub { color: var(--color-text-faint); font-weight: 500; font-size: var(--font-size-small); letter-spacing: .04em; font-family: var(--font-stack); }
.section-badge {
  position: absolute; top: 50%; right: var(--space-3); transform: translateY(-50%);
  margin-right: 20px;
  background: var(--badge-bg); color: var(--badge-text);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  border-radius: 999px; min-width: 24px; height: 22px;
  display: flex; align-items: center; justify-content: center; padding: 0 7px;
}
.chev { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--color-text-faint); border-bottom: 2px solid var(--color-text-faint); transform: rotate(45deg); transition: transform var(--transition-quick); flex: none; }
.section-head[aria-expanded="true"] .chev { transform: rotate(-135deg); }
.section-body { padding: var(--space-3); }
.chip-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips-subordinate { margin-top: var(--space-2); }
.sev-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px; padding: 5px 13px;
  font-size: var(--font-size-small); font-weight: 600;
  transition: transform var(--transition-quick), border-color var(--transition-quick), box-shadow var(--transition-quick);
}
.sev-chip.sev-amber { color: var(--sev-amber-ink); }
.sev-chip.sev-amber .chip-dot { color: var(--sev-amber); }
.sev-chip.sev-grey  { color: var(--sev-grey-ink); }
.sev-chip.sev-grey .chip-dot { color: var(--sev-grey); }
.sev-chip:hover { transform: translateY(-1px); border-color: currentColor; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.chip-dot { font-size: var(--font-size-small); }
.gri-strip {
  color: var(--color-text-faint);
  font-family: var(--font-mono);
  font-size: 12px;
  margin: var(--space-3) 0 0;
  line-height: 1.7;
}

/* ---- J: download gate ---- */

.download-box {
  margin-top: var(--space-4);
  background: var(--download-bg);
  border: 1px solid var(--download-border);
  border-radius: var(--radius-modal);
  padding: var(--space-3) var(--space-3) var(--space-4);
}
.download-halves { display: grid; grid-template-columns: 1fr 1px 1fr; gap: var(--space-3); }
@media (max-width: 820px) { .download-halves { grid-template-columns: 1fr; } .download-divider { display: none; } }
.download-divider { background: var(--download-divider); }
.contact-banner { margin-top: 0; margin-bottom: 0; }
/* v2.4 legibility (V24-02): the bottom banner's text is small on its 2000x200
   canvas. On narrow screens the image never scales below a legible width —
   it center-crops inside this wrapper instead of shrinking the text away. */
.banner-crop { overflow: hidden; border-radius: var(--radius-modal); }
.contact-crop { margin-top: var(--space-4); margin-bottom: var(--space-2); }
@media (max-width: 760px) {
  .contact-crop .contact-banner {
    width: 900px; max-width: none;
    position: relative; left: 50%; transform: translateX(-50%);
    border-radius: 0; border-left: none; border-right: none;
  }
}

.dl-option {
  width: 100%; display: flex; flex-direction: row; gap: var(--space-3); align-items: center;
  background: var(--color-panel); border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-tile); color: var(--color-text-primary);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3); text-align: left;
  position: relative;
  transition: transform var(--transition-quick), border-color var(--transition-quick), box-shadow var(--transition-quick), background var(--transition-quick);
}
.dl-icon { width: 54px; height: 54px; flex: none; object-fit: contain; }
.dl-text { display: flex; flex-direction: column; gap: 5px; }
.dl-option::after {
  content: "→"; position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%);
  color: var(--color-accent); font-size: 18px; transition: transform var(--transition-quick);
}
.dl-option:hover { transform: translateY(-2px); background: var(--color-accent-soft); box-shadow: 0 6px 18px rgba(94,124,107,.16); }
.dl-option:hover::after { transform: translateY(-50%) translateX(3px); }
.dl-option strong { font-size: 13px; font-weight: 700; }
.dl-text > span   { font-size: var(--font-size-small); color: var(--color-text-secondary); }
.download-half form { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.download-half form[hidden] { display: none; }
.download-half label { display: grid; gap: 4px; font-size: var(--font-size-small); }
.download-half input[type="email"], .download-half textarea {
  background: var(--color-panel); color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-tile);
  padding: var(--space-2); font: inherit;
}
.stars { display: flex; gap: 4px; }
.stars button { background: none; border: none; font-size: 20px; color: var(--star-off); padding: 0 2px; }
.stars button.on { color: var(--star-on); }
.tnc-line { display: flex !important; gap: var(--space-2); align-items: flex-start; }
.tnc-full { font-size: var(--font-size-small); color: var(--color-text-primary); background: var(--color-bg); border-radius: var(--radius-tile); padding: var(--space-2); }
.download-half button[type="submit"] {
  background: var(--action-accent); color: var(--action-accent-text); border: none;
  border-radius: var(--radius-tile); padding: 9px var(--space-4);
  font-weight: 700; font-size: var(--font-size-small); justify-self: start;
}
.download-half button[type="submit"]:disabled { opacity: .4; cursor: not-allowed; }
.fb-status { font-size: var(--font-size-small); color: var(--color-text-secondary); margin: 0; min-height: 1em; }

/* ---- G: disclaimer bar ---- */

#disclaimer-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--bar-bg); border-top: 1px solid var(--bar-border);
  padding: 8px var(--space-4);
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--font-size-small); color: var(--color-text-faint);
}
#bar-info {
  background: none; border: 1px solid var(--color-border-strong);
  color: var(--color-text-faint); border-radius: 50%;
  width: 20px; height: 20px; line-height: 1; font-size: 12px;
}
#bar-full { flex-basis: 100%; }
#bar-full p { margin: var(--space-1) 0; line-height: 1.65; }

/* ---- I: toast + modal ---- */

.toast {
  position: fixed; z-index: 60; max-width: 380px;
  background: var(--color-modal); border: 1px solid var(--color-border);
  border-radius: var(--radius-tile); box-shadow: var(--shadow-modal);
  padding: var(--space-3); cursor: pointer;
  transition: opacity 180ms ease, transform 180ms ease;
}
.toast.hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
.toast-head { font-weight: 700; font-size: 13px; display: flex; gap: var(--space-2); align-items: center; }
.toast-headline { color: var(--color-text-primary); font-size: var(--font-size-small); margin: var(--space-2) 0 0; line-height: 1.55; }
.toast-because  { color: var(--color-text-faint); font-family: var(--font-mono); font-size: 11px; margin: var(--space-1) 0 0; }
.toast-cta      { color: var(--color-accent); font-size: var(--font-size-small); font-weight: 600; margin-top: var(--space-2); }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(44,58,45,.38);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: var(--space-5) var(--space-3);
}
.modal-backdrop.hidden { display: none; }
.modal {
  background: var(--color-modal); border: 1px solid var(--color-border);
  border-radius: var(--radius-modal); box-shadow: var(--shadow-modal);
  max-width: 860px; width: 100%; padding: var(--space-4);
  display: grid; grid-template-columns: 104px 1fr; gap: var(--space-4);
}
@media (max-width: 700px) { .modal { grid-template-columns: 1fr; } }
.modal-avatar img { width: 104px; height: 104px; }
.modal-close {
  float: right; background: var(--color-bg); color: var(--color-text-secondary);
  border: 1px solid var(--color-border); border-radius: 50%;
  width: 30px; height: 30px; font-size: 16px; line-height: 1;
}
.modal h2 { font-family: var(--font-display); font-size: var(--detail-topic-size); font-weight: 500; margin: 0 0 var(--space-3); }

.flag-card { background: var(--flagcard-bg); border: 1px solid var(--flagcard-border); border-radius: var(--radius-tile); padding: var(--space-3); margin-top: var(--detail-flag-gap); }
.flag-card:first-of-type { margin-top: var(--space-2); }
.flag-card.strip-red   { border-left: 4px solid var(--sev-red); }
.flag-card.strip-amber { border-left: 4px solid var(--sev-amber); }
.flag-card.strip-green { border-left: 4px solid var(--sev-green); }
.flag-card.strip-grey  { border-left: 4px solid var(--sev-grey); }

.flag-card-head { display: flex; align-items: center; gap: var(--space-2); }
.flag-node-icon { width: 30px; height: 30px; flex: none; }
.flag-label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-body); font-weight: 700; margin: 0; }
.flag-expl  { color: var(--color-text-secondary); font-size: var(--font-size-small); margin: var(--space-2) 0; line-height: 1.6; }
.flag-acc summary { cursor: pointer; color: var(--color-text-faint); font-size: var(--font-size-small); list-style-position: inside; }
.flag-acc[open] summary { margin-bottom: var(--space-2); }

.detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; margin-top: var(--space-2); }
@media (max-width: 700px) { .detail-cols { grid-template-columns: 1fr; } }
.detail-why h4, .detail-closes h4 { margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-faint); font-weight: 500; }
.detail-why ul { margin: 0; padding-left: var(--space-3); font-size: var(--font-size-small); line-height: 1.6; }
.detail-why li { margin: var(--space-1) 0; color: var(--color-text-secondary); }
.detail-closes {
  background: var(--detail-close-bg); border: 1px solid var(--detail-close-border);
  border-left: 3px solid var(--sev-green); border-radius: var(--radius-tile);
  padding: var(--space-3); font-size: var(--font-size-small);
}
.check-row { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0 0 var(--space-2); line-height: 1.55; }
.check-circle { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--check-circle); color: var(--check-circle); font-size: 10px; display: flex; align-items: center; justify-content: center; margin-top: 2px; font-family: var(--font-mono); }
.unknown-q { color: var(--color-text-faint); font-family: var(--font-mono); font-size: 11px; margin: var(--space-1) 0; padding-left: 22px; }

.gri-row { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.gri-badge {
  flex: none;
  background: var(--gri-badge-bg); color: var(--gri-badge-text);
  border: 1px solid rgba(201,168,76,.3); border-left: 3px solid var(--action-accent);
  border-radius: var(--radius-tile); box-shadow: var(--gri-badge-shadow);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: .12em; user-select: none; white-space: nowrap;
}
.gri-context { color: var(--color-text-faint); font-size: var(--font-size-small); margin: 0; line-height: 1.6; }
.gri-name { color: var(--gri-name-color); font-weight: 600; }

.echo-field { color: var(--color-text-secondary); }
.echo-value.unsure { color: var(--sev-grey); font-style: italic; }
.on { color: var(--star-on); }

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

/* ================= v2.4 item 8: mobile bottom-sheet-over-map ================ */
/* The map pins near the top of the viewport (sticky, spanning the whole
   .layout-main scroll); the strip + sections + downloads scroll IN FRONT of
   it as a rounded-top sheet with a translucent, blurred surface and a
   drag-handle bar (visual affordance; static peek height — no drag gesture). */
@media (max-width: 820px) {
  .layout-main { display: flex; flex-direction: column; gap: 0; }
  .layout-main .map-panel {
    order: -1;                      /* map first, pinned */
    position: sticky; top: 6px; z-index: 0;
    height: 45vh; min-height: 0; overflow: auto;
    padding: 10px;
  }
  .strip {
    position: relative; z-index: 2; margin-top: -14px;
    background: rgba(250, 248, 244, .86);
    -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: 22px 22px 0 0;
    padding: 26px 10px 14px;
    box-shadow: 0 -10px 30px rgba(44, 58, 45, .14);
    gap: var(--space-2);
  }
  .strip::before {                  /* drag handle (visual only) */
    content: ""; position: absolute; top: 9px; left: 50%;
    transform: translateX(-50%);
    width: 46px; height: 5px; border-radius: 3px;
    background: var(--color-border-strong);
  }
  .layout-main .sections, .layout-main .download-box, .layout-main .contact-crop {
    position: relative; z-index: 2; margin-left: 0; margin-right: 0;
    background: rgba(250, 248, 244, .92);
    -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  }
  :root { --ring-size: 84px; }      /* smaller pinned ring on narrow screens */
  .ring-note { max-width: 168px; font-size: 11px; padding: 7px 10px; }
  .ring-chip { font-size: 10px; padding: 0 5px; }
}