/* dcm.css — v22.10.0 — the `dcm` element on the platform's pages: the map in the platform's card, the steps and the
   focus. The engine's own look (the card notation) is dcm-engine.css, generated from the template; these rules only
   place it and add the states dcm.js sets. Everything under .sf-dcm (the scope root is also .sf-dcm-scope). */

/* the kind labels' blue: the post-its' AA shade on the mint (4.81 : 1; the card's #2782a9 is 3.71 : 1 —
   design/dcm-element.md decision 6, as the post-it boards do since v22.7.0) */
.sf-dcm.sf-dcm-scope { --dcm-blue: #1f6f92; font-family: Khand, "Arial Narrow", "Roboto Condensed", sans-serif; color: var(--dcm-ink); }

/* the stage: the card's mint panel; the bar (public/stage.js) sits in the strip under the map, not over its boxes */
.sf-dcm .sf-dcm-stage { position: relative; background: var(--dcm-mint); border-radius: .5rem; padding: .35rem .35rem 3.1rem; overflow: hidden; }
/* v23.1.0 — the map's VIEWPORT: a clipped box with the map's aspect (at most 78vh tall); the canvas inside is moved and
   scaled by a CSS transform (dcm.js setVb) — the whole map fitted at load, the focus or the build-up framed, the reader's
   zoom. One finger scrolls the page over an unzoomed map (pan-y); two fingers zoom; a zoomed map is dragged. */
.sf-dcm .sf-dcm-map { display: block; position: relative; width: 100%; max-height: 78vh; margin: 0 auto; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; contain: layout paint; }
.sf-dcm .sf-dcm-map.is-zoomed { touch-action: none; cursor: grab; }
.sf-dcm .sf-dcm-map.is-panning { cursor: grabbing; }
.sf-dcm .sf-dcm-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.sf-dcm .sf-dcm-canvas .cec-svg { position: absolute; inset: 0; }

/* every box is a button for the focus (dcm.js); the engine's locked map says `cursor: default` */
.sf-dcm.is-live .cec-canvas.is-locked .cec-block[data-dcm-k] { cursor: pointer; }
.sf-dcm [data-dcm-k], .sf-dcm [data-dcm-ends] { transition: opacity .28s ease, visibility .28s; }
/* a step not reached yet: the box and its lines are not there (the layout stays: nothing moves when it appears) */
.sf-dcm .is-off { opacity: 0 !important; visibility: hidden; pointer-events: none; }
/* outside the focus: faded, still in its place */
.sf-dcm .is-dim { opacity: .16; }
/* what the current step added */
.sf-dcm .cec-block.is-new { box-shadow: 0 0 0 5px rgba(72, 164, 200, .38); }
/* the box the focus is on */
.sf-dcm .cec-block.is-root { box-shadow: 0 0 0 4px rgba(31, 111, 146, .55); }
@media (prefers-reduced-motion: reduce) { .sf-dcm [data-dcm-k], .sf-dcm [data-dcm-ends] { transition: none; } }

/* a box this browser sets wider than the server measured (dcm.js fitBoxes): tighter, then smaller — never taller */
.sf-dcm .cec-block.is-fit-1 > span { letter-spacing: -.015em; }
.sf-dcm .cec-block.is-fit-2 { font-size: 15.2px; }
.sf-dcm .cec-block.is-fit-2 > span { letter-spacing: -.02em; }
.sf-dcm .cec-block.is-fit-2 .cec-lbl, .sf-dcm .cec-block.is-fit-2 .cec-when { font-size: 11.8px; }
.sf-dcm .cec-block.is-fit-3 { font-size: 14.4px; }
.sf-dcm .cec-block.is-fit-3 > span { letter-spacing: -.025em; }
.sf-dcm .cec-block.is-fit-3 .cec-lbl, .sf-dcm .cec-block.is-fit-3 .cec-when { font-size: 11.2px; }

/* the controls row (lifted into the stage's bar by stage.js; before that — or without stage.js — under the map) */
.sf-dcm .sf-dcm-controls { display: flex; align-items: center; gap: .3rem; flex-wrap: nowrap; font-family: var(--bs-body-font-family); }
.sf-dcm .sf-dcm-controls[hidden] { display: none; }
.sf-dcm .sf-dcm-count[hidden], .sf-dcm .sf-dcm-controls .btn[hidden] { display: none; }
.sf-dcm .sf-dcm-count { font-size: .8rem; white-space: nowrap; min-width: 3.4rem; text-align: center; color: var(--bs-body-color); font-variant-numeric: tabular-nums; }
.sf-dcm .sf-dcm-controls .btn { white-space: nowrap; }
/* a phone: the mode button shrinks to its icon and the zoom buttons go (two fingers zoom; full screen is beside them) */
@media (max-width: 480px) { .sf-dcm .sf-dcm-controls .sf-dcm-label, .sf-dcm .sf-dcm-controls .sf-dcm-zoom { display: none; } .sf-dcm .sf-dcm-count { min-width: 2.6rem; } }
.sf-stage-full .sf-dcm .sf-dcm-controls .sf-dcm-zoom { display: inline-block; }

/* the step's sentence and the focus bar: lines of text under the stage, in the platform's type */
.sf-dcm .sf-dcm-say { margin: .45rem .1rem 0; font-family: var(--bs-body-font-family); font-weight: 600; color: var(--bs-body-color); }
.sf-dcm .sf-dcm-focusbar { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; margin: .45rem .1rem 0; font-family: var(--bs-body-font-family); font-size: .82rem; }
.sf-dcm .sf-dcm-focusbar[hidden] { display: none; }
.sf-dcm .sf-dcm-focusbar .sf-dcm-fhead { color: var(--bs-secondary-color); margin-right: .1rem; }
.sf-dcm .sf-dcm-focusbar .sf-dcm-hint { color: var(--bs-secondary-color); }
.sf-dcm .sf-dcm-focusbar .btn { font-size: .78rem; padding: .12rem .5rem; }

/* the legend: the card's captions in a row under the map (the template floats it over the page) */
.sf-dcm .sf-dcm-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .5rem .2rem .1rem; font-size: .92rem; line-height: 1.1; }
.sf-dcm .sf-dcm-legend .chip { display: inline-flex; align-items: center; gap: .4rem; }
.sf-dcm .sf-dcm-legend svg { flex: 0 0 auto; }
.sf-dcm .sf-dcm-legend .w, .sf-dcm .sf-dcm-legend .q { color: var(--dcm-blue); }
.sf-dcm .sf-dcm-legend .w { font-weight: 600; }

