/* Tool log: a folding row above a tool page's footer, in the same shape as Chroma Wheel's
   "Palettes, plugin & tips" row. Shared tokens only; tool pages aren't themed.
   Selectors start with `body` so tools with broad element rules (button, svg, h3, ul) can't reshape it. */

body .tool-log {
  box-sizing:border-box; width:100%; max-width:100%; margin:var(--kb-space-3, 12px) 0 0; padding:0;
  border:1px solid var(--kb-control-border, var(--kb-rule)); border-radius:12px;
  background:var(--kb-surface); color:var(--kb-fg); font-family:var(--kb-font); text-align:left; overflow:hidden;
}
body .tool-log__summary {
  display:flex; align-items:center; gap:10px; min-height:44px; box-sizing:border-box; margin:0; padding:11px 14px;
  list-style:none; cursor:pointer; color:var(--kb-muted);
  font:500 11px/1.3 var(--kb-font); letter-spacing:.1em; text-transform:uppercase;
}
body .tool-log__summary::-webkit-details-marker { display:none; }
body .tool-log__summary::after { content:"+"; margin-left:auto; color:var(--kb-purple); font-size:16px; line-height:1; }
body .tool-log[open] > .tool-log__summary::after { content:"\2013"; }
body .tool-log__label { color:var(--kb-fg); font-weight:600; }
body .tool-log__updated::before { content:"\00B7"; margin-right:10px; color:var(--kb-muted); }
body .tool-log__summary:hover { color:var(--kb-fg); }
body .tool-log__summary:focus-visible { outline:2px solid var(--kb-focus, var(--kb-purple)); outline-offset:-2px; border-radius:12px; }

body .tool-log__body { padding:4px 14px 16px; border-top:1px solid var(--kb-control-border, var(--kb-rule)); }
body .tool-log__list { display:flex; flex-direction:column; margin:12px 0 0; padding:0; list-style:none; }
body .tool-log__entry { position:relative; margin:0; padding:0 0 16px 20px; }
body .tool-log__entry::before { content:""; position:absolute; top:4px; left:0; width:7px; height:7px; border:2px solid var(--kb-purple); border-radius:50%; background:var(--kb-surface); }
body .tool-log__entry::after { content:""; position:absolute; top:16px; bottom:2px; left:4.5px; width:1px; background:var(--kb-rule); }
body .tool-log__entry:last-child { padding-bottom:0; }
body .tool-log__entry:last-child::after { display:none; }
body .tool-log__date { display:block; color:var(--kb-purple); font:600 10px/1.3 var(--kb-font); letter-spacing:1.5px; text-transform:uppercase; }
body .tool-log__entry-title { margin:3px 0 6px; padding:0; color:var(--kb-fg); font:700 14px/1.3 var(--kb-font); letter-spacing:-.01em; text-transform:none; }
body .tool-log__notes { margin:0; padding:0 0 0 16px; list-style:disc; }
body .tool-log__notes li { margin:0 0 4px; padding:0; color:var(--kb-secondary); font:400 13px/1.55 var(--kb-font); text-transform:none; letter-spacing:0; }
body .tool-log__notes li::marker { color:var(--kb-muted); }
body .tool-log__dropped { margin-top:8px; padding:8px 10px; border:1px dashed var(--kb-rule); border-radius:var(--kb-radius); }
body .tool-log__dropped-label { margin:0 0 4px; color:var(--kb-muted); font:600 10px/1.3 var(--kb-font); letter-spacing:1.5px; text-transform:uppercase; }
body .tool-log__dropped .tool-log__notes li { color:var(--kb-muted); }

/* Below the tool screen (tools that fill the viewport): log then footer sit in .tool-log-tail after the tool,
   and the body scrolls just enough to show them.
   Their drag surfaces already set touch-action:none, so gestures don't scroll the page. */
body.has-tool-log-below { overflow-y:auto !important; overscroll-behavior-y:none; }
body .tool-log-tail { box-sizing:border-box; display:flex; flex-direction:column; padding-bottom:max(16px, env(safe-area-inset-bottom, 0px)); }
body .tool-log.tool-log--below { box-sizing:border-box; margin-top:12px; }
body .tool-log-tail > .tool-footer { margin-top:12px; }

/* Chroma Wheel: match its own panel, line and accent so the two rows read as a pair. */
body.chroma-wheel-page .tool-log { border-color:#313542; background:#1c1e26; }
body.chroma-wheel-page .tool-log__summary { color:#8a8f9e; }
body.chroma-wheel-page .tool-log__summary::after,
body.chroma-wheel-page .tool-log__date { color:var(--cw-accent, #e8b84b); }
body.chroma-wheel-page .tool-log__entry::before { border-color:var(--cw-accent, #e8b84b); background:#1c1e26; }
body.chroma-wheel-page .tool-log__body { border-top-color:#313542; }

/* Subject Scanner: the footer lives in a HUD that lets touches fall through to the canvas; the row must catch its own. */
body.scanner-page .tool-log { pointer-events:auto; }