/* Shared look for the suite's own pages. Patriotic default (Fred, 2026-10-13): federal navy,
   flag red, cool paper; Merriweather headings with Public Sans text. */
:root{
  --paper:#f5f6f9; --surface:#ffffff; --ink:#18213a; --muted:#56607a; --line:#d9dde7;
  --navy:#1b2a4a; --red:#b22234; --red-soft:#fbe9eb; --gold:#c9a227;
  --ok:#1d6b45; --ok-bg:#e5f3ec; --warn:#7a5a00; --warn-bg:#fbf1d6; --focus:#2f6fd6;
  --f-display:"Merriweather", Georgia, "Times New Roman", serif;
  --f-body:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root{
  --paper:#0f1424; --surface:#182036; --ink:#e8ebf3; --muted:#a3abc0; --line:#2c3652;
  --navy:#1f3060; --red:#e0525f; --red-soft:#3a1a22; --gold:#d8b448;
  --ok:#7fd3a5; --ok-bg:#16332a; --warn:#ecc865; --warn-bg:#3a3018; --focus:#7aa7ff; color-scheme:dark }}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:16px/1.55 var(--f-body)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--f-display);line-height:1.2;margin:0;text-wrap:balance}
.wrap{max-width:1040px;margin:0 auto;padding-inline:16px}
.mast{background:var(--navy);color:#fff}
.mast .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:12px;flex-wrap:wrap}
.brand{display:flex;gap:10px;align-items:center;color:#fff;text-decoration:none;font-family:var(--f-display);font-weight:900;font-size:18px}
.brand svg{width:26px;height:26px}
.stripe{height:6px;background:repeating-linear-gradient(90deg,#b22234 0 40px,#fff 40px 52px)}
.mast nav{display:flex;gap:12px;align-items:center;font-size:14px;flex-wrap:wrap}
main{padding-block:28px 56px}
.btn{font:inherit;font-weight:600;font-size:15px;border-radius:6px;padding:9px 16px;border:2px solid transparent;cursor:pointer;text-decoration:none;display:inline-block}
.btn-red{background:var(--red);color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-line{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-sm{padding:4px 10px;font-size:13px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px;max-width:540px}
.panel h1{font-size:24px;margin-bottom:6px}
.sub{color:var(--muted);margin:0 0 18px}
.field{display:grid;gap:4px;margin-bottom:14px}
.field label{font-weight:600;font-size:14px}
.field input,.field select{font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);width:100%}
.hint{font-size:13px;color:var(--muted);margin:0}
.err{background:var(--red-soft);color:var(--ink);border:1px solid var(--red);border-radius:6px;padding:10px 12px;font-size:14px;margin:0 0 14px}
.ok{background:var(--ok-bg);border-radius:6px;padding:10px 12px;font-size:14px;margin:0 0 14px}
.note{border-left:4px solid var(--gold);background:var(--paper);padding:10px 14px;font-size:14px;margin:14px 0;border-radius:0 6px 6px 0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:4px;padding:2px 8px;white-space:nowrap}
.tag.free{color:var(--ok);background:var(--ok-bg)} .tag.paid{color:var(--ink);background:var(--line)}
.tag.soon,.tag.unverified,.tag.sample{color:var(--warn);background:var(--warn-bg)}
.tag.suspended,.tag.closed{color:var(--red);background:var(--red-soft)} .tag.active{color:var(--ok);background:var(--ok-bg)}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.tool{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.tool.off{background:transparent;border-style:dashed}
.tool .top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.tool h3{font-size:16px}
.tool .foot{margin-top:auto;font-size:14px}
.tool a{font-weight:600;color:var(--ink)}
.jbar{border-radius:10px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;color:#fff}
.jbar img{height:76px;width:auto;max-width:100%}
.jbar .jname{font-family:var(--f-display);font-weight:900;font-size:22px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs a{font-weight:600;padding:8px 12px;color:var(--muted);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red)}
.tbl{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:560px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
tr:last-child td{border-bottom:none}
td select{font:inherit;font-size:14px;padding:4px 6px;border:1px solid var(--line);border-radius:5px;background:var(--paper);color:var(--ink)}
.confirm{margin-top:14px;background:var(--red-soft);border:1px solid var(--red);border-radius:8px;padding:14px;font-size:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sec-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.sec-h h2{font-size:21px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;font-size:14px;max-width:calc(100% - 32px)}
.vh{position:absolute;left:-9999px}
@media (max-width:720px){.grid2{grid-template-columns:1fr}}
dialog.box{border:1px solid var(--line);border-radius:10px;padding:24px;background:var(--surface);color:var(--ink);width:calc(100% - 32px);max-width:440px}
dialog.box::backdrop{background:rgba(15,20,36,.55)}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px;font:15px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:12px 16px;background:var(--paper);border-radius:6px;margin:0 0 14px;list-style:none}
.qr{background:#fff;padding:6px;border-radius:6px;display:inline-block;line-height:0;margin:8px 0}
.qr svg{width:200px;height:200px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all}
.steps{padding-left:20px;margin:0}
.steps li{margin-bottom:14px}

/* Privacy line under public pages (task 30, 2026-10-18). */
.privacy-line { max-width: 70ch; margin: 28px auto; padding: 0 16px; font-size: 13px; color: #5a6475; text-align: center; }
.privacy-line a { color: inherit; }

/* Suite page-width standard (task 75, Fred 11-05): the header runs the full screen width with
   24px sides, like Poll Worker Management and the Task Tracker; the tool itself (one form and
   its preview) stays centered but may use up to 1440px. It used to stop at 1180px (curbside
   1040px), which left the header's logo floating mid-screen on a wide monitor. */
.wrap { max-width: 1440px; padding-left: 24px; padding-right: 24px; }
.mast .wrap { max-width: none; }
@media (max-width: 640px) { .wrap { padding-left: 12px; padding-right: 12px; } }
/* GAP 6 WCAG 2.1 AA check (11-08): the privacy line's fixed grey (#5a6475) is 3.1:1 on the dark page;
   it uses the page's muted color instead (same change as the account site's suite.css). */
.privacy-line { color: var(--muted, #5a6475); }