/* ARC live/preview additions.
   Deliberately kept OUTSIDE myportal/static/arc_replay/ so that re-syncing the
   sibling team's build with `cp -R auto_research_demo_framework/arc-replay/
   demo-static/ myportal/static/arc_replay/` can never clobber this file. The two
   <link>/<script> tags this needs are re-inserted into their index.html by
   myportal/static/arc_live/patch_player.py.

   Their styles.css is five stacked patch layers at equal specificity, so source
   order decides the winner. This file loads after it, which is why plain
   selectors are enough and !important is only used where an animation or an
   inline style has to be beaten. */

/* ---------------------------------------------------------------- mode switch */

/* Matches .reasoner-effort-row / .timeline-filters, sized to the 38px / 12px
   radius language shared by .speed, .icon-button and .primary-button. */
#arcModeSwitch {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 38px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(16, 21, 34, 0.78);
  flex: 0 0 auto;
}

#arcModeSwitch button {
  height: 30px;
  padding-inline: 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

#arcModeSwitch button:hover {
  border-color: rgba(156, 130, 255, 0.38);
}

#arcModeSwitch button.active {
  color: #f4f0ff;
  border-color: rgba(156, 130, 255, 0.6);
  background: linear-gradient(180deg, rgba(126, 102, 238, 0.92), rgba(84, 90, 210, 0.88));
  box-shadow: 0 8px 18px rgba(103, 84, 205, 0.28);
}

/* The topbar third track is minmax(560px,auto) and its controls already total
   ~865px at max-content, so it overflows before this switch is added. Give the
   scenario picker a ceiling and let the run pill shed fields early. */
.arc-preview-chrome .scenario-control { max-width: 190px; }
.arc-preview-chrome .scenario-control span { display: none; }

@media (max-width: 1600px) {
  .scenario-control { max-width: 210px; }
  #arcModeSwitch button { padding-inline: 9px; letter-spacing: 0.06em; }
}

@media (max-width: 1320px) {
  .scenario-control span { display: none; }
  #arcModeSwitch button { padding-inline: 7px; font-size: 9px; }
  .run-pill > span:nth-of-type(4) { display: none; }
}

/* ------------------------------------------------------------ preview banner */

/* Honesty strip. The two shipped recordings are grounded in real verifier
   studies; a preview run is composed on demand, so it must never be mistaken
   for one. Lives inside .graph (which is position:relative) rather than as an
   eighth .shell grid child - their grid-template-rows is redefined at five
   patch layers and two breakpoints, and this needs no layout surgery. */
#arcPreviewBar {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(156, 130, 255, 0.22);
  background: linear-gradient(90deg, rgba(64, 49, 111, 0.5), rgba(10, 14, 25, 0.72));
  backdrop-filter: blur(10px);
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  cursor: pointer;
}

#arcPreviewBar[hidden] { display: none; }

#arcPreviewBar .arc-tag {
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid rgba(156, 130, 255, 0.42);
  border-radius: 999px;
  background: rgba(156, 130, 255, 0.12);
  color: #cfc4ff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#arcPreviewBar .arc-bar-copy {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reset lives here rather than in the composer: dragging means the composer is
   shut, and a control you cannot reach while you need it is not a control. */
#arcPreviewBar .arc-bar-action {
  flex: 0 0 auto;
  height: 22px;
  padding-inline: 9px;
  border: 1px solid rgba(156, 130, 255, 0.3);
  border-radius: 7px;
  background: rgba(16, 21, 34, 0.7);
  color: var(--muted);
  font: inherit;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

#arcPreviewBar .arc-bar-action:hover { border-color: rgba(156, 130, 255, 0.6); color: var(--text); }

/* ------------------------------------------------------------- mission composer */

/* Kept deliberately short: the left node column sits at x=18% and y=29%/70%, so
   a tall panel here swallows the pointer for globus and the verifier. Capped so
   it clears the lower node, and it closes itself once a run is composed. */
#arcComposer {
  position: absolute;
  z-index: 39; /* above .inspector (30) and .active-alert (34) */
  left: 16px;
  top: 44px; /* clears the 30px preview strip */
  width: min(455px, calc(100% - 350px));
  max-height: min(330px, calc(100% - 70px));
  display: grid;
  gap: 8px;
  padding: 12px 13px 13px;
  overflow-y: auto;
  border: 1px solid rgba(156, 130, 255, 0.26);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(24, 18, 46, 0.97), rgba(8, 10, 20, 0.98));
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
}

