/* ============================================================
   D. shop-account.css (leg L22): sign in, account pages
   ============================================================ */
/* D1. the account's own row of pages: the range filter's shape, as links */
.account-bar{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;padding:20px 0;border-bottom:2px solid var(--ink)}
.account-bar .filters{flex:1}
a.filter{display:inline-flex;align-items:center}
a.filter[aria-current=page]{background:var(--ink);border-color:var(--ink);color:var(--gold)}
.filter .count{margin-left:8px;padding:1px 7px 0;background:var(--gold);color:var(--ink);font-size:13px}
.account-main{padding:34px 0 88px}
.account-main>h2{margin-bottom:6px;font-size:26px;line-height:1.05;letter-spacing:-.02em}
.account-main>.notice{margin-bottom:22px}
/* D2. sign in and sign up */
.auth-form{max-width:480px}
.auth-form .field:first-child{margin-top:0}
.auth-form .actions{margin-top:26px;padding-left:6px}
.or{display:flex;align-items:center;gap:14px;margin:26px 0;font-weight:700;color:var(--ink-soft)}
.or::before,.or::after{content:"";flex:1;height:2px;background:rgba(6,32,26,.2)}
/* the error line over a form (frames 12b and 12f draw it with these inline declarations: white, a danger bar to its left) */
.auth-form>.form-error,.account-form>.form-error{margin:0 0 20px;padding:12px 16px;background:var(--white);border-left:6px solid var(--danger)}
/* (.btn-outline itself moved to section A in rev 2: the product page uses it too) */
.auth-form .btn-outline{width:calc(100% - 12px);margin-left:6px}
.auth-swap{margin-top:26px;font-size:17px}
.auth-swap a,.prose a,.notice a,.next-steps a,.msg a,.hint a,.status a,.sent-copy a{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.action-bar .link-btn,.summary-card .link-btn,.summary-card .versions summary{color:var(--paper)}
.action-bar .link-btn:hover,.summary-card .link-btn:hover{text-decoration-color:var(--gold)}
.summary-card .can-list{margin:14px 0 0;padding:0;list-style:none}
.summary-card .can-list li{display:flex;gap:14px;padding:12px 0;border-top:1px solid rgba(244,242,234,.28);font-weight:600}
.summary-card .can-list svg{flex:none;width:22px;height:22px;margin-top:2px;fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* D3. orders */
.order-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) auto;align-items:center;gap:8px 28px;padding:22px 0;border-top:2px solid var(--ink)}
.order-row:last-child{border-bottom:2px solid var(--ink)}
.order-ref{font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:24px;line-height:1.1;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.order-meta{margin-top:4px;font-size:16px;color:var(--ink-soft)}
.order-state p{margin-top:8px;font-size:16px}
.track{font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.step-tag{display:inline-block;margin-left:4px;padding:5px 12px 4px;border:2px solid var(--ink);font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:13px;line-height:1.2;letter-spacing:.07em;text-transform:uppercase;transform:skewX(-10deg)}
.step-tag>span{display:inline-block;transform:skewX(10deg)}
.step-tag.is-you{background:var(--gold);border-color:var(--gold)}
.step-tag.is-done{background:var(--ink);color:var(--paper)}
.step-tag.is-off{border-color:var(--danger);color:var(--danger)}
.order-row .line-controls{justify-content:flex-end;margin:0}
/* an order that waits on the customer: lifted onto white under a gold bar, its one button first */
.order-row.needs-you{margin:0 0 26px;padding:22px 24px;border-top:6px solid var(--gold);background:var(--white)}
.order-row.needs-you+.order-row{border-top:2px solid var(--ink)}
.order-row.needs-you .btn{margin-left:6px}
/* D4. one order: the proof, the lines, the messages */
.proof{margin-bottom:38px;background:var(--white);border-top:6px solid var(--gold)}
.proof-head{padding:22px 24px 0}
.proof-head h2{font-size:26px;line-height:1.05;letter-spacing:-.02em}
.proof-head p{margin-top:8px;font-size:17px}
.proof-art{margin:18px 24px 0;background:var(--paper)}
.proof-art img{width:100%;height:auto}
.proof .action-bar{margin-top:22px}
.proof-changes{padding:4px 24px 26px}
.proof-changes .actions{padding-left:6px}
.proof-done{display:flex;align-items:center;gap:16px;padding:18px 24px 22px;font-weight:600}
.proof-done .tick{flex:none;width:46px;height:38px;margin:0 0 0 6px}
.proof-done .tick svg{width:20px;height:20px}
/* where the order has got to: five 6px bars in the band, the reached ones gold, and one plain sentence under them */
.order-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-width:760px;margin:24px 0 0;padding:0;list-style:none}
.order-steps li{padding-top:10px;border-top:6px solid rgba(244,242,234,.28);font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:13px;line-height:1.2;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.order-steps li.done,.order-steps li[aria-current=step]{border-top-color:var(--gold)}
.order-steps li.done span::before{content:"";display:inline-block;width:10px;height:5px;margin:0 7px 3px 2px;border:solid var(--gold);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.order-steps li[aria-current=step]{color:var(--white)}
.order-now{max-width:60ch;margin-top:16px;font-size:19px;line-height:1.4}
.order-now b{font-weight:700;color:var(--gold)}
.order-step-n{display:none}
.order-block{margin-bottom:38px}
.order-block>h2{margin-bottom:16px;font-size:26px;line-height:1.05;letter-spacing:-.02em}
.summary-card h3{margin:20px 0 6px;font-size:17px;color:var(--gold)}
.summary-card address{font-style:normal;color:var(--muted)}
.summary-card .track{color:var(--paper);font-size:19px}
/* messages: the shop on white to the left, the customer on ink to the right */
.thread{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.msg{max-width:min(560px,88%);padding:14px 18px 16px;background:var(--white)}
.msg.is-you{justify-self:end;background:var(--ink);color:var(--paper)}
.msg-meta{display:block;margin-bottom:4px;font-size:15px;font-weight:700}
.msg p{font-size:17px;overflow-wrap:anywhere}
.reply{margin-top:20px}
.reply .field{margin:0 0 14px}
.reply .field textarea{min-height:96px}
.reply .actions{padding-left:6px}
.thread-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;padding:18px 0;border-top:2px solid var(--ink)}
.thread-row:last-child{border-bottom:2px solid var(--ink)}
.thread-row h3{font-size:19px;line-height:1.25}
.thread-row p{grid-column:1;font-size:16px;color:var(--ink-soft)}
.thread-row time{font-size:16px;color:var(--ink-soft)}
.thread-row .line-flag{margin-left:0;margin-right:10px;background:var(--gold);color:var(--ink)}
/* D5. My designs. rev 2 (rulings A5, A6, A11): ONE card for every design, pins or placement, from any range.
   Top to bottom: one 4:5 picture tile with the hairline · the colour bar as its foot · the two switches (.design-views:
   the picture switch only once a preview picture is being made or exists; "Front | Back", .cz-faces from section C, only
   when the picture showing has two faces) · the caption · range and code, name, facts · "Use this design" and the three
   links · the preview-picture block. The picture comes FIRST so every card in a row starts level.
   Gone from rev 1: .guide-pair, .guide-side, .guide-none, .colour-note (two small pictures side by side, a flag on each,
   and a sentence where the colour bar now is). This page loads section C as well as section D. */
.design-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px var(--gut);align-items:start}
.design-pic{margin:0}
.design-views{display:grid;gap:10px;margin-top:12px}
.design-views .seg,.design-views .cz-faces{margin:0}
.design-card .guide{aspect-ratio:4/5;border:1px solid rgba(6,32,26,.32)}
/* a card is narrow at every width, so its colour bar always takes the phone form: parts stacked, label and colour on one line when they fit */
.design-card .photo-bar{flex-direction:column}
.design-card .photo-bar>div{padding:10px 14px;gap:10px}
.design-card .photo-bar>div+div{border-left:0;border-top:2px solid rgba(244,242,234,.28)}
.design-card .photo-bar span{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.design-card .photo-bar small{margin:0}
.design-card .photo-bar .chip{width:26px;height:26px}
.design-pic figcaption{margin-top:12px;font-size:16px;font-weight:600;color:var(--ink-soft)}
.design-pic figcaption small{display:block;margin-top:2px;font-size:16px;font-weight:400}
.design-card .line-code{margin-top:16px}
.design-card h3{margin:2px 0 4px;font-size:20px;line-height:1.22;letter-spacing:-.01em}
.design-card p{font-size:16px;color:var(--ink-soft)}
.design-card p .chip{width:16px;height:16px;margin:0 8px 0 2px;vertical-align:-2px}
.design-card .placement{margin-top:4px;color:var(--ink)}
.design-card .placement b{font-weight:700}
.design-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:14px;padding-left:6px}
.design-actions .btn{min-height:48px;padding:0 22px;font-size:15px}
.design-actions .line-controls{margin:0}
/* Rename and Delete happen in the card. Rename: the name becomes a field in its place. Delete: the row of controls
   becomes the question, and nothing goes until the danger button is pressed. Kit parts only (.field, .status, .btn-danger). */
.design-rename{margin:6px 0 10px}
.design-rename .field{margin:0}
/* the 3px focus ring stands 4px off the box: the hint under a focused name box starts below it, so the ring never hides the words */
.design-rename .field .hint{margin:12px 0 10px}
.design-rename .actions{margin-top:12px;padding-left:6px}
.design-actions.is-asking .status{flex-basis:100%;margin:0 0 8px -6px}
/* the two-part switch: "Position guide | Preview picture". The range filter's leaning tab, two to a row, equal widths.
   The position guide is the first part and the one a card opens on, every time. */
.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 6px}
.seg .filter{min-height:44px;padding:6px 8px;font-size:14px;line-height:1.15;letter-spacing:.03em;text-align:center;white-space:normal}
/* the preview picture (made by AI): the flag is the offer flag (.sale-tag), top left of the picture, always */
.guide .pic-flag{position:absolute;z-index:1;left:14px;top:12px}
/* while it is being made: a quiet block where the picture will go, a gold 6px bar that fills over about 15 seconds */
.guide.is-waiting{background:var(--plate)}
.wait-bar{position:absolute;left:0;top:0;width:100%;height:6px;background:var(--gold);transform-origin:0 50%;animation:pic-wait 15s cubic-bezier(.2,.6,.3,1) forwards}
@keyframes pic-wait{from{transform:scaleX(.04)}to{transform:scaleX(.92)}}
.wait-line{position:absolute;left:16px;right:16px;bottom:14px;font-size:16px;font-weight:600;color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){.wait-bar{animation:none;opacity:.5}}
/* the preview-picture block: the foot of the card, under a hairline. Absent altogether while AI pictures are off. */
.preview-ask{margin-top:18px;padding-top:16px;border-top:1px solid rgba(6,32,26,.2)}
.preview-ask .btn{min-height:44px;margin-left:6px;padding:0 20px;font-size:14px}
.preview-ask .btn+.notice{margin-top:12px}
.preview-ask .status{margin-bottom:14px}
.preview-ask .notice{color:var(--ink-soft)}
/* D6. logos */
.logo-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:8px 20px;padding:20px 0;border-top:2px solid var(--ink)}
.logo-row:last-of-type{border-bottom:2px solid var(--ink)}
.logo-tile{display:grid;place-items:center;width:96px;height:96px;padding:10px;background:var(--white)}
.logo-tile img{max-width:100%;max-height:100%}
.logo-row h3{font-size:19px;line-height:1.25;overflow-wrap:anywhere}
.logo-row p{font-size:16px;color:var(--ink-soft)}
.logo-row .line-controls{margin:0;justify-content:flex-end}
.logo-row .status,.logo-row details{grid-column:2 / -1}
/* while its name is being changed, or when the row opens an "earlier versions" list under its text (L98: the list made the text column taller than the picture and the picture drew about 16px low), the row's picture and controls sit level with the row's first line, not the middle of the tall column */
.logo-row.is-renaming,.logo-row:has(.versions){align-items:start}
.versions summary{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;cursor:pointer}
.versions ul{margin:4px 0 0;padding:0;list-style:none}
.versions li{display:flex;align-items:center;gap:14px;padding:8px 0;border-top:1px solid rgba(6,32,26,.2);font-size:16px}
.versions .logo-tile{width:48px;height:48px;padding:5px}
.account-main .upload-zone{margin-bottom:8px}
.account-main .upload-zone+.field{margin-top:12px}
/* D7. addresses and details */
.addr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);margin-bottom:34px}
.addr-card{padding:20px 22px 12px;background:var(--white);border-top:6px solid var(--ink)}
.addr-card.is-usual{border-top-color:var(--gold)}
.addr-card address{font-style:normal;font-size:17px;line-height:1.5}
.addr-card .line-flag{margin:0 0 10px;background:var(--gold);color:var(--ink)}
.account-form{max-width:720px}
.account-form>h2,.danger-zone h2{margin:0 0 16px;font-size:26px;line-height:1.05;letter-spacing:-.02em}
.account-form .actions{padding-left:6px}
.account-form+.account-form{margin-top:44px;padding-top:30px;border-top:2px solid var(--ink)}
.danger-zone{max-width:720px;margin-top:48px;padding-top:28px;border-top:2px solid var(--danger)}
.danger-zone p{max-width:58ch;margin-bottom:14px;font-size:17px}
.danger-zone .actions{margin-top:18px;padding-left:6px}
.btn-danger{background:transparent;border-color:var(--danger);color:var(--danger)}
.btn-danger:hover{background:var(--white)}
.danger-zone .field{max-width:320px}

@media (max-width:980px){
  .design-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .order-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .order-row .line-controls,.order-row>.actions{grid-column:1 / -1;justify-content:flex-start}
}
@media (max-width:700px){
  .account-bar{flex-direction:column;align-items:flex-start;padding:16px 0 10px}
  .account-main{padding:26px 0 56px}
  .step-tag,.filter .count,.msg-meta,.seg .filter,.design-actions .btn,.preview-ask .btn{font-size:16px}
  .design-actions{flex-direction:column;align-items:stretch;gap:8px;padding-left:0}
  .design-actions .btn{width:calc(100% - 12px);margin-left:6px}
  .preview-ask .btn{width:calc(100% - 12px);min-height:48px}
  .order-row{grid-template-columns:1fr}
  .order-row.needs-you{padding:20px 18px}
  .order-row.needs-you .btn{width:calc(100% - 12px)}
  .proof-head{padding:20px 18px 0}
  .proof-art{margin:16px 18px 0}
  .proof-changes{padding:4px 18px 22px}
  .proof-done{padding:16px 18px 20px}
  .auth-form .actions,.proof-changes .actions,.reply .actions,.account-form .actions,.danger-zone .actions{flex-direction:column;align-items:stretch;padding-left:0}
  .auth-form .actions .btn,.proof-changes .actions .btn,.reply .actions .btn,.account-form .actions .btn,.danger-zone .actions .btn{width:calc(100% - 12px);margin-left:6px}
  .design-grid{grid-template-columns:1fr;gap:44px}
  .order-steps li{padding-top:0}
  .order-steps li span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .order-step-n{display:block;margin-bottom:4px;font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:16px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
  .order-now{font-size:18px}
  .logo-row{grid-template-columns:72px minmax(0,1fr)}
  .logo-tile{width:72px;height:72px}
  .logo-row .line-controls{grid-column:2;justify-content:flex-start}
  .logo-row .status,.logo-row details{grid-column:1 / -1}
  .addr-grid{grid-template-columns:1fr}
  .thread-row{grid-template-columns:1fr}
}

/* F2. "Verify your email address": the first thing in .account-main on every account page until the address is
   verified. White under the 6px gold bar, as an order that needs you (.order-row.needs-you). Words left, the one
   button right; the line that answers the button runs full width under both. One column on a phone. */
.verify-note{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px 40px;margin:0 0 34px;padding:22px 24px 24px;border-top:6px solid var(--gold);background:var(--white)}
.verify-note h2{margin:0 0 8px;font-size:22px;line-height:1.15;letter-spacing:-.01em}
.verify-note p{max-width:62ch}
.verify-note p+p{margin-top:8px}
.verify-note .actions{padding-left:6px}
.verify-note .btn-outline:hover{background:var(--paper)}
.verify-note .btn-outline:disabled:hover{background:transparent}
.verify-note .status,.verify-note .error{grid-column:1 / -1;max-width:none;margin:0;padding:12px 16px;background:var(--paper)}
.verify-note .error{border-left:6px solid var(--danger)}
/* the one line said once, straight after verifying, above the page's own heading */
.account-main>.status:first-child{margin-bottom:26px}
/* frame 13c-a: the empty-orders heading sits one notice-gap under the notice, not two */
.verify-note+.empty-state{padding-top:0}
@media (max-width:700px){
  .verify-note{grid-template-columns:minmax(0,1fr);margin-bottom:28px;padding:20px 18px 22px}
  .verify-note .actions{flex-direction:column;align-items:stretch;padding-left:0}
  .verify-note .btn{width:calc(100% - 12px);margin-left:6px}
}

/* L94 (design pass L91): G4 (S23). "Order again" asks before it empties a basket. The question takes the full row
   under the order (or the foot of the order page's card); the one button is the act, the link backs out. */
.reorder-ask{grid-column:1 / -1;margin-top:8px}
.reorder-ask .status{margin:0 0 14px}
.reorder-ask .actions{padding-left:6px;margin:0}
.summary-card .reorder-ask{margin-top:20px}
.summary-card .reorder-ask .status{color:var(--ink)}
.summary-card .reorder-ask .btn{margin-top:0}
.summary-card .reorder-ask .actions{padding-left:0}
@media (max-width:700px){
  .order-row .reorder-ask .actions{flex-direction:column;align-items:stretch;padding-left:0}
  .order-row .reorder-ask .btn{width:calc(100% - 12px);margin-left:6px}
}

/* G5 (S28, S22). A link in a quiet line on an account page. */
.account-main .notice a,.order-now a{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.account-main .thread+.notice{margin-top:22px}

/* L127 (design pass L129): H2 (P1). The pay panel on the order page of an order waiting for payment. It IS the proof
   panel's shape (.proof: white under the 6px gold bar, the one button in the ink bar), so only the insides are
   set here: the checkout's "You pay" row, the notice, and the line under the bar. */
.pay-panel .totals{margin:18px 24px 0}
.pay-panel .open-note{margin:18px 24px 0}
.pay-panel>.notice,.pay-panel>.error{margin:0;padding:14px 24px 18px}
.pay-panel>.error{padding-left:18px;border-left:6px solid var(--danger)}
/* the one line said once when "Pay now" finds the order cancelled or paid, at the head of the left column */
.request-main>.status:first-child{margin-bottom:26px}

/* H3 (P2). Two orders that need the customer, one after the other on the orders list (one to
   pay for, one proof to check): the second keeps its own gold bar. As built, the rule that gives the row after a
   lifted one its ink line also took the gold bar off a second lifted row. */
.order-row.needs-you+.order-row.needs-you{border-top:6px solid var(--gold)}