/* RepairBay — staff and customer styles. Design system v0.3: every color and size comes from rb.css (no hex here). */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 var(--rb-fs)/1.5 var(--rb-font);color:var(--rb-text);background:var(--rb-bg)}
a{color:var(--rb-primary)}
a:hover{color:var(--rb-primary-hover)}
strong,b,th{font-weight:600}
h1{font-size:var(--rb-fs-title);line-height:1.3;font-weight:600;margin:0 0 var(--rb-s4)}
h2{font-size:16px;font-weight:600;margin:0 0 var(--rb-s3)}
h2>svg.ic:first-child{margin-right:var(--rb-s2);vertical-align:-3px}
h3{font-size:var(--rb-fs);font-weight:600;margin:var(--rb-s4) 0 var(--rb-s2)}
p{margin:0 0 var(--rb-s3)}
code{font-family:var(--rb-mono);background:var(--rb-bg);border:1px solid var(--rb-line);padding:1px 5px;border-radius:4px;font-size:.92em}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:60;background:var(--rb-card);padding:var(--rb-s2) var(--rb-s3);border-radius:var(--rb-r)}
.skip:focus{left:8px}
.num,.money,td.num,th.num,.kpi,.sum-money{font-variant-numeric:tabular-nums}

/* ---------- top bar: navy, logo + app name, search, shop switcher, user menu ---------- */
.bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--rb-s4);height:var(--rb-bar-h);padding:0 var(--rb-s4);background:var(--rb-nav);color:var(--rb-on-dark)}
.bar a{color:var(--rb-on-dark);text-decoration:none}
.bar-brand{display:flex;align-items:center;gap:var(--rb-s3);flex-shrink:0;min-width:0}
.bar-logo{height:34px;width:auto;max-width:150px;object-fit:contain;display:block}
.bar-app{font-weight:600;color:var(--rb-nav-text);padding-left:var(--rb-s3);border-left:1px solid var(--rb-nav-2);white-space:nowrap}
.bar-search{flex:1;max-width:440px;display:flex;align-items:center;gap:var(--rb-s2);height:36px;padding:0 var(--rb-s3);background:var(--rb-nav-2);border-radius:var(--rb-r);color:var(--rb-nav-text)}
.bar-search:focus-within{box-shadow:var(--rb-focus)}
.bar-search input{flex:1;min-width:0;height:100%;min-height:0;border:0;padding:0;background:transparent;color:var(--rb-on-dark);font-size:var(--rb-fs-sm)}
.bar-search input::placeholder{color:var(--rb-nav-text)}
.bar-search input:focus{box-shadow:none;outline:none}
.bar-shop{display:flex;align-items:center;gap:6px;margin-left:auto;color:var(--rb-nav-text);font-size:var(--rb-fs-sm);white-space:nowrap;min-width:0}
.bar-shop select{width:auto;max-width:220px;min-height:34px;height:34px;padding:0 var(--rb-s2);background:var(--rb-nav-2);color:var(--rb-on-dark);border:1px solid var(--rb-nav-2);font-size:var(--rb-fs-sm)}
.bar-icon{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--rb-r)}
.bar-icon:hover{background:var(--rb-nav-2)}
.bar-user{position:relative}
.bar-user summary{display:flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--rb-s3);border-radius:var(--rb-r);cursor:pointer;list-style:none;color:var(--rb-on-dark);font-size:var(--rb-fs-sm);font-weight:600;white-space:nowrap}
.bar-user summary::-webkit-details-marker{display:none}
.bar-user summary:hover,.bar-user[open] summary{background:var(--rb-nav-2)}
.menu-pop{position:absolute;right:0;top:calc(100% + 6px);min-width:240px;background:var(--rb-card);color:var(--rb-text);border:1px solid var(--rb-line);border-radius:var(--rb-r-card);padding:var(--rb-s2);display:flex;flex-direction:column;z-index:45}
.menu-pop p{margin:var(--rb-s1) var(--rb-s2) var(--rb-s2);font-size:var(--rb-fs-sm);color:var(--rb-text-2)}
.menu-pop a,.menu-pop button{display:flex;align-items:center;gap:var(--rb-s2);width:100%;min-height:40px;padding:0 var(--rb-s2);border-radius:var(--rb-r);border:0;background:none;text-decoration:none;color:var(--rb-text);font:400 var(--rb-fs) var(--rb-font);cursor:pointer;text-align:left}
.menu-pop a:hover,.menu-pop button:hover{background:var(--rb-primary-tint);color:var(--rb-primary-hover)}
.menu-pop form{display:block;margin:0}
.menu-pop hr{border:0;border-top:1px solid var(--rb-line);margin:var(--rb-s1) 0;width:100%}

