/* =========================================================================
   Customer account: sign in, register, overview, orders, addresses.

   A functional surface. Hairlines and space do the grouping; the only card is
   the auth column, which is genuinely a raised object on an otherwise empty
   page. Every value comes from the tokens in app.css.
   ========================================================================= */

@layer components {

/* ------------------------------------------------------- auth column */

.ac-auth-wrap {
  display: flex;
  justify-content: center;
  padding-block: var(--s-8) var(--s-9);
}
@media (min-width: 1024px) { .ac-auth-wrap { padding-block: var(--s-9) var(--s-11); } }

.ac-auth {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.ac-auth-wide { max-width: 560px; }

.ac-auth-title {
  font-size: var(--fs-h1);
  max-width: 16ch;
}

.ac-auth-sub {
  color: var(--text-dim);
  font-size: var(--fs-sm);
  max-width: 46ch;
  margin-top: calc(-1 * var(--s-2));
}

.ac-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.ac-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 640px) { .ac-form-row { grid-template-columns: 1fr 1fr; } }

.ac-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.ac-opt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 400;
  margin-left: var(--s-2);
}

.ac-auth-alt { font-size: var(--fs-sm); color: var(--text-dim); }

.ac-auth-note {
  font-size: var(--fs-micro);
  color: var(--text-faint);
  border-top: 1px solid var(--line);
  padding-top: var(--s-4);
  line-height: 1.6;
}

/* --------------------------------------------------- honest no-database */

.ac-nodb {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--r);
  padding: var(--s-6);
  background: var(--bg-elev);
}
.ac-nodb-body { color: var(--text-dim); font-size: var(--fs-sm); max-width: 52ch; }
.ac-nodb-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

/* ------------------------------------------------------------- alerts */

.ac-alert {
  border: 1px solid var(--line);
  border-left: 3px solid var(--danger);
  border-radius: var(--r);
  background: var(--bg-elev);
  padding: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* -------------------------------------------------- signed in surfaces */

.ac-shell {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding-block: var(--s-6) var(--s-9);
}
@media (min-width: 1024px) { .ac-shell { padding-block: var(--s-7) var(--s-10); } }

.ac-head { display: flex; flex-direction: column; gap: var(--s-2); }
.ac-title { font-size: var(--fs-h1); }
.ac-head-sub { color: var(--text-dim); font-size: var(--fs-sm); }

.ac-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-3);
}

.ac-nav-item {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  padding-bottom: var(--s-2);
  margin-bottom: calc(-1 * var(--s-3) - 1px);
  border-bottom: 2px solid transparent;
  transition: color var(--d-micro) var(--ease), border-color var(--d-micro) var(--ease);
}
.ac-nav-item:hover { color: var(--text); }
.ac-nav-item[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

.ac-signout { margin-left: auto; }
.ac-nav-out { color: var(--text-faint); }
.ac-nav-out:hover { color: var(--danger); }

/* ------------------------------------------------------------- numbers */

.ac-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
@media (min-width: 768px) { .ac-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ac-stat {
  background: var(--bg);
  padding: var(--s-4) var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.ac-stat dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ac-stat dd { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.01em; }

/* ------------------------------------------------------------- columns */

.ac-cols, .ac-order-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
@media (min-width: 1024px) {
  .ac-cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-8); }
  .ac-order-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-8); }
}

.ac-block { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }

.ac-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-3);
}
.ac-block-head h2, .ac-block-title { font-size: var(--fs-h3); }
.ac-block-head-plain { margin-top: var(--s-4); }
.ac-block-title { border-bottom: 1px solid var(--line); padding-bottom: var(--s-3); }
.ac-more { font-size: var(--fs-sm); white-space: nowrap; }

/* --------------------------------------------------------------- table */

.ac-table-scroll { overflow-x: auto; }

.ac-table { width: 100%; font-size: var(--fs-sm); }
.ac-table-wide { min-width: 720px; }

.ac-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
  padding: 0 var(--s-3) var(--s-3) 0;
}

