/* The Fly Desk (desk.html). Scoped under body.desk on top of site.css.
   Colour does a job: pale cyan = all the flies together, one colour per fly, amber = launches,
   green/red = the sign of a number (always with a + or - too). */

body.desk {
  --ground: #000000; --plate: #060707; --plate-2: #0a0b0b; --card: #0b0c0c;
  --line: #1a1d1c; --line-2: #272b2a;
  --ink: #e2eaf1; --ink-dim: #a3b0bc; --ink-faint: #8793a0;
  --accent: #5ef2cc; --amber: #f0bc5f; --up: #6fdca6; --down: #ff8a8a;
  --s-pot: #5ef2cc; --s-fly: #22a3c4; --s-rule: #6a62e0;
  --f1: #22a3c4; --f2: #d55181; --f3: #f0bc5f; --f4: #6fdca6; --f5: #c08bff; --f6: #ff9f6b;
  --s-v1: #d55181; --s-v2: #f0bc5f; --s-v3: #6fdca6; --s-v4: #c08bff;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --radius: 6px;
  background-color: var(--ground);
  background-image: radial-gradient(circle at 1px 1px, rgba(157,171,183,.055) 1px, transparent 0);
  background-size: 26px 26px;
  color: var(--ink);
  font-size: 15px; line-height: 1.62;
}
body.desk .wrap { max-width: 1240px; }
@media (max-width: 560px) { body.desk .wrap { padding-inline: 16px; } }

.desk .skip { position: absolute; left: -999px; top: 8px; z-index: 30; background: var(--accent); color: #04141a; padding: 8px 12px;
  border-radius: 4px; font: 600 13px var(--mono); text-decoration: none; }
.desk .skip:focus { left: 8px; }
.desk :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.desk .up { color: var(--up); }
.desk .down { color: var(--down); }
.desk .dim { color: var(--ink-faint); }

/* ------------------------------------------------------------------ masthead */
.desk .mast { padding: 34px 0 8px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10,11,11,.92), rgba(0,0,0,0)); }
.desk .mast .eyebrow { color: var(--ink-faint); font-size: 11px; letter-spacing: .14em; margin-bottom: 10px; }
.desk .mast-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.desk h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5.6vw, 60px); line-height: 1.04; letter-spacing: -.01em; }
.desk .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.desk .chip { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--plate);
  color: var(--ink-dim); white-space: nowrap; }
.desk .chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.desk .chip-paper { color: var(--ink); border-color: var(--ink-faint); }
.desk .chip-conn[data-state="live"] { color: var(--ink); border-color: rgba(111,220,166,.45); }
.desk .chip-conn[data-state="live"] .dot { background: var(--up); animation: dpulse 2.2s ease-in-out infinite; }
.desk .chip-conn[data-state="connecting"] .dot { background: var(--ink-dim); animation: dpulse 1.2s ease-in-out infinite; }
.desk .chip-conn[data-state="stalled"] { border-color: rgba(240,188,95,.5); }
.desk .chip-conn[data-state="stalled"] .dot { background: var(--amber); }
.desk .chip-conn[data-state="offline"] { color: var(--ink); border-color: rgba(255,138,138,.55); }
.desk .chip-conn[data-state="offline"] .dot { background: var(--down); }
@keyframes dpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .desk .chip .dot { animation: none !important; } }

.desk .mast-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 12px; }
@media (min-width: 1000px) { .desk .mast-body { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 32px; align-items: end; } }
.desk .tagline { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2.2vw, 22px); color: var(--ink-dim); margin: 0; }
.desk .mast .lede { margin: 8px 0 0; max-width: 88ch; color: var(--ink-dim); font-size: 15px; line-height: 1.58; }
.desk .paper-strip { margin: 0; padding: 10px 14px; border: 1px solid var(--line-2); border-left: 3px solid var(--ink-dim);
  border-radius: 4px; background: var(--plate); font-size: 13.5px; color: var(--ink-dim); }
.desk .paper-strip strong { color: var(--ink); font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-right: 4px; }
@media (min-width: 1000px) { .desk .paper-strip strong { display: block; margin: 0 0 3px; } }
.desk .mast-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 28px;
  margin-top: 16px; padding-top: 9px; border-top: 1px solid var(--line); }
.desk .jump { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 500 12px/1.5 var(--mono); letter-spacing: .04em; }
.desk .jump a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid transparent; padding: 2px 0; }
.desk .jump a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.desk .sysline { display: flex; flex-wrap: wrap; gap: 2px 18px; padding: 2px 0 6px; font: 400 12px/1.5 var(--mono); color: var(--ink-dim); }
.desk .sysline b { color: var(--ink); font-weight: 500; }
.desk .err { margin: 10px 0 0; color: var(--amber); font: 12px var(--mono); }
@media (max-width: 560px) {
  .desk .mast { padding-top: 20px; }
  .desk .mast-foot { display: block; }
  .desk .jump { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding-bottom: 4px; scrollbar-width: none; }
  .desk .jump::-webkit-scrollbar { display: none; }
}