/* ---------- sidebar (desktop) ---------- */
.side{position:fixed;top:var(--rb-bar-h);bottom:0;left:0;width:var(--rb-side-w);padding:var(--rb-s3) 0;background:var(--rb-card);border-right:1px solid var(--rb-line);display:flex;flex-direction:column;gap:2px;overflow-y:auto;z-index:30}
.side a{display:flex;align-items:center;gap:var(--rb-s3);min-height:40px;padding:0 var(--rb-s4);margin-right:var(--rb-s2);border-left:3px solid transparent;border-radius:0 var(--rb-r) var(--rb-r) 0;text-decoration:none;color:var(--rb-text);font-weight:600;flex-shrink:0}
.side a .ic{color:var(--rb-text-2)}
.side a:hover{background:var(--rb-bg);color:var(--rb-text)}
.side a.on{background:var(--rb-primary-tint);border-left-color:var(--rb-primary);color:var(--rb-primary-hover)}
.side a.on .ic{color:var(--rb-primary)}
.side .side-sep{margin-top:auto}
.has-nav main{margin-left:var(--rb-side-w)}

/* ---------- phone menu: a bar at the TOP, under the top bar (v0.3: a bottom bar clashes with Android's own buttons) ---------- */
.phonenav{display:none}
@media (max-width:860px){
  .side{display:none}
  .has-nav main{margin-left:0}
  .bar{gap:var(--rb-s2);padding:0 var(--rb-s2) 0 var(--rb-s3)}
  .bar-search,.bar-app,.bar-shop,.bar-user summary span{display:none}
  .bar-icon{display:inline-flex;margin-left:auto}
  .bar-logo{height:30px}
  .bar-brand strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
  .phonenav{position:sticky;top:var(--rb-bar-h);z-index:35;display:grid;grid-template-columns:repeat(5,1fr);background:var(--rb-card);border-bottom:1px solid var(--rb-line)}
  .phonenav>a,.phonenav summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:4px 2px;border-bottom:3px solid transparent;color:var(--rb-text-2);text-decoration:none;font-size:11px;font-weight:600;line-height:1.2;text-align:center;list-style:none;cursor:pointer}
  .phonenav summary::-webkit-details-marker{display:none}
  .phonenav>a span,.phonenav summary span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .phonenav>a.on,.phonenav details.on summary{border-bottom-color:var(--rb-primary);color:var(--rb-primary-hover);background:var(--rb-primary-tint)}
  .phonenav details{position:static}
  .phonenav .more-pop{position:absolute;left:0;right:0;top:100%;background:var(--rb-card);border-bottom:1px solid var(--rb-line);padding:var(--rb-s2);display:grid;grid-template-columns:repeat(2,1fr);gap:2px;max-height:70vh;overflow:auto}
  .phonenav .more-pop a{display:flex;align-items:center;gap:var(--rb-s2);min-height:44px;padding:0 var(--rb-s3);border-radius:var(--rb-r);color:var(--rb-text);text-decoration:none;font-weight:600}
  .phonenav .more-pop a.on{background:var(--rb-primary-tint);color:var(--rb-primary-hover)}
}

/* ---------- page ---------- */
main{max-width:1240px;padding:var(--rb-s5) var(--rb-s5) 64px}
.no-nav main{margin:0 auto}
@media (max-width:860px){main{padding:var(--rb-s4) var(--rb-s4) 48px}}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--rb-s3);flex-wrap:wrap;margin:0 0 var(--rb-s4)}
.page-head h1{margin:0}
.page-head .acts{display:flex;gap:var(--rb-s2);flex-wrap:wrap}

