/* Primitives — CSS_THEME_ARC Phase 1.
   7 shared .gb-* primitives. See docs/tads/completed/CSS_THEME_ARC_TAD.md
   "Phase 1 DESIGN" §Primitive catalog for chrome rationale + winner picks.

   Rules:
   - Descendant combinators only (Decision 15) — never `>` child combinator.
   - No !important (Decision 14) — enforced by build/check_css_primitives.sh.
   - Long-form font-family/size/weight/line-height/letter-spacing — no `font:` shorthand.
   - PRIMITIVE-level state hooks via ARIA: [aria-pressed]/[aria-selected]/
     [aria-current]/[aria-disabled]. Visibility via [hidden]; [aria-expanded]
     stays on the controlling button per WAI-ARIA. Tab-specific .is-* states
     retain class hooks (allowlist).
*/

/* -------------------------------------------------------------------------- */
/* .gb-modal — native <dialog>                                                */
/* -------------------------------------------------------------------------- */

.gb-modal {
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  color: var(--color-fg);
  box-shadow: var(--shadow-modal);
  max-width: var(--size-modal-max);
  max-height: 90vh;
  overflow: hidden;
}
.gb-modal::backdrop { background: var(--color-scrim); }

.gb-modal .gb-modal-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--type-md);
  font-weight: var(--weight-bold);
  line-height: var(--line-tight);
  letter-spacing: var(--letter-default);
}
.gb-modal .gb-modal-body {
  padding: var(--space-4);
  overflow: auto;
}
/* Mobile bottom-sheet treatment for .gb-modal lives in shell.css, not here
   — it needs !important to beat per-dialog max-width caps, which
   check_css_primitives.sh (correctly) forbids in this base-primitive file. */

/* -------------------------------------------------------------------------- */
/* .gb-button                                                                 */
/* -------------------------------------------------------------------------- */

.gb-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-fg);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  font-weight: var(--weight-regular);
  line-height: var(--line-tight);
  letter-spacing: var(--letter-default);
  transition: background var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.gb-button:hover {
  background: var(--color-bg-raised);
  border-color: var(--color-border-strong);
}
.gb-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.gb-button:active {
  transform: translateY(1px);
}
.gb-button[aria-disabled="true"],
.gb-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gb-button--accent {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.gb-button--accent:hover {
  background: var(--color-accent-tint);
  border-color: var(--color-accent-hover);
}
.gb-button--danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.gb-button--danger:hover {
  background: var(--color-danger-tint);
}
.gb-button--filled.gb-button--accent {
  background: var(--color-accent);
  color: var(--color-fg-on-accent);
}
.gb-button--filled.gb-button--accent:hover {
  background: var(--color-accent-hover);
}
.gb-button--filled.gb-button--danger {
  background: var(--color-danger);
  color: var(--color-fg-on-accent);
}
.gb-button--ghost {
  border-color: transparent;
}
.gb-button--ghost:hover {
  border-color: transparent;
  background: var(--color-bg-raised);
}
.gb-button--icon {
  width: var(--size-touch-min);
  height: var(--size-touch-min);
  padding: 0;
  justify-content: center;
  /* Fill the 44px box — the inherited --type-sm (12px) glyph reads as tiny
     inside an icon button. Applies to the glyph char / emoji; SVG icons
     size via their own width/height. */
  font-size: var(--size-icon-glyph);
  line-height: 1;
}

/* Close buttons now paint the icon-sheet `close` cell (index 0) via
   icons.css's `.gb-button--icon[aria-label="Close"]::before` — full-color,
   theme-swapped by [data-theme]. The masked-SVG × (CSS_THEME_ARC Z+1) it
   supersedes lived here; moved to icons.css with the rest of the icon set. */
.gb-button--compact {
  min-height: 28px;
  padding: var(--space-1) var(--space-2);
}

/* -------------------------------------------------------------------------- */
/* .gb-popover                                                                */
/* Visibility via [hidden] on the popover. [aria-expanded] lives on the      */
/* TOGGLE BUTTON, never on the popover itself (WAI-ARIA + verified codebase  */
/* pattern: maps/app.js:2811, header.js:353-357, shell.css:171).             */
/* -------------------------------------------------------------------------- */

.gb-popover {
  position: absolute;
  z-index: var(--z-popover);
  min-width: 180px;
  padding: var(--space-1) 0;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
}
.gb-popover[hidden] {
  display: none;
}
.gb-popover .gb-popover-item {
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--color-fg);
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  line-height: var(--line-default);
  letter-spacing: var(--letter-default);
  width: 100%;
  text-align: left;
}
.gb-popover .gb-popover-item:hover {
  background: var(--color-bg-raised);
}
.gb-popover .gb-popover-item[aria-current="true"],
.gb-popover .gb-popover-item[aria-current="page"] {
  color: var(--color-accent);
  font-weight: var(--weight-bold);
}
.gb-popover .gb-popover-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* -------------------------------------------------------------------------- */
/* .gb-toolbar                                                                */
/* -------------------------------------------------------------------------- */

.gb-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
}
.gb-toolbar--sticky {
  position: sticky;
  top: var(--shell-header-h);
  z-index: var(--z-toolbar);
}
.gb-toolbar--floating {
  position: fixed;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
}

/* -------------------------------------------------------------------------- */
/* .gb-form-row + input primitives                                            */
/* -------------------------------------------------------------------------- */

.gb-form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.gb-form-row .gb-form-label {
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  color: var(--color-fg-muted);
}

.gb-input,
.gb-select,
.gb-textarea {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-fg);
  font-family: var(--font-mono);
  font-size: var(--type-body);
  line-height: var(--line-default);
  letter-spacing: var(--letter-default);
}
.gb-input:focus-visible,
.gb-select:focus-visible,
.gb-textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.gb-textarea {
  min-height: 80px;
  resize: vertical;
}

.gb-checkbox,
.gb-radio {
  accent-color: var(--color-accent);
}

/* Color input preserves the 40×30 swatch shape established by maps. */
.gb-input[type="color"] {
  width: 40px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  background: transparent;
}

/* -------------------------------------------------------------------------- */
/* .gb-card                                                                   */
/* -------------------------------------------------------------------------- */

.gb-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-popover);
}
.gb-card--floating {
  box-shadow: var(--shadow-elevated);
}
.gb-card--rail {
  border: none;
  box-shadow: none;
}

/* -------------------------------------------------------------------------- */
/* .gb-tab                                                                    */
/* Accepts BOTH [aria-current="page"] (anchor tabs) and [aria-selected="true"]*/
/* (button tabs) per audit §14 ARIA inventory.                                */
/* -------------------------------------------------------------------------- */

.gb-tab {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-fg);
  /* Anchors get text-decoration: underline by UA default; suppress so
     the active-tab indicator (border-bottom: --color-accent) is the
     only "underline" on a tab. <button> tabs aren't affected but the
     declaration is harmless on them. */
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  font-weight: var(--weight-regular);
  line-height: var(--line-tight);
  letter-spacing: var(--letter-default);
  transition: color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}
.gb-tab:hover,
.gb-tab[aria-selected="true"],
.gb-tab[aria-current="page"] {
  color: var(--color-accent);
}
.gb-tab[aria-selected="true"],
.gb-tab[aria-current="page"] {
  border-bottom-color: var(--color-accent);
}
.gb-tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}