/* Torqfolio mechanic workspace — clear, high-density service operations */ #mechanicApp{ --bg:#f2f2ef;--panel:#fff;--panel2:#f7f7f5;--text:#191b1e;--muted:#52575b; --line:#dcdeda;--accent:#ff5a1f;--accent2:#ff5a1f;--ok:#27875a;--warn:#c78312; --danger:#d9412c;--shadow:0 12px 38px rgba(28,31,33,.07); --sig:"Space Grotesk",system-ui,sans-serif;--mono:"IBM Plex Mono",monospace; min-height:100vh;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif } #mechanicApp *{box-sizing:border-box} #mechanicApp h1,#mechanicApp h2,#mechanicApp h3,#mechanicApp h4{color:var(--text);font-family:var(--sig);text-transform:none;letter-spacing:-.035em} #mechanicApp p,#mechanicApp li{color:#606469} #mechanicApp .muted,#mechanicApp .step-desc,#mechanicApp .hero-copy,#mechanicApp .card-sub{color:var(--muted)} #mechanicApp .eyebrow{color:var(--accent);font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase} #mechanicApp :focus-visible{outline:3px solid rgba(255,90,31,.28);outline-offset:3px} #mechanicApp .topbar{position:sticky;top:0;z-index:40;min-height:76px;padding:12px max(4vw,calc((100vw - 1440px)/2));display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--line);background:rgba(248,248,245,.94);box-shadow:0 5px 22px rgba(30,32,34,.04);backdrop-filter:blur(18px)} #mechanicApp .brand{gap:11px;min-width:max-content} #mechanicApp .brand-mark{display:grid;width:38px;height:38px;place-items:center;border-radius:50%;background:var(--text);color:#fff;box-shadow:none} #mechanicApp .brand-mark svg{width:23px;height:23px} #mechanicApp .brand-name{color:var(--text);font:700 18px/1 var(--sig);text-transform:none;letter-spacing:-.04em} #mechanicApp .brand-sub{margin-top:4px;color:#85898c;font:500 8px/1 var(--mono);letter-spacing:.05em} #mechanicApp .top-actions{margin-left:8px;display:flex;align-items:center;gap:7px;flex-wrap:nowrap} #mechanicApp .btn{min-height:39px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;box-shadow:none;transition:transform .16s,background .16s,border-color .16s} #mechanicApp .btn:hover{transform:translateY(-1px);border-color:#aeb1b1;background:#fff} #mechanicApp .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff} #mechanicApp .btn.primary:hover{background:#dc410b;border-color:#dc410b} #mechanicApp .btn.ghost{background:transparent;border-color:transparent;color:#5e6266} #mechanicApp .btn.ghost:hover{background:#e8e8e4;color:var(--text);border-color:transparent} #mechanicApp #newDiagBtn{margin-left:8px;background:var(--text);border-color:var(--text);color:#fff} /* #resumeBtn is a nav tab, not a call to action. Filled orange it read as the selected tab, so the workspace showed Today underlined and Projects highlighted at the same time -- two items claiming to be where you are. A tab says where you are; the CTA next to it says what to do. */ #mechanicApp .workspace-nav #resumeBtn{background:transparent;border-color:transparent;color:#666b6e} #mechanicApp .workspace-nav #resumeBtn:hover{color:var(--text)} #mechanicApp .workspace-nav #resumeBtn.active{color:var(--text)} #mechanicApp #exitMechanic{color:#85898b} #mechanicApp .workspace-nav{display:flex;align-self:stretch;align-items:center;gap:3px;margin-left:auto} #mechanicApp .workspace-nav button{position:relative;display:flex;height:100%;align-items:center;gap:7px;padding:0 13px;border:0;background:transparent;color:#666b6e;font-size:11px;font-weight:700;cursor:pointer} #mechanicApp .workspace-nav button::after{content:"";position:absolute;right:12px;bottom:-12px;left:12px;height:3px;border-radius:3px 3px 0 0;background:transparent} #mechanicApp .workspace-nav button:hover{color:var(--text)} #mechanicApp .workspace-nav button.active{color:var(--text)} #mechanicApp .workspace-nav button.active::after{background:var(--accent)} #mechanicApp .workspace-nav-icon{display:none;color:var(--accent);font-size:16px;font-weight:500} #mechanicApp .account-button{display:flex;align-items:center;gap:8px;padding:4px 7px 4px 4px;border:1px solid var(--line);border-radius:99px;background:#fff;color:#62676a;cursor:pointer} #mechanicApp .account-button>span{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:#e9e9e5;color:var(--text);font:700 9px/1 var(--sig)} #mechanicApp .account-button>b{font-size:9px} #mechanicApp .account-button:hover{border-color:#b9bbb9;color:var(--text)} #mechanicApp .shell{width:min(1440px,92vw);margin:auto;padding:34px 0 100px} #mechanicApp .hero{padding:32px 0 55px;display:grid;grid-template-columns:minmax(0,.82fr) minmax(430px,.58fr);gap:38px;align-items:center} #mechanicApp .hero>div:first-child{padding:20px 0} #mechanicApp .hero h1{max-width:800px;margin-top:16px;font-size:clamp(48px,5.7vw,82px);line-height:.94;letter-spacing:-.065em} #mechanicApp .hero-copy{max-width:720px;margin:24px 0;font-size:16px;line-height:1.7} #mechanicApp .hero-actions{display:flex;gap:10px;margin-top:27px} #mechanicApp .hero-actions .btn.large{min-height:50px;padding:14px 19px} #mechanicApp .hero-panel.active-vehicle-hero{min-height:455px;border:0;border-radius:18px;background:#202326;box-shadow:0 28px 65px rgba(26,28,30,.18);overflow:hidden} #mechanicApp .hero-panel.active-vehicle-hero:before{background:linear-gradient(180deg,rgba(11,13,15,.02) 20%,rgba(11,13,15,.48) 54%,rgba(11,13,15,.96) 100%)} #mechanicApp .hero-vehicle-content{padding:100px 25px 24px;text-shadow:none} #mechanicApp .hero-vehicle-content h3{color:#fff;font-size:27px;letter-spacing:-.04em} #mechanicApp .hero-vehicle-content>p{color:#d5d8d9} #mechanicApp .hero-vehicle-content .eyebrow{color:#ff8a60} #mechanicApp .vehicle-identity-grid>div{padding:9px 10px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(15,17,19,.67)} #mechanicApp .vehicle-identity-grid small{color:#aeb2b4} #mechanicApp .vehicle-identity-grid strong{color:#fff} #mechanicApp .hero-carousel-controls>button:not(.hero-open-job),#mechanicApp .hero-open-job{border-radius:7px!important;background:rgba(15,17,19,.74)!important;color:#fff!important} #mechanicApp .hero-open-job{color:#ff8a60!important} /* Signed-in landing: the active job is the product, not a marketing hero. */ #mechanicApp .hero.mechanic-focus{grid-template-columns:minmax(520px,1.18fr) minmax(330px,.62fr);gap:26px;align-items:stretch;padding:24px 0 48px} #mechanicApp .mechanic-focus .hero-panel.active-vehicle-hero{width:100%;min-height:540px} #mechanicApp .mechanic-focus .hero-vehicle-content{padding:150px 30px 28px} #mechanicApp .mechanic-focus .hero-vehicle-content h3{font-size:34px} #mechanicApp .mechanic-home-brief{display:flex;min-width:0;flex-direction:column;padding:34px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)} #mechanicApp .mechanic-home-brief h1{max-width:520px;margin-top:15px;font-size:clamp(38px,4vw,58px);line-height:.95;letter-spacing:-.06em} #mechanicApp .mechanic-home-brief .hero-copy{margin:22px 0 0;font-size:14px;line-height:1.65} #mechanicApp .mechanic-focus-note{margin-top:auto;padding:18px;border-left:4px solid var(--accent);border-radius:9px;background:#f4f4f1} #mechanicApp .mechanic-focus-note span,#mechanicApp .mechanic-focus-note strong{display:block} #mechanicApp .mechanic-focus-note span{color:var(--accent);font:600 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase} #mechanicApp .mechanic-focus-note strong{margin-top:8px;color:var(--text);font-size:13px} #mechanicApp .mechanic-focus-note p{margin:7px 0 0;color:#555a5e;font-size:11px;line-height:1.55} #mechanicApp .mechanic-home-brief .hero-actions{display:grid;grid-template-columns:1fr;margin-top:18px} #mechanicApp .mechanic-home-brief .hero-actions .btn{width:100%} #mechanicApp .wb,#mechanicApp .tfg,#mechanicApp .tfv,#mechanicApp .tfo{width:min(1440px,92vw);padding:34px 0 80px} #mechanicApp .wb-head,#mechanicApp .tfg-head,#mechanicApp .tfo-head{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)} #mechanicApp .wb-head h2,#mechanicApp .tfg-head h2,#mechanicApp .tfo-head h2{margin-top:9px;font-size:clamp(38px,4vw,56px);line-height:1} #mechanicApp .wb-stats{gap:7px;color:var(--muted);font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.06em} #mechanicApp .wb-stats span{padding:8px 11px;border:1px solid var(--line);border-radius:99px;background:#fff} #mechanicApp .wb-stats b{color:var(--text)} #mechanicApp .wb-stats .wb-alert{border-color:#f1b4a9;background:#fff4f1;color:var(--danger)} #mechanicApp .wb-cols{gap:13px} #mechanicApp .wb-col{gap:10px} #mechanicApp .wb-col-head{padding:13px 14px;border:0;border-radius:9px;background:#e4e5e2;color:var(--text)} #mechanicApp .wb-col[data-stage="waiting"] .wb-col-head{background:#fff3dc} #mechanicApp .wb-col[data-stage="repair"] .wb-col-head{background:#e5f3eb} #mechanicApp .wb-col[data-stage="verification"] .wb-col-head{background:#e6eff7} #mechanicApp .wb-col-head strong{color:var(--text);font:650 11px/1 var(--mono)} #mechanicApp .wb-card{border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:0 7px 22px rgba(28,30,31,.045);overflow:hidden} #mechanicApp .wb-card:hover{border-color:#b8bab8;transform:translateY(-2px);box-shadow:0 13px 30px rgba(28,30,31,.08)} #mechanicApp .wb-card.is-unassigned{border-left:4px solid var(--danger)} #mechanicApp .wb-open{padding:16px;background:#fff;color:var(--text)} #mechanicApp .wb-veh{color:var(--text);font:650 17px/1.2 var(--sig);text-transform:none;letter-spacing:-.03em} #mechanicApp .wb-sub{color:var(--muted);font-size:12px} #mechanicApp .wb-code{border-color:#d6d7d4;border-radius:5px;background:#f1f1ee;color:#555a5d} #mechanicApp .wb-bar,#mechanicApp .tfo-bar{background:#e5e6e3} #mechanicApp .wb-bar i,#mechanicApp .tfo-bar i{background:var(--accent)} #mechanicApp .wb-controls{border-color:#e3e3e0;background:#f7f7f4} #mechanicApp .wb-field>span{color:#7a7e80} #mechanicApp .wb-field select,#mechanicApp .workspace-actions select{border-color:#d5d7d4;border-radius:7px;background:#fff;color:var(--text)} #mechanicApp .wb-share{border-color:#d5d7d4;border-radius:7px;background:#fff;color:#555a5d} #mechanicApp .tfo-strip{border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:var(--shadow);overflow:hidden} #mechanicApp .tfo-tile{padding:22px;background:#fff;border-color:var(--line)} #mechanicApp .tfo-tile:hover{background:#fafaf8} #mechanicApp .tfo-n{color:var(--text);font:650 38px/1 var(--sig);letter-spacing:-.05em} #mechanicApp .tfo-tile small{color:#7a7e81} #mechanicApp .tfo-cols{gap:13px} #mechanicApp .tfo-panel{border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow)} #mechanicApp .tfo-panel>h3{padding:15px 17px;border-color:var(--line);color:var(--text);font:650 13px/1 var(--sig);letter-spacing:-.01em} #mechanicApp .tfo-row{background:#fff;border-color:#e7e7e4;color:var(--text)} #mechanicApp .tfo-row:hover{background:#f8f8f5} #mechanicApp .tfo-veh{color:var(--text);font:650 16px/1.2 var(--sig);text-transform:none;letter-spacing:-.03em} #mechanicApp .tfo-what{color:#65696d} #mechanicApp .tfo-dest{border-color:var(--line);border-radius:11px;background:#fff;color:var(--text);box-shadow:0 7px 20px rgba(28,30,31,.04)} #mechanicApp .tfo-dest:hover{border-color:#b9bbb9;background:#fff} #mechanicApp .tfo-dest strong{color:var(--text);font:650 19px/1 var(--sig);text-transform:none} /* Today is the signed-in home: one decision first, then the shop at a glance. */ #mechanicApp .tfo>.wb-head{align-items:flex-end;margin-bottom:18px} #mechanicApp .tfo-intro{margin:10px 0 0;color:#555a5e;font-size:13px} #mechanicApp .tfo-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end} #mechanicApp .tfo-focus{margin-bottom:30px} #mechanicApp .tfo-focus-card{position:relative;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;min-height:0;padding:22px 28px;border-radius:16px;background:var(--text);box-shadow:0 22px 55px rgba(25,27,30,.14);overflow:hidden} #mechanicApp .tfo-focus-card::after{content:"";position:absolute;right:-75px;top:-150px;width:360px;height:360px;border:60px solid rgba(255,90,31,.12);border-radius:50%} #mechanicApp .tfo-focus-card.is-hot::after{border-color:rgba(217,65,44,.18)} #mechanicApp .tfo-focus-copy{position:relative;z-index:1} #mechanicApp .tfo-focus-copy>span{color:#ff8a60;font:600 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase} #mechanicApp .tfo-focus-copy h3{max-width:850px;margin-top:12px;color:#fff;font-size:clamp(31px,4vw,51px);line-height:.98;letter-spacing:-.055em} #mechanicApp .tfo-focus-copy p{max-width:760px;margin-top:13px;color:#c5c9ca;font-size:13px;line-height:1.6} #mechanicApp .tfo-focus-copy small{display:block;margin-top:12px;color:#959a9d;font:500 9px/1.4 var(--mono)} #mechanicApp .tfo-focus-card>button{position:relative;z-index:1;display:flex;align-items:center;gap:28px;min-width:170px;padding:16px 18px;border:0;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:750;cursor:pointer} #mechanicApp .tfo-focus-card>button b{margin-left:auto;font-size:16px} #mechanicApp .tfo-section-label{display:flex;align-items:baseline;justify-content:space-between;margin:26px 0 10px} #mechanicApp .tfo-section-label span{color:var(--text);font:650 17px/1 var(--sig)} #mechanicApp .tfo-section-label small{color:#777c7f;font:500 8px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em} #mechanicApp .tfo-strip{display:flex;flex-wrap:wrap;align-items:center;grid-template-columns:none;border:0;gap:8px;background:transparent;box-shadow:none;overflow:visible} #mechanicApp .tfo-strip .tfo-tile{flex:1 1 150px;max-width:280px} /* The states that are fine, said once and quietly, so the states that are not keep the whole of the reader's attention. */ #mechanicApp .tfo-clear{flex:1 1 100%;margin:2px 0 0;padding:0 2px;font-size:12.5px;line-height:1.5;color:#6b7075} /* Getting the work above the fold. Measured on the live page: the first job row began 825px down a 663px viewport, so the answer to "what do I touch next" was always one scroll away. Nothing below is decoration removal for its own sake -- each rule buys back vertical space ahead of the first row. The focus card stays the one loud thing on the page. It just stops being loud at 51px across two lines. */ #mechanicApp #overviewSection .wb-head{padding-bottom:0;margin-bottom:4px} #mechanicApp #overviewSection .wb-head .eyebrow{display:none} /* "Today" already says it */ #mechanicApp #overviewSection #overviewTitle{margin:0;font-size:clamp(30px,3.4vw,42px);line-height:1.05} #mechanicApp #overviewSection .tfo-intro{margin-top:4px;font-size:13px} #mechanicApp #overviewSection .tfo-focus-card{min-height:0;padding:20px 26px} #mechanicApp #overviewSection .tfo-focus-copy h3{margin-top:7px;font-size:clamp(21px,2.3vw,29px);line-height:1.12;letter-spacing:-.03em} #mechanicApp #overviewSection .tfo-focus-copy p{margin-top:7px} #mechanicApp #overviewSection .tfo-focus-copy small{margin-top:6px} #mechanicApp #overviewSection .tfo-tile{min-height:0;padding:13px 15px} #mechanicApp #overviewSection .tfo-n{font-size:27px} #mechanicApp .tfo-tile{position:relative;min-height:115px;padding:18px;border:1px solid var(--line)!important;border-radius:11px;background:#fff!important;text-align:left} #mechanicApp .tfo-tile:hover{border-color:#b7bab7!important;transform:translateY(-2px)} #mechanicApp .tfo-tile::after{content:"→";position:absolute;right:16px;top:17px;color:#a2a6a7;font-size:13px} #mechanicApp .tfo-n{font-size:42px} #mechanicApp .tfo-tile small{margin-top:auto;color:#555a5e} #mechanicApp .tfo-cols{grid-template-columns:1.6fr 1fr;gap:12px} #mechanicApp .tfo-cols:has(>.tfo-panel:nth-child(3)){grid-template-columns:1.5fr 1fr 1fr} #mechanicApp .tfo-panel{min-height:260px} #mechanicApp .tfo-panel>h3{min-height:48px;background:#f2f2ef} #mechanicApp .tfo-row{transition:background .15s,transform .15s} #mechanicApp .tfo-row:hover{transform:translateX(3px)} #mechanicApp .tfo-menu-title{margin-top:40px;color:var(--text);font:650 19px/1 var(--sig);text-transform:none;letter-spacing:-.02em} #mechanicApp .tfo-menu{grid-template-columns:repeat(3,1fr)} #mechanicApp .tfo-dest{min-height:105px;padding:20px 50px 20px 20px} #mechanicApp .tfg-grid{gap:14px} #mechanicApp .tfg-card{border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:var(--shadow)} #mechanicApp .tfg-card:hover{border-color:#b7b9b7;box-shadow:0 18px 40px rgba(28,30,31,.1)} #mechanicApp .tfg-photo{background:#dfe1df} #mechanicApp .tfg-body{padding:16px 17px 18px} #mechanicApp .tfg-nick{color:var(--accent);font:650 17px/1.2 var(--sig);text-transform:none} #mechanicApp .tfg-name{color:var(--text);font:650 16px/1.2 var(--sig);text-transform:none} #mechanicApp .tfg-flag{border-radius:99px;font-family:var(--mono);font-size:8px} #mechanicApp .summary-card,#mechanicApp .step-card,#mechanicApp .diag-card,#mechanicApp .workspace-card,#mechanicApp .inventory-section,#mechanicApp .active-job-card,#mechanicApp .tfv-item{border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow)} #mechanicApp .summary-grid div,#mechanicApp .detail-grid>div,#mechanicApp .step-tool,#mechanicApp .work-item,#mechanicApp .job-tool-row,#mechanicApp .notes-list article{border-color:#dedfdd;border-radius:8px;background:#f6f6f3;color:var(--text)} #mechanicApp .summary-card p,#mechanicApp .detail-grid p,#mechanicApp .procedure,#mechanicApp .manual-note{color:#5f6468} #mechanicApp .chip{border-color:#d5d7d4;border-radius:99px;background:#f7f7f4;color:#595e61} #mechanicApp .status-pill{border-radius:99px} #mechanicApp .step-number,#mechanicApp .choice-icon{background:var(--accent);border-color:var(--accent);color:#fff} #mechanicApp .workflow-command{border:0;border-radius:12px;background:var(--text);box-shadow:0 18px 38px rgba(25,27,30,.14)} #mechanicApp .current-step-callout strong{color:#fff} #mechanicApp .current-step-callout small{color:#ff8a60} #mechanicApp .current-step-callout span{color:#b9bdbf} #mechanicApp .workflow-stats>div{border-color:#393c3f;background:#24272a} #mechanicApp .workflow-stats strong{color:#fff} #mechanicApp .workflow-filters button{border-color:#d5d7d4;background:#fff;color:#666a6e} #mechanicApp .workflow-filters button.active{border-color:var(--text);background:var(--text);color:#fff} #mechanicApp .step-card.is-open{border-color:#ff9b76;box-shadow:0 0 0 3px rgba(255,90,31,.08)} #mechanicApp .step-toggle{border-color:#d5d7d4;border-radius:7px;background:#f5f5f2;color:var(--text)} #mechanicApp .step-toggle[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)} #mechanicApp .project-video-library{border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow)} #mechanicApp .project-video-library h4{color:var(--text)} #mechanicApp .video-library-label,#mechanicApp .video-library-copy>span{color:var(--accent)} #mechanicApp .video-library-copy>strong{color:var(--text)} #mechanicApp .video-library-copy>p{color:var(--muted)} #mechanicApp .video-playlist button{border-color:var(--line);border-radius:8px;background:#f5f5f2;color:var(--text)} #mechanicApp .video-playlist button.active{border-color:var(--accent);background:#fff1eb} #mechanicApp input,#mechanicApp textarea,#mechanicApp select{border-color:#d4d6d3!important;border-radius:8px!important;background:#fff!important;color:var(--text)!important;caret-color:var(--accent)} #mechanicApp input::placeholder,#mechanicApp textarea::placeholder{color:#9a9d9f} #mechanicApp input:focus,#mechanicApp textarea:focus,#mechanicApp select:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(255,90,31,.09);outline:none} #mechanicApp select option{background:#fff;color:#191b1e} #mechanicApp{scrollbar-color:#b9bcb9 #ecece8} #mechanicApp ::selection{background:#ffcfbd;color:#191b1e} #mechanicApp .back-link{color:#62666a} #mechanicApp .back-link:hover{color:var(--accent)} /* Contrast normalization for legacy components that were authored for dark cards. */ #mechanicApp .step-kicker,#mechanicApp .check,#mechanicApp .project-count, #mechanicApp .summary-grid span,#mechanicApp .card-sub,#mechanicApp .job-meta, #mechanicApp .tfo-meta,#mechanicApp .tfo-tag,#mechanicApp .tfg-owner, #mechanicApp .tfg-odo,#mechanicApp .tfv-sub,#mechanicApp .tfv-note, #mechanicApp .tfv-item-int,#mechanicApp .tfv-detail,#mechanicApp .tfv-credit, #mechanicApp .wb-pct,#mechanicApp .wb-col-head span{color:#555a5e} #mechanicApp .step-quick-meta span{border-color:#cdd0ce;background:#f3f3f0;color:#4f5458} #mechanicApp .step-card.is-done{background:#f1f2ef;opacity:1} #mechanicApp .step-card.is-done .step-title{color:#62676a} #mechanicApp summary,#mechanicApp .step-entry>summary{color:var(--text)} #mechanicApp .repair-step-form label,#mechanicApp .repair-task-copy p, #mechanicApp .tfv-item-body p,#mechanicApp .tfr-item p{color:#505559!important} #mechanicApp .visibility-check{color:#505559!important} #mechanicApp .attachment-grid article{border-color:var(--line);background:#f6f6f3} #mechanicApp .attachment-grid small{color:#555a5e} #mechanicApp .workflow-stats small{color:#d2d5d6} #mechanicApp .workflow-stats strong{color:#fff} #mechanicApp .video-playlist small{color:#555a5e} #mechanicApp .video-playlist strong{color:var(--text)} #mechanicApp .project-choice{background:#fff;color:var(--text)} #mechanicApp .choice-copy,#mechanicApp .choice-preview small{color:#555a5e} #mechanicApp .choice-preview{border-color:#d9dbd8;background:#f5f5f2;color:var(--text)} #mechanicApp .choice-preview b{color:var(--accent)} #mechanicApp .manual-guide p,#mechanicApp .manual-step-card p, #mechanicApp .manual-step-card ul,#mechanicApp .phase-intro p{color:#4f555a} /* The manual shelf on the vehicle page. `#mechanicApp p,li` outranks any plain class, so the lines that have to read as strong text are re-inked here rather than in vehicle-record.css — that stylesheet stays scope-agnostic on purpose. */ :is(#mechanicApp,#clientPortal) .vrm-title,:is(#mechanicApp,#clientPortal) .vrm-warn, :is(#mechanicApp,#clientPortal) .vrm-caveats li{color:var(--text)} :is(#mechanicApp,#clientPortal) .vrm-where,:is(#mechanicApp,#clientPortal) .vrm-prov, :is(#mechanicApp,#clientPortal) .vrm-covers{color:#555a5e} /* An empty bay. The hero is a vehicle record, and with no vehicle the photo, the identity grid and the carousel are all reporting nothing — so they come out, the panel stops holding a screen's worth of height, and what is left is the sentence and the one button that fixes it. */ #mechanicApp .active-vehicle-hero.is-empty{display:block;min-height:0} #mechanicApp .active-vehicle-hero.is-empty .hero-vehicle-image, #mechanicApp .active-vehicle-hero.is-empty .vehicle-identity-grid, #mechanicApp .active-vehicle-hero.is-empty #heroProjectPrev, #mechanicApp .active-vehicle-hero.is-empty #heroProjectNext, #mechanicApp .active-vehicle-hero.is-empty #heroProjectPosition, #mechanicApp .active-vehicle-hero.is-empty #heroProjectStatus{display:none} #mechanicApp .active-vehicle-hero.is-empty .hero-vehicle-content{padding:34px 32px} #mechanicApp .active-vehicle-hero.is-empty #heroVehicleName{margin:6px 0 8px} #mechanicApp .active-vehicle-hero.is-empty #heroVehicleRepair{max-width:52ch} #mechanicApp .active-vehicle-hero.is-empty .hero-carousel-controls{margin-top:20px} /* Accept and Decline on an inbound request. Decline stays a ghost until you reach for it -- turning a client away is the rarer answer and should not compete with taking the work, but it should be obvious what it does once the cursor is on it. */ #mechanicApp .request-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} #mechanicApp .request-actions .btn{flex:0 0 auto} /* The four numbers a job is judged on, in one row under the header. Taken from the work-order design: progress, labour, parts, money, each a figure with the count that produced it underneath. They used to be a progress bar here, a parts total three panels down, and an estimate in a card below that -- three scrolls to answer "where is this job". */ #mechanicApp .job-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px;margin:18px 0 20px} #mechanicApp .job-stats article{padding:15px 16px;border:1px solid var(--line);border-radius:9px; background:var(--panel);box-shadow:0 1px 2px 0 rgba(0,0,0,.05)} #mechanicApp .js-label{margin:0;font-size:13px;line-height:19px;color:var(--muted)} #mechanicApp .js-value{margin:7px 0 9px;font:600 24px/32px var(--sig);letter-spacing:-.03em; color:var(--text);font-variant-numeric:tabular-nums} #mechanicApp .js-bar{display:block;height:5px;border-radius:3px;background:#e9eae7;overflow:hidden} #mechanicApp .js-bar i{display:block;height:100%;border-radius:3px;background:var(--accent); transition:width .3s} #mechanicApp .js-foot{margin:9px 0 0;font-size:12px;line-height:16px;color:#7c8186; font-variant-numeric:tabular-nums} @media(prefers-reduced-motion:reduce){#mechanicApp .js-bar i{transition:none}} /* Parts, with the money at the top. The running total lived in a separate Job estimate card further down the workspace, so answering "what is this costing" meant scrolling past the part list to a different panel. It sits in this panel's own header now, with the labor and job figures beside it. Each line carries the three prices the research found -- list, dealer discount, aftermarket -- because one unit cost hides the decision behind it. The one being paid is the only one inked; the other two stay reference. */ /* The repair workflow, one step at a time. Ten steps expanded at once ran to 9,983px -- fifteen screens to work through with a torque wrench in your other hand, and no way to tell at a glance which one you were standing in. Everything folds to its title; the step you are on is the only one open. Ticking it hands you the next. */ /* Inside an open step: why it exists, then the things you do, then whatever the manual said. The actions are numbered because they are a sequence you work through in order -- that is the one place a number actually earns its place. Wide line-height and a short measure, because this gets read at arm's length with the hood up. */ #mechanicApp .step-lead{margin:0 0 10px;font-size:13.5px;line-height:1.6;color:#5f6469} #mechanicApp .step-actions{margin:0;padding:0;list-style:none;counter-reset:stepact;display:grid;gap:7px} #mechanicApp .step-actions li{counter-increment:stepact;position:relative;padding:8px 10px 8px 34px; max-width:62ch;border:1px solid var(--line);border-radius:6px;background:var(--panel2,#f7f7f5); font-size:14px;line-height:1.5;color:var(--text)} #mechanicApp .step-actions li::before{content:counter(stepact);position:absolute;left:9px;top:8px; display:grid;place-items:center;width:17px;height:17px;border-radius:50%; background:var(--text);color:#fff;font:600 10px/1 var(--mono)} /* The time on a step is a guess until the person doing it says otherwise. Editable in place, in minutes, sitting quietly under the actions rather than presenting itself as a measurement. */ #mechanicApp .step-time{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:12px 0 0} #mechanicApp .step-time label{display:inline-flex;align-items:baseline;gap:7px;font-size:13px;color:var(--text)} #mechanicApp .step-time b{font:600 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} #mechanicApp .step-time input{width:66px;padding:5px 8px;border:1px solid var(--line);border-radius:5px; background:#fff;color:var(--text);font:600 13px/1 var(--mono);text-align:right;font-variant-numeric:tabular-nums} #mechanicApp .step-time input:focus{border-color:var(--accent);outline:none} #mechanicApp .step-time em{font-style:normal;font-size:11.5px;color:#7c8186} #mechanicApp .step-note{margin:10px 0 0;padding:9px 11px;max-width:62ch;border-left:2px solid var(--line); font-size:12.5px;line-height:1.55;color:#5f6469} #mechanicApp .step-note b{color:var(--text)} #mechanicApp .repair-task .repair-task-detail{display:none} #mechanicApp .repair-task.is-open .repair-task-detail{display:block} #mechanicApp .repair-task-title{display:block;cursor:pointer;padding-right:22px;position:relative} #mechanicApp .repair-task-title::after{content:"";position:absolute;right:4px;top:.42em;width:7px;height:7px; border-right:2px solid #9aa0a4;border-bottom:2px solid #9aa0a4;transform:rotate(45deg);transition:transform .16s} #mechanicApp .repair-task.is-open .repair-task-title::after{transform:rotate(225deg)} #mechanicApp .repair-task-title:hover{color:var(--accent)} #mechanicApp .repair-task-title:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px} /* the open step is the one thing on this panel that should catch the eye */ #mechanicApp .repair-task.is-open{border-color:var(--accent);background:#fff;box-shadow:0 6px 20px rgba(28,31,33,.07)} #mechanicApp .repair-task.done .repair-task-title{color:#8b9095;text-decoration:line-through} #mechanicApp .repair-task-detail{margin-top:9px} @media(prefers-reduced-motion:reduce){ #mechanicApp .repair-task-title::after{transition:none} } #mechanicApp .parts-head{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:flex-start;justify-content:space-between} #mechanicApp .parts-head h3{margin:0} #mechanicApp .parts-sum{text-align:right;margin-left:auto} #mechanicApp .parts-sum small{display:block;font:600 9px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)} #mechanicApp .parts-sum strong{display:block;margin-top:5px;font:650 27px/1 var(--sig);letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums} #mechanicApp .parts-sum em{display:block;margin-top:5px;font-style:normal;font-size:11.5px;color:#6b7075} /* The workflow panel borrows the parts panel's money block for time, so the two numbers a job is judged on -- what it costs and how long it takes -- are read the same way in the same place on both panels. */ #mechanicApp .repair-plan-card .parts-sum strong{font-size:24px} #mechanicApp .part-item{align-items:flex-start} /* Where the part is in its life. Quiet until it matters -- on hand is the state you want every row to reach, so that is the one that gets colour. */ #mechanicApp .part-state{margin-top:8px;padding:4px 8px;border:1px solid var(--line);border-radius:5px; background:#fff;color:#5f6469;font:600 10.5px/1.4 var(--mono);letter-spacing:.04em} #mechanicApp .part-state:focus{border-color:var(--accent);outline:none} #mechanicApp .part-state.is-on-hand{border-color:#27875a;color:#1f6b47;background:#f1f8f4} #mechanicApp .part-state.is-ordered{border-color:#c78312;color:#8a5a06;background:#fdf6ea} /* The tools you already own, folded. Open it and it is the same list it always was; closed, the panel is only the gaps. */ /* Tools grouped by whether they stop you. The "can't start" group is the only one that gets weight -- the other two exist to tell you that a gap there is not a reason to put the car down. */ /* Commons requires the photographer be named. Small, over the image, and out of the way of the tool itself. */ #mechanicApp .owned-tool-photo{position:relative} /* The close-out sheet. Same chrome as the confirm dialog, with room for the two things the car needs from a finished job: the reading, and what was done to it. Not scoped to #mechanicApp -- the dialog mounts on body. */ .tfd-wide{max-width:520px} /* A sheet that hides its own controls behind a scroll is the whole complaint in miniature. Everything fits without one. */ .tfd-wide .tfd-body{max-height:min(74vh,560px)} .tfd-copy{margin:0 0 12px;font-size:13px;line-height:1.5} .tfd-sub{margin:13px 0 7px;font-size:12.5px;line-height:1.45;opacity:.8} .tfd-field{display:flex;align-items:center;gap:9px;font-size:13px} .tfd-field.wide{display:grid;gap:6px;margin-top:14px} .tfd-field span{min-width:118px;font-weight:600} .tfd-field em{font-style:normal;opacity:.7;font-size:12px} .tfd-field input{flex:1;min-width:0;padding:8px 10px;border-radius:6px; border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06); color:inherit;font:inherit;font-size:13px} .tfd-field input:focus{outline:none;border-color:currentColor} .tfd-checks{display:grid;gap:7px} .tfd-checks label{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:6px; border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);font-size:13.5px;cursor:pointer} .tfd-checks input{width:15px;height:15px;accent-color:#ff5a1f} #mechanicApp .tool-shot-reject{position:absolute;right:6px;top:6px;padding:3px 8px;border:0;border-radius:5px; background:rgba(20,22,24,.62);color:#fff;font:600 9px/1 var(--mono);letter-spacing:.05em; cursor:pointer;opacity:0;transition:opacity .15s} #mechanicApp .owned-tool-photo:hover .tool-shot-reject, #mechanicApp .tool-shot-reject:focus-visible{opacity:1} #mechanicApp .tool-shot-reject:hover{background:var(--danger,#d9412c)} #mechanicApp .tool-shot-credit{position:absolute;left:0;right:0;bottom:0;padding:3px 7px; background:linear-gradient(transparent,rgba(20,22,24,.72));color:#e8eaeb; font:500 8.5px/1.3 var(--mono);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #mechanicApp .tool-group{margin-top:14px} #mechanicApp .tool-group:first-child{margin-top:4px} #mechanicApp .tool-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px} #mechanicApp .tool-group-head strong{font-size:13.5px;color:var(--text)} #mechanicApp .tool-group-head span{font:600 10px/1 var(--mono);letter-spacing:.06em;color:var(--muted);white-space:nowrap} #mechanicApp .tool-group-note{margin:3px 0 8px;font-size:11.5px;line-height:1.5;color:#7c8186} #mechanicApp .tool-group.is-hard{padding:11px 12px;border:1px solid var(--line);border-left:3px solid var(--danger,#d9412c);border-radius:7px;background:#fff} #mechanicApp .tool-group.is-hard .tool-group-head span{color:#a4331f} #mechanicApp .tool-group.is-nice,#mechanicApp .tool-group.is-other{opacity:.86} #mechanicApp .tool-group-clear{margin:0;font-size:12.5px;color:#1f6b47} #mechanicApp .tool-have.is-soft{margin-top:0;border-top:0;padding-top:0} /* a missing tool you can work around is not an alarm */ #mechanicApp .tool-group.is-improvise .job-tool-row.missing span, #mechanicApp .tool-group.is-nice .job-tool-row.missing span{color:#8a5a06} #mechanicApp .tool-group.is-improvise .job-tool-row.missing small, #mechanicApp .tool-group.is-nice .job-tool-row.missing small{color:#5f6469} #mechanicApp .tool-have{margin-top:8px;border-top:1px solid var(--line);padding-top:9px} #mechanicApp .tool-have>summary{cursor:pointer;list-style:none;padding:3px 0; font:600 11px/1.4 var(--mono);letter-spacing:.05em;color:#6b7075} #mechanicApp .tool-have>summary::-webkit-details-marker{display:none} #mechanicApp .tool-have>summary::before{content:"▸ ";color:#9aa0a4} #mechanicApp .tool-have[open]>summary::before{content:"▾ "} #mechanicApp .tool-have>summary:hover{color:var(--accent)} #mechanicApp .tool-have.is-gap>summary{color:#8a5a06} #mechanicApp .tool-have.is-gap>summary::before{color:#c78312} #mechanicApp .tool-have .job-tool-grid{margin-top:7px} #mechanicApp .tool-bought{margin-left:auto;padding:4px 10px;min-height:0;font-size:10.5px;white-space:nowrap} #mechanicApp .job-tool-row.missing .tool-bought{border-color:var(--line)} #mechanicApp .job-tool-row.missing .tool-bought:hover{border-color:var(--accent);color:var(--accent)} #mechanicApp .part-main{display:block;min-width:0} #mechanicApp .part-main small{display:block;margin-top:2px;color:#6b7075} /* Three fixed columns rather than a wrapping row, so MSRP sits under MSRP all the way down the list. Reading one part's aftermarket price against the next one's is the whole point, and that only works if they line up. */ #mechanicApp .part-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px;max-width:420px} #mechanicApp .pp-cell.is-empty b{color:#a7acb0} #mechanicApp .pp-cell{display:grid;gap:2px;padding:5px 9px;border:1px solid var(--line);border-radius:5px;background:var(--panel2,#f7f7f5)} #mechanicApp .pp-cell small{margin:0;font:600 8.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#7c8186} #mechanicApp .pp-cell b{font:600 12.5px/1 var(--mono);color:#5c6166;font-variant-numeric:tabular-nums} /* the price actually being paid */ #mechanicApp .pp-cell.is-paid{border-color:var(--accent);background:#fff} #mechanicApp .pp-cell.is-paid b{color:var(--text)} #mechanicApp .pp-cell.is-paid small{color:var(--accent)} @media(max-width:560px){ #mechanicApp .parts-sum{text-align:left;margin-left:0} } #mechanicApp .decline-request{border-color:var(--line);color:#5e6266} #mechanicApp .decline-request:hover{border-color:var(--danger,#d9412c);color:var(--danger,#d9412c);background:#fff} /* Project information architecture: identity → diagnosis → readiness → execution. */ #mechanicApp #projectSection{margin-top:0;padding-top:22px;scroll-behavior:smooth} #mechanicApp #projectSection>[id],#mechanicApp #projectSection h3[id]{scroll-margin-top:150px} #mechanicApp #projectSection>.back-link{margin:0 0 14px;padding:8px 0;color:#5a5f63;font-size:11px} #mechanicApp .project-head{position:relative;margin:0;padding:30px 32px;align-items:center;border-radius:16px;background:var(--text);overflow:hidden} #mechanicApp .project-head::after{content:"";position:absolute;right:-70px;top:-120px;width:320px;height:320px;border:55px solid rgba(255,90,31,.13);border-radius:50%} #mechanicApp .project-head>div{position:relative;z-index:1} #mechanicApp .project-head .eyebrow{color:#ff8a60} #mechanicApp .project-head h2{margin-top:9px;color:#fff;font-size:clamp(37px,4.6vw,62px);line-height:.95;letter-spacing:-.06em} #mechanicApp .project-head .muted{margin-top:10px;color:#c0c4c6;font:500 11px/1.5 var(--mono)} #mechanicApp .project-badges{position:relative;z-index:2;align-items:center;flex-wrap:wrap} #mechanicApp .project-badges .badge{border-color:#45484b;background:#282b2e;color:#d9dcdd} #mechanicApp .project-badges .badge.danger{border-color:#7e3527;background:#4a251e;color:#ff9b7c} #mechanicApp .project-jump-nav{position:sticky;top:76px;z-index:31;display:flex;align-items:center;gap:6px;margin:12px 0 18px;padding:8px;border:1px solid var(--line);border-radius:11px;background:rgba(247,247,244,.95);box-shadow:0 7px 25px rgba(25,27,29,.06);backdrop-filter:blur(14px)} #mechanicApp .project-jump-nav>span{padding:0 9px;color:#777c7f;font:600 8px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em} #mechanicApp .project-jump-nav button{padding:10px 12px;border:0;border-radius:7px;background:transparent;color:#575c60;font-size:10px;font-weight:700;cursor:pointer} #mechanicApp .project-jump-nav button:hover{background:#e9e9e5;color:var(--text)} #mechanicApp .project-jump-nav button.is-primary{margin-left:auto;background:var(--text);color:#fff} #mechanicApp .project-summary{margin:0 0 18px;padding:25px 28px;grid-template-columns:1.15fr 1fr;border-left:5px solid var(--accent);box-shadow:none} #mechanicApp .project-summary h3{margin-top:10px;font-size:clamp(25px,3vw,38px)} #mechanicApp .project-summary p{margin-top:12px;max-width:720px;font-size:13px} #mechanicApp .project-summary .summary-grid>div{padding:13px;border-color:#e0e1de;background:#f5f5f2} #mechanicApp .project-summary .summary-grid span{color:#666b6e;font-size:9px;text-transform:uppercase;letter-spacing:.05em} #mechanicApp .project-summary .summary-grid strong{color:var(--text);font-size:12px} #mechanicApp .manual-guide{margin:18px 0;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:none;color:var(--text)} #mechanicApp .manual-guide-head{padding:22px 25px;align-items:center} #mechanicApp .manual-guide-head h3{margin-top:7px;color:var(--text);font-size:25px} #mechanicApp .manual-guide-head p{margin-top:7px;color:#555a5e;font-size:12px} #mechanicApp .manual-guide-head .eyebrow{color:var(--accent)} #mechanicApp .manual-head-actions{display:flex;align-items:center;gap:8px;flex:none} #mechanicApp .manual-head-actions>a,#mechanicApp .manual-head-actions button{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#4d5256;font-size:10px;font-weight:700;text-decoration:none;cursor:pointer} #mechanicApp .manual-head-actions button{display:flex;align-items:center;gap:13px;background:var(--text);border-color:var(--text);color:#fff} #mechanicApp .manual-head-actions button b{color:#ff8a60} #mechanicApp .manual-path{background:#f0f0ed;color:#5b6063} #mechanicApp .manual-tabs{border-color:var(--line)} #mechanicApp .manual-tab{border-color:var(--line);background:#efefec;color:#5a5f63} #mechanicApp .manual-tab.active{background:#fff;color:var(--text);box-shadow:inset 0 -4px var(--accent)} #mechanicApp .manual-content{background:#fff} #mechanicApp .manual-step-number{background:var(--text);color:#ff8a60} #mechanicApp .layout{display:grid;grid-template-columns:1fr;gap:18px} #mechanicApp .sidebar{position:static;display:grid;grid-template-columns:auto repeat(5,minmax(130px,1fr)) minmax(190px,.8fr);gap:7px;align-items:stretch;padding:8px;border:1px solid var(--line);border-radius:12px;background:#e9e9e5} #mechanicApp .side-title{display:flex;align-items:center;margin:0;padding:0 10px;color:#6b7073;font:600 8px/1 var(--mono);letter-spacing:.08em} #mechanicApp .nav-item{min-width:0;padding:11px;border-radius:8px;background:transparent;color:#5b6064} #mechanicApp .nav-item span,#mechanicApp .nav-item b{display:block} #mechanicApp .nav-item b{color:#85898c;font:500 7px/1 var(--mono)} #mechanicApp .nav-item.active{background:#fff;color:var(--text);box-shadow:0 3px 10px rgba(25,27,29,.07)} #mechanicApp .nav-item.active b{color:var(--accent)} #mechanicApp .side-note{display:grid;align-content:center;margin:0;padding:9px 12px;border:0;border-left:1px solid #d0d1ce;border-radius:0;background:transparent} #mechanicApp .side-note span,#mechanicApp .side-note small{color:#656a6d;font-size:7px} #mechanicApp .side-note strong{margin:3px 0;color:var(--text);font-size:16px} #mechanicApp .content{min-width:0} #mechanicApp .stage{margin-top:8px} #mechanicApp .stage-head{margin:0;padding:30px 0 18px;border-bottom:1px solid var(--line)} #mechanicApp .stage-head h3{margin-top:8px;font-size:clamp(32px,3.5vw,48px)} #mechanicApp .progress-wrap{min-width:260px} #mechanicApp .workflow-command{position:sticky;top:137px;z-index:25;grid-template-columns:1fr auto auto;margin:12px 0;padding:14px 16px;border-radius:11px} #mechanicApp .workflow-next{display:flex;align-items:center;gap:16px;padding:12px 14px;border:0;border-radius:7px;background:var(--accent);color:#fff;font-size:10px;font-weight:750;cursor:pointer} #mechanicApp .workflow-next:disabled{background:#3a3d40;color:#8e9294;cursor:default} #mechanicApp .workflow-filters{margin:14px 0 18px} #mechanicApp .workflow-body{grid-template-columns:minmax(0,1fr) 315px;gap:18px} #mechanicApp .steps{gap:10px} #mechanicApp .step-card{border-radius:12px;box-shadow:none} #mechanicApp .step-card:hover{border-color:#c3c5c3} #mechanicApp .step-card.is-open{border-color:#ff9b76;box-shadow:0 10px 30px rgba(32,34,36,.07)} #mechanicApp .step-top{padding:15px 17px} #mechanicApp .step-number{width:36px;height:36px;border-radius:50%;font:650 10px/1 var(--mono)} #mechanicApp .step-title{font-size:18px} #mechanicApp .step-body{grid-template-columns:150px minmax(0,1fr);padding:18px} #mechanicApp .illustration{min-height:125px;border:0;border-radius:9px;background:#202326} #mechanicApp .detail-grid>div{background:#f5f5f2} #mechanicApp .project-video-library{top:145px} @media(max-width:1100px){ #mechanicApp .topbar{gap:14px} #mechanicApp .brand-sub{display:none} #mechanicApp .workspace-nav button{padding:0 9px} #mechanicApp .workspace-nav-icon{display:inline} #mechanicApp .workspace-nav button>span:last-child{display:none} #mechanicApp .account-button>b{display:none} #mechanicApp .tfo-cols{grid-template-columns:1fr 1fr} #mechanicApp .tfo-panel:last-child{grid-column:1/-1} #mechanicApp .tfo-strip{grid-template-columns:repeat(3,1fr)} #mechanicApp .sidebar{grid-template-columns:repeat(3,1fr)} #mechanicApp .side-title{grid-column:1/-1;padding:7px 5px} #mechanicApp .side-note{border-left:0;border-top:1px solid #d0d1ce} #mechanicApp .workflow-body{grid-template-columns:1fr} #mechanicApp .project-video-library{position:relative;top:auto;grid-row:1} } /* Full-width preflight gate for the seeded Elantra repair. */ #mechanicApp .tools-section{margin:30px 0 20px;padding:0;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--text);box-shadow:0 18px 50px rgba(28,30,31,.08);overflow:hidden} #mechanicApp .tools-head{padding:30px 32px 25px;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;border-bottom:1px solid var(--line);background:#fff} #mechanicApp .tools-head h3{margin-top:9px;font-size:clamp(34px,4vw,52px);letter-spacing:-.055em} #mechanicApp .tools-head p{max-width:760px;margin-top:12px;color:#505559;font-size:14px;line-height:1.65} #mechanicApp .prep-view-switch{display:flex;flex:none;padding:4px;border-radius:9px;background:#ededE9} #mechanicApp .prep-view-switch button{padding:10px 13px;border:0;border-radius:6px;background:transparent;color:#62676a;font-size:10px;font-weight:700;cursor:pointer} #mechanicApp .prep-view-switch button.active{background:#fff;color:var(--text);box-shadow:0 2px 8px rgba(20,22,24,.08)} #mechanicApp .prep-head-actions{display:flex;flex:none;align-items:center;gap:8px} #mechanicApp .prep-collapse{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--text);font-size:10px;font-weight:700;cursor:pointer} #mechanicApp .prep-collapse:hover{border-color:#aaaead;background:#f7f7f4} #mechanicApp .prep-collapse b{color:var(--accent);font-size:14px} #mechanicApp .prep-readiness{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:24px 32px;background:var(--text);color:#fff} #mechanicApp .prep-score{display:grid;width:74px;height:74px;place-items:center;align-content:center;border-radius:50%;background:#292c2f;border:5px solid var(--accent)} #mechanicApp .prep-score span{color:#fff;font:650 20px/1 var(--sig)} #mechanicApp .prep-score small{margin-top:3px;color:#bfc2c4;font-size:6px;text-transform:uppercase} #mechanicApp .prep-readiness strong{display:block;color:#fff;font-size:17px} #mechanicApp .prep-readiness p{margin-top:5px;color:#bfc3c5;font-size:11px} #mechanicApp .prep-gate{padding:10px 13px;border-radius:99px;background:#43231b;color:#ff9974;font:600 9px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase} #mechanicApp .prep-gate.is-ready{background:#173b2b;color:#82d5aa} #mechanicApp .prep-client-intro{display:none;margin:24px 32px 0;padding:18px;border-radius:10px;background:#eef3f5} #mechanicApp .prep-client-intro strong{display:block;color:var(--text);font-size:14px} #mechanicApp .prep-client-intro p{margin-top:6px;color:#50565a;font-size:12px} #mechanicApp .prep-block{margin:0 32px;padding:28px 0;border-bottom:1px solid var(--line)} #mechanicApp .prep-block-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px} #mechanicApp .prep-block-head>div{display:flex;align-items:center;gap:11px} #mechanicApp .prep-block-head span{display:grid;width:28px;height:28px;place-items:center;border-radius:50%;background:#f0f0ed;color:var(--accent);font:650 9px/1 var(--mono)} #mechanicApp .prep-block-head h4{margin:0;color:var(--text);font:650 21px/1 var(--sig);letter-spacing:-.035em} #mechanicApp .prep-block-head>strong,#mechanicApp .tool-total{padding:0;border:0;background:transparent;color:#5a5f62;font:600 9px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em} #mechanicApp .prep-table-head{display:grid;grid-template-columns:1.2fr 1fr 100px;gap:16px;padding:9px 14px;color:#777b7e;font:600 8px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em} #mechanicApp .prep-tool-list{display:grid;grid-template-columns:1fr;gap:0;margin:0} #mechanicApp .prep-tool-row{display:grid;grid-template-columns:1.2fr 1fr 100px;gap:16px;align-items:center;padding:14px;border-top:1px solid #e6e6e3;background:#fff} #mechanicApp .prep-tool-row>div strong,#mechanicApp .prep-tool-row>div small{display:block} #mechanicApp .prep-tool-row>div strong{color:var(--text);font-size:11px} #mechanicApp .prep-tool-row>div small{margin-top:4px;color:#606568;font-size:9px;line-height:1.4} #mechanicApp .prep-tool-row.is-missing{background:#fff9f7} #mechanicApp .prep-status{justify-self:end;padding:7px 9px;border-radius:99px;background:#e7f4ed;color:#21764e;font:650 8px/1 var(--mono);text-transform:uppercase} #mechanicApp .is-missing .prep-status{background:#ffebe5;color:#bd3710} #mechanicApp .prep-parts{border:1px solid var(--line);border-radius:10px;overflow:hidden} #mechanicApp .prep-parts-head{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:16px;padding:11px 16px;background:#f0f0ed;color:#686d70;font:600 8px/1 var(--mono);text-transform:uppercase} #mechanicApp .prep-part-row{position:relative;display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:16px;align-items:center;padding:15px 45px 15px 16px;border-top:1px solid var(--line)} #mechanicApp .prep-part-row:first-of-type{border-top:0} #mechanicApp .prep-part-row div strong,#mechanicApp .prep-part-row div small{display:block} #mechanicApp .prep-part-row div strong{color:var(--text);font-size:11px} #mechanicApp .prep-part-row div small{margin-top:4px;color:#62676a;font-size:9px} #mechanicApp .prep-part-state{display:inline-block!important;width:max-content;margin-bottom:7px;padding:5px 7px;border-radius:99px;background:#edf0f2;color:#52636e!important;font:650 7px/1 var(--mono);text-transform:uppercase} #mechanicApp .prep-part-state.is-required{background:#ffebe5;color:#bd3710!important} #mechanicApp .prep-part-row>a{position:absolute;right:15px;color:var(--accent);font-weight:800;text-decoration:none} #mechanicApp .prep-parts-total{display:grid;grid-template-columns:1fr auto;gap:5px;margin-top:12px;padding:18px;border-radius:10px;background:#f3f3f0} #mechanicApp .prep-parts-total span{color:#51565a;font-size:12px;font-weight:700} #mechanicApp .prep-parts-total strong{color:var(--text);font:650 25px/1 var(--sig)} #mechanicApp .prep-parts-total small{grid-column:1/-1;color:#62676a;font-size:9px} #mechanicApp .prep-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} #mechanicApp .prep-checks label{display:flex;align-items:flex-start;gap:10px;padding:15px;border:1px solid var(--line);border-radius:9px;background:#f8f8f5;color:#464b4e;font-size:11px;line-height:1.5;cursor:pointer} #mechanicApp .prep-checks input{flex:none;width:16px!important;height:16px;margin:0!important;accent-color:var(--accent)} #mechanicApp .tool-note{margin:0;padding:18px 32px;color:#555a5e;font-size:10px;line-height:1.55;background:#f3f3f0} #mechanicApp .tools-section.is-client-view .mechanic-only{display:none!important} #mechanicApp .tools-section.is-client-view .prep-client-intro{display:block} #mechanicApp .tools-section.is-client-view .prep-tool-row{grid-template-columns:1fr auto} #mechanicApp .tools-section.is-client-view .prep-confirm{display:none} #mechanicApp .prep-tool-value{margin-top:7px!important;color:#2f687e!important;font-weight:650} #mechanicApp .prep-equipment-total{display:grid;grid-template-columns:1fr auto;gap:4px;margin-top:14px;padding:16px;border-radius:9px;background:#edf3f5} #mechanicApp .prep-equipment-total span{color:#354b54;font-size:11px;font-weight:700} #mechanicApp .prep-equipment-total strong{color:var(--text);font:650 22px/1 var(--sig)} #mechanicApp .prep-equipment-total small{grid-column:1/-1;color:#56666d;font-size:9px} #mechanicApp .tools-section.is-collapsed{overflow:visible} #mechanicApp .tools-section.is-collapsed .tools-head{padding-top:18px;padding-bottom:18px} #mechanicApp .tools-section.is-collapsed .tools-head h3{font-size:25px} #mechanicApp .tools-section.is-collapsed .tools-head p,#mechanicApp .tools-section.is-collapsed .prep-view-switch{display:none} #mechanicApp .tools-section.is-collapsed #prepBody{display:none} #mechanicApp .prep-dock{position:fixed;z-index:36;right:24px;bottom:24px;display:none;grid-template-columns:1fr auto;gap:4px 18px;align-items:center;min-width:230px;padding:14px 16px;border:1px solid #3b3e41;border-radius:12px;background:#191b1e;color:#fff;box-shadow:0 20px 55px rgba(19,21,23,.28);text-align:left;cursor:pointer} /* The dock used to appear only while the section was collapsed, so opening Job readiness -- the natural move when something is missing -- hid the count of what was missing, and left you scrolling 6,000px with no running total. A blocked job keeps its warning on screen in either state. It still stands down once nothing is outstanding. */ #mechanicApp .tools-section.is-collapsed .prep-dock, #mechanicApp .tools-section .prep-dock.is-blocked{display:grid} /* The dock is the only readiness signal once the panel is collapsed, so it names which of the two states it is in. Colour reinforces the words; the words carry it. */ /* Essential and helpful read differently at a glance, and the essentials that are missing are the only rows allowed to shout. A helpful tool that is not on the shelf is information; an essential one is a stop. */ #mechanicApp .prep-tier{ display:inline-block;margin:0 0 4px;padding:2px 6px;border-radius:3px; font:650 8.5px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase; } #mechanicApp .prep-tier.is-hard{background:#f6e2de;color:#8e2315} #mechanicApp .prep-tier.is-improvise{background:#faf0da;color:#7d5307} #mechanicApp .prep-tier.is-nice{background:#eceae4;color:#63686b} /* The workaround, on the row, in the mechanic's own register. It is the whole point of the middle tier: a missing tool with a known safe substitute is not the same problem as a missing tool without one. */ /* The wordings a single tool answers to. Quiet — it is provenance, there so a mechanic can see why one row covers three lines of the procedure. */ /* The two halves of a parts order: what you can buy today, and what waits for the cover to come off. A band rather than a heading, because it is a divider in a table and it has to read as one. */ /* The order record on a part row. Sits under the prices rather than beside them: the estimate is what you read, this is what you fill in, and putting a text field in a column of figures makes both harder to scan. */ /* The alternative column. Two states that mean opposite things, so they must not look alike: a named brand you can click, or a plain instruction not to. The "buy genuine" case gets no link and no price on purpose -- there is nothing to compare, and offering a figure would invite the comparison the row exists to close. */ #mechanicApp .prep-alt strong{display:block;font:650 14px/1.35 Inter,system-ui,sans-serif} #mechanicApp .prep-alt small{display:block;margin-top:4px;font-size:11.5px;line-height:1.55;color:#7c8185} #mechanicApp .prep-alt a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid rgba(185,59,16,.3)} #mechanicApp .prep-alt a:hover{border-bottom-color:var(--accent-ink)} #mechanicApp .prep-alt em{ font-style:normal;margin-left:6px;font:650 12px/1 var(--mono);color:#5f6467; font-variant-numeric:tabular-nums; } #mechanicApp .prep-alt.is-genuine strong{color:#8e2315} #mechanicApp .prep-alt.is-genuine small{color:#8a5f52} #mechanicApp .prep-part-order{ grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px; margin-top:11px;padding-top:11px;border-top:1px solid var(--line); } #mechanicApp .prep-part-order label{ display:flex;align-items:center;gap:7px; font:600 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#7c8185; } #mechanicApp .prep-ordered{cursor:pointer;color:var(--text)!important} #mechanicApp .prep-ordered input{width:15px;height:15px;accent-color:#27875a;margin:0;cursor:pointer} #mechanicApp .prep-part-order input[type=number], #mechanicApp .prep-part-order input[type=text]{ width:96px;padding:6px 9px;border:1px solid var(--line);border-radius:6px;background:var(--panel); font:500 13px/1 Inter,system-ui,sans-serif;color:var(--text);text-transform:none;letter-spacing:0; } #mechanicApp .prep-part-order input[type=text]{width:132px} #mechanicApp .prep-part-order input:focus{outline:none;border-color:var(--accent)} /* An ordered row goes quiet. It is done; the ones still to buy should be what catches the eye. */ #mechanicApp .prep-part-row.is-ordered{background:#f3f8f5} #mechanicApp .prep-part-row.is-ordered .prep-part-state{background:#e3f1e9;color:#1c6b45} #mechanicApp .prep-parts-actual{ display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--line); font:500 12.5px/1.5 Inter,system-ui,sans-serif;color:#5f6467; } #mechanicApp .prep-parts-actual b{color:#1c6b45;font-weight:650} #mechanicApp .prep-parts-band{ display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; padding:14px 16px 10px;margin-top:6px;border-top:1px solid var(--line); } #mechanicApp .prep-parts-band b{ font:650 12px/1.2 var(--sig);letter-spacing:-.01em;color:var(--text); } #mechanicApp .prep-parts-band em{ font-style:normal;font-size:11.5px;line-height:1.5;color:#7c8185; } #mechanicApp .prep-parts-band.is-hold b{color:#7d5307} #mechanicApp .prep-part-note{ display:block;margin-top:4px;font-size:11.5px;line-height:1.5;color:#7c8185; } #mechanicApp .prep-aka{ display:block;margin-top:3px;font:400 10.5px/1.5 var(--mono);color:#9aa0a3; } #mechanicApp .prep-why{display:block;margin-top:4px;font-size:11.5px;line-height:1.55;color:#5f6467} #mechanicApp .prep-tool-row.is-improvise .prep-why{color:#7d5307} #mechanicApp .prep-tool-row.is-nice.is-missing{opacity:.7} #mechanicApp .prep-tool-row.is-nice.is-missing .prep-status, #mechanicApp .prep-tool-row.is-improvise.is-missing .prep-status{background:#eceae4;color:#63686b} #mechanicApp .prep-tool-row.is-improvise.is-missing .prep-status{background:#faf0da;color:#7d5307} /* Grouping. Three headed blocks rather than forty-one equal rows, so the ones that stop the job are not sitting next to the tape looking the same. */ /* Where the guide's authority actually comes from. Stated on the guide rather than assumed, because a mirror of unknown vintage reads exactly like a manual until a torque figure is wrong. */ #mechanicApp .manual-source{ margin:12px 0 0;max-width:74ch;padding:11px 14px; border-left:3px solid var(--warn);border-radius:0 8px 8px 0;background:#fdf7ea; font-size:12.5px;line-height:1.6;color:#6b5312; } #mechanicApp .manual-source b{color:#563f06} #mechanicApp .manual-source a{color:#8a5a00;font-weight:650} #mechanicApp .prep-group{display:grid;gap:8px;margin-bottom:22px} #mechanicApp .prep-group-head{ display:grid;gap:2px;padding:0 0 9px;border-bottom:1px solid var(--line);margin-bottom:4px; } #mechanicApp .prep-group-head b{ font:650 13px/1.2 var(--sig);letter-spacing:-.01em;color:var(--text); } #mechanicApp .prep-group-head em{ font-style:normal;font:650 10px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#7c8185; } #mechanicApp .prep-group.is-hard .prep-group-head b{color:#8e2315} #mechanicApp .prep-group-head small{font-size:11.5px;line-height:1.5;color:#7c8185} #mechanicApp .prep-dock.is-blocked{border-color:#b52d1c} #mechanicApp .prep-dock.is-blocked strong{color:#ff9d8c} #mechanicApp .prep-dock:not(.is-blocked) strong{color:#7fd6a6} #mechanicApp .prep-dock span{color:#ff8a60;font:600 8px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase} #mechanicApp .prep-dock strong{grid-column:1;color:#fff;font-size:11px} #mechanicApp .prep-dock b{grid-column:2;grid-row:1/3;color:#ff8a60;font-size:18px} /* mechanic-owned sheets live outside #mechanicApp in the DOM */ #addVehicleModal.diagnostic{background:rgba(15,17,19,.74);backdrop-filter:blur(12px)} #addVehicleModal .tfa-sheet{border:0;border-radius:18px;background:#fff;color:#191b1e;box-shadow:0 40px 100px rgba(0,0,0,.34);font-family:Inter,system-ui,sans-serif} #addVehicleModal .tfa-head{border-color:#e1e2df} #addVehicleModal .tfa-eyebrow{color:#ff5a1f;font:600 10px/1 "IBM Plex Mono",monospace} #addVehicleModal .tfa-head h2{color:#191b1e;font:650 36px/1 "Space Grotesk",sans-serif;text-transform:none;letter-spacing:-.04em} #addVehicleModal .tfa-x{border-color:#d6d8d5;border-radius:50%;background:#fff;color:#191b1e} #addVehicleModal label{color:#6d7174;font:600 10px/1 "IBM Plex Mono",monospace;letter-spacing:.07em} #addVehicleModal input,#addVehicleModal select{border:1px solid #d4d6d3!important;border-radius:8px!important;background:#f7f7f5!important;color:#191b1e!important;font-family:Inter,system-ui,sans-serif} #addVehicleModal input:focus,#addVehicleModal select:focus{border-color:#ff5a1f!important;background:#fff!important;box-shadow:0 0 0 3px rgba(255,90,31,.09);outline:none} #addVehicleModal select option{background:#fff;color:#191b1e} #addVehicleModal .tfa-foot{border-color:#e1e2df} #addVehicleModal .btn{border:1px solid #d4d6d3;border-radius:8px;background:#fff;color:#191b1e;font-family:Inter,system-ui,sans-serif;font-weight:700} #addVehicleModal .btn.primary{border-color:#ff5a1f;background:#ff5a1f;color:#fff} /* Structured tool catalog intake and richer inventory cards. */ #mechanicApp .tool-form-card{max-width:900px;border-radius:16px;background:#fff} #mechanicApp .tool-photo-field{padding:18px;border:1px solid var(--line);border-radius:12px;background:#f5f5f2} #mechanicApp .tool-photo-preview{width:190px;border-color:#c5c8c5;border-radius:10px;background:#e8e9e6} #mechanicApp .tool-photo-preview span{color:var(--accent)} #mechanicApp .tool-photo-preview small{color:#555a5e} #mechanicApp .tool-photo-actions{display:flex;flex-wrap:wrap;gap:8px} #mechanicApp .field-help{display:block;margin-top:7px;color:#63686b;font-size:9px;font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none} #mechanicApp .field-help.is-match{color:#21764e} #mechanicApp #toolSizeField.is-optional::after{content:"Optional for this tool type";display:block;margin-top:5px;color:#7b7f82;font-size:8px} #mechanicApp .tool-visible-check{display:flex!important;align-items:flex-start;gap:9px;padding:13px;border:1px solid var(--line);border-radius:9px;background:#f5f5f2;color:#4c5154!important;font-family:Inter,system-ui,sans-serif!important;font-size:11px!important;line-height:1.5;letter-spacing:0!important;text-transform:none!important} #mechanicApp .tool-visible-check input{flex:none;width:16px!important;height:16px;margin:0!important;accent-color:var(--accent)} #mechanicApp .owned-tool-card{border-color:var(--line);border-radius:12px;background:#fff} /* Show the whole tool, not a slice of it. The base rule is aspect-ratio 16/10 with object-fit:cover, which is right for the landscape stock photographs off Commons and wrong for every photo taken on a phone. Bensky's shots of the UV kit are tall: cover filled the box by cropping the top and bottom off, so the flashlight lost its head and the dye bottle lost its label -- the two parts you look at a photo to see. Contain in a taller box instead. A portrait photo now fits whole with a little ground either side, and a landscape one still nearly fills the frame. The ground is the same grey the empty state uses, so the letterbox reads as part of the card rather than as a gap. */ #mechanicApp .owned-tool-photo{background:#e5e7e5;aspect-ratio:4/3;padding:6px} /* min-height:0 is the line that makes this work, and it is not obvious. The box is a grid, and a grid item's default min-height is `auto` -- the automatic minimum size, which for an image is its own intrinsic height. So `height:100%` was being clamped straight back up: a 1932x2576 phone photo stayed 591px tall inside a 341px box, overflowed, and got cut off by the overflow:hidden on the parent. object-fit never came into it, because the image was never actually the size of its box. Both the base rule and the override said height:100% and both were quietly losing. */ #mechanicApp .owned-tool-photo img{min-width:0;min-height:0;width:100%;height:100%;object-fit:contain} #mechanicApp .owned-tool-copy>small{color:var(--accent)} #mechanicApp .owned-tool-copy strong{color:var(--text)} #mechanicApp .owned-tool-identity{display:block;margin-top:4px;color:#565b5f;font-size:9px} #mechanicApp .owned-tool-copy p{color:#555a5e} #mechanicApp .owned-tool-facts{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;padding-top:9px;border-top:1px solid var(--line)} #mechanicApp .owned-tool-facts span,#mechanicApp .owned-tool-facts strong{padding:5px 7px;border-radius:99px;background:#f0f0ed;color:#555a5e;font-size:8px} #mechanicApp .owned-tool-facts strong{background:#fff0ea;color:#b93b10} #mechanicApp .owned-tool-meta{color:#555a5e} @media(max-width:1100px){ #mechanicApp .topbar{align-items:center} #mechanicApp .top-actions{justify-content:flex-end;flex-wrap:nowrap} #mechanicApp .hero,#mechanicApp .hero.mechanic-focus{grid-template-columns:1fr} #mechanicApp .hero>div:first-child{max-width:850px} #mechanicApp .hero-panel.active-vehicle-hero{width:100%} #mechanicApp .mechanic-home-brief{min-height:0} #mechanicApp .mechanic-focus-note{margin-top:28px} #mechanicApp .mechanic-home-brief .hero-actions{grid-template-columns:1fr 1fr} } @media(max-width:760px){ #mechanicApp .topbar{min-height:68px;padding:10px 16px;align-items:center} #mechanicApp .brand-sub{display:none} #mechanicApp .brand-name{font-size:16px} #mechanicApp .top-actions{margin-left:auto;gap:6px;flex-wrap:nowrap;overflow:visible} #mechanicApp .top-actions .btn{flex:none;min-height:40px;padding:9px 11px} #mechanicApp #exitMechanic{display:flex} #mechanicApp #newDiagBtn{margin-left:0} #mechanicApp #newDiagBtn{width:40px;padding:0;font-size:0} #mechanicApp #newDiagBtn>span{font-size:20px} #mechanicApp .workspace-nav{position:fixed;z-index:50;right:0;bottom:0;left:0;height:68px;margin:0;padding:5px 8px max(5px,env(safe-area-inset-bottom));justify-content:space-around;border-top:1px solid var(--line);background:rgba(250,250,247,.97);box-shadow:0 -8px 28px rgba(25,27,29,.08);backdrop-filter:blur(16px)} #mechanicApp .workspace-nav button{display:flex;min-width:58px;height:54px;padding:4px 8px;flex-direction:column;justify-content:center;gap:4px;border-radius:8px;font-size:8px} #mechanicApp .workspace-nav button::after{display:none} #mechanicApp .workspace-nav button>span:last-child{display:block} #mechanicApp .workspace-nav button.active{background:#fff0ea;color:var(--text)} #mechanicApp .workspace-nav-icon{display:block;font-size:15px;line-height:1} #mechanicApp{padding-bottom:72px} #mechanicApp .shell{width:calc(100% - 32px);padding-top:18px} #mechanicApp .hero{padding-top:22px;gap:25px} #mechanicApp .hero h1{font-size:45px} #mechanicApp .hero-copy{font-size:14px} #mechanicApp .hero-actions{display:grid;grid-template-columns:1fr 1fr} #mechanicApp .hero-panel.active-vehicle-hero{min-height:430px} #mechanicApp .mechanic-focus .hero-panel.active-vehicle-hero{min-height:460px} #mechanicApp .mechanic-home-brief{padding:24px} #mechanicApp .mechanic-home-brief h1{font-size:39px} #mechanicApp .mechanic-home-brief .hero-actions{grid-template-columns:1fr} #mechanicApp .wb,#mechanicApp .tfg,#mechanicApp .tfv,#mechanicApp .tfo{width:calc(100% - 32px);padding-top:22px} #mechanicApp .wb-head,#mechanicApp .tfg-head,#mechanicApp .tfo-head{align-items:flex-start} #mechanicApp .tfo-strip{border-radius:10px} #addVehicleModal .tfa-sheet{min-height:100vh;border-radius:0;padding:22px 17px} #mechanicApp .tools-head{padding:22px 18px;align-items:flex-start;flex-direction:column} #mechanicApp .prep-view-switch{width:100%} #mechanicApp .prep-view-switch button{flex:1} #mechanicApp .prep-readiness{grid-template-columns:auto 1fr;padding:20px 18px} #mechanicApp .prep-gate{grid-column:1/-1;justify-self:start} #mechanicApp .prep-block{margin:0 18px} #mechanicApp .prep-table-head{display:none} #mechanicApp .prep-tool-row{grid-template-columns:1fr auto;padding:15px 0} #mechanicApp .prep-tool-row .mechanic-only{grid-column:1/-1} #mechanicApp .prep-parts-head{display:none} #mechanicApp .prep-part-row{grid-template-columns:1fr 1fr;padding:16px 38px 16px 12px} #mechanicApp .prep-part-row>div:first-child{grid-column:1/-1} #mechanicApp .prep-checks{grid-template-columns:1fr} #mechanicApp .tool-note{padding:17px 18px} #mechanicApp .prep-client-intro{margin:18px 18px 0} #mechanicApp .prep-head-actions{width:100%;align-items:stretch;flex-direction:column} #mechanicApp .prep-collapse{justify-content:space-between} #mechanicApp .tools-section.is-collapsed .prep-head-actions{width:auto} #mechanicApp .tools-section.is-collapsed .prep-collapse{min-width:145px} #mechanicApp .prep-dock{right:12px;bottom:12px;left:12px;min-width:0} #mechanicApp #projectSection{padding-top:14px} #mechanicApp .project-head{padding:24px 20px;align-items:flex-start;flex-direction:column} #mechanicApp .project-head h2{font-size:38px} #mechanicApp .project-jump-nav{position:relative;top:auto;margin-bottom:14px;overflow-x:auto} #mechanicApp .project-jump-nav>span{display:none} #mechanicApp .project-jump-nav button{flex:none} #mechanicApp .project-jump-nav button.is-primary{margin-left:0} #mechanicApp .project-summary{grid-template-columns:1fr;padding:21px 18px} #mechanicApp .manual-guide-head{align-items:flex-start;padding:19px;flex-direction:column} #mechanicApp .manual-head-actions{width:100%;display:grid;grid-template-columns:1fr 1fr} #mechanicApp .manual-head-actions>a{text-align:center} #mechanicApp .manual-head-actions button{justify-content:space-between} #mechanicApp .sidebar{display:flex;overflow-x:auto;padding:7px;scroll-snap-type:x mandatory} #mechanicApp .side-title{display:none} #mechanicApp .nav-item{flex:0 0 170px;scroll-snap-align:start} #mechanicApp .side-note{flex:0 0 180px;border-top:0;border-left:1px solid #d0d1ce} #mechanicApp .stage-head{padding-top:20px} #mechanicApp .workflow-command{position:relative;top:auto;grid-template-columns:1fr;margin-top:10px} #mechanicApp .workflow-stats{display:grid;grid-template-columns:repeat(3,1fr)} #mechanicApp .workflow-next{justify-content:space-between} #mechanicApp .step-body{grid-template-columns:1fr;padding:15px} #mechanicApp .tfo>.wb-head{align-items:flex-start} #mechanicApp .tfo-head-actions{width:100%;justify-content:space-between} #mechanicApp .tfo-focus-card{grid-template-columns:1fr;min-height:0;padding:27px 22px} #mechanicApp .tfo-focus-copy h3{font-size:34px} #mechanicApp .tfo-focus-card>button{width:100%} #mechanicApp .tfo-strip{display:grid;grid-template-columns:1fr 1fr;overflow:visible} #mechanicApp .tfo-tile{min-height:100px} #mechanicApp .tfo-cols{grid-template-columns:1fr} #mechanicApp .tfo-panel:last-child{grid-column:auto} #mechanicApp .tfo-menu{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){#mechanicApp *{transition:none!important}} /* --------------------------------------------------------------------------- Contrast repairs styles.css / admin-theme.css are the original dark theme. This file relights #mechanicApp, but a number of *child* selectors over there were never re-inked, so light-on-dark text kept its light color and landed on the new light surfaces — the step tool chips read as blank paper. Everything below is measured at >= 4.5:1 against the surface it actually sits on. --------------------------------------------------------------------------- */ #mechanicApp{--accent-ink:#b93b10} /* Tool chips under each procedure step. Name was #f1f5f8 on #f6f6f3 (1.01:1). */ #mechanicApp .step-tool strong{color:var(--text)} #mechanicApp .step-tool small{color:#5a5f63} /* Job notes */ #mechanicApp .notes-list p{color:#52575b} #mechanicApp .notes-list time{color:var(--accent-ink)} /* Step risk chip */ #mechanicApp .chip.warn{border-color:#e8d3ae;background:#fdf3e3;color:#8a4b06} /* Tools for this job / parts / attachments */ #mechanicApp .job-tool-row.has>span{background:#e3f1e9;color:#1c6b45} #mechanicApp .job-tool-row.missing>span{background:#fbe6e2;color:#b3261e} #mechanicApp .job-tool-row>button, #mechanicApp .work-item>button, #mechanicApp .attachment-grid button{color:#b3261e} /* Manual reader */ #mechanicApp .manual-path b{color:#4a4f52} #mechanicApp .manual-tab span{color:#5a5f63} /* Vehicle detail grid + tool library */ #mechanicApp .detail-grid span{color:var(--accent-ink)} #mechanicApp .owned-tool-photo span{color:#5f6467} /* Overview tiles — the quiet tone was lighter than the tile it sat on */ #mechanicApp .tfo-tile.is-quiet .tfo-n{color:#5f7a70} #mechanicApp .tfo-tile::after{color:#767a7c} #mechanicApp .tfo-dest:hover .tfo-dest-go{color:var(--accent-ink)} #mechanicApp .tf-status[data-tone="bad"]{border-color:#b3261e;color:#b3261e} /* Small orange label type. --accent stays the fill/border brand orange; at 7-11px on a light panel it only reaches 3.1:1, so text uses --accent-ink. */ #mechanicApp .eyebrow, #mechanicApp .manual-guide-head .eyebrow, #mechanicApp .mechanic-focus-note span, #mechanicApp .prep-block-head span, #mechanicApp .owned-tool-copy>small, #mechanicApp .video-library-label, #mechanicApp .video-library-copy>span, #mechanicApp .nav-item.active b, #mechanicApp .prep-part-row>a, #mechanicApp .prep-collapse b, #mechanicApp .choice-preview b, #mechanicApp .tool-photo-preview span, #mechanicApp .workspace-nav-icon, #mechanicApp .back-link:hover, #mechanicApp .tfg-nick{color:var(--accent-ink)} #mechanicApp .step-toggle[aria-expanded="true"]{color:var(--accent-ink)} #addVehicleModal .tfa-eyebrow{color:#b93b10} /* Grey micro-type that sat under 4.5:1 */ #mechanicApp .brand-sub, #mechanicApp .nav-item b, #mechanicApp .wb-field>span, #mechanicApp #toolSizeField.is-optional::after{color:#62676a} #mechanicApp #exitMechanic{color:#5e6266} #mechanicApp .project-jump-nav>span{color:#565b5e} #mechanicApp .tfo-section-label small, #mechanicApp .prep-table-head{color:#63686b} #mechanicApp input::placeholder, #mechanicApp textarea::placeholder{color:#6f7376} /* Dark-theme islands that never got relit. These kept a dark background from styles.css / admin-theme.css while their text had already been re-inked dark by this file, so the label sat black-on-black. */ #mechanicApp .step-quick-meta button.step-video-button{border-color:#e9cdc0;background:#fff1eb;color:var(--accent-ink)} #mechanicApp .video-playlist button>span{background:#fff1eb;color:var(--accent-ink)} #mechanicApp .video-playlist button.active>span{background:#f7ddd1} #mechanicApp .step-entry{border-color:var(--line);background:#f8f8f5} #mechanicApp .repair-step-form label{color:#3f4447} #mechanicApp .video-library-warning{border-left-color:#c78312;background:#fdf3e3;color:#7d4d06} #mechanicApp .video-library-copy>a{color:var(--accent-ink)} #mechanicApp .status-pill.live{background:#e3f1e9;color:#1c6b45} /* Old dark-theme boxes that the relight missed. They kept the 2018-era navy / olive surfaces from styles.css inside the light workspace, and several of them had already had their text re-inked dark elsewhere in this file (.manual-note, .tool-library-entry) — dark ink on a dark box. */ #mechanicApp .manual-reference{border-color:#f0d5c8;border-left-color:var(--accent);background:#fff7f3} #mechanicApp .manual-label,#mechanicApp .manual-link{color:var(--accent-ink)} #mechanicApp .manual-section{color:var(--text)} #mechanicApp .manual-specs-wrap{background:#f4f4f0} #mechanicApp .manual-specs-wrap>span{color:#5a5f63} #mechanicApp .manual-specs{color:var(--text)} #mechanicApp .manual-warning{background:#fdf3e3;color:#7d4d06} #mechanicApp .manual-figure{border-color:var(--line);background:#f6f6f3} #mechanicApp .manual-figure figcaption{color:#4a4f52} #mechanicApp .manual-figure figcaption:before, #mechanicApp .manual-figure figcaption>a{color:var(--accent-ink)} #mechanicApp .tool-library-entry{border-color:var(--line);background:#fff;color:var(--text)} #mechanicApp .tool-entry-icon{background:var(--text);color:#fff} #mechanicApp .tool-library-entry small,#mechanicApp .tool-library-entry>b{color:var(--accent-ink)} #mechanicApp .tool-library-entry em{color:#5a5f63} #mechanicApp .empty-library{border-color:#d5d7d4;color:#5a5f63} #mechanicApp .comparison-column{border-color:var(--line);background:#f6f6f3} #mechanicApp .compare-tool{border-top-color:var(--line)} #mechanicApp .compare-tool span{color:var(--text)} #mechanicApp .compare-add{color:var(--accent-ink)} #mechanicApp .mini-grid div{border-color:var(--line);background:#f6f6f3} #mechanicApp .video-guidance{border-color:var(--line);background:#fff} #mechanicApp .video-guidance-head>div>span{color:var(--accent-ink)} #mechanicApp .video-guidance-head>span{background:#f0f0ed;color:#5a5f63} #mechanicApp .video-caution{border-left-color:#c78312;background:#fdf3e3;color:#7d4d06} /* Progress tracks: dark rails on white cards */ #mechanicApp .progress, #mechanicApp .job-progress>span, #mechanicApp .job-progress-panel>span{background:#e7e7e3} /* PDF placeholder tile still used the old lime-on-navy pair */ #mechanicApp .attachment-document{background:#f0f0ed;color:#5a5f63} /* Leftovers from the pre-orange lime accent in admin-theme.css */ #mechanicApp .progress div, #mechanicApp .job-progress-panel i{background:var(--accent)} #mechanicApp .repair-task-copy>small{color:var(--accent-ink)} #mechanicApp .task-resources a{border-color:var(--line);color:var(--accent-ink)} #mechanicApp .task-reference-image{border-color:var(--line)} /* What is inside a kit. Collapsed, because a 12-line list on every card would bury the cards that are a single tool. */ #mechanicApp .owned-tool-contents{margin:10px 0 0;border-top:1px solid var(--line);padding-top:9px} #mechanicApp .owned-tool-contents>summary{ display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none; color:var(--accent-ink,#b93b10);font:600 10px/1 var(--mono); letter-spacing:.08em;text-transform:uppercase; } #mechanicApp .owned-tool-contents>summary::-webkit-details-marker{display:none} #mechanicApp .owned-tool-contents>summary b{ padding:2px 6px;border-radius:99px;background:#f0f0ed;color:#555a5e;font-size:9px; } #mechanicApp .owned-tool-contents>summary::after{content:"+";margin-left:auto;font-size:13px} #mechanicApp .owned-tool-contents[open]>summary::after{content:"–"} #mechanicApp .owned-tool-contents ul{ margin:10px 0 0;padding-left:16px;display:flex;flex-direction:column;gap:5px; } #mechanicApp .owned-tool-contents li{color:#555a5e;font-size:11px;line-height:1.45} /* --- inventory: the listings desk ---------------------------------------- Rows rather than cards: this is a working list you scan for what needs attention, not a shop window. The storefront gets the cards. */ #mechanicApp .inv-gate{ padding:22px;border:1px dashed #d5d7d4;border-radius:10px;background:#fff; color:#5a5f63;font-size:14px; } #mechanicApp .inv-thresholds{ margin:0 0 14px;padding:16px 18px;border:1px solid var(--hold,#c78312); border-left:5px solid var(--hold,#c78312);border-radius:3px;background:#fdf3e3; } #mechanicApp .inv-thresholds p{margin:0;color:#7d4d06;font-size:13.5px;line-height:1.5} #mechanicApp .inv-thresholds p+p{margin-top:7px} #mechanicApp .inv-list{display:flex;flex-direction:column;gap:10px;margin-top:4px} #mechanicApp .inv-row{ display:grid;grid-template-columns:104px 1fr auto auto;gap:16px;align-items:center; padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:#fff; box-shadow:var(--shadow); } #mechanicApp .inv-shot{ width:104px;aspect-ratio:4/3;border-radius:7px;overflow:hidden;background:#f0f0ed; display:grid;place-items:center; } /* min-width/min-height:0 because .inv-shot is a grid and a grid item cannot shrink below its intrinsic size without them -- the same trap that made the tool photos overflow their frame and get clipped. */ #mechanicApp .inv-shot img{min-width:0;min-height:0;width:100%;height:100%;object-fit:contain} #mechanicApp .inv-shot em{color:#7a7e81;font-style:normal;font-size:10px;text-align:center} #mechanicApp .inv-copy{display:grid;gap:5px;min-width:0} #mechanicApp .inv-name{font:650 17px/1.2 var(--sig);color:var(--text);letter-spacing:-.02em} #mechanicApp .inv-meta{display:flex;flex-wrap:wrap;gap:4px 0;font-family:var(--mono);font-size:11px;color:#5a5f63} #mechanicApp .inv-meta em{font-style:normal} #mechanicApp .inv-meta em+em:before{content:"·";margin:0 7px;opacity:.6} #mechanicApp .inv-flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px} #mechanicApp .inv-flags b{ padding:3px 7px;border-radius:2px;background:#fdf3e3;color:#7d4d06; font:600 9.5px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase; } #mechanicApp .inv-status{ font:600 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase; padding:6px 10px;border-radius:99px;background:#f0f0ed;color:#555a5e;white-space:nowrap; } #mechanicApp .inv-row.is-available .inv-status{background:#e3f1e9;color:#1c6b45} #mechanicApp .inv-row.is-pending .inv-status{background:#fdf3e3;color:#7d4d06} #mechanicApp .inv-row.is-sold .inv-status{background:#edf0f2;color:#52636e} #mechanicApp .inv-actions{display:flex;gap:7px;flex:none} /* The enquiry inbox. Sits above the cars: somebody waiting on an answer outranks a listing that needs another photo. An unanswered one is marked in the signal color, a handled one goes quiet. */ #mechanicApp .inv-asks{display:grid;gap:10px;margin-bottom:22px} #mechanicApp .inv-ask-head-row{display:flex;align-items:center;justify-content:space-between;gap:14px} #mechanicApp .inv-ask-head-row h3{margin:0;font:650 15px/1.2 var(--sig);color:var(--text);letter-spacing:-.02em} #mechanicApp .inv-ask{ display:grid;gap:8px;padding:15px 17px;border:1px solid var(--line); border-left:3px solid #c4552a;border-radius:8px;background:#fff; } #mechanicApp .inv-ask.is-answered{border-left-color:#1c6b45} #mechanicApp .inv-ask.is-closed{border-left-color:#c9ccc8;opacity:.72} #mechanicApp .inv-ask-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px} #mechanicApp .inv-ask-head b{font:650 15px/1.2 var(--sig);color:var(--text);letter-spacing:-.02em} #mechanicApp .inv-ask-head em{ font-style:normal;padding:3px 7px;border-radius:2px;background:#f0f0ed;color:#555a5e; font:600 9.5px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase; } #mechanicApp .inv-ask-head i{font-style:normal;font-family:var(--mono);font-size:11px;color:#5a5f63} #mechanicApp .inv-ask-msg{margin:0;font-size:14px;line-height:1.5;color:var(--text);white-space:pre-wrap} #mechanicApp .inv-ask-contact{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;font-family:var(--mono);font-size:11px} #mechanicApp .inv-ask-contact a{color:#c4552a;font-weight:600;text-decoration:none} #mechanicApp .inv-ask-contact a:hover{text-decoration:underline} #mechanicApp .inv-ask-contact em{font-style:normal;color:#5a5f63} #mechanicApp .inv-ask-actions{display:flex;gap:7px} #mechanicApp .inv-ask.is-closed .inv-ask-actions{display:none} @media(max-width:720px){ #mechanicApp .inv-ask-head-row{flex-direction:column;align-items:flex-start;gap:8px} } #mechanicApp .inv-empty{ padding:34px;text-align:center;border:1px dashed #d5d7d4;border-radius:10px; background:#fff;color:#5a5f63; } #mechanicApp .inv-empty strong{display:block;margin-bottom:5px;color:var(--text);font-size:16px} /* House rules sit under the field they govern, not in a style guide nobody opens. Recessive by default -- it is a reminder, not an instruction. */ #mechanicApp .inv-rule{ display:block;margin-top:7px;max-width:70ch; font:400 11.5px/1.6 Inter,system-ui,sans-serif; color:#7c8185;text-transform:none;letter-spacing:0; } #mechanicApp .inv-rule em{font-style:italic;color:#5e6367} /* The shot list, in the panel where the shooting is decided. Two columns of plain lines: it is a list to work down, not a form to fill in, so nothing here is a checkbox pretending to remember anything. */ /* Three columns at most. auto-fit took it to five on a wide screen, which stops reading as a list you work down and starts reading as scattered labels. */ #mechanicApp .inv-shots{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 26px;margin:0 0 14px;padding:0;list-style:none;max-width:960px; } @media(max-width:900px){ #mechanicApp .inv-shots{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:560px){ #mechanicApp .inv-shots{grid-template-columns:1fr} } #mechanicApp .inv-shots li{ position:relative;padding:3px 0 3px 18px;font-size:13px;line-height:1.5;color:var(--text); } #mechanicApp .inv-shots li:before{ content:"";position:absolute;left:0;top:11px;width:7px;height:7px; border:1.5px solid #c2c5c1;border-radius:2px; } #mechanicApp .inv-shots em{font-style:normal;color:#7c8185;font-size:12px} #mechanicApp .inv-shots em:before{content:"\2014\00a0"} #mechanicApp .inv-doc-warn{ margin-top:9px;padding:11px 13px;border-left:3px solid #b52d1c; border-radius:0 7px 7px 0;background:#fbf1ef;color:#7a3226; } /* Condition items on the desk carry what the public page will show, so the grade and the location are visible while you type them, not only after. */ #mechanicApp .inv-feat-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end} #mechanicApp .inv-feat-form label{ display:grid;gap:5px;min-width:0; font:600 9.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#7c8185; } #mechanicApp .inv-feat-form .ff-item{grid-column:span 2} #mechanicApp .inv-feat-form input,#mechanicApp .inv-feat-form select{ width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:var(--panel); font:500 13px/1.4 Inter,system-ui,sans-serif;color:var(--text);text-transform:none;letter-spacing:0; } #mechanicApp .inv-feat-form .ff-shot{ display:flex;align-items:center;justify-content:center;cursor:pointer;text-align:center; } #mechanicApp .inv-feat-hint{margin:9px 0 0;font-size:12px;line-height:1.5;color:var(--muted)} #mechanicApp .inv-featgroup li{display:flex;align-items:flex-start;gap:10px} #mechanicApp .inv-feat-shot{ width:52px;height:39px;object-fit:cover;border-radius:5px;flex:none; border:1px solid var(--line);background:#eceae4; } #mechanicApp .inv-featgroup li>span{flex:1;min-width:0} #mechanicApp .inv-featgroup li small{display:block;margin-top:2px;font-family:var(--mono);font-size:10.5px;color:#7c8185} #mechanicApp .inv-sev{ display:inline-block;margin-left:7px;padding:2px 6px;border-radius:3px;font-style:normal; font:650 9px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase; } #mechanicApp .inv-sev.is-cosmetic{background:#f0efec;color:#5b6063} #mechanicApp .inv-sev.is-wear{background:#faf0da;color:#7d5307} #mechanicApp .inv-sev.is-needs_work{background:#f9e5e1;color:#8e2315} @media(max-width:760px){ #mechanicApp .inv-feat-form{grid-template-columns:1fr} } /* While the editor is open the list's own context comes down: charts between the heading and the first field are how a form ends up feeling buried. */ #mechanicApp #invBody.is-editing #invTiles, #mechanicApp #invBody.is-editing #invStats, #mechanicApp #invBody.is-editing #invMeters, #mechanicApp #invBody.is-editing #invThresholds, #mechanicApp #invBody.is-editing #invDaysOnLot, #mechanicApp #invBody.is-editing #invEnquiries{display:none} /* The listing editor. It was borrowing .tfa-grid, .tfa-wide and .tfa-foot, which exist only inside #addVehicleModal and #mgAddModal -- so none of them applied here. Twenty-two fields rendered as one unstyled column and the Save button sat unstyled at the bottom of it, which is why it read as having no buttons at all. These are the editor's own styles; nothing here depends on another component's sheet. */ #mechanicApp .inv-form{display:grid;gap:18px} #mechanicApp .inv-fs{margin:0;padding:16px 18px 18px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)} #mechanicApp .inv-fs legend{ padding:0 7px;margin-left:-7px; font:650 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#7c8185; } #mechanicApp .inv-fs legend .inv-optional{ font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:#9aa0a3; } #mechanicApp .inv-fs-note{margin:0 0 12px;font-size:12.5px;line-height:1.5;color:var(--muted)} #mechanicApp .inv-fs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px} #mechanicApp .inv-fs-grid .wide{grid-column:1/-1} #mechanicApp .inv-fs-grid label{ display:grid;gap:6px;min-width:0; font:600 10px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#7c8185; } #mechanicApp .inv-fs-grid label .inv-optional{ font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:#9aa0a3; } #mechanicApp .inv-fs-grid input,#mechanicApp .inv-fs-grid select,#mechanicApp .inv-fs-grid textarea{ width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:var(--panel); font:500 13.5px/1.45 Inter,system-ui,sans-serif;color:var(--text);text-transform:none;letter-spacing:0; } #mechanicApp .inv-fs-grid textarea{min-height:96px;resize:vertical} #mechanicApp .inv-fs-grid input:focus,#mechanicApp .inv-fs-grid select:focus,#mechanicApp .inv-fs-grid textarea:focus{ outline:none;border-color:var(--accent); } #mechanicApp .inv-fs-grid .visibility-check{ display:flex;align-items:center;gap:9px;text-transform:none;letter-spacing:0; font:500 13.5px/1.4 Inter,system-ui,sans-serif;color:var(--text); } #mechanicApp .inv-fs-grid .visibility-check input{width:16px;height:16px;flex:none;accent-color:var(--accent)} /* Sticky, because the panels below the form run for several screens and a Save button you have to go looking for is a Save button people stop finding. */ #mechanicApp .inv-actions{ position:sticky;bottom:0;z-index:4;display:flex;align-items:center;gap:10px; margin:0 -2px;padding:14px 2px; border-top:1px solid var(--line);background:var(--panel); } #mechanicApp .inv-actions-gap{flex:1} #mechanicApp .btn.ghost.is-go{border-color:#bcd8c7;color:#1c6b45} #mechanicApp .btn.ghost.is-go:hover{border-color:#27875a;background:#f1f8f4;color:#186139} #mechanicApp .btn.danger-ghost{ border:1px solid #e6c4bd;background:transparent;color:#a8351f; } #mechanicApp .btn.danger-ghost:hover{border-color:#d9412c;background:#fbf0ee;color:#8f2b18} @media(max-width:1000px){ #mechanicApp .inv-fs-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:600px){ #mechanicApp .inv-fs-grid{grid-template-columns:1fr} #mechanicApp .inv-actions{flex-wrap:wrap} #mechanicApp .inv-actions .btn{flex:1 0 auto} } #mechanicApp .inv-form textarea{min-height:92px;resize:vertical} #mechanicApp .inv-photo-field{margin-top:6px;padding-top:14px;border-top:1px solid var(--line)} #mechanicApp .inv-photo-pick{display:inline-flex;margin:4px 0 12px;cursor:pointer} #mechanicApp .inv-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px} #mechanicApp .inv-thumb{ margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff; } #mechanicApp .inv-thumb.is-cover{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,90,31,.16)} #mechanicApp .inv-thumb.is-pending{opacity:.75;border-style:dashed} #mechanicApp .inv-thumb img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain} #mechanicApp .inv-thumb figcaption{ display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px; font-family:var(--mono);font-size:10px;color:#5a5f63; } #mechanicApp .inv-thumb figcaption b{color:var(--accent-ink,#b93b10)} #mechanicApp .inv-thumb figcaption button{ border:0;background:transparent;color:var(--accent-ink,#b93b10); font:inherit;cursor:pointer;padding:0; } @media(max-width:720px){ #mechanicApp .inv-row{grid-template-columns:72px 1fr;row-gap:10px} #mechanicApp .inv-shot{width:72px} #mechanicApp .inv-status,#mechanicApp .inv-actions{grid-column:2} } /* Four statuses is too many for the three-up stat cards used elsewhere, and a full card each would outweigh the list underneath. Compact chips instead. */ #mechanicApp #invStats{ display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px; grid-template-columns:none; } #mechanicApp #invStats span{ display:inline-flex;align-items:baseline;gap:6px;padding:8px 12px; border:1px solid var(--line);border-radius:99px;background:#fff; font-family:var(--mono);font-size:11px;color:#5a5f63; } #mechanicApp #invStats b{font-size:14px;color:var(--text);font-variant-numeric:tabular-nums} /* --- evidence: documents on a listing ------------------------------------ */ #mechanicApp .inv-doc-panel{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)} #mechanicApp .inv-doc-form{ display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px; align-items:end;margin-bottom:16px; } #mechanicApp .inv-doc-form button{align-self:end} #mechanicApp .inv-docs{display:flex;flex-direction:column;gap:8px} #mechanicApp .inv-doc{ display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center; padding:12px 15px;border:1px solid var(--line);border-radius:8px;background:#f8f8f5; } #mechanicApp .inv-doc.is-public{background:#fff;border-color:#cfe3d7} #mechanicApp .inv-doc-copy{display:grid;gap:3px;min-width:0} #mechanicApp .inv-doc-copy b{font-size:13px;color:var(--text)} #mechanicApp .inv-doc-copy em{ font-style:normal;font-family:var(--mono);font-size:11px;color:#5a5f63; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #mechanicApp .inv-doc-state{ font:600 9.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase; padding:5px 9px;border-radius:99px;background:#edf0f2;color:#52636e;white-space:nowrap; } #mechanicApp .inv-doc.is-public .inv-doc-state{background:#e3f1e9;color:#1c6b45} #mechanicApp .inv-doc-actions{display:flex;gap:10px;flex:none} #mechanicApp .inv-doc-actions button{ border:0;background:transparent;color:var(--accent-ink,#b93b10); font:600 11px/1 var(--mono);cursor:pointer;padding:0; } #mechanicApp .inv-doc-empty{ margin:0;padding:22px;text-align:center;border:1px dashed #d5d7d4;border-radius:8px; background:#fff;color:#5a5f63;font-size:13px; } /* A field that only a licensed dealer needs should not look mandatory. */ #mechanicApp .inv-optional{ font-style:normal;font-family:var(--mono);font-size:9px;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:#7a7e81; } /* --- features and condition ---------------------------------------------- */ #mechanicApp .inv-feat-form{ display:grid;grid-template-columns:1fr 190px auto;gap:12px;align-items:end;margin-bottom:14px; } #mechanicApp .inv-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px} #mechanicApp .inv-featgroup{ padding:13px 15px;border:1px solid var(--line);border-radius:8px;background:#f8f8f5; } #mechanicApp .inv-featgroup.is-issue{background:#fdf3e3;border-color:#e8d3ae} #mechanicApp .inv-featgroup h4{ margin:0 0 8px;font:600 9.5px/1 var(--mono);letter-spacing:.1em; text-transform:uppercase;color:#5a5f63; } #mechanicApp .inv-featgroup.is-issue h4{color:#7d4d06} #mechanicApp .inv-featgroup ul{margin:0;padding:0;list-style:none;display:grid;gap:5px} #mechanicApp .inv-featgroup li{ display:flex;align-items:baseline;justify-content:space-between;gap:8px; font-size:12.5px;color:var(--text); } #mechanicApp .inv-featgroup li button{ border:0;background:transparent;color:#b3261e;font-size:15px;line-height:1; cursor:pointer;padding:0 2px; } @media(max-width:640px){#mechanicApp .inv-feat-form{grid-template-columns:1fr}} /* =========================================================================== Today, as a shop floor. Manila ground, square corners, 2px black rules, hard offset shadows -- the work-order look the shop is named for. Scoped to #overviewSection so the rest of the app does not shift under it. Two columns: the floor on the left (what is on a lift, and what is at the curb under a dashed rule), and on the right the one thing to do next, the four counts, and the readings the projections are waiting on. =========================================================================== */ #mechanicApp #overviewSection{ --ink:#1c1c1a; --manila:#f5f3ef; --fire:#d64500; --dim:#655f57; --rule:#ddd9d2; --flag:#ffd166; --chip:#f6d9cf; background:var(--manila); } #mechanicApp #overviewSection [hidden]{display:none!important} #mechanicApp #overviewSection .tfo-floor{display:grid;gap:18px;margin-top:6px} #mechanicApp #overviewSection .tfo-split{display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:18px;align-items:start} /* --- the bay panel ------------------------------------------------------- */ #mechanicApp #overviewSection .tfo-bay{padding:18px;border:2px solid var(--ink);background:var(--manila)} #mechanicApp #overviewSection .tfo-head-row{display:flex;align-items:baseline; justify-content:space-between;gap:12px;margin-bottom:14px} #mechanicApp #overviewSection .tfo-head-row h3{margin:0;font-size:13px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--ink)} #mechanicApp #overviewSection .tfo-head-row span{font-size:11.5px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--dim)} #mechanicApp #overviewSection .tfo-lifts{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px} #mechanicApp #overviewSection .tfo-lift{display:flex;flex-direction:column;padding:0; text-align:left;font-family:inherit;cursor:pointer;background:#fff; border:2px solid var(--ink);border-radius:0;transition:box-shadow .12s,transform .12s} #mechanicApp #overviewSection .tfo-lift:hover{box-shadow:6px 6px 0 0 var(--ink);transform:translate(-2px,-2px)} #mechanicApp #overviewSection .tfo-lift:focus-visible{outline:none;box-shadow:6px 6px 0 0 var(--fire)} #mechanicApp #overviewSection .tfo-lift-head{display:flex;justify-content:space-between;gap:8px; padding:9px 13px;background:var(--ink);color:var(--manila); font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase} #mechanicApp #overviewSection .tfo-lift-head span:last-child{color:var(--flag)} #mechanicApp #overviewSection .tfo-lift-body{flex:1;display:flex;flex-direction:column; align-items:flex-start;padding:16px 14px 14px} #mechanicApp #overviewSection .tfo-lift-icon{width:34px;height:34px;color:var(--fire);margin-bottom:12px} #mechanicApp #overviewSection .tfo-lift-veh{margin:0;font-size:17px;font-weight:700;line-height:1.2; letter-spacing:-.02em;color:var(--ink)} #mechanicApp #overviewSection .tfo-lift-job{margin:7px 0 0;font-size:13.5px;line-height:1.45;color:#4c4740} #mechanicApp #overviewSection .tfo-lift-meter{display:flex;align-items:center;gap:10px; width:100%;margin:16px 0 12px} #mechanicApp #overviewSection .tfo-lift-meter span{flex:1;height:7px;background:var(--rule);overflow:hidden} #mechanicApp #overviewSection .tfo-lift-meter i{display:block;height:100%;background:var(--fire)} #mechanicApp #overviewSection .tfo-lift-meter em{font-style:normal;font-size:12.5px;font-weight:700; color:var(--ink);font-variant-numeric:tabular-nums} #mechanicApp #overviewSection .tfo-chip{display:inline-block;padding:5px 10px;background:var(--rule); color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase} #mechanicApp #overviewSection .tfo-chip.is-warn{background:var(--chip);color:#8f2f10} #mechanicApp #overviewSection .tfo-lift.is-empty{background:#eceae5;border-color:var(--ink);cursor:default} #mechanicApp #overviewSection .tfo-lift.is-empty .tfo-lift-head{background:var(--ink)} #mechanicApp #overviewSection .tfo-lift.is-empty .tfo-lift-head span:last-child{color:var(--rule)} #mechanicApp #overviewSection .tfo-lift.is-empty .tfo-lift-icon{color:#9d988e} #mechanicApp #overviewSection .tfo-lift.is-empty .tfo-lift-meter em{color:var(--dim);font-weight:600} /* --- the curb, inside the panel under a dashed rule ---------------------- */ #mechanicApp #overviewSection .tfo-curb{margin-top:16px;padding-top:15px;border-top:2px dashed #c8c4bc} #mechanicApp #overviewSection .tfo-curb-line{display:flex;align-items:center; justify-content:space-between;gap:16px;flex-wrap:wrap} #mechanicApp #overviewSection .tfo-curb-title{margin:0;font-size:13px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--ink)} #mechanicApp #overviewSection .tfo-curb-veh{margin:5px 0 0;font-size:14px;color:#4c4740} #mechanicApp #overviewSection .tfo-curb-veh em{font-style:normal;color:var(--dim);font-size:12.5px} #mechanicApp #overviewSection .tfo-btn{font-family:inherit;cursor:pointer;border:2px solid var(--ink); background:transparent;color:var(--ink);padding:11px 18px;border-radius:0; font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap} #mechanicApp #overviewSection .tfo-btn:hover{background:var(--ink);color:var(--manila)} /* --- the side column ----------------------------------------------------- */ #mechanicApp #overviewSection .tfo-side{display:grid;gap:16px} #mechanicApp #overviewSection .tfo-focus-card{background:var(--flag);border:2px solid var(--ink); border-radius:0;box-shadow:none;min-height:0;padding:22px;display:block;color:var(--ink)} #mechanicApp #overviewSection .tfo-focus-card::after{display:none} #mechanicApp #overviewSection .tfo-focus-copy>span{color:var(--ink);font-size:11.5px;font-weight:700; letter-spacing:.16em;text-transform:uppercase} #mechanicApp #overviewSection .tfo-focus-copy h3{margin:14px 0 0;color:var(--ink); font-size:26px;line-height:29px;font-weight:700;letter-spacing:-.025em} #mechanicApp #overviewSection .tfo-focus-copy p{margin:10px 0 0;color:#4a4436;font-size:14px;line-height:20px} #mechanicApp #overviewSection .tfo-focus-copy small{color:#6b6350} #mechanicApp #overviewSection .tfo-focus-card>button{width:100%;margin-top:18px;justify-content:center; border:0;border-radius:0;background:var(--ink);color:var(--manila);padding:13px 14px; font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} #mechanicApp #overviewSection .tfo-focus-card>button b{display:none} #mechanicApp #overviewSection .tfo-focus-card>button:hover{background:var(--fire)} /* four counts, always four: a missing tile reads as a missing measurement */ #mechanicApp #overviewSection .tfo-grid{display:grid;grid-template-columns:1fr 1fr; border:2px solid var(--ink);background:var(--ink);gap:2px} #mechanicApp #overviewSection .tfo-stat{display:block;padding:16px 16px 14px;background:var(--manila); border:0;border-radius:0;font-family:inherit;cursor:pointer;text-align:left} #mechanicApp #overviewSection .tfo-stat:hover{background:#fff} #mechanicApp #overviewSection .tfo-stat span:last-child{display:block;margin-top:6px;font-size:11px; font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)} #mechanicApp #overviewSection .tfo-stat-n{font-size:30px;font-weight:700;line-height:1; color:var(--ink);font-variant-numeric:tabular-nums} #mechanicApp #overviewSection .tfo-stat.is-live .tfo-stat-n{color:var(--fire)} /* --- panels that keep their shape --------------------------------------- */ #mechanicApp #overviewSection .tfo-panel{background:var(--manila);border:2px solid var(--ink);border-radius:0} #mechanicApp #overviewSection .tfo-panel h3{border-bottom:1px solid var(--rule);font-size:13px; font-weight:700;letter-spacing:.13em;text-transform:uppercase} #mechanicApp #overviewSection .tfo-row, #mechanicApp #overviewSection .tfo-odo-row{border-radius:0} #mechanicApp #overviewSection .tfo-odo-row button, #mechanicApp #overviewSection .tfo-panel button.btn{border-radius:0;background:var(--ink);color:var(--manila); border:2px solid var(--ink);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} #mechanicApp #overviewSection .tfo-odo-row input{border-radius:0;border:2px solid var(--ink);background:#fff} /* --- the shortcut row ---------------------------------------------------- */ #mechanicApp #overviewSection .tfo-menu{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px} #mechanicApp #overviewSection .tfo-dest{border:2px solid var(--ink);border-radius:0; background:var(--manila);padding:15px 16px} #mechanicApp #overviewSection .tfo-dest:hover{background:#fff;box-shadow:4px 4px 0 0 var(--ink); transform:translate(-1px,-1px)} #mechanicApp #overviewSection .tfo-dest strong{font-size:14.5px;font-weight:700;color:var(--ink)} #mechanicApp #overviewSection .tfo-dest-detail{font-size:12.5px;color:var(--dim)} #mechanicApp #overviewSection .tfo-dest-n{color:var(--fire);font-weight:700;font-size:15px} #mechanicApp #overviewSection .tfo-dest-go{display:none} #mechanicApp #overviewSection .tfo-menu-title{font-size:13px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--ink)} @media(max-width:900px){ #mechanicApp #overviewSection .tfo-split{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ #mechanicApp #overviewSection .tfo-lift, #mechanicApp #overviewSection .tfo-dest{transition:none} #mechanicApp #overviewSection .tfo-lift:hover, #mechanicApp #overviewSection .tfo-dest:hover{transform:none} } /* The design carries the day in the top bar and lets the nav pill say which tab you are on, so Today's own title block -- a second "Today", an intro line, a date chip and a duplicate New diagnostic -- is chrome repeating what the bar above it already said. */ #mechanicApp #overviewSection>.wb-head{display:block;padding:0;margin:0 0 14px;border:0} #mechanicApp #overviewSection>.wb-head>div:first-child{display:none} #mechanicApp #overviewSection>.wb-head .tfo-head-actions{justify-content:flex-start} #mechanicApp #overviewSection>.wb-head .btn.primary{display:none} #mechanicApp #overviewSection #overviewStamp{border:0;background:none;padding:0} #mechanicApp #overviewSection #overviewStamp span{font-size:12px;font-weight:600; letter-spacing:.09em;text-transform:uppercase;color:var(--dim)} /* the nav says which tab you are on, as a pill rather than an underline */ #mechanicApp .topbar nav button.active, #mechanicApp .topbar button.active{background:var(--ink,#1c1c1a);color:#f5f3ef;border-radius:6px} #mechanicApp .topbar button.active::after{display:none} /* --- the shortcut row ---------------------------------------------------- */ #mechanicApp #overviewSection .tfo-dest{display:grid; grid-template-columns:auto minmax(0,1fr);gap:4px 11px;align-items:start} #mechanicApp #overviewSection .tfo-dest-icon{grid-row:1/3;width:19px;height:19px; color:var(--dim);margin-top:2px} #mechanicApp #overviewSection .tfo-dest-top{display:flex;align-items:baseline; justify-content:space-between;gap:10px} /* --- work coming in ------------------------------------------------------ */ #mechanicApp #overviewSection .tf-viz-host{border:0;background:#e6e3dd;padding:15px 18px; border-radius:0;color:#4c4740;font-size:13.5px} #mechanicApp #overviewSection .tf-viz-host:empty::before{content:"Work coming in \2014 nothing yet. Requests chart here once the first ones arrive."} /* =========================================================================== The board, to the design. Softer than Today on purpose -- that page is drawn square and heavy, these are drawn rounded with hairline rules. Both are in the same warm family; the board is the one you stand in front of all day, so it is quieter. =========================================================================== */ #mechanicApp #boardSection{ --b-ink:#14120f; --b-dim:#655f57; --b-dim2:#5b554c; --b-fire:#e8500f; --b-fire-dark:#bd3f0a; --b-line:#efece6; --b-rule:#e4e1da; --b-soft:#faf9f6; } #mechanicApp #boardSection .wb-head{align-items:flex-start} /* counts that are also filters */ #mechanicApp #boardSection .wb-stats{display:flex;flex-wrap:wrap;gap:8px} #mechanicApp #boardSection .wb-chip{display:flex;align-items:center;gap:7px;cursor:pointer; border:1px solid var(--b-rule);background:#fff;color:var(--b-dim);border-radius:9999px; padding:8px 14px;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase} #mechanicApp #boardSection .wb-chip b{font-weight:700;color:var(--b-ink);font-variant-numeric:tabular-nums} #mechanicApp #boardSection .wb-chip:hover{border-color:#b8b1a6} #mechanicApp #boardSection .wb-chip.is-on{background:var(--b-ink);border-color:var(--b-ink);color:#faf9f6} #mechanicApp #boardSection .wb-chip.is-on b{color:#fff} /* columns */ #mechanicApp #boardSection .wb-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;align-items:start} #mechanicApp #boardSection .wb-col{display:flex;flex-direction:column;gap:10px;min-height:220px; background:transparent;border:0;padding:0} #mechanicApp #boardSection .wb-col-head{display:flex;align-items:center;gap:8px;padding:4px 6px 0} #mechanicApp #boardSection .wb-dot{width:8px;height:8px;border-radius:9999px;flex:0 0 auto} #mechanicApp #boardSection .wb-col-head strong{flex:1;min-width:0;font:700 11px/1 var(--mono); letter-spacing:.14em;text-transform:uppercase;color:#3b352d} #mechanicApp #boardSection .wb-col-head span{font-size:12px;font-weight:700;color:var(--b-dim); font-variant-numeric:tabular-nums} /* cards */ #mechanicApp #boardSection .wb-card{background:#fff;border:1px solid var(--b-rule);border-radius:10px; overflow:hidden;box-shadow:0 1px 2px rgba(20,18,15,.04)} #mechanicApp #boardSection .wb-card.is-unassigned{border-color:#e7cdbd} #mechanicApp #boardSection .wb-open{display:block;width:100%;text-align:left;background:none;border:0; padding:16px;cursor:pointer;font-family:inherit} #mechanicApp #boardSection .wb-veh{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em; color:var(--b-ink)} #mechanicApp #boardSection .wb-sub{display:block;margin-top:3px;font-size:13px;line-height:18px; color:var(--b-dim)} #mechanicApp #boardSection .wb-code{display:inline-block;margin-top:9px;padding:3px 8px;border-radius:9999px; background:#f1f0ed;color:var(--b-dim2);font:600 11px/1 var(--mono);letter-spacing:.05em} #mechanicApp #boardSection .wb-meter{display:flex;align-items:center;gap:10px;margin-top:12px} #mechanicApp #boardSection .wb-bar{flex:1;height:5px;border-radius:9999px;background:#eeece6;overflow:hidden} #mechanicApp #boardSection .wb-bar i{display:block;height:100%;border-radius:9999px;background:var(--b-fire)} #mechanicApp #boardSection .wb-pct{font-style:normal;font:500 11px/1 var(--mono);color:var(--b-dim); font-variant-numeric:tabular-nums;white-space:nowrap} #mechanicApp #boardSection .wb-next{display:block;margin-top:10px;font-size:13px;line-height:19px; color:#3b352d} /* stage + mechanic, on the card */ #mechanicApp #boardSection .wb-controls{display:grid;gap:10px;padding:14px 16px; border-top:1px solid var(--b-line);background:var(--b-soft)} #mechanicApp #boardSection .wb-field span{display:block;margin-bottom:5px;font:600 10px/1 var(--mono); letter-spacing:.11em;text-transform:uppercase;color:var(--b-dim)} #mechanicApp #boardSection .wb-field select{width:100%;padding:8px 10px;border-radius:7px; border:1px solid var(--b-rule);background:#fff;color:var(--b-ink);font-family:inherit;font-size:13px} #mechanicApp #boardSection .wb-field select:focus{outline:none;border-color:var(--b-fire)} #mechanicApp #boardSection .wb-openlink{justify-self:start;background:none;border:0;padding:0; color:var(--b-fire-dark);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer} #mechanicApp #boardSection .wb-openlink:hover{text-decoration:underline} /* who has it -- one click to take, one to drop */ #mechanicApp #boardSection .wb-claim{display:flex;align-items:center;gap:10px;padding:10px 12px; border-top:1px solid var(--b-line);background:#fef4ee} #mechanicApp #boardSection .wb-claim>span:nth-child(2){flex:1;min-width:0;font-size:13px;line-height:18px; color:#8a3b12} #mechanicApp #boardSection .wb-claim-icon{display:grid;place-items:center;width:20px;height:20px; border-radius:9999px;background:var(--b-fire);color:#fff;font-size:14px;font-weight:700;line-height:1} #mechanicApp #boardSection .wb-claim button{cursor:pointer;border:0;border-radius:7px; background:var(--b-fire-dark);color:#fff;font-family:inherit;font-size:12px;font-weight:700;padding:7px 12px} #mechanicApp #boardSection .wb-claim button:hover{background:#8f2f07} #mechanicApp #boardSection .wb-claim.is-mine{background:#f4f7f4} #mechanicApp #boardSection .wb-claim.is-mine>span:nth-child(2){color:#2f5c3f} #mechanicApp #boardSection .wb-claim.is-mine button{background:transparent;color:var(--b-dim); border:1px solid var(--b-rule)} #mechanicApp #boardSection .wb-claim.is-mine button:hover{background:#fff;color:var(--b-ink)} #mechanicApp #boardSection .wb-avatar{display:grid;place-items:center;width:22px;height:22px; border-radius:9999px;background:#2f7d55;color:#fff;font:700 10px/1 var(--mono)} #mechanicApp #boardSection .wb-empty{margin:0;padding:18px 14px;border:1px dashed var(--b-rule); border-radius:10px;background:transparent;font-size:13px;line-height:19px;color:#8a827a;text-align:center} /* =========================================================================== The soft pages: Garage, the vehicle record, Tools, Inventory. All four are drawn from one vocabulary, so it is defined once here rather than three times: white cards on warm paper, hairline #e4e1da rules, 11-12px corners, a 28px figure over a 10px mono label, and state chips that carry colour rather than borders. Today and the board keep their own scopes -- Today square and heavy, the board in between. =========================================================================== */ #mechanicApp #garageSection, #mechanicApp #vehicleSection, #mechanicApp #toolLibrarySection, #mechanicApp #inventorySection{ --s-ink:#14120f; --s-dim:#655f57; --s-dim2:#5b554c; --s-faint:#8a827a; --s-fire:#e8500f; --s-fire-dark:#bd3f0a; --s-rule:#e4e1da; --s-line:#efece6; --s-paper:#faf9f6; } /* cards and panels */ #mechanicApp #garageSection .tfg-card, #mechanicApp #toolLibrarySection .owned-tool, #mechanicApp #inventorySection .inv-card, #mechanicApp #inventorySection .listing-card, #mechanicApp #toolLibrarySection .workspace-card, #mechanicApp #inventorySection .workspace-card, #mechanicApp #garageSection .workspace-card, #mechanicApp #vehicleSection .workspace-card{ background:#fff;border:1px solid var(--s-rule);border-radius:12px;box-shadow:none} /* the figure-over-label a KPI is made of */ #mechanicApp #toolLibrarySection .summary-card, #mechanicApp #inventorySection .summary-card, #mechanicApp #toolLibrarySection .tf-kpi, #mechanicApp #inventorySection .tf-kpi{ background:#fff;border:1px solid var(--s-rule);border-radius:11px;padding:16px 18px;box-shadow:none} #mechanicApp #toolLibrarySection .summary-card strong, #mechanicApp #inventorySection .summary-card strong, #mechanicApp #toolLibrarySection .summary-card b, #mechanicApp #inventorySection .summary-card b{ font-size:28px;line-height:30px;font-weight:700;letter-spacing:-.02em; font-variant-numeric:tabular-nums;color:var(--s-ink)} #mechanicApp #toolLibrarySection .summary-card small, #mechanicApp #inventorySection .summary-card small, #mechanicApp #toolLibrarySection .summary-card span, #mechanicApp #inventorySection .summary-card span{ font:600 10px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--s-dim)} /* state chips: colour carries the state, not a border */ #mechanicApp .s-chip{display:inline-block;padding:4px 9px;border-radius:6px; font:700 10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase} #mechanicApp .s-chip.is-ready{background:#eaf3ed;color:#2f5c3f} #mechanicApp .s-chip.is-due{background:#fdf3e2;color:#8a5a06} #mechanicApp .s-chip.is-out{background:#f1f0ed;color:#5b554c} #mechanicApp .s-chip.is-alert{background:#fdeee6;color:#8a3b12} /* quiet outline button, the one these pages use for every row action */ #mechanicApp .s-btn{font-family:inherit;cursor:pointer;border:1px solid #ddd9d1;border-radius:8px; background:#fff;color:var(--s-ink);font-size:12px;font-weight:600;padding:8px 13px} #mechanicApp .s-btn:hover{border-color:var(--s-ink)} /* tables */ #mechanicApp #toolLibrarySection table th, #mechanicApp #inventorySection table th{ text-align:left;padding:11px 12px;background:var(--s-paper);border-bottom:1px solid var(--s-rule); font:600 10px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--s-dim)} #mechanicApp #toolLibrarySection table td, #mechanicApp #inventorySection table td{ padding:12px;border-bottom:1px solid var(--s-line);font-size:13px;color:var(--s-ink)} /* section heads */ #mechanicApp #garageSection .section-heading h2, #mechanicApp #toolLibrarySection .section-heading h2, #mechanicApp #inventorySection .section-heading h2{letter-spacing:-.02em} #mechanicApp #garageSection .section-heading p, #mechanicApp #toolLibrarySection .section-heading p, #mechanicApp #inventorySection .section-heading p{font-size:13px;line-height:19px;color:var(--s-dim2)} /* --- Garage cards -------------------------------------------------------- */ #mechanicApp #garageSection .tfg-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} #mechanicApp #garageSection .tfg-shot{position:relative;border-radius:12px 12px 0 0;overflow:hidden} #mechanicApp #garageSection .tfg-state{position:absolute;left:10px;bottom:10px} #mechanicApp #garageSection .tfg-slot{position:absolute;right:10px;top:10px;padding:3px 7px; border-radius:5px;background:rgb(20 18 15/.78);color:#fff; font:600 9px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase} #mechanicApp #garageSection .tfg-name{margin:0;font-size:17px;line-height:22px;font-weight:700; letter-spacing:-.01em;color:var(--s-ink)} #mechanicApp #garageSection .tfg-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px} #mechanicApp #garageSection .tfg-facts p:first-child{margin:0;font:600 10px/1.4 var(--mono); letter-spacing:.13em;text-transform:uppercase;color:var(--s-dim)} #mechanicApp #garageSection .tfg-facts p:last-child{margin:3px 0 0;font-size:14px;line-height:19px; font-weight:600;color:var(--s-ink)} #mechanicApp #garageSection .tfg-due{margin:12px 0 0;font-size:13px;line-height:19px;color:var(--s-dim2)} #mechanicApp #garageSection .tfg-due.is-late{color:#a4331f} /* --- Tools: what needs looking at ---------------------------------------- */ #mechanicApp .tool-attention{background:#fff;border:1px solid var(--s-rule,#e4e1da); border-radius:12px;padding:18px 20px;margin-bottom:16px} #mechanicApp .ta-head{display:flex;align-items:center;gap:10px} #mechanicApp .ta-head h3{margin:0;font-size:14px;line-height:20px;font-weight:700;color:#14120f} #mechanicApp .ta-count{display:grid;place-items:center;min-width:22px;height:22px;padding:0 7px; border-radius:9999px;background:#fdeee6;color:#8a3b12;font:700 12px/1 var(--mono); font-variant-numeric:tabular-nums} #mechanicApp .ta-sub{margin:5px 0 14px;font-size:13px;line-height:19px;color:#5b554c} #mechanicApp .ta-none{margin:8px 0 0;font-size:13px;line-height:19px;color:#655f57} #mechanicApp .ta-rows{display:grid;gap:9px} #mechanicApp .ta-row{display:flex;align-items:center;gap:12px;padding:12px 14px; border:1px solid #efece6;border-radius:10px;background:#faf9f6} #mechanicApp .ta-row>div{flex:1;min-width:0} #mechanicApp .ta-name{margin:0;font-size:14px;line-height:19px;font-weight:600;color:#14120f} #mechanicApp .ta-note{margin:3px 0 0;font-size:12px;line-height:17px;color:#655f57} @media(max-width:560px){ #mechanicApp .ta-row{flex-wrap:wrap} #mechanicApp .ta-row>div{flex:1 1 100%} } /* --- Inventory: the money side of a lot ---------------------------------- */ #mechanicApp .inv-money{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;margin-bottom:16px} #mechanicApp .inv-money-card{background:#fff;border:1px solid var(--s-rule,#e4e1da); border-radius:11px;padding:14px 16px} #mechanicApp .inv-money-label{margin:0;font:600 9px/1.4 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:#655f57} #mechanicApp .inv-money-value{margin:6px 0 0;font-size:24px;line-height:28px;font-weight:700; letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#14120f} #mechanicApp .inv-money-value.is-down{color:#a4331f} #mechanicApp .inv-money-note{margin:5px 0 0;font-size:12px;line-height:17px;color:#655f57} #mechanicApp .inv-money-empty{margin-bottom:16px;padding:16px 18px;border:1px dashed #ddd9d1; border-radius:11px;font-size:13px;line-height:19px;color:#655f57} #mechanicApp .inv-aged{background:#fff;border:1px solid var(--s-rule,#e4e1da);border-radius:12px; padding:20px;margin-bottom:16px} #mechanicApp .inv-aged h3{margin:0;font-size:14px;line-height:20px;font-weight:700;color:#14120f} #mechanicApp .inv-aged-sub{margin:5px 0 16px;font-size:13px;line-height:19px;color:#5b554c} #mechanicApp .inv-aged-row{display:flex;align-items:center;gap:12px;padding:11px 0; border-top:1px solid #efece6} #mechanicApp .inv-aged-row>div{flex:1;min-width:0} #mechanicApp .inv-aged-name{margin:0;font-size:14px;line-height:19px;font-weight:600;color:#14120f} #mechanicApp .inv-aged-sub2{margin:2px 0 0;font-size:12px;line-height:17px;color:#655f57} /* --- Garage card facts --------------------------------------------------- */ #mechanicApp #garageSection .tfg-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px} #mechanicApp #garageSection .tfg-facts>span{display:block;min-width:0} #mechanicApp #garageSection .tfg-k{display:block;font:600 10px/1.4 var(--mono);letter-spacing:.13em; text-transform:uppercase;color:#655f57} #mechanicApp #garageSection .tfg-v{display:block;margin-top:3px;font-size:14px;line-height:19px; font-weight:600;color:#14120f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #mechanicApp #garageSection .tfg-v.is-quiet{color:#8a827a;font-weight:500} #mechanicApp #garageSection .tfg-due{display:block;margin-top:12px;font-size:13px;line-height:19px; color:#5b554c} #mechanicApp #garageSection .tfg-due.is-late{color:#a4331f;font-weight:600} /* --- Inventory: the sales desk ------------------------------------------- */ #mechanicApp .inv-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px;margin-bottom:16px} #mechanicApp .inv-kpi{background:#fff;border:1px solid var(--s-rule,#e4e1da);border-radius:11px; padding:16px 18px} #mechanicApp .inv-kpi-label{margin:0;font:600 9px/1.4 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:#655f57} #mechanicApp .inv-kpi-value{margin:8px 0 0;font-size:28px;line-height:30px;font-weight:700; letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#14120f} #mechanicApp .inv-kpi-value.is-good{color:#2f7d55} #mechanicApp .inv-kpi-value.is-down{color:#a4331f} #mechanicApp .inv-kpi-note{margin:6px 0 0;font-size:12px;line-height:17px;color:#655f57} #mechanicApp .inv-panel{background:#fff;border:1px solid var(--s-rule,#e4e1da);border-radius:12px; padding:20px;margin-bottom:16px} #mechanicApp .inv-panel h3{margin:0;font-size:14px;line-height:20px;font-weight:700;color:#14120f} #mechanicApp .inv-panel-sub{margin:5px 0 16px;font-size:13px;line-height:19px;color:#5b554c} #mechanicApp .inv-row{display:flex;align-items:center;gap:12px;padding:12px 0; border-top:1px solid #efece6} #mechanicApp .inv-row>div{flex:1;min-width:0} #mechanicApp .inv-row-name{margin:0;font-size:14px;line-height:19px;font-weight:600;color:#14120f} #mechanicApp .inv-row-note{margin:3px 0 0;font-size:12px;line-height:17px;color:#655f57} #mechanicApp .inv-aged-row{display:flex;align-items:center;gap:14px;padding:11px 0; border-top:1px solid #efece6} #mechanicApp .inv-aged-id{flex:0 0 34%;min-width:0} #mechanicApp .inv-bar{flex:1;height:8px;border-radius:9999px;background:#eeece6;overflow:hidden} #mechanicApp .inv-bar i{display:block;height:100%;border-radius:9999px;background:#bd3f0a} #mechanicApp .inv-bar.is-warn i{background:#c98a1e} #mechanicApp .inv-bar.is-late i{background:#a4331f} #mechanicApp .inv-bar.is-sold i{background:#c8c4bc} #mechanicApp .inv-days{font-style:normal;flex:0 0 auto;min-width:44px;text-align:right; font:600 12px/1 var(--mono);color:#655f57;font-variant-numeric:tabular-nums} #mechanicApp .inv-days.is-late{color:#a4331f} #mechanicApp .inv-days.is-warn{color:#8a5a06} @media(max-width:620px){ #mechanicApp .inv-aged-id{flex:1 1 100%} #mechanicApp .inv-aged-row{flex-wrap:wrap} } /* --- Tools: the table the design uses ------------------------------------ */ #mechanicApp .owned-tools-grid.is-table{display:block} #mechanicApp .tool-table{width:100%;border-collapse:collapse;background:#fff; border:1px solid var(--s-rule,#e4e1da);border-radius:12px;overflow:hidden} #mechanicApp .tool-table th{text-align:left;padding:11px 12px;background:#faf9f6; border-bottom:1px solid var(--s-rule,#e4e1da);font:600 10px/1.4 var(--mono); letter-spacing:.13em;text-transform:uppercase;color:#655f57;white-space:nowrap} #mechanicApp .tool-table td{padding:10px 12px;border-bottom:1px solid #efece6; font-size:13px;line-height:18px;color:#14120f;vertical-align:middle} #mechanicApp .tool-table tr:last-child td{border-bottom:0} #mechanicApp .tool-table tbody tr:hover{background:#faf9f6} #mechanicApp .tt-name{display:flex;align-items:center;gap:10px;min-width:0} #mechanicApp .tt-name img{width:34px;height:34px;object-fit:cover;border-radius:7px; border:1px solid #efece6;flex:0 0 auto} #mechanicApp .tt-noshot{width:34px;height:34px;border-radius:7px;background:#f1f0ed; border:1px solid #efece6;flex:0 0 auto} #mechanicApp .tt-name strong{display:block;font-weight:600} #mechanicApp .tt-name em{display:block;font-style:normal;font-size:11.5px;color:#8a827a;margin-top:1px} #mechanicApp .tt-num{font-variant-numeric:tabular-nums;white-space:nowrap} @media(max-width:760px){ #mechanicApp .tool-table thead{display:none} #mechanicApp .tool-table tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px; padding:10px 12px;border-bottom:1px solid #efece6} #mechanicApp .tool-table td{border:0;padding:0} #mechanicApp .tool-table .tt-name{grid-column:1/-1;margin-bottom:4px} } /* --- Inventory: the sales desk rail -------------------------------------- */ #mechanicApp .inv-desk-split{display:grid;grid-template-columns:230px minmax(0,1fr); gap:20px;align-items:start} #mechanicApp .inv-desk{position:sticky;top:92px;display:grid;gap:14px} #mechanicApp .desk-label{margin:0;font:600 9px/1.4 var(--mono);letter-spacing:.16em; text-transform:uppercase;color:#8a827a} #mechanicApp .desk-nav{display:grid;gap:2px} #mechanicApp .desk-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px; border:0;border-radius:8px;background:transparent;color:#14120f;font-family:inherit; font-size:13.5px;font-weight:500;cursor:pointer;text-align:left} #mechanicApp .desk-item svg{width:17px;height:17px;color:#8a827a;flex:0 0 auto} #mechanicApp .desk-item span{flex:1;min-width:0} #mechanicApp .desk-item em{font-style:normal;font:600 12px/1 var(--mono);color:#8a827a; font-variant-numeric:tabular-nums} #mechanicApp .desk-item:hover{background:#f1f0ed} #mechanicApp .desk-item.is-on{background:#14120f;color:#faf9f6;font-weight:600} #mechanicApp .desk-item.is-on svg,#mechanicApp .desk-item.is-on em{color:#c8c4bc} #mechanicApp .desk-money{border:1px solid var(--s-rule,#e4e1da);border-radius:11px; background:#fff;padding:14px 16px} #mechanicApp .desk-money-label{margin:0;font:600 9px/1.4 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:#655f57} #mechanicApp .desk-money-label.is-second{margin-top:14px;padding-top:14px; border-top:1px solid #efece6} #mechanicApp .desk-money-value{margin:6px 0 0;font-size:22px;line-height:26px;font-weight:700; letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#14120f} #mechanicApp .desk-money-value.is-good{color:#2f7d55} #mechanicApp .desk-money-note{margin:5px 0 0;font-size:12px;line-height:17px;color:#655f57} #mechanicApp .desk-status{border-radius:10px;padding:12px 14px;font-size:12px;line-height:17px} #mechanicApp .desk-status strong{display:block;margin-bottom:3px;font-size:13px} #mechanicApp .desk-status.is-clear{background:#eaf3ed;color:#2f5c3f} #mechanicApp .desk-status.is-warn{background:#fdf3e2;color:#8a5a06} @media(max-width:900px){ #mechanicApp .inv-desk-split{grid-template-columns:1fr} #mechanicApp .inv-desk{position:static} #mechanicApp .desk-nav{grid-auto-flow:column;grid-auto-columns:max-content; overflow-x:auto;gap:6px;padding-bottom:4px} } /* Tap targets. Three controls sat under the 24px minimum -- fine with a mouse, not with a thumb on a tablet in the bay, which is where this gets used. */ #mechanicApp #boardSection .wb-openlink{min-height:24px;padding:4px 0} #mechanicApp .tf-viz-toggle,#mechanicApp [class*="viz"] button{min-height:26px} /* --- Tools: category chips ----------------------------------------------- */ #mechanicApp .tool-cats{margin-bottom:16px} #mechanicApp .tool-cats-label{margin:0 0 9px;font:600 10px/1.4 var(--mono);letter-spacing:.13em; text-transform:uppercase;color:#655f57} #mechanicApp .tool-cats-row{display:flex;gap:6px;flex-wrap:wrap} #mechanicApp .tool-cat{font-family:var(--mono);cursor:pointer;border:1px solid #e4e1da; background:#fff;color:#5b554c;border-radius:8px;padding:8px 11px;font-size:11px; letter-spacing:.05em;text-transform:uppercase} #mechanicApp .tool-cat span{font-weight:700;color:#14120f} #mechanicApp .tool-cat:hover{border-color:#b8b1a6} #mechanicApp .tool-cat.is-on{background:#14120f;border-color:#14120f;color:#faf9f6} #mechanicApp .tool-cat.is-on span{color:#fff} /* --- the vehicle record, to the design ----------------------------------- */ :is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-who{font:600 10px/1.4 var(--mono);letter-spacing:.16em; text-transform:uppercase;color:#655f57} :is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-name{margin:6px 0 0;font-size:34px;line-height:38px; font-weight:700;letter-spacing:-.03em;color:var(--text)} :is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-blurb{margin:8px 0 0;font-size:14px;line-height:21px;color:#5b554c} :is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-say{margin:16px 0 0;font-size:clamp(24px,3vw,32px)} /* an empty photo slot is an invitation, not a placeholder image */ :is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-shot.is-empty{background:#e9e6e0;display:grid;place-items:center} :is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-shot.is-empty img{width:64px;height:auto;opacity:.4; object-fit:contain;grid-area:1/1} :is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-shot-drop{grid-area:1/1;align-self:end;margin:0 0 22px; padding:0 20px;text-align:center;font-size:13px;line-height:19px;color:#5b554c} /* --- recalls: outstanding on this car, not issued for the model ---------- */ #mechanicApp .tfr-label em{display:block;margin-top:2px;font-style:normal;font-size:11px; font-weight:500;letter-spacing:.04em;text-transform:none;color:#8a827a} #mechanicApp .tfr-mark{margin:12px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap} #mechanicApp .tfr-doit,#mechanicApp .tfr-mark button{font-family:inherit;cursor:pointer; border:1px solid #ddd9d1;border-radius:8px;background:#fff;color:#14120f; font-size:12px;font-weight:600;padding:7px 12px;min-height:26px} #mechanicApp .tfr-mark button:hover{border-color:#14120f} #mechanicApp .tfr-done{display:inline-block;padding:4px 9px;border-radius:6px;background:#eaf3ed; color:#2f5c3f;font:700 10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase} #mechanicApp .tfr-item.is-done>summary{opacity:.6} #mechanicApp .tfr-item.is-done>summary .tfr-part{text-decoration:line-through} /* --- the vehicle record: the four blocks the design asks for -------------- */ :is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-block{background:#fff;border:1px solid var(--s-rule,#e4e1da); border-radius:12px;padding:18px 20px;margin-top:16px} :is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-block-head{display:flex;align-items:baseline; justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px} :is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-block-head h3{margin:0;font:700 11px/1.4 var(--mono); letter-spacing:.14em;text-transform:uppercase;color:#14120f} :is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-block-head span{font-size:12px;line-height:17px;color:#8a827a} :is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} :is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-two>.vr-block{margin-top:16px} /* record check */ :is(#mechanicApp,#clientPortal) .vrc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} :is(#mechanicApp,#clientPortal) .vrc-chip{padding:11px 13px;border-radius:9px;border:1px solid transparent} :is(#mechanicApp,#clientPortal) .vrc-k{margin:0;font:600 9px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase} :is(#mechanicApp,#clientPortal) .vrc-v{margin:5px 0 0;font-size:14px;line-height:19px;font-weight:600} :is(#mechanicApp,#clientPortal) .vrc-chip.is-ok{background:#eef5f0;border-color:#d6e6dc} :is(#mechanicApp,#clientPortal) .vrc-chip.is-ok .vrc-k{color:#4a7a5e} :is(#mechanicApp,#clientPortal) .vrc-chip.is-ok .vrc-v{color:#2f5c3f} :is(#mechanicApp,#clientPortal) .vrc-chip.is-warn{background:#fdf5e8;border-color:#f0e2c6} :is(#mechanicApp,#clientPortal) .vrc-chip.is-warn .vrc-k{color:#a07b2c} :is(#mechanicApp,#clientPortal) .vrc-chip.is-warn .vrc-v{color:#8a5a06} :is(#mechanicApp,#clientPortal) .vrc-chip.is-bad{background:#fdeeea;border-color:#f3d6cd} :is(#mechanicApp,#clientPortal) .vrc-chip.is-bad .vrc-k{color:#b4644e} :is(#mechanicApp,#clientPortal) .vrc-chip.is-bad .vrc-v{color:#a4331f} :is(#mechanicApp,#clientPortal) .vrc-chip.is-unknown{background:#f4f3f0;border-color:#e4e1da} :is(#mechanicApp,#clientPortal) .vrc-chip.is-unknown .vrc-k{color:#8a827a} :is(#mechanicApp,#clientPortal) .vrc-chip.is-unknown .vrc-v{color:#655f57} /* identity grid */ :is(#mechanicApp,#clientPortal) .vri-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); border:1px solid #efece6;border-radius:10px;overflow:hidden;background:#efece6;gap:1px} :is(#mechanicApp,#clientPortal) .vri-cell{background:#fff;padding:12px 14px} :is(#mechanicApp,#clientPortal) .vri-k{margin:0;font:600 9px/1.4 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:#8a827a} :is(#mechanicApp,#clientPortal) .vri-v{margin:5px 0 0;font-size:14px;line-height:19px;font-weight:600;color:#14120f} :is(#mechanicApp,#clientPortal) .vri-cell.is-empty .vri-v{color:#a9a49b;font-weight:500} /* paperwork */ :is(#mechanicApp,#clientPortal) .vrp-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px; padding:10px 0;border-top:1px solid #efece6;font-size:13.5px;line-height:19px} :is(#mechanicApp,#clientPortal) .vrp-row span{color:#655f57} :is(#mechanicApp,#clientPortal) .vrp-row b{color:#14120f;text-align:right} :is(#mechanicApp,#clientPortal) .vrp-flag{margin-top:14px;padding:13px 15px;border-radius:10px;background:#fdf5e8; border:1px solid #f0e2c6} :is(#mechanicApp,#clientPortal) .vrp-flag strong{display:block;font-size:13.5px;color:#8a5a06} :is(#mechanicApp,#clientPortal) .vrp-flag span{display:block;margin-top:2px;font:600 11px/1.4 var(--mono); letter-spacing:.06em;text-transform:uppercase;color:#a07b2c} :is(#mechanicApp,#clientPortal) .vrp-flag p{margin:7px 0 0;font-size:13px;line-height:19px;color:#5b554c} /* odometer record */ :is(#mechanicApp,#clientPortal) .vro-row{padding:11px 0;border-top:1px solid #efece6} :is(#mechanicApp,#clientPortal) .vro-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px} :is(#mechanicApp,#clientPortal) .vro-top b{font-size:14px;font-weight:700;color:#14120f;font-variant-numeric:tabular-nums} :is(#mechanicApp,#clientPortal) .vro-top em{font-style:normal;font:500 11px/1 var(--mono);color:#8a827a} :is(#mechanicApp,#clientPortal) .vro-bar{display:block;height:6px;margin-top:7px;border-radius:9999px; background:#efece6;overflow:hidden} :is(#mechanicApp,#clientPortal) .vro-bar i{display:block;height:100%;border-radius:9999px;background:#14120f} :is(#mechanicApp,#clientPortal) .vro-note{margin:6px 0 0;font-size:12px;line-height:17px;color:#655f57} @media(max-width:820px){:is(#mechanicApp #vehicleSection,#clientPortal #mgDetail) .vr-two{grid-template-columns:1fr}} /* --- build sheet, warranty, bulletins ------------------------------------ */ :is(#mechanicApp,#clientPortal) .vri-opts-label{margin:14px 0 8px;font:600 9px/1.4 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:#8a827a} :is(#mechanicApp,#clientPortal) .vri-opts{display:flex;flex-wrap:wrap;gap:6px} :is(#mechanicApp,#clientPortal) .vri-opts span{padding:5px 10px;border-radius:6px;background:#f4f3f0; font:500 11.5px/1 var(--mono);color:#5b554c} :is(#mechanicApp,#clientPortal) .vrw-row{padding:12px 0;border-top:1px solid #efece6} :is(#mechanicApp,#clientPortal) .vrw-row:first-of-type{border-top:0} :is(#mechanicApp,#clientPortal) .vrw-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px} :is(#mechanicApp,#clientPortal) .vrw-top b{font-size:14px;font-weight:600;color:#14120f} :is(#mechanicApp,#clientPortal) .vrw-top em{font-style:normal;font-size:12.5px} :is(#mechanicApp,#clientPortal) .vrw-top em.is-done{color:#8a827a} :is(#mechanicApp,#clientPortal) .vrw-top em.is-live{color:#2f5c3f;font-weight:600} :is(#mechanicApp,#clientPortal) .vrw-bar{display:block;height:5px;margin-top:8px;border-radius:9999px; background:#efece6;overflow:hidden} :is(#mechanicApp,#clientPortal) .vrw-bar i{display:block;height:100%;border-radius:9999px;background:#2f7d55} :is(#mechanicApp,#clientPortal) .vrw-bar i.is-done{background:#c8c4bc} :is(#mechanicApp,#clientPortal) .vrw-note{margin:6px 0 0;font-size:12px;line-height:17px;color:#655f57} :is(#mechanicApp,#clientPortal) .vrb-row{display:flex;align-items:center;gap:12px;padding:11px 0; border-top:1px solid #efece6} :is(#mechanicApp,#clientPortal) .vrb-row:first-of-type{border-top:0} :is(#mechanicApp,#clientPortal) .vrb-row>div{flex:1;min-width:0} :is(#mechanicApp,#clientPortal) .vrb-title{margin:0;font-size:13.5px;line-height:19px;font-weight:600;color:#14120f} :is(#mechanicApp,#clientPortal) .vrb-note{margin:3px 0 0;font-size:12px;line-height:17px;color:#655f57} :is(#mechanicApp,#clientPortal) .vr-none{margin:0;font-size:13px;line-height:19px;color:#8a827a} /* --- service history: the visits this car has had ------------------------ */ :is(#mechanicApp,#clientPortal) .vrv-row{padding:13px 0;border-top:1px solid #efece6} :is(#mechanicApp,#clientPortal) .vrv-row:first-of-type{border-top:0} :is(#mechanicApp,#clientPortal) .vrv-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px} :is(#mechanicApp,#clientPortal) .vrv-top b{font-size:14px;font-weight:600;color:#14120f} :is(#mechanicApp,#clientPortal) .vrv-top em{font-style:normal;font:500 11px/1 var(--mono);color:#8a827a;white-space:nowrap} :is(#mechanicApp,#clientPortal) .vrv-why{margin:4px 0 0;font-size:13px;line-height:19px;color:#5b554c} :is(#mechanicApp,#clientPortal) .vrv-meta{margin:6px 0 0;font:500 11px/1.4 var(--mono);letter-spacing:.05em; text-transform:uppercase;color:#8a827a} :is(#mechanicApp,#clientPortal) .vrv-parts{margin:5px 0 0;font-size:12.5px;line-height:18px;color:#655f57} /* The editor and anything else that ends up a sibling of the rail should span the whole width rather than render inside the 230px column. Done here rather than by moving markup: three attempts at restructuring this section each put a tag mismatch into the document, and the grid can be told directly. */ #mechanicApp #invEditor, #mechanicApp .inv-desk-split > section:not(.inv-desk):not(.inv-desk-main), #mechanicApp .inv-desk-split > #invListWrap{grid-column:2} @media(max-width:900px){ #mechanicApp #invEditor, #mechanicApp .inv-desk-split > section:not(.inv-desk):not(.inv-desk-main), #mechanicApp .inv-desk-split > #invListWrap{grid-column:1} } /* Editing one car is not a view of the whole desk. While the editor is open the overview stands down, so the form is the page. */ #mechanicApp .inv-desk-split.is-editing .inv-desk-main, #mechanicApp .inv-desk-split.is-editing > #invListWrap{display:none} /* the editor takes the row the overview was using, beside the rail */ #mechanicApp .inv-desk-split.is-editing #invEditor{grid-row:1} /* Filtering used to live here as six display:none rules over a page that always drew everything -- which is how Listings ended up showing nothing and Acquisitions showed the Overview. Each view renders itself now, and hides what it does not use in JS where the logic is legible. */ #mechanicApp .inv-unset{color:#a9a49b;font-weight:500;font-size:13px} /* the pipeline, as a strip rather than a second row of big figures */ #mechanicApp .inv-stages{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 16px} #mechanicApp .inv-stage{display:flex;align-items:baseline;gap:7px;cursor:pointer; border:1px solid var(--s-rule,#e4e1da);background:#fff;border-radius:9999px; padding:7px 14px;font:500 11.5px/1 var(--mono);letter-spacing:.06em; text-transform:uppercase;color:#655f57} #mechanicApp .inv-stage b{font-size:14px;font-weight:700;color:#14120f; font-variant-numeric:tabular-nums} #mechanicApp .inv-stage:hover{border-color:#14120f} #mechanicApp .inv-stage.is-zero{opacity:.55} #mechanicApp .inv-stage.is-zero b{color:#8a827a} /* the shop-only fieldset: visibly not the part a buyer reads */ #mechanicApp .inv-fs.is-private{border-color:#e0d8c9;background:#fdfbf6} #mechanicApp .inv-fs.is-private legend{display:flex;align-items:center;gap:9px} #mechanicApp .inv-private-tag{padding:3px 8px;border-radius:6px;background:#14120f;color:#faf9f6; font:700 9px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase} #mechanicApp .inv-private-note{margin:2px 0 14px;font-size:12.5px;line-height:18px;color:#7a6f57; max-width:62ch} /* recon lines inside the editor */ #mechanicApp .inv-recon-head{display:flex;justify-content:space-between;align-items:baseline; padding:10px 0 8px;border-bottom:1px solid #e8e0cf;font:600 10px/1.4 var(--mono); letter-spacing:.13em;text-transform:uppercase;color:#7a6f57} #mechanicApp .inv-recon-head b{font-size:15px;color:#14120f;font-variant-numeric:tabular-nums} #mechanicApp .inv-recon-line{display:flex;align-items:center;gap:12px;padding:9px 0; border-bottom:1px solid #f0ebdd;font-size:13.5px} #mechanicApp .inv-recon-line span{flex:1;min-width:0;color:#14120f} #mechanicApp .inv-recon-line em{display:block;font-style:normal;font-size:11.5px;color:#8a827a;margin-top:2px} #mechanicApp .inv-recon-line b{font-variant-numeric:tabular-nums;color:#14120f} #mechanicApp .inv-recon-line button{border:0;background:none;cursor:pointer;color:#a9a49b; font-size:18px;line-height:1;padding:0 4px;min-height:24px} #mechanicApp .inv-recon-line button:hover{color:#a4331f} #mechanicApp .inv-recon-none{margin:8px 0 0;font-size:12.5px;color:#8a827a} #mechanicApp .inv-panel-headrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px} #mechanicApp .inv-recon-total{font-size:20px;font-weight:700;color:#14120f;font-variant-numeric:tabular-nums} #mechanicApp .inv-row-cost{font-variant-numeric:tabular-nums;color:#14120f} /* Which children of invBody a view needs is named in JS, not guessed here. */ /* What a job actually made, next to what it was estimated at. Green because it is the one figure on the card that is money rather than arithmetic. */ #mechanicApp .estimate-row.is-charged{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} #mechanicApp .estimate-row.is-charged strong{color:#1c7c54} /* Placing a photo in its frame. The stage is the same 16/9 the car page uses, so what the shop drags here is literally what a buyer sees. */ #mechanicApp .inv-thumb.is-framing{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,90,31,.16)} #mechanicApp .inv-frame{padding:10px;border-top:1px solid var(--line);background:#faf9f7} #mechanicApp .inv-frame-stage{ position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden; background:#e5e7e5;display:grid;place-items:center; } #mechanicApp .inv-frame-stage.is-fill{cursor:grab;touch-action:none} #mechanicApp .inv-frame-stage.is-fill:active{cursor:grabbing} #mechanicApp .inv-frame-stage img{min-width:0;min-height:0;width:100%;height:100%;display:block} /* The crosshair marks what the shop picked, so "where did I put it" has an answer on the screen rather than in somebody's memory. */ #mechanicApp .inv-frame-dot{ position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%; border:2px solid #fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.45);pointer-events:none; } #mechanicApp .inv-frame-dot::after{ content:"";position:absolute;inset:7px;border-radius:50%;background:#fff; } #mechanicApp .inv-frame-say{margin:8px 0 0;font-size:10.5px;line-height:1.45;color:#5a5f63} #mechanicApp .inv-frame-act{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} #mechanicApp .inv-frame-act .btn{padding:6px 10px;font-size:10.5px} /* =========================================================================== Shop access — the board. People down the side, tabs across the top. The question this page exists to answer is "who else can open the jobs", and a per-person list of six tick boxes cannot answer it: you have to read every row and hold it in your head. A column you can run your eye down can. A cell is the control. No box-plus-label, no switch — the square is the thing you press, and whether it is filled is the whole state. =========================================================================== */ #mechanicApp .tm-lede{ max-width:62ch;margin:4px 0 24px;font-size:15px;line-height:1.65;color:#4a4f53; } #mechanicApp .tm-locked{ max-width:52ch;margin:18px 0;padding:18px 20px;border:1px solid var(--line); border-radius:12px;background:var(--panel);font-size:14px;line-height:1.6;color:#4a4f53; } #mechanicApp .tm-board{ border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden; } #mechanicApp .tm-board-head, #mechanicApp .tm-line{ display:grid; grid-template-columns:minmax(150px,1.6fr) repeat(6,minmax(0,1fr)) minmax(128px,auto); align-items:center;gap:4px;padding:0 18px; } #mechanicApp .tm-board-head{ padding-top:13px;padding-bottom:11px;border-bottom:1px solid var(--line);background:#faf9f7; } #mechanicApp .tm-board-corner, #mechanicApp .tm-col{ font:500 10px/1.3 var(--mono);letter-spacing:.05em;color:#7a7e81; } #mechanicApp .tm-col{text-align:center} #mechanicApp .tm-line{padding-top:14px;padding-bottom:14px;border-top:1px solid var(--line)} #mechanicApp .tm-line:first-of-type{border-top:0} #mechanicApp .tm-name b{display:block;font:600 14.5px/1.3 var(--display,inherit)} #mechanicApp .tm-name em{ display:block;margin-top:2px;font:400 10.5px/1.4 var(--mono);color:#8b8f92;font-style:normal; } /* The square. Empty means no; filled means yes. */ #mechanicApp .tm-cell{ position:relative;justify-self:center;width:26px;height:26px;cursor:pointer; border:1.5px solid #cfccc4;border-radius:5px;background:#fff; transition:background .12s ease,border-color .12s ease; } #mechanicApp .tm-cell input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer} #mechanicApp .tm-cell-said{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} #mechanicApp .tm-cell.is-on{background:var(--accent);border-color:var(--accent)} #mechanicApp .tm-cell:hover{border-color:var(--accent)} #mechanicApp .tm-cell input:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px} /* A lead's row is not yours to change, and the hatch says so without a disabled grey that reads as "broken". */ #mechanicApp .tm-cell.is-locked{ cursor:default;border-color:var(--accent); background:repeating-linear-gradient(45deg,var(--accent) 0 4px,#e4703f 4px 8px); } #mechanicApp .tm-cell.is-locked:hover{border-color:var(--accent)} #mechanicApp .tm-line.is-lead .tm-name b::after{ content:"lead";margin-left:8px;padding:2px 6px;border-radius:4px; background:var(--accent);color:#fff;font:600 9px/1.4 var(--mono);letter-spacing:.06em; vertical-align:middle; } #mechanicApp .tm-line-end{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end} #mechanicApp .tm-tag{font:500 10px/1.4 var(--mono);color:#8b8f92} #mechanicApp .tm-drop{ padding:5px 9px;border:1px solid var(--line);border-radius:7px;background:transparent; color:#8b8f92;font:inherit;font-size:11.5px;cursor:pointer; } #mechanicApp .tm-drop:hover{border-color:#b3261e;color:#b3261e} /* Chips: a tick and a word, used where a square with no heading would be a guess -- the invite form and the per-repair shares. */ #mechanicApp .tm-chip{ display:inline-flex;align-items:center;gap:7px;padding:7px 11px; border:1px solid var(--line);border-radius:99px;background:#fff; font-size:12.5px;cursor:pointer; } #mechanicApp .tm-chip input{margin:0;accent-color:var(--accent)} #mechanicApp .tm-chip:has(input:checked){border-color:var(--accent);color:var(--accent-ink,#b93b10)} #mechanicApp .tm-chip.is-lead:has(input:checked){background:#fff0ea} #mechanicApp .tm-pick-row{display:flex;flex-wrap:wrap;gap:8px} /* Below the board: quieter, and separated by a rule rather than another card, so the board stays the thing the page is. */ #mechanicApp .tm-below{margin-top:38px;padding-top:26px;border-top:1px solid var(--line)} #mechanicApp .tm-below h3{margin:0 0 6px;font-size:17px} #mechanicApp .tm-below > p{max-width:64ch;margin:0 0 18px;font-size:13.5px;line-height:1.65;color:#5a5f63} #mechanicApp .tm-invite{display:grid;gap:16px;justify-items:start;max-width:640px} #mechanicApp .tm-field{display:grid;gap:6px;width:min(340px,100%);font-size:12.5px;color:#5a5f63} #mechanicApp .tm-field input{ padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff; font:inherit;color:var(--text); } #mechanicApp .tm-pick{margin:0;padding:0;border:0} #mechanicApp .tm-pick legend{ padding:0;margin-bottom:9px;font:500 10px/1.3 var(--mono);letter-spacing:.05em;color:#7a7e81; } #mechanicApp .tm-waiting{margin:22px 0 0;padding:0;list-style:none;max-width:640px} #mechanicApp .tm-waiting li{ display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line); } #mechanicApp .tm-waiting-who{flex:1;min-width:0;font-size:13.5px;overflow-wrap:anywhere} #mechanicApp .tm-waiting-state{font:400 11px/1.4 var(--mono);color:#8b8f92} #mechanicApp .tm-waiting-state.is-in{color:#1c7c54} #mechanicApp .tm-client{padding:16px 0;border-top:1px solid var(--line)} #mechanicApp .tm-client:first-of-type{border-top:0} #mechanicApp .tm-sees{margin:8px 0 10px;font-size:13px;color:#8b8f92} #mechanicApp .tm-sees.is-on{color:var(--accent-ink,#b93b10)} #mechanicApp .tm-quiet{margin:8px 0 10px;font-size:12px;color:#8b8f92} #mechanicApp .tm-select{ padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:#fff; font:inherit;font-size:12.5px;color:var(--text); } #mechanicApp .tm-client .tm-line-end{justify-content:flex-start;margin-top:4px} /* A six-column board does not fit a phone. Each person becomes a block, and the squares get their word back -- a bare square with no column heading above it is a guess. */ @media(max-width:860px){ #mechanicApp .tm-board-head{display:none} #mechanicApp .tm-line{ display:block;padding:16px 16px;border-top:1px solid var(--line); } #mechanicApp .tm-cell{ display:inline-flex;align-items:center;justify-self:auto;width:auto;height:auto; gap:8px;margin:8px 8px 0 0;padding:7px 11px;border-radius:99px; } #mechanicApp .tm-cell::before{ content:"";width:13px;height:13px;flex:none;border:1.5px solid #cfccc4;border-radius:4px;background:#fff; } #mechanicApp .tm-cell.is-on{background:#fff0ea;border-color:var(--accent)} #mechanicApp .tm-cell.is-on::before{background:var(--accent);border-color:var(--accent)} #mechanicApp .tm-cell.is-locked::before{ background:repeating-linear-gradient(45deg,var(--accent) 0 3px,#e4703f 3px 6px); border-color:var(--accent); } #mechanicApp .tm-cell-said{ position:static;width:auto;height:auto;clip-path:none;overflow:visible;font-size:12.5px; } #mechanicApp .tm-line-end{justify-content:flex-start;margin-top:14px} } /* =========================================================================== Your own record — the shop card. The Team page is a board of keys. This is your card off that board, so it is an object rather than a form: one dark rectangle on a light page, your name knocked out of it, and the six keys punched along the bottom edge. That card is the only bold thing here. Everything you can actually change sits beside it in a quiet rail, because a page where the form is the hero is a settings page, and this is a person. NOTE, and it has bitten this repo before: #mechanicApp is light, and a dark panel inside it inherits nothing useful. Every child of .pf-card below is re-inked deliberately. Nothing here relies on a parent colour. =========================================================================== */ #mechanicApp .pf{ display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:start; padding-top:4px; } #mechanicApp .pf-card{ position:relative;overflow:hidden;padding:26px 28px 24px; border-radius:16px;background:#17191c;color:#f3f1ec; } /* A shallow band of the shop's orange across the head of the card, the way a colour stripe marks a trade card. Decoration that says whose card it is. */ #mechanicApp .pf-card::before{ content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--accent); } #mechanicApp .pf-card-top{ display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:26px; } #mechanicApp .pf-card-shop{font:600 12px/1 var(--display,inherit);letter-spacing:.01em;color:#f3f1ec} #mechanicApp .pf-card-lead{ padding:3px 9px;border-radius:99px;background:var(--accent);color:#fff; font:600 9.5px/1.5 var(--mono);letter-spacing:.07em; } #mechanicApp .pf-card-name{ margin:0;font-size:clamp(30px,5.2vw,46px);line-height:1.02;letter-spacing:-.025em; color:#fff;overflow-wrap:anywhere; } #mechanicApp .pf-card-mail{ margin:10px 0 0;font:400 12.5px/1.5 var(--mono);color:#9aa0a4;overflow-wrap:anywhere; } /* The keys, punched along the bottom edge. A key you hold is solid; one you do not is an outline you can still read the name of. */ #mechanicApp .pf-card-keys{ display:flex;flex-wrap:wrap;gap:7px;margin-top:26px; padding-top:22px;border-top:1px solid #2c3034; } #mechanicApp .pf-key{ display:inline-flex;align-items:center;gap:7px;padding:7px 11px; border:1px solid #33383c;border-radius:99px;background:transparent; } #mechanicApp .pf-key i{ width:11px;height:11px;flex:none;border:1.5px solid #4a5055;border-radius:3px;background:transparent; } #mechanicApp .pf-key b{font:500 12px/1 var(--body,inherit);color:#7d8488} /* The square carries the state, not the whole pill — the same as the Team board. Six lit pills came out louder than the name above them, and the name is what the card is for. Now the strip reads as a strip and the orange appears six small times instead of six large ones. */ #mechanicApp .pf-key.is-on{border-color:#3d4348} #mechanicApp .pf-key.is-on i{background:var(--accent);border-color:var(--accent)} #mechanicApp .pf-key.is-on b{color:#e6e3dd} /* Hatched means a lead holds it by right, not by a tick somebody set. */ #mechanicApp .pf-key.is-locked i{ background:repeating-linear-gradient(45deg,var(--accent) 0 3px,#e4703f 3px 6px); } #mechanicApp .pf-card-foot{ max-width:52ch;margin:18px 0 0;font-size:12.5px;line-height:1.6;color:#8b9195; } /* The rail. Quiet on purpose. */ #mechanicApp .pf-rail{display:grid;gap:0;align-content:start} #mechanicApp .pf-band{ margin:0;padding:22px 0;border-bottom:1px solid var(--line); } #mechanicApp .pf-band:first-child{padding-top:0} #mechanicApp .pf-band.is-last{border-bottom:0;padding-bottom:0} #mechanicApp .pf-band h3{margin:0;font-size:16px} #mechanicApp .pf-say{max-width:48ch;margin:5px 0 0;font-size:12.5px;line-height:1.6;color:#5a5f63} #mechanicApp .pf-field{display:grid;gap:5px;margin-top:14px;font-size:12px;color:#7a7e81} #mechanicApp .pf-field input{ padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff; font:inherit;font-size:14px;color:var(--text); } #mechanicApp .pf-field input:focus-visible{ outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent); } #mechanicApp .pf-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px} #mechanicApp .pf-note{font-size:12.5px;color:#b3261e} /* Two up once there is room for the card to be a card rather than a banner. */ @media(min-width:900px){ #mechanicApp .pf{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:40px} #mechanicApp .pf-card{padding:30px 34px 28px} #mechanicApp .pf-card-top{margin-bottom:44px} #mechanicApp .pf-card-keys{margin-top:44px} } @media(min-width:1200px){ #mechanicApp .pf{grid-template-columns:minmax(0,1.25fr) 380px} } /* What the customer already knows about their car, carried in on a request raised from their own garage. Set apart and labelled, because it is their assertion and not the shop's record. */ #mechanicApp .req-snap{ display:block;margin-top:10px;padding:11px 12px; border:1px dashed var(--line);border-radius:9px;background:#faf9f7; } #mechanicApp .req-snap > small{ display:block;margin-bottom:7px;font:600 8.5px/1 var(--mono); letter-spacing:.09em;color:#8b8f92; } #mechanicApp .req-snap-facts{display:flex;flex-wrap:wrap;gap:6px} #mechanicApp .req-snap-facts em{ display:inline-flex;align-items:baseline;gap:5px;padding:4px 8px;border-radius:6px; background:#fff;border:1px solid var(--line);font-size:11px;font-style:normal;color:#4a4f53; } #mechanicApp .req-snap-facts em b{font:600 8.5px/1 var(--mono);letter-spacing:.06em;color:#8b8f92} #mechanicApp .req-snap-due{display:block;margin-top:8px;font-size:11.5px;line-height:1.5;color:#8a5a06} #mechanicApp .req-snap-log{display:block;margin-top:5px;font-size:11px;line-height:1.5;color:#7a7e81} /* Repair desk: keep the procedure prominent and supporting records compact. */ #mechanicApp #jobWorkspace{max-width:1320px;margin-inline:auto;padding-top:8px} #mechanicApp #jobWorkspace .back-link{margin:0 0 20px;font-size:13px} #mechanicApp #jobWorkspace .workspace-head{ padding:30px 32px;border:1px solid #30353b;border-radius:18px 18px 0 0; background:#20262c;align-items:center;gap:28px; } #mechanicApp #jobWorkspace .workspace-head>div:first-child{min-width:0} #mechanicApp #jobWorkspace .workspace-head .eyebrow{color:#ffac89;margin-bottom:13px} #mechanicApp #jobWorkspace .workspace-head h2{color:#fff;font-size:clamp(28px,3.3vw,46px);line-height:1.1;margin:0;letter-spacing:-.045em} #mechanicApp #jobWorkspace .workspace-repair-title{color:#eef0f2;font-size:17px;line-height:1.5;margin:12px 0 6px} #mechanicApp #jobWorkspace .workspace-vehicle-meta{color:#b9c2ca;font-size:12px;line-height:1.65;overflow-wrap:anywhere;margin:0} #mechanicApp #jobWorkspace .workspace-actions{flex-shrink:0;align-items:stretch;flex-direction:column;min-width:175px} #mechanicApp #jobWorkspace .workspace-actions select{background:#2b333b;border-color:#59636c;color:#fff;min-height:44px} #mechanicApp #jobWorkspace .workspace-actions .btn{min-height:44px} #mechanicApp #jobWorkspace .job-section-nav{display:flex;gap:8px;padding:10px 24px;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;overflow-x:auto} #mechanicApp #jobWorkspace .job-section-nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:8px;white-space:nowrap;color:#454e57;text-decoration:none;font-size:13px;font-weight:600} #mechanicApp #jobWorkspace .job-section-nav a:hover{background:#fff0e9;color:#a83b12} #mechanicApp #jobWorkspace .job-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:#fff;border:1px solid var(--line);border-radius:14px;margin:22px 0;overflow:hidden} #mechanicApp #jobWorkspace .job-stats article{border:0;border-right:1px solid var(--line);border-radius:0;padding:20px 24px;background:transparent} #mechanicApp #jobWorkspace .job-stats article:last-child{border-right:0} #mechanicApp #jobWorkspace .js-label{font-size:11px;color:#606971;letter-spacing:.02em} #mechanicApp #jobWorkspace .js-value{font-size:30px;letter-spacing:-.045em;margin:9px 0 13px;font-variant-numeric:tabular-nums} #mechanicApp #jobWorkspace .js-foot{font-size:11px;line-height:1.5} #mechanicApp #jobWorkspace .js-bar{height:4px;background:#edf0ed} #mechanicApp #jobWorkspace .job-info-grid{gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fafaf8} #mechanicApp #jobWorkspace .job-info-grid article{padding:18px 22px;border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;min-width:0} #mechanicApp #jobWorkspace .job-info-grid article:nth-child(4){border-right:0} #mechanicApp #jobWorkspace .job-info-grid small{color:#626b72;font:600 10px/1.4 Inter,sans-serif;letter-spacing:.08em} #mechanicApp #jobWorkspace .job-info-grid p{color:#46515a;font-size:13px;line-height:1.65;overflow-wrap:anywhere} #mechanicApp #jobWorkspace .job-info-grid .job-findings{border-top:1px solid var(--line);border-right:0;background:#fff} #mechanicApp #jobWorkspace .job-findings summary{cursor:pointer;font-size:13px;font-weight:650;color:#303b43;padding:4px 0} #mechanicApp #jobWorkspace .job-findings summary span{font-weight:400;color:#677179;margin-left:12px;font-size:12px} #mechanicApp #jobWorkspace .job-findings details p{white-space:pre-line;max-width:90ch;margin:16px 0} #mechanicApp #jobWorkspace .job-findings .text-action{margin-top:10px;min-height:32px;padding:0} #mechanicApp #jobWorkspace .job-next-step{display:flex;align-items:center;gap:16px;padding:20px 24px;margin:24px 0 18px;border:1px solid #e7c8b6;border-radius:12px;background:#fff5ee;text-decoration:none;color:#232c32} #mechanicApp #jobWorkspace .job-next-icon{display:grid;place-items:center;width:42px;height:42px;background:#fff;border:1px solid #edcbb8;border-radius:12px;color:#ad3d14;font-size:24px;flex-shrink:0} #mechanicApp #jobWorkspace .job-next-step small{display:block;color:#96370f;font:600 10px/1.5 var(--mono);letter-spacing:.06em;margin-bottom:5px} #mechanicApp #jobWorkspace .job-next-step strong{font-size:16px;line-height:1.45} #mechanicApp #jobWorkspace .job-next-action{margin-left:auto;white-space:nowrap;color:#97390f;font-size:12px;font-weight:650} #mechanicApp #jobWorkspace .job-work-grid{grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:20px;align-items:start;margin-top:20px} #mechanicApp #jobWorkspace .workspace-card{padding:24px;min-width:0;box-shadow:0 2px 8px #20262c04;border-radius:14px;scroll-margin-top:110px} #mechanicApp #jobWorkspace .workspace-card h3{font-size:23px;letter-spacing:-.035em} #mechanicApp #jobWorkspace .card-sub{font-size:12px;line-height:1.55;margin:7px 0 18px} #mechanicApp #jobWorkspace .repair-step-list{gap:10px} #mechanicApp #jobWorkspace .repair-task{padding:18px 16px;border-radius:10px;background:#fff;gap:12px;grid-template-columns:20px minmax(0,1fr) 28px} #mechanicApp #jobWorkspace .repair-task input[type=checkbox]{width:18px;height:18px;margin-top:3px;accent-color:#298257} #mechanicApp #jobWorkspace .repair-task-title{font-size:15px;line-height:1.5;min-height:28px} #mechanicApp #jobWorkspace .repair-task-copy>small{font:600 10px/1.5 var(--mono);letter-spacing:.03em} #mechanicApp #jobWorkspace .repair-task-copy p,#mechanicApp #jobWorkspace .repair-task-copy li{font-size:13px;line-height:1.75;color:#46515a} #mechanicApp #jobWorkspace .repair-task.is-open{border-color:#e7bb9e;box-shadow:inset 3px 0 #db5624;background:#fffdfa} #mechanicApp #jobWorkspace .repair-task.done{opacity:1;background:#f7f9f7;border-color:#e0e7e0} #mechanicApp #jobWorkspace .repair-task.done .repair-task-title{color:#647068;text-decoration:none} #mechanicApp #jobWorkspace .repair-task .task-warning{background:#fff0d4;border-left-color:#ac740b;border-radius:0 6px 6px 0;color:#6e4d10} #mechanicApp #jobWorkspace .repair-task-detail{padding-top:12px;border-top:1px solid #e8e4db} #mechanicApp #jobWorkspace .parts-form{grid-template-columns:minmax(0,1fr) 52px 72px auto} #mechanicApp #jobWorkspace #requiredToolForm{grid-template-columns:minmax(0,1fr) auto} #mechanicApp #jobWorkspace .job-tool-row{background:#fff;padding:13px 12px;grid-template-columns:24px minmax(0,1fr) auto auto;gap:9px} #mechanicApp #jobWorkspace .job-tool-row strong{font-size:12px;line-height:1.55;overflow-wrap:anywhere} #mechanicApp #jobWorkspace .job-tool-row small{font-size:11px;line-height:1.5} #mechanicApp #jobWorkspace .job-tool-row.has>span{color:#276840;background:#e6f2e9} #mechanicApp #jobWorkspace .job-tool-row.missing>span{color:#a33c27;background:#fff0e9} #mechanicApp #jobWorkspace .job-tool-row>button:last-child,#mechanicApp #jobWorkspace .repair-task>button{min-width:28px;min-height:32px;color:#727b82;font-size:18px} #mechanicApp #jobWorkspace .part-item{padding:16px;background:#fafbf9;grid-template-columns:minmax(0,1fr) auto 24px} #mechanicApp #jobWorkspace .part-item strong{font-size:13px;line-height:1.55} #mechanicApp #jobWorkspace .part-item>b{font-size:15px;font-variant-numeric:tabular-nums} #mechanicApp #jobWorkspace .notes-card{margin-top:0} #mechanicApp #jobWorkspace .estimate-card{background:#fafbf9} #mechanicApp #jobWorkspace .estimate-card .text-action{display:block;min-height:36px;padding:8px 0} @media(max-width:1000px){ #mechanicApp #jobWorkspace .job-work-grid{grid-template-columns:minmax(0,1fr)} #mechanicApp #jobWorkspace .workspace-head{padding:24px} #mechanicApp #jobWorkspace .job-stats article{padding:18px} } @media(max-width:600px){ #mechanicApp #jobWorkspace .workspace-head{padding:22px 18px;gap:20px;border-radius:14px 14px 0 0} #mechanicApp #jobWorkspace .workspace-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;min-width:0} #mechanicApp #jobWorkspace .workspace-actions select{min-width:0;font-size:13px!important} #mechanicApp #jobWorkspace .workspace-repair-title{font-size:15px} #mechanicApp #jobWorkspace .job-section-nav{padding:6px 8px;gap:0} #mechanicApp #jobWorkspace .job-section-nav a{padding:0 12px} #mechanicApp #jobWorkspace .job-stats{grid-template-columns:repeat(2,minmax(0,1fr));margin:16px 0} #mechanicApp #jobWorkspace .job-stats article{padding:16px;border-bottom:1px solid var(--line)} #mechanicApp #jobWorkspace .job-stats article:nth-child(2){border-right:0} #mechanicApp #jobWorkspace .job-stats article:nth-child(n+3){border-bottom:0} #mechanicApp #jobWorkspace .js-value{font-size:27px} #mechanicApp #jobWorkspace .job-info-grid article{padding:15px 18px;border-right:0;border-bottom:1px solid var(--line)} #mechanicApp #jobWorkspace .job-info-grid .job-findings{border-top:0;border-bottom:0} #mechanicApp #jobWorkspace .job-findings summary span{display:block;margin:6px 0 0} #mechanicApp #jobWorkspace .job-next-step{padding:16px;gap:12px;margin:18px 0} #mechanicApp #jobWorkspace .job-next-step strong{font-size:14px} #mechanicApp #jobWorkspace .job-next-action{display:none} #mechanicApp #jobWorkspace .workspace-card{padding:18px 14px;scroll-margin-top:125px} #mechanicApp #jobWorkspace .repair-task{padding:14px 10px;gap:8px} #mechanicApp #jobWorkspace .parts-form{grid-template-columns:minmax(0,1fr) 60px} #mechanicApp #jobWorkspace .job-tool-row .tool-bought{grid-column:2;justify-self:start;min-height:40px} #mechanicApp #jobWorkspace .job-tool-row>button:last-child{grid-column:4;grid-row:1} } #mechanicApp #jobWorkspace .attachment-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px} #mechanicApp #jobWorkspace .attachment-form input[type=file]{grid-column:1/-1} #mechanicApp #jobWorkspace .attachment-form .btn{justify-self:start} #mechanicApp #jobWorkspace .note-form{grid-template-columns:minmax(0,1fr) auto} #mechanicApp #jobWorkspace .note-form textarea{grid-column:1/-1;min-height:110px} #mechanicApp #jobWorkspace .note-form .btn{min-height:44px} @media(max-width:600px){ #mechanicApp #jobWorkspace .attachment-form{grid-template-columns:minmax(0,1fr)} #mechanicApp #jobWorkspace .attachment-form .btn{justify-self:stretch} }