/* AURA app shell (UX-C P1): left menu, Home tabs, workflow list, settings layout, help.
   Loaded after the inline styles of app.html; colour tokens come from its :root. */

:root { --rail-w: 56px; --menu-w: 224px; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar { display:flex; flex-direction:row; background:var(--surface); border-right:1px solid var(--border); flex:none; height:100vh; }
.sidebar-main { width:var(--menu-w); min-width:var(--menu-w); display:flex; flex-direction:column; transition:width 0.15s, min-width 0.15s; overflow:hidden; }
.sidebar.collapsed .sidebar-main, .sidebar.settings-mode .sidebar-main { width:var(--rail-w); min-width:var(--rail-w); }

.sidebar-logo { display:flex; align-items:center; gap:6px; padding:12px 10px 12px 14px; border-bottom:1px solid var(--border); min-height:56px; }
.sidebar-logo .brand { display:flex; align-items:center; gap:8px; flex:1; min-width:0; cursor:pointer; }
.sidebar-logo .brand-mark { width:28px; height:28px; border-radius:8px; background:var(--accent2); color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; flex:none; letter-spacing:0; }
.sidebar-logo .brand-name { font-size:16px; font-weight:700; letter-spacing:1.5px; white-space:nowrap; }
.sidebar-logo .brand-name span { color:var(--accent); font-weight:400; }
.icon-btn { width:28px; height:28px; border-radius:6px; border:1px solid transparent; background:none; color:var(--text2); cursor:pointer; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; flex:none; }
.icon-btn:hover { background:var(--surface2); color:var(--text); border-color:var(--border); }
.icon-btn.plus { color:var(--accent); font-size:18px; font-weight:600; }
.sidebar.collapsed .sidebar-logo, .sidebar.settings-mode .sidebar-logo { flex-direction:column; padding:10px 0; gap:8px; }
.sidebar.collapsed .brand-name, .sidebar.settings-mode .brand-name { display:none; }

.sidebar-nav { flex:1; padding:10px 8px; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:2px; }
.sidebar-bottom { padding:8px 8px 4px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:2px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius); cursor:pointer; font-size:13px; color:var(--text2); transition:background 0.12s, color 0.12s; white-space:nowrap; position:relative; user-select:none; }
.nav-item:hover { background:var(--surface2); color:var(--text); }
.nav-item.active { background:rgba(108,138,255,0.12); color:var(--accent); font-weight:500; }
.nav-item .icon { width:20px; text-align:center; font-size:15px; flex:none; }
.nav-item .icon svg { width:18px; height:18px; vertical-align:-3px; }
.nav-item .label { flex:1; overflow:hidden; text-overflow:ellipsis; }
.nav-item .chev { font-size:11px; color:var(--text2); }
.sidebar.collapsed .nav-item, .sidebar.settings-mode .nav-item { justify-content:center; padding:9px 0; }
.sidebar.collapsed .nav-item .label, .sidebar.collapsed .nav-item .chev,
.sidebar.settings-mode .sidebar-main .nav-item .label, .sidebar.settings-mode .sidebar-main .nav-item .chev { display:none; }
/* HOME-B: Home's sections under Home; hidden on the icon rail. */
.nav-sub { display:flex; flex-direction:column; gap:1px; margin:0 0 4px 19px; padding-left:10px; border-left:1px solid var(--border); }
.nav-subitem { padding:5px 10px; border-radius:var(--radius); font-size:12.5px; color:var(--text2); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; user-select:none; }
.nav-subitem:hover { background:var(--surface2); color:var(--text); }
.nav-subitem.active { color:var(--accent); font-weight:500; background:rgba(108,138,255,0.08); }
.nav-subitem:focus-visible { outline:1px solid var(--accent); outline-offset:-1px; }
.sidebar.collapsed .nav-sub, .sidebar.settings-mode .nav-sub { display:none; }
/* Tooltip shown beside the icon rail (placed by app-shell.js, outside the sidebar's overflow). */
/* UI-LIGHT: a tooltip stays dark with light text in both themes (var(--text) would go dark-on-dark in light mode). */
.shell-tip { position:fixed; z-index:7000; background:#0b0d13; color:#e1e4ed; border:1px solid #2e3244; border-radius:6px; padding:4px 9px; font-size:11.5px; white-space:nowrap; pointer-events:none; box-shadow:0 4px 14px rgba(0,0,0,0.4); }
/* Emoji glyphs in the settings menu and popovers, toned to match the line icons. */
.settings-panel .settings-tab .icon, .popover .pop-item .icon { filter:grayscale(1); opacity:0.85; }
.settings-panel .settings-tab.active .icon, .popover .pop-item.active .icon { opacity:1; }

.sidebar-user { display:flex; align-items:center; gap:10px; padding:10px 10px 8px; }
.sidebar.collapsed .sidebar-user, .sidebar.settings-mode .sidebar-user { justify-content:center; padding:10px 0 8px; }
.sidebar.collapsed .sidebar-user .user-details, .sidebar.collapsed .sidebar-user .logout-btn,
.sidebar.settings-mode .sidebar-user .user-details, .sidebar.settings-mode .sidebar-user .logout-btn { display:none; }

/* Settings panel beside the rail. */
.settings-panel { display:none; width:var(--menu-w); min-width:var(--menu-w); flex-direction:column; border-left:1px solid var(--border); background:var(--surface); }
.sidebar.settings-mode .settings-panel { display:flex; }
.settings-back { display:flex; align-items:center; gap:8px; padding:0 14px; min-height:56px; border-bottom:1px solid var(--border); font-size:14px; font-weight:600; cursor:pointer; color:var(--text); }
.settings-back:hover { color:var(--accent); }
.settings-back .arrow { font-size:16px; }
.settings-panel .sidebar-nav { padding-top:8px; }
.settings-panel .settings-tab { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:var(--radius); cursor:pointer; font-size:13px; color:var(--text2); white-space:nowrap; }
.settings-panel .settings-tab:hover { background:var(--surface2); color:var(--text); }
.settings-panel .settings-tab.active { background:rgba(108,138,255,0.12); color:var(--accent); font-weight:500; }

/* ── Popovers ────────────────────────────────────────────────────────────── */
.popover { position:fixed; z-index:6000; min-width:200px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,0.45); padding:6px; }
.popover .pop-title { font-size:10.5px; text-transform:uppercase; letter-spacing:0.8px; color:var(--text2); padding:6px 10px 4px; }
.popover .pop-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; cursor:pointer; font-size:13px; color:var(--text); text-decoration:none; }
.popover .pop-item:hover { background:var(--surface2); }
.popover .pop-item.active { color:var(--accent); }
.popover .pop-item.danger { color:var(--red); }
.popover .pop-item .icon { width:18px; text-align:center; font-size:14px; color:var(--text2); }
.popover .pop-item .kbd { margin-left:auto; font-size:10.5px; color:var(--text2); border:1px solid var(--border); border-radius:4px; padding:1px 5px; font-family:Consolas, monospace; }
.popover .pop-sep { height:1px; background:var(--border); margin:5px 4px; }

