/* ASA OS look: Concierge (ui-directions). Applied by html[data-theme="concierge"]; with no data-theme nothing here matches.
 * The service drive of a good dealership: a midnight-blue desk, cognac leather, limestone floors, a quiet lounge. The car
 * and the person come first: Today reads like an arrival board (who, what car, what's being done, when), the progress
 * track is the car's itinerary for the day, and there are no boxes where space can do the separating. Optima, the flared
 * sans of hotel signage and luxury marques, carries the headings; the system face carries the work.
 * The memorable thing is the arrival-board row. Cascade rules: see workshop.css. */

:root:root[data-theme="concierge"], .lk-mini[data-preview="concierge"] {
  --canvas: #edeeec; --surface: #ffffff; --surface-2: #f6f6f4;
  --ink: #15223b; --ink-2: #4d586b; --ink-3: #626a7c;
  --hair: rgba(21, 34, 59, 0.1); --hair-strong: rgba(21, 34, 59, 0.2);
  --fill: rgba(21, 34, 59, 0.06); --fill-hover: rgba(21, 34, 59, 0.1);
  --accent: #8a5a35; --accent-ink: #ffffff; --accent-soft: rgba(138, 90, 53, 0.11);
  --green: #24704a; --green-soft: rgba(36, 112, 74, 0.1); --amber: #985200; --amber-soft: rgba(200, 120, 20, 0.12);
  --red: #b3192b; --red-soft: rgba(179, 25, 43, 0.08);
  --side: #15223b; --r-s: 10px; --r-m: 16px; --r-l: 24px; --radius-ui: 16px;
  --shadow-pop: 0 24px 60px rgba(21, 34, 59, 0.18), 0 0 0 0.5px rgba(21, 34, 59, 0.12);
  /* the look's own tokens: the midnight desk the sidebar is built from */
  --desk: #15223b; --desk-ink: #eef0f4; --desk-ink-2: #a9b2c3; --desk-fill: rgba(255, 255, 255, 0.08); --desk-on: rgba(255, 255, 255, 0.13);
  --desk-mark: #d29b6c;
}
@media (prefers-color-scheme: dark) {
  /* evening service: deep navy, lamplit cognac */
  :root:root[data-theme="concierge"], .lk-mini[data-preview="concierge"] {
    --canvas: #0e1524; --surface: #172033; --surface-2: #1d2740;
    --ink: #eef0f4; --ink-2: #a9b2c3; --ink-3: #8c95a8;
    --hair: rgba(255, 255, 255, 0.09); --hair-strong: rgba(255, 255, 255, 0.18);
    --fill: rgba(255, 255, 255, 0.07); --fill-hover: rgba(255, 255, 255, 0.11);
    --accent: #d29b6c; --accent-ink: #15223b; --accent-soft: rgba(210, 155, 108, 0.16);
    --green: #4cc38a; --green-soft: rgba(76, 195, 138, 0.14); --amber: #f2a65a; --amber-soft: rgba(242, 166, 90, 0.14);
    --red: #ff7a82; --red-soft: rgba(255, 122, 130, 0.14);
    --side: #0a101c; --desk: #0a101c; --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  }
}
:root[data-theme="concierge"]:not([data-brand-font="custom"]) body, :root[data-theme="concierge"][data-look-brand="off"] body, .lk-mini[data-preview="concierge"] {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: Optima, "Optima nova", Candara, "Segoe UI", "Gill Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}
:root[data-theme="concierge"][data-look-brand="off"] body { --accent: #8a5a35; --accent-ink: #ffffff; --accent-soft: rgba(138, 90, 53, 0.11); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="concierge"][data-look-brand="off"] body { --accent: #d29b6c; --accent-ink: #15223b; --accent-soft: rgba(210, 155, 108, 0.16); }
}

:where(:root[data-theme="concierge"]) {
  /* ---------- base: more air, larger headings, no letter-squeezing on Optima ---------- */
  & :is(body, body.focus-app) { font-size: 15.5px; line-height: 1.55; letter-spacing: -0.004em; }
  & :is(h1, .focus-app h1) { font: 500 34px/1.12 var(--font-display); letter-spacing: 0; }
  & :is(h2, .focus-app h2) { font: 500 21px/1.25 var(--font-display); letter-spacing: 0; }
  & :is(body.shop-on .main, body.shop-on.focus-app .main) { padding: 48px 56px 96px; }
  & .pg-head { margin-bottom: 30px; }
  & :is(.pg-title, .focus-app .pg-title) { font: 400 46px/1.05 var(--font-display); letter-spacing: 0; }
  & .pg-kicker { font-size: 14px; margin-bottom: 6px; }
  & :is(a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible) {
    outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 6px var(--accent-soft); border-radius: var(--r-s); }
  & .job-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); outline: 0; }

  /* ---------- controls: soft pills, a little taller ---------- */
  & :is(button, .btn, a.btn, .focus-app button) { min-height: 38px; padding: 0 18px; font-size: 14.5px; }
  & :is(button.primary, a.btn.primary-link, .btn.primary, .focus-app button.primary) { font-weight: 600; }
  & :is(button.quiet, .btn.quiet) { min-height: 32px; padding: 0 10px; }
  & :is(input, select, textarea) { border-radius: var(--r-s); min-height: 40px; }
  & .seg { border-radius: 999px; padding: 3px; }
  & .shop-on .seg button { border-radius: 999px; min-height: 30px; }

  /* ---------- containers: tone, not lines ---------- */
  & :is(.card, .focus-app .card), & :is(.panel, .next, .est, .insp, .hist, .empty, .tinsights, .job-head, .ji-sec, .ji-sum-n, .ji-cust-n, .jobs) {
    border-radius: var(--r-l); box-shadow: none; }
  & .panel, & .next { padding: 22px 24px; }
  & .panel h2 { font: 500 18px/1.25 var(--font-display); }
  & .next-t { font: 500 21px/1.25 var(--font-display); letter-spacing: 0; }
  & :is(.next .btn, .next button) { min-height: 46px; font-size: 15px; }
  & .job-aside { gap: 16px; }
  & .notice { border-radius: var(--r-m); }

  /* ---------- Today: quiet counters, then the arrival board ---------- */
  & .today-strip { gap: 0; margin-bottom: 34px; border-top: 1px solid var(--hair-strong); }
  & .shop-on .today-stat { background: transparent; box-shadow: none; border-radius: 0; padding: 18px 22px 16px; border-left: 1px solid var(--hair); }
  & .shop-on .today-stat:first-child { border-left: 0; padding-left: 0; }
  & .shop-on .today-stat:hover { background: transparent; }
  & .shop-on .today-stat:hover .today-stat-l { color: var(--ink); }
  & .shop-on .today-stat[aria-pressed="true"] { box-shadow: inset 0 2px 0 var(--accent); }
  & .today-stat-n { font: 400 48px/1 var(--font-display); letter-spacing: 0; }
  & .today-stat[aria-pressed="true"] .today-stat-n { color: var(--accent); }
  & .today-stat.is-alert .today-stat-n { color: var(--red); }
  & .today-stat-l { font-size: 14px; margin-top: 6px; }
  & .today-search { min-height: 42px; }
  & .jobs { background: var(--surface); }
  & .job-row { min-height: 84px; border-bottom-color: var(--hair); }
  & .job-row:hover { background: var(--surface-2); }
  & .job-cust { font: 500 18px/1.25 var(--font-display); letter-spacing: 0; }
  & .job-no { font: 400 14px/1 var(--font-display); color: var(--ink-3); }
  & .job-amt { font-size: 15px; }

  /* stage pill: a soft tinted label, no dot */
  & .stage { padding: 5px 12px; font-size: 13px; font-weight: 500; gap: 0; }
  & .stage::before { display: none; }
  & .stage.s-inshop { color: var(--accent); }
  & .stage.s-attention { color: var(--amber); }
  & .stage.s-done { color: var(--green); }

  /* ---------- job workspace ---------- */
  & .job-back { font-size: 14.5px; margin-bottom: 18px; }
  & .job-head { padding: 30px 32px 0; margin-bottom: 24px; }
  & .job-who h1 { font: 400 42px/1.08 var(--font-display); letter-spacing: 0; }
  & .job-meta { font-size: 15px; margin-top: 10px; }
  & .job-facts { gap: 34px; margin-top: 24px; padding: 18px 0; }
  & .job-fact-v { font-size: 15.5px; }
  /* progress track -> the car's itinerary: a thin line with a stop per stage, the current one ringed */
  & .track { margin: 10px 0 4px; }
  & .track-step { font-size: 12.5px; padding-top: 24px; }
  & .track-step::before { top: 6px; height: 2px; right: 0; border-radius: 0; background: var(--hair-strong); }
  & .track-step::after { content: ""; position: absolute; left: 0; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface);
    box-shadow: inset 0 0 0 2px var(--hair-strong); }
  & .track-step.is-done::before { background: var(--accent); }
  & .track-step.is-done::after { background: var(--accent); box-shadow: none; }
  & .track-step.is-now { font-weight: 600; color: var(--ink); }
  & .track-step.is-now::before { background: linear-gradient(90deg, var(--accent) 0 8px, var(--hair-strong) 8px); }
  & .track-step.is-now::after { left: -3px; top: -1px; width: 16px; height: 16px; background: var(--surface); box-shadow: inset 0 0 0 4px var(--accent), 0 0 0 4px var(--accent-soft); }
  & .job-tabs { gap: 6px; margin-top: 6px; }
  & .job-tab { font-size: 14.5px; padding: 14px 12px 15px; }
  & .job-tab[aria-current="page"] { border-bottom-color: var(--accent); }
  & .job-body { gap: 24px; }

  /* estimate + inspection */
  & .est-top h2 { font: 500 22px/1.2 var(--font-display); }
  & .svc-name { font: 500 17px/1.3 var(--font-display); letter-spacing: 0; }
  & .est-sum .total { font: 400 30px/1.1 var(--font-display); letter-spacing: 0; }
  & .ji { gap: 18px; }
  & .ji-head h2 { font: 500 26px/1.2 var(--font-display); }
  & .ji-sec { padding: 22px 24px 18px; }
  & .ji-sec-h h3 { font: 500 19px/1.25 var(--font-display); }
  & .ji-sum { gap: 14px; }
  & .ji-sum-n { padding: 16px 18px; }
  & :is(.ji-sum-n strong, .ji-cust-n strong) { font: 400 36px/1 var(--font-display); }
  & .ji-pos { border-radius: var(--r-m); box-shadow: none; }
  & .ji .ji-num { font: 400 30px/1 var(--font-display); }
  & .ji .ji-segb { border-radius: 999px; }
  & .hist li { padding: 14px 24px; }

  /* ---------- phone ---------- */
  & .shop-tabbar { background: color-mix(in srgb, var(--surface) 86%, transparent); }
  & .shop-tab[aria-current="page"] { color: var(--accent); font-weight: 600; }

  /* ---------- customer approval page (/c/<token>): the hospitality moment ---------- */
  & .c-main { font-family: var(--font); max-width: 600px; padding-top: 28px; }
  & .c-shop-name { font: 500 18px/1.2 var(--font-display); letter-spacing: 0; }
  & .c-hero { padding: 10px 2px 26px; }
  & .c-hero h1 { font: 400 38px/1.1 var(--font-display); letter-spacing: 0; }
  & .c-card { border-radius: var(--r-l); padding: 24px 22px; box-shadow: none; margin-bottom: 18px; }
  & .c-card h2 { font: 500 22px/1.25 var(--font-display); letter-spacing: 0; }
  & .c-item-name { font-weight: 600; }
  & :is(.c-choice, .c-btn, .c-zoom-x) { border-radius: 999px; min-height: 46px; }
  & .c-btn-primary { min-height: 54px; }
  & .c-total-v { font: 400 34px/1 var(--font-display); letter-spacing: 0; }
  & .c-sign input { border-radius: var(--r-m); }
}

