/* ==========================================================================
   MINKA Builder, dedicated configurator page (configure.html)
   Samara-style app chrome: stage left, scrolling rail right, price pinned.
   Consumes tokens from site.css. No em dashes.
   ========================================================================== */

body[data-cfg-layout='app'] {
  overflow: hidden;
  height: 100dvh;
}

.app { display: flex; flex-direction: column; height: 100dvh; }

/* ------------------------------------------------------------- top chrome */
.app-top {
  position: relative; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  height: var(--topbar-h);
  padding: 0 var(--space-lg);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.app-back {
  font-family: var(--sans); font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
  padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center;
}
.app-back:hover, .app-back:focus-visible { color: var(--rust); }
.app-brand {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-family: var(--sans); font-weight: 600;
  letter-spacing: 0.32em; font-size: var(--text-sm); color: var(--ink);
}
.app-price { margin: 0; text-align: right; }
.app-price-value {
  display: block;
  font-family: var(--serif); font-weight: 700;
  font-size: 1.25rem; color: var(--rust);
  font-variant-numeric: tabular-nums;
}
.app-price-note {
  display: block;
  font-family: var(--sans); font-size: var(--text-xs);
  color: var(--ink-2); letter-spacing: 0.04em;
}

/* ------------------------------------------------------------- app frame */
.app-frame {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(380px, 30vw, 460px);
}

/* stage fills the left pane; override the marketing-page sticky sizing */
.app-stage {
  position: relative; top: auto;
  height: auto; min-height: 0;
  border-right: 1px solid var(--line);
}
.stage-hint {
  position: absolute; left: 50%; bottom: var(--space-sm);
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--sans); font-size: var(--text-xs);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2); opacity: 0.75;
  pointer-events: none;
}

/* --------------------------------------------------------------- the rail */
.app-rail {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  padding: var(--space-2xl) var(--space-xl) var(--space-4xl);
  scrollbar-width: thin;
  scrollbar-color: var(--taupe-soft) transparent;
}
.rail-intro { margin-bottom: var(--space-2xl); }
.rail-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2.1rem);
  letter-spacing: 0.01em; color: var(--ink);
}
.rail-sub {
  margin: 0; max-width: 38ch;
  font-family: var(--sans); font-size: var(--text-base);
  line-height: 1.6; color: var(--ink-2);
}

/* app-mode steps: open sections with serif group titles, hairline dividers */
body[data-cfg-layout='app'] .cfg-step {
  border-top: 1px solid var(--line);
  padding: var(--space-xl) 0 var(--space-2xl);
}
body[data-cfg-layout='app'] .cfg-step:first-child { border-top: 0; padding-top: 0; }
.cfg-step-h--static {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
}
.cfg-step-h--static .cfg-step-title {
  font-family: var(--serif); font-weight: 700;
  font-size: var(--text-lg); color: var(--ink);
  letter-spacing: 0.01em; text-transform: none;
}
.cfg-step-h--static .cfg-step-value {
  font-family: var(--sans); font-size: var(--text-xs);
  letter-spacing: 0.08em; color: var(--ink-2);
  text-align: right; max-width: 45%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* selected cladding line, Samara pattern */
.cfg-mat-selected {
  margin: var(--space-md) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--taupe-soft);
  font-family: var(--sans); font-size: var(--text-sm);
  line-height: 1.55; color: var(--ink-2);
}
.cfg-mat-selected-name {
  display: block;
  font-weight: 600; color: var(--ink);
  letter-spacing: 0.01em;
}

.cfg-save-note {
  margin: var(--space-lg) 0 var(--space-sm);
  font-family: var(--sans); font-size: var(--text-sm);
  color: var(--ink-2); line-height: 1.55;
}

/* --------------------------------------------------------------- rail end */
.rail-end {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--line);
}
.rail-end-q {
  margin: 0 0 var(--space-2xs);
  font-family: var(--serif); font-weight: 700;
  font-size: var(--text-base); color: var(--ink);
}
.rail-end-a {
  margin: 0 0 var(--space-xl);
  font-family: var(--sans); font-size: var(--text-sm);
  line-height: 1.6; color: var(--ink-2);
}
.rail-end-mail { color: var(--rust); text-decoration: none; }
.rail-end-mail:hover, .rail-end-mail:focus-visible { text-decoration: underline; }
.rail-end-legal {
  margin: 0;
  font-family: var(--sans); font-size: var(--text-xs);
  line-height: 1.6; color: var(--ink-2); opacity: 0.8;
}

/* desktop: the mobile pricebar is redundant, price lives in the top chrome */
.app-pricebar { display: none; }

/* -------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  body[data-cfg-layout='app'] { overflow: auto; height: auto; }
  .app { height: auto; }
  .app-frame { display: block; }
  .app-brand { display: none; }
  .app-price { display: none; }

  .app-stage {
    position: sticky; top: var(--topbar-h);
    height: 44vh;
    z-index: var(--z-sticky);
    border-right: 0; border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 18px -14px oklch(0.24 0.01 85 / 0.3);
  }
  .stage-hint { display: none; }

  .app-rail {
    overflow: visible;
    padding: var(--space-xl) var(--space-lg) calc(var(--pricebar-h) + var(--space-3xl));
  }

  .app-pricebar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: var(--z-pricebar);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .app-rail { scroll-behavior: smooth; }
}

/* review pass: stage hint to the right, clear of the caption block */
.stage-hint {
  left: auto; right: var(--space-lg);
  transform: none; bottom: var(--space-md);
}
@media (max-width: 900px) {
  .stage-view[data-view='plan'] { overflow-y: auto; }
}