/* ==========================================================================
   OAK TREE — /groups/ configurator.  v2 · G2
   Dark page (body.dark). Reuses journey.css form primitives (.field, .fgrid,
   .checks) restyled for glass-on-ink, plus the configurator's own layout.
   ========================================================================== */

/* ---------- configurator follows the hero's expandable how-it-works seam ---------- */
.gq-first{padding-top:clamp(104px,13vw,150px);}
.esec h1{font-family:var(--display);font-weight:300;font-size:clamp(30px,4vw,52px);line-height:1.04;letter-spacing:-.02em;color:var(--bone);}
.esec h1 em{font-style:italic;color:var(--peach);}
.gq-first .chapter-meta{margin-top:18px;}

/* ---------- two-column shell: steps left, estimate rail right ---------- */
.gq{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(26px,3.6vw,58px);align-items:start;}
@media (max-width:960px){.gq{grid-template-columns:1fr;}}
.gq-side{position:sticky;top:84px;}
@media (min-width:961px){
  /* the rail may never clip: it caps at the viewport and scrolls inside itself */
  .gq-side .gq-est{max-height:calc(100svh - 108px);overflow:auto;overscroll-behavior:contain;}
}
@media (max-width:960px){.gq-side{position:static;}}

/* ---------- steps ---------- */
.gq-step{border-top:1px solid rgba(244,239,230,.2);padding:clamp(22px,2.8vw,34px) 0;}
.gq-step:first-child{border-top:0;padding-top:0;}
.gq-step h3{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.01em;color:var(--bone);margin-bottom:6px;}
.gq-step .ghint{font-size:14px;color:rgba(244,239,230,.68);margin-bottom:18px;max-width:58ch;text-wrap:pretty;}

/* dark-glass form fields (journey.css defaults are for bone panels) */
.gq .field label{color:var(--amber);}
.gq .field input,.gq .field select,.gq .field textarea{
  background:rgba(10,9,7,.42);border-color:rgba(244,239,230,.24);color:var(--bone);
  color-scheme:dark;
}
.gq .field input::placeholder,.gq .field textarea::placeholder{color:rgba(244,239,230,.4);}
.gq .field input:focus,.gq .field select:focus,.gq .field textarea:focus{border-color:var(--peach);box-shadow:0 0 0 3px rgba(255,185,138,.18);}
.gq .checks .ck span{border-color:rgba(244,239,230,.32);color:var(--bone);}
.gq .checks input:checked + span{background:var(--bone);border-color:var(--bone);color:var(--ink);}
.gq .checks input:focus-visible + span{box-shadow:0 0 0 3px rgba(255,185,138,.3);}
.gq .fine{font-size:12px;color:rgba(244,239,230,.55);}
/* The date fields open a calendar of our own (group-quote.js), because a phone's picker ignores which days can be booked.
   It hangs under its field. A day that cannot be booked is a disabled button: faint, struck through, and it takes no tap.
   Days are 40px targets. */
