/* Trigger Sim tab (triggerSim.js). Everything is scoped under #TriggerSim. */
#TriggerSim {
    --ts-text: var(--text, #e6e6e6);
    --ts-muted: var(--muted, #a8a29e);
    --ts-accent: var(--accent, rgb(214, 236, 86));
    --ts-panel: var(--surface-2, #2a2424);
    --ts-border: var(--border, #5a5050);
    --ts-true-bg: #163d22;
    --ts-true-bd: #3fb950;
    --ts-true-tx: #b7f5c4;
    --ts-false-bg: #4a1c1c;
    --ts-false-bd: #f85149;
    --ts-false-tx: #ffc9c4;
    --ts-unused-bg: var(--surface-3, #333);
    --ts-unused-bd: #666;
    --ts-pend: #d29922;
    --ts-track: #388bfd;
    font-size: 12px;
}

#TriggerSim * { color: var(--ts-text); font-family: var(--font-mono, monospace); }
#TriggerSim h4 { color: var(--ts-accent); margin: 10px 0 4px; border-bottom: 1px solid var(--ts-border); }
#TriggerSim .ts-muted, #TriggerSim .ts-muted * { color: var(--ts-muted); }

/* Toolbar */
#TriggerSim .ts-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--ts-border); }
#TriggerSim .ts-toolbar .ts-sep { width: 1px; height: 18px; background: var(--ts-border); margin: 0 4px; }
#TriggerSim .ts-toolbar select, #TriggerSim .ts-toolbar input[type=number] { background: var(--surface-2, #555); color: var(--ts-text); border: 1px solid var(--ts-border); height: 22px; }
#TriggerSim .ts-file { display: inline-flex; }
#TriggerSim .ts-file input { display: none; }
#TriggerSim #tsTick { color: var(--ts-accent); font-weight: bold; font-size: 14px; margin-left: auto; }
#TriggerSim #tsLoadWarnings div { color: var(--ts-pend); }

/* Trigger strip */
#TriggerSim .ts-strip { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 0; }
#TriggerSim .ts-chip { background: var(--ts-panel); border: 1px solid var(--ts-border); border-left-width: 4px; border-radius: 4px; padding: 2px 6px; cursor: pointer; float: none; margin: 0; }
#TriggerSim .ts-chip.ts-sel { outline: 2px solid var(--ts-accent); }
#TriggerSim .ts-chip.ts-off { opacity: 0.5; }
#TriggerSim .ts-chip.ts-st1 { border-left-color: var(--ts-pend); }
#TriggerSim .ts-chip.ts-st2 { border-left-color: var(--ts-track); }
#TriggerSim .ts-chip.ts-st3 { border-left-color: var(--ts-pend); }
#TriggerSim .ts-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ts-unused-bd); margin-right: 4px; }
#TriggerSim .ts-dot.ts-true { background: var(--ts-true-bd); }
#TriggerSim .ts-dot.ts-false { background: var(--ts-false-bd); }

/* Three columns */
#TriggerSim .ts-main { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(320px, 1.3fr) minmax(260px, 1fr); gap: 10px; align-items: start; }
@media (max-width: 1000px) { #TriggerSim .ts-main { grid-template-columns: 1fr; } }
#TriggerSim .ts-col { background: var(--ts-panel); border: 1px solid var(--ts-border); border-radius: 6px; padding: 6px 8px; min-width: 0; }
#TriggerSim .ts-col > h3 { color: var(--ts-accent); margin: 0 0 4px; }

/* Inputs */
#TriggerSim .ts-input { padding: 4px 0; border-bottom: 1px dashed var(--border, #4a4040); }
#TriggerSim .ts-input-ctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0; }
#TriggerSim .ts-num { width: 11ch; background: var(--bg, #1e1a1a); border: 1px solid var(--ts-border); padding: 1px 4px; }
#TriggerSim .ts-toggle { min-width: 9ch; background: var(--surface-3, #444); border: 1px solid var(--ts-border); border-radius: 10px; cursor: pointer; }
#TriggerSim .ts-toggle.ts-on { background: var(--accent-soft, #5c6b1a); border-color: var(--ts-accent); }
#TriggerSim .ts-mini { padding: 0 4px; height: 18px; }
#TriggerSim .ts-ref { color: var(--ts-accent); }
#TriggerSim .ts-name { color: var(--ts-text); }
#TriggerSim .ts-val, #TriggerSim .ts-lit { font-weight: bold; }
#TriggerSim .ts-scaled { color: var(--ts-muted); }
#TriggerSim .ts-driven { color: var(--ts-track); }

/* Logic */
#TriggerSim .ts-head { margin-bottom: 6px; }
#TriggerSim .ts-warn { color: var(--ts-pend); margin: 2px 0; }
#TriggerSim .ts-cond, #TriggerSim .ts-action { border: 1px solid; border-left-width: 6px; border-radius: 6px; padding: 5px 8px; margin: 2px 0; transition: background-color 0.2s; }
#TriggerSim .ts-cond.ts-true { background: var(--ts-true-bg); border-color: var(--ts-true-bd); }
#TriggerSim .ts-cond.ts-true .ts-badge { color: var(--ts-true-tx); }
#TriggerSim .ts-cond.ts-false { background: var(--ts-false-bg); border-color: var(--ts-false-bd); }
#TriggerSim .ts-cond.ts-false .ts-badge { color: var(--ts-false-tx); }
#TriggerSim .ts-cond.ts-unused { background: var(--ts-unused-bg); border-color: var(--ts-unused-bd); opacity: 0.8; }
#TriggerSim .ts-cond-head { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 2px; }
#TriggerSim .ts-cond-op { font-size: 14px; font-weight: bold; padding: 1px 0 1px 12px; color: var(--ts-accent); }
#TriggerSim .ts-note { margin-top: 3px; color: var(--ts-pend); }
#TriggerSim .ts-link { text-align: center; font-size: 11px; font-weight: bold; padding: 1px 0; }
#TriggerSim .ts-link.ts-true { color: var(--ts-true-bd); }
#TriggerSim .ts-link.ts-false { color: var(--ts-false-bd); }
#TriggerSim .ts-link.ts-unused { color: var(--ts-muted); }
#TriggerSim .ts-result { margin-top: 6px; padding: 6px; border-radius: 6px; text-align: center; font-weight: bold; font-size: 14px; border: 1px solid; }
#TriggerSim .ts-result.ts-true { background: var(--ts-true-bg); border-color: var(--ts-true-bd); color: var(--ts-true-tx); }
#TriggerSim .ts-result.ts-false { background: var(--ts-false-bg); border-color: var(--ts-false-bd); color: var(--ts-false-tx); }

/* State machine */
#TriggerSim .ts-sm { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 4px 0; }
#TriggerSim .ts-stbox { border: 1px solid var(--ts-border); border-radius: 4px; padding: 3px 5px; font-size: 11px; color: var(--ts-muted); }
#TriggerSim .ts-stbox.ts-cur { color: #111; font-weight: bold; }
#TriggerSim .ts-stbox.ts-cur.ts-st0 { background: #9e9e9e; }
#TriggerSim .ts-stbox.ts-cur.ts-st1, #TriggerSim .ts-stbox.ts-cur.ts-st3 { background: var(--ts-pend); }
#TriggerSim .ts-stbox.ts-cur.ts-st2 { background: var(--ts-track); }
#TriggerSim .ts-arrow { color: var(--ts-muted); }
#TriggerSim .ts-bar { height: 6px; background: #444; border-radius: 3px; margin: 3px 0 5px; overflow: hidden; }
#TriggerSim .ts-bar div { height: 100%; background: var(--ts-pend); }

/* Outputs */
#TriggerSim .ts-action { border-color: var(--ts-border); background: var(--surface, #302929); margin-bottom: 8px; }
#TriggerSim .ts-action.ts-fired { border-color: var(--ts-accent); background: var(--accent-soft, #3d4417); }
#TriggerSim .ts-writes { margin: 3px 0; padding-left: 16px; }
#TriggerSim .ts-op { color: var(--ts-accent); font-weight: bold; }
#TriggerSim .ts-evt { color: var(--ts-accent); font-weight: bold; }

/* Log */
#TriggerSim .ts-logbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
#TriggerSim #tsLog { max-height: 260px; overflow-y: auto; border: 1px solid var(--ts-border); margin-top: 4px; }
#TriggerSim #tsLog table { border-collapse: collapse; width: 100%; }
#TriggerSim #tsLog th { position: sticky; top: 0; background: var(--surface-2, #3a3232); color: var(--ts-accent); text-align: left; }
#TriggerSim #tsLog td, #TriggerSim #tsLog th { padding: 1px 6px; border-bottom: 1px solid var(--border, #3a3232); vertical-align: top; }
#TriggerSim tr.ts-log-fault td { color: var(--ts-false-bd); }
#TriggerSim tr.ts-log-state td:nth-child(4) { color: var(--ts-track); }

/* Collapsible counters list */
#TriggerSim .ts-counters { margin-top: 10px; }
#TriggerSim .ts-counters summary { cursor: pointer; list-style: none; }
#TriggerSim .ts-counters summary::-webkit-details-marker { display: none; }
#TriggerSim .ts-counters summary h4 { display: flex; gap: 6px; }
#TriggerSim .ts-counters summary h4::before { content: '▸'; }
#TriggerSim .ts-counters[open] summary h4::before { content: '▾'; }