/* ================================================================
   pages.css
   Styles for the interior pages: privacy and the intake worksheet.
   Extends site.css. Nothing here overrides the home page.
   ================================================================ */

.subnav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem var(--gutter);
  background: rgba(25, 20, 16, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}

.subnav__home {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--cream);
}

.subnav__mark {
  width: 46px;
  height: auto;
  display: block;
}

.subnav__word {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.subnav__back {
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: var(--smoke);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.subnav__back:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ---------- page masthead ---------- */

.pagehead {
  padding: clamp(3.5rem, 9vw, 7rem) var(--gutter) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}

.pagehead h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0.75rem 0 0;
  max-width: 24ch;
}

.pagehead p {
  margin: 1.5rem 0 0;
  max-width: 58ch;
  font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.7;
  color: rgba(250, 244, 233, 0.78);
}

.pagehead__meta {
  margin-top: 2rem;
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--smoke);
}

/* ---------- long-form legal ---------- */

.legal {
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(4rem, 8vw, 6rem);
}

.legal__inner {
  max-width: 68ch;
  margin: 0 auto;
}

.legal h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 3.25rem 0 0.85rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}

.legal h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
  margin: 1.85rem 0 0.5rem;
}

.legal p,
.legal li {
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.78;
  color: rgba(250, 244, 233, 0.8);
}

.legal p {
  margin: 0 0 1rem;
}

.legal ul {
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
  list-style: none;
}

.legal li {
  position: relative;
  margin-bottom: 0.6rem;
}

.legal li::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 0.72em;
  width: 5px;
  height: 1px;
  background: var(--gold);
}

.legal a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(222, 157, 55, 0.5);
  transition: border-color 0.3s ease, color 0.3s ease;
}

.legal a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.legal__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1.75rem;
  font-size: 0.875rem;
}

.legal__table th,
.legal__table td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 1rem 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(250, 244, 233, 0.8);
}

.legal__table th {
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  font-weight: 400;
  white-space: nowrap;
}

/* ================================================================
   intake worksheet
   ================================================================ */

.intake {
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(4rem, 8vw, 6rem);
}

.intake__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

.wsteps {
  display: grid;
  gap: 2.75rem;
}

.wstep {
  border-top: 1px solid var(--rule);
  padding-top: 1.75rem;
}

.wstep__num {
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin: 0 0 0.6rem;
}

.wstep__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.2;
  margin: 0 0 0.4rem;
}

.wstep__hint {
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--smoke);
  margin: 0 0 1.75rem;
  max-width: 52ch;
}

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem 1.75rem;
}

