@import url("/branding.css");
/* Shared AMSYS materials: composition varies, product identity stays constant. */
/* `hidden` MEANS HIDDEN, on every page. A class that sets `display` outranks the
   user agent's [hidden] rule -- identical specificity, later origin -- so any
   `el.hidden = true` on a grid or flex element silently did nothing. The flow
   board's empty state rendered beside five declared queues for exactly this
   reason. Every page in this build loads this file, so the guard belongs here
   rather than being remembered ten times. */
[hidden]{display:none!important}
/* A LINK IN PROSE, ON EVERY PAGE. There was no rule for one, so every inline
   link in this build -- the overview's "trust board", the walk link beside an
   excluded sensor -- rendered in the user agent's blue on a near-black panel:
   about 2.4:1, and the one piece of text on the page somebody is meant to click.
   Accent on panel measures 11.19:1. Underlined, because colour alone is not an
   affordance, and offset so the rule does not cut through descenders. */
a:not(.platform-brand):not(.platform-skip):not(.btn){color:var(--platform-accent);
  text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--platform-accent) 55%,transparent)}
a:not(.platform-brand):not(.platform-skip):not(.btn):hover{text-decoration-color:var(--platform-accent)}
a:not(.platform-brand):not(.platform-skip):not(.btn):focus-visible{outline:2px solid var(--platform-accent);
  outline-offset:2px;border-radius:2px}
:root {
  /* --platform-red is fc-api's own `alarm` (GET /v1/modules -> design.palette.dark).
     Ours was #d2362a, which measures 3.79:1 on the ground and 3.38:1 on a panel --
     under 4.5:1, so it could never carry text and every danger control worked
     around it as a border and an icon. #e0645c measures 5.41:1 and 4.83:1 and is
     the value the platform we read from already publishes, so this is one less
     place where we differ from upstream for no reason. */
  --platform-bg:#0c1518;--platform-panel:#132126;--platform-line:#34464c;
  --platform-ink:#edf3f3;--platform-dim:#afbec3;--platform-accent:#9be2d6;
  --platform-red:#e0645c;--platform-warn:#f5c86d;
  --platform-ui:Inter,Aptos,"Segoe UI",Helvetica,Arial,sans-serif;
  --platform-mono:"SFMono-Regular",Consolas,monospace;
  --platform-header-h:76px;--platform-radius:6px;
  /* A SURFACE THAT FLOATS OVER THE 3D SCENE IS DARK IN BOTH THEMES. A camera
     picker sitting on a point cloud, a rail beside a video frame: those panels
     are dark because the thing behind them is dark, not because the app is. So
     they keep dark-theme ink and are declared ONCE here rather than as literals
     scattered through four pages. Deliberately NOT overridden under
     [data-theme="light"] -- that is the whole point of them. */
  --platform-scene-ink:#edf3f3;--platform-scene-dim:#afbec3;--platform-scene-line:#34464c;
  --platform-scene-panel:#132126;
}

/* LIGHT. Derived from fc-api's published light palette
   (GET /v1/modules -> design.palette.light), darkened only where its own value
   could not carry normal text on its own ground:

     role    fc published   measured (ground/panel)   ours      measured
     ink     #16212A        14.41 / 16.34  pass       same      14.41 / 16.34
     dim     #7B8D99         3.03 /  3.44  FAIL       #4A5D6A    6.04 / 6.85
     accent  #0E7C93         4.28 /  4.86  FAIL       #0B6A7E    5.48 / 6.22
     warn    #A5721A         3.69 /  4.18  FAIL       #8A5F12    4.97 / 5.64
     red     #C0392F         4.79 /  5.43  pass       same       4.79 / 5.43
     line    #D3DBE0         1.24 /  1.40  decorative same       1.24 / 1.40

   `dim` takes fc's ink_mid rather than its ink_dim: we carry two text tiers
   where fc carries three, so our dim does the work of their MIDDLE one and has
   to reach 4.5:1. `line` is decorative in both themes -- dividers and card
   edges, never the sole carrier of a control's shape, which is why a button
   also has its label and a badge also has its word.

   DARK REMAINS THE DEFAULT, deliberately. A booth machine whose OS happens to
   be set to light should not surprise anybody the morning of the show, so this
   applies only on an explicit choice, which nav.js persists. */