/* ── Top bar breadcrumb ──────────────────────────────────────────────────── */
.crumbs { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; min-width:0; }
.crumbs a { color:var(--text2); text-decoration:none; font-weight:500; }
.crumbs a:hover { color:var(--accent); }
.crumbs .sep { color:var(--text2); font-weight:400; }
.crumbs .current { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:48vw; }
.crumbs .wf-pill { margin-left:4px; }

/* ── Home ─────────────────────────────────────────────────────────────────── */
.home-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.home-head h2 { font-size:20px; font-weight:700; margin-right:auto; }
.stats-strip { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.stat { display:flex; align-items:baseline; gap:6px; padding:6px 12px; border:1px solid var(--border); border-radius:20px; background:var(--surface); font-size:12px; color:var(--text2); }
.stat b { font-size:14px; color:var(--text); }
.stat.ok b { color:var(--green); } .stat.bad b { color:var(--red); } .stat.run b { color:var(--accent); }
.home-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:18px; }
.home-tab { padding:9px 16px; font-size:13px; color:var(--text2); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; display:flex; align-items:center; gap:6px; }
.home-tab:hover { color:var(--text); }
.home-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:500; }
.home-tab .count { font-size:10.5px; padding:1px 6px; border-radius:8px; background:var(--surface2); color:var(--text2); }
.home-pane { display:none; }
.home-pane.active { display:block; }
/* HOME-B: a section chosen in the menu comes to the top of Home, even when it is short. */
#page-home .home-pane.active { min-height:calc(100vh - 150px); }

