/* ==========================================================================
   WestCanna BC — tools.css        (build 03, "The Tools")

   Nine interactive objects, each with its own form so no two read as the same
   band: a stepped finder card, a search console, a distribution chart, a
   neighbourhood picker, a scrub timeline, a comparison sheet, an annotated
   label, a quiz card and the brand panel. Tokens, type and palette come from
   site.css — nothing here redefines the brand.

   Compliance (FACTS.md): every tool asks about format, potency, size, price
   and store only. No occasion, no feeling, no effect. Results are facts with
   a link to the store's own live menu.
   ========================================================================== */

/* ---------- shared tool furniture ---------------------------------------- */
.tool {
  border: 1px solid rgba(184, 134, 91, .42);
  background: var(--cream, #FBF8F1);
  border-radius: 3px;
}
.sec-ink .tool, .sec-teal .tool, .sec-teal-deep .tool {
  background: rgba(244, 239, 228, .05);
  border-color: rgba(244, 239, 228, .26);
}

.t-k {                                   /* a mono field label */
  font-family: var(--mono); font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--teal-deep); margin: 0 0 9px;
}
.sec-ink .t-k, .sec-teal .t-k, .sec-teal-deep .t-k { color: var(--sage); }

.t-note {
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .02em;
  color: rgba(0, 34, 48, .62); margin: 12px 0 0; line-height: 1.5;
}
.sec-ink .t-note, .sec-teal .t-note, .sec-teal-deep .t-note { color: rgba(244, 239, 228, .6); }

/* a tappable choice: used by the finder, the quiz and the chart toggles */
.t-opt {
  display: block; width: 100%; text-align: left;
  font-family: var(--body); font-size: 17px; line-height: 1.32;
  color: inherit; background: transparent;
  border: 1px solid rgba(244, 239, 228, .3); border-radius: 2px;
  padding: 15px 17px; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.t-opt:hover, .t-opt:focus-visible { border-color: var(--cedar); background: rgba(184, 134, 91, .14); }
.t-opt.is-on { background: var(--bone); color: var(--ink); border-color: var(--bone); }
/* every answer carries what it would actually return, and an answer that
   would return nothing is shown spent rather than left as a dead end */
.t-opt-n { display: block; margin-top: 7px; font-family: var(--mono); font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cedar); }
.t-opt.is-on .t-opt-n { color: var(--cedar-deep); }
.t-opt.is-empty { opacity: .42; cursor: not-allowed; border-style: dotted; }
.t-opt.is-empty:hover { border-color: rgba(244, 239, 228, .3); background: transparent; }
.t-opt.is-empty .t-opt-n { color: rgba(244, 239, 228, .55); }
.t-opt-k { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; opacity: .62; margin-bottom: 5px; }

.t-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* site.css draws .btn-line in ink; on a dark band that is ink on ink */
.sec-ink .btn-line, .sec-teal .btn-line, .sec-teal-deep .btn-line {
  border-color: rgba(244, 239, 228, .48); color: var(--bone);
}
.sec-ink .btn-line:hover, .sec-teal .btn-line:hover, .sec-teal-deep .btn-line:hover,
.sec-ink .btn-line:focus-visible, .sec-teal .btn-line:focus-visible, .sec-teal-deep .btn-line:focus-visible {
  border-color: var(--cedar); color: var(--cedar);
}

/* ==========================================================================
   1. #finder — the stepped format finder
   ========================================================================== */
.finder { margin-top: clamp(30px, 3.6vw, 46px); }

.finder-rail {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 3px; margin-bottom: 26px; list-style: none; padding: 0;
}
.finder-rail li {
  border-top: 2px solid rgba(244, 239, 228, .2);
  padding-top: 11px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(244, 239, 228, .48);
  transition: color .2s ease, border-color .2s ease;
}
.finder-rail li .fr-n { display: block; font-size: 16.5px; letter-spacing: 0; opacity: .5; }
.finder-rail li.is-done { border-top-color: var(--cedar); color: rgba(244, 239, 228, .7); }
.finder-rail li.is-now { border-top-color: var(--bone); color: var(--bone); }
.finder-rail li.is-now .fr-n, .finder-rail li.is-done .fr-n { opacity: 1; }

.finder-card { padding: clamp(22px, 3vw, 38px); }
.finder-q {
  font-family: var(--disp); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.02; letter-spacing: -.02em; color: var(--bone); margin: 0 0 6px;
}
.finder-sub { font-size: 16px; color: rgba(244, 239, 228, .68); margin: 0 0 22px; max-width: 54ch; }
.finder-opts { display: grid; gap: 10px; grid-template-columns: repeat(4, 1fr); }
.finder-opts.is-3 { grid-template-columns: repeat(3, 1fr); }

.finder-res { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); margin-top: 8px; }
.finder-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin-bottom: 20px; }
.finder-head h3 { color: var(--bone); font-size: clamp(1.4rem, 2.4vw, 2rem); }
.finder-sum {
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cedar);
}

/* the finder's own product card: a flat bone chip, nothing like the shelf */
.pc--find {
  display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center;
  background: var(--bone); color: var(--ink); text-decoration: none;
  padding: 13px; border-radius: 2px; border: 1px solid transparent;
  transition: border-color .16s ease, transform .16s ease;
}
.pc--find:hover, .pc--find:focus-visible { border-color: var(--cedar); transform: translateY(-2px); }
.pc--find .pc-shot { display: block; background: #fff; border-radius: 2px; padding: 5px; }
.pc--find .pc-shot img { width: 100%; height: 62px; object-fit: contain; }
.pc--find .pc-brand { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal-deep); }
.pc--find .pc-name { display: block; font-family: var(--disp); font-weight: 700; font-size: 17px;
  line-height: 1.12; letter-spacing: -.01em; margin: 3px 0 4px; }
