/* ============================================================
   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{ padding:clamp(28px,5vw,56px) 0 clamp(64px,10vw,120px); }
.account__inner{ max-width:520px; margin-inline:auto; }

.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 .25s var(--ease), color .25s, border-color .25s; }
.auth-tab:hover{ border-color:var(--carbonara); color:var(--carbonara); }
.auth-tab.is-active{ background:var(--notte); color:var(--panna); border-color:transparent; }

.auth-form{ display:none; }
.auth-form.is-active{ display:block; animation:fadeUp .4s var(--ease); }
.auth-form label{ display:block; font-size:.78rem; 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 .25s, box-shadow .25s; }
.auth-form input:focus{ outline:none; border-color:var(--carbonara); box-shadow:0 0 0 3px rgba(67,199,206,.22); }
.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:.7rem; letter-spacing:.02em; text-transform:none;
  font-weight:500; color:var(--ink); opacity:.7; }

.auth-link{ display:inline-block; margin-top:14px; background:none; border:none; cursor:pointer;
  font-family:var(--body); font-weight:600; font-size:.85rem; color:var(--carbonara);
  text-decoration:underline; text-underline-offset:3px; padding:2px; transition:color .25s; }
.auth-link:hover{ color:var(--carbonara-deep); }

.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; }

#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; }
.orders__head{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--oro);
  font-weight:700; margin:0 0 .9rem; }
.orders__list{ display:grid; gap:10px; }
.orders__empty{ font-size:.85rem; color:var(--ink); opacity:.7; }
.order{ border:1px solid var(--line); border-radius:14px; padding:12px 16px; background:var(--panna); transition:border-color .3s, transform .3s var(--ease); }
.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); opacity:.75; }
.order__status{ font-size:.66rem; 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{ font-weight:700; }