/* ============================================================
   Viewsetter — the blind builder
   ============================================================ */

.builder{background:var(--bone);position:relative;z-index:1;padding:clamp(56px,8vh,96px) 0 clamp(64px,10vh,130px)}

/* ---- the step rail ---- */
.rail-steps{
  display:flex;gap:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  border-top:1px solid rgba(14,35,56,.14);border-bottom:1px solid rgba(14,35,56,.14);
  margin-bottom:clamp(34px,5vh,58px);
}
.rail-steps::-webkit-scrollbar{display:none}
.rstep{
  flex:0 0 auto;display:flex;align-items:baseline;gap:9px;
  padding:15px 18px;border:0;background:none;cursor:pointer;white-space:nowrap;
  font-family:"DM Mono",monospace;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-on-bone-2);opacity:.72;position:relative;   /* readable before it is reached (design audit D3) */
  transition:opacity .45s var(--ease),color .45s var(--ease);
}
.rstep::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.rstep[data-state="done"]{opacity:.9;color:var(--label)}
.rstep[data-state="active"]{opacity:1;color:var(--ink-on-bone)}
.rstep[data-state="active"]::after{transform:scaleX(1)}
.rstep[disabled]{cursor:default}
.rstep .n{font-size:.62rem;opacity:.65}

/* ---- the two column layout ---- */
.builder-grid{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr;align-items:start}
@media(min-width:1000px){.builder-grid{grid-template-columns:.92fr 1.08fr}}

/* ---- panels ---- */
.panel{display:none}
.panel.on{display:block;animation:panelIn .55s var(--ease) both}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel h2{font-size:clamp(1.7rem,3.1vw,2.6rem);margin-bottom:10px}
.panel .why{color:var(--ink-on-bone-2);max-width:52ch;margin-bottom:clamp(22px,3vh,34px)}

