/* ===========================================================================
   Estaara project template — head CSS (v99)
   ONE write on the Projects template page; every /projects/{slug} inherits it.
   Nothing here is per-project. rem on a 4px grid, concrete hex, no @import.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. THE BLUEPRINT SECTION FITS ONE FOLD
   Estaara's own pillar rule already says spatial instruments (masterplan, floor
   plans) are full-viewport takeovers. It was never applied to this template, so
   #floor-plans ran 1.36 folds on Mizumi and 1.54 on 22 & Crest — you had to
   scroll to see the drawing.

   The plate is constrained by HEIGHT and keeps the aspect-ratio the render layer
   sets inline from plan.ar, so its width derives from its own proportions. That
   is load-bearing: the room hover boxes are percentages OF THE IMAGE BOX, so if
   the box and the image ever diverge every highlight misaligns. Never swap this
   for object-fit:contain.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
  #floor-plans .padding-section-medium {
    height: 100svh;                 /* definite height, NOT min-height: fr rows would stretch */
    display: flex;
    flex-direction: column;
    padding-top: 3rem;
    padding-bottom: 2rem;
    box-sizing: border-box;
  }
  /* the anchor should land flush, not under the fixed nav */
  #floor-plans { scroll-margin-top: 0; }

  #floor-plans .fp_header {
    flex: 0 0 auto;
    margin-bottom: 1rem;
    max-width: 46rem;
  }
  #floor-plans .fp_header p { margin-bottom: 0; }

  #floor-plans .w-tabs {
    flex: 1 1 auto;
    min-height: 0;                  /* without this a flex child refuses to shrink */
    display: flex;
    flex-direction: column;
  }
  #floor-plans .config-tabs_menu { flex: 0 0 auto; margin-bottom: 1.25rem; }
  #floor-plans .w-tab-content { flex: 1 1 auto; min-height: 0; }
  #floor-plans .w-tab-pane { height: 100%; }

  #floor-plans .fp_split {
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 20rem;
    align-items: stretch;
  }

  /* height-bound plate; aspect-ratio (set inline by the render layer) supplies the width */
  #floor-plans .fp_plate {
    height: 100%;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
  }
  #floor-plans .fp_plate-img { height: 100%; width: 100%; }

  /* the rail scrolls when a plan has many rooms; the fade is an honest cue that it does */
  #floor-plans .fp_rail {
    max-height: 100%;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 2rem), transparent 100%);
  }
  #floor-plans .fp_rail::-webkit-scrollbar { width: 3px; }
  #floor-plans .fp_rail::-webkit-scrollbar-thumb { background: #1c1a1826; border-radius: 2px; }

  /* the drawing is smaller in one fold, so make "click to enlarge" discoverable */
  #floor-plans .fp_plate { cursor: zoom-in; }
}

/* Below 992 the section returns to normal flow — a takeover on a phone is just a
   cramped drawing, and the plate already stacks above the rail there. */

/* ---------------------------------------------------------------------------
   2. PHASE-BANDED PAYMENT SCHEDULE
   Replaces a flat N-row ladder with a proportional bar banded by AUTHORED phases
   plus a cumulative ledger, so section height tracks phase count (~5) rather than
   stage count (5, 14, 18, 25…). The full stage-by-stage table stays one click away.
   Rendered whenever configs-json carries AUTHORED cost.phases that actually compress
   (fewer bands than stages). No inference — authored, or the flat ladder stays.
   --------------------------------------------------------------------------- */
.paysched_wrap { display: block; margin-top: 0.5rem; }

