/* ==========================================================================
   Equinova account dashboard — profile, orders, addresses and points.
   Shared chrome, tokens and the modal shell come from storefront.css.
   ========================================================================== */

.wrap.account{ max-width:1100px; }

.card{ background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; }
@media(max-width:520px){ .card{ padding:18px 16px; } }

/* .account-loading was a padded box 420px wide holding two skeleton lines, and it was the loading
   state for this page and for the order page both. Neither uses it now: each holds the shape of
   what it is waiting for, built from that page's own classes, so there is no loading box left to
   give a width to. */

/* ---- Signed out ---- */

.account-gate{ margin:44px 0 80px; max-width:620px; }
.account-gate h1{ font-size:var(--type-xl); margin:8px 0 12px; }
.account-gate p{ color:var(--text-secondary); font-size:var(--type-sm); line-height:1.65; margin:0 0 22px; }
/* align-items is load-bearing and was missing. These rows pair a .btn-primary with a .btn-ghost,
   and the two are not the same shape: the pill carries 15px of vertical padding, the ghost has no
   box of its own on desktop — it is a colour and a weight on bare text. A flex row defaults to
   align-items:stretch, so the ghost was being stretched to the pill's height with its label left
   sitting at the top of that height, a few pixels above the pill's label. Centre, because two
   labels on one line should read as one line. */
.gate-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* ---- Header ---- */

.account-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.account-head h1{ font-size:var(--type-xl); margin:8px 0 0; overflow-wrap:anywhere; }
.member-since{ color:var(--text-muted); font-size:var(--type-sm); margin:6px 0 0; }

/* ---- The four sections ----
   Links, not tabs. Each goes to an address the server answers, so one can be middle-clicked into
   a new tab and pasted into an email; the script only saves the round trip. ARIA tab roles would
   promise arrow-key movement between panels that these do not have.

   The row wraps at phone width rather than scrolling sideways. There are four of them and the
   last is Points, so a strip that scrolls is a strip where somebody's points sit off the edge of
   a screen they were never told to swipe. Two short lines beats one hidden one. */

.account-nav{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:22px 0 12px; border-bottom:1px solid var(--border);
}
.account-nav a{
  display:inline-block; padding:9px 16px; border-radius:999px; border:1px solid transparent;
  font-size:var(--type-sm); font-weight:600; color:var(--text-secondary); text-decoration:none;
}
.account-nav a:hover{ color:var(--text-heading); background:var(--surface-sunken); }
.account-nav a[aria-current="page"]{
  color:var(--text-heading); background:var(--surface-sunken); border-color:var(--border-accent);
}
.account-nav a:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
@media (pointer: coarse){
  .account-nav a{ display:flex; align-items:center; min-height:44px; }
}

/* ---- Layout ----
   One section on screen at a time, which leaves one full-width column and nothing to strand.

   The four cards used to sit in a two-column grid with the orders card spanning both rows, since
   the orders were the tallest thing and the other three were short. That span is what made the
   hole: row one was as tall as the orders beside it, the Points card filling it ran to three
   lines, and the rest of the row stayed empty until row two began. align-items:start is what kept
   the horses card down at the top of its own row instead of letting it rise into the space.

   Pushing the horses card up with a negative margin would have moved the card and left the row
   the wrong height — the hole would still be there with something sitting over it. The grid was
   the fault, so the grid is what went. Full width is the right shape for the case this page is
   for anyway: a hundred order summaries read better across the page than down a column two
   thirds of it wide. */

.account-sections{ padding:22px 0 80px; }
.account-sections h2{ font-family:var(--serif); font-size:var(--type-lg); color:var(--text-heading); margin:0 0 14px; }
/* Focused by the script so a screen reader reads the section that was just chosen. A mouse user
   asked for none of that and must not be shown a box because of it. */
.account-sections > section:focus{ outline:none; }
.account-sections > section:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; }
.card-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.card-head h2{ margin:0; }
.btn-ghost.small{ padding:7px 14px; font-size:var(--type-sm); }

.empty{ text-align:center; padding:36px 12px; }
.empty p{ color:var(--text-muted); font-size:var(--type-sm); margin:0 0 18px; }
.empty-inline{ color:var(--text-muted); font-size:var(--type-sm); margin:6px 0; }

/* ---- Points ---- */