/* ── Workflow list ───────────────────────────────────────────────────────── */
.wf-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.wf-toolbar .spacer { flex:1; }
.wf-search { width:260px; padding:7px 10px 7px 30px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:12.5px; }
.wf-search:focus { outline:none; border-color:var(--accent); }
.wf-search-wrap { position:relative; }
.wf-search-wrap::before { content:'⌕'; position:absolute; left:10px; top:5px; font-size:15px; color:var(--text2); }
.wf-sort { padding:7px 10px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:12.5px; }
.wf-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.wf-list { display:flex; flex-direction:column; gap:8px; }
.wf-row { display:flex; align-items:center; gap:14px; padding:12px 16px; background:var(--surface); border:1px solid var(--border); border-radius:10px; cursor:pointer; transition:border-color 0.12s; }
.wf-row:hover { border-color:var(--accent); }
.wf-main { flex:1; min-width:0; }
.wf-name { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf-name-input { font:inherit; font-size:14px; font-weight:600; padding:3px 8px; background:var(--surface2); border:1px solid var(--accent); border-radius:6px; color:var(--text); width:min(420px, 100%); }
.wf-name-input:focus { outline:none; }
.wf-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11.5px; color:var(--text2); margin-top:4px; }
.wf-private { font-size:10.5px; padding:1px 7px; border-radius:8px; background:var(--surface2); border:1px solid var(--border); color:var(--text2); white-space:nowrap; }
.wf-tag { font-size:10.5px; padding:1px 7px; border-radius:8px; background:var(--surface2); border:1px solid var(--border); color:var(--text2); }
.wf-run { font-size:11.5px; color:var(--text2); white-space:nowrap; display:flex; align-items:center; gap:6px; min-width:150px; }
.wf-run .status-dot { margin:0; }
.wf-pill { font-size:10.5px; padding:2px 9px; border-radius:10px; font-weight:600; white-space:nowrap; }
.wf-pill.on { background:rgba(64,192,87,0.15); color:var(--green); }
.wf-pill.off { background:rgba(139,144,160,0.15); color:var(--text2); }
.wf-more { width:30px; height:30px; border-radius:6px; border:1px solid transparent; background:none; color:var(--text2); cursor:pointer; font-size:18px; line-height:1; flex:none; }
.wf-more:hover { background:var(--surface2); border-color:var(--border); color:var(--text); }
.wf-empty { text-align:center; padding:56px 20px; border:1px dashed var(--border); border-radius:12px; color:var(--text2); }
.wf-empty h3 { font-size:18px; color:var(--text); margin-bottom:6px; }
.wf-empty p { font-size:13px; margin-bottom:18px; }
.wf-empty .actions { display:flex; gap:10px; justify-content:center; }

/* FW-A3: the bar under a paged list (Workflows, Executions) */
.list-pager { display:flex; align-items:center; gap:10px; margin-top:12px; font-size:12.5px; color:var(--text2); flex-wrap:wrap; }
.list-pager[hidden] { display:none; }
.list-pager .spacer { flex:1; }
.list-pager .pager-size { display:flex; align-items:center; gap:6px; }
.list-pager select { padding:4px 6px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:12.5px; }
.list-pager .btn:disabled { opacity:0.45; cursor:default; }

/* ── Settings pages ──────────────────────────────────────────────────────── */
.settings-page h2 { font-size:18px; font-weight:700; margin-bottom:4px; }
.settings-page .lead { font-size:12.5px; color:var(--text2); margin-bottom:18px; max-width:760px; line-height:1.5; }
.kv { display:grid; grid-template-columns:140px 1fr; gap:8px 14px; font-size:13px; }
.kv .k { color:var(--text2); }

/* ── Help ───────────────────────────────────────────────────────────────── */
.help-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.help-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
a.help-card:hover { border-color:var(--accent); }
.help-card .n { font-size:11px; color:var(--accent); font-weight:600; }
.help-card .t { font-size:13.5px; font-weight:600; margin:2px 0 4px; }
.help-card .d { font-size:12px; color:var(--text2); line-height:1.5; }
.help-actions { display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 18px; }

/* ── Home dashboard (CT-SLA, HOME-B) ───────────────────────────────────────
   Panels in a four-column grid (S one, M two, L four columns) beside the Ask AURA panel; the period at the top is the
   dashboard's, a panel that keeps its own says so in its head. */
