/* RecapWP Support page — "Ledger" design, page sheet.
 *
 * A faithful port of the design handoff's Support sheet:
 *   docs/design_handoff_marketing_site_Ledger/design_files/site/support-ledger.css
 * Ported VERBATIM so the design is pixel-exact. Local changes live in the marked
 * "THEME ADDITIONS" block at the foot — keep the ported rules untouched so the
 * next design drop can be diffed against this file.
 *
 * Layers ON TOP of ledger.css (the shared Ledger base), which must load first —
 * see the enqueue map in functions.php. Everything here is Support-only: the
 * hero status card, the contact form, the aside cards and the quick guides.
 * Shared blocks (closing band, footer) come from ledger.css.
 */
/* RecapWP Support — Ledger · extends home-ledger.css */

/* ── hero (inside .mast) ── */
.hero-sup{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end;padding:60px 0 60px}
.hero-sup .lead{max-width:600px}
.hero-sup h1{font:500 clamp(38px,4.4vw,56px)/1.08 var(--serif);letter-spacing:-.015em;color:#F5F1E7}
.hero-sup h1 em{font-style:normal;color:color-mix(in oklab,var(--ac) 82%,#fff)}
.hero-sup .sub{font:400 15px/1.75 var(--sans);color:#9AA5AE;margin-top:18px;max-width:520px}
.hero-sup .sub b{color:#D5DCE1;font-weight:600}
/* status card */
.statuscard{width:280px;flex-shrink:0;border:1px solid var(--navy-ln);border-radius:4px;
  background:rgba(255,255,255,.045);padding:20px 22px;position:relative}
.statuscard::before{content:'';position:absolute;top:0;left:20px;right:20px;height:1px;
  background:color-mix(in oklab,var(--pass) 60%,transparent)}
.statuscard .sl{font:600 9px var(--mono);letter-spacing:.2em;color:#6E7B86}
.statuscard .sv{display:flex;align-items:center;gap:10px;font:500 17px var(--serif);color:#F3EFE5;margin-top:12px}
.statuscard .dot{width:9px;height:9px;border-radius:50%;background:var(--pass);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--pass) 22%,transparent);flex-shrink:0}
.statuscard .up{font:11px var(--mono);color:#7FA98F;margin-top:12px;padding-top:12px;border-top:1px solid var(--navy-ln)}

/* ── body ── */
.sup-main{padding:64px 0 40px}
.sup-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}

.sec-head .kick{font:600 10px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ac);
  display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sec-head .kick::after{content:'';height:1px;width:40px;background:color-mix(in oklab,var(--ac) 45%,transparent)}
.sec-head h2{font:500 clamp(24px,2.6vw,32px)/1.18 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.sec-head h2 em{font-style:normal;color:var(--ac)}
.sec-head .sub{font:400 13.5px/1.7 var(--sans);color:var(--mut);margin-top:10px;max-width:520px;text-wrap:pretty}

/* form card */
.form-card{margin-top:26px;background:var(--card);border:1px solid var(--card-ln);border-radius:5px;
  box-shadow:var(--shadow-1);padding:30px 32px 28px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px;margin-top:18px}
.field:first-child,.frow .field{margin-top:0}
.frow{margin-top:18px}
.field label{font:600 10px var(--mono);letter-spacing:.14em;color:var(--hint)}
.field label .req{color:var(--crit);margin-left:3px}
.field input,.field select,.field textarea{font:400 14px var(--sans);color:var(--ink);background:#fff;
  border:1px solid var(--card-ln);border-radius:3px;padding:11px 13px;outline:0;width:100%}
.field textarea{resize:vertical;min-height:132px;line-height:1.65}
.field select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B94A0' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:color-mix(in oklab,var(--ac) 55%,#fff);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--ac) 12%,transparent)}
.field input::placeholder,.field textarea::placeholder{color:var(--hint)}
.form-foot{display:flex;align-items:center;gap:16px;margin-top:22px;padding-top:20px;border-top:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.form-foot .note{font:12px var(--sans);color:var(--mut)}
.form-foot .btn{margin-left:auto}

/* success state */
.form-done{display:none;margin-top:26px;background:var(--card);border:1px solid var(--card-ln);border-radius:5px;
  box-shadow:var(--shadow-1);padding:34px 32px;text-align:center}
.form-done .seal{width:46px;height:46px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:color-mix(in oklab,var(--pass) 10%,#fff);border:1px solid color-mix(in oklab,var(--pass) 30%,#fff);
  color:var(--pass);font:700 20px var(--sans)}
.form-done h3{font:500 22px var(--serif);color:var(--ink)}
.form-done p{font:400 13.5px/1.7 var(--sans);color:var(--mut);margin-top:10px;max-width:440px;margin-left:auto;margin-right:auto;text-wrap:pretty}
.form-done a{font-weight:600}
.is-sent .form-card{display:none}
.is-sent .form-done{display:block}

/* aside cards */
.sup-aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:26px}
.aside-card{background:var(--card);border:1px solid var(--card-ln);border-radius:4px;box-shadow:var(--shadow-1);overflow:hidden}
.aside-card .ah{padding:16px 20px 14px;border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.aside-card .al{font:600 9px var(--mono);letter-spacing:.2em;color:var(--hint)}
.aside-card .at{font:600 15px var(--serif);color:var(--ink);margin-top:6px}
.aside-card .ab{padding:14px 20px 16px}
.aside-card .ab p{font:400 12.5px/1.65 var(--sans);color:var(--mut);text-wrap:pretty}
.aside-card .ab a{font-weight:600}
.aside-card.mail .ah{background:linear-gradient(180deg,var(--navy2),var(--navy));border-bottom:0;position:relative}
.aside-card.mail .ah::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--ac) 80%,#fff) 30%,color-mix(in oklab,var(--ac) 80%,#fff) 70%,transparent)}
.aside-card.mail .al{color:#8D97A1}
.aside-card.mail .at{color:#F3EFE5}
/* include checklist */
.checklist{list-style:none;display:flex;flex-direction:column}
.checklist li{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:12px 20px;
  border-bottom:1px solid color-mix(in oklab,var(--card-ln) 55%,#fff)}
.checklist li:last-child{border-bottom:0}
.checklist .n{font:600 10px var(--mono);color:var(--ac);padding-top:2px}
.checklist .t{font:600 12.5px var(--sans);color:var(--ink)}
.checklist .d{font:11.5px/1.5 var(--mono);color:var(--hint);margin-top:3px}

/* ── quick guides ── */
.guides-sect{padding:20px 0 84px}
.guides-hd{max-width:640px;margin:0 auto 34px;text-align:center}
.guides-hd .kick{font:600 10px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ac);
  display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}
.guides-hd .kick::before,.guides-hd .kick::after{content:'';height:1px;width:36px;background:color-mix(in oklab,var(--ac) 40%,transparent)}
.guides-hd h2{font:500 clamp(24px,2.6vw,32px)/1.2 var(--serif);color:var(--ink)}
.guides-hd h2 em{font-style:normal;color:var(--ac)}
.guides-hd .sub{font:12px var(--mono);letter-spacing:.06em;color:var(--hint);margin-top:12px}
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.guide{background:var(--card);border:1px solid var(--card-ln);border-radius:4px;box-shadow:var(--shadow-1);
  padding:22px 24px 20px;display:flex;flex-direction:column;color:inherit}
.guide:hover{text-decoration:none;border-color:color-mix(in oklab,var(--ac) 45%,var(--card-ln))}
.guide .gn{font:500 22px var(--serif);color:color-mix(in oklab,var(--ac) 75%,#5B4A1E)}
.guide h3{font:600 15px var(--serif);color:var(--ink);margin-top:10px}
.guide p{font:400 12.5px/1.65 var(--sans);color:var(--mut);margin-top:8px;flex:1;text-wrap:pretty}
.guide .go{font:600 11px var(--sans);letter-spacing:.02em;color:var(--ac);margin-top:16px;display:flex;align-items:center;gap:6px}
.guides-ft{text-align:center;margin-top:28px;font:12px var(--mono);letter-spacing:.06em;color:var(--hint)}

@media (max-width:1080px){
  .hero-sup{grid-template-columns:1fr;gap:32px}
  .statuscard{width:100%;max-width:340px}
  .sup-grid{grid-template-columns:1fr;gap:36px}
  .sup-aside{position:static}
  .guides{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════════
   THEME ADDITIONS — everything above this line is the verbatim design port.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── WP admin bar ─────────────────────────────────────────────────────────
 * .sup-aside is position:sticky (top:26px) — the first sticky element in the
 * Ledger design. Per the theme convention every sticky top offset needs a
 * matching admin-bar rule, or the aside tucks under the fixed admin bar for
 * logged-in users. Mirrors foundation.css's 32px desktop / 46px ≤782px pattern.
 * The selector is a compound on the single <body> (`body.admin-bar .sup-aside`,
 * never `.admin-bar body …`), and this sheet only loads on Support, so no page
 * class is needed to scope it.
 */
body.admin-bar .sup-aside{top:calc(26px + 32px)}
@media screen and (max-width:782px){
  body.admin-bar .sup-aside{top:calc(26px + 46px)}
}

/* ── form validation + error surface ──────────────────────────────────────
 * The design has NO error UI: its prototype only paints red borders via inline
 * styles, and its "success" is faked client-side. The real form posts to
 * admin-ajax.php and the server can legitimately answer with a validation
 * error, an expired nonce, a rate-limit (5/hour per IP) or a network failure —
 * all of which a person must be able to read and act on. So this adds the
 * missing surface, in the Ledger idiom (crit red, mono label, 3px radius).
 *
 * Invalid fields are marked with [aria-invalid] rather than the prototype's
 * inline el.style.borderColor: same red border, but it also tells a screen
 * reader the field is the problem, and it can be cleared by removing one
 * attribute instead of fighting an inline style.
 */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:var(--crit)}
.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus{border-color:var(--crit);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--crit) 12%,transparent)}

.form-err{display:none;margin-top:18px;padding:12px 14px;border-radius:3px;
  font:500 12.5px/1.6 var(--sans);color:var(--crit);
  background:color-mix(in oklab,var(--crit) 7%,#fff);
  border:1px solid color-mix(in oklab,var(--crit) 28%,#fff)}
.form-err.on{display:block}

/* The submit button while the request is in flight. */
.form-foot .btn[disabled]{opacity:.65;pointer-events:none}