/* Rules this build adds on top of the prototype's site.css: where the PHP
   page uses a native control or a server-rendered element the prototype
   drew with script. Tokens and the fixed scale only, as the Brand tab. */

/* the phone menu button only shows on a phone (the prototype hid it with script) */
#btn-menu{display:none}
@media (max-width:999px){#btn-menu{display:inline-flex}}

/* the booking panel's tabs are links here, not buttons */
a.booktab{text-decoration:none}

/* the booking panel's controls are links here where the prototype drew buttons: no link underline, tab titles centred */
.icobtn,a.booktab,a.calnav,a.cday,a.slot,a.slotchip{text-decoration:none}
a.booktab{display:flex;align-items:center;justify-content:center;text-align:center}

/* rows the typed search hides stay hidden (.qf-opt sets display:flex) */
.qf-list [hidden]{display:none}

/* the stepper carries a real number input inside its output so the form posts it; it reads as the prototype's plain figure */
.stepper output input{appearance:none;-moz-appearance:textfield;border:0;background:none;width:100%;height:100%;padding:0;margin:0;text-align:center;font:inherit;font-weight:600;color:var(--ink);line-height:inherit}
.stepper output input::-webkit-inner-spin-button,.stepper output input::-webkit-outer-spin-button{appearance:none;margin:0}
.stepper output input:focus-visible{outline-offset:-3px}

/* changing a booking: a time is a button in the hold form; who's moving as tick rows; the day of the booking now */
button.slot{font:inherit;color:inherit}
.chg-people{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:2px}
.chg-person{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;font-size:.9375rem;color:var(--ink)}
.chg-person + .chg-person{border-top:1px solid var(--rule-soft)}
.chg-person input{width:20px;height:20px;flex:none;margin:0}
.chg-person-name{flex:1;min-width:0}
.cday[data-current="1"],.calkey[data-current="1"]{box-shadow:inset 0 0 0 2px var(--sup)}
.chg-to{border-color:var(--sup);background:var(--sup-wash)}

/* the booking panel redraws in place: the tickets and hire step is #tickets here, and a step being fetched dims a touch */
#tickets{scroll-margin-top:var(--snap-top,254px)}
#bookbox-mount[aria-busy="true"] .bookbox-body{opacity:.6;transition:opacity .12s}

/* each person's Share and Edit or Add sit on one line, right-aligned, as the prototype's action cell */
.acct-people td.r .lineacts{flex-wrap:nowrap;justify-content:flex-end;gap:2px 12px;white-space:nowrap}

/* the prototype's declaration styles (src/05b-declarations.html), which site.css did not carry: the note, the count bar, the You tag */
.dec-copy{margin:0;font-size:.8125rem;line-height:1.5;color:var(--ink-2)}
.dec-count{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:.875rem;color:var(--ink);white-space:nowrap}
.dec-count .dec-bar{flex:1 1 120px}
.dec-count b{font-size:1.0625rem}
.dec-bar{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;min-width:120px;flex:1}
.dec-bar span{display:block;height:100%;background:var(--go)}
.tag-you{background:var(--sup-wash);color:var(--sup-deep);border-color:var(--sup)}


/* hire start times are radio pills: the radio is hidden, the pill shows the choice; a time that cannot supply the boats greys out (the prototype's .starts .pill[disabled]) */
.starts .pill input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.starts .pill{position:relative;cursor:pointer}
.starts .pill[disabled]{cursor:not-allowed}
.starts .pill:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}

/* landing on the results or the enquiry form from another page: clear of the sticky header */
#browse-results,#enquire,#browse-finder{scroll-margin-top:calc(var(--hdr-h,70px) + 8px)}

/* the footer headings are h2 here (heading order); the prototype's phone size for its h4 applies to them too */
@media(max-width:600px){.ftr h2{font-size:.875rem;margin-bottom:6px}}

/* a notice told to hide stays hidden (the icon notice sets display:flex, which beat [hidden]) */
.notice[hidden]{display:none}

/* How long? lengths are radio cards, as the prototype's slot buttons: the radio is hidden, the card shows the choice */
#book-dur .slot input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
#book-dur .slot{position:relative;cursor:pointer;display:block}
#book-dur .slot[hidden]{display:none}

/* checkout, ways to pay: with a wallet on offer each row is a real radio before its label and body (the prototype drew buttons
   with script), so the chosen row and its body show with no script. The wallet marks are the official artwork on its own black
   ground, drawn in the image files (assets/img/pay), so no colour is set here. */
.paylist{position:relative}
.payopt-in{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.payopt-in + .payopt{margin:0}
.payopt-in ~ .payopt-in + .payopt{border-top:1px solid var(--rule)}
.payopt-in:checked + .payopt{background:var(--sup-wash);font-weight:600}
.payopt-in:checked + .payopt .payopt-radio{border-color:var(--sup)}
.payopt-in:checked + .payopt .payopt-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--sup)}
.payopt-in:focus-visible + .payopt{outline:2px solid var(--sup-deep);outline-offset:-2px}
.payopt-in:not(:checked) + .payopt + .payopt-body{display:none}
.payopt-in + .payopt + .payopt-body{padding-top:12px}
.payopt-mark.payopt-mark-art{width:auto;height:auto;border:0;background:none}
.payopt-mark-art img{display:block;height:30px;width:auto;border-radius:6px}