/* Booking data case study - the 3D "booked together" map (assets/data-map.js).
   Loaded by case-studies/booking-data-analysis/ only. A navy instrument panel, like
   the screenshots on the other case studies but live: a title bar with the
   salon filter, a one-line "how to read it", the top add-ons to offer, the canvas beside a details panel, and a
   legend. Below 900px the panel drops under the canvas. */

#site .dm { --dm-bg: #0A1730; --dm-ink: #F3F6FC; --dm-mu: rgba(214,224,243,.88); --dm-line: rgba(214,224,243,.1);
  position: relative; margin: 0; overflow: hidden; color: var(--dm-ink); border-radius: 18px;
  background: radial-gradient(120% 90% at 50% 0%, #12244A 0%, var(--dm-bg) 62%);
  border: 1px solid rgba(11,27,51,.5);
  box-shadow: 0 1px 2px rgba(11,27,51,.1), 0 22px 40px -28px rgba(11,27,51,.32); }

/* title bar: what it is, and the city filter */
#site .dm-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  padding: 18px 24px; border-bottom: 1px solid var(--dm-line); }
/* an h2 since 2026-10-20 (heading order); keeps the old h3 look */
#site .dm-top h2, #site .dm-top h3 { line-height: 1.6; max-width: none; margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: #fff; }
#site .dm-seg { display: flex; gap: 2px; max-width: 100%; padding: 3px; overflow-x: auto; scrollbar-width: none;
  background: rgba(255,255,255,.05); border: 1px solid var(--dm-line); border-radius: 100px; }
#site .dm-seg::-webkit-scrollbar { display: none; }
#site .dm-seg button { flex: none; appearance: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1;
  padding: 8px 14px; border: 0; border-radius: 100px; background: none; color: var(--dm-mu); transition: background .2s, color .2s; }
#site .dm-seg button:hover { color: #fff; }
#site .dm-seg button[aria-pressed="true"] { background: #fff; color: var(--nvy); }
#site .dm-seg button:focus-visible { outline: 2px solid #7EA4F6; outline-offset: 1px; }

/* what this shows: the real-world idea in three plain steps (inside "How to read this") */
#site .dm-why { padding: 16px 24px 18px; border-bottom: 1px solid var(--dm-line); }
#site .dm-why ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: dmw; }
#site .dm-why li { position: relative; padding: 12px 14px 13px 48px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--dm-line); counter-increment: dmw; }
#site .dm-why li::before { content: counter(dmw); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 6px; background: rgba(233,199,125,.16); font-size: 13px; font-weight: 600; color: #E9C77D; }
#site .dm-why li b { display: block; margin-bottom: 3px; font-size: 14.5px; font-weight: 600; color: #fff; }
#site .dm-why li span { display: block; font-size: 14px; line-height: 1.5; color: #D5DEEE; }

/* how to read it, in one line, right under the steps */
#site .dm-read { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 24px; border-bottom: 1px solid var(--dm-line);
  font-size: 14.5px; line-height: 1.45; color: #E6ECF8; background: rgba(255,255,255,.03); }
#site .dm-read svg { flex: none; width: 34px; height: 16px; }
#site .dm-read b { font-weight: 600; color: #fff; }
#site .dm-read svg path { stroke: rgba(214,224,243,.75); stroke-width: 2.2; stroke-linecap: round; }

/* the action strip: the top three add-ons to offer, for all six salons or the chosen one */

/* the canvas and the details panel */
#site .dm-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; height: clamp(460px, 42vw, 600px); }
#site .dm-view { position: relative; min-width: 0; overflow: hidden;
  background: radial-gradient(60% 55% at 50% 52%, rgba(44,95,216,.16), transparent 70%); }
