/* The first days in the app (CONV workstream, 2026-10-28; v2 look, REDESIGN phase 2, APP-V2 2026-11-02): the welcome screen, the setup list,
   the calm "first time" moments, the plan welcome, the trial banner, "What is new", empty states that teach, the cancel flow, the plan note
   and the shortcuts list.
   The same components are mounted on the landing page (site/js/after-signup.js, web_assets.SITE_APP_FILES) with labelled demo data, so this
   sheet stands beside either system: like shared/css/beam.css it reads only the token names both base.css and v2/core.css define
   (--space-*, --text-*, --surface, --fog, --rule, --ink, --night*, --lamp, --steady, --radius-*), so in the app (v2) it is square, flat and
   in Overpass, and nothing here depends on the app shell. The setup list is the line diagram (DESIGN-v2.md section 5): each step a stop,
   the stretch after a finished step drawn in ink, the steps still to do pale. Rules this file keeps (tests/test_web_motion.py,
   tests/test_web_polish.py, tests/test_final_pass_2026_10_29.py): only transform and opacity ever animate, every duration is a motion token,
   type sizes and radii come from the scales, no colour stripe on the edge of a card, no glow. The one authored moment is the plan welcome
   (the sign field, the two beams of the mark that cross); everything else arrives with the app's own small rise. */

:root {
  --act-pale: var(--rule);   /* the stretch of a line not yet passed */
}

/* the stack the pages put under their header; empty means nothing to show, and it takes no room ------------------------- */
.act-stack { display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); min-width: 0; }
.act-stack:empty { display: none; }

.act-card {
  container-type: inline-size; min-width: 0; padding: var(--space-5); background: var(--surface); border-radius: var(--radius-card);
  color: var(--ink);   /* the cards also sit inside a night band on the landing page: they never inherit its light text */
  animation: mi-rise var(--dur-enter) var(--ease-enter) both;
}
.act-card a:not(.btn) { color: var(--link); }
.act-card h2 { font-size: var(--text-lg); font-weight: 760; letter-spacing: 0; line-height: 1.2; }
.act-card h3 { font-size: var(--text-md); font-weight: 760; }

/* the round mark: a stop still to do (a ring), a finished one (the filled ink dot with a tick); it arrives once, and holds still -- */
.act-mark {
  position: relative; z-index: 1; flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink); color: var(--surface); animation: mi-rise var(--dur-enter) var(--ease-enter) both;
}
.act-mark svg { width: 13px; height: 13px; }
.act-mark.pending { background: var(--surface); box-shadow: inset 0 0 0 4px var(--control-edge); animation-name: mi-fade; }
.act-mark.small { width: 18px; height: 18px; }
.act-mark.small svg { width: 11px; height: 11px; }
.act-mark.big { width: 40px; height: 40px; animation-delay: var(--dur-press); }
.act-mark.big svg { width: 22px; height: 22px; }

/* the setup list: a line of stops (vertical in a narrow card, horizontal across a wide one) -------------------------------------- */
.act-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.act-progress { margin-top: var(--space-1); color: var(--ink-2); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.act-hide { font-size: var(--text-sm); min-height: 36px; padding-inline: var(--space-2); }
/* the bar is the list's progress for assistive technology; the line of stops shows the same thing to the eye */
.act-bar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.act-fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--ink); }
.act-items { list-style: none; margin: var(--space-4) 0 0; padding: 0 0 0 40px; display: grid; gap: var(--space-4); }
.act-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-2) var(--space-4); min-width: 0; }
.act-item > .act-mark { position: absolute; left: -40px; top: -2px; }
.act-item::before { content: ""; position: absolute; left: -31px; top: 18px; width: 6px; height: calc(100% + var(--space-4) - 14px); background: var(--act-pale); }
.act-item:last-child::before { display: none; }
.act-item.done:has(+ .act-item.done)::before { background: var(--ink); }
.act-item-text { min-width: 0; }
.act-item-title { font-weight: 760; }
.act-item-sub { margin-top: 2px; color: var(--ink-2); font-size: var(--text-sm); max-width: 38rem; }
.act-item.done .act-item-title { color: var(--ink-2); font-weight: 650; }
.act-item.done .act-item-sub { display: none; }
@container (max-width: 34rem) {
  .act-item { grid-template-columns: minmax(0, 1fr); }
  .act-item > .btn { justify-self: start; }
  .act-item.todo ~ .act-item.todo .act-item-sub { display: none; }   /* a narrow card shows the next step in full and the rest as one line each */
}
@container (min-width: 56rem) {   /* the strip map: six stops on one line, the words under each */
  .act-items { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 0; padding: 0; margin-top: var(--space-5); }
  .act-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: 38px var(--space-4) 0 0; }
  .act-item > .act-mark { left: 0; top: 0; }
  .act-item::before { left: 12px; top: 9px; width: 100%; height: 6px; }
  .act-item-title { font-size: var(--text-sm); }
  .act-item-sub { font-size: var(--text-xs); }
  .act-item > .btn { max-width: 100%; white-space: normal; text-align: left; }   /* a narrow stop wraps its action, never overflows the card */
}

