/* =========================================================================
   CASMEC entry / auth card system — the shared look for the pre-store pages
   (login / register / reset / profile / onboarding). Built to the LOCKED
   visual direction (casmec_visual_direction_locked.html) + the entry-onboarding
   comp stage-1 card. Navy/teal/brass + Manrope/Libre Franklin, self-hosted fonts.
   ========================================================================= */

:root{
  --navy:#1f3a6e;--navy-deep:#16243f;--navy-2:#24467f;--teal:#2f8f8f;
  --brass:#c8893a;--brass-soft:#e0a85c;
  --bg:#e9edf4;--ink:#23262d;--ink-soft:#54575e;--line:#e7e9ef;
  --fn-green:#3f9d5a;--fn-green-bd:#2f7d45;--fn-amber:#e0992b;--fn-red:#c0392b;
}
*{box-sizing:border-box;margin:0;padding:0}
body.entry{font-family:"Libre Franklin",sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;padding:40px 16px 60px}
.entry h1,.entry h2,.entry h3,.entry h4{font-family:"Manrope",sans-serif}
.entry a{color:var(--navy)}

/* progress rail (multi-step entry) */
.entry-seq{max-width:560px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.entry-seq .step{font-family:"Manrope";font-weight:700;font-size:11.5px;color:var(--ink-soft);background:#fff;border:1.5px solid var(--line);border-radius:30px;padding:6px 13px}
.entry-seq .step.on{border-color:var(--navy);color:var(--navy-deep)}
.entry-seq .arr{color:#c2c8d4}

/* card */
.card{max-width:460px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 6px 22px rgba(22,36,63,.08)}
.card.wide{max-width:680px}
.brandbar{background:linear-gradient(135deg,var(--navy-2),var(--navy-deep));padding:18px 22px;color:#fff;display:flex;align-items:center;gap:9px}
.brandbar .mark{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:15px}
.brandbar .nm{font-family:"Manrope";font-weight:800;font-size:17px}
.cbody{padding:24px}
.cbody h3{font-size:19px;font-weight:800;color:var(--navy-deep);margin-bottom:3px}
.cbody h3.sub{font-size:14px;font-weight:700;color:var(--ink-soft);margin:2px 0 0}
.lead{font-size:13px;color:var(--ink-soft);margin-bottom:16px}

/* fields */
label.fl{display:block;font-family:"Manrope";font-weight:700;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-soft);margin:14px 0 6px}
label.fl:first-of-type{margin-top:0}
.fld{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:11px 13px;font-family:"Libre Franklin";font-size:15px;background:#fcfcfd;color:var(--ink)}
.fld:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(31,58,110,.12)}
.fld.error{border-color:var(--fn-red);box-shadow:0 0 0 3px rgba(192,57,43,.08)}
select.fld{appearance:auto}
textarea.fld{resize:vertical;min-height:72px}
.field-help{font-size:11.5px;color:var(--ink-soft);margin:5px 0 0}

/* password show/hide toggle (wrapper + button injected by password_toggle.js) */
.pw-wrap{position:relative;display:block}
.pw-wrap > input{padding-right:42px}
.pw-toggle{position:absolute;top:0;right:0;height:100%;width:40px;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;margin:0;cursor:pointer;color:var(--ink-soft);border-radius:0 9px 9px 0}
.pw-toggle:hover{color:var(--navy)}
.pw-toggle:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.pw-toggle svg{width:18px;height:18px;display:block}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.frow{grid-template-columns:1fr}}
.checkrow{display:flex;align-items:flex-start;gap:9px;margin-top:14px;font-size:13px;color:var(--ink-soft)}
.checkrow input{margin-top:3px}

/* buttons */
.primary{width:100%;font-family:"Manrope";font-weight:800;font-size:14px;background:var(--navy);color:#fff;border:none;border-radius:10px;padding:12px;cursor:pointer;margin-top:18px;text-align:center;text-decoration:none;display:block}
.primary:hover{background:var(--navy-deep);color:#fff}
.primary.brass{background:var(--brass)}.primary.brass:hover{background:#b67a2f}
.ghost{width:100%;font-family:"Manrope";font-weight:700;font-size:13.5px;background:#fff;border:1.5px solid var(--line);color:var(--navy);border-radius:10px;padding:11px;cursor:pointer;margin-top:9px;text-align:center;text-decoration:none;display:block}
.ghost:hover{border-color:var(--navy)}
.btnrow{display:flex;gap:10px;margin-top:18px}
.btnrow .primary,.btnrow .ghost{margin-top:0;flex:1}

.small{font-size:12px;color:var(--ink-soft);text-align:center;margin-top:14px}
.small a{color:var(--navy);font-weight:600;text-decoration:none}
.small a:hover{text-decoration:underline}
.divider{display:flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:11px;font-family:"Manrope";font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:18px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* alerts (these messages can carry pre-built HTML like links — echo raw, don't h()) */
.alert{border-radius:10px;padding:11px 13px;font-size:13px;margin-bottom:14px;line-height:1.5}
.alert.err{background:#fdeceb;border:1px solid #f3c4bf;color:#a23227}
.alert.status{background:#eef4fb;border:1px solid #cfe0f2;color:#2c5487}
.alert.ok{background:#eaf6ee;border:1px solid #bfe3cb;color:#246b3a}
.alert a{color:inherit;font-weight:700}

/* ---- legacy field markup (rendered by CASMECUser output_* methods) restyled in-place within the card.
   These pages no longer load Foundation, so the old .row/.columns wrappers are inert layout divs and we
   just style the bare label/input/select/textarea to match .fl/.fld. No method rewrites needed. ---- */
.cbody label{display:block;font-family:"Manrope";font-weight:700;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-soft);margin:14px 0 6px}
.cbody label.push-button{display:inline-block;text-transform:none;letter-spacing:0;font-size:13px;margin:0 14px 0 4px;color:var(--ink)}
.cbody input[type=text],.cbody input[type=email],.cbody input[type=password],.cbody input[type=tel],.cbody input[type=number],.cbody select,.cbody textarea{
  width:100%;border:1.5px solid var(--line);border-radius:9px;padding:11px 13px;font-family:"Libre Franklin";font-size:15px;background:#fcfcfd;color:var(--ink)}
.cbody input:focus,.cbody select:focus,.cbody textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(31,58,110,.12)}
.cbody input.error,.cbody select.error,.cbody textarea.error{border-color:var(--fn-red);box-shadow:0 0 0 3px rgba(192,57,43,.08)}
.cbody .row{margin:0}
.cbody .columns{padding:0;width:auto}
.cbody p{font-size:12.5px;color:var(--ink-soft);margin:4px 0 0}
.cbody hr{border:none;border-top:1px solid var(--line);margin:18px 0}
.cbody input[type=submit],.cbody .button{width:100%;font-family:"Manrope";font-weight:800;font-size:14px;background:var(--navy);color:#fff;border:none;border-radius:10px;padding:12px;cursor:pointer;margin-top:18px}
.cbody input[type=submit]:hover,.cbody .button:hover{background:var(--navy-deep)}

/* the org pill (onboarding / contact gate) */
.orgpill{display:flex;align-items:center;gap:10px;background:#f4f7fc;border:1px solid #dde6f2;border-radius:10px;padding:11px 13px;margin-bottom:8px}
.orgpill .ic{width:30px;height:30px;border-radius:8px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.orgpill .on{font-family:"Manrope";font-weight:700;font-size:13.5px;color:var(--navy-deep)}
.gate-why{background:#f4f7fc;border-left:3px solid var(--navy);border-radius:7px;padding:10px 12px;font-size:12px;color:var(--navy-deep);margin-bottom:14px;line-height:1.5}