#site .dm-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; outline: none; -webkit-tap-highlight-color: transparent; }
#site .dm-canvas.point { cursor: pointer; }
#site .dm-canvas.grabbing { cursor: grabbing; }
#site .dm-canvas:focus-visible { box-shadow: inset 0 0 0 2px rgba(126,164,246,.6); }
#site .dm-card { position: absolute; left: 0; top: 0; z-index: 3; max-width: 270px; padding: 10px 13px 11px; border-radius: 10px; pointer-events: none;
  background: rgba(255,255,255,.97); color: var(--nvy); box-shadow: 0 18px 34px -16px rgba(0,0,0,.55);
  opacity: 0; transition: opacity .15s; }
#site .dm-card.on { opacity: 1; }
#site .dm-card b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
#site .dm-card span { display: flex; align-items: center; margin-top: 3px; font-size: 13px; line-height: 1.4; color: #4A5B75; }

#site .dm-panel { position: relative; min-width: 0; overflow-y: auto; padding: 20px 22px 22px; border-left: 1px solid var(--dm-line);
  background: rgba(255,255,255,.025); scrollbar-width: thin; scrollbar-color: rgba(214,224,243,.2) transparent; }
#site .dm-dot { display: inline-block; flex: none; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
#site .dm-ph { position: relative; padding-right: 34px; }
#site .dm-k { display: flex; align-items: center; margin: 0 0 6px; font-size: 13px; color: var(--dm-mu); }
#site .dm-ph h4 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: #fff; }
#site .dm-x { position: absolute; top: -4px; right: -6px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; cursor: pointer;
  border: 1px solid var(--dm-line); border-radius: 50%; background: none; color: var(--dm-mu); transition: background .2s, color .2s; }
#site .dm-x:hover { background: rgba(255,255,255,.08); color: #fff; }
#site .dm-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#site .dm-panel button:focus-visible { outline: 2px solid #7EA4F6; outline-offset: 1px; }
#site .dm-note { margin: 16px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(214,224,243,.84); }

/* the panel: what clients add to the selected treatment, and the suggestion */
#site .dm-lead { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: #E6ECF8; }
#site .dm-how { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: dmh; }
#site .dm-how li { position: relative; padding: 9px 0 9px 36px; font-size: 14.5px; line-height: 1.45; color: #E6ECF8; border-top: 1px solid var(--dm-line); counter-increment: dmh; }
#site .dm-how li::before { content: counter(dmh); position: absolute; left: 0; top: 8px; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 6px; background: rgba(255,255,255,.07); font-size: 13px; font-weight: 600; color: #fff; }
#site .dm-h { margin: 20px 0 2px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: #DDE5F4; }
#site .dm-pairs { margin: 8px 0 0; padding: 0; list-style: none; }
#site .dm-pairs button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; margin: 0 -10px; box-sizing: content-box;
  appearance: none; cursor: pointer; font: inherit; text-align: left; color: inherit; background: none; border: 0; border-radius: 8px; transition: background .15s; }
#site .dm-pairs button:hover { background: rgba(255,255,255,.06); }
#site .dm-pn { display: flex; align-items: baseline; min-width: 0; font-size: 14.5px; font-weight: 500; line-height: 1.35; color: #fff; }
#site .dm-pn .dm-dot { transform: translateY(-1px); }
#site .dm-pn b { display: block; font-weight: 600; }
#site .dm-pn small { display: block; margin-top: 1px; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--dm-mu); }
#site .dm-pairs em { display: inline-block; margin-top: 5px; padding: 1px 8px; font-style: normal; font-size: 12.5px; font-weight: 500; line-height: 1.5; color: #E9C77D;
  border: 1px dashed rgba(233,199,125,.6); border-radius: 100px; }
