/* Skills and Knowledge Base screens: the Modules list + skill detail page, and the
   Knowledge Base list + file view (the KNOWLEDGE BASE section near the end).
   Every rule is scoped to .sk (the page), .sk-portal (dialog, toasts) or
   .modal.sk-modal (the older shared modal when a skill flow opens it), so the
   other tabs keep the console's own tokens and element styles untouched.
   Feel: the structure of a hosted skill manager (quiet list, detail page with
   Overview / Contents, version picker) with a light Apple finish. The system
   font stack is enough for that; the look comes from proportion, fills and
   restraint, not from decoration. */

/* ---------- tokens ---------- */
.sk, .sk-portal, .main.sk-canvas, .modal.sk-modal {
  --sk-canvas:#F5F5F7; --sk-surface:#FFFFFF; --sk-pop:#FFFFFF;
  --sk-fill:rgba(118,118,128,.12); --sk-fill-h:rgba(118,118,128,.08); --sk-fill-s:rgba(118,118,128,.16);
  --sk-hair:#E5E5EA; --sk-line:#D2D2D7; --sk-ctl:#86868B;
  --sk-t1:#1D1D1F; --sk-t2:#515154; --sk-t3:#6E6E73; --sk-t4:#AEAEB2;
  --sk-accent:#0071E3; --sk-accent-t:#0066CC; --sk-on-accent:#FFFFFF; --sk-accent-h:#0066CC; --sk-focus:#0071E3;
  --sk-ok:#176A2B; --sk-warn:#A34700; --sk-crit:#C4001A; --sk-crit-t:#C4001A; --sk-on-crit:#FFFFFF;
  --sk-ok-bg:rgba(52,199,89,.14); --sk-warn-bg:rgba(255,149,0,.14); --sk-crit-bg:rgba(255,59,48,.10);
  --sk-scrim:rgba(0,0,0,.28);
  --sk-sh-pop:0 6px 24px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
  --sk-sh-dlg:0 20px 60px rgba(0,0,0,.22);
  --sk-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --sk-mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sk, :root:not([data-theme="light"]) .sk-portal,
  :root:not([data-theme="light"]) .main.sk-canvas, :root:not([data-theme="light"]) .modal.sk-modal {
    --sk-canvas:#141416; --sk-surface:#1C1C1E; --sk-pop:#2C2C2E;
    --sk-fill:rgba(120,120,128,.24); --sk-fill-h:rgba(120,120,128,.16); --sk-fill-s:rgba(120,120,128,.30);
    --sk-hair:#38383A; --sk-line:#48484A; --sk-ctl:#8E8E93;
    --sk-t1:#F5F5F7; --sk-t2:#C7C7CC; --sk-t3:#98989D; --sk-t4:#636366;
    --sk-accent-t:#52A7FF; --sk-focus:#52A7FF;
    --sk-ok:#30D158; --sk-warn:#FF9F0A; --sk-crit:#FF6961; --sk-crit-t:#FF8A80; --sk-on-crit:#1C1C1E;
    --sk-ok-bg:rgba(48,209,88,.16); --sk-warn-bg:rgba(255,159,10,.16); --sk-crit-bg:rgba(255,105,97,.16);
    --sk-scrim:rgba(0,0,0,.48);
    --sk-sh-pop:0 6px 24px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.06);
    --sk-sh-dlg:0 20px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
    color-scheme:dark;
  }
}
:root[data-theme="dark"] .sk, :root[data-theme="dark"] .sk-portal,
:root[data-theme="dark"] .main.sk-canvas, :root[data-theme="dark"] .modal.sk-modal {
  --sk-canvas:#141416; --sk-surface:#1C1C1E; --sk-pop:#2C2C2E;
  --sk-fill:rgba(120,120,128,.24); --sk-fill-h:rgba(120,120,128,.16); --sk-fill-s:rgba(120,120,128,.30);
  --sk-hair:#38383A; --sk-line:#48484A; --sk-ctl:#8E8E93;
  --sk-t1:#F5F5F7; --sk-t2:#C7C7CC; --sk-t3:#98989D; --sk-t4:#636366;
  --sk-accent-t:#52A7FF; --sk-focus:#52A7FF;
  --sk-ok:#30D158; --sk-warn:#FF9F0A; --sk-crit:#FF6961; --sk-crit-t:#FF8A80; --sk-on-crit:#1C1C1E;
  --sk-ok-bg:rgba(48,209,88,.16); --sk-warn-bg:rgba(255,159,10,.16); --sk-crit-bg:rgba(255,105,97,.16);
  --sk-scrim:rgba(0,0,0,.48);
  --sk-sh-pop:0 6px 24px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.06);
  --sk-sh-dlg:0 20px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
  color-scheme:dark;
}

/* The canvas replaces the console background behind these screens only. */
.main.sk-canvas { background:var(--sk-canvas); }

