/* ==========================================================================
   AGIM STUDIO v3.0 — UNIFIED UI COMPONENTS, DOUBLE-BEZEL BOUNDARY CARDS & NAV
   Enforces Plus Jakarta Sans, 14px/10px Concentric G2 Radii, Universal 56px Bar,
   9-Dot Squircle App Switcher, Cmd+K Palette & 01A Pro <-> 01B Cartoon Bridge
   ========================================================================== */

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background-color: var(--bg-canvas, #F4F1EA) !important;
  color: var(--ink-body, #1E2924) !important;
  transition: background-color 0.18s ease, color 0.18s ease;
}

/* 1. SIGNATURE DOUBLE-BEZEL BOUNDARY CARD & SHARED BOX CONTAINERS */
.agim-boundary-card {
  background: var(--bg-card, #FAF8F3);
  border: 1.5px solid var(--border-color, #CFC8B8);
  border-radius: 14px;
  padding: 6px;
  box-shadow: var(--card-shadow, 0 2px 8px rgba(22, 56, 44, 0.06));
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.agim-boundary-header {
  min-height: 32px;
  min-block-size: 32px;
  height: auto;
  block-size: auto;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted, #5A6861);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.agim-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--active-app-accent, #2E7D32);
  margin-right: 7px;
}

.agim-boundary-well {
  background: var(--bg-well, #EFECE4);
  border-radius: 10px;
  border: 1px solid rgba(22, 56, 44, 0.08);
  padding: 20px;
}

html[data-skin="night"] .agim-boundary-well,
html[data-skin="pine-dark"] .agim-boundary-well,
html[data-skin="tactical"] .agim-boundary-well,
html[data-skin="sage-dusk"] .agim-boundary-well {
  border-color: rgba(244, 241, 234, 0.08);
}

/* 2. TWO-REGISTER BRIDGE: 01A PROFESSIONAL vs 01B CARTOON / ORIGINALS */
html[data-register="cartoon"] .agim-boundary-card,
html[data-register="cartoon"] .card,
html[data-register="cartoon"] .bento-card,
html[data-register="cartoon"] .panel,
html[data-register="cartoon"] .module-card,
html[data-register="cartoon"] .lesson-card,
html[data-register="cartoon"] .tier-card,
html[data-register="cartoon"] .stat-card {
  border: 2.5px solid #111111 !important;
  border-radius: 14px !important;
  box-shadow: 4px 4px 0px #16382C !important;
}

html[data-skin="night"][data-register="cartoon"] .agim-boundary-card,
html[data-skin="pine-dark"][data-register="cartoon"] .agim-boundary-card,
html[data-skin="night"][data-register="cartoon"] .card,
html[data-skin="pine-dark"][data-register="cartoon"] .card {
  border: 2.5px solid #F4F1EA !important;
  box-shadow: 4px 4px 0px #34D399 !important;
}

/* 3. UNIVERSAL 44PX SLEEK STICKY ECOSYSTEM NAVBAR (#agim-v3-universal-bar) */
#agim-v3-universal-bar {
  position: sticky;
  top: 0;
  z-index: 9990;
  height: 44px;
  width: 100%;
  background: var(--bg-card, #FAF8F3);
  border-bottom: 1.5px solid var(--border-color, #CFC8B8);
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  box-shadow: 0 2px 8px rgba(22, 56, 44, 0.05);
}

html[data-register="cartoon"] #agim-v3-universal-bar {
  border-bottom: 2.5px solid #111111;
}

.agim-v3-nav-left,
.agim-v3-nav-center,
.agim-v3-nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

#agim-v3-waffle-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1.5px solid var(--border-color, #CFC8B8);
  background: var(--bg-well, #EFECE4);
  display: grid;
  grid-template-columns: repeat(3, 3.5px);
  grid-template-rows: repeat(3, 3.5px);
  gap: 2.5px;
  place-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
#agim-v3-waffle-btn:hover {
  border-color: var(--ink-primary, #16382C);
  background: var(--bg-card, #FAF8F3);
}
.agim-v3-waffle-dot {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--ink-primary, #16382C);
}

.agim-v3-brand-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink-primary, #16382C);
}

#agim-v3-logo-tile {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #16382C;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(244, 241, 234, 0.2);
  flex-shrink: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Yellow-ish Development Outline around the Agim "A" Logo on Unreleased Apps */
#agim-v3-logo-tile.agim-dev-logo-outline,
html[data-dev-app="true"] #agim-v3-logo-tile,
body.is-agim-dev-app #agim-v3-logo-tile {
  border: 2px solid #FACC15 !important;
  outline: 1.5px solid rgba(250, 204, 21, 0.55);
  outline-offset: 1px;
  box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.28), 0 0 10px rgba(245, 158, 11, 0.35);
}

#agim-v3-logo-tile.agim-dev-logo-outline svg path,
html[data-dev-app="true"] #agim-v3-logo-tile svg path,
body.is-agim-dev-app #agim-v3-logo-tile svg path {
  stroke: #FACC15;
  stroke-width: 56px;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}

.agim-v3-wordmark {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink-primary, #16382C);
}

#agim-v3-app-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-well, #EFECE4);
  color: var(--ink-primary, #111815);
  border: 1.5px solid var(--active-app-accent, #2E7D32);
  text-transform: lowercase;
}

#agim-v3-cmd-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  height: 28px;
  background: var(--bg-well, #EFECE4);
  border: 1.5px solid var(--border-color, #CFC8B8);
  padding: 4px 10px;
  border-radius: 7px;
  color: var(--ink-muted, #5A6861);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
#agim-v3-cmd-btn:hover {
  border-color: var(--ink-primary, #16382C);
  color: var(--ink-primary, #16382C);
}

.agim-v3-kbd {
  background: var(--bg-card, #FAF8F3);
  border: 1px solid var(--border-color, #CFC8B8);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 10px;
  color: var(--ink-primary, #16382C);
}

.agim-v3-pill-group {
  display: flex;
  background: var(--bg-well, #EFECE4);
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--border-color, #CFC8B8);
  gap: 2px;
}

.agim-v3-seg-btn {
  border: none;
  background: transparent;
  color: var(--ink-muted, #5A6861);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.agim-v3-seg-btn.active {
  background: #16382C;
  color: #F4F1EA;
}
html[data-skin="night"] .agim-v3-seg-btn.active,
html[data-skin="pine-dark"] .agim-v3-seg-btn.active,
html[data-skin="tactical"] .agim-v3-seg-btn.active,
html[data-skin="sage-dusk"] .agim-v3-seg-btn.active {
  background: #F4F1EA;
  color: #16382C;
}

/* 4. 9-DOT WAFFLE APP SWITCHER POPOVER (#agim-v3-waffle-popover) */
#agim-v3-waffle-popover {
  position: fixed;
  top: 50px;
  left: 14px;
  z-index: 9995;
  width: 356px;
  background: var(--bg-card, #FAF8F3);
  border: 1.5px solid var(--ink-primary, #16382C);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 14px 36px rgba(10, 24, 18, 0.25);
  display: none;
}
#agim-v3-waffle-popover.open {
  display: block;
}
.agim-v3-waffle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: var(--bg-well, #EFECE4);
  border-radius: 10px;
  padding: 12px;
}
.agim-v3-app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  padding: 6px 4px;
  border-radius: 8px;
  color: var(--ink-primary, #16382C);
  transition: background 0.1s ease, transform 0.1s ease;
}
.agim-v3-app-item:hover {
  background: rgba(22, 56, 44, 0.10);
  transform: translateY(-2px);
}
.agim-v3-app-item img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.agim-v3-app-item span {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* 5. CMD+K COMMAND PALETTE MODAL (#agim-v3-cmd-modal) */
#agim-v3-cmd-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(14, 26, 20, 0.55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}
#agim-v3-cmd-backdrop.open {
  display: flex;
}
#agim-v3-cmd-modal {
  width: 92%;
  max-width: 560px;
  background: var(--bg-card, #FAF8F3);
  border: 2px solid var(--ink-primary, #16382C);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
#agim-v3-cmd-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-color, #CFC8B8);
  border-radius: 9px;
  background: var(--bg-well, #EFECE4);
  color: var(--ink-primary, #16382C);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  margin-bottom: 6px;
}
.agim-v3-cmd-list {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px;
}
.agim-v3-cmd-row {
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: var(--ink-body, #1E2924);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.agim-v3-cmd-row:hover {
  background: #16382C;
  color: #F4F1EA;
}

@media (max-width: 1024px) {
  #agim-v3-universal-bar {
    padding-inline: max(10px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-right, 0px));
    gap: 6px;
  }
  .agim-v3-nav-left,
  .agim-v3-nav-center {
    flex-shrink: 0;
  }
  #agim-v3-cmd-btn span:first-child {
    display: none;
  }
  #agim-v3-cmd-btn {
    padding: 4px 8px;
  }
  .agim-v3-wordmark {
    font-size: 14px;
  }
  .agim-v3-nav-right {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    max-inline-size: 62vw;
    flex-wrap: nowrap;
  }
  .agim-v3-nav-right > * {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .agim-v3-nav-right::-webkit-scrollbar {
    display: none;
  }
  .agim-v3-seg-btn {
    padding: 3px 6px;
    font-size: 10px;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .agim-v3-wordmark,
  #agim-v3-identity-label {
    display: none;
  }
  .agim-v3-nav-right {
    max-inline-size: 58vw;
  }
}

/* 6. PRE-LAUNCH DEVELOPMENT INDICATOR (YELLOW-OUTLINED AGIM "A") & UNIVERSAL DIRECTOR SSO FRONT-DOOR GATE */
body.agim-dev-locked {
  overflow: hidden !important;
  height: 100vh !important;
}

/* Legacy top red bar is permanently hidden so it never consumes vertical space; dev status is shown by the yellow-outlined Agim A */
#agim-dev-red-bar {
  display: none !important;
}

.agim-dev-sso-pill {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FEF08A;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}

.agim-dev-lock-btn {
  background: #FFFFFF;
  color: #991B1B;
  border: none;
  border-radius: 6px;
  padding: 3px 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.agim-dev-lock-btn:hover {
  opacity: 0.9;
}

#agim-dev-lock-gate {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: radial-gradient(circle at 50% 25%, #162820 0%, #0B1510 100%);
  color: #F4F1EA;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

.agim-dev-gate-center {
  margin: auto;
  width: 92%;
  max-width: 470px;
  background: #162820;
  border: 1.5px solid #DC2626;
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(220, 38, 38, 0.25);
}

.agim-dev-gate-well {
  background: #101E17;
  border-radius: 10px;
  border: 1px solid rgba(244, 241, 234, 0.1);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}

.agim-dev-gate-badge {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(220, 38, 38, 0.18);
  border: 1px solid #EF4444;
  color: #FCA5A5;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.agim-dev-gate-input {
  width: 100%;
  height: 44px;
  border-radius: 9px;
  border: 1.5px solid #325243;
  background: #162820;
  color: #F4F1EA;
  padding: 0 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  outline: none;
}
.agim-dev-gate-input:focus {
  border-color: #34D399;
}

.agim-dev-gate-submit {
  width: 100%;
  height: 44px;
  border-radius: 9px;
  border: none;
  background: #2E7D32;
  color: #FFFFFF;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease;
}
.agim-dev-gate-submit:hover {
  background: #1B5E20;
}

/* ==========================================================================
   7. CANONICAL v3.1 STRUCTURAL LAYOUT PRIMITIVES ("CENTER THE DIV" ENGINE)
   Follows Modern Web Baseline: logical properties, safe alignment, dvh,
   container queries, CSS subgrid, and progressive flex-wrap: balance.
   ========================================================================== */

/* 7.1 .agim-shell — Viewport-Safe App Frame */
.agim-shell {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--shell-max-width, 1360px);
  min-block-size: calc(100dvh - var(--nav-height, 44px));
  margin-inline: auto;
  padding-inline: var(--shell-pad-inline, clamp(1rem, 3vw, 2rem));
  padding-block: var(--shell-pad-block, clamp(1.25rem, 2.5vw, 2.25rem));
}

/* 7.2 .agim-center — Mathematical Two-Axis & Intrinsic Centering ("Center the Div") */
.agim-center {
  box-sizing: border-box;
  display: grid;
  place-items: safe center;
  place-content: safe center;
  margin-inline: auto;
  inline-size: 100%;
  text-align: center;
  gap: var(--space-3, 0.75rem);
}

.agim-center--prose {
  max-inline-size: var(--measure-prose, 65ch);
}

.agim-center--narrow {
  max-inline-size: var(--measure-narrow, 48ch);
}

.agim-center--fill {
  min-block-size: clamp(220px, 40dvh, 480px);
}

/* 7.3 .agim-stack — 1D Vertical Rhythm (Zero Ad-Hoc Margin Hacks) */
.agim-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--stack-gap, var(--space-4, 1rem));
}

.agim-stack > * {
  margin-block: 0;
  min-inline-size: 0;
}

.agim-stack--xs { --stack-gap: var(--space-1, 0.25rem); }
.agim-stack--sm { --stack-gap: var(--space-2, 0.5rem); }
.agim-stack--md { --stack-gap: var(--space-4, 1rem); }
.agim-stack--lg { --stack-gap: var(--space-6, 1.5rem); }
.agim-stack--xl { --stack-gap: var(--space-8, 2rem); }

/* 7.4 .agim-cluster — 1D Horizontal Wrapping Pill & Toolbar Row */
.agim-cluster {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-wrap: balance;
  align-items: safe center;
  gap: var(--cluster-gap, var(--space-3, 0.75rem));
}

.agim-cluster > * {
  min-inline-size: 0;
}

.agim-cluster--between {
  justify-content: space-between;
}

.agim-cluster--center {
  justify-content: safe center;
}

.agim-push-end {
  margin-inline-start: auto;
}

/* 7.5 .agim-bento — 2D Auto-Responsive Grid + Optional Subgrid Alignment */
.agim-bento {
  display: grid;
  inline-size: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bento-min, 280px)), 1fr));
  gap: var(--bento-gap, var(--space-4, 1rem));
  align-items: stretch;
}

.agim-bento--sm { --bento-min: 220px; }
.agim-bento--lg { --bento-min: 360px; }

/* Subgrid variant: aligns card header, body well, and footer across sibling cards */
.agim-bento--subgrid {
  grid-auto-rows: auto;
}

.agim-bento--subgrid > .agim-boundary-card {
  grid-row: span 3;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-rows: subgrid;
  gap: var(--space-2, 0.5rem);
}

/* 7.6 .agim-split — Responsive Sidebar/Main or 50/50 Two-Pane Layout */
.agim-split {
  display: grid;
  inline-size: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--split-min, 320px)), 1fr));
  gap: var(--split-gap, var(--space-5, 1.25rem));
  align-items: start;
}

@media (min-width: 920px) {
  .agim-split--sidebar-left {
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  }
  .agim-split--sidebar-right {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  }
}

/* 7.7 Container Query & Choice-Card Enhancements on .agim-boundary-card */
.agim-boundary-card {
  container: agim-card / inline-size;
  position: relative;
  inline-size: 100%;
  box-sizing: border-box;
}

/* Prevent container-type: inline-size cards from collapsing inside main.agim-center.agim-stack wrappers */
main.agim-center,
.agim-shell > .agim-center.agim-stack {
  align-items: stretch;
  justify-items: stretch;
  place-content: flex-start;
  text-align: start;
}

.agim-stack > section,
.agim-stack > .agim-boundary-card,
.agim-stack > .agim-bento,
.agim-stack > .agim-split {
  inline-size: 100%;
  box-sizing: border-box;
}

/* Non-layout-shifting choice card selection via :has(:checked) */
.agim-boundary-card:has(> input:checked),
.agim-boundary-card:has(.agim-choice-input:checked) {
  border-color: var(--accent-primary, #2E7D32);
  box-shadow: 0 0 0 2px var(--accent-primary, #2E7D32), var(--card-shadow, 0 2px 8px rgba(22, 56, 44, 0.06));
}

/* Media-aware horizontal adaptation inside wide cards */
@container agim-card (inline-size > 540px) {
  .agim-boundary-well.agim-well--media-adaptive:has(> img, > .media) {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--space-4, 1rem);
    align-items: center;
  }
}

.agim-boundary-card img,
.agim-boundary-well img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

/* 7.8 4-State Card System (ready | loading | empty | error) */
.agim-boundary-well[data-state="empty"],
.agim-boundary-well[data-state="loading"],
.agim-boundary-well[data-state="error"] {
  display: grid;
  place-items: safe center;
  place-content: safe center;
  text-align: center;
  min-block-size: 160px;
  gap: var(--space-2, 0.5rem);
}

.agim-boundary-well[data-state="empty"] {
  border-style: dashed;
  border-color: var(--border-color, #CFC8B8);
  color: var(--ink-muted, #5A6861);
}

.agim-boundary-well[data-state="loading"] {
  position: relative;
  overflow: clip;
}

.agim-boundary-well[data-state="loading"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(52, 211, 153, 0.12) 50%, transparent 100%);
  animation: agimPulseSweep 1.6s infinite ease-in-out;
  pointer-events: none;
}

.agim-boundary-well[data-state="error"] {
  border-color: #DC2626;
  background: rgba(220, 38, 38, 0.06);
}

@keyframes agimPulseSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ==========================================================================
   8. UNIVERSAL CROSS-APP FLOW BUS UI (TOP-BAR INBOX PILL, POPOVER & LIVE TOAST)
   ========================================================================== */

#agim-v3-flow-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  height: 28px;
  background: var(--bg-well, #EFECE4);
  border: 1.5px solid var(--border-color, #CFC8B8);
  color: var(--ink-primary, #16382C);
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: safe center;
  gap: 5px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  position: relative;
}

#agim-v3-flow-pill:hover {
  border-color: var(--ink-primary, #16382C);
  transform: translateY(-1px);
}

#agim-v3-flow-pill.has-unread {
  border-color: #D97706;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.22);
}

#agim-v3-flow-badge {
  background: #2E7D32;
  color: #FFFFFF;
  font-size: 9.5px;
  font-weight: 800;
  min-inline-size: 16px;
  block-size: 16px;
  padding-inline: 4px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
}

#agim-v3-flow-pill.has-unread #agim-v3-flow-badge {
  background: #D97706;
}

#agim-v3-flow-popover {
  position: fixed;
  top: 50px;
  right: 14px;
  z-index: 9996;
  inline-size: min(94vw, 410px);
  background: var(--bg-card, #FAF8F3);
  border: 1.5px solid var(--ink-primary, #16382C);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 16px 40px rgba(10, 24, 18, 0.28);
  display: none;
}

#agim-v3-flow-popover.open {
  display: block;
}

.agim-v3-flow-well {
  background: var(--bg-well, #EFECE4);
  border-radius: 10px;
  padding: 12px;
  max-block-size: 360px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agim-v3-flow-item {
  background: var(--bg-card, #FAF8F3);
  border: 1px solid var(--border-color, #CFC8B8);
  border-radius: 9px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: start;
}

.agim-v3-flow-item.unread {
  border-inline-start: 3.5px solid #D97706;
}

.agim-v3-flow-meta {
  display: flex;
  align-items: safe center;
  justify-content: space-between;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-muted, #5A6861);
}

.agim-v3-flow-verb {
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(22, 56, 44, 0.1);
  color: var(--ink-primary, #16382C);
}

.agim-v3-flow-summary {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-primary, #16382C);
  line-height: 1.38;
}

.agim-v3-flow-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: safe center;
  justify-content: flex-end;
  gap: 6px;
}

.agim-v3-flow-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #CFC8B8);
  background: var(--bg-well, #EFECE4);
  color: var(--ink-primary, #16382C);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.agim-v3-flow-btn.primary {
  background: #2E7D32;
  border-color: #2E7D32;
  color: #FFFFFF;
}

/* Live Bottom-Right Cross-App Toast Rack */
#agim-v3-flow-toast-rack {
  position: fixed;
  inset-block-end: 68px;
  inset-inline-end: 20px;
  z-index: 10005;
  display: flex;
  flex-direction: column;
  gap: 10px;
  inline-size: min(92vw, 390px);
  pointer-events: none;
}

.agim-v3-flow-toast {
  pointer-events: auto;
  background: var(--bg-card, #FAF8F3);
  border: 2px solid var(--ink-primary, #16382C);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
  animation: agimToastSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.agim-v3-flow-toast-well {
  background: var(--bg-well, #EFECE4);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@keyframes agimToastSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   9. DIRECTOR "LAYOUT X-RAY" INSPECTOR MODE (html[data-agim-xray="on"])
   Highlights primitives, bounding boxes & center-lines on any studio page.
   ========================================================================== */

html[data-agim-xray="on"] :where(.agim-shell, .agim-center, .agim-stack, .agim-cluster, .agim-bento, .agim-split, .agim-boundary-card) {
  outline: 1.5px dashed #0284C7 !important;
  outline-offset: -1px !important;
  position: relative;
}

html[data-agim-xray="on"] .agim-center {
  outline: 2px dashed #E11D48 !important;
  background-image:
    linear-gradient(to right, transparent calc(50% - 0.5px), rgba(225, 29, 72, 0.35) calc(50% - 0.5px), rgba(225, 29, 72, 0.35) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(225, 29, 72, 0.35) calc(50% - 0.5px), rgba(225, 29, 72, 0.35) calc(50% + 0.5px), transparent calc(50% + 0.5px)) !important;
}

html[data-agim-xray="on"] .agim-bento {
  outline: 2px dashed #059669 !important;
}

html[data-agim-xray="on"] :where(.agim-shell, .agim-center, .agim-bento, .agim-split, .agim-stack, .agim-cluster)::before {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 4px;
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  z-index: 990;
  pointer-events: none;
  background: #16382C;
  color: #FEF08A;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

html[data-agim-xray="on"] .agim-shell::before { content: "PRIMITIVE • .agim-shell"; background: #0284C7; color: #FFF; }
html[data-agim-xray="on"] .agim-center::before { content: "PRIMITIVE • .agim-center (2-AXIS SAFE CENTER)"; background: #E11D48; color: #FFF; }
html[data-agim-xray="on"] .agim-bento::before { content: "PRIMITIVE • .agim-bento (AUTO-FIT GRID)"; background: #059669; color: #FFF; }
html[data-agim-xray="on"] .agim-split::before { content: "PRIMITIVE • .agim-split (2-PANE)"; background: #7C3AED; color: #FFF; }
html[data-agim-xray="on"] .agim-stack::before { content: ".agim-stack"; }
html[data-agim-xray="on"] .agim-cluster::before { content: ".agim-cluster"; }

/* ==========================================================================
   10. UNIVERSAL VIEWPORT & DEVICE PREVIEW SWITCHER + A11Y & TOUCH ERGONOMICS
   Supports Desktop, iPad Landscape (1180×820), iPad Portrait (820×1180) & Mobile (390×844)
   ========================================================================== */

#agim-v3-viewport-select {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  height: 28px;
  background: var(--bg-well, #EFECE4);
  border: 1.5px solid var(--border-color, #CFC8B8);
  color: var(--ink-primary, #16382C);
  padding: 3px 7px;
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
}

#agim-v3-viewport-select:hover {
  border-color: var(--ink-primary, #16382C);
}

html[data-viewport-preview="desktop"] body {
  max-inline-size: 1440px !important;
  inline-size: 100% !important;
  margin-inline: auto !important;
}

html[data-viewport-preview="ipad-landscape"],
html[data-viewport-preview="ipad-portrait"],
html[data-viewport-preview="mobile"] {
  background: #0B1410 !important;
}

html[data-viewport-preview="ipad-landscape"] body {
  max-inline-size: 1180px !important;
  inline-size: 100% !important;
  margin-inline: auto !important;
  box-shadow: 0 0 0 8px rgba(22, 56, 44, 0.55), 0 24px 64px rgba(0, 0, 0, 0.65) !important;
}

html[data-viewport-preview="ipad-portrait"] body {
  max-inline-size: 820px !important;
  inline-size: 100% !important;
  margin-inline: auto !important;
  box-shadow: 0 0 0 8px rgba(22, 56, 44, 0.55), 0 24px 64px rgba(0, 0, 0, 0.65) !important;
}

html[data-viewport-preview="mobile"] body {
  max-inline-size: 390px !important;
  inline-size: 100% !important;
  margin-inline: auto !important;
  box-shadow: 0 0 0 8px rgba(22, 56, 44, 0.55), 0 24px 64px rgba(0, 0, 0, 0.65) !important;
}

/* High-contrast :focus-visible indicator (WCAG 2.4.7 & 1.4.11) */
:where(a:any-link, button, input, select, textarea, [role="button"], [role="tab"]):focus-visible {
  outline: 2px solid var(--active-app-accent, #38BDF8) !important;
  outline-offset: 2px !important;
}

/* Coarse pointer (iPad touch / Apple Pencil / Mobile) — keep toolbar pills sleek while full-width modal inputs retain 44px height */
@media (pointer: coarse) {
  #agim-v3-cmd-input,
  .agim-dev-gate-input,
  .agim-dev-gate-submit {
    min-block-size: 44px;
    min-height: 44px;
  }
}

/* ==========================================================================
   11. v4.0 OPTION C DUAL-REGISTER COEXISTENCE, 3-TIER ROLE COLOR HIERARCHY,
       4-TIER QUANTITATIVE BUTTONS & SOVEREIGN TRI-PANE NAVIGATION
       (SPECTACLE-SAFE / ANTI-CHROMOSTEREOPSIS / ANTI-HALATION EDITION)
   ========================================================================== */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: var(--tracking-optical-body, 0.01em);
}

/* 11.1 Option C Dual-Register Bridge (Executive vs. Creative — Spectacle-Safe Contours) */
:is(html[data-register="executive"], body[data-register="executive"], html[data-register="pro"], body[data-register="pro"]) .agim-boundary-card {
  border-width: 1.5px;
  border-radius: 14px;
  box-shadow: var(--card-shadow, 0 2px 8px rgba(22, 56, 44, 0.06));
}

:is(html[data-register="creative"], body[data-register="creative"]) .agim-boundary-card {
  border: 2px solid var(--border-optical-creative, #2C3E35) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-optical-tactile, 3px 3px 0px rgba(22, 56, 44, 0.22)) !important;
}

:is(html[data-skin="night"], html[data-skin="pine-dark"]) [data-register="creative"] .agim-boundary-card,
:is(html[data-skin="night"][data-register="creative"], html[data-skin="pine-dark"][data-register="creative"]) .agim-boundary-card {
  border: 2px solid #D8E2DC !important;
  box-shadow: 3px 3px 0px rgba(110, 231, 183, 0.25) !important;
}

/* 11.2 3-Tier Spectacle-Safe Role Hierarchy (Botanical Sage-Pine / Honey-Ochre / Terracotta Clay) */
:is(html[data-app-tier="core"], body[data-app-tier="core"], .agim-tier-core) {
  --active-app-accent: var(--tier-core-accent, #24523E);
}

:is(html[data-app-tier="child"], body[data-app-tier="child"], .agim-tier-child) {
  --active-app-accent: var(--tier-child-accent, #9A5B13);
}

:is(html[data-app-tier="child"], body[data-app-tier="child"], .agim-tier-child) .agim-boundary-header {
  border-block-start: 2.5px solid var(--tier-child-accent, #9A5B13);
  border-start-start-radius: 9px;
  border-start-end-radius: 9px;
  background: var(--tier-child-surface-wash, #F5EFE2);
  color: var(--ink-child-aa, #25332C);
  letter-spacing: var(--tracking-optical-ui, 0.015em);
}

:is(html[data-app-tier="child"], body[data-app-tier="child"], .agim-tier-child) .agim-boundary-well {
  background: var(--tier-child-plinth-bg, #F2EEE5);
  border-color: var(--tier-child-border, #C89D66);
}

:is(html[data-app-tier="specialist"], body[data-app-tier="specialist"], .agim-tier-specialist) {
  --active-app-accent: var(--tier-specialist-accent, #A84432);
}

:is(html[data-app-tier="specialist"], body[data-app-tier="specialist"], .agim-tier-specialist) .agim-boundary-header {
  border-block-start: 2.5px solid var(--tier-specialist-accent, #A84432);
  border-start-start-radius: 9px;
  border-start-end-radius: 9px;
  background: var(--tier-specialist-surface-wash, #F6E8E4);
  color: var(--ink-child-aa, #25332C);
  letter-spacing: var(--tracking-optical-ui, 0.015em);
}

:is(html[data-app-tier="specialist"], body[data-app-tier="specialist"], .agim-tier-specialist) .agim-boundary-well {
  background: var(--tier-specialist-plinth-bg, #F4ECE9);
  border-color: var(--tier-specialist-border, #CFA096);
}

:is(html[data-skin="night"], html[data-skin="pine-dark"], html[data-skin="tactical"], html[data-skin="sage-dusk"]) :is([data-app-tier="child"], .agim-tier-child, [data-app-tier="specialist"], .agim-tier-specialist) .agim-boundary-well {
  background: #182B22;
  border-color: rgba(244, 241, 234, 0.16);
}

/* Child / Dependency Hierarchical Breadcrumb Ribbon */
.agim-parent-ribbon {
  display: inline-flex;
  align-items: safe center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-optical-ui, 0.015em);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--tier-child-surface-wash, #F5EFE2);
  border: 1.5px solid var(--tier-child-border, #C89D66);
  color: var(--ink-child-aa, #25332C);
}

.agim-parent-ribbon a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 11.3 Quantitative 4-Tier Button System (24px / 28px / 34px / 44px — Low-Glare Optical Comfort) */
.agim-btn {
  display: inline-flex;
  align-items: safe center;
  justify-content: safe center;
  gap: 6px;
  height: var(--btn-size-md, 34px);
  padding: var(--btn-pad-md, 0 14px);
  border-radius: var(--btn-radius-md, 8px);
  border: 1.5px solid var(--border-color, #CFC8B8);
  background: var(--bg-card, #FAF8F3);
  color: var(--ink-optical-comfort, #22302A);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-optical-ui, 0.015em);
  line-height: 1;
  cursor: pointer;
  position: relative;
  user-select: none;
  text-decoration: none;
  transition: transform 80ms cubic-bezier(0.2, 0, 0, 1), background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.agim-btn:hover {
  border-color: var(--ink-primary, #16382C);
  transform: translateY(-1px);
}

.agim-btn:active {
  transform: translateY(1px) scale(0.985);
}

.agim-btn--primary {
  background: var(--active-app-accent, #24523E);
  border-color: var(--active-app-accent, #24523E);
  color: var(--ink-on-accent, #FAF8F3) !important; /* Warm Alabaster eliminates pure-white halation bloom */
}

.agim-btn--xs {
  height: var(--btn-size-xs, 24px);
  padding: var(--btn-pad-xs, 0 8px);
  border-radius: var(--btn-radius-xs, 6px);
  font-size: 12px;
}

.agim-btn--sm {
  height: var(--btn-size-sm, 28px);
  padding: var(--btn-pad-sm, 0 10px);
  border-radius: var(--btn-radius-sm, 6px);
  font-size: 12.5px;
}

.agim-btn--md {
  height: var(--btn-size-md, 34px);
  padding: var(--btn-pad-md, 0 14px);
  border-radius: var(--btn-radius-md, 8px);
  font-size: 13.5px;
}

.agim-btn--lg {
  height: var(--btn-size-lg, 44px);
  padding: var(--btn-pad-lg, 0 20px);
  border-radius: var(--btn-radius-lg, 10px);
  font-size: 15px;
}

:is(html[data-register="creative"], body[data-register="creative"]) .agim-btn {
  border: 2px solid var(--border-optical-creative, #2C3E35) !important;
  box-shadow: var(--shadow-optical-tactile, 3px 3px 0px rgba(22, 56, 44, 0.22)) !important;
  border-radius: 999px !important;
}

:is(html[data-register="creative"], body[data-register="creative"]) .agim-btn:active {
  transform: translate(1.5px, 1.5px) !important;
  box-shadow: 1px 1px 0px rgba(22, 56, 44, 0.22) !important;
}

/* Coarse Pointer Touch Target Expansion (WCAG 2.5.5 / 2.5.8 >= 44x44px hit bounds without visual bloat) */
@media (pointer: coarse) {
  :where(.agim-btn--xs, .agim-btn--sm, .agim-btn--md)::before {
    content: "";
    position: absolute;
    inset: -8px;
  }
}

/* 11.4 Interactive Controls: Toggle Switch, Checkbox & Scrub Slider */
.agim-toggle-switch {
  appearance: none;
  width: var(--control-toggle-width, 36px);
  height: var(--control-toggle-height, 20px);
  border-radius: 999px;
  background: var(--bg-well, #EFECE4);
  border: 1.5px solid var(--border-color, #CFC8B8);
  position: relative;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.agim-toggle-switch::after {
  content: "";
  position: absolute;
  top: 1.5px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink-optical-comfort, #22302A);
  transition: transform 150ms cubic-bezier(0.2, 0, 0, 1), background-color 150ms ease;
}

.agim-toggle-switch:checked {
  background: var(--active-app-accent, #24523E);
  border-color: var(--active-app-accent, #24523E);
}

.agim-toggle-switch:checked::after {
  transform: translateX(15px);
  background: var(--ink-on-accent, #FAF8F3);
}

.agim-checkbox {
  width: var(--control-checkbox-size, 18px);
  height: var(--control-checkbox-size, 18px);
  border-radius: 4px;
  accent-color: var(--active-app-accent, #24523E);
  cursor: pointer;
}

.agim-scrub-slider {
  accent-color: var(--active-app-accent, #24523E);
  height: var(--control-slider-track, 6px);
  border-radius: 999px;
  cursor: ew-resize;
}

/* 11.5 Sovereign Tri-Pane Window Navigation Architecture (.agim-tri-pane & .agim-drawer) */
.agim-tri-pane {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4, 1rem);
  transition: grid-template-columns 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.agim-tri-pane.drawer-open {
  grid-template-columns: minmax(0, 1fr) var(--window-drawer-width, clamp(380px, 32vw, 480px));
}

.agim-drawer {
  background: var(--tier-child-plinth-bg, #F2EEE5);
  border: 1.5px solid var(--border-color, #CFC8B8);
  border-block-start: 2.5px solid var(--active-app-accent, #9A5B13);
  border-radius: 14px;
  padding: 6px;
  align-self: start;
  position: sticky;
  top: 56px;
  max-block-size: calc(100dvh - 72px);
  overflow-y: auto;
}

@media (max-width: 1060px) {
  .agim-tri-pane.drawer-open {
    grid-template-columns: minmax(0, 1fr);
  }
  .agim-drawer {
    position: fixed;
    inset: 6dvh 0 0 0;
    max-block-size: 94dvh;
    border-radius: 18px 18px 0 0;
    z-index: 85;
  }
}

/* 11.6 Two-Layer Chrome Separation ("Show, Don't Tell" Public Surface vs. Director Cockpit) */
html:not([data-dev-app="true"]):not([data-director-active="true"]) body:not(.director-authenticated):not(.is-agim-dev-app) .agim-v3-workbench-only {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}