/* Sharetru · Workspace tree figure (2026)
   The figure's own styles. Section, head, question card, band and buttons use Shared styles (st26).
   Reads the theme tokens (--st-*) with the ST26 aliases as fallbacks. Authored in its END STATE; the
   choreography runs on a view timeline bound to the figure (no scroll-jacking), plays once where view
   timelines are unsupported (module.js adds .js-once / .in), and is off under reduced motion and when the
   theme's "Allow motion" is off (html[data-motion="off"]). Built for the Managed workspaces page, 15 Oct 2026. */
.st26 .wstree__fig { margin: clamp(1.5rem, 1rem + 2vw, 2.75rem) 0 0; padding: 0; view-timeline-name: --wstree; view-timeline-axis: block; }
.st26 .wstree__scroll { outline: none; }
.st26 .wstree__scroll:focus-visible { outline: 2px solid var(--st-accent, var(--accent)); outline-offset: 4px; border-radius: 12px; }
.st26 .wstree__svg { display: block; width: 100%; height: auto; font-family: inherit; overflow: visible; }
.st26 .wstree__swipe { display: none; }

/* ---- drawing ---------------------------------------------------------------- */
.st26 .wstree__svg .col { fill: var(--st-muted, var(--muted)); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; }
.st26 .wstree__svg .site { fill: var(--st-surface, var(--surface)); stroke: var(--st-line-strong, var(--line-strong)); stroke-width: 1; }
.st26 .wstree__svg .sitehd { fill: var(--st-surface-2, var(--surface-2)); }
.st26 .wstree__svg .mono { font-family: var(--st-font-mono, var(--mono, ui-monospace, Menlo, Consolas, monospace)); font-size: 11px; font-weight: 700; fill: var(--st-ink-soft, var(--ink-soft)); }
.st26 .wstree__svg .recl { stroke: var(--st-line, var(--line)); stroke-width: 1; }
.st26 .wstree__svg .fold { fill: var(--st-ink-soft, var(--ink-soft)); font-size: 13px; font-weight: 700; }
.st26 .wstree__svg .fold.fb { fill: var(--st-ink, var(--ink)); font-weight: 800; }
.st26 .wstree__svg .foldt { fill: var(--st-accent-ink, var(--accent-ink)); font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; }
.st26 .wstree__svg .foldt.inh { fill: var(--st-muted, var(--muted)); }
.st26 .wstree__svg .focus { fill: var(--st-surface-2, var(--surface-2)); }
.st26 .wstree__svg .fi .fo { fill: var(--st-line-strong, var(--line-strong)); }
.st26 .wstree__svg .fi.ws .fo { fill: var(--st-accent, var(--accent)); }
.st26 .wstree__svg .fi .chk { fill: none; stroke: var(--st-white, #ffffff); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st26 .wstree__svg .rail { stroke: var(--st-line-strong, var(--line-strong)); stroke-width: 2; fill: none; }
.st26 .wstree__svg .drift { stroke: var(--st-accent, var(--accent)); stroke-width: 2; fill: none; stroke-dasharray: 3 7; opacity: 0.7; }
.st26 .wstree__svg .gate { fill: var(--st-accent, var(--accent)); }
.st26 .wstree__svg .card { fill: var(--st-surface, var(--surface)); stroke: var(--st-accent, var(--accent)); stroke-width: 1.5; }
.st26 .wstree__svg .kick { fill: var(--st-accent-ink, var(--accent-ink)); font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; }
.st26 .wstree__svg .bt { fill: var(--st-ink, var(--ink)); font-size: 14px; font-weight: 800; letter-spacing: -0.01em; }
.st26 .wstree__svg .bs { fill: var(--st-muted, var(--muted)); font-size: 11px; font-weight: 600; }
.st26 .wstree__svg .inhl { stroke: var(--st-accent, var(--accent)); stroke-width: 2; stroke-dasharray: 2 5; fill: none; stroke-linecap: round; }
.st26 .wstree__svg .inht { fill: var(--st-accent-ink, var(--accent-ink)); font-size: 10.5px; font-weight: 700; }
.st26 .wstree__svg .rec { fill: var(--st-surface, var(--surface)); stroke: var(--st-line-strong, var(--line-strong)); stroke-width: 1; }
.st26 .wstree__svg .rechd { fill: var(--st-muted, var(--muted)); font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; }
.st26 .wstree__svg .rt { fill: var(--st-ink-soft, var(--ink-soft)); font-size: 12px; font-weight: 600; }
.st26 .wstree__svg .rtb { fill: var(--st-ink, var(--ink)); font-weight: 800; }

/* ---- caption ---------------------------------------------------------------- */
.st26 .wstree__cap { margin: 1.375rem 0 0; font-size: 0.84375rem; line-height: 1.6; color: var(--st-muted, var(--muted)); text-align: center; }
.st26 .wstree__cap p { margin: 0; max-width: none; font-size: inherit; line-height: inherit; color: inherit; }
.st26 .wstree__cap b, .st26 .wstree__cap strong { color: var(--st-ink-soft, var(--ink-soft)); }
.st26 .wstree .qcard { margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); }
.st26 .wstree .ctaband { margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); }
.st26 .wstree .sec-cta { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

/* ---- the choreography ------------------------------------------------------------
   Five beats on the figure's own timeline: 1 the folder is marked and the access rule attaches (6–20%) ·
   2 the notification (24–36) · 3 the retention rule (40–52) · 4 the folder below inherits (56–66) ·
   5 the three report rows arrive (70–88). Everything is drawn in its end state. */
.st26 .wstree__fig .anim { transform-box: fill-box; transform-origin: center; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); animation-fill-mode: both; }
.st26 .wstree__fig .b1 { animation-name: wstree-b1; }
.st26 .wstree__fig .b2 { animation-name: wstree-b2; }
.st26 .wstree__fig .b3 { animation-name: wstree-b3; }
.st26 .wstree__fig .b4 { animation-name: wstree-b4; }
.st26 .wstree__fig .r1 { animation-name: wstree-r1; }
.st26 .wstree__fig .r2 { animation-name: wstree-r2; }
.st26 .wstree__fig .r3 { animation-name: wstree-r3; }
.st26 .wstree__fig .focus.b1, .st26 .wstree__fig .fi.b1, .st26 .wstree__fig .gate.b1 { animation-name: wstree-fade-1; }
@keyframes wstree-b1 { 0%, 6% { opacity: 0; transform: translateX(40px); } 10% { opacity: 1; } 20%, 100% { opacity: 1; transform: none; } }
@keyframes wstree-b2 { 0%, 24% { opacity: 0; transform: translateX(40px); } 28% { opacity: 1; } 36%, 100% { opacity: 1; transform: none; } }
@keyframes wstree-b3 { 0%, 40% { opacity: 0; transform: translateX(40px); } 44% { opacity: 1; } 52%, 100% { opacity: 1; transform: none; } }
@keyframes wstree-b4 { 0%, 56% { opacity: 0; } 66%, 100% { opacity: 1; } }
@keyframes wstree-fade-1 { 0%, 4% { opacity: 0; } 12%, 100% { opacity: 1; } }
@keyframes wstree-r1 { 0%, 70% { opacity: 0; } 76%, 100% { opacity: 1; } }
@keyframes wstree-r2 { 0%, 76% { opacity: 0; } 82%, 100% { opacity: 1; } }
@keyframes wstree-r3 { 0%, 82% { opacity: 0; } 88%, 100% { opacity: 1; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) .st26 .wstree__fig .anim { animation-timeline: --wstree; animation-range: cover 12% cover 48%; }
  }
}
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) .st26 .wstree__fig.js-once .anim { animation-duration: 6s; animation-delay: 0.3s; animation-iteration-count: 1; animation-play-state: paused; }
    html:not([data-motion="off"]) .st26 .wstree__fig.js-once.in .anim { animation-play-state: running; }
  }
}
@media (prefers-reduced-motion: reduce) { .st26 .wstree__fig .anim { animation: none !important; } }
html[data-motion="off"] .st26 .wstree__fig .anim { animation: none !important; }
@media print { .st26 .wstree__fig .anim { animation: none !important; } }

