/* Shutter World: price calculator page. Design plan: _work/design-plan.md (tool opener: drawing board on graphite). */
.wf .calc__side, .wf .board, .wf .peek { visibility: hidden; }
form#calc-form[hidden] { display: none; }

/* ================= THE TOOL (opener: fits below the header down to 1366x768) ================= */
.calc { position: relative; overflow: clip; isolation: isolate; padding: calc(var(--hdr) + 16px) clamp(16px, 2vw, 28px) clamp(14px, 1.6vw, 22px); color: var(--silver-hi); }
.calc__sheet { position: relative; max-width: 1560px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); border: 1px solid rgba(183, 192, 198, .22); border-radius: var(--r); }
.calc__sheet::before, .calc__sheet::after { content: ''; position: absolute; width: 22px; height: 22px; border: 1.5px solid var(--oak); pointer-events: none; }
.calc__sheet::before { left: -6px; top: -6px; border-right: 0; border-bottom: 0; }
.calc__sheet::after { right: -6px; bottom: -6px; border-left: 0; border-top: 0; }
/* a pen light travels round the sheet edge at rest */
.calc__trace { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; pointer-events: none; z-index: 1; }
.calc__trace rect { fill: none; stroke: var(--oak-hi); stroke-width: 1.6; stroke-dasharray: 60 940; stroke-dashoffset: 1000; animation: trace 18s linear infinite; filter: drop-shadow(0 0 4px rgba(201, 150, 104, .7)); }
@keyframes trace { to { stroke-dashoffset: 0; } }
.rm .calc__trace, .no-js .calc__trace { display: none; }
.calc__side { padding: clamp(20px, 2.2vw, 36px) clamp(20px, 2.6vw, 44px); min-width: 0; }
.calc__h { font-size: clamp(2.3rem, 2.9vw, 3.3rem); line-height: 1.04; color: #fff; margin-bottom: .3em; }
.calc__h em { color: var(--oak-hi); }
.calc__lede { font-size: clamp(1rem, 1.05vw, 1.1rem); line-height: 1.55; color: var(--muted-d); margin-bottom: 18px; }

.cform { display: grid; gap: 14px; }
.cf { border: 0; margin: 0; padding: 0; min-width: 0; }
.cf legend { padding: 0; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; width: 100%; }
.cf legend::after { content: ''; flex: 1; height: 1px; background: rgba(183, 192, 198, .2); }

/* range cards */
.rpick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.rpick__o, .spick__o { position: relative; display: block; cursor: pointer; }
.rpick__o input, .spick__o input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rpick__box { position: relative; display: grid; gap: 4px; padding: 10px 9px 9px; border: 1px solid rgba(183, 192, 198, .28); border-radius: var(--r); background: rgba(255, 255, 255, .03); transition: border-color .3s, background .3s; overflow: hidden; }
.rpick__box::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--oak); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.rpick__n { font: 400 clamp(1rem, 1.2vw, 1.12rem)/1.1 var(--f-d); color: #fff; white-space: nowrap; }
.rpick__p { font-size: .875rem; font-weight: 600; font-stretch: 84%; color: var(--oak-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpick__o:hover .rpick__box { border-color: rgba(227, 232, 235, .55); }
.rpick__o input:checked + .rpick__box { border-color: var(--oak); background: rgba(181, 129, 79, .14); }
.rpick__o input:checked + .rpick__box::before { transform: scaleX(1); }
.rpick__o input:focus-visible + .rpick__box, .spick__o input:focus-visible + .spick__box { outline: 2px solid var(--oak); outline-offset: 3px; }
.spick__box { position: relative; overflow: hidden; }
.rpick__box::after, .spick__box::after { content: ''; position: absolute; inset: -20% -80%; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 236, 214, .22) 50%, transparent 58%); transform: translateX(-55%); }
.rpick__o input:checked + .rpick__box::after, .spick__o input:checked + .spick__box::after { opacity: 1; animation: cardSheen 5.2s var(--ease) infinite; }
.spick__o input:checked + .spick__box::after { animation-delay: 1.6s; }
@keyframes cardSheen { 0%, 18% { transform: translateX(-55%); } 82%, 100% { transform: translateX(55%); } }
.rm .rpick__box::after, .rm .spick__box::after { animation: none; opacity: 0; }
.rpick__o.is-flash .rpick__box { animation: flash 1.2s var(--ease); }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(201, 150, 104, .8); } 100% { box-shadow: 0 0 0 14px rgba(201, 150, 104, 0); } }