/* ---------- base ---------- */
.sk, .sk *, .sk-portal, .sk-portal * { box-sizing:border-box; }
.sk { font-family:var(--sk-sans); font-size:14px; line-height:20px; color:var(--sk-t1); font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; }
.sk-page { max-width:960px; margin:0 auto; padding:8px 0 56px; }
.sk h1, .sk h2, .sk h3, .sk p { margin:0; text-wrap:auto; }
.sk button, .sk-portal button { font-family:inherit; font-size:inherit; color:inherit; cursor:pointer; }
.sk ul { margin:0; padding:0; list-style:none; }
.sk :focus-visible, .sk-portal :focus-visible { outline:2px solid var(--sk-focus); outline-offset:2px; }
.sk-mono { font-family:var(--sk-mono); font-size:12.5px; }
.sk-i { flex:none; display:block; }
.sk-sr { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sk-quiet-text { color:var(--sk-t3); }

/* ---------- buttons, chips, icon buttons ---------- */
.sk .sk-btn, .sk-portal .sk-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:32px; padding:0 12px; border:1px solid transparent; border-radius:8px; background:var(--sk-fill); color:var(--sk-t1); font-size:13px; line-height:18px; font-weight:500; white-space:nowrap; transition:background-color .12s ease, border-color .12s ease, color .12s ease, transform .08s ease; }
.sk .sk-btn:hover:not([disabled]), .sk-portal .sk-btn:hover:not([disabled]) { background:var(--sk-fill-s); }
.sk .sk-btn:active:not([disabled]), .sk-portal .sk-btn:active:not([disabled]) { transform:scale(.98); }
.sk .sk-btn.outline, .sk-portal .sk-btn.outline { background:transparent; border-color:var(--sk-line); }
.sk .sk-btn.outline:hover:not([disabled]), .sk-portal .sk-btn.outline:hover:not([disabled]) { background:var(--sk-fill-h); }
.sk .sk-btn.fill, .sk-portal .sk-btn.fill { background:var(--sk-accent); color:var(--sk-on-accent); }
.sk .sk-btn.fill:hover:not([disabled]), .sk-portal .sk-btn.fill:hover:not([disabled]) { background:var(--sk-accent-h); }
.sk .sk-btn.danger-fill, .sk-portal .sk-btn.danger-fill { background:var(--sk-crit); color:var(--sk-on-crit); }
.sk .sk-btn.danger-fill:hover:not([disabled]), .sk-portal .sk-btn.danger-fill:hover:not([disabled]) { filter:brightness(1.06); background:var(--sk-crit); }
.sk .sk-btn.quiet, .sk-portal .sk-btn.quiet { background:transparent; color:var(--sk-accent-t); padding:0 8px; }
.sk .sk-btn.quiet:hover:not([disabled]), .sk-portal .sk-btn.quiet:hover:not([disabled]) { background:var(--sk-fill-h); }
.sk .sk-btn[disabled], .sk-portal .sk-btn[disabled] { opacity:1; color:var(--sk-t4); background:var(--sk-fill-h); border-color:transparent; cursor:not-allowed; transform:none; }
.sk .sk-btn.outline[disabled] { background:transparent; border-color:var(--sk-hair); }
.sk .sk-btn.sm { height:28px; padding:0 10px; font-size:12px; }
.sk .sk-icon-btn { position:relative; display:inline-grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--sk-t2); transition:background-color .12s ease, color .12s ease, transform .08s ease; }
.sk .sk-icon-btn:hover, .sk .sk-icon-btn[aria-expanded="true"] { background:var(--sk-fill); color:var(--sk-t1); }
.sk .sk-icon-btn:active { transform:scale(.98); }
.sk .sk-icon-btn[disabled] { color:var(--sk-t4); cursor:not-allowed; }
.sk .sk-chip { display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:999px; background:var(--sk-fill); color:var(--sk-t2); font-size:12px; line-height:16px; font-weight:500; white-space:nowrap; max-width:200px; overflow:hidden; text-overflow:ellipsis; }
.sk .sk-chip.warn { background:var(--sk-warn-bg); color:var(--sk-warn); }
.sk .sk-chip.ok { background:var(--sk-ok-bg); color:var(--sk-ok); }
.sk .sk-chip.crit { background:var(--sk-crit-bg); color:var(--sk-crit-t); }
.sk .sk-chip.mono { font-family:var(--sk-mono); font-size:12px; }
.sk .sk-count { display:inline-flex; align-items:center; height:20px; padding:0 7px; border-radius:999px; background:var(--sk-fill); color:var(--sk-t2); font-size:12px; font-weight:500; }
.sk .sk-link { border:0; background:none; padding:0; color:var(--sk-accent-t); font:inherit; text-decoration:underline; text-underline-offset:2px; border-radius:4px; }
.sk .sk-link:hover { text-decoration-thickness:2px; }

/* Tooltips: ~330ms delay, ~100ms fade. Pointer devices only. */
@media (hover:hover) {
  .sk [data-tip]::after { content:attr(data-tip); position:absolute; left:50%; top:calc(100% + 6px); transform:translateX(-50%); padding:4px 8px; border-radius:6px; background:var(--sk-t1); color:var(--sk-canvas); font-size:12px; line-height:16px; font-weight:500; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .1s ease 0s; z-index:30; }
  .sk [data-tip]:hover::after { opacity:1; transition-delay:.33s; }
  .sk [data-tip][aria-expanded="true"]::after { display:none; }
}

/* ---------- list page ---------- */
.sk-head { display:flex; align-items:flex-end; gap:12px; margin:12px 0 4px; }
.sk-head h1 { font-size:28px; line-height:34px; font-weight:700; letter-spacing:-.01em; }
.sk .sk-summary { margin:6px 0 20px; font-size:13px; line-height:18px; color:var(--sk-t3); }
.sk-summary .sep { margin:0 6px; color:var(--sk-t3); }
.sk-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:24px; }
.sk-seg { display:inline-flex; padding:2px; border-radius:8px; background:var(--sk-fill); gap:2px; }
.sk .sk-seg button { height:28px; padding:0 12px; border:0; border-radius:6px; background:transparent; color:var(--sk-t2); font-size:13px; font-weight:500; transition:background-color .12s ease, color .12s ease; }
.sk .sk-seg button:hover { color:var(--sk-t1); }
.sk .sk-seg button[aria-pressed="true"] { background:var(--sk-surface); color:var(--sk-t1); }
.sk-search { position:relative; flex:1 1 180px; min-width:160px; }
.sk-search .sk-i { position:absolute; left:10px; top:8px; color:var(--sk-t3); pointer-events:none; }
.sk .sk-input { display:block; width:100%; height:32px; padding:0 10px; border:1px solid transparent; border-radius:8px; background:var(--sk-fill); color:var(--sk-t1); font:inherit; font-size:13px; transition:background-color .12s ease, border-color .12s ease; }
.sk .sk-search .sk-input { padding-left:32px; }
.sk .sk-input::placeholder { color:var(--sk-t2); opacity:1; }
.sk .sk-input:hover { background:var(--sk-fill-s); }
.sk .sk-input:focus { background:var(--sk-surface); border-color:transparent; outline:2px solid var(--sk-focus); outline-offset:0; }
.sk-tools { display:inline-flex; gap:8px; align-items:center; margin-left:auto; }
.sk-group-head { display:flex; align-items:center; gap:8px; margin:0 4px 8px; min-height:28px; }
.sk-group-head h2 { font-size:15px; line-height:20px; font-weight:600; }
.sk-group-head .spacer { flex:1; }
.sk ul.sk-list, .sk div.sk-list { padding:6px; border-radius:12px; background:var(--sk-surface); }
.sk-row { position:relative; display:flex; align-items:center; gap:8px; min-height:68px; border-radius:8px; transition:background-color .12s ease; }
.sk-row + .sk-row::before { content:""; position:absolute; top:0; left:66px; right:12px; height:1px; background:var(--sk-hair); pointer-events:none; }
.sk-row.menu-open { z-index:6; }
/* A row is "active" (highlight, hidden separators, action button in place of the time) only while the
   pointer is over it, while its kebab menu is open, or while a control in it has KEYBOARD focus.
   Never :focus-within: focus restored by script after a mouse click (coming back from the detail page,
   any re-render) would leave the row lit with the pointer nowhere near it. */