/* One hairline between rows. Never top and bottom on the same row. */
.ac-table tbody tr { border-top: 1px solid var(--line); }
.ac-table tbody th, .ac-table tbody td {
  text-align: left;
  font-weight: 400;
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  vertical-align: top;
}
.ac-table th:last-child, .ac-table td:last-child { padding-right: 0; }
.ac-right { text-align: right !important; }
.ac-dim { color: var(--text-dim); }
.ac-faint { color: var(--text-faint); }

/* -------------------------------------------------------------- status */

.ac-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ac-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--text-faint);
  flex: none;
}
.ac-status[data-status="confirmed"]::before,
.ac-status[data-status="packed"]::before { background: var(--warn); }
.ac-status[data-status="shipped"]::before { background: var(--accent); }
.ac-status[data-status="delivered"]::before { background: var(--success); }
.ac-status[data-status="cancelled"]::before,
.ac-status[data-status="refunded"]::before { background: var(--danger); }

/* ------------------------------------------------------------ timeline */

.ac-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  border-block: 1px solid var(--line);
  padding-block: var(--s-4);
}
.ac-timeline-step {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--text-faint);
  flex: 1 1 120px;
}
.ac-timeline-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  flex: none;
}
.ac-timeline-step[data-state="done"] { color: var(--text-dim); }
.ac-timeline-step[data-state="done"] .ac-timeline-dot { background: var(--text-dim); border-color: var(--text-dim); }
.ac-timeline-step[data-state="now"] { color: var(--text); font-weight: 500; }
.ac-timeline-step[data-state="now"] .ac-timeline-dot { background: var(--accent); border-color: var(--accent); }

.ac-tracking {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  background: var(--accent-soft);
  border-radius: var(--r);
  padding: var(--s-3) var(--s-4);
}

/* --------------------------------------------------------- order lines */

.ac-lines { display: flex; flex-direction: column; }

.ac-line {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-areas:
    "media body"
    "media qty"
    "media total";
  gap: var(--s-1) var(--s-4);
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);
  align-items: start;
}
@media (min-width: 640px) {
  .ac-line {
    grid-template-columns: 56px minmax(0, 1fr) auto auto;
    grid-template-areas: "media body qty total";
    align-items: center;
    gap: var(--s-4);
  }
}
.ac-line-media { grid-area: media; width: 56px; }
.ac-line-body { grid-area: body; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ac-line-name { font-size: var(--fs-sm); }
.ac-line-meta { font-size: var(--fs-micro); color: var(--text-faint); }
.ac-line-qty { grid-area: qty; font-size: var(--fs-sm); color: var(--text-dim); white-space: nowrap; }
.ac-line-total { grid-area: total; font-size: var(--fs-sm); text-align: right; white-space: nowrap; }

.ac-totals { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: var(--s-4); }
.ac-totals > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  padding-block: var(--s-1);
}
.ac-totals-grand {
  border-top: 1px solid var(--line);
  margin-top: var(--s-3);
  padding-top: var(--s-3) !important;
  color: var(--text) !important;
  font-size: var(--fs-body-l) !important;
  font-weight: 500;
}

/* ------------------------------------------------------------ key value */

.ac-kv { display: flex; flex-direction: column; }
.ac-kv > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-2);
  font-size: var(--fs-sm);
  border-top: 1px solid var(--line);
}
.ac-kv dt { color: var(--text-faint); }

/* ------------------------------------------------------------ addresses */

.ac-address {
  display: flex;
  flex-direction: column;
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  line-height: 1.7;
}
.ac-address span:first-child { color: var(--text); }

.ac-addr-list { display: flex; flex-direction: column; }

.ac-addr {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);
}
.ac-addr[data-default="true"] { border-left: 2px solid var(--accent); padding-left: var(--s-4); }

.ac-addr-head { display: flex; align-items: center; gap: var(--s-3); }
.ac-addr-label { font-size: var(--fs-sm); font-weight: 500; }
.ac-addr-actions { display: flex; align-items: center; gap: var(--s-2); }
.ac-remove:hover { color: var(--danger); }

/* ---------------------------------------------------------------- misc */

.ac-help { font-size: var(--fs-sm); color: var(--text-dim); max-width: 56ch; }
.ac-note-body { font-size: var(--fs-sm); color: var(--text-dim); }
.ac-back { padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--fs-sm); }

}