/* ===========================================================================
   Torqfolio — mechanic workspace
   1. Retunes #mechanicApp's existing tokens to the public site's identity.
   2. Adds the status board (.wb-*).
   Loaded after admin-theme.css so the token overrides win.
   =========================================================================== */

#mechanicApp{
  --bg:#16302A;        /* machine-tool enamel */
  --panel:#1E3E35;
  --panel2:#264A40;
  --line:#2F5449;
  --text:#EFE7D2;
  --muted:#A5B6AC;
  --accent:#E7D9B6;    /* manila — the work-order paper */
  --danger:#D4553F;    /* carbon red, lifted for legibility on enamel */
  --warn:#D19A2E;
  --ok:#7FBF63;
  --shadow:0 24px 60px rgba(0,0,0,.42);

  --sig:"Saira Condensed","Arial Narrow",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"IBM Plex Sans",system-ui,sans-serif;

  background:var(--bg);
  font-family:var(--sans);
}
#mechanicApp h1,#mechanicApp h2,#mechanicApp h3{font-family:var(--sig);text-transform:uppercase;letter-spacing:.01em}
#mechanicApp .eyebrow{font-family:var(--mono);letter-spacing:.18em;color:var(--accent)}
#mechanicApp .brand-name{font-family:var(--sig);text-transform:uppercase;letter-spacing:.05em}
#mechanicApp .brand-sub,#mechanicApp .brand-mark{font-family:var(--mono)}
#mechanicApp .btn{border-radius:2px;font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase}
#mechanicApp .btn.primary{background:var(--accent);color:#16211D;border-color:var(--accent)}
#mechanicApp :focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* --- board ---------------------------------------------------------------- */
#mechanicApp .wb{width:min(1420px,92vw);margin:auto;padding:28px 0 70px}
#mechanicApp .wb-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:18px;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line)}
#mechanicApp .wb-head h2{margin:8px 0 0;font-size:clamp(30px,4vw,52px);line-height:.94;color:var(--text)}
#mechanicApp .wb-stats{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
#mechanicApp .wb-stats b{color:var(--accent);font-weight:600}
#mechanicApp .wb-stats span{padding:7px 11px;border:1px solid var(--line);border-radius:2px}
#mechanicApp .wb-stats .wb-alert{border-color:var(--danger);color:var(--danger)}

#mechanicApp .wb-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
#mechanicApp .wb-col{display:flex;flex-direction:column;gap:11px;min-width:0}
#mechanicApp .wb-col-head{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding-bottom:9px;border-top:2px solid var(--accent);padding-top:11px}
#mechanicApp .wb-col-head strong{font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--text)}
#mechanicApp .wb-col-head span{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
#mechanicApp .wb-col[data-stage="waiting"] .wb-col-head{border-top-color:var(--warn)}
#mechanicApp .wb-col[data-stage="repair"] .wb-col-head{border-top-color:var(--ok)}
#mechanicApp .wb-col[data-stage="verification"] .wb-col-head{border-top-color:#7FA8D6}

/* --- card ----------------------------------------------------------------- */
#mechanicApp .wb-card{display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--line);border-radius:3px;overflow:hidden;
  transition:border-color .16s ease,transform .16s ease}
#mechanicApp .wb-card:hover{border-color:rgba(231,217,182,.45);transform:translateY(-2px)}
#mechanicApp .wb-card.is-unassigned{border-left:3px solid var(--danger)}

#mechanicApp .wb-open{display:grid;gap:7px;width:100%;padding:15px 15px 13px;text-align:left;
  border:0;background:transparent;color:inherit;cursor:pointer;font:inherit}
#mechanicApp .wb-veh{font-family:var(--sig);font-size:19px;font-weight:700;text-transform:uppercase;
  color:var(--text);line-height:1.05}
#mechanicApp .wb-sub{font-size:12.5px;line-height:1.45;color:var(--muted)}
#mechanicApp .wb-code{justify-self:start;padding:3px 7px;border:1px solid var(--line);border-radius:2px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--accent)}
#mechanicApp .wb-bar{height:5px;border-radius:99px;background:#12241F;overflow:hidden;margin-top:3px}
#mechanicApp .wb-bar i{display:block;height:100%;background:var(--accent)}
#mechanicApp .wb-pct{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}