.sk-row:hover, .sk-row.menu-open { background:var(--sk-fill-h); }
.sk-row:has(:focus-visible) { background:var(--sk-fill-h); }
.sk-row:hover::before, .sk-row.menu-open::before, .sk-row:hover + .sk-row::before, .sk-row.menu-open + .sk-row::before { opacity:0; }
.sk-row:has(:focus-visible)::before, .sk-row:has(:focus-visible) + .sk-row::before { opacity:0; }
.sk .sk-row-main { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:14px; padding:14px 0 14px 12px; border:0; background:transparent; text-align:left; border-radius:8px; }
.sk .sk-row-main::after { content:""; position:absolute; inset:0; border-radius:8px; }
.sk .sk-row-main:focus-visible { outline-offset:-2px; }
.sk-tile { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:8px; background:var(--sk-fill); color:var(--sk-t2); font-size:14px; font-weight:600; letter-spacing:.02em; user-select:none; }
.sk-tile.lg { width:44px; height:44px; border-radius:8px; font-size:15px; }
.sk-row-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sk-row-title { display:flex; align-items:center; gap:8px; min-width:0; }
.sk-name { font-size:15px; line-height:20px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:0 1 auto; }
.sk-row-title .sk-chip { flex:none; }
.sk-row-desc { font-size:13px; line-height:18px; color:var(--sk-t2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk-row-side { position:relative; z-index:1; flex:none; display:flex; align-items:center; gap:8px; padding-right:6px; }
.sk-slot { position:relative; display:grid; align-items:center; justify-items:end; min-width:96px; }
.sk-slot > * { grid-area:1/1; }
.sk-time { font-size:13px; line-height:18px; color:var(--sk-t3); text-align:right; transition:opacity .12s ease; pointer-events:none; }
.sk .sk-row-act { opacity:0; pointer-events:none; }
.sk-row:hover .sk-row-act, .sk-row.menu-open .sk-row-act, .sk-row.is-private .sk-row-act, .sk .sk-row-act:focus-visible { opacity:1; pointer-events:auto; }
.sk-row:hover .sk-slot:not(.solo) .sk-time, .sk-row.menu-open .sk-slot:not(.solo) .sk-time { opacity:0; }
.sk-row:has(:focus-visible) .sk-slot:not(.solo) .sk-time { opacity:0; }
.sk-row:has(:focus-visible) .sk-row-act { opacity:1; pointer-events:auto; }
.sk-row.is-private .sk-slot { min-width:0; }
.sk-row.is-private .sk-slot .sk-row-act { position:static; }
.sk-row-time-solo { font-size:13px; line-height:18px; color:var(--sk-t3); min-width:44px; text-align:right; pointer-events:none; }
.sk-empty { padding:40px 16px; text-align:center; color:var(--sk-t3); font-size:13px; line-height:18px; }
.sk-empty .sk-btn { margin-top:12px; }
.sk-pager-wrap .pager { display:flex; align-items:center; gap:10px; padding:12px 4px 0; border-top:0; flex-wrap:wrap; }
.sk-pager-wrap .pager .spacer { flex:1; }
.sk-pager-wrap .pager .hint { font-size:12px; color:var(--sk-t3); }
.sk-pager-wrap .pager .pgsize { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--sk-t3); }
.sk-pager-wrap .pager .pgsize select { width:auto; height:28px; padding:0 22px 0 8px; border:1px solid var(--sk-ctl); border-radius:8px; background:var(--sk-surface); color:var(--sk-t1); font-size:12px; }
.sk-pager-wrap .pager .pgnav { display:inline-flex; align-items:center; gap:6px; }
.sk-pager-wrap .pager .pgnav .btn { display:inline-flex; align-items:center; height:28px; padding:0 10px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--sk-accent-t); font-size:12px; font-weight:500; }
.sk-pager-wrap .pager .pgnav .btn:hover { background:var(--sk-fill-h); }
.sk-pager-wrap .pager .pgnav .btn[disabled] { color:var(--sk-t4); opacity:1; cursor:default; background:transparent; }
.sk-pager-wrap .pager .pgcount { min-width:48px; text-align:center; font-family:inherit; }