#arcComposer[hidden] { display: none; }

#arcComposer header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

#arcComposer header small {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted2);
}

#arcComposer header strong { font-size: 13px; }

#arcComposer header button {
  width: 31px;
  height: 31px;
  border: 1px solid rgba(151, 175, 231, 0.14);
  border-radius: 9px;
  background: rgba(12, 16, 28, 0.72);
  color: inherit;
  font-size: 15px;
  cursor: pointer;
}

#arcComposer label {
  display: grid;
  gap: 3px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted2);
}

#arcComposer textarea,
#arcComposer select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid rgba(151, 175, 231, 0.16);
  border-radius: 11px;
  background: rgba(12, 16, 28, 0.72);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
  resize: vertical;
}

#arcComposer textarea { min-height: 56px; }

#arcComposer textarea:focus,
#arcComposer select:focus {
  outline: 0;
  border-color: rgba(156, 130, 255, 0.5);
}

/* family / pace / horizon on one line: a taller panel reaches the lower-left
   node and swallows its pointer events. */
.arc-composer-row {
  display: grid;
  grid-template-columns: 1.25fr 1fr 0.62fr;
  gap: 6px;
}

.arc-composer-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

#arcComposer .arc-go {
  flex: 1 1 auto;
  height: 38px;
  border: 1px solid rgba(156, 130, 255, 0.5);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(126, 102, 238, 0.96), rgba(84, 131, 230, 0.9));
  box-shadow: 0 8px 22px rgba(103, 84, 205, 0.23);
  color: #f6f4ff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}

#arcComposer .arc-go[disabled] {
  opacity: 0.55;
  cursor: progress;
}

#arcComposer .arc-status {
  min-height: 15px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

#arcComposer .arc-status.error { color: var(--rose); }

#arcComposer .arc-note {
  margin: 0;
  padding-top: 7px;
  border-top: 1px dashed rgba(156, 130, 255, 0.28);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--muted2);
}

/* --------------------------------------------------------------------- drag */

/* Only armed in preview mode. Replay keeps the authors' fixed topology, which
   docs/VISUAL_LANGUAGE.md and docs/HANDOFF.md both call intentional. */
.arc-drag-armed #nodeLayer .node { cursor: grab; }

.arc-drag-armed #nodeLayer .node,
.arc-dragging-now .node {
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* renderNodes() rewrites node.className every frame, so drag state has to ride
   on a data attribute (dataset.status / dataset.health are reassigned, but
   unrelated data-* keys survive). */
#nodeLayer .node[data-arc-drag="1"] {
  z-index: 20;
  cursor: grabbing;
  /* Their .node transition covers transform/border/shadow, and .node:hover plus
     the brain-breath keyframes both re-declare transform. Dragging writes
     left/top instead, so the only thing to kill is the per-frame cost. */
  backdrop-filter: none !important;
  transition: none !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(156, 130, 255, 0.45);
}

/* .legend sits at z-index 9 in the bottom-left corner, right where the verifier
   node lives, and has no pointer-events:none - it would swallow the drag. */
.arc-dragging-now .legend,
.arc-dragging-now .graph-scanline {
  pointer-events: none;
}

.arc-dragging-now { cursor: grabbing; }

/* The preview strip stays inside .graph, so the inspector would overlap its
   right-hand end. Nudge the inspector clear while a preview is on screen; the
   "preview only" tag is on the left and was never covered. */
.arc-preview-chrome .inspector { top: 44px; }

@media (max-width: 780px) {
  #arcComposer { width: auto; right: 16px; }
  #arcModeSwitch { height: 32px; }
  #arcModeSwitch button { height: 24px; padding-inline: 6px; font-size: 8.5px; }
}

/* ------------------------------------------------------------ module console */

/* A "Console" button injected into their .inspector-head. renderInspector()
   updates that header field by field and never rebuilds it, so this survives. */
