/* /scripts — every scripted bot's run, plotted (2026-09-26). Tokens come from app.css.
   app.css locks body to the screen for the main page's game window; this page is an ordinary scrolling page. */
html.sx-root, body.sx-page { height: auto; }
body.sx-page { overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100dvh; background-attachment: fixed; }
.sx-page .mark-sub { font-weight: 600; font-size: 14px; color: var(--mint); margin-left: 2px; }
.sx-nav { display: flex; gap: 8px; }
.sx-nav a { color: var(--bone); text-decoration: none; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 10px; font-size: 13px; }
.sx-nav a:hover, .sx-nav a:focus-visible { background: var(--panel); }

.sx { max-width: 1080px; margin: 0 auto; padding: 4px var(--gut) 48px; }
.sx-title { margin: 10px 0 4px; font-size: 28px; line-height: 1.15; --casl: 1; font-weight: 900; letter-spacing: -0.02em; }
.sx-note { margin: 0 0 18px; color: var(--text-2); font-size: 14px; line-height: 1.5; max-width: 760px; }
.sx-note b { color: var(--bone); font-weight: 700; }

.sx-card { position: relative; margin: 0 0 18px; padding: 14px 12px 12px; background: var(--panel); border-radius: var(--r);
  box-shadow: 0 0 0 2px var(--edge), var(--drop); }
.sx-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.sx-h { margin: 0 0 6px; font-size: 16px; font-weight: 800; letter-spacing: .01em; }
.sx-head .sx-h { margin: 0; }
.sx-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.sx-seg button { font: inherit; font-size: 12.5px; color: var(--text-2); background: transparent; border: 0; padding: 4px 11px; cursor: pointer; }
.sx-seg button[aria-pressed="true"] { background: var(--teal); color: var(--bone); }
.sx-seg button:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; }

.sx-plot { position: relative; margin-top: 8px; }
.sx-plot svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.sx-plot text { font-family: inherit; }
.sx-plot .run { cursor: pointer; }
.sx-plot .run path.ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; transition: opacity .15s, stroke-width .15s; }
.sx-plot .run path.hit { fill: none; stroke: transparent; stroke-width: 14; }
.sx-plot.dim .run { opacity: .22; }
.sx-plot.dim .run.on { opacity: 1; }
.sx-plot .run.on path.ln { stroke-width: 3; }
.sx-plot .dot { cursor: pointer; outline: none; }
.sx-plot .dot:focus-visible rect, .sx-plot .dot:hover rect { stroke-width: 3; }

.sx-tip { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity .12s, transform .12s; background: var(--edge); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 7px 10px; font-size: 13px; line-height: 1.4; max-width: 240px; z-index: 3; box-shadow: 3px 3px 0 0 rgba(0,0,0,.45); }
.sx-tip.show { opacity: 1; transform: none; }
.sx-tip b { font-weight: 800; --mono: 1; }
.sx-tip .t { color: var(--text-3); font-size: 12px; }
.sx-tip .up { color: var(--mint); }
.sx-tip .down { color: var(--tomato); }

.sx-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sx-legend a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--bone); font-size: 12.5px;
  --mono: 1; font-weight: 700; letter-spacing: .03em; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px 3px 7px;
  background: var(--panel-2); }
.sx-legend a:hover, .sx-legend a:focus-visible, .sx-legend a.on { border-color: var(--bone); }
.sx-legend a.void { color: var(--text-3); text-decoration: line-through; }
.sx-legend i, .sx-pill i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sx-legend .v { font-weight: 500; color: var(--text-2); letter-spacing: 0; }

/* bot-type colours: one per TYPE (the first three letters of the call-sign) */
.ty-BLD { background: #FF6F91; } .ty-LIQ { background: #4FB3F0; } .ty-CPY { background: #B893FF; }
.ty-GLD { background: #F5BD4F; } .ty-SNP { background: #FF9F43; } .ty-OTH { background: #BDB6A4; } .ty-VOID { background: #56685F; }

.sx-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; color: var(--text-3); font-size: 12.5px; }
.sx-key span { display: inline-flex; align-items: center; gap: 6px; }
.sx-sw { width: 11px; height: 11px; border-radius: 2px; border: 2px solid var(--bone); }
.sx-sw-fin { background: var(--bone); }
.sx-sw-open { background: transparent; }

.sx-all { margin: 0 0 18px; background: var(--panel); border-radius: var(--r); box-shadow: 0 0 0 2px var(--edge), var(--drop); }
.sx-all summary { cursor: pointer; padding: 12px 14px; font-weight: 800; font-size: 15px; list-style-position: inside; }
.sx-all summary:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; border-radius: var(--r); }
.sx-tw { overflow-x: auto; margin: 0 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.sx-t { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 900px; }
.sx-t th { text-align: left; font-weight: 700; color: var(--text-3); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sx-t td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.4; }
.sx-t .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sx-t .grp td { color: var(--mint); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding-top: 14px; }
.sx-t .rule { color: var(--text-2); min-width: 240px; }
.sx-t .st { white-space: nowrap; color: var(--text-2); }
.sx-t .st b { color: var(--bone); font-weight: 700; }
.sx-t .st.void b { color: var(--tomato); }
.sx-t .up { color: var(--mint); } .sx-t .down { color: var(--tomato); }
.sx-t a.go { color: var(--mint); white-space: nowrap; }
.sx-pill { display: inline-flex; align-items: center; gap: 6px; --mono: 1; font-weight: 800; letter-spacing: .03em; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px 2px 6px; background: var(--panel-2); color: var(--bone); text-decoration: none; }
.sx-fine { margin: 8px 14px 14px; color: var(--text-3); font-size: 12.5px; }
.sx-meta { color: var(--text-3); font-size: 12.5px; }