/* Tensorgical theme over demo.css: the website's header, type and colours (DM Sans, Source Serif, the brand blue on
   the site's paper), white rounded cards without dividing lines, the video as the hero with a floating transport,
   and a capsule timeline. */
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --serif: "Source Serif", Georgia, serif;
  --page: #f2efe6; --card: #ffffff; --fill: #f3f1ea; --fill-strong: #e7e3d8;
  --card-shadow: 0 1px 2px rgb(46 48 42 / 5%), 0 6px 24px rgb(46 48 42 / 6%);
  --accent: #556c98; --accent-soft: #e7ecf5; --accent-text: #3d5381;
  --playhead: #d9463b;
}
/* Every zone shares the same white surface and the site's warm greys. */
:root, .site-header, .viewer, .browser, .timeline {
  --panel: var(--card); --bar: var(--card); --sheet: var(--card);
  --line: #e4e0d5; --line-soft: #efece4; --hover: var(--fill);
  --text: #2e302a; --muted: #6a6c62; --faint: #8b8d83;
}
html, body { background: var(--page); font-family: var(--sans); font-size: 13px; letter-spacing: -.01em; }

/* Layout: the video with the timeline directly under it on the left, the inspector card beside them, both columns
   starting and ending on the same lines. */
.app {
  --gutter: clamp(20px, 4vw, 72px);
  --split: clamp(14px, 1.4vw, 24px);
  --inspector-min: clamp(440px, 36vw, 620px);
  /* Height outside the picture (toolbar, now-playing line, timeline, gaps); demo.js measures it (fitHero). */
  --below: 380px;
  gap: 0; background: var(--page);
  /* The report column gets about a third of the width; the video column takes the rest, but never more than the window
     height allows. Height left over on a squarer window is split evenly above and below the two columns. */
  grid-template-columns: var(--gutter) min(calc((100vh - var(--below)) * 16 / 9), calc(100vw - 2 * var(--gutter) - var(--split) - var(--inspector-min))) var(--split) minmax(var(--inspector-min), 1fr) var(--gutter);
  grid-template-rows: auto minmax(var(--split), 1fr) auto var(--split) auto minmax(var(--split), 1fr);
  grid-template-areas: "toolbar toolbar toolbar toolbar toolbar" ". . . . ." ". viewer . browser ." ". . . browser ." ". timeline . browser ." ". . . . .";
}
/* The cards clip rather than hide their overflow: a hidden-overflow box can still be scrolled (focusing a control near
   its edge, a text selection dragged past it), which pushed the tab bar up against the card's top edge. */
.browser, .timeline { background: var(--card); border-radius: 16px; box-shadow: var(--card-shadow); overflow: hidden; overflow: clip; }
/* The inspector's height must come from the rows, not grow them with the report's text (that pushed the caption over
   the timeline and left empty space under the objects). */
@media (min-width: 901px) { .browser { contain: size; } }