/* the finished list: one calm line, then it is gone ---------------------------------------------------------------------- */
.act-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.act-end-text { flex: 1 1 16rem; min-width: 0; }
.act-end-text p { margin-top: var(--space-1); color: var(--ink-2); }

/* the first-time moments ---------------------------------------------------------------------------------------------- */
.act-moment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.act-moment-body { display: grid; gap: var(--space-2); min-width: 0; }
.act-moment-body > p { color: var(--ink-2); max-width: 46rem; overflow-wrap: anywhere; }
.act-also { margin-top: var(--space-2); padding-top: var(--space-3); box-shadow: inset 0 1px 0 var(--rule); }
.act-also-title { font-size: var(--text-sm); font-weight: 650; }
.act-also ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.act-also li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.act-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }

/* the value line and the trial banner: a plate framed in ink (an information notice is neutral) ---------------------------- */
.act-value { padding: var(--space-3) var(--space-4); background: var(--surface); color: var(--ink-2); font-size: var(--text-sm); }
.act-stack > .act-value { animation: mi-fade var(--dur-enter) var(--ease-enter) both; }
.act-card.act-trial { box-shadow: inset 0 0 0 2px var(--ink); }
.act-trial { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-5); }
.act-trial-text { display: grid; gap: var(--space-1); flex: 1 1 22rem; min-width: 0; max-width: 46rem; }
.act-trial-text p { color: var(--ink-2); font-size: var(--text-sm); }
.act-trial .act-value { padding: 0; background: none; color: var(--ink); font-size: var(--text-md); }

/* what is new --------------------------------------------------------------------------------------------------------------- */
.act-news ul { list-style: none; margin: var(--space-3) 0; padding: 0; display: grid; gap: var(--space-3); }
.act-news li { display: grid; gap: 2px; padding-bottom: var(--space-3); box-shadow: inset 0 -1px 0 var(--rule); }
.act-news li:last-child { padding-bottom: 0; box-shadow: none; }
.act-news-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); font-weight: 650; }
.act-news-date { color: var(--ink-2); font-size: var(--text-xs); font-weight: 400; font-variant-numeric: tabular-nums; }
.act-news-text { color: var(--ink-2); font-size: var(--text-sm); max-width: 46rem; }
.act-new { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px 0; background: var(--night); color: var(--on-night); font-size: var(--text-xs); font-weight: 760; }

