/* Account page: centred glass auth card, then a bento dashboard preview */

/* ---------- Auth ---------- */
.account__auth { position: relative; isolation: isolate; display: grid; gap: var(--s-6); justify-items: center; padding-block: var(--s-4) var(--s-3); }
.account__auth .mesh { opacity: 0.32; border-radius: var(--r-4); background: none; }
.account__auth .mesh i:nth-child(1) { left: -20%; top: -30%; --dur: 26s; }
.account__auth .mesh i:nth-child(2) { right: -25%; top: 10%; --dur: 30s; }
.account__auth .mesh i:nth-child(3) { left: 25%; bottom: -60%; opacity: 0.4; --dur: 24s; }

.account__card { width: 100%; max-width: 480px; display: grid; gap: var(--s-5); padding: var(--s-5); border-radius: var(--r-4); background: rgb(21 21 24 / 0.55); }
@media (min-width: 640px) { .account__card { padding: var(--s-6); } }
.account__seg { display: grid; width: 100%; }
.account__seg button { min-height: var(--tap); }
.account__form { gap: var(--s-4); }
.account__form .btn[type="submit"] { margin-top: var(--s-1); }
.account__checks { gap: 0; }

/* Password field with reveal toggle */
.account__pw { position: relative; }
.account__pw .input { padding-right: 86px; }
.account__show { position: absolute; top: 3px; right: 3px; bottom: 3px; min-width: 64px; padding: 0 12px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); border-radius: var(--r-pill); transition: color var(--t-fast), background var(--t-fast); }
.account__show:hover { color: var(--fg); background: rgb(255 255 255 / 0.08); }
.account__show[aria-pressed="true"] { color: var(--lime-ink); background: var(--lime); }
.account__show:focus-visible { outline-offset: -2px; }

.account__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-1) var(--s-4); }
.account__forgot { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--text-sm); font-weight: 600; color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fg-3); transition: color var(--t-fast), text-decoration-color var(--t-fast); }
.account__forgot:hover { color: var(--fg); text-decoration-color: var(--lime); }
.account__note { padding-top: var(--s-4); border-top: 1px solid var(--line); max-width: none; }

