/* RRCC Walkthrough 1.10.0 design layer (Build Spec v1.10, vh-design-tokens.css with data-company="rrcc"). Loaded last: one set of rules for
   the header, buttons, cards, fields, errors, flags, the offline banner and the version line. Colors come only from the tokens. */
:root{--red:var(--vh-accent-text);--ink:var(--vh-text);--muted:var(--vh-text-secondary);--line:var(--vh-border);--cream:var(--vh-page-bg);--ok:var(--vh-on-track);--new:var(--vh-text);--warn:var(--vh-yellow-flag)}
html,body{font-family:var(--vh-font-body)!important;color:var(--vh-text);background:var(--vh-page-bg)}
body,button,input,select,textarea{font-family:var(--vh-font-body)}
h1,h2,h3,.qt,.sect,.t179h{font-family:var(--vh-font-heading)}
/* ---- header: white, 5px accent stripe, logo top left (I-06); no solid red or charcoal headers (I-07) ---- */
header.top,header.top.am,header.top.red,body header.top{background:var(--vh-header-bg)!important;color:var(--vh-text)!important;border-bottom:var(--vh-accent-stripe) solid var(--vh-accent)!important;box-shadow:none!important}
header.top *{color:inherit}
header.top .row{font-size:13px!important;color:var(--vh-text-secondary)!important;opacity:1!important}
header.top h1{font-family:var(--vh-font-heading);font-weight:700;font-size:18px;color:var(--vh-text)!important}
header.top .amsub,header.top .sub,header.top small{color:var(--vh-text-secondary)!important;font-size:13px}
header.top .bar{background:var(--vh-border)!important}header.top .bar i{background:var(--vh-accent)!important}
.vh-brandrow{display:flex;align-items:center;gap:var(--vh-space-2);padding:var(--vh-space-2) var(--vh-space-4) 0;padding-top:max(8px,env(safe-area-inset-top))}
.vh-logo{background:none!important;border:0!important;padding:var(--vh-space-2)!important;margin:0 0 0 calc(-1 * var(--vh-space-2));min-height:44px;min-width:44px;display:flex;align-items:center;cursor:pointer}
.vh-logo img{height:36px;width:auto;display:block}
.vh-back{display:inline-flex;align-items:center;gap:var(--vh-space-1);min-height:44px;min-width:44px;padding:0 var(--vh-space-2)!important;background:none!important;border:0!important;color:var(--vh-accent-text)!important;font:600 15px var(--vh-font-body)}
.vh-back .lc{width:20px;height:20px}
header.top>.hwrap:first-child,header.top>.vh-brandrow+.hwrap{padding-top:var(--vh-space-1)!important}
#app .brand,#app main>.brandlogo,#app main .homelogo{display:none!important}   /* one logo: top left in the header */
/* ---- icons (Lucide outline) ---- */
.lc{width:clamp(16px,1.25em,20px);height:clamp(16px,1.25em,20px);vertical-align:-0.2em;flex:none;stroke-width:2}
button .lc{margin-right:2px}
/* ---- buttons: one primary per screen (I-15), real buttons, 44px targets (I-14, I-16) ---- */
button,.btn,[role=button],a.linkbtn{min-height:44px;font-family:var(--vh-font-body)}
.big.primary,button.primary,footer.nav .next,#app .vh-primary{background:var(--vh-button-bg)!important;color:var(--vh-button-text)!important;border:2px solid var(--vh-button-bg)!important;border-radius:var(--vh-radius-control)!important;font:600 15px var(--vh-font-body)!important;min-height:44px}
.big.secondary,button.secondary,footer.nav .back,.ghost,.vh-secondary,.big.danger-outline,.b17chip.btn,.linkbtn{background:var(--vh-card)!important;color:var(--vh-accent-text)!important;border:2px solid var(--vh-accent-text)!important;border-radius:var(--vh-radius-control)!important;font-weight:600!important}
.linkbtn{border-color:transparent!important;background:transparent!important}
button:disabled,.r1dim,.locked{opacity:var(--vh-disabled-opacity)!important}
.vh-danger,.danger-delete{background:var(--vh-card)!important;color:var(--vh-danger)!important;border:2px solid var(--vh-danger)!important}
/* ---- cards, text, numbers ---- */
.card{background:var(--vh-card);border:1px solid var(--vh-border);border-radius:var(--vh-radius-card)}
.sum,small,.amjmid,.cmpwho,.dmsmall,.lbl{color:var(--vh-text-secondary)}
#app,#app main{font-size:15px}
#app small,#app .sum,#app .lbl,#app .k{font-size:max(13px,1em)}
.amedgebig b,#amrange,.amedgebig,.vh-number,.bigrange,.e179range{color:var(--vh-text)!important;font-family:var(--vh-font-heading)}
.num.star{background:var(--vh-text)!important}
.s187{color:var(--vh-text-secondary)!important;font-style:normal;font-size:13px;border:1px solid var(--vh-border);border-radius:var(--vh-radius-control);padding:0 var(--vh-space-1);margin-left:var(--vh-space-1)}
/* red only for red flags, errors, negatives and Delete (I-07). A missing answer is an error: icon + red, not a star */
.u180need{font-size:0!important;background:none!important;padding:0!important;border:0!important;margin-left:4px;display:inline-block;width:16px;height:16px;vertical-align:-2px;
 background-color:var(--vh-danger)!important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center/16px no-repeat}