/* the welcome screen: a sign band that says hello, then the path to the first alert as three stops ------------------------------- */
.act-card.act-welcome { padding: 0; overflow: hidden; margin-bottom: var(--space-5); }
.act-welcome-head {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(8rem, 30%, 18rem); column-gap: var(--space-6); row-gap: var(--space-2); align-items: center;
  padding: var(--space-6); background: var(--night); color: var(--on-night);
}
.act-welcome-head > .wc-beams { grid-column: 2; grid-row: 1 / span 2; width: 100%; height: auto; }
.act-welcome .act-welcome-head > h2 { grid-column: 1; align-self: end; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 850; letter-spacing: -0.02em; line-height: 1.05; }
.act-welcome-head > p { grid-column: 1; align-self: start; color: var(--on-night-2); max-width: 34rem; overflow-wrap: anywhere; }
.act-welcome-body { padding: var(--space-5) var(--space-6) var(--space-6); }
.act-steps { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-4); }
.act-step { position: relative; display: grid; align-content: start; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); align-items: start; }
.act-step-n {
  position: relative; z-index: 1; display: inline-grid; place-items: center; width: 32px; height: 32px; padding-top: 2px; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 4px var(--ink); color: var(--ink); font-weight: 850; font-variant-numeric: tabular-nums;
}
.act-step-title { font-weight: 760; }
.act-step-text { margin-top: 2px; color: var(--ink-2); font-size: var(--text-sm); }
.act-fine { margin-top: var(--space-4); color: var(--ink-2); font-size: var(--text-sm); max-width: 46rem; }
@container (min-width: 44rem) {
  .act-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-5); }
  .act-step { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }
  .act-step:not(:last-child)::after {   /* the line between the stops: the order is the point */
    content: ""; position: absolute; top: 13px; left: 32px; right: calc(-1 * var(--space-5)); height: 6px; background: var(--act-pale);
  }
}
@container (max-width: 34rem) {   /* narrow: the form below must stay near the top, so the welcome is a compact band and a short path */
  .act-welcome-head { grid-template-columns: minmax(0, 1fr) 6.5rem; column-gap: var(--space-3); padding: var(--space-4); }
  .act-welcome-head > .wc-beams { grid-column: 2; grid-row: 1; align-self: center; }
  .act-welcome .act-welcome-head > h2 { grid-row: 1; align-self: center; }
  .act-welcome-head > p { grid-column: 1 / -1; grid-row: 2; }
  .act-welcome-body { padding: var(--space-4); }
  .act-steps { gap: var(--space-3); }
  .act-step-text {   /* still read by a screen reader, not drawn */
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .act-step { align-items: center; }
}

/* the two beams of the mark (the welcome screen and the plan welcome): flat shapes, at rest exactly where the entrance (views/beams.js) ends */
.wc-beams { display: block; overflow: visible; }
.wc-beam { fill: var(--lamp); opacity: 0.9; }
.wc-lamp { fill: var(--lamp); }
.wc-site-page { fill: var(--on-night); }
.wc-site-dot { fill: var(--night-3); }
.wc-site-line { fill: var(--night-3); opacity: 0.45; }
.wc-ring { fill: none; stroke: var(--lamp-soft); stroke-width: 2; opacity: 0; }

/* the plan welcome: the one authored moment, on the sign field ------------------------------------------------------------------- */
.act-plan { position: relative; padding: var(--space-6); overflow: hidden; background: var(--night); color: var(--on-night); }
.wc-grid { display: grid; gap: var(--space-5); }
.act-plan a:not(.btn) { color: var(--on-night); }
.act-plan :focus-visible { outline-color: var(--lamp); }
.act-plan .btn.lamp { background: var(--lamp); color: var(--night); }
.act-plan .btn.lamp:hover { background: var(--lamp-soft); }
.act-plan .btn.lamp:focus-visible { outline-color: var(--on-night); }
.act-plan .btn.secondary { background: transparent; color: var(--on-night); box-shadow: inset 0 0 0 2px var(--on-night-2); }
.act-plan .btn.secondary:hover { background: var(--night-2); }
.act-plan .wc-beams { width: min(100%, 26rem); height: auto; justify-self: center; }
.act-plan .act-mark { background: var(--lamp); color: var(--night); animation-duration: 0ms; }
.wc-body { display: grid; gap: var(--space-3); align-content: center; min-width: 0; }
.act-plan .wc-title { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 850; letter-spacing: -0.02em; line-height: 1.05; overflow-wrap: anywhere; }
.wc-sub { color: var(--on-night-2); max-width: 36rem; }
.wc-unlock { margin-top: var(--space-2); }
.wc-unlock-title { font-weight: 650; }
.wc-unlock ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-2) var(--space-5); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.wc-unlock li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--on-night); }
.wc-unlock li .act-mark { margin-top: 1px; }
.wc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-3); }
.wc-next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.wc-next-label { color: var(--on-night-2); }
.wc-continue-row { margin: 0; }
.wc-skip {
  position: absolute; top: var(--space-2); right: var(--space-3); z-index: 1; min-height: 36px; padding: var(--space-1) var(--space-2);
  color: var(--on-night-2); font-size: var(--text-sm);
}
.wc-skip:hover { color: var(--on-night); }
.act-plan:not(.is-playing) .wc-skip { display: none; }   /* nothing to skip once it is still (and in the static version, from the start) */
@container (min-width: 52rem) {
  .wc-grid { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); align-items: center; column-gap: var(--space-5); }
  .act-plan .wc-beams { width: 100%; }
}
@container (max-width: 34rem) {
  .wc-grid { gap: var(--space-4); }
  .act-plan .wc-beams { width: min(100%, 18rem); justify-self: start; }
}
/* while the entrance plays, the parts that arrive wait out of sight; views/beams.js names both ends of every tween and removes this class
   (and every value GSAP set) when it ends or is skipped, so nothing stays hidden */
