/* CNL tools — the landing page (index.html), in HQ's look, and its chapter picker.
   Built on the tokens in assets/site.css. The look is HQ's (tools/hq/tool.css): the navy rail,
   the greeting banner with Globert in a window, tiles, cards with a badge and list rows. HQ's
   file isn't on the chapter site (the chapters deploy strips tools/hq/), so the pieces used here
   are restated, as .home-* (and the rail's own .rail* classes, which Globert's tools-host.js and
   tools.css know). Keep the two in step when HQ's look changes.

   Chapter colours: the rail and the greeting banner read --b-* variables, which assets/home.js sets
   on body from the picked chapter (each falls back to CNL's own colour here, so no chapter, or one
   with no colours on file, looks exactly like CNL's). The picker (.pick*) is at the end. */

body.landing {
  --home-blue: #C9DDF0;                  /* HQ's light blue (--hq-blue) */
  --home-rule: #c9c4a8;
  --home-meta: rgba(44, 54, 89, 0.78);
  --home-on-navy: rgba(253, 251, 233, 0.8);

  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  align-items: start;
  font-size: 15px;
  line-height: 1.5;
}

.landing .ic {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.home-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.home-skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 20;
  background: var(--cream);
  color: var(--navy);
  padding: 8px 12px;
  font-weight: 700;
}
.home-skip:focus { top: 8px; }

/* ---------- rail ---------- */

.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: auto;
  background: var(--b-rail, var(--navy));
  color: var(--cream);
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rail :focus-visible { outline-color: var(--cream); }
.rail a { color: var(--cream); }
.rail a:hover { color: var(--cream); }

/* The brand, the site chip and (phones) Globert's button; tools.css spaces the row. */
.rail__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 10px;
}
.rail__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-decoration: none;
}
.rail__brand:hover { text-decoration: none; }
.rail__top .chip { margin-right: auto; background: var(--b-chip-bg, var(--red)); color: var(--b-chip-ink, var(--cream)); }

.rail__head { padding-left: 10px; }
.rail__title {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--cream);
}
.rail__intro {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--b-rail-soft, var(--home-on-navy));
}

.rail__h {
  margin: 0 0 4px 10px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--b-rail-soft, rgba(253, 251, 233, 0.7));
}
.rail__nav ul { list-style: none; margin: 0; padding: 0; }
.rail__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 15px;
  text-decoration: none;
}
.rail__nav a:hover { background: rgba(253, 251, 233, 0.1); }
/* On a chapter's rail a cream wash could take cream text under 4.5:1: darken instead. */
body.is-branded .rail__nav a:not([aria-current]):hover { background: rgba(0, 0, 0, 0.16); }
.rail__nav a[aria-current="page"],
.rail__nav a[aria-current="page"]:hover {
  background: var(--cream);
  color: var(--b-rail, var(--navy));
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--b-rail-accent, var(--red));
}
.rail__ri { display: inline-flex; align-items: center; gap: 11px; }
/* "Bring Globert back" (tools-host.js adds it to .rail__links; tools.css styles the button). */
.rail__links .tools-globert-back { padding: 0 10px; }

.rail__updated {
  margin: auto 0 0;
  padding: 4px 0 0 10px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--b-rail-soft, rgba(253, 251, 233, 0.72));
}

/* Your chapter: its logo (or code), name and place, and Switch chapter. */
.home-mine { padding: 0 10px; display: flex; flex-direction: column; gap: 8px; }
.home-mine .rail__h { margin-left: 0; }
.home-mine__card {
  min-height: 66px;   /* (its contents arrive with the chapter data: no jump) */
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  background: var(--cream);
  color: var(--navy);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--b-rail-accent, var(--red));
}
.home-mine__id { min-width: 0; }
.home-mine__name { margin: 0; font-weight: 700; font-size: 14.5px; line-height: 1.2; }
.home-mine__where { margin: 2px 0 0; font-size: 12px; line-height: 1.3; color: var(--home-meta); }
.home-mine__none { margin: 0; font-size: 14px; font-style: italic; color: var(--home-meta); }
.rail a.home-mine__switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border: 1.5px solid rgba(253, 251, 233, 0.75);
  border-radius: 999px;
  color: var(--cream);
  text-decoration: none;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0;
}
.rail a.home-mine__switch:hover { background: var(--cream); color: var(--b-rail, var(--navy)); border-color: var(--cream); }
.home-mine__switch .ic { width: 15px; height: 15px; }
.home-mine__note { margin: 0; font-size: 12px; line-height: 1.4; color: var(--b-rail-soft, rgba(253, 251, 233, 0.75)); }

