/* Promotion follow-up (inc/promo-followup-ui.php, mu-plugins/md-promo-followup.php). Theme tokens only. */

/* facts box: payout counter + reminder button */
.facts .pf-count{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:600;color:var(--green-ink);text-decoration:none;justify-self:start;line-height:1.35}
.facts .pf-count:hover span{text-decoration:underline}
.facts .pf-count svg{width:18px;height:18px;flex:none}
.facts .pf-remind{justify-content:center;gap:8px}
.facts .pf-remind svg{width:18px;height:18px;flex:none}

/* reminder dialog (reuses .nl-modal) */
.pf-dialog-mark{width:52px;height:52px;flex:none;color:var(--green-ink)}
.pf-dialog .nl-modal-points b{color:var(--ink)}

/* promotion FAQ */
.pf-faq{max-width:820px}
.pf-faq .faq{margin-bottom:.5em}

/* one-click pages */
.lm-done.pf-page{max-width:820px}
.pf-details .btn{justify-self:start}
.pf-details{display:grid;gap:12px;margin:18px 0;padding:16px 18px;background:var(--surface);border:1px solid var(--line)}
.pf-details h2{margin:0;font-size:1.15rem}
.pf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.pf-row{grid-template-columns:1fr}}
.pf-row label{display:grid;gap:4px;font-weight:600;font-size:.92rem}
.pf-row input{padding:10px 12px;border:1px solid var(--muted);border-radius:3px;background:var(--paper);color:var(--ink);font:400 1rem/1.5 var(--f-body)}
.pf-hint{margin:0;font-size:.86rem;color:var(--muted)}
.pf-status{font-size:.92rem;color:var(--green-ink)}
.pf-more{font-size:.95rem}

/* printable checklist */
.pf-list h1{margin:.1em 0 .4em;font-size:clamp(1.5rem,4vw,2.1rem)}
.pf-list h2{font-size:1.15rem;margin:1.4em 0 .5em}
.pf-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 8px;font-size:.95rem;padding:12px 14px;border:2px solid var(--ink);background:var(--surface)}
.pf-facts dt{color:var(--muted)}
.pf-facts dd{margin:0;font-weight:600}
.pf-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:pf}
.pf-steps li{counter-increment:pf;background:var(--surface);border:1px solid var(--line);padding:10px 12px}
.pf-steps label{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;cursor:pointer}
.pf-steps input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--green)}
.pf-steps input:checked+span{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.pf-dates,.pf-warn{margin:0;padding-left:20px;display:grid;gap:4px}
.pf-warn li::marker{color:var(--red)}
.pf-table{width:100%;border-collapse:collapse;font-size:.93rem;background:var(--surface)}
.pf-table th,.pf-table td{border:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:top}
.pf-table th{font:500 .72rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pf-src{margin-top:1.6em;font-size:.82rem;color:var(--muted);overflow-wrap:anywhere}
.pf-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px}
.pf-off{font-size:.88rem;color:var(--muted)}

@media print{
  .site-header,.site-footer,footer,.nl-bar,.nl-modal,#md-search,.cookie-banner,.md-cookie,.pf-noprint,.breadcrumbs{display:none!important}
  body{background:#fff!important;color:#000!important;font-size:12pt}
  .wrap{padding:0!important;max-width:none!important}
  .pf-list{color:#000}
  .pf-facts,.pf-steps li,.pf-table,.pf-table th,.pf-table td{background:#fff!important;border-color:#999!important;color:#000!important}
  .pf-steps li{break-inside:avoid}
  .pf-steps input{-webkit-appearance:none;appearance:none;width:14pt;height:14pt;border:1.5pt solid #000;border-radius:2pt}
  .pf-steps input:checked{background:#000}
  .pf-steps input:checked+span{color:#000;text-decoration:none}
  a{color:#000!important;text-decoration:none!important}
  .eyebrow{color:#444!important}
}

/* Grid items default to min-width:auto, so one wide child (the payout timeline table) stretched the whole
   promotion page past the phone screen. Let the columns shrink; .table-wrap scrolls on its own. */
.promo-head>*{min-width:0}