/*
 * The signed-in screens. Tokens and the receipt come from src/shared/ — the same ones Phase 3a lifted
 * from the mockup Nando approved. 320px first, one column throughout, no third-party request.
 */

.page {
  max-width: 34rem;
  margin: 0 auto;
  padding: 18px 14px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 32rem) { .page { padding: 32px 24px 64px } }

.pubbar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px;
  border-bottom: 1px solid var(--line); padding-bottom: 10px;
}
.brand { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -.02em }
.muted-s { margin: 0; font-size: 12px; color: var(--muted) }

.appnav { display: flex; flex-wrap: wrap; gap: 6px }
.appnav a {
  text-decoration: none; color: var(--ink-2); background: var(--surface-2);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600;
}
.appnav a.on { background: var(--accent-soft); color: var(--accent) }

h1 {
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(24px, 7vw, 34px); line-height: 1.05; letter-spacing: -.025em; text-wrap: balance;
}
h2 {
  margin: 10px 0 0; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.015em;
}
.lede { margin: 0; color: var(--ink-2); font-size: 15px }
.field-label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted) }
.foot { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.5 }
a { color: var(--accent) }

.sandbox {
  margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px;
  font-size: 12px; font-weight: 600; color: var(--flag); background: var(--flag-soft);
  border-radius: 9px; padding: 8px 10px;
}
.trial {
  margin: 0; font-size: 13px; font-weight: 700; color: var(--kept); background: var(--kept-soft);
  border-radius: 9px; padding: 9px 11px;
}
.prompt { margin: 0; font-size: 14px; color: var(--ink-2); background: var(--surface-2); border-radius: 10px; padding: 12px 14px }

.headline {
  display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px;
}
.headline strong {
  font-family: var(--display); font-weight: 800; font-size: clamp(26px, 8vw, 36px);
  letter-spacing: -.025em; line-height: 1.05;
}

.placeholder {
  border: 1.5px dashed var(--line-strong); border-radius: 12px; padding: 14px 16px;
  display: grid; gap: 6px; background: var(--surface);
}

.own { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 12px; color: var(--ink-2) }
.own > li::marker { color: var(--muted) }

.debts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.debts > li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px }
.debts.hiddenlist > li { background: var(--surface-2); opacity: .85 }
.d-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px }
.d-head strong { font-size: 15px }
.d-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2) }
.d-row span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums }

.pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.pick a {
  display: grid; gap: 2px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
.pick strong { font-size: 15px; color: var(--accent) }
.pick span { font-size: 12px; color: var(--muted) }

form { display: grid; gap: 8px }
.inp {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(5rem, 7rem); gap: 2px 10px;
  align-items: baseline; border: 1px solid var(--line); background: var(--surface);
  border-radius: 10px; padding: 9px 12px;
}
.inp.wide { grid-template-columns: minmax(0, 1fr) }
.inp > span { font-size: 13px; color: var(--ink-2); text-wrap: pretty }
.inp input, .inp select {
  border: 0; background: none; padding: 0; min-width: 0; width: 100%;
  font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums;
}
.inp input { text-align: right }
.inp.wide input, .inp.wide select { text-align: left }
.inp small { grid-column: 1 / -1; font-size: 11px; color: var(--muted); margin-top: 2px }
.inp.bad { border-color: var(--cost) }
.inp .why { grid-column: 1 / -1; font-size: 11px; font-weight: 600; color: var(--cost) }

fieldset {
  border: 1px solid var(--line); background: var(--surface); border-radius: 12px;
  padding: 10px 12px; margin: 0; display: grid; gap: 6px;
}
fieldset.bad { border-color: var(--cost) }
legend { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted) }
.radio { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-2) }
.radio input { margin: 3px 0 0 }

.cta {
  display: block; text-align: center; text-decoration: none; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 12px; padding: 13px; font-weight: 700; font-size: 15px;
}
.danger {
  border: 1px solid var(--cost); background: var(--cost-soft); color: var(--cost); cursor: pointer;
  border-radius: 12px; padding: 11px; font-weight: 700; font-size: 14px;
}
button.link, .link {
  border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer;
  font-size: 13px; font-weight: 600; text-align: left; text-decoration: underline;
}
form.inline { display: inline }

details.how { border-top: 1px solid var(--line); padding-top: 10px }
details.how > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent) }
details.how form { margin-top: 10px }