.pc--find .pc-meta { display: block; font-family: var(--mono); font-size: 13px; color: rgba(0, 34, 48, .66); }
.pc--find .pc-foot { display: flex; gap: 10px; align-items: baseline; margin-top: 5px; }
.pc--find .pc-price { font-family: var(--mono); font-size: 15px; font-weight: 500; }
.pc--find .pc-go { font-family: var(--mono); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal-deep); border-bottom: 1px solid rgba(0, 96, 128,.45); }

/* ==========================================================================
   2. #search — the search console
   ========================================================================== */
.sconsole { margin-top: clamp(28px, 3.4vw, 44px); }

.sfield { position: relative; display: flex; align-items: center; gap: 12px;
  border-bottom: 2px solid rgba(244, 239, 228, .34); padding-bottom: 12px; }
.sfield svg { flex: none; width: 22px; height: 22px; stroke: var(--sage); fill: none; stroke-width: 1.6; }
.sfield input {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--disp); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(1.25rem, 2.6vw, 2rem); line-height: 1.2;
  background: transparent; border: 0; color: var(--bone); padding: 2px 0;
}
.sfield input::placeholder { color: rgba(244, 239, 228, .34); }
.sfield input:focus { outline: none; }
.sfield:focus-within { border-bottom-color: var(--cedar); }
.sclear {
  flex: none; background: transparent; border: 1px solid rgba(244, 239, 228, .34);
  color: rgba(244, 239, 228, .8); border-radius: 2px; cursor: pointer;
  font-family: var(--mono); font-size: 13px; letter-spacing: .13em; text-transform: uppercase;
  padding: 8px 12px;
}
.sclear:hover { border-color: var(--cedar); color: var(--bone); }

.sfilters {
  display: grid; gap: 18px 26px; margin: 24px 0 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.schips { display: flex; flex-wrap: wrap; gap: 6px; }
.schip {
  font-family: var(--mono); font-size: 13px; letter-spacing: .09em;
  background: transparent; color: rgba(244, 239, 228, .82);
  border: 1px solid rgba(244, 239, 228, .28); border-radius: 100px;
  padding: 7px 13px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.schip:hover { border-color: var(--cedar); }
.schip[aria-pressed="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }

.srange { display: flex; align-items: center; gap: 10px; }
.srange input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--cedar); }
.srange input[type="range"]:disabled { opacity: .35; }
.sreadout { font-family: var(--mono); font-size: 13.5px; color: var(--bone); white-space: nowrap; }

.ssort {
  font-family: var(--mono); font-size: 13.5px; padding: 9px 11px; border-radius: 2px;
  background: rgba(244, 239, 228, .07); color: var(--bone);
  border: 1px solid rgba(244, 239, 228, .28);
}
.ssort option { color: #002230; }

.scount {
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .05em;
  color: rgba(244, 239, 228, .72); margin: 26px 0 12px;
  border-top: 1px solid rgba(244, 239, 228, .2); padding-top: 14px;
}
.srows { display: grid; gap: 6px; }
.srow {
  display: grid; grid-template-columns: 54px minmax(0, 1.5fr) minmax(0, 1fr) 82px 112px;
  gap: 14px; align-items: center; text-decoration: none; color: var(--bone);
  background: rgba(244, 239, 228, .05); border: 1px solid transparent;
  padding: 8px 12px; border-radius: 2px;
  transition: background .15s ease, border-color .15s ease;
}
.srow:hover, .srow:focus-visible { background: rgba(244, 239, 228, .12); border-color: var(--cedar); }
.srow-shot { background: var(--bone); border-radius: 2px; padding: 3px; }
.srow-shot img { width: 100%; height: 40px; object-fit: contain; }
.srow-b { font-family: var(--mono); font-size: 13px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sage); display: block; }
.srow-n { font-family: var(--disp); font-weight: 700; font-size: 16.5px; line-height: 1.15;
  letter-spacing: -.01em; display: block; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; }
.srow-m { font-family: var(--mono); font-size: 13px; color: rgba(244, 239, 228, .7); }
.srow-p { font-family: var(--mono); font-size: 15px; text-align: right; }
.srow-go { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bone); text-align: right; }
/* the accent moves to the underline: cedar on a rule is decoration, cedar on
   10.5px type on the teal row was 2.31:1 */
.srow-go { text-decoration: underline; text-decoration-color: var(--cedar);
  text-decoration-thickness: 1px; text-underline-offset: 4px; }

.sempty { padding: 26px 0 8px; }
.sempty p { color: rgba(244, 239, 228, .8); }
.smore { margin-top: 16px; }

/* the same chips on a bone or cream ground */
.sec-cream .schip, .sec-bone-deep .schip, .sec .schip:not(.sec-ink .schip) { }
.sec-cream .schip, .sec-bone-deep .schip {
  color: var(--ink); border-color: rgba(0, 48, 63, .3);
}
.sec-cream .schip[aria-pressed="true"], .sec-bone-deep .schip[aria-pressed="true"] {
  background: var(--teal); color: var(--bone); border-color: var(--teal);
}

/* ==========================================================================
   3. #thc — where the shelf sits
   ========================================================================== */
