/* ── The account section ─────────────────────────────────────────────────
   Same header, same tokens as the homepage. The header is always shown here
   (there is no full-screen hero to hide it behind). A side rail on wide
   screens, a row of pills on narrow ones; the content column does the work. */
.acct-page header.bar{transform:none}
.acct-page main{padding-top:calc(4.6rem + clamp(1.6rem,4vw,3rem));padding-bottom:clamp(3rem,6vw,5rem);min-height:70vh}

/* ── Sign in ── */
.acct-sign{display:grid;place-items:start center}
.acct-card{width:min(30rem,100%);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);
  padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--shadow-card)}
.acct-card h1{font-size:clamp(1.6rem,3vw,2.1rem);margin:.4rem 0 .6rem}
.acct-card .lede{font-size:1rem;margin-bottom:1.4rem}
.acct-card form{display:grid;gap:.9rem}
.acct-card .f{display:grid;gap:.35rem;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);margin:0}
.acct-card .f em{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;color:var(--faint)}
.acct-card input{width:100%;box-sizing:border-box;border:1px solid var(--line-2);border-radius:var(--radius-chip);padding:.8rem .9rem;
  font:400 1rem var(--font-sans);color:var(--ink);background:var(--surface);text-transform:none;letter-spacing:0}
.acct-card input:focus{outline:none;border-color:var(--blue-primary);box-shadow:var(--ring-focus)}
.acct-card input[name=code]{font-size:1.6rem;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}
.acct-sent{margin:0;font-size:.95rem;color:var(--text-secondary)}
.acct-fine{margin:1.4rem 0 0;font-size:.82rem;color:var(--text-secondary);line-height:1.5;border-top:1px solid var(--border);padding-top:1rem}
/* The quiet third option under the sign-in code step. A button, not a link:
   it changes what the form is doing rather than going anywhere, and the two
   real buttons above it must stay the two obvious things to press. */
.acct-linkbtn{justify-self:center;background:none;border:0;padding:.2rem .3rem;font:600 .85rem var(--font-sans);
  color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-chip)}
.acct-linkbtn:hover{color:var(--ink);text-decoration:underline}
.acct-linkbtn:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.btn-block{width:100%}
#sign-msg .msg{margin-top:1rem}