/* ---- option cards ---- */
.opts{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:560px){.opts--2{grid-template-columns:1fr 1fr}}
@media(min-width:560px){.opts--3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:820px){.opts--3{grid-template-columns:repeat(3,1fr)}}
.opt{
  position:relative;text-align:left;padding:18px 18px 18px 52px;cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  background:var(--bone-2);border:1px solid rgba(14,35,56,.13);border-radius:2px;
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease);
  width:100%;
}
.opt:hover{border-color:rgba(200,154,79,.7);transform:translateY(-2px)}
.opt::before{
  content:"";position:absolute;left:18px;top:21px;width:17px;height:17px;border-radius:50%;
  border:1px solid rgba(14,35,56,.34);transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.opt[aria-pressed="true"]{border-color:var(--gold);background:#F7F2E9}
.opt[aria-pressed="true"]::before{border-color:var(--gold);background:var(--gold);box-shadow:inset 0 0 0 3px #F7F2E9}
.opt .t{display:block;font-weight:500;font-size:1.02rem;margin-bottom:3px}
.opt .d{display:block;font-size:.89rem;color:var(--ink-on-bone-2);line-height:1.5}
.opt .rec{
  display:inline-block;margin-top:9px;padding:3px 9px;border:1px solid var(--gold);color:var(--label);
  font-family:"DM Mono",monospace;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;border-radius:2px;
}
.opt .sw-dot{position:absolute;right:16px;top:16px;width:26px;height:26px;border:1px solid rgba(14,35,56,.16)}

/* ---- the standing note under a group ---- */
.note{
  margin-top:20px;padding:16px 18px;background:rgba(200,154,79,.1);
  border-left:2px solid var(--gold);font-size:.93rem;color:var(--ink-on-bone);
}
.note strong{font-weight:500}

/* ---- fabric picker ---- */
.fab-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:20px}
.chipbtn{
  padding:9px 15px;border:1px solid rgba(14,35,56,.2);background:transparent;cursor:pointer;border-radius:2px;
  font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
.chipbtn:hover{border-color:var(--gold)}
.chipbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--text-primary)}
.fam{margin-bottom:26px}
.fam h3{font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;font-weight:400;color:var(--label);margin-bottom:12px}

.swb{border:0;background:none;padding:0;cursor:pointer;text-align:left;transition:transform .4s var(--ease)}
.swb:hover{transform:translateY(-4px)}

/* the chip shows the supplier photograph; nothing is drawn over it */
.swb[aria-pressed="true"] .chip{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 0 4px var(--bone)}


/* ---- size fields ---- */
.fields{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:560px){.fields--2{grid-template-columns:1fr 1fr}}
@media(min-width:700px){.fields--3{grid-template-columns:repeat(3,1fr)}}
.field label{display:block;font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;font:inherit;font-size:.98rem;color:var(--ink-on-bone);
  background:var(--bone-2);border:1px solid rgba(14,35,56,.18);border-radius:2px;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);background:#F8F4EC;outline:none}
.field textarea{min-height:104px;resize:vertical}
.field .hint{margin-top:6px;font-size:.83rem;color:var(--ink-on-bone-2)}
.field.bad input{border-color:#A3402F}
.err{display:none;margin-top:6px;font-size:.83rem;color:#A3402F}
.field.bad .err{display:block}

.windows-list{display:grid;gap:16px}
.winrow{padding:18px;background:var(--bone-2);border:1px solid rgba(14,35,56,.12);position:relative}
.winrow .rm{position:absolute;right:12px;top:12px;border:0;background:none;cursor:pointer;font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-on-bone-2);padding:6px}
.winrow .rm:hover{color:#A3402F}
.winrow .mono{color:var(--label);margin-bottom:12px;display:block}
.addwin{margin-top:14px}

/* ---- step navigation ---- */
.panel-nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(28px,4vh,44px);align-items:center}
.linkbtn{border:0;background:none;cursor:pointer;text-decoration:underline;text-underline-offset:4px;color:var(--ink-on-bone-2);font-size:.92rem;padding:10px 4px}
.linkbtn:hover{color:var(--ink-on-bone)}

/* ============================================================
   The visualiser and the running summary
   ============================================================ */
.preview{position:relative}
@media(min-width:1000px){.preview{position:sticky;top:92px}}

.vis{
  position:relative;width:100%;aspect-ratio:2400/1792;overflow:hidden;
  background-size:cover;background-position:center;background-color:var(--sand);
  border:1px solid rgba(14,35,56,.12);
}
.vis .night{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s var(--ease)}
.vis[data-time="night"] .night{opacity:1}
.vis-glass{position:absolute;overflow:hidden}

/* ---- shared fabric surface ---- */
.fab-face{position:absolute;inset:0;background:var(--fab,#D3C7B3);opacity:var(--fabop,1)}
.fab-face .tex{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 2px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 2px),
    linear-gradient(to bottom,rgba(255,255,255,.2),rgba(0,0,0,.08));
}

/* ---- mode: roller blind ---- */
.vis[data-vis="roller"] .m-roller{display:block}
.m-roller{display:none;position:absolute;inset:0}
.m-roller .sheet{
  position:absolute;left:0;right:0;top:0;height:calc(var(--drop,66) * 1%);
  transition:height .5s var(--ease);
  box-shadow:0 10px 22px -10px rgba(14,35,56,.55);
}
.m-roller .cassette{position:absolute;left:0;right:0;top:0;height:4.5%;min-height:4px;background:linear-gradient(to bottom,#C9A96F,#9C7F4E);z-index:2}
.m-roller .bar{position:absolute;left:0;right:0;bottom:0;height:5%;min-height:4px;background:var(--bar,#B49B78);z-index:2;transition:background .5s var(--ease)}

/* ---- mode: curtains ---- */
.vis[data-vis="curtain"] .m-curtain{display:block}
.m-curtain{display:none;position:absolute;inset:0}
.m-curtain .track{position:absolute;left:-3%;right:-3%;top:-2%;height:4%;min-height:3px;background:linear-gradient(to bottom,#C9A96F,#9C7F4E);z-index:2}
/* the panels are full curtains that SLIDE, meeting in the middle when
   closed and stacking at each edge when open. Centre opening only. */
.m-curtain .panel-l,.m-curtain .panel-r{
  position:absolute;top:0;bottom:0;width:53%;
  transition:transform .5s var(--ease);
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.18) 0 3px, rgba(0,0,0,.10) 9px, rgba(255,255,255,.18) 15px);
}
.m-curtain .panel-l{left:0;transform:translateX(calc((var(--drop,66) - 100) * 0.72%));box-shadow:9px 0 20px -10px rgba(14,35,56,.62)}
.m-curtain .panel-r{right:0;transform:translateX(calc((100 - var(--drop,66)) * 0.72%));box-shadow:-9px 0 20px -10px rgba(14,35,56,.62)}

/* ---- mode: shutters ---- */
.vis[data-vis="shutter"] .m-shutter{display:block}
.m-shutter{display:none;position:absolute;inset:0}
.m-shutter .frame{position:absolute;inset:0;border:3px solid var(--fab,#F1F0ED);opacity:var(--fabop,1)}
/* the blades tilt: the slider closes them, so the lit face of each
   blade narrows to nothing while the shadowed edge takes over */
.m-shutter .blades{
  position:absolute;inset:3px;opacity:var(--fabop,1);
  --pitch:calc(var(--louvre,89) * 0.075%);
  --lit:calc(var(--pitch) * (100 - var(--drop,66)) / 100);
  background:
    repeating-linear-gradient(180deg,
      var(--fab,#F1F0ED) 0,
      var(--fab,#F1F0ED) var(--lit),
      var(--fab-dark,#CFCEC9) var(--lit),
      var(--fab-dark,#CFCEC9) var(--pitch));
  transition:background .35s var(--ease);
}
.m-shutter .mid{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:var(--fab,#F1F0ED);opacity:var(--fabop,1)}

/* ---- mode: awning (an external screen, seen from inside) ---- */
.vis[data-vis="awning"] .m-awning{display:block}
.m-awning{display:none;position:absolute;inset:0}
.m-awning .sheet{
  position:absolute;left:-2%;right:-2%;top:0;height:calc(var(--drop,66) * 1%);
  transition:height .5s var(--ease);
  filter:saturate(.9) brightness(.95);
  box-shadow:0 12px 26px -10px rgba(14,35,56,.5);
}
.m-awning .rail-l,.m-awning .rail-r{position:absolute;top:0;bottom:0;width:2.4%;min-width:3px;background:linear-gradient(to right,#9C7F4E,#C9A96F);z-index:2;opacity:.9}
.m-awning .rail-l{left:-2%}
.m-awning .rail-r{right:-2%}
.m-awning .hem{position:absolute;left:0;right:0;bottom:0;height:6%;min-height:4px;background:var(--bar,#8E7B58);z-index:2}

.vis-chain{
  position:absolute;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,rgba(200,180,140,.95),rgba(200,180,140,.25));
  opacity:0;transition:opacity .5s var(--ease);z-index:3;
}
.vis[data-op="chain"] .vis-chain{opacity:1}
.vis[data-side="Left"] .vis-chain{left:2%;right:auto}
.vis[data-side="Right"] .vis-chain,.vis[data-side="Either, you choose"] .vis-chain{right:2%;left:auto}

.vis-caption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  background:linear-gradient(to top,rgba(14,35,56,.82),rgba(14,35,56,0));
  color:var(--text-primary);font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
}
.vis-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.vis-tools .rangewrap{display:flex;align-items:center;gap:10px;flex:1;min-width:190px}
.vis-tools input[type=range]{flex:1;accent-color:var(--gold);min-width:110px}
.vis-tools label{font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-on-bone-2);white-space:nowrap}

/* the running summary */
.summary{margin-top:22px;border-top:1px solid rgba(14,35,56,.16)}
.summary h3{font-family:"DM Mono",monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:400;color:var(--label);margin:20px 0 12px}
.summary dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;margin:0;font-size:.92rem}
.summary dt{font-family:"DM Mono",monospace;font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-on-bone-2);padding-top:3px}
.summary dd{margin:0;text-align:right}
.summary dd.unset{color:var(--ink-on-bone-2);opacity:.55}

/* ---- the sent state ---- */
.sent{display:none;text-align:center;padding:clamp(40px,7vh,80px) 0}
.sent.on{display:block;animation:panelIn .6s var(--ease) both}
.sent .tick{width:56px;height:56px;margin:0 auto 22px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold)}
.sent h2{margin-bottom:14px}
.sent p{max-width:48ch;margin:0 auto;color:var(--ink-on-bone-2)}
.sent .band-cta{margin-top:30px;justify-content:center}

@media (prefers-reduced-motion: reduce){
  .panel.on{animation:none}
  .sent.on{animation:none}
}


/* ---- swatch shapes, so the scroller says what it is at a glance ---- */

  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.22) 0 3px, rgba(0,0,0,.10) 9px, rgba(255,255,255,.22) 16px) !important;
  background-blend-mode:overlay;
  box-shadow:inset 0 -10px 16px -10px rgba(14,35,56,.5);
}


.swb--louvre .chip::after{
  background-image:repeating-linear-gradient(180deg,
    rgba(255,255,255,.28) 0 6px, rgba(0,0,0,.16) 6px, rgba(0,0,0,.16) 8px);
}

/* the home page rail, in curtain shape */
.sw--drop .sw-chip{
  height:120px;border-radius:2px 2px 5px 5px;
  box-shadow:inset 0 -12px 18px -12px rgba(14,35,56,.5);
}
.sw--drop .sw-chip::after{
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.22) 0 3px, rgba(0,0,0,.10) 9px, rgba(255,255,255,.22) 16px);
}

/* the recommendation callout */
.why-rec{
  margin:0 0 20px;padding:16px 18px;background:rgba(200,154,79,.12);
  border-left:2px solid var(--gold);font-size:.95rem;color:var(--ink-on-bone);
}
.why-rec strong{font-weight:500}


@media (prefers-reduced-motion: reduce){
  .m-curtain .panel-l,.m-curtain .panel-r,.m-roller .sheet,.m-awning .sheet{transition:none}
}


/* ============================================================
   The slider. It is the only control, so it is built to be hit:
   a tall track, a big thumb, a live readout and a real label.
   ============================================================ */
.vis-tools{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-top:14px;padding:14px 16px;background:var(--bone-2);
  border:1px solid rgba(14,35,56,.12);border-radius:2px;
}
.vis-tools .rangewrap{display:flex;align-items:center;gap:12px;flex:1 1 260px;min-width:230px}
.vis-tools label{
  font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-on-bone);white-space:nowrap;
}
.vis-readout{
  font-family:"DM Mono",monospace;font-size:.68rem;letter-spacing:.08em;
  color:var(--label);min-width:4.2ch;text-align:right;
}
.vis-tools input[type=range]{
  -webkit-appearance:none;appearance:none;background:transparent;
  flex:1;min-width:120px;height:34px;cursor:pointer;margin:0;
}
.vis-tools input[type=range]:focus{outline:none}
.vis-tools input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(200,154,79,.45)}
.vis-tools input[type=range]::-webkit-slider-runnable-track{
  height:8px;border-radius:4px;background:rgba(14,35,56,.18);border:1px solid rgba(14,35,56,.1);
}
.vis-tools input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;
  background:var(--gold);border:3px solid var(--bone);
  box-shadow:0 3px 10px -2px rgba(14,35,56,.55);
  margin-top:-12px;cursor:grab;
}
.vis-tools input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;background:var(--gold-hi)}
.vis-tools input[type=range]::-moz-range-track{
  height:8px;border-radius:4px;background:rgba(14,35,56,.18);border:1px solid rgba(14,35,56,.1);
}
.vis-tools input[type=range]::-moz-range-thumb{
  width:30px;height:30px;border-radius:50%;background:var(--gold);
  border:3px solid var(--bone);box-shadow:0 3px 10px -2px rgba(14,35,56,.55);cursor:grab;
}
.vis-tools input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(200,154,79,.45)}

@media (prefers-reduced-motion: reduce){
  .m-curtain .panel-l,.m-curtain .panel-r,.m-roller .sheet,.m-awning .sheet{transition:none}
}

/* ============================================================
   Swatches carry the supplier's own photograph of the cloth, so the
   customer judges the real weave. The sampled colour sits behind it as
   the backing, which keeps the tile solid while the photo lazy loads.
   ============================================================ */
.swb .chip{overflow:hidden;position:relative}
.swb .chip img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease);
}
.swb:hover .chip img{transform:scale(1.07)}

.swb--drop .chip img{object-fit:cover}
/* a drop reads as hanging cloth, so the photo gets the fold shading over it */
.swb--drop .chip{background-image:none}
.swb--drop .chip::after{
  content:"";position:absolute;inset:0;z-index:1;
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.20) 0 3px, rgba(0,0,0,.13) 9px, rgba(255,255,255,.20) 16px);
}
.swb--louvre .chip::after{
  content:"";position:absolute;inset:0;z-index:1;
  background-image:repeating-linear-gradient(180deg,
    rgba(255,255,255,.26) 0 6px, rgba(0,0,0,.17) 6px, rgba(0,0,0,.17) 8px);
}