.thc-wrap { margin-top: clamp(26px, 3.2vw, 42px); }
.thc-top { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between; }
.thc-legend { display: flex; gap: 16px; font-family: var(--mono); font-size: 13.5px; }
.thc-legend span { display: inline-flex; align-items: center; gap: 7px; }
.thc-sw { width: 13px; height: 13px; border-radius: 2px; display: inline-block; }
.thc-sw.bw { background: var(--teal); }
.thc-sw.rb { background: var(--cedar); }

.thc-chart { margin-top: 20px; border: 1px solid rgba(184, 134, 91, .4); background: #fff; padding: 14px 10px 6px; border-radius: 3px; }
.thc-chart svg { display: block; width: 100%; height: auto; }
.thc-band rect { transition: opacity .15s ease; }
.thc-band { cursor: pointer; }
.thc-band:hover rect, .thc-band.is-on rect { opacity: .72; }
.thc-band:focus-visible { outline: 2px solid var(--cedar-deep); outline-offset: 2px; }
.thc-hit { fill: transparent; }
.thc-axis { font-family: var(--mono); font-size: 12.5px; fill: rgba(0, 34, 48, .6); }
/* the phone chart is drawn on a 420-wide viewBox, so 13px in the box is
   about 13px on the glass */
.thc-axis-m { font-size: 15px; fill: rgba(0, 34, 48, .82); }
.thc-grid { stroke: rgba(0, 34, 48, .12); stroke-width: 1; }

.thc-read {
  font-family: var(--mono); font-size: 14px; margin-top: 14px; min-height: 1.4em;
  color: var(--teal-deep);
}
.thc-list { margin-top: 18px; display: grid; gap: 6px; }
.thc-item {
  display: grid; grid-template-columns: 44px minmax(0,1fr) auto auto; gap: 14px; align-items: center;
  text-decoration: none; color: inherit; border-bottom: 1px solid rgba(184,134,91,.3); padding: 7px 4px;
}
.thc-item:hover { background: rgba(184, 134, 91, .12); }
.thc-item img { width: 100%; height: 34px; object-fit: contain; }
.thc-item b { font-family: var(--disp); font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.thc-item i { font-style: normal; font-family: var(--mono); font-size: 13px; color: rgba(0, 34, 48,.62); display: block; }
.thc-item em { font-style: normal; font-family: var(--mono); font-size: 14.5px; }

/* ==========================================================================
   4. #whichstore — the neighbourhood picker  (also used by #compare)
   ========================================================================== */
.ws-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(18px, 2.6vw, 34px); margin-top: clamp(26px, 3.2vw, 42px); align-items: start; }
.ws-pick { padding: clamp(20px, 2.4vw, 30px); }

.combo { position: relative; }
.combo input {
  width: 100%; font-family: var(--body); font-size: 16px; padding: 13px 14px;
  border: 1px solid rgba(0, 48, 63, .3); border-radius: 2px; background: var(--bone); color: var(--ink);
}
.combo input:focus { outline: none; border-color: var(--cedar-deep); box-shadow: 0 0 0 3px rgba(184,134,91,.25); }
.combo-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 260px; overflow-y: auto; background: var(--bone); color: var(--ink);
  border: 1px solid rgba(0, 48, 63, .3); border-radius: 2px; list-style: none; margin: 0; padding: 4px 0;
  box-shadow: 0 16px 34px rgba(0, 48, 63, .2);
}
.combo-list[hidden] { display: none; }
.combo-g { font-family: var(--mono); font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cedar-deep); padding: 9px 13px 4px; }
.combo-o { padding: 8px 13px; cursor: pointer; font-size: 16px; }
.combo-o:hover, .combo-o.is-on { background: var(--teal); color: var(--bone); }
.combo-none { padding: 12px 13px; font-family: var(--mono); font-size: 14px; color: rgba(0, 34, 48,.6); }

.ws-answer { padding: clamp(20px, 2.6vw, 34px); background: var(--bone); color: var(--ink); border-radius: 3px; }
.sec-teal .ws-answer h3, .sec-teal-deep .ws-answer h3, .sec-ink .ws-answer h3,
.ws-answer h3 { color: var(--ink); font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.04; }
.ws-line { font-size: 16px; margin: 12px 0 18px; }
.ws-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; border-top: 1px solid rgba(184,134,91,.44); padding-top: 16px; }
.ws-facts p { margin: 0; font-size: 16px; }
.ws-tag { display: inline-block; font-family: var(--mono); font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; background: var(--teal); color: var(--bone); padding: 5px 9px; border-radius: 2px; }
.ws-dist { font-family: var(--mono); font-size: 14px; color: var(--teal-deep); margin-top: 12px; min-height: 1.3em; }
/* The answer card is a bone island inside a dark section, so the dark-ground
   overrides for .t-k / .t-note inherit into it and paint bone-on-bone.
   Same treatment .lab-panel already uses on its light ground. */
.ws-answer .t-k,
.sec-ink .ws-answer .t-k, .sec-teal .ws-answer .t-k, .sec-teal-deep .ws-answer .t-k { color: var(--teal-deep); }
.ws-answer .t-note,
.sec-ink .ws-answer .t-note, .sec-teal .ws-answer .t-note, .sec-teal-deep .ws-answer .t-note { color: rgba(0, 34, 48, .72); }

/* ==========================================================================
   5. #timeline — Legacy to Legal, year by year
   ========================================================================== */
