/* ═══════════════════════════════════════════════════════════════════════════
   PROF-859 — the Professional Guide (/professionals/guide)
   The two guide diagrams as native components: ProJourneyDiagram (.pfl-pgj*)
   and ChatActiveBookingDiagram (.pfl-pgc*), plus the page shell (.pfl-guide).

   Spec (PROF-704, verbatim): Manrope 400/600 · cards white, border 0.5px solid
   #C7D2FE, radius 10px, a 4px LEFT border in the ACTOR's colour · headings
   #0F1F4B, text #475569, secondary #64748B · professional steps Indigo #2B2E7C,
   client steps Slate #94A3B8 on #F8FAFC, «Secure payment» Navy #0F1F4B on
   #EEF0FA · NO #16A34A except the one identity «Verified» chip in the chat mock
   (.pfl-pgc-verified and its check glyph — the only rules in this file that
   may carry it) · responsive grid, ONE column under 600px, no horizontal
   scroll at 320px. Weights are 400 and 600 only; the page's H1 (.pfl-hc-title)
   carries the heavy weight, nothing in here does.

   #94A3B8 is a border and dot colour here, never text — on #F8FAFC it does not
   pass AA and on white it is 2.6:1, so the mock's placeholder-style runs are
   #64748B like every other secondary line. On the tinted cards (#EEF0FA,
   #EEF2FF) even #64748B drops to 4.2:1, so secondary text THERE is #475569.

   Loaded on every page like onboarding.css and dashboard.css; every selector
   is prefixed, so it costs one small request and touches nothing else.
   ═══════════════════════════════════════════════════════════════════════════ */

.pfl-guide { font-family: var(--pfl-font, 'Manrope', sans-serif); }
.pfl-guide-body { display: flex; flex-direction: column; gap: 56px; margin-top: 8px; }

