/* ═══════════════════════════════════════════
   style.css — tools.karlevid.com/log
   All rules compact — one selector per line
   Layout: 52px topbar, flex main, 44px footer
   ═══════════════════════════════════════════ */

@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 800; font-display:swap; src:url(fonts/JetBrainsMono.woff2) format('woff2'); }

/* ── Log page: override main padding for full-height tool ── */
.log-page { padding:0 !important; }
.log-layout { display:flex; flex:1; min-height:0; gap:var(--sp-xl); padding:var(--sp-xl); }

/* ── Log column ── */
.log-column { display:flex; flex-direction:column; flex:1; min-width:0; gap:8px; }
.log-label { display:flex; align-items:center; justify-content:space-between; width:100%; font-family:var(--font-sans); font-size:0.6875rem; letter-spacing:0.08em; color:var(--text-secondary); text-transform:uppercase; }
.log-label .log-label-dim { color:var(--text-muted); }
.log-actions { display:flex; gap:10px; font-family:var(--font-sans); font-size:0.6875rem; letter-spacing:0.05em; }
.log-action-sep { opacity:0.25; }
.action-link { cursor:pointer; color:var(--text-secondary); transition:color 0.15s; }
.action-link:hover { color:var(--text-primary); }
#load-backlog-trigger { color:var(--text-secondary) !important; transition:color 0.15s; }
#load-backlog-trigger:hover { color:var(--text-primary) !important; }

/* ── Mode bar ── */
.mode-bar { flex:0 0 auto; font-family:var(--font-mono); font-size:0.6875rem; line-height:1; color:var(--text-muted); }
.mode-bar .mode-active { color:var(--text-primary); }
.mode-bar .mode-inactive { opacity:0.35; cursor:pointer; transition:opacity 0.15s; }
.mode-bar .mode-inactive:hover { opacity:0.7; }

/* ── Log container (textarea wrapper) ── */
.rectangle-10b9963c1d33 { position:relative; flex:1; min-height:0; background:var(--bg-page); border:1px solid var(--border-subtle); overflow:hidden; }

/* ── Textarea ── */
.log-textarea { position:absolute; left:0; top:0; width:100%; height:100%; background:transparent; border:none; outline:none; resize:none; color:var(--text-primary); font-family:'JetBrains Mono',monospace; font-size:13px; line-height:1.6; padding:20px; overflow-y:auto; }
.log-textarea::placeholder { color:var(--text-muted); opacity:0.5; }
.log-textarea::-webkit-scrollbar { width:4px; }
.log-textarea::-webkit-scrollbar-track { background:transparent; }
.log-textarea::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; }
.log-textarea::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

/* ── System metrics widget ── */
.sys-widget { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex:0 0 auto; padding:6px 2px 2px; font-family:var(--font-sans); font-size:0.6875rem; line-height:1; }
.sys-widget-label { color:var(--text-muted); letter-spacing:1px; }
.sys-widget-value { color:var(--text-muted); }
.sys-widget-dot { margin-right:3px; }
.status-outage { color:#ef4444 !important; }
.sys-status-link { color:inherit; text-decoration:none; }
.sys-status-link:hover { text-decoration:underline; }

/* ── Changelog column ── */
.changelog-column { display:flex; flex-direction:column; flex:0 0 auto; width:320px; min-width:0; gap:8px; border-left:1px solid var(--border-subtle); padding-left:var(--sp-xl); }
.changelog-label { flex:0 0 auto; font-family:var(--font-sans); font-size:0.6875rem; letter-spacing:0.08em; color:var(--text-secondary); text-transform:uppercase; }
.changelog-container { position:relative; flex:1; min-height:0; background:var(--bg-page); border:1px dashed var(--border-subtle); overflow:hidden; }
.changelog-textarea { position:absolute; left:0; top:0; width:100%; height:100%; background:var(--bg-page); border:none; outline:none; resize:none; color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-size:12px; line-height:1.5; padding:20px; overflow-y:auto; cursor:default; }
.changelog-textarea::-webkit-scrollbar { width:4px; }
.changelog-textarea::-webkit-scrollbar-track { background:transparent; }
.changelog-textarea::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; }

/* ── Sidebar ── */
.sidebar { flex:0 0 auto; width:254px; display:flex; flex-direction:column; }
.sidebar-inner { display:flex; flex-direction:column; width:100%; height:100%; padding:0; }

