/*
 * Settings → Pricing, the one pricing page (the evening of 2026-09-29,
 * docs/features/2026-09-29-repair-price-list-plan.md decision 16). The owner's signed-off
 * design: https://claude.ai/artifact/C92tfkgDXUdWybMYT2eARr — its values are copied here.
 *
 * Every rule is under .ppx (the section body), so nothing here can shape another settings
 * section. The section head, groups and footer are the Settings page's own cfg-* language.
 */

.ppx { min-width: 0; }
/* The Settings page sets its labels bold; these labels wrap whole controls with a sentence
   under them, so they start at normal weight and bold only their own title. */
.ppx label { font-weight: 400; }
.ppx-alert { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-size: 13.5px; }

/* ---- status line ---- */
.ppx-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; background: var(--success-soft); color: var(--success); font-weight: 600; font-size: 13px; }
.ppx-status.is-warn { background: var(--accent-soft); color: var(--accent-ink); }
.ppx-status__text { flex: 1 1 260px; min-width: 0; }
.ppx-status__soft { font-weight: 400; color: var(--ink-2); }

/* ---- fixes and prices ---- */
.ppx-parts { border: 1px solid var(--rule-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-card); min-width: 0; }
.ppx-head, .ppx-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 96px 150px 28px; gap: 12px; align-items: center; padding: 0 14px; }
/* "Could be": the cheapest to the dearest of the fixes this part's faults use, the dearest named
   (owner-chosen layout A, 2026-09-29). */
.ppx-could { display: grid; justify-items: end; gap: 3px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ppx-could small { font-size: 11.5px; font-weight: 400; color: var(--ink-3); overflow-wrap: anywhere; text-align: right; }
.ppx-could__one { font-weight: 400; color: var(--ink-3); }
.ppx-head { min-height: 38px; background: var(--surface-subtle); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }
.ppx-num { text-align: right; font-variant-numeric: tabular-nums; }
.ppx-part + .ppx-part { border-top: 1px solid var(--rule); }
.ppx-row { width: 100%; min-height: 60px; padding-top: 10px; padding-bottom: 10px; border: 0; background: var(--surface-card); text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.ppx-row:hover { background: #fcfbf8; }
.ppx-part.is-open .ppx-row { background: #faf6ea; }
.ppx-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ppx-comp { min-width: 0; font-weight: 600; font-size: 14px; }
.ppx-comp small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.ppx-fix { min-width: 0; font-size: 13.5px; }
.ppx-fix__name { display: block; overflow-wrap: anywhere; }
.ppx-total { font-weight: 700; }
.ppx-chev { display: grid; place-items: center; color: var(--ink-3); transition: transform 0.15s; }
.ppx-chev::before { content: ""; width: 6px; height: 6px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-45deg); }
.ppx-part.is-open .ppx-chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .ppx-chev { transition: none; } }
.ppx-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--surface-subtle); color: var(--ink-3); }
.ppx-chip.is-gold { background: var(--accent-soft); color: var(--accent-ink); }
.ppx-chip.is-green { background: var(--success-soft); color: var(--success); }