#arcConsoleOpen {
  height: 31px;
  padding-inline: 11px;
  border: 1px solid rgba(85, 216, 255, 0.35);
  border-radius: 9px;
  background: rgba(85, 216, 255, 0.12);
  color: #bfeeff;
  font: inherit;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

#arcConsoleOpen:hover { border-color: rgba(85, 216, 255, 0.62); color: #eafaff; }

/* Own overlay rather than a 7th inspector tab: their tab dispatch is an if-chain
   ending in an `io` fallthrough, so an unknown tab name would render the wrong
   panel, and renderInspector() rewrites inspector-body every frame. */
#arcConsole {
  position: absolute;
  z-index: 40; /* above .inspector (30), .active-alert (34) and the composer */
  left: 18px;
  right: 18px;
  top: 44px;
  bottom: 18px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid rgba(85, 216, 255, 0.28);
  border-radius: 18px;
  background: #05070d;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.62);
  overflow: hidden;
}

#arcConsole[hidden] { display: none; }

#arcConsole > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  background: rgba(12, 17, 30, 0.9);
}

#arcConsole > header small {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted2);
}

#arcConsole > header strong { font-size: 13px; }

.arc-console-actions { display: flex; align-items: center; gap: 8px; }

.arc-console-actions a {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(16, 21, 34, 0.8);
  color: var(--cyan);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.arc-console-actions a:hover { border-color: rgba(85, 216, 255, 0.45); }

.arc-console-actions button {
  width: 31px;
  height: 31px;
  border: 1px solid rgba(151, 175, 231, 0.14);
  border-radius: 9px;
  background: rgba(12, 16, 28, 0.72);
  color: inherit;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

/* .graph is position:relative with a definite height, and this panel pins all
   four edges, so the row track is definite and the iframe gets a real height
   instead of the 150px default. */
.arc-console-body { min-height: 0; background: #070a12; }

#arcConsoleFrame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

#arcConsole[data-empty="1"] .arc-console-body::after {
  content: "This node has no portal page. There is no trained Auto Research engine behind the Reasoning Core.";
  display: grid;
  place-items: center;
  height: 100%;
  padding: 0 22%;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted2);
}

#arcConsole > footer {
  padding: 9px 15px;
  border-top: 1px solid var(--line);
  background: rgba(12, 17, 30, 0.9);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--muted2);
}

/* ------------------------------------------------------------- start screen */

/* Their boot path auto-plays a recording. The page should open with a choice
   instead, so this covers the graph until one is made. Mounted on .workspace for
   the same stacking reason as the console. */
#arcStart {
  position: absolute;
  z-index: 41;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 38%, rgba(28, 22, 54, 0.86), rgba(3, 5, 11, 0.96) 62%);
  backdrop-filter: blur(9px);
}

#arcStart[hidden] { display: none; }

.arc-start-inner {
  display: grid;
  gap: 18px;
  width: min(880px, 100%);
}

.arc-start-inner header { display: grid; gap: 5px; justify-items: center; text-align: center; }

.arc-start-inner header small {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted2);
}

.arc-start-inner header strong { font-size: 21px; letter-spacing: 0.01em; }

.arc-start-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.arc-start-card {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 132px;
  padding: 15px 16px;
  border: 1px solid rgba(151, 175, 231, 0.16);
  border-radius: 15px;
  background: rgba(12, 16, 28, 0.78);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.arc-start-card:hover {
  border-color: rgba(156, 130, 255, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

.arc-start-card small {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted2);
}

.arc-start-card strong { font-size: 13.5px; line-height: 1.35; }
.arc-start-card span { font-size: 11px; line-height: 1.5; color: var(--muted); }

.arc-start-card.arc-start-preview {
  border-color: rgba(156, 130, 255, 0.34);
  background: linear-gradient(165deg, rgba(64, 49, 111, 0.42), rgba(12, 16, 28, 0.86));
}

.arc-start-card.arc-start-preview small { color: #cfc4ff; }

/* Stop is destructive - it kills the engine process - so it should not look like
   the same button as Run. */
#arcComposer .arc-go.arc-stop {
  border-color: rgba(255, 120, 150, 0.55);
  background: linear-gradient(135deg, rgba(214, 74, 104, 0.92), rgba(150, 52, 96, 0.9));
  box-shadow: 0 8px 22px rgba(180, 60, 90, 0.24);
}

/* The strip means something different now: part of this run is real. */
#arcPreviewBar .arc-tag {
  border-color: rgba(88, 227, 173, 0.45);
  background: rgba(88, 227, 173, 0.12);
  color: #b6f4de;
}

#arcPreviewBar .arc-bar-stop {
  border-color: rgba(255, 120, 150, 0.5);
  background: rgba(255, 120, 150, 0.14);
  color: #ffc2cf;
}

