/* La Firma: supplied artwork, concrete, ink and paper. Status colors retain meaning. */
:root{--bg:#eeede9;--paper:#fff;--ink:#171717;--muted:#6c6c69;--line:#d9d9d3;--dark:#111;--green:#191919;--gold:#c8c8bf;--red:#a0443c;color:#202020;background:#eeede9;font-family:"Segoe UI",Arial,sans-serif;accent-color:#171717;color-scheme:light}
body{background:#eeede9;color:#202020}
::selection{background:#242424;color:#fff}
button,a,input,textarea,select{touch-action:manipulation}
:focus-visible{outline:3px solid #407fac!important;outline-offset:3px}
input:focus,textarea:focus,select:focus{border-color:#222!important;box-shadow:0 0 0 3px #1717170d!important}
input,select,textarea{accent-color:#171717}
[hidden]{display:none!important}
/* The original artwork is displayed directly, without changing the logo. */
.brand-art{display:block;width:114px;height:62px;object-fit:cover;object-position:50% 53%;border:1px solid #ffffff26;border-radius:2px}
.topbar{background:#101010;color:#f6f5ee;min-height:92px;height:auto;padding:16px 5vw;border-bottom:1px solid #343434;gap:22px}
.topbar .brand,.topbar .logo{gap:16px;letter-spacing:2px;font-size:17px;flex-shrink:0}
.topbar .brand small,.topbar .logo small{color:#b4b4ac;letter-spacing:1.8px;font-size:8px;line-height:1.6}
.topbar nav{flex-wrap:wrap;justify-content:flex-end;gap:12px 22px;line-height:1.6}
.topbar nav a{color:#d4d4ce}
.topbar nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.topbar nav .nav-button{border:1px solid #b8b8b0;background:#f1f0e9;color:#161616;border-radius:2px}
body>footer,.shell>footer{border-top:1px solid #cccac4;padding-bottom:85px;color:#60605d}
footer .wordmark{font-family:"Arial Black","Segoe UI",sans-serif;font-weight:900;color:#202020;letter-spacing:2px}
.content,.management,.garage-page,.roster-content{max-width:1440px}
.content{padding-top:35px}
h1,h2,h3{color:inherit}
.content h1,.content-head h1,.management h1,.garage-head h1,.page-head h1,.roster-content h1{font-family:"Arial Black","Segoe UI",Arial,sans-serif;font-weight:900;font-size:clamp(30px,3.2vw,46px);line-height:1.08;letter-spacing:-1.7px;text-transform:uppercase}
.panel h2,.mg-card h2,.application h2,.point-main .panel h2,.entry h2,.car h2{font-family:"Segoe UI",Arial,sans-serif;font-weight:750;letter-spacing:-.65px}
.overline,.eyebrow{color:#676760;letter-spacing:2.4px;font-size:9px;font-weight:750}
.intro-small,.mg-sub,.garage-head p{color:#646460}
.content-head,.mg-head,.garage-head{border-bottom:1px solid #c8c8c0;padding-bottom:27px}
.content-head>div:first-child,.mg-head>div:first-child,.garage-head>div:first-child{border-left:4px solid #171717;padding-left:20px}
.button,.btn{border-radius:3px;font-weight:650;transition:background .15s,box-shadow .15s,transform .15s}
.button:hover:not(:disabled),.btn:hover:not(:disabled){box-shadow:0 3px 0 #0002;transform:translateY(-1px)}
.button:disabled,.btn:disabled{cursor:not-allowed;transform:none}
.button:not(.outline):not(.danger):not(.gold):not(.link),.btn.dark{background:#191919;border-color:#191919;color:#fff}
.button.gold,.btn.gold{background:#e7e7dc;color:#151515;border-color:#bfbfb5}
.button.outline,.btn.ghost{color:#32322f;border-color:#bfc0b9;background:transparent}
.button.link,.subtle-link,.switch a{color:#32322f}
.button.danger{color:#9b342f;background:#fff1ee;border-color:#e3b9b4}
.help,.local-note,.switch,.empty{color:#686864;line-height:1.75}
.form label,.form-grid label{color:#474744}
.form input:not([type=checkbox]),.form textarea,.form select{color:#202020;background:#fff;border-color:#c8c9c2;border-radius:3px}
.form .check-label{color:#555550}
.panel,.mg-card,.card,.application,.status-card,.notice-item,.garage-history,.car{border-color:#d0d0c8;border-radius:5px;box-shadow:0 3px 0 #19191905;background:#fff}
.panel h2,.card-head h3{color:#242424}
.connection{background:#f0f0ea;border-color:#d2d2ca}
.connection p,.status-card p,.notice-item p{color:#66665e}
.facts div{border-left-color:#222}
.facts small,th,.mg-table th,.garage-table th{color:#64645f}
td,.point-table td{color:#333330}
td small,.mg-table small{color:#707069}
.note:not(.warn),.notice:not(.error),.mg-note,.garage-note:not(.warn){background:#eeeee7;color:#4c4c43;border-color:#d2d2c6}
.tabs button.active,.member-tab.active,.garage-filter.active,.management #module-nav a.active{background:#202020;color:#fff;border-color:#202020}
.tabs button,.management #module-nav a,.garage-filter{border-radius:3px;color:#56564f}
.tabs button:not(.active),.management #module-nav a:not(.active),.garage-filter:not(.active){background:#f7f7f0;border:1px solid #cdcdc4}
/* Arrival: the brand owns the left side; the form stays quiet and easy to read. */
.landing{grid-template-columns:minmax(0,1.06fr) minmax(390px,.94fr);min-height:760px;max-width:1680px;margin:auto}
.story{background:#0e0e0e;padding:0 44px 36px;isolation:isolate;position:relative;gap:0}
.story::before{display:none}
.firma-story-art{width:calc(100% + 88px);margin:0 -44px;display:block;height:390px;object-fit:cover;object-position:center 48%;mask-image:linear-gradient(#000 78%,transparent 100%)}
.story .kicker{position:absolute;top:24px;left:32px;background:#111c;padding:9px 12px;margin:0;border:1px solid #ffffff30;font-size:8px;color:#e9e9df;letter-spacing:2px}
.story .kicker::before{background:#fff;width:18px}
.story h1{font:900 clamp(38px,4vw,58px)/.99 "Arial Black","Segoe UI",Arial,sans-serif;text-transform:uppercase;letter-spacing:-2.6px;margin:-2px 0 20px;position:relative}
.story h1 em{font-style:normal;font-weight:900;color:#aaa9a0}
.story .intro{max-width:480px;font-size:13px;line-height:1.8;color:#b4b4ac;margin:0 0 23px}
.values{gap:0;padding:12px 0;border-top:1px solid #44443e;border-bottom:1px solid #44443e;justify-content:space-between}
.values span{border:0;border-radius:0;padding:0 12px 0 0;font-size:8px;font-weight:700;letter-spacing:2px;color:#deded4}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;max-width:none;padding-top:26px;margin-top:0}
.step{display:block;border:0;padding:0}
.step>span{display:block;font:900 20px "Arial Black",Arial,sans-serif;margin-bottom:9px;color:#8a8a82}
.step strong{font-size:11px;font-weight:650;color:#eee}
.step p{font-size:10px;line-height:1.6;color:#9b9b92}
.entry{padding:48px clamp(24px,4.5vw,70px);background:#f6f6f0;border-right:1px solid #d7d7cf;align-items:flex-start}
.entry-inner{margin:0 auto;max-width:450px}
.entry h2{font-size:34px;line-height:1.1;text-transform:uppercase;font-weight:900;letter-spacing:-1.3px}
.entry .overline{color:#65655e;letter-spacing:2.1px;margin-bottom:15px}
.entry .intro-small{font-size:12px;color:#61615a}
.entry .form{gap:16px}
/* Administration: a compact record label on the left, readable workspace on the right. */
#sidebar{background:#101010;border-right:1px solid #303030;padding-top:0;display:flex;flex-direction:column}
#sidebar .brand{display:flex;flex-direction:column;padding:0 0 19px;margin:0;gap:0;border-bottom:1px solid #343430}
#sidebar .brand-art{width:100%;height:178px;object-fit:cover;object-position:50% 49%;border:0;border-radius:0}
#sidebar .brand>span{font-size:11px;letter-spacing:3px;margin-top:-6px;color:#eee}
#sidebar .brand small{color:#8b8b82;font-size:7px;letter-spacing:1.6px}
#sidebar .workspace{margin-top:16px;margin-bottom:12px;background:#1c1c1c;color:#ddd;border-color:#373730}
#sidebar .workspace small{color:#a4a497}
#sidebar #nav{overflow-y:auto;min-height:0;flex:1;padding-bottom:16px;scrollbar-width:thin;scrollbar-color:#555 #161616}
#sidebar #nav a{color:#adada4}
#sidebar #nav a:hover{background:#242424;color:#fff}
#sidebar #nav a.active{background:#e4e4dc;color:#171717;border-radius:3px}
#sidebar .nav-label{color:#77776e}
#sidebar .sidebar-bottom{position:static;margin-top:auto;background:#101010;padding-top:12px;padding-bottom:16px;flex-shrink:0}
#sidebar .version{font-size:7px;color:#8f8f85}
.shell>header{background:#f8f8f1;border-bottom:1px solid #cecec6}
.shell .breadcrumb{font-size:11px;color:#74746b}
.shell .breadcrumb strong{color:#1a1a1a}
.shell .avatar{background:#161616;color:#f4f4ec;border:1px solid #444}
#main{max-width:1640px;margin:auto}
.page-head{align-items:center}
.page-head h1{font-size:34px}
.page-head .eyebrow{font-size:8px}
.metric{border-radius:4px;border-color:#d1d1c9;background:#fff;box-shadow:0 3px 0 #1a1a1a05}
.metric .metric-value,.metric strong{color:#242424;font-weight:650}
.metric:nth-child(1){border-top:3px solid #262626}
.metric:nth-child(2){border-top:3px solid #75756b}
.metric:nth-child(3){border-top:3px solid #a3a395}
.metric:nth-child(4){border-top:3px solid #d0d0c4}
.dash-command{background:linear-gradient(90deg,#111 35%,#111b 75%,#1113),url('/brand/la-firma-dark.png') 100% 28%/460px auto no-repeat;color:#fff;padding:30px;border:1px solid #333;border-radius:4px;min-height:190px;align-items:flex-start}
.dash-command h2{font:900 36px/1 "Arial Black","Segoe UI",Arial,sans-serif;text-transform:uppercase;letter-spacing:-1.4px;max-width:410px}
.dash-command .eyebrow{color:#b0b0a8}
.dash-command p:last-child{color:#bcbcb0;line-height:1.7;max-width:310px}
.dash-command form{background:#111d;padding:12px;border:1px solid #ffffff24;border-radius:4px;align-self:flex-end}
.dash-command label{color:#d5d5cb}
.dash-command input{background:#292929;border-color:#555;color:#fff}
.dash-command .dash-refresh{background:#444;color:#fff}
.dash-command .btn.gold{background:#eee;color:#111;border-color:#eee}
.dash-caption,.dash-section-title>span,.dash-ranking small,.dash-people small,.dash-card .help,.dash-values dt{color:#68685f}
.dash-card .card-head h3{font-size:16px;font-weight:700}
.dash-rank-heading strong,.dash-highlight strong,.dash-people strong,.dash-mini-stats strong,.dash-values dd{color:#292925}
.dash-ranking meter::-webkit-meter-optimum-value{background:#55554b}
.dash-alerts{background:#e1e1d8;border-color:#c4c4b9;border-radius:3px;color:#55554e}
.dash-alerts strong,.dash-alerts b{color:#171717}
.dash-empty{background:#f7f7f2;color:#6a6a61;border-color:#d6d6cc}
.sale-product,.sale-preview{background:#e4e4d9;border-color:#c5c5b8;border-radius:4px;color:#494940}
.sale-rate strong,.sale-preview strong{color:#22221d}
/* Reusable blocks across the member areas. */
.point-card{background:#161616;border-radius:5px;border:1px solid #333}
.point-card .button:not(.end){background:#e8e8dc;color:#181818;border-color:#e8e8dc}
.point-card .overline,.point-card .point-help,.point-card .identity-id,.point-card .point-since,.point-state{color:#bbbbae}
.point-card .point-clock{font-family:"Segoe UI",Arial,sans-serif;letter-spacing:-1px;font-weight:700}
.point-card h2{font-family:"Segoe UI",Arial,sans-serif;font-weight:700;color:#fff}
.point-metrics strong{font-family:"Segoe UI",Arial,sans-serif;font-weight:650;color:#25251f}
.car{border-radius:4px;transition:box-shadow .2s,border-color .2s}
.car:hover{border-color:#96968c;box-shadow:0 8px 20px #17171710}
.car-photo{border-bottom:2px solid #252525}
.car-plate{background:#f1f1e9;border-color:#c6c6bb;color:#292924;border-radius:2px;font-weight:700}
.car-kicker,.car-identity,.car-state small,.car-links button,.garage-empty-tip{color:#64645c}
.car-state strong{color:#33332b}
.quick-options input:checked+span{background:#222;color:#fff;border-color:#222}
#garage-dialog{background:#f9f9f3;border-radius:5px;border-color:#a5a599}
.quick-options span{background:#f1f1e8;border-color:#c9c9bc;color:#565649;border-radius:3px}
dialog{border-radius:5px;color:#202020}
dialog::backdrop{background:#050505a8;backdrop-filter:blur(3px)}
.mg-stats>div{background:#e2e2d7;border-radius:4px;border-top:2px solid #333}
.mg-card{border-radius:4px}
.mg-progress progress,.action-capacity-bar{accent-color:#3c3c33}
.stock-location.selected{border-color:#292929;background:#e3e3d8}
#toast{background:#171717;color:#fff;border:1px solid #4d4d44;border-radius:3px;z-index:10000}
/* Help lives alongside the input, so opening it never dismisses a draft. */
.firma-form-help{grid-column:1/-1;flex-basis:100%;text-align:left;margin:0 0 4px;min-width:0}
.firma-help-button{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid #b6b6a9;color:#383830;font:650 11px/1.4 "Segoe UI",Arial,sans-serif;padding:8px 11px;border-radius:3px;cursor:pointer;min-height:34px}
.firma-help-button:hover,.firma-help-button[aria-expanded=true]{background:#e5e5d9;border-color:#7a7a6e;color:#161610}
.firma-help-body{margin-top:10px;background:#eeeee3;border:1px solid #c9c9b8;border-left:3px solid #333329;padding:18px;border-radius:2px}
.firma-help-copy{font:12px/1.75 "Segoe UI",Arial,sans-serif;color:#424238;text-align:left;letter-spacing:0;text-transform:none}
.firma-help-copy h3{font:750 17px/1.35 "Segoe UI",Arial,sans-serif;margin:0 0 8px;color:#24241d;letter-spacing:-.2px;text-transform:none}
.firma-help-copy p{font:12px/1.75 "Segoe UI",Arial,sans-serif;margin:0 0 12px;color:#59594c;max-width:none}
.firma-help-copy ol{display:grid;gap:12px;padding-left:22px;margin:16px 0}
.firma-help-copy li{padding-left:5px;font-size:12px;line-height:1.75}
.firma-help-copy li::marker{font-weight:750;color:#171712}
.firma-help-copy .firma-help-foot{border-top:1px solid #c8c8b9;padding-top:12px;margin:17px 0 0;font-size:11px;color:#646454}
.firma-help-launcher{position:fixed;right:24px;bottom:22px;z-index:50;border:1px solid #bdbdb0;border-radius:3px;background:#161616;color:#f5f5e9;padding:13px 18px;font:650 12px/1.4 "Segoe UI",Arial,sans-serif;box-shadow:0 5px 20px #0003;cursor:pointer}
.firma-help-launcher:hover{background:#35352e}
.firma-help-dialog{max-width:580px;width:calc(100% - 32px);max-height:calc(100dvh - 48px);overflow:auto;padding:0;background:#f7f7ef;border:1px solid #a1a18f;border-radius:5px}
.firma-help-head{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#141414;padding:22px 25px;color:#fff}
.firma-help-head h2{margin:0;font:900 25px/1.1 "Arial Black","Segoe UI",Arial,sans-serif;text-transform:uppercase;letter-spacing:-.5px}
.firma-help-badge{width:68px;height:68px;object-fit:cover;border:1px solid #88887a;flex-shrink:0}
.firma-help-head h2{flex:1}
.firma-help-close{background:none;border:1px solid #77776c;border-radius:2px;color:white;font-size:25px;line-height:1;width:34px;height:34px;cursor:pointer}
.firma-help-dialog .firma-help-copy{padding:26px}
#record-form>.firma-form-help,#sale-form>.firma-form-help,#purchase-order-form>.firma-form-help{padding:16px 28px 0;margin:0}
.point-card .firma-help-button,.dash-command .firma-help-button{color:#e4e4d5;border-color:#686859}
.point-card .firma-help-button[aria-expanded=true],.dash-command .firma-help-button[aria-expanded=true]{color:#171711}
.point-card>.firma-form-help{margin-bottom:18px}
.dash-command .firma-form-help{margin:0}
.attendance-notice{bottom:80px;background:#f0f0df;border-color:#b6b69a;color:#303023}
.attendance-notice button{background:#27271d;color:#fff}
@media(min-width:1400px){.story{padding-left:60px;padding-right:60px}.firma-story-art{width:calc(100% + 120px);margin:0 -60px;height:450px}.landing{min-height:830px}}
@media(max-width:1100px){.topbar{padding:15px 26px}.topbar .brand>span{display:none}.landing{grid-template-columns:1fr 1fr}.story{padding-left:30px;padding-right:30px}.firma-story-art{width:calc(100% + 60px);margin:0 -30px;height:340px}.story h1{font-size:42px}.entry{padding:40px 30px}.steps{grid-template-columns:1fr;gap:14px}.step{display:flex;gap:12px}.step>span{font-size:14px;margin:0}.step p{margin:3px 0 0}.dash-command{background-size:470px auto}.topbar nav{gap:10px 16px}}
@media(max-width:720px){.topbar{padding:12px 18px;min-height:83px;gap:14px}.brand-art{width:91px;height:52px}.topbar .brand>span{display:none}.topbar nav{gap:8px 12px;font-size:11px}.topbar nav .nav-button{padding:8px 10px}.landing{grid-template-columns:1fr}.story{padding:0 25px 28px}.firma-story-art{height:290px;width:calc(100% + 50px);margin:0 -25px;object-position:center 50%}.story h1{font-size:40px;letter-spacing:-1.6px}.story .intro{margin-bottom:19px;font-size:12px;max-width:430px}.story .steps{display:none}.values span{font-size:7px;letter-spacing:1.5px}.entry{padding:32px 24px;border:0}.entry-inner{max-width:530px}.entry h2{font-size:30px}.content-head>div:first-child,.mg-head>div:first-child,.garage-head>div:first-child{padding-left:14px}.content-head h1,.management h1,.garage-head h1{letter-spacing:-1px;font-size:30px}.mg-head{align-items:flex-start}.dash-command h2{font-size:29px}.dash-command{padding:25px 20px;background-position:100% 35%}.dash-command form{padding:12px;align-self:stretch}.firma-help-launcher{right:14px;bottom:14px;padding:12px 14px;font-size:11px}.firma-help-body{padding:14px}.firma-help-dialog .firma-help-copy{padding:22px}.firma-help-copy h3{font-size:16px}.firma-help-head{padding:20px}.shell>footer{padding-bottom:85px}#record-form>.firma-form-help,#sale-form>.firma-form-help,#purchase-order-form>.firma-form-help{padding:14px 20px 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
/* Short narrated tutorials, available next to the relevant action. */
.firma-video-button{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;margin:4px;border:1px solid #777;border-radius:6px;background:#fff;color:#222;font:600 12px/1.4 Arial,sans-serif;cursor:pointer;white-space:nowrap}.firma-video-button:hover{background:#eee}.firma-video-button:focus-visible{outline:3px solid #cf9e42;outline-offset:2px}.firma-video-dialog{width:min(1060px,94vw);padding:20px;border:1px solid #666;border-radius:12px;background:#171717;color:#fff;max-height:94vh;overflow:auto}.firma-video-dialog::backdrop{background:#000c}.firma-video-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.firma-video-dialog h2{font-size:22px;margin:6px 0;color:#fff}.firma-video-dialog small{color:#bbb;letter-spacing:2px}.firma-video-dialog header button{background:#333;color:white;border:1px solid #777;border-radius:5px;font-size:26px;cursor:pointer;width:42px;height:42px}.firma-video-dialog video{width:100%;max-height:72vh;background:black;display:block}.firma-video-dialog p{font:13px/1.5 Arial,sans-serif;color:#ccc}.firma-video-dialog .firma-video-error{color:#ffbdac}.shop-layout .action-compose label,.shop-layout .action-compose .help{color:#eee}.shop-layout .action-compose .firma-help-button{color:#fff;border-color:#999}