/* ALWAYS WHITE (4 Nov 2026, Gale: "change the background to the white please") */
:root{color-scheme:only light}
.posteps{font-size:19px;line-height:1.5;margin:10px 0;color:var(--navy)}
@media (pointer: coarse) and (min-width: 600px){html{zoom:1.15}}   /* 4 Nov: bigger on the tablets */
/* RW Rentals. A counter-tablet app: every control finger-sized, same page by mouse.
   Colours as tokens, light and dark. Matches the mock-up Gale approved, 21 Oct 2026. */
:root{
  --bg:#f3f4f6; --panel:#ffffff; --ink:#1b2230; --muted:#566070; --line:#d6dbe3;
  --navy:#22385e; --navy-soft:#e3eaf6; --ok:#1d7448; --ok-soft:#e1f2e8; --bad:#ad3329; --bad-soft:#fbe5e2;
  --warn:#835400; --warn-soft:#fbefd6; --chip:#eceff4; --on-navy:#ffffff;
  --tap:56px;
  font-family:"Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) and (min-width: 1000000px){:root{
  --bg:#12161d; --panel:#1b212b; --ink:#e8ebf0; --muted:#a0a9b8; --line:#323b4a;
  --navy:#93b3e8; --navy-soft:#22304a; --ok:#72d29d; --ok-soft:#173326; --bad:#f28d83; --bad-soft:#3a1c1a;
  --warn:#eac271; --warn-soft:#3a2e14; --chip:#262d39; --on-navy:#10151d; color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-size:18px;line-height:1.5;
  padding:16px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px))}
.wrap{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
h1{font-size:28px;margin:0;font-weight:650}
h2{font-size:24px;margin:0;font-weight:650}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;gap:18px;min-width:0}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.between{justify-content:space-between}
.sub{color:var(--muted);font-size:16px}
button,.btn{font:inherit;font-size:19px;font-weight:600;color:inherit;cursor:pointer;border:2px solid var(--line);background:var(--panel);
  border-radius:12px;min-height:var(--tap);padding:12px 24px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation}