#arcPreviewBar .arc-bar-stop:hover { border-color: rgba(255, 120, 150, 0.85); color: #fff; }
#arcPreviewBar .arc-bar-stop[hidden] { display: none; }

/* The sign-in link the console offers when a live run is refused for want of an
   identity. target=_top because the player runs in an iframe and the Globus
   redirect must replace the whole page, not the frame. */
.arc-live-signin {
  color: #7fe3ff;
  text-decoration: underline;
  font-weight: 600;
  white-space: nowrap;
}
.arc-live-signin:hover { color: #b8f0ff; }

/* ==================================================== projector polish pass ===

   Everything below this line is one pass, judged from four metres on a
   projector rather than from a desk. The measured complaints it answers:

     - main.shell carries min-height:760px against a 748px iframe, so the footer
       is sliced and 306px of the 748 goes to readouts that are zeroes at rest;
     - .node is floor-pinned at 164px (brain 210px), which is taller than the
       gap between the outer rows, so the centre bubble permanently overlaps
       DToR and SciKGFM and those two are clipped by the workspace edges;
     - .inspector-head is a three-column grid holding four children, so the
       close button wraps onto a row of its own and "CONSOLE" renders "CONSO";
     - 108 of 196 text roles are <=10px, several of them at 8px;
     - the LIVE composer lands on the graph, which is the landing screen.

   The two theses fight each other - bigger type wants more room, the shell
   wants less - so the type rises only where a box was measured to hold it, and
   the room comes from the shell chrome and the node floor, not from the type.
   Left deliberately alone: the palette, the glass/starfield/aurora/glow, the
   node icons and their sizes, the authored node topology and its transforms,
   the headline sizes (.node-name strong, .node-op, .mission strong,
   .metrics strong) and the six inspector tabs.

   All of it is gated at min-width:781px: `main.shell` (0,0,1,1) outranks their
   `.shell` (0,0,1,0) even inside their @media(max-width:780px), so an
   ungated row template would silently delete their whole phone layout. Where
   they tune a property per breakpoint (plan-rail and metrics horizontal
   padding, tab-strip inline padding) this uses the -block longhand so only the
   axis being reclaimed is touched. */

/* ------------------------------------------- 1. shell chrome -> the graph */

/* 306px of chrome above a 426px graph. Compressing the six chrome rows and the
   padding that fills them gives the workspace 472px at 1600x1000 and 552px at
   1920x1080, and un-slices the footer. The padding companions are not
   decoration: without them the metric cards clip against their own shorter
   row. min-height is released only where the viewport is tall enough to make
   the release safe - below 680px their 760px floor still stands, i.e. exactly
   today's behaviour, never worse. */
@media (min-width: 781px) {
  main.shell { grid-template-rows: 64px 36px 52px 40px 62px minmax(0, 1fr) 22px; }
  .metrics { padding-block: 5px; }
  .metrics article { padding-block: 6px; }
  .invoke-rail { padding-block: 3px; }
  .plan-rail { padding-block: 6px 5px; row-gap: 5px; }
  .plan-rail > header { gap: 1px; }
  .plan-step { min-height: 0; padding-block: 5px; }
}

/* 2026-09-05: gate lowered 680 -> 600. This portal always hands the player at
   least 700px (Auto_Research.html), so the change is invisible here; it matters
   for any other embedder with a shorter frame, where the old gate put a 760px
   shell into a 620px box - the clipping this whole section exists to remove.
   600px is the measured floor at which the six chrome rows still hold their own
   content. */
@media (min-width: 781px) and (min-height: 600px) {
  main.shell { min-height: 0; }
}

/* ------------------------------------------ 2. the node floor -> the graph */

/* The seven bubbles span ~478px inside a 426px box because .node is pinned at
   min-height:164px and .node.brain at 210px - taller than the gap the authored
   layout leaves between the outer rows, which is why the centre node overlaps
   both neighbours at rest and not only while animating. Releasing the floor
   lets each card be the height of its own contents; the padding trim pays for
   the type floor in section 4 so the card still ends up shorter than today.
   .node-foot is the one thing deliberately dropped: it repeats the header's
   status glyph as "IDLE" and the .node-progress bar's value as a number, and
   at six overlapping cards that ghost row was bleeding through the pile-up. */
@media (min-width: 781px) {
  .node { min-height: 0; padding-block: 10px 9px; }
  .node.brain { min-height: 0; padding-block: 12px 11px; }
  .node-foot { display: none; }
}

/* ---------------------------------------------- 3. the inspector header */

/* Their .inspector-head is grid-template-columns:auto minmax(0,1fr) auto and
   holds four children since live.js added the Console button, so the close
   button wraps to a second row on its own and the header eats 133px of a 406px
   panel. A fourth track puts it back on row one. #arcConsoleOpen is an id, so
   it beats their .inspector-head button{width:31px} with no !important, and an
   auto width in an auto track is content-sized - "CONSOLE" can never clip
   again. The tab strip gives up vertical padding only; their inline padding is
   tuned per breakpoint precisely to stop the six labels clipping. */
.inspector-head { grid-template-columns: auto minmax(0, 1fr) auto auto; }
#arcConsoleOpen { width: auto; }
.inspector-tabs { padding-block: 6px; }
.inspector-tabs button { padding-block: 8px; }

/* ------------------------------------------------------- 4. the type floor */

/* Nothing a visitor is meant to read below 10.5px. Sizes are per role, not a
   global scale: 10.5px for eyebrow labels and status words, 11px for chips and
   secondary readouts. Headline roles are already large and are untouched.
   Three roles are named exceptions: .node-span-clock's label, whose row is
   `minmax(0,1fr) auto` with zero slack (raising the value alone is safe, but
   raising the label truncates the centre node's operation sentence) and the
   value beside it, which goes to 9.5px rather than 10.5px for the same reason.
   The third is .plan-step-copy small, the module name under each plan chip: at
   1246px it needs 2px more than the chip has and clips (measured), and the
   same seven module names are already spelled out at 10.5px in the CALLS row
   two bands above it. */

/* topbar, mission, rails. The topbar's third track is `auto` in a grid whose
   first two tracks carry 260px/460px minimums, so its controls already overflow
   leftward over the run pill before anything here is applied. That is why the
   three control roles are raised only above 1320px - the width at which their
   own sheet stops shedding fields - and why the trajectory picker gives back
   the width the raise costs. Measured at 1566: the REPLAY|LIVE pill sat 14px
   over the PLAYBACK readout before this pass and 23px over it after the raise;
   with the cap it clears the readout by 5px at rest and rides 6px over its
   longest playback value - better than the baseline in both states. The
   overflow itself is theirs and is not fixed here; at 1246px it is 200px wide
   and closing it means dropping controls, which is a redesign, not a polish. */
.run-pill small { font-size: 10.5px; letter-spacing: .1em; }
.mission em { font-size: 11px; }

.invoke-rail > header span { font-size: 10.5px; }
.invoke-chip small { font-size: 11px; }
.plan-rail > header span,
.plan-rail > header em { font-size: 11px; }
.plan-step-index,
.plan-step-icon { font-size: 11px; }

@media (min-width: 1321px) {
  .speed > span,
  .scenario-control > span { font-size: 10.5px; }
  #arcModeSwitch button { font-size: 10.5px; }
}

@media (min-width: 781px) and (max-width: 1600px) {
  .scenario-control { max-width: 182px; }
}

/* the bubbles */
.node-name small { font-size: 11px; }
.status-glyph small { font-size: 10.5px; }
.node-telemetry { font-size: 11px; }
.node-span-clock strong { font-size: 9.5px; }
.reasoner-route-chip { font-size: 11px; }

/* event stream + footer */
.timeline-title small { font-size: 11px !important; } /* beats their 9px!important */
.timeline-filters button { font-size: 10.5px; }
.event-copy small { font-size: 11px; }
.event-icon { font-size: 13px; }
.footer { font-size: 11px; }

/* the inspector's own family of 6-9px roles; section 3 pays for the extra
   scroll height several times over. The list is a measured census of what is
   still under the floor after the rules above, not a guess: their build puts
   the trace lines in `.trace-list span strong`, the log filters in
   `.log-levels button` at 6px - the smallest text on the page - and the
   section captions in `.section-heading`. */
.inspector-title small,
.inspector-title em { font-size: 10.5px; }
.inspector-tabs button { font-size: 11px; }
#arcConsoleOpen { font-size: 11px; }
.inspector-body small,
.inspector-body em,
.inspector-body time,
.inspector-body code,
.workspace-adapter-badge { font-size: 10.5px; }
.inspector-body .section-heading h3,
.inspector-body .section-heading span,
.inspector-body .workspace-contract-strip > span,
.inspector-body .log-levels button,
.inspector-body .trace-list strong,
.inspector-body .span-trace-list span,
.inspector-body .span-trace-list p,
.inspector-body .assigned-plan-list strong { font-size: 10.5px; }
.inspector-body .workspace-hero-card p,
.inspector-body .workspace-stat-card p { font-size: 11px; }

/* the reasoner model panel is a second overlay with its own 8-10px family */
.reasoner-model-panel h3,
.reasoner-model-panel small,
.reasoner-model-panel p,
.reasoner-model-panel .reasoner-provider span { font-size: 10.5px; }

/* the landing screen's own empty state */
.timeline-list p.empty { font-size: 11px; }

/* this file's own sub-floor roles - LIVE is the landing state, so its chrome
   cannot be the smallest text on the page. (#arcModeSwitch is raised in the
   topbar block above, gated on the width where the row still has room.) */
#arcComposer label,
#arcComposer header small,
#arcPreviewBar .arc-tag,
#arcPreviewBar .arc-bar-action { font-size: 10.5px; }

/* ------------------------------------------------ 4b. one cue for the fold */

/* Section 3 grew the panel body from 218px to 315px, but the deepest tabs
   still hold 800-1200px of content, and their sheet's scrollbar is
   `scrollbar-width:thin` over a near-transparent track - on a projector the
   body just stops mid-sentence and reads as broken text rather than as a
   fold. One 26px gradient in the panel's own ground, no label, no pill, no
   scrollbar restyle: it is the panel's bottom edge saying "there is more".
   Driven by the body's own scroll timeline so it clears completely at the end
   of travel and never dims the last line. Degradation is safe in both
   directions: where animation-timeline is unsupported the declaration is
   dropped, duration stays 0s and `both` fill lands the cue on its `to` state,
   which is opacity 0 - i.e. no cue rather than a permanent bar. Their
   prefers-reduced-motion block forces animation-duration:.001ms on every
   pseudo-element, which a scroll timeline ignores and which lands on the same
   opacity 0 if it does not. */
.inspector-body { scroll-timeline: --arc-inspector-fold block; }
.inspector { timeline-scope: --arc-inspector-fold; }

@keyframes arc-inspector-fold { from { opacity: 1 } to { opacity: 0 } }

.inspector::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 26px;
  border-radius: 0 0 20px 20px;
  pointer-events: none;
  background: linear-gradient(rgba(9, 13, 23, 0), rgba(9, 13, 23, 0.94));
  opacity: 0;
  animation-name: arc-inspector-fold;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: --arc-inspector-fold;
  animation-range: 82% 100%;
}

