/* Aether material and spatial composition. Context is visible through outer shells;
   ledger text and inputs retain their own dependable reading beds. */
:root {
  --rail-width: 194px;
  --depth-contact: 0 2px 4px #0008;
  --depth-float: 0 28px 70px -22px #000c;
  --glass-rim: color-mix(in srgb, var(--text) 25%, transparent);
}
body::before { background: radial-gradient(ellipse at 72% 2%,color-mix(in srgb,var(--context-violet) 31%,transparent),transparent 48%),radial-gradient(ellipse at 18% 48%,color-mix(in srgb,var(--context-cyan) 20%,transparent),transparent 47%),radial-gradient(ellipse at 90% 85%,color-mix(in srgb,var(--context-violet) 17%,transparent),transparent 50%),var(--canvas); }
body::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:-1; background:linear-gradient(112deg,transparent 22%,color-mix(in srgb,var(--context-cyan) 5%,transparent) 22.1%,transparent 22.4%,transparent 65%,color-mix(in srgb,var(--context-violet) 6%,transparent) 65.1%,transparent 65.4%); }
.app-header { background:color-mix(in srgb,var(--canvas) 68%,transparent); border-bottom-color:color-mix(in srgb,var(--boundary) 45%,transparent); }
.app-nav { top:calc(var(--header-height) + 20px); bottom:20px; left:16px; width:calc(var(--rail-width) - 24px); border:1px solid var(--glass-rim); border-radius:24px; background:linear-gradient(155deg,color-mix(in srgb,var(--text) 7%,transparent),transparent 65%),color-mix(in srgb,var(--surface) 48%,transparent); backdrop-filter:blur(28px) saturate(145%); box-shadow:var(--depth-contact),0 18px 40px #0003,inset 0 1px #ffffff12; padding:20px 10px; }
.nav-link { padding:12px 10px; gap:10px; font-size:14px; }
.nav-link.selected { border-color:color-mix(in srgb,var(--selection) 40%,transparent); box-shadow:inset 2px 0 var(--selection),0 0 24px color-mix(in srgb,var(--selection) 8%,transparent); }
.page-heading { border:0; padding-bottom:0; margin-bottom:28px; }
.panel,.vehicle-card,.sold-card,.dashboard-totals { border-color:transparent; background:linear-gradient(145deg,color-mix(in srgb,var(--text) 8%,transparent),transparent 45%) padding-box,linear-gradient(145deg,var(--glass-rim),color-mix(in srgb,var(--selection) 13%,transparent) 38%,color-mix(in srgb,var(--accent) 15%,transparent) 65%,transparent) border-box; background-color:color-mix(in srgb,var(--surface) 76%,transparent); backdrop-filter:blur(24px) saturate(140%); box-shadow:var(--depth-contact),var(--depth-float),inset 0 1px color-mix(in srgb,var(--text) 8%,transparent); }
.panel { border-radius:26px; }
.button.primary { box-shadow:0 4px 14px -5px color-mix(in srgb,var(--selection) 60%,transparent),inset 0 1px #ffffff40; }
.button.secondary { background:color-mix(in srgb,var(--raised) 66%,transparent); border-color:var(--glass-rim); box-shadow:inset 0 1px #ffffff0a; }
.shop-card { background:linear-gradient(150deg,color-mix(in srgb,var(--raised) 86%,transparent),color-mix(in srgb,var(--surface) 91%,transparent)); border-color:color-mix(in srgb,var(--boundary) 60%,transparent); box-shadow:0 5px 16px #0002,inset 0 1px #ffffff08; border-radius:16px; }
.shop-lane { border-top-color:color-mix(in srgb,var(--selection) 30%,var(--boundary)); }
.garage-scene { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 304px; gap:24px; margin:12px 0 40px; padding:0 0 16px; isolation:isolate; }
.garage-scene::before { content:''; position:absolute; z-index:-1; inset:14% 8% 6%; border-radius:50%; background:radial-gradient(ellipse,color-mix(in srgb,var(--selection) 18%,transparent),transparent 66%); filter:blur(34px); }
.car-plane { position:relative; min-height:440px; border:1px solid var(--glass-rim); border-radius:32px; overflow:hidden; background:linear-gradient(135deg,var(--raised),var(--canvas)); box-shadow:var(--depth-contact),0 34px 75px -24px #000b,0 0 55px -25px color-mix(in srgb,var(--selection) 60%,transparent); }
.scene-car { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.car-plane::after { content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0309141a 25%,#03091433 50%,#030914eb),linear-gradient(125deg,#73e4f218,transparent 42%,#bba6ff18); box-shadow:inset 0 1px #ffffff40,inset 0 0 0 8px #ffffff06; border-radius:inherit; }
.car-plane-content { position:relative;z-index:1;min-height:440px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:28px;color:#edf4ff; }
.car-plane-content > div { margin-top:auto;padding-top:110px; }
.car-plane-content h2 { color:#edf4ff;font-size:clamp(28px,3.8vw,54px);letter-spacing:-.05em; }
.car-plane-content p { color:#d2deec; }
.car-plane-content .vin { display:block;color:#bccde0;margin:12px 0 20px; }
.car-plane-content .status-badge { background:#07111cbb;backdrop-filter:blur(16px);color:#73e4f2;border-color:#73e4f259; }
.investment-plane,.repair-plane,.receipt-plane { position:relative;border:1px solid transparent;border-radius:28px;background:linear-gradient(135deg,color-mix(in srgb,var(--text) 9%,transparent),transparent 62%) padding-box,linear-gradient(140deg,var(--glass-rim),color-mix(in srgb,var(--selection) 20%,transparent),color-mix(in srgb,var(--accent) 22%,transparent)) border-box;background-color:color-mix(in srgb,var(--surface) 67%,transparent);backdrop-filter:blur(28px) saturate(160%);box-shadow:var(--depth-contact),var(--depth-float),inset 0 1px #ffffff12; }
.investment-plane { align-self:center; margin-left:-64px; z-index:2; padding:30px; background-color:color-mix(in srgb,var(--surface) 85%,transparent); }
.investment-value { display:block;font-size:clamp(26px,3vw,40px);color:var(--selection);margin:16px 0 24px; }
.investment-breakdown { margin:0; }
.investment-breakdown > div { display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid color-mix(in srgb,var(--boundary) 65%,transparent); }
.investment-breakdown dt { color:var(--secondary);font-size:14px; }
.investment-breakdown dd { margin:0;font-size:14px; }
.scene-work-count { display:flex;align-items:center;gap:16px;margin:26px 0; }
.scene-work-count strong { font:500 40px var(--mono);color:var(--text); }
.scene-work-count span { color:var(--secondary);font-size:14px;max-width:80px; }
.repair-plane { padding:26px;margin:0 0 0 22px;z-index:2; }
.repair-score { display:grid; }
.repair-track { display:grid;grid-template-columns:95px minmax(0,1fr) 85px 18px;align-items:center;gap:14px;min-height:74px;border-top:1px solid color-mix(in srgb,var(--boundary) 60%,transparent);padding:12px 4px; }
.repair-track strong { font-size:15px;font-weight:550; }
.repair-track .money { text-align:right;font-size:13px; }
.repair-track-state { display:flex;align-items:center;gap:8px;color:var(--secondary);font-size:12px; }
.repair-track:hover,.repair-track.inspector-origin { background:var(--selection-fill);border-radius:8px; }
.repair-track.inspector-origin { box-shadow:inset 2px 0 var(--selection); }
.receipt-plane { padding:28px;align-self:start;min-height:275px;display:flex;flex-direction:column;gap:20px;margin-top:28px; }
.receipt-sheet { display:block;width:86px;height:106px;color:var(--selection);transform:rotate(-9deg);filter:drop-shadow(4px 8px 10px #0006); }
.receipt-sheet svg { width:100%;height:100%;background:linear-gradient(135deg,color-mix(in srgb,var(--text) 8%,transparent),transparent);border-radius:8px; }
.receipt-plane h2 { font-size:21px; }
.receipt-plane p { color:var(--secondary);font-size:14px; }
.receipt-plane:hover { box-shadow:var(--depth-contact),var(--depth-float),0 0 32px -18px var(--selection); }
.fleet-disclosure { margin:32px 0; }
.fleet-disclosure > summary { padding:16px 0;color:var(--text);font:600 19px var(--display); }
.fleet-disclosure[open] > .section-heading { margin-top:24px; }
.garage-settings > summary { color:var(--secondary);min-height:44px; }
.garage-settings[open] form { padding-top:24px; }
.job-inspector { position:fixed;inset:12px 12px 12px auto;margin:0;width:min(760px,calc(100vw - 32px));height:calc(100dvh - 24px);max-height:none;max-width:none;padding:0;border:1px solid var(--glass-rim);border-radius:28px;background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--text);backdrop-filter:blur(32px) saturate(160%);box-shadow:-22px 0 90px #0008,0 0 35px -18px var(--selection); }
.job-inspector::backdrop { background:#02071166; }
.job-inspector[open] { display:flex;flex-direction:column;animation:inspector-arrive 180ms cubic-bezier(.2,.8,.2,1); }
.inspector-heading { display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 26px;border-bottom:1px solid var(--glass-rim);flex:none;background:linear-gradient(120deg,color-mix(in srgb,var(--selection) 8%,transparent),transparent); }
.inspector-heading h2 { font-size:23px; }
#job-inspector-content { overflow:auto;padding:26px;overscroll-behavior:contain; }
#job-inspector-content .detail-columns { grid-template-columns:1fr; }
#job-inspector-content .detail-secondary { display:block; }
#job-inspector-content .page-heading { margin-bottom:24px; }
#job-inspector-content .page-heading h1 { font-size:26px; }
#job-inspector-content .back-link { display:none; }
@keyframes inspector-arrive { from { opacity:0;transform:translateX(24px); } to { opacity:1;transform:translateX(0); } }
:root[data-palette='bright'] .car-plane-content .button.primary { background:#73e4f2;color:#091421;border-color:#73e4f2; }
:root[data-material='opaque'] :is(.panel,.app-nav,.vehicle-card,.sold-card,.dashboard-totals,.investment-plane,.repair-plane,.receipt-plane,.job-inspector) { background:var(--surface);backdrop-filter:none; }
@media(max-width:1250px) { .garage-scene { grid-template-columns:minmax(0,1fr) 270px;gap:20px; }.repair-plane { margin-left:0; }.repair-track { grid-template-columns:1fr 80px 16px; }.repair-track-state { grid-column:1 / -1; }.repair-track strong { min-width:0; } }
@media(max-width:900px) { .app-nav { top:calc(100% + 8px);left:12px;right:12px;bottom:auto;width:auto;border-radius:20px;background:color-mix(in srgb,var(--surface) 95%,transparent); }.garage-scene { grid-template-columns:minmax(0,1fr) 260px; }.car-plane,.car-plane-content { min-height:390px; }.investment-plane { margin-left:-44px;padding:24px; } }
@media(max-width:680px) { .garage-scene { grid-template-columns:1fr;gap:20px; }.car-plane,.car-plane-content { min-height:420px; }.scene-car { object-fit:contain;object-position:center top; }.investment-plane { margin:-65px 18px 0;z-index:2; }.investment-breakdown { display:grid;grid-template-columns:1fr 1fr;gap:14px; }.investment-breakdown>div { display:block; }.investment-breakdown dd { margin-top:6px; }.scene-work-count { margin:16px 0; }.scene-work-count strong { font-size:28px; }.scene-work-count span { max-width:none; }.repair-plane { padding:22px 18px; }.receipt-plane { margin-top:0;min-height:0;flex-direction:row;align-items:center;padding:24px; }.receipt-sheet { flex:none;width:70px;height:96px; }.job-inspector { inset:60px 0 0;width:100vw;height:calc(100dvh - 60px);border-radius:28px 28px 0 0; }.inspector-heading,#job-inspector-content { padding:20px 16px; }.inspector-heading h2 { font-size:20px; } }
@media(prefers-reduced-motion:reduce) { .job-inspector[open] { animation:none; } }
@media(prefers-reduced-transparency:reduce) { :is(.panel,.app-nav,.vehicle-card,.sold-card,.dashboard-totals,.investment-plane,.repair-plane,.receipt-plane,.job-inspector) { background:var(--surface);backdrop-filter:none; } }
@media(forced-colors:active) { body::after,.garage-scene::before { display:none; }.car-plane-content { background:Canvas;color:CanvasText; }.car-plane-content :is(h2,p,.vin) { color:CanvasText; }.scene-car { position:relative; }.investment-plane,.repair-plane,.receipt-plane { border:1px solid CanvasText; } }
/* Rim light is a separate skin, never a bright gradient filling the reading plane. */
.panel,.vehicle-card,.sold-card,.dashboard-totals,.investment-plane,.repair-plane,.receipt-plane { background:linear-gradient(135deg,color-mix(in srgb,var(--text) 5%,transparent),transparent 66%),color-mix(in srgb,var(--surface) 57%,transparent);border:1px solid color-mix(in srgb,var(--boundary) 50%,transparent); }
.panel::before,.vehicle-card::before,.sold-card::before,.dashboard-totals::before,.investment-plane::before,.repair-plane::before,.receipt-plane::before { content:'';position:absolute;inset:-1px;z-index:0;padding:1px;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,color-mix(in srgb,var(--text) 35%,transparent),color-mix(in srgb,var(--selection) 32%,transparent) 28%,transparent 52%,color-mix(in srgb,var(--accent) 28%,transparent) 88%,transparent);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude; }
.investment-plane { background:linear-gradient(145deg,color-mix(in srgb,var(--selection) 5%,transparent),transparent 68%),color-mix(in srgb,var(--canvas) 76%,transparent);box-shadow:0 3px 6px #0009,0 28px 60px -16px #000c,0 0 32px -22px var(--selection); }
.repair-plane { background:linear-gradient(140deg,color-mix(in srgb,var(--selection) 4%,transparent),transparent 60%),color-mix(in srgb,var(--canvas) 66%,transparent); }
.receipt-plane { background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 66%),color-mix(in srgb,var(--canvas) 69%,transparent); }
.garage-scene::before { background:radial-gradient(ellipse at 20% 50%,color-mix(in srgb,var(--selection) 33%,transparent),transparent 60%),radial-gradient(ellipse at 90% 45%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 54%); }
:root[data-material='opaque'] :is(.panel,.vehicle-card,.sold-card,.dashboard-totals,.investment-plane,.repair-plane,.receipt-plane) { background:var(--surface); }
@media(prefers-reduced-transparency:reduce) { :is(.panel,.vehicle-card,.sold-card,.dashboard-totals,.investment-plane,.repair-plane,.receipt-plane) { background:var(--surface); } }
.car-plane-content p { display:inline-block;background:#07111ca6;padding:4px 8px;border-radius:6px;font-size:13px; }
@media(max-width:680px) { .car-plane-content { min-height:480px;padding-bottom:96px; } }
#job-inspector-content .page-heading h1,#job-inspector-content .page-heading .muted:empty { display:none; }