/* style cards */
.spick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.spick__box { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: center; padding: 8px 10px; min-height: 54px; border: 1px solid rgba(183, 192, 198, .28); border-radius: var(--r); background: rgba(255, 255, 255, .03); transition: border-color .3s, background .3s; }
.spick__box svg { width: 24px; height: 30px; overflow: visible; }
.spick__box svg path, .spick__box svg rect { fill: none; stroke: var(--silver); stroke-width: 1.3; }
.spick__box svg .si-f { stroke: var(--silver-hi); stroke-width: 1.8; }
.spick__box svg .si-g { stroke-dasharray: 3 3; }
.spick__n { display: block; font-weight: 600; color: #fff; line-height: 1.2; }
.spick__d { display: block; font-size: .875rem; color: var(--muted-d); line-height: 1.3; }
.spick__o:hover .spick__box { border-color: rgba(227, 232, 235, .55); }
.spick__o input:checked + .spick__box { border-color: var(--oak); background: rgba(181, 129, 79, .14); }
.spick__o input:checked + .spick__box svg .si-f { stroke: var(--oak-hi); }

/* window rows */
.wl__head, .wr { display: grid; grid-template-columns: 28px minmax(0, 1fr) 94px 94px 44px; gap: 6px; align-items: center; }
.wl__head { font-size: .875rem; font-weight: 600; font-stretch: 84%; color: var(--muted-d); margin-bottom: 4px; }
.wl__head span:first-child { grid-column: 2; }
.wl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wr { position: relative; padding: 0; border-radius: var(--r); transition: background .3s; }
.wr__n { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(183, 192, 198, .4); border-radius: var(--rb); font-size: .9rem; font-weight: 600; color: var(--silver-hi); font-variant-numeric: tabular-nums; transition: background .3s, border-color .3s, color .3s; }
.wr.is-hot .wr__n { background: var(--oak); border-color: var(--oak); color: var(--graphite); }
.calc .inp { min-height: 44px; padding: 8px 12px; }
.wr__f { position: relative; display: block; min-width: 0; }
.wr__k { display: none; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: .875rem; font-weight: 600; font-stretch: 84%; color: var(--muted-d); pointer-events: none; }
.wr__num { text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.wr__num::-webkit-outer-spin-button, .wr__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc .inp::placeholder { color: rgba(227, 232, 235, .5); }
.wr.is-bad .inp[aria-invalid="true"] { border-color: #E59A84; background-color: rgba(229, 154, 132, .08); }
.wr__x { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(183, 192, 198, .3); border-radius: var(--rb); background: transparent; transition: background .3s, border-color .3s; }
.wr__x svg { width: 12px; height: 12px; } .wr__x path { stroke: var(--silver-hi); stroke-width: 1.6; fill: none; }
.wr__x:hover:not(:disabled), .wr__x:focus-visible { background: rgba(229, 154, 132, .18); border-color: #E59A84; }
.wr__x:disabled { opacity: .3; cursor: not-allowed; }
.wr__err { grid-column: 2 / -1; margin: -2px 0 2px; font-size: .9rem; color: #F0B4A2; line-height: 1.35; }
.wr__err:empty { display: none; }
.wl__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
.wl__add { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 14px; border: 1px dashed rgba(201, 150, 104, .7); border-radius: var(--rb); background: rgba(181, 129, 79, .06); color: #fff; font-weight: 600; transition: background .3s, border-color .3s; }
.wl__add svg { width: 14px; height: 14px; } .wl__add path { stroke: var(--oak-hi); stroke-width: 1.8; fill: none; }
.wl__add:hover:not(:disabled), .wl__add:focus-visible { background: rgba(181, 129, 79, .2); border-style: solid; }
.wl__add:disabled { opacity: .4; cursor: not-allowed; }
.wl__count { font-size: .9rem; color: var(--muted-d); font-variant-numeric: tabular-nums; }
/* the no-JS submit: first in the form so Enter uses it, shown last; scripts work the price out live instead */
.calc__go { order: 9; justify-self: start; }
.js .calc__go { display: none; }

/* ---------- the drawing board ---------- */
.board { position: relative; margin: 12px 12px 12px 0; border-radius: var(--r); border: 1px solid rgba(183, 192, 198, .2); min-width: 0; display: flex; flex-direction: column;
  background-color: #1A2024; background-image:
  linear-gradient(rgba(183, 192, 198, .085) 1px, transparent 1px), linear-gradient(90deg, rgba(183, 192, 198, .085) 1px, transparent 1px),
  linear-gradient(rgba(183, 192, 198, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(183, 192, 198, .03) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; }
.board__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 18px; border-bottom: 1px solid rgba(183, 192, 198, .18); }
.board__scale { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; color: var(--oak-hi); font-variant-numeric: tabular-nums; }
.board__rule { display: block; height: 10px; position: relative; transition: width .6s var(--ease); }
.board__rule::before { content: ''; position: absolute; left: 0; right: 0; top: 4.5px; height: 1.2px; background: var(--oak-hi); }
.board__rule::after { content: ''; position: absolute; inset: 0; border: 0 solid var(--oak-hi); border-width: 0 1.2px; }
.board__draw { position: relative; flex: 1 1 auto; height: clamp(210px, 35vh, 380px); margin: 14px 20px 4px; }
.board__draw svg { width: 100%; height: 100%; overflow: visible; }
.board__draw .wd-txt { font-size: calc(var(--u, .5) * 14px); }
.board__draw g { transition: opacity .35s; }
.board__draw.has-hot g { opacity: .4; }
.board__draw.has-hot g.is-hot { opacity: 1; }
.board__draw g.is-hot .wd-frame { stroke: var(--oak-hi); fill: rgba(181, 129, 79, .1); }
.wd-badge rect { fill: rgba(20, 24, 27, .9); stroke: rgba(183, 192, 198, .55); stroke-width: calc(var(--u, .5) * 1); }
.wd-badge text { fill: #fff; font: 600 calc(var(--u, .5) * 14px) var(--f-b); }
g.is-hot .wd-badge rect { fill: var(--oak); stroke: var(--oak); }
g.is-hot .wd-badge text { fill: var(--graphite); }
.board__row { width: 100%; height: 100%; }
.board__draw.is-split { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.board__draw.is-split .board__row { flex: none; }
.board__empty { height: 100%; display: grid; place-items: center; text-align: center; margin: 0; color: var(--muted-d); font-size: 1rem; border: 1px dashed rgba(183, 192, 198, .3); border-radius: var(--r); padding: 20px; }
.board__plot { position: absolute; top: 50px; left: 20px; height: 260px; width: 1px; pointer-events: none; z-index: 2; }
.board__plot i { position: absolute; inset: 0; background: linear-gradient(transparent, var(--oak-hi) 18%, var(--oak-hi) 82%, transparent); opacity: .7; }
.board__plot span { position: absolute; top: -4px; left: 6px; font-size: .875rem; font-weight: 600; font-stretch: 84%; color: var(--oak-hi); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rm .board__plot, .no-js .board__plot { display: none; }
.board__xh { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 3; overflow: hidden; border-radius: var(--r); }
.board__xh.is-on { opacity: 1; }
.board__xh-h, .board__xh-v { position: absolute; background: rgba(227, 232, 235, .4); }
.board__xh-h { left: 0; right: 0; height: 1px; top: 0; }
.board__xh-v { top: 0; bottom: 0; width: 1px; left: 0; }
.board__xh-t { position: absolute; left: 0; top: 0; padding: 6px 10px; background: rgba(20, 24, 27, .92); border: 1px solid rgba(201, 150, 104, .6); border-radius: calc(var(--r) - 3px); font-size: .875rem; font-weight: 600; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .2s; }
.board__xh-t.is-on { opacity: 1; }
.board__xh-t b { color: var(--oak-hi); font-weight: 600; }

.board__out { padding: 4px 20px 18px; display: grid; gap: 12px; }
.board__sum { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid rgba(183, 192, 198, .18); }
.board__fig { font: 400 clamp(2.1rem, 2.9vw, 3.2rem)/1 var(--f-d); color: #fff; margin: 4px 0 4px; font-variant-numeric: tabular-nums lining-nums; }
.board__meta { margin: 0; color: var(--muted-d); font-size: .98rem; }
.board__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.board__more { color: var(--oak-hi); }
.board__more .arr--down { width: 10px; height: 18px; }
.board__more .arr--down path { fill: none; stroke: currentColor; stroke-width: 1.6; }

/* phone: a slim estimate bar while the inputs are in view */
.peek { display: none; }
@media (max-width: 980px) {
  .calc { padding-top: calc(var(--hdr) + 12px); }
  .calc__sheet { grid-template-columns: minmax(0, 1fr); }
  .board .btn, .est .btn { white-space: normal; text-align: center; line-height: 1.25; padding-top: 12px; padding-bottom: 12px; }
  .calc__side { padding: 26px 18px 18px; }
  .board { margin: 0 10px 10px; }
  .board__draw { flex: none; }
  .peek { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: rgba(20, 24, 27, .96); border: 1px solid rgba(201, 150, 104, .55); border-radius: var(--r); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); transform: translateY(140%); transition: transform .45s var(--ease); }
  .peek.is-on { transform: none; }
  .peek__k { font-size: .875rem; font-weight: 600; font-stretch: 84%; text-transform: uppercase; letter-spacing: .08em; color: var(--silver); }
  .peek__v { font: 400 1.25rem/1.1 var(--f-d); color: #fff; font-variant-numeric: tabular-nums lining-nums; flex: 1; white-space: nowrap; }
  .peek__go { min-height: 44px; display: grid; place-items: center; padding: 0 14px; border-radius: var(--rb); background: var(--oak); color: var(--graphite); font-weight: 600; text-decoration: none; white-space: nowrap; }
  .no-js .peek, .rm .peek { transition: none; }
}
@media (max-width: 1180px) and (min-width: 981px) { .rpick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .calc__h { font-size: clamp(2.3rem, 10vw, 3rem); }
  .rpick { grid-template-columns: 1fr; gap: 6px; }
  .rpick__box { grid-template-columns: 1fr auto; column-gap: 12px; min-height: 48px; padding: 8px 14px; align-items: center; }
  .rpick__n { font-size: 1.2rem; }
  .rpick__p { text-align: right; }
  .rpick__box::before { right: auto; top: 0; bottom: 0; width: 3px; height: auto; transform: scaleY(0); transform-origin: top; }
  .rpick__o input:checked + .rpick__box::before { transform: scaleY(1); }
  .spick__box { grid-template-columns: 1fr; justify-items: start; gap: 6px; padding: 10px; }
  .spick__d { display: none; }
  .wl__head { display: none; }
  .wl { gap: 12px; }
  .wr { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: "n name name x" ". w h ."; gap: 6px; padding-bottom: 12px; border-bottom: 1px dashed rgba(183, 192, 198, .2); }
  .wr__n { grid-area: n; width: 26px; height: 26px; }
  .wr__name { grid-area: name; }
  .wr__x { grid-area: x; }
  .wr__f:nth-of-type(1) { grid-area: w; } .wr__f:nth-of-type(2) { grid-area: h; }
  .wr__k { display: block; }
  .wr__f .inp { padding-left: 76px; }
  .wr__err { grid-column: 2 / -1; }
  .calc .inp { padding: 10px 8px; min-height: 48px; }
  .board__bar { padding: 12px 14px; }
  .board__draw { height: 250px; margin: 14px 12px 4px; }
  .board__plot { left: 12px; top: 54px; height: 274px; }
  .board__out { padding: 6px 14px 16px; }
  .board__go { flex-direction: column; align-items: stretch; }
  .board__more { justify-content: center; }
}

/* ================= YOUR ESTIMATE, WINDOW BY WINDOW (ink band) ================= */
.est { padding: clamp(60px, 6vw, 92px) 0; }
.est__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4.4vw, 76px); align-items: center; }
.est__side .lede { margin: 18px 0 18px; }
.est__note { margin: 0 0 24px; font-size: .98rem; color: var(--muted-d); padding-left: 14px; border-left: 2px solid var(--oak); }
.est__card { position: relative; background: rgba(10, 26, 41, .55); border: 1px solid rgba(183, 205, 225, .26); border-radius: var(--r); padding: clamp(14px, 2vw, 28px) clamp(16px, 2.2vw, 30px); box-shadow: 0 30px 60px rgba(6, 18, 30, .35); }
.bk { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .98rem; font-variant-numeric: tabular-nums; }
.bk th, .bk td { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid rgba(183, 205, 225, .16); vertical-align: middle; font-weight: 400; }
.bk thead th { font-size: .875rem; font-weight: 600; font-stretch: 84%; letter-spacing: .06em; text-transform: uppercase; color: var(--silver); padding-top: 0; }
.bk td, .bk thead th:not(:first-child) { text-align: right; }
.bk td:last-child, .bk thead th:last-child { padding-right: 0; white-space: nowrap; }
.bk td { color: var(--silver-hi); white-space: nowrap; }
.bk .bk__sz, .bk thead th:nth-child(2) { display: none; }
.bk tbody th { display: flex; align-items: center; gap: 12px; }
.bk__mini { flex: none; width: 104px; height: 66px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid rgba(183, 205, 225, .35); }
.mini { overflow: visible; display: block; }
.mini__f { fill: rgba(227, 232, 235, .04); stroke: var(--silver-hi); stroke-width: calc(var(--u, 1) * 1.4); }
.mini__p { fill: none; stroke: var(--silver); stroke-width: calc(var(--u, 1) * 1); }
.mini__lv { fill: none; stroke: var(--silver); stroke-width: calc(var(--u, 1) * .7); opacity: .5; }
.mini__glass { fill: none; stroke: var(--silver); stroke-width: calc(var(--u, 1) * .8); stroke-dasharray: calc(var(--u, 1) * 3) calc(var(--u, 1) * 3); opacity: .6; }
.bk__n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(183, 205, 225, .45); border-radius: var(--rb); font-size: .875rem; font-weight: 600; transition: background .3s, color .3s, border-color .3s; }
.bk__name { color: #fff; line-height: 1.25; min-width: 0; }
.bk__name small { display: block; font-size: .875rem; color: var(--muted-d); white-space: nowrap; }
.bk__ma { display: none; }
.bk tbody tr { transition: background .3s; }
.bk tbody tr:hover, .bk tbody tr.is-hot { background: rgba(183, 205, 225, .06); }
.bk tr.is-hot .bk__n { background: var(--oak); border-color: var(--oak); color: var(--graphite); }
.bk tr.is-hot .mini__f { stroke: var(--oak-hi); }
.bk tr.is-hot td { color: #fff; }
.bk tfoot th, .bk tfoot td { border-bottom: 0; padding-top: 16px; color: #fff; font-weight: 600; }
.bk tfoot td:last-child { font: 400 clamp(1.3rem, 1.7vw, 1.6rem)/1.1 var(--f-d); color: var(--oak-hi); }
@media (max-width: 1100px) { .est__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .bk .bk__ar, .bk thead th:nth-child(3) { display: none; }
  .bk__mini { width: 48px; height: 44px; }
  .bk__ma { display: inline; }
  .bk td:last-child, .bk__name small { white-space: normal; }
  .bk td:last-child { min-width: 5.6em; }
  .est__card { padding: 12px 14px; }
  .bk tbody th { gap: 8px; }
  .bk { font-size: .92rem; }
  .bk tfoot td:last-child { font-size: 1.2rem; }
}

/* ================= HOW THE PRICE IS WORKED OUT ================= */
.wk { padding: clamp(56px, 5vw, 76px) 0; }
.wk .sec__head { margin-bottom: clamp(26px, 3vw, 40px); }
.wk__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(28px, 4.4vw, 76px); align-items: center; }
.wk__sheet { position: relative; background: rgba(255, 255, 255, .72); border: 1px solid rgba(21, 48, 74, .16); border-radius: var(--r); padding: clamp(44px, 3.6vw, 54px) clamp(18px, 2.4vw, 36px) clamp(16px, 2vw, 26px); box-shadow: 0 30px 60px rgba(21, 48, 74, .08); width: min(100%, calc(var(--media-cap) * 1.1)); justify-self: center; }
.wk__label { position: absolute; left: clamp(18px, 2.4vw, 36px); top: 16px; font-size: .875rem; font-weight: 600; font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.wk__fig { position: relative; }
.wk__fig svg { width: 100%; height: auto; overflow: visible; }
.wk-frame { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.wk-pn { fill: none; stroke: var(--ink); stroke-width: .8; opacity: .85; }
.wk-lv { fill: none; stroke: var(--ink); stroke-width: .5; opacity: .45; }
.wk-dim { fill: none; stroke: var(--oak-deep); stroke-width: .9; stroke-linecap: round; }
.wk-area__bg { fill: rgba(181, 129, 79, .1); }
.wk-hatch path { stroke: rgba(126, 85, 48, .35); stroke-width: .6; fill: none; }
.wk-cafe__l { fill: none; stroke: var(--oak-deep); stroke-width: .9; stroke-dasharray: 3 2.4; }
.wk-cafe__b { fill: none; stroke: var(--oak-deep); stroke-width: .9; }
.wk-price__lead { fill: none; stroke: var(--oak-deep); stroke-width: .9; }
.wk-tb__rule { fill: rgba(21, 48, 74, .05); stroke: var(--ink); stroke-width: .8; }
.wk__labs { position: absolute; inset: 0; pointer-events: none; }
.wk-l { position: absolute; transform: translate(-50%, -50%); font-size: clamp(.875rem, 1.05vw, 1rem); font-weight: 600; line-height: 1.15; color: var(--oak-deep); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: center; }
.wk-l--h { transform: translate(-50%, -50%) rotate(90deg); }
.wk-l--a { font: 400 clamp(1.15rem, 1.6vw, 1.5rem)/1 var(--f-d); color: var(--ink); background: rgba(247, 247, 244, .92); padding: 4px 9px; border-radius: 3px; border: 1px solid rgba(21, 48, 74, .25); }
.wk-l--c { color: var(--oak-deep); background: rgba(247, 247, 244, .9); padding: 3px 8px; border-radius: 3px; }
.wk-l--p { transform: translate(0, -50%); text-align: left; color: #fff; background: var(--ink); padding: 7px 10px; border-radius: 4px; font-stretch: 88%; }
.wk-l--p small { display: block; font-size: .875rem; font-weight: 500; color: var(--silver-hi); margin-bottom: 2px; }
.wk-l--t { transform: translate(0, -50%); display: flex; align-items: center; gap: 8px; color: var(--ink); padding-left: 10px; }
.wk-l--t svg { width: 14px; height: 12px; flex: none; } .wk-l--t path { fill: none; stroke: var(--oak-deep); stroke-width: 2; }
.wk__steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 2px; }
/* the thread joins the step numbers, centre of the first to centre of the last (calculator.js measures it) */
.wk__thread { position: absolute; left: 19px; top: 29px; width: 2px; height: calc(100% - 140px); overflow: hidden; pointer-events: none; }
.wk__thread line { stroke-width: 1.6; }
.wk__thread-bg { stroke: rgba(21, 48, 74, .16); }
.wk__thread-fg { stroke: var(--oak-deep); }
.wk__step { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 18px; padding: 9px 0; transition: opacity .45s var(--ease); }
.wk__n { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 1.4px solid var(--oak-deep); border-radius: var(--rb); background: var(--paper); font-weight: 600; color: var(--oak-deep); font-variant-numeric: tabular-nums; transition: background .4s, color .4s; }
.wk__step h3 { font-size: clamp(1.3rem, 1.6vw, 1.6rem); margin: 6px 0 .25em; }
.wk__step p { margin: 0; color: var(--muted); }
.wk__eq { margin-top: 8px !important; display: inline-block; font: 400 clamp(1.05rem, 1.3vw, 1.25rem)/1.3 var(--f-d) !important; color: var(--ink) !important; font-variant-numeric: lining-nums tabular-nums; padding: 4px 10px; background: rgba(21, 48, 74, .06); border-radius: 3px; }
.wk.is-live .wk__step { opacity: .42; }
.wk.is-live .wk__step.is-on { opacity: 1; }
.wk.is-live .wk__step.is-cur .wk__n, .wk__step:hover .wk__n { background: var(--oak-deep); color: #fff; }
@media (max-width: 900px) {
  .wk__grid { grid-template-columns: 1fr; }
  .wk__sheet { padding: 40px 10px 14px; width: 100%; }
  .wk__label { left: 14px; }
}

/* ================= RANGES SIDE BY SIDE ================= */
.cmp { padding: clamp(56px, 5vw, 76px) 0; }
.cmp .sec__head { margin-bottom: clamp(24px, 2.6vw, 38px); }
.cmp__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: clamp(28px, 4vw, 64px); align-items: start; }
.cmp__list { --cols: minmax(150px, .5fr) minmax(0, 1fr) 112px; min-width: 0; }
.cmp__axis { display: grid; grid-template-columns: var(--cols); gap: 24px; align-items: end; padding-bottom: 10px; border-bottom: 1px solid rgba(126, 85, 48, .35); }
.cmp__axis-k { font-size: .875rem; font-weight: 600; font-stretch: 80%; letter-spacing: .12em; text-transform: uppercase; color: var(--oak-deep); grid-column: 2; grid-row: 1; padding-bottom: 26px; }
.cmp__ticks { grid-column: 2; grid-row: 1; position: relative; height: 22px; }
.cmp__ticks i { font-style: normal; position: absolute; bottom: -10px; width: 1px; height: 9px; }
.cmp__ticks i::before { content: ''; position: absolute; inset: 0; background: var(--oak-deep); }
.cmp__ticks b { position: absolute; bottom: 12px; left: 0; transform: translateX(-50%); font-size: .875rem; font-weight: 600; color: var(--oak-deep); font-variant-numeric: tabular-nums; }
.cmp__rows { list-style: none; margin: 0; padding: 0; }
.cmp__row { position: relative; display: grid; grid-template-columns: var(--cols); grid-template-areas: "name rule use" "desc desc desc"; gap: 2px 24px; align-items: center; padding: 8px 0 10px; border-bottom: 1px solid rgba(21, 48, 74, .14); }
.cmp__row::before { content: ''; position: absolute; left: -14px; right: -14px; top: 0; bottom: 0; z-index: -1; background: rgba(255, 255, 255, .62); border-radius: var(--r); opacity: 0; transition: opacity .35s; }
.cmp__row::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--oak-deep); transform: scaleX(var(--p, 0)); transform-origin: left; }
.cmp__row.is-on::before { opacity: 1; }
.cmp__name { grid-area: name; font-size: clamp(1.45rem, 1.8vw, 1.85rem); margin: 0; }
.cmp__name a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-height: 44px; }
.cmp__name .arr { width: 18px; height: 10px; flex: none; transition: transform .35s var(--ease); }
.cmp__name .arr path { fill: none; stroke: var(--oak-deep); stroke-width: 1.6; }
.cmp__name a:hover .arr, .cmp__name a:focus-visible .arr { transform: translateX(5px); }
.cmp__desc { grid-area: desc; margin: 0; display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: .95rem; color: var(--muted); line-height: 1.4; }
.cmp__desc .cmp__for { color: var(--oak-deep); font-weight: 600; position: relative; padding-left: 18px; }
.cmp__desc .cmp__for::before { content: ''; position: absolute; left: 0; top: .7em; width: 8px; height: 1.5px; background: var(--oak); }
.cmp__rule { grid-area: rule; position: relative; height: 50px; }
.cmp__track { position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: rgba(21, 48, 74, .16); }
.cmp__track i { position: absolute; top: -3px; width: 1px; height: 7px; background: rgba(21, 48, 74, .22); }
.cmp__span { position: absolute; top: 30px; height: 0; }
.cmp__span::before { content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 6px; background: var(--oak-deep); border-radius: 1px; transform-origin: left; transform: scaleX(var(--s, 1)); transition: background .3s; }
.cmp__span::after { content: ''; position: absolute; left: -1px; right: -1px; top: -9px; height: 18px; border: 0 solid var(--oak-deep); border-width: 0 1.6px; }
.cmp__span b { position: absolute; top: -28px; font-size: .9rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp__lo { left: 0; transform: translateX(-50%); }
.cmp__hi { left: 100%; transform: translateX(-50%); }
.cmp__row.is-on .cmp__span::before { background: var(--oak); box-shadow: 0 0 0 4px rgba(181, 129, 79, .2); }
.cmp__use { grid-area: use; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(26, 31, 35, .35); border-radius: var(--rb); background: transparent; font-weight: 600; font-size: .95rem; color: var(--text); white-space: nowrap; transition: background .3s, color .3s, border-color .3s; }
.cmp__use:hover, .cmp__use:focus-visible { background: var(--graphite); color: #fff; border-color: var(--graphite); }
.cmp__use svg { width: 16px; height: 16px; flex: none; } .cmp__use svg path, .cmp__use svg rect { fill: none; stroke: currentColor; stroke-width: 1.5; }
.cmp__pane { position: sticky; top: calc(var(--hdr) + 24px); }
.cmp__pane .ph { aspect-ratio: 4 / 5; }
.cmp__zoom { position: absolute; inset: 0; }
.cmp__pic { position: absolute; inset: 0; display: none; }
.cmp__pic.is-on { display: block; }
.cmp__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp__cap { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 14px; padding: 12px 16px; background: rgba(28, 33, 37, .92); border: 1px solid rgba(183, 192, 198, .3); border-radius: calc(var(--r) - 2px); color: #fff; backdrop-filter: blur(6px); }
.cmp__cap .k { grid-column: 1 / -1; }
.cmp__cap-n { font: 400 1.5rem/1.1 var(--f-d); }
.cmp__cap-p { font-weight: 600; color: var(--oak-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 1060px) {
  .cmp__grid { grid-template-columns: 1fr; }
  .cmp__pane { position: relative; top: 0; order: -1; width: min(100%, 560px); }
  .cmp__pane .ph { aspect-ratio: 4 / 3; }
}
@media (max-width: 700px) {
  .cmp__list { --cols: minmax(0, 1fr) auto; }
  .cmp__axis { grid-template-columns: 1fr; padding-top: 4px; }
  .cmp__axis-k, .cmp__ticks { grid-column: 1; }
  .cmp__axis-k { padding-bottom: 0; grid-row: 1; }
  .cmp__ticks { grid-row: 2; margin: 4px 22px 0; }
  .cmp__row { grid-template-areas: "name use" "rule rule" "desc desc"; gap: 6px 12px; padding: 14px 0 16px; }
  .cmp__row::before { left: -8px; right: -8px; }
  .cmp__rule { height: 50px; margin: 0 22px; }
}

/* ================= BOOK band: estimate box ================= */
.est-box { background: #fff; border: 1px solid rgba(126, 85, 48, .35); border-left: 3px solid var(--oak); border-radius: var(--r); padding: 12px 14px; }
.est-box[hidden] { display: none; }
.est-box__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.est-box .lbl { color: var(--text); }
.est-box__x { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--oak-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.est-box__txt { margin: 4px 0 0; font-size: .95rem; line-height: 1.5; color: var(--muted); }
.est-box.is-flash { animation: flashLight 1.4s var(--ease); }
@keyframes flashLight { 0% { box-shadow: 0 0 0 0 rgba(181, 129, 79, .7); } 100% { box-shadow: 0 0 0 16px rgba(181, 129, 79, 0); } }
.no-js .est-box__x { display: none; }
/* QA round 1b (2026-10-23): steady table columns; the scale bar appears once calculator.js has measured the board */
.bk thead th:nth-child(1) { width: 44%; } .bk thead th:nth-child(3) { width: 20%; } .bk thead th:nth-child(4) { width: 36%; }
.js .board__scale:not(.is-set) { display: none; }