/* Account, auth, orders and content pages. Tokens only; mobile first, widen with @container. */

/* ---------- auth: ink hero + white sheet, no tab bar ---------- */
.auth-page { padding-bottom: 0; }
.auth { display: flex; flex-direction: column; min-height: 100dvh; min-height: 100lvh; }
.auth-hero { padding-top: calc(var(--s-6) + var(--safe-t)); padding-bottom: var(--s-14); }
.auth-stick { display: contents; }
.auth-perks { display: none; }   /* desktop brand panel only */
.auth-hero h1 { margin-top: var(--s-8); font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 800; letter-spacing: -.025em; }
.auth-hero p { margin: var(--s-2) 0 0; color: var(--ink-300); }
.auth-hero p strong { color: var(--white); word-break: break-all; }
.auth-sheet { flex: 1; position: relative; margin-top: calc(var(--s-10) * -1); padding: var(--s-6) var(--gutter) calc(var(--s-10) + var(--safe-b));
              background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--e-3); }
.auth-sheet > * + * { margin-top: var(--s-5); }
.auth-form { display: grid; gap: var(--s-4); }
.auth-row { display: grid; gap: var(--s-4); }
.auth-hint { margin: 0; color: var(--text-3); font-size: var(--fs-small); }
.auth-hint.is-ok { color: var(--success); }
.auth-alert { display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
              background: var(--danger-100); color: var(--danger); font-weight: 700; font-size: var(--fs-small); }
.auth-alert .ic { margin-top: 1px; }
.auth-alerts:empty { display: none; }
.auth-link { color: var(--accent-700); font-weight: 700; display: inline-flex; align-items: center; min-height: var(--tap); }
.auth-aside { text-align: center; color: var(--text-2); font-size: var(--fs-small); }
.auth-aside .btn { margin-top: var(--s-3); }
.pw { position: relative; display: grid; }
.pw .input { padding-right: calc(var(--tap) + var(--s-2)); }
.pw-eye { position: absolute; right: var(--s-1); top: 4px; width: var(--tap); height: var(--tap); display: grid; place-items: center;
          border: 0; border-radius: var(--r-full); background: transparent; color: var(--text-3); cursor: pointer; }
.pw-eye[hidden] { display: none; }
.pw-eye .ic-on { display: none; }
.pw-eye[aria-pressed="true"] .ic-on { display: block; }
.pw-eye[aria-pressed="true"] .ic-off { display: none; }
.otp-input { text-align: center; font-size: var(--fs-display); font-weight: 800; letter-spacing: .4em; padding-left: calc(var(--s-4) + .4em); }
.seg a { min-height: 44px; display: grid; place-items: center; border-radius: var(--r-full); font-weight: 700; color: var(--text-2); }
.seg a[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--e-1); }
.auth-sheet .seg { background: var(--surface-2); }
/* server errors are shown inline on auth screens, so the duplicate error toast stays hidden there */
body[data-page^="auth"] .toast.error { display: none; }
@container (min-width: 768px) {
  .auth-sheet { width: min(100%, 460px); margin-inline: auto; border-radius: var(--r-xl); margin-top: calc(var(--s-14) * -1); flex: none; }
  .auth-hero { padding-bottom: var(--s-14); }
  .auth-hero > * { max-width: 460px; margin-inline: auto; }
}

/* ---------- list menu (account hub, settings rows) ---------- */
.menu { margin: 0 var(--gutter); padding: var(--s-1) 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e-1); overflow: hidden; }
.menu + .menu, .menu-title + .menu { margin-top: var(--s-3); }
.menu-title { margin: var(--s-6) var(--gutter) var(--s-2); font-size: var(--fs-small); font-weight: 700; color: var(--text-3); }
.menu-row { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 56px; padding: var(--s-2) var(--s-4); border: 0; background: transparent;
            text-align: left; font-weight: 700; cursor: pointer; color: var(--text); }
