/* THE PLAN IN OUR BRAND (Steven 2026-10-13 night, his screenshot of the
   Refined plan on Sam's song, a plain white numbered list: "If I hit the
   Review button on the Refined plan card, it should land on the plan. Can
   you use our design styling to improve this plan look? How can you improve
   it with our brand?").

   Same words, same money, same doors; only the look. Markup: templates/feed/
   _proposal_cards.html (plan_list, plan_money, plan_foot, plan_steps and the
   plan sheet #plan-<id>); wiring static/cards/proposal-cards.js. The frame,
   the kicker row and the pinned foot are the sheet language (css/pages/
   step-cards.css .sl-*, walk mock 107); this file is what the plan adds:

     .psheet      the plan sheet's frame (.sl-sheet), the card's width, the
                  kicker row and the foot pinned, the middle scrolling
       .psheet__agent  the agent's row: its moving round, name, "with <mark>
                       <model>", so the plan reads as that agent's
     .ptl         THE TIMELINE: a brand purple rail down the left, one node
                  per step; the deal's signing (dark, the handshake), the
                  person's (yellow, a YOU tag by the title), the agent's (a
                  purple ring round its tiny round), the finish line (dark,
                  the yellow target); a step that pays wears the neon ring
       .ptl__line      the title in the heading face on one line; a tap
                       opens the full words in place (.is-open)
       .ptl__mark      the money at the right: a release's amount in the
                       green highlighter over "pay when you approve" in
                       small mono; the held amount over "held" in purple
     .preceipt    THE RECEIPT STRIP: the three lines in mono between two
                  perforated rules, dotted leaders, the Total bold; the two
                  money lines under it in the quiet text
     .pfoot       the 107 foot (.sl-foot__go, __change, __fail) in a page's
                  own flow; .pfoot--pinned is the sheet's .sl-foot
     .psteps      the plan's steps in a page's flow (under the plan card,
                  in the /home deck's Details sheet)

   Tokens only (static/css/tokens.css; app/tests/test_layout_cards_proposal_
   cards.py reads this file with test_card_tokens' checks). Inside the
   want page's .boh-interface the interface standards point every font
   token at the system face; the plan points them back at their :root
   values, as the sheet language does, so the caps are mono and the titles
   the heading face. */

.psheet, .psteps {
  --font-body: var(--font-sans);
  --font-heading: var(--auth-title-font);
  --font-mono: var(--topbar-pill-font);
  --ptl-node: var(--size-8);
  --ptl-pad: var(--space-3);
  --ptl-rail: var(--tb-brand-purple);
  --ptl-you: var(--highlight-yellow);
  --ptl-pay: var(--accent-neon);
  --ptl-night: var(--color-dark-900);
}
.psteps { font-family: var(--font-body) !important; }
.psteps * { font-family: inherit !important; }

/* ── The sheet ─────────────────────────────────────────────────────────── */
/* The frame sits on the bottom of the screen inside the sheet's fixed
   layer (.sc-sheet: the scrim, Escape, the live refresh's wait). */
.pcards-sheet .psheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0 auto;
  animation: psheet-up .28s cubic-bezier(.2, .7, .2, 1);
}
@keyframes psheet-up { from { translate: 0 var(--space-10); opacity: .4; } to { translate: 0 0; opacity: 1; } }
.psheet__head {
  flex: none;
  margin: 0;
  padding: var(--space-3) var(--space-5) var(--space-2);
  box-shadow: 0 1px 0 var(--border-default);
}
.psheet__scroll { padding-top: var(--space-4); }