.act-plan.is-playing :is(.wc-beam, .wc-lamp, .wc-site, .wc-title, .wc-sub, .wc-unlock-title, .wc-unlock li, .wc-next, .wc-continue-row) { opacity: 0; }

/* empty states that teach ------------------------------------------------------------------------------------------------------ */
.teach h2 { color: var(--ink); font-size: var(--text-lg); font-weight: 760; }
.teach-example {
  width: 100%; max-width: 28rem; padding: var(--space-2) var(--space-3); background: var(--fog); color: var(--ink); font-size: var(--text-sm);
  text-align: left; overflow-wrap: anywhere;
}

/* the cancel flow (views/cancel-flow.js, inside the app's dialog) ---------------------------------------------------------------- */
.cancel-flow { display: grid; gap: var(--space-4); }
.cancel-step { font-size: var(--text-lg); }
.cancel-reasons { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.cancel-reasons legend { margin-bottom: var(--space-2); padding: 0; font-weight: 650; }
.cancel-reason {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-h); padding: var(--space-2) var(--space-3);
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--control-edge); cursor: pointer;
}
.cancel-reason input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.cancel-reason:hover { background: var(--fog); }
.cancel-reason:has(input:checked) { box-shadow: inset 0 0 0 3px var(--ink); }
.cancel-offer { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-4); background: var(--fog); }
.cancel-end-text { padding-top: var(--space-3); box-shadow: inset 0 1px 0 var(--rule); color: var(--ink-2); font-size: var(--text-sm); }

/* what a bigger plan adds, and what a year saves ------------------------------------------------------------------------------- */
.plan-adds { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); max-width: 46rem; background: var(--fog); }
.plan-adds-title { font-weight: 650; }
.plan-adds ul { margin: var(--space-1) 0 var(--space-2); padding-left: 1.25em; color: var(--ink-2); }
.plan-limits.plan-saves { color: var(--steady); font-weight: 650; }

/* the shortcuts list and the hint in the rail ----------------------------------------------------------------------------------- */
.keys { display: grid; gap: var(--space-4); }
.keys-list { display: grid; margin: 0; }
.keys-list > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-2) 0; box-shadow: inset 0 -1px 0 var(--rule); }
.keys-list dt { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--ink-2); font-size: var(--text-sm); }
.keys-list dd { margin: 0; }
kbd {
  display: inline-block; min-width: 1.75rem; padding: 1px var(--space-2); border-radius: var(--radius-control); background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--control-edge), 0 2px 0 var(--control-edge); font-family: var(--mono); font-size: var(--text-xs); line-height: 1.5; text-align: center;
}
@media (min-width: 40rem) {
  .keys-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
}
.nav-hint {
  flex: 1 1 100%; min-height: 36px; padding: var(--space-2) 0 0; border: 0; background: none; color: var(--on-night-2);
  font-size: var(--text-xs); text-align: left; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer;
}
.nav-hint:hover { color: var(--on-night); }

/* phones --------------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 40rem) {
  .act-card { padding: var(--space-4); }
  .act-card.act-welcome { padding: 0; }
  .act-card.act-plan { padding: var(--space-5) var(--space-4); }
  .act-stack { margin-bottom: var(--space-4); }
  .act-moment { gap: var(--space-3); }
}

/* the system's high-contrast mode drops backgrounds: the marks and the line keep an edge --------------------------------------- */
@media (forced-colors: active) {
  .act-fill { background: Highlight; }
  .act-mark { border: 2px solid CanvasText; }
  .act-item::before { background: CanvasText; }
}
@media print { .act-stack, .nav-hint { display: none; } }