/* A chapter's logo thumbnail, or (no logo) its code in its colours. */
.home-seal {
  --s: 40px;
  position: relative;
  flex: none;
  width: var(--s);
  height: var(--s);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 9px;
}
.home-seal img { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-seal.is-mono {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: calc(var(--s) * 0.26);
  letter-spacing: 0.04em;
  line-height: 1;
}

/* ---------- main column ---------- */

.content {
  min-width: 0;
  min-height: 100vh;
  padding: 34px 40px 24px;
  display: flex;
  flex-direction: column;
}
.content:focus { outline: none; }
.home {
  max-width: 1240px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.home-kicker { margin: 0; font-size: 11px; color: var(--red); }
.home-meta { margin: 0; font-size: 13px; line-height: 1.45; color: var(--home-meta); }

/* ---------- a line from CNL staff (HQ's Settings screen) ---------- */

.home-notice {
  margin: 0 6px 14px 0;
  padding: 10px 16px;
  background: var(--cream);
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--red);
  font-size: 15px;
  line-height: 1.45;
}
.home-notice[hidden] { display: none; }

/* ---------- the greeting (HQ's briefing) ---------- */

.home-brief {
  display: flex;
  align-items: center;
  gap: 18px 30px;
  background: var(--b-banner, var(--navy));
  color: var(--b-banner-ink, var(--cream));
  border: 2px solid var(--b-banner, var(--navy));
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--b-banner-shadow, var(--red));
  padding: 18px 26px 22px 18px;
  margin: 0 6px 6px 0;
}
/* His window: the sky and clouds are the sprite's own. */
.home-brief__win {
  display: block;
  flex: none;
  position: relative;
  width: 216px;
  height: 180px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: #DDEFFF;
  border: 5px solid var(--cream);
  border-radius: 22px;
  box-shadow: 0 0 0 2px var(--b-win-ring, var(--navy));
  align-self: center;
}
.home-brief__win[hidden] { display: none; }
.home-brief__win:hover { background: #DDEFFF; }
.home-brief__win:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.home-brief__win canvas { display: block; image-rendering: pixelated; }
.home-brief__body { flex: 1 1 auto; min-width: 0; }
.home-brief__kicker { margin: 0 0 6px; font-size: 11px; color: var(--b-banner-kicker, var(--home-blue)); }
.home-brief h1 {
  margin: 0 0 8px;
  color: var(--b-banner-ink, var(--cream));
  font-size: clamp(28px, 2.2vw + 14px, 40px);
  line-height: 1.05;
}
.home-brief__lede { margin: 0; font-size: 16px; color: var(--b-banner-soft, var(--home-on-navy)); }

/* Focus on the banner and the navy tile: a ring in the banner's text colour (cream on CNL's navy);
   red would barely show. */
.home-brief :focus-visible,
.landing .home-brief .home-chip:focus-visible,
.landing .home-ask input:focus-visible { outline-color: var(--b-banner-ink, var(--cream)); }
.home-step.is-navy :focus-visible { outline-color: var(--cream); }

/* Ask Globert: once he belongs on the page (tools-host.js marks body.tools-globert), hidden or not:
   asking brings him back. */
.home-ask { display: none; margin-top: 16px; }
.tools-globert .home-ask { display: block; }
.home-ask__label { display: block; margin: 0 0 6px; font-size: 10px; color: var(--b-banner-kicker, var(--home-blue)); }
.home-ask__row { display: flex; gap: 12px; max-width: 640px; }
.landing .home-ask input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: 2px solid var(--b-banner-ink, var(--cream));
  border-radius: 8px;
  padding: 0 14px;
  font-family: var(--font-serif);
  font-size: 16px;   /* 16px: iOS doesn't zoom in on it */
  background: var(--cream);
  color: var(--navy);
}
.landing .home-ask input::placeholder { color: rgba(44, 54, 89, 0.6); }
.landing .home-ask input:focus-visible { outline: 3px solid var(--b-banner-ink, var(--cream)); outline-offset: 2px; }
.home-brief .button,
.home-step.is-red .button,
.home-step.is-navy .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  color: var(--navy);
}
.home-step.is-navy .button:hover { color: var(--navy); }
/* The banner's Ask: cream on a dark banner (CNL's), the chapter's rail colour on a light one. */
.home-brief .button { background: var(--b-btn-bg, var(--cream)); color: var(--b-btn-ink, var(--navy)); box-shadow: 3px 3px 0 var(--b-btn-shadow, var(--red)); }
.home-brief .button:hover { color: var(--b-btn-ink, var(--navy)); box-shadow: 4px 4px 0 var(--b-btn-shadow, var(--red)); }
.home-brief .button:active { box-shadow: 1px 1px 0 var(--b-btn-shadow, var(--red)); }
.home-ask .button { min-height: 44px; padding: 0 18px; flex: none; }
.home-ask__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.landing .home-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1.5px solid var(--b-banner-ink, rgba(253, 251, 233, 0.6));
  border-radius: 999px;
  background: transparent;
  color: var(--b-banner-ink, var(--cream));
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  cursor: pointer;
}
.landing .home-chip:hover { background: var(--b-banner-ink, var(--cream)); border-color: var(--b-banner-ink, var(--cream)); color: var(--b-banner, var(--navy)); }
.landing .home-chip:focus-visible { outline: 3px solid var(--b-banner-ink, var(--cream)); outline-offset: 2px; }
.is-branded .landing .home-chip, body.is-branded .home-chip { border-color: color-mix(in srgb, var(--b-banner-ink) 70%, transparent); }

