/* UI-02c body-layout layer: English Fleet Hub (#fh-root, class uirh-fleet). Reviewed, hand-written; loaded after
   pages/fleet.css. Plan: docs/ui-system/evidence/UI-02C-PREP-R1/IMPLEMENTATION-PLAN.md (rules R1-R4); outer groups:
   SECTION-AUDIT-ADDENDUM.md section 2. Only horizontal containers, outer-group alignment and section backgrounds
   and edges change. Component interiors, dialogs and popovers are not positioned here. The only interior rules
   restated are the two bleeds that are measured from the section gutter: the phone card swipe (e4) and the sticky
   compare tray, so both keep meeting the viewport edge now that the gutter is the shared one. Every selector
   starts from the page root; only existing --ui-* tokens are used; no opacity, filter, mask or blur. One
   !important answers an inline max-width in the pinned body (#help-choosing heading). */

/* ---- Sections: shared gutter; bands (R4, explicit sequence) ---- */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .fh-trust-strip,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #help-choosing,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #hiw,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #how-to-choose,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .fh-b3-inc,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #special-event-bookings,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .fh-b3-pay,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #faq{padding-inline:var(--ui-gutter)}
/* Base sections: transparent over the page surface. The trust strip keeps its own top and bottom hairlines. */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .fh-trust-strip{background-color:transparent;background-image:none}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #hiw,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .fh-b3-inc,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #faq{background-color:transparent;background-image:none;border-top:0;border-bottom:0}
/* Alternate sections: exactly the shared .ui-section--alt recipe, no hard edge. */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #help-choosing,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #how-to-choose,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #special-event-bookings,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .fh-b3-pay{background-color:var(--ui-section-alt);background-image:linear-gradient(to bottom,var(--ui-surface),var(--ui-section-alt) var(--ui-section-feather),var(--ui-section-alt) calc(100% - var(--ui-section-feather)),var(--ui-surface));border-top:0;border-bottom:0}

/* ---- The 1180px rails become full-width so their children can take the two columns ---- */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .sec > .sec-in{max-width:none;margin-inline:0}

/* ---- Reading column: outer groups occupy the centred 760px column, start-aligned ---- */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet .sec-hd-c,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet .fh-more,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet #fhEmpty,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #help-choosing #fhForm,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .fh-b3 .sec-in > .fh-b3-hd,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #hiw .fh-b3-steps,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions .sec-in > .fh-b3-sub,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .fh-b3-pay .fh-b3-guide,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #faq .sec-in-tight{width:auto;max-width:var(--ui-container-reading);margin-inline:auto;text-align:start}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #help-choosing .sec-hd-c{width:auto;max-width:var(--ui-container-reading) !important;margin-inline:auto;text-align:start}
/* Paragraph groups: start at the reading column's edge, prose measure kept. */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet .fh-vat,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .fh-b3 .sec-in > .fh-b3-note,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #how-to-choose .fh-b3-act,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions .fh-b3-route,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions .fh-b3-intro-left{max-width:min(var(--ui-container-prose),var(--ui-container-reading));margin-inline:max(0px,calc((100% - var(--ui-container-reading)) / 2)) auto;text-align:start}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet .fh-vat{padding-inline:0}
/* Heading-group interiors that were centred become start-aligned (R3). */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .sec-hd-c .lbl{justify-content:flex-start}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .sec-hd-c .sec-body-c{margin-inline:0 auto;text-align:start}

/* ---- Wide column: toolbars, grids, lists and chips occupy the centred 1280px column ---- */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .fh-trust-strip > .fh-ts-list,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet #fhSelect,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet .fh-grid,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet #fhSwipeNav,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet #fhShowAllWrap,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #how-to-choose .fh-b3-factors,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .fh-b3-inc .fh-b3-inc-grid,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #special-event-bookings .fh-b3-ev-grid,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions .fh-b3-dep-grid,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions .fh-b3-lm,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions .fh-b3-occ-grid,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .fh-b3-pay .fh-b3-check-grid{width:auto;max-width:var(--ui-container-page);margin-inline:auto}

/* ---- Bleeds measured from the section gutter (e4 phone swipe; sticky compare tray) ---- */
@media (max-width:780px){
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet .fh-grid.fh-swipe{max-width:none;margin-inline:calc(var(--ui-gutter) * -1);padding-inline:var(--ui-gutter);scroll-padding-inline-start:var(--ui-gutter)}
}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet .fh-cmp-tray{margin-inline:calc(var(--ui-gutter) * -1);padding-inline:var(--ui-gutter)}

/* ---- Prose measure: a reading group's direct paragraphs keep the shared 68ch measure (start-aligned) ---- */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet .sec-hd-c > p,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet .fh-more > p,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #help-choosing .sec-hd-c > p,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .fh-b3 .sec-in > .fh-b3-hd > p,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions .sec-in > .fh-b3-sub > p,
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .fh-b3-pay .fh-b3-guide > p{max-width:var(--ui-container-prose)}

/* ---- Contrast on the new alternate band (A6): the planner help lines in #help-choosing were --t3 on white;
   on the alternate band that is 4.0:1 at 12px, so they take the page's secondary text colour (declared deviation). */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #help-choosing .fh-plan-help{color:var(--t2)}