/* ------------------------------------------------------------------ sections */
.desk .dsec { padding-block: 48px; border-top: 1px solid var(--line); scroll-margin-top: 70px; }
.desk .mast + main .dsec:first-child { border-top: 0; }
.desk h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.005em; margin-bottom: 10px;
  display: flex; align-items: baseline; gap: 12px; }
.desk h2 .num { font: 500 12px var(--mono); color: var(--ink-faint); letter-spacing: .1em; }
.desk .prose { color: var(--ink-dim); max-width: 92ch; margin-bottom: 18px; }
.desk .sub-h { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 10px; }
.desk .caption { font-size: 13px; color: var(--ink-dim); margin: 10px 0; }

/* KPI tiles */
.desk .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
@media (max-width: 700px) { .desk .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.desk .kpi { background: var(--plate); padding: 14px 16px; min-width: 0; }
.desk .kpi .k { display: block; font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.desk .kpi b { display: block; margin-top: 4px; font: 500 clamp(20px, 2.6vw, 28px)/1.15 var(--mono); color: var(--ink);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* chart */
.desk .chart-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--plate); padding: 12px 14px 8px; }
.desk .chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 6px; }
.desk .legend { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 0; font: 12px var(--mono); color: var(--ink-dim); }
.desk .legend li { display: inline-flex; align-items: center; gap: 7px; }
.desk .legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.desk .legend i.dash { background: repeating-linear-gradient(90deg, var(--ink-faint) 0 4px, transparent 4px 7px) !important; height: 2px; }
.desk .seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.desk .seg button { font: 500 11px var(--mono); letter-spacing: .06em; color: var(--ink-dim); background: transparent; border: 0;
  padding: 6px 11px; cursor: pointer; }
.desk .seg button.on { background: var(--plate-2); color: var(--ink); }
.desk .chart { position: relative; height: 320px; }
@media (max-width: 560px) { .desk .chart { height: 240px; } }
.desk .chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.desk .chart .grid line { stroke: var(--line); }
.desk .chart .axis text { fill: var(--ink-faint); font: 11px var(--mono); }
.desk .chart .empty { fill: var(--ink-faint); font: 13px var(--sans); }
.desk .tip { position: absolute; pointer-events: none; background: var(--plate-2); border: 1px solid var(--line-2); border-radius: 4px;
  padding: 7px 9px; font: 12px/1.5 var(--mono); color: var(--ink); white-space: nowrap; transform: translate(-50%, -100%); z-index: 2; }
.desk .tip .row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.desk .tip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.desk .tip .t { color: var(--ink-faint); margin-bottom: 2px; }