/* ---------- section heads ---------- */

.home-sec { display: flex; flex-direction: column; gap: 14px; }
.home-sec__h h2 { margin: 4px 0 0; font-size: clamp(22px, 1vw + 14px, 28px); line-height: 1.15; }

/* ---------- Run an event: HQ's tiles ---------- */

.home-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.home-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  border: 2px solid var(--navy);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--navy);
  padding: 16px 18px 18px;
  margin: 0 6px 6px 0;
}
.home-step.is-red { background: var(--red); color: var(--cream); border-color: var(--red); }
.home-step.is-navy { background: var(--navy); color: var(--cream); box-shadow: 5px 5px 0 var(--red); }
.home-step.is-blue { background: var(--home-blue); color: var(--navy); }
.home-step__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.home-step__top .ic { width: 24px; height: 24px; }
.home-step__n {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
}
.home-step__title { margin: 2px 0 0; font-size: 21px; line-height: 1.2; color: inherit; }
.home-step__text { margin: 0; font-size: 14px; line-height: 1.5; }
.home-step__note { margin: 0; }
/* It may wrap in a narrow tile (a 320px phone, or the drawer open beside it). */
.home-step__note .home-pill { white-space: normal; border-radius: 12px; max-width: 100%; }
.home-step__more {
  margin: 10px 0 0;
  font-size: 0.9em;
}

/* On the coloured step cards, the link takes the card's text colour. */
.home-step__more a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-step__acts {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
/* On the red tile the button's red shadow wouldn't show: navy instead. */
.home-step.is-red .button { box-shadow: 3px 3px 0 var(--navy); }
.home-step.is-red .button:hover { color: var(--navy); box-shadow: 4px 4px 0 var(--navy); }
.home-step.is-red .button:active { box-shadow: 1px 1px 0 var(--navy); }

/* ---------- cards ---------- */

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.home-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.landing .card { border-radius: 14px; padding: 20px 22px; min-width: 0; }
.home-card__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.home-hl { display: flex; align-items: center; gap: 12px; min-width: 0; }
.home-h2 { margin: 0; font-size: 19px; line-height: 1.25; }
.home-card__text { margin: 0 0 14px; font-size: 14px; }
.home-card__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.landing .card .button { display: inline-flex; align-items: center; gap: 8px; }

.home-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: none;
  background: var(--navy);
  color: var(--cream);
}
.home-badge.is-red { background: var(--red); }
.home-badge.is-blue { background: var(--home-blue); color: var(--navy); }
.home-badge.is-ghost { background: var(--home-blue); color: var(--navy); }

/* List rows inside cards. */
.home-rows { list-style: none; margin: 0; padding: 0; }
.home-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--home-rule);
}
.home-rows > li:first-child > .home-row,
.home-rows > li.home-row:first-child { border-top: 0; padding-top: 4px; }
.home-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.home-row__title { font-weight: 700; overflow-wrap: anywhere; }
a.home-row__title { color: var(--navy); text-decoration: none; }
a.home-row__title:hover { color: var(--red); text-decoration: underline; }
.home-row__end { flex: none; white-space: nowrap; }
/* A whole row that is one link (More tools, the admin site's groups). */
a.home-row.is-link { color: var(--navy); text-decoration: none; }
a.home-row.is-link:hover .home-row__title { color: var(--red); text-decoration: underline; }
.home-row__blurb { display: block; }
.home-empty {
  padding: 12px 0 4px;
  font-style: italic;
  color: var(--home-meta);
}
.home-empty a { color: var(--red); font-style: normal; font-weight: 700; }

