/* =====================================================================
   process-decisions.css — "Major Layout Decisions" section (before
   Cluster B). Adapts the reference portfolio's option-comparison +
   zone-wireframe idea into the case study's dark / warm language.
   Custom zone wireframes use the cluster colour system:
     Search  = peach-orange   Quantity = cream (the main work)
     Schemes = violet         Cart     = blue
   ===================================================================== */

.ldec .ldec-src{margin-top:18px;font-size:clamp(13px,1.05vw,15.5px);color:var(--grey-dim);
  max-width:60ch;line-height:1.55;}
.ldec .ldec-src .pk{color:var(--peach);font-weight:600;}

/* ---- one decision block ---- */
.ldec-block{margin-top:clamp(58px,9vh,120px);}
.ldec-block+.ldec-block{margin-top:clamp(70px,11vh,150px);}
.ldec-head{display:flex;gap:clamp(16px,2vw,30px);align-items:flex-start;
  margin-bottom:clamp(26px,4vh,46px);}
.ldec-no{flex:none;font-size:clamp(34px,4.4vw,62px);font-weight:600;line-height:.85;
  color:var(--peach);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  opacity:.92;}
.ldec-htext{flex:1;min-width:0;}
.ldec-q{font-size:clamp(22px,2.5vw,38px);font-weight:600;color:var(--cream);
  letter-spacing:-.015em;line-height:1.08;max-width:24ch;}
.ldec-meta{display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,40px);margin-top:18px;}
.ldec-mb{flex:1;min-width:240px;max-width:42ch;}
.ldec-ml{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--peach);margin-bottom:5px;}
.ldec-mb p{font-size:clamp(13px,1.02vw,15px);color:var(--grey);line-height:1.5;}

/* ---- option columns: subgrid so every section starts on a shared baseline ---- */
.ldec-opts{display:grid;gap:clamp(16px,1.6vw,26px);
  grid-template-rows:auto auto auto auto auto auto auto;}
.ldec-opts.opts-3{grid-template-columns:repeat(3,1fr);}
.ldec-opts.opts-2{grid-template-columns:repeat(2,1fr);}
.ldec-opt{display:grid;grid-row:1/-1;grid-template-rows:subgrid;row-gap:0;
  border-radius:20px;overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(160deg,rgba(40,31,24,.4),rgba(18,14,11,.4));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.ldec-opt.is-sel{border-color:rgba(255,188,149,.55);
  box-shadow:0 30px 70px -36px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,236,222,.12),
    0 0 0 1px rgba(255,188,149,.25);}
.ldec-opt>:not(.ldec-wf){padding-inline:clamp(16px,1.5vw,22px);}

/* ===== lo-fi hand-drawn wireframe — deliberately NOT the site's UI language:
   warm paper, solid pastel zones, dark sketchy outlines, handwritten labels ===== */
.ldec-wf{position:relative;aspect-ratio:5/4;border-bottom:1px solid var(--line);
  border-top-left-radius:19px;border-top-right-radius:19px;
  background-color:#efe6d6;
  background-image:radial-gradient(rgba(58,50,43,.07) 1.1px, transparent 1.2px);
  background-size:13px 13px;
  padding:clamp(15px,1.7vw,22px) clamp(15px,1.7vw,22px) 30px;overflow:hidden;
  box-shadow:inset 0 0 0 1.5px rgba(58,50,43,.5);}