/* the chain in words: the template's rail as a section of the card */
.sf-dcm .sf-dcm-rail { margin-top: .5rem; border-top: 1px solid var(--bs-border-color); padding-top: .4rem; }
.sf-dcm .sf-dcm-rail > summary { cursor: pointer; font-family: var(--bs-body-font-family); font-size: .85rem; font-weight: 600; }
/* v23.7.0 (e) — the legend folded like the chain in words */
.sf-dcm .sf-dcm-legendwrap { margin-top: .5rem; border-top: 1px solid var(--bs-border-color); padding-top: .4rem; }
.sf-dcm .sf-dcm-legendwrap > summary { cursor: pointer; font-family: var(--bs-body-font-family); font-size: .85rem; font-weight: 600; }
/* v23.1.0 — Define Challenges (the back of the card) under the map, folded like the chain in words; the engine's own
   tables (dcm-engine.css .cec-define) on the card's cream, scrolled sideways on a phone */
.sf-dcm .sf-dcm-define { margin-top: .6rem; }
.sf-dcm .sf-dcm-define > summary { cursor: pointer; font-weight: 600; color: var(--dcm-ink); }
.sf-dcm .sf-dcm-definebody .cec-define { padding: .6rem .2rem 1rem; max-width: none; }
.sf-dcm .sf-dcm-definebody .cec-def-title { font-size: 1.25rem; margin-bottom: .5rem; }
.sf-dcm .sf-dcm-definebody .sft-tablewrap { overflow-x: auto; }
.sf-dcm .sf-dcm-railbody { width: auto; flex: none; position: static; max-height: none; overflow: visible; background: transparent; border: 0; padding: .4rem 0 0; display: block; order: 0; }
.sf-dcm .sf-dcm-railbody .cec-mrow[data-dcm-k] { cursor: pointer; }
.sf-dcm .sf-dcm-railbody .cec-mrow[data-dcm-k]:focus-visible { outline: 2px solid var(--dcm-blue); outline-offset: 2px; }
.sf-dcm .sf-dcm-railbody .cec-mrow.is-focus { background: rgba(72, 164, 200, .14); }
.sf-dcm .sf-dcm-foot { margin-top: .5rem; font-family: var(--bs-body-font-family); font-size: .66rem; color: var(--bs-secondary-color); }

/* full screen (the stage's): the map fills the screen, kept whole */
.sf-stage-full .sf-dcm { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 0 .5rem .5rem; }
.sf-stage-full .sf-dcm .sf-dcm-stage { flex: 1 1 auto; min-height: 0; border-radius: 0; padding-bottom: 3.4rem; }
/* v23.7.0 (the owner, 20 Oct, d) — in full screen the viewport is the WHOLE stage, not a box of the map's aspect: on a
   phone in portrait the map's aspect gave a wide box at the top and the stage's background below it; the canvas is fitted
   ("meet") and centred inside whatever the viewport is (dcm.js frameOf), so the map fills the tall screen as far as its
   shape allows. The inline aspect-ratio dcm.js sets is overridden here. */