/* ---------------------------------------------------------- 5. the dim floor */

/* Six of seven bubbles ship at opacity .38 / saturate(.45) / brightness(.82).
   On a projector their titles measure 1.5:1 against their own card - the graph
   reads as one running module and six smudges. .52 with the saturation and
   brightness mostly restored banks most of the contrast while the running
   card keeps scale(1.12), its accent ring and its glow, so "which module is
   running now" is still the loudest thing on screen. This is only safe
   because section 2 closed the pile-up first: at .38 the overlap read as
   ghosting, at .52 it would have read as a bug. Same argument for the invoke
   chips - .hot is restated because app.js emits `hot` and `used` together and
   this file loads after theirs. */
.node:not(.active) { opacity: .52; filter: saturate(.62) brightness(.96); }
.invoke-chip { opacity: .74; }
.invoke-chip.used { opacity: .96; }
.invoke-chip.hot { opacity: 1; }

/* ------------------------------------------------- 6. the LIVE landing screen */

/* LIVE is where the page opens and the composer opens with it, 455px wide over
   the left of the graph - so the first thing a visitor sees of a seven-module
   architecture is five of its modules. The event column beside it is the only
   free space on the screen and is empty until the run they are about to start
   produces something. Right-aligned to .workspace (the composer's offset
   parent) it lands beside the graph, clear of every node and clear of the
   inspector's 332px right offset, so the panel's close button stays clickable
   with a bubble open. Their own 1420px breakpoint is the gate: below it the
   inspector geometry changes and 275px is what still clears both. */
