/* ============================================================
   La Selezione — account / auth page (phase 1)
   Loaded only on account.html, alongside styles.css.
   Reuses the brand tokens defined in styles.css (:root).
   ============================================================ */
.account{ position:relative; padding:clamp(28px,5vw,56px) 0 clamp(64px,10vw,120px); }
.account__inner{ max-width:520px; margin-inline:auto; }

/* wide screens: two boxes drift in the empty margins beside the card */
@media (min-width:1100px){
  .account::before, .account::after{ content:""; position:absolute; top:110px; width:230px; height:330px;
    background-size:contain; background-repeat:no-repeat; background-position:center top;
    filter:drop-shadow(0 26px 34px rgba(14,40,80,.22)); pointer-events:none;
    animation:deco-float 8s ease-in-out infinite; will-change:transform; }
  .account::before{ left:calc(50% - 570px); background-image:url("assets/carbonara.webp"); rotate:-9deg; }
  .account::after{ right:calc(50% - 570px); background-image:url("assets/pomodoro.webp"); rotate:9deg; animation-delay:1.8s; }
}
@keyframes deco-float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -14px; } }

.auth-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:24px;
  padding:clamp(24px,4vw,40px); box-shadow:0 36px 70px -40px rgba(14,40,80,.4); overflow:hidden; }
.auth-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:8px;
  background:repeating-linear-gradient(90deg,
    var(--carbonara-field) 0 22px, var(--bolognese-field) 22px 44px, var(--pomodoro-field) 44px 66px); }
.auth-card + .auth-card{ margin-top:18px; }

.auth-tabs{ display:flex; gap:10px; margin-bottom:1.6rem; }
.auth-tab{ flex:1; background:var(--panna); border:1.5px solid var(--line); border-radius:999px;
  font-family:var(--body); font-weight:700; font-size:.92rem; color:var(--notte); padding:.72em 1em;
  cursor:pointer; transition:background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); }
.auth-tab:hover{ border-color:var(--carbonara); color:var(--carbonara-text); }
.auth-tab.is-active{ background:var(--notte); color:var(--panna); border-color:transparent; }

/* "order as guest" — third pill under the two tabs, skips accounts entirely */
.auth-guest{ display:block; width:100%; margin:-6px 0 1.6rem; background:transparent;
  border:1.5px dashed var(--line); border-radius:999px; font-family:var(--body); font-weight:700;
  font-size:.92rem; color:var(--notte); padding:.72em 1em; cursor:pointer;
  transition:border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.auth-guest:hover{ border-color:var(--carbonara); color:var(--carbonara-text); }
.auth-guest[hidden]{ display:none; }

.auth-form{ display:none; }
.auth-form.is-active{ display:block; animation:fadeUp .3s var(--ease-out); }
.auth-form label{ display:block; font-size:var(--label); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); margin-bottom:14px; font-weight:700; }
.auth-form input{ width:100%; margin-top:7px; font-family:var(--body); font-size:1rem; color:var(--notte);
  padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--panna);
  transition:border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
/* Same correction as the shop and contact forms: the system's focus ring
    rather than outline:none and a halo. The halo here was rgba(67,199,206),
    a teal that is not any token in the palette — the last one left. */
.auth-form input:focus{ border-color:var(--carbonara); }
.auth-form input:disabled{ opacity:.6; cursor:not-allowed; }
.auth-form .btn{ margin-top:6px; width:100%; justify-content:center; }

.auth-hint{ display:block; margin-top:6px; font-size:var(--label-sm); letter-spacing:.02em; text-transform:none;
  font-weight:500; color:var(--ink-soft); }