.fields--tight {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.field--wide {
  grid-column: 1 / -1;
}

/* stepper control for room counts */

.counter {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid rgba(201, 191, 174, 0.28);
}

.counter__btn {
  flex: 0 0 auto;
  width: 2rem;
  height: 2.4rem;
  background: none;
  border: none;
  color: var(--smoke);
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.counter__btn:hover {
  color: var(--gold);
}

.counter input {
  border-bottom: none !important;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.counter input::-webkit-outer-spin-button,
.counter input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* choice chips */

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice span {
  display: inline-block;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--rule);
  font-size: 0.8125rem;
  font-weight: 300;
  color: rgba(250, 244, 233, 0.72);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.choice span:hover {
  border-color: rgba(222, 157, 55, 0.6);
  color: var(--cream);
}

.choice input:checked + span {
  border-color: var(--gold);
  color: var(--bark);
  background: var(--gold);
}

.choice input:focus-visible + span {
  outline: 1px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- sticky estimate panel ---------- */

.estimate {
  position: sticky;
  top: 84px;
  border: 1px solid var(--rule);
  background: var(--bark-2);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.estimate__label {
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin: 0 0 1rem;
}

.estimate__range {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.4vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.estimate__sub {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--smoke);
  margin: 0.6rem 0 0;
}

.estimate__lines {
  margin: 1.75rem 0 0;
  border-top: 1px solid var(--rule);
}

.estimate__line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid rgba(250, 244, 233, 0.06);
  font-size: 0.8125rem;
  font-weight: 300;
}

.estimate__line dt {
  color: rgba(250, 244, 233, 0.68);
}

.estimate__line dd {
  margin: 0;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.estimate__line--total dt,
.estimate__line--total dd {
  color: var(--gold);
}

.estimate__note {
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--smoke);
  margin: 1.5rem 0 0;
}

.estimate__bar {
  height: 2px;
  background: rgba(250, 244, 233, 0.1);
  margin: 1.25rem 0 0.5rem;
  position: relative;
  overflow: hidden;
}

.estimate__bar span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--gold);
  width: 0;
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- submit ---------- */

.intake__submit {
  border-top: 1px solid var(--rule);
  margin-top: 2.75rem;
  padding-top: 2rem;
}

.intake__status {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: 300;
  min-height: 1.2em;
}

.intake__status--ok {
  color: var(--gold);
}

.intake__status--err {
  color: #e08b7a;
}

@media (max-width: 940px) {
  .intake__grid {
    grid-template-columns: 1fr;
  }
  .estimate {
    position: relative;
    top: 0;
    order: -1;
  }
}

@media (max-width: 640px) {
  .subnav__word {
    font-size: 0.95rem;
  }
  .legal__table th {
    white-space: normal;
  }
}

.footer__bottom a:hover {
  color: var(--gold) !important;
}

/* worksheet masthead aligns to the worksheet grid, not the legal measure */
.pagehead__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.pagehead__inner h1 {
  max-width: 20ch;
}

/* the hidden attribute must beat the flex display on estimate rows */
.estimate__line[hidden],
[hidden] {
  display: none !important;
}

/* keep counter rows on a shared baseline even if a label wraps */
.fields--tight .field {
  align-content: end;
}

/* ================================================================
   Floor plan intake
   The plan is displayed at its natural aspect ratio with pins
   positioned in percentages, so the marks follow the image through
   every breakpoint and orientation change without recalculation.
   ================================================================ */

.plan {
  margin-top: 1.5rem;
}

/* ---------- drop zone ---------- */

.plan__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 2.75rem 1.5rem;
  border: 1px dashed rgba(201, 191, 174, 0.34);
  border-radius: 3px;
  background: rgba(250, 244, 233, 0.02);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.plan__drop:hover,
.plan__drop:focus-visible,
.plan__drop.is-over {
  border-color: var(--gold);
  background: rgba(222, 157, 55, 0.05);
  outline: none;
}

.plan__icon {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.2;
  stroke-linecap: square;
  opacity: 0.85;
  margin-bottom: 0.35rem;
}

.plan__droptitle {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--cream);
}

.plan__dropsub {
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--smoke);
}

.plan__browse {
  margin-top: 0.75rem;
  padding: 0.6rem 1.4rem;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--bark);
  background: var(--gold);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}

.plan__browse:hover {
  background: var(--gold-light);
}

.plan__note {
  margin-top: 0.9rem;
  max-width: 44ch;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--stone);
  opacity: 0.7;
}

.plan__spinner,
.plan__err {
  margin-top: 1rem;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--stone);
}

.plan__err--bad {
  color: var(--gold-light);
}

/* ---------- stage ---------- */

.plan__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--rule);
}

.plan__fname {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--stone);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan__pages {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--stone);
}

.plan__pages button,
.plan__replace {
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  color: var(--gold);
  background: none;
  border: 0;
  padding: 0.2rem 0;
  cursor: pointer;
  border-bottom: 1px solid rgba(222, 157, 55, 0.4);
}

.plan__pages button:hover,
.plan__replace:hover {
  color: var(--gold-light);
  border-bottom-color: var(--gold-light);
}

.plan__tip {
  margin: 1.1rem 0 0.9rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--stone);
  max-width: 56ch;
}

/* ---------- room type toolbar ---------- */

.plan__types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.plan__type {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  background: rgba(250, 244, 233, 0.03);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--stone);
  cursor: pointer;
  transition: all 0.15s ease;
}

.plan__type:hover {
  border-color: rgba(222, 157, 55, 0.5);
  color: var(--cream);
}

.plan__type[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bark);
}

.plan__typecode {
  font-family: var(--font-label);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  opacity: 0.75;
}

.plan__typelabel {
  font-size: 0.82rem;
}

/* ---------- the plan image and its pins ---------- */

.plan__canvaswrap {
  position: relative;
  display: block;
  line-height: 0;
  border: 1px solid var(--rule);
  background: #fff;
  cursor: crosshair;
  touch-action: manipulation;
}

.plan__img {
  display: block;
  width: 100%;
  height: auto;
}

