/* The three steps: the step bar in the header, the policy step, and the
   notes that say which part is speaking. Loaded last. */

/* ── Step bar ─────────────────────────────────────────────────── */
.flow{ flex:1 1 auto; display:flex; justify-content:center; min-width:0; }
.flow[hidden]{ display:none; }
.flow-list{ display:flex; align-items:center; gap:var(--space-inline); margin:0; padding:0; list-style:none; }
.flow-item{ display:flex; align-items:center; gap:var(--space-inline); }
.flow-line{ display:block; width:var(--space-block); height:1px; background:var(--color-border); }
.flow-item[data-state="done"] .flow-line,
.flow-item[data-state="current"] .flow-line{ background:var(--color-border-strong); }

.flow-step{
  display:inline-flex; align-items:center; gap:var(--space-inline);
  height:var(--size-control-sm); padding:0 var(--space-snug) 0 var(--space-tight);
  border:1px solid transparent; border-radius:var(--radius-full); background:none;
  font-family:var(--font-sans); font-size:var(--type-ui-size); font-weight:500;
  color:var(--color-text-tertiary); white-space:nowrap;
}
.flow-step[aria-current="step"]{ color:var(--color-text); }
.flow-item[data-state="done"] .flow-step{ color:var(--color-text-secondary); cursor:pointer; }
@media (hover:hover){
  .flow-item[data-state="done"] .flow-step:hover{ background:var(--state-hover-fill); border-color:var(--state-hover-edge); color:var(--color-text); }
}
.flow-step:focus-visible{ outline:var(--focus-ring-width) solid var(--color-focus-ring); outline-offset:var(--focus-ring-offset); }
.flow-step[disabled]{ cursor:default; }

.flow-n{
  flex:none; width:24px; height:24px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--color-surface-sunken); color:var(--color-text-secondary);
  font-size:var(--type-caption-size); font-weight:500; font-variant-numeric:tabular-nums;
}
.flow-n svg{ width:12px; height:12px; fill:currentColor; }
.flow-step[aria-current="step"] .flow-n{ background:var(--color-text); color:var(--color-on-accent); }

/* A phone puts the step bar on its own row under the brand, and only the
   current step keeps its name. */
@media (max-width: 639px){
  .mast:has(.flow:not([hidden])){ flex-wrap:wrap; row-gap:var(--space-inline); }
  .flow{ order:3; flex-basis:100%; justify-content:center; }
  .flow-line{ width:var(--space-group); }
  .flow-item:not([data-state="current"]) .flow-label{ display:none; }
  .flow-item:not([data-state="current"]) .flow-step{ padding-right:var(--space-tight); }
}

/* ── Column heads ─────────────────────────────────────────────── */
.step-title{ display:flex; align-items:baseline; gap:var(--space-snug); flex-wrap:wrap; }
.step-title .text-heading{ margin:0; }
.link-btn{
  padding:0; border:none; background:none; cursor:pointer;
  font-family:var(--font-sans); font-size:var(--type-ui-size); font-weight:500;
  color:var(--color-text-secondary); text-decoration:underline; text-underline-offset:3px;
}
@media (hover:hover){ .link-btn:hover{ color:var(--color-text); } }
.link-btn:focus-visible{ outline:var(--focus-ring-width) solid var(--color-focus-ring); outline-offset:var(--focus-ring-offset); border-radius:4px; }

/* What each part does, in one line, where that part is on screen. */
.part-note{
  margin:0; max-width:60ch;
  font-size:var(--type-body-size); line-height:var(--type-body-leading); color:var(--color-text-secondary);
}
.decided a{ white-space:nowrap; }
.part-note a, .policy-facts a, .decided a:not(.btn){ color:inherit; text-decoration:underline; text-underline-offset:3px; }
@media (hover:hover){ .part-note a:hover, .policy-facts a:hover, .decided a:not(.btn):hover{ color:var(--color-text); } }

/* ── Policy step ──────────────────────────────────────────────── */
/* A policy is two parts, data and rule, each with its own label. */
.policy-part{ display:flex; flex-direction:column; gap:var(--space-inline); }
.part-value{ margin:0; max-width:60ch; font-size:var(--type-body-size); line-height:var(--type-body-leading); color:var(--color-text); text-wrap:pretty; }
/* The three policies: each an option with its rule, the chosen one marked
   by a filled radio and a dark edge. */