/* back link + trail */
.backnav{display:flex;align-items:center;gap:var(--rb-s3);flex-wrap:wrap;margin:0 0 var(--rb-s3)}
.back{display:inline-flex;align-items:center;gap:6px;min-height:32px;font-weight:600;text-decoration:none}
.trail{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;font-size:var(--rb-fs-sm);color:var(--rb-text-2)}
.trail li+li::before{content:"›";margin:0 6px;color:var(--rb-text-2)}
.trail a{color:var(--rb-text-2);text-decoration:none}
.trail a:hover{color:var(--rb-primary);text-decoration:underline}

/* banners (module notices on every page), flash messages */
.banners{display:flex;flex-direction:column}
.banner{display:flex;align-items:center;justify-content:flex-start;gap:var(--rb-s2);flex-wrap:wrap;padding:var(--rb-s2) var(--rb-s4);text-align:left;font-size:var(--rb-fs-sm);background:var(--rb-waiting-bg);color:var(--rb-waiting);border-bottom:1px solid var(--rb-card)}
.banner.bad{background:var(--rb-action-bg);color:var(--rb-action)}
.banner.info{background:var(--rb-progress-bg);color:var(--rb-progress)}
.banner a{color:inherit;font-weight:600}
.banners{border-radius:var(--rb-r-card);overflow:hidden;margin:0 0 var(--rb-s4)}
.banners>summary{display:none}
@media (max-width:860px){.banners>summary{display:flex;align-items:center;gap:var(--rb-s2);min-height:44px;padding:0 var(--rb-s3);background:var(--rb-waiting-bg);color:var(--rb-waiting);font-weight:600;font-size:var(--rb-fs-sm);cursor:pointer}}
.flash{display:flex;gap:var(--rb-s2);align-items:flex-start;padding:var(--rb-s3) var(--rb-s4);border-radius:var(--rb-r-card);margin:0 0 var(--rb-s4);font-weight:600;background:var(--rb-ready-bg);color:var(--rb-ready)}
.flash .ic{margin-top:2px}
.flash.warn{background:var(--rb-waiting-bg);color:var(--rb-waiting)}
.flash.bad{background:var(--rb-action-bg);color:var(--rb-action)}
.flash.info{background:var(--rb-progress-bg);color:var(--rb-progress)}
.flash a{color:inherit}

