/* ClearTrust — chrome around the three interactive diagrams.
   Product, not review scaffolding: it survives the bake.

   Classes, not inline styles, on purpose: ct-mobile.css overrides the pages'
   inline declarations by matching their literal text, and a diagram wrapper
   written inline would be caught by rules meant for the copy (font-size:24px,
   display:grid, padding:34px ...). Nothing here sets a hex value; every colour
   is a --ct-* token the site already owns, or one of the two --dg-* names below.

   Load order: after ct-diagram-bridge.css, which declares the --ct-font-*,
   --ct-accent-label and --ct-diagram-* names the diagrams read. */

/* The two page-local ink names the design references declare in their own
   style block. Route / control ink is the movement colour (via the bridge's
   --ct-accent-label); structure lines take the quiet text value. The
   references switch --dg-line to --ct-stroke under a dark mode attribute; this
   site has no mode attribute, each palette is one mode, so one value stands. */
:root {
  --dg-route: var(--ct-accent-label);
  --dg-line: var(--ct-text-quiet);
}

.ct-dg { min-width: 0; }

.ct-dg-kicker { margin: 0 0 22px; }
.ct-dg-eyebrow {
  font-family: var(--ct-f-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dg-route);
}
.ct-dg-headline {
  font-family: var(--ct-f-display); font-size: 24px; line-height: 1.3;
  color: var(--ct-text); margin-top: 6px; max-width: 760px; text-wrap: pretty;
}

/* lens strip: real buttons; the active one is filled */
.ct-dg-modes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.ct-dg-lenses[hidden], .ct-dg-view[hidden], .ct-dg-modes[hidden], .ct-dg-sub[hidden] { display: none !important; }
[data-ct-mode] .ct-dg-priorities { margin-top: 0; }
.ct-dg-result-line { font-family: var(--ct-f-text); font-size: 14.5px; line-height: 1.6; color: var(--ct-text); margin: 0 0 8px; }
.ct-dg-result-line b { font-weight: 600; }
.ct-dg-lenses, .ct-dg-priorities {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 22px;
}
.ct-dg-priorities[hidden] { display: none; }
.ct-dg-lenses + .ct-dg-priorities { margin-top: -10px; }
.ct-dg-lens, .ct-dg-pill {
  font-family: var(--ct-f-text); font-size: 12.5px; line-height: 1.2;
  padding: 10px 16px; border-radius: 8px; border: 1px solid var(--ct-rule);
  background: var(--ct-surface-raised); color: var(--ct-text-quiet);
  cursor: pointer; white-space: nowrap; margin: 0;
  transition: color .2s, border-color .2s, background .2s;
}
.ct-dg-pill { font-size: 12px; padding: 7px 13px; border-radius: 999px; }
.ct-dg-lens:hover, .ct-dg-pill:hover { color: var(--ct-text); border-color: var(--ct-rule-strong); }
.ct-dg-lens:focus-visible, .ct-dg-pill:focus-visible, .ct-dg-canvas:focus-visible {
  outline: 2px solid var(--ct-text); outline-offset: 2px;
}
.ct-dg-lens[aria-pressed="true"], .ct-dg-pill[aria-pressed="true"] {
  background: var(--ct-text); color: var(--ct-surface); border-color: var(--ct-text);
}
/* an inert view: present so the row says the lettered approaches are examples, not
   the set. Muted, dashed, no pointer; the title carries the explanation. */
.ct-dg-lens[disabled] {
  cursor: default; opacity: .55; border-style: dashed; background: transparent;
}
.ct-dg-lens[disabled]:hover { color: var(--ct-text-quiet); border-color: var(--ct-rule); }
/* static note after the view buttons ("Additional eligible approaches may exist."): text, not a control */
.ct-dg-lens-note {
  font-family: var(--ct-f-text); font-size: 12.5px; line-height: 1.3; font-style: italic;
  color: var(--ct-text-quiet); padding: 0 4px;
}
.ct-dg-lens-note--m { display: block; margin-top: 8px; padding: 0; }