/* Calendar block (HQ's). */
.home-cal {
  display: flex;
  flex-direction: column;
  width: 50px;
  flex: none;
  border: 2px solid var(--navy);
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  background: #fff;
}
.home-cal__h { background: var(--red); color: var(--cream); font-size: 9px; padding: 2px 0; }
.home-cal__d {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 19px;
  line-height: 1.1;
  padding-top: 2px;
}
.home-cal__m { font-size: 8px; padding-bottom: 3px; }

/* Luggage-tag chapter code (HQ's). */
.home-code {
  display: inline-block;
  position: relative;
  flex: none;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  background: var(--navy);
  color: var(--cream);
  padding: 3px 8px 3px 16px;
  border-radius: 4px;
  white-space: nowrap;
}
.home-code::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--cream);
}

/* Pills: always a word, never colour alone. */
.home-pill {
  display: inline-block;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.home-pill.is-mute { color: var(--home-meta); border-color: rgba(44, 54, 89, 0.4); border-style: dashed; }

/* Outline pill link ("Submit an event" on the events card). */
.home-lnk {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  padding: 7px 12px;
  text-decoration: none;
  white-space: nowrap;
}
.home-lnk:hover { color: var(--cream); background: var(--navy); }

/* Globert's "Ask Globert" on a tile or card (index.html renders it hidden; tools-host.js shows it
   while he's on the page). */
.home-askbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 12px 0 9px;
  background: var(--cream);
  color: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.home-askbtn[hidden] { display: none; }
.home-askbtn:hover { background: var(--navy); color: var(--cream); }
.landing .home-askbtn .ic { width: 15px; height: 15px; }
/* On the red and navy tiles: an outline in cream. */
.home-step.is-red .home-askbtn,
.home-step.is-navy .home-askbtn { background: transparent; color: var(--cream); border-color: rgba(253, 251, 233, 0.75); }
.home-step.is-red .home-askbtn:hover,
.home-step.is-navy .home-askbtn:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.home-step.is-red .home-askbtn:focus-visible,
.home-step.is-navy .home-askbtn:focus-visible { outline-color: var(--cream); }
.home-step.is-red .button:focus-visible { outline-color: var(--cream); }
.home-step.is-red .home-pill,
.home-step.is-navy .home-pill { color: var(--cream); border-color: var(--cream); }

/* The admin site's groups. */
.tool-groups { display: flex; flex-direction: column; gap: 24px; }
.tool-groups:empty { display: none; }

.home-fail { margin: 0; font-style: italic; color: var(--home-meta); }
.home-fail[hidden] { display: none; }
.home-fail a { color: var(--red); }

.content__footer {
  margin-top: auto;
  padding-top: 32px;
  max-width: 1240px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  font-size: 10.5px;
  color: var(--muted);
}
.content__footer a {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.content__footer a:hover { color: var(--red); }

/* ---------- smaller screens ---------- */

@media (max-width: 1240px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1180px) {
  .home-steps { grid-template-columns: minmax(0, 1fr); }
  .home-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; }
  .home-step__top { grid-row: 1 / span 5; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; }
  .home-step > :not(.home-step__top) { grid-column: 2; }
}

/* Globert's drawer open beside the page (from 1280px, it pads the body 340px): the same switches,
   340px sooner, so the tiles and the two columns never get squeezed. */
@media (min-width: 1181px) and (max-width: 1520px) {
  body.globert-pad.globert-open .home-steps { grid-template-columns: minmax(0, 1fr); }
  body.globert-pad.globert-open .home-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; }
  body.globert-pad.globert-open .home-step__top { grid-row: 1 / span 5; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 10px; }
  body.globert-pad.globert-open .home-step > :not(.home-step__top) { grid-column: 2; }
}
@media (min-width: 1241px) and (max-width: 1580px) {
  body.globert-pad.globert-open .home-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  body.landing { display: block; }
  .rail {
    position: static;
    height: auto;
    padding: 14px 16px 16px;
    gap: 14px;
  }
  .rail__top { padding-left: 0; }
  .rail__head { padding-left: 0; }
  .rail__title { font-size: 26px; }
  .rail__title br { display: none; }
  .rail__intro { display: none; }
  .home-mine { padding: 0; }
  .rail__nav:first-of-type { display: none; }   /* the tools: they're all on the page below */
  .rail__h { display: none; }
  .rail__links { display: flex; flex-wrap: wrap; gap: 0 14px; }
  .rail__nav a { padding: 0; min-height: 44px; }
  .rail__nav a:hover { background: none; text-decoration: underline; }
  .rail__links .tools-globert-back { padding: 0; }
  .rail__updated { display: none; }
  .content { min-height: 0; padding: 22px 16px 16px; }
  .home { gap: 22px; }
}