/* the preview wears the real cloth as well */
.fab-face{background-image:var(--fabimg,none);background-size:56px;background-repeat:repeat}
.m-shutter .blades,.m-shutter .frame,.m-shutter .mid{background-blend-mode:normal}

/* when a cloth cannot honestly be chosen off a screen */
.kind-note{
  margin:0 0 22px;padding:20px 22px;background:var(--ink);color:var(--text-primary);
  border-left:2px solid var(--gold);font-size:.98rem;line-height:1.6;
}
.kind-note strong{color:var(--gold);font-weight:500}

/* ============================================================
   The awning lives outdoors, so it gets its own scene: a patio
   looking over a backyard, and a folding arm that winds out over it.
   ============================================================ */
.vis[data-vis="awning"] .vis-glass{display:none}
.vis[data-vis="awning"]{background-image:url('patio-day.webp') !important}
.vis[data-vis="awning"] .night{display:none}

.m-patio{display:none;position:absolute;inset:0;overflow:hidden}
.vis[data-vis="awning"] .m-patio{display:block}

/* the sun bearing down on the paving, which the awning is there to stop */
.m-patio .sun{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(178deg,rgba(255,247,225,.66) 0%,rgba(255,244,214,.30) 38%,rgba(255,240,205,.10) 70%);
  opacity:calc(1 - var(--drop,0) / 100);
  transition:opacity .35s linear;
}
/* the shade it throws, growing across the paving as it winds out */
/* the shade it throws lands BELOW the fabric, creeping out across the
   paving as the arms reach further over the patio */
