/* TRELLAN: the designs 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.

   The journey designer's pages use their own `jb-*` classes
   (journeys-builder.css), which wrote a bold title, a gray back link and
   rounded chips. Here they take the boards' look ("design-*.dc.html").
   `.jd-page` marks the two designer pages that use the generic
   `ui-page-head` (version as text, deleted journeys). */

/* ── 1. The frame: the boards' 1120 column, 40/48 px padding ─────────── */
.jb-page { padding: 40px 48px 72px; }
.jb-page > .jb-head, .jb-page > .jb-stack, .jb-page > .jb-new,
.jd-page > .ui-page-head, .jd-page > .ui-stack, .jd-page > .ui-table-wrap,
.jd-page > .jd-empty { max-width: 1120px; }
.jb-head { margin-bottom: 24px; align-items: flex-end; }

/* The title: Poppins 300 caps, as every Trellan h1. */
.jb-title, .jb h1, .jd-page .ui-page-head h1 {
  font-family: var(--font-display); font-weight: 300; font-size: 32px;
  line-height: 1.15; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink); margin: 0 0 6px;
}
.jb-sub, .jd-page .ui-page-head__sub { color: var(--gray); font-size: 15px; max-width: 720px; }

/* The way back: the shared look (trellan.css 6.2, report 263). */
.jb .jb-back, .jb a.jb-back, .jd-page .ui-back { margin: 0 0 8px; }

/* ── 2. Buttons: the ui-btn look on jb-btn ───────────────────────────── */
.jb-btn { min-height: 44px; padding: 0 22px; border: 1px solid transparent; }
.jb-btn--sm { min-height: 44px; padding: 0 18px; font-size: 12px; }
.jb-btn--lg { min-height: 44px; padding: 0 22px; font-size: 12px; }
.jb-btn--primary { background: var(--charcoal); border-color: var(--charcoal); color: #FFFFFF; }
.jb-btn--primary:hover:not(:disabled) { background: var(--green); border-color: var(--green); color: var(--on-green); }
.jb-btn--secondary { background: #FFFFFF; border-color: var(--ink); color: var(--ink); }
.jb-btn--secondary:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.jb-btn.ui-btn--commit { background: var(--green); border-color: var(--green); color: var(--on-green); font-weight: 600; }
.jb-btn.ui-btn--commit:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
/* "Delete the journey": brick words in a brick edge (the board). */
.jb-page .jd-delete {
  background: #FFFFFF; border-color: var(--alert-fg); color: var(--alert-fg);
}
.jb-page .jd-delete:hover:not(:disabled) { background: var(--alert-bg); border-color: var(--alert-fg); color: var(--alert-fg); }

/* ── 3. Chips: square pills with the 8 px dot ────────────────────────── */
.jb-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1.2;
  background: var(--muted-bg); color: var(--muted-fg); --pill-dot: var(--muted-dot);
}
.jb-chip::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--pill-dot); }
.jb-chip--live { background: var(--ok-bg); color: var(--ok-fg); --pill-dot: var(--ok-dot); }
.jb-chip--draft, .jb-chip--warn { background: var(--warn-bg); color: var(--warn-fg); --pill-dot: var(--warn-dot); }
.jb-chip--alert { background: var(--alert-bg); color: var(--alert-fg); --pill-dot: var(--alert-dot); }
.jb-chip--retired, .jb-chip--team, .jb-chip--broker { background: var(--muted-bg); color: var(--muted-fg); --pill-dot: var(--muted-dot); }

/* ── 4. Tables and cards ─────────────────────────────────────────────── */
.jb-table { border: 1px solid var(--hairline); background: #FFFFFF; }
.jb-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);
}
.jb-table__row { border-top-color: var(--hairline); color: var(--ink); }
.jb-table__row:hover { background: var(--mist); }
.jb-table__row a { color: var(--ink); text-decoration: none; }
.jb-table__changed { color: var(--charcoal); }
.jb-card { border: 1px solid var(--hairline); background: #FFFFFF; box-shadow: none; }
.jb-card h2, .jb-card .jb-card__title {
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink);
}

/* Labels: 11 px caps (the fields' own words). */
.jb-lbl, .jb-group__label, .jb-diff__label, .jb-field > label, .jb-field > .jb-lbl {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
}

