/* ============================================================================
   my-account.styles.css — page-specific styling for /my-account/ (.sub-main).
   FRONTEND-ONLY. Layered ON TOP of home.styles.css, so the shared foundation
   (tokens --ink/--red/--amber/--cream/--gold-hi, fonts, nav, footer, .wrap,
   .acmarq/.actrack marquee, .totop back-to-top) already exists. This file only
   adds the account page and namespaces everything under .sub-main.

   Keeps the approved Friday design + navy/red/amber system. Three views live in
   one page, switched by JS:
     auth      signed out: sign in / create account / forgot / reset / verify
     checkout  signed in: order summary + payment method + result states
     dash      signed in: profile, account, requests, completed work, membership
   Frontend only — no auth, session, membership or payment exists. The future
   backend states (payment results, active/overdue/expired, request & work
   detail, review) are rendered but hidden, shown only via the invisible ?state=
   preview switch documented in my-account.scripts.html.
   ============================================================================ */

/* ---- local design tokens (fall back to the shared palette) ---------------- */
.sub-main{
  --sub-navy:var(--ink,#0A1F4D);
  --sub-blue:var(--cream,#E5EDF8);
  --sub-red:var(--red,#C8102E);
  --sub-amber:var(--amber,#ECB84C);
  --sub-line:#adbdd8;
  --sub-ink:#1a2438;
  --sub-muted:#5a6478;
  --sub-panel:#fff;
  background:var(--sub-blue);
  color:var(--sub-ink);
}
.sub-main .wrap{max-width:1160px;margin:0 auto;padding:0 clamp(18px,3.4vw,44px)}

/* ============================ HERO (navy, centred) ======================== */
.sp-hero{position:relative;background:var(--sub-navy);color:#fff;overflow:hidden;
  padding:clamp(104px,12vh,138px) 0 clamp(34px,4.6vw,58px);text-align:center}
.sp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 130% at 88% -14%,rgba(236,184,76,.20),transparent 55%)}
.sp-hero .wrap{position:relative;z-index:1}
.sp-crumb{font-family:'PlexMono',ui-monospace,monospace;font-size:.78rem;letter-spacing:.04em;
  color:rgba(255,255,255,.62);margin:0 0 18px}
.sp-crumb a{color:rgba(255,255,255,.72);text-decoration:none}
.sp-crumb a:hover{color:#fff;text-decoration:underline}
.sp-crumb [aria-current="page"]{color:var(--sub-amber)}
.sp-eyebrow{font-family:'PlexMono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.2em;
  font-size:.74rem;font-weight:700;color:var(--sub-amber);margin:0 0 10px}
.sp-hero h1{font-family:'Fraunces',Georgia,serif;font-weight:300;
  font-size:clamp(2.3rem,5.4vw,3.7rem);line-height:1.03;letter-spacing:-.015em;margin:0;color:#fff}
.sp-lead{margin:16px auto 0;max-width:64ch;font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.62;color:rgba(255,255,255,.82)}

/* ---- spinner (in submit buttons) ---------------------------------------- */
@keyframes sp-spin{to{transform:rotate(360deg)}}
.sp-spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;display:none}

/* ============================== SHARED SHELL ============================== */
.acct-shell{padding:clamp(26px,3.4vw,46px) 0 clamp(40px,5vw,70px)}
.acct-view[hidden]{display:none!important}

/* generic buttons (compact / block / ghost variants) */
.acct-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;font-size:.95rem;
  border-radius:999px;padding:12px 22px;cursor:pointer;text-decoration:none;border:1px solid transparent;
  transition:background .18s,color .18s,opacity .18s,transform .18s}
.acct-btn.primary{background:var(--sub-red);color:#fff}
.acct-btn.primary:hover{background:var(--gold-hi,#E01B30)}
.acct-btn.ghost{background:transparent;color:var(--sub-navy);border-color:var(--sub-navy)}
.acct-btn.ghost:hover{background:var(--sub-navy);color:#fff}
.acct-btn.block{width:100%}
.acct-btn[disabled]{opacity:.55;cursor:default}
.acct-btn.is-loading .sp-spin{display:inline-block;animation:sp-spin .7s linear infinite}

/* ============================ AUTH (signed out) ========================== */
.auth-wrap{max-width:560px;margin:0 auto}
.auth-card{background:var(--sub-panel);border:1px solid var(--sub-line);border-radius:18px;padding:clamp(24px,3vw,38px);
  box-shadow:0 24px 54px -38px rgba(10,31,77,.45)}

/* return-from-gate banner ("you're signing in to subscribe to …") */
.acct-planbar{display:flex;align-items:flex-start;gap:11px;background:var(--sub-blue);border:1px solid var(--sub-line);
  border-radius:13px;padding:13px 15px;margin:0 0 20px;font-size:.92rem;line-height:1.5;color:var(--sub-navy)}
.acct-planbar[hidden]{display:none}
.acct-planbar b{font-weight:800}
.acct-planbar-ic{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--sub-navy);color:#fff;margin-top:1px}
.acct-planbar-ic svg{width:15px;height:15px}

.auth-tabs{display:flex;gap:6px;background:var(--sub-blue);border:1px solid var(--sub-line);border-radius:12px;padding:5px;margin:0 0 22px}
.auth-tabs button{flex:1;font:inherit;font-weight:700;font-size:.94rem;color:var(--sub-navy);background:transparent;border:0;border-radius:8px;
  padding:10px 12px;cursor:pointer;transition:background .15s,color .15s}
.auth-tabs button[aria-selected="true"]{background:var(--sub-panel);color:var(--sub-navy);box-shadow:0 6px 16px -10px rgba(10,31,77,.5)}
.auth-panel[hidden]{display:none}
.auth-panel h2{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:-.02em;
  color:var(--sub-navy);margin:0 0 6px}
.auth-panel .auth-sub{margin:0 0 20px;color:var(--sub-muted);line-height:1.55;font-size:.96rem}

/* form primitives */
.acct-field{margin:0 0 15px}
.acct-field label{display:block;font-weight:700;font-size:.88rem;color:var(--sub-navy);margin:0 0 6px}
.acct-field .req{color:var(--sub-red)}
.acct-field input,.acct-field select,.acct-field textarea{width:100%;font:inherit;font-size:.98rem;color:var(--sub-ink);
  background:#fff;border:1px solid var(--sub-line);border-radius:10px;padding:12px 14px;transition:border-color .15s,box-shadow .15s}
.acct-field input:focus,.acct-field select:focus,.acct-field textarea:focus{outline:none;border-color:var(--sub-navy);
  box-shadow:0 0 0 3px rgba(10,31,77,.14)}
.acct-field input[aria-invalid="true"]{border-color:var(--sub-red);box-shadow:0 0 0 3px rgba(200,16,46,.12)}
.acct-field .hint{font-size:.8rem;color:var(--sub-muted);margin:6px 0 0;line-height:1.45}
.acct-field .err{font-size:.8rem;color:var(--sub-red);margin:6px 0 0;font-weight:600}
.acct-field .err:empty{display:none}
.acct-pw-wrap{position:relative}
.acct-pw-wrap input{padding-right:48px}
.acct-pw-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;color:var(--sub-muted);background:transparent;border:0;border-radius:8px;cursor:pointer;
  transition:color .15s,background .15s}
.acct-pw-toggle:hover{color:var(--sub-navy);background:var(--sub-blue)}
.acct-pw-toggle:focus-visible{outline:2px solid var(--sub-navy);outline-offset:1px}
.acct-pw-toggle svg{width:19px;height:19px;display:block}
.acct-row{display:flex;gap:14px;flex-wrap:wrap}
.acct-row>*{flex:1;min-width:150px}
.acct-check{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;color:#374155;line-height:1.5;margin:0 0 15px}
.acct-check input{width:auto;flex:none;margin-top:3px}
.acct-check a{color:var(--sub-red);font-weight:600}
.auth-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:-4px 0 16px}
.auth-link{font:inherit;font-size:.88rem;font-weight:700;color:var(--sub-red);background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.auth-link:hover{text-decoration:underline}
.auth-alt{margin:18px 0 0;text-align:center;font-size:.9rem;color:var(--sub-muted)}
.auth-alt button{font:inherit;font-weight:700;color:var(--sub-red);background:none;border:0;cursor:pointer;padding:0}
.auth-alt button:hover{text-decoration:underline}

/* a form-level status / notice line */
.acct-formnote{border-radius:11px;padding:12px 15px;font-size:.9rem;line-height:1.5;margin:0 0 16px;display:none}
.acct-formnote.show{display:block}
.acct-formnote.info{background:var(--sub-blue);border:1px solid var(--sub-line);color:var(--sub-navy)}
.acct-formnote.ok{background:rgba(20,120,70,.1);border:1px solid rgba(20,120,70,.3);color:#12784a}
.acct-formnote.err{background:rgba(200,16,46,.08);border:1px solid rgba(200,16,46,.3);color:#a00c22}
.acct-formnote b{font-weight:700}

.acct-submit{margin-top:4px}
.acct-legal{font-size:.78rem;color:var(--sub-muted);margin:16px auto 0;line-height:1.5;text-align:center;max-width:52ch}
.acct-legal a{color:var(--sub-red);font-weight:600}

/* (removed: no status strip needed in the finished UI) */

/* ============================ CHECKOUT (honest) ========================== */
.acct-co-head{margin:0 0 clamp(18px,2.4vw,26px)}
.dash-eyebrow{font-family:'PlexMono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;
  color:var(--sub-red);margin:0 0 6px;font-weight:700}
.acct-co-head h2{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:clamp(1.5rem,2.8vw,2.1rem);
  letter-spacing:-.02em;color:var(--sub-navy);margin:0}

.acct-co-grid{display:grid;grid-template-columns:minmax(0,1fr) 1.35fr;gap:clamp(18px,2.6vw,30px);align-items:start}

/* order summary */
.acct-summary{background:var(--sub-panel);border:1px solid var(--sub-line);border-radius:16px;
  padding:clamp(20px,2.4vw,26px);box-shadow:0 18px 44px -38px rgba(10,31,77,.4);position:sticky;top:20px}
.acct-summary h3{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:1.05rem;color:var(--sub-navy);margin:0 0 16px}
.acct-sum-plan{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.acct-sum-name{font-weight:800;color:var(--sub-navy);font-size:1rem;line-height:1.3}
.acct-sum-price{text-align:right;white-space:nowrap;color:var(--sub-navy)}
.acct-sum-price b{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:1.3rem}
.acct-sum-price span{font-size:.8rem;color:var(--sub-muted);display:block}
.acct-sum-note{margin:8px 0 14px;font-size:.82rem;color:var(--sub-muted);line-height:1.5}
.acct-sum-divider{display:block;height:1px;background:var(--sub-line);margin:16px 0}
.acct-sum-line{display:flex;justify-content:space-between;gap:14px;margin:0 0 8px;font-size:.92rem;color:var(--sub-ink)}
.acct-sum-line dt{color:var(--sub-muted)}
.acct-sum-line dd{margin:0;font-weight:700;color:var(--sub-navy)}
.acct-sum-total{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--sub-line);font-size:1rem}
.acct-sum-total dd{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:1.2rem}

/* payment column */
.acct-pay{background:var(--sub-panel);border:1px solid var(--sub-line);border-radius:16px;
  padding:clamp(22px,2.6vw,30px);box-shadow:0 18px 44px -38px rgba(10,31,77,.4)}
.acct-pay h3{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:1.05rem;color:var(--sub-navy);margin:0 0 14px}
.acct-pending{display:flex;align-items:flex-start;gap:11px;background:var(--sub-blue);border:1px solid var(--sub-line);
  border-radius:13px;padding:14px 16px;margin:0 0 22px;font-size:.9rem;line-height:1.55;color:var(--sub-navy)}
.acct-pending b{font-weight:800}
.acct-pending-ic{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--sub-navy);color:var(--sub-amber);margin-top:1px}
.acct-pending-ic svg{width:17px;height:17px}

.acct-methods{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 16px}
.acct-method{position:relative;cursor:pointer}
.acct-method input{position:absolute;opacity:0;inset:0;cursor:pointer}
.acct-method-b{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.92rem;color:var(--sub-navy);
  background:#fff;border:1.5px solid var(--sub-line);border-radius:12px;padding:13px 14px;transition:border-color .15s,box-shadow .15s,background .15s}
.acct-method-ic{flex:none;display:grid;place-items:center;width:26px;height:26px;color:var(--sub-navy)}
.acct-method-ic svg{width:22px;height:22px}
.acct-method input:hover+.acct-method-b{border-color:var(--sub-navy)}
.acct-method input:checked+.acct-method-b{border-color:var(--sub-navy);background:var(--sub-blue);
  box-shadow:0 0 0 2px rgba(10,31,77,.16)}
.acct-method input:focus-visible+.acct-method-b{outline:2px solid var(--sub-navy);outline-offset:2px}

.acct-paypanel{margin:0 0 16px}
.acct-paypanel[hidden]{display:none}
.acct-pay-note{margin:0;font-size:.88rem;line-height:1.55;color:var(--sub-muted)}
.acct-pay-note b{color:var(--sub-navy);font-weight:700}

/* (removed: faux card field replaced by a clean secure mount — .acct-cardmount) */

.acct-co-result{border-radius:11px;padding:13px 15px;font-size:.9rem;line-height:1.55;margin:14px 0 0;
  background:var(--sub-blue);border:1px solid var(--sub-line);color:var(--sub-navy)}
.acct-co-result[hidden]{display:none}
.acct-co-result b{font-weight:800}
.acct-fineprint{margin:14px 0 0;font-size:.78rem;line-height:1.5;color:var(--sub-muted)}
.acct-fineprint b{color:var(--sub-navy);font-weight:700}

/* ============================ DASHBOARD (honest) ======================== */
.dash-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 clamp(20px,2.6vw,30px)}
.dash-hi{flex:1;min-width:220px}
.dash-hi .dash-eyebrow{color:var(--sub-red)}
.dash-hi h2{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:clamp(1.4rem,2.6vw,1.95rem);letter-spacing:-.02em;
  color:var(--sub-navy);margin:0}
.dash-hi p{margin:6px 0 0;color:var(--sub-muted);font-size:.96rem;line-height:1.55}

/* membership badge (design-base; shown INACTIVE until a real backend status) */
.acct-badge{display:flex;align-items:center;gap:12px;background:var(--sub-panel);border:1px solid var(--sub-line);
  border-radius:14px;padding:12px 16px;box-shadow:0 16px 40px -34px rgba(10,31,77,.4)}
.acct-badge-crest{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--sub-navy);color:var(--sub-amber)}
.acct-badge-crest svg{width:22px;height:22px}
.acct-badge-tx{display:flex;flex-direction:column;line-height:1.25}
.acct-badge-lbl{font-weight:800;color:var(--sub-navy);font-size:.92rem}
.acct-badge-state{font-size:.8rem;color:var(--sub-muted);margin-top:2px}
.acct-badge-cta{margin-left:6px;font-weight:700;font-size:.86rem;color:var(--sub-red);text-decoration:none;white-space:nowrap}
.acct-badge-cta:hover{text-decoration:underline}
.acct-badge-off .acct-badge-crest{background:var(--sub-blue);color:var(--sub-muted)}

.dash-layout{display:grid;grid-template-columns:248px 1fr;gap:clamp(18px,2.6vw,32px);align-items:start}

/* sidebar nav */
.dash-nav{position:sticky;top:20px;background:var(--sub-panel);border:1px solid var(--sub-line);border-radius:16px;padding:10px;
  box-shadow:0 20px 46px -38px rgba(10,31,77,.4)}
.dash-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.dash-navbtn{width:100%;display:flex;align-items:center;font:inherit;font-weight:600;font-size:.94rem;color:#374155;
  background:transparent;border:0;border-radius:10px;padding:11px 13px;cursor:pointer;text-align:left;transition:background .15s,color .15s}
.dash-navbtn:hover{background:var(--sub-blue)}
.dash-navbtn.is-active{background:var(--sub-navy);color:#fff}
.dash-signout{margin-top:6px;border-top:1px solid var(--sub-line);padding-top:8px}
.dash-signout button{width:100%;display:flex;align-items:center;gap:11px;font:inherit;font-weight:600;font-size:.94rem;
  color:var(--sub-red);background:transparent;border:0;border-radius:10px;padding:11px 13px;cursor:pointer;text-align:left;transition:background .15s}
.dash-signout button svg{width:18px;height:18px;flex:none}
.dash-signout button:hover{background:rgba(200,16,46,.08)}

/* panels */
.dash-main{min-width:0}
.dash-panel[hidden]{display:none}
.dash-panel>h3{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:1.3rem;letter-spacing:-.01em;color:var(--sub-navy);margin:0 0 4px}
.dash-panel>.dash-panel-sub{margin:0 0 20px;color:var(--sub-muted);font-size:.95rem;line-height:1.55}
.dash-card{background:var(--sub-panel);border:1px solid var(--sub-line);border-radius:16px;padding:clamp(18px,2.2vw,26px);
  box-shadow:0 18px 44px -38px rgba(10,31,77,.4)}
.dash-soon{margin:0;color:var(--sub-muted);font-size:.95rem;line-height:1.6}

/* ============================ ACCREDITATIONS ============================= */
.sp-accred{background:var(--sub-blue);padding:clamp(6px,1.4vw,16px) 0 clamp(34px,5vw,58px)}
.sp-accred .acmarq{max-width:none;margin-top:clamp(8px,1.4vw,18px)}

/* ------------------------------------------------------------- responsive - */
@media (max-width:860px){
  .acct-co-grid{grid-template-columns:1fr}
  .acct-summary{position:static;order:-1}
  .dash-layout{grid-template-columns:1fr}
  .dash-nav{position:static}
  .dash-nav ul{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px;-webkit-overflow-scrolling:touch}
  .dash-navbtn{white-space:nowrap}
  .dash-signout{margin-top:12px;border-top:0;padding-top:0}
}
@media (max-width:520px){
  .acct-methods{grid-template-columns:1fr}
  .dash-top{align-items:flex-start}
  .acct-badge{width:100%}
}

/* ==================== auth: status screens + hints ==================== */
.auth-ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 0 16px;background:var(--sub-blue);color:var(--sub-navy)}
.auth-ico svg{width:28px;height:28px}
.auth-ico.ok{background:rgba(20,120,70,.12);color:#12784a}
.auth-ico.warn{background:rgba(236,184,76,.2);color:#8a6a17}
.auth-hint2{margin:-6px 0 18px;font-size:.86rem;color:var(--sub-muted);line-height:1.5}

/* ==================== checkout: card mount + secure note + result ==================== */
.acct-cardmount{display:flex;align-items:center;gap:10px;background:var(--sub-blue);border:1px solid var(--sub-line);border-radius:12px;padding:14px 16px;margin:0 0 12px;color:var(--sub-navy);font-weight:600;font-size:.92rem}
.acct-cardmount-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#fff;color:var(--sub-navy)}
.acct-cardmount-ic svg{width:18px;height:18px}
.acct-securenote{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:.82rem;color:var(--sub-muted);line-height:1.5}
.acct-securenote-ic{flex:none;display:grid;place-items:center;width:22px;height:22px;color:var(--sub-navy)}
.acct-securenote-ic svg{width:16px;height:16px}
.acct-payresult{margin:16px 0 0}
.acct-payresult[hidden]{display:none}
.acct-pr{display:flex;align-items:flex-start;gap:12px;border-radius:13px;padding:15px 16px;background:var(--sub-blue);border:1px solid var(--sub-line);color:var(--sub-navy)}
.acct-pr[hidden]{display:none}
.acct-pr>div{min-width:0}
.acct-pr p{margin:0;font-size:.92rem;line-height:1.55}
.acct-pr b{font-weight:800}
.acct-pr-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--sub-navy);margin-top:1px}
.acct-pr-ic svg{width:19px;height:19px}
.acct-pr-ic.ok{background:rgba(20,120,70,.14);color:#12784a}
.acct-pr-ic.err{background:rgba(200,16,46,.12);color:#a00c22}
.acct-pr-ic.warn{background:rgba(236,184,76,.22);color:#8a6a17}
.acct-pr-cta{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0}
.acct-pr-cta .acct-btn{width:auto;padding:10px 18px;font-size:.9rem}
.sp-spin2{width:18px;height:18px;border:2px solid rgba(10,31,77,.25);border-top-color:var(--sub-navy);border-radius:50%;display:block;animation:sp-spin .7s linear infinite}

/* ==================== dashboard: forms, avatar ==================== */
.dash-form fieldset{border:0;margin:0;padding:0}
.acct-fs{margin:0 0 18px}
.acct-fs legend{font-weight:800;color:var(--sub-navy);font-size:.95rem;margin:0 0 10px;padding:0}
.acct-fs-opt{font-weight:400;color:var(--sub-muted)}
.acct-avatar-row{display:flex;align-items:center;gap:16px;margin:0 0 20px;flex-wrap:wrap}
.acct-avatar{flex:none;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--sub-blue);color:var(--sub-muted);border:1px solid var(--sub-line);background-size:cover;background-position:center}
.acct-avatar svg{width:34px;height:34px}
.acct-avatar.has-img svg{display:none}
.acct-avatar-ctl{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.acct-file{width:auto;padding:9px 16px;font-size:.88rem;cursor:pointer}
.dash-form-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 0}
.dash-form-foot .acct-btn{width:auto}
.dash-saved{font-size:.86rem;font-weight:700;color:#12784a}
.dash-saved[hidden]{display:none}
.dash-actionbar{margin:0 0 16px}
.dash-actionbar .acct-btn{width:auto}

/* ==================== dashboard: empty states ==================== */
.dash-empty{text-align:center;padding:clamp(26px,4vw,44px)}
.dash-empty-ic{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--sub-blue);color:var(--sub-navy);margin:0 0 14px}
.dash-empty-ic svg{width:26px;height:26px}
.dash-empty-h{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:1.1rem;color:var(--sub-navy);margin:0 0 6px}
.dash-empty-p{max-width:44ch;margin:0 auto 16px;color:var(--sub-muted);font-size:.92rem;line-height:1.6}
.dash-empty .acct-btn{width:auto}

/* ==================== dashboard: lists + status chips ==================== */
.dash-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dash-list[hidden]{display:none}
.dash-rowbtn{width:100%;display:flex;align-items:center;gap:14px;justify-content:space-between;text-align:left;background:var(--sub-panel);border:1px solid var(--sub-line);border-radius:13px;padding:15px 17px;cursor:pointer;font:inherit;transition:border-color .15s,box-shadow .15s}
.dash-rowbtn:hover{border-color:var(--sub-navy);box-shadow:0 14px 34px -30px rgba(10,31,77,.5)}
.dash-row-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.dash-row-title{font-weight:800;color:var(--sub-navy);font-size:.98rem}
.dash-row-meta{font-size:.82rem;color:var(--sub-muted)}
.dash-status{flex:none;font-size:.76rem;font-weight:800;letter-spacing:.02em;padding:5px 11px;border-radius:999px;white-space:nowrap;background:var(--sub-blue);color:var(--sub-navy);border:1px solid var(--sub-line)}
.dash-status.is-progress{background:rgba(236,184,76,.18);color:#8a6a17;border-color:rgba(236,184,76,.5)}
.dash-status.is-quote{background:rgba(10,31,77,.08);color:var(--sub-navy);border-color:rgba(10,31,77,.2)}
.dash-status.is-done,.dash-status.is-reviewed{background:rgba(20,120,70,.12);color:#12784a;border-color:rgba(20,120,70,.35)}
.dash-status.is-overdue{background:rgba(200,16,46,.1);color:#a00c22;border-color:rgba(200,16,46,.35)}
.dash-status.is-expired{background:rgba(90,100,120,.12);color:#5a6478;border-color:rgba(90,100,120,.3)}

/* ==================== dashboard: detail + timeline + files ==================== */
.dash-detail[hidden]{display:none}
.dash-back{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:700;font-size:.88rem;color:var(--sub-red);background:none;border:0;padding:0;margin:0 0 14px;cursor:pointer}
.dash-back:hover{text-decoration:underline}
.dash-back svg{width:17px;height:17px}
.dash-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 12px}
.dash-detail-head h4{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:1.15rem;color:var(--sub-navy);margin:0 0 3px}
.dash-detail-msg{margin:0 0 20px;color:var(--sub-ink);font-size:.95rem;line-height:1.6}
.dash-sub-h{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:.9rem;color:var(--sub-navy);margin:18px 0 12px;text-transform:uppercase;letter-spacing:.06em}
.dash-timeline{list-style:none;margin:0 0 6px;padding:0}
.dash-timeline li{position:relative;display:flex;gap:14px;padding:0 0 18px 4px}
.dash-timeline li:last-child{padding-bottom:0}
.dash-tl-dot{position:relative;flex:none;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--sub-line);margin-top:2px;z-index:1}
.dash-timeline li::before{content:"";position:absolute;left:10px;top:16px;bottom:-2px;width:2px;background:var(--sub-line)}
.dash-timeline li:last-child::before{display:none}
.dash-timeline li.is-done .dash-tl-dot{background:#12784a;border-color:#12784a}
.dash-timeline li.is-done::before{background:#12784a}
.dash-timeline li.is-current .dash-tl-dot{background:var(--sub-amber);border-color:var(--sub-amber);box-shadow:0 0 0 4px rgba(236,184,76,.25)}
.dash-tl-title{font-weight:700;color:var(--sub-navy);font-size:.92rem;margin:0}
.dash-tl-date{font-size:.82rem;color:var(--sub-muted);margin:2px 0 0}
.dash-files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dash-file{display:flex;align-items:center;gap:12px;text-decoration:none;background:var(--sub-blue);border:1px solid var(--sub-line);border-radius:11px;padding:11px 14px;transition:border-color .15s}
.dash-file:hover{border-color:var(--sub-navy)}
.dash-file-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#fff;color:var(--sub-navy)}
.dash-file-ic svg{width:18px;height:18px}
.dash-file-tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.dash-file-nm{font-weight:700;color:var(--sub-navy);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-file-sz{font-size:.78rem;color:var(--sub-muted)}

/* ==================== dashboard: review stars ==================== */
.dash-review .dash-stars{display:flex;gap:4px;margin:0 0 6px}
.dash-star{background:none;border:0;padding:4px;cursor:pointer;color:var(--sub-line);line-height:0;transition:color .12s,transform .12s}
.dash-star svg{width:30px;height:30px;fill:currentColor}
.dash-star:hover{transform:scale(1.08)}
.dash-star.on{color:var(--sub-amber)}
.dash-star:disabled{cursor:default}
.dash-review textarea{resize:vertical;min-height:96px}

/* ==================== dashboard: subscription states ==================== */
.dash-sub .dash-sub-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.dash-sub-name{font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:1.1rem;color:var(--sub-navy);margin:0 0 2px}
.dash-sub-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0;padding:14px 0;border-top:1px solid var(--sub-line);border-bottom:1px solid var(--sub-line)}
.dash-sub-facts div{min-width:0}
.dash-sub-facts dt{font-size:.78rem;color:var(--sub-muted);margin:0 0 3px}
.dash-sub-facts dd{margin:0;font-weight:800;color:var(--sub-navy);font-size:.92rem}
.dash-sub-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:16px 0 0}
.dash-sub-cta .acct-btn{width:auto}
.dash-cancel-link{color:var(--sub-muted)}
.dash-cancel-link:hover{color:var(--sub-red)}
.acct-btn.danger{background:var(--sub-red)}
.acct-btn.danger:hover{background:#a00c22}
.dash-note{display:flex;align-items:flex-start;gap:11px;border-radius:12px;padding:13px 15px;margin:0 0 16px;font-size:.9rem;line-height:1.55}
.dash-note p{margin:0}
.dash-note.warn{background:rgba(236,184,76,.14);border:1px solid rgba(236,184,76,.5);color:#7a5c10}
.dash-note.ok{background:rgba(20,120,70,.1);border:1px solid rgba(20,120,70,.3);color:#12784a}
.dash-note-ic{flex:none;display:grid;place-items:center;width:26px;height:26px;margin-top:1px}
.dash-note-ic svg{width:20px;height:20px}

/* ==================== membership badge variants ==================== */
.acct-badge-on{border-color:rgba(20,120,70,.4)}
.acct-badge-on .acct-badge-crest{background:#12784a;color:#fff}
.acct-badge-on .acct-badge-state{color:#12784a;font-weight:700}
.acct-badge-expired{border-color:rgba(200,16,46,.35)}
.acct-badge-expired .acct-badge-crest{background:var(--sub-blue);color:var(--sub-red)}
.acct-badge-expired .acct-badge-state{color:var(--sub-red);font-weight:700}
.acct-badge-cta[hidden]{display:none}

/* ==================== focus-visible + overflow safety ==================== */
.sub-main a:focus-visible,.sub-main button:focus-visible,.dash-rowbtn:focus-visible,.dash-star:focus-visible,.dash-back:focus-visible,.auth-link:focus-visible,.dash-navbtn:focus-visible{outline:2px solid var(--sub-navy);outline-offset:2px;border-radius:8px}
.sub-main{overflow-x:clip}

/* ==================== responsive additions ==================== */
@media (max-width:560px){
  .dash-sub-facts{grid-template-columns:1fr;gap:10px}
  .dash-rowbtn{align-items:flex-start}
  .dash-form-foot{flex-direction:column;align-items:flex-start}
}

/* ==================== reduced motion ==================== */
@media (prefers-reduced-motion:reduce){
  .acct-btn,.dash-rowbtn,.dash-star,.dash-file,.acct-method-b{transition:none}
  .dash-star:hover,.dash-rowbtn:hover{transform:none}
}