/* cards and layout */
.card{background:var(--rb-card);border:1px solid var(--rb-line);border-radius:var(--rb-r-card);padding:var(--rb-s4);margin:0 0 var(--rb-s4);min-width:0}
.card>h2:first-child,.card>.spread:first-child h2{margin-bottom:var(--rb-s3)}
.grid{display:grid;gap:var(--rb-s4);grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.grid>.card{margin:0}
.grid+*{margin-top:var(--rb-s4)}
.cols2{display:grid;gap:var(--rb-s4);grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:860px){.cols2{grid-template-columns:minmax(0,1fr)}}
.row{display:flex;gap:var(--rb-s2);flex-wrap:wrap;align-items:center;min-width:0}
.spread{display:flex;justify-content:space-between;align-items:center;gap:var(--rb-s3);flex-wrap:wrap;min-width:0}
.spread>h2{margin:0}

/* summary block on record pages: who, which car, status, money and the one next action */
.summary{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1fr) auto;gap:var(--rb-s4);align-items:start;background:var(--rb-card);border:1px solid var(--rb-line);border-radius:var(--rb-r-card);padding:var(--rb-s4);margin-bottom:var(--rb-s4)}
.summary h1{margin:0 0 var(--rb-s1)}
.sum-k{display:block;font-size:var(--rb-fs-sm);color:var(--rb-text-2);margin-bottom:2px}
.sum-big{display:block;font-weight:600}
.sum-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--rb-s2)}
.sum-next{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:190px}
.sum-next form,.sum-next form button,.sum-next .btn{width:100%}
.sum-next .muted{max-width:240px;font-size:var(--rb-fs-sm)}
.sum-money{display:block;font-size:20px;font-weight:600}
@media (max-width:1100px){.summary{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sum-next{grid-column:1/-1}}
@media (max-width:560px){.summary{grid-template-columns:minmax(0,1fr)}}

/* ---------- forms: label above field ---------- */
label{display:block;font-weight:600;font-size:var(--rb-fs-sm);margin:var(--rb-s3) 0 var(--rb-s1)}
label .req{color:var(--rb-action);margin-left:2px}
label.check{font-weight:400;font-size:var(--rb-fs);display:flex;gap:var(--rb-s2);align-items:center;margin:var(--rb-s2) 0}
input,select,textarea{font:400 var(--rb-fs) var(--rb-font);width:100%;min-height:var(--rb-field-h);padding:8px 10px;border:1px solid var(--rb-field);border-radius:var(--rb-r);background:var(--rb-card);color:var(--rb-text)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;padding:0;accent-color:var(--rb-primary);flex-shrink:0}
input[type=color]{padding:2px;width:64px}
input[type=file]{padding:6px}
/* :focus-within too: in Chrome, tabbing into a date or time field focuses a part inside it, not the field itself */
input:focus,input:focus-within,select:focus,textarea:focus{outline:none;border-color:var(--rb-primary);box-shadow:var(--rb-focus)}
video:focus-visible,video:focus-within,audio:focus-visible,audio:focus-within{outline:none;box-shadow:var(--rb-focus)}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--rb-action)}
textarea{resize:vertical;line-height:1.45}
small{display:block;color:var(--rb-text-2);font-size:var(--rb-fs-sm);margin-top:3px}
.form-grid{display:grid;gap:0 var(--rb-s4);grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.form-grid>div{min-width:0}
fieldset{border:1px solid var(--rb-line);border-radius:var(--rb-r-card);padding:var(--rb-s3);margin:var(--rb-s3) 0}
legend{font-weight:600;padding:0 var(--rb-s1)}

/* ---------- buttons: one primary per screen; others secondary; danger only for delete/void ---------- */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--rb-field-h);padding:0 14px;border-radius:var(--rb-r);border:1px solid var(--rb-field);background:var(--rb-card);color:var(--rb-text);font:600 var(--rb-fs-sm)/1.2 var(--rb-font);cursor:pointer;text-decoration:none;white-space:nowrap;vertical-align:middle}
button:hover,.btn:hover{border-color:var(--rb-primary);color:var(--rb-primary)}
button.primary,.btn.primary{background:var(--rb-primary);border-color:var(--rb-primary);color:var(--rb-on-dark)}
button.primary:hover,.btn.primary:hover{background:var(--rb-primary-hover);border-color:var(--rb-primary-hover);color:var(--rb-on-dark)}
button.pref,.btn.pref{background:var(--rb-primary-tint);border-color:var(--rb-primary);color:var(--rb-primary-hover)}
button.danger,.btn.danger{color:var(--rb-action);border-color:var(--rb-action)}
button.danger:hover,.btn.danger:hover{background:var(--rb-action-bg);color:var(--rb-action)}
button.small,.btn.small{min-height:32px;padding:0 10px}
button.link{min-height:0;background:none;border:0;padding:0;color:var(--rb-primary);font-weight:400;font-size:inherit;text-decoration:underline;cursor:pointer}
button[disabled],.btn[disabled]{opacity:.5;cursor:not-allowed}
button.secondary,.btn.secondary{background:var(--rb-card)}
form.inline{display:inline}
@media (max-width:560px){.wide-phone,.page-head .acts .btn{flex:1 1 100%}}