.ldec-opt.is-sel .ldec-wf{background-color:#f4ecdd;}
.ldec-wfcanvas{position:relative;width:100%;height:100%;display:flex;flex-direction:column;
  gap:9px;}
.ldec-wfcanvas.row{flex-direction:row;align-items:stretch;}

/* a zone block — flat pastel fill, dark outline, marker label; straight & uniform */
.z{position:relative;border:1.6px solid #3a322b;border-radius:8px;
  background:var(--zbg,#e9dcc4);padding:6px 9px;display:flex;align-items:center;
  justify-content:center;min-height:0;overflow:hidden;}
.z>.zl{font-family:'Patrick Hand','Goga',cursive;font-weight:400;
  font-size:16px;letter-spacing:.01em;color:#3a322b;line-height:1.05;
  text-align:center;}
/* hide the old UI-skeleton marks — keep markup, drop the loader look */
.ldec-wf .z i,.ldec-wf .z .grid,.ldec-wf .z .row2,.wf-drawer i,.wf-drawer .row2{display:none;}
/* fills derived straight from the cluster colours (lightened for the paper) */
.z-search{--zbg:color-mix(in srgb,var(--cl-search) 80%,#fff);flex:none;min-height:24px;padding-top:4px;padding-bottom:4px;}
.z-qty{--zbg:#e9dcc4;flex:1;}
.z-schemes{--zbg:color-mix(in srgb,var(--cl-schemes) 74%,#fff);}
.z-cart{--zbg:color-mix(in srgb,var(--cl-cart) 58%,#fff);}
.z.grow{flex:1;}
.z.tall{flex:2;}
.z.faded{opacity:.5;border-style:dashed;}

/* fold line (option 1, decision 1) */
.wf-fold{position:relative;flex:none;height:0;border-top:1.6px dashed #b0593a;margin:1px 0;}
.wf-fold span{position:absolute;right:-2px;top:-9px;font-family:'Patrick Hand',cursive;
  font-size:12px;color:#7a2e15;background:#efe6d6;padding:0 5px;transform:rotate(-1.5deg);}

/* side cart drawer (option 2, decision 1) — drawn panel over the paper */
.wf-stack{position:relative;flex:1;display:flex;flex-direction:column;gap:9px;min-height:0;}
.wf-stack .z{justify-content:flex-start;}
.wf-stack .z>.zl{padding-left:6px;}
.wf-drawer{position:absolute;top:4px;right:-3px;bottom:4px;width:42%;z-index:3;
  border-radius:8px;border:1.6px solid #3a322b;
  background:color-mix(in srgb,var(--cl-cart) 58%,#fff);
  box-shadow:-11px 0 0 -4px rgba(58,50,43,.16);padding:7px 9px;
  display:flex;align-items:center;justify-content:center;}
.wf-drawer .zl{font-family:'Patrick Hand',cursive;color:#3a322b;font-size:16px;text-align:center;}
.wf-row{display:flex;gap:9px;flex:1;min-height:0;}

/* two-step flow (option 3, decision 1 — selected): stacked desktop frames */
.wf-steps{display:flex;flex-direction:column;align-items:stretch;gap:5px;width:100%;height:100%;}
.wf-step{flex:1;min-height:0;display:flex;flex-direction:column;gap:5px;
  border-radius:14px;border:1.6px dashed #3a322b;padding:7px 9px;
  background:rgba(255,255,255,.22);}
.wf-step .wf-steplab{font-family:'Patrick Hand',cursive;font-size:14px;letter-spacing:.01em;
  color:#41372c;margin-bottom:1px;text-align:left;}
.wf-step.s2{flex:.6;}
.wf-arrow{align-self:center;flex:none;font-family:'Patrick Hand',cursive;color:#3a322b;
  font-size:22px;line-height:.6;}

/* late-schemes marker (option 1, decision 2) */
.z-schemes.late{flex-direction:column;gap:3px;min-height:46px;}
.z-schemes.late::after{content:"seen too late / non-contextual";
  font-family:'Patrick Hand',cursive;font-size:12px;letter-spacing:.01em;
  color:#7a2e15;transform:rotate(-1deg);text-align:center;line-height:1.05;}

/* in-canvas note — handwritten margin annotation */
.wf-note{position:absolute;left:clamp(15px,1.7vw,22px);right:clamp(15px,1.7vw,22px);
  bottom:7px;font-family:'Patrick Hand',cursive;font-size:14px;
  letter-spacing:.01em;color:#41372c;text-align:center;transform:rotate(-.5deg);
  pointer-events:none;}

/* ---- option text rows (subgrid-aligned; each section on a shared baseline) ---- */
.ldec-oname{margin:0;padding-top:clamp(15px,1.7vh,19px);
  font-size:clamp(16px,1.3vw,21px);font-weight:600;color:var(--cream);
  letter-spacing:-.01em;line-height:1.22;}
.ldec-tagrow{display:flex;align-items:flex-start;padding-top:10px;}
.ldec-tag{display:inline-flex;align-items:center;line-height:1;
  font-size:12px;font-weight:900;letter-spacing:.02em;
  padding:5px 10px;border-radius:5rem;border:1px solid var(--line-2);color:var(--grey-dim);}
.ldec-tag.sel{color:#3a2417;background:var(--peach);border-color:var(--peach);}
.ldec-why{margin:0;padding-top:12px;font-size:clamp(12.5px,.95vw,15px);
  color:var(--grey);line-height:1.5;}
.ldec-opt .pros,.ldec-opt .cons{padding-top:15px;}
/* guaranteed breathing room below the Cons list before the Key/Determining
   divider — the tallest Cons list drives the subgrid row height, so without
   this the fullest card runs flush into the divider */
.ldec-opt .cons{padding-bottom:clamp(22px,2.6vh,32px);}
.ldec-opt .vh{display:block;font-size:clamp(12.5px,.95vw,14.5px);font-weight:650;
  letter-spacing:.01em;margin-bottom:7px;}
.ldec-opt .pros .vh{color:var(--ok);}
.ldec-opt .cons .vh{color:var(--peach-2);}
.ldec-opt .pros ul,.ldec-opt .cons ul{margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:6px;}
.ldec-opt .pros li,.ldec-opt .cons li{position:relative;padding-left:15px;
  font-size:clamp(12px,.92vw,14.5px);color:var(--grey);line-height:1.45;}
.ldec-opt .pros li::before,.ldec-opt .cons li::before{content:"";position:absolute;
  left:0;top:.5em;width:6px;height:6px;border-radius:2px;}
.ldec-opt .pros li::before{background:var(--ok);}
.ldec-opt .cons li::before{background:var(--peach-2);}
.ldec-key{font-size:clamp(12px,.92vw,14.5px);color:var(--grey);line-height:1.45;
  padding-top:14px;padding-bottom:clamp(16px,1.7vh,20px);
  border-top:1px solid var(--line);}
.ldec-key span{display:block;font-size:clamp(12.5px,.95vw,14.5px);font-weight:650;
  letter-spacing:.01em;color:var(--peach-2);margin-bottom:5px;}
.ldec-key.win{color:var(--cream);}
.ldec-key.win span{color:var(--peach);}

/* ---- portfolio annotation (pull quote) ---- */
.ldec-annot{margin-top:clamp(22px,3vh,38px);display:flex;gap:16px;align-items:flex-start;
  padding:clamp(20px,2.4vw,32px);border-radius:18px;
  background:linear-gradient(150deg,rgba(50,39,30,.4),rgba(18,14,11,.4));
  border:1px solid var(--line-2);}
.ldec-annot::before{content:"";flex:none;width:3px;align-self:stretch;border-radius:3px;
  background:linear-gradient(var(--peach),transparent);}
.ldec-annot .at{display:flex;flex-direction:column;gap:7px;}
.ldec-annot .ql{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--peach);}
.ldec-annot p{font-size:clamp(14px,1.25vw,19px);color:var(--cream);line-height:1.5;
  letter-spacing:-.005em;max-width:74ch;}

/* ---- responsive ---- */
@media (max-width:1024px){
  .ldec-opts.opts-3{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  .ldec-opts.opts-3,.ldec-opts.opts-2{grid-template-columns:1fr;}
  .ldec-head{flex-direction:column;gap:10px;}
  .ldec-wf{aspect-ratio:16/10;}
}