/* ---- UI-02C-OWNER-R1 (owner corrections, 2026-09-30; local candidate, pending review) ----
   Appended to the R2 Fleet layer. Every selector starts from the page root with the layer's own 4-class prefix, so it
   wins over the page stylesheet and the rules above by source order; only existing --ui-* and page tokens are used;
   no opacity, filter, mask or blur. Yacht cards, filters, the compare tray and every other section are untouched. */

/* 1. Tell us your plan: the group below the grid is centred on the page axis. The small prices note under the centred
   Show all button is centred small print; the lead-in keeps start-aligned text in a centred block at the prose
   measure; the action is centred on the same axis. */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet .fh-vat{width:auto;max-width:min(var(--ui-container-prose),var(--ui-container-reading));margin-inline:auto;text-align:center}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet .fh-more{width:auto;max-width:min(var(--ui-container-prose),var(--ui-container-reading));margin-inline:auto;text-align:start}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet .fh-more > p{max-width:none}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet .fh-more > .btn{display:flex;width:fit-content;max-width:100%;margin-inline:auto}

/* 2. Share control: the homepage share arrow's size, spacing and alignment (the SVG itself is replaced in the markup). */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet .fh-share-btn{gap:7px;align-items:center}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #fleet .fh-share-btn svg{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* 3. Editorial sections (#how-to-choose, #occasions, .fh-b3-pay): ONE centred group per section at the 760px reading
   role. The heading group (eyebrow, heading, standfirst) and sub-headings are centred; notes, lists and card text stay
   start-aligned inside the group; standalone actions are centred. */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet :is(#how-to-choose,#occasions,.fh-b3-pay) > .sec-in > *{width:auto;max-width:var(--ui-container-reading);margin-inline:auto}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet :is(#how-to-choose,#occasions,.fh-b3-pay) > .sec-in > .fh-b3-hd{text-align:center}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet :is(#how-to-choose,#occasions,.fh-b3-pay) > .sec-in > .fh-b3-hd .fh-b3-eyebrow{justify-content:center}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet :is(#how-to-choose,#occasions,.fh-b3-pay) > .sec-in > .fh-b3-hd > p{max-width:var(--ui-container-prose);margin-inline:auto}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions > .sec-in > .fh-b3-sub{text-align:center}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions > .sec-in > .fh-b3-intro-left{max-width:min(var(--ui-container-prose),var(--ui-container-reading));text-align:center}
/* Notes: start-aligned prose whose left edge is the group's left edge (the group is centred; the prose measure keeps
   lines readable). The margin is measured from the section width, as in the R2 paragraph-group rule. */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet :is(#how-to-choose,.fh-b3-pay) > .sec-in > .fh-b3-note{max-width:min(var(--ui-container-prose),var(--ui-container-reading));margin-inline:max(0px,calc((100% - var(--ui-container-reading)) / 2)) auto;text-align:start}
/* Standalone actions centred. */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #how-to-choose > .sec-in > .fh-b3-act{text-align:center}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .fh-b3-pay .fh-b3-guide-cta{display:flex;width:fit-content;max-width:100%;margin-inline:auto;text-align:center}

/* Card and factor groups choose their columns from the GROUP's own width (container queries in em, so enlarged text
   drops to one column instead of squeezing): one full-width column on phones, the stated columns where they fit. */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet :is(#how-to-choose .fh-b3-factors,#occasions .fh-b3-dep-grid,#occasions .fh-b3-occ-grid){container-type:inline-size}

/* Charter length: three even factors in one row where they fit (at least 14em each), otherwise one column. */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #how-to-choose .fh-b3-factors{display:flex;flex-wrap:wrap;gap:0 30px}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #how-to-choose .fh-b3-factor{flex:1 1 100%;min-width:0;max-width:100%}
@container (min-width:46em){
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #how-to-choose .fh-b3-factor{flex:1 1 calc((100% - 60px) / 3);max-width:calc((100% - 60px) / 3)}
}

/* Boarding and occasions: departure cards, landmark pills, route note and occasion cards all span the same group. */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions .fh-b3-dep-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions .fh-b3-dep{flex:1 1 100%;min-width:0;max-width:100%;box-sizing:border-box}
@container (min-width:36em){
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions .fh-b3-dep{flex:1 1 calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2)}
}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions .fh-b3-lm{justify-content:center}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions > .sec-in > .fh-b3-route{max-width:var(--ui-container-reading);text-align:start}
/* Occasion cards: two balanced columns where they fit; the unmatched last card is centred (justify-content), not left
   stranded; one full-width column on phones. Item order is the markup order. */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions .fh-b3-occ-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions .fh-b3-occ{flex:1 1 100%;min-width:0;max-width:100%;box-sizing:border-box}
@container (min-width:36em){
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet #occasions .fh-b3-occ{flex:0 1 calc((100% - 12px) / 2);max-width:calc((100% - 12px) / 2)}
}

/* Before you pay: two checklist columns where they fit, one on phones or with enlarged text. */
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .fh-b3-pay .fh-b3-check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16em),1fr));gap:16px 24px}
.uirh-fleet.uirh-fleet.uirh-fleet.uirh-fleet .fh-b3-pay > .sec-in > .fh-b3-guide{max-width:var(--ui-container-reading);box-sizing:border-box}