#mechanicApp .wb-controls{display:grid;gap:9px;padding:12px 15px 14px;border-top:1px solid var(--line);
  background:rgba(0,0,0,.14)}
#mechanicApp .wb-field{display:grid;gap:5px}
#mechanicApp .wb-field>span{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
#mechanicApp .wb-field select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:2px;
  background:var(--panel2);color:var(--text);font-family:var(--mono);font-size:11.5px;cursor:pointer}
#mechanicApp .wb-field select:disabled{opacity:.55;cursor:not-allowed}

#mechanicApp .wb-share{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;padding:9px 10px;border-radius:2px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
#mechanicApp .wb-share:hover:not(:disabled){border-color:var(--accent);color:var(--text)}
#mechanicApp .wb-share i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
#mechanicApp .wb-share[aria-pressed="true"]{border-color:var(--ok);color:var(--ok)}
#mechanicApp .wb-share:disabled{opacity:.5;cursor:not-allowed}

#mechanicApp .wb-empty{padding:20px 14px;border:1px dashed var(--line);border-radius:3px;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* --- responsive ----------------------------------------------------------- */
@media(max-width:1080px){
  #mechanicApp .wb-cols{grid-auto-flow:column;grid-auto-columns:minmax(255px,78vw);
    grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:14px;scrollbar-width:thin}
  #mechanicApp .wb-col{scroll-snap-align:start}
}
@media(max-width:600px){
  #mechanicApp .wb{padding-top:18px}
  #mechanicApp .wb-cols{grid-auto-columns:minmax(240px,86vw)}
}
@media(prefers-reduced-motion:reduce){
  #mechanicApp .wb-card{transition:none}
}

/* ===========================================================================
   Garage + vehicle record
   =========================================================================== */
#mechanicApp .tf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#mechanicApp .tf-status{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;
  padding:12px 20px;border-radius:2px;border:1px solid var(--line);background:var(--panel2);
  color:var(--text);font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;box-shadow:var(--shadow);max-width:90vw}
#mechanicApp .tf-status[data-tone="good"]{border-color:var(--ok);color:var(--ok)}
#mechanicApp .tf-status[data-tone="bad"]{border-color:var(--danger);color:var(--danger)}

#mechanicApp .tfg,#mechanicApp .tfv{width:min(1420px,92vw);margin:auto;padding:28px 0 70px}
#mechanicApp .tfg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:16px}
#mechanicApp .tfg-card{display:flex;flex-direction:column;padding:0;overflow:hidden;cursor:pointer;
  border:1px solid var(--line);border-radius:3px;background:var(--panel);color:inherit;text-align:left;
  font:inherit;transition:border-color .16s ease,transform .16s ease}
#mechanicApp .tfg-card:hover{border-color:rgba(231,217,182,.45);transform:translateY(-3px)}
#mechanicApp .tfg-photo{position:relative;display:block;background:#12241F}
#mechanicApp .tfg-photo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
#mechanicApp .tfg-flag{position:absolute;left:10px;bottom:10px;padding:5px 9px;border-radius:2px;
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
#mechanicApp .tfg-flag.is-overdue{background:var(--danger);color:#1B0F0C}
#mechanicApp .tfg-flag.is-soon{background:var(--warn);color:#1B1408}
#mechanicApp .tfg-flag.is-ok{background:var(--ok);color:#0E1A0C}
#mechanicApp .tfg-flag.is-unknown{background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
#mechanicApp .tfg-body{display:grid;gap:4px;padding:14px 15px 16px}
#mechanicApp .tfg-nick{font-family:var(--sig);font-size:20px;font-weight:700;text-transform:uppercase;color:var(--accent)}
#mechanicApp .tfg-name{font-family:var(--sig);font-size:17px;font-weight:700;text-transform:uppercase;color:var(--text)}
#mechanicApp .tfg-owner{font-size:12.5px;color:var(--muted)}
#mechanicApp .tfg-odo{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted)}

