/* TRELLAN: the journeys screens. Report 258; screens by report 261.

   Page-specific rules for this area only, after trellan.css and
   trellan-shell.css. Scope every rule to the page (its own class or
   `.t-<kind>` wrapper); do not restyle shared components here.
   See planning/trellan-screen-guide.md. */

/* ── 0. The broker's frame keeps the top bar across ────────────────────
   design-system.css §7 makes the top bar `sticky` inside the column on
   `body.jp-body` (the checklist, one activity). Trellan's bar is fixed
   across the window above the rail, so on these pages it started at the
   rail's edge with a blank strip above the rail. */
@media (min-width: 760px) {
  body.jp-body .shell-col > .shell-top { position: fixed; top: 0; left: 0; right: 0; }
}

/* ── 1. The broker's pages: shared words ───────────────────────────────
   "Ask a question" is the boards' secondary button: 12 px caps, ink edge. */
:is(#journeyList, #journeyProgress) .jp-ask {
  min-height: 44px; padding: 0 22px; gap: 10px;
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase;
  border: 1px solid var(--ink); background: #FFFFFF; color: var(--ink);
}
:is(#journeyList, #journeyProgress) .jp-ask:hover { background: var(--ink); color: #FFFFFF; }
:is(#journeyList, #journeyProgress) .jp-ask .ms { font-size: 18px; letter-spacing: 0; }
:is(#journeyList, #journeyProgress) .of-head { align-items: flex-end; }

/* ── 2. Your checklists (`journeys/index.html`) ────────────────────────
   One white card per journey: its name as a heading, how far, the bar,
   then "Next up" under a hairline. */
#journeyList .bx-stack { gap: 16px; }
#journeyList .bx-jcard {
  padding: 28px; gap: 10px; border: 1px solid var(--hairline); background: #FFFFFF;
  box-shadow: none; color: var(--charcoal);
}
#journeyList .bx-jcard:hover { background: var(--mist); }
#journeyList .bx-jcard__title {
  font-family: var(--font-display); font-weight: 300; font-size: 22px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink); line-height: 1.2;
}
#journeyList .bx-jcard__sub { font-size: 15px; color: var(--ink); }
#journeyList .bx-jcard .ui-progress { height: 10px; margin: 6px 0 4px; }
#journeyList .bx-jcard__next {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--hairline);
}
#journeyList .bx-jcard__nl {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
}
#journeyList .bx-jcard__nt { font-size: 17px; font-weight: 600; color: var(--ink); }
#journeyList .bx-section__title {
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink);
  padding-bottom: 10px; border-bottom: 1px solid var(--ink);
}

/* ── 3. The checklist (`journeys/_checklist.html`) ─────────────────────
   The boards draw no boxes: how far as a line and a 10 px bar, then each
   group as a heading over a 1 px ink rule, its rows on hairlines. */
#journeyProgress { gap: 32px; }
#journeyProgress .jp-progress { border: 0; padding: 0; background: transparent; }
#journeyProgress .jp-progress__words { font-size: 17px; color: var(--ink); margin: 0 0 12px; }
#journeyProgress .jp-progress .of-meter { height: 10px; }
#journeyProgress .jp-group { border: 0; padding: 0; background: transparent; }
#journeyProgress .jp-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  padding: 0 0 10px; margin: 0; border-bottom: 1px solid var(--ink);
}
#journeyProgress .jp-group__title {
  margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 20px;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink); line-height: 1.25;
}
#journeyProgress .jp-group__head .of-pill, #journeyProgress .jp-group__head .ui-pill { align-self: center; }
#journeyProgress .jp-group__meta { flex: 0 1 auto; width: auto; margin: 0 0 0 auto; text-align: right; font-size: 13px; color: var(--gray); }
#journeyProgress .jp-rows { border: 0; background: transparent; }
#journeyProgress .bx-row { border: 0; border-bottom: 1px solid var(--hairline); background: transparent; }
#journeyProgress .bx-row > .ui-row__head { padding: 14px 0; gap: 14px; }
#journeyProgress .bx-row > .ui-row__head:hover { background: var(--mist); }
#journeyProgress .bx-row .ui-row__title { color: var(--ink); font-weight: 600; }
#journeyProgress .bx-row .ui-row__meta { font-size: 13px; color: var(--gray); }
#journeyProgress .bx-row .ui-row__body { padding: 0 0 18px 38px; }
#journeyProgress .bx-row[open] { background: var(--mist); box-shadow: inset 3px 0 0 var(--green); }
#journeyProgress .bx-row[open] > .ui-row__head { padding-left: 14px; padding-right: 14px; background: transparent; }
#journeyProgress .bx-row[open] .ui-row__body { padding-left: 52px; padding-right: 14px; }
#journeyProgress .jp-done { border: 0; border-bottom: 1px solid var(--hairline); }
#journeyProgress .jp-done__sum { min-height: 48px; color: var(--leaf); font-size: 14px; padding: 0; }
#journeyProgress .jp-lines .bx-line { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
#journeyProgress .jp-lines .bx-line__title { color: var(--ink); font-weight: 600; }
#journeyProgress .jp-lines .bx-line__meta { font-size: 13px; color: var(--gray); }
#journeyProgress .bx-line__ico { color: var(--gold); }
#journeyProgress .jp-skipped { border: 0; border-bottom: 1px solid var(--hairline); padding: 0; }
#journeyProgress .bx-questions { font-size: 14px; color: var(--charcoal); }