.home-board { margin:0 0 18px; }
.board-wrap { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; }
@media (max-width: 1100px) { .board-wrap { grid-template-columns:minmax(0,1fr); } }
.board-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.board-heading { font-size:14px; font-weight:700; margin:0 6px 0 0; }
.board-periods { display:inline-flex; border:1px solid var(--border); border-radius:8px; background:var(--surface); padding:2px; gap:2px; }
.board-period-btn { background:none; border:none; border-radius:6px; color:var(--text2); font:inherit; font-size:12px; padding:4px 11px; cursor:pointer; white-space:nowrap; }
.board-period-btn:hover { color:var(--text); background:var(--surface2); }
.board-period-btn.on { background:var(--accent2); color:#fff; font-weight:600; }
.board-loaded { margin-left:auto; font-size:11px; color:var(--text2); }
.board-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
@media (max-width: 760px) { .board-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.board-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); min-height:120px; display:flex; flex-direction:column; min-width:0; transition:box-shadow 0.3s; }
.board-panel.size-S { grid-column:span 1; }
.board-panel.size-M { grid-column:span 2; }
.board-panel.size-L { grid-column:1 / -1; }
.board-panel.dragging { opacity:0.45; }
.board-panel.drop-before { box-shadow:-3px 0 0 var(--accent); }
.board-panel.just-added { box-shadow:0 0 0 2px var(--accent); }
.board-head { display:flex; align-items:center; gap:6px; padding:8px 10px; border-bottom:1px solid var(--border); cursor:grab; user-select:none; }
.board-grip { color:var(--text2); font-size:11px; letter-spacing:-2px; }
.board-title { font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.board-period { font-size:11px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.board-own { color:var(--accent); border:1px solid rgba(108,138,255,0.45); border-radius:8px; padding:0 6px; }
.board-icon { background:none; border:none; color:var(--text2); cursor:pointer; font-size:12px; padding:2px 4px; }
.board-icon:hover { color:var(--text); }
.board-body { padding:10px 12px; flex:1; min-width:0; }
.board-value { font-size:28px; font-weight:700; line-height:1.1; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.board-delta { font-size:11.5px; font-weight:600; color:var(--text2); }
.board-delta.good { color:var(--green); } .board-delta.bad { color:var(--red); } .board-delta.flat { font-weight:400; }
.board-sub, .board-empty { font-size:11.5px; color:var(--text2); margin-top:4px; }
.board-row { display:flex; align-items:center; gap:8px; font-size:12px; padding:3px 0; flex-wrap:wrap; }
.board-link { width:100%; background:none; border:none; border-top:1px solid var(--border); color:var(--text); font:inherit; font-size:12px; text-align:left; padding:5px 2px; cursor:pointer; }
.board-link:first-child { border-top:none; }
.board-link:hover { background:var(--surface2); }
.board-link:hover .board-name { color:var(--accent); }
.board-fail .board-name::before { content:'● '; color:var(--red); }
.board-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.board-num { color:var(--text2); font-size:11.5px; white-space:nowrap; }
.board-num.bad { color:var(--red); }
.board-bar-cell { flex:2; height:6px; background:var(--surface2); border-radius:3px; overflow:hidden; }
.board-bar-cell span { display:block; height:100%; background:var(--accent); }
.board-error { flex-basis:100%; font-size:11px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.board-plot { display:flex; gap:6px; height:156px; }
.board-yaxis { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; min-width:18px; padding-bottom:16px; font-size:10px; color:var(--text2); line-height:1; }
.board-cols { flex:1; min-width:0; display:flex; gap:2px; position:relative; }
.board-cols::before { content:''; position:absolute; left:0; right:0; top:0; bottom:16px; pointer-events:none;
  background:linear-gradient(var(--border), var(--border)) top / 100% 1px no-repeat, linear-gradient(var(--border), var(--border)) center / 100% 1px no-repeat;
  border-bottom:1px solid var(--border); opacity:0.7; }
.board-col { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; }
.board-stack { flex:1; width:100%; max-width:34px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; }
.board-stack span { display:block; width:100%; }
.board-stack span.ok { background:var(--green); opacity:0.85; }
.board-stack span.bad { background:var(--red); }
.board-stack span:first-child, .board-stack span.bad[style^="height:0%"] + span.ok { border-radius:2px 2px 0 0; }
.board-col:hover .board-stack { filter:brightness(1.15); }
.board-col:hover { background:rgba(108,138,255,0.06); border-radius:4px; }
.board-col-label { height:16px; line-height:16px; font-size:10px; color:var(--text2); white-space:nowrap; overflow:visible; }
.board-legend { display:flex; gap:14px; font-size:11px; color:var(--text2); margin-top:2px; }
.board-legend span { display:inline-flex; align-items:center; gap:5px; }
.board-legend i { display:inline-block; width:9px; height:9px; border-radius:2px; }
.board-legend i.ok { background:var(--green); opacity:0.8; } .board-legend i.bad { background:var(--red); }

/* The dashboard's windows: a head with the panel's symbol, a body, buttons at the foot. */
.bm { background:var(--surface); border:1px solid var(--border); border-radius:12px; width:600px; max-width:94vw; max-height:88vh; display:flex; flex-direction:column; box-shadow:0 18px 48px rgba(0,0,0,0.45); }
.bm.wide { width:720px; }
.bm-head { display:flex; align-items:flex-start; gap:12px; padding:16px 18px 12px; border-bottom:1px solid var(--border); }
.bm-titles { flex:1; min-width:0; }
.bm-titles h3 { margin:0; font-size:15px; }
.bm-titles p { margin:3px 0 0; font-size:12px; color:var(--text2); line-height:1.45; }
.bm-close { background:none; border:none; color:var(--text2); font-size:20px; line-height:1; cursor:pointer; padding:0 2px; }
.bm-close:hover { color:var(--text); }
.bm-glyph { width:32px; height:32px; flex:none; border-radius:8px; background:rgba(108,138,255,0.16); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; }
.bm-body { padding:14px 18px; overflow-y:auto; }
.bm-foot { display:flex; align-items:center; gap:8px; padding:12px 18px; border-top:1px solid var(--border); }
.bm-spacer { flex:1; }
.bm-remove { background:none; border:none; color:var(--red); font:inherit; font-size:12px; cursor:pointer; padding:4px 2px; }
.bm-remove:hover { text-decoration:underline; }
.bm-preview { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; padding:12px; margin-bottom:14px; border-radius:10px; background:var(--bg); border:1px dashed var(--border); }
.bm-preview .board-panel { min-height:110px; }
.bm-preview .board-head { cursor:default; }
.bm-preview .board-link, .bm-preview [data-open-workflow] { pointer-events:none; }
.bm-form { display:grid; gap:14px; }
.bm-field { display:grid; gap:6px; min-width:0; }
.bm-label { font-size:11.5px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:0.04em; }
.bm-field .form-input { max-width:none; }
.bm-help { font-size:11.5px; color:var(--text2); }
.bm-seg { display:flex; flex-wrap:wrap; gap:6px; }
.bm-seg button { background:var(--surface2); border:1px solid var(--border); border-radius:8px; color:var(--text2); font:inherit; font-size:12px; padding:6px 12px; cursor:pointer; }
.bm-seg button small { font-size:11px; opacity:0.8; margin-left:2px; }
.bm-seg button:hover { color:var(--text); border-color:var(--accent); }
.bm-seg button.on { background:rgba(108,138,255,0.16); border-color:var(--accent); color:var(--text); font-weight:600; }
.bm-sizes { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.bm-size { display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--surface2); border:1px solid var(--border); border-radius:8px; color:var(--text2); font:inherit; font-size:12px; padding:9px 6px; cursor:pointer; }
.bm-size:hover { border-color:var(--accent); color:var(--text); }
.bm-size.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; color:var(--text); font-weight:600; }
.bm-size-pic { display:grid; grid-template-columns:repeat(4, 12px); gap:3px; }
.bm-size-pic i { height:12px; border-radius:2px; border:1px solid var(--border); }
.bm-size-pic i.fill { background:var(--accent); border-color:var(--accent); }
.board-catalog { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
@media (max-width: 640px) { .board-catalog { grid-template-columns:minmax(0,1fr); } }
.board-kind { display:flex; align-items:flex-start; gap:10px; text-align:left; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; cursor:pointer; color:var(--text); font:inherit; }
.board-kind:hover { border-color:var(--accent); background:rgba(108,138,255,0.08); }
.board-kind-text { display:grid; gap:3px; min-width:0; }
.board-kind-text strong { font-size:13px; }
.board-kind-text span { font-size:11.5px; color:var(--text2); line-height:1.4; }
.ask-panel { display:flex; flex-direction:column; gap:8px; }
.ask-lead { font-size:12px; color:var(--text2); margin:0; line-height:1.5; }
.ask-log { max-height:420px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.ask-q { font-size:12.5px; font-weight:600; }
.ask-a { font-size:12.5px; line-height:1.5; }
.ask-wait { color:var(--text2); }
.ask-facts { margin:4px 0 0 16px; padding:0; font-size:11.5px; color:var(--text2); }
.ask-meta { font-size:10.5px; color:var(--text2); margin-top:4px; }
.ask-examples, .ask-suggest { display:flex; flex-wrap:wrap; gap:4px; }
.ask-example { background:var(--surface2); border:1px solid var(--border); border-radius:12px; color:var(--text2); font-size:11px; padding:3px 8px; cursor:pointer; }
.ask-example:hover { color:var(--text); border-color:var(--accent); }
.ask-form { display:flex; gap:6px; }
.ask-form .form-input { max-width:none; flex:1; }