/* Page shells: stage, columns, cards. */

.dot{ width:8px; height:8px; border-radius:50%; background:var(--tone-pass-edge); }

.stage{
    background:var(--color-surface-raised); border:none; outline:var(--frame-outline);
    border-radius:var(--radius-surface); overflow:hidden; display:flex;
    justify-content:center; flex:1; min-height:0;
  }

.act{
    grid-area:copy; justify-self:stretch; align-self:center;
    max-width:none; width:100%;
  }

.act-copy{
    transition:opacity var(--duration-interaction) var(--ease-newton), transform var(--duration-interaction) var(--ease-newton);
    min-height:0;
  }

.act p{ margin:var(--space-card) 0 0; color:var(--color-text-secondary); }

.act-figure{ grid-area:figure; justify-self:stretch; align-self:stretch; min-width:0; width:100%; display:flex; }
.act-figure > .card{ width:100%; height:auto; flex:1 1 auto; }


.console{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:stretch; gap:var(--space-block); align-content:center;
    padding:var(--space-card) var(--inset); max-width:var(--width-console); width:100%; margin:0 auto;
    min-height:0; overflow-y:auto;
  }

.col{ display:flex; flex-direction:column; gap:var(--space-snug); min-width:0; }

.card{
    display:flex; flex-direction:column; min-height:0; height:100%;
    border-radius:var(--radius-surface); padding:var(--card-pad);
    background:var(--color-surface-raised); border:none; outline:var(--frame-outline);
  }

.card-body{ min-height:0; display:flex; flex-direction:column; }

.card-body{ flex:1; }

.card-check .card-body{ gap:var(--space-group); }

.rule{ margin:var(--space-group) 0 0; max-width:40ch; font-size:var(--type-title-size); line-height:var(--type-title-leading); text-wrap:balance; }

.right{ min-width:0; min-height:300px; transition:opacity var(--duration-interaction) var(--ease-newton), transform var(--duration-interaction) var(--ease-newton); }

.right.swapping{ opacity:0; transform:translateY(6px); }

.steps{
    display:flex; flex-direction:column; align-items:stretch; gap:var(--space-inline);
    width:100%; max-width:var(--width-map); margin:0;
  }

.lbl-short{ display:none; }

.console .col{ animation:rise var(--duration-emphasis) var(--ease-newton) backwards;  }

.console.still .col{ animation:none;  }

.console .col:nth-child(2){ animation-delay:var(--stagger);  }

.act-figure{ animation:rise calc(var(--duration-interaction) * 1.5) var(--ease-newton) backwards calc(var(--stagger) * 2);  }

.m-list-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-snug); }

.m-paste{
    align-self:flex-start; padding:var(--space-inline) var(--space-inline); border:1px solid transparent; border-radius:var(--radius-control); background:none; cursor:pointer;
    font-family:var(--font-sans); font-size:var(--type-ui-size); font-weight:var(--type-ui-weight);
    line-height:var(--type-ui-leading); color:var(--color-text-secondary);
    text-decoration:underline; text-underline-offset:3px; min-height:var(--size-touch);
  }

.card-check .card-body{ justify-content:flex-start; }

.card-cov .card-body{ align-items:center; justify-content:center; min-height:0; }

.card-cov .card-body{ justify-content:center; align-items:center; }

.act-copy{ display:grid; min-height:0; }

.ring-fig{
  width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}

.ring-note{
  align-self: center; width: max-content; max-width: 100%;
  margin: var(--space-group) 0 0; text-align: center;
  font-size: var(--type-body-size); line-height: var(--type-body-leading); color: var(--color-text-secondary);
}