@media (min-width: 1421px) {
  #arcComposer { left: auto; right: 10px; width: 300px; }
}

@media (min-width: 1101px) and (max-width: 1420px) {
  #arcComposer { left: auto; right: 10px; width: 275px; }
}

/* ------------------------------------------- 8. the preview strip vs the graph */

/* The strip is 30px of full-width gradient pinned to the top of the graph, and
   the graph's top-centre node is laid out at `top:16%` with a translate(-50%,-50%),
   which puts its card top at the graph's very first pixel. So the strip has always
   sat on that card's title: measured 18px of a 36px title row, i.e. DToR renders
   with an icon, a subtitle and no name - the first module a visitor's eye lands on.
   The node cannot move (its position is an inline percentage written by their JS,
   and the edge layer is positioned separately), so the strip gives way instead:
   the bar itself stops painting, and its three groups carry their own background.
   Between the copy and the buttons there is now a transparent gap, and the gap is
   where the top-centre card is. `.arc-bar-copy` shrinks to its text rather than
   flexing across the whole width, which is what made the gap possible. */
#arcPreviewBar {
  background: none;
  border-bottom: 0;
  backdrop-filter: none;
  pointer-events: none;
  gap: 10px;
}

#arcPreviewBar > * { pointer-events: auto; }

#arcPreviewBar .arc-bar-copy {
  flex: 0 1 auto;
  padding: 3px 10px;
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(64, 49, 111, 0.72), rgba(10, 14, 25, 0.82));
  backdrop-filter: blur(10px);
}