.policy-options{ display:flex; flex-direction:column; gap:var(--space-inline); }
.policy-opt{
  display:flex; align-items:flex-start; gap:var(--space-snug); width:100%;
  padding:var(--space-snug) var(--space-group); text-align:left; cursor:pointer;
  border:1px solid var(--color-border); border-radius:var(--radius-control);
  background:var(--color-surface-raised); font-family:var(--font-sans); color:var(--color-text);
  transition:border-color var(--duration-interaction), box-shadow var(--duration-interaction), background var(--duration-interaction);
}
@media (hover:hover){ .policy-opt:not([aria-checked="true"]):hover{ background:var(--state-hover-fill); border-color:var(--color-border-strong); } }
.policy-opt[aria-checked="true"]{ border-color:var(--color-text); box-shadow:inset 0 0 0 1px var(--color-text); }
.policy-opt:focus-visible{ outline:var(--focus-ring-width) solid var(--color-focus-ring); outline-offset:var(--focus-ring-offset); }
.opt-radio{
  flex:none; width:18px; height:18px; margin-top:2px; border-radius:50%;
  border:1.5px solid var(--color-border-strong); background:var(--color-surface-raised);
}
.policy-opt[aria-checked="true"] .opt-radio{
  border-color:var(--color-text); background:var(--color-text);
  box-shadow:inset 0 0 0 3.5px var(--color-surface-raised);
}
/* The allow-all policy: caution colour at rest and when chosen, so it
   reads as the one you are not meant to pick. */
.policy-opt[data-tone="caution"]{ border-color:var(--tone-caution-edge); background:var(--tone-caution-wash); }
@media (hover:hover){ .policy-opt[data-tone="caution"]:not([aria-checked="true"]):hover{ background:var(--tone-caution-wash); border-color:var(--tone-caution-edge); box-shadow:inset 0 0 0 1px var(--tone-caution-edge); } }
.policy-opt[data-tone="caution"][aria-checked="true"]{ border-color:var(--tone-caution-edge); box-shadow:inset 0 0 0 1px var(--tone-caution-edge); }
.policy-opt[data-tone="caution"] .opt-radio{ border-color:var(--tone-caution-edge); }
.policy-opt[data-tone="caution"][aria-checked="true"] .opt-radio{ border-color:var(--tone-caution-edge); background:var(--tone-caution-edge); }
.policy-opt[data-tone="caution"] .opt-tag{ color:var(--tone-caution-text); background:var(--color-surface-raised); }
.cov:has(.cov-svg[data-allow-all]) .cov-sum b{ color:var(--tone-caution-text); }
.opt-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.opt-name{ display:flex; align-items:center; gap:var(--space-inline); font-weight:500; }
.opt-tag{
  padding:0 var(--space-inline); border-radius:var(--radius-full);
  background:var(--color-surface-sunken); color:var(--color-text-secondary);
  font-size:var(--type-caption-size); line-height:1.6; font-weight:500;
}
.opt-rule{ font-size:var(--type-body-size); line-height:var(--type-body-leading); color:var(--color-text-secondary); }
body.is-states .flow{ display:none; }

.policy-facts{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-snug) var(--space-group);
  margin:0;
}
.policy-facts dt{
  font-size:var(--type-eyebrow-size); font-weight:var(--type-eyebrow-weight); line-height:var(--type-eyebrow-leading);
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--color-text-tertiary);
}
.policy-facts dd{ margin:var(--space-tight) 0 0; min-width:0; }
.policy-facts a{
  display:inline-flex; align-items:center; gap:var(--space-tight);
  font-family:var(--font-code); font-size:var(--type-body-size); color:var(--color-text);
  white-space:nowrap;
}
.policy-facts .icon{ width:12px; height:12px; flex:none; fill:currentColor; }

/* The rules card reads as one group, like the scan card. */
.card-rules{ justify-content:center; }
.card-rules > .card-body{ flex:0 1 auto; gap:var(--space-card); }
.card-rules > .btn-block{ margin-top:var(--space-card); }

/* The map on the scan step only shows the policy, so it is not a control. */
.console:not(.is-policy) .cov-svg[role="img"]{ cursor:default; }