.m-patio .shade{
  position:absolute;left:-6%;right:-6%;
  top:calc(9% + var(--drop,0) * 0.31%);
  height:calc(var(--drop,0) * 0.52%);
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(12,24,36,.50) 0%,rgba(12,24,36,.34) 45%,rgba(12,24,36,0) 100%);
  opacity:calc(var(--drop,0) / 100);
  transition:top .45s var(--ease),height .45s var(--ease),opacity .35s linear;
}
/* the fabric itself, anchored at the cassette and widening toward the viewer */
/* A folding arm reaches OUT over the patio, so from underneath it fills
   the top of the view and widens toward the camera. It never drops like a
   wall, and it never hides the garden it is there to shade. */
.m-patio .canopy{
  position:absolute;left:-4%;right:-4%;top:9%;
  height:calc(var(--drop,0) * 0.31%);
  transition:height .45s var(--ease);
  -webkit-clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);
  clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);
  filter:drop-shadow(0 14px 20px rgba(14,28,40,.45));
}
.m-patio .canopy .fab-face{background-size:64px}
/* the scalloped front bar the arms carry */
.m-patio .barbar{
  position:absolute;left:-5%;right:-5%;
  top:calc(9% + var(--drop,0) * 0.31%);
  height:2.2%;min-height:5px;
  background:linear-gradient(to bottom,#C9A96F,#8E7247);
  box-shadow:0 6px 14px -4px rgba(14,28,40,.55);
  opacity:calc(var(--drop,0) > 2 ? 1 : 0);
  transition:top .45s var(--ease);
}
/* the cassette, always there, sitting over the top of everything */
.m-patio .cass{
  position:absolute;left:-5%;right:-5%;top:8.6%;height:3.4%;min-height:6px;
  background:linear-gradient(to bottom,#D8BC85,#8E7247 70%,#6E5836);
  box-shadow:0 4px 10px -2px rgba(14,28,40,.5);
}

/* ---- the crank ---- */
.crank{
  display:inline-flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;
  border:1px solid var(--gold);background:transparent;border-radius:2px;
  font-family:"DM Mono",monospace;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-on-bone);-webkit-user-select:none;user-select:none;touch-action:none;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.crank:hover{background:rgba(200,154,79,.12)}
.crank[data-spin="1"]{background:var(--gold);color:#14202E}
.crank svg{flex-shrink:0}
.crank[data-spin="1"] svg{animation:crankspin .9s linear infinite}
.crank[data-spin="1"][data-dir="in"] svg{animation-direction:reverse}
@keyframes crankspin{to{transform:rotate(360deg)}}
.crank-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media (prefers-reduced-motion: reduce){
  .crank[data-spin="1"] svg{animation:none}
  .m-patio .canopy,.m-patio .shade,.m-patio .barbar{transition:none}
}

/* ============================================================
   The preview wears the real cloth.
   .fab-face carries the supplier's photograph of the weave, tiled at a
   believable scale. .tex sits over it and adds only what the product
   itself does to the cloth: nothing much on a flat blind, vertical fold
   shading on a curtain, a coarser weave read on an outdoor awning.
   ============================================================ */
/* One instance of the cloth, scaled to fill.

   Repeating a photograph at swatch size always prints a grid eventually,
   because the eye finds the repeat however well the edges are matched.
   Filling the panel with a single instance cannot seam at all, for any
   fabric, and it shows the weave larger, which is the point of having it. */
.fab-face{
  background-color:var(--fab,#D3C7B3);
  background-image:var(--fabimg,none);
  /* the mirrored tile holds four copies of the swatch, so showing it at
     roughly the panel's width puts each copy at half that, which is what
     brings the weave back to a believable size */
  background-size:var(--fabscale,300px);
  background-repeat:repeat;
  background-position:center center;
}
.m-roller .fab-face{--fabscale:340px}
.m-curtain .fab-face{--fabscale:240px}
.m-patio .canopy .fab-face{--fabscale:420px}

/* the overlay only ever adds what the product does to the cloth */
.fab-face .tex{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to bottom,rgba(255,255,255,.16),rgba(0,0,0,.10));
}
/* with no photograph to show, the weave is drawn instead */
.m-roller .fab-face:not([style*="url"]) .tex,
.m-patio .fab-face:not([style*="url"]) .tex{
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 2px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 2px),
    linear-gradient(to bottom,rgba(255,255,255,.18),rgba(0,0,0,.08));
}
/* a curtain is gathered, so the folds ride over the weave */
.m-curtain .panel-l,.m-curtain .panel-r{background-image:none}
.m-curtain .fab-face .tex{
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.24) 0 3px,
    rgba(0,0,0,.16) 9px,
    rgba(255,255,255,.24) 16px);
}
/* an awning is stretched over arms, so the light rakes down it */
.m-patio .canopy .fab-face .tex{
  background-image:
    repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 1px,transparent 1px 46px),
    linear-gradient(to bottom,rgba(255,255,255,.22),rgba(0,0,0,.16));
}

