/* AI Mode sidecar: tab bar, pill, why-strip, Progress tab, modal. Uses the app's theme variables. */
.ctl-bar{max-width:1056px;margin:0 auto;padding:16px 16px 0;font-family:'IBM Plex Sans',system-ui,sans-serif;color:var(--text-primary)}
.ctl-bar-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.ctl-tabs{display:flex;gap:4px;background:var(--panel);border:1px solid rgba(var(--border-rgb),.10);border-radius:10px;padding:4px}
.ctl-tabs [role=tab]{background:transparent;border:1px solid transparent;color:var(--text-muted);font:500 12.5px 'IBM Plex Mono',monospace;letter-spacing:.02em;padding:6px 12px;border-radius:7px;cursor:pointer}
.ctl-tabs [role=tab][aria-selected=true]{background:rgba(var(--accent-rgb),.15);border-color:var(--accent);color:var(--accent)}
.ctl-tabs [role=tab]:hover{color:var(--text-primary)}
.ctl-aiwrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ctl-pill{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid rgba(var(--border-rgb),.18);color:var(--text-muted);font:500 12.5px 'IBM Plex Mono',monospace;padding:7px 12px;border-radius:999px;cursor:pointer}
.ctl-pill .ctl-dot{width:8px;height:8px;border-radius:50%;background:var(--dim)}
.ctl-pill.on{border-color:var(--correct);color:var(--text-primary);background:rgba(var(--correct-rgb),.12)}
.ctl-pill.on .ctl-dot{background:var(--correct);box-shadow:0 0 0 3px rgba(var(--correct-rgb),.25)}
.ctl-pill.locked{cursor:not-allowed;opacity:.85}
.ctl-pill-state{color:var(--accent)}
.ctl-pill.on .ctl-pill-state{color:var(--correct)}
.ctl-unlock{font-size:12px;color:var(--text-muted)}
.ctl-unlock.ctl-flash{color:var(--accent)}
.ctl-why[hidden],.ctl-panel[hidden]{display:none}
.ctl-why{margin-top:10px;background:var(--panel);border:1px solid rgba(var(--border-rgb),.10);border-left:3px solid var(--correct);border-radius:10px;padding:8px 14px;font-size:13px;color:var(--text-muted);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ctl-why-label{color:var(--text-primary);font-weight:600;margin-right:4px}
.ctl-why-share{font-size:12px}
.ctl-why-link{color:var(--accent);text-decoration:none;margin-left:auto}
.ctl-chip{margin-right:2px;font:500 12px 'IBM Plex Mono',monospace;background:rgba(var(--border-rgb),.08);border:1px solid rgba(var(--border-rgb),.14);color:var(--text-primary);border-radius:6px;padding:2px 7px;cursor:help}
.ctl-chip.ctl-lane-recall{border-style:dashed}
.ctl-panel .wrap{max-width:760px;margin:0 auto;padding:16px 16px 48px}
.ctl-prog{padding-top:16px}
.ctl-prog-head h2{margin:2px 0 6px}
.ctl-muted{color:var(--text-muted)}
.ctl-small{font-size:13px;font-weight:400}
.ctl-tiny{font-size:11.5px;color:var(--text-muted);font-family:'IBM Plex Mono',monospace}
.ctl-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.ctl-tile{background:var(--panel);border:1px solid rgba(var(--border-rgb),.10);border-radius:10px;padding:12px 14px}
.ctl-tile-v{font:600 22px 'IBM Plex Mono',monospace;color:var(--text-primary)}
.ctl-tile-l{font-size:11px;letter-spacing:.1em;color:var(--text-muted);text-transform:uppercase;margin-top:2px}
.ctl-bar-track{height:6px;background:rgba(var(--border-rgb),.12);border-radius:3px;margin-top:8px;overflow:hidden}
.ctl-bar-fill{height:100%;background:var(--accent);border-radius:3px}
.ctl-card{background:var(--panel);border:1px solid rgba(var(--border-rgb),.10);border-radius:10px;padding:16px 18px;margin:12px 0}
.ctl-card h3{font-family:'Space Grotesk',sans-serif;font-size:16px;margin:0 0 8px}
.ctl-card h4{font-family:'Space Grotesk',sans-serif;font-size:13.5px;margin:0 0 8px;color:var(--text-muted)}
.ctl-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.ctl-fig{margin:0}
.ctl-fig figcaption{font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px}
.ctl-fig svg{width:100%;height:auto;display:block}
.ctl-grid{stroke:rgba(var(--border-rgb),.12);stroke-width:1}
.ctl-axis{fill:var(--text-muted);font:10px 'IBM Plex Mono',monospace}
.ctl-pt:hover circle:last-of-type{r:5}
.ctl-details summary{cursor:pointer;color:var(--text-muted);font-size:13px;margin-top:8px}
.ctl-lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.ctl-row{display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;align-items:center;padding:5px 0;border-bottom:1px solid rgba(var(--border-rgb),.08)}
.ctl-row .ctl-tiny{grid-column:1/-1}
.ctl-unit{font:500 13px 'IBM Plex Mono',monospace;background:rgba(var(--border-rgb),.08);border-radius:5px;padding:2px 7px;color:var(--text-primary);white-space:nowrap}
.ctl-unit-wide{white-space:normal}
.ctl-barwrap{height:6px;background:rgba(var(--border-rgb),.10);border-radius:3px;overflow:hidden}
.ctl-barfill{display:block;height:100%;background:var(--accent);border-radius:3px}
.ctl-barfill.neg{background:var(--correct)}
.ctl-num{font:600 13px 'IBM Plex Mono',monospace;color:var(--text-primary);min-width:46px;text-align:right}
.ctl-evidence{list-style:none;padding:0;margin:0 0 10px}
.ctl-evidence li{padding:8px 0;border-bottom:1px solid rgba(var(--border-rgb),.08);font-size:13.5px}
.ctl-flag{color:var(--accent)}
.ctl-check{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;margin:8px 0}
.ctl-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.ctl-btn{background:rgba(var(--accent-rgb),.15);border:1px solid var(--accent);color:var(--accent);border-radius:8px;padding:8px 14px;font:500 13px 'IBM Plex Mono',monospace;cursor:pointer;text-decoration:none}
.ctl-btn-quiet{background:transparent;border-color:rgba(var(--border-rgb),.18);color:var(--text-muted)}
.ctl-btn-danger{background:rgba(var(--error-rgb),.12);border-color:var(--error);color:var(--error)}
.ctl-modal{position:fixed;inset:0;background:rgba(var(--overlay-rgb),.75);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.ctl-modal-box{background:var(--panel);border:1px solid rgba(var(--border-rgb),.14);border-radius:12px;padding:20px 22px;max-width:460px;box-shadow:var(--shadow-strong);color:var(--text-primary);font-family:'IBM Plex Sans',system-ui,sans-serif}
.ctl-modal-box h3{margin:0 0 8px;font-family:'Space Grotesk',sans-serif}
.ctl-modal-box p{font-size:14px;color:var(--text-muted);line-height:1.5;margin:0 0 14px}
.ctl-modal-actions{display:flex;gap:10px;flex-wrap:wrap}
.ctl-panel .tablewrap{overflow-x:auto}
.ctl-panel table{border-collapse:collapse;width:100%;font-size:13px;min-width:420px}
.ctl-panel th,.ctl-panel td{text-align:left;padding:6px 8px;border-bottom:1px solid rgba(var(--border-rgb),.12);vertical-align:top}
.ctl-panel th{color:var(--text-muted);font-weight:500;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em}
.ctl-panel .mono{font-family:'IBM Plex Mono',monospace}
@media (max-width:560px){.ctl-why-link{margin-left:0}}
/* role / specialty selectors (inside the app's controls panel) */
.ctl-selectors{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:2px 0 4px;border-bottom:1px solid rgba(var(--border-rgb),.10);margin-bottom:6px}
.ctl-selectors:empty{display:none}
.ctl-sel{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted);letter-spacing:.05em}
.ctl-sel select{appearance:none;-webkit-appearance:none;background:var(--panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/></svg>") no-repeat right 8px center;border:1px solid rgba(var(--border-rgb),.18);color:var(--text-primary);border-radius:6px;padding:5px 24px 5px 9px;font:500 12px 'IBM Plex Mono',monospace;cursor:pointer;max-width:min(320px,70vw)}
.ctl-sel select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.18)}
.ctl-sel-status{font-size:11.5px;color:var(--text-muted);font-style:italic;flex-basis:100%}
.ctl-sel-status:empty{display:none}
/* timed test */
.ctl-timed{position:relative}
.ctl-pill-timed{gap:6px}
.ctl-timed-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;background:var(--panel);border:1px solid rgba(var(--border-rgb),.16);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.28);padding:8px;display:flex;flex-wrap:wrap;gap:6px;width:280px}
.ctl-timed-menu[hidden]{display:none}
.ctl-timed-menu button{background:transparent;border:1px solid rgba(var(--border-rgb),.18);color:var(--text-primary);font:500 12.5px 'IBM Plex Mono',monospace;padding:6px 10px;border-radius:7px;cursor:pointer}
.ctl-timed-menu button:hover{border-color:var(--accent);color:var(--accent)}
.ctl-timed-menu span{font-size:11.5px;color:var(--text-muted);flex-basis:100%;padding:2px 2px 0}
.ctl-timer{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--accent);border-radius:999px;padding:6px 8px 6px 12px;font:500 12.5px 'IBM Plex Mono',monospace;color:var(--text-muted)}
.ctl-timer[hidden]{display:none}
.ctl-timer-t{font-size:14px;color:var(--text-primary);min-width:40px}
.ctl-timer-live .ctl-timer-t{color:var(--accent)}
.ctl-timer-x{background:transparent;border:1px solid rgba(var(--border-rgb),.18);color:var(--text-muted);border-radius:50%;width:22px;height:22px;line-height:18px;cursor:pointer;font-size:14px;padding:0}
.ctl-results .ctl-tiles{margin:10px 0 12px;grid-template-columns:repeat(3,1fr)}
.ctl-res-band{padding:8px 12px;border-radius:8px;background:rgba(var(--border-rgb),.06);border-left:3px solid var(--accent);font-size:13.5px}
.ctl-band-strong,.ctl-band-typical{border-left-color:var(--correct)}
.ctl-band-below{border-left-color:#e1574f}
.ctl-small a{color:var(--accent)}
.ctl-tablewrap{overflow-x:auto}
.ctl-table{border-collapse:collapse;width:100%;font-size:13px;min-width:420px}
.ctl-table th,.ctl-table td{text-align:left;padding:6px 8px;border-bottom:1px solid rgba(var(--border-rgb),.12)}
.ctl-table th{color:var(--text-muted);font-weight:500;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em}