.gq .field{position:relative;}
.gq .field input[data-cal]{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none;}   /* a text box that is only ever pressed: no caret, no selection handles on a phone */
.gq-cal{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);max-width:344px;box-sizing:border-box;padding:12px;border:1px solid rgba(244,239,230,.34);border-radius:12px;background:#1d1914;color:var(--bone);}
.gq-cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.gq-cal-head strong{font:700 15px/1.2 Nunito,system-ui,sans-serif;}
.gq-cal-head button{width:40px;height:40px;padding:0;border:1px solid rgba(244,239,230,.3);border-radius:50%;background:none;color:var(--bone);font:400 22px/1 Nunito,system-ui,sans-serif;cursor:pointer;}
.gq-cal-head button:disabled{opacity:.25;cursor:default;}
.gq-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.gq-cal-dow{padding:4px 0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:center;color:rgba(244,239,230,.55);}
.gq-cal-grid button{height:40px;padding:0;border:1px solid transparent;border-radius:8px;background:rgba(244,239,230,.07);color:var(--bone);font:700 14px/1 Nunito,system-ui,sans-serif;cursor:pointer;}
.gq-cal-grid button:hover:not(:disabled){border-color:var(--peach);}
.gq-cal-grid button[aria-pressed="true"]{background:var(--clay);border-color:var(--clay);color:#fff;}
.gq-cal-grid button:disabled{background:none;color:rgba(244,239,230,.26);font-weight:400;text-decoration:line-through;cursor:default;}
.gq-cal button:focus-visible{outline:2px solid var(--peach);outline-offset:2px;}
.gq-cal-note{margin:10px 2px 0;font-size:12px;line-height:1.45;color:rgba(244,239,230,.62);}
.gq-cal-clear{margin:10px 0 0;padding:8px 0;border:0;background:none;color:var(--peach);font:700 13px/1 Nunito,system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}

/* ---------- activity cards: the only activity selector. A chosen card opens its own options. ---------- */
.gq-packs{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width:640px){.gq-packs{grid-template-columns:1fr;}}
.gq-pack{position:relative;text-align:left;border:1px solid rgba(244,239,230,.22);border-radius:12px;
  background:rgba(10,9,7,.28);transition:border-color .2s ease,background .2s ease;}
.gq-pack:hover{border-color:var(--amber);}
.gq-pack:has([data-act]:checked){border-color:var(--amber);background:rgba(255,217,168,.1);}
.gq-pack:has([data-act][aria-invalid="true"]){border-color:#ffb293;}
.gq-pack-main{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;cursor:pointer;}
.gq-pack-main input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--clay);cursor:pointer;flex:none;}
.gq-pack .opts{display:none;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;padding:0 16px 16px 46px;}
.gq-pack:has([data-act]:checked) .opts{display:flex;}
.gq-pack .opt{display:grid;gap:5px;}
.gq-pack .opt label{font-size:13px;color:var(--amber);}
.gq-pack .opt select{font:inherit;font-size:14px;color:var(--bone);background-color:rgba(10,9,7,.5);
  border:1px solid rgba(244,239,230,.28);border-radius:8px;padding:8px 30px 8px 10px;color-scheme:dark;
  -webkit-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 10px center;background-size:12px 8px;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b7a68f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.gq-pack .opt select:focus{outline:none;border-color:var(--peach);}
.gq-pack-note{flex-basis:100%;margin:2px 0 0;font-size:13.5px;line-height:1.5;color:rgba(244,239,230,.7);text-wrap:pretty;}
.gq-pack-note.form-error{color:#ffb293;}
.gq-pack-note[hidden]{display:none;}
@media (max-width:640px){.gq-pack .opts{padding-left:16px;}}
.gq-pack .nm{font-family:var(--serif);font-weight:500;font-size:17.5px;color:var(--bone);}
.gq-pack .sz{font-family:var(--mono);font-size:10.5px;color:var(--amber);display:block;margin-top:3px;}
.gq-pack .one{font-size:12.5px;color:rgba(244,239,230,.62);margin-top:6px;text-wrap:pretty;}

/* ---------- the kitchen's group meals: one choice, each card says what is in it ---------- */
.gq-meals{display:grid;gap:10px;}
.gq-meals-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;}   /* No food and Drinks only share the first row */
.gq-meal{position:relative;display:grid;grid-template-columns:20px 1fr;column-gap:14px;row-gap:4px;align-items:start;cursor:pointer;
  border:1px solid rgba(244,239,230,.22);border-radius:12px;padding:14px 16px;background:rgba(10,9,7,.28);transition:border-color .2s ease,background .2s ease;}
.gq-meal:hover{border-color:var(--amber);}
.gq-meal:has(input:checked){border-color:var(--amber);background:rgba(255,217,168,.1);}
/* The radio is drawn here, not by the browser: these inputs sit inside .field, whose text-input padding, border, and
   radius would otherwise reach them, and a phone then renders a swollen circle that crowds the label. */
.gq .gq-meal input{grid-row:1 / span 3;-webkit-appearance:none;appearance:none;box-sizing:border-box;width:20px;height:20px;margin:1px 0 0;padding:0;
  border:1.5px solid rgba(244,239,230,.55);border-radius:50%;background:transparent;box-shadow:none;cursor:pointer;transition:none;}
.gq .gq-meal input:checked{border-color:var(--clay);background:radial-gradient(circle,#fff 0 3.5px,var(--clay) 4.5px);}
.gq .gq-meal input:focus{border-color:rgba(244,239,230,.55);box-shadow:none;}
.gq .gq-meal input:checked:focus{border-color:var(--clay);}
.gq .gq-meal input:focus-visible{box-shadow:0 0 0 3px rgba(255,185,138,.35);}
.gq .gq-meal .nm{grid-column:2;font:700 16px/1.3 Nunito,system-ui,sans-serif;color:var(--bone);}
.gq .gq-meal .one{grid-column:2;font-size:14px;font-weight:400;line-height:1.5;color:rgba(244,239,230,.7);}
.gq-meal-items{grid-column:2;margin:2px 0 0;padding:0 0 0 18px;font-size:14px;font-weight:400;line-height:1.55;color:rgba(244,239,230,.7);}
.gq-meal-items li{margin:2px 0;}

/* ---------- estimate rail ---------- */
.gq-est .kicker{display:flex;align-items:center;gap:10px;}
.gq-est .demo{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--amber);
  border:1px solid currentColor;border-radius:999px;padding:2px 8px;}
.est-lines{width:100%;border-collapse:collapse;margin-top:14px;}
.est-lines td{padding:7px 0;border-bottom:1px solid rgba(244,239,230,.12);font-size:13px;color:rgba(244,239,230,.85);vertical-align:top;}
.est-lines td.n{text-align:right;font-family:var(--mono);font-size:12.5px;white-space:nowrap;color:var(--bone);}
.est-lines .q{display:block;font-family:var(--mono);font-size:10.5px;color:rgba(244,239,230,.5);margin-top:2px;}
.est-lines .tbd td{color:rgba(244,239,230,.6);}
.est-lines .tbd td.n{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);}
.est-tot{width:100%;border-collapse:collapse;margin-top:6px;}
.est-tot td{padding:5px 0;font-size:13px;color:rgba(244,239,230,.75);}
.est-tot td.n{text-align:right;font-family:var(--mono);color:var(--bone);white-space:nowrap;}
.est-tot tr.grand td{padding-top:10px;font-weight:800;font-size:14.5px;color:var(--bone);border-top:1px solid rgba(244,239,230,.28);}
.est-tot tr.grand td.n{font-size:17px;}
.est-tot tr.dep td{color:var(--amber);}
.est-empty{margin-top:14px;font-size:13.5px;color:rgba(244,239,230,.6);}
.est-per{font-family:var(--mono);font-size:11.5px;color:var(--amber);margin-top:10px;}

/* ---------- mobile running-total pill ---------- */
.gq-pill{display:none;}
@media (max-width:960px){
  .gq-pill{display:flex;position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:120;
    align-items:center;gap:10px;background:var(--clay);color:#fff;border-radius:999px;
    padding:11px 20px;font-weight:800;font-size:13.5px;box-shadow:0 14px 34px -12px rgba(6,5,4,.9);
    border:1px solid rgba(255,255,255,.2);}
  .gq-pill .amt{font-family:var(--mono);font-weight:400;}
  .gq-pill.hide{display:none;}
}

/* ---------- filming branch ---------- */
.gq-film[hidden]{display:none;}

/* ---------- send modal (contact collected on demand, v2 · G8) ---------- */
.gq-modal .gsum{font-family:var(--mono);font-size:12px;color:var(--amber);margin:4px 0 2px;}
.rid{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--amber);
  border:1px dashed rgba(255,217,168,.5);border-radius:8px;padding:8px 12px;display:inline-block;margin:6px 0 14px;}
.gq-est .btn.sent{opacity:.75;pointer-events:none;border-color:rgba(244,239,230,.4);background:none;color:var(--bone);}

@media (prefers-reduced-motion:reduce){
  .gq-pack,.gq-meal,.gq .field input,.gq .field select,.gq .field textarea{transition:none;}
}