:root{--base-hue: 86.34;--fg-paper: oklch(.99 .0041 var(--base-hue));--paper: oklch(.97 .0041 var(--base-hue));--ink: oklch(.2369 .0097 248.24);--accent: oklch(.7288 .1147 var(--base-hue));--volvo-blue: oklch(.3037 .08476 249.4532);--line: oklch(.92 .0041 var(--base-hue))}footer{background-color:#333;padding:1rem;color:#fff}#app{height:100dvh;width:100%;contain:strict;overflow:hidden}#app>.row{display:flex;flex-flow:column nowrap;height:calc(100% - 52px)}#app>.row app-router{flex:1;height:100%;overflow-x:hidden;overflow-y:scroll;box-sizing:border-box;view-transition-name:app-router}main{padding:.5rem 1rem;box-sizing:border-box;overflow:hidden;position:relative;z-index:99}body,button,input{font-family:Atkinson Hyperlegible,sans-serif}body{color:var(--ink);background-color:var(--paper);font-family:Inter,sans-serif;-webkit-user-select:none;user-select:none;margin:0}#app>header{background-color:var(--fg-paper);border-bottom:1px solid var(--line);display:grid;place-items:center;height:52px;width:100vw;contain:strict;position:relative}#app>header svg{aspect-ratio:1 / 1;width:24px}#app>header button{all:unset;position:absolute;left:1rem;height:38px;padding:0 .8rem;display:grid;place-items:center;border-radius:12px;corner-shape:squircle;background-color:#0000000d}#app>header button:hover{background-color:#0000001a;cursor:pointer}#app>header button:active{background-color:#0003}#app>header strong{font-weight:600;text-transform:uppercase}input{border:1px solid var(--line);outline-offset:2px;border-radius:8px}.card{box-shadow:inset 0 1px #00000008}table{border-collapse:collapse;font-size:inherit;line-height:inherit;margin-top:.5rem;table-layout:fixed;width:100%;margin-bottom:2rem;caption-side:bottom}table caption{text-align:left}table caption button{border:0;margin-right:.25rem}table caption button{line-height:.7rem;margin:0 .25rem 0 0;vertical-align:middle}th,td{padding:.25rem .5rem .25rem 0;text-align:left}thead th,thead td{border:solid #999;border-width:1px 0}tbody th,tbody td{border-bottom:1px solid #333}table.sortedTable thead th{cursor:pointer}@media (min-width: 40rem){#app{grid-template-columns:1fr 1fr}header,p,#buttons{grid-column:span 2}}.vehicle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}#single-vehicle-page vehicle-image{width:256px;height:128px;margin:0 auto;display:block;transform:scale(2)}#single-vehicle-page header{display:grid;place-items:center}.single-vehicle-top-header{background-color:color-mix(in oklch,var(--paper),black 8%);margin:0;padding:1rem;view-transition-name:vehicle-header}.single-vehicle-top-header .rounded-card{display:flex;flex-flow:row nowrap;align-items:center;gap:2rem}.single-vehicle-top-header vehicle-image{width:128px;height:128px;margin-top:-32px;margin-bottom:-32px;pointer-events:none}.rounded-card{border-radius:16px;corner-shape:squircle;background-color:var(--paper);padding:1rem}@view-transition{navigation: auto;}
