/* Atomic Relay - receiver skin.
   Palette and type are the real Atomic Audio brand system, taken from
   deck.css in the Setapp pitch deck, which in turn was lifted from the
   product code. Nothing here is sampled or approximated:
     title silver  #B5BAC6   atom gradient #FF5600 -> #7500FF
     orange #F09020   cyan #40C8E0   green #30D830
   Lato throughout, as on the unit. Sentence case. The brand never
   letterspaces, so emphasis is earned with colour, not stretch; the one
   exception is the eyebrow, which is the sanctioned uppercase device.
   No em dashes and no en dashes anywhere, on screen or in this file. */

@font-face { font-family:'Lato'; font-weight:400; font-style:normal;
  src:url('fonts/Lato-Regular.ttf') format('truetype'); font-display:block; }
@font-face { font-family:'Lato'; font-weight:500; font-style:normal;
  src:url('fonts/Lato-Medium.ttf') format('truetype'); font-display:block; }
@font-face { font-family:'Lato'; font-weight:700; font-style:normal;
  src:url('fonts/Lato-Bold.ttf') format('truetype'); font-display:block; }

:root{
  --font:'Lato','Helvetica Neue',Arial,sans-serif;

  /* Ground, matched to the sender's chassis in AtomicBrand.swift.

     This was #000, which is why the two halves of the same product did not
     look like the same product: the receiver sat on pure black while the
     sender sat on rgb(26,28,33). Both now meet at rgb(22,24,28), the sender
     having come down and this having come up. Hue is Deadline Go's, blue
     seven above red, so it is the family chassis at a different level rather
     than a different colour. */
  --bg:#16181C;
  --bg-panel:#1E2126;
  --bg-panel-2:#23262C;

  --ink:#F2F2F4;
  --ink-82:rgba(242,242,244,.82);
  --ink-60:rgba(242,242,244,.60);
  --ink-42:rgba(242,242,244,.42);
  --ink-28:rgba(242,242,244,.28);

  --silver:#B5BAC6;
  --silver-70:rgba(181,186,198,.70);
  --silver-35:rgba(181,186,198,.35);
  --grad-a:#FF5600;
  --grad-b:#7500FF;
  --orange:#F09020;
  --cyan:#40C8E0;
  --green:#30D830;
  --red:#E0503C;

  --line:rgba(242,242,244,.13);
  --line-strong:rgba(242,242,244,.22);

  --rail:400px;
  --gap:22px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; background:var(--bg); }

/* Scrollbars. Left alone they render as a pale strip straight through the
   middle of a black panel, which is the first thing the eye lands on. */
*{ scrollbar-width:thin; scrollbar-color:rgba(242,242,244,.22) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background:rgba(242,242,244,.16); border-radius:6px;
  border:3px solid transparent; background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background:rgba(242,242,244,.3); background-clip:padding-box; }
*::-webkit-scrollbar-corner{ background:transparent; }

body{
  font-family:var(--font);
  font-weight:400;
  font-size:14px;
  line-height:1.45;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  display:grid;
  grid-template-rows:auto 1fr;
  overflow:hidden;
}

/* ---- Eyebrow: the one uppercase device in the system ---- */
.eyebrow{
  font-size:10px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--orange);
  margin:0;
}
.eyebrow.quiet{ color:var(--ink-42); }

/* ---- Header ---- */
.bar{
  display:flex; align-items:center; gap:28px;
  padding:16px 24px 15px;
  border-bottom:1px solid var(--line);
  background:var(--bg);
}

/* Maker lockup, following the pattern the shipping apps already use: the
   supplied atom artwork, then the product word. The mark carries "Atomic", so
   the word beside it is the product and nothing else. The artwork is placed as
   supplied and never recreated in type. */
.brand{ display:flex; align-items:center; gap:11px; }
.brand .atom{
  width:29px; height:29px; display:block;
  /* The gradient in the mark is the brand's only gradient. It stays a mark and
     never becomes a surface, so nothing else on the page carries it. */
}
/* ATOMIC set in the lockup's own face and register: Lato Regular, no
   letterspacing. The wordmark never letterspaces even though the interface
   letterspaces its labels constantly, and conflating the two is what makes an
   Atomic app look wrong. */
.brand .maker{
  font-size:21px; font-weight:400; line-height:1; color:var(--silver);
}

/* Product, then variant.

   Set at one size with only a colour between them, RELAY RECEIVE read as a
   two-word product name, which it is not: the product is Relay, and receive is
   which half of it you are looking at. The name carries the weight and the
   size; the variant is a small letterspaced tag pinned beside it. A different
   register, not just a different colour. Matches the sender exactly. */