/* The agent's row: the plan reads as that agent's. */
.psheet__agent { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); }
.psheet__round {
  flex: none; display: block; overflow: hidden;
  width: var(--size-14); height: var(--size-14);
  border-radius: var(--radius-full);
  background: var(--ptl-night);
  box-shadow: 0 0 0 2px var(--surface-primary), 0 0 0 4px var(--tb-brand-purple);
}
.psheet__round > *, .psheet__round svg, .psheet__round img, .psheet__round video {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.psheet__who { min-width: 0; }
.psheet .psheet__name {
  margin: 0;
  font: var(--font-bold) var(--text-lg)/var(--leading-snug) var(--font-heading);
  font-family: var(--font-heading) !important;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.psheet .psheet__model {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-1);
  margin: 0;
  font: var(--font-medium) var(--text-sm)/var(--leading-snug) var(--font-mono);
  font-family: var(--font-mono) !important;
  color: var(--text-secondary);
}
.psheet__mark { flex: none; width: 1em; height: 1em; font-size: var(--text-base); color: var(--text-primary); }
.psheet .psheet__title {
  margin: 0 0 var(--space-1);
  font: var(--font-bold) var(--text-2xl)/var(--leading-tight) var(--font-heading);
  font-family: var(--font-heading) !important;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.psheet .psheet__count { margin-top: var(--space-4); }

/* ── The timeline ──────────────────────────────────────────────────────── */
.ptl { position: relative; margin: 0; padding: 0; list-style: none; }
.ptl__step {
  position: relative;
  display: grid; grid-template-columns: var(--ptl-node) minmax(0, 1fr) auto;
  column-gap: var(--space-3); align-items: start;
  margin: 0; padding: var(--ptl-pad) 0;
}
/* The rail: each step draws its piece, its node's centre to the next's, so
   an opened title never breaks it. */
.ptl__step:not(:last-child)::before {
  content: "";
  position: absolute; z-index: 0;
  left: calc(var(--ptl-node) / 2 - 1px); width: 2px;
  top: calc(var(--ptl-pad) + var(--ptl-node) / 2);
  bottom: calc(-1 * (var(--ptl-pad) + var(--ptl-node) / 2));
  background: var(--ptl-rail);
}
.ptl__node {
  position: relative; z-index: 1;
  display: grid; place-items: center; overflow: hidden;
  width: var(--ptl-node); height: var(--ptl-node);
  border-radius: var(--radius-full);
  background: var(--surface-primary); color: var(--color-black);
  box-shadow: 0 0 0 2px var(--ptl-rail);
  font-size: var(--text-base);
}
.ptl__node iconify-icon { display: block; width: 1.05em; height: 1.05em; font-size: var(--text-base); }
.ptl__node img, .ptl__node svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.ptl__step--deal .ptl__node,
.ptl__step--finish .ptl__node { background: var(--ptl-night); color: var(--color-white); }
.ptl__step--finish .ptl__node { color: var(--ptl-you); }
.ptl__step--you .ptl__node { background: var(--ptl-you); box-shadow: 0 0 0 2px var(--ptl-you); }
.ptl__step--agent .ptl__node { background: var(--ptl-night); }
/* A step that pays: its node ringed in the neon green, a breath of white
   between, so the pay points read at a glance. */
.ptl__step--release .ptl__node { box-shadow: 0 0 0 2px var(--surface-primary), 0 0 0 5px var(--ptl-pay); }

/* The title: one line in the heading face; a tap opens the full words. */
.ptl__line {
  display: flex; align-items: baseline; gap: var(--space-2);
  width: 100%; min-width: 0; min-height: var(--ptl-node);
  margin: 0; padding: var(--space-1) 0;
  border: 0; border-radius: var(--radius-sm); background: none; color: inherit;
  text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ptl__line:focus-visible { outline: 2px solid var(--interactive-focus-ring); outline-offset: 2px; }
.ptl .ptl__num {
  flex: none;
  font: var(--font-semibold) var(--text-xs)/1 var(--font-mono);
  font-family: var(--font-mono) !important;
  letter-spacing: .04em; color: var(--tb-meta);
}
.ptl .ptl__you {
  flex: none;
  padding: calc(var(--space-1) / 2) var(--space-1);
  border-radius: var(--radius-xs);
  background: var(--ptl-you); color: var(--color-black);
  font: var(--font-bold) var(--text-xs)/1 var(--font-mono);
  font-family: var(--font-mono) !important;
  letter-spacing: .08em; text-transform: uppercase;
}
.ptl .ptl__title {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: var(--font-semibold) var(--text-base)/var(--leading-snug) var(--font-heading);
  font-family: var(--font-heading) !important;
  color: var(--text-primary);
}
.ptl__step.is-open .ptl__title { white-space: normal; overflow-wrap: anywhere; }
.ptl__step--deal .ptl__title, .ptl__step--finish .ptl__title { font-weight: var(--font-bold); }

/* The money at the right. */
.ptl__mark {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  min-height: var(--ptl-node); max-width: 8.5em;
  text-align: right;
}
.ptl .ptl__amt {
  font: var(--font-bold) var(--text-lg)/var(--leading-tight) var(--font-heading);
  font-family: var(--font-heading) !important;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--text-primary);
}
.ptl__mark--release .ptl__amt {
  padding: calc(var(--space-1) / 2) var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--ptl-pay); color: var(--color-black);
}
.ptl .ptl__when {
  margin-top: calc(var(--space-1) / 2);
  font: var(--font-medium) var(--text-xs)/var(--leading-snug) var(--font-mono);
  font-family: var(--font-mono) !important;
  color: var(--tb-meta);
}
.ptl__mark--held .ptl__when { color: var(--tb-brand-purple); letter-spacing: .08em; text-transform: uppercase; }

/* THE OPEN TIMELINE, the checkout's plan (Steven 2026-10-14 ~12:55: "this
   needs to match the proposal page, it was more advanced"; templates/
   targets/_checkout.html, plan_list(lines, open=true)): every title in
   full, no tap to unfold; under the title, whose part and how long; on a
   pay point the small neon "$" on the node's corner (Steven, 76655f727:
   "just add a small button on the number that shows a $ so we know that
   is a pay point"); a step that pays nothing reads "$0" in the quiet text.
   The node keeps its colour; the "$" sits outside its clip. */
.ptl--open .ptl__line { cursor: default; }
.ptl__part {
  grid-column: 2;
  margin: 0;
  font: var(--font-normal) var(--text-sm)/var(--leading-snug) var(--font-body);
  color: var(--text-secondary);
}
.ptl__dollar {
  position: absolute; z-index: 2;
  top: calc(var(--ptl-pad) - var(--space-1));
  left: calc(var(--ptl-node) - var(--space-3));
  display: inline-grid; place-items: center;
  width: var(--size-4); height: var(--size-4);
  border: 1px solid var(--surface-primary); border-radius: var(--radius-full);
  background: var(--ptl-pay); color: var(--color-black);
  font: var(--font-bold) var(--text-xs)/1 var(--font-body);
}
.ptl__mark--zero .ptl__amt { font-weight: var(--font-medium); color: var(--text-muted); }

/* ── The receipt strip ─────────────────────────────────────────────────── */
.preceipt { margin: var(--space-5) 0 0; }
.preceipt__lines {
  margin: 0; padding: var(--space-3) 0;
  border-top: 2px dashed var(--border-strong);
  border-bottom: 2px dashed var(--border-strong);
}
.preceipt .preceipt__row {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-1) 0;
  font: var(--font-medium) var(--text-sm)/var(--leading-snug) var(--font-mono);
  font-family: var(--font-mono) !important;
  color: var(--text-secondary);
}
.preceipt__row dt, .preceipt__row dd { margin: 0; }
/* the dotted leader between the words and the amount */
.preceipt__row::before {
  content: ""; order: 1; flex: 1 1 var(--space-4); align-self: center;
  border-bottom: 2px dotted var(--border-default);
}
.preceipt__row dd { order: 2; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.preceipt .preceipt__row--total {
  margin-top: var(--space-1); padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
  font-weight: var(--font-bold); font-size: var(--text-lg);
  color: var(--text-primary);
}
.preceipt__row--total::before { border-bottom-color: transparent; }
.preceipt .preceipt__pct {
  margin-left: var(--space-1);
  padding: 0 var(--space-1);
  border-radius: var(--radius-xs);
  background: var(--color-purple-100); color: var(--tb-brand-purple);
  font-size: var(--text-xs); font-weight: var(--font-bold);
}
.preceipt .preceipt__line {
  margin: var(--space-3) 0 0;
  font: var(--font-normal) var(--text-sm)/var(--leading-normal) var(--font-body);
  color: var(--text-secondary);
}
.preceipt__line + .preceipt__line { margin-top: var(--space-1); }

/* ── The foot ──────────────────────────────────────────────────────────── */
.pfoot { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); margin: var(--space-6) 0 0; }
.pfoot--pinned { margin: 0; }
/* The plan sheet's foot is whole: a plan waiting on Approve has no deal
   yet, so the fail dot (which keeps to a live deal) is not in its corner,
   and the room the sheet language keeps for it would only push Approve
   off centre. */
.psheet .pfoot--pinned { padding-right: var(--space-4); }

/* ── The steps in a page's flow ────────────────────────────────────────── */
.psteps { margin: var(--space-4) 0 0; }
.psteps .psteps__label {
  display: block; margin: 0 0 var(--space-1);
  font: var(--font-bold) var(--text-xs)/var(--leading-snug) var(--font-mono);
  font-family: var(--font-mono) !important;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tb-brand-purple);
}
.pcards__plan .psteps { padding: 0 var(--space-1); }

@media (prefers-reduced-motion: reduce) {
  .pcards-sheet .psheet { animation: none; }
}