.sf-stage-full .sf-dcm .sf-dcm-map { max-height: none; aspect-ratio: auto !important; flex: 1 1 auto; min-height: 0; height: 100%; }
.sf-stage-full .sf-dcm .sf-dcm-legend, .sf-stage-full .sf-dcm .sf-dcm-legendwrap, .sf-stage-full .sf-dcm .sf-dcm-rail, .sf-stage-full .sf-dcm .sf-dcm-foot { display: none; }
.sf-stage-full > .sfp-content-body:has(.sf-dcm) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 !important; }

/* v23.10.0 (the owner, 20 Oct: option B) — a post-it BOARD on the map (render.ts board mode, place-board.js): a drop
   zone over each area's box, inside the canvas, so a post-it moves with the map. The zone is the box's own rectangle
   (invisible until a card is picked or dragged: then every open box is outlined); its PILE holds the post-its, stuck
   on the middle of the box (v23.13.0; before: its lower edge), in the map's own units (they scale with the boxes). A blank box is
   drawn without its words, dashed. No bar to lift (the board is no stage): the controls sit under the map. */
.sf-dcm.is-board .sf-dcm-stage { padding-bottom: .35rem; }
.sf-dcm.is-board .sf-dcm-controls { justify-content: flex-end; margin-top: .3rem; }
.sf-dcm .sf-dcm-zone { position: absolute; z-index: 3; border-radius: 6px; outline: 0 solid transparent; transition: outline-color .15s, background-color .15s; }
.sf-dcm .sf-dcm-zone:focus-visible { outline: 3px solid var(--dcm-blue); outline-offset: 3px; }
.has-pick .sf-dcm .sf-dcm-zone:not(.is-off), .sf-dcm .sf-dcm-zone.is-over { outline: 4px dashed rgba(23, 120, 145, .85); outline-offset: 3px; background: rgba(23, 120, 145, .08); cursor: copy; }
.has-pick .sf-dcm .sf-dcm-zone:not(.is-off):hover { background: rgba(23, 120, 145, .16); }
[data-place-locked] .sf-dcm .sf-dcm-zone { cursor: default; }
/* v23.13.0 (the owner, 22 Oct: "post-its are placed too low on the DCM-elements. Place them centred (which means
   covering the text, which is fine)") — the pile sits CENTRED on its box: one post-it on the middle of the box, more of
   them wrapped round the middle (a narrow box lets two stand side by side). It used to hang from the box's lower edge. */