.plan__pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--bark);
  background: var(--gold);
  color: var(--bark);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: grab;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  padding: 0;
  /* Pins are dragged with pointer events, so the browser must not claim a
     touch that starts on one for scrolling. The plan itself still scrolls. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.pin:hover {
  background: var(--gold-light);
}

.pin.is-drag {
  cursor: grabbing;
  z-index: 3;
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.pin.is-on {
  outline: 3px solid rgba(46, 107, 124, 0.9);
  outline-offset: 2px;
}

/* Room families get their own hue so a marked plan reads at a glance.
   The row badges are listed with the pins but written as .prow__no.x so
   they outrank the plain .prow__no background further down the file. */
.pin--bath,
.prow__no.prow__no--bath {
  background: #7fb3c4;
}
.pin--outdoor,
.prow__no.prow__no--outdoor {
  background: #8fa98a;
}
.pin--rec,
.prow__no.prow__no--rec {
  background: #c98a6a;
}
.pin--kitchen,
.prow__no.prow__no--kitchen {
  background: #d9b45f;
}
.pin--bunk,
.prow__no.prow__no--bunk {
  background: #e8c98a;
}
.pin--loft,
.prow__no.prow__no--loft {
  background: #b8a98f;
}

/* ---------- the room list ---------- */

.plan__empty {
  margin: 1rem 0 0;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--smoke);
}

.plan__rows {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
}

.prow {
  display: grid;
  /* The room select is capped rather than fluid so the dimension fields sit
     right next to the room name instead of drifting to the far right on
     wide screens. The remove button takes the leftover column. */
  grid-template-columns: 2rem minmax(7rem, 14rem) auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.prow.is-on {
  background: rgba(46, 107, 124, 0.12);
}

.prow__no {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bark);
  font-size: 0.76rem;
  font-weight: 600;
}

.prow__type {
  width: 100%;
  padding: 0.4rem 0.5rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--cream);
  background: rgba(250, 244, 233, 0.04);
  border: 1px solid var(--rule);
  border-radius: 2px;
}

.prow__dims {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.prow__dim {
  width: 3.4rem;
  padding: 0.4rem 0.35rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--cream);
  background: rgba(250, 244, 233, 0.04);
  border: 1px solid var(--rule);
  border-radius: 2px;
}

.prow__dim::placeholder {
  color: var(--smoke);
  opacity: 0.55;
}

.prow__by,
.prow__ft {
  font-family: var(--font-label);
  font-size: 0.68rem;
  color: var(--smoke);
}

.prow__area {
  min-width: 5.5rem;
  text-align: right;
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--stone);
}

.prow__kill {
  justify-self: end;
  font-family: var(--font-label);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  color: var(--smoke);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.2rem 0;
}

.prow__kill:hover {
  color: var(--gold-light);
}

/* ---------- summary and actions ---------- */

.plan__summary {
  margin-top: 1.1rem;
  padding: 0.85rem 1rem;
  background: rgba(222, 157, 55, 0.07);
  border-left: 2px solid var(--gold);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--cream);
}

.plan__actions {
  margin-top: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.plan__export {
  flex: 0 0 auto;
  padding: 0.6rem 1.2rem;
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  color: var(--cream);
  background: none;
  border: 1px solid rgba(201, 191, 174, 0.35);
  border-radius: 2px;
  cursor: pointer;
}

.plan__export:hover {
  border-color: var(--gold);
  color: var(--gold-light);
}

.plan__actionnote {
  flex: 1 1 22ch;
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--stone);
  opacity: 0.75;
}

.field__auto {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  color: var(--gold);
  opacity: 0.8;
}

/* ---------- narrow screens ---------- */

@media (max-width: 700px) {
  .prow {
    grid-template-columns: 1.7rem minmax(0, 1fr) auto;
    grid-template-areas:
      "no type kill"
      "dims dims area";
    row-gap: 0.5rem;
  }
  .prow__no {
    grid-area: no;
  }
  .prow__type {
    grid-area: type;
  }
  .prow__dims {
    grid-area: dims;
  }
  .prow__area {
    grid-area: area;
  }
  .prow__kill {
    grid-area: kill;
    justify-self: end;
  }
  .pin {
    width: 26px;
    height: 26px;
    font-size: 0.72rem;
  }
  .plan__drop {
    padding: 2rem 1rem;
  }
}