/* ---------- tables: secondary-text header, numbers right-aligned, row hover; stacked cards on phones ---------- */
table{width:100%;border-collapse:collapse;background:var(--rb-card)}
th,td{padding:var(--rb-s2);border-bottom:1px solid var(--rb-line);text-align:left;vertical-align:top}
th{font-size:var(--rb-fs-sm);color:var(--rb-text-2);font-weight:600}
td.num,th.num{text-align:right;white-space:nowrap}
tr:hover>td{background:var(--rb-hover)}
tr.total td{font-weight:600;border-top:2px solid var(--rb-text)}
tr.total:hover>td{background:none}
.table-wrap{overflow-x:auto;max-width:100%}
@media (max-width:640px){
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack{background:none}
  table.stack tr.head,table.stack thead{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  table.stack tr.head th,table.stack thead th{position:absolute;left:0;width:1px;overflow:hidden}
  table.stack tr{background:var(--rb-card);border:1px solid var(--rb-line);border-radius:var(--rb-r-card);padding:var(--rb-s2) var(--rb-s3);margin:0 0 var(--rb-s2)}
  table.stack td{border:0;padding:3px 0;text-align:left;display:flex;gap:var(--rb-s3);justify-content:space-between;align-items:baseline;overflow-wrap:anywhere}
  table.stack td[data-label]::before{content:attr(data-label);color:var(--rb-text-2);font-size:var(--rb-fs-sm);font-weight:600;flex-shrink:0;max-width:45%}
  table.stack td.num{text-align:right}
  table.stack td:empty{display:none}
  table.nohead td{justify-content:flex-start}
  table.nohead td.num{justify-content:flex-end}
  table.stack tr.total,table.stack tr.sum{display:flex;justify-content:space-between;gap:var(--rb-s3);font-weight:600}
  table.stack tr.total td,table.stack tr.sum td{width:auto}
  table.stack tr.total{border:1px solid var(--rb-text)}
  table.stack tr.total.wide{display:block}table.stack tr.total.wide td{width:100%}
  table.stack td>.cv{min-width:0;text-align:right}table.nohead td>.cv{text-align:left}
  table.stack tr:hover>td{background:none}
  .table-wrap{overflow:visible}
}

/* ---------- small pieces ---------- */
.badge{display:inline-flex}
.muted{color:var(--rb-text-2)}
.small{font-size:var(--rb-fs-sm)}
.empty{color:var(--rb-text-2);padding:var(--rb-s4);text-align:center;border:1px dashed var(--rb-field);border-radius:var(--rb-r-card);background:var(--rb-card);margin:0 0 var(--rb-s3)}
.empty strong{color:var(--rb-text)}
.empty .btn{margin-top:var(--rb-s2)}
.kpi{font-size:28px;font-weight:600;line-height:1.2;margin:var(--rb-s1) 0}
.kpi-label{color:var(--rb-text-2);font-size:var(--rb-fs-sm);font-weight:600}
.pager{display:flex;gap:var(--rb-s4);justify-content:center;align-items:center;margin:var(--rb-s4) 0}
dl.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--rb-s1) var(--rb-s4);margin:0}
dl.facts dt{color:var(--rb-text-2)}dl.facts dd{margin:0;overflow-wrap:anywhere}
.job{border:1px solid var(--rb-line);border-left:4px solid var(--rb-line);border-radius:var(--rb-r-card);padding:var(--rb-s3);margin:0 0 var(--rb-s3);background:var(--rb-card)}
.job h3{margin:0 0 6px;display:flex;gap:var(--rb-s2);align-items:center;flex-wrap:wrap}
.urg-now{border-left-color:var(--rb-action)}.urg-soon{border-left-color:var(--rb-waiting)}.urg-later{border-left-color:var(--rb-field)}
.decide{display:flex;gap:var(--rb-s2);margin-top:var(--rb-s3);flex-wrap:wrap}
.decide label{font-weight:600;display:flex;gap:var(--rb-s2);align-items:center;margin:0;font-size:var(--rb-fs);min-height:44px;padding:0 var(--rb-s4);border:1px solid var(--rb-field);border-radius:var(--rb-r);background:var(--rb-card);cursor:pointer}
.decide label:has(input:checked){background:var(--rb-primary-tint);border-color:var(--rb-primary);color:var(--rb-primary-hover)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 var(--rb-s3)}
.tabs a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--rb-s3);border-radius:var(--rb-r);text-decoration:none;font-weight:600;font-size:var(--rb-fs-sm);color:var(--rb-text);background:var(--rb-card);border:1px solid var(--rb-line)}
.tabs a .n{color:var(--rb-text-2);font-weight:400}
.tabs a:hover{border-color:var(--rb-primary)}
.tabs a.on{background:var(--rb-primary-tint);color:var(--rb-primary-hover);border-color:var(--rb-primary)}
.tabs a.on .n{color:var(--rb-primary-hover)}
.msgs{display:flex;flex-direction:column;gap:var(--rb-s2);margin:var(--rb-s2) 0}
.msg{max-width:85%;padding:var(--rb-s2) var(--rb-s3);border-radius:var(--rb-r-card);background:var(--rb-closed-bg);white-space:pre-wrap;overflow-wrap:anywhere}
.msg.out{align-self:flex-end;background:var(--rb-primary-tint)}
.msg.note{align-self:center;background:var(--rb-waiting-bg);font-style:italic}
.msg small{white-space:normal}
.thumbs{display:flex;flex-wrap:wrap;gap:6px}.thumbs img,.thumbs video{max-width:160px;max-height:120px;border-radius:var(--rb-r)}
.pre{white-space:pre-wrap}.unread{font-weight:600}
.sigwrap{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin-bottom:var(--rb-s3)}
.sigwrap canvas{width:100%;max-width:600px;height:160px;border:2px dashed var(--rb-field);border-radius:var(--rb-r-card);background:var(--rb-card);touch-action:none}
.channel-btns{display:flex;gap:var(--rb-s2);flex-wrap:wrap}
.logo-preview{display:flex;align-items:center;justify-content:center;height:84px;padding:var(--rb-s2);border:1px solid var(--rb-line);border-radius:var(--rb-r);margin-bottom:var(--rb-s2)}
.logo-preview img{max-height:68px;max-width:100%}
.logo-preview.dark{background:var(--rb-nav)}
.theme-pick{display:grid;gap:var(--rb-s2);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:var(--rb-s1)}
.theme-pick label{margin:0;display:flex;flex-direction:column;gap:var(--rb-s2);padding:var(--rb-s2);border:1px solid var(--rb-field);border-radius:var(--rb-r);cursor:pointer;font-weight:600}
.theme-pick label:has(input:checked){border-color:var(--rb-primary);background:var(--rb-primary-tint)}
.theme-pick .swatch{display:flex;height:28px;border-radius:4px;overflow:hidden}
.theme-pick .swatch i{flex:1;background:var(--rb-nav)}.theme-pick .swatch b{flex:1;background:var(--rb-primary)}
.theme-pick span.row{gap:6px}

