/* Tessera GUI demo — deck palette, projector-friendly single page. */
:root{
  --teal:#0e7c7b; --coral:#d96c55; --amber:#c9962b; --green:#4b8f6a;
  --navy:#23395b; --ink:#17202a; --paper:#fbfaf7;
  --line:#e3e0d8; --dim:#8a8b86; --up:#2f9e6f; --down:#cfcabb;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  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:#fff;
}
.brand{display:flex; flex-direction:column; line-height:1.1}
.logo{font-weight:800; letter-spacing:.14em; color:var(--navy); font-size:20px}
.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:#eafaf2}
.conn.down{color:var(--coral); background:#fdecec}

.contact-plan{display:flex; align-items:center; gap:14px;
  padding:6px 12px; border:1px solid var(--line); border-radius:10px; background:#fff}
.clock{font-variant-numeric:tabular-nums; font-weight:700; color:var(--navy);
  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:#fbfbf9; cursor:pointer; color:var(--ink)}
.link .dot{width:11px; height:11px; border-radius:50%; background:var(--down);
  box-shadow:0 0 0 0 rgba(47,158,111,0); transition:all .18s}
.link.up{border-color:var(--up); background:#eafaf2}
.link.up .dot{background:var(--up); box-shadow:0 0 0 4px rgba(47,158,111,.18)}
.link.simplex{border-color:var(--amber); background:#fbf3e0}        /* one-way contact */
.link.simplex .dot{background:var(--amber); box-shadow:0 0 0 4px rgba(201,150,43,.18)}
.lk-label{font-variant-numeric:tabular-nums}
.link.nodirect{color:var(--dim); cursor:default; background:#f3f1ea; 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:#fff; cursor:pointer; color:var(--ink)}
.controls button:hover{background:#f4f2ec}
.controls button.primary{background:var(--teal); color:#fff; border-color:var(--teal); 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}
.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(--navy); color:#fff}
.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:#fff;
  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:#f3f1ea; border-radius:4px; overflow:hidden}
.tl-win{position:absolute; top:2px; height:14px; border-radius:3px; opacity:.85}
.tl-win.ab{background:var(--teal)} .tl-win.bc{background:var(--amber)}
/* 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(--coral); 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(--teal)} .tl-legend i.bc{background:var(--amber)}

/* a link "pulses" when a bundle crosses it this tick (store-and-forward made visible) */
@keyframes linkpulse{0%{box-shadow:0 0 0 0 rgba(217,108,85,.55)} 100%{box-shadow:0 0 0 10px rgba(217,108,85,0)}}
.link.pulse{animation:linkpulse .5s ease-out}
.link.pulse .dot{background:var(--coral)}

/* "what's real" footer tooltip */
.whatreal{position:relative; color:var(--teal); 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(--ink); color:#f4f2ec; 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,.22);
  opacity:0; visibility:hidden; transition:opacity .12s; pointer-events:none}
.whatreal .tip b{color:#fff} .whatreal .tip i{color:#9fd9d4; font-style:normal}
.whatreal:hover .tip{opacity:1; visibility:visible}

/* ---- tabs ------------------------------------------------------------ */
.tabs{display:flex; gap:4px; padding:8px 16px 0; background:#fff;
  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:#f4f2ec; color:var(--dim)}
.tab .prim{display:block; font-size:10px; font-weight:600; color:var(--dim)}
.tab{position:relative}
.tab.active{background:#fff; color:var(--ink); box-shadow:0 -2px 0 var(--teal) inset}
.tab.active .prim{color:var(--teal)}
/* 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(--ink); color:#f4f2ec;
  border-radius:10px; font-size:12px; font-weight:500; line-height:1.5;
  box-shadow:0 8px 24px rgba(0,0,0,.22); opacity:0; visibility:hidden;
  transform:translateY(-4px); transition:opacity .12s, transform .12s; pointer-events:none}
.tab .tip b{color:#fff} .tab .tip i{color:#9fd9d4; font-style:normal} .tab .tip em{color:#e7b873; font-style:normal}
.tab .tip::before{content:""; position:absolute; bottom:100%; left:24px;
  border:7px solid transparent; border-bottom-color:var(--ink)}
.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:#fff; overflow:hidden;
  border-top:4px solid var(--node)}
.pane.A{--node:var(--teal)} .pane.B{--node:var(--amber)} .pane.C{--node:var(--green)}
.pane-head{display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; border-bottom:1px solid var(--line); background:#fcfbf8}
.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:#f3f1ea; white-space:nowrap}
.badge b{color:var(--ink)}
.badge.pending.hot{background:#fdecec; color:var(--coral)}
.badge.pending.hot b{color:var(--coral)}
/* causal frontier / version vector */
.badge.vec .vA{color:var(--teal)} .badge.vec .vB{color:var(--amber)} .badge.vec .vC{color:var(--green)}
.badge.vec b.behind{color:var(--coral); text-decoration:underline wavy var(--coral)}
.badge.vec.caught{background:#eafaf2; 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}   /* beat .surface's display:flex for inactive tabs */
.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(--ink); background:#fffef9}
.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:#fffef9}
.logfeed li{padding:5px 10px; border-bottom:1px solid #f0eee6; font-size:13px;
  display:flex; align-items:baseline; gap:7px}
.logfeed li .t{font:11px/1 ui-monospace,Menlo,monospace; color:var(--dim);
  background:#f3f1ea; border-radius:10px; padding:2px 6px; white-space:nowrap;
  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(--teal)} .logfeed li.B .who{color:var(--amber)} .logfeed li.C .who{color:var(--green)}
.logentry{display:flex; gap:6px}
.logentry input{flex:1; padding:7px 9px; border:1px solid var(--line); border-radius:7px; font:inherit}
.logentry button,.objbtns button,.sharenew{font:inherit; font-size:13px; padding:7px 11px;
  border:1px solid var(--node); background:var(--node); color:#fff; 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 #f0eee6}
.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:#eee9dd; 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(--amber); font-weight:700}
.filelist li.partial .bar > i{background:repeating-linear-gradient(45deg,var(--node),var(--node) 6px,#e8c98a 6px,#e8c98a 12px)}

/* ---- footer ---------------------------------------------------------- */
#bottom{display:flex; align-items:stretch; gap:16px; padding:8px 16px;
  border-top:2px solid var(--line); background:#fff; 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(--navy)}
#events{list-style:none; margin:4px 0 0; padding:0; overflow:auto; font:12px/1.4 ui-monospace,Menlo,monospace; color:#444}
#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(--navy); font-variant-numeric:tabular-nums}
.note{align-self:center; font-size:10px; color:var(--dim); max-width:160px; text-align:right}

/* ---- Secure chat (Wire 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:#fff; font-size:13px; line-height:1.3}
.chatfeed li.msg .who{font-weight:800; margin-right:6px}
.chatfeed li.A .who{color:var(--teal)} .chatfeed li.B .who{color:var(--amber)} .chatfeed li.C .who{color:var(--green)}
.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%,#fff); 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(--coral);
  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}
.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:#fff; 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:#fff;
  border-bottom:1px solid var(--line); font-size:12px}
.frontier[hidden]{display:none}
.fr-label{font-size:10px; font-weight:800; color:var(--teal); 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:#444; background:#f5f3ec; padding:2px 8px; border-radius:999px}
.fr-item .route{color:var(--navy)}
.fr-item b{color:var(--teal)}
.fr-clear{color:var(--up); font-weight:600}