/* PDA Compass — tools.html (A07). Page-specific layout only; components come from css/site.css.
   Fallback values on every var() so the page still reads well if the shell CSS is late. */

.tools-picker { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); padding: 0; margin: var(--space-3, 12px) 0 0; list-style: none; }
.tools .page-hero { padding-bottom: var(--space-4, 16px); }
.tools-device-line { margin: var(--space-3, 12px) 0 0; font-size: 0.95rem; }
.tools-picker a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--line, #cfd6dd); border-radius: 999px; background: var(--surface, #fff);
  color: var(--ink, #1b2430); text-decoration: none; font-weight: 600;
}
.tools-picker a:hover { border-color: var(--accent, #2a6f97); }
.tools-picker a[aria-current="true"] { background: var(--accent-soft, #e3f0f7); border-color: var(--accent, #2a6f97); }
.tools-picker a:focus-visible { outline: 3px solid var(--focus, #ff9f1c); outline-offset: 2px; }

.tool { scroll-margin-top: 8px; } /* the shell's html{scroll-padding-top} already clears the sticky header */
.tool__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px); }
.tool__head h2 { margin: 0; }
.tool__intro { margin: var(--space-2, 8px) 0 var(--space-4, 16px); max-width: var(--measure, 65ch); }
.tool__device-note {
  display: flex; gap: 8px; align-items: flex-start; font-size: 0.9rem; color: var(--ink-muted, #4d5a68);
  margin: 0 0 var(--space-4, 16px);
}
.tool__actions { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin-top: var(--space-4, 16px); }
.tool__status { min-height: 1.5em; margin-top: var(--space-2, 8px); color: var(--ink-muted, #4d5a68); font-size: 0.95rem; }

/* Generic buttons when the shell has not styled .btn yet */
.tools button.btn, .tools a.btn { min-height: 44px; min-width: 44px; }
.tools .btn:focus-visible { outline: 3px solid var(--focus, #ff9f1c); outline-offset: 2px; }

/* One-tap chips (age band in the planner, audience in the letter): visible choices, never a dropdown (docs/UX-CLICKS.md) */
.tools .dp-bands .chip, .tools .lt-aud .chip { min-height: 44px; padding: 8px 14px; font-size: 0.95rem; }
.tools .dp-bands .chip:focus-visible, .tools .lt-aud .chip:focus-visible { outline: 3px solid var(--focus, #ff9f1c); outline-offset: 2px; }
.tools .field__label { display: block; font-weight: 600; margin-bottom: 6px; }

/* "Keep drafts on this device" switch (safeguarding SG3; regression: 2026-10-21-tools-shared-computer).
   The whole label is the 44px target; the input is drawn as a pill with a 44px-tall hit area. */
.tool__keep { margin-top: var(--space-4, 16px); padding: var(--space-2, 8px) var(--space-4, 16px); border: 1px solid var(--line, #cfd6dd); border-radius: var(--radius-m, 12px); background: var(--surface-2, #f4f6f8); }
.tool__keep-switch { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 600; cursor: pointer; }
.tool__keep-switch input { appearance: none; -webkit-appearance: none; flex: none; width: 48px; height: 44px; margin: 0; position: relative; background: transparent; border: 0; border-radius: 999px; cursor: pointer; }
.tool__keep-switch input::before { content: ""; position: absolute; left: 0; top: 9px; width: 48px; height: 26px; border-radius: 999px; background: var(--line-strong, #9aa5b1); transition: background 120ms ease; }
.tool__keep-switch input::after { content: ""; position: absolute; left: 3px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: transform 120ms ease; }
.tool__keep-switch input:checked::before { background: var(--accent, #2a6f97); }
.tool__keep-switch input:checked::after { transform: translateX(22px); }
.tool__keep-switch input:focus-visible { outline: 3px solid var(--focus, #ff9f1c); outline-offset: 2px; }
.tool__keep-note { margin: 0 0 var(--space-2, 8px); font-size: 0.9rem; color: var(--ink-muted, #4d5a68); }
@media (prefers-reduced-motion: reduce) { .tool__keep-switch input::before, .tool__keep-switch input::after { transition: none; } }
@media (forced-colors: active) { .tool__keep-switch input { appearance: auto; -webkit-appearance: auto; width: 24px; } .tool__keep-switch input::before, .tool__keep-switch input::after { content: none; } }

/* ---------- Demand planner ---------- */
.dp-controls { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px) var(--space-3, 12px); align-items: center; margin-bottom: var(--space-4, 16px); }
.dp-bands__label { font-weight: 600; }
.dp-controls label, .tools .field label { display: block; font-weight: 600; margin-bottom: 4px; }
.tools select, .tools input[type="text"], .tools input[type="tel"], .tools textarea {
  width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line, #cfd6dd);
  border-radius: var(--radius-s, 6px); background: var(--surface, #fff); color: var(--ink, #1b2430); font: inherit;
}
.tools textarea { min-height: 72px; resize: vertical; }
.tools select:focus-visible, .tools input:focus-visible, .tools textarea:focus-visible { outline: 3px solid var(--focus, #ff9f1c); outline-offset: 1px; }
.dp-add { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2, 8px); align-items: end; margin: var(--space-3, 12px) 0; }
.dp-baskets { display: grid; gap: var(--space-3, 12px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .dp-baskets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dp-basket {
  border: 1px solid var(--line, #cfd6dd); border-radius: var(--radius-m, 12px); background: var(--surface, #fff);
  padding: var(--space-3, 12px); min-height: 120px;
}
.dp-basket--unsorted { background: var(--surface-2, #f4f6f8); }
.dp-basket--keep { border-top: 5px solid var(--danger, #b23a48); }
.dp-basket--flex { border-top: 5px solid var(--warm, #d98c2b); }
.dp-basket--drop { border-top: 5px solid var(--ok, #2f8f5b); }
.dp-basket h3 { margin: 0 0 4px; font-size: 1.05rem; display: flex; align-items: center; gap: 6px; }
.dp-basket__hint { margin: 0 0 var(--space-2, 8px); font-size: 0.9rem; color: var(--ink-muted, #4d5a68); }
.dp-basket__tips { margin: var(--space-2, 8px) 0 0; padding-left: 1.1em; font-size: 0.9rem; }
.dp-basket__tips a { color: var(--accent, #2a6f97); }
.dp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dp-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px;
  border: 1px solid var(--line, #cfd6dd); border-radius: var(--radius-s, 6px); background: var(--bg, #fafbfc);
}
.dp-item.is-dragging { opacity: 0.5; }
.dp-item__text { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.dp-item__text:focus-visible { outline: 3px solid var(--focus, #ff9f1c); outline-offset: 2px; border-radius: 4px; }
.dp-item__btns { display: flex; gap: 4px; flex-wrap: wrap; }
.dp-item__btns button {
  min-width: 44px; min-height: 44px; padding: 4px 8px; border-radius: var(--radius-s, 6px);
  border: 1px solid var(--line, #cfd6dd); background: var(--surface, #fff); color: var(--ink, #1b2430); font: inherit; font-size: 0.85rem; cursor: pointer;
}
.dp-item__btns button:hover { border-color: var(--accent, #2a6f97); }
.dp-item__btns button:focus-visible { outline: 3px solid var(--focus, #ff9f1c); outline-offset: 2px; }
.dp-basket.is-over { outline: 2px dashed var(--accent, #2a6f97); outline-offset: 2px; }
.dp-summary { margin-top: var(--space-4, 16px); }

/* ---------- Capacity check-in ---------- */
.cap-grid { display: grid; gap: var(--space-3, 12px); grid-template-columns: 1fr; }
@media (min-width: 720px) { .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cap-row { border: 1px solid var(--line, #cfd6dd); border-radius: var(--radius-m, 12px); padding: var(--space-3, 12px); background: var(--surface, #fff); }
.cap-row label { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; margin-bottom: 4px; }
.cap-row output { font-weight: 400; color: var(--ink-muted, #4d5a68); }
.cap-row input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--accent, #2a6f97); }
.cap-row input[type="range"]:focus-visible { outline: 3px solid var(--focus, #ff9f1c); outline-offset: 2px; }
.cap-row__ends { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--ink-muted, #4d5a68); }
.cap-result { margin-top: var(--space-4, 16px); padding: var(--space-4, 16px); border-radius: var(--radius-m, 12px); border: 1px solid var(--line, #cfd6dd); background: var(--surface, #fff); }
.cap-result[data-mode="low"] { border-left: 6px solid var(--warm, #d98c2b); }
.cap-result[data-mode="steady"] { border-left: 6px solid var(--accent, #2a6f97); }
.cap-result[data-mode="good"] { border-left: 6px solid var(--ok, #2f8f5b); }
.cap-result h3 { margin: 0 0 4px; }
.cap-result ul { margin: 8px 0 0; padding-left: 1.2em; }
.cap-meter { height: 10px; border-radius: 999px; background: var(--surface-2, #e9edf1); overflow: hidden; margin: 8px 0; }
.cap-meter > span { display: block; height: 100%; background: var(--accent, #2a6f97); width: 0; transition: width 200ms ease; }
@media (prefers-reduced-motion: reduce) { .cap-meter > span { transition: none; } }

/* ---------- Passport, calm plan and letter forms ---------- */
.form-grid { display: grid; gap: var(--space-3, 12px); grid-template-columns: 1fr; }
@media (min-width: 720px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .field--wide { grid-column: 1 / -1; } }
.field small { display: block; color: var(--ink-muted, #4d5a68); margin-top: 2px; }

/* Preview sheets (what prints) */
.sheet {
  margin-top: var(--space-5, 24px); padding: var(--space-5, 24px); border: 1px solid var(--line, #cfd6dd);
  border-radius: var(--radius-m, 12px); background: var(--surface, #fff); color: var(--ink, #1b2430);
}
.sheet h3 { margin: 0; font-size: 1.6rem; }
.sheet__sub { margin: 2px 0 var(--space-4, 16px); color: var(--ink-muted, #4d5a68); }
.sheet__grid { display: grid; gap: var(--space-3, 12px); grid-template-columns: 1fr; }
@media (min-width: 640px) { .sheet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sheet__box { border: 1px solid var(--line, #cfd6dd); border-radius: var(--radius-s, 8px); padding: 10px 12px; break-inside: avoid; }
.sheet__box h4 { margin: 0 0 4px; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-muted, #4d5a68); }
.sheet__box p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sheet__box--wide { grid-column: 1 / -1; }
.sheet__box--calm-before { border-left: 5px solid var(--ok, #2f8f5b); }
.sheet__box--calm-during { border-left: 5px solid var(--danger, #b23a48); }
.sheet__box--calm-after { border-left: 5px solid var(--accent, #2a6f97); }
.sheet__foot { margin-top: var(--space-4, 16px); font-size: 0.8rem; color: var(--ink-muted, #4d5a68); }
.sheet__empty { color: var(--ink-muted, #4d5a68); font-style: italic; }
.letter-body { white-space: pre-wrap; line-height: 1.6; }

/* ---------- Print ---------- */
@media print {
  #site-header, #site-footer, .skip-link, .tools-picker, .tool__actions, .tool__device-note, .tool__status, .page-hero .lede, .tools-device-line, .callout--safety,
  .dp-controls, .dp-add, .dp-item__btns, .cap-grid, .form-grid, .it-btn, .no-print, .tool__head button { display: none !important; }
  body[data-print] .tool { display: none !important; }
  body[data-print="demand-planner"] #demand-planner, body[data-print="capacity"] #capacity, body[data-print="passport"] #passport,
  body[data-print="calm-plan"] #calm-plan, body[data-print="letter"] #letter { display: block !important; }
  .sheet, .dp-basket, .cap-result { border-color: #999; box-shadow: none; }
  .sheet { margin-top: 0; padding: 0; border: 0; }
  .dp-baskets { grid-template-columns: repeat(3, 1fr); }
  .dp-basket--unsorted { display: none; }
  a[href]::after { content: "" !important; }
  .tool { page-break-after: always; }
}