/* Fields: 44 px, the Edge line, Leaf focus. */
.jb .jb-input, .jb .jb-select, .jb .jb-text, .jb .jb-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;
}
.jb .jb-input:focus, .jb .jb-select:focus, .jb .jb-text:focus, .jb .jb-textarea:focus {
  outline: none; border-color: var(--leaf); box-shadow: var(--focus-ring);
}

/* A segmented choice: the chosen one ink, the others white, in one Edge
   line (the boards' "Path" and Yes / No). */
.jb .jb-seg { display: flex; gap: 0; padding: 0; background: #FFFFFF; border: 1px solid var(--edge); }
.jb .jb-seg label + label { border-left: 1px solid var(--edge); }
.jb .jb-seg span {
  display: flex; align-items: center; justify-content: center; min-height: 42px;
  padding: 0 12px; background: #FFFFFF; color: var(--ink); font-weight: 400;
}
.jb .jb-seg input:checked + span { background: var(--ink); color: #FFFFFF; font-weight: 600; }
.jb .jb-seg input:focus-visible + span { outline: 2px solid var(--leaf); outline-offset: -4px; }

/* The preview's phone: its heading is a Trellan heading too. */
.jb-phone h1, .jb-phone h2, .jb-phone__body h1, .jb-phone__body h2 {
  font-family: var(--font-display); font-weight: 300; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink);
}
.jb-preview__aside h1 { font-size: 28px; }

/* ── 5. Journey types (`journey_designs/index.html`) ─────────────────── */
.journey-types-page .jt-readonly {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--mist); color: var(--charcoal); font-size: 14px;
}
.journey-types-page .jt-warn { color: var(--alert-fg); }

/* ── 6. The version (`read.html`, of.page detail) ───────────────────── */
.journey-read-page .jr-step__n { color: var(--gray); font-variant-numeric: tabular-nums; }
.journey-read-page .jr-step__title { color: var(--ink); font-weight: 600; }
.journey-read-page .jr-step__cond { color: var(--leaf); }
.journey-read-page .jr-items__side .ui-label,
.journey-read-page .jr-facts dt {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
}

/* ── 7. Delete (`delete.html`): the card has the alert rule ──────────── */
#journeyDelete { box-shadow: inset 3px 0 0 var(--alert-dot); border-left-color: transparent; max-width: 760px; }
#journeyDelete .jb-actions { gap: 12px; }

/* ── 8. Version as text (`json.html`) ────────────────────────────────── */
.jd-page #journeyJson {
  width: 100%; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.55; background: var(--mist); color: var(--ink);
  border: 1px solid var(--edge); padding: 12px 14px;
}
.jd-page .ui-card { padding: 0; border: 0; }

/* ── 9. Deleted journeys: the empty state is a Mist panel ────────────── */
.jd-empty { background: var(--mist); padding: 28px 32px; display: flex; flex-direction: column; gap: 8px; }
.jd-empty p { margin: 0; color: var(--ink); font-size: 15px; }

/* ── 10. New journey type ───────────────────────────────────────────────
   The field's own words are a text node in its <label>: the caps go on the
   label and come off everything inside it. The side note is a Mist panel. */
.jb-new .jb-field {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
}
.jb-new .jb-field .jb-seg, .jb-new .jb-field .jb-attach, .jb-new .jb-field .jb-file__hint,
.jb-new .jb-field .jb-file__opt {
  font-family: var(--font-sans); font-weight: 400; font-size: 14px;
  letter-spacing: 0; text-transform: none;
}
.jb-new .jb-field .jb-file__hint { font-size: 13px; color: var(--gray); }
.jb-new__aside { background: var(--mist); border: 0; }

/* ── 11. Phone ──────────────────────────────────────────────────────── */
@media (max-width: 759px) {
  .jb-page { padding: 24px 16px 56px; }
  .jb-title, .jb h1, .jd-page .ui-page-head h1 { font-size: 26px; }
  .jb-head { flex-wrap: wrap; }
  .jb-actions .jb-btn, .jb-new__go .jb-btn { flex: 1 1 100%; }
  /* New journey type: the two long choices one under the other. */
  .jb-new .jb-seg { flex-direction: column; }
  .jb-new .jb-seg label + label { border-left: 0; border-top: 1px solid var(--edge); }
  .jb-new .jb-seg span { justify-content: flex-start; padding: 10px 14px; text-align: left; }
  /* Compare: From, To and the button, one under the other (the board). */
  .jb .jb-inline-form { flex-direction: column; align-items: stretch; }
  .jb .jb-inline-form .jb-select, .jb .jb-inline-form .jb-btn { width: 100%; }
}