/* ============================================================
   Rustic Wood Company - calculator and modal styling
   Built 26 August 2026. Rewritten 1 September 2026 to sit inside
   the locked card shell rather than bring a card of its own.

   LOAD ORDER IS LOAD-BEARING. Linked immediately after the inline
   </style> in index.html. It relies on source order to win against
   the mobile overrides in that inline block. Moving the link
   earlier silently reverses that. Doc 02, "The files".

   WHAT THIS FILE MAY AND MAY NOT TOUCH.
   The seam between the hero and the trust strip is LOCKED. The card's
   position, width, ground, shadow and the band beneath it all live in
   index.html and are not redefined here. This file styles what is
   INSIDE the card, plus the modal the card lifts into.

   The one exception is height. The shell's --rwc-calc-h was a
   placeholder for a 430px card; calculator.js now measures the real
   card and writes that variable, exactly as the shell's own comment
   anticipates. The band follows on its own.

   Brand tokens come from index.html :root. Nothing is redefined here.
   ============================================================ */

/* ---------- The shell, adapted ----------
   Content now flows from the top rather than being centred as a block,
   because the card has a progress bar at the top and a nav at the foot.
   The head stays centred; the questions do not. */
.rwc-calc-card{
  justify-content: flex-start;
  /* Scroll, not clip. The card's height is pinned to step 1 so the seam
     cannot move; if a visitor ends up back on a taller step after closing
     the modal, the content scrolls inside the card rather than being cut. */
  overflow-y: auto;
}

/* The slot was a dashed placeholder area. With the real calculator in it,
   it is just the body of the card. */
.rwc-calc-card__slot{
  margin-top: 22px;
  padding-top: 0;
  border-top: 0;
  width: 100%;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Grow into the card. The card's height is pinned to step 1, so on any
     shorter step (close the modal on step 2 and the card keeps that height)
     a slot that only takes its content height left a hole under the nav
     buttons. Growing puts the nav back on the floor of the card, where
     margin-top:auto always meant it to sit. Efa, 2 Sep 2026. */
  flex: 1 1 auto;
}

/* The form is the layer between the slot and the steps. Without it flexing
   too, a step could not reach the floor of the card: the slot grew, the form
   stayed at content height, and the nav buttons floated with a hole beneath
   them on any step shorter than step 1. */
#calcForm{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- Progress ---------- */
.rwc-calc__progress{
  height: 3px;
  border-radius: 2px;
  background: rgba(90,57,43,.13);
  margin: 0 0 18px;
  overflow: hidden;
  flex: 0 0 auto;
}
.rwc-calc__progress-fill{
  display: block;
  height: 100%;
  width: 0;
  background: var(--rwc-accent);
  transition: width .3s ease;
}

/* ---------- Steps ---------- */
.rwc-step{ display: none; }
.rwc-step.is-current{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

.rwc-step fieldset{
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;                     /* grid/flex overflow guard, doc 02 */
}

.rwc-step legend,
.rwc-step__q{
  display: block;
  font-family: var(--rwc-serif);
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 25px);
  line-height: 1.25;
  color: var(--rwc-body);
  margin: 0 0 14px;
  padding: 0;
}

.rwc-step__helper{
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--rwc-label);
}

/* ---------- Option cards ----------
   A real radio, visually hidden, with the label as the card. Keyboard
   and screen reader behaviour comes for free; the card is just the skin. */
/* display:grid beats the UA stylesheet's [hidden]{display:none}, so the
   hidden seat range stayed on screen with only its inputs disabled. Any
   `display` declaration on an element that also gets toggled by the hidden
   attribute needs this line. */
.rwc-opts[hidden]{ display: none !important; }

.rwc-opts{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 8px;
}

.rwc-opt{ position: relative; min-width: 0; }

.rwc-opt input{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.rwc-opt__face{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 15px;
  background: #fff;
  border: 1px solid rgba(90,57,43,.20);
  border-radius: 3px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--rwc-body);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.rwc-opt__face:hover{
  border-color: var(--rwc-terracotta);
  background: #FFF7EF;
}
.rwc-opt input:focus-visible + .rwc-opt__face{
  outline: 2px solid var(--rwc-terracotta);
  outline-offset: 2px;
}
/* The length beside a seat label. Quiet: the seat count is the choice, the
   length is the reassurance. It sat under the label on its own line, which
   made every seat option a two-line box; on a short window that pushed the
   five-option step into a scrollbar. Same words, right-aligned on the same
   line, and the step fits. */
.rwc-opt__face small{
  display: block;
  margin: 0 0 0 auto;
  padding-left: 10px;
  white-space: nowrap;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--rwc-label);
}