.sf-dcm .sf-dcm-pile { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max(100%, 320px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; gap: 6px; pointer-events: none; z-index: 4; }
.sf-dcm .sf-dcm-pile:empty { display: none; }
.sf-dcm .sf-dcm-pile > .sf-place-card { pointer-events: auto; width: 150px; min-height: 44px; margin: 0; padding: 6px 8px; font-family: var(--bs-body-font-family); font-size: 14px; line-height: 1.2; transform: rotate(-1.2deg); box-shadow: 1px 3px 6px rgba(0, 0, 0, .22); }
.sf-dcm .sf-dcm-pile > .sf-place-card:nth-child(2n) { transform: rotate(1deg); }
.sf-dcm .sf-dcm-pile > .sf-place-card.is-picked { transform: none; z-index: 5; }
/* v25.7.9 (BACKLOG A.-000082 #11, FE-3) — while a post-it is PICKED, the other post-its on the boxes let a tap through to
   their box: a tap on an occupied box drops the picked one there (it picked the box's post-it up instead — only a box's
   corner took a drop on a phone). The picked one stays tappable (a second tap puts it down). */
.has-pick .sf-dcm .sf-dcm-pile > .sf-place-card:not(.is-picked), .sf-dcm.has-pick .sf-dcm-pile > .sf-place-card:not(.is-picked) { pointer-events: none; }
.sf-dcm .sf-dcm-pile .sf-place-mark { width: 22px; height: 22px; top: -9px; right: -9px; font-size: 13px; }
.sf-dcm .cec-block.is-blank { border-style: dashed !important; }
.sf-dcm .cec-block.is-blank .cec-obj, .sf-dcm .cec-block.is-blank .cec-dev, .sf-dcm .cec-block.is-blank .cec-txt { display: none; }
/* the board's map keeps its zoom buttons on a phone: the post-its are read zoomed in */
@media (max-width: 480px) { .sf-dcm.is-board .sf-dcm-controls .sf-dcm-zoom { display: inline-block; } }
/* a box with post-its lies over its neighbours' empty boxes (its pile can hang over one) */
.sf-dcm .sf-dcm-zone:has(.sf-place-card) { z-index: 4; }

/* the content editor: the card's accent and the palette's button (white text on the card's blue, 5.6 : 1) */
.element-card.sf-el-dcm { border-color: #48a4c8; }
.element-card.sf-el-dcm .element-type-icon, .element-card.sf-el-dcm .element-type-label { color: #1f6f92; }
.btn-add-el-dcm { background: #1f6f92; }

/* the inert text (the extension off): the chain as a list */
.sf-dcm-card .sf-dcm-text li { margin-bottom: .1rem; }
.sf-dcm-card .sf-dcm-caption { font-size: .9rem; color: var(--bs-secondary-color); }
@media print { .sf-dcm .sf-dcm-controls, .sf-dcm .sf-dcm-focusbar, .sf-dcm .sf-stage-bar, .sf-dcm .sf-stage-ui { display: none !important; } .sf-dcm .sf-dcm-map { max-height: none; } }

/* v23.14.0 (the owner, 22 Oct) — a map's own Full screen on the leader's pages (dcm.js enterFull): the board's card over
   the whole window, a column down to the map — the name and the score, then the map as tall as the window leaves, then
   its controls, legend and foot at their own height; the page beneath held still (the root's scrollbar gutter too) */
html.sf-dcm-full-open, html.sf-dcm-full-open body { overflow: hidden; scrollbar-gutter: auto; }
.sf-dcm-full { position: fixed !important; inset: 0 !important; z-index: 1060 !important; margin: 0 !important; border-radius: 0 !important; border: 0 !important; background: var(--bs-body-bg) !important; display: flex !important; flex-direction: column; overflow: hidden; }
.sf-dcm-full > .card-body, .sf-dcm-full > .sfp-content-body, .sf-dcm-full .sf-place-scroll, .sf-dcm-full .sf-place-dcm, .sf-dcm-full .sf-dcm, .sf-dcm-full .sf-dcm .sf-dcm-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.sf-dcm-full > .card-body > :not(.sf-place-scroll), .sf-dcm-full .sf-dcm > :not(.sf-dcm-stage), .sf-dcm-full .sf-dcm .sf-dcm-stage > :not(.sf-dcm-map) { flex: 0 0 auto; }
.sf-dcm-full .sf-dcm .sf-dcm-map { flex: 1 1 auto; min-height: 0; max-height: none; aspect-ratio: auto !important; width: 100%; }
/* …the map's controls over its lower right corner, not a row of their own: every pixel of height to the map */
.sf-dcm-full .sf-dcm .sf-dcm-stage { position: relative; padding-bottom: .35rem; }
.sf-dcm-full .sf-dcm .sf-dcm-controls { position: absolute; right: .6rem; bottom: .6rem; margin: 0; z-index: 3; }
@media (max-width: 480px) { .sf-dcm .sf-dcm-controls .sf-dcm-fs { display: inline-block; } }

/* v23.18.0 (BACKLOG A.-000085 #15) — a box's binding: a calc's state tints it (the platform's state tones: good, warn,
   bad); the chain downstream of a BAD box is marked faintly (where the impact is); the part a focused box stands for is
   lit in its 3D model or diagram. The box keeps its own DCM colours inside; the tone is its frame. */
.sf-dcm .cec-block.is-tone-good { box-shadow: 0 0 0 3px #40af49; }
.sf-dcm .cec-block.is-tone-warn { box-shadow: 0 0 0 3px #f9ba14; }
.sf-dcm .cec-block.is-tone-bad { box-shadow: 0 0 0 4px #ec5d23; }
.sf-dcm .cec-block.is-impact:not(.is-tone-bad) { box-shadow: 0 0 0 3px rgba(236, 93, 35, .45); }
.sf-dcm .cec-block.is-root.is-tone-bad { box-shadow: 0 0 0 4px #ec5d23, 0 0 0 8px rgba(31, 111, 146, .55); }
[data-sf-part].sf-link-hi, .sf-diagram .sf-link-hi { filter: drop-shadow(0 0 3px #f9ba14) drop-shadow(0 0 6px #f9ba14); }
.sf-model3d.sf-link-hi-card { outline: 3px solid #f9ba14; outline-offset: 2px; border-radius: .5rem; }
@media (prefers-reduced-motion: no-preference) { [data-sf-part].sf-link-hi, .sf-diagram .sf-link-hi { animation: sf-link-pulse 1.2s ease-in-out infinite alternate; } }
@keyframes sf-link-pulse { from { filter: drop-shadow(0 0 2px #f9ba14); } to { filter: drop-shadow(0 0 5px #f9ba14) drop-shadow(0 0 9px #f9ba14); } }