/* ── Shell: rail + content ── */
.acct-shell{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:clamp(1.6rem,4vw,3.2rem);align-items:start}
.acct-nav{position:sticky;top:calc(4.6rem + 1.2rem);display:grid;gap:1.1rem}
.acct-me{display:grid;gap:.15rem;padding:0 .75rem .9rem;border-bottom:1px solid var(--border)}
.acct-me b{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-me small{font-size:.78rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-nav nav{display:grid;gap:.15rem}
.acct-nav nav a{display:flex;align-items:center;gap:.5rem;padding:.55rem .75rem;border-radius:var(--radius-chip);font-size:.92rem;font-weight:600;
  color:var(--text-secondary);position:relative;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.acct-nav nav a:hover{background:var(--muted);color:var(--ink)}
.acct-nav nav a.on{background:var(--blue-tint);color:var(--blue-primary)}
.acct-nav .n{margin-left:auto;min-width:1.4em;padding:0 .4em;border-radius:999px;background:var(--muted);font-size:.72rem;line-height:1.6;
  text-align:center;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.acct-nav .n:empty{display:none}
.acct-nav a.on .n{background:#fff;color:var(--blue-primary)}
.acct-nav .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--red);display:inline-block}
.acct-nav-end{display:grid;gap:.5rem;padding:.9rem .75rem 0;border-top:1px solid var(--border)}
.acct-main{min-width:0}

/* ── Content blocks ── */
.acct-head{display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:1.4rem}
.acct-head h1{font-size:clamp(1.6rem,3vw,2.2rem);margin:.3rem 0 .3rem}
.acct-head .lede{font-size:1rem;margin:0}
.acct-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.acct-sub{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:1.8rem 0 .8rem}
.acct-sub h2{font-size:var(--fs-h2);margin:0}
.acct-sub a{font-size:.85rem;font-weight:600;color:var(--text-link)}
.n-inline{display:inline-block;vertical-align:middle;min-width:1.4em;padding:0 .45em;border-radius:999px;background:var(--muted);font-size:.74rem;line-height:1.7;color:var(--text-secondary);font-variant-numeric:tabular-nums;margin-left:.3rem}
/* `align-items:start` so an open share panel makes ITS card taller and leaves
   the others alone. Stretched siblings were fine while every card was the same
   height; a card that can grow by 200px turns that into a column of white. */
.acct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem;align-items:start}
.acct-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column}
.acct-thumb{aspect-ratio:1.2;background:var(--muted);display:grid;place-items:center;overflow:hidden}
.acct-thumb img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
/* a saved design's full mockup sheet (JPEG) — a drawing, not pixel art */
.acct-thumb.sheet{background:#fff}
.acct-thumb.sheet img{image-rendering:auto;padding:.4rem;box-sizing:border-box}
.acct-thumb span{font-size:.8rem;color:var(--faint)}
.acct-body{padding:.9rem 1rem 1rem;display:grid;gap:.3rem;flex:1}
.acct-body b{font-size:.98rem}
.acct-body small{font-size:.8rem;color:var(--text-secondary);line-height:1.4}
.acct-row{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.acct-row .btn{padding:7px 12px;font-size:.82rem}
.acct-list{display:grid;gap:.7rem}
.acct-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-card);padding:.9rem 1.1rem}
.acct-line img{width:64px;height:64px;object-fit:contain;border-radius:8px;background:var(--muted)}
.acct-line .k{font-size:.74rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.acct-line b{display:block;font-size:.98rem;margin:.15rem 0}
.acct-line small{color:var(--text-secondary);font-size:.85rem;line-height:1.45;display:block}
.acct-line .end{display:grid;gap:.4rem;justify-items:end}
.acct-reply{margin-top:.6rem;padding:.6rem .8rem;border-left:3px solid var(--blue-primary);background:var(--blue-tint);border-radius:0 8px 8px 0;font-size:.88rem;line-height:1.5}
.acct-reply .k{color:var(--blue-primary)}
.badge{display:inline-block;padding:.2em .65em;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.02em;
  background:var(--blue-tint);color:var(--blue-primary);text-transform:none;white-space:nowrap}
.badge.done{background:var(--green-tint);color:var(--green)}
.badge.warn{background:var(--amber-tint);color:var(--amber)}
.badge.dim{background:var(--muted);color:var(--text-secondary)}
.badge.new{background:var(--red-tint);color:var(--red)}
.acct-empty{border:1.5px dashed var(--line-2);border-radius:var(--radius-card);padding:2.4rem 1.4rem;text-align:center;color:var(--text-secondary);line-height:1.55}
.acct-empty .btn{margin-top:1rem}
.acct-skel{height:5.4rem;border-radius:var(--radius-card);background:linear-gradient(90deg,var(--muted),var(--surface),var(--muted));background-size:200% 100%;animation:acct-shimmer 1.2s linear infinite}
@keyframes acct-shimmer{to{background-position:-200% 0}}
.acct-chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.acct-chips button{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:.35rem .8rem;font-size:.82rem;font-weight:600;color:var(--text-secondary);cursor:pointer}
.acct-chips button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.acct-page footer .fine{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ── Overview ── */
.acct-now{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin-bottom:.4rem}
.acct-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:1rem 1.1rem;display:grid;gap:.35rem;align-content:start;text-align:left;color:inherit}
.acct-tile .k{font-size:.74rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.acct-tile .v{font-size:var(--fs-kpi);font-weight:700;line-height:1.05;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.acct-tile small{font-size:.82rem;color:var(--text-secondary);line-height:1.45}
.acct-tile.hot{border-color:var(--blue-primary);box-shadow:0 0 0 3px var(--blue-tint)}
a.acct-tile:hover{box-shadow:var(--shadow-raised)}
.acct-msg{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:1.1rem 1.2rem;display:grid;gap:.7rem}
.acct-msg textarea{min-height:5.4rem}
.acct-msg .acct-row{margin:0;justify-content:space-between;align-items:center}

/* ── Orders ── */
/* An order card leads with the thing itself — the mockup that came off the
   Knitting Studio — then its number and where it stands. El, 2026-09-03:
   "Viewing orders should be more visual and show you what the item is upfront."
   Orders with no picture (a phone order, a custom quote) keep the same shape
   with an initial in the frame, so the list stays a list. */
.acct-order{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:1.1rem 1.2rem;display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1.1rem;align-items:start;cursor:pointer;text-align:left;width:100%;color:inherit;font:inherit}
.acct-order .ord-body{display:grid;gap:.75rem;min-width:0}
.acct-order .ord-shot{display:flex;align-items:center;justify-content:center;width:5.5rem;height:5.5rem;
  border-radius:var(--radius-chip,8px);background:var(--muted);overflow:hidden;flex:none}
.acct-order .ord-shot img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.acct-order .ord-shot.none{font-weight:800;font-size:1.5rem;color:var(--faint)}
.acct-order .what{font-weight:600;font-size:.98rem;line-height:1.35;overflow-wrap:anywhere}
.acct-order .what span{font-weight:400;color:var(--text-secondary)}
.acct-head.with-shot{align-items:center}
.acct-head .head-shot{width:5rem;height:5rem;object-fit:contain;border-radius:var(--radius-chip,8px);
  background:var(--muted);mix-blend-mode:multiply;flex:none}
@media (max-width:560px){
  .acct-order{grid-template-columns:3.6rem minmax(0,1fr);gap:.8rem;padding:.9rem}
  .acct-order .ord-shot{width:3.6rem;height:3.6rem}
}
.acct-order:hover{box-shadow:var(--shadow-raised)}
.acct-order .top{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.acct-order .top b{font-size:1.05rem;font-variant-numeric:tabular-nums}
.acct-order .top .kind{font-size:.82rem;color:var(--text-secondary)}
.acct-order .top .amt{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.acct-order .lines{font-size:.88rem;color:var(--text-secondary);line-height:1.5}
.acct-order .foot{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;font-size:.82rem;color:var(--text-secondary)}
.track{display:grid;grid-template-columns:repeat(5,1fr);gap:.3rem}
.track i{display:block;height:4px;border-radius:2px;background:var(--border)}
.track span{display:block;font-size:.68rem;font-weight:600;color:var(--faint);margin-top:.35rem;text-transform:uppercase;letter-spacing:.04em}
.track .done i{background:var(--blue-primary)}
.track .done span{color:var(--text-secondary)}
.track .cur i{background:var(--blue-primary)}
.track .cur span{color:var(--blue-primary)}
.track.shipped .done i,.track.shipped .cur i{background:var(--green)}
.track.shipped .cur span{color:var(--green)}
.acct-back{display:inline-flex;align-items:center;gap:.35rem;font-size:.88rem;font-weight:600;color:var(--text-link);margin-bottom:1rem}
.acct-two{display:grid;grid-template-columns:minmax(0,1fr) 18rem;gap:1.4rem;align-items:start}
.acct-side{display:grid;gap:1rem}
.acct-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:1rem 1.1rem;display:grid;gap:.6rem}
.acct-panel h3{font-size:var(--fs-h3);margin:0}
.acct-panel .row{display:flex;justify-content:space-between;gap:.6rem;font-size:.86rem;align-items:baseline}
.acct-panel .row span{color:var(--text-secondary)}
.acct-panel textarea{min-height:4.6rem}
.acct-events{display:grid;gap:.45rem;font-size:.84rem}
.acct-events div{display:grid;grid-template-columns:5.2rem 1fr;gap:.6rem}
.acct-events time{color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}
.acct-confirm{background:var(--blue-tint);border-radius:var(--radius-chip);padding:.8rem .9rem;font-size:.88rem;line-height:1.5;display:grid;gap:.6rem}

/* The quote, as a document: white sheet, hairlines, a real table. Mirrors the
   Katana-style quote Order Creation issues, so what the customer sees here is
   the document they were sent. */
.qdoc{background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);padding:clamp(1.2rem,3vw,2.2rem);display:grid;gap:1.1rem;color:var(--ink)}
.qdoc .qhead{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.qdoc .qtitle{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:700;letter-spacing:-.01em}
.qdoc .qmeta{font-size:.84rem;color:var(--text-secondary);margin-top:.25rem}
.qdoc .qhead img{height:1.7rem;width:auto}
.qdoc .k{font-size:.72rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;font-weight:600;display:block;margin-bottom:.2rem}
.qdoc .qaddr{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.qdoc pre{margin:0;font:inherit;font-size:.9rem;line-height:1.5;white-space:pre-wrap}
.qlines-wrap{overflow-x:auto}
.qlines{width:100%;border-collapse:collapse;font-size:.9rem;min-width:34rem}
.qlines th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);font-weight:600;text-align:left;padding:.5rem .5rem;border-bottom:1px solid var(--ink)}
.qlines td{padding:.6rem .5rem;border-bottom:1px solid var(--border);vertical-align:top}
.qlines .qn,.qlines th.qn{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.qlines small{display:block;color:var(--text-secondary);font-size:.8rem}
.qtotals{margin-left:auto;display:grid;grid-template-columns:auto auto;gap:.3rem 1.6rem;font-size:.92rem;font-variant-numeric:tabular-nums;min-width:16rem}
.qtotals span{color:var(--text-secondary)}
.qtotals b{text-align:right}
.qtotals .grand{font-size:1.1rem;border-top:1px solid var(--ink);padding-top:.4rem}
.qtotals .grand span{color:var(--ink);font-weight:700}
.qnote{font-size:.92rem;line-height:1.55;white-space:pre-wrap}
.qterms{font-size:.82rem;color:var(--text-secondary);line-height:1.55;white-space:pre-wrap}
.qfoot{font-size:.78rem;color:var(--text-secondary);border-top:1px solid var(--border);padding-top:.8rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.qdraft{background:var(--amber-tint);color:var(--amber);border-radius:var(--radius-chip);padding:.6rem .8rem;font-size:.86rem;font-weight:600}

/* ── Documents ── */
.doc-ico{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;font-size:.66rem;font-weight:700;letter-spacing:.04em;background:var(--muted);color:var(--text-secondary)}
.doc-ico.quote{background:var(--blue-tint);color:var(--blue-primary)}
.doc-ico.invoice,.doc-ico.receipt{background:var(--green-tint);color:var(--green)}
.doc-ico.photo{background:var(--amber-tint);color:var(--amber)}
.acct-line img.doc-prev{width:64px;height:64px;object-fit:cover;border-radius:8px;image-rendering:auto}

/* ── Profile ── */
.acct-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:1.2rem 1.3rem;display:grid;gap:1rem;max-width:40rem}
.acct-form .g2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.acct-form .g3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem}
.acct-form label.f{margin:0}
.acct-form h3{font-size:var(--fs-h3);margin:.4rem 0 0}
.acct-form .ro{padding:10px 12px;background:var(--muted);border-radius:var(--radius-input);font-size:var(--fs-body-sm);color:var(--text-secondary)}
.acct-toggle{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;line-height:1.45}
.acct-toggle input{margin-top:.25rem;width:1.05rem;height:1.05rem}
.acct-toggle small{display:block;color:var(--text-secondary)}
.acct-danger{font-size:.82rem;color:var(--text-secondary);max-width:40rem;line-height:1.5;margin-top:1rem}

@media (max-width:900px){
  .acct-shell{grid-template-columns:1fr;gap:1.2rem}
  .acct-nav{position:static;gap:.8rem}
  .acct-me{display:none}
  .acct-nav nav{display:flex;gap:.3rem;overflow-x:auto;padding-bottom:.2rem;scrollbar-width:none}
  .acct-nav nav::-webkit-scrollbar{display:none}
  .acct-nav nav a{white-space:nowrap;border:1px solid var(--border);border-radius:999px;padding:.45rem .85rem;font-size:.86rem}
  .acct-nav nav a.on{border-color:var(--blue-primary)}
  .acct-nav-end{display:none}
  .acct-two{grid-template-columns:1fr}
}
@media (max-width:760px){
  .acct-page main{padding-top:calc(4.1rem + 1.4rem)}
  .acct-line{grid-template-columns:minmax(0,1fr) auto}
  .acct-line>img,.acct-line>.doc-ico{display:none}
  .acct-form .g2,.acct-form .g3,.qdoc .qaddr{grid-template-columns:1fr}
  .track span{font-size:.58rem}
}
@media print{
  header.bar,footer,.acct-nav,.acct-back,.acct-side,.acct-actions,.no-print{display:none !important}
  .acct-page main{padding:0}
  .acct-two{grid-template-columns:1fr}
  .qdoc{border:0;padding:0}
  body{background:#fff}
}

/* ── Paying by card (Stripe Checkout) ── */
.acct-pay{border-color:var(--blue-primary);box-shadow:0 0 0 3px var(--blue-tint)}
.acct-pay .pay-amt{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.acct-pay .pay-amt span{font-size:.84rem;color:var(--text-secondary)}
.acct-pay .pay-amt b{font-size:1.5rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.acct-pay .btn{width:100%;justify-content:center}
.acct-pay small{font-size:.82rem;line-height:1.5;color:var(--text-secondary)}
.acct-paynote{margin-bottom:1rem;display:flex;gap:.8rem;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.acct-paynote .lnk{font-weight:600;white-space:nowrap}
.acct-paynote:not(.msg-ok):not(.msg-bad){background:var(--blue-tint);color:var(--blue-primary)}

/* ── A choice made of two whole sentences, not a dropdown ────────────────
   Shipping preference (El, 2026-09-03). Both answers have consequences the
   customer needs to read, so each option carries its own explanation and the
   whole card is the target. */
.acct-choice{display:grid;gap:.6rem;margin-bottom:1.1rem}
.acct-pick{display:block;position:relative;padding:.85rem 2.4rem .85rem 1rem;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);
  transition:border-color var(--dur-fast,140ms) var(--ease-out,ease),background-color var(--dur-fast,140ms) var(--ease-out,ease)}
.acct-pick:hover{border-color:var(--text-secondary)}
.acct-pick.on{border-color:var(--blue-primary);background:var(--blue-tint)}
.acct-pick input{position:absolute;top:.9rem;right:.9rem;margin:0;accent-color:var(--blue-primary);width:1.05rem;height:1.05rem}
.acct-pick span{display:grid;gap:.15rem}
.acct-pick b{font-size:.95rem;font-weight:600}
.acct-pick small{font-size:.84rem;color:var(--text-secondary);line-height:1.45}
.acct-pick.soon{cursor:default;opacity:.72}
.soon-tag{display:inline-block;margin-left:.4rem;padding:.05rem .5rem;border-radius:999px;background:var(--amber-tint);color:var(--amber);font-size:.66rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}

/* ── Where a "fulfill to my customers" order ships ────────────────────────
   El, 2026-09-03. The customer's own customers, entered on their order. One
   fieldset per destination rather than a table: on a phone a table of nine
   address fields is unusable, and these get typed on a phone. */
.acct-ship .acct-hint{display:block;font-size:.84rem;line-height:1.5;color:var(--text-secondary);margin:.1rem 0 .6rem}
.acct-ship .acct-hint.warn{color:var(--amber)}
.acct-ship .acct-hint a{color:var(--text-link)}
.acct-addrs{list-style:decimal;margin:.2rem 0 .7rem;padding-left:1.3rem;display:grid;gap:.55rem}
.acct-addrs li{font-size:.9rem;line-height:1.4}
.acct-addrs li b{font-weight:600}
.acct-addrs li span{font-weight:600;color:var(--text-link);font-variant-numeric:tabular-nums}
.acct-addrs li small{display:block;font-size:.82rem;color:var(--text-secondary);line-height:1.45}
.acct-addr{border:1px solid var(--border);border-radius:var(--radius-card);padding:.7rem .9rem .9rem;
  margin:0 0 .7rem;display:grid;gap:.55rem;min-width:0}
.acct-addr legend{font-family:inherit;font-weight:700;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);padding:0 .35rem}
.acct-addr legend .lnk{font-size:.72rem;letter-spacing:0;text-transform:none;margin-left:.3rem}
.acct-addr .f span em{font-style:normal;color:var(--faint);font-weight:400}
.acct-addr input{font-size:.9rem}

/* ── The payment sheet ──────────────────────────────────────────────────────
   Stripe's embedded Checkout mounts in here, over the order it is paying for,
   rather than the customer being sent to checkout.stripe.com and back. It is
   a child of <body>, not of #main, because render() replaces #main wholesale
   and that would tear a mounted card form out of the page mid-typing.
   The panel is a bottom sheet on a phone and a centred card on a desktop —
   Stripe's own iframe sizes itself, so the box only has to give it room and a
   scroll of its own. */
.pay-sheet{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;
  justify-content:center}
.pay-sheet-scrim{position:absolute;inset:0;background:rgba(16,24,40,.55);
  animation:pay-fade var(--dur-base,200ms) var(--ease-out,ease) both}
.pay-sheet-box{position:relative;width:100%;max-width:34rem;max-height:94vh;max-height:94dvh;
  display:flex;flex-direction:column;background:var(--surface,#fff);
  border-radius:16px 16px 0 0;box-shadow:var(--shadow-modal,0 24px 56px rgba(16,24,40,.18));
  animation:pay-rise var(--dur-slow,320ms) var(--ease-out,ease) both}
.pay-sheet-hd{display:flex;align-items:center;gap:.8rem;padding:.95rem 1.1rem;
  border-bottom:1px solid var(--border)}
.pay-sheet-hd b{flex:1;font-size:.95rem;font-weight:700;letter-spacing:-.01em}
.pay-sheet-hd .x{flex:none;width:2rem;height:2rem;border:1px solid var(--border);
  border-radius:9999px;background:var(--surface);color:var(--text-secondary);
  font-size:.85rem;line-height:1;cursor:pointer;transition:var(--t-feedback)}
.pay-sheet-hd .x:hover{background:var(--muted);color:var(--ink)}
.pay-sheet-bd{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:.9rem 1.1rem 1.3rem}
.pay-sheet-wait{display:flex;align-items:center;gap:.55rem;padding:2.4rem 0;
  justify-content:center;color:var(--text-secondary);font-size:.9rem}
.pay-sheet-wait .skel-dot{width:.55rem;height:.55rem;border-radius:9999px;
  background:var(--blue-primary);animation:pay-pulse 1s var(--ease-in-out,ease) infinite}
@keyframes pay-fade{from{opacity:0}to{opacity:1}}
@keyframes pay-rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes pay-pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@media (min-width:601px){
  .pay-sheet{align-items:center}
  .pay-sheet-box{border-radius:16px;max-height:88vh;max-height:88dvh}
}
@media (prefers-reduced-motion:reduce){
  .pay-sheet-scrim,.pay-sheet-box{animation:none}
  .pay-sheet-wait .skel-dot{animation:none;opacity:.7}
}

/* ── Two-step verification (Profile) ──────────────────────────────────────
   Its own card under the details form, because it is a different KIND of
   decision from a shipping address — it changes how you get in. */
.acct-2fa{max-width:44rem;margin:1.6rem 0 0;padding:1.2rem 1.3rem;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-card)}
.acct-2fa.on{border-color:var(--green);background:var(--green-tint)}
.acct-2fa h3{font-size:var(--fs-h3);margin:0;display:flex;align-items:center;gap:.5rem}
.acct-2fa .lede{font-size:.9rem;color:var(--text-secondary);line-height:1.55;margin:.5rem 0 .9rem}
.acct-2fa .acct-form{gap:.7rem}
.acct-2fa .acct-fine{margin:.2rem 0 0;border:0;padding:0}
.acct-tag{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:.15rem .45rem;border-radius:999px;background:var(--green);color:#fff}
.acct-tag.off{background:var(--muted);color:var(--text-secondary)}
/* The QR and the typed key sit side by side above 34rem and stack below it —
   on a phone the key is the path people actually use, since the phone IS the
   authenticator and there is nothing to point a camera at. */
.acct-2fa-enroll{display:grid;gap:1.1rem;align-items:start}
@media(min-width:34rem){.acct-2fa-enroll{grid-template-columns:auto minmax(0,1fr)}}
.acct-qr{background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);
  padding:.6rem;line-height:0;justify-self:start}
.acct-qr svg{display:block;width:min(15rem,60vw);height:auto}
.acct-key{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.5rem 0 .9rem}
.acct-key code{flex:1 1 14rem;min-width:0;padding:.6rem .7rem;background:var(--muted);
  border-radius:var(--radius-input);font:600 .9rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--ink);word-break:break-all;user-select:all}
/* "you sign in with this" — the read-only half of the email/phone pair */
.acct-form .ro em{display:block;font-style:normal;font-size:.72rem;color:var(--faint);margin-top:.1rem}

/* ── Sharing a design (El, 2026-09-10) ──────────────────────────────────
   Three rows rather than a switch: OFF is a real state, and pairing "shared?"
   with "can they edit?" would let somebody set editing on a design that is not
   shared and believe they had done something. Radios, because exactly one of
   the three is true. */
.acct-share{margin:.75rem 0 0;padding:.75rem;background:var(--muted);
  border:1px solid var(--border);border-radius:var(--radius-card)}
.acct-share .shr{display:flex;gap:.55rem;align-items:flex-start;padding:.5rem .55rem;
  border-radius:var(--radius-input);cursor:pointer;transition:background 140ms}
.acct-share .shr:hover{background:#fff}
.acct-share .shr.on{background:#fff;box-shadow:inset 0 0 0 1px var(--blue-primary)}
.acct-share .shr input{margin:.2rem 0 0;accent-color:var(--blue-primary);flex:none}
.acct-share .shr b{display:block;font-size:.85rem;font-weight:600;line-height:1.35}
.acct-share .shr small{display:block;font-size:.78rem;color:var(--text-secondary);line-height:1.45;margin-top:.1rem}
.shr-link{display:flex;gap:.45rem;margin:.6rem .1rem .1rem}
.shr-link input{flex:1;min-width:0;padding:.55rem .65rem;border:1px solid var(--border);
  border-radius:var(--radius-input);background:#fff;font-size:.8rem;color:var(--text-secondary);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-overflow:ellipsis}
.shr-link .btn{white-space:nowrap;padding-inline:.9rem}
.shr-foot{margin:.55rem .2rem 0;font-size:.76rem;color:var(--faint);line-height:1.5}
.shr-foot .lnk{font-size:.76rem}