/* selected-view explanation, above the canvas */
.ct-dg-explain { margin: 0 0 18px; max-width: 78ch; text-wrap: pretty; }
.ct-dg-explain[hidden] { display: none; }
.ct-dg-explain:focus { outline: none; }
.ct-dg-explain-heading {
  font-family: var(--ct-f-display); font-size: 20px; line-height: 1.3; font-weight: 500;
  color: var(--ct-text); margin: 0 0 8px;
}
.ct-dg-explain-p {
  font-family: var(--ct-f-text); font-size: 14.5px; line-height: 1.6; color: var(--ct-text-secondary); margin: 0 0 8px;
}
.ct-dg-explain-p:last-child { margin-bottom: 0; }
.ct-dg-explain-p--quiet { font-size: 12.5px; color: var(--ct-text-quiet); }
.ct-dg-result { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0 0 10px; }
.ct-dg-result-row { display: contents; }
.ct-dg-result dt {
  font-family: var(--ct-f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ct-text-quiet); line-height: 1.7; margin: 0;
}
.ct-dg-result dd { font-family: var(--ct-f-text); font-size: 14.5px; line-height: 1.6; color: var(--ct-text); margin: 0; }
.ct-dg-guide { font-family: var(--ct-f-text); font-size: 12.5px; line-height: 1.5; color: var(--ct-text-secondary); margin: 10px 0 0; }
.ct-dg-guide b { font-family: var(--ct-f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--ct-text); }
.ct-dg-explain-strong { color: var(--ct-text); font-weight: 600; }
/* line legend inside the explanation (Full architecture): style word + sample + meaning */
.ct-dg-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0 0; padding: 0; list-style: none; }
.ct-dg-legend li { display: flex; align-items: center; gap: 8px; font-family: var(--ct-f-text); font-size: 12.5px; line-height: 1.4; color: var(--ct-text-secondary); }
.ct-dg-legend svg { width: 34px; height: 8px; flex: none; overflow: visible; }
.ct-dg-legend b { font-weight: 600; color: var(--ct-text); }
/* subordinate exploration group: smaller pills, sits under the primary description */
.ct-dg-sub { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -6px 0 14px; }
.ct-dg-sub[hidden] { display: none; }
.ct-dg-pill--sub { font-size: 11.5px; padding: 6px 11px; color: var(--ct-text-secondary); }
.ct-dg-explain--sub { margin-top: -2px; }
.ct-dg-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the phone's lens control: a mono VIEW label and a native select, shown only under
   720px. 16px type on purpose, since iOS zooms the page into any control set smaller. */
.ct-dg-view { display: none; }

.ct-dg-priority-label {
  font-family: var(--ct-f-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ct-text-quiet); margin-right: 4px;
}

/* About this diagram. The control is a quiet text button above the view controls.
   The stage wraps the canvas so the panel can sit over its right edge on desktop;
   under 720px the panel is an ordinary block above the canvas (an accordion). */
.ct-dg-about-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 14px; }
/* Full screen (owner, 2026-09-17). The button sits at the right of the About row. In
   full screen the block becomes a column on the page surface, the canvas takes the
   height left under the controls, and the SVG scales into it (viewBox, meet). */