.wordmark{
  margin:0; display:flex; align-items:center; gap:9px;
  font-size:21px; font-weight:500; letter-spacing:.12em;
  line-height:1; color:var(--silver); white-space:nowrap;
}
/* No container: a filled, stroked capsule reads as a button however small it
   is, and this is a label. The letterspaced uppercase register is the one the
   interface already uses for every section eyebrow, which nobody tries to
   press. The hairline does the separating the border was doing. */
.wordmark em{
  font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.2em;
  color:rgba(64,200,224,.9);
  /* Height set to RELAY's cap height rather than its own line box, so the
     rule spans the letters beside it instead of the text box around them.
     Then nudged down: centring aligns line boxes, and RELAY is all caps with
     no descender, so its visual centre sits below its box centre. */
  display:flex; align-items:center; height:15px; position:relative; top:.96px;
  padding-left:9px; border-left:1px solid rgba(64,200,224,.35);
}

/* The middle group, the way Deadline sets its mini OLED and Voice its
   toolbar: recessed, hairline stroked, hugging its contents. */
.bar-group{
  display:flex; align-items:center; gap:10px;
  padding:7px 12px; border-radius:8px;
  background:rgba(0,0,0,.25); border:1px solid var(--line);
}
.bar-div{ width:1px; height:15px; background:var(--line-strong); }
.bar-actions{ display:flex; align-items:center; gap:8px; }

.spacer{ flex:1; }

/* Compact quality readout, the one number a viewer actually wants. */
#quality{ gap:7px; align-items:baseline; }
#quality .qval{
  font-size:17px; font-weight:700; color:var(--cyan);
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
#quality .qlabel{ font-size:12px; color:var(--ink-42); }
#quality[data-alert="warn"] .qval{ color:var(--orange); }
#quality[data-alert="bad"] .qval{ color:var(--red); }

.session{ display:flex; align-items:baseline; gap:9px; }
.session .name{
  font-size:15px; font-weight:700; color:var(--ink-82); letter-spacing:-.01em;
}

/* ---- Status pill ---- */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:9999px;
  padding:6px 14px 6px 11px;
  font-size:12.5px; font-weight:700; color:var(--ink-60);
  background:var(--bg-panel);
  white-space:nowrap;
}
.pill .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--ink-28); flex:none;
}
.pill[data-state="live"]{ color:var(--ink); border-color:rgba(48,216,48,.35); }
.pill[data-state="live"] .dot{
  background:var(--green); box-shadow:0 0 0 3px rgba(48,216,48,.16);
  animation:breathe 2.4s ease-in-out infinite;
}
.pill[data-state="connecting"]{ color:var(--ink-82); border-color:rgba(240,144,32,.35); }
.pill[data-state="connecting"] .dot{ background:var(--orange); animation:breathe 1s ease-in-out infinite; }
.pill[data-state="error"]{ color:var(--ink); border-color:rgba(224,80,60,.45); }
.pill[data-state="error"] .dot{ background:var(--red); }

@keyframes breathe{ 0%,100%{opacity:1} 50%{opacity:.45} }

