/* Layout breakpoints. Loaded last.
   Component layout uses container queries on .stage and .kit-frame, so a
   375px kit frame matches a phone. Viewport queries are only the document
   scroll model, safe areas, the 1024px app shell, phone landscape, and
   the kit chrome (the nav is not inside a specimen frame). */

.stage,
.kit-frame {
  container-type: inline-size;
  container-name: frame;
}

.m-only { display: none; }

/* The mast sits outside the stage, so its hit areas cannot use the frame query. */
.badge, .states-link { position: relative; }
.badge::after, .states-link::after {
  content: ""; position: absolute;
  inset: calc((var(--size-touch) - 100%) / -2);
}

/* ── Document: phones scroll, the shell locks from 1024 ──────── */
html, body { height: auto; overflow: visible; }
body {
  min-height: 100dvh;
  height: auto;
  padding-top: max(var(--space-page), env(safe-area-inset-top));
  padding-bottom: max(var(--space-group), env(safe-area-inset-bottom));
  padding-left: max(var(--space-group), env(safe-area-inset-left));
  padding-right: max(var(--space-group), env(safe-area-inset-right));
}
.stage { flex: none; overflow: visible; min-height: 0; height: auto; }
@media (max-width: 639px) {
  .stage:has(.intro) {
    background: transparent;
    outline: none;
    border-radius: 0;
  }
}
.mast {
  padding-top: var(--space-snug);
  padding-left: max(var(--space-group), env(safe-area-inset-left));
  padding-right: max(var(--space-group), env(safe-area-inset-right));
}
.brand, .mast { min-width: 0; }
.brand, .pills { flex-wrap: wrap; max-width: 100%; }

/* One row. The wordmark, badge, and network pill shrink so the mast does not wrap. */
@media (max-width: 639px) {
  body {
    padding-left: max(var(--space-group), env(safe-area-inset-left));
    padding-right: max(var(--space-group), env(safe-area-inset-right));
  }
  .mast {
    flex-wrap: nowrap;
    gap: var(--space-inline);
    padding: var(--space-snug) var(--space-inline);
  }
  .brand, .pills { flex-wrap: nowrap; }
  .brand { gap: var(--space-inline); min-width: 0; }
  .pills { flex: none; }
  .wordmark { height: 0.875rem; flex: none; }
  .badge, .pill { white-space: nowrap; flex: none; }
  .badge {
    padding: var(--space-tight) var(--space-inline);
    font-size: var(--type-label-size);
  }
  .pill {
    height: var(--size-control-sm);
    padding-inline: var(--space-snug);
    font-size: var(--type-caption-size);
    gap: var(--space-tight);
  }
}

@media (min-width: 640px) {
  :root {
    --card-pad: var(--space-card);
    --shell-pad: var(--space-page);
    --shell-gap: var(--space-group);
  }
  .ring-note { max-width: none; white-space: nowrap; }
}

@media (min-width: 1024px) {
  :root {
    --shell-pad: var(--space-card);
    --shell-gap: var(--space-card);
  }
  html, body { height: auto; min-height: 100%; overflow: auto; }
  body { min-height: 100dvh; padding: var(--shell-pad); }
  .stage { flex: 1 0 auto; min-height: 0; overflow: visible; height: auto; }
  .mast { padding: var(--space-snug) var(--inset); }
}