/* ───────────────────────── Phase 3c: screens 8, 8b, 9, 10, 11, 11b, 12 ─────────────────────────
 * Lifted from the approved mockup (02 - Projects/Freedom Rate/Freedom Rate Mockup.html): the segmented
 * paid-with control, the priced-against rows, the tally tiles, the activity list, the year-by-year rows,
 * the paid-off hero and its share card. Same tokens, same type scale. None of its numbers.
 *
 * The year bars are `<meter>` elements: the browser scales them from the engine's own cent values, so
 * no stylesheet and no script here ever works out a width from a dollar figure.
 */
.pricing { display: grid; gap: 10px }
.rule { margin: 0; font-size: 12px; color: var(--ink-2); background: var(--surface-2); border-radius: 9px; padding: 9px 11px; line-height: 1.45 }

.targets { display: grid; gap: 6px }
.tgt {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 9px 11px; cursor: pointer;
}
.tgt.on { border-color: var(--accent); background: var(--accent-soft) }
.tgt input { margin: 0 }
.t-name { font-weight: 600; font-size: 14px; display: block }
.t-rate { font-size: 12px; color: var(--muted); display: block; white-space: nowrap }
.t-fig { text-align: right; display: grid; gap: 2px; justify-items: end }
/* The default tag gets its own row under the name, so a rate never has to compete with it for width. */
.tgt > .tag { grid-column: 2 / -1; justify-self: start; margin-top: 2px }
.t-fig .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px }
.tag {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; background: var(--accent-soft); color: var(--accent);
}

.r-block { display: grid; gap: 8px }
.longrun {
  display: block; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px;
  padding: 10px 12px; text-align: left; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none;
}
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.actions form { display: block }
.btn {
  display: block; width: 100%; border: 1px solid var(--line-strong); background: var(--surface); color: inherit;
  border-radius: 12px; padding: 12px; font-weight: 700; font-size: 15px; cursor: pointer; text-align: center;
}
.btn.kept { background: var(--kept); border-color: var(--kept); color: #fff }
.btn.small { padding: 7px 12px; font-size: 13px; border-radius: 9px; width: auto; justify-self: start; text-decoration: none }

.lr-total { display: grid; gap: 2px; padding: 14px 16px; background: var(--surface-2); border-radius: 14px }
.lr-num {
  font-family: var(--display); font-weight: 800; font-size: clamp(30px, 10vw, 40px);
  letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums;
}
.lr-how { display: grid; gap: 4px; border-radius: 12px; padding: 12px 14px; background: var(--accent-soft) }
.lr-how p { margin: 0 }
.lr-how p:last-child { font-size: 14px; line-height: 1.5 }
.lr-debts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line) }
.lr-debts li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px }

.bars { display: grid; gap: 14px }
.bar-group { display: grid; gap: 5px }
.by { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--muted) }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 72px; gap: 8px; align-items: center }
.bl { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
meter.track { width: 90px; height: 12px; background: var(--surface-2); border: 0 }
meter.track::-webkit-meter-bar { background: var(--surface-2); border: 0; border-radius: 4px; height: 12px }
meter.track::-webkit-meter-optimum-value { background: var(--accent); border-radius: 4px }
meter.track::-moz-meter-bar { background: var(--accent) }
.bv { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; text-align: right }

.tile { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px }
.tile .t-label { display: flex; align-items: center; gap: 7px }
.tile .t-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted) }
.tile.kept .t-label::before { background: var(--kept) }
.tile.cost .t-label::before { background: var(--cost) }
.t-label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted) }
.t-num { margin: 0; font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.t-sub { margin: 0 0 4px; font-size: 12px; color: var(--muted) }

.events { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line) }
.events li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.events .d { font-family: var(--mono); font-size: 11px; color: var(--muted) }
.events .w { display: flex; flex-direction: column; min-width: 0 }
.events .w small { font-size: 11px; color: var(--muted) }
.events .v { font-family: var(--mono); text-align: right; font-size: 13px }
.events .v small { display: block; font-size: 11px; font-family: var(--body) }
.events .k-skipped .v small { color: var(--ink-2) }
.events .k-bought .v small { color: var(--cost) }
.events .k-sent .v small { color: var(--kept) }

.paid-hero { display: grid; gap: 4px; padding: 18px 16px; border-radius: 14px; background: var(--kept-soft) }
.paid-hero .t-label { color: var(--kept) }
.paid-title {
  margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 8vw, 30px);
  letter-spacing: -.02em; line-height: 1.05; text-wrap: balance;
}
.kv { margin: 0; display: grid; gap: 10px }
.kv div { display: grid; gap: 1px }
.kv dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.kv dd { margin: 0; font-size: 13px }
svg.share-card { align-self: center; justify-self: center; width: min(260px, 100%); height: auto; border-radius: 18px }

ol.own { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; color: var(--ink-2) }