/* Perks row under the card */
.account__perks { display: grid; gap: var(--s-3); width: 100%; max-width: 880px; }
@media (min-width: 720px) { .account__perks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.account__perk { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-4); background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-3); transition: border-color var(--t-fast), transform var(--t-base) var(--ease-expo); }
@media (hover: hover) { .account__perk:hover { border-color: var(--line-strong); transform: translateY(-2px); } }
.account__perk-ic { width: 36px; height: 36px; display: grid; place-items: center; background: var(--glass-2); border: 1px solid var(--glass-line); border-radius: 50%; }
.account__perk-ic svg { width: 16px; height: 16px; stroke: var(--lime); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.account__perk strong { display: block; font-size: var(--text-sm); font-weight: 600; letter-spacing: -0.01em; }
.account__perk p { margin-top: 2px; font-size: var(--text-sm); color: var(--fg-2); }

/* ---------- Dashboard ---------- */
/* The entrance animates the dash's children, not the dash: scrollIntoView reads the dash's box the moment it appears,
   and a translated container would land the scroll 18px short of its scroll margin. */
.account__dash > * { animation: accIn var(--t-slow) var(--ease-expo) both; }
@keyframes accIn { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .account__dash > * { animation: none; } }
/* The page scrolls itself to the dash (on preview) and to the tab strip (tile "go" buttons).
   On desktop the glass dock is fixed at the top, so both land below it; on phones the dock is at the bottom. */
.account__dash, .account__tabs .tabs__list { scroll-margin-top: var(--s-4); }
@media (min-width: 900px) { .account__dash, .account__tabs .tabs__list { scroll-margin-top: var(--page-top); } }
/* Every small pill in the dashboard (Sign out, Add address, order actions) reaches the tap size on touch */
@media (pointer: coarse) { .account__dash .btn--sm { min-height: var(--tap); } }
/* Switches keep their 46×26 pill but accept a 44px-tall tap; the rows around them are labels, so the whole row toggles */
@media (pointer: coarse) { .account__dash .switch::before { content: ""; position: absolute; inset: -9px -4px; } }

.account__dash-head { display: grid; gap: var(--s-4); padding-bottom: var(--s-5); margin-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
@media (min-width: 800px) { .account__dash-head { grid-template-columns: 1fr auto; align-items: end; } }
.account__dash-head h2 { margin-top: var(--s-3); }
.account__dash-head h2:focus-visible { outline-offset: 8px; }
.account__dash-head p { margin-top: var(--s-2); }
.account__dash-head .btn { justify-self: start; }
@media (min-width: 800px) { .account__dash-head .btn { justify-self: end; } }

/* Bento */
.account__bento { display: grid; gap: 12px; margin-bottom: var(--s-7); }
@media (min-width: 640px) {
  .account__bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account__tile--orders, .account__tile--drop { grid-column: span 2; }
}
/* Tablet: Saved + Addresses share a row, so the Member tile takes the full last row as a three-up stat strip */
@media (min-width: 640px) and (max-width: 899.98px) {
  .account__tile--member { grid-column: span 2; }
  .account__member { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
  .account__member div { flex-direction: column; align-items: start; gap: var(--s-2); }
  .account__member dd { text-align: left; }
}
@media (min-width: 900px) {
  .account__bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
  .account__tile--orders { grid-column: span 7; }
  .account__tile--drop { grid-column: span 5; }
  .account__tile--saved, .account__tile--addr, .account__tile--member { grid-column: span 4; }
}
.account__tile { position: relative; display: grid; align-content: start; gap: var(--s-4); min-width: 0; padding: var(--s-5); border-radius: var(--r-3); overflow: hidden; isolation: isolate; transition: transform var(--t-base) var(--ease-expo), border-color var(--t-fast); }
@media (hover: hover) { .account__tile:hover { transform: translateY(-2px); border-color: var(--line-strong); } }
.account__tile-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 30px; }
.account__big { font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; font-variation-settings: "opsz" 96; }
.account__go { justify-self: start; margin-top: auto; padding-top: var(--s-2); }
.account__tile .link { min-height: var(--tap); }

/* Orders tile */
.account__olist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s-3); align-items: center; padding-block: var(--s-3); border-top: 1px solid var(--line); }
.account__olist-main { display: grid; gap: 2px; min-width: 0; }
.account__olist-main .t-sm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account__olist li > .tag { grid-column: 2; grid-row: 1; justify-self: end; }
.account__olist li > .t-xs { grid-column: 1; grid-row: 2; }
@media (min-width: 720px) {
  .account__olist li { grid-template-columns: minmax(0, 1fr) auto auto; }
  .account__olist li > .t-xs { grid-column: 2; grid-row: 1; }
  .account__olist li > .tag { grid-column: 3; }
}