#site .dm-pairs em.ok { color: rgba(214,224,243,.84); border: 1px solid var(--dm-line); }
#site .dm-do { margin: 16px 0 0; padding: 14px 16px 15px; border-radius: 10px; border: 1px solid rgba(233,199,125,.55); background: rgba(233,199,125,.09); }
#site .dm-do.ok { border-color: var(--dm-line); background: rgba(255,255,255,.04); }
#site .dm-do p { margin: 0; font-size: 15px; line-height: 1.5; color: #fff; }
#site .dm-do p b { font-weight: 600; color: #fff; }
#site .dm-do .dm-do-k { margin-bottom: 4px; font-size: 13px; font-weight: 600; color: #E9C77D; }
#site .dm-do.ok .dm-do-k { color: #9FE870; }
#site .dm-do .dm-do-s { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: #DDE5F4; }
/* a small mock-up of the booking site's checkout step, so the suggestion is concrete */
#site .dm-mock { margin-top: 12px; }
#site .dm-mock .dm-mock-k { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 13px; color: #DDE5F4; }
#site .dm-mock .dm-mock-k span { flex: none; white-space: nowrap; padding: 0 7px; border-radius: 4px; border: 1px dashed rgba(214,224,243,.45); font-size: 12.5px; color: rgba(214,224,243,.84); }
#site .dm-mock-c { padding: 11px 13px 12px; border-radius: 9px; background: #fff; color: var(--nvy); box-shadow: 0 12px 24px -14px rgba(0,0,0,.6); }
#site .dm-mock-c p { margin: 0; color: var(--nvy); }
#site .dm-mock-c .dm-mock-t { font-size: 12.5px; font-weight: 600; color: #5A6A84; }
#site .dm-mock-c .dm-mock-i { display: flex; align-items: center; gap: 8px; margin: 3px 0 10px; padding-bottom: 10px; border-bottom: 1px solid #E3E8F1; font-size: 14px; font-weight: 600; }
#site .dm-mock-c .dm-mock-i i { width: 14px; height: 14px; border-radius: 4px; background: #2C5FD8; box-shadow: inset 0 0 0 3px #fff, 0 0 0 1.5px #2C5FD8; }
#site .dm-mock-c .dm-mock-a { display: flex; align-items: center; gap: 8px; margin-top: 5px; padding: 7px 10px; border-radius: 7px; border: 1.5px dashed #2C5FD8; background: #F1F5FE;
  font-size: 14px; font-weight: 600; color: #1E4BB8; }
#site .dm-mock-c .dm-mock-a span { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #2C5FD8; color: #fff; font-size: 14px; line-height: 1; }

/* legend */
#site .dm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0; padding: 14px 24px 15px; list-style: none;
  border-top: 1px solid var(--dm-line); font-size: 13px; color: var(--dm-mu); }
#site .dm-legend li { display: flex; align-items: center; }
#site .dm-legend .thick { position: relative; width: 22px; height: 9px; margin-right: 8px; }
#site .dm-legend .thick::before, #site .dm-legend .thick::after { content: ""; position: absolute; left: 0; right: 0; border-radius: 2px; background: rgba(214,224,243,.75); }
#site .dm-legend .thick::before { top: 0; height: 1px; opacity: .6; }
#site .dm-legend .thick::after { bottom: 0; height: 3.5px; }
#site .dm-legend .dash { width: 22px; height: 0; margin-right: 8px; border-top: 1.5px dashed rgba(214,224,243,.75); }
#site .dm-legend .ring { width: 11px; height: 11px; margin-right: 8px; border-radius: 50%; background: radial-gradient(circle, #0A1730 0 2px, #7EA4F6 2.5px); }