/* ---------- sign-in page ---------- */
.auth{max-width:400px;margin:56px auto;background:var(--rb-card);border:1px solid var(--rb-line);border-radius:var(--rb-r-card);padding:var(--rb-s5)}
.auth-logo{display:block;max-height:72px;max-width:220px;margin:0 auto var(--rb-s4)}
.auth h1{text-align:center}
.auth button{width:100%;margin-top:var(--rb-s4)}

/* ---------- customer pages: white, logo at top, shop name and tap-to-call on every page ---------- */
body.public{background:var(--rb-bg)}
body.public main{max-width:760px;margin:0 auto}
.pub-head{background:var(--rb-card);border-bottom:1px solid var(--rb-line)}
.pub-head-in{max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--rb-s3);padding:var(--rb-s3) var(--rb-s4);flex-wrap:wrap}
.pub-brand{display:flex;align-items:center;gap:var(--rb-s3);min-width:0;color:var(--rb-text);text-decoration:none}
.pub-brand img{max-height:48px;max-width:150px;object-fit:contain}
.pub-brand strong{font-size:17px}
.pub-call{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--rb-s3);border:1px solid var(--rb-field);border-radius:var(--rb-r);font-weight:600;text-decoration:none;color:var(--rb-text)}
body.public button,body.public .btn{min-height:44px}
@media (max-width:560px){body.public main .btn:not(.small),body.public main button:not(.small){width:100%}body.public .decide label{flex:1}}

