/* planner wing styles. Loaded after style.css and wings.css (shared tokens and components live there).
   The single-screen planner ("the distance ruler"), and the folded plan view shared by /planner, /trip and /group.
   Only brand tokens, no new colours, no shadows; every class is prefixed pl-. The script sets no styles: every
   visual state is a class (the CSP is style-src 'self'). Logical properties throughout, so English mirrors Hebrew. */

.pl { margin-block: 4px 56px; }
.pl-narrow { max-width: 44rem; margin-bottom: 56px; }
body.pl-open .page-head { padding-block: 16px 0; }
body.pl-open .page-head p { display: none; }
body.pl-open .page-head h1 { font-size: 1.25rem; color: var(--text-2); margin: 0; }

/* ---------- the count and the ruler ---------- */
.pl-ruler-wrap { margin-block: 4px 28px; }
.pl-count { position: relative; margin: 0 0 6px; min-height: 3rem; }
.pl-count-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.pl-count-n { font-family: var(--serif); font-weight: 600; font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.pl-count-w { color: var(--text-2); }
.pl-count-of { color: var(--muted); }
.pl-delta { font-family: var(--sans); font-weight: 400; font-size: 0.875rem; color: var(--text-2); border: 1px solid var(--axis); border-radius: var(--radius); padding: 0 6px; white-space: nowrap; }
/* the data did not arrive: the sentence and the button stand where the count would be, on the first screen */
.pl-count-fail { align-items: center; gap: 8px 16px; }
.pl-count-fail .pl-count-w { flex: 1 1 14rem; color: var(--text); }

/* A measuring ruler from Tel Aviv: one tick per destination, nearest first. A tick stands while its city meets the
   conditions and shrinks to a stub when a condition removes it. Height says it, colour only repeats it. */
.pl-ticks { display: flex; align-items: stretch; height: 48px; border-bottom: 2px solid var(--rule); }
.pl-tick { flex: 1 1 0; min-width: 0; position: relative; }
.pl-tick::before {
  content: ""; position: absolute; bottom: 0; left: 50%; width: 2px; margin-left: -1px; height: 5px; background: var(--axis);
  transition: height 160ms ease-out, background-color 160ms ease-out, opacity 160ms ease-out;
}
.pl-tick.on::before { height: 22px; background: var(--text); }
.pl-tick.top::before { height: 32px; width: 3px; margin-left: -1.5px; background: var(--accent); }
.pl-tick.top::after {
  content: attr(data-r); position: absolute; bottom: 34px; left: 50%; width: 14px; margin-left: -7px; text-align: center;
  font-family: var(--serif); font-weight: 600; font-size: 0.75rem; line-height: 1; color: var(--accent);
}
/* neighbours among the three leaders: the later numeral steps up so the two do not touch */
.pl-tick.top + .pl-tick.top::after { bottom: 46px; }
.pl-tick.top + .pl-tick.top + .pl-tick.top::after { bottom: 34px; }
.pl-ticks { margin-top: 12px; }
.pl-tick.gain::before { height: 22px; background: repeating-linear-gradient(to top, var(--accent) 0 3px, transparent 3px 6px); }
.pl-tick.lose::before { opacity: 0.35; }
.pl-hours { display: flex; height: 22px; }
.pl-hc { flex: 1 1 0; min-width: 0; position: relative; display: flex; justify-content: center; }
.pl-hc-0 { justify-content: flex-start; }
.pl-hc-m::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 4px; background: var(--axis); }
.pl-hl { flex: none; white-space: nowrap; padding-top: 5px; font-size: 0.75rem; line-height: 1.3; color: var(--muted); }
.pl-hc-2 .pl-hl { display: none; }
.pl-hc-2::before { display: none; }

/* ---------- layout ---------- */
.pl-side { min-width: 0; }
.pl-main { min-width: 0; margin-top: 28px; }

