/* /help pages (app/routers/help.py): large type, plain layout, prints cleanly. */
:root { --ink:#16202b; --muted:#4a5663; --accent:#c2410c; --accent-soft:#fff3eb; --blue:#0b57d0; --line:#d8dee6; --bg:#ffffff; --card:#f7f9fb; --good:#1f6f3a; --good-soft:#eaf6ee; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--ink); font: 21px/1.6 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; overflow-wrap: break-word; }
main { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
header.top { text-align:center; padding: 8px 0 20px; border-bottom: 3px solid var(--line); margin-bottom: 24px; }
header.top img { width: 120px; height:auto; }
h1 { font-size: 34px; line-height:1.25; margin: 10px 0 6px; }
.sub { color: var(--muted); font-size: 21px; margin: 0; }
h2 { font-size: 28px; margin: 44px 0 12px; padding: 10px 16px; background: var(--card); border-left: 8px solid var(--blue); border-radius: 6px; }
h3 { font-size: 24px; margin: 0 0 8px; line-height: 1.3; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 14px; padding-left: 28px; } li { margin-bottom: 8px; }
.callout { padding: 14px 18px; border-radius: 10px; margin: 14px 0; border: 2px solid; }
.callout.tip { background:#eef5ff; border-color:#9cc0f5; }
.callout.important { background: var(--accent-soft); border-color:#f3a77a; }
.callout.help { background: var(--good-soft); border-color:#8fcca3; }
.step { display:flex; gap: 16px; align-items:flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.num { flex: 0 0 52px; height:52px; border-radius:50%; background: var(--blue); color:#fff; font-weight:800; font-size: 26px; display:flex; align-items:center; justify-content:center; }
.content { flex: 1; min-width: 0; }
figure { margin: 14px 0 6px; }
figure img { display:block; width:100%; height:auto; border: 2px solid var(--line); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.ring { display:inline-block; min-width: 34px; height:34px; padding: 0 6px; border-radius: 17px; background:#e8590c; color:#fff; font-weight:800; font-size:19px; line-height:34px; text-align:center; vertical-align: 2px; }
.btnlike { display:inline-block; padding: 2px 12px; border-radius:8px; background:#1565c0; color:#fff; font-weight:700; white-space:nowrap; }
.btnlike.plain { background:#fff; color:var(--ink); border:2px solid #9aa5b1; }
.addr { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; background:#f1f3f5; padding: 2px 8px; border-radius:6px; word-break: break-all; }
nav.toc { background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 16px 20px; }
nav.toc ol { margin: 6px 0 0; } nav.toc a { color: var(--blue); }
.need { display:grid; grid-template-columns: 1fr; gap: 6px; }
.big-phone { font-size: 30px; font-weight: 800; color: var(--good); white-space: nowrap; }
footer { margin-top: 40px; padding-top: 16px; border-top: 3px solid var(--line); color: var(--muted); font-size: 18px; text-align:center; }
@media (max-width: 560px) { body { font-size: 20px; } h1 { font-size: 29px; } h2 { font-size: 24px; }
  .step { display:block; } .num { width: 44px; height: 44px; font-size: 22px; float:left; margin: 0 12px 4px 0; } .content h3 { padding-top: 6px; min-height: 44px; } .content > :not(h3) { clear: left; } }
figure img { cursor: zoom-in; }
.zoom { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 10; overflow: auto; display: none; padding: 56px 8px 16px; }
.zoom.on { display: block; } .zoom img { display:block; max-width: none; width: 100%; height:auto; background:#fff; border-radius: 8px; }
.zoom button { position: fixed; top: 10px; right: 10px; font: 700 20px Arial; padding: 8px 16px; border-radius: 22px; border: 0; background:#fff; color:#111; }
.hint { color: var(--muted); font-size: 17px; margin: 0 0 4px; }
@media print { .zoom, .hint { display:none !important; } }
@media print { body { font-size: 14pt; } main { max-width: none; padding: 0; } figure, .callout, li { break-inside: avoid; } h3 { break-after: avoid; } figure img { max-height: 7.2in; width: auto !important; max-width: 100% !important; } h2 { break-after: avoid; } figure img { box-shadow:none; } nav.toc { display:none; } }
/* /help: the search box and the topic list */
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom: 8px; font-size: 19px; }
.topbar a { color: var(--blue); font-weight: 600; }
.search { margin: 22px 0 10px; }
.search label { display:block; font-weight:700; margin-bottom:8px; font-size: 22px; }
.search input { width:100%; font-size: 22px; padding: 16px 18px; border: 3px solid #9aa5b1; border-radius: 14px; background:#fff; color: var(--ink); }
.search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(11,87,208,.18); }
.topics { list-style:none; padding:0; margin: 18px 0 0; display:grid; gap: 14px; }
.topics li { margin:0; }
.topic { display:block; padding: 20px 22px; border: 2px solid var(--line); border-radius: 14px; text-decoration:none; color: var(--ink); background: #fff; }
.topic:hover, .topic:focus { border-color: var(--blue); box-shadow: 0 2px 10px rgba(11,87,208,.12); outline: none; }
.topic b { display:block; font-size: 24px; color: var(--blue); margin-bottom: 4px; }
.topic span { color: var(--muted); }
.none { display:none; margin-top: 16px; }
/* the example welcome email, drawn live with this agency's details */
.mail { border: 2px solid var(--line); border-radius: 12px; overflow: hidden; background:#fff; font: 16px/1.5 -apple-system, "Segoe UI", Arial, sans-serif; margin: 14px 0 6px; }
.mail .bar { background:#f6f8fa; border-bottom:1px solid #e1e6ec; padding: 10px 16px; font-weight:700; color:#334; }
.mail .row { display:flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #eef1f4; align-items: baseline; }
.mail .row.new { background:#f3f8ff; outline: 4px solid #e8590c; outline-offset: -5px; }
.mail .row .who { flex: 0 0 34%; font-weight: 700; } .mail .row .muted { color:#778; }
.mail .msg { padding: 18px 22px; } .mail .subj { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.mail .from { color:#445; font-size: 14px; margin-bottom: 14px; }
.mail p { margin: 0 0 12px; }
.mail .hl { outline: 4px solid #e8590c; outline-offset: 2px; border-radius: 4px; margin-left: 6px; word-break: break-all; }
.mail a { color:#1a5fd0; }
@media (max-width: 560px) { .mail .row { display:block; } .mail .row .who { display:block; } }
figure img { cursor: zoom-in; }
.zoom { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 10; overflow: auto; display: none; padding: 56px 8px 16px; }
.zoom.on { display: block; } .zoom img { display:block; max-width: none; width: 100%; height:auto; background:#fff; border-radius: 8px; }
.zoom button { position: fixed; top: 10px; right: 10px; font: 700 20px Arial; padding: 8px 16px; border-radius: 22px; border: 0; background:#fff; color:#111; }
.hint { color: var(--muted); font-size: 17px; margin: 0 0 4px; }
@media print { .zoom, .hint { display:none !important; } }