button:hover,.btn:hover{border-color:var(--muted)}
button:active{transform:scale(.98)}
button:focus-visible,input:focus-visible,.btn:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.pri{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.huge{min-height:96px;font-size:24px;flex:1 1 240px}
label{display:flex;flex-direction:column;gap:8px;font-size:17px;font-weight:600;color:var(--muted)}
input{font:inherit;font-size:22px;color:var(--ink);background:var(--panel);border:2px solid var(--line);border-radius:12px;min-height:64px;padding:12px 14px;width:100%;min-width:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.err{color:var(--bad);font-weight:600;min-height:1.2em}
.box{border-radius:12px;padding:14px 16px;font-size:18px}
.box.ok{background:var(--ok-soft);color:var(--ok)}
.box.warn{background:var(--warn-soft);color:var(--warn)}
.box.bad{background:var(--bad-soft);color:var(--bad)}
.box.info{background:var(--navy-soft);color:var(--navy)}
.rule{border:2px solid var(--navy);border-radius:14px;padding:14px 18px;background:var(--navy-soft);color:var(--ink);font-size:19px}
.rule b{color:var(--navy)}
.item{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:none}
.nm{font-weight:650;font-size:20px}
.pill{font-size:15px;padding:5px 12px;border-radius:999px;font-weight:650;white-space:nowrap}
.p-ok{background:var(--ok-soft);color:var(--ok)}.p-warn{background:var(--warn-soft);color:var(--warn)}
.p-bad{background:var(--bad-soft);color:var(--bad)}.p-sgl{background:var(--chip);color:var(--muted)}
.day{font-weight:700;font-size:20px;padding:14px 0 4px;border-bottom:2px solid var(--ink)}
.cust{border:4px solid var(--navy)}
.cust h1{font-size:32px}
.big-msg{font-size:26px;font-weight:650;text-align:center;padding:30px 10px}
.chip{min-height:52px;padding:10px 20px;border-radius:999px;background:var(--chip);border:2px solid transparent;font-size:17px}
.chip.on{background:var(--navy-soft);color:var(--navy);border-color:var(--navy)}
select{font:inherit;font-size:22px;color:var(--ink);background:var(--panel);border:2px solid var(--line);border-radius:12px;min-height:64px;padding:10px 12px;width:100%}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.prod{display:flex;flex-direction:column;align-items:stretch;gap:8px;text-align:left;padding:10px;font-size:15px;line-height:1.3;font-weight:600}
.prod img,.prod .noimg{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px;background:var(--chip);max-width:100%}
.prod .noimg{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .dow{text-align:center;font-size:15px;font-weight:650;color:var(--muted);padding:4px 0}
.day-btn{min-height:72px;padding:6px 4px;flex-direction:column;gap:2px;font-size:20px}
.day-btn small{font-size:12px;font-weight:600;color:var(--navy)}
.day-btn.today{border-color:var(--navy)}
.day-btn.past{opacity:.55}
.day-btn.on{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.day-btn.on small{color:var(--on-navy)}
button:disabled,select:disabled,input:disabled{opacity:.6;cursor:default}
.contract{border:2px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.contract p{margin:0;font-size:18px}
.sig-head{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-weight:650}
.sig{width:100%;height:180px;background:#fff;border:2px dashed var(--muted);border-radius:12px;touch-action:none;cursor:crosshair}
.sig-img{max-width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:8px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){button:active{transform:none}}

/* An alteration chosen on the fitting (23 Oct) - easy to spot. */
select.alt-on{background:var(--warn-soft);color:var(--warn);font-weight:650}

/* THE MENU (23 Oct): one big tile per job, two across on a tablet, one on a phone. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
.tile{background:var(--panel);border:2px solid var(--line);border-radius:18px;padding:26px 24px;min-height:150px;
  display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;touch-action:manipulation}
.tile b{font-size:26px;font-weight:650}
.tile span{color:var(--muted);font-size:17px}
.tile:hover{border-color:var(--muted)}
.tile:active{transform:scale(.98)}
.tile.pri{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.tile.pri span{color:var(--on-navy);opacity:.85}
.tile.off{opacity:.55;border-style:dashed;cursor:default}
.tile.off:active{transform:none}

/* PIN screen, Fitting folds, who-is-signed-in (23 Oct). */
input.pin{font-size:30px;letter-spacing:10px;text-align:center}
.tiles.names .tile{min-height:90px;justify-content:center;align-items:center}
.tile:disabled{opacity:.5}
.signedin{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--navy-soft);color:var(--navy);
  border-radius:12px;padding:6px 6px 6px 16px;font-size:18px}
button.whoami{min-height:44px;padding:8px 16px;font-size:16px;background:var(--navy-soft);border-color:var(--navy-soft);color:var(--navy)}
details.fold{border-top:1px solid var(--line)}
details.fold>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;
  min-height:var(--tap);padding:12px 4px;list-style:none;touch-action:manipulation}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:"\25BE";color:var(--navy);font-size:32px;line-height:1}   /* bigger (4 Nov) */
details.fold[open]>summary::after{content:"\25B4"}
details.fold.inner{margin-left:18px;padding-left:12px;border-left:3px solid var(--line);border-top:0}
a.item.man{text-decoration:none;color:inherit}

/* THE KEYPAD (23 Oct) - like Shopify POS: 1 2 3 / 4 5 6 / 7 8 9 / Clear 0 delete. */
.pinpanel{max-width:460px;width:100%;margin:0 auto;align-items:center}
.center{text-align:center}
.keypad{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%}
.keypad .dots{display:flex;gap:18px}
.keypad .dots span{width:20px;height:20px;border-radius:50%;border:2px solid var(--navy)}
.keypad .dots span.on{background:var(--navy)}
.keypad .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;max-width:360px}
.keypad .keys button{min-height:84px;font-size:34px;font-weight:600;border-radius:16px;padding:0}
.keypad .keys button.soft{font-size:19px;color:var(--muted);background:var(--chip);border-color:var(--chip)}
.keypad.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
@media (prefers-reduced-motion:reduce){.keypad.shake{animation:none}}

/* The title on the left; Menu / Rental counter and Switch together on the right (23 Oct). */
header>h1{margin-right:auto}

/* Phone lookup found him (23 Oct). */
.sub.found{color:var(--ok);font-weight:650}

/* The phone look-up drop-down (23 Oct): the name(s) on file, tap one to fill in. */
.suggest{display:flex;flex-direction:column;border:2px solid var(--navy);border-radius:12px;overflow:hidden;margin-top:-8px}
.suggest button{border:0;border-radius:0;justify-content:flex-start;background:var(--navy-soft);color:var(--navy);min-height:var(--tap)}
.suggest button+button{border-top:1px solid var(--line)}

/* Fitting's third fold - one man (23 Oct). */
details.fold.man{margin-left:8px}
.manbody{display:flex;flex-direction:column;gap:12px;padding:4px 4px 16px}
button:disabled{opacity:.5;cursor:default}

/* A small, out-of-the-way button (Special order, 23 Oct). */
.btn.small{min-height:44px;padding:8px 16px;font-size:16px}

/* Create order draft: the Outfit / Deposit ticks (23 Oct). */
label.tick{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);padding:6px 14px;
  border:2px solid var(--line);border-radius:12px;font-weight:600;cursor:pointer}
label.tick input{width:26px;height:26px}
button.small{min-height:44px;padding:8px 16px;font-size:16px}

/* Copy an outfit: one tickable row per man (24 Oct). */
label.item.tickrow{cursor:pointer}
label.item.tickrow input{width:28px;height:28px;flex:none}

/* Pickup / return (24 Oct). */
.manbag{border-top:1px solid var(--line);padding:10px 0;display:flex;flex-direction:column;gap:10px}
label.tick .x{min-height:32px;padding:0 10px;margin-left:6px;font-size:18px;border:0;background:none;color:var(--muted)}
.piece{border-bottom:1px dashed var(--line);padding:6px 0}
input.pnote{margin:4px 0 8px}

/* One box per size pair: the pop-up list of 42S / 42R ... or 34 x 30 ... (24 Oct). */
.combo{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.combo button{min-height:46px;padding:6px 12px;font-size:17px}
/* "34 - rental hem" stands out from the outseams (24 Oct). */
.combo button.hem{border-color:#b45309;color:#b45309;font-weight:600}
.hemto{margin-top:8px}
/* "Use 34 X 50" - a size typed in that is not on the list (24 Oct). */
.combo button.own{border-style:dashed}
/* Wide shoes stand out from mediums (24 Oct). */
.combo button.wide{font-weight:700}
/* The stage line (24 Oct). */
.stages{display:flex;flex-wrap:wrap;gap:4px;flex-basis:100%;margin:4px 0}
.stg{font-size:14px;padding:4px 10px;border-radius:999px;background:var(--chip);color:var(--muted)}
.stg.past{opacity:.55;text-decoration:line-through}
.stg.now{background:#22385e;color:#fff;font-weight:700;opacity:1;text-decoration:none}
.stagebtn{flex-basis:100%}
/* "Not in stock? Special order" under each size box (24 Oct). */
.sublink{display:inline-block;margin-top:6px;font-size:14px;color:var(--muted);text-decoration:underline}
/* The party list at the top of the customer's screen (24 Oct). */
.plist{display:grid;gap:6px;padding:14px 16px;border-radius:12px;background:var(--ok-soft)}
.prow{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:12px;font-size:20px}
.prole{color:var(--muted);font-weight:650}
/* A touch smaller on everything so more fits on the tablet (Gale, 24 Oct: "if its a 10 lets
   try 8"). Change this one number to adjust. */
html{zoom:.8}
/* Parent or guardian boxes (24 Oct). */
.guard{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border:2px dashed var(--line);border-radius:12px}
/* "No cell? Type their name" - a plain link-looking button (24 Oct). */
.linkish{border:0;background:none;padding:6px 0;min-height:0;font-size:16px;font-weight:600;color:var(--muted);text-decoration:underline}

/* ============ THE ONE-PAGE FORM (26 Oct 2026) - Gale's look: navy bar, grey and white ============ */
body.oneform .wrap{max-width:1240px}
header.brand{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:#22385e;color:#fff;
  border-radius:10px;padding:8px 14px;gap:10px}
header.brand a,header.brand .who{color:#fff;text-decoration:none;font-size:15px}
header.brand .navs{display:flex;gap:16px;align-items:center;flex-wrap:wrap}   /* Main menu, Rental menu (31 Oct) */
header.brand .who{justify-self:end;display:flex;align-items:center;gap:10px}
header.brand .who button{min-height:34px;padding:4px 12px;font-size:14px;background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.brandname,.serif{font-family:'EB Garamond',Garamond,'Times New Roman',Georgia,serif;font-weight:500}
.brandname{font-size:24px;letter-spacing:.04em;white-space:nowrap}
@media (max-width:640px){.brandname{font-size:19px} header.brand{grid-template-columns:auto 1fr auto}}
/* THE NAME IN THE NAVY BAR IN CINZEL (2 Nov 2026, Gale picked it: wide Roman capitals, the Ralph Lauren / Brooks Brothers look;
   the page titles stay EB Garamond) */
.brandname{font-family:'Cinzel','Times New Roman',Georgia,serif;font-weight:500;font-size:27px;line-height:1;letter-spacing:.18em;text-transform:uppercase}
@media (max-width:1000px){.brandname{font-size:23px;letter-spacing:.12em}}
@media (max-width:640px){.brandname{font-size:15px;letter-spacing:.06em}}
/* bigger name, same bar height (2 Nov, Gale: "keep the bar height make the font bigger less space above and below") */
header.brand{padding-top:3px;padding-bottom:3px;min-height:40px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;align-items:start}
.tbox{background:var(--panel);border:1px solid #c9d1dd;border-radius:12px;padding:14px 16px;display:grid;gap:4px;min-width:0}
.tbox .tsplit{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.tbox .tmain{min-width:0;display:grid;gap:2px}
.tbox .tbtns{display:grid;gap:8px;align-content:start;flex:none}
.tbox .tbtns > *{min-height:42px;padding:6px 14px;font-size:15px;text-align:center;justify-content:center}
.tlab{font-size:14px;color:var(--muted)}
.tname{font-size:22px}
.tbig{font-size:22px;font-weight:650}
.tdiv{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.needs{color:var(--bad);font-weight:650}
.signed{color:var(--ok);background:var(--ok-soft);border-radius:10px;font-weight:650;display:flex;align-items:center}
button.signbtn{color:var(--bad);background:var(--bad-soft);border-color:var(--bad)}
button.signbtn.ok{color:var(--ok);background:var(--ok-soft);border-color:var(--ok)}   /* signed: green (27 Oct) */
button.signbtn.ok:disabled{opacity:1}
.ttitle{font-size:24px}
.paddline{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:10px;align-items:center;margin-top:6px}   /* one party member per line (27 Oct) */
.paddline button{min-height:48px}
@media (max-width:760px){.paddline{grid-template-columns:1fr 1fr}}
.tgrid > #partyBox.wide{grid-column:1 / -1}   /* Add party members: the party box full width (28 Oct) */
.prow2{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:17px;align-items:center}
.prow2:first-of-type{border-top:none}
.prow2 a{color:inherit;text-decoration:none}
/* FILL-IN BOXES (Gale: "grey background or something so they know i need to fill this out...a blue font as you type") */
body.oneform input:not([type=checkbox]):not([type=radio]):not([type=button]),body.oneform select,body.oneform textarea{
  background:#e9edf3;color:var(--navy);border-color:#c9d1dd}
body.oneform input:not([type=checkbox]):not([type=radio]):focus,body.oneform select:focus,body.oneform textarea:focus{background:#fff}
body.oneform input::placeholder{color:#7a8597}
@media (prefers-color-scheme: dark) and (min-width: 1000000px){body.oneform input:not([type=checkbox]):not([type=radio]),body.oneform select,body.oneform textarea{background:#262d39}
  body.oneform input:focus,body.oneform select:focus{background:#1b212b}}
/* THE SIGN POP-UP: the customer's own screen, on top of the form */
.signovl{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;display:flex;align-items:center;justify-content:center;padding:6px}
.signbox{background:var(--panel);border-radius:16px;width:100%;max-width:1200px;height:calc(100vh - 12px);display:flex;flex-direction:column;overflow:hidden}
/* inside the pop-up the agreement page is tighter, so it all shows down to Save (27 Oct) */
body.inpop{padding:8px 12px}
body.inpop .wrap{gap:8px;max-width:none}   /* the whole width of the screen (27 Oct) */
body.inpop .panel{padding:12px 16px;gap:8px}
body.inpop .cust h1{font-size:24px}
body.inpop .contract{padding:10px 14px;gap:4px}
body.inpop .contract h2{font-size:19px;margin:0}
body.inpop .contract p{font-size:15px;line-height:1.4}
body.inpop .sig-head{margin-top:2px}
body.inpop .sig{height:130px}
body.inpop button.huge{min-height:52px}
.signbox .signbar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#22385e;color:#fff}
.signbox .signbar button{min-height:36px;padding:4px 12px;font-size:14px;background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.signbox iframe{flex:1;border:0;width:100%}

/* THE PAGE TITLE UNDER THE NAVY BAR (27 Oct 2026, Gale: "more formal decorative" - chose EB Garamond, as in the bar) */
header.pagehead h1{font-family:'EB Garamond',Garamond,'Times New Roman',Georgia,serif;font-weight:500;font-size:34px;letter-spacing:.01em}
/* 27 Oct (Gale: "center the title first letter capital ...make it navy"): navy, each word capitalised - and the menu tiles the same, so the title always matches its button */
header.pagehead h1{color:var(--navy);text-transform:capitalize}
.tile > b{text-transform:capitalize}
/* 27 Oct (Gale: "make the title under the navy bar smaller font it takes up too much space") */
header.pagehead{margin:2px 0 4px}
header.pagehead h1{font-size:27px;line-height:1.15}   /* a little bigger (2 Nov, Gale) */
/* EVERY PAGE TITLE THE SAME (2 Nov, Gale: "make that the page title size same space and size every form"): centred, with a page's
   own button (Rental book, Back ...) small on the right, so the title row is the same height everywhere */
header.pagehead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;min-height:34px}
header.pagehead > h1{grid-column:2;grid-row:1;text-align:center;margin:0}
header.pagehead > :not(h1){grid-column:3;grid-row:1;justify-self:end}
header.pagehead > .btn,header.pagehead > button{min-height:34px;padding:3px 14px;font-size:15px}
/* 27 Oct (Gale: "make fonts in the fields a little smaller"): the one-page form and rental page fill-in boxes */
body.oneform input:not([type=checkbox]):not([type=radio]):not([type=button]),body.oneform select,body.oneform textarea{font-size:18px;min-height:54px;padding:10px 12px}

/* THE SEARCH BAR under the navy bar on every page (2 Nov 2026) */
.onebox{margin:-10px 0 -10px}   /* 6px under the navy bar: the page gap is 16px (2 Nov, Gale: "tighten the gap") */
body.oneform .onebox{margin-top:-4px;margin-bottom:-4px}   /* New Rental Order and the rental page: their gap is 10px */
.onebar{display:flex;gap:8px;align-items:stretch;position:relative}
.onebar #oneQ{flex:1;min-width:0;font-size:19px;min-height:46px;padding:6px 12px}
.onebar #oneCal{flex:0 0 auto;min-width:52px;min-height:46px;padding:0 10px;display:flex;align-items:center;justify-content:center}
.onebar #oneCal svg{width:24px;height:24px}
.onebar #oneDate{position:absolute;right:0;bottom:0;width:58px;height:1px;min-height:0;opacity:0;pointer-events:none;border:0;padding:0}
#oneHint{margin-top:2px;text-align:center;font-size:14px}
#oneHint:empty{display:none}
.oneres{display:grid;gap:4px;margin-top:4px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 10px}
.oneres .item{padding-top:4px;padding-bottom:4px}
.oneres .btn{min-height:40px;padding:4px 16px;font-size:16px}
.oneres:empty{display:none}
.oneres .item{text-decoration:none;color:inherit}
.onehead{font-family:'EB Garamond',Garamond,'Times New Roman',Georgia,serif;font-size:19px;font-weight:500;color:var(--navy)}
@media print{.onebox{display:none}}

/* THE FIELDS AND THEIR LABELS (2 Nov 2026, Gale: "a cleaner font for the fields ... for what you type in but i kinda like a more
   formal one above like the RL site" - picked Nunito Sans typed, Cinzel above). Tick-box labels and the grey hints stay as they were. */
label:not(:has(input[type=checkbox])):not(:has(input[type=radio])){font-family:'Cinzel','Times New Roman',Georgia,serif;font-weight:500;
  font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
input,select,textarea,input::placeholder,textarea::placeholder{font-family:'Nunito Sans','Segoe UI',system-ui,sans-serif;letter-spacing:normal;text-transform:none}
label .hint,label .sub{font-family:'Nunito Sans','Segoe UI',system-ui,sans-serif;letter-spacing:normal;text-transform:none}

/* THE ALL-WHITE LOOK (2 Nov 2026, Gale: "lets try the all white look with the navy button the grey borders please on the fields and
   borders for the form sections") - a white page, white fill-in boxes (they were grey since 27 Oct), grey borders on the boxes and
   on every section; the navy buttons as they are. The box you are in gets a navy border. */
@media all{
  :root{--bg:#ffffff;--line:#c9ced6;--rule:#dcdfe3;--field:#b9bec6}
  body.oneform input:not([type=checkbox]):not([type=radio]):not([type=button]),body.oneform select,body.oneform textarea{background:#fff;border-color:#c9ced6}
  .tbox{border-color:#c9ced6}
  input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{border-color:var(--navy)}
}

/* THIN NAVY LINES INSTEAD OF BOXES (2 Nov 2026, Gale - the Ralph Lauren footer: "lets try this look the thin lines instead of the
   boxes around the sections?" then "make the thin lines navy"). The sections (.tbox, .panel) lose their box: a thin navy line
   above each, and a thin navy line between two sections side by side. The size cards inside a section keep their boxes. */
.tbox,.panel{border:0;border-top:1px solid var(--rule,var(--line));border-radius:0;background:transparent;box-shadow:none;padding-left:6px;padding-right:6px}
.tgrid{column-gap:0}
.tgrid > .tbox{padding-right:16px}
@media (min-width:740px){
  .tgrid > .tbox + .tbox:not(.wide){border-left:1px solid var(--rule,var(--line));padding-left:16px}
  .tgrid:has(#custBox.wide) #evBox{border-left:0;padding-left:6px}
}

/* 2 Nov (Gale: "realy thin narrow one point lines for the fields make the square not have the curve ... the thin lines between the
   sections ... go grey on those like the rl site"): the lines between sections are grey (--rule above); every fill-in box a 1px
   grey line with square corners, and the Search Bar's calendar button the same so it sits with its box */
:root body input:not([type=checkbox]):not([type=radio]):not([type=button]),:root body select,:root body textarea,:root body .onebar #oneCal{
  border-width:1px;border-radius:0;border-color:var(--field,var(--line))}
:root body input:not([type=checkbox]):not([type=radio]):focus,:root body select:focus,:root body textarea:focus{border-color:var(--navy)}

/* SQUARE BUTTONS (2 Nov 2026, Gale: "yes lets try the square on the buttons") - like the Ralph Lauren Submit; every button, link
   button and menu tile, so they sit with the square fill-in boxes */
button,.btn,.tile,a.btn{border-radius:0 !important}

/* the navy bar square too (2 Nov 2026, Gale: "yes go square on the main title menu bar too") */
header.brand{border-radius:0}

/* 2 Nov 2026, Gale: "the small fonts in the main title bar need to match the rest please, yes the size sections just need the very
   narrow thin 1 px lines i dont think they need to touch also a space at corners ... the sections dont touch at the corners".
   - the small words in the navy bar (Main menu, Rental menu, Staff, Switch) in Cinzel spaced capitals, like the name
   - the line between two sections side by side stops short of the lines across, so they do not touch at the corners (RL footer)
   - the size cards in Customer Sizes: no box, a thin 1px grey line over each, a gap between them so the lines do not touch */
header.brand a,header.brand .who,header.brand .who button{font-family:'Cinzel','Times New Roman',Georgia,serif;font-weight:500;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase}
header.brand .who b{font-weight:600}
@media (min-width:740px){
  .tgrid > .tbox + .tbox:not(.wide){border-left:0;position:relative}
  .tgrid > .tbox + .tbox:not(.wide)::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--rule,var(--line))}
  .tgrid:has(#custBox.wide) #evBox::before{display:none}
}
body .szgrid{column-gap:22px;row-gap:8px}
.szgrid .szcard{border:0;border-top:1px solid var(--rule,var(--line));border-radius:0}

/* EVERY FIELD THE SAME HEIGHT (2 Nov 2026, Gale: "you fields are different heights looks weird make them the same in sizes"):
   every fill-in box and drop-down 46px (the Search Bar's height), and in Customer Sizes the boxes in a row line up at the
   bottom even when one label runs to two lines */
:root body input:not([type=checkbox]):not([type=radio]):not([type=button]),:root body select{min-height:46px;height:46px;padding-top:6px;padding-bottom:6px;font-size:17px}
body .szfields{align-items:end}   /* beats form.html own .szfields rule */
.szfields .err:empty{min-height:0;margin:0;padding:0}
body .szgrid{align-items:stretch}
.szgrid .szcard.nopic{align-content:end;align-items:end}

/* a thin vertical line between the left and right size columns, not touching the lines across (2 Nov 2026, Gale: "put a thin
   vertical line between the left and right sections also corners dont touch") */
@media (min-width:761px){
  /* ONE vertical line down the middle, not a piece per row (2 Nov, Gale: "lets make it one vertical line between sections please") */
  body .szgrid{position:relative}
  body .szgrid::before{content:'';position:absolute;left:50%;top:10px;bottom:4px;width:1px;background:var(--rule,var(--line))}
}

/* the size boxes narrower (2 Nov 2026, Gale: "the size fields are too wide they can be shorter too"): each about a size wide,
   the Cut drop-down right beside it; a long label runs to two lines */
body .szfields{grid-template-columns:minmax(0,200px) 120px;justify-content:start}
/* the Vest and Shoe boxes (no Cut beside them) the same narrow width */
.szcard input:not([type=checkbox]):not([type=radio]){max-width:200px}

/* the customer pop-up's navy bar like the main navy bar (2 Nov 2026, Gale: "lets make this form same look as the others"):
   Cinzel spaced capitals, square corners */
.signbox .signbar b{font-family:'Cinzel','Times New Roman',Georgia,serif;font-weight:500;font-size:16px;letter-spacing:.14em;text-transform:uppercase}
.signbox .signbar button{font-family:'Cinzel','Times New Roman',Georgia,serif;font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.signbox,.signbox .signbar{border-radius:0}

/* the name centred in the customer pop-up bar, like the main navy bar (2 Nov 2026, Gale: "center the Rw tux rental also") */
.signbox .signbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.signbox .signbar b{grid-column:2;grid-row:1;text-align:center}
.signbox .signbar button{grid-column:3;grid-row:1;justify-self:end}

/* the name in the customer pop-up bar a little bigger (2 Nov 2026, Gale: "make the font a little bigger on rw tux rental") */
.signbox .signbar b{font-size:22px;line-height:1.1}
@media (max-width:640px){.signbox .signbar b{font-size:16px}}

/* THE CUSTOMER'S FORM FULL PAGE (2 Nov 2026, Gale: "lets just make it a form ... as in full page"): no dimmed edge, no box */
.signovl{padding:0;background:var(--bg);align-items:stretch}
.signbox{max-width:none;height:auto;min-height:100%;border-radius:0}

/* TITLE LEFT, SEARCH BAR RIGHT, ONE LINE (2 Nov 2026, Gale: "lets try the title on the left space bar on the right same line") */
.topline{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:20px;margin:-6px 0 -6px}
.topline header.pagehead{display:flex !important;align-items:center;gap:10px;margin:0 !important;min-height:46px;justify-content:flex-start !important}
.topline header.pagehead > h1{margin:0 !important;text-align:left !important;white-space:nowrap;grid-column:auto}
.topline header.pagehead > :not(h1){grid-column:auto;justify-self:auto}
.topline .onebox{margin:0 !important}
body.oneform .topline{margin:-2px 0 -2px}
@media (max-width:760px){.topline{grid-template-columns:minmax(0,1fr);gap:6px}}