.tl { margin-top: clamp(26px, 3.2vw, 44px); }
.tl-scale { position: relative; height: 34px; margin-bottom: 8px; }
.tl-scale::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 1px; background: rgba(244,239,228,.26); }
.tl-tick { position: absolute; top: 0; transform: translateX(-50%); background: transparent; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 13px; letter-spacing: .12em; color: rgba(244,239,228,.55); padding: 0 6px; }
.tl-tick::after { content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; margin: 6px auto 0;
  background: rgba(244,239,228,.3); }
.tl-tick.is-on { color: var(--bone); }
.tl-tick.is-on::after { background: var(--cedar); box-shadow: 0 0 0 4px rgba(184,134,91,.26); }

.tl-track {
  /* the stops must NOT shrink to fit — minmax(0,…) let the track collapse
     to one screen and the scrub had nothing to scrub */
  display: grid; grid-auto-flow: column; grid-auto-columns: 76%;
  gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; scrollbar-width: thin;
}
.tl-track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.tl-stop { scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0; border: 1px solid rgba(244,239,228,.22); border-radius: 3px; overflow: hidden; }
/* Contain left ~98px of dead teal above and below the landscape Robson frame
   while the portrait Broadway frame filled the same cell — the component
   contradicted itself. Both fill now; the storefront sign sits high in each
   frame, so the crop is anchored above centre. The store card already shows
   the same photograph cropped, so this is consistent with the page. */
.tl-shot { background: #041D27; display: flex; align-items: center; justify-content: center; }
.tl-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.tl-mark { display: grid; place-items: center; background: var(--teal-deep); padding: 20px; overflow: hidden; }
.tl-mark span { font-family: var(--disp); font-weight: 800; font-size: clamp(2.1rem, 3.1vw, 3.4rem); max-width: 100%;
  line-height: .86; letter-spacing: -.04em; color: rgba(244,239,228,.9); text-align: center; }
.tl-body { padding: clamp(20px, 2.4vw, 32px); }
.tl-year { font-family: var(--mono); font-size: 13.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cedar); margin: 0 0 10px; }
.tl-body h3 { color: var(--bone); font-size: clamp(1.25rem, 2.1vw, 1.75rem); margin-bottom: 10px; }
.tl-body p { color: rgba(244,239,228,.78); font-size: 16.5px; }
.tl-arrows { display: flex; gap: 8px; margin-top: 16px; }

/* ==========================================================================
   6. #compare — the comparison sheet
   ========================================================================== */
.cmp { margin-top: clamp(26px, 3.2vw, 42px); }
.cmp-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* The sheet is a fixed white card regardless of which section wraps the tool
   (#compare sits on a plain band on the homepage but on sec-ink on the order
   page), so its text color is pinned here too rather than left to inherit
   the section's own color — otherwise the dark-section cream text renders
   near-invisible on this always-white background. */
.cmp-sheet { margin-top: 24px; border: 1px solid rgba(184,134,91,.44); border-radius: 3px; overflow: hidden; background: #fff; color: var(--char); }
.cmp-heads { display: grid; grid-template-columns: 148px 1fr 1fr; }
.cmp-heads > div { padding: 18px; border-bottom: 1px solid rgba(184,134,91,.4); }
.cmp-heads > div + div { border-left: 1px solid rgba(184,134,91,.4); }
.cmp-slot { text-align: center; }
.cmp-slot img { width: 100%; max-width: 190px; height: 150px; object-fit: contain; margin: 0 auto 12px; }
.cmp-slot .cb { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep); }
.cmp-slot .cn { font-family: var(--disp); font-weight: 800; font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.1; letter-spacing: -.02em; margin: 5px 0 0; }
.cmp-label { display: grid; align-items: end; }
.cmp-label p { font-family: var(--mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--cedar-deep); margin: 0; }
.cmp-row { display: grid; grid-template-columns: 148px 1fr 1fr; border-bottom: 1px solid rgba(184,134,91,.26); }
.cmp-row:last-child { border-bottom: 0; }
.cmp-row > * { padding: 11px 18px; font-size: 16.5px; }
.cmp-row > * + * { border-left: 1px solid rgba(184,134,91,.26); }
.cmp-row .ck { font-family: var(--mono); font-size: 13px; letter-spacing: .13em; text-transform: uppercase; color: rgba(0, 34, 48,.66); }
.cmp-row.is-diff .cv { background: rgba(184, 134, 91, .13); }
.cmp-go { display: grid; grid-template-columns: 148px 1fr 1fr; border-top: 1px solid rgba(184,134,91,.4); }
.cmp-go > * { padding: 16px 18px; }
.cmp-go > * + * { border-left: 1px solid rgba(184,134,91,.26); }

/* ==========================================================================
   7. #label — read the label
   ========================================================================== */