/* vehicle record */
#mechanicApp .tfv-hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:26px;
  align-items:start;padding:22px 0 30px;border-bottom:1px solid var(--line);margin-bottom:26px}
#mechanicApp .tfv-photo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:3px;border:1px solid var(--line)}
#mechanicApp .tfv-id h2{margin:8px 0 0;font-size:clamp(28px,3.6vw,46px);line-height:.96;color:var(--text)}
#mechanicApp .tfv-sub{margin-top:6px;color:var(--muted);font-size:14px}
#mechanicApp .tfv-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0 0}
#mechanicApp .tfv-facts div{padding:10px 12px;border:1px solid var(--line);border-radius:2px;background:var(--panel)}
#mechanicApp .tfv-facts dt{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
#mechanicApp .tfv-facts dd{margin:5px 0 0;font-size:14px;color:var(--text)}
#mechanicApp .tfv-facts .tfv-vin{font-family:var(--mono);font-size:11.5px;word-break:break-all}
#mechanicApp .tfv-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
#mechanicApp .tfv-inline{display:flex;align-items:flex-end;gap:9px}
#mechanicApp .tfv-inline label,#mechanicApp .tfv-log label{display:grid;gap:5px;
  font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
#mechanicApp .tfv-inline input,#mechanicApp .tfv-log input,#mechanicApp .tfv-oil select{
  padding:9px 10px;border:1px solid var(--line);border-radius:2px;background:var(--panel2);
  color:var(--text);font-family:var(--mono);font-size:12px}
#mechanicApp .tfv-check{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;
  border:1px solid var(--line);border-radius:2px;background:var(--panel);cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#mechanicApp .tfv-check:has(input:checked){border-color:var(--accent);color:var(--text)}
#mechanicApp .tfv-check input{width:auto;margin:0;accent-color:var(--accent)}
#mechanicApp .tfv-oil{gap:10px}

#mechanicApp .tfv-block{padding:26px 0;border-top:1px solid var(--line)}
#mechanicApp .tfv-block h3{font-size:26px;color:var(--text)}
#mechanicApp .tfv-note{margin:8px 0 16px;max-width:70ch;font-size:13.5px;color:var(--muted)}
#mechanicApp .tfv-conds{display:flex;flex-wrap:wrap;gap:10px}

#mechanicApp .tfv-items{display:grid;gap:9px}
#mechanicApp .tfv-item{border:1px solid var(--line);border-radius:3px;background:var(--panel);overflow:hidden}
#mechanicApp .tfv-item.is-overdue{border-left:3px solid var(--danger)}
#mechanicApp .tfv-item.is-due_soon{border-left:3px solid var(--warn)}
#mechanicApp .tfv-item.is-ok{border-left:3px solid var(--ok)}
#mechanicApp .tfv-item.is-no_history{border-left:3px solid var(--line)}
#mechanicApp .tfv-item-head{display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,1.2fr) minmax(0,1fr);
  gap:14px;align-items:center;width:100%;padding:14px 16px;border:0;background:transparent;
  color:inherit;text-align:left;font:inherit;cursor:pointer}
#mechanicApp .tfv-item-head:hover{background:rgba(231,217,182,.05)}
#mechanicApp .tfv-item-name{font-family:var(--sig);font-size:18px;font-weight:700;text-transform:uppercase;color:var(--text)}
#mechanicApp .tfv-state{font-family:var(--mono);font-style:normal;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border-radius:2px;border:1px solid currentColor;white-space:nowrap}
#mechanicApp .tfv-state.is-overdue{color:var(--danger)}
#mechanicApp .tfv-state.is-soon{color:var(--warn)}
#mechanicApp .tfv-state.is-ok{color:var(--ok)}
#mechanicApp .tfv-state.is-unknown{color:var(--muted)}
#mechanicApp .tfv-item-due{font-size:13px;color:var(--text)}
#mechanicApp .tfv-item-int{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);text-align:right}
#mechanicApp .tfv-item-body{padding:4px 16px 18px;border-top:1px solid var(--line);background:rgba(0,0,0,.14)}
#mechanicApp .tfv-item-body p{margin:12px 0 0;max-width:78ch;font-size:13.5px;line-height:1.6;color:#C3D2C8}
#mechanicApp .tfv-item-body strong{color:var(--accent);font-weight:600}
#mechanicApp .tfv-log{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:16px;
  padding-top:14px;border-top:1px dashed var(--line)}
