/* Permissions switch, top left of the title bar (src/renderer/auto-toggle.ts): auto-approve, Auto mode, allowed destinations. */
/* The brand column is 232px: keep "BluFox OS" on one line and make room for the switch (the tagline yields). */
.brand { min-width: 0; gap: 8px; padding: 0 12px 0 16px; }
.brand-name { white-space: nowrap; }
.brand:has(.auto-toggle) .brand-sub { display: none; }
.auto-toggle { -webkit-app-region: no-drag; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 9px 4px 8px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--line); background: rgba(0,162,255,0.08); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: color .2s, border-color .2s, background .2s, box-shadow .2s; }
.auto-toggle:hover { color: var(--text); border-color: var(--line-2); }
.auto-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2, #475569); transition: background .2s, box-shadow .2s; }
.auto-caret { font-size: 9px; opacity: .7; }
.auto-toggle.on { color: #fff; border-color: rgba(0,162,255,0.6); background: rgba(0,162,255,0.16); box-shadow: 0 0 0 1px rgba(0,162,255,0.18), 0 0 18px -4px rgba(0,162,255,0.7); }
.auto-toggle.on .auto-dot { background: var(--blu); box-shadow: 0 0 8px var(--blu); animation: auto-pulse 1.6s ease-in-out infinite; }
/* Auto-approve on: everything leaves without a prompt, so the badge turns amber. */
.auto-toggle.warn.on { color: #fde68a; border-color: rgba(245,158,11,0.6); background: rgba(245,158,11,0.14); box-shadow: 0 0 0 1px rgba(245,158,11,0.18), 0 0 18px -4px rgba(245,158,11,0.7); }
.auto-toggle.warn.on .auto-dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
html.auto-on:has(.auto-toggle.warn) .topbar { box-shadow: inset 0 2px 0 var(--amber); }
@keyframes auto-pulse { 50% { opacity: .35; } }
/* A thin blue line along the top edge while Auto mode is on, visible from every screen. */
html.auto-on .topbar { box-shadow: inset 0 2px 0 var(--blu); }
.shell.collapsed .auto-label, .shell.collapsed .auto-caret { display: none; }
.shell.collapsed .auto-toggle { padding: 5px; margin-left: 0; }

.auto-pop { position: fixed; z-index: 96; width: 400px; max-height: calc(100vh - 80px); overflow-y: auto; padding: 14px; display: grid; gap: 12px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--ink-2); color: var(--text); box-shadow: 0 18px 50px rgba(0,0,0,0.45); font-size: 12.5px; }
:root[data-theme="light"] .auto-pop { box-shadow: 0 18px 50px rgba(15,23,42,0.2); }
.auto-pop small { display: block; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.auto-master { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; }
.auto-master.on { border-color: rgba(0,162,255,0.5); background: rgba(0,162,255,0.08); }
.auto-master.warn.on { border-color: rgba(245,158,11,0.55); background: rgba(245,158,11,0.09); }
.auto-master.warn.on .auto-switch { background: var(--amber); }
.auto-master input:disabled + .auto-switch { opacity: .5; }
.auto-pop-head { display: grid; gap: 2px; } .auto-pop-head b { font-family: var(--display); font-size: 15px; }
.perm-section { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.perm-grants { display: grid; gap: 6px; }
.perm-grant { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 10px; border: 1px solid var(--line); }
.perm-grant b { font-weight: 600; font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perm-grant small { display: block; }
.perm-grant > div { min-width: 0; }
.auto-master input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.auto-master b { font-family: var(--display); font-size: 15px; }
.auto-switch { width: 34px; height: 20px; border-radius: 999px; background: rgba(0, 162, 255, 0.25); position: relative; margin-top: 2px; transition: background .2s; }
.auto-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; }
.auto-master.on .auto-switch { background: var(--blu); }
.auto-master.on .auto-switch::after { transform: translateX(14px); }
.auto-master input:focus-visible + .auto-switch { outline: 2px solid var(--blu); outline-offset: 2px; }
.auto-scopes { display: grid; gap: 8px; }
.auto-scope { display: grid; gap: 5px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); }
.auto-scope.on { border-color: rgba(0,162,255,0.35); }
.auto-scope.blocked { opacity: .65; }
.auto-scope.blocked .auto-scope-head { cursor: not-allowed; }
.auto-blocked { color: var(--amber) !important; }
.auto-scope-head {display: flex; align-items: center; gap: 8px; cursor: pointer; }
.auto-scope-head b { flex: 1; font-weight: 600; }
.auto-tag { font-style: normal; font-size: 10px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.auto-tag.net { color: var(--amber); border-color: rgba(245,158,11,0.3); }
.auto-tag.local { color: var(--green, #22c55e); border-color: rgba(34,197,94,0.3); }
.auto-last { white-space: nowrap; }
.auto-meta { color: var(--text-2) !important; }
.auto-need { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: 11.5px; color: var(--text-2); }
.auto-running { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(0,162,255,0.4); background: rgba(0,162,255,0.07); }
.auto-log { display: grid; gap: 6px; }
.auto-log.empty { font-size: 11.5px; }
.auto-log-title { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.auto-entry { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.auto-entry i { width: 7px; height: 7px; border-radius: 50%; background: var(--green, #22c55e); }
.auto-entry.bad i { background: var(--amber); }
.auto-entry.undone { opacity: .55; }
.auto-entry b { font-weight: 500; font-size: 12px; }
.auto-undone { font-style: italic; }
.auto-foot { font-size: 13px; margin: 0; }
@media (prefers-reduced-motion: reduce) { .auto-toggle.on .auto-dot { animation: none; } }

/* Keyboard focus ring for every control (release audit: most controls had none). */
button:focus-visible, a:focus-visible, select:focus-visible, summary:focus-visible, [role="switch"]:focus-visible, [role="tab"]:focus-visible, [tabindex]:focus-visible, input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--blu); outline-offset: 2px;
}

/* Mode selector (src/renderer/mode-switch.ts): Live · Report · Work · Auto, right of the Permissions switch. */
.mode-switch { -webkit-app-region: no-drag; display: inline-flex; align-items: center; gap: 2px; padding: 2px; margin-left: 6px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); }
.mode-btn { padding: 3px 9px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: color .2s, background .2s, box-shadow .2s; }
.mode-btn:hover { color: var(--text); }
.mode-btn:disabled { cursor: progress; opacity: .7; }
.mode-btn.on { color: #fff; background: rgba(0,162,255,0.22); box-shadow: 0 0 0 1px rgba(0,162,255,0.45), 0 0 14px -4px rgba(0,162,255,0.7); }
.mode-btn[data-mode="report"].on { color: #e9d5ff; background: rgba(168,85,247,0.2); box-shadow: 0 0 0 1px rgba(168,85,247,0.45), 0 0 14px -4px rgba(168,85,247,0.7); }
.mode-btn[data-mode="auto"].on { color: #fde68a; background: rgba(245,158,11,0.16); box-shadow: 0 0 0 1px rgba(245,158,11,0.45), 0 0 14px -4px rgba(245,158,11,0.7); }
.mode-count { font-size: 10.5px; color: var(--muted); padding: 0 8px 0 4px; white-space: nowrap; }
.mode-count:empty { display: none; }
.mode-count.warn { color: var(--amber); }
/* A thin line along the top edge while Work (blue) or Auto (amber, shared with Auto mode) runs. */
html[data-mode="work"] .topbar { box-shadow: inset 0 2px 0 var(--blu); }
html[data-mode="auto"] .topbar { box-shadow: inset 0 2px 0 var(--amber); }
.shell.collapsed .mode-switch { display: none; }
:root[data-theme="light"] .mode-switch { background: rgba(15,23,42,0.04); }
:root[data-theme="light"] .mode-btn.on { color: var(--blu); background: rgba(0,119,204,0.12); }
:root[data-theme="light"] .mode-btn[data-mode="report"].on { color: #7e22ce; background: rgba(126,34,206,0.1); }
:root[data-theme="light"] .mode-btn[data-mode="auto"].on { color: var(--amber); background: rgba(245,158,11,0.12); }

/* Report / Work panel on the Command Center (src/renderer/mode-panel.ts). */
.mode-aside { display: inline-flex; align-items: center; gap: 10px; }
.mode-lead { margin: 0 0 10px; font-size: 12px; }
.mode-list { display: grid; gap: 6px; }
.mode-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--well-soft); }
.mode-item.approved { border-color: rgba(0,162,255,0.35); }
.mode-item.running { border-color: rgba(0,162,255,0.6); background: rgba(0,162,255,0.07); }
.mode-item.blocked { border-color: rgba(245,158,11,0.55); }
.mode-item.declined, .mode-item.skipped, .mode-item.done { opacity: .6; }
.mode-item.failed { border-color: rgba(239,68,68,0.45); }
.mode-prio { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; gap: 0 4px; align-items: center; }
.mode-prio b { grid-row: span 2; font-family: var(--display); font-size: 15px; min-width: 18px; text-align: center; color: var(--text-2); }
.mode-arrow { padding: 0 4px; line-height: 1; border: 0; background: transparent; color: var(--muted); font-size: 9px; cursor: pointer; }
.mode-arrow:hover:not(:disabled) { color: var(--text); }
.mode-arrow:disabled { opacity: .25; cursor: default; }
.mode-main { min-width: 0; display: grid; gap: 2px; }
.mode-main small { display: block; color: var(--muted); font-size: 11.5px; }
.mode-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mode-title b { font-weight: 600; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode-status { font-style: normal; font-size: 10px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.mode-status.approved, .mode-status.running { color: var(--blu); border-color: rgba(0,162,255,0.4); }
.mode-status.blocked { color: var(--amber); border-color: rgba(245,158,11,0.4); }
.mode-status.done { color: var(--green, #22c55e); border-color: rgba(34,197,94,0.3); }
.mode-status.failed { color: #f87171; border-color: rgba(239,68,68,0.35); }
.mode-risk.none, .mode-risk.low { color: var(--green, #22c55e); }
.mode-risk.medium { color: var(--amber); }
.mode-risk.high { color: #f87171; }
.mode-note { color: var(--text-2) !important; }
.mode-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mode-blockers { display: grid; gap: 8px; margin-bottom: 10px; }
.mode-blocker { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(245,158,11,0.55); background: rgba(245,158,11,0.08); }
.mode-blocker b { display: block; font-size: 12.5px; }
.mode-blocker small { display: block; color: var(--text-2); font-size: 11.5px; line-height: 1.4; margin-top: 2px; }
.mode-blocker-acts { display: flex; gap: 6px; align-items: center; }
.mode-answer { flex: 1; min-width: 0; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--well); color: var(--text); font-size: 12.5px; }
:root[data-theme="light"] .mode-item.running { background: rgba(0,119,204,0.06); }
:root[data-theme="light"] .mode-blocker { background: rgba(245,158,11,0.1); }
/* The brand column grows to fit the mode switch; the centre column gives the room (the body nav keeps its own width). */
.topbar:has(.mode-switch) { grid-template-columns: auto minmax(0, 1fr) auto; }
.shell.collapsed .topbar:has(.mode-switch) { grid-template-columns: var(--nav-w-collapsed) minmax(0, 1fr) auto; }