.lab-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(26px, 3.2vw, 42px); align-items: start; }
.lab-stage { position: relative; }
.lab-stage svg { display: block; width: 100%; height: auto; }
.lab-hot {
  position: absolute; background: rgba(0, 96, 128, .13); border: 1.5px dashed rgba(0, 96, 128, .6);
  border-radius: 3px; cursor: pointer; padding: 0; color: transparent; font-size: 1px;
  transition: background .15s ease, border-color .15s ease;
}
.lab-hot::after {
  content: attr(data-n); position: absolute; top: -11px; left: -11px;
  width: 23px; height: 23px; border-radius: 50%; background: var(--teal); color: var(--bone);
  font-family: var(--mono); font-size: 13px; display: grid; place-items: center; letter-spacing: 0;
}
.lab-hot:hover { background: rgba(184, 134, 91, .22); border-color: var(--cedar-deep); }
.lab-hot.is-on { background: rgba(184, 134, 91, .28); border-style: solid; border-color: var(--cedar-deep); }
.lab-hot.is-on::after { background: var(--cedar-deep); }
.lab-panel { padding: clamp(20px, 2.6vw, 32px); }
.lab-panel h3 { font-size: clamp(1.25rem, 2.1vw, 1.7rem); margin-bottom: 10px; }
.lab-panel p { font-size: 17px; }
.lab-idx { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 4px; }
.lab-idx button {
  width: 100%; text-align: left; background: transparent; border: 0; border-top: 1px solid rgba(184,134,91,.34);
  padding: 9px 2px; cursor: pointer; font-family: var(--mono); font-size: 13.5px; letter-spacing: .06em;
  color: rgba(0, 34, 48,.72);
}
.lab-idx button:hover, .lab-idx button.is-on { color: var(--cedar-deep); }
.lab-idx button b { display: inline-block; width: 26px; color: var(--teal-deep); font-weight: 400; }

/* ==========================================================================
   8. #quiz — Cannabis 101
   ========================================================================== */
.quiz { margin-top: clamp(26px, 3.2vw, 44px); display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 42px); align-items: start; }
.quiz-score { padding: clamp(20px, 2.6vw, 32px); }
.quiz-dial { display: flex; align-items: baseline; gap: 6px; }
.quiz-dial b { font-family: var(--disp); font-weight: 800; font-size: clamp(3.4rem, 7vw, 6rem); line-height: .82;
  letter-spacing: -.045em; color: var(--bone); }
.quiz-dial span { font-family: var(--mono); font-size: 15.5px; color: rgba(244,239,228,.6); }
.quiz-pips { display: flex; gap: 5px; margin: 20px 0 0; padding: 0; list-style: none; }
.quiz-pips li { flex: 1 1 0; min-width: 0; height: 6px; border-radius: 2px; background: rgba(244,239,228,.18); }
.quiz-pips li.ok { background: var(--teal); }
.quiz-pips li.no { background: var(--cedar-deep); }
.quiz-card { padding: clamp(22px, 3vw, 38px); }
.quiz-q { font-family: var(--disp); font-weight: 800; font-size: clamp(1.35rem, 2.5vw, 2rem); line-height: 1.04;
  letter-spacing: -.02em; color: var(--bone); margin: 8px 0 20px; }
.quiz-opts { display: grid; gap: 9px; }
.t-opt.is-right { background: var(--teal); border-color: var(--teal); color: var(--bone); }
.t-opt.is-wrong { background: rgba(122, 78, 45, .5); border-color: var(--cedar-deep); color: var(--bone); }
.quiz-fb { margin-top: 18px; font-size: 16.5px; color: rgba(244,239,228,.84); min-height: 1.2em; }
.quiz-fb b { color: var(--bone); }

/* ==========================================================================
   9. #brands — the brand panel under the wall
   ========================================================================== */
.brand-wall li button {
  background: transparent; border: 0; padding: 0; cursor: pointer; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  border-bottom: 1px solid transparent; transition: color .16s ease, border-color .16s ease;
}
.brand-wall li button:hover, .brand-wall li button[aria-expanded="true"] {
  color: var(--cedar); border-bottom-color: var(--cedar);
}
.bpanel { margin-top: clamp(24px, 3vw, 40px); padding: clamp(20px, 2.6vw, 32px); }
.bpanel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.bpanel-head h3 { color: var(--bone); font-size: clamp(1.3rem, 2.2vw, 1.9rem); }
.bpanel-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; }
.bpanel-hint { font-family: var(--mono); font-size: 13.5px; color: rgba(244,239,228,.6); margin-top: 16px; }

/* ==========================================================================
   phones
   ========================================================================== */
