/* Smart Quote — app-level layout on top of the design-system class contract.
   Loaded after tokens.css and quote-app.css. Only what the screens need that
   no component owns: page frames, the access card, the success screen, the
   preview edit affordances and the phone-width quote list. */

body.sq { min-height: 100vh; }
.sq-app { min-height: 100vh; display: flex; flex-direction: column; }
.sq-hidden { display: none !important; }

/* ---------- App bar: one of only two fixed elements ---------- */
.sq-appbar { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 0px); z-index: 40; }
.sq-appbar__brand a { color: inherit; text-decoration: none; }
.sq-appbar__actions { display: flex; align-items: center; gap: var(--space-2); }
.sq-appbar__link--current { background: #25352e; }
a.sq-appbar__link { display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 599px) {
  .sq-appbar { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  .sq-appbar__brand { font-size: 15px; line-height: 20px; }
  .sq-appbar__rep > span { display: none; }
  .sq-appbar__link { padding: 0 var(--space-2); white-space: nowrap; }
}

/* ---------- Page frames ---------- */
.sq-page--wide { max-width: 1100px; }
.sq-page__title { font-size: 24px; line-height: 30px; font-weight: 600; margin: 0 0 var(--space-4); }
.sq-page__lede { font-size: 15px; line-height: 22px; color: var(--ink-muted); margin: 0 0 var(--space-5); }
.sq-page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.sq-page__head .sq-page__title { margin: 0; }

/* ---------- Access screen ---------- */
.sq-access { flex: 1; display: grid; place-items: center; padding: var(--space-5) var(--space-4); }
.sq-access__card { width: 100%; max-width: 400px; }
.sq-access__brand { font-size: 24px; line-height: 30px; font-weight: 600; margin: 0 0 var(--space-2); }
.sq-access__logo { max-height: 40px; width: auto; display: block; margin-bottom: var(--space-3); }
.sq-access__lede { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: 0 0 var(--space-5); }
.sq-alert-slot { min-height: 56px; }
.sq-alert-slot:empty { min-height: 56px; }
@media (max-width: 599px) {
  .sq-access { place-items: start center; padding-top: var(--space-7); }
}

/* ---------- Builder ---------- */
.sq-builder { flex: 1; display: flex; flex-direction: column; }
.sq-builder__body { flex: 1; }
.sq-builder__steps { max-width: 960px; margin: 0 auto; padding: 0 var(--space-4); }
.sq-steps { scrollbar-width: none; }
.sq-steps::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .sq-steps { justify-content: center; } }
@media (max-width: 599px) {
  .sq-steps__item:not([data-state="current"]) .sq-steps__btn > span:last-child { display: none; }
}
.sq-actionbar { margin-top: auto; }
.sq-actionbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; max-width: var(--measure); margin: 0 auto; }
.sq-actionbar__msg { flex: 1 1 auto; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
@media (max-width: 599px) {
  .sq-actionbar__inner { flex-wrap: wrap; }
  .sq-actionbar__msg { flex-basis: 100%; order: -1; }
  .sq-actionbar .sq-btn { white-space: nowrap; }
  /* Phone row layout: name, then qty + total, then the unit price on its own line. */
  .sq-line__qty { grid-row: 2; grid-column: 1; }
  .sq-line__total { grid-row: 2; grid-column: 2; }
  .sq-line__unit { grid-row: 3; grid-column: 1 / -1; }
}
.sq-picker-row { display: flex; align-items: flex-end; gap: var(--space-3); }
.sq-picker-row .sq-field { flex: 1 1 auto; }
.sq-picker-row .sq-counter { padding-bottom: 13px; white-space: nowrap; }
.sq-share__box .sq-btn { flex: none; white-space: nowrap; }
.sq-line__override { display: none; }
.sq-line__override[data-open="true"] { display: flex; }
.sq-line__override-label { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sq-line__toggle { grid-column: 1 / -1; }
.sq-consent-note { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sq-form-errors { margin-top: var(--space-4); }

/* Preview: canvas ground, sheet with edit affordances per section */
.sq-preview { padding: var(--space-4) 0 0; }
.sq-preview .sq-sheet { margin-top: var(--space-4); }
.sq-sheet__customer--editable { position: relative; }
.sq-sheet__edit { position: absolute; right: 0; top: var(--space-5); }
.sq-sheet__tools { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }
.sq-sheet__evidence { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: var(--space-3); }
.sq-sheet__pending { color: var(--ink-muted); }

/* ---------- Success screen ---------- */
.sq-success { max-width: var(--measure); margin: 0 auto; padding: var(--space-7) var(--space-4); }
.sq-success__icon { width: 48px; height: 48px; color: var(--brand-ink); margin-bottom: var(--space-4); }
.sq-success__title { font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 var(--space-2); }
.sq-success__ref { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-muted); margin: 0 0 var(--space-5); }
.sq-success__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }

/* ---------- Quote list ---------- */
.sq-table__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sq-table__num { white-space: nowrap; text-decoration: none; }
.sq-table__num:hover { text-decoration: underline; }
.sq-table__badges { display: flex; gap: var(--space-1); flex-wrap: wrap; }
@media (max-width: 599px) {
  .sq-table, .sq-table tbody, .sq-table tr, .sq-table td { display: block; }
  .sq-table thead { display: none; }
  .sq-table { background: transparent; box-shadow: none; border-radius: 0; }
  .sq-table tr { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4); margin-bottom: var(--space-3); }
  .sq-table td { border: 0; padding: var(--space-1) 0; }
  .sq-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-muted); }
  .sq-table__money { text-align: left; }
  .sq-table__row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2) !important; }
}

/* ---------- Public quote page frame ---------- */
.sq-public { padding: var(--space-8) var(--space-8) var(--space-7); }
.sq-public__actions { max-width: var(--sheet); margin: var(--space-4) auto 0; display: flex; justify-content: flex-end; }
.sq-public--empty { min-height: 100vh; display: grid; place-items: center; }
.sq-public__card { max-width: 480px; }
.sq-sheet__actions { display: flex; justify-content: flex-end; }
@media (max-width: 599px) {
  .sq-public { padding: var(--space-4); }
  .sq-sheet { padding: var(--space-4); }
  .sq-sheet__head { flex-direction: column; }
  .sq-sheet__ref { text-align: left; }
}
@media print {
  .sq-public { padding: 0; }
  .sq-public__actions { display: none !important; }
}

/* ---------- Busy overlay for whole-screen loads ---------- */
.sq-loading { flex: 1; display: grid; place-items: center; min-height: 40vh; color: var(--ink-muted); gap: var(--space-3); grid-auto-flow: row; text-align: center; font-size: 13px; }