/* the arrival board: on wide screens each job is two lines — who and what car; what's being done and who's on it */
@media (min-width: 1241px) {
  :where(:root[data-theme="concierge"]) {
    & .jobs-head { display: none; }
    & .job-row { grid-template-columns: 64px minmax(0, 1.25fr) minmax(0, 1.35fr) 120px 160px 100px; grid-template-areas: "no cust svc stage when amt" "no veh asg stage when amt";
      gap: 2px 18px; padding: 16px 26px; }
    & .job-row > .job-no { grid-area: no; align-self: start; padding-top: 4px; }
    & .job-row > .job-cust { grid-area: cust; } & .job-row > .job-veh { grid-area: veh; color: var(--ink-2); font-size: 14.5px; }
    & .job-row > .job-svc { grid-area: svc; color: var(--ink); } & .job-row > .job-asg { grid-area: asg; }
    & .job-row > .stage-cell { grid-area: stage; } & .job-row > .job-when { grid-area: when; } & .job-row > .job-amt { grid-area: amt; }
  }
}
@media (min-width: 641px) {
  :where(:root[data-theme="concierge"]) {
    & .est-top { padding: 20px 24px; }
    & .svc-head { padding: 20px 24px 8px; }
    & .lines td:first-child { padding-left: 24px; }
    & .est-sum { padding: 18px 24px 22px; }
  }
}
@media (min-width: 1101px) { :where(:root[data-theme="concierge"]) .job-body { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 860px) {
  :where(:root[data-theme="concierge"]) :is(body.shop-on .main, body.shop-on.focus-app .main) { padding: 24px 18px calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  :where(:root[data-theme="concierge"]) {
    & :is(body.shop-on .main, body.shop-on.focus-app .main) { padding: 22px 16px calc(96px + env(safe-area-inset-bottom)); }
    & :is(.pg-title, .focus-app .pg-title) { font-size: 38px; }
    & .job-head { padding: 22px 18px 0; }
    & .job-who h1 { font-size: 32px; }
    & .job-facts { gap: 14px; }
    & .track-step { font-size: 0; }
    & .track-step.is-now { font-size: 12.5px; }
    & .track-step.is-now::after { left: 0; }
    & .today-stat-n { font-size: 40px; }
    & .shop-on .today-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  }
}

/* sidebar: the midnight desk — unless the company brand's dark sidebar is shown */
:root[data-theme="concierge"]:is(:not([data-brand-side="dark"]), [data-look-brand="off"]) {
  & .shop-side { --ink: var(--desk-ink); --ink-2: var(--desk-ink-2); --ink-3: var(--desk-ink-2); --fill: var(--desk-fill); --hair: rgba(255, 255, 255, 0.1);
    background: var(--desk); color: var(--desk-ink); border-right: 0; padding: 26px 14px 16px; -webkit-backdrop-filter: none; backdrop-filter: none; }
  & .shop-side .shop-brand { padding-bottom: 26px; }
  & .shop-side .shop-brand-mark:not(.has-logo) { border-radius: 50%; background: var(--desk-mark); color: #15223b; }
  & .shop-side .shop-brand-name { font: 500 17px/1.2 var(--font-display); letter-spacing: 0; color: var(--desk-ink); }
  & .shop-side .shop-nav-label { color: var(--desk-ink-2); font-size: 12px; font-weight: 500; }
  & .shop-side .shop-nav-item { border-radius: var(--r-s); padding: 9px 12px; font-size: 14.5px; color: var(--desk-ink); }
  & .shop-side .shop-nav-item:hover { background: var(--desk-fill); }
  & .shop-side .shop-nav-item[aria-current="page"] { background: var(--desk-on); color: #ffffff; font-weight: 600; box-shadow: inset 3px 0 0 var(--desk-mark); }
  & .shop-side .shop-nav-item .shop-count { color: var(--desk-ink-2); }
  & .shop-side .shop-avatar { background: var(--desk-fill); color: var(--desk-ink-2); }
  & .shop-side .shop-side-foot { border-top-color: rgba(255, 255, 255, 0.12); }
  & .shop-side .shop-side-foot button { color: var(--desk-ink); text-decoration: underline; text-underline-offset: 2px; }
  & .shop-side :is(.shop-brand-store, .shop-me-role) { color: var(--desk-ink-2); }
  & .shop-side .shop-me-name { color: var(--desk-ink); }
}

/* ---------- Look screen sample ---------- */
.lk-mini[data-preview="concierge"] {
  & .lk-side { background: var(--desk); border-right: 0; }
  & .lk-side .lk-mark { border-radius: 50%; background: var(--desk-mark); }
  & .lk-nav { color: var(--desk-ink); }
  & .lk-nav.is-current { background: var(--desk-on); color: #ffffff; box-shadow: inset 2px 0 0 var(--desk-mark); }
  & .lk-title { font: 400 24px/1.05 var(--font-display); }
  & .lk-tiles { gap: 0; }
  & .lk-tile { background: transparent; box-shadow: none; border-left: 1px solid var(--hair); border-radius: 0; }
  & .lk-tile:first-child { border-left: 0; padding-left: 0; }
  & .lk-tile.is-on { box-shadow: inset 0 2px 0 var(--accent); }
  & .lk-tile.is-on b { color: var(--accent); }
  & .lk-tile b { font: 400 24px/1 var(--font-display); }
  & .lk-row { border-radius: 14px; box-shadow: none; padding: 10px 12px; }
  & .lk-cust { font: 500 13px/1.2 var(--font-display); }
  & .lk-pill { color: var(--accent); }
  & .lk-track { gap: 0; position: relative; height: 10px; align-items: center; }
  & .lk-track span { height: 2px; border-radius: 0; position: relative; }
  & .lk-track .is-done { background: var(--accent); }
  & .lk-track .is-now { background: var(--hair-strong); }
  & .lk-track .is-now::after { content: ""; position: absolute; left: -2px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface);
    box-shadow: inset 0 0 0 3px var(--accent); }
}