@media (max-width: 759px) {
  .home-brief { flex-direction: column; align-items: flex-start; padding: 16px; gap: 14px; }
  .home-brief__win { width: 144px; height: 120px; border-radius: 16px; align-self: flex-start; }
}

@media (max-width: 640px) {
  .landing .card { padding: 16px; }
  .home-step { padding: 14px 14px 16px; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
  .home-step__n { font-size: 32px; }
  .home-ask__row { flex-direction: column; }
  .home-askbtn__who { display: none; }   /* "Ask", so it fits beside the tile's button (its aria-label still names him) */
  .home-ask .button { align-self: flex-start; }
  .home-row { flex-wrap: wrap; gap: 8px 12px; }
  .home-row__main { flex-basis: calc(100% - 80px); }
}

@media (pointer: coarse) {
  .rail__nav a, .home-askbtn, .home-lnk, .landing .home-chip, .rail__brand, .rail a.home-mine__switch,
  .landing .home-step .button, .landing .card .button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-skip { transition: none; }
}

/* ---------- the views ---------- */

/* The picker shows on its own: no rail, the full width. index.html's head picks the first view
   (html.home-boot-pick) until home.js has the chapters and takes over. */
body.home-picking, .home-boot-pick body.landing { display: block; }
body.home-picking .rail, .home-boot-pick .rail { display: none; }
.home-boot-pick #home-tools { display: none; }
.home-boot-pick #home-pick { display: block !important; }
body.home-picking .content { padding: 0 24px 24px; min-height: 100vh; }
.home-boot-pick .content { padding: 0 24px 24px; }

/* The wipe into a chapter's colours when it's picked. */
.home-wipe { position: fixed; inset: 0; z-index: 60; pointer-events: none; clip-path: circle(0 at var(--wx, 50%) var(--wy, 50%)); }
.home-wipe.is-on { transition: clip-path 460ms cubic-bezier(.6, 0, .3, 1); clip-path: circle(150% at var(--wx, 50%) var(--wy, 50%)); }
.home-wipe.is-out { transition: opacity 260ms ease-out; opacity: 0; }

/* ---------- the picker ---------- */

.pick {
  --land-hi: #8fa2cc;     /* countries with a chapter */
  --land-mid: #62749f;    /* Canada on the US map */
  --land-lo: #43517c;     /* everywhere else */
  --sea-dot: rgba(201, 221, 240, 0.09);
  --pin-shadow: #121833;
}
.pick-top { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.pick-top .rail__brand { color: var(--navy); }
.pick-top .chip { margin-right: auto; }
.pick-links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 22px; }
.pick-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--home-meta);
}
.pick-links a:hover { color: var(--red); }
/* Bring Globert back, here while the picker shows (tools.css styles the button for the navy rail). */
.pick-links .tools-globert-back { display: flex; }
.pick-links .globert-back { margin: 0; }
.pick-links .globert-back__btn { color: var(--navy); min-height: 44px; font-size: 14px; }
.pick-links .globert-back__btn:hover, .pick-links .globert-back__btn:focus { color: var(--red); }   /* (the core's hover is cream, for a navy bar) */
.pick-top__globert:empty { display: none; }
/* His phone button on the picker's cream top bar (the core draws it for a navy bar). */
.pick-top .globert-top { color: var(--navy); border-color: rgba(44, 54, 89, 0.55); }
.pick-top .globert-top[aria-expanded="true"] { background: var(--navy); color: var(--cream); border-color: var(--navy); }

.pick-card {
  position: relative;
  display: grid;
  grid-template-columns: 372px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 28px;
  height: calc(100vh - 88px);
  height: calc(100dvh - 88px);
  min-height: 620px;
  background: var(--navy);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--red);
  margin-right: 5px;
  padding: 20px;
  overflow: hidden;
}
/* the sea: a faint dot on every cell of the grid */
.pick-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--sea-dot) 0.9px, transparent 1.2px);
  background-size: var(--cell, 6px) var(--cell, 6px);
  background-position: var(--cell-x, 0) var(--cell-y, 0);
}