.u180need::after{content:none!important}
/* flags: chip with the flag icon and the word (spec 3) */
.vh-flag{display:inline-flex;align-items:center;gap:var(--vh-space-1);padding:2px var(--vh-space-2);border-radius:var(--vh-radius-control);border:1.5px solid;font-weight:600;font-size:13px}
.vh-flag--red{color:var(--vh-red-flag);border-color:var(--vh-red-flag);background:var(--vh-red-flag-tint)}
.vh-flag--yellow{color:var(--vh-yellow-flag);border-color:var(--vh-yellow-flag);background:var(--vh-yellow-flag-tint)}
.vh-negative{color:var(--vh-danger)}
/* ---- fields: label above (I-12), 44px, error under the field (I-04) ---- */
.vh-label{display:block;font:600 15px var(--vh-font-body);color:var(--vh-text);margin:var(--vh-space-3) 0 var(--vh-space-1)}
.vh-opt{font-weight:400;color:var(--vh-text-secondary);font-size:13px}
#app input.t,#app textarea.t,#app select,#app input[type=text],#app input[type=email],#app input[type=tel],#app input[type=date],#app input[type=time]{min-height:44px;border:1px solid var(--vh-border);border-radius:var(--vh-radius-control);font-size:15px}
#app input:focus,#app textarea:focus{border-color:var(--vh-accent-text);outline:none}
.vh-invalid,#app input.vh-invalid,#app textarea.vh-invalid{border:2px solid var(--vh-danger)!important;outline:none}
.vh-error{color:var(--vh-danger);font-size:13px;display:flex;gap:var(--vh-space-1);align-items:center;margin-top:var(--vh-space-1);font-weight:600}
.vh-error .lc{width:16px;height:16px}
.n176row{flex-wrap:wrap}.n176row .vh-field{flex:1 1 0;min-width:0}.n176row .vh-field.vh-st{flex:0 0 72px}.n176row .vh-field.vh-zip{flex:0 0 96px}
.n176row .vh-field .vh-label{margin-top:var(--vh-space-2)}
/* ---- offline banner (I-11) ---- */
.vh-offline{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:var(--vh-space-2);background:var(--vh-yellow-flag-tint);color:var(--vh-yellow-flag);border-bottom:1.5px solid var(--vh-yellow-flag);padding:var(--vh-space-2) var(--vh-space-4);font-weight:600;font-size:13px}
.vh-offline[hidden]{display:none}
/* ---- version (I-05) ---- */
.vh-version{color:var(--vh-text-secondary)!important;font-size:13px!important;text-align:center;margin:var(--vh-space-4) 0 var(--vh-space-2)}
/* ---- secondary text contrast (I-20) ---- */
.chev,.t1816chev,.more,.b17more,.cmpcnt{color:var(--vh-text-secondary)!important;opacity:1!important}

/* 1.10.0 I-14: rows that became real <button>s keep their row look */
button.vh-rowbtn{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px;font:inherit;color:inherit;background:transparent;border:0;border-top:1px solid var(--vh-border,#E3E5E8);padding:12px 0;text-align:left;cursor:pointer}
button.cx188undo{min-height:44px}
/* the floating ? (tour) button sits over the header's right edge: keep the header text clear of it */
header.top .row,header.top .amsub{padding-right:56px}
.vh-city{font-weight:inherit}

/* 1.10.0 I-07 / I-20: late, overdue and escalated are RED FLAGS: #B91C1C on the red tint with the flag icon (never brand red on data, never
   color alone). "New request" is a plain status pill. */
.c188chip-red,.c188late,.b17nud.esc,.t185.late,.t185.late *{color:var(--vh-red-flag)!important}
.c188chip-red,.b17nud.esc,.t185.late{background:var(--vh-red-flag-tint)!important;border-color:var(--vh-red-flag)!important}
.c188chip-red::before,.c188late::before,.b17nud.esc::before,.t185.late>b::before{content:"";display:inline-block;width:13px;height:13px;margin-right:4px;vertical-align:-2px;background:currentColor;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528'/%3E%3C/svg%3E") center/contain no-repeat}
.r172new,#app .r172new{background:var(--vh-page-bg)!important;color:var(--vh-text)!important;border:1px solid var(--vh-border)}
/* I-16: no text under 13px */
.n19-c,.amstat span,.rectag,.recb,.b17nud,.amq,#app small,#app .amjtop span,.amhd span,#app [class*="chip"]{font-size:13px!important}
.t185{color:var(--vh-text)!important;border-color:var(--vh-border)!important;background:var(--vh-card)!important}
.t185.late,.t185-rep.late{background:var(--vh-red-flag-tint)!important;color:var(--vh-red-flag)!important;border-color:var(--vh-red-flag)!important}
.t185.warn{background:var(--vh-yellow-flag-tint)!important;color:var(--vh-yellow-flag)!important;border-color:var(--vh-yellow-flag)!important}
.needtag{font-size:13px!important;background:var(--vh-button-bg)!important}
.vh-show{min-height:44px;margin-left:8px}