.rwc-opt input:checked + .rwc-opt__face{
  border-color: var(--rwc-terracotta);
  background: #FFF2E6;
  box-shadow: inset 0 0 0 1px var(--rwc-terracotta);
}

/* ---------- Contact fields, final step ---------- */
.rwc-fields{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 10px;
}
.rwc-field{ min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rwc-field--wide{ grid-column: 1 / -1; }

.rwc-field label{
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rwc-label);
}
.rwc-field input{
  font-family: var(--rwc-sans);
  font-weight: 300;
  font-size: 16.5px;                /* under 16px iOS zooms the page on focus */
  color: var(--rwc-body);
  background: #fff;
  border: 1px solid rgba(90,57,43,.20);
  border-radius: 3px;
  padding: 9px 13px;
  min-width: 0;
  width: 100%;
}
.rwc-field input:focus-visible{
  outline: 2px solid var(--rwc-terracotta);
  outline-offset: 1px;
  border-color: var(--rwc-terracotta);
}
.rwc-field__err{
  font-size: 13px;
  line-height: 1.35;
  color: #9B2C2C;
}
.rwc-field.is-invalid input{ border-color: #9B2C2C; }

.rwc-consent-note{
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--rwc-label);
}

/* Honeypot. Off canvas, never display:none, and out of the tab order so a
   screen reader user cannot land in it and have their real enquiry binned. */
.rwc-hp{
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ---------- Nav ---------- */
.rwc-calc__nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 20px;
  flex: 0 0 auto;
}
.rwc-calc__nav .rwc-btn{ margin-left: auto; }

.rwc-back{
  background: none;
  border: 0;
  padding: 8px 2px;
  font-family: var(--rwc-sans);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rwc-muted);
  cursor: pointer;
}
.rwc-back:hover{ color: var(--rwc-terracotta); }
.rwc-back[hidden]{ display: none; }

/* ============================================================
   THE MODAL
   The card element itself lifts. Nothing is cloned, so no answer is
   lost on the way in or out. The band beneath keeps its height, because
   the card was absolutely positioned to begin with and never occupied
   flow: the seam does not move when the modal opens.
   ============================================================ */
.rwc-scrim{
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(28,15,11,.68);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
body.rwc-modal-open .rwc-scrim{ opacity: 1; pointer-events: auto; }
body.rwc-modal-open{ overflow: hidden; }

/* --rwc-banner-h reserves room for the fixed consent banner. DO NOT "fix"
   an overlap by hiding the banner: hiding a consent banner is a compliance
   problem, not a layout fix. */
body.rwc-modal-open .rwc-calc-card{
  position: fixed !important;
  /* Centred in the space ABOVE the consent banner, not in the viewport.
     Trimming max-height alone left the card centred on the full height, so
     on a 390px phone the banner sat over the bottom 92px of the card and
     covered the Continue button: the same class of bug as the pinned card
     doc 02 lists under "do not reintroduce". Halving the banner height and
     lifting the centre by it keeps the card whole and the banner visible.
     Do not fix an overlap here by hiding the banner. */
  top: calc(50% - var(--rwc-banner-h, 0px) / 2) !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 100 !important;
  margin: 0 !important;
  width: min(640px, calc(100% - 32px)) !important;
  height: auto !important;
  max-height: calc(100vh - 40px - var(--rwc-banner-h, 0px)) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  scroll-margin-top: 0 !important;
  /* Tighter than the at-rest card. The at-rest padding is part of the locked
     card, so it is not touched; in the modal the card is fighting the
     viewport instead, and the contact step needs the 20px back to clear a
     720px-tall window without a scrollbar. */
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}


/* ---------- Modal head, tightened ----------
   Only inside the modal. The at-rest card is measured on step 1 and pins the
   seam band, so its head spacing is left exactly as it is; in the modal the
   card is competing with the viewport instead and every line of head is a
   line the contact step cannot use. The sub ("Five questions. Your estimate
   is on the next page.") is a promise about the whole flow: it belongs on the
   card at rest, not over each question. The sub itself was removed from the
   page on 2 Sep 2026; this rule stays so a restored one does not reappear
   over every question in the modal. */
body.rwc-modal-open .rwc-calc-card__sub{ display: none !important; }
body.rwc-modal-open .rwc-eyebrow.rwc-calc-card__label{ margin-bottom: 10px !important; }
body.rwc-modal-open .rwc-calc-card__slot{ margin-top: 14px !important; }
body.rwc-modal-open .rwc-calc__nav{ padding-top: 16px !important; }

.rwc-calc__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--rwc-muted);
  cursor: pointer;
}
.rwc-calc__close:hover{ background: rgba(90,57,43,.08); color: var(--rwc-body); }
body.rwc-modal-open .rwc-calc__close{ display: flex; }

