/* ROBINFLY site v4: SILO terminal. Green phosphor CRT, framed text panels. */

:root {
  --ph0: #020806;
  --ph1: #0a3a24;
  --ph2: #1f9a5c;
  --ph3: #7dffb8;
  --amber: #e8c65a;
  --red: #ff5f4a;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gap: 8px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--ph0);
  color: var(--ph2);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    linear-gradient(90deg, rgba(31, 154, 92, .05) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(rgba(31, 154, 92, .05) 1px, transparent 1px) 0 0 / 44px 44px;
  opacity: .5;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

a { color: var(--ph3); text-decoration: none; border-bottom: 1px solid var(--ph1); }
a:hover, a:focus-visible { color: var(--amber); border-bottom-color: var(--amber); }

:focus-visible { outline: 1px solid var(--amber); outline-offset: 1px; }

/* ---------- screen ---------- */

.crt {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  height: 100%; width: 100%;
  padding: var(--gap);
  gap: var(--gap);
  text-shadow: 0 0 6px rgba(31, 154, 92, .35);
}

/* ---------- header strip ---------- */

.strip {
  display: flex; align-items: center; gap: 18px;
  flex: 0 0 auto;
  border: 1px solid var(--ph1);
  padding: 5px 10px;
  overflow: hidden;
  white-space: nowrap;
}
.brand {
  color: var(--ph3); font-weight: 600; font-size: 15px; letter-spacing: .22em;
}
.f { display: inline-flex; align-items: baseline; gap: 6px; font-size: 11px; letter-spacing: .06em; }
.f i { color: var(--ph1); font-style: normal; }
.f b { color: var(--ph2); font-weight: 500; }
.f b[data-mode="live"] { color: var(--amber); }
.f b[data-mode="paper"] { color: var(--ph3); }
.ca b { color: var(--amber); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.strip .run {
  margin-left: auto;
  border: 1px solid var(--ph1); padding: 2px 10px;
  font-size: 11px; letter-spacing: .18em; color: var(--ph2);
}
.strip .run[data-run="1"] { color: var(--ph0); background: var(--amber); border-color: var(--amber); text-shadow: none; }

/* ---------- grid ---------- */

.grid {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 320px;
  grid-template-rows: minmax(0, 1fr) 170px;
  gap: var(--gap);
}
.p-menu  { grid-column: 1; grid-row: 1; }
.p-spec  { grid-column: 2; grid-row: 1; }
.p-taste { grid-column: 3; grid-row: 1; }
.p-log   { grid-column: 1 / -1; grid-row: 2; }

.panel {
  position: relative; min-height: 0; min-width: 0;
  border: 1px solid var(--ph1);
  display: flex; flex-direction: column;
}
.panel > h2 {
  position: absolute; z-index: 3; top: -8px; left: 12px;
  margin: 0; padding: 0 7px;
  background: var(--ph0);
  font-size: 11px; font-weight: 500; letter-spacing: .2em;
  color: var(--ph2);
  display: flex; gap: 8px; align-items: baseline;
}
.panel > h2 i { color: var(--amber); font-style: normal; }
.panel > .body { flex: 1 1 auto; min-height: 0; padding: 14px 10px 8px; overflow: hidden; }

/* registration marks */
.rm { position: absolute; width: 7px; height: 7px; border: 0 solid var(--ph2); opacity: .8; }
.rm.tl { top: 2px; left: 2px; border-top-width: 1px; border-left-width: 1px; }
.rm.tr { top: 2px; right: 2px; border-top-width: 1px; border-right-width: 1px; }
.rm.bl { bottom: 2px; left: 2px; border-bottom-width: 1px; border-left-width: 1px; }
.rm.br { bottom: 2px; right: 2px; border-bottom-width: 1px; border-right-width: 1px; }

/* ---------- 01 menu ---------- */

.p-menu > .body { display: flex; flex-direction: column; gap: 4px; }
.menuhead, .menu li {
  display: grid;
  grid-template-columns: 12px 1fr 52px 52px 60px;
  gap: 6px; align-items: center;
  font-size: 11px; letter-spacing: .06em;
}
.menuhead { color: var(--ph1); border-bottom: 1px solid var(--ph1); padding-bottom: 3px; }
.menu { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.menu:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }
.menu li { padding: 3px 2px; cursor: pointer; }
.menu li .c { color: var(--amber); }
.menu li .s { color: var(--ph2); overflow: hidden; text-overflow: ellipsis; }
.menu li .h { text-align: right; }
.menu li .m { text-align: right; color: var(--ph1); }
.menu li .v { text-align: right; color: var(--ph1); }
.menu li.sel { background: rgba(31, 154, 92, .14); }
.menu li.sel .s { color: var(--ph3); }
.menu li.busy { background: rgba(232, 198, 90, .16); }
.menu li.busy .s, .menu li.busy .c { color: var(--amber); }
.menu li.done .m { color: var(--ph2); }
.menu li .v[data-d="buy"] { color: var(--amber); }
.menu li .v[data-d="sell"] { color: var(--red); }
.menu li .v[data-d="hold"] { color: var(--ph2); }
.up { color: var(--ph3); }
.dn { color: var(--red); }
.flat { color: var(--ph1); }
.menucap {
  margin: 0; padding-top: 4px; border-top: 1px solid var(--ph1);
  font-size: 10px; letter-spacing: .05em; color: var(--ph1);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---------- 02 specimen ---------- */

.p-spec > .body { padding: 0; position: relative; }
.specbody { overflow: hidden; }
#brain { display: block; width: 100%; height: 100%; }
.fig, .scale, .axis, .corner {
  position: absolute; font-size: 10px; letter-spacing: .12em; color: var(--ph1);
  pointer-events: none;
}
.fig-a { left: 10px; bottom: 128px; }
.fig-b { left: 178px; bottom: 128px; }
.scale { right: 10px; bottom: 8px; }
.corner { left: 10px; top: 8px; line-height: 1.7; }
.figbox { position: absolute; border: 1px solid var(--ph1); pointer-events: none; }
.axis { right: 10px; top: 8px; }
.nogl {
  position: absolute; inset: auto 12px 12px 12px; margin: 0;
  font-size: 11px; letter-spacing: .1em; color: var(--amber);
}
.mk { position: absolute; top: 0; left: 0; pointer-events: none; will-change: transform; }
.mk[data-hide="1"] { display: none; }
.mk .dot {
  position: absolute; left: -3px; top: -3px; width: 7px; height: 7px;
  border: 1px solid var(--amber);
}
.mk .lab {
  position: absolute; left: 10px; top: -8px; display: flex; gap: 6px;
  font-size: 10px; letter-spacing: .12em; white-space: nowrap;
}
.mk .lab i { font-style: normal; color: var(--amber); }
.mk .lab b { font-weight: 500; color: var(--ph3); }

/* ---------- 03 taste ---------- */

.p-taste > .body { overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.p-taste h3 {
  margin: 4px 0 0; font-size: 10px; font-weight: 500; letter-spacing: .2em;
  color: var(--ph1); border-bottom: 1px solid var(--ph1); padding-bottom: 2px;
}
.tok { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.tok b { font-size: 20px; font-weight: 600; letter-spacing: .1em; color: var(--ph3); }
.tok span { font-size: 10px; letter-spacing: .06em; color: var(--ph1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 12px; }
.row { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .05em; }
.row i { font-style: normal; color: var(--ph1); }
.row b { font-weight: 500; color: var(--ph2); }
.bars { display: flex; flex-direction: column; gap: 3px; }
.bar { display: grid; grid-template-columns: 46px 1fr 34px; gap: 7px; align-items: center; font-size: 10px; letter-spacing: .08em; }
.bar i { font-style: normal; color: var(--ph1); }
.bar em { font-style: normal; text-align: right; color: var(--ph2); }
.tr { position: relative; display: block; height: 7px; border: 1px solid var(--ph1); }
.tr b { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ph2); display: block; transition: width .18s linear; }
.big { margin: 2px 0 0; display: flex; align-items: baseline; gap: 8px; }
.big b { font-size: 52px; line-height: .95; font-weight: 500; color: var(--ph3); letter-spacing: .02em; }
.big span { font-size: 11px; letter-spacing: .2em; color: var(--ph1); }
.thr { display: flex; flex-direction: column; gap: 3px; }
.thr .tr { height: 9px; }
.thr .tr b { background: var(--ph3); }
.thr .tr u { position: absolute; top: -2px; bottom: -2px; left: 20%; width: 1px; background: var(--amber); }
.thr em { font-style: normal; font-size: 10px; letter-spacing: .1em; color: var(--ph1); }
.verd { margin: 0; display: flex; justify-content: space-between; gap: 8px; font-size: 11px; letter-spacing: .08em; }
.verd i { font-style: normal; color: var(--ph1); }
.verd b { font-weight: 500; text-align: right; color: var(--ph2); }
.verd b[data-d="buy"] { color: var(--amber); }
.verd b[data-d="sell"] { color: var(--red); }
.dig { margin: 0; font-size: 10px; color: var(--ph1); display: flex; gap: 8px; }
.dig i { font-style: normal; }
.dig b { font-weight: 400; word-break: break-all; }

/* ---------- 04 log ---------- */

.p-log > .body { display: flex; flex-direction: column; padding: 12px 10px 4px; }
.log {
  list-style: none; margin: 0; padding: 0;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  font-size: 11px; letter-spacing: .04em;
}
.log li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ph2); }
.log li .t { color: var(--ph1); margin-right: 10px; }
.log li .k { color: var(--ph1); margin-right: 10px; }
.log li.hi { color: var(--ph3); }
.log li.buy .k, .log li.buy { color: var(--amber); }
.log li.err, .log li.sell { color: var(--red); }
.cursorline { margin: 0; height: 14px; }
.caret {
  display: inline-block; width: 7px; height: 11px; background: var(--ph3);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- footer keys ---------- */

.keys {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--ph1); padding: 4px 8px;
  overflow: hidden; white-space: nowrap;
}
.keys .pad { flex: 1 1 auto; }
.key {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid transparent; color: var(--ph2);
  font: inherit; font-size: 11px; letter-spacing: .1em;
  padding: 3px 8px; cursor: pointer; min-height: 26px;
  text-shadow: inherit;
}
.key i { font-style: normal; color: var(--ph0); background: var(--ph2); padding: 0 4px; text-shadow: none; }
.key:hover { border-color: var(--ph1); color: var(--ph3); }
.key[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); }
.key[aria-pressed="true"] i { background: var(--amber); }
.keys .link b { color: var(--red); }
.keys .link[data-on="1"] b { color: var(--ph2); }

/* ---------- pages ---------- */

.page {
  position: absolute; z-index: 5;
  inset: calc(var(--gap) + 28px) var(--gap) calc(var(--gap) + 36px) var(--gap);
  background: var(--ph0); border: 1px solid var(--ph1);
  display: flex; flex-direction: column;
}
.pagehead {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--ph1); padding: 6px 10px;
}
.pagehead h2 { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .22em; color: var(--ph3); }
.pagebody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 18px 24px; }
.pagebody h3 {
  margin: 18px 0 6px; font-size: 11px; font-weight: 500; letter-spacing: .2em; color: var(--amber);
}
.pagebody h3:first-child { margin-top: 0; }
.pagebody p { margin: 0 0 9px; max-width: 74ch; font-size: 13px; color: var(--ph2); }
.pagebody pre {
  margin: 0 0 12px; padding: 9px 12px; border: 1px solid var(--ph1);
  font-size: 11px; color: var(--ph3); overflow-x: auto; line-height: 1.6;
}
.pagebody ul { margin: 0 0 12px; padding-left: 16px; font-size: 12px; }
.pagebody li { margin-bottom: 3px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 11px; letter-spacing: .04em; }
.tbl th {
  text-align: left; font-weight: 500; color: var(--ph1); letter-spacing: .12em;
  border-bottom: 1px solid var(--ph1); padding: 3px 8px 3px 0; white-space: nowrap;
}
.tbl td { padding: 3px 8px 3px 0; border-bottom: 1px solid rgba(10, 58, 36, .5); white-space: nowrap; }
.tbl td.wide { white-space: normal; word-break: break-all; }
.tbl tbody tr:hover td { background: rgba(31, 154, 92, .07); }
.wrap { overflow-x: auto; margin-bottom: 12px; }
.note { font-size: 11px; color: var(--ph1); }

/* ---------- overlays ---------- */

.fx { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.scan {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, .30) 0px, rgba(0, 0, 0, .30) 1px,
    rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 2px);
  mix-blend-mode: multiply;
}
.vig {
  background:
    radial-gradient(120% 105% at 50% 50%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .78) 100%);
}

/* ---------- mobile ---------- */

@media (max-width: 860px) {
  html, body { overflow: auto; font-size: 12px; }
  .crt { height: auto; min-height: 100%; }
  .strip { flex-wrap: wrap; gap: 6px 14px; white-space: normal; }
  .strip .run { margin-left: 0; }
  .grid {
    display: flex; flex-direction: column; gap: var(--gap);
  }
  .panel { min-height: 0; }
  .p-spec { height: 60vh; min-height: 340px; order: 1; }
  .p-taste { order: 2; }
  .p-menu { order: 3; }
  .p-log { order: 4; }
  .p-menu > .body { max-height: 300px; }
  .p-taste > .body { overflow: visible; }
  .p-log { height: 190px; }
  .keys {
    position: sticky; bottom: 0; z-index: 6;
    background: var(--ph0);
    flex-wrap: wrap; gap: 4px;
  }
  .keys .pad { display: none; }
  .keys .f { display: none; }
  .key { flex: 1 1 0; min-width: 0; justify-content: center; min-height: 42px;
         font-size: 10px; letter-spacing: .04em; gap: 4px; padding: 0 4px; }
  .page { position: fixed; inset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
  .tr b { transition: none; }
}