/* ─────────────────────────────────────────────────────────────
   Capraseo — centralized theme layer (foundational refinement)

   This is the ONE place the app's calm/premium design language lives
   as shared tokens + primitive overrides. It is loaded LAST on every
   page (after main.css → page sheets), so its plain-selector rules win
   the cascade over the base primitives without editing each page sheet.

   Scope of this pass (deliberately foundational + low-risk):
     • a radius scale (cards / controls / inputs / chips)
     • rounder cards lifted by a deeper, softer shadow
     • rounded buttons
     • a slightly larger header type scale
   Cards keep their current surface — the fuller dark-card restyle is a
   later, page-by-page pass (see css/agents-refined.css for the target).

   ► To revert the whole site: remove the single <link> to this file
     from the pages (they fall back to the base primitives).
   ► To retune globally: edit the token block below — every rule reads
     from it, so the design scale is a one-number change here.

   Per-page overrides that need to win over this layer simply use a
   higher-specificity selector (e.g. body[data-page="agents"] .card),
   exactly as css/agents-refined.css already does.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Uniform radius scale */
  --r-card:    20px;   /* cards / large surfaces */
  --r-control: 13px;   /* buttons */
  --r-input:   13px;   /* text inputs, selects */
  --r-chip:    12px;   /* small tiles / chips */

  /* Elevation: depth through soft shadow, not hard borders */
  --shadow-card:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 20px 48px -28px rgba(0, 0, 0, 0.85);
}

/* Cards — rounder corners + a deeper, softer lift. Surface unchanged.
   Bespoke card variants (.card.xyz, page-scoped rules) keep winning via
   their higher specificity; this only restyles the plain primitive. */
.card {
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

/* Buttons — softer, uniform corners across the app. */
.btn { border-radius: var(--r-control); }
.btn.btn-sm { border-radius: 11px; }

/* Header type — a touch larger, giving titles more presence. */
.stage-title { font-size: 24px; letter-spacing: -0.025em; }
.stage-subtitle { font-size: 14px; line-height: 1.6; }

/* ── Phone guardrails ─────────────────────────────────────────
   Dropdown popovers carry desktop min-widths (220–404px) and stay
   rendered while closed (opacity 0), so anything wider than the
   viewport silently gives the whole app a sideways pan. Cap them,
   and clip the stage as a safety net — dedicated inner scrollers
   (.tbl-scroll, .cg-table-wrap, .agents-tabs) are unaffected. */
@media (max-width: 640px) {
  /* Dropdown menus become bottom sheets — anchored popovers either
     overflow the viewport or get clipped by the stage guardrail below.
     position:fixed is hijacked by transformed/filtered ancestors, so
     also drop the entrance-animation leftover on dropdowns and the
     composer glass blur on phones. */
  /* A finished transform animation (`.anim`'s rise, fill:forwards) keeps
     the element a containing block for fixed descendants in Chromium —
     even against !important overrides. Skip the entrance animation on
     dropdowns entirely and pin its end state (.anim starts at opacity 0,
     so opacity must be forced visible alongside). */
  .dropdown {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .composer, .chat-active .composer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .dropdown .menu {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 12px !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    max-height: 55vh;
    overflow-y: auto;
    z-index: 120;
  }
  .stage { overflow-x: hidden; }
}