.points-balance{ font-size:var(--type-md); color:var(--text-secondary); margin:0; }
.points-balance strong{ font-family:var(--serif); font-size:var(--type-2xl); color:var(--text-heading); margin-right:6px; }
.points-value{ color:var(--text-muted); font-size:var(--type-sm); margin:4px 0 16px; }
.points-note{ color:var(--text-muted); font-size:var(--type-sm); line-height:1.6; margin:16px 0 0; }

.points-history summary{
  cursor:pointer; font-size:var(--type-sm); font-weight:600; color:var(--text-heading);
  padding:10px 0; border-top:1px solid var(--border);
}
.ledger{ list-style:none; margin:0; padding:0; }
.ledger li{
  display:grid; grid-template-columns:auto 1fr auto; gap:4px 12px;
  padding:10px 0; border-bottom:1px solid var(--border); font-size:var(--type-sm);
}
.ledger li:last-child{ border-bottom:none; }
.ledger-points{ font-weight:700; font-variant-numeric:tabular-nums; }
.ledger li.earn .ledger-points{ color:var(--text-heading); }
.ledger li.spend .ledger-points{ color:var(--danger); }
.ledger-reason{ color:var(--text-secondary); min-width:0; overflow-wrap:anywhere; }
.ledger-date{ color:var(--text-muted); white-space:nowrap; }
/* The running total sits under the reason on its own line, right-aligned to the points column. */
.ledger-balance{ grid-column:2 / -1; color:var(--text-muted); font-variant-numeric:tabular-nums; text-align:right; }
.ledger-balance::before{ content:"balance "; }

/* ---- How you sign in ----
   A list of the ways in, then the form that adds the one that is missing. Deliberately plain: the
   card is read once, by somebody who came here to change one thing, and a panel dressed up as a
   security screen would only make a short job look like a long one. */

.sign-in-ways{ list-style:none; margin:0; padding:0; }
.sign-in-ways li{
  font-size:var(--type-sm); color:var(--text-secondary); line-height:1.6;
  padding:10px 0; border-bottom:1px solid var(--border); overflow-wrap:anywhere;
}
.sign-in-ways li:last-child{ border-bottom:none; }
.sign-in-note{ color:var(--text-muted); font-size:var(--type-sm); line-height:1.6; margin:12px 0 20px; }
/* The form's own width, not the card's. Three stacked boxes running the full width of a laptop
   card read as a checkout, and this is two fields and a button. */
#passwordForm{ max-width:420px; }
#passwordForm .account-saved{ margin:0; }

/* The unconfirmed-address notice, between the list of ways in and the password form.
   Warm rather than alarming: nothing is broken and nothing is at risk — receipts may simply be
   going somewhere nobody reads — so it is the accent wash and not the danger one. It is the same
   sunken panel .account-saved uses, which is what keeps it from reading as a second card. */
.account-unverified{
  background:var(--surface-sunken); border:1px solid var(--border-accent);
  border-radius:var(--radius-md); padding:14px 16px; margin:0 0 20px; max-width:420px;
}
.account-unverified p{
  font-size:var(--type-sm); color:var(--text-secondary); line-height:1.6; margin:0 0 12px;
}
.account-unverified strong{ color:var(--text-heading); }
.account-unverified .btn-ghost{ padding:9px 18px; font-size:var(--type-sm); }
.account-unverified .auth-error,
.account-unverified .account-saved{ margin:12px 0 0; }

/* ---- Orders: the list ----
   Each summary is a link to the order's own page carrying the four things somebody scanning a
   hundred of them is matching against: the number, where it stands, when it was placed and where
   it went, and what it cost. Two rows, so the second wraps on a phone without the first breaking
   apart. The whole card is the link — a row of small targets beside a card that is not clickable
   is a thumb hunting for the right one. */

.order-summary{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:12px;
}
.order-summary:last-child{ margin-bottom:0; }
.order-summary:hover{ border-color:var(--border-accent); background:var(--surface-sunken); }
.order-summary:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.order-summary-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.order-number{ font-family:var(--serif); font-size:var(--type-md); color:var(--text-heading); }
.order-summary-foot{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px; margin-top:8px; }
.order-summary-foot .order-date{ margin:0; }
.order-where{ color:var(--text-secondary); font-size:var(--type-sm); min-width:0; overflow-wrap:anywhere; }
/* Pushed to the end of its row so the totals line up down the list however long the destinations
   are. On a phone the row wraps and it stays at the end of whichever line it lands on. */
.order-summary-foot .order-total{ margin-left:auto; }