#mechanicApp .tfv-log-note{flex:1 1 240px}
#mechanicApp .tfv-log-note input{width:100%}

#mechanicApp .tfv-history{display:grid;gap:0;margin:0;padding:0;list-style:none}
#mechanicApp .tfv-history li{display:grid;grid-template-columns:130px minmax(0,1fr) 110px minmax(0,1.3fr);
  gap:14px;padding:12px 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
#mechanicApp .tfv-h-date,#mechanicApp .tfv-h-odo{font-family:var(--mono);font-size:11px;letter-spacing:.08em}
#mechanicApp .tfv-h-name{color:var(--text);font-weight:500}

@media(max-width:900px){
  #mechanicApp .tfv-hero{grid-template-columns:1fr}
  #mechanicApp .tfv-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  #mechanicApp .tfv-item-head{grid-template-columns:1fr auto;gap:8px}
  #mechanicApp .tfv-item-due,#mechanicApp .tfv-item-int{grid-column:1/-1;text-align:left}
  #mechanicApp .tfv-history li{grid-template-columns:1fr;gap:4px}
}
@media(max-width:600px){
  #mechanicApp .tfv-facts{grid-template-columns:1fr}
  #mechanicApp .tfv-inline{flex-wrap:wrap}
  #mechanicApp .tfg-grid{grid-template-columns:1fr}
}/* --- add a vehicle -------------------------------------------------------- */
#addVehicleModal.diagnostic{padding:4vh 4vw;background:rgba(10,24,20,.8);backdrop-filter:blur(9px);
  display:grid;place-items:start center;overflow:auto}#addVehicleModal .tfa-sheet, #mgAddModal .tfa-sheet{
  --line:#2F5449;--text:#EFE7D2;--muted:#A5B6AC;--accent:#E7D9B6;--panel:#1E3E35;--panel2:#264A40;
  --sig:"Saira Condensed","Arial Narrow",sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  width:100%;max-width:860px;background:#16302A;border:1px solid var(--line);border-radius:3px;
  padding:26px;box-shadow:0 36px 90px rgba(0,0,0,.55);font-family:var(--sans);color:var(--text)}#addVehicleModal :focus-visible, #mgAddModal :focus-visible{outline:2px solid var(--accent);outline-offset:3px}#addVehicleModal .tfa-head, #mgAddModal .tfa-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--line)}#addVehicleModal .tfa-eyebrow, #mgAddModal .tfa-eyebrow{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}#addVehicleModal .tfa-head h2, #mgAddModal .tfa-head h2{margin:8px 0 0;font-family:var(--sig);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,3vw,38px);line-height:.96;color:var(--text)}#addVehicleModal .tfa-x, #mgAddModal .tfa-x{flex:none;width:34px;height:34px;border-radius:2px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--text);font-size:19px;line-height:1}#addVehicleModal .tfa-x:hover, #mgAddModal .tfa-x:hover{background:rgba(231,217,182,.1)}#addVehicleModal .tfa-grid, #mgAddModal .tfa-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}#addVehicleModal .tfa-wide, #mgAddModal .tfa-wide{grid-column:1/-1}#addVehicleModal label, #mgAddModal label{display:grid;gap:6px;font-family:var(--mono);font-size:9px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}#addVehicleModal input, #mgAddModal input, #addVehicleModal select, #mgAddModal select{width:100%;padding:10px 11px;border-radius:2px;
  border:1px solid var(--line);background:var(--panel);color:var(--text);
  font-family:var(--sans);font-size:14px}#addVehicleModal input[name="vin"], #mgAddModal input[name="vin"]{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}#addVehicleModal input[data-state="ok"], #mgAddModal input[data-state="ok"]{border-color:var(--accent)}#addVehicleModal input[data-state="failed"], #mgAddModal input[data-state="failed"]{border-color:#D4553F}#addVehicleModal input:focus, #mgAddModal input:focus, #addVehicleModal select:focus, #mgAddModal select:focus{border-color:var(--accent);outline:none}#addVehicleModal .tfa-owner, #mgAddModal .tfa-owner{margin-top:13px;padding-top:16px;border-top:1px dashed var(--line);
  grid-template-columns:repeat(3,minmax(0,1fr))}#addVehicleModal .tfa-foot, #mgAddModal .tfa-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line)}
