/* =============================================================================
   Bigscreen store — customer account pages (templates/customers/*.liquid).

   A port of the marketing site's account system (src/site/partials/account.css:
   /account/login, /signup, /forgot, /reset, /home, /orders) onto the store's
   own tokens, so the two logins read as one product. The corporate LIGHT
   register: white stage, black ink, hairline rules, Fragment Mono labels, the
   bevel shape system, one violet signal per view (the primary action). Flat by
   doctrine: no card slabs, no shadows, hairline-ruled rows and tonal steps only.

   Store deltas from the site file (CLAUDE.md wins): px not rem, Roman-only
   weights (the site's 500 headings land at 400 here), the store's one
   secondary grey (#70777A), kicker at the store's 15px Label Mono.

   Replaces Dawn's customer.css, and the templates no longer carry Dawn's
   `.customer` class on purpose: base.css hangs its pill inputs, floating
   labels, faux-outline buttons and colour-scheme text on that class, and
   that is exactly the old design the pages were still wearing. Everything
   here is namespaced .acct-*.

   The pre-footer circuit band (.bs-prefooter, bs-chrome.css) is absolutely
   pinned to the foot of <main> at z-index 0. The customer templates render
   straight into main with no .shopify-section wrapper, so nothing lifted them
   above the band and the art painted across the whole form. .acct sits at
   z-index 1, same construction as the site's .acct > section rule.
   ============================================================================= */

.acct {
  position: relative; z-index: 1;
  color: #0a0a0c;
  font-family: var(--font-display);
  font-weight: 400;
}
.acct [hidden] { display: none !important; }
.acct-container {
  width: 100%; max-width: var(--desktopMaxWidth);
  margin-inline: auto; padding: 0 16px;
  box-sizing: border-box;
}

/* ---- Page head ------------------------------------------------------------ */
.acct-head { padding-top: 40px; }
@media (min-width: 992px) { .acct-head { padding-top: 48px; } }
.acct-head .acct-container { padding-bottom: 40px; }
.acct-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px; line-height: 1; letter-spacing: .04em;
  text-transform: uppercase; color: #70777A;
}
.acct-kicker::before { content: "/ "; }
.acct-kicker a { color: inherit; text-decoration: none; }
.acct-kicker a:hover { color: #0a0a0c; }
/* Large: 64/72 desktop, 36/42 mobile. Dawn's h1 rule sets its own size,
   spacing and colour on the bare tag, so every one of those is restated. */
.acct-title {
  margin: 16px 0 0; max-width: 18ch; text-wrap: balance;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 5vw, 64px); line-height: 1.12; letter-spacing: -.015em;
  color: #0a0a0c; word-break: normal;
}
.acct-title:focus { outline: none; }
.acct-sub {
  margin: 16px 0 0; max-width: 52ch;
  font-size: 18px; line-height: 24px; color: #70777A;
}

/* ---- Body ----------------------------------------------------------------- */
.acct-wrap { padding: 24px 0 80px; }
@media (min-width: 992px) { .acct-wrap { padding-bottom: 120px; } }

/* One quiet column keyed to the same left edge as the page head. No card
   chrome around the form: the white stage is the surface. */