/* ---- The invitation to review, under a delivered order ----
   The card is a link and cannot hold a button, so this is its sibling and the two are grouped.
   Pulled up against the card it belongs to and separated from the next order by the gap the card
   used to carry on its own. */
.order-entry{ margin-bottom:12px; }
.order-entry:last-child{ margin-bottom:0; }
.order-entry .order-summary{ margin-bottom:0; }
.order-reviews{
  margin-top:6px; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:12px 16px 14px; background:var(--surface-sunken);
}
.order-reviews-ask{ margin:0 0 8px; font-size:var(--type-sm); color:var(--text-secondary); }
.order-review-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.order-review{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.order-review-name{
  font-size:var(--type-sm); color:var(--text-heading); min-width:0; overflow-wrap:anywhere;
}

.order-date{ color:var(--text-muted); font-size:var(--type-sm); margin:4px 0 0; }
.order-status{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.status-pill{
  background:var(--surface-sunken); border:1px solid var(--border-accent); border-radius:999px;
  padding:4px 12px; font-size:var(--type-xs); font-weight:600; color:var(--text-heading); white-space:nowrap;
}
.order-total{ font-weight:700; font-size:var(--type-sm); color:var(--text-heading); }

/* ---- One order, on its own page ----
   Linkable and printable, which is the whole reason it is a page and not a panel. One block per
   question — where it went, what was in it, what it came to, what was paid, what came back —
   because that is the order somebody checking a receipt reads it in. */

.wrap.order-page{ max-width:760px; }
.order-back{ display:inline-block; font-size:var(--type-sm); color:var(--text-secondary); margin:26px 0 0; }
.order-detail{ padding:14px 0 80px; }
.order-detail-head{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:flex-start;
  padding-bottom:20px; border-bottom:1px solid var(--border);
}
.order-detail-head h1{
  font-family:var(--serif); font-size:var(--type-xl); color:var(--text-heading);
  margin:6px 0 0; overflow-wrap:anywhere;
}
.order-block{ padding:20px 0; border-bottom:1px solid var(--border); }
.order-block h2{ font-family:var(--serif); font-size:var(--type-md); color:var(--text-heading); margin:0 0 12px; }
.order-address{ font-size:var(--type-sm); color:var(--text-secondary); line-height:1.6; margin:0; }
.order-address-phone{ font-size:var(--type-sm); color:var(--text-muted); margin:6px 0 0; }
.order-payment{ font-size:var(--type-sm); color:var(--text-secondary); line-height:1.6; margin:0; }

/* The total taken apart, one row each. Every tax is its own row under its own name and rate,
   because in Canada they are not one thing: a shopper in British Columbia is charged GST and PST
   by different authorities at different rates, and "$14.16 tax" cannot be checked by the person
   who paid it. */
.order-lines{ margin:0; }
.order-lines > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:7px 0; font-size:var(--type-sm);
}
.order-lines dt{ color:var(--text-secondary); min-width:0; overflow-wrap:anywhere; }
.order-lines dd{ margin:0; color:var(--text-heading); font-variant-numeric:tabular-nums; white-space:nowrap; }
.order-lines > div.order-lines-total{
  border-top:1px solid var(--border); margin-top:6px; padding-top:12px; font-weight:700;
}
.order-lines-total dt{ color:var(--text-heading); }

.order-detail footer{ margin-top:20px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }

/* Picture, count, name, price — with the size and colour under the name. The picture spans both
   rows so the line reads as one thing, and the column is held open even on a line that has no
   picture to put in it. */
.order-items{ list-style:none; margin:0; padding:0; }
.order-items li{
  display:grid; grid-template-columns:auto auto 1fr auto; gap:2px 10px; align-items:center;
  padding:10px 0; border-top:1px solid var(--border); font-size:var(--type-sm); color:var(--text-secondary);
}
.order-items .order-item-photo,
.order-items .order-item-photo-link{ grid-row:1 / span 2; grid-column:1; }
.order-items .order-item-photo{
  display:block; width:58px; height:70px; object-fit:cover;
  border-radius:var(--radius-sm); background:var(--surface-sunken);
}
.order-items .qty{ font-weight:600; color:var(--text-heading); font-variant-numeric:tabular-nums; }
.order-items .order-item-name{ min-width:0; overflow-wrap:anywhere; }
/* A line that still has a page behind it reads as heading-coloured text and underlines on hover,
   the same as every other link on the receipt. */
.order-item-link{ color:var(--text-heading); text-decoration:none; }
.order-item-link:hover{ text-decoration:underline; }
.order-items .variant{ grid-column:3; font-size:var(--type-xs); color:var(--text-muted); }
.order-items .line-total{ grid-row:1; grid-column:4; white-space:nowrap; }

/* ---- What happened to the money ----
   Its own block rather than one more line under the total, because it answers a different
   question from the rest. The lines above say what was charged; this says what came back and when.

   Same three-column shape as the points ledger: figure, what it was for, when. Two lists of
   amounts and dates on one page should not be laid out two different ways. */
.refund-list{ list-style:none; margin:0; padding:0; }
.refund-list li{
  display:grid; grid-template-columns:auto 1fr auto; gap:4px 12px;
  padding:8px 0; border-bottom:1px solid var(--border); font-size:var(--type-sm);
}
.refund-list li:last-child{ border-bottom:none; }
.refund-amount{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--text-heading); }
.refund-why{ color:var(--text-secondary); min-width:0; overflow-wrap:anywhere; }
.refund-date{ color:var(--text-muted); white-space:nowrap; }
.refund-note{ color:var(--text-muted); font-size:var(--type-sm); line-height:1.6; margin:10px 0 0; }