#mechanicApp .tfg-head-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* start a job from a vehicle */
#mechanicApp .tfv-start{display:flex;flex-wrap:wrap;align-items:flex-end;gap:11px}
#mechanicApp .tfv-start label{display:grid;gap:5px;font-family:var(--mono);font-size:9px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
#mechanicApp .tfv-start .tfv-start-complaint{flex:1 1 300px}
#mechanicApp .tfv-start input,#mechanicApp .tfv-start select{width:100%;padding:9px 10px;
  border:1px solid var(--line);border-radius:2px;background:var(--panel2);color:var(--text);
  font-family:var(--sans);font-size:13.5px}

@media(max-width:820px){#addVehicleModal .tfa-grid, #mgAddModal .tfa-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#addVehicleModal .tfa-owner, #mgAddModal .tfa-owner{grid-template-columns:1fr}
}
@media(max-width:520px){#addVehicleModal .tfa-grid, #mgAddModal .tfa-grid{grid-template-columns:1fr}#addVehicleModal .tfa-sheet, #mgAddModal .tfa-sheet{padding:20px}#addVehicleModal .tfa-foot, #mgAddModal .tfa-foot{flex-direction:column-reverse}#addVehicleModal .tfa-foot .btn, #mgAddModal .tfa-foot .btn{width:100%}
}

/* --- today / dashboard ---------------------------------------------------- */
#mechanicApp .tfo{width:min(1420px,92vw);margin:auto;padding:28px 0 80px}

#mechanicApp .tfo-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
  border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-bottom:26px;background:var(--panel)}
#mechanicApp .tfo-tile{display:grid;gap:7px;padding:20px;border:0;border-right:1px solid var(--line);
  background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer;
  transition:background .16s ease}
#mechanicApp .tfo-tile:last-child{border-right:0}
#mechanicApp .tfo-tile:hover{background:rgba(231,217,182,.06)}
#mechanicApp .tfo-n{font-family:var(--mono);font-size:38px;font-weight:600;line-height:1;color:var(--text)}
#mechanicApp .tfo-tile small{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}
#mechanicApp .tfo-tile.is-hot .tfo-n{color:var(--danger)}
#mechanicApp .tfo-tile.is-warm .tfo-n{color:var(--warn)}
#mechanicApp .tfo-tile.is-quiet .tfo-n{color:#3E5B51}

#mechanicApp .tfo-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
#mechanicApp .tfo-panel{border:1px solid var(--line);border-radius:3px;background:var(--panel);overflow:hidden}
#mechanicApp .tfo-panel>h3{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0;padding:14px 16px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.16);
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
#mechanicApp .tfo-panel>h3 b{font-family:var(--mono);font-size:12px;color:var(--text)}
#mechanicApp .tfo-panel.is-hot>h3{color:var(--danger)}
#mechanicApp .tfo-panel.is-hot>h3 b{color:var(--danger)}

#mechanicApp .tfo-row{display:grid;gap:7px;width:100%;padding:15px 16px;border:0;
  border-top:1px solid var(--line);background:transparent;color:inherit;text-align:left;
  font:inherit;cursor:pointer;transition:background .16s ease}
#mechanicApp .tfo-row:first-child{border-top:0}
#mechanicApp .tfo-row:hover{background:rgba(231,217,182,.06)}
#mechanicApp .tfo-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
#mechanicApp .tfo-veh{font-family:var(--sig);font-size:18px;font-weight:700;text-transform:uppercase;
  color:var(--text);line-height:1.05}
