/* SKILL IMPORT · SAFETY CHECK · REVIEW · ✨ CREATE WITH TUHI (public/static/js/skill-import.js; the console's tc-skill-import.css is
   the same file). Only .si-* here; colours are the page's theme tokens (my.tuhi.me's chat.css or the console's tuhi-theme.css), with
   each other's names as fallbacks, so light and dark follow the theme. Mobile first: one column; the draft sits beside the form
   from 900px. */
.si{display:flex;flex-direction:column;gap:12px;min-width:0}
.si-h{margin:4px 0 0;font-size:15px}
.si-note{margin:0;color:var(--mut);font-size:13px}
.si-help{color:var(--mut);font-size:12px}
.si-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.si-label{font-size:13px;font-weight:600;color:var(--fg)}
.si-in{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--bd-strong,var(--bd));border-radius:9px;background:var(--surface);color:var(--fg)}
.si-area{resize:vertical;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.si-in:focus-visible,.si-btn:focus-visible,.si-tab:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.si-file{font:inherit;font-size:13px;max-width:100%}
.si-tabs{display:flex;flex-wrap:wrap;gap:6px}
.si-tab{font:inherit;font-size:13px;padding:5px 12px;border-radius:999px;border:1px solid var(--bd-strong,var(--bd));background:var(--surface);color:var(--fg);cursor:pointer}
.si-tab.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc);font-weight:600}
.si-pane,.si-import,.si-create,.si-form,.si-preview,.si-review{display:flex;flex-direction:column;gap:10px;min-width:0}
.si-split{display:grid;grid-template-columns:1fr;gap:14px;min-width:0}
.si-preview{padding:10px;border:1px solid var(--bd);border-radius:12px;background:var(--surface-2,var(--surface))}
.si-actions,.si-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.si-switches{display:flex;flex-wrap:wrap;gap:6px 14px}
.si-btn{font:inherit;font-size:13px;padding:6px 14px;border-radius:9px;border:1px solid var(--bd-strong,var(--bd));background:var(--surface);color:var(--fg);cursor:pointer}
.si-btn.primary{background:var(--acc);border-color:var(--acc);color:var(--on-acc,var(--acc-fg))}
.si-btn.danger{color:var(--err,var(--err-fg));border-color:var(--err,var(--err-bd))}
.si-btn.busy{opacity:.7;cursor:progress}
.si-chip{display:inline-block;font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--surface-3,var(--surface-2));color:var(--mut);white-space:nowrap}
.si-chip.si-approved{background:var(--acc-soft);color:var(--acc)}
.si-chip.si-needs-review{background:var(--warn-bg,var(--acc-soft));color:var(--warn-fg,var(--gold,var(--fg)))}
.si-chip.si-rejected{background:var(--err-bg);color:var(--err,var(--err-fg))}
.si-status{margin:0;padding:8px 12px;border-radius:9px;font-size:13px;background:var(--surface-2,var(--surface));color:var(--fg)}
.si-status.si-approved{background:var(--acc-soft);color:var(--acc)}
.si-status.si-needs-review{background:var(--warn-bg,var(--acc-soft));color:var(--warn-fg,var(--fg))}
.si-status.si-rejected{background:var(--err-bg);color:var(--err,var(--err-fg))}
.si-summary{margin:0;padding-left:18px;font-size:13px;color:var(--fg)}
.si-findings{display:flex;flex-direction:column;gap:6px;min-width:0}
.si-finding{padding:6px 10px;border-left:3px solid var(--bd-strong,var(--bd));border-radius:6px;background:var(--surface);min-width:0}
.si-sev-critical{border-left-color:var(--err,var(--err-fg))}
.si-sev-high{border-left-color:var(--warn-fg,var(--gold,var(--acc)))}
.si-frow{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.si-sev{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.si-where{color:var(--mut);font-size:12px;overflow-wrap:anywhere}
.si-excerpt{display:block;margin-top:4px;padding:4px 8px;border-radius:6px;background:var(--code-bg,var(--surface-2));color:var(--code-fg,var(--fg));font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.si-pre{max-height:320px;overflow:auto;padding:8px;border-radius:8px;background:var(--code-bg,var(--surface-2));color:var(--code-fg,var(--fg));font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.si-item{display:flex;flex-direction:column;gap:6px;padding:8px 0;border-top:1px solid var(--bd)}
.si-item-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.si-detail{display:flex;flex-direction:column;gap:8px}
.si-more summary{cursor:pointer;font-size:13px}
.si-policy span{font-size:13px}
@media (min-width:900px){.si-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* the pop-up screen: a centred sheet over a dimmed page (full screen on a phone); the page behind does not scroll */
.si-locked,.si-locked body{overflow:hidden}
.si-ov{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:4vh 16px;background:rgba(20,16,12,.45);overflow:auto}
.si-sheet{width:min(1100px,100%);max-height:none;display:flex;flex-direction:column;background:var(--bg,var(--surface));color:var(--fg);border:1px solid var(--bd);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.28)}
.si-sheet-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--bd);position:sticky;top:0;background:inherit;border-radius:16px 16px 0 0;z-index:1}
.si-sheet-t{margin:0;font-size:17px}
.si-sheet-b{padding:16px 18px 20px}
@media (max-width:640px){.si-ov{padding:0}.si-sheet{border-radius:0;min-height:100%}.si-sheet-h{border-radius:0}}
/* the widget's own switches (button.si-tg role=switch): the console has no .tg style, so they drew as empty pills (owner, 2026-11-08) */
.si-tg{flex:0 0 auto;position:relative;display:inline-block;width:38px;height:22px;padding:0;border-radius:999px;border:0;background:var(--bd-strong,var(--bd));cursor:pointer;vertical-align:middle;transition:background .16s}
.si-tg[aria-checked=true]{background:var(--acc)}
.si-tg .tg-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--surface,var(--bg));box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .16s}
.si-tg[aria-checked=true] .tg-knob{transform:translateX(16px)}
.si-tg:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.si-tg,.si-tg .tg-knob{transition:none}}
/* skills a taskforce uses: one row per skill — switch, name, ✨ suggested, its description */
.si-skills{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto;padding:8px;border:1px solid var(--bd);border-radius:10px;background:var(--surface)}
.si-skill{align-items:flex-start}
.si-skill-t{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;min-width:0}
.si-skill-t small{flex-basis:100%}