/* The refined look (Henry, Oct 31 2026: "looks very fake… something more sophisticated"). Loaded on top of the
   regular styles only when it's switched on (app.py: ui_refined): calm neutral surfaces, hairline borders, quieter type,
   one solid accent, no gradients, shine or bouncing. Everything is scoped under html.ui-refined. */

/* ------------------------------------------------------------------ customer side: Instant Quote, My Garage, plans */
html.ui-refined {
  --ink: #101828; --char: #344054; --gray: #667085; --line: #e4e7ec; --light: #f8f9fb; --white: #fff;
  --orange: #e5621f; --cta-a: #e5621f; --cta-b: #e5621f; --blue-dark: #175c86; --blue-soft: #eef4f9; --ok: #157347;
  --radius: 12px; --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --accent: #e5621f; --accent-hover: #c95217;
}
html.ui-refined body { font-feature-settings: "tnum" 1, "cv11" 1; }
html.ui-refined body:not(.admin-body) { color: var(--ink); }          /* customer pages only: Jack keeps its own text colors */
html.ui-refined body.my { --ink: #101828; --char: #344054; --gray: #667085; --light: #f8f9fb; --line: #e4e7ec; --radius: 12px; background: var(--light); }
html.ui-refined h1, html.ui-refined h2, html.ui-refined h3 { letter-spacing: -.015em; font-weight: 650; }
html.ui-refined input:not([type=checkbox]):not([type=radio]) { color: inherit; }

/* buttons: sentence case, one solid accent, a quiet secondary */
html.ui-refined .btn { border-radius: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: var(--shadow);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
html.ui-refined .btn-lg { font-size: 1rem; padding-top: .8rem; padding-bottom: .8rem; }
html.ui-refined .btn-primary, html.ui-refined body.my .btn-primary { background: var(--accent); color: #fff; text-transform: none;
  letter-spacing: 0; font-weight: 600; box-shadow: var(--shadow); filter: none; }
html.ui-refined .btn-primary:hover, html.ui-refined body.my .btn-primary:hover { background: var(--accent-hover); filter: none; }
html.ui-refined .btn-outline-dark, html.ui-refined .btn.ghost, html.ui-refined .btn-dark:not(.btn-primary) { background: #fff; color: var(--char);
  border: 1px solid #d0d5dd; box-shadow: var(--shadow); }
html.ui-refined .btn-outline-dark:hover, html.ui-refined .btn.ghost:hover { background: #f9fafb; }
html.ui-refined .btn-blue { background: var(--blue-dark); box-shadow: var(--shadow); }
/* no shine, nudge or lift on buttons */
html.ui-refined .mo .mo-cta::after { display: none; }
html.ui-refined .mo .mo-nudge { animation: none; }
@media (hover: hover) { html.ui-refined .mo .btn-primary:not(:disabled):hover, html.ui-refined .mo .my-sq:hover { transform: none; box-shadow: var(--shadow); } }

/* cards and tiles: hairline borders, no colored stripes, soft shadow */
html.ui-refined .my-card, html.ui-refined .p-card, html.ui-refined .my-tile, html.ui-refined .my-car-card, html.ui-refined .trk-box,
html.ui-refined .my-plan-on, html.ui-refined .my-gift, html.ui-refined .card {
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
html.ui-refined .p-card, html.ui-refined .p-card.top, html.ui-refined .trip { border-top: 1px solid var(--line); }
html.ui-refined .p-card.best { border-color: #b7dcc5; box-shadow: 0 0 0 1px #b7dcc5, 0 8px 24px rgba(16, 24, 40, .08); }
html.ui-refined .my-tile { border-top: 1px solid var(--line); padding: 1rem; }
html.ui-refined .my-tile::before, html.ui-refined .my-tile::after { display: none; }
html.ui-refined .my-tile span { font-size: .78rem; font-weight: 500; color: var(--gray); letter-spacing: 0; }
html.ui-refined .my-tile b { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; }
html.ui-refined .my-tile.warn, html.ui-refined .my-tile.due, html.ui-refined .my-tile.good { background: #fff; }
html.ui-refined .my-tile.warn b { color: #b54708; } html.ui-refined .my-tile.due b { color: #b42318; } html.ui-refined .my-tile.good b { color: var(--ok); }

/* labels above titles: small, quiet */
html.ui-refined .p-name, html.ui-refined .trk-eye, html.ui-refined .eyebrow, html.ui-refined .step-count {
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: var(--gray); }
html.ui-refined .p-price { font-weight: 650; letter-spacing: -.02em; }
html.ui-refined .p-value b, html.ui-refined .p-up { color: var(--ok); }
html.ui-refined .p-credit-tag { background: #f2f4f7; color: var(--char); border: 1px solid var(--line); font-weight: 600; }
html.ui-refined .p-lines li > span:first-child { color: var(--ok); }

/* chips and status pills */
html.ui-refined .my-chip, html.ui-refined .my-car-plan { border-radius: 6px; font-weight: 600; font-size: .75rem; box-shadow: none; }
html.ui-refined .mo .my-chip.due, html.ui-refined .mo .my-count { animation: none; }

/* form fields */
html.ui-refined input:not([type=checkbox]):not([type=radio]), html.ui-refined select, html.ui-refined textarea {
  border: 1px solid #d0d5dd; border-radius: 8px; box-shadow: var(--shadow); }
html.ui-refined input:focus, html.ui-refined select:focus, html.ui-refined textarea:focus {
  outline: none; border-color: #f4a77c; box-shadow: 0 0 0 4px rgba(229, 98, 31, .14); }

/* ------------------------------------------------------------------ Jack (staff) */
html.ui-refined .admin-body {
  --a-bg: #0b0f17; --a-card: #111722; --a-card-2: #161d2a; --a-line: rgba(255, 255, 255, .08);
  --a-text: #eef1f6; --a-soft: #c7cdd8; --a-muted: #8b94a6; --a-btn: #1b2332; --a-shadow: none;
}
html.ui-refined.admin-light .admin-body {
  --a-bg: #f8f9fb; --a-card: #ffffff; --a-card-2: #f9fafb; --a-line: #e4e7ec;
  --a-text: #101828; --a-soft: #344054; --a-muted: #667085; --a-btn: #101828; --a-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
html.ui-refined .sp-panel { border-radius: 12px; background-image: none !important; }
html.ui-refined .sp-eyebrow, html.ui-refined .sp-panel h2 small, html.ui-refined .sp-table th {
  letter-spacing: .05em; font-weight: 600; }
html.ui-refined .sp-panel h2 { font-weight: 650; letter-spacing: -.01em; }
html.ui-refined .admin-body .btn { border-radius: 8px; text-transform: none; letter-spacing: 0; font-weight: 600; box-shadow: none; }
html.ui-refined .admin-body .btn-primary { background: var(--accent); color: #fff; }
html.ui-refined .admin-body .btn-primary:hover { background: var(--accent-hover); }
html.ui-refined .sp-badge { border-radius: 6px; font-weight: 600; letter-spacing: 0; }
html.ui-refined .sp-table td, html.ui-refined .sp-table th { border-color: var(--a-line); }
html.ui-refined .sp-kpi b, html.ui-refined .sp-stat b { letter-spacing: -.02em; font-weight: 650; }

/* ------------------------------------------------------------------ the firmer pass: no stripes, no dashed boxes, status as small dots */
/* status labels: a quiet pill with a colored dot instead of a solid colored block */
html.ui-refined .my-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--char); border: 1px solid var(--line);
  border-radius: 999px; font-weight: 600; padding: .2rem .6rem .2rem .5rem; }
html.ui-refined .my-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #98a2b3; flex: none; }
html.ui-refined .my-chip.ok::before { background: #12b76a; } html.ui-refined .my-chip.soon::before { background: #f79009; }
html.ui-refined .my-chip.due::before { background: #f04438; } html.ui-refined .my-chip.shop::before { background: var(--accent); }
html.ui-refined .my-chip.shop, html.ui-refined .my-chip.due, html.ui-refined .my-chip.soon, html.ui-refined .my-chip.ok { background: #fff; color: var(--char); }

/* lists with a thick colored left stripe -> a clean list with a dot */
html.ui-refined .my-remind li, html.ui-refined .my-roadmap li, html.ui-refined .my-stk, html.ui-refined .my-install { border-left: 0; padding-left: 1.1rem; position: relative; }
html.ui-refined .my-remind li::before, html.ui-refined .my-roadmap li::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px;
  margin-top: -3.5px; border-radius: 50%; background: #f79009; }
html.ui-refined .my-remind li.expired::before, html.ui-refined .my-remind li.due::before, html.ui-refined .my-roadmap li.due::before,
html.ui-refined .my-roadmap li.expired::before { background: #f04438; }
html.ui-refined .my-roadmap li.ok::before { background: #12b76a; } html.ui-refined .my-roadmap li.none::before, html.ui-refined .my-roadmap li.unknown::before { background: #d0d5dd; }

/* reward codes: a clean ticket, not a dashed orange box */
html.ui-refined .my-reward { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
html.ui-refined .my-rw-total { background: #ecfdf3; color: #067647; border: 1px solid #abefc6; font-weight: 600; }
html.ui-refined .my-rec li, html.ui-refined .my-refs li { border-bottom-style: solid; border-bottom-color: var(--line); }

/* section titles a touch quieter */
html.ui-refined body.my main h2 { font-size: 1.15rem; }
html.ui-refined .my-car-name { font-weight: 650; letter-spacing: -.01em; }

/* the upcoming-visit date block: neutral, not a black and orange tag */
html.ui-refined .my-cal, html.ui-refined .my-date { background: #fff !important; color: var(--ink) !important; border: 1px solid var(--line); }
html.ui-refined body.my .my-date { background: #fff !important; color: var(--ink) !important; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
html.ui-refined body.my .my-date span { color: var(--accent); }
html.ui-refined body.my .my-date em { background: #f2f4f7; color: var(--char); border-radius: 6px; margin: .3rem .3rem 0; }
html.ui-refined body.my .my-tile, html.ui-refined body.my .my-tile.warn, html.ui-refined body.my .my-tile.due, html.ui-refined body.my .my-tile.good {
  border: 1px solid var(--line); border-top: 1px solid var(--line); background: #fff; }
html.ui-refined body.my .my-tile b { font-weight: 600; }
@media (hover: hover) { html.ui-refined .mo .my-car-card:hover, html.ui-refined .mo a.my-tile:hover { transform: none; border-color: #d0d5dd; } }
html.ui-refined body.my .my-car-card, html.ui-refined body.my .my-card { border-color: var(--line); }