/* Controls: the reusable layer's buttons, inputs, menus and dialogs.

   DESIGN-DIRECTION section 4 lists Button, Input, Popover, Panel, Workspace
   Shell, Inspector and Resizable Pane as "Reusable UI". This file builds the
   ones that ALREADY HAVE CONSUMERS. The panel was here until nothing drew it
   any more (design-system review, 2026-10-24): the Inspector and the
   design-system page draw their own surfaces, and a control with no consumer
   is the wired-to-nothing shape this repository keeps deleting.

   TABS AND THE SEGMENTED CONTROL ARE NOT HERE, and their absence is the
   decision rather than the omission. The reference panel shows both, and nothing
   in this product navigates yet: there is one canvas, and Overview / Connections
   / Evidence / History are tabs over views that do not exist. A tab strip that
   switches nothing is the wired-to-nothing shape this repository keeps finding
   and keeps deleting. They arrive with their second view.

   These rules were three one-off blocks in `product-ui/matter.css` -- `.ask__input`,
   `.ask__submit`, `.ask__reset` and `.inspector__action` each declaring their own
   padding, border and radius. A second form would have copied them. The layout
   of the Ask row stays in `matter.css`, because where a control sits is the
   product's business and what it looks like is not. */

/* --- Button ---------------------------------------------------------------

   FIVE VARIANTS, one meaning each: primary is the action the surface exists
   for, secondary is a real alternative, tertiary is a way back, ghost is an
   affordance that should not compete at rest, destructive confirms the
   removal of the user's own work. Destructive arrived with the first thing
   that deletes (a conversation, DS-41, plan 79628 task 7): it is used only by
   the confirming button of a dialog (DS-40), never as a status colour, and
   always says "Delete". */

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-200);
  /* THE FLOOR. Padding comes from the space scale, which the density setting
     multiplies; this keeps a denser setting from shrinking the hit area. */
  min-height: var(--control-min-height);
  padding: var(--space-300) var(--space-400);
  font: inherit;
  font-size: var(--type-small);
  line-height: 1.2;
  border: var(--rule-hairline) solid transparent;
  border-radius: var(--radius-200);
  cursor: pointer;
  text-decoration: none;
}

.button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* DISABLED IS FADED, NOT HIDDEN, and the cursor says so. A control that
   disappears when unusable makes the reader wonder what they did. */
.button:disabled { opacity: 0.4; cursor: default; }

/* The pill (DS-52, owner 2026-10-24): the shape of a button on the front-door
   pages -- sign-in and the notice -- as on Apple's own pages. Inside the working
   pages buttons stay rounded rectangles: in tables, panels and toolbars a pill
   takes width and draws the eye to every small action (Apple's own rule for
   dense desktop layouts; docs/ui/research/corners-tracking-and-spring.md). */
.button--pill {
  padding-inline: var(--space-600);
  border-radius: var(--radius-full);
  corner-shape: round;
}

.button--primary {
  background: var(--accent-base);
  color: var(--text-inverse);
  border-color: var(--accent-base);
}
.button--primary:not(:disabled):hover { box-shadow: var(--elevation-subtle); }

.button--secondary {
  background: var(--surface-raised);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.button--secondary:not(:disabled):hover { border-color: var(--border-emphasis); }

.button--tertiary {
  background: none;
  color: var(--text-secondary);
  border-color: var(--border-strong);
}
.button--tertiary:not(:disabled):hover { color: var(--text-primary); }

.button--ghost {
  background: none;
  color: var(--text-muted);
  border-color: transparent;
}
.button--ghost:not(:disabled):hover { background: var(--surface-sunk); color: var(--text-primary); }

.button--destructive {
  background: var(--action-destructive);
  color: var(--action-destructive-text);
  border-color: var(--action-destructive);
}
.button--destructive:not(:disabled):hover {
  background: var(--action-destructive-hover);
  border-color: var(--action-destructive-hover);
}

/* --- Input ---------------------------------------------------------------- */

.input {
  min-height: var(--control-min-height);
  padding: var(--space-300) var(--space-400);
  font: inherit;
  font-size: var(--type-small);
  /* THE SAME LINE-HEIGHT AS `.button`, and it is not cosmetic. Body copy sets
     1.55, so an input inheriting it stood 47.3px against a 42.4px button and the
     two ends of the Ask row did not line up. Measured in the browser; the suite
     had nothing to say about it. */
  line-height: 1.2;
  color: var(--text-primary);
  background: var(--surface-raised);
  /* THE EMPHASIS BORDER, not the strong one (task 26): a text field is found by
     its boundary, which WCAG 1.4.11 asks to reach 3:1; the strong border is
     1.5:1, the emphasis border 3.2:1 (light) and 3.8:1 (dark). */
  border: var(--rule-hairline) solid var(--border-emphasis);
  border-radius: var(--radius-200);
}

.input::placeholder { color: var(--text-muted); }

.input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* --- Menu (DS-39) ---------------------------------------------------------

   An item's actions behind a "⋯" button that is always there (DS-08). The
   surface is the Preferences popover's: raised, strong border, overlay
   elevation. The menu-button keyboard pattern lives in `shared/menu.js`. A
   delete item takes the destructive colour as text; nothing else in a menu is
   coloured. The ring of a focused item sits inside it, so it never covers its
   neighbour. */

.menu {
  position: absolute;
  z-index: 20;
  min-width: 11rem;
  margin: 0;
  padding: var(--space-150);
  list-style: none;
  border: var(--rule-hairline) solid var(--border-strong);
  border-radius: var(--radius-300);
  background: var(--surface-raised);
  box-shadow: var(--elevation-overlay);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-250);
  width: 100%;
  min-height: var(--control-min-height);
  padding: 0 var(--space-300);
  border: 0;
  /* concentric with the menu: its radius minus the gap (padding and border) */
  border-radius: calc(var(--radius-300) - var(--space-150) - var(--rule-hairline));
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--type-ui);
  text-align: left;
  cursor: pointer;
}
.menu__item:hover { background: var(--surface-hover); }
.menu__item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}
.menu__item > svg { width: 16px; height: 16px; flex: none; }
.menu__item--destructive { color: var(--action-destructive); }

/* --- Dialog (DS-40) -------------------------------------------------------

   Only before what cannot be undone. The native modal `<dialog>`: the browser
   keeps focus inside and Escape closes it; the page sets the initial focus on
   the safe button and returns it to what opened the dialog. */

.dialog {
  width: min(28rem, calc(100% - 2 * var(--space-400)));
  padding: var(--space-600);
  border: var(--rule-hairline) solid var(--border-strong);
  border-radius: var(--radius-400);
  background: var(--surface-raised);
  color: var(--text-secondary);
  box-shadow: var(--elevation-overlay);
}
.dialog::backdrop { background: var(--surface-scrim); }

.dialog__title {
  margin: 0 0 var(--space-300);
  color: var(--text-primary);
  font-size: var(--type-section);
  font-weight: 700;
  line-height: 1.35;
}

.dialog__text {
  margin: 0 0 var(--space-600);
  line-height: 1.55;
}

.dialog__item {
  color: var(--text-primary);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-300);
}