/* Settings, after Shopify's (decided 2026-11-03): an index of sections in
   groups; each section's page beside the list of sections on a wide screen,
   with the way back to Settings otherwise; a page is a stack of cards, each a
   title, at most one sentence, its fields and a footer with its action and the
   message that action left. */

/* ── Settings: the sections, in groups ─────────────────────────────────────── */
.settings-index { display: grid; gap: 28px; max-width: 760px; }
.settings-index > .page-heading { margin-bottom: -6px; }
.settings-group { display: grid; gap: 10px; min-width: 0; }
.settings-group-title { padding-left: 4px; color: #4f4f4f; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.settings-list { display: grid; }
.settings-link { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 16px 20px; color: inherit; text-decoration: none; }
.settings-link + .settings-link { border-top: 1px solid #efefef; }
.settings-link:hover { background: #fafafa; }
.settings-link:focus-visible { outline-offset: -3px; }
.settings-symbol { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: #f2f2f2; color: #262626; }
.settings-symbol .icon { width: 20px; height: 20px; }
.settings-link > span:nth-child(2) { flex: 1; min-width: 0; }
.settings-link strong { display: block; color: #1a1a1a; font-size: 15px; font-weight: 600; }
.settings-link > span > span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.settings-link > .icon { width: 18px; height: 18px; color: #8a8a8a; }

/* ── A section's page ──────────────────────────────────────────────────────── */
.settings-layout { display: grid; align-items: start; }
.settings-nav { display: none; }
.settings-main { min-width: 0; container: settings-main / inline-size; }
.settings-page { display: grid; gap: 16px; min-width: 0; max-width: 760px; }
.settings-page.is-wide { max-width: 1120px; }
.settings-page > .page-heading { margin-bottom: 6px; }
.settings-page > .page-alert { margin: 0; }
.settings-page > .page-heading p a { color: #1a1a1a; font-weight: 550; text-underline-offset: 3px; }
/* A page's own actions stay on one line beside its title. */
.settings-page > .page-heading > .heading-actions { flex: none; flex-wrap: nowrap; }
@media (min-width: 1200px) {
  .settings-layout { grid-template-columns: 216px minmax(0, 1fr); gap: 0 40px; }
  .settings-nav { position: sticky; top: 24px; display: grid; align-content: start; gap: 14px; }
  .settings-back { display: none; }
}
.settings-nav-title { justify-self: start; padding: 4px 12px 2px; color: #151515; font-size: 20px; font-weight: 700; letter-spacing: -.45px; text-decoration: none; }
.settings-nav-title:hover { text-decoration: underline; text-underline-offset: 4px; }
.settings-nav-group { display: grid; gap: 2px; }
.settings-nav-label { padding: 0 12px 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.settings-nav-group a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 9px; color: #2b2b2b; font-size: 14px; font-weight: 550; line-height: 1.3; text-decoration: none; }
.settings-nav-group a .icon { width: 18px; height: 18px; color: #555; }
.settings-nav-group a:hover { background: #efefef; color: #111; }
.settings-nav-group a[aria-current='page'] { background: #e8e8e8; color: #111; font-weight: 650; }
.settings-nav-group a[aria-current='page'] .icon { color: #1a1a1a; }
.settings-nav a:focus-visible { outline-offset: -2px; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.settings-cards { display: grid; gap: 16px; min-width: 0; }
.settings-cards > .alert { margin: 0; }
.settings-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; padding: 20px 24px 0; }
.settings-card-head > div { flex: 1 1 260px; min-width: 0; }
.settings-card-head h2 { font-size: 16px; font-weight: 650; letter-spacing: -.2px; line-height: 1.4; }
.settings-card-head h2:focus { outline: none; }
.settings-card-head p { margin-top: 4px; max-width: 80ch; color: var(--muted); font-size: 14px; line-height: 1.5; }
.settings-card-head:last-child { padding-bottom: 20px; }
.settings-card-head > .button { flex: none; }
.settings-card-body { display: grid; gap: 18px; min-width: 0; padding: 18px 24px 22px; }
.settings-card-body > .alert { margin: 0; }
.settings-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 12px; padding: 12px 24px; border-top: 1px solid #efefef; background: #fafafa; }
.settings-card-foot > .settings-saved { margin-right: auto; }
@media (min-width: 761px) {
  /* A card's action is lighter than the page's own. */
  .settings-card-foot .button, .settings-savebar .button, .settings-card-head > .button { min-height: 40px; padding: 8px 18px; }
}
.settings-card > .empty-state { min-height: 0; padding: 26px 24px 30px; }
.settings-card > .inline-loading { min-height: 96px; }
/* A key or secret to copy once. */
.settings-card.settings-secret { border-color: #bfe3cd; box-shadow: 0 0 0 3px #ebf7f0; }

/* Fields */
.settings-field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.settings-field > label, .settings-days > legend, .api-key-scopes > legend, .webhook-events > legend { padding: 0; color: #303030; font-size: 13px; font-weight: 600; }
.settings-field .form-hint { margin: 0; font-size: 13px; line-height: 1.5; }
.settings-field input:where(:not([type='checkbox']):not([type='radio'])), .settings-field select, .settings-field textarea { width: 100%; }
.settings-field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.settings-fields > .is-full { grid-column: 1 / -1; }
.settings-fields.is-times { grid-template-columns: repeat(2, minmax(0, 180px)); }
.settings-divided { padding-top: 18px; border-top: 1px solid #efefef; }
.settings-hint-count { display: flex; justify-content: space-between; gap: 12px; }
.settings-hint-count > span:last-child { flex: none; font-variant-numeric: tabular-nums; }
.settings-error { color: #a12a24; font-size: 13px; font-weight: 600; }
.settings-error:focus { outline: none; }
.settings-note { padding: 10px 14px; border-radius: 10px; background: #fff7e8; color: #6f4a12; font-size: 13px; line-height: 1.5; }
.settings-saved { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: #176b43; font-size: 13px; font-weight: 550; line-height: 1.45; }
.settings-saved .icon { flex: none; width: 16px; height: 16px; }
/* What buyers see now (Chat hours): a dot, green while someone is there. */
.settings-now { display: flex; align-items: center; gap: 8px; color: #3d3d3d; font-size: 14px; }
.settings-now::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #a8a8a8; }
.settings-now.is-open::before { background: #1f9d55; }
@container settings-main (max-width: 540px) {
  .settings-fields { grid-template-columns: minmax(0, 1fr); }
  .settings-fields.is-times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Days as toggles: the checkbox covers its day, which shows whether it is on. */
.settings-days { display: grid; min-width: 0; margin: 0; padding: 0; border: 0; }
.settings-days > legend { margin-bottom: 8px; }
.settings-day-list { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-day { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 40px; padding: 8px 12px; border: 1px solid #d5d5d5; border-radius: 999px; background: #fff; color: #303030; font-size: 14px; font-weight: 550; cursor: pointer; }
.settings-day input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.settings-day:hover { border-color: #a9a9a9; }
.settings-day:has(input:checked) { border-color: #1a1a1a; background: #1a1a1a; color: #fff; }
.settings-day:has(input:focus-visible) { outline: 2px solid #005bd3; outline-offset: 2px; }
.settings-day:has(input:disabled) { opacity: .55; cursor: default; }

/* A long form's Save: at the end of the form, and kept in view while there are unsaved changes. */
.settings-savebar { display: flex; align-items: center; justify-content: flex-end; gap: 12px 16px; }
.settings-savebar-text { margin-right: auto; color: #303030; font-size: 14px; font-weight: 600; }
.settings-savebar-text:empty { display: none; }
.settings-savebar:has(.settings-savebar-text:not(:empty)) { position: sticky; bottom: 16px; z-index: 6; padding: 10px 12px 10px 20px; border: 1px solid #dcdcdc; border-radius: 16px; background: #fff; box-shadow: 0 8px 28px #0000001a; }

/* ── Sign-in and security ─────────────────────────────────────────────────── */
.security-page { display: grid; gap: 16px; }
.security-fields > .settings-field { max-width: 420px; }
#security-alert:empty { display: none; }
#security-alert > .alert { margin: 0; }
.security-ended { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; border: 1px solid #efc6c1; border-radius: 12px; background: #fff6f5; }
.security-ended p { flex: 1 1 280px; color: #6e1f1a; font-size: 14px; line-height: 1.5; }

/* ── Ordering ─────────────────────────────────────────────────────────────── */
.money-input { position: relative; max-width: 240px; min-width: 0; }
.money-input > span { position: absolute; top: 50%; left: 14px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.money-input input { width: 100%; padding-left: 28px; font-variant-numeric: tabular-nums; }

/* ── Chat hours ───────────────────────────────────────────────────────────── */
#chat-hours-zone { max-width: 420px; }

/* ── Store profile: the form beside a preview of the vendor page ──────────── */
.store-profile-content { display: grid; gap: 16px; min-width: 0; }
.store-profile-content > [tabindex="-1"]:focus { outline: none; }
.store-profile-content > #store-profile-status:empty { display: none; }
.store-profile-content > #store-profile-status > .alert { margin: 0; }
.store-profile-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
.store-profile-form { display: grid; gap: 16px; min-width: 0; }
@container settings-main (min-width: 720px) {
  .store-profile-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
  .store-profile-preview { position: sticky; top: 24px; }
}
.store-profile-layout.is-readonly { grid-template-columns: minmax(0, 560px); }
.store-profile-readonly { margin: 0; }
.store-profile-card { padding: 16px 24px 4px; }
.store-profile-business { padding: 12px 24px 20px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.store-profile-business a { color: #1a1a1a; font-weight: 550; text-underline-offset: 3px; }
.store-profile-images { display: grid; gap: 14px; }
.store-profile-image { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; min-width: 0; }
.store-profile-image-preview { display: grid; place-items: center; height: 64px; overflow: hidden; border: 1px solid #e3e3e3; border-radius: 10px; background: #f4f4f4; color: #555; font-size: 15px; font-weight: 650; }
.store-profile-image.is-logo .store-profile-image-preview { width: 64px; }
.store-profile-image-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.store-profile-image-text { display: grid; gap: 2px; min-width: 0; }
.store-profile-image-text strong { font-size: 14px; font-weight: 600; }
.store-profile-image-text .form-hint { margin: 0; font-size: 13px; }
.store-profile-image-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 12px; }
@container settings-main (max-width: 540px) {
  .store-profile-image { grid-template-columns: 88px minmax(0, 1fr); align-items: start; }
  .store-profile-image-actions { grid-column: 2; justify-content: flex-start; }
}
/* The vendor page as stores see it. */
.store-card { --store-card-pad: 18px; display: grid; gap: 16px; overflow: hidden; padding: var(--store-card-pad); border: 1px solid #e3e3e3; border-radius: 12px; background: #fcfcfc; }
.store-card-cover { display: block; width: calc(100% + 2 * var(--store-card-pad)); max-width: none; height: 112px; margin: calc(-1 * var(--store-card-pad)) calc(-1 * var(--store-card-pad)) 0; object-fit: cover; }
.store-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.store-card-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px; background: #ececec; color: #3d3d3d; font-size: 15px; font-weight: 650; }
.store-card-avatar.is-image { border: 1px solid #e3e3e3; background: #fff; object-fit: cover; }
.store-card-head > div { min-width: 0; }
.store-card-head h3 { font-size: 17px; font-weight: 650; overflow-wrap: anywhere; }
.store-card-head p { margin-top: 2px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.store-card-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 16px; margin: 0; }
.store-card-facts dt { color: var(--muted); font-size: 12px; }
.store-card-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 550; overflow-wrap: anywhere; }
.store-card-note { padding: 10px 12px; border-radius: 8px; background: #f3f7fd; color: #1c3253; font-size: 13px; overflow-wrap: anywhere; }
.store-card-about h4 { margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.store-card-about p { margin-top: 4px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── API keys ─────────────────────────────────────────────────────────────── */
.api-key-list, .webhook-list { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid #efefef; }
.api-key-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 24px; }
.api-key-row + .api-key-row { border-top: 1px solid #efefef; }
.api-key-main { display: grid; gap: 4px; min-width: 0; }
.api-key-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.api-key-title h3 { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.api-key-title code { color: var(--muted); font-size: 12px; }
.api-key-main p { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.api-key-main .api-key-access { color: #3d3d3d; }
.api-key-actions { display: flex; flex: none; align-items: center; gap: 12px; }
.api-key-scopes { display: grid; min-width: 0; margin: 0; padding: 0; border: 0; }
.api-key-scopes > legend { margin-bottom: 4px; }
.api-key-resource { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 24px; padding: 12px 0; border-bottom: 1px solid #efefef; }
.api-key-resource:last-child { padding-bottom: 2px; border-bottom: 0; }
.api-key-resource-text { display: grid; gap: 1px; min-width: 0; }
.api-key-resource-text strong { font-size: 14px; font-weight: 600; }
.api-key-resource-text span { color: var(--muted); font-size: 13px; }
/* Reading and changing in two columns, aligned from row to row. */
.api-key-resource-scopes { display: grid; grid-template-columns: repeat(2, 112px); gap: 8px; }
.api-key-scope { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 14px 7px 12px; border: 1px solid #dedede; border-radius: 10px; background: #fff; font-size: 14px; font-weight: 550; cursor: pointer; }
.api-key-scope:hover { border-color: #b5b5b5; }
.api-key-scope:has(input:checked) { border-color: #1a1a1a; background: #f6f6f6; }
.api-key-token { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.api-key-token code { flex: 1 1 320px; min-width: 0; padding: 11px 14px; border: 1px solid #e6e6e6; border-radius: 10px; background: #f7f7f7; font-size: 13px; overflow-wrap: anywhere; user-select: all; }
@container settings-main (max-width: 540px) {
  .api-key-row { flex-direction: column; align-items: stretch; }
  .api-key-actions { justify-content: space-between; }
  .api-key-resource { grid-template-columns: minmax(0, 1fr); }
}

/* ── Webhooks: order events sent to the vendor's own systems ──────────────── */
.webhook-events { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.webhook-events > legend { margin-bottom: 8px; }
.webhook-event { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.webhook-event input { margin-top: 3px; }
.webhook-event > span { display: grid; gap: 1px; min-width: 0; }
.webhook-event strong { font-weight: 600; }
.webhook-event > span > span { color: var(--muted); font-size: 13px; }
.webhook-form-error { display: flex; align-items: flex-start; gap: 8px; color: #a12a24; font-size: 13px; line-height: 1.45; }
.webhook-form-error:focus { outline: none; }
.webhook-form-error .icon, .webhook-row-notice .icon, .webhook-row-error .icon { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.webhook-row { display: grid; gap: 14px; padding: 18px 24px; }
.webhook-row + .webhook-row { border-top: 1px solid #efefef; }
.webhook-main { display: grid; align-content: start; gap: 6px; min-width: 0; }
.webhook-url { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.webhook-description { color: #3d3d3d; font-size: 14px; overflow-wrap: anywhere; }
.webhook-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.webhook-meta code, .webhook-deliveries code { font-size: 12px; }
.webhook-last { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.webhook-row-notice, .webhook-row-error { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.45; }
.webhook-row-notice { color: #146c43; }
.webhook-row-error { color: #a12a24; }
.webhook-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.webhook-actions .webhook-delete { margin-left: auto; }
.webhook-deliveries-section { display: grid; gap: 10px; min-width: 0; }
.webhook-deliveries-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.webhook-deliveries-heading h4 { font-size: 13px; font-weight: 650; }
.webhook-deliveries-wrap { overflow-x: auto; border: 1px solid #ebebeb; border-radius: 10px; }
.webhook-deliveries { width: 100%; border-collapse: collapse; font-size: 13px; }
.webhook-deliveries th { padding: 8px 12px; border-bottom: 1px solid #ebebeb; background: #fafafa; color: var(--muted); font-size: 12px; font-weight: 550; text-align: left; white-space: nowrap; }
.webhook-deliveries td { padding: 10px 12px; border-top: 1px solid #f0f0f0; vertical-align: top; }
.webhook-deliveries tbody tr:first-child td { border-top: 0; }
.webhook-deliveries td small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.webhook-deliveries td small.webhook-delivery-error { color: #a12a24; }
.webhook-deliveries td[data-label="Time"] { white-space: nowrap; }
.webhook-empty { color: var(--muted); font-size: 13px; }
.webhook-secret-url { color: #303030; overflow-wrap: anywhere; }
.webhook-help-text { gap: 14px; margin: 0; }
.webhook-help-text > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 16px; }
.webhook-help-text dt { color: #303030; font-size: 13px; font-weight: 600; line-height: 1.6; }
.webhook-help-text dd { margin: 0; color: #3d3d3d; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.webhook-help-text code { padding: 1px 5px; border-radius: 5px; background: #f3f3f3; font-size: 12.5px; }
.webhook-confirm-url { overflow-wrap: anywhere; }
.webhook-confirm-text { color: #444; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
@container settings-main (max-width: 540px) {
  .webhook-help-text > div { grid-template-columns: minmax(0, 1fr); }
}

/* ── Phones ───────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .settings-index { gap: 22px; }
  .settings-link { min-height: 72px; padding: 14px 16px; gap: 14px; }
  .settings-card-head { padding: 18px 16px 0; }
  .settings-card-head:last-child { padding-bottom: 18px; }
  .settings-card-body { padding: 16px 16px 18px; }
  .settings-card-foot { padding: 12px 16px; }
  .settings-card-foot > .button { flex: 1 1 140px; }
  .settings-day { min-width: 52px; min-height: 44px; }
  .settings-savebar:has(.settings-savebar-text:not(:empty)) { bottom: max(12px, env(safe-area-inset-bottom)); padding-left: 16px; }
  .store-profile-card { padding: 14px 16px 2px; }
  .store-profile-business { padding: 10px 16px 18px; }
  .store-card { --store-card-pad: 14px; }
  .api-key-row, .webhook-row { padding: 16px; }
  .api-key-scope { min-height: 44px; }
  .webhook-actions .button { flex: 1 1 auto; }
  .webhook-actions .webhook-delete { margin-left: 0; }
  /* Deliveries read as cards on a phone: each cell names its column. */
  .webhook-deliveries-wrap { overflow: visible; border: 0; }
  .webhook-deliveries thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .webhook-deliveries, .webhook-deliveries tbody, .webhook-deliveries tr, .webhook-deliveries td { display: block; width: 100%; }
  .webhook-deliveries tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-bottom: 10px; padding: 12px; border: 1px solid #ebebeb; border-radius: 10px; }
  .webhook-deliveries td { padding: 0; border: 0; }
  .webhook-deliveries td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: 11px; font-weight: 550; }
  .webhook-deliveries td[data-label="Event"], .webhook-deliveries td.webhook-delivery-status { grid-column: 1 / -1; }
}