/* ── Verdict ──────────────────────────────────────────────────── */
.decided{
  display:flex; flex-direction:column; align-items:stretch; gap:var(--space-snug);
  padding:var(--space-group); width:100%;
  border:1px solid var(--color-border); border-radius:var(--radius-control);
  background:var(--color-surface-raised);
}
.decided-text{ flex:1 1 auto; min-width:0; }
.card-result .actions .decided-btn{ flex:none; width:100%; }
.decided-head{ display:flex; align-items:center; gap:var(--space-inline); color:var(--color-text); }
.decided-head .text-ui{ font-weight:500; }
.decided-icon{ flex:none; width:16px; height:16px; fill:currentColor; }
.decided-link{
  display:inline-flex; align-items:center; gap:var(--space-tight);
  font-family:var(--font-code); font-size:var(--type-caption-size); white-space:nowrap;
}
.decided-link .icon{ width:12px; height:12px; fill:currentColor; }
.decided-body{
  margin:var(--space-tight) 0 0; text-wrap:pretty;
  font-size:var(--type-body-size); line-height:var(--type-body-leading); color:var(--color-text-secondary);
}

/* Short laptop screens trade air for the map, as fit.css does. */
@media (min-width: 1024px) and (max-height: 860px){
  .decided{ padding:var(--space-snug) var(--space-group); gap:var(--space-inline); }
  .card-result .actions{ gap:var(--space-inline); }
  .card-rules > .card-body{ gap:var(--space-group); }
  .card-rules > .btn-block{ margin-top:var(--space-group); }
}
@media (min-width: 1024px) and (max-height: 700px){
  .card-rules > .card-body{ gap:var(--space-inline); }
  .card-rules > .btn-block{ margin-top:var(--space-snug); }
  .decided{ padding:var(--space-snug); }
  .card-result .actions{ gap:var(--space-inline); }
  .card-result .right{ gap:var(--space-snug); }
  .decided-body{ font-size:var(--type-caption-size); line-height:var(--type-caption-leading); margin-top:0; }
  .policy-opt{ padding:6px var(--space-snug); }
  .opt-rule{ font-size:var(--type-caption-size); line-height:var(--type-caption-leading); }
  .policy-options{ gap:var(--space-tight); }
  .opt-radio{ margin-top:0; }
  .policy-part .part-value, .card-rules .part-note{ font-size:var(--type-caption-size); line-height:var(--type-caption-leading); }
  .policy-part{ gap:var(--space-tight); }
  .result-lead .reason{ margin-bottom:0; }
  .policy-facts{ row-gap:0; }
  .policy-facts dd{ margin-top:0; }
  .part-note{ font-size:var(--type-caption-size); line-height:var(--type-caption-leading); }
}

/* Phones: facts stack, the scan note stays. */
@container frame (max-width: 639px){
  .policy-facts{ grid-template-columns:minmax(0, 1fr); }
  .policy-facts > div{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-group); }
  .policy-facts dd{ margin:0; }
}

/* Narrow laptops of any height: the four scan steps share one row, as
   fit.css already does on short ones, so the verdict keeps to one screen. */
@media (min-width: 1024px) and (max-width: 1279px){
  .trail .steps{ flex-wrap:nowrap; gap:var(--space-inline); }
  .trail .step{ flex:1 1 0; min-width:0; padding-inline:var(--space-inline); }
  .trail .lbl-long{ display:none; }
  .trail .lbl-short{ display:inline; }
}

/* Short, narrow laptops: the quorum card keeps to two lines. The signed
   task is still one click away on the button below. */
@media (min-width: 1024px) and (max-width: 1279px) and (max-height: 700px){
  .decided-link{ display:none; }
  .card-result .actions .btn{ min-height:var(--size-control); padding-block:var(--space-inline); }
  /* The headline already gives the decision and the reason the distance. */
  .card-result .stats{ display:none; }
  .decided-head .text-ui{ font-size:var(--type-caption-size); }
}

/* The result closes with Newton's part: the signed card, then New check.
   It follows the scan steps at the card's own gap instead of being pushed to
   the bottom of the column, which left a hole on tall screens. */
.card-result .result-body{ flex:0 0 auto; }
.card-result .actions{ flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:var(--space-snug); margin-top:0; }
.card-result .actions > .btn{ flex:none; width:100%; }
@container result (max-width: 360px){
  .decided{ flex-direction:column; align-items:stretch; }
  .card-result .actions .decided-btn{ width:100%; }
}

/* Between the two steps only the right column moves; the map stays put. */
.console.swap-right .col:nth-child(2) > .card{ animation:rise var(--duration-emphasis) var(--ease-newton) backwards; }
@media (prefers-reduced-motion: reduce){ .console.swap-right .col:nth-child(2) > .card{ animation:none; } }

