/* IO Sim tab (ioSim.js). Everything is scoped under #IoSim. */
#IoSim {
    --ios-text: var(--text, #e6e6e6);
    --ios-muted: var(--muted, #a8a29e);
    --ios-accent: var(--accent, rgb(214, 236, 86));
    --ios-panel: var(--surface, #2a2424);
    --ios-card: var(--surface-2, #332c2c);
    --ios-border: var(--border, #5a5050);
    --ios-on: #3fb950;
    --ios-on-bg: #163d22;
    --ios-off: #6e6767;
    --ios-warn: #d29922;
    --ios-bad: #f85149;
    --ios-follow: #58a6ff;
    --ios-na-bg: #2b2740;
    --ios-na-bd: #6d5fa8;
    font-size: 12px;
}

/* style.css gives every element the app background; reset it so cards and the SVG overlay stay see-through */
#IoSim * { color: var(--ios-text); font-family: var(--font-mono, monospace); box-sizing: border-box; background-color: transparent; }
#IoSim { background-color: transparent; }
#IoSim h3 { color: var(--ios-accent); margin: 0 0 6px; }
#IoSim h4 { color: var(--ios-accent); margin: 10px 0 4px; border-bottom: 1px solid var(--ios-border); }
#IoSim .ios-muted, #IoSim .ios-muted * { color: var(--ios-muted); }
#IoSim .ios-warn, #IoSim .ios-warn * { color: var(--ios-warn); }
#IoSim .ios-okt { color: var(--ios-on); }
#IoSim .ios-evt { color: var(--ios-accent); font-weight: bold; }
#IoSim .ios-inv { color: var(--ios-warn); }
#IoSim .ios-follow { color: var(--ios-follow); }
#IoSim .ios-hidden { display: none !important; }

/* Toolbar */
#IoSim .ios-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--ios-border); }
#IoSim .ios-sep { display: inline-block; width: 1px; height: 18px; background: var(--ios-border); margin: 0 4px; vertical-align: middle; }
#IoSim select, #IoSim input[type=number], #IoSim input[type=text] { background: var(--bg, #1e1a1a); color: var(--ios-text); border: 1px solid var(--ios-border); height: 22px; }
#IoSim input[type=number] { width: 8ch; }
#IoSim .ios-seg { display: inline-flex; border: 1px solid var(--ios-border); border-radius: 12px; overflow: hidden; }
#IoSim .ios-seg button { background: var(--surface-3, #444); border: 0; padding: 3px 10px; cursor: pointer; }
#IoSim .ios-seg button.ios-on { background: var(--accent, #5c6b1a); color: var(--on-accent, #fff); font-weight: bold; }
#IoSim .ios-file input { display: none; }
#IoSim #iosT { color: var(--ios-accent); font-weight: bold; font-size: 14px; margin-left: auto; }
#IoSim .ios-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 6px 0; color: var(--ios-muted); }
#IoSim .ios-legend span { display: inline-flex; align-items: center; gap: 4px; }
#IoSim .ios-legend i { display: inline-block; width: 22px; height: 0; border-top: 3px solid; }

/* Diagram */
#IoSim .ios-diagram { position: relative; display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); column-gap: 64px; margin-top: 6px; padding: 6px; background: var(--ios-panel); border: 1px solid var(--ios-border); border-radius: 6px; }
@media (max-width: 1000px) { #IoSim .ios-diagram { grid-template-columns: repeat(2, minmax(150px, 1fr)); column-gap: 40px; row-gap: 16px; } }
#IoSim .ios-col { position: relative; z-index: 1; min-width: 0; }
#IoSim .ios-col > h3 { font-size: 13px; }
#IoSim .ios-col > .ios-sub { color: var(--ios-muted); margin: -4px 0 6px; }
#IoSim #iosSvg { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; }

#IoSim .ios-card { background: var(--ios-card); border: 1px solid var(--ios-border); border-left-width: 4px; border-radius: 6px; padding: 4px 6px; margin-bottom: 8px; transition: background-color 0.15s; }
#IoSim .ios-card.ios-active { border-left-color: var(--ios-on); background: #2d3a2d; }
#IoSim .ios-card.ios-sel { outline: 2px solid var(--ios-accent); }
#IoSim .ios-card.ios-sig { border-style: dashed; border-left-style: solid; }
#IoSim .ios-card.ios-na { background: repeating-linear-gradient(135deg, var(--ios-na-bg), var(--ios-na-bg) 6px, #25223a 6px, #25223a 12px); border-color: var(--ios-na-bd); }
#IoSim .ios-card.ios-nodrive { background: repeating-linear-gradient(135deg, #3a2f1f, #3a2f1f 6px, #31281b 6px, #31281b 12px); border-color: var(--ios-warn); }
#IoSim .ios-hwnote { color: #c9bdf5; font-weight: bold; }
#IoSim .ios-nodrive .ios-hwnote { color: var(--ios-warn); }
#IoSim .ios-card-head { display: flex; justify-content: space-between; align-items: center; font-weight: bold; margin-bottom: 2px; }
#IoSim .ios-map { margin: 2px 0; }
#IoSim .ios-writes { margin-top: 2px; font-size: 11px; color: var(--ios-muted); }
#IoSim .ios-writes b { color: var(--ios-text); }
#IoSim .ios-row { display: flex; gap: 4px; flex-wrap: wrap; }

#IoSim .ios-lamp { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--bg, #1b1717); border: 1px solid var(--ios-off); }
#IoSim .ios-lamp.ios-on { background: var(--ios-on); border-color: #9ff0ae; box-shadow: 0 0 6px var(--ios-on); }
#IoSim .ios-lamp.ios-big { width: 18px; height: 18px; }
#IoSim .ios-lamp.ios-ghost { opacity: 0.4; }

#IoSim .ios-btn { min-width: 12ch; background: var(--surface-3, #444); border: 1px solid var(--ios-border); border-radius: 10px; cursor: pointer; padding: 2px 8px; margin: 2px 0; user-select: none; }
#IoSim .ios-btn.ios-on { background: var(--accent-soft, #5c6b1a); border-color: var(--ios-accent); }
#IoSim .ios-btn:disabled { cursor: not-allowed; opacity: 0.6; }
#IoSim .ios-btn.ios-sm { min-width: 0; padding: 1px 6px; font-size: 11px; }

/* Style strips */
#IoSim .ios-strip { display: inline-flex; gap: 1px; margin: 2px 0; }
#IoSim .ios-cell { display: inline-block; width: 7px; height: 10px; background: var(--bg, #1b1717); border: 1px solid var(--border, #4a4040); }
#IoSim .ios-cell.ios-c1 { background: var(--accent-strong, #5c6b1a); border-color: var(--ios-accent); }
#IoSim .ios-cell.ios-cur { outline: 2px solid #fff; outline-offset: 0; }
#IoSim .ios-editstrip .ios-cell { width: 12px; height: 14px; cursor: pointer; }
#IoSim .ios-editstrip.ios-ro .ios-cell { cursor: default; }

/* Links */
#IoSim .ios-link { fill: none; stroke-width: 2.5; }
#IoSim .ios-link.ios-l-off { stroke: var(--ios-off); }
#IoSim .ios-link.ios-l-on { stroke: var(--ios-on); stroke-width: 3.5; }
#IoSim .ios-link.ios-k-follow { stroke-dasharray: 7 4; }
#IoSim .ios-link.ios-k-follow.ios-l-off { stroke: #3b5f8f; }
#IoSim .ios-link.ios-k-follow.ios-l-on { stroke: var(--ios-follow); }
#IoSim .ios-link.ios-k-mirror { stroke-dasharray: 2 3; stroke-width: 2; }
#IoSim .ios-link.ios-l-bad { stroke: var(--ios-bad); stroke-dasharray: 5 3; }
#IoSim .ios-link.ios-l-dead { opacity: 0.45; }
#IoSim .ios-invmark circle { fill: #1e1a1a; stroke: var(--ios-warn); stroke-width: 1.5; }
#IoSim .ios-invmark text { fill: var(--ios-warn); font-size: 12px; font-weight: bold; }

/* Sources / vote */
#IoSim .ios-panel { margin-top: 10px; background: var(--ios-panel); border: 1px solid var(--ios-border); border-radius: 6px; padding: 6px 8px; }
#IoSim .ios-srcrow { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
#IoSim .ios-src { display: inline-flex; align-items: center; gap: 4px; }
#IoSim table { border-collapse: collapse; }
#IoSim .ios-vote { margin-top: 6px; }
#IoSim .ios-vote td, #IoSim .ios-vote th, #IoSim .ios-cfg td, #IoSim .ios-cfg th { padding: 2px 6px; border-bottom: 1px solid var(--border, #3a3232); text-align: left; vertical-align: middle; }
#IoSim .ios-vote th, #IoSim .ios-cfg th { color: var(--ios-accent); }
#IoSim .ios-vote tr.ios-dim td { opacity: 0.45; }
#IoSim .ios-vote tr.ios-total td { font-weight: bold; border-top: 1px solid var(--ios-border); }

/* Findings */
#IoSim .ios-f { padding: 2px 0; }
#IoSim .ios-f-warn { color: var(--ios-warn); }
#IoSim .ios-f-info { color: var(--ios-muted); }

/* Config */
#IoSim .ios-cfgcols { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(420px, 1.2fr); gap: 16px; }
@media (max-width: 1100px) { #IoSim .ios-cfgcols { grid-template-columns: 1fr; } }
#IoSim .ios-bits { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0; }
#IoSim .ios-bit { display: inline-flex; align-items: center; gap: 3px; }
#IoSim .ios-raw { width: 6ch !important; }
#IoSim .ios-hex { width: 11ch; }
#IoSim .ios-cfg select { max-width: 260px; }
#IoSim .ios-cfg tr.ios-selrow td { background: var(--accent-soft, #3a3a22); }
#IoSim [disabled] { opacity: 0.7; }

/* Log */
#IoSim .ios-logbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
#IoSim #iosLog { max-height: 240px; overflow-y: auto; border: 1px solid var(--ios-border); margin-top: 4px; }
#IoSim #iosLog table { width: 100%; }
#IoSim #iosLog th { position: sticky; top: 0; background: var(--surface-2, #3a3232); color: var(--ios-accent); text-align: left; }
#IoSim #iosLog td, #IoSim #iosLog th { padding: 1px 6px; border-bottom: 1px solid var(--border, #3a3232); vertical-align: top; }
#IoSim tr.ios-log-ign td:nth-child(3) { color: var(--ios-accent); }
#IoSim tr.ios-log-output td:nth-child(3) { color: var(--ios-follow); }
#IoSim tr.ios-log-trigger td { color: var(--ios-muted); }

/* Live view */
#IoSim .ios-banner { margin: 6px 0 2px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--ios-border); font-size: 13px; }
#IoSim .ios-banner b { font-size: 14px; }
#IoSim .ios-b-sim { background-color: var(--surface-2, #3a3535); color: var(--ios-muted); }
#IoSim .ios-b-sim * { color: var(--ios-muted); }
#IoSim .ios-b-live { background-color: #0f3b40; border-color: #39c5cf; }
#IoSim .ios-b-live b { color: #7ee8ef; }
#IoSim .ios-b-warn { background-color: #3d3110; border-color: var(--ios-warn); }
#IoSim .ios-b-bad { background-color: #4a1c1c; border-color: var(--ios-bad); }
#IoSim .ios-b-bad b { color: #ffb3ad; }
#IoSim .ios-b-warnpart, #IoSim .ios-b-warnpart * { color: var(--ios-warn); }
#IoSim.ios-live .ios-diagram { border: 2px solid #39c5cf; box-shadow: 0 0 0 1px #0f3b40, 0 0 14px rgba(57, 197, 207, 0.35); }
#IoSim.ios-live .ios-diagram::before { content: 'LIVE'; position: absolute; right: 8px; top: -11px; z-index: 3; padding: 0 8px; background-color: #39c5cf; color: #0b1f22; font-weight: bold; border-radius: 4px; letter-spacing: 1px; }
#IoSim.ios-live .ios-card.ios-active { border-left-color: #39c5cf; }
#IoSim.ios-live .ios-link.ios-l-on { stroke: #39c5cf; }
#IoSim .ios-liveval { margin: 3px 0; }
#IoSim .ios-nalive { display: inline-block; padding: 0 4px; border: 1px dashed #777; border-radius: 3px; color: #9a9a9a; font-style: italic; font-size: 11px; }
#IoSim .ios-seg button:disabled { opacity: 0.4; cursor: not-allowed; }