/* The tag and the two actions get the same treatment so the row still reads as
   one control strip rather than three loose chips. */
#arcPreviewBar .arc-tag {
  backdrop-filter: blur(10px);
}

#arcPreviewBar .arc-bar-action {
  backdrop-filter: blur(10px);
  background: rgba(16, 21, 34, 0.82);
}

/* The buttons sit at the right; pushing them there with margin-left:auto is what
   opens the gap in the middle instead of distributing it between every child. */
#arcPreviewBar .arc-bar-action:first-of-type { margin-left: auto; }

/* --------------------------------------- 9. long values inside the inspector */

/* Same defect as the sliced "CONSO" button, one level down: the workspace stat
   cards are a 3-column grid of 173px cells, but their <small>/<strong>/<p> lay
   out at their text's natural width - measured 1027px inside a 173px card, so
   860px of a frozen-variant id or a slot list ran under the panel edge and was
   clipped mid-word with no ellipsis. The body does not scroll horizontally
   (scrollWidth == clientWidth), so that text was simply gone.
   A grid item's default min-width is auto, which is what let the cell refuse to
   shrink; min-width:0 lets it, and anywhere-wrapping breaks the identifier
   rather than the layout. The value is clamped to three lines so one very long
   slot list cannot push the rest of the tab below the fold; the full string is
   still in the Overview and Logs tabs. */
.inspector-body article,
.inspector-body .workspace-stat-card,
.inspector-body .workspace-hero-card,
.inspector-body .workspace-model-board > * {
  min-width: 0;
}

.inspector-body article > small,
.inspector-body article > strong,
.inspector-body article > p,
.inspector-body .workspace-stat-card > small,
.inspector-body .workspace-stat-card > strong,
.inspector-body .workspace-stat-card > p {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.inspector-body article > strong,
.inspector-body .workspace-stat-card > strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}