/* Riding Light GUI demo — single page, navy "night console".
   Brand: the Riding Light logo pack (docs/figures/brand/riding-light/), the
   navy of the landing-page hero and the investor deck. All colours are tokens
   below; the rules further down use only the tokens. */
:root{
  color-scheme:dark;                                /* native controls and scrollbars too */
  /* surfaces and text */
  --bg:#0a1630; --panel:#0f1f3f; --panel-2:#12254a; --sunk:#16294f; --field:#0b1834;
  --line:#22375e; --line-2:#1b2f55; --line-strong:#33507f;
  --text:#f2f5f9; --text-2:#cdd7e3; --dim:#9eadbf;
  --heading:#f2f5f9; --on-heading:#0a1630;
  --accent:#3fc9c2; --on-accent:#0a1630;           /* brand teal on navy (the waterline) */
  /* the three nodes: light teal, flame, steel blue */
  --node-a:#3fc9c2; --node-b:#ff9a3c; --node-c:#aac4e1; --on-node:#0a1630;
  /* contact links on the timeline, and a bundle crossing a link (the beam) */
  --link-ab:#3fc9c2; --link-bc:#ff8f3a; --beam:#ffab52;
  /* status (semantic, not brand): kept apart from node B's flame */
  --up:#4fd1a5; --up-bg:rgba(79,209,165,.14); --down:#3a4f75;
  --alert:#ff6b6b; --alert-bg:rgba(255,107,107,.15);
  --warn:#ffd25e; --warn-bg:rgba(255,210,94,.13); --warn-soft:#7d6524;
  --track:#1b2f55;
  /* tooltips */
  --tip-bg:#050b19; --tip-text:#e8edf3; --tip-b:#fff; --tip-i:#3fc9c2; --tip-em:#ff9a3c;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  display:flex; flex-direction:column;
}

/* ---- header ---------------------------------------------------------- */
#top{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:10px 16px; border-bottom:2px solid var(--line); background:var(--panel);
}
.brand{display:flex; flex-direction:column; gap:3px; line-height:1.1}
/* the pack's compact mark (made for 24-64 px) beside the wordmark */
.logo{display:flex; align-items:center; gap:7px}
.logo .mark{width:26px; height:26px; display:block}
.logo .word{height:17px; width:auto; display:block; position:relative; top:2px}
.tagline{font-size:11px; color:var(--dim)}
.conn{font-size:11px; font-weight:700; padding:3px 9px; border-radius:12px; white-space:nowrap}
.conn.up{color:var(--up); background:var(--up-bg)}
.conn.down{color:var(--alert); background:var(--alert-bg)}

.contact-plan{display:flex; align-items:center; gap:14px;
  padding:6px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel)}
.clock{font-variant-numeric:tabular-nums; font-weight:700; color:var(--heading);
  font-size:16px; min-width:64px}
.links{display:flex; gap:8px; align-items:center}
.link{display:flex; align-items:center; gap:7px; font-weight:700; font-size:13px;
  padding:6px 11px; border:1px solid var(--line); border-radius:20px;
  background:var(--panel-2); cursor:pointer; color:var(--text)}
.link .dot{width:11px; height:11px; border-radius:50%; background:var(--down);
  box-shadow:0 0 0 0 transparent; transition:all .18s}
.link.up{border-color:var(--up); background:var(--up-bg)}
.link.up .dot{background:var(--up); box-shadow:0 0 0 4px color-mix(in srgb,var(--up) 20%,transparent)}
.link.simplex{border-color:var(--warn); background:var(--warn-bg)}        /* one-way contact */
.link.simplex .dot{background:var(--warn); box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 20%,transparent)}
.lk-label{font-variant-numeric:tabular-nums}
.link.nodirect{color:var(--dim); cursor:default; background:var(--sunk); border-style:dashed}

.controls{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto}
.controls button{font:inherit; font-size:13px; padding:6px 11px; border-radius:8px;
  border:1px solid var(--line); background:var(--panel); cursor:pointer; color:var(--text)}