@media (max-width: 1100px) { #site .dm-body { grid-template-columns: minmax(0, 1fr) 300px; } #site .dm-body > .dm-seg { max-width: calc(100% - 300px - 32px); } }
@media (max-width: 900px) { #site .dm-why ol { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
@media (max-width: 900px) {
  #site .dm-body { grid-template-columns: 1fr; height: auto; }
  #site .dm-view { height: clamp(380px, 92vw, 520px); }
  #site .dm-panel { border-left: 0; border-top: 1px solid var(--dm-line); overflow: visible; }
}
@media (max-width: 560px) {
  #site .dm-top, #site .dm-legend, #site .dm-read, #site .dm-why { padding-left: 18px; padding-right: 18px; }
  #site .dm-read { align-items: flex-start; font-size: 14.5px; }
  #site .dm-read svg { margin-top: 2px; width: 28px; }
  #site .dm-panel { padding: 18px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) { #site .dm-card { transition: none; } }

/* the flowchart on this page has a Data lane; the key needs the lane colours too */
#site .flowd, #site .fdhead .fd-key { --k-ai: #2C5FD8; --k-code: #7C8BA3; --k-person: #5E9C37; --k-data: #1F9A8C; }
#site .fd-n[data-k="data"] { --kc: var(--k-data); }

/* ---- "How the analysis works": the flowchart in a dialog, styled like the other demo modals ---- */
html.dmf-lock, html.dmf-lock body { overflow: hidden; }
#site .dmf-modal { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 3vh 2vw; background: rgba(8,16,32,.62);
  backdrop-filter: blur(4px); opacity: 0; transition: opacity .22s; }
#site .dmf-modal[hidden] { display: none; }
#site .dmf-modal.on { opacity: 1; }
#site .dmf-win { display: flex; flex-direction: column; width: min(1240px, 96vw); max-height: 94vh; overflow: hidden; border-radius: 16px; background: #F7F9FC;
  box-shadow: 0 50px 120px -30px rgba(0,0,0,.6); transform: translateY(14px) scale(.985); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
#site .dmf-modal.on .dmf-win { transform: none; }
#site .dmf-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 20px; background: #0B1B33; color: #fff; }
#site .dmf-bar p { margin: 0; flex: 1; min-width: 0; font-size: 13.5px; color: #E4EAF4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#site .dmf-bar p b { margin-right: 10px; font-weight: 600; color: #fff; }
#site .dmf-x { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: 8px; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
#site .dmf-x:hover { background: rgba(255,255,255,.16); }
#site .dmf-x:focus-visible { outline: 2px solid #7EA4F6; outline-offset: 2px; }
#site .dmf-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#site .dmf-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(18px, 2.4vw, 32px); }
@media (prefers-reduced-motion: reduce) { #site .dmf-modal, #site .dmf-win { transition: none; } }
@media (max-width: 980px) {
  #site .dmf-modal { padding: 0; }
  #site .dmf-win { width: 100vw; height: 100%; max-height: none; border-radius: 0; }
  #site .dmf-body { padding: 14px 12px 24px; }
}

/* ---- the calm default (James 2026-10-16: "far too bloated"): title and two
   tools in the header, the salon filter on the map, a one-line panel; the
   explainer, the reading line and the key sit in "How to read this" ---- */
#site .dm-head { position: relative; z-index: 4; }
#site .dm-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
#site .dm-tag { padding: 2px 9px; border-radius: 100px; background: rgba(233,199,125,.14); border: 1px solid rgba(233,199,125,.35);
  font-size: 12.5px; font-weight: 600; line-height: 1.5; color: #E9C77D; }
#site .dm-tools { display: flex; flex-wrap: wrap; gap: 8px; }
#site .dm-tool { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 10px; appearance: none; cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 600; line-height: 1.2; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(214,224,243,.22);
  border-radius: 8px; transition: background .15s, border-color .15s; }
#site .dm-tool:hover { background: rgba(255,255,255,.13); }
#site .dm-tool[aria-expanded="true"] { background: #fff; color: var(--nvy); border-color: #fff; }
#site .dm-tool:focus-visible { outline: 2px solid #7EA4F6; outline-offset: 2px; }
#site .dm-tool svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#site .dm-q { display: block; flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
#site .dm-q .dot { fill: currentColor; stroke: none; }

/* the popover: drops over the top of the map, closed on load */
#site .dm-pop { position: absolute; top: calc(100% - 6px); right: 18px; width: min(500px, calc(100% - 36px)); padding: 14px 18px 14px;
  border-radius: 12px; background: #10214A; border: 1px solid rgba(214,224,243,.2); box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); }
#site .dm-pop[hidden] { display: none; }
#site .dm-pop-h { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#site .dm-pop-h p { margin: 0; font-size: 15px; font-weight: 600; color: #fff; }
#site .dm-pop-h .dm-x { position: static; }
#site .dm-pop .dm-why { padding: 0; border: 0; }
#site .dm-pop .dm-read { margin-top: 12px; padding: 11px 14px; border: 1px solid var(--dm-line); border-radius: 10px; }
#site .dm-pop .dm-legend { margin-top: 10px; padding: 10px 2px 0; border-top: 0; }
#site .dm-pop-note { margin: 10px 2px 0; font-size: 13px; color: rgba(214,224,243,.84); }

/* the salon filter sits on the map, like a map control */
#site .dm-body { position: relative; }
#site .dm-body > .dm-seg { position: absolute; top: 14px; left: 16px; z-index: 3; max-width: calc(100% - 340px - 32px); background: rgba(10,23,48,.82); }
#site .dm-is-report .dm-body > .dm-seg { max-width: calc(100% - 32px); }

/* the panel with nothing selected: one line */
#site .dm-empty { display: grid; justify-items: start; gap: 10px; padding-top: 6px; }
#site .dm-empty svg { width: 40px; height: 24px; fill: none; stroke: rgba(214,224,243,.55); stroke-width: 1.6; }
#site .dm-empty p { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.45; color: #fff; }
#site .dm-empty small { font-size: 13px; color: var(--dm-mu); }

/* the full list behind an accordion */
#site .dm-acc { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 14px; padding: 11px 13px;
  appearance: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; text-align: left; color: #fff;
  background: rgba(255,255,255,.05); border: 1px solid var(--dm-line); border-radius: 9px; transition: background .15s; }
#site .dm-acc:hover { background: rgba(255,255,255,.09); }
#site .dm-acc svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
#site .dm-acc[aria-expanded="true"] svg { transform: rotate(180deg); }
#site .dm-acc-b[hidden] { display: none; }
#site .dm-acc-b .dm-h { margin-top: 12px; }
#site .dm-panel > .dm-ph + .dm-do { margin-top: 14px; }

@media (max-width: 900px) {
  #site .dm-pop { position: static; width: auto; margin: 0 12px 12px; }
  #site .dm-body > .dm-seg, #site .dm-is-report .dm-body > .dm-seg { top: 10px; left: 10px; max-width: calc(100% - 20px); }
}
@media (max-width: 560px) {
  #site .dm-tools { width: 100%; }
  #site .dm-tool { flex: 1 1 auto; justify-content: center; }
}

/* ---- Map | Report: the view switch in the header ---- */
#site .dm-views { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: rgba(255,255,255,.06); border: 1px solid rgba(214,224,243,.22); }
#site .dm-views button { appearance: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; line-height: 1; padding: 7px 14px; border: 0; border-radius: 6px;
  background: none; color: var(--dm-mu); transition: background .15s, color .15s; }
#site .dm-views button:hover { color: #fff; }
#site .dm-views button[aria-pressed="true"] { background: #fff; color: var(--nvy); }
#site .dm-views button:focus-visible { outline: 2px solid #7EA4F6; outline-offset: 2px; }

/* ---- the Report view: fills the map's frame and scrolls inside it ---- */
#site .dm-is-report .dm-view, #site .dm-is-report .dm-panel { display: none; }
#site .dm-report { grid-column: 1 / -1; min-height: 0; overflow-y: auto; margin-top: 60px; padding: 8px 24px 26px; border-top: 1px solid var(--dm-line); scrollbar-width: thin; scrollbar-color: rgba(214,224,243,.2) transparent; }
#site .dm-report[hidden] { display: none; }
#site .dm-r-head { max-width: 860px; }
#site .dm-r-k, #site .dm-r-h { margin: 0; font-size: 13px; font-weight: 600; color: #E9C77D; }
#site .dm-r-head h4 { margin: 6px 0 0; font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; color: #fff; }
#site .dm-r-head h4 b { color: #E9C77D; font-weight: 600; }
#site .dm-r-head > p:last-child { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--dm-mu); }
#site .dm-r-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
#site .dm-r-grid > section, #site .dm-r-how { padding: 16px 18px; border: 1px solid var(--dm-line); border-radius: 12px; background: rgba(255,255,255,.03); }
#site .dm-r-top ol, #site .dm-r-salons { margin: 10px 0 0; padding: 0; list-style: none; }
#site .dm-r-top li + li, #site .dm-r-salons li + li { border-top: 1px solid var(--dm-line); }
#site .dm-r-top button, #site .dm-r-salons button { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 8px; margin: 0 -8px; box-sizing: content-box;
  appearance: none; cursor: pointer; font: inherit; text-align: left; color: inherit; background: none; border: 0; border-radius: 8px; transition: background .15s; }
