/* ==========================================================================
caprock.css — THE Caprock Hub design system. One file, every page.
Load it LAST on every page (after hub.css / vendors.css / round.css / page css).
Rules: see CLAUDE.md. Never add a new color, button, pill, close or home here
without adding it to the Caprock Design System first.
========================================================================== */
/* ---------- 0. Fonts (self-hosted, latin; no Google request) ---------- */
@font-face{font-family:Montserrat;font-style:normal;font-weight:600 800;font-display:swap;src:url(fonts/montserrat-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/roboto-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/roboto-mono-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ---------- 1. Tokens ---------- */
:root{
/* brand */
--caprock-red:#CB2026; /* the ONE main action per screen, focus, Down */
--red-dark:#99281E; /* Texas Tech Dark Red: hover/pressed on red */
--red-tint:#FBE9EA; /* error message backgrounds */
--black:#000000; /* top bar, home screen */
--ink:#141414; /* all text, secondary buttons */
--white:#FFFFFF;
/* grays (only these) */
--ttu-gray:#333333; /* Texas Tech Gray: close/home discs, dark panels, Disposed */
--steel:#2B2F33; /* legacy dark panel; prefer --ttu-gray */
--muted:#6B7176; /* labels, captions */
--line-hard:#9AA0A6; /* field borders */
--ttu-light-gray:#CCCCCC;/* Texas Tech Light Gray: dividers on dark */
--line:#D4D7DA; /* card borders, table rows */
--field:#F4F5F6; /* card header strips, hover rows */
--page:#E8EAEC; /* behind cards */
--label-cell:#EEF0F2; /* label cells in the Details spec table (.cr-specs) */
/* meaning colors (only these) */
--go-green:#1E7A45; /* THE green: on rent, done, paid */
--ttu-dark-blue:#003A66; /* available, info, body links */
--ttu-tan:#C4A97C; /* demo, rare accent (ink text) */
--amber:#D99100; /* open / pending (ink text) */
/* type */
--font-display:Montserrat,Arial,sans-serif;
--font-body:Roboto,Arial,sans-serif;
--font-mono:"Roboto Mono",ui-monospace,monospace;
/* shape + size */
--radius-stamp:4px; --radius-field:12px; --radius-card:18px; --radius-pill:999px;
--tap:44px; --tap-small:36px; --field-height:48px;
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
--focus-ring:0 0 0 3px rgba(203,32,38,.18);
--shadow-popup:0 18px 48px rgba(0,0,0,.28);
/* legacy names used across the Hub today, pointed at the tokens above */
--red:var(--caprock-red); --green:var(--go-green); --grn:var(--go-green);
--blue:var(--ttu-dark-blue); --org:var(--amber); --paper:var(--white);
}
/* ---------- 2. Base ---------- */
body{font-family:var(--font-body);color:var(--ink)}
a{color:var(--ttu-dark-blue)} a:hover{color:var(--caprock-red)}
.cr-page-title{font:800 22px/28px var(--font-display);letter-spacing:.04em;text-transform:uppercase;margin:0}
.cr-section-title{font:800 16px/22px var(--font-display);margin:0}
.cr-label{font:800 11px/14px var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cr-big-number{font:800 28px/32px var(--font-display)}
.cr-mono{font-family:var(--font-mono)}
/* ---------- 3. Buttons (pill) ---------- */
.cr-btn{height:var(--tap);padding:0 22px;border-radius:var(--radius-pill);font:800 13px/1 var(--font-display);
display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-transform:none;letter-spacing:0;
border:1.5px solid var(--ink);background:var(--white);color:var(--ink);text-decoration:none;white-space:nowrap}
.cr-btn:hover{background:var(--field)}
.cr-btn svg{width:16px;height:16px;stroke:currentColor}
.cr-btn--red{background:var(--caprock-red);border-color:var(--caprock-red);color:var(--white)}
.cr-btn--red:hover,.cr-btn--red:active{background:var(--red-dark);border-color:var(--red-dark)}
.cr-btn--black{background:var(--ink);border-color:var(--ink);color:var(--white)}
.cr-btn--black:hover{background:var(--ttu-gray);border-color:var(--ttu-gray)}
.cr-btn--small{height:var(--tap-small);padding:0 14px;font:700 12px/1 var(--font-display);border-color:var(--line-hard)}
.cr-btn--small:hover{border-color:var(--ink);background:var(--white)}
.cr-btn:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.cr-btn[disabled]{opacity:.45;cursor:not-allowed}
/* ---------- 4. Close + Home (solid discs) ---------- */
.cr-close,.cr-home{width:var(--tap);height:var(--tap);min-width:var(--tap);padding:0;border:0;border-radius:50%;
background:var(--ttu-gray);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;
font-size:0;line-height:0;color:transparent;text-decoration:none;box-shadow:none} /* (no position here: a page may pin the home button - position:fixed - and this file loads last) */
.cr-close::after{content:"";width:18px;height:18px;background:var(--white);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 3l12 12M15 3L3 15' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/18px 18px no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 3l12 12M15 3L3 15' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/18px 18px no-repeat}
.cr-home::after{content:"";width:22px;height:22px;background:var(--white);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5M5.5 10v9.5h4.5v-5.5h4v5.5h4.5V10'/%3E%3C/svg%3E") center/22px 22px no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5M5.5 10v9.5h4.5v-5.5h4v5.5h4.5V10'/%3E%3C/svg%3E") center/22px 22px no-repeat}
.cr-close:hover,.cr-close:focus-visible,.cr-home:hover,.cr-home:focus-visible{background:var(--caprock-red);outline:0}
/* on a black bar the close is a white disc with an ink X */
.cr-onblack .cr-close{background:var(--white)} .cr-onblack .cr-close::after{background:var(--ink)}
.cr-onblack .cr-close:hover{background:var(--caprock-red)} .cr-onblack .cr-close:hover::after{background:var(--white)}
.cr-popup-close{position:absolute;top:12px;right:12px}
/* ---------- 4b. One look, whatever the page says (the shape of the close and home discs may not be changed by a page's own link / button rules: .top a, .admTop a, .bar a ...) ---------- */
a.cr-home,button.cr-home,a.cr-close,button.cr-close{width:var(--tap)!important;height:var(--tap)!important;min-width:var(--tap)!important;padding:0!important;border:0!important;border-radius:50%!important;
background-color:var(--ttu-gray)!important;color:transparent!important;font-size:0!important;line-height:0!important;letter-spacing:0!important;text-transform:none!important;display:inline-flex!important;align-items:center;justify-content:center;box-shadow:none!important}
a.cr-close.cr-close--small,button.cr-close.cr-close--small{width:28px!important;height:28px!important;min-width:28px!important}
a.cr-home:hover,button.cr-home:hover,a.cr-close:hover,button.cr-close:hover{background-color:var(--caprock-red)!important}
.cr-popup-head .cr-close,.cr-onblack .cr-close{background-color:var(--white)!important}
.cr-popup-head .cr-close:hover,.cr-onblack .cr-close:hover{background-color:var(--caprock-red)!important}
/* ---------- 5. Text boxes + drop-downs (quote tool look) ---------- */
.cr-field,input.cr-field,select.cr-field,textarea.cr-field{height:var(--field-height);width:100%;box-sizing:border-box;
border:1.5px solid var(--line-hard);border-radius:var(--radius-field);padding:0 14px;background:var(--white);
font:400 16px/22px var(--font-body);color:var(--ink)}
textarea.cr-field{height:auto;min-height:110px;padding:12px 14px;resize:vertical}
.cr-field:focus{outline:0;border-color:var(--caprock-red);box-shadow:var(--focus-ring)}
.cr-field--search{border-radius:var(--radius-pill);padding-left:50px}
select.cr-field{-webkit-appearance:none;appearance:none;padding-right:44px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 18px center}
.cr-field-wrap{display:flex;flex-direction:column;gap:6px}
/* ---------- 6. Status stamps ---------- */
.cr-stamp{display:inline-flex;align-items:center;vertical-align:middle;border-radius:var(--radius-stamp);padding:5px 10px;
font:800 11px/14px var(--font-display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;margin:0}
.cr-stamp--rent,.cr-stamp--done,.cr-stamp--paid{background:var(--go-green);color:var(--white)}
.cr-stamp--available{background:var(--ttu-dark-blue);color:var(--white)}
.cr-stamp--down,.cr-stamp--overdue{background:var(--caprock-red);color:var(--white)}
.cr-stamp--open,.cr-stamp--pending{background:var(--amber);color:var(--ink)}
.cr-stamp--demo{background:var(--ttu-tan);color:var(--ink)}
.cr-stamp--disposed,.cr-stamp--archived,.cr-stamp--closed{background:var(--ttu-gray);color:var(--white)}
/* ---------- 7. Cards, top bar, tabs, filter chips ---------- */
.cr-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-5)}
.cr-topbar{background:var(--black);border-bottom:4px solid var(--caprock-red);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cr-tabs{display:flex;gap:8px;overflow-x:auto}
.cr-tab{height:40px;padding:0 16px;border-radius:var(--radius-pill);border:1px solid var(--muted);color:var(--white);background:transparent;
font:700 12px/1 var(--font-display);display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none}
.cr-tab.on,.cr-tab[aria-current="page"]{background:var(--white);border-color:var(--white);color:var(--black)}
.cr-chip{height:var(--tap-small);padding:0 14px;border-radius:var(--radius-pill);border:1.5px solid var(--line-hard);background:var(--white);
color:var(--ink);font:700 12px/1 var(--font-display);display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.cr-chip.on{background:var(--ink);border-color:var(--ink);color:var(--white)}
.cr-chip i{width:8px;height:8px;border-radius:2px;display:inline-block}
/* ---------- 7b. Pop-ups (every modal) ---------- */
.cr-popup{background:var(--page);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-popup);display:flex;flex-direction:column;max-height:calc(100vh - 32px)}
.cr-popup-head{background:var(--black);border-bottom:4px solid var(--caprock-red);padding:14px 16px 14px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
.cr-popup-head h2,.cr-popup-title{margin:0;font:800 24px/1.1 var(--font-display);color:var(--white);letter-spacing:.02em}
.cr-popup-sub{font:700 14px/1.2 var(--font-display);color:#CFD3D6}
.cr-popup-head .cr-close{background:var(--white)} .cr-popup-head .cr-close::after{background:var(--ink)}
.cr-popup-head .cr-close:hover{background:var(--caprock-red)} .cr-popup-head .cr-close:hover::after{background:var(--white)}
.cr-popup-body{padding:20px 24px;overflow:auto;display:flex;flex-direction:column;gap:16px}
.cr-popup-foot{background:var(--white);border-top:1px solid var(--line);padding:14px 24px;display:flex;justify-content:flex-end;gap:10px;flex:none}
@media (min-width:768px){.cr-popup{box-shadow:0 0 0 2px rgba(255,255,255,.72),0 18px 48px rgba(0,0,0,.45)}} /* a thin light edge: the black head no longer melts into a black top bar / dark page behind it (Chad 2026-11-09) */
@media (max-width:767px){.cr-popup{border-radius:0;max-height:none;min-height:100vh;min-height:100dvh}.cr-popup-body{overflow-x:hidden}.cr-popup-foot{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))!important}.cr-popup-head{padding-top:calc(14px + env(safe-area-inset-top,0px))}.cr-popup-body{padding:16px}.cr-popup-foot{padding:12px 16px 24px}} /* a full-screen pop-up starts UNDER the phone's clock / notch: the title row has to start below it (Chad 2026-11-05: "Job site" was cut off at the top) */
/* small round close for a thumbnail or a row to remove (28px; the X is drawn smaller) */
.cr-close--small{width:28px;height:28px;min-width:28px}
.cr-close--small::after{width:12px;height:12px;-webkit-mask-size:12px 12px;mask-size:12px 12px}
/* ---------- 7c0. NO GREY OR FADE AT THE TOP (Chad 2026-11-03): behind the iPhone status bar the page is BLACK, like the top bar ---------- */
html{background:var(--black)}
body::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--black);z-index:2147483000;pointer-events:none}
/* ---------- 7c. THE TOP BAR WITH THE PAGE TITLE AND ITS ACTIONS (Chad 2026-11-03) ----------
logo . thin divider . PAGE TITLE on the left; on the right the secondary buttons (white outline), the "..." menu, the ONE red action, then the Home disc.
hub/pagebar.js builds it on every page (it moves the page's own title and action buttons into the bar, so no page has a separate title row under it).
On a phone: the title on the left, then "..." + the red action + Home; the secondary buttons go inside "...". */
:root{--bar-h:88px}
.cr-bar{background:var(--black)!important;border-bottom:4px solid var(--caprock-red)!important;display:flex!important;align-items:center;gap:24px;flex-wrap:nowrap!important;padding:env(safe-area-inset-top,0px) 32px 0!important;height:calc(var(--bar-h) + env(safe-area-inset-top,0px))!important;min-height:calc(var(--bar-h) + env(safe-area-inset-top,0px))!important;position:sticky;top:0;z-index:60;box-sizing:border-box}
.cr-bar>img,.cr-bar>a>img,.cr-bar .cr-bar-logo img{height:44px;width:auto;max-width:none;display:block;margin:0;padding:0;background:none}
/* 2026-11-13 (Chad): every Hub / CRM / Admin black top bar carries the FULL 'Cavvy by Caprock' logo (hub/brand/cavvy/cavvy-reverse.svg), 44px tall on a computer, 34px on a phone - never the compact one. Pages that draw their own bar (.rbar, .bar, .top) are held to the same size here so no page keeps an older 30px / 60px rule. Customer documents, emails, forms and the quote PDFs stay 'Caprock Rentals'. */
.cr-bar img[src*="cavvy-reverse"],.rbar img[src*="cavvy-reverse"],.bar img[src*="cavvy-reverse"],.top img[src*="cavvy-reverse"],#full .bar .fullLogo{height:44px!important;width:auto!important;max-width:none;flex:none}
.cr-bar .cr-bar-logo{display:flex;align-items:center;flex:none;padding:0;border:0;background:none}
.cr-bar-div{width:1px;height:44px;background:var(--ttu-gray);flex:none}
.cr-bar .cr-bar-title,.cr-bar h1{margin:0;padding:0;font:800 22px/1.1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-align:left;display:block}
.cr-bar .cr-bar-title{border:0}.cr-bar .cr-bar-title:after{display:none!important}
.cr-bar-acts{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.cr-bar-sec,.cr-bar-main{display:flex;align-items:center;gap:10px}
.cr-bar-acts .cr-btn:not(.cr-btn--red),.cr-bar-sec button,.cr-bar-sec .cr-btn,.cr-bar-sec a.cr-btn{background:transparent!important;color:var(--white)!important;border:1.5px solid var(--white)!important;height:44px;padding:0 20px;border-radius:var(--radius-pill);font:800 13px/1 var(--font-display);letter-spacing:0;text-transform:none}
.cr-bar-acts .cr-btn:not(.cr-btn--red):hover,.cr-bar-sec button:hover{background:var(--white)!important;color:var(--ink)!important}
.cr-bar-acts .cr-btn--red,.cr-bar-main button,.cr-bar-main .cr-btn{background:var(--caprock-red)!important;color:var(--white)!important;border:0!important;height:44px;padding:0 22px 0 18px;border-radius:var(--radius-pill);font:800 13px/1 var(--font-display);letter-spacing:0;text-transform:none;display:inline-flex;align-items:center;gap:8px}
.cr-bar-acts .cr-btn--red:hover,.cr-bar-main button:hover{background:var(--ink)!important}
.cr-bar-main .cr-i,.cr-bar-sec .cr-i{width:16px;height:16px}
.cr-bar-moreWrap{position:relative;flex:none}
.cr-bar-more{width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;border:1.5px solid var(--white)!important;background:transparent!important;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.cr-bar-more:hover,.cr-bar-more[aria-expanded=true]{background:var(--white)!important}.cr-bar-more svg{width:18px;height:18px;fill:var(--white)}.cr-bar-more:hover svg,.cr-bar-more[aria-expanded=true] svg{fill:var(--ink)}
.cr-bar-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:230px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-popup);padding:8px;display:flex;flex-direction:column;gap:2px;z-index:80}
.cr-bar-menu[hidden]{display:none}
.cr-bar-menu button,.cr-bar-menu a,.cr-bar-menu .cr-btn{display:flex;align-items:center;justify-content:flex-start;width:100%;height:44px;padding:0 14px;border:0!important;border-radius:12px;background:var(--white)!important;color:var(--ink)!important;font:700 14px/1 var(--font-body);text-transform:none;letter-spacing:0;text-align:left;text-decoration:none;cursor:pointer}
.cr-bar .cr-bar-acts .cr-bar-menu :is(button,a,.cr-btn){background:var(--white)!important;color:var(--ink)!important;border:0!important;height:44px;padding:0 14px;font:700 14px/1 var(--font-body);text-transform:none;letter-spacing:0;justify-content:flex-start;width:100%}
.cr-bar .cr-bar-acts .cr-bar-menu :is(button,a,.cr-btn):hover{background:var(--field)!important;color:var(--ink)!important} /* the buttons that fold into the "..." menu are readable (dark on white): the bar's white-outline button rule used to win and made them white on white (Chad 2026-11-09: "my button went away") */
.cr-bar-menu button:hover,.cr-bar-menu a:hover,.cr-bar-menu label:hover{background:var(--field)!important}
.cr-bar-menu label{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:12px;font:700 14px/1 var(--font-body);color:var(--ink);cursor:pointer;margin:0;text-transform:none;letter-spacing:0}.cr-bar-menu label input{width:20px;height:20px;accent-color:var(--caprock-red);margin:0}
.cr-bar-menu .cr-bar-sec{flex-direction:column;align-items:stretch;gap:2px;border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:4px}
.cr-bar-menu .cr-bar-sec:empty{display:none}
.cr-bar .cr-home,.cr-bar .cr-home:hover,.cr-bar .homeBtn,.cr-bar .homeBtn:hover,.cr-bar a.homeBtn:hover{margin-left:0!important;flex:none} /* a page's old 'margin-left:auto' on the Home button (even on hover) must never push the buttons toward the middle */
.cr-bar>*{order:0}
.cr-bar :is(.tabs,.mtabs,.appTabs,.dpTabs):empty,.cr-bar nav:empty{display:none}
.cr-bar :is(.tabs,.mtabs,.appTabs,.dpTabs):not(:empty){display:flex;gap:8px;overflow-x:auto;min-width:0;flex:0 1 auto}
@media(min-width:768px){.cr-bar :is(.tabs,.mtabs,.appTabs,.dpTabs):not(:empty){flex-wrap:nowrap!important;scrollbar-width:none}.cr-bar :is(.tabs,.mtabs,.appTabs,.dpTabs):not(:empty)::-webkit-scrollbar{display:none}.cr-bar :is(.tabs,.mtabs,.appTabs,.dpTabs):not(:empty)>*{flex:none}.cr-bar .cr-bar-title,.cr-bar h1{flex:none}} /* a bar with many tabs never wraps them out of the bar or squeezes the title to "L..." (Chad 2026-11-09): the tabs scroll sideways instead, and pagebar.js moves the outline buttons into the "..." menu when there is not room */
.cr-bar>.cr-bar-acts{order:8}.cr-bar>.cr-home{order:9}
@media(min-width:768px){.cr-bar>.cr-bar-acts{margin-right:-14px}} /* the three dots sit 10px from Home, the same gap as between the other buttons */
@media(max-width:767px){
:root{--bar-h:68px}
.cr-bar{padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px!important;gap:8px 10px;height:auto!important;min-height:calc(var(--bar-h) + env(safe-area-inset-top,0px))!important;flex-wrap:wrap!important}
.cr-bar-div{display:none}
.cr-bar img[src*="cavvy-reverse"],.rbar img[src*="cavvy-reverse"],.bar img[src*="cavvy-reverse"],.top img[src*="cavvy-reverse"],#full .bar .fullLogo{height:34px!important}
/* the full Cavvy logo (34px) takes the first row with the "..." menu and the Home disc; the page title and the ONE red action share the second row; tabs get a third (Chad 2026-11-13) */
.cr-bar{flex-wrap:wrap!important;column-gap:10px;row-gap:8px}
.cr-bar>.cr-bar-acts{display:contents}
.cr-bar>.cr-bar-logo,.cr-bar>img{order:0;margin-right:auto}
.cr-bar .cr-bar-moreWrap{order:1}.cr-bar>.cr-home{order:2}
.cr-bar::after{content:"";order:3;flex:0 0 100%;height:0;margin:-8px 0 0} /* the row break: logo + "..." + Home above, title + the red action below */
.cr-bar .cr-bar-title,.cr-bar h1{order:4;flex:1 1 0;min-width:0;font-size:18px}
.cr-bar .cr-bar-main{order:5;flex:none}
.cr-bar>nav,.cr-bar :is(.tabs,.mtabs,.appTabs,.dpTabs):not(:empty){order:20;flex:1 0 100%;min-width:0;overflow-x:auto}.cr-bar>.who{display:none}
.cr-bar-acts{gap:8px}
.cr-bar:has(:is(.tabs,.mtabs,.appTabs,.dpTabs):not(:empty)){flex-wrap:wrap!important}.cr-bar :is(.tabs,.mtabs,.appTabs,.dpTabs):not(:empty){order:20;flex:1 0 100%}
.cr-bar-acts>.cr-bar-sec{display:none}
.cr-bar-acts .cr-btn--red,.cr-bar-main button,.cr-bar-main .cr-btn{padding:0 16px 0 14px;gap:6px}
.cr-bar:has(:is(.tabs,.mtabs,.appTabs,.dpTabs):not(:empty)) .cr-bar-title{letter-spacing:.03em} /* a bar with tabs wraps its Home disc to a second row if the title + the red button are a few pixels too wide (Catalog + Add category, 2026-11-13) */
.cr-ph-x{display:none} /* a word that only a computer window has room for: bulk in "Add bulk item" */
}
/* ---------- 7d. Icons are drawn SVG (2-2.6px stroke, round caps), never a typed + x v or emoji (Chad 2026-11-03) ---------- */
.cr-i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;display:inline-block}
.cr-i--plus{stroke-width:2.6}
.cr-i--chev{width:12px;height:12px;stroke-width:2.4}
.cr-i--sort{width:10px;height:10px;stroke-width:2;vertical-align:0}
/* ---------- 7e. Tables: the header row never cuts off (Chad 2026-11-03) - Montserrat 800, 12.5px, uppercase, --steel, 16px top / 14px bottom, one line; a table that is too wide scrolls sideways inside its card ---------- */
.cr-table th,.cr-th{font:800 12.5px/1.2 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--steel);white-space:nowrap;padding:20px 8px 18px;border-bottom:1.5px solid var(--line);text-align:left}
/* ---------- 7f. Desktop pages use the whole screen: a 32-40px gutter, no narrow centered column ---------- */
@media(min-width:768px){.cr-full{max-width:none!important;width:100%;margin-left:0!important;margin-right:0!important;padding-left:32px!important;padding-right:32px!important;box-sizing:border-box}}
/* Hub pages (News, Handbook, Time off, Suggestions, What's new ...): the whole width with a 32px gutter, never a narrow centered column (rule 10b) */
@media(min-width:768px){body main{max-width:none;margin-left:0;margin-right:0;padding-left:32px;padding-right:32px;box-sizing:border-box}body main>p.pgS,body.compactTop main>p.pgS{max-width:none;text-align:left;margin-left:0;margin-right:0}body main>h1.pgT{text-align:left}}
/* ---------- 7g. THE RECORD PAGE (Chad 2026-11-03, rule 10a) - ONE layout for every record: account, job site, contact, asset, contract, invoice, quote, vendor ----------
Opens FULL SCREEN. Built by hub/record.js (CRRecord.open). Black header (back link . icon tile . name . status stamp . type tag . facts line; outline buttons . "..." . the ONE red action . white close disc),
a white tab strip with a 4px red rule, number tiles, then two columns (Details + the record's sections on the left; highlight card + "Log what happened" + "Recent activity" on the right). */
html.crRecOpen,html.crRecOpen body{overflow:hidden}
.cr-record{position:fixed;inset:0;z-index:240;background:var(--page);display:flex;flex-direction:column;font-family:var(--font-body);color:var(--ink)}
.cr-rec-head{background:var(--black);min-height:var(--bar-h);box-sizing:border-box;padding:14px 32px 14px;display:flex;align-items:center;gap:18px;flex:none}
.cr-rec-back{display:flex;align-items:center;gap:6px;color:#CFD3D6;font:800 13px/1 var(--font-display);background:none;border:0;padding:0;cursor:pointer;height:44px;text-transform:none;letter-spacing:0}.cr-rec-back:hover{color:var(--white);background:none}
.cr-rec-back svg{width:16px;height:16px}.cr-rec-div{width:1px;height:28px;background:var(--ttu-gray);flex:none}
.cr-rec-tile{width:44px;height:44px;border-radius:12px;background:var(--ttu-gray);display:flex;align-items:center;justify-content:center;flex:none}.cr-rec-tile svg{width:24px;height:24px;fill:none;stroke:var(--white);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cr-rec-id{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.cr-rec-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.cr-rec-name{margin:0;font:900 24px/1.1 var(--font-display);color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.cr-rec-tag{border:1.5px solid var(--muted);color:#CFD3D6;border-radius:var(--radius-stamp);padding:3px 8px;font:800 11px/1.2 var(--font-display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.cr-rec-facts{margin:0;font-size:13.5px;color:#CFD3D6;line-height:1.35}
.cr-rec-acts{margin-left:auto;display:flex;gap:10px;align-items:center;flex:none}
.cr-rec-acts .cr-btn{height:44px}
.cr-rec-acts .cr-rec-sec{background:transparent;color:var(--white);border:1.5px solid var(--white);padding:0 18px;gap:8px}.cr-rec-acts .cr-rec-sec:hover{background:var(--white);color:var(--ink)}
.cr-rec-acts .cr-rec-main{background:var(--caprock-red);color:var(--white);border:0;padding:0 22px 0 18px;gap:8px}.cr-rec-acts .cr-rec-main:hover{background:var(--white);color:var(--caprock-red)}
.cr-rec-acts .cr-rec-main.on{background:var(--white);color:var(--ink)}
.cr-rec-acts .cr-i{width:16px;height:16px}
.cr-rec-more{position:relative}.cr-rec-more>button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--white);background:transparent;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.cr-rec-more>button svg{width:18px;height:18px;fill:var(--white)}.cr-rec-more>button:hover{background:var(--white)}.cr-rec-more>button:hover svg{fill:var(--ink)}
.cr-rec-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:240px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card);box-shadow:var(--shadow-popup);padding:8px;display:flex;flex-direction:column;gap:2px;z-index:5}
.cr-rec-menu[hidden]{display:none}.cr-rec-menu button{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border:0;border-radius:12px;background:var(--white);color:var(--ink);font:700 14px/1 var(--font-body);cursor:pointer;text-align:left;width:100%;text-transform:none;letter-spacing:0}.cr-rec-menu button:hover{background:var(--field)}.cr-rec-menu .cr-i{width:18px;height:18px}
.cr-rec-x{width:44px;height:44px;border-radius:50%;border:0;padding:0;background:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}.cr-rec-x svg{width:18px;height:18px;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;fill:none}.cr-rec-x:hover{background:var(--caprock-red)}.cr-rec-x:hover svg{stroke:var(--white)}
.cr-rec-tabs{background:var(--page);border-bottom:4px solid var(--caprock-red);padding:8px 32px;display:flex;gap:4px;overflow-x:auto;flex:none;scrollbar-width:none}.cr-rec-tabs::-webkit-scrollbar{display:none}
.cr-rec-tab{height:40px;padding:0 16px;border-radius:var(--radius-pill);border:0;background:transparent;color:var(--ink);font:700 13px/1 var(--font-display);display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;text-transform:none;letter-spacing:0;flex:none}
.cr-rec-tab:hover{background:var(--white)}.cr-rec-tab.on{background:var(--ink);color:var(--white)}.cr-rec-tab.dis{color:var(--muted);opacity:.7}
.cr-rec-n{background:var(--white);color:var(--ink);border-radius:var(--radius-pill);padding:1px 7px;font-size:11px}.cr-rec-tab.on .cr-rec-n{background:var(--ttu-gray);color:var(--white)}
.cr-rec-scroll{flex:1 1 auto;min-height:0;overflow:auto;padding:20px 32px 40px;display:flex;flex-direction:column;gap:16px}
.cr-rec-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.cr-rec-tiles:empty{display:none}
.cr-rec-kpi{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:14px 18px;display:flex;flex-direction:column;gap:4px;min-width:0}
.cr-rec-lab{font:800 11px/14px var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cr-rec-big{font:800 26px/30px var(--font-display);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cr-rec-big.grn{color:var(--go-green)}.cr-rec-big.red{color:var(--caprock-red)}.cr-rec-big.none{color:var(--muted);font-size:22px}
.cr-rec-sm{font-size:12.5px;line-height:17px;color:var(--muted)}
.cr-rec-bar{height:5px;border-radius:3px;background:#EEF0F1;margin-top:4px}.cr-rec-bar i{display:block;height:5px;border-radius:3px;background:var(--ink)}
.cr-rec-cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start}
.cr-rec-left,.cr-rec-right{display:flex;flex-direction:column;gap:16px;min-width:0}
.cr-rec-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-card);padding:20px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.cr-rec-card.soft{background:var(--field)}.cr-rec-card.dark{background:var(--ink);border-color:var(--ink);color:var(--white)}
.cr-rec-ct{margin:0;font:800 16px/22px var(--font-display);color:var(--ink);text-transform:none;letter-spacing:0}.cr-rec-card.dark .cr-rec-ct{color:var(--white)}
.cr-rec-ch{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cr-rec-link{font:700 13px/1 var(--font-display);color:var(--ttu-dark-blue);background:none;border:0;padding:0;cursor:pointer;text-transform:none;letter-spacing:0;text-decoration:none;min-height:0}.cr-rec-link:hover{color:var(--caprock-red);background:none}
.cr-rec-note{font-size:13.5px;line-height:1.45;color:var(--muted);margin:0}
.cr-rec-dlead{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:22px;align-items:start}
.cr-rec-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:16px 22px}
.cr-rec-cell{display:flex;flex-direction:column;gap:3px;min-width:0}.cr-rec-cell.s2{grid-column:span 2}.cr-rec-cell.s3{grid-column:1/-1}
.cr-rec-val{font-size:15px;line-height:20px;font-weight:500;color:var(--ink);overflow-wrap:anywhere}.cr-rec-val.mono{font-family:var(--font-mono);font-size:14px}.cr-rec-val.none{color:var(--muted)}.cr-rec-val a{color:var(--ttu-dark-blue)}
.cr-rec-cell .cr-field{min-height:44px;height:auto;padding:10px 14px;font-size:15px}textarea.cr-field{resize:none;overflow:hidden;line-height:1.35}
.cr-rec-editbar{display:flex;gap:10px;justify-content:flex-end;margin-top:2px}
.cr-rec-chips{display:flex;gap:8px;flex-wrap:wrap}.cr-rec-chip{height:36px;padding:0 14px;border-radius:var(--radius-pill);border:1.5px solid var(--line-hard);background:var(--white);color:var(--ink);font:700 12.5px/1 var(--font-display);cursor:pointer;text-transform:none;letter-spacing:0}.cr-rec-chip.on{background:var(--ink);border-color:var(--ink);color:var(--white)}
.cr-rec-text{width:100%;min-height:110px;border:1.5px solid var(--line-hard);border-radius:var(--radius-field);padding:12px 14px;font:400 16px/1.4 var(--font-body);resize:vertical;box-sizing:border-box}
.cr-rec-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--page);min-width:0}.cr-rec-row:first-of-type{border-top:0;padding-top:0}
.cr-rec-row b{display:block;font-size:15px}.cr-rec-row small{display:block;color:var(--muted);font-size:12.5px}.cr-rec-row .r{font:800 18px/1 var(--font-display);white-space:nowrap}
.cr-rec-tw{overflow-x:auto;max-width:100%}.cr-rec-tbl{width:100%;border-collapse:collapse}.cr-rec-tbl td{padding:10px 8px;border-top:1px solid var(--page);font-size:14px;vertical-align:top}.cr-rec-tbl th{font:800 12.5px/1.2 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--steel);padding:0 8px 10px;text-align:left;white-space:nowrap}.cr-rec-tbl .num{text-align:right}
.cr-rec-tbl th{height:auto;padding:0 8px 12px;background:transparent;cursor:default}
.cr-rec-pill{background:var(--go-green);color:var(--white);border-radius:var(--radius-stamp);padding:4px 9px;font:800 11px/1.2 var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.cr-rec-hi .cr-rec-lab{color:#CFD3D6}.cr-rec-hi .cr-rec-who{font:800 22px/1.2 var(--font-display);color:var(--white)}.cr-rec-hi .cr-rec-sub{font-size:13.5px;color:#CFD3D6}
.cr-rec-hi .cr-rec-bt{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cr-rec-hi .cr-btn{width:100%;justify-content:center}.cr-rec-hi .cr-btn.w{background:var(--white);color:var(--ink);border:0}.cr-rec-hi .cr-btn.o{background:transparent;color:var(--white);border:1.5px solid var(--white)}
.cr-rec-empty{color:var(--muted);font-size:13.5px;margin:0}
.cr-rec-photo{border-radius:14px;background:#F4F5F6;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3}.cr-rec-photo img{width:100%;height:100%;object-fit:contain;display:block}
.cr-rec-badge{position:absolute;left:10px;top:10px;background:var(--white);border:1px solid var(--line-hard);border-radius:var(--radius-pill);padding:3px 10px;font:700 11px/1.2 var(--font-display);color:var(--muted)}
.cr-rec-pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.cr-rec-pics a,.cr-rec-pics button{aspect-ratio:1;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--field);padding:0;display:block;cursor:pointer}.cr-rec-pics img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:1100px){.cr-rec-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){
.cr-rec-head{padding:12px 16px;flex-wrap:wrap;gap:8px 8px;align-items:center}
.cr-rec-back,.cr-rec-div,.cr-rec-tile{display:none}
.cr-rec-id{display:contents}.cr-rec-line{display:contents}
.cr-rec-name{order:1;flex:1 1 0;min-width:0;font-size:22px}
.cr-rec-acts{order:2;gap:8px;margin-left:auto}.cr-rec-acts .cr-rec-sec{display:none}
.cr-rec-acts .cr-rec-main{width:44px;padding:0;justify-content:center;font-size:0;gap:0}.cr-rec-acts .cr-rec-main .cr-i{width:18px;height:18px}
.cr-rec-stamps{order:3;flex:1 0 100%;display:flex;gap:8px;flex-wrap:wrap}.cr-rec-facts{order:4;flex:1 0 100%}
.cr-rec-tabs{padding:8px 12px}
.cr-rec-scroll{padding:12px 12px 40px;gap:12px}
.cr-rec-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cr-rec-tiles.p4>.cr-rec-kpi:nth-child(n+5){display:none}.cr-rec-kpi{padding:12px 14px}.cr-rec-big{font-size:22px}
.cr-rec-cols,.cr-rec-left,.cr-rec-right{display:contents}.cr-rec-hi{order:0}.cr-rec-scroll>.cr-rec-tiles{order:1}.cr-rec-left>*{order:2}.cr-rec-right>*:not(.cr-rec-hi){order:3}
.cr-rec-card{padding:18px 16px}
.cr-rec-dlead{display:block}.cr-rec-dlead>.cr-rec-lead{margin-bottom:14px}.cr-rec-grid{grid-template-columns:minmax(0,1fr);gap:0}.cr-rec-cell{flex-direction:row;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-top:1px solid var(--page)}.cr-rec-cell:first-child{border-top:0}.cr-rec-cell .cr-rec-val{text-align:right}.cr-rec-cell.s2,.cr-rec-cell.s3{grid-column:auto}
.cr-rec-editing .cr-rec-cell{flex-direction:column;align-items:stretch}.cr-rec-editing .cr-rec-cell .cr-rec-val{text-align:left}
}
/* layers: the record page (240) sits above the page and its top bar; every pop-up and the toast sit above the record */
.modalbg,.mbg,.admModalBg,.caModalBg,.sendReviewBg{z-index:300}#toast,.toast{z-index:500}
.cr-rec-stamps{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.cr-rec-cols:has(.cr-rec-right:empty){grid-template-columns:minmax(0,1fr)}.cr-rec-right:empty{display:none}
/* ---------- 7h. Details spec table (every record page) ---------- */
/*
Asset #
100110
Serial
…
…
*/
.cr-specs{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--white);container-type:inline-size}
.cr-specs-row{display:grid;grid-template-columns:104px minmax(0,1fr) 128px minmax(0,1.15fr);border-bottom:1px solid var(--line)}
.cr-specs-row:last-child{border-bottom:0}
.cr-specs dt,.cr-specs dd{margin:0;min-height:42px;box-sizing:border-box;display:flex;align-items:center;padding:4px 12px;border-right:1px solid var(--line)}
.cr-specs-row>:last-child{border-right:0}
.cr-specs dt{background:var(--label-cell);overflow:hidden;overflow-wrap:anywhere;hyphens:auto;font:800 10px/13px var(--font-display);letter-spacing:.09em;text-transform:uppercase;color:var(--ttu-gray)}
.cr-specs dd{font:500 14px/18px var(--font-body);color:var(--ink);overflow-wrap:anywhere}
.cr-specs dd.is-wide{grid-column:span 3}
.cr-specs dd.is-strong{font:800 15px/18px var(--font-display)}
.cr-specs dd.is-mono{font:500 12.5px/18px var(--font-mono)}
.cr-specs dd.is-money{font-weight:700}
.cr-specs dd.is-empty{color:var(--muted);font-weight:400}
/* narrow (phones, or a narrow Details column): one label + value per row */
@container (max-width:520px){
.cr-specs-row{grid-template-columns:104px minmax(0,1fr);border-bottom:0}
.cr-specs dt,.cr-specs dd{border-bottom:1px solid var(--line)}
.cr-specs dd{border-right:0;font-size:14.5px}
.cr-specs dd.is-wide{grid-column:auto}
.cr-specs dd.is-mono{font-size:13px}
.cr-specs-row:last-child>:nth-last-child(-n+2){border-bottom:0}
}
.cr-specs dd .cr-field{width:100%;min-height:34px;height:auto;padding:6px 10px;font-size:14px;border-radius:8px}
.cr-specs dd textarea.cr-field{resize:none;overflow:hidden;line-height:1.35}
.cr-rec-dlead>.cr-specs{align-self:start}
.cr-rec-card .cr-specs{margin-top:2px}
/* ---------- 7i. Record Page extras (Chad 2026-11-05, the contract page) ----------
(a) a FILLED status tile: the tile itself is the colour - Open = green, a permit that is missing / expiring = red, Monitored = black. recKpi({label, value, sub, fill:"go"|"down"|"warn"|"ink"|"mute"})
(b) a BIG record name (the customer on a contract): cfg.cls "crBig"
(c) a GRAY GRID table: gray header cells and a gray first column, hairlines between every cell - the same look as the Details spec table, for lists (equipment, invoices, people, documents, exchanges).