.controls button:hover{background:var(--sunk)}
.controls button.primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700}
.controls .sep{width:1px; height:24px; background:var(--line)}
.slider{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dim)}
.slider input{vertical-align:middle; accent-color:var(--accent)}
.slider .hint{font-size:10px; color:var(--dim)}
.modes{display:flex; gap:0; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.modes .mode{border:none; border-radius:0; border-right:1px solid var(--line)}
.modes .mode:last-child{border-right:none}
.modes .mode.active{background:var(--heading); color:var(--on-heading)}
.chaos-only{display:none}
body.chaos .chaos-only{display:flex}

/* ---- schedule timeline strip ----------------------------------------- */
.timeline{display:flex; align-items:center; gap:12px; padding:6px 16px; background:var(--panel);
  border-bottom:1px solid var(--line)}
.timeline[hidden]{display:none}   /* beat display:flex when not in Scheduled mode */
.tl-label{font-size:10px; font-weight:700; color:var(--dim); text-transform:uppercase; letter-spacing:.06em}
.tl-axis{position:relative; flex:1; height:18px; background:var(--sunk); border-radius:4px; overflow:hidden}
.tl-win{position:absolute; top:2px; height:14px; border-radius:3px; opacity:.85}
.tl-win.ab{background:var(--link-ab)} .tl-win.bc{background:var(--link-bc)}
/* simplex window: hatched to read as one-way */
.tl-win.simplex{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.0),rgba(255,255,255,.0) 4px,rgba(255,255,255,.45) 4px,rgba(255,255,255,.45) 8px)}
.tl-playhead{position:absolute; top:0; bottom:0; width:2px; background:var(--heading); z-index:3}
.tl-legend{font-size:10px; color:var(--dim); white-space:nowrap}
.tl-legend i{display:inline-block; width:9px; height:9px; border-radius:2px; vertical-align:middle; margin-right:2px}
.tl-legend i.ab{background:var(--link-ab)} .tl-legend i.bc{background:var(--link-bc)}

/* a link "pulses" when a bundle crosses it this tick: data riding the beam */
@keyframes linkpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--beam) 60%,transparent)} 100%{box-shadow:0 0 0 10px transparent}}
.link.pulse{animation:linkpulse .5s ease-out}
.link.pulse .dot{background:var(--beam)}

/* "what's real" footer tooltip */
.whatreal{position:relative; color:var(--accent); font-weight:700; cursor:help}
.whatreal .tip{position:absolute; bottom:calc(100% + 8px); right:0; z-index:60; width:330px;
  padding:11px 13px; background:var(--tip-bg); color:var(--tip-text); border-radius:10px; font-size:11px;
  font-weight:500; line-height:1.5; text-align:left; box-shadow:0 8px 24px rgba(0,0,0,.28);
  opacity:0; visibility:hidden; transition:opacity .12s; pointer-events:none}
.whatreal .tip b{color:var(--tip-b)} .whatreal .tip i{color:var(--tip-i); font-style:normal}
.whatreal:hover .tip{opacity:1; visibility:visible}

/* ---- tabs ------------------------------------------------------------ */
.tabs{display:flex; gap:4px; padding:8px 16px 0; background:var(--panel);
  border-bottom:1px solid var(--line)}
.tab{font:inherit; font-size:15px; font-weight:700; cursor:pointer;
  padding:9px 16px; border:1px solid var(--line); border-bottom:none;
  border-radius:10px 10px 0 0; background:var(--sunk); color:var(--dim)}
.tab .prim{display:block; font-size:10px; font-weight:600; color:var(--dim)}
.tab{position:relative}
.tab.active{background:var(--panel); color:var(--text); box-shadow:0 -2px 0 var(--accent) inset}
.tab.active .prim{color:var(--accent)}
/* hover tooltip explaining each primitive */
.tab .tip{position:absolute; top:calc(100% + 6px); left:0; z-index:60;
  width:360px; padding:12px 14px; background:var(--tip-bg); color:var(--tip-text);
  border-radius:10px; font-size:12px; font-weight:500; line-height:1.5;
  box-shadow:0 8px 24px rgba(0,0,0,.28); opacity:0; visibility:hidden;
  transform:translateY(-4px); transition:opacity .12s, transform .12s; pointer-events:none}
.tab .tip b{color:var(--tip-b)} .tab .tip i{color:var(--tip-i); font-style:normal} .tab .tip em{color:var(--tip-em); font-style:normal}
.tab .tip::before{content:""; position:absolute; bottom:100%; left:24px;
  border:7px solid transparent; border-bottom-color:var(--tip-bg)}
.tab:hover .tip{opacity:1; visibility:visible; transform:translateY(0)}

/* ---- node panes ------------------------------------------------------ */
#nodes{flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  padding:14px 16px; min-height:0}
.pane{display:flex; flex-direction:column; min-height:0;
  border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden;
  border-top:4px solid var(--node)}
.pane.A{--node:var(--node-a)} .pane.B{--node:var(--node-b)} .pane.C{--node:var(--node-c)}
.pane-head{display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; border-bottom:1px solid var(--line); background:var(--panel-2)}
.node-name{font-weight:800; font-size:16px; color:var(--node)}
.badges{display:flex; gap:8px; align-items:center; font-size:11px; color:var(--dim);
  font-variant-numeric:tabular-nums}