/* ---- a part, opened: how you fix it, and which fix each fault gets ---- */
.ppx-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 16px 16px 14px; border-top: 1px solid var(--rule); background: #fcfbf8; }
.ppx-sec h4 { margin: 0 0 3px; font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.ppx-sec > p { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-3); }
/* More than three fixes scroll here; pricing-page.js measures the height (fitFixList). */
.ppx-fixlist { position: relative; }
.ppx-fixlist.is-scroll { overflow-y: auto; overscroll-behavior: contain; margin-bottom: 8px; padding: 0 6px 0 0; border-bottom: 1px solid var(--rule); scrollbar-width: thin; }
.ppx-fixlist.is-scroll .ppx-fixcard:last-child { margin-bottom: 8px; }
.ppx-fixcard { display: grid; gap: 10px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--surface-card); }
.ppx-fixcard__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ppx-fixcard__name { flex: 1 1 180px; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--surface-card); }
.ppx-fixcard__sums { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.ppx-fixcard__sums label { display: grid; gap: 3px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); }
.ppx-op { padding-bottom: 8px; color: var(--ink-4); font-weight: 600; }
.ppx-eq { padding-bottom: 8px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 72px; }
/* "This replaces the leaf / frame" (leaf and frame only): the page's switch, inside the card. */
.ppx-fixcard__replace { padding-top: 10px; border-top: 1px solid var(--rule); }
.ppx-fixcard__replace .ppx-switch__text b { font-size: 13px; }
.ppx-fixcard__replace .ppx-switch__text small { font-size: 12px; }
.ppx-fixcard__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); }
.ppx-link { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-ink); cursor: pointer; }
.ppx-link:hover { text-decoration: underline; }
.ppx-link--danger { color: var(--danger); font-size: 12px; }
.ppx-addfix { width: 100%; min-height: 40px; border: 1px dashed var(--rule-strong); border-radius: 10px; background: var(--surface-card); font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.ppx-addfix:hover { border-color: var(--accent); color: var(--accent-ink); }
.ppx-faults { display: grid; gap: 6px; }
.ppx-fault { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 190px); gap: 10px; align-items: center; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--surface-card); border: 1px solid var(--rule); font-size: 13px; }
.ppx-fault span { min-width: 0; overflow-wrap: anywhere; }
.ppx-fault select { height: 34px; min-width: 0; padding: 0 8px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--surface-card); font: inherit; font-size: 13px; color: var(--ink); }
.ppx-fault select.is-other { border-color: var(--accent); background: #faf6ea; }
.ppx-editor__foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.ppx-editor__error { margin: 0 auto 0 0; font-size: 13px; color: var(--danger); }

/* ---- money boxes ---- */
.ppx-money { display: inline-flex; align-items: center; height: 36px; width: 104px; padding: 0 8px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--surface-card); }
.ppx-money:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ppx-money > span { color: var(--ink-4); }
.ppx-money input { width: 100%; min-width: 0; border: 0; outline: 0; padding: 0 0 0 4px; background: none; text-align: right; font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); }
.ppx-money--pct input { text-align: left; padding: 0 4px 0 0; }
.ppx-money.is-bad { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }

/* ---- replaced doors ---- */
.ppx-switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.ppx-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ppx-switch__track { position: relative; flex: none; width: 38px; height: 22px; margin-top: 1px; border-radius: 999px; background: var(--surface-inset); transition: background 0.15s; }
.ppx-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 0.15s; }
.ppx-switch input:checked + .ppx-switch__track { background: var(--success); }
.ppx-switch input:checked + .ppx-switch__track::after { transform: translateX(16px); }
.ppx-switch input:focus-visible + .ppx-switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ppx-switch__track, .ppx-switch__track::after { transition: none; } }
.ppx-switch__text b { display: block; font-weight: 600; font-size: 14px; }
.ppx-switch__text small { display: block; font-size: 12.5px; color: var(--ink-3); }
.ppx-which { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: 12.5px; color: var(--ink-3); }
.ppx-which:empty { display: none; }
.ppx-extras { display: grid; gap: 8px; }
.ppx-extras__title { margin: 0; font-size: 13px; font-weight: 600; }
.ppx-extras__hint { margin: -6px 0 0; font-size: 12.5px; color: var(--ink-3); }
.ppx-extra { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; background: var(--surface-subtle); }
.ppx-extra__on { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.ppx-extra__name { font-weight: 600; font-size: 13.5px; cursor: pointer; }
.ppx-extra__name small { display: block; font-weight: 400; font-size: 11.5px; color: var(--ink-4); }

/* ---- inspection prices and quoting rules ---- */
.ppx-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.ppx-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ppx-field__label { font-size: 13px; font-weight: 600; color: var(--ink); }
.ppx-field small { font-size: 12px; color: var(--ink-3); }

/* ---- what clients see ---- */
.ppx-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ppx-mode { position: relative; display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 12px; border: 1.5px solid var(--rule-strong); border-radius: 10px; background: var(--surface-card); cursor: pointer; }
.ppx-mode:hover { border-color: var(--ink-4); }
.ppx-mode.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ppx-mode input { position: absolute; opacity: 0; pointer-events: none; }
.ppx-mode:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.ppx-mode__head { display: flex; align-items: flex-start; gap: 10px; }
.ppx-mode__radio { display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--ink-4); border-radius: 50%; }
.ppx-mode.is-on .ppx-mode__radio { border-color: var(--ink); }
.ppx-mode.is-on .ppx-mode__radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.ppx-mode__head b { display: block; font-size: 13.5px; font-weight: 600; }
.ppx-mode__head small { display: block; font-size: 12px; color: var(--ink-3); }
.ppx-mini { display: flex; flex-direction: column; gap: 3px; padding: 7px 9px; border-radius: var(--radius-sm); background: var(--surface-subtle); font-size: 11px; font-variant-numeric: tabular-nums; }
.ppx-mini > div { display: grid; gap: 8px; }
.ppx-c4 { grid-template-columns: minmax(0, 1fr) 44px 44px 50px; }
.ppx-c2 { grid-template-columns: minmax(0, 1fr) 54px; }
.ppx-mini > div > span:not(:first-child) { text-align: right; }
.ppx-mini__h { font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-4); }
.ppx-mini__d { margin: 0 -4px; padding: 2px 4px; border-radius: 4px; background: var(--surface-card); font-weight: 700; }
.ppx-mini__l { color: var(--ink-2); }
.ppx-mini__t { margin-top: 2px; padding-top: 3px; border-top: 1px solid var(--rule-strong); color: var(--ink-3); }

/* ---- special prices ---- */
.ppx-special { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ppx-special__card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-subtle); }
.ppx-special__card b { font-size: 13px; }
.ppx-special__card p { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.ppx-path strong { color: var(--ink); font-weight: 600; }
.ppx-path a { color: var(--accent-ink); font-weight: 600; }

/* ---- tablet ---- */
@media (max-width: 1180px) {
    .ppx-editor { grid-template-columns: minmax(0, 1fr); }
}

/* ---- phones and tablets: one column, each part a card with its price on the right ---- */
@media (max-width: 900px) {
    .ppx-head { display: none; }
    .ppx-row { grid-template-columns: minmax(0, 1fr) auto 18px; gap: 4px 10px; min-height: 0; padding: 12px 14px; }
    .ppx-row .ppx-comp { grid-column: 1; grid-row: 1; }
    .ppx-row .ppx-total { grid-column: 2; grid-row: 1; }
    .ppx-row .ppx-chev { grid-column: 3; grid-row: 1; }
    .ppx-row .ppx-fix { grid-column: 1; grid-row: 2; font-size: 12.5px; color: var(--ink-2); }
    .ppx-row .ppx-could { grid-column: 2 / -1; grid-row: 2; }
    .ppx-editor { padding: 14px 12px; }
    /* Three cards are nearly a phone's screen: a swipe at the end of the list moves the page on. */
    .ppx-fixlist.is-scroll { overscroll-behavior: auto; }
    .ppx-fixcard__name, .ppx-fault select, .ppx-money input { font-size: 16px; }
    .ppx-fixcard__name { height: 44px; }
    .ppx-money { height: 44px; }
    .ppx-fault { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .ppx-fault select { height: 44px; width: 100%; }
    .ppx-fields, .ppx-modes, .ppx-special { grid-template-columns: minmax(0, 1fr); }
    .ppx-field .ppx-money { width: 100%; }
    .ppx-extra { grid-template-columns: auto minmax(0, 1fr); }
    .ppx-extra .ppx-money { grid-column: 2; width: 100%; }
    .ppx-editor__foot .btn { min-height: 44px; flex: 1 1 auto; }
}