/* ============================================================================
   Mad Wild — Consultation "Build Sheet" layout skin (Clement-approved 2026-07-19)
   ----------------------------------------------------------------------------
   Loaded LAST (after consult-ui.css + components.css) so it has the final word
   on the consultation DETAIL view's shell and section-body layout.

   Chosen from five mockup directions + five button options: Direction 2 "Build
   Sheet" with Option D "Swatch Cards" buttons (see HANDOVER 2026-07-19). The
   old 220px "Sidebar Command" sidebar is replaced by a slim 56px numbered rail
   that expands to a full section drawer on tap. The green section hero is
   replaced by a compact white sheet-head card (eyebrow, title, progress,
   Prev / Next). The section body is a white "spec sheet": green band group
   headers with a gold underline (kept exactly as Clement approved), hairline
   rows with the label column left and the control right.

   This is a STYLING / LAYOUT-ONLY skin, same contract as consult-ui.css: it
   never changes a control's data-* keys, the .chip/.on toggle classes, the
   picker markup (picker.js / .pick-inline / .mwc-pkin-*), the custom dropdown
   (.mwc-sel), or any save path. The swatch-card CHIP styling lives in
   consult-ui.css; the rail/drawer toggle behaviour is three small listeners in
   consultation.html (cnSideBurger / cnSideClose / Escape).

   Colours come only from the brand palette (:root --green/--gold/--cream/--ink).
   No blue, purple or rainbow. All body/label text is black (--ink). Barlow /
   Barlow Condensed only, never serif italic in inputs.

   Breakpoint: >=768px shows the rail (iPad portrait + up); <768px hides it and
   shows the horizontal section strip (.cn-rail) under the top bar.
   ============================================================================ */

:root{
  --cn-rail-w:56px;
  --cn-drawer-w:280px;
  --cn-green-a:#3E5449;
  --cn-green-b:#33473E;
  --cn-row-line:rgba(28,28,26,.08);
  /* Sheet width: Clement asked for a wider working area (2026-07-19), "not
     full but more". 24px breathing room each side, capped only on very wide
     monitors. */
  --cn-sheet-max:1600px;
}

/* ── Shell ────────────────────────────────────────────────────────────────
   #detail is toggled display:none/block by the page. The rail is fixed; the
   main pane is inset by the rail width on desktop. */
#detail .cn-shell{display:block;min-height:100vh}
.cn-main{min-width:0;background:var(--cream)}

/* ── Slim rail (collapsed default) ────────────────────────────────────────
   A 56px green spine: burger on top, numbered section buttons, thin progress
   at the foot. Tapping the burger adds .open (drawer mode below). */
.cn-side{
  position:fixed;top:0;left:0;bottom:0;
  width:var(--cn-rail-w);
  display:flex;flex-direction:column;
  background:linear-gradient(170deg,var(--cn-green-a),var(--cn-green-b));
  box-shadow:1px 0 0 rgba(28,28,26,.10),4px 0 22px rgba(28,28,26,.06);
  z-index:101;
  transition:width .18s ease-out;
  overflow:hidden;
}
.cn-side-head{
  display:flex;align-items:center;gap:10px;
  padding:10px 8px;border-bottom:1px solid rgba(250,247,242,.14);
  flex:0 0 auto;min-height:56px;
}
.cn-side-burger{
  flex:0 0 auto;
  width:40px;height:40px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(250,247,242,.08);border:1px solid rgba(250,247,242,.22);
  color:var(--cream);font-size:17px;line-height:1;cursor:pointer;
  transition:background .13s;
}
.cn-side-burger:hover{background:rgba(250,247,242,.16)}
.cn-side-brandwrap{flex:1 1 auto;min-width:0;display:none}
.cn-side-brand{font-family:var(--fh);font-weight:800;font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);line-height:1;white-space:nowrap}
.cn-side-sub{font-family:var(--fh);font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);margin-top:5px;white-space:nowrap}
.cn-side-close{
  flex:0 0 auto;display:none;
  width:36px;height:36px;border-radius:9px;
  align-items:center;justify-content:center;
  background:none;border:none;color:var(--cream);
  font-size:22px;line-height:1;cursor:pointer;
}
.cn-side-close:hover{background:rgba(250,247,242,.12)}

.cn-side-list{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:8px 0;scrollbar-width:none}
.cn-side-list::-webkit-scrollbar{display:none}
.cn-nav-item{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:36px;padding:5px 8px;
  background:transparent;border:none;
  color:rgba(250,247,242,.9);cursor:pointer;text-align:left;
  transition:background .13s,color .13s;
  position:relative;
}
.cn-nav-item:hover{background:rgba(250,247,242,.08)}
.cn-nav-num{
  flex:0 0 auto;
  width:34px;min-height:28px;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--fh);font-weight:800;font-size:12.5px;color:var(--gold-light);
  font-variant-numeric:tabular-nums;
}
/* Collapsed: number only; name + state hidden. Done sections carry a small
   gold dot on the number tile; the active section's number tile fills gold. */