/* ---------- menus and popovers ---------- */
.sk-pop-wrap { position:relative; display:inline-flex; }
.sk .sk-menu { position:absolute; top:calc(100% + 4px); right:0; z-index:40; min-width:192px; padding:4px; border-radius:12px; background:var(--sk-pop); box-shadow:var(--sk-sh-pop); animation:sk-pop-in .14s ease-out; transform-origin:top right; }
.sk .sk-menu.left { right:auto; left:0; transform-origin:top left; }
.sk .sk-menu.up { top:auto; bottom:calc(100% + 4px); transform-origin:bottom right; }
.sk .sk-menu.up.left { transform-origin:bottom left; }
.sk .sk-menu.closing { animation:sk-pop-out .09s ease-in forwards; }
.sk .sk-menu.ver { min-width:260px; max-width:min(440px, 86vw); max-height:min(360px, 60vh); overflow:auto; }
.sk .sk-menu.cat { min-width:220px; max-height:min(360px, 60vh); overflow:auto; }
.sk .sk-mi { display:flex; align-items:center; gap:8px; width:100%; min-height:32px; padding:0 10px; border:0; border-radius:6px; background:transparent; color:var(--sk-t1); font-size:13px; line-height:18px; text-align:left; transition:background-color .12s ease; }
.sk .sk-mi:hover, .sk .sk-mi:focus-visible { background:var(--sk-fill); }
.sk .sk-mi:focus-visible { outline:2px solid var(--sk-focus); outline-offset:-2px; }
.sk .sk-mi.danger { color:var(--sk-crit-t); }
.sk .sk-mi .lbl { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk .sk-mi .sk-i { color:var(--sk-t2); }
.sk .sk-mi.danger .sk-i { color:var(--sk-crit-t); }
.sk .sk-mi .tick { width:16px; flex:none; color:var(--sk-t1); }
.sk .sk-mi .n { color:var(--sk-t2); font-size:12px; }
.sk .sk-mi .ord { color:var(--sk-t2); font-size:12px; flex:none; }
.sk .sk-mi.ver { min-height:36px; }
.sk .sk-mi .sk-chip { height:20px; padding:0 7px; font-size:12px; flex:none; }
.sk-sep { height:1px; margin:4px 6px; background:var(--sk-hair); }
.sk-menu-title { padding:6px 10px 2px; font-size:12px; color:var(--sk-t3); }
@keyframes sk-pop-in { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:none; } }
@keyframes sk-pop-out { from { opacity:1; } to { opacity:0; } }

/* ---------- detail page ---------- */
.sk .sk-back { display:inline-flex; align-items:center; gap:6px; height:32px; margin:8px 0 12px -8px; padding:0 8px; border:0; border-radius:8px; background:transparent; color:var(--sk-t2); font-size:13px; font-weight:500; transition:background-color .12s ease, color .12s ease; }
.sk .sk-back:hover { background:var(--sk-fill-h); color:var(--sk-t1); }
.sk-dhead { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.sk-dtitle { flex:1 1 auto; min-width:0; }
.sk-dname { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sk-dname h1 { font-size:20px; line-height:26px; font-weight:600; letter-spacing:-.005em; overflow-wrap:anywhere; }
.sk-dmeta { margin-top:2px; font-size:13px; line-height:18px; color:var(--sk-t3); overflow-wrap:anywhere; }
.sk-dmeta .sk-mono { font-size:12px; }
.sk-dactions { flex:none; display:flex; align-items:center; gap:12px; }
.sk-sw { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--sk-t2); }
.sk .sk-switch { position:relative; width:40px; height:24px; padding:0; border:0; border-radius:999px; background:var(--sk-ctl); transition:background-color .16s ease; }
.sk .sk-switch::after { content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .16s ease; }
.sk .sk-switch[aria-checked="true"] { background:var(--sk-accent); }
.sk .sk-switch[aria-checked="true"]::after { transform:translateX(16px); }
.sk .sk-switch[disabled] { opacity:.5; cursor:not-allowed; }
.sk .sk-switch:active::after { width:22px; }
.sk .sk-switch[aria-checked="true"]:active::after { transform:translateX(14px); }
.sk-notice { display:flex; align-items:center; gap:12px; margin:0 0 16px; padding:10px 12px 10px 14px; border-radius:12px; background:var(--sk-warn-bg); color:var(--sk-t1); font-size:13px; line-height:18px; }
.sk-notice .msg { flex:1; min-width:0; }
.sk-notice b { font-weight:600; }
.sk-notice.crit { background:var(--sk-crit-bg); }
.sk-tabs { display:flex; gap:24px; border-bottom:1px solid var(--sk-hair); margin-bottom:24px; }
.sk .sk-tab { position:relative; height:40px; padding:0 2px; border:0; background:transparent; color:var(--sk-t3); font-size:14px; font-weight:500; }
.sk .sk-tab:hover { color:var(--sk-t1); }
.sk .sk-tab[aria-selected="true"] { color:var(--sk-t1); }
.sk .sk-tab[aria-selected="true"]::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--sk-t1); border-radius:2px; }
.sk .sk-tab:focus-visible { outline-offset:-2px; border-radius:6px; }

