/* ==========================================================================
   JPC Onboarding Portal – additions to the M1 design system
   Loaded after jpic-shared.css and jpc-domestic.css. Uses M1's tokens only
   (--jpic-burgundy, --jpic-gold, --grey-*, --km-display, --km-body).
   ========================================================================== */

/* ---------- Rail: static links instead of flyout buttons ---------- */
@media (min-width:1024px){
  body.jpc-domestic.jpicnav-is-expanded{padding-left:272px;}   /* M1 domestic rail opens to 272px */
}
.jpicnav-rail-item[aria-current="page"]{
  background:var(--mist);color:var(--jpic-burgundy);
  border-radius:12px 0 0 12px;width:calc(100% + 8px);padding-right:22px;z-index:1001;
}
.jpicnav-rail-item[aria-current="page"]::before{
  content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--jpic-gold);
}
.jpicnav-rail-item[aria-current="page"] .jpicnav-icon{color:var(--jpic-burgundy);}
.jpicnav-rail-item[aria-current="page"]::after{display:none;}
.jpicnav-rail:not(.is-expanded) .jpicnav-rail-item[aria-current="page"]{width:100%;border-radius:12px;padding-right:14px;}
/* The collapsed rail's name pill can be hovered (WCAG 2.2 SC 1.4.13): while shown it takes the pointer, and a strip
   on its left bridges the gap from the rail, so moving onto it keeps it (js/onboarding.js) */