/* ── Sleeker pass ─────────────────────────────────────────────── */
/* Contracts sit on one quiet line under the policy, not a three-column table. */
p.policy-facts{
  display:flex; flex-wrap:wrap; gap:var(--space-tight) var(--space-group); margin:0;
  font-size:var(--type-caption-size); line-height:var(--type-caption-leading); color:var(--color-text-tertiary);
}
p.policy-facts a{ font-size:var(--type-caption-size); color:var(--color-text-secondary); }
/* The wallet checked, as the result column's title. */
.text-data-head{ font-family:var(--font-code); letter-spacing:0; }
/* Two numbers under the answer, without dividers between them. */
.card-result .stats{ grid-template-columns:repeat(2, minmax(0, max-content)); column-gap:var(--space-region); }
.card-result .stat + .stat{ border-left:none; padding-left:0; }
/* The Newton card: no border, a hairline on top separates it from the answer. */
.decided{ border:none; border-top:1px solid var(--color-border); border-radius:0; padding:var(--space-group) 0 0; }
/* New check as a quiet text button under the card. */
.card-result .actions > #again{ align-self:center; width:auto; min-height:var(--size-control-sm); border-color:transparent; background:none; text-decoration:underline; text-underline-offset:3px; color:var(--color-text-secondary); }
@media (hover:hover){ .card-result .actions > #again:hover{ color:var(--color-text); background:none; } }

/* Policy step breathing room: the options, then the data note and the
   contracts as one quiet group, then the button, each well apart. */
.card-rules > .card-body{ gap:var(--space-block); }
.card-rules > .btn-block{ margin-top:var(--space-block); }
.policy-meta{ display:flex; flex-direction:column; gap:var(--space-snug); }
.card-rules .part-note{ max-width:none; }
.policy-options{ gap:var(--space-snug); }
@media (min-width: 1024px) and (max-height: 860px){
  .card-rules > .card-body{ gap:var(--space-card); }
  .card-rules > .btn-block{ margin-top:var(--space-card); }
  .policy-options{ gap:var(--space-inline); }
}
@media (min-width: 1024px) and (max-height: 700px){
  .card-rules > .card-body{ gap:var(--space-group); }
  .card-rules > .btn-block{ margin-top:var(--space-group); }
  .policy-meta{ gap:var(--space-inline); }
  .policy-options{ gap:var(--space-tight); }
}

.verify-line{ color:var(--color-text-tertiary); }

/* ── Trace and path ───────────────────────────────────────────── */
/* On the map: one segment per transfer, a dot per wallet between, and a
   halo that marks whichever stop the rail or the pointer is on. */
.trace-seg{ stroke-width:2; stroke-linecap:round; stroke-dasharray:160; stroke-dashoffset:160;
  animation:traceDraw 600ms var(--ease-newton) forwards; transition:stroke-width var(--duration-interaction); }
.trace-seg.tone-block{ stroke:var(--tone-block-edge); }
.trace-seg.tone-caution{ stroke:var(--tone-caution-edge); }
.trace-seg.is-hot{ stroke-width:4; }
.trace-node{ stroke:var(--color-surface-raised); stroke-width:2; opacity:0; animation:traceNode 300ms var(--ease-newton) forwards; }
.trace-node.tone-block{ fill:var(--tone-block-edge); }
.trace-node.tone-caution{ fill:var(--tone-caution-edge); }
.trace-halo{ fill:none; stroke-width:2; opacity:0; transition:opacity var(--duration-interaction); }
.trace-halo.tone-block{ stroke:var(--tone-block-edge); }
.trace-halo.tone-caution{ stroke:var(--tone-caution-edge); }
.trace-halo.is-hot{ opacity:1; }
.trace-hits{ cursor:pointer; }
.trace-hit{ fill:transparent; }
.trace-hit-seg{ stroke:transparent; stroke-width:14; stroke-linecap:round; }
@keyframes traceDraw{ to{ stroke-dashoffset:0; } }
@keyframes traceNode{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .trace-seg{ animation:none; stroke-dashoffset:0; }
  .trace-node{ animation:none; opacity:1; }
}
.cov-read{ color:var(--color-text-secondary); }
.cov-map{ position:relative; }
.trace-tip{
  position:absolute; z-index:2; pointer-events:none; transform:translate(-50%, calc(-100% - 14px));
  display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:4px var(--space-inline); border-radius:var(--radius-control);
  background:var(--color-text); color:var(--color-surface-raised); white-space:nowrap;
  opacity:0; transition:opacity var(--duration-interaction);
}
.trace-tip.is-on{ opacity:1; }
.tip-addr{ font-family:var(--font-code); font-size:var(--type-caption-size); }
.tip-role{ font-size:var(--type-caption-size); opacity:.75; }

/* Under the result: the same path as a rail. Amounts sit between the stops
   they connect, with no arrow, because a link counts transfers either way. */
/* The path gets its own panel. It takes whatever height the column has
   left, so the signed card and New check settle at the bottom, level with
   the caption under the map. */
.path{
  display:grid; grid-template-rows:auto 1fr auto; gap:var(--space-snug);
  padding:var(--space-group); border-radius:var(--radius-surface);
  background:var(--color-surface-sunken);
}
.path > .rail{ align-self:center; }
.card-result:has(.path) .result-body,
.card-result:has(.path) .right{ flex:1 1 auto; }
.card-result .right > .path{ flex:1 1 auto; }
.path-src{ margin:0; font-size:var(--type-caption-size); line-height:var(--type-caption-leading); color:var(--color-text-tertiary); }
.path-src a{ color:var(--color-text-secondary); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
@media (hover:hover){ .path-src a:hover{ color:var(--color-text); } }
/* The rail's dots ring against the panel, not the card. */
.path .rail-dot{ box-shadow:0 0 0 2px var(--color-surface-sunken); }
.path .rail-stop:first-child:not(:last-child) .rail-dot{ background:var(--color-surface-sunken); box-shadow:inset 0 0 0 2px var(--rail-tone), 0 0 0 2px var(--color-surface-sunken); }
.path .rail-stop.is-hot .rail-dot{ box-shadow:0 0 0 2px var(--color-surface-sunken), 0 0 0 5px var(--rail-wash), 0 0 0 6px var(--rail-tone); }
.path .rail-stop:first-child:not(:last-child).is-hot .rail-dot{ box-shadow:inset 0 0 0 2px var(--rail-tone), 0 0 0 2px var(--color-surface-sunken), 0 0 0 5px var(--rail-wash), 0 0 0 6px var(--rail-tone); }
.path .rail-edge{ background:var(--color-surface-sunken); }
/* Hovering the Lazarus stop lights the centre of the map. */
#cov-svg .cov-core.is-hot{ stroke-width:3; transition:stroke-width var(--duration-interaction); }
#cov-svg .cov-core.is-hot.hot-block{ stroke:var(--tone-block-edge); }
#cov-svg .cov-core.is-hot.hot-caution{ stroke:var(--tone-caution-edge); }
.rail{ --rail-tone:var(--tone-block-edge); --rail-text:var(--tone-block-text); --rail-wash:var(--tone-block-wash);
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n), minmax(0, 1fr)); }
.rail.tone-caution{ --rail-tone:var(--tone-caution-edge); --rail-text:var(--tone-caution-text); --rail-wash:var(--tone-caution-wash); }
.rail.is-single{ grid-template-columns:max-content; }
.rail-stop{ position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-top:20px; }
.rail.is-single .rail-stop{ padding-top:0; align-items:flex-start; text-align:left; }
.rail-stop:not(:last-child)::after{
  content:""; position:absolute; top:25px; left:50%; width:100%; height:2px; background:var(--rail-tone);
  transition:height var(--duration-interaction), top var(--duration-interaction);
}
.rail-stop.is-hot-edge::after{ height:4px; top:24px; }
.rail-dot{ position:relative; z-index:1; width:12px; height:12px; margin-bottom:var(--space-tight); border-radius:50%;
  background:var(--rail-tone); box-shadow:0 0 0 2px var(--color-surface-raised);
  transition:box-shadow var(--duration-interaction); }