/* ---------- questions and chips ---------- */
.pl-q { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.pl-q > legend { padding: 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
.pl-hint { color: var(--muted); font-size: 0.875rem; line-height: 1.5; margin: 2px 0 0; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pl-chip {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 8px 12px;
  border: 1px solid var(--axis); border-radius: var(--radius); background: transparent; color: var(--text);
  font: inherit; font-size: 0.9375rem; line-height: 1.3; cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; transition: background-color 100ms, color 100ms;
}
.pl-chip:hover { border-color: var(--text); }
/* selected: ink fill and a check mark, never colour alone. The mark takes the room of the padding it replaces, so
   the chip keeps its width and nothing on the line moves. */
.pl-chip.on { background: var(--text); color: var(--bg); border-color: var(--text); padding-inline: 4px 6px; }
.pl-chip.on > .pl-chip-t::before {
  content: ""; display: inline-block; box-sizing: border-box; width: 6px; height: 11px; margin-inline: 2px 6px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg);
}
.pl-chip.dis { color: var(--muted); border-style: dashed; cursor: not-allowed; }
.pl-chip.dis:hover { border-color: var(--axis); }
.pl-chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
@supports not selector(:has(a)) {
  .pl-chip:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
}
.pl-chip-n {
  margin-inline-start: 8px; padding-inline-start: 8px; border-inline-start: 1px solid var(--axis);
  font-family: var(--serif); font-weight: 600; font-variant-numeric: tabular-nums;
}
.pl-chip-n.zero { color: var(--muted); }
.pl-chip.on .pl-chip-n.zero { color: inherit; }
/* "more months" is a working button: a solid box with a plus. Dashed is kept for what is switched off. */
.pl-more { color: var(--text-2); }
.pl-more-p { margin-inline-end: 6px; font-weight: 600; }
.pl-x { margin-inline: 8px 6px; font-size: 1.125rem; line-height: 1; }

/* ---------- fold-outs: conditions, a known destination, dropped cities, the days ---------- */
.pl-d > summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding-block: 8px; cursor: pointer; list-style: none;
  font-weight: 600;
}
.pl-d > summary::-webkit-details-marker { display: none; }
.pl-d > summary::before { content: "+"; flex: none; width: 1em; text-align: center; font-weight: 600; color: var(--text-2); }
.pl-d[open] > summary::before { content: "−"; }
.pl-d > summary:hover { background: var(--surface-2); }
.pl-cond { border-block: 1px solid var(--line); }
.pl-cond > summary { flex-wrap: wrap; row-gap: 0; }
.pl-cond-t { flex: 1 1 auto; }
.pl-cond-s { font-weight: 400; font-size: 0.9375rem; color: var(--text-2); }
.pl-cond-in { padding-block: 4px 16px; }
.pl-cond-in > .pl-hint { margin: 0 0 16px; }
.pl-cond-in .pl-q { margin-bottom: 16px; }
.pl-cond-in .pl-q > legend { font-size: 0.9375rem; }
.pl-reset { margin: 4px 0 0; }
.pl-know { border-bottom: 1px solid var(--line); }
.pl-know-in { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; padding-block: 4px 16px; }
.pl-know-l { display: grid; gap: 4px; flex: 1 1 12rem; min-width: 0; font-weight: 600; font-size: 0.9375rem; }
.pl-know-l select {
  font: inherit; font-weight: 400; color: var(--text); background: var(--bg); border: 1px solid var(--muted);
  border-radius: var(--radius); padding: 8px 10px; min-height: 44px; width: 100%; max-width: 100%;
}

/* ---------- the list ---------- */
.pl-list-h {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px;
  border-top: 2px solid var(--rule); padding-top: 10px; margin: 0 0 2px; font-size: 1.375rem; line-height: 1.25;
}
.pl-list-n { font-family: var(--sans); font-weight: 400; font-size: 0.9375rem; color: var(--text-2); }
/* Headings that receive the focus from the script (after a loosening, when a plan opens): someone working with
   the keyboard sees where the focus went (the usual ring); after a tap or a click there is no ring. */
.pl-list-h:focus:not(:focus-visible), .pl-help-t:focus:not(:focus-visible), .pl-plan-t:focus:not(:focus-visible) { outline: none; }
.pl-list { list-style: none; margin: 0; padding: 0; }
.pl-row { margin: 0; border-bottom: 1px solid var(--line); }
.pl-row-a {
  position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; column-gap: 8px; align-items: start;
  min-height: 72px; padding: 14px 4px; color: var(--text); text-decoration: none;
}
.pl-row-near .pl-row-a { grid-template-columns: minmax(0, 1fr) auto; }
.pl-row-a:hover { background: var(--surface-2); color: var(--text); }
.pl-row-a:focus-visible { outline-offset: -3px; }
.pl-rank { font-family: var(--serif); font-weight: 500; font-size: 2rem; line-height: 1; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pl-row-b { display: grid; gap: 3px; min-width: 0; }
.pl-row-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 0 12px; }
.pl-row-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.pl-city { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; line-height: 1.25; }
.pl-ctry { color: var(--text-2); line-height: 1.3; }
.pl-why { color: var(--text-2); font-size: 0.9375rem; line-height: 1.45; }
.pl-price-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.pl-price { font-family: var(--serif); font-weight: 600; font-size: 1.0625rem; }
.pl-best { color: var(--text-2); font-size: 0.9375rem; }
.pl-notes { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.pl-note { color: var(--text-2); font-size: 0.875rem; line-height: 1.45; }
.pl-miss { display: inline-block; font-size: 0.875rem; line-height: 1.5; color: var(--text-2); border: 1px solid var(--axis); border-radius: var(--radius); padding: 0 6px; }
.pl-fit { flex: none; display: inline-flex; flex-direction: column; align-items: flex-end; margin-top: 4px; font-size: 0.875rem; line-height: 1.3; white-space: nowrap; }
.pl-fit::after { content: ""; display: block; height: 2px; margin-top: 3px; background: var(--text); width: 20px; }
.pl-fit-2::after { width: 40px; }
.pl-fit-3::after { width: 64px; }
.pl-chev { flex: none; align-self: center; width: 9px; height: 9px; margin-inline: 6px 4px; border: solid var(--muted); border-width: 0 0 2px 2px; transform: rotate(45deg); }
[dir="ltr"] .pl-chev { transform: rotate(-135deg); }
.pl-chev-b, [dir="ltr"] .pl-chev-b { margin-inline: 3px 6px; border-color: currentColor; }
.pl-chev-b { transform: rotate(-135deg); }
[dir="ltr"] .pl-chev-b { transform: rotate(45deg); }
.pl-skel .pl-row { height: 72px; }
.pl-skel .pl-row::before { content: ""; display: block; width: 45%; height: 12px; margin-top: 20px; background: var(--surface-2); }
.pl-all { margin: 16px 0; }
.pl-price-note { margin-top: 16px; max-width: 40rem; }
.pl-cc { margin: 0 0 12px; }
.pl-fail { margin-block: 8px 24px; }
.pl-undo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0; padding: 4px 0 4px 0;
  border-block: 1px solid var(--line); color: var(--text-2); font-size: 0.9375rem;
}
.pl-undo > span { flex: 1 1 12rem; }

/* ---------- few and zero: never a dead end ---------- */
.pl-help { border-top: 3px solid var(--text); padding-top: 12px; margin-block: 20px 24px; }
.pl-help-t { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; line-height: 1.25; margin: 0 0 8px; }
.pl-help p { margin: 0 0 8px; }
.pl-loosens { display: grid; gap: 8px; margin-block: 12px 20px; max-width: 34rem; }
.pl-loosen { width: 100%; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 10px 14px; text-align: start; }
.pl-loosen-a { font-weight: 600; }
.pl-loosen-b { color: var(--text-2); font-size: 0.9375rem; }
.pl-near-t { font-family: var(--sans); font-weight: 600; font-size: 1.0625rem; margin: 16px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }

/* ---------- dropped from the list ---------- */
.pl-drop { margin-top: 16px; border-block: 1px solid var(--line); }
.pl-drop-g { padding-block: 4px 12px; }
.pl-drop-g p { margin: 0 0 8px; color: var(--text-2); font-size: 0.9375rem; line-height: 1.55; }
.pl-drop-g strong { color: var(--text); }

/* ---------- the bar at the thumb (phones) ---------- */
.pl-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: 56px;
  padding: 6px 16px calc(6px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 2px solid var(--rule);
}
.pl-mini { flex: none; display: flex; align-items: flex-end; width: 100px; height: 14px; border-bottom: 1px solid var(--rule); }
.pl-mt { flex: 1 1 0; min-width: 0; position: relative; height: 100%; }
.pl-mt::before { content: ""; position: absolute; bottom: 0; left: 50%; width: 1px; height: 3px; background: var(--axis); transition: height 160ms ease-out; }
.pl-mt.on::before { height: 10px; background: var(--text); }
.pl-mt.top::before { height: 13px; background: var(--accent); }
.pl-bar-t { flex: 1 1 8ch; min-width: 8ch; margin: 0; font-size: 0.9375rem; line-height: 1.3; }
.pl-bar .btn { flex: 0 1 auto; padding-inline: 12px; }
/* a narrow or enlarged screen (320 px is 400% zoom on a laptop): the words come before the little ruler */
@media (max-width: 420px) { .pl-mini { width: 60px; } }
@media (max-width: 379px) { .pl-mini { display: none; } }
/* Focus is never hidden under the bar: the page keeps the bar's real height free (the script measures it and
   sets --pl-bar; 72 px until it has). */
html:has(.pl-bar:not([hidden])) { scroll-padding-bottom: calc(var(--pl-bar, 72px) + 12px); }

/* ---------- the plan ---------- */
.pl-planbox { max-width: 44rem; }
.pl-plan { border-top: 0; padding-top: 0; }
.pl-back { margin: 8px 0 4px; }
.pl-back a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; }
.pl-sum { margin: 0 0 12px; color: var(--text-2); font-size: 0.9375rem; }
.pl-plan-h { border-top: 3px solid var(--text); padding-top: 10px; }
.pl-plan-h .label { margin: 0; letter-spacing: 0.04em; }
.pl-plan-t { font-family: var(--serif); font-size: clamp(1.75rem, 1.5rem + 1.4vw, 2.25rem); line-height: 1.15; margin: 0 0 8px; }
.pl-plan-h .lede { margin: 0 0 6px; color: var(--text-2); font-size: 1.0625rem; }
.pl-plan-h .pl-note { margin: 0 0 4px; }
.pl-plan .notice { margin-block: 12px; }
.pl-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 16px 0 12px; border-block: 1px solid var(--line); }
.pl-facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; min-width: 0; padding: 12px 12px 12px 0; padding-inline: 0 12px; }
.pl-facts > div:nth-child(even) { padding-inline: 12px 0; border-inline-start: 1px solid var(--line); }
.pl-facts > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
.pl-facts dt { color: var(--muted); font-size: 0.8125rem; line-height: 1.4; font-weight: 400; }
.pl-facts dd { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 1.5rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.pl-facts .score { font-family: var(--sans); font-size: 1.125rem; }
.pl-fact-a { position: relative; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.pl-fact-a::after { content: ""; width: 8px; height: 8px; margin-inline-start: 10px; border: solid var(--muted); border-width: 0 0 2px 2px; transform: rotate(45deg); }
[dir="ltr"] .pl-fact-a::after { transform: rotate(-135deg); }
@media (min-width: 600px) {
  .pl-facts { grid-template-columns: repeat(4, 1fr); }
  .pl-facts > div, .pl-facts > div:nth-child(even) { padding-inline: 12px; border-inline-start: 1px solid var(--line); border-top: 0; }
  .pl-facts > div:first-child { padding-inline-start: 0; border-inline-start: 0; }
}
.pl-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 12px 4px; }
.pl-actions .btn { padding-inline: 14px; }
.pl-actions .btn[disabled] { border-style: dashed; color: var(--muted); background: transparent; cursor: default; }
.pl-status { margin: 4px 0; min-height: 0; font-weight: 400; font-size: 0.9375rem; }
.pl-status:empty { display: none; }
.pl-plan .pl-sec { border-top: 1px solid var(--line); padding-top: 12px; margin-block: 20px; }
.pl-sec p { margin: 0 0 8px; }
.pl-sec-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-bottom: 4px; }
.pl-plan .pl-sec-h h3 { margin: 0; }
.pl-tools { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.pl-tools .btn { padding-inline: 12px; font-size: 0.9375rem; }
.pl-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pl-links .link { display: inline-flex; align-items: center; min-height: 44px; }
.pl-wait { margin-block: 16px 20px; }
.pl-wait .notice { margin-block: 0 12px; }
.pl-wait-t { color: var(--text-2); margin: 0 0 8px; }
.pl-skel-day { height: 44px; border-bottom: 1px solid var(--line); }
.pl-skel-day::before { content: ""; display: block; width: 40%; height: 10px; margin-top: 17px; background: var(--surface-2); }
.pl-day { border-bottom: 1px solid var(--line); }
.pl-days { border-top: 1px solid var(--line); margin-bottom: 8px; }
.pl-day > summary { font-weight: 400; align-items: baseline; padding-block: 10px; }
.pl-day-n { flex: none; font-weight: 600; white-space: nowrap; }
.pl-day-s { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-2); }
.pl-day[open] > summary .pl-day-s { white-space: normal; overflow: visible; }
/* the second part of a long trip, behind one line */
.pl-week2 > summary { font-weight: 600; }
.pl-week2-in { border-top: 1px solid var(--line); }
.pl-week2-in > .pl-day:last-child { border-bottom: 0; }
.pl-week2 { border-bottom: 1px solid var(--line); }
.pl-items { list-style: none; margin: 0; padding: 0 0 10px; padding-inline-start: calc(1em + 10px); }
.pl-it { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 0; padding-block: 2px; min-height: 44px; border-top: 1px dotted var(--line); }
.pl-it-t { flex: 1 1 12rem; min-width: 0; }
.pl-it-h { color: var(--muted); font-size: 0.875rem; white-space: nowrap; }
.pl-it-c { color: var(--text-2); font-size: 0.875rem; }
.pl-it-free, .pl-it-move, .pl-it-arrive, .pl-it-depart { color: var(--text-2); }
.pl-it-highlight .pl-it-t { font-weight: 600; }
.pl-map { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-size: 0.9375rem; }
.pl-it-tools { display: inline-flex; gap: 6px; }
.pl-cost-t { font-size: 1.0625rem; }
.pl-cost-t strong { font-family: var(--serif); font-size: 1.25rem; }
.pl-cost-all { display: block; color: var(--text-2); }
.pl-cost-c { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 12px; }
.pl-cost-c .pl-q { margin: 0; }
.pl-cost-c .pl-chips { margin-top: 0; }
.pl-step { display: inline-flex; align-items: center; gap: 8px; }
.pl-step-l { color: var(--text-2); font-size: 0.9375rem; margin-inline-end: 4px; }
.pl-step-b {
  min-width: 44px; min-height: 44px; border: 1px solid var(--axis); border-radius: var(--radius); background: transparent;
  color: var(--text); font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.pl-step-b:hover { border-color: var(--text); }
.pl-step-b[disabled] { color: var(--muted); border-style: dashed; cursor: default; }
.pl-step-v { min-width: 2ch; text-align: center; font-family: var(--serif); font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.pl-cost-3 { color: var(--text-2); }
.pl-plan .pl-cost-err { margin-block: 0 12px; }
.pl-cost-busy { margin: 0 0 12px; }
.pl-cost .pl-d { border-block: 1px solid var(--line); margin-bottom: 8px; }
.pl-fold { border-bottom: 1px solid var(--line); }
.pl-plan .pl-fold:first-of-type { border-top: 1px solid var(--line); }
.pl-fold > :not(summary) { margin-inline-start: calc(1em + 10px); }
.pl-fold .facts { margin: 0 0 12px; }
.pl-fold .facts dt:first-child { margin-top: 0; }
.pl-fold .checklist { margin: 0 0 12px; padding-inline-start: 1.2em; }
.pl-en { unicode-bidi: isolate; }
.pl-nudges { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 8px 12px; }
.pl-nudges .btn { padding-inline: 14px; }
.pl-nudge .link { display: inline-flex; align-items: center; min-height: 44px; }
.plan.pl-plan h3 { margin: 0 0 6px; }

/* ---------- the group page: the same question, once per traveller ---------- */
.pl-group .pl-sec { border-top: 1px solid var(--line); padding-top: 12px; margin-block: 20px; }
.pl-group > .pl-sec:first-of-type { border-top: 3px solid var(--text); }
.pl-g-from { margin: 0 0 16px; color: var(--text-2); }
.pl-g-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 16px 0 8px; font-family: var(--serif); font-size: 1.25rem; line-height: 1.25; }
.pl-sec > .pl-g-h:first-child { margin-top: 0; }
.pl-g-copy { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-g-copy input { flex: 1 1 14rem; min-width: 0; }
.pl-g-who, .pl-g-diff { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--line); }
.pl-g-who li, .pl-g-diff li { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; padding-block: 8px; border-bottom: 1px solid var(--line); }
.pl-g-who span, .pl-g-v { color: var(--text-2); }
.pl-group h3 { margin: 16px 0 6px; font-size: 1.0625rem; }
.pl-g-save { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.pl-g-save .status { margin: 0; }

/* ---------- desktop: questions beside the list ---------- */
@media (min-width: 720px) {
  .pl-hc-2 .pl-hl { display: inline; }
  .pl-hc-2::before { display: block; }
}
@media (min-width: 900px) {
  .pl-count-n { font-size: 4rem; }
  .pl-count { min-height: 4rem; }
  .pl-cols { display: grid; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); gap: 40px; align-items: start; }
  /* The questions flow with the page. With the conditions open the column is about two laptop screens tall, and a
     box that scrolls by itself inside the page hid half of it (the wheel worked only with the pointer on the box). */
  .pl-side { padding-inline: 4px; }
  /* What stays in view instead is the head of the list, with the count and how far the last tap moved it. */
  .pl-main { margin-top: 0; align-self: stretch; }
  .pl-list-h { position: sticky; top: 0; z-index: 5; background: var(--bg); padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 0; }
  html:has(.pl-list-h) { scroll-padding-top: 72px; }
  .pl-bar { display: none; }
  html:has(.pl-bar:not([hidden])) { scroll-padding-bottom: 0; }
}
/* a window tall enough for every question keeps them beside the list while it scrolls */
@media (min-width: 900px) and (min-height: 1560px) {
  .pl-side { position: sticky; top: 16px; }
}

/* ---------- forced colours (Windows contrast themes): the ruler and the fit rules are drawn with backgrounds,
   which such a theme removes. They are given system colours, so height and length still carry the meaning. ---------- */
@media (forced-colors: active) {
  .pl-tick::before, .pl-mt::before, .pl-fit::after, .pl-hc-m::before { forced-color-adjust: none; background: CanvasText; }
  .pl-tick.off::before, .pl-mt.off::before { background: GrayText; }
  .pl-tick.top::before, .pl-mt.top::before { background: Highlight; }
  .pl-tick.gain::before { background: repeating-linear-gradient(to top, Highlight 0 3px, Canvas 3px 6px); }
  .pl-chip.on { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .pl-skel .pl-row::before, .pl-skel-day::before { forced-color-adjust: none; background: GrayText; }
}

/* ---------- paper: the answer, not the controls ---------- */
@media print {
  .pl-side, .pl-bar, .pl-nudge, .pl-it-tools, .pl-tools, .pl-actions, .pl-back, .pl-cost-c, .pl-all, .pl-undo, .pl-map, .pl-g-me, .pl-g-copy { display: none !important; }
  .pl-list-h { position: static; }
  .pl-tick::before, .pl-mt::before { transition: none; }
}