/* ==========================================================================
   KloPoKitchen — account.html only: profile, orders in progress, past orders.

   Builds on css/style.css and takes its rules from there, not from here: read
   that file's preamble and CLAUDE.md's "UI bar" before adding a screen. The
   short version, because this file used to state the opposite: the hand-set
   uneven radii are for the things she MAKES, and every control takes the exact
   scale (--r-xs..--r-xl, --r-pill) with a 1px edge off the line ramp. The one
   blob left here is .me-card__mark, which is an avatar, not a control.

   REUSE, do not restyle. Anything an account screen needs already exists:
   .panel (white card), .field / .field > label / .field__hint / .field__row /
   .field--check (every form row), the shared input selector (all text entry,
   password included), .err (an error), .btn / .btn--primary / .btn--block
   (actions), .pill (a status), .cap (a small label, normal case), .xmark (a
   close). A second treatment for any of these is a bug.
   ========================================================================== */

.me-wrap { width: min(100% - var(--bleed) * 2, 44rem); }
.me-page__title { margin: 0 0 1.4rem; text-align: left; }
/* align-content: start — the loading height floor (js/account.js paint()) must
   leave empty space below the content, never stretch the rows to fill it */
.me-body { display: grid; gap: 1.6rem; align-content: start; }
.me-quiet { margin: 0; padding: 2rem 0; color: var(--ink-faint); }

/* ── sign in ─────────────────────────────────────────────────────────────── */
.me-signin { margin: 0; }
.me-signin__title { font-size: var(--t-lg); margin: 0 0 1rem; }
/* The one or two ways off an auth panel — forgot, create, back. Layout only:
   each one is an .acct__linklike, the site's restyled <button>, so there is
   no second link treatment growing here. */
.me-alt {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem;
  margin: .95rem 0 0; font-size: var(--t-small);
}

/* ── profile card ────────────────────────────────────────────────────────── */
.me-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem 1rem;
  padding: 1.1rem clamp(1rem, 3vw, 1.4rem);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.me-card__mark {
  width: 3.4rem; height: 3.4rem; display: grid; place-items: center;
  background: var(--blush); color: var(--ink);
  font-family: var(--display); font-weight: 600; font-variation-settings: var(--fr-head); font-size: 1.45rem; line-height: 1;
  /* a blob, not a disc */
  border-radius: 58% 42% 55% 45% / 47% 56% 44% 53%;
}
.me-card__who { min-width: 0; }
.me-card__name { margin: 0; font-family: var(--display); font-weight: 600; font-size: var(--t-head); font-variation-settings: var(--fr-head); line-height: 1.25; overflow-wrap: anywhere; }
.me-card__line { margin: .1rem 0 0; font-size: var(--t-small); color: var(--ink-soft); overflow-wrap: anywhere; }

.me-btn { padding: .52rem 1.05rem; font-size: var(--t-small); }

/* ── sections ────────────────────────────────────────────────────────────── */
.me-sect { display: grid; gap: .8rem; }
.me-sect__title { margin: 0; font-size: var(--t-head); }
.me-list { display: grid; gap: .75rem; }
.me-more { justify-self: start; font-size: var(--t-ui); }

/* ── order cards ─────────────────────────────────────────────────────────── */
.oc {
  display: grid; gap: .45rem;
  padding: 1rem clamp(1rem, 3vw, 1.3rem);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.oc:focus { outline: none; }
.oc:focus-visible { outline: 2.5px solid var(--rose); outline-offset: 2px; }

.oc__top, .oc__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .9rem; }
.oc__foot { margin-top: .35rem; }
.oc__acts { display: flex; flex-wrap: wrap; gap: .5rem; }

