/* base.css -- reset + bare elements. Nothing here knows about a pane. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }  /* the attribute wins over any display: rule (.ps-box, .ps-row) */
html, body { height: 100%; margin: 0; }
body {
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  overflow: hidden;                 /* one window, panes scroll internally */
  display: flex;                    /* toolbar row + #app fill the window */
  flex-direction: column;
}
#app { flex: 1 1 auto; }
h1, h2, h3 { margin: 0 0 var(--space-3); line-height: var(--line-height-tight); }
p { margin: 0 0 var(--space-4); }
a { color: var(--text-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
code, pre { font-family: var(--font-mono); font-size: var(--font-size-sm); }
pre { background: var(--surface-1); padding: var(--space-4); border-radius: var(--radius-md);
      overflow: auto; }
hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-5) 0; }
table { border-collapse: collapse; }
td, th { border-bottom: 1px solid var(--border-subtle); padding: var(--space-2) var(--space-3);
         text-align: left; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-sm); }
::-webkit-scrollbar-track { background: transparent; }