.ct-dg-expand {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; padding: 4px 0;
  background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer;
  font-family: var(--ct-f-text); font-size: 13px; line-height: 1.2; color: var(--ct-text-secondary);
}
.ct-dg-expand:hover { color: var(--ct-text); border-bottom-color: var(--ct-rule-strong); }
.ct-dg-expand:focus-visible { outline: 2px solid var(--ct-text); outline-offset: 2px; }
.ct-dg-expand-glyph { width: 14px; height: 14px; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 2px; position: relative; }
.ct-dg-expand-glyph::before { content: ""; position: absolute; right: 2px; top: 2px; width: 5px; height: 5px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.ct-dg--fullscreen .ct-dg-expand-glyph::before { right: auto; top: auto; left: 2px; bottom: 2px; border-top: 0; border-right: 0; border-bottom: 1.5px solid currentColor; border-left: 1.5px solid currentColor; }
.ct-dg:fullscreen {
  display: flex; flex-direction: column; box-sizing: border-box; width: 100%; height: 100%;
  padding: 24px 40px 20px; overflow: auto; background: var(--ct-surface); color: var(--ct-text);
}
.ct-dg:fullscreen::backdrop { background: var(--ct-surface, #fff); }
.ct-dg:fullscreen .ct-dg-kicker { display: none; }
.ct-dg:fullscreen .ct-dg-stage { flex: 1 1 auto; min-height: 0; }
.ct-dg:fullscreen .ct-dg-host { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ct-dg:fullscreen .ct-dg-canvas { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; max-width: none !important; }
.ct-dg:fullscreen .ct-dg-canvas svg { width: 100%; height: 100%; }
.ct-dg:fullscreen .ct-dg-explain { max-width: none; }
.ct-dg-about-btn {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 0;
  background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer;
  font-family: var(--ct-f-text); font-size: 13px; line-height: 1.2; color: var(--ct-text-secondary);
}
.ct-dg-about-btn:hover { color: var(--ct-text); border-bottom-color: var(--ct-rule-strong); }
.ct-dg-about-btn:focus-visible { outline: 2px solid var(--ct-text); outline-offset: 2px; }
.ct-dg-about-btn[aria-expanded="true"] { color: var(--ct-text); }
.ct-dg-about-glyph {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border: 1px solid currentColor; border-radius: 50%; font-family: var(--ct-f-mono); font-size: 10px; font-style: italic;
}
.ct-dg-stage { position: relative; display: flex; flex-direction: column; }
.ct-dg-about {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 100%); box-sizing: border-box;
  padding: 24px 28px 28px; overflow: auto; z-index: 2;
  background: var(--ct-surface-raised); border: 1px solid var(--ct-rule); border-radius: 12px;
  box-shadow: -18px 0 40px -30px var(--ct-text);
  font-family: var(--ct-f-text); font-size: 14px; line-height: 1.6; color: var(--ct-text-secondary); text-wrap: pretty;
  animation: ct-dg-about-in .28s cubic-bezier(.2,.7,.2,1);
}
.ct-dg-about[hidden] { display: none; }
.ct-dg-about:focus { outline: none; }
.ct-dg-about:focus-visible { outline: 2px solid var(--ct-text); outline-offset: -2px; }
.ct-dg-about p { margin: 0 0 14px; }
.ct-dg-about p:last-child { margin-bottom: 0; }
.ct-dg-about-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.ct-dg-about-title { font-family: var(--ct-f-display); font-size: 17px; font-weight: 600; color: var(--ct-text); }
.ct-dg-about-close {
  width: 32px; height: 32px; margin: -6px -8px 0 0; padding: 0; border: 1px solid var(--ct-rule); border-radius: 8px;
  background: var(--ct-surface-raised); color: var(--ct-text-secondary); cursor: pointer; font-size: 12px; line-height: 1;
}
.ct-dg-about-close:hover { color: var(--ct-text); border-color: var(--ct-rule-strong); }
.ct-dg-about-close:focus-visible { outline: 2px solid var(--ct-text); outline-offset: 2px; }
@keyframes ct-dg-about-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* the canvas follows the page's palette: the sunken surface, not white */
.ct-dg-canvas {
  background: var(--ct-surface-sunken); border: 1px solid var(--ct-rule);
  border-radius: 12px; overflow: hidden; position: relative;
}
.ct-dg-canvas svg { width: 100%; height: auto; display: block; }
/* element names in caps: tracking lives here, not inline, so it can be tuned per type
   system without touching the diagram data (design review 2026-09-06, item 5). The
   type switcher publishes the per-face value as --ct-track-name; .04em is the default. */
.ct-dg-canvas svg [data-role="name"] { letter-spacing: var(--ct-track-name, .04em); }
.ct-dg-canvas[role="button"] { cursor: pointer; }
.ct-dg-canvas[role="button"]:hover { border-color: var(--ct-rule-strong); }

.ct-dg-caption[hidden] { display: none; }
.ct-dg-foot { margin-top: 14px; }
.ct-dg-foot[hidden] { display: none; }
/* long view labels (value movement): the group label takes its own line, then the
   five buttons wrap into an intentional 3 + 2 — no orphan on a second row */
.ct-dg-lenses--tight { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-dg-lenses--tight .ct-dg-priority-label { flex-basis: 100%; margin: 0 0 -2px; }
.ct-dg-lenses--tight .ct-dg-lens { font-size: 12px; padding: 9px 12px; }
.ct-dg-lenses--tight .ct-dg-lens-break { flex-basis: 100%; height: 0; margin: -8px 0 0; }
@media (max-width: 720px) { .ct-dg-lenses--tight { display: none; } }
.ct-dg-caption {
  margin-top: 14px; font-family: var(--ct-f-text); font-size: 13px; line-height: 1.5;
  color: var(--ct-text-quiet); min-height: 20px; max-width: 90ch; text-wrap: pretty;
}

@media (max-width: 720px) {
  .ct-dg-headline { font-size: 20px; }
  .ct-dg-explain-heading { font-size: 18px; }
  .ct-dg-result { grid-template-columns: 1fr; gap: 2px; }
  .ct-dg-result dd { margin-bottom: 6px; }
  .ct-dg-lens, .ct-dg-pill { min-height: 44px; }
  .ct-dg-sub { margin-top: 0; }
  /* seven stacked rows of lens buttons pushed the canvas below the fold, and a
     scrolling strip hid most of them. The lenses become a native select; the five
     short priority pills simply wrap. (Owner's call, overriding design review item 6.) */
  .ct-dg-lenses { display: none; }
  .ct-dg-view { display: block; margin: 0 0 16px; }
  .ct-dg-view--grouped { margin-bottom: 12px; }
  .ct-dg-view-label { display: block; margin: 0 0 6px; }
  .ct-dg-select {
    display: block; width: 100%; box-sizing: border-box; margin: 0;
    font-family: var(--ct-f-text); font-size: 16px; line-height: 1.2;
    padding: 12px 40px 12px 14px; border: 1px solid var(--ct-rule-strong); border-radius: 8px;
    background: var(--ct-surface-raised); color: var(--ct-text);
  }
  .ct-dg-select:focus-visible { outline: 2px solid var(--ct-text); outline-offset: 2px; }
  /* pill groups become labelled selects on the phone; the rows hide */
  .ct-dg-modes, .ct-dg-priorities, .ct-dg-sub { display: none !important; }
  .ct-dg-view--pills { display: block; margin: 0 0 16px; }
  /* accordion: the panel becomes a block between the controls and the canvas */
  .ct-dg-about-btn { min-height: 44px; }
  .ct-dg-expand { display: none; }
  .ct-dg-about { position: static; width: auto; order: -1; margin: 0 0 14px; box-shadow: none; animation: ct-dg-about-down .22s ease-out; }
  .ct-dg-about-close { width: 44px; height: 44px; margin: 0; }
  @keyframes ct-dg-about-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .ct-dg-lenses + .ct-dg-priorities, .ct-dg-view + .ct-dg-priorities { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-dg-lens, .ct-dg-pill, .ct-dg-canvas svg * { transition: none !important; }
  .ct-dg-about { animation: none !important; }
}