/* overview */
#skPanel:focus { outline:none; }
.sk-ov { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:32px; align-items:start; }
.sk-ov-main { min-width:0; display:flex; flex-direction:column; gap:24px; }
.sk-lbl { font-size:13px; line-height:18px; font-weight:500; color:var(--sk-t3); margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.sk-text { font-size:14px; line-height:22px; color:var(--sk-t1); white-space:pre-wrap; overflow-wrap:anywhere; }
.sk-text.muted { color:var(--sk-t3); }
.sk-cats { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.sk-side { padding:16px; border-radius:12px; background:var(--sk-fill-h); display:flex; flex-direction:column; gap:16px; min-width:0; }
.sk-side .val { font-size:13px; line-height:18px; color:var(--sk-t1); overflow-wrap:anywhere; }
.sk-side .val .sk-chip { margin-left:4px; }
.sk-side .sk-lbl { margin-bottom:3px; font-size:12px; color:var(--sk-t2); }
.sk-log { display:flex; flex-direction:column; gap:10px; }
.sk-log li { font-size:13px; line-height:18px; }
.sk-log .a { font-weight:500; color:var(--sk-t1); }
.sk-log .m { font-size:12px; line-height:16px; color:var(--sk-t2); margin-top:1px; overflow-wrap:anywhere; }
.sk-side .sk-quiet-text { color:var(--sk-t2); }
.sk-log .ft { color:var(--sk-t2); font-family:var(--sk-mono); font-size:12px; }

/* contents */
.sk-ctool { display:flex; align-items:center; gap:8px; margin-bottom:12px; min-height:32px; flex-wrap:wrap; }
.sk-ctool .grow { flex:1; }
.sk-ctool .sk-inline { display:inline-flex; align-items:center; gap:8px; min-width:0; }
.sk .sk-vtrig { max-width:min(420px, 56vw); justify-content:flex-start; gap:8px; background:transparent; border-color:var(--sk-line); }
.sk .sk-vtrig .lbl { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk .sk-vtrig .live { color:var(--sk-t3); font-weight:400; white-space:nowrap; }
.sk .sk-vtrig .sk-i:last-child { color:var(--sk-t3); }
.sk-note { margin:0 0 12px; padding:10px 14px; border-radius:12px; background:var(--sk-warn-bg); color:var(--sk-t1); font-size:13px; line-height:18px; }
.sk-note b { font-weight:600; }
.sk-note code { font-family:var(--sk-mono); font-size:12px; overflow-wrap:anywhere; }
.sk-box { display:grid; grid-template-columns:244px minmax(0,1fr); height:clamp(420px, calc(100vh - 330px), 940px); border:1px solid var(--sk-hair); border-radius:12px; background:var(--sk-surface); overflow:hidden; }
.sk-box.single { grid-template-columns:1fr; }
.sk-tree { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--sk-hair); }
.sk-tree-scroll { flex:1; min-height:0; overflow:auto; padding:8px; }
.sk .sk-tr { display:flex; align-items:center; gap:8px; width:100%; height:30px; padding:0 8px; border:0; border-radius:6px; background:transparent; color:var(--sk-t1); font-size:13px; line-height:18px; text-align:left; transition:background-color .12s ease; }
.sk .sk-tr:hover { background:var(--sk-fill-h); }
.sk .sk-tr[aria-selected="true"], .sk .sk-tr.sel { background:var(--sk-fill-s); font-weight:500; }
.sk .sk-tr .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk .sk-tr .sk-i { color:var(--sk-t3); }
.sk .sk-tr.dir { color:var(--sk-t2); }
.sk .sk-tr:focus-visible { outline-offset:-2px; }
.sk-kids { margin-left:0; }
.sk-kids .sk-tr { padding-left:24px; }
.sk-kids .sk-kids .sk-tr { padding-left:40px; }
.sk-tree-foot { flex:none; padding:8px; border-top:1px solid var(--sk-hair); }
.sk .sk-addrow { display:flex; align-items:center; gap:8px; width:100%; height:30px; padding:0 8px; border:0; border-radius:6px; background:transparent; color:var(--sk-accent-t); font-size:13px; font-weight:500; }
.sk .sk-addrow:hover, .sk .sk-addrow[aria-expanded="true"] { background:var(--sk-fill-h); }
.sk-pane { display:flex; flex-direction:column; min-width:0; min-height:0; }
.sk-pathbar { flex:none; display:flex; align-items:center; gap:8px; min-height:44px; padding:6px 10px 6px 20px; }
.sk-path { flex:1; min-width:0; font-family:var(--sk-mono); font-size:12.5px; line-height:18px; color:var(--sk-t2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sk-size { flex:none; font-size:12px; color:var(--sk-t3); }
.sk-tog { display:inline-flex; gap:2px; padding:2px; border-radius:8px; background:var(--sk-fill); }
.sk .sk-tog button { display:grid; place-items:center; width:28px; height:24px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--sk-t2); transition:background-color .12s ease, color .12s ease; }
.sk .sk-tog button[aria-pressed="true"] { background:var(--sk-surface); color:var(--sk-t1); }
.sk-pane-body { flex:1; min-height:0; overflow:auto; }
.sk-code { display:block; margin:0; padding:4px 20px 20px 0; font-family:var(--sk-mono); font-size:12.5px; line-height:20px; color:var(--sk-t1); counter-reset:ln; tab-size:2; }
.sk-code .ln { display:block; position:relative; padding-left:56px; white-space:pre-wrap; overflow-wrap:anywhere; min-height:20px; counter-increment:ln; }
.sk-code .ln::before { content:counter(ln); position:absolute; left:0; width:40px; text-align:right; color:var(--sk-t3); user-select:none; }
.sk-code .cap { display:block; padding:12px 20px 0 56px; color:var(--sk-t3); font-family:var(--sk-sans); font-size:12px; }
.sk-md { padding:8px 24px 32px 20px; font-size:14px; line-height:24px; color:var(--sk-t1); overflow-wrap:anywhere; max-width:760px; }
.sk-md > *:first-child { margin-top:12px; }
.sk-md h1, .sk-md h2, .sk-md h3, .sk-md h4, .sk-md h5, .sk-md h6 { margin:1.5em 0 .5em; font-weight:600; letter-spacing:-.005em; text-wrap:balance; }
.sk-md h1 { font-size:22px; line-height:30px; } .sk-md h2 { font-size:18px; line-height:26px; } .sk-md h3 { font-size:15px; line-height:22px; } .sk-md h4, .sk-md h5, .sk-md h6 { font-size:14px; line-height:22px; }
.sk-md p { margin:0 0 12px; }
.sk-md ul, .sk-md ol { margin:0 0 12px; padding-left:22px; list-style:revert; }
.sk-md li { margin:2px 0; }
.sk-md li > ul, .sk-md li > ol { margin:2px 0 0; }
.sk-md strong { font-weight:600; }
.sk-md a { color:var(--sk-accent-t); text-underline-offset:2px; }
.sk-md code { padding:1px 5px; border-radius:6px; background:var(--sk-fill); font-family:var(--sk-mono); font-size:12.5px; }
.sk-md pre { margin:0 0 14px; padding:12px 14px; border-radius:8px; background:var(--sk-fill-h); overflow:auto; }
.sk-md pre code { padding:0; background:none; font-size:12.5px; line-height:20px; white-space:pre; }
.sk-md blockquote { margin:0 0 12px; padding:2px 0 2px 14px; border-left:3px solid var(--sk-line); color:var(--sk-t2); }
.sk-md blockquote > p:last-child { margin-bottom:0; }
.sk-md hr { border:0; height:1px; margin:20px 0; background:var(--sk-hair); }
.sk-md .tw { margin:0 0 14px; overflow-x:auto; }
.sk-md table { border-collapse:collapse; font-size:13px; line-height:20px; width:100%; }
.sk-md th, .sk-md td { padding:7px 12px 7px 0; border-bottom:1px solid var(--sk-hair); text-align:left; vertical-align:top; text-transform:none; letter-spacing:0; color:var(--sk-t1); background:none; white-space:normal; }
.sk-md th { font-size:13px; font-weight:600; color:var(--sk-t1); }
.sk-md tr:last-child td { border-bottom:0; }
.sk-md .fm { margin:12px 0 16px; padding:10px 12px; border-radius:8px; background:var(--sk-fill-h); font-size:13px; line-height:20px; }
.sk-md .fm div { display:flex; gap:12px; }
.sk-md .fm .k { flex:none; width:96px; color:var(--sk-t3); font-family:var(--sk-mono); font-size:12px; }
.sk-md .fm .v { flex:1; min-width:0; color:var(--sk-t2); }
.sk-skel { padding:20px; display:flex; flex-direction:column; gap:12px; }
.sk-skel i { display:block; height:12px; border-radius:6px; background:var(--sk-fill); }
.sk-skel .cap { font-size:13px; color:var(--sk-t3); margin-bottom:4px; }
.sk-msg { padding:32px 20px; font-size:13px; line-height:18px; color:var(--sk-t3); text-align:center; }
.sk-msg .sk-btn { margin-top:12px; }
.sk-chg { padding:16px 20px; overflow:auto; }
.sk-chg h3 { font-size:13px; font-weight:600; margin:14px 0 6px; color:var(--sk-t2); }
.sk-chg h3:first-child { margin-top:0; }
.sk-chg li { display:flex; align-items:center; gap:8px; }
.sk .sk-chg-row { display:flex; align-items:center; gap:10px; width:100%; min-height:30px; padding:0 8px; border:0; border-radius:6px; background:transparent; text-align:left; font-family:var(--sk-mono); font-size:12.5px; }
.sk .sk-chg-row:hover { background:var(--sk-fill-h); }
.sk-chg .mk { flex:none; width:16px; text-align:center; font-weight:600; }
.sk-chg .mk.add { color:var(--sk-ok); } .sk-chg .mk.rem { color:var(--sk-crit-t); } .sk-chg .mk.chg { color:var(--sk-warn); }
.sk-chg .sum { font-size:13px; color:var(--sk-t2); margin:0 0 12px; }

/* inline editor */
.sk-ed { position:relative; display:grid; grid-template-columns:52px minmax(0,1fr); flex:1; min-height:0; }
.sk-gut { margin:0; padding:12px 8px 12px 0; overflow:hidden; text-align:right; font-family:var(--sk-mono); font-size:12.5px; line-height:20px; color:var(--sk-t3); white-space:pre; user-select:none; }
.sk .sk-ta { display:block; width:100%; height:100%; min-height:0; margin:0; padding:12px 20px 12px 8px; border:0; border-radius:0; background:transparent; color:var(--sk-t1); font-family:var(--sk-mono); font-size:12.5px; line-height:20px; white-space:pre; overflow:auto; resize:none; tab-size:2; outline:none; }
.sk .sk-ta:focus-visible { outline:none; }
.sk-box.editing:focus-within { border-color:var(--sk-accent); }   /* not a hover reveal: marks the editor you are typing in, gone as soon as focus leaves it */
.sk .sk-cl { width:min(320px, 40vw); }
.sk .sk-in-chip { flex:none; }

/* ---------- portal: dialog, scrim, toast ---------- */
.sk-portal.scrim { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px; background:var(--sk-scrim); animation:sk-fade-in .2s ease-out; font-family:var(--sk-sans); }
.sk-portal.scrim.out { animation:sk-fade-out .16s ease-in forwards; }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  @media not (prefers-contrast: more) {
    .sk-portal.scrim, .modal-back:has(.modal.sk-modal) { -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  }
}
.sk-dlg { width:100%; max-width:400px; padding:20px; border-radius:16px; background:var(--sk-pop); color:var(--sk-t1); box-shadow:var(--sk-sh-dlg); animation:sk-dlg-in .2s ease-out; }
.sk-portal.out .sk-dlg { animation:sk-dlg-out .16s ease-in forwards; }
.sk-dlg h2 { margin:0 0 6px; font-size:16px; line-height:22px; font-weight:600; }
.sk-dlg .body { font-size:14px; line-height:20px; color:var(--sk-t2); }
.sk-dlg .body p { margin:0 0 8px; }
.sk-dlg .body p:last-child { margin-bottom:0; }
.sk-dlg .body b { color:var(--sk-t1); font-weight:600; }
.sk-dlg .body .warn { color:var(--sk-warn); }
.sk-dlg .field { margin-top:12px; }
.sk-dlg .field label { display:block; margin-bottom:6px; font-size:13px; font-weight:500; color:var(--sk-t2); text-transform:none; letter-spacing:0; }
.sk-portal .sk-input { display:block; width:100%; height:36px; padding:0 10px; border:1px solid var(--sk-ctl); border-radius:8px; background:var(--sk-surface); color:var(--sk-t1); font:inherit; font-size:14px; }
.sk-portal .sk-input:focus { border-color:transparent; outline:2px solid var(--sk-focus); outline-offset:0; }
.sk-portal .sk-input::placeholder { color:var(--sk-t3); opacity:1; }   /* on the plain dialog surface, so text 3 is enough */
.sk-dlg .actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.sk-portal .sk-btn { height:34px; padding:0 16px; font-size:14px; }
.sk-toasts { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:95; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; width:min(460px, calc(100vw - 32px)); }
.sk-toast { pointer-events:auto; display:flex; align-items:center; gap:12px; width:100%; padding:10px 10px 10px 16px; border-radius:12px; background:var(--sk-pop); color:var(--sk-t1); box-shadow:var(--sk-sh-pop); font-family:var(--sk-sans); font-size:14px; line-height:20px; animation:sk-toast-in .22s ease-out; }
.sk-toast.out { animation:sk-toast-out .16s ease-in forwards; }
.sk-toast .msg { flex:1; min-width:0; overflow-wrap:anywhere; }
.sk-toast.err .msg { color:var(--sk-crit-t); }
.sk-portal .sk-btn.quiet.tact { height:30px; color:var(--sk-accent-t); font-weight:600; }
.sk-toast .x { flex:none; display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--sk-t3); }
.sk-toast .x:hover { background:var(--sk-fill); color:var(--sk-t1); }
@keyframes sk-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes sk-fade-out { from { opacity:1; } to { opacity:0; } }
@keyframes sk-dlg-in { from { opacity:0; transform:scale(.97) translateY(4px); } to { opacity:1; transform:none; } }
@keyframes sk-dlg-out { from { opacity:1; } to { opacity:0; transform:scale(.98); } }
@keyframes sk-toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes sk-toast-out { from { opacity:1; } to { opacity:0; transform:translateY(4px); } }

/* ---------- older shared modal, when a skill flow opens it ---------- */
.modal-back:has(.modal.sk-modal) { background:var(--sk-scrim, rgba(0,0,0,.28)); }
.modal.sk-modal { background:var(--sk-pop); color:var(--sk-t1); border:0; border-radius:16px; box-shadow:var(--sk-sh-dlg); padding:20px; font-family:var(--sk-sans); }
.modal.sk-modal h3 { font-size:16px; line-height:22px; font-weight:600; letter-spacing:0; margin-bottom:6px; }
.modal.sk-modal p.sub { color:var(--sk-t2); font-size:14px; line-height:20px; margin:0 0 16px; }
.modal.sk-modal p.sub b, .modal.sk-modal b { color:var(--sk-t1); }
.modal.sk-modal .field label { text-transform:none; letter-spacing:0; font-size:13px; font-weight:500; color:var(--sk-t2); }
.modal.sk-modal select, .modal.sk-modal textarea, .modal.sk-modal input[type=text] { border:1px solid var(--sk-ctl); border-radius:8px; background:var(--sk-surface); color:var(--sk-t1); font-size:14px; }
.modal.sk-modal select:focus, .modal.sk-modal textarea:focus, .modal.sk-modal input[type=text]:focus { border-color:transparent; outline:2px solid var(--sk-focus); outline-offset:0; }
.modal.sk-modal .btn { height:34px; padding:0 16px; border:1px solid var(--sk-line); border-radius:8px; background:transparent; color:var(--sk-t1); font-size:14px; font-weight:500; }
.modal.sk-modal .btn:hover { background:var(--sk-fill-h); border-color:var(--sk-line); }
.modal.sk-modal .btn.ghost { border-color:transparent; color:var(--sk-t2); }
.modal.sk-modal .btn.primary { background:var(--sk-accent); border-color:var(--sk-accent); color:#fff; }
.modal.sk-modal .btn.primary:hover { filter:none; background:var(--sk-accent-h); }
.modal.sk-modal .btn.sm { height:28px; padding:0 10px; font-size:12px; }
.modal.sk-modal .btn:disabled { opacity:1; color:var(--sk-t4); background:var(--sk-fill-h); border-color:transparent; }
.modal.sk-modal .dropzone { border:1.5px dashed var(--sk-line); border-radius:12px; background:var(--sk-fill-h); color:var(--sk-t2); }
.modal.sk-modal .dropzone.drag { border-color:var(--sk-accent); background:rgba(0,113,227,.08); color:var(--sk-accent-t); }
.modal.sk-modal .dropzone b { color:var(--sk-t1); }
.modal.sk-modal .fileitem { border:0; border-radius:8px; background:var(--sk-fill-h); }
.modal.sk-modal .card { background:var(--sk-fill-h); border:0; box-shadow:none; border-radius:12px; }
.modal.sk-modal .warnbox { background:var(--sk-warn-bg); color:var(--sk-warn); border-radius:8px; }
.modal.sk-modal .critbox { background:var(--sk-crit-bg); color:var(--sk-crit-t); border-radius:8px; }
.modal.sk-modal :focus-visible { outline:2px solid var(--sk-focus); outline-offset:2px; }
.modal.sk-modal input::placeholder, .modal.sk-modal textarea::placeholder { color:var(--sk-t3); opacity:1; }
/* The console's own grey (--text-3) leaks into these three; on the tinted drop zone and file rows text 2 is what reaches AA in both themes. */
.modal.sk-modal .dropzone .mut, .modal.sk-modal .fileitem .fi, .modal.sk-modal .fileitem .sz, .modal.sk-modal .fileitem.empty { color:var(--sk-t2); }
.modal.sk-modal .dropzone .dz-browse { color:var(--sk-accent-t); text-decoration:underline; text-underline-offset:2px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .sk-ov { grid-template-columns:1fr; gap:24px; }
  .sk-toolbar .sk-search { flex-basis:100%; order:3; }
  .sk-tools { margin-left:0; }
}
@media (max-width: 720px) {
  .sk-dhead { flex-wrap:wrap; }
  .sk-dactions { flex-basis:100%; justify-content:flex-end; }
  .sk-box { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); height:clamp(480px, calc(100vh - 260px), 900px); }
  .sk-tree { border-right:0; border-bottom:1px solid var(--sk-hair); max-height:200px; }
  .sk-row-side .sk-slot, .sk-row-time-solo, .sk-time, .sk .sk-row-act { display:none; }   /* no hover on a phone: visibility lives on the detail page switch */
  .sk-row-title { flex-wrap:wrap; row-gap:4px; }
  .sk-name { white-space:normal; overflow-wrap:anywhere; }
  .sk-row-desc { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .sk ul.sk-list, .sk div.sk-list { padding:4px; }
}
@media (pointer:coarse) {
  .sk .sk-btn, .sk .sk-icon-btn, .sk .sk-mi, .sk .sk-tr, .sk .sk-input { min-height:44px; }
  .sk .sk-icon-btn { min-width:44px; }
  .sk .sk-seg button { min-height:36px; }
  .sk .sk-tog button { min-height:36px; min-width:40px; }
  .sk .sk-row-act { opacity:1; pointer-events:auto; }
  .sk .sk-slot:not(.solo) .sk-time { display:none; }
}
@media (max-width: 720px) {
  .sk .sk-row-act, .sk .sk-slot { display:none; }
}
@media (prefers-contrast: more) {
  .sk-list, .sk-box, .sk .sk-input, .sk .sk-btn.outline { outline:1px solid var(--sk-ctl); outline-offset:-1px; }
  .sk-portal.scrim { background:var(--sk-scrim); }
}

/* ---------- knowledge base (Phase 2) ---------- */
/* list rows: the tile is the file kind, line 2 is the file name in mono plus "Used by", line 3 the description */
.sk-kb-row { min-height:82px; }
.sk .sk-kb-row .sk-row-main { padding:12px 0 12px 12px; }
.sk-kb-sub { display:flex; align-items:baseline; gap:2px 14px; min-width:0; font-size:12px; line-height:16px; color:var(--sk-t3); }
.sk-kb-file { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--sk-mono); font-size:12px; line-height:16px; }
.sk-kb-used { flex:none; white-space:nowrap; }
.sk-kb-used.on { color:var(--sk-t2); }
.sk-kb-tail { display:none; flex:none; gap:14px; white-space:nowrap; }
.sk-kb-size, .sk-kb-time { flex:none; font-size:13px; line-height:18px; color:var(--sk-t3); text-align:right; white-space:nowrap; }
.sk-kb-size { width:64px; }
.sk-kb-time { width:72px; }
.sk-kb .sk-mi[disabled] { color:var(--sk-t4); cursor:not-allowed; }
.sk-kb .sk-mi[disabled]:hover { background:transparent; }
.sk-kb .sk-mi[disabled] .sk-i { color:var(--sk-t4); }
/* an auto-fill pass in progress: a status, not an action, so it stays readable and keeps keyboard focus */
.sk .sk-btn.sk-kb-busy, .sk .sk-btn.sk-kb-busy:hover { color:var(--sk-t3); background:transparent; cursor:default; }
.sk .sk-btn.sk-kb-busy:active { transform:none; }

/* states */
.sk .sk-kb-lead { margin:0 0 2px; color:var(--sk-t1); }
.sk .sk-kb-detail { margin:2px 0 0; font-size:12px; line-height:16px; color:var(--sk-t3); overflow-wrap:anywhere; }
.sk-kb-skel .r { display:flex; align-items:center; gap:14px; padding:14px 12px; }
.sk-kb-skel .t { flex:none; width:40px; height:40px; border-radius:8px; background:var(--sk-fill); }
.sk-kb-skel .b { flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
.sk-kb-skel i { display:block; height:12px; border-radius:6px; background:var(--sk-fill); }

/* file view */
.sk-kb .sk-dmeta { display:flex; flex-wrap:wrap; gap:0 16px; }
.sk-kb .sk-dtitle { flex:1 1 0; }   /* the title takes the room beside the tile and wraps, instead of dropping under it on a phone */
.sk-kb-doc { display:grid; grid-template-columns:minmax(0,1fr) 280px; grid-template-areas:"main side"; gap:24px; align-items:start; }
.sk-kb-doc > .sk-box { grid-area:main; min-width:0; height:clamp(420px, calc(100vh - 260px), 940px); }
.sk-kb-doc > .sk-kb-side { grid-area:side; }
.sk-kb-fld { display:flex; flex-direction:column; min-width:0; }
.sk-kb-side label.sk-lbl { font-size:13px; }
.sk .sk-kb-note { margin:0; font-size:13px; line-height:18px; color:var(--sk-t2); overflow-wrap:anywhere; }
.sk .sk-kb-help { margin:4px 0 0; font-size:12px; line-height:16px; color:var(--sk-t2); }
.sk .sk-kb-err { margin:4px 0 0; font-size:12px; line-height:16px; color:var(--sk-crit-t); overflow-wrap:anywhere; }
.sk .sk-input.sk-kb-area { height:auto; min-height:72px; padding:8px 10px; line-height:20px; font-family:inherit; font-size:13px; resize:vertical; }
.sk .sk-input.sk-mono { font-family:var(--sk-mono); font-size:12.5px; }
.sk .sk-input[disabled] { color:var(--sk-t3); cursor:not-allowed; }
.sk-kb-side .sk-cats { margin-bottom:2px; }
.sk-kb-side .sk-text { line-height:22px; }

/* dialogs */
.sk-dlg.wide { max-width:520px; }
.sk-dlg .field .hint { margin:4px 0 0; font-size:12px; line-height:16px; color:var(--sk-t2); }
.sk-dlg .field .err-msg { margin:4px 0 0; font-size:12px; line-height:16px; color:var(--sk-crit-t); }
.sk-portal textarea.sk-input { height:auto; min-height:160px; padding:8px 10px; font-family:var(--sk-mono); font-size:13px; line-height:20px; resize:vertical; }

@media (max-width: 900px) {
  .sk-kb-doc { grid-template-columns:1fr; grid-template-areas:"side" "main"; }
}
@media (max-width: 720px) {
  .sk-kb-size, .sk-kb-time { display:none; }
  .sk-kb-tail { display:inline-flex; }
  .sk-kb-sub { flex-wrap:wrap; }
  .sk-kb-file { flex:0 1 100%; }
  .sk-kb-doc { gap:16px; }
  .sk-kb-doc > .sk-box { height:clamp(320px, 70vh, 640px); }
  .sk-portal textarea.sk-input { min-height:120px; }
}

/* Reduced motion: no transforms, only quick opacity/colour changes. */
@media (prefers-reduced-motion: reduce) {
  .sk *, .sk-portal *, .modal.sk-modal * { transition:opacity .09s linear, background-color .09s linear, color .09s linear, border-color .09s linear !important; transform:none !important; }
  .sk .sk-menu, .sk-portal.scrim, .sk-dlg, .sk-toast { animation-name:sk-fade-in !important; animation-duration:.09s !important; }
  .sk .sk-menu.closing, .sk-portal.scrim.out, .sk-portal.out .sk-dlg, .sk-toast.out { animation-name:sk-fade-out !important; animation-duration:.09s !important; }
  .sk .sk-switch::after { transition:none !important; }
}