/* the finder: search and the list, over the map */
.pick-finder {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--cream);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--red);
  overflow: hidden;
}
.pick-finder__head { padding: 22px 22px 0; }
.pick-kicker { margin: 0 0 8px; font-size: 10.5px; color: var(--red); }
.pick-finder h1 { margin: 0; font-size: 31px; line-height: 1.08; }
.pick-lede { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--home-meta); }
.pick-now {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1.5px dashed rgba(44, 54, 89, 0.45);
  border-radius: 10px;
  font-size: 13px;
}
.pick-now[hidden] { display: none; }
.pick-now p { flex: 1; min-width: 0; margin: 0; line-height: 1.35; }
.pick-now__back {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--red);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.pick-search { padding: 16px 22px 0; }
.pick-search__box { position: relative; }
.pick-search__box > span .ic { position: absolute; left: 14px; top: 50%; margin-top: -10px; width: 20px; height: 20px; color: var(--navy); pointer-events: none; }
.landing .pick-search input {
  width: 100%;
  height: 52px;
  border: 2px solid var(--navy);
  border-radius: 10px;
  padding: 0 44px;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--navy);
  background: #fff;
  box-shadow: 3px 3px 0 var(--navy);
  -webkit-appearance: none;
  appearance: none;
}
.landing .pick-search input::placeholder { color: rgba(44, 54, 89, 0.6); }
.landing .pick-search input::-webkit-search-cancel-button { display: none; }
.landing .pick-search input:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.landing .pick-search__clear {
  position: absolute;
  right: 6px;
  top: 50%;
  margin-top: -18px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--navy);
}
.landing .pick-search__clear[hidden] { display: none; }
.landing .pick-search__clear:hover { background: rgba(44, 54, 89, 0.08); }
.pick-hint { margin: 9px 0 0; font-size: 12.5px; color: var(--home-meta); }
.pick-hint b { color: var(--navy); }