.menu-row + .menu-row { box-shadow: inset 0 1px 0 var(--line); }
.menu-row:active { background: var(--surface-3); }
.menu-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-full); background: var(--surface-2); color: var(--ink-700); }
.menu-label { flex: 1; min-width: 0; }
.menu-label small { display: block; margin-top: 2px; font-weight: 600; font-size: var(--fs-caption); color: var(--text-3); }
.menu-end { color: var(--text-3); font-size: var(--fs-small); font-weight: 700; display: flex; align-items: center; gap: var(--s-1); }
.menu-row.is-danger { color: var(--danger); }
.menu-row.is-danger .menu-ico { background: var(--danger-100); color: var(--danger); }

.me { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-2) var(--gutter) var(--s-4); }
.avatar { width: 72px; height: 72px; flex: none; border-radius: var(--r-full); background: var(--ink-900); color: var(--white); display: grid; place-items: center;
          font-size: var(--fs-title); font-weight: 800; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.me h2 { font-size: var(--fs-title); font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.me p { margin: 2px 0 0; color: var(--text-2); font-size: var(--fs-small); overflow-wrap: anywhere; }
.guest-card { margin: 0 var(--gutter); padding: var(--s-5); border-radius: var(--r-xl); background: var(--ink-900); color: var(--white); display: grid; gap: var(--s-4); }
.guest-card h2 { font-size: var(--fs-title); font-weight: 800; letter-spacing: -.02em; }
.guest-card p { margin: var(--s-1) 0 0; color: var(--ink-300); }
.guest-card .btn-ghost { color: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink-700); }
.btn-pair { display: grid; gap: var(--s-3); }
.addr { margin: 0 var(--gutter); }
.addr p { margin: var(--s-1) 0 0; color: var(--text-2); font-size: var(--fs-small); overflow-wrap: anywhere; }

/* ---------- forms on inner pages ---------- */
.form-page { display: grid; gap: var(--s-4); padding: 0 var(--gutter); }
.form-page .card { display: grid; gap: var(--s-4); }
.form-actions { padding: var(--s-2) var(--gutter) 0; }
textarea.input { padding: var(--s-3) var(--s-4); min-height: 96px; resize: vertical; }
select.input { appearance: none; background-image: none; }
.field-hint { color: var(--text-3); font-size: var(--fs-small); }
.btn-loc { justify-self: start; }

/* ---------- orders ---------- */
.otabs { margin: 0 var(--gutter) var(--s-4); }
.otabs button b { margin-left: var(--s-1); color: var(--text-3); font-weight: 700; }
.olist { display: grid; gap: var(--s-3); padding: 0 var(--gutter); }
.olist[hidden] { display: none; }
.ocard { display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-1); }
.ocard-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.ocard-head b { font-size: var(--fs-body); }
.ocard-main { display: grid; gap: var(--s-3); }
.ocard-line { margin: 0; font-weight: 700; font-size: var(--fs-small); overflow-wrap: anywhere; }
.ocard-meta { color: var(--text-3); font-size: var(--fs-small); }
.thumbs { display: flex; align-items: center; gap: var(--s-2); }
.thumbs .thumb { width: 48px; height: 48px; border-radius: var(--r-sm); }
.thumbs .more { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--surface-2); font-weight: 800; font-size: var(--fs-small); color: var(--text-2); }
.thumb-letter { font-weight: 800; color: var(--text-3); }
.ocard-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.ocard-actions { display: flex; gap: var(--s-2); }
.status-proc { background: var(--info-100); color: var(--info); }
.omore { padding: var(--s-4) var(--gutter) 0; color: var(--text-3); font-size: var(--fs-small); text-align: center; }

/* ---------- order detail / invoice ---------- */
.detail { display: grid; gap: var(--s-4); padding: 0 var(--gutter); }
.detail-col { display: grid; gap: var(--s-4); align-content: start; }
.detail .card { display: grid; gap: var(--s-3); }
.detail h2 { font-size: var(--fs-headline); font-weight: 800; letter-spacing: -.01em; }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.detail-head p { margin: var(--s-1) 0 0; color: var(--text-3); font-size: var(--fs-small); }
.tl-text b { display: block; font-size: var(--fs-body); }
.tl-text small { color: var(--text-3); font-size: var(--fs-small); }
.tl.todo .tl-text b { color: var(--text-3); }
.tl.done::before { background: var(--ink-900); }
.line { display: flex; align-items: center; gap: var(--s-3); }
.line + .line { padding-top: var(--s-3); box-shadow: inset 0 1px 0 var(--line); }
.line-body { flex: 1; min-width: 0; }
.line-name { font-weight: 700; font-size: var(--fs-small); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.line-sub { color: var(--text-3); font-size: var(--fs-caption); }
.sum { display: grid; gap: var(--s-2); }
.sum div { display: flex; justify-content: space-between; gap: var(--s-4); color: var(--text-2); }
.sum .total { padding-top: var(--s-3); box-shadow: inset 0 1px 0 var(--line); color: var(--text); font-weight: 800; font-size: var(--fs-headline); }
.sum .disc { color: var(--success); }
.helpbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.notice { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border-radius: var(--r-lg); font-weight: 600; font-size: var(--fs-small); }
.notice b { display: block; font-size: var(--fs-body); }
.notice.ok { background: var(--success-100); color: var(--success); }
.notice.warn { background: var(--warning-100); color: var(--warning); }
.notice.ask { background: var(--info-100); color: var(--info); }
.ask-form { display: grid; gap: var(--s-3); }
.ask-form .btn-ghost { color: var(--danger); }
.addr-block { color: var(--text-2); overflow-wrap: anywhere; }
.addr-block b { color: var(--text); }
.inv-table { display: grid; gap: var(--s-2); }
.chip-status { padding: 2px var(--s-2); border-radius: var(--r-full); font-size: var(--fs-caption); font-weight: 800; }

/* ---------- services ---------- */
.svc-list { display: grid; gap: var(--s-3); padding: 0 var(--gutter); }
.svc { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-1); align-items: center; }
.svc .thumb { width: 88px; height: 88px; }
.svc .thumb img { object-fit: cover; mix-blend-mode: normal; }
.svc h2 { font-size: var(--fs-body); font-weight: 800; }
.svc p { margin: var(--s-1) 0; color: var(--text-2); font-size: var(--fs-small); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svc-hero { margin: 0 var(--gutter); border-radius: var(--r-xl); overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 9; display: grid; place-items: center; color: var(--text-3); }
.svc-hero img { width: 100%; height: 100%; object-fit: cover; }
.svc-body { padding: var(--s-5) var(--gutter) 0; }
.svc-body h1 { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 800; letter-spacing: -.025em; }
.book-bar { position: sticky; bottom: calc(var(--s-3) + var(--safe-b)); z-index: var(--z-sticky); margin: var(--s-6) var(--gutter) 0; }

/* ---------- read mode (privacy, long text) ---------- */
.read { padding: 0 var(--gutter); max-width: 68ch; margin-inline: auto; line-height: 1.7; }
.read h1 { font-size: var(--fs-display); font-weight: 800; letter-spacing: -.025em; line-height: var(--lh-tight); margin-bottom: var(--s-4); }
.read h2 { font-size: var(--fs-headline); font-weight: 800; margin: var(--s-8) 0 var(--s-2); }
.read h3 { font-size: var(--fs-body); font-weight: 800; margin: var(--s-5) 0 var(--s-2); }
.read p, .read ul, .read ol { margin: 0 0 var(--s-4); color: var(--text-2); }
.read ul, .read ol { padding-left: var(--s-6); }
.read li + li { margin-top: var(--s-2); }
.read a { color: var(--accent-700); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: var(--s-4); }
@container (min-width: 768px) {
  .olist { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .contact-grid, .form-page { max-width: 640px; margin-inline: auto; }
  .menu, .me, .guest-card, .addr, .menu-title { max-width: 640px; margin-inline: auto; }
  .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* grid tracks must be allowed to shrink, or wide inputs (OTP, textarea) push the page sideways */
.auth-form, .form-page, .contact-grid, .detail, .olist, .svc-list { grid-template-columns: minmax(0, 1fr); }
.auth-form .input, .form-page .input, .field .input { width: 100%; min-width: 0; }
.detail-head h1 { font-size: var(--fs-headline); overflow-wrap: anywhere; }
@container (min-width: 768px) {
  .olist, .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}