@media (max-width: 1040px) {
  .srow { grid-template-columns: 48px minmax(0, 1.4fr) minmax(0, 1fr) 74px; }
  .srow-go { display: none; }
  .quiz { grid-template-columns: 1fr; }
  .lab-grid, .ws-grid { grid-template-columns: 1fr; }
  .finder-opts { grid-template-columns: repeat(2, 1fr); }
  .finder-res { grid-template-columns: repeat(2, 1fr); }
  .sfilters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bpanel-rows { grid-template-columns: 1fr; }
  .tl-track { grid-auto-columns: 88%; }
}
@media (max-width: 720px) {
  .finder-opts, .finder-opts.is-3 { grid-template-columns: 1fr; }
  .finder-res { grid-template-columns: 1fr; }
  .finder-rail { grid-template-columns: repeat(4, 1fr); gap: 2px; }
  .finder-rail li { font-size: 9px; letter-spacing: .08em; }
  .sfilters { grid-template-columns: 1fr; }
  .srow { grid-template-columns: 44px minmax(0, 1fr) 68px; }
  .srow-m { display: none; }
  .ws-facts { grid-template-columns: 1fr; }
  .cmp-pickers { grid-template-columns: 1fr; }
  .cmp-heads, .cmp-row, .cmp-go { grid-template-columns: 96px 1fr 1fr; }
  .cmp-row > * { padding: 9px 11px; font-size: 15px; }
  .cmp-heads > div { padding: 12px; }
  .cmp-slot img { height: 96px; }
  .tl-stop { grid-template-columns: 1fr; }

  .thc-item { grid-template-columns: 38px minmax(0,1fr) auto; }
  .thc-item em { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pc--find, .t-opt, .schip, .srow, .thc-band rect { transition: none; }
  .tl-track { scroll-behavior: auto; }
}

/* ==========================================================================
   One fix outside the tools: site.css re-states .pillar near the end of the
   file, after its own max-width:760px rule, so at 390 the three "why
   WestCanna" pillars kept a 252px label column and the copy ran two words
   wide. tools.css loads after site.css, so this puts the stack back.
   ========================================================================== */
@media (max-width: 760px) {
  .pillar { grid-template-columns: 1fr; gap: 8px; }
}

/* ==========================================================================
   BUILD 04 — the tools move
   Each of these fires on content the tools write themselves, so the animation
   is declared against the class the tool already uses: an element inserted into
   a parent that is already marked in-view runs its keyframes the moment it
   lands. Every rule is inside the reduced-motion guard at the bottom.
   ========================================================================== */

/* --- the THC bars grow from the baseline when the chart enters view ------ */
@keyframes wcGrowUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes wcGrowRight { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.thc-chart.is-seen .thc-band rect:not(.thc-hit) {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: wcGrowUp .62s cubic-bezier(.2,.8,.3,1) both;
}
.thc-chart.is-seen .thc-band:nth-of-type(1) rect { animation-delay: .00s; }
.thc-chart.is-seen .thc-band:nth-of-type(2) rect { animation-delay: .05s; }
.thc-chart.is-seen .thc-band:nth-of-type(3) rect { animation-delay: .10s; }
.thc-chart.is-seen .thc-band:nth-of-type(4) rect { animation-delay: .15s; }
.thc-chart.is-seen .thc-band:nth-of-type(5) rect { animation-delay: .20s; }
.thc-chart.is-seen .thc-band:nth-of-type(6) rect { animation-delay: .25s; }
.thc-chart.is-seen .thc-band:nth-of-type(7) rect { animation-delay: .30s; }
.thc-chart.is-seen .thc-band:nth-of-type(8) rect { animation-delay: .35s; }
.thc-chart.is-seen .thc-band:nth-of-type(9) rect { animation-delay: .40s; }
/* below 700px the chart lies on its side, so the bars grow from the left */
@media (max-width: 700px) {
  .thc-chart.is-seen .thc-band rect:not(.thc-hit) {
    transform-origin: 0 50%; animation-name: wcGrowRight;
  }
}

/* --- the finder's step cards slide in from the right, out to the left ---- */
@keyframes wcStepIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.finder-card, .finder-res, .finder-sum { animation: wcStepIn .42s cubic-bezier(.2,.8,.3,1) both; }
.finder-rail li { transition: border-top-color .3s ease, color .3s ease; }

/* --- search results fade-swap on every query ----------------------------- */
@keyframes wcFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.srows .srow { animation: wcFadeIn .28s ease both; }
.srows .srow:nth-child(1) { animation-delay: .00s; }
.srows .srow:nth-child(2) { animation-delay: .02s; }
.srows .srow:nth-child(3) { animation-delay: .04s; }
.srows .srow:nth-child(4) { animation-delay: .06s; }
.srows .srow:nth-child(5) { animation-delay: .08s; }
.srows .srow:nth-child(6) { animation-delay: .10s; }
.srows .srow:nth-child(n+7) { animation-delay: .12s; }

/* --- the compare sheet wipes its differences ----------------------------
   The shading is painted as a background image so the wipe can run on
   background-size and never sit over the value it is shading. */
@keyframes wcWipeBg { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.cmp-row.is-diff .cv {
  background-color: transparent;
  background-image: linear-gradient(rgba(184, 134, 91, .13) 0 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation: wcWipeBg .5s cubic-bezier(.2,.8,.3,1) both;
}
.cmp-row.is-diff:nth-of-type(2) .cv { animation-delay: .04s; }
.cmp-row.is-diff:nth-of-type(3) .cv { animation-delay: .08s; }
.cmp-row.is-diff:nth-of-type(4) .cv { animation-delay: .12s; }
.cmp-row.is-diff:nth-of-type(5) .cv { animation-delay: .16s; }
.cmp-row.is-diff:nth-of-type(6) .cv { animation-delay: .20s; }
.cmp-row.is-diff:nth-of-type(n+7) .cv { animation-delay: .24s; }

/* --- the quiz: answers ripple on press, the dial fills ------------------ */
@keyframes wcRipple {
  from { opacity: .5; transform: scale(.2); }
  to { opacity: 0; transform: scale(2.4); }
}
.quiz-opts .t-opt { position: relative; overflow: hidden; }
.quiz-opts .t-opt::after {
  content: ''; position: absolute; left: var(--rx, 50%); top: var(--ry, 50%);
  width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%;
  background: rgba(244, 239, 228, .5); opacity: 0; pointer-events: none;
}
.quiz-opts .t-opt.is-ripple::after { animation: wcRipple .52s ease-out; }
@keyframes wcDial { from { opacity: 0; transform: translateY(10px) scale(.86); } to { opacity: 1; transform: none; } }
.quiz-dial b { display: inline-block; transform-origin: 0 100%; }
.quiz-dial.is-bumped b { animation: wcDial .42s cubic-bezier(.2,.8,.3,1); }

@media (prefers-reduced-motion: reduce) {
  .thc-chart.is-seen .thc-band rect:not(.thc-hit),
  .finder-card, .finder-res, .finder-sum,
  .srows .srow, .cmp-row.is-diff .cv,
  .quiz-opts .t-opt.is-ripple::after, .quiz-dial.is-bumped b { animation: none !important; }
  .cmp-row.is-diff .cv { background-color: rgba(184, 134, 91, .13); background-image: none; }
}

/* ==========================================================================
   BUILD 05 — crop correction (tools.css loads after site.css, so the rule
   that wins has to live here). The timeline carries one portrait storefront
   and one landscape one; a cover fill cut 40 % off the Robson frame.
   ========================================================================== */
.tl-shot { background: #041D27; }
.tl-shot img { object-fit: contain; object-position: 50% 50%; }

/* ==========================================================================
   BUILD 05 — corrections from reading the QA screenshots
   ========================================================================== */

/* 1. The drawer is an INK panel, not a bone one. Every tool that moved into
      it (the finder, the compare sheet, the neighbourhood picker) was drawn
      for a dark band — on bone the step rail, the question type and the
      result heading all painted cream-on-cream. The panel now carries
      .sec-ink, so those rules apply as they were written, and the drawer's
      own furniture is restated for the dark ground here. */
.drawer-panel { background: var(--ink); color: rgba(244, 239, 228, .86); border-left-color: var(--teal); }
.drawer-head { border-bottom-color: rgba(184, 134, 91, .3); }
.drawer-k { color: var(--sage); }
.drawer-h { color: var(--bone); }
.drawer-x { border-color: rgba(244, 239, 228, .34); }
.drawer-x svg { stroke: var(--bone); }
.drawer-x:hover { border-color: var(--cedar); background: rgba(244, 239, 228, .07); }
.drawer-tabs { background: rgba(0, 0, 0, .22); border-bottom-color: rgba(184, 134, 91, .3); }
.drawer-tab { color: rgba(244, 239, 228, .58); }
.drawer-tab.is-on { color: var(--bone); border-bottom-color: var(--cedar); background: transparent; }
.drawer-lede { color: rgba(244, 239, 228, .72); }

/* 2. A 420 px column cannot hold a three-across result grid or a 148 px
      label gutter — both ran off the right edge of the panel. */
.drawer .finder-res { grid-template-columns: minmax(0, 1fr) !important; }
.drawer .finder-card { padding: 0; border: 0; background: transparent; }
.drawer .finder-rail { margin-bottom: 20px; }
.drawer .cmp-heads, .drawer .cmp-row, .drawer .cmp-go { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr); }
.drawer .cmp-heads > div { padding: 12px 10px; }
.drawer .cmp-row > * { padding: 9px 10px; font-size: 15px; }
.drawer .cmp-go > * { padding: 11px 10px; }
.drawer .cmp-row .ck, .drawer .cmp-label p { font-size: 12px; letter-spacing: .1em; }
.drawer .cmp-slot img { height: 74px; margin-bottom: 8px; }
.drawer .cmp-slot .cn { font-size: 15px; overflow-wrap: anywhere; }
.drawer .cmp-slot .cb { font-size: 9px; letter-spacing: .1em; }
.drawer .ws-facts { grid-template-columns: 1fr; gap: 10px; }
.drawer .cmp-sheet { margin-top: 18px; }

/* 3. #why sits on the ink band, and the three lines were set in the light
      band's body colour — invisible against it. */
.sec-ink .why-t { color: rgba(244, 239, 228, .76); }
.sec-ink .why-line { border-top-color: rgba(184, 134, 91, .45); }
.sec-ink .why-k { color: var(--bone); }

/* 4. The footer's "Service areas" label was inheriting the column's body size
      from .foot-areas p and printing twice the size of the other three. */
.site-foot .foot-k {
  font-family: var(--mono); font-size: 13.5px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--sage); margin: 0 0 12px; line-height: 1.5;
}

/* 5. Category tiles: "Concentrates" and "Accessories" broke mid-word in a
      four-across grid. The name keeps the 2.4 rem floor the brief asks for and
      the tile gives it the room instead. */
.cat-tile { padding: clamp(18px, 1.7vw, 24px); justify-content: flex-start; gap: 12px; }
.cat-name { font-size: clamp(2.4rem, 2.55vw, 2.6rem); overflow-wrap: normal; hyphens: none; }
@media (max-width: 1000px) { .cat-name { font-size: 2.6rem; } }
@media (max-width: 480px) { .cat-name { font-size: 2.4rem; } }

/* 6. The Dutchie embed paints nothing until its iframe answers; a bare grey
      rectangle is not a loading state. */
.dutchie-wrap { position: relative; background: var(--bone); border: 1px solid rgba(184, 134, 91, .4); border-radius: 3px; }
.dutchie-hold {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 10px;
  text-align: center; padding: 24px; pointer-events: none;
}
.dutchie-hold p { font-family: var(--mono); font-size: 14.5px; letter-spacing: .06em; color: var(--teal-deep); margin: 0; }
.dutchie-hold .dh-sub { color: rgba(0, 34, 48, .6); font-size: 13.5px; }
.dutchie-wrap.is-live .dutchie-hold { display: none; }
.dutchie-wrap #dutchie--embed__container { position: relative; z-index: 1; }

/* ==========================================================================
   Typography correction, 16 Sep 2026 — lives HERE, not in site.css
   Ajay: "all of the text and font that is highlighted like this please FIX",
   then: "I don't know if you fixed the font for every one of the pages."
   He was right to ask. The first attempt went into site.css, but this file
   loads AFTER it and re-declares --mono on about forty classes, so half the
   fix was silently overruled. Auditing the rendered pages (not the source)
   found the survivors: .t-note, .note, .map-caption, the compliance notice and
   several tool panels were still typewriter-set.
   Rule: prose gets --body. Short uppercase micro-labels (eyebrows, step
   numbers, column keys, .hero-trust, brand lines) stay in DM Mono on purpose —
   that device is the site's character and the client has never objected to it.
   ========================================================================== */
.t-note, .drawer-lede, .head-3-side, .step-t, .note, .ws-line, .gate-sub,
.tlex-d, .tlex-lede, .lede, .faq-a, .why-t, .form-note, .pillar-t, .status,
.map-caption, .list-sub, .door-a, .h1-sub, .dated, .dh-sub, .dutchie-note,
.finder-sub, .combo-none, .thc-note, .bpanel-hint, .ws-dist, .slot-note,
.gloss-close, .notice-in p, .notice-in strong, .notice-in a,
.dutchie-hold p, .foot-low, .door-panel address, .foot-store address {
  font-family: var(--body);
  letter-spacing: normal;
}

/* and give the ones that were set at 12.5–14px a real reading size */
.t-note, .note, .map-caption, .dh-sub, .dutchie-note, .form-note, .slot-note,
.thc-note, .bpanel-hint, .ws-dist, .combo-none { font-size: 1rem; line-height: 1.6; }
.drawer-lede, .head-3-side, .tlex-lede, .finder-sub, .gate-sub { font-size: 1.02rem; line-height: 1.6; }
.notice-in p, .notice-in strong, .notice-in a { font-size: 1rem; line-height: 1.7; }
.door-panel address, .foot-store address { font-size: 1rem; line-height: 1.8; }
.foot-low { font-size: .95rem; }
.status { font-size: 1.05rem; }

/* The last two the render audit caught: the footer compliance block is
   .foot-legal (not .notice-in, which is what I had guessed from the source),
   and .store-pop .note beats a bare .note on specificity. Both carry real
   sentences a customer reads, so both take the body face. */
.foot-legal, .foot-legal p, .foot-legal strong, .foot-legal a,
.store-pop .note {
  font-family: var(--body);
  letter-spacing: normal;
}
.foot-legal, .foot-legal p, .foot-legal strong, .foot-legal a { font-size: .97rem; line-height: 1.7; }
.store-pop .note { font-size: .95rem; line-height: 1.55; }

/* ==========================================================================
   The notes take the logo's face, 16 Sep 2026
   Ajay, at the notes under the Dutchie menu: "make it more creative and not
   the stupid ass font."
   Fair. Moving these off DM Mono fixed the typewriter problem and replaced it
   with a plain UI sans, which is nobody's idea of a voice. The small print now
   uses Bitter, the face taken from the client's own emblem and already
   carrying the headlines, the nav wordmark, the buttons and the hero hours —
   so a note reads as the same brand talking quietly, not as system chrome.
   Real body paragraphs stay in Albert Sans: a serif is right for a line or
   two, and tiring for a column.
   ========================================================================== */
.dutchie-note, .dh-sub, .t-note, .note, .store-pop .note, .map-caption,
.dated, .form-note, .slot-note, .combo-none, .thc-note, .bpanel-hint,
.ws-dist, .status, .foot-low, .gloss-close,
.foot-legal, .foot-legal p, .foot-legal strong, .foot-legal a,
.head-3-side, .drawer-lede, .tlex-lede, .finder-sub, .gate-sub {
  font-family: var(--disp);
  font-weight: 400;
  letter-spacing: normal;
}

/* SIZE. Ajay has asked for this more than once and I kept nudging it two
   pixels at a time, which is why it never looked like anything changed. These
   started at 12.5–14px. They are now 19–21px: the same size as the body copy
   beside them, because there is no reason a note a customer actually needs
   (the hours, the ID rule, the phone number when the menu fails) should be
   set smaller than the prose around it. */
.dutchie-note, .dh-sub, .t-note, .note, .store-pop .note, .map-caption,
.form-note, .slot-note, .combo-none, .thc-note, .bpanel-hint, .ws-dist {
  font-size: 1.19rem; line-height: 1.68;
}
.head-3-side, .drawer-lede, .tlex-lede, .finder-sub, .gate-sub {
  font-size: 1.3rem; line-height: 1.6;
}
.foot-legal, .foot-legal p, .foot-legal strong, .foot-legal a { font-size: 1.12rem; line-height: 1.72; }
.status { font-size: 1.32rem; font-weight: 700; }
.dated  { font-size: 1.19rem; }
.foot-low { font-size: 1.08rem; }

@media (max-width: 700px) {
  .head-3-side, .drawer-lede, .tlex-lede, .finder-sub, .gate-sub { font-size: 1.16rem; }
  .status { font-size: 1.2rem; }
}

/* .dated was still 15.5px on the order page: site.css scopes it there with a
   higher-specificity rule, so a bare .dated could not reach it. */
.order-hero .dated, #order-hero .dated, .sec .dated { font-size: 1.19rem; line-height: 1.6; }

/* the store addresses in the footer were the last monospace prose on the site */
address, .foot-store address, .door-panel address {
  font-family: var(--disp); font-style: normal; letter-spacing: normal;
  font-size: 1.14rem; line-height: 1.75;
}

/* .scard-cap address (the two store cards) out-specified the bare element
   selector above, so the store addresses on / and /about stayed monospace. */
.scard-cap address, .here-card address, .sec address, footer address,
.foot-store address, .door-panel address {
  font-family: var(--disp); font-style: normal; letter-spacing: normal;
  font-size: 1.14rem; line-height: 1.75;
}