.paysched_bar {
  display: flex;
  gap: 0.25rem;
  height: 0.75rem;
  border-radius: 8rem;
  overflow: hidden;
}
.paysched_group {
  display: flex;
  gap: 1px;
  min-width: 0.25rem;
  border-radius: 8rem;
  overflow: hidden;
}
.paysched_seg { background: #bf9b6f; min-width: 2px; }
/* the four bands step down in weight so the shape of the plan is readable at a glance */
.paysched_group[data-b="0"] .paysched_seg { background: #8c6a3f; }
.paysched_group[data-b="1"] .paysched_seg { background: #a6804f; }
.paysched_group[data-b="2"] .paysched_seg { background: #bf9b6f; }
.paysched_group[data-b="3"] .paysched_seg { background: #d0ac83; }
.paysched_group[data-b="4"] .paysched_seg { background: #e2cba9; }

/* Cross-highlight: mute the inactive bands, hold the hovered one.
   This dims by swapping the SEGMENT FILL rather than by opacity. Opacity on
   .paysched_group was verified not to take effect on the live page — even an inline
   `opacity: .38 !important` computed back to 1, while `outline` on the same element and
   `opacity` on a sibling .cost_row both applied normally. The failing properties were
   exactly the two carrying a `transition`, so the transitions came off and the dim now
   uses background-color, which is the property already painting these bars. */
.paysched_wrap.is-hot .paysched_seg { background: #e5ded2; }
.paysched_wrap.is-hot .paysched_group.is-on[data-b="0"] .paysched_seg { background: #8c6a3f; }
.paysched_wrap.is-hot .paysched_group.is-on[data-b="1"] .paysched_seg { background: #a6804f; }
.paysched_wrap.is-hot .paysched_group.is-on[data-b="2"] .paysched_seg { background: #bf9b6f; }
.paysched_wrap.is-hot .paysched_group.is-on[data-b="3"] .paysched_seg { background: #d0ac83; }
.paysched_wrap.is-hot .paysched_group.is-on[data-b="4"] .paysched_seg { background: #e2cba9; }
.paysched_wrap.is-hot .paysched_group.is-on[data-b="5"] .paysched_seg { background: #efe0c8; }

.paysched_legend {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
}
.paysched_legend-i {
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #726b63;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* same reason as the bands: no transition on the property being switched */
.paysched_wrap.is-hot .paysched_legend-i { color: #a89f95; }
.paysched_wrap.is-hot .paysched_legend-i.is-on { color: #1c1a18; font-weight: 600; }

/* the ledger — hairline rows, tabular numerals, aligned left edges */
.paysched_ledger { margin-top: 1.5rem; }
.paysched_row {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid #1c1a181a;
  cursor: default;
  transition: background 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.paysched_row:hover, .paysched_row:focus-visible { background: #bf9b6f0f; outline: none; }
.paysched_row:focus-visible { box-shadow: inset 2px 0 0 #bf9b6f; }
.paysched_row-pct {
  font-size: 1rem;
  font-weight: 600;
  color: #1c1a18;
  font-variant-numeric: tabular-nums;
}
.paysched_row-name { font-size: 0.9375rem; color: #1c1a18; }
.paysched_row-n {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #726b63;
  margin-top: 0.125rem;
}
.paysched_row-cum {
  font-size: 1rem;
  font-weight: 600;
  color: #1c1a18;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* disclosure — the control sits ABOVE its panel so opening moves nothing above it */
.paysched_more {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.5rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid #1c1a1833;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4b4640;
  cursor: pointer;
  transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.paysched_more:hover { color: #1c1a18; border-color: #bf9b6f; }
.paysched_more:focus-visible { outline: 2px solid #bf9b6f; outline-offset: 0.25rem; }

.paysched_all { margin-top: 1rem; }
.paysched_all .cost_pay {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid #1c1a1814;
  list-style: none;
}
.paysched_all .cost_pay-pct {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #4b4640;
  font-variant-numeric: tabular-nums;
}
.paysched_all .cost_pay-name { font-size: 0.875rem; color: #4b4640; }
.paysched_all .cost_pay-amt {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1c1a18;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* 767 and below: the legend cannot carry five names in the available width, so the
   ledger becomes the only label surface. The bar stays horizontal (Shrey's ask). */
@media screen and (max-width: 767px) {
  .paysched_legend { display: none; }
  .paysched_row { grid-template-columns: 3rem 1fr; row-gap: 0.25rem; }
  .paysched_row-cum { grid-column: 2; text-align: left; }
  /* segments are not tap targets on touch; the ledger rows are */
  .paysched_seg, .paysched_group { pointer-events: none; }
  .paysched_row { min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .paysched_row, .paysched_more { transition: none; }
}