/* ---- password show / hide (the little eyeball) ---- */
.pw-field{ position:relative; display:block; margin-top:7px; }
.auth-form .pw-field input{ margin-top:0; padding-right:50px; }
.pw-toggle{ position:absolute; top:50%; right:7px; transform:translateY(-50%); width:38px; height:38px;
  display:grid; place-items:center; background:none; border:none; border-radius:50%; cursor:pointer;
  color:var(--ink); opacity:.62; transition:opacity var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.pw-toggle:hover{ opacity:1; color:var(--notte); background:rgba(176,141,87,.14); }
.pw-toggle:active{ transform:translateY(-50%) scale(.9); }
.pw-toggle svg{ display:block; }
.pw-toggle .pw-toggle__off{ display:none; }
.pw-toggle.is-on{ color:var(--carbonara-text); opacity:.9; }
.pw-toggle.is-on .pw-toggle__on{ display:none; }
.pw-toggle.is-on .pw-toggle__off{ display:block; }

.auth-link{ display:block; margin-top:14px; background:none; border:none; cursor:pointer;
  font-family:var(--body); font-weight:600; font-size:.85rem; color:var(--carbonara-text);
  text-decoration:underline; text-underline-offset:3px; padding:2px; transition:color var(--t-fast) var(--ease-out); }
.auth-link[hidden]{ display:none; }
.auth-link:hover{ color:var(--notte); }

.auth-msg{ text-align:center; font-size:.9rem; font-weight:600; margin:1.1rem 0 0; min-height:1.2em; color:var(--ink); }
.auth-msg--ok{ color:var(--bolognese); }
.auth-msg--err{ color:var(--pomodoro); }

.auth-setup{ background:#FFF6E6; border:1px solid var(--oro-soft); color:#7a5b20; font-size:.84rem;
  line-height:1.5; border-radius:12px; padding:12px 16px; margin:0 0 1.4rem; }

/* "you were in the middle of an order" — shown only when a ?next=
   brought them here. Deliberately NOT dressed like .auth-setup above:
   that one is a warning the site is misconfigured, and this is
   reassurance, so it takes the calm ground and no colour borrowed from
   a status.
   It is marked by the short gold rule the other quiet facts in this
   change use (.page-head__note, .shop-summary__serves) and NOT by a
   coloured left border. This site marks a panel as its own with the
   candy stripe across the top — .auth-card, .shop-summary — and a
   one-sided accent bar would have been a second device saying the same
   thing, in a vocabulary the site does not otherwise speak. */
.auth-continue{ background:var(--white-soft); border:1px solid var(--line);
  color:var(--ink); font-size:.88rem;
  line-height:1.55; border-radius:12px; padding:12px 16px; margin:0 0 1.4rem; }
.auth-continue::before{ content:""; display:inline-block; vertical-align:middle;
  width:18px; height:2px; margin-right:.65em; background:var(--oro-soft); }
.auth-continue[hidden]{ display:none; }

#profileHi{ text-align:left; margin:.2rem 0 1.2rem; }

/* ---- order history (phase 2) ---- */
.orders{ margin-top:1.6rem; border-top:1px dashed var(--line); padding-top:1.3rem; }
/* --oro-ink, not --oro: the decorative gold measures 3.1:1 here and this is
   12.5px of tracked uppercase. Same correction .eyebrow already carries. */
.orders__head{ font-size:var(--label); letter-spacing:.16em; text-transform:uppercase; color:var(--oro-ink);
  font-weight:700; margin:0 0 .9rem; }
.orders__list{ display:grid; gap:10px; }
/* --ink-soft rather than --ink at .7, which rendered 4.1:1 — under AA, and
   invisible as such from reading the rule, because an alpha's contrast is a
   property of whatever is behind it rather than of the value written here. */
.orders__empty{ font-size:.85rem; color:var(--ink-soft); }
.orders__err{ color:var(--pomodoro); opacity:.95; font-weight:600; }
.order{ border:1px solid var(--line); border-radius:14px; padding:12px 16px; background:var(--panna); transition:border-color .24s var(--ease-out), transform .24s var(--ease-out); }
.order:hover{ border-color:var(--oro-soft); transform:translateY(-2px); }
.order__top{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:4px; }
.order__date{ font-size:.78rem; font-weight:600; color:var(--ink-soft); }
.order__status{ font-size:var(--label-sm); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.3em .9em; border-radius:999px; background:var(--carbonara-field); color:var(--carbonara-ink); }
.order__status[data-status="confirmed"]{ background:var(--bolognese-field); color:var(--bolognese-ink); }
.order__status[data-status="delivered"]{ background:var(--pomodoro-field); color:var(--pomodoro-ink); }
.order__status[data-status="cancelled"]{ background:#ECE7DB; color:#8F8A78; }
.order__items{ margin:0; font-size:.9rem; color:var(--notte); }
.order__total{ margin:2px 0 0; font-family:var(--display); font-weight:700; color:var(--notte); }

/* (.nav__account.is-authed lives in styles.css: the header is on every page,
   and this file only loads on account.html — so a rule here left the signed-in
   name un-bolded everywhere else.) */

/* touch screens: thumb-sized hit areas for the two controls this file owns.
   These live here rather than in styles.css because account.css loads second —
   at equal specificity the later sheet wins, so an override there is dead code.
   The eyeball sits inside a 46px field, which caps it at 44. The forgot-password
   link trades margin for padding so it grows inward, leaving the gap unchanged. */
@media (hover:none){
  .pw-toggle{ width:44px; height:44px; right:5px; }
  .auth-link{ margin-top:4px; padding:14px 2px; }
  .auth-tab, .auth-guest{ min-height:44px; }
}