.rail-stop:first-child:not(:last-child) .rail-dot{ background:var(--color-surface-raised); box-shadow:inset 0 0 0 2px var(--rail-tone), 0 0 0 2px var(--color-surface-raised); }
.rail-stop.is-lazarus .rail-dot{ width:14px; height:14px; margin-top:-1px; }
.rail-stop.is-hot .rail-dot{ box-shadow:0 0 0 2px var(--color-surface-raised), 0 0 0 5px var(--rail-wash), 0 0 0 6px var(--rail-tone); }
.rail-stop:first-child:not(:last-child).is-hot .rail-dot{ box-shadow:inset 0 0 0 2px var(--rail-tone), 0 0 0 2px var(--color-surface-raised), 0 0 0 5px var(--rail-wash), 0 0 0 6px var(--rail-tone); }
.rail-edge{
  position:absolute; top:0; left:100%; transform:translateX(-50%); z-index:1;
  padding:0 4px; font-size:var(--type-caption-size); line-height:16px; color:var(--color-text-secondary); white-space:nowrap;
  background:var(--color-surface-raised);
}
a.rail-edge, .rail-addr, .rail-addr{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--font-code); font-size:var(--type-caption-size); line-height:18px; color:var(--color-text); }
.rail-role{ font-size:var(--type-caption-size); line-height:16px; color:var(--color-text-tertiary); }
.rail-stop.is-lazarus .rail-role{ color:var(--rail-text); font-weight:500; }
/* Wider than its column, so it ends on the rail's right edge rather than past it. */
.rail:not(.is-single) .rail-edge.is-hot, .rail-stop.is-hot .rail-addr{ color:var(--color-text); text-decoration-color:currentColor; }
@media (hover:hover){
  a.rail-edge:hover, .rail-addr:hover{ color:var(--color-text); text-decoration-color:currentColor; }
}
.rail a:focus-visible{ outline:var(--focus-ring-width) solid var(--color-focus-ring); outline-offset:2px; border-radius:2px; }
/* Once a path is shown it says everything the scan steps said, with the
   addresses, so the steps step aside at every size. */