.badge{padding:2px 7px; border-radius:12px; background:var(--sunk); white-space:nowrap}
.badge b{color:var(--text)}
.badge.pending.hot{background:var(--alert-bg); color:var(--alert)}
.badge.pending.hot b{color:var(--alert)}
/* causal frontier / version vector */
.badge.vec .vA{color:var(--node-a)} .badge.vec .vB{color:var(--node-b)} .badge.vec .vC{color:var(--node-c)}
.badge.vec b.behind{color:var(--alert); text-decoration:underline wavy var(--alert)}
.badge.vec.caught{background:var(--up-bg); box-shadow:inset 0 0 0 1px var(--up)}
.badge.vec.caught::after{content:" ✓"; color:var(--up); font-weight:800}

.surface{flex:1; min-height:0; display:flex; flex-direction:column; padding:10px}
.surface[hidden]{display:none !important}   /* inactive tabs stay hidden, whatever display a surface sets */
.surface.documents textarea{flex:1; width:100%; resize:none; border:1px solid var(--line);
  border-radius:8px; padding:12px; font:15px/1.5 "SF Mono",ui-monospace,Menlo,monospace;
  color:var(--text); background:var(--field)}
.surface.documents textarea:focus{outline:2px solid var(--node); border-color:var(--node)}

/* logs */
.logfeed{flex:1; list-style:none; margin:0 0 8px; padding:0; overflow:auto;
  border:1px solid var(--line); border-radius:8px; background:var(--field)}
.logfeed li{padding:5px 10px; border-bottom:1px solid var(--line-2); font-size:13px;
  display:flex; align-items:baseline; gap:7px}
.logfeed li .t{font:11px/1 ui-monospace,Menlo,monospace; color:var(--dim);
  background:var(--sunk); border-radius:10px; padding:2px 6px; white-space:nowrap;
  margin-left:auto; font-variant-numeric:tabular-nums}
.logfeed li .sig{font-size:10px; opacity:.6}
.logfeed li .who{font-weight:800}
.logfeed li .msg{flex:1}
.logfeed li.A .who{color:var(--node-a)} .logfeed li.B .who{color:var(--node-b)} .logfeed li.C .who{color:var(--node-c)}
.logentry{display:flex; gap:6px}
.logentry input{flex:1; padding:7px 9px; border:1px solid var(--line); border-radius:7px; font:inherit;
  background:var(--field); color:var(--text)}
.logentry button,.objbtns button,.sharenew{font:inherit; font-size:13px; padding:7px 11px;
  border:1px solid var(--node); background:var(--node); color:var(--on-node); border-radius:7px; cursor:pointer; font-weight:700}

/* objects */
.objbtns{display:flex; gap:8px; margin-bottom:10px}
.filelist{list-style:none; margin:0; padding:0; overflow:auto; flex:1}
.filelist li{padding:8px 0; border-bottom:1px solid var(--line-2)}
.filerow{display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px}
.filerow .name{font-weight:700} .filerow .stat{color:var(--dim); font-variant-numeric:tabular-nums}
.bar{height:10px; border-radius:6px; background:var(--track); overflow:hidden}
.bar > i{display:block; height:100%; width:0; background:var(--node); transition:width .25s}
.filelist li.done .bar > i{background:var(--up)}
.filerow .ok{color:var(--up); font-weight:700}
.filerow .resume{color:var(--warn); font-weight:700}
.filelist li.partial .bar > i{background:repeating-linear-gradient(45deg,var(--node),var(--node) 6px,var(--warn-soft) 6px,var(--warn-soft) 12px)}

/* ---- footer ---------------------------------------------------------- */
#bottom{display:flex; align-items:stretch; gap:16px; padding:8px 16px;
  border-top:2px solid var(--line); background:var(--panel); max-height:148px}
.feed{flex:1; min-width:0; display:flex; flex-direction:column}
.feed-title{font-size:11px; font-weight:700; color:var(--dim); text-transform:uppercase; letter-spacing:.06em}
.feed-sub{font-weight:500; text-transform:none; letter-spacing:0; color:var(--dim)}
.feed-sub b{color:var(--heading)}
#events{list-style:none; margin:4px 0 0; padding:0; overflow:auto; font:12px/1.4 ui-monospace,Menlo,monospace; color:var(--text-2)}
#events li{white-space:pre}
.metrics{display:flex; flex-direction:column; justify-content:center; gap:3px;
  font-size:12px; color:var(--dim); border-left:1px solid var(--line); padding-left:16px; min-width:190px}
.metrics b{color:var(--heading); font-variant-numeric:tabular-nums}
.note{align-self:center; font-size:10px; color:var(--dim); max-width:160px; text-align:right}