/* ---- phones: the figure keeps an 860px minimum and scrolls sideways with a cue (playbook B6) ---- */
@media (max-width: 1000px) {
  .st26 .wstree__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; }
  .st26 .wstree__svg { min-width: 860px; }
  .st26 .wstree__swipe { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.875rem; padding: 0.5rem 0.875rem 0.5rem 1rem; border-radius: 999px; background: var(--st-accent-ink, var(--accent-ink)); color: var(--st-surface, #fff); font-size: 0.875rem; font-weight: 800; line-height: 1.25; letter-spacing: 0; text-transform: none; box-shadow: 0 4px 14px rgba(75, 50, 199, 0.28); transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
  .st26 .wstree__swipe-arrow { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; animation: wstree-nudge 1.1s ease-in-out infinite; }
  .st26 .wstree__scroll { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), transparent 100%); }
  .st26 .wstree__fig.is-scrolled .wstree__swipe { background: transparent; color: var(--st-muted, var(--muted)); box-shadow: none; padding-left: 0; }
  .st26 .wstree__fig.is-scrolled .wstree__swipe-arrow { animation: none; }
  .st26 .wstree__fig.at-end .wstree__scroll { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 760px) {
  .st26 .wstree__fig .anim { animation: none !important; }
}

/* ---- swipe cue motion (16 Oct 2026) ---- */
@keyframes wstree-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .st26 .wstree__swipe-arrow { animation: none !important; } }
html[data-motion="off"] .st26 .wstree__swipe-arrow { animation: none !important; }