.oc__state { margin: 0; display: flex; align-items: center; gap: .5rem; font-family: var(--display); font-weight: 600; font-size: var(--t-head); font-variation-settings: var(--fr-head); }
.oc__when { margin: 0; font-weight: 500; font-size: var(--t-ui); }
.oc__total { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.oc__pickup { margin: 0; font-size: var(--t-ui); color: var(--ink); }
.oc__items { margin: 0; font-size: var(--t-small); color: var(--ink-soft); }
.oc__code {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  font-weight: 600; font-size: var(--t-small); letter-spacing: .01em;
  padding: .2rem .55rem; background: var(--paper-deep); border-radius: var(--r-xs);
}
.oc__msg { margin: 0; font-size: var(--t-small); color: var(--ink-soft); }
.oc__msg:empty { display: none; }

/* ready: a solid state you can spot in a list, no motion */
.oc--ready { background: var(--blush); border-color: var(--pink); }
.oc__dot {
  width: .7rem; height: .7rem; flex: none; background: var(--pink);
  border-radius: 55% 45% 52% 48% / 46% 54% 46% 54%;
}

.oc--past { background: var(--paper); }
/* a status in words, not a tracked uppercase label */
.oc--past .pill { font-size: var(--t-micro); }

/* ── empty / error ───────────────────────────────────────────────────────── */
.me-empty {
  display: grid; justify-items: center; gap: .9rem; padding: 2.2rem 1rem; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--r-lg);
}
.me-empty p { margin: 0; color: var(--ink-soft); }

.me-out { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; padding-top: .4rem; }

/* ── edit dialog ─────────────────────────────────────────────────────────── */
.me-dialog { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1rem; }
.me-dialog::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(46,31,25,.42); opacity: 0; transition: opacity .25s;
}
.me-dialog.is-open::before { opacity: 1; }
.me-dialog__panel {
  position: relative; width: min(26rem, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto;
  padding: 1.35rem clamp(1.1rem, 4vw, 1.6rem) 1.4rem;
  background: var(--paper) url("../assets/paper.png") repeat;
  border-radius: var(--r-card); box-shadow: var(--e3);
  opacity: 0; transform: translateY(.75rem);
  transition: opacity .25s, transform .25s var(--ease);
}
.me-dialog.is-open .me-dialog__panel { opacity: 1; transform: none; }
.me-dialog__title { font-size: var(--t-lg); line-height: 1.2; margin: .2rem 2.6rem 1rem 0; }

@media (max-width: 480px) {
  .me-card { grid-template-columns: auto minmax(0, 1fr); }
  .me-card .me-btn { grid-column: 1 / -1; justify-self: start; }
  .oc__foot { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .me-dialog::before, .me-dialog__panel { transition: none; }
}

/* ── loading ─────────────────────────────────────────────────────────────────
   account.html ships both first-paint shapes; an inline script picks one from
   the stored session before first paint, and js/account.js swaps in the real
   content once. The skeleton is built from the real card classes with the text
   blanked, so every block sits at the height the real line will take. Static:
   nothing here moves on its own. */
.me-body.is-signed-in > [data-auth] { display: none; }
.me-body.is-signed-out > [data-me-skel] { display: none; }
.me-skel { display: grid; gap: 1.6rem; }

.me-skel-text {
  display: inline-block; width: var(--w, 8rem); max-width: 100%;
  color: transparent; background: var(--paper-deep);
  border-radius: var(--r-xs);
  line-height: 1;
}
.me-skel-block { color: transparent; background: var(--paper-deep); }
.me-skel-btn,
.me-skel-btn:hover {
  color: transparent !important; background: var(--paper-deep) !important;
  border-color: transparent !important; box-shadow: none !important;
  pointer-events: none; user-select: none;
}
/* the skeleton's cards keep the real surfaces, not a ready or tinted state */
.me-skel .oc--active { background: var(--white); }

/* real content arrives with one short fade, opacity only so nothing moves */
@keyframes me-arrive { from { opacity: 0; } to { opacity: 1; } }
.me-body.is-arriving > * { animation: me-arrive .2s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .me-body.is-arriving > * { animation: none; }
}