/* TaninOS UI kit v1.2 (2026-11-04, review 2: Vercel Web Interface Guidelines). The look of every approved mockup, as reusable classes.
   Rule: build new screens from these classes. Don't restyle them, and don't swap in other components.
   Fonts: keep the app's own font. These classes only set size and weight. */
:root{
  --tos-accent:#1f6fe0; --tos-link:#1a5fc4; --tos-link-strong:#1a4fa0;
  --tos-text:#18181b; --tos-text-2:#52525b; --tos-text-3:#66666f; --tos-label:#3f3f46;
  --tos-page:#f3f5f9; --tos-border:#e3e8f0; --tos-input-border:#8591a4; --tos-divider:#eef1f6; --tos-track:#eef2f8;
  --tos-red:#b91c1c; --tos-green:#16a34a; --tos-disabled:#c9d2df;
}
.tos *{box-sizing:border-box}
.tos{color:var(--tos-text);font-size:14px;line-height:1.4;overflow-wrap:break-word}
.tos h1,.tos h2,.tos h3{text-wrap:balance}
.tos button,.tos a,.tos input,.tos select,.tos textarea,.tos label{touch-action:manipulation}
.tos [style*="display: grid"]>*,.tos .tos-grid-3>*,.tos .tos-grid-2>*{min-width:0}