#site .dm-r-salons button { flex-direction: column; gap: 5px; }
#site .dm-r-salons button:disabled { cursor: default; }
#site .dm-r-top button:hover, #site .dm-r-salons button:not(:disabled):hover { background: rgba(255,255,255,.05); }
#site .dm-report button:focus-visible { outline: 2px solid #7EA4F6; outline-offset: 1px; }
#site .dm-r-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: rgba(233,199,125,.14); font-size: 13px; font-weight: 600; color: #E9C77D; }
#site .dm-r-tx { display: grid; gap: 3px; flex: 1; min-width: 0; }
#site .dm-r-tx b { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: #fff; }
#site .dm-r-tx small, #site .dm-r-salons small { font-size: 13px; line-height: 1.4; color: var(--dm-mu); }
#site .dm-r-bar, #site .dm-r-split { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
#site .dm-r-bar i { display: block; height: 100%; border-radius: 3px; background: #E9C77D; }
#site .dm-r-split { width: 100%; background: rgba(214,224,243,.25); }
#site .dm-r-split i { display: block; height: 100%; background: #E9C77D; }
#site .dm-r-foot { margin: 10px 0 0; font-size: 13px; color: rgba(214,224,243,.84); }
#site .dm-r-sh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; width: 100%; }
#site .dm-r-sh b { font-size: 14.5px; font-weight: 600; color: #fff; }
#site .dm-r-sh em { font-style: normal; font-size: 13px; color: #E9C77D; }
#site .dm-r-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0; font-size: 13px; color: var(--dm-mu); }
#site .dm-r-key i { width: 12px; height: 6px; border-radius: 2px; background: #E9C77D; }
#site .dm-r-key i.s { margin-left: 8px; background: rgba(214,224,243,.25); }
#site .dm-r-time { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--dm-line); }
#site .dm-r-time p:last-child { margin: 0; font-size: 14px; line-height: 1.5; color: #fff; }

/* how the suggestions were found: four steps, a highlight steps through them */
#site .dm-r-how { margin-top: 20px; }
#site .dm-r-how-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
#site .dm-r-link { appearance: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; padding: 6px 12px; border-radius: 7px;
  color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(214,224,243,.22); }
#site .dm-r-link:hover { background: rgba(255,255,255,.13); }
#site .dm-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: dms; }
#site .dm-steps li { position: relative; padding: 12px 14px 13px; border-radius: 10px; border: 1px solid var(--dm-line); background: rgba(255,255,255,.03);
  counter-increment: dms; transition: border-color .5s, background .5s; }
#site .dm-steps li::before { content: counter(dms); display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 8px; border-radius: 6px;
  background: rgba(126,164,246,.16); font-size: 13px; font-weight: 600; color: #9FB9F5; transition: background .5s, color .5s; }