.cn-nav-name{display:none;flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-nav-state{display:none;flex:0 0 auto;align-items:center;justify-content:center;min-width:18px;height:18px;font-family:var(--fh);font-weight:800;font-size:10.5px;letter-spacing:.02em;color:var(--gold-light)}
.cn-nav-item.cn-done .cn-nav-num::after{
  content:'';position:absolute;top:6px;right:9px;
  width:5px;height:5px;border-radius:50%;background:var(--gold-light);
}
.cn-nav-item.cn-active .cn-nav-num{background:var(--gold);color:#fff}

.cn-side-foot{
  flex:0 0 auto;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(250,247,242,.14);
  display:flex;flex-direction:column;gap:9px;
}
.cn-side-home{display:none;align-items:center;gap:6px;
  background:rgba(250,247,242,.1);border:1px solid rgba(250,247,242,.22);
  color:var(--cream);font-family:var(--fb);font-weight:600;font-size:12.5px;
  min-height:40px;padding:8px 12px;border-radius:9px;cursor:pointer;
  transition:background .13s,border-color .13s;white-space:nowrap;
}
.cn-side-home:hover{background:rgba(250,247,242,.18);border-color:var(--gold-border)}
.cn-side-prog{height:5px;border-radius:5px;background:rgba(250,247,242,.18);overflow:hidden}
.cn-side-prog > i{display:block;height:100%;width:0;background:var(--gold);border-radius:5px;transition:width .3s}
.cn-side-count{display:none;font-family:var(--fh);font-weight:700;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(250,247,242,.85);white-space:nowrap}
.cn-side-review{display:none;
  margin-top:2px;background:var(--gold);border:none;color:#fff;
  font-family:var(--fh);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  min-height:44px;padding:11px 12px;border-radius:10px;cursor:pointer;
  box-shadow:0 4px 12px rgba(184,145,42,.28);transition:transform .12s,box-shadow .12s;white-space:nowrap;
}
.cn-side-review:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(184,145,42,.34)}
.cn-side-review:active{transform:scale(.99)}

/* ── Drawer (rail expanded, overlays the content) ─────────────────────────*/
.cn-side.open{width:var(--cn-drawer-w);box-shadow:6px 0 28px rgba(28,28,26,.30)}
.cn-side.open .cn-side-brandwrap{display:block}
.cn-side.open .cn-side-close{display:inline-flex}
.cn-side.open .cn-side-burger{display:none}
.cn-side.open .cn-side-head{padding:12px 14px}
.cn-side.open .cn-nav-item{justify-content:flex-start;padding:7px 14px;min-height:42px}
.cn-side.open .cn-nav-name{display:block}
.cn-side.open .cn-nav-state{display:inline-flex}
.cn-side.open .cn-nav-num{width:24px;min-height:0;border-radius:0}
.cn-side.open .cn-nav-item.cn-active{background:var(--cream);color:var(--ink)}
.cn-side.open .cn-nav-item.cn-active .cn-nav-num{background:none;color:var(--gold-deep,#7D6210)}
.cn-side.open .cn-nav-item.cn-active .cn-nav-name{font-weight:800}
.cn-side.open .cn-nav-item.cn-done .cn-nav-num::after{display:none}
.cn-side.open .cn-nav-item.cn-part .cn-nav-state{padding:0 6px;border:1px solid rgba(212,170,74,.55);border-radius:9px;color:var(--gold-light)}
.cn-side.open .cn-nav-item.cn-done .cn-nav-state{width:18px;background:var(--gold);color:#fff;border-radius:50%}
.cn-side.open .cn-nav-item.cn-active.cn-part .cn-nav-state{color:var(--gold-deep,#7D6210);border-color:var(--gold-border)}
.cn-side.open .cn-side-foot{padding:12px 14px calc(12px + env(safe-area-inset-bottom))}
.cn-side.open .cn-side-home{display:inline-flex}
.cn-side.open .cn-side-count{display:block}
.cn-side.open .cn-side-review{display:inline-flex;align-items:center;justify-content:center}

/* ── Top bar ──────────────────────────────────────────────────────────────
   The sheet-head card now owns Prev / Next, so the top bar's own Next is
   retired (kept in the DOM for renderSec, just not shown). */
.cn-topnext{display:none}

/* Bottom Prev / Next bar stays removed (PR #1097). #prevBtn / #nextBtn stay in
   the DOM because renderSec labels them and the sheet-head buttons fire them. */
.bot-nav{display:none}
#detail{padding-bottom:24px}

/* Phone section strip: hidden by default, shown by the <768px media query. */
.cn-rail{display:none}

/* ── Sheet-head: eyebrow + title + progress + Prev/Next ───────────────────*/
.sheet-head{
  max-width:var(--cn-sheet-max);
  margin:16px auto 0;width:calc(100% - 48px);
  background:var(--white);
  border:1px solid rgba(28,28,26,.09);
  border-top:3px solid var(--gold);
  border-radius:8px;
  padding:14px 18px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  box-shadow:0 1px 2px rgba(28,28,26,.04),0 8px 22px rgba(28,28,26,.05);
}
.sheet-head .sh-left{flex:1 1 auto;min-width:200px}
.sheet-head .sec-hero-num{
  font-family:var(--fh);font-weight:700;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.sheet-head .sec-hero-title{
  font-family:var(--fh);font-weight:800;font-size:26px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
  line-height:1.05;margin-top:2px;
}
.sheet-head .sh-prog{flex:0 1 190px;min-width:150px}
.sheet-head .sec-hero-prog{display:flex;align-items:center;gap:10px;margin:0}
.sheet-head .sec-hero-track{flex:1 1 auto;height:5px;border-radius:5px;background:var(--cream-mid);overflow:hidden}
.sheet-head .sec-hero-track > i{display:block;height:100%;width:0;background:var(--gold);border-radius:5px;transition:width .3s}
.sheet-head .sec-hero-count{
  flex:0 0 auto;
  font-family:var(--fh);font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
}
.sheet-head .sh-nav{flex:0 0 auto;display:flex;gap:8px}
.sh-prev,.sh-next{
  font-family:var(--fh);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  border-radius:6px;min-height:40px;padding:9px 16px;cursor:pointer;
  transition:background .13s,border-color .13s,transform .12s;
}
.sh-prev{background:var(--white);border:1.5px solid rgba(28,28,26,.2);color:var(--ink)}
.sh-prev:hover{border-color:var(--gold)}
.sh-next{background:var(--gold);border:none;color:#fff;box-shadow:0 3px 10px rgba(184,145,42,.3);padding:9px 22px}
.sh-next:hover{background:var(--gold-light)}
.sh-next:active{transform:scale(.98)}

/* ── Section body → the spec sheet ────────────────────────────────────────
   White card, hairline rows, green band group headers with the gold underline
   (Clement-approved treatment, unchanged). */
.cn-main .sec-body{
  max-width:var(--cn-sheet-max);
  margin:14px auto 24px;width:calc(100% - 48px);
  padding:0 0 4px;
  background:var(--white);
  border:1px solid rgba(28,28,26,.11);
  border-radius:8px;
  box-shadow:0 1px 2px rgba(28,28,26,.04),0 10px 26px rgba(28,28,26,.06);
  overflow:hidden;
}

/* Field group = one sheet row: label column left, control right, hairline
   divider between rows. */
.cn-main .sec-body .fg{
  display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:8px 18px;
  margin:0;padding:14px 18px;
  border-bottom:1px solid var(--cn-row-line);
}
.cn-main .sec-body > .fg:last-child,
.cn-main .sec-body .fg.photo-fg:last-child{border-bottom:none}
.cn-main .sec-body .fg > .fl{
  flex:0 0 210px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0;padding-top:7px;
  font-family:var(--fh);font-size:14.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);line-height:1.25;
}
.cn-main .sec-body .fg > .fl::before{display:none}
/* Everything that isn't the label shares the right column and left-aligns. */
.cn-main .sec-body .fg > .chips{flex:1 1 260px;min-width:0;justify-content:flex-start;align-self:center}
.cn-main .sec-body .fg > .note-ic-wrap{align-self:center}

/* Wide controls (picker, notes, input grids, window table, photos, standalone
   inputs, "always" banners) drop to a full-width stacked row so they are never
   squeezed into the narrow right column. :has() is supported on the iOS/Safari
   this app targets; where unsupported the row simply stays inline, still usable.

   CRITICAL: every :has() here matches DIRECT children (>) only. injectNotes
   puts a hidden .note-box (which contains a .ta) inside almost every field
   row; a bare :has(.ta) matched those too, flipping every noted chip row to
   column layout, where the chips' 260px flex-basis becomes HEIGHT and every
   option stretches into a giant empty card. That was the exact bug Clement
   screenshotted. Keep the > and keep the chips flex reset below. */
.cn-main .sec-body .fg:has(> .pick-inline),
.cn-main .sec-body .fg:has(> .ta),
.cn-main .sec-body .fg:has(> .ig),
.cn-main .sec-body .fg:has(> .win-table),
.cn-main .sec-body .fg:has(> .photo-zone),
.cn-main .sec-body .fg:has(> .always),
.cn-main .sec-body .fg:has(> .ti){flex-direction:column;align-items:stretch}
.cn-main .sec-body .fg:has(> .pick-inline) > .fl,
.cn-main .sec-body .fg:has(> .ta) > .fl,
.cn-main .sec-body .fg:has(> .ig) > .fl,
.cn-main .sec-body .fg:has(> .win-table) > .fl,
.cn-main .sec-body .fg:has(> .photo-zone) > .fl,
.cn-main .sec-body .fg:has(> .always) > .fl,
.cn-main .sec-body .fg:has(> .ti) > .fl{flex:none;padding-top:0;margin-bottom:2px}
/* If a column-mode row ever carries chips too, the 260px flex-basis must not
   become a height: kill it and let the chips row size to its content. */
.cn-main .sec-body .fg:has(> .pick-inline) > .chips,
.cn-main .sec-body .fg:has(> .ta) > .chips,
.cn-main .sec-body .fg:has(> .ig) > .chips,
.cn-main .sec-body .fg:has(> .win-table) > .chips,
.cn-main .sec-body .fg:has(> .photo-zone) > .chips,
.cn-main .sec-body .fg:has(> .always) > .chips,
.cn-main .sec-body .fg:has(> .ti) > .chips{flex:none;width:100%}

/* Sub-section heading (e.g. "Walls, Ceiling & Cladding") → the green header
   band with white writing and a gold underline. Clement approved this exact
   treatment in the Build Sheet mockup; do not change it. */
.cn-main .sec-body .grp{
  margin:0;padding:11px 18px;
  background:var(--green);
  border-top:none;
  border-bottom:2px solid var(--gold);
  font-family:var(--fh);font-size:15px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cream);line-height:1.2;white-space:normal;
}
.cn-main .sec-body .grp::after{display:none}

/* Tighten the field-group note toggle + box so they sit as part of the row. */
.cn-main .sec-body .note-box{margin-top:10px;width:100%}

/* Desktop: main pane clears the rail. The drawer overlays (no reflow). */
@media (min-width:768px){
  .cn-main{margin-left:var(--cn-rail-w)}
}

/* ── Phone / narrow (<768px): rail off, section strip on, rows stack ──────*/
@media (max-width:767px){
  .cn-side{display:none}
  .cn-main{background:var(--cream);margin-left:0}

  .cn-rail{
    display:block;position:sticky;top:52px;z-index:97;
    background:linear-gradient(170deg,var(--cn-green-a),var(--cn-green-b));
    border-bottom:2px solid var(--gold);
    padding:8px 0;
  }
  .cn-rail-scroll{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 12px;scrollbar-width:none}
  .cn-rail-scroll::-webkit-scrollbar{display:none}
  .cn-rail-item{
    flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
    min-height:38px;padding:6px 12px;border-radius:999px;
    background:rgba(250,247,242,.06);border:1px solid rgba(250,247,242,.24);
    color:rgba(250,247,242,.92);cursor:pointer;white-space:nowrap;
    font-family:var(--fh);font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  }
  .cn-rail-tick{width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(250,247,242,.4);flex:0 0 auto}
  .cn-rail-item.cn-part .cn-rail-tick{border-color:var(--gold-light);background:rgba(212,170,74,.35)}
  .cn-rail-item.cn-done .cn-rail-tick{background:var(--gold);border-color:var(--gold)}
  .cn-rail-item.cn-active{background:var(--gold);color:#fff;border-color:var(--gold)}
  .cn-rail-item.cn-active .cn-rail-tick{border-color:rgba(255,255,255,.7)}

  /* Sheet-head + card fill the width; rows stack label-over-control (matches
     the app's phone rule so a label never sits cramped beside its value). */
  .sheet-head{width:calc(100% - 20px);margin:12px auto 0;padding:12px 14px}
  .sheet-head .sec-hero-title{font-size:21px}
  .cn-main .sec-body{width:calc(100% - 20px);margin:10px auto 24px}
  .cn-main .sec-body .fg{flex-direction:column;align-items:stretch;gap:9px;padding:13px 14px}
  .cn-main .sec-body .fg > .fl{flex:none;padding-top:0}
  .cn-main .sec-body .fg > .chips{flex:none;width:100%}
  .cn-main .sec-body .grp{padding:10px 14px}
  /* Paired-input grids (make/model, tapware, side-pod model/size, ...) stack to
     one column so they never overflow the phone viewport. */
  .cn-main .sec-body .ig.c2{grid-template-columns:1fr}
  /* Keep the compact top bar: the count pill stays hidden on phones. */
  .top-nav .nav-count{display:none}
}

/* ── Reduced motion ───────────────────────────────────────────────────────*/
@media (prefers-reduced-motion:reduce){
  .cn-side,.cn-nav-item,.cn-side-home,.cn-side-review,.cn-side-prog > i,.sh-next{transition:none}
  .cn-side-review:hover,.sh-next:active{transform:none}
}