.pick-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin-top: 12px;
  padding: 0 12px 10px;
  border-top: 1px solid rgba(44, 54, 89, 0.14);
  scrollbar-width: thin;
  scrollbar-color: rgba(44, 54, 89, 0.35) transparent;
}
.pick-count { margin: 0; padding: 12px 10px 4px; font-size: 10px; color: var(--home-meta); }
.pick-results { list-style: none; margin: 0; padding: 0; }
.pick-grp {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 10px 6px;
  background: var(--cream);
  font-size: 10px;
  color: var(--home-meta);
}
.landing .pick-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  min-height: 52px;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
}
.pick-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pick-row__name { font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.pick-row__where { font-size: 12.5px; line-height: 1.3; color: var(--home-meta); }
.pick-row mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.pick-row__now { font-size: 9px; color: var(--red); }
.landing .pick-row:hover, .landing .pick-row.is-hot { background: rgba(201, 221, 240, 0.6); }
.landing .pick-row:focus-visible { outline: 3px solid var(--red); outline-offset: -1px; }
.landing .pick-row.is-top { background: var(--navy); color: var(--cream); box-shadow: 3px 3px 0 var(--red); }
.pick-row.is-top .pick-row__where { color: rgba(253, 251, 233, 0.85); }
.pick-row.is-top mark { text-decoration-color: var(--home-blue); }
.pick-row.is-top .pick-row__now { color: var(--home-blue); }
.pick-row__go { display: none; font-size: 9.5px; }
.pick-row.is-top .pick-row__go { display: inline; }
.pick-row.is-top .home-code { display: none; }
.pick-empty { margin: 0; padding: 18px 10px; font-size: 14px; color: var(--home-meta); }
.pick-empty strong { color: var(--navy); }
.pick-foot { padding: 12px 22px 16px; border-top: 1px solid rgba(44, 54, 89, 0.14); font-size: 13px; color: var(--home-meta); }
.pick-foot p { margin: 0; }
.landing .pick-skip {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.landing .pick-skip:hover, .pick-foot a:hover { color: var(--red); }
.pick-foot a { color: var(--navy); font-weight: 700; }

/* the maps */
.pick-maps { position: relative; z-index: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.pick-map { margin: 0; position: relative; }
.pick-map[hidden] { display: none; }
.pick-map__cap { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 10px; color: var(--home-blue); }
.pick-map__cap .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(201, 221, 240, 0.16);
  color: var(--cream);
  letter-spacing: 0.06em;
  font-size: 9.5px;
}
.pick-map__box { position: relative; }
.pick-map__box > svg.land { display: block; }
.land--hi { fill: var(--land-hi); }
.land--lo { fill: var(--land-lo); }
.land--mid { fill: var(--land-mid); }
.land--edge { fill: none; stroke: rgba(201, 221, 240, 0.45); stroke-width: 1; stroke-dasharray: 3 3; }
.land--label { fill: rgba(201, 221, 240, 0.8); font-family: var(--font-display); font-stretch: 125%; font-weight: 700; font-size: 8.5px; letter-spacing: 0.14em; }
.pick-maps__row { display: flex; align-items: flex-start; gap: 22px; }
.pick-map--eu .pick-map__box {
  border-radius: 10px;
  overflow: hidden;
  outline: 2px solid rgba(201, 221, 240, 0.55);
  background: rgba(15, 20, 40, 0.18);
  box-shadow: 4px 4px 0 rgba(10, 14, 30, 0.55);
}

/* pins: 22px to hit, a pixel pin in the chapter's colour */
.pins { position: absolute; inset: 0; }
.pins svg.leaders { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.leaders line { stroke: rgba(253, 251, 233, 0.55); stroke-width: 1; }
.leaders rect { fill: var(--cream); }
.landing .pin {
  --pin: var(--red);
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  padding: 2px;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
  transition: transform 140ms ease-out, opacity 160ms ease-out;
}
.pin svg { display: block; width: 18px; height: 18px; overflow: visible; }
.pin__sh { fill: var(--pin-shadow); }
.pin__ring { fill: var(--pin); }
.pin__face { fill: var(--cream); }
.pin__core { fill: var(--pin); }
.pin.is-plain .pin__ring { fill: var(--cream); }
.pin.is-plain .pin__core { fill: var(--red); }
.landing .pin.is-small { width: 9px; height: 9px; margin: -4px 0 0 -4px; padding: 0; cursor: default; pointer-events: none; }
.pin.is-small svg { width: 9px; height: 9px; }
.landing .pin:hover, .landing .pin.is-hot { transform: scale(1.4); z-index: 6; }
.landing .pin.is-sel { transform: scale(1.55); z-index: 7; }
.pin.is-sel::after {
  content: "";
  position: absolute;
  left: -5px; top: -5px; right: -7px; bottom: -7px;
  border: 2px solid var(--cream);
  pointer-events: none;
  animation: pick-ping 1.6s steps(4) infinite;
}
@keyframes pick-ping { 0% { opacity: 0.9; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.7); } }
.landing .pin.is-dim { opacity: 0.22; }
.pin__tag {
  position: absolute;
  left: 23px;
  top: 3px;
  padding: 1px 5px 0;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 9px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  background: var(--cream);
  color: var(--navy);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--pin-shadow);
  white-space: nowrap;
  pointer-events: none;
}
.pin.is-left .pin__tag { left: auto; right: 23px; }
.pin.is-best .pin__tag { background: var(--navy); color: var(--cream); box-shadow: 2px 2px 0 var(--red); outline: 1.5px solid var(--cream); }

/* the chapter card on the map (hover, or a picked pin) */
.tip {
  position: absolute;
  z-index: 4;
  width: 300px;
  background: var(--cream);
  color: var(--navy);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--pin-shadow);
  padding: 12px;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 18px));
}
.tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 14px;
  height: 14px;
  margin-left: calc(-7px + var(--arrow, 0px));
  background: var(--cream);
  transform: rotate(45deg);
  box-shadow: 4px 4px 0 var(--pin-shadow);
  z-index: -1;
}
.tip.is-below { transform: translate(-50%, 18px); }
.tip.is-below::after { bottom: auto; top: -7px; box-shadow: none; }
.tip.is-sticky { pointer-events: auto; }
.tip__band { height: 6px; border-radius: 3px; margin: -2px 0 10px; display: flex; overflow: hidden; }
.tip__band i { flex: 1; }
.tip__id { display: flex; align-items: center; gap: 11px; }
.tip__name { margin: 0; font-weight: 700; font-size: 15px; line-height: 1.2; }
.tip__where { margin: 2px 0 0; font-size: 12.5px; color: var(--home-meta); }
.tip__acts { display: none; margin-top: 12px; align-items: center; justify-content: space-between; gap: 8px; }
.tip.is-sticky .tip__acts { display: flex; }
.tip .button { display: inline-flex; align-items: center; gap: 8px; }
.landing .tip__close {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1.5px solid rgba(44, 54, 89, 0.4);
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tip__close .ic { width: 14px; height: 14px; }
.tip__hint { margin: 8px 0 0; font-size: 11.5px; color: var(--home-meta); }
.tip.is-sticky .tip__hint { display: none; }

/* a narrow desktop or a tablet: a narrower finder */
@media (max-width: 1180px) and (min-width: 901px) {
  .pick-card { grid-template-columns: 320px minmax(0, 1fr); gap: 22px; padding: 16px; }
  .pick-finder h1 { font-size: 27px; }
}

/* phones: the map is a header picture (it folds away while typing); then the search and the list */
@media (max-width: 900px) {
  body.home-picking .content, .home-boot-pick .content { padding: 0 16px 16px; }
  .pick-top { min-height: 56px; gap: 10px; }
  .pick-links { display: none; }
  .pick-links:has(.tools-globert-back:not([hidden])) { display: flex; }
  .pick-links:has(.tools-globert-back:not([hidden])) li:not(.tools-globert-back) { display: none; }
  .pick-card { display: flex; flex-direction: column; height: auto; min-height: 0; padding: 12px; gap: 12px; overflow: visible; }
  .pick-card::before { display: none; }
  .pick-maps { order: -1; align-items: center; gap: 0; }
  .pick-maps .pick-map__cap { display: none; }
  .pick-body.is-typing .pick-maps { display: none; }
  .pick-finder { overflow: visible; }
  .pick-finder__head { padding: 18px 16px 0; }
  .pick-finder h1 { font-size: 26px; }
  .pick-search { position: sticky; top: 0; z-index: 4; padding: 12px 16px 10px; background: var(--cream); border-radius: 12px 12px 0 0; }
  .pick-list { overflow: visible; padding: 0 8px 8px; }
  .pick-grp { top: var(--pick-search-h, 0px); }   /* just under the sticky search (home-pick.js measures it) */
  .landing .pick-row { min-height: 56px; }
  .pick-foot { padding: 12px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing .pin { transition: none; }
  .pin.is-sel::after { animation: none; }
}

/* ---------- Home option C (2026-10-12): quick actions, the debrief nudge, toolkit, requests ---------- */

/* The quick actions, in the greeting under the Ask box. Every colour is the banner's own (home.js
   applyTheme), so they read on any chapter's banner: the main one (the event form) is the Ask
   button's solid look; the rest are outlined in the banner's ink, like the chips above but bigger. */
.home-qas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--b-banner-ink, var(--cream)) 25%, transparent); }
.home-qa {
  position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; min-height: 42px;
  border-radius: var(--radius-btn, 10px); text-decoration: none; font: 700 15px/1.1 var(--font-serif);
  background: transparent; color: var(--b-banner-ink, var(--cream));
  border: 1.5px solid color-mix(in srgb, var(--b-banner-ink, var(--cream)) 75%, transparent);
}
.home-qa .ic { width: 18px; height: 18px; flex: none; }
.home-qa:hover { background: var(--b-banner-ink, var(--cream)); border-color: var(--b-banner-ink, var(--cream)); color: var(--b-banner, var(--navy)); }
.home-qa:focus-visible { outline: 3px solid var(--b-banner-ink, var(--cream)); outline-offset: 2px; }
.home-qa.is-primary {
  background: var(--b-btn-bg, var(--cream)); color: var(--b-btn-ink, var(--navy)); border-color: var(--b-btn-bg, var(--cream));
  box-shadow: 3px 3px 0 var(--b-btn-shadow, var(--red));
}
.home-qa.is-primary:hover { background: var(--b-btn-bg, var(--cream)); color: var(--b-btn-ink, var(--navy)); box-shadow: 4px 4px 0 var(--b-btn-shadow, var(--red)); transform: translate(-1px, -1px); }
.home-qa__n {
  position: absolute; top: -8px; right: -8px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; background: #F3DFA8; color: #5E4100; border: 2px solid var(--navy);
  font: 800 11px/1 var(--font-sans);
}

