/* Just in Case (theme page-just-in-case.php). Converted from the approved test page pages/just-in-case.css
   (stage 3, 9 Oct 2026) for the theme, stage 4 session 4, 10 Oct 2026. Page-only styles on top of shared/ratc.css.
   Her offline library in the new system: the two halves up front, the 96 PDFs in her 16 sections with a tick for
   each, a meter that fills as you save, her eight Memphis files as the worked example, the zip, and the offline
   internet. A utility page: motion is only the meter filling, the bar sliding in and the shared print-in and
   registration.
   Put back from the live page in this look (the test page left them out): the tools row (Pick all showing, Copy,
   Save the list, Print), the hazards row, the four steps with the phone kit zip, the gear, the walk-through bar at
   the foot of the screen, and a print stylesheet that prints the list (whatever is showing) with each address. */

.jc-p { margin: 0; max-width: 62ch; }

/* ---------- 1. Opening ---------------------------------------------------- */
.jc-open { padding-block: clamp(3.5rem, 7vw, 6rem); }
.jc-open__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(32px, 5vw, 64px); align-items: center; }
.jc-open__text { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.jc-kicker, .jc-title { margin: 0; }
.jc-open__actions { gap: 12px; }
.jc-open__links { margin: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.jc-open__art { aspect-ratio: 16 / 9; --lamp-x: 30%; --lamp-y: 40%; }
.jc-open__art > img { height: 100%; object-fit: cover; }

/* ---------- 2. The library -------------------------------------------------- */
.jc-lib__h { margin: 6px 0 12px; }
.jc-lib__intro { margin: 0 0 1.5rem; max-width: 62ch; }
.jc-meter { position: sticky; top: calc(var(--header-h) + 8px); z-index: 3; display: grid; gap: 8px; margin-bottom: 1.25rem; padding: 12px 16px; border: 2px solid var(--bone); background: var(--ink-plum); }
.jc-meter__l { margin: 0; }
.jc-meter__bar { height: 10px; border: 2px solid var(--bone); }
.jc-meter__fill { display: block; height: 100%; width: calc(var(--saved, 0) * 100%); background: var(--mustard); }
.jc-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; margin-bottom: 1rem; }
.jc-find { display: grid; gap: 6px; flex: 1 1 280px; max-width: 420px; }
.jc-find__input { width: 100%; min-height: 44px; padding: 8px 12px; background: var(--ground-black); color: var(--cream); border: 2px solid var(--bone); border-radius: 0; font: 400 1.125rem/1.2 var(--font-body); }
.jc-find__input:focus-visible { outline-offset: 2px; border-color: var(--mustard); }
.jc-show { display: flex; gap: 8px; }
/* the live page's four tools: they act on whatever is showing */
.jc-acts { gap: 10px; margin-bottom: 1rem; }
.jc-acts .btn { white-space: normal; text-align: center; }
.jc-acts .btn.is-done { background: var(--mustard); border-color: var(--mustard); color: var(--ink-plum); }
.jc-acts .btn:disabled { opacity: .5; cursor: default; }
.jc-acts .btn:disabled:hover { background: transparent; color: var(--text); }
html:not(.js) .jc-acts { display: none; }
.jc-lib__note { margin: 0 0 1.5rem; max-width: 62ch; font-size: 1rem; }
.jc-none { margin: 0 0 1rem; }

.jc-secs { display: grid; gap: 2.25rem; }
.jc-sec[hidden] { display: none; }
.jc-sec__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 4px 16px; padding-bottom: 10px; border-bottom: 2px solid var(--bone); }
.jc-sec__n { font: 400 2.25rem/1 var(--font-display); color: var(--lift-purple); }
.jc-sec__h { margin: 0; font: 400 var(--fs-h2)/1 var(--font-display); text-transform: uppercase; color: var(--display); }
.jc-sec__meta { white-space: nowrap; }
.jc-sec__line { grid-column: 2 / -1; margin: 0; max-width: 60ch; }
.jc-files { list-style: none; }
.jc-file { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--dusk-violet); }
.jc-file--local { grid-template-columns: minmax(0, 1fr) auto; }
.jc-file[hidden] { display: none; }
/* the tick: a real checkbox under a drawn box (keyboard and screen readers get the checkbox). Ticked = picked for the bar */
.jc-tick { position: absolute; opacity: 0; width: 28px; height: 28px; margin: 0; }
.jc-tick-l { position: relative; display: block; width: 26px; height: 26px; border: 2px solid var(--bone); cursor: pointer; }
.jc-tick:focus-visible + .jc-tick-l { outline: 2px solid var(--focus); outline-offset: 3px; }
.jc-tick:checked + .jc-tick-l { background: var(--mustard); border-color: var(--mustard); }
.jc-tick:checked + .jc-tick-l::after { content: ""; position: absolute; left: 7px; top: 2px; width: 7px; height: 13px; border: solid var(--ink-plum); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.jc-file__text { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.jc-file__t { font: 700 1.125rem/1.3 var(--font-body); color: var(--cream); text-decoration: none; }
.jc-file__t:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.jc-file__why { font-size: 1rem; line-height: 1.45; }
.jc-file__meta { color: var(--text); }
.jc-kit { margin-top: 4px; padding: 2px 8px; border: 2px solid var(--mustard); color: var(--text); }
/* saved (downloaded here, by its button or the bar): the title lifts and the button fills with a check */
.jc-file.is-saved .jc-file__t { color: var(--display); }
.jc-dl__ok { display: none; }
.jc-file.is-saved .jc-dl { background: var(--mustard); border-color: var(--mustard); color: var(--ink-plum); }
.jc-file.is-saved .jc-dl__ok { display: block; width: 14px; height: 12px; }

/* ---------- 3. County ------------------------------------------------------- */
.jc-county .wrap { display: grid; gap: 14px; }
.jc-county h2 { margin: 0; }
.jc-county__ex { margin: 10px 0 0; }
.jc-files--local { margin-top: 8px; }
.jc-county__maps-h { margin: 1.75rem 0 0; font: 400 var(--fs-h3)/1.2 var(--font-display); text-transform: uppercase; color: var(--display); }
.jc-maps { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.jc-map { display: block; height: 100%; padding: 14px 16px; border: 2px solid var(--bone); color: var(--cream); font-weight: 700; text-decoration: none; }
.jc-map:hover { background: var(--wine); }
.jc-map__t { display: block; }
.jc-map__src { display: block; margin-top: 6px; color: var(--cream); font-weight: 600; text-transform: none; letter-spacing: .02em; overflow-wrap: anywhere; }
.jc-hazards { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.jc-hazards .pill { color: var(--cream); }

/* ---------- 4. Four steps, one afternoon (from the live page) ---------------- */
.jc-four .wrap { display: grid; gap: 14px; }
.jc-four h2 { margin: 0; }
.jc-kitzip { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; margin: 1rem 0 1.5rem; padding: 22px 24px; border: 2px solid var(--cream); background: var(--wine); }
.jc-kitzip__text { flex: 1 1 26rem; display: grid; gap: 8px; min-width: 0; }
.jc-kitzip__text > * { margin: 0; }
.jc-kitzip__h { font: 400 var(--fs-h3)/1.15 var(--font-display); text-transform: uppercase; color: var(--bone); }
.jc-kitzip__go { flex: 0 1 auto; min-width: 0; display: grid; gap: 10px; justify-items: start; }
.jc-kitzip__go .btn { white-space: normal; text-align: center; }
.jc-four__list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: f; }
.jc-four__list li { counter-increment: f; padding-top: 14px; border-top: 6px solid var(--bone); }
.jc-four__list li::before { content: counter(f, decimal-leading-zero); display: block; margin-bottom: 8px; font: 400 2.5rem/1 var(--font-display); color: var(--bone); }
.jc-four__h { margin: 0 0 8px; font: 700 var(--fs-h3)/1.25 var(--font-body); color: var(--bone); }
.jc-four__list p { margin: 0; }

/* ---------- 5. The gear (from the live page) ----------------------------------- */
.jc-gear .wrap { display: grid; gap: 14px; }
.jc-gear h2 { margin: 0; }
.jc-gear__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: .5rem; }
.jc-buy { display: grid; gap: 6px; align-content: start; height: 100%; padding: 12px 12px 14px; background: var(--ink-plum); border: 2px solid var(--bone); color: var(--cream); text-decoration: none; }
.jc-buy:hover { border-color: var(--mustard); }
.jc-buy:hover .jc-buy__nm { text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 2px; text-underline-offset: .18em; }
/* the product photos come on white: they sit on cream paper, the way the receipts' pages do */
.jc-buy__pic { display: block; margin-bottom: 4px; background: var(--cream); border-radius: var(--radius-img); overflow: hidden; }
.jc-buy__pic img { display: block; width: 100%; height: 140px; object-fit: contain; mix-blend-mode: multiply; }
.jc-buy__nm { font: 400 1.125rem/1.15 var(--font-display); text-transform: uppercase; color: var(--bone); }
.jc-buy__sub { font-size: 1rem; line-height: 1.4; }
.jc-buy__pr { color: var(--mustard); }
.jc-gear__tier { margin: 1.5rem 0 0; font: 400 var(--fs-h3)/1.2 var(--font-display); text-transform: uppercase; color: var(--display); }
.jc-gear__note, .jc-gear__mine, .jc-gear__disclose { margin: 0; max-width: 62ch; }
.jc-gear__mine { margin-top: 1rem; padding-left: 16px; border-left: 4px solid var(--mustard); }
.jc-gear__mine b { color: var(--bone); }
.jc-gear__disclose { margin-top: .75rem; font-size: 1rem; }

/* ---------- 6. Before you start --------------------------------------------- */
.jc-before__list { list-style: none; display: grid; gap: 14px; margin-top: 1.25rem; max-width: 70ch; counter-reset: b; }
.jc-before__list li { position: relative; padding-left: 2.5rem; counter-increment: b; }
.jc-before__list li::before { content: counter(b, decimal-leading-zero); position: absolute; left: 0; top: .1em; font: 600 .875rem/1.4 var(--font-mono); color: var(--label); }

/* ---------- 7, 8. The zip, what I report on ----------------------------------- */
.jc-zip__inner, .jc-report .wrap { display: grid; gap: 14px; justify-items: start; }
.jc-zip h2, .jc-report h2 { margin: 0; }
.jc-zip .jc-p a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* ---------- 9. The offline internet ------------------------------------------ */
.jc-big .wrap { display: grid; gap: 14px; }
.jc-big h2 { margin: 0; }
.jc-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 1rem 0; counter-reset: s; }
.jc-steps li { counter-increment: s; padding: 18px 20px 20px; border: 2px solid var(--cream); }
.jc-steps li::before { content: counter(s); display: block; font: 400 2.5rem/1 var(--font-display); color: var(--display); margin-bottom: 8px; }
.jc-steps__h { margin: 0 0 8px; font: 700 var(--fs-h3)/1.25 var(--font-body); color: var(--display); }
.jc-steps p { margin: 0; }
.jc-room__h { margin: 1.5rem 0 0; font: 400 var(--fs-h3)/1.2 var(--font-display); text-transform: uppercase; color: var(--display); }
.jc-room { list-style: none; max-width: 640px; border-top: 2px solid var(--cream); }
.jc-room li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgb(247 216 165 / .35); }
.jc-room b { font: 600 1rem/1.4 var(--font-mono); white-space: nowrap; }
.jc-room__note { margin: 0; max-width: 62ch; }
.jc-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 1.5rem; }
.jc-card { display: grid; gap: 8px; align-content: start; padding: 18px 20px 20px; background: var(--ink-plum); border: 2px solid var(--bone); --label: var(--lift-teal); }
.jc-card__cat, .jc-card__h, .jc-card__d { margin: 0; }
.jc-card__h { font: 400 var(--fs-h3)/1.15 var(--font-display); text-transform: uppercase; color: var(--bone); }
.jc-card__d { font-size: 1rem; line-height: 1.5; color: var(--cream); }
.jc-card__files { list-style: none; margin-top: 4px; border-top: 1px solid var(--dusk-violet); }
.jc-card__files li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--dusk-violet); color: var(--cream); }
.jc-card__files a { color: var(--cream); text-decoration-color: var(--mustard); text-underline-offset: .2em; }
.jc-card__files b { font: 600 .875rem/1.5 var(--font-mono); color: var(--cream); white-space: nowrap; }
/* her source line under every card (the live page's), links in cream with the mustard underline */
.jc-card__src { margin: 4px 0 0; overflow-wrap: anywhere; }
.jc-card__src a { color: var(--cream); text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* ---------- The walk-through bar (the live page's), fixed above the phone bar ---- */
.jc-dbar { position: fixed; left: 0; right: 0; bottom: var(--bar-h); z-index: 52; background: var(--ink-plum); color: var(--cream); border-top: 2px solid var(--bone); transform: translateY(calc(100% + var(--bar-h) + 4px)); visibility: hidden; }
.jc-dbar.is-on { transform: none; visibility: visible; }
.jc-dbar.is-run { border-top-color: var(--mustard); }
html:not(.js) .jc-dbar { display: none; }
.jc-dbar__in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-block: 10px; }
.jc-dbar__prog { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--cream); }
.jc-dbar__prog b { color: var(--bone); font-weight: 600; }
.jc-dbar__t { display: block; width: 72px; height: 10px; border: 2px solid var(--bone); }
.jc-dbar__t i { display: block; height: 100%; width: calc(var(--saved, 0) * 100%); background: var(--mustard); }
.jc-dbar__go { margin-left: auto; white-space: normal; text-align: center; }
.jc-dbar__lnk { min-height: 40px; padding: 0 4px; background: none; border: 0; color: var(--cream); font: 600 var(--fs-label)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 2px; text-underline-offset: .25em; cursor: pointer; }
.jc-dbar__lnk:hover { color: var(--bone); }
.jc-dbar__lnk[hidden] { display: none; }
.jc-dbar__now { flex: 1 1 15rem; min-width: 0; display: grid; gap: 2px; font: 700 1rem/1.35 var(--font-body); color: var(--cream); }
.jc-dbar__now .label { color: var(--lift-purple); }
body.jc-hasbar { padding-bottom: calc(var(--bar-h) + var(--jc-dbar-h, 0px)); }

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="still"]) .jc-meter__fill, :root:not([data-motion="still"]) .jc-dbar__t i { transition: width 400ms var(--ease-out); }
  :root:not([data-motion="still"]) .jc-dbar { transition: transform 250ms var(--ease-out), visibility 0s 250ms; }
  :root:not([data-motion="still"]) .jc-dbar.is-on { transition: transform 250ms var(--ease-out); }
}
@media (max-width: 1099px) {
  .jc-four__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .jc-open__grid { grid-template-columns: minmax(0, 1fr); }
  .jc-open__art { margin-inline: calc(-1 * var(--gutter) + 6px); }
  .jc-sec__head { grid-template-columns: auto minmax(0, 1fr); }
  .jc-sec__meta { grid-column: 2; }
  .jc-file { grid-template-columns: 30px minmax(0, 1fr); }
  .jc-file--local { grid-template-columns: minmax(0, 1fr); }
  .jc-dl { grid-column: 2; justify-self: start; }
  .jc-file--local .jc-dl { grid-column: 1; }
  .jc-steps { grid-template-columns: minmax(0, 1fr); }
  .jc-meter { top: calc(var(--header-h) + 4px); }
  .jc-dbar__in { gap: 8px 14px; }
  .jc-dbar__go { margin-left: 0; }
}
@media (max-width: 599px) {
  .jc-four__list { grid-template-columns: minmax(0, 1fr); }
  .jc-gear__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .jc-buy__pic img { height: 110px; }
  .jc-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Print: the checklist ---------------------------------------------------------------------------
   Prints the library as it is showing (search and Phone kit apply, as on the live page): each file with an empty box
   to tick by hand and its address under the title, then her county example with the maps, and Before you start.
   Everything that only works on a screen stays off the paper. Black on white, with or without background graphics. */
@media print {
  @page { margin: 12mm 12mm 14mm; }
  :root, html, body { color-scheme: light !important; background: #fff !important; color: #000 !important; }
  body, body.jc-hasbar { padding: 0 !important; font-size: 10pt; line-height: 1.35; }
  .skip-link, .site-header, .bottom-bar, .bottom-sheet, .site-footer, dialog, .review, .jc-dbar, .reg__copy,
  .jc-open__text > .jc-p, .jc-open__actions, .jc-open__links, .jc-open__art, .mosaic-band, .jc-lib > .wrap > .label, .jc-lib__intro,
  .jc-meter, .jc-tools, .jc-acts, .jc-lib__note, .jc-none, .jc-tick, .jc-dl, .jc-sec__line,
  .jc-four, .jc-gear, .jc-zip, .jc-report, .jc-big { display: none !important; }
  main section, .section, .memphis-clear { background: none !important; color: #000 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
  main section::before, main section::after, .section::before, .section::after, .art::before, .art::after { display: none !important; content: none !important; }
  .wrap, .wrap-wide { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  main *, main *::before { color: #000 !important; }
  /* the head of the sheet: "The offline library / Just in case / Everything, sorted" */
  .jc-open__grid, .jc-open__text { display: block !important; }
  .jc-kicker { margin: 0 !important; font-size: 8pt !important; }
  .jc-title { margin: 0 0 1mm !important; font-size: 24pt !important; line-height: 1 !important; }
  .jc-lib__h { margin: 0 0 3mm !important; font-size: 14pt !important; }
  .jc-secs { display: block !important; }
  .jc-sec { margin: 0 0 4mm !important; }
  .jc-sec__head { display: flex !important; align-items: baseline; gap: 3mm; padding: 0 0 1mm !important; border-bottom: 1.2pt solid #000 !important; break-after: avoid; page-break-after: avoid; }
  .jc-sec__n, .jc-sec__h { font-size: 12pt !important; }
  .jc-sec__meta { font-size: 7.5pt !important; margin-left: auto; }
  .jc-file { display: grid !important; grid-template-columns: 4mm minmax(0, 1fr) !important; gap: 0 3mm !important; align-items: start !important; padding: 1.6mm 0 !important; border-bottom: .4pt solid #999 !important; break-inside: avoid; page-break-inside: avoid; }
  .jc-file--local { grid-template-columns: minmax(0, 1fr) !important; }
  .jc-file[hidden], .jc-sec[hidden] { display: none !important; }   /* prints what is showing */
  .jc-tick-l { width: 3.4mm !important; height: 3.4mm !important; margin-top: .6mm; border: .8pt solid #000 !important; background: none !important; }
  .jc-tick-l::after { display: none !important; }
  .jc-file__text { display: block !important; }
  .jc-file__t { font-size: 10pt !important; line-height: 1.25 !important; text-decoration: none !important; }
  .jc-file__why { display: inline; font-size: 8.5pt !important; line-height: 1.3 !important; }
  .jc-file__meta, .jc-kit { display: inline; margin: 0 0 0 2mm !important; padding: 0 !important; border: 0 !important; font-size: 7pt !important; }
  .jc-kit::before { content: "/ "; }
  /* the address under each title, so the paper is still useful the day it is needed */
  .jc-file__t::after { content: attr(href); display: block; font: 400 7pt/1.25 var(--font-mono); letter-spacing: 0; text-transform: none; word-break: break-all; color: #333 !important; }
  .jc-county { margin-top: 2mm !important; break-before: auto; }
  .jc-county .wrap { display: block !important; }
  .jc-county .t-h2 { margin: 3mm 0 1mm !important; font-size: 14pt !important; }
  .jc-county .jc-p { margin: 0 0 1.5mm !important; font-size: 9pt; max-width: none; }
  .jc-county__ex { margin: 2mm 0 1mm !important; font-size: 8pt !important; }
  .jc-county__maps-h { margin: 3mm 0 1mm !important; font-size: 11pt !important; }
  .jc-maps { display: block !important; }
  .jc-maps li { margin: 0 0 1.5mm; break-inside: avoid; }
  .jc-map { display: block; padding: 0 !important; border: 0 !important; font-size: 10pt; }
  .jc-map__src { margin: 0; font-size: 7.5pt !important; }
  .jc-map::after { content: attr(href); display: block; font: 400 7pt/1.25 var(--font-mono); word-break: break-all; color: #333 !important; }
  .jc-hazards { display: block !important; }
  .jc-hazards .pill { display: inline; padding: 0 !important; border: 0 !important; font-size: 8pt !important; }
  .jc-hazards .pill + .pill::before { content: " / "; }
  .jc-before { margin-top: 3mm !important; break-inside: avoid; page-break-inside: avoid; }
  .jc-before .t-h2 { margin: 0 0 1mm !important; font-size: 14pt !important; }
  .jc-before__list { margin: 0 !important; gap: 1.2mm !important; max-width: none !important; font-size: 9pt; }
  .jc-before__list li { padding-left: 7mm !important; }
}