/* ===========================================================
   INLINE TOOLS — the Ark's calculators, in a panel
   -----------------------------------------------------------
   Layout, type and colour are the Ark's, not this site's: the
   two-column main + sticky result rail, the gradient result
   card with its big number and segmented meter, cream cards
   with uppercase labels, steppers for counts, the six-up
   duration grid, and the coloured dot per breakdown row.

   Tokens come from waterCalculator.css / foodCalculator.css,
   value for value, so a household recognises the same tool on
   either site. Water is azure (#1f6aa8), food is the terracotta
   and sage pair (#d86f1f on #d8e6bd).

   The print block at the bottom is the other half of the
   feature: Print this produces the filled plan, not the page.
   =========================================================== */

/* ——— the tool column, once ———
   Four rules used to carry their own numbers, so narrowing the form meant
   editing four of them and getting a different answer each time. These are
   the only widths on a tool page; everything below is derived. */
:root {
  --tool-col: 850px;     /* the whole column: form + gap + rail */
  --tool-rail: 320px;    /* the sticky result card */
  --tool-gap: 28px;
  --tool-gutter: 24px;
  --tool-stack: 12px;
  --tool-outer: calc(var(--tool-col) + var(--tool-gutter) * 2);
}
/* The plan is wider and has no result to pin, so it sets its own. */
.tl-page.is-comms {
  --tool-col: 960px;
  --tool-rail: 340px;
  --tool-gap: 24px;
}

/* ---------- page shell ---------- */
/* A tool is its own page. The Ark's calc-page field, its masthead, and the
   same token set so the two sites read as one tool. */
.tl-page {
  /* No background of its own: the site field shows through, or the page
     reads as a second panel sitting on top of the first. */
  padding: 4px 0 64px;

  /* Ark calc-world tokens */
  --ink: #2e2a22;
  --ink-soft: #6f6753;
  --line: #e7dfc6;
  --card: #fff;
  --cream: #faf8f3;
  --accent: #1f6aa8;
  --accent-soft: #e3f2fc;
  --accent-dark: #175a8c;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
}
/* The bag is the site's rust, not the water planner's blue. Resources
   already labels it that way (.res-thumb.is-bag). */
.tl-page.is-bugout {
  --accent: #c92a1a;
  --accent-soft: #f7e4e1;
  --accent-dark: #a9220f;
  --line: #e3d9cd;
  --card: #fffdfb;
}
.tl-page.is-food {
  --accent: #d86f1f;
  --accent-soft: #f8e4cf;
  --accent-dark: #aa5114;
  --line: #ded6c1;
  --card: #fffdf9;
}


/* ——— the container ———
   The site has exactly one: .wrap, in pln-base.css. These pages used to
   define a second, narrower one, which is why the back link, the heading and
   the cards each sat on a different left edge. Match .wrap and the question
   stops coming up. */
.tl-container,
.tl-body,
.tl-back-link,
.tl-foot {
  max-width: var(--tool-outer);
  margin-left: auto; margin-right: auto;
  padding-left: var(--tool-gutter); padding-right: var(--tool-gutter);
}

/* ---------- back to Resources ----------
   It had no styling of its own, so it rendered as a browser-default
   underlined link with a literal space between the arrow and the words. An
   inline-flex row sets the gap properly, and the underline belongs on hover
   rather than at rest. */
/* margin:0 here would undo the auto margins the container rule above gives
   it, which pinned the link to the far left of a wide monitor while the page
   stayed centred. Only the vertical margin is set. */
.tl-back-link { margin-top: 0; margin-bottom: 0; padding-top: 20px; padding-bottom: 4px; }
.tl-back-link a {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 16.5px; font-weight: 600; color: var(--muted);
  text-decoration: none;
}
.tl-back-link a:hover { color: var(--rust); }
.tl-back-link i { font-size: 14px; }

/* ---------- two columns: main, then a sticky result rail ----------
   The rail is FIRST in the DOM so it stacks above the form on a phone,
   then `order` moves it to the right at desktop. Same trick the Ark uses. */
/* 850px overall against the Ark's 1000px: a 320px rail and a 28px gap leave
   a ~500px form column rather than 652px. Two steppers side by side need far
   less room than a 650px column gives them, and the extra width only pushed
   the form away from the result card. */
.tl-layout { max-width: var(--tool-col); margin: 0 auto; }
.tl-main { min-width: 0; }
.tl-main > :first-child { margin-top: 0; }
/* ---------- the vertical stack ----------
   One gap, set once. Both columns were spacing themselves three different
   ways at once: an 11px card margin, an 18px margin above the actions and a
   9px gap between them, which is what made the rail look like it had random
   gutters. The column owns the spacing; nothing inside it adds its own. */
.tl-main, .tl-rail { display: flex; flex-direction: column; gap: var(--tool-stack); }
.tl-main > .tl-card, .tl-rail > .tl-card,
.tl-main > * > .tl-card, .tl-rail > * > .tl-card { margin-top: 0; }
/* An empty slot still takes a gap, so the panel that has not rendered yet
   must not be a flex child at all. */
.tl-main > :empty, .tl-rail > :empty { display: none; }

.tl-rail { margin-bottom: var(--tool-stack); }
@media (min-width: 768px) {
  .tl-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--tool-rail);
    gap: var(--tool-gap); align-items: start;
  }
  .tl-main { order: 1; }
  .tl-rail { order: 2; position: sticky; top: calc(var(--nav-h) + 16px); margin-bottom: 0; }
}