:root[data-theme="light"]{
  --platform-bg:#EEF1F3;--platform-panel:#FFFFFF;--platform-line:#D3DBE0;
  --platform-ink:#16212A;--platform-dim:#4A5D6A;--platform-accent:#0B6A7E;
  --platform-red:#C0392F;--platform-warn:#8A5F12;
}

/* THE ALTERNATIVE BRAND, SHIPPED AS THE PROOF.
   REDESIGN.md, 3a: the brief was "there's a very real chance I change my mind",
   and that is a constraint on the architecture rather than a caveat on the
   colour. A brand that has never been switched is a brand that cannot be, so
   the swap ships from day one and `verify_brand.mjs` flips it across every page
   and checks that nothing painted its way around it.

   Nothing here is a feature. There is no control for it: `?brand=dell` is how
   the gate reaches it, the same way `?theme=light` reaches the other axis.

   TWO VALUES, AND THEY ARE LUMINANCE TWINS OF THE TEAL ON PURPOSE. The teal
   measures 12.54:1 on the ground and 11.19:1 on a panel in dark, 5.48 and 6.22
   in light. #a0def4 measures 12.54 and 11.19; #0063ad measures 5.46 and 6.20.
   Picking the hue at matched luminance means the swap changes whose product
   this looks like and changes NOTHING about what passes -- so a contrast
   regression can never hide behind a brand change, in either direction.
   Dell's own #0076ce is 3.95:1 in dark and 4.13:1 in light: it is the borrowed
   mark, and it could not carry text on either theme. */
