/* Fiber Pulse, drawn like the LSP's live view: the network fills the screen as living cells and roots, and the words
   sit quietly in its corners (the name and counts top left, the views and menu top right, what just happened bottom
   left, the switches bottom right). A tapped node opens a card; "What happened" opens the full list and the key. One
   dark look on purpose: the network glows. */
:root {
  --bg: #0a0907; --glass: rgba(20, 18, 14, 0.8); --glass2: rgba(20, 18, 14, 0.94);
  --line: #36322a; --fg: #f0ece2; --mut: #9a9486;
  --lime: #cbf34d; --pale: #d9d4c4; --blue: #62c9f5; --pink: #ff6b8b; --amber: #f2b84b; --off: #6b675c;
  --ui: var(--font-ui); --num: var(--font-num); /* theme.css */
  --edge: max(16px, env(safe-area-inset-left, 0px)); --edge-r: max(16px, env(safe-area-inset-right, 0px));
  --top: calc(env(safe-area-inset-top, 0px) + 16px); --bot: calc(env(safe-area-inset-bottom, 0px) + 16px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.45 var(--ui); overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
canvas:active { cursor: grabbing; }
.hud { position: fixed; z-index: 2; }

/* top left: what this is and how big it is */
.top { top: var(--top); left: var(--edge); max-width: min(560px, calc(100vw - 200px)); pointer-events: none; }
.top > * { pointer-events: auto; }
.eyebrow { font: 11px var(--num); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); margin: 0 0 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.live { width: 7px; height: 7px; border-radius: 50%; background: var(--mut); flex: none; }
.live.on { background: var(--lime); box-shadow: 0 0 10px var(--lime); animation: beat 1.6s infinite; }
@keyframes beat { 50% { opacity: 0.35; } }
h1 { font-size: clamp(22px, 3.4vw, 34px); line-height: 1.05; margin: 0 0 10px; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font: 12px var(--num); color: var(--mut); }
.stats b { color: var(--lime); font-weight: 500; font-variant-numeric: tabular-nums; }
.lead { font-size: 13px; line-height: 1.45; color: var(--mut); margin: 10px 0 0; max-width: 52ch; }

/* top right: the views and the menu, as on every Pulse page */
.corner { top: var(--top); right: var(--edge-r); display: flex; gap: 8px; align-items: center; }
.menu-slot, .views-slot { display: inline-flex; }
/* an open menu lifts its corner above the log, the switches and the cards, so they neither show through it nor take
   its taps (they did on a phone, 2026-11-02) */
.corner:has(details.pmenu[open]) { z-index: 20; }

/* bottom left: what just happened */
.log { left: var(--edge); bottom: var(--bot); margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; max-width: min(46ch, 42vw); font-size: 13px; pointer-events: none; }
.log li { background: rgba(20, 18, 14, 0.66); border-left: 2px solid var(--lime); padding: 5px 10px; border-radius: 0 6px 6px 0; animation: rise 0.5s ease-out; }
.log li small { color: var(--mut); font: 11px var(--num); margin-left: 6px; white-space: nowrap; }
@keyframes rise { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* bottom right: the switches */
.controls { right: var(--edge-r); bottom: var(--bot); display: grid; gap: 8px; justify-items: end; }
.row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--glass); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.seg button { border: 0; background: transparent; padding: 7px 13px; font-size: 12.5px; color: var(--mut); cursor: pointer; }
.seg button[aria-pressed="true"] { color: #14120e; background: var(--lime); }
.pill { font-size: 12.5px; color: var(--fg); background: var(--glass); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pill:hover, .pill[aria-expanded="true"] { border-color: var(--lime); }
.slow { margin: 0; max-width: 34ch; text-align: right; font-size: 12px; color: var(--mut); }

.empty { position: fixed; inset: 0; margin: auto; height: fit-content; max-width: 34ch; text-align: center; color: var(--mut); pointer-events: none; z-index: 1; }
.tip { position: fixed; z-index: 3; pointer-events: none; background: var(--glass2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; font-size: 12.5px; white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); }
.tip small { color: var(--mut); font-family: var(--num); }

/* a tapped node, and the full list with the key: cards over the network */
.card, .panel { top: calc(var(--top) + 52px); right: var(--edge-r); width: min(340px, calc(100vw - 32px)); max-height: calc(100% - var(--top) - var(--bot) - 150px); overflow-y: auto; overscroll-behavior: contain; background: var(--glass2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 14px; align-content: start; z-index: 4; }
.card h2 { margin: 0 0 2px; font-size: 18px; overflow-wrap: anywhere; }
.card h3, .panel h3 { margin: 0 0 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); font-family: var(--num); }
#detail h3, #overview h3:not(:first-child) { margin-top: 16px; }
.card p, .panel p { margin: 0; }
.x { position: absolute; top: 8px; right: 8px; background: none; border: 1px solid var(--line); border-radius: 999px; width: 30px; height: 30px; cursor: pointer; color: var(--mut); font-size: 16px; line-height: 1; }
.x:hover { color: var(--fg); border-color: var(--lime); }
.panel > section { padding-right: 30px; }
.id { font: 12px var(--num); color: var(--mut); overflow-wrap: anywhere; }
.facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; margin: 10px 0 0; font-size: 13px; }
.facts dt { color: var(--mut); }
.facts dd { margin: 0; font-family: var(--num); font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.day { color: var(--mut); font-size: 12.5px; margin-bottom: 6px !important; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 9px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.feed li:first-child { border-top: 0; }
.feed li.new { animation: rise 0.6s ease-out; }
.feed i { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; }
.feed small { display: block; color: var(--mut); font: 11.5px var(--num); }
.feed small a { text-decoration: none; }
.feed small a:hover { text-decoration: underline; color: var(--fg); }
.feed .none { display: block; color: var(--mut); border: 0; }
.more { margin-top: 6px; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 12.5px; color: var(--mut); }
.more:hover { color: var(--fg); border-color: var(--lime); }
.key { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.key li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; }
.key svg { width: 30px; height: 18px; display: block; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li + li { border-top: 1px solid var(--line); }
.rows button { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 9px; align-items: center; width: 100%; padding: 7px 0; background: none; border: 0; text-align: left; cursor: pointer; }
.rows button:hover span { color: var(--lime); }
.rows i { width: 9px; height: 9px; border-radius: 3px; }
.rows span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows b { font: 500 12px var(--num); color: var(--lime); }
.rows-note { margin-top: 6px !important; }
.back { background: none; border: 0; padding: 0 0 6px; color: var(--mut); cursor: pointer; font-size: 13px; text-align: left; }
.back:hover { color: var(--fg); }
.note { color: var(--mut); font-size: 12.5px; display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.note p { margin: 0; }
.toast { position: fixed; left: 50%; top: calc(var(--top) + 4px); transform: translateX(-50%); z-index: 10; display: flex; gap: 10px; align-items: center; background: var(--glass2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 8px 6px 14px; font-size: 13px; }
.toast button { background: var(--lime); color: #14120e; border: 0; border-radius: 999px; padding: 6px 12px; font-weight: 700; cursor: pointer; }

/* medium screens: the views stay in the menu */
@media (max-width: 900px) { .views-slot { display: none; } }

/* phones: the words on top, what happened and the switches in one column at the bottom, cards rise from below */
@media (max-width: 760px) {
  .top { right: calc(var(--edge-r) + 46px); max-width: none; }
  .lead { display: none; }
  /* above the switches, however many lines they take (fiber.js measures them into --ctl) */
  .log { right: var(--edge-r); max-width: none; bottom: calc(var(--bot) + var(--ctl, 92px) + 10px); font-size: 12.5px; }
  #share-slot .ps-btn span { display: none; } /* the icon alone, so the switches keep to one line */
  #share-slot .ps-btn { padding: 7px 10px; }
  #share-slot .pshare.up .ps-panel { left: 0; right: auto; } /* the switches sit at the left on a phone */
  .log li:nth-child(n + 3) { display: none; }
  .controls { left: var(--edge); justify-items: start; }
  .row { justify-content: flex-start; }
  .slow { text-align: left; }
  .card, .panel { top: auto; left: 10px; right: 10px; width: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); max-height: 72%; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .live.on, .log li, .feed li.new { animation: none; } }