/* ── Calendar ── */
.sidebar-calendar { flex:0 0 auto; display:flex; justify-content:center; padding:0; }
.m-a-y-2026-10d60a19102a .root-0-paragraph-set-0 { display:flex; flex-direction:column; }
.calendar-grid-wrap { width:100%; max-width:260px; margin:0 auto; font-family:var(--font-sans); }
.calendar-header { font-size:0.75rem; letter-spacing:0.12em; color:var(--text-primary); font-weight:500; display:flex; align-items:center; justify-content:space-between; width:100%; margin-bottom:0.75rem; }
.calendar-nav { display:inline-flex; gap:0.75rem; align-items:center; user-select:none; }
.calendar-nav span { transition:opacity 0.15s; cursor:pointer; opacity:0.5; }
.calendar-nav span:hover { opacity:1; }
.calendar-weekdays { width:100%; display:grid; grid-template-columns:repeat(7,1fr); justify-items:center; text-align:center; font-size:0.625rem; letter-spacing:0.1em; color:var(--text-muted); margin-bottom:0.5rem; }
.calendar-days-grid { width:100%; display:grid; grid-template-columns:repeat(7,1fr); justify-items:center; }
.calendar-cell { width:32px; height:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; border-radius:4px; font-size:0.75rem; color:var(--text-muted); position:relative; transition:background 0.1s; }
.calendar-cell:hover { background:var(--bg-hover); }
.calendar-cell-dim { color:var(--border-strong); cursor:default; }
.calendar-cell-dim:hover { background:transparent; }
.calendar-cell-today { color:var(--text-primary); font-weight:600; }
.calendar-cell-active { color:var(--text-secondary); }
.calendar-cell-selected { background:var(--bg-hover); }
.calendar-cell-selected .day-number { color:var(--text-primary) !important; font-weight:700 !important; }
.data-dot { position:absolute; bottom:2px; width:4px; height:4px; background:var(--text-muted); border-radius:50%; }
.calendar-cell-today .data-dot { background:var(--text-primary); }

/* ── Sidebar: Brief ── */
.sidebar-brief { flex:0 0 auto; padding:0; font-family:var(--font-sans); }
.brief-header { font-family:var(--font-sans); font-size:0.6875rem; letter-spacing:0.12em; line-height:1.4; color:var(--text-secondary); text-transform:uppercase; margin-bottom:4px; }
.brief-check { font-family:var(--font-sans); font-size:0.75rem; line-height:1.4; color:var(--text-muted); cursor:pointer; user-select:none; transition:color 0.15s; }
.brief-check:hover { color:var(--text-primary); }
.brief-check.brief-done { color:var(--text-muted); cursor:default; pointer-events:none; opacity:0.6; }

/* ── Sidebar: Divider ── */
.sidebar-divider { width:100%; height:1px; margin:20px 0; background:var(--border-subtle); flex-shrink:0; }

/* ── Sidebar: Tags ── */
.sidebar-tags { flex:0 0 auto; padding:0; font-family:var(--font-sans); }
.sidebar-tags-label { font-size:0.6875rem; letter-spacing:0.12em; color:var(--text-secondary); text-transform:uppercase; margin-bottom:4px; }
.sidebar-tags-list { font-size:0.75rem; color:var(--text-muted); line-height:1.5; }

/* ── Sidebar: Tasks ── */
.sidebar-tasks { flex:1; overflow-y:auto; min-height:0; padding:0; }
.sidebar-tasks::-webkit-scrollbar { width:4px; }
.sidebar-tasks::-webkit-scrollbar-track { background:transparent; }
.sidebar-tasks::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; }
.tasks-10d60a18c6c6 .root-0-paragraph-set-0 { display:flex; flex-direction:column; }
.tasks-10d60a18c6c6 [class*="paragraph-"] { font-size:0; line-height:1.4; margin:0; text-align:left; }
.tasks-10d60a18c6c6 [class*="text-"] { color:var(--text-secondary); font-size:0.75rem; font-family:var(--font-sans); }
.tasks-10d60a18c6c6 .root-0-paragraph-set-0-paragraph-0-text-0 { text-transform:uppercase; letter-spacing:0.12em; font-weight:600; color:var(--text-secondary); }

/* ── Animations ── */
@keyframes pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }
@keyframes recPulse { 0%{transform:scale(1);box-shadow:0 0 0 0 rgba(16,185,129,0.6)} 70%{transform:scale(1.04);box-shadow:0 0 0 12px rgba(16,185,129,0)} 100%{transform:scale(1);box-shadow:0 0 0 0 rgba(16,185,129,0)} }
.processing-state { animation:pulse 1s infinite; pointer-events:none; opacity:0.6; }
.agent-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--text-muted); transition:background 0.3s; margin-left:5px; vertical-align:middle; position:relative; top:-1px; }
.agent-dot.connected { background:#10b981; animation:recPulse 1.8s infinite; }
.agent-dot.error { background:#ef4444; }