.card-result:has(.path) .trail{ display:none; }
/* A listed wallet is one stop: dot, address, label and source on one line. */
.rail.is-single .rail-stop{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:var(--space-tight) var(--space-inline); }
.rail.is-single .rail-dot{ margin:0; }
@media (min-width: 1024px) and (max-height: 760px){
  .path{ padding:var(--space-snug) var(--space-group); gap:var(--space-inline); grid-template-rows:1fr auto; }
  .path > .text-eyebrow{ display:none; }
  .card-result:has(.path) .result-lead .text-display{ margin-bottom:var(--space-tight); }
  .card-result:has(.path) .decided{ padding-top:var(--space-snug); }
  .card-result:has(.path) .actions{ gap:var(--space-tight); }
  .rail-stop{ padding-top:17px; }
  .rail-stop:not(:last-child)::after{ top:22px; }
  .rail-stop.is-hot-edge::after{ top:21px; }
  .rail-edge, .rail-role,   .rail-addr{ line-height:16px; }
  .rail-dot{ margin-bottom:2px; }
  .card-result:has(.path){ padding-top:var(--space-group); padding-bottom:var(--space-group); }
}

/* Phones: the result's closing block (Newton's card and New check) is now
   tall, so it follows the result instead of sticking over it. */
@media (max-width: 639px){
  .card-result .actions{ position:static; padding-top:0; }
}

/* A wallet the data flags but the policy allowed (Policy D): the same map
   states, drawn in caution colours instead of the blocking red. */
.cov-svg[data-allowed],
#panel[data-state="allowed"] .trail{
  --tone-block-wash: var(--tone-caution-wash);
  --tone-block-edge: var(--tone-caution-edge);
  --tone-block-text: var(--tone-caution-text);
}
/* Phones: four addresses share about 340px, so they set a size smaller. */
@media (max-width: 479px){
  .rail-addr{ font-size:11px; letter-spacing:-0.02em; padding:0 2px; }
}

/* Phones, policy step: the button follows the options instead of floating
   over them, so the first screen shows the list uncut. */
@container frame (max-width: 639px){
  .card-rules > .btn-block{ position:static; padding-bottom:0; }
}
/* Failure states: Try again reruns the same wallet under the same policy. */
.card-result .actions > #retry{ width:100%; }

/* Policy D: the scanner reads all three hops but the rule blocks nothing, so
   until a result is in, the reach is yellow with dashed rings. */
.cov-svg[data-allow-all]:not(:has(.cband[data-state])) .cov-disc{ fill:var(--tone-caution-wash); }
.cov-svg[data-allow-all]:not(:has(.cband[data-state])) .cov-ring[data-reach]{
  stroke:var(--tone-caution-edge); stroke-dasharray:4 4; opacity:1;
}
.cov-svg[data-allow-all]:not(:has(.cband[data-state])) .cov-core{ stroke:var(--tone-caution-edge); stroke-dasharray:4 4; }

/* Colour changes on the map ease in rather than snap, e.g. choosing Policy D. */
.cov-svg .cov-disc{ transition:fill var(--duration-interaction) var(--ease-newton), transform var(--duration-emphasis) var(--ease-newton); }