/* components.css -- the shared component set. A pane that wants a different button is
   telling you the global button is wrong: fix it HERE, not in pane.css. */
.btn {
  font: inherit; color: var(--text-primary); background: var(--surface-2);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4); cursor: pointer;
}
.btn:hover { background: var(--state-hover); }
.btn:active { background: var(--state-active); }
.btn[disabled] { background: var(--state-disabled); color: var(--text-muted); cursor: default; }
.btn-primary { background: var(--accent); color: var(--text-inverted); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-danger { border-color: var(--danger); }

.input, .select {
  font: inherit; color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); width: 100%;
}
.checkbox { accent-color: var(--accent); }

.toolbar {
  display: flex; align-items: center; gap: var(--space-3);
  height: 34px; padding: 0 var(--space-3);
  background: var(--surface-1); border-bottom: 1px solid var(--border-subtle);
  flex: 0 0 auto;
}

#app { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr); }   /* one row; grid.js sets the columns */
#app > .pane, #app > .splitter { grid-row: 1; }   /* placed by grid-column alone: at phone width every cell shares the one area */
.pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface-0); }
.splitter { min-height: 0; cursor: col-resize; touch-action: none; background: var(--border-subtle); }
.splitter:hover, .splitter:focus-visible, .splitter.dragging { background: var(--accent); }
#app.single > .pane-off { visibility: hidden; }     /* mounted, its scroll kept, no focus or click (gotcha 84) */
.pane-switcher { display: flex; gap: var(--space-1); }
.pane-switch[aria-pressed="true"] { background: var(--state-selected); }
.pane-frame { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
.pane-gear { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2;
             opacity: 0; }
/* A pane header that owns the top-right corner leaves the ghost gear its room, or a click on its last button lands on the gear. */
.pane { --pane-gear-room: 3.25rem; }
.pane:hover .pane-gear, .pane-gear:focus { opacity: 1; }
.placeholder { padding: var(--space-6); color: var(--text-muted); font-size: var(--font-size-sm); }

.list { list-style: none; margin: 0; padding: 0; overflow: auto; }
.list-row { display: flex; flex-direction: column; gap: var(--space-1);
            padding: var(--space-3) var(--space-4); cursor: pointer;
            border-bottom: 1px solid var(--border-subtle); }
.list-row:hover { background: var(--state-hover); }
.list-row.selected { background: var(--state-selected); }
.hook { color: var(--text-muted); font-size: var(--font-size-sm);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dialog { position: fixed; inset: 0; display: grid; place-items: center;
          background: var(--scrim); }
.dialog-box { display: flex; flex-direction: column; width: min(720px, 90vw);
              max-height: 80vh; background: var(--surface-overlay);
              border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
              box-shadow: var(--shadow-md); overflow: hidden; }
.dialog-header, .dialog-footer { display: flex; align-items: center; gap: var(--space-3);
                                 padding: var(--space-4) var(--space-5); }
.dialog-header { border-bottom: 1px solid var(--border-subtle); font-weight: 600; }
.dialog-footer { border-top: 1px solid var(--border-subtle); justify-content: flex-end; }
.dialog-body { padding: var(--space-4) var(--space-5); overflow: auto; }

.popover { position: fixed; min-width: 220px; padding: var(--space-3);
           background: var(--surface-overlay); border: 1px solid var(--border-strong);
           border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.menu { position: fixed; min-width: 200px; padding: var(--space-2) 0;
        background: var(--surface-overlay); border: 1px solid var(--border-strong);
        border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.menu-item { display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-5);
             background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; }
.menu-item:hover { background: var(--state-hover); }
.menu-sep { height: 1px; margin: var(--space-2) 0; background: var(--border-subtle); }

/* The pane settings popover's own layout (panesettings.js) -- host chrome, so it
   belongs here rather than to any pane's own stylesheet. */
.ps-box { display: grid; gap: var(--space-3); }
.ps-group { color: var(--text-muted); font-size: var(--font-size-sm);
            text-transform: uppercase; letter-spacing: .06em; }
.ps-row { display: grid; grid-template-columns: 1fr auto; align-items: center;
          gap: var(--space-4); }
.ps-controls { display: flex; align-items: center; gap: var(--space-2); }

.toast { position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%);
         padding: var(--space-3) var(--space-5); background: var(--surface-overlay);
         color: var(--text-primary); border: 1px solid var(--border-strong);
         border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 10;
         display: flex; align-items: center; gap: var(--space-3); }
.toast.error { border-color: var(--danger); }

/* Capture intake (spec 11): the whole page is the drop target while a drag hovers it. */
body.capture-drop { outline: 2px dashed var(--accent); outline-offset: -2px; }