/* ==========================================================================
   Saved Quote (quote-summary.php): DESIGN-SPEC §6.3, pages.css C.
   Builds on styles.css (cards, plates, stats, fields, alerts, links).
   ========================================================================== */

/* Ready: head, map plate, estimate, next step, share ------------------------- */
.summary-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-block: clamp(28px, 4vw, 56px) clamp(20px, 2.6vw, 32px); }
.summary-head .kicker { margin-bottom: 14px; }
.summary-meta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.summary-meta dt { font-size: var(--fs-caption); color: var(--text-muted); }
.summary-meta dd { margin-top: 2px; font-weight: 600; color: var(--text-strong); }
.summary-meta .ref--lg { font-size: 1.5rem; }
@media (min-width: 1080px) {
  .summary-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .summary-meta { padding-top: 0; border-top: 0; padding-bottom: 6px; }
}
.summary-outcome { margin-bottom: var(--space-6); }
.summary-outcome .alert:focus { outline: none; }
.summary-outcome .alert:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.summary-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-bottom: var(--section-pad); }
/* Wide: map (then the lookup under it) on the left, the panel on the right. The DOM order stays map, panel,
   lookup so reading and Tab order follow the spec; the 1fr second row takes the panel's extra height, so the
   lookup always sits straight under the map. */
@media (min-width: 1080px) {
  .summary-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); grid-template-rows: auto 1fr; align-items: start; }
  .summary-main { grid-column: 1; grid-row: 1; }
  .summary-panel { grid-column: 2; grid-row: 1 / span 2; }
  .summary-grid > .lookup { grid-column: 1; grid-row: 2; align-self: start; }
}
.summary-map { margin: 0; }
.summary-map .caption { margin-top: var(--space-3); padding-inline: 4px; }
.mapview { position: relative; overflow: hidden; border-radius: var(--radius-s); background: #EEEBE3; isolation: isolate; }
.summary-map__view { aspect-ratio: 884 / 562; }
.summary-map__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; font-family: var(--font-text); }
/* The focus ring is drawn above the map's own absolutely positioned layers (an outline on the canvas is
   painted under them and never shows) */
.summary-map__canvas:focus-visible { outline: none; }
.summary-map__canvas:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 1000; border: 3px solid var(--focus); pointer-events: none; }
.summary-map__canvas .map-fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 16px; color: var(--text-muted); font-size: var(--fs-small); text-align: center; }
.summary-map__canvas .map-fallback strong { color: var(--text-strong); }
.map-chip {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin: 0; padding: 0 12px;
  border-radius: var(--radius-pill); background: rgba(255, 253, 248, 0.96);
  box-shadow: 0 0 0 1px rgba(18, 53, 46, 0.14), 0 6px 16px -10px rgba(18, 53, 46, 0.5);
  font-size: var(--fs-caption); font-weight: 600; color: var(--text-strong);
  pointer-events: none;
}
.map-chip .icon { width: 15px; height: 15px; color: var(--accent-text); }
.summary-map__nojs { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: var(--space-5); text-align: center; color: var(--text-muted); font-size: var(--fs-small); }
/* Without JavaScript there is no outline to label or describe */
.no-js .summary-map__tag, .no-js .summary-map .caption { display: none; }
@media (min-width: 1080px) { .summary-map__view { aspect-ratio: 5 / 4; } }
.summary-main { display: grid; gap: var(--space-6); align-content: start; }
/* Phones and tablets follow the DOM: map, estimate, next step, share, then "view another Quote" */
@media (max-width: 1079px) { .summary-map__view { aspect-ratio: 4 / 3; } }
.summary-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-content: start; }
.summary-card .kicker { color: var(--text-muted); }
.figures { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule); }
/* The two figures share the row and never shrink below their own width: a long price (or WCAG 1.4.12 text
   spacing at 320px) moves onto its own row instead of running past the card. */
.figures > .stat { flex: 1 1 0; }
.figures .stat + .stat { padding-left: var(--space-4); border-left: 1px solid var(--rule); }
.figures .stat__value { font-size: clamp(2rem, 1.5rem + 1vw, 2.5rem); }
.figures__note { margin-top: var(--space-3); font-size: var(--fs-caption); color: var(--text-muted); }
.summary-rows { margin-top: var(--space-2); font-size: var(--fs-small); }
.summary-rows > div:first-child { border-top: 0; }
.summary-card__unavailable { margin-top: var(--space-4); color: var(--text); }
.summary-edit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.summary-edit .btn .icon { width: 16px; height: 16px; }
.summary-block > * + * { margin-top: var(--space-3); }
.share-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.share-row .btn .icon { width: 16px; height: 16px; }
/* Copy link: after a copy the visible label is a check and "Copied" for about 2 s (the status line below says
   "Link copied." for screen readers). Both labels share one grid cell, so the button keeps its width. */
.share-copy { display: inline-grid; }
.share-copy__label { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.share-copy__label.is-off { visibility: hidden; }
.share-copy__label[data-copy-done] .icon { color: var(--green-700); stroke-width: 2.2; }
.no-js .share-row { display: none; }
.summary-share__status:empty { display: none; }
.summary-share__manual { display: grid; gap: 6px; }
.access-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: var(--fs-caption); line-height: 1.45; color: var(--text); }
.access-note .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--accent-text); }
.summary-next { padding: var(--space-5); border-radius: var(--radius-l); background: var(--paper-50); border: 1px solid var(--rule); }
.summary-next > * + * { margin-top: var(--space-3); }
.summary-next .phone-display { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 1.875rem); }
.summary-next .btn { margin-top: var(--space-4); white-space: normal; text-align: center; }
@media (max-width: 759px) { .summary-next .btn { width: 100%; } }
.summary-share { padding-top: var(--space-5); border-top: 1px solid var(--rule-strong); }
.summary-grid > .lookup { background: transparent; max-width: none; }

/* Lookup and not found: one focused narrow column ---------------------------- */
.summary-find { padding-block: clamp(32px, 5vw, 72px) var(--space-5); }
.summary-find .kicker { margin-bottom: 14px; }
.summary-find .lead { margin-top: var(--space-4); }
.summary-lookup { padding-block: var(--space-5) var(--section-pad); }
.lookup { display: grid; gap: var(--space-3); max-width: 640px; }
.lookup .input--code { max-width: none; }
.lookup .input--code::placeholder { letter-spacing: 0.04em; }
/* The number keeps its 44px tel target: the line is a centred flex row, and the number wraps onto its
   own row when the sentence does not fit */
.lookup__lost { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; padding-top: var(--space-3); border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--text-muted); }
@media (max-width: 479px) {
  .lookup .input-row { flex-direction: column; }
  .lookup .input-row .input, .lookup .input-row .btn { width: 100%; }
}