/* Money the shop still owes. Marked out from the ordinary muted note because it is the one line
   on this page a customer may need to act on. */
.order-owed{
  border-left:2px solid var(--danger); padding-left:12px; margin-top:12px;
  color:var(--text-secondary);
}

/* ---- Asking to cancel or send something back ----
   The customer's half of a return. It sits inside the order card rather than in a modal, because
   the thing being written about is the order and taking it off screen to write about it helps
   nobody. The shop's answer comes back to the same place. */

/* Why the button is not there, in the server's words. Sent on every order so a missing control is
   explained rather than simply absent. */
.order-note{ color:var(--text-muted); font-size:var(--type-sm); line-height:1.5; }

.return-form{ margin-top:14px; border-top:1px solid var(--border); padding-top:14px; }
.return-form label{
  display:block; font-size:var(--type-sm); font-weight:600; color:var(--text-heading); margin-bottom:8px;
}
.return-form textarea{
  width:100%; font-family:inherit; font-size:var(--type-sm); line-height:1.6; color:var(--text-primary);
  background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 12px; resize:vertical;
}
.return-form textarea:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.return-form-actions{ display:flex; gap:16px; align-items:center; margin-top:12px; flex-wrap:wrap; }

.return-history{ list-style:none; margin:0; padding:0; }
.return-history li{
  border-left:2px solid var(--border-accent); padding:2px 0 2px 12px;
}
.return-history li + li{ margin-top:12px; }
.return-asked{ font-size:var(--type-sm); color:var(--text-secondary); margin:0; line-height:1.5; }
.return-state{ font-weight:600; color:var(--text-heading); }
/* The customer's own words, set apart so they read as a quotation of what was sent rather than
   as more of the shop's copy. */
.return-reason{
  font-size:var(--type-sm); color:var(--text-muted); font-style:italic;
  margin:6px 0 0; padding:0; line-height:1.6; overflow-wrap:anywhere;
}
.return-answer{
  font-size:var(--type-sm); color:var(--text-secondary); margin:8px 0 0; line-height:1.6;
  overflow-wrap:anywhere;
}
.return-answer strong{ color:var(--text-heading); }

/* ---- Addresses ---- */

.addresses-note{ color:var(--text-muted); font-size:var(--type-sm); line-height:1.6; margin:0 0 16px; }
.address-card{
  border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:12px;
  display:flex; justify-content:space-between; gap:14px; align-items:flex-start; flex-wrap:wrap;
}
.address-card.is-default{ border-color:var(--border-accent); background:var(--surface-sunken); }
.address-card:last-child{ margin-bottom:0; }
.address-body{ min-width:0; }
.address-card h3{ font-size:var(--type-sm); font-weight:700; color:var(--text-heading); margin:0; display:inline; }
.default-pill{
  display:inline-block; margin-left:8px; font-size:var(--type-xs); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-heading); border:1px solid var(--border-accent);
  border-radius:999px; padding:2px 8px;
}
.address-card p{ font-size:var(--type-sm); color:var(--text-secondary); margin:6px 0 0; line-height:1.55; }
.address-phone{ color:var(--text-muted); font-size:var(--type-sm); }
/* .link-btn and its danger variant are in storefront.css, where the bag's Remove reads them too. */
.address-actions{ display:flex; gap:12px; flex-shrink:0; }