/* Drop access tile */
.account__tile--drop { border-color: rgb(216 255 63 / 0.3); box-shadow: var(--shadow-1), 0 0 60px rgb(216 255 63 / 0.05); }
.account__tile--drop .mesh { opacity: 0.45; background: none; }
.account__tile--drop .mesh i { width: 70%; height: 70%; filter: blur(60px); }
.account__tile--drop .mesh i:nth-child(1) { left: -20%; top: -30%; background: var(--violet); }
.account__tile--drop .mesh i:nth-child(2) { right: -25%; bottom: -35%; background: var(--blue); }
.account__drop-name { display: grid; gap: var(--s-2); }
.account__drop-count { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.account__tile-foot { display: grid; gap: var(--s-3); margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.account__switch-row { min-height: var(--tap); }
.account__switch-row > span:first-child { font-size: var(--text-sm); }

/* Saved tile: compact list */
.account__mini { display: grid; gap: 6px; }
.account__mini a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); align-items: center; min-height: 50px; padding: 4px; margin: -4px; border-radius: var(--r-2); transition: background var(--t-fast); }
.account__mini a:hover { background: rgb(255 255 255 / 0.06); }
.account__mini img { width: 40px; height: 50px; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.account__mini strong { display: block; font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account__mini small { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); }
.account__mini .is-more { padding-top: 4px; }

/* Addresses tile */
.account__addr-mini { font-style: normal; line-height: 1.5; }

/* Member tile */
.account__member { display: grid; gap: var(--s-3); }
.account__member div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.account__member dd { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; letter-spacing: -0.02em; text-align: right; }
.account__member dd.chrome { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.04em; }

/* ---------- Tabs strip + panels ---------- */
/* The strip scrolls sideways on phones and tablets, so it bleeds to the screen edges there; on desktop it stays inside the wrap like every other divider */
@media (max-width: 899.98px) { .account__tabs .tabs__list { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } }
.account__tabs .tabs__list [role="tab"] { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); }
.account__tab-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--fg-3); background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-pill); transition: color var(--t-fast), border-color var(--t-fast); }
[role="tab"][aria-selected="true"] .account__tab-n { color: var(--lime-ink); background: var(--lime); border-color: var(--lime); }
.account__panel { animation: accIn var(--t-base) var(--ease-expo) both; }
.account__panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-3); padding-bottom: var(--s-4); margin-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
.account__panel-head p { margin-top: var(--s-1); font-size: var(--text-sm); color: var(--fg-2); max-width: 52ch; }
.account__panel-foot { margin-top: var(--s-5); }
.account__text-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0; font-size: var(--text-xs); font-weight: 600; color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; transition: color var(--t-fast), text-decoration-color var(--t-fast); }
.account__text-btn:hover { color: var(--fg); text-decoration-color: var(--lime); }
@media (pointer: coarse) { .account__text-btn { min-height: var(--tap); } }

/* Orders */
.account__orders { display: grid; gap: var(--s-3); }
.account__order { display: grid; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-3); }
.account__order-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.account__order-head > div { display: grid; gap: 2px; }
.account__order-items { display: grid; }
.account__order-items li { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding-block: var(--s-3); border-top: 1px solid var(--line); }
.account__order-items strong { display: block; font-size: var(--text-sm); font-weight: 600; }
.account__order-items small { display: block; font-size: var(--text-xs); color: var(--fg-3); }
.account__order-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.account__order-total { font-size: var(--text-md); }
.account__order-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 479.98px) { .account__order-actions { width: 100%; } .account__order-actions .btn { flex: 1; } }

/* Saved */
.account__saved-empty { padding: var(--s-8) 0; border-top: 0; }
.account__saved-empty p { max-width: 36ch; }

/* Addresses */
.account__addresses { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .account__addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .account__addresses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.account__address { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); border-radius: var(--r-3); transition: border-color var(--t-fast); }
.account__address[data-default] { border-color: rgb(216 255 63 / 0.35); }
.account__address-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.account__address-head strong { font-weight: 600; }
.account__address address { font-style: normal; font-size: var(--text-sm); color: var(--fg-2); line-height: 1.5; }
.account__address-actions { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.account__addresses-empty { padding-top: var(--s-2); }

/* Settings */
.account__settings { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .account__settings { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; } }
.account__prefs li { border-bottom: 1px solid var(--line); }
.account__prefs li:first-child { border-top: 1px solid var(--line); }
/* Each row is the switch's label, so the whole row (not just the 26px pill) toggles it */
.account__pref { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); min-height: var(--tap); padding-block: var(--s-4); cursor: pointer; }
.account__pref-text { display: block; min-width: 0; }
.account__pref-label { display: block; font-size: var(--text-sm); font-weight: 600; }
.account__pref-hint { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--fg-2); max-width: 52ch; }
@media (hover: hover) { .account__pref:hover .switch { border-color: var(--line-strong); } }
.account__profile { padding: var(--s-5); border-radius: var(--r-3); }
.account__profile h4 { font-weight: 600; letter-spacing: -0.01em; }
.account__profile-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); padding-top: var(--s-2); }
@media (max-width: 639.98px) { .account__profile .span-2 { grid-column: auto; } }