.jpicnav-tip.is-shown{pointer-events:auto;}
.jpicnav-tip::after{content:'';position:absolute;top:0;bottom:0;left:-16px;width:16px;}
/* Mobile overlay: one simple list (no sub-panels) */
.ob-mobile-list{flex:1 1 auto;overflow-y:auto;background:var(--mist,#F4F2F4);padding:24px 20px 40px;}
.ob-mobile-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.ob-mobile-list a{display:flex;align-items:center;gap:14px;padding:15px 8px;font-size:16px;font-weight:600;color:var(--grey-900);
  border-bottom:1px solid var(--grey-200);text-decoration:none;}
.ob-mobile-list a i{font-size:20px;color:var(--jpic-burgundy);width:24px;text-align:center;}
.ob-mobile-list a[aria-current="page"]{color:var(--jpic-burgundy);}
.ob-mobile-list a[aria-current="page"]::after{content:'';margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--jpic-gold);}
.ob-mobile-list .ob-mobile-head{font-family:var(--km-body);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#82828d;margin:22px 0 4px;display:flex;align-items:center;gap:8px;}
.ob-mobile-list .ob-mobile-head::before{content:'';width:14px;height:2px;background:var(--jpic-gold);border-radius:1px;}
.ob-mobile-list .ob-mobile-head:first-child{margin-top:0;}

/* ---------- Figures (photos and maps inside .jpcd-adm columns) ---------- */
.ob-figure{margin:0;background:#fff;border:1px solid var(--grey-200);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(26,34,48,.06);}
.ob-figure img{display:block;width:100%;height:auto;}
.ob-figure--photo img{aspect-ratio:4/3;object-fit:cover;}
.ob-figure--map{padding:12px;}
.ob-figure--map img{border-radius:10px;}
.ob-figure figcaption{padding:12px 16px 14px;font-size:.88rem;color:var(--grey-600);}
.ob-figure--map figcaption{padding:10px 4px 2px;}
.ob-sticky{position:sticky;top:96px;}
@media (max-width:1023px){ .ob-sticky{position:static;} }

/* ---------- Useful documents card ---------- */
.ob-docs{background:#fff;border:1px solid var(--grey-200);border-radius:18px;padding:22px 24px;box-shadow:0 10px 30px rgba(26,34,48,.06);}
.ob-docs h3{font-family:var(--km-display);font-weight:800;font-size:1.05rem;color:var(--jpic-burgundy);margin:0 0 12px;}
.ob-docs ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.ob-docs a{display:flex;align-items:center;gap:12px;padding:11px 8px;border-radius:10px;color:var(--grey-900);font-weight:600;text-decoration:none;
  transition:background .2s,padding-left .2s;}
.ob-docs a:hover,.ob-docs a:focus-visible{background:var(--jpic-soft);padding-left:12px;color:var(--jpic-burgundy);}
.ob-docs a i{font-size:1.15rem;color:var(--jpic-burgundy);width:22px;text-align:center;flex:none;}
.ob-docs a small{display:block;font-weight:400;font-size:.8rem;color:var(--grey-500);}
.ob-docs a::after{content:'\2192';content:'\2192' / '';margin-left:auto;color:var(--jpic-gold-dark);font-weight:700;opacity:.6;}

/* ---------- Day-by-day table (staggered starts) ---------- */
.ob-days td:first-child{font-family:var(--km-display);font-weight:800;color:var(--jpic-burgundy);white-space:nowrap;width:1%;}
.ob-days td:last-child{text-align:left;font-family:var(--km-body);font-weight:400;color:var(--grey-700);white-space:normal;}
.ob-days tr.is-muted td{color:var(--grey-500);}
.ob-days caption{text-align:left;}

/* ---------- Checklist (tick-off) ---------- */
.ob-checklist{max-width:880px;margin:32px auto 0;}
.ob-progress{display:flex;align-items:center;gap:16px;margin:0 auto 28px;max-width:880px;}
.ob-progress-bar{flex:1;height:8px;border-radius:99px;background:var(--grey-200);overflow:hidden;}
.ob-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--jpic-burgundy),var(--jpic-burgundy-lite));border-radius:inherit;transition:width .35s ease;}
.ob-progress-label{font-family:var(--km-display);font-weight:700;font-size:.9rem;color:var(--grey-700);white-space:nowrap;}
.ob-checklist .jpcd-steps li{cursor:pointer;background:#fff;border:1px solid var(--grey-200);border-radius:16px;padding:20px 22px 20px 74px;
  margin-bottom:14px;box-shadow:0 6px 18px rgba(26,34,48,.04);transition:border-color .2s,background .2s;}
.ob-checklist .jpcd-steps li::before{left:20px;top:18px;}
.ob-checklist .jpcd-steps li:hover{border-color:var(--jpic-burgundy-lite);}
.ob-checklist .jpcd-steps li:focus-visible{outline:2px solid var(--jpic-gold);outline-offset:3px;}
.ob-checklist .jpcd-steps li p + p,.ob-checklist .jpcd-steps li p + ul,.ob-checklist .jpcd-steps li ul + p{margin-top:8px;}
.ob-checklist .jpcd-steps li ul{margin:8px 0 0;padding-left:18px;color:var(--grey-600);}
.ob-checklist .jpcd-steps li ul li{all:unset;display:list-item;margin:4px 0;}
.ob-checklist .jpcd-steps li ul li::before{content:none;}
.ob-checklist .jpcd-steps li.is-done{background:var(--jpic-soft);border-color:rgba(136,13,39,.25);}
.ob-checklist .jpcd-steps li.is-done::before{content:"\2713";background:var(--jpic-burgundy);color:#fff;}
.ob-checklist .jpcd-steps li.is-done > h3{text-decoration:line-through;text-decoration-color:var(--jpic-burgundy-lite);}
.ob-tick-hint{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin-top:10px;font-size:.85rem;font-weight:600;color:var(--grey-600);cursor:pointer;}
.ob-tick-hint[hidden]{display:none;}
.ob-tick-box{width:20px;height:20px;margin:0;flex:none;accent-color:var(--jpic-burgundy);cursor:pointer;}
.ob-tick-box:focus-visible{outline:3px solid var(--jpc-blue,#4980C1);outline-offset:2px;}
.ob-checklist li.is-done .ob-tick-hint{color:var(--jpic-burgundy);}

/* ---------- Routines (car park) ---------- */
.ob-rules{list-style:none;margin:0 0 8px;padding:0;}
.ob-rules li{position:relative;padding-left:28px;margin:0 0 12px;color:var(--grey-700);line-height:1.6;}
.ob-rules li::before{content:'';position:absolute;left:4px;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--jpic-gold);box-shadow:0 0 0 4px rgba(73,128,193,.22);}

/* ---------- Program cards (partner logos are white, so they sit on burgundy) ---------- */
.ob-programs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:32px;}
.ob-program{background:#fff;border:1px solid var(--grey-200);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(26,34,48,.06);}
.ob-program-logo{background:var(--jpic-burgundy);padding:24px 28px;min-height:108px;display:flex;align-items:center;}
.ob-program-logo img{max-height:52px;width:auto;}
.ob-program-body{padding:24px 28px 28px;display:flex;flex-direction:column;gap:10px;flex:1;}
.ob-program-body h3{font-family:var(--km-display);font-weight:800;font-size:1.2rem;color:var(--grey-900);margin:0;}
.ob-program-body p{margin:0;color:var(--grey-600);line-height:1.65;}
.ob-program dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:6px 0 10px;font-size:.95rem;}
.ob-program dt{font-family:var(--km-display);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-500);padding-top:2px;}
.ob-program dd{margin:0;color:var(--grey-900);}
.ob-program .km-btn{margin-top:auto;align-self:flex-start;}
.ob-pill{display:inline-block;align-self:flex-start;font-family:var(--km-display);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--jpic-burgundy);background:var(--jpic-soft);padding:6px 12px;border-radius:999px;}

/* ---------- Video facade (YouTube loads only when played) ---------- */
.ob-video{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--jpic-burgundy-dark);box-shadow:0 18px 40px rgba(26,34,48,.18);}
.ob-video button{all:unset;position:absolute;inset:0;cursor:pointer;display:grid;place-items:center;}
.ob-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.ob-video button:hover img{transform:scale(1.03);}
.ob-video .ob-play{position:relative;width:78px;height:78px;border-radius:50%;background:var(--jpic-gold);color:var(--jpic-burgundy);display:grid;place-items:center;
  font-size:28px;box-shadow:0 10px 26px rgba(0,0,0,.35);transition:transform .2s;}
.ob-video .ob-play i{margin-left:5px;}
.ob-video button:hover .ob-play{transform:scale(1.08);}
.ob-video button:focus-visible .ob-play{outline:3px solid #fff;outline-offset:4px;}
.ob-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------- Hero video + pause control ---------- */
.km-hero-media video.km-hero-img{width:100%;height:100%;object-fit:cover;}
/* The video js/onboarding.js adds over the banner photo on desktops (img[data-video]): on top of the photo, which
   stops its slow zoom (Pause then stops all movement) */
.km-hero-media img + video.km-hero-img{position:absolute;inset:0;}
.km-hero-media.ob-has-video img.km-hero-img{animation:none;}
.ob-hero-pause{position:absolute;right:24px;bottom:24px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.3);color:#fff;font:600 .8rem/1 var(--km-body);cursor:pointer;}
.ob-hero-pause[hidden]{display:none;}

/* ---------- Awards row ---------- */
.ob-awards{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,40px);align-items:center;}
.ob-awards img{width:100%;max-width:150px;height:auto;margin:0 auto;display:block;}
@media (max-width:680px){ .ob-awards{grid-template-columns:repeat(2,1fr);} }

/* ---------- Small helpers ---------- */
.ob-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;}
/* Links in running text: burgundy and underlined, the same as the handbooks (colour alone isn't enough – WCAG 1.4.1) */
.km-lead a,.ob-checklist a,.km-acc-body a,.ob-rules a,.jpcd-fees tfoot a,.jpcd-divert a,.ob-text-card a,#help .jf-contact a{
  color:var(--jpic-burgundy);font-weight:600;text-decoration:underline;text-decoration-color:rgba(136,13,39,.35);text-underline-offset:3px;}
.km-lead a:hover,.ob-checklist a:hover,.km-acc-body a:hover,.ob-rules a:hover,.jpcd-fees tfoot a:hover,.jpcd-divert a:hover,.ob-text-card a:hover,#help .jf-contact a:hover{
  text-decoration-color:var(--jpic-burgundy);}
