/* R//LINK visual system. Loaded after the compact legacy sheets so the layout
   remains predictable across Pages, desktop displays, tablets and phones. */
:root {
  --bg: #0a0c0e;
  --surface: #121619;
  --surface-raised: #171c20;
  --line: #2c3439;
  --line-soft: #22292e;
  --ink: #f2f0ea;
  --muted: #9aa4a8;
  --teal: #8de5d0;
  --red: #e85d63;
  --amber: #e3b460;
}

html, body { min-width: 0; overflow-x: hidden; }
body { background: var(--bg); color: var(--ink); letter-spacing: .002em; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .32; background-image: linear-gradient(#ffffff05 1px, transparent 1px), linear-gradient(90deg, #ffffff05 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(to bottom, #000, transparent 72%); }
#app { position: relative; min-width: 0; }
.shell { max-width: 1280px; }
.card, .cockpit-rail section, .safety-panel, .mini-card { border-color: var(--line); border-radius: 6px; background: var(--surface); box-shadow: none; }
.button { min-height: 44px; border-radius: 5px; border-color: #3a454b; background: #151b1f; text-transform: uppercase; letter-spacing: .075em; font-size: .7rem; }
.button:hover:not(:disabled) { background: #1d272b; transform: none; }
.button.primary { background: var(--teal); border-color: var(--teal); color: #08211d; }
.button.stop { background: var(--red); border-color: var(--red); }
.status { border-radius: 4px; padding: 5px 7px; }
.eyebrow { color: var(--teal); font-size: .65rem; letter-spacing: .18em; }

.nav { height: 68px; border-color: var(--line-soft); }
.brand { letter-spacing: .12em; }
.nav-links { gap: 18px; font-size: .84rem; }
.footer { border-color: var(--line-soft); color: var(--muted); }
.hero { padding-top: clamp(72px, 11vw, 140px); }
.hero h1 { max-width: 760px; font-size: clamp(3.15rem, 6.7vw, 6.1rem); }
.hero-node { border-left: 2px solid var(--teal); }
.section { border-color: var(--line-soft); }
.process-grid { border-radius: 6px; border-color: var(--line); }
.process-grid article { min-height: 185px; }
.grid .card { min-height: 150px; }
.cube-callout { border-bottom: 1px solid var(--line-soft); }

/* Console: camera is the primary frame, controls are always visible and STOP
   stays in the header rather than being buried in a vertical rail. */
.session-shell { max-width: 1560px; padding-bottom: 48px; }
.console-header { position: sticky; z-index: 4; top: 0; min-height: 66px; background: #0a0c0ef2; backdrop-filter: blur(12px); border-color: var(--line); }
.console-meta { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; letter-spacing: .04em; }
.cockpit { grid-template-columns: 248px minmax(0, 1fr); gap: 12px; }
.cockpit-rail { gap: 10px; }
.cockpit-rail section { padding: 15px; }
.stop-zone { border-color: #7b363c !important; background: #261417 !important; }
.cockpit-main { grid-template-columns: minmax(0, 1.55fr) minmax(330px, .8fr); gap: 12px; }
.media-card { min-height: 0; padding: 16px; }
.media-stage { min-height: clamp(370px, 58vh, 690px); margin-top: 13px; border-radius: 4px; border-color: #334047; background: #080b0d; }
.media-stage::before { content: "CUBE #001 / OBSERVATION BUS"; position: absolute; top: 10px; left: 12px; z-index: 2; color: #d7e6e2; font: 600 .61rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-shadow: 0 1px 4px #000; }
.media-placeholder { max-width: 320px; }
.media-placeholder span { border-radius: 4px; width: 50px; height: 50px; background: #111a1d; }
.media-controls { padding-top: 11px; }
.media-controls span { margin-left: auto; font-size: .68rem; }
.control-card { min-height: 0; padding: 16px; }
.tabs { gap: 4px; margin: -2px 0 18px; overflow-x: auto; }
.tab { flex: 1 0 auto; padding: 11px 9px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.tab.active { background: #162724; border-bottom-color: var(--teal); }
.tool-heading p:not(.eyebrow) { line-height: 1.55; }
.control-feedback { border-left: 2px solid var(--teal); padding: 8px 10px; background: #10191b; }
.control-feedback.error { border-left-color: var(--red); background: #251417; }
.cartesian-controls { border-radius: 5px; background: #0e1316; }
.cartesian-button { border-radius: 5px; background: #162025; }
.z-button, .gripper .button { min-height: 50px; }
.gripper { margin-bottom: 12px; }
details { border-top: 1px solid var(--line-soft); padding-top: 11px; }
summary { font-size: .75rem; }

/* A read-only blueprint is deliberately framed as a reference, not a fake 3D twin. */
.blueprint-panel { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(0, 1.1fr); gap: 22px; align-items: center; min-height: 330px; }
.blueprint-panel h2 { margin: 0; font-size: 1.55rem; }
.blueprint-panel p { margin: 8px 0; }
.blueprint-figure { position: relative; min-height: 265px; overflow: hidden; border: 1px solid #3a484d; border-radius: 4px; background-color: #0c1215; background-image: linear-gradient(#8de5d018 1px, transparent 1px), linear-gradient(90deg, #8de5d018 1px, transparent 1px); background-size: 24px 24px; }
.blueprint-origin, .blueprint-tcp, .blueprint-frame { position: absolute; z-index: 2; font: 700 .61rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.blueprint-origin { left: 24px; bottom: 31px; color: var(--ink); }
.blueprint-tcp { right: 22px; top: 39px; color: var(--teal); }
.blueprint-frame { color: var(--muted); }.frame-x { right: 18px; bottom: 24px; color: #e87878; }.frame-y { right: 18px; bottom: 44px; color: var(--teal); }.frame-z { right: 18px; bottom: 64px; color: #87b7eb; }
.link { position: absolute; display: block; height: 9px; border: 1px solid var(--teal); background: #8de5d026; transform-origin: left center; }.link-a { left: 49px; bottom: 59px; width: 113px; transform: rotate(-56deg); }.link-b { left: 111px; bottom: 152px; width: 105px; transform: rotate(19deg); }.link-c { left: 206px; bottom: 117px; width: 64px; transform: rotate(-48deg); }
.blueprint-readings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 17px; border-top: 1px solid var(--line); }
.blueprint-readings div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font: .67rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }.blueprint-readings div:nth-child(odd) { padding-right: 12px; }.blueprint-readings div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--line-soft); }.blueprint-readings span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }.blueprint-readings strong { color: var(--ink); white-space: nowrap; }

@media (max-width: 1120px) {
  .cockpit { grid-template-columns: 210px minmax(0, 1fr); }
  .cockpit-main { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); }
  .media-stage { min-height: clamp(350px, 53vh, 600px); }
}

@media (max-width: 920px) {
  .cockpit { grid-template-columns: 1fr; }
  .cockpit-rail { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .cockpit-rail .stop-zone { grid-column: auto; margin-top: 0; }
  .cockpit-main { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); }
  .cockpit-rail h2 { font-size: 1rem; }
}

@media (max-width: 720px) {
  .shell, .session-shell { padding-left: 14px; padding-right: 14px; }
  .nav { height: 60px; }.nav .status { margin-left: auto; }.nav-links { display: none; }
  .hero { padding: 68px 0 54px; }.hero h1 { font-size: clamp(2.85rem, 15vw, 4.2rem); }
  .console-header { align-items: stretch; gap: 10px; padding: 11px 0; }
  .console-header .brand { font-size: .85rem; }.console-meta { order: 3; gap: 6px; }.console-actions { width: auto; margin-left: auto; }.console-actions .button { flex: 0 1 auto; min-height: 43px; padding-left: 10px; padding-right: 10px; }
  .cockpit { padding-top: 10px; }.cockpit-main { display: flex; flex-direction: column; }.media-card { order: 1; width: 100%; }.control-card { order: 2; width: 100%; }
  .cockpit-rail { display: grid; grid-template-columns: 1fr 1fr; order: 3; }.cockpit-rail .stop-zone { display: none; }.cockpit-rail section { padding: 12px; }.cockpit-rail section:first-child { grid-column: span 2; }
  .rail-status { display: none; }
  .media-stage { min-height: min(55vh, 440px); }.media-controls span { width: 100%; margin-left: 0; }
  .control-card { padding: 14px; }.cartesian-controls { padding: 14px 10px; }.cartesian-button { width: 64px; height: 64px; }.xy-pad { width: 226px; height: 226px; }
  .z-controls { gap: 8px; }.z-button, .gripper .button { min-height: 52px; }.gripper { gap: 8px; }
  .blueprint-panel { grid-template-columns: 1fr; min-height: 0; }.blueprint-figure { min-height: 220px; }.blueprint-readings { margin-bottom: 8px; }
}

@media (max-width: 390px) {
  .console-actions .button { font-size: .62rem; letter-spacing: .045em; }.console-meta { font-size: .62rem; }
  .cartesian-button { width: 60px; height: 60px; }.xy-pad { width: 212px; height: 212px; }
  .blueprint-readings { grid-template-columns: 1fr; }.blueprint-readings div:nth-child(odd), .blueprint-readings div:nth-child(even) { padding-left: 0; padding-right: 0; border-left: 0; }
}