/* ── 4. One activity on its own page (`journeys/step.html`) ────────────
   A 720 column: the way back in Leaf, the group as a caps label, the
   title as a Trellan heading, the choices as edged rows, the foot inline. */
.of-t.jp > .bx-page.bx-page--step { max-width: 720px; width: 100%; }
/* journeys-person.css sizes every button on these pages to its own scale
   (15 px); the Trellan button is 12 px caps. */
.of-t.jp .bx-page .ui-btn { font-size: 12px; font-weight: 500; }
.of-t.jp .bx-page .ui-btn--commit { font-weight: 600; }
/* The back link is the shared one (trellan.css 6.2, report 263). */
.bx-page--step .bx-step__label {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
}
.bx-page--step .bx-step__title {
  font-family: var(--font-display); font-weight: 300; font-size: 32px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink); line-height: 1.15;
}
.bx-page--step .bx-step__meta { color: var(--gray); font-size: 14px; }
.bx-page--step .jp-choice { border: 1px solid var(--edge); background: #FFFFFF; padding: 14px 16px; }
.bx-page--step .jp-choice:has(input:checked) {
  border-color: var(--ink); background: var(--mist); box-shadow: inset 3px 0 0 var(--green);
}
.bx-page--step .jp-choice input[type="radio"] { accent-color: var(--leaf); }
.bx-page--step .jp-choice__title { color: var(--ink); font-weight: 600; }
.bx-page--step .jp-choice__meta { color: var(--charcoal); font-size: 14px; }
.bx-page--step .bx-foot.jp-foot { border-top: 1px solid var(--hairline); padding-top: 24px; }
@media (min-width: 760px) {
  .bx-page--step .bx-foot.jp-foot { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px 16px; }
  .bx-page--step .bx-foot__main, .bx-page--step .bx-foot__ways { display: flex; gap: 12px; margin: 0; }
  .bx-page--step .bx-foot.jp-foot .ui-btn { width: auto; }
  .bx-page--step .bx-foot__note { flex: 1 1 100%; }
}

/* ── 5. Phone: the broker's pages ──────────────────────────────────── */
@media (max-width: 759px) {
  #journeyProgress { gap: 28px; }
  #journeyProgress .jp-group__title { font-size: 17px; }
  #journeyProgress .jp-group__meta { flex-basis: 100%; margin-left: 0; text-align: left; }
  #journeyProgress .bx-row .ui-row__body { padding-left: 0; }
  #journeyProgress .bx-row[open] .ui-row__body { padding-left: 14px; }
  #journeyList .bx-jcard { padding: 20px 16px; }
  #journeyList .bx-jcard__title { font-size: 19px; }
  .bx-page--step .bx-step__title { font-size: 26px; }
}

/* ── 6. Staff pages: the words every jr-* page shares ──────────────────
   journeys-staff.css wrote its own labels, buttons and card titles. On
   the boards they are the Trellan ones. Scoped to `.jr-page`. */
.jr-page .jr-label, .jr-page .jr-eyebrow, .jr-page .fj-eyebrow {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
}
.jr-page .jr-card h2, .jr-page .fj-card__title, .jr-page .fj-more__title,
.jr-page .jr-item-title {
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  letter-spacing: 1.8px; color: var(--ink);
}
.jr-page .jr-card h2, .jr-page .fj-card__title, .jr-page .fj-more__title { font-size: 20px; line-height: 1.25; }
.jr-page .jr-item-title { font-size: 32px; letter-spacing: 2px; line-height: 1.15; }
.jr-page .jr-card, .jr-page .fj-card { border: 1px solid var(--hairline); background: #FFFFFF; box-shadow: none; }
.jr-page .jr-input, .jr-page .jr-select, .jr-page .jr-textarea {
  min-height: 44px; border: 1px solid var(--edge); background-color: #FFFFFF;
  font-family: var(--font-sans); font-size: 15px; color: var(--ink); box-shadow: none;
}
.jr-page .jr-input:focus, .jr-page .jr-select:focus, .jr-page .jr-textarea:focus {
  outline: none; border-color: var(--leaf); box-shadow: var(--focus-ring);
}
.jr-btn { min-height: 44px; padding: 0 22px; }
.jr-btn--primary { background: var(--charcoal); border-color: var(--charcoal); color: #FFFFFF; }
.jr-btn--primary:hover:not(:disabled) { background: var(--green); border-color: var(--green); color: var(--on-green); }
.jr-btn.ui-btn--commit { background: var(--green); border-color: var(--green); color: var(--on-green); font-weight: 600; }
.jr-btn.ui-btn--commit:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.jr-btn--danger, .jr-page .fj-danger { color: var(--alert-fg); }

/* ── 7. Journeys in progress (`journeys_staff/board.html`) ─────────── */
.fb-type { gap: 12px; }
.fb-type__title {
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink);
}
.fb-type__n {
  font-family: var(--font-sans); font-weight: 400; font-size: 13px;
  letter-spacing: 0; text-transform: none; color: var(--gray);
}
.fb-table { border: 1px solid var(--hairline); background: #FFFFFF; }
.fb-table__head {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
  background: #FFFFFF; border-bottom: 1px solid var(--ink);
}
.fb-row { color: var(--ink); }
.fb-row:hover { background: var(--mist); }
.fb-row[data-overdue]:not([data-overdue="0"]) { background: #FFFBF9; box-shadow: inset 3px 0 0 var(--alert-dot); }
.fb-row[data-overdue]:not([data-overdue="0"]):hover { background: var(--mist); }
.fb-row__name { font-weight: 600; }
.fb-row__meta { color: var(--gray); }
.fb-row__late { color: var(--alert-fg); font-weight: 600; }
.fb-foot .jr-foot__links a { color: var(--leaf); text-decoration: underline; }
.jr-legend i { height: 6px; width: 14px; }
.jr-legend i.jr-reached { background: var(--green); }
.jr-legend i.jr-in_progress { background: var(--gold); }
.jr-legend i.jr-not_yet { background: var(--hairline); }

/* ── 8. One journey (`journeys_staff/manage.html`) ────────────────── */
.fj .fj-act__title, .fj .fj-act__title a { color: var(--ink); text-decoration: none; }
.fj .fj-act__title a:hover { color: var(--leaf); text-decoration: underline; }
.fj .fj-cp__name { color: var(--ink); }
.fj .fj-cp__state { color: var(--gray); }
.fj .fj-history__when { color: var(--gray); }
.fj .fj-group__sum { color: var(--ink); }

/* ── 9. Onboarding started (`journeys_staff/started.html`) ─────────── */
.fs-started .jr-started { border: 1px solid var(--hairline); background: #FFFFFF; box-shadow: none; }
.fs-started .jr-started__head h1 { font-size: 26px; line-height: 1.2; font-weight: 300; }
.fs-started .jr-started__tick { background: var(--leaf); color: #FFFFFF; }
.fs-started .jr-started__row > :first-child {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
}
.fs-started .jr-started__all { color: var(--leaf); text-decoration: underline; }

/* ── 10. Start a journey, Onboard a new broker (`start.html`) ──────── */
.fs .jr-choice { border: 0; border-bottom: 1px solid var(--hairline); background: transparent; padding: 22px 0; }
.fs .jr-choice .jr-btn { background: #FFFFFF; border: 1px solid var(--ink); color: var(--ink); }
.fs .jr-choice .jr-btn:hover { background: var(--ink); color: #FFFFFF; }
.fs .jr-choice:hover { background: var(--mist); }
.fs .jr-choices { border-top: 1px solid var(--ink); gap: 0; }
.fs .jr-choice h2, .fs .jr-choice__title {
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink);
}
.fs .jr-segpick { gap: 0; }
.fs .fs-happen { background: var(--mist); border: 0; }
.fs .fs-happen h2 { font-size: 20px; }

/* ── 11. One journey item (`task.html`, `review.html`, `broker_record.html`)
   The boards draw the work as a card with its foot in Mist, and the
   person as a card beside it, both as tall as their words, in the 1120
   column. journeys-staff.css ran them the full height of the window. */
.jr-page--item .jr-item-for { color: var(--gray); }
.jr-page.jr-page--item .jr-assign form.task-assign { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; max-width: 560px; }
.jr-page.jr-page--item .jr-assign form.task-assign select { flex: 1 1 280px; width: auto; min-height: 44px; }
.jr-page.jr-page--item .jr-assign form.task-assign .ui-btn { min-height: 44px; }
.jr-page--item .jr-item__side { border: 1px solid var(--hairline); background: #FFFFFF; }
@media (min-width: 1181px) {
  body.is-item .jr-page--item { padding: 32px 48px 72px; }
  body.is-item .jr-page--item > * { max-width: 1120px; }
  body.is-item .jr-item {
    grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; min-height: 0; align-items: start;
  }
  body.is-item .jr-item__work { border: 1px solid var(--hairline); background: #FFFFFF; }
  body.is-item .jr-item__body { padding: 28px; }
  body.is-item .jr-item__foot { padding: 18px 28px; background: var(--mist); border-top: 1px solid var(--hairline); }
  body.is-item .jr-item__side { padding: 24px; border: 1px solid var(--hairline); }
}

/* ── 12. Journey reports (`journeys_staff/reports.html`) ───────────── */
.jr-reports .ui-stat__label {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
}
.jr-reports .ui-stat__value { font-family: var(--font-display); font-weight: 300; color: var(--ink); }
.jr-reports .jr-report-fold__head, .jr-reports .card-title {
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  letter-spacing: 1.8px; color: var(--ink);
}
.jr-reports .ui-card { box-shadow: none; }
.shell-col > .ui-page.of-t.jr-reports { --pg-c: 1120px; }
/* h3 sub-headings in a type's fold: 11 px caps labels, as on the board. */
.jr-reports h3.card-title {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray); margin-top: 20px;
}
.jr-reports .plain-list:has(> [data-milestone]) {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 24px;
}
.jr-reports .plain-list > [data-milestone] { padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; }

/* ── 13. Onboarding intake (`intake/*.html`) ───────────────────────── */
.intake-page .card-title {
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink);
}

/* The request (`intake/detail.html`): the request on the left, Progress
   and For staff beside it, in the 1120 column (the board). */
.intake-page .ix-review > div { padding: 10px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.intake-page .ix-review dt {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
}
.intake-page .ix-review dd { color: var(--ink); }
@media (min-width: 1100px) {
  .shell-col > .ui-page.t-form.intake-page:has(> [data-intake-status]) {
    --pg-c: 1120px;
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto auto 1fr;
    gap: 24px; align-content: start; align-items: start;
  }
  .intake-page:has(> [data-intake-status]) > .of-head { grid-column: 1 / -1; }
  .intake-page:has(> [data-intake-status]) > [data-intake-status] { grid-column: 2; grid-row: 2; }
  .intake-page:has(> [data-intake-status]) > .ui-card:not(.ix-card) { grid-column: 1; grid-row: 2 / span 2; }
  .intake-page:has(> [data-intake-status]) > .ix-card:not([data-intake-status]) { grid-column: 2; grid-row: 3; }
  .intake-page:has(> [data-intake-status]) > .ix-card:not([data-intake-status]) .ix-foot { flex-direction: column; align-items: stretch; }
  .intake-page:has(> [data-intake-status]) > .ix-card:not([data-intake-status]) .ix-foot .ui-btn { width: 100%; }
}
.intake-page .ix-title {
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink);
}

/* ── 14. Phone: the staff pages ────────────────────────────────────── */
@media (max-width: 759px) {
  /* Start a journey: the button goes under the words, full width. */
  .fs .jr-choice { flex-direction: column; align-items: stretch; gap: 14px; }
  .fs .jr-choice .jr-btn { width: 100%; }
  .fs .jr-choice h2 { font-size: 17px; }
  .fb-type__title { font-size: 17px; }
  .jr-page .jr-card h2, .jr-page .fj-card__title, .jr-page .fj-more__title { font-size: 17px; }
  .jr-page .jr-item-title, .fs-started .jr-started__head h1 { font-size: 24px; }
}
@media (max-width: 759px) {
  /* The request on a phone: each label over its answer (the board). */
  .intake-page .ix-review > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}