/* Tools section (CR-0153): shared by /tools/ pages, on top of /styles.css. */
.toolgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; margin: 18px 0 26px; }
.toolgrid label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--muted); justify-content: flex-end; }
.toolgrid input, .toolgrid select { font: inherit; font-size: 16px; color: var(--ink); padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); width: 100%; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; font-size: 14px; }
.chip { font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.chip:hover { border-color: var(--accent); }
.oddsrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.odd { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.odd span { font-size: 13px; color: var(--muted); }
.odd strong { font-size: 22px; letter-spacing: -0.01em; }
#odds-result h3, #lt-result h3 { margin-top: 26px; }
.linkbox { display: flex; gap: 10px; align-items: stretch; margin: 10px 0 6px; }
.linkbox input { flex: 1; min-width: 0; font: inherit; font-size: 15px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--soft); }
.ltsteps { padding-left: 22px; margin: 14px 0 18px; }
.ltsteps li { margin-bottom: 10px; }
.hits td { font-size: 14px; vertical-align: top; }
.hits td.ua { word-break: break-word; color: var(--muted); font-size: 13px; }
.who { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.who.you, .who.your_browser { background: #e3f4e8; color: #17663a; }
.who.automated { background: #fdecec; color: #a12626; }
.who.undecided { background: #fff4d9; color: #7a5200; }
.who.captured, .who.dropped { background: #e3f4e8; color: #17663a; }
.who.redirected { background: #fff4d9; color: #7a5200; }
.who.sent { background: #fdecec; color: #a12626; }
.fencecode { margin: 14px 0 26px; }
.fencecode pre { max-height: 560px; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
button.btn { font: inherit; cursor: pointer; }
.oddsrow.three { grid-template-columns: repeat(3, 1fr); }
.oddsrow.three .odd strong { font-size: 18px; }
.bouncebox { margin: 18px 0 22px; }
.bouncebox label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.bouncebox textarea { font: inherit; font-size: 15px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); resize: vertical; }
#b-result h3 { margin-top: 26px; }
#b-notes { margin: -10px 0 20px; color: var(--muted); font-size: 15px; }
td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
@media (max-width: 640px) { .oddsrow, .oddsrow.three { grid-template-columns: 1fr 1fr; } .oddsrow.three { grid-template-columns: 1fr; } .linkbox { flex-direction: column; } }
.bouncebox input.extra { font: inherit; font-size: 15px; color: var(--ink); width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
#t-verdict .muted { font-size: 15px; }
#t-fate { margin: -12px 0 14px; }
#m-verdict .muted { font-size: 15px; }
#m-rows td[rowspan] { font-weight: 600; border-right: 1px solid var(--line); }
.checkline { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); margin: 0 0 10px; }
/* DMARC digest (CR-0260) */
.dd-domains { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 4px; }
.dd-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.dd-head h2 { margin: 0; overflow-wrap: anywhere; }
.dd-weekly { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.dd-record { margin: 12px 0; }
.dd-record th { width: 90px; }
.dd-record code { overflow-wrap: anywhere; }
#d-setup { margin-top: 18px; }
#d-setup.done { border-color: #9fd3b0; background: #f4fbf6; }
.dd-period { margin-top: 26px; }
.chip.on { border-color: var(--accent); background: #eef3fd; }
.dd-advice { list-style: none; padding: 0; margin: 0 0 10px; }
.dd-advice li { border-left: 3px solid var(--accent); padding: 8px 14px; margin-bottom: 8px; background: var(--soft); border-radius: 0 8px 8px 0; }
.dd-advice li.warn { border-color: #c2410c; background: #fff4ed; }
.dd-advice li.good { border-color: #17663a; background: #f4fbf6; }
.table-wrap { overflow-x: auto; }
#d-report { margin-top: 18px; }
@media (max-width: 720px) { .oddsrow { grid-template-columns: repeat(2, 1fr); } }
/* New address checklist (CR-0287) */
.nac-step { margin-top: 30px; }
.nac-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.nac-group { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 12px; margin: 0; }
.nac-group legend { font-weight: 700; font-size: 14px; color: var(--accent); padding: 0 6px; }
.nac-group label { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; padding: 4px 0; cursor: pointer; }
.nac-group input { margin-top: 4px; }
.nac-add { margin: 18px 0 6px; }
.nac-add > label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.nac-addrow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.nac-addrow input, .nac-addrow select { font: inherit; font-size: 15px; color: var(--ink); padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.nac-addrow input { flex: 1; min-width: 180px; }
.nac-table td { vertical-align: top; }
.nac-table td:first-child { color: var(--muted); width: 28px; }
.nac-table .nac-name { display: block; font-weight: 600; }
.nac-table small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.nac-table small.nac-warn { color: #a12626; }
.nac-table input[type=date], .nac-table input[type=text] { font: inherit; font-size: 14px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); max-width: 100%; }
.nac-table input[type=text] { width: 100%; min-width: 120px; }
.nac-table tr.nac-tier td { background: var(--soft); font-size: 14px; color: var(--muted); padding-top: 12px; }
.nac-table tr.nac-tier strong { color: var(--ink); margin-right: 6px; }
.nac-table tr.nac-done .nac-name { color: #17663a; }
.nac-table tr.nac-done .nac-name::before { content: "✓ "; }
.nac-today, .nac-x { font: inherit; font-size: 13px; background: none; border: 0; color: var(--accent); cursor: pointer; padding: 4px 0 0; display: block; }
.nac-x { color: var(--muted); }
.nac-print-head { display: none; }
@media print {
  header.top, footer, .nac-noprint, .nac-picks, .nac-add, .nac-addrs, .nac-step, .hero .lead, .hero .eyebrow, .nac-today, .nac-x { display: none !important; }
  .hero { padding: 0 !important; background: none !important; }
  .nac-print-head { display: block; font-weight: 700; font-size: 18px; }
  .nac-table input { border: 0 !important; padding: 0 !important; }
  .nac-table input[type=text]:placeholder-shown { visibility: hidden; }
  .nac-table tr { break-inside: avoid; }
}
/* Tracking link maker (CR-0326) */
.tl-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.tl-title { font-weight: 700; font-size: 18px; margin: 0 0 8px; overflow-wrap: anywhere; }
.tl-out { margin: 12px 0; }
.tl-out-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 14px; }
.tl-out pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.tl-open { font-size: 14px; }
.tl-preview { border: 1px dashed var(--line); border-radius: 8px; padding: 14px; margin-top: 10px; background: #fff; }

/* Signature maker (CR-0368) */
.sig-grid .wide { grid-column: 1 / -1; }
#s-preview p { overflow-wrap: anywhere; }
#s-preview img { max-width: 100%; height: auto !important; }
/* Gmail POP-ending helper (CR-0225) */
.gpe-form { align-items: end; }
.gpe-form .tool-actions { margin: 0; }
.gpe-error { color: #a12626; font-weight: 600; }
.gpe-msg { font-size: 17px; }
.gpe-bad { color: #a12626; }
.gpe-facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; }
.gpe-ways { display: grid; gap: 14px; margin: 18px 0 8px; }
.gpe-way { border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; background: var(--bg); }
.gpe-way h3 { margin: 0 0 4px; font-size: 18px; }
.gpe-way ol { margin: 8px 0 4px; padding-left: 22px; }
.gpe-way li { margin: 4px 0; }
.gpe-pick { border: 2px solid var(--accent); }
.gpe-risky { border-color: #e2b4b4; }
.gpe-risky .gpe-badge { color: #a12626; }
.gpe-n { display: inline-block; font-size: 12px; font-weight: 700; color: #fff; background: var(--muted); border-radius: 999px; padding: 2px 9px; vertical-align: middle; }
.gpe-pick .gpe-n { background: var(--accent); }
.gpe-badge { font-size: 14px; font-weight: 600; color: var(--accent); margin: 0 0 6px; }
.gpe-table td:first-child { width: 120px; white-space: nowrap; color: var(--ink); }
.gpe-table td:last-child { width: 50px; }
@media print {
  .gpe-noprint, .gpe-form, .gpe-hint, .gpe-ways, #g-summary { display: none !important; }
}
/* Price-change notice planner (CR-0578) */
.pcp-regions { border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px 10px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pcp-regions legend { font-size: 14px; color: var(--muted); padding: 0 6px; }
.toolgrid .pcp-regions label { flex-direction: row; align-items: center; gap: 6px; font-size: 15px; color: var(--ink); }
.toolgrid .pcp-regions input { width: auto; }
.toolgrid textarea { font: 14px/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--ink); padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); width: 100%; box-sizing: border-box; }
.pcp-table td, .pcp-cal td { font-size: 14px; }
.pcp-table td:nth-child(5), .pcp-table td:nth-child(6), .pcp-cal td:first-child { white-space: nowrap; }
.pcp-table th { font-size: 12px; }
.pcp-table small { display: block; color: #a12626; font-size: 12px; white-space: normal; }
.pcp-table tr.pcp-late td { background: #fff4ed; }

/* Dark theme (CR-0742) for the tool pages. The dark variables are in /styles.css; these are the colours this file
   writes out. Each rule starts with :where(html[data-theme="dark"]) so it weighs the same as the light rule it
   replaces and wins only by coming later. Keep the light rules above as they are.
   .tl-preview (signature and tracking-link previews) stays white on purpose: it shows the piece of email as the
   person who gets it will see it, and that HTML carries its own dark text colours. */
:where(html[data-theme="dark"]) .toolgrid input,
:where(html[data-theme="dark"]) .toolgrid select,
:where(html[data-theme="dark"]) .toolgrid textarea,
:where(html[data-theme="dark"]) .linkbox input,
:where(html[data-theme="dark"]) .bouncebox textarea,
:where(html[data-theme="dark"]) .bouncebox input.extra,
:where(html[data-theme="dark"]) .nac-addrow input,
:where(html[data-theme="dark"]) .nac-addrow select,
:where(html[data-theme="dark"]) .nac-table input[type=date],
:where(html[data-theme="dark"]) .nac-table input[type=text] { background: var(--field); }
:where(html[data-theme="dark"]) .chip { background: var(--card); }
:where(html[data-theme="dark"]) .chip:hover { border-color: var(--link); }
:where(html[data-theme="dark"]) .chip.on { border-color: var(--link); background: var(--tint); color: var(--tint-ink); }
:where(html[data-theme="dark"]) .who.you,
:where(html[data-theme="dark"]) .who.your_browser,
:where(html[data-theme="dark"]) .who.captured,
:where(html[data-theme="dark"]) .who.dropped { background: var(--ok-bg); color: var(--ok-ink); }
:where(html[data-theme="dark"]) .who.automated,
:where(html[data-theme="dark"]) .who.sent { background: var(--bad-bg); color: var(--bad-ink); }
:where(html[data-theme="dark"]) .who.undecided,
:where(html[data-theme="dark"]) .who.redirected { background: var(--warn-bg); color: var(--warn-ink); }
:where(html[data-theme="dark"]) #d-setup.done { border-color: #2f6b47; background: #10261a; }
:where(html[data-theme="dark"]) .dd-advice li.warn { border-color: #e0733f; background: #2b1810; }
:where(html[data-theme="dark"]) .dd-advice li.good { border-color: #3fa66b; background: #10261a; }
:where(html[data-theme="dark"]) .nac-group legend,
:where(html[data-theme="dark"]) .nac-today,
:where(html[data-theme="dark"]) .gpe-badge { color: var(--link); }
:where(html[data-theme="dark"]) .nac-table small.nac-warn,
:where(html[data-theme="dark"]) .pcp-table small,
:where(html[data-theme="dark"]) .gpe-error,
:where(html[data-theme="dark"]) .gpe-bad,
:where(html[data-theme="dark"]) .gpe-risky .gpe-badge { color: var(--bad-ink); }
:where(html[data-theme="dark"]) .nac-table tr.nac-done .nac-name { color: var(--ok-ink); }
:where(html[data-theme="dark"]) .tl-preview { color: #1f2430; }
:where(html[data-theme="dark"]) .tl-preview a { color: #2f5bd3; }
:where(html[data-theme="dark"]) .gpe-way { background: var(--card); }
:where(html[data-theme="dark"]) .gpe-risky { border-color: #7a3434; }
:where(html[data-theme="dark"]) .gpe-n { background: #4a5468; }
:where(html[data-theme="dark"]) .pcp-table tr.pcp-late td { background: #2b1810; }
/* Printing from the dark theme (the checklists have a Print button): paper is white, so the daylight colours
   come back for print only. */
@media print {
  html[data-theme="dark"] {
    color-scheme: light;
    --ink: #1f2430; --muted: #5b6270; --line: #e3e6ec; --soft: #f6f7f9; --bg: #ffffff; --accent: #2f5bd3;
    --link: #2f5bd3; --card: #ffffff; --field: #ffffff; --hover: #f6f7f9;
    --tint: #eef3fd; --tint-ink: #1f2430; --tint-line: #c9d6f7;
    --ok-bg: #e3f4e8; --ok-ink: #17663a; --warn-bg: #fff4d9; --warn-ink: #7a5200; --bad-bg: #fdecec; --bad-ink: #a12626;
    --off-bg: #eef0f4; --off-ink: #5b6270;
  }
  :where(html[data-theme="dark"]) .gpe-risky { border-color: #e2b4b4; }
  :where(html[data-theme="dark"]) .pcp-table tr.pcp-late td { background: #fff4ed; }
  /* tick boxes print with the browser's own look, as they do from daylight */
  :where(html[data-theme="dark"]) input:is([type=checkbox], [type=radio]) { background-color: revert; color: revert; border-color: revert; }
}

/* late payment interest calculator (CR-0861) */
.tl-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tl-table th, .tl-table td { text-align: left; padding: 7px 4px; border-top: 1px solid var(--line); }
.tl-table th { font-weight: 500; color: var(--muted); width: 55%; }
.tl-table td { font-variant-numeric: tabular-nums; }