/* ---------- print ---------- */
.print-only{display:none}
@media print{
  .bar,.side,.phonenav,.banners,.backnav,.no-print,button,form,.skip{display:none!important}
  .print-only{display:block}
  body{background:var(--rb-card)}
  .has-nav main{margin:0}
  main{padding:0;max-width:none}
  .card{border:0;padding:0}
  .pub-head{border:0}
}
.mt2{margin-top:var(--rb-s2)!important}.mt3{margin-top:var(--rb-s3)!important}.narrow{max-width:640px}
/* filter / search bar above a list */
.filters{display:flex;gap:var(--rb-s2);flex-wrap:wrap;align-items:center}
.filters input:not([type=checkbox]),.filters select{flex:1 1 200px;width:auto;max-width:340px}
.filters label.check{margin:0}
@media (max-width:560px){.filters input:not([type=checkbox]),.filters select{max-width:none;flex-basis:100%}.filters button{flex:1}}
.span2{grid-column:span 2}@media (max-width:560px){.span2{grid-column:auto}}
/* printed documents (invoice): same variables; logo is the full-color one on white */
.doc h1{margin:0 0 var(--rb-s1)}.doc h2{margin:0}
.doc-logo{display:block;max-height:64px;max-width:200px;margin-bottom:var(--rb-s2)}
.doc-right{text-align:right}
.doc-lines{margin-top:var(--rb-s3)}
.doc hr{border:0;border-top:1px solid var(--rb-line);margin:var(--rb-s4) 0}
@media (max-width:560px){.doc-right{text-align:left}}
.row.center{justify-content:center}
.codeblock{white-space:pre-wrap;background:var(--rb-closed-bg);padding:var(--rb-s3);border-radius:var(--rb-r);font-family:var(--rb-mono);font-size:var(--rb-fs-sm);overflow-wrap:anywhere}
.narrow-wide{max-width:760px}
.msg,.pre,code{overflow-wrap:anywhere}
main p,main li{overflow-wrap:break-word}
dd .rb-badge,.facts .rb-badge{white-space:normal;max-width:100%}
.w-num{width:84px;max-width:100%}
/* Owner-chosen colors (Lot statuses, Interlock services and vendors): a dot next to the name */
.cdot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px var(--rb-line);margin-right:6px;vertical-align:middle;flex:none}
.ink-light{color:var(--rb-on-dark)}.ink-dark{color:var(--rb-text)}
/* A "More" menu of secondary page actions */
details.menu{position:relative;display:inline-block}
details.menu>summary{list-style:none;cursor:pointer}
details.menu>summary::-webkit-details-marker{display:none}
details.menu[open]>summary{border-color:var(--rb-primary);color:var(--rb-primary)}
@media (max-width:860px){details.menu{display:block}details.menu>summary{width:100%}details.menu .menu-pop{left:0;right:0;min-width:0}}
td .rb-badge{white-space:normal;max-width:100%}
.w-auto{width:auto;max-width:100%}
.card.is-ready{border-color:var(--rb-ready);box-shadow:inset 0 0 0 1px var(--rb-ready)}
select{max-width:100%}
.filters select,.filters input{min-width:0}
/* Form field widths inside a .filters row (money, dates, short selects); plain notices */
.filters :is(input,select).w-money{flex:0 1 130px}.filters :is(input,select).w-date{flex:0 1 170px}.filters :is(input,select).w-short{flex:0 1 170px}.filters :is(input,select).w-num{flex:0 1 84px}
@media (max-width:560px){.filters :is(input,select):is(.w-money,.w-date,.w-short,.w-num){flex:1 1 40%;max-width:none}}
.nowrap{white-space:nowrap}
.flash.note{font-weight:400}.flash.note b{font-weight:600}
.checklist{list-style:none;padding:0;margin:0}.checklist li{display:flex;gap:var(--rb-s2);align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--rb-line)}.checklist li:last-child{border-bottom:0}
a.rb-link{text-decoration:none}a.rb-link:hover .rb-badge{box-shadow:0 0 0 1px currentColor}
/* Sort by (b9.2) */
.sort-form{margin-top:var(--rb-s2)}
.sort-form .sort-label{margin:0;font-weight:600;font-size:var(--rb-fs-sm);color:var(--rb-text-2)}
.sort-dir{display:inline-flex;gap:4px}
@media (max-width:560px){.sort-dir{flex:1 1 100%}.sort-dir button{flex:1}}
.mono{font-family:var(--rb-mono)}

/* b9.3 mobile service: visit list on Today (time on the left, the job and where to go on the right). */
.visit-list{list-style:none;margin:0 0 var(--rb-s3);padding:0}
.visit-list li{display:flex;gap:var(--rb-s3);padding:var(--rb-s2) 0;border-top:1px solid var(--rb-line)}
.visit-list li:first-child{border-top:0}
.visit-when{flex:0 0 5.5rem;font-weight:700;font-variant-numeric:tabular-nums}
.visit-body{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.visit-name{font-weight:700}
.visit-body .sum-acts{margin-top:var(--rb-s1)}
@media (max-width:600px){.visit-when{flex-basis:4.5rem}}