/* The only height query: phone landscape puts the map beside the list. */
@media (max-height: 500px) and (orientation: landscape) {
  .console {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* Kit chrome. Viewport, because the nav sits outside the specimen frame. */
@media (max-width: 1023px) {
  .kit-layout { flex-direction: column; }
  .kit-nav { position: static; width: auto; }
}
@media (max-width: 639px) {
  .kit-scale-row { flex-direction: column; align-items: flex-start; }
  .kit-scale-meta { flex: none; width: 100%; }
  .states-link, .pill { height: var(--size-control-sm); padding: 0 var(--space-inline); font-size: var(--type-caption-size); }
}

/* ── Inside a phone-width stage or kit frame ─────────────────── */
@container frame (max-width: 639px) {
  .text-ui--phone-subheading {
    font-size: var(--type-subheading-size);
    font-weight: var(--type-subheading-weight);
    line-height: var(--type-subheading-leading);
    letter-spacing: 0;
  }
  .text-caption--phone-body {
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-leading);
    letter-spacing: 0;
  }
  .text-label--phone-eyebrow {
    font-size: var(--type-eyebrow-size);
    font-weight: var(--type-eyebrow-weight);
    line-height: var(--type-eyebrow-leading);
  }
  .text-display { max-width: none; text-wrap: balance; }
  .intro, .console { min-height: 0; overflow: visible; height: auto; }
  .console { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-group); padding: var(--space-group) var(--space-inline); }
  .card, .card-cov, .card-check, .card-result { height: auto; overflow: visible; }
  .act-copy { min-height: 0; }
  .intro-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "figure" "copy";
    gap: var(--space-group);
    padding: var(--space-group) var(--space-inline);
    align-items: stretch;
  }
  .intro-foot { flex-direction: column; align-items: stretch; }
  .intro-foot > .btn { width: 100%; }
  .cov-svg { width: min(100%, 17.5rem); max-width: none; margin-inline: auto; touch-action: manipulation; }
  .cov-svg .cov-pill { display: none; }
  .ring-fig { width: min(100%, 20rem); max-width: none; }
  .ring-fig .cov-svg, .intro-map { width: 100%; }
  .console .card { padding-inline: 0; }
  .card-check > .btn-block { width: 100%; align-self: stretch; }
  .cov { align-items: stretch; }
  .cov-seg { width: 100%; align-self: stretch; }
  /* Rows share the width and wrap. --step-cols comes from stepColumns. */
  .trail .steps { --step-cols: 2; }
  .trail .step {
    flex: 1 1 calc((100% / var(--step-cols)) - var(--space-snug));
    width: auto;
    min-width: 0;
    max-width: 100%;
  }
  .cov-seg .m-seg-btn {
    min-width: 0; flex: 1 1 0; height: var(--size-touch); min-height: var(--size-touch);
    overflow: hidden; text-overflow: ellipsis;
  }
  .m-only { display: block; }
  .d-only { display: none; }
  .m-only .m-row {
    display: grid;
    position: relative;
    grid-template-columns: 4px auto minmax(0, 1fr) auto;
    grid-template-areas: "bar letter name name" "bar letter sub addr";
    align-items: center;
    column-gap: var(--space-snug);
    row-gap: var(--space-tight);
    min-height: var(--size-touch);
    padding: var(--space-snug) var(--space-group) var(--space-snug) 0;
  }
  .m-only .m-bar,
  .m-only .m-row[data-reach="in"] .m-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: transparent;
  }
  .m-only .m-row[aria-pressed="true"] .m-bar {
    background: var(--color-text);
  }
  .m-only .w-letter { grid-area: letter; }
  .m-only .m-text { display: contents; }
  .m-only .m-name {
    grid-area: name;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .m-only .m-sub {
    grid-area: sub;
    align-self: start;
    min-width: 0;
    text-align: left;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .m-only .w-addr { grid-area: addr; align-self: start; margin-left: 0; padding-left: 0; }
  .btn-primary, .btn-lg, .btn-block { min-height: var(--size-control-lg); }
  .card-check > .btn-block,
  .card-result .actions {
    position: sticky; bottom: 0; z-index: 2;
    margin-top: var(--space-group);
    padding-bottom: max(var(--space-snug), env(safe-area-inset-bottom));
  }
  .card-result .actions {
    background: var(--color-surface-raised);
    padding-top: var(--space-snug);
  }
  .card-result .actions { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .card-result .actions .btn { width: 100%; }
  .act-dot, .badge, .stat-link { position: relative; }
  .act-dot::after, .badge::after, .stat-link::after {
    content: ""; position: absolute;
    inset: calc((var(--size-touch) - 100%) / -2);
  }
  .cov-svg:not(.scanning) .wdot,
  .cov-svg:not(.scanning) .cov-pick {
    pointer-events: none;
    cursor: default;
  }

  /* A phone has no hover. Controls are default or selected. */
  .btn-primary:hover:not(:disabled),
  .btn-primary.is-hover:not(:disabled) { background: var(--color-accent); }
  .btn-tertiary:hover:not(:disabled),
  .btn-tertiary.is-hover:not(:disabled) {
    background: var(--color-surface);
    border-color: var(--color-border);
  }
  .act-dot:not([aria-current="step"]):hover,
  .act-dot.is-hover:not([aria-current="step"]) { background: var(--color-border); }
  .m-row:not([aria-pressed="true"]):hover,
  .m-row.is-hover:not([aria-pressed="true"]) { background: transparent; }
  .m-seg-btn:not([aria-pressed="true"]):not(:disabled):hover,
  .m-seg-btn.is-hover:not([aria-pressed="true"]) {
    color: var(--color-text-secondary);
    background: transparent;
  }
  .paste-link:hover, .paste-link.is-hover,
  .m-paste:hover, .m-paste.is-hover {
    background: none;
    border-color: transparent;
    color: var(--color-text-secondary);
  }
  .field:hover, .field.is-hover {
    border-color: var(--color-text-disabled);
    background: var(--color-surface-raised);
  }
  .cov-svg:not(.scanning) .wdot:not([aria-pressed="true"]):hover > circle:not(.wdot-ring):not(.wdot-fill),
  .wdot.is-hover:not([aria-pressed="true"]) > circle:not(.wdot-ring):not(.wdot-fill) {
    stroke: var(--color-text-tertiary);
    fill: transparent;
  }
  .stat-link:hover { text-decoration: none; color: var(--color-text); }
}

/* Map and list sit side by side once the stage or frame is at least 40rem. */
@container frame (min-width: 40rem) {
  .console {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-block);
  }
}

/* Compliant is green. Non-compliant is red. */
.cband[data-state="clear"]{ fill:var(--tone-pass-wash); }

.cov-svg:has(.cband[data-state="clear"]):not(:has(.cband[data-state="exposed"])):not(:has(.cband[data-state="listed"])):not(:has(.cov-core[data-state="listed"])) .cov-ring,
.cov-svg:has(.cband[data-state="clear"]):not(:has(.cband[data-state="exposed"])):not(:has(.cband[data-state="listed"])):not(:has(.cov-core[data-state="listed"])) .cov-core{
  stroke:var(--tone-pass-edge);
}
.cov-svg:not(.intro-map):has(.cband[data-state="clear"]):not(:has(.cband[data-state="exposed"])):not(:has(.cband[data-state="listed"])):not(:has(.cov-core[data-state="listed"])) .cov-disc{
  fill:var(--tone-pass-wash);
}

.cov-svg .wdot[data-state="clear"] > circle.wdot-ring,
.cov-svg .wdot[data-state="clear"] > circle:not(.wdot-ring):not(.wdot-fill):not(.map-focus){
  stroke:var(--tone-pass-edge);
}
.cov-svg .wdot[data-state="clear"] > circle.wdot-fill,
.cov-svg .wdot[data-state="clear"] > circle:not(.wdot-ring):not(.wdot-fill):not(.map-focus){
  fill:var(--tone-pass-edge);
}

.cov-svg:has(.cov-core[data-state="listed"]) .cov-disc,
.cov-svg:has(.cband[data-state="listed"]) .cov-disc,
.cov-svg:has(.cband[data-state="exposed"]) .cov-disc,
.cov-svg:has(.cov-core[data-state="listed"]) .cband,
.cov-svg:has(.cband[data-state="exposed"]) .cband[data-state="clear"]{
  fill:var(--tone-block-wash);
}

.cov-core[data-state="listed"]{
  fill:var(--tone-block-wash); stroke:var(--tone-block-edge);
}

.cov-core[data-state="listed"] ~ .cov-core-label{ fill:var(--tone-block-text); }

.cov-svg:has(.cov-core[data-state="listed"]) .cov-core-pick{ stroke:var(--tone-block-edge); }

.cov-svg:has(.cov-core[data-state="listed"]) .cov-ring,
.cov-svg:has(.cband[data-state="listed"]) .cov-ring,
.cov-svg:has(.cband[data-state="exposed"]) .cov-ring{
  stroke:var(--tone-block-edge);
}

.cov-svg .wdot[data-state="listed"] > circle.wdot-ring,
.cov-svg .wdot[data-state="exposed"] > circle.wdot-ring,
.cov-svg .wdot[data-state="listed"] > circle:not(.wdot-ring):not(.wdot-fill):not(.map-focus),
.cov-svg .wdot[data-state="exposed"] > circle:not(.wdot-ring):not(.wdot-fill):not(.map-focus){
  stroke:var(--tone-block-edge);
}
.cov-svg .wdot[data-state="listed"] > circle.wdot-fill,
.cov-svg .wdot[data-state="exposed"] > circle.wdot-fill,
.cov-svg .wdot[data-state="listed"] > circle:not(.wdot-ring):not(.wdot-fill):not(.map-focus),
.cov-svg .wdot[data-state="exposed"] > circle:not(.wdot-ring):not(.wdot-fill):not(.map-focus){
  fill:var(--tone-block-edge);
}

.cov-svg .wdot[data-state="outside"] > circle.wdot-ring,
.cov-svg .wdot[data-state="outside"] > circle:not(.wdot-ring):not(.wdot-fill):not(.map-focus){
  stroke:var(--tone-caution-edge);
}
.cov-svg .wdot[data-state="outside"] > circle.wdot-fill,
.cov-svg .wdot[data-state="outside"] > circle:not(.wdot-ring):not(.wdot-fill):not(.map-focus){
  fill:var(--tone-caution-edge);
}

/* The radius tint grows without a stroke. The hop rings stay. */
.cov-svg:not(.scanning):has(.cov-ring[aria-pressed="true"]) .cov-disc{
  stroke:none;
}

/* The wallet mark is a hollow stroke. A transparent fill keeps the look and
   makes the whole disc a target, so a click selects that wallet. */
.cov-svg:not(.scanning) .wdot:not(.intro-pick) > circle:not(.wdot-ring):not(.wdot-fill):not(.map-focus){
  fill: transparent;
}

/* The dot that travels between wallets: a small black fill, no outline, no outer ring. */
.cov-svg:not(.scanning) .cov-pick-ring,
.cov-svg:not(.scanning) .cov-pick.not .cov-pick-ring,
.cov-svg:not(.scanning) .cov-pick.on-core .cov-pick-ring,
.cov-svg:not(.scanning) .cov-pick.dragging .cov-pick-ring{
  stroke: none;
  opacity: 0;
}
.cov-svg:not(.scanning) .cov-pick-dot,
.cov-svg:not(.scanning) .cov-pick.not .cov-pick-dot,
.cov-svg:not(.scanning) .cov-pick.on-core .cov-pick-dot,
.cov-svg:not(.scanning) .cov-pick.dragging .cov-pick-dot{
  fill: var(--color-accent);
  stroke: none;
}

/* The intro wallet uses the selected mark: a solid disc and a white letter. */
.intro-map .intro-pick[aria-pressed="true"] > circle:not(.wdot-ring):not(.wdot-fill):not(.map-focus){
  fill:transparent; stroke:none;
}
.intro-map .intro-pick[aria-pressed="true"] > circle.wdot-ring{
  fill:none; stroke:var(--color-accent); opacity:1;
}
.intro-map .intro-pick[aria-pressed="true"] > circle.wdot-fill{
  fill:var(--color-accent);
}
.intro-map .intro-pick[aria-pressed="true"] > circle.wdot-fill + text{
  fill:var(--color-on-accent);
}
.intro-map .intro-pick[aria-pressed="true"] .intro-pick-label{
  fill:var(--color-text-tertiary);
}

/* The intro's third step is the non-compliant reach: red tint, red wallet. */
.cov-svg.intro-map[data-verdict="block"]:not(.scanning) .cov-disc{
  fill:var(--tone-block-wash); stroke:var(--tone-block-edge);
}
.intro-map[data-verdict="block"] .cov-ring,
.intro-map[data-verdict="block"] .cov-core{
  stroke:var(--tone-block-edge);
}
.intro-map[data-verdict="block"] .intro-pick[aria-pressed="true"] > circle.wdot-ring{
  stroke:var(--tone-block-edge); opacity:1;
}
.intro-map[data-verdict="block"] .intro-pick[aria-pressed="true"] > circle.wdot-fill{
  fill:var(--tone-block-edge);
}
.intro-map[data-verdict="block"] .intro-pick > circle.wdot-fill + text{
  fill:var(--color-on-accent);
}

@media (hover: hover) {
  .cov-svg:not(.scanning) .wdot:not([aria-pressed="true"]):hover > circle:not(.wdot-ring):not(.wdot-fill):not(.map-focus),
  .cov-svg:not(.scanning) .wdot.is-hover:not([aria-pressed="true"]) > circle:not(.wdot-ring):not(.wdot-fill):not(.map-focus) {
    fill: transparent;
  }
}