/* 研究终端 · 订单流 (js/views/orderflow.js, of/board.js, of/tpo.js): controls of the redrawn apps, the 入场模型 chart with its strip panes,
   the lab legend overlay, the drawn 订单流板 / TPO 板 and the folded extras. */
/* The global `input, select { width: 100%; min-height: 36px }` would stretch every control of the chart heads. */
.of-app select.sm, .of-app input[type=date] { width: auto; max-width: 100%; min-height: 0; height: 28px; padding: 0 8px; font-size: 12.5px; border-radius: 8px; }
.of-app .btn.sm { height: 28px; }
.of-chart.of-entry { height: 720px; }
.of-cap { margin-top: 6px; line-height: 1.6; }
.of-grp { display: inline-flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; padding: 1px 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 12.5px; }
.of-grp > .of-chk { gap: 3px; }
.of-ctl .of-chk b { font-family: var(--mono); }
.of-opt { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 720px) {
  .of-chart.of-entry { height: 620px; }
}
#term-main .x-embed:has(> .of-app) { border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none; }  /* the app is the card: no frame around it */
#term-main .x-wv2-badge { display: inline-block; width: fit-content; align-self: flex-start; justify-self: start; margin-top: 4px; padding: 1px 8px; font-size: 11.5px; }  /* the site's tag under the 墙位v2 title, not a full-width bar */

/* head: the fixed symbol (no one-option selects), page links, toggles */
.of-sym { font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; white-space: nowrap; }
.of-links { display: inline-flex; gap: 14px; font-size: 12.5px; white-space: nowrap; }
.of-links a { color: var(--accent); text-decoration: none; }
.of-links a:hover { text-decoration: underline; }
.of-app .btn.sm.of-tog.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.of-tog b { font-family: var(--mono); }
.of-when { text-align: right; }
.of-head .spacer, .of-tbar .spacer { flex: 1; }
.of-opts { margin: -2px 0 6px; }
.of-step { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12.5px; }
.of-arrows { display: inline-flex; }
.of-arrows button { width: 24px; height: 24px; padding: 0; border: 1px solid var(--border); background: var(--panel); color: var(--muted); font-size: 9px; line-height: 1; cursor: pointer; }
.of-arrows button:first-child { border-radius: 6px 0 0 6px; }
.of-arrows button:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.of-arrows button:hover { color: var(--text); background: var(--hover); }

/* readouts: above a drawn board (space kept so the board does not jump while the pointer moves), under a lab chart */
.of-read { min-height: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; font-family: var(--mono); margin-top: 6px; }
.of-legend.of-read { margin: 0 0 2px; min-height: 40px; align-content: flex-start; }
.of-trap { display: inline-flex; flex-wrap: wrap; gap: 2px 10px; }
.of-trap b { font-weight: 600; }
.of-ok, .of-no { font-style: normal; }
.of-ok { color: var(--accent); }
.of-no { color: var(--faint); }

/* lab charts: the chart, the pane captions and the legend overlay share one box */
.of-chart.of-lab .of-lwc { position: absolute; inset: 0; }
.of-ptitles { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.of-ptitle { position: absolute; left: 8px; max-width: calc(100% - 96px); padding: 0 5px; border-radius: 4px; font-size: 11.5px; line-height: 18px; color: var(--muted);
  background: color-mix(in srgb, var(--panel) 82%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-lgd { position: absolute; left: 8px; top: 6px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: calc(100% - 132px); pointer-events: none; font-size: 12px; }
.of-lgd > * { pointer-events: auto; }
.of-lgd-tg { padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: color-mix(in srgb, var(--panel) 90%, transparent); color: var(--muted); font-size: 11.5px; line-height: 20px; cursor: pointer; }
.of-lgd-tg:hover { color: var(--text); }
.of-lgd-rows { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 100%; }
.of-lgd-rows[hidden] { display: none; }
.of-lgr { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 0 8px 0 2px; border-radius: 6px; line-height: 22px; white-space: nowrap;
  background: color-mix(in srgb, var(--panel) 84%, transparent); }
.of-lgr.off > :not(.of-eye) { opacity: .45; }
.of-eye { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; }
.of-eye:hover { color: var(--text); background: var(--hover); }
.of-lgr i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.of-lgn { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.of-lgr em { min-width: 0; font-style: normal; font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
.of-lgr .val { font-family: var(--mono); font-weight: 600; color: var(--text); }
.of-lgr .val:empty { display: none; }
.of-lgscale { display: flex; align-items: center; gap: 8px; padding: 2px 8px 4px 26px; border-radius: 6px; background: color-mix(in srgb, var(--panel) 84%, transparent); }
.of-lgslider { position: relative; width: 150px; height: 18px; cursor: pointer; touch-action: none; }
.of-lgtrack { position: absolute; left: 0; right: 0; top: 6px; height: 6px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--border); }
.of-knob { position: absolute; top: 2px; width: 10px; height: 14px; margin-left: -5px; border-radius: 4px; background: var(--panel); border: 1px solid var(--muted); box-shadow: var(--shadow-sm); }
.of-lgval { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.of-notetext { white-space: pre-line; line-height: 1.65; color: var(--muted); margin-top: 4px; }
.of-notep { line-height: 1.65; color: var(--muted); margin-top: 4px; }
.of-notep p { margin: 0 0 4px; }

/* the drawn boards (订单流板, TPO 板): a base canvas and a hover layer over it */
.of-board { position: relative; width: 100%; }
.of-board canvas { position: absolute; left: 0; top: 0; display: block; }
.of-board canvas[hidden], .of-wait[hidden] { display: none; }
.of-board .of-over { pointer-events: none; }
.of-wait { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--faint); }
.of-tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; }
.of-tool { min-height: 26px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: none; color: var(--faint); font-size: 12px; cursor: pointer; }
.of-tool:hover { color: var(--text); }
.of-tool.on { color: var(--text); border-color: var(--border-strong); background: var(--panel-2); }
.of-clock { font-family: var(--mono); }

/* our extras under the chart: one quiet fold each */
.of-app details.of-fold { margin-top: 12px; padding: 8px 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; }
.of-fold > summary { flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; font-weight: 400; user-select: none; }
.of-fold > summary b { font-weight: 600; }
.of-fold > :not(summary) { margin-top: 8px; }
.of-fold .of-sub { margin-top: 8px; }

@media (max-width: 560px) {
  .of-legend.of-read { height: 84px; overflow: hidden; }  /* fixed: a finger on the board must not move it */
  .of-lgd { max-width: calc(100% - 16px); }
  .of-lgscale { padding-left: 8px; }
  .of-lgslider { width: 120px; }
  .of-wcols { grid-template-columns: minmax(0, 1fr); }
}