/* ============================================================
   Drawn diagrams on the option cards.
   Nobody outside the trade knows what a reverse roll is, so the
   card shows the thing rather than only naming it.
   ============================================================ */
.opt--ic{padding-left:18px}
.opt--ic::before{display:none}
.optic{
  width:60px;height:49px;display:block;margin-bottom:13px;
  color:var(--ink-on-bone-2);flex-shrink:0;
  transition:color .4s var(--ease),transform .5s var(--ease);
}
.opt--ic:hover .optic{color:var(--gold-mute);transform:translateY(-2px)}
.opt--ic[aria-pressed="true"] .optic{color:var(--gold-mute)}
/* the chosen card still needs its tick, moved to the corner now the
   radio dot has given up its space to the diagram */
.opt--ic[aria-pressed="true"]::after{
  content:"";position:absolute;right:14px;top:14px;width:17px;height:17px;border-radius:50%;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M4 9l3 3 6-6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/17px no-repeat,
    linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M4 9l3 3 6-6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/17px no-repeat,
    linear-gradient(#000,#000);
  mask-composite:exclude;
}

/* a question inside a step */
.substep{
  font-family:"Fraunces",Georgia,serif;font-weight:300;
  font-size:clamp(1.2rem,1.9vw,1.55rem);margin:clamp(26px,4vh,40px) 0 8px;
}
.subwhy{color:var(--ink-on-bone-2);max-width:56ch;margin-bottom:18px;font-size:.96rem}

/* ============================================================
   Bottom weight bars: the profile drawn to relative scale, and
   only the colours that profile is really made in.
   ============================================================ */
.bars{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:560px){.bars{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.bars{grid-template-columns:repeat(3,1fr)}}
.baric{height:52px;width:46px}
.chipbtn--sw{display:inline-flex;align-items:center;gap:9px;padding-left:9px}
.barchip{
  width:20px;height:20px;border-radius:3px;border:1px solid rgba(14,35,56,.28);
  display:inline-block;flex-shrink:0;
}
.barchip--fab{background:var(--fab,#D3C7B3);background-image:var(--fabimg,none);background-size:34px}
.chipbtn--sw[aria-pressed="true"] .barchip{border-color:var(--bone)}
.bar-colours{margin-top:8px}

/* ============================================================
   The bar, drawn as a front elevation.

   Seen from inside a room a bottom bar is a horizontal band, not a
   circle: the profile only exists in cross section. So the band takes
   the profile's real height, and the SHAPE is carried by how the light
   sits on it. A round rail has one bright specular line and rolls off
   hard at both edges. An oval is softer and wider. A flat rail has a
   crisp even face. The D30 has a flat top and a rolled bottom.
   ============================================================ */
.m-roller .bar{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  height:var(--barh,6px);min-height:5px;
  border-radius:var(--barr,1px);
  background:var(--bar,#B49B78);
  background-image:var(--barshade,linear-gradient(to bottom,rgba(255,255,255,.4),rgba(0,0,0,.34)));
  box-shadow:0 4px 9px -3px rgba(14,35,56,.7);
  transition:height .35s var(--ease),border-radius .35s var(--ease),background-color .35s var(--ease);
}
.m-roller .bar::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);
}
/* wrapped in the fabric means it wears the cloth, not a colour */
.vis[data-barwrapped="1"] .m-roller .bar{
  background-color:var(--fab,#D3C7B3);
  background-image:var(--fabimg,none);
  background-size:88px;
  box-shadow:0 4px 9px -3px rgba(14,35,56,.55), inset 0 2px 6px -3px rgba(0,0,0,.34);
}

/* ============================================================
   The swatch grid, made to line up.
   Every tile is the same square, every name gets the same two lines of
   room whether it is "Ice" or "Summer Storm", so rows never stagger.
   ============================================================ */
.swatches{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  align-items:start;
}
.swb{display:flex;flex-direction:column}
.swb .chip{
  display:block;width:100%;aspect-ratio:1/1;height:auto;
  border:1px solid rgba(14,35,56,.14);position:relative;overflow:hidden;
}
.swb .nm{
  display:block;margin-top:8px;min-height:2.5em;line-height:1.25;
  font-family:"DM Mono",monospace;font-size:.62rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-on-bone-2);
  overflow-wrap:anywhere;
}
/* a hanging drop is taller than it is wide, and still all the same */
.swb--drop .chip{aspect-ratio:3/4;border-radius:2px 2px 5px 5px}
.swb--louvre .chip{aspect-ratio:4/3}
.swb .chip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* the fold shading on a curtain drop was too mechanical: soften it and
   vary the spacing so it reads as cloth rather than as a barcode */
.swb--drop .chip::after{
  content:"";position:absolute;inset:0;z-index:1;
  background-image:linear-gradient(90deg,
    rgba(0,0,0,.14) 0%, rgba(255,255,255,.16) 9%, rgba(0,0,0,.10) 19%,
    rgba(255,255,255,.13) 31%, rgba(0,0,0,.13) 44%, rgba(255,255,255,.15) 58%,
    rgba(0,0,0,.11) 71%, rgba(255,255,255,.14) 86%, rgba(0,0,0,.14) 100%);
}
.m-curtain .fab-face .tex{
  background-image:linear-gradient(90deg,
    rgba(0,0,0,.16) 0%, rgba(255,255,255,.18) 8%, rgba(0,0,0,.12) 17%,
    rgba(255,255,255,.14) 28%, rgba(0,0,0,.15) 40%, rgba(255,255,255,.17) 53%,
    rgba(0,0,0,.12) 65%, rgba(255,255,255,.15) 78%, rgba(0,0,0,.16) 92%,
    rgba(255,255,255,.12) 100%);
}

/* ---- a double roller: two blinds on one bracket ---- */
.layer-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
/* an author display rule outranks the browser's [hidden], so say it here */
.layer-tabs[hidden]{display:none}
.m-roller .sheet-back{
  position:absolute;left:0;right:0;top:0;height:calc(var(--drop,66) * 1%);
  background-color:var(--fab2,transparent);
  background-image:var(--fabimg2,none);
  background-size:cover;background-position:center;
  display:none;
}
.vis[data-double="1"] .m-roller .sheet-back{display:block}
/* the front sunscreen sits over it, so you read both cloths at once */
.vis[data-double="1"] .m-roller .sheet{height:calc(var(--drop,66) * 0.62%)}

/* ============================================================
   The hover magnifier.
   A 96 pixel tile is enough to choose a colour from and not enough to
   judge a cloth by, so hovering one lifts it to roughly three times the
   size against a neutral card.
   ============================================================ */
.sw-zoom{
  position:fixed;z-index:120;width:268px;pointer-events:none;
  background:var(--bone);border:1px solid rgba(14,35,56,.14);
  box-shadow:0 26px 60px -22px rgba(14,35,56,.55);
  padding:10px 10px 12px;border-radius:2px;
  opacity:0;transform:translateY(6px) scale(.98);
  transition:opacity .18s var(--ease),transform .18s var(--ease);
}
.sw-zoom.on{opacity:1;transform:none}
.sw-zoom-img{
  display:block;width:100%;aspect-ratio:1/1;
  background-position:center;background-repeat:no-repeat;
  border:1px solid rgba(14,35,56,.12);
}
.sw-zoom-meta{display:block;margin-top:10px}
.sw-zoom-meta b{
  display:block;font-family:"DM Mono",monospace;font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-on-bone);font-weight:400;
}
.sw-zoom-meta i{
  display:block;margin-top:3px;font-style:normal;
  font-family:"DM Mono",monospace;font-size:.6rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--label);
}
@media (hover: none),(pointer: coarse){.sw-zoom{display:none}}
@media (prefers-reduced-motion: reduce){.sw-zoom{transition:none}}

/* ============================================================
   A larger window in the preview, so the blind is the thing you look at
   rather than the room around it. The scene is zoomed about its centre
   and the glass rectangle is scaled to match, in build.js.
   ============================================================ */
.vis:not([data-vis="awning"]),
.vis:not([data-vis="awning"]) .night{
  background-size:130%;
  background-position:center center;
}

/* ============================================================
   The colour guide.
   Folded away by default, because a visitor who knows what they want
   should not have to walk past it.
   ============================================================ */
.guide-toggle{margin-bottom:18px}
.guide-box{
  margin-bottom:22px;padding:22px 24px;background:var(--ink);color:var(--text-primary);
  border-left:2px solid var(--gold);
}
.gq{margin-bottom:22px}
.gq:last-of-type{margin-bottom:14px}
.gq-q{
  font-family:"Fraunces",Georgia,serif;font-weight:300;
  font-size:clamp(1.1rem,1.7vw,1.35rem);color:var(--text-primary);margin-bottom:4px;
}
.gq-why{font-size:.9rem;color:var(--text-secondary);max-width:58ch;margin-bottom:12px}
.gq-a{display:flex;flex-wrap:wrap;gap:8px}
.gq-a .chipbtn{border-color:rgba(223,184,110,.42);color:var(--text-primary)}
.gq-a .chipbtn:hover{border-color:var(--gold);background:rgba(223,184,110,.12)}
.gq-a .chipbtn[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#14202E}
.gq-out{
  margin-top:20px;padding-top:18px;border-top:1px solid rgba(223,184,110,.24);
}
.gq-lead{
  font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:clamp(1.15rem,1.9vw,1.5rem);color:var(--gold-hi);margin-bottom:12px;
}
.gq-out ul{margin:0;padding-left:18px;display:grid;gap:8px}
.gq-out li{font-size:.94rem;color:var(--text-secondary);line-height:1.55}
.gq-out .linkbtn{color:var(--gold);margin-top:12px;padding-left:0}
.gq-out .linkbtn:hover{color:var(--gold-hi)}

/* the redrawn diagrams need more room than the first set */
.optic--big{width:74px;height:62px}