:root[data-brand="dell"]{--platform-accent:#a0def4}
:root[data-theme="light"][data-brand="dell"]{--platform-accent:#0063ad}

html[data-platform-page] body{padding:0;margin:0;overflow:hidden;background:var(--platform-bg);font-family:var(--platform-ui)}
.platform-header{box-sizing:border-box;position:fixed;inset:0 0 auto;z-index:10000;min-height:76px;display:flex;align-items:center;gap:28px;padding:12px 26px;margin:0;background:var(--platform-bg);border-bottom:1px solid var(--platform-line);color:var(--platform-ink);font:14px var(--platform-ui)}
.platform-header *{box-sizing:border-box}
.platform-primary{display:flex;gap:4px;align-items:center;min-width:0}
.platform-header a:not(.platform-brand):not(.platform-skip),.platform-header summary,.platform-header button{color:var(--platform-dim);font:500 13px var(--platform-ui);letter-spacing:0;text-transform:none;border:1px solid transparent;border-radius:var(--platform-radius);padding:0 13px;min-height:44px;display:flex;align-items:center;justify-content:center;text-decoration:none;white-space:nowrap;background:transparent;cursor:pointer}
.platform-header a[aria-current="page"]{color:var(--platform-ink)!important;background:var(--platform-panel)!important;border-color:var(--platform-line)!important}
.platform-header a:hover,.platform-header summary:hover,.platform-header button:hover{background:var(--platform-panel);color:var(--platform-ink)}
.platform-header :focus-visible{outline:2px solid var(--platform-accent);outline-offset:3px}
.platform-actions{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
.platform-header #platform-demo-toggle{border-color:var(--platform-accent);color:var(--platform-accent);font-weight:600}
.platform-header #platform-demo-toggle[aria-pressed="true"]{background:var(--platform-accent);color:var(--platform-bg)}
.platform-header #platform-demo-toggle:hover{background:var(--platform-panel);color:var(--platform-ink)}
.platform-header button{box-shadow:none;text-shadow:none}
.platform-tools{position:relative}
.platform-header .platform-tools summary{list-style:none;border-color:var(--platform-line)}
.platform-tools summary::-webkit-details-marker{display:none}
.platform-tools nav{position:absolute;top:calc(100% + 12px);right:0;width:224px;max-height:min(70vh,560px);overflow:auto;overscroll-behavior:contain;padding:8px;background:var(--platform-panel);border:1px solid var(--platform-line);border-radius:var(--platform-radius)}
/* A SECTION HEADING IS NOT A LINK, and must not be mistaken for a disabled one:
   it is smaller, lettered wide, dim, and carries a rule rather than a target. */
.platform-toolhead{margin:0;padding:0;font:600 10px var(--platform-mono);letter-spacing:.14em;text-transform:uppercase;color:inherit}
/* ENF-871 B: each operator job is a native disclosure. The summary is the
   target (44px tall, full width), the heading sits inside it, and a chevron
   plus the page count say there is more behind it without listing it. */
.platform-toolset{border-block-start:1px solid var(--platform-line)}
.platform-header .platform-tools .platform-toolset>summary{list-style:none;justify-content:space-between;gap:8px;width:100%;min-width:0;min-height:40px;padding:0 9px;border:0;color:var(--platform-dim)}
.platform-toolset>summary::-webkit-details-marker{display:none}
.platform-toolset>summary::after{content:"";inline-size:7px;block-size:7px;border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;transform:rotate(-45deg);flex:none}
.platform-toolset[open]>summary::after{transform:rotate(45deg)}
.platform-toolset[open]>summary{color:var(--platform-ink)}
.platform-toolcount{margin-inline-start:auto;font:500 11px var(--platform-mono);color:var(--platform-dim)}
.platform-toolgroup{display:grid;padding-block-end:6px}
.platform-tools nav a.platform-explore{font-weight:600;color:var(--platform-ink);margin-block-end:4px}
/* The menu's own links sit left, not centred: fourteen centred labels of
   different lengths have no common edge for the eye to run down. */
.platform-tools nav a{justify-content:flex-start;min-height:38px}
.platform-tools:not([open]) nav{display:none}
.platform-tools nav a{justify-content:flex-start!important}
.platform-header svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.platform-skip{position:absolute;left:16px;top:-80px;padding:12px;background:var(--platform-ink);color:var(--platform-bg)}
.platform-skip:focus{top:12px}
.platform-viewport{position:fixed;inset:var(--platform-header-h) 0 0;overflow:auto;transform:translateZ(0);isolation:isolate;scrollbar-gutter:stable}
html[data-platform-page]{--navy:var(--platform-bg);--matte:var(--platform-bg);--panel:var(--platform-panel);--line:var(--platform-line);--ink:var(--platform-ink);--prose:var(--platform-ink);--dim:var(--platform-dim);--faint:var(--platform-dim);--unlit:var(--platform-line);--led-red:var(--platform-accent);--led-amber:var(--platform-warn);--led-green:var(--platform-accent);--dell-lt:var(--platform-accent);--mono:var(--platform-mono)}
html[data-platform-page] :is(button,select,input){font-family:var(--platform-ui);border-radius:var(--platform-radius)}
html[data-platform-page] :is(button,summary,select){min-height:36px}
html[data-platform-page] :is(h1,h2,h3){font-family:var(--platform-ui)}
html[data-platform-page="experience"] .topbar{display:none}
html[data-platform-page="experience"] .app-shell{height:100%;min-height:0;grid-template-rows:minmax(0,1fr) 80px 42px}
html[data-platform-page="experience"] .experience{grid-template-columns:minmax(260px,25%) minmax(0,1fr)}
html[data-platform-page="experience"] .story-panel{padding:26px 24px;gap:16px}
html[data-platform-page="experience"] .story-panel h1{font-size:clamp(32px,3.4vw,56px);max-width:12ch}
html[data-platform-page="experience"] .product-label{font-size:11px}
html[data-platform-page="experience"] .story-bottom{font-size:12px}
/* The demo's own skip link sits on an ink chip; the generic link colour above (mint)
   out-specifies it and measured 1.36:1. Page colour on ink restores the pairing. */
html[data-platform-page] a.skip-link:not(.platform-brand):not(.platform-skip):not(.btn){color:var(--surface-page,var(--platform-bg));background:var(--text-primary,var(--platform-ink));text-decoration:none}
/* demo.css gives every summary a 42px square for its icon-only button; the shared
   menu is a labelled control and must size to its words. */
.platform-header .platform-tools summary{width:auto;min-width:max-content;height:auto;display:flex;align-items:center;justify-content:center;padding-inline:14px;flex:0 0 auto}
/* 1440x900: the narrative, the rail and the spec block must all fit the column. */
html[data-platform-page="experience"] .story-panel{justify-content:flex-start;gap:14px}
html[data-platform-page="experience"] .story-panel h1{margin:12px 0 10px;font-size:clamp(30px,2.8vw,48px)}
html[data-platform-page="experience"] #scene-summary{font-size:14px;line-height:1.5;max-width:40ch}
html[data-platform-page="experience"] .scene-invitation{margin-top:12px}
html[data-platform-page="experience"] .story-bottom{margin-top:auto}
html[data-platform-page="experience"] .proof-list div{padding:6px 0}
html[data-platform-page="experience"] .application{margin-top:10px}
html[data-platform-page="experience"] .live-cross,html[data-platform-page="experience"] .live-card.is-refusal small{display:block;-webkit-line-clamp:unset;overflow:visible}
html[data-platform-page="flow"] .platform-viewport,html[data-platform-page="readiness"] .platform-viewport{padding:32px clamp(18px,4vw,64px) 64px}
/* The overview is a document page: it scrolls, and its own main owns the gutter. */
html[data-platform-page="now"] .platform-viewport{padding:0}
/* The partner page is a document page too: its own main owns the gutter. */
html[data-platform-page="partner"] .platform-viewport{padding:0}
html[data-platform-page="model"] .platform-viewport{padding:0}
html[data-platform-page="stand"] .platform-viewport{padding-bottom:48px}
html[data-platform-page="stand"] .rig{position:relative;background:var(--platform-panel);box-shadow:none;padding:8px 0}
html[data-platform-page="stand"] .wrap{max-width:1440px;width:calc(100% - 64px);margin:auto}
html[data-platform-page="stand"] .interest-heading{padding:30px 0 12px}
.interest-heading h1{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.035em;margin:0 0 8px;font-weight:600}
.interest-heading p{color:var(--platform-dim);max-width:64ch;margin:0;line-height:1.5;font-size:15px}
html[data-platform-page="stand"] .lead{display:grid;grid-template-columns:auto 1fr;column-gap:24px;align-items:center;padding:18px 0 24px}
html[data-platform-page="stand"] #leadout{grid-row:1/3}
html[data-platform-page="stand"] .says{font:500 19px/1.35 var(--platform-ui);margin:0;max-width:none}
html[data-platform-page="stand"] .qual{font:13px/1.5 var(--platform-ui);margin:4px 0 0;max-width:80ch}
.metric-reading{display:block;font:600 40px/1.1 var(--platform-ui);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
html[data-platform-page="stand"] .lead .metric-reading{font-size:50px}
html[data-platform-page="stand"] .blink{animation:none!important}
html[data-platform-page="stand"] :is(.note,.cap,.end,.reading p,.slot p){font-family:var(--platform-ui);line-height:1.55;font-size:13px}
html[data-platform-page="stand"] h2{font-size:16px;letter-spacing:0;text-transform:none;font-weight:600}
html[data-platform-page="stand"] .floorwrap{border:1px solid var(--platform-line);border-radius:var(--platform-radius);overflow:hidden}
html[data-platform-page="stand"] #floor{max-height:50vh;width:100%;object-fit:contain;background:var(--platform-bg)}
.interest-evidence{margin:30px 0;padding:18px 0;border-top:1px solid var(--platform-line)}
.interest-evidence>summary{cursor:pointer;color:var(--platform-accent);font:500 15px var(--platform-ui)}
.interest-evidence>section{margin-top:24px}
html[data-platform-page="stand"] .lamp{box-shadow:none}
html[data-platform-page="me"] .platform-header{min-height:60px}
html[data-platform-page="me"] .platform-tools{display:none}
/* On a tool page the menu keeps its name; being inside it is marked, not renamed. */
.platform-header .platform-tools[data-current] summary{color:var(--platform-ink);border-color:var(--platform-accent)}
@media(max-width:1150px){.platform-header{gap:16px;padding-inline:18px}.platform-header a:not(.platform-brand):not(.platform-skip){padding-inline:10px}}
@media(max-width:900px){.platform-actions{flex-wrap:wrap;justify-content:flex-end;row-gap:4px}}
/* Four destinations do not fit one 288px row at 320; two rows of two keep every label whole. */
@media(max-width:360px){.platform-primary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .platform-primary a{min-inline-size:0}}
@media(max-width:900px){
 .platform-header{flex-wrap:wrap;gap:8px;min-height:106px;padding:10px 16px 6px}
 .platform-primary{order:3;width:100%;justify-content:space-between}
 .platform-header a:not(.platform-brand):not(.platform-skip){font-size:12px;min-height:38px;padding-inline:12px}
 .platform-header button{min-height:36px;padding-inline:9px}.platform-actions{gap:4px}
 html[data-platform-page="experience"] .experience{grid-template-columns:1fr}
 html[data-platform-page="experience"] .story-panel{display:none}
 html[data-platform-page="experience"] .visual-shell{height:auto;min-height:0}
 html[data-platform-page="experience"] .app-shell{grid-template-rows:minmax(0,1fr) 64px 38px}
 html[data-platform-page="stand"] .wrap{width:calc(100% - 32px)}
}
@media(max-width:480px){
 .platform-header #fullscreen{display:none}
 .platform-header a:not(.platform-brand):not(.platform-skip){padding-inline:8px}
 .platform-header summary{padding-inline:9px;font-size:12px}
 html[data-platform-page="stand"] .lead{column-gap:14px}.metric-reading{font-size:32px}
 html[data-platform-page="stand"] .lead .metric-reading{font-size:36px}
 html[data-platform-page="stand"] .says{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.platform-header *{transition:none!important}}
html[data-platform-page="stand"] .lead{margin-top:0}
html[data-platform-page="stand"] section[aria-labelledby="h-floor"]{margin-top:0}
html[data-platform-page="stand"] .interest-heading{padding-bottom:0}
html[data-platform-page="stand"] .metric-reading{min-width:1.5ch}
html[data-platform-page="stand"] .qual{max-width:72ch}
html[data-platform-page="stand"] .slots .metric-reading{font-size:28px}
html[data-platform-page="stand"] .platform-viewport{font-family:var(--platform-ui)}
html[data-platform-page="room"] .platform-viewport>canvas{position:absolute;inset:0}
/* Explore uses the same scene as the exhibit, so selection and QR never vanish
   when a visitor leaves the guided tour. No extra toolbar inside the iframe. */
.explore-source,.explore-modes{display:none}
html[data-platform-page="sequence"] .explore-source{display:flex;align-items:center;gap:8px;font:12px var(--platform-ui);padding:6px 10px;background:var(--platform-panel);border:1px solid var(--platform-line);border-radius:var(--platform-radius)}
html[data-platform-page="sequence"] .explore-source select{max-width:170px}
html[data-platform-page="sequence"] .explore-modes{display:flex;gap:4px}
#explore-source-error{font-size:11px;color:var(--platform-warn);max-width:22ch}
html[data-platform-page="sequence"] .source-note,html[data-platform-page="sequence"] #legend,html[data-platform-page="sequence"] #inspect{border:1px solid var(--platform-line);border-radius:var(--platform-radius)}
html[data-platform-page="sequence"] .top{gap:10px;flex-wrap:wrap}
html[data-platform-page="pulse"] .brand h1{font-size:22px}
html[data-platform-page="pulse"] .brand .tag{display:none}
html[data-platform-page="pulse"] .brand .claim{font-size:12px}
@media(max-width:760px){
 html[data-platform-page="pulse"] .brand{display:none}
 html[data-platform-page="pulse"] .controls{left:12px;right:12px;max-width:none;justify-content:flex-start}
 html[data-platform-page="pulse"] .boothbar{padding:8px 12px}
 html[data-platform-page="sequence"] .source-note{flex:1 1 100%}
 html[data-platform-page="sequence"] .explore-source{order:3;padding:4px 8px}
 html[data-platform-page="sequence"] .explore-source label{display:none}
 html[data-platform-page="sequence"] #inspect{top:168px}
 html[data-platform-page="sequence"] #beacon{top:168px}
 html[data-platform-page="stand"] .interest-heading h1{font-size:30px}
}
html:is([data-platform-page="sequence"],[data-platform-page="pulse"],[data-platform-page="room"],[data-platform-page="me"]) .platform-viewport{overflow:hidden;scrollbar-gutter:auto}
html[data-embed="true"] .interest-heading,html[data-embed="true"] .interest-evidence{display:none}
html[data-platform-page="stand"] .metric-reading{animation:none}

/* The theme toggle sits with the header's other icon controls. It is a button
   with a name, not a bare glyph: the icon shows the theme it would switch TO and
   the accessible name says so in words. */
.platform-theme svg{inline-size:18px;block-size:18px}
.platform-header .platform-theme{inline-size:auto;min-inline-size:44px;padding-inline:11px;white-space:nowrap}

/* The site-health pill (health-pill.js). Neutral when healthy, red border and
   icon when an alert is active; the word carries the state, never colour alone. */
.platform-header a.platform-health{gap:7px;border-color:var(--platform-line);color:var(--platform-dim);font-size:12.5px;padding:0 11px}
.platform-header a.platform-health.is-alarm{border-color:var(--platform-red);color:var(--platform-ink)}
.platform-header a.platform-health.is-alarm svg{color:var(--platform-red)}
.platform-header a.platform-health svg{width:15px;height:15px;stroke-width:2}
@media (max-width:1280px){.platform-header a.platform-health span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}