/* A recent event with no debrief: above the On deck list. */
.home-nudge { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #F3DFA8; color: #5E4100; font-size: 14px; }
.home-nudge[hidden] { display: none; }
.home-nudge > .ic { width: 18px; height: 18px; flex: none; }
.home-nudge > span { flex: 1; }
.landing .home-nudge .button { min-height: 36px; padding: 0 12px; font-size: 14px; flex: none; }

/* Your toolkit: compact rows, each with its Ask Globert. */
.home-kit .home-row { gap: 12px; padding: 10px 0; }
.home-kit .home-badge { width: 32px; height: 32px; border-radius: 9px; }
.home-kit .home-badge .ic { width: 16px; height: 16px; }
.home-kit .home-row__main .home-meta { font-size: 13px; line-height: 1.35; }

/* The chapter's requests. */
.home-req[hidden] { display: none; }
.home-req__pill.is-warn { background: #F3DFA8; color: #5E4100; border-color: #C9A13B; }
.home-req__pill.is-navy { background: var(--navy); color: var(--cream); }
.home-req__pill.is-ok { color: #2F6B4F; border-color: #2F6B4F; }
.home-req__pill.is-mute { color: var(--home-meta); border-style: dashed; }

@media (max-width: 520px) {
  .home-qas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .home-qa { padding: 10px 11px; font-size: 14px; gap: 7px; }
}