/* Capabilities hub (hub.js; PLAN-SITE A5; Part D: PLAN-SITE-D D1.7, D1.8): the exploded table. Builds on
   home-v3e/css/base.css (V3e's text system), kit/v3e/site.css (.fz-btn--svc) and kit/v3e/tools.css (the tools frame),
   with the template's shared parts (_template/discipline.css, linked before this file). 1 the hero's buttons on the
   objects  2 the eight: each discipline's stage  3 the index of the eight  4 Fezey Labs  5 the tools frame  6 phones
   7 reduced motion and no WebGL */

/* ============================================================ 1 · the hero: the names on their objects, as buttons */
.cap-objs { margin: 0; padding: 0; list-style: none; }
html:not(.v3-reduced):not(.v3-nogl) .cap-objs { display: contents; }
.cap-objs .xp { padding: 0; }
.cap-objs .xp::before { display: none; }
.cap-objlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid rgba(201, 182, 234, 0.55); border-radius: 999px; background: rgba(10, 8, 16, 0.84); font: 600 clamp(13px, 0.98vw, 16px)/1.05 var(--v3-title); font-stretch: 90%; letter-spacing: -0.005em; text-transform: uppercase; color: var(--signal, #ece9f1); text-decoration: none; white-space: nowrap; transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out); }
html.gl-blur .cap-objlink { background: rgba(10, 8, 16, 0.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cap-objlink:focus-visible { outline: 2px solid var(--signal, #ece9f1); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .cap-objlink:hover { border-color: var(--filament, #c9b6ea); background: rgba(201, 182, 234, 0.16); } }

/* ============================================================ 2 · the eight: a stage each. The panel on columns 1-5
   (the counter, the name, the promise, the line, the proof, the credit, the button); the deliverables drawn out to
   the object's parts */
.cap-d { display: contents; }
.cap-stop { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
.e-sec--eight { position: relative; }
.xp.cap-stage { gap: 12px; }
.cap-stage .xp__h2 { font-size: clamp(40px, 4.2vw, 68px); font-weight: 600; line-height: 0.92; max-width: none; }
.cap-stage .xp__h2 .xp__link { color: inherit; text-decoration: none; }
.cap-stage .xp__h2 .xp__link:focus-visible { outline: 2px solid var(--signal, #ece9f1); outline-offset: 4px; border-radius: 2px; }
.cap-stage .cap-promise { font: 500 20px/1.35 var(--v3-body); color: var(--signal, #ece9f1); max-width: 30ch; }
.cap-stage .cap-line { font: 400 16px/1.5 var(--v3-body); color: rgba(236, 233, 241, 0.84); max-width: 40ch; }
.cap-proof { font: 500 15px/1.45 var(--v3-body); color: var(--signal, #ece9f1); max-width: 40ch; }
.cap-proof__who { margin-left: 6px; font: 500 10px/1 var(--v3-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(236, 233, 241, 0.8); }
.cap-proof--credit { color: rgba(236, 233, 241, 0.86); font-size: 10.5px; letter-spacing: 0.14em; }
.cap-stage .cap-fig { font-size: 15px; line-height: 1.35; }
.cap-stage .cap-num { font: 600 44px/0.95 var(--v3-title); font-stretch: 88%; letter-spacing: -0.03em; vertical-align: -0.12em; }
.cap-stage .xp__act { margin-top: 6px; }
/* Tab reaches every stage's button in order (hub.js brings a stage that is not on screen): a button stays focusable
   while its panel is away, and never takes a pointer then */
html:not(.v3-reduced):not(.v3-nogl) .cap-stage .fz-btn--svc { visibility: visible; }
html:not(.v3-reduced):not(.v3-nogl) .cap-stage:not(.is-on) .fz-btn--svc { pointer-events: none; }
html[data-layout="land"] .xp.cap-stage { width: min(calc((100vw - 2 * var(--g-m)) * 5 / 12), 640px); max-width: min(calc((100vw - 2 * var(--g-m)) * 5 / 12), 640px); }
.cap-dl { margin: 0; padding: 0; list-style: none; }
html:not(.v3-reduced):not(.v3-nogl) .cap-dl { display: contents; }
.cap-dl .xp { padding: 7px 11px; }
/* the labels stand over lit objects (white prints, a laptop's screen): a deeper glass under each */
html[data-layout="land"] .cap-dl .xp::before { background: rgba(10, 8, 16, 0.8) !important; }
/* a phone's opening: the title over the lit table, on a deeper glass */
html[data-layout="port"] .xp[data-story="hero"]::before { background: rgba(10, 8, 16, 0.66) !important; }
/* a desktop: the deliverables in one column right of the object (hub.js orders the rows by the parts on screen) */
html[data-layout="land"] .xp[data-land^="dr"] { left: 66vw; width: max-content; max-width: min(22vw, 300px); }
html[data-layout="land"] .xp[data-land="dr0"] { top: calc(var(--nav-h, 72px) + 9vh); }
html[data-layout="land"] .xp[data-land="dr1"] { top: calc(var(--nav-h, 72px) + 18vh); }
html[data-layout="land"] .xp[data-land="dr2"] { top: calc(var(--nav-h, 72px) + 27vh); }
html[data-layout="land"] .xp[data-land="dr3"] { top: calc(var(--nav-h, 72px) + 36vh); }
html[data-layout="land"] .xp[data-land="dr4"] { top: calc(var(--nav-h, 72px) + 45vh); }
html[data-layout="land"] .xp[data-land="dr5"] { top: calc(var(--nav-h, 72px) + 54vh); }
.cap-dl .xp__mono { font-size: 10.5px; letter-spacing: 0.12em; max-width: 24ch; }

/* ============================================================ 3 · the index of the eight (D1.8): from 1100 px a slim
   list at the right edge during the stages, the current one lit; a phone: a chip rail under the header */
.cap-idx { position: fixed; z-index: calc(var(--z-nav, 50) - 1); visibility: hidden; opacity: 0; transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms; }
html.cap-idx-on .cap-idx { visibility: visible; opacity: 1; transition: opacity 200ms var(--ease-out), visibility 0s; }
.cap-idx ol { margin: 0; padding: 0; list-style: none; }
.cap-idx a { display: flex; align-items: center; text-decoration: none; color: rgba(236, 233, 241, 0.64); font: 400 11px/1.2 var(--v3-mono); letter-spacing: 0.02em; white-space: nowrap; transition: color 160ms var(--ease-out); }
.cap-idx a[aria-current] { color: var(--signal, #ece9f1); }
.cap-idx a:focus-visible { outline: 2px solid var(--signal, #ece9f1); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .cap-idx a:hover { color: var(--signal, #ece9f1); } }
/* a desktop: the numbers in a slim column at the right edge, the current one lit; a name beside its number on hover or
   focus (the names float left of the column: the scene keeps its width; the stage's panel names the current one) */
html[data-layout="land"] .cap-idx { right: calc(var(--g-m) * 0.5); top: 50%; transform: translateY(-50%); padding: 8px 6px; border-radius: 14px; background: rgba(10, 8, 16, 0.5); border: 1px solid rgba(255, 255, 255, 0.06); }
html[data-layout="land"] .cap-idx li { position: relative; }
html[data-layout="land"] .cap-idx a { position: relative; min-height: 28px; justify-content: center; padding: 0 6px; }
html[data-layout="land"] .cap-idx__n { font-size: 11px; letter-spacing: 0.08em; }
html[data-layout="land"] .cap-idx__t { position: absolute; right: calc(100% + 10px); top: 50%; padding: 5px 10px; border-radius: 999px; background: rgba(10, 8, 16, 0.78); border: 1px solid rgba(201, 182, 234, 0.3); color: var(--signal, #ece9f1); font-size: 11px; letter-spacing: 0.04em; white-space: nowrap; opacity: 0; transform: translate3d(6px, -50%, 0); pointer-events: none; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
html[data-layout="land"] .cap-idx a[aria-current] .cap-idx__n { color: var(--signal, #ece9f1); font-weight: 600; }
html[data-layout="land"] .cap-idx a[aria-current]::after { content: ''; position: absolute; left: -2px; top: 50%; width: 3px; height: 14px; margin-top: -7px; border-radius: 2px; background: var(--filament, #c9b6ea); }
html[data-layout="land"] .cap-idx a:focus-visible .cap-idx__t { opacity: 1; transform: translate3d(0, -50%, 0); }
@media (hover: hover) and (pointer: fine) { html[data-layout="land"] .cap-idx a:hover .cap-idx__t { opacity: 1; transform: translate3d(0, -50%, 0); } }
@media (max-width: 1099px) { html[data-layout="land"] .cap-idx { display: none; } }
html[data-layout="port"] .cap-idx { left: 0; right: 0; top: calc(var(--nav-h, 64px) + env(safe-area-inset-top, 0px)); height: 44px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); }
html[data-layout="port"] .cap-idx::-webkit-scrollbar { display: none; }
html[data-layout="port"] .cap-idx ol { display: flex; gap: 8px; width: max-content; height: 100%; align-items: center; padding: 0 var(--g-m); }
html[data-layout="port"] .cap-idx a { min-height: 32px; gap: 6px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(201, 182, 234, 0.26); background: rgba(10, 8, 16, 0.72); font-size: 10.5px; letter-spacing: 0.06em; }
html[data-layout="port"] .cap-idx__n { color: var(--filament, #c9b6ea); }
html[data-layout="port"] .cap-idx a[aria-current] { border-color: var(--filament, #c9b6ea); background: rgba(201, 182, 234, 0.2); }

/* ============================================================ 4 · Fezey Labs: the tools on the devices' screens, their
   words in a row along the foot of the frame, each with its line up to its screen */
.cap-labscreens { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.cap-labscreen { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: grid; place-items: center; opacity: 0; visibility: hidden; will-change: transform; }
.cap-labscreen img { width: 42%; height: auto; }
.cap-labscreen--socialpedia img { width: 62%; }
.cap-labs { display: contents; }
.xp[data-story^="labs-"]:not([data-story="labs-head"]) { gap: 6px; }
.xp[data-story^="labs-"] .cap-labmark { width: 34px; height: 34px; border-radius: 8px; }
.xp[data-story^="labs-"] .xp__body { font-size: 14px; max-width: 34ch; }
html[data-layout="land"] .xp[data-land^="tool"] { top: auto; bottom: 7vh; width: calc((100vw - 2 * var(--g-m) - 48px) / 3); }
html[data-layout="land"] .xp[data-land="tool0"] { left: var(--g-m); }
html[data-layout="land"] .xp[data-land="tool1"] { left: calc(var(--g-m) + (100vw - 2 * var(--g-m) - 48px) / 3 + 24px); }
html[data-layout="land"] .xp[data-land="tool2"] { left: calc(var(--g-m) + 2 * ((100vw - 2 * var(--g-m) - 48px) / 3 + 24px)); }

/* ============================================================ 5 · the tools in one frame (kit/v3e/tools.css): the frame
   across the grid over the dimmed table; its own glass (the cluster has none); the tiles fit the frame's height */
html:not(.v3-reduced):not(.v3-nogl) .xp.cap-tfw { left: var(--g-m); right: var(--g-m); top: calc(var(--nav-h, 72px) + 2.4vh); width: auto; max-width: none; padding: 0; }
.xp.cap-tfw::before { display: none; }
.cap-tfw .tf { max-width: none; }
@media (max-height: 900px) { .cap-tfw .tf { --tf-tile-h: 78px; --tf-mark: 32px; --tf-gap: 10px; gap: 10px; padding: 18px 0; } .cap-tfw .tf__h { font-size: clamp(24px, 2.2vw, 36px); } }
@media (max-height: 760px) { .cap-tfw .tf { --tf-tile-h: 68px; --tf-mark: 28px; gap: 8px; padding: 14px 0; } .cap-tfw .tf__name { font-size: 12px; } }

/* ============================================================ 6 · phones: the table in the top half, a list low */
/* the hero's names: one list on one panel at the foot (V3e's phone services list), each a button */
html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .cap-objs { position: fixed; left: var(--g-m); right: var(--g-m); bottom: max(14px, env(safe-area-inset-bottom, 0px)); z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; isolation: isolate; visibility: hidden; transition: visibility 0s linear calc(760ms * var(--rv-slow, 1)); }
html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .cap-objs:has(.xp.is-on) { visibility: visible; transition-delay: 0s; }
html[data-layout="port"] .cap-dl::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: var(--gl-r); background: var(--gl-tint); border: 1px solid var(--gl-edge); box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-shadow); }
html.gl-blur[data-layout="port"] .cap-dl::before { background: var(--gl-fill); -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); }
html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) :is(.cap-objs, .cap-dl) .xp { position: relative; padding: 0; min-height: 34px; display: flex; align-items: center; }
html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .cap-objs .xp { min-width: 0; }
html[data-layout="port"] :is(.cap-objs, .cap-dl) .xp::before { display: none; }
html[data-layout="port"] .cap-objlink { width: 100%; padding: 4px 12px; font-size: 11.5px; line-height: 1.15; white-space: normal; }
/* the eight: the deliverables as a list at the foot, the discipline's panel above it (--dl-h: hub.js measure) */
html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .cap-dl { position: fixed; left: var(--g-m); right: var(--g-m); bottom: var(--z-cap-bottom); z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 10px 14px; isolation: isolate; visibility: hidden; transition: visibility 0s linear calc(760ms * var(--rv-slow, 1)); }
html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .cap-dl:has(.xp.is-on) { visibility: visible; transition-delay: 0s; }
html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .cap-dl .xp { min-height: 26px; }
html[data-layout="port"] .xp[data-port="eb"] { left: var(--g-m); right: var(--g-m); top: auto; bottom: calc(var(--z-cap-bottom) + var(--dl-h, 120px) + 10px); width: auto; gap: 8px; padding: 14px 16px; }
html[data-layout="port"] .xp[data-port="eb"] .cap-line { display: none; }
html[data-layout="port"] .cap-stage .xp__h2 { font-size: clamp(32px, 9.4vw, 40px); max-width: 14ch; }
html[data-layout="port"] .cap-stage .cap-promise { font-size: 16px; max-width: 25ch; }
html[data-layout="port"] .cap-stage .cap-proof { max-width: 30ch; }
html[data-layout="port"] .cap-stage .cap-num { font-size: 34px; }
/* the phone tier: each list moves as one cluster (its lines stand in it) */
html.rv-one[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body :is(.cap-objs, .cap-dl) { opacity: 0; translate: 0 12px; transition: opacity calc(260ms * var(--rv-slow, 1)) var(--v3-ease), translate calc(260ms * var(--rv-slow, 1)) var(--v3-ease), visibility 0s linear calc(260ms * var(--rv-slow, 1)); }
html.rv-one[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body :is(.cap-objs, .cap-dl):has(.xp.is-on) { opacity: 1; translate: none; transition-duration: calc(420ms * var(--rv-slow, 1)), calc(420ms * var(--rv-slow, 1)), 0s; transition-delay: calc(120ms * var(--rv-slow, 1)), calc(120ms * var(--rv-slow, 1)), 0s; }
html.rv-one[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body :is(.cap-objs, .cap-dl) .xp { visibility: inherit; opacity: 1; translate: none; transition: none; will-change: auto; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Labs on a phone: the three tools stacked at the foot */
html[data-layout="port"] .xp[data-port^="tool"] { left: var(--g-m); right: var(--g-m); top: auto; width: auto; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; padding: 10px 14px; }
html[data-layout="port"] .xp[data-port^="tool"] > :not(.cap-labmark) { grid-column: 2; }
html[data-layout="port"] .xp[data-port^="tool"] .cap-labmark { grid-row: 1 / span 2; }
html[data-layout="port"] .xp[data-port^="tool"] .xp__body { font-size: 12.5px; max-width: 23ch; }
html[data-layout="port"] .xp[data-port="tool0"] { bottom: calc(5vh + 2 * 138px); }
html[data-layout="port"] .xp[data-port="tool1"] { bottom: calc(5vh + 138px); }
html[data-layout="port"] .xp[data-port="tool2"] { bottom: 5vh; }
/* the tools frame on a phone: under the header, its tiles small enough that six rows fit the screen */
html:not(.v3-reduced):not(.v3-nogl)[data-layout="port"] .xp.cap-tfw { left: 12px; right: 12px; top: calc(var(--nav-h, 64px) + 10px); }
html[data-layout="port"] .cap-tfw .tf { --tf-tile-w: 108px; --tf-tile-h: 60px; --tf-mark: 24px; --tf-gap: 8px; --tf-pad: 12px; gap: 6px; padding: 12px 0; }
html[data-layout="port"] .cap-tfw .tf__h { font-size: 24px; }
html[data-layout="port"] .cap-tfw .tf__row { row-gap: 4px; }
html[data-layout="port"] .cap-tfw .tf__label { min-height: 24px; font-size: 10px; padding: 0 10px; }
html[data-layout="port"] .cap-tfw .tf__tile { gap: 4px; padding: 6px 8px; }
html[data-layout="port"] .cap-tfw .tf__name { font-size: 11px; }
html[data-layout="port"] .cap-tfw .tf__tile--name .tf__name { font-size: 13px; }

/* ============================================================ 7 · reduced motion and no WebGL: every name, panel, list
   and tool in its section's flow */
.v3-reduced .cap-objs, .v3-nogl .cap-objs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 1100px; }
.v3-reduced .cap-d, .v3-nogl .cap-d { display: grid; gap: 10px; width: 100%; max-width: 1100px; }
.v3-reduced .cap-dl, .v3-nogl .cap-dl { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-reduced .e-sec--eight, .v3-nogl .e-sec--eight { gap: 34px; }
.v3-reduced .cap-labscreens, .v3-nogl .cap-labscreens { display: none; }
.v3-reduced .cap-idx, .v3-nogl .cap-idx { display: none; }
@media (max-width: 760px), (max-aspect-ratio: 9/10) {
  .v3-reduced .cap-objs, .v3-nogl .cap-objs { grid-template-columns: 1fr 1fr; }
}

/* a phone: a long "Explore {name}" wraps inside its panel (the pill grows, never past the screen) */
html[data-layout="port"] .cap-stage .fz-btn--svc { max-width: 100%; white-space: normal; text-align: left; line-height: 1.3; padding: 10px 18px; letter-spacing: 0.08em; }
/* a phone: each moving row of the tools frame is a strip of its own (it may be swiped as well), inset from the edges */
html[data-layout="port"] .cap-tfw .tf__view { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
html[data-layout="port"] .cap-tfw .tf__view::-webkit-scrollbar { display: none; }