/* A store's one tire setup (099 program + T5 Good / Better / Best approved choice by choice). */
.tp { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tp-row { display: grid; grid-template-columns: 9.5em 1fr; align-items: center; gap: 10px; font-size: 14px; }
.tp-row select { min-height: 38px; width: 100%; min-width: 0; }
.tp-k { color: var(--ink-2); font-weight: 600; }
.tp-now { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.tp-msg { margin: 0; font-size: 13px; color: var(--ink-3); }
.tp-msg.is-bad { color: var(--red, #c62828); }
@media (max-width: 420px) { .tp-row { grid-template-columns: 1fr; gap: 4px; } }
.tp-row select:disabled { opacity: 0.6; cursor: default; }
.tp-row.is-ro { padding: 6px 0; border-bottom: 1px solid var(--hair, rgba(127,127,127,.2)); }
.tp-v { font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.tp-v.is-none { color: var(--ink-3, var(--ink-2)); font-weight: 500; }
.tp-msg.is-lock { color: var(--amber, #b26a00); font-weight: 600; }
/* Good / Better / Best: one card per tier, Best first. */
.tp-tiers { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--hair, rgba(127,127,127,.2)); }
.tp-tier { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--hair, rgba(127,127,127,.25)); border-radius: 10px; min-width: 0; }
.tp-tier-head h4 { margin: 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.tp-saved { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.tp-k2 { font-size: 12px; color: var(--ink-3, var(--ink-2)); }
.tp-chip { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--fill, rgba(127,127,127,.12)); color: var(--ink-2); }
.tp-chip.is-demo { background: rgba(178,106,0,.14); color: var(--amber, #b26a00); font-weight: 600; }
.tp-chip.is-out { background: rgba(80,80,200,.12); }
.tp-sug { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 8px; background: var(--fill, rgba(127,127,127,.08)); }
.tp-sug .btn { align-self: flex-start; }
.tp-change-line { margin: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.tp-fine { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-3, var(--ink-2)); overflow-wrap: anywhere; }
.tp-fine.is-note { color: var(--amber, #b26a00); }
.tp-fine.is-ok { color: var(--green, #2e7d32); }
.tp-gap { margin: 0; font-size: 13px; font-weight: 600; color: var(--amber, #b26a00); overflow-wrap: anywhere; }
.tp-more summary { cursor: pointer; font-size: 13px; color: var(--accent, var(--ink-2)); }
.tp-change { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.tp-change select { min-height: 38px; width: 100%; min-width: 0; }
.tp-change .btn { align-self: flex-start; }
.tp-also { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-also input { flex: 1 1 12em; min-height: 38px; min-width: 0; box-sizing: border-box; }
/* The preview: one block per example size (stacks on a phone, no sideways scroll). */
.tp-preview { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--hair, rgba(127,127,127,.2)); }
.tp-preview h4 { margin: 0; font-size: 14px; }
.tp-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-seg .btn.is-on { font-weight: 700; outline: 2px solid var(--accent, currentColor); }
.tp-pv { padding: 8px 10px; border: 1px solid var(--hair, rgba(127,127,127,.2)); border-radius: 8px; min-width: 0; }
.tp-pv-size { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.tp-pv dl { display: grid; grid-template-columns: 6em 1fr; gap: 4px 10px; margin: 0; font-size: 13px; }
.tp-pv dt { color: var(--ink-2); font-weight: 600; }
.tp-pv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tp-price { font-size: 12px; color: var(--ink-2); }
.tp-none { color: var(--ink-3, var(--ink-2)); font-size: 12px; }
@media (max-width: 420px) { .tp-pv dl { grid-template-columns: 1fr; } .tp-pv dt { margin-top: 4px; } }
/* R2 (151): named shop programs and the supplier call order (stack on a phone, no sideways scroll). */
.tp-progs { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--hair, rgba(127,127,127,.2)); min-width: 0; }
.tp-progs h4 { margin: 0; font-size: 14px; }
.tp-prog { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border: 1px solid var(--hair, rgba(127,127,127,.25)); border-radius: 10px; min-width: 0; }
.tp-prog.is-pref { border-color: var(--accent, rgba(80,80,200,.45)); }
.tp-prog-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.tp-prog-n { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tp-chip.is-pref { background: rgba(46,125,50,.14); color: var(--green, #2e7d32); font-weight: 600; }
.tp-prog-l { margin: 0; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.tp-prog-l.is-shop { color: var(--ink-2); }
.tp-pf { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; background: var(--fill, rgba(127,127,127,.08)); min-width: 0; }
.tp-pf-row { display: flex; flex-direction: column; gap: 3px; font-size: 14px; min-width: 0; }
.tp-pf-row input, .tp-pf-row select, .tp-pf-row textarea, .tp-pf-ctl select { width: 100%; min-width: 0; min-height: 38px; box-sizing: border-box; font: inherit; }
.tp-pf-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tp-pf-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-callcat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tp-callcat .btn { align-self: flex-start; }
.tp-calls { margin: 0; padding-left: 0; list-style: none; font-size: 14px; display: flex; flex-direction: column; gap: 2px; }