#site .dm-steps li + li::after { content: ""; position: absolute; left: -10px; top: 24px; width: 8px; height: 8px; border-top: 1.5px solid rgba(214,224,243,.4); border-right: 1.5px solid rgba(214,224,243,.4); transform: rotate(45deg); }
#site .dm-steps li.on { border-color: rgba(233,199,125,.6); background: rgba(233,199,125,.07); }
#site .dm-steps li.on::before { background: #E9C77D; color: var(--nvy); }
#site .dm-steps b { display: block; font-size: 14.5px; font-weight: 600; color: #fff; }
#site .dm-steps span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: #D5DEEE; }
#site .dm-r-note { margin: 12px 0 0; font-size: 13px; color: rgba(214,224,243,.84); }
@media (prefers-reduced-motion: reduce) { #site .dm-steps li, #site .dm-steps li::before { transition: none; } }
@media (max-width: 1100px) { #site .dm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } #site .dm-steps li:nth-child(3)::after { display: none; } }
@media (max-width: 900px) {
  #site .dm-report { margin-top: 54px; padding: 14px 16px 20px; }
  #site .dm-r-grid { grid-template-columns: minmax(0, 1fr); }
  #site .dm-r-head h4 { font-size: 18.5px; }
}
@media (max-width: 560px) {
  #site .dm-steps { grid-template-columns: minmax(0, 1fr); }
  #site .dm-steps li + li::after { display: none; }
  #site .dm-views { flex: 1 1 100%; }
  #site .dm-views button { flex: 1; }
}

/* ---- "How to read this" as three short tabs ---- */
#site .dm-tabs { display: flex; gap: 2px; margin: 0 0 12px; padding: 3px; border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid var(--dm-line); }
#site .dm-tabs button { flex: 1; appearance: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; padding: 8px 10px;
  border: 0; border-radius: 6px; background: none; color: var(--dm-mu); }
#site .dm-tabs button:hover { color: #fff; }
#site .dm-tabs button[aria-selected="true"] { background: #fff; color: var(--nvy); }
#site .dm-tabs button:focus-visible, #site .dm-tp:focus-visible { outline: 2px solid #7EA4F6; outline-offset: 2px; }
#site .dm-tp { min-height: 128px; outline: none; }
#site .dm-tp[hidden] { display: none; }
#site .dm-lines { margin: 0; padding: 0; list-style: none; }
#site .dm-lines li { position: relative; padding: 7px 0 7px 18px; font-size: 15px; line-height: 1.4; color: #fff; }
#site .dm-lines li + li { border-top: 1px solid var(--dm-line); }
#site .dm-lines li::before { content: ""; position: absolute; left: 0; top: 14px; width: 7px; height: 7px; border-radius: 2px; background: #E9C77D; }
#site .dm-pop .dm-tp .dm-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; margin: 0; padding: 4px 0 0; }
#site .dm-pop .dm-tp .dm-legend li.k2 { grid-column: span 3; }
#site .dm-pop .dm-pop-note { margin-top: 12px; }

/* ---- the accordion: missed first, already suggested muted ---- */
#site .dm-acc-i { margin: 14px 0 4px; font-size: 14px; line-height: 1.45; color: #DDE5F4; }
#site .dm-g { margin: 12px 0 4px; font-size: 13px; font-weight: 600; color: #E9C77D; }
#site .dm-g.done { color: rgba(214,224,243,.84); }
#site .dm-rows { margin: 0; padding: 0; list-style: none; }
#site .dm-rows button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0 8px; width: 100%; padding: 8px 10px; margin: 0 -10px;
  box-sizing: content-box; appearance: none; cursor: pointer; font: inherit; text-align: left; color: #fff; background: none; border: 0; border-radius: 8px; transition: background .15s; }
#site .dm-rows button:hover { background: rgba(255,255,255,.06); }
#site .dm-rows .dm-dot { margin-right: 0; }
#site .dm-rows b { min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
#site .dm-rows small { font-size: 13px; color: var(--dm-mu); white-space: nowrap; }
#site .dm-rows em { padding: 0 7px; font-style: normal; font-size: 12.5px; font-weight: 600; line-height: 1.6; color: var(--nvy); background: #E9C77D; border-radius: 100px; }
#site .dm-rows button.done { grid-template-columns: auto minmax(0, 1fr) auto; color: rgba(214,224,243,.84); }
#site .dm-rows button.done b { font-weight: 500; }
#site .dm-rows button.done .dm-dot { opacity: .5; }
#site .dm-rows li + li button { border-top: 0; }

/* ---- the tour: a spotlight and a small card ---- */
#site .dm-tour-spot { position: fixed; left: 0; top: 0; z-index: 8000; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 2px #E9C77D, 0 0 0 9999px rgba(5,12,28,.58); transition: transform .3s cubic-bezier(.2,.7,.2,1), width .3s, height .3s; }
#site .dm-tour { position: fixed; left: 0; top: 0; z-index: 8001; width: 320px; padding: 14px 16px 12px; border-radius: 12px; background: #fff; color: var(--nvy);
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.55); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
#site .dm-tour p { margin: 0; }
#site .dm-tour .dm-tour-n { font-size: 12.5px; font-weight: 600; color: #6A7A93; }
#site .dm-tour .dm-tour-t { margin-top: 4px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--nvy); }
#site .dm-tour .dm-tour-d { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: #3D4E68; }
#site .dm-tour-b { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
#site .dm-tour-b span { flex: 1; }
#site .dm-tour-b button { appearance: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; padding: 7px 12px; border-radius: 7px;
  border: 1px solid #D6DEEA; background: #fff; color: var(--nvy); }