/* ---------- the result card ---------- */
.tl-hero {
  text-align: center; color: #fff; padding: 22px 18px 20px;
  border-radius: var(--radius-xl);
  background: linear-gradient(172deg, #3a93d2 0%, #2f7cc2 52%, #2a68b2 100%);
}
.is-bugout .tl-hero {
  background: linear-gradient(172deg, #d9452f 0%, #c92a1a 55%, #a01d10 100%);
}
.is-food .tl-hero {
  background: linear-gradient(172deg, #e2873a 0%, #d86f1f 55%, #b85a15 100%);
}
.tl-hero__ic { font-size: 27px; margin-bottom: 6px; filter: drop-shadow(0 4px 14px rgba(0,0,0,.18)); }
.tl-hero__num { display: block; }
.tl-hero__num .v {
  font-family: var(--disp); font-size: 62px; font-weight: 600;
  letter-spacing: -.02em; line-height: .9; color: #fff;
}
.tl-hero__num .u { display: block; font-size: 18px; font-weight: 700; color: #fff; margin-top: 4px; }
.tl-hero__sub { font-size: 16.5px; color: #fff; margin: 8px auto 0; max-width: 320px; line-height: 1.5; }
.tl-hero__chip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 13px;
  background: rgba(255,255,255,.2); color: #fff; font-size: 15px; font-weight: 700;
  padding: 7px 16px; border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.tl-hero__empty { font-size: 23px; font-weight: 800; margin: 2px 0 4px; color: #fff; }

/* stacked meter + legend, on a translucent track */
.tl-meter { margin-top: 15px; }
.tl-meter__track {
  display: flex; height: 12px; border-radius: var(--radius-pill); overflow: hidden;
  background: rgba(255,255,255,.2);
}
.tl-meter__track i { display: block; height: 100%; transition: width .4s ease; }
/* Two columns, left aligned. Centred wrapping put four keys on one line and
   one on the next, which read as a mistake rather than a legend. Water has
   four categories and food has seven; a grid handles both the same way. */
.tl-meter__key {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px; margin-top: 11px;
  font-size: 13.5px; font-weight: 600; color: #fff;
}
.tl-meter__key span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tl-meter__key span:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tl-meter__key i {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  box-shadow: none;
}

/* ---------- cards ---------- */
.tl-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: 16px 16px 18px;
  margin-top: 11px; color: var(--ink);
}
.tl-card__label {
  font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); margin-bottom: 12px;
}
.tl-note-inline { font-size: 14px; color: var(--ink-soft); margin: -8px 0 14px; }
/* The sentence that explains a card, between its label and its first field.
   It needs room under it or the first label reads as part of the sentence. */
/* The negative top margin pulls the hint up under a card LABEL, which is
   what it was written for. Under a row of chips it climbed on top of them. */
.tl-hint {
  font-size: 16.5px; line-height: 1.5; color: var(--ink-soft);
  margin: -6px 0 18px; max-width: 46rem;
}
.tl-dur + .tl-hint, .bg-chips + .tl-hint { margin-top: 12px; margin-bottom: 0; }

/* ---------- fields and steppers ---------- */
.tl-grid { display: grid; gap: 16px 14px; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
/* Two grids in a row still need the gap the component gives its own
   rows, or the second one's labels sit on the first one's inputs. */
.tl-grid + .tl-grid { margin-top: 16px; }

/* The comms plan asks in sentences, not in words: "Just outside your home,
   for a house fire" against "Directions". Side by side, the long label wraps
   to two lines and the short one does not, so no two fields in a row ever
   line up and every answer box sits at a different height. One column per
   row, full width. */
.tl-page.is-comms .tl-grid { grid-template-columns: 1fr; gap: 15px; }
.tl-field__label { display: block; font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.tl-field__label span { color: var(--ink-soft); font-weight: 400; }

/* The Ark counts with a stepper, not a bare number box: a +/- pair either
   side of the value, sized for a thumb. */
.tl-step {
  display: flex; align-items: stretch; height: 46px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff; overflow: hidden;
}
.tl-step button {
  flex: none; width: 44px; border: 0; background: #fff; cursor: pointer;
  color: var(--accent); font-size: 21px; font-weight: 700; line-height: 1;
}
.tl-step button:hover { background: var(--accent-soft); color: var(--accent-dark); }
.tl-step input {
  flex: 1; min-width: 0; border: 0; text-align: center; background: #fff;
  font: inherit; font-size: 18px; font-weight: 700; color: var(--ink);
  -moz-appearance: textfield; appearance: textfield;
}
.tl-step input::-webkit-outer-spin-button,
.tl-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tl-step input:focus { outline: none; }
.tl-step:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* a plain text field, for the plan */
.tl-text {
  width: 100%; font: inherit; font-size: 16.5px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 11px 13px;
}
.tl-text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- duration ---------- */
/* Tracks follow the chips. A fixed six left food's five durations with an
   empty sixth column, so the row stopped short of the card edge. */
.tl-dur { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 7px; }
@media (max-width: 620px) { .tl-dur { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); } }
.tl-dur button {
  padding: 11px 2px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff; cursor: pointer; text-align: center; transition: all .12s; font: inherit;
}
.tl-dur button:hover { border-color: #d8cfb4; background: var(--cream); }
.tl-dur button.on { border-color: var(--accent); background: var(--accent-soft); }
.tl-dur .n { display: block; font-size: 21px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.tl-dur button.on .n { color: var(--accent-dark); }
.tl-dur .l { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 3px; }

.tl-plan {
  display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding: 11px 13px;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius-lg); color: var(--ink);
}
.tl-plan b { font-size: 15.5px; font-weight: 800; }
.tl-plan span { font-size: 13.5px; line-height: 1.35; color: var(--ink-soft); }

/* ---------- toggle ---------- */
.tl-toggle { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.tl-toggle__copy { flex: 1; min-width: 0; }
.tl-toggle__copy b { display: block; font-size: 16px; font-weight: 700; color: var(--ink); }
.tl-toggle__copy span { display: block; font-size: 14px; color: var(--ink-soft); line-height: 1.35; }
.tl-switch {
  flex: none; width: 52px; height: 30px; border-radius: var(--radius-pill);
  border: 0; background: #d9d2bf; cursor: pointer; position: relative; transition: background .15s;
}
.tl-switch.on { background: var(--accent); }
.tl-switch i {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.tl-switch.on i { transform: translateX(22px); }

/* ---------- breakdown rows ---------- */
/* Two lines that name one thing, so they are set as one block: inherited
   leading put a whole blank line between a label and its own rate. */
.tl-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.tl-row:last-child { border-bottom: 0; }
.tl-row__lead { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tl-dot { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.tl-row__label { font-size: 17px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.tl-row__rate { font-size: 14px; line-height: 1.25; color: var(--ink-soft); margin-top: 1px; }
.tl-row__val { font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.tl-row__val span { font-size: 14px; font-weight: 400; color: var(--ink-soft); margin-left: 2px; }

/* ---------- gear picks ---------- */
.tl-gear { width: 100%; border-collapse: collapse; }
.tl-gear td { border-bottom: 1px solid var(--line); padding: 11px 0; vertical-align: top; }
.tl-gear tr:last-child td { border-bottom: 0; }
.tl-gear td.job { width: 9.5rem; padding-right: 14px; font-size: 16px; font-weight: 700; color: var(--ink); }
.tl-gear td.job em {
  display: block; font-style: normal; font-weight: 400; font-size: 13.5px;
  color: var(--ink-soft); margin-top: 2px;
}
.tl-gear td.picks { font-size: 16px; line-height: 1.55; color: var(--ink); }
.tl-gear a {
  color: var(--accent-dark); font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 2px;
}
.tl-gear a:hover { color: var(--accent); }

/* ===========================================================
   BUG-OUT BAG CHECKLIST
   -----------------------------------------------------------
   A tick list is the whole input, so the row IS the control:
   the box, the name and the reason are one target, sized for
   a thumb rather than a cursor.
   =========================================================== */
/* ---------- the builder's chips ----------
   Same chip as the duration row, in two arrangements: a single-choice row
   where one wins, and a multi row where each toggles. A chip that carries a
   second line (an explanation) gets the room for it. */
.bg-question { font-family: "Public Sans", Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--ink); text-transform: none; letter-spacing: normal; margin: 0 0 14px; }
.bg-chips { display: grid; gap: 7px; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
.bg-chip {
  padding: 11px 10px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff; cursor: pointer; text-align: center; transition: .12s; font: inherit;
  /* Centred, because the grid makes every chip as tall as the tallest and a
     one-line label next to a two-line one otherwise floats at the top. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
}
/* The browser's default focus ring is blue, which on a rust page reads as a
   third colour nobody chose. Keyboard focus only; a click already shows its
   result by turning the chip on. */
.bg-chip:focus { outline: none; }
.bg-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-chip:focus { outline: none; }
.tl-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bg-chip:hover { border-color: #d8cfb4; background: var(--cream); }
.bg-chip.on { border-color: var(--accent); background: var(--accent-soft); }
.bg-chip__i { font-size: 17px; color: var(--ink-soft); }
.bg-chip.on .bg-chip__i { color: var(--accent-dark); }
/* The tick inherits from the box, which is transparent until it is on. */
.bg-chip__l { font-size: 15.5px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.bg-chip__d { font-size: 13px; font-weight: 400; line-height: 1.2; color: var(--ink-soft); }

/* ---------- group headings inside the list ---------- */
.bg-grp {
  font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); margin: 18px 0 2px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.bg-grp:first-of-type { margin-top: 6px; border-top: 0; padding-top: 0; }

/* A quantity is its own column on the right, not a prefix jammed against
   the name. Tabular figures so the numbers line up down the list. */
.bg-qty {
  flex: none; margin-left: auto; align-self: center;
  font-size: 17px; font-weight: 800; color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}
.bg-qty em { font-style: normal; font-weight: inherit; font-size: inherit; color: inherit; }
.bg-row.on .bg-qty { color: var(--ink-soft); }
.bg-im {
  width: 38px; height: 38px; flex: none; object-fit: contain;
  border-radius: 7px; background: var(--cream);
}

.bg-count {
  float: right; font-weight: 700; letter-spacing: 0;
  color: var(--ink-soft); text-transform: none;
}
.bg-row {
  display: flex; align-items: flex-start; gap: 13px; width: 100%;
  font: inherit; text-align: left; cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--line);
  padding: 11px 2px;
}
.tl-card .bg-row:first-of-type { border-top: 0; }
.bg-row:hover .bg-name { color: var(--accent-dark); }

.bg-box {
  flex: none; width: 26px; height: 26px; margin-top: 1px;
  border: 2px solid var(--line); border-radius: 7px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 14px;
}
.bg-row:hover .bg-box { border-color: var(--accent); }
.bg-row.on .bg-box { background: var(--accent); border-color: var(--accent); color: #fff; }

.bg-txt { min-width: 0; }
.bg-name { display: block; font-size: 16.5px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.bg-note { display: block; font-size: 15px; line-height: 1.35; color: var(--ink-soft); margin-top: 2px; }
/* Ticked items recede: what is left is the list you are still working. */
.bg-row.on .bg-name { color: var(--ink-soft); text-decoration: line-through; }
.bg-row.on .bg-note { opacity: .55; }

.bg-crit {
  display: inline-block; font-style: normal; font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; vertical-align: 2px;
  color: #C92A1A; background: #f7e4e1; border-radius: var(--radius-pill);
  padding: 2px 8px; margin-left: 8px;
}
.bg-row.on .bg-crit { background: var(--cream); color: var(--ink-soft); }

/* ---------- the actions on the plan ----------
   Inside the summary panel, because that panel IS the finished plan. Print
   is the white-on-blue inversion of the page's primary; the download sits
   under it as a plain link, since the blank form is the second choice. */
/* Full width, same as the two buttons under the panel. A centred pill
   above two full-width buttons read as three different systems. */
.tl-hero__act { display: block; margin-top: 18px; }
.tl-hero__print { width: 100%; justify-content: center; }
.tl-hero__print {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-size: 16.5px; font-weight: 700; line-height: 1.2; cursor: pointer;
  background: #fff; color: var(--accent-dark); border: 0;
  border-radius: var(--radius-lg); padding: 12px 24px;
  -webkit-appearance: none; appearance: none;
}
.tl-hero__print:hover { background: #f1f6fb; }
/* The comms plan has no blue panel, so Print sits on the page field and
   takes the page's own colours. */
.tl-hero__act--bare .tl-hero__print { background: var(--accent); color: #fff; }
.tl-hero__act--bare .tl-hero__print:hover { background: var(--accent-dark); }

/* The blank form and Clear, stacked full width below the plan. Both are
   buttons, but Clear throws work away, so it is the quieter of the two. */
.tl-actions { display: grid; gap: var(--tool-stack); }
.tl-actions .tl-btn { width: 100%; justify-content: center; }


/* ---------- foot ---------- */
.tl-foot {
  margin-top: 26px; padding-top: 18px;
  display: flex; justify-content: flex-end;
  border-top: 1px solid var(--line);
}
/* Sits above the form, because the reassurance is worth having before you
   start typing rather than after. */
/* A tinted pill rather than grey text on a grey field: the one sentence a
   reader needs before typing their household into a form should be visible
   without being a panel. Tight to the standfirst above it, with real air
   beneath so it reads as part of the heading, not as the form's first row. */
.tl-privacy {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: fit-content; margin: 18px auto 44px;
  background: var(--accent-soft); color: var(--accent-dark);
  border-radius: var(--radius-pill); padding: 8px 18px;
  font-size: 15.5px; font-weight: 600;
}
.tl-privacy i { flex: none; color: var(--accent); }
/* One height, whether or not the button carries an icon. An icon's line box
   is taller than the label's, so padding alone gave the two buttons in the
   same stack different heights. */
.tl-btn {
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; line-height: 1.2;
  border-radius: var(--radius-lg); padding: 0 19px; min-height: 46px;
  text-decoration: none;
  border: 1px solid transparent; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  -webkit-appearance: none; appearance: none;
}
.tl-btn i { font-size: 16px; line-height: 1; }
.tl-ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.tl-ghost:hover { border-color: var(--accent); color: var(--accent-dark); }
.tl-primary { background: var(--accent); color: #fff; }
.tl-primary:hover { background: var(--accent-dark); }

@media (max-width: 620px) {
  .var-pick { grid-template-columns: 1fr; }
  .tl-page { padding: 26px 0 48px; }
  :root { --tool-gutter: 18px; }
  .tl-privacy { max-width: none; }
  .tl-hero__num .v { font-size: 52px; }
}

/* ===========================================================
   PRINT — the filled plan, and nothing else
   =========================================================== */
/* ===========================================================
   PRINT — the filled plan, as a document
   -----------------------------------------------------------
   Three rules decide everything here.

   1. The ANSWER leads, and it is one band, not a panel. The
      screen hero is a 34pt number in a coloured box the width
      of a column; printed at full width it ate a third of the
      first sheet, and on the checklist it pushed the actual
      list onto page two.
   2. The WORK comes next, in reading order. In the DOM the
      rail precedes the form, which is right on screen and
      backwards on paper, so print reverses them.
   3. Nothing survives that only makes sense with a cursor:
      no steppers, no toggles, no chips, no buttons, and no
      reassurance about where the data is stored.
   =========================================================== */
@media print {
  @page { margin: 14mm 14mm 12mm; }

  /* 3. Screen-only furniture. */
  .topbar, .topbar-mobile, .site-foot, .tl-back-link,
  .tl-actions, .tl-hero__act, .tl-privacy,
  .mix-step, .mix-add, .mix-add__label, .var-pick,
  .tl-step button, .tl-switch,
  .tl-hero__ic, .tl-meter, .tl-hero__empty,
  /* An instruction tells you how to fill the form in. On the filled copy
     the choice has been made, so it is a paragraph of noise above the
     answer. */
  .tl-hint { display: none !important; }

  /* The site field is a screen colour. On paper it is a band of ink across
     the top and bottom of every sheet. */
  html, body { background: #fff !important; }

  /* Chrome drops every background fill when it prints unless the page opts
     in. Without this the comms section bars lose their blue and print as
     grey text with 9pt of padding, which reads as a random indent. The
     downloadable PDFs set it in print-base.css; the site never did. */
  html, body {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .tl-page { background: #fff; padding: 0; }

  /* The print palette, shared with print/print-base.css so a page printed
     from the browser and the downloadable PDF read as one family. */
  .tl-page {
    --pr-head: #1b323b;   /* the section-bar blue */
    --pr-rule: #b3ab99;   /* writing lines, dark enough to photocopy */
    --pr-hair: #d6cfbf;
    --pr-muted: #6b6355;
  }

  /* ---- the masthead ---- */
  .masthead, pln-masthead { background: #fff !important; }
  .masthead {
    padding: 0 0 7pt; margin-bottom: 11pt; text-align: left;
    border-bottom: 2.5pt solid var(--pr-head);
  }
  .masthead h1 { font-size: 21pt; color: var(--pr-head); }
  .masthead p { font-size: 10.5pt; margin: 3pt 0 0; max-width: none; color: var(--pr-muted); }

  /* ---- a section is a blue bar, as in the PDFs ----
     The card border and fill go: the bar is the structure, and a page of
     outlined boxes reads as a screenshot of a web page rather than a sheet
     of paper. */
  .tl-card {
    border: 0; border-radius: 0; background: none;
    margin: 0 0 12pt; padding: 0;
  }
  .tl-card__label {
    font-family: var(--chrome-disp, "Oswald", sans-serif);
    font-weight: 600; font-size: 12pt; letter-spacing: .035em;
    color: #fff; background: var(--pr-head);
    padding: 5pt 9pt; margin: 0 0 8pt; display: block;
  }
  .tl-card__label span { color: rgba(255,255,255,.75); float: right; }

  /* ---- answers sit on writing lines ---- */
  .tl-field__label { font-size: 9.6pt; color: var(--pr-muted); font-weight: 700; }
  .tl-field__label span { font-weight: 400; }
  .tl-text, .tl-step input {
    font-size: 11pt; padding: 2pt 0 3pt; border: 0;
    border-bottom: 0.8pt solid var(--pr-rule); border-radius: 0;
    min-height: 0.235in; text-align: left;
  }

  /* A switch is a control, so it is hidden, which left its question printed
     with no answer at all. Print the answer instead. */
  .tl-toggle__copy b { font-size: 11pt; }
  .tl-toggle__copy span { font-size: 9.6pt; color: var(--pr-muted); }
  .tl-toggle::after {
    content: "No"; font-weight: 700; font-size: 11pt; margin-left: auto;
    border: 1pt solid var(--pr-rule); border-radius: 3pt; padding: 1pt 7pt;
  }
  .tl-toggle:has(.tl-switch.on)::after { content: "Yes"; }
  .tl-container, .tl-body { max-width: none; padding-left: 0; padding-right: 0; }

  /* ---- 2. the work follows the answer ---- */
  /* align-items:start survives from the screen grid rule and shrink-wraps
     the rail to its content, so the summary band stopped mid-page. */
  .tl-layout { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .tl-rail { order: 1; position: static; width: auto; margin: 0; display: block; }
  .tl-main { order: 2; display: block; }
  .tl-card { break-inside: avoid; margin: 0 0 9pt; padding: 9pt 10pt; border-radius: 4pt; }
  .tl-card__label { font-size: 9.5pt; margin-bottom: 5pt; }

  /* ---- 1. the answer, as one band ---- */
  .tl-hero {
    background: #fff !important; color: var(--ink);
    border: 0; border-bottom: 1pt solid var(--line);
    border-radius: 0; padding: 0 0 8pt; margin: 0 0 10pt;
    display: flex; align-items: baseline; gap: 10pt; flex-wrap: wrap;
  }
  .tl-hero__num { display: flex; align-items: baseline; gap: 5pt; margin: 0; }
  .tl-hero__num .v { font-size: 26pt; line-height: 1; color: var(--ink); }
  .tl-hero__num .u { font-size: 11pt; color: var(--ink); }
  .tl-hero__sub { font-size: 10.5pt; color: var(--ink-soft); margin: 0; }
  .tl-hero__chip {
    background: none; color: var(--ink-soft); font-size: 10.5pt;
    padding: 0; margin: 0; backdrop-filter: none;
  }
  .tl-hero__chip::before { content: "\00b7"; margin-right: 6pt; }

  /* ---- rows ---- */
  .tl-row { padding: 4.5pt 0; border-bottom: 0.6pt solid var(--pr-hair); }
  .tl-row__label { font-size: 11pt; }
  .tl-row__rate { font-size: 9pt; }
  .tl-row__val { font-size: 12pt; }

  /* ---- the filled form ---- */
  .tl-step { border: 0; height: auto; }
  .tl-step input { font-size: 12pt; text-align: left; border-bottom: 1px solid var(--line); }
  .tl-text { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 2px 0; font-size: 11pt; }
  .tl-gear a { color: var(--ink); text-decoration: none; }

  /* ---- the storage mix prints as a shopping list ---- */
  .mix-row { padding: 5pt 0; }
  .mix-row__item { gap: 8pt; }
  .mix-row__item img, .mix-row__noimg { width: 34pt; height: 34pt; }
  .mix-row::before { content: attr(data-qty); font-weight: 800; font-size: 12pt; min-width: 34pt; }

  /* A duration row is a chip group too: only the chosen one prints, as a
     word rather than a button. It used to be hidden outright, which left
     Activity Level printing its question with no answer under it. */
  .tl-dur { display: block; }
  .tl-dur button { display: none; }
  .tl-dur button.on {
    display: inline-block; border: 0; background: none; padding: 0;
    font-size: 11pt; font-weight: 700; color: var(--ink);
  }
  .tl-dur button.on .n { display: inline; font-size: 11pt; }
  .tl-dur button.on .l {
    display: inline; font-size: 11pt; color: var(--ink); margin-left: 3pt;
  }

  /* A link out is a screen action. On paper it is a dead end dressed as a
     link, so it keeps the words and loses the colour. */
  .gs__all { display: none; }
  .gs__row, .gs__name, .tl-gear a, .rs-gear {
    color: var(--ink) !important; text-decoration: none;
  }
  .gs__row { break-inside: avoid; }

  /* A card's explanatory sentence is guidance for filling the form in. The
     filled copy does not need it either. */
  .tl-note-inline { display: none; }

  /* ---- a chip group prints as its answer ----
     On screen these are the choice. On paper the choice has been made, so
     only the selected ones print, as plain words rather than as cards that
     look pressable. A multi group (hazards, conditions) prints every one
     that is on, which is exactly the list someone wants to read back. */
  .bg-chips { display: block; }
  .bg-chip { display: none; }
  .bg-chip.on {
    display: inline-block; border: 0; background: none; padding: 0;
    margin: 0 14pt 0 0; font-size: 11pt; font-weight: 700; color: var(--ink);
  }
  .bg-chip.on .bg-chip__i { display: none; }
  .bg-chip.on .bg-chip__l { display: inline; font-size: 11pt; }
  .bg-chip.on .bg-chip__d {
    display: inline; font-weight: 400; font-size: 9.6pt;
    color: var(--pr-muted); margin-left: 5pt;
  }
  /* Nothing chosen is itself worth printing, rather than a blank gap. */
  .bg-chips:not(:has(.bg-chip.on))::after {
    content: "None selected"; font-size: 10pt; color: var(--pr-muted);
  }

  /* ---- the checklist prints as boxes you can tick with a pen ----
     Including the ones already ticked: a printed copy goes in the bag, and
     the greying-out that helps on screen only makes it harder to read. */
  .bg-row { padding: 4.5pt 0; break-inside: avoid; }
  .bg-box {
    border: 1pt solid #555 !important; background: #fff !important;
    color: #111 !important; width: 13pt; height: 13pt; border-radius: 2pt;
  }
  .bg-row:not(.on) .bg-box i { display: none; }
  .bg-row.on .bg-name { text-decoration: none; color: #111; }
  .bg-row.on .bg-note, .bg-row.on .bg-crit { opacity: 1; }
  .bg-name { font-size: 11pt; }
  .bg-note { font-size: 9pt; }
  .bg-crit { background: none; color: #111; border: 0.75pt solid #777; font-size: 8pt; padding: 0 4pt; }

  /* The checklist carries its own progress in its boxes, so the per-category
     tally is a second copy of the same fact and costs half a sheet. */
  .tl-page[data-tool="bugout"] #tl-break { display: none; }
}

/* ---------- the plan's state, the Ark's pattern ----------
   No score and no meter: a list of what is still open, or a tick saying the
   plan is done. A plan is not a percentage of a plan. */
/* The plan has no result rail, so it must also drop the rail COLUMN. Setting
   max-width alone left the 320px track in place and squeezed the form into
   374px, which is why its three-up field rows stacked. */
/* Same width as every other band on the page: one container means one left
   edge. It only drops the rail COLUMN, because a narrower max-width here put
   the cards on a different edge from the heading and the back link. */
@media (min-width: 768px) {
  .tl-layout--single { grid-template-columns: minmax(0, 1fr); }
}
.tl-layout--single .tl-main { order: 0; }

.tl-checks { list-style: none; margin: 0; padding: 0; }
.tl-checks li {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0; font-size: 16.5px; color: var(--ink);
}
.tl-checks i { color: #b9b1a0; font-size: 15px; flex: none; }

.tl-done { display: flex; align-items: flex-start; gap: 13px; }
.tl-done > i { color: var(--rust); font-size: 24px; margin-top: 1px; flex: none; }
.tl-done b { display: block; font-size: 18px; font-weight: 700; color: var(--ink); }
.tl-done span { display: block; font-size: 16.5px; line-height: 1.5; color: var(--ink-soft); margin-top: 3px; }

/* ===========================================================
   COMMS PLANNER — the Ark's cp- layout, value for value
   -----------------------------------------------------------
   From commsPlanner.css: a 960px two-column grid, form left and
   a sticky 340px preview right, carrying a facsimile of the
   two-sided wallet card. White, black ink, 1.5px dashed cut
   line, so what you see is what prints.

   Its accent is INDIGO (#5b63d3). The variable in the Ark is
   called --c-terracotta, but the comms world overrides it with
   --prep-accent, and this is the colour that actually paints.

   One deliberate change: the Ark sets the card's type at 13px,
   12.5px and 10px. Those are print sizes on a screen read by a
   45+ audience, so each is lifted to the floor this site keeps.
   Every proportion, colour and rule is the Ark's.
   =========================================================== */
.tl-page[data-tool="comms"], .tl-layout--comms {
  --c-white: #fffefd;
  --c-cream: #f3efe7;
  --c-sand: #e6e0d6;
  --c-stone: #cfc9bd;
  --c-clay: #8a8378;
  --c-earth: #5c584f;
  --c-brown: #3a423f;
  --c-charcoal: #26302f;
  --c-accent: #5b63d3;
}
.is-comms { --accent: #5b63d3; --accent-soft: rgba(91,99,211,.10); --accent-dark: #4148b8; }


@media (min-width: 768px) {
  
  .tl-layout--comms .tl-main { order: 1; }
  .tl-layout--comms .tl-rail { order: 2; position: sticky; top: calc(var(--nav-h) + 16px); margin-bottom: 0; }
}

/* the Front / Back tag above each card */
.cp-side {
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-earth, #5c584f); margin: 0 0 6px 2px;
}
.cp-card + .cp-side { margin-top: 16px; }

.cp-card {
  background: #fff; color: #1a1a1a;
  border: 1.5px dashed #9a9a9a; border-radius: 12px;
  padding: 16px 17px; box-shadow: 0 10px 30px rgba(0,0,0,.10);
}
.cp-card__h {
  display: flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #111; border-bottom: 1.5px solid #111; padding-bottom: 9px; margin: 0 0 10px;
}
.cp-card__h i { color: var(--c-accent, #5b63d3); }

.cp-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 15px; padding: 7px 0; border-bottom: 1px solid #e4e4e4;
}
.cp-row:last-of-type { border-bottom: 0; }
.cp-row b { font-weight: 700; color: #111; }
.cp-row span { color: #444; text-align: right; }
/* Contact numbers need their full width; let names wrap or move the
   number below the name when the card is too narrow for both columns. */
.cp-row b, .cp-row span { min-width: 0; overflow-wrap: anywhere; }
.cp-row:not(.cp-row--phone) { display: block; line-height: 1.35; }
.cp-row:not(.cp-row--phone) b {
  display: block; margin-bottom: 3px; font-size: 10px; line-height: 1.3;
  letter-spacing: .09em; text-transform: uppercase; color: #6b6355;
}
.cp-row:not(.cp-row--phone) span { display: block; text-align: left; color: #1a1a1a; }
.cp-row--phone { flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 3px; }
.cp-row--phone b { flex: 1 1 120px; }
.cp-row--phone span { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.cp-contact { padding-top: 10px; padding-bottom: 10px; }
.cp-contact__label {
  flex: 0 0 100%; font-size: 10px; line-height: 1.3; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #6b6355;
}



.cp-empty { font-size: 14.5px; line-height: 1.5; color: #666; padding: 6px 0 2px; margin: 0; }

.cp-lyr { font-size: 14.5px; line-height: 1.5; padding: 7px 0; border-bottom: 1px solid #e4e4e4; }
.cp-lyr:last-child { border-bottom: 0; }
.cp-lyr em {
  font-style: normal; font-weight: 800; text-transform: uppercase;
  font-size: 12px; letter-spacing: .05em; color: #666; display: block; margin-bottom: 2px;
}

.cp-note {
  font-size: 14px; color: var(--c-clay, #8a8378);
  margin: 10px 2px 0; text-align: center;
}

/* ===========================================================
   THE COMMS PLAN PRINTS LIKE ITS OWN PDF
   -----------------------------------------------------------
   print/family-communication-plan.html is the design this has
   to match, so the rules below borrow its vocabulary directly:
   a blue bar per section, dashed wallet cards side by side
   across the full width, sand panels, and a footer.

   Side by side is also what kills the empty sheet. One 3.5in
   card alone on US Letter left nine tenths of the page blank.
   Two cards filling the width, with the plan underneath, uses
   it, and it is how the downloadable version already works:
   cut both, tape them back to back.
   =========================================================== */
@media print {
  body:has(.tl-page.is-comms) .topbar,
  body:has(.tl-page.is-comms) .topbar-mobile,
  body:has(.tl-page.is-comms) .site-foot,
  body:has(.tl-page.is-comms) .tl-back-link,
  .tl-page.is-comms .tl-privacy,
  .tl-page.is-comms .tl-actions,
  .tl-page.is-comms .tl-hero__act,
  .tl-page.is-comms #tl-state,
  .tl-page.is-comms #tl-gear-comms,
  .tl-page.is-comms .tl-hint { display: none !important; }

  .tl-page.is-comms {
    --pr-head: #1b323b;    /* the bar blue */
    --pr-rust: #C92A1A;
    --pr-sand: #efeae0;
    --pr-rule: #b3ab99;    /* writing lines, dark enough to photocopy */
    --pr-hair: #d6cfbf;
    --pr-muted: #6b6355;
  }

  /* ---- masthead ---- */
  body:has(.tl-page.is-comms) .masthead {
    border-bottom: 2.5pt solid var(--pr-head);
    padding: 0 0 7pt; margin-bottom: 12pt; text-align: left;
  }
  body:has(.tl-page.is-comms) .masthead h1 { font-size: 21pt; color: var(--pr-head); }
  body:has(.tl-page.is-comms) .masthead p { font-size: 11pt; color: var(--pr-muted); margin: 4pt 0 0; }

  /* ---- the cards, across the full width ---- */
  .tl-page.is-comms .tl-layout { display: flex; flex-direction: column; align-items: stretch; }
  .tl-page.is-comms .tl-rail { order: 1; position: static; width: auto; display: block; margin: 0 0 14pt; }
  .tl-page.is-comms .tl-main { order: 2; display: block; }

  .tl-page.is-comms #tl-out {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16pt 16pt;
    align-items: start;
  }
  .tl-page.is-comms #tl-out > :nth-child(1) { grid-area: 1 / 1; }   /* FRONT caption */
  .tl-page.is-comms #tl-out > :nth-child(2) { grid-area: 2 / 1; }   /* front card */
  .tl-page.is-comms #tl-out > :nth-child(3) { grid-area: 1 / 2; }   /* BACK caption */
  .tl-page.is-comms #tl-out > :nth-child(4) { grid-area: 2 / 2; }   /* back card */
  .tl-page.is-comms #tl-out > :nth-child(5) { grid-area: 3 / 1 / auto / -1; }  /* the instruction */

  .tl-page.is-comms .cp-card {
    width: auto; min-height: 2.05in; box-sizing: border-box;
    margin: 0; padding: 9pt 11pt;
    border: 1.1pt dashed var(--pr-rule); border-radius: 0;   /* the cut line */
    box-shadow: none; break-inside: avoid;
  }
  .tl-page.is-comms .cp-side {
    display: block; font-size: 9.5pt; letter-spacing: .1em; text-transform: uppercase;
    color: var(--pr-muted); margin: 0;
  }
  .tl-page.is-comms .cp-card__h {
    font-size: 10.5pt; letter-spacing: .06em; color: var(--pr-rust);
    border-bottom: 1pt solid var(--pr-hair); padding-bottom: 3pt; margin: 0 0 6pt;
  }
  .tl-page.is-comms .cp-card__h i { display: none; }   /* a webfont glyph is not worth the risk on paper */
  .tl-page.is-comms .cp-row {
    font-size: 9.6pt; padding: 3pt 0; border-bottom: 0.6pt solid var(--pr-hair);
  }
  .tl-page.is-comms .cp-lyr { font-size: 9.6pt; padding: 3pt 0; border-bottom: 0.6pt solid var(--pr-hair); }
  .tl-page.is-comms .cp-lyr em { font-size: 8.4pt; color: var(--pr-muted); margin-bottom: 1pt; }
  .tl-page.is-comms .cp-empty { font-size: 9.6pt; color: var(--pr-muted); }
  .tl-page.is-comms .cp-note {
    display: block; font-size: 9.5pt; color: var(--pr-muted);
    text-align: left; margin: 2pt 0 0; letter-spacing: .04em;
  }

  /* ---- the plan, with the PDF's blue section bars ---- */
  .tl-page.is-comms .tl-main .tl-card {
    break-inside: avoid; border: 0; border-radius: 0;
    background: none; margin: 0 0 13pt; padding: 0;
  }
  .tl-page.is-comms .tl-main .tl-card__label {
    font-family: var(--chrome-disp, "Oswald", sans-serif);
    font-weight: 600; font-size: 12pt; letter-spacing: .035em;
    color: #fff; background: var(--pr-head);
    padding: 5pt 9pt; margin: 0 0 8pt; display: block;
  }
  /* The answers sit on writing lines, so a blank one is still usable with a
     pen. The sand fill marks the pairs that belong together. */
  .tl-page.is-comms .tl-grid { gap: 8pt; }
  .tl-page.is-comms .tl-field__label { font-size: 9.6pt; color: var(--pr-muted); font-weight: 700; }
  .tl-page.is-comms .tl-field__label span { font-weight: 400; color: #8a8273; }
  .tl-page.is-comms .tl-text {
    font-size: 11pt; padding: 2pt 0 3pt; border: 0;
    border-bottom: 0.8pt solid var(--pr-rule); border-radius: 0; min-height: 0.235in;
  }
}



/* ===========================================================
   GEAR PICKS
   -----------------------------------------------------------
   A card like every other on the page. Each row is one item and
   the reason it is on THIS list, which is what makes it a
   recommendation rather than a catalogue.
   =========================================================== */
.gs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.gs__head .tl-card__label { margin-bottom: 0; }
.gs__all {
  font-size: 15.5px; font-weight: 600; color: var(--accent-dark);
  text-decoration: none; white-space: nowrap;
}
.gs__all:hover { text-decoration: underline; }
.gs__all i { font-size: 11px; }

.gs__rows { display: flex; flex-direction: column; margin-top: 12px; }
.gs__row {
  display: block; padding: 11px 0; border-top: 1px solid var(--line);
  text-decoration: none;
}
.gs__row:first-child { border-top: 0; padding-top: 0; }
.gs__name {
  display: block; font-size: 16.5px; font-weight: 600; color: var(--accent-dark);
}
.gs__row:hover .gs__name { text-decoration: underline; }
.gs__why {
  display: block; font-size: 15px; line-height: 1.4; color: var(--ink-soft); margin-top: 2px;
}

/* The breakdown is a dense summary in a 320px rail, so it is tighter than a
   form card and carries nothing after its total. */
.tl-card--break { padding: 14px 16px 16px; }
.tl-card--break .tl-rows tr:first-child td { padding-top: 0; }
.tl-card--break .tl-rows td.v { font-size: 17px; }

/* ===========================================================
   STORAGE SUGGESTIONS
   -----------------------------------------------------------
   One of the three is already chosen and already costed, so the
   page answers the question before it asks one. The quantities
   under it are then editable, because a household that already
   owns two cases should not have to pretend otherwise.
   =========================================================== */
/* Three across, always: they are alternatives, and a 2+1 wrap reads as a
   group of two with an afterthought. Same chip as the duration row above it
   (.tl-dur button) — icon where the number goes, one word where the unit
   goes — because they do the same job and should not look like two systems. */
.var-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 14px; }
.var {
  padding: 11px 2px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff; cursor: pointer; text-align: center; transition: .12s; font: inherit;
}
.var:hover { border-color: #d8cfb4; background: var(--cream); }
.var.is-on { border-color: var(--accent); background: var(--accent-soft); }
.var i { display: block; font-size: 19px; color: var(--ink); line-height: 1.1; }
.var.is-on i { color: var(--accent-dark); }
.var__label { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 5px; }

/* ---------- the chosen mix ---------- */
.mix { border-top: 1px solid var(--line); }
.mix-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.mix-row__item {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
  font: inherit; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 0;
}
.mix-row__item img, .mix-row__noimg {
  width: 56px; height: 56px; flex: none; object-fit: contain;
  border-radius: 8px; background: var(--cream);
}
/* Balanced, so a name does not break after the capacity and strand the
   unit on a line of its own. */
.mix-row__name {
  min-width: 0; overflow-wrap: anywhere;
  font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink);
  max-width: 17rem; text-wrap: balance;
}
.mix-row__item:hover .mix-row__name { color: var(--accent-dark); }

.mix-step { display: flex; align-items: center; gap: 2px; flex: none; }
.mix-step button {
  width: 34px; height: 34px; font: inherit; font-size: 19px; line-height: 1; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; color: var(--accent-dark);
}
.mix-step button:hover { border-color: var(--accent); background: var(--accent-soft); }
.mix-step span { min-width: 2.4rem; text-align: center; font-size: 18px; font-weight: 700; color: var(--ink); }

/* The form column also gets narrow beside the tablet result rail. Let each
   product keep a readable name and put its stepper on a separate row. */
@media (max-width: 420px), (min-width: 768px) and (max-width: 900px) {
  .mix-row { flex-wrap: wrap; }
  .mix-row__item { flex-basis: 100%; }
  .mix-step { margin-left: auto; }
}

.mix-held { font-size: 16px; line-height: 1.4; color: var(--ink-soft); margin: 12px 0 0; }
.mix-held b { color: var(--ink); }

.mix-add__label { font-size: 15px; font-weight: 600; color: var(--ink-soft); margin: 16px 0 0; }
.mix-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mix-add button {
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 7px 14px; color: var(--ink-soft);
}
.mix-add button:hover { border-color: var(--accent); color: var(--accent-dark); }

/* ---------- item detail, opened in place ----------
   A product opens here rather than sending the reader to the gear page and
   losing the plan they were part-way through. The content is read from
   gear.html itself, so there is one source for it. */
.it-back {
  position: fixed; inset: 0; z-index: 95; display: none;
  align-items: center; justify-content: center; padding: 22px;
  background: rgba(35,31,24,.6);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.it-back.open { display: flex; }
.it-modal {
  position: relative; background: var(--card); border-radius: var(--radius-xl);
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  padding: 26px 28px 28px; box-shadow: 0 24px 60px rgba(35,31,24,.42);
}
.it-x {
  position: absolute; top: 12px; right: 14px; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid var(--line); background: #fff;
  color: var(--ink-soft); font-size: 22px; line-height: 1; cursor: pointer;
}
.it-x:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.it-media { text-align: center; margin-bottom: 16px; }
.it-media img { max-width: 170px; max-height: 170px; object-fit: contain; }
.it-modal h3 {
  font-family: var(--disp); font-weight: 600; font-size: 24px; line-height: 1.12;
  text-transform: uppercase; letter-spacing: .02em; color: var(--ink); margin: 0 0 10px;
  padding-right: 40px;
}
.it-desc { font-size: 17px; line-height: 1.5; color: var(--ink); margin: 0 0 14px; }
.it-note {
  background: var(--cream); border-left: 3px solid var(--accent);
  padding: 12px 15px; border-radius: 0 8px 8px 0; margin: 0 0 16px;
  font-size: 16px; line-height: 1.5; color: var(--ink);
}
.it-note b { display: block; font-size: 14px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px; }
.it-opts { list-style: none; margin: 0 0 16px; padding: 0; }
.it-opts li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 16px; }
.it-opts li b { display: block; color: var(--ink); }
.it-opts li span { font-size: 15px; color: var(--ink-soft); }
.it-buy {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-size: 16.5px; font-weight: 700; padding: 12px 22px; border-radius: var(--radius-lg);
}
.it-buy:hover { background: var(--accent-dark); }
.it-loading { text-align: center; color: var(--ink-soft); padding: 30px 0; }

/* Communication planner: small decisions first, optional equipment later. */
.cp-form-section { display: flex; flex-direction: column; gap: 14px; }
.cp-form-section > .tl-card__label, .cp-form-section > .tl-hint { margin: 0; }
.cp-form-section > .tl-card__label { font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--ink); text-transform: none; letter-spacing: normal; }
.cp-form-section textarea { resize: vertical; min-height: 82px; line-height: 1.4; }
.cp-field-group { font-size: 18px; font-weight: 700; line-height: 1.25; margin: 4px 0 0; color: var(--ink); }
.cp-communication > h2, .cp-reference > h2 { font-size: 21px; line-height: 1.2; margin: 0 0 8px; }
.cp-accordion { border: 1px solid var(--line); border-radius: 14px; background: #fff; margin-top: 10px; overflow: hidden; }
.cp-accordion > summary { display: flex; align-items: flex-start; gap: 12px; padding: 17px; cursor: pointer; list-style: none; }
.cp-accordion > summary::-webkit-details-marker { display: none; }
.cp-accordion > summary strong { display: block; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.cp-accordion > summary small { display: block; margin-top: 5px; font-size: 16px; line-height: 1.3; color: #5c584f; }
.cp-accordion > summary i { display: block; flex: 0 0 8px; width: 8px; height: 8px; margin-top: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; color: var(--ink-soft); transform: rotate(-45deg); }
.cp-accordion[open] > summary i { transform: rotate(45deg); }
.cp-accordion > summary > span { flex: 1; min-width: 0; }
.cp-accordion > summary:focus, .cp-subsection > summary:focus { outline: none; }
.cp-accordion > summary:focus-visible, .cp-subsection > summary:focus-visible { background: #f3f0e9; }
.cp-accordion__body { padding: 6px 17px 18px; display: flex; flex-direction: column; gap: 18px; }
.cp-accordion__body .tl-hint { margin: 0; }
.cp-accordion textarea { resize: vertical; line-height: 1.4; min-height: 82px; }
.cp-subsection { border-top: 1px solid var(--line); padding-top: 12px; }
.cp-subsection > summary { font-size: 16px; font-weight: 700; cursor: pointer; }
.cp-subsection > summary small { font-size: 14px; font-weight: 400; color: #6b6355; margin-left: 6px; }
.cp-subsection[open] > :not(summary) { margin-top: 12px; }
.cp-equipment > label { display: flex; align-items: center; gap: 9px; font-size: 16px; line-height: 1.3; cursor: pointer; }
.cp-equipment input[type="checkbox"] { width: 18px; height: 18px; accent-color: #5b63d3; flex-shrink: 0; }
.cp-equipment__fields { margin-top: 12px; }
.cp-equipment__fields[hidden] { display: none; }
.cp-reference__intro { font-size: 14px; line-height: 1.4; color: #6b6355; margin: 0 0 14px; }
.cp-reference .cp-card { border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
.cp-reference .cp-card + .cp-card { margin-top: 14px; }
.cp-reference .cp-card__h { font-size: 12px; letter-spacing: .04em; line-height: 1.4; }
.cp-reference .cp-row { line-height: 1.35; }
.cp-reference .cp-note { text-align: left; line-height: 1.4; }
@media (max-width: 767px) {
  .tl-layout--comms .tl-rail { margin-top: var(--tool-stack); }
}

.bg-summary-title { font-family: "Public Sans", Arial, sans-serif; font-size: 25px; font-weight: 700; line-height: 1.2; margin: 0 0 14px; color: #fff; }

/* A printable-list generator, not a packing-progress dashboard. */
.tl-layout.bg-generator { display: block; max-width: 680px; }
.bg-generator-output { margin-bottom: 24px; }
.bg-generator-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 0 14px; }
.bg-generator-count h2 { margin: 0 0 5px; font: 700 22px/1.25 "Public Sans", Arial, sans-serif; color: var(--ink); }
.bg-generator-count p { margin: 0; font-size: 14px; line-height: 1.35; color: var(--ink-soft); }
.bg-generator-toolbar .bg-print { width: auto; flex-shrink: 0; background: var(--accent); color: #fff; }
.bg-generator-toolbar .bg-print:hover { background: var(--accent-dark); }
.bg-preview { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bg-preview > summary { padding: 12px 0; font-size: 16px; font-weight: 700; cursor: pointer; }
.bg-preview[open] #bg-list { background: var(--card); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.bg-preview-note { font-size: 14px; line-height: 1.35; color: var(--ink-soft); margin: 0 0 12px; }
.bg-preview-list { list-style: none; margin: 0; padding: 0; }
.bg-preview-row { cursor: default; }
.bg-preview-row:hover .bg-name { color: var(--ink); }
.bg-secondary { margin-top: 8px; color: var(--ink-soft); font-size: 13px; }
.bg-secondary > summary { cursor: pointer; padding: 5px 0; }
.bg-secondary-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 8px 0; }
.bg-secondary-actions a, .bg-secondary-actions button { font: inherit; color: var(--ink-soft); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
@media (max-width: 480px) {
  .bg-generator-toolbar { align-items: stretch; flex-direction: column; gap: 12px; }
  .bg-generator-toolbar .bg-print { width: 100%; }
}

.tl-page.is-comms #tl-wallet-print:disabled,
.tl-page.is-comms #tl-print:disabled {
  background: #d6d2ca; border-color: #d6d2ca; color: #625e56;
  cursor: not-allowed; box-shadow: none;
}
.cp-gear { margin-top: 16px; }
/* One consistent disclosure style; distinguish the form from its result. */
.cp-group-heading h2 { margin: 0 0 6px; font-size: 24px; line-height: 1.2; color: var(--ink); }
.cp-group-heading .tl-hint { margin: 0; font-size: 16px; line-height: 1.4; }
.cp-communication { margin-top: 24px; }
.tl-layout--comms .tl-main { gap: 0; }
.tl-layout--comms .tl-rail > .cp-group-heading { margin: 0; }
.tl-layout--comms .tl-rail > .cp-group-heading h2 { margin: 0; }
.tl-layout--comms .cp-gear { margin-top: 24px; padding-top: 16px; }

.tl-page.is-comms .cp-radio-channels, .tl-page.is-comms .cp-short-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cp-radio-channels .tl-field, .cp-short-fields .tl-field { min-width: 0; }
.cp-radio-channels .tl-field__label { line-height: 1.3; }
.cp-radio-channels .tl-field, .cp-short-fields .tl-field { display: flex; flex-direction: column; }
.cp-radio-channels .tl-text, .cp-short-fields .tl-text { margin-top: auto; }

/* Labels identify the answer below them; input surfaces remain visibly editable. */
.tl-page.is-comms .cp-accordion .tl-field__label {
  font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0 0 6px; color: #343129;
}
.tl-page.is-comms .cp-accordion .tl-text {
  background: #faf8f3; border: 1.5px solid #8b8477; border-radius: 6px;
  color: #202b30; font-size: 17px; font-weight: 400; line-height: 1.35;
  padding: 11px 12px; min-height: 46px;
}
.tl-page.is-comms .cp-accordion textarea.tl-text { min-height: 74px; }
.tl-page.is-comms .cp-accordion .tl-text:focus {
  background: #fff; border-color: #4f50bb; box-shadow: 0 0 0 2px #e3e2f8;
}
.tl-page.is-comms .cp-accordion .tl-text::placeholder { color: #746e64; opacity: 1; }
.cp-subsection > summary { padding: 3px 0; line-height: 1.35; }
.cp-subsection[open] > .tl-field { margin-top: 18px; }
.cp-accordion .tl-grid + .tl-grid { margin-top: 0; }

/* Storage planners: enter the household first, then read its result. */
.tl-page:is([data-tool="water"], [data-tool="food"]) .tl-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px;
}
.tl-page:is([data-tool="water"], [data-tool="food"]) .tl-field {
  min-width: 0; display: flex; flex-direction: column;
}
.tl-page:is([data-tool="water"], [data-tool="food"]) .tl-step { margin-top: auto; }
.tl-page:is([data-tool="water"], [data-tool="food"]) .tl-card__label {
  font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: normal;
  text-transform: none; color: var(--ink);
}
@media (max-width: 767px) {
  .tl-page:is([data-tool="water"], [data-tool="food"]) .tl-layout {
    display: flex; flex-direction: column; gap: var(--tool-stack);
  }
}
@media (max-width: 480px) {
  .tl-page:is([data-tool="water"], [data-tool="food"]) .tl-step button { width: 32px; }
  .tl-page:is([data-tool="water"], [data-tool="food"]) .tl-field__label span { font-size: 14px; }
}

/* Shared screen typography for the two storage planners. */
@media screen {
  .tl-page:is([data-tool="water"], [data-tool="food"]) :is(.tl-note-inline, .tl-plan span, .tl-row__rate, .tl-toggle__copy span) {
    font-size: 16px; line-height: 1.3; color: #5c584f;
  }
  .tl-page:is([data-tool="water"], [data-tool="food"]) .tl-note-inline {
    margin: 0 0 14px;
  }
  .tl-page:is([data-tool="water"], [data-tool="food"]) .tl-card__label { margin-bottom: 10px; }
  .tl-page:is([data-tool="water"], [data-tool="food"]) .tl-plan b {
    font-size: 16px; line-height: 1.25; font-weight: 700;
  }
  .tl-page:is([data-tool="water"], [data-tool="food"]) .tl-dur .l {
    font-size: 16px; line-height: 1.25;
  }
}
@media screen {
  .tl-page[data-tool="water"] .tl-dur[data-chips="days"] {
    grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tl-page.is-food .tl-meter__track,
.tl-page.is-food .tl-meter__track i,
.tl-page.is-food .tl-meter__key i {
  outline: none;
  box-shadow: none;
}
@media screen {
  .tl-page[data-tool="food"] .tl-card--break :is(.tl-note-inline, .tl-row__rate) {
    font-size: 14px;
    line-height: 1.25;
  }
}

@media screen {
  .tl-page:is([data-tool="water"], [data-tool="food"]) .tl-field__label { line-height: 1.2; }
  .tl-page:is([data-tool="water"], [data-tool="food"]) .tl-field__label span {
    display: inline; margin-top: 0; font-size: 14px; line-height: 1.2;
  }
}
@media screen {
  .tl-page[data-tool="food"] .gs__why {
    font-size: 16px;
    line-height: 1.3;
    color: #343129;
  }
}