/* Buyer account (UI-40 overview, UI-41 My designs; UI-42 to UI-44 to follow). Look A's tokens, header and footer come
   from style.css. The idea: the club's own gear, standing on the stage like the store's products, and its orders
   drawn as a golf hole, from the tee (Received) to the flag (Shipped), with the ball where the order is.
   Desktop only for now (D-42). */

body.acct .review-switch { bottom: 12px; }
body.acct .review-switch .review-sep { width: 1px; margin: 6px 4px; background: rgba(255, 255, 255, 0.28); }
body.acct .review-switch a[aria-current="true"] { background: #fff; color: #111; }
.acct {
  --rough: #B8C2BF;   /* white + 30% Pine: the part of the hole still to play (decorative; the words carry the stage) */
  --radius-pic: 20px; /* gallery pictures: between the stage bands (28) and the thumbnails (16) */
}

/* ---- Masthead: whose account it is and who's signed in ---- */
.acct .acct-top { padding-top: 44px; }
.acct .club { display: flex; align-items: center; gap: 24px; }
.acct .club-mark {
  flex-shrink: 0; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--field-line);
}
.acct .club-mark svg { display: block; width: 100%; height: 100%; }
.acct .club-text { flex: 1 1 auto; min-width: 0; }
.acct .club-name { font-size: 56px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.acct .club-who { margin-top: 12px; font-size: 16px; color: var(--muted); }
.acct .club-who strong { color: var(--ink); font-weight: 600; }
.acct .club > .btn { flex-shrink: 0; }

/* ---- The side menu (D-77) and the page beside it ---- */
.acct .acct-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 64px; align-items: start; margin-top: 56px; }
.acct .side { position: sticky; top: 84px; display: flex; flex-direction: column; }
.acct .side-nav { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.acct .side-nav a, .acct .side-out {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 46px; padding: 0 12px 0 38px;
  border-radius: var(--radius-s); color: var(--muted); font-size: 17px; font-weight: 600; text-decoration: none;
}
.acct .side-nav a:hover, .acct .side-out:hover { background: var(--fill); color: var(--ink); }
.acct .side-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
/* You are here: the same ball that shows where each order is on its hole */
.acct .side-nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: 10px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  background: url("../shared/ball.webp") center / contain no-repeat; filter: drop-shadow(0 1px 1.2px rgba(18, 52, 42, 0.45));
}
.acct .side-count { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.acct .side-out { width: 100%; margin-top: 14px; border: 0; background: none; text-align: left; justify-content: flex-start; font-size: 16px; }
.acct .acct-content { min-width: 0; }

/* ---- Sections ---- */
.acct .acct-section { margin-top: 88px; }
.acct .acct-content > .acct-section:first-child { margin-top: 0; }
.acct .sec-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.acct .sec-head h1, .acct .sec-head h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.acct .sec-links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.acct .sec-links .text-link { font-size: 16px; }

/* The real product with the print on it (the ball render, D-46, or the hat still) */
.acct .acct-hat { display: block; max-width: none; }

/* ---- Where your orders are: one hole per order ---- */
.acct .lanes { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.acct .lane {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) 150px; align-items: center; gap: 32px;
  margin: 0 -20px; padding: 18px 20px; border-radius: var(--radius-l);
}
.acct .lane:hover { background: color-mix(in srgb, var(--accent) 4%, #FFFFFF); }
.acct .lane-pic { width: 112px; height: 112px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-m); background: var(--stage); }
.acct .lane-pic .acct-ball { width: 80%; }
.acct .lane-pic .acct-hat { width: 124%; }
.acct .lane-main { min-width: 0; }
.acct .lane-top { display: flex; align-items: baseline; gap: 16px; }
.acct .lane-num { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.acct .lane-link { text-decoration: none; }
.acct .lane-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-l); }
.acct .lane-link:focus-visible { outline: none; }
.acct .lane-link:focus-visible::after { outline: 3px solid color-mix(in srgb, var(--focus) 55%, transparent); outline-offset: -3px; }
.acct .lane:hover .lane-link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.acct .lane-what { font-size: 16px; color: var(--muted); }
.acct .lane-side { text-align: right; }
.acct .lane-total { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.acct .lane-date { margin-top: 2px; font-size: 14px; color: var(--muted); }

/* The hole: a dotted line still to play, Forest where it's played, the real ball where the order is, the flag at the end */
.acct .hole { margin-top: 14px; }
.acct .hole-line { position: relative; height: 40px; margin: 0 14px 0 4px; }
.acct .hole-line::before { content: ""; position: absolute; left: 0; right: 0; top: 29px; border-top: 2px dotted var(--rough); }
.acct .hole-line::after {
  content: ""; position: absolute; left: 0; top: 28px; width: var(--at); height: 4px; border-radius: 2px; background: var(--accent);
  animation: acct-play 1.1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.2s both;
}
.acct .hole-mid { position: absolute; left: 50%; top: 25px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--rough); }
.acct .hole-mid.is-played { box-shadow: inset 0 0 0 2px var(--accent); }
.acct .hole-pin { position: absolute; left: 100%; top: -10px; margin-left: -2px; color: var(--accent); }
.acct .hole-pin .pin-ic { display: block; }
.acct .hole-ball {
  position: absolute; left: var(--at); top: 9px; width: 22px; height: 22px; margin-left: -11px; max-width: none;
  filter: drop-shadow(0 1px 1.2px rgba(18, 52, 42, 0.45));
  animation: acct-roll 1.1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.2s both;
}
@keyframes acct-roll { from { left: 0; } }
@keyframes acct-play { from { width: 0; } }
.acct .hole-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.acct .hole-stages li:nth-child(2) { text-align: center; }
.acct .hole-stages li:nth-child(3) { text-align: right; }
.acct .hole-stages .is-current { color: var(--ink); font-weight: 700; }

/* ---- Your designs (overview): the chosen designs standing on one stage ---- */
.acct .shelf {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin: 0; padding: 36px 40px 40px; list-style: none;
  background: var(--stage); border-radius: var(--radius-l);
}
.acct .shelf-link { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); text-decoration: none; }
.acct .shelf-pic { width: 100%; height: 290px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.acct .shelf-pic .acct-hat { width: 410px; transform: translateY(-5%); }
.acct .shelf-pic .acct-ball { width: 240px; }
.acct .shelf-name { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.acct .shelf-code { margin-top: 2px; font-size: 16px; color: var(--muted); }
.acct .shelf-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 15px; color: var(--muted); }
.acct .shelf-status.is-ordered { color: var(--accent); font-weight: 600; }
.acct .shelf-link:hover .shelf-name, .acct .logo-link:hover .logo-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---- Your logos: each file as it looks (the JPG on its white ground, the PNG and SVG on a clear one) ---- */
.acct .logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.acct .logo-link { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); text-decoration: none; }
.acct .logo-pic { width: 100%; height: 160px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.acct .logo-art { display: block; }
.acct .logo-art.is-jpg { width: 128px; box-shadow: 0 0 0 1px var(--field-line), 0 2px 6px rgba(18, 52, 42, 0.08); }
.acct .logo-art.is-png { width: 220px; }
.acct .logo-art.is-svg { height: 132px; }
.acct .logo-name { font-size: 16px; font-weight: 600; }
.acct .logo-meta { margin-top: 2px; font-size: 14px; color: var(--muted); }

/* ---- My designs (UI-41): every design, newest first ---- */
.acct .gallery-lede { max-width: 40em; margin: -12px 0 32px; font-size: 16px; color: var(--muted); }
.acct .gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 28px; margin: 0; padding: 0; list-style: none; }
.acct .tile { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; scroll-margin-top: 84px; }
.acct .tile-pic {
  position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3;
  margin-bottom: 20px; overflow: hidden; border-radius: var(--radius-pic); background: var(--stage);
}
/* Arriving from the overview's shelf (account-designs.html#HGS-…), that design is edged in Forest, like a new cart line */
.acct .tile:target .tile-pic { box-shadow: 0 0 0 2px var(--accent); }
.acct .tile-pic .acct-hat { width: 88%; }
.acct .tile-pic .acct-ball { width: 48%; }
.acct .tile-tag {
  position: absolute; left: 16px; top: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600;
}
.acct .tile-tag.is-ordered { color: var(--accent); }
.acct .tile-tag .flag-ic { width: 12px; height: 14px; }
.acct .tile-name { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.acct .tile-code { margin-top: 2px; font-size: 15px; color: var(--muted); }
.acct .tile-desc { margin-top: 12px; font-size: 15px; line-height: 1.45; }
.acct .tile-meta { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.acct .tile-meta a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.acct .tile-actions { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: auto; padding-top: 20px; }
.acct .tile-actions .btn { height: 44px; padding: 0 26px; font-size: 15px; }
.acct .tile-more { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -8px; }
.acct .tile-actions .text-btn { display: inline-flex; align-items: center; text-decoration: none; }
.acct .tile-actions .text-btn:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- Reorder (UI-42): the design's own picture beside the quantity, with the price breaks drawn as a fairway ---- */
.acct .ro {
  width: min(900px, calc(100vw - 64px)); max-width: none; max-height: calc(100vh - 48px); margin: auto; padding: 0; border: 0;
  border-radius: var(--radius-l); background: var(--bg); color: var(--ink); box-shadow: 0 30px 80px rgba(18, 52, 42, 0.24); overflow: auto;
}
.acct .ro::backdrop { background: rgba(18, 52, 42, 0.28); }
.acct .ro[open] { animation: ro-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes ro-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
.acct .ro-box { display: grid; grid-template-columns: 360px minmax(0, 1fr); min-height: 560px; }
.acct .ro-pic { display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--stage); }
.acct .ro-pic .acct-hat { width: 104%; }
.acct .ro-pic .acct-ball { width: 72%; }
.acct .ro-body { position: relative; display: flex; flex-direction: column; padding: 40px 44px; }
.acct .ro-close { position: absolute; top: 14px; right: 14px; }
.acct .ro-title { padding-right: 44px; font-size: 28px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.acct .ro-code { margin-top: 4px; font-size: 15px; color: var(--muted); }
.acct .ro-desc { margin-top: 12px; font-size: 15px; line-height: 1.45; }
.acct .ro-file { white-space: nowrap; }
.acct .ro-last { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--accent); }
.acct .ro-order { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.acct .ro-head { display: flex; align-items: center; gap: 12px; }
.acct .ro-label { font-size: 17px; font-weight: 700; }
.acct .ro-qty-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.acct .ro-stepper input {
  width: 64px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: center;
  font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.acct .ro-stepper input::-webkit-outer-spin-button, .acct .ro-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.acct .ro-stepper input:focus-visible { border-radius: 8px; }
.acct .ro-unit { font-size: 16px; color: var(--muted); }
.acct .ro-min { margin-top: 8px; font-size: 13px; color: var(--muted); }
.acct .ro-min.is-short { color: var(--caution-fg); font-weight: 600; }
/* The fairway: one third per price break; Forest up to your quantity, the real ball at it (it glides when you change it) */
.acct .ro-breaks { --at: 0%; margin-top: 22px; }
.acct .ro-line { position: relative; height: 30px; margin: 0 11px; }
.acct .ro-line::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; border-top: 2px dotted var(--rough); }
.acct .ro-line::after {
  content: ""; position: absolute; left: 0; top: 21px; width: var(--at); height: 4px; border-radius: 2px; background: var(--accent);
  transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.acct .ro-tick { position: absolute; top: 16px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--rough); }
.acct .ro-ball {
  position: absolute; z-index: 1; left: var(--at); top: 1px; width: 22px; height: 22px; margin-left: -11px; max-width: none;
  filter: drop-shadow(0 1px 1.2px rgba(18, 52, 42, 0.45)); transition: left 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.acct .ro-breaks.is-placing .ro-ball, .acct .ro-breaks.is-placing .ro-line::after { transition: none; }
.acct .ro-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
.acct .ro-tier {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 56px; padding: 8px 10px 8px 12px;
  border: 0; border-radius: var(--radius-s); background: none; color: var(--muted); text-align: left;
}
.acct .ro-tier:hover { background: var(--fill); }
.acct .ro-tier-range { font-size: 13px; }
.acct .ro-tier-price { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.acct .ro-tier[aria-pressed="true"] { color: var(--ink); background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.acct .ro-tier[aria-pressed="true"] .ro-tier-price { color: var(--accent); }
.acct .ro-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.acct .ro-each { font-size: 15px; color: var(--muted); }
.acct .ro-sum { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.acct .ro-add { width: 100%; height: 52px; margin-top: 18px; }
/* When an option is no longer sold, the reorder stops here (D-33) */
.acct .ro-stop { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.acct .ro-notice { align-self: stretch; }
.acct .ro-notice p + p { margin-top: 6px; }
.acct .ro-stop-title { font-size: 16px; font-weight: 700; }

/* ---- My logos (UI-43): each logo as its file looks, tried on the club's real gear ---- */
.acct { --checker: #ECEFEE; }   /* white + 8% Pine: the see-through squares behind a file */
.acct .lg-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.acct .lg-row, .acct .lg-new {
  display: grid; grid-template-columns: 168px minmax(0, 1fr) 168px 168px; gap: 28px; align-items: start; padding: 28px 0;
  scroll-margin-top: 84px;
}
.acct .lg-row { border-bottom: 1px solid var(--line); }
/* The file itself, on a light checkerboard, so a clear background reads as clear and a JPG's white box shows */
.acct .lg-file {
  display: flex; align-items: center; justify-content: center; width: 168px; height: 168px; overflow: hidden; border-radius: var(--radius-m);
  background-color: #FFFFFF; background-image: conic-gradient(var(--checker) 25%, #FFFFFF 0 50%, var(--checker) 0 75%, #FFFFFF 0); background-size: 16px 16px;
  box-shadow: inset 0 0 0 1px var(--field-line);
}
.acct .lg-file .logo-art.is-jpg { width: 64%; box-shadow: none; }
.acct .lg-file .logo-art.is-png { width: 88%; }
.acct .lg-file .logo-art.is-svg { height: 70%; }
.acct .lg-upload { max-width: 80%; max-height: 80%; object-fit: contain; }
.acct .lg-pdf { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.acct .lg-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding-top: 4px; }
.acct .lg-name { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; outline: none; }
.acct .lg-meta { font-size: 15px; color: var(--muted); }
.acct .lg-used { font-size: 15px; line-height: 1.45; }
.acct .lg-used a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.acct .lg-remove { margin: 4px 0 0 -8px; color: var(--muted); }
.acct .lg-remove:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* Remove, confirmed in place with the production rule said plainly */
.acct .lg-confirm { align-self: stretch; margin-top: 6px; padding: 14px 16px; border-radius: var(--radius-s); background: var(--fill); }
.acct .lg-confirm-text { font-size: 14px; line-height: 1.45; outline: none; }
.acct .lg-confirm-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.acct .lg-danger { color: #A3261B; border-color: color-mix(in srgb, #A3261B 45%, #FFFFFF); }
.acct .lg-danger:hover { background: color-mix(in srgb, #A3261B 6%, #FFFFFF); }
/* The logo tried on a golf ball and on the rope hat's patch (the home page's Try your logo framing) */
.acct .lg-try { display: flex; flex-direction: column; gap: 10px; color: var(--ink); text-decoration: none; }
.acct .lg-try-pic { position: relative; display: flex; align-items: center; justify-content: center; width: 168px; height: 168px; overflow: hidden; border-radius: var(--radius-m); background: var(--stage); }
.acct .lg-ball { width: 86%; }
/* The hat zoomed 2.2x on its patch, centred (the patch's box in the render: left 42.75%, top 45.6%, 14.5% wide, as
   home.css measured; for zoom Z the render sits at 50% - 50%·Z / 50% - 52.85%·Z and the patch at 50% - 7.25%·Z, 14.5%·Z wide) */
.acct .lg-hat { position: absolute; left: -60%; top: -66.27%; width: 220%; max-width: none; }
.acct .lg-patch { position: absolute; left: 34.05%; top: 34.05%; width: 31.9%; height: 31.9%; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; mix-blend-mode: multiply; }
.acct .lg-patch svg { width: 100%; height: 100%; }
.acct .lg-try-label { font-size: 15px; font-weight: 600; color: var(--accent); }
.acct a.lg-try:hover .lg-try-label { text-decoration: underline; text-underline-offset: 4px; }
.acct .lg-try-label.is-plain { color: var(--muted); font-weight: 500; }
.acct .lg-try-note { grid-column: span 2; align-self: center; font-size: 14px; color: var(--muted); }
/* A new upload: shown on the products before it's saved, on its own stage band */
/* The band reaches out by its padding, so its columns line up with the rows below */
.acct .lg-new { margin: 0 -24px 8px; padding: 24px; border-radius: var(--radius-l); background: var(--stage); }
.acct .lg-new .lg-try-pic { background: var(--surface); }
.acct .lg-new .tick { margin-top: 6px; }
.acct .lg-new .notice { margin-top: 4px; }
.acct .lg-new-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.acct .lg-new.is-error { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.acct .lg-new.is-error .lg-new-actions { margin-top: 12px; }

/* ---- My orders (UI-44): one short list, in progress first, then shipped. Each order is a compact row (the hole drawn
   small) that opens in place, on a stage-grey panel, on the overview's own hole tracker and what's in the order ---- */
.acct .od-group + .od-group { margin-top: 44px; }
.acct .od-group-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.acct .od-group-count { font-size: 15px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.acct .od-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.acct .od { margin: 0 -20px; border-radius: var(--radius-l); scroll-margin-top: 84px; }
.acct .od.is-open { background: var(--stage); }
.acct .od-h { font: inherit; }
.acct .od-row {
  display: grid; grid-template-columns: 72px 200px minmax(0, 1fr) 160px 36px; align-items: center; gap: 24px;
  width: 100%; padding: 14px 20px; border: 0; border-radius: var(--radius-l); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.acct .od:not(.is-open) .od-row:hover { background: color-mix(in srgb, var(--accent) 4%, #FFFFFF); }
.acct .od-pic { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-s); background: var(--stage); }
.acct .od.is-open .od-pic { background: var(--surface); }
.acct .od-pic .acct-ball { width: 80%; }
.acct .od-pic .acct-hat { width: 124%; }
/* Arriving from the overview or Designs (account-orders.html#order-…), that order opens with its picture edged in Forest, as on Designs */
.acct .od.is-open:target .od-pic { box-shadow: 0 0 0 2px var(--accent); }
.acct .od-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct .od-num { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.acct .od-what { font-size: 15px; color: var(--muted); }
.acct .od-row:hover .od-num { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.acct .od-stage { display: flex; align-items: center; gap: 16px; }
.acct .od-stage-name { width: 112px; font-size: 15px; font-weight: 600; }
/* Open, the full hole below says the same, larger: the small one steps aside */
.acct .od-mini { transition: opacity 0.2s ease; }
.acct .od.is-open .od-mini { opacity: 0; }
.acct .od-sum { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.acct .od-total { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.acct .od-when { font-size: 14px; color: var(--muted); }
.acct .od-chev { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ink); transition: transform 0.2s ease; }
.acct .od-row:hover .od-chev { background: var(--surface); box-shadow: 0 0 0 1px var(--field-line); }
.acct .od-row[aria-expanded="true"] .od-chev { transform: rotate(180deg); }

/* The hole drawn small: dotted still to play, Forest where it's played, the ball where the order is, the flag at the end */
.acct .od-mini { position: relative; flex: none; width: 92px; height: 26px; color: var(--accent); }
.acct .od-mini-line { position: absolute; left: 0; right: 10px; top: 20px; border-top: 2px dotted var(--rough); }
.acct .od-mini-line::after { content: ""; position: absolute; left: 0; top: -3px; width: var(--at); height: 4px; border-radius: 2px; background: var(--accent); }
.acct .od-mini-mid { position: absolute; left: 50%; top: -5px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--rough); }
.acct .od-mini-mid.is-played { box-shadow: inset 0 0 0 2px var(--accent); }
.acct .od-mini-ball { position: absolute; left: var(--at); top: -14px; width: 14px; height: 14px; margin-left: -7px; max-width: none; filter: drop-shadow(0 1px 1px rgba(18, 52, 42, 0.45)); z-index: 1; }
.acct .od-mini-pin { position: absolute; right: 0; top: -2px; display: block; }

/* The open order: where it is, and what's in it, under the row's words */
.acct .od-more { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; padding: 4px 76px 30px 116px; }
.acct .od-more .hole { margin-top: 0; }
.acct .od-now { margin-top: 14px; font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.acct .od-status { display: inline-block; margin-top: 12px; }
.acct .od-design { padding-top: 6px; }
.acct .od-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.acct .od-code { margin-top: 2px; font-size: 15px; }
.acct .od-code a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.acct .od-desc { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.acct .od-qty { margin-top: 10px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }