/* The journey's Settings page and the Plan tab's payback and receipts sections (wave 29, 9 November 2026).
   Built on the month page's kit (journey_month.css: jm-field, jm-btn, jm-link, jm-table) and the deal pages' panel
   (journey_deal_pages.css: rd-panel). Colours only through var(--r-*); every tap target 44px or more; nothing wider than
   a 375px screen, so no sideways scroll. */

.js-page{display:flex;flex-direction:column;gap:24px;min-width:0}
.js-msg{margin:0;padding:12px 16px;border-left:4px solid var(--r-anchor);background:var(--r-surface);font-weight:700}
.js-card{background:var(--r-surface);border-top:3px solid var(--r-ink);padding:22px 24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.js-card h2{margin:0;font:700 22px/1.25 var(--r-font)}
.js-card p{margin:0}
.js-card form{display:flex;flex-direction:column;gap:14px;margin:0}

/* What is set: a list, label above value on a phone, side by side from 640px. */
.js-held{margin:0;display:flex;flex-direction:column}
.js-held>div{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-bottom:1px solid var(--r-rule)}
.js-held dt{font-weight:700}
.js-held dd{margin:0}
.js-none{color:var(--r-muted)}

.js-select{width:100%;min-height:44px;padding:0 12px;font:inherit;color:var(--r-ink);background:var(--r-surface);border:2px solid var(--r-ink);border-radius:0}
.js-radios{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.js-radios legend{font-weight:700;padding:0;margin-bottom:6px}
.js-radios label{display:flex;align-items:center;gap:10px;min-height:44px}
.js-radios input{width:22px;height:22px;margin:0}

.js-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.js-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--r-anchor)}

/* Delete a deal: the ask opens only when the reader asks. */
.js-del{border-top:1px solid var(--r-rule);padding:4px 0}
.js-del summary{display:flex;align-items:center;min-height:44px;font-weight:700;color:var(--r-anchor);cursor:pointer}
.js-del summary:focus-visible{outline:3px solid var(--r-anchor);outline-offset:2px}
.js-del form{padding:8px 0 12px}
.js-danger{background:var(--r-breach);color:var(--r-surface)}
.js-danger:hover{background:var(--r-ink)}

/* The Plan tab sections. */
.js-sec{display:flex;flex-direction:column;gap:12px;min-width:0}
.js-sec h2{margin:0}
.js-sec p{margin:0}
.js-big{font:700 28px/1.2 var(--r-font);letter-spacing:-.01em}
.js-sec .tde{width:100%}
.js-sec .tde .n{text-align:right;font-variant-numeric:tabular-nums}
.js-fig{margin:0;min-width:0}
.js-fig svg{display:block;width:100%;height:auto;max-width:100%}

@media (min-width:640px){
  .js-held>div{flex-direction:row;justify-content:space-between;gap:24px}
  .js-held dt{flex:0 0 40%}
  .js-held dd{flex:1}
}
@media (max-width:480px){
  .js-card{padding:18px 16px}
  .jm-btn{width:100%}
}