#site .dm-tour-b button[data-ts] { border-color: transparent; color: #6A7A93; padding-left: 4px; }
#site .dm-tour-b button.pri { background: var(--nvy); border-color: var(--nvy); color: #fff; }
#site .dm-tour-b button:disabled { opacity: .4; cursor: default; }
#site .dm-tour-b button:focus-visible { outline: 2px solid #2C5FD8; outline-offset: 2px; }
#site .dm-tour.dock { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; transform: none !important; }
@media (prefers-reduced-motion: reduce) { #site .dm-tour-spot, #site .dm-tour { transition: none; } }

/* the dialog's header: the same .fdhead as the other flowchart pages */
#site .dmf-body .fdhead { margin-bottom: 22px; }

/* ---- swapping out suggestions customers rarely take ---- */
#site .dm-mock-c .dm-mock-r { display: flex; align-items: center; gap: 8px; margin-top: 5px; padding: 7px 10px; border-radius: 7px; border: 1px solid #E3E8F1; background: #F6F7FA;
  font-size: 14px; font-weight: 500; color: #8592A6; }
#site .dm-mock-c .dm-mock-r span { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #B9C2D0; color: #fff; font-size: 14px; line-height: 1; }
#site .dm-mock-c .dm-mock-r s { flex: 1; min-width: 0; }
#site .dm-mock-c .dm-mock-r em { font-style: normal; font-size: 12.5px; font-weight: 600; color: #B4493C; }
#site .dm-rows em.rm { background: none; color: #F2A99E; border: 1px solid rgba(242,169,158,.6); }
#site .dm-g.rm { color: #F2A99E; }
#site .dm-r-head h4 b.rm { color: #F2A99E; }
#site .dm-r-h2 { margin-top: 18px; }
#site .dm-r-drop { margin: 8px 0 0; padding: 0; list-style: none; }
#site .dm-r-drop li + li { border-top: 1px solid var(--dm-line); }
#site .dm-r-drop button { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 9px 8px; margin: 0 -8px; box-sizing: content-box; appearance: none; cursor: pointer;
  font: inherit; text-align: left; color: inherit; background: none; border: 0; border-radius: 8px; }
#site .dm-r-drop button:hover { background: rgba(255,255,255,.05); }
#site .dm-r-n.rm { background: rgba(242,169,158,.14); color: #F2A99E; }

/* ---- seasonal pairs: one line in the panel, a short list in the Report ---- */
#site .dm-do .dm-do-season { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: #DDE5F4; }
#site .dm-do .dm-do-season b { color: #E9C77D; }
#site .dm-r-seas { margin: 8px 0 10px; padding: 0; list-style: none; }
#site .dm-r-seas li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; padding: 8px 0; font-size: 14px; }
#site .dm-r-seas li + li { border-top: 1px solid var(--dm-line); }
#site .dm-r-seas b { font-weight: 600; color: #fff; }
#site .dm-r-seas span { font-size: 13px; color: #E9C77D; }

/* the + / - marks are drawn, not typed, so they sit dead centre in their circles */
#site .dm-mock-c .dm-mock-a span svg, #site .dm-mock-c .dm-mock-r span svg, #site .dm-r-n.rm svg { display: block; width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }