/* The signed-in account area (app.html).  Loaded last, after theme.css and scene.css.

   A tidy desk of cream cards: a heading plate, a side nav that becomes a row of small icon tabs on a phone,
   and one panel at a time. js/app*.js builds the rows (saved hands, cards, addresses, orders) and uses the
   ids and classes in app.html, so this sheet only dresses them. Cards come from theme.css; the colours are tokens. */

.page-account main { z-index: auto; }

/* same column as the header, so the two line up */
.container.app-main { max-width: 1280px; padding-inline: clamp(16px, 3vw, 32px); padding-block: 28px 88px; }

.app-head { margin-bottom: 28px; align-items: center; }
.app-head h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); margin: 0 0 .15rem; }
.app-head p { color: var(--ink-dim); }

/* ---------------------------------------------------------------- side nav */
.app-grid { gap: 22px; }
@media (min-width: 820px) { .app-grid { grid-template-columns: 14.5rem minmax(0, 1fr); gap: 32px; } }

.app-nav { gap: 4px; }
.app-nav button, .app-nav-admin {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; text-align: left; cursor: pointer;
}
.app-nav button { transition: background-color .1s, color .1s; }
.nav-ico { flex: none; width: 20px; height: 20px; opacity: .85; }
.app-nav button.is-active .nav-ico { opacity: 1; }
.app-nav-admin { color: var(--terra-deep); text-decoration: none; padding: 12px 14px; font: 700 .9375rem/1.2 var(--font-ui); }
.app-nav-admin:hover { background: rgb(var(--ink-rgb) / .08); color: var(--terra-deep); text-decoration: none; }
@media (min-width: 820px) { .app-nav { top: 92px; } }

/* a phone: six small tabs in a grid, nothing hidden off the edge */
@media (max-width: 819px) {
  .app-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 6px; border-bottom: 0; padding: 8px; }
  .app-nav button { flex-direction: column; justify-content: center; gap: 4px; padding: 9px 4px 8px; min-height: 62px; text-align: center; font-size: .8125rem; }
  .app-nav-admin { grid-column: 1 / -1; justify-content: center; min-height: 44px; margin: 4px 0 0; border-top: 2px dotted rgb(var(--ink-rgb) / .25); padding: 10px; }
}
@media (min-width: 560px) and (max-width: 819px) { .app-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- panels */
/* a long button label ("Turn on two-factor authentication") wraps inside its card on a narrow
   phone instead of running out past the card's edge */
.app-view .btn { white-space: normal; max-width: 100%; text-align: center; }
/* the text buttons on each row (rename, delete, set default, forget, revoke…) are real tap targets */
.app-view .link-btn { min-height: 44px; display: inline-flex; align-items: center; }
.page-account .site-header .btn-ghost { white-space: nowrap; }
.app-view > .card, .app-view > .hw-view-head, .app-view > .ord-view-head { margin: 0 0 28px; }
.app-view > .hw-view-head, .app-view > .ord-view-head { margin-bottom: 22px; }
.app-view .card { padding: clamp(22px, 2.6vw, 30px); }
.app-view .card h2, .hw-view-head h2, .ord-view-head h2 { font-size: clamp(1.4rem, 1.15rem + .7vw, 1.75rem); line-height: 1.12; margin: 0 0 .35rem; }
.app-view .card > .card-sub, .app-view .card-sub { margin: 0 0 1rem; max-width: 46rem; }
.hw-view-head p.card-sub, .ord-view-head p.card-sub { margin: 0 !important; max-width: 44rem; }
.hw-view-head, .ord-view-head { align-items: center; gap: 18px 28px; }
.hw-view-head > div, .ord-view-head > div { min-width: 0; }
.card .hw-view-head { margin-bottom: 1rem; padding-block: 0; }
@media (max-width: 640px) {
  .hw-view-head { flex-direction: column; align-items: stretch; }
  .hw-view-head .btn { align-self: flex-start; }
}

/* the account panel: cards in pairs, the danger zone across the bottom */
@media (min-width: 1100px) {
  .app-view[data-view="account"].is-active { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
  .app-view[data-view="account"] > .card { margin: 0; }
  .app-view[data-view="account"] > .card.is-danger { grid-column: 1 / -1; margin-top: 4px; }
  .app-view[data-view="account"]:has(#passkey-card[hidden]) #mfa-card { grid-column: 1 / -1; }
}
.card.is-danger { margin-top: 4px; }
.card.is-danger .card-eyebrow { display: block; margin-bottom: .45rem; }

/* messages sit on the scene when they are outside a card, so they need a solid ground */
.page-account .form-msg { margin: 0 0 16px; }
.page-account .form-msg.is-error { background: color-mix(in srgb, var(--flag) 9%, var(--cream-2)) !important; }
.card .form-msg { margin: 0 0 1rem; }

/* empty lines the engine drops straight into a list: a slip of paper, never loose text on the sky */
.hw-profile-list > p.card-sub, .pm-list > p.card-sub, .saddr-list > p.card-sub, .ord-list > p.card-sub, #sub-body > p.card-sub {
  background: var(--cream); color: var(--ink-dim); border-radius: 12px; box-shadow: 5px 5px 0 var(--edge);
  padding: 18px 22px; margin: 0; max-width: none;
}
.hw-profile-list > p.card-sub { grid-column: 1 / -1; }

/* placeholders while a list loads */
.skeleton-card { background: var(--cream-2); border: 2px dotted rgb(var(--ink-rgb) / .28); border-radius: 12px; box-shadow: 3px 3px 0 var(--edge); padding: 16px 18px; }
.skeleton-bar { background: var(--paper-sunken); height: .8em; }

/* ---------------------------------------------------------------- account */
.passkey-item { padding: 10px 12px 10px 16px; }
.passkey-meta { font: 500 .875rem/1.35 var(--font-ui); color: var(--ink-dim); }
.passkey-text strong { font: 700 1rem/1.3 var(--font-ui); }
.mfa-setup { padding: 16px; background: var(--cream-2); border: 2px dotted rgb(var(--ink-rgb) / .28); border-radius: 10px; }
.mfa-manual-label { font: 500 .9375rem/1.4 var(--font-ui); color: var(--ink-dim); }
.mfa-secret { font-size: 1rem; background: var(--paper-sunken); padding: 6px 10px; border-radius: 6px; }

/* ---------------------------------------------------------------- handwriting */
.hw-profile-list { gap: 22px; margin-bottom: 28px; }
@media (min-width: 620px) { .hw-profile-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hw-profile { padding: 14px 14px 12px; gap: 12px; }
.hw-profile-preview, .acct-sig-preview {
  background: var(--card-paper); color: var(--card-ink);
  border: 2px dashed var(--card-rule); border-radius: 8px; padding: 12px 14px; min-height: 5rem;
}
.hw-profile-preview .is-muted { font: 500 .9375rem var(--font-ui); color: var(--card-text-dim); }
.hw-profile-body { gap: 10px; }
.hw-profile-name { min-height: 44px !important; flex: 1 1 9rem; font: 700 1rem var(--font-ui) !important; }
.hw-profile-actions { border-top: 2px dotted rgb(var(--ink-rgb) / .25); padding-top: 4px; margin-top: auto; }
.acct-sig-preview svg g { stroke: var(--card-ink); }
.acct-sig-body { gap: 14px; }
.acct-sig-preview { padding: 16px 20px; }

/* ---------------------------------------------------------------- payment methods */
.pm-list { gap: 18px; }
.pm-card { padding: 14px 18px; gap: 6px 16px; }
.pm-brand { font: 700 1.0625rem var(--font-ui); }
.pm-num, .pm-exp { font: 500 1rem var(--font-ui); letter-spacing: .02em; }
.pm-exp { color: var(--ink-dim); }
.pm-card .link-btn { font-size: .9375rem; }

/* ---------------------------------------------------------------- subscription */
.page-account .sub-card {
  background: var(--cream) !important; border: 0 !important; border-radius: 14px !important; box-shadow: 8px 8px 0 var(--edge) !important;
  outline: 2px dashed rgb(var(--ink-rgb) / .2); outline-offset: -11px; padding: clamp(22px, 2.6vw, 30px);
}
.sub-status-line { font: 500 1.0625rem/1.9 var(--font-ui); color: var(--ink); }
.sub-status-line strong {
  font: 700 .75rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; border-radius: 6px; padding: 6px 10px 5px;
  background: var(--cream-2); color: var(--ink-dim); box-shadow: 2px 2px 0 var(--edge); margin-right: 4px; display: inline-block; vertical-align: 1px;
}
.sub-status.is-active .sub-status-line strong { background: var(--ok-wash); color: var(--ok-text); }
.sub-status .link-btn { margin-top: .4rem; }
.sub-gifted { font: 500 var(--step--1)/1.45 var(--font-ui); color: var(--ink-dim); }
.sub-price { font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); line-height: 1; margin: 0 0 1rem; }
.sub-price span { font: 500 1.1rem var(--font-body); color: var(--ink-dim); }
.sub-perks { margin: 0 0 1.4rem; display: grid; gap: .65rem; }
.sub-perks li { display: block; position: relative; padding: 0 0 0 34px; font-size: 1.0625rem; color: var(--ink); }
.sub-perks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: var(--sage); }
.sub-perks li::after { content: ""; position: absolute; left: 6px; top: calc(.2em + 6px); width: 10px; height: 5px; border-left: 2.5px solid var(--on-sage); border-bottom: 2.5px solid var(--on-sage); transform: rotate(-48deg); }
.sub-form { margin-top: 28px; }
.sub-form-title { font: 400 1.4rem/1.15 var(--font-heading); }
.sub-field label, .sub-field-label { text-transform: none; letter-spacing: 0; }
.sub-field-row { gap: 12px; }
.sub-hint { line-height: 1.5; }
.sub-hint strong { color: var(--ink); }
.sub-save { font: 500 .9375rem var(--font-ui); color: var(--ink); gap: 10px; }
.sub-gifts { margin-top: 28px; background: var(--cream); border-radius: 14px; box-shadow: 8px 8px 0 var(--edge); padding: clamp(20px, 2.4vw, 28px); }
.sub-gifts-title { font: 400 1.35rem/1.15 var(--font-heading); text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0 0 .8rem; }
.sub-gift-list { gap: 0; }
.sub-gift-row { padding: 10px 0; border-bottom: 2px dotted rgb(var(--ink-rgb) / .25); font: 500 1rem var(--font-ui); }
.sub-gift-row:last-child { border-bottom: 0; }
.sub-gift-status { font-size: .6875rem; }

/* ---------------------------------------------------------------- saved addresses */
.saddr-list { gap: 22px; }
@media (min-width: 900px) { .saddr-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.saddr-card { padding: 18px 18px 16px; position: relative; }
.saddr-name { min-height: 44px !important; font: 700 1rem var(--font-ui) !important; }
.saddr-body { font: 500 1.0625rem/1.55 var(--font-body); color: var(--ink); margin: 10px 0 0; }

/* ---------------------------------------------------------------- orders */
.ord-list { gap: 22px; }
.ord-card { padding: 16px 18px 18px; }
.ord-card-row { gap: 8px 14px; }
.ord-date { font: 500 .9375rem var(--font-ui); color: var(--ink-dim); }
.ord-price { font-size: 1.15rem; }
.ord-card-row .link-btn { min-height: 44px; }
.ord-note { font: 400 1.65rem/1.05 var(--font-hand); color: var(--hand-ink); margin: 6px 0 4px; }
.ord-note .is-muted { font: italic 500 1rem var(--font-ui); color: var(--ink-dim); }
.ord-actions { margin-top: 12px; }
.ord-detail { border-top: 2px dotted rgb(var(--ink-rgb) / .25); margin-top: 14px; padding-top: 12px; }
.ord-detail p { font: 500 .9375rem/1.5 var(--font-ui); color: var(--ink-dim); }
.ord-detail .is-muted { font: 700 .75rem var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin-right: 8px; }
.ord-detail-note { font: 400 1.5rem/1.1 var(--font-hand) !important; color: var(--hand-ink) !important; border-left: 3px solid rgb(var(--terra-rgb) / .4); }

/* ---------------------------------------------------------------- the delete dialog */
.modal-scrim { z-index: 200; }
.modal h3 { color: var(--flag); }
.modal .field { margin-top: 1.1rem; }

/* ---------------------------------------------------------------- the capture dialogs (handwriting, signature)
   theme.css already makes .hw-shell / .sig-shell a cream card; this is spacing and the numbered steps. */
.hw-head { padding-right: 4.4rem; }
.hw-sub { font: 500 var(--step--1)/1.5 var(--font-ui); }
.hw-steps, .sig-tips { list-style: none; counter-reset: step; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .85rem; }
.hw-steps li, .sig-tips li { counter-increment: step; position: relative; padding-left: 40px; min-height: 28px; color: var(--ink); font-size: 1.0625rem; line-height: 1.45; }
.hw-steps li::before, .sig-tips li::before {
  content: counter(step); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--terra); color: var(--btn-on); font: 700 .875rem/28px var(--font-ui); text-align: center;
}
.hw-pangram-sample {
  font: 400 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.45 var(--font-body); color: var(--ink);
  background: var(--cream-2); border: 2px dashed rgb(var(--ink-rgb) / .28); border-radius: 10px; padding: 14px 16px;
}
.hw-body .hint, .hw-body p.hint { font: 500 var(--step--1)/1.5 var(--font-ui); color: var(--ink-dim); }
@media (max-width: 639px) {
  .hw-foot .btn-primary { order: -1; flex: 1 1 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) { .app-view.is-active { animation: none; } }