/* The website's header (components/alpine/navigation.tsx), a little shorter so the video keeps its height. */
.site-header {
  grid-area: toolbar; display: flex; align-items: center; justify-content: space-between; gap: 32px;
  min-height: 72px; padding: 12px var(--gutter); border-bottom: 1px solid #d6d3c9; background: var(--page); color: var(--text);
}
.site-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.site-brand img { width: 30px; height: 30px; flex: 0 0 auto; }
.tensorgical-name { display: inline-flex; align-items: baseline; font: 500 var(--tensorgical-name-size, 22px)/1 "JetBrains Mono", monospace; letter-spacing: -.045em; white-space: nowrap; }
.tensorgical-name > span { font: inherit; letter-spacing: inherit; }
.tensorgical-bracket { color: #9ca3af; }
.tensorgical-tensor { color: #2e302a; }
.tensorgical-gical { color: #556c98; font-weight: 700; }
.site-nav { display: flex; align-items: center; gap: 30px; font-size: 15px; }
.site-nav > a:not(.site-button) { padding-block: 8px; color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-nav > a:not(.site-button):hover { border-bottom-color: currentColor; }
.site-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 20px;
  border: 1px solid #2e302a; border-radius: 7px; background: #2e302a; color: #faf8f1; text-decoration: none; font-size: 15px;
  transition: background .2s, transform .2s;
}
.site-button:hover { background: #485645; transform: translateY(-1px); }
.site-header :focus-visible { outline: 2px solid #556c98; outline-offset: 5px; }

/* Viewer: the picture itself is the card, exactly 16:9, with the transport floating over it. */
.viewer { background: transparent; display: flex; justify-content: center; min-height: 0; container-type: inline-size; }
.viewer-stage { width: min(100cqw, calc((100vh - var(--below)) * 16 / 9)); background: transparent; overflow: visible; }
.stage-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 2px 6px rgb(0 0 0 / 8%), 0 18px 48px rgb(0 0 0 / 14%); }
.stage-frame video { border-radius: 0; }
.viewer-stage:fullscreen { display: grid; place-items: center; background: #000; }
.viewer-stage:fullscreen .stage-frame { width: min(100vw, calc(100vh * 16 / 9)); border-radius: 0; box-shadow: none; }
.viewer-stage:fullscreen .now-playing { display: none; }
/* Below the picture: the step and sub-step that are playing, as in a media app's now-playing line, and the video's
   credit on the right, where a picture credit goes. */
.now-playing { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 2px; align-items: end; margin: 14px 4px 0; }
#now-step { grid-column: 1; font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
#now-detail { grid-column: 1; font-size: 13px; color: var(--muted); }
.media-credit { grid-column: 2; grid-row: 1 / 3; display: grid; justify-items: end; gap: 2px; font-size: 12px; line-height: 1.35; color: var(--faint); text-align: right; }
.media-credit a { color: var(--muted); text-decoration: none; }
.media-credit a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@container (max-width: 620px) {
  .now-playing { grid-template-columns: minmax(0, 1fr); }
  .media-credit { grid-column: 1; grid-row: auto; justify-items: start; text-align: left; margin-top: 6px; }
}
.stage-frame .transport {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4;
  display: flex; align-items: center; gap: 10px; min-height: 0; padding: 6px 12px; border: 0; border-radius: 999px;
  background: rgb(28 28 30 / 62%); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  color: #f5f5f7; transition: opacity .25s ease;
}
/* Content gate: on opening, the picture stays blurred behind a notice until the visitor chooses to see it; the
   surgical thumbnails elsewhere on the page blur with it. */
.content-gate {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 24px;
  background: rgb(46 48 42 / 30%); -webkit-backdrop-filter: blur(28px) saturate(.75); backdrop-filter: blur(28px) saturate(.75);
}
@supports not (backdrop-filter: blur(1px)) { .stage-frame[data-gated=true] video { filter: blur(24px); } }
.stage-frame[data-gated=false] .content-gate { display: none; }
.content-gate-card { max-width: 400px; padding: 22px 26px 24px; border-radius: 14px; background: var(--card); box-shadow: 0 8px 32px rgb(0 0 0 / 22%); text-align: center; }
.content-gate-card h2 { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.content-gate-card p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.content-gate-card .site-button { min-height: 40px; padding: 8px 20px; font-size: 14px; }
.app[data-gated=true] :is(.filmstrip, .phase-card img) { filter: blur(10px); }

/* Guided tour: a ring around the target with the rest of the page dimmed (the ring's huge shadow), and a card with the
   hint beside it. The page stays usable underneath. */
.tour[hidden] { display: none; }
.tour-spot { position: fixed; z-index: 20; border-radius: 12px; box-shadow: 0 0 0 2px var(--accent), 0 0 0 9999px rgb(46 48 42 / 26%); pointer-events: none; }
.tour-card { position: fixed; z-index: 21; width: min(360px, calc(100vw - 32px)); padding: 16px 18px 14px; border-radius: 14px; background: var(--card); box-shadow: 0 8px 32px rgb(0 0 0 / 22%); }
.tour-count { font: 500 11px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.tour-card h2 { margin: 4px 0 6px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.tour-card p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.tour-card kbd { font: 500 11.5px var(--mono); padding: 1px 5px; border-radius: 4px; background: var(--fill); color: var(--text); }
.tour-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tour-skip { padding: 6px 0; border: 0; background: none; font: 500 13px var(--sans); color: var(--muted); cursor: pointer; }
.tour-skip:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.tour-actions .site-button { min-height: 34px; padding: 6px 16px; font-size: 13px; }
.stage-frame[data-playing=true] .transport { opacity: 0; }
.stage-frame[data-playing=true]:hover .transport, .stage-frame .transport:focus-within { opacity: 1; }
.stage-frame .transport .icon-button { width: 32px; height: 32px; border-radius: 999px; color: #f5f5f7; }
.stage-frame .transport .icon-button:hover { background: rgb(255 255 255 / 14%); color: #fff; }
.stage-frame .transport .icon-button.play { width: 36px; height: 36px; }
.stage-frame .transport .timecode { font: 500 13px/1 var(--mono); color: #f5f5f7; letter-spacing: 0; padding: 0 4px; }
#overlay-toggle[aria-pressed=true] { color: #64d2ff; }
.stage-frame .transport svg { width: 17px; height: 17px; }
.object-box { rx: 10px; stroke-width: 2.25; }
.object-labels span { border-radius: 7px; padding: 2px 8px 2px 2px; font: 600 11.5px/1.3 var(--sans); box-shadow: 0 2px 8px rgb(0 0 0 / 25%); }
.object-labels b { border-radius: 5px; }

/* Inspector: a segmented control across the card's width instead of tabs, its type following the report's size
   (demo.js sets --report-size on the card, fitReport); the report straight on the card. The names shrink a little to
   fit on one line, else the control wraps (fitTabs). */
.browser { --report-size: 15px; --tab-size: clamp(13px, calc(var(--report-size) * .9), 15.5px); }
.browser .panel-report { --report-size: inherit; }
/* A column, not a grid: the tab bar keeps its full height whatever the card's height (flex: none), and only the
   report area below gives up space and scrolls. As a grid row the bar could be squeezed below its content in some
   browsers, which pushed the tabs against the card's top edge. */
.browser { display: flex; flex-direction: column; }
.browser .panel-bar { flex: none; min-height: 0; padding: 14px 16px 6px; border-bottom: 0; background: var(--card); }
.browser .browser-body { flex: 1 1 auto; min-height: 0; }
.browser-tabs { flex: 1 1 auto; gap: 2px; padding: 3px; border-radius: 11px; background: var(--fill); align-self: center; }
.browser-tabs button { flex: 1 1 auto; justify-content: center; padding: .55em .5em; border: 0; border-radius: 8px; font: 500 var(--tab-size)/1.2 var(--sans); color: var(--text); white-space: nowrap; }
.browser-tabs button svg { display: none; }
.browser-tabs button[aria-selected=true] { color: var(--text); background: var(--card); box-shadow: 0 1px 3px rgb(46 48 42 / 14%), 0 0 0 .5px rgb(46 48 42 / 5%); font-weight: 600; }
.browser-tabs[data-wrap=true] { flex-wrap: wrap; }
.icon-button { border-radius: 8px; }
.icon-button:hover { background: var(--fill); }
.panel { padding: 14px 22px 18px; }
.panel-report { margin: 0; padding: 12px 26px 22px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.report-para { font-family: var(--serif); color: #2e302a; line-height: 1.6; letter-spacing: 0; }
/* The operation performed is a field above the text, in the interface type, as on a report form. */
.report-procedures { display: grid; gap: 2px; margin: 0 0 1em; padding-bottom: .8em; border-bottom: 1px solid var(--line-soft); font-family: var(--sans); line-height: 1.3; }
.report-procedures span { font-size: calc(var(--tab-size) * .82); color: var(--faint); }
.report-procedures strong { justify-self: start; font-size: calc(var(--tab-size) * 1.05); font-weight: 600; letter-spacing: -.01em; color: var(--text); border-radius: 4px; cursor: pointer; }
.report-procedures strong:hover, .report-procedures strong:focus-visible { background: var(--fill); }
.sentence { border-radius: 4px; }
.sentence:hover, .sentence:focus-visible { background: var(--fill); box-shadow: none; }
.sentence[data-active=true] { background: var(--accent-soft); color: var(--accent-text); }
.panel-caption { color: var(--muted); }
.panel-caption.credit > span { display: block; }
.panel-caption.credit > span + span { margin-top: 6px; }
.step-group { border-bottom-color: var(--line-soft); }
.step-head b { border-radius: 50%; }
.phase-card img { border-radius: 10px; }
.object-card { border: 0; border-radius: 12px; background: var(--fill); }
/* A card's ring: green while its object is on screen (the same green as the dot), blue when it is selected but
   out of view. */
.object-card[aria-pressed=true] { box-shadow: 0 0 0 2px var(--accent); }
.object-card[data-on=true] { box-shadow: 0 0 0 2px #2f8783; }
.object-tiles { margin-bottom: 16px; }
.object-card-status { font-size: 12.5px; line-height: 1.35; color: var(--text); }
.track-groups-head { margin-top: 4px; }
.object-card svg { border-radius: 8px; }
.case-data dt, .case-data dd { border-bottom-color: var(--line-soft); }
.clinical-group + .clinical-group { margin-top: 18px; }
.clinical-group h3 { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--text); }
.clinical-group .case-data dd { color: var(--text); }

/* Timeline: steps as capsules with their filmstrip (shown whenever the lane has room), objects as thin capsules. */
.timeline {
  --h-story: 112px; --object-row: 17px;
  --story-head: var(--fill); --story-line: transparent; --story-text: var(--text); --story-body: var(--fill);
  --gap-fill: transparent;
  color: var(--text); box-shadow: var(--card-shadow);
}
/* The steps lane holds the label and the filmstrip at its native 90 px tiles; the card is exactly as tall as its lanes. */
.timeline-body { padding: 10px 14px 6px 0; grid-template-columns: 100px minmax(0, 1fr); }
.lane-names, .timeline-content { padding-bottom: 8px; }
.lane-names { background: transparent; border-right: 0; }
.timeline .lane-story { container: story / size; }
.lane-name { font-size: 12px; color: var(--muted); padding-left: 16px; }
.lane-name::before { display: none; }
.zoom-tools { border-bottom: 0; }
.zoom-tools .icon-button { width: 22px; height: 20px; border-radius: 999px; color: var(--faint); }
/* Frames switch beside the steps lane's name; without frames the lane is one row of name capsules (the container query
   below then hides the filmstrip). */
.frames-toggle { width: 22px; height: 22px; border-radius: 999px; color: var(--faint); }
.frames-toggle svg { width: 14px; height: 14px; }
.frames-toggle[aria-pressed=true] { color: var(--accent); }
.frames-toggle:hover { background: var(--fill); color: var(--text); }
.timeline[data-frames=false] { --h-story: 30px; }
.timeline .ruler { background: transparent; border-bottom: 0; }
.timeline .tick { background: #d9d5ca; }
.timeline .tick.major { background: #b3afa3; }
.timeline .tick.major span { font: 11px var(--sans); color: var(--faint); }
.timeline .clip { border: 0; box-shadow: none; }
.timeline .clip:hover { filter: none; background-color: var(--fill-strong); }
.timeline .clip-story { border-radius: 999px; background: var(--fill); container: clip / inline-size; }
.timeline .clip-story .clip-label { height: 100%; padding: 0 12px; gap: 6px; background: transparent; border-bottom: 0; font-size: 12px; font-weight: 500; color: var(--text); }
.timeline .clip-story .clip-label b { font: 600 11px var(--sans); color: var(--faint); }
.timeline .clip-story .filmstrip, .timeline .clip-story .clip-cut { display: none; }
@container story (min-height: 54px) {
  .timeline .clip-story { border-radius: 10px; }
  .timeline .clip-story .clip-label { height: 22px; }
  .timeline .clip-story .filmstrip { display: flex; }
  .timeline .clip-story .clip-cut { display: block; top: 22px; }
}
/* Short steps (the trocar, the removal) keep only their number, centred, and the narrowest nothing; the title still names them. */
@container clip (max-width: 40px) {
  .timeline .clip-story .clip-label { justify-content: center; padding: 0 2px; }
  .timeline .clip-story .clip-label > span { display: none; }
}
@container clip (max-width: 12px) { .timeline .clip-story .clip-label b { display: none; } }
.timeline .filmstrip i { border-right-color: rgb(255 255 255 / 60%); }
.timeline .clip-story[data-gap=true] { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.timeline .clip-story[data-gap=true] .clip-label { color: var(--faint); font-weight: 400; background: transparent; border-bottom-color: transparent; }
.timeline .clip-story[data-active=true] { background: var(--accent-soft); box-shadow: none; }
.timeline .clip-story[data-active=true] .clip-label, .timeline .clip-story[data-active=true] .clip-label b { color: var(--accent-text); }
.timeline .clip-object { border-radius: 999px; height: calc(var(--object-row) - 2px); padding: 0 7px; font-size: 10.5px; color: #2e302a; }
.timeline .clip-object[data-active=true] { box-shadow: 0 0 0 2px var(--accent); }
.timeline .range-band { background: rgb(85 108 152 / 9%); border-inline: 0; }
.timeline .playhead { width: 2px; margin-left: -1px; border-radius: 1px; background: var(--playhead); }
.timeline .playhead span { left: -4px; top: -3px; width: 10px; height: 10px; border-radius: 50%; }
.timeline .skimmer { background: rgb(0 0 0 / 22%); }
.timeline .skimmer span { border-radius: 6px; font: 500 11px var(--sans); background: #2e302a; }
.timeline .timeline-scroll { scrollbar-color: #d6d3c9 transparent; }
.timeline .icon-button:hover { background: var(--fill); color: var(--text); }

@media (max-width: 1100px) {
  .app { --inspector-min: 430px; }
  .panel-report { padding-inline: 20px; }
}
@media (max-height: 800px) and (min-width: 901px) {
  .app { --split: 12px; grid-template-rows: auto minmax(12px, 1fr) auto 12px auto minmax(12px, 1fr); }
  .site-header { min-height: 60px; padding-block: 8px; }
  .timeline { --h-story: 84px; --object-row: 13px; }
  .panel-report { padding: 8px 18px 12px; }
}
@media (max-width: 900px) {
  .app { --gutter: 12px; height: auto; min-height: 100vh; row-gap: 12px; grid-template-columns: 12px minmax(0, 1fr) 12px; grid-template-rows: auto; grid-template-areas: "toolbar toolbar toolbar" ". viewer ." ". timeline ." ". browser ."; padding-bottom: 12px; }
  .viewer { container-type: normal; display: block; }
  .viewer-stage { width: 100%; aspect-ratio: auto; }
  .now-playing { margin-top: 10px; grid-template-columns: minmax(0, 1fr); }
  .media-credit { grid-column: 1; grid-row: auto; justify-items: start; text-align: left; margin-top: 6px; }
  .site-nav > a:not(.site-button) { display: none; }
  .site-button { min-height: 36px; padding: 6px 14px; font-size: 14px; }
  .site-header { min-height: 60px; gap: 16px; }
}
@media (max-width: 520px) {
  .site-brand { --tensorgical-name-size: 18px; gap: 8px; }
  .site-brand img { width: 26px; height: 26px; }
}