/* The line under the question on the details step. Says where the estimate
   actually is, now that nothing is emailed. Efa, 2 Sep 2026. */
.rwc-step__hint{
  /* Bottom margin matters: without it the hint sits on top of the first field
     label and the two read as one block. */
  margin: 6px 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--rwc-muted, #6B4E3F);
}

/* "optional" beside a field label. Marked on the optional fields rather than
   on the required ones: two of the four are optional, and a form that marks
   the required ones instead reads as if everything is compulsory. */
.rwc-field__opt{
  text-transform: none;
  letter-spacing: .02em;
  font-size: 11.5px;
  color: var(--rwc-subline, #A98F79);
}

/* ---------- Mobile ----------
   Placed last on purpose. Doc 02, "Recurring CSS bug pattern": a mobile
   rule earlier in the file loses to a later desktop rule of equal
   specificity, media query or not. !important here is defensive. */
@media (max-width: 720px){
  .rwc-opts{ grid-template-columns: 1fr !important; }
  .rwc-opt__face{ min-height: 44px !important; font-size: 15.5px !important; padding: 9px 14px !important; }
  .rwc-calc__nav .rwc-btn{ padding: 15px 20px !important; }
  body.rwc-modal-open .rwc-calc-card{
    width: calc(100% - 24px) !important;
    max-height: calc(100vh - 24px - var(--rwc-banner-h, 0px)) !important;
    padding: 22px 18px !important;
  }
}

/* ---------- Short windows ----------
   A laptop at 640-700px of viewport, or a phone in landscape, is the case
   where the tall steps (the carving preview, the four contact fields) would
   still meet a scrollbar. Nothing here changes the layout: it trims the
   breathing room only while the window is genuinely short. Placed after the
   width breakpoint so it wins on a short phone too. */
@media (max-height: 760px){
  body.rwc-modal-open .rwc-calc-card{
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .rwc-backrest{ margin-top: 10px !important; }
  .rwc-backrest__svg{ max-height: 94px !important; }
  .rwc-carvebox{ padding: 10px 13px !important; line-height: 1.4 !important; }
  .rwc-step__helper{ margin-top: 10px !important; }
  .rwc-opts{ gap: 7px !important; }
  .rwc-fields{ gap: 9px !important; }
  .rwc-field input{ padding: 8px 12px !important; }
  .rwc-consent-note{ margin-top: 6px !important; font-size: 12.5px !important; }
  .rwc-field{ gap: 3px !important; }
  .rwc-field label{ font-size: 11.5px !important; }
  body.rwc-modal-open .rwc-eyebrow.rwc-calc-card__label{ margin-bottom: 6px !important; }
  body.rwc-modal-open .rwc-calc-card__slot{ margin-top: 10px !important; }
}

/* Second tier, for a genuinely short window: a 667px phone (an SE, an 8) or
   a laptop at 600. Type comes down a step here rather than the flow gaining
   a scrollbar. Nothing below this is trimmed further: past this point the
   card scrolls, which is the honest answer. */
@media (max-height: 680px){
  body.rwc-modal-open .rwc-calc-card{
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
  .rwc-step legend,
  .rwc-step__q{ font-size: 19px !important; margin-bottom: 10px !important; }
  .rwc-step__hint{ margin: 4px 0 8px !important; font-size: 14px !important; }
  .rwc-calc__progress{ margin-bottom: 12px !important; }
  body.rwc-modal-open .rwc-calc__nav{ padding-top: 12px !important; }
  .rwc-backrest__svg{ max-height: 78px !important; }
  .rwc-consent-note{ font-size: 12px !important; }
}

@media (prefers-reduced-motion: reduce){
  .rwc-calc__progress-fill,
  .rwc-scrim{ transition: none !important; }
}

/* ============================================================
   STEP 4, THE CARVING
   NAME CARE: .rwc-backrest, never .rwc-carve (the hero lock-up) and never
   .rwc-engrave (the CTA sprig, which has the seam observer attached).
   ============================================================ */
.rwc-carvebox{
  width: 100%;
  min-width: 0;
  font-family: var(--rwc-serif);
  font-size: 18px;                 /* serif, because it is the words that get cut */
  font-style: italic;
  line-height: 1.5;
  color: var(--rwc-body);
  background: #fff;
  border: 1px solid rgba(90,57,43,.20);
  border-radius: 3px;
  padding: 13px 14px;
  resize: none;
}
.rwc-carvebox:focus-visible{
  outline: 2px solid var(--rwc-terracotta);
  outline-offset: 1px;
  border-color: var(--rwc-terracotta);
}

/* ---------- Tick box ---------- */
.rwc-check{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--rwc-body);
  cursor: pointer;
}
.rwc-check input{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.rwc-check__box{
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(90,57,43,.35);
  border-radius: 2px;
  background: #fff;
  position: relative;
}
.rwc-check__box::after{
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--rwc-cta-text);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg) scale(.6);
  opacity: 0;
  transition: opacity .14s ease, transform .14s ease;
}
.rwc-check input:checked + .rwc-check__box{
  background: var(--rwc-accent);
  border-color: var(--rwc-terracotta);
}
.rwc-check input:checked + .rwc-check__box::after{ opacity: 1; transform: rotate(42deg) scale(1); }
.rwc-check input:focus-visible + .rwc-check__box{
  outline: 2px solid var(--rwc-terracotta);
  outline-offset: 2px;
}

.rwc-backrest{
  margin: 12px 0 0;
  padding: 0;
}
/* Capped, not shrunk. The SVG has a viewBox, so clamping the height lets
   preserveAspectRatio scale the drawing down and centre it: the preview
   stays legible and the carving step stops running past a 720px window. */
.rwc-backrest__svg{
  display: block;
  width: 100%;
  height: auto;
  max-height: 118px;
  border-radius: 3px;
}
.rwc-backrest__plank{ stroke: rgba(90,57,43,.28); stroke-width: 1; }
.rwc-backrest__grain path{
  fill: none;
  stroke: #9C6F4A;
  stroke-width: 1;
  opacity: .18;
}

/* The cut, and the lit lip below it. Same idea as the CTA sprig: a dark
   groove with a lighter edge where the light catches the cut. */
.rwc-backrest__cut{
  fill: #5A3B27;
  font-family: var(--rwc-serif);
  font-style: italic;
  font-weight: 500;
}
.rwc-backrest__lip{
  fill: #E8C09B;
  font-family: var(--rwc-serif);
  font-style: italic;
  font-weight: 500;
  opacity: .55;
}

/* Black-filled lettering. The cut goes near black and the lit lip drops back,
   because a painted groove catches much less light than a bare one. */
.rwc-backrest.is-black .rwc-backrest__cut{ fill: #17100D; }
.rwc-backrest.is-black .rwc-backrest__lip{ opacity: .3; }

.rwc-backrest__cap{
  margin: 7px 0 0;
  font-family: var(--rwc-sans);
  font-size: 12.5px;
  line-height: 1.45;
  /* --rwc-muted, not --rwc-label: label on this cream measures under the
     4.5:1 AA floor at this size. Same call as .rwc-cta__note. */
  color: var(--rwc-muted);
  text-align: center;
}

@media (max-width: 720px){
  .rwc-carvebox{ font-size: 16.5px !important; }   /* under 16px iOS zooms on focus */
  /* Black-filled lettering. The cut goes near black and the lit lip drops back,
   because a painted groove catches much less light than a bare one. */
.rwc-backrest.is-black .rwc-backrest__cut{ fill: #17100D; }
.rwc-backrest.is-black .rwc-backrest__lip{ opacity: .3; }

.rwc-backrest__cap{ font-size: 12px !important; }
}