/* FAQ sub-headings are h3 under the section's h2; h4 stays styled for page copies saved before the server's h4 -> h3 migration */
.km-acc-body h3,.km-acc-body h4{font-family:var(--km-display);font-weight:800;color:var(--jpic-burgundy);margin:18px 0 6px;font-size:1rem;}
.km-acc-body ul{padding-left:20px;margin:8px 0 12px;}
.km-acc-body li{margin:4px 0;}
.hx-door[aria-current="page"]{outline:3px solid var(--jpic-gold);outline-offset:4px;}
.ob-programs-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;}
.ob-programs-list li{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--grey-200);border-radius:14px;padding:14px 18px;
  font-family:var(--km-display);font-weight:700;color:var(--grey-900);}
.ob-programs-list i{font-size:1.3rem;color:var(--jpic-burgundy);width:26px;text-align:center;}
.skip-link{position:absolute;left:12px;top:-60px;z-index:2000;background:var(--grey-900);color:#fff;padding:10px 16px;border-radius:8px;}
.skip-link:focus{top:12px;}
@media (max-width:1023px){ .ob-hero-pause{bottom:16px;right:16px;} }
.jpicnav-rail-item[aria-current="page"] .jpicnav-label{color:var(--jpic-burgundy);}

/* Section rhythm: M1's content sections (.km-why, .km-info) use 90px; zones get the same, scaled down on phones */
.hx-zone{padding-block:clamp(56px,8vw,90px);}
.hx-zone + .hx-zone{border-top:1px solid rgba(26,34,48,.04);}
/* Two sections of the same tone next to each other (after an editor hides, adds or moves a section; the server
   re-alternates the tones, so this is the fallback): a line that can be seen between them */
.hx-zone-white:not([hidden]) + .hx-zone-white,.hx-zone-white:not([hidden]) + section[hidden] + .hx-zone-white,
.hx-zone-neutral:not([hidden]) + .hx-zone-neutral,.hx-zone-neutral:not([hidden]) + section[hidden] + .hx-zone-neutral,
.hx-zone-white:not([hidden]) + .km-info,.hx-zone-white:not([hidden]) + section[hidden] + .km-info{border-top:1px solid var(--grey-200);}
/* The FAQ section as a zone (section.hx-zone.km-info-zone, white or grey like the sections around it): the same
   two-column grid as the old fixed-white .km-info, which pages not yet migrated still have */
.km-info-zone .km-info-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;}
@media (max-width:991px){ .km-info-zone .km-info-grid{grid-template-columns:1fr;gap:48px;} }

/* ---------- Editor v2: hidden sections and single-column sections added in the editor ---------- */
.km-page section[hidden],.km-qnav-link[hidden]{display:none!important;}
.jpcd-adm.jpcd-adm--single{grid-template-columns:minmax(0,760px);}

/* ---------- Text sections added in the editor (the "Text" layout): their own card, not the fee table's ---------- */
.ob-text-card{background:#fff;border:1px solid var(--grey-200);border-radius:18px;padding:26px 30px;box-shadow:0 10px 30px rgba(26,34,48,.06);
  color:var(--grey-700);line-height:1.7;overflow-wrap:break-word;}
