/* =============================================================================
   styles.css — the demonstration hub's chrome.

   THE HARD LAYOUT RULE: the page never scrolls horizontally. Layout viewport is
   not visual viewport on phones, and overflow can shift tap coordinates even
   when an initial screenshot appears correct. Wide things scroll inside their
   own container, never the page.

   Colour tokens are declared once, here, and mirror the DDL list in global.R.
   Every status treatment carries a shape and a word as well as a hue.
   ========================================================================== */

:root {
  --ddl-ink: #2b2334;
  --ddl-ink-2: #514659;
  --ddl-muted: #635869;
  --ddl-line: rgba(43, 35, 52, 0.16);
  --ddl-paper: #fffdf8;
  --ddl-bg: #eee5d6;
  --ddl-sand: #e3d5c1;
  --ddl-agave: #4c7a5c;
  --ddl-agave-2: #668670;
  /* THE TERRACOTTA SLOT IS ONE HUE AT FOUR SITES, NOT FOUR ACCENTS.
     --ddl-clay here, --ddl-tor-alert #b65e47, --ddl-inv-product-rust #ad5943
     and --ddl-rst-copper #b7643f are within 25 of each other on summed RGB
     distance. Three of them are per-workspace by design and that is the right
     call; the point of this note is that a fifth would not be. If you need a
     red, use the one your workspace already owns. --ddl-coral was retired for
     exactly this reason: zero uses, sixteen away from this value. */
  --ddl-clay: #b25e43;
  --ddl-sky: #4f7692;
  --ddl-bronze: #9b6b2f;
  --ddl-mauve: #7a526f;
  --ddl-gold: #c79b45;
  --ddl-night: #211725;
  --ddl-monsoon: #3b7a78;
  --ddl-accent: var(--ddl-agave);
  /* One source for the two house faces. The serif is used at weight 400 only:
     Iowan, Palatino and Georgia agree within 2.1% at Roman and diverge by 13
     points at Bold, so Roman is both the sharper look and the portable one. */
  /* One measure, so the column does not shift when a reader moves between
     doors. The three workspaces previously rendered at 1240 / 1260 / 1180. */
  --ddl-measure: 1240px;
  --ddl-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --ddl-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Three steps of depth, not seventy opinions. The old single --ddl-shadow
     also cast a SLATE shadow (rgba(31,37,41)) onto warm paper while the three
     workspaces correctly cast their own plum, teal and navy. */
  --ddl-shadow-1: 0 1px 2px rgba(43, 35, 52, 0.05);
  --ddl-shadow-2: 0 1px 2px rgba(43, 35, 52, 0.05), 0 8px 22px rgba(43, 35, 52, 0.07);
  --ddl-shadow-3: 0 2px 6px rgba(43, 35, 52, 0.07), 0 18px 44px rgba(43, 35, 52, 0.10);
  --ddl-shadow: var(--ddl-shadow-2);
  /* Five radii. 7 against 8 against 9 is invisible; the incoherence is not. */
  --ddl-r-xs: 3px;
  --ddl-r-sm: 8px;
  --ddl-r-md: 12px;
  --ddl-r-lg: 16px;
  --ddl-r-pill: 999px;
  /* Seven type steps below 1rem, where there were thirty-four. Values sat as
     little as 0.01rem apart, which is 0.16px and invisible, so the page had no
     rhythm and every new rule invented its own size. Snapping moved nothing by
     more than 0.64px. The 0.62rem sheet floor and the 0.85rem caption floor are
     both rungs, so neither can be crossed by rounding.
       0.62 label · 0.68 micro · 0.74 caption · 0.80 note
       0.85 caption floor · 0.92 body · 1.00 lead
     Sizes above 1rem are display type and stay as authored. */
  --ddl-radius: var(--ddl-r-md);
  /* Bootstrap derives its neutrals from fg/bg, which lands them at a channel
     spread of 3 to 8 - effectively pure grey - and the house sheet never
     repainted them. Grey punched into warm paper is the plastic tell. These are
     the same lightness, carrying the paper's warmth. */
  --bs-body-color: #2b2334;
  --bs-emphasis-color: #221b2a;
  --bs-secondary-color: rgba(43, 35, 52, 0.72);
  --bs-secondary-bg: #e6dbc9;
  --bs-tertiary-bg: #f3ebdd;
  --bs-border-color: #cfc3b3;
  --bs-link-color: #3e6552;
  --bs-link-hover-color: #2d4b3d;
  --ddl-gap: 1.15rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 12% 2%, color-mix(in srgb, var(--ddl-monsoon) 9%, transparent), transparent 28rem),
    radial-gradient(circle at 92% 22%, color-mix(in srgb, var(--ddl-gold) 8%, transparent), transparent 24rem),
    linear-gradient(color-mix(in srgb, var(--ddl-muted) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ddl-muted) 3%, transparent) 1px, transparent 1px),
    var(--ddl-bg);
  background-size: auto, auto, 64px 64px, 64px 64px, auto;
  color: var(--ddl-ink);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  min-width: 0;
}
.container-fluid { max-width: 1180px; padding-inline: clamp(0.9rem, 3vw, 2rem); }
img, svg, table { max-width: 100%; }
a, button, summary, input, select { touch-action: manipulation; }
.ggiraph-toolbar-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
}
:focus-visible {
  /* Solid, not a white-lightened mix: the indicator must hold 3:1 against the
     light paper grounds it usually sits on (WCAG 1.4.11). */
  outline: 3px solid var(--ddl-sky);
  outline-offset: 3px;
}

.ddl-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ddl-paper); color: var(--ddl-ink);
  padding: 0.6rem 1rem; min-height: 46px;
  border-radius: 0 0 var(--ddl-radius) 0;
}
.ddl-skip:focus { left: 0; }

/* ---- the sample-data mark ------------------------------------------------
   Persistent, non-dismissible, in flow, above the fold. The full and compact
   forms are BOTH in the DOM and swapped by CSS at the breakpoint, so a narrow
   viewport narrows the sentence rather than losing the mark.               */
.demo-mark-strip {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.55rem;
  margin: 0 0 var(--ddl-gap);
  padding: 0.6rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--ddl-gold) 34%, transparent);
  border-left: 4px solid var(--ddl-gold);
  border-radius: var(--ddl-radius);
  background: var(--ddl-night);
  box-shadow: 0 12px 32px rgba(11, 38, 33, 0.1);
  font-size: 0.85rem; color: #e7f1ee;
}
.demo-mark-tag {
  flex: 0 0 auto; font-weight: 650; letter-spacing: 0.02em;
  text-transform: uppercase; font-size: 0.74rem;
  color: #102b25; background: #e8c76d;
  padding: 0.1rem 0.45rem; border-radius: 999px;
}
.demo-mark-compact { display: none; }
.demo-mark-strip-cover {
  width: max-content; max-width: 100%; margin: 0 0 0.45rem; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.demo-mark-strip-cover .demo-mark-tag {
  color: var(--ddl-muted); background: transparent;
  border: 1px solid var(--ddl-line); border-radius: 2px;
  padding: 0.18rem 0.42rem; font-size: 0.74rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600; letter-spacing: 0.12em;
}
@media (max-width: 767px) {
  .demo-mark-full { display: none; }
  .demo-mark-compact { display: inline; }
}

.demo-chip {
  display: inline-block; font-size: 0.68rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.03em;
  /* Literal ink, not the themed token. --ddl-ink flips to cream under a dark
     OS while the three workspaces hard-pin a light card ground, so the mark
     rendered cream-on-cream at 1.04:1 and the sample-data disclosure simply
     disappeared. The routes that carry it also hide the theme toggle, so the
     reader had no way out. This value is what light mode already resolved to. */
  color: #2b2334; background: color-mix(in srgb, var(--ddl-gold) 32%, transparent);
  border-radius: 999px; padding: 0.08rem 0.45rem; white-space: nowrap;
}
.demo-figure-footer {
  margin: 0.65rem 0 0; font-size: 0.74rem; color: var(--ddl-muted);
}

/* ---- the demonstration frame --------------------------------------------
   The demo frame speaks about the software. The app inside it never does. The
   boundary is legible without reading: dashed edge, different surface, a small
   persistent label.                                                        */
.demo-frame {
  position: relative;
  border: 1px solid var(--ddl-line);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--ddl-muted) 11%, transparent) 0 0.7px, transparent 0.9px),
    color-mix(in srgb, var(--ddl-bg) 46%, var(--ddl-paper));
  background-size: 11px 11px, auto;
  border-radius: var(--ddl-radius);
}
.demo-frame-label {
  display: inline-block; font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ddl-muted); margin-bottom: 0.3rem;
}

/* ---- header --------------------------------------------------------------*/
.ddl-header {
  display: flex; flex-wrap: wrap; gap: 0.8rem;
  align-items: center; justify-content: space-between;
  padding-bottom: 0.8rem; border-bottom: 1px solid var(--ddl-line);
}
.ddl-brand {
  display: flex; align-items: center; gap: 0.5rem; min-height: 44px;
  text-decoration: none; color: inherit;
}
.ddl-brand-mark {
  width: 32px; height: 32px; display: block; flex: 0 0 auto;
  overflow: visible; fill: none;
}
.ddl-brand-frame {
  stroke: currentColor; stroke-width: 1.15; opacity: 0.76;
  vector-effect: non-scaling-stroke;
}
.ddl-brand-contour {
  stroke: var(--ddl-mauve); stroke-width: 1.05;
  vector-effect: non-scaling-stroke;
}
.ddl-brand-trail {
  stroke: var(--ddl-gold); stroke-width: 1.4; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ddl-brand-nodes circle {
  fill: var(--ddl-gold); stroke: var(--ddl-paper); stroke-width: 0.35;
  transform-box: fill-box; transform-origin: center;
}
.ddl-brand:focus-visible .ddl-brand-trail { stroke: var(--ddl-bronze); }
.ddl-brand:focus-visible .ddl-brand-nodes circle:last-child { transform: scale(1.22); }
.ddl-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.ddl-brand-name {
  font-family: Iowan Old Style, Palatino Linotype, Book Antiqua, Palatino, Georgia, serif;
  font-weight: 620; font-size: 1rem; letter-spacing: -0.012em;
}
.ddl-brand-org {
  color: var(--ddl-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase;
}
.ddl-header-right { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.ddl-region-label { font-size: 0.8rem; color: var(--ddl-muted); }
.ddl-header-cover { padding-bottom: 0.55rem; }
.ddl-cover-signin {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 0.65rem; min-width: 0;
}
.ddl-cover-signin-button {
  min-height: 44px; padding: 0.45rem 0.95rem;
  border: 1px solid var(--ddl-line); border-radius: 2px;
  color: var(--ddl-ink); background: color-mix(in srgb, var(--ddl-paper) 88%, transparent);
  font-size: 0.8rem; font-weight: 680; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 1;
}
.ddl-cover-signin-button:disabled { opacity: 1; cursor: default; }
.ddl-cover-signin-note {
  max-width: 19ch; color: var(--ddl-muted); font-size: 0.74rem;
  line-height: 1.25; text-align: right;
}

/* ---- nav -----------------------------------------------------------------
   A horizontally scrollable chip row below the breakpoint and NEVER a
   hamburger: a hamburger hides the exact thing this demonstration needs
   visible, which is that four programmes carry the same six sections.      */
.ddl-switcher {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  padding: 0.7rem 0 0.35rem;
}
.ddl-switcher-lab {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ddl-muted); margin-right: 0.2rem;
}
.ddl-switch-chip {
  text-decoration: none; font-size: 0.8rem; color: var(--ddl-ink-2);
  border: 1px solid var(--ddl-line); border-radius: 999px;
  padding: 0.28rem 0.7rem; min-height: 44px; display: inline-flex; align-items: center;
}
.ddl-switch-chip.is-on {
  border-color: var(--ddl-accent); color: var(--ddl-paper);
  background: var(--ddl-accent); font-weight: 620;
}
.ddl-routebar { border-bottom: 1px solid var(--ddl-line); margin-bottom: var(--ddl-gap); }
.ddl-routebar-scroll {
  display: flex; gap: 0.15rem; overflow-x: auto; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.ddl-route-chip {
  flex: 0 0 auto; text-decoration: none; color: var(--ddl-ink-2);
  padding: 0.55rem 0.85rem; min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 3px solid transparent; white-space: nowrap; font-size: 0.92rem;
}
.ddl-route-chip:is(:hover, :focus-visible) { color: var(--ddl-ink); }
.ddl-route-chip.is-on {
  color: var(--ddl-ink); font-weight: 650; border-bottom-color: var(--ddl-accent);
}
/* The press acknowledgement, one list, matching app.js's ACK selector exactly.
   :active is not a substitute: it ends the instant the finger lifts, which is
   the moment the reader is deciding whether the tap registered. Every control
   JS marks has to be styled here or it silently gets no acknowledgement. */
.ddl-route-chip.is-pressed, .ddl-btn.is-pressed, .ddl-switch-chip.is-pressed,
.ddl-task-card.is-pressed, .ddl-text-link.is-pressed,
.ddl-workspace-route.is-pressed, .ddl-workspace-home.is-pressed,
.ddl-tor-start-task.is-pressed, .ddl-tor-btn.is-pressed,
.ddl-tor-review-link.is-pressed,
.ddl-inv-product-start-task.is-pressed, .ddl-inv-product-btn.is-pressed,
.ddl-inv-product-review-link.is-pressed,
[data-inv-product-select-patch].is-pressed,
.ddl-rst-product-start-task.is-pressed, .ddl-rst-product-btn.is-pressed,
.ddl-rst-product-review-link.is-pressed,
[data-rst-product-select-planting].is-pressed { opacity: 0.62; transform: translateY(1px); }

/* =========================================================================
   PROSPECT FIELD WORKSPACE
   -------------------------------------------------------------------------
   One compact control block, one editorial masthead, one computed metric
   strip, and one dominant scientific sheet. The project theme changes tokens;
   the geometry stays shared for the next two workspaces.
   ========================================================================= */
body:has(.ddl-theme-tortoise) {
  --ddl-project-night: #140f18;
  --ddl-project-paper: #f1e7d3;
  --ddl-project-paper-2: #e8dac1;
  --ddl-project-ink: #2b2334;
  --ddl-project-accent: #c79b45;
  --ddl-project-accent-2: #829a77;
  --ddl-project-line: rgba(241, 231, 211, 0.2);
  --ddl-accent: var(--ddl-project-accent);
}
body:has(.ddl-main-workspace) {
  background:
    linear-gradient(color-mix(in srgb, var(--ddl-project-paper) 2.5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ddl-project-paper) 2.5%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 82% 7%, color-mix(in srgb, var(--ddl-project-accent) 9%, transparent), transparent 28rem),
    var(--ddl-project-night);
  background-size: 48px 48px, 48px 48px, auto, auto;
}
body:has(.ddl-main-workspace) > .container-fluid { max-width: 1320px; }

.demo-mark-strip-workspace {
  min-height: 28px; margin: 0; padding: 0.24rem 0;
  gap: 0.38rem; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ddl-project-paper) 14%, transparent);
  border-radius: 0; background: transparent; box-shadow: none;
  color: color-mix(in srgb, var(--ddl-project-paper) 70%, transparent); font-size: 0.68rem;
}
/* The sample-data mark is not a decorative micro-label; it is the claim the
   whole demo rests on, so it holds a readable size on every surface. */
.demo-mark-workspace-text {
  color: var(--ddl-project-paper); font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
}

.ddl-header-workspace {
  min-height: 62px; padding: 0.45rem 0 0.55rem;
  border-bottom-color: color-mix(in srgb, var(--ddl-project-paper) 16%, transparent);
  color: var(--ddl-project-paper);
}
.ddl-header-workspace .ddl-brand-org,
.ddl-header-workspace .ddl-cover-signin-note { color: color-mix(in srgb, var(--ddl-project-paper) 60%, transparent); }
.ddl-header-workspace .ddl-brand-contour { stroke: var(--ddl-project-accent-2); }
.ddl-header-workspace .ddl-brand-nodes circle { stroke: var(--ddl-project-night); }
.ddl-header-workspace .ddl-cover-signin-button {
  color: var(--ddl-project-paper);
  border-color: color-mix(in srgb, var(--ddl-project-paper) 24%, transparent);
  background: transparent;
}
.ddl-header-workspace .ddl-cover-signin-button:focus-visible {
  border-color: var(--ddl-project-accent);
}

.ddl-workspace-nav {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch;
  gap: clamp(1rem, 3vw, 2rem); min-height: 64px;
  border-bottom: 1px solid var(--ddl-project-line); color: var(--ddl-project-paper);
}
.ddl-workspace-home {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px;
  color: color-mix(in srgb, var(--ddl-project-paper) 72%, transparent); text-decoration: none;
}
.ddl-workspace-home:is(:hover, :focus-visible) { color: var(--ddl-project-paper); }
.ddl-workspace-route-scroll {
  display: flex; justify-content: flex-end; min-width: 0; overflow-x: auto;
  /* thin, not hidden: routes 4-6 off-screen with no cue are undiscoverable */
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.ddl-workspace-route-scroll::-webkit-scrollbar { height: 4px; }
.ddl-workspace-route-scroll::-webkit-scrollbar-thumb {
  border-radius: 2px; background: rgba(244, 236, 223, 0.35);
}
.ddl-workspace-route {
  position: relative; flex: 0 0 auto; min-width: 132px; min-height: 63px;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.8rem; border-inline-start: 1px solid var(--ddl-project-line);
  color: color-mix(in srgb, var(--ddl-project-paper) 68%, transparent); text-decoration: none;
}
.ddl-workspace-route::after {
  content: ""; position: absolute; inset: auto 0 0; height: 3px;
  background: transparent;
}
.ddl-workspace-route:is(:hover, :focus-visible) {
  color: var(--ddl-project-paper);
  background: color-mix(in srgb, var(--ddl-project-paper) 4%, transparent);
}
.ddl-workspace-route.is-on {
  color: var(--ddl-project-night); background: var(--ddl-project-accent);
}
.ddl-workspace-route.is-on::after { background: var(--ddl-project-paper); }
.ddl-workspace-route-index {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem; letter-spacing: 0.08em; opacity: 0.78;
}
.ddl-workspace-route-label { font-size: 0.74rem; font-weight: 720; line-height: 1.15; }

.ddl-main-workspace { color: var(--ddl-project-paper); padding-bottom: 0.4rem; }
.ddl-workspace-masthead {
  position: relative; min-height: 214px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) 174px; align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(1.7rem, 4vw, 3.2rem) 0;
}
.ddl-workspace-masthead::before {
  content: ""; position: absolute; width: min(54vw, 690px); aspect-ratio: 1;
  right: 4%; top: -90%; border: 1px solid rgba(130,154,119,0.22);
  border-radius: 48% 52% 43% 57%; transform: rotate(-12deg); pointer-events: none;
}
.ddl-workspace-masthead::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0 68%, rgba(199,155,69,0.08) 68% 68.15%, transparent 68.15%);
}
.ddl-workspace-masthead-copy, .ddl-workspace-specimen { position: relative; z-index: 1; }
.ddl-workspace-kicker {
  margin: 0 0 0.45rem; color: var(--ddl-project-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em;
}
.ddl-workspace-title {
  margin: 0; max-width: 18ch; color: var(--ddl-project-paper);
  font-family: Iowan Old Style, Palatino Linotype, Book Antiqua, Palatino, Georgia, serif;
  font-size: clamp(2.65rem, 6vw, 5rem); font-weight: 520; line-height: 0.96;
  letter-spacing: -0.045em;
}
.ddl-workspace-question {
  margin: 0.8rem 0 0; max-width: 66ch; color: rgba(241,231,211,0.76);
  font-size: clamp(0.88rem, 1.4vw, 1.02rem); line-height: 1.45;
}
.ddl-workspace-asof {
  margin: 0.75rem 0 0; color: rgba(241,231,211,0.5);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.ddl-workspace-specimen {
  width: 174px; aspect-ratio: 1; justify-self: end; overflow: hidden;
  border: 1px solid rgba(199,155,69,0.72); background: #281d27;
  box-shadow: 12px 12px 0 rgba(199,155,69,0.08);
}
.ddl-workspace-specimen::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(241,231,211,0.32); pointer-events: none;
}
.ddl-workspace-specimen img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.78) contrast(1.06) sepia(0.08);
}
.ddl-workspace-specimen-code {
  position: absolute; right: 8px; bottom: 8px; z-index: 1;
  padding: 0.18rem 0.34rem; color: #f1e7d3; background: rgba(20,15,24,0.82);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem; letter-spacing: 0.11em;
}

.ddl-workspace-metrics {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 1.2rem; border: 1px solid rgba(241,231,211,0.18);
  background: rgba(241,231,211,0.035);
}
.ddl-workspace-metric {
  min-width: 0; display: grid; grid-template-columns: auto auto 1fr; align-items: baseline;
  gap: 0.55rem; padding: 0.75rem 0.9rem; border-inline-end: 1px solid rgba(241,231,211,0.16);
}
.ddl-workspace-metric:last-child { border-inline-end: 0; }
.ddl-workspace-metric-index {
  color: var(--ddl-project-accent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem; letter-spacing: 0.08em;
}
.ddl-workspace-metric-value {
  color: var(--ddl-project-paper); font-family: Iowan Old Style, Palatino Linotype, Georgia, serif;
  font-size: clamp(1.55rem, 3vw, 2.25rem); font-weight: 560; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ddl-workspace-metric-label {
  color: rgba(241,231,211,0.65); font-size: 0.68rem; line-height: 1.25;
}

.ddl-workspace-surface { margin: 0 0 1.15rem; }
.ddl-fig-block-workspace { margin: 0; }
.ddl-fig-block-workspace > .ddl-fig-workspace { margin: 0; }
.ddl-region.ddl-fig-workspace {
  display: grid;
  grid-template-columns: minmax(0, 2.25fr) minmax(286px, 0.75fr);
  grid-template-areas: "media lead" "media detail";
  grid-template-rows: auto minmax(0, 1fr);
  align-items: start; padding: 0; overflow: hidden;
  border: 1px solid rgba(241,231,211,0.34); border-radius: 2px;
  color: var(--ddl-project-ink); background: var(--ddl-project-paper);
  box-shadow: 0 24px 70px rgba(5,3,8,0.34);
}
.ddl-fig-workspace::before {
  content: ""; position: absolute; z-index: 2; left: 10px; top: 10px;
  width: 20px; height: 20px; pointer-events: none;
  border-left: 1px solid rgba(43,35,52,0.32); border-top: 1px solid rgba(43,35,52,0.32);
}
.ddl-workspace-figure-lead {
  grid-area: lead; min-width: 0; padding: 1.3rem 1.15rem 0.8rem;
  background: linear-gradient(180deg, rgba(199,155,69,0.08), transparent 72%);
}
.ddl-workspace-figure-media {
  grid-area: media; min-width: 0; align-self: stretch; padding: 1.05rem;
  border-inline-end: 1px solid rgba(43,35,52,0.18);
}
.ddl-workspace-figure-detail {
  grid-area: detail; min-width: 0; align-self: stretch; padding: 0.15rem 1.15rem 1.15rem;
}
.ddl-fig-workspace .ddl-region-head { align-items: flex-start; margin-bottom: 0.7rem; }
.ddl-fig-workspace .ddl-region-title {
  flex: 1 1 12rem; color: var(--ddl-project-ink);
  font-family: Iowan Old Style, Palatino Linotype, Book Antiqua, Palatino, Georgia, serif;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 600; line-height: 1.08;
  letter-spacing: -0.025em;
}
.ddl-fig-workspace .ddl-fig-head-right { margin-left: 0; }
.ddl-fig-workspace .demo-chip {
  color: var(--ddl-project-ink); background: rgba(199,155,69,0.28); border-radius: 2px;
  font-size: 0.74rem; letter-spacing: 0.08em;
}
.ddl-fig-workspace .info-dot { color: rgba(43,35,52,0.58); }
.ddl-fig-workspace .ddl-fig-caption {
  margin-bottom: 0.75rem; color: rgba(43,35,52,0.78); font-size: 0.8rem; line-height: 1.5;
}
.ddl-fig-workspace .ddl-fig-warn {
  margin: 0; padding: 0.58rem 0.65rem; border-left-color: var(--ddl-project-accent);
  border-radius: 0; background: rgba(199,155,69,0.11);
  color: rgba(43,35,52,0.78); font-size: 0.74rem; line-height: 1.42;
}
.ddl-fig-workspace .ddl-fig-plot {
  border-color: rgba(43,35,52,0.18); border-radius: 0; padding: 0.32rem;
  box-shadow: none; background: var(--ddl-project-paper-2);
  scrollbar-color: var(--ddl-project-accent) var(--ddl-project-paper-2);
  scrollbar-width: thin;
}
.ddl-fig-workspace .ddl-fig-plot::-webkit-scrollbar { height: 7px; }
.ddl-fig-workspace .ddl-fig-plot::-webkit-scrollbar-track { background: var(--ddl-project-paper-2); }
.ddl-fig-workspace .ddl-fig-plot::-webkit-scrollbar-thumb {
  background: var(--ddl-project-accent); border-radius: 999px;
}
.ddl-workspace-denominators,
.ddl-fig-workspace .ddl-fig-refusals,
.ddl-fig-workspace .ddl-fig-counting {
  margin: 0; padding: 0.65rem 0; border-top: 1px solid rgba(43,35,52,0.16);
  color: rgba(43,35,52,0.66); font-size: 0.74rem; line-height: 1.45;
}
.ddl-workspace-denominators > summary,
.ddl-fig-workspace .ddl-fig-refusals > summary,
.ddl-fig-workspace .ddl-fig-counting > summary {
  min-height: 44px; padding: 0.35rem 0; cursor: pointer;
  color: var(--ddl-project-ink); font-size: 0.74rem; font-weight: 680;
}
.ddl-workspace-denominators .ddl-fig-n { margin: 0.4rem 0 0; color: rgba(43,35,52,0.66); }
.ddl-fig-workspace .ddl-fig-refusals ul { margin: 0.4rem 0 0; padding-left: 1rem; }
.ddl-fig-workspace .ddl-fig-counting p { font-size: 0.74rem; }
.ddl-fig-workspace .demo-figure-footer {
  margin: 0.65rem 0 0; padding-top: 0.55rem; border-top: 1px solid rgba(43,35,52,0.16);
  /* 0.56 alpha measured 3.66:1 here, under the 4.5:1 body-text floor. */
  color: rgba(43,35,52,0.7); font-size: 0.68rem; line-height: 1.4;
}
.ddl-fig-block-workspace > .ddl-entity-notes {
  margin: 0.65rem 0 0; border: 1px solid rgba(241,231,211,0.18);
  border-left: 3px solid var(--ddl-project-accent-2); border-radius: 0;
  background: rgba(241,231,211,0.045); color: var(--ddl-project-paper);
}
.ddl-fig-block-workspace > .ddl-entity-notes .ddl-entity-head,
.ddl-fig-block-workspace > .ddl-entity-notes .ddl-entity-source { color: rgba(241,231,211,0.52); }
.ddl-fig-block-workspace > .ddl-entity-notes .ddl-entity-note { color: rgba(241,231,211,0.74); }

body:has(.ddl-main-workspace) .ddl-hubviews {
  margin-top: 0.5rem; border-top-color: rgba(241,231,211,0.14);
}
body:has(.ddl-main-workspace) .ddl-hubview-link { color: rgba(241,231,211,0.6); font-size: 0.74rem; }
body:has(.ddl-main-workspace) .ddl-hubview-link:is(:hover, :focus-visible) { color: #f1e7d3; }
.ddl-footer-workspace { color: rgba(241,231,211,0.52); }
.ddl-footer-workspace-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 0.45rem 0 1.2rem; border-top: 1px solid rgba(241,231,211,0.12);
}
.ddl-footer-workspace .ddl-footer-org { margin: 0; color: inherit; }
.ddl-footer-build { max-width: min(68ch, 100%); text-align: right; }
.ddl-footer-build > summary { cursor: pointer; color: rgba(241,231,211,0.66); }
.ddl-footer-build p { margin: 0.4rem 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.62rem; }

/* ---- hero ----------------------------------------------------------------*/
.ddl-hero { padding: 1.4rem 0 1rem; }
.ddl-eyebrow {
  margin: 0 0 0.35rem; font-size: 0.74rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ddl-muted);
}
.ddl-hero-title {
  margin: 0 0 0.4rem; font-size: clamp(1.5rem, 4vw, 2.2rem);
  line-height: 1.15; font-weight: 700; letter-spacing: -0.015em;
}
.ddl-hero-sub { margin: 0; max-width: 62ch; color: var(--ddl-ink-2); }

/* ---- prospect cover ----------------------------------------------------- */
.ddl-public-hero {
  min-height: 620px;
  display: grid; grid-template-columns: minmax(340px, 0.92fr) minmax(400px, 1.08fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  margin: 1rem 0 1.4rem; padding: clamp(1.4rem, 3.5vw, 3rem);
  border-radius: 22px; overflow: hidden; position: relative;
  color: #f8fbfa;
  background:
    linear-gradient(rgba(243,237,223,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,237,223,0.028) 1px, transparent 1px),
    linear-gradient(rgba(243,237,223,0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,237,223,0.052) 1px, transparent 1px),
    radial-gradient(circle at 10% 100%, rgba(44,126,139,0.22), transparent 38%),
    radial-gradient(circle at 80% 0%, rgba(201,154,46,0.15), transparent 28%),
    linear-gradient(135deg, #061a16 0%, #0b2b24 62%, #103a30 100%);
  background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px, auto, auto, auto;
  background-position: center;
  box-shadow: 0 26px 70px rgba(6, 26, 22, 0.32);
}
.ddl-public-hero .ddl-btn-open:is(:hover, :focus-visible) { color: #173f35; }
.ddl-public-hero .ddl-btn-quiet:is(:hover, :focus-visible) { color: #fff; border-color: #fff; }
.ddl-text-link {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px;
  color: var(--ddl-accent); font-size: 0.85rem; font-weight: 650; text-decoration: none;
}
.ddl-public-route-list a:is(:hover, :focus-visible) { color: var(--ddl-accent); }
.ddl-project-boundary {
  display: inline-flex; margin: 0.7rem 0 0; max-width: 72ch; padding: 0.38rem 0.62rem;
  border-left: 3px solid var(--ddl-gold); color: var(--ddl-muted); font-size: 0.8rem;
  background: color-mix(in srgb, var(--ddl-gold) 8%, transparent);
}

/* ---- minimal public cover ------------------------------------------------
   One directory rail and one pinned public-context field map. The cover loads
   no records and carries no analytical output; each paper door is one link. */
.ddl-main-cover { margin-top: 0.75rem; }
.ddl-minimal-cover {
  height: clamp(560px, calc(100svh - 120px), 760px);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(310px, 0.82fr) minmax(480px, 1.38fr);
  position: relative; isolation: isolate; overflow: hidden;
  color: #f4ecdf; border: 1px solid rgba(244, 236, 223, 0.19);
  border-radius: 3px; background: #211725;
  box-shadow: 0 26px 70px rgba(27, 17, 31, 0.28);
}
.ddl-minimal-cover::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(244,236,223,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,236,223,0.025) 1px, transparent 1px),
    radial-gradient(circle at 92% 12%, rgba(79,118,146,0.16), transparent 28rem),
    radial-gradient(circle at 4% 96%, rgba(178,94,67,0.13), transparent 24rem);
  background-size: 32px 32px, 32px 32px, auto, auto;
}
.ddl-minimal-cover-rail {
  min-width: 0; min-height: 0; display: flex; flex-direction: column;
  padding: clamp(1.15rem, 2.2vw, 2rem);
  border-right: 1px solid rgba(244,236,223,0.16);
  background: linear-gradient(155deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
}
.ddl-minimal-cover-eyebrow,
.ddl-minimal-cover-index,
.ddl-minimal-cover-door-index,
.ddl-field-map-head,
.ddl-field-map-titleblock {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.ddl-minimal-cover-eyebrow {
  margin: 0 0 0.65rem; color: #a99aab; font-size: 0.68rem;
}
.ddl-minimal-cover-title {
  max-width: 8ch; margin: 0; color: #f4ecdf;
  font-family: Iowan Old Style, Palatino Linotype, Book Antiqua, Palatino, Georgia, serif;
  font-size: clamp(2.75rem, 5.2vw, 4rem); font-weight: 560;
  line-height: 0.92; letter-spacing: -0.055em;
}
.ddl-minimal-cover-index {
  margin: clamp(1.1rem, 3vh, 1.5rem) 0 0.65rem;
  color: #c9b6c9; font-size: 0.62rem;
}
.ddl-minimal-cover-doors { display: grid; gap: 0.7rem; }
.ddl-minimal-cover-door {
  --ddl-accent: #c79b45;
  min-width: 0; min-height: 100px;
  display: grid; grid-template-columns: 118px minmax(0, 1fr);
  grid-template-rows: auto 1fr; column-gap: 0.9rem;
  position: relative; overflow: hidden;
  color: #2b2334; text-decoration: none;
  border: 1px solid rgba(43,35,52,0.26); border-left: 4px solid var(--ddl-accent);
  border-radius: 2px; background: #efe4cc;
  box-shadow: 0 10px 28px rgba(11,7,14,0.2), inset 0 1px rgba(255,255,255,0.58);
}
.ddl-minimal-cover-door::after {
  content: ""; position: absolute; inset: 6px; pointer-events: none;
  border: 1px solid rgba(43,35,52,0.12);
  background:
    linear-gradient(#2b2334, #2b2334) left top / 13px 1px no-repeat,
    linear-gradient(#2b2334, #2b2334) left top / 1px 13px no-repeat,
    linear-gradient(#2b2334, #2b2334) right bottom / 13px 1px no-repeat,
    linear-gradient(#2b2334, #2b2334) right bottom / 1px 13px no-repeat;
  opacity: 0.42;
}
.ddl-minimal-cover-door:focus-visible {
  color: #2b2334; border-color: var(--ddl-accent);
  box-shadow: 0 16px 36px rgba(11,7,14,0.3), inset 0 1px rgba(255,255,255,0.62);
}
.ddl-minimal-cover-door.is-pressed { opacity: 0.7; transform: translateY(1px); }
.ddl-minimal-cover-plate {
  grid-row: 1 / 3; grid-column: 1; width: 118px; height: 100%; margin: 0;
  overflow: hidden; isolation: isolate;
  border-right: 1px solid rgba(43,35,52,0.2); background: #efe4cc;
}
.ddl-minimal-cover-plate img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
  /* The plate prints onto the door stock instead of sitting on a white chip. */
  mix-blend-mode: multiply;
  filter: saturate(0.92) contrast(1.05);
}
.ddl-minimal-cover-door-index {
  grid-column: 2; align-self: end; padding: 0.9rem 1rem 0 0;
  color: #685a6b; font-size: 0.62rem; font-weight: 650;
}
.ddl-minimal-cover-door-foot {
  grid-column: 2; min-width: 0; display: flex; align-items: center;
  justify-content: space-between; gap: 0.7rem; padding: 0.15rem 1rem 0.9rem 0;
}
.ddl-minimal-cover-door-name {
  margin: 0; color: #2b2334; font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.15; font-weight: 720; letter-spacing: -0.012em;
}
.ddl-minimal-cover-door-arrow {
  flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid rgba(43,35,52,0.24); border-radius: 50%; color: var(--ddl-accent);
}
.ddl-field-map {
  min-width: 0; min-height: 0; margin: 0; padding: clamp(1.1rem, 2.4vw, 2rem);
  display: grid; place-items: stretch;
}
.ddl-field-map-sheet {
  min-width: 0; min-height: 0; height: 100%; display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto; position: relative;
  overflow: hidden;
  border: 1px solid rgba(225,188,103,0.38); background: rgba(20,12,23,0.56);
  box-shadow: inset 0 0 0 8px rgba(244,236,223,0.018), 0 24px 55px rgba(8,4,10,0.3);
}
.ddl-field-map-sheet::before,
.ddl-field-map-sheet::after {
  content: ""; position: absolute; width: 30px; height: 30px; pointer-events: none;
}
.ddl-field-map-sheet::before {
  left: 10px; top: 10px; border-left: 1px solid #c79b45; border-top: 1px solid #c79b45;
}
.ddl-field-map-sheet::after {
  right: 10px; bottom: 10px; border-right: 1px solid #c79b45; border-bottom: 1px solid #c79b45;
}
.ddl-field-map-head,
.ddl-field-map-titleblock {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; color: #b9a9bb; font-size: 0.62rem;
}
.ddl-field-map-head { padding: 0.9rem 1rem 0; }
.ddl-field-map-titleblock {
  margin: 0 1rem 0.9rem; padding-top: 0.7rem;
  border-top: 1px solid rgba(244,236,223,0.14);
}
.ddl-field-map-titleblock span:first-child { color: #ead5b0; }
.ddl-field-map-source { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.42em; }
.ddl-field-map-source a {
  color: #b9a9bb; text-decoration-color: rgba(225,188,103,0.48);
  text-underline-offset: 0.22em;
}
.ddl-field-map-source a:focus-visible { color: #f4ecdf; }
.ddl-field-map-svg { width: 100%; height: 100%; min-height: 0; display: block; }
.ddl-field-grid path { stroke: #867689; stroke-width: 0.7; opacity: 0.14; }
.ddl-field-region-fill {
  fill: rgba(122, 82, 111, 0.2); stroke: rgba(244, 236, 223, 0.06);
  stroke-width: 9; vector-effect: non-scaling-stroke;
}
.ddl-field-boundary {
  stroke: #e1bc67; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(225,188,103,0.2));
}
.ddl-field-trail {
  stroke: #b9d6d4; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.78; vector-effect: non-scaling-stroke;
}
.ddl-field-trail-label {
  fill: #f0e3d2; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px; font-weight: 650; letter-spacing: 0.04em;
  paint-order: stroke; stroke: #211725; stroke-width: 3px; stroke-linejoin: round;
}
.ddl-field-north text,
.ddl-field-scale text {
  fill: #d9cad9; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-anchor: middle;
}
.ddl-field-north path,
.ddl-field-scale path {
  stroke: #e1bc67; stroke-width: 1.35; stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}
.ddl-field-register path { stroke: #e1bc67; stroke-width: 1; opacity: 0.72; }

/* ---- the doors -----------------------------------------------------------
   ONE card builder, called once per programme. Identical geometry, identical
   slot order; only text nodes and one accent token differ. That is what makes
   "same software" visible in the first three seconds.                      */
.ddl-doors {
  display: grid; gap: var(--ddl-gap); margin-bottom: var(--ddl-gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ddl-door {
  display: flex; flex-direction: column; gap: 0.55rem;
  background: var(--ddl-paper); border: 1px solid var(--ddl-line);
  border-top: 3px solid var(--ddl-accent);
  border-radius: var(--ddl-radius); padding: 1.05rem; box-shadow: var(--ddl-shadow);
}
.ddl-accent-agave { --ddl-accent: var(--ddl-agave); }
.ddl-accent-sky { --ddl-accent: var(--ddl-sky); }
.ddl-accent-bronze { --ddl-accent: var(--ddl-bronze); }
.ddl-accent-mauve { --ddl-accent: var(--ddl-mauve); }
.ddl-door-ico {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  color: var(--ddl-accent);
  background: color-mix(in srgb, var(--ddl-accent) 12%, transparent);
  font-size: 1.05rem;
}
.ddl-door-name { margin: 0; font-size: 1.08rem; font-weight: 670; }
.ddl-door-summary { margin: 0; font-size: 0.92rem; color: var(--ddl-ink-2); }
.ddl-door-features { margin: 0; padding-left: 1.05rem; font-size: 0.85rem; color: var(--ddl-ink-2); }
.ddl-door-features li { margin-bottom: 0.3rem; }
.ddl-door-posture {
  list-style: none; margin-left: -1.05rem; padding-top: 0.45rem;
  border-top: 1px dotted var(--ddl-line); display: flex; gap: 0.4rem;
  color: var(--ddl-muted);
}
.ddl-door-posture-ico { flex: 0 0 auto; margin-top: 0.15rem; }
.ddl-door-foot { margin-top: auto; padding-top: 0.7rem; }
.ddl-door-place {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  font-size: 0.8rem; margin-bottom: 0.6rem;
}
.ddl-door-agency { color: var(--ddl-muted); }
.ddl-door-agency::before { content: "· "; }

.ddl-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px; padding: 0.5rem 0.95rem; border-radius: 999px;
  text-decoration: none; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--ddl-accent); background: var(--ddl-accent); color: #fff;
}
.ddl-btn:is(:hover, :focus-visible) { filter: brightness(1.06); color: #fff; }
.ddl-btn-quiet { background: transparent; color: var(--ddl-ink); border-color: var(--ddl-line); }
.ddl-btn-quiet:is(:hover, :focus-visible) { color: var(--ddl-ink); border-color: var(--ddl-accent); }

.ddl-wide-door {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ddl-gap); flex-wrap: wrap;
  background: var(--ddl-sand); border: 1px solid var(--ddl-line);
  border-radius: var(--ddl-radius); padding: 1.1rem; margin-bottom: var(--ddl-gap);
}
.ddl-wide-door-body { display: flex; gap: 0.8rem; align-items: flex-start; max-width: 70ch; }

.ddl-ghost { padding: 1.05rem; margin-bottom: var(--ddl-gap); }
.ddl-ghost-title { margin: 0 0 0.4rem; font-size: 1.02rem; font-weight: 660; }
.ddl-ghost p { font-size: 0.85rem; color: var(--ddl-ink-2); max-width: 78ch; }
.ddl-ghost-boundary { color: var(--ddl-muted); }

/* ---- tasks ---------------------------------------------------------------*/
.ddl-tasks {
  display: grid; gap: 0.7rem; margin-bottom: var(--ddl-gap);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ddl-task-card {
  display: grid; gap: 0.25rem; text-decoration: none; color: inherit;
  background: var(--ddl-paper); border: 1px solid var(--ddl-line);
  border-radius: var(--ddl-radius); padding: 0.85rem; min-height: 44px;
}
.ddl-task-card:is(:hover, :focus-visible) { border-color: var(--ddl-accent); }
.ddl-task-label { font-weight: 650; font-size: 0.92rem; }
.ddl-task-question { font-size: 0.8rem; color: var(--ddl-ink-2); }
.ddl-task-go { color: var(--ddl-muted); }

/* ---- content regions and their states -----------------------------------*/
.ddl-region {
  background: var(--ddl-paper); border: 1px solid var(--ddl-line);
  border-radius: 16px; padding: clamp(0.9rem, 2.2vw, 1.25rem); margin-bottom: var(--ddl-gap);
  box-shadow: 0 1px 2px rgba(31,37,41,0.035), 0 14px 38px rgba(31,37,41,0.045);
}
.ddl-region-head {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  margin-bottom: 0.55rem;
}
.ddl-region-title { margin: 0; font-size: 1rem; font-weight: 660; }
.ddl-region-pending { background: transparent; }
.ddl-region-error {
  border-left: 4px solid var(--ddl-clay);
  background: color-mix(in srgb, var(--ddl-clay) 7%, var(--ddl-paper));
}
.ddl-region-suppressed, .ddl-suppressed-panel {
  border-left: 4px solid var(--ddl-muted);
  background: color-mix(in srgb, var(--ddl-muted) 7%, var(--ddl-paper));
  border-radius: var(--ddl-radius); padding: 0.9rem;
}
.ddl-note { font-size: 0.8rem; color: var(--ddl-muted); margin: 0.5rem 0 0; max-width: 78ch; }
.ddl-methods-para { max-width: 78ch; }
.ddl-feature-list { margin: 0; padding-left: 1.1rem; font-size: 0.85rem; color: var(--ddl-ink-2); }
.ddl-loadbar { padding: 0.6rem 0.85rem; margin-bottom: var(--ddl-gap); }
.ddl-load-line { margin: 0; font-size: 0.85rem; color: var(--ddl-ink-2); }
.ddl-down { max-width: 70ch; }
.ddl-down-next { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; }
.ddl-down-home { margin-bottom: 0; }
.ddl-refusal { max-width: 70ch; }

/* ---- status badges: colour PLUS icon PLUS word --------------------------*/
.ddl-status-badge {
  display: inline-flex; align-items: center; gap: 0.32rem;
  font-size: 0.74rem; font-weight: 620; border-radius: 999px;
  padding: 0.15rem 0.55rem; border: 1px solid currentColor;
}
.ddl-status-ok { color: var(--ddl-agave); }
.ddl-status-watch { color: var(--ddl-gold); }
.ddl-status-trigger { color: var(--ddl-clay); }
.ddl-status-supp, .ddl-status-na, .ddl-status-pending { color: var(--ddl-muted); }
.ddl-status-review { color: var(--ddl-sky); }
.ddl-n-badge { font-size: 0.74rem; color: var(--ddl-muted); }
.ddl-n-low { color: var(--ddl-clay); }

/* ---- tables scroll inside THEIR OWN container, never the page -----------*/
.ddl-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ddl-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ddl-table th, .ddl-table td {
  text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--ddl-line);
  vertical-align: top;
}
.ddl-table th { font-weight: 650; color: var(--ddl-muted); font-size: 0.8rem; }
.ddl-table td.num, .ddl-table th.num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ddl-table tfoot td { font-weight: 650; border-top: 2px solid var(--ddl-line); border-bottom: 0; }

/* ---- verified receipt and advisory checks ------------------------------ */
.ddl-lede { max-width: 74ch; color: var(--ddl-ink-2); font-size: 0.92rem; }
.ddl-muted { color: var(--ddl-muted); }
.ddl-stat-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem;
  margin: 1rem 0;
}
.ddl-stat {
  min-width: 0; display: flex; flex-direction: column; justify-content: space-between;
  gap: 0.5rem; min-height: 92px; padding: 0.85rem;
  border: 1px solid var(--ddl-line); border-radius: 11px;
  background: color-mix(in srgb, var(--ddl-bg) 52%, var(--ddl-paper));
}
.ddl-stat-value { font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1; font-weight: 720; }
.ddl-stat-label { color: var(--ddl-muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ddl-reconcile, .ddl-callout {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem;
  margin: 0.9rem 0; padding: 0.75rem 0.85rem; border-radius: 10px;
  background: color-mix(in srgb, var(--ddl-agave) 8%, var(--ddl-paper));
  border: 1px solid color-mix(in srgb, var(--ddl-agave) 22%, var(--ddl-line));
  color: var(--ddl-ink-2); font-size: 0.85rem;
}
.ddl-callout { border-color: var(--ddl-line); background: var(--ddl-sand); }
.ddl-receipt-stages { list-style: none; padding: 0; margin: 0 0 1rem; }
.ddl-receipt-stage {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.7rem;
  align-items: center; min-height: 52px; padding: 0.55rem 0;
  border-bottom: 1px solid var(--ddl-line);
}
.ddl-receipt-stage .ddl-muted { font-size: 0.8rem; text-align: right; }
.ddl-receipt-table { font-size: 0.85rem; }
.ddl-receipt-table th, .ddl-receipt-table td { vertical-align: middle; }
.ddl-qc-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem;
  margin-bottom: 1.2rem;
}
.ddl-qc-card {
  min-width: 0; padding: 0.9rem; border: 1px solid var(--ddl-line);
  border-left: 4px solid var(--ddl-sky); border-radius: 11px; background: var(--ddl-paper);
}
.ddl-qc-clean { border-left-color: var(--ddl-agave); }
.ddl-qc-card-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.ddl-qc-card h3 { margin: 0; font-size: 1rem; line-height: 1.35; }
.ddl-qc-card > p { color: var(--ddl-ink-2); font-size: 0.85rem; }
.ddl-qc-context { margin: 0.65rem 0 0; padding-left: 1.05rem; color: var(--ddl-muted); font-size: 0.8rem; }
.ddl-qc-context li { margin-bottom: 0.3rem; }

/* =========================================================================
   THE FIGURE FRAME
   -------------------------------------------------------------------------
   The standard frame reads title -> caption -> figure -> details. The public
   field-workspace keeps its short interpretation guardrail above the figure
   and places the longer, still-visible caption immediately after it on a
   narrow screen so the scientific mark enters the first viewport.
   The house split: important science goes in the always-visible caption;
   method depth and how-to-read goes in the (i). A warning that would stop a
   wrong reading of a number on screen stays OUTSIDE the fold.
   ========================================================================= */
.ddl-fig-block { margin-bottom: var(--ddl-gap); }
.ddl-fig-block > .ddl-region { margin-bottom: 0; }
.ddl-fig {
  position: relative;
  background:
    linear-gradient(90deg, var(--ddl-accent), color-mix(in srgb, var(--ddl-accent) 38%, transparent)) top / 100% 3px no-repeat,
    var(--ddl-paper);
}
.ddl-fig-head-right { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; }

/* The caption is the one line a reader who reads nothing else must not
   misread. It is sized and coloured to be read, not skimmed past. */
.ddl-fig-caption {
  margin: 0 0 0.8rem; max-width: 74ch;
  font-size: 0.85rem; line-height: 1.55; color: var(--ddl-ink-2);
}

/* Outside the fold on purpose. Tinted and ruled so it cannot be mistaken for
   the caption above it or for a note below it. */
.ddl-fig-warn {
  margin: 0 0 0.7rem; max-width: 78ch;
  padding: 0.5rem 0.7rem; border-left: 3px solid var(--ddl-bronze);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--ddl-bronze) 9%, var(--ddl-paper));
  font-size: 0.85rem; line-height: 1.45; color: var(--ddl-ink-2);
}

.ddl-fig-refusals {
  margin: 0 0 0.7rem; padding-left: 1.05rem; max-width: 78ch;
  font-size: 0.8rem; line-height: 1.5; color: var(--ddl-muted);
}
.ddl-fig-refusals strong { color: var(--ddl-ink-2); font-weight: 620; }

/* ---- the plot surface ----------------------------------------------------
   THE FIGURES ARE RENDERED LIGHT, IN BOTH APPEARANCES, AND THEREFORE SIT ON A
   PAPER GROUND IN BOTH. This is a decision, not an oversight, and the
   alternative was measured before it was rejected: with the surface left
   transparent, the dark appearance put the light-rendered axis text (#5F6A72)
   on a #171C20 card at roughly 2:1 contrast, which is unreadable and well
   under the 4.5:1 floor.
   The honest fix is a server-side dark render, and the builders are already
   two thirds of the way there -- ddl_ggtheme(dark) exists and the tortoise and
   small-mammal builders take a `dark` argument. The invasive builders do not,
   so wiring it today would darken two programmes and leave the third light,
   which is worse than a consistent choice. Figures sit on paper until all four
   programmes can switch together. Recorded in docs/preview.md as not built.
   ------------------------------------------------------------------------- */
.ddl-fig-plot {
  background: #ffffff;
  border: 1px solid var(--ddl-line);
  border-radius: 12px;
  padding: 0.42rem;
  overflow-x: auto;            /* the figure scrolls inside its own box, never the page */
  -webkit-overflow-scrolling: touch;
  box-shadow: inset 0 0 0 1px rgba(31,37,41,0.018), 0 10px 26px rgba(31,37,41,0.035);
}
.ddl-fig-plot:focus-visible {
  outline: 3px solid var(--ddl-accent);
  outline-offset: 3px;
}
.ddl-fig-plot svg { max-width: 100%; height: auto; display: block; }
.ddl-fig-plot .girafe_container_std { margin: 0 auto; }
.ddl-fig-scroll-hint { display: none; }

/* The canvas box. Its ratio is written inline by ddl_figure_frame(), read from
   the figure's OWN canvas, so the container and the drawing cannot disagree.

   THE DEFECT THIS REPLACED. ggiraph fits the drawing inside its box with
   preserveAspectRatio and centres what is left over, so a box of the wrong shape
   silently shrinks the whole picture rather than failing. Every figure on this
   hub was drawing at 54-80% of its column with the rest blank, and nothing in
   the DOM said so: the <svg> ELEMENT filled its box exactly while the PICTURE
   inside it sat pillarboxed. Measured, not eyeballed -- scripts/audit_fig_aspect.R
   is the arithmetic, and it is what caught it.

   The dimensions are !important because htmlwidgets writes its own inline height
   onto the widget div, and an inline style beats a class. */
.ddl-fig-canvas { width: 100%; }
.ddl-fig-canvas > .html-widget,
.ddl-fig-canvas > .girafe { width: 100% !important; height: 100% !important; }
.ddl-fig-canvas .girafe_container_std { width: 100%; height: 100%; }

.ddl-fig-n {
  margin: 0.6rem 0 0; font-size: 0.74rem; color: var(--ddl-muted);
  font-variant-numeric: tabular-nums;
}
.ddl-fig-counting { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--ddl-muted); }
.ddl-fig-counting > summary {
  cursor: pointer; color: var(--ddl-ink-2); font-size: 0.8rem;
  padding: 0.2rem 0; min-height: 32px; display: list-item;
}
.ddl-fig-counting > summary:is(:hover, :focus-visible) { color: var(--ddl-accent); }
.ddl-fig-counting p { margin: 0.45rem 0 0; max-width: 78ch; line-height: 1.5; }

/* ---- the entity notes ----------------------------------------------------
   A real scientific name beside a generated count is a quotable claim the
   moment it is screenshotted, and no banner elsewhere on the page travels with
   the crop. So the note is ADJACENT -- same visual block as the figure that
   names the entity -- rather than a footnote at the bottom of the page.     */
.ddl-entity-notes {
  margin: 0.55rem 0 0; padding: 0.6rem 0.75rem;
  border: 1px solid var(--ddl-line); border-left: 3px solid var(--ddl-agave);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--ddl-agave) 6%, var(--ddl-paper));
}
.ddl-entity-head {
  margin: 0 0 0.3rem; font-size: 0.68rem; font-weight: 660;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ddl-muted);
}
.ddl-entity-note {
  margin: 0.25rem 0 0; font-size: 0.8rem; line-height: 1.45;
  color: var(--ddl-ink-2); max-width: 78ch;
}
.ddl-entity-note-group + .ddl-entity-note-group { margin-top: 0.55rem; }
.ddl-entity-source {
  margin: 0.18rem 0 0; font-size: 0.74rem; line-height: 1.4;
  color: var(--ddl-muted); max-width: 78ch;
}

/* ---- the one reader-driven control -------------------------------------- */
.ddl-pick .form-group, .ddl-pick .shiny-input-container { margin-bottom: 0; width: 100%; }
.ddl-pick label { font-size: 0.8rem; color: var(--ddl-muted); font-weight: 600; }
.ddl-region-body { min-width: 0; }
.ddl-region-live { border-left: 3px solid var(--ddl-agave-2); }

/* ---- the (i) convention: works on tap, never hover-only ----------------- */
.info-dot {
  background: transparent; border: 0; padding: 0.15rem; line-height: 1;
  color: var(--ddl-muted); cursor: pointer; min-height: 44px; min-width: 44px;
}
.info-dot:is(:hover, :focus-visible) { color: var(--ddl-accent); }
.ddl-info-pop-body { font-size: 0.85rem; max-width: 42ch; }

/* ---- hub views and footer ----------------------------------------------- */
.ddl-hubviews {
  display: flex; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.9rem 0 0.4rem; border-top: 1px solid var(--ddl-line);
}
.ddl-hubviews-primary {
  padding: 0.45rem 0; border-top: 0; border-bottom: 1px solid var(--ddl-line);
}
.ddl-hubview-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.85rem; color: var(--ddl-ink-2); text-decoration: none;
}
/* --ddl-accent measures 3.71:1 on this ground; the current-state signal also
   carries on weight, so hue is not doing the work alone. */
.ddl-hubview-link:is(:hover, :focus-visible), .ddl-hubview-link.is-on { color: #3d6349; font-weight: 700; }
.ddl-footer { padding: 0.6rem 0 1.6rem; font-size: 0.74rem; color: var(--ddl-muted); }
.ddl-footer-row {
  display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: space-between;
  padding: 0.55rem 0.7rem; margin-bottom: 0.5rem;
}
.ddl-seam { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.74rem; }
.ddl-footer-org { margin-left: auto; }

@media (max-width: 960px) {
  .ddl-region.ddl-fig-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "lead" "media" "detail";
    grid-template-rows: auto auto auto;
  }
  .ddl-workspace-figure-media {
    border-inline-end: 0; border-top: 1px solid rgba(43,35,52,0.16);
    border-bottom: 1px solid rgba(43,35,52,0.16);
  }
}

@media (max-width: 900px) {
  .ddl-minimal-cover {
    height: auto; min-height: 0; grid-template-columns: 1fr;
  }
  .ddl-minimal-cover-rail { border-right: 0; border-bottom: 1px solid rgba(244,236,223,0.16); }
  .ddl-minimal-cover-title { max-width: none; }
  .ddl-minimal-cover-doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ddl-minimal-cover-door {
    min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto auto auto;
  }
  .ddl-minimal-cover-plate {
    grid-row: 1; grid-column: 1; width: 100%; height: auto; aspect-ratio: 4 / 3;
    border-right: 0; border-bottom: 1px solid rgba(43,35,52,0.2);
  }
  .ddl-minimal-cover-door-index { grid-column: 1; padding: 0.75rem 0.75rem 0; }
  .ddl-minimal-cover-door-foot { grid-column: 1; padding: 0.2rem 0.75rem 0.75rem; }
  .ddl-field-map-svg { min-height: 390px; }
}

@media (max-width: 767px) {
  .container-fluid { padding-inline: 0.8rem; }
  .ddl-header { align-items: flex-start; }
  .ddl-header-right { width: 100%; justify-content: space-between; }
  .ddl-header-cover { align-items: center; }
  .ddl-header-cover .ddl-header-right { width: auto; margin-left: auto; }
  .ddl-cover-signin { gap: 0.45rem; }
  .ddl-switcher { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .ddl-switcher-lab { flex: 0 0 auto; }
  .ddl-switch-chip { flex: 0 0 auto; }
  .ddl-public-proof-grid, .ddl-public-programmes, .ddl-qc-grid { grid-template-columns: 1fr; }
  .ddl-minimal-cover-rail { padding: 1.2rem; }
  .ddl-minimal-cover-title { font-size: clamp(2.65rem, 13vw, 4rem); }
  .ddl-minimal-cover-doors { grid-template-columns: 1fr; }
  .ddl-minimal-cover-door {
    min-height: 118px; grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .ddl-minimal-cover-plate {
    grid-row: 1 / 3; grid-column: 1; width: 112px; height: 100%; aspect-ratio: auto;
    border-right: 1px solid rgba(43,35,52,0.2); border-bottom: 0;
  }
  .ddl-minimal-cover-door-index { grid-column: 2; padding: 0.8rem 0.8rem 0; }
  .ddl-minimal-cover-door-foot { grid-column: 2; padding: 0.15rem 0.8rem 0.8rem 0; }
  .ddl-field-map { padding: 0.8rem; }
  .ddl-field-map-svg { min-height: 340px; }
  .ddl-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ddl-receipt-stage { grid-template-columns: 1fr; gap: 0.25rem; padding: 0.7rem 0; }
  .ddl-receipt-stage .ddl-muted { text-align: left; }
  .ddl-fig-scroll-hint {
    display: flex; align-items: center; gap: 0.42rem;
    margin: 0 0 0.45rem; color: var(--ddl-muted);
    font-size: 0.74rem; line-height: 1.35;
  }
  .ddl-fig-scroll-hint::before {
    content: "\2194"; flex: 0 0 auto;
    color: var(--ddl-accent); font-size: 1rem; line-height: 1;
  }
  .ddl-fig-canvas { min-width: 700px; }
  .ddl-footer-org { margin-left: 0; }
}

@media (max-width: 390px) {
  .ddl-header-cover { flex-wrap: nowrap; gap: 0.4rem; }
  .ddl-brand { gap: 0.4rem; }
  .ddl-brand-mark { width: 30px; height: 30px; }
  .ddl-brand-name { font-size: 0.92rem; }
  .ddl-brand-org { display: none; }
  .ddl-header-cover .ddl-brand-org { display: none; }
  .ddl-cover-signin { gap: 0.3rem; }
  .ddl-cover-signin-note { max-width: 12ch; font-size: 0.62rem; line-height: 1.15; }
  .ddl-cover-signin-button { padding-inline: 0.55rem; font-size: 0.68rem; }
  .ddl-minimal-cover-door-foot { gap: 0.45rem; padding-right: 0.65rem; }
  .ddl-minimal-cover-door-arrow { width: 30px; height: 30px; }
}

@media (max-width: 767px) {
  .ddl-workspace-masthead {
    min-height: 148px; grid-template-columns: minmax(0, 1fr) 88px;
    gap: 0.85rem; padding: 1rem 0;
  }
  .ddl-workspace-masthead::before { width: 330px; right: -25%; top: -88%; }
  .ddl-workspace-masthead::after { display: none; }
  .ddl-workspace-kicker { margin-bottom: 0.3rem; font-size: 0.62rem; }
  .ddl-workspace-title { font-size: clamp(2.15rem, 11vw, 2.8rem); }
  .ddl-workspace-question {
    margin-top: 0.48rem; max-width: 48ch; font-size: 0.74rem; line-height: 1.32;
  }
  .ddl-workspace-asof { margin-top: 0.45rem; font-size: 0.68rem; }
  .ddl-workspace-specimen { width: 88px; box-shadow: 6px 6px 0 rgba(199,155,69,0.08); }
  .ddl-workspace-specimen::after { inset: 5px; }
  .ddl-workspace-specimen-code { right: 5px; bottom: 5px; font-size: 0.62rem; }

  .ddl-workspace-metrics { margin-bottom: 0.72rem; }
  .ddl-workspace-metric {
    display: block; min-height: 86px; padding: 0.5rem 0.45rem;
  }
  .ddl-workspace-metric-index { display: block; margin-bottom: 0.12rem; }
  .ddl-workspace-metric-value { display: block; font-size: 1.55rem; }
  .ddl-workspace-metric-label { display: block; margin-top: 0.18rem; font-size: 0.74rem; line-height: 1.15; }

  .ddl-workspace-figure-lead { padding: 0.95rem 0.82rem 0.7rem; }
  .ddl-workspace-figure-media { padding: 0.62rem; }
  .ddl-workspace-figure-detail { padding: 0.85rem 0.82rem; }
  .ddl-fig-workspace .ddl-region-title { font-size: 1.3rem; }
  .ddl-fig-workspace .ddl-fig-caption { font-size: 0.8rem; line-height: 1.42; }
  .ddl-fig-workspace .ddl-fig-warn { font-size: 0.8rem; line-height: 1.38; }
  .ddl-fig-workspace .ddl-fig-scroll-hint { color: rgba(43,35,52,0.62); }
  .ddl-fig-block-workspace > .ddl-entity-notes { padding: 0.65rem; }
}

@media (prefers-reduced-motion: no-preference) {
  html.ddl-motion-ok .ddl-route-chip,
  html.ddl-motion-ok .ddl-btn,
  html.ddl-motion-ok .ddl-switch-chip,
  html.ddl-motion-ok .ddl-task-card,
  html.ddl-motion-ok .ddl-minimal-cover-door,
  html.ddl-motion-ok .ddl-workspace-route,
  html.ddl-motion-ok .ddl-workspace-home {
    transition: opacity 150ms ease, transform 180ms cubic-bezier(.2,.8,.2,1),
      border-color 180ms ease, box-shadow 180ms ease;
  }

  html.ddl-motion-ok .ddl-brand-trail,
  html.ddl-motion-ok .ddl-brand-nodes circle,
  html.ddl-motion-ok .ddl-minimal-cover-door-arrow,
  html.ddl-motion-ok .ddl-minimal-cover-plate img {
    transition: stroke 180ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
  }
  html.ddl-motion-ok .ddl-header-cover .ddl-brand-contour,
  html.ddl-motion-ok .ddl-header-cover .ddl-brand-trail {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: ddl-brand-draw 520ms cubic-bezier(.2,.8,.2,1) forwards;
  }
  html.ddl-motion-ok .ddl-header-cover .ddl-brand-contour { animation-delay: 35ms; }
  html.ddl-motion-ok .ddl-header-cover .ddl-brand-trail { animation-delay: 110ms; }
  html.ddl-motion-ok .ddl-header-cover .ddl-brand-nodes circle {
    opacity: 0; transform: scale(0.35);
    animation: ddl-brand-node 260ms cubic-bezier(.2,.8,.2,1) forwards;
  }
  html.ddl-motion-ok .ddl-header-cover .ddl-brand-nodes circle:nth-child(1) { animation-delay: 300ms; }
  html.ddl-motion-ok .ddl-header-cover .ddl-brand-nodes circle:nth-child(2) { animation-delay: 355ms; }
  html.ddl-motion-ok .ddl-header-cover .ddl-brand-nodes circle:nth-child(3) { animation-delay: 410ms; }

  html.ddl-motion-ok .ddl-minimal-cover-eyebrow,
  html.ddl-motion-ok .ddl-minimal-cover-title,
  html.ddl-motion-ok .ddl-minimal-cover-index {
    opacity: 0; animation: ddl-cover-copy-arrive 440ms cubic-bezier(.2,.8,.2,1) forwards;
  }
  html.ddl-motion-ok .ddl-minimal-cover-eyebrow { animation-delay: 70ms; }
  html.ddl-motion-ok .ddl-minimal-cover-title { animation-delay: 125ms; }
  html.ddl-motion-ok .ddl-minimal-cover-index { animation-delay: 190ms; }

  html.ddl-motion-ok .ddl-minimal-cover-door {
    opacity: 0; animation: ddl-door-arrive 440ms cubic-bezier(.2,.8,.2,1) forwards;
  }
  html.ddl-motion-ok .ddl-minimal-cover-door:nth-child(1) { animation-delay: 220ms; }
  html.ddl-motion-ok .ddl-minimal-cover-door:nth-child(2) { animation-delay: 280ms; }
  html.ddl-motion-ok .ddl-minimal-cover-door:nth-child(3) { animation-delay: 340ms; }
  html.ddl-motion-ok .ddl-minimal-cover-door:focus-visible { transform: translateY(-2px); }
  html.ddl-motion-ok .ddl-minimal-cover-door:is(:hover, :focus-visible) .ddl-minimal-cover-door-arrow {
    transform: translate(1px, -1px);
  }
  html.ddl-motion-ok .ddl-field-map-sheet {
    opacity: 0; animation: ddl-map-arrive 520ms 420ms cubic-bezier(.2,.8,.2,1) forwards;
  }
  html.ddl-motion-ok .ddl-field-region-fill {
    opacity: 0; animation: ddl-region-fill-arrive 360ms 500ms ease-out forwards;
  }
  html.ddl-motion-ok .ddl-field-boundary {
    stroke-dasharray: 2600; stroke-dashoffset: 2600;
    animation: ddl-map-draw 620ms 560ms cubic-bezier(.3,.7,.2,1) forwards;
  }
  html.ddl-motion-ok .ddl-field-trail {
    stroke-dasharray: 1800; stroke-dashoffset: 1800;
    animation: ddl-map-draw 440ms var(--ddl-trail-delay, 620ms) cubic-bezier(.3,.7,.2,1) forwards;
  }
  html.ddl-motion-ok .ddl-field-trail-label {
    opacity: 0; animation: ddl-trail-label-arrive 320ms 940ms ease-out forwards;
  }

  html.ddl-motion-ok .ddl-workspace-masthead-copy > * {
    opacity: 0; animation: ddl-workspace-arrive 430ms cubic-bezier(.2,.8,.2,1) forwards;
  }
  html.ddl-motion-ok .ddl-workspace-masthead-copy > *:nth-child(1) { animation-delay: 55ms; }
  html.ddl-motion-ok .ddl-workspace-masthead-copy > *:nth-child(2) { animation-delay: 105ms; }
  html.ddl-motion-ok .ddl-workspace-masthead-copy > *:nth-child(3) { animation-delay: 155ms; }
  html.ddl-motion-ok .ddl-workspace-masthead-copy > *:nth-child(4) { animation-delay: 205ms; }
  html.ddl-motion-ok .ddl-workspace-specimen {
    opacity: 0; animation: ddl-specimen-arrive 520ms 130ms cubic-bezier(.2,.8,.2,1) forwards;
  }
  html.ddl-motion-ok .ddl-workspace-metrics {
    opacity: 0; animation: ddl-workspace-arrive 430ms 245ms cubic-bezier(.2,.8,.2,1) forwards;
  }
  html.ddl-motion-ok .ddl-fig-block-workspace {
    opacity: 0; animation: ddl-field-sheet-arrive 560ms 320ms cubic-bezier(.2,.8,.2,1) forwards;
  }

  html.ddl-motion-ok .ddl-public-hero-copy > * {
    opacity: 0;
    animation: ddl-field-arrive 520ms cubic-bezier(.2,.8,.2,1) forwards;
  }
  html.ddl-motion-ok .ddl-public-hero-copy > *:nth-child(1) { animation-delay: 60ms; }
  html.ddl-motion-ok .ddl-public-hero-copy > *:nth-child(2) { animation-delay: 115ms; }
  html.ddl-motion-ok .ddl-public-hero-copy > *:nth-child(3) { animation-delay: 170ms; }
  html.ddl-motion-ok .ddl-public-hero-copy > *:nth-child(4) { animation-delay: 225ms; }
  html.ddl-motion-ok .ddl-public-hero-copy > *:nth-child(5) { animation-delay: 280ms; }

  html.ddl-motion-ok .ddl-public-atlas {
    opacity: 0;
    animation: ddl-atlas-arrive 680ms 140ms cubic-bezier(.2,.8,.2,1) forwards;
  }
  html.ddl-motion-ok .ddl-public-boundary { animation: ddl-boundary-arrive 520ms 420ms cubic-bezier(.2,.8,.2,1) both; }

  html.ddl-motion-ok .ddl-motion-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 480ms cubic-bezier(.2,.8,.2,1), transform 480ms cubic-bezier(.2,.8,.2,1);
    transition-delay: calc(var(--ddl-reveal-order, 0) * 55ms);
  }
  html.ddl-motion-ok .ddl-motion-reveal.is-visible { opacity: 1; transform: translateY(0); }

  html.ddl-motion-ok .ddl-fig::after {
    content: ""; height: 3px; position: absolute; left: 0; top: 0;
    background: var(--ddl-accent); border-radius: 16px 16px 0 0;
    animation: ddl-line-draw 820ms 120ms cubic-bezier(.2,.8,.2,1) both;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.ddl-motion-ok .ddl-brand:hover .ddl-brand-trail { stroke: var(--ddl-bronze); }
  html.ddl-motion-ok .ddl-brand:hover .ddl-brand-nodes circle:last-child { transform: scale(1.22); }
  html.ddl-motion-ok .ddl-minimal-cover-door:hover {
    color: #2b2334; border-color: var(--ddl-accent); transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(11,7,14,0.3), inset 0 1px rgba(255,255,255,0.62);
  }
  html.ddl-motion-ok .ddl-minimal-cover-door:hover .ddl-minimal-cover-plate img {
    transform: scale(1.012);
  }
}

html.ddl-motion-paused .ddl-header-cover .ddl-brand *,
html.ddl-motion-paused .ddl-public-hero *,
html.ddl-motion-paused .ddl-minimal-cover *,
html.ddl-motion-paused .ddl-workspace-masthead-copy > *,
html.ddl-motion-paused .ddl-workspace-specimen,
html.ddl-motion-paused .ddl-workspace-metrics,
html.ddl-motion-paused .ddl-fig-block-workspace,
html.ddl-motion-paused .ddl-fig::after {
  animation-play-state: paused !important;
}

@keyframes ddl-field-arrive {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ddl-atlas-arrive {
  from { opacity: 0; transform: translateY(20px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ddl-boundary-arrive {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ddl-line-draw {
  from { width: 0; opacity: 0.4; }
  to { width: 100%; opacity: 1; }
}
@keyframes ddl-door-arrive {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ddl-map-arrive {
  from { opacity: 0; transform: translateY(6px) scale(0.992); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes ddl-map-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes ddl-brand-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes ddl-brand-node {
  to { opacity: 1; transform: scale(1); }
}
@keyframes ddl-cover-copy-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ddl-region-fill-arrive {
  to { opacity: 1; }
}
@keyframes ddl-trail-label-arrive {
  to { opacity: 1; }
}
@keyframes ddl-workspace-arrive {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ddl-specimen-arrive {
  from { opacity: 0; transform: translate(8px, 8px); }
  to { opacity: 1; transform: translate(0, 0); }
}
@keyframes ddl-field-sheet-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ==========================================================================
   TORTOISE PRODUCT WORKSPACE
   Six-route task client adapted to the approved cover palette. The older
   editorial field-sheet selectors remain available to the internal profile;
   this block owns only the public .ddl-tor-page surface.
   ========================================================================== */
body:has(.ddl-tor-page) {
  --ddl-tor-night: #211725;
  --ddl-tor-night-2: #35263a;
  --ddl-tor-ink: #2b2334;
  --ddl-tor-muted: #6a606f;
  /* Twenty hardcoded mauves across nine near-identical hues, the closest pair
     six apart, and not one of them the token. Three real steps exist. */
  --ddl-tor-mauve: #75527a;
  --ddl-tor-mauve-deep: #654969;
  --ddl-tor-mauve-ink: #5b3d60;
  --ddl-tor-ground: #f1eee8;
  --ddl-tor-card: #fffdfa;
  --ddl-tor-line: rgba(54, 42, 60, 0.14);
  --ddl-tor-gold: #c79b45;
  --ddl-tor-sage: #72856b;
  --ddl-tor-sky: #6d8fa6;
  --ddl-tor-alert: #b65e47;
  --ddl-project-night: var(--ddl-tor-night);
  --ddl-project-paper: #f7efe1;
  --ddl-project-accent: var(--ddl-tor-gold);
  --ddl-project-accent-2: var(--ddl-tor-sage);
  --ddl-project-line: rgba(50, 38, 55, 0.13);
  color: var(--ddl-tor-ink);
  background:
    radial-gradient(circle at 4% 0%, rgba(109, 143, 166, 0.12), transparent 29rem),
    radial-gradient(circle at 96% 8%, rgba(199, 155, 69, 0.09), transparent 26rem),
    linear-gradient(rgba(43, 35, 52, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 35, 52, 0.025) 1px, transparent 1px),
    var(--ddl-tor-ground);
  background-size: auto, auto, 52px 52px, 52px 52px, auto;
}
body:has(.ddl-tor-page) > .container-fluid { max-width: 1480px; padding-inline: clamp(0.75rem, 1.3vw, 1.1rem); }
body:has(.ddl-tor-page) .demo-mark-strip-workspace {
  min-height: 24px; width: max-content; margin: 0 0 0.35rem; padding: 0.18rem 0.48rem;
  border: 1px solid rgba(43,35,52,0.16); border-radius: 3px;
  background: rgba(255,253,250,0.74); color: var(--ddl-tor-muted);
}
body:has(.ddl-tor-page) .demo-mark-workspace-text { color: inherit; font-size: 0.8rem; }
body:has(.ddl-tor-page) .ddl-header-workspace {
  min-height: 62px; margin: 0; padding: 0.52rem 0.82rem;
  color: #fbf5e9; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px 10px 0 0;
  background:
    radial-gradient(circle at 6% 20%, rgba(199,155,69,0.14), transparent 12rem),
    linear-gradient(105deg, #211725, #302137 70%, #211725);
  box-shadow: 0 8px 24px rgba(35,23,40,0.18);
}
body:has(.ddl-tor-page) .ddl-header-workspace .ddl-brand-name { color: #fffaf0; font-size: 1rem; }
body:has(.ddl-tor-page) .ddl-header-workspace .ddl-brand-org { color: rgba(255,250,240,0.68); }
body:has(.ddl-tor-page) .ddl-header-workspace .ddl-brand-frame { stroke: rgba(255,250,240,0.72); }
body:has(.ddl-tor-page) .ddl-header-workspace .ddl-brand-contour,
body:has(.ddl-tor-page) .ddl-header-workspace .ddl-brand-trail { stroke: var(--ddl-tor-gold); }
body:has(.ddl-tor-page) .ddl-header-workspace .ddl-brand-nodes circle { fill: var(--ddl-tor-gold); stroke: #211725; }
body:has(.ddl-tor-page) .ddl-header-workspace .ddl-cover-signin-button {
  color: #fffaf0; border-color: rgba(255,250,240,0.32); background: rgba(255,255,255,0.03);
}
body:has(.ddl-tor-page) .ddl-header-workspace .ddl-cover-signin-note { color: rgba(255,250,240,0.62); }

body:has(.ddl-tor-page) .ddl-workspace-nav {
  /* Identity stays VISIBLE: the labelled "All projects" return is the only
     explicit way back to the cover, and hiding it left the workspace with an
     unlabelled brand link as the sole exit. Restoration never hid it. */
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 0.6rem; min-height: 64px; padding: 8px 8px 8px 14px;
  border: 1px solid var(--ddl-tor-line);
  border-top: 0; background: rgba(255,253,250,0.94); color: var(--ddl-tor-ink);
  box-shadow: 0 8px 22px rgba(43,35,52,0.08);
}
body:has(.ddl-tor-page) .ddl-workspace-home { color: var(--ddl-tor-ink); }
body:has(.ddl-tor-page) .ddl-workspace-home:is(:hover, :focus-visible) {
  color: var(--ddl-tor-gold); background: rgba(199,155,69,0.08);
}
body:has(.ddl-tor-page) .ddl-workspace-route-scroll {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px;
  padding: 0; overflow: visible;
}
body:has(.ddl-tor-page) .ddl-workspace-route {
  min-width: 0; min-height: 47px; display: flex; align-items: center; justify-content: center;
  gap: 0.46rem; padding: 0.52rem 0.58rem; border: 1px solid rgba(43,35,52,0.11);
  border-radius: 9px; color: var(--ddl-tor-ink); background: rgba(255,255,255,0.74);
  box-shadow: 0 1px 4px rgba(43,35,52,0.05); text-align: center;
}
body:has(.ddl-tor-page) .ddl-workspace-route::after { display: none; }
body:has(.ddl-tor-page) .ddl-workspace-route-icon { display: inline-flex; color: var(--ddl-tor-mauve); font-size: 1rem; }
body:has(.ddl-tor-page) .ddl-workspace-route-label { font-size: 0.8rem; font-weight: 760; }
body:has(.ddl-tor-page) .ddl-workspace-route:is(:hover, :focus-visible) {
  color: var(--ddl-tor-ink); border-color: rgba(122,82,111,0.34); background: #fff;
  transform: translateY(-1px); box-shadow: 0 5px 14px rgba(43,35,52,0.09);
}
body:has(.ddl-tor-page) .ddl-workspace-route.is-on {
  color: #fffaf0; border-color: var(--ddl-tor-night-2);
  background: linear-gradient(135deg, var(--ddl-tor-night-2), #4a324e);
  box-shadow: 0 7px 18px rgba(43,35,52,0.17);
}
body:has(.ddl-tor-page) .ddl-workspace-route.is-on .ddl-workspace-route-icon { color: var(--ddl-tor-gold); }
body:has(.ddl-tor-page) .ddl-main-workspace { color: var(--ddl-tor-ink); padding: 1.45rem 0 0.75rem; }
body:has(.ddl-tor-page) .ddl-hubviews { display: none; }
body:has(.ddl-tor-page) .ddl-footer-workspace { color: var(--ddl-tor-muted); }
body:has(.ddl-tor-page) .ddl-footer-workspace-row { border-top-color: var(--ddl-tor-line); }
body:has(.ddl-tor-page) .ddl-footer-build > summary { color: var(--ddl-tor-muted); }

.ddl-tor-page {
  width: 100%; max-width: var(--ddl-measure); margin-inline: auto;
  font-size: 0.92rem; line-height: 1.45;
}
.ddl-tor-page h1, .ddl-tor-page h2, .ddl-tor-page h3, .ddl-tor-page h4 { color: var(--ddl-tor-ink); }
.ddl-tor-page p { color: var(--ddl-tor-muted); }
.ddl-tor-route-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  margin: 0 0 0.9rem; padding-inline: 0.08rem;
}
.ddl-tor-route-copy :is(h1, h2) {
  margin: 0; font-size: clamp(1.85rem, 3.8vw, 3.05rem);
  font-family: var(--ddl-display); font-weight: 400;
  line-height: 1.02; letter-spacing: -0.012em;
  font-variant-numeric: lining-nums;
}
.ddl-tor-route-copy > p { margin: 0.28rem 0 0; max-width: 70ch; font-size: 0.92rem; }
.ddl-tor-eyebrow {
  margin: 0 0 0.2rem !important; color: var(--ddl-tor-mauve) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem; font-weight: 760; letter-spacing: 0.11em; text-transform: uppercase;
}

.ddl-tor-card {
  min-width: 0; margin: 0 0 1rem; padding: 1rem;
  border: 1px solid var(--ddl-tor-line); border-radius: 14px;
  background: color-mix(in srgb, var(--ddl-tor-card) 96%, transparent);
  box-shadow: 0 1px 2px rgba(43,35,52,0.05), 0 10px 30px rgba(43,35,52,0.055);
}
.ddl-tor-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  min-height: 36px; margin: -0.1rem 0 0.75rem; padding-bottom: 0.62rem;
  border-bottom: 1px solid var(--ddl-tor-line);
}
.ddl-tor-card-title { display: flex; align-items: center; gap: 0.48rem; min-width: 0; }
.ddl-tor-card-title > svg { color: var(--ddl-tor-mauve); font-size: 1rem; flex: 0 0 auto; }
.ddl-tor-card-title h2 { margin: 0; font-size: 0.92rem; font-weight: 800; }
.ddl-tor-asof {
  color: var(--ddl-tor-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem; letter-spacing: 0.04em;
}
.ddl-tor-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.ddl-tor-btn {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.5rem 0.78rem; border: 1px solid rgba(43,35,52,0.2); border-radius: 8px;
  color: var(--ddl-tor-ink); background: rgba(255,255,255,0.66); text-decoration: none;
  font-size: 0.8rem; font-weight: 740;
}
.ddl-tor-btn:is(:hover, :focus-visible) { color: var(--ddl-tor-ink); border-color: var(--ddl-tor-mauve); background: #fff; }
.ddl-tor-btn-primary { color: #fffaf0; border-color: var(--ddl-tor-night-2); background: var(--ddl-tor-night-2); }
.ddl-tor-btn-primary:is(:hover, :focus-visible) { color: #fff; background: #4a324e; }
.ddl-tor-btn.is-disabled { opacity: 0.38; pointer-events: none; }
.ddl-tor-text-link, .ddl-tor-review-link {
  display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ddl-tor-mauve-deep);
  font-weight: 760; text-decoration: underline; text-underline-offset: 3px;
}
.ddl-tor-review-link { min-height: 40px; white-space: nowrap; text-decoration: none; }
.ddl-tor-roster-only { color: var(--ddl-tor-muted); font-size: 0.74rem; white-space: nowrap; }

.ddl-tor-pill {
  min-height: 28px; display: inline-flex; align-items: center; width: max-content;
  padding: 0.24rem 0.55rem; border: 1px solid var(--ddl-tor-line); border-radius: 999px;
  color: var(--ddl-tor-muted); background: rgba(255,255,255,0.65);
  font-size: 0.68rem; font-weight: 780; white-space: nowrap;
}
.ddl-tor-pill.is-alert { color: #823b2d; border-color: rgba(182,94,71,0.34); background: rgba(182,94,71,0.1); }
.ddl-tor-pill.is-gold { color: #73531c; border-color: rgba(199,155,69,0.4); background: rgba(199,155,69,0.14); }
.ddl-tor-pill.is-ok { color: #405d43; border-color: rgba(114,133,107,0.4); background: rgba(114,133,107,0.12); }
.ddl-tor-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.ddl-tor-stat {
  min-width: 0; padding: 0.68rem 0.75rem; border-left: 3px solid rgba(43,35,52,0.22);
  border-radius: 7px; background: rgba(43,35,52,0.035);
}
.ddl-tor-stat.is-alert { border-left-color: var(--ddl-tor-alert); }
.ddl-tor-stat.is-gold { border-left-color: var(--ddl-tor-gold); }
.ddl-tor-stat strong { display: block; color: var(--ddl-tor-ink); font-size: 1.2rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ddl-tor-stat span { display: block; margin-top: 0.2rem; color: var(--ddl-tor-muted); font-size: 0.68rem; line-height: 1.25; }

.ddl-tor-trustline, .ddl-tor-note {
  display: flex; align-items: flex-start; gap: 0.52rem; margin: 0 0 0.95rem;
  padding: 0.6rem 0.72rem; border: 1px solid rgba(114,133,107,0.22); border-radius: 9px;
  color: var(--ddl-tor-ink); background: rgba(114,133,107,0.08); font-size: 0.85rem;
}
.ddl-tor-trustline > svg, .ddl-tor-note > svg { margin-top: 0.1rem; color: var(--ddl-tor-sage); flex: 0 0 auto; }
.ddl-tor-trustline span { color: var(--ddl-tor-muted); }
.ddl-tor-note p { margin: 0; color: var(--ddl-tor-muted); }
.ddl-tor-note strong { display: block; margin-bottom: 0.06rem; font-size: 0.74rem; }

/* Start */
.ddl-tor-start-page {
  padding: clamp(1rem, 2.3vw, 1.5rem); border: 1px solid var(--ddl-tor-line);
  border-radius: 19px; background: rgba(255,253,250,0.87);
  box-shadow: 0 16px 42px rgba(43,35,52,0.08);
}
.ddl-tor-start-page .ddl-tor-route-copy :is(h1, h2) { font-size: clamp(2.35rem, 4.5vw, 3.75rem); }
.ddl-tor-start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.ddl-tor-start-task {
  position: relative; min-height: 128px; display: grid;
  grid-template-columns: 4px 54px minmax(0,1fr) auto; align-items: center; gap: 0.85rem;
  overflow: hidden; padding: 1rem 1rem 1rem 0; border: 1px solid var(--ddl-tor-line);
  border-radius: 19px; color: var(--ddl-tor-ink); background: rgba(250,249,247,0.96);
  box-shadow: 0 6px 18px rgba(43,35,52,0.05); text-decoration: none;
}
.ddl-tor-start-rail { align-self: stretch; width: 4px; border-radius: 0 4px 4px 0; background: var(--ddl-tor-mauve); }
.ddl-tor-start-icon {
  width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; color: #fff8e9; background: linear-gradient(145deg, var(--ddl-tor-mauve-ink), #2d2231);
  box-shadow: 0 8px 18px rgba(43,35,52,0.17); font-size: 1.18rem;
}
.ddl-tor-start-copy { min-width: 0; display: flex; flex-direction: column; }
.ddl-tor-start-eyebrow {
  color: var(--ddl-tor-mauve); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.ddl-tor-start-copy strong { margin-top: 0.1rem; font-size: 1.08rem; line-height: 1.16; }
.ddl-tor-start-copy > span:last-child { margin-top: 0.25rem; color: var(--ddl-tor-muted); font-size: 0.8rem; }
.ddl-tor-start-arrow { color: var(--ddl-tor-mauve); font-size: 1.1rem; }
.ddl-tor-start-task:is(:hover, :focus-visible) {
  color: var(--ddl-tor-ink); border-color: rgba(122,82,111,0.38); transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(43,35,52,0.11);
}
.ddl-tor-start-links { display: flex; flex-wrap: wrap; gap: 0.52rem; margin-top: 1rem; font-size: 0.74rem; }
.ddl-tor-start-links span:first-child { color: var(--ddl-tor-muted); font-weight: 720; }
.ddl-tor-start-links a { color: var(--ddl-tor-mauve-deep); text-underline-offset: 3px; }

/* Shared context */
.ddl-tor-context {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 1rem; margin: -1.45rem 0 1rem;
  padding: 0.55rem 0.72rem; border: 1px solid var(--ddl-tor-line); border-top: 0;
  border-radius: 0 0 10px 10px; background: rgba(255,253,250,0.96);
  box-shadow: 0 7px 20px rgba(43,35,52,0.08);
}
.ddl-tor-context-summary { margin: 0 0 0.18rem !important; font-size: 0.68rem; font-style: italic; white-space: nowrap; }
.ddl-tor-context-summary > svg { margin-right: 0.25rem; color: var(--ddl-tor-mauve); }
.ddl-tor-context-controls { min-width: min(390px, 100%); display: flex; align-items: flex-end; gap: 0.55rem; }
.ddl-tor-context-controls .form-group, .ddl-tor-context-controls .shiny-input-container { flex: 1 1 250px; margin: 0; }
.ddl-tor-context-controls label { margin-bottom: 0.12rem; color: var(--ddl-tor-ink); font-size: 0.68rem; font-weight: 760; }
.ddl-tor-context-controls .selectize-control { margin-bottom: 0; }
.ddl-tor-context-controls .selectize-input { min-height: 40px; border-color: var(--ddl-tor-line); border-radius: 8px; box-shadow: none; }
.ddl-tor-page .form-check-input:checked {
  border-color: var(--ddl-tor-mauve-deep) !important; background-color: var(--ddl-tor-mauve-deep) !important;
}

/* Action */
.ddl-tor-answer-row { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(0,1.2fr); gap: 0.9rem; align-items: center; }
.ddl-tor-answer strong { color: var(--ddl-tor-ink); font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
.ddl-tor-answer p { margin: 0.22rem 0 0; }
.ddl-tor-field-note { margin: 0.8rem 0; border: 1px solid var(--ddl-tor-line); border-radius: 8px; background: rgba(199,155,69,0.055); }
.ddl-tor-field-note > summary, .ddl-tor-ledger-fold > summary, .ddl-tor-rulebook > summary,
.ddl-tor-roster > summary, .ddl-tor-chart-twin > summary, .ddl-tor-map-window > summary {
  min-height: 44px; display: flex; align-items: center; gap: 0.4rem; padding: 0.56rem 0.7rem;
  cursor: pointer; color: var(--ddl-tor-ink); font-size: 0.74rem; font-weight: 780;
}
.ddl-tor-field-note ul { margin: 0; padding: 0.2rem 1.2rem 0.7rem 2rem; color: var(--ddl-tor-muted); font-size: 0.74rem; }
.ddl-tor-filter-row {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.65rem;
  padding: 0.35rem 0 0.1rem; border-top: 1px solid var(--ddl-tor-line);
}
.ddl-tor-filter-row .form-group { margin-bottom: 0.55rem; }
.ddl-tor-filter-row .form-group:last-child { margin-left: auto; min-width: 220px; }
.ddl-tor-queue-actions {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}
.ddl-tor-queue-actions > :first-child { margin-right: auto; }
.ddl-tor-queue-status { margin: 0; color: var(--ddl-tor-muted); font-size: 0.74rem; }
.ddl-tor-selected:focus { outline: 3px solid var(--ddl-sky); outline-offset: 3px; }
/* The caption floor. This class carries the empty states, the map banners and
   the honesty captions — the sentences a reader has to act on — so it holds a
   13.6px floor rather than the 10.9px it used to render at outdoors. */
.ddl-tor-card-caption { margin: 0.65rem 0 0; font-size: 0.85rem; }
.ddl-tor-support-card { max-width: none; }

/* Tables and Shiny radio groups */
.ddl-tor-page .radio-inline, .ddl-tor-page .form-check-inline {
  min-height: 44px; display: inline-flex; align-items: center; margin: 0.15rem 0.25rem 0.15rem 0;
  padding: 0.38rem 0.62rem; border: 1px solid var(--ddl-tor-line); border-radius: 8px;
  background: rgba(255,255,255,0.62); font-size: 0.74rem; cursor: pointer;
}
.ddl-tor-page .radio-inline:has(input:checked), .ddl-tor-page .form-check-inline:has(input:checked) {
  color: #fffaf0; border-color: var(--ddl-tor-night-2); background: var(--ddl-tor-night-2);
}
.ddl-tor-page .radio-inline input, .ddl-tor-page .form-check-inline input {
  position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; pointer-events: none;
}
.ddl-tor-page .radio-inline:has(input:focus-visible),
.ddl-tor-page .form-check-inline:has(input:focus-visible) {
  outline: 3px solid var(--ddl-sky); outline-offset: 2px;
}
.ddl-tor-page .form-control,
.ddl-tor-page .selectize-input,
.ddl-tor-page .selectize-dropdown,
.ddl-tor-page .dataTables_wrapper input,
.ddl-tor-page .dataTables_wrapper select {
  color: var(--ddl-tor-ink) !important; border-color: var(--ddl-tor-line) !important;
  background: #fffdfa !important; color-scheme: light;
}
.ddl-tor-table-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--ddl-tor-line); border-radius: 9px; }
.ddl-tor-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 0.74rem; }
.ddl-tor-table th, .ddl-tor-table td { padding: 0.58rem 0.66rem; border-bottom: 1px solid var(--ddl-tor-line); text-align: left; }
.ddl-tor-table th { color: var(--ddl-tor-mauve-deep); background: rgba(43,35,52,0.04); font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; }
.ddl-tor-table tr:last-child td { border-bottom: 0; }
.ddl-tor-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ddl-tor-dt-top { display: flex; justify-content: flex-end; margin-bottom: 0.48rem; }
.ddl-tor-dt-top label { color: var(--ddl-tor-muted); font-size: 0.68rem; }
.ddl-tor-dt-top input { min-height: 38px; margin-left: 0.4rem; border: 1px solid var(--ddl-tor-line); border-radius: 7px; }
.ddl-tor-dt-bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.45rem; color: var(--ddl-tor-muted); font-size: 0.68rem; }
.ddl-tor-page table.dataTable { border: 1px solid var(--ddl-tor-line) !important; border-radius: 8px; overflow: hidden; }
.ddl-tor-page table.dataTable thead th { color: var(--ddl-tor-mauve-deep); background: rgba(43,35,52,0.045); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.035em; }
.ddl-tor-page table.dataTable tbody tr,
.ddl-tor-page table.dataTable tbody td {
  color: var(--ddl-tor-ink) !important; background: var(--ddl-tor-card) !important;
}
.ddl-tor-page table.dataTable.stripe tbody tr.odd,
.ddl-tor-page table.dataTable.display tbody tr.odd,
.ddl-tor-page table.dataTable tbody tr:nth-child(odd) td { background: #faf7f2 !important; }
.ddl-tor-page table.dataTable tbody tr:hover td { background: #f2ece4 !important; }
.ddl-tor-page table.dataTable tbody td { padding-block: 0.5rem; vertical-align: middle; font-size: 0.74rem; }
.ddl-tor-page .ddl-tor-review-link { color: var(--ddl-tor-mauve-deep); font-weight: 780; }
.ddl-tor-page .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  color: #fff !important; border-color: var(--ddl-tor-night-2) !important; background: var(--ddl-tor-night-2) !important;
}

/* Animals */
.ddl-tor-roster-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.ddl-tor-roster-controls .form-group { margin-bottom: 0.55rem; }
.ddl-tor-roster-note { margin: 0 0 0.7rem !important; font-size: 0.68rem; }
.ddl-tor-roster { padding: 0; overflow: hidden; }
.ddl-tor-roster > summary { padding-inline: 1rem; background: rgba(43,35,52,0.025); }
.ddl-tor-roster[open] > summary { border-bottom: 1px solid var(--ddl-tor-line); }
.ddl-tor-roster > div { padding: 0.85rem 1rem 1rem; }
.ddl-tor-empty {
  min-height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.35rem; padding: 1rem; border: 1px dashed rgba(43,35,52,0.22); border-radius: 10px;
  color: var(--ddl-tor-muted); text-align: center; background: rgba(255,255,255,0.42);
}
.ddl-tor-empty > svg { font-size: 1.45rem; color: #8a6f8e; }
.ddl-tor-empty h3, .ddl-tor-empty p { margin: 0; }
.ddl-tor-empty h3 { font-size: 1rem; }
.ddl-tor-empty p { font-size: 0.74rem; }
.ddl-tor-dossier { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--ddl-tor-line); }
.ddl-tor-dossier-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ddl-tor-dossier-title h2 { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 1.45rem; }
.ddl-tor-dossier-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7rem; margin: 0.7rem 0; }
.ddl-tor-dossier-nav > strong { text-align: center; }
.ddl-tor-dossier-tabs { margin-bottom: 0.75rem; }
.ddl-tor-dossier-identity { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.ddl-tor-dossier-identity h3 { margin: 0; font-size: 1.65rem; }
.ddl-tor-dossier-identity p:not(.ddl-tor-eyebrow) { margin: 0.18rem 0 0.45rem; }
.ddl-tor-scute-diagram { width: 146px; margin: 0; padding: 0.35rem; border: 1px solid var(--ddl-tor-line); border-radius: 12px; background: #efe4d0; }
.ddl-tor-scute-diagram svg { width: 100%; display: block; }
.ddl-tor-scute-limbs { fill: #b59a72; stroke: #6e5940; stroke-width: 1.3; }
.ddl-tor-scute-shell { fill: #ccb285; stroke: #614d38; stroke-width: 2; }
.ddl-tor-scute-lines { fill: none; stroke: rgba(73,55,40,0.66); stroke-width: 1.25; }
.ddl-tor-scute-code { fill: #34273a; font: 800 12px ui-monospace, SFMono-Regular, Menlo, monospace; paint-order: stroke; stroke: rgba(239,228,208,.9); stroke-width: 4px; }
.ddl-tor-scute-diagram figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: .3rem; padding: .15rem .28rem .1rem; }
.ddl-tor-scute-diagram figcaption strong { color: var(--ddl-tor-ink); font-size: 0.68rem; }
.ddl-tor-scute-diagram figcaption span { color: #6f5d46; font-size: 0.68rem; }
.ddl-tor-dossier-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0.55rem; margin-bottom: 0.75rem; }
.ddl-tor-dossier-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0.7rem; }
.ddl-tor-mini-card { padding: 0.8rem; border: 1px solid var(--ddl-tor-line); border-radius: 10px; background: rgba(255,255,255,0.6); }
.ddl-tor-mini-card h4 { margin: 0 0 0.55rem; font-size: 0.8rem; }
.ddl-tor-mini-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.34rem 0.65rem; margin: 0; font-size: 0.74rem; }
.ddl-tor-mini-card dt { color: var(--ddl-tor-muted); } .ddl-tor-mini-card dd { margin: 0; color: var(--ddl-tor-ink); font-weight: 680; }
.ddl-tor-reference-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0.7rem; }
.ddl-tor-reference-image { margin: 0; overflow: hidden; border: 1px solid var(--ddl-tor-line); border-radius: 10px; background: #e8ddc9; }
.ddl-tor-reference-image img { width: 100%; height: 210px; display: block; object-fit: cover; filter: sepia(.22) saturate(.72) contrast(1.03); }
.ddl-tor-reference-image:nth-child(2) img { object-position: 35% center; transform: scale(1.08); }
.ddl-tor-reference-image:nth-child(3) img { object-position: 68% center; transform: scale(1.13); }
.ddl-tor-reference-image figcaption { display: flex; flex-direction: column; padding: 0.55rem 0.65rem; }
.ddl-tor-reference-image figcaption strong { font-size: 0.74rem; }
.ddl-tor-reference-image figcaption span { color: var(--ddl-tor-muted); font-size: 0.62rem; }
.ddl-tor-reference-note { grid-column: 1/-1; margin: 0; font-size: 0.68rem; }
.ddl-tor-photo-empty { min-height: 300px; }

/* Movement map */
.ddl-tor-map-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, .82fr); gap: 0.8rem; align-items: start; }
.ddl-tor-map-card { padding: 0.85rem; }
.ddl-tor-map-window { margin: -0.2rem 0 0.6rem; border: 1px solid var(--ddl-tor-line); border-radius: 8px; background: rgba(255,255,255,0.5); }
.ddl-tor-map-window .form-group { padding: 0 0.8rem 0.55rem; margin: 0; }
.ddl-tor-map-controls { display: grid; gap: 0.7rem; }
.ddl-tor-map-controls .ddl-tor-card { margin: 0; }
.ddl-tor-map-controls .form-group { margin-bottom: 0.3rem; }
.ddl-tor-ledger-fold { margin-top: 0.85rem; padding: 0; }
.ddl-tor-ledger-fold > div { padding: 0.8rem; }

/* Health and charts */
.ddl-tor-health-headline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 0.8rem; padding: 0.8rem 0.9rem; border-left: 4px solid var(--ddl-tor-sage); background: rgba(114,133,107,0.07); }
.ddl-tor-health-headline strong { color: var(--ddl-tor-ink); font-size: 1.1rem; }.ddl-tor-health-headline span { color: var(--ddl-tor-muted); }
.ddl-tor-health-grid { display: grid; grid-template-columns: minmax(220px,.62fr) minmax(0,1.38fr); gap: 0.8rem; }
.ddl-tor-health-coverage { display: grid; align-content: start; gap: 0.5rem; }
.ddl-tor-health-coverage .ddl-tor-card-head { margin-bottom: 0.2rem; }
.ddl-tor-health-chart-card .form-group { max-width: 320px; margin-bottom: 0.25rem; }
.ddl-tor-chart { width: 100%; margin: 0; }.ddl-tor-chart svg { width: 100%; min-height: 280px; display: block; }
.ddl-tor-chart-title { fill: var(--ddl-tor-ink); font: 700 15px system-ui, sans-serif; }
.ddl-tor-chart-sub { fill: var(--ddl-tor-muted); font: 11px system-ui, sans-serif; }
.ddl-tor-chart-grid { stroke: rgba(43,35,52,0.11); stroke-width: 1; }.ddl-tor-chart-axis-line { stroke: rgba(43,35,52,0.3); stroke-width: 1; }
.ddl-tor-chart-axis { fill: var(--ddl-tor-muted); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.ddl-tor-chart-line { fill: none; stroke: #75527a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ddl-tor-chart-point { fill: #fffdfa; stroke: #75527a; stroke-width: 3; }
.ddl-tor-chart-bar { fill: #75527a; opacity: .86; }
.ddl-tor-chart-bar.is-incomplete {
  fill: #bca477; stroke: #75527a; stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .72;
}
.ddl-tor-chart-incomplete {
  fill: #fff7df; stroke: #9a652e; stroke-width: 2.5; vector-effect: non-scaling-stroke;
}
.ddl-tor-chart figcaption { margin: -0.2rem 0 0; color: var(--ddl-tor-muted); font-size: 0.68rem; }
.ddl-tor-chart-twin { margin-top: 0.45rem; border-top: 1px solid var(--ddl-tor-line); }
.ddl-tor-health-selected { margin-top: 0.1rem; }.ddl-tor-selected-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ddl-tor-selected-head h3 { margin: 0; font-size: 1.35rem; }.ddl-tor-health-selected .ddl-tor-stats { margin: 0.65rem 0; }

/* Data & methods */
.ddl-tor-breadcrumb { min-height: 28px; display: flex; align-items: center; margin: -0.8rem 0 0.7rem; color: var(--ddl-tor-muted); font-size: 0.68rem; }
.ddl-tor-breadcrumb > div, .ddl-tor-breadcrumb .shiny-html-output { display: flex; align-items: center; gap: 0.34rem; }
.ddl-tor-data-tabs { overflow-x: auto; margin-bottom: 0.8rem; scrollbar-width: thin; }
.ddl-tor-data-tabs .form-group { min-width: max-content; margin: 0; }
.ddl-tor-data-tabs .shiny-options-group { display: flex; flex-wrap: nowrap; gap: 0.15rem; }
.ddl-tor-data-tabs .radio-inline, .ddl-tor-data-tabs .form-check-inline { min-height: 44px; white-space: nowrap; }
.ddl-tor-data-panel > .ddl-tor-route-head { margin-top: 0.35rem; }
.ddl-tor-check-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0.65rem; margin-bottom: 0.8rem; }
.ddl-tor-check-card { min-height: 150px; padding: 0.8rem; border: 1px solid var(--ddl-tor-line); border-radius: 10px; background: rgba(255,253,250,0.9); }
.ddl-tor-check-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ddl-tor-check-card h3 { margin: 0.55rem 0 0.32rem; font-size: 0.85rem; line-height: 1.24; }.ddl-tor-check-card p { margin: 0; font-size: 0.68rem; }
.ddl-tor-rulebook { padding: 0; }.ddl-tor-rulebook > div { padding: 0.8rem; }
.ddl-tor-method-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0.7rem; }
.ddl-tor-method-grid .ddl-tor-card { margin: 0; }.ddl-tor-method-grid p { margin: 0.4rem 0 0; font-size: 0.74rem; }
.ddl-tor-report-answer { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 0.8rem; }
.ddl-tor-report-answer strong { font-size: 1.25rem; }.ddl-tor-report-answer span { color: var(--ddl-tor-muted); }
.ddl-tor-analysis-empty { min-height: 310px; }

@media (max-width: 980px) {
  .ddl-tor-map-layout { grid-template-columns: 1fr; grid-template-areas: "controls" "map"; }
  .ddl-tor-map-card { grid-area: map; }.ddl-tor-map-controls { grid-area: controls; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ddl-tor-check-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 767px) {
  /* The flex scroller that used to live here showed 1 of 6 destinations on a
     phone. The shared 3x2 grid above shows all six; this override made that
     rule dead code below 721px. Removed so the product's central claim -
     three workspaces, same six sections - is visible on the device the first
     recipient actually holds. */
  body:has(.ddl-tor-page) .ddl-main-workspace { padding-top: 1rem; }
  .ddl-tor-page { font-size: 0.92rem; }.ddl-tor-route-head { align-items: flex-start; }
  .ddl-tor-route-copy :is(h1, h2) { font-size: 2rem; }.ddl-tor-route-copy > p { font-size: 0.85rem; }
  .ddl-tor-start-page { padding: 0.85rem; }.ddl-tor-start-grid { grid-template-columns: 1fr; }
  .ddl-tor-start-task { min-height: 112px; grid-template-columns: 4px 48px minmax(0,1fr) auto; gap: 0.68rem; padding-right: 0.75rem; }
  .ddl-tor-start-icon { width: 44px; height: 44px; }.ddl-tor-start-copy strong { font-size: 1rem; }
  /* Stays pinned. The phone is where a long queue scrolls furthest and where
     "Viewing SR-013" is most load-bearing; it compacts below rather than
     un-pinning. */
  .ddl-tor-context { flex-direction: column; align-items: stretch; margin: -1rem 0 0.8rem; }
  .ddl-tor-context-summary { white-space: normal; }.ddl-tor-context-controls { min-width: 0; width: 100%; }
  .ddl-tor-answer-row, .ddl-tor-health-grid { grid-template-columns: 1fr; }
  .ddl-tor-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ddl-tor-stat { padding: 0.55rem; }.ddl-tor-stat strong { font-size: 1rem; }.ddl-tor-stat span { font-size: 0.68rem; }
  .ddl-tor-dt-bottom { flex-direction: column; align-items: flex-start; }
  .ddl-tor-roster-controls { align-items: flex-start; flex-direction: column; gap: 0; }
  .ddl-tor-dossier-identity { grid-template-columns: 92px 1fr; }.ddl-tor-scute-diagram { width: 88px; }
  .ddl-tor-dossier-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }.ddl-tor-dossier-grid { grid-template-columns: 1fr; }
  .ddl-tor-dossier-tabs .shiny-options-group { display: grid; grid-template-columns: 1fr; }
  .ddl-tor-dossier-tabs .radio-inline, .ddl-tor-dossier-tabs .form-check-inline { width: 100%; min-height: 44px; }
  .ddl-tor-reference-grid { grid-template-columns: 1fr; }.ddl-tor-reference-image img { height: 230px; }
  .ddl-tor-map-controls { grid-template-columns: 1fr; }
  .ddl-tor-chart svg { min-height: 240px; }.ddl-tor-check-grid, .ddl-tor-method-grid { grid-template-columns: 1fr; }
  .ddl-tor-check-card { min-height: 0; }.ddl-tor-data-tabs { margin-inline: -0.15rem; }
}

@media (max-width: 430px) {
  .ddl-tor-stats { grid-template-columns: 1fr; }.ddl-tor-dossier-facts { grid-template-columns: 1fr 1fr; }
  .ddl-tor-context-controls { flex-direction: column; align-items: stretch; }.ddl-tor-context-dossier { width: 100%; }
  .ddl-tor-dossier-nav { grid-template-columns: 1fr 1fr; }.ddl-tor-dossier-nav > strong { grid-column: 1/-1; grid-row: 1; }
  .ddl-tor-route-head > .ddl-tor-pill { margin-top: 0.1rem; }
}

@media (prefers-reduced-motion: no-preference) {
  html.ddl-motion-ok .ddl-tor-page { animation: ddl-tor-page-in 260ms cubic-bezier(.2,.8,.2,1) both; }
  html.ddl-motion-ok .ddl-tor-start-task, html.ddl-motion-ok .ddl-tor-card,
  html.ddl-motion-ok .ddl-tor-btn {
    transition: transform 170ms cubic-bezier(.2,.8,.2,1), box-shadow 170ms ease,
      border-color 170ms ease, background-color 170ms ease;
  }
}

@keyframes ddl-tor-page-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* Tortoise ships the same Print button as its two siblings and, until this
   block, none of their print treatment: the nav rail and the map sidebar all
   went to paper. Matches the Invasive and Restoration
   blocks; the shared provenance rules at the end of the sheet keep the filter
   line on the page. */
@media print {
  body:has(.ddl-tor-page) { background: #fff; }
  body:has(.ddl-tor-page) .ddl-workspace-nav,
  body:has(.ddl-tor-page) .ddl-cover-signin,
  body:has(.ddl-tor-page) .ddl-footer-workspace,
  .ddl-tor-context-controls,
  .ddl-tor-actions,
  .ddl-tor-map-controls { display: none !important; }
  .ddl-tor-page,
  .ddl-tor-card,
  .ddl-tor-start-page { max-width: none; border-color: #cbc4cd; box-shadow: none; background: #fff; }
  .ddl-tor-context {
    position: static;
    margin: 0 0 0.4rem;
    border-color: #cbc4cd;
    box-shadow: none;
    backdrop-filter: none;
    background: #fff;
  }
  .ddl-tor-table-scroll { overflow: visible; }
  .ddl-tor-table { min-width: 0; font-size: 8pt; }
  .ddl-tor-page table.dataTable { width: 100% !important; }
  /* The provenance line, print-only, standing where the controls were: one
     compact heading of ink on white. Grey reads on a lit screen and vanishes
     on paper, which is the one place this sentence has to survive. */
  .ddl-tor-page .ddl-print-provenance {
    display: block;
    margin: 0 0 0.34rem;
    padding-bottom: 0.18rem;
    border-bottom: 1pt solid #000;
    color: #000;
    font-size: 9pt;
    line-height: 1.35;
  }
  /* Hidden only in the card the line replaces it in. The roster and records
     cards print the same filter class with no provenance of their own; hiding
     those would strip the record instead of restating it. */
  .ddl-tor-card:has(.ddl-print-provenance)
    :is(.ddl-tor-filter-row, .ddl-tor-queue-actions) { display: none !important; }
  .ddl-tor-map-card,
  .ddl-tor-chart,
  .ddl-tor-selected { break-inside: avoid; }
  .ddl-tor-map-card,
  .ddl-tor-chart svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ==========================================================================
   INVASIVE PLANTS PRODUCT WORKSPACE
   Fresh, demo-owned field-atlas treatment. Every rule is rooted in the
   product marker so this six-route workspace cannot restyle Tortoise or the
   still-independent Restoration surface.
   ========================================================================== */
body:has(.ddl-inv-product) {
  --ddl-inv-product-night: #102c34;
  --ddl-inv-product-night-2: #173d42;
  --ddl-inv-product-ink: #18343a;
  --ddl-inv-product-muted: #526266;
  --ddl-inv-product-bone: #f1eddf;
  --ddl-inv-product-paper: #fffdf4;
  --ddl-inv-product-line: rgba(24, 52, 58, 0.15);
  --ddl-inv-product-agave: #3d786c;
  --ddl-inv-product-sage: #7d9d6c;
  --ddl-inv-product-gold: #d0a557;
  --ddl-inv-product-rust: #ad5943;
  --ddl-inv-product-sky: #6e9aa2;
  --ddl-project-night: var(--ddl-inv-product-night);
  --ddl-project-paper: #f7f0df;
  --ddl-project-accent: var(--ddl-inv-product-gold);
  --ddl-project-accent-2: var(--ddl-inv-product-sage);
  --ddl-project-line: rgba(242, 236, 218, 0.16);
  color: var(--ddl-inv-product-ink);
  background:
    radial-gradient(circle at 6% 0%, rgba(62, 122, 108, 0.13), transparent 29rem),
    radial-gradient(circle at 96% 8%, rgba(208, 165, 87, 0.1), transparent 26rem),
    linear-gradient(rgba(24, 52, 58, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 52, 58, 0.025) 1px, transparent 1px),
    var(--ddl-inv-product-bone);
  background-size: auto, auto, 48px 48px, 48px 48px, auto;
}
body:has(.ddl-inv-product) > .container-fluid {
  max-width: 1480px;
  padding-inline: clamp(0.75rem, 1.3vw, 1.1rem);
}
body:has(.ddl-inv-product) .demo-mark-strip-workspace {
  min-height: 24px;
  width: max-content;
  margin: 0 0 0.35rem;
  padding: 0.18rem 0.48rem;
  border: 1px solid rgba(24, 52, 58, 0.16);
  border-radius: 3px;
  color: var(--ddl-inv-product-muted);
  background: rgba(255, 253, 244, 0.76);
}
body:has(.ddl-inv-product) .demo-mark-workspace-text { color: inherit; font-size: 0.8rem; }
body:has(.ddl-inv-product) .ddl-header-workspace {
  min-height: 62px;
  margin: 0;
  padding: 0.52rem 0.82rem;
  color: #fbf6e8;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px 10px 0 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(125, 157, 108, 0.22), transparent 15rem),
    linear-gradient(108deg, var(--ddl-inv-product-night), #174047 68%, #102c34);
  box-shadow: 0 8px 24px rgba(10, 35, 40, 0.2);
}
body:has(.ddl-inv-product) .ddl-header-workspace .ddl-brand-name { color: #fffaf0; font-size: 1rem; }
body:has(.ddl-inv-product) .ddl-header-workspace .ddl-brand-org,
body:has(.ddl-inv-product) .ddl-header-workspace .ddl-cover-signin-note { color: rgba(255, 250, 240, 0.66); }
body:has(.ddl-inv-product) .ddl-header-workspace .ddl-brand-frame { stroke: rgba(255, 250, 240, 0.7); }
body:has(.ddl-inv-product) .ddl-header-workspace .ddl-brand-contour { stroke: var(--ddl-inv-product-sage); }
body:has(.ddl-inv-product) .ddl-header-workspace .ddl-brand-trail { stroke: var(--ddl-inv-product-gold); }
body:has(.ddl-inv-product) .ddl-header-workspace .ddl-brand-nodes circle {
  fill: var(--ddl-inv-product-gold);
  stroke: var(--ddl-inv-product-night);
}
body:has(.ddl-inv-product) .ddl-header-workspace .ddl-cover-signin-button {
  color: #fffaf0;
  border-color: rgba(255, 250, 240, 0.32);
  background: rgba(255, 255, 255, 0.035);
}

body:has(.ddl-inv-product) .ddl-workspace-nav {
  /* Identity stays VISIBLE — see the Tortoise nav note: the labelled
     "All projects" return is the explicit way back to the cover. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  min-height: 64px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--ddl-inv-product-line);
  border-top: 0;
  color: var(--ddl-inv-product-ink);
  background: rgba(255, 253, 244, 0.95);
  box-shadow: 0 8px 22px rgba(24, 52, 58, 0.08);
}
body:has(.ddl-inv-product) .ddl-workspace-home { color: var(--ddl-inv-product-ink); }
body:has(.ddl-inv-product) .ddl-workspace-home:is(:hover, :focus-visible) {
  color: var(--ddl-inv-product-agave); background: rgba(63, 106, 113, 0.08);
}
body:has(.ddl-inv-product) .ddl-workspace-route-scroll {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  padding: 0;
  overflow: visible;
}
body:has(.ddl-inv-product) .ddl-workspace-route {
  min-width: 0;
  min-height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.46rem;
  padding: 0.52rem 0.58rem;
  border: 1px solid rgba(24, 52, 58, 0.12);
  border-radius: 9px;
  color: var(--ddl-inv-product-ink);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 4px rgba(24, 52, 58, 0.05);
  text-align: center;
}
body:has(.ddl-inv-product) .ddl-workspace-route::after { display: none; }
body:has(.ddl-inv-product) .ddl-workspace-route-icon { display: inline-flex; color: var(--ddl-inv-product-agave); font-size: 1rem; }
body:has(.ddl-inv-product) .ddl-workspace-route-label { font-size: 0.8rem; font-weight: 760; }
body:has(.ddl-inv-product) .ddl-workspace-route:is(:hover, :focus-visible) {
  color: var(--ddl-inv-product-ink);
  border-color: rgba(61, 120, 108, 0.42);
  background: #fffef9;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(24, 52, 58, 0.1);
}
body:has(.ddl-inv-product) .ddl-workspace-route.is-on {
  color: #fffaf0;
  border-color: var(--ddl-inv-product-night-2);
  background: linear-gradient(135deg, var(--ddl-inv-product-night-2), #27584f);
  box-shadow: 0 7px 18px rgba(16, 44, 52, 0.19);
}
body:has(.ddl-inv-product) .ddl-workspace-route.is-on .ddl-workspace-route-icon { color: #e0bd74; }
body:has(.ddl-inv-product) .ddl-main-workspace { color: var(--ddl-inv-product-ink); padding: 1.45rem 0 0.75rem; }
body:has(.ddl-inv-product) .ddl-hubviews { display: none; }
body:has(.ddl-inv-product) .ddl-footer-workspace { color: var(--ddl-inv-product-muted); }
body:has(.ddl-inv-product) .ddl-footer-workspace-row { border-top-color: var(--ddl-inv-product-line); }
body:has(.ddl-inv-product) .ddl-footer-build > summary { color: var(--ddl-inv-product-muted); }

.ddl-inv-product {
  width: 100%;
  max-width: var(--ddl-measure);
  margin-inline: auto;
  color: var(--ddl-inv-product-ink);
  font-size: 0.92rem;
  line-height: 1.46;
}
.ddl-inv-product *, .ddl-inv-product *::before, .ddl-inv-product *::after { box-sizing: border-box; }
.ddl-inv-product :is(h1, h2, h3, h4) { color: var(--ddl-inv-product-ink); }
.ddl-inv-product p { color: var(--ddl-inv-product-muted); }
.ddl-inv-product a { text-underline-offset: 3px; }
.ddl-inv-product-route-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.9rem;
  padding-inline: 0.08rem;
}
.ddl-inv-product-route-copy { min-width: 0; }
.ddl-inv-product-route-copy :is(h1, h2) {
  margin: 0;
  font-size: clamp(1.9rem, 3.8vw, 3.1rem);
  font-family: var(--ddl-display); font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.012em;
  font-variant-numeric: lining-nums;
}
.ddl-inv-product-route-copy > p { max-width: 68ch; margin: 0.28rem 0 0; font-size: 0.92rem; }
.ddl-inv-product-eyebrow {
  margin: 0 0 0.2rem !important;
  /* The agave token measures 4.02-4.15:1 here at 14.4px. Darkened for the
     eyebrow only; the token itself is also a mark colour and must not move. */
  color: #2f6357 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.ddl-inv-product-card {
  min-width: 0;
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid var(--ddl-inv-product-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ddl-inv-product-paper) 96%, transparent);
  box-shadow: 0 1px 2px rgba(24, 52, 58, 0.05), 0 10px 30px rgba(24, 52, 58, 0.055);
}
.ddl-inv-product-card-head {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin: -0.1rem 0 0.75rem;
  padding-bottom: 0.62rem;
  border-bottom: 1px solid var(--ddl-inv-product-line);
}
.ddl-inv-product-card-head > :first-child,
.ddl-inv-product-card-title { min-width: 0; display: flex; align-items: center; gap: 0.48rem; }
.ddl-inv-product-card-title > svg { color: var(--ddl-inv-product-agave); font-size: 1rem; flex: 0 0 auto; }
.ddl-inv-product-card-head :is(h2, h3), .ddl-inv-product-card-title :is(h2, h3) {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
}
.ddl-inv-product-asof {
  color: var(--ddl-inv-product-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}
.ddl-inv-product-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.ddl-inv-product-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.78rem;
  border: 1px solid rgba(24, 52, 58, 0.21);
  border-radius: 8px;
  color: var(--ddl-inv-product-ink);
  background: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 750;
  cursor: pointer;
}
.ddl-inv-product-btn:is(:hover, :focus-visible) {
  color: var(--ddl-inv-product-ink);
  border-color: var(--ddl-inv-product-agave);
  background: #fffef9;
}
.ddl-inv-product-btn-primary {
  color: #fffaf0;
  border-color: var(--ddl-inv-product-night-2);
  background: var(--ddl-inv-product-night-2);
}
.ddl-inv-product-btn-primary:is(:hover, :focus-visible) { color: #fff; background: #27584f; }
.ddl-inv-product-btn.is-primary {
  color: #fffaf0;
  border-color: var(--ddl-inv-product-night-2);
  background: var(--ddl-inv-product-night-2);
}
.ddl-inv-product-btn.is-primary:is(:hover, :focus-visible) { color: #fff; background: #27584f; }
.ddl-inv-product-btn.is-disabled { opacity: 0.38; pointer-events: none; }
.ddl-inv-product-link,
.ddl-inv-product-review-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #2f6d62;
  font-weight: 770;
}
.ddl-inv-product-review-link { white-space: nowrap; text-decoration: none; }
.ddl-inv-product-pill {
  min-height: 28px;
  width: max-content;
  display: inline-flex;
  align-items: center;
  padding: 0.24rem 0.56rem;
  border: 1px solid var(--ddl-inv-product-line);
  border-radius: 999px;
  color: var(--ddl-inv-product-muted);
  background: rgba(255, 255, 255, 0.68);
  font-size: 0.68rem;
  font-weight: 790;
  white-space: nowrap;
}
.ddl-inv-product-pill.is-alert,
.ddl-inv-product-pill.is-due,
.ddl-inv-product-pill.is-attention { color: #833d2d; border-color: rgba(173, 89, 67, 0.36); background: rgba(173, 89, 67, 0.1); }
.ddl-inv-product-pill.is-watch { color: #77551c; border-color: rgba(208, 165, 87, 0.42); background: rgba(208, 165, 87, 0.14); }
.ddl-inv-product-pill.is-ok,
.ddl-inv-product-pill.is-complete { color: #315b4e; border-color: rgba(61, 120, 108, 0.4); background: rgba(61, 120, 108, 0.11); }
.ddl-inv-product-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.58rem; }
.ddl-inv-product-stat {
  min-width: 0;
  padding: 0.7rem 0.76rem;
  border-left: 3px solid rgba(24, 52, 58, 0.24);
  border-radius: 7px;
  background: rgba(24, 52, 58, 0.035);
}
.ddl-inv-product-stat.is-alert,
.ddl-inv-product-stat.is-attention { border-left-color: var(--ddl-inv-product-rust); }
.ddl-inv-product-stat.is-gold { border-left-color: var(--ddl-inv-product-gold); }
.ddl-inv-product-stat.is-agave { border-left-color: var(--ddl-inv-product-agave); }
.ddl-inv-product-stat strong {
  display: block;
  color: var(--ddl-inv-product-ink);
  font-size: 1.2rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.ddl-inv-product-stat span { display: block; margin-top: 0.2rem; color: var(--ddl-inv-product-muted); font-size: 0.68rem; line-height: 1.25; }
.ddl-inv-product-note {
  display: flex;
  align-items: flex-start;
  gap: 0.52rem;
  margin: 0 0 0.95rem;
  padding: 0.62rem 0.74rem;
  border: 1px solid rgba(61, 120, 108, 0.23);
  border-radius: 9px;
  color: var(--ddl-inv-product-ink);
  background: rgba(61, 120, 108, 0.075);
  /* Caption floor, matching .ddl-tor-card-caption: this is the honesty copy. */
  font-size: 0.85rem;
}
.ddl-inv-product-note > svg { margin-top: 0.1rem; color: var(--ddl-inv-product-agave); flex: 0 0 auto; }
.ddl-inv-product-note p { margin: 0; }
.ddl-inv-product-trustline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.34rem;
  margin: 0 0 0.85rem;
  padding: 0.62rem 0.74rem;
  border: 1px solid rgba(61, 120, 108, 0.2);
  border-radius: 9px;
  color: var(--ddl-inv-product-ink);
  background: rgba(61, 120, 108, 0.07);
  font-size: 0.85rem;
}
.ddl-inv-product-trustline > svg { color: var(--ddl-inv-product-agave); }
.ddl-inv-product-trustline > span { color: var(--ddl-inv-product-muted); }

/* Zero-read start surface */
.ddl-inv-product-start {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 2.4vw, 1.55rem);
  border: 1px solid var(--ddl-inv-product-line);
  border-radius: 20px;
  background:
    linear-gradient(116deg, rgba(255, 253, 244, 0.98), rgba(248, 246, 235, 0.92)),
    repeating-linear-gradient(0deg, transparent 0 33px, rgba(24, 52, 58, 0.025) 33px 34px);
  box-shadow: 0 16px 42px rgba(24, 52, 58, 0.09);
}
.ddl-inv-product-start::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -18% -8% auto auto;
  width: 260px;
  aspect-ratio: 1;
  border: 1px solid rgba(61, 120, 108, 0.12);
  border-radius: 45% 55% 64% 36% / 46% 38% 62% 54%;
  box-shadow: inset 0 0 0 24px rgba(61, 120, 108, 0.025), inset 0 0 0 58px rgba(208, 165, 87, 0.025);
  transform: rotate(-18deg);
  pointer-events: none;
}
.ddl-inv-product-start > * { position: relative; z-index: 1; }
.ddl-inv-product-start .ddl-inv-product-route-copy :is(h1, h2) { font-size: clamp(2.35rem, 4.6vw, 3.85rem); }
.ddl-inv-product-start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.72rem; }
.ddl-inv-product-start-task {
  position: relative;
  min-height: 126px;
  display: grid;
  grid-template-columns: 4px 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  overflow: hidden;
  padding: 1rem 1rem 1rem 0;
  border: 1px solid var(--ddl-inv-product-line);
  border-radius: 18px;
  color: var(--ddl-inv-product-ink);
  background: rgba(255, 254, 249, 0.94);
  box-shadow: 0 6px 18px rgba(24, 52, 58, 0.055);
  text-decoration: none;
}
.ddl-inv-product-start-rail { align-self: stretch; width: 4px; border-radius: 0 4px 4px 0; background: var(--ddl-inv-product-agave); }
.ddl-inv-product-start-icon {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff9eb;
  background: linear-gradient(145deg, #397267, var(--ddl-inv-product-night));
  box-shadow: 0 8px 18px rgba(16, 44, 52, 0.18);
  font-size: 1.18rem;
}
.ddl-inv-product-start-copy { min-width: 0; display: flex; flex-direction: column; }
.ddl-inv-product-start-copy > span:first-child {
  color: var(--ddl-inv-product-agave);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ddl-inv-product-start-copy strong { margin-top: 0.1rem; font-size: 1.08rem; line-height: 1.16; }
.ddl-inv-product-start-copy > span:last-child { margin-top: 0.25rem; color: var(--ddl-inv-product-muted); font-size: 0.8rem; }
.ddl-inv-product-start-arrow { color: var(--ddl-inv-product-agave); font-size: 1.1rem; }
.ddl-inv-product-start-task:is(:hover, :focus-visible) {
  color: var(--ddl-inv-product-ink);
  border-color: rgba(61, 120, 108, 0.46);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(24, 52, 58, 0.12);
}
.ddl-inv-product-start-links { display: flex; flex-wrap: wrap; gap: 0.52rem; margin-top: 1rem; font-size: 0.74rem; }
.ddl-inv-product-start-links span:first-child { color: var(--ddl-inv-product-muted); font-weight: 730; }
.ddl-inv-product-start-links a { color: #2f6d62; }

/* Shared patch context */
.ddl-inv-product-context {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: -1.45rem 0 1rem;
  padding: 0.55rem 0.72rem;
  border: 1px solid var(--ddl-inv-product-line);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: rgba(255, 253, 244, 0.96);
  box-shadow: 0 7px 20px rgba(24, 52, 58, 0.085);
}
.ddl-inv-product-context-summary { margin: 0 0 0.18rem !important; color: var(--ddl-inv-product-muted); font-size: 0.68rem; font-style: italic; white-space: nowrap; }
.ddl-inv-product-context-summary > svg { margin-right: 0.25rem; color: var(--ddl-inv-product-agave); }
.ddl-inv-product-context-controls { min-width: min(410px, 100%); display: flex; align-items: flex-end; gap: 0.55rem; }
.ddl-inv-product-context-controls :is(.form-group, .shiny-input-container) { flex: 1 1 260px; margin: 0; }
.ddl-inv-product-context-controls label { margin-bottom: 0.12rem; color: var(--ddl-inv-product-ink); font-size: 0.68rem; font-weight: 770; }
.ddl-inv-product-context-controls .selectize-control { margin-bottom: 0; }
.ddl-inv-product-context-controls .selectize-input { min-height: 40px; border-color: var(--ddl-inv-product-line); border-radius: 8px; box-shadow: none; }
.ddl-inv-product-context > p {
  margin: 0 0 0.18rem;
  color: var(--ddl-inv-product-muted);
  font-size: 0.68rem;
  font-style: italic;
}
.ddl-inv-product-context > p > svg { margin-right: 0.25rem; color: var(--ddl-inv-product-agave); }
.ddl-inv-product-context > div {
  min-width: min(410px, 100%);
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
}
.ddl-inv-product-context > div :is(.form-group, .shiny-input-container) { flex: 1 1 260px; margin: 0; }
.ddl-inv-product-context > div label { margin-bottom: 0.12rem; color: var(--ddl-inv-product-ink); font-size: 0.68rem; font-weight: 770; }
.ddl-inv-product-context > div .selectize-control { margin-bottom: 0; }
.ddl-inv-product-context > div .selectize-input { min-height: 40px; border-color: var(--ddl-inv-product-line); border-radius: 8px; box-shadow: none; }

/* Inputs, filters and table twins */
.ddl-inv-product .radio-inline,
.ddl-inv-product .form-check-inline {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin: 0.15rem 0.25rem 0.15rem 0;
  padding: 0.4rem 0.64rem;
  border: 1px solid var(--ddl-inv-product-line);
  border-radius: 8px;
  color: var(--ddl-inv-product-ink);
  background: rgba(255, 255, 255, 0.66);
  font-size: 0.74rem;
  cursor: pointer;
}
.ddl-inv-product .radio-inline:has(input:checked),
.ddl-inv-product .form-check-inline:has(input:checked) {
  color: #fffaf0;
  border-color: var(--ddl-inv-product-night-2);
  background: var(--ddl-inv-product-night-2);
}
.ddl-inv-product .radio-inline input,
.ddl-inv-product .form-check-inline input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}
.ddl-inv-product .radio-inline:has(input:focus-visible),
.ddl-inv-product .form-check-inline:has(input:focus-visible) { outline: 3px solid rgb(63, 106, 113); outline-offset: 2px; }
.ddl-inv-product :is(.form-control, .selectize-input, .selectize-dropdown, .dataTables_wrapper input, .dataTables_wrapper select) {
  color: var(--ddl-inv-product-ink) !important;
  border-color: var(--ddl-inv-product-line) !important;
  background: #fffdf4 !important;
  color-scheme: light;
}
.ddl-inv-product-table-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--ddl-inv-product-line); border-radius: 10px; }
.ddl-inv-product-table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 0.74rem; }
.ddl-inv-product-table :is(th, td) { padding: 0.6rem 0.68rem; border-bottom: 1px solid var(--ddl-inv-product-line); text-align: left; vertical-align: middle; }
.ddl-inv-product-table th {
  color: #315e58;
  background: rgba(24, 52, 58, 0.045);
  font-size: 0.62rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.ddl-inv-product-table tbody tr:last-child td { border-bottom: 0; }
.ddl-inv-product-table tbody tr:nth-child(even) td { background: rgba(61, 120, 108, 0.028); }
.ddl-inv-product-table tbody tr:is(:hover, :focus-within) td { background: rgba(61, 120, 108, 0.075); }
.ddl-inv-product-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ddl-inv-product table.dataTable { border: 1px solid var(--ddl-inv-product-line) !important; border-radius: 9px; overflow: hidden; }
.ddl-inv-product table.dataTable thead th { color: #315e58; background: rgba(24, 52, 58, 0.045); font-size: 0.62rem; letter-spacing: 0.035em; text-transform: uppercase; }
.ddl-inv-product table.dataTable tbody :is(tr, td) { color: var(--ddl-inv-product-ink) !important; background: var(--ddl-inv-product-paper) !important; }
.ddl-inv-product table.dataTable tbody tr:nth-child(odd) td { background: #faf8ed !important; }
.ddl-inv-product table.dataTable tbody tr:hover td { background: #eff3e9 !important; }
.ddl-inv-product table.dataTable tbody td { padding-block: 0.5rem; vertical-align: middle; font-size: 0.74rem; }
.ddl-inv-product .dataTables_wrapper {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.ddl-inv-product .dataTables_scroll { max-width: 100%; }
.ddl-inv-product .dataTables_scrollBody { overflow-x: auto !important; }
.ddl-inv-product .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  color: #fff !important;
  border-color: var(--ddl-inv-product-night-2) !important;
  background: var(--ddl-inv-product-night-2) !important;
}
.ddl-inv-product-dt-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.5rem;
  color: var(--ddl-inv-product-muted);
  font-size: 0.68rem;
}
.ddl-inv-product-dt { width: 100% !important; }
.ddl-inv-product-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.65rem; margin: 0 0 0.7rem; }
.ddl-inv-product-filter-row .form-group { min-width: 185px; margin: 0; }

/* Action queue and patch record */
.ddl-inv-product-action-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr); gap: 0.85rem; align-items: start; }
.ddl-inv-product-hero {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 1rem;
  border-left: 4px solid var(--ddl-inv-product-agave);
}
.ddl-inv-product-hero h2 { margin: 0; font-size: clamp(1.28rem, 2.4vw, 1.72rem); }
.ddl-inv-product-hero p:not(.ddl-inv-product-eyebrow) { margin: 0.2rem 0 0; }
.ddl-inv-product-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) repeat(3, minmax(150px, 0.8fr));
  gap: 0.58rem;
  margin: 0 0 0.7rem;
  padding: 0.65rem;
  border: 1px solid var(--ddl-inv-product-line);
  border-radius: 9px;
  background: rgba(24, 52, 58, 0.025);
}
.ddl-inv-product-filters .form-group { min-width: 0; margin: 0; }
.ddl-inv-product-filters label { color: var(--ddl-inv-product-ink); font-size: 0.68rem; font-weight: 760; }
.ddl-inv-product-queue-actions {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}
.ddl-inv-product-queue-actions > :first-child { margin-right: auto; color: var(--ddl-inv-product-muted); font-size: 0.68rem; }
.ddl-inv-product-queue-status { margin: 0; color: var(--ddl-inv-product-muted); font-size: 0.68rem; }
.ddl-inv-product-orientation { padding: 0; overflow: hidden; }
.ddl-inv-product-orientation > summary,
.ddl-inv-product-roster > summary,
.ddl-inv-product-map-ledger > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.68rem 0.85rem;
  color: var(--ddl-inv-product-ink);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 790;
}
.ddl-inv-product-orientation > :not(summary) { margin-inline: 0.85rem; }
.ddl-inv-product-orientation > :last-child { margin-bottom: 0.85rem; }
.ddl-inv-product-queue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin-bottom: 0.8rem; }
.ddl-inv-product-queue-card {
  min-width: 0;
  padding: 0.82rem;
  border: 1px solid var(--ddl-inv-product-line);
  border-top: 4px solid var(--ddl-inv-product-agave);
  border-radius: 11px;
  background: rgba(255, 254, 248, 0.92);
  box-shadow: 0 6px 18px rgba(24, 52, 58, 0.055);
}
.ddl-inv-product-queue-card.is-alert { border-top-color: var(--ddl-inv-product-rust); }
.ddl-inv-product-queue-card.is-watch { border-top-color: var(--ddl-inv-product-gold); }
.ddl-inv-product-queue-card h3 { margin: 0.5rem 0 0.3rem; font-size: 0.92rem; }
.ddl-inv-product-queue-card p { margin: 0; font-size: 0.74rem; }
.ddl-inv-product-queue-card strong { font-variant-numeric: tabular-nums; }
.ddl-inv-product-selected {
  scroll-margin-top: 90px;
  border-color: rgba(61, 120, 108, 0.34);
  box-shadow: 0 1px 2px rgba(24, 52, 58, 0.05), 0 12px 34px rgba(61, 120, 108, 0.1);
}
.ddl-inv-product-selected:focus { outline: 3px solid rgb(63, 106, 113); outline-offset: 3px; }
.ddl-inv-product-selected-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.ddl-inv-product-selected-head h2 { margin: 0; font-size: 1.4rem; }
.ddl-inv-product-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.62rem; }
.ddl-inv-product-detail {
  min-width: 0;
  padding: 0.68rem;
  border-radius: 8px;
  background: rgba(24, 52, 58, 0.035);
}
.ddl-inv-product-detail span { display: block; color: var(--ddl-inv-product-muted); font-size: 0.62rem; }
.ddl-inv-product-detail strong { display: block; margin-top: 0.14rem; color: var(--ddl-inv-product-ink); font-size: 0.8rem; }
.ddl-inv-product-dossier {
  scroll-margin-top: 88px;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ddl-inv-product-line);
}
.ddl-inv-product-dossier:focus { outline: 3px solid rgb(63, 106, 113); outline-offset: 3px; }
.ddl-inv-product-dossier-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.ddl-inv-product-dossier-title h2 { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 1.42rem; }
.ddl-inv-product-dossier-title h2 > svg { color: var(--ddl-inv-product-agave); }
.ddl-inv-product-dossier-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  margin: 0.72rem 0;
}
.ddl-inv-product-dossier-nav > strong { color: var(--ddl-inv-product-ink); text-align: center; }
.ddl-inv-product-dossier-tabs { margin-bottom: 0.75rem; }
.ddl-inv-product-dossier-tabs .shiny-options-group { display: flex; flex-wrap: wrap; gap: 0.16rem; }
.ddl-inv-product-dossier-tabs :is(.radio-inline, .form-check-inline) { min-height: 44px; }
.ddl-inv-product-map-card { padding: 0.85rem; }
.ddl-inv-product-map-ledger { padding: 0; overflow: hidden; }
.ddl-inv-product-map-ledger > .shiny-html-output,
.ddl-inv-product-map-ledger > div { padding: 0 0.85rem 0.85rem; }
.ddl-inv-product-locator { padding: 0.72rem; }
.ddl-inv-product-locator > p { margin: 0.45rem 0 0; font-size: 0.62rem; }

/* Outcomes and scientific table twins */
.ddl-inv-product-outcome-grid { display: grid; grid-template-columns: minmax(225px, 0.42fr) minmax(0, 1.58fr); gap: 0.7rem; margin-bottom: 0.9rem; align-items: start; }
.ddl-inv-product-outcome-menu { position: sticky; top: 84px; }
.ddl-inv-product-outcome-menu .shiny-options-group { display: grid; gap: 0.24rem; }
.ddl-inv-product-outcome-menu :is(.radio-inline, .form-check-inline) { width: 100%; margin: 0; }
.ddl-inv-product-outcome-view { min-width: 0; }
.ddl-inv-product-outcome-card {
  min-width: 0;
  padding: 0.86rem;
  border: 1px solid var(--ddl-inv-product-line);
  border-radius: 11px;
  background: rgba(255, 254, 248, 0.92);
}
.ddl-inv-product-outcome-card > span { color: var(--ddl-inv-product-muted); font-size: 0.62rem; }
.ddl-inv-product-outcome-card > strong { display: block; margin-top: 0.14rem; color: var(--ddl-inv-product-ink); font-size: 1.28rem; font-variant-numeric: tabular-nums; }
.ddl-inv-product-outcome-card > p { margin: 0.28rem 0 0; font-size: 0.68rem; }
.ddl-inv-product-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.78rem; }
.ddl-inv-product-chart { width: 100%; margin: 0; }
.ddl-inv-product-chart svg { width: 100%; min-height: 285px; display: block; }
.ddl-inv-product-chart-title { fill: var(--ddl-inv-product-ink); font: 700 15px system-ui, sans-serif; }
.ddl-inv-product-chart-sub { fill: var(--ddl-inv-product-muted); font: 11px system-ui, sans-serif; }
.ddl-inv-product-chart-gridline { stroke: rgba(24, 52, 58, 0.12); stroke-width: 1; }
.ddl-inv-product-chart-axis-line { stroke: rgba(24, 52, 58, 0.32); stroke-width: 1; }
.ddl-inv-product-chart-axis { fill: var(--ddl-inv-product-muted); font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.ddl-inv-product-chart-bar { fill: var(--ddl-inv-product-agave); }
.ddl-inv-product-chart-bar.is-later { fill: var(--ddl-inv-product-sage); }
.ddl-inv-product-chart-bar.is-unknown { fill: rgba(97, 113, 117, 0.44); stroke: rgba(24, 52, 58, 0.4); stroke-dasharray: 4 3; }
.ddl-inv-product-chart-line { fill: none; stroke: var(--ddl-inv-product-agave); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ddl-inv-product-chart-point { fill: #fffdf4; stroke: var(--ddl-inv-product-agave); stroke-width: 3; }
.ddl-inv-product-chart-track { fill: rgba(24, 52, 58, 0.07); }
.ddl-inv-product-chart-label { fill: var(--ddl-inv-product-muted); font: 10px system-ui, sans-serif; }
.ddl-inv-product-chart-value { fill: var(--ddl-inv-product-ink); font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.ddl-inv-product-chart figcaption { margin: 0.2rem 0 0; color: var(--ddl-inv-product-muted); font-size: 0.68rem; }
.ddl-inv-product-chart-twin { margin-top: 0.5rem; border-top: 1px solid var(--ddl-inv-product-line); }
.ddl-inv-product-chart-twin > summary,
.ddl-inv-product-fold > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.56rem 0.2rem;
  color: var(--ddl-inv-product-ink);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 780;
}

/* Data & methods room */
.ddl-inv-product-breadcrumb {
  min-height: 28px;
  display: flex;
  align-items: center;
  margin: -0.8rem 0 0.7rem;
  color: var(--ddl-inv-product-muted);
  font-size: 0.68rem;
}
.ddl-inv-product-breadcrumb > div,
.ddl-inv-product-breadcrumb .shiny-html-output { display: flex; align-items: center; gap: 0.34rem; }
.ddl-inv-product-data-tabs { overflow-x: auto; margin-bottom: 0.8rem; scrollbar-width: thin; }
.ddl-inv-product-data-tabs .form-group { min-width: max-content; margin: 0; }
.ddl-inv-product-data-tabs .shiny-options-group { display: flex; flex-wrap: nowrap; gap: 0.15rem; }
.ddl-inv-product-data-tabs :is(.radio-inline, .form-check-inline) { min-height: 44px; white-space: nowrap; }
.ddl-inv-product-data-panel > .ddl-inv-product-route-head { margin-top: 0.35rem; }
.ddl-inv-product-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin-bottom: 0.8rem; }
.ddl-inv-product-check-card {
  min-height: 145px;
  padding: 0.82rem;
  border: 1px solid var(--ddl-inv-product-line);
  border-radius: 10px;
  background: rgba(255, 253, 244, 0.92);
}
.ddl-inv-product-check-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ddl-inv-product-check-severity {
  color: var(--ddl-inv-product-muted);
  font-size: 0.62rem;
  font-weight: 780;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.ddl-inv-product-check-card h3 { margin: 0.55rem 0 0.32rem; font-size: 0.85rem; line-height: 1.24; }
.ddl-inv-product-check-card p { margin: 0; font-size: 0.68rem; }
.ddl-inv-product-check-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
  margin: 0 0 0.48rem;
}
.ddl-inv-product-check-counts span {
  display: grid;
  padding: 0.42rem 0.48rem;
  border: 1px solid var(--ddl-inv-product-line);
  border-radius: 8px;
  color: var(--ddl-inv-product-muted);
  background: rgba(24, 52, 58, 0.025);
  font-size: 0.62rem;
}
.ddl-inv-product-check-counts strong { color: var(--ddl-inv-product-ink); font-size: 0.85rem; }
.ddl-inv-product-rulebook { padding: 0; overflow: hidden; }
.ddl-inv-product-rulebook > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0.62rem 0.82rem;
  color: var(--ddl-inv-product-ink);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 790;
}
.ddl-inv-product-rulebook > :not(summary) { margin-inline: 0.82rem; }
.ddl-inv-product-rulebook > :last-child { margin-bottom: 0.82rem; }
.ddl-inv-product-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.ddl-inv-product-method-grid .ddl-inv-product-card { margin: 0; }
.ddl-inv-product-method-grid p { margin: 0.4rem 0 0; font-size: 0.74rem; }
.ddl-inv-product-report-answer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.8rem;
}
.ddl-inv-product-report-answer strong { color: var(--ddl-inv-product-ink); font-size: 1.2rem; }
.ddl-inv-product-report-answer span { color: var(--ddl-inv-product-muted); }
.ddl-inv-product-empty {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px dashed rgba(24, 52, 58, 0.24);
  border-radius: 10px;
  color: var(--ddl-inv-product-muted);
  text-align: center;
  background: rgba(255, 255, 255, 0.42);
}
.ddl-inv-product-empty > svg { color: var(--ddl-inv-product-agave); font-size: 1.45rem; }
.ddl-inv-product-empty :is(h2, h3, p) { margin: 0; }
.ddl-inv-product-empty :is(h2, h3) { font-size: 1rem; }
.ddl-inv-product-empty p { font-size: 0.74rem; }

@media (max-width: 1040px) {
  .ddl-inv-product-action-layout { grid-template-columns: 1fr; }
  .ddl-inv-product-map-card { grid-area: map; }
}

@media (max-width: 767px) {
  body:has(.ddl-inv-product) .ddl-main-workspace { padding-top: 1rem; }
  .ddl-inv-product { min-width: 0; font-size: 0.92rem; }
  .ddl-inv-product-route-head { align-items: flex-start; }
  .ddl-inv-product-route-copy :is(h1, h2) { font-size: 2rem; }
  .ddl-inv-product-route-copy > p { font-size: 0.85rem; }
  .ddl-inv-product-start { padding: 0.85rem; }
  .ddl-inv-product-start-grid { grid-template-columns: 1fr; }
  .ddl-inv-product-start-task { min-height: 110px; grid-template-columns: 4px 48px minmax(0, 1fr) auto; gap: 0.68rem; padding-right: 0.75rem; }
  .ddl-inv-product-start-icon { width: 44px; height: 44px; }
  .ddl-inv-product-start-copy strong { font-size: 1rem; }
  .ddl-inv-product-context { flex-direction: column; align-items: stretch; margin: -1rem 0 0.8rem; }
  .ddl-inv-product-context-summary { white-space: normal; }
  .ddl-inv-product-context-controls { min-width: 0; width: 100%; }
  .ddl-inv-product-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ddl-inv-product-stat { padding: 0.56rem; }
  .ddl-inv-product-stat strong { font-size: 1rem; }
  .ddl-inv-product-stat span { font-size: 0.68rem; }
  .ddl-inv-product-queue-grid,
  .ddl-inv-product-outcome-grid { grid-template-columns: 1fr; }
  .ddl-inv-product-hero { grid-template-columns: 1fr; }
  .ddl-inv-product-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ddl-inv-product-chart-grid,
  .ddl-inv-product-method-grid,
  .ddl-inv-product-check-grid { grid-template-columns: 1fr; }
  .ddl-inv-product-chart svg { min-height: 240px; }
  .ddl-inv-product-check-card { min-height: 0; }
  .ddl-inv-product-data-tabs { margin-inline: -0.15rem; }
  .ddl-inv-product-table-scroll { overscroll-behavior-inline: contain; }
  .ddl-inv-product-dossier-title { align-items: flex-start; }
  .ddl-inv-product-dt-bottom { flex-wrap: wrap; }
  .ddl-inv-product .dataTables_paginate { max-width: 100%; overflow-x: auto; }
}

@media (max-width: 430px) {
  .ddl-inv-product-stats { grid-template-columns: 1fr; }
  .ddl-inv-product-context-controls { flex-direction: column; align-items: stretch; }
  .ddl-inv-product-context-controls .ddl-inv-product-btn { width: 100%; }
  .ddl-inv-product-detail-grid { grid-template-columns: 1fr; }
  .ddl-inv-product-dossier-nav { grid-template-columns: 1fr 1fr; }
  .ddl-inv-product-dossier-nav > strong { grid-column: 1 / -1; grid-row: 1; }
  .ddl-inv-product-dossier-title { flex-direction: column; }
  .ddl-inv-product-dossier-tabs .shiny-options-group { display: grid; grid-template-columns: 1fr; }
  .ddl-inv-product-dossier-tabs :is(.radio-inline, .form-check-inline) { width: 100%; margin: 0; }
  .ddl-inv-product-route-head > .ddl-inv-product-pill { margin-top: 0.1rem; }
  .ddl-inv-product-filter-row { display: grid; grid-template-columns: 1fr; }
  .ddl-inv-product-filter-row .form-group { min-width: 0; width: 100%; }
  .ddl-inv-product-filters { grid-template-columns: 1fr; }
  .ddl-inv-product-queue-actions { align-items: stretch; }
  .ddl-inv-product-queue-actions > :first-child { width: 100%; margin-right: 0; }
  .ddl-inv-product .radio-inline,
  .ddl-inv-product .form-check-inline,
  .ddl-inv-product button,
  .ddl-inv-product select,
  .ddl-inv-product input:not([type="hidden"]) { min-height: 44px; }
}

@media (prefers-reduced-motion: no-preference) {
  html.ddl-motion-ok .ddl-inv-product { animation: ddl-inv-product-page-in 270ms cubic-bezier(.2, .8, .2, 1) both; }
  html.ddl-motion-ok .ddl-inv-product-start-task,
  html.ddl-motion-ok .ddl-inv-product-card,
  html.ddl-motion-ok .ddl-inv-product-queue-card,
  html.ddl-motion-ok .ddl-inv-product-btn {
    transition: transform 175ms cubic-bezier(.2, .8, .2, 1), box-shadow 175ms ease,
      border-color 175ms ease, background-color 175ms ease;
  }
  html.ddl-motion-ok .ddl-inv-product-selected.is-revealed {
    animation: ddl-inv-product-selected-in 420ms cubic-bezier(.16, .82, .2, 1) both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ddl-inv-product *, .ddl-inv-product *::before, .ddl-inv-product *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  body:has(.ddl-inv-product) { background: #fff; }
  body:has(.ddl-inv-product) .ddl-workspace-nav,
  body:has(.ddl-inv-product) .ddl-cover-signin,
  body:has(.ddl-inv-product) .ddl-footer-workspace,
  .ddl-inv-product-context-controls,
  .ddl-inv-product-actions { display: none !important; }
  /* The filter row and the queue status are NOT hidden — see the shared print
     provenance block at the end of this sheet. */
  .ddl-inv-product-context {
    position: static;
    margin: 0 0 0.4rem;
    border-color: #c8d0ca;
    box-shadow: none;
    backdrop-filter: none;
    background: #fff;
  }
  .ddl-inv-product,
  .ddl-inv-product-card,
  .ddl-inv-product-start { max-width: none; border-color: #c8d0ca; box-shadow: none; background: #fff; }
  .ddl-inv-product-table-scroll { overflow: visible; }
  .ddl-inv-product-table { min-width: 0; font-size: 8pt; }
  .ddl-inv-product table.dataTable { width: 100% !important; }
  /* The provenance line, print-only, standing where the controls were: one
     compact heading of ink on white. Grey reads on a lit screen and vanishes
     on paper, which is the one place this sentence has to survive. */
  .ddl-inv-product .ddl-print-provenance {
    display: block;
    margin: 0 0 0.34rem;
    padding-bottom: 0.18rem;
    border-bottom: 1pt solid #000;
    color: #000;
    font-size: 9pt;
    line-height: 1.35;
  }
  /* Hidden only in the card the line replaces it in. The patch and records
     cards print the same filter classes with no provenance of their own;
     hiding those would strip the record instead of restating it. */
  .ddl-inv-product-card:has(.ddl-print-provenance)
    :is(.ddl-inv-product-filters, .ddl-inv-product-filter-row,
        .ddl-inv-product-queue-actions) { display: none !important; }
}

@keyframes ddl-inv-product-page-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
@keyframes ddl-inv-product-selected-in {
  from { opacity: 0.2; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* =============================================================================
   Restoration product — sky field atlas / copper fieldwork register

   The generated Restoration workspace is intentionally styled as a working
   scientific field atlas: quiet paper, measured linework, one cool structural
   family, and copper reserved for attention or selection. Every selector is
   gated by `.ddl-rst-product` (or a body containing it), so retained figures
   and the other project products do not inherit this register.
   ========================================================================== */

body:has(.ddl-rst-product) {
  --ddl-rst-night: #102b3b;
  --ddl-rst-night-2: #173d52;
  --ddl-rst-ink: #173447;
  --ddl-rst-muted: #566771;
  --ddl-rst-bone: #f3f0e8;
  --ddl-rst-paper: #fffdf8;
  --ddl-rst-line: rgba(23, 52, 71, 0.15);
  --ddl-rst-line-strong: rgba(23, 52, 71, 0.27);
  --ddl-rst-sky: #5a91a8;
  --ddl-rst-sky-deep: #326c86;
  --ddl-rst-sky-pale: #dcebf0;
  --ddl-rst-copper: #b7643f;
  --ddl-rst-copper-deep: #8f482e;
  --ddl-rst-copper-pale: #f2dfd2;
  --ddl-rst-sage: #748c7a;
  --ddl-rst-sand: #d2b47d;
  --ddl-project-night: var(--ddl-rst-night);
  --ddl-project-accent: var(--ddl-rst-copper);
  --ddl-project-accent-2: var(--ddl-rst-sky);
  color: var(--ddl-rst-ink);
  background:
    radial-gradient(circle at 8% 7%, rgba(90, 145, 168, 0.1), transparent 28rem),
    linear-gradient(180deg, #f7f4ed, var(--ddl-rst-bone));
}

body:has(.ddl-rst-product) > .container-fluid {
  /* Matched to its two siblings so all three workspaces hang their header,
     nav, page and footer on the same left and right edges. */
  max-width: 1480px;
  padding-inline: clamp(0.75rem, 1.3vw, 1.1rem);
}

body:has(.ddl-rst-product) .demo-mark-strip-workspace {
  border-color: rgba(23, 52, 71, 0.12);
  color: var(--ddl-rst-muted);
  background: rgba(255, 253, 248, 0.82);
}
body:has(.ddl-rst-product) .demo-mark-workspace-text {
  color: inherit;
  font-size: 0.8rem;
}

body:has(.ddl-rst-product) .ddl-header-workspace {
  min-height: 64px;
  border-bottom: 1px solid rgba(228, 239, 243, 0.14);
  color: #f7f4ec;
  background:
    linear-gradient(90deg, rgba(210, 180, 125, 0.08) 1px, transparent 1px) 0 0 / 44px 100%,
    linear-gradient(108deg, var(--ddl-rst-night), #17465d 67%, #123246);
  box-shadow: 0 8px 26px rgba(16, 43, 59, 0.12);
}
body:has(.ddl-rst-product) .ddl-header-workspace .ddl-brand-name {
  color: #fffaf1;
  font-size: 1rem;
}
body:has(.ddl-rst-product) .ddl-header-workspace .ddl-brand-org,
body:has(.ddl-rst-product) .ddl-header-workspace .ddl-cover-signin-note {
  color: rgba(247, 244, 236, 0.68);
}
body:has(.ddl-rst-product) .ddl-header-workspace .ddl-brand-frame {
  stroke: rgba(247, 244, 236, 0.72);
}
body:has(.ddl-rst-product) .ddl-header-workspace .ddl-brand-contour {
  stroke: #80b3c6;
}
body:has(.ddl-rst-product) .ddl-header-workspace .ddl-brand-trail {
  stroke: #d8a077;
}
body:has(.ddl-rst-product) .ddl-header-workspace .ddl-brand-nodes circle {
  fill: #d8a077;
  stroke: var(--ddl-rst-night);
}
body:has(.ddl-rst-product) .ddl-header-workspace .ddl-cover-signin-button {
  color: #fffaf1;
  border-color: rgba(255, 250, 241, 0.25);
  background: rgba(255, 255, 255, 0.035);
}

body:has(.ddl-rst-product) .ddl-workspace-nav {
  min-height: 58px;
  border: 1px solid var(--ddl-rst-line);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  color: var(--ddl-rst-ink);
  background: rgba(255, 253, 248, 0.93);
  box-shadow: 0 6px 20px rgba(23, 52, 71, 0.055);
}
body:has(.ddl-rst-product) .ddl-workspace-home {
  color: var(--ddl-rst-ink);
  border-color: transparent;
}
body:has(.ddl-rst-product) .ddl-workspace-home:is(:hover, :focus-visible) {
  color: var(--ddl-rst-sky-deep);
  background: rgba(90, 145, 168, 0.08);
}
body:has(.ddl-rst-product) .ddl-workspace-route-scroll {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.24rem;
  min-width: 0;
  scroll-padding-inline: 0.35rem;
}
body:has(.ddl-rst-product) .ddl-workspace-route {
  min-width: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  padding: 0.38rem 0.46rem;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--ddl-rst-ink);
  background: transparent;
}
body:has(.ddl-rst-product) .ddl-workspace-route::after { display: none; }
body:has(.ddl-rst-product) .ddl-workspace-route-icon {
  display: inline-flex;
  color: var(--ddl-rst-sky-deep);
  font-size: 1rem;
}
body:has(.ddl-rst-product) .ddl-workspace-route-label {
  font-size: 0.74rem;
  font-weight: 760;
}
body:has(.ddl-rst-product) .ddl-workspace-route:is(:hover, :focus-visible) {
  color: var(--ddl-rst-ink);
  border-color: rgba(90, 145, 168, 0.23);
  background: rgba(90, 145, 168, 0.07);
}
body:has(.ddl-rst-product) .ddl-workspace-route.is-on {
  color: #fff;
  border-color: var(--ddl-rst-night-2);
  background: linear-gradient(135deg, var(--ddl-rst-night-2), #2c6b82);
  box-shadow: 0 5px 13px rgba(16, 43, 59, 0.15);
}
body:has(.ddl-rst-product) .ddl-workspace-route.is-on .ddl-workspace-route-icon {
  color: #efb991;
}
body:has(.ddl-rst-product) .ddl-main-workspace {
  padding: 1.45rem 0 0.75rem;
  color: var(--ddl-rst-ink);
}
body:has(.ddl-rst-product) .ddl-hubviews { display: none; }
body:has(.ddl-rst-product) .ddl-footer-workspace { color: var(--ddl-rst-muted); }
body:has(.ddl-rst-product) .ddl-footer-workspace-row { border-top-color: var(--ddl-rst-line); }
body:has(.ddl-rst-product) .ddl-footer-build > summary { color: var(--ddl-rst-muted); }

.ddl-rst-product {
  width: 100%;
  max-width: var(--ddl-measure);
  min-width: 0;
  margin-inline: auto;
  color: var(--ddl-rst-ink);
  font-size: 0.92rem;
}
.ddl-rst-product,
.ddl-rst-product *,
.ddl-rst-product *::before,
.ddl-rst-product *::after { box-sizing: border-box; }
.ddl-rst-product [hidden] { display: none !important; }
.ddl-rst-product :is(h1, h2, h3, h4) { color: var(--ddl-rst-ink); }
.ddl-rst-product p { color: var(--ddl-rst-muted); }
.ddl-rst-product a { text-underline-offset: 3px; }
.ddl-rst-product :is(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid rgb(183, 100, 63);
  outline-offset: 2px;
}

.ddl-rst-product-route-head {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.9rem;
}
.ddl-rst-product-route-copy { min-width: 0; }
.ddl-rst-product-route-copy :is(h1, h2) {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.15rem);
  font-family: var(--ddl-display); font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.0;
  font-variant-numeric: lining-nums;
}
.ddl-rst-product-route-copy > p {
  max-width: 67ch;
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
}
.ddl-rst-product-eyebrow {
  margin: 0 0 0.28rem !important;
  color: var(--ddl-rst-sky-deep) !important;
  font-size: 0.62rem !important;
  font-weight: 820;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.ddl-rst-product-card,
.ddl-rst-product-queue-card,
.ddl-rst-product-dossier {
  min-width: 0;
  margin-bottom: 0.82rem;
  padding: 0.86rem;
  border: 1px solid var(--ddl-rst-line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--ddl-rst-paper) 96%, transparent);
  box-shadow: 0 8px 24px rgba(23, 52, 71, 0.045);
}
.ddl-rst-product-card-head,
.ddl-rst-product-card-title {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}
.ddl-rst-product-card-head {
  margin: -0.86rem -0.86rem 0.78rem;
  padding: 0.66rem 0.82rem;
  border-bottom: 1px solid var(--ddl-rst-line);
  background: rgba(90, 145, 168, 0.035);
}
.ddl-rst-product-card-head > :first-child,
.ddl-rst-product-card-title {
  display: flex;
  align-items: center;
  gap: 0.48rem;
}
.ddl-rst-product-card-title > svg,
.ddl-rst-product-card-head > :first-child > svg {
  flex: 0 0 auto;
  color: var(--ddl-rst-sky-deep);
  font-size: 1rem;
}
.ddl-rst-product-card-head :is(h2, h3),
.ddl-rst-product-card-title :is(h2, h3) {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 790;
}
.ddl-rst-product-asof {
  color: var(--ddl-rst-muted);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ddl-rst-product-actions,
.ddl-rst-product-queue-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.52rem;
}
.ddl-rst-product-btn,
.ddl-rst-product-review-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.36rem;
  padding: 0.48rem 0.68rem;
  border: 1px solid var(--ddl-rst-line-strong);
  border-radius: 7px;
  color: var(--ddl-rst-ink);
  background: rgba(255, 253, 248, 0.78);
  font-size: 0.74rem;
  font-weight: 780;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
}
.ddl-rst-product-btn:is(:hover, :focus-visible),
.ddl-rst-product-review-link:is(:hover, :focus-visible) {
  color: var(--ddl-rst-ink);
  border-color: var(--ddl-rst-sky-deep);
  background: rgba(90, 145, 168, 0.08);
}
.ddl-rst-product-btn.is-primary,
.ddl-rst-product-btn-primary {
  color: #fff;
  border-color: var(--ddl-rst-night-2);
  background: var(--ddl-rst-night-2);
}
.ddl-rst-product-btn.is-primary:is(:hover, :focus-visible),
.ddl-rst-product-btn-primary:is(:hover, :focus-visible) {
  color: #fff;
  border-color: #27647c;
  background: #27647c;
}
.ddl-rst-product-btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.ddl-rst-product-review-link {
  min-height: 40px;
  padding-inline: 0.58rem;
  color: var(--ddl-rst-sky-deep);
  white-space: nowrap;
}
.ddl-rst-product-review-link.is-selected,
[data-rst-product-select-planting].is-selected,
[data-rst-select-planting].is-selected {
  color: #fff;
  border-color: var(--ddl-rst-copper-deep);
  background: var(--ddl-rst-copper-deep);
}

.ddl-rst-product-pill {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.27rem 0.48rem;
  border: 1px solid var(--ddl-rst-line);
  border-radius: 999px;
  color: var(--ddl-rst-muted);
  background: rgba(255, 253, 248, 0.72);
  font-size: 0.62rem;
  font-weight: 790;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ddl-rst-product-pill:is(.is-alert, .is-due, .is-attention, .is-review) {
  color: #7f3c27;
  border-color: rgba(183, 100, 63, 0.38);
  background: rgba(183, 100, 63, 0.11);
}
.ddl-rst-product-pill:is(.is-watch, .is-upcoming, .is-gold) {
  color: #755927;
  border-color: rgba(210, 180, 125, 0.48);
  background: rgba(210, 180, 125, 0.16);
}
.ddl-rst-product-pill:is(.is-ok, .is-complete, .is-current) {
  color: #3e6552;
  border-color: rgba(116, 140, 122, 0.42);
  background: rgba(116, 140, 122, 0.12);
}
.ddl-rst-product-pill:is(.is-unknown, .is-missing) {
  border-style: dashed;
  color: #5c6870;
  background: rgba(97, 114, 124, 0.07);
}

.ddl-rst-product-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.58rem;
}
.ddl-rst-product-stat {
  min-width: 0;
  padding: 0.66rem 0.72rem;
  border: 1px solid var(--ddl-rst-line);
  border-left: 3px solid var(--ddl-rst-sky);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.7);
}
.ddl-rst-product-stat:is(.is-alert, .is-attention, .is-copper) {
  border-left-color: var(--ddl-rst-copper);
}
.ddl-rst-product-stat:is(.is-sage, .is-complete) { border-left-color: var(--ddl-rst-sage); }
.ddl-rst-product-stat.is-sand { border-left-color: var(--ddl-rst-sand); }
.ddl-rst-product-stat strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ddl-rst-ink);
  font-size: 1.16rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.08;
}
.ddl-rst-product-stat span {
  display: block;
  margin-top: 0.2rem;
  color: var(--ddl-rst-muted);
  font-size: 0.68rem;
  line-height: 1.25;
}
.ddl-rst-product-note,
.ddl-rst-product-trustline {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.48rem;
  padding: 0.62rem 0.7rem;
  border: 1px solid rgba(90, 145, 168, 0.22);
  border-left: 3px solid var(--ddl-rst-sky);
  border-radius: 8px;
  color: var(--ddl-rst-ink);
  background: rgba(220, 235, 240, 0.34);
  /* Caption floor, matching .ddl-tor-card-caption: this is the honesty copy. */
  font-size: 0.85rem;
}
.ddl-rst-product-note > svg,
.ddl-rst-product-trustline > svg {
  flex: 0 0 auto;
  margin-top: 0.08rem;
  color: var(--ddl-rst-sky-deep);
}
.ddl-rst-product-note p,
.ddl-rst-product-trustline p { margin: 0; }

/* Start route and scientific plate */
.ddl-rst-product-start {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 540px;
  padding: clamp(1rem, 2.4vw, 1.75rem);
  border: 1px solid var(--ddl-rst-line);
  border-radius: 14px;
  background:
    linear-gradient(rgba(90, 145, 168, 0.07) 1px, transparent 1px) 0 0 / 100% 26px,
    radial-gradient(circle at 88% 14%, rgba(90, 145, 168, 0.18), transparent 31%),
    linear-gradient(145deg, rgba(255, 253, 248, 0.98), rgba(236, 242, 240, 0.93));
  box-shadow: 0 18px 46px rgba(23, 52, 71, 0.08);
}
.ddl-rst-product-start::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 460px;
  height: 460px;
  right: -150px;
  bottom: -230px;
  border: 1px solid rgba(183, 100, 63, 0.15);
  border-radius: 46% 54% 61% 39%;
  box-shadow:
    0 0 0 28px rgba(183, 100, 63, 0.035),
    0 0 0 64px rgba(90, 145, 168, 0.03);
  transform: rotate(-12deg);
}
.ddl-rst-product-start > * { position: relative; z-index: 1; }
.ddl-rst-product-start .ddl-rst-product-route-copy :is(h1, h2) {
  max-width: 12ch;
  font-size: clamp(2.45rem, 5vw, 4.1rem);
}
.ddl-rst-product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.88fr);
  gap: clamp(1rem, 3vw, 2.2rem);
  align-items: center;
  margin-bottom: 1rem;
}
.ddl-rst-product-hero-copy { min-width: 0; }
.ddl-rst-product-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.52rem;
  margin-top: 0.9rem;
}
.ddl-rst-product-hero-plate {
  position: relative;
  min-height: 240px;
  display: grid;
  place-items: center;
  padding: 0.7rem;
  border: 1px solid rgba(90, 145, 168, 0.22);
  border-radius: 48% 52% 46% 54% / 53% 43% 57% 47%;
  background: rgba(255, 253, 248, 0.55);
}
.ddl-rst-product-hero-plate::before,
.ddl-rst-product-hero-plate::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(183, 100, 63, 0.16);
  border-radius: 52% 48% 57% 43%;
  transform: rotate(5deg);
  pointer-events: none;
}
.ddl-rst-product-hero-plate::after {
  inset: 17%;
  border-color: rgba(90, 145, 168, 0.2);
  transform: rotate(-7deg);
}
.ddl-rst-product-hero-plate img,
.ddl-rst-product-hero-plate svg {
  position: relative;
  z-index: 1;
  width: min(100%, 330px);
  max-height: 300px;
  display: block;
  object-fit: contain;
  filter: saturate(0.78) contrast(1.04);
}
.ddl-rst-product-start-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
  margin-top: 0.95rem;
}
.ddl-rst-product-start-task {
  min-width: 0;
  min-height: 118px;
  display: grid;
  grid-template-columns: 4px 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.78rem;
  overflow: hidden;
  padding: 0.68rem 0.82rem 0.68rem 0;
  border: 1px solid var(--ddl-rst-line);
  border-radius: 10px;
  color: var(--ddl-rst-ink);
  background: rgba(255, 253, 248, 0.84);
  text-decoration: none;
}
.ddl-rst-product-start-rail {
  align-self: stretch;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--ddl-rst-sky);
}
.ddl-rst-product-start-task:nth-child(2n) .ddl-rst-product-start-rail {
  background: var(--ddl-rst-copper);
}
.ddl-rst-product-start-icon {
  /* One geometry across the three workspaces: the cover's rule is identical
     shape, identical slot order, only the accent token differs. */
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 1.18rem;
  color: #eff8fa;
  background: linear-gradient(145deg, #4d8ba4, var(--ddl-rst-night));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
}
.ddl-rst-product-start-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ddl-rst-product-start-copy > span:first-child {
  color: var(--ddl-rst-sky-deep);
  font-size: 0.62rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ddl-rst-product-start-copy strong {
  margin-top: 0.1rem;
  font-size: 1.08rem;
  line-height: 1.16;
}
.ddl-rst-product-start-copy > span:last-child {
  margin-top: 0.24rem;
  color: var(--ddl-rst-muted);
  font-size: 0.74rem;
}
.ddl-rst-product-start-arrow {
  color: var(--ddl-rst-copper);
  font-size: 1.1rem;
}
.ddl-rst-product-start-task:is(:hover, :focus-visible) {
  color: var(--ddl-rst-ink);
  border-color: rgba(90, 145, 168, 0.48);
  box-shadow: 0 12px 24px rgba(23, 52, 71, 0.08);
  transform: translateY(-2px);
}
.ddl-rst-product-start-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.95rem;
  color: var(--ddl-rst-muted);
  font-size: 0.68rem;
}
.ddl-rst-product-start-links a { color: var(--ddl-rst-sky-deep); }

/* Current planting and action queue */
.ddl-rst-product-context {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.8rem;
  margin: -0.55rem 0 1rem;
  padding: 0.58rem 0.68rem;
  border: 1px solid var(--ddl-rst-line);
  border-radius: 9px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 8px 22px rgba(23, 52, 71, 0.07);
}
.ddl-rst-product-context-summary {
  min-width: 0;
  margin: 0 0 0.16rem !important;
  color: var(--ddl-rst-muted);
  font-size: 0.68rem;
  font-style: italic;
}
.ddl-rst-product-context-summary > svg {
  margin-right: 0.25rem;
  color: var(--ddl-rst-sky-deep);
}
.ddl-rst-product-context-controls {
  min-width: min(420px, 100%);
  display: flex;
  align-items: flex-end;
  gap: 0.52rem;
}
.ddl-rst-product-context-controls :is(.form-group, .shiny-input-container) {
  flex: 1 1 270px;
  min-width: 0;
  margin: 0;
}
.ddl-rst-product :is(.form-group, .shiny-input-container) > label,
.ddl-rst-product .control-label {
  margin-bottom: 0.25rem;
  color: var(--ddl-rst-muted);
  font-size: 0.62rem;
  font-weight: 780;
}
.ddl-rst-product :is(input.form-control, select.form-control, .selectize-input) {
  border-color: var(--ddl-rst-line-strong);
  border-radius: 7px;
  color: var(--ddl-rst-ink);
  background: var(--ddl-rst-paper);
  box-shadow: none;
}
.ddl-rst-product :is(input.form-control, select.form-control, .selectize-input).focus,
.ddl-rst-product :is(input.form-control, select.form-control):focus {
  border-color: var(--ddl-rst-sky-deep);
  box-shadow: 0 0 0 3px rgba(90, 145, 168, 0.16);
}
.ddl-rst-product .radio-inline,
.ddl-rst-product .form-check-inline {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin: 0.15rem 0.25rem 0.15rem 0;
  padding: 0.4rem 0.64rem;
  border: 1px solid var(--ddl-rst-line);
  border-radius: 8px;
  color: var(--ddl-rst-ink);
  background: rgba(255, 253, 248, 0.72);
  font-size: 0.74rem;
  cursor: pointer;
}
.ddl-rst-product .radio-inline:has(input:checked),
.ddl-rst-product .form-check-inline:has(input:checked) {
  color: #fffdf8;
  border-color: var(--ddl-rst-night-2);
  background: var(--ddl-rst-night-2);
}
.ddl-rst-product .radio-inline input,
.ddl-rst-product .form-check-inline input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}
.ddl-rst-product .radio-inline:has(input:focus-visible),
.ddl-rst-product .form-check-inline:has(input:focus-visible) {
  outline: 3px solid rgb(63, 106, 113);
  outline-offset: 2px;
}
.ddl-rst-product-action-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(235px, 0.38fr) minmax(0, 1.62fr);
  gap: 0.82rem;
  align-items: start;
}
.ddl-rst-product-action-aside {
  position: sticky;
  top: 88px;
  min-width: 0;
}
.ddl-rst-product-orientation { padding: 0; overflow: hidden; }
.ddl-rst-product-orientation > summary,
.ddl-rst-product-fold > summary,
.ddl-rst-product-chart-twin > summary,
.ddl-rst-product-rulebook > summary,
details.ddl-rst-product-card > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.65rem 0.82rem;
  color: var(--ddl-rst-ink);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 790;
}
.ddl-rst-product-orientation > summary > svg,
.ddl-rst-product-fold > summary > svg,
details.ddl-rst-product-card > summary > svg { color: var(--ddl-rst-sky-deep); }
.ddl-rst-product-orientation > :not(summary),
.ddl-rst-product-fold > :not(summary),
.ddl-rst-product-rulebook > :not(summary) { margin-inline: 0.82rem; }
.ddl-rst-product-orientation > :last-child,
.ddl-rst-product-fold > :last-child,
.ddl-rst-product-rulebook > :last-child { margin-bottom: 0.82rem; }
.ddl-rst-product-filter-row,
.ddl-rst-product-filters {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.58rem;
  margin-bottom: 0.7rem;
}
.ddl-rst-product-filter-row :is(.form-group, .shiny-input-container),
.ddl-rst-product-filters :is(.form-group, .shiny-input-container) { min-width: 0; margin: 0; }
.ddl-rst-product-queue-status {
  margin: 0.4rem 0;
  color: var(--ddl-rst-muted);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}
.ddl-rst-product-queue-actions { margin-top: 0.68rem; }
.ddl-rst-product-queue-actions > :first-child { margin-right: auto; }
.ddl-rst-product tr.is-selected > :is(th, td) {
  background: rgba(183, 100, 63, 0.085) !important;
  box-shadow: inset 0 1px rgba(183, 100, 63, 0.14),
    inset 0 -1px rgba(183, 100, 63, 0.14);
}
.ddl-rst-product tr.is-selected > :first-child {
  box-shadow: inset 3px 0 var(--ddl-rst-copper),
    inset 0 1px rgba(183, 100, 63, 0.14), inset 0 -1px rgba(183, 100, 63, 0.14);
}
.ddl-rst-product-selected {
  position: relative;
  overflow: hidden;
  margin-top: 0.82rem;
  border-color: rgba(183, 100, 63, 0.33);
  background:
    linear-gradient(90deg, rgba(183, 100, 63, 0.07), transparent 42%),
    var(--ddl-rst-paper);
}
.ddl-rst-product-selected::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--ddl-rst-copper);
}
.ddl-rst-product-selected-head,
.ddl-rst-product-dossier-title {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.72rem;
}
.ddl-rst-product-selected-head :is(h2, h3),
.ddl-rst-product-dossier-title :is(h2, h3) { margin: 0; font-size: 1.06rem; }
.ddl-rst-product-selected-head p { margin: 0.2rem 0 0; font-size: 0.74rem; }
.ddl-rst-product-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 0.75rem;
  border-top: 1px solid var(--ddl-rst-line);
  border-left: 1px solid var(--ddl-rst-line);
}
.ddl-rst-product-detail,
.ddl-rst-product-detail-grid > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(110px, 0.7fr) minmax(0, 1.3fr);
  border-right: 1px solid var(--ddl-rst-line);
  border-bottom: 1px solid var(--ddl-rst-line);
}
.ddl-rst-product-detail :is(dt, span:first-child),
.ddl-rst-product-detail-grid > div > :first-child {
  margin: 0;
  padding: 0.48rem 0.54rem;
  color: var(--ddl-rst-muted);
  background: rgba(90, 145, 168, 0.045);
  font-size: 0.62rem;
  font-weight: 720;
}
.ddl-rst-product-detail :is(dd, span:last-child),
.ddl-rst-product-detail-grid > div > :last-child {
  min-width: 0;
  margin: 0;
  padding: 0.48rem 0.54rem;
  overflow-wrap: anywhere;
  color: var(--ddl-rst-ink);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

/* Registers, dossiers, and horizontally safe data surfaces */
.ddl-rst-product-table-scroll,
.ddl-rst-product .dataTables_scrollBody,
.ddl-rst-product .dataTables_wrapper {
  min-width: 0;
  max-width: 100%;
}
.ddl-rst-product-table-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(50, 108, 134, 0.42) transparent;
}
.ddl-rst-product-table {
  width: 100%;
  min-width: 670px;
  border-collapse: collapse;
  color: var(--ddl-rst-ink);
  font-size: 0.68rem;
}
.ddl-rst-product-table :is(th, td) {
  padding: 0.52rem 0.58rem;
  border-bottom: 1px solid var(--ddl-rst-line);
  text-align: left;
  vertical-align: middle;
}
.ddl-rst-product-table th {
  color: #49616e;
  background: rgba(90, 145, 168, 0.07);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ddl-rst-product-table tbody tr:nth-child(even) { background: rgba(90, 145, 168, 0.025); }
.ddl-rst-product-table tbody tr:hover { background: rgba(90, 145, 168, 0.07); }
.ddl-rst-product-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ddl-rst-product .dataTables_wrapper { color: var(--ddl-rst-ink); font-size: 0.68rem; }
.ddl-rst-product table.dataTable {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ddl-rst-ink);
  --bs-table-striped-bg: rgba(90, 145, 168, 0.025);
  --bs-table-hover-bg: rgba(90, 145, 168, 0.07);
  width: 100% !important;
  margin: 0 !important;
  color: var(--ddl-rst-ink) !important;
  background: var(--ddl-rst-paper) !important;
}
.ddl-rst-product table.dataTable thead th {
  border-bottom-color: var(--ddl-rst-line-strong) !important;
  color: #49616e;
  background: rgba(90, 145, 168, 0.07);
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.ddl-rst-product table.dataTable tbody tr {
  color: var(--ddl-rst-ink) !important;
  background: var(--ddl-rst-paper) !important;
}
.ddl-rst-product table.dataTable tbody td {
  color: var(--ddl-rst-ink) !important;
  border-top-color: var(--ddl-rst-line) !important;
  background-color: transparent !important;
}
.ddl-rst-product table.dataTable.stripe tbody tr.odd,
.ddl-rst-product table.dataTable.display tbody tr.odd {
  background: color-mix(in srgb, var(--ddl-rst-paper) 96%, var(--ddl-rst-sky)) !important;
}
.ddl-rst-product table.dataTable.hover tbody tr:hover,
.ddl-rst-product table.dataTable.display tbody tr:hover {
  background: color-mix(in srgb, var(--ddl-rst-paper) 91%, var(--ddl-rst-sky)) !important;
}
.ddl-rst-product-dt-bottom {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding-top: 0.55rem;
}
.ddl-rst-product .dataTables_info { color: var(--ddl-rst-muted) !important; font-size: 0.68rem; }
.ddl-rst-product .dataTables_paginate .paginate_button {
  min-width: 38px;
  min-height: 38px;
  display: inline-grid;
  place-items: center;
  margin: 0 1px;
  padding: 0.35rem 0.5rem !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
}
.ddl-rst-product .dataTables_paginate .paginate_button.current {
  color: #fff !important;
  border-color: var(--ddl-rst-night-2) !important;
  background: var(--ddl-rst-night-2) !important;
}
.ddl-rst-product-dossier-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
}
.ddl-rst-product-dossier-nav > strong { text-align: center; font-variant-numeric: tabular-nums; }
.ddl-rst-product-dossier-tabs,
.ddl-rst-product-data-tabs {
  min-width: 0;
  overflow-x: auto;
  margin-bottom: 0.78rem;
  scrollbar-width: thin;
}
.ddl-rst-product-dossier-tabs .form-group,
.ddl-rst-product-data-tabs .form-group { min-width: max-content; margin: 0; }
.ddl-rst-product-dossier-tabs .shiny-options-group,
.ddl-rst-product-data-tabs .shiny-options-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.16rem;
}
.ddl-rst-product-dossier-tabs :is(.radio-inline, .form-check-inline),
.ddl-rst-product-data-tabs :is(.radio-inline, .form-check-inline) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin: 0;
  white-space: nowrap;
}
.ddl-rst-product-species-grid,
.ddl-rst-product-plant-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.62rem;
}
.ddl-rst-product-species-card,
.ddl-rst-product-plant-card {
  min-width: 0;
  padding: 0.7rem;
  border: 1px solid var(--ddl-rst-line);
  border-top: 3px solid var(--ddl-rst-sky);
  border-radius: 9px;
  background: rgba(255, 253, 248, 0.75);
}
.ddl-rst-product-species-card h3,
.ddl-rst-product-plant-card h3 { margin: 0; font-size: 0.8rem; }
.ddl-rst-product-species-card p,
.ddl-rst-product-plant-card p { margin: 0.28rem 0 0; font-size: 0.68rem; }

/* Planting map: the dark card frame the shared leaflet stage sits in. */
.ddl-rst-product-map-card {
  grid-area: map;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(16, 43, 59, 0.34);
  border-radius: 11px;
  background: var(--ddl-rst-night);
  box-shadow: 0 15px 34px rgba(16, 43, 59, 0.13);
}
.ddl-rst-product-map-card > .ddl-rst-product-card-head {
  min-height: 48px;
  margin: 0;
  color: #f7f4ec;
  border-bottom-color: rgba(243, 246, 246, 0.13);
  background: #0c2636;
}
.ddl-rst-product-map-card > .ddl-rst-product-card-head :is(h2, h3) { color: #f7f4ec; }
.ddl-rst-product-map-card > .ddl-rst-product-card-head > :first-child > svg { color: #e0a87f; }
.ddl-rst-product-map-ledger,
.ddl-rst-product-survival-table { padding: 0; overflow: hidden; }
.ddl-rst-product-map-ledger > summary,
.ddl-rst-product-survival-table > summary {
  border-bottom: 1px solid transparent;
}
.ddl-rst-product-map-ledger[open] > summary,
.ddl-rst-product-survival-table[open] > summary {
  border-bottom-color: var(--ddl-rst-line);
  background: rgba(90, 145, 168, 0.035);
}
.ddl-rst-product-map-ledger > :not(summary),
.ddl-rst-product-survival-table > :not(summary) {
  margin-inline: 0.82rem;
}
.ddl-rst-product-map-ledger > :last-child,
.ddl-rst-product-survival-table > :last-child { margin-bottom: 0.82rem; }
.ddl-rst-product-locator { padding: 0.72rem; }
.ddl-rst-product-locator > p { margin: 0.45rem 0 0; font-size: 0.62rem; }

/* Survival and other evidence */
.ddl-rst-product-outcome-grid {
  display: grid;
  grid-template-columns: minmax(225px, 0.42fr) minmax(0, 1.58fr);
  gap: 0.72rem;
  align-items: start;
  margin-bottom: 0.9rem;
}
.ddl-rst-product-outcome-menu { position: sticky; top: 84px; }
.ddl-rst-product-outcome-menu .shiny-options-group { display: grid; gap: 0.24rem; }
.ddl-rst-product-outcome-menu :is(.radio-inline, .form-check-inline) {
  width: 100%;
  min-height: 44px;
  margin: 0;
}
.ddl-rst-product-outcome-view { min-width: 0; }
.ddl-rst-product-outcome-card {
  min-width: 0;
  padding: 0.86rem;
  border: 1px solid var(--ddl-rst-line);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.9);
}
.ddl-rst-product-outcome-card > span { color: var(--ddl-rst-muted); font-size: 0.62rem; }
.ddl-rst-product-outcome-card > strong {
  display: block;
  margin-top: 0.14rem;
  color: var(--ddl-rst-ink);
  font-size: 1.28rem;
  font-variant-numeric: tabular-nums;
}
.ddl-rst-product-outcome-card > p { margin: 0.28rem 0 0; font-size: 0.68rem; }
.ddl-rst-product-survival-summary .ddl-rst-product-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ddl-rst-product-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.78rem;
}
.ddl-rst-product-chart { width: 100%; min-width: 0; margin: 0; }
.ddl-rst-product-chart svg { width: 100%; min-height: 285px; display: block; }
.ddl-rst-product-chart-title { fill: var(--ddl-rst-ink); font: 700 15px system-ui, sans-serif; }
.ddl-rst-product-chart-sub { fill: var(--ddl-rst-muted); font: 11px system-ui, sans-serif; }
.ddl-rst-product-chart-gridline { stroke: rgba(23, 52, 71, 0.12); stroke-width: 1; }
.ddl-rst-product-chart-axis-line { stroke: rgba(23, 52, 71, 0.34); stroke-width: 1; }
.ddl-rst-product-chart-axis {
  fill: var(--ddl-rst-muted);
  font: 10px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ddl-rst-product-chart-bar { fill: var(--ddl-rst-sky); }
.ddl-rst-product-chart-bar.is-later { fill: var(--ddl-rst-sage); }
.ddl-rst-product-chart-bar.is-attention { fill: var(--ddl-rst-copper); }
.ddl-rst-product-chart-bar.is-unknown {
  fill: rgba(97, 114, 124, 0.36);
  stroke: rgba(23, 52, 71, 0.42);
  stroke-dasharray: 4 3;
}
.ddl-rst-product-chart-line {
  fill: none;
  stroke: var(--ddl-rst-sky-deep);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ddl-rst-product-chart-line.is-lower { stroke: var(--ddl-rst-copper); }
.ddl-rst-product-chart-line.is-upper { stroke: var(--ddl-rst-sky-deep); }
.ddl-rst-product-chart-band {
  fill: rgba(90, 145, 168, 0.16);
  stroke: none;
}
.ddl-rst-product-chart-point {
  fill: var(--ddl-rst-paper);
  stroke: var(--ddl-rst-sky-deep);
  stroke-width: 3;
}
.ddl-rst-product-chart-track { fill: rgba(23, 52, 71, 0.07); }
.ddl-rst-product-chart-label { fill: var(--ddl-rst-muted); font: 10px system-ui, sans-serif; }
.ddl-rst-product-chart-value {
  fill: var(--ddl-rst-ink);
  font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ddl-rst-product-chart figcaption {
  margin: 0.25rem 0 0;
  color: var(--ddl-rst-muted);
  font-size: 0.68rem;
}
.ddl-rst-product-survival-band:not(path) {
  position: relative;
  min-height: 18px;
  overflow: hidden;
  border: 1px solid var(--ddl-rst-line);
  border-radius: 999px;
  background: repeating-linear-gradient(
    135deg,
    rgba(97, 114, 124, 0.08),
    rgba(97, 114, 124, 0.08) 5px,
    rgba(255, 253, 248, 0.5) 5px,
    rgba(255, 253, 248, 0.5) 10px
  );
}
.ddl-rst-product-survival-band:not(path) > span {
  position: absolute;
  inset-block: 0;
  background: linear-gradient(90deg, var(--ddl-rst-copper), var(--ddl-rst-sky));
}
.ddl-rst-product-survival-panel {
  fill: rgba(255, 253, 248, 0.72);
  stroke: var(--ddl-rst-line);
  stroke-width: 1;
}
.ddl-rst-product-survival-title {
  fill: var(--ddl-rst-ink);
  font: 700 12px system-ui, sans-serif;
}
.ddl-rst-product-survival-n {
  fill: var(--ddl-rst-muted);
  font: 9px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ddl-rst-product-survival-grid {
  stroke: rgba(23, 52, 71, 0.11);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.ddl-rst-product-survival-axis {
  fill: var(--ddl-rst-muted);
  font: 9px ui-monospace, SFMono-Regular, Menlo, monospace;
}
path.ddl-rst-product-survival-band {
  fill: rgba(90, 145, 168, 0.18);
  stroke: none;
}
.ddl-rst-product-survival-line {
  fill: none;
  stroke: var(--ddl-rst-sky-deep);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ddl-rst-product-survival-horizon {
  stroke: var(--ddl-rst-copper);
  stroke-width: 1.4;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}
.ddl-rst-product-matrix {
  width: 100%;
  border-spacing: 4px;
  border-collapse: separate;
  font-size: 0.68rem;
}
.ddl-rst-product-matrix :is(th, td) { padding: 0.48rem; text-align: center; }
.ddl-rst-product-matrix th { color: var(--ddl-rst-muted); font-size: 0.62rem; }
.ddl-rst-product-matrix td {
  border: 1px solid var(--ddl-rst-line);
  border-radius: 6px;
  color: var(--ddl-rst-ink);
  background: rgba(90, 145, 168, var(--rstp-cell-alpha, 0.08));
  font-variant-numeric: tabular-nums;
}

/* Data room */
.ddl-rst-product-breadcrumb {
  min-height: 28px;
  display: flex;
  align-items: center;
  margin: -0.8rem 0 0.7rem;
  color: var(--ddl-rst-muted);
  font-size: 0.68rem;
}
.ddl-rst-product-breadcrumb > div,
.ddl-rst-product-breadcrumb .shiny-html-output {
  display: flex;
  align-items: center;
  gap: 0.34rem;
}
.ddl-rst-product-data-panel > .ddl-rst-product-route-head { margin-top: 0.35rem; }
.ddl-rst-product-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.8rem;
}
.ddl-rst-product-check-card {
  min-width: 0;
  min-height: 145px;
  padding: 0.82rem;
  border: 1px solid var(--ddl-rst-line);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.9);
}
.ddl-rst-product-check-card-top,
.ddl-rst-product-check-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.ddl-rst-product-check-severity {
  color: var(--ddl-rst-muted);
  font-size: 0.62rem;
  font-weight: 790;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.ddl-rst-product-check-card h3 { margin: 0.54rem 0 0.3rem; font-size: 0.85rem; }
.ddl-rst-product-check-card p { margin: 0; font-size: 0.68rem; }
.ddl-rst-product-check-asof {
  margin-top: 0.5rem !important;
  color: var(--ddl-rst-muted);
  font-size: 0.62rem !important;
  font-variant-numeric: tabular-nums;
}
.ddl-rst-product-check-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
  margin: 0 0 0.48rem;
}
.ddl-rst-product-check-counts span {
  display: grid;
  padding: 0.42rem 0.48rem;
  border: 1px solid var(--ddl-rst-line);
  border-radius: 8px;
  color: var(--ddl-rst-muted);
  background: rgba(90, 145, 168, 0.035);
  font-size: 0.62rem;
}
.ddl-rst-product-check-counts strong { color: var(--ddl-rst-ink); font-size: 0.85rem; }
.ddl-rst-product-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}
.ddl-rst-product-method-grid .ddl-rst-product-card { margin: 0; }
.ddl-rst-product-method-grid p { margin: 0.4rem 0 0; font-size: 0.74rem; }
.ddl-rst-product-report-answer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.8rem;
}
.ddl-rst-product-report-answer strong { color: var(--ddl-rst-ink); font-size: 1.2rem; }
.ddl-rst-product-report-answer span { color: var(--ddl-rst-muted); }
.ddl-rst-product-empty {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px dashed rgba(23, 52, 71, 0.25);
  border-radius: 10px;
  color: var(--ddl-rst-muted);
  text-align: center;
  background: rgba(255, 255, 255, 0.42);
}
.ddl-rst-product-empty > svg { color: var(--ddl-rst-sky-deep); font-size: 1.45rem; }
.ddl-rst-product-empty :is(h2, h3, p) { margin: 0; }
.ddl-rst-product-empty :is(h2, h3) { font-size: 1rem; }
.ddl-rst-product-empty p { font-size: 0.74rem; }

@media (max-width: 1040px) {
  .ddl-rst-product-action-layout { grid-template-columns: 1fr; }
  .ddl-rst-product-action-aside { position: static; }
  .ddl-rst-product-outcome-grid { grid-template-columns: 1fr; }
  .ddl-rst-product-outcome-menu { position: static; }
}

@media (max-width: 767px) {
  body:has(.ddl-rst-product) .ddl-main-workspace { padding-top: 1rem; }
  .ddl-rst-product { min-width: 0; font-size: 0.92rem; }
  .ddl-rst-product-route-head { align-items: flex-start; }
  .ddl-rst-product-route-copy :is(h1, h2) { font-size: 2rem; }
  .ddl-rst-product-route-copy > p { font-size: 0.85rem; }
  .ddl-rst-product-start { min-height: 0; padding: 0.88rem; }
  .ddl-rst-product-hero { grid-template-columns: 1fr; }
  .ddl-rst-product-hero-plate { min-height: 190px; }
  .ddl-rst-product-start-grid { grid-template-columns: 1fr; }
  .ddl-rst-product-start-task {
    min-height: 108px;
    grid-template-columns: 4px 48px minmax(0, 1fr) auto;
    gap: 0.68rem;
    padding-right: 0.75rem;
  }
  .ddl-rst-product-start-icon { width: 44px; height: 44px; }
  .ddl-rst-product-context {
    flex-direction: column;
    align-items: stretch;
    margin: -0.35rem 0 0.82rem;
    backdrop-filter: none;
  }
  .ddl-rst-product-context-summary { white-space: normal; }
  .ddl-rst-product-context-controls { min-width: 0; width: 100%; flex-wrap: wrap; }
  /* flex: 0 0 auto let the select take its intrinsic width while the row stayed
     horizontal down to 480px, so between 481 and 767 the Open-plants button was
     pushed past the viewport and the document scrolled sideways. That is a
     stated release failure. Let the control take a full row and wrap. */
  .ddl-rst-product-context-controls :is(.form-group, .shiny-input-container) {
    flex: 1 1 100%; min-width: 0;
  }
  .ddl-rst-product-filter-row,
  .ddl-rst-product-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ddl-rst-product-chart-grid,
  .ddl-rst-product-method-grid,
  .ddl-rst-product-check-grid,
  .ddl-rst-product-species-grid,
  .ddl-rst-product-plant-grid { grid-template-columns: 1fr; }
  .ddl-rst-product-chart svg { min-height: 240px; }
  .ddl-rst-product-survival-summary .ddl-rst-product-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ddl-rst-product-check-card { min-height: 0; }
  .ddl-rst-product-table-scroll { overscroll-behavior-inline: contain; }
  .ddl-rst-product-dt-bottom { flex-wrap: wrap; }
  .ddl-rst-product .dataTables_paginate { max-width: 100%; overflow-x: auto; }
}

@media (max-width: 480px) {
  .ddl-rst-product-route-head { flex-direction: column; gap: 0.52rem; }
  .ddl-rst-product-route-head > .ddl-rst-product-pill { margin-top: 0.1rem; }
  .ddl-rst-product-hero-plate { display: none; }
  .ddl-rst-product-start .ddl-rst-product-route-copy :is(h1, h2) { font-size: 2.35rem; }
  .ddl-rst-product-stats { grid-template-columns: 1fr; }
  .ddl-rst-product-survival-summary .ddl-rst-product-stats { grid-template-columns: 1fr; }
  .ddl-rst-product-stat { padding: 0.58rem; }
  .ddl-rst-product-stat strong { font-size: 1.03rem; }
  .ddl-rst-product-context-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .ddl-rst-product-context-controls .ddl-rst-product-btn { width: 100%; }
  .ddl-rst-product-filter-row,
  .ddl-rst-product-filters { grid-template-columns: 1fr; }
  .ddl-rst-product-queue-actions { align-items: stretch; }
  .ddl-rst-product-queue-actions > :first-child { width: 100%; margin-right: 0; }
  .ddl-rst-product-detail-grid { grid-template-columns: 1fr; }
  .ddl-rst-product-detail,
  .ddl-rst-product-detail-grid > div { grid-template-columns: minmax(105px, 0.78fr) minmax(0, 1.22fr); }
  .ddl-rst-product-selected-head,
  .ddl-rst-product-dossier-title { flex-direction: column; }
  .ddl-rst-product-dossier-nav { grid-template-columns: 1fr 1fr; }
  .ddl-rst-product-dossier-nav > strong { grid-column: 1 / -1; grid-row: 1; }
  .ddl-rst-product-dossier-tabs .shiny-options-group { display: grid; grid-template-columns: 1fr; }
  .ddl-rst-product-dossier-tabs :is(.radio-inline, .form-check-inline) {
    width: 100%;
    margin: 0;
  }
  /* Restoration was the only workspace whose phone map broke the gutter, and
     its -0.6rem was a hand-copied mirror of the container padding that would
     silently overflow if that padding ever moved. Matches its siblings now. */
  .ddl-rst-product .radio-inline,
  .ddl-rst-product .form-check-inline,
  .ddl-rst-product button,
  .ddl-rst-product select,
  .ddl-rst-product input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),
  .ddl-rst-product .ddl-rst-product-btn,
  .ddl-rst-product .ddl-rst-product-review-link { min-height: 44px; }
}

@media (prefers-reduced-motion: no-preference) {
  html.ddl-motion-ok:not(.ddl-motion-paused) .ddl-rst-product {
    animation: ddl-rst-product-page-in 280ms cubic-bezier(.2, .8, .2, 1) both;
  }
  html.ddl-motion-ok .ddl-rst-product-start-task,
  html.ddl-motion-ok .ddl-rst-product-card,
  html.ddl-motion-ok .ddl-rst-product-queue-card,
  html.ddl-motion-ok .ddl-rst-product-btn,
  html.ddl-motion-ok .ddl-rst-product-review-link {
    transition: transform 175ms cubic-bezier(.2, .8, .2, 1),
      box-shadow 175ms ease, border-color 175ms ease, background-color 175ms ease;
  }
  html.ddl-motion-ok:not(.ddl-motion-paused) .ddl-rst-product-selected.is-revealed,
  html.ddl-motion-ok:not(.ddl-motion-paused) [data-rst-product-selected-plant].is-revealed {
    animation: ddl-rst-product-selected-in 420ms cubic-bezier(.16, .82, .2, 1) both;
  }
}
html.ddl-motion-paused .ddl-rst-product *,
html.ddl-motion-paused .ddl-rst-product *::before,
html.ddl-motion-paused .ddl-rst-product *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .ddl-rst-product *,
  .ddl-rst-product *::before,
  .ddl-rst-product *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  body:has(.ddl-rst-product) { background: #fff; }
  body:has(.ddl-rst-product) .ddl-workspace-nav,
  body:has(.ddl-rst-product) .ddl-cover-signin,
  body:has(.ddl-rst-product) .ddl-footer-workspace,
  .ddl-rst-product-context-controls,
  .ddl-rst-product-actions { display: none !important; }
  /* The filter row and the queue status are NOT hidden — see the shared print
     provenance block at the end of this sheet. */
  .ddl-rst-product-context {
    position: static;
    margin: 0 0 0.4rem;
    border-color: #c9d0d3;
    box-shadow: none;
    backdrop-filter: none;
    background: #fff;
  }
  .ddl-rst-product,
  .ddl-rst-product-card,
  .ddl-rst-product-queue-card,
  .ddl-rst-product-dossier,
  .ddl-rst-product-start {
    width: 100%;
    max-width: none;
    border-color: #c9d0d3;
    box-shadow: none;
    background: #fff;
  }
  .ddl-rst-product-table-scroll { overflow: visible; }
  .ddl-rst-product-table { min-width: 0; font-size: 8pt; }
  .ddl-rst-product table.dataTable { width: 100% !important; }
  /* The provenance line, print-only, standing where the controls were: one
     compact heading of ink on white. Grey reads on a lit screen and vanishes
     on paper, which is the one place this sentence has to survive. */
  .ddl-rst-product .ddl-print-provenance {
    display: block;
    margin: 0 0 0.34rem;
    padding-bottom: 0.18rem;
    border-bottom: 1pt solid #000;
    color: #000;
    font-size: 9pt;
    line-height: 1.35;
  }
  /* Hidden only in the card the line replaces it in. The plant register prints
     the same filter classes with no provenance of its own; hiding it would
     strip the record instead of restating it. */
  .ddl-rst-product-card:has(.ddl-print-provenance)
    :is(.ddl-rst-product-filters, .ddl-rst-product-filter-row,
        .ddl-rst-product-queue-actions) { display: none !important; }
  .ddl-rst-product-map-card,
  .ddl-rst-product-chart,
  .ddl-rst-product-selected { break-inside: avoid; }
  /* Invasive had neither of these while its two siblings had both. Its charts
     are horizontal bars whose whole meaning is fill length, so it was the one
     workspace that could split a bar across a page break and print it grey. */
  .ddl-inv-product-map-card,
  .ddl-inv-product-chart,
  .ddl-inv-product-selected { break-inside: avoid; }
  .ddl-inv-product-map-card,
  .ddl-inv-product-chart svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .ddl-rst-product-map-card,
  .ddl-rst-product-chart svg { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

@keyframes ddl-rst-product-page-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
@keyframes ddl-rst-product-selected-in {
  from { opacity: 0.2; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* =============================================================================
   Workspace parity + mobile legibility additions.
   -----------------------------------------------------------------------------
   These rules close the audited gaps between the three public workspaces: the
   per-card sample-data chip rows, records-pane search strips, busy-state
   coaching, the watch-badge contrast floor, and the phone chart-scroll law the
   internal figures already follow (text renders at authored size and the
   figure scrolls in its own box, never shrinks below legibility).
   ========================================================================== */

/* Sample-data chip rows on the record tables. */
.ddl-tor-card-chiprow,
.ddl-inv-product-chiprow,
.ddl-rst-product-chiprow { margin-bottom: 0.55rem; }

/* The priority key: each queue bucket says what it means and how it is
   computed, so the vocabulary explains itself instead of reading as jargon. */
.ddl-tor-priority-key,
.ddl-inv-product-priority-key {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.28rem 0.75rem;
  margin: 0.55rem 0 0.2rem;
}
.ddl-tor-priority-key dt,
.ddl-inv-product-priority-key dt { font-size: 0.74rem; font-weight: 700; }
.ddl-tor-priority-key dd,
.ddl-inv-product-priority-key dd { margin: 0; font-size: 0.74rem; opacity: 0.85; }
.ddl-inv-product-priority-note > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.42rem;
  cursor: pointer;
  font-size: 0.8rem;
}

/* Records-pane DT search strips (the queue cards keep their own search). */
.ddl-inv-product-dt-top,
.ddl-rst-product-dt-top { display: flex; justify-content: flex-end; margin-bottom: 0.48rem; }
.ddl-inv-product-dt-top label,
.ddl-rst-product-dt-top label { font-size: 0.68rem; }
.ddl-inv-product-dt-top input,
.ddl-rst-product-dt-top input { min-height: 38px; margin-left: 0.4rem; border-radius: 7px; }

/* While the server computes, an empty output region says so instead of
   painting silent blank space. Scoped to html.shiny-busy so a deliberately
   empty (NULL) output never carries a permanent "preparing" claim. */
html.shiny-busy :is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product)
  :is(.shiny-html-output, .html-widget-output):empty:not(.ddl-print-provenance) {
  display: grid;
  place-items: center;
}
html.shiny-busy :is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) .shiny-html-output:empty:not(.ddl-print-provenance) {
  min-height: 90px;
}
html.shiny-busy :is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product)
  :is(.shiny-html-output, .html-widget-output):empty:not(.ddl-print-provenance)::after {
  content: "Preparing this view…";
  opacity: 0.72;
  font-size: 0.85rem;
}
/* The table space is reserved WITHOUT the busy gate. A DataTable placeholder is
   a .html-widget-output, never a .shiny-html-output, so the rule above never
   covered it — and the jump it causes happens at first paint, before shiny.js
   has had the chance to set shiny-busy at all. The reserved box is honest on
   its own: it claims height, not content. */
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) .html-widget-output:empty:not(.ddl-print-provenance) {
  min-height: 320px;
}

/* The watch badge holds the 3:1 text floor on paper. */
.ddl-status-watch { color: #8a6a1e; }

/* The phone chart-scroll law: at or below 767px a hand-built SVG keeps its
   authored text size and scrolls inside its own figure instead of shrinking to
   ~4px glyphs. The coaching line above it is the same swipe cue the internal
   figures use.

   SCREEN ONLY. Without the media type this fired in print too, where a Letter
   page box is about 720px, so the figure clipped at the paper edge: the
   survival chart lost its whole third panel column and two of six cohorts
   printed as slivers under a caption still describing six. */
@media screen and (max-width: 767px) {
  figure.ddl-tor-chart,
  figure.ddl-inv-product-chart,
  figure.ddl-rst-product-chart {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Pin the scroll box to each chart's own viewBox width so the scale is never
     below 1. It was 700 against a 760 viewBox and 880 against 976, which scaled
     every glyph DOWN: 10px authored rendered at 9.21px, under the sheet's own
     0.62rem floor, and the floors gate could not see it because SVG user-space
     type is exempt. At parity, one user unit is one CSS pixel. */
  figure.ddl-tor-chart > svg,
  figure.ddl-inv-product-chart > svg { min-width: 760px; }
  figure.ddl-rst-product-chart > svg { min-width: 976px; }
  figure.ddl-tor-chart::before,
  figure.ddl-inv-product-chart::before,
  figure.ddl-rst-product-chart::before {
    content: "\2194  Swipe for the full chart";
    display: block;
    margin-bottom: 0.4rem;
    opacity: 0.75;
    font-size: 0.74rem;
  }
}

/* =============================================================================
   Leaflet map workspaces (SRER siting).
   ========================================================================== */
.ddl-map-stage {
  position: relative;
  height: clamp(360px, 62vh, 540px);
  overflow: hidden;
  border: 1px solid rgba(31, 37, 41, 0.16);
  border-radius: 10px;
}
.ddl-map-stage.is-short { height: clamp(350px, 58vh, 500px); }
.ddl-map-stage.is-tall { height: clamp(430px, 64vh, 700px); }
.ddl-map-stage .leaflet-container { font: inherit; }

/* One keyless USGS topo source serves both Topo and Light. The second view is
   styled in the browser so it cannot acquire a separate token dependency. */
.leaflet-container .ddl-basemap-light img.leaflet-tile {
  filter: grayscale(0.92) saturate(0.34) brightness(1.13) contrast(0.82);
}

/* The instructions the map container's aria-describedby points at. Leaflet's
   own on-map gesture hint (map_base.R) is aria-hidden and transient, so this
   is the only route the same information has to a screen reader. Clipped
   rather than display:none: a describedby target has to stay in the
   accessibility tree to be read at all. */
.ddl-map-keyhelp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.ddl-map-notice {
  margin-top: 0.7rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(31, 37, 41, 0.14);
  border-left: 4px solid var(--ddl-gold);
  border-radius: 8px;
  font-size: 0.8rem;
}
.ddl-map-notice p { margin: 0 0 0.3rem; }
.ddl-map-notice-fold summary { cursor: pointer; font-weight: 650; min-height: 32px; }
.ddl-map-notice-fold p { opacity: 0.85; }

.ddl-map-empty {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.4rem;
  text-align: center;
  padding: 1rem;
  background: rgba(244, 239, 231, 0.96);
}
.ddl-map-empty h3 { margin: 0; font-size: 1rem; }
.ddl-map-empty p { margin: 0; max-width: 44ch; font-size: 0.8rem; }

.ddl-map-gesture-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 700;
  transform: translate(-50%, -50%);
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  color: #fff;
  background: rgba(20, 26, 30, 0.82);
  font-size: 0.8rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.ddl-map-gesture-hint.is-on { opacity: 1; }
.ddl-map-tile-note {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 700;
  transform: translateX(-50%);
  max-width: 90%;
  padding: 0.45rem 0.7rem;
  border-radius: 7px;
  color: #fff;
  background: rgba(20, 26, 30, 0.85);
  font-size: 0.74rem;
  text-align: center;
}

.ddl-map-key {
  padding: 0.45rem 0.6rem !important;
  border: 1px solid rgba(31, 37, 41, 0.2);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.94);
  color: #1f2529;
  font-size: 0.74rem;
  line-height: 1.75;
}
.ddl-map-key b { font-size: 0.74rem; }
.ddl-map-key i { display: block; opacity: 0.7; font-style: normal; }
.ddl-map-key .k {
  display: inline-block;
  width: 14px;
  height: 0;
  margin-right: 0.35rem;
  vertical-align: middle;
  border-top: 4px solid #7f8b94;
}
.ddl-map-key .k.is-candidate { border-color: #D55E00; }
.ddl-map-key .k.is-boundary { border-color: #0072B2; }
.ddl-map-key .k.is-ok { border-color: #0072B2; }
.ddl-map-key .k.is-point { width: 9px; height: 9px; border: 0; border-radius: 50%; background: #7f8b94; }
.ddl-map-key .k.is-centre { width: 10px; height: 10px; border: 2px dashed #E69F00; border-radius: 50%; background: transparent; }
.ddl-map-key .k.is-kernel { border-top-width: 4px; border-color: #1f4e79; }
.ddl-map-key .k.is-foot { border-top: 2px dashed #1f4e79; }
.ddl-map-key .k.is-pts { width: 10px; height: 10px; border: 2px solid #1f4e79; border-radius: 50%; background: #fff; }

.ddl-map-cluster {
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: rgba(95, 106, 114, 0.92);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 0.8rem;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.ddl-map-focus-note {
  min-height: 1.2em;
  margin: 0.25rem 0 0.45rem;
  font-size: 0.8rem;
  opacity: 0.85;
}
.ddl-map-focus-note:empty { margin: 0; min-height: 0; }

.ddl-map-pin-link {
  margin-top: 0.3rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(31, 37, 41, 0.3);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 0.8rem;
}
.ddl-tor-map-fit-row { margin-bottom: 0.55rem; }

@media (max-width: 767px) {
  /* .is-short/.is-tall are (0,2,0) and declared outside this query, so a bare
     .ddl-map-stage in here never wins. Both are restated so the cap applies. */
  .ddl-map-stage,
  .ddl-map-stage.is-short,
  .ddl-map-stage.is-tall { height: clamp(300px, 48vh, 420px); }
}

/* ---- queue grammar: grain key + per-layer totals ------------------------- */
.ddl-inv-product-grain-key {
  margin: 0.15rem 0 0.5rem;
  font-size: 0.8rem;
  opacity: 0.8;
}
.ddl-inv-product-grain-key svg { width: 0.7em; height: 0.7em; }

.ddl-inv-product-layer-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.7rem;
  margin: 0.55rem 0 0.3rem;
}
.ddl-inv-product-layer-card {
  border: 1px solid rgba(31, 37, 41, 0.14);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  background: rgba(255, 255, 255, 0.55);
}
.ddl-inv-product-layer-card h3 {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
}
.ddl-inv-product-layer-card dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.8rem;
  margin: 0;
  font-size: 0.8rem;
}
.ddl-inv-product-layer-card dt { opacity: 0.75; }
.ddl-inv-product-layer-card dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

/* ---- analysis library: lifelines + condition ladder ---------------------- */
.ddl-tor-lifeline {
  stroke: #2f6d5f;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.55;
}
.ddl-tor-lifeline-dot { fill: #1f4e79; }
.ddl-tor-ladder-dot {
  fill: #2f6d5f;
  stroke: #ffffff;
  stroke-width: 1.4;
}

/* ---- condition-change matrix --------------------------------------------- */
.ddl-rst-product-matrix td.is-diagonal { opacity: 0.45; }
.ddl-rst-product-matrix td.is-reversal {
  color: #8a5a00;
  font-weight: 700;
  background: rgba(201, 154, 46, 0.12);
}

/* ---- track playback transport -------------------------------------------- */
.ddl-tor-playback {
  position: absolute;
  left: 10px;
  bottom: 28px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid rgba(31, 37, 41, 0.25);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  font-size: 0.8rem;
}
.ddl-tor-playback-btn {
  min-height: 32px;
  padding: 0.15rem 0.6rem;
  border: 1px solid rgba(31, 37, 41, 0.3);
  border-radius: 6px;
  background: #fff;
  font-weight: 600;
  cursor: pointer;
}
.ddl-tor-playback-btn[aria-pressed="true"] { background: #2f6d5f; color: #fff; }
.ddl-tor-playback-speed {
  min-height: 32px;
  border: 1px solid rgba(31, 37, 41, 0.3);
  border-radius: 6px;
  background: #fff;
}
.ddl-tor-playback-date {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
  white-space: nowrap;
}

/* ---- export-check modal --------------------------------------------------- */
.ddl-export-guard-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.9rem;
  margin: 0.6rem 0;
  font-size: 0.85rem;
}
.ddl-export-guard-list dt { font-weight: 700; opacity: 0.75; }
.ddl-export-guard-list dd { margin: 0; }
.ddl-export-guard-note {
  font-size: 0.8rem;
  opacity: 0.8;
  border-left: 3px solid #c99a2e;
  padding-left: 0.6rem;
}

/* =============================================================================
   POLISH PASS - one button system, segmented filters, compact control bands,
   accent infusion. Appended so the cascade retires the flat era without
   touching history above. Tokens per workspace feed shared recipes.
   ========================================================================== */

.ddl-tor-page    { --wsb-ink: var(--ddl-tor-ink);         --wsb-night: var(--ddl-tor-night-2);         --wsb-accent: var(--ddl-tor-gold);          --wsb-shadow: 43,35,52; }
.ddl-inv-product { --wsb-ink: var(--ddl-inv-product-ink); --wsb-night: var(--ddl-inv-product-night-2); --wsb-accent: var(--ddl-inv-product-agave); --wsb-shadow: 24,52,58; }
.ddl-rst-product { --wsb-ink: var(--ddl-rst-ink);         --wsb-night: var(--ddl-rst-night-2);         --wsb-accent: var(--ddl-rst-sky-deep);      --wsb-shadow: 23,52,71; }

/* ---- 1. The button system: paper buttons with real affordance ------------- */
.ddl-tor-btn, .ddl-inv-product-btn, .ddl-rst-product-btn {
  cursor: pointer;
  border: 1px solid rgba(var(--wsb-shadow), 0.22);
  background: linear-gradient(180deg, #ffffff 0%, #f7f2e9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(var(--wsb-shadow), 0.10),
    0 3px 8px rgba(var(--wsb-shadow), 0.07);
}
.ddl-tor-btn:is(:hover, :focus-visible),
.ddl-inv-product-btn:is(:hover, :focus-visible),
.ddl-rst-product-btn:is(:hover, :focus-visible) {
  border-color: var(--wsb-accent);
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf5 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(var(--wsb-shadow), 0.12),
    0 6px 14px rgba(var(--wsb-shadow), 0.10);
}
.ddl-tor-btn:active, .ddl-inv-product-btn:active, .ddl-rst-product-btn:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: inset 0 1px 3px rgba(var(--wsb-shadow), 0.16), 0 1px 2px rgba(var(--wsb-shadow), 0.08);
  transition-duration: 60ms;
}
/* Restated after the hover rules above: a phone leaves :hover latched on the
   control it just tapped, and hover and is-pressed carry equal specificity, so
   without this the held acknowledgement would be overruled by a hover lift. */
:is(.ddl-tor-btn, .ddl-inv-product-btn, .ddl-rst-product-btn,
    .ddl-tor-review-link, .ddl-inv-product-review-link, .ddl-rst-product-review-link,
    .ddl-tor-start-task, .ddl-inv-product-start-task, .ddl-rst-product-start-task).is-pressed {
  opacity: 0.62;
  transform: translateY(1px);
}
.ddl-tor-btn-primary, .ddl-inv-product-btn-primary,
:is(.ddl-tor-btn, .ddl-inv-product-btn, .ddl-rst-product-btn).is-primary {
  color: #fffaf0;
  border-color: var(--wsb-night);
  background: linear-gradient(180deg, color-mix(in srgb, var(--wsb-night) 82%, #fff), var(--wsb-night));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
              0 2px 8px color-mix(in srgb, var(--wsb-night) 40%, transparent);
}
:is(.ddl-tor-btn-primary, .ddl-inv-product-btn-primary,
    .ddl-tor-btn.is-primary, .ddl-inv-product-btn.is-primary,
    .ddl-rst-product-btn.is-primary):is(:hover, :focus-visible) {
  color: #fffaf0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--wsb-night) 68%, #fff), var(--wsb-night));
}
.ddl-btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
              0 1px 2px rgba(16, 43, 37, 0.16), 0 4px 12px rgba(16, 43, 37, 0.14);
}
.ddl-btn:is(:hover, :focus-visible) { transform: translateY(-1px); }
.ddl-btn:active { transform: translateY(1px); }

/* ---- 2. Compact control band ---------------------------------------------- */
.ddl-tor-filter-row {
  display: grid;
  grid-template-columns: minmax(150px, 200px) minmax(180px, 250px) minmax(0, 1fr);
  gap: 0.5rem 0.65rem;
  align-items: end;
  margin-bottom: 0.7rem;
  padding: 0.65rem;
  border: 1px solid var(--ddl-tor-line);
  border-radius: 10px;
  background: rgba(43, 35, 52, 0.028);
}
.ddl-tor-filter-row :is(.form-group, .shiny-input-container) {
  width: auto; min-width: 0; margin: 0;
}
.ddl-tor-filter-row .form-group:first-child { grid-column: 1 / -1; }
.ddl-tor-filter-row .form-group:last-child { margin-left: 0; min-width: 0; }
.ddl-tor-filter-row .ddl-tor-queue-actions { min-height: 0; margin: 0; justify-content: flex-end; }
.ddl-inv-product-queue-actions { min-height: 0; margin: -0.2rem 0 0.5rem; }
.ddl-rst-product-queue-actions { min-height: 0; }
@media (max-width: 900px) {
  .ddl-tor-filter-row { grid-template-columns: 1fr 1fr; }
  .ddl-tor-filter-row .ddl-tor-queue-actions { grid-column: 1 / -1; }
}

/* ---- 3. Segmented-control filter tracks ----------------------------------- */
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product)
  .shiny-input-radiogroup .shiny-options-group:has(> .radio-inline, > .form-check-inline) {
  display: inline-flex; flex-wrap: wrap; gap: 2px;
  padding: 3px;
  border: 1px solid rgba(var(--wsb-shadow), 0.16);
  border-radius: 10px;
  background: rgba(var(--wsb-shadow), 0.055);
  box-shadow: inset 0 1px 2px rgba(var(--wsb-shadow), 0.07);
}
/* This block is the LAST word on the segmented pills at equal specificity, so
   its min-height is the computed one: the 44px floor has to be restated here or
   the base rules lose it. Padding is widened to match, so the pill still reads
   as a pill inside its track rather than a tall thin box. */
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) :is(.radio-inline, .form-check-inline) {
  margin: 0; border: 0; border-radius: 7px;
  min-height: 44px; padding: 0.5rem 0.75rem;
  background: transparent; font-weight: 700;
  cursor: pointer;
}
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) :is(.radio-inline, .form-check-inline):hover {
  background: rgba(255, 255, 255, 0.72);
}
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) :is(.radio-inline, .form-check-inline):has(input:checked) {
  color: #fffaf0; background: var(--wsb-night);
  box-shadow: 0 1px 3px rgba(var(--wsb-shadow), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ---- 4. Review links become buttons --------------------------------------- */
.ddl-tor-page .ddl-tor-review-link,
.ddl-inv-product .ddl-inv-product-review-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  min-height: 34px; padding: 0.28rem 0.62rem;
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  box-shadow: 0 1px 2px rgba(var(--wsb-shadow), 0.07);
  text-decoration: none;
}
.ddl-tor-page .ddl-tor-review-link:is(:hover, :focus-visible) {
  color: #fffaf0; border-color: var(--ddl-tor-night-2); background: var(--ddl-tor-night-2);
}
.ddl-inv-product .ddl-inv-product-review-link:is(:hover, :focus-visible) {
  color: #fffaf0; border-color: var(--ddl-inv-product-agave); background: var(--ddl-inv-product-agave);
}
html.ddl-motion-ok :is(.ddl-tor-review-link, .ddl-inv-product-review-link, .ddl-rst-product-review-link) span {
  transition: transform 150ms cubic-bezier(.2, .8, .2, 1);
}
:is(.ddl-tor-review-link, .ddl-inv-product-review-link, .ddl-rst-product-review-link):hover span {
  transform: translateX(2px);
}

/* ---- 5. The way home reads as a button ------------------------------------ */
.ddl-workspace-home {
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(43, 35, 52, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 2px rgba(43, 35, 52, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.ddl-workspace-home:is(:hover, :focus-visible) { transform: translateY(-1px); }
html.ddl-motion-ok .ddl-workspace-home { transition: transform 150ms cubic-bezier(.2, .8, .2, 1), background-color 150ms; }

/* ---- 6. DT pager buttons --------------------------------------------------- */
/* `.paginate_button` is DataTables' class on the <li>, not on the control. Sizing
   the LI and centring its child made "Previous" (86px of text) overflow a 38px
   box and print on top of page 1, and pushed "Next" under the wrapper's clip, so
   a phone reader lost the control entirely. The <a class="page-link"> IS the
   button; the LI is only a wrapper. */
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) .dataTables_paginate .pagination {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 2px; margin: 0; padding: 0;
}
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) .dataTables_paginate .paginate_button {
  display: inline-flex; min-width: 0; margin: 0;
  padding: 0 !important; border: 0 !important; background: none !important;
}
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) .dataTables_paginate .paginate_button > .page-link {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.35rem 0.6rem !important;
  border: 1px solid transparent !important; border-radius: 7px !important;
}
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product)
  .dataTables_paginate .paginate_button:not(.active):not(.disabled) > .page-link:hover {
  color: var(--wsb-ink) !important;
  border-color: rgba(var(--wsb-shadow), 0.24) !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(var(--wsb-shadow), 0.1);
}

/* ---- 7. Accent infusion ---------------------------------------------------- */
:is(.ddl-tor-route-copy, .ddl-inv-product-route-copy, .ddl-rst-product-route-copy) :is(h1, h2)::after {
  content: ""; display: block; width: 64px; height: 4px; margin-top: 0.42rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--wsb-accent), transparent);
}
.ddl-tor-card-title > svg, .ddl-tor-card-head > div > svg {
  width: 30px; height: 30px; padding: 6px; border-radius: 8px;
  background: color-mix(in srgb, var(--ddl-tor-gold) 16%, transparent);
}
.ddl-inv-product-card-head > div > svg {
  width: 30px; height: 30px; padding: 6px; border-radius: 8px;
  background: color-mix(in srgb, var(--ddl-inv-product-agave) 14%, transparent);
}
.ddl-rst-product-card-head > div > svg, .ddl-rst-product-card-title > svg {
  width: 30px; height: 30px; padding: 6px; border-radius: 8px;
  background: color-mix(in srgb, var(--ddl-rst-sky) 16%, transparent);
}
.ddl-tor-page :is(table, table.dataTable) thead th { background: rgba(199, 155, 69, 0.12); }
.ddl-inv-product :is(table, table.dataTable) thead th { background: rgba(61, 120, 108, 0.10); }
.ddl-rst-product :is(table, table.dataTable) thead th { background: rgba(90, 145, 168, 0.12); }

/* ---- 8. Status pills, two notches deeper ----------------------------------- */
.ddl-tor-pill.is-alert { color: #6e2f22; border-color: rgba(182, 94, 71, 0.5);  background: rgba(182, 94, 71, 0.16); }
.ddl-tor-pill.is-gold  { color: #5f4413; border-color: rgba(199, 155, 69, 0.55); background: rgba(199, 155, 69, 0.22); }
.ddl-tor-pill.is-ok    { color: #33502f; border-color: rgba(114, 133, 107, 0.55); background: rgba(114, 133, 107, 0.18); }
.ddl-inv-product-pill.is-attention { color: #6e2f22; border-color: rgba(182, 94, 71, 0.5); background: rgba(182, 94, 71, 0.16); }
.ddl-inv-product-pill.is-gold { color: #5f4413; border-color: rgba(199, 155, 69, 0.55); background: rgba(199, 155, 69, 0.22); }
.ddl-inv-product-pill.is-ok { color: #1d4a42; border-color: rgba(61, 120, 108, 0.55); background: rgba(61, 120, 108, 0.16); }
.ddl-rst-product-pill.is-alert { color: #6e2f22; border-color: rgba(183, 100, 63, 0.5); background: rgba(183, 100, 63, 0.16); }
.ddl-rst-product-pill.is-attention { color: #6e2f22; border-color: rgba(183, 100, 63, 0.5); background: rgba(183, 100, 63, 0.16); }
.ddl-rst-product-pill.is-gold { color: #5f4413; border-color: rgba(199, 155, 69, 0.55); background: rgba(199, 155, 69, 0.22); }
.ddl-rst-product-pill.is-ok { color: #1c4356; border-color: rgba(90, 145, 168, 0.55); background: rgba(90, 145, 168, 0.18); }

/* ---- Start-page plates ------------------------------------------------------ */
.ddl-start-plate-figure {
  float: right;
  width: min(300px, 34%);
  margin: 0 0 0.8rem 1.1rem;
  border: 1px solid rgba(var(--wsb-shadow), 0.18);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(var(--wsb-shadow), 0.10), 0 8px 22px rgba(var(--wsb-shadow), 0.08);
  background: #fffdf8;
}
.ddl-start-plate-figure img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .ddl-start-plate-figure { display: none; } }

/* Map key: square swatch for mapped-patch centre marks */
.ddl-map-key .k.is-square {
  width: 11px; height: 11px;
  border: 1.5px solid #fff; border-radius: 3px;
  background: #0072B2;
  box-shadow: 0 0 0 1px rgba(31, 37, 41, 0.25);
}
.ddl-map-key .k.is-square.is-candidate { background: #D55E00; border-color: #fff; }

/* Markers in CUSTOM panes miss leaflet.css's max-width reset; without this,
   the app's responsive img rule collapses them to zero width. */
.leaflet-container .leaflet-pane img.leaflet-marker-icon { max-width: none !important; }

/* Leaflet sizes its vector SVG and marker icons in pixels inside panes that
   are themselves zero-width; the global responsive rule (img, svg, table)
   then collapses them to nothing and every drawn mark disappears while the
   DOM still reports it. Exempt everything inside a map container. */
.leaflet-container svg,
.leaflet-container img { max-width: none !important; }

/* =============================================================================
   FIELD PASS — outdoor legibility, held acknowledgement, and the two states
   the app never had words for: a table that has not arrived and a socket that
   has dropped. Appended so these rules are the last word in the cascade.
   ========================================================================== */

/* ---- 1. The subject bar compacts on phones -------------------------------
   The scope line scrolls with the page at every width (the identity bar is the
   one sticky element, revamp foundation); on a phone it compacts to two lines
   and stays opaque so it reads in sun. */
@media (max-width: 767px) {
  .ddl-tor-context,
  .ddl-inv-product-context,
  .ddl-rst-product-context {
    top: 0;
    gap: 0.3rem;
    padding: 0.42rem 0.6rem;
    /* Opaque, not translucent: backdrop-filter is off at this breakpoint and a
       pinned bar over scrolling table rows has to stay readable in sun. */
    backdrop-filter: none;
    box-shadow: 0 4px 12px rgba(43, 35, 52, 0.12);
  }
  .ddl-tor-context { background: #fffdfa; }
  .ddl-inv-product-context { background: #fffdf4; }
  .ddl-rst-product-context { background: #fffdf8; }
  .ddl-tor-context-summary,
  .ddl-inv-product-context-summary,
  .ddl-rst-product-context-summary { margin-bottom: 0.1rem !important; }
}

@media (max-width: 430px) {
  /* Two lines rather than three. A stacked control column made the pinned bar
     cost roughly a quarter of the screen, which is what pushed the earlier
     builds into un-pinning it. */
  .ddl-tor-context-controls,
  .ddl-inv-product-context-controls,
  .ddl-rst-product-context-controls {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.4rem;
  }
  .ddl-tor-context-controls :is(.form-group, .shiny-input-container),
  .ddl-inv-product-context-controls :is(.form-group, .shiny-input-container),
  .ddl-rst-product-context-controls :is(.form-group, .shiny-input-container) {
    flex: 1 1 auto;
    min-width: 0;
  }
  .ddl-tor-context-controls .ddl-tor-context-dossier,
  .ddl-inv-product-context-controls .ddl-inv-product-btn,
  .ddl-rst-product-context-controls .ddl-rst-product-btn {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }
}

/* ---- 2. The dropped websocket -------------------------------------------
   One bar of signal, a captive portal or a corporate proxy drops the socket,
   and Shiny's stock overlay is a grey dim with no words on it. A reader
   outdoors reads a silent grey screen as a broken app. This says what happened
   and what to do. The session card ([F0A] section 10, shown by app.js) hides
   this overlay; the ::after words cover the case where the card cannot show. */
#shiny-disconnected-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: block;
  opacity: 1;
  background: rgba(20, 15, 24, 0.62);
}
#shiny-disconnected-overlay::after {
  content: "The connection closed. Reload to start a fresh session; nothing was saved.";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 2rem));
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--ddl-line);
  border-left: 4px solid var(--ddl-gold);
  border-radius: var(--ddl-radius);
  color: var(--ddl-ink);
  background: var(--ddl-paper);
  box-shadow: 0 18px 48px rgba(20, 15, 24, 0.38);
  font-size: 0.92rem;
  line-height: 1.45;
}

/* ---- 3. Print keeps the record of what produced the sheet -----------------
   Hiding the filter row left a printout headed "Candidate list" with nothing
   on it saying which filter, which search or which subject produced the rows —
   a page that cannot be checked against the screen it came from. The row
   prints collapsed to one line instead: labels, the chosen values, and the
   honest count sentence beside them. Controls that only make sense on glass
   (buttons, carets, unchosen options) drop out.

   Where an Action center renders its own server-side provenance line, that line
   states the same record in one sentence and the row below is hidden instead of
   collapsed — see the three workspace print blocks. The line is print-only: on
   glass the controls themselves say what is filtered, and a sentence repeating
   them is noise. */
.ddl-print-provenance { display: none; }

@media print {
  .ddl-tor-filter-row,
  .ddl-inv-product-filters,
  .ddl-inv-product-filter-row,
  .ddl-rst-product-filters,
  .ddl-rst-product-filter-row,
  .ddl-tor-queue-actions,
  .ddl-inv-product-queue-actions,
  .ddl-rst-product-queue-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.8rem;
    min-height: 0;
    margin: 0 0 0.3rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 8pt;
  }
  :is(.ddl-tor-queue-actions, .ddl-inv-product-queue-actions,
      .ddl-rst-product-queue-actions) > :first-child {
    width: auto;
    margin-right: 0;
  }
  :is(.ddl-tor-queue-status, .ddl-inv-product-queue-status,
      .ddl-rst-product-queue-status) { margin: 0; font-size: 8pt; }
  :is(.ddl-tor-filter-row, .ddl-inv-product-filters, .ddl-inv-product-filter-row,
      .ddl-rst-product-filters, .ddl-rst-product-filter-row)
    :is(.form-group, .shiny-input-container) {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    width: auto;
    min-width: 0;
    margin: 0;
  }
  :is(.ddl-tor-filter-row, .ddl-inv-product-filters, .ddl-inv-product-filter-row,
      .ddl-rst-product-filters, .ddl-rst-product-filter-row) label {
    margin: 0;
    font-weight: 700;
  }
  :is(.ddl-tor-filter-row, .ddl-inv-product-filters, .ddl-inv-product-filter-row,
      .ddl-rst-product-filters, .ddl-rst-product-filter-row)
    :is(.form-control, .selectize-input, .selectize-control, .shiny-options-group) {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    font-size: 8pt;
  }
  :is(.ddl-tor-filter-row, .ddl-inv-product-filters, .ddl-inv-product-filter-row,
      .ddl-rst-product-filters, .ddl-rst-product-filter-row) input.form-control {
    width: 18ch !important;
  }
  :is(.ddl-tor-filter-row, .ddl-inv-product-filters, .ddl-inv-product-filter-row,
      .ddl-rst-product-filters, .ddl-rst-product-filter-row)
    :is(.selectize-dropdown, .selectize-input > input) {
    display: none !important;
  }
  :is(.ddl-tor-filter-row, .ddl-inv-product-filters, .ddl-inv-product-filter-row,
      .ddl-rst-product-filters, .ddl-rst-product-filter-row)
    .selectize-input::after {
    display: none !important;
  }
  /* A segmented control prints as the one option that is chosen; all eight
     would read as eight filters, which is the opposite of a record. */
  :is(.ddl-tor-filter-row, .ddl-inv-product-filters, .ddl-inv-product-filter-row,
      .ddl-rst-product-filters, .ddl-rst-product-filter-row)
    :is(.radio-inline, .form-check-inline) {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }
  :is(.ddl-tor-filter-row, .ddl-inv-product-filters, .ddl-inv-product-filter-row,
      .ddl-rst-product-filters, .ddl-rst-product-filter-row)
    :is(.radio-inline, .form-check-inline):not(:has(input:checked)) {
    display: none !important;
  }
  :is(.ddl-tor-queue-actions, .ddl-inv-product-queue-actions,
      .ddl-rst-product-queue-actions)
    :is(button, a, .btn, .ddl-tor-btn, .ddl-inv-product-btn, .ddl-rst-product-btn) {
    display: none !important;
  }
  /* The subject line is provenance too: which animal, patch or planting the
     sheet is about. Its controls go; the sentence stays. */
  .ddl-tor-context-summary,
  .ddl-inv-product-context-summary,
  .ddl-rst-product-context-summary {
    margin: 0 !important;
    font-size: 8pt;
    white-space: normal;
  }
  /* Nothing on paper is waiting for a server. */
  :is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product)
    :is(.shiny-html-output, .html-widget-output):empty {
    min-height: 0;
  }
  /* app.js expands every table to all rows before the dialog opens, and these
     tables are served page by page, so that expansion is a request in flight.
     DataTables paints "Processing…" over the rows while it waits; a progress
     indicator is meaningless once the sheet is paper. */
  :is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) .dataTables_processing {
    display: none !important;
  }
}

/* ---- refusal: the way out ------------------------------------------------- */
/* A refusal that names only what is wrong is a dead end. These links are built
   from the deployment allowlist, never from the rejected address. */
.ddl-refusal-ways-out { margin: 0.75rem 0 0.35rem; }
.ddl-refusal-ways-lead {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
}
.ddl-refusal-ways-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.ddl-refusal-ways-links .ddl-btn { font-size: 0.85rem; }

/* =============================================================================
   HOUSE VOICE, CARRIED INWARD — 2026-09-03
   The cover was set by someone with a printing background; the workspaces were
   not, and the workspaces are where a reader spends nearly all of their time.
   Everything here carries the register that already exists on the cover into
   the product, and repairs three defects found while doing it. Appended so the
   cascade settles it without rewriting history above.
   ========================================================================== */

/* ---- 1. Technical column heads speak the cover's mono register ------------ */
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) :is(table, table.dataTable) thead th {
  font-family: var(--ddl-mono);
  font-size: 0.62rem; letter-spacing: 0.09em; font-weight: 650;
}

/* ---- 2. Disclosure folds had no marker at all ----------------------------- */
/* Every product fold sets display:flex on its <summary>, which suppresses the
   user-agent ::marker. The folds then render as a bold title over an empty
   card with no affordance, which reads as a half-built feature. Restored once
   here rather than in each scoped block. */
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) details > summary {
  position: relative; padding-right: 2rem;
}
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) details > summary::after {
  content: ""; position: absolute; right: 0.85rem; top: 50%;
  width: 0.46em; height: 0.46em; margin-top: -0.3em;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); opacity: 0.6;
}
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) details[open] > summary::after {
  margin-top: -0.1em; transform: rotate(-135deg);
}
html.ddl-motion-ok :is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) details > summary::after {
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), margin-top 160ms cubic-bezier(.2,.8,.2,1);
}

/* ---- 3. The pager was the last stock-framework object on the page --------- */
/* The bslib primary leaked through as a saturated emerald active chip that
   maps to no token in any workspace. These are live custom properties, so the
   pager can be spent from the workspace tokens without touching the R theme. */
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) .pagination {
  --bs-pagination-color: var(--wsb-ink);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-color: rgba(var(--wsb-shadow), .20);
  --bs-pagination-hover-bg: rgba(var(--wsb-shadow), .06);
  --bs-pagination-hover-color: var(--wsb-ink);
  --bs-pagination-hover-border-color: rgba(var(--wsb-shadow), .32);
  --bs-pagination-focus-bg: rgba(var(--wsb-shadow), .08);
  --bs-pagination-active-bg: var(--wsb-night);
  --bs-pagination-active-border-color: var(--wsb-night);
  --bs-pagination-active-color: #fffaf0;
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-color: rgba(var(--wsb-shadow), .55);
  --bs-pagination-disabled-border-color: rgba(var(--wsb-shadow), .14);
}
/* This build emits li.paginate_button.page-item.active > a.page-link, never
   `.current`; the active chip is styled on the link. */
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) .dataTables_paginate .paginate_button.active > .page-link,
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) .dataTables_paginate .paginate_button.active > .page-link:hover {
  color: #fffaf0 !important;
  border-color: var(--wsb-night) !important;
  background: var(--wsb-night) !important;
}

/* ---- 4. Colour is not motion --------------------------------------------- */
/* The cover-door hover sat entirely behind a reduced-motion gate, so a desktop
   reader with reduced motion got no response at all from the only three things
   on the page. Only the transform belongs behind that gate. */
@media (hover: hover) and (pointer: fine) {
  .ddl-minimal-cover-door:hover {
    color: #2b2334; border-color: var(--ddl-accent);
    box-shadow: 0 16px 36px rgba(11,7,14,0.3), inset 0 1px rgba(255,255,255,0.62);
  }
  .ddl-minimal-cover-door:hover .ddl-minimal-cover-door-arrow {
    color: #fffaf0; border-color: var(--ddl-accent); background: var(--ddl-accent);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.ddl-motion-ok .ddl-minimal-cover-door:hover { transform: translateY(-2px); }
}

/* ---- 5. The cover rail had 178px of dead panel under the last door -------- */
@media (min-width: 901px) {
  .ddl-minimal-cover-doors {
    flex: 1 1 auto; min-height: 0;
    grid-template-rows: repeat(3, minmax(96px, 1fr));
  }
  .ddl-minimal-cover-door-index { align-self: start; padding: 0.85rem 1rem 0 0; }
  .ddl-minimal-cover-door-foot  { align-self: center; padding: 0 1rem 0 0; }
}

/* ---- 6. The registration ticks ran through the label beside them ---------- */
.ddl-field-map-sheet::before,
.ddl-field-map-sheet::after { width: 16px; height: 16px; }
.ddl-field-map-sheet::before { left: 11px; top: 11px; }
.ddl-field-map-sheet::after  { right: 11px; bottom: 11px; }
.ddl-field-map-head { padding: 1rem 1.6rem 0; }
.ddl-field-map-titleblock { margin: 0 1.6rem 1rem; }

/* ---- 7. The map sheet broke its own title block on a phone ---------------- */
@media (max-width: 767px) {
  .ddl-field-map-head, .ddl-field-map-titleblock {
    flex-direction: column; align-items: flex-start;
    gap: 0.28rem; letter-spacing: 0.07em;
  }
  .ddl-field-map-source { justify-content: flex-start; }
  /* 9px inside a 720-unit viewBox renders near 3.7px here, which is noise. */
  .ddl-field-trail-labels { display: none; }
}

/* ---- 8. The row action holds the touch floor on all three workspaces ------- */
/* Restoration already raised its Review link to 44px inside its phone block;
   its two siblings shipped 34-40px, and Review is the most-tapped control in
   the queue. The pager floor is handled in section 6 above. */
@media (max-width: 767px) {
  :is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product)
    :is(.ddl-tor-review-link, .ddl-inv-product-review-link, .ddl-rst-product-review-link) {
    min-height: 44px; padding-block: 0.5rem;
  }
  :is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) details > summary {
    min-height: 44px; display: flex; align-items: center;
  }
  .ddl-map-stage .leaflet-control-zoom a {
    width: 44px; height: 44px; line-height: 44px; font-size: 20px;
  }
  .ddl-map-stage .leaflet-control-attribution { font-size: 0.74rem; }
  .ddl-map-stage .leaflet-control-attribution a { display: inline-block; padding-block: 0.35rem; }
}

/* ---- 9. The phone control band ------------------------------------------- */
/* The 2026-08-22 round compacted the DESKTOP band to 139px; the phone band
   inherited the segmented track and grew to 457px on tortoise, pushing the
   first data row to y=1691 at 375px - roughly two screens past the answer the
   cover door promised. One scrollable row instead of four stacked ones costs
   discoverability of the right-hand filters and buys back ~146px of reach. */
@media (max-width: 767px) {
  :is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product)
    .shiny-input-radiogroup .shiny-options-group:has(> .radio-inline, > .form-check-inline) {
    display: flex; flex-wrap: nowrap;
    max-width: 100%; overflow-x: auto;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  :is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product)
    :is(.radio-inline, .form-check-inline) { flex: 0 0 auto; scroll-snap-align: start; }
}

/* ---- 10. One measure, including the bands -------------------------------- */
/* The content column, the mark strip, the header, the nav and the footer now
   hang on the same left and right edges. Before this, invasive's chrome
   overhung its own content by about 110px per side, which is the imposition
   error that made the interiors read as machine-assembled. */
body:has(.ddl-main-workspace) :is(.demo-mark-strip-workspace, .ddl-header-workspace,
  .ddl-workspace-nav, .ddl-footer-workspace) {
  width: 100%; max-width: var(--ddl-measure); margin-inline: auto;
}

/* =============================================================================
   CONFORMANCE, 2026-09-03
   Five Section 508 failures found by a WCAG 2.2 AA pass. Two of them were also
   truth-constraint breaches: the disclosure copy that says the records are
   generated was rendering invisible.
   ========================================================================== */

/* ---- 1. The restoration map card paints a dark ground ---------------------- */
/* Its children kept the light-theme ink, so the generated-precision note read
   at 1.07:1 and the "How precision is drawn" summary at 1.13:1. The marks-are-
   generated disclosure was blank space on the one route that most needs it.
   The card head already scopes a light ink; these are the blocks it missed. */
.ddl-rst-product-map-card :is(.ddl-map-notice, .ddl-map-notice-fold > summary,
  .ddl-rst-product-note, .demo-figure-footer) {
  color: #e8eef2;
}
.ddl-rst-product-map-card .ddl-rst-product-note {
  background: rgba(220, 235, 240, 0.10);
  border-color: rgba(220, 235, 240, 0.22);
}
.ddl-rst-product-map-card .demo-chip { color: #2b2334; }

/* ---- 2. Focus was invisible on twelve dropdowns --------------------------- */
/* selectize ships `.selectize-input > input:focus { outline: none !important }`,
   which kills the global ring, and each workspace's own `border-color:
   ... !important` out-specifies selectize's .focus border. Measured on blur to
   focus: zero changed pixels of 1008 on tortoise and invasive. Restoration was
   fine only because it declares its own focus rule. This is that rule, for the
   two siblings; the border needs !important to beat their base, the outline
   does not. */
.ddl-tor-page :is(.selectize-input, input.form-control, select.form-control).focus,
.ddl-tor-page :is(input.form-control, select.form-control):focus,
.ddl-inv-product :is(.selectize-input, input.form-control, select.form-control).focus,
.ddl-inv-product :is(input.form-control, select.form-control):focus {
  border-color: var(--ddl-sky) !important;
  outline: 3px solid var(--ddl-sky);
  outline-offset: 2px;
}

/* ---- 3. Vertical radio groups sat at 21px --------------------------------- */
/* radioButtons(inline = FALSE) renders `.radio > label`, which the floors gate
   never matched, so every vertical group in the build was below both the 24px
   criterion and the house 44px floor. */
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) :is(.radio, .form-check) > label {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ---- 11. The year window is two selects, not a slider -------------------- */
/* Shiny's sliderInput renders ionRangeSlider, whose only tab stop is an
   unnamed track span with both handles at tabindex -1 and no ARIA at all, so
   it was unreachable by keyboard and invisible to assistive technology. */
.ddl-tor-year-window {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  align-items: end;
}
.ddl-tor-year-window .form-group { margin-bottom: 0.35rem; }
.ddl-tor-year-window label {
  font-family: var(--ddl-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ddl-tor-muted);
}
.ddl-tor-year-window select.form-control { min-height: 44px; }

/* =============================================================================
   PHONE FIELD-PREP ECONOMY, 2026-09-07
   The Action routes should reach the queue without spending a second screen on
   repeated summary furniture. This is deliberately route-scoped: the six-way
   navigation, generated-data disclosure, warnings, counts, controls and tables
   remain present, and every interactive target keeps its existing 44px floor.
   ========================================================================== */
@media (max-width: 430px) {
  /* Shiny gives inputs an inline 300px width. Inside the Invasive phone card
     the content box is narrower, so all four queue controls widened the whole
     document to 338px at a 320px viewport. `!important` is required to beat
     that inline width; the scope prevents this repair becoming a global reset. */
  .ddl-inv-action-page .ddl-inv-product-filters > .shiny-input-container {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
  }
  /* Review focuses this card after scrolling it to block-start. Leave room for
     the preserved two-line sticky animal context so the record heading and its
     first fact remain visible rather than landing underneath that bar. */
  .ddl-tor-action-page #tor-selected-animal {
    scroll-margin-top: 7rem;
  }

  :is(.ddl-tor-action-page, .ddl-inv-action-page, .ddl-rst-product-action)
    :is(.ddl-tor-route-head, .ddl-inv-product-route-head, .ddl-rst-product-route-head) {
    gap: 0.5rem;
    margin-bottom: 0.58rem;
  }
  :is(.ddl-tor-action-page, .ddl-inv-action-page, .ddl-rst-product-action)
    :is(.ddl-tor-route-copy, .ddl-inv-product-route-copy, .ddl-rst-product-route-copy)
    :is(h1, h2) {
    font-size: 1.7rem;
  }
  :is(.ddl-tor-action-page, .ddl-inv-action-page, .ddl-rst-product-action)
    :is(.ddl-tor-route-copy, .ddl-inv-product-route-copy, .ddl-rst-product-route-copy) > p {
    margin-top: 0.18rem;
    font-size: 0.8rem;
  }

  .ddl-tor-action-page .ddl-tor-card,
  .ddl-inv-action-page :is(.ddl-inv-product-card, .ddl-inv-product-queue-card),
  .ddl-rst-product-action :is(.ddl-rst-product-card, .ddl-rst-product-queue-card) {
    margin-bottom: 0.68rem;
    padding: 0.72rem;
  }
  .ddl-tor-action-page .ddl-tor-card-head,
  .ddl-inv-action-page .ddl-inv-product-card-head {
    gap: 0.45rem;
    margin-bottom: 0.55rem;
    padding-bottom: 0.5rem;
  }
  .ddl-rst-product-action .ddl-rst-product-card-head {
    gap: 0.45rem;
    margin: -0.72rem -0.72rem 0.55rem;
    padding: 0.58rem 0.68rem;
  }
  /* The Monitoring-list head has three direct flex items: title, disclosure
     chip and as-of date. The latter two are intentionally unbreakable, so give
     them their own row instead of letting their combined min-content width
     widen a 320px document. */
  .ddl-rst-product-action .ddl-rst-product-queue > .ddl-rst-product-card-head {
    flex-wrap: wrap;
  }
  .ddl-rst-product-action .ddl-rst-product-queue > .ddl-rst-product-card-head > :first-child {
    flex: 1 1 100%;
    min-width: 0;
  }
  .ddl-rst-product-action .ddl-rst-product-queue > .ddl-rst-product-card-head > .ddl-rst-product-asof {
    margin-left: auto;
  }

  .ddl-inv-action-page .ddl-inv-product-hero,
  .ddl-rst-product-action .ddl-rst-product-hero {
    gap: 0.52rem;
  }
  .ddl-rst-product-action .ddl-rst-product-hero { margin-bottom: 0.68rem; }
  .ddl-tor-action-page .ddl-tor-answer-row { gap: 0.55rem; }
  .ddl-tor-action-page .ddl-tor-field-note { margin-block: 0.55rem; }

  /* These are three parts of one answer, not three independent cards. Keeping
     them in one compact row saves roughly a summary-card height while their
     labels, numbers and non-colour status rails remain intact. */
  .ddl-tor-action-page .ddl-tor-worklist-card > .ddl-tor-answer-row > .ddl-tor-stats,
  .ddl-inv-action-page .ddl-inv-product-hero > .ddl-inv-product-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem;
  }
  .ddl-tor-action-page .ddl-tor-worklist-card > .ddl-tor-answer-row > .ddl-tor-stats > .ddl-tor-stat,
  .ddl-inv-action-page .ddl-inv-product-hero > .ddl-inv-product-stats > .ddl-inv-product-stat {
    padding: 0.44rem 0.38rem;
  }
  .ddl-tor-action-page .ddl-tor-worklist-card > .ddl-tor-answer-row > .ddl-tor-stats > .ddl-tor-stat span,
  .ddl-inv-action-page .ddl-inv-product-hero > .ddl-inv-product-stats > .ddl-inv-product-stat span {
    overflow-wrap: anywhere;
    line-height: 1.2;
  }
}

/* =============================================================================
   REVAMP SECTIONS. One block per package, in this fixed order. A package edits
   this sheet only between its own two markers. No !important outside the two
   foundation sections (F0A, F0B); tokens only, never a raw hex, inside a package
   section.
   ========================================================================== */

/* ==== [F0A] chrome, tokens, light pin, tables, print base ==== */
/* The revamp foundation's layer. Everything below is the shell every workspace
   route shares: the light pin, the component tokens, the ribbon, the identity
   bar, the task row, the page frame, tables, the busy signal, dialogs and the
   print base. It sits after every older rule on purpose, so it is the last
   word on the chrome; the package sections that follow build on its tokens.

   THE LIGHT PIN. One appearance everywhere. The head script sets
   data-bs-theme="light" before the first paint; this makes native controls
   (scrollbars, form widgets, date pickers) agree on a dark-OS phone. */
:root { color-scheme: light; }

/* The grey seam under a short page: the body ground now always reaches the
   bottom of the viewport. */
html, body { min-height: 100svh; }

/* ---- 1. Tokens ---------------------------------------------------------------
   A component layer mapped from the workspace bridge tokens. No new hues:
   every value below is a colour one of the three workspaces already owns.
     chrome   the ribbon and identity bar ground (the project night)
     canvas   the flat page ground (the project paper); cards sit lighter
     accent   selection: a selected row, a chosen pill, the open pane
     attention gold: attention pills, the active tab's rail, the pane flash
     alert    the workspace terracotta, genuine warnings only             */
body:has(.ddl-main-workspace) {
  --ddl-c-gutter: clamp(16px, 2.2vw, 28px);
  --ddl-c-bleed-pad: max(var(--ddl-c-gutter), calc((100% - var(--ddl-measure)) / 2));
  --ddl-c-card: var(--ddl-paper);
  --ddl-c-ink: var(--ddl-ink);
  --ddl-c-muted: var(--ddl-muted);
  --ddl-c-hairline: rgba(43, 35, 52, 0.12);
  --ddl-c-on-chrome: #fffdf8;
  --ddl-c-on-chrome-2: rgba(255, 253, 248, 0.78);
  --ddl-c-on-chrome-3: rgba(255, 253, 248, 0.58);
  --ddl-c-chrome-line: rgba(255, 253, 248, 0.16);
  --ddl-c-attention: var(--ddl-gold);
  --ddl-c-ok: var(--ddl-agave);
  --ddl-c-info: var(--ddl-sky);
  --ddl-c-checked: #8d8794;
  --ddl-c-focus: var(--ddl-sky);
  --ddl-c-focus-dark: #f4ecdf;
  --ddl-c-select-bg: color-mix(in srgb, var(--ddl-c-accent) 10%, var(--ddl-c-card));
  --ddl-c-select-bar: var(--ddl-c-accent);
  --ddl-c-preview-bg: color-mix(in srgb, var(--ddl-c-accent) 5%, var(--ddl-c-card));
  --ddl-c-tint: color-mix(in srgb, var(--ddl-c-accent) 7%, var(--ddl-c-card));
  --ddl-c-zebra: color-mix(in srgb, var(--ddl-c-canvas) 55%, var(--ddl-c-card));
}
body:has(.ddl-main-workspace.ddl-theme-tortoise) {
  --ddl-c-chrome: var(--ddl-tor-night);
  --ddl-c-chrome-2: var(--ddl-tor-night-2);
  --ddl-c-canvas: #f7efe1;
  --ddl-c-accent: var(--ddl-tor-mauve);
  --ddl-c-accent-ink: var(--ddl-tor-mauve-ink);
  --ddl-c-alert: var(--ddl-tor-alert);
}
body:has(.ddl-main-workspace.ddl-theme-invasive) {
  --ddl-c-chrome: var(--ddl-inv-product-night);
  --ddl-c-chrome-2: var(--ddl-inv-product-night-2);
  --ddl-c-canvas: #f7f0df;
  --ddl-c-accent: var(--ddl-inv-product-agave);
  --ddl-c-accent-ink: #2f6d62;
  --ddl-c-alert: var(--ddl-inv-product-rust);
}
body:has(.ddl-main-workspace.ddl-theme-restoration) {
  --ddl-c-chrome: var(--ddl-rst-night);
  --ddl-c-chrome-2: var(--ddl-rst-night-2);
  --ddl-c-canvas: var(--ddl-rst-bone);
  --ddl-c-accent: var(--ddl-rst-sky-deep);
  --ddl-c-accent-ink: var(--ddl-rst-sky-deep);
  --ddl-c-alert: var(--ddl-rst-copper);
}

/* ---- 2. The page ground and the frame ----------------------------------------
   Flat project paper. The two radial washes and the graph-paper grid belong
   to the editorial past of these routes; a working surface is one calm ground
   under lighter cards. The chrome bands run the full width of the window and
   hang their content on the same 1240px column as the page. */
body:has(.ddl-main-workspace.ddl-theme-tortoise),
body:has(.ddl-main-workspace.ddl-theme-invasive),
body:has(.ddl-main-workspace.ddl-theme-restoration) {
  background: var(--ddl-c-canvas);
  background-size: auto;
}
body:has(.ddl-main-workspace) > .container-fluid {
  max-width: none;
  padding-inline: 0;
}
html:has(.ddl-main-workspace) { scroll-padding-top: calc(var(--ddl-c-chrome-h, 0px) + 12px); }

/* ---- 3. The ribbon: the one demo mark, and the data-source disclosure ------ */
body:has(.ddl-main-workspace) .demo-mark-strip.demo-mark-strip-workspace {
  display: block;
  width: auto;
  max-width: none;
  min-height: 24px;
  margin: 0;
  padding: 0 var(--ddl-c-bleed-pad);
  border: 0;
  border-bottom: 1px solid var(--ddl-c-chrome-line);
  border-radius: 0;
  background: var(--ddl-c-chrome);
  box-shadow: none;
  color: var(--ddl-c-on-chrome-2);
  font-size: 0.74rem;
  line-height: 1.3;
}
.ddl-c-source > summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: max-content;
  max-width: 100%;
  min-height: 23px;
  cursor: pointer;
  list-style: none;
}
.ddl-c-source > summary::-webkit-details-marker { display: none; }
.ddl-c-source > summary::marker { content: ""; }
body:has(.ddl-main-workspace) .demo-mark-strip-workspace .demo-mark-workspace-text {
  color: var(--ddl-c-on-chrome);
  font-family: var(--ddl-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ddl-c-source-chev {
  display: inline-block;
  color: var(--ddl-c-on-chrome-3);
  font-size: 0.74rem;
  line-height: 1;
}
.ddl-c-source[open] .ddl-c-source-chev { transform: rotate(180deg); }
.ddl-c-source > summary:hover .ddl-c-source-chev { color: var(--ddl-c-on-chrome); }
.ddl-c-source-body { padding: 0.1rem 0 0.55rem; }
.ddl-c-source-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ddl-c-on-chrome-2);
  font-size: 0.8rem;
}
.ddl-c-source-facts li { display: flex; align-items: baseline; gap: 0.45rem; }
.ddl-c-source-facts li::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ddl-c-on-chrome-3);
  transform: translateY(-2px);
}

/* ---- 4. The identity bar: the only sticky element ---------------------------- */
body:has(.ddl-main-workspace) .ddl-header.ddl-header-workspace {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: auto;
  max-width: none;
  height: 56px;
  min-height: 56px;
  margin: 0;
  padding: 0 var(--ddl-c-bleed-pad);
  border: 0;
  border-radius: 0;
  background: var(--ddl-c-chrome);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  color: var(--ddl-c-on-chrome);
}
body:has(.ddl-main-workspace) .ddl-header-workspace .ddl-brand { min-width: 0; min-height: 44px; gap: 0.62rem; }
body:has(.ddl-main-workspace) .ddl-header-workspace .ddl-brand-text { min-width: 0; }
body:has(.ddl-main-workspace) .ddl-header-workspace .ddl-brand-name {
  overflow: hidden;
  color: var(--ddl-c-on-chrome);
  font-size: 1.02rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body:has(.ddl-main-workspace) .ddl-header-workspace .ddl-brand-org {
  display: block;
  color: var(--ddl-c-on-chrome-3);
  font-size: 0.62rem;
}
body:has(.ddl-main-workspace) .ddl-header-workspace :focus-visible {
  outline-color: var(--ddl-c-focus-dark);
  outline-offset: 2px;
}

.ddl-c-utils,
.ddl-c-utils-desk {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
/* The pills declare their whole shape, so no older rule can re-cut them: a
   retired 767px phone rail once stacked "← All projects" into a 74x48 block
   on every tablet between 721 and 767px. */
body:has(.ddl-main-workspace) .ddl-c-utils .ddl-workspace-home,
body:has(.ddl-main-workspace) .ddl-c-utils .ddl-c-guide {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: auto;
  min-height: 36px;
  padding: 0 0.9rem;
  line-height: 1.5;
  text-align: left;
  border: 1px solid var(--ddl-c-chrome-line);
  border-radius: var(--ddl-r-pill);
  background: transparent;
  color: var(--ddl-c-on-chrome-2);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
}
body:has(.ddl-main-workspace) .ddl-c-utils .ddl-workspace-home:hover,
body:has(.ddl-main-workspace) .ddl-c-utils .ddl-c-guide:hover {
  border-color: rgba(255, 253, 248, 0.42);
  background: rgba(255, 253, 248, 0.08);
  color: var(--ddl-c-on-chrome);
}
.ddl-c-home-arrow { font-size: 0.95rem; line-height: 1; }

/* The honest sign-in, as one quiet pill: the same disabled button and the
   same note, dashed to read as a place a real sign-in would sit. */
body:has(.ddl-main-workspace) .ddl-cover-signin.is-quiet {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  min-height: 36px;
  padding: 0 0.9rem;
  border: 1px dashed var(--ddl-c-chrome-line);
  border-radius: var(--ddl-r-pill);
}
body:has(.ddl-main-workspace) .ddl-cover-signin.is-quiet .ddl-cover-signin-button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ddl-c-on-chrome-2);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}
body:has(.ddl-main-workspace) .ddl-cover-signin.is-quiet .ddl-cover-signin-note {
  display: inline;
  max-width: none;
  color: var(--ddl-c-on-chrome-3);
  font-size: 0.74rem;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}
body:has(.ddl-main-workspace) .ddl-cover-signin.is-quiet .ddl-cover-signin-note::before {
  content: "\00b7";
  margin: 0 0.45rem;
}
@media (max-width: 1080px) {
  /* The note stays in the page (it describes the button) but leaves the bar
     before it can crowd the way home. */
  body:has(.ddl-main-workspace) .ddl-header-workspace .ddl-cover-signin.is-quiet .ddl-cover-signin-note {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---- 5. The task row -----------------------------------------------------------
   Six equal tabs, the same six in every workspace. The chosen tab is filled
   with the project ink and carries the 2px gold rail; the Action center count
   and the day-plan pill ride on the row. It scrolls with the page. */
body:has(.ddl-main-workspace) .ddl-workspace-nav {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: auto;
  max-width: none;
  min-height: 48px;
  margin: 0;
  padding: 0 var(--ddl-c-bleed-pad);
  border: 0;
  border-bottom: 1px solid var(--ddl-c-hairline);
  border-radius: 0;
  background: var(--ddl-c-card);
  box-shadow: 0 1px 2px rgba(43, 35, 52, 0.04);
  color: var(--ddl-c-ink);
}
/* While the day-plan pill is hidden the row is one track: an empty second
   track would keep its gap and stop the six tabs short of the column edge
   the identity bar above ends on. */
body:has(.ddl-main-workspace) .ddl-workspace-nav:not(:has(> .ddl-day-chip:not([hidden]))) {
  grid-template-columns: minmax(0, 1fr);
}
body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route-scroll {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-self: stretch;
  gap: 0;
  min-width: 0;
  padding: 0;
  overflow: visible;
  border-inline-start: 1px solid var(--ddl-c-hairline);
}
body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
  min-height: 48px;
  padding: 0 0.7rem;
  border: 0;
  border-inline-end: 1px solid var(--ddl-c-hairline);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ddl-ink-2);
  text-align: center;
  text-decoration: none;
  transform: none;
}
body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route::after { display: none; }
body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--ddl-c-accent);
  font-size: 0.95rem;
}
body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route-label {
  min-width: 0;
  overflow: hidden;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route:hover {
  background: var(--ddl-c-tint);
  color: var(--ddl-c-ink);
  transform: none;
  box-shadow: none;
}
body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route:focus-visible {
  z-index: 1;
  outline: 3px solid var(--ddl-c-focus);
  outline-offset: -3px;
  background: var(--ddl-c-tint);
  transform: none;
}
body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route.is-on {
  background: var(--ddl-c-chrome-2);
  color: var(--ddl-c-on-chrome);
  box-shadow: inset 0 2px 0 var(--ddl-c-attention);
}
body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route.is-on .ddl-workspace-route-icon {
  color: var(--ddl-c-on-chrome-2);
}
body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route.is-on:focus-visible {
  outline-color: var(--ddl-c-focus-dark);
  background: var(--ddl-c-chrome-2);
}
.ddl-nav-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 0.4rem;
  border-radius: var(--ddl-r-pill);
  background: var(--ddl-c-attention);
  color: var(--ddl-ink);
  font-family: var(--ddl-mono);
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
body:has(.ddl-main-workspace) .ddl-day-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 0.9rem;
  border: 1px solid var(--ddl-c-accent);
  border-radius: var(--ddl-r-pill);
  background: var(--ddl-c-select-bg);
  color: var(--ddl-c-accent-ink);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
body:has(.ddl-main-workspace) .ddl-day-chip:hover { background: var(--ddl-c-tint); }
.ddl-day-chip[hidden] { display: none !important; }
@media (max-width: 960px) {
  /* Six labels need the room; the icons go before a label would clip. */
  body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route-icon { display: none; }
  body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route { padding: 0 0.4rem; }
}
@media (max-width: 1100px) {
  /* A counted Action center puts its count under its label, in place of the
     icon, rather than squeezing "Action center" into an ellipsis beside a
     three-digit count. Label and count stay inside the 48px row (44px on a
     phone), and an "Opening…" press note takes the count's line. */
  body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route:has(> .ddl-nav-badge) {
    flex-direction: column;
    gap: 2px;
  }
  body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route:has(> .ddl-nav-badge) .ddl-workspace-route-icon {
    display: none;
  }
  body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route:has(> .ddl-nav-badge) .ddl-c-opening::before {
    content: none;
  }
}
@media (max-width: 767px) {
  /* The tablet band's six tabs: "Data & methods" needs the last pixels. */
  body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route { padding: 0 0.3rem; }
  body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route-label { font-size: 0.8rem; }
}

/* The press acknowledgement for the shared components, matching app.js's
   ACK list, and the "Opening…" state of a control whose click leaves the
   page. */
:is(.ddl-c-btn, .ddl-c-chip, .ddl-c-pill, .ddl-c-fold > summary, .ddl-day-chip).is-pressed {
  opacity: 0.62;
  transform: translateY(1px);
}
.ddl-c-opening {
  color: inherit;
  font-family: var(--ddl-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.85;
  white-space: nowrap;
}
body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route.is-opening {
  background: var(--ddl-c-tint);
  color: var(--ddl-c-ink);
  opacity: 1;
}
body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route .ddl-c-opening::before {
  content: "\00b7";
  margin-right: 0.35rem;
}
body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route.is-opening .ddl-nav-badge {
  display: none;
}
.ddl-minimal-cover-door.is-opening .ddl-c-opening {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 3;
  padding: 0.2rem 0.55rem;
  border-radius: var(--ddl-r-pill);
  background: rgba(20, 15, 24, 0.82);
  color: #fffdf8;
}
.ddl-day-chip.is-opening .ddl-c-opening { margin-left: 0.4rem; }

/* ---- 6. The page head: H1 first, then the scope line --------------------------
   H1 2.1rem on a working route (2.6rem on Start), the serif at weight 400;
   the lede one line under it; then the scope line, which scrolls with the
   page. The workspace name already sits in the identity bar, so the eyebrow
   that repeated it goes. The scope line is still first in the markup; the
   route packages move it in the markup when they recompose their bodies. */
body:has(.ddl-main-workspace) .ddl-main.ddl-main-workspace {
  max-width: calc(var(--ddl-measure) + 2 * var(--ddl-c-gutter));
  margin: 0 auto;
  padding: 1.25rem var(--ddl-c-gutter) 0.75rem;
  color: var(--ddl-c-ink);
}
.ddl-main-workspace :is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product):has(>
  :is(.ddl-tor-context, .ddl-inv-product-context, .ddl-rst-product-context)) {
  display: flex;
  flex-direction: column;
}
.ddl-main-workspace :is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) >
  :is(.ddl-tor-route-head, .ddl-inv-product-route-head, .ddl-rst-product-route-head) {
  order: -1;
}
.ddl-main-workspace :is(.ddl-tor-route-head, .ddl-inv-product-route-head, .ddl-rst-product-route-head) {
  align-items: flex-end;
  gap: 1rem;
  margin: 0 0 0.9rem;
}
.ddl-main-workspace :is(.ddl-inv-product-route-copy, .ddl-rst-product-route-copy) > :is(.ddl-inv-product-eyebrow, .ddl-rst-product-eyebrow) { display: none; }
/* A Data & methods pane heads itself with an h2 under a visually hidden page
   h1; that h2 is the title a reader sees, so it takes the same measure. */
.ddl-main-workspace :is(.ddl-tor-route-copy, .ddl-inv-product-route-copy, .ddl-rst-product-route-copy) > :is(h1, h2) {
  margin: 0;
  color: var(--ddl-c-ink);
  font-family: var(--ddl-display);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.ddl-main-workspace :is(.ddl-tor-route-copy, .ddl-inv-product-route-copy, .ddl-rst-product-route-copy) > :is(h1, h2)::after {
  display: none;
}
.ddl-main-workspace :is(.ddl-tor-start-page, .ddl-inv-product-start, .ddl-rst-product-start)
  :is(.ddl-tor-route-copy, .ddl-inv-product-route-copy, .ddl-rst-product-route-copy) > h1 {
  font-size: 2.6rem;
}
.ddl-main-workspace :is(.ddl-tor-route-copy, .ddl-inv-product-route-copy, .ddl-rst-product-route-copy) > p {
  max-width: 72ch;
  margin: 0.35rem 0 0;
  color: var(--ddl-c-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}
/* The scope line: summary, picker and the primary button on one row. */
.ddl-main-workspace :is(.ddl-tor-context, .ddl-inv-product-context, .ddl-rst-product-context) {
  position: static;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0 0 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ddl-c-hairline);
  border-radius: var(--ddl-r-md);
  background: var(--ddl-c-card);
  box-shadow: none;
}
@media (min-width: 721px) {
  .ddl-main-workspace :is(.ddl-tor-context-controls, .ddl-inv-product-context-controls, .ddl-rst-product-context-controls) {
    align-items: center;
  }
  .ddl-main-workspace :is(.ddl-tor-context-controls, .ddl-inv-product-context-controls, .ddl-rst-product-context-controls)
    > .shiny-input-container {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
  }
  .ddl-main-workspace :is(.ddl-tor-context-controls, .ddl-inv-product-context-controls, .ddl-rst-product-context-controls)
    > .shiny-input-container > label {
    margin: 0;
    color: var(--ddl-c-muted);
    font-size: 0.8rem;
    font-weight: 650;
    white-space: nowrap;
  }
  .ddl-main-workspace :is(.ddl-tor-context-controls, .ddl-inv-product-context-controls, .ddl-rst-product-context-controls)
    > .shiny-input-container > div {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ---- 7. Tables -------------------------------------------------------------------
   One real header that scrolls with its body inside its own wrapper (the page
   never scrolls sideways); a mono uppercase head; zebra rows and a hover
   tint; the selected row in the accent with a 3px bar, the previewed row at
   half that; numbers right-aligned in tabular figures. */
.ddl-main-workspace .ddl-c-dt-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.ddl-main-workspace .ddl-c-dt-scroll > table.dataTable {
  width: 100% !important;
  margin: 0 !important;
}
.ddl-main-workspace table.dataTable thead th,
.ddl-main-workspace :is(.ddl-tor-table, .ddl-inv-product-table, .ddl-rst-product-table) thead th {
  color: var(--ddl-c-muted) !important;
  background: color-mix(in srgb, var(--ddl-c-canvas) 70%, var(--ddl-c-card)) !important;
  font-family: var(--ddl-mono);
  font-size: 0.68rem !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
  text-wrap: balance;
  vertical-align: bottom;
}
.ddl-main-workspace table.dataTable tbody tr > td {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
@media (max-width: 720px) {
  /* A phone table scrolls inside its wrapper, so a head keeps its words on
     one line rather than stacking one word per line over a narrow column. */
  .ddl-main-workspace table.dataTable thead th { white-space: nowrap; }
  /* A phone pager keeps one row. With app.js's five-number window, the two
     worded ends were what pushed "Next" onto a line of its own; they become
     44px arrows, and their words stay in the buttons as the accessible names.
     The hover twin matters: a tapped button keeps :hover on a phone. */
  .ddl-main-workspace :is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product)
    .dataTables_paginate .paginate_button:is(.previous, .next) > .page-link,
  .ddl-main-workspace :is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product)
    .dataTables_paginate .paginate_button:is(.previous, .next) > .page-link:hover {
    position: relative;
    width: 44px;
    padding: 0 !important;
    overflow: hidden;
    color: transparent !important;
    white-space: nowrap;
  }
  .ddl-main-workspace .dataTables_paginate .paginate_button:is(.previous, .next) > .page-link::after {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--ddl-c-ink);
    font-size: 1.05rem;
  }
  .ddl-main-workspace .dataTables_paginate .paginate_button.previous > .page-link::after { content: "\2190"; }
  .ddl-main-workspace .dataTables_paginate .paginate_button.next > .page-link::after { content: "\2192"; }
  .ddl-main-workspace .dataTables_paginate .paginate_button.disabled > .page-link::after { color: var(--ddl-c-muted); opacity: 0.5; }
  /* The ellipsis is not a control, so it keeps its word and gives up the 44px
     box, and the buttons sit edge to edge: "← 1 2 3 … 25 →" then holds one
     row from 360px. Where it still cannot (a 320px phone, or five numbered
     pages at 375px), app.js compacts the pager to the two arrows around the
     current page; the table's info line above it still states the range and
     the total. */
  .ddl-main-workspace :is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) .dataTables_paginate .pagination { gap: 0; }
  .ddl-main-workspace :is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product)
    .dataTables_paginate .paginate_button.disabled:not(.previous):not(.next) > .page-link {
    min-width: 0;
    padding: 0 0.2rem !important;
  }
  .ddl-main-workspace .dataTables_paginate.is-compact .paginate_button:not(.previous):not(.next):not(.active) {
    display: none !important;
  }
}
.ddl-main-workspace table.dataTable tbody tr:nth-child(odd) > td { background: var(--ddl-c-card) !important; }
.ddl-main-workspace table.dataTable tbody tr:nth-child(even) > td { background: var(--ddl-c-zebra) !important; }
.ddl-main-workspace table.dataTable tbody tr:hover > td { background: var(--ddl-c-tint) !important; }
.ddl-main-workspace table.dataTable tbody tr.is-previewed > td { background: var(--ddl-c-preview-bg) !important; }
.ddl-main-workspace table.dataTable tbody tr.is-selected > td { background: var(--ddl-c-select-bg) !important; }
.ddl-main-workspace table.dataTable tbody tr.is-selected > td:first-child {
  box-shadow: inset 3px 0 0 var(--ddl-c-select-bar) !important;
}
.ddl-main-workspace table.dataTable :is(td, th).dt-right,
.ddl-main-workspace :is(.ddl-tor-table, .ddl-inv-product-table, .ddl-rst-product-table) .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ddl-main-workspace :is(.ddl-tor-table, .ddl-inv-product-table, .ddl-rst-product-table) tbody tr:nth-child(even) > td {
  background: var(--ddl-c-zebra);
}
.ddl-main-workspace :is(.ddl-tor-table, .ddl-inv-product-table, .ddl-rst-product-table) tbody tr:hover > td {
  background: var(--ddl-c-tint);
}

/* ---- 8a. A one-column filter grid shrinks to the phone ----------------------
   Shiny gives each input container a definite 300px width, and a bare 1fr
   track takes that as its minimum, so the Restoration filter grid could not
   narrow past 300px and pushed the Action center and the Plants register wider
   than a 320px screen. A zero minimum lets the track, and the capped input in
   it, fit the card. */
@media (max-width: 480px) {
  .ddl-main-workspace :is(.ddl-rst-product-filter-row, .ddl-rst-product-filters) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- 8. Controls: 44px radio rows with round inputs ---------------------------
   A vertical radio group was stretched into 40px ovals by a phone rule that
   gave every input a 44px floor. The row is the tap target; the input stays a
   20px circle inside it. */
.ddl-main-workspace .form-check { min-height: 44px; }
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product)
  .shiny-input-radiogroup:not(:has(.radio-inline, .form-check-inline)) :is(.radio, .form-check) > label,
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product)
  .shiny-input-radiogroup:not(:has(.radio-inline, .form-check-inline)) :is(.radio, .form-check) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  margin: 0;
}
/* The input inside such a row is a 20px circle, not a target of its own: the
   row above carries the 44px floor. A stacked item is a wrapper div around
   its label (an inline pill is a bare label), which is what this selects. */
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product)
  .shiny-options-group > div > label > input:is([type="radio"], [type="checkbox"]) {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-height: 0 !important;
  margin: 0;
}
:is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product) .shiny-input-radiogroup input[type="radio"] {
  border-radius: 50%;
}

/* The shared caption: the honest one-line notes a component prints under a
   figure or a list. Held at the caption floor (check_ui_floors.mjs). */
.ddl-c-product-note {
  margin: 0.5rem 0 0;
  color: var(--ddl-c-muted, var(--ddl-muted));
  font-size: 0.85rem;
  line-height: 1.45;
}

/* The shell's two buttons (the session card's Reload, the guide's Print) in the
   shared kit's grammar: a quiet button, and .is-primary for the one action
   that is filled. The kit's own [F0B] rules for the same class follow and
   take over at merge without changing the look. */
.ddl-c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.95rem;
  border: 1px solid color-mix(in srgb, var(--ddl-c-chrome, var(--ddl-night)) 26%, transparent);
  border-radius: var(--ddl-r-sm);
  background: var(--ddl-c-card, var(--ddl-paper));
  color: var(--ddl-ink);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.ddl-c-btn:hover { background: var(--ddl-c-tint, var(--ddl-paper)); color: var(--ddl-ink); }
.ddl-c-btn.is-primary {
  border-color: var(--ddl-c-chrome, var(--ddl-night));
  background: var(--ddl-c-chrome, var(--ddl-night));
  color: #fffdf8;
}
.ddl-c-btn.is-primary:hover {
  background: color-mix(in srgb, var(--ddl-c-chrome, var(--ddl-night)) 86%, #fffdf8);
  color: #fffdf8;
}

/* ---- 9. Status pills: attention is not alert --------------------------------
   Restoration drew both tones in one terracotta. Alert keeps the filled
   terracotta; attention is the gold outline, so a genuine warning is the only
   thing on the list in that hue. */
.ddl-main-workspace .ddl-rst-product-pill.is-attention {
  color: #5f4413;
  border-color: rgba(199, 155, 69, 0.75);
  background: rgba(199, 155, 69, 0.1);
}

/* ---- 10. The busy signal and the session card --------------------------------- */
.ddl-c-busy {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1031;
  height: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ddl-c-accent, var(--ddl-sky)) 22%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms linear 0s;
}
.ddl-c-busy::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 34%;
  background: var(--ddl-c-accent, var(--ddl-sky));
}
.ddl-c-busy.is-on {
  opacity: 1;
  transition: opacity 120ms linear 150ms;
}
html.ddl-motion-ok .ddl-c-busy.is-on::before { animation: ddl-c-busy-slide 1.1s ease-in-out infinite; }
@keyframes ddl-c-busy-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(300%); }
}
/* The named status sits in the lower right corner, clear of the tab row and
   of every control; above the day plan's bar when that bar is showing. */
.ddl-c-working {
  position: fixed;
  right: var(--ddl-c-gutter, 16px);
  bottom: 16px;
  z-index: 1031;
  pointer-events: none;
}
body:has(.ddl-day-card:not([data-ddl-day-count="0"])) .ddl-c-working { bottom: 72px; }
.ddl-c-working-text {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--ddl-r-pill);
  background: var(--ddl-c-chrome, var(--ddl-night));
  box-shadow: var(--ddl-shadow-2);
  color: #fffdf8;
  font-family: var(--ddl-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ddl-c-working-text[hidden] { display: none; }
.ddl-c-working-text::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
html.ddl-motion-ok .ddl-c-working-text::before { animation: ddl-c-working-pulse 900ms ease-in-out infinite alternate; }
@keyframes ddl-c-working-pulse { from { opacity: 0.35; } to { opacity: 1; } }

/* The one terminal state for a dropped session. Shiny's wordless grey dim is
   replaced by this card; the page underneath stays readable. */
.ddl-c-session-ended {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(20, 15, 24, 0.32);
}
.ddl-c-session-ended[hidden] { display: none; }
.ddl-c-session-card {
  width: min(420px, 100%);
  padding: 1.2rem 1.25rem;
  border: 1px solid var(--ddl-line);
  border-radius: var(--ddl-r-md);
  background: var(--ddl-paper);
  box-shadow: var(--ddl-shadow-3);
  color: var(--ddl-ink);
}
.ddl-c-session-text { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.45; }
html:has(.ddl-c-session-ended:not([hidden])) #shiny-disconnected-overlay { display: none !important; }

/* ---- 11. The export dialog ------------------------------------------------------ */
#shiny-modal .modal-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; font-weight: 650; }
#shiny-modal .modal-title > svg { flex: 0 0 auto; color: var(--ddl-c-accent, var(--ddl-agave)); }
/* The export dialog reads as one short statement: the framework's stacked
   header and body padding left a blank band under the title. */
#shiny-modal:has(.ddl-c-guard-facts) .modal-header { padding-bottom: 0.4rem; border-bottom: 0; }
#shiny-modal:has(.ddl-c-guard-facts) .modal-body { padding-top: 0.5rem; }
#shiny-modal:has(.ddl-c-guard-facts) .modal-footer { padding-top: 0.25rem; border-top: 0; }
/* Its one primary action wears the workspace's own primary ink, as "Open
   dossier" and "Open plants" do, rather than the framework's global green. */
body:has(.ddl-main-workspace) #shiny-modal:has(.ddl-c-guard-facts) .modal-footer .btn-primary {
  border-color: var(--ddl-c-chrome-2);
  background: var(--ddl-c-chrome-2);
  color: var(--ddl-c-on-chrome);
}
body:has(.ddl-main-workspace) #shiny-modal:has(.ddl-c-guard-facts) .modal-footer .btn-primary:is(:hover, :focus-visible) {
  border-color: var(--ddl-c-chrome);
  background: var(--ddl-c-chrome);
  color: var(--ddl-c-on-chrome);
}
.ddl-c-guard-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 1rem;
  margin: 0 0 0.8rem;
}
.ddl-c-guard-facts > div { display: contents; }
.ddl-c-guard-facts dt {
  color: var(--ddl-muted);
  font-family: var(--ddl-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.9;
}
.ddl-c-guard-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.ddl-c-guard-facts code { color: var(--ddl-ink); font-size: 0.8rem; }
.ddl-c-guard-columns { margin: 0 0 0.8rem; }
.ddl-c-guard-columns > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  color: var(--ddl-ink);
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.ddl-c-guard-columns > summary::-webkit-details-marker { display: none; }
.ddl-c-guard-columns > summary::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
}
.ddl-c-guard-columns[open] > summary::after { transform: rotate(90deg); }
.ddl-c-guard-columns ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
}
.ddl-c-guard-columns li {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--ddl-line);
  border-radius: var(--ddl-r-pill);
  font-size: 0.8rem;
}
:is(.ddl-c-guard-scope, .ddl-c-guard-positions, .ddl-c-guard-marks, .ddl-c-guard-note) {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  line-height: 1.45;
}
.ddl-c-guard-note { margin-bottom: 0; color: var(--ddl-muted); }

/* ---- 12. The footer ---------------------------------------------------------------- */
body:has(.ddl-main-workspace) .ddl-footer.ddl-footer-workspace {
  width: auto;
  max-width: calc(var(--ddl-measure) + 2 * var(--ddl-c-gutter));
  margin: 0 auto;
  padding: 0 var(--ddl-c-gutter) 1.4rem;
  color: var(--ddl-c-muted);
  font-size: 0.8rem;
}
.ddl-c-utils-foot { display: none; }
body:has(.ddl-main-workspace) .ddl-footer-workspace-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--ddl-c-hairline);
}
.ddl-footer-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-right: auto; }
.ddl-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: var(--ddl-c-accent-ink, var(--ddl-ink));
  font-weight: 600;
  text-underline-offset: 3px;
}
/* The Build details fold keeps a visible marker at every width: a summary set
   to flex drops the native triangle, so the marker is drawn. */
body:has(.ddl-main-workspace) .ddl-footer-build { max-width: min(68ch, 100%); text-align: left; }
body:has(.ddl-main-workspace) .ddl-footer-build > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 28px;
  color: var(--ddl-c-muted);
  cursor: pointer;
  list-style: none;
}
body:has(.ddl-main-workspace) .ddl-footer-build > summary::-webkit-details-marker { display: none; }
body:has(.ddl-main-workspace) .ddl-footer-build > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  transition: transform 120ms ease;
}
body:has(.ddl-main-workspace) .ddl-footer-build[open] > summary::before { transform: rotate(90deg); }

/* A coarse pointer gets 44px targets at every width, not only on a phone: on
   a tablet the bar's pills grow inside the 56px bar, the task row's day-plan
   pill and the footer links take the same floor, and the ribbon's whole row,
   not only its words, opens the data-source facts. */
@media (pointer: coarse) {
  .ddl-c-source > summary { width: 100%; }
  body:has(.ddl-main-workspace) .ddl-c-utils .ddl-workspace-home,
  body:has(.ddl-main-workspace) .ddl-c-utils .ddl-c-guide,
  body:has(.ddl-main-workspace) .ddl-header-workspace .ddl-cover-signin.is-quiet,
  body:has(.ddl-main-workspace) .ddl-day-chip,
  body:has(.ddl-main-workspace) .ddl-footer-links a,
  body:has(.ddl-main-workspace) .ddl-footer-build > summary { min-height: 44px; }
}

/* ---- 13. Phones: one-row bar, 3x2 task grid, the utility row in the footer ----
   Ribbon 24 + bar 56 + grid 90 = 170px before the page, so the H1 starts by
   200px on every route. */
@media (max-width: 720px) {
  /* The ribbon's disclosure is the whole 24px row on a phone, not just its
     words: a thumb aimed at the dark band opens it wherever it lands. */
  .ddl-c-source > summary { width: 100%; }
  body:has(.ddl-main-workspace) .ddl-header.ddl-header-workspace { gap: 0.6rem; }
  body:has(.ddl-main-workspace) .ddl-header-workspace .ddl-brand-org { display: none; }
  body:has(.ddl-main-workspace) .ddl-header-workspace .ddl-brand-name { font-size: 0.95rem; }
  body:has(.ddl-main-workspace) .ddl-header-workspace .ddl-brand-mark { width: 28px; height: 28px; }
  .ddl-c-utils-desk { display: none; }
  .ddl-c-home-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  body:has(.ddl-main-workspace) .ddl-c-utils .ddl-workspace-home {
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }
  body:has(.ddl-main-workspace) .ddl-workspace-nav { display: block; padding: 0; }
  body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route-scroll {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border: 0;
    background: var(--ddl-c-hairline);
  }
  body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route {
    min-height: 44px;
    padding: 0 0.3rem;
    border: 0;
    background: var(--ddl-c-card);
  }
  body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route-label { font-size: 0.8rem; }
  body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route.is-on { background: var(--ddl-c-chrome-2); }
  .ddl-nav-badge { min-width: 18px; height: 17px; padding: 0 0.3rem; font-size: 0.62rem; }
  body:has(.ddl-main-workspace) .ddl-day-chip { display: none !important; }
  body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route.is-opening .ddl-workspace-route-label { display: none; }
  body:has(.ddl-main-workspace) .ddl-workspace-nav .ddl-workspace-route .ddl-c-opening::before { content: none; }

  body:has(.ddl-main-workspace) .ddl-main.ddl-main-workspace { padding-top: 0.85rem; }
  .ddl-main-workspace :is(.ddl-tor-route-copy, .ddl-inv-product-route-copy, .ddl-rst-product-route-copy) > :is(h1, h2) {
    font-size: 1.6rem;
  }
  .ddl-main-workspace :is(.ddl-tor-start-page, .ddl-inv-product-start, .ddl-rst-product-start)
    :is(.ddl-tor-route-copy, .ddl-inv-product-route-copy, .ddl-rst-product-route-copy) > h1 {
    font-size: 2rem;
  }
  /* Start-aligned on a phone: a head that stacks into a column must not push
     its title to the right edge. */
  .ddl-main-workspace :is(.ddl-tor-route-head, .ddl-inv-product-route-head, .ddl-rst-product-route-head) {
    align-items: flex-start;
    margin-bottom: 0.7rem;
  }
  .ddl-main-workspace :is(.ddl-tor-context, .ddl-inv-product-context, .ddl-rst-product-context) {
    margin-bottom: 0.8rem;
    padding: 0.5rem 0.6rem;
  }

  .ddl-c-utils-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0 0.2rem;
    border-top: 1px solid var(--ddl-c-hairline);
  }
  .ddl-c-utils-foot .ddl-c-guide,
  body:has(.ddl-main-workspace) .ddl-c-utils-foot .ddl-cover-signin.is-quiet {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: var(--ddl-r-pill);
  }
  .ddl-c-utils-foot .ddl-c-guide {
    border: 1px solid var(--ddl-c-hairline);
    background: var(--ddl-c-card);
    color: var(--ddl-c-accent-ink);
    font-weight: 700;
    text-decoration: none;
  }
  body:has(.ddl-main-workspace) .ddl-c-utils-foot .ddl-cover-signin.is-quiet {
    border: 1px dashed var(--ddl-line);
  }
  body:has(.ddl-main-workspace) .ddl-c-utils-foot .ddl-cover-signin.is-quiet .ddl-cover-signin-button {
    min-height: 0; padding: 0; border: 0; background: transparent;
    color: var(--ddl-ink-2); font-size: 0.8rem; font-weight: 650;
    letter-spacing: 0; text-transform: none;
  }
  body:has(.ddl-main-workspace) .ddl-c-utils-foot .ddl-cover-signin.is-quiet .ddl-cover-signin-note {
    display: inline; max-width: none; color: var(--ddl-muted); font-size: 0.74rem;
    text-align: left; white-space: normal;
  }
  body:has(.ddl-main-workspace) .ddl-c-utils-foot .ddl-cover-signin.is-quiet .ddl-cover-signin-note::before {
    content: "\00b7"; margin: 0 0.4rem;
  }
  body:has(.ddl-main-workspace) .ddl-footer-workspace-row { flex-direction: column; gap: 0.3rem; }
  .ddl-footer-links a { min-height: 44px; }
  body:has(.ddl-main-workspace) .ddl-footer-build > summary { min-height: 44px; }
}
@media (max-width: 700px) {
  /* Sticky from 701px only: below that the bar scrolls away with the page. */
  body:has(.ddl-main-workspace) .ddl-header.ddl-header-workspace { position: static; }
}

/* ---- 14. Maps: keys that fold, a busy scrim, the tile note clear of the key -- */
.ddl-c-key { padding: 0 !important; overflow: hidden; }
.ddl-c-key-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 96px;
  min-height: 44px;
  padding: 0 0.8rem;
  border: 0;
  border-bottom: 1px solid rgba(31, 37, 41, 0.12);
  background: rgba(255, 253, 248, 0.96);
  color: #1f2529;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.ddl-c-key-toggle::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 0.45rem;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.ddl-c-key.is-collapsed .ddl-c-key-toggle { border-bottom: 0; }
.ddl-c-key:not(.is-collapsed) .ddl-c-key-toggle::after { transform: rotate(180deg); }
.ddl-c-key-body { padding: 0.45rem 0.6rem; }
.ddl-c-key.is-collapsed .ddl-c-key-body { display: none; }
.leaflet-container .ddl-map-tile-note {
  top: 10px;
  bottom: auto;
  max-width: calc(100% - 132px);
}
/* app.js measures how far a wrapped attribution line reaches up the map and
   lifts the bottom-left controls (scale bar, key) clear of its words. */
.leaflet-container .leaflet-bottom.leaflet-left { bottom: var(--ddl-attrib-lift, 0px); }
.ddl-c-map-busy {
  position: absolute;
  inset: 0;
  z-index: 800;
  display: grid;
  place-items: center;
  background: rgba(255, 253, 248, 0.55);
  pointer-events: none;
}
.ddl-c-map-busy > span {
  padding: 0.45rem 0.85rem;
  border-radius: var(--ddl-r-pill);
  background: rgba(20, 26, 30, 0.85);
  color: #fffdf8;
  font-size: 0.8rem;
  font-weight: 600;
}
.leaflet-popup.ddl-context-popup .leaflet-popup-content { margin: 0.55rem 0.8rem; font-size: 0.85rem; }
/* The generated-records notice under every map is the honesty copy the map
   rests on. It reads as one light panel on whatever card holds it: on the
   Restoration map card its words had fallen to slate on navy. */
.ddl-main-workspace .ddl-map-notice {
  border-color: var(--ddl-c-hairline);
  background: var(--ddl-c-card);
  color: var(--ddl-c-ink);
}
.ddl-main-workspace .ddl-map-notice :is(p, strong),
.ddl-main-workspace .ddl-map-notice .ddl-map-notice-fold > summary { color: var(--ddl-c-ink); }
/* The notice's one fold carries one marker, beside its words: the workspace
   fold chevron had landed alone in the far corner of a wide notice, next to
   the native triangle. Drawn like the Build details marker, 44px on phones. */
.ddl-main-workspace .ddl-map-notice-fold > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 32px;
  padding-right: 0;
  list-style: none;
}
.ddl-main-workspace .ddl-map-notice-fold > summary::-webkit-details-marker { display: none; }
.ddl-main-workspace .ddl-map-notice-fold > summary::after { content: none; }
.ddl-main-workspace .ddl-map-notice-fold > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
  transition: transform 120ms ease;
}
.ddl-main-workspace .ddl-map-notice-fold[open] > summary::before { transform: rotate(90deg); }
@media (max-width: 720px), (pointer: coarse) {
  .ddl-main-workspace .ddl-map-notice-fold > summary { min-height: 44px; }
}

/* ---- 15. The User guide ------------------------------------------------------------ */
.ddl-guide { display: grid; gap: 1rem; margin: 0.5rem 0 2rem; }
.ddl-guide-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ddl-line);
  border-radius: var(--ddl-r-md);
  background: var(--ddl-paper);
}
.ddl-guide-nav ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ddl-guide;
}
.ddl-guide-nav li { counter-increment: ddl-guide; }
.ddl-guide-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.8rem;
  border-radius: var(--ddl-r-pill);
  color: var(--ddl-ink);
  font-weight: 600;
  text-decoration: none;
}
.ddl-guide-nav a::before {
  content: counter(ddl-guide, decimal-leading-zero);
  color: var(--ddl-muted);
  font-family: var(--ddl-mono);
  font-size: 0.68rem;
}
.ddl-guide-nav a:hover { background: color-mix(in srgb, var(--ddl-agave) 8%, var(--ddl-paper)); }
.ddl-guide-section {
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--ddl-line);
  border-radius: var(--ddl-r-md);
  background: var(--ddl-paper);
  scroll-margin-top: 1rem;
}
.ddl-guide-section > h2 {
  margin: 0 0 0.35rem;
  font-family: var(--ddl-display);
  font-size: 1.5rem;
  font-weight: 400;
}
.ddl-guide-lede { max-width: 72ch; margin: 0 0 0.8rem; color: var(--ddl-muted); }
.ddl-guide-router-scroll { overflow-x: auto; }
.ddl-guide-router { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ddl-guide-router th,
.ddl-guide-router td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--ddl-line);
  text-align: left;
  vertical-align: top;
}
.ddl-guide-router thead th {
  color: var(--ddl-muted);
  font-family: var(--ddl-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ddl-guide-router-group th {
  padding-top: 0.9rem;
  color: var(--ddl-ink);
  font-family: var(--ddl-display);
  font-size: 1.05rem;
  font-weight: 400;
}
.ddl-guide-router td:last-child { white-space: nowrap; }
.ddl-guide-router a { font-weight: 650; text-underline-offset: 3px; }
/* A workspace's six pages as one numbered strip, in task-row order. */
.ddl-guide-routes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ddl-route;
}
.ddl-guide-routes li { counter-increment: ddl-route; }
.ddl-guide-route {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0 1rem 0 0.45rem;
  border: 1px solid var(--ddl-line);
  border-radius: var(--ddl-r-pill);
  background: var(--ddl-paper);
  color: var(--ddl-ink);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.ddl-guide-route:hover { border-color: var(--ddl-ink-2); color: var(--ddl-ink); }
.ddl-guide-route::before {
  content: counter(ddl-route);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ddl-ink);
  color: #fffdf8;
  font-family: var(--ddl-mono);
  font-size: 0.74rem;
}
.ddl-guide { grid-template-columns: minmax(0, 1fr); }
.ddl-guide > * { min-width: 0; }
@media (max-width: 720px) {
  /* On a phone the router reads as a list: the question, then where to go. */
  .ddl-guide-section { padding: 0.95rem 0.9rem 1rem; }
  .ddl-guide-router thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .ddl-guide-router,
  .ddl-guide-router tbody,
  .ddl-guide-router tr,
  .ddl-guide-router th,
  .ddl-guide-router td { display: block; width: 100%; }
  .ddl-guide-router tr { padding: 0.5rem 0; border-bottom: 1px solid var(--ddl-line); }
  .ddl-guide-router tr.ddl-guide-router-group { padding-top: 0.6rem; border-bottom: 0; }
  .ddl-guide-router :is(th, td) { padding: 0.1rem 0; border: 0; }
  .ddl-guide-router td:last-child { white-space: normal; }
  .ddl-guide-router td:last-child a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---- 15b. The shared views (About, User guide) wear the same instrument -------
   A reader who follows "User guide" or "About this demo" out of a workspace
   lands on the same ribbon, bar and tab row, in the demo's own night, rather
   than on a different product. */
body:has(.ddl-hero-view) {
  --ddl-c-gutter: clamp(16px, 2.2vw, 28px);
  --ddl-c-bleed-pad: max(var(--ddl-c-gutter), calc((100% - var(--ddl-measure)) / 2));
  --ddl-c-chrome: var(--ddl-night);
  --ddl-c-chrome-2: #35263a;
  --ddl-c-canvas: #f7efe1;
  --ddl-c-card: var(--ddl-paper);
  --ddl-c-hairline: rgba(43, 35, 52, 0.12);
  --ddl-c-on-chrome: #fffdf8;
  --ddl-c-on-chrome-2: rgba(255, 253, 248, 0.78);
  --ddl-c-on-chrome-3: rgba(255, 253, 248, 0.58);
  --ddl-c-chrome-line: rgba(255, 253, 248, 0.16);
  --ddl-c-accent: var(--ddl-agave);
  --ddl-c-attention: var(--ddl-gold);
  background: var(--ddl-c-canvas);
  background-size: auto;
}
body:has(.ddl-hero-view) > .container-fluid { max-width: none; padding-inline: 0; }
body:has(.ddl-hero-view) .demo-mark-strip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 24px;
  margin: 0;
  padding: 0 var(--ddl-c-bleed-pad);
  border: 0;
  border-bottom: 1px solid var(--ddl-c-chrome-line);
  border-radius: 0;
  background: var(--ddl-c-chrome);
  box-shadow: none;
  color: var(--ddl-c-on-chrome-2);
  font-size: 0.8rem;
}
body:has(.ddl-hero-view) .demo-mark-strip .demo-mark-tag {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ddl-c-on-chrome);
  font-family: var(--ddl-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
}
body:has(.ddl-hero-view) .ddl-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  margin: 0;
  padding: 0 var(--ddl-c-bleed-pad);
  border: 0;
  background: var(--ddl-c-chrome);
  color: var(--ddl-c-on-chrome);
}
body:has(.ddl-hero-view) .ddl-header .ddl-brand-name { color: var(--ddl-c-on-chrome); }
body:has(.ddl-hero-view) .ddl-header .ddl-brand-org { color: var(--ddl-c-on-chrome-3); }
body:has(.ddl-hero-view) .ddl-header .ddl-brand-frame { stroke: rgba(255, 253, 248, 0.72); }
body:has(.ddl-hero-view) .ddl-header .ddl-brand-nodes circle { stroke: var(--ddl-c-chrome); }
body:has(.ddl-hero-view) .ddl-header :focus-visible { outline-color: var(--ddl-c-focus-dark, #f4ecdf); outline-offset: 2px; }
body:has(.ddl-hero-view) .ddl-header-right { flex-wrap: nowrap; gap: 0.75rem; }
body:has(.ddl-hero-view) .ddl-region-label { color: var(--ddl-c-on-chrome-3); font-size: 0.74rem; white-space: nowrap; }
/* The honest sign-in reads as the workspace bar's one quiet pill: the button
   and its note inline, rather than a button beside a two-line note. */
body:has(.ddl-hero-view) .ddl-header .ddl-cover-signin {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  min-height: 36px;
  padding: 0 0.9rem;
  border: 1px dashed var(--ddl-c-chrome-line);
  border-radius: var(--ddl-r-pill);
}
body:has(.ddl-hero-view) .ddl-header .ddl-cover-signin-button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ddl-c-on-chrome-2);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}
body:has(.ddl-hero-view) .ddl-header .ddl-cover-signin-note {
  display: inline;
  max-width: none;
  color: var(--ddl-c-on-chrome-3);
  font-size: 0.74rem;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}
body:has(.ddl-hero-view) .ddl-header .ddl-cover-signin-note::before {
  content: "\00b7";
  margin: 0 0.45rem;
}
body:has(.ddl-hero-view) .ddl-hubviews.ddl-hubviews-primary {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  min-height: 48px;
  margin: 0;
  padding: 0 var(--ddl-c-bleed-pad);
  border: 0;
  border-bottom: 1px solid var(--ddl-c-hairline);
  background: var(--ddl-c-card);
}
body:has(.ddl-hero-view) .ddl-hubviews-primary .ddl-hubview-link {
  justify-content: center;
  min-width: 132px;
  min-height: 48px;
  padding: 0 1.1rem;
  border-inline-end: 1px solid var(--ddl-c-hairline);
  color: var(--ddl-ink-2);
  font-size: 0.85rem;
  font-weight: 600;
}
body:has(.ddl-hero-view) .ddl-hubviews-primary .ddl-hubview-link:first-child {
  border-inline-start: 1px solid var(--ddl-c-hairline);
}
body:has(.ddl-hero-view) .ddl-hubviews-primary .ddl-hubview-link:hover {
  background: color-mix(in srgb, var(--ddl-c-accent) 7%, var(--ddl-c-card));
  color: var(--ddl-ink);
}
body:has(.ddl-hero-view) .ddl-hubviews-primary .ddl-hubview-link.is-on {
  background: var(--ddl-c-chrome-2);
  color: var(--ddl-c-on-chrome);
  box-shadow: inset 0 2px 0 var(--ddl-c-attention);
}
body:has(.ddl-hero-view) .ddl-main {
  max-width: calc(var(--ddl-measure) + 2 * var(--ddl-c-gutter));
  margin: 0 auto;
  padding: 1.25rem var(--ddl-c-gutter) 0.75rem;
}
body:has(.ddl-hero-view) .ddl-hero-view { padding: 0 0 1.1rem; }
/* "Hub view" is a word for the codebase, not for a reader. */
body:has(.ddl-hero-view) .ddl-hero-view > .ddl-eyebrow { display: none; }
body:has(.ddl-hero-view) .ddl-hero-view .ddl-hero-title {
  margin: 0;
  font-family: var(--ddl-display);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
body:has(.ddl-hero-view) .ddl-hero-view .ddl-hero-sub {
  margin-top: 0.35rem;
  color: var(--ddl-muted);
  font-size: 0.92rem;
}
body:has(.ddl-hero-view) .ddl-footer {
  max-width: calc(var(--ddl-measure) + 2 * var(--ddl-c-gutter));
  margin: 0 auto;
  padding: 0 var(--ddl-c-gutter) 1.4rem;
}
@media (max-width: 720px) {
  body:has(.ddl-hero-view) .ddl-header .ddl-brand-org,
  body:has(.ddl-hero-view) .ddl-region-label { display: none; }
  body:has(.ddl-hero-view) .ddl-header .ddl-brand-name { white-space: nowrap; }
  body:has(.ddl-hero-view) .ddl-header-right { gap: 0.4rem; }
  body:has(.ddl-hero-view) .ddl-header .ddl-cover-signin { min-height: 44px; }
  /* The sign-in state is stated in full in the footer's access line here;
     the bar keeps the pill and its note stays in the page for the button. */
  body:has(.ddl-hero-view) .ddl-header .ddl-cover-signin-note {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  body:has(.ddl-hero-view) .ddl-hubviews.ddl-hubviews-primary { padding: 0; }
  body:has(.ddl-hero-view) .ddl-hubviews-primary .ddl-hubview-link { flex: 1 1 0; min-width: 0; min-height: 44px; }
  body:has(.ddl-hero-view) .ddl-hubviews-primary .ddl-hubview-link:first-child { border-inline-start: 0; }
  body:has(.ddl-hero-view) .ddl-main { padding-top: 0.85rem; }
  body:has(.ddl-hero-view) .ddl-hero-view .ddl-hero-title { font-size: 1.6rem; }
}

/* ---- 16. Print base: the sheet is the page, not its chrome ------------------------
   The ribbon prints (the mark rides onto paper), inked on white; the bar keeps
   its brand line; every control band goes. */
@media print {
  body:has(.ddl-main-workspace) { background: #fff !important; }
  /* The ribbon and the bar keep the page column's edge on paper, so the mark,
     the brand and the page title line up as they do on screen. */
  body:has(.ddl-main-workspace) .demo-mark-strip.demo-mark-strip-workspace {
    padding: 0 var(--ddl-c-bleed-pad) 0.2rem;
    border-bottom: 1px solid #999;
    background: #fff;
    color: #222;
  }
  body:has(.ddl-main-workspace) .demo-mark-strip-workspace .demo-mark-workspace-text { color: #222; }
  .ddl-c-source-chev, .ddl-c-source-body { display: none !important; }
  body:has(.ddl-main-workspace) .ddl-header.ddl-header-workspace {
    position: static;
    height: auto;
    padding: 0.3rem var(--ddl-c-bleed-pad);
    background: #fff;
    box-shadow: none;
    color: #222;
  }
  body:has(.ddl-main-workspace) .ddl-header-workspace :is(.ddl-brand-name, .ddl-brand-org) { color: #222; }
  .ddl-c-utils, .ddl-c-utils-foot, .ddl-workspace-nav, .ddl-c-busy, .ddl-c-working,
  .ddl-c-session-ended, .ddl-c-chip-dialog, .ddl-footer-links, .ddl-guide-bar,
  .ddl-c-key-toggle, .ddl-c-map-busy { display: none !important; }
  .ddl-c-key.is-collapsed .ddl-c-key-body { display: block; }
  .ddl-guide-section { break-inside: avoid-page; border-color: #bbb; }
  body:has(.ddl-hero-view) { background: #fff !important; }
  body:has(.ddl-hero-view) :is(.demo-mark-strip, .ddl-header) {
    padding: 0.2rem var(--ddl-c-bleed-pad);
    border-bottom: 1px solid #999;
    background: #fff;
    color: #222;
  }
  body:has(.ddl-hero-view) :is(.demo-mark-tag, .ddl-brand-name, .ddl-brand-org) { color: #222; }
  /* The screen rules that ink these on the dark chrome out-rank the line
     above, and white words on white paper print as nothing. */
  body:has(.ddl-hero-view) .demo-mark-strip .demo-mark-tag,
  body:has(.ddl-hero-view) .ddl-header :is(.ddl-brand-name, .ddl-brand-org) { color: #222; }
  body:has(.ddl-hero-view) .ddl-header .ddl-brand-frame { stroke: #222; }
  body:has(.ddl-hero-view) .ddl-header .ddl-brand-nodes circle { stroke: #fff; }
  body:has(.ddl-hero-view) :is(.ddl-hubviews, .ddl-header-right) { display: none !important; }
  /* A scroll box prints as a clipped window: the router and every table's
     scroll wrapper print whole, as each workspace's own wrappers already do. */
  .ddl-guide-router-scroll,
  .ddl-main-workspace .ddl-c-dt-scroll { overflow: visible !important; }
}

/* ---- 17. Reduced motion keeps every message and drops every movement --------- */
@media (prefers-reduced-motion: reduce) {
  .ddl-c-busy::before { left: 0; width: 100%; animation: none; }
  .ddl-c-source-chev,
  .ddl-main-workspace .ddl-map-notice-fold > summary::before,
  body:has(.ddl-main-workspace) .ddl-footer-build > summary::before { transition: none; }
}
/* ==== [/F0A] ==== */

/* ==== [F0B] components (.ddl-c-*), split view, cards mode, chip dialog, day card, print scopes ==== */
/* The shared kit's look. Every colour is a token: the component tokens F0a
   declares (--ddl-c-*) with the existing bridge tokens as their fallbacks, so
   a component renders the same before and after the two foundation halves
   meet. The private --ddl-k-* names below resolve on each component element,
   where the workspace's project tokens are in scope; resolving them any
   higher would freeze one workspace's accent into all three. */
:where(.ddl-c-pill, .ddl-c-pill-group, .ddl-c-segmented, .ddl-c-fold, .ddl-c-info-wrap,
       .ddl-c-rest, .ddl-c-kv, .ddl-c-two-line, .ddl-c-reading, .ddl-c-trays,
       .ddl-c-tray, .ddl-c-btn, .ddl-c-chip, .ddl-c-chip-set, .ddl-c-chip-dialog, .ddl-split,
       .ddl-c-pane, .ddl-c-cards, .ddl-day-card, .ddl-c-copy-wrap, .ddl-c-ranges, .ddl-c-range,
       .ddl-c-sheet, .ddl-c-mini-map, .ddl-c-status, .ddl-c-column-guide, .ddl-c-count-badge,
       .ddl-c-stepper, .ddl-c-source-fn, .ddl-c-map-caption, .ddl-day-stops, .ddl-c-row-open) {
  --ddl-k-night: var(--ddl-c-chrome, var(--ddl-project-night, var(--ddl-night)));
  --ddl-k-ink: var(--ddl-project-ink, var(--ddl-ink));
  --ddl-k-card: var(--ddl-c-card, var(--ddl-paper));
  --ddl-k-canvas: var(--ddl-c-canvas, var(--ddl-project-paper, var(--ddl-bg)));
  --ddl-k-line: var(--ddl-c-hairline, color-mix(in srgb, var(--ddl-k-night) 14%, transparent));
  --ddl-k-line-strong: color-mix(in srgb, var(--ddl-k-night) 26%, transparent);
  --ddl-k-accent: var(--ddl-c-accent, var(--ddl-project-accent, var(--ddl-gold)));
  --ddl-k-accent-ink: var(--ddl-c-accent-ink, color-mix(in srgb, var(--ddl-k-accent) 46%, var(--ddl-k-night)));
  --ddl-k-select-bg: var(--ddl-c-select-bg, color-mix(in srgb, var(--ddl-k-accent) 10%, var(--ddl-k-card)));
  --ddl-k-select-bar: var(--ddl-c-select-bar, var(--ddl-k-accent));
  --ddl-k-preview-bg: var(--ddl-c-preview-bg, color-mix(in srgb, var(--ddl-k-accent) 5%, var(--ddl-k-card)));
  --ddl-k-tint: var(--ddl-c-tint, color-mix(in srgb, var(--ddl-k-night) 5%, var(--ddl-k-card)));
  --ddl-k-attention: var(--ddl-c-attention, var(--ddl-gold));
  --ddl-k-alert: var(--ddl-c-alert, var(--ddl-clay));
  --ddl-k-ok: var(--ddl-c-ok, var(--ddl-agave));
  --ddl-k-info: var(--ddl-c-info, var(--ddl-sky));
  --ddl-k-checked: var(--ddl-c-checked, var(--ddl-muted));
  --ddl-k-focus: var(--ddl-c-focus, var(--ddl-sky));
  --ddl-k-chrome-h: var(--ddl-c-chrome-h, 56px);
  --ddl-k-muted: color-mix(in srgb, var(--ddl-k-ink) 70%, var(--ddl-k-card));
  --ddl-k-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* One tone recipe, used by chips and static pills alike: text dark enough to
   hold 4.5:1 on its own tint, a tint, and a rule. Colour is never alone; the
   words carry the meaning and each tone also has its own mark shape. */
:where(.ddl-c-chip, .ddl-c-pill, .ddl-c-chip-dialog-eyebrow, .ddl-c-chip-dialog-list > li) {
  --ddl-k-tone: var(--ddl-k-night);
  --ddl-k-tone-ink: var(--ddl-k-ink);
  --ddl-k-tone-bg: var(--ddl-k-tint);
  --ddl-k-tone-rule: var(--ddl-k-line-strong);
}
:where(.ddl-c-chip, .ddl-c-pill, .ddl-c-chip-dialog-eyebrow, .ddl-c-chip-dialog-list > li).is-ok {
  --ddl-k-tone: var(--ddl-k-ok);
  --ddl-k-tone-ink: color-mix(in srgb, var(--ddl-k-ok) 62%, var(--ddl-k-night));
  --ddl-k-tone-bg: color-mix(in srgb, var(--ddl-k-ok) 11%, var(--ddl-k-card));
  --ddl-k-tone-rule: color-mix(in srgb, var(--ddl-k-ok) 40%, transparent);
}
:where(.ddl-c-chip, .ddl-c-pill, .ddl-c-chip-dialog-eyebrow, .ddl-c-chip-dialog-list > li).is-attention {
  --ddl-k-tone: var(--ddl-k-attention);
  --ddl-k-tone-ink: color-mix(in srgb, var(--ddl-k-attention) 44%, var(--ddl-k-night));
  --ddl-k-tone-bg: color-mix(in srgb, var(--ddl-k-attention) 17%, var(--ddl-k-card));
  --ddl-k-tone-rule: color-mix(in srgb, var(--ddl-k-attention) 58%, transparent);
}
:where(.ddl-c-chip, .ddl-c-pill, .ddl-c-chip-dialog-eyebrow, .ddl-c-chip-dialog-list > li).is-alert {
  --ddl-k-tone: var(--ddl-k-alert);
  --ddl-k-tone-ink: color-mix(in srgb, var(--ddl-k-alert) 66%, var(--ddl-k-night));
  --ddl-k-tone-bg: color-mix(in srgb, var(--ddl-k-alert) 10%, var(--ddl-k-card));
  --ddl-k-tone-rule: color-mix(in srgb, var(--ddl-k-alert) 42%, transparent);
}
:where(.ddl-c-chip, .ddl-c-pill, .ddl-c-chip-dialog-eyebrow, .ddl-c-chip-dialog-list > li).is-info {
  --ddl-k-tone: var(--ddl-k-info);
  --ddl-k-tone-ink: color-mix(in srgb, var(--ddl-k-info) 62%, var(--ddl-k-night));
  --ddl-k-tone-bg: color-mix(in srgb, var(--ddl-k-info) 11%, var(--ddl-k-card));
  --ddl-k-tone-rule: color-mix(in srgb, var(--ddl-k-info) 40%, transparent);
}
:where(.ddl-c-chip, .ddl-c-pill, .ddl-c-chip-dialog-eyebrow, .ddl-c-chip-dialog-list > li).is-checked {
  --ddl-k-tone: var(--ddl-k-checked);
  --ddl-k-tone-ink: color-mix(in srgb, var(--ddl-k-checked) 55%, var(--ddl-k-night));
  --ddl-k-tone-bg: color-mix(in srgb, var(--ddl-k-checked) 12%, var(--ddl-k-card));
  --ddl-k-tone-rule: color-mix(in srgb, var(--ddl-k-checked) 40%, transparent);
}

/* The one focus recipe (law 9): 3px solid, 2px offset. The pane takes focus
   programmatically (tabindex -1) so a screen reader lands in it; a ring
   around a whole card there would be noise, so it has none and the next Tab
   shows it on a real control. */
:is(.ddl-c-btn, .ddl-c-chip, .ddl-c-info, .ddl-c-row-open,
    .ddl-c-card-more, .ddl-day-card-toggle, .ddl-c-mini-map-link, .ddl-c-source-pre,
    .ddl-c-fold > summary, .ddl-c-source-fn > summary):focus-visible {
  outline: 3px solid var(--ddl-k-focus);
  outline-offset: 2px;
}
.ddl-c-pane:focus { outline: none; }

/* Two platform facts the kit has to answer for:
   1. The workspace roots enter with an animation that fills with a transform,
      which makes the root the containing block of every position: fixed
      descendant, so the phone's day bar and its sheet would pin to the
      section instead of the screen. The entry still plays; it lets go of the
      element when it ends. The second selector matches the
      Restoration root's own rule (html.ddl-motion-ok:not(.ddl-motion-paused)
      .ddl-rst-product, one class heavier than the other two), and the
      !important keeps the fill mode ahead of any later change to the three
      entry rules, which the kit does not own: the defect it prevents is
      invisible until a phone opens the day bar.
   2. The roots draw a chevron on every <summary>; the kit's folds draw their
      own, so the shared one is removed for them rather than doubled. */
html.ddl-motion-ok :is(.ddl-tor-page, .ddl-inv-product, .ddl-rst-product),
html.ddl-motion-ok:not(.ddl-motion-paused) .ddl-rst-product { animation-fill-mode: backwards !important; }
.ddl-c-fold.ddl-c-fold > summary { padding-right: 0.9rem; }
.ddl-c-source-fn.ddl-c-source-fn > summary { padding-right: 0.75rem; }
.ddl-c-fold.ddl-c-fold > summary::after,
.ddl-c-source-fn.ddl-c-source-fn > summary::after { content: none; display: none; }
.ddl-c-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- buttons ---------------------------------------------------------------- */
.ddl-c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 44px; padding: 0 0.95rem; margin: 0;
  color: var(--ddl-k-ink); background: var(--ddl-k-card);
  border: 1px solid var(--ddl-k-line-strong); border-radius: var(--ddl-r-sm);
  font: 600 0.85rem/1.2 var(--ddl-k-sans); letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.ddl-c-btn:hover { background: var(--ddl-k-tint); border-color: color-mix(in srgb, var(--ddl-k-night) 38%, transparent); color: var(--ddl-k-ink); }
.ddl-c-btn.is-primary { color: var(--ddl-k-card); background: var(--ddl-k-night); border-color: var(--ddl-k-night); }
.ddl-c-btn.is-primary:hover { background: color-mix(in srgb, var(--ddl-k-night) 86%, var(--ddl-k-card)); }
.ddl-c-btn:disabled, .ddl-c-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; background: var(--ddl-k-card); }
.ddl-c-btn-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.55rem; }
.ddl-c-btn-why { font-size: 0.85rem; color: var(--ddl-k-muted); }

/* ---- pills ---------------------------------------------------------------- */
/* Flex items drop leading spaces, so "Label · 12" keeps its spacing through
   gap rather than through the space inside the count. */
.ddl-c-pill {
  display: inline-flex; align-items: center; gap: 0.28em; min-height: 26px;
  padding: 0.12rem 0.62rem; border-radius: var(--ddl-r-pill);
  color: var(--ddl-k-tone-ink); background: var(--ddl-k-tone-bg);
  border: 1px solid var(--ddl-k-tone-rule);
  font: 600 0.8rem/1.2 var(--ddl-k-sans); white-space: nowrap;
}
.ddl-c-pill-count { font-variant-numeric: tabular-nums; font-weight: 500; }
.ddl-c-pill.is-muted { opacity: 0.55; }

/* The pill group: the 44px label is the tap target, the 38px pill inside it is
   what the eye sees. A chosen pill takes the one selection treatment (tint,
   accent rule, heavier label), so chosen never depends on colour alone. */
.ddl-c-pill-group { margin: 0 0 0.35rem; }
.ddl-c-pill-group > .control-label {
  display: block; margin: 0 0 0.15rem; color: var(--ddl-k-muted);
  font: 600 0.68rem/1.3 var(--ddl-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
/* The workspace roots draw every inline radio group as a boxed track that turns
   into a no-wrap sideways scroller on phones (specificity 0,4,0). The kit's two
   choice controls draw their own, at the same weight and later: the pills wrap,
   and no option is ever pushed off the edge. */
.ddl-c-pill-group.ddl-c-pill-group.shiny-input-radiogroup > .shiny-options-group {
  display: flex; flex-wrap: wrap; gap: 0 0.4rem; max-width: 100%;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  overflow: visible; scroll-snap-type: none;
}
.ddl-c-pill-group .shiny-options-group > .radio-inline,
.ddl-c-pill-group .shiny-options-group > .radio-inline:has(input:checked) {
  position: relative; display: inline-flex; align-items: center;
  min-height: 44px; margin: 0; padding: 3px 0;
  color: inherit; background: transparent; border: 0; border-radius: 0;
  box-shadow: none; outline: 0; font-size: inherit; cursor: pointer;
}
.ddl-c-pill-group .shiny-options-group > .radio-inline > input {
  position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
}
.ddl-c-pill-group .ddl-c-pill-text {
  display: inline-flex; align-items: center; gap: 0.28em; min-height: 38px;
  padding: 0 0.85rem; border-radius: var(--ddl-r-pill);
  color: var(--ddl-k-ink); background: var(--ddl-k-card);
  border: 1px solid var(--ddl-k-line-strong);
  font: 500 0.85rem/1.2 var(--ddl-k-sans); white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.ddl-c-pill-group .radio-inline:hover .ddl-c-pill-text { background: var(--ddl-k-tint); }
.ddl-c-pill-group input:checked + span .ddl-c-pill-text {
  font-weight: 650; background: var(--ddl-k-select-bg);
  border-color: var(--ddl-k-select-bar); box-shadow: inset 0 0 0 1px var(--ddl-k-select-bar);
}
.ddl-c-pill-group input:focus-visible + span .ddl-c-pill-text {
  outline: 3px solid var(--ddl-k-focus); outline-offset: 2px;
}
.ddl-c-pill-group .ddl-c-pill-text.is-muted { opacity: 0.55; }
.ddl-c-pill-group input:checked + span .ddl-c-pill-text.is-muted { opacity: 0.8; }

/* ---- segmented control ---------------------------------------------------------- */
.ddl-c-segmented { margin: 0 0 0.6rem; }
.ddl-c-segmented > .control-label {
  display: block; margin: 0 0 0.2rem; color: var(--ddl-k-muted);
  font: 600 0.68rem/1.3 var(--ddl-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.ddl-c-segmented.ddl-c-segmented.shiny-input-radiogroup > .shiny-options-group {
  display: flex; flex-wrap: wrap; gap: 1px; max-width: 100%; padding: 0; overflow: hidden;
  background: var(--ddl-k-line); border: 1px solid var(--ddl-k-line-strong);
  border-radius: var(--ddl-r-sm); box-shadow: none; scroll-snap-type: none;
}
.ddl-c-segmented .shiny-options-group > .radio-inline,
.ddl-c-segmented .shiny-options-group > .radio-inline:has(input:checked) {
  position: relative; flex: 1 1 auto; display: inline-flex; align-items: center;
  justify-content: center; min-height: 44px; margin: 0; padding: 0 0.95rem;
  color: var(--ddl-k-ink); background: var(--ddl-k-card); border: 0; border-radius: 0;
  box-shadow: none; outline: 0; font-size: inherit; cursor: pointer; white-space: nowrap;
}
.ddl-c-segmented .shiny-options-group > .radio-inline > input {
  position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
}
.ddl-c-segmented .ddl-c-segment-text { font: 500 0.85rem/1.2 var(--ddl-k-sans); }
.ddl-c-segmented .shiny-options-group > .radio-inline:hover { background: var(--ddl-k-tint); }
.ddl-c-segmented .shiny-options-group > .radio-inline:has(input:checked) {
  background: var(--ddl-k-select-bg); box-shadow: inset 0 -3px 0 var(--ddl-k-select-bar);
}
.ddl-c-segmented input:checked + span .ddl-c-segment-text { font-weight: 650; }
.ddl-c-segmented .shiny-options-group > .radio-inline:has(input:focus-visible) {
  outline: 3px solid var(--ddl-k-focus); outline-offset: -3px;
}

/* ---- folds ------------------------------------------------------------------------ */
.ddl-c-fold {
  margin: 0 0 0.6rem; background: var(--ddl-k-card);
  border: 1px solid var(--ddl-k-line); border-radius: 10px;
}
.ddl-c-fold > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  min-height: 44px; padding: 0.35rem 0.9rem; list-style: none; cursor: pointer;
  border-radius: 9px; font: 600 0.88rem/1.3 var(--ddl-k-sans); color: var(--ddl-k-ink);
}
.ddl-c-fold > summary::-webkit-details-marker { display: none; }
.ddl-c-fold > summary:hover, .ddl-c-fold[open] > summary { background: var(--ddl-k-tint); }
.ddl-c-fold[open] > summary {
  border-bottom: 1px solid var(--ddl-k-line); border-radius: 9px 9px 0 0;
}
.ddl-c-fold-chev {
  flex: 0 0 auto; width: 0.55rem; height: 0.55rem; margin-right: 0.15rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: 0.7;
  transition: transform 160ms ease;
}
.ddl-c-fold[open] > summary .ddl-c-fold-chev { transform: translateY(2px) rotate(-135deg); }
.ddl-c-fold-body { padding: 0.75rem 0.9rem 0.85rem; font-size: 0.92rem; }
.ddl-c-fold-body > :last-child { margin-bottom: 0; }

/* ---- info dot ------------------------------------------------------------------------ */
.ddl-c-info-wrap { display: inline-block; position: relative; vertical-align: middle; line-height: 1; }
.ddl-c-info {
  position: relative; display: inline-grid; place-items: center;
  width: 24px; height: 24px; margin: 0 0.15rem; padding: 0;
  color: var(--ddl-k-accent-ink); background: var(--ddl-k-card);
  border: 1px solid color-mix(in srgb, var(--ddl-k-accent-ink) 55%, transparent);
  border-radius: 50%; cursor: pointer;
}
.ddl-c-info::after { content: ""; position: absolute; inset: -10px; }
.ddl-c-info:hover, .ddl-c-info[aria-expanded="true"] { background: var(--ddl-k-select-bg); }
.ddl-c-info-glyph {
  font: italic 600 0.92rem/1 var(--ddl-display); transform: translateY(-0.5px);
}
/* The dot's words open in the page's one dialog (the chip dialog below), so a
   dot and a chip read, move and close the same way on every width. */
.ddl-c-info-body { display: block; margin: 0 0 0.45rem; font-size: 0.9rem; line-height: 1.5; text-wrap: pretty; }
.ddl-c-chip-dialog.is-info .ddl-c-chip-dialog-title { margin-bottom: 0.3rem; font-size: 0.95rem; }

/* ---- status line, count badge --------------------------------------------------------- */
.ddl-c-status {
  margin: 0.35rem 0 0.5rem; color: var(--ddl-k-muted);
  font: 500 0.85rem/1.4 var(--ddl-k-sans); font-variant-numeric: tabular-nums;
}
.ddl-c-count-badge {
  display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.3rem;
  padding: 0 0.35rem; border-radius: var(--ddl-r-pill);
  color: var(--ddl-k-card); background: var(--ddl-k-night);
  font: 700 0.74rem/1 var(--ddl-k-sans); font-variant-numeric: tabular-nums;
}

/* ---- the engraved rest state ------------------------------------------------------------ */
.ddl-c-rest {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  margin: 0.25rem 0; padding: 1.35rem 1.2rem 1.25rem; text-align: center;
  color: var(--ddl-k-ink); background: var(--ddl-k-card);
  border: 1.5px dashed color-mix(in srgb, var(--ddl-k-night) 24%, transparent);
  border-radius: 12px;
}
/* The plate is feathered into the card so the engraving, not the edge of a
   photograph of paper, is what the eye meets. */
.ddl-c-rest .ddl-c-plate {
  width: 120px; height: auto; aspect-ratio: 4 / 3; object-fit: contain;
  mix-blend-mode: multiply; opacity: 0.94;
  -webkit-mask-image: radial-gradient(closest-side, currentColor 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, currentColor 70%, transparent 100%);
}
.ddl-c-rest-text { max-width: 44ch; }
.ddl-c-rest-title { margin: 0 0 0.15rem; font: 650 0.98rem/1.35 var(--ddl-k-sans); }
.ddl-c-rest-sentence {
  display: inline-flex; align-items: baseline; gap: 0.45rem; margin: 0;
  color: var(--ddl-k-muted); font: 400 0.92rem/1.45 var(--ddl-k-sans); text-align: left;
}
.ddl-c-rest-icon { flex: 0 0 auto; color: var(--ddl-k-accent-ink); transform: translateY(1px); }
.ddl-c-rest.is-unavailable .ddl-c-rest-icon { color: var(--ddl-k-alert); }
.ddl-c-rest.is-unavailable { border-color: color-mix(in srgb, var(--ddl-k-alert) 45%, transparent); }
.ddl-c-rest-action { margin-top: 0.65rem; }

/* ---- facts: key-value grid, two-line cell, reading block, column guide ----------------- */
.ddl-c-kv { margin: 0; }
.ddl-c-kv-row {
  display: grid; grid-template-columns: minmax(7.5rem, 36%) minmax(0, 1fr); gap: 0.75rem;
  padding: 0.42rem 0; border-bottom: 1px dotted var(--ddl-k-line-strong);
}
.ddl-c-kv-row:last-child { border-bottom: 0; }
.ddl-c-kv dt {
  color: var(--ddl-k-muted); font: 600 0.68rem/1.55 var(--ddl-mono);
  letter-spacing: 0.07em; text-transform: uppercase; padding-top: 0.12rem;
}
.ddl-c-kv dd { margin: 0; font-size: 0.9rem; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
/* A date, or an elapsed count and its bracketed unit, never breaks inside. */
.ddl-c-nowrap { white-space: nowrap; }
/* A short categorical cell ("Field area D", "3,200 m²") kept on one line in the
   table so it does not add a line to its row; its header still wraps, and card
   rows on a phone wrap it again. Packages add it through DT columnDefs className. */
table td.ddl-c-col-nowrap { white-space: nowrap; }
.ddl-c-cards table td.ddl-c-col-nowrap { white-space: normal; }
.ddl-c-two-line { display: inline-flex; flex-direction: column; gap: 0.08rem; min-width: 0; }
.ddl-c-two-line-top { font-weight: 650; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.ddl-c-two-line-sub { color: var(--ddl-k-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
/* In the split state a list is six columns beside the aside: a two-line cell
   keeps its day count on one line and its record under it, and sets its
   reader unit aside (the count and the date already say it), so a row is two
   lines tall from 1280px and three at the narrow end. Card rows, a
   full-width list and the record keep the unit. */
@media (min-width: 1100px) {
  .ddl-split-main .ddl-c-two-line-top { white-space: nowrap; }
  .ddl-split-main .ddl-c-two-line-unit { display: none; }
}
.ddl-c-reading {
  margin: 0.75rem 0; padding: 0.75rem 0.95rem;
  background: var(--ddl-k-card); border: 1px solid var(--ddl-k-line); border-radius: 10px;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ddl-k-accent) 70%, transparent);
}
.ddl-c-reading-title {
  margin: 0 0 0.35rem; color: var(--ddl-k-accent-ink);
  font: 700 0.68rem/1.3 var(--ddl-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.ddl-c-column-guide { margin: 0; display: grid; gap: 0.55rem; }
.ddl-c-column-guide-row dt { font: 650 0.85rem/1.35 var(--ddl-k-sans); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; }
.ddl-c-column-guide-row dd { margin: 0.1rem 0 0; color: var(--ddl-k-muted); font-size: 0.85rem; }
.ddl-c-column-where {
  color: var(--ddl-k-accent-ink); font: 600 0.68rem/1.4 var(--ddl-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* ---- trays: below the table, after the pager --------------------------------------------- */
.ddl-c-trays {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin: 0.9rem 0 0;
  padding: 0.8rem 0 0; border-top: 1px solid var(--ddl-k-line);
}
.ddl-c-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.6rem; min-width: 0; }
.ddl-c-tray-label {
  color: var(--ddl-k-muted); font: 700 0.68rem/1 var(--ddl-mono);
  letter-spacing: 0.1em; text-transform: uppercase; min-width: 4.8rem;
}
.ddl-c-tray-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }

/* ---- chips --------------------------------------------------------------------------------- */
.ddl-c-chip {
  display: inline-flex; align-items: center; gap: 0.38rem; max-width: 100%;
  min-height: 30px; margin: 0.1rem 0.25rem 0.1rem 0; padding: 0.18rem 0.62rem 0.18rem 0.55rem;
  color: var(--ddl-k-tone-ink); background: var(--ddl-k-tone-bg);
  border: 1px solid var(--ddl-k-tone-rule); border-radius: var(--ddl-r-pill);
  font: 650 0.8rem/1.2 var(--ddl-k-sans); text-align: left; cursor: pointer;
  vertical-align: middle; transition: background-color 120ms ease, border-color 120ms ease;
}
.ddl-c-chip::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ddl-k-tone);
}
.ddl-c-chip.is-alert::before { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 8px; height: 8px; }
.ddl-c-chip.is-attention::before { border-radius: 1px; transform: rotate(45deg); width: 6px; height: 6px; }
.ddl-c-chip.is-checked::before { border-radius: 0; width: 8px; height: 5px; background: transparent;
  border-left: 2px solid var(--ddl-k-tone); border-bottom: 2px solid var(--ddl-k-tone);
  transform: translateY(-1px) rotate(-45deg); }
.ddl-c-chip.is-info::before { border-radius: 2px; }
.ddl-c-chip:hover { border-color: var(--ddl-k-tone); }
.ddl-c-chip[aria-expanded="true"] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ddl-k-tone) 35%, transparent); }
.ddl-c-chip-counter {
  --ddl-k-tone: var(--ddl-k-night); color: var(--ddl-k-ink); background: var(--ddl-k-card);
  border-color: var(--ddl-k-line-strong); padding-inline: 0.55rem; font-variant-numeric: tabular-nums;
  font-family: var(--ddl-mono); font-size: 0.8rem;
}
.ddl-c-chip-counter::before { display: none; }
.ddl-c-chip-set { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0; max-width: 100%; }
/* Short labels are one to four words: one line from 1100px, free to take a
   second line below it rather than clipping. */
@media (min-width: 1100px) {
  .ddl-c-chip { white-space: nowrap; }
}

/* The chip dialog: one element, two states. Non-modal and anchored under its
   chip on a desktop (app.js sets top/left and the caret); a modal bottom sheet
   on a phone (dialog:modal). */
.ddl-c-chip-dialog {
  position: fixed; inset: auto; margin: 0; padding: 0; z-index: 1060;
  width: min(320px, calc(100vw - 24px)); max-height: min(70vh, 460px); overflow: visible;
  color: var(--ddl-k-ink); background: var(--ddl-k-card);
  border: 1px solid var(--ddl-k-line-strong); border-radius: 12px; box-shadow: var(--ddl-shadow-3);
  --ddl-k-caret: 24px;
}
.ddl-c-chip-dialog:not([open]) { display: none; }
.ddl-c-chip-dialog::before {
  content: ""; position: absolute; top: -7px; left: calc(var(--ddl-k-caret) - 6px);
  width: 12px; height: 12px; background: var(--ddl-k-card);
  border-left: 1px solid var(--ddl-k-line-strong); border-top: 1px solid var(--ddl-k-line-strong);
  transform: rotate(45deg);
}
.ddl-c-chip-dialog.is-above::before { top: auto; bottom: -7px; transform: rotate(225deg); }
.ddl-c-chip-dialog-inner {
  position: relative; max-height: inherit; overflow-y: auto; border-radius: 12px;
  padding: 0.85rem 1rem 0.7rem;
}
.ddl-c-chip-dialog-eyebrow {
  display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0 0.35rem;
  color: var(--ddl-k-tone-ink); font: 700 0.68rem/1.3 var(--ddl-mono);
  letter-spacing: 0.09em; text-transform: uppercase;
}
.ddl-c-chip-dialog-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ddl-k-tone);
}
.ddl-c-chip-dialog-title { margin: 0 0 0.45rem; font: 650 1rem/1.35 var(--ddl-k-sans); color: var(--ddl-k-ink); text-wrap: balance; }
/* Computed lines end on a phrase, not on a lone "year)." */
.ddl-c-chip-dialog-body p { margin: 0 0 0.45rem; font-size: 0.9rem; line-height: 1.5; text-wrap: pretty; }
.ddl-c-chip-dialog-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.ddl-c-chip-dialog-list > li {
  padding: 0.45rem 0.6rem; border-radius: 8px; background: var(--ddl-k-tone-bg);
  border-left: 3px solid var(--ddl-k-tone);
}
.ddl-c-chip-dialog-list > li strong { display: block; font-size: 0.88rem; line-height: 1.35; color: var(--ddl-k-tone-ink); }
.ddl-c-chip-dialog-list > li p { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--ddl-k-ink); text-wrap: pretty; }
.ddl-c-chip-dialog-foot { display: flex; justify-content: flex-end; padding-top: 0.2rem; }
.ddl-c-chip-dialog:modal {
  inset: auto 0 0 0; width: 100%; max-width: none; max-height: 80vh;
  border-radius: 16px 16px 0 0; border-bottom: 0;
}
.ddl-c-chip-dialog:modal::before { display: none; }
.ddl-c-chip-dialog:modal .ddl-c-chip-dialog-inner {
  padding: 1.1rem 1.1rem calc(0.9rem + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0;
}
.ddl-c-chip-dialog:modal .ddl-c-chip-dialog-foot .ddl-c-btn { width: 100%; }
.ddl-c-chip-dialog::backdrop { background: color-mix(in srgb, var(--ddl-project-night, currentColor) 44%, transparent); }

/* ---- the split view -------------------------------------------------------------------------- */
.ddl-split { display: block; }
.ddl-split-main { min-width: 0; }
.ddl-split-aside { display: grid; gap: 0.8rem; align-content: start; margin-top: 1rem; min-width: 0; }
.ddl-split-aside:empty { display: none; }
@media (min-width: 1100px) {
  .ddl-split {
    display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 1.25rem; align-items: start;
  }
  .ddl-split-aside {
    position: sticky; top: calc(var(--ddl-k-chrome-h) + 8px); margin-top: 0;
    max-height: calc(100vh - var(--ddl-k-chrome-h) - 16px); overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--ddl-k-line-strong) transparent;
    padding: 0 2px 2px 0;
  }
}
/* The narrow end of the split gives 40px of the aside to the six columns
   beside it: at 1100px that is the difference between two and four lines a
   row. The aside's cards are built to hold 360px. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .ddl-split { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* ---- the record pane ---------------------------------------------------------------------------- */
.ddl-c-pane {
  position: relative; min-width: 0; padding: 0.95rem 1rem 1rem;
  color: var(--ddl-k-ink); background: var(--ddl-k-card);
  border: 1px solid var(--ddl-k-line); border-radius: 12px; box-shadow: var(--ddl-shadow-1);
  scroll-margin-top: calc(var(--ddl-k-chrome-h) + 12px);
}
.ddl-c-pane:has(.ddl-c-pane-head[data-ddl-pane-mode="record"]) {
  box-shadow: inset 3px 0 0 var(--ddl-k-select-bar), var(--ddl-shadow-1);
}
.ddl-c-pane:has(.ddl-c-pane-preview) {
  border-style: dashed; border-color: color-mix(in srgb, var(--ddl-k-night) 24%, transparent);
  box-shadow: none;
}
.ddl-c-pane-back { display: none; }
.ddl-c-pane-content { min-width: 0; transition: opacity 160ms ease; }
.ddl-c-pane.is-pending .ddl-c-pane-content { opacity: 0.45; }
.ddl-c-pane.is-pending::after {
  content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--ddl-k-accent);
}
.ddl-c-pane.is-flash { outline: 3px solid var(--ddl-k-attention); outline-offset: 2px; }
.ddl-c-pane-head { display: grid; gap: 0.7rem; margin: 0 0 0.85rem; }
.ddl-c-pane-id { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.ddl-c-pane-plate {
  flex: 0 0 auto; display: block; width: 48px; height: 48px; overflow: hidden;
  border-radius: 10px; background: var(--ddl-k-canvas);
  box-shadow: inset 0 0 0 1px var(--ddl-k-line);
}
.ddl-c-plate.is-crop { object-fit: cover; object-position: 50% 58%; }
/* The plates are 4:3 engravings with the subject in the middle third; at 48px
   the pane head zooms in on the subject so it reads as that animal or plant. */
.ddl-c-pane-plate img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
  transform: scale(1.55); mix-blend-mode: multiply;
}
.ddl-c-pane-titles { min-width: 0; }
.ddl-c-pane-eyebrow, .ddl-c-pane-preview-eyebrow {
  margin: 0 0 0.15rem; color: var(--ddl-k-accent-ink);
  font: 700 0.68rem/1.3 var(--ddl-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.ddl-c-pane-title {
  margin: 0; font: 650 1.2rem/1.2 var(--ddl-k-sans); letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.ddl-c-pane-sub { margin: 0.15rem 0 0; color: var(--ddl-k-muted); font-size: 0.88rem; }
.ddl-c-stepper {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem;
  padding: 0.35rem 0; border-block: 1px solid var(--ddl-k-line);
}
.ddl-c-stepper .ddl-c-btn { min-height: 40px; padding: 0 0.75rem; border-color: transparent; background: transparent; }
.ddl-c-stepper .ddl-c-btn:hover { background: var(--ddl-k-tint); }
.ddl-c-stepper-label {
  flex: 1 1 auto; text-align: center; color: var(--ddl-k-muted);
  font: 600 0.8rem/1.3 var(--ddl-k-sans); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ddl-c-pane-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ddl-c-pane-actions .ddl-c-btn { min-height: 40px; padding: 0 0.7rem; font-size: 0.8rem; }
.ddl-c-pane-preview-hint { margin: 0 0 0.8rem; color: var(--ddl-k-muted); font-size: 0.88rem; }
.ddl-c-pane-empty .ddl-c-rest { margin: 0; border: 0; padding: 1rem 0.5rem; }

/* The Review control: the alias cell itself. 44px tall so it is a real target,
   mono so aliases align down a column. */
.ddl-c-row-open {
  display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; padding: 0 0.15rem;
  color: var(--ddl-k-accent-ink); font: 700 0.86rem/1.2 var(--ddl-mono);
  letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  text-underline-offset: 3px;
}
.ddl-c-row-open:hover { text-decoration: underline; }
.ddl-split-main tr.is-selected .ddl-c-row-open { text-decoration: underline; text-decoration-thickness: 2px; }

/* Row states inside a split list, including their card form on a phone. The
   workspace tables paint their cells with !important, so these must too. The
   selected row is framed (the accent bar, a hairline above and below, the
   tint), so it reads against any zebra stripe; the previewed row carries a
   faint bar, the list's half of the dashed preview pane. A row's cells hold
   a chip, a 44px Review control and two-line facts: centred, they read as one
   line of the list, whichever workspace table they sit in. */
.ddl-split-main table.dataTable tbody td { vertical-align: middle; }
.ddl-split-main table.dataTable tbody tr.is-previewed > td { background: var(--ddl-k-preview-bg) !important; }
.ddl-split-main table.dataTable tbody tr.is-previewed > td:first-child {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ddl-k-select-bar) 38%, transparent) !important;
}
.ddl-split-main table.dataTable tbody tr.is-selected > td {
  background: var(--ddl-k-select-bg) !important;
  box-shadow: inset 0 1px 0 var(--ddl-k-select-bar), inset 0 -1px 0 var(--ddl-k-select-bar) !important;
}
.ddl-split-main table.dataTable tbody tr.is-selected > td:first-child {
  box-shadow: inset 3px 0 0 var(--ddl-k-select-bar), inset 0 1px 0 var(--ddl-k-select-bar),
              inset 0 -1px 0 var(--ddl-k-select-bar) !important;
}

@media (max-width: 720px) {
  .ddl-split-aside { margin-top: 0; }
  .ddl-split:not(.is-pane-open) .ddl-c-pane { display: none; }
  .ddl-split.is-pane-open > .ddl-split-main { display: none; }
  .ddl-split.is-pane-open .ddl-c-pane { margin-top: 0.25rem; padding-top: 0; }
  .ddl-c-pane-back {
    position: sticky; top: 0; z-index: 4; display: flex; align-items: center;
    margin: 0 -1rem 0.8rem; padding: 0.5rem 0.75rem;
    background: var(--ddl-k-card); border-bottom: 1px solid var(--ddl-k-line);
    border-radius: 12px 12px 0 0;
  }
  .ddl-c-pane-back-btn { border-color: transparent; background: transparent; padding: 0 0.6rem; }
  .ddl-c-pane-back-btn:hover { background: var(--ddl-k-tint); }
}

/* ---- card mode: a phone's table is a stack of cards --------------------------------------------- */
.ddl-c-cards .dataTables_wrapper, .ddl-c-cards .dataTables_scrollBody { overflow: visible !important; }
.ddl-c-cards table.dataTable {
  width: 100% !important; min-width: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
  border-collapse: separate !important; border-spacing: 0 !important; box-shadow: none !important;
}
.ddl-c-cards table.dataTable > thead {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ddl-c-cards table.dataTable > tbody { display: block; }
/* A card is a small grid: the reason takes the flexible first column (a chip
   may wrap to its second line on a narrow phone), the Review control and
   "Full row" keep their own columns on the head line, and every other line
   spans the card. The head line never breaks apart, even at 320px. */
.ddl-c-cards table.dataTable > tbody > tr.ddl-c-card-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
  gap: 0.15rem 0.55rem; margin: 0 0 0.5rem; padding: 0.3rem 0.45rem 0.3rem 0.7rem;
  background: var(--ddl-k-card) !important; border: 1px solid var(--ddl-k-line);
  border-radius: 12px; box-shadow: var(--ddl-shadow-1);
}
.ddl-c-cards table.dataTable > tbody > tr.ddl-c-card-row > td {
  display: block; width: auto !important; min-width: 0; max-width: 100%;
  padding: 0 !important; border: 0 !important; background: transparent !important;
  box-shadow: none !important; font-size: 0.88rem; text-align: left !important;
}
.ddl-c-cards table.dataTable > tbody > tr.ddl-c-card-row > td.ddl-c-card-primary { order: 1; grid-column: 1; }
/* The head line: the first named cell (the reason) at the start, the second
   (the Review control) at the end, then "Full row", so a card of two named
   cells is one row tall at rest. */
.ddl-c-cards table.dataTable > tbody > tr.ddl-c-card-row > td.ddl-c-card-primary.is-end { grid-column: 2; }
.ddl-c-cards table.dataTable > tbody > tr.ddl-c-card-row > td.ddl-c-card-toggle { order: 50; grid-column: 3; }
/* A third named cell and beyond each take a labelled line under the head. */
.ddl-c-cards table.dataTable > tbody > tr.ddl-c-card-row > td.ddl-c-card-primary.is-line {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
  align-items: baseline; gap: 0.6rem; padding: 0.1rem 0 0.25rem !important; overflow-wrap: anywhere;
}
.ddl-c-cards table.dataTable > tbody > tr.ddl-c-card-row > td.ddl-c-card-primary.is-line::before {
  content: attr(data-label); color: var(--ddl-k-muted);
  font: 600 0.68rem/1.55 var(--ddl-mono); letter-spacing: 0.07em; text-transform: uppercase;
}
.ddl-c-cards table.dataTable > tbody > tr.ddl-c-card-row > td.ddl-c-card-secondary {
  order: 100; grid-column: 1 / -1; display: none;
}
.ddl-c-cards table.dataTable > tbody > tr.ddl-c-card-row.is-expanded > td.ddl-c-card-secondary {
  display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr); gap: 0.6rem;
  padding: 0.38rem 0 !important; border-top: 1px dotted var(--ddl-k-line-strong) !important;
  overflow-wrap: anywhere;
}
/* ddlTableCards boxes a labelled line's content, so the grid holds exactly a
   label and one value however the cell mixes text and markup. */
.ddl-c-cards table.dataTable > tbody > tr.ddl-c-card-row > td > .ddl-c-card-value { min-width: 0; overflow-wrap: anywhere; }
.ddl-c-cards table.dataTable > tbody > tr.ddl-c-card-row > td.ddl-c-card-secondary::before {
  content: attr(data-label); color: var(--ddl-k-muted);
  font: 600 0.68rem/1.55 var(--ddl-mono); letter-spacing: 0.07em; text-transform: uppercase;
}
/* In card form the row, not its first cell, carries the state bar. */
.ddl-split-main .ddl-c-cards table.dataTable > tbody > tr.ddl-c-card-row > td,
.ddl-split-main .ddl-c-cards table.dataTable > tbody > tr.ddl-c-card-row > td:first-child { box-shadow: none !important; }
/* On a phone the pane is not beside the list, so a previewed card has nothing
   to point at and looks like every other card; only a chosen card is marked. */
.ddl-c-cards table.dataTable > tbody > tr.ddl-c-card-row.is-selected {
  background: var(--ddl-k-select-bg) !important; border-color: var(--ddl-k-select-bar);
  box-shadow: inset 3px 0 0 var(--ddl-k-select-bar), var(--ddl-shadow-1);
}
.ddl-c-cards table.dataTable > tbody > tr.ddl-c-card-empty > td {
  display: block; padding: 0.9rem !important; border: 1.5px dashed var(--ddl-k-line-strong) !important;
  border-radius: 12px; background: var(--ddl-k-card) !important; text-align: left !important;
}
.ddl-c-card-more {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0 0.35rem;
  color: var(--ddl-k-accent-ink); background: transparent; border: 0; border-radius: var(--ddl-r-sm);
  font: 600 0.8rem/1 var(--ddl-k-sans); white-space: nowrap; cursor: pointer;
}
.ddl-c-card-more:hover { background: var(--ddl-k-tint); }
.ddl-c-card-more::after {
  content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}
.ddl-c-card-more[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
@media (pointer: coarse), (max-width: 720px) {
  /* The chip stays chip-sized to the eye; its tap area is extended to 44px.
     Doubled classes: a workspace phone rule sets every button to 44px. */
  .ddl-c-chip.ddl-c-chip { position: relative; min-height: 34px; }
  .ddl-c-chip::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
  .ddl-c-pane-actions .ddl-c-btn { min-height: 44px; }
  .ddl-c-pill-group .ddl-c-pill-text { min-height: 44px; }
  .ddl-c-pill-group .shiny-options-group > .radio-inline,
  .ddl-c-pill-group .shiny-options-group > .radio-inline:has(input:checked) { padding: 0; }
  .ddl-c-info.ddl-c-info { width: 30px; height: 30px; min-height: 30px; }
  .ddl-c-info::after { inset: -7px; }
  .ddl-c-stepper .ddl-c-btn { min-height: 44px; }
}
@media (max-width: 720px) {
  .ddl-c-segmented .shiny-options-group > .radio-inline { flex: 1 1 calc(50% - 1px); }
  .ddl-c-kv-row { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .ddl-c-trays { gap: 0.8rem; }
  .ddl-c-tray { width: 100%; }
  .ddl-c-tray-label { width: 100%; }
}

/* ---- copy link ------------------------------------------------------------------------------- */
.ddl-c-copy-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.55rem; max-width: 100%; }
.ddl-c-copy-glyph { display: inline-flex; opacity: 0.8; }
.ddl-c-copy-status { color: var(--ddl-k-ok); font: 600 0.85rem/1.3 var(--ddl-k-sans); }
.ddl-c-copy-status:empty { display: none; }
.ddl-c-copy-fallback {
  flex: 1 1 100%; min-width: 0; min-height: 40px; padding: 0 0.6rem;
  color: var(--ddl-k-ink); background: var(--ddl-k-tint);
  border: 1px solid var(--ddl-k-line-strong); border-radius: var(--ddl-r-sm);
  font: 0.8rem var(--ddl-mono);
}
.ddl-c-copy-fallback[hidden] { display: none; }

/* ---- the range graphic --------------------------------------------------------------------------- */
.ddl-c-ranges { display: grid; gap: 0.85rem; margin: 0.5rem 0; }
.ddl-c-range { min-width: 0; }
.ddl-c-range-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.ddl-c-range-label { font-size: 0.88rem; min-width: 0; }
.ddl-c-range-value { font: 700 0.95rem/1.2 var(--ddl-k-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ddl-c-range-track {
  position: relative; height: 12px; margin: 0.3rem 0 0.25rem; border-radius: 6px;
  background: repeating-linear-gradient(90deg, var(--ddl-k-tint) 0 calc(25% - 1px), var(--ddl-k-line) calc(25% - 1px) 25%);
  box-shadow: inset 0 0 0 1px var(--ddl-k-line);
}
.ddl-c-range-band {
  position: absolute; top: 2px; bottom: 2px; min-width: 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--ddl-k-accent) 78%, var(--ddl-k-night));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ddl-k-card) 70%, transparent);
}
.ddl-c-range-tick {
  position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px;
  border-radius: 2px; background: var(--ddl-k-night); box-shadow: 0 0 0 1.5px var(--ddl-k-card);
}
/* The facts line says what the range is over and what falls outside it: an
   honest caption, so it holds the 0.85rem caption floor like the others. */
.ddl-c-range-facts {
  margin: 0; color: var(--ddl-k-muted); font: 400 0.85rem/1.4 var(--ddl-k-sans);
  font-variant-numeric: tabular-nums;
}

/* ---- the mini-map and map captions ------------------------------------------------------------------ */
.ddl-c-mini-map { margin: 0.4rem 0 0.2rem; }
.ddl-c-mini-map .leaflet-container, .ddl-c-day-map .leaflet-container {
  border-radius: 10px; box-shadow: inset 0 0 0 1px var(--ddl-k-line), 0 0 0 1px var(--ddl-k-line);
  background: var(--ddl-k-tint);
}
.ddl-c-mini-map-caption { display: flex; justify-content: flex-end; margin: 0.15rem 0 0; }
.ddl-c-mini-map-link {
  display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; padding: 0 0.1rem;
  color: var(--ddl-k-accent-ink); font: 600 0.85rem/1.2 var(--ddl-k-sans); text-underline-offset: 3px;
}
.ddl-c-map-caption { margin: 0.35rem 0 0; color: var(--ddl-k-muted); font-size: 0.85rem; line-height: 1.45; }
/* A 220px map cannot spend two full lines on its credits; they stay whole,
   smaller, and let the ground show through. */
:is(.ddl-c-mini-map, .ddl-c-day-map) .leaflet-control-attribution {
  max-width: 100%; padding: 1px 6px; font-size: 0.62rem; line-height: 1.35;
  background: color-mix(in srgb, var(--ddl-k-card) 80%, transparent);
}

/* ---- the source viewer -------------------------------------------------------------------------------- */
.ddl-c-source-lede { margin: 0 0 0.6rem; font-size: 0.88rem; color: var(--ddl-k-muted); }
.ddl-c-source-fn { margin: 0 0 0.45rem; border: 1px solid var(--ddl-k-line); border-radius: 8px; background: var(--ddl-k-card); }
.ddl-c-source-fn > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem;
  min-height: 44px; padding: 0.55rem 0.75rem; cursor: pointer; list-style: none;
}
.ddl-c-source-fn > summary::-webkit-details-marker { display: none; }
.ddl-c-source-fn > summary:hover, .ddl-c-source-fn[open] > summary { background: var(--ddl-k-tint); }
.ddl-c-source-name { font: 600 0.82rem/1.3 var(--ddl-mono); color: var(--ddl-k-ink); }
.ddl-c-source-file { font: 500 0.74rem/1.3 var(--ddl-mono); color: var(--ddl-k-muted); }
.ddl-c-source-pre {
  margin: 0; max-height: 26rem; overflow: auto; padding: 0.75rem 0.85rem;
  color: var(--ddl-k-ink); background: var(--ddl-k-canvas);
  border-top: 1px solid var(--ddl-k-line); border-radius: 0 0 8px 8px;
  font: 0.78rem/1.55 var(--ddl-mono); tab-size: 2; white-space: pre;
}
.ddl-c-source-foot { margin: 0.6rem 0 0; color: var(--ddl-k-muted); font: 400 0.85rem/1.45 var(--ddl-k-sans); }

/* ---- the Day plan card -------------------------------------------------------------------------------- */
.ddl-day-card {
  color: var(--ddl-k-ink); background: var(--ddl-k-card);
  border: 1px solid var(--ddl-k-line); border-radius: 12px; box-shadow: var(--ddl-shadow-1);
  scroll-margin-top: calc(var(--ddl-k-chrome-h) + 12px);
}
.ddl-day-card-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem;
  min-height: 48px; padding: 0.3rem 0.5rem 0.3rem 0.95rem;
}
.ddl-day-card-title { flex: 1 1 auto; margin: 0; font: 650 0.95rem/1.3 var(--ddl-k-sans); color: var(--ddl-k-ink); }
.ddl-day-card-count { font-weight: 500; color: var(--ddl-k-muted); font-variant-numeric: tabular-nums; }
.ddl-day-card.is-empty .ddl-day-card-head { min-height: 44px; }
.ddl-day-card.is-empty .ddl-day-card-title { font-size: 0.88rem; }
.ddl-day-card-toggle { display: none; }
.ddl-day-card-copy .ddl-c-btn { min-height: 40px; padding: 0 0.7rem; font-size: 0.8rem; }
.ddl-day-card-body {
  display: grid; gap: 0.85rem; padding: 0.85rem 0.95rem 0.95rem;
  border-top: 1px solid var(--ddl-k-line);
}
.ddl-day-card-body .ddl-c-fold { margin: 0; }
.ddl-day-map-title {
  margin: 0 0 0.3rem; color: var(--ddl-k-muted); font: 700 0.68rem/1.3 var(--ddl-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
}
/* Two rows of equal tiles: at 400px the labels ("Download the day sheet (3)")
   cannot sit two to a line, so a tile may take two lines rather than every
   action taking a full-width row of its own. */
.ddl-day-card-actions { display: grid; gap: 0.4rem; }
.ddl-day-card-actions-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.4rem;
}
.ddl-day-card-actions-row .ddl-c-btn {
  min-width: 0; padding: 0.3rem 0.45rem; white-space: normal; text-align: center;
  line-height: 1.2; font-size: 0.8rem; text-wrap: balance;
}
.ddl-day-name label { display: block; margin: 0 0 0.2rem; font: 600 0.85rem var(--ddl-k-sans); }
.ddl-day-name input {
  width: 100%; min-height: 44px; padding: 0 0.7rem; color: var(--ddl-k-ink);
  background: var(--ddl-k-card); border: 1px solid var(--ddl-k-line-strong); border-radius: var(--ddl-r-sm);
  font: 0.9rem var(--ddl-k-sans);
}
.ddl-day-name .ddl-day-name-help { margin: 0.2rem 0 0; color: var(--ddl-k-muted); font-size: 0.85rem; }
.ddl-day-notice {
  margin: 0; padding: 0.55rem 0.75rem; border-radius: 8px; font-size: 0.85rem;
  background: color-mix(in srgb, var(--ddl-k-attention) 14%, var(--ddl-k-card));
  border-left: 3px solid var(--ddl-k-attention);
}
.ddl-day-ready-summary { margin: 0 0 0.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ddl-day-ready-notes { margin: 0; padding-left: 1.1rem; color: var(--ddl-k-muted); font-size: 0.85rem; }
.ddl-day-stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; counter-reset: none; }
.ddl-day-stop {
  display: grid; gap: 0.3rem; padding: 0.55rem 0.65rem;
  border: 1px solid var(--ddl-k-line); border-radius: 10px; background: var(--ddl-k-card);
}
.ddl-day-stop-head { display: flex; align-items: baseline; gap: 0.5rem; font: 650 0.9rem/1.3 var(--ddl-k-sans); }
.ddl-day-stop-no {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; color: var(--ddl-k-card); background: var(--ddl-k-night);
  font: 700 0.78rem/1 var(--ddl-k-sans); font-variant-numeric: tabular-nums;
  transform: translateY(0.15rem);
}
.ddl-day-stop.is-dashed .ddl-day-stop-no {
  color: var(--ddl-k-night); background: var(--ddl-k-card); border: 2px dashed var(--ddl-k-night);
}
.ddl-day-stop-sub { margin: 0; color: var(--ddl-k-muted); font-size: 0.82rem; }
.ddl-day-stop-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ddl-day-stop-actions .ddl-c-btn { min-height: 40px; padding: 0 0.65rem; font-size: 0.8rem; }

@media (max-width: 720px) {
  .ddl-day-card[data-ddl-day-count="0"], .ddl-day-card.is-empty { display: none; }
  .ddl-day-card.is-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    display: flex; flex-direction: column; height: 48px; max-height: 80vh; overflow: hidden;
    margin: 0; border: 0; border-radius: 16px 16px 0 0; box-shadow: var(--ddl-shadow-3);
    transition: height 220ms cubic-bezier(.2, .8, .2, 1);
  }
  .ddl-day-card.is-bar.is-open { height: 80vh; }
  .ddl-day-card.is-bar .ddl-day-card-head { flex: 0 0 auto; min-height: 48px; padding: 0; gap: 0; background: var(--ddl-k-night); }
  .ddl-day-card.is-bar .ddl-day-card-title {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .ddl-day-card.is-bar .ddl-day-card-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    width: 100%; min-height: 48px; padding: 0 1rem; margin: 0;
    color: var(--ddl-k-card); background: transparent; border: 0; cursor: pointer;
    font: 650 0.92rem/1.2 var(--ddl-k-sans); text-align: left;
  }
  .ddl-day-card.is-bar .ddl-day-card-toggle:focus-visible { outline-color: var(--ddl-c-focus-dark, var(--ddl-k-card)); outline-offset: -4px; }
  .ddl-day-card-toggle-verb {
    padding: 0.28rem 0.8rem; border-radius: var(--ddl-r-pill);
    border: 1px solid color-mix(in srgb, var(--ddl-k-card) 45%, transparent);
    font: 700 0.68rem/1 var(--ddl-mono); letter-spacing: 0.1em; text-transform: uppercase;
  }
  .ddl-day-card.is-bar .ddl-day-card-copy { display: none; }
  .ddl-day-card.is-bar.is-open .ddl-day-card-copy {
    display: block; width: 100%; padding: 0.6rem 1rem 0.2rem; background: var(--ddl-k-card);
  }
  .ddl-day-card.is-bar .ddl-day-card-body {
    flex: 1 1 auto; overflow-y: auto; border-top: 0;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  html.ddl-day-bar-on body { padding-bottom: 48px; }
}
@media (prefers-reduced-motion: no-preference) {
  html.ddl-motion-ok .ddl-day-card.is-bar.is-arriving { animation: ddl-k-bar-in 260ms cubic-bezier(.2, .8, .2, 1) both; }
  html.ddl-motion-ok .ddl-c-chip-dialog[open]:not(:modal) { animation: ddl-k-fade 120ms ease-out both; }
  html.ddl-motion-ok .ddl-c-chip-dialog:modal { animation: ddl-k-sheet-in 200ms cubic-bezier(.2, .8, .2, 1) both; }
  html.ddl-motion-ok .ddl-c-pane.is-flash { animation: ddl-k-flash 600ms ease-out both; }
  html.ddl-motion-ok .ddl-c-pane.is-pending::after { animation: ddl-k-pending 1.1s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .ddl-day-card.is-bar, .ddl-c-fold-chev, .ddl-c-card-more::after, .ddl-c-pane-content { transition: none; }
}
@keyframes ddl-k-bar-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ddl-k-sheet-in { from { transform: translateY(24px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes ddl-k-fade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes ddl-k-flash {
  0% { outline-color: var(--ddl-k-attention); outline-offset: 2px; }
  100% { outline-color: transparent; outline-offset: 6px; }
}
@keyframes ddl-k-pending { 0% { opacity: 0.35; } 50% { opacity: 1; } 100% { opacity: 0.35; } }

/* ---- the printed sheet (hidden on screen) ---------------------------------------------------------- */
.ddl-c-sheet { display: none; }

@media print {
  /* A scope armed by ddlPrintScope() prints only its target: every element
     that neither is, holds nor sits inside a target leaves the page. */
  html.ddl-print-scoped body *:not(.ddl-print-target):not(.ddl-print-target *):not(:has(.ddl-print-target)) {
    display: none !important;
  }
  html.ddl-print-scoped body :has(.ddl-print-target) {
    margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important;
    background: none !important; position: static !important; max-height: none !important;
    overflow: visible !important; transform: none !important; grid-template-columns: none !important;
    display: block !important;
  }
  html.ddl-print-scoped .ddl-c-sheet.ddl-print-target { display: block !important; }
  /* A printed record keeps its facts and drops the controls that only act on
     a screen: Back, the stepper, the action row, copy link, the map link. */
  html.ddl-print-scoped .ddl-print-target :is(.ddl-c-pane-back, .ddl-c-stepper, .ddl-c-pane-actions,
    .ddl-c-copy-wrap, .ddl-c-mini-map-caption, .leaflet-control-zoom, .leaflet-control-layers) {
    display: none !important;
  }
  html.ddl-print-scoped .ddl-print-target .ddl-c-mini-map { break-inside: avoid; }
  /* Every printed scope carries the two demo marks, whatever a package put in
     it: the ribbon does not reach paper in a scoped print. A sheet prints them
     in its own provenance line. (verify_revamp_kit.R pins this string to
     DDL_SHEET_MARKS so the two cannot drift.) */
  html.ddl-print-scoped .ddl-print-target:not(.ddl-c-sheet)::after {
    content: "Generated sample records \00b7  Data status: Demo data \00b7  Record class: GENERATED_SAMPLE";
    display: block; margin: 4mm 0 0; padding-top: 2mm; border-top: 0.5pt solid var(--ddl-muted);
    font: 500 7.5pt/1.4 var(--ddl-mono); letter-spacing: 0.02em;
  }
  .ddl-c-info-wrap, .ddl-c-chip-dialog, .ddl-c-card-more, .ddl-c-copy-wrap,
  .ddl-c-screen-only { display: none !important; }
  .ddl-c-fold { break-inside: avoid; border-color: currentColor; }
  .ddl-c-fold > summary .ddl-c-fold-chev { display: none; }

  .ddl-c-sheet { color: var(--ddl-ink); font: 10pt/1.4 var(--ddl-k-sans, system-ui, sans-serif); }
  .ddl-c-sheet-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12mm;
    margin: 0 0 5mm; padding: 0 0 3mm; border-bottom: 1.5pt solid var(--ddl-ink);
  }
  .ddl-c-sheet-eyebrow {
    margin: 0 0 1mm; font: 700 7.5pt/1.3 var(--ddl-mono); letter-spacing: 0.12em; text-transform: uppercase;
  }
  .ddl-c-sheet-title { margin: 0; font: 400 20pt/1.15 var(--ddl-display); letter-spacing: -0.01em; }
  .ddl-c-sheet-sub { margin: 1.5mm 0 0; font: 400 9pt/1.35 var(--ddl-k-sans, sans-serif); }
  .ddl-c-sheet-mark { flex: 0 0 auto; width: 14mm; height: 14mm; fill: none; }
  .ddl-c-sheet-mark .ddl-c-register-frame { stroke: var(--ddl-ink); stroke-width: 1.15; }
  .ddl-c-sheet-mark .ddl-c-register-contour { stroke: var(--ddl-mauve); stroke-width: 1.05; }
  .ddl-c-sheet-mark .ddl-c-register-trail { stroke: var(--ddl-bronze); stroke-width: 1.4; stroke-linecap: round; }
  .ddl-c-sheet-mark .ddl-c-register-nodes circle { fill: var(--ddl-bronze); }
  .ddl-c-sheet-table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .ddl-c-sheet-table th {
    padding: 1.6mm 2mm; text-align: left; vertical-align: bottom;
    font: 700 7.5pt/1.25 var(--ddl-mono); letter-spacing: 0.08em; text-transform: uppercase;
    border-bottom: 1pt solid var(--ddl-ink);
  }
  .ddl-c-sheet-table td {
    height: 11mm; padding: 2.2mm 2mm; vertical-align: top; border-bottom: 0.5pt solid var(--ddl-muted);
    font-variant-numeric: tabular-nums;
  }
  .ddl-c-sheet-table tr { break-inside: avoid; }
  .ddl-c-sheet-notes { min-width: 24mm; width: 30%; border-left: 0.5pt solid var(--ddl-muted); }
  .ddl-c-sheet-caption { margin: 3mm 0 0; font-size: 8.5pt; }
  .ddl-c-sheet-prov {
    margin: 4mm 0 0; padding-top: 2mm; border-top: 0.5pt solid var(--ddl-muted);
    font: 500 7.5pt/1.4 var(--ddl-mono); letter-spacing: 0.02em;
  }
}
/* ==== [/F0B] ==== */

/* ==== [T1] ==== */
/* The Tortoise Action center (tor_action_revamp.R): the headline with its
   three counts, the Filters block (a plain row on a desktop, a fold on a
   phone), the six-column list beside its record pane, the pre-visit register
   with its session marks, and the field sheet on paper. Tokens only; the kit
   (the [F0B] block) draws every shared component, this draws the route. */

/* ---- the page rhythm --------------------------------------------------------------- */
.ddl-tor-action-page .ddl-tor-route-head { margin-bottom: 0.75rem; }
.ddl-tor-action-page .ddl-tor-scope-slot > .ddl-tor-context { margin-bottom: 0.75rem; }
.ddl-tor-action-page .ddl-tor-muted { color: var(--ddl-c-muted); font-size: 0.85rem; }

/* ---- the headline card ------------------------------------------------------------------
   One sentence, the three counts that make it up (each a quick filter), and
   the fold that says why they total more than the sentence. The gold rule
   is attention; nothing else on the card is gold. */
.ddl-tor-action-page .ddl-tor-card.ddl-tor-worklist-card {
  margin: 0 0 0.75rem;
  padding: 0.8rem 1rem 0.7rem 1.15rem;
  background: var(--ddl-c-card);
  border-color: var(--ddl-c-hairline);
  box-shadow: inset 4px 0 0 var(--ddl-c-attention), var(--ddl-shadow-1);
}
.ddl-tor-action-page .ddl-tor-worklist-card > .ddl-tor-answer-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem 1.25rem;
  align-items: center;
}
.ddl-tor-action-page .ddl-tor-answer { min-width: 0; }
.ddl-tor-action-page .ddl-tor-answer .ddl-tor-headline {
  margin: 0;
  color: var(--ddl-c-ink);
  font-size: 1.12rem;
  font-weight: 650;
  line-height: 1.3;
  text-wrap: balance;
}
.ddl-tor-action-page .ddl-tor-answer .ddl-tor-marks-line {
  margin: 0.2rem 0 0;
  color: var(--ddl-c-muted);
  font-size: 0.85rem;
}
.ddl-tor-action-page .ddl-tor-worklist-card > .ddl-tor-answer-row > .ddl-tor-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.ddl-tor-action-page .ddl-tor-stats > .ddl-tor-stat.ddl-tor-quick {
  --tor-tone: var(--ddl-c-muted);
  display: inline-flex;
  align-items: baseline;
  gap: 0.34rem;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 0.5rem 0.85rem 0.5rem 0.7rem;
  color: color-mix(in srgb, var(--tor-tone) 58%, var(--ddl-c-ink));
  background: color-mix(in srgb, var(--tor-tone) 9%, var(--ddl-c-card));
  border: 1px solid color-mix(in srgb, var(--tor-tone) 38%, transparent);
  border-radius: var(--ddl-r-pill);
  font: 600 0.85rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.ddl-tor-action-page .ddl-tor-stats > .ddl-tor-stat.ddl-tor-quick::before {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tor-tone);
}
.ddl-tor-action-page .ddl-tor-stats > .ddl-tor-quick.is-alert { --tor-tone: var(--ddl-c-alert); }
.ddl-tor-action-page .ddl-tor-stats > .ddl-tor-quick.is-attention { --tor-tone: var(--ddl-c-attention); }
.ddl-tor-action-page .ddl-tor-stats > .ddl-tor-quick.is-alert::before {
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  width: 8px;
  height: 8px;
}
.ddl-tor-action-page .ddl-tor-stats > .ddl-tor-quick.is-attention::before {
  border-radius: 1px;
  transform: rotate(45deg);
  width: 6px;
  height: 6px;
}
.ddl-tor-action-page .ddl-tor-stats > .ddl-tor-stat.ddl-tor-quick strong {
  display: inline;
  color: inherit;
  font-size: 0.98rem;
  font-weight: 750;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ddl-tor-action-page .ddl-tor-stats > .ddl-tor-stat.ddl-tor-quick span {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: 0.85rem;
  line-height: 1.2;
}
.ddl-tor-action-page .ddl-tor-stats > .ddl-tor-quick:hover { border-color: var(--tor-tone); }
.ddl-tor-action-page .ddl-tor-stats > .ddl-tor-quick[aria-pressed="true"] {
  color: var(--ddl-c-ink);
  background: var(--ddl-c-select-bg);
  border-color: var(--ddl-c-select-bar);
  box-shadow: inset 0 0 0 1px var(--ddl-c-select-bar);
}
.ddl-tor-action-page .ddl-tor-stats > .ddl-tor-quick.is-muted { opacity: 0.55; }
.ddl-tor-action-page .ddl-tor-stats > .ddl-tor-quick:focus-visible {
  outline: 3px solid var(--ddl-c-focus);
  outline-offset: 2px;
}
.ddl-tor-action-page .ddl-tor-headline-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-top: 0.45rem;
}
.ddl-tor-action-page .ddl-tor-headline-foot > .demo-chip { flex: 0 0 auto; margin-left: auto; }
/* The fold reads as a quiet line under the counts until it opens; its words
   may take a second line on a phone rather than push the mark below them. */
.ddl-tor-action-page .ddl-c-fold.ddl-tor-overlap {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  background: transparent;
  border-color: transparent;
}
.ddl-tor-action-page .ddl-c-fold.ddl-tor-overlap > summary {
  justify-content: flex-start;
  min-height: 36px;
  padding: 0.2rem 0.55rem 0.2rem 0;
  color: var(--ddl-c-accent-ink);
  font-size: 0.85rem;
  font-weight: 600;
}
.ddl-tor-action-page .ddl-c-fold.ddl-tor-overlap > summary:hover,
.ddl-tor-action-page .ddl-c-fold.ddl-tor-overlap[open] > summary {
  background: transparent;
  border-bottom: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ddl-tor-action-page .ddl-c-fold.ddl-tor-overlap[open] {
  flex-basis: 100%;
  order: 2;
  background: var(--ddl-c-tint);
  border-color: var(--ddl-c-hairline);
}
.ddl-tor-action-page .ddl-c-fold.ddl-tor-overlap[open] > summary { padding-left: 0.75rem; }
.ddl-tor-action-page .ddl-tor-overlap .ddl-c-fold-body { padding-top: 0.2rem; }
.ddl-tor-action-page .ddl-tor-overlap .ddl-c-fold-body p { margin: 0 0 0.35rem; color: var(--ddl-c-ink); font-size: 0.88rem; }

/* ---- the Filters block ----------------------------------------------------------------------
   A desktop reads the filters as a plain row under the headline: the fold
   stands open (app.js [T1]) and its summary steps aside. A phone keeps them in
   a closed fold whose summary carries the count, with the scope line as its
   first row, so the first card is on the first screen. */
.ddl-tor-action-page .ddl-tor-filters { margin: 0 0 0.35rem; }
.ddl-tor-action-page .ddl-tor-filters .ddl-c-fold-summary { min-width: 0; }
.ddl-tor-action-page .ddl-tor-page-tail { font-variant-numeric: tabular-nums; }
.ddl-tor-action-page .ddl-tor-filter-grid { display: grid; gap: 0.25rem 1.25rem; min-width: 0; }
.ddl-tor-action-page .ddl-tor-filter-show { min-width: 0; }
.ddl-tor-action-page .ddl-tor-filter-show .ddl-c-pill-group { margin: 0; }
.ddl-tor-action-page .ddl-tor-filter-show .ddl-c-pill-group .ddl-c-pill-text { padding: 0 0.72rem; }
.ddl-tor-action-page .ddl-tor-filter-fields {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0.35rem 0.75rem;
  align-items: end;
  min-width: 0;
}
.ddl-tor-action-page .ddl-tor-filter-fields .shiny-input-container { width: 100%; max-width: 100%; margin: 0; }
.ddl-tor-action-page .ddl-tor-filter-fields .control-label {
  display: block;
  margin: 0 0 0.2rem;
  color: var(--ddl-c-muted);
  font: 600 0.68rem/1.3 var(--ddl-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ddl-tor-action-page .ddl-tor-filter-fields .form-control,
.ddl-tor-action-page .ddl-tor-filter-fields .selectize-input {
  min-height: 40px;
  border-radius: var(--ddl-r-sm);
  box-shadow: none;
}
.ddl-tor-action-page .ddl-tor-filter-fields .selectize-control { margin: 0; }
@media (min-width: 721px) {
  .ddl-tor-action-page .ddl-c-fold.ddl-tor-filters[open] {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
  }
  .ddl-tor-action-page .ddl-c-fold.ddl-tor-filters[open] > summary { display: none; }
  .ddl-tor-action-page .ddl-tor-filters[open] > .ddl-c-fold-body { padding: 0; }
  .ddl-tor-action-page .ddl-tor-filters .ddl-tor-scope-phone { display: none; }
}
@media (min-width: 1100px) {
  .ddl-tor-action-page .ddl-tor-filter-grid {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem);
    align-items: end;
  }
  .ddl-tor-action-page .ddl-tor-filter-fields { padding-bottom: 3px; }
}

/* ---- the status line and the list ----------------------------------------------------------- */
.ddl-tor-action-page .ddl-c-status.ddl-tor-status { margin: 0.3rem 0 0.45rem; }
.ddl-tor-action-page .ddl-split-main .ddl-tor-dt-bottom { font-size: 0.85rem; }
/* Six columns beside a 360-400px aside: the cells keep a slim side padding and
   the sort arrows a slim gutter, so the last column is never pushed out of
   the list at 1100px. */
.ddl-tor-action-page .ddl-split-main table.dataTable tbody > tr > td { padding: 0.4rem 0.5rem; }
.ddl-tor-action-page .ddl-split-main table.dataTable thead > tr > th {
  padding-left: 0.5rem;
  padding-right: 1.35rem;
}
.ddl-tor-action-page .ddl-split-main table.dataTable td.ddl-tor-col-animal { white-space: nowrap; }
.ddl-tor-action-page .ddl-split-main table.dataTable td.ddl-tor-col-sex { line-height: 1.3; }
/* At the narrow end of the split the size class may break before its class
   number ("Immature" over "(class 2)"); from 1280px it stays whole. */
@media (max-width: 1279px) {
  .ddl-tor-action-page .ddl-split-main table.dataTable td.ddl-tor-col-sex .ddl-c-nowrap { white-space: normal; }
}
.ddl-tor-action-page .ddl-split-main table.dataTable td.ddl-tor-col-mass { font-variant-numeric: tabular-nums; }
.ddl-tor-action-page .ddl-tor-why-none { color: var(--ddl-c-muted); font-size: 0.85rem; }

/* ---- the record pane ------------------------------------------------------------------------ */
.ddl-tor-pane .ddl-c-pane-eyebrow:empty { display: none; }
.ddl-tor-pane .ddl-c-pane-actions { display: grid; gap: 0.4rem; justify-items: start; }
.ddl-tor-pane .ddl-tor-pane-review { color: var(--ddl-c-accent-ink); }
.ddl-tor-pane .ddl-tor-pane-go,
.ddl-tor-pane .ddl-tor-pane-keep { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ddl-tor-pane .ddl-tor-pane-keep .ddl-c-btn {
  border-color: transparent;
  background: transparent;
  color: var(--ddl-c-accent-ink);
  padding-inline: 0.45rem;
}
.ddl-tor-pane .ddl-tor-pane-keep .ddl-c-btn:hover { background: var(--ddl-c-tint); }
.ddl-tor-pane .ddl-tor-pane-chips { margin: 0 0 0.35rem; }
.ddl-tor-pane .ddl-tor-pane-label {
  margin: 0.95rem 0 0.4rem;
  color: var(--ddl-c-muted);
  font: 700 0.68rem/1.3 var(--ddl-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ddl-tor-pane .ddl-tor-pane-none,
.ddl-tor-pane .ddl-tor-pane-held p { margin: 0; color: var(--ddl-c-ink); font-size: 0.9rem; }
.ddl-tor-pane .ddl-tor-pane-held p {
  padding: 0.5rem 0.65rem;
  border-left: 3px solid var(--ddl-c-hairline);
  background: var(--ddl-c-zebra);
  border-radius: 0 var(--ddl-r-sm) var(--ddl-r-sm) 0;
}
.ddl-tor-pane .ddl-tor-pane-checklist {
  margin: 0.8rem 0 0.4rem;
  color: var(--ddl-c-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}
.ddl-tor-pane .ddl-c-kv { margin-top: 0.2rem; }
.ddl-tor-pane .ddl-tor-map-hold {
  height: 220px;
  border-radius: 10px;
  background: var(--ddl-c-tint);
  box-shadow: inset 0 0 0 1px var(--ddl-c-hairline);
}
.ddl-tor-pane .ddl-tor-pane-map .ddl-c-map-caption { margin-top: 0.1rem; }
.ddl-tor-pane.is-preview .ddl-c-pane-head { margin-bottom: 0.6rem; }

/* A printed record says what it is before it says anything else. */
.ddl-tor-pane .ddl-tor-pane-print { display: none; }
@media print {
  .ddl-tor-pane .ddl-tor-pane-print {
    display: block;
    margin: 0 0 3mm;
    padding: 0 0 1.5mm;
    border-bottom: 1pt solid var(--ddl-ink);
    color: var(--ddl-ink);
    font: 700 7.5pt/1.3 var(--ddl-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
}

/* ---- items: the register's lines, in the pane and in the register --------------------------------
   Tag, words, then the one control: "Mark as checked" on an open line, "Undo
   this mark" on a marked one, nothing on a note. A marked line is struck and
   says its reason and "this session"; it never turns green. */
.ddl-tor-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ddl-tor-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "tag body" ". act";
  gap: 0.25rem 0.55rem;
  align-items: baseline;
  min-width: 0;
}
.ddl-tor-item-tag { grid-area: tag; }
.ddl-tor-item-tag .ddl-c-pill { font-size: 0.74rem; min-height: 24px; padding: 0.08rem 0.5rem; }
.ddl-tor-item-body { grid-area: body; min-width: 0; display: grid; gap: 0.15rem; }
.ddl-tor-item-text { color: var(--ddl-c-ink); font-size: 0.9rem; line-height: 1.45; }
.ddl-tor-item.is-info .ddl-tor-item-text { color: var(--ddl-c-muted); }
.ddl-tor-item.is-marked .ddl-tor-item-text {
  color: var(--ddl-c-muted);
  text-decoration-color: color-mix(in srgb, var(--ddl-c-checked) 80%, transparent);
  text-decoration-thickness: 1.5px;
}
.ddl-tor-item-status {
  color: color-mix(in srgb, var(--ddl-c-checked) 55%, var(--ddl-c-ink));
  font-size: 0.85rem;
  font-weight: 600;
}
.ddl-tor-item > .ddl-tor-mark,
.ddl-tor-item > .ddl-tor-undo { grid-area: act; justify-self: start; }
/* Quiet: one per line, many per list, so the words carry it, not the box. */
.ddl-tor-mark.ddl-c-btn {
  min-height: 44px;
  padding: 0 0.8rem;
  color: var(--ddl-c-accent-ink);
  background: transparent;
  border-color: var(--ddl-c-hairline);
  font-size: 0.82rem;
}
.ddl-tor-mark.ddl-c-btn:hover { background: var(--ddl-c-tint); border-color: var(--ddl-c-accent); }
.ddl-tor-undo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.3rem;
  color: var(--ddl-c-accent-ink);
  background: transparent;
  border: 0;
  border-radius: var(--ddl-r-sm);
  font: 600 0.85rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ddl-tor-undo:hover { background: var(--ddl-c-tint); }
.ddl-tor-undo:focus-visible { outline: 3px solid var(--ddl-c-focus); outline-offset: 2px; }

/* ---- the trays, the register and the marks ----------------------------------------------------- */
.ddl-tor-action-page .ddl-c-trays { margin-bottom: 1rem; }
.ddl-tor-action-page .ddl-tor-register-fold,
.ddl-tor-action-page .ddl-tor-marks { margin-bottom: 0.75rem; }
.ddl-tor-action-page .ddl-tor-register-count { color: var(--ddl-c-muted); font-weight: 500; }
.ddl-tor-register { display: grid; }
.ddl-tor-reg-group {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.35rem 1rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--ddl-c-hairline);
}
.ddl-tor-reg-group:first-child { border-top: 0; padding-top: 0.15rem; }
.ddl-tor-reg-alias {
  margin: 0;
  color: var(--ddl-c-ink);
  font: 700 0.9rem/1.3 var(--ddl-mono);
}
@media (min-width: 900px) {
  .ddl-tor-reg-alias { display: flex; align-items: center; min-height: 44px; }
  .ddl-tor-register .ddl-tor-items { gap: 0.2rem; }
  .ddl-tor-register .ddl-tor-item {
    grid-template-columns: 7.75rem minmax(0, 1fr) auto;
    grid-template-areas: "tag body act";
    align-items: center;
    min-height: 44px;
  }
  .ddl-tor-register .ddl-tor-item-tag { justify-self: start; }
  .ddl-tor-register .ddl-tor-item > .ddl-tor-mark,
  .ddl-tor-register .ddl-tor-item > .ddl-tor-undo { justify-self: end; }
}
.ddl-tor-marks-note { margin: 0 0 0.55rem; color: var(--ddl-c-muted); font-size: 0.85rem; }
.ddl-tor-marks-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.ddl-tor-marks-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.75rem;
  padding: 0.25rem 0;
  border-top: 1px dotted var(--ddl-c-hairline);
}
.ddl-tor-marks-list > li:first-child { border-top: 0; }
.ddl-tor-marks-what { color: var(--ddl-c-ink); font-size: 0.9rem; }
.ddl-tor-marks-what strong { font-family: var(--ddl-mono); }
.ddl-tor-marks-list .ddl-tor-undo { margin-left: auto; }

/* ---- the reference folds ------------------------------------------------------------------------ */
.ddl-tor-action-page .ddl-tor-reference { display: grid; gap: 0 0.75rem; align-items: start; }
.ddl-tor-action-page .ddl-tor-reference .ddl-tor-priority-key { margin: 0.5rem 0; }
.ddl-tor-action-page .ddl-tor-reference .ddl-tor-priority-key dt {
  margin-top: 0.45rem;
  color: var(--ddl-c-ink);
  font-weight: 650;
  font-size: 0.88rem;
}
.ddl-tor-action-page .ddl-tor-reference .ddl-tor-priority-key dd {
  margin: 0.1rem 0 0;
  color: var(--ddl-c-muted);
  font-size: 0.88rem;
}
.ddl-tor-action-page .ddl-tor-reference p { font-size: 0.88rem; }
@media (min-width: 900px) {
  .ddl-tor-action-page .ddl-tor-reference { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---- the Mark as checked dialog (a Bootstrap modal, outside the page root) ---------------------- */
.ddl-tor-mark-dialog .ddl-c-kv { margin: 0 0 0.75rem; }
.ddl-tor-mark-dialog .ddl-tor-mark-note { margin: 0 0 0.4rem; color: var(--ddl-c-ink); font-size: 0.9rem; }
.ddl-tor-mark-dialog .ddl-tor-mark-rule { margin: 0 0 0.75rem; color: var(--ddl-c-muted); font-size: 0.88rem; }
.ddl-tor-mark-reasons { margin: 0; padding: 0; border: 0; display: grid; gap: 0.25rem; }
.ddl-tor-mark-reasons legend {
  margin: 0 0 0.3rem;
  color: var(--ddl-c-muted);
  font: 700 0.68rem/1.3 var(--ddl-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ddl-tor-mark-reason {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  margin: 0;
  padding: 0.35rem 0.7rem;
  color: var(--ddl-c-ink);
  border: 1px solid var(--ddl-c-hairline);
  border-radius: var(--ddl-r-sm);
  font-size: 0.9rem;
  cursor: pointer;
}
.ddl-tor-mark-reason:hover { background: var(--ddl-c-tint); }
.ddl-tor-mark-reason:has(input:checked) {
  background: var(--ddl-c-select-bg);
  border-color: var(--ddl-c-select-bar);
  box-shadow: inset 0 0 0 1px var(--ddl-c-select-bar);
}
.ddl-tor-mark-reason input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--ddl-c-accent); }
.ddl-tor-mark-reason input:focus-visible { outline: 3px solid var(--ddl-c-focus); outline-offset: 2px; }
.ddl-tor-mark-problem { margin: 0.6rem 0 0; color: var(--ddl-c-alert); font-size: 0.9rem; font-weight: 600; }
.ddl-tor-mark-problem:empty { display: none; }

/* ---- phones -------------------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .ddl-tor-action-page .ddl-c-status.ddl-tor-status { display: none; }
  .ddl-tor-action-page .ddl-tor-filters { margin-bottom: 0.6rem; }
  .ddl-tor-action-page .ddl-tor-filters > .ddl-c-fold-body { padding-top: 0.6rem; }
  .ddl-tor-action-page .ddl-tor-scope-phone .ddl-tor-context {
    margin: 0 0 0.7rem;
    padding: 0 0 0.75rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ddl-c-hairline);
    border-radius: 0;
  }
  .ddl-tor-action-page .ddl-tor-filter-fields { grid-template-columns: minmax(0, 1fr); margin-top: 0.35rem; }
  .ddl-tor-action-page .ddl-tor-filter-fields .form-control,
  .ddl-tor-action-page .ddl-tor-filter-fields .selectize-input { min-height: 44px; }
  .ddl-tor-action-page .ddl-tor-worklist-card > .ddl-tor-answer-row { grid-template-columns: minmax(0, 1fr); }
  .ddl-tor-reg-group { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
}
@media (max-width: 720px), (pointer: coarse) {
  .ddl-tor-action-page .ddl-tor-stats > .ddl-tor-stat.ddl-tor-quick { min-height: 44px; }
}
@media (max-width: 430px) {
  /* The pinned three-column grid holds the counts on one row: each one is a
     number over its words, so no count wraps into its neighbour. */
  .ddl-tor-action-page .ddl-tor-worklist-card > .ddl-tor-answer-row > .ddl-tor-stats {
    display: grid;
    gap: 0.35rem;
  }
  .ddl-tor-action-page .ddl-tor-worklist-card > .ddl-tor-answer-row > .ddl-tor-stats > .ddl-tor-stat.ddl-tor-quick {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.4rem 0.5rem 0.45rem;
    border-radius: var(--ddl-r-sm);
  }
  .ddl-tor-action-page .ddl-tor-stats > .ddl-tor-stat.ddl-tor-quick::before { display: none; }
  .ddl-tor-action-page .ddl-tor-worklist-card > .ddl-tor-answer-row > .ddl-tor-stats > .ddl-tor-stat.ddl-tor-quick span {
    font-size: 0.78rem;
    line-height: 1.2;
  }
  .ddl-tor-action-page .ddl-tor-answer .ddl-tor-headline { font-size: 1.02rem; }
  .ddl-tor-action-page .ddl-tor-card.ddl-tor-worklist-card { padding: 0.7rem 0.75rem 0.55rem 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ddl-tor-action-page .ddl-tor-stats > .ddl-tor-stat.ddl-tor-quick { transition: none; }
}

/* ---- print ----------------------------------------------------------------------------------------
   Print page: the headline, the provenance line, the whole list and the
   register; no controls. The record and the field sheet are print scopes of
   their own (the kit arms them), which override these hides for their target. */
@media print {
  .ddl-tor-action-page :is(.ddl-tor-filters, .ddl-tor-scope-slot, .ddl-tor-headline-foot,
    .ddl-tor-status, .ddl-c-trays, .ddl-tor-reference, .ddl-tor-marks, .ddl-tor-mark, .ddl-tor-undo) {
    display: none;
  }
  .ddl-tor-action-page .ddl-split { display: block; }
  .ddl-tor-action-page .ddl-split-aside { display: none; }
  .ddl-tor-action-page .ddl-tor-card.ddl-tor-worklist-card { box-shadow: none; border-left: 3pt solid var(--ddl-ink); }
  .ddl-tor-action-page .ddl-tor-stats > .ddl-tor-quick { background: none; border-color: var(--ddl-muted); }
  .ddl-tor-action-page .ddl-tor-register-fold { break-before: auto; }
  .ddl-tor-reg-group { break-inside: avoid; }

  /* The field sheet: an empty box on every open line, a struck line with its
     reason and no box for a mark, no box for a note. */
  .ddl-tor-field-sheet .ddl-tor-sheet-table td { height: auto; min-height: 9mm; padding: 2mm; }
  .ddl-tor-field-sheet .ddl-tor-sheet-row.is-first td { border-top: 1pt solid var(--ddl-ink); }
  .ddl-tor-field-sheet .ddl-tor-sheet-row:first-child td { border-top: 0; }
  .ddl-tor-field-sheet .ddl-tor-sheet-alias {
    width: 17mm;
    font: 700 9pt/1.3 var(--ddl-mono);
    white-space: nowrap;
  }
  /* The box sits in the line's own flow, ahead of its tag, so no print
     stylesheet's cell padding can slide the text under it. */
  .ddl-tor-field-sheet .ddl-tor-sheet-row.is-open .ddl-tor-sheet-tag::before {
    content: "";
    display: inline-block;
    width: 3.6mm;
    height: 3.6mm;
    margin-right: 2mm;
    vertical-align: -0.9mm;
    border: 0.9pt solid var(--ddl-ink);
    border-radius: 0.4mm;
  }
  .ddl-tor-field-sheet .ddl-tor-sheet-tag {
    display: block;
    margin: 0 0 0.6mm;
    font: 700 7.5pt/1.2 var(--ddl-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .ddl-tor-field-sheet .ddl-tor-sheet-row.is-marked s { color: var(--ddl-muted); }
  .ddl-tor-field-sheet .ddl-tor-sheet-status {
    display: block;
    margin-top: 0.6mm;
    font: 600 8pt/1.3 var(--ddl-k-sans, system-ui, sans-serif);
  }
  .ddl-tor-field-sheet .ddl-tor-sheet-row.is-info .ddl-tor-sheet-item { color: var(--ddl-muted); }
}
/* ==== [/T1] ==== */

/* ==== [T2A] ==== */
/* The Tortoise Animals route (tor_dossier_revamp.R): the roster beside the
   record pane, the record's four-row Summary grid, the encounter ledger and
   the attachment register. The record lays itself out by the width of the
   pane it sits in (a container query), so one grid serves the wide pane on a
   desktop, the full-width pane below 1100px and the swapped-in pane on a
   phone. */

/* ---- the route head and the roster controls ---- */
.ddl-tor-dos-title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ddl-tor-dos-title h1 { margin: 0; }
.ddl-tor-animals-page .ddl-tor-dos-head .ddl-c-lede { margin: 0.25rem 0 0; max-width: 72ch; }
.ddl-tor-dos-controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start;
  gap: 0.4rem 1.25rem; margin: 0.9rem 0 0.6rem;
}
.ddl-tor-dos-controls .ddl-c-pill-group { margin: 0; }
.ddl-tor-dos-controls .ddl-c-status { margin: 0 0 0.35rem; }
.ddl-tor-dos-roster .ddl-c-two-line-top { white-space: nowrap; }
.ddl-tor-dos-untracked { color: var(--ddl-c-muted); font-size: 0.8rem; white-space: nowrap; }
.ddl-tor-dos-sexsize { display: grid; line-height: 1.3; }
.ddl-tor-dos-sexsize-sub { color: var(--ddl-c-muted); font-size: 0.8rem; }
.ddl-tor-dos-alias { font: 600 0.86rem/1.2 var(--ddl-mono); color: var(--ddl-c-muted); white-space: nowrap; }

/* The record is the point of this route, so from 1340px the pane widens past
   the 400px a queue's pane takes, while the list keeps the room its six
   columns need (measured: the roster's scroll box never scrolls at 1100,
   1280 or 1440). Below 1340 the kit's 400px aside holds. */
@media (min-width: 1340px) {
  .ddl-tor-animals-page .ddl-split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); }
}
.ddl-tor-dos-roster table.dataTable > thead > tr > th,
.ddl-tor-dos-roster table.dataTable > tbody > tr > td { padding-left: 5px; padding-right: 5px; }
/* The Flags cell keeps a chip and its +N counter on one line, so every row is
   one height; the chips' own padding is trimmed to pay for it. Measured: the
   roster's scroll box does not scroll at 1100, 1280 or 1440, on any page of
   the tracked or all scope. */
.ddl-tor-dos-roster .ddl-c-chip-set { flex-wrap: nowrap; }
.ddl-tor-dos-roster .ddl-c-chip { padding-left: 0.4rem; padding-right: 0.4rem; }
.ddl-tor-animals-page #tor-dossier-pane:focus { outline: none; }
/* The pane takes focus only by script (tabindex -1), so it draws no box. */

/* ---- the pane head ---- */
.ddl-tor-dos .ddl-c-pane-head { margin-bottom: 0.7rem; }
.ddl-tor-dos-print { display: none; }
.ddl-tor-dos-return[hidden] { display: none; }
.ddl-tor-dos .ddl-c-segmented { margin: 0 0 0.8rem; }
.ddl-tor-dos .ddl-c-segmented > .control-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- the Summary grid ---- */
.ddl-tor-dos-summary { container-type: inline-size; }
.ddl-tor-dos-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.65rem; }
.ddl-tor-dos-card {
  min-width: 0; margin: 0; padding: 0.6rem 0.75rem;
  background: var(--ddl-c-card); border: 1px solid var(--ddl-c-hairline); border-radius: 10px;
}
.ddl-tor-dos-kicker, .ddl-tor-dos-card-title {
  margin: 0 0 0.4rem; color: var(--ddl-c-muted);
  font: 700 0.68rem/1.3 var(--ddl-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.ddl-tor-dos-sub { margin: 0 0 0.35rem; color: var(--ddl-c-ink); font-size: 0.85rem; font-weight: 600; }
.ddl-tor-dos-none { margin: 0 0 0.4rem; color: var(--ddl-c-muted); font-size: 0.88rem; }
.ddl-tor-dos-note { margin: 0.4rem 0 0; color: var(--ddl-c-muted); font-size: 0.85rem; line-height: 1.4; }
.ddl-tor-dos-link {
  display: inline-flex; align-items: center; gap: 0.3em; min-height: 44px; margin-top: 0.15rem;
  color: var(--ddl-c-accent-ink); font-size: 0.85rem; font-weight: 650; text-decoration: none;
}
.ddl-tor-dos-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Row 1: identity and the shell mark. */
.ddl-tor-dos-identity-name { margin: 0; color: var(--ddl-c-ink); font: 400 1.35rem/1.2 var(--ddl-display); }
.ddl-tor-dos-identity-sub { margin: 0.2rem 0 0.55rem; color: var(--ddl-c-muted); font-size: 0.88rem; }
.ddl-tor-dos-identity-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.ddl-tor-dos-tx {
  margin: 0 0 0.5rem; padding-left: 0.6rem; border-left: 3px solid var(--ddl-c-hairline);
  color: var(--ddl-c-ink); font-size: 0.88rem; line-height: 1.4;
}
.ddl-tor-dos-tx.is-lost { border-left-color: var(--ddl-c-alert); }
.ddl-tor-dos-distinct { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ddl-tor-dos-shell { position: relative; display: flex; flex-direction: column; }
.ddl-tor-dos-shell-fold { display: flex; flex-direction: column; flex: 1 1 auto; }
.ddl-tor-dos-shell-summary {
  display: flex; align-items: center; margin: 0 0 0.4rem; list-style: none; cursor: default;
  color: var(--ddl-c-muted); font: 700 0.68rem/1.3 var(--ddl-mono); letter-spacing: 0.1em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden;
}
.ddl-tor-dos-shell-summary::-webkit-details-marker { display: none; }
.ddl-tor-dos-shell-caption { overflow: hidden; text-overflow: ellipsis; }
.ddl-tor-dos-shell-show { display: none; }
/* The shell-mark fold only folds on a phone; wider, its summary is a plain
   heading, so it draws no chevron. */
@media (min-width: 721px) {
  .ddl-tor-page .ddl-tor-dos-shell-fold > .ddl-tor-dos-shell-summary { padding-right: 0; }
  .ddl-tor-page .ddl-tor-dos-shell-fold > .ddl-tor-dos-shell-summary::after { content: none; }
}
/* The stepper keeps Previous and Next at the ends at every width; its label
   wraps inside its own cell. */
.ddl-tor-dos .ddl-c-stepper { flex-wrap: nowrap; }
.ddl-tor-dos .ddl-c-stepper-label { white-space: normal; min-width: 0; }
.ddl-tor-dos-shell .ddl-tor-scute-diagram {
  /* The demo mark gets a band of its own above the drawing: nothing overlaps. */
  width: 100%; max-width: 220px; margin: 0 auto; padding: 1.7rem 0.35rem 0.35rem;
  border: 1px solid var(--ddl-c-hairline); border-radius: 10px;
}
.ddl-tor-dos-shell .ddl-tor-scute-caption { display: none; }
.ddl-tor-scute-diagram { position: relative; }
.ddl-tor-scute-badge { position: absolute; top: 6px; right: 6px; line-height: 1; }
.ddl-tor-scute-caption { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Row 2: the mini-map and the timeline. */
.ddl-tor-dos-map .ddl-c-mini-map { margin: 0; }
/* The attribution stays whole but small, so a narrow map keeps its ground. */
.ddl-tor-dos-map .leaflet-container .leaflet-control-attribution { font-size: 0.62rem; line-height: 1.3; }
.ddl-tor-dos-map .ddl-c-rest { margin: 0; }
.ddl-tor-dos-note.is-tight { margin-top: 0; }
.ddl-tor-dos-map .ddl-c-mini-map-caption .ddl-c-mini-map-link { min-height: 36px; display: inline-flex; align-items: center; }
.ddl-tor-dos-tl { position: relative; padding-bottom: 1.2rem; }
.ddl-tor-dos-tl-svg { display: block; width: 100%; overflow: visible; }
.ddl-tor-dos-tl-base { stroke: var(--ddl-c-hairline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ddl-tor-dos-tl-enc { fill: var(--ddl-ink-2); }
.ddl-tor-dos-tl-exam { fill: var(--ddl-c-accent); }
.ddl-tor-dos-tl-tx { fill: color-mix(in srgb, var(--ddl-c-info) 45%, transparent); }
.ddl-tor-dos-tl-tx.is-open { fill: var(--ddl-c-info); }
.ddl-tor-dos-tl-gap { fill: color-mix(in srgb, var(--ddl-c-alert) 9%, transparent); }
.ddl-tor-dos-tl-years { position: absolute; left: 0; right: 0; bottom: 0; height: 1.1rem; }
.ddl-tor-dos-tl-year {
  position: absolute; bottom: 0; transform: translateX(-50%); padding: 0 2px;
  color: var(--ddl-c-muted); font: 600 0.68rem/1 var(--ddl-mono); font-variant-numeric: tabular-nums;
}
.ddl-tor-dos-tl-year.is-start { transform: none; padding-left: 0; }
.ddl-tor-dos-tl-year::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 4px;
  background: var(--ddl-c-hairline);
}
.ddl-tor-dos-tl-key { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin: 0.45rem 0 0; padding: 0; list-style: none; }
.ddl-tor-dos-tl-key li { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ddl-c-ink); font-size: 0.85rem; }
.ddl-tor-dos-key { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; }
.ddl-tor-dos-key.is-enc { width: 4px; height: 12px; background: var(--ddl-ink-2); }
.ddl-tor-dos-key.is-exam { background: var(--ddl-c-accent); }
.ddl-tor-dos-key.is-tx { width: 16px; height: 7px; background: var(--ddl-c-info); }
.ddl-tor-dos-key.is-gap {
  width: 16px; background: color-mix(in srgb, var(--ddl-c-alert) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ddl-c-alert) 40%, transparent);
}

/* Row 3: six facts as one strip. */
.ddl-tor-dos-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; margin: 0; }
.ddl-tor-dos-fact { min-width: 0; }
.ddl-tor-dos-fact dt {
  margin: 0; color: var(--ddl-c-muted); font: 700 0.68rem/1.3 var(--ddl-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.ddl-tor-dos-fact dd {
  margin: 0.15rem 0 0; color: var(--ddl-c-ink); font-size: 0.95rem; font-weight: 650;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Row 4: field needs, record problems, the latest checklist. */
.ddl-tor-dos-need-list, .ddl-tor-dos-check-list { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.ddl-tor-dos-need { display: grid; gap: 0.2rem; justify-items: start; font-size: 0.85rem; line-height: 1.4; }
.ddl-tor-dos-need-text::first-letter { text-transform: uppercase; }
.ddl-tor-dos-check-list li {
  padding-left: 0.6rem; border-left: 2px solid var(--ddl-c-hairline); font-size: 0.85rem; line-height: 1.4;
}
.ddl-tor-dos-held { margin: 0.45rem 0 0; color: var(--ddl-c-ink); font-size: 0.85rem; line-height: 1.4; }
.ddl-tor-dos-checkline { margin: 0 0 0.5rem; font-size: 0.88rem; line-height: 1.4; }
.ddl-tor-dos-checklist .ddl-c-fold { margin: 0; }
.ddl-tor-dos-sizes { display: grid; gap: 0.3rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.ddl-tor-dos-size { display: grid; gap: 0.05rem; font-variant-numeric: tabular-nums; }
.ddl-tor-dos-size-date { color: var(--ddl-c-muted); font-size: 0.8rem; }
.ddl-tor-dos-size-val { font-size: 0.88rem; font-weight: 600; }

/* ---- the encounter ledger ---- */
.ddl-tor-dos-countline { margin: 0 0 0.6rem; font-size: 0.9rem; line-height: 1.45; max-width: 72ch; }
.ddl-tor-dos-flagged {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.8rem;
  margin: 0 0 0.6rem; padding: 0.45rem 0.6rem 0.45rem 0.8rem;
  background: color-mix(in srgb, var(--ddl-c-attention) 12%, var(--ddl-c-card));
  border: 1px solid color-mix(in srgb, var(--ddl-c-attention) 45%, transparent); border-radius: 10px;
  font-size: 0.88rem;
}
.ddl-tor-dos-flagged .ddl-c-btn { min-height: 44px; }
.ddl-tor-dos-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The ledger's search sits on the pane's card paper, where an underline alone
   reads as bare text: it gets the same filled box the roster's search has. */
#tor-dossier-pane .ddl-tor-dt-top input[type="search"] {
  border: 1px solid var(--ddl-c-hairline); border-radius: 7px; background: var(--ddl-c-canvas);
}
.ddl-tor-dos-rowflag {
  display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.4rem; border-radius: 999px;
  background: color-mix(in srgb, var(--ddl-c-attention) 18%, var(--ddl-c-card));
  color: var(--ddl-c-ink); font-size: 0.72rem; font-weight: 650; white-space: nowrap;
}
.ddl-tor-dos-exam { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ddl-tor-dos-noexam { color: var(--ddl-c-muted); font-size: 0.8rem; }
.ddl-tor-dos-history .ddl-c-fold { margin-top: 0.7rem; }
.ddl-tor-dos-history .ddl-c-trays { margin-top: 0.6rem; }

/* ---- the attachment register ---- */
.ddl-tor-dos-attchips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.6rem; }
.ddl-tor-dos-attchip {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 0.8rem;
  color: var(--ddl-c-ink); background: var(--ddl-c-card); border: 1px solid var(--ddl-c-hairline);
  border-radius: 999px; font: 550 0.85rem/1.2 var(--ddl-k-sans); cursor: pointer;
}
.ddl-tor-dos-attchip:hover { background: var(--ddl-c-tint); }
.ddl-tor-dos-attchip[aria-pressed="true"] {
  background: var(--ddl-c-select-bg); border-color: var(--ddl-c-select-bar); font-weight: 700;
}
.ddl-tor-dos-attchip.is-zero { opacity: 0.6; }
.ddl-tor-dos-attchip:focus-visible { outline: 3px solid var(--ddl-c-focus); outline-offset: 2px; }
.ddl-tor-dos-attchip-n { font-variant-numeric: tabular-nums; }
@media (pointer: coarse), (max-width: 720px) { .ddl-tor-dos-attchip { min-height: 44px; } }
.ddl-tor-dos-attnote { margin: 0 0 0.6rem; color: var(--ddl-c-ink); font-size: 0.88rem; }
.ddl-tor-dos-attlist { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ddl-c-hairline); }
.ddl-tor-dos-att {
  display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); gap: 0.1rem 0.8rem;
  padding: 0.5rem 0.2rem; border-bottom: 1px solid var(--ddl-c-hairline); font-size: 0.85rem;
}
.ddl-tor-dos-att[hidden] { display: none; }
.ddl-tor-dos-att-kind { font-weight: 650; }
.ddl-tor-dos-att-file { font-family: var(--ddl-mono); font-size: 0.8rem; overflow-wrap: anywhere; }
.ddl-tor-dos-att-meta { grid-column: 2; color: var(--ddl-c-muted); font-size: 0.8rem; }
.ddl-tor-dos-attempty[hidden] { display: none; }

/* 480px and up (the pane beside the roster on a desktop): identity and shell
   mark; the map and the timeline; the facts in three columns; field needs
   beside record problems; the checklist and its recorded sizes across. 700px
   and up (the full-width pane below 1100px): the facts in one strip and the
   three cards in one row. */
@container (min-width: 480px) {
  .ddl-tor-dos-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ddl-tor-dos-identity { grid-column: span 8; }
  .ddl-tor-dos-shell { grid-column: span 4; }
  .ddl-tor-dos-map { grid-column: span 5; }
  .ddl-tor-dos-timeline { grid-column: span 7; }
  .ddl-tor-dos-factcard { grid-column: 1 / -1; }
  /* Row 4: field needs down the left, record problems over the checklist on
     the right, so the three cards take two card heights, not three. */
  .ddl-tor-dos-needs { grid-column: 1 / span 6; grid-row: span 2; }
  .ddl-tor-dos-problems, .ddl-tor-dos-checklist { grid-column: 7 / span 6; }
  /* A short Field needs card keeps one row; the checklist runs under both. */
  .ddl-tor-dos-needs.is-short { grid-row: auto; }
  .ddl-tor-dos-grid:has(.ddl-tor-dos-needs.is-short) .ddl-tor-dos-checklist { grid-column: 1 / -1; }
  .ddl-tor-page .ddl-tor-dos-shell-fold > .ddl-tor-dos-shell-summary { padding-right: 0; }
  .ddl-tor-page .ddl-tor-dos-shell-fold > .ddl-tor-dos-shell-summary::after { content: none; }
  .ddl-tor-dos-shell-alias { display: none; }
  .ddl-tor-dos-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ddl-tor-dos-sizes { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.5rem 0.9rem; }
}
@container (min-width: 700px) {
  .ddl-tor-dos-map { grid-column: span 4; }
  .ddl-tor-dos-timeline { grid-column: span 8; }
  .ddl-tor-dos-facts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ddl-tor-dos-needs, .ddl-tor-dos-problems, .ddl-tor-dos-checklist { grid-column: span 4; grid-row: auto; }
  .ddl-tor-dos-grid:has(.ddl-tor-dos-needs.is-short) .ddl-tor-dos-checklist { grid-column: span 4; }
  .ddl-tor-dos-sizes { grid-template-columns: minmax(0, 1fr); }
}
/* ---- phones ---- */
@media (max-width: 720px) {
  .ddl-tor-dos-controls { align-items: flex-start; }
  .ddl-tor-dos .ddl-c-segmented.ddl-c-segmented.shiny-input-radiogroup > .shiny-options-group { flex-wrap: nowrap; }
  .ddl-tor-dos .ddl-c-segmented .shiny-options-group > .radio-inline,
  .ddl-tor-dos .ddl-c-segmented .shiny-options-group > .radio-inline:has(input:checked) {
    flex: 1 1 0; min-width: 0; padding: 0 0.4rem; white-space: normal;
  }
  .ddl-tor-dos .ddl-c-stepper .ddl-c-btn { padding: 0 0.5rem; }
  .ddl-tor-dos .ddl-c-segmented .ddl-c-segment-text { font-size: 0.8rem; white-space: normal; text-align: center; }
  .ddl-tor-dos-shell-summary {
    justify-content: space-between; gap: 0.6rem; min-height: 44px; margin: 0; cursor: pointer;
    white-space: normal;
  }
  .ddl-tor-dos-shell-show {
    display: inline; flex: 0 0 auto; color: var(--ddl-c-accent-ink); font: 650 0.85rem/1.2 var(--ddl-k-sans);
    letter-spacing: 0; text-transform: none;
  }
  .ddl-tor-dos-shell-fold[open] .ddl-tor-dos-shell-show { display: none; }
  .ddl-tor-dos-shell-fold[open] .ddl-tor-scute-diagram { margin-top: 0.4rem; }
  .ddl-tor-dos-att { grid-template-columns: minmax(0, 1fr); }
  .ddl-tor-dos-att-meta { grid-column: 1; }
}

/* ---- the printed record ---- */
@media print {
  .ddl-tor-dos-print { display: block; margin: 0 0 0.4rem; font: 600 9pt/1.3 var(--ddl-mono); }
  .ddl-tor-dos .ddl-c-segmented, .ddl-tor-dos .ddl-c-pane-actions, .ddl-tor-dos .ddl-c-stepper,
  .ddl-tor-dos-link, .ddl-tor-dos-attchips { display: none; }
  .ddl-tor-dos-card { break-inside: avoid; }
}
/* ==== [/T2A] ==== */

/* ==== [T2B] ==== */
/* Tortoise Health (T2B): headline card with the sign key, two yearly charts
   side by side at >= 1100px, and the selected tortoise's clinical-sign grid. */
.ddl-tor-hr-layout { display: grid; gap: 16px; min-width: 0; }
.ddl-tor-hr-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1100px) {
  .ddl-tor-hr-charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.ddl-tor-hr-card {
  min-width: 0; padding: 16px 18px; border: 1px solid var(--ddl-c-hairline);
  border-radius: 12px; background: var(--ddl-c-card);
}
.ddl-tor-hr-card-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.ddl-tor-hr-card-head h2 { margin: 0; font: 600 1.05rem/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ddl-c-ink); }
.ddl-tor-hr-headline { border-left: 3px solid var(--ddl-c-accent); }
.ddl-tor-hr-lead { margin: 0 0 12px; max-width: 72ch; color: var(--ddl-c-muted); font-size: 0.95rem; line-height: 1.5; }
.ddl-tor-hr-lead strong { display: block; margin-bottom: 2px; color: var(--ddl-c-ink); font-size: 1.15rem; line-height: 1.35; }
.ddl-tor-hr-rated { margin: 10px 0 4px; max-width: 72ch; color: var(--ddl-c-muted); font-size: 0.88rem; line-height: 1.5; }
.ddl-tor-hr-headline .ddl-c-fold-body p, .ddl-tor-hr-note { max-width: 72ch; font-size: 0.88rem; line-height: 1.5; color: var(--ddl-c-muted); }
.ddl-tor-hr-caveat { margin: 8px 0 0; max-width: 72ch; font-size: 0.85rem; line-height: 1.45; color: var(--ddl-c-muted); }
.ddl-tor-hr-caveat strong { color: var(--ddl-c-ink); }

/* The four-state key: a glyph plus words, never colour alone. */
.ddl-tor-hr-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.ddl-tor-hr-key li { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; font-size: 0.88rem; color: var(--ddl-c-ink); }
.ddl-tor-hr-key-grade { color: var(--ddl-c-muted); font-size: 0.85rem; }
.ddl-tor-hr-key-grade::before { content: "("; }
.ddl-tor-hr-key-grade::after { content: ")"; }
.ddl-tor-hr-key.is-compact { margin: 4px 0 10px; }
.ddl-tor-hr-glyph {
  display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  font: 700 0.8rem/1 system-ui, -apple-system, "Segoe UI", sans-serif; box-sizing: border-box;
}
.ddl-tor-hr-glyph.is-attention { background: var(--ddl-c-alert); color: var(--ddl-c-card); }
.ddl-tor-hr-glyph.is-noted { border: 1.5px solid var(--ddl-c-info); color: var(--ddl-c-info); background: var(--ddl-c-card); font-family: Georgia, serif; font-style: italic; }
.ddl-tor-hr-glyph.is-clear { background: var(--ddl-c-ok); color: var(--ddl-c-card); }
.ddl-tor-hr-glyph.is-unexamined { border: 1.5px dashed var(--ddl-c-checked); background: transparent; }

/* The charts. SVG text sizes are user-space units, scaled with the figure. */
.ddl-tor-hr-share .ddl-c-pill-group { margin: 0 0 6px; }
.ddl-tor-hr-figure { margin: 4px 0 0; min-width: 0; }
.ddl-tor-hr-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ddl-tor-hr-svg text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ddl-tor-hr-grid { stroke: var(--ddl-c-hairline); stroke-width: 1; }
.ddl-tor-hr-axis, .ddl-tor-hr-n { fill: var(--ddl-c-muted); font-size: 11px; }
.ddl-tor-hr-n.is-hedged { font-style: italic; }
.ddl-tor-hr-tick { fill: var(--ddl-c-ink); font-size: 12px; font-weight: 600; }
.ddl-tor-hr-value { fill: var(--ddl-c-ink); font-size: 11px; font-weight: 600; paint-order: stroke; stroke: var(--ddl-c-card); stroke-width: 3px; }
.ddl-tor-hr-ribbon { fill: color-mix(in srgb, var(--ddl-c-accent) 16%, transparent); }
/* A lone solid year's interval is a whisker, so it never reads as a column. */
.ddl-tor-hr-whisker { stroke: color-mix(in srgb, var(--ddl-c-accent) 55%, transparent); stroke-width: 2; stroke-linecap: round; }
.ddl-tor-hr-line { stroke: var(--ddl-c-accent); stroke-width: 2.5; stroke-linecap: round; }
.ddl-tor-hr-line.is-hedged, .ddl-tor-hr-arm-line.is-hedged { stroke-dasharray: 2 5; }
.ddl-tor-hr-point { fill: var(--ddl-c-accent); stroke: var(--ddl-c-card); stroke-width: 2; }
.ddl-tor-hr-point.is-hedged { fill: var(--ddl-c-card); stroke: var(--ddl-c-accent); stroke-width: 2.5; }
.ddl-tor-hr-series.is-plot { --t2b-series: var(--ddl-c-accent); }
.ddl-tor-hr-series.is-telem { --t2b-series: var(--ddl-c-info); }
.ddl-tor-hr-arm-line { stroke: var(--t2b-series); stroke-width: 2; stroke-linecap: round; }
.ddl-tor-hr-band { fill: color-mix(in srgb, var(--t2b-series) 28%, transparent); }
.ddl-tor-hr-mark { fill: var(--t2b-series); stroke: var(--ddl-c-card); stroke-width: 1.5; }
.ddl-tor-hr-mark.is-hedged { fill: var(--ddl-c-card); stroke: var(--t2b-series); stroke-width: 2; }
.ddl-tor-hr-mark.is-open { fill: var(--ddl-c-card); stroke: var(--t2b-series); stroke-width: 1.5; stroke-dasharray: 2 2; }
.ddl-tor-hr-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 4px; padding: 0; list-style: none; font-size: 0.88rem; color: var(--ddl-c-ink); }
.ddl-tor-hr-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ddl-tor-hr-legend .is-plot .ddl-tor-hr-legend-mark { color: var(--ddl-c-accent); }
.ddl-tor-hr-legend .is-telem .ddl-tor-hr-legend-mark { color: var(--ddl-c-info); }
.ddl-tor-hr-caption { margin: 6px 0 0; max-width: 72ch; color: var(--ddl-c-muted); font-size: 0.85rem; line-height: 1.45; }
.ddl-tor-hr-refusal { margin: 0 0 8px; padding: 8px 10px; border: 1px dashed var(--ddl-c-checked); border-radius: 8px; font-size: 0.88rem; color: var(--ddl-c-muted); }
.ddl-tor-hr-card .ddl-c-fold { margin-top: 10px; }
.ddl-tor-hr-card .ddl-tor-table-scroll { max-width: 100%; overflow-x: auto; }
/* The values tables fit the chart column (440px at 1100) instead of the legacy
   620px floor: sentence-case sans heads that wrap (the workspace mono caps
   are too wide for eight columns), and tighter cells. */
.ddl-tor-hr-card .ddl-tor-table { min-width: 0; }
.ddl-tor-hr-card .ddl-tor-table th, .ddl-tor-hr-card .ddl-tor-table td { padding: 0.45rem 0.42rem; }
.ddl-tor-hr-card table.ddl-tor-table thead th {
  white-space: normal; vertical-align: bottom; text-transform: none; letter-spacing: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.25;
}
/* The grid's date heads: the shared product-table head rule outranks a plain
   class selector, so this one names the table element. */
.ddl-tor-hr-page table.ddl-tor-hr-grid thead th { font-size: 0.68rem; }

/* The selected tortoise. */
.ddl-tor-hr-selected-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ddl-tor-hr-selected-head > div:first-child { margin-right: auto; }
.ddl-tor-hr-selected-head h3 { margin: 0; font-size: 1.35rem; }
.ddl-tor-hr-selected-head .ddl-tor-text-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.ddl-tor-hr-facts { margin: 6px 0 0; color: var(--ddl-c-muted); font-size: 0.92rem; }
.ddl-tor-hr-grid-wrap {
  width: fit-content; max-width: 100%; overflow-x: auto; border: 1px solid var(--ddl-c-hairline); border-radius: 10px;
  background: var(--ddl-c-card); overscroll-behavior-x: contain;
}
.ddl-tor-hr-grid-wrap:focus-visible { outline: 3px solid var(--ddl-c-focus); outline-offset: 2px; }
.ddl-tor-hr-grid-wrap.is-scrollable:not(.is-at-end) {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 40px), transparent);
}
.ddl-tor-hr-grid { width: max-content; border-collapse: separate; border-spacing: 0; }
.ddl-tor-hr-grid th, .ddl-tor-hr-grid td { padding: 4px 6px; border-bottom: 1px solid var(--ddl-c-hairline); text-align: center; }
.ddl-tor-hr-grid tbody tr:last-child th, .ddl-tor-hr-grid tbody tr:last-child td { border-bottom: 0; }
.ddl-tor-hr-grid thead th { font: 600 0.68rem/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ddl-c-muted); white-space: nowrap; vertical-align: bottom; }
.ddl-tor-hr-grid-date span { display: block; }
.ddl-tor-hr-grid-sign, .ddl-tor-hr-grid-corner {
  position: sticky; left: 0; z-index: 1; min-width: 150px; text-align: left; background: var(--ddl-c-card);
  box-shadow: 1px 0 0 var(--ddl-c-hairline);
}
.ddl-tor-hr-grid th.ddl-tor-hr-grid-sign, .ddl-tor-hr-grid th.ddl-tor-hr-grid-corner { text-align: left; }
.ddl-tor-hr-grid-sign { font-size: 0.88rem; font-weight: 600; color: var(--ddl-c-ink); white-space: nowrap; }
.ddl-tor-hr-grid td { min-width: 60px; }
.ddl-tor-hr-cell {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; vertical-align: middle;
}
button.ddl-tor-hr-cell { cursor: pointer; }
button.ddl-tor-hr-cell:hover { background: var(--ddl-c-tint); }
button.ddl-tor-hr-cell:focus-visible { outline: 3px solid var(--ddl-c-focus); outline-offset: -2px; }
button.ddl-tor-hr-cell[aria-pressed="true"] { background: var(--ddl-c-select-bg); box-shadow: inset 0 0 0 2px var(--ddl-c-select-bar); }
.ddl-tor-hr-cell .ddl-tor-hr-glyph { width: 26px; height: 26px; font-size: 0.85rem; }
.ddl-tor-hr-readout {
  min-height: 44px; margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--ddl-c-accent);
  border-radius: 0 8px 8px 0; background: var(--ddl-c-tint); color: var(--ddl-c-ink); font-size: 0.92rem;
}
.ddl-tor-hr-foot { margin: 8px 0 0; color: var(--ddl-c-muted); font-size: 0.85rem; }
.ddl-tor-hr-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ddl-tor-hr-pick label { font-weight: 600; font-size: 0.9rem; }
.ddl-tor-hr-pick-select {
  min-height: 44px; min-width: 200px; max-width: 100%; padding: 0 10px; border: 1px solid var(--ddl-c-hairline);
  border-radius: 8px; background-color: var(--ddl-c-card); color: var(--ddl-c-ink); font-size: 0.95rem;
  /* Same grammar as the scope-line select: no OS arrow, a drawn chevron. */
  -webkit-appearance: none; appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.ddl-tor-hr-pick-select:focus-visible { outline: 3px solid var(--ddl-c-focus); outline-offset: 1px; }
#tor-hr-selected { scroll-margin-top: 96px; }

@media (max-width: 720px) {
  .ddl-tor-hr-card { padding: 14px; }
  .ddl-tor-hr-lead strong { font-size: 1.05rem; }
  .ddl-tor-hr-key { gap: 6px 14px; }
  .ddl-tor-hr-key-grade { display: none; }
  .ddl-tor-hr-grid-sign, .ddl-tor-hr-grid-corner { min-width: 118px; font-size: 0.85rem; white-space: normal; }
  .ddl-tor-hr-pick-select { flex: 1 1 100%; }
  /* Arm names, ranges and exam dates hold one line; the table scrolls sideways. */
  .ddl-tor-hr-card .ddl-tor-table td:nth-child(2), .ddl-tor-hr-card .ddl-tor-table td:nth-child(6),
  .ddl-tor-hr-selected .ddl-tor-table td:first-child { white-space: nowrap; }
}
/* Chart type is user-space, so it scales with the figure. One-up between the
   phone and the two-column layout, the figure is held to the width it has at
   1440 so its type never outgrows the card heading. */
@media (min-width: 481px) and (max-width: 1099px) {
  .ddl-tor-hr-figure { max-width: 580px; margin: 4px auto 0; }
}
@media (min-width: 481px) and (max-width: 600px) {
  .ddl-tor-hr-axis, .ddl-tor-hr-n, .ddl-tor-hr-value { font-size: 12px; }
  .ddl-tor-hr-tick { font-size: 13px; }
}
/* On a phone the figures scale to about two thirds, so their type is set
   larger to land near 11px on screen; the animals line moves to the values
   table. */
@media (max-width: 480px) {
  .ddl-tor-hr-axis, .ddl-tor-hr-n, .ddl-tor-hr-value { font-size: 15px; }
  .ddl-tor-hr-tick { font-size: 16px; }
  .ddl-tor-hr-n.is-animals { display: none; }
}
@media (max-width: 360px) {
  .ddl-tor-hr-axis, .ddl-tor-hr-n, .ddl-tor-hr-value { font-size: 18px; }
  .ddl-tor-hr-tick { font-size: 19px; }
}
@media print {
  .ddl-tor-hr-grid-wrap { overflow: visible; }
  .ddl-tor-hr-readout, .ddl-tor-hr-pick { display: none; }
}

/* ==== [/T2B] ==== */

/* ==== [T3] ==== */
/* Tortoise Movement. One framed map and a rail of folds beside it at >= 1100px
   (two thirds to one third); below that the map first and the rail after it,
   two folds across on a tablet and one on a phone, where the map takes 60% of
   the screen height directly under the scope line. The playback bar sits in
   the map's own frame, under the tiles, so the attribution and the key never
   cover its readout. Tokens only: the map's marks read the same tokens
   through map_tortoise.R's mirrored palette. */
.ddl-tor-movement-page .ddl-tor-move-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin: 0 0 1rem;
}
.ddl-tor-movement-page .ddl-tor-move-card { grid-area: auto; margin: 0; padding: 0.85rem 0.85rem 0.75rem; }
.ddl-tor-movement-page .ddl-tor-move-head {
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  margin-bottom: 0.7rem;
}
.ddl-tor-movement-page .ddl-tor-move-head .ddl-tor-card-title h2 { font-size: 1.05rem; font-weight: 700; }
.ddl-tor-move-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px;
  width: 30px; height: 30px; border-radius: 8px; color: var(--ddl-tor-mauve);
  background: color-mix(in srgb, var(--ddl-tor-gold) 16%, transparent);
}
.ddl-tor-move-badge { font-size: 1.05rem; }
.ddl-tor-move-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }
.ddl-tor-movement-page .ddl-tor-move-tool { min-height: 44px; padding: 0 0.8rem; gap: 0.35rem; }
.ddl-tor-move-tool-icon { display: inline-flex; color: var(--ddl-tor-mauve-ink); }
.ddl-tor-move-tool-icon svg { width: 0.95rem; height: 0.95rem; }
.ddl-tor-movement-page .ddl-tor-move-tool[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.ddl-tor-movement-page .ddl-tor-move-tool[aria-expanded="true"] {
  color: var(--ddl-c-card);
  background: var(--ddl-c-chrome);
  border-color: var(--ddl-c-chrome);
}
.ddl-tor-movement-page .ddl-tor-move-tool[aria-expanded="true"] .ddl-tor-move-tool-icon { color: inherit; }

/* The stage: the map canvas over the playback bar, in one frame. */
.ddl-tor-movement-page .ddl-map-stage.ddl-tor-move-stage {
  display: flex;
  flex-direction: column;
  height: auto;
  overflow: hidden;
  border: 1px solid var(--ddl-c-hairline);
  border-radius: var(--ddl-r-md);
  background: var(--ddl-c-card);
}
.ddl-tor-move-canvas { position: relative; flex: 0 0 auto; height: clamp(440px, 66vh, 700px); }
.ddl-tor-move-loading {
  position: absolute;
  inset: 0;
  z-index: 450;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--ddl-c-canvas);
}
.ddl-tor-move-canvas:has(.leaflet-container) .ddl-tor-move-loading { display: none; }

/* ---- the playback bar ---------------------------------------------------------- */
.ddl-tor-pb {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "play prev scrub next speed" "read read read read read";
  align-items: center;
  gap: 0.4rem 0.5rem;
  padding: 0.55rem 0.65rem 0.6rem;
  border-top: 1px solid var(--ddl-c-hairline);
  background: var(--ddl-c-card);
}
.ddl-tor-pb-play,
.ddl-tor-pb-step,
.ddl-tor-pb-speed {
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  border-radius: var(--ddl-r-sm);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
}
.ddl-tor-pb-play {
  grid-area: play;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.95rem;
  color: var(--ddl-c-card);
  background: var(--ddl-c-chrome);
  border: 1px solid var(--ddl-c-chrome);
}
.ddl-tor-pb-play:hover { background: color-mix(in srgb, var(--ddl-c-chrome) 86%, var(--ddl-c-card)); }
.ddl-tor-pb-icon { display: inline-flex; line-height: 0; }
.ddl-tor-pb-icon svg { display: block; }
.ddl-tor-pb-step {
  padding: 0;
  color: var(--ddl-c-ink);
  background: var(--ddl-c-card);
  border: 1px solid color-mix(in srgb, var(--ddl-c-ink) 26%, transparent);
  font-size: 1.35rem;
  line-height: 1;
}
.ddl-tor-pb-step.is-prev { grid-area: prev; }
.ddl-tor-pb-step.is-next { grid-area: next; }
.ddl-tor-pb-step:hover { background: var(--ddl-c-tint); }
.ddl-tor-pb-step[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.ddl-tor-pb-scrub {
  grid-area: scrub;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  accent-color: var(--ddl-c-accent);
  cursor: pointer;
}
.ddl-tor-pb-speed {
  grid-area: speed;
  padding: 0 0.5rem;
  color: var(--ddl-c-ink);
  background: var(--ddl-c-card);
  border: 1px solid color-mix(in srgb, var(--ddl-c-ink) 26%, transparent);
  font-variant-numeric: tabular-nums;
}
.ddl-tor-pb-readout {
  grid-area: read;
  margin: 0;
  color: var(--ddl-c-ink);
  font: 500 0.85rem/1.4 var(--ddl-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.ddl-tor-pb :is(button, select, input):focus-visible {
  outline: 3px solid var(--ddl-c-focus);
  outline-offset: 2px;
}

/* The head of the playback: a filled disc in the info hue, cased in paper so
   it reads on the topo, the light basemap and the imagery alike; the ring
   pulses once as each fix arrives, and not at all under reduced motion. */
.leaflet-marker-icon.ddl-tor-pb-head { background: none; border: 0; }
.ddl-tor-pb-dot {
  position: absolute;
  inset: 2px;
  border: 3px solid var(--ddl-paper);
  border-radius: 50%;
  background: var(--ddl-sky);
  box-shadow: 0 0 0 1.5px var(--ddl-tor-night), 0 1px 5px color-mix(in srgb, var(--ddl-tor-night) 45%, transparent);
}
.ddl-tor-pb-ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--ddl-sky);
  border-radius: 50%;
  opacity: 0;
}
.leaflet-container path.ddl-tor-pb-ghost { fill: var(--ddl-sky); stroke: var(--ddl-paper); }
/* While a playback is under way the recorded marks recede, so the replayed
   fixes read first; every mark stays on the map. */
.ddl-tor-pb-engaged .leaflet-ddl-marks-pane { opacity: 0.3; }

@media (prefers-reduced-motion: no-preference) {
  html.ddl-motion-ok .ddl-tor-pb-ring.is-pulsing { animation: ddl-tor-pb-pulse 400ms ease-out both; }
  html.ddl-motion-ok .ddl-tor-move-stage .leaflet-ddl-marks-pane { transition: opacity 200ms ease; }
}
@keyframes ddl-tor-pb-pulse {
  from { opacity: 0.95; transform: scale(0.8); }
  to { opacity: 0; transform: scale(2.3); }
}

/* ---- the audit strip and the captions under the map ----------------------------- */
.ddl-tor-audit { margin: 0.8rem 0 0; }
.ddl-tor-audit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.65rem;
  margin: 0 0 0.45rem;
}
.ddl-tor-audit-head strong { font: 700 0.95rem/1.2 var(--ddl-mono); letter-spacing: 0.03em; }
.ddl-tor-audit-span { color: var(--ddl-c-muted); font-size: 0.85rem; }
.ddl-tor-audit-facts {
  display: grid;
  grid-template-columns: max-content max-content max-content minmax(0, 1fr);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ddl-c-hairline);
  border-radius: var(--ddl-r-sm);
  background: var(--ddl-c-card);
}
.ddl-tor-audit-fact { min-width: 0; padding: 0.5rem 0.75rem 0.55rem; }
.ddl-tor-audit-fact:not(:last-child) dd { white-space: nowrap; }
.ddl-tor-audit-fact + .ddl-tor-audit-fact { border-left: 1px solid var(--ddl-c-hairline); }
.ddl-tor-audit-fact dt {
  margin: 0 0 0.2rem;
  color: var(--ddl-c-muted);
  font: 600 0.68rem/1.2 var(--ddl-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ddl-tor-audit-fact dd {
  margin: 0;
  color: var(--ddl-c-ink);
  font-size: 0.9rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.ddl-tor-movement-page .ddl-tor-move-card > .ddl-map-notice { margin-top: 0.8rem; }

/* ---- the rail --------------------------------------------------------------------- */
.ddl-tor-move-rail { display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.ddl-tor-move-rail .ddl-c-fold { margin: 0; }
.ddl-tor-move-rail .ddl-c-fold-body > .shiny-input-container,
.ddl-tor-move-rail .ddl-c-fold-body .ddl-tor-year-window .shiny-input-container { width: 100%; }
.ddl-tor-move-rail .ddl-tor-year-window { margin-top: 0.35rem; }
.ddl-tor-move-rail .ddl-tor-card-caption { margin-top: 0.35rem; color: var(--ddl-c-muted); }
.ddl-tor-move-help {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding-left: 1.05rem;
  font-size: 0.88rem;
  line-height: 1.45;
}

/* The context checklist: each committed layer with a swatch drawn from the
   base map's own line style, its name and its one-line note. */
.ddl-tor-layers { width: 100%; margin: 0; }
.ddl-tor-layers > .control-label {
  margin: 0 0 0.25rem;
  color: var(--ddl-c-muted);
  font: 600 0.68rem/1.2 var(--ddl-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ddl-tor-layers .shiny-options-group { display: grid; gap: 0.1rem; }
.ddl-tor-movement-page .ddl-tor-layers .checkbox { min-height: 44px; margin: 0; }
.ddl-tor-movement-page .ddl-tor-layers .checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-height: 44px;
  margin: 0;
  padding: 0.4rem 0.35rem;
  border-radius: var(--ddl-r-sm);
  cursor: pointer;
}
.ddl-tor-movement-page .ddl-tor-layers .checkbox label:hover { background: var(--ddl-c-tint); }
.ddl-tor-layers input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.2rem 0 0;
  accent-color: var(--ddl-c-accent);
}
.ddl-tor-layers input[type="checkbox"]:focus-visible { outline: 3px solid var(--ddl-c-focus); outline-offset: 2px; }
.ddl-tor-layer { display: flex; align-items: flex-start; gap: 0.55rem; min-width: 0; }
.ddl-tor-swatch { flex: 0 0 30px; margin-top: 0.2rem; }
.ddl-tor-layer-text { display: grid; gap: 0.1rem; min-width: 0; }
.ddl-tor-layer-name { color: var(--ddl-c-ink); font-size: 0.9rem; font-weight: 600; }
.ddl-tor-layer-note { color: var(--ddl-c-muted); font-size: 0.85rem; font-weight: 400; line-height: 1.35; }

/* ---- the ledgers ------------------------------------------------------------------- */
.ddl-tor-movement-page > .ddl-c-fold { margin: 0 0 0.75rem; }
.ddl-tor-fold-count { color: var(--ddl-c-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.ddl-tor-movement-page .ddl-c-fold-body > .ddl-tor-card-caption:first-child { margin-top: 0; }
.ddl-tor-move-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.2rem 1.4rem; }
.ddl-tor-move-controls .ddl-c-segmented { margin-bottom: 0.5rem; }
.ddl-tor-move-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: 0.35rem 0 0.2rem;
  border: 1px solid var(--ddl-c-hairline);
  border-radius: var(--ddl-r-sm);
}
.ddl-tor-move-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ddl-tor-move-table :is(th, td) {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--ddl-c-hairline);
  text-align: left;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.ddl-tor-move-table thead th {
  color: var(--ddl-c-muted);
  background: var(--ddl-c-canvas);
  font: 600 0.68rem/1.25 var(--ddl-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ddl-tor-move-table tbody th { font-weight: 600; white-space: nowrap; }
.ddl-tor-move-table tbody tr:nth-child(even) :is(th, td) { background: color-mix(in srgb, var(--ddl-c-canvas) 55%, var(--ddl-c-card)); }
.ddl-tor-move-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.ddl-tor-move-table tr.is-withheld td { color: var(--ddl-c-muted); }
.ddl-tor-move-table .is-num { text-align: right; }
.ddl-tor-movement-page .ddl-c-status { margin: 0.2rem 0 0.35rem; }

/* ---- the keys inside the map ------------------------------------------------------- */
.ddl-tor-movement-page .ddl-map-key .k.is-kernel { border-color: var(--ddl-tor-mauve-ink); }
.ddl-tor-movement-page .ddl-map-key .k.is-foot { border-top-color: var(--ddl-tor-mauve-ink); }
.ddl-tor-movement-page .ddl-map-key .k.is-pts { border-color: var(--ddl-tor-mauve-ink); background: var(--ddl-paper); }
.ddl-tor-key .ddl-tor-key-row { display: flex; align-items: center; gap: 0.45rem; line-height: 1.55; }
.ddl-tor-key .ddl-tor-key-head { margin-top: 0.1rem; font-weight: 600; }
.ddl-tor-key .ddl-tor-key-years { flex-wrap: wrap; gap: 0.1rem 0.55rem; margin-bottom: 0.15rem; }
.ddl-tor-key-year { display: inline-flex; align-items: center; gap: 0.25rem; font-variant-numeric: tabular-nums; }
.ddl-tor-key-year i {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--ddl-paper);
  border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ddl-tor-night) 35%, transparent);
}
.ddl-tor-key-mark { display: inline-block; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; }
.ddl-tor-key-mark.is-latest {
  background: var(--ddl-tor-night);
  border: 2px solid var(--ddl-paper);
  box-shadow: 0 0 0 1px var(--ddl-tor-night);
}
.ddl-tor-key-mark.is-ring { border: 2.5px solid var(--ddl-tor-mauve-ink); }
.ddl-tor-key-mark.is-check { border: 2.5px dashed var(--ddl-tor-alert); }
.ddl-tor-key-mark.is-area {
  border: 1px dashed var(--ddl-tor-mauve-ink);
  background: color-mix(in srgb, var(--ddl-tor-mauve) 12%, transparent);
}

/* ---- full screen ---------------------------------------------------------------------- */
.ddl-tor-movement-page .ddl-tor-move-card.is-expanded {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0.75rem clamp(0.75rem, 2vw, 1.25rem);
  overflow: auto;
  border-radius: 0;
  background: var(--ddl-c-card);
}
.ddl-tor-move-card.is-expanded .ddl-tor-move-stage { flex: 1 1 auto; min-height: 0; }
.ddl-tor-move-card.is-expanded .ddl-tor-move-canvas { flex: 1 1 auto; height: auto; min-height: 50vh; }
.ddl-tor-move-card.is-expanded > :is(.ddl-map-notice, .demo-figure-footer) { display: none; }
html.ddl-tor-map-expanded,
html.ddl-tor-map-expanded body { overflow: hidden; }

/* ---- widths -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  .ddl-tor-movement-page .ddl-tor-move-grid { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
}
@media (min-width: 721px) and (max-width: 1099.98px) {
  .ddl-tor-movement-page .ddl-tor-move-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 0.8rem;
  }
}
@media (max-width: 720px) {
  .ddl-tor-movement-page .ddl-tor-move-card { padding: 0.6rem 0.6rem 0.65rem; }
  .ddl-tor-movement-page .ddl-tor-move-head { margin-bottom: 0.55rem; padding-bottom: 0.5rem; }
  .ddl-tor-move-tools { width: 100%; margin-left: 0; }
  .ddl-tor-movement-page .ddl-tor-move-tool { flex: 1 1 0; padding: 0 0.5rem; }
  .ddl-tor-move-tool-icon { display: none; }
  .ddl-tor-move-canvas { height: 60vh; height: 60svh; min-height: 320px; }
  .ddl-tor-pb {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "play prev scrub next" "read read read speed";
    padding: 0.5rem 0.5rem 0.55rem;
  }
  .ddl-tor-pb-play { padding: 0 0.8rem; }
  .ddl-tor-pb-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ddl-tor-pb-readout { font-size: 0.85rem; }
  .ddl-tor-audit-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ddl-tor-audit-fact:not(:last-child) dd { white-space: normal; }
  .ddl-tor-audit-fact:nth-child(n + 3) { grid-column: 1 / -1; border-top: 1px solid var(--ddl-c-hairline); border-left: 0; }
  /* The typical-move ledger as card rows: the period heads each card and every
     other cell reads as a labelled line, so nothing hides off the side. */
  .ddl-tor-move-table-wrap { border: 0; overflow: visible; }
  .ddl-tor-move-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
  .ddl-tor-move-table,
  .ddl-tor-move-table tbody,
  .ddl-tor-move-table tr { display: block; }
  .ddl-tor-move-table tr {
    margin: 0 0 0.55rem;
    overflow: hidden;
    border: 1px solid var(--ddl-c-hairline);
    border-radius: var(--ddl-r-sm);
  }
  .ddl-tor-move-table tbody :is(th, td) {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.65rem;
    text-align: right;
  }
  .ddl-tor-move-table tbody :is(th, td)::before {
    content: attr(data-label);
    color: var(--ddl-c-muted);
    font: 600 0.68rem/1.6 var(--ddl-mono);
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
  }
  .ddl-tor-move-table tbody tr:nth-child(even) :is(th, td) { background: var(--ddl-c-card); }
  .ddl-tor-move-table tbody tr :is(th, td):last-child { border-bottom: 0; }
}

@media print {
  .ddl-tor-move-tools,
  .ddl-tor-pb,
  .ddl-tor-move-rail,
  .ddl-tor-move-loading { display: none; }
  .ddl-tor-movement-page .ddl-tor-move-grid { display: block; }
  .ddl-tor-move-canvas { height: 11cm; }
  .ddl-tor-pb-engaged .leaflet-ddl-marks-pane { opacity: 1; }
}
/* ==== [/T3] ==== */

/* ==== [I1] ==== */
/* The Invasive Plants Action center: the headline and its three quick
   filters, the list's head and Filters fold, the record pane's facts, visit
   strip and notes. The kit ([F0B]) draws every control; this lays them out.
   Tokens only. */
.ddl-inv-action-page { --ddl-inv-action-gap: 0.9rem; }
.ddl-inv-action-page .ddl-inv-action-slot:empty { display: none; }
.ddl-inv-action-page .ddl-inv-action-slot.is-scope .ddl-inv-product-context { margin-bottom: var(--ddl-inv-action-gap); }
.ddl-inv-action-note { margin: 0.45rem 0 0; color: var(--ddl-c-muted); font-size: 0.85rem; line-height: 1.45; }

/* The three state marks: the shapes the row chips draw. */
.ddl-inv-action-mark {
  display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 0.45rem;
  border-radius: 50%; background: var(--ddl-c-ok); vertical-align: 0.05em;
}
.ddl-inv-action-mark.is-alert { border-radius: 0; background: var(--ddl-c-alert); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ddl-inv-action-mark.is-attention { width: 7px; height: 7px; border-radius: 1px; background: var(--ddl-c-attention); transform: rotate(45deg); }

/* ---- the headline ---------------------------------------------------------- */
/* Title row, then the three quick filters and the meaning fold on one row
   while there is room for both; the fold takes the whole width once open. */
.ddl-inv-action-page .ddl-inv-action-headline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 0.75rem;
  margin: 0 0 var(--ddl-inv-action-gap); padding: 0.8rem 1rem;
  background: var(--ddl-c-card); border: 1px solid var(--ddl-c-hairline);
  border-left: 3px solid var(--ddl-c-attention); border-radius: var(--ddl-r-md); box-shadow: none;
}
.ddl-inv-action-headline-head {
  flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
}
.ddl-inv-action-page .ddl-inv-action-headline > .ddl-inv-product-stats { flex: 0 1 auto; }
.ddl-inv-action-page .ddl-inv-action-headline > .ddl-c-fold { flex: 1 1 24rem; min-width: min(100%, 24rem); }
.ddl-inv-action-page .ddl-inv-action-headline > .ddl-c-fold[open] { flex-basis: 100%; }
.ddl-inv-action-page .ddl-inv-action-headline-head h2 {
  margin: 0; color: var(--ddl-c-ink); font-size: 1.05rem; font-weight: 600; line-height: 1.3;
}
.ddl-inv-action-page .ddl-inv-action-headline > .ddl-inv-product-stats {
  grid-template-columns: repeat(3, minmax(0, 13.5rem)); gap: 0.5rem;
}
.ddl-inv-action-page .ddl-inv-action-headline .ddl-inv-action-quick {
  display: flex; align-items: baseline; gap: 0.6rem; min-height: 44px; margin: 0;
  padding: 0.5rem 0.8rem; color: var(--ddl-c-ink); background: var(--ddl-c-card);
  border: 1px solid var(--ddl-c-hairline); border-radius: var(--ddl-r-sm);
  font: inherit; text-align: left; cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.ddl-inv-action-page .ddl-inv-action-headline .ddl-inv-action-quick:hover { background: var(--ddl-c-tint); }
.ddl-inv-action-page .ddl-inv-action-headline .ddl-inv-action-quick[aria-pressed="true"] {
  background: var(--ddl-c-select-bg); border-color: color-mix(in srgb, var(--ddl-c-accent) 50%, transparent);
  box-shadow: inset 3px 0 0 var(--ddl-c-select-bar);
}
.ddl-inv-action-page .ddl-inv-action-headline .ddl-inv-action-quick span { display: inline; margin: 0; }
.ddl-inv-action-page .ddl-inv-action-headline .ddl-inv-action-quick .ddl-inv-action-quick-n {
  color: var(--ddl-c-ink); font-size: 1.3rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.ddl-inv-action-page .ddl-inv-action-headline .ddl-inv-action-quick .ddl-inv-action-quick-label {
  display: inline-flex; align-items: baseline; color: var(--ddl-c-ink); font-size: 0.88rem; font-weight: 600; line-height: 1.25;
}
.ddl-inv-action-page .ddl-inv-action-headline .ddl-inv-action-quick .ddl-inv-action-mark { display: inline-block; margin-right: 0.4rem; }
.ddl-inv-action-page .ddl-inv-action-headline > .ddl-c-fold { margin: 0; }
.ddl-inv-action-meaning { display: grid; gap: 0.55rem; margin: 0 0 0.6rem; }
.ddl-inv-action-meaning-row { display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); gap: 0.2rem 1rem; }
.ddl-inv-action-meaning dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.1rem; font-weight: 650; font-size: 0.9rem; }
.ddl-inv-action-meaning-short { flex: 1 0 100%; margin-left: 1rem; color: var(--ddl-c-muted); font-weight: 500; font-size: 0.8rem; }
.ddl-inv-action-meaning dd { margin: 0; font-size: 0.9rem; line-height: 1.45; }

/* ---- the list: head, search, Filters fold, status --------------------------- */
.ddl-inv-action-page .ddl-inv-action-queue {
  margin: 0 0 var(--ddl-inv-action-gap); padding: 0.85rem 1rem 0.9rem;
  background: var(--ddl-c-card); border: 1px solid var(--ddl-c-hairline);
  border-radius: var(--ddl-r-md); box-shadow: none;
}
.ddl-inv-action-queue-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 0.5rem 1rem; margin: 0 0 0.6rem;
}
.ddl-inv-action-page .ddl-inv-action-queue-head h2 {
  margin: 0; color: var(--ddl-c-ink); font-size: 1.05rem; font-weight: 600; line-height: 1.3;
}
.ddl-inv-action-slot.is-search { flex: 0 1 26rem; min-width: 0; }
.ddl-inv-action-page .ddl-inv-action-search .shiny-input-container {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; max-width: 100%; margin: 0;
}
.ddl-inv-action-page .ddl-inv-action-search label {
  flex: 0 0 auto; margin: 0; color: var(--ddl-c-muted); font-size: 0.85rem; font-weight: 600;
}
.ddl-inv-action-page .ddl-inv-action-search input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 0.75rem;
  border: 1px solid color-mix(in srgb, var(--ddl-c-ink) 22%, transparent); border-radius: var(--ddl-r-sm);
  background: var(--ddl-c-card); font-size: 0.92rem;
}
.ddl-inv-action-page .ddl-inv-action-queue > .ddl-c-fold { margin: 0 0 0.35rem; }
.ddl-inv-action-summary { min-width: 0; overflow-wrap: anywhere; }
.ddl-inv-action-page .ddl-inv-action-queue .ddl-inv-product-filters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 0.35rem 1.5rem; margin: 0; padding: 0; border: 0; background: none;
}
.ddl-inv-action-page .ddl-inv-product-filters > .shiny-input-container { width: auto; max-width: 100%; margin: 0; }
.ddl-inv-action-page .ddl-inv-product-filters .control-label {
  color: var(--ddl-c-muted); font: 700 0.68rem/1.4 var(--ddl-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.ddl-inv-action-page .ddl-c-fold-body > .ddl-inv-action-slot { margin: 0 0 0.75rem; }
.ddl-inv-action-page .ddl-c-fold-body > .ddl-inv-action-slot .ddl-inv-product-context { margin: 0; }
.ddl-inv-action-clear-row { display: flex; justify-content: flex-end; margin-top: 0.35rem; }
.ddl-inv-action-clear-row:has(> [hidden]:only-child) { display: none; }
.ddl-inv-action-status-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 0.75rem;
  min-height: 36px; margin: 0.15rem 0 0.25rem;
}
.ddl-inv-action-status-row > .ddl-c-status { margin: 0; }
.ddl-inv-action-page .ddl-inv-action-clear { min-height: 36px; padding: 0 0.75rem; font-size: 0.82rem; }
.ddl-inv-action-page .ddl-inv-action-clear[hidden] { display: none; }
.ddl-inv-action-table { min-width: 0; }
.ddl-inv-action-page .ddl-inv-action-table td.dataTables_empty { padding: 1.25rem 1rem; white-space: normal; text-align: left; }
.ddl-inv-action-empty { display: block; max-width: 60ch; margin: 0 0 0.6rem; color: var(--ddl-c-ink); font-size: 0.9rem; line-height: 1.45; }
.ddl-inv-action-page .ddl-c-trays { margin-top: 0.6rem; }
.ddl-inv-action-page .ddl-inv-action-why-zero { flex: 1 0 100%; margin: 0; }
.ddl-inv-action-page .ddl-inv-action-queue > .ddl-c-fold:last-child { margin: 0.75rem 0 0; }
/* One Clear per view: while the Filters fold is open its own Clear sits in
   reach, so the status line's copy steps aside. */
.ddl-inv-action-queue:has(#inv-action-filters[open]) .ddl-inv-action-status-row .ddl-inv-action-clear { display: none; }
/* The narrowest split (1100 to 1279): the six columns sit beside the pane
   without a sideways scroller once the cell gutters give a little. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .ddl-inv-action-page .ddl-inv-action-table table.dataTable :is(thead th, tbody td) { padding-left: 0.4rem; padding-right: 0.4rem; }
}

/* ---- the fold "How a patch gets on this list" ------------------------------- */
.ddl-inv-action-why-rows { display: grid; gap: 0.6rem; margin: 0.4rem 0 0.9rem; padding: 0; list-style: none; }
.ddl-inv-action-why-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem;
  padding: 0.6rem 0.75rem; border: 1px solid var(--ddl-c-hairline); border-radius: var(--ddl-r-sm);
}
.ddl-inv-action-why-text { flex: 1 1 22rem; min-width: 0; }
.ddl-inv-action-why-text p { margin: 0; font-size: 0.9rem; line-height: 1.45; }
.ddl-inv-action-why-text .ddl-inv-action-why-label { display: flex; align-items: baseline; font-weight: 650; }
.ddl-inv-action-why-sub {
  margin: 0.2rem 0 0.4rem; color: var(--ddl-c-muted); font: 700 0.68rem/1.4 var(--ddl-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---- the record pane ---------------------------------------------------------- */
.ddl-inv-action-record { min-width: 0; }
.ddl-inv-action-pane-note {
  margin: 0 0 0.75rem; padding: 0.5rem 0.7rem; border-left: 3px solid var(--ddl-c-attention);
  border-radius: var(--ddl-r-xs); background: color-mix(in srgb, var(--ddl-c-attention) 10%, var(--ddl-c-card));
  font-size: 0.85rem; line-height: 1.45;
}
.ddl-inv-action-why { margin: 0 0 0.8rem; }
.ddl-inv-action-why > .ddl-c-chip { margin: 0 0 0.35rem; }
.ddl-inv-action-why-line { margin: 0 0 0.25rem; font-size: 0.88rem; line-height: 1.45; }
.ddl-inv-action-facts { margin: 0 0 0.8rem; }
.ddl-inv-action-facts .ddl-c-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.9rem; }
.ddl-inv-action-facts .ddl-c-kv-row { display: block; padding: 0.4rem 0; }
.ddl-inv-action-facts .ddl-c-kv-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.ddl-inv-action-facts .ddl-c-kv dt { padding: 0; }
.ddl-inv-action-facts .ddl-c-kv dd { margin-top: 0.1rem; }
.ddl-inv-action-map { margin: 0 0 0.8rem; }
.ddl-inv-action-map .ddl-c-mini-map { margin: 0; }

/* The visit strip: one line from the first dated record to the end of the records. */
.ddl-inv-action-strip { margin: 0; }
.ddl-inv-action-strip-title {
  margin: 0 0 1.35rem; color: var(--ddl-c-muted); font: 700 0.68rem/1.4 var(--ddl-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.ddl-inv-action-strip-track { position: relative; height: 26px; margin: 0 7px; }
.ddl-inv-action-strip-track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0;
  border-top: 2px solid color-mix(in srgb, var(--ddl-c-ink) 22%, transparent);
}
.ddl-inv-action-strip-tick {
  position: absolute; top: 6px; bottom: 6px; width: 1px;
  background: color-mix(in srgb, var(--ddl-c-ink) 22%, transparent);
}
.ddl-inv-action-strip-tick > span {
  position: absolute; bottom: calc(100% + 8px); left: 0; transform: translateX(-50%);
  color: var(--ddl-c-muted); font: 600 0.68rem/1 var(--ddl-mono); white-space: nowrap;
}
.ddl-inv-action-strip-over {
  position: absolute; top: 7px; height: 12px; border-radius: 2px;
  background: color-mix(in srgb, var(--ddl-c-alert) 18%, transparent);
}
.ddl-inv-action-strip-due { position: absolute; top: 1px; bottom: 1px; width: 0; border-left: 2px dashed var(--ddl-c-alert); }
.ddl-inv-action-strip-mark {
  position: absolute; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--ddl-ink-2); border: 2px solid var(--ddl-c-card);
  box-shadow: 0 0 0 1px var(--ddl-ink-2);
}
.ddl-inv-action-strip-mark.is-cleared { background: var(--ddl-c-accent); box-shadow: 0 0 0 1px var(--ddl-c-accent); }
.ddl-inv-action-strip-mark.is-mapped {
  width: 10px; height: 10px; border-radius: 1px; background: var(--ddl-c-card);
  border: 2px solid var(--ddl-ink-2); box-shadow: none; transform: translate(-50%, -50%) rotate(45deg);
}
.ddl-inv-action-strip-ends {
  display: flex; justify-content: space-between; gap: 0.75rem; margin: 0.3rem 0 0.35rem;
  color: var(--ddl-c-muted); font: 500 0.72rem/1.3 var(--ddl-mono); white-space: nowrap;
}
.ddl-inv-action-strip-key {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.45rem; margin: 0 0 0.5rem;
  color: var(--ddl-c-muted); font-size: 0.8rem;
}
.ddl-inv-action-strip-key-item { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: 0.5rem; white-space: nowrap; }
.ddl-inv-action-strip-glyph {
  display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--ddl-ink-2);
}
.ddl-inv-action-strip-glyph.is-cleared { background: var(--ddl-c-accent); }
.ddl-inv-action-strip-glyph.is-mapped {
  width: 8px; height: 8px; border-radius: 1px; background: transparent;
  border: 2px solid var(--ddl-ink-2); transform: rotate(45deg);
}
.ddl-inv-action-strip-glyph.is-over {
  width: 14px; height: 9px; border-radius: 2px; background: color-mix(in srgb, var(--ddl-c-alert) 18%, transparent);
  border-left: 2px dashed var(--ddl-c-alert);
}
.ddl-inv-action-visits { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.ddl-inv-action-visits li {
  display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 0.6rem;
  padding: 0.3rem 0; border-top: 1px dotted color-mix(in srgb, var(--ddl-c-ink) 18%, transparent);
  font-size: 0.86rem; line-height: 1.4;
}
.ddl-inv-action-visit-date { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.ddl-inv-action-visits li.is-mapped { color: var(--ddl-c-muted); }

/* ---- phones ---------------------------------------------------------------------- */
@media (max-width: 720px) {
  .ddl-inv-action-page { --ddl-inv-action-gap: 0.7rem; }
  /* The scope line and the search wait inside the Filters fold (app.js [I1]
     moves them there); their desktop slots never show on a phone. */
  .ddl-inv-action-page [data-inv-action-slot="scope-desk"],
  .ddl-inv-action-page [data-inv-action-slot="search-desk"] { display: none; }
  .ddl-inv-action-page .ddl-inv-action-headline { gap: 0.55rem; padding: 0.7rem 0.75rem 0.6rem; }
  .ddl-inv-action-page .ddl-inv-action-headline-head h2 { font-size: 0.98rem; }
  .ddl-inv-action-page .ddl-inv-action-headline > .ddl-inv-product-stats {
    flex: 1 1 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem;
  }
  .ddl-inv-action-page .ddl-inv-action-headline > .ddl-c-fold { flex-basis: 100%; min-width: 0; }
  .ddl-inv-action-page .ddl-inv-action-headline .ddl-inv-action-quick {
    flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.4rem 0.5rem;
  }
  .ddl-inv-action-page .ddl-inv-action-headline .ddl-inv-action-quick .ddl-inv-action-quick-n { font-size: 1.1rem; }
  .ddl-inv-action-page .ddl-inv-action-headline .ddl-inv-action-quick .ddl-inv-action-quick-label { font-size: 0.8rem; }
  .ddl-inv-action-meaning-row { grid-template-columns: minmax(0, 1fr); }
  .ddl-inv-action-page .ddl-inv-action-queue { padding: 0.7rem 0.75rem 0.75rem; }
  .ddl-inv-action-queue-head { margin-bottom: 0.45rem; }
  .ddl-inv-action-page .ddl-inv-action-search .shiny-input-container { flex-direction: column; align-items: stretch; gap: 0.25rem; }
  /* The fold summary carries the count on a phone. */
  .ddl-inv-action-page .ddl-inv-action-status-row { display: none; }
  .ddl-inv-action-page .ddl-c-fold-body > .ddl-inv-action-slot .ddl-inv-product-context { padding: 0; border: 0; background: none; }
}
@media (max-width: 380px) {
  .ddl-inv-action-page .ddl-inv-action-headline .ddl-inv-action-quick .ddl-inv-action-quick-label { font-size: 0.76rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ddl-inv-action-page .ddl-inv-action-headline .ddl-inv-action-quick { transition: none; }
}
/* An empty list has no pages to step through. */
.ddl-inv-action-page .dataTables_wrapper:has(td.dataTables_empty) .dataTables_paginate { display: none; }
/* Every Clear filters control (status row, Filters fold, empty table) meets the
   44px touch floor on a phone or a touch screen. */
@media (max-width: 720px), (pointer: coarse) {
  .ddl-inv-action-page .ddl-inv-action-clear { min-height: 44px; }
}
@media print {
  .ddl-inv-action-page .ddl-inv-action-headline .ddl-inv-product-stats,
  .ddl-inv-action-clear, .ddl-inv-action-slot.is-search { display: none; }
  /* The printed candidate list keeps each patch alias and field area on one
     line; the blank Field notes column gives up the width. */
  [data-ddl-print="filtered-list"] .ddl-c-sheet-table :is(th, td):is(:nth-child(1), :nth-child(7)) { white-space: nowrap; }
  [data-ddl-print="filtered-list"] .ddl-c-sheet-table .ddl-c-sheet-notes { width: 18%; }
}
/* ==== [/I1] ==== */

/* ==== [I2A] ==== */
/* The Invasive Plants Patches register and its record pane: the register's
   head, search and Filters fold, the state marks, the record's facts, the ring
   map, the visit strip, the neighbours, the ledger and the attachment
   register. The kit ([F0B]) draws every control; this lays them out. Tokens
   only. */
.ddl-inv-patches-page { --ddl-inv-reg-gap: 0.9rem; }
/* Scientific names set in italic, in the list, the overview and the pane. */
.ddl-inv-reg-table td:nth-child(2) .ddl-c-two-line-sub,
.ddl-inv-reg-overview td:nth-child(2) { font-style: italic; }
.ddl-inv-patches-page .ddl-inv-reg-slot:empty { display: none; }
.ddl-inv-patches-page .ddl-inv-reg-slot.is-scope .ddl-inv-product-context { margin-bottom: var(--ddl-inv-reg-gap); }
.ddl-inv-reg-note { margin: 0.4rem 0 0; color: var(--ddl-c-muted); font-size: 0.85rem; line-height: 1.45; }
.ddl-inv-reg-sub {
  margin: 0 0 0.45rem; color: var(--ddl-c-muted); font: 700 0.68rem/1.4 var(--ddl-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* The five state marks: the Action center's shapes, one per tone. */
.ddl-inv-reg-mark {
  display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 0.45rem;
  border-radius: 50%; background: var(--ddl-c-ok); vertical-align: 0.05em;
}
.ddl-inv-reg-mark.is-alert { border-radius: 0; background: var(--ddl-c-alert); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ddl-inv-reg-mark.is-attention { width: 7px; height: 7px; border-radius: 1px; background: var(--ddl-c-attention); transform: rotate(45deg); }
.ddl-inv-reg-state { display: inline-flex; align-items: baseline; white-space: nowrap; font-size: 0.85rem; }

/* ---- the register: head, search, Filters fold, status ------------------------ */
.ddl-inv-patches-page .ddl-inv-reg {
  margin: 0 0 var(--ddl-inv-reg-gap); padding: 0.85rem 1rem 0.9rem;
  background: var(--ddl-c-card); border: 1px solid var(--ddl-c-hairline);
  border-radius: var(--ddl-r-md); box-shadow: none;
}
.ddl-inv-reg-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 0.5rem 1rem; margin: 0 0 0.6rem;
}
.ddl-inv-patches-page .ddl-inv-reg-head h2 {
  margin: 0; color: var(--ddl-c-ink); font-size: 1.05rem; font-weight: 600; line-height: 1.3;
}
.ddl-inv-reg-search { flex: 0 1 26rem; min-width: 0; }
.ddl-inv-patches-page .ddl-inv-reg-search .shiny-input-container {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; max-width: 100%; margin: 0;
}
.ddl-inv-patches-page .ddl-inv-reg-search label {
  flex: 0 0 auto; margin: 0; color: var(--ddl-c-muted); font-size: 0.85rem; font-weight: 600;
}
.ddl-inv-patches-page .ddl-inv-reg-search input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 0.75rem;
  border: 1px solid color-mix(in srgb, var(--ddl-c-ink) 22%, transparent); border-radius: var(--ddl-r-sm);
  background: var(--ddl-c-card); font-size: 0.92rem;
}
.ddl-inv-patches-page .ddl-inv-reg > .ddl-c-fold { margin: 0 0 0.35rem; }
.ddl-inv-reg-summary { min-width: 0; overflow-wrap: anywhere; }
/* The count rides on the fold summary only on a phone; a desktop reads it on
   the status line just below. */
.ddl-inv-reg-summary-tail { display: none; }
.ddl-inv-patches-page .ddl-inv-reg .ddl-inv-reg-filters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 0.35rem 1.5rem; margin: 0; padding: 0; border: 0; background: none;
}
.ddl-inv-patches-page .ddl-inv-reg-filters > .shiny-input-container { width: auto; max-width: 100%; margin: 0; }
.ddl-inv-patches-page .ddl-inv-reg-filters .control-label {
  color: var(--ddl-c-muted); font: 700 0.68rem/1.4 var(--ddl-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.ddl-inv-patches-page .ddl-c-fold-body > .ddl-inv-reg-slot { margin: 0 0 0.75rem; }
.ddl-inv-patches-page .ddl-c-fold-body > .ddl-inv-reg-slot .ddl-inv-product-context { margin: 0; }
.ddl-inv-reg-clear-row { display: flex; justify-content: flex-end; margin-top: 0.35rem; }
.ddl-inv-reg-clear-row:has(> [hidden]:only-child) { display: none; }
.ddl-inv-reg-status-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 0.75rem;
  min-height: 36px; margin: 0.15rem 0 0.25rem;
}
.ddl-inv-reg-status-row > .ddl-c-status { margin: 0; }
.ddl-inv-patches-page .ddl-inv-reg-clear { min-height: 36px; padding: 0 0.75rem; font-size: 0.82rem; }
.ddl-inv-patches-page .ddl-inv-reg-clear[hidden] { display: none; }
.ddl-inv-reg:has(#inv-reg-filters[open]) .ddl-inv-reg-status-row .ddl-inv-reg-clear { display: none; }
.ddl-inv-reg-table { min-width: 0; }
.ddl-inv-patches-page .ddl-inv-reg-table td.dataTables_empty { padding: 1.25rem 1rem; white-space: normal; text-align: left; }
.ddl-inv-reg-empty { display: block; max-width: 60ch; margin: 0 0 0.6rem; color: var(--ddl-c-ink); font-size: 0.9rem; line-height: 1.45; }
.ddl-inv-patches-page .ddl-inv-reg .ddl-c-trays { margin-top: 0.6rem; }
.ddl-inv-patches-page .ddl-inv-reg-why-zero { flex: 1 0 100%; margin: 0; }
.ddl-inv-patches-page .ddl-inv-reg > .ddl-c-fold:last-child { margin: 0.75rem 0 0; }
.ddl-inv-patches-page .dataTables_wrapper:has(td.dataTables_empty) .dataTables_paginate { display: none; }
@media (min-width: 1100px) and (max-width: 1279px) {
  .ddl-inv-patches-page .ddl-inv-reg-table table.dataTable :is(thead th, tbody td) { padding-left: 0.4rem; padding-right: 0.4rem; }
}

/* ---- the Plant overview ---------------------------------------------------------- */
.ddl-inv-patches-page .ddl-inv-reg-overview { margin: 0 0 var(--ddl-inv-reg-gap); }
.ddl-inv-reg-overview-note {
  display: flex; align-items: center; gap: 0.4rem; margin: 0.6rem 0.85rem 0.5rem;
  color: var(--ddl-c-muted); font-size: 0.88rem;
}
.ddl-inv-reg-overview td:nth-child(2) { font-style: italic; }

/* ---- the record pane ---------------------------------------------------------- */
.ddl-inv-reg-record { min-width: 0; }
.ddl-inv-reg-pane-note {
  margin: 0 0 0.75rem; padding: 0.5rem 0.7rem; border-left: 3px solid var(--ddl-c-attention);
  border-radius: var(--ddl-r-xs); background: color-mix(in srgb, var(--ddl-c-attention) 10%, var(--ddl-c-card));
  font-size: 0.85rem; line-height: 1.45;
}
.ddl-inv-reg-day { display: none; }
/* "Link copied" takes its own line under the actions, so the row never re-flows. */
.ddl-inv-reg-record .ddl-c-pane-actions .ddl-c-copy-wrap { display: contents; }
.ddl-inv-reg-record .ddl-c-pane-actions :is(.ddl-c-copy-status, .ddl-c-copy-fallback) { flex: 1 0 100%; order: 99; }
html.ddl-day-ready .ddl-inv-reg-day { display: inline-flex; }
.ddl-inv-reg-why { margin: 0 0 0.8rem; }
.ddl-inv-reg-why > .ddl-c-chip { margin: 0 0 0.35rem; }
.ddl-inv-reg-why-line { margin: 0 0 0.25rem; font-size: 0.88rem; line-height: 1.45; }
.ddl-inv-reg-facts { margin: 0 0 0.8rem; }
.ddl-inv-reg-facts .ddl-c-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.9rem; }
.ddl-inv-reg-facts .ddl-c-kv-row { display: block; padding: 0.4rem 0; }
.ddl-inv-reg-facts .ddl-c-kv dt { padding: 0; }
.ddl-inv-reg-facts .ddl-c-kv dd { margin-top: 0.1rem; }
.ddl-inv-reg-map { margin: 0 0 0.8rem; }
.ddl-inv-reg-map .ddl-c-mini-map { margin: 0; }
.ddl-inv-patches-page .ddl-inv-reg-record > .ddl-c-fold { margin: 0 0 0.9rem; }

/* The strip: one line from the first dated record to the end of the records. */
.ddl-inv-reg-strip { margin: 0 0 0.7rem; }
.ddl-inv-reg-strip > .ddl-inv-reg-sub { margin-bottom: 1.35rem; }
.ddl-inv-reg-strip-track { position: relative; height: 26px; margin: 0 7px; }
.ddl-inv-reg-strip-track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0;
  border-top: 2px solid color-mix(in srgb, var(--ddl-c-ink) 22%, transparent);
}
.ddl-inv-reg-strip-tick {
  position: absolute; top: 6px; bottom: 6px; width: 1px;
  background: color-mix(in srgb, var(--ddl-c-ink) 22%, transparent);
}
.ddl-inv-reg-strip-tick > span {
  position: absolute; bottom: calc(100% + 8px); left: 0; transform: translateX(-50%);
  color: var(--ddl-c-muted); font: 600 0.68rem/1 var(--ddl-mono); white-space: nowrap;
}
.ddl-inv-reg-strip-mark {
  position: absolute; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--ddl-c-card); border: 2px solid var(--ddl-ink-2);
}
.ddl-inv-reg-strip-mark.is-all { background: var(--ddl-c-accent); border-color: var(--ddl-c-accent); }
.ddl-inv-reg-strip-mark.is-most {
  background: linear-gradient(90deg, var(--ddl-c-accent) 60%, var(--ddl-c-card) 60%); border-color: var(--ddl-c-accent);
}
.ddl-inv-reg-strip-mark.is-mapped {
  width: 10px; height: 10px; border-radius: 1px; background: var(--ddl-c-card);
  transform: translate(-50%, -50%) rotate(45deg);
}
.ddl-inv-reg-strip-ends {
  display: flex; justify-content: space-between; gap: 0.75rem; margin: 0.3rem 0 0.35rem;
  color: var(--ddl-c-muted); font: 500 0.72rem/1.3 var(--ddl-mono); white-space: nowrap;
}
.ddl-inv-reg-strip-key {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.45rem; margin: 0;
  color: var(--ddl-c-muted); font-size: 0.8rem;
}
.ddl-inv-reg-strip-key-item { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: 0.45rem; white-space: nowrap; }
.ddl-inv-reg-strip-glyph {
  display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ddl-c-card); border: 2px solid var(--ddl-ink-2);
}
.ddl-inv-reg-strip-glyph.is-all { background: var(--ddl-c-accent); border-color: var(--ddl-c-accent); }
.ddl-inv-reg-strip-glyph.is-most {
  background: linear-gradient(90deg, var(--ddl-c-accent) 60%, var(--ddl-c-card) 60%); border-color: var(--ddl-c-accent);
}
.ddl-inv-reg-strip-glyph.is-mapped { width: 9px; height: 9px; border-radius: 1px; transform: rotate(45deg); }
.ddl-inv-reg-tally { margin: 0 0 0.75rem; font-size: 0.86rem; line-height: 1.45; }
.ddl-inv-reg-tally-label { font-weight: 650; }

/* Neighbours inside the ring: the alias opens that record in this pane. */
.ddl-inv-reg-near { margin: 0; }
.ddl-inv-reg-near-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ddl-inv-reg-near-list li {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.6rem; min-height: 44px;
  border-top: 1px dotted color-mix(in srgb, var(--ddl-c-ink) 18%, transparent); font-size: 0.86rem;
}
.ddl-inv-reg-near-what { color: var(--ddl-c-ink); }

/* The follow-up ledger: two lines a visit, a rule in the removal's tone. */
.ddl-inv-reg-ledger { margin: 0 0 0.9rem; }
.ddl-inv-reg-visits { display: grid; gap: 0; margin: 0 0 0.5rem; padding: 0; list-style: none; }
.ddl-inv-reg-visits li {
  padding: 0.4rem 0 0.4rem 0.6rem; border-top: 1px dotted color-mix(in srgb, var(--ddl-c-ink) 18%, transparent);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ddl-c-ink) 22%, transparent);
}
.ddl-inv-reg-visits li.is-all, .ddl-inv-reg-visits li.is-most { box-shadow: inset 2px 0 0 var(--ddl-c-accent); }
.ddl-inv-reg-visits p { margin: 0; line-height: 1.4; }
.ddl-inv-reg-visit-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.55rem; font-size: 0.86rem; }
.ddl-inv-reg-visit-date { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ddl-inv-reg-visit-id { color: var(--ddl-c-muted); font: 500 0.78rem/1.3 var(--ddl-mono); }
.ddl-inv-reg-visit-who { margin-left: auto; color: var(--ddl-c-muted); font-size: 0.8rem; }
.ddl-inv-reg-visit-what { font-size: 0.85rem; color: var(--ddl-c-ink); }

/* The attachment register: records, not pictures. */
.ddl-inv-reg-attach { margin: 0 0 0.4rem; }
.ddl-inv-reg-attach-line { margin: 0 0 0.45rem; font-size: 0.86rem; line-height: 1.45; }
.ddl-inv-reg-attach-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.4rem;
  margin: 0; padding: 0; list-style: none;
}
.ddl-inv-reg-attach-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 0.5rem; align-items: center;
  padding: 0.45rem 0.55rem; border: 1px dashed color-mix(in srgb, var(--ddl-c-ink) 28%, transparent);
  border-radius: var(--ddl-r-sm); background: var(--ddl-c-canvas);
}
.ddl-inv-reg-attach-glyph { grid-row: span 2; color: var(--ddl-c-muted); font-size: 1.1rem; }
.ddl-inv-reg-attach-kind { font-size: 0.85rem; font-weight: 650; }
.ddl-inv-reg-attach-meta { color: var(--ddl-c-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* ---- phones ---------------------------------------------------------------------- */
@media (max-width: 720px) {
  .ddl-inv-patches-page { --ddl-inv-reg-gap: 0.7rem; }
  /* The scope line waits inside the Filters fold (app.js [I2A] moves it). */
  .ddl-inv-patches-page [data-inv-reg-slot="scope-desk"] { display: none; }
  .ddl-inv-patches-page .ddl-inv-reg { padding: 0.7rem 0.75rem 0.75rem; }
  .ddl-inv-reg-head { margin-bottom: 0.45rem; }
  .ddl-inv-reg-search { flex-basis: 100%; }
  .ddl-inv-patches-page .ddl-inv-reg-search .shiny-input-container { flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .ddl-inv-patches-page .ddl-inv-reg-status-row { display: none; }
  .ddl-inv-reg-summary-tail { display: inline; }
  .ddl-inv-patches-page .ddl-c-fold-body > .ddl-inv-reg-slot .ddl-inv-product-context { padding: 0; border: 0; background: none; }
  .ddl-inv-reg-facts .ddl-c-kv { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px), (pointer: coarse) {
  .ddl-inv-patches-page .ddl-inv-reg-clear { min-height: 44px; }
}
@media print {
  .ddl-inv-reg-clear, .ddl-inv-reg-search, .ddl-inv-reg-day { display: none; }
  /* On paper the strip key and the ledger explain themselves. */
  html.ddl-print-record .ddl-inv-reg-ledger > .ddl-c-fold { display: none; }
  [data-ddl-print="filtered-list"] .ddl-c-sheet-table :is(th, td):is(:nth-child(1), :nth-child(7)) { white-space: nowrap; }
  [data-ddl-print="filtered-list"] .ddl-c-sheet-table .ddl-c-sheet-notes { width: 20%; }
}
/* ==== [/I2A] ==== */

/* ==== [I2B] ==== */
/* Invasive Plants Map: the card toolbar, the loading plate, counted discs,
   the compact key, the popup, the filter fold under the map and the phone
   order (the map first, its controls after it). Tokens only. */

.ddl-inv-map-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ddl-inv-map-tools .ddl-c-btn { min-height: 40px; }

/* The loading plate sits over the stage, and over Leaflet's own controls
   (z-index 1000), until the first tiles land. */
.ddl-inv-map-loading {
  position: absolute; inset: 0; z-index: 1100;
  display: grid; place-items: center; padding: 1rem;
  background: var(--ddl-c-canvas);
}
.ddl-inv-map-loading[hidden] { display: none; }
.ddl-inv-map-loading .ddl-c-rest { max-width: 32rem; margin: 0; }

/* Counted discs: one shape, project ink on paper, the count in mono. The
   size comes from the widget (28 to 44 px); the look comes from here. */
.leaflet-marker-icon.ddl-inv-cluster {
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--ddl-c-chrome);
  background: var(--ddl-c-card);
  color: var(--ddl-c-chrome);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ddl-c-card) 70%, transparent),
              0 1px 4px color-mix(in srgb, var(--ddl-c-chrome) 35%, transparent);
  cursor: pointer;
}
.ddl-inv-cluster-n {
  font: 600 0.78rem/1 var(--ddl-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.leaflet-marker-icon.ddl-inv-cluster:hover { background: var(--ddl-c-tint); }

/* The compact key inside the map. */
.ddl-map-key.ddl-inv-map-key { line-height: 1.35; max-width: 15.5rem; }
.ddl-inv-map-key .ddl-inv-key-title {
  margin: 0 0 0.25rem; color: var(--ddl-c-muted);
  font: 600 0.68rem/1.3 var(--ddl-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.ddl-inv-map-key .ddl-inv-key-row {
  display: flex; align-items: center; gap: 0.45rem;
  margin: 0; padding: 0.12rem 0; font-size: 0.76rem;
}
.ddl-inv-key-glyph {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 12px; height: 12px; border-radius: 2px;
  border: 1.5px solid var(--ddl-c-card);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ddl-c-chrome) 30%, transparent);
}
.ddl-inv-key-glyph.is-point { width: 10px; height: 10px; border-radius: 50%; margin-inline: 1px; }
.ddl-inv-key-glyph.is-centre {
  background: transparent; border-width: 2px; border-style: dashed; border-radius: 50%; box-shadow: none;
}
.ddl-inv-key-glyph.is-disc {
  width: 20px; height: 20px; margin-inline: -4px; border-radius: 50%;
  border: 1.5px solid var(--ddl-c-chrome); background: var(--ddl-c-card); box-shadow: none;
  color: var(--ddl-c-chrome); font: 600 0.64rem/1 var(--ddl-mono);
}

/* ---- the popup ---------------------------------------------------------------- */
.ddl-inv-pop-shell .leaflet-popup-content-wrapper {
  border-radius: 10px;
  background: var(--ddl-c-card);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--ddl-c-chrome) 28%, transparent);
}
.ddl-inv-pop-shell .leaflet-popup-content { margin: 0.85rem 0.95rem 0.8rem; line-height: 1.4; }
.ddl-inv-pop-shell .leaflet-popup-tip { background: var(--ddl-c-card); }
.ddl-inv-pop { color: var(--ddl-c-ink); font-size: 0.85rem; }
.ddl-inv-pop p { margin: 0; }
.ddl-inv-pop-title { font-size: 0.98rem; padding-right: 1.2rem; }
.ddl-inv-pop-title b { font-weight: 700; }
.ddl-inv-pop-kind { color: var(--ddl-c-muted); font-variant-numeric: tabular-nums; }
.ddl-inv-pop-note { margin-top: 0.2rem; color: var(--ddl-c-muted); }
.ddl-inv-pop-contact {
  display: grid; margin-top: 0.55rem; padding-top: 0.5rem;
  border-top: 1px solid var(--ddl-c-hairline);
}
.ddl-inv-pop-eyebrow {
  color: var(--ddl-c-muted);
  font: 600 0.68rem/1.4 var(--ddl-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.ddl-inv-pop-contact b { font-weight: 650; font-variant-numeric: tabular-nums; }
.ddl-inv-pop-contact span:last-child { color: var(--ddl-c-muted); white-space: nowrap; }
.ddl-inv-pop-reason {
  display: grid; gap: 0.15rem;
  margin-top: 0.55rem; padding: 0.45rem 0.6rem;
  border-radius: 8px; background: var(--ddl-c-tint);
}
.ddl-inv-pop-reason-title { display: flex; align-items: center; gap: 0.45rem; font-weight: 650; }
.ddl-inv-pop-swatch {
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px;
  box-shadow: 0 0 0 1.5px var(--ddl-c-card), 0 0 0 2.5px color-mix(in srgb, var(--ddl-c-chrome) 25%, transparent);
}
/* The count words' live twin: read out, not shown (the fold shows them). */
.ddl-inv-map-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ddl-inv-pop-road { margin-top: 0.5rem; color: var(--ddl-c-muted); font-variant-numeric: tabular-nums; }
.ddl-inv-pop-acts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.leaflet-container .ddl-inv-pop-btn,
.ddl-inv-pop-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 0.8rem;
  border: 1px solid color-mix(in srgb, var(--ddl-c-chrome) 26%, transparent);
  border-radius: 8px; background: var(--ddl-c-card); color: var(--ddl-c-ink);
  font-size: 0.85rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.leaflet-container .ddl-inv-pop-btn:hover { background: var(--ddl-c-tint); color: var(--ddl-c-ink); }
.leaflet-container .ddl-inv-pop-btn.is-primary {
  background: var(--ddl-c-chrome); border-color: var(--ddl-c-chrome); color: var(--ddl-c-on-chrome);
}
.leaflet-container .ddl-inv-pop-btn.is-primary:hover {
  background: color-mix(in srgb, var(--ddl-c-chrome) 86%, var(--ddl-c-card)); color: var(--ddl-c-on-chrome);
}
.ddl-inv-pop-btn:focus-visible { outline: 3px solid var(--ddl-c-focus); outline-offset: 2px; }
/* The day toggle belongs to the day plan: it shows once that code is ready. */
html.ddl-day-ready .ddl-inv-pop-day[hidden] { display: inline-flex; }
.ddl-inv-pop-day[aria-pressed="true"] {
  background: var(--ddl-c-select-bg); border-color: var(--ddl-c-accent);
}

/* ---- the fold under the map ---------------------------------------------------- */
.ddl-inv-map-fold { margin: 0.75rem 0 0; }
.ddl-inv-map-fold-tail {
  color: var(--ddl-c-muted); font-weight: 500; font-variant-numeric: tabular-nums;
}
.ddl-inv-map-filters {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1.5rem;
}
.ddl-inv-map-filter { min-width: 0; }
.ddl-inv-map-filter.is-wide { grid-column: 1 / -1; }
.ddl-inv-map-filter .form-group { margin-bottom: 0.2rem; }

/* Plant checkboxes in the pill grammar. A ticked plant carries a tick, so the
   state never rests on the tint alone. */
.ddl-inv-map-checks.shiny-input-checkboxgroup > .shiny-options-group {
  display: flex; flex-wrap: wrap; gap: 0 0.4rem; max-width: 100%;
}
.ddl-inv-map-checks .shiny-options-group > .checkbox-inline {
  position: relative; display: inline-flex; align-items: center;
  min-height: 44px; margin: 0; padding: 3px 0; cursor: pointer;
}
.ddl-inv-map-checks .shiny-options-group > .checkbox-inline > input {
  position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
}
.ddl-inv-map-checks .checkbox-inline:hover .ddl-c-pill-text { background: var(--ddl-k-tint); }
.ddl-inv-map-checks input:checked + span .ddl-c-pill-text::before {
  content: "\2713"; font-weight: 700; margin-right: 0.1em;
}
.ddl-inv-map-checks input:not(:checked) + span .ddl-c-pill-label { text-decoration: line-through; }
.ddl-inv-map-checks input:not(:checked) + span .ddl-c-pill-text { color: var(--ddl-k-muted); }

.ddl-inv-map-fold-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1rem; margin-top: 0.6rem; padding-top: 0.6rem;
  border-top: 1px solid var(--ddl-c-hairline);
}
.ddl-inv-map-count {
  flex: 1 1 22rem; margin: 0; font-size: 0.85rem; font-variant-numeric: tabular-nums;
  max-width: 72ch;
}
.ddl-inv-map-clear[hidden] { display: none; }

.ddl-inv-map-keyfold { margin-top: 0.85rem; padding-top: 0.7rem; border-top: 1px solid var(--ddl-c-hairline); }
.ddl-inv-map-keyfold-title {
  margin: 0 0 0.4rem; color: var(--ddl-c-muted);
  font: 600 0.68rem/1.3 var(--ddl-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.ddl-inv-key-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1.5rem; margin: 0;
}
.ddl-inv-key-item dt {
  display: flex; align-items: center; gap: 0.5rem; font-weight: 650; font-size: 0.88rem;
}
.ddl-inv-key-item dd { margin: 0.1rem 0 0 1.45rem; color: var(--ddl-c-muted); font-size: 0.85rem; max-width: 60ch; }

.ddl-inv-map-page .ddl-inv-product-map-ledger .ddl-inv-product-note { max-width: 72ch; }
.ddl-inv-map-ledger-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem;
}
.ddl-inv-map-ledger-head .ddl-inv-product-note { flex: 1 1 22rem; margin: 0; }
.ddl-inv-map-ledger-head .ddl-inv-map-ledger-btn { min-height: 44px; }
.ddl-inv-product-map-ledger td.ddl-inv-map-num,
.ddl-inv-product-map-ledger th.ddl-inv-map-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- phones: the map first, 60vh, its controls after it ------------------------ */
@media (max-width: 720px) {
  .ddl-inv-map-page { display: flex; flex-direction: column; }
  /* The card steps aside so its two halves can take the scope line between
     them: the map, then the patch picker, then the fold. Each half carries
     the card's own chrome. */
  .ddl-inv-map-page > .ddl-inv-product-route-head { order: 1; }
  .ddl-inv-map-page > .ddl-map-focus-note { order: 2; }
  .ddl-inv-map-page > .ddl-inv-product-map-card { display: contents; }
  .ddl-inv-map-page .ddl-inv-map-top { order: 3; }
  .ddl-inv-map-page > .ddl-inv-product-context { order: 4; margin: 0.6rem 0; border-top: 1px solid var(--ddl-inv-product-line); border-radius: 10px; }
  .ddl-inv-map-page .ddl-inv-map-under { order: 5; }
  .ddl-inv-map-page > .ddl-inv-product-map-ledger { order: 6; }
  .ddl-inv-map-page .ddl-inv-map-top,
  .ddl-inv-map-page .ddl-inv-map-under {
    min-width: 0; padding: 0.6rem;
    border: 1px solid var(--ddl-inv-product-line); border-radius: 14px;
    background: color-mix(in srgb, var(--ddl-inv-product-paper) 96%, transparent);
    box-shadow: 0 1px 2px rgba(24, 52, 58, 0.05), 0 10px 30px rgba(24, 52, 58, 0.055);
  }
  .ddl-inv-map-page .ddl-inv-map-under { margin-bottom: 1rem; }
  .ddl-inv-map-page .ddl-map-stage.ddl-inv-map-stage { height: 60vh; min-height: 300px; }
  .ddl-inv-map-page .ddl-inv-product-map-card { padding: 0.6rem; }
  .ddl-inv-map-filters, .ddl-inv-key-list { grid-template-columns: minmax(0, 1fr); }
  .ddl-inv-pop-shell .leaflet-popup-content { margin: 0.75rem 0.8rem 0.7rem; }
  .leaflet-container .ddl-inv-pop-btn { min-height: 44px; }
  .ddl-map-key.ddl-inv-map-key { max-width: 13.5rem; }
  /* A phone map is too short for an open popup and the corner controls at
     once: while a popup is open the key and the scale bar step aside (the
     key returns as it was when the popup closes). */
  .ddl-inv-map-stage .leaflet-container:has(.leaflet-popup) .ddl-inv-map-key,
  .ddl-inv-map-stage .leaflet-container:has(.leaflet-popup) .leaflet-control-scale {
    visibility: hidden;
  }
}
@media (pointer: coarse) {
  .leaflet-container .ddl-inv-pop-btn, .ddl-inv-map-tools .ddl-c-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ddl-inv-pop-btn { transition: none; }
}
@media print {
  .ddl-inv-map-loading, .ddl-inv-map-tools, .ddl-inv-map-clear { display: none; }
}
/* ==== [/I2B] ==== */

/* ==== [R1] ==== */
/* The Restoration Action center. The page reads top down: the H1 and lede;
   the scope line (the planting-site picker, then the visit schedule); the
   headline card with its audit fold; one toolbar row (the Filters fold beside
   the status line); then the list beside the Day plan slot and the record
   pane, with the trays and the column guide under the list. Tokens only.
   Legacy workspace rules colour every <p>, so rules that set a colour on a
   paragraph are rooted at .ddl-rst-product-action to outrank them. */

/* -- the scope line: the picker row, then the schedule row ------------------ */
/* A wrapping row at every width: the older phone rule turns the bar into a
   column, where a flex basis becomes a height. */
.ddl-rst-product-action .ddl-rst-r1-scope {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0;
  padding: 0.45rem 0.75rem 0.4rem;
}
.ddl-rst-product-action .ddl-rst-r1-scope > .ddl-rst-product-context-summary {
  flex: 1 1 15rem;
  margin: 0;
  color: var(--ddl-c-muted);
  font-size: 0.85rem;
  font-style: normal;
}
.ddl-rst-product-action .ddl-rst-r1-scope > .ddl-rst-product-context-controls { flex: 0 1 auto; }
.ddl-rst-r1-schedule {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.9rem;
  margin-top: 0.4rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--ddl-c-hairline);
}
.ddl-rst-r1-schedule-head { display: inline-flex; align-items: center; gap: 0.2rem; }
.ddl-rst-r1-schedule-label {
  color: var(--ddl-c-muted);
  font-size: 0.8rem;
  font-weight: 650;
  white-space: nowrap;
}
.ddl-rst-r1-schedule > .ddl-c-pill-group { margin: 0; }
.ddl-c-chip-dialog .ddl-rst-r1-info-p { display: block; margin: 0 0 0.5rem; }
.ddl-c-chip-dialog .ddl-rst-r1-info-p:last-child { margin-bottom: 0; }

/* -- the headline card -------------------------------------------------------- */
.ddl-rst-r1-headline-card {
  position: relative;
  margin: 0 0 0.75rem;
  padding: 0.8rem 1rem 0.75rem;
  background: var(--ddl-c-card);
  border: 1px solid var(--ddl-c-hairline);
  border-radius: var(--ddl-r-md);
}
.ddl-rst-r1-headline-chip { position: absolute; top: 0.7rem; right: 0.85rem; line-height: 1; }
.ddl-rst-product-action .ddl-rst-r1-headline-eyebrow {
  margin: 0 7rem 0.3rem 0;
  color: var(--ddl-c-accent-ink);
  font: 700 0.68rem/1.35 var(--ddl-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ddl-rst-product-action .ddl-rst-r1-headline-text {
  max-width: 62rem;
  margin: 0;
  color: var(--ddl-c-ink);
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.ddl-rst-product-action .ddl-rst-r1-headline-note {
  margin: 0.25rem 0 0;
  color: var(--ddl-c-muted);
  font-size: 0.88rem;
}
.ddl-rst-r1-headline-card > .ddl-c-fold { margin: 0.7rem 0 0; }
.ddl-rst-r1-headline-card .ddl-rst-product-table-scroll { margin: 0 0 0.35rem; }

/* -- the toolbar row: the Filters fold beside the status line ----------------- */
.ddl-rst-r1-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 1.25rem;
  margin: 0 0 0.6rem;
}
.ddl-rst-r1-toolbar > .ddl-rst-r1-filters { flex: 1 1 24rem; min-width: 0; margin: 0; }
.ddl-rst-r1-toolbar > .ddl-rst-r1-filters[open] { flex-basis: 100%; }
.ddl-rst-product-action .ddl-rst-r1-toolbar > .ddl-c-status {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.8rem 0.15rem 0;
  color: var(--ddl-c-muted);
}
.ddl-rst-r1-fold-tail { font-weight: 500; }
.ddl-rst-product-action .ddl-rst-r1-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem 1rem;
  margin: 0;
}
.ddl-rst-product-action .ddl-rst-r1-filter-grid > .shiny-input-container {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
}
.ddl-rst-r1-clear { margin-top: 0.7rem; }
.ddl-rst-r1-scope-slot:empty { display: none; }
.ddl-rst-product-action .ddl-rst-r1-scope-slot > .ddl-rst-r1-scope {
  margin: 0 0 0.75rem;
  padding: 0 0 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--ddl-c-hairline);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* -- the list ---------------------------------------------------------------------- */
.ddl-rst-product-action .ddl-rst-r1-list {
  padding: 0.15rem 0.5rem 0.55rem;
  background: var(--ddl-c-card);
  border: 1px solid var(--ddl-c-hairline);
  border-radius: var(--ddl-r-md);
}
.ddl-rst-product-action .ddl-split-main > .ddl-c-fold { margin: 0.9rem 0 0; }

/* -- the record pane ------------------------------------------------------------- */
.ddl-rst-r1-record { scroll-margin-top: calc(var(--ddl-c-chrome-h, 56px) + 12px); }
/* The record takes focus from a script so a screen reader lands in it; a ring
   round the whole record would be noise (the kit's pane rule), and the next
   Tab shows one on a real control. Rooted to outrank the workspace's ring. */
.ddl-rst-product-action .ddl-c-pane .ddl-rst-r1-record:is(:focus, :focus-visible) { outline: none; }
.ddl-rst-product-action .ddl-rst-r1-section-title {
  margin: 1.05rem 0 0.4rem;
  color: var(--ddl-c-muted);
  font: 700 0.68rem/1.3 var(--ddl-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ddl-rst-product-action .ddl-rst-r1-why > .ddl-rst-r1-section-title { margin-top: 0.15rem; }
.ddl-rst-r1-reasons { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ddl-rst-r1-reason {
  padding: 0.55rem 0.7rem 0.6rem;
  border-left: 3px solid color-mix(in srgb, var(--ddl-c-ink) 30%, transparent);
  border-radius: 8px;
  background: var(--ddl-c-tint);
}
.ddl-rst-r1-reason.is-alert {
  border-left-color: var(--ddl-c-alert);
  background: color-mix(in srgb, var(--ddl-c-alert) 7%, var(--ddl-c-card));
}
.ddl-rst-r1-reason.is-attention {
  border-left-color: var(--ddl-c-attention);
  background: color-mix(in srgb, var(--ddl-c-attention) 11%, var(--ddl-c-card));
}
.ddl-rst-product-action .ddl-rst-r1-reason-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  margin: 0 0 0.2rem;
  color: var(--ddl-c-ink);
  font-size: 0.9rem;
  line-height: 1.35;
}
.ddl-rst-product-action .ddl-rst-r1-reason > p:not(.ddl-rst-r1-reason-title) {
  margin: 0.25rem 0 0;
  color: var(--ddl-c-ink);
  font-size: 0.88rem;
  line-height: 1.5;
  text-wrap: pretty;
}
:is(.ddl-rst-r1-record, .ddl-c-pane-preview) .ddl-c-kv { margin-top: 0.9rem; }
.ddl-rst-r1-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ddl-rst-r1-btn-icon { display: inline-flex; }
.ddl-rst-r1-plant-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ddl-rst-r1-plant-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.65rem;
  border-bottom: 1px dotted color-mix(in srgb, var(--ddl-c-ink) 22%, transparent);
}
.ddl-rst-r1-plant-list > li:last-child { border-bottom: 0; }
.ddl-rst-product-action a.ddl-rst-r1-plant-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ddl-c-accent-ink);
  font: 700 0.86rem/1.2 var(--ddl-mono);
  text-decoration: none;
  text-underline-offset: 3px;
}
.ddl-rst-product-action a.ddl-rst-r1-plant-link:hover { text-decoration: underline; }
.ddl-rst-r1-plant-fact { color: var(--ddl-c-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.ddl-rst-product-action .ddl-rst-r1-reason-order {
  margin: 0 0 0.25rem;
  color: var(--ddl-c-muted);
  font: 700 0.68rem/1.3 var(--ddl-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ddl-rst-product-action .ddl-rst-r1-reason > p.ddl-rst-r1-reason-link { margin: 0.1rem 0 -0.35rem; }
.ddl-rst-product-action a.ddl-rst-r1-check-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 44px;
  color: var(--ddl-c-accent-ink);
  font-size: 0.85rem;
  font-weight: 650;
  text-underline-offset: 3px;
}
/* The record's four actions as a two-by-two grid of equal buttons. */
.ddl-rst-r1-record .ddl-c-pane-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}
.ddl-rst-r1-record .ddl-c-pane-actions > * { min-width: 0; }
.ddl-rst-r1-record .ddl-c-pane-actions .ddl-c-btn { width: 100%; justify-content: flex-start; }
.ddl-rst-r1-record .ddl-c-pane-actions .ddl-c-copy-wrap { display: grid; gap: 0.25rem; }
/* The workspace's older selected-link look (a filled copper block) belongs to
   the retired Review buttons; in the split list the alias stays a link and the
   row carries the selection. */
.ddl-rst-product-action .ddl-split-main .ddl-c-row-open.is-selected {
  color: var(--ddl-c-accent-ink);
  border-color: transparent;
  background: transparent;
}

/* -- the visit strip: one mark per dated visit, drawn inline ---------------------- */
.ddl-rst-r1-strip { display: block; width: 100%; height: auto; overflow: visible; }
.ddl-rst-r1-strip-track { stroke: color-mix(in srgb, var(--ddl-c-ink) 30%, transparent); stroke-width: 2; }
.ddl-rst-r1-strip-end { stroke: color-mix(in srgb, var(--ddl-c-ink) 50%, transparent); stroke-width: 2; }
.ddl-rst-r1-strip-visit { stroke: var(--ddl-c-accent); stroke-width: 2; }
.ddl-rst-r1-strip-visit.is-full { fill: var(--ddl-c-accent); }
.ddl-rst-r1-strip-visit.is-partial { fill: color-mix(in srgb, var(--ddl-c-accent) 35%, var(--ddl-c-card)); }
.ddl-rst-r1-strip-visit.is-photo { fill: var(--ddl-c-card); }
.ddl-rst-r1-strip-flag { fill: var(--ddl-c-alert); }
.ddl-rst-product-action .ddl-rst-r1-strip-ends {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.1rem 0 0;
  color: var(--ddl-c-muted);
  font-size: 0.85rem;
}
.ddl-rst-r1-strip-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin: 0.4rem 0 0;
  padding: 0;
  color: var(--ddl-c-ink);
  font-size: 0.85rem;
  list-style: none;
}
.ddl-rst-r1-strip-legend > li { display: inline-flex; align-items: center; gap: 0.35rem; }
.ddl-rst-r1-key {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid var(--ddl-c-accent);
  border-radius: 50%;
}
.ddl-rst-r1-key.is-full { background: var(--ddl-c-accent); }
.ddl-rst-r1-key.is-partial { background: color-mix(in srgb, var(--ddl-c-accent) 35%, var(--ddl-c-card)); }
.ddl-rst-r1-key.is-photo { background: var(--ddl-c-card); }
.ddl-rst-r1-key.is-flag {
  width: 0;
  height: 0;
  border: 0;
  border-radius: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--ddl-c-alert);
}

/* -- phones: the scope line lives inside the Filters fold -------------------------- */
@media (min-width: 721px) {
  .ddl-rst-r1-fold-tail { display: none; }
}
@media (max-width: 720px) {
  /* Until app.js moves it into the fold, the scope line is not drawn above
     the headline, so the first card never jumps. */
  .ddl-rst-r1-scope-home > .ddl-rst-r1-scope { display: none; }
  .ddl-rst-product-action .ddl-rst-r1-toolbar > .ddl-c-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ddl-rst-r1-headline-card { padding: 0.7rem 0.75rem 0.65rem; }
  .ddl-rst-r1-headline-chip { top: 0.6rem; right: 0.6rem; }
  .ddl-rst-product-action .ddl-rst-r1-headline-eyebrow { margin-right: 6.25rem; }
  .ddl-rst-product-action .ddl-rst-r1-headline-text { font-size: 1.02rem; }
  .ddl-rst-product-action .ddl-rst-r1-filter-grid { grid-template-columns: minmax(0, 1fr); }
  .ddl-rst-product-action .ddl-rst-r1-list { padding: 0; background: none; border: 0; }
  .ddl-rst-r1-record { scroll-margin-top: 4.25rem; }
}

/* -- quiet states ---------------------------------------------------------------------- */
/* A reason that lists no site keeps its place in the picker, drawn muted. */
.ddl-rst-product-action .selectize-dropdown .ddl-rst-r1-opt-zero:not(.active) { color: var(--ddl-c-muted); }
/* The Day plan slot draws nothing until its card arrives; its empty output
   must not flash the "Preparing" placeholder above the pane. */
.ddl-rst-product-action .ddl-split-aside > #rst_day_card:empty { display: none; }

/* -- paper ------------------------------------------------------------------------------ */
@media print {
  html:not(.ddl-print-scoped) .ddl-rst-product-action :is(.ddl-rst-r1-toolbar, .ddl-c-trays,
    .ddl-split-aside, .ddl-rst-r1-schedule, .ddl-split-main > .ddl-c-fold) { display: none; }
  .ddl-rst-product-action .ddl-rst-r1-headline-card { border-color: currentColor; break-inside: avoid; }
  .ddl-rst-r1-strip-visit, .ddl-rst-r1-strip-flag, .ddl-rst-r1-key {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}
/* ==== [/R1] ==== */

/* ==== [R2A] ==== */
/* Restoration Plants: the register toolbar, the six-column register, the
   plant record pane (status line, timeline strip, read history, site visits,
   ring, attachments) and the site card. Tokens only; the split view, pane,
   folds, pills, trays and card rows are the shared kit's. */
.ddl-rst-product-entity .ddl-rst-r2a-count-line {
  margin: -0.4rem 0 0.9rem; color: var(--ddl-c-muted); font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}
.ddl-rst-product-entity .ddl-rst-r2a-count-line a { color: var(--ddl-c-accent-ink); }
.ddl-rst-product-entity > .ddl-rst-product-context { margin: 0 0 0.85rem; }

.ddl-rst-r2a-toolbar {
  display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) auto;
  align-items: start; gap: 0.6rem 0.9rem; margin: 0 0 0.6rem;
}
.ddl-rst-r2a-search .form-group, .ddl-rst-r2a-search .shiny-input-container { margin: 0; width: 100%; }
.ddl-rst-r2a-search label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.ddl-rst-r2a-search input.form-control {
  min-height: 44px; border-radius: var(--ddl-r-sm); border: 1px solid var(--ddl-c-hairline);
  background: var(--ddl-c-card); padding-left: 0.8rem;
}
.ddl-rst-r2a-filters { margin: 0; }
/* The status line stays on the search row when the Filters fold opens below it. */
.ddl-rst-r2a-toolbar > .ddl-c-status {
  margin: 0; align-self: start; display: inline-flex; align-items: center; min-height: 44px;
  white-space: nowrap;
}
/* Two selects a row inside the fold, so the longest label (a common name with
   its scientific name and count) fits on one line beside its caret. */
.ddl-rst-r2a-filter-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.9rem;
}
/* A stale or unknown record link is refused in its own block, never inside the
   scope line (which moves into the closed Filters fold on a phone). */
.ddl-rst-product-entity > .ddl-rst-r2a-notice { margin: 0 0 0.85rem; }
.ddl-rst-product-entity > .ddl-rst-r2a-notice .ddl-rst-product-note { margin: 0; }
.ddl-rst-r2a-filter-grid .form-group,
.ddl-rst-r2a-filter-grid .shiny-input-container { margin: 0; width: 100%; }
.ddl-rst-r2a-filter-grid label { font-size: 0.85rem; font-weight: 600; }
.ddl-rst-r2a-clear { margin-top: 0.6rem; }

/* The register: six columns beside the pane, numbers right, names in two lines. */
.ddl-rst-r2a-list table.dataTable td { vertical-align: middle; }
.ddl-rst-r2a-list .ddl-rst-r2a-sci { font-style: italic; }
.ddl-rst-r2a-list table.dataTable td:has(> .ddl-rst-r2a-glyph) { white-space: nowrap; }
.ddl-rst-r2a-list table.dataTable td > .ddl-c-two-line {
  display: inline-flex; flex-direction: column; vertical-align: middle;
}
/* The planting area ("Planting area B") never breaks before its letter. */
.ddl-rst-r2a-list td:nth-child(3) .ddl-c-two-line-sub { white-space: nowrap; }
/* Age reads days over years beside the pane too (the kit hides a moved unit
   there; this list has no other sub line, so the years stay). */
@media (min-width: 1100px) {
  .ddl-rst-r2a-list .ddl-c-two-line-unit { display: inline; }
}

/* One glyph per state, the same shapes as the timeline, never colour alone. */
.ddl-rst-r2a-glyph {
  display: inline-block; flex: none; width: 0.7rem; height: 0.7rem; margin-right: 0.4rem;
  vertical-align: middle; border-radius: 50%; background: var(--ddl-c-ok);
}
.ddl-rst-r2a-glyph.is-stressed {
  border-radius: 0; background: var(--ddl-c-attention);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.ddl-rst-r2a-glyph.is-dead {
  border-radius: 0; background:
    linear-gradient(45deg, transparent 38%, var(--ddl-c-alert) 38% 62%, transparent 62%),
    linear-gradient(-45deg, transparent 38%, var(--ddl-c-alert) 38% 62%, transparent 62%);
}
.ddl-rst-r2a-glyph.is-missing { background: transparent; border: 2px solid var(--ddl-c-muted); }
.ddl-rst-r2a-glyph.is-never-read { background: transparent; border: 2px dashed var(--ddl-c-muted); }
.ddl-rst-r2a-glyph.is-not-scored,
.ddl-rst-r2a-glyph.is-not-decoded { border-radius: 0; height: 2px; background: var(--ddl-c-muted); }

/* The record pane. Focus moves to the record so a screen reader starts there;
   the frame the workspace draws around focused Restoration controls is not
   drawn around the whole record. */
.ddl-rst-r2a-record { outline: none; }
.ddl-rst-product .ddl-rst-r2a-record:focus-visible { outline: none; }
.ddl-rst-r2a-section-title {
  margin: 1.05rem 0 0.4rem; color: var(--ddl-c-accent-ink);
  font: 700 0.68rem/1.3 var(--ddl-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.ddl-rst-r2a-status {
  display: flex; align-items: baseline; gap: 0.1rem; margin: 0.85rem 0 0.6rem;
  padding: 0.6rem 0.75rem; border-radius: var(--ddl-r-sm);
  border-left: 3px solid var(--ddl-c-hairline); background: var(--ddl-c-zebra);
  font-size: 0.92rem; line-height: 1.45;
}
.ddl-rst-r2a-status .ddl-rst-r2a-glyph { transform: translateY(0.05rem); }
.ddl-rst-r2a-status.is-alive { border-left-color: var(--ddl-c-ok); }
.ddl-rst-r2a-status.is-stressed { border-left-color: var(--ddl-c-attention); }
.ddl-rst-r2a-status.is-dead { border-left-color: var(--ddl-c-alert); }

.ddl-rst-r2a-strip { display: block; width: 100%; max-width: 460px; height: auto; overflow: visible; }
.ddl-rst-r2a-timeline .ddl-rst-r2a-strip-ends { max-width: 460px; }
.ddl-rst-r2a-strip-track { stroke: var(--ddl-c-hairline); stroke-width: 2; }
.ddl-rst-r2a-strip-end { stroke: var(--ddl-c-muted); stroke-width: 1.5; }
.ddl-rst-r2a-g { stroke-width: 2; }
.ddl-rst-r2a-g.is-alive { fill: var(--ddl-c-ok); stroke: var(--ddl-c-card); }
.ddl-rst-r2a-g.is-stressed { fill: var(--ddl-c-attention); stroke: var(--ddl-c-card); }
.ddl-rst-r2a-g.is-dead { fill: none; stroke: var(--ddl-c-alert); stroke-width: 2.4; stroke-linecap: round; }
.ddl-rst-r2a-g.is-missing { fill: var(--ddl-c-card); stroke: var(--ddl-c-muted); }
.ddl-rst-r2a-g.is-not-scored { stroke: var(--ddl-c-muted); stroke-width: 2.4; }
.ddl-rst-r2a-strip-ends {
  display: flex; justify-content: space-between; gap: 0.5rem; margin: 0.15rem 0 0;
  color: var(--ddl-c-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums;
}
.ddl-rst-r2a-key {
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin: 0.35rem 0 0; padding: 0;
  list-style: none; font-size: 0.82rem;
}
.ddl-rst-r2a-key li { display: inline-flex; align-items: center; }

.ddl-rst-r2a-table {
  width: 100%; border-collapse: collapse; font-size: 0.84rem; font-variant-numeric: tabular-nums;
}
.ddl-rst-r2a-table th {
  padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--ddl-c-hairline); color: var(--ddl-c-muted);
  font: 700 0.66rem/1.3 var(--ddl-mono); letter-spacing: 0.08em; text-transform: uppercase;
  text-align: left; vertical-align: bottom;
}
.ddl-rst-r2a-table td {
  padding: 0.38rem 0.4rem; border-bottom: 1px solid var(--ddl-c-hairline); vertical-align: top;
}
.ddl-rst-r2a-table tbody tr:nth-child(even) { background: var(--ddl-c-zebra); }
.ddl-rst-r2a-table .is-num { text-align: right; }
.ddl-rst-r2a-table-wrap { max-width: 100%; overflow-x: auto; }
.ddl-rst-r2a-ledger td:nth-child(2) .ddl-c-two-line-top { font-weight: 500; }
.ddl-rst-r2a-table-wrap:focus-visible { outline: 3px solid var(--ddl-c-focus); outline-offset: 2px; }
.ddl-rst-r2a-table td .ddl-c-two-line { display: flex; flex-direction: column; }
.ddl-rst-r2a-table td .ddl-c-two-line-sub { color: var(--ddl-c-muted); font-size: 0.78rem; }
.ddl-rst-r2a-history .ddl-c-fold, .ddl-rst-r2a-ledger .ddl-c-fold { margin-top: 0.5rem; }

.ddl-rst-r2a-site-line {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 0 0.8rem; margin: 1rem 0 0.3rem; padding: 0.3rem 0 0;
  border-top: 1px solid var(--ddl-c-hairline); font-size: 0.9rem;
}
.ddl-rst-r2a-inline-link {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--ddl-c-accent-ink);
  font-weight: 600; text-underline-offset: 3px;
}
.ddl-rst-r2a-ring-list { margin: 0; padding: 0; list-style: none; font-size: 0.88rem; }
.ddl-rst-r2a-ring-list li {
  display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--ddl-c-hairline);
  font-variant-numeric: tabular-nums;
}
.ddl-rst-r2a-ring-list .ddl-rst-r2a-inline-link { font-family: var(--ddl-mono); font-size: 0.84rem; }
.ddl-rst-r2a-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ddl-rst-r2a-btn-icon { display: inline-flex; margin-right: 0.35rem; }

/* The site card heads the register when the scope line holds one site. */
.ddl-rst-r2a-site-card {
  margin: 0 0 0.8rem; padding: 0.85rem 1rem 0.6rem; border: 1px solid var(--ddl-c-hairline);
  border-radius: var(--ddl-r-md); background: var(--ddl-c-card); box-shadow: var(--ddl-shadow-1);
}
.ddl-rst-r2a-site-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 0.5rem 1rem; margin-bottom: 0.4rem;
}
.ddl-rst-r2a-site-title { margin: 0; font-size: 1.2rem; font-weight: 650; line-height: 1.2; }
.ddl-rst-r2a-site-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

@media (max-width: 1100px) {
  .ddl-rst-r2a-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .ddl-rst-r2a-toolbar > .ddl-c-status { grid-column: 1 / -1; }
}
@media print {
  /* Paper keeps the record's facts: the column-help folds and the in-page
     links stay on screen, and numbers print in ink. */
  .ddl-rst-product-entity .ddl-rst-r2a-history .ddl-c-fold,
  .ddl-rst-product-entity .ddl-rst-r2a-ledger .ddl-c-fold,
  .ddl-rst-product-entity .ddl-rst-r2a-site-line .ddl-rst-r2a-inline-link { display: none; }
  .ddl-rst-product-entity .ddl-c-sheet td { color: inherit; }
}
@media (max-width: 720px) {
  .ddl-rst-r2a-toolbar { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .ddl-rst-r2a-toolbar > .ddl-c-status { white-space: normal; }
  .ddl-rst-r2a-filter-grid { grid-template-columns: minmax(0, 1fr); }
  .ddl-rst-product-entity .ddl-rst-r2a-count-line { margin-top: -0.2rem; }
  .ddl-rst-r2a-table { font-size: 0.82rem; }
}
/* ==== [/R2A] ==== */

/* ==== [R2B] ==== */
/* Restoration Map: the paper card (it replaces the navy frame and its
   light-on-dark notice text), the card toolbar, the loading plate, the site
   marks' key, the popup, the filter fold under the map, the ledger and the
   phone order (the map first at 60vh, its controls after it). Tokens only.
   The navy rules this block overrides are deleted at the prune pass. */

/* ---- the paper card ------------------------------------------------------------ */
.ddl-rst-map-page .ddl-rst-product-map-card {
  padding: 0.86rem;
  overflow: visible;
  border: 1px solid var(--ddl-c-hairline);
  border-radius: 12px;
  background: var(--ddl-c-card);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ddl-c-chrome) 6%, transparent),
              0 10px 28px color-mix(in srgb, var(--ddl-c-chrome) 6%, transparent);
}
.ddl-rst-map-page .ddl-rst-map-top > .ddl-rst-product-card-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: -0.86rem -0.86rem 0.78rem;
  padding: 0.55rem 0.86rem;
  border-bottom: 1px solid var(--ddl-c-hairline);
  border-radius: 12px 12px 0 0;
  background: var(--ddl-c-card);
  color: var(--ddl-c-ink);
}
.ddl-rst-map-page .ddl-rst-map-top > .ddl-rst-product-card-head h2 {
  margin: 0; color: var(--ddl-c-ink); font-size: 1.05rem; font-weight: 600;
}
/* bs_icon() writes a 1em inline size, so the shared 30px icon tile shrank to a
   pale dot with a 4px glyph inside; this head draws the glyph plainly. */
.ddl-rst-map-page .ddl-rst-map-top > .ddl-rst-product-card-head > :first-child > svg {
  padding: 0; background: none; font-size: 1.05rem;
  color: var(--ddl-c-accent-ink);
}
.ddl-rst-map-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ddl-rst-map-tools .ddl-c-btn { min-height: 40px; }
.ddl-rst-map-stage { position: relative; border-radius: 8px; overflow: hidden; }

/* The notice, the notes and the figure footer read as ink on paper: the
   generated-records disclosure is the copy this map rests on. */
.ddl-rst-map-page .ddl-rst-product-map-card :is(.ddl-map-notice, .ddl-map-notice p,
  .ddl-map-notice strong, .ddl-map-notice-fold > summary) {
  color: var(--ddl-c-ink);
}
.ddl-rst-map-page .ddl-rst-product-map-card .ddl-map-notice {
  margin: 0.75rem 0 0;
  border: 1px solid var(--ddl-c-hairline);
  background: var(--ddl-c-card);
}
.ddl-rst-map-page .ddl-rst-product-map-card .demo-figure-footer {
  margin: 0.6rem 0 0; color: var(--ddl-c-muted);
}

/* ---- the loading plate ----------------------------------------------------------- */
.ddl-rst-map-loading {
  position: absolute; inset: 0; z-index: 1100;
  display: grid; place-items: center; padding: 1rem;
  background: var(--ddl-c-canvas);
}
.ddl-rst-map-loading[hidden] { display: none; }
.ddl-rst-map-loading .ddl-c-rest { max-width: 32rem; margin: 0; }
/* A zero-row filter: a small plate in the map says why it is bare. */
.ddl-rst-map-empty {
  position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%);
  z-index: 1000; max-width: calc(100% - 7rem); margin: 0; padding: 0.4rem 0.75rem;
  border: 1px solid var(--ddl-c-hairline); border-radius: 8px;
  background: var(--ddl-c-card); color: var(--ddl-c-ink);
  font-size: 0.9rem; text-align: center; pointer-events: none;
}
.ddl-rst-map-empty[hidden] { display: none; }

/* ---- the key glyphs (map key, fold key, popup) ------------------------------------- */
.ddl-rst-key-glyph {
  flex: 0 0 auto; display: inline-block;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ddl-rst-swatch);
  box-shadow: 0 0 0 1.5px var(--ddl-c-card),
              0 0 0 2.5px color-mix(in srgb, var(--ddl-c-chrome) 25%, transparent);
}
.ddl-rst-key-glyph.is-retired {
  width: 12px; height: 12px;
  background: var(--ddl-c-card);
  border: 2px dashed var(--ddl-rst-swatch);
  box-shadow: none;
}
.ddl-map-key.ddl-rst-map-key { line-height: 1.35; max-width: 15rem; }
.ddl-rst-map-key .ddl-rst-key-title {
  margin: 0 0 0.25rem; color: var(--ddl-c-muted);
  font: 600 0.68rem/1.3 var(--ddl-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.ddl-rst-map-key .ddl-rst-key-row {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0; padding: 0.12rem 0; font-size: 0.76rem;
}

/* ---- the popup ------------------------------------------------------------------------ */
.ddl-rst-pop-shell .leaflet-popup-content-wrapper {
  border-radius: 10px;
  background: var(--ddl-c-card);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--ddl-c-chrome) 28%, transparent);
}
.ddl-rst-pop-shell .leaflet-popup-content { margin: 0.85rem 0.95rem 0.8rem; line-height: 1.4; }
.ddl-rst-pop-shell .leaflet-popup-tip { background: var(--ddl-c-card); }
.ddl-rst-pop { color: var(--ddl-c-ink); font-size: 0.85rem; }
.ddl-rst-pop p { margin: 0; }
.ddl-rst-pop-title { font-size: 0.95rem; padding-right: 1.2rem; }
.ddl-rst-pop-title b { font-weight: 700; }
.ddl-rst-pop-kind { color: var(--ddl-c-muted); font-variant-numeric: tabular-nums; }
.ddl-rst-pop-reason {
  display: grid; gap: 0.15rem;
  margin-top: 0.55rem; padding: 0.45rem 0.6rem;
  border-radius: 8px; background: var(--ddl-c-tint);
}
.ddl-rst-pop-reason.is-retired {
  background: color-mix(in srgb, var(--ddl-c-checked) 12%, var(--ddl-c-card));
}
.ddl-rst-pop-eyebrow {
  color: var(--ddl-c-muted);
  font: 600 0.68rem/1.4 var(--ddl-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.ddl-rst-pop-reason-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 650; }
.ddl-rst-pop-road { margin-top: 0.5rem; color: var(--ddl-c-muted); font-variant-numeric: tabular-nums; }
.ddl-rst-pop-acts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.leaflet-container .ddl-rst-pop-btn,
.ddl-rst-pop-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 0.8rem;
  border: 1px solid color-mix(in srgb, var(--ddl-c-chrome) 26%, transparent);
  border-radius: 8px; background: var(--ddl-c-card); color: var(--ddl-c-ink);
  font-size: 0.85rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.leaflet-container .ddl-rst-pop-btn:hover { background: var(--ddl-c-tint); color: var(--ddl-c-ink); }
.leaflet-container .ddl-rst-pop-btn.is-primary {
  background: var(--ddl-c-chrome); border-color: var(--ddl-c-chrome); color: var(--ddl-c-on-chrome);
}
.leaflet-container .ddl-rst-pop-btn.is-primary:hover {
  background: color-mix(in srgb, var(--ddl-c-chrome) 86%, var(--ddl-c-card));
  color: var(--ddl-c-on-chrome);
}
.ddl-rst-pop-btn:focus-visible { outline: 3px solid var(--ddl-c-focus); outline-offset: 2px; }
/* The day toggle belongs to the day plan: it shows once that code is ready. */
html.ddl-day-ready .ddl-rst-pop-day[hidden] { display: inline-flex; }
.ddl-rst-pop-day[aria-pressed="true"] {
  background: var(--ddl-c-select-bg); border-color: var(--ddl-c-accent);
}

/* ---- the fold under the map ----------------------------------------------------------- */
.ddl-rst-map-fold { margin: 0.75rem 0 0; }
.ddl-rst-map-fold-tail { color: var(--ddl-c-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.ddl-rst-map-filters {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1.5rem;
}
.ddl-rst-map-filter { min-width: 0; }
.ddl-rst-map-filter .form-group { margin-bottom: 0.2rem; }
.ddl-rst-map-fold-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1rem; margin-top: 0.6rem; padding-top: 0.6rem;
  border-top: 1px solid var(--ddl-c-hairline);
}
.ddl-rst-map-count {
  flex: 1 1 22rem; max-width: 72ch; margin: 0;
  font-size: 0.85rem; font-variant-numeric: tabular-nums;
}
.ddl-rst-map-clear[hidden] { display: none; }
.ddl-rst-map-rule { max-width: 72ch; margin: 0.5rem 0 0; color: var(--ddl-c-muted); font-size: 0.85rem; }
.ddl-rst-map-keyfold { margin-top: 0.85rem; padding-top: 0.7rem; border-top: 1px solid var(--ddl-c-hairline); }
.ddl-rst-map-keyfold-title {
  margin: 0 0 0.4rem; color: var(--ddl-c-muted);
  font: 600 0.68rem/1.3 var(--ddl-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.ddl-rst-key-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1.5rem; margin: 0;
}
.ddl-rst-key-item dt { display: flex; align-items: center; gap: 0.55rem; font-weight: 650; font-size: 0.88rem; }
.ddl-rst-key-item dd { margin: 0.1rem 0 0 1.5rem; max-width: 60ch; color: var(--ddl-c-muted); font-size: 0.85rem; }
.ddl-rst-key-item.is-note dd { margin-left: 0; }
/* The count words' live twin: read out, not shown (the fold shows them). */
.ddl-rst-map-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- the ledger ------------------------------------------------------------------------- */
.ddl-rst-map-page .ddl-rst-product-map-ledger {
  margin-top: 1rem;
  border: 1px solid var(--ddl-c-hairline);
  background: var(--ddl-c-card);
}
/* The table sits in a padded body box, so the full-width DataTable fits the
   card instead of running past its right edge by the card's side margins. */
.ddl-rst-map-page .ddl-rst-product-map-ledger > .ddl-rst-map-ledger-body {
  min-width: 0; margin: 0; padding: 0 0.82rem 0.82rem;
}
.ddl-rst-map-ledger-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.6rem 1rem; margin-top: 0.75rem;
}
.ddl-rst-map-ledger-head .ddl-rst-product-note { flex: 1 1 22rem; max-width: 72ch; margin: 0; }
.ddl-rst-map-ledger-head .ddl-rst-map-ledger-btn { min-height: 44px; }
.ddl-rst-product-map-ledger td.ddl-rst-map-num,
.ddl-rst-product-map-ledger th.ddl-rst-map-num { text-align: right; font-variant-numeric: tabular-nums; }
.ddl-rst-map-outside {
  display: block; color: var(--ddl-c-muted); font-size: 0.85rem; white-space: nowrap;
}

/* ---- phones: the map first at 60vh, its controls after it ------------------------------ */
@media (max-width: 720px) {
  .ddl-rst-map-page { display: flex; flex-direction: column; }
  /* The card steps aside so its two halves can take the scope line between
     them: the map, then the site picker, then the fold. Each half carries
     the card's own paper. */
  .ddl-rst-map-page > .ddl-rst-product-route-head { order: 1; }
  .ddl-rst-map-page > .ddl-map-focus-note { order: 2; }
  .ddl-rst-map-page > .ddl-rst-product-map-card { display: contents; }
  .ddl-rst-map-page .ddl-rst-map-top { order: 3; }
  .ddl-rst-map-page > .ddl-rst-product-context { order: 4; margin: 0.6rem 0; }
  .ddl-rst-map-page .ddl-rst-map-under { order: 5; }
  .ddl-rst-map-page > .ddl-rst-product-map-ledger { order: 6; }
  .ddl-rst-map-page .ddl-rst-map-top,
  .ddl-rst-map-page .ddl-rst-map-under {
    min-width: 0; padding: 0.6rem;
    border: 1px solid var(--ddl-c-hairline); border-radius: 12px;
    background: var(--ddl-c-card);
  }
  .ddl-rst-map-page .ddl-rst-map-top > .ddl-rst-product-card-head {
    margin: -0.6rem -0.6rem 0.6rem; padding: 0.45rem 0.6rem;
  }
  .ddl-rst-map-page .ddl-rst-map-under { margin-bottom: 1rem; }
  .ddl-rst-map-page .ddl-map-stage.ddl-rst-map-stage { height: 60vh; min-height: 300px; max-height: 560px; }
  .ddl-rst-map-page .ddl-rst-map-under .ddl-rst-map-fold { margin-top: 0; }
  .ddl-rst-map-filters, .ddl-rst-key-list { grid-template-columns: minmax(0, 1fr); }
  .ddl-rst-pop-shell .leaflet-popup-content { margin: 0.75rem 0.8rem 0.7rem; }
  .leaflet-container .ddl-rst-pop-btn, .ddl-rst-map-tools .ddl-c-btn { min-height: 44px; }
  .ddl-map-key.ddl-rst-map-key { max-width: 13.5rem; }
  /* A phone map is too short for an open popup and the corner controls at
     once: while a popup is open the zoom and layer buttons, the key and the
     scale bar step out of layout (display, not visibility: the shared
     popup-clearing step in map_base.R measures every control with a size,
     and would push a fitted popup down under the attribution to clear a
     hidden one). They return when the popup closes. */
  .ddl-rst-map-stage .leaflet-container:has(.leaflet-popup) .leaflet-top .leaflet-control,
  .ddl-rst-map-stage .leaflet-container:has(.leaflet-popup) .leaflet-control:has(.ddl-rst-map-key),
  .ddl-rst-map-stage .leaflet-container:has(.leaflet-popup) .ddl-rst-map-key,
  .ddl-rst-map-stage .leaflet-container:has(.leaflet-popup) .leaflet-control-scale {
    display: none;
  }
}
@media (pointer: coarse) {
  .leaflet-container .ddl-rst-pop-btn, .ddl-rst-map-tools .ddl-c-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ddl-rst-pop-btn { transition: none; }
}
@media print {
  .ddl-rst-map-loading, .ddl-rst-map-tools, .ddl-rst-map-clear, .ddl-rst-map-ledger-btn { display: none; }
}
/* ==== [/R2B] ==== */

/* ==== [D1] ==== */
/* The Day plan on the three Action centers (day_plan.R, app.js [D1]). The
   card, its phone bar and the printed sheet are the kit's ([F0B]); this block
   is the row checkbox, the pane toggle, the card's wide layout and the few
   parts the kit does not draw. Tokens only. */

/* ---- the row checkbox: a 44px target that does not grow the row ---------------- */
.ddl-day-tick {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; min-height: 44px; margin: -0.6rem 0.1rem -0.6rem -0.55rem;
  vertical-align: middle; cursor: pointer;
}
.ddl-day-tick-input {
  width: 1.15rem; height: 1.15rem; margin: 0; cursor: pointer;
  accent-color: var(--ddl-c-accent-ink, var(--ddl-c-accent));
}
.ddl-day-tick-input:focus-visible { outline: 3px solid var(--ddl-c-focus); outline-offset: 2px; }
td:has(> .ddl-day-tick), .ddl-c-card-value:has(> .ddl-day-tick) { white-space: nowrap; }
/* In a phone card row the alias cell is the head's second column: the box
   takes its own 44px there and never reaches into the reason beside it. */
.ddl-c-cards .ddl-day-tick { margin: -0.6rem 0 -0.6rem 0; }

/* ---- "Add to the day plan" on the record on screen ------------------------------- */
.ddl-day-pane-toggle[aria-pressed="true"] {
  color: var(--ddl-c-ink); background: var(--ddl-c-select-bg); border-color: var(--ddl-c-accent);
}

/* ---- the card ------------------------------------------------------------------------ */
.ddl-day-plan { min-width: 0; }
/* Outside a split view's aside (whose grid gap spaces its stack) the card
   keeps its own room below it; on a phone it has none while it is hidden. */
@media (min-width: 721px) {
  .ddl-day-plan { margin-bottom: 1rem; }
  .ddl-split-aside .ddl-day-plan { margin-bottom: 0; }
}
/* A tile that cannot act keeps the row's 44px buttons their own height, and
   its reason sits under it inside the tile. */
.ddl-day-card-actions-row { align-items: start; }
.ddl-day-card-actions-row > .ddl-c-btn-wrap { display: grid; gap: 0.2rem; min-width: 0; }
.ddl-day-card-actions-row > .ddl-c-btn-wrap > .ddl-c-btn { width: 100%; }
.ddl-day-card-actions-row .ddl-c-btn-why { font-size: 0.85rem; line-height: 1.3; text-align: center; }
.ddl-day-name-label { display: block; margin: 0 0 0.25rem; }
.ddl-day-name-input[aria-invalid="true"] { border-color: var(--ddl-c-alert); }
.ddl-day-name-warn { margin: 0.25rem 0 0; color: var(--ddl-c-alert); font-size: 0.85rem; }
.ddl-day-ready-clear { margin: 0; color: var(--ddl-c-muted); font-size: 0.85rem; }
.ddl-day-order-note { margin: 0.6rem 0 0; color: var(--ddl-c-muted); font-size: 0.85rem; line-height: 1.4; }
.ddl-day-stop:focus { outline: none; }
.ddl-day-stop:focus-visible { outline: 3px solid var(--ddl-c-focus); outline-offset: 2px; }
.ddl-day-stop-alias { font-variant-numeric: tabular-nums; }
.ddl-day-stop.is-off-list .ddl-day-stop-sub { color: var(--ddl-c-ink); }
.ddl-day-card-title:focus { outline: none; }
.ddl-day-card-rest { display: grid; gap: 0.55rem; padding: 0 0.95rem 0.85rem; }
.ddl-day-undo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem;
  margin: 0; font-size: 0.88rem;
}
.ddl-day-undo .ddl-c-btn { min-height: 40px; padding: 0 0.8rem; }

/* A wide card (the aside following the list between 720 and 1100px, or the
   slot at full width before a split view holds it) sets the map beside its
   controls instead of stretching every row across the page. Above the phone
   breakpoint only: a query container is the containing block of its fixed
   descendants, and the phone bar has to stay pinned to the screen. */
@media screen and (min-width: 721px) {
  .ddl-day-plan { container-type: inline-size; container-name: ddl-day; }
}
.ddl-day-plan .ddl-c-day-map { height: 220px; }
@container ddl-day (min-width: 760px) {
  .ddl-day-card-body {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-auto-flow: row dense; column-gap: 1.4rem; align-items: start;
  }
  .ddl-day-card-body > .ddl-day-notice { grid-column: 1 / -1; }
  /* The map stays in view while the stops beside it are read and moved. */
  .ddl-day-card-body > .ddl-day-map {
    grid-column: 1; grid-row: span 4;
    position: sticky; top: calc(var(--ddl-c-chrome-h, 56px) + 12px);
  }
  .ddl-day-card-body > :not(.ddl-day-map):not(.ddl-day-notice) { grid-column: 2; }
  .ddl-day-plan .ddl-c-day-map { height: 320px; }
}

@media (max-width: 720px) {
  /* An empty card that has something to say (a plan the address could not
     load, or "Undo") stays in the page, since there is no bar to carry it. */
  .ddl-day-card.is-empty.has-notice { display: block; margin: 0 0 1rem; }
  .ddl-day-tick { margin-left: -0.35rem; }
}

@media print {
  .ddl-day-tick, .ddl-day-pane-toggle { display: none; }
  html:not(.ddl-print-day-sheet) .ddl-day-plan { display: none; }
  /* Aliases, dates and short labels print whole; the reasons and the
     methods wrap, and Field notes keeps its room to write in. */
  .ddl-c-sheet .ddl-day-sheet-whole { white-space: nowrap; }
}
/* ==== [/D1] ==== */

/* ==== [D2] ==== */
/* The Day plan on the three Map routes (day_plan_map.R): the banner above the
   map stage and the popup toggle. Tokens only; the pins themselves are drawn
   by the kit (ddl_day_add_layers) in pane ddl-day. */
.ddl-day-preview {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.6rem 0.55rem 0.85rem;
  color: var(--ddl-c-ink, var(--ddl-ink));
  background: var(--ddl-c-select-bg, var(--ddl-paper));
  border: 1px solid var(--ddl-c-hairline);
  border-left: 3px solid var(--ddl-c-accent, var(--ddl-project-accent));
  border-radius: var(--ddl-r-sm);
}
.ddl-day-preview.is-off {
  background: var(--ddl-c-card, var(--ddl-paper));
  border-left-color: color-mix(in srgb, var(--ddl-c-ink, var(--ddl-ink)) 28%, transparent);
}
.ddl-day-preview.is-refused {
  background: var(--ddl-c-card, var(--ddl-paper));
  border-left-color: var(--ddl-c-alert, var(--ddl-clay));
}
.ddl-day-preview-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 1rem;
  min-width: 0;
}
.ddl-day-preview-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.3;
}
.ddl-day-preview-title strong { font-weight: 650; white-space: nowrap; }
.ddl-day-preview-tail { color: var(--ddl-c-muted, var(--ddl-muted)); }
/* The flex gap stands for the space before the tail's separator dot. */
.ddl-day-preview-title strong + .ddl-day-preview-tail { margin-left: -0.3rem; }
/* The same numbered disc the pins carry, so the banner reads as their key. */
.ddl-day-preview-glyph {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  color: var(--ddl-c-card, var(--ddl-paper));
  background: var(--ddl-c-chrome, var(--ddl-project-night));
  box-shadow: 0 0 0 2px var(--ddl-c-card, var(--ddl-paper)),
              0 0 0 3px color-mix(in srgb, var(--ddl-c-chrome, var(--ddl-project-night)) 24%, transparent);
  font: 700 0.8rem/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
.ddl-day-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.ddl-day-preview-btn { background: var(--ddl-c-card, var(--ddl-paper)); }
.ddl-day-preview-short { display: none; }
.ddl-day-preview-facts {
  max-width: 72ch;
  margin: 0;
  color: var(--ddl-c-muted, var(--ddl-muted));
  font-size: 0.85rem;
  line-height: 1.45;
}
.ddl-day-preview-counts {
  color: var(--ddl-c-ink, var(--ddl-ink));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ddl-day-preview-notice {
  margin: 0;
  color: color-mix(in srgb, var(--ddl-c-alert, var(--ddl-clay)) 78%, var(--ddl-c-ink, var(--ddl-ink)));
  font-size: 0.9rem;
  font-weight: 600;
}

/* A phone keeps the banner to one row: the count and the two controls, with
   short visible labels (the accessible names stay the long ones). */
@media (max-width: 720px) {
  .ddl-day-preview { padding: 0.4rem 0.45rem 0.45rem 0.6rem; gap: 0.3rem; }
  .ddl-day-preview-row { flex-wrap: nowrap; gap: 0.4rem; }
  .ddl-day-preview-title { flex: 1 1 auto; gap: 0.4rem; font-size: 0.88rem; }
  .ddl-day-preview-title strong { overflow: hidden; text-overflow: ellipsis; }
  .ddl-day-preview-tail,
  .ddl-day-preview-name,
  .ddl-day-preview-n { display: none; }
  .ddl-day-preview-glyph { width: 1.5rem; height: 1.5rem; font-size: 0.72rem; }
  .ddl-day-preview-actions { flex: none; flex-wrap: nowrap; gap: 0.3rem; }
  .ddl-day-preview-btn { padding: 0 0.6rem; font-size: 0.8rem; }
  .ddl-day-preview-long { display: none; }
  .ddl-day-preview-short { display: inline; }
}

/* Below 360px the two controls cannot share the row with the title
   without cutting it, so they drop under it. */
@media (max-width: 360px) {
  .ddl-day-preview-row { flex-wrap: wrap; }
  .ddl-day-preview-title strong { overflow: visible; }
}

/* The popup toggle: the map packages render theirs hidden until the page is
   ready (html.ddl-day-ready); the [D2] block shows it, or adds one. */
.leaflet-popup-content .ddl-day-toggle-row { margin-top: 0.55rem; }
.leaflet-popup-content .ddl-day-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-top: 0.4rem;
  padding: 0 0.85rem;
  color: var(--ddl-c-ink, var(--ddl-ink));
  background: var(--ddl-c-card, var(--ddl-paper));
  border: 1px solid color-mix(in srgb, var(--ddl-c-ink, var(--ddl-ink)) 26%, transparent);
  border-radius: var(--ddl-r-sm);
  font: 600 0.85rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  cursor: pointer;
}
.ddl-day-toggle-row .ddl-day-toggle { margin-top: 0; }
/* The label stays on one line: the toggle is at least as wide as the popup's
   content and grows to its own label, and the page re-measures the popup
   whenever the label changes, so a narrow popup widens to fit it. */
.leaflet-popup-content .ddl-day-toggle { width: max-content; min-width: 100%; max-width: none; justify-content: center; white-space: nowrap; text-align: center; }
.leaflet-popup-content .ddl-day-toggle::before {
  content: "+";
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}
.leaflet-popup-content .ddl-day-toggle[aria-pressed="true"] {
  background: var(--ddl-c-select-bg, var(--ddl-paper));
  border-color: var(--ddl-c-accent, var(--ddl-project-accent));
  box-shadow: inset 3px 0 0 var(--ddl-c-accent, var(--ddl-project-accent));
}
.leaflet-popup-content .ddl-day-toggle[aria-pressed="true"]::before { content: "\2212"; }
.leaflet-popup-content .ddl-day-toggle:hover { background: var(--ddl-c-tint, var(--ddl-paper)); }
.leaflet-popup-content .ddl-day-toggle:focus-visible {
  outline: 3px solid var(--ddl-c-focus, var(--ddl-sky));
  outline-offset: 2px;
}

@media print {
  .ddl-day-preview-actions { display: none; }
  .ddl-day-preview { break-inside: avoid; }
}
/* ==== [/D2] ==== */

/* ==== [O1I] ==== */
/* Invasive Outcomes (O1I): lens pills, one result card per lens (headline,
   figure beside the reading block and the range strips at >= 1100px), folds,
   then the Print and Download trays. Bars use percent geometry inside an SVG
   whose viewBox app.js [O1I] sets from the container, so text stays at its
   real size and a phone gets full-width bars with no sideways swipe. */
.ddl-inv-oc-page { display: grid; gap: 14px; min-width: 0; }
.ddl-inv-oc-page .ddl-inv-product-route-head { margin-bottom: 0; }
.ddl-inv-oc-lenses { min-width: 0; }
.ddl-inv-oc-lenses .ddl-c-pill-group { margin: 0; }
.ddl-inv-oc-result { min-width: 0; }
.ddl-inv-oc-card {
  min-width: 0; padding: 18px 20px 20px; border: 1px solid var(--ddl-c-hairline);
  border-left: 3px solid var(--ddl-c-accent); border-radius: 12px; background: var(--ddl-c-card);
}
.ddl-inv-oc-head { margin: 0 0 14px; }
.ddl-inv-oc-eyebrow {
  margin: 0 0 4px; color: var(--ddl-c-accent-ink);
  font: 600 0.68rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.ddl-inv-oc-headline {
  margin: 0; max-width: 64ch; color: var(--ddl-c-ink);
  font: 600 1.15rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ddl-inv-oc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 28px; align-items: start; }
.ddl-inv-oc-reading-wide { min-width: 0; }
.ddl-inv-oc-reading-wide .ddl-c-reading { margin: 0; }
@media (min-width: 1100px) {
  .ddl-inv-oc-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .ddl-inv-oc-grid.has-side { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .ddl-inv-oc-reading-wide { grid-column: 1 / -1; }
  .ddl-inv-oc-reading-wide .ddl-c-kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }
  .ddl-inv-oc-reading-wide .ddl-c-kv-row:nth-last-child(2) { border-bottom: 0; }
}
.ddl-inv-oc-main, .ddl-inv-oc-side { min-width: 0; }
.ddl-inv-oc-side { display: grid; gap: 16px; }
.ddl-inv-oc-side .ddl-c-reading { margin: 0; }

.ddl-inv-oc-figure { margin: 0; min-width: 0; }
.ddl-inv-oc-figure-title, .ddl-inv-oc-side-title {
  margin: 0; color: var(--ddl-c-ink); font: 600 1rem/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ddl-inv-oc-figure-sub, .ddl-inv-oc-side-lede, .ddl-inv-oc-fold-lede {
  margin: 2px 0 10px; max-width: 72ch; color: var(--ddl-c-muted); font-size: 0.88rem; line-height: 1.45;
}
.ddl-inv-oc-svg { display: block; width: 100%; overflow: visible; }
.ddl-inv-oc-label { fill: var(--ddl-c-ink); font-size: 0.85rem; }
.ddl-inv-oc-label.is-year { font-weight: 600; font-variant-numeric: tabular-nums; }
.ddl-inv-oc-tick { fill: var(--ddl-c-muted); font: 0.72rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ddl-inv-oc-value {
  fill: var(--ddl-c-ink); font: 600 0.8rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.ddl-inv-oc-value.is-inside { fill: var(--ddl-c-card); }
.ddl-inv-oc-mark.is-open .ddl-inv-oc-value.is-inside,
.ddl-inv-oc-mark.is-c1 .ddl-inv-oc-value.is-inside,
.ddl-inv-oc-mark.is-c2 .ddl-inv-oc-value.is-inside { fill: var(--ddl-c-ink); }
.ddl-inv-oc-track { fill: var(--ddl-c-zebra); stroke: transparent; stroke-width: 2; }
.ddl-inv-oc-bar, .ddl-inv-oc-seg { fill: var(--ddl-c-accent); }
.ddl-inv-oc-mark.is-c1 .ddl-inv-oc-bar, .ddl-inv-oc-seg.is-c1, .ddl-inv-oc-swatch.is-c1 {
  fill: color-mix(in srgb, var(--ddl-c-accent) 28%, var(--ddl-c-card));
  background: color-mix(in srgb, var(--ddl-c-accent) 28%, var(--ddl-c-card));
}
.ddl-inv-oc-mark.is-c2 .ddl-inv-oc-bar, .ddl-inv-oc-seg.is-c2, .ddl-inv-oc-swatch.is-c2 {
  fill: color-mix(in srgb, var(--ddl-c-accent) 52%, var(--ddl-c-card));
  background: color-mix(in srgb, var(--ddl-c-accent) 52%, var(--ddl-c-card));
}
.ddl-inv-oc-mark.is-c3 .ddl-inv-oc-bar, .ddl-inv-oc-seg.is-c3, .ddl-inv-oc-swatch.is-c3 {
  fill: var(--ddl-c-accent);
  background: var(--ddl-c-accent);
}
.ddl-inv-oc-mark.is-c4 .ddl-inv-oc-bar, .ddl-inv-oc-seg.is-c4, .ddl-inv-oc-swatch.is-c4 {
  fill: color-mix(in srgb, var(--ddl-c-accent) 55%, var(--ddl-c-ink));
  background: color-mix(in srgb, var(--ddl-c-accent) 55%, var(--ddl-c-ink));
}
.ddl-inv-oc-mark.is-open .ddl-inv-oc-bar, .ddl-inv-oc-seg.is-open {
  fill: color-mix(in srgb, var(--ddl-c-checked) 22%, var(--ddl-c-card));
  stroke: var(--ddl-c-checked); stroke-width: 1; stroke-dasharray: 4 3;
}
.ddl-inv-oc-mark.is-open .ddl-inv-oc-label { fill: var(--ddl-c-muted); font-style: italic; }
.ddl-inv-oc-rule { stroke: var(--ddl-c-hairline); stroke-width: 1; stroke-dasharray: 3 3; }
.ddl-inv-oc-mark { outline: none; }
.ddl-inv-oc-mark:hover .ddl-inv-oc-track { fill: var(--ddl-c-tint); }
.ddl-inv-oc-mark:focus-visible .ddl-inv-oc-track { stroke: var(--ddl-c-focus); stroke-width: 3; }
.ddl-inv-oc-mark.is-year:focus-visible .ddl-inv-oc-label { text-decoration: underline; }
.ddl-inv-oc-mark.is-year:focus-visible .ddl-inv-oc-seg { stroke: var(--ddl-c-focus); stroke-width: 2; }

.ddl-inv-oc-caption, .ddl-inv-oc-footnote {
  margin: 8px 0 0; max-width: 72ch; color: var(--ddl-c-muted); font-size: 0.85rem; line-height: 1.45;
}
.ddl-inv-oc-footnote { padding-top: 8px; border-top: 1px dashed var(--ddl-c-hairline); }
.ddl-inv-oc-footnote strong { color: var(--ddl-c-ink); }

.ddl-inv-oc-ranges { min-width: 0; }
.ddl-inv-oc-ranges .ddl-c-ranges { margin: 0; }
.ddl-inv-oc-caveat {
  margin: 12px 0 0; padding: 10px 12px; max-width: 72ch; border-radius: 8px;
  background: var(--ddl-c-tint); border: 1px solid var(--ddl-c-hairline);
  border-left: 3px solid var(--ddl-c-accent-ink);
  color: var(--ddl-c-ink); font-size: 0.85rem; line-height: 1.45;
}
.ddl-inv-oc-caveat-lead { color: var(--ddl-c-accent-ink); }
.ddl-inv-oc-ranges.is-caveat-only .ddl-inv-oc-caveat { margin-top: 0; }
.ddl-inv-oc-caveat em { font-style: normal; font-weight: 600; }

.ddl-inv-oc-folds { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 16px; min-width: 0; }
.ddl-inv-oc-folds > *, .ddl-inv-oc-folds .ddl-c-fold-body { min-width: 0; max-width: 100%; }
.ddl-inv-oc-folds .ddl-inv-product-table-scroll { max-width: 100%; }
.ddl-inv-oc-legend {
  display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 10px; padding: 0; list-style: none;
  color: var(--ddl-c-ink); font-size: 0.85rem;
}
.ddl-inv-oc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ddl-inv-oc-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.ddl-inv-oc-swatch.is-open {
  background: color-mix(in srgb, var(--ddl-c-checked) 22%, var(--ddl-c-card));
  border: 1px dashed var(--ddl-c-checked);
}

.ddl-inv-oc-phone-note { display: none; }

@media (max-width: 720px) {
  .ddl-inv-oc-card { padding: 14px 14px 16px; }
  .ddl-inv-oc-headline { font-size: 1.05rem; }
  /* The two-to-four column value tables fit the phone column; only the
     wide by-year table keeps a floor and scrolls, with a note saying so. */
  .ddl-inv-oc-folds .ddl-inv-product-table { min-width: 0; }
  .ddl-inv-oc-folds .ddl-inv-product-table :is(th, td) { padding: 0.5rem 0.45rem; }
  .ddl-inv-oc-year-table .ddl-inv-product-table { min-width: 560px; }
  .ddl-inv-oc-phone-note { display: block; }
}
@media print {
  .ddl-inv-oc-card { border: 0; padding: 0; }
  .ddl-inv-oc-grid { grid-template-columns: minmax(0, 1fr); }
  /* A printed lens is the result and its values, not pages of R source. */
  html.ddl-print-inv-outcome .ddl-inv-oc-source,
  html.ddl-print-inv-outcome .ddl-inv-oc-phone-note { display: none; }
  html.ddl-print-inv-outcome .ddl-inv-oc-folds .ddl-inv-product-table { min-width: 0; }
}
/* ==== [/O1I] ==== */

/* ==== [O1R] ==== */
/* Restoration Survival (O1R): range cards, six facets, first year, what was
   planted, the linked matrix. Tokens only. */
.ddl-rst-product-outcome .ddl-rst-product-sv-count {
  color: var(--ddl-c-muted);
  font: 600 0.68rem/1.2 var(--ddl-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ddl-rst-product-outcome .ddl-rst-product-survival-summary .ddl-c-fold { margin-top: 0.7rem; }
.ddl-rst-product-sv-lede {
  max-width: 72ch;
  margin: 0 0 0.85rem;
  color: var(--ddl-c-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ---- range cards ---- */
.ddl-rst-product-sv-range-grid,
.ddl-rst-product-sv-facets,
.ddl-rst-product-sv-planted-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}
.ddl-rst-product-sv-range {
  min-width: 0;
  padding: 0.8rem 0.9rem 0.75rem;
  border: 1px solid var(--ddl-rst-line);
  border-radius: 10px;
  background: var(--ddl-c-card);
}
.ddl-rst-product-sv-range .ddl-c-ranges { margin: 0; }
.ddl-rst-product-sv-range .ddl-c-range-label { font-weight: 600; }
.ddl-rst-product-sv-range .ddl-c-range-value {
  color: var(--ddl-rst-ink);
  font-size: 1.15rem;
}
.ddl-rst-product-sv-range .ddl-c-range-track {
  height: 14px;
  margin: 0.45rem 0 0.35rem;
  overflow: hidden;
  border-radius: 7px;
  background: linear-gradient(90deg,
    var(--ddl-rst-sky-deep) 0 var(--sv-lo, 0%),
    color-mix(in srgb, var(--ddl-rst-line) 45%, var(--ddl-c-card)) var(--sv-lo, 0%) 100%);
  box-shadow: inset 0 0 0 1px var(--ddl-rst-line);
}
.ddl-rst-product-sv-range .ddl-c-range-band {
  top: 0;
  bottom: 0;
  border-radius: 0;
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--ddl-rst-sky-deep) 60%, transparent) 0 2px,
    color-mix(in srgb, var(--ddl-rst-sky-pale) 70%, transparent) 2px 5px);
  box-shadow: inset 0 0 0 1px var(--ddl-rst-sky-deep);
}
.ddl-rst-product-sv-range .ddl-c-range-facts { display: none; }
/* A range that rounds to one value draws one mark at that value. */
.ddl-rst-product-sv-range.is-point .ddl-c-range-band { display: none; }
.ddl-rst-product-sv-range.is-point .ddl-c-range-track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(0px, calc(var(--sv-lo, 0%) - 1.5px), calc(100% - 3px));
  width: 3px;
  background: var(--ddl-rst-ink);
}
.ddl-rst-product-sv-range.is-unreached {
  background: color-mix(in srgb, var(--ddl-c-canvas) 55%, var(--ddl-c-card));
}
.ddl-rst-product-sv-range.is-unreached .ddl-c-range-value {
  color: var(--ddl-c-muted);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: normal;
  text-align: right;
}
.ddl-rst-product-sv-range.is-unreached .ddl-c-range-track {
  height: 2px;
  margin-block: 0.85rem 0.6rem;
  background: repeating-linear-gradient(90deg, var(--ddl-rst-line-strong) 0 6px, transparent 6px 12px);
  box-shadow: none;
}
.ddl-rst-product-sv-facts {
  margin: 0;
  color: var(--ddl-c-muted);
  font-size: 0.85rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.ddl-rst-product-sv-ranges .ddl-c-reading { margin-top: 1rem; }

/* ---- the six facets ---- */
.ddl-rst-product-sv-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.2rem;
  margin: 0 0 0.8rem;
  padding: 0;
  list-style: none;
  color: var(--ddl-c-muted);
  font-size: 0.85rem;
}
.ddl-rst-product-sv-legend li { display: inline-flex; align-items: center; gap: 0.45rem; }
.ddl-rst-product-sv-swatch { width: 28px; height: 14px; flex: none; overflow: visible; }
.ddl-rst-product-sv-facet {
  min-width: 0;
  margin: 0;
  padding: 0.35rem 0.35rem 0.7rem;
  border: 1px solid var(--ddl-rst-line);
  border-radius: 10px;
  background: var(--ddl-c-card);
}
.ddl-rst-product-sv-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.ddl-rst-product-sv-svg:focus { outline: none; }
.ddl-rst-product-sv-svg:focus-visible {
  outline: 3px solid var(--ddl-c-focus);
  outline-offset: 2px;
}
.ddl-rst-product-sv-title { fill: var(--ddl-rst-ink); font: 600 15px system-ui, sans-serif; }
.ddl-rst-product-sv-sub { fill: var(--ddl-c-muted); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.ddl-rst-product-sv-tick { fill: var(--ddl-c-muted); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.ddl-rst-product-sv-axis { fill: var(--ddl-c-muted); font: 11px system-ui, sans-serif; }
.ddl-rst-product-sv-note { fill: var(--ddl-rst-copper-deep); font: 11px system-ui, sans-serif; }
.ddl-rst-product-sv-end {
  fill: var(--ddl-rst-sky-deep);
  font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  paint-order: stroke;
  stroke: var(--ddl-c-card);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.ddl-rst-product-sv-end.is-low { fill: var(--ddl-rst-ink); }
.ddl-rst-product-sv-grid { stroke: var(--ddl-rst-line); stroke-width: 1; }
.ddl-rst-product-sv-xtick { stroke: var(--ddl-rst-line-strong); stroke-width: 1; }
.ddl-rst-product-sv-band {
  fill: color-mix(in srgb, var(--ddl-rst-sky) 24%, transparent);
  stroke: color-mix(in srgb, var(--ddl-rst-sky) 45%, transparent);
  stroke-width: 0.75;
}
.ddl-rst-product-sv-line {
  fill: none;
  stroke: var(--ddl-rst-sky-deep);
  stroke-width: 2.2;
  stroke-linejoin: round;
}
.ddl-rst-product-sv-horizon {
  stroke: var(--ddl-rst-copper);
  stroke-width: 1.4;
  stroke-dasharray: 4 3;
}
.ddl-rst-product-sv-twin {
  margin: 0.2rem 0.45rem 0;
  color: var(--ddl-rst-ink);
  font-size: 0.85rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.ddl-rst-product-sv-caption {
  max-width: 72ch;
  margin: 0.8rem 0 0.3rem;
  color: var(--ddl-c-muted);
  font-size: 0.85rem;
}

/* ---- first year, what was planted ---- */
.ddl-rst-product-sv-first-year .ddl-rst-product-table { min-width: 0; font-size: 0.85rem; }
.ddl-rst-product-sv-first-year .ddl-rst-product-table td { font-variant-numeric: tabular-nums; }
.ddl-rst-product-sv-planted {
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ddl-rst-line);
  border-radius: 10px;
  background: var(--ddl-c-card);
}
.ddl-rst-product-sv-planted h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.45rem;
  color: var(--ddl-rst-ink);
  font: 600 1rem/1.3 system-ui, sans-serif;
}
.ddl-rst-product-sv-planted h3 > span {
  color: var(--ddl-c-muted);
  font: 600 0.68rem/1.2 var(--ddl-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ddl-rst-product-sv-planted dd { font-size: 0.85rem; }

/* ---- the condition-change matrix ---- */
.ddl-rst-product-sv-matrix-scroll .ddl-rst-product-matrix { min-width: 0; font-size: 0.85rem; }
.ddl-rst-product-sv-matrix-scroll .ddl-rst-product-matrix td.is-reversal { padding: 0; }
.ddl-rst-product-sv-cell-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  color: var(--ddl-rst-copper-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ddl-rst-product-sv-cell-link:hover {
  background: color-mix(in srgb, var(--ddl-c-attention) 18%, transparent);
}
.ddl-rst-product-sv-cell-link:focus-visible {
  outline: 3px solid var(--ddl-c-focus);
  outline-offset: 2px;
}

/* ---- the values table ---- */
/* The widget sizes itself to 100% of the card; the card's side margins then
   pushed its last column and the pager's "Next" past the card edge. */
.ddl-rst-product-outcome .ddl-rst-product-survival-table > :not(summary) {
  max-width: calc(100% - 1.64rem);
}
.ddl-rst-product-outcome .ddl-rst-product-survival-table table.dataTable :is(th, td):nth-child(n+8) {
  text-align: right;
}

/* ---- how the ranges are counted ---- */
.ddl-rst-product-sv-steps {
  max-width: 72ch;
  margin: 0 0 0.9rem;
  padding-left: 1.3rem;
  font-size: 0.92rem;
  line-height: 1.5;
}
.ddl-rst-product-sv-steps li + li { margin-top: 0.3rem; }

@media (max-width: 1040px) {
  .ddl-rst-product-sv-range-grid,
  .ddl-rst-product-sv-facets,
  .ddl-rst-product-sv-planted-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ddl-rst-product-outcome .ddl-rst-product-survival-summary .ddl-rst-product-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .ddl-rst-product-sv-range-grid,
  .ddl-rst-product-sv-facets,
  .ddl-rst-product-sv-planted-grid { grid-template-columns: minmax(0, 1fr); }
  .ddl-rst-product-sv-matrix-scroll .ddl-rst-product-matrix :is(th, td) { padding: 0.4rem 0.3rem; }
  .ddl-rst-product-sv-first-year .ddl-rst-product-table :is(th, td) { padding: 0.45rem 0.35rem; }
}
@media print {
  .ddl-rst-product-sv-facets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ddl-rst-product-sv-facet { break-inside: avoid; }
}

/* ==== [/O1R] ==== */

/* ==== [Q1] ==== */
/* The data-check journey (ddl_qc_journey.R): the board grouped by what to do,
   the help dialog, the scope card over a scoped Records table, the export
   reason on vocabulary grains. Tokens only; the kit's pills, folds, trays and
   buttons carry their own [F0B] rules. */
.ddl-qcj-checks { display: grid; gap: 1.1rem; margin: 0.35rem 0 0; }
.ddl-qcj-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 0.75rem 1.25rem;
}
.ddl-qcj-head-copy { min-width: 0; max-width: 72ch; }
.ddl-qcj-title {
  margin: 0; font-family: var(--ddl-display); font-weight: 400;
  font-size: 2.1rem; line-height: 1.05; letter-spacing: -0.012em;
  color: var(--ddl-project-ink, var(--ddl-ink));
}
.ddl-qcj-lede { margin: 0.35rem 0 0; font-size: 0.92rem; color: var(--ddl-c-muted, var(--ddl-muted)); }

/* Group headings (only where a group holds two or more cards). */
.ddl-qcj-board { display: grid; gap: 1.35rem; }
.ddl-qcj-group { display: grid; gap: 0.6rem; }
.ddl-qcj-group-title {
  margin: 0; padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--ddl-c-hairline, var(--ddl-line));
  font: 600 0.68rem/1.3 var(--ddl-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ddl-c-muted, var(--ddl-muted));
}
.ddl-qcj-group-count { font-variant-numeric: tabular-nums; }
.ddl-qcj-grid {
  display: grid; gap: 0.8rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}

/* A card: state and severity, the rule's question, what it means, what to do,
   then the run date beside the one action. */
.ddl-qcj-card {
  display: flex; flex-direction: column; gap: 0.5rem; min-width: 0;
  padding: 0.95rem 1rem 0.9rem;
  background: var(--ddl-c-card, var(--ddl-paper));
  border: 1px solid var(--ddl-c-hairline, var(--ddl-line));
  border-radius: var(--ddl-r-md);
  box-shadow: var(--ddl-shadow-1);
}
.ddl-qcj-card.is-flagged { box-shadow: inset 3px 0 0 var(--ddl-c-attention, var(--ddl-gold)), var(--ddl-shadow-1); }
.ddl-qcj-card.is-clean { box-shadow: inset 3px 0 0 var(--ddl-c-ok, var(--ddl-agave)), var(--ddl-shadow-1); }
.ddl-qcj-card-head, .ddl-qcj-scope-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.6rem;
}
.ddl-qcj-severity {
  font: 600 0.68rem/1.2 var(--ddl-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ddl-c-muted, var(--ddl-muted));
}
.ddl-qcj-group-chip {
  justify-self: start; align-self: flex-start; display: inline-flex; align-items: center;
  margin: 0; padding: 0.1rem 0.55rem; min-height: 24px;
  border: 1px dashed var(--ddl-c-hairline, var(--ddl-line)); border-radius: var(--ddl-r-pill);
  font: 600 0.68rem/1.2 var(--ddl-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ddl-c-accent-ink, var(--ddl-ink));
}
.ddl-qcj-card-question, .ddl-qcj-scope-question {
  margin: 0.1rem 0 0; font: 600 1.05rem/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ddl-project-ink, var(--ddl-ink));
}
.ddl-qcj-card-meaning { margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--ddl-c-muted, var(--ddl-muted)); }
.ddl-qcj-do {
  margin: 0; padding: 0.5rem 0.65rem; font-size: 0.88rem; line-height: 1.45;
  background: var(--ddl-c-tint, var(--ddl-paper));
  border-radius: var(--ddl-r-sm);
  color: var(--ddl-project-ink, var(--ddl-ink));
}
.ddl-qcj-card-foot {
  margin-top: auto; padding-top: 0.35rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.ddl-qcj-run { font-size: 0.85rem; color: var(--ddl-c-muted, var(--ddl-muted)); white-space: nowrap; }

/* The animal filter on the Tortoise board (the dossier's link lands here). */
.ddl-qcj-animal-scope, .ddl-qcj-scope-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
}
.ddl-qcj-animal-scope .ddl-c-status, .ddl-qcj-scope .ddl-c-status { margin: 0; font-size: 0.92rem; }

/* The scope card over a scoped Records table. */
.ddl-qcj-scope {
  display: grid; gap: 0.55rem; margin: 0 0 1rem; padding: 1rem 1.05rem;
  background: var(--ddl-c-card, var(--ddl-paper));
  border: 1px solid var(--ddl-c-hairline, var(--ddl-line));
  border-radius: var(--ddl-r-md);
  box-shadow: inset 3px 0 0 var(--ddl-c-accent, var(--ddl-ink)), var(--ddl-shadow-1);
}
.ddl-qcj-scope > .ddl-c-btn { justify-self: start; }
.ddl-qcj-scope.is-unresolved { box-shadow: inset 3px 0 0 var(--ddl-c-alert, var(--ddl-clay)), var(--ddl-shadow-1); }
.ddl-qcj-scope-lede { margin: 0; font-size: 0.92rem; }
.ddl-qcj-scope-table { min-width: 0; }

/* The Records pane: the export reason sits beside the disabled button. */
.ddl-qcj-records-chiprow { display: flex; justify-content: flex-end; margin: 0 0 0.35rem; }
.ddl-qcj-records-table { min-width: 0; }
.ddl-qcj-export { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.65rem; }
.ddl-qcj-export-why { font-size: 0.85rem; color: var(--ddl-c-muted, var(--ddl-muted)); }
.ddl-qcj-export .ddl-c-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ddl-qcj-column-guides, .ddl-qcj-records > .ddl-c-fold { margin-top: 0.75rem; }

/* The Data & methods sub-tabs: one wrapping segmented control, never clipped.
   The legacy tab rows sized the group to its content and scrolled it; the
   segmented control wraps instead (three and two cells on a phone). */
:is(.ddl-tor-data-tabs, .ddl-inv-product-data-tabs, .ddl-rst-product-data-tabs) {
  max-width: 100%; overflow: visible;
}
:is(.ddl-tor-data-tabs, .ddl-inv-product-data-tabs, .ddl-rst-product-data-tabs) .ddl-c-segmented.form-group {
  min-width: 0; width: 100%;
}
@media (max-width: 720px) {
  :is(.ddl-tor-data-tabs, .ddl-inv-product-data-tabs, .ddl-rst-product-data-tabs) .ddl-c-segmented .shiny-options-group > .radio-inline,
  :is(.ddl-tor-data-tabs, .ddl-inv-product-data-tabs, .ddl-rst-product-data-tabs) .ddl-c-segmented .shiny-options-group > .radio-inline:has(input:checked) {
    flex: 1 1 calc(33.333% - 1px); padding: 0 0.35rem; white-space: normal; text-align: center;
  }
}

/* "What each check asks": a centred sheet on a desktop, a top sheet on a phone. */
.ddl-qcj-help {
  width: min(760px, calc(100vw - 32px)); max-height: min(84vh, 900px);
  padding: 0; border: 1px solid var(--ddl-c-hairline, var(--ddl-line));
  border-radius: var(--ddl-r-lg);
  background: var(--ddl-c-card, var(--ddl-paper)); color: var(--ddl-project-ink, var(--ddl-ink));
  box-shadow: var(--ddl-shadow-3);
}
.ddl-qcj-help::backdrop { background: color-mix(in srgb, var(--ddl-c-chrome, var(--ddl-night)) 45%, transparent); }
.ddl-qcj-help-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem 1rem 0.7rem 1.2rem;
  background: var(--ddl-c-card, var(--ddl-paper));
  border-bottom: 1px solid var(--ddl-c-hairline, var(--ddl-line));
}
.ddl-qcj-help-head h2 { margin: 0; font-family: var(--ddl-display); font-weight: 400; font-size: 1.5rem; }
.ddl-qcj-help-body { display: grid; gap: 1.1rem; padding: 1rem 1.2rem 1.3rem; }
.ddl-qcj-help-lede { margin: 0; font-size: 0.92rem; color: var(--ddl-c-muted, var(--ddl-muted)); }
.ddl-qcj-help-group h3 {
  margin: 0 0 0.5rem; padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--ddl-c-hairline, var(--ddl-line));
  font: 600 0.68rem/1.3 var(--ddl-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ddl-c-muted, var(--ddl-muted));
}
.ddl-qcj-help-group dl { display: grid; gap: 0.85rem; margin: 0; }
.ddl-qcj-help-rule dt { font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.ddl-qcj-help-rule dd { margin: 0.2rem 0 0; font-size: 0.88rem; line-height: 1.45; }
.ddl-qcj-help .ddl-c-fold-body > .ddl-c-product-note { margin: 0 0 0.6rem; }
.ddl-qcj-help-meta { color: var(--ddl-c-muted, var(--ddl-muted)); font-size: 0.85rem; }
.ddl-qcj-fixed {
  display: inline-flex; margin-left: 0.4rem; padding: 0.05rem 0.5rem;
  border: 1px solid var(--ddl-c-hairline, var(--ddl-line)); border-radius: var(--ddl-r-pill);
  font: 600 0.68rem/1.4 var(--ddl-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ddl-c-muted, var(--ddl-muted));
}
.ddl-qcj-thresholds-scroll { overflow-x: auto; }
.ddl-qcj-thresholds { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ddl-qcj-thresholds th {
  text-align: left; padding: 0.4rem 0.5rem;
  font: 600 0.68rem/1.3 var(--ddl-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ddl-c-muted, var(--ddl-muted));
  border-bottom: 1px solid var(--ddl-c-hairline, var(--ddl-line));
}
.ddl-qcj-thresholds td {
  padding: 0.45rem 0.5rem; vertical-align: top;
  border-bottom: 1px solid var(--ddl-c-hairline, var(--ddl-line));
}
.ddl-qcj-thresholds td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .ddl-qcj-title { font-size: 1.6rem; }
  .ddl-qcj-head { align-items: flex-start; }
  .ddl-qcj-help-open { width: 100%; }
  .ddl-qcj-card-foot .ddl-c-btn { flex: 1 1 100%; }
  /* The scope card's two ways out share one row, so the first reviewed record
     starts nearer the top of a phone screen. */
  .ddl-qcj-scope { padding: 0.85rem; }
  .ddl-qcj-scope-actions { flex-wrap: nowrap; gap: 0.5rem; }
  .ddl-qcj-scope-actions .ddl-c-btn {
    flex: 1 1 0; min-width: 0; padding-inline: 0.5rem; font-size: 0.88rem; white-space: nowrap;
  }
  .ddl-qcj-help {
    width: 100vw; max-width: 100vw; max-height: 88vh;
    margin: 0 auto auto; border-radius: 0 0 var(--ddl-r-lg) var(--ddl-r-lg);
  }
  .ddl-qcj-thresholds thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ddl-qcj-thresholds tr { display: grid; gap: 0.15rem; padding: 0.5rem 0; border-bottom: 1px solid var(--ddl-c-hairline, var(--ddl-line)); }
  .ddl-qcj-thresholds td { display: block; padding: 0; border: 0; }
  .ddl-qcj-thresholds td:first-child { font-weight: 600; }
  .ddl-qcj-thresholds td:last-child { white-space: normal; }
}
@media (pointer: coarse) {
  .ddl-qcj-help-close, .ddl-qcj-help-open { min-height: 44px; }
}
/* Lone chipped cards after a headed group sit below a hairline, not a title. */
.ddl-qcj-group-rest { border-top: 1px solid var(--ddl-c-hairline, var(--ddl-line)); padding-top: 1rem; }
/* The no-hit animal filter is a full rest state, not a bare line. */
.ddl-qcj-animal-scope.is-none { display: block; }
/* The scope card never grows past its pane; on the narrowest phones its two
   ways out stack instead of clipping. */
.ddl-qcj-scope { min-width: 0; max-width: 100%; box-sizing: border-box; }
.ddl-qcj-scope > * { min-width: 0; }
@media (max-width: 360px) {
  .ddl-qcj-scope-actions { flex-wrap: wrap; }
  .ddl-qcj-scope-actions .ddl-c-btn { flex: 1 1 100%; }
}
/* Scoped review rows keep one height whether or not the record links. */
@media (min-width: 721px) {
  .ddl-qcj-scope-table tbody td { height: 44px; vertical-align: middle; }
}
@media print {
  .ddl-qcj-help, .ddl-qcj-help-open { display: none; }
}
/* ==== [/Q1] ==== */

/* ==== [A1A] ==== */
/* The question-led analysis library (ddl_analysis_kit.R). A gallery of
   question cards under three group eyebrows; a chosen question opens as one
   result card above the gallery, which then reads "More questions". Every
   colour is a workspace token, so the three workspaces differ by accent only. */
.ddl-a1 {
  --a1-ink: var(--ddl-c-ink, var(--ddl-project-ink, var(--ddl-ink)));
  --a1-card: var(--ddl-c-card, var(--ddl-paper));
  --a1-canvas: var(--ddl-c-canvas, var(--ddl-project-paper, var(--ddl-bg)));
  --a1-line: var(--ddl-c-hairline, color-mix(in srgb, var(--a1-ink) 13%, transparent));
  --a1-line-strong: color-mix(in srgb, var(--a1-ink) 24%, transparent);
  --a1-accent: var(--ddl-c-accent, var(--ddl-project-accent, var(--ddl-gold)));
  --a1-accent-ink: var(--ddl-c-accent-ink, color-mix(in srgb, var(--a1-accent) 50%, var(--a1-ink)));
  --a1-attention: var(--ddl-c-attention, var(--ddl-gold));
  --a1-checked: var(--ddl-c-checked, var(--ddl-muted));
  --a1-focus: var(--ddl-c-focus, var(--ddl-sky));
  --a1-muted: color-mix(in srgb, var(--a1-ink) 72%, var(--a1-card));
  --a1-tint: color-mix(in srgb, var(--a1-accent) 6%, var(--a1-card));
  --a1-select: color-mix(in srgb, var(--a1-accent) 10%, var(--a1-card));
  --a1-zebra: color-mix(in srgb, var(--a1-canvas) 55%, var(--a1-card));
  --a1-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--a1-ink);
  margin: 0.35rem 0 0;
}
.ddl-main-workspace .ddl-a1 p { color: inherit; }

/* ---- the pane head and the back row ---------------------------------------------- */
.ddl-a1-head { margin: 0 0 1.35rem; }
.ddl-main-workspace .ddl-a1 .ddl-a1-title {
  margin: 0; color: var(--a1-ink); font-family: var(--ddl-display); font-weight: 400;
  font-size: 2.1rem; line-height: 1.08; letter-spacing: -0.015em;
}
.ddl-main-workspace .ddl-a1 .ddl-a1-lede {
  margin: 0.4rem 0 0; max-width: 64ch; color: var(--a1-muted); font-size: 0.95rem; line-height: 1.5;
}
.ddl-a1-title:focus, .ddl-a1-title:focus-visible { outline: none; }
.ddl-a1-back-row { display: none; margin: 0 0 0.6rem; }
.ddl-a1[data-ddl-a1-state="result"] .ddl-a1-head { display: none; }
.ddl-a1[data-ddl-a1-state="result"] .ddl-a1-back-row { display: block; }
.ddl-a1-back {
  display: inline-flex; align-items: center; gap: 0.25rem; min-height: 44px; padding: 0 0.2rem;
  color: var(--a1-accent-ink); font: 600 0.92rem/1.2 var(--a1-sans); text-decoration: none;
}
.ddl-a1-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.ddl-a1-back:focus-visible { outline: 3px solid var(--a1-focus); outline-offset: 2px; border-radius: 4px; }

/* The select is the cards' accessible twin. Once the script runs it steps out
   of sight, and returns the moment it holds focus, so a keyboard reader who
   tabs to it sees what they are operating. */
.ddl-a1-twin { max-width: 36rem; margin: 0 0 1rem; }
.ddl-a1-twin .form-group { margin: 0; }
.ddl-a1-twin select { min-height: 44px; }
.ddl-a1-js .ddl-a1-twin:not(:focus-within) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- the gallery ------------------------------------------------------------------ */
.ddl-a1-gallery { display: grid; gap: 1.5rem; }
.ddl-a1-more-title { display: none; }
.ddl-a1[data-ddl-a1-state="result"] .ddl-a1-gallery {
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--a1-line); gap: 1.1rem;
}
.ddl-main-workspace .ddl-a1[data-ddl-a1-state="result"] .ddl-a1-more-title {
  display: block; margin: 0; color: var(--a1-ink); font: 600 1.05rem/1.3 var(--a1-sans);
}
.ddl-a1-group { min-width: 0; }
.ddl-main-workspace .ddl-a1 .ddl-a1-eyebrow {
  display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.7rem;
  color: var(--a1-accent-ink); font: 700 0.68rem/1.3 var(--ddl-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.ddl-a1-eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--a1-line); }
.ddl-a1-grid {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
}
.ddl-a1-card {
  position: relative; display: flex; flex-direction: column; gap: 0.45rem; min-width: 0;
  padding: 0.95rem 1.05rem 0.8rem; background: var(--a1-card);
  border: 1px solid var(--a1-line); border-radius: 12px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--a1-ink) 4%, transparent);
}
.ddl-a1-card:hover { border-color: color-mix(in srgb, var(--a1-accent) 45%, var(--a1-line)); background: var(--a1-tint); }
.ddl-a1-card:focus-within { outline: 3px solid var(--a1-focus); outline-offset: 2px; }
.ddl-a1-card.is-refusal { background: color-mix(in srgb, var(--a1-canvas) 40%, var(--a1-card)); border-style: dashed; }
.ddl-a1-card.is-chosen {
  background: var(--a1-select); border-color: color-mix(in srgb, var(--a1-accent) 55%, var(--a1-line));
  box-shadow: inset 3px 0 0 var(--a1-accent);
}
.ddl-main-workspace .ddl-a1 .ddl-a1-card-q { margin: 0; font: 600 1rem/1.32 var(--a1-sans); color: var(--a1-ink); }
.ddl-a1-card-link { color: inherit; text-decoration: none; }
.ddl-a1-card-link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.ddl-a1-card-link:focus { outline: none; }
.ddl-a1-card:hover .ddl-a1-card-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ddl-main-workspace .ddl-a1 .ddl-a1-card-use { margin: 0; color: var(--a1-muted); font-size: 0.88rem; line-height: 1.45; }
.ddl-main-workspace .ddl-a1 .ddl-a1-card-refusal { margin: 0; color: var(--a1-ink); font-size: 0.85rem; line-height: 1.45; }
.ddl-a1-card-foot {
  display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.2rem; min-height: 1.6rem;
}
.ddl-a1-card-foot::after {
  content: "\2192"; margin-left: auto; color: var(--a1-accent-ink); font: 600 1rem/1 var(--a1-sans);
}
.ddl-a1-card-open { display: none; color: var(--a1-accent-ink); font: 700 0.68rem/1.3 var(--ddl-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.ddl-a1-card.is-chosen .ddl-a1-card-open { display: inline; }
.ddl-a1-card.is-chosen .ddl-a1-card-foot::after { content: "\2191"; }
.ddl-a1[data-ddl-a1-state="result"] .ddl-a1-card { padding: 0.75rem 0.95rem 0.65rem; }
.ddl-a1[data-ddl-a1-state="result"] .ddl-a1-card-use { font-size: 0.85rem; }

/* ---- the result card ------------------------------------------------------------------ */
.ddl-a1-result-slot:empty { display: none; }
.ddl-a1-result {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; min-width: 0;
  padding: 1.35rem 1.5rem 1.2rem; background: var(--a1-card);
  border: 1px solid var(--a1-line); border-radius: 14px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--a1-ink) 6%, transparent);
}
.ddl-a1-result > * { min-width: 0; margin: 0; }
.ddl-a1-result-head { display: grid; gap: 0.3rem; }
.ddl-main-workspace .ddl-a1 .ddl-a1-result-eyebrow {
  margin: 0; color: var(--a1-accent-ink); font: 700 0.68rem/1.3 var(--ddl-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.ddl-main-workspace .ddl-a1 .ddl-a1-result-title {
  margin: 0; color: var(--a1-ink); font-family: var(--ddl-display); font-weight: 400;
  font-size: 1.75rem; line-height: 1.12; letter-spacing: -0.01em; max-width: 34ch;
}
/* Focus lands on the answer's heading so a screen reader starts there; the
   heading is not a control, so it draws no ring. */
.ddl-a1-result-title:focus, .ddl-a1-result-title:focus-visible { outline: none; }
.ddl-main-workspace .ddl-a1 .ddl-a1-result-lede { margin: 0; color: var(--a1-muted); font-size: 0.98rem; line-height: 1.5; max-width: 72ch; }
.ddl-a1-result .ddl-c-reading { margin: 0; }
.ddl-a1-result .ddl-c-fold { margin: 0; }
.ddl-a1-result .ddl-c-trays { margin: 0.1rem 0 0; }

/* At a desktop width the graphic and its reading sit side by side: the
   picture on the left, what it counts and leaves out on the right. */
@media (min-width: 1100px) {
  .ddl-a1-result:not(.is-wide):has(> .ddl-a1-graphic) {
    grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 1fr);
    column-gap: 1.5rem;
  }
  .ddl-a1-result:not(.is-wide):has(> .ddl-a1-graphic) > * { grid-column: 1 / -1; }
  .ddl-a1-result:not(.is-wide):has(> .ddl-a1-graphic) > .ddl-a1-graphic { grid-column: 1; grid-row: 2 / span 3; align-self: start; }
  .ddl-a1-result:not(.is-wide):has(> .ddl-a1-graphic) > .ddl-c-reading { grid-column: 2; grid-row: 2; align-self: start; }
  .ddl-a1-result:not(.is-wide):has(> .ddl-a1-graphic) > .ddl-a1-caveat { grid-column: 2; grid-row: 3; align-self: start; }
  .ddl-a1-result:not(.is-wide):has(> .ddl-a1-graphic) > .ddl-a1-links { grid-column: 2; grid-row: 4; align-self: start; }
  .ddl-a1-result:not(.is-wide):has(> .ddl-a1-graphic) .ddl-c-reading .ddl-c-kv-row { grid-template-columns: minmax(0, 1fr); }
}

.ddl-a1-graphic { min-width: 0; }
.ddl-a1-graphic > figure { margin: 0; }
.ddl-a1-caveat {
  padding: 0.7rem 0.9rem; border-radius: 10px;
  background: color-mix(in srgb, var(--a1-attention) 13%, var(--a1-card));
  border: 1px solid color-mix(in srgb, var(--a1-attention) 50%, transparent);
  box-shadow: inset 3px 0 0 var(--a1-attention);
}
.ddl-main-workspace .ddl-a1 .ddl-a1-caveat-title,
.ddl-main-workspace .ddl-a1 .ddl-a1-refusal-title {
  margin: 0 0 0.25rem; font: 700 0.68rem/1.3 var(--ddl-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--a1-attention) 40%, var(--a1-ink));
}
.ddl-main-workspace .ddl-a1 .ddl-a1-caveat-text { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.ddl-a1-refusal {
  padding: 0.9rem 1rem; border-radius: 10px; background: color-mix(in srgb, var(--a1-canvas) 50%, var(--a1-card));
  border: 1px dashed var(--a1-line-strong);
}
.ddl-main-workspace .ddl-a1 .ddl-a1-refusal-title { color: var(--a1-muted); }
.ddl-main-workspace .ddl-a1 .ddl-a1-refusal-text { margin: 0; font-size: 0.98rem; line-height: 1.55; max-width: 72ch; }
.ddl-a1-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.ddl-a1-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.85rem;
  color: var(--a1-accent-ink); background: var(--a1-card); border: 1px solid var(--a1-line-strong);
  border-radius: 999px; font: 600 0.88rem/1.2 var(--a1-sans); text-decoration: none;
}
.ddl-a1-link::after { content: "\2192"; margin-left: 0.4rem; }
.ddl-a1-link:hover { background: var(--a1-tint); }
.ddl-a1-link:focus-visible { outline: 3px solid var(--a1-focus); outline-offset: 2px; }

.ddl-a1-links:has(.ddl-a1-review-list) { display: grid; gap: 0.6rem; }
.ddl-a1-review-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--a1-line); border-radius: 10px; background: var(--a1-card); }
.ddl-a1-review-list li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem;
  padding: 0.35rem 0.4rem 0.35rem 0.85rem; border-bottom: 1px solid var(--a1-line);
}
.ddl-a1-review-list li:last-child { border-bottom: 0; }
.ddl-a1-review-q { flex: 1 1 16rem; min-width: 0; font-size: 0.88rem; line-height: 1.4; }
.ddl-a1-review-link {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.6rem; border-radius: 8px;
  color: var(--a1-accent-ink); font: 600 0.85rem/1.2 var(--a1-sans); text-decoration: none; white-space: nowrap;
}
.ddl-a1-review-link::after { content: "\2192"; margin-left: 0.35rem; }
.ddl-a1-review-link:hover { background: var(--a1-tint); text-decoration: underline; text-underline-offset: 3px; }
.ddl-a1-review-link:focus-visible { outline: 3px solid var(--a1-focus); outline-offset: 2px; }

/* ---- bars --------------------------------------------------------------------------------------- */
.ddl-a1-bars { margin: 0; }
.ddl-a1-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0 0 0.6rem; padding: 0; list-style: none; font-size: 0.85rem; color: var(--a1-muted); }
.ddl-a1-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.ddl-a1-swatch { display: inline-block; width: 0.85rem; height: 0.6rem; border-radius: 2px; background: var(--a1-accent); }
.ddl-a1-swatch.is-s2, .ddl-a1-bar-line.is-s2 .ddl-a1-bar { background: color-mix(in srgb, var(--a1-accent) 38%, var(--a1-card)); }
.ddl-a1-swatch.is-s2 { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a1-accent) 60%, transparent); }
.ddl-a1-bar-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.ddl-a1-bar-row {
  display: grid; grid-template-columns: minmax(7rem, 13.5rem) minmax(0, 1fr); gap: 0.2rem 0.9rem; align-items: center;
}
.ddl-a1-bar-label { font-size: 0.88rem; line-height: 1.3; overflow-wrap: anywhere; }
.ddl-a1-bar-set { display: grid; gap: 0.2rem; min-width: 0; }
.ddl-a1-bar-line { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.ddl-a1-bar-track {
  position: relative; flex: 1 1 auto; height: 0.8rem; min-width: 0;
  background: color-mix(in srgb, var(--a1-ink) 6%, var(--a1-card)); border-radius: 3px; overflow: hidden;
}
.ddl-a1-bars.is-multi .ddl-a1-bar-track { height: 0.6rem; }
.ddl-a1-bar { display: block; height: 100%; background: var(--a1-accent); border-radius: 3px; }
/* A zero is drawn as a zero: a baseline tick and no track, so it does not read as a missing bar. */
.ddl-a1-bar-line.is-zero .ddl-a1-bar-track { background: transparent; border-left: 2px solid var(--a1-line-strong); border-radius: 0; }
.ddl-a1-bar-line.is-zero .ddl-a1-bar-value { color: var(--a1-muted); }
.ddl-a1-bar-value {
  flex: 0 0 3.6rem; text-align: right; font: 600 0.8rem/1.2 var(--ddl-mono);
  font-variant-numeric: tabular-nums; color: var(--a1-ink); white-space: nowrap;
}
.ddl-main-workspace .ddl-a1 .ddl-a1-figcap { margin: 0.7rem 0 0; color: var(--a1-muted); font-size: 0.85rem; line-height: 1.45; }
.ddl-a1-graphic .ddl-c-ranges { margin: 0; }

/* ---- the result table --------------------------------------------------------------------------- */
.ddl-a1-table-wrap {
  max-width: 100%; overflow-x: auto; border: 1px solid var(--a1-line); border-radius: 8px;
  background: var(--a1-card);
}
.ddl-a1-table-wrap:focus-visible { outline: 3px solid var(--a1-focus); outline-offset: 2px; }
.ddl-a1-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ddl-a1-table th {
  padding: 0.55rem 0.7rem; text-align: left; vertical-align: bottom;
  background: color-mix(in srgb, var(--a1-ink) 5%, var(--a1-card)); border-bottom: 1px solid var(--a1-line-strong);
  color: var(--a1-muted); font: 700 0.68rem/1.3 var(--ddl-mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.ddl-a1-table td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--a1-line); vertical-align: top; line-height: 1.4; }
.ddl-a1-table tbody tr:nth-child(even) td { background: var(--a1-zebra); }
.ddl-a1-table tbody tr:last-child td { border-bottom: 0; }
.ddl-a1-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ddl-main-workspace .ddl-a1 .ddl-a1-table-note { margin: 0 0 0.6rem; color: var(--a1-muted); font-size: 0.88rem; }
.ddl-a1-result .ddl-c-fold-body > .demo-footer { margin: 0.6rem 0 0; }

/* ---- behind this number ----------------------------------------------------------------------- */
.ddl-a1-method { display: grid; gap: 0.7rem; margin: 0 0 0.9rem; max-width: 78ch; }
.ddl-main-workspace .ddl-a1 .ddl-a1-method-summary { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.ddl-main-workspace .ddl-a1 .ddl-a1-method-title {
  margin: 0 0 0.25rem; color: var(--a1-accent-ink); font: 700 0.68rem/1.3 var(--ddl-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.ddl-a1-method ul, .ddl-a1-method ol { margin: 0; padding-left: 1.2rem; font-size: 0.9rem; line-height: 1.5; }
.ddl-a1-method li + li { margin-top: 0.15rem; }

/* ---- phones ------------------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .ddl-main-workspace .ddl-a1 .ddl-a1-title { font-size: 1.6rem; }
  .ddl-a1-head { margin-bottom: 1.1rem; }
  .ddl-a1-grid { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .ddl-a1-result { padding: 1rem 0.95rem 0.95rem; border-radius: 12px; gap: 0.8rem; }
  /* On a phone the picture follows the lede, so the first working row lands on the first screen. */
  .ddl-a1-result > .ddl-a1-result-head { order: -2; }
  .ddl-a1-result > .ddl-a1-graphic { order: -1; }
  .ddl-main-workspace .ddl-a1 .ddl-a1-result-title { font-size: 1.4rem; }
  .ddl-a1-bar-row { grid-template-columns: minmax(0, 1fr); }
  .ddl-a1-bar-value { flex-basis: 3.2rem; }
  .ddl-a1-table th, .ddl-a1-table td { padding: 0.45rem 0.55rem; }
  .ddl-a1-table td:first-child, .ddl-a1-table th:first-child { min-width: 8.5rem; }
}
@media (pointer: coarse) {
  .ddl-a1-card { min-height: 44px; }
}
/* ==== [/A1A] ==== */

/* ==== [A1B] ==== */
/* Data & methods: the Methods pane (how each number is worked out, can and
   cannot) and the Reports pane (a quiet self-check, readable tables, a
   download). Tokens only; the table look itself is F0A's shared table rule. */

.ddl-main-workspace .ddl-a1b-methods,
.ddl-main-workspace .ddl-a1b-report { display: grid; gap: 1rem; min-width: 0; }
.ddl-main-workspace .ddl-a1b-worked,
.ddl-main-workspace .ddl-a1b-claims { display: grid; gap: 0.75rem; min-width: 0; }
.ddl-main-workspace .ddl-a1b-title {
  margin: 0;
  color: var(--ddl-c-ink);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}
.ddl-main-workspace .ddl-a1b-subtitle {
  margin: 0;
  color: var(--ddl-c-ink);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.3;
}
.ddl-main-workspace .ddl-a1b-lede {
  max-width: 72ch;
  margin: 0;
  color: var(--ddl-c-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.ddl-main-workspace .ddl-a1b-eyebrow {
  margin: 0 0 0.15rem;
  color: var(--ddl-c-accent-ink);
  font-family: var(--ddl-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* In-page contents: real links, 44px targets, wrapping. */
.ddl-main-workspace .ddl-a1b-toc { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ddl-main-workspace .ddl-a1b-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.85rem;
  border: 1px solid var(--ddl-c-hairline);
  border-radius: 999px;
  background: var(--ddl-c-card);
  color: var(--ddl-c-accent-ink);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.ddl-main-workspace .ddl-a1b-toc a:hover { background: var(--ddl-c-tint); }
.ddl-main-workspace .ddl-a1b-toc a:focus-visible {
  outline: 3px solid var(--ddl-c-focus);
  outline-offset: 2px;
}

/* One card per figure family, four parts each; two columns on a desktop. */
.ddl-main-workspace .ddl-a1b-family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 0.85rem;
  align-items: start;
}
.ddl-main-workspace .ddl-a1b-family {
  min-width: 0;
  padding: 1rem 1.1rem 0.6rem;
  border: 1px solid var(--ddl-c-hairline);
  border-radius: 12px;
  background: var(--ddl-c-card);
  scroll-margin-top: calc(var(--ddl-c-chrome-h, 56px) + 16px);
}
.ddl-main-workspace .ddl-a1b-family-head {
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--ddl-c-hairline);
}
.ddl-main-workspace .ddl-a1b-family .ddl-c-kv-row { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
.ddl-main-workspace .ddl-a1b-family .ddl-c-kv dt {
  color: var(--ddl-c-muted);
  font-family: var(--ddl-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ddl-main-workspace .ddl-a1b-family .ddl-c-kv dd { font-size: 0.9rem; line-height: 1.5; max-width: 72ch; }

/* Can and cannot: two columns, the refusals in the muted ink. */
.ddl-main-workspace .ddl-a1b-claims { scroll-margin-top: calc(var(--ddl-c-chrome-h, 56px) + 16px); }
.ddl-main-workspace .ddl-a1b-claims-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 0.85rem;
  align-items: start;
}
.ddl-main-workspace .ddl-a1b-claims-col {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ddl-c-hairline);
  border-radius: 12px;
  background: var(--ddl-c-card);
}
.ddl-main-workspace .ddl-a1b-claims-col.is-can { box-shadow: inset 3px 0 0 var(--ddl-c-ok); }
.ddl-main-workspace .ddl-a1b-claims-col.is-cannot { box-shadow: inset 3px 0 0 var(--ddl-c-checked); }
.ddl-main-workspace .ddl-a1b-claim-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ddl-main-workspace .ddl-a1b-claim {
  display: grid;
  gap: 0.15rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--ddl-c-hairline);
}
.ddl-main-workspace .ddl-a1b-claim:first-child { border-top: 0; }
.ddl-main-workspace .ddl-a1b-claim strong { color: var(--ddl-c-ink); font-size: 0.92rem; font-weight: 600; }
.ddl-main-workspace .ddl-a1b-claim-arms {
  color: var(--ddl-c-accent-ink);
  font-size: 0.85rem;
}
.ddl-main-workspace :is(.ddl-a1b-claim-caveat, .ddl-a1b-claim-reason) {
  max-width: 72ch;
  color: var(--ddl-c-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}
.ddl-main-workspace .ddl-a1b-claim-caveat em { color: var(--ddl-c-ink); font-style: normal; font-weight: 600; }

/* Reports: the picker, the self-check, the answer, the table, the tray. */
.ddl-main-workspace .ddl-a1b-picker { max-width: 420px; }
.ddl-main-workspace .ddl-a1b-card { display: grid; gap: 1rem; min-width: 0; }
.ddl-main-workspace .ddl-a1b-card > .shiny-html-output { min-width: 0; }
.ddl-main-workspace .ddl-a1b-checked { display: grid; gap: 0.35rem; min-width: 0; }
.ddl-main-workspace .ddl-a1b-checked-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--ddl-c-muted);
  font-size: 0.9rem;
}
.ddl-main-workspace .ddl-a1b-checked.is-disagree .ddl-a1b-checked-line {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ddl-c-alert);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ddl-c-alert) 8%, var(--ddl-c-card));
  color: var(--ddl-c-ink);
  font-weight: 600;
}
.ddl-main-workspace .ddl-a1b-checked .ddl-c-fold { margin: 0; }
.ddl-main-workspace .ddl-a1b-pairs { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ddl-main-workspace .ddl-a1b-pair {
  display: grid;
  gap: 0.3rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--ddl-c-hairline);
}
.ddl-main-workspace .ddl-a1b-pair:first-child { border-top: 0; }
.ddl-main-workspace .ddl-a1b-pair.is-disagree { box-shadow: inset 3px 0 0 var(--ddl-c-alert); padding-left: 0.7rem; }
.ddl-main-workspace .ddl-a1b-pair-label { margin: 0; color: var(--ddl-c-ink); font-size: 0.9rem; font-weight: 600; }
.ddl-main-workspace .ddl-a1b-pair-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0.3rem 1rem;
  margin: 0;
}
.ddl-main-workspace .ddl-a1b-pair-values > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.3rem 0.55rem;
  border-radius: 8px;
  background: var(--ddl-c-zebra);
}
.ddl-main-workspace .ddl-a1b-pair-values dt { color: var(--ddl-c-muted); font-size: 0.85rem; font-weight: 400; }
.ddl-main-workspace .ddl-a1b-pair-values dd {
  margin: 0;
  color: var(--ddl-c-ink);
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ddl-main-workspace .ddl-a1b-pair-verdict { margin: 0; color: var(--ddl-c-muted); font-size: 0.85rem; }
.ddl-main-workspace .ddl-a1b-pair.is-disagree .ddl-a1b-pair-verdict { color: var(--ddl-c-alert); font-weight: 600; }

.ddl-main-workspace .ddl-a1b-answer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.85rem;
}
.ddl-main-workspace .ddl-a1b-answer strong { color: var(--ddl-c-ink); font-size: 1.15rem; font-weight: 600; }
.ddl-main-workspace .ddl-a1b-answer span { color: var(--ddl-c-muted); font-size: 0.9rem; }

/* overflow-y: hidden because the region has no fixed height, so nothing in it
   ever needs vertical scrolling; without it the visually hidden caption (which
   Blink leaves in flow) makes overflow-y compute to auto and Windows paints a
   full-height scrollbar. A narrow table still spans a readable width, so the
   folds beneath it do not dwarf it. */
.ddl-main-workspace .ddl-a1b-table-region {
  width: fit-content;
  min-width: min(100%, 720px);
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--ddl-c-hairline);
  border-radius: 10px;
  background: var(--ddl-c-card);
  scrollbar-width: thin;
}
.ddl-main-workspace .ddl-a1b-table-region:focus-visible {
  outline: 3px solid var(--ddl-c-focus);
  outline-offset: 2px;
}
.ddl-main-workspace .ddl-a1b-table { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; }
.ddl-main-workspace .ddl-a1b-table :is(th, td) {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--ddl-c-hairline);
  font-size: 0.85rem;
  text-align: left;
  vertical-align: top;
}
.ddl-main-workspace .ddl-a1b-table tbody tr:last-child > :is(th, td) { border-bottom: 0; }
.ddl-main-workspace .ddl-a1b-table thead th { white-space: nowrap; vertical-align: bottom; }
.ddl-main-workspace .ddl-a1b-table thead th.is-num .ddl-a1b-th { justify-content: flex-end; }
.ddl-main-workspace .ddl-a1b-th { display: inline-flex; align-items: center; gap: 0.3rem; }
.ddl-main-workspace .ddl-a1b-table .ddl-a1b-rowhead {
  color: var(--ddl-c-ink);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  min-width: 8rem;
  max-width: 16rem;
}
/* The row header stays in view while the rest of a wide row scrolls. */
.ddl-main-workspace .ddl-a1b-table :is(thead th:first-child, .ddl-a1b-rowhead) {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: inset -1px 0 0 var(--ddl-c-hairline);
}
.ddl-main-workspace .ddl-a1b-table td:not(.is-num) { min-width: 7rem; max-width: 26rem; }
.ddl-main-workspace .ddl-a1b-table tbody tr:nth-child(odd) > th { background: var(--ddl-c-card); }
.ddl-main-workspace .ddl-a1b-table tbody tr:nth-child(even) > th { background: var(--ddl-c-zebra); }
.ddl-main-workspace .ddl-a1b-table tbody tr:hover > th { background: var(--ddl-c-tint); }
.ddl-main-workspace .ddl-a1b-table td.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ddl-main-workspace .ddl-a1b-note { margin: 0; color: var(--ddl-c-muted); font-size: 0.85rem; }
.ddl-main-workspace .ddl-a1b-note.is-phone-only { display: none; }
.ddl-main-workspace .ddl-a1b-table td.is-na { color: var(--ddl-c-muted); }
/* The one control the three Reports panes share reads the same on each. */
.ddl-main-workspace .ddl-a1b-picker :is(.control-label, label) {
  margin-bottom: 0.3rem;
  color: var(--ddl-c-ink);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
/* The partial refusals run under both columns, so neither column trails a void. */
.ddl-main-workspace .ddl-a1b-claims-partial { margin-top: 0.85rem; }
.ddl-main-workspace .ddl-a1b-notes { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; line-height: 1.5; }
.ddl-main-workspace .ddl-a1b-card .ddl-c-trays { margin-top: 0; }

@media (max-width: 720px) {
  .ddl-main-workspace .ddl-a1b-family,
  .ddl-main-workspace .ddl-a1b-claims-col { padding: 0.85rem 0.9rem; }
  .ddl-main-workspace .ddl-a1b-picker { max-width: none; }
  .ddl-main-workspace .ddl-a1b-table :is(th, td) { padding: 0.45rem 0.6rem; }
  /* One scrolling row of contents, so the first card starts on the first screen. */
  .ddl-main-workspace .ddl-a1b-toc {
    flex-wrap: nowrap;
    gap: 0.3rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding: 3px;
    margin: -3px;
  }
  .ddl-main-workspace .ddl-a1b-toc a { flex: 0 0 auto; padding: 0 0.7rem; white-space: nowrap; }
  .ddl-main-workspace .ddl-a1b-table-region.has-phone-cap tbody tr:nth-child(n+11) { display: none; }
  .ddl-main-workspace .ddl-a1b-note.is-wide-only { display: none; }
  .ddl-main-workspace .ddl-a1b-note.is-phone-only { display: block; }
}

@media print {
  .ddl-main-workspace .ddl-a1b-table-region { overflow: visible; border-color: currentColor; }
  .ddl-main-workspace .ddl-a1b-table { min-width: 0; }
  .ddl-main-workspace .ddl-a1b-toc { display: none; }
  .ddl-main-workspace :is(.ddl-a1b-family, .ddl-a1b-claims-col, .ddl-a1b-pair) { break-inside: avoid; }
}
/* ==== [/A1B] ==== */

/* ==== [G1] ==== */
/* The User guide as one printable sheet: a masthead, a section rail beside the
   sheet on a wide screen (a chip row on a phone), then numbered sections
   divided by hairlines rather than stacked cards. Tokens only; the numbers are
   CSS counters, so the page text itself carries no digit. */
.ddl-guide { gap: 1.1rem; }
.ddl-guide-masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
  padding: 1.15rem 1.4rem 1.2rem;
  border: 1px solid var(--ddl-c-hairline, var(--ddl-line));
  border-top: 3px solid var(--ddl-ink);
  border-radius: var(--ddl-r-sm);
  background: var(--ddl-c-card, var(--ddl-paper));
}
.ddl-guide-masthead-text { min-width: 0; max-width: 76ch; }
.ddl-guide-masthead-text p { margin: 0; }
.ddl-guide-masthead-kicker {
  color: var(--ddl-muted);
  font-family: var(--ddl-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ddl-guide-audience {
  margin-top: 0.3rem;
  color: var(--ddl-ink);
  font-family: var(--ddl-display);
  font-size: 1.35rem;
  line-height: 1.25;
}
.ddl-guide-masthead-note { margin-top: 0.35rem; color: var(--ddl-muted); font-size: 0.85rem; }
.ddl-guide-masthead .ddl-guide-print { flex: 0 0 auto; }

/* The rail and the sheet. */
.ddl-guide-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.ddl-guide-layout > * { min-width: 0; }
.ddl-guide-nav a[aria-current="true"] {
  background: color-mix(in srgb, var(--ddl-ink) 8%, var(--ddl-c-card, var(--ddl-paper)));
  box-shadow: inset 3px 0 0 var(--ddl-ink);
}
@media (min-width: 1100px) {
  .ddl-guide-layout { grid-template-columns: 236px minmax(0, 1fr); gap: 1.5rem; }
  .ddl-guide-layout > .ddl-guide-bar {
    position: sticky;
    top: 1rem;
    display: block;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 0.5rem;
  }
  .ddl-guide-bar .ddl-guide-nav ol { flex-direction: column; flex-wrap: nowrap; gap: 0.1rem; }
  .ddl-guide-bar .ddl-guide-nav a {
    display: flex;
    width: 100%;
    padding: 0 0.7rem;
    border-radius: var(--ddl-r-sm);
    font-size: 0.9rem;
    line-height: 1.2;
  }
}

.ddl-guide-sheet {
  counter-reset: ddl-guide-sec;
  border: 1px solid var(--ddl-c-hairline, var(--ddl-line));
  border-radius: var(--ddl-r-md);
  background: var(--ddl-c-card, var(--ddl-paper));
  box-shadow: var(--ddl-shadow-1);
}
.ddl-guide-sheet > .ddl-guide-section {
  counter-increment: ddl-guide-sec;
  padding: 1.7rem 2rem 1.9rem;
  border: 0;
  border-top: 1px solid var(--ddl-c-hairline, var(--ddl-line));
  border-radius: 0;
  background: transparent;
  scroll-margin-top: 0.75rem;
}
.ddl-guide-sheet > .ddl-guide-section:first-child { border-top: 0; }
.ddl-guide-sheet > .ddl-guide-section > h2 { margin: 0 0 0.5rem; font-size: 1.6rem; line-height: 1.15; }
.ddl-guide-sheet > .ddl-guide-section > h2::before {
  content: counter(ddl-guide-sec, decimal-leading-zero);
  display: block;
  margin-bottom: 0.3rem;
  color: var(--ddl-muted);
  font-family: var(--ddl-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}
/* The three workspaces are told apart by a rule in their own hue. */
.ddl-guide-sheet > #tortoise { --ddl-guide-ws: var(--ddl-mauve); }
.ddl-guide-sheet > #invasive { --ddl-guide-ws: var(--ddl-agave); }
.ddl-guide-sheet > #restoration { --ddl-guide-ws: var(--ddl-sky); }
.ddl-guide-sheet > :is(#tortoise, #invasive, #restoration) { box-shadow: inset 4px 0 0 var(--ddl-guide-ws); }

.ddl-guide-sheet .ddl-guide-lede { max-width: 68ch; margin: 0 0 1rem; color: var(--ddl-ink-2); font-size: 0.98rem; line-height: 1.55; }
.ddl-guide-subhead { margin: 1.5rem 0 0.65rem; color: var(--ddl-ink); font-size: 1.02rem; font-weight: 650; }
.ddl-guide-ws-head { display: flex; align-items: flex-start; gap: 0.9rem; }
.ddl-guide-ws-head .ddl-c-plate { flex: 0 0 auto; border-radius: var(--ddl-r-sm); }
.ddl-guide-ws-head .ddl-guide-lede { margin-top: 0.1rem; }

/* The chip on every step. */
.ddl-guide-verb {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 0.55rem;
  border: 1px solid color-mix(in srgb, var(--ddl-ink) 22%, transparent);
  border-radius: var(--ddl-r-pill);
  background: var(--ddl-c-canvas, var(--ddl-bg));
  color: var(--ddl-ink-2);
  font-family: var(--ddl-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Before anything else: the four facts. */
.ddl-guide-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ddl-guide-fact;
}
.ddl-guide-fact {
  counter-increment: ddl-guide-fact;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.8rem;
  row-gap: 0.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ddl-c-hairline, var(--ddl-line));
  border-radius: var(--ddl-r-sm);
  background: var(--ddl-c-canvas, var(--ddl-bg));
}
.ddl-guide-fact::before {
  content: counter(ddl-guide-fact);
  grid-row: span 2;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ddl-ink);
  color: var(--ddl-paper);
  font-family: var(--ddl-mono);
  font-size: 0.74rem;
}
.ddl-guide-fact-lead { color: var(--ddl-ink); font-size: 0.98rem; }
.ddl-guide-fact-text { color: var(--ddl-ink-2); font-size: 0.92rem; line-height: 1.5; }

/* Numbered flows: the first five minutes, a download. */
.ddl-guide-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ddl-guide-step;
}
.ddl-guide-flow-step {
  counter-increment: ddl-guide-step;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.95rem 1rem 1rem;
  border: 1px solid var(--ddl-c-hairline, var(--ddl-line));
  border-top: 2px solid var(--ddl-ink);
  border-radius: var(--ddl-r-xs) var(--ddl-r-xs) var(--ddl-r-sm) var(--ddl-r-sm);
  background: var(--ddl-c-card, var(--ddl-paper));
}
.ddl-guide-flow-head { display: flex; align-items: center; gap: 0.5rem; }
.ddl-guide-flow-head::before {
  content: counter(ddl-guide-step);
  color: var(--ddl-ink);
  font-family: var(--ddl-display);
  font-size: 1.6rem;
  line-height: 1;
}
.ddl-guide-flow-text { margin: 0; color: var(--ddl-ink-2); font-size: 0.92rem; line-height: 1.5; }
.ddl-guide-flow + .ddl-guide-doors { margin-top: 0.9rem; }

/* Links that go somewhere: pills, 44px. */
.ddl-guide-doors { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 0; }
.ddl-guide-go,
.ddl-guide-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid color-mix(in srgb, var(--ddl-ink) 22%, transparent);
  border-radius: var(--ddl-r-pill);
  background: var(--ddl-c-card, var(--ddl-paper));
  color: var(--ddl-ink);
  font-size: 0.88rem;
  font-weight: 650;
  text-decoration: none;
}
.ddl-guide-go::after,
.ddl-guide-contact::after { content: "\2192"; color: var(--ddl-muted); }
.ddl-guide-go:hover,
.ddl-guide-contact:hover { border-color: var(--ddl-ink-2); background: color-mix(in srgb, var(--ddl-ink) 5%, var(--ddl-c-card, var(--ddl-paper))); color: var(--ddl-ink); }

/* The router's extra groups. */
.ddl-guide-router tr.ddl-guide-router-negative td:first-child { color: var(--ddl-ink-2); }
.ddl-guide-router-no { display: inline-block; max-width: 52ch; color: var(--ddl-ink-2); white-space: normal; }
.ddl-guide-router td:last-child:has(.ddl-guide-router-no) { white-space: normal; }

/* A workspace's pages: step, page, use. */
.ddl-guide-pages { width: 100%; border-collapse: collapse; counter-reset: ddl-guide-page; font-size: 0.92rem; }
.ddl-guide-pages thead th {
  padding: 0 0.7rem 0.45rem;
  border-bottom: 1px solid var(--ddl-c-hairline, var(--ddl-line));
  color: var(--ddl-muted);
  font-family: var(--ddl-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}
.ddl-guide-pages tbody tr { counter-increment: ddl-guide-page; }
.ddl-guide-pages tbody :is(td, th) {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--ddl-c-hairline, var(--ddl-line));
  text-align: left;
  vertical-align: top;
}
.ddl-guide-pages tbody tr:last-child :is(td, th) { border-bottom: 0; }
.ddl-guide-pages-step { width: 8.5rem; white-space: nowrap; }
.ddl-guide-pages-step::before {
  content: counter(ddl-guide-page);
  display: inline-block;
  width: 1.3rem;
  color: var(--ddl-guide-ws, var(--ddl-ink));
  font-family: var(--ddl-mono);
  font-size: 0.8rem;
  font-weight: 700;
}
.ddl-guide-pages-page { width: 11rem; font-weight: 650; }
.ddl-guide-pages-page a { display: inline-flex; align-items: center; min-height: 24px; color: var(--ddl-ink); text-underline-offset: 3px; }
.ddl-guide-pages-use { color: var(--ddl-ink-2); line-height: 1.5; }

/* Walk-throughs: the kit's fold, prose steps inside. */
.ddl-guide-walks { display: grid; gap: 0.5rem; }
.ddl-guide-walks .ddl-guide-walk { margin: 0; }
.ddl-guide-steps { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.5rem; max-width: 76ch; }
.ddl-guide-steps li { padding-left: 0.2rem; line-height: 1.55; }
.ddl-guide-steps li::marker { color: var(--ddl-muted); font-family: var(--ddl-mono); font-size: 0.8rem; }
.ddl-guide-sheet strong { color: var(--ddl-ink); font-weight: 650; }

/* How to read ...: an inset note under the walk-throughs. */
.ddl-guide-read {
  margin-top: 1rem;
  padding: 0.95rem 1.15rem 1rem;
  border-left: 3px solid var(--ddl-guide-ws, var(--ddl-ink-2));
  border-radius: 0 var(--ddl-r-sm) var(--ddl-r-sm) 0;
  background: var(--ddl-c-canvas, var(--ddl-bg));
}
.ddl-guide-read-title {
  margin: 0 0 0.4rem;
  color: var(--ddl-ink);
  font-size: 0.95rem;
  font-weight: 650;
}
.ddl-guide-read p { max-width: 72ch; margin: 0 0 0.45rem; color: var(--ddl-ink-2); font-size: 0.92rem; line-height: 1.55; }
.ddl-guide-read p:last-child { margin-bottom: 0; }

/* Plain lists of points. */
.ddl-guide-points { display: grid; gap: 0.5rem; max-width: 76ch; margin: 0; padding-left: 1.2rem; }
.ddl-guide-points li { line-height: 1.55; }
.ddl-guide-points li::marker { color: var(--ddl-muted); }

/* If a page misbehaves: a condition chip, one response. */
.ddl-guide-cases { display: grid; gap: 0; margin: 0; }
.ddl-guide-case {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: 0.5rem 1.2rem;
  align-items: start;
  padding: 0.8rem 0;
  border-top: 1px solid var(--ddl-c-hairline, var(--ddl-line));
}
.ddl-guide-case:first-child { border-top: 0; padding-top: 0.2rem; }
.ddl-guide-case dt, .ddl-guide-case dd { margin: 0; }
.ddl-guide-case dd { max-width: 72ch; color: var(--ddl-ink-2); line-height: 1.55; }
.ddl-guide-case-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 32px;
  padding: 0.2rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--ddl-sky) 45%, transparent);
  border-radius: var(--ddl-r-pill);
  background: color-mix(in srgb, var(--ddl-sky) 9%, var(--ddl-c-card, var(--ddl-paper)));
  color: var(--ddl-ink);
  font-size: 0.88rem;
  font-weight: 650;
}
.ddl-guide-case-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ddl-sky);
}

.ddl-guide-colophon {
  margin: 0;
  padding: 0.9rem 2rem 1.1rem;
  border-top: 1px dashed var(--ddl-c-hairline, var(--ddl-line));
  color: var(--ddl-muted);
  font-size: 0.85rem;
}

/* About: the way into the guide and the context sources. */
.ddl-about-guide-link { margin-top: 0.35rem; }
.ddl-about-source-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 0.9rem 2rem;
  margin: 0.6rem 0 0.9rem;
}
.ddl-about-source-list > div { padding-top: 0.6rem; border-top: 1px solid var(--ddl-c-hairline, var(--ddl-line)); }
.ddl-about-source-list dt { color: var(--ddl-ink); font-weight: 650; }
.ddl-about-source-list dd { margin: 0.1rem 0 0; color: var(--ddl-ink-2); line-height: 1.5; }
.ddl-about-source-credit { color: var(--ddl-muted); font-size: 0.88rem; }

@media (max-width: 1099px) {
  .ddl-guide-case { grid-template-columns: 14rem minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ddl-guide-masthead { padding: 0.95rem 1rem 1rem; }
  .ddl-guide-audience { font-size: 1.15rem; }
  .ddl-guide-masthead .ddl-guide-print { width: 100%; }
  /* The nav is one row of chips that scrolls inside itself. */
  .ddl-guide-layout > .ddl-guide-bar { display: block; padding: 0.35rem 0; }
  .ddl-guide-bar .ddl-guide-nav { width: 100%; min-width: 0; }
  .ddl-guide-bar .ddl-guide-nav ol {
    flex-wrap: nowrap;
    gap: 0.35rem;
    padding: 0 0.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .ddl-guide-bar .ddl-guide-nav ol::-webkit-scrollbar { display: none; }
  /* The chip row stays in view on a long phone page, so a deep link lands
     with the way round the guide still on screen. */
  .ddl-guide-layout > .ddl-guide-bar {
    position: sticky; top: 0; z-index: 2;
    background: var(--ddl-c-canvas, var(--ddl-bg));
  }
  .ddl-guide-sheet > .ddl-guide-section { scroll-margin-top: 3.5rem; }
  .ddl-guide-bar .ddl-guide-nav li { flex: 0 0 auto; scroll-snap-align: start; }
  .ddl-guide-bar .ddl-guide-nav a {
    border: 1px solid color-mix(in srgb, var(--ddl-ink) 18%, transparent);
    background: var(--ddl-c-card, var(--ddl-paper));
    white-space: nowrap;
  }
  .ddl-guide-nav a[aria-current="true"] { box-shadow: none; border-color: var(--ddl-ink); }
  .ddl-guide-sheet > .ddl-guide-section { padding: 1.2rem 1rem 1.35rem; }
  .ddl-guide-sheet > :is(#tortoise, #invasive, #restoration) { box-shadow: inset 3px 0 0 var(--ddl-guide-ws); }
  .ddl-guide-sheet > .ddl-guide-section > h2 { font-size: 1.35rem; }
  .ddl-guide-facts { grid-template-columns: minmax(0, 1fr); }
  .ddl-guide-flow { grid-template-columns: minmax(0, 1fr); }
  .ddl-guide-doors .ddl-guide-go { flex: 1 1 100%; justify-content: space-between; }
  /* Pages as cards: step and page on one line, the use beneath. */
  .ddl-guide-pages thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .ddl-guide-pages, .ddl-guide-pages tbody { display: block; width: 100%; }
  .ddl-guide-pages tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.25rem 0.6rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--ddl-c-hairline, var(--ddl-line));
  }
  .ddl-guide-pages tbody tr:last-child { border-bottom: 0; }
  .ddl-guide-pages tbody :is(td, th) { display: block; width: auto; padding: 0; border: 0; }
  .ddl-guide-pages-use { grid-column: 1 / -1; font-size: 0.9rem; }
  .ddl-guide-pages-page a { min-height: 44px; }
  .ddl-guide-case { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .ddl-guide-colophon { padding: 0.85rem 1rem 1rem; }
}

/* Flows fill whole rows: never a lone card on a row of its own. */
@media (min-width: 900px) {
  .ddl-guide-flow.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 721px) {
  .ddl-guide-flow.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media screen and (min-width: 721px) and (max-width: 899px) {
  .ddl-guide-flow.is-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ddl-guide-flow.is-five > li:last-child { grid-column: 1 / -1; }
}
/* The router is a full-width table (a list on a phone): it never scrolls. */
.ddl-guide-router-scroll { overflow: visible; }

/* Print: the sheet alone, every fold open, each workspace on a fresh page. */
@page ddl-guide { margin: 14mm 14mm 16mm; }
@media print {
  /* The named page covers the whole document: a change of named page would
     force a break before the guide and after it. */
  body:has(.ddl-guide) { page: ddl-guide; }
  .ddl-guide { gap: 0.6rem; }
  .ddl-guide-print { display: none; }
  .ddl-guide-masthead { padding: 0 0 0.6rem; border: 0; border-bottom: 2px solid var(--ddl-ink); border-radius: 0; }
  .ddl-guide-layout { display: block; }
  .ddl-guide-sheet { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .ddl-guide-sheet > .ddl-guide-section {
    padding: 0.9rem 0 1rem;
    break-inside: auto;
    box-shadow: none;
  }
  .ddl-guide-sheet > :is(#tortoise, #invasive, #restoration) {
    break-before: page;
    border-top: 0;
    border-left: 3px solid var(--ddl-guide-ws);
    padding-left: 0.8rem;
  }
  .ddl-guide-sheet > .ddl-guide-section > h2 { break-after: avoid; font-size: 1.35rem; }
  .ddl-guide-subhead, .ddl-guide-read-title { break-after: avoid; }
  :is(.ddl-guide-fact, .ddl-guide-flow-step, .ddl-guide-walk, .ddl-guide-read, .ddl-guide-case,
      .ddl-guide-pages tr, .ddl-guide-router tr) { break-inside: avoid; }
  .ddl-guide-flow { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .ddl-guide-flow.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ddl-guide-flow.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Folds print open: the content slot of a closed <details> is shown, and
     app.js opens each fold for the print cycle where this is not honoured. */
  .ddl-guide details::details-content { content-visibility: visible; display: block; }
  .ddl-guide details > summary { min-height: 0; background: transparent; border-bottom: 0; }
  .ddl-guide details .ddl-c-fold-chev { display: none; }
  .ddl-guide details.ddl-c-fold { border-color: var(--ddl-c-hairline, var(--ddl-line)); }
  .ddl-guide-go::after, .ddl-guide-contact::after { content: none; }
  .ddl-guide-doors { display: none; }
  .ddl-guide-contact::before { content: attr(href) " \00b7 "; font-weight: 400; }
  .ddl-about-guide-link { display: none; }
}
/* ==== [/G1] ==== */

/* ==== [C1] ==== */
/* The cover's doors, reach and utilities; the Start polish. Tokens only:
   every colour is a root token, a mix of one, or an rgba of the cover's own
   night-desk values. Motion lives inside the ddl-motion-ok gate and stops
   under reduced motion; every message it carries is also a static state. */

/* ---- the instrument: the night desk fills the viewport on a desktop ------ */
/* A floor, not a fixed height: on a short screen the desk grows with the
   rail's doors (the map sheet stretches with the row), so the rail never
   scrolls inside itself and no door is cut off. The rail keeps 400px so the
   open bar fits on one line at every desktop width. */
@media (min-width: 901px) {
  .ddl-minimal-cover {
    height: auto;
    min-height: clamp(560px, calc(100svh - 120px), 1400px);
    grid-template-columns: clamp(400px, 27vw, 440px) minmax(0, 1fr);
  }
  /* The map takes the row's height and never sets it: its drawing would
     otherwise ask for its full aspect-ratio height and push the doors down. */
  .ddl-minimal-cover > .ddl-field-map { contain: size; }
  .ddl-minimal-cover-doors { gap: 0.95rem; padding: 0 10px 12px 0; }
}
/* A short laptop screen: the name sets on one line and the doors close up,
   so all three doors sit on the first screen. */
@media (min-width: 901px) and (max-height: 800px) {
  .ddl-minimal-cover-title { max-width: none; font-size: clamp(2.4rem, 3.4vw, 3rem); }
  .ddl-minimal-cover-index { margin-top: 1rem; }
  .ddl-minimal-cover-doors { gap: 0.7rem; }
  .ddl-minimal-cover-door { min-height: 96px; }
}

/* ---- the doors: lifted paper sheets with a filled open bar ---------------- */
.ddl-minimal-cover-door {
  box-shadow:
    7px 9px 0 color-mix(in srgb, var(--ddl-accent) 30%, transparent),
    0 12px 30px rgba(11, 7, 14, 0.26),
    inset 0 1px rgba(255, 255, 255, 0.6);
}
.ddl-minimal-cover-door:focus-visible {
  outline: 3px solid var(--ddl-c-focus-dark, var(--ddl-paper));
  outline-offset: 2px;
  box-shadow:
    10px 12px 0 color-mix(in srgb, var(--ddl-accent) 38%, transparent),
    0 18px 38px rgba(11, 7, 14, 0.34),
    inset 0 1px rgba(255, 255, 255, 0.62);
}
.ddl-minimal-cover-door-foot {
  flex-direction: column; align-items: stretch; justify-content: flex-end;
  gap: 0.55rem;
}
.ddl-minimal-cover-door-name { font-size: clamp(1.05rem, 1.5vw, 1.3rem); }
.ddl-cover-open-bar {
  position: relative; z-index: 1;
  min-height: 44px; display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; padding: 0 0.85rem;
  border-radius: 2px;
  color: var(--ddl-paper); background: var(--ddl-ink);
  font-size: 0.82rem; font-weight: 680; letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: inset 0 -2px color-mix(in srgb, var(--ddl-accent) 70%, transparent);
}
.ddl-cover-open-arrow { font-size: 1.05rem; line-height: 1; }
.ddl-minimal-cover-door:is(:hover, :focus-visible) .ddl-cover-open-bar,
.ddl-minimal-cover-door.is-opening .ddl-cover-open-bar {
  background: color-mix(in srgb, var(--ddl-accent) 82%, var(--ddl-ink));
}
/* The press acknowledgement names itself on the bar, so the shared chrome's
   trailing note would say it twice. */
.ddl-minimal-cover-door .ddl-c-opening { display: none; }
.ddl-minimal-cover-door.is-opening { cursor: progress; }

/* ---- the reach: glow, trail lift and the dormant runner --------------------
   At rest on a pointer screen the trail network is a whisper, so the doors are
   the brightest things on the desk. Reaching for a door or the map lifts the
   WHOLE network and glows the whole outline; no place is singled out. A touch
   screen cannot reach, so it keeps the lifted state. */
.ddl-field-trail { opacity: 0.6; }
.ddl-field-glow {
  stroke: rgba(225, 188, 103, 0.9); stroke-width: 11;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; fill: none;
  opacity: 0; filter: blur(5px);
}
.ddl-field-runner { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ddl-field-trail { opacity: 0.14; }
  /* The names rest with the lines they name, so no label floats over a
     trail the reader cannot see. */
  .ddl-field-trail-labels { opacity: 0.55; }
}
.ddl-minimal-cover:has(.ddl-minimal-cover-door:is(:hover, :focus-visible, .is-opening)) .ddl-field-trail,
.ddl-minimal-cover:has(.ddl-field-map-sheet:hover) .ddl-field-trail { opacity: 0.6; }
.ddl-minimal-cover:has(.ddl-minimal-cover-door:is(:hover, :focus-visible, .is-opening)) .ddl-field-trail-labels,
.ddl-minimal-cover:has(.ddl-field-map-sheet:hover) .ddl-field-trail-labels { opacity: 1; }
.ddl-minimal-cover:has(.ddl-minimal-cover-door:is(:hover, :focus-visible, .is-opening)) .ddl-field-glow,
.ddl-minimal-cover:has(.ddl-field-map-sheet:hover) .ddl-field-glow { opacity: 0.55; }

@media (prefers-reduced-motion: no-preference) {
  html.ddl-motion-ok .ddl-field-trail { transition: opacity 420ms ease; }
  html.ddl-motion-ok .ddl-field-glow { transition: opacity 420ms ease; }
  html.ddl-motion-ok .ddl-field-trail-labels { transition: opacity 420ms ease; }
  html.ddl-motion-ok .ddl-cover-open-bar { transition: background-color 180ms ease; }
  html.ddl-motion-ok .ddl-minimal-cover-door:hover {
    box-shadow:
      10px 12px 0 color-mix(in srgb, var(--ddl-accent) 38%, transparent),
      0 18px 38px rgba(11, 7, 14, 0.34),
      inset 0 1px rgba(255, 255, 255, 0.62);
  }
  html.ddl-motion-ok .ddl-cover-open-arrow { transition: transform 180ms cubic-bezier(.2, .8, .2, 1); }
  html.ddl-motion-ok .ddl-minimal-cover-door:is(:hover, :focus-visible) .ddl-cover-open-arrow {
    transform: translateX(3px);
  }
  /* The runner: one short dash that sweeps the outline, dormant until a
     reader reaches. Backwards fill holds its first frame through the delay,
     so it never paints before the outline has drawn. */
  html.ddl-motion-ok .ddl-field-runner {
    display: inline;
    stroke: rgba(244, 236, 223, 0.95); stroke-width: 2.6; stroke-linecap: round;
    vector-effect: non-scaling-stroke; fill: none;
    stroke-dasharray: 0.014 0.986; stroke-dashoffset: 1;
    opacity: 0.1;
    transition: opacity 420ms ease;
    animation: ddl-c1-runner 18s 1.3s linear infinite backwards;
  }
  html.ddl-motion-ok .ddl-minimal-cover:has(.ddl-minimal-cover-door:is(:hover, :focus-visible, .is-opening)) .ddl-field-runner,
  html.ddl-motion-ok .ddl-minimal-cover:has(.ddl-field-map-sheet:hover) .ddl-field-runner { opacity: 0.9; }
  html.ddl-motion-ok .ddl-minimal-cover-door.is-opening .ddl-cover-open-bar {
    background-image: linear-gradient(90deg, transparent 0%, rgba(255, 253, 248, 0.16) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: ddl-c1-opening 1.1s linear infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ddl-field-runner { display: none; animation: none; }
  .ddl-field-glow, .ddl-field-trail, .ddl-field-trail-labels, .ddl-cover-open-bar { transition: none; }
}
@keyframes ddl-c1-runner { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ddl-c1-opening { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---- the cover header: posture chip and the User guide pill --------------- */
.ddl-cover-utils { display: flex; align-items: center; gap: 0.6rem; }
.ddl-cover-posture {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 32px; margin: 0; padding: 0.2rem 0.65rem;
  border: 1px solid var(--ddl-line); border-radius: 2px;
  color: var(--ddl-ink-2);
  background: var(--ddl-paper);
  font-family: var(--ddl-mono); font-size: 0.68rem; font-weight: 650;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.ddl-cover-posture-ico { color: var(--ddl-muted); flex: 0 0 auto; }
/* A rounded pill, unlike the square disabled Sign in beside it: the guide is
   the one live control in the header. */
.ddl-header-cover .ddl-c-guide,
.ddl-cover-foot .ddl-c-guide {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 1.1rem;
  border: 1px solid rgba(43, 35, 52, 0.3); border-radius: 999px;
  color: var(--ddl-ink);
  background: var(--ddl-paper);
  font-size: 0.9rem; font-weight: 650;
  text-decoration: none; white-space: nowrap;
}
.ddl-header-cover .ddl-c-guide:hover,
.ddl-cover-foot .ddl-c-guide:hover {
  color: var(--ddl-ink); border-color: var(--ddl-gold);
  background: color-mix(in srgb, var(--ddl-gold) 12%, var(--ddl-paper));
}
.ddl-header-cover .ddl-c-guide:focus-visible,
.ddl-cover-foot .ddl-c-guide:focus-visible,
.ddl-cover-foot a:focus-visible {
  outline: 3px solid var(--ddl-sky); outline-offset: 2px;
}
@media (max-width: 1100px) { .ddl-cover-posture { display: none; } }
@media (max-width: 720px) { .ddl-cover-utils { display: none; } }

/* ---- the slim cover footer -------------------------------------------------- */
.ddl-cover-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1.4rem;
  margin: 1rem 0 1.4rem; padding-top: 0.75rem;
  border-top: 1px solid var(--ddl-line);
  color: var(--ddl-muted); font-size: 0.85rem; line-height: 1.4;
}
.ddl-cover-foot-credits {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; margin: 0; min-width: 0;
}
.ddl-cover-foot-credit { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.4em; }
.ddl-cover-foot-lead {
  font-family: var(--ddl-mono); font-size: 0.68rem; font-weight: 650;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.ddl-cover-foot-credit a {
  color: var(--ddl-ink-2); text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--ddl-gold) 60%, transparent);
}
.ddl-cover-foot-credit a:hover { color: var(--ddl-ink); text-decoration-color: var(--ddl-gold); }
.ddl-cover-foot-end { display: flex; align-items: center; gap: 1rem; }
.ddl-cover-foot-maker {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--ddl-ink); font-family: var(--ddl-display); font-size: 0.95rem;
}
.ddl-cover-foot-mark { flex: 0 0 auto; fill: none; }
.ddl-cover-foot-mark rect { stroke: currentColor; stroke-width: 1.3; opacity: 0.7; }
.ddl-cover-foot-mark path { stroke: var(--ddl-gold); stroke-width: 1.8; stroke-linecap: round; }
@media (max-width: 720px) {
  .ddl-cover-foot { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .ddl-cover-foot-credits { flex-direction: column; gap: 0.35rem; line-height: 1.75; }
  .ddl-cover-foot-credit { display: block; }
  .ddl-cover-foot-lead { display: block; line-height: 1.4; }
}

/* ---- the phone cover: doors first, a legible north arrow and scale ------- */
@media (max-width: 767px) {
  .ddl-minimal-cover-door { min-height: 136px; }
  .ddl-minimal-cover-door-foot { padding-bottom: 0.85rem; }
}
@media (max-width: 380px) {
  .ddl-minimal-cover-door { grid-template-columns: 92px minmax(0, 1fr); column-gap: 0.7rem; }
  .ddl-minimal-cover-plate { width: 92px; }
  .ddl-minimal-cover-door-foot { padding-right: 0.6rem; }
  .ddl-cover-open-bar { gap: 0.4rem; padding: 0 0.6rem; font-size: 0.78rem; }
}
@media (max-width: 720px) {
  .ddl-field-north { transform: scale(2.4); transform-origin: 650px 104px; }
  .ddl-field-north path, .ddl-field-scale path { stroke-width: 2.4; }
  .ddl-field-scale text { font-size: 24px; transform: translateY(12px); }
}
/* The map sheet's credit line: each credit stays whole and wraps as a unit,
   so a narrow sheet never breaks an agency name or a licence in two. */
.ddl-field-map-source { flex-wrap: wrap; row-gap: 0.1rem; }
.ddl-field-map-source > * { white-space: nowrap; }

/* ---- Start: the fifth card, the resume chip, the phone plate strip -------- */
.ddl-main-workspace :is(.ddl-tor-start-grid, .ddl-inv-product-start-grid, .ddl-rst-product-start-grid)
  > .ddl-start-task-wide {
  grid-column: 1 / -1; min-height: 92px;
}
.ddl-resume-slot:not([hidden]) {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem;
  margin: 0 0 0.85rem; padding: 0.2rem 0.3rem 0.2rem 0.85rem;
  border: 1px solid var(--ddl-c-hairline);
  border-left: 3px solid var(--ddl-c-accent);
  border-radius: 8px;
  background: var(--ddl-c-card);
  font-size: 0.9rem;
}
.ddl-resume-note { color: var(--ddl-c-muted); }
.ddl-resume-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ddl-c-accent-ink); font-weight: 680;
  text-underline-offset: 0.2em;
}
.ddl-resume-dismiss {
  margin-left: auto; min-height: 44px; padding: 0 0.95rem;
  border: 1px solid var(--ddl-c-hairline); border-radius: 999px;
  color: var(--ddl-c-muted); background: transparent;
  font-size: 0.85rem; font-weight: 620;
}
.ddl-resume-dismiss:hover { color: var(--ddl-c-ink); background: var(--ddl-c-tint); }
.ddl-resume-link:focus-visible, .ddl-resume-dismiss:focus-visible {
  outline: 3px solid var(--ddl-c-focus); outline-offset: 2px;
}
/* On a phone the note becomes an eyebrow line, so the link and Dismiss
   share one row instead of Dismiss falling to a row of its own. */
@media (max-width: 600px) {
  .ddl-resume-note {
    flex: 1 0 100%; padding-top: 0.5rem;
    font-family: var(--ddl-mono); font-size: 0.7rem; font-weight: 650;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
}
/* On a phone the plate sits beside the page title as a small engraved
   square, so the first card stays inside the first screen. */
@media (max-width: 900px) {
  .ddl-main-workspace :is(.ddl-tor-start-page, .ddl-inv-product-start, .ddl-rst-product-start) {
    display: grid; grid-template-columns: minmax(0, 1fr) 84px;
    column-gap: 0.8rem; align-items: start;
  }
  .ddl-main-workspace :is(.ddl-tor-start-page, .ddl-inv-product-start, .ddl-rst-product-start) > * {
    grid-column: 1 / -1; min-width: 0;
  }
  .ddl-main-workspace :is(.ddl-tor-start-page, .ddl-inv-product-start, .ddl-rst-product-start)
    > :is(.ddl-tor-route-head, .ddl-inv-product-route-head, .ddl-rst-product-route-head) {
    grid-column: 1; grid-row: 1;
  }
  .ddl-main-workspace :is(.ddl-tor-start-page, .ddl-inv-product-start, .ddl-rst-product-start)
    > .ddl-start-plate-figure {
    grid-column: 2; grid-row: 1; align-self: start;
    display: block; float: none;
    width: 84px; height: 84px; margin: 0.3rem 0 0;
    border-radius: 12px; overflow: hidden;
    box-shadow: none;
  }
  .ddl-main-workspace :is(.ddl-tor-start-page, .ddl-inv-product-start, .ddl-rst-product-start)
    > .ddl-start-plate-figure img {
    width: 100%; height: 100%; object-fit: cover; margin: 0;
  }
}
/* ==== [/C1] ==== */
/* ==== [P1] polish: phone folds, the Survival facet row, the route sweep ==== */
/* A phone fold (p1_phone_fold) reads as plain content on a wide screen: open,
   no box, no summary. Closed (only a phone closes it) it is an ordinary fold,
   so its summary can always open it again. */
@media (min-width: 721px) {
  .ddl-c-fold.ddl-p1-fold[open] { margin: 0; background: none; border: 0; border-radius: 0; }
  .ddl-c-fold.ddl-p1-fold[open] > summary { display: none; }
  .ddl-c-fold.ddl-p1-fold[open] > .ddl-c-fold-body { padding: 0; font-size: inherit; }
}
@media (max-width: 720px) {
  .ddl-c-fold.ddl-p1-fold { margin: 0.2rem 0 0; }
  .ddl-c-fold.ddl-p1-fold > .ddl-c-fold-body { padding: 0.7rem 0.6rem 0.75rem; }

  /* The six Survival facets: one row that scrolls sideways, each chart at
     full reading size with the next one showing at the edge, instead of six
     charts stacked a phone screen and a half deep. */
  .ddl-rst-product-sv-facets {
    display: flex; gap: 0.7rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 2px;
    margin: 0 -0.2rem; padding: 2px 0.2rem 0.6rem;
  }
  .ddl-rst-product-sv-facets > .ddl-rst-product-sv-facet {
    flex: 0 0 86%; scroll-snap-align: start;
  }
  .ddl-rst-product-sv-facets:focus-visible {
    outline: 3px solid var(--ddl-c-focus); outline-offset: 2px; border-radius: 10px;
  }
}
@media print {
  .ddl-rst-product-sv-facets { display: grid; overflow: visible; }
}
.ddl-p1-swipe-hint { display: none; }
@media (max-width: 720px) {
  .ddl-p1-swipe-hint {
    display: block; margin: -0.2rem 0 0.5rem; color: var(--ddl-c-muted); font-size: 0.85rem;
  }
}

/* Sweep: the two Restoration table folds ("Survival values", the Map ledger)
   drew their summary at 0.74rem, smaller than every card title around them. */
.ddl-rst-product-card:is(.ddl-rst-product-survival-table, .ddl-rst-product-map-ledger) > summary,
.ddl-inv-product-card:is(.ddl-inv-product-map-ledger, .ddl-inv-product-orientation) > summary {
  font-size: 0.92rem;
}
/* Sweep: the plain record tables on Restoration (Record preparation) and the
   Invasive Plant overview set their cells at 0.68 to 0.74rem, under the
   0.85rem every other table cell reads at. */
.ddl-main-workspace :is(.ddl-rst-product-table-scroll, .ddl-inv-product-table-scroll) td {
  font-size: 0.85rem;
}

/* Sweep: the Animals title sits one wrapper deeper than every other working
   route's, so the shared title measure (2.1rem, 1.6rem on a phone) and its
   plain foot missed it: it drew at 3rem with an underline of its own. */
.ddl-main-workspace .ddl-tor-route-copy > .ddl-tor-dos-title > h1 {
  font-family: var(--ddl-display); font-size: 2.1rem; font-weight: 400;
  line-height: 1.08; letter-spacing: -0.015em;
}
.ddl-main-workspace .ddl-tor-route-copy > .ddl-tor-dos-title > h1::after { display: none; }

/* Sweep: the Animals roster's search is the table's own filter; it drew as a
   bare white box under a 0.68rem "Search:". It now reads like the search
   boxes on the other two registers. */
.ddl-main-workspace .ddl-tor-dos-roster .ddl-tor-dt-top label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--ddl-c-ink); font-size: 0.88rem; font-weight: 600;
}
.ddl-main-workspace .ddl-tor-dos-roster .ddl-tor-dt-top input {
  min-height: 44px; min-width: 16rem; margin: 0; padding: 0 0.75rem;
  border: 1px solid var(--ddl-k-line); border-radius: 8px;
  background: var(--ddl-k-card); color: var(--ddl-c-ink); font-size: 0.95rem;
}

/* Sweep: the Tortoise Action center printed the table's own "Showing 1 to 10
   of 24 entries" under a status line that already names the count and page;
   the other two Action centers print the status line alone. */
.ddl-tor-action-page .dataTables_info { display: none; }

@media (max-width: 720px) {
  .ddl-main-workspace .ddl-tor-dos-roster .ddl-tor-dt-top { justify-content: stretch; }
  .ddl-main-workspace .ddl-tor-dos-roster .ddl-tor-dt-top :is(.dataTables_filter, label) { width: 100%; }
  .ddl-main-workspace .ddl-tor-dos-roster .ddl-tor-dt-top input { flex: 1 1 auto; min-width: 0; }
  .ddl-main-workspace .ddl-tor-route-copy > .ddl-tor-dos-title > h1 { font-size: 1.6rem; }

  /* Sweep: on a phone the Invasive and Restoration maps come before their
     picker (the map is the page); Movement kept its picker first, a screen
     above its map. Same order now: map, picker, map controls, ledgers. */
  .ddl-main-workspace .ddl-tor-movement-page > .ddl-tor-move-grid { display: contents; }
  .ddl-tor-movement-page > .ddl-tor-move-grid > .ddl-tor-move-card { order: 1; }
  .ddl-tor-movement-page > .ddl-tor-context { order: 2; margin: 0.75rem 0; }
  .ddl-tor-movement-page > .ddl-tor-move-grid > .ddl-tor-move-rail { order: 3; }
  .ddl-tor-movement-page > details { order: 4; }
}
/* ==== [/P1] ==== */