.acct-form { max-width: 400px; margin: 0; }
.acct-form--wide { max-width: 640px; }
.acct-field { margin: 0 0 20px; }
.acct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .acct-row { grid-template-columns: 1fr; } }
.acct-label {
  display: block; margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12px; line-height: 1; letter-spacing: .06em;
  text-transform: uppercase; color: #70777A;
}
.acct-input {
  display: block; width: 100%; min-height: 46px; margin: 0; padding: 0 14px;
  box-sizing: border-box;
  font-family: var(--font-display); font-weight: 400; font-size: 16px; line-height: 20px;
  color: #0a0a0c; background: transparent;
  border: 1px solid var(--hairline); box-shadow: none;
  border-radius: 2px 2px 12px 2px; corner-shape: round round bevel round;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur) var(--ease-signature);
}
.acct-input:hover { border-color: #70777A; }
.acct-input:focus { outline: none; border-color: var(--brand); }
.acct-input[aria-invalid="true"] { border-color: #0a0a0c; }
.acct-input::placeholder { color: rgba(112, 119, 122, .65); }

/* Native select wearing the input ring; the caret is the store's own mark. */
.acct-select { position: relative; }
.acct-select .acct-input { padding-right: 40px; cursor: pointer; }
.acct-select svg {
  position: absolute; right: 16px; top: 50%; width: 10px; height: 6px;
  margin-top: -3px; pointer-events: none; color: #0a0a0c;
}

.acct-check { display: flex; align-items: center; gap: 10px; margin: 4px 0 24px; font-size: 16px; line-height: 20px; }
.acct-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.acct-check label { margin: 0; }

/* The one violet signal on these views: the primary action. */
.acct-submit, a.acct-submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; margin: 8px 0 0; padding: 0 28px; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; line-height: 1; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  color: #fff; background: var(--brand);
  border: 1px solid var(--brand); box-shadow: none;
  border-radius: 2px 2px 14px 2px; corner-shape: round round bevel round;
  -webkit-appearance: none; appearance: none;
  transition: background-color var(--dur) var(--ease-signature);
}
.acct-submit:hover { background: var(--brand-deep); color: #fff; }
.acct-submit:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.acct-submit[disabled] { opacity: .45; cursor: default; }

/* Quiet secondary action: ghost, hairline ring (a sanctioned outline
   component, not a boxed card). */
.acct-btn, a.acct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; margin: 0; padding: 0 20px; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; line-height: 1; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  color: #0a0a0c; background: transparent;
  border: 1px solid var(--hairline); box-shadow: none;
  border-radius: 2px 2px 14px 2px; corner-shape: round round bevel round;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur) var(--ease-signature);
}
.acct-btn:hover { border-color: #70777A; color: #0a0a0c; }
.acct-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.acct-btn--small, .acct-line__act .acct-btn, .acct-me__actions .acct-btn { min-height: 38px; padding: 0 16px; }
.acct-btn svg { width: 14px; height: 14px; }

.acct-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.acct-actions .acct-submit, .acct-actions .acct-btn { margin: 0; }

/* Under-form alternates ("Forgot your password?" etc.) */
.acct-alt {
  margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--hairline);
  font-size: 15px; line-height: 26px; color: #70777A;
}
/* a second alternates block (the "wrong login?" pointer) shares the rule */
.acct-alt + .acct-alt { margin-top: 12px; padding-top: 0; border-top: 0; }
.acct-alt a, .acct-back {
  color: #0a0a0c; text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: border-color var(--dur);
}
.acct-alt a:hover, .acct-back:hover { border-color: #0a0a0c; color: #0a0a0c; }
.acct-back {
  display: inline-block; margin: 0 0 32px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6; letter-spacing: .06em;
  text-transform: uppercase;
}

/* Status notes. Error keeps ink (violet is reserved for the action); the
   mono voice + slash prefix carries the signal. */
.acct-error {
  margin: 0 0 20px;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6; letter-spacing: .02em;
  text-transform: uppercase; color: #0a0a0c;
}
.acct-error::before { content: "/ "; color: var(--brand); }
.acct-error:focus { outline: none; }
.acct-error a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.acct-ok { margin: 0 0 24px; max-width: 52ch; font-size: 18px; line-height: 24px; color: #70777A; }
.acct-ok:focus { outline: none; }

/* ---- Login / recover: two views, one page --------------------------------
   Shopify serves both forms at /account/login; the recover view is reached
   by #recover (Dawn's own :target switch, kept because the "forgot" link
   and Shopify's recover redirect both rely on it). */
.acct-login #recover { display: none; }
.acct-login #recover:target { display: block; }
.acct-login #recover:target ~ #login { display: none; }
.acct-login #recover, .acct-login #login { scroll-margin-top: 160px; }

/* ---- Account home --------------------------------------------------------- */
/* Signed-in strip: who + sign out. A hairline row, not a banner. */
.acct-me {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  padding: 16px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.acct-me__who {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.4; letter-spacing: .04em;
  text-transform: uppercase; color: #0a0a0c; overflow-wrap: anywhere;
}
.acct-me__who span { color: #70777A; }
.acct-me__actions { margin-left: auto; display: flex; gap: 12px; }

/* Section rows (orders, details, addresses) */
.acct-sec { padding: 40px 0; border-bottom: 1px solid var(--hairline); }
.acct-sec:last-child { border-bottom: 0; }
.acct-sec > h2, .acct-panel > h2 {
  margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 24px; line-height: 32px; letter-spacing: -.01em; color: #0a0a0c;
}
.acct-sec > p { margin: 0 0 20px; max-width: 56ch; font-size: 18px; line-height: 24px; color: #70777A; }
.acct-sec > .acct-btn { margin-top: 4px; }
.acct-panel { margin-top: 24px; }
.acct-panel > h2 { margin-bottom: 24px; }

/* Address blocks (format_address output: one <p> with <br>s) */
.acct-address { margin: 0 0 20px; }
.acct-address p { margin: 0; font-size: 16px; line-height: 24px; color: #0a0a0c; }

/* ---- Rows ----------------------------------------------------------------- */
/* One row = label voice + value, optional action or figure at the right. */
.acct-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 8px 24px; padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
}
.acct-line:first-of-type { border-top: 1px solid var(--hairline); }
.acct-line__label {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; letter-spacing: .06em;
  text-transform: uppercase; color: #70777A;
}
.acct-line__value { margin-top: 4px; font-size: 18px; line-height: 24px; color: #0a0a0c; }
.acct-line__value a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hairline); transition: border-color var(--dur); }
.acct-line__value a:hover { border-color: #0a0a0c; }
.acct-line__value .mono, .acct-mono { font-family: var(--font-mono); font-size: 15px; letter-spacing: .02em; }
.acct-line__note { margin-top: 6px; font-size: 14px; line-height: 20px; color: #70777A; }
.acct-line__note span { display: block; }
.acct-line__note a { color: #0a0a0c; text-decoration: none; border-bottom: 1px solid var(--hairline); }
.acct-line__note a:hover { border-color: #0a0a0c; }
.acct-line__figure { text-align: right; font-family: var(--font-mono); font-size: 15px; line-height: 1.5; letter-spacing: .02em; color: #0a0a0c; white-space: nowrap; }
.acct-line__figure small { display: block; font-size: 12px; color: #70777A; }
.acct-line__figure s { color: #70777A; }
@media (max-width: 640px) {
  .acct-line { grid-template-columns: minmax(0, 1fr); }
  .acct-line__act { justify-self: start; }
  .acct-line__figure { text-align: left; }
}

/* Order totals: quiet ledger, the grand total on an ink rule. */
.acct-totals { margin-top: 24px; max-width: 480px; margin-left: auto; }
.acct-totals div { display: flex; justify-content: space-between; gap: 24px; padding: 10px 0; font-size: 16px; line-height: 24px; }
.acct-totals div span:last-child { font-family: var(--font-mono); font-size: 15px; letter-spacing: .02em; }
.acct-totals div:first-child { border-top: 1px solid var(--hairline); padding-top: 16px; }
.acct-totals .acct-totals__grand { margin-top: 6px; padding-top: 16px; border-top: 1px solid #0a0a0c; font-size: 18px; }
.acct-totals .acct-totals__grand span:last-child { font-size: 18px; }
.acct-totals__sub { display: block; font-size: 14px; color: #70777A; }

.acct-cols { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 768px) { .acct-cols { grid-template-columns: 1fr 1fr; gap: 0 24px; } .acct-cols .acct-sec { border-bottom: 0; } }
.acct-status { margin: 0 0 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: #70777A; }
.acct-status strong { font-weight: 400; color: #0a0a0c; }

.acct-empty { padding: 8px 0 0; font-size: 18px; line-height: 24px; color: #70777A; }

/* Address list (the Dawn toggle contract: a button[aria-expanded] followed by
   the div[id] it controls, both inside [data-address]; customer.js flips the
   attribute, this rule shows the panel). */
.acct-list { list-style: none; margin: 0; padding: 0; }
.acct-list .acct-sec:first-child { border-top: 1px solid var(--hairline); }
.acct [data-address] [aria-expanded="false"] ~ div[id] { display: none; }
.acct [data-address] [aria-expanded="true"] ~ div[id] { display: block; }

/* Pagination */
.acct-pagination { margin-top: 32px; }
.acct-pagination ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.acct-pagination li a, .acct-pagination li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 8px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em;
  color: #70777A; text-decoration: none; border-bottom: 1px solid transparent;
}
.acct-pagination li a:hover { color: #0a0a0c; }
.acct-pagination li [aria-current] { color: #0a0a0c; border-bottom-color: #0a0a0c; }
.acct-pagination li svg { width: 10px; height: 6px; }
.acct-pagination li:first-of-type a svg { transform: rotate(90deg); }
.acct-pagination li:last-of-type a svg { transform: rotate(-90deg); }

/* ---- Bevel fallback — no corner-shape support (Safari/iOS, Firefox).
   Convention + polygon template in bs-chrome.css ("BEVEL FALLBACK").
   The submit is a fill (its border matches the violet) and takes the cut;
   the input / ghost button are hairline rings, and the clip would notch
   them, so they keep the quiet corner. ---- */
@supports not (corner-shape: round round bevel round) {
  .acct-submit, a.acct-submit {
    border-radius: 2px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 14px), calc(100% - 14px) 100%, -80px calc(100% + 80px));
  }
  .acct-input, .acct-btn, a.acct-btn { border-radius: 2px; }
}