/* tables */
.desk .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.desk .tbl { width: 100%; border-collapse: collapse; font: 13px/1.45 var(--mono); font-variant-numeric: tabular-nums; }
.desk .tbl th { text-align: left; font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  padding: 8px 12px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.desk .tbl td { padding: 8px 12px; border-bottom: 1px solid var(--line); color: var(--ink-dim); white-space: nowrap; }
.desk .tbl tr:hover td { background: rgba(157,171,183,.035); }
.desk .tbl .r { text-align: right; }
.desk .tbl td.strong, .desk .tbl td b { color: var(--ink); font-weight: 500; }
.desk .tbl .empty td { color: var(--ink-faint); text-align: center; padding: 18px; }
.desk .tape { max-height: 520px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.desk .tape .tbl th { position: sticky; top: 0; background: var(--plate); }
.desk .tbl-details { margin-top: 10px; }
.desk .tbl-details summary { cursor: pointer; font: 12px var(--mono); color: var(--ink-dim); padding: 6px 0; }
.desk .tbl-details .scroll { max-height: 320px; overflow-y: auto; }

.desk .tag { display: inline-block; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px;
  border-radius: 3px; border: 1px solid var(--line-2); }
.desk .tag.brain { color: var(--s-fly); border-color: rgba(34,163,196,.45); }
.desk .tag.rule { color: #9d97f0; border-color: rgba(106,98,224,.5); }
/* which chain a token is on (desk.js tok): Robinhood Chain is home, Base is the paper book on another chain */
.desk .tag.chain { margin-left: 6px; padding: 2px 4px; font-size: 9px; vertical-align: 1px; }
.desk .tag.chain.robinhood { color: #6fdca6; border-color: rgba(111,220,166,.4); }
.desk .tag.chain.base { color: #7fa6ff; border-color: rgba(92,134,255,.5); }
.desk .tag.chain.bsc { color: #f0bc5f; border-color: rgba(240,188,95,.45); }
.desk .tag.chain.solana { color: #c08bff; border-color: rgba(192,139,255,.45); }
.desk .tag.chain.arbitrum { color: #6fb8ff; border-color: rgba(111,184,255,.45); }
.desk .tag.chain.abstract { color: #5ef2cc; border-color: rgba(94,242,204,.4); }
.desk .tag.chain.poly { color: #b8a4ff; border-color: rgba(154,130,255,.5); }
/* ?clip= (marketing/clips.py): only the fly's eye, framed for a square video */
body.clip #eye { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
body.clip #eye .wrap::after { content: "flyaiworld.com/desk"; display: block; margin-top: 18px; text-align: right;
  font: 500 13px/1 var(--mono); letter-spacing: .08em; color: var(--ink-faint); }
body.clip #eye .eye-nav, body.clip #eye .prose { display: none; }
.desk .chain-h { font: 500 13px/1.4 var(--mono); color: var(--ink-dim); margin: 18px 0 8px; }
.desk .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.desk .bar { position: relative; display: inline-block; width: 64px; height: 6px; background: var(--line); border-radius: 3px; margin-left: 10px; vertical-align: 1px; }
.desk .bar span { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.desk .spark { display: block; }

/* brains vs rules */
.desk .sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .desk .sides { grid-template-columns: minmax(0, 1fr); } }
.desk .side { border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: var(--radius); background: var(--plate); padding: 14px 16px; }
.desk .side h3 { font: 500 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin: 0; }
.desk .side .sub { font-size: 13px; color: var(--ink-faint); }
.desk .side .big { font: 500 30px/1.2 var(--mono); margin-top: 8px; font-variant-numeric: tabular-nums; }
.desk .side .meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 12.5px var(--mono); color: var(--ink-dim); margin-top: 4px; }

/* tabs */
.desk .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.desk .tabs button { white-space: nowrap; font: 500 12px var(--mono); color: var(--ink-dim); background: var(--plate); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.desk .tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--accent); background: var(--plate-2); }
@media (max-width: 560px) { .desk .tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } }

/* options & launches */
.desk .two { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 860px) { .desk .two { grid-template-columns: minmax(0, 1fr); } }
.desk .launches { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.desk .launches li { border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 4px; background: var(--plate);
  padding: 10px 12px; font-size: 13.5px; color: var(--ink-dim); }
.desk .launches li b { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.desk .launches .empty { border-left-color: var(--line-2); color: var(--ink-faint); }

/* how */
.desk .how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; max-width: 1000px; }
@media (max-width: 700px) { .desk .how { grid-template-columns: minmax(0, 1fr); } }
.desk .how p { color: var(--ink-dim); margin: 0; }
.desk .how b { color: var(--ink); font-weight: 600; }

/* the fly's eye (a replay of one fly's bar on a canvas) */
.desk .eye-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.desk .eye-head .tabs { margin: 0; }
.desk .eye-nav { display: flex; align-items: center; gap: 6px; font: 12px var(--mono); color: var(--ink-dim); }
.desk .navbtn { font: 500 12px var(--mono); color: var(--ink-dim); background: var(--plate); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 5px 11px; cursor: pointer; min-width: 30px; }
.desk .navbtn:hover:not([disabled]) { color: var(--ink); border-color: var(--ink-faint); }
.desk .navbtn[disabled] { opacity: .4; cursor: default; }
.desk .eye-bar { min-width: 120px; text-align: center; }
.desk .room-card { border: 1px solid var(--line); border-radius: var(--radius); background: #050609; overflow: hidden; }
.desk .room { display: block; width: 100%; aspect-ratio: 16 / 7; }
@media (max-width: 700px) { .desk .room { aspect-ratio: 4 / 5; } }
.desk .acts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
@media (max-width: 560px) { .desk .acts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.desk .act { background: var(--plate); padding: 8px 10px; font: 11px/1.3 var(--mono); color: var(--ink-faint); min-width: 0; }
.desk .act .nm { display: flex; justify-content: space-between; gap: 6px; letter-spacing: .06em; text-transform: uppercase; }
.desk .act .nm b { text-transform: none; font-weight: 600; }
.desk .act .meter { position: relative; height: 5px; background: var(--line); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.desk .act .meter span { position: absolute; left: 0; top: 0; bottom: 0; background: #3a4350; border-radius: 3px; transition: width .5s ease; }
.desk .act.fired { color: var(--ink-dim); }
.desk .act.fired .meter span { background: var(--s-fly); }
.desk .act.won { color: var(--ink); }
.desk .act.won .meter span { background: var(--amber); }
.desk .eye-legend { margin-top: 10px; }
.desk .eye-legend i { width: 12px; height: 12px; border-radius: 2px; background: transparent; border: 2px solid; }
.desk .eye-legend .k-target { border-color: var(--accent); }
.desk .eye-legend .k-threat { border-color: var(--down); }
.desk .eye-legend .k-held { border-color: var(--s-fly); border-width: 1px; }
.desk .eye-legend .k-act { border-color: var(--amber); transform: rotate(45deg) scale(.8); }
@media (prefers-reduced-motion: reduce) { .desk .act .meter span { transition: none; } }

/* the ticker: the latest fills, scrolling under the masthead */
.desk .amber { color: var(--amber); }
.desk .ticker { border-bottom: 1px solid var(--line); background: #07090d; overflow: hidden; white-space: nowrap;
  font: 12.5px/1 var(--mono); color: var(--ink-dim); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.desk .tk-track { display: inline-flex; gap: 34px; padding: 11px 0; animation: tk 60s linear infinite; }
.desk .ticker:hover .tk-track { animation-play-state: paused; }
.desk .tk { display: inline-flex; align-items: center; gap: 6px; }
.desk .tk b { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.desk .tk .swatch { margin-right: 2px; }
@keyframes tk { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .desk .tk-track { animation: none; } }
.desk .kpi b .sub { font-size: .62em; font-weight: 500; margin-left: 4px; white-space: nowrap; }

/* the stats row under the tiles: 24h high / low / change, and the high since the start */
.desk .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: -6px 0 14px; }
@media (max-width: 700px) { .desk .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.desk .stats:empty { display: none; }
.desk .st { background: var(--plate-2); padding: 9px 16px; font: 13px/1.5 var(--mono); color: var(--ink-dim); min-width: 0; }
.desk .st .k { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.desk .st b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.desk .st .when { display: block; font-size: 11px; color: var(--ink-faint); }

/* 02 all-time records */
.desk .rec-cards .kpi b .up { color: var(--up, inherit); }
.desk .rec-sub { display: block; margin-top: 6px; font: 12px/1.45 var(--mono); color: var(--ink-dim); overflow-wrap: anywhere; }
.desk #rec-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .desk #rec-stats { grid-template-columns: 1fr; } }

/* 02 the holder vote (deskvote.js) */
.desk #vote { --m-safe: #4cc3e6; --m-balanced: var(--accent); --m-risky: #ffb15c; }
.desk .vote-panel { border: 1px solid var(--line-2); border-radius: 18px; padding: 18px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(94,242,204,.06), transparent 55%), var(--plate); }
.desk .vote-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.desk .vs-now { display: inline-flex; align-items: center; gap: 12px; }
.desk .vs-now b { display: block; font: 600 22px/1.1 var(--display, inherit); color: var(--mc, var(--ink)); }
.desk .vs-now[data-mode="safe"] { --mc: var(--m-safe); }
.desk .vs-now[data-mode="balanced"] { --mc: var(--m-balanced); }
.desk .vs-now[data-mode="risky"] { --mc: var(--m-risky); }
.desk .vs-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--mc);
  background: color-mix(in srgb, var(--mc) 12%, transparent); box-shadow: 0 0 22px -8px var(--mc); }
.desk .vs-ico svg, .desk .vc-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.desk .vs-k { display: block; font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.desk .vs-facts { display: flex; gap: 22px; }
.desk .vs-facts b { display: block; font-size: 16px; font-weight: 500; color: var(--ink); }
.desk .vote-split { display: flex; height: 8px; gap: 3px; margin: 16px 0 18px; border-radius: 999px; overflow: hidden; }
.desk .vote-split i { display: block; min-width: 6px; border-radius: 999px; transition: flex .5s; }
.desk .vote-split i[data-mode="safe"] { background: var(--m-safe); }
.desk .vote-split i[data-mode="balanced"] { background: var(--m-balanced); }
.desk .vote-split i[data-mode="risky"] { background: var(--m-risky); }
.desk .vote-split.is-empty { height: auto; overflow: visible; background: none; }
.desk .vs-empty { font: 500 13px var(--mono); color: var(--ink-dim); }
.desk .vote-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 820px) { .desk .vote-cards { grid-template-columns: 1fr; } .desk .vs-facts { gap: 16px; } }
.desk .vote-card { --mc: var(--accent); position: relative; display: flex; flex-direction: column; gap: 10px; text-align: left;
  min-width: 0; padding: 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--plate-2);
  color: var(--ink); font: inherit; cursor: pointer; transition: border-color .18s, transform .18s, box-shadow .18s; }
.desk .vote-card[data-mode="safe"] { --mc: var(--m-safe); }
.desk .vote-card[data-mode="risky"] { --mc: var(--m-risky); }
.desk .vote-card:hover:not([disabled]) { border-color: color-mix(in srgb, var(--mc) 60%, transparent); transform: translateY(-2px); }
.desk .vote-card.on { border-color: var(--mc); box-shadow: 0 0 0 1px var(--mc) inset, 0 10px 34px -16px var(--mc); }
.desk .vote-card[disabled] { opacity: .6; cursor: progress; }
.desk .vc-top { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
.desk .vc-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--mc);
  background: color-mix(in srgb, var(--mc) 12%, transparent); }
.desk .vc-tag { font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px;
  border-radius: 999px; color: #000; background: var(--mc); }
.desk .vc-tag.lead { background: transparent; color: var(--mc); border: 1px solid var(--mc); }
.desk .vc-name { font: 600 24px/1.1 var(--display, inherit); color: var(--mc); }
.desk .vc-desc { color: var(--ink-dim); font-size: 14px; line-height: 1.45; }
.desk .vc-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.desk .vc-chips span { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 6px 9px;
  border-radius: 8px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.desk .vc-chips small { font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.desk .vc-chips b { font: 500 13px var(--mono); color: var(--ink); }
.desk .vc-num { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-height: 22px;
  font: 500 12.5px var(--mono); color: var(--ink-faint); }
.desk .vc-num b { font-size: 18px; color: var(--ink); }
.desk .vc-cta { margin-top: auto; text-align: center; padding: 10px 14px; border-radius: 999px; font: 600 14px var(--display, inherit);
  color: var(--mc); border: 1px solid color-mix(in srgb, var(--mc) 55%, transparent); transition: background .18s, color .18s; }
.desk .vote-card:hover:not([disabled]) .vc-cta { background: color-mix(in srgb, var(--mc) 14%, transparent); }
.desk .vote-card.on .vc-cta { background: var(--mc); color: #000; border-color: var(--mc); }
.desk .vote-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.desk .vote-msg { font: 500 13px var(--mono); color: var(--ink-dim); }
.desk .vote-msg[data-kind="err"] { color: var(--down); }
.desk .vote-msg[data-kind="ok"] { color: var(--up); }

/* ------------------------------------------------------------------ the terminal look (2026-10-05)
   The user: "simplify the flydesk and make it look more like the /terminal". terminal.css gives the panels, KPI tiles,
   top bar, pills and the grid background; this lays the desk's own pieces into them. */
body.desk.term { background-color: var(--t-bg); background-image: none; color: var(--t-text); font-size: 13px; line-height: 1.5; }
.dkt {
  display: grid; gap: 10px; padding: 10px 14px 18px; max-width: 1680px; margin: 0 auto;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "top top top top top top top top top top top top"
    "intro intro intro intro intro intro intro intro intro intro intro intro"
    "mkt mkt mkt mkt mkt mkt mkt mkt mkt mkt mkt mkt"
    "tick tick tick tick tick tick tick tick tick tick tick tick"
    "stake stake stake stake stake stake stake stake stake stake stake stake"
    "kpi kpi kpi kpi kpi kpi kpi kpi kpi kpi kpi kpi"
    "stats stats stats stats stats stats stats stats stats stats stats stats"
    "chart chart chart chart chart chart chart chart pos pos pos pos"
    "chat chat chat chat chat chat chat chat chat chat chat chat"
    "tape tape tape tape tape tape books books books books books books"
    "launch launch launch launch launch launch launch launch launch launch launch launch"
    "pay pay pay pay pay pay pay pay pay pay pay pay"
    "vote vote vote vote vote vote vote vote vote vote vote vote"
    "foot foot foot foot foot foot foot foot foot foot foot foot"
    "how how how how how how how how how how how how";
  font-family: var(--t-mono); align-content: start;
  background-image: linear-gradient(rgba(94, 242, 204, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 242, 204, .025) 1px, transparent 1px);
  background-size: 40px 40px;
}
.dkt > section { padding-block: 10px; border-top: 0; }
.dkt-top { grid-area: top; }
.dkt #market-bar { grid-area: mkt; margin: 0; }   /* the market's mood (marketbar.js, 2026-10-06) */
.dkt-top h1 { margin: 0; font: 700 18px/1.1 Outfit, sans-serif; letter-spacing: .06em; color: var(--t-text); }
.dkt-top h1 i { color: var(--t-mint); font-style: normal; }
.dkt-ticker { grid-area: tick; border: 1px solid var(--t-line); border-radius: 6px; background: rgba(4, 7, 6, .8); }
.dkt-err { grid-column: 1 / -1; margin: 0; }      /* only while the snapshot can't be read */
/* one desk: the test books stay on the desk's own status, not on this page */
.desk .dkt #ghosts-wrap { display: none !important; }
.dkt-kpis { grid-area: kpi; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dkt > section.dkt-kpis { padding-block: 0; }
.dkt-kpis .tm-kpi b { font-size: 24px; overflow-wrap: anywhere; }
.dkt-kpis .tm-kpi b .sub { display: block; margin: 2px 0 0; font: 500 11px var(--t-mono); color: var(--t-dim); white-space: normal; }
.dkt-stats { grid-area: stats; margin: 0; border-color: var(--t-line); background: var(--t-line); }
.desk .dkt-stats .st { background: var(--t-panel); font-size: 12px; }
.dkt-chart { grid-area: chart; }
.dkt-pos { grid-area: pos; max-height: 470px; }
.dkt-tape { grid-area: tape; max-height: 440px; }
.dkt-books { grid-area: books; max-height: 440px; }
.dkt-vote { grid-area: vote; }
/* the holders' chat (deskchat.js, 2026-10-26) */
.dkt-chat { grid-area: chat; display: flex; flex-direction: column; }
.desk .dkt .dkt-chat h2 small { color: var(--t-dim); letter-spacing: .04em; text-transform: none; font-weight: 500; margin-left: 8px; }
.desk .chat-watch { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 8px; font-size: 12px; color: var(--t-dim); }
.desk .chat-watch[hidden] { display: none; }
.desk .chat-log { height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px;
  border: 1px solid var(--t-line); border-radius: 6px; background: rgba(4, 7, 6, .8); overscroll-behavior: contain; }
.desk .ch-empty { margin: auto; color: var(--t-dim); font-size: 12px; text-align: center; }
.desk .ch-msg { max-width: 88%; padding: 8px 10px; border-radius: 8px; background: #08120f; border: 1px solid var(--t-line); }
.desk .ch-msg.mine { align-self: flex-end; border-color: color-mix(in srgb, var(--t-mint) 35%, transparent); }
.desk .ch-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11px; color: var(--t-dim); }
.desk .ch-who { color: var(--t-text); font-weight: 600; text-decoration: none; } .desk .ch-who:hover { color: var(--t-mint); }
.desk .ch-at { margin-left: auto; }
.desk .ch-w { font: 600 10px var(--t-mono); padding: 1px 7px; border-radius: 999px; color: var(--t-mint);
  border: 1px solid color-mix(in srgb, var(--t-mint) calc(var(--w) * 70%), var(--t-line));
  background: color-mix(in srgb, var(--t-mint) calc(var(--w) * 18%), transparent); }
.desk .ch-text { margin-top: 3px; color: #dfe9e6; font: 13px/1.45 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.desk .ch-tok { color: var(--t-mint); font-weight: 600; }
.desk .ch-check { margin-top: 6px; padding: 6px 8px; border-left: 2px solid var(--t-line-hi); border-radius: 4px; background: #050b09;
  font-size: 11.5px; color: #c5d3cf; overflow-wrap: anywhere; }
.desk .ch-check[data-v="pass"] { border-left-color: var(--t-mint); }
.desk .ch-check[data-v="fail"] { border-left-color: var(--t-red); }
.desk .ch-check[data-v="info"], .desk .ch-check[data-v="wait"] { border-left-color: #f2b33d; }
.desk .ch-check[data-v="wait"] { color: var(--t-dim); }
.desk .ch-desk { font: 700 9.5px var(--t-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--t-dim); margin-right: 4px; }
.desk .ch-check[data-v="pass"] .ch-verdict { color: var(--t-mint); }
.desk .ch-check[data-v="fail"] .ch-verdict { color: var(--t-red); }
.desk .ch-why { color: var(--t-dim); }
.desk .ch-facts { display: block; margin-top: 2px; color: var(--t-dim); font-size: 11px; }
.desk .chat-form { margin-top: 8px; }
.desk .chat-row { display: flex; gap: 8px; }
.desk .chat-row[hidden] { display: none; }
.desk .chat-row input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border-radius: 6px; border: 1px solid var(--t-line);
  background: #050b09; color: var(--t-text); font: 13px Inter, system-ui, sans-serif; }
.desk .chat-row input:focus { outline: none; border-color: var(--t-mint); }
.desk .chat-row input:disabled { opacity: .5; }
.desk .chat-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; font-size: 12px; color: var(--t-dim); }
.desk .chat-foot [hidden] { display: none; }
@media (max-width: 760px) { .desk .chat-log { height: 300px; } .desk .ch-msg { max-width: 100%; } }
/* staking (deskstake.js, 2026-10-14) */
.dkt-stake { grid-area: stake; }
/* up top and lit (2026-10-14, the user: "it should be in a prominent place") */
.desk .dkt .dkt-stake { border-color: color-mix(in srgb, var(--t-mint, var(--accent)) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--t-mint, var(--accent)) 25%, transparent) inset, 0 0 40px -18px var(--t-mint, var(--accent)); }
.desk .dkt .dkt-stake h2 > span { color: var(--t-mint, var(--accent)); font-size: 15px; }
.desk .stk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.desk .stk-tiles:empty { display: none; }
.desk .stk-tile { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--plate-2); min-width: 0; }
.desk .stk-tile b { display: block; margin-top: 4px; font-size: 18px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.desk .stk-tile b small { display: block; font-size: 11px; color: var(--ink-faint); }
.desk .stk-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px;
  border-radius: 12px; border: 1px dashed var(--line-2); font: 500 13px var(--mono); color: var(--ink-dim); }
.desk .stk-pending[hidden], .desk .stk-form[hidden] { display: none; }
.desk .stk-pending span { flex: 1 1 220px; }
.desk .stk-form { margin-top: 14px; }
.desk .stk-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); margin-bottom: 10px; }
.desk .stk-tabs button { font: 600 13px var(--mono); padding: 6px 14px; border-radius: 999px; border: 0; background: none; color: var(--ink-dim); cursor: pointer; }
.desk .stk-tabs button.on { background: var(--accent); color: #000; }
.desk .stk-row { display: flex; gap: 8px; align-items: center; }
.desk .stk-row input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--plate); color: var(--ink); font-size: 15px; }
@media (max-width: 700px) { .desk .stk-tiles { grid-template-columns: 1fr; } }
.dkt-pay { grid-area: pay; max-height: 520px; }
.dkt-pay[hidden] { display: none; }
.desk .dkt .dkt-pay-note { color: #f2b33d; }
.desk .dkt .dkt-pay h2 small { color: var(--t-dim); letter-spacing: .04em; text-transform: none; font-weight: 500; }
.desk .dkt #pay-tbl a { color: var(--t-text); text-decoration: none; } .desk .dkt #pay-tbl a:hover { color: var(--t-mint); }
.desk .dkt #pay-tbl tr.off td { color: var(--t-dim); }
.dkt-foot { grid-area: foot; }
/* the flies' launches: one card each, the curve's way to graduation as a bar */
.dkt-launch { grid-area: launch; }
.desk .dkt .dkt-launch h2 small { color: var(--t-dim); letter-spacing: .04em; text-transform: none; font-weight: 500; margin-left: 8px; }
.desk .dkt .lc-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.desk .dkt .lc-grid li { display: grid; grid-template-columns: 52px 1fr; gap: 4px 12px; align-items: center; padding: 12px;
  border: 1px solid var(--t-line); border-left: 3px solid #f2b33d; border-radius: 6px; background: rgba(4, 7, 6, .8); color: var(--t-text); }
.desk .dkt .lc-grid li.empty { display: block; border-left-color: var(--t-line); color: var(--t-dim); }
.lc-logo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; grid-row: span 2; background: #10201b; }
.lc-name a { color: var(--t-text); text-decoration: none; } .lc-name a:hover { color: var(--t-mint); }
.lc-name b { font: 700 15px var(--t-mono); margin-right: 6px; }
.lc-sub { color: var(--t-dim); font-size: 11.5px; }
.lc-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #14231e; overflow: hidden; margin-top: 6px; }
.lc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f2b33d, var(--t-mint)); }
.lc-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; font-size: 11px; color: var(--t-dim); }
.lc-stats b { display: block; color: var(--t-text); font-size: 13px; font-weight: 600; }
.lc-desc { grid-column: 1 / -1; color: var(--t-dim); font-size: 12px; line-height: 1.45; margin-top: 4px; }
.lc-acts { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.desk .dkt .lc-addr { font: 600 11.5px var(--t-mono); color: var(--t-text); background: #10201b; border: 1px solid var(--t-line);
  border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.desk .dkt .lc-addr:hover { border-color: var(--t-mint); color: var(--t-mint); }
.desk .dkt .lc-scan { color: var(--t-dim); text-decoration: none; font-size: 13px; } .desk .dkt .lc-scan:hover { color: var(--t-mint); }
.desk .dkt .lc-pons { margin-left: auto; font: 700 11.5px var(--t-mono); color: #04110d; background: var(--t-mint, #5ef2cc); border-radius: 999px;
  padding: 5px 12px; text-decoration: none; } .desk .dkt .lc-pons:hover { filter: brightness(1.1); }
.dkt-how { grid-area: how; }
/* the site's serif headings and plates give way to the terminal's */
.desk .dkt .tm-panel h2 { font: 700 10.5px/1.2 var(--t-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-mint); margin: 0 0 8px; }
.desk .dkt .chart { height: 340px; }
.desk .dkt .tbl { font-size: 12px; }
.desk .dkt .tbl th { font-size: 10px; color: var(--t-dim); border-bottom-color: var(--t-line-hi); padding: 6px 8px; }
.desk .dkt .tbl td { padding: 6px 8px; border-bottom-color: rgba(16, 32, 27, .7); color: #c5d3cf; }
.desk .dkt .tbl tr:hover td { background: rgba(94, 242, 204, .04); }
.desk .dkt .tm-scroll { flex: 1; min-height: 0; overflow: auto; }
.desk .dkt .tape { max-height: none; border: 0; border-radius: 0; }
.desk .dkt .tape .tbl th { background: var(--t-panel); }
.desk .dkt .caption { font-size: 12px; color: var(--t-dim); margin: 0 0 8px; }
.desk .dkt .tabs button, .desk .dkt .seg button { font-family: var(--t-mono); }
.desk .dkt .tabs button[aria-selected="true"] { border-color: var(--t-mint); color: var(--t-mint); }
.desk .dkt .seg button.on { color: var(--t-mint); }
.desk .dkt .chart-card, .desk .dkt .vote-panel { background: transparent; }
.desk .dkt .vote-panel { border-color: var(--t-line); border-radius: 6px; }
.desk .dkt .vote-card { border-radius: 8px; background: #050b09; border-color: var(--t-line); }
.desk .dkt .sysline { padding: 0; font-size: 10.5px; letter-spacing: .08em; color: var(--t-dim); }
.desk .dkt .sysline b { color: var(--t-text); }
/* the ticker: desk.js's .tk-track inside the terminal's strip */
.desk .dkt-ticker { font: 11px/1 var(--t-mono); color: var(--t-dim); }
.desk .dkt-ticker .tk-track { padding: 8px 0; }
.desk .dkt-ticker .tk { padding: 0; border: 0; font-size: 11px; }
/* the connection pill: desk.js sets data-state (live / stalled / offline / connecting) */
.desk .tm-live[data-state="live"] { color: var(--t-mint); border-color: rgba(94, 242, 204, .4); }
.desk .tm-live[data-state="live"]::before { background: var(--t-mint); box-shadow: 0 0 10px var(--t-mint); animation: tm-blink 1.6s infinite; }
.desk .tm-live[data-state="stalled"] { color: var(--amber); border-color: rgba(240, 188, 95, .45); }
.desk .tm-live[data-state="stalled"]::before { background: var(--amber); }
.desk .tm-live[data-state="offline"] { color: var(--t-red); border-color: rgba(255, 90, 82, .45); }
.desk .tm-live[data-state="offline"]::before { background: var(--t-red); }
.desk .tm-status .tm-mode { margin-left: 0; font-size: 10.5px; padding: 4px 11px; }
/* how it trades: folded away */
.dkt-how summary { cursor: pointer; font: 700 10.5px/1.2 var(--t-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-mint); }
.dkt-how .how { margin-top: 12px; max-width: none; }
.desk .dkt-how .how p { color: #c5d3cf; font-family: Inter, system-ui, sans-serif; font-size: 13px; }
@media (max-width: 1180px) {
  .dkt { grid-template-areas:
    "top top top top top top top top top top top top"
    "intro intro intro intro intro intro intro intro intro intro intro intro"
    "mkt mkt mkt mkt mkt mkt mkt mkt mkt mkt mkt mkt"
    "tick tick tick tick tick tick tick tick tick tick tick tick"
    "stake stake stake stake stake stake stake stake stake stake stake stake"
    "kpi kpi kpi kpi kpi kpi kpi kpi kpi kpi kpi kpi"
    "stats stats stats stats stats stats stats stats stats stats stats stats"
    "chart chart chart chart chart chart chart chart chart chart chart chart"
    "pos pos pos pos pos pos books books books books books books"
    "chat chat chat chat chat chat chat chat chat chat chat chat"
    "tape tape tape tape tape tape tape tape tape tape tape tape"
    "launch launch launch launch launch launch launch launch launch launch launch launch"
    "pay pay pay pay pay pay pay pay pay pay pay pay"
    "vote vote vote vote vote vote vote vote vote vote vote vote"
    "foot foot foot foot foot foot foot foot foot foot foot foot"
    "how how how how how how how how how how how how"; }
}
@media (max-width: 760px) {
  .dkt { display: flex; flex-direction: column; padding: 8px 16px 16px; }
  .dkt > * { min-width: 0; max-width: 100%; }
  .dkt-top { flex-wrap: wrap; } .dkt-top .tm-brand small { display: none; }
  .dkt-ticker { order: -2; }
  .dkt #market-bar { order: -3; }
  .dkt-kpis { grid-template-columns: 1fr 1fr; } .dkt-kpis .tm-kpi:first-child { grid-column: 1 / -1; }
  .dkt-kpis .tm-kpi b { font-size: 20px; }
  .desk .dkt .chart { height: 240px; }
  .dkt-pos, .dkt-tape, .dkt-books { max-height: 380px; }
}

/* ---- what the desk is, in plain words, above the terminal (2026-10-24 restructure, flytrade/SITE-RESTRUCTURE-PLAN.md) ---- */
.dkt-intro { grid-area: intro; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dkt-intro > div { border: 1px solid var(--t-line); border-radius: 8px; padding: 14px 16px; background: rgba(4, 7, 6, .8);
                   display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dkt-intro b { font: 600 15px/1.3 Outfit, sans-serif; color: var(--t-text); }
.dkt-intro p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--t-dim); }
.dkt-intro .dki-you { border-color: color-mix(in srgb, var(--t-mint, var(--accent)) 45%, transparent); }
.dkt-intro .dki-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.dkt-intro .dki-num { font: 700 11px/1 var(--t-mono); letter-spacing: .14em; color: var(--t-mint); text-transform: uppercase; }
@media (max-width: 760px) { .dkt-intro { grid-template-columns: 1fr; } }
.dkt-intro > [hidden] { display: none; }