/* ---- Secure chat (MLS) ---------------------------------------------- */
.chatfeed{flex:1; list-style:none; margin:0 0 8px; padding:0 2px; overflow:auto; display:flex; flex-direction:column; gap:6px}
.chatfeed li.msg{max-width:88%; padding:6px 10px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel); font-size:13px; line-height:1.3}
.chatfeed li.msg .who{font-weight:800; margin-right:6px}
.chatfeed li.A .who{color:var(--node-a)} .chatfeed li.B .who{color:var(--node-b)} .chatfeed li.C .who{color:var(--node-c)}
.chatfeed li.msg .meta{display:block; margin-top:3px; font:10px/1.3 ui-monospace,Menlo,monospace; color:var(--dim)}
.chatfeed li.msg.mine{align-self:flex-end; background:color-mix(in srgb,var(--node) 12%,var(--panel)); border-color:color-mix(in srgb,var(--node) 35%,var(--line))}
.chatfeed li.msg.mine .who{color:var(--node)}
.chatfeed li.msg.note{align-self:center; max-width:100%; background:none; border:none; color:var(--alert);
  font-size:11px; font-style:italic}
.chatfeed li.msg.placeholder{align-self:center; max-width:100%; background:none; border:none; color:var(--dim);
  font-size:12px; font-style:italic}
.chatentry{display:flex; gap:6px}
.chatentry input{flex:1; padding:7px 9px; border:1px solid var(--line); border-radius:7px; font:inherit;
  background:var(--field); color:var(--text)}
.chatentry input:focus{outline:2px solid var(--node); border-color:var(--node)}
.chatentry button{font:inherit; font-size:13px; padding:7px 11px; border:1px solid var(--node);
  background:var(--node); color:var(--on-node); font-weight:700; border-radius:7px; cursor:pointer}

/* ---- frontier agent (DTN delay made legible) ------------------------- */
.frontier{display:flex; align-items:center; gap:12px; padding:6px 16px; background:var(--panel);
  border-bottom:1px solid var(--line); font-size:12px}
.frontier[hidden]{display:none}
.fr-label{font-size:10px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap}
.fr-items{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center}
.fr-item{font:12px/1.3 ui-monospace,Menlo,monospace; color:var(--text-2); background:var(--sunk); padding:2px 8px; border-radius:999px}
.fr-item .route{color:var(--heading)}
.fr-item b{color:var(--accent)}
.fr-clear{color:var(--up); font-weight:600}

/* Secure-Chat transport badge (TESSERA_WIRE mode, set by app.js) */
.wt{opacity:.75}
.wt.wt-real{background:var(--accent); color:var(--on-accent); opacity:1}

/* ---- CDN tab (5th surface: objects + catalog log) ---- */
.tabsep { width: 1px; align-self: stretch; margin: 8px 4px; background: var(--line-strong); }
.surface.cdn { gap: 10px; }
.cdnbox { flex: 1; overflow-y: auto; font-size: 12.5px; min-width: 0; }
.cdnhead { color: var(--dim); margin-bottom: 8px; font-size: 12px; }
.cdnrow { display: flex; gap: 8px; align-items: baseline; padding: 3px 0 1px; }
.cdnrow .name { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdnrow .st { margin-left: auto; white-space: nowrap; font-size: 11.5px; }
.cdnrow .st.ok { color: var(--up); } .cdnrow .st.bad { color: var(--alert); }
.cdnrow .st.part { color: var(--warn); } .cdnrow .st.want { color: var(--warn); }
.cdnrow .st.dim { color: var(--dim); white-space: normal; }
.cdnbar { height: 3px; background: var(--track); border-radius: 2px; margin-bottom: 4px; }
.cdnbar i { display: block; height: 100%; background: var(--accent); border-radius: 2px;
            transition: width .3s; }
.reqbtn { font-size: 11.5px; }
.edgeside { width: 46%; max-width: 330px; display: flex; flex-direction: column;
            gap: 4px; min-height: 0; }
.edgeside .eh { display: flex; gap: 8px; align-items: center; font-size: 11px;
                color: var(--dim); }
.edgeside .eh a { color: inherit; }
.edgeside .edgeframe { flex: 1; min-height: 240px; border: 1px solid var(--line-strong);
                       border-radius: 6px; background: #fbfaf7; width: 100%; }

/* ---- CDN freshness (D7): heartbeat / staleness alarm ---- */
.freshbar { font-size: 11.5px; padding: 4px 8px; border-radius: 5px; margin: 4px 0 8px; }
.freshbar.ok { background: var(--up-bg); color: var(--up); }
.freshbar.stale { background: var(--alert-bg); color: var(--alert); font-weight: 700; }
.freshbar.dimf { color: var(--dim); }
.freezeb.on { background: var(--alert-bg); color: var(--alert); }