#mechanicApp .tfo-tag{flex:none;padding:3px 7px;border:1px solid var(--line);border-radius:2px;
  font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
#mechanicApp .tfo-tag.is-hot{color:var(--danger);border-color:var(--danger)}
#mechanicApp .tfo-tag.is-warm{color:var(--warn);border-color:var(--warn)}
#mechanicApp .tfo-what{font-size:13px;line-height:1.45;color:#C9D8CE}
#mechanicApp .tfo-bar{display:block;height:4px;border-radius:99px;background:#12241F;overflow:hidden}
#mechanicApp .tfo-bar i{display:block;height:100%;background:var(--accent)}
#mechanicApp .tfo-meta{display:flex;flex-wrap:wrap;gap:5px 0;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#mechanicApp .tfo-meta em{font-style:normal}
#mechanicApp .tfo-meta em+em:before{content:"·";margin:0 6px;opacity:.6}
#mechanicApp .tfo-none{padding:26px 16px;text-align:center;font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

#mechanicApp .tfo-menu-title{margin:34px 0 14px;padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
#mechanicApp .tfo-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#mechanicApp .tfo-dest{position:relative;display:grid;gap:7px;padding:18px 44px 18px 18px;
  border:1px solid var(--line);border-radius:3px;background:var(--panel);color:inherit;
  text-align:left;font:inherit;cursor:pointer;
  transition:border-color .16s ease,transform .16s ease}
#mechanicApp .tfo-dest:hover{border-color:rgba(231,217,182,.45);transform:translateY(-2px)}
#mechanicApp .tfo-dest-top{display:flex;align-items:baseline;gap:9px}
#mechanicApp .tfo-dest strong{font-family:var(--sig);font-size:21px;font-weight:700;
  text-transform:uppercase;color:var(--text)}
#mechanicApp .tfo-dest-n{font-family:var(--mono);font-size:11px;color:var(--accent)}
#mechanicApp .tfo-dest-detail{font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);line-height:1.5}
#mechanicApp .tfo-dest-go{position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:17px;color:var(--muted);transition:color .16s ease,transform .16s ease}
#mechanicApp .tfo-dest:hover .tfo-dest-go{color:var(--accent);transform:translateY(-50%) translateX(3px)}

@media(max-width:1080px){
  #mechanicApp .tfo-cols{grid-template-columns:1fr}
  #mechanicApp .tfo-menu{grid-template-columns:repeat(2,minmax(0,1fr))}
  #mechanicApp .tfo-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  #mechanicApp .tfo-tile{border-bottom:1px solid var(--line)}
}
@media(max-width:600px){
  #mechanicApp .tfo-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  #mechanicApp .tfo-menu{grid-template-columns:1fr}
  #mechanicApp .tfo-n{font-size:30px}
}
@media(prefers-reduced-motion:reduce){
  #mechanicApp .tfo-dest,#mechanicApp .tfo-dest-go{transition:none}
}

/* --- stock photography credit --------------------------------------------- */
#mechanicApp .tfv-photo{position:relative}
#mechanicApp .tfv-credit{margin:9px 0 0;font-family:var(--mono);font-size:9.5px;line-height:1.6;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#mechanicApp .tfv-credit a{color:var(--accent)}
#mechanicApp .tfv-credit small{font-size:9.5px;text-transform:none;letter-spacing:.02em;opacity:.8}
#mechanicApp .tfg-stock{position:absolute;right:10px;top:10px;padding:4px 8px;border-radius:2px;
  background:rgba(10,24,20,.78);border:1px solid var(--line);color:var(--muted);
  font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

/* brand mark in the workspace topbar */
#mechanicApp .brand-mark{
  display:block;width:38px;height:38px;padding:0;border-radius:0;
  background:none;color:var(--accent);font-size:0;
}/* picker inside the mechanic's add-vehicle sheet */
#addVehicleModal .tf-pick-select{border-color:#2F5449;background:#1E3E35;color:#EFE7D2}#addVehicleModal .tf-pick-select:focus, #mgAddModal .tf-pick-select:focus{border-color:#E7D9B6;outline:none}