/* ---- Buttons ---- */
.btn{
  font-family:var(--font); font-size:13.5px; font-weight:700;
  color:var(--ink); background:var(--bg-panel-2);
  border:1px solid var(--line-strong); border-radius:10px;
  padding:9px 18px; cursor:pointer;
  transition:background .14s ease, border-color .14s ease, opacity .14s ease;
}
.btn:hover:not(:disabled){ background:#22222b; border-color:var(--silver-35); }
.btn:disabled{ opacity:.38; cursor:default; }
.btn.primary{
  color:#06070A; border-color:transparent;
  background:var(--cyan);
}
.btn.primary:hover:not(:disabled){ background:#5AD4E8; }

/* ---- Main split: stage left, instrument rail right ---- */
main{
  display:grid;
  grid-template-columns:1fr var(--rail);
  min-height:0;
  overflow:hidden;
}

/* ---- Two views of the same page ----
   "clean" is the product: picture, level, one quality indicator. "diagnostics"
   adds everything built to prove the transport works, which is most of this
   file and none of what a client should be shown. The split is a toggle rather
   than a separate build so a session in trouble can be opened up in place. */
body[data-view="clean"] .diag{ display:none; }
body[data-view="clean"] main{ grid-template-columns:1fr; }
body[data-view="clean"] .stage-col{ padding:0; gap:0; }
body[data-view="clean"] .stage{ border:0; border-radius:0; }
body[data-view="clean"] .transport{
  border:0; border-radius:0; border-top:1px solid var(--line);
}

.stage-col{
  display:flex; flex-direction:column; min-width:0; min-height:0;
  padding:var(--gap);
  gap:var(--gap);
}

/* ---- Video stage. Empty and honest until the video path lands. ---- */
.stage{
  position:relative; flex:1; min-height:0;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:14px;
  display:grid; place-items:center;
  overflow:hidden;
}
.stage video{ width:100%; height:100%; object-fit:contain; background:#000; display:none; }
.stage .empty{ text-align:center; padding:40px; max-width:440px; }
.stage .empty .glyph{
  width:54px; height:54px; margin:0 auto 20px;
  border-radius:14px; border:1px solid var(--line-strong);
  display:grid; place-items:center;
  background:
    radial-gradient(120% 130% at 50% 120%, rgba(117,0,255,.22) 0%, transparent 62%),
    var(--bg-panel-2);
}
.stage .empty .glyph i{
  width:16px; height:16px; border-radius:50%;
  background:linear-gradient(160deg,var(--grad-a),var(--grad-b));
  display:block; opacity:.85;
}
.stage .empty h2{
  margin:0 0 7px; font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--ink-82);
}
.stage .empty p{ margin:0; font-size:13px; color:var(--ink-42); line-height:1.5; }

/* ---- Transport strip under the stage ---- */
.transport{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:15px 18px;
  background:var(--bg-panel); border:1px solid var(--line); border-radius:14px;
}
.transport .group{ display:flex; align-items:center; gap:10px; }
.transport .sep{ width:1px; align-self:stretch; background:var(--line); }
.transport label{ font-size:12px; color:var(--ink-42); }

/* Segmented control */
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.seg button{
  font-family:var(--font); font-size:12.5px; font-weight:700;
  color:var(--ink-42); background:transparent; border:0;
  padding:7px 13px; cursor:pointer; transition:color .12s ease, background .12s ease;
}
.seg button + button{ border-left:1px solid var(--line); }
.seg button:hover{ color:var(--ink-82); }
.seg button[aria-pressed="true"]{ color:#06070A; background:var(--silver); }

/* ---- Stereo level meter ---- */
.levels{ display:flex; flex-direction:column; gap:4px; width:132px; }
.levels .lane{
  position:relative; height:6px; border-radius:3px;
  background:var(--bg-panel-2); overflow:hidden;
}
.levels .fill{
  position:absolute; inset:0 100% 0 0;
  background:linear-gradient(90deg,var(--cyan) 0%,var(--cyan) 72%,var(--orange) 90%,var(--red) 100%);
  transition:right .06s linear;
}
.levels .hold{
  position:absolute; top:0; bottom:0; width:2px; background:var(--ink-82);
  left:0; opacity:0; transition:left .1s linear;
}

/* ---- Instrument rail ---- */
.rail{
  border-left:1px solid var(--line);
  background:var(--bg-panel);
  padding:var(--gap) var(--gap) 40px;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:0;
  min-height:0;
}
.rail > .glance{ margin-bottom:20px; }

/* ---- Expandable subsystem panel ----
   Summary always visible, detail on demand. The sparkline lives in the summary
   rather than the detail on purpose: the shape is what tells you whether a
   figure is settled, so it is worth seeing without opening anything. */
.panel{ border-top:1px solid var(--line); }
.panel:last-of-type{ border-bottom:1px solid var(--line); }

.panel-head{
  width:100%; display:grid;
  grid-template-columns:1fr 74px auto 12px;
  align-items:center; gap:12px;
  padding:13px 0;
  background:transparent; border:0; cursor:pointer;
  font-family:var(--font); text-align:left;
  transition:opacity .12s ease;
}
.panel-head:hover{ opacity:.78; }

.panel-title{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.panel-sub{
  font-size:11.5px; color:var(--ink-42);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.panel-value{
  font-size:17px; font-weight:700; color:var(--cyan);
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
  justify-self:end; white-space:nowrap;
}
.panel-value em{ font-style:normal; font-size:11.5px; color:var(--silver-70); }
.panel[data-alert="warn"] .panel-value{ color:var(--orange); }
.panel[data-alert="bad"] .panel-value{ color:var(--red); }

.spark{ display:block; width:74px; height:26px; }

.chev{
  width:6px; height:6px; justify-self:center;
  border-right:1.5px solid var(--ink-42);
  border-bottom:1.5px solid var(--ink-42);
  transform:rotate(-45deg) translate(-1px,-1px);
  transition:transform .16s ease;
}
.panel[data-open="true"] .chev{ transform:rotate(45deg) translate(-1px,-1px); }

.panel-body{ display:none; padding:2px 0 20px; flex-direction:column; gap:14px; }
.panel[data-open="true"] .panel-body{ display:flex; }

.panel-note{
  margin:0; font-size:11.5px; line-height:1.5; color:var(--ink-28);
}

/* ---- Incident list ---- */
.incidents{
  display:flex; flex-direction:column; gap:0;
  max-height:280px; overflow-y:auto;
  background:var(--bg-panel-2); border:1px solid var(--line); border-radius:10px;
}
.incidents:empty::after{
  content:'Nothing yet. A clean session logs nothing.';
  display:block; padding:14px; font-size:11.5px; color:var(--ink-28);
}
.incident{
  display:grid; grid-template-columns:52px 1fr; gap:10px;
  padding:9px 12px; border-bottom:1px solid var(--line);
  font-size:11.5px; line-height:1.4;
}
.incident:last-child{ border-bottom:0; }
.incident .when{
  color:var(--ink-28); font-variant-numeric:tabular-nums;
}
.incident .what{ color:var(--ink-82); }
.incident .meta{ color:var(--ink-28); margin-top:2px; font-variant-numeric:tabular-nums; }
.incident[data-sev="fault"] .what{ color:var(--red); }
.incident[data-sev="warn"] .what{ color:var(--orange); }

#pLog[data-alert="warn"] .panel-value{ color:var(--orange); }
#pLog[data-alert="fault"] .panel-value{ color:var(--red); }
.rail section{ display:flex; flex-direction:column; gap:13px; }
.rail .head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.rail .head .note{ font-size:11.5px; color:var(--ink-28); }

/* Hero figures */
.figures{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.figures.two{ grid-template-columns:repeat(2,1fr); }
.figure{ background:var(--bg-panel); padding:14px 12px 13px; }
.figure .value{
  font-size:33px; font-weight:700; letter-spacing:-.02em; line-height:1;
  color:var(--cyan); font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; gap:3px;
}
.figure .value .unit{ font-size:13px; font-weight:700; color:var(--silver-70); letter-spacing:0; }
.figure .label{ margin-top:7px; font-size:11.5px; color:var(--ink-42); }
.figure[data-alert="warn"] .value{ color:var(--orange); }
.figure[data-alert="bad"] .value{ color:var(--red); }
.figure[data-alert="good"] .value{ color:var(--green); }

/* Scope */
.scope-wrap{ position:relative; background:var(--bg-panel-2); border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.scope-wrap canvas{ display:block; width:100%; height:132px; }
.scope-wrap .axis{
  position:absolute; left:9px; top:7px;
  font-size:10.5px; color:var(--ink-28); font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.scope-wrap .axis.bottom{ top:auto; bottom:7px; }

/* Buffer depth bar */
.depth{ display:flex; flex-direction:column; gap:8px; }
.depth .track{
  position:relative; height:9px; border-radius:5px;
  background:var(--bg-panel-2); border:1px solid var(--line); overflow:hidden;
}
.depth .fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:var(--cyan); transition:width .08s linear;
}
.depth .target{
  position:absolute; top:-3px; bottom:-3px; width:1px;
  background:var(--silver); opacity:.85;
}
.depth .legend{
  display:flex; justify-content:space-between;
  font-size:11.5px; color:var(--ink-42); font-variant-numeric:tabular-nums;
}

/* Stat grid */
.stats{ display:grid; grid-template-columns:1fr auto; gap:0; }
.stats .row{
  display:contents;
}
.stats dt, .stats dd{
  margin:0; padding:8px 0; border-bottom:1px solid var(--line);
  font-size:12.5px;
}
.stats dt{ color:var(--ink-42); }
.stats dd{
  color:var(--ink-82); text-align:right; font-variant-numeric:tabular-nums; font-weight:700;
}
.stats dd.good{ color:var(--green); }
.stats dd.warn{ color:var(--orange); }
.stats dd.bad{ color:var(--red); }

/* Inline notice */
.notice{
  font-size:12.5px; line-height:1.5; color:var(--ink-60);
  background:var(--bg-panel-2); border:1px solid var(--line);
  border-left:2px solid var(--orange);
  border-radius:8px; padding:11px 13px;
}
.notice strong{ color:var(--ink); font-weight:700; }
.notice.bad{ border-left-color:var(--red); }

/* ---- Sender page reuses the shell with a single centred column ---- */
/* The scroll container is main, not .solo: a centred column that scrolls
   itself puts its scrollbar in the middle of the page rather than the edge. */
main.solo-main{ display:block; overflow-y:auto; }
.solo{
  max-width:620px; margin:0 auto; padding:44px 24px;
  display:flex; flex-direction:column; gap:26px;
}
.card{
  background:var(--bg-panel); border:1px solid var(--line);
  border-radius:14px; padding:20px;
  display:flex; flex-direction:column; gap:15px;
}
.card h2{ margin:0; font-size:16px; font-weight:700; letter-spacing:-.01em; }
.card p{ margin:0; font-size:13px; color:var(--ink-60); line-height:1.55; }

.rule{ height:1px; background:var(--line); border:0; margin:0; }

@media (max-width:1080px){
  main{ grid-template-columns:1fr; grid-template-rows:1fr auto; }
  .rail{ border-left:0; border-top:1px solid var(--line); }
}

/* ------------------------------------------------------------------ mixer */
/* Channel strips. Sixteen of these have to fit a 400px rail without becoming
   a scrolling list, so the strip is narrow and the meter carries the reading;
   the fader is there to trim, not to mix a record on. */

.mix-controls{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  padding:0 16px 12px;
}
.toggle{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; color:var(--ink-82); cursor:pointer;
}
.toggle input{
  appearance:none; width:30px; height:17px; margin:0;
  border:1px solid var(--line-strong); border-radius:9px;
  background:rgba(0,0,0,.35); position:relative; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.toggle input::after{
  content:""; position:absolute; top:2px; left:2px;
  width:11px; height:11px; border-radius:50%;
  background:var(--silver); transition:transform .15s ease, background .15s ease;
}
.toggle input:checked{ background:rgba(64,200,224,.22); border-color:rgba(64,200,224,.5); }
.toggle input:checked::after{ transform:translateX(13px); background:var(--cyan); }
.toggle input:disabled{ opacity:.35; cursor:default; }
.toggle:has(input:disabled){ opacity:.45; cursor:default; }

.strips{
  display:flex; gap:6px; padding:0 16px 14px;
  overflow-x:auto; overflow-y:hidden;
}
/* Sixteen strips have to fit the rail rather than scroll it: a mixer you have
   to scroll sideways to see the far surrounds is not showing you the mix. */
.strips[data-count="many"]{ gap:2px; }
.strips[data-count="many"] .strip{ min-width:0; }
.strips[data-count="many"] .strip-id{ font-size:8px; letter-spacing:0; }
.strips[data-count="many"] .key{ font-size:7px; }

.strip{
  flex:1 1 0; min-width:24px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.strip-id{
  font-size:9.5px; font-weight:700; letter-spacing:.04em;
  color:var(--ink-82); text-transform:uppercase;
}
/* The meter is the point of the strip, so it gets the height. */
.strip-meter{
  width:100%; height:78px; border-radius:2px;
  background:rgba(0,0,0,.42); border:1px solid var(--line);
  position:relative; overflow:hidden;
}
/* Scaled from the bottom by a transform, so a meter update is a compositor
   job and never touches layout. */
.strip-meter i{
  position:absolute; inset:0; transform-origin:50% 100%;
  transform:scaleY(0);
  background:linear-gradient(to top,
    var(--cyan) 0%, var(--cyan) 66%, var(--orange) 86%, var(--red) 100%);
}

.strip-fader{
  appearance:none; width:100%; height:3px; margin:2px 0;
  background:var(--line-strong); border-radius:2px; cursor:pointer;
}
.strip-fader::-webkit-slider-thumb{
  appearance:none; width:9px; height:14px; border-radius:2px;
  background:var(--silver); border:1px solid rgba(0,0,0,.5);
}
.strip-fader::-webkit-slider-thumb:hover{ background:var(--ink); }

.strip-keys{ display:flex; gap:2px; width:100%; }
.key{
  flex:1; padding:2px 0; font:inherit; font-size:8.5px; font-weight:700;
  color:var(--ink-28); background:rgba(0,0,0,.3);
  border:1px solid var(--line); border-radius:2px; cursor:pointer;
  transition:color .12s ease, border-color .12s ease, background .12s ease;
}
.key:hover{ color:var(--ink-82); }
.key.m[data-on="1"]{ color:var(--red); border-color:rgba(224,80,60,.5); background:rgba(224,80,60,.14); }
.key.s[data-on="1"]{ color:var(--green); border-color:rgba(48,216,48,.5); background:rgba(48,216,48,.14); }

.strip-label{
  font-size:8px; color:var(--ink-28); text-align:center;
  line-height:1.15; height:2.3em; overflow:hidden;
}
.strips[data-count="many"] .strip-label{ display:none; }