/* The journey's header (J2 Task 5), from the round 9 boards (docs/design_handoff/reform_redraw_2026-10-26/kit/
   round9.css .r9-new and .r9-count; redraw.css .rd-signin). Loaded by reform/_base.html only under the journey,
   after shell.css. Colours only through var(--r-*); every tap target 44px or more at every width (the shell's
   rule wins over the boards' 40px phone button). */

/* The row: the brand, then the new-deal link and the account at the right; the five pages on their own row beneath. */
.j-header .r-nav{order:3}
.j-new{order:1;margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;background:var(--r-ink);color:var(--r-surface);font:700 16px/1 var(--r-font);text-decoration:none;white-space:nowrap}
.j-new:hover,.j-new[aria-current="page"]{background:var(--r-anchor);color:var(--r-surface)}
.j-new b{font-size:20px;line-height:1;font-weight:700}
.j-account{order:1;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;font-weight:700;font-size:16px;text-decoration:none;color:var(--r-ink);box-shadow:inset 0 0 0 2px var(--r-ink);white-space:nowrap}
.j-account:hover{background:var(--r-ink);color:var(--r-surface)}

/* The month page's count: a badge inside a link, not a tap target of its own (22px by its line, as the boards). */
.j-count{display:inline-grid;place-items:center;min-width:22px;padding:0 5px;margin-left:6px;background:var(--r-signal);color:var(--r-ink);font:700 13px/22px var(--r-font)}
.r-phone-link .j-count{margin-left:10px}

/* The phone's Menu says its word beside the icon (the boards), so it is wider than the shell's square button. */
.j-header .r-menu-button{width:auto;display:inline-flex;align-items:center;gap:8px;padding:0 14px;font-weight:700}

@media (max-width:767px){
  .j-new{padding:0 12px;font-size:15px}
  .j-account{display:none}
  .j-header .r-tagline{display:none}
  .j-header .r-phone-menu{order:2}
}

/* At 359px and under (a 320px phone) the brand, + New deal and Menu no longer fit one row with Menu's word: Menu keeps
   its icon and its accessible name (the text stays in the summary, drawn at size 0) as a 44px square, so the brand's
   wordmark is not squeezed under the button (J2 Task 8, measured at 320px). */
@media (max-width:359px){
  .j-header .r-menu-button{font-size:0;gap:0;width:44px;padding:0;justify-content:center}
}

/* The date input and the add-another list (J2 Task 7), from the round 9 boards (kit/round9.css .r9-date, .r9-boxes,
   .r9-list, .r9-count-line). Not used by any route yet. Every tap target 44px or more. */
.r9-date{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:6px}
.r9-date legend{font-weight:700;padding:0;margin-bottom:4px}
.r9-date .hint{color:var(--r-muted);font-size:16px}
.j-problem{margin:0;padding-left:10px;border-left:4px solid var(--r-signal);font-weight:700}
.r9-boxes{display:flex;flex-wrap:wrap;gap:12px}
.r9-boxes label{display:flex;flex-direction:column;gap:4px;font-size:16px}
.r9-boxes input[type=text]{width:64px;min-width:0;min-height:44px;padding:0 10px;font:inherit;color:var(--r-ink);background:var(--r-surface);border:2px solid var(--r-ink);border-radius:0}
.r9-boxes .r9-y input[type=text]{width:96px}
.r9-count-line{margin:0;font-weight:700}
.r9-list{list-style:none;margin:0;padding:0;background:var(--r-surface);border-top:3px solid var(--r-ink)}
.r9-list>li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 20px;align-items:baseline;padding:14px 20px;border-bottom:1px solid var(--r-rule);font-size:17px}
.r9-list .what b{display:block}
.r9-list .what span{color:var(--r-muted)}
.r9-list .amt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.r9-list .acts{display:flex;gap:16px;white-space:nowrap}
.r9-list .acts a{font-weight:700;min-height:44px;min-width:44px;display:inline-flex;align-items:center}
.j-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0}
.j-add{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font-weight:700;font-size:16px;text-decoration:none;color:var(--r-ink);box-shadow:inset 0 0 0 2px var(--r-ink)}
.j-add:hover{background:var(--r-ink);color:var(--r-surface)}
@media (max-width:767px){
  .r9-list>li{grid-template-columns:minmax(0,1fr) auto;padding:12px 16px}
  .r9-list .acts{grid-column:1/-1}
}