/* ---------- Buttons ---------- */
.tos-btn{font:inherit;font-size:13px;font-weight:600;min-height:36px;padding:0 16px;border-radius:8px;border:none;background:var(--tos-accent);color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform 120ms cubic-bezier(.23,1,.32,1)}
.tos-btn:active{transform:scale(.97)}
.tos-btn--secondary{background:#fff;color:var(--tos-text);border:1px solid var(--tos-border);font-weight:500;padding:0 12px}
.tos-btn--small{min-height:32px;padding:0 12px;background:#fff;color:var(--tos-text);border:1px solid var(--tos-border)}
.tos-btn--danger{background:var(--tos-red);color:#fff}
.tos-btn[disabled],.tos-btn--disabled{background:var(--tos-disabled);color:#fff;border:none;cursor:not-allowed;transform:none}
.tos-link{font:inherit;font-size:13px;font-weight:600;color:var(--tos-link);background:none;border:none;padding:0 2px;min-height:32px;display:inline-flex;align-items:center;cursor:pointer}   /* 32 px hit area, looks the same */
.tos-link--danger{color:var(--tos-red)}
.tos-icon-btn{   /* not used in pop-ups: pop-ups have no ×, Cancel/Close is in the footer */
  font:inherit;width:32px;height:32px;border:none;background:none;border-radius:6px;cursor:pointer;color:var(--tos-text-2);font-size:18px;line-height:1}
.tos-chev{width:36px;height:36px;border:1px solid var(--tos-border);background:#fff;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--tos-text-3)}
:where(.tos) :focus-visible{outline:2px solid var(--tos-accent);outline-offset:2px}
/* hover: only on devices with a mouse */
@media (hover:hover){
.tos-btn:not(:disabled):hover{background:#1a5fc4}
.tos-btn--secondary:not(:disabled):hover,.tos-btn--small:not(:disabled):hover,.tos-chev:hover{background:#f5f8fe;border-color:#c9d2df}
.tos-btn--danger:not(:disabled):hover{background:#991b1b}
.tos-link:hover{text-decoration:underline;text-underline-offset:3px}
.tos-seg>button:not([aria-checked="true"]):hover,.tos-seg>label:not(:has(input:checked)):hover{color:var(--tos-text)}
.tos-row:hover{background:#f7f9fc}}
/* saving: Save shows a spinner + "Saving…" while the request runs */
.tos-btn.is-saving{pointer-events:none}
.tos-btn.is-saving::before{content:"";width:12px;height:12px;border-radius:999px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:tos-spin 700ms linear infinite}

/* ---------- Pills and marks ---------- */
.tos-pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap;border:none}
.tos-pill--blue{background:#e3edfc;color:#1a4fa0}.tos-pill--green{background:#e5f4e9;color:#14532d}.tos-pill--red{background:#fde4e4;color:#7f1d1d}
.tos-pill--orange{background:#fff1e6;color:#9a3412}.tos-pill--gray{background:#eef2f8;color:#3f3f46}.tos-pill--ebay{background:#fff1e6;color:#9a3412}   /* same as orange */
.tos-pill--sm{font-size:12px;padding:3px 9px}
.tos-dot{width:7px;height:7px;border-radius:999px;flex:none}
.tos-mark{width:26px;height:26px;flex:none;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.tos-mark--done{background:#16a34a;color:#fff}.tos-mark--current{background:#1f6fe0;color:#fff}.tos-mark--skip{background:#e3e8f0;color:#52525b}.tos-mark--warn{background:#ea580c;color:#fff}.tos-mark--bad{background:#dc2626;color:#fff}

/* ---------- Cards ---------- */
.tos-card{background:#fff;border:1px solid var(--tos-border);border-radius:12px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 2px 6px rgba(15,23,42,.05);padding:24px 24px 32px;display:flex;flex-direction:column;gap:20px}
.tos-card-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tos-card-title{display:flex;flex-direction:column;gap:2px;flex:1;min-width:200px}
.tos-card-title h2{margin:0;font-size:19px;font-weight:700;color:var(--tos-text)}
.tos-card-meta{font-size:13px;color:var(--tos-text-2)}
.tos-card-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tos-card-body{padding-left:38px;display:flex;flex-direction:column;gap:28px}
.tos-sec{display:flex;flex-direction:column;gap:14px}
.tos-sec+.tos-sec{border-top:1px solid var(--tos-border);padding-top:28px}
.tos-sec-title{margin:0;font-size:16px;font-weight:700;color:var(--tos-accent)}
.tos-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px;align-items:start}
.tos-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;align-items:start}
.tos-span-all{grid-column:1/-1}
.tos dl,.tos dd{margin:0}
.tos-kv{display:flex;flex-direction:column;gap:4px;min-width:0}
.tos-kv-label{font-size:12px;color:var(--tos-text-2)}
.tos-kv-value{font-size:15px;font-weight:600;color:var(--tos-text);overflow-wrap:anywhere}
.tos-kv-value--empty{font-weight:400;color:var(--tos-text-3)}
.tos-row{display:grid;gap:16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--tos-divider);font-size:14px}

/* ---------- Fields ---------- */
.tos-field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--tos-label)}
.tos-field-label{display:flex;justify-content:space-between;align-items:center;gap:8px}   /* label left, N/A right, same line */
.tos-req{color:var(--tos-red)}
.tos-na{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--tos-text-2);cursor:pointer}
.tos-na input{width:14px;height:14px;margin:0;accent-color:var(--tos-accent)}
.tos-input,.tos-select,.tos-textarea{font:inherit;font-size:14px;font-weight:400;color:var(--tos-text);min-height:38px;border:1px solid var(--tos-input-border);border-radius:8px;padding:0 10px;background:#fff;width:100%}
.tos-input:disabled,.tos-select:disabled{background:#f4f6fa;color:var(--tos-text-3)}
.tos-textarea{min-height:76px;padding:8px 10px;resize:vertical;line-height:1.45}
.tos-help{font-size:12px;font-weight:600;color:var(--tos-red)}
.tos-money:focus-within{outline:2px solid var(--tos-accent);outline-offset:2px}
.tos-money{display:flex;align-items:center;border:1px solid var(--tos-input-border);border-radius:8px;min-height:38px;padding-left:10px;background:#fff}
.tos-money span{color:var(--tos-text-3)}
.tos-money input{font:inherit;font-size:14px;border:none;outline:none;background:transparent;text-align:right;width:100%;padding:0 10px;min-height:36px}
.tos-check{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:400;color:var(--tos-label);cursor:pointer}
.tos-check input{width:18px;height:18px;margin:0;accent-color:var(--tos-accent);flex:none}
.tos-with-addon{display:flex;gap:8px;align-items:center}      /* e.g. Mileage input + mi|km */
.tos-with-addon>.tos-input{flex:1}

/* ---------- Segmented control: 3 options or fewer (4+ = .tos-select) ---------- */
.tos-seg{display:inline-flex;flex-wrap:wrap;align-self:flex-start;background:var(--tos-track);border-radius:8px;padding:2px;gap:2px}
.tos-seg>button,.tos-seg>label{font:inherit;font-size:13px;font-weight:500;border:none;cursor:pointer;padding:6px 12px;border-radius:6px;min-height:32px;background:transparent;color:var(--tos-text-2);display:inline-flex;align-items:center}
.tos-seg>[aria-checked="true"],.tos-seg>label:has(input:checked){background:#fff;color:var(--tos-text);font-weight:600;box-shadow:0 1px 2px rgba(24,24,27,.1)}
.tos-seg>[aria-checked="true"].is-good,.tos-seg>label.is-good:has(input:checked){background:#16a34a;color:#fff;box-shadow:none}
.tos-seg>[aria-checked="true"].is-bad,.tos-seg>label.is-bad:has(input:checked){background:#b91c1c;color:#fff;box-shadow:none}
.tos-seg>label{position:relative}
.tos-seg input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tos-seg>label:has(input:focus-visible){outline:2px solid var(--tos-accent);outline-offset:2px}   /* if the app uses radio inputs, the circle is hidden */
.tos-chip{font:inherit;font-size:13px;font-weight:600;min-height:32px;padding:0 12px;border-radius:999px;cursor:pointer;border:1px solid var(--tos-input-border);background:#fff;color:var(--tos-text)}
.tos-chip[aria-pressed="true"]{border-color:var(--tos-accent);background:#e3edfc;color:#1a4fa0}

/* ---------- Pop-up ---------- */
.tos-backdrop{position:fixed;inset:0;z-index:50;background:rgba(15,23,42,.45);display:flex;align-items:flex-start;justify-content:center;padding:8vh 24px 24px}
.tos-modal{width:100%;max-width:760px;max-height:calc(92vh - 24px);display:flex;flex-direction:column;background:#fff;border-radius:14px;box-shadow:0 24px 64px rgba(15,23,42,.3);animation:tos-pop 160ms cubic-bezier(.23,1,.32,1)}
.tos-modal--narrow{max-width:620px}
.tos-modal-head{display:flex;justify-content:space-between;align-items:center;padding:24px 32px 18px;border-bottom:1px solid var(--tos-border)}
.tos-modal-head h2{margin:0;font-size:18px;font-weight:700}
.tos-modal-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:24px 32px 28px;display:flex;flex-direction:column;gap:28px}
.tos-modal-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 32px;border-top:1px solid var(--tos-border)}
.tos-modal-foot .tos-legend{font-size:12px;color:var(--tos-text-2)}
.tos-modal-foot .tos-actions{display:flex;gap:8px;margin-left:auto}
.tos-step{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--tos-text-2)}
@keyframes tos-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tos-modal{animation:none}}

/* ---------- Loading (inside a pop-up that opened right away) ---------- */
.tos-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:200px;font-size:13px;color:var(--tos-text-2)}
.tos-spinner{width:20px;height:20px;border-radius:999px;border:2px solid #dbe5f6;border-top-color:var(--tos-accent);animation:tos-spin 700ms linear infinite}
@keyframes tos-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tos-spinner{animation-duration:1.6s}}
.tos-btn.is-busy{pointer-events:none;opacity:.7}
.tos-modal-body .tos-sec+.tos-sec{border-top:none;padding-top:0}
/* ---------- Errors (Save stays clickable; on click, missing fields show here) ---------- */
.tos-input[aria-invalid="true"],.tos-select[aria-invalid="true"],.tos-textarea[aria-invalid="true"]{border-color:var(--tos-red)}
.tos-seg[aria-invalid="true"]{box-shadow:0 0 0 1px var(--tos-red)}
.tos-error{font-size:12px;font-weight:600;color:var(--tos-red)}
/* ---------- Retired (review 2): 4+ options use a dropdown, not a grid ---------- */
.tos-seg--grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-self:stretch}
.tos-seg--grid>button,.tos-seg--grid>label{justify-content:center}
/* ---------- Screen-reader-only text (e.g. "Expedited" next to a color bar) ---------- */
.tos-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ---------- Ticket header: one status pill, the rest is one gray line ---------- */
.tos-head-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.tos-head-meta{font-size:13px;color:var(--tos-text-2)}