/* ── shared: section heads, cards, banners ─────────────────────────────── */
.pfl-pgj, .pfl-pgc { font-family: var(--pfl-font, 'Manrope', sans-serif); color: #475569; }
.pfl-pgj-head, .pfl-pgc-head { margin-bottom: 24px; }
.pfl-pgj-title, .pfl-pgc-title {
    font-size: 1.625rem;           /* 26px */
    font-weight: 600;
    color: #0F1F4B;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.pfl-pgc-sub { font-size: 1rem; font-weight: 400; color: #64748B; margin: 0; line-height: 1.5; }

.pfl-pgj-lines { list-style: none; margin: 8px 0 0; padding: 0; }
.pfl-pgj-lines li { font-size: 0.875rem; font-weight: 400; line-height: 1.55; color: #475569; margin: 0 0 4px; }

.pfl-pgj-banner, .pfl-pgc-rule {
    margin-top: 28px;
    padding: 16px 20px;
    background: #EEF0FA;
    border: 0.5px solid #C7D2FE;
    border-radius: 10px;
}
.pfl-pgj-banner-bold, .pfl-pgc-rule-bold { font-size: 0.9375rem; font-weight: 600; color: #0F1F4B; margin: 0 0 4px; line-height: 1.5; }
.pfl-pgj-banner-body, .pfl-pgc-rule-body { font-size: 0.875rem; font-weight: 400; color: #475569; margin: 0; line-height: 1.55; }

/* ── the journey: cards ────────────────────────────────────────────────── */
.pfl-pgj-step, .pfl-pgj-pay {
    position: relative;
    background: #FFFFFF;
    border: 0.5px solid #C7D2FE;
    border-left: 4px solid #2B2E7C;
    border-radius: 10px;
    padding: 14px 16px 16px;
    min-width: 0;
}
.pfl-pgj-step--client { background: #F8FAFC; border-left-color: #94A3B8; }
.pfl-pgj-pay { background: #EEF0FA; border-left-color: #0F1F4B; }

.pfl-pgj-actor {
    display: block;
    font-size: 0.6875rem;          /* 11px */
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2B2E7C;
    margin-bottom: 6px;
}
.pfl-pgj-step--client .pfl-pgj-actor { color: #475569; }

.pfl-pgj-step-title, .pfl-pgj-pay-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 1rem; font-weight: 600; color: #0F1F4B;
    margin: 0; line-height: 1.3;
}
.pfl-pgj-num {
    flex: 0 0 auto;
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #EEF2FF; color: #2B2E7C;
    font-size: 0.875rem; font-weight: 600;
}
.pfl-pgj-step--client .pfl-pgj-num { background: #F1F5F9; color: #475569; }
.pfl-pgj-pay-cap { margin: 12px 0 0; font-size: 0.875rem; font-weight: 600; color: #0F1F4B; }
/* PROF-916 20984 §B5 — the line shown instead of the chat diagram while bookings are closed. */
.pfl-guide-chat-preview { margin: 0; font-size: 0.9375rem; line-height: 1.55; font-weight: 600; color: #0F1F4B; }
/* PROF-902 23313 §13 — the line above the journey board: the preview line's type, one step above the board. */
.pfl-guide-note { margin: 0 0 16px; font-size: 0.9375rem; line-height: 1.55; font-weight: 600; color: #0F1F4B; }
/* PROF-916 20916 §4 — the line that replaced the payment card: plain text, no card. */
.pfl-pgj-truth { margin: 16px 0 0; font-size: 0.9375rem; line-height: 1.55; font-weight: 600; color: #0F1F4B; }

/* Lane headings and the two connector labels exist only for the two-lane
   board; below it they are not drawn. */
.pfl-pgj-lane {
    margin: 0;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: #2B2E7C;
    display: flex; align-items: flex-end;
}
.pfl-pgj-lane--client { color: #475569; }
.pfl-pgj-lane--client::before {
    content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    background: #94A3B8; margin: 0 8px 2px 0;
}
.pfl-pgj-conn, .pfl-pgj-return { display: none; }

/* ── the journey: the two-lane board (wide) ────────────────────────────── */
.pfl-pgj-steps { list-style: none; margin: 0; padding: 0; }

/* Row plan — no row gaps, so the space between the two card rows is the
   client lane's own row and the vertical arrows know its height:
     1 lane «ΕΣΕΙΣ» 36px · 2 YOU cards · 3 lane «Ο ΠΕΛΑΤΗΣ» 56px ·
     4 CLIENT cards + payment · 5 return arrow 40px */
.pfl-pgj-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 36px auto 56px auto 40px;
    column-gap: 48px;
    row-gap: 0;
}
.pfl-pgj-lane--you    { grid-row: 1; grid-column: 1 / -1; padding-bottom: 8px; }
.pfl-pgj-lane--client { grid-row: 3; grid-column: 1 / -1; padding-bottom: 8px; }
.pfl-pgj-steps {
    grid-row: 2 / span 3; grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}
.pfl-pgj-step--1 { grid-row: 1; grid-column: 1; }
.pfl-pgj-step--2 { grid-row: 1; grid-column: 2; }
.pfl-pgj-step--4 { grid-row: 1; grid-column: 3; }
.pfl-pgj-step--5 { grid-row: 1; grid-column: 4; }
.pfl-pgj-step--3 { grid-row: 3; grid-column: 3; }
.pfl-pgj-step--6 { grid-row: 3; grid-column: 4; }
.pfl-pgj-pay     { grid-row: 4; grid-column: 2; }
.pfl-pgj-truth   { grid-row: 4; grid-column: 1 / span 2; align-self: start; }
.pfl-pgj-return  { grid-row: 5; grid-column: 2 / -1; }

/* Arrows — decorative pseudo-elements in the gaps. Horizontal 1→2 and 4→5
   (solid navy), 2⇢4 (dashed slate, labelled), vertical 3↑4 and 5↓6, and the
   return line under the client row. The 48px column gap and the 56px lane row
   are the lengths they are drawn to. */
.pfl-pgj-step--1::after, .pfl-pgj-step--4::after {
    content: ""; position: absolute; top: 50%; left: 100%; width: 48px; height: 2px;
    background: #0F1F4B; transform: translateY(-1px);
}
.pfl-pgj-step--1::before, .pfl-pgj-step--4::before {
    content: ""; position: absolute; top: 50%; left: calc(100% + 38px); width: 9px; height: 9px;
    border-top: 2px solid #0F1F4B; border-right: 2px solid #0F1F4B;
    transform: translateY(-50%) rotate(45deg);
}
.pfl-pgj-step--2::after {
    content: ""; position: absolute; top: 50%; left: 100%; width: 48px; height: 0;
    border-top: 2px dashed #94A3B8; transform: translateY(-1px);
}
.pfl-pgj-step--2::before {
    content: ""; position: absolute; top: 50%; left: calc(100% + 38px); width: 9px; height: 9px;
    border-top: 2px solid #94A3B8; border-right: 2px solid #94A3B8;
    transform: translateY(-50%) rotate(45deg);
}
.pfl-pgj-conn {
    display: block; position: absolute; left: 100%; bottom: calc(50% + 6px); width: 48px;
    text-align: center; font-size: 0.6875rem; line-height: 1.2; color: #64748B;
}
/* 3 ↑ 4: a line from the top of card 3 up through the lane row, head at the top. */
.pfl-pgj-step--3::after {
    content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 56px;
    background: #0F1F4B; transform: translateX(-1px);
}
.pfl-pgj-step--3::before {
    content: ""; position: absolute; left: 50%; bottom: calc(100% + 46px); width: 9px; height: 9px;
    border-top: 2px solid #0F1F4B; border-left: 2px solid #0F1F4B;
    transform: translateX(-50%) rotate(45deg);
}
/* 5 ↓ 6: the same line, head at the bottom (into card 6). */
.pfl-pgj-step--6::after {
    content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 56px;
    background: #0F1F4B; transform: translateX(-1px);
}
.pfl-pgj-step--6::before {
    content: ""; position: absolute; left: 50%; bottom: calc(100% + 1px); width: 9px; height: 9px;
    border-bottom: 2px solid #0F1F4B; border-right: 2px solid #0F1F4B;
    transform: translateX(-50%) rotate(45deg);
}
/* 6 → payment: a line under the client row from card 6's centre back to the
   payment card's centre, arrowhead pointing up into the payment card. The
   element spans columns 2–4 (three cards, two gaps), so a card's centre sits
   one sixth of the card width in from either end. */
.pfl-pgj-return {
    display: block; position: relative; margin: 0;
    --pfl-pgj-half: calc((100% - 96px) / 6);
}
.pfl-pgj-return::after {
    content: ""; position: absolute; top: 16px; left: var(--pfl-pgj-half); right: var(--pfl-pgj-half);
    height: 2px; background: #0F1F4B;
}
.pfl-pgj-return::before {
    content: ""; position: absolute; top: 4px; left: calc(var(--pfl-pgj-half) - 4px); width: 9px; height: 9px;
    border-top: 2px solid #0F1F4B; border-left: 2px solid #0F1F4B; transform: rotate(45deg);
}
.pfl-pgj-return-label {
    position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    font-size: 0.6875rem; color: #64748B; white-space: nowrap;
}

/* ── the journey: under 1000px the lanes go, the cards flow in order ────── */
@media (max-width: 999px) {
    .pfl-pgj-board { display: block; }
    .pfl-pgj-lane { display: none; }
    .pfl-pgj-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    /* The board's explicit placements above (rows 1 and 3, columns 1–4) are
       released here, or they outlive the template: a card told «column 4»
       opens implicit tracks in a two- or one-column grid, and the six sat in
       four crushed columns at 375px with the page scrolling sideways (review,
       04/09). With auto placement the <ol>'s order is the visual order. */
    .pfl-pgj-step, .pfl-pgj-pay, .pfl-pgj-return, .pfl-pgj-truth { grid-row: auto; grid-column: auto; }
    .pfl-pgj-pay { margin-top: 16px; }
    .pfl-pgj-step::before, .pfl-pgj-step::after, .pfl-pgj-conn, .pfl-pgj-return { display: none; content: none; }
}

/* ── the chat: layout ──────────────────────────────────────────────────── */
.pfl-pgc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
}

.pfl-pgc-mock {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 220px;
    min-width: 0;
    background: #FFFFFF;
    border: 0.5px solid #C7D2FE;
    border-radius: 10px;
    overflow: hidden;
    font-size: 0.8125rem;
    color: #475569;
}
.pfl-pgc-mock > * { min-width: 0; }
.pfl-pgc-list, .pfl-pgc-job { background: #F8FAFC; padding: 14px; }
.pfl-pgc-list { border-right: 1px solid #E2E8F0; }
.pfl-pgc-job  { border-left: 1px solid #E2E8F0; }
.pfl-pgc-thread { display: flex; flex-direction: column; min-width: 0; }

/* The numbers pinned on the illustration, and their static twins in the
   legend. Accent orange is a number highlight in Brand v3; the text on it is
   navy rather than the PNG's white, for contrast (7.7:1). */
.pfl-pgc-badge {
    position: absolute; top: -10px; left: -10px; z-index: 1;
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #F2A35B; color: #0F1F4B;
    font-size: 0.75rem; font-weight: 600; line-height: 1;
    box-shadow: 0 0 0 2px #FFFFFF;
}
.pfl-pgc-badge--static { position: static; flex: 0 0 auto; box-shadow: none; }

/* the conversation list */
.pfl-pgc-list-title { margin: 0 0 10px; font-size: 0.9375rem; font-weight: 600; color: #0F1F4B; }
.pfl-pgc-search {
    display: block; padding: 7px 10px; margin-bottom: 8px;
    border: 1px solid #E2E8F0; border-radius: 6px; background: #FFFFFF; color: #64748B;
}
.pfl-pgc-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.pfl-pgc-filter { padding: 3px 8px; border: 1px solid #E2E8F0; border-radius: 6px; background: #FFFFFF; font-size: 0.75rem; color: #475569; }
.pfl-pgc-filter.is-on { background: #2B2E7C; border-color: #2B2E7C; color: #FFFFFF; }
.pfl-pgc-convo { position: relative; display: flex; gap: 10px; padding: 10px 8px; border-radius: 6px; }
.pfl-pgc-convo.is-on { background: #EEF2FF; border-left: 3px solid #2B2E7C; }
.pfl-pgc-avatar {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #E2E8F0; color: #0F1F4B; font-weight: 600;
}
.pfl-pgc-avatar--lg { width: 40px; height: 40px; }
.pfl-pgc-convo-body { display: flex; flex-direction: column; min-width: 0; }
.pfl-pgc-convo-name { font-weight: 600; color: #0F1F4B; }
.pfl-pgc-convo-preview { color: #475569; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfl-pgc-convo-status { font-size: 0.6875rem; font-weight: 600; color: #475569; }
.pfl-pgc-convo-status::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: #94A3B8; }
.pfl-pgc-convo-status.is-active::before { background: #2B2E7C; }
.pfl-pgc-convo-status.is-request::before { background: #F2A35B; }

/* the thread */
.pfl-pgc-thread-head { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid #E2E8F0; }
.pfl-pgc-thread-who { display: flex; flex-direction: column; min-width: 0; }
.pfl-pgc-thread-name { font-size: 0.9375rem; font-weight: 600; color: #0F1F4B; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pfl-pgc-thread-sub { font-size: 0.75rem; color: #64748B; }

/* The ONE place this page may use #16A34A: an identity-verification badge,
   which is what Brand v3 reserves the colour for — in the shape the site
   already gives it (.pfl-browse-verified, .pfl-credential-chip): green check
   and border, the WORD in navy. #16A34A at 11px on white is 3.3:1, fine for a
   glyph and a border, short of AA for text. Anything else on this page that
   turns this green has copied the wrong rule. */
.pfl-pgc-verified {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
    border: 1px solid #16A34A; border-radius: 6px;
    color: #0F1F4B; font-size: 0.6875rem; font-weight: 600; white-space: nowrap;
}
.pfl-pgc-verified-check { color: #16A34A; }

.pfl-pgc-notice { position: relative; padding: 8px 16px; background: #EEF0FA; color: #2B2E7C; font-size: 0.75rem; line-height: 1.4; }
.pfl-pgc-messages { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.pfl-pgc-msg { margin: 0; max-width: 78%; padding: 10px 12px; border-radius: 10px; line-height: 1.45; }
.pfl-pgc-msg--client { align-self: flex-start; background: #F1F5F9; color: #0F1F4B; }
.pfl-pgc-msg--pro { align-self: flex-end; background: #0F1F4B; color: #FFFFFF; display: flex; flex-direction: column; }
.pfl-pgc-msg-time { align-self: flex-end; font-size: 0.6875rem; opacity: 0.8; margin-top: 4px; }

.pfl-pgc-offer, .pfl-pgc-completion {
    position: relative; align-self: flex-end; width: 78%; max-width: 100%;
    background: #FFFFFF; border: 1px solid #0F1F4B; border-radius: 10px; overflow: visible;
}
.pfl-pgc-offer-head { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; background: #EEF0FA; border-radius: 10px 10px 0 0; }
.pfl-pgc-offer-title { font-weight: 600; color: #0F1F4B; }
.pfl-pgc-offer-expires { font-size: 0.6875rem; color: #92400E; }
.pfl-pgc-offer-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
.pfl-pgc-offer-row { display: flex; justify-content: space-between; gap: 8px; }
.pfl-pgc-offer-total { font-weight: 600; color: #0F1F4B; font-size: 0.9375rem; border-top: 1px solid #E2E8F0; padding-top: 6px; margin-top: 2px; }
.pfl-pgc-offer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* «Buttons» that are not buttons: spans dressed as the primary/secondary
   shapes so the picture reads, with nothing to click. Flat navy — the gradient
   belongs to a real primary button, and this page has none. A label WRAPS
   rather than clips: text-overflow does nothing on an inline-flex box, so the
   earlier nowrap/ellipsis pair hard-cut «Αποστολή προσφοράς» mid-glyph at
   375px. Without min-width: 0 a button keeps its longest word and the flex
   row wraps around it. */
.pfl-pgc-fakebtn {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 1 1 auto;
    padding: 7px 12px; border: 1px solid #2B2E7C; border-radius: 6px;
    background: #FFFFFF; color: #2B2E7C; font-size: 0.75rem; font-weight: 600; text-align: center;
}
.pfl-pgc-fakebtn--filled { background: #0F1F4B; border-color: #0F1F4B; color: #FFFFFF; }
.pfl-pgc-fakebtn--sm { flex: 0 1 auto; padding: 5px 10px; font-size: 0.6875rem; }

.pfl-pgc-pill {
    align-self: center; margin: 0; padding: 5px 12px;
    border: 1px solid #2B2E7C; border-radius: 6px; background: #FFFFFF;
    color: #2B2E7C; font-size: 0.6875rem; font-weight: 600; text-align: center;
}
.pfl-pgc-completion { background: #EEF0FA; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.pfl-pgc-completion-title { font-weight: 600; color: #0F1F4B; }
.pfl-pgc-completion-line { font-size: 0.75rem; color: #0F1F4B; }
.pfl-pgc-completion-note { font-size: 0.6875rem; color: #475569; }

.pfl-pgc-actions { position: relative; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-top: 1px solid #E2E8F0; }
.pfl-pgc-composer { display: flex; gap: 8px; padding: 0 16px 14px; }
.pfl-pgc-composer-input { flex: 1 1 auto; min-width: 0; padding: 8px 12px; border: 1px solid #E2E8F0; border-radius: 6px; color: #64748B; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pfl-pgc-composer .pfl-pgc-fakebtn { flex: 0 0 auto; }

/* the job panel */
.pfl-pgc-job-head { position: relative; margin-bottom: 10px; }
.pfl-pgc-job-head .pfl-pgc-badge { left: auto; right: -6px; top: -6px; }
.pfl-pgc-job-title { font-size: 0.9375rem; font-weight: 600; color: #0F1F4B; }
.pfl-pgc-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.pfl-pgc-tab { flex: 1 1 0; text-align: center; padding: 5px 8px; border: 1px solid #E2E8F0; border-radius: 6px; background: #FFFFFF; font-size: 0.75rem; font-weight: 600; color: #475569; }
.pfl-pgc-tab.is-on { background: #0F1F4B; border-color: #0F1F4B; color: #FFFFFF; }
.pfl-pgc-job-rows { margin: 0; display: grid; grid-template-columns: 1fr; row-gap: 2px; }
.pfl-pgc-job-rows dt { font-size: 0.6875rem; color: #64748B; margin-top: 8px; }
.pfl-pgc-job-rows dd { margin: 0; font-weight: 600; color: #0F1F4B; padding-bottom: 6px; border-bottom: 1px solid #E2E8F0; }
.pfl-pgc-job-status { color: #2B2E7C; }
.pfl-pgc-escrow {
    position: relative; margin-top: 16px; padding: 12px;
    background: #EEF0FA; border: 1px solid #0F1F4B; border-radius: 10px;
    display: flex; flex-direction: column; gap: 3px;
}
.pfl-pgc-escrow-title { font-weight: 600; color: #0F1F4B; font-size: 0.75rem; }
.pfl-pgc-escrow-amount { font-weight: 600; color: #0F1F4B; font-size: 0.9375rem; }
.pfl-pgc-escrow-sub { font-size: 0.6875rem; color: #475569; }

/* the legend */
.pfl-pgc-legend {
    background: #FFFFFF;
    border: 0.5px solid #C7D2FE;
    border-left: 4px solid #2B2E7C;
    border-radius: 10px;
    padding: 16px 18px;
    min-width: 0;
}
.pfl-pgc-legend-title { margin: 0 0 12px; font-size: 1rem; font-weight: 600; color: #0F1F4B; }
.pfl-pgc-legend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pfl-pgc-legend-list li { display: flex; gap: 10px; align-items: flex-start; }
.pfl-pgc-legend-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pfl-pgc-legend-body strong { font-size: 0.875rem; font-weight: 600; color: #0F1F4B; }
.pfl-pgc-legend-body span { font-size: 0.8125rem; font-weight: 400; color: #475569; line-height: 1.5; }

/* ── the chat: narrower screens ────────────────────────────────────────── */
/* The legend goes under the mock well before the journey's own breakpoint:
   at 1000px the two 220px side panels plus the 300px legend left the thread
   155px wide — the header name wrapped and the chip ran into the job panel
   (review, 04/09). Below 1200px the mock has the row to itself. */
@media (max-width: 1199px) {
    .pfl-pgc-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
    /* The mock STACKS its three panels — list, thread, job — so every one of
       the seven numbers the legend counts is still drawn. The first draft hid
       the two side panels instead and took numbers 1, 5 and 6 with them, a
       legend of seven over a picture of four. The two numbers pinned on
       full-width strips (2 on the notice, 7 on the action bar) move inside the
       box: the thread's left edge is the mock's clipped edge now, and at
       left: -10px they were half circles. */
    .pfl-pgc-mock { grid-template-columns: minmax(0, 1fr); }
    .pfl-pgc-list { border-right: 0; border-bottom: 1px solid #E2E8F0; }
    .pfl-pgc-job  { border-left: 0; border-top: 1px solid #E2E8F0; }
    .pfl-pgc-notice, .pfl-pgc-actions { padding-left: 40px; }
    .pfl-pgc-notice > .pfl-pgc-badge, .pfl-pgc-actions > .pfl-pgc-badge { left: 8px; }
    .pfl-pgc-msg, .pfl-pgc-offer, .pfl-pgc-completion { max-width: 92%; width: 92%; }
}

/* ── one column under 600px — both diagrams ────────────────────────────── */
@media (max-width: 600px) {
    .pfl-guide-body { gap: 44px; }
    .pfl-pgj-title, .pfl-pgc-title { font-size: 1.375rem; }
    .pfl-pgj-steps { grid-template-columns: 1fr; gap: 12px; }
    .pfl-pgj-pay { margin-top: 12px; }
    .pfl-pgc-grid { gap: 16px; }
    .pfl-pgc-messages { padding: 12px; }
    .pfl-pgc-msg, .pfl-pgc-offer, .pfl-pgc-completion { max-width: 100%; width: 100%; }
    .pfl-pgc-offer-actions .pfl-pgc-fakebtn { flex: 1 1 100%; }
    .pfl-pgc-actions .pfl-pgc-fakebtn--sm { flex: 1 1 calc(50% - 6px); }
    .pfl-pgc-legend { padding: 14px; }
}