/* ---- Horses, and the rider's own size ---- */

.horses-note{ color:var(--text-muted); font-size:var(--type-sm); line-height:1.6; margin:0 0 16px; }
.horse-card{
  border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:12px;
  display:flex; justify-content:space-between; gap:14px; align-items:flex-start; flex-wrap:wrap;
}
.horse-card.is-default{ border-color:var(--border-accent); background:var(--surface-sunken); }
.horse-card:last-child{ margin-bottom:0; }
.horse-body{ min-width:0; }
.horse-card h3{ font-size:var(--type-sm); font-weight:700; color:var(--text-heading); margin:0; display:inline; }
.horse-size{ font-size:var(--type-sm); color:var(--text-secondary); margin:6px 0 0; }

.rider-size{ margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
.rider-size-heading{
  font-size:var(--type-sm); text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-heading); font-weight:700; margin:0 0 6px;
}
/* One row per sizing system, so the label sits beside its own control rather than above a
   column of dropdowns a reader has to count down to match up. */
.rider-size-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.rider-size-row > label{ flex:0 0 150px; font-size:var(--type-sm); color:var(--text-secondary); }
.rider-size-row select{
  flex:1 1 180px; padding:9px 11px; border:1.5px solid var(--border); border-radius:9px;
  font-size:var(--type-sm); color:var(--text-heading); background:var(--surface-raised);
}
.rider-size-row select:focus-visible{ outline:2px solid var(--focus-ring-strong); outline-offset:1px; }
.rider-size-note{ margin:0 0 4px; font-size:var(--type-sm); color:var(--text-muted); line-height:1.6; }

/* .fit-answer played the saved quiz answer back under the rider sizes. Withdrawn with the quiz. */

#horseForm label:not(.sr-only):not(.checkbox-row){
  font-size:var(--type-sm); color:var(--text-muted); font-weight:600; margin-bottom:-4px;
}
#horseForm select{
  width:100%; padding:11px 13px; border:1.5px solid var(--border); border-radius:9px;
  font-size:var(--type-sm); color:var(--text-heading); background:var(--surface-raised);
}

@media (pointer: coarse){
  .rider-size-row select, #horseForm select{ min-height:44px; }
}

.checkbox-row{ display:flex; gap:10px; align-items:center; font-size:var(--type-sm); color:var(--text-secondary); padding:4px 0; }
.checkbox-row input{ width:auto; margin:0; flex-shrink:0; }

/* ==========================================================================
   Printing an order

   The order page is the one thing in this shop somebody prints — as proof of what they paid, or
   to go in the box with something they are sending back. Being printable is half of why it is a
   page and not a modal, so the print rules are part of the feature rather than a nicety.

   What goes: the header, the announcement bar, the footer, the way back to the list, and every
   control. A sheet of paper with a "Buy these again" button on it is a sheet of paper with a
   sentence on it that does nothing. What stays is the order.
   ========================================================================== */

@media print{
  /*
     Paper has no dark mode. The theme is an attribute on the root rather than a media query, so a
     reader printing at night would otherwise get the dark palette — near-white text on white
     paper, and a cartridge spent on the backgrounds. The roles this page uses are put back to the
     light theme's own primitives, not to raw colours, which could not be themed and would amount
     to a third palette hidden in a print block.
  */
  [data-theme="dark"]{
    --surface-page: var(--alabaster);
    --surface-raised: var(--alabaster-raised);
    --surface-sunken: var(--alabaster-deep);
    --text-primary: var(--charcoal);
    --text-heading: var(--forest);
    --text-secondary: var(--ink-60);
    --text-muted: var(--ink-40);
    /* A shade stronger than the border on screen. A hairline at fourteen percent survives a
       display and disappears into an inkjet, and these rules are the only thing separating one
       block of the receipt from the next. */
    --border: var(--ink-40);
    --border-accent: var(--ink-40);
  }

  .announce, header.site, footer.site,
  .order-back, .order-detail footer, .return-form{ display:none; }

  .wrap.order-page{ max-width:none; padding:0; }
  .order-detail{ padding:0; }
  /* A receipt cut in half across a page break is a receipt somebody has to hold up to the light
     to read. Each block is short enough to keep whole. */
  .order-block{ break-inside:avoid; }
}