.ob-text-card > :first-child{margin-top:0;}
.ob-text-card > :last-child{margin-bottom:0;}
.ob-text-card p{margin:0 0 12px;}
.ob-text-card h3,.ob-text-card h4,.ob-text-card h5{font-family:var(--km-display);font-weight:800;color:var(--jpic-burgundy);line-height:1.3;margin:22px 0 8px;}
.ob-text-card h3{font-size:1.15rem;}
.ob-text-card h4,.ob-text-card h5{font-size:1rem;}
.ob-text-card ul,.ob-text-card ol{margin:8px 0 14px;padding-left:22px;}
.ob-text-card li{margin:4px 0;}
.ob-text-card li::marker{color:var(--jpic-burgundy);}
.ob-text-card blockquote{margin:14px 0;padding:6px 0 6px 16px;border-left:3px solid var(--jpc-blue,#4980C1);color:var(--grey-700);}
.ob-text-card hr{border:0;border-top:1px solid var(--grey-200);margin:20px 0;}
.ob-text-card table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.95rem;}
.ob-text-card th,.ob-text-card td{padding:10px 12px;border-bottom:1px solid var(--grey-200);text-align:left;vertical-align:top;font-weight:400;color:var(--grey-700);}
.ob-text-card th{background:var(--off-white,#f7f7f8);font-family:var(--km-display);font-weight:700;color:var(--grey-900);}
.ob-text-card caption{text-align:left;font-weight:700;color:var(--grey-900);padding-bottom:6px;}
@media (max-width:600px){ .ob-text-card{padding:20px 18px;} .ob-text-card table{display:block;overflow-x:auto;} }

/* ---------- Screen-reader-only text ---------- */
.ob-sr{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- Links that open a new tab: a small ↗ (js/onboarding.js adds it, with "(opens in new tab)" for screen readers) ---------- */
.ob-newtab::before{content:'\2197';content:'\2197' / '';display:inline-block;margin-left:.2em;font-size:.8em;font-weight:400;line-height:1;text-decoration:none;}
/* Where the link already ends in an arrow, that arrow becomes the ↗ instead */
.ob-docs a[target="_blank"]::after,.cs-list a[target="_blank"]::after{content:'\2197';content:'\2197' / '';}
.ob-docs a[target="_blank"] > .ob-newtab::before,.cs-list a[target="_blank"] > .ob-newtab::before,
.hb-article a[target="_blank"]:not(.hb-doc) > .ob-newtab::before{content:none;}   /* (handbook articles already show one) */
.km-btn[target="_blank"]:has(> .ob-newtab) > span[aria-hidden="true"]{display:none;}
.km-btn > .ob-newtab::before{font-size:.85em;margin-left:.35em;}

/* ---------- Checklist: "Clear my ticks" and "Print this checklist" under the progress bar ---------- */
.ob-progress-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 18px;max-width:880px;margin:-16px auto 24px;}
.ob-linkbtn{all:unset;cursor:pointer;font:600 .9rem/1.4 var(--km-body);color:var(--jpic-burgundy);text-decoration:underline;
  text-decoration-color:rgba(136,13,39,.35);text-underline-offset:3px;padding:6px 2px;}
.ob-linkbtn:hover{text-decoration-color:var(--jpic-burgundy);}
.ob-linkbtn[hidden]{display:none;}
.ob-toolbtn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1.5px solid var(--jpic-burgundy);background:#fff;
  color:var(--jpic-burgundy);font:700 .9rem/1.2 var(--km-body);cursor:pointer;transition:background .2s,color .2s;}
.ob-toolbtn i{font-size:1.05rem;}
.ob-toolbtn:hover{background:var(--jpic-burgundy);color:#fff;}
.ob-linkbtn:focus-visible,.ob-toolbtn:focus-visible{outline:3px solid var(--jpc-blue,#4980C1);outline-offset:2px;}
@media (max-width:600px){ .ob-progress-tools{justify-content:flex-start;margin-top:-12px;} }

/* ---------- Add to calendar (under a date table) ---------- */
.ob-cal{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;}
.ob-cal-note{font-size:.88rem;color:var(--grey-600);}   /* "N dates have already passed" (onboarding.js) */

/* ---------- My checklists (landing pages) ---------- */
.ob-mylists{max-width:720px;margin:0 auto 32px;background:#fff;border:1px solid var(--grey-200);border-left:4px solid var(--jpic-burgundy);border-radius:16px;
  padding:20px 24px;box-shadow:0 10px 30px rgba(26,34,48,.06);}
.ob-mylists h3{display:flex;align-items:center;gap:10px;margin:0 0 2px;font-family:var(--km-display);font-weight:800;font-size:1.1rem;color:var(--jpic-burgundy);}
.ob-mylists > p{margin:0 0 10px;font-size:.9rem;color:var(--grey-600);}
.ob-mylists ul{list-style:none;margin:0;padding:0;}
.ob-mylists li + li{border-top:1px solid var(--grey-200);}
.ob-mylists a{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;align-items:center;gap:14px;padding:11px 4px;color:var(--grey-900);text-decoration:none;}
.ob-mylists a:hover .ob-mylists-name,.ob-mylists a:focus-visible .ob-mylists-name{color:var(--jpic-burgundy);text-decoration:underline;text-underline-offset:3px;}
.ob-mylists a:focus-visible{outline:3px solid var(--jpc-blue,#4980C1);outline-offset:2px;border-radius:6px;}
.ob-mylists-name{font-family:var(--km-display);font-weight:700;}
.ob-mylists-bar{height:8px;border-radius:99px;background:var(--grey-200);overflow:hidden;}
.ob-mylists-bar span{display:block;height:100%;width:0;background:var(--jpic-burgundy);border-radius:inherit;}
.ob-mylists-count{font-size:.9rem;font-weight:600;color:var(--grey-700);white-space:nowrap;}
.ob-mylists-count i{color:var(--jpic-burgundy);}
@media (max-width:480px){ .ob-mylists{padding:18px;} .ob-mylists a{grid-template-columns:minmax(0,1fr) auto;} .ob-mylists-bar{grid-column:1 / -1;grid-row:2;} }

/* ---------- Hero ---------- */
/* The photo's slow zoom runs one cycle (in and back out) and then stops; the video never zooms, so Pause stops all movement */
img.km-hero-img{animation-iteration-count:2;}
video.km-hero-img{animation:none;}
.ob-hero-pause:focus-visible{outline:3px solid #fff;outline-offset:2px;}
/* Phones: the hero takes about two thirds of the screen, so the start of the page shows below it */
@media (max-width:767px){
  .km-hero{min-height:70vh;min-height:70svh;}
}

/* ---------- Section bar (phones): slides up behind the header while scrolling down (js/onboarding.js) ---------- */
@media (max-width:767px){
  .km-qnav{transition:transform .25s ease,box-shadow .35s ease,background .35s ease,border-color .35s ease;}
  .km-qnav.is-tucked{transform:translateY(-100%);box-shadow:none;}
}
@media (prefers-reduced-motion:reduce){ .km-qnav{transition:none;} }

/* ---------- Windows High Contrast: the checklist progress bars keep an outline and a visible fill ---------- */
@media (forced-colors:active){
  .ob-progress-bar,.ob-mylists-bar{border:1px solid CanvasText;}
  .ob-progress-fill,.ob-mylists-bar span{forced-color-adjust:none;background:Highlight;}
  /* The section bar's current section is shown by a sliding background, which contrast themes remove: an outline
     instead (an outline, not a border, so nothing moves as the current section changes) */
  .km-qnav-link.is-active{outline:2px solid Highlight;outline-offset:-4px;}
  .km-qnav-link.is-active:focus-visible{outline:3px solid CanvasText;outline-offset:2px;}
  /* Year-level cards: their edge (a shadow and a photo) is removed, so a line round each */
  .hx-door{border:1px solid CanvasText;}
  .hx-door[aria-current="page"]{outline:3px solid Highlight;}
}

/* ---------- Help button in the phone header, and its sheet ---------- */
.jpicnav-mobile-help{color:#fff;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;padding:0;
  margin-left:auto;transition:background .2s ease,transform .2s ease;}
.jpicnav-mobile-help:hover{background:rgba(255,255,255,.14);transform:scale(1.08);}
.jpicnav-mobile-help:focus-visible{outline:2px solid #fff;outline-offset:2px;}
/* With Help and Search both on the right, the logo is centred on its own so it stays in the middle */
.jpicnav-mobile-bar.has-help .jpicnav-mobile-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.jpicnav-mobile-bar.has-help > span[aria-hidden="true"]{display:none;}   /* (the old spacer, on pages from before the search link) */
@media (max-width:359px){ .jpicnav-mobile-bar.has-help .jpicnav-mobile-logo img{height:34px;} }
.ob-help{width:min(520px,100%);max-width:100%;max-height:85vh;margin:auto auto 0;padding:0 0 env(safe-area-inset-bottom);border:0;border-radius:18px 18px 0 0;
  background:#fff;color:var(--grey-900);box-shadow:0 -12px 40px rgba(0,0,0,.25);font-family:var(--km-body);}
@media (min-width:600px){ .ob-help{margin:auto;border-radius:18px;} }
.ob-help::backdrop{background:rgba(20,12,16,.55);}
.ob-help-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 16px 4px 22px;}
.ob-help-head h2{margin:0;font:800 1.3rem/1.2 var(--km-display);color:var(--jpic-burgundy);}
.ob-help-close{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--grey-100,#f1f1f3);color:var(--grey-900);font-size:18px;cursor:pointer;}
.ob-help-lead{margin:0;padding:0 22px 6px;font-size:.95rem;color:var(--grey-700);}
.ob-help-list{list-style:none;margin:0;padding:4px 14px 16px;}
.ob-help-list a{display:flex;align-items:center;gap:14px;padding:14px 8px;border-bottom:1px solid var(--grey-200);color:var(--grey-900);font-weight:600;font-size:1rem;
  text-decoration:none;overflow-wrap:anywhere;}
.ob-help-list li:last-child a{border-bottom:0;}
.ob-help-list i{font-size:20px;width:24px;text-align:center;color:var(--jpic-burgundy);flex:none;}
.ob-help-list a:hover{color:var(--jpic-burgundy);}
.ob-help :focus-visible{outline:3px solid var(--jpc-blue,#4980C1);outline-offset:2px;}

/* ---------- Offline note (the page is the copy saved on this device) ---------- */
.ob-offline-note{position:fixed;left:12px;right:12px;bottom:12px;z-index:1200;max-width:560px;margin:0 auto;padding:12px 16px;border-radius:12px;
  background:var(--jpic-burgundy);color:#fff;font:600 .92rem/1.45 var(--km-body);box-shadow:0 10px 30px rgba(0,0,0,.25);}
.ob-offline-note[hidden]{display:none;}
/* (clear of the home bar and the rounded corners on phones: viewport-fit=cover) */
.ob-offline-note{left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));}
@media (forced-colors:active){ .ob-offline-note{border:2px solid CanvasText;} }

/* ---------- Collapsed rail: the item's name beside it (js/onboarding.js; the pill itself is .jpicnav-tip in jpic-shared.css) ---------- */
.jpicnav-tip.is-shown{opacity:1;visibility:visible;transform:translateX(0);}
@media (forced-colors:active){ .jpicnav-tip{border:1px solid CanvasText;} }
@media (prefers-reduced-motion:reduce){ .jpicnav-tip{transition:none;transform:none;} }

/* ---------- Words from a search, marked on the page a result opens (js/onboarding.js, ?q=) ---------- */
mark.hb-hit{background:rgba(73,128,193,.25);color:inherit;padding:0 2px;border-radius:3px;box-shadow:0 0 0 1px rgba(73,128,193,.5);}
@media print{ mark.hb-hit{background:none;box-shadow:none;padding:0;} }

/* ---------- Print ---------- */
.ob-print-url,.ob-print-source{display:none;}
@media print{
  .jpicnav,.km-qnav,.km-cta,.ob-video,.ob-hero-pause{display:none !important;}
  body.jpc-domestic,body.jpc-domestic.jpicnav-is-expanded{padding:0 !important;}
  /* Photo tiles (white text on a photo that doesn't print), awards, and buttons and notes that only work on screen */
  .hx-doors,.ob-awards,.ob-progress-tools,.ob-cal,.ob-mylists,.ob-tick-hint,.ob-newtab,.ob-help,.jpicnav-mobile-help,.ob-offline-note,.ob-figure--photo{display:none !important;}
  .hx-zone:has(.ob-awards){display:none !important;}
  .hx-zone,.km-info{padding-block:18px !important;background:none !important;}
  .hx-zone + .hx-zone{border-top:1px solid #ccc;}
  h2,h3,summary{break-after:avoid;}
  .jpcd-steps li,.km-acc-item,.ob-figure,.jpcd-fees,.ob-text-card,.ob-docs,.jpcd-divert,.ob-program,tr{break-inside:avoid;}
  .ob-docs,.jpcd-fees,.ob-text-card,.ob-figure,.ob-program{box-shadow:none !important;}
  /* Steps: a box to tick by hand and a plain outlined number (backgrounds don't print by default) */
  .ob-checklist .jpcd-steps li{box-shadow:none;background:#fff !important;border-color:#999;}
  .jpcd-steps li::before,.ob-checklist .jpcd-steps li.is-done::before{background:none !important;color:#000 !important;border:1.5px solid #000;}
  .ob-checklist .jpcd-steps li > h3::before{content:'\2610\00a0';font-weight:400;}
  .ob-checklist .jpcd-steps li.is-done > h3::before{content:'\2611\00a0';}
  .ob-checklist .jpcd-steps li.is-done > h3{text-decoration:none;}
  .ob-print-url{display:inline !important;font-size:.85em;font-weight:400;color:#333;word-break:break-all;}
  /* The source line (page, date printed, address; js/onboarding.js): on every printed page, at the top */
  .ob-print-source{display:block !important;margin:0 0 12px;font-size:8.5pt;line-height:1.4;color:#333;word-break:break-all;}
  .ob-progress-fill{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .ob-progress-bar{border:1px solid #999;}

  /* "Print this checklist": just the checklist, compact enough for one page */
  html.ob-print-one .km-page > :not(.ob-print-target):not(.ob-print-path),html.ob-print-one footer,html.ob-print-one .skip-link{display:none !important;}
  /* A part deeper in the page ("Print this section" on a handbook page): the boxes it is in (.ob-print-path) stay,
     with only the part and the source line in them */
  html.ob-print-one .ob-print-path > :not(.ob-print-path):not(.ob-print-target):not(.ob-print-source){display:none !important;}
  html.ob-print-one .ob-print-path{padding-block:0 !important;margin-block:0 !important;border:0 !important;}
  html.ob-print-one .ob-print-target{padding:0 !important;border:0 !important;}
  html.ob-print-one .ob-print-source{display:block !important;margin:0 0 8px;font-size:8.5pt;line-height:1.4;color:#333;word-break:break-all;}
  html.ob-print-one .ob-print-target .km-center{text-align:left;max-width:none;margin:0 0 6px;}
  html.ob-print-one .ob-print-target .km-label{display:none;}
  html.ob-print-one .ob-print-target .km-h2{font-size:17pt;margin:0 0 4px;}
  html.ob-print-one .ob-print-target .km-lead{font-size:9.5pt;line-height:1.4;margin:0 0 6px;max-width:none;}
  html.ob-print-one .ob-progress{max-width:none;margin:0 0 6px;}
  html.ob-print-one .ob-checklist{max-width:none;margin:0;}
  html.ob-print-one .ob-checklist .jpcd-steps li{margin:0;padding:5px 0 5px 30px;border:0;border-bottom:1px solid #bbb;border-radius:0;font-size:9pt;line-height:1.35;}
  html.ob-print-one .ob-checklist .jpcd-steps li::before{width:20px;height:20px;left:0;top:6px;font-size:8.5pt;}
  html.ob-print-one .ob-checklist .jpcd-steps li h3{font-size:10.5pt;margin:0 0 1px;}
  html.ob-print-one .ob-checklist .jpcd-steps li p,html.ob-print-one .ob-checklist .jpcd-steps li ul{font-size:9pt;margin:0;}
  html.ob-print-one .ob-checklist .jpcd-steps li p + p,html.ob-print-one .ob-checklist .jpcd-steps li ul{margin-top:2px;}
}