/* The Customise panel. The room stays in view and stays live behind it: docked to the side on a desktop, a sheet on a phone. */
.customise-back { background: none; pointer-events: none; place-items: stretch end; padding: 14px; }
.modal.customise { pointer-events: auto; width: min(480px, 100%); max-height: none; height: 100%; background: var(--paper); }
.customise .modal-head { padding: 12px 14px 4px 20px; }
.customise .modal-head h2 { font-size: 21px; }
.customise .modal-body { padding: 0; overflow: hidden; display: flex; flex: 1; min-height: 0; }
.custom-form { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.custom-tabs { display: flex; gap: 2px; padding: 0 12px; flex: none; overflow-x: auto; scrollbar-width: none; }
.custom-tabs .tab { flex: 1 0 auto; min-height: 42px; }
.custom-pane { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 18px 18px; }
.custom-foot { flex: none; display: flex; gap: 10px; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 2px solid var(--line); background: var(--paper-2); }
.custom-foot .btn { min-height: 46px; }
.custom-pane textarea, .custom-pane input:not([type]) { font-size: 16px; }
.custom-pane .chip { min-height: 36px; padding: 5px 13px; }
.custom-pane .swatch { width: 32px; height: 32px; }
.field-hint { color: var(--ink-2); font-size: 14px; line-height: 1.4; display: block; }

.vibes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.vibe { display: grid; grid-template-columns: 34px 1fr; column-gap: 9px; align-items: center; text-align: left; padding: 10px; min-height: 66px; border-radius: 14px; border: 2px solid var(--line); background: var(--white); color: inherit; }
.vibe:hover { background: var(--white); }
.vibe[aria-checked="true"] { background: var(--sun); border-color: var(--ink); box-shadow: 0 3px 0 var(--sun-d); }
.vibe-swatch { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.vibe b { font-size: 14px; }
.vibe small { color: var(--ink-2); font-size: 14px; line-height: 1.25; }
.tone-sample { margin: 0; padding: 9px 12px; border-radius: 12px; background: var(--white); font-size: 15px; color: var(--ink-2); font-style: italic; }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.plan { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 8px; border-radius: 14px; border: 2px solid var(--line); background: var(--white); color: inherit; }
.plan[aria-checked="true"] { background: var(--sun); border-color: var(--ink); box-shadow: 0 3px 0 var(--sun-d); }
.plan b { font-size: 15px; }
.plan small { color: var(--ink-2); font-size: 14px; line-height: 1.25; }
.plan-thumb { width: 100%; height: auto; border-radius: 8px; display: block; }

.color-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.color-wheel { width: 44px; height: 36px; padding: 2px; border-radius: 10px; border: 2px solid var(--line); background: transparent; }

.private-box, .hire-box { display: flex; flex-direction: column; gap: 11px; padding: 13px; border-radius: 16px; background: var(--paper-2); border: 2px solid var(--line); }
.hire-box { margin-top: 14px; }
.private-box h3, .hire-box h3 { margin: 0; font: 600 13.5px var(--sans); display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.private-box h3 small, .hire-box h3 small { color: var(--ink-2); font-weight: 400; font-size: 14px; }
.let-go { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding-top: 4px; }
.let-go .btn { min-height: 42px; }
.make-yours { margin-top: 2px; font-weight: 600; text-align: left; min-height: 44px; }

.customise .char-builder { grid-template-columns: 1fr; gap: 12px; }
.customise .char-stage { position: sticky; top: -14px; z-index: 3; background: linear-gradient(#bfe6dc 0 70%, #94c9bc 70%); }
.customise .char-preview { height: 200px; }
.look-presets .surprise { font-weight: 600; border-color: var(--brand-2); }

@media (max-width: 760px) {
  .customise-back { padding: 0; place-items: end stretch; }
  .modal.customise, .modal.customise.wide { width: 100%; height: 88dvh; max-height: 88dvh; border-radius: 20px 20px 0 0; transition: height .22s ease; }
  /* On the two tabs that change the room, the sheet stops short so the room is on screen above it. */
  .modal.customise.short { height: 58dvh; max-height: 58dvh; }
  .customise .modal-head { padding: 8px 10px 0 16px; }
  .customise .modal-head h2 { font-size: 18px; }
  .custom-pane { padding: 12px 14px 16px; }
  .custom-foot { padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); }
  .customise .char-preview { height: 170px; }
  .vibe { min-height: 62px; padding: 9px; }
}

.modal.customise { box-shadow: -6px 0 0 var(--teal-d), 0 20px 50px rgba(0, 0, 0, .4); border-radius: 0; animation: fadein .14s; }  /* docked, so it fades in where it stays */
.vibe, .plan { background: var(--white); color: var(--ink); box-shadow: 0 3px 0 #bda876; }
.vibe:hover, .plan:hover { background: #fff; }
.vibe small, .plan small { color: var(--ink-2); }
.vibe b, .plan b { font-weight: 700; }
.custom-tabs { background: var(--paper-2); }

/* Hours: the opening-hours plate on the door, then how the team works. */
.hours-plate { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 210px; padding: 11px 22px 12px; border-radius: 8px; background: linear-gradient(155deg, var(--brass), var(--brass-d)); color: #1e1403; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25), 0 3px 0 #000; text-align: center; }
.hours-plate small { font: 700 12px var(--cond); letter-spacing: .1em; text-transform: uppercase; color: #3f2c08; }
.hours-plate b { font: 400 28px/1.05 var(--display); }
.hours-plate span { font: 700 15px var(--cond); letter-spacing: .04em; }
.hours-plate[data-mode="ask"] b { color: #3f2c08; }
.mode-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.mode-card { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px; min-height: 84px; border-radius: 14px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.mode-card b { font: 700 16px var(--sans); }
.mode-card small { font-size: 13.5px; line-height: 1.25; color: var(--ink-2); }
.mode-card:hover { background: var(--white); }
.mode-card[aria-checked="true"] { background: var(--sun); border-color: var(--ink); box-shadow: 0 3px 0 var(--sun-d); }
.day-chips .chip[aria-pressed="true"] { background: var(--ink); color: var(--sun); box-shadow: 0 3px 0 #000; }
.time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.time-row input, .hours-when select { font: 600 16px var(--sans); min-height: 40px; }
@media (max-width: 560px) { .mode-pick { grid-template-columns: 1fr; } .mode-card { min-height: 0; } }