/* ═══════════════════════════════════════════════════════════════════
   Ekumen Dashboard — Design System
   ═══════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────────────────────────────────── */

:root {
  /* Brand */
  --brand: #65a30d;
  --brand-light: rgba(101, 163, 13, 0.1);

  /* Primary (near-black) */
  --primary: #171717;
  --primary-fg: #fafafa;
  --primary-light: rgba(23, 23, 23, 0.1);

  /* Surfaces */
  --background: #ffffff;
  --surface: #f5f5f5;
  --border: #e5e5e5;
  --input: #e5e5e5;

  /* Text */
  --card-fg: #0a0a0a;
  --secondary-fg: #171717;
  --muted: #737373;
  --muted-light: rgba(23, 23, 23, 0.5);

  /* Semantic */
  --success: #16a34a;
  --success-light: rgba(22, 163, 74, 0.1);
  --danger: #dc2626;
  --danger-light: rgba(220, 38, 38, 0.1);
  --warning: #e39219;
  --warning-light: rgba(227, 146, 25, 0.1);

  /* Typography */
  --font-body: 'DM Sans', sans-serif;
  --font-heading: 'Instrument Serif', serif;
  --text-xs: 11px;
  --text-2xs: 13px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --lh-xs: 16px;
  --lh-sm: 20px;
  --lh-base: 24px;
  --lh-lg: 28px;
  --lh-2xl: 32px;
  --lh-3xl: 56px;

  /* Spacing */
  --sp-0: 0px;
  --sp-0-5: 2px;
  --sp-1: 4px;
  --sp-1-5: 6px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Radius */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);

  /* Layout */
  --sidebar-w: 80px;
  --chat-w: 420px;
}

/* ── Reset & Base ──────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--card-fg);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

@media (max-width: 1024px) {
  body { touch-action: pan-y; }
}

/* ── Scrollbar — overlay, auto-hide like mobile ───────────────────── */

* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
*:hover, *:active {
  scrollbar-color: var(--border) transparent;
}

*::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background 0.2s; }
*:hover::-webkit-scrollbar-thumb { background: var(--border); }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); }

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input {
  font: inherit;
  border: none;
  outline: none;
  background: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ── App Shell ─────────────────────────────────────────────────────── */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--chat-w);
  grid-template-rows: 1fr;
  min-height: 100vh;
  grid-template-areas: "sidebar main chat";
  transition: grid-template-columns 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

#sidebar { grid-area: sidebar; }
.main-content {
  grid-area: main;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100vh;
  min-width: 0; /* prevent grid blowout when chat opens/closes */
  background: var(--background);
  padding-top: calc(68px + env(safe-area-inset-top, 0px));
  z-index: 0;
  transition: opacity 0.15s ease;
  container-type: inline-size;
  container-name: main;
}

.main-content--pre-fullscreen {
  opacity: 0;
  pointer-events: none;
}
/* ── Artifact tray (persistent, styled as form extension) ────────── */
.artifact-tray {
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  max-height: 40vh;
  margin: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  background: var(--background);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

.artifact-tray--visible { display: flex; }

/* Merge tray bottom with form top */
.artifact-tray--visible + .chat-panel__form {
  border-top: 1px solid var(--border);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.artifact-tray__header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.artifact-tray--collapsed .artifact-tray__header { border-bottom: none; }

.artifact-tray__header:hover { background: rgba(0, 0, 0, 0.02); }

.artifact-tray__icon { width: 14px; height: 14px; color: var(--brand); }

.artifact-tray__title {
  flex: 1;
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.artifact-tray__count {
  font-size: var(--text-xs);
  color: var(--muted);
  background: var(--border);
  border-radius: 10px;
  padding: 0 6px;
  line-height: 1.5;
}

.artifact-tray__toggle {
  border: 4px solid transparent;
  border-top: 5px solid var(--muted);
  transition: transform 0.2s;
}

.artifact-tray--collapsed .artifact-tray__toggle { transform: rotate(-90deg); }

.artifact-tray__body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
}

.artifact-tray--collapsed .artifact-tray__body { display: none; }

/* Skeleton placeholder for pending entries */
.artifact-entry--pending .artifact-entry__fields { opacity: 0.4; }

.artifact-entry__skeleton {
  height: 12px;
  width: 60%;
  border-radius: 4px;
  background: var(--border);
  animation: canvasPulse 1.5s ease-in-out infinite;
}

@keyframes canvasPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

#chat-panel { grid-area: chat; transition: width 0.2s ease; }

/* When chat is collapsed on desktop, shrink the grid column so main-content expands.
   Scoped to desktop only — tablet/mobile use their own grid layouts. */
@media (min-width: 1281px) {
  .app-shell:has(.chat-panel--collapsed) {
    grid-template-columns: var(--sidebar-w) 1fr 0;
  }
}

/* ── Chat fullscreen animations ──────────────────────────────────── */
/* Wipe from right: panel reveals leftward from its sidebar width    */

@keyframes chatFullscreenExpand {
  from { clip-path: inset(0 0 0 calc(100% - var(--chat-w))); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes chatFullscreenCollapse {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 0 calc(100% - var(--chat-w))); }
}

/* ── Chat full-page mode ──────────────────────────────────────────── */

.app-shell.app-shell--chat-page {
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-areas: "sidebar chat";
}

.app-shell--chat-page .main-content {
  display: none;
}

.app-shell--chat-page #chat-panel,
.app-shell--chat-page #chat-panel.chat-panel--collapsed {
  grid-area: chat;
  flex-direction: row;
  border-left: none;
  box-shadow: none;
  width: auto;
  min-width: 0;
  opacity: 1;
  pointer-events: auto;
  overflow: visible;
  animation: chatFullscreenExpand 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Exit: wipe back to sidebar width before grid resets */
.app-shell--chat-page #chat-panel.chat-panel--collapsing {
  animation: chatFullscreenCollapse 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.app-shell--chat-page .chat-conversation {
  flex: 1;
  min-width: 0;
  background: var(--background);
}

.app-shell--chat-page .chat-sessions-panel {
  display: flex;
  flex-direction: column;
  position: static;
  width: 340px;
  min-width: 340px;
  height: auto;
  max-height: none;
  margin-top: 0;
  border: none;
  border-left: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  background: var(--surface);
  padding-top: env(safe-area-inset-top, 0px);
  top: auto;
  left: auto;
  right: auto;
}

.app-shell--chat-page .chat-sessions__close,
.app-shell--chat-page #chat-history-btn {
  display: none;
}

/* Show close button in expanded mode (base hides it on desktop) */
.app-shell--chat-page .chat-toolbar__close-btn {
  display: flex;
}

.app-shell--chat-page #ios-install-wrap,
.app-shell--chat-page #android-install-wrap {
  display: none;
}


/* ── Sidebar ───────────────────────────────────────────────────────── */

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 60;
  padding-top: env(safe-area-inset-top, 0px);
}

.sidebar__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 0 0 var(--sp-4);
}

.sidebar__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  flex-shrink: 0;
}

.sidebar__logo-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar__logo-img {
  width: 36px;
  height: auto;
  border-radius: var(--radius-md);
}

.sidebar__partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--sp-2) 0;
  flex-shrink: 0;
}

.sidebar__partner-logo-img {
  width: 48px;
  height: auto;
  display: block;
}

.sidebar__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0;
}

.sidebar__bottom {
  padding: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  transition: background 0.15s;
}

.sidebar__bottom { cursor: pointer; }
.sidebar__bottom:hover { background: var(--background); }
.sidebar__bottom:focus { outline: none; }
.sidebar__bottom--active { background: var(--background); }

.sidebar__bottom-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.sidebar__lang-toggle {
  width: 32px;
  height: 22px;
  border-radius: 3px;
  background: transparent;
  border: 1.5px solid var(--muted-fg, #999);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: border-color 0.15s;
  cursor: pointer;
}
.sidebar__lang-toggle:hover { border-color: var(--primary); }
.sidebar__lang-flag { font-size: 10px; font-weight: 700; line-height: 1; pointer-events: none; color: var(--muted-fg, #999); letter-spacing: 0.5px; }

/* ── Language popover menu ─────────────────────────────────────────── */
.sidebar__lang-wrap { display: flex; flex-direction: column; align-items: center; }

.lang-menu {
  display: none;
  position: fixed;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  min-width: 160px;
  padding: var(--sp-1) 0;
  z-index: 9999;
  flex-direction: column;
}
.lang-menu--open { display: flex; }

.lang-menu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  color: var(--primary);
  text-decoration: none;
  transition: background 0.1s;
  white-space: nowrap;
}
.lang-menu__item:hover { background: var(--surface); }
.lang-menu__item--active {
  font-weight: 600;
  color: var(--brand);
}
.lang-menu__label { pointer-events: none; }

/* ── Avatar popover menu ─────────────────────────────────────────── */

.avatar-menu {
  display: none;
  position: absolute;
  bottom: 0;
  left: calc(100% + var(--sp-2));
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  padding: var(--sp-1) 0;
  z-index: 200;
  flex-direction: column;
}

.avatar-menu--open {
  display: flex;
}

/* Elevate sidebar above chat panel when a popover menu is open,
   otherwise the sidebar stacking context (z-index:60) keeps the
   menu behind the chat panel (z-index:70). */
#sidebar:has(.avatar-menu--open),
#sidebar:has(.lang-menu--open) {
  z-index: 80;
}

.avatar-menu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  color: var(--primary);
  text-decoration: none;
  transition: background 0.1s;
  white-space: nowrap;
}

.avatar-menu__item:hover {
  background: var(--surface);
}

.avatar-menu__item--danger {
  color: var(--danger);
}

.avatar-menu__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.avatar-menu__label {
  font-weight: 500;
}

/* ── Nav Item ──────────────────────────────────────────────────────── */

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-0-5);
  width: 100%;
  padding: var(--sp-3) var(--sp-1-5);
  max-height: 72px;
  overflow: hidden;
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
  border-left: 2px solid transparent;
  outline: none;
}

.nav-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.nav-item__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nav-item__label {
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  text-align: center;
  width: 100%;
}

.nav-item:hover {
  color: var(--secondary-fg);
  background: var(--background);
}

.nav-item--active {
  color: var(--brand);
  font-weight: 700;
  border-left-color: var(--brand);
  background: var(--background);
}

/* ── Avatar ────────────────────────────────────────────────────────── */

.avatar {
  border-radius: var(--radius-full);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
  flex-shrink: 0;
}

.avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.avatar--md { width: 40px; height: 40px; font-size: 14px; }
.avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.avatar__img { width: 100%; height: 100%; object-fit: cover; }
.avatar__initials { line-height: 1; }

/* ── Top Bar ───────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  padding-top: calc(var(--sp-4) + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: var(--chat-w);
  z-index: 10;
}

/* Let map touches pass through the translucent topbar */
.main-content--no-scroll .topbar { pointer-events: none; }
.main-content--no-scroll .topbar > * { pointer-events: auto; }

/* When chat collapses, header follows the main card */
.app-shell:has(.chat-panel--collapsed) .topbar {
  right: 0;
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.topbar__hamburger {
  display: none; /* shown on mobile via media query */
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--card-fg);
  flex-shrink: 0;
}

.topbar__hamburger > * { pointer-events: none; }
.topbar__hamburger:hover { background: var(--surface); }

.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* ── Notifications popover ────────────────────────────────────────── */

.topbar__notifications-wrap {
  position: relative;
}

.notifications-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--sp-0-5);
  border-radius: var(--radius-full);
  background: var(--danger);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

.notifications-badge--empty { display: none; }

.notifications-popover {
  display: none;
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: 0;
  width: 360px;
  max-width: calc(100vw - var(--sp-4));
  max-height: 480px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  z-index: 200;
  overflow: hidden;
}

.notifications-popover--open { display: block; }

.notifications-popover__inner {
  display: flex;
  flex-direction: column;
  max-height: 480px;
}

.notifications-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.notifications-popover__title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--primary);
}

.notifications-popover__action {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--accent, var(--primary));
  text-decoration: underline;
}

.notifications-popover__action:hover { opacity: 0.8; }

.notifications-popover__list {
  flex: 1;
  overflow-y: auto;
}

.notifications-popover__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.notifications-popover__item:last-child { border-bottom: none; }

.notifications-popover__item--unread {
  background: var(--surface);
}

.notifications-popover__item-body-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.notifications-popover__item-title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--primary);
  word-break: break-word;
}

.notifications-popover__item-body {
  font-size: var(--text-xs);
  color: var(--muted);
  word-break: break-word;
}

.notifications-popover__item-meta {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 2px;
}

.notifications-popover__item-actions {
  flex-shrink: 0;
}

.notifications-popover__item-action {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-1);
  border-radius: var(--radius-sm);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.notifications-popover__item-action:hover {
  background: var(--surface);
  color: var(--primary);
}

.notifications-popover__item-action-icon {
  width: 14px;
  height: 14px;
}

.notifications-popover__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  color: var(--muted);
}

.notifications-popover__empty-icon {
  width: 24px;
  height: 24px;
  opacity: 0.5;
}

.notifications-popover__empty-text {
  font-size: var(--text-sm);
  margin: 0;
}

/* ── Breadcrumb ────────────────────────────────────────────────────── */

.breadcrumb {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  min-width: 0;
  overflow: hidden;
}

.breadcrumb ol {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  min-width: 0;
}

.breadcrumb__link {
  color: var(--muted);
  transition: color 0.15s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb__link:hover { color: var(--primary); }

.breadcrumb__sep {
  color: var(--muted);
  margin: 0 2px;
  font-weight: 600;
  flex-shrink: 0;
}

.breadcrumb__current {
  font-weight: 600;
  color: var(--card-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--lh-sm);
  white-space: nowrap;
  transition: opacity 0.15s, background 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.btn__icon { width: 16px; height: 16px; flex-shrink: 0; }
.btn__icon--right { width: 16px; height: 16px; flex-shrink: 0; }

.btn--solid {
  background: var(--primary);
  color: var(--primary-fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn--solid:hover { opacity: 0.9; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); }

.btn--soft {
  background: var(--primary-light);
  color: var(--primary);
}

.btn--soft:hover { background: rgba(23, 23, 23, 0.15); }

.btn--ghost {
  background: transparent;
  color: var(--primary);
  padding: var(--sp-2) var(--sp-4);
}

.btn--ghost:hover { background: var(--surface); }

.btn--outline {
  background: var(--background);
  color: var(--primary);
  border: 1px solid var(--input);
  box-shadow: var(--shadow-xs);
}

.btn--outline:hover { background: var(--surface); }

.btn--outline-icon {
  background: var(--background);
  border: 1px solid var(--input);
  box-shadow: var(--shadow-xs);
  padding: var(--sp-1-5);
  border-radius: var(--radius-sm);
}

.btn--outline-icon:hover { background: var(--surface); }

/* ── Badge ─────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: var(--lh-xs);
  white-space: nowrap;
}

.badge--default { background: var(--surface); color: var(--primary); }
.badge--success { background: var(--success-light); color: var(--success); }
.badge--danger { background: var(--danger-light); color: var(--danger); }
.badge--warning { background: var(--warning-light); color: var(--warning); }
.badge--muted { background: var(--surface); color: var(--muted); }
.badge--brand { background: var(--brand-light); color: var(--brand); }

/* ── Trend Indicator ───────────────────────────────────────────────── */

.trend {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  white-space: nowrap;
}

.trend__value { font-weight: 700; }
.trend__suffix { font-weight: 400; color: var(--muted); }

.trend--up .trend__value { color: var(--success); }
.trend--down .trend__value { color: var(--danger); }

.sales-yoy__cell { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sales-yoy__value { font-weight: 500; }
.sales-yoy__delta { font-size: var(--text-xs); color: var(--muted); }

/* ── Page Header ───────────────────────────────────────────────────── */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--sp-6) var(--sp-16);
  border-bottom: 1px solid var(--border);
  gap: var(--sp-3);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.page-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  font-weight: 400;
  font-style: normal;
  color: var(--primary);
}

.page-header__subtitle {
  margin-top: var(--sp-2);
  max-width: 70ch;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--muted-light);
}

.page-header__meta {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  margin-top: var(--sp-1);
}

.page-header__meta-bold { font-weight: 600; color: var(--card-fg); }
.page-header__meta-text { font-weight: 400; color: var(--secondary-fg); }
.page-header__dot { color: var(--muted); margin: 0 var(--sp-1); }

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 1;
  flex-wrap: wrap;
  min-width: 0;
}

/* ── Header kebab menu ─────────────────────────────────────────────── */
.header-menu { position: relative; }
.header-menu__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
  min-width: 200px;
  z-index: 50;
  padding: var(--sp-1) 0;
}
.header-menu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  color: var(--card-fg);
  text-decoration: none;
  cursor: pointer;
  transition: background .1s;
}
.header-menu__item:hover { background: var(--surface); }
.header-menu__item svg { width: 16px; height: 16px; color: var(--muted); }

/* ── Advisor contact cards (dialog) ────────────────────────────────── */
.advisor-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) 0 var(--sp-2);
}
.advisor-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.advisor-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.advisor-card__name {
  font-weight: 600;
  font-size: var(--text-sm);
}
.advisor-card__org {
  font-size: var(--text-xs);
  color: var(--muted);
}
.advisor-card__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.advisor-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--primary);
  text-decoration: none;
}
.advisor-card__link:hover { text-decoration: underline; }
.advisor-card__link svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Section Header ────────────────────────────────────────────────── */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
}

.section-header__title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lh-lg);
  color: var(--secondary-fg);
}

.section-header__subtitle {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--muted-light);
}

/* ── Stat Card ─────────────────────────────────────────────────────── */

.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0;
}

.stat-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card__icon--primary { background: var(--primary-light); }
.stat-card__icon--warning { background: var(--warning-light); }
.stat-card__icon--success { background: var(--success-light); }
.stat-card__icon--danger { background: var(--danger-light); }

.stat-card__icon-svg { width: 18px; height: 18px; color: inherit; }
.stat-card__icon--primary .stat-card__icon-svg { color: var(--primary); }
.stat-card__icon--warning .stat-card__icon-svg { color: var(--warning); }
.stat-card__icon--success .stat-card__icon-svg { color: var(--success); }
.stat-card__icon--danger .stat-card__icon-svg { color: var(--danger); }

.stat-card__body { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }

.stat-card__title {
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  min-height: calc(2 * var(--lh-xs));
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.stat-card__value {
  font-size: var(--text-2xl);
  line-height: 1.2;
  font-weight: 700;
  color: var(--card-fg);
}

.stat-card__desc {
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  color: var(--muted);
}

.stat-card .trend {
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  white-space: normal;
}

.stat-card__arrow {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  flex-shrink: 0;
}

/* ── KPI Grid ──────────────────────────────────────────────────────── */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

.kpi-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Landing Layout ────────────────────────────────────────────────── */

.landing {
  padding: 0;
}

.landing__body {
  padding: var(--sp-4) var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.landing__section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Portfolio ─────────────────────────────────────────────────────── */

.portfolio__card {
  margin-top: var(--sp-4);
}

.portfolio__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.portfolio__headline {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.portfolio__label {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 500;
}

.portfolio__value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--card-fg);
}

.portfolio__metrics {
  display: flex;
  gap: var(--sp-8);
}

.mini-metric {
  display: flex;
  flex-direction: column;
  gap: var(--sp-0-5);
  padding: var(--sp-3) var(--sp-4);
  border-left: 1px solid var(--border);
}

.mini-metric__label {
  font-size: var(--text-sm);
  color: var(--muted);
}

.mini-metric__value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--card-fg);
}

/* ── Chart Wrapper ─────────────────────────────────────────────────── */

.chart-wrap {
  position: relative;
  width: 100%;
}

.chart-el {
  width: 100%;
  height: 100%;
}

/* ── Cards (generic) ───────────────────────────────────────────────── */

.card {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
}

.card-header--with-tabs {
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.card-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--secondary-fg);
}

.card-body {
  padding: 0 var(--sp-4) var(--sp-4);
}

/* ── Bottom Row ────────────────────────────────────────────────────── */

.landing__bottom-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.advisor-card .card-header { padding: var(--sp-3) var(--sp-3) var(--sp-2); }
.advisor-card .card-body { position: relative; }

.advisor-chart-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
  padding-right: var(--sp-4);
  margin-bottom: var(--sp-1);
}

.advisor-stats {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 140px;
}

.advisor-stat {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  align-items: center;
}

.advisor-stat__name { font-weight: 500; min-width: 60px; }
.advisor-stat__coverage { color: var(--muted); }
.advisor-stat__visits { color: var(--muted); }

/* ── Advisor Performance Chart (HTML/CSS) ──────────────────────────── */

.advisor-perf {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2) 0 0;
  width: 100%;
}

.advisor-perf__row {
  display: grid;
  grid-template-columns: 80px 1fr 105px 80px;
  gap: var(--sp-2);
  align-items: center;
  min-height: 28px;
}

.advisor-perf__row--header {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #404040;
  margin-bottom: var(--sp-1);
}

.advisor-perf__col-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.advisor-perf__col-bar { min-width: 0; }

.advisor-perf__col-coverage,
.advisor-perf__col-visits {
  font-size: var(--text-sm);
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}

.advisor-perf__name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.advisor-perf__name:hover { text-decoration: underline; }
.advisor-perf__name--plain { color: #404040; }

.advisor-perf__bar {
  height: 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-1-5);
  min-width: fit-content;
  transition: width 0.3s ease;
}

.advisor-perf__bar-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--primary-fg);
  white-space: nowrap;
}

.advisor-perf__trend--up { color: var(--success); font-weight: 700; }
.advisor-perf__trend--down { color: var(--danger); font-weight: 700; }

.advisor-perf__row--axis {
  margin-top: var(--sp-1);
  align-items: start;
}

.advisor-perf__ticks {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
  padding-top: var(--sp-1);
}

.advisor-perf__ticks > span { text-align: center; }
.advisor-perf__ticks > span:first-child { text-align: left; }
.advisor-perf__ticks > span:last-child { text-align: right; }

/* ── Tab Switcher ──────────────────────────────────────────────────── */

.tab-switcher {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.tab-switcher__tab {
  padding: var(--sp-1-5) var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  background: var(--background);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.tab-switcher__tab:not(:last-child) {
  border-right: 1px solid var(--border);
}

.tab-switcher__tab:hover { background: var(--surface); }

.tab-switcher__tab--active {
  background: var(--surface);
  color: var(--primary);
  font-weight: 600;
}

/* ── Data Table ────────────────────────────────────────────────────── */

.data-table-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
  /* Notion-like scroll shadows. Two `local`-attached gradients act as
     "covers" that mask the shadow when scrolled to the edge; two
     `scroll`-attached radial shadows are pinned to the viewport edges
     and only become visible once a cover has scrolled away. Using the
     `transparent` keyword (not rgba white) so the fade works on dark
     themes too. */
  background-image:
    linear-gradient(to right, var(--card-bg) 30%, transparent),
    linear-gradient(to right, transparent, var(--card-bg) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.32), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.32), transparent) 100% 0;
  background-repeat: no-repeat;
  background-color: var(--card-bg);
  background-size: 52px 100%, 52px 100%, 26px 100%, 26px 100%;
  background-attachment: local, local, scroll, scroll;
  /* Smooth horizontal scrolling on trackpads / touch. */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* When the table overflows horizontally, surface an explicit hint via
   a thin tinted edge on the wrapper itself so the affordance reads even
   on low-contrast monitors where the radial shadow can wash out. */
.data-table-wrap[data-overflow-x="1"] {
  box-shadow:
    inset 12px 0 10px -10px rgba(0, 0, 0, 0.25),
    inset -12px 0 10px -10px rgba(0, 0, 0, 0.25);
}
.data-table-wrap[data-overflow-x="start"] {
  box-shadow: inset -12px 0 10px -10px rgba(0, 0, 0, 0.25);
}
.data-table-wrap[data-overflow-x="end"] {
  box-shadow: inset 12px 0 10px -10px rgba(0, 0, 0, 0.25);
}

.data-table {
  width: 100%;
  /* Fixed layout makes per-column widths authoritative — required for
     drag-to-resize to behave predictably (auto layout would otherwise
     redistribute widths based on cell content on every render). The JS
     module measures the initial natural widths and pins them as inline
     widths on each <th> before switching to fixed layout, so the first
     paint still respects content. */
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table[data-resizable-ready="1"] {
  table-layout: fixed;
}

.data-table__th {
  position: relative;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  background: var(--surface);
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  /* Reserve room for the resize handle so labels never touch it. */
  min-width: 60px;
}

/* Leaderboard table — smaller text & tighter padding to fit 5 columns */
.leaderboard-card .card-header { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.leaderboard-card .card-body { padding: 0 var(--sp-4) var(--sp-4); }
.leaderboard-card .data-table__th { font-size: var(--text-xs); padding: var(--sp-3) var(--sp-3); }
.leaderboard-card .data-table__td { font-size: var(--text-sm); padding: var(--sp-3) var(--sp-3); }
.leaderboard-card .col--narrow { width: 36px; }
.leaderboard-card .col--link a { white-space: normal; }
.leaderboard-card .tab-switcher__tab { padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); }

.data-table__th--right { text-align: right; }
.data-table__th--center { text-align: center; }

.data-table__th--sortable { user-select: none; }
.data-table__th--sortable:hover { color: var(--card-fg); }
.data-table__th--sorted { color: var(--card-fg); }
.data-table__th-inner { display: inline-flex; align-items: center; gap: 4px; }
.data-table__sort-icon { width: 14px; height: 14px; flex-shrink: 0; }

.data-table__td {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  /* Truncate verbose cell content to a single line so a long value
     (e.g. an RPG chapitre label) can't balloon row height. Cells that
     genuinely need wrapping (badges, stacked cells) opt out via their
     own inner wrapper. With table-layout:fixed the cap is the column
     width itself; before resize-init kicks in we still need a max so
     auto-layout doesn't blow up the row height. */
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Once the JS has converted the table to fixed layout, the column
   width itself bounds the cell, so the 320px cap becomes a hard cut
   off that would hide perfectly fitting content. Drop it. */
.data-table[data-resizable-ready="1"] .data-table__td {
  max-width: none;
}

.data-table__td:first-child { white-space: nowrap; }

/* ── Column resize handle ──────────────────────────────────────────── */

.data-table__resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  /* Sit above sort hover styles. */
  z-index: 1;
}

/* Always-on faint divider — same shape/position as the grab affordance
   below, just rendered in the muted border colour so it reads as a hint
   rather than an active control. Hover/drag swaps it out for the brand
   version via ::after. */
.data-table__resize-handle::before {
  content: "";
  position: absolute;
  top: 20%;
  right: 2px;
  width: 3px;
  height: 60%;
  background: var(--border);
  opacity: 0.7;
  border-radius: 2px;
  pointer-events: none;
  transition: opacity 120ms ease;
}

/* The grab affordance — same dimensions, brand colour on hover/drag. */
.data-table__resize-handle::after {
  content: "";
  position: absolute;
  top: 20%;
  right: 2px;
  width: 3px;
  height: 60%;
  background: transparent;
  border-radius: 2px;
  transition: background 120ms ease;
}

.data-table__resize-handle:hover::before,
.data-table__th[data-resizing="1"] .data-table__resize-handle::before {
  opacity: 0;
}
.data-table__resize-handle:hover::after,
.data-table__th[data-resizing="1"] .data-table__resize-handle::after {
  background: var(--brand);
}

/* Visual feedback during drag — a thin guide line spanning the table. */
.data-table[data-resizing="1"] {
  cursor: col-resize;
  user-select: none;
}

/* Hide the resize handle from the last column? Notion keeps it on the
   last column too — gives users a way to widen the rightmost column
   without affecting overall layout. We keep it on every column. */

.data-table__td--right { text-align: right; }
.data-table__td--center { text-align: center; }

.data-table__tr:last-child .data-table__td { border-bottom: none; }

.data-table__tr--clickable { cursor: pointer; }
.data-table__tr--clickable:hover { background: var(--surface); }

.data-table__link { color: var(--brand); font-weight: 500; }

.col--narrow { width: 60px; }

/* Text + badge combo cell */
.data-table__cell-with-badge { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.data-table__cell-text { white-space: nowrap; }

/* Stacked cell (main text + sub-text below) */
.data-table__cell-stack { display: flex; flex-direction: column; gap: 2px; }
.data-table__cell-sub { font-size: var(--text-xs); color: var(--muted); }
.data-table__cell-sub--connected { font-size: var(--text-xs); color: var(--success); }
.data-table__cell-sub--muted { font-size: var(--text-xs); color: var(--muted); }

/* Arrow column */
.data-table__row-arrow { width: 16px; height: 16px; color: var(--muted); }

/* ── Load-more row ─────────────────────────────────────────────────── */

.load-more-td {
  text-align: center;
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  border-bottom: none;
}

.load-more-td .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--brand);
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.12s ease;
}

.load-more-td .btn:hover {
  background: var(--surface);
}

.load-more-td .btn .btn__icon {
  width: 15px;
  height: 15px;
}

.load-more-row.htmx-request .btn {
  pointer-events: none;
  opacity: 0.5;
}

/* ── Chat Panel ────────────────────────────────────────────────────── */

#chat-panel {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  background: var(--surface) url('/dashboard/topo-map.svg') center / cover no-repeat;
  border-left: 1px solid var(--border);
  box-shadow: none;
  z-index: 70;
  transition: width 0.25s ease, min-width 0.25s ease, opacity 0.2s ease;
  padding-top: env(safe-area-inset-top, 0px);
}

/* ── Chat close button (phone full-width only) ───────────────────── */

.chat-toolbar__close-btn { display: none; }

/* ── Hide desktop-only toolbar buttons on tablet/mobile ──────── */
@media (max-width: 1280px) {
  .chat-toolbar__desktop-only { display: none !important; }
}

/* ── Desktop collapsed state ─────────────────────────────────────── */

#chat-panel.chat-panel--collapsed {
  width: 0;
  min-width: 0;
  overflow: hidden;
  border-left: none;
  opacity: 0;
  pointer-events: none;
}

/* ── Chat conversation wrapper ─────────────────────────────────────── */

.chat-conversation {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

/* ── Chat Toolbar ──────────────────────────────────────────────────── */

.chat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) var(--sp-4) 0;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  gap: var(--sp-2);
  position: relative;
}

.chat-toolbar__workflow {
  position: relative;
}

.chat-toolbar__workflow-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--primary);
  font-weight: 500;
  transition: background 0.15s;
}

.chat-toolbar__workflow-btn:hover {
  background: var(--background);
}

.chat-toolbar__workflow-btn svg {
  width: 14px;
  height: 14px;
}

.chat-toolbar__chevron {
  width: 12px !important;
  height: 12px !important;
  color: var(--muted);
}

.chat-toolbar__wf-dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 30;
  min-width: 160px;
  padding: var(--sp-1);
}

.chat-toolbar__wf-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  color: var(--card-fg);
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}

.chat-toolbar__wf-option:hover {
  background: var(--background);
}

.chat-toolbar__wf-option--active {
  color: var(--primary);
  font-weight: 500;
}

.chat-toolbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.chat-toolbar__btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
}

.chat-toolbar__btn:hover {
  color: var(--primary);
  background: var(--background);
}

.chat-toolbar__btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* ``<voice-mute-toggle>`` is a host element wrapping its own inner
   ``<button>``.  Without these rules the inner button keeps the
   browser-default padding/border, so the mute icon sits a few pixels
   off-axis from the plain ``<button class="chat-toolbar__btn">``
   siblings and the row looks ragged. */
voice-mute-toggle.chat-toolbar__btn {
  padding: 0;
  background: transparent;
}
voice-mute-toggle.chat-toolbar__btn .voice-mute-toggle__btn {
  all: unset;
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: inherit;
}
voice-mute-toggle.chat-toolbar__btn .voice-mute-toggle__btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* ── Sessions history panel ────────────────────────────────────────── */

.chat-sessions-panel {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 80px;
  left: var(--sp-4);
  right: var(--sp-4);
  max-height: 400px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  z-index: 25;
  overflow: hidden;
}

.chat-sessions-panel--visible {
  display: flex;
}

.chat-sessions__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-sessions__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary);
}

.chat-sessions__close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
}

.chat-sessions__close:hover {
  color: var(--primary);
  background: var(--background);
}

.chat-sessions__close svg {
  width: 16px;
  height: 16px;
}

.chat-sessions__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2);
}

.chat-sessions__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: var(--text-sm);
}

.chat-sessions__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
}

.chat-sessions__item:hover {
  background: var(--background);
}

.chat-sessions__item--active {
  background: var(--background);
  border: 1px solid var(--border);
}

.chat-sessions__item-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--card-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-sessions__item-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.75rem;
  color: var(--muted);
}

.chat-sessions__item-badge {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--background);
  border: 1px solid var(--border);
  font-size: 0.7rem;
  font-weight: 500;
}

/* Sessions: search bar */
.chat-sessions__search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-sessions__search-icon {
  width: 14px;
  height: 14px;
  color: var(--muted);
  flex-shrink: 0;
}
.chat-sessions__search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--card-fg);
}
.chat-sessions__search-input::placeholder { color: var(--muted); }

/* ── Skill manager panel ──────────────────────────────────────── */
.chat-skills-panel {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 80px;
  left: var(--sp-4);
  right: var(--sp-4);
  max-height: 420px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  z-index: 26;
  overflow: hidden;
}
.chat-skills-panel--visible { display: flex; }

.chat-skills__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-skills__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary);
}
.chat-skills__close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
}
.chat-skills__close:hover {
  color: var(--primary);
  background: var(--background);
}
.chat-skills__close svg { width: 16px; height: 16px; }

.chat-skills__search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-skills__search-icon { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.chat-skills__search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--card-fg);
}
.chat-skills__search-input::placeholder { color: var(--muted); }

.chat-skills__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2) var(--sp-3);
}
.chat-skills__section-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: var(--sp-2) 0 var(--sp-1);
}
.chat-skills__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-skills__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}
.chat-skills__item:hover { background: var(--card-bg); }

.chat-skills__item-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.chat-skills__item-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--card-fg);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.chat-skills__item-desc {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-skills__badge {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.chat-skills__badge--admin {
  background: var(--warning-bg, #fef3c7);
  color: var(--warning-fg, #92400e);
}
.chat-skills__badge--store {
  background: var(--info-bg, #dbeafe);
  color: var(--info-fg, #1e40af);
}

.chat-skills__toggle {
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.chat-skills__toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.chat-skills__toggle--on {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.chat-skills__toggle--on:hover {
  opacity: 0.85;
}

.chat-skills__footer {
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-skills__store-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
  cursor: pointer;
}
.chat-skills__store-link:hover {
  color: var(--primary);
  background: var(--card-bg);
}
.chat-skills__store-link svg { width: 16px; height: 16px; }

/* Sessions: date group headers */
.chat-sessions__group-header {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
}

/* Mute button active state */
.chat-toolbar__btn--muted {
  color: var(--muted) !important;
  opacity: 0.5;
}

/* Hero: visible by default, hidden when messages exist */
.chat-panel__hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
  text-align: center;
}

.chat-panel__greeting {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--primary);
  line-height: 1.3;
}

/* Messages: hidden by default, shown via JS class on parent */
.chat-panel__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4);
  display: none;
  flex-direction: column;
  gap: var(--sp-3);
}

/* When parent has --has-messages, show messages and hide hero */
.chat-panel--has-messages .chat-panel__messages {
  display: flex;
}

.chat-panel--has-messages .chat-panel__hero {
  display: none;
}

/* ── Typing indicator ─────────────────────────────────────────── */

.chat-msg__typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: var(--sp-2) var(--sp-3);
  min-height: 32px;
}

.chat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: chatDotPulse 1.4s ease-in-out infinite;
}

.chat-dot:nth-child(2) { animation-delay: 0.2s; }
.chat-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes chatDotPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

.chat-panel__form {
  padding: var(--sp-4);
  margin: 0 var(--sp-4) var(--sp-4);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex-shrink: 0;
}

.chat-panel__input-row {
  display: flex;
  align-items: flex-end;
}

.chat-panel__input {
  flex: 1;
  font-size: var(--text-sm);
  font-family: inherit;
  min-width: 0;
  resize: none;
  overflow-y: hidden;
  line-height: 1.5;
  max-height: calc(1.5em * 4 + 12px);
  padding: 6px 0;
  border: none;
  outline: none;
  background: transparent;
}

.chat-panel__input::placeholder { color: var(--muted); }

.chat-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-panel__actions-left {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.chat-panel__actions-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.chat-panel__action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--primary);
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

.chat-panel__action-btn svg { width: 16px; height: 16px; }


.chat-panel__action-btn--outline {
  background: var(--background);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: var(--primary);
}
.chat-panel__action-btn--outline:hover { background: var(--surface); }

/* ── <voice-input> — mic button with Discord-style toggle + waveform ── */
voice-input { display: inline-flex; }
.voice-input__btn {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  color: inherit;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: inherit;
}
.voice-input__icon { display: inline-flex; }
.voice-input__icon--stop { display: none; color: #d6336c; }
.voice-input__btn svg { width: 16px; height: 16px; }

/* Live waveform — N vertical bars whose --bar-level (0..1) is set by JS
   from analyser frequency data. Hidden when not recording. */
.voice-input__wave {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 16px;
}
.voice-input__wave-bar {
  width: 2px;
  height: calc(3px + 13px * var(--bar-level, 0));
  background: currentColor;
  border-radius: 1px;
  transition: height 60ms linear;
}

/* Recording state — swap icon for stop + waveform, animate the border. */
.voice-input--recording .voice-input__icon { display: none; }
.voice-input--recording .voice-input__icon--stop { display: inline-flex; }
.voice-input--recording .voice-input__wave { display: inline-flex; color: #d6336c; }
.voice-input--recording .voice-input__btn {
  animation: voice-input-pulse 1.4s ease-out infinite;
}
@keyframes voice-input-pulse {
  0% { box-shadow: 0 0 0 0 rgba(214, 51, 108, 0.45); }
  70% { box-shadow: 0 0 0 6px rgba(214, 51, 108, 0); }
  100% { box-shadow: 0 0 0 0 rgba(214, 51, 108, 0); }
}

/* Uploading: dim and disable interactions while the request is in flight. */
.voice-input--uploading .voice-input__btn { opacity: .55; cursor: progress; }
.voice-input--error .voice-input__btn { color: #d6336c; }

/* Countdown chip — surfaces during the last 10 seconds of a recording
   so the user sees the 1-min cut-off coming.  Sits next to the waveform
   bars; ``hidden`` attribute fully removes it outside the window. */
.voice-input__countdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: #d6336c;
  background: rgba(214, 51, 108, 0.12);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.voice-input__countdown[hidden] { display: none; }
.voice-input__countdown--urgent {
  color: #fff;
  background: #d6336c;
  animation: voice-input-countdown-blink 0.8s ease-in-out infinite;
}
@keyframes voice-input-countdown-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.chat-panel__send-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-sm);
  transition: opacity 0.15s;
}
.chat-panel__send-btn svg { width: 16px; height: 16px; }
.chat-panel__send-btn:hover { opacity: 0.9; }

/* ── Chat Messages ─────────────────────────────────────────────────── */

.chat-msg { display: flex; align-items: flex-start; }
.chat-msg--user { justify-content: flex-end; }
.chat-msg--assistant { justify-content: flex-start; }

/* Stack hugs the bubble width so the floating footer card pins to the
   bubble's bottom-right corner, not the chat panel's. */
.chat-msg__stack {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  max-width: min(85%, 720px);
  width: fit-content;
}

.chat-msg__footer {
  position: absolute;
  bottom: -10px;
  right: 8px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.1rem;
  padding: 0.15rem 0.3rem;
  background: var(--background, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 2;
}
.chat-msg:hover .chat-msg__footer,
.chat-msg__footer:focus-within {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.chat-msg__footer .chat-rating {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.1rem;
}
.chat-msg__footer .chat-rating__buttons {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.1rem;
}
.chat-msg__footer .chat-rating__btn,
.chat-msg__footer .copy-button__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 4px;
  border-radius: 6px;
  color: var(--text-muted, rgba(0, 0, 0, 0.55));
  cursor: pointer;
  width: 24px;
  height: 24px;
  line-height: 1;
}
.chat-msg__footer .chat-rating__btn:hover,
.chat-msg__footer .copy-button__btn:hover {
  background: var(--background-hover, rgba(0, 0, 0, 0.06));
  color: var(--text, currentColor);
}
.chat-msg__footer .chat-rating__btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.chat-msg__footer .chat-rating__btn--selected {
  color: var(--primary, #2563eb);
  background: rgba(37, 99, 235, 0.12);
}
.chat-msg__footer .chat-rating__icon,
.chat-msg__footer .copy-button__icon,
.chat-msg__footer [data-lucide] {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

/* Copy feedback — green check + a single scale pulse on the button. */
.chat-msg__footer .copy-button--copied .copy-button__btn {
  color: var(--success, #16a34a);
  animation: chatCopyPulse 0.45s ease-out;
}
.chat-msg__footer .copy-button--copied .copy-button__btn svg {
  color: var(--success, #16a34a);
}

@keyframes chatCopyPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.chat-msg__footer .chat-rating__comment:not([hidden]) {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 240px;
  padding: 0.5rem;
  background: var(--background, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  z-index: 3;
}
.chat-msg__footer .chat-rating__textarea {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  resize: vertical;
  background: var(--background);
  color: inherit;
}
.chat-msg__footer .chat-rating__submit {
  align-self: flex-end;
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border: 0;
  border-radius: 6px;
  background: var(--primary, #2563eb);
  color: var(--primary-fg, #fff);
  cursor: pointer;
}
.chat-msg__footer .chat-rating__banner {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.chat-msg__bubble {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-msg__bubble--user {
  background: var(--primary);
  color: var(--primary-fg);
  border-bottom-right-radius: 2px;
}

.chat-msg__bubble--assistant {
  background: var(--background);
  border: 1px solid var(--border);
  color: var(--card-fg);
  border-bottom-left-radius: 2px;
  white-space: normal;
}

.chat-msg__text:empty { display: none; }
.chat-msg__widgets:empty { display: none; }
.chat-msg__widgets { display: flex; flex-direction: column; gap: 0.5rem; }
.chat-msg__text + .chat-msg__widgets:not(:empty) { margin-top: 0.5rem; }

/* Tool-progress strip — one pill per call_id, ordered as they fired.
   Spinner while running, ✓ on success, ! on error.  Stays visible
   after the answer arrives so the user has a trail of "what was
   actually done". */
.chat-msg__tool-trace { display: flex; flex-direction: column; gap: 4px; }
.chat-msg__tool-trace:empty { display: none; }
.chat-msg__tool-trace:not(:empty) { margin-bottom: 0.4rem; }

.chat-tool-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 4px 11px 4px 9px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 999px;
  background: #fafafa;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--text-muted, rgba(0, 0, 0, 0.6));
}
.chat-tool-row__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 28ch;
}

.chat-tool-row__spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(37, 99, 235, 0.25);
  border-top-color: #2563eb;
  border-radius: 50%;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .chat-tool-row__spinner { animation: chatToolSpin 0.8s linear infinite; }
}

.chat-tool-row--running {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.3);
  color: #2563eb;
}

/* Lucide icon mark for done/error states */
.chat-tool-row__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}
.chat-tool-row__mark  :is(i, svg) {
  width: 13px;
  height: 13px;
}
.chat-tool-row--done {
  background: rgba(22, 163, 74, 0.06);
  border-color: rgba(22, 163, 74, 0.3);
  color: #15803d;
}
.chat-tool-row--error {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.3);
  color: #b91c1c;
}

/* Any user can click a finished row to reveal the raw arguments and
   result for inspection. */
.chat-tool-row--done,
.chat-tool-row--error {
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .chat-tool-row--done:hover,
  .chat-tool-row--error:hover {
    filter: brightness(0.96);
  }
}
.chat-tool-row--expanded { box-shadow: 0 0 0 1px var(--primary, #2563eb) inset; }

.chat-tool-detail {
  align-self: stretch;
  margin: 4px 0 2px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.025);
  font-size: 0.78rem;
  color: var(--text, currentColor);
}
.chat-tool-detail__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.chat-tool-detail__name {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.78rem;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
}
.chat-tool-detail__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, rgba(0, 0, 0, 0.55));
  margin-top: 6px;
  margin-bottom: 2px;
}
.chat-tool-detail__json,
.chat-tool-detail__text {
  margin: 0;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.72rem;
  line-height: 1.35;
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-tool-detail__text {
  font-family: inherit;
  white-space: pre-wrap;
}

.chat-tool-detail__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 6px;
  overflow: hidden;
  display: block;
  max-height: 280px;
  overflow: auto;
}
.chat-tool-detail__table th,
.chat-tool-detail__table td {
  padding: 4px 8px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  text-align: left;
  vertical-align: top;
  word-break: break-word;
  max-width: 320px;
}
.chat-tool-detail__table th {
  background: rgba(0, 0, 0, 0.05);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text, currentColor);
  position: sticky;
  top: 0;
}
.chat-tool-detail__table tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.015);
}

/* Typing indicator — three dots bouncing in sequence while we wait
   for the first token from the model. */
.chat-msg__text--thinking {
  display: inline-flex;
  align-items: center;
  min-height: 1.4em;
}

/* Typing dots (renamed from .chat-thinking → .chat-thinking-dots in D2) */
.chat-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}

.chat-thinking__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted, rgba(0, 0, 0, 0.4));
  animation: chatThinkingBounce 1.2s ease-in-out infinite both;
}

.chat-thinking__dot:nth-child(2) { animation-delay: 0.15s; }
.chat-thinking__dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatThinkingBounce {
  0%, 70%, 100% {
    transform: translateY(0) scale(0.85);
    opacity: 0.4;
  }
  35% {
    transform: translateY(-4px) scale(1);
    opacity: 1;
  }
}

/* ── Thinking-first assistant bubble (D2) ────────────────────────── */
/* Collapsible thinking region — wraps reasoning segments, tool pills,
   plan checklist, and subagent blocks in arrival order. */
.chat-thinking {
  margin: 0 0 0.4rem 0;
  font-size: 0.82em;
  color: var(--muted-fg, rgba(0,0,0,0.55));
  border-left: 2px solid var(--border, rgba(0,0,0,0.12));
  padding-left: 0.6em;
}
/* No reasoning + no tools (e.g. a non-reasoning model) → plain bubble.
   Revealed by JS the moment any trace content arrives. */
.chat-thinking--empty { display: none; }
.chat-thinking:not([open]) { margin-bottom: 0.2rem; }

.chat-thinking__summary {
  cursor: pointer;
  user-select: none;
  font-style: italic;
  outline: none;
  padding: 0.1em 0;
  list-style: none; /* hide default triangle in some browsers */
}
.chat-thinking__summary::-webkit-details-marker { display: none; }
.chat-thinking__summary::before {
  content: "▸ ";
  font-style: normal;
  font-size: 0.8em;
  opacity: 0.6;
}
details.chat-thinking[open] .chat-thinking__summary::before { content: "▾ "; }
.chat-thinking__summary:hover { color: var(--card-fg, inherit); }

.chat-thinking__trace {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 0.35em;
  padding-bottom: 0.2em;
}

/* Per-round reasoning segments inside the thinking region */
.chat-thinking__reasoning-seg {
  white-space: pre-wrap;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
  line-height: 1.45;
  opacity: 0.9;
  color: var(--muted-fg, rgba(0,0,0,0.55));
}

/* Intermediate narration ("Je relance la recherche…") the model emits
   between tool rounds — prose, not CoT mono, and clearly the model speaking. */
.chat-thinking__narration-seg {
  font-size: 0.95em;
  line-height: 1.5;
  color: var(--card-fg, inherit);
  opacity: 0.85;
  padding: 2px 0;
}
.chat-thinking__narration-seg p { margin: 0 0 0.4em; }
.chat-thinking__narration-seg p:last-child { margin-bottom: 0; }

/* ── Legacy reasoning block (kept for non-agentic paths) ───────── */
.chat-reasoning {
  margin: 0.25rem 0.75rem 0.5rem 0.75rem;
  font-size: 0.82em;
  color: var(--muted-fg, rgba(0,0,0,0.55));
  border-left: 2px solid var(--border, rgba(0,0,0,0.12));
  padding-left: 0.6em;
}
.chat-reasoning__summary {
  cursor: pointer;
  user-select: none;
  font-style: italic;
  outline: none;
  padding: 0.1em 0;
}
.chat-reasoning__summary:hover { color: var(--card-fg, inherit); }
.chat-reasoning[data-streaming="true"] .chat-reasoning__summary::after {
  content: " …";
  opacity: 0.7;
}
.chat-reasoning__body {
  margin-top: 0.35em;
  white-space: pre-wrap;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
  line-height: 1.45;
  opacity: 0.9;
}

/* ── Plan checklist (update_plan → checklist, not pill) ─────────── */
.chat-plan {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.035);
  font-size: 13px;
  color: var(--text, currentColor);
  align-self: flex-start;
  max-width: 100%;
}
.chat-plan__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, rgba(0,0,0,0.55));
}
.chat-plan__progress {
  margin-left: auto;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  background: #fff;
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  padding: 1px 8px;
  border-radius: 99px;
  color: #2563eb;
}
.chat-plan__step {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  padding: 3px 0;
  line-height: 1.4;
  color: var(--text-muted, rgba(0,0,0,0.65));
}
/* Lucide icon inside the step mark */
.chat-plan__mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
}
.chat-plan__mark  :is(i, svg) {
  width: 15px;
  height: 15px;
}
.chat-plan__step--done {
  color: #15803d;
}
.chat-plan__step--done .chat-plan__content {
  text-decoration: line-through;
  opacity: 0.7;
}
.chat-plan__step--active {
  color: #2563eb;
  font-weight: 500;
}
.chat-plan--complete .chat-plan__header {
  color: var(--success, #16a34a);
}

/* Pinned plan container — sits above the thinking region so the todo stays
   visible even when Réflexion is collapsed. */
.chat-plan-pin:empty { display: none; }
.chat-plan-pin:not(:empty) { margin-bottom: 0.45rem; }
.chat-plan-pin .chat-plan {
  width: 100%;
  max-width: 100%;
}

/* Progress bar under the plan header. */
.chat-plan__bar {
  height: 5px;
  border-radius: 99px;
  background: #e5e7eb;
  overflow: hidden;
  margin-bottom: 10px;
}
.chat-plan__bar-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: #2563eb;
}
@media (prefers-reduced-motion: no-preference) {
  .chat-plan__bar-fill { transition: width 0.35s ease; }
}
.chat-plan--complete .chat-plan__bar-fill { background: var(--success, #16a34a); }

/* Active-step hint in the header while running. */
.chat-plan__active {
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--primary, #2563eb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22ch;
}

/* Animated in-progress lucide icon. */
@media (prefers-reduced-motion: no-preference) {
  .chat-plan__step--active .chat-plan__mark  :is(i, svg) { animation: chatPlanSpin 1s linear infinite; }
}
@keyframes chatPlanSpin {
  to { transform: rotate(360deg); }
}
/* Fallback pulse for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .chat-plan__step--active .chat-plan__mark { animation: chatPlanPulse 1.2s ease-in-out infinite; }
}
@keyframes chatPlanPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Delegated-step badge. */
.chat-plan__badge {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
  white-space: nowrap;
}

/* Folded state — a completed plan tucked back into the thinking region. */
.chat-plan--folded {
  opacity: 0.7;
  font-size: 0.95em;
}


/* ── Subagent / delegate block (collapsible, clearly a sub-agent) ─── */
.chat-delegate {
  align-self: stretch;
  border: 1px solid rgba(124, 58, 237, 0.28);
  border-left-width: 3px;
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.04);
  font-size: 12.5px;
  line-height: 1.2;
  color: #7c3aed;
  overflow: hidden;
}
.chat-delegate__summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-style: italic;
}
.chat-delegate__summary::-webkit-details-marker { display: none; }
/* Tag-style badge — matches .tag from the mockup */
.chat-delegate__badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}
.chat-delegate__wf {
  flex-shrink: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-style: normal;
  font-size: 0.92em;
  opacity: 0.85;
}
.chat-delegate__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  opacity: 0.75;
}
.chat-delegate--running {
  border-color: rgba(124, 58, 237, 0.4);
  background: rgba(124, 58, 237, 0.06);
}
.chat-delegate--done {
  border-color: rgba(22, 163, 74, 0.3);
  background: rgba(22, 163, 74, 0.05);
  color: #15803d;
}
.chat-delegate--done .chat-delegate__badge,
.chat-delegate--done .chat-delegate__wf { color: #15803d; }
.chat-delegate--done .chat-delegate__badge { background: rgba(22, 163, 74, 0.12); }
.chat-delegate--error {
  border-color: rgba(220, 38, 38, 0.3);
  background: rgba(220, 38, 38, 0.05);
  color: #b91c1c;
}
.chat-delegate--error .chat-delegate__badge { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }

/* Nested sub-agent activity — its own tool calls, indented under the block. */
.chat-delegate__trace {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 10px 9px 18px;
  border-top: 1px dashed rgba(124, 58, 237, 0.2);
}
.chat-delegate__trace:empty { display: none; }
.chat-subrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-size: 12px;
  color: var(--text-muted, rgba(0, 0, 0, 0.6));
}
.chat-subrow--running { color: #7c3aed; }
.chat-subrow--done { color: #15803d; }
.chat-subrow--error { color: #b91c1c; }
.chat-subrow__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30ch;
}

/* ── Markdown inside assistant bubbles ──────────────────────────── */
.chat-msg__bubble--assistant p { margin: 0 0 0.5em; }
.chat-msg__bubble--assistant p:last-child { margin-bottom: 0; }
.chat-msg__bubble--assistant ul,
.chat-msg__bubble--assistant ol {
  margin: 0.25em 0 0.5em;
  padding-left: 1.4em;
}
.chat-msg__bubble--assistant li { margin-bottom: 0.15em; }
.chat-msg__bubble--assistant li:last-child { margin-bottom: 0; }
.chat-msg__bubble--assistant strong { font-weight: 600; }
.chat-msg__bubble--assistant code {
  background: var(--muted, rgba(0,0,0,0.06));
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.88em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.chat-msg__bubble--assistant pre {
  background: var(--muted, rgba(0,0,0,0.06));
  padding: 0.6em 0.8em;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0.4em 0;
}
.chat-msg__bubble--assistant pre code {
  background: none;
  padding: 0;
  font-size: 0.85em;
}
.chat-msg__bubble--assistant h1,
.chat-msg__bubble--assistant h2,
.chat-msg__bubble--assistant h3,
.chat-msg__bubble--assistant h4 {
  margin: 0.6em 0 0.3em;
  font-weight: 600;
  line-height: 1.3;
}
.chat-msg__bubble--assistant h1 { font-size: 1.15em; }
.chat-msg__bubble--assistant h2 { font-size: 1.08em; }
.chat-msg__bubble--assistant h3 { font-size: 1em; }
.chat-msg__bubble--assistant h4 { font-size: 0.95em; }
.chat-msg__bubble--assistant table {
  border-collapse: collapse;
  margin: 0.4em 0;
  font-size: 0.9em;
  width: 100%;
}
.chat-msg__bubble--assistant th,
.chat-msg__bubble--assistant td {
  border: 1px solid var(--border);
  padding: 0.25em 0.5em;
  text-align: left;
}
.chat-msg__bubble--assistant th {
  background: var(--muted, rgba(0,0,0,0.04));
  font-weight: 600;
}
.chat-msg__bubble--assistant blockquote {
  border-left: 3px solid var(--border);
  margin: 0.4em 0;
  padding: 0.2em 0.6em;
  color: var(--text-muted);
}
.chat-msg__bubble--assistant hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.5em 0;
}

/* Markdown content in assistant bubbles */
.chat-md p { margin: 0 0 0.5em; }
.chat-md p:last-child { margin-bottom: 0; }
.chat-md ul, .chat-md ol { margin: 0.25em 0; padding-left: 1.5em; }
.chat-md li { margin: 0.15em 0; }
.chat-md code {
  background: var(--border);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.85em;
}
.chat-md pre {
  background: var(--card-bg, #f5f5f5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2);
  overflow-x: auto;
  font-size: 0.8rem;
  margin: 0.5em 0;
}
.chat-md pre code {
  background: none;
  padding: 0;
}
.chat-md strong { font-weight: 600; }
.chat-md h1, .chat-md h2, .chat-md h3 {
  font-size: 1em;
  font-weight: 600;
  margin: 0.5em 0 0.25em;
}
.chat-md hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.5em 0;
}
.chat-md table {
  border-collapse: collapse;
  font-size: 0.85em;
  margin: 0.5em 0;
}
.chat-md th, .chat-md td {
  border: 1px solid var(--border);
  padding: 4px 8px;
}

/* Tool call bubbles */
.chat-msg--tool {
  justify-content: flex-start;
}

.chat-msg__bubble--tool {
  background: var(--background);
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-family: monospace;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
}

.chat-msg__bubble--tool-error {
  border-color: var(--danger, #e53e3e);
  color: var(--danger, #e53e3e);
}

/* Tool loading state */
.chat-msg__bubble--tool-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  animation: chatToolPulse 2s ease-in-out infinite;
}

.chat-tool-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: chatToolSpin 0.8s linear infinite;
  flex-shrink: 0;
}

/* ===== Result list (#232) ===== */

.result-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}

.result-list__items {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Layout-only wrapper; the tile inside carries its own border/padding/bg.
   Hover/focus use box-shadow + outline (drawn outside the box) so the
   opaque tile doesn't hide them. */
.result-list__row {
  border-radius: var(--radius-sm, 6px);
}

.result-list__row--clickable {
  cursor: pointer;
  transition: box-shadow 0.12s ease;
}

.result-list__row--clickable:hover {
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.result-list__row--clickable:focus-visible {
  outline: 2px solid var(--brand, #16a34a);
  outline-offset: 2px;
}

.result-list__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.4rem;
}

.result-list__more {
  border: 1px solid var(--border);
  background: var(--background);
  border-radius: 999px;
  padding: 0.3rem 0.95rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.result-list__more:hover {
  background: var(--surface-hover, rgba(0, 0, 0, 0.04));
  color: var(--card-fg);
  border-color: var(--muted);
}

.result-list__more:focus-visible {
  outline: 2px solid var(--brand, #16a34a);
  outline-offset: 2px;
}

.result-list__footnote {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

.result-list__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Widget interactivity (drag-to-pop, collapse, close) ─────────── */
chat-chart,

/* Widget header — flex bar containing [grip] [title] [chevron] [×].
   Always in flow, never absolute: handle reserves its column, title
   takes the remaining space and truncates, controls sit on the right.

   Negative margins on the top + sides cancel the host card's padding
   so the header sits flush with the card edges. ``margin-bottom``
   reintroduces the spacing — between header and body — that the
   user actually wants. Card padding hovers around 0.7-0.75rem ×
   0.85rem; using 0.75/0.85 covers both within a 1 px tolerance. */
.widget-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin: -0.75rem -0.85rem 0.6rem;
  min-height: 30px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.widget--floating .widget-header,
.widget--collapsed .widget-header {
  background: rgba(0, 0, 0, 0.025);
  border-bottom-color: var(--border, rgba(0, 0, 0, 0.08));
}
.widget--collapsed .widget-header {
  margin: 0;
  border-bottom-color: transparent;
}


.widget-header__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted, rgba(0, 0, 0, 0.6));
  font-weight: 500;
  pointer-events: none;
}

/* Drag handle and corner controls: muted by default, full opacity on
   widget hover / floating / collapsed states.  No more absolute
   positioning — they live inside ``.widget-header``. */
.widget-drag-handle,
.widget-corner-controls {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  opacity: 0.45;
  transition: opacity 0.12s ease;
}
.widget-corner-controls {
  gap: 2px;
}
.widget:hover .widget-drag-handle,
.widget:hover .widget-corner-controls,
.widget--floating .widget-drag-handle,
.widget--floating .widget-corner-controls,
.widget--collapsed .widget-drag-handle,
.widget--collapsed .widget-corner-controls {
  opacity: 1;
}

.widget-drag-handle {
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted, rgba(0, 0, 0, 0.55));
  cursor: grab;
  touch-action: none;
}
.widget-drag-handle:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text, currentColor);
}
.widget-drag-handle:active,
body.widget-dragging .widget-drag-handle {
  cursor: grabbing;
}
.widget-drag-handle svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

/* Click-to-open-detail: widgets that carry a detail URL show a pointer
   cursor on hover so the affordance is discoverable. The handle and
   corner buttons override this with their own cursor rules. */
.widget--clickable {
  cursor: pointer;
}

.widget-corner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted, rgba(0, 0, 0, 0.55));
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.widget-corner-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text, currentColor);
}
.widget-corner-btn--close:hover {
  background: rgba(220, 38, 38, 0.92);
  color: #fff;
}

/* The close button only makes sense when the widget is detached from
   its message — no point closing something that's still sitting where
   it belongs.  Show it on floating widgets only. */
.widget-corner-btn--close { display: none; }
.widget--floating .widget-corner-btn--close { display: inline-flex; }
.widget-corner-btn svg {
  width: 13px;
  height: 13px;
  stroke-width: 2;
}

/* Collapsed: hide the body wrapper — the header alone remains visible
   and acts as a thin status bar. */
.widget--collapsed .widget__content { display: none; }
.widget--collapsed {
  padding: 0 !important;
  min-height: 0;
}

/* Free-floating: position: fixed, solid background, raised shadow.
   The user asked for "way more opaque" when moving — force the card
   to a fully solid surface so the chat content doesn't bleed through. */
.widget--floating {
  position: fixed !important;
  margin: 0 !important;
  z-index: 900;
  max-width: 480px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  border-radius: 12px !important;
  background: var(--background, #fff) !important;
}
/* During an active drag, suppress text selection across the page and
   keep the cursor as grabbing. */
body.widget-dragging {
  user-select: none;
  cursor: grabbing;
}
body.widget-dragging .widget--floating {
  cursor: grabbing;
}

chat-chart {
  display: block;
}

.chat-tool-label {
  font-weight: 500;
}

.chat-tool-loading-text {
  color: var(--muted);
  font-style: italic;
  font-family: inherit;
}

@keyframes chatToolSpin {
  to { transform: rotate(360deg); }
}

@keyframes chatToolPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ── Sub-agent progress card ────────────────────────────────────── */

.chat-subagent-card__bubble {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: var(--sp-3) !important;
  background: linear-gradient(135deg, #f5f3ff 0%, #faf5ff 100%);
  max-width: 100%;
  cursor: default !important;
}

.chat-subagent-card__header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.chat-subagent-card__label {
  font-weight: 600;
  font-size: var(--text-sm);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-subagent-card__step {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  font-style: italic;
}

.chat-subagent-card__tools {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 20px;
  margin-top: var(--sp-1);
}

.chat-subagent-card__tools:empty {
  display: none;
}

.chat-subagent-card__tool {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--muted);
  padding: 2px 0;
}

.chat-subagent-card__tool--done { color: var(--card-fg); }
.chat-subagent-card__tool--error { color: var(--danger); }

.chat-subagent-card__tool-icon { font-size: 0.7rem; flex-shrink: 0; }
.chat-subagent-card__tool-name { font-weight: 500; }
.chat-subagent-card__tool-status { font-style: italic; }
.chat-subagent-card__tool-duration { font-size: 0.65rem; color: var(--muted); }

.chat-subagent-card__tool .chat-tool-spinner {
  width: 10px;
  height: 10px;
  border-width: 1.5px;
}

.chat-subagent-card--done .chat-subagent-card__header .chat-tool-spinner { display: none; }

.chat-subagent-card__done-icon {
  color: var(--success, #22c55e);
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ── Orchestrator step indicator ────────────────────────────────── */

.chat-orchestrator-step {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
  animation: chatToolPulse 2s ease-in-out infinite;
}

.chat-orchestrator-step--done {
  animation: none;
  opacity: 1;
  font-style: normal;
}

.chat-orchestrator-step__spinner {
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: chatToolSpin 0.8s linear infinite;
  flex-shrink: 0;
}

/* Mic button active (recording) */
.chat-panel__mic-btn--active {
  color: var(--primary-fg, #fff);
  background: var(--danger, #e53e3e);
  animation: chatMicPulse 1.5s ease-in-out infinite;
}

@keyframes chatMicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(229, 62, 62, 0); }
}

/* ── Artifact entries ─────────────────────────────────────────── */
.artifact-entry {
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  font-size: var(--text-xs);
}

.artifact-entry__header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.artifact-entry__hint {
  font-size: var(--text-sm);
  color: var(--muted);
  font-style: italic;
}

.artifact-entry__fields {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-1) var(--sp-3);
  align-items: center;
  font-size: var(--text-sm);
}

.artifact-entry__field-name {
  color: var(--muted);
  font-weight: 500;
}

.artifact-entry__field-value { color: var(--card-fg); }

.artifact-entry__cert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.artifact-entry__cert-dot--high { background: var(--success, #22c55e); }
.artifact-entry__cert-dot--mid { background: var(--warning, #eab308); }
.artifact-entry__cert-dot--low { background: var(--danger, #e53e3e); }

.artifact-entry__alert {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-xs);
  border-radius: var(--radius);
  background: rgba(234, 179, 8, 0.08);
  border-left: 3px solid var(--warning, #eab308);
  color: var(--card-fg);
}

.artifact-entry__missing {
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--muted);
}

.chat-tool-result {
  margin-top: var(--sp-2);
  padding: var(--sp-2);
  background: var(--card-bg, #f7f7f7);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}

/* ── Forecast tool card ───────────────────────────────────────────── */

.chat-forecast-card {
  border: 1px solid var(--border) !important;
  border-style: solid !important;
  border-radius: var(--radius) !important;
  padding: var(--sp-3) !important;
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
  max-width: 100%;
  cursor: default !important;
}
.chat-forecast-card__location { font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--sp-2); }
.chat-forecast-card__days {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-1);
}
.chat-forecast-card__day {
  flex: 0 0 auto;
  text-align: center;
  min-width: 52px;
  padding: var(--sp-1);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.6);
}
.chat-forecast-card__date { font-size: 0.7rem; font-weight: 600; margin-bottom: 2px; }
.chat-forecast-card__icon { font-size: 20px; line-height: 1; }
.chat-forecast-card__temps { font-size: 0.75rem; }
.chat-forecast-card__max { font-weight: 600; }
.chat-forecast-card__min { color: var(--muted-fg); margin-left: 2px; }
.chat-forecast-card__rain { font-size: 0.65rem; color: var(--muted-fg); }

/* ── EPHY tool card ──────────────────────────────────────────────── */

.chat-ephy-card {
  border: 1px solid var(--border) !important;
  border-style: solid !important;
  border-radius: var(--radius) !important;
  padding: var(--sp-3) !important;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  max-width: 100%;
  cursor: default !important;
}
.chat-ephy-card__header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.chat-ephy-card__icon { font-size: 24px; line-height: 1; }
.chat-ephy-card__title { font-weight: 600; font-size: var(--text-sm); }
.chat-ephy-card__sub { font-size: 0.75rem; color: var(--muted-fg); }

.chat-ephy-card__badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9999px;
  white-space: nowrap;
}
.chat-ephy-card__badge--ok { background: #dcfce7; color: #166534; }
.chat-ephy-card__badge--withdrawn { background: #fee2e2; color: #991b1b; }
.chat-ephy-card__badge--other { background: var(--surface-2); color: var(--muted-fg); }

.chat-ephy-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.chat-ephy-card__item {
  padding: var(--sp-2);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.6);
}
.chat-ephy-card__item--collapsible { cursor: pointer; }
.chat-ephy-card__item--collapsible summary { list-style: none; }
.chat-ephy-card__item--collapsible summary::-webkit-details-marker { display: none; }
.chat-ephy-card__item--collapsible[open] { background: rgba(255,255,255,0.85); }
.chat-ephy-card__item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.chat-ephy-card__item-name {
  font-weight: 600;
  font-size: 0.8rem;
}
.chat-ephy-card__item-body {
  margin-top: var(--sp-1);
  padding-top: var(--sp-1);
  border-top: 1px solid var(--border);
}
.chat-ephy-card__item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: 0.72rem;
  color: var(--muted-fg);
}
.chat-ephy-card__item-details {
  font-size: 0.7rem;
  color: var(--muted-fg);
  margin-top: 2px;
}

/* Sections in full product card */
.chat-ephy-card__section { margin-bottom: var(--sp-2); }
.chat-ephy-card__section-collapsible {
  margin-bottom: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.chat-ephy-card__section-title {
  font-size: 0.8rem;
  font-weight: 600;
  padding: var(--sp-2);
  cursor: pointer;
  background: rgba(255,255,255,0.5);
}
.chat-ephy-card__section-title:hover { background: rgba(255,255,255,0.8); }

.chat-ephy-card__danger-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  padding: var(--sp-2);
}
.chat-ephy-card__danger {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: #fef3c7;
  color: #92400e;
}

.chat-ephy-card__usage-list {
  padding: var(--sp-1);
  max-height: 240px;
  overflow-y: auto;
}
.chat-ephy-card__usage-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  font-size: 0.72rem;
  border-bottom: 1px solid var(--border);
}
.chat-ephy-card__usage-row:last-child { border-bottom: none; }
.chat-ephy-card__usage-crop { font-weight: 600; }
.chat-ephy-card__usage-target { color: var(--muted-fg); }
.chat-ephy-card__usage-dose { color: var(--fg); font-weight: 500; }
.chat-ephy-card__more {
  text-align: center;
  font-size: 0.7rem;
  color: var(--muted-fg);
  padding: var(--sp-1);
}

.chat-ephy-card__cond-list { padding: var(--sp-2); }
.chat-ephy-card__cond-row {
  display: flex;
  gap: var(--sp-2);
  font-size: 0.72rem;
  padding: 2px 0;
  border-bottom: 1px solid var(--border);
}
.chat-ephy-card__cond-row:last-child { border-bottom: none; }
.chat-ephy-card__cond-cat { font-weight: 600; white-space: nowrap; min-width: 80px; }

.chat-ephy-card__source {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  font-size: 0.65rem;
  color: var(--muted-fg);
  font-style: italic;
}

/* ── Declaration card (calendar skill — interactions, inspections) ── */

/*
 * Design rules (from 2026-04-30 spec):
 *   1. Title is the story (descriptive_name), not a label.
 *   2. Notes are the focal content, not a field — set off with guillemets.
 *   3. Empty fields never render — handled by the JS renderer.
 *   4. One quiet kind-tint on the left border, body stays paper-coloured.
 *   5. Iconography is chosen, not emoji-soup — lucide icon per kind.
 *   6. Actions are ghost-style, secondary.
 */

.chat-decl-card {
  border: 1px solid var(--border) !important;
  border-style: solid !important;
  border-left-width: 3px !important;
  border-radius: var(--radius) !important;
  padding: var(--sp-3) !important;
  background: var(--surface);
  max-width: 100%;
  cursor: default !important;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.chat-decl-card--interaction {
  border-left-color: var(--brand);
}

.chat-decl-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.chat-decl-card__icon-wrap {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--brand);
}
.chat-decl-card__icon-wrap > i,
.chat-decl-card__icon-wrap > svg {
  width: 16px;
  height: 16px;
}

.chat-decl-card__title-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-decl-card__title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--fg);
  line-height: 1.3;
}

.chat-decl-card__counterpart {
  font-size: 0.78rem;
  color: var(--fg);
  opacity: 0.85;
}

.chat-decl-card__subtitle {
  font-size: 0.72rem;
  color: var(--muted-fg);
  letter-spacing: 0.01em;
}

.chat-decl-card__notes {
  font-size: 0.85rem;
  color: var(--fg);
  line-height: 1.5;
  padding: var(--sp-2) var(--sp-2);
  background: var(--surface-2);
  border-radius: calc(var(--radius) - 2px);
  font-style: italic;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Chambre d'agriculture structured extra fields (theme, activity_type, …) */
.chat-decl-card__extra {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2);
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
}
.chat-decl-card__extra-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  line-height: 1.4;
}
.chat-decl-card__extra-label {
  color: var(--muted-fg);
  flex: 0 0 auto;
}
.chat-decl-card__extra-val {
  color: var(--fg);
  text-align: right;
  flex: 1 1 auto;
  word-break: break-word;
}

.chat-decl-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

.chat-decl-card__action {
  appearance: none;
  background: transparent;
  border: none;
  padding: 2px 4px;
  font-size: 0.75rem;
  color: var(--muted-fg);
  cursor: pointer;
  border-radius: 3px;
  transition: color 120ms ease, background-color 120ms ease;
}
.chat-decl-card__action:hover {
  color: var(--fg);
  background: var(--surface-2);
}
.chat-decl-card__action--danger:hover {
  color: #b91c1c;
  background: #fee2e2;
}

/* Tool error — shared fallback for any tool returning {status: "error", ...}.
   Rendered in place of a card when the result envelope doesn't carry a hydrated
   entity. Yellow/amber tone — this is "I need more info", not a crash. */

.chat-tool-warn {
  border: 1px solid #fde68a !important;
  border-radius: var(--radius) !important;
  padding: var(--sp-2) var(--sp-3) !important;
  background: #fffbeb;
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  cursor: default !important;
  color: #78350f;
}
.chat-tool-warn__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b45309;
}
.chat-tool-warn__icon > svg { width: 14px; height: 14px; }
.chat-tool-warn__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8rem;
  line-height: 1.4;
}
.chat-tool-warn__msg {
  color: #78350f;
}
.chat-tool-warn__missing {
  color: #92400e;
  font-weight: 500;
}

/* Tombstone — what replaces a card after the user clicks Delete. */

.chat-decl-tombstone {
  border: 1px dashed var(--border) !important;
  border-radius: var(--radius) !important;
  padding: var(--sp-2) var(--sp-3) !important;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--muted-fg);
  cursor: default !important;
}
.chat-decl-tombstone__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}
.chat-decl-tombstone__icon > svg { width: 14px; height: 14px; }
.chat-decl-tombstone__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.chat-decl-tombstone__title {
  font-size: 0.8rem;
  color: var(--fg);
  opacity: 0.75;
}
.chat-decl-tombstone__sub {
  font-size: 0.7rem;
  color: var(--muted-fg);
}

/* ── Chat Toggle — branded green in topbar ────────────────────────── */

/* Closed: same outline as siblings, just inherits btn--outline */
/* Open: branded green solid */
.topbar__chat-toggle--active.btn {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.topbar__chat-toggle--active.btn:hover {
  background: #5a920c;
  border-color: #5a920c;
}


/* ── Sidebar Overlay (mobile) ──────────────────────────────────────── */

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 25;
}

.sidebar-overlay--visible { display: block; }

/* ── Placeholder Page ──────────────────────────────────────────────── */

.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: var(--sp-4);
  color: var(--muted);
}

.placeholder__icon { width: 48px; height: 48px; }
.placeholder__title { font-size: var(--text-2xl); font-weight: 600; color: var(--primary); }
.placeholder__hint { font-size: var(--text-base); }
.not-found__code { font-family: 'Instrument Serif', serif; font-size: 3.5rem; line-height: 1; color: var(--primary); opacity: .2; }

/* ── Login Page (standalone, no shell) ──────────────────────────────── */

/* ── Shared Auth Pages (login, register, verify, onboarding) ───────── */

.auth-page {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100vh;
  background: var(--background);
  font-family: var(--font-body);
  padding: 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Auth page background overlay — decorative only, behind the card */
.auth-page__bg {
  display: none;
}

/* Language dropdown — floating bottom-right on auth pages */
.lang-picker {
  position: fixed;
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  right: var(--sp-4);
  z-index: 10;
  appearance: none;
  -webkit-appearance: none;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  color: var(--muted);
  cursor: pointer;
}

.auth-page__card,
.auth-page__card--wide {
  position: relative;
  z-index: 1;
  background: var(--background);
  border: none;
  border-radius: 0;
  padding: var(--sp-10) var(--sp-8);
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-page__card--wide {
  max-width: 960px;
}

.auth-page__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}

.auth-page__logo-svg {
  width: 120px;
  height: auto;
  flex-shrink: 0;
}

.auth-page__brand {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--primary);
}

.auth-page__lang-switcher {
  position: fixed;
  bottom: var(--sp-4);
  right: var(--sp-4);
  z-index: 50;
}
.auth-page__lang-select {
  padding: var(--sp-1) var(--sp-8) var(--sp-1) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--primary);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-2) center;
}
.auth-page__lang-select:focus {
  border-color: var(--brand);
  outline: none;
}

.auth-page__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--primary);
  margin-bottom: var(--sp-3);
  text-align: center;
}

.auth-page__subtitle {
  font-size: var(--text-sm);
  color: var(--muted);
  text-align: center;
  margin-bottom: var(--sp-2);
  line-height: var(--lh-sm);
}

.auth-page__footer {
  text-align: center;
  margin-top: var(--sp-6);
  font-size: var(--text-sm);
  color: var(--muted);
}

.auth-page__link {
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
}

.auth-page__link:hover {
  text-decoration: underline;
}

.auth-page__inline-form {
  display: inline;
}

.auth-page__link-btn {
  all: unset;
  color: var(--brand);
  font-weight: 500;
  cursor: pointer;
  font-size: var(--text-sm);
}

.auth-page__link-btn:hover {
  text-decoration: underline;
}

/* ── Radio card selector (Figma-style large cards) ───────────────── */

.radio-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
@media (max-width: 600px) {
  .radio-card-grid { grid-template-columns: repeat(2, 1fr); }
}

.radio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-3);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--background);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.radio-card:hover:not(.radio-card--disabled) {
  border-color: var(--brand);
  background: var(--brand-light);
}

.radio-card--selected {
  border-color: var(--brand);
  background: var(--brand-light);
  box-shadow: 0 0 0 3px rgba(101, 163, 13, 0.15);
}
.radio-card--selected .radio-card__title {
  color: var(--brand);
  font-weight: 600;
}
.radio-card--selected .radio-card__radio {
  border-color: var(--brand);
  background: var(--brand);
}
.radio-card--selected .radio-card__radio::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: white;
}

.radio-card--disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.radio-card__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.radio-card__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--primary);
  transition: color 0.15s;
}

.radio-card__desc {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.3;
}

.radio-card__radio {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
}

.auth-form__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--card-fg);
  margin-bottom: calc(-1 * var(--sp-1));
}

.auth-form__input {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--background);
  color: var(--card-fg);
}

.auth-form__input:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px rgba(101, 163, 13, 0.1);
}

.auth-form__input::placeholder {
  color: var(--muted);
}

.auth-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: var(--sp-10);
  cursor: pointer;
}

.auth-form__submit {
  width: 100%;
  margin-top: var(--sp-2);
}

.auth-form__forgot {
  text-align: right;
  margin-top: calc(-1 * var(--sp-1));
}
.auth-form__forgot .auth-page__link {
  font-size: var(--text-sm);
}

.auth-page__email-highlight {
  font-weight: 600;
  color: var(--primary);
}

.auth-form__error {
  background: var(--danger-light);
  color: var(--danger);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid rgba(220, 38, 38, 0.15);
  margin-bottom: var(--sp-4);
}

.auth-form__success {
  background: var(--success-light);
  color: var(--success);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid rgba(22, 163, 74, 0.15);
  margin-bottom: var(--sp-4);
}

/* ── Confirm summary (onboarding org review) ────────────────────── */

.confirm-summary {
  display: grid;
  gap: 0;
  margin-bottom: var(--sp-6);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.confirm-summary__row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-6);
}

.confirm-summary__row + .confirm-summary__row {
  border-top: 1px solid var(--border);
}

.confirm-summary__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.confirm-summary__value {
  font-size: var(--text-base);
  color: var(--card-fg);
  font-weight: 600;
}

.confirm-summary__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--sp-3) var(--sp-6);
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.015);
}

.confirm-summary__edit-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1-5);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--brand);
  text-decoration: none;
}

.confirm-summary__edit-link:hover {
  text-decoration: underline;
}

.confirm-summary__edit-icon {
  width: 14px;
  height: 14px;
}

/* ── Org type card selector ───────────────────────────────────────── */

.org-type-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

@media (max-width: 600px) {
  .org-type-cards { grid-template-columns: repeat(2, 1fr); }
}

.org-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-2);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  text-align: center;
}

.org-type-card:hover {
  border-color: var(--brand);
  background: var(--brand-light);
}

.org-type-card--selected {
  border-color: var(--brand);
  background: var(--brand-light);
  box-shadow: 0 0 0 3px rgba(101, 163, 13, 0.15);
}

.org-type-card__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.org-type-card__icon {
  font-size: 32px;
  line-height: 1;
}

.org-type-card__name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--primary);
}

.org-type-card__hint {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.3;
}

/* ── Stepper (onboarding progress) ────────────────────────────────── */

.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1-5);
  margin: 0 calc(-1 * var(--sp-4)) var(--sp-8);
  flex-wrap: wrap;
  row-gap: var(--sp-2);
}

.stepper__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  flex-shrink: 0;
  border: 2px solid var(--border);
  color: var(--muted);
  background: var(--background);
  transition: all 0.2s ease;
}

.stepper__number--done {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.stepper__number--active {
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 0 0 3px rgba(101, 163, 13, 0.15);
}

.stepper__label {
  font-size: var(--text-sm);
  color: var(--muted);
  white-space: nowrap;
}

.stepper__line {
  width: 40px;
  height: 2px;
  background: var(--border);
  flex-shrink: 0;
  border-radius: 1px;
}

/* ── Invite Dialog (native <dialog> styled as modal) ─────────────── */

.invite-dialog:not([open]) {
  display: none;
}

.invite-dialog[open] {
  border: none;
  background: transparent;
  padding: var(--sp-4);
  max-width: none;
  width: 100%;
  height: 100%;
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.invite-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.invite-dialog__content {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-8);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-sm);
}

.invite-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}

.invite-dialog__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--card-fg);
}

.invite-dialog__close {
  all: unset;
  cursor: pointer;
  color: var(--muted);
  padding: var(--sp-1);
  border-radius: var(--radius-sm);
}

.invite-dialog__close:hover {
  color: var(--card-fg);
  background: var(--surface);
}

.invite-dialog__desc {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--lh-sm);
  margin-bottom: var(--sp-6);
}

.invite-dialog__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.invite-dialog__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.invite-dialog__hint {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: var(--lh-sm);
}

.invite-dialog__link-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2);
}

.invite-dialog__link-input {
  all: unset;
  flex: 1;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  color: var(--card-fg);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-dialog__link-input::placeholder {
  color: var(--muted);
  font-family: var(--font-sans, sans-serif);
  font-style: italic;
}

.invite-dialog__copy-btn {
  all: unset;
  cursor: pointer;
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  color: var(--muted);
  flex-shrink: 0;
}

.invite-dialog__copy-btn:hover {
  color: var(--card-fg);
  background: var(--surface);
}

.invite-dialog__feedback {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  min-height: var(--lh-sm);
}

.invite-dialog__feedback--ok {
  color: var(--success);
}

.invite-dialog__feedback--err {
  color: var(--danger);
}

.invite-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

/* ── Searchable input (HTMX combobox) ──────────────────────────────── */

.searchable-input {
  position: relative;
}
.parcel-field:has(.searchable-input) {
  position: relative;
  z-index: 1;
}
.parcel-field:has(.searchable-input__results:not(:empty)) {
  z-index: 50;
}

.searchable-input__wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.searchable-input__icon {
  position: absolute;
  left: var(--sp-3);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}

.searchable-input__field {
  width: 100%;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--card-bg);
  color: var(--card-fg);
}

.searchable-input__field:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}
.searchable-input__results:empty {
  display: none;
}

.searchable-input__results:not(:empty) {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-height: 200px;
  overflow-y: auto;
  margin-top: var(--sp-1);
}

.searchable-input__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  transition: background 0.1s;
}

.searchable-input__item:hover {
  background: var(--surface);
}

.searchable-input__item-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--card-fg);
}

.searchable-input__item-sub {
  font-size: var(--text-xs);
  color: var(--muted);
}

.searchable-input__empty {
  display: block;
  padding: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--muted);
  text-align: center;
}

/* ── Invitation list (pending invitations) ────────────────────────── */

.invite-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
}

.invite-row__info {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.invite-row__expires {
  font-size: var(--text-sm);
  color: var(--muted);
}

.invite-row__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.invite-row__creator {
  font-size: var(--text-sm);
  color: var(--muted);
}

.invite-row__revoke {
  all: unset;
  cursor: pointer;
  color: var(--muted);
  padding: var(--sp-1);
  border-radius: var(--radius-sm);
}

.invite-row__revoke:hover {
  color: var(--danger);
  background: var(--danger-light);
}

/* ── Team action buttons (inline in table) ─────────────────────────── */

.team-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  justify-content: flex-end;
}

.team-action {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.team-action:hover {
  color: var(--primary);
  background: var(--background);
}

.team-action svg { width: 14px; height: 14px; }

.team-action--danger:hover {
  color: var(--danger, #e53e3e);
  background: var(--danger-light, #fff5f5);
}

.team-action--transfer:hover {
  color: var(--warning, #d69e2e);
  background: var(--warning-light, #fffff0);
}

.team-action--restore:hover {
  color: var(--success, #38a169);
  background: var(--success-light, #f0fff4);
}

.team-action__label {
  font-size: var(--text-xs, 0.75rem);
  margin-left: var(--sp-1);
}

/* ── Clickable role badge (inline role change) ───────────────────── */
.role-badge__wrapper { position: relative; display: inline-flex; }

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: var(--lh-xs);
  cursor: pointer;
  transition: opacity 0.15s;
}
.role-badge:hover { opacity: 0.75; }

.role-badge--danger { background: var(--danger-light); color: var(--danger); }
.role-badge--brand  { background: var(--brand-light);  color: var(--brand);  }
.role-badge--muted  { background: var(--surface);      color: var(--muted);  }

.role-badge svg { width: 12px; height: 12px; flex-shrink: 0; }

.role-badge__dropdown {
  position: fixed;
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  min-width: 120px;
  padding: var(--sp-1);
  flex-direction: column;
}

.team-action__wrapper { position: relative; }

.team-action__dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 30;
  min-width: 120px;
  padding: var(--sp-1);
  flex-direction: column;
}

.team-action__dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-sm);
  color: var(--card-fg);
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}

.team-action__dropdown-item:hover {
  background: var(--background);
}

/* ── Alert Card ────────────────────────────────────────────────────── */

.alert-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.alert-card:last-child { border-bottom: none; }

.alert-card--highlight {
  background: var(--success-light);
}

.alert-card__indicator {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.alert-card__indicator--warning { background: var(--warning); }
.alert-card__indicator--success { background: var(--success); }
.alert-card__indicator--danger { background: var(--danger); }
.alert-card__indicator--info { background: #3b82f6; }

.alert-card__icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--muted); margin-top: 1px; }

.alert-card__message {
  flex: 1;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--card-fg);
  min-width: 0;
}

.alert-card__actions {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.alert-card__action-btn { font-size: 12px; padding: var(--sp-1) var(--sp-2); }

/* ── Progress Bar ──────────────────────────────────────────────────── */

.progress-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.progress-bar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.progress-bar__label {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--card-fg);
}

.progress-bar__badge {
  background: rgba(23, 23, 23, 0.1);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--primary);
}

.progress-bar__track {
  width: 100%;
  height: auto;
  background: rgba(101, 163, 13, 0.2);
  border: 1px solid var(--border);
  padding: 4px;
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 8px;
  background: var(--brand);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* ── Page Alert ────────────────────────────────────────────────────── */
/* Banner a page (or a swapped-in fragment) shows above its body to say a  */
/* write was refused. Used by components/alert_banner.py, the integrations */
/* page and the interaction detail panel.                                  */

.alert {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  margin-bottom: var(--sp-4);
}

.alert--error { background: var(--danger-light); border-color: var(--danger); color: var(--danger); }
.alert--success { background: var(--success-light); border-color: var(--success); color: var(--success); }

/* ── Insight Callout ───────────────────────────────────────────────── */

.insight-callout {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  margin-top: var(--sp-3);
}

.insight-callout--default { background: var(--surface); color: var(--card-fg); }
.insight-callout--success { background: var(--success-light); color: var(--success); }
.insight-callout--warning { background: var(--warning-light); color: var(--warning); }
.insight-callout--danger { background: var(--danger-light); color: var(--danger); }

.insight-callout__icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; }
.insight-callout__icon-svg { width: 16px; height: 16px; }
.insight-callout__body { display: flex; align-items: center; flex: 1; gap: var(--sp-3); min-width: 0; }
.insight-callout__message { flex: 1; }

.insight-callout__action {
  flex-shrink: 0;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.6);
  transition: background 0.15s;
}

.insight-callout__action:hover { background: rgba(255,255,255,0.9); }

/* ── Regulatory Alert ──────────────────────────────────────────────── */

.regulatory-alert {
  background: var(--danger-light);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.regulatory-alert__header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.regulatory-alert__icon { width: 20px; height: 20px; color: var(--danger); flex-shrink: 0; margin-top: 2px; }
.regulatory-alert__title { font-size: var(--text-sm); font-weight: 600; color: var(--card-fg); }
.regulatory-alert__desc { font-size: var(--text-sm); color: var(--muted); }

.regulatory-alert__actions {
  display: flex;
  gap: var(--sp-2);
}

.btn--sm { font-size: 12px; padding: var(--sp-1) var(--sp-3); }
.btn--success { background: var(--success); color: white; border: none; }
.btn--success:hover { opacity: 0.9; }
.btn--danger { background: var(--danger); color: white; border: none; }
.btn--danger:hover { opacity: 0.9; }

/* ── EPHY Card ─────────────────────────────────────────────────────── */

.ephy-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.ephy-card__header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.ephy-card__icon { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }
.ephy-card__title { font-size: var(--text-sm); font-weight: 600; color: var(--card-fg); margin: 0; flex: 1; }

.ephy-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ephy-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--text-sm);
}

.ephy-card__row-label { color: var(--muted); flex-shrink: 0; }
.ephy-card__row-value { color: var(--card-fg); text-align: right; word-break: break-word; }

.ephy-card__source {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* ── Recommend List ────────────────────────────────────────────────── */

.recommend-list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.recommend-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}

.recommend-list__item:last-child { border-bottom: none; }
.recommend-list__item:hover { background: var(--surface); }
a.recommend-list__item { text-decoration: none; color: inherit; }

.recommend-list__title { font-size: var(--text-sm); font-weight: 500; color: var(--card-fg); }
.recommend-list__subtitle { font-size: var(--text-sm); color: var(--muted); }
.recommend-list__arrow { width: 16px; height: 16px; color: var(--muted); }

.interactions__card {
  padding: var(--sp-4);
}

.interactions__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
}

.interactions__actions {
  display: flex;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.interventions__actions {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border);
}

/* Warm background variant for intervention/interaction cards */
.card--warm {
  background: #fdf8f3;
  border-color: #f0e6d9;
}

/* ── Segmented Bar ─────────────────────────────────────────────────── */

.segmented-bar { margin-top: var(--sp-3); }

.segmented-bar__label-row {
  display: flex;
  margin-bottom: var(--sp-1);
}

.segmented-bar__label-cell {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segmented-bar__label-name { font-weight: 500; color: var(--card-fg); }
.segmented-bar__label-pct { color: var(--muted); }

.segmented-bar__bar {
  display: flex;
  height: 36px;
  border-radius: var(--radius);
  overflow: hidden;
  gap: 2px;
}

.segmented-bar__segment {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.segmented-bar__val-text {
  font-size: 11px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0 4px;
}

/* ── Vertical Bar Chart ────────────────────────────────────────────── */

.vbar-wrap {
  position: relative;
  width: 100%;
}

.vbar-wrap .chart-el {
  width: 100%;
  height: 100%;
}

/* ── Weekly Actions ────────────────────────────────────────────────── */

.weekly-actions__list {
  display: flex;
  flex-direction: column;
}
.farmer-landing .weekly-actions__list {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--sp-2);
  gap: var(--sp-1);
}
.weekly-empty {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4);
  color: var(--muted);
}
.weekly-empty__icon { width: 20px; height: 20px; flex-shrink: 0; }
.weekly-empty__text { font-size: var(--text-sm); margin: 0; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-4);
  color: var(--muted);
}
.empty-state__icon { width: 32px; height: 32px; }
.empty-state__text { font-size: var(--text-sm); text-align: center; }
.empty-state__subtext {
  font-size: var(--text-xs);
  text-align: center;
  color: var(--muted);
  margin: 0;
}
.empty-state--with-cta { padding: var(--sp-6) var(--sp-4) var(--sp-4); }

/* Inline banner inside a tab body — used for "perm denied" notices
   that need to sit at the top of the tab without competing with the
   tab section header for flex space. Mirrors the muted look of the
   permission-strip pending banner.                                  */
.tab-banner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.tab-banner__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--card-fg);
}

.tab-banner__body {
  font-size: var(--text-sm);
  color: var(--muted);
}

.tab-banner--muted { background: var(--surface); }

/* Stack a "perm denied" banner above the regular tab section without
   inheriting the tab section's own outer padding. The stack lives
   directly inside ``.farmer__body`` which already supplies the
   horizontal page padding; here we only add a small vertical gap
   between the banner and the section below it.                    */
.farmer-tab-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.farmer-tab-stack > .tab-section { padding-top: 0; }

.catalogs__system-cta { display: flex; flex-direction: column; gap: var(--sp-2); }

/* ── Performance card ──────────────────────────────────────────────── */

.perf-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-4);
}

.perf-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--card-fg);
}

.perf-card__header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.perf-card__period {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 400;
}

.perf-card__month-select {
  appearance: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--lh-sm);
  padding: var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='gray' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  color: var(--card-fg);
  cursor: pointer;
}

.perf-card__filter {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  font-size: var(--text-sm);
  color: var(--card-fg);
  cursor: pointer;
  font-weight: 500;
}

.perf-card__filter:hover { background: var(--surface-dim); }
.perf-card__filter-icon { width: 14px; height: 14px; flex-shrink: 0; }

.perf-card__body {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-6);
  align-items: start;
  margin-bottom: var(--sp-4);
}

.perf-card__left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.perf-card__right { min-width: 0; }

.perf-card__metric-row {
  display: flex;
  gap: var(--sp-3);
}

.perf-card__metric-box {
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  background: var(--surface-dim);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.perf-card__metric-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: var(--sp-1);
}

.perf-card__metric-value {
  display: block;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--card-fg);
  line-height: 1.2;
}

.perf-card__progress { margin-top: var(--sp-2); }

.perf__gap { font-size: var(--text-sm); color: var(--muted); margin-top: var(--sp-2); }

@media (max-width: 768px) {
  .perf-card__body {
    grid-template-columns: 1fr;
  }
}

/* ── Sales metrics ─────────────────────────────────────────────────── */

.sales-metrics-row {
  display: flex;
  gap: var(--sp-8);
  padding: var(--sp-3) var(--sp-4);
}

.sales-metric { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; min-width: 0; }
.sales-metric:not(:first-child) { border-left: 1px solid var(--border); padding-left: var(--sp-8); }
.sales-metric .trend { white-space: normal; word-wrap: break-word; }
.sales-metric__label { font-size: var(--text-sm); color: var(--muted); }
.sales-metric__value { font-size: var(--text-xl); font-weight: 700; color: var(--card-fg); }
.sales-subtitle { font-size: var(--text-sm); font-weight: 500; color: var(--muted); padding: var(--sp-3) var(--sp-4) 0; }

/* ── Advisor Landing Layout ────────────────────────────────────────── */

.advisor-landing { padding: 0; }

.advisor__body {
  padding: var(--sp-4) var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.advisor__section { display: flex; flex-direction: column; gap: var(--sp-4); }
.advisor__section.card { padding: var(--sp-4) var(--sp-6); }

.advisor__top-row,
.advisor__mid-row,
.advisor__bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

.advisor__col-left,
.advisor__col-right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  min-width: 0;
}
.advisor__col-right > .advisor__section.card {
  flex: 1;
}

/* ── Activity Feed ───────────────────────────────────────────── */
.feed__list { display: flex; flex-direction: column; }
.feed-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.feed-item + .feed-item { border-top: 1px solid var(--border); }
.feed-item:hover { background: var(--hover); }
.feed-item .alert-card { padding: 0; border-bottom: none; gap: var(--sp-3); min-width: 0; }
/* Every feed row is exactly one line tall: a long title must ellipsize rather
   than wrap, or rows in the same list end up different heights. */
.feed-item .alert-card__message {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-item__date {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Farmer Landing Layout ─────────────────────────────────────────── */

.farmer-landing { padding: 0; }

.farmer__body {
  padding: var(--sp-4) var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.farmer__info-grid { display: flex; flex-direction: column; gap: var(--sp-8); }
.farmer__section { display: flex; flex-direction: column; gap: var(--sp-4); }
.farmer__section.card { padding: var(--sp-4) var(--sp-6); }

.farmer__top-row,
.farmer__mid-row,
.farmer__bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}

.farmer__col-left,
.farmer__col-right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  min-width: 0;
}

/* ── KPI grid 2x2 ─────────────────────────────────────────────────── */

.kpi-grid--2x2 {
  grid-template-columns: repeat(2, 1fr);
}

.stat-card--danger { border-color: var(--danger); background: var(--danger-light); }
.stat-card--warning { border-color: var(--warning); background: var(--warning-light); }

/* Brand-colored stat card icon */
.stat-card__icon--brand { background: var(--brand-light); }
.stat-card__icon--brand .stat-card__icon-svg { color: var(--brand); }

/* ── Advisor Multi-select ────────────────────────────────────────── */
.adv-ms { position: relative; }
.adv-ms__trigger {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--input); border-radius: var(--radius);
  background: var(--background); cursor: pointer;
  font-size: var(--text-sm); font-weight: 500;
  color: var(--primary); line-height: var(--lh-sm);
  transition: background 0.15s, box-shadow 0.15s;
  white-space: nowrap; user-select: none;
}
.adv-ms__trigger:hover { background: var(--surface); }
.adv-ms--open .adv-ms__trigger {
  background: var(--surface);
}
.adv-ms__trigger-icon {
  width: 15px; height: 15px; flex-shrink: 0;
  color: var(--text-muted);
}
.adv-ms__chevron {
  width: 14px; height: 14px; flex-shrink: 0;
  color: var(--text-muted); transition: transform 0.2s;
}
.adv-ms--open .adv-ms__chevron { transform: rotate(180deg); }

.adv-ms__panel {
  display: none; flex-direction: column;
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 50;
  width: 280px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.adv-ms--open .adv-ms__panel { display: flex; }

.adv-ms__search-wrapper {
  position: relative;
  padding: var(--sp-2) var(--sp-2) 0;
}
.adv-ms__search-icon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-30%);
  width: 14px; height: 14px; color: var(--text-muted);
  pointer-events: none;
}
.adv-ms__search {
  width: 100%; box-sizing: border-box;
  padding: 6px 8px 6px 30px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-size: var(--text-sm);
  outline: none; color: var(--card-fg);
}
.adv-ms__search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
}
.adv-ms__search::placeholder { color: var(--text-muted); }

.adv-ms__list {
  display: flex; flex-direction: column;
  max-height: 240px; overflow-y: auto;
  padding: var(--sp-1) var(--sp-2) var(--sp-2);
}
.adv-ms__option {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); cursor: pointer;
  transition: background 0.1s;
}
.adv-ms__option:hover { background: var(--hover); }
.adv-ms__checkbox {
  width: 16px; height: 16px; flex-shrink: 0;
  accent-color: var(--primary); cursor: pointer;
}
.adv-ms__name { color: var(--card-fg); }

/* ── Interaction Calendar ─────────────────────────────────────────── */

/* ── Calendar full-height layout ─────────────────────────────────── */
/* Scoped via :has() so only the calendar page gets the flex chain.  */

.main-content:has(.cal-page__body) {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

.main-content:has(.cal-page__body) .team-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ── Calendar page body ──────────────────────────────────────────── */

.cal-page__body {
  padding: 0 var(--sp-8);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#cal-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ── Navigation bar (shared across all views) ────────────────────── */

.cal-week-switcher {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0 var(--sp-3);
  flex-shrink: 0;
}

.cal-week-switcher__nav {
  display: flex;
  gap: var(--sp-1);
}

.cal-week-switcher__label {
  flex: 1;
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  font-weight: 400;
  color: var(--foreground);
}

/* ── View switcher (Week / Month / Day) ──────────────────────────── */

.cal-view-switcher {
  display: flex;
  gap: 2px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 2px;
}

.cal-view-switcher__btn {
  padding: var(--sp-1-5) var(--sp-3);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  background: transparent;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  color: var(--muted);
  white-space: nowrap;
  transition: all 0.15s;
}

.cal-view-switcher__btn:hover { color: var(--foreground); background: var(--background); }

.cal-view-switcher__btn--active {
  background: var(--background);
  color: var(--foreground);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════
   WEEK VIEW — Time-axis grid (Google Calendar style)
   ═══════════════════════════════════════════════════════════════════ */

.cal-week-headers {
  display: contents;
}

.cal-week-headers > * {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--background);
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}

.cal-time-gutter {
  /* empty top-left cell */
}

.cal-day__header {
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-left: 1px solid var(--border);
}

.cal-day__header--today .cal-day__weekday { color: var(--brand); }
.cal-day__header--today .cal-day__date { color: var(--brand); }

.cal-week-body {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Time axis (left gutter) */
.cal-time-axis {
  display: flex;
  flex-direction: column;
}

.cal-time-axis__slot {
  height: 60px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: var(--sp-2);
  border-top: 1px solid var(--border);
  box-sizing: border-box;
}

.cal-time-axis__label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  padding-top: 2px;
}

/* Day column body (events area) */
.cal-day-col__body {
  position: relative;
  border-left: 1px solid var(--border);
}

/* Hour grid lines — behind event cards */
.cal-hour-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.cal-hour-line {
  height: 60px;
  border-top: 1px solid var(--border);
  box-sizing: border-box;
}

/* Event wrapper (positioned absolutely within day column) */
.cal-event-wrapper {
  z-index: 1;
  padding: 0 1px;
}

.cal-event-wrapper .cal-card {
  height: 100%;
  overflow: hidden;
}

.cal-day__weekday {
  font-size: 11px;
  line-height: 16px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.cal-day__date {
  font-size: 26px;
  line-height: 1;
  font-weight: 400;
  color: var(--foreground);
}

/* ── Meeting card — Google Calendar event chip ──────────────────────── */

.cal-card {
  background: var(--brand-light);
  border: none;
  border-left: 3px solid var(--brand);
  border-radius: 4px;
  padding: 4px 6px;
  cursor: pointer;
  transition: background 0.15s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 1px;
}

.cal-card:hover {
  background: rgba(101, 163, 13, 0.18);
}

.cal-card__time {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  color: var(--brand);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.cal-card i,
.cal-card svg {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0;
}

.cal-card__title {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.cal-card__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 14px;
  color: var(--muted);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Inspection variant — amber accent so parcel tours read as a
   different category from interactions (the default brand-green
   accent). Same shape, just a recoloured border + tint. */
.cal-card--inspection {
  background: var(--warning-light);
  border-left-color: var(--warning);
}
.cal-card--inspection:hover {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
}
.cal-card--inspection .cal-card__time { color: var(--warning); }

.cal-dayv__card--inspection {
  background: var(--warning-light);
  border-left-color: var(--warning);
}
.cal-dayv__card--inspection:hover {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
}


/* ═══════════════════════════════════════════════════════════════════
   MONTH VIEW
   ═══════════════════════════════════════════════════════════════════ */

.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto repeat(6, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  flex: 1;
  min-height: 0;
  margin-bottom: var(--sp-6);
}

.cal-month-header {
  padding: var(--sp-2) var(--sp-1);
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cal-month-header:nth-child(7) { border-right: none; }

.cal-month-cell {
  min-height: 90px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

/* Every 7th cell in a row — remove right border.
   Headers are :nth-child(1-7), cells start at :nth-child(8).
   So cells at positions 14, 21, 28… (i.e. 7n+7 from the headers offset). */
.cal-month-grid > :nth-child(7n) { border-right: none; }

.cal-month-cell--outside {
  background: var(--surface);
  opacity: 0.4;
}

.cal-month-cell--today {
  background: rgba(101, 163, 13, 0.06);
}

.cal-month-cell__date {
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px 4px;
  text-align: right;
  color: var(--muted);
}

.cal-month-cell--today .cal-month-cell__date {
  color: var(--brand);
  font-weight: 700;
}

.cal-month-cell__dot {
  padding: 1px 4px;
  font-size: 10px;
  line-height: 14px;
  color: var(--foreground);
  border-radius: 3px;
  background: rgba(101, 163, 13, 0.12);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.1s;
}

.cal-month-cell__dot:hover {
  background: rgba(101, 163, 13, 0.24);
}

/* ═══════════════════════════════════════════════════════════════════
   DAY VIEW — Time-axis single column
   ═══════════════════════════════════════════════════════════════════ */

.cal-dayv-grid {
  display: grid;
  grid-template-columns: 56px 1fr;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.cal-event-wrapper .cal-dayv__card {
  height: 100%;
  overflow: hidden;
}

.cal-dayv__card {
  background: var(--brand-light);
  border: none;
  border-left: 3px solid var(--brand);
  border-radius: 4px;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cal-dayv__card:hover { background: rgba(101, 163, 13, 0.18); }

.cal-dayv__top {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cal-dayv__time {
  font-size: 11px;
  line-height: 14px;
  color: var(--brand);
  font-weight: 500;
}

.cal-dayv__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--foreground);
}

.cal-dayv__metas {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
}

.cal-dayv__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 14px;
  color: var(--muted);
}

.cal-dayv__meta i,
.cal-dayv__meta svg { width: 12px !important; height: 12px !important; flex-shrink: 0; }

.cal-dayv__empty {
  font-size: var(--text-sm);
  color: var(--muted);
  padding: var(--sp-6);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   TABLE VIEW — flat list
   ═══════════════════════════════════════════════════════════════════ */

.cal-table {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.cal-table__row {
  display: grid;
  grid-template-columns: 80px 120px 1fr 1fr 100px;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  align-items: center;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}

.cal-table__row:last-child { border-bottom: none; }
.cal-table__row:hover:not(.cal-table__header) { background: var(--surface); }

.cal-table__header {
  background: var(--surface);
  cursor: default;
}

.cal-table__th {
  font-weight: 600;
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cal-table__date { font-size: var(--text-xs); color: var(--muted); }
.cal-table__time { font-size: var(--text-sm); font-weight: 500; }
.cal-table__title { font-size: var(--text-sm); font-weight: 600; }
.cal-table__person { font-size: var(--text-sm); color: var(--muted); }
.cal-table__mode { font-size: var(--text-xs); color: var(--muted); }

/* ── Sales Page ─────────────────────────────────────────────────────── */

.sales-page { padding: 0; }

.sales__body {
  padding: var(--sp-4) var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.sales__section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
}

.sales__two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

.sales__advisor-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* ── Farmer Transactions Page ──────────────────────────────────────── */

.transactions-page { padding: 0; }

.transactions__body {
  padding: var(--sp-4) var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.transactions__section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.transactions__grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* ── Farmer Activities Page ───────────────────────────────────────── */

.activities-page { padding: 0; }

.activities__body {
  padding: var(--sp-4) var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.activities__section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.activities__grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* ── Documents (extraction) Page ──────────────────────────────────── */

.documents-page { padding: 0; }

/* Content sits below the self-padded PageHeader; this wrapper supplies the
   horizontal indent that aligns the table / empty-state with the header title
   and a gap below the header's divider. */
.documents__body {
  padding: var(--sp-4) var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.btn-group {
  display: flex;
  gap: var(--sp-2);
}

/* Detail panel field rows */
.detail-panel__field {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}

.detail-panel__field-label {
  font-size: var(--text-sm);
  color: var(--muted);
}

.detail-panel__field-value {
  font-size: var(--text-sm);
  color: var(--card-fg);
  text-align: right;
}

.detail-panel__value--bold {
  font-weight: 600;
  font-size: var(--text-base);
}

/* ── Team Page ─────────────────────────────────────────────────────── */

.team-page { padding: 0; }

.team__body {
  padding: var(--sp-4) var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.team__divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

.team__table-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.team__search-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--sp-4);
}

.team__search-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  position: relative;
}

/* ── Filter chips (inside search input) ──────────────────────────── */

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--neutral-100, #f5f5f5);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--text-xs);
  color: var(--primary);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}

.filter-chip__text {
  font-weight: 500;
}

.filter-chip__remove {
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--muted);
  margin-left: 2px;
}

.filter-chip__remove:hover {
  color: var(--danger, #dc2626);
}

/* ── Filter popover ─────────────────────────────────────────────── */

.filter-popover {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 40px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
  z-index: 50;
  min-width: 220px;
}

.filter-popover--open { display: block; }

.filter-popover__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
}

.filter-popover__row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.filter-popover__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.filter-popover__select {
  font-size: var(--text-sm);
  padding: 8px var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--card-fg);
  cursor: pointer;
  width: 100%;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px var(--sp-3);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-input:focus-within {
  border-color: var(--accent, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--primary)) 12%, transparent);
}

.search-input__icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
}

.search-input__field {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--card-fg);
}

.search-input__field::placeholder {
  color: var(--muted);
}

.search-input__filter {
  flex-shrink: 0;
}

/* ── Campaigns Page ────────────────────────────────────────────────── */

.campaigns__header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}

.campaigns__header-row .section-header { flex: 1; min-width: 0; }

.campaigns__view-toggle {
  flex-shrink: 0;
}

/* ── Campaign Detail ──────────────────────────────────────────────── */

.campaign-detail__info {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--muted);
}

.campaign-detail__info i {
  width: 16px;
  height: 16px;
}

.campaign-detail__completion {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.campaign-detail__completion-label {
  font-size: var(--text-sm);
  color: var(--muted);
}

.campaign-detail__circle {
  width: 66px;
  height: 66px;
  position: relative;
}

.campaign-detail__circle svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.campaign-detail__circle-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 4;
}

.campaign-detail__circle-fill {
  fill: none;
  stroke: var(--brand);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s;
}

.campaign-detail__circle-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--card-fg);
}

.campaign-detail__tabs {
  border-bottom: 1px solid var(--border);
  padding: 0 var(--sp-16);
}

.campaigns__header-actions {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* ── Schema table ─────────────────────────────────────────────────── */

.schema-row__name-col {
  display: flex;
  flex-direction: column;
}

.schema-row__name {
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--card-fg);
}

.schema-row__freq {
  font-size: var(--text-xs);
  color: var(--muted);
}

.schema-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 200px;
}

.schema-bar__track {
  flex: 1;
  height: 8px;
  background: var(--surface);
  border-radius: var(--radius-full);
  display: flex;
  overflow: hidden;
}

.schema-bar__seg--actual {
  background: var(--brand);
  height: 100%;
}

.schema-bar__seg--expected {
  background: var(--warning);
  height: 100%;
}

.schema-bar__label {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
}

.schema-bar__label--actual {
  color: var(--brand);
  font-weight: 600;
}

.schema-row__overdue {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  color: var(--warning);
  white-space: nowrap;
}

.schema-row__overdue-icon {
  width: 14px;
  height: 14px;
}

.schema-row__expand {
  width: 16px;
  height: 16px;
  color: var(--muted);
  margin-left: var(--sp-2);
}

/* ── Detail panel (slide-over drawer) ─────────────────────────────── */

.detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: max(40vw, 480px);
  height: 100dvh;
  background: var(--background);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 200;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  contain: layout paint;
  padding-top: env(safe-area-inset-top, 0px);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--card-fg);
}

@media (max-width: 768px) {
  .detail-panel {
    width: 100%;
    border-left: none;
    box-shadow: none;
  }
}

.detail-panel--open { transform: translateX(0); }

.detail-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  contain: strict;
}

.detail-panel-overlay--open {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.detail-panel__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.detail-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--border);
}

.detail-panel__header-text { flex: 1; min-width: 0; }

.detail-panel__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--card-fg);
  margin-bottom: var(--sp-1);
}

.detail-panel__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  color: var(--muted);
  flex-wrap: wrap;
}

.detail-panel__meta-sep { color: var(--border); }

/* Year navigation arrows */
.parcel-year-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-6);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.parcel-year-nav__current {
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  text-align: center;
}
.parcel-year-nav__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  color: var(--card-fg);
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
}
.parcel-year-nav__arrow:hover { background: var(--border); }
.parcel-year-nav__arrow svg { width: 16px; height: 16px; }
.parcel-year-nav__arrow--disabled {
  opacity: .25;
  pointer-events: none;
}

.detail-panel__close {
  width: 20px;
  height: 20px;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}

.detail-panel__close:hover { color: var(--primary); }

.detail-panel__actions {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-bottom: 1px solid var(--border);
}

.detail-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.detail-panel__section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.detail-panel__section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--card-fg);
}

.detail-panel__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.detail-panel__stat-card {
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--sp-0-5);
}

.detail-panel__stat-card--danger {
  border-color: var(--danger);
  background: rgba(220, 38, 38, 0.03);
}

.detail-panel__stat-label {
  font-size: var(--text-xs);
  color: var(--muted);
}

.detail-panel__stat-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--card-fg);
}

.detail-panel__stat-sub {
  font-size: var(--text-xs);
  color: var(--muted);
}

.detail-panel__stat-sub--up { color: var(--success); }

.detail-panel__stat-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.detail-panel__stat-dot--success { background: var(--success); }

.detail-panel__alert {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  background: rgba(227, 146, 25, 0.05);
}

.detail-panel__alert-icon {
  width: 16px;
  height: 16px;
  color: var(--warning);
  flex-shrink: 0;
  margin-top: 2px;
}

.detail-panel__alert-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.detail-panel__alert-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--card-fg);
}

.detail-panel__alert-desc {
  font-size: var(--text-xs);
  color: var(--muted);
}

.detail-panel__alert-actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.detail-panel__interaction {
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.detail-panel__interaction-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-panel__interaction-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--card-fg);
}

.detail-panel__interaction-duration {
  font-size: var(--text-xs);
  color: var(--muted);
}

.detail-panel__interaction-obj,
.detail-panel__interaction-notes {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: var(--lh-sm);
}

.detail-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-6);
  border-top: 1px solid var(--border);
  background: var(--background);
}

.detail-panel__footer-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  color: var(--muted);
  cursor: pointer;
}

.detail-panel__footer-link:hover { color: var(--primary); }

.detail-panel__footer-icon {
  width: 14px;
  height: 14px;
}

.detail-panel__footer-actions {
  display: flex;
  gap: var(--sp-2);
}

.detail-panel__search {
  padding-bottom: var(--sp-2);
}

.detail-panel__callout {
  padding: var(--sp-3);
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  background: rgba(227, 146, 25, 0.05);
}

.detail-panel__callout-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}

.detail-panel__callout-text {
  font-size: var(--text-sm);
  color: var(--card-fg);
  line-height: var(--lh-sm);
}

.detail-panel__callout-close {
  width: 14px;
  height: 14px;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}

.detail-panel__timeline {
  display: flex;
  flex-direction: column;
}

.detail-panel__timeline-date {
  font-size: var(--text-xs);
  color: var(--muted);
  padding: var(--sp-3) 0 var(--sp-1);
}

.detail-panel__timeline-item {
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  border-left: 2px solid var(--border);
  position: relative;
}

.detail-panel__timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.detail-panel__timeline-dot {
  position: absolute;
  left: -5px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}

.detail-panel__timeline-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--card-fg);
}

.detail-panel__timeline-duration {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
}

.detail-panel__timeline-obj {
  font-size: var(--text-xs);
  color: var(--muted);
  padding-top: var(--sp-1);
  line-height: var(--lh-sm);
}

/* ── Parcel list + detail in panel ─────────────────────────────────── */

.detail-panel__parcels-list {
  padding: 0;
}

.parcel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-6);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}

.parcel-row:hover { background: var(--surface); }
.parcel-row:last-child { border-bottom: none; }

.parcel-row__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-0-5);
}

.parcel-row__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--card-fg);
}

.parcel-row__meta {
  font-size: var(--text-xs);
  color: var(--muted);
}

.parcel-row__arrow {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.detail-panel__header-left {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  flex: 1;
  min-width: 0;
}

.detail-panel__back {
  width: 20px;
  height: 20px;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 4px;
  display: none;
}

.detail-panel--has-back .detail-panel__back { display: block; }

.detail-panel__back:hover { color: var(--primary); }

.detail-panel__stats--4col {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .detail-panel__stats--4col {
    grid-template-columns: repeat(2, 1fr);
  }
  .detail-panel .farm-dialog__fields {
    grid-template-columns: 1fr;
  }
  /* Hide draw tools on mobile — too cramped to edit geometry */
  .detail-panel .leaflet-draw {
    display: none;
  }
  .detail-panel .leaflet-control-layers {
    display: none;
  }
}

.detail-panel__empty {
  font-size: var(--text-sm);
  color: var(--muted);
  padding: var(--sp-3);
  text-align: center;
}
.detail-panel__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
}

/* ── Detail panel tabs — full-width underline style ───────────────── */
.detail-panel__inner > .tab-switcher {
  display: flex;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 var(--sp-6);
  margin: 0;
}
.detail-panel__inner > .tab-switcher .tab-switcher__tab {
  flex: 1;
  text-align: center;
  border-right: none;
  border-radius: 0;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.detail-panel__inner > .tab-switcher .tab-switcher__tab--active {
  background: transparent;
  border-bottom-color: var(--primary);
  color: var(--primary);
}
.detail-panel__inner > .tab-switcher .tab-switcher__tab:not(:last-child) {
  border-right: none;
}
.detail-panel__map-wrap { min-height: 280px; margin-bottom: var(--sp-4); }

/* ── Tab bar — matches detail-panel tab-switcher exactly ──────────── */
.tab-bar {
  display: flex;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 var(--sp-6);
  margin: 0;
}
.tab-bar__tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  background: transparent;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
.tab-bar__tab:hover { background: var(--surface); }
.tab-bar__tab--active {
  background: transparent;
  border-bottom-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.tab-bar__icon { width: 16px; height: 16px; flex-shrink: 0; }
.tab-bar__label { white-space: nowrap; }

/* ── Tab section + declarations list ─────────────────────────────── */
.tab-section { padding: var(--sp-4) var(--sp-6); }
.tab-section__title { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--sp-4); }
.tab-section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.tab-empty { color: var(--muted); font-size: var(--text-sm); padding: var(--sp-6) 0; text-align: center; }

.farmer-parcels-tab__map { min-height: 300px; border-radius: var(--radius); overflow: hidden; margin-bottom: var(--sp-4); }

.parcels-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.parcel-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.parcel-row__name { font-weight: 600; font-size: var(--text-sm); flex: 1; min-width: 0; }
.parcel-row__surface { font-size: var(--text-sm); color: var(--muted); white-space: nowrap; }
.parcel-row__crop { font-size: var(--text-sm); color: var(--muted); white-space: nowrap; }

.declarations-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.declaration-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.declaration-row__dot { color: var(--primary); font-size: var(--text-lg); line-height: 1; flex-shrink: 0; }
.declaration-row__title { font-weight: 600; font-size: var(--text-sm); flex-shrink: 0; }
.declaration-row__subtitle { font-size: var(--text-sm); color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The whole intervention detail is one form; space its sections (header fields,
   parcels, EPHY card, sub-line sections) clearly apart — without this the header
   fields grid sits flush against the Parcelles heading. */
#activity-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* Fields grid — same visual as stat-cards but with editable inputs */
.parcel-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.parcel-field {
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--sp-0-5);
}
.parcel-field__label {
  font-size: var(--text-xs);
  color: var(--muted);
}
.parcel-field__input {
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--card-fg);
  background: transparent;
  outline: none;
  width: 100%;
}
.parcel-field__input[readonly] { cursor: default; }
.parcel-field__input[disabled] { cursor: default; }
.parcel-field--full { grid-column: 1 / -1; }
.parcel-field--full textarea.parcel-field__input { resize: vertical; font-family: inherit; }
/* Read-only display value (e.g. Exploitation) — wraps instead of clipping the
   way a single-line input does. */
.parcel-field__value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--card-fg);
  word-break: break-word;
}
/* View mode hides empty optional fields and edit-only controls — e.g. the
   type <select>, shown in view mode as a labelled read field plus the header
   badge instead. The `editing` class added by __activityEditMode reveals
   these fields and hides the paired view-only read fields (hide rule just
   below), so edit mode shows every editable field exactly once. */
#activity-edit-form:not(.editing) .parcel-field--empty,
#activity-edit-form:not(.editing) .parcel-field--edit-only {
  display: none;
}

/* Edit mode hides the view-only read fields (the type read value) — the
   editable <select> tagged `parcel-field--edit-only` replaces them (rule
   above). Same `editing` toggle, inverted. */
#activity-edit-form.editing .parcel-field--view-only {
  display: none;
}

/* Edit mode — card gets highlight, input gets editable styling */
.parcel-field__input--editing {
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  font-weight: 500;
}
.parcel-field__input--editing:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.08);
}
.parcel-edit__actions {
  display: flex;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
}
.parcel-edit__actions .btn { flex: 1; justify-content: center; }
/* `display: flex` above wins over the UA stylesheet's `[hidden] { display: none }`,
   so panels toggling Edit/Delete view-mode actions need this explicit override. */
.parcel-edit__actions[hidden] { display: none; }

/* Repeating rows — the intervention sub-line editors (inputs/outputs/equipment/
   operators/parcels). One `.repeating-row` is a flex line of `.parcel-field`
   cells + a small remove button; rows stack inside `.repeating-rows`. */
.repeating-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.repeating-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.repeating-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Inside an editor row the field is a bare label+input stack — drop the
   `.parcel-field` card border/padding (same element) so the row isn't a
   card-in-card; the input below carries its own border. */
.repeating-row__field {
  flex: 1 1 9rem;
  min-width: 0;
  border: none;
  padding: 0;
}
/* Editor-row inputs always read as editable (the row only shows in edit mode),
   so give them a real input border instead of the transparent read style. The
   SearchableInput picker brings its own border, so every field reads uniformly. */
.repeating-row .parcel-field__input {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-1) var(--sp-2);
  background: var(--background);
  font-weight: 500;
}
.repeating-row .parcel-field__input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.08);
}
/* Operators rows hold a single picker — a row card would just be a box around one
   input (the "triple border"), so drop it: the picker's own border is enough. */
[data-section="operators"] .repeating-row {
  border: none;
  padding: 0;
}
.repeating-row__remove {
  flex: 0 0 auto;
  align-self: center;
}
/* Read-only view of a repeating section — a stack of per-line cards. Each card
   leads with a prominent primary label (product / equipment / parcel / operator
   name) and shows its remaining attributes as small labelled chips, non-empty
   only (see RepeatingReadRow), so an unset column never prints an orphan label. */
.repeating-read {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.repeating-read__row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.repeating-read__primary {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--card-fg);
}
.repeating-read__subtitle {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: calc(-1 * var(--sp-1));
}
.repeating-read__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
}
.repeating-read__chip {
  display: flex;
  flex-direction: column;
  gap: var(--sp-0-5);
}
.repeating-read__chip-label {
  font-size: var(--text-xs);
  color: var(--muted);
}
.repeating-read__chip-value {
  font-size: var(--text-sm);
  color: var(--card-fg);
}
.repeating-read__empty {
  font-size: var(--text-sm);
  color: var(--muted);
  padding: var(--sp-1) 0;
}

.parcel-detail__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.parcel-detail__left,
.parcel-detail__right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.parcel-map {
  height: 180px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.parcel-map__shape {
  width: 120px;
  height: 100px;
  background: rgba(13, 148, 136, 0.15);
  border: 2px solid rgba(13, 148, 136, 0.4);
  clip-path: polygon(20% 0%, 80% 10%, 100% 60%, 70% 100%, 10% 80%);
}

.parcel-history__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.parcel-history__year {
  font-size: var(--text-sm);
  color: var(--muted);
  cursor: pointer;
}

.parcel-history__person {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
}

.parcel-history__person-icon {
  width: 12px;
  height: 12px;
  color: var(--muted);
}

.parcel-history__person-name {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* ── Portfolio alert banner ────────────────────────────────────────── */

.portfolio-alert {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--sp-4);
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  background: rgba(227, 146, 25, 0.05);
}

.portfolio-alert__content {
  display: flex;
  gap: var(--sp-3);
}

.portfolio-alert__icon {
  width: 20px;
  height: 20px;
  color: var(--warning);
  flex-shrink: 0;
  margin-top: 2px;
}

.portfolio-alert__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.portfolio-alert__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--card-fg);
}

.portfolio-alert__desc {
  font-size: var(--text-sm);
  color: var(--muted);
}

.portfolio-alert__actions {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-1);
}

.portfolio-alert__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.portfolio-alert__link:hover { color: var(--brand); }

.portfolio-alert__close {
  width: 16px;
  height: 16px;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}

.portfolio-alert__close:hover { color: var(--primary); }

/* ── Submission accordion ──────────────────────────────────────────── */

.submission-groups {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.submission-group {
  border-bottom: 1px solid var(--border);
}

.submission-group:last-child { border-bottom: none; }

.submission-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  transition: background 0.15s;
}

.submission-group__header:hover { background: var(--surface); }

.submission-group__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--card-fg);
}

.submission-group__chevron {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.submission-group--open .submission-group__header {
  border-bottom: 1px solid var(--border);
}

.submission-row__checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}

.submission-row__link-icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
  cursor: pointer;
}

.submission-row__link-icon:hover { color: var(--primary); }

/* ── Settings Page ──────────────────────────────────────────────────── */

.settings {
  padding: var(--sp-6) 0 0;
}

/* ── Settings tabs ─────────────────────────────────────────────────── */

.settings-tabs {
  display: flex;
  gap: var(--sp-1);
  padding: 0 var(--sp-16);
  margin-top: var(--sp-4);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.settings-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  user-select: none;
}

.settings-tabs__tab:hover {
  color: var(--primary);
  background: var(--surface);
}

.settings-tabs__tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.settings-tabs__tab--active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.settings-tabs__tab-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.settings-tab-panel {
  display: none;
}

.settings-tab-panel--active {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

.settings__header {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-16);
  border-bottom: 1px solid var(--border);
}

.settings__name {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--primary);
  margin-bottom: var(--sp-1);
}

.settings__name-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.settings__org-inline {
  font-size: var(--text-sm);
  color: var(--muted);
}

.settings__body {
  padding: var(--sp-8) var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  max-width: 700px;
}

.settings__section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.settings__section-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.settings__section-icon {
  width: 20px;
  height: 20px;
  color: var(--muted);
}

.settings__section-title {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--secondary-fg);
}

.settings__card {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.settings__row:last-child { border-bottom: none; }

.settings__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
}

.settings__value {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--card-fg);
}

.settings__value--mono {
  font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  font-size: 12px;
  color: var(--muted);
}

.settings__card--actions {
  display: flex;
  flex-direction: column;
}

.settings__action-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.settings__action-row:last-child { border-bottom: none; }

.settings__action-btn { flex-shrink: 0; }

.settings__action-btn--danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}

.settings__action-btn--danger:hover {
  opacity: 0.9;
}

.settings__integrations-card {
  padding: var(--sp-4) var(--sp-4);
}
.settings__integrations-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
  font-size: var(--text-sm);
  margin-top: var(--sp-3);
}
.settings__integrations-link:hover { text-decoration: underline; }
.settings__integrations-link svg { width: 16px; height: 16px; }

/* ── Skill store (settings) ───────────────────────────────────── */
#skill-store .settings__card {
  padding: var(--sp-4);
}
.skill-store__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.skill-store__tag {
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.skill-store__tag:hover { border-color: var(--primary); color: var(--primary); }
.skill-store__tag--active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.skill-store__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-3);
}
.skill-store__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  transition: border-color 0.15s;
}
.skill-store__card:hover { border-color: var(--primary); }

.skill-store__card-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.skill-store__card-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--card-fg);
}
.skill-store__card-desc {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}
.skill-store__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--sp-1);
}
.skill-store__card-tag {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--background);
  border: 1px solid var(--border);
  color: var(--muted);
}

.skill-store__action-form { margin-top: auto; }
.skill-store__action-btn {
  width: 100%;
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid var(--primary);
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  transition: all 0.15s;
}
.skill-store__action-btn:hover {
  background: var(--primary);
  color: white;
}
.skill-store__action-btn--installed {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--muted);
}
.skill-store__action-btn--installed:hover {
  border-color: var(--danger, #ef4444);
  color: var(--danger, #ef4444);
  background: transparent;
}

.settings__card--danger {
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  padding: var(--sp-6);
}
.settings__section-icon--danger { color: var(--danger); }
.settings__section-title--danger { color: var(--danger); }
.settings__archive-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.settings__archive-form .settings__edit-field { margin-bottom: 0; }
.settings__archive-form .settings__action-btn--danger { margin-top: var(--sp-2); }

.settings__card--disabled {
  color: var(--muted);
}

.settings__card--security {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.settings__password-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.settings__password-form .settings__edit-field { margin-bottom: 0; }
.settings__password-form .btn {
  grid-column: 1 / -1;
  justify-self: end;
}

.settings__founder-contact {
  font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  font-size: var(--text-sm);
  color: var(--primary);
  font-weight: 500;
  margin-top: var(--sp-1);
  text-align: center;
}

.settings__action-hint {
  font-size: var(--text-sm);
  color: var(--muted);
}

.settings__lang-row {
  padding: var(--sp-3) var(--sp-4);
}

.settings__lang-select {
  width: 100%;
  padding: var(--sp-2) var(--sp-4);
  padding-right: var(--sp-10);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--primary);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  transition: border-color 0.15s;
}

.settings__lang-select:focus {
  border-color: var(--brand);
  outline: none;
}

/* ── Settings: editable profile form ─────────────────────────────── */

.settings__edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.settings__edit-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.settings__edit-field:last-child {
  grid-column: 1 / -1;
}

.settings__edit-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
}

.settings__edit-input {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--primary);
  background: var(--background);
  transition: border-color 0.15s;
}

.settings__edit-input:focus {
  border-color: var(--brand);
  outline: none;
}

.settings__context-section {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.settings__context-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.settings__context-hint {
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0;
}

.settings__context-textarea {
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--primary);
  background: var(--background);
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.15s;
}

.settings__context-textarea:focus {
  border-color: var(--brand);
  outline: none;
}

.settings__context-counter {
  font-size: var(--text-xs);
  color: var(--muted);
  text-align: right;
}

.settings__readonly-rows {
  border-bottom: 1px solid var(--border);
}

.settings__save-row {
  padding: var(--sp-4);
  display: flex;
  justify-content: flex-end;
}

.settings__save-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--success-light, #f0fdf4);
  border-radius: var(--radius);
  margin-bottom: var(--sp-2);
}

.settings__save-icon {
  width: 16px;
  height: 16px;
  color: var(--success);
}

.settings__save-text {
  font-size: var(--text-sm);
  color: var(--success);
  font-weight: 500;
}

.settings__save-banner--error { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.settings__save-icon--error { color: var(--danger); }
.settings__save-text--error { color: var(--danger); }

@media (max-width: 640px) {
  .settings__edit-grid,
  .settings__password-form {
    grid-template-columns: 1fr;
  }
}

/* ── Profile switcher ─────────────────────────────────────────────── */

.profile-page {
  padding: var(--sp-12) var(--sp-8);
}

.profile-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 540px;
  margin: var(--sp-10) auto 0;
  padding: 0 var(--sp-4);
}

.profile-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 540px;
  margin: var(--sp-6) auto 0;
  padding: 0 var(--sp-4);
}

.profile-search__icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
}

.profile-search__input {
  width: 100%;
  padding: var(--sp-2-5) var(--sp-3);
  border: 1px solid var(--input);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  background: var(--background);
  color: var(--card-fg);
  outline: none;
  transition: border-color 0.15s;
}

.profile-search__input:focus {
  border-color: var(--brand);
}

.profile-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  background: var(--background);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.profile-card:hover {
  border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.profile-card--active {
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 15%, transparent);
}

.profile-card__row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
  flex: 1;
}

.profile-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.profile-card__org {
  font-weight: 600;
  font-size: var(--text-base, 1rem);
  color: var(--card-fg);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-card__role {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.4;
}

.profile-card__current {
  font-size: var(--text-xs);
  color: var(--brand);
  font-weight: 600;
  white-space: nowrap;
}

.profile-card__btn {
  flex-shrink: 0;
}

/* ── Profile add card ("+") ──────────────────────────────────────── */

.profile-card--add {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-8);
  border-style: dashed;
  color: var(--muted);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.profile-card--add:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.profile-add__header {
  display: flex;
  align-items: center;
}

.profile-add__plus {
  width: 20px;
  height: 20px;
  color: inherit;
}

.profile-add__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  color: var(--fg);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: background 0.15s;
}

.profile-add__link:hover {
  background: var(--hover);
}

.profile-add__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--brand-light);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 12px;
}
.profile-add__icon svg { width: 100%; height: 100%; }

.profile-add__label {
  font-weight: 500;
  font-size: var(--text-sm);
  color: inherit;
}

/* ── Onboarding lobby cards ──────────────────────────────────────── */

.lobby-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.lobby-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: var(--background);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.lobby-card:hover {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 4px 12px rgba(101, 163, 13, 0.1);
  transform: translateY(-1px);
}

.lobby-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--brand-light);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 12px;
}
.lobby-card__icon svg { width: 100%; height: 100%; }

.lobby-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lobby-card__title {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--primary);
}

.lobby-card__desc {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤1280px): chat as overlay ─────────────────────────────── */

@media (max-width: 1280px) {
  .app-shell {
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-areas: "sidebar main";
  }

  .topbar { right: 0; }

  #chat-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: var(--chat-w);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 70;
  }

  #chat-panel.chat-panel--open {
    transform: translateX(0);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  }

  /* Reset desktop collapsed state in tablet mode */
  #chat-panel.chat-panel--collapsed {
    width: 100%;
    max-width: var(--chat-w);
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
  }

  /* Chat page on tablet — override fixed positioning, sessions hidden */
  .app-shell--chat-page #chat-panel {
    position: static;
    transform: none;
    max-width: none;
    flex-direction: column;
  }

  .app-shell--chat-page .chat-sessions-panel {
    display: none;
  }

  .app-shell--chat-page #chat-history-btn {
    display: flex;
  }

  /* Tab-switch: history replaces conversation on tablet/mobile */
  #chat-panel.chat-panel--show-history .chat-conversation {
    display: none;
  }

  #chat-panel.chat-panel--show-history .chat-sessions-panel {
    display: flex;
    position: static;
    top: auto;
    left: auto;
    right: auto;
    max-height: none;
    height: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--surface);
  }

}

/* ── Tablet (≤1024px): tighten padding, adapt grids ───────────────── */

@media (max-width: 1024px) {
  .landing__body,
  .advisor__body,
  .farmer__body,
  .team__body,
  .sales__body,
  .transactions__body,
  .activities__body,
  .sk-body {
    padding: var(--sp-4) var(--sp-8);
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .kpi-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .sales__two-col {
    grid-template-columns: 1fr;
  }

  .landing__bottom-row {
    grid-template-columns: 1fr;
  }

  .farmer-sales__kpi-row {
    grid-template-columns: 1fr;
  }

  .farmer-sales__kpi-row > .product-card {
    max-width: none;
  }

  .cal-page__body { padding: 0 var(--sp-4); }
}

/* ── Mobile (≤768px): sidebar as drawer ────────────────────────────── */

@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "main";
  }

  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 30;
  }

  #sidebar.sidebar--open {
    transform: translateX(0);
  }

  .page-header {
    padding: var(--sp-4);
    gap: var(--sp-3);
  }

  .page-header__title {
    font-size: var(--text-2xl);
    line-height: var(--lh-2xl);
  }

  .page-header__actions {
    width: 100%;
    display: flex;
    gap: var(--sp-2);
  }

  .page-header__actions .btn {
    flex: 1;
    justify-content: center;
    font-size: var(--text-xs);
    padding: var(--sp-2) var(--sp-3);
    white-space: nowrap;
  }

  .page-header__actions .btn--outline-icon {
    flex: 0 0 auto;
    padding: var(--sp-2);
  }

  .landing__body {
    padding: var(--sp-4);
  }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .kpi-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing__bottom-row {
    grid-template-columns: 1fr;
  }

  .portfolio__header {
    flex-direction: column;
    gap: var(--sp-4);
  }

  .portfolio__metrics {
    flex-wrap: wrap;
    gap: var(--sp-4);
  }

  .mini-metric {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-top: var(--sp-3);
  }

  .advisor-card .card-body {
    flex-direction: column;
  }

  .topbar {
    padding: var(--sp-3) var(--sp-4);
    padding-top: calc(var(--sp-3) + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
  }

  .topbar__hamburger { display: flex; }

  .settings__header {
    padding: var(--sp-6) var(--sp-4);
  }

  .settings__body {
    padding: var(--sp-4);
  }

  .settings__action-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .advisor__top-row,
  .advisor__mid-row,
  .advisor__bottom-row,
  .farmer__top-row,
  .farmer__mid-row,
  .farmer__bottom-row {
    grid-template-columns: 1fr;
  }

  .advisor__body,
  .farmer__body,
  .team__body,
  .sales__body,
  .transactions__body,
  .activities__body,
  .sk-body,
  .campaign-detail__tabs,
  .relations {
    padding: var(--sp-4);
  }

  .claim-banner__wrapper {
    padding: var(--sp-4);
  }

  .page-header {
    padding: var(--sp-4);
  }

  .settings__header {
    padding: var(--sp-4);
  }

  .kpi-grid--2x2 {
    grid-template-columns: 1fr;
  }

  .sales-metrics-row { flex-direction: column; }
  .sales-metric:not(:first-child) { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: var(--sp-3); }

  .sales__two-col { grid-template-columns: 1fr; }
  .sales__body { padding: var(--sp-4); }
  .interactions__actions, .interventions__actions { flex-wrap: wrap; }

  .planner-grid { grid-template-columns: 1fr; }
  .farmer-profile__top-row { grid-template-columns: 1fr !important; }

  /* Mobile full-bleed map: remove main-content padding so 100vh works */
  .main-content--no-scroll { padding-top: 0 !important; }

  /* Advisor map mode on mobile: no header, floating buttons */
  .advisor-parcels-page--map .page-header { display: none !important; }
  .advisor-parcels-page--map .advisor-parcels__map-float-actions { display: flex; }
  .advisor-parcels-page--map .leaflet-top {
    top: calc(68px + env(safe-area-inset-top, 0px) + 48px) !important;
  }
  /* Collapse left card by default on mobile */
  .advisor-parcels-page--map .parcels-map-panel {
    top: calc(68px + env(safe-area-inset-top, 0px) + var(--sp-2)) !important;
    width: auto;
    max-height: none;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  .advisor-parcels-page--map .parcels-map-panel .parcels-map-panel__expand-btn { display: flex; }
  .advisor-parcels-page--map .parcels-map-panel .parcels-map-panel__content { display: none; }
  .advisor-parcels-page--map .parcels-map-panel.parcels-map-panel--expanded {
    width: 320px;
    max-width: calc(100% - var(--sp-8) - 52px);
    max-height: calc(100% - var(--sp-8));
    padding: 0;
    background: var(--background);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  }
  .advisor-parcels-page--map .parcels-map-panel--expanded .parcels-map-panel__expand-btn { display: none; }
  .advisor-parcels-page--map .parcels-map-panel--expanded .parcels-map-panel__content { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; }

  /* Farmer map mode on mobile: no header, floating buttons */
  .farmer-landing--map .page-header { display: none !important; }
  .farmer-landing--map .farmer__body { flex: 1; min-height: 0; padding: 0 !important; }
  .farmer-landing--map .farmer-parcels__map-wrap { flex: 1; min-height: 0; }
  .farmer-landing--map .farmer-parcels__map-float-actions { display: flex; }
  .farmer-landing--map .leaflet-top {
    top: calc(68px + env(safe-area-inset-top, 0px) + 48px) !important;
  }
  /* Collapse left card by default on mobile */
  .farmer-landing--map .parcels-map-panel {
    top: calc(68px + env(safe-area-inset-top, 0px) + var(--sp-2)) !important;
    width: auto;
    max-height: none;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  .farmer-landing--map .parcels-map-panel .parcels-map-panel__expand-btn { display: flex; }
  .farmer-landing--map .parcels-map-panel .parcels-map-panel__content { display: none; }
  .farmer-landing--map .parcels-map-panel.parcels-map-panel--expanded {
    background: var(--background);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    width: 320px;
    max-width: calc(100% - var(--sp-8) - 52px);
    max-height: calc(100% - var(--sp-8));
    padding: 0;
  }
  .farmer-landing--map .parcels-map-panel--expanded .parcels-map-panel__expand-btn { display: none; }
  .farmer-landing--map .parcels-map-panel--expanded .parcels-map-panel__content { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; }

  /* ── Calendar mobile: time-axis week view ──────────────────────────
     On narrow screens, shrink the time gutter and use horizontal scroll
     so the full 7-day grid stays accessible. */

  .cal-page__body { padding: 0 var(--sp-3); }

  .main-content:has(.cal-page__body) {
    overflow-y: auto;
  }

  .cal-week-headers,
  .cal-week-body {
    grid-template-columns: 40px repeat(7, minmax(80px, 1fr));
    min-width: 600px;
  }

  #cal-container {
    overflow-x: auto;
  }

  .cal-day__header {
    flex-direction: column;
    padding: var(--sp-2) var(--sp-1);
  }

  .cal-day__weekday { font-size: 10px; }

  .cal-day__date {
    font-size: var(--text-sm);
  }

  /* Cards on mobile — keep all content visible */
  .cal-card { padding: 6px 8px; }
  .cal-card__title { white-space: normal; }

  /* Month grid: keep 7 cols, tighter cells */
  .cal-month-cell { min-height: 50px; }
  .cal-month-cell__date { font-size: 10px; }
  .cal-month-cell__dot { font-size: 9px; padding: 1px 2px; }

  /* Table view: simplified grid on mobile */
  .cal-table__row { grid-template-columns: 60px 80px 1fr 80px; }
  .cal-table__mode { display: none; }

  /* Nav bar: stack label below arrows on very narrow */
  .cal-week-switcher {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .cal-view-switcher__btn {
    padding: var(--sp-1-5) var(--sp-2);
    font-size: var(--text-xs);
  }

  .farmer-sales__kpi-row { grid-template-columns: 1fr !important; }
  .farmer-sales__kpi-row > .product-card { max-width: none !important; }
  .timeline-chart__body { flex-direction: column; }
  .timeline-chart__summary { width: 100%; border-left: none; border-top: 1px solid var(--border); }

  /* Chat: full-screen overlay on mobile */
  #chat-panel {
    max-width: 100%;
    width: 100%;
  }

  #chat-panel.chat-panel--open {
    width: 100%;
  }

  /* Reset desktop collapsed overrides — keep transform-based hiding */
  #chat-panel.chat-panel--collapsed {
    width: 100%;
    max-width: 100%;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
  }

  .chat-toolbar__close-btn { display: flex; }

  /* Chat page on mobile — unique grid (no sidebar column) + mobile-only overrides */
  .app-shell--chat-page {
    grid-template-columns: 1fr;
    grid-template-areas: "chat";
  }

  .app-shell--chat-page #chat-panel {
    width: 100%;
  }

  .app-shell--chat-page #sidebar {
    z-index: 80;
  }

  .app-shell--chat-page .sidebar-overlay {
    z-index: 75;
  }
}

/* ── Planner / weekly calendar ────────────────────────────────────── */

.planner-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.planner-day { background: var(--background); min-height: 400px; display: flex; flex-direction: column; }
.planner-day__header { padding: var(--sp-2) var(--sp-3); text-align: center; }
.planner-day__header-day { font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; }
.planner-day__header-date { font-size: var(--text-xl); font-weight: 700; color: var(--card-fg); }
.planner-day__items { padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.planner-card { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--text-xs); display: flex; flex-direction: column; gap: var(--sp-1); }
.planner-card__time { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
.planner-card__title { font-weight: 600; color: var(--card-fg); font-size: var(--text-xs); }
.planner-card__detail { display: flex; align-items: center; gap: var(--sp-1); color: var(--muted); }
.planner-card__detail i,
.planner-card__detail-icon { width: 12px; height: 12px; }
.planner-card__check { width: 14px; height: 14px; color: var(--success); }
.planner-month { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; }
.planner-month__nav { display: flex; gap: var(--sp-1); }
.planner-month__nav-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius); width: 28px; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.planner-month__title { font-size: var(--text-base); font-weight: 600; color: var(--card-fg); }
.planner-week-toggle { margin-left: auto; font-size: var(--text-sm); color: var(--muted); display: flex; align-items: center; gap: var(--sp-1); cursor: pointer; }

/* ── Task list ────────────────────────────────────────────────────── */

.task-list { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.task-row { display: flex; align-items: center; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); gap: var(--sp-4); }
.task-row:last-child { border-bottom: none; }
.task-row__left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.task-row__info { display: flex; flex-direction: column; gap: 2px; }
.task-row__name { font-size: var(--text-sm); font-weight: 600; color: var(--card-fg); }
.task-row__meta { font-size: var(--text-xs); color: var(--muted); display: flex; align-items: center; gap: var(--sp-2); }
.task-row__meta i,
.task-row__meta-icon { width: 12px; height: 12px; }
.task-row__meta-sep { color: var(--muted); }
.task-row__subtitle { font-size: var(--text-sm); color: var(--muted); }
.task-row__overdue { white-space: nowrap; }
.task-row__tags { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.task-row__arrow { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }

/* ── Crop breakdown segmented bar ─────────────────────────────────── */

.crop-breakdown {
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.crop-breakdown__title {
  display: block;
  font-size: var(--text-sm);
  color: var(--fg);
  line-height: var(--lh-sm, 20px);
}
.crop-breakdown__header { display: flex; flex-direction: column; }
.crop-breakdown__value { font-size: var(--text-xl); font-weight: 600; color: var(--card-fg); line-height: var(--lh-xl, 28px); }
.crop-breakdown__sub { font-size: var(--text-sm); color: var(--muted); line-height: var(--lh-sm, 20px); }
.crop-breakdown__legend {
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.crop-breakdown__legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--secondary-fg);
  white-space: nowrap;
}
.crop-breakdown__legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

/* ECharts crop breakdown chart */
.crop-breakdown .chart-wrap { flex-shrink: 0; }

/* ── Farmer profile page ──────────────────────────────────────────── */

.farmer-profile__top-row { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-6); margin-bottom: var(--sp-6); align-items: start; }
.farmer-profile__col-left,
.farmer-profile__col-right { min-width: 0; }
.farmer-profile__interventions { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); }
.farmer-profile__view-toggle { display: flex; gap: var(--sp-1); }

/* ── Parcels & agronomy page ──────────────────────────────────────── */

.parcels-agro__view-toggle { display: flex; gap: var(--sp-1); }
.advisor-parcels__table-view[hidden] { display: none; }
.advisor-parcels__table-view:not([hidden]) { display: flex; flex-direction: column; gap: var(--sp-6); }

/* Parcels toolbar (title + search + filter + export + view toggle on one line) */
.parcels__search-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.parcels__search-row .team__search-bar { flex: 1; min-width: 180px; }
.parcels__search-row .parcels-agro__view-toggle { flex-shrink: 0; }
.parcels__toolbar { display: flex; flex-direction: column; gap: var(--sp-3); }
.parcels__toolbar .team__search-bar { width: 100%; }
.parcels__section-title { font-size: var(--text-base); font-weight: 600; white-space: nowrap; color: var(--card-fg); }

/* ── Farmer parcels: table / map view toggle ─────────────────────── */

.farmer-parcels__table-view[hidden] { display: none; }
.farmer-parcels__table-view:not([hidden]) { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Prevent body scroll when map is open */
.main-content--no-scroll { overflow: hidden !important; }

/* Full-viewport map layout — fills main-content below the topbar */
.farmer-landing--map {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.farmer-landing--map .page-header { flex-shrink: 0; }
/* Floating action buttons — hidden by default, shown on mobile map mode only */
.farmer-parcels__map-float-actions {
  display: none;
  position: absolute;
  top: calc(68px + env(safe-area-inset-top, 0px) + var(--sp-2));
  right: 10px;
  z-index: 6;
  gap: var(--sp-2);
}
.farmer-parcels__map-float-actions .btn {
  height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius);
  background: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  color: var(--card-fg);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}
.farmer-parcels__map-float-actions .btn:hover { background: var(--surface); }
.farmer-parcels__map-float-actions .btn i,
.farmer-parcels__map-float-actions .btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.farmer-landing--map .farmer__body {
  flex: 1;
  padding: 0;
  gap: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── Shared parcels map wrap ──────────────────────────────────────── */
.parcels-map-wrap {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  height: 320px;
}
.parcels-map-wrap[hidden] { display: none !important; }
.parcels-map-wrap .parcel-map-container {
  height: 100% !important;
  border: 0;
  border-radius: 0;
}
/* In table mode, hide floating overlays */
.parcels-map-wrap .parcels-map-panel,
.parcels-map-wrap .add-parcel-float { display: none; }

/* Leaflet controls position is default on desktop; mobile overrides below */

/* Leaflet controls — shared styling for zoom + layers */
.parcels-map-wrap .leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  border-radius: 8px !important;
  overflow: hidden;
}
.parcels-map-wrap .leaflet-control-layers {
  border: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  border-radius: 8px !important;
}
.parcels-map-wrap .leaflet-control-layers-toggle {
  width: 36px !important;
  height: 36px !important;
}
.parcels-map-wrap .leaflet-control-zoom a {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 16px !important;
  color: var(--card-fg) !important;
  background-color: white !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  cursor: pointer !important;
}
.parcels-map-wrap .leaflet-control-zoom a:last-child {
  border-bottom: none !important;
}

/* ── Farmer map-mode overrides ────────────────────────────────────── */
.farmer-landing--map .farmer-parcels__map-wrap {
  flex: 1;
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: 0;
}
.farmer-landing--map .farmer-parcels__map-wrap .parcels-map-panel {
  display: flex;
  top: 10px;
}

/* ── Advisor map-mode overrides ───────────────────────────────────── */
.advisor-parcels-page--map {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin-top: calc(-68px - env(safe-area-inset-top, 0px));
  padding-top: calc(68px + env(safe-area-inset-top, 0px));
  overflow: hidden;
}
.advisor-parcels-page--map .page-header { flex-shrink: 0; }
/* Floating action buttons — hidden by default, shown on mobile map mode only */
.advisor-parcels__map-float-actions {
  display: none;
  position: absolute;
  top: calc(68px + env(safe-area-inset-top, 0px) + var(--sp-2));
  right: 10px;
  z-index: 6;
  gap: var(--sp-2);
}
.advisor-parcels__map-float-actions .btn {
  height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius);
  background: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  color: var(--card-fg);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}
.advisor-parcels__map-float-actions .btn:hover {
  background: var(--surface);
}
.advisor-parcels__map-float-actions .btn i,
.advisor-parcels__map-float-actions .btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.advisor-parcels-page--map .team__body {
  flex: 1;
  padding: 0;
  gap: 0;
  overflow: hidden;
  display: flex;
}
.advisor-parcels-page--map .advisor-parcels__map-wrap {
  flex: 1;
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: 0;
}
.advisor-parcels-page--map .advisor-parcels__map-wrap .parcels-map-panel {
  display: flex;
  top: 10px;
}

/* Farmer name sub-line on parcel cards */
.parcels-map-card__farmer {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Floating parcel list panel inside map view */
.parcels-map-panel {
  position: absolute;
  top: calc(68px + env(safe-area-inset-top, 0px) + var(--sp-4));
  left: var(--sp-4);
  z-index: 7;
  width: 320px;
  max-width: calc(100% - var(--sp-8) - 52px);
  max-height: calc(100% - 68px - env(safe-area-inset-top, 0px) - var(--sp-8));
  background: var(--background);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.parcels-map-panel__header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.parcels-map-panel__header .team__search-input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  background: var(--background);
}
.parcels-map-panel__toggle {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.parcels-map-panel__toggle .btn { flex: 1; }
.parcels-map-panel__content { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-height: 0; }
.parcels-map-panel__list { overflow-y: auto; flex: 1; }

/* Expand button — hidden by default, shown when collapsed */
.parcels-map-panel__expand-btn {
  display: none;
  height: 36px;
  padding: 0 var(--sp-3);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius);
  color: var(--card-fg);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: none;
  font-size: var(--text-xs);
  font-weight: 500;
  gap: var(--sp-1);
  white-space: nowrap;
}
.parcels-map-panel__expand-btn:hover { background: var(--surface); }
.parcels-map-panel__expand-btn i,
.parcels-map-panel__expand-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Collapsed state */
.parcels-map-panel--collapsed {
  width: auto;
  max-height: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.parcels-map-panel--collapsed .parcels-map-panel__expand-btn { display: flex; }
.parcels-map-panel--collapsed .parcels-map-panel__content { display: none; }

/* Individual parcel card in map panel */
.parcels-map-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.parcels-map-card:last-child { border-bottom: none; }
.parcels-map-card:hover { background: var(--surface); }

.parcels-map-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.parcels-map-card__icon i,
.parcels-map-card__icon svg { width: 18px; height: 18px; color: white; }

.parcels-map-card__info { flex: 1; min-width: 0; }
.parcels-map-card__name { font-weight: 600; font-size: var(--text-sm); color: var(--card-fg); }
.parcels-map-card__area { font-size: var(--text-xs); color: var(--muted); }

.parcels-map-card__menu { flex-shrink: 0; }

/* ── Add-parcel button inside floating panel ─────────────────────── */
.js-add-parcel-btn.btn {
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
  box-shadow: none;
}
.js-add-parcel-btn.btn:hover {
  background: #5a920c !important;
  border-color: #5a920c !important;
}
.parcels-map-panel__add-btn.btn {
  margin: var(--sp-2) var(--sp-3);
  width: calc(100% - var(--sp-3) * 2);
}
/* ── Add-parcel card ──────────────────────────────────────────────── */
/* Table mode: normal flow card below the map */
.add-parcel-float[hidden] { display: none !important; }
.add-parcel-float {
  background: var(--background);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Map mode: floating over the map */
.farmer-landing--map .add-parcel-float {
  position: absolute;
  bottom: var(--sp-4);
  left: var(--sp-4);
  right: var(--sp-4);
  z-index: 50;
  width: 420px;
  max-width: calc(100% - var(--sp-8));
  max-height: calc(100% - var(--sp-8));
  border: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}
.farmer-landing--map .add-parcel-float[hidden] { display: none !important; }
.add-parcel-float__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.add-parcel-float__title-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  user-select: none;
  flex: 1;
  padding: var(--sp-1) 0;
  border-radius: var(--radius);
}
.add-parcel-float__title-row:hover { opacity: 0.7; }
.add-parcel-float__title-row i,
.add-parcel-float__title-row svg { width: 16px; height: 16px; color: var(--muted); }
.add-parcel-float__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--card-fg);
}
.add-parcel-float__close { flex-shrink: 0; }
.add-parcel-float__body {
  overflow-y: auto;
  padding: var(--sp-4);
  transition: max-height 0.2s ease, padding 0.2s ease;
  max-height: 600px;
}
.add-parcel-float__body--collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}
.add-parcel-float__hint {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-sm);
  white-space: pre-line;
}
.add-parcel-float .farm-dialog__fields {
  gap: var(--sp-3);
}
.add-parcel-float .invite-dialog__actions {
  margin-top: var(--sp-3);
  gap: var(--sp-2);
}
/* ── Small mobile (≤480px) ─────────────────────────────────────────── */

@media (max-width: 480px) {
  .parcels__search-row {
    flex-direction: column;
    align-items: stretch;
  }
  .parcels__search-row .team__search-bar {
    width: 100%;
  }
  .parcels__search-row .parcels-agro__view-toggle {
    align-self: flex-start;
  }

  /* Auth pages on small mobile */
  .stepper { display: none; }
  .auth-page__subtitle { display: none; }

  .auth-page {
    padding: 0;
    min-height: 100vh;
    align-items: stretch;
    justify-content: flex-start;
  }

  .auth-page__card,
  .auth-page__card--wide {
    max-width: 100%;
    padding: var(--sp-6) var(--sp-4);
    border-radius: 0;
    box-shadow: none;
    border: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .auth-page__lang-switcher {
    top: calc(var(--sp-3) + env(safe-area-inset-top, 0px));
    bottom: auto;
    right: var(--sp-3);
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .page-header__title {
    font-size: var(--text-2xl);
    line-height: var(--lh-2xl);
  }

  #chat-panel {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Audit Dashboard
   ═══════════════════════════════════════════════════════════════════ */

.audit { padding: 0; }
.audit__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-8);
}

/* Filter bar */
.audit-filter-bar {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  align-items: center;
}
.audit-filter-group {
  display: flex;
  gap: var(--sp-0-5);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 3px;
}
.audit-filter-btn {
  padding: var(--sp-1-5) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  white-space: nowrap;
}
.audit-filter-btn:hover { color: var(--card-fg); background: var(--border); }
.audit-filter-btn--active {
  color: var(--card-fg);
  background: var(--background);
  box-shadow: var(--shadow-sm);
  font-weight: 500;
}

/* Charts */
.audit-charts { display: flex; flex-direction: column; gap: var(--sp-6); }
.audit-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.audit-chart-card { padding: var(--sp-6); }

/* Severity badges */
.audit-severity-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
}
.audit-severity--error { background: #fef2f2; color: #dc2626; }
.audit-severity--warning { background: #fffbeb; color: #d97706; }
.audit-severity--info { background: #eff6ff; color: #2563eb; }

/* Event type and mono */
.audit-event-type { font-family: var(--font-mono, monospace); font-size: var(--text-xs); }
.audit-mono { font-family: var(--font-mono, monospace); font-size: var(--text-xs); color: var(--muted); }

/* Events card */
.audit-events-card { padding: var(--sp-6); }
.audit-empty { text-align: center; color: var(--muted); padding: var(--sp-10); }

/* Pagination */
.audit-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
}
.audit-pag-btn {
  padding: var(--sp-1-5) var(--sp-4);
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  font-weight: 500;
  font-size: var(--text-sm);
  user-select: none;
  transition: background 0.15s;
}
.audit-pag-btn:hover { background: var(--border); }
.audit-pag-info { font-size: var(--text-sm); color: var(--muted); }

/* Active filters bar */
.audit-active-filters {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-2) 0;
}
.audit-active-filters__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  margin-right: var(--sp-1);
}
.audit-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--brand-light);
  color: var(--brand);
  font-size: var(--text-xs);
  font-weight: 500;
}
.audit-filter-tag__remove {
  cursor: pointer;
  font-weight: 700;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.audit-filter-tag__remove:hover { opacity: 1; }

/* Event type dropdown */
.audit-filter-select {
  padding: var(--sp-1-5) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--card-fg);
  cursor: pointer;
  appearance: auto;
}

/* Query builder */
.audit-query-builder {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
}
.audit-query-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.audit-query-row {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}
.audit-query-field,
.audit-query-op,
.audit-query-val {
  padding: var(--sp-1-5) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--card-fg);
}
.audit-query-field { min-width: 160px; }
.audit-query-op { min-width: 100px; }
.audit-query-val { flex: 1; min-width: 160px; }
.audit-query-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--danger);
  font-weight: 700;
  font-size: var(--text-base);
  user-select: none;
  transition: background 0.15s;
  flex-shrink: 0;
}
.audit-query-remove:hover { background: var(--danger-light); }
.audit-query-actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.audit-query-btn {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--card-fg);
  transition: all 0.15s;
}
.audit-query-btn:hover { background: var(--border); }
.audit-query-btn--primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.audit-query-btn--primary:hover { opacity: 0.9; background: var(--brand); }

/* Collapsible panels */
.audit-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.audit-panel > summary {
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-weight: 500;
  font-size: var(--text-sm);
  background: var(--surface);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  user-select: none;
}
.audit-panel > summary::-webkit-details-marker { display: none; }
.audit-panel > summary::before {
  content: "\25B6";
  font-size: 10px;
  transition: transform 0.2s;
}
.audit-panel[open] > summary::before { transform: rotate(90deg); }
.audit-panel__body { padding: var(--sp-6); }
.audit-panel-form {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  align-items: end;
}
.audit-panel-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.audit-panel-field label {
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 500;
}
.audit-panel-field select {
  padding: var(--sp-1-5) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--card-fg);
}

/* Payload expansion */
.audit-payload-toggle { cursor: pointer; }
.audit-payload-toggle:hover { background: var(--surface); }
.audit-payload-row { display: none; }
.audit-payload-row--visible { display: table-row; }

.audit-payload-expand {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.audit-payload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
}

.audit-payload-entry {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3);
  background: var(--surface);
  border-radius: var(--radius-sm);
  min-width: 0;
}

.audit-payload-key {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.audit-payload-val {
  font-size: var(--text-sm);
  color: var(--card-fg);
  word-break: break-word;
}

.audit-payload-nested {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
  padding: var(--sp-2);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  line-height: 1.5;
  margin: 0;
}

.audit-copy-btn {
  align-self: flex-end;
  flex-shrink: 0;
}

/* Grouped table */
.audit-grouped-row { cursor: pointer; transition: background 0.1s; }
.audit-grouped-row:hover { background: var(--surface); }
.audit-grouped-row__value { font-weight: 500; }

/* View toggle */
.audit-view-toggle {
  display: flex;
  gap: 0;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 3px;
  margin-left: auto;
}
.audit-view-btn {
  padding: var(--sp-1-5) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.audit-view-btn:hover { color: var(--card-fg); background: var(--border); }
.audit-view-btn--active {
  color: var(--card-fg);
  background: var(--background);
  box-shadow: var(--shadow-sm);
  font-weight: 500;
}

/* Sortable headers */
.audit-sort-header {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.audit-sort-header:hover { color: var(--brand); }
.audit-sort-indicator { font-size: 10px; margin-left: 2px; }

/* 6-column KPI grid */
.kpi-grid--6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-4);
}

/* Events section header row */
.audit-events-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

/* Group-by selector */
.audit-group-selector {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.audit-group-label {
  font-size: var(--text-sm);
  color: var(--muted);
  white-space: nowrap;
}

/* Clickable event-type in bar chart */
.audit-chart-card--clickable { cursor: pointer; }

/* ── Farmer Sales Page (Advisor) ──────────────────────────────────── */

/* KPI row: 3 stat cards + product card side by side */
.farmer-sales__kpi-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-6);
  align-items: stretch;
}

.farmer-sales__kpi-row > .kpi-grid {
  margin-top: 0;
}

.farmer-sales__kpi-row > .product-card {
  min-width: 280px;
  max-width: 340px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.farmer-sales__kpi-row > .product-card .card-header {
  padding: var(--sp-3) var(--sp-4);
}

.farmer-sales__kpi-row > .product-card .card-header .section-header__title {
  font-size: var(--text-sm);
}

.product-card__body--compact {
  padding: var(--sp-3) var(--sp-4);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
}

.product-card__body--compact .product-card__name {
  font-size: var(--text-base);
  margin-bottom: var(--sp-1);
}

.product-card__body--compact .product-card__price {
  font-size: var(--text-base);
}

.product-card__body--compact .product-card__pricing {
  gap: 0;
}

/* Purchases timeline card */
.timeline-chart .section-header {
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--border);
}

.timeline-chart__body {
  display: flex;
}

.timeline-chart__chart {
  flex: 1;
  min-width: 0;
  padding: var(--sp-4);
}

.timeline-chart__summary {
  width: 252px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.timeline-summary__item {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.timeline-summary__item:last-child {
  border-bottom: none;
}

.timeline-summary__label {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--muted);
}

.timeline-summary__value {
  font-size: var(--text-xl);
  line-height: var(--lh-lg);
  font-weight: 400;
  color: var(--card-fg);
}

/* Best selling product card */
.product-card__body {
  display: flex;
  flex-direction: column;
}

.product-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 181px;
  padding: var(--sp-6);
  background: linear-gradient(120deg, rgba(255,255,255,0.05), rgba(9,9,11,0.05));
}

.product-card__image-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.product-card__placeholder-text {
  font-size: var(--text-sm);
  color: var(--muted);
}

.product-card__details {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}

.product-card__badge-row {
  margin-bottom: var(--sp-1);
}

.product-card__name {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lh-lg);
  color: var(--card-fg);
}

.product-card__desc {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--muted);
}

.product-card__pricing {
  display: flex;
  flex-direction: column;
  gap: var(--sp-0-5);
  padding-top: var(--sp-4);
}

.product-card__price {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lh-lg);
}

.product-card__price-amount {
  color: var(--success);
}

.product-card__price-unit {
  color: var(--muted);
}

.product-card__orders {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--muted);
}

.product-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-2);
}

/* Year select styled as outline button */
.timeline-year-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--background) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-1-5) var(--sp-8) var(--sp-1-5) var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--lh-sm);
  color: var(--card-fg);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
}

.timeline-year-select:hover {
  background-color: var(--surface);
}

.timeline-year-select:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

@media (max-width: 1200px) {
  .kpi-grid--6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .audit__body { padding: var(--sp-4); gap: var(--sp-6); }
  .audit-charts-row { grid-template-columns: 1fr; }
  .kpi-grid--6 { grid-template-columns: repeat(2, 1fr); }
  .audit-query-row { flex-wrap: wrap; }
  .audit-panel-form { flex-direction: column; }
}

/* ── Enterprise Search Dropdown ──────────────────────────────────── */

.enterprise-search {
  position: relative;
  width: 100%;
}



.enterprise-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-top: var(--sp-1);
}

.enterprise-results:empty {
  display: none;
}

.enterprise-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  transition: background 0.1s;
}

.enterprise-result:hover {
  background: var(--surface);
}

.enterprise-result + .enterprise-result {
  border-top: 1px solid var(--border);
}

.enterprise-result__name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--card-fg);
}

.enterprise-result__meta {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* ── Auto-filled fields group ────────────────────────────────────── */

.auth-form__fields-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.auth-form__fields-group .auth-form__field--full {
  grid-column: 1 / -1;
}

/* ── Invitations section (settings page) ─────────────────────────── */

.invitations-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.invitation-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
}

.invitation-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.invitation-card__org {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--card-fg);
}

.invitation-card__type {
  font-size: var(--text-xs);
  color: var(--muted);
}

.invitation-card__actions {
  display: flex;
  gap: var(--sp-2);
}

/* ── Add-farm dialog (reuses invite-dialog pattern) ──────────────── */

.farm-dialog__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.farm-dialog__field--full {
  grid-column: 1 / -1;
}

/* ── Add-parcel card ─────────────────────────────────────────────── */

.add-parcel-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-4);
}

.add-parcel-card .invite-dialog__header {
  border-bottom: none;
  padding: 0 0 var(--sp-1) 0;
}

.add-parcel-card .invite-dialog__desc {
  margin-bottom: 20px;
}

.add-parcel-card .invite-dialog__actions {
  padding-top: var(--sp-4);
  gap: var(--sp-2);
}

/* ── Parcel form overrides (add-parcel card + detail panel) ────────── */

.add-parcel-card .farm-dialog__fields,
.detail-panel .farm-dialog__fields {
  gap: 20px 20px;
}

.add-parcel-card .auth-form__label,
.detail-panel .auth-form__label {
  margin-bottom: var(--sp-1);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.add-parcel-card .auth-form__input,
.detail-panel .auth-form__input {
  padding: var(--sp-2) var(--sp-3);
}

.add-parcel-card .auth-form__input:focus,
.detail-panel .auth-form__input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.08);
}

/* Readonly inputs look like plain text in view mode */
.detail-panel .auth-form__input[readonly] {
  border-color: transparent;
  background: transparent;
  cursor: default;
  color: var(--card-fg);
}

.add-parcel-card .auth-form__input:focus,
.detail-panel .auth-form__input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(23, 23, 23, 0.08);
}

/* Breathing room between detail panel sections */
.detail-panel__body > .detail-panel__section {
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.detail-panel__body > .detail-panel__section:first-child,
.detail-panel__body > .detail-panel__stats,
.detail-panel__body > .parcel-map {
  padding-top: 0;
  border-top: none;
}

.detail-panel__section-title {
  margin-bottom: var(--sp-2);
}

.add-parcel__input-with-suffix {
  position: relative;
  display: flex;
  align-items: center;
}

.add-parcel__input-with-suffix .auth-form__input {
  flex: 1;
  padding-right: 3.5rem;
}

.add-parcel__suffix {
  position: absolute;
  right: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  pointer-events: none;
}

/* ── Parcel detail panel extras ──────────────────────────────────── */

.detail-panel__extra-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}

.detail-panel__extra-key {
  font-weight: 600;
  font-size: var(--text-sm);
  min-width: 6rem;
  color: var(--card-fg);
}

.detail-panel__extra-value {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.detail-panel__extra-add-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
}

.detail-panel__extra-add-row .auth-form__input {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
}

.detail-panel__empty {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--sp-2) 0;
}

/* ── Parcel map ──────────────────────────────────────────────────── */

.parcel-map-container {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  /* Own compositing layer — prevents overlay from dropping tile paints */
  transform: translateZ(0);
}

/* Ensure Leaflet.Draw toolbar actions are fully visible */
.parcel-map-container .leaflet-draw-actions {
  z-index: 1000;
}
.parcel-map-container .leaflet-draw-toolbar {
  z-index: 1000;
}
.parcel-map-container .leaflet-control-attribution {
  display: none;
}

/* ── RPG parcel select ──────────────────────────────────────────── */

/* Year picker control */
.rpg-year-picker {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,.2);
    padding: 4px 8px;
    font-size: 12px;
    font-family: var(--font-body, sans-serif);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text);
}
.rpg-year-picker__label {
    font-weight: 600;
    white-space: nowrap;
}
.rpg-year-picker__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    z-index: 1000;
    display: none;
    min-width: 100%;
}
.rpg-year-picker__dropdown--open { display: block; }
.rpg-year-picker__option {
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-body, sans-serif);
}
.rpg-year-picker__option:hover { background: #f0f0f0; }
.rpg-year-picker__option--active {
    background: var(--primary-50, #eff6ff);
    font-weight: 600;
}

/* Loading spinner in map corner */
.rpg-loading-indicator {
    background: rgba(255,255,255,.9);
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,.2);
    padding: 6px 10px;
    font-size: 12px;
    font-family: var(--font-body, sans-serif);
    color: var(--muted);
    display: none;
    align-items: center;
    gap: 6px;
}
.rpg-loading-indicator--visible { display: flex; }
.rpg-loading-indicator__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #e5e7eb;
    border-top-color: var(--primary, #3b82f6);
    border-radius: 50%;
    animation: rpg-spin .6s linear infinite;
}
@keyframes rpg-spin { to { transform: rotate(360deg); } }

/* Auto-fill highlight on form fields */
.rpg-field-wrapper {
    position: relative;
    display: block;
}
.rpg-autofill {
    background: #eff6ff !important;
    border-color: var(--primary-200, #bfdbfe) !important;
}
.rpg-autofill-badge {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 700;
    color: var(--primary, #3b82f6);
    background: var(--primary-50, #eff6ff);
    border: 1px solid var(--primary-200, #bfdbfe);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-body, sans-serif);
    letter-spacing: .02em;
    pointer-events: none;
}

/* RPG crop labels on map */
.rpg-crop-label {
    background: none !important;
    border: none !important;
}
.rpg-crop-label span {
    display: block;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-body, sans-serif);
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
    transform: translate(-50%, -50%);
}

/* Zoom hint overlay */
.rpg-zoom-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.7);
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--font-body, sans-serif);
    z-index: 800;
    pointer-events: none;
    transition: opacity .3s;
}

.auth-form__map-wrap {
  margin-bottom: var(--sp-4);
}

/* ── Parcels tab switcher (onboarding) ───────────────────────────── */

.parcels-tab__bar {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}

.parcels-tab__btn {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  background: var(--background);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: center;
}

.parcels-tab__btn:not(:last-child) {
  border-right: 1px solid var(--border);
}

.parcels-tab__btn:hover {
  background: var(--surface);
}

.parcels-tab__btn--active {
  background: var(--surface);
  color: var(--primary);
  font-weight: 600;
}

.parcels-tab__panel {
  /* panels toggled via JS display:none / display:block */
}

/* ── Onboarding banner (shown on parcels page during onboarding) ───── */

.onboarding-banner {
  padding: var(--sp-4) var(--sp-6);
  background: var(--brand-light);
  border-bottom: 1px solid rgba(101, 163, 13, 0.2);
}

.auth-form__success {
  background: var(--success-light);
  color: var(--success);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  margin-bottom: var(--sp-4);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   In-App Form (create-org, join-org inside the dashboard shell)
   ═══════════════════════════════════════════════════════════════════ */

.inapp-form {
  display: flex;
  justify-content: center;
  padding: var(--sp-8) var(--sp-6);
  min-height: calc(100vh - 68px);
}

.inapp-form__card {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--sp-8);
  width: 100%;
  max-width: 560px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  align-self: flex-start;
}

.inapp-form__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--primary);
  margin-bottom: var(--sp-2);
  text-align: center;
}

.inapp-form__subtitle {
  font-size: var(--text-sm);
  color: var(--muted);
  text-align: center;
  margin-bottom: var(--sp-6);
  line-height: var(--lh-sm);
}

/* ═══════════════════════════════════════════════════════════════════
   Welcome / In-App Onboarding Landing
   ═══════════════════════════════════════════════════════════════════ */

.main-content:has(.welcome) { padding-top: 0; }
.welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--surface);
}

.welcome__bg {
  display: none;
}

.welcome__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 620px;
  padding: var(--sp-8);
}

.welcome__hello {
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 400;
  font-style: italic;
  color: var(--brand);
  line-height: 1.2;
  margin-bottom: var(--sp-2);
}

.welcome__headline {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 400;
  color: var(--primary);
  line-height: 1.2;
  margin-bottom: var(--sp-6);
}

.welcome__subtitle {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  color: var(--muted);
  max-width: 440px;
  margin-bottom: var(--sp-8);
}

.welcome__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) var(--sp-8);
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 3px rgba(101, 163, 13, 0.3);
}

.welcome__cta:hover {
  opacity: 0.9;
  box-shadow: 0 2px 8px rgba(101, 163, 13, 0.4);
}

@media (max-width: 640px) {
  .welcome__hello { font-size: 28px; }
  .welcome__headline { font-size: 32px; }
  .welcome__subtitle { font-size: var(--text-base); }
}

/* ═══════════════════════════════════════════════════════════════════
   Relations Page — org-to-org links & permission toggles
   ═══════════════════════════════════════════════════════════════════ */

.relations {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-width: 720px;
  padding: var(--sp-4) var(--sp-16);
}

.relations__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.relations__subtitle {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0;
}

.relations__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ── Relation card ──────────────────────────────────────────────── */

.relation-card {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.relation-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.relation-card__header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.relation-card__icon {
  width: 20px;
  height: 20px;
  color: var(--muted);
  flex-shrink: 0;
}

.relation-card__name-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.relation-card__name {
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0;
}

.relation-card__type {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* ── Permissions section ────────────────────────────────────────── */

.relation-card__perms-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.relation-card__perms-label {
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.relation-card__perms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) var(--sp-6);
}

@media (max-width: 640px) {
  .relation-card__perms {
    grid-template-columns: 1fr;
  }
}

.relation-card__perm {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.relation-card__perm-desc {
  margin: 0;
  padding-left: calc(2.25rem + var(--sp-2));
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--muted);
}

/* ── Actions ────────────────────────────────────────────────────── */

.relation-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}

/* ── Manage link (coop-side only) ───────────────────────────────── */

.relation-card__manage {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--brand);
  text-decoration: none;
}
.relation-card__manage:hover { text-decoration: underline; }

/* ── Toggle switch ──────────────────────────────────────────────── */

.toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  user-select: none;
  padding: var(--sp-1) 0;
}

.toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle__track {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--border);
  border-radius: 9999px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.toggle__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: var(--shadow-xs);
}

.toggle__input:checked + .toggle__track {
  background: var(--brand);
}

.toggle__input:checked + .toggle__track::after {
  transform: translateX(16px);
}

.toggle__input:disabled + .toggle__track {
  opacity: 0.5;
  cursor: not-allowed;
}

.toggle__input:disabled ~ .toggle__label {
  opacity: 0.5;
}

.toggle__label {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--card-fg);
}

/* ── Claim link banner (coop admin) ──────────────────────────────── */

.claim-banner__wrapper {
  padding: var(--sp-4) var(--sp-16);
  border-bottom: 1px solid var(--border);
}

.claim-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.claim-banner__icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 1px;
}

.claim-banner__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
  min-width: 0;
}

.claim-banner__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--card-fg);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.claim-banner__desc {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0;
}

.claim-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.claim-banner__url {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-xs);
  font-family: monospace;
  color: var(--muted);
  background: var(--card-bg);
  min-width: 0;
}

.claim-banner__url-display {
  font-size: var(--text-xs);
  font-family: monospace;
  color: var(--muted);
  word-break: break-all;
}

/* Error variant of the banner (e.g. rejected add-farm submission). */
.claim-banner__wrapper--error {
  border-left: 3px solid var(--danger);
}

.claim-banner__wrapper--error .claim-banner__icon {
  color: var(--danger);
}

/* ── Claim row actions (farmer list) ─────────────────────────────── */

.claim-row__actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.claim-row__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--text-xs);
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s;
}

.claim-row__btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.claim-row__icon {
  width: 14px;
  height: 14px;
}

.claim-row__label {
  font-size: var(--text-xs);
}

/* ── Relation context (farmer detail) ─────────────────────────────── */

.relation-ctx__wrapper {
  padding: var(--sp-6) var(--sp-16);
  border-bottom: 1px solid var(--border);
}

.relation-ctx {
  padding: 0;
}

.relation-ctx__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.relation-ctx__title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

/* View mode: inline read-only values. Three columns at the design
   width so the grid lays out N° adhérent / Libellé / Notes in equal
   thirds regardless of viewport noise (scrollbar appearing on a
   long tab body would otherwise reshape ``auto-fill`` tracks and
   wrap "Grande Plaine" differently on the Déclarations tab vs the
   others). Below 768px the media query at the bottom of this block
   falls back to a single column for narrow screens.              */
.relation-ctx__view-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: var(--sp-4);
}

.relation-ctx__view-grid > div {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.relation-ctx__value {
  font-size: var(--text-sm);
  color: var(--card-fg);
  font-weight: 500;
}

/* Toggle: view visible, form hidden by default */
.relation-ctx__view { display: block; }
.relation-ctx__form { display: none; flex-direction: column; gap: var(--sp-3); }

/* Editing state */
.relation-ctx--editing .relation-ctx__view { display: none; }
.relation-ctx--editing .relation-ctx__form { display: flex; }
.relation-ctx--editing .relation-ctx__header .btn { display: none; }

.relation-ctx__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.relation-ctx__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  margin-bottom: var(--sp-1);
}

.relation-ctx__input {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  background: var(--card-bg);
}

.relation-ctx__textarea {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  background: var(--card-bg);
  resize: vertical;
}

.relation-ctx__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.relation-ctx__saved {
  font-size: var(--text-sm);
  color: var(--brand);
}

.relation-ctx__error {
  font-size: var(--text-sm);
  color: var(--danger);
}

.relation-ctx__status {
  font-size: var(--text-sm);
}

@media (max-width: 768px) {
  .relation-ctx__wrapper { padding: var(--sp-6) var(--sp-4); }
  .relation-ctx__row { grid-template-columns: 1fr; }
  .relation-ctx__view-grid { grid-template-columns: 1fr; }
}

/* ── Claim page (farm admin) ─────────────────────────────────────── */

.claim-page__wrap {
  max-width: 540px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6);
}

.claim-page__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}

.claim-page__section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--card-fg);
  margin: 0 0 var(--sp-2);
}

.claim-page__org-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.claim-page__org-option {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s;
}

.claim-page__org-option:hover {
  border-color: var(--brand);
}

.claim-page__org-option--claim {
  /* same layout, no override needed */
}

.claim-page__radio {
  accent-color: var(--brand);
  margin-top: 2px;
  flex-shrink: 0;
}

.claim-page__org-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.claim-page__org-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--card-fg);
}

.claim-page__org-sub {
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0;
}

.claim-page__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-2);
}

.claim-page__submit {
  min-width: 200px;
}

.claim-page__error {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  background: rgba(220, 38, 38, 0.05);
}

.claim-page__error-icon {
  width: 16px;
  height: 16px;
  color: var(--danger);
  flex-shrink: 0;
}

.claim-page__error-text {
  font-size: var(--text-sm);
  color: var(--danger);
  margin: 0;
}

.claim-page__success-icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-4);
}

.claim-page__success-icon {
  width: 48px;
  height: 48px;
  color: var(--brand);
}

/* ── Invite notice page ─────────────────────────────────────────── */

.invite-notice {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: var(--sp-6);
}

.invite-notice__card {
  text-align: center;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.invite-notice__icon {
  width: 40px;
  height: 40px;
  color: var(--brand);
}

.invite-notice__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--card-fg);
  margin: 0;
}

.invite-notice__body {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0;
}

/* ── Claim review page ──────────────────────────────────────────── */

.claim-review__comparison {
  display: flex;
  align-items: stretch;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
}

.claim-review__card {
  flex: 1;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.claim-review__card--source {
  border-color: var(--danger, #dc2626);
  background: rgba(220, 38, 38, 0.03);
}

.claim-review__card--target {
  border-color: var(--brand);
  background: rgba(101, 163, 13, 0.03);
}

.claim-review__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.claim-review__org-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--card-fg);
  margin: 0;
}

.claim-review__details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.claim-review__detail {
  font-size: var(--text-xs);
  color: var(--muted);
}

.claim-review__action {
  font-size: var(--text-xs);
  font-weight: 500;
  margin: var(--sp-1) 0 0;
}

.claim-review__action--source {
  color: var(--danger, #dc2626);
}

.claim-review__action--target {
  color: var(--brand);
}

.claim-review__arrow-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.claim-review__arrow {
  width: 20px;
  height: 20px;
  color: var(--muted);
}

.claim-review__data {
  margin-bottom: var(--sp-4);
}

.claim-review__section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--card-fg);
  margin: 0 0 var(--sp-2);
}

.claim-review__data-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.claim-review__data-item {
  font-size: var(--text-sm);
  color: var(--muted);
  padding: var(--sp-1) var(--sp-2);
  background: var(--neutral-100, #f5f5f5);
  border-radius: 6px;
}

.claim-review__form {
  margin-top: var(--sp-2);
}

.claim-review__actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

/* ── Advisor multi-selector in farmers table ────────────────────── */

/* ── Advisor cell multi-select (farmers table) ──────────────────── */
.adv-cell { position: relative; }
.adv-cell__trigger {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); cursor: pointer;
  font-size: var(--text-xs); font-weight: 500;
  color: var(--card-fg); white-space: nowrap;
  user-select: none; transition: border-color 0.15s;
}
.adv-cell__trigger:hover { border-color: var(--primary); }
.adv-cell__trigger-text {
  max-width: 120px; overflow: hidden; text-overflow: ellipsis;
}
.adv-cell__chevron {
  width: 12px; height: 12px; flex-shrink: 0;
  color: var(--text-muted); transition: transform 0.2s;
}
.adv-cell--open .adv-cell__chevron { transform: rotate(180deg); }

.adv-cell__panel {
  display: none; flex-direction: column;
  /* `position: fixed` lets the panel escape the table cell's
     `overflow: hidden` and the wrap's `overflow-x: auto`. JS sets
     `top` / `left` from the trigger's bounding rect on open. */
  position: fixed; top: 0; left: 0; z-index: 50;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.adv-cell--open .adv-cell__panel { display: flex; }

.adv-cell__search-wrapper {
  position: relative;
  padding: var(--sp-1) var(--sp-1) 0;
}
.adv-cell__search-icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-30%);
  width: 13px; height: 13px; color: var(--text-muted);
  pointer-events: none;
}
.adv-cell__search {
  width: 100%; box-sizing: border-box;
  padding: 5px 8px 5px 28px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-size: var(--text-xs);
  outline: none; color: var(--card-fg);
}
.adv-cell__search:focus {
  border-color: var(--primary);
}
.adv-cell__search::placeholder { color: var(--text-muted); }

.adv-cell__list {
  display: flex; flex-direction: column;
  max-height: 200px; overflow-y: auto;
  padding: var(--sp-1);
}

.adv-cell__option {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 4px var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); cursor: pointer;
}
.adv-cell__option:hover { background: var(--hover); }
.adv-cell__checkbox {
  width: 15px; height: 15px; flex-shrink: 0;
  accent-color: var(--primary); cursor: pointer;
}
.adv-cell__name { color: var(--card-fg); }

/* ── Guided tour (Driver.js overrides) ──────────────────────────── */

.ekumen-tour.driver-popover {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--background, #fff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  padding: var(--sp-5, 20px);
  max-width: 360px;
}

.ekumen-tour .driver-popover-title {
  font-family: 'Instrument Serif', serif;
  font-size: 1.25rem;
  color: var(--card-fg, #0a0a0a);
  margin-bottom: var(--sp-2, 8px);
}

.ekumen-tour .driver-popover-description {
  font-size: var(--text-sm, 0.875rem);
  color: var(--muted, #737373);
  line-height: 1.5;
}

.ekumen-tour .driver-popover-progress-text {
  font-size: var(--text-xs, 0.75rem);
  color: var(--muted, #737373);
}

.ekumen-tour .driver-popover-navigation-btns {
  gap: var(--sp-2, 8px);
}

.ekumen-tour .driver-popover-next-btn {
  background: var(--primary, #171717);
  color: var(--primary-fg, #fafafa);
  border: none;
  border-radius: var(--radius-sm, 8px);
  padding: var(--sp-2, 8px) var(--sp-4, 16px);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  text-shadow: none;
}

.ekumen-tour .driver-popover-next-btn:hover {
  opacity: 0.9;
}

.ekumen-tour .driver-popover-prev-btn {
  background: none;
  color: var(--muted, #737373);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: var(--radius-sm, 8px);
  padding: var(--sp-2, 8px) var(--sp-4, 16px);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
}

.ekumen-tour .driver-popover-prev-btn:hover {
  background: var(--surface, #f5f5f5);
}

.ekumen-tour .driver-popover-close-btn {
  color: var(--muted, #737373);
}

.ekumen-tour .driver-popover-close-btn:hover {
  color: var(--card-fg, #0a0a0a);
}

.ekumen-tour .driver-popover-arrow-side-left,
.ekumen-tour .driver-popover-arrow-side-right,
.ekumen-tour .driver-popover-arrow-side-top,
.ekumen-tour .driver-popover-arrow-side-bottom {
  border-color: var(--border, #e5e5e5);
}

/* ── Advisor legend (compact rows under bar chart) ──────────────── */

.advisor-legend {
  margin-top: 8px;
  font-size: var(--text-sm);
}

.advisor-legend__row {
  display: flex;
  align-items: center;
  padding: 4px 0;
  gap: 6px;
}

.advisor-legend__row--header {
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
  padding-bottom: 6px;
}

.advisor-legend__stat {
  flex: 0 0 auto;
  text-align: right;
  min-width: 36px;
}

.advisor-legend__sep {
  color: var(--border);
}

.advisor-legend__hdr {
  flex: 0 0 auto;
  min-width: 36px;
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════
   Skeleton loading — shimmer placeholders (YouTube-style)
   ═══════════════════════════════════════════════════════════════════ */

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.sk {
  background: linear-gradient(90deg, var(--surface) 25%, #ececec 50%, var(--surface) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite ease-in-out;
  border-radius: var(--radius-sm);
}

/* ── Skeleton text lines ─────────────────────────────────────────── */

.sk-text       { height: 14px; width: 60%; }
.sk-text--sm   { height: 11px; width: 40%; }
.sk-text--lg   { height: 20px; width: 50%; }
.sk-text--xl   { height: 28px; width: 35%; }
.sk-text--full { width: 100%; }
.sk-text--w80  { width: 80%; }
.sk-text--w60  { width: 60%; }
.sk-text--w40  { width: 40%; }

/* ── Skeleton shapes ─────────────────────────────────────────────── */

.sk-circle     { border-radius: var(--radius-full); }
.sk-icon       { width: 48px; height: 48px; border-radius: var(--radius-full); flex-shrink: 0; }
.sk-chart      { width: 100%; height: 280px; border-radius: var(--radius); }
.sk-card       { width: 100%; border-radius: var(--radius); }

/* ── Skeleton stat card ──────────────────────────────────────────── */

.stat-card--skeleton {
  pointer-events: none;
}

.stat-card--skeleton .stat-card__icon {
  background: var(--surface);
}

.stat-card--skeleton .stat-card__icon-svg {
  visibility: hidden;
}

.stat-card--skeleton .stat-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
}

/* ── Skeleton table ──────────────────────────────────────────────── */

.sk-table-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.sk-table-row:last-child { border-bottom: none; }

.sk-table-cell { flex: 1; }

.sk-table-cell--narrow { flex: 0 0 80px; }

/* ── Skeleton body (mirrors __body padding of real pages) ────────── */

.sk-body {
  padding: var(--sp-4) var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ── Skeleton page header ────────────────────────────────────────── */

.sk-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6) 0 var(--sp-4);
}

/* ── Skeleton section ────────────────────────────────────────────── */

.sk-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
}

/* ── Skeleton advisor row ────────────────────────────────────────── */

.sk-advisor-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}

.sk-advisor-bar {
  flex: 1;
  height: 24px;
  border-radius: var(--radius-sm);
}

/* ── Benchmark page ─────────────────────────────────────────────── */

.bench-trends { display: flex; flex-direction: column; gap: var(--sp-6); }
.bench-trends__summary { margin-top: var(--sp-2); }
.bench-trends__empty {
  display: flex; align-items: center; justify-content: center;
  height: 200px; color: var(--muted); font-size: var(--text-base);
}

/* Benchmark trend filter bar */
.bench-filter-bar { gap: var(--sp-4); }
.bench-filter__field { display: flex; align-items: center; gap: var(--sp-2); }
.bench-filter__label {
  font-size: var(--text-sm); color: var(--muted); white-space: nowrap;
}

.bench-table__mono { font-family: var(--font-mono, monospace); font-size: var(--text-xs); }
.bench-table__empty { text-align: center; color: var(--muted); }

.bench-launch { display: flex; flex-direction: column; gap: var(--sp-6); }
.bench-launch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.bench-launch__card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.bench-launch__title { font-size: var(--text-lg); font-weight: 600; margin: 0; }
.bench-launch__desc { font-size: var(--text-sm); color: var(--muted); margin: 0; }
.bench-launch__result { min-height: 0; }
.bench-launch__banner {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 500;
  animation: bench-fade-in 0.3s ease-out;
}
.bench-launch__banner--success {
  background: var(--success-light); color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
}
.bench-launch__banner--error {
  background: var(--danger-light); color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
}
.bench-launch__banner a {
  color: inherit; text-decoration: underline;
  text-underline-offset: 2px;
}
.bench-launch__banner a:hover { opacity: 0.8; }
@keyframes bench-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.bench-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.bench-form__group { display: flex; flex-direction: column; gap: var(--sp-1); }
.bench-form__label { font-size: var(--text-sm); font-weight: 500; color: var(--card-fg); }
.bench-form__input,
.bench-form__select {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: inherit;
  background: var(--card-bg);
  color: var(--card-fg);
}
.bench-form__input:focus,
.bench-form__select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.bench-arena {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--sp-4); padding: var(--sp-16) 0;
}
.bench-arena__icon { width: 64px; height: 64px; color: var(--muted); }
.bench-arena__title { font-size: var(--text-2xl); font-weight: 600; color: var(--primary); margin: 0; }
.bench-arena__desc { font-size: var(--text-base); color: var(--muted); text-align: center; max-width: 480px; }

.bench-scenario__list {
  display: flex; flex-direction: column; gap: var(--sp-2);
  max-height: 200px; overflow-y: auto;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card-bg);
}
.bench-scenario__label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm); cursor: pointer;
}
.bench-scenario__checkbox { flex-shrink: 0; }
.bench-scenario__id { font-family: var(--font-mono, monospace); font-weight: 500; }
.bench-scenario__desc { color: var(--muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Multi-select dropdown ───────────────────────────────────────── */
.bench-multiselect { position: relative; }
.bench-multiselect__trigger {
  all: unset;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card-bg); cursor: pointer;
  font-size: var(--text-sm); color: var(--card-fg);
  transition: border-color 0.15s;
}
.bench-multiselect__trigger:hover { border-color: var(--primary); }
.bench-multiselect__chevron { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.2s; }
.bench-multiselect--open .bench-multiselect__chevron { transform: rotate(180deg); }
.bench-multiselect__panel { display: none; margin-top: var(--sp-2); }
.bench-multiselect--open .bench-multiselect__panel { display: flex; }

@media (max-width: 768px) {
  .bench-launch__grid { grid-template-columns: 1fr; }
}

/* ── Benchmark round trace ─────────────────────────────────────────── */

.bench-trace { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }

.bench-trace__section {
  display: flex; flex-direction: column; gap: var(--sp-2);
}

.bench-trace__section-title {
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted);
}

.bench-trace__prompt {
  font-size: var(--text-sm); line-height: 1.6;
  padding: var(--sp-3); border-radius: var(--radius-md);
  background: var(--surface); color: var(--card-fg);
  white-space: pre-wrap; word-break: break-word;
}

/* Side-by-side model responses for comparison mode */
.bench-trace__responses {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
}

.bench-trace__response {
  display: flex; flex-direction: column; gap: var(--sp-1);
}

.bench-trace__response-label {
  font-size: var(--text-xs); font-weight: 600; color: var(--muted);
}

.bench-trace__response-body {
  font-size: var(--text-sm); line-height: 1.6;
  padding: var(--sp-3); border-radius: var(--radius-md);
  background: var(--surface); color: var(--card-fg);
  white-space: pre-wrap; word-break: break-word;
  max-height: 320px; overflow-y: auto;
}

/* Conversation turn bubbles */
.bench-trace__turn {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--border);
}

.bench-trace__turn--user  { border-left-color: var(--muted); }
.bench-trace__turn--assistant { border-left-color: var(--brand); }
.bench-trace__turn--tool { border-left-color: #8b5cf6; background: rgba(139,92,246,0.03); }
.bench-trace__turn--tool-error { border-left-color: var(--danger); background: rgba(220,38,38,0.03); }
.bench-trace__turn--warning { border-left-color: #f59e0b; background: rgba(245,158,11,0.03); }
.bench-trace__turn--info { border-left-color: var(--border); }

.bench-trace__turn-role {
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; color: var(--muted);
}

.bench-trace__turn-content {
  font-size: var(--text-sm); line-height: 1.5;
  color: var(--card-fg); white-space: pre-wrap; word-break: break-word;
}

/* Judge verdict / score cards */
.bench-trace__verdicts {
  display: flex; flex-direction: column; gap: var(--sp-2);
}

.bench-trace__verdict {
  padding: var(--sp-3); border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--card-bg);
  display: flex; flex-direction: column; gap: var(--sp-2);
}

.bench-trace__verdict-header {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm);
}

.bench-trace__verdict-judge {
  font-weight: 600; color: var(--card-fg);
  font-family: var(--font-mono, monospace); font-size: var(--text-xs);
}

.bench-trace__verdict-reasoning {
  font-size: var(--text-sm); line-height: 1.5;
  color: var(--muted); white-space: pre-wrap; word-break: break-word;
}

.bench-trace__score-dims {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  font-size: var(--text-xs);
}

.bench-trace__score-dim {
  padding: 2px var(--sp-2); border-radius: var(--radius);
  background: var(--surface); color: var(--card-fg);
}

/* Clickable row hint */
.data-table__tr--expandable { cursor: pointer; }
.data-table__tr--expandable:hover { background: var(--surface); }

/* Expanded trace row */
.data-table__tr--trace td {
  padding: 0; background: var(--card-bg);
  border-top: 1px dashed var(--border);
}

/* ── Page content (generic padded body for simple pages) ────────────── */

.page-content {
  display: flex;
  flex-direction: column;
}
.page-content__body {
  padding: var(--sp-8) var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-width: 700px;
}

/* ── Integration cards ─────────────────────────────────────────────── */

.integration-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
}

.integration-card--disabled {
  opacity: 0.6;
}

.integration-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.integration-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--primary-bg);
  color: var(--primary);
  flex-shrink: 0;
}

.integration-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}

.integration-card__subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: var(--sp-1) 0 0;
}

.integration-card__hint {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: var(--sp-1) 0 0;
}

.integration-card__badge {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.integration-card__badge--on {
  background: var(--success-bg);
  color: var(--success);
}

.integration-card__badge--off {
  background: var(--muted-bg);
  color: var(--text-tertiary);
}

.integration-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--border);
}

.integration-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.integration-card__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.integration-card__value {
  font-size: var(--text-sm);
  font-weight: 500;
}

.integration-card__actions {
  display: flex;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.data-table__tr--trace-hidden { display: none; }

/* ── Edit History (audit changelog) ───────────────────────────────── */

.edit-history { margin-top: var(--sp-4); }

.edit-history__toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--muted);
  cursor: pointer;
  padding: var(--sp-2) 0;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.edit-history__toggle:hover { color: var(--text); }

.edit-history__entries { display: flex; flex-direction: column; gap: var(--sp-3); }

.edit-history__entry {
  font-size: var(--text-xs);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border-radius: var(--radius-sm);
}

.edit-history__meta {
  color: var(--muted);
  margin-bottom: var(--sp-1);
}

.edit-history__change {
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
}

.edit-history__field { font-weight: 500; }
.edit-history__old { text-decoration: line-through; color: var(--danger); }
.edit-history__new { color: var(--success); }

/* ── API Keys page ───────────────────────────────────────────────── */

.api-keys { padding: 0; }

.api-keys__body {
  padding: var(--sp-6) var(--sp-8);
}

.api-keys__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-16) var(--sp-8);
  color: var(--muted);
}

.api-keys__empty-icon {
  width: 40px;
  height: 40px;
  color: var(--muted);
  opacity: 0.5;
}

.api-keys__empty-text {
  font-size: var(--text-sm);
  color: var(--muted);
}

.api-keys__name {
  font-weight: 500;
  color: var(--card-fg);
}

.api-keys__prefix {
  font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  font-size: 12px;
  color: var(--muted);
}

.api-keys__scopes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.api-keys__actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
}

.api-keys__action-btn { flex-shrink: 0; }

.data-table__tr--muted td {
  opacity: 0.5;
}

/* Scope checkboxes in create dialog */
.api-keys__scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

.api-keys__scope-check {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--card-fg);
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}

.api-keys__scope-check:hover {
  background: var(--surface);
}

.api-keys__scope-check:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-light);
}

.api-keys__scope-input {
  accent-color: var(--brand);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.api-keys__scope-label {
  font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  font-size: 11px;
  line-height: 1;
}

/* Key result fragment (shown after create/rotate) */
.api-keys__key-result {
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.api-keys__warning {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--warning-light);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  border-radius: var(--radius-sm);
}

.api-keys__warning-icon {
  width: 16px;
  height: 16px;
  color: var(--warning);
  flex-shrink: 0;
}

.api-keys__warning-text {
  font-size: var(--text-sm);
  color: var(--card-fg);
  line-height: var(--lh-sm);
}

/* ── Container queries — adapt to actual content width (e.g. chat open) ── */

@container main (max-width: 900px) {
  .farmer-sales__kpi-row { grid-template-columns: 1fr; }
  .farmer-sales__kpi-row > .product-card { max-width: none; }
  .sales__two-col { grid-template-columns: 1fr; }
  .landing__bottom-row { grid-template-columns: 1fr; }
  .timeline-chart__body { flex-direction: column; }
  .timeline-chart__summary { width: 100%; border-left: none; border-top: 1px solid var(--border); }
}

@container main (max-width: 700px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Catalog page ────────────────────────────────────────────────── */

.catalogs-page { padding: 0; }

.catalogs__body {
  padding: var(--sp-4) var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.catalogs__tab-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.catalogs__section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Underline-style tabs scoped to the catalogs page — overrides the
   global boxed segmented control which felt too heavy at the top of
   the page. */
.catalogs-page .tab-switcher {
  display: flex;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  gap: var(--sp-2);
  background: transparent;
  overflow: visible;
}

.catalogs-page .tab-switcher__tab {
  padding: var(--sp-2) var(--sp-1);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--muted);
  font-weight: 500;
}

.catalogs-page .tab-switcher__tab:not(:last-child) {
  border-right: none;
}

.catalogs-page .tab-switcher__tab:hover {
  background: transparent;
  color: var(--card-fg);
}

.catalogs-page .tab-switcher__tab--active {
  background: transparent;
  color: var(--card-fg);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

/* Compact KPI cards scoped to the catalogs page — the default
   stat-card has too much vertical padding for a 3-card row. */
.catalogs-page .kpi-grid { gap: var(--sp-3); }

.catalogs-page .kpi-grid .stat-card {
  padding: var(--sp-3) var(--sp-4);
  gap: var(--sp-2);
}

.catalogs-page .kpi-grid .stat-card__icon {
  width: 28px;
  height: 28px;
}

.catalogs-page .kpi-grid .stat-card__icon-svg {
  width: 15px;
  height: 15px;
}

.catalogs-page .kpi-grid .stat-card__title {
  min-height: 0;
  font-size: var(--text-xs);
}

.catalogs-page .kpi-grid .stat-card__value {
  font-size: var(--text-xl);
}

@container (max-width: 768px) {
  .catalogs__body {
    padding: var(--sp-4) var(--sp-4);
  }
}

/* ================================================================
   MOBILE WEB APP (/m/)
   ================================================================ */

/* ── Shell layout ───────────────────────────────────────────────── */
.m-shell {
  position: relative;
  height: 100dvh;
  height: 100vh;
  background: var(--surface) url("/m/topo-map.svg") center / cover no-repeat;
  color: var(--fg, #eee);
  font-family: 'DM Sans', system-ui, sans-serif;
  overflow: hidden;
}

/* The shift wrapper holds the topbar + content. It translates right
   when the drawer opens so the chat is physically pushed (Claude iOS). */
.m-shift {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  transform: translateX(0);
  transition: transform .26s cubic-bezier(.32,.72,.22,1);
  will-change: transform;
  background: transparent;
  position: relative;
  z-index: 2;
}

.m-shift--pushed {
  transform: translateX(min(82vw, 320px));
}

.m-drawer-locked {
  overflow: hidden;
}

/* Light card-style topbar (used for both chat and nav pages),
   mirroring the dashboard `.chat-toolbar`. */
.m-topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-2) auto 0;
  margin-top: calc(env(safe-area-inset-top, 0px) + var(--sp-2));
  max-width: 720px;
  width: calc(100% - 16px);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  z-index: 10;
}

.m-topbar__menu-btn,
.m-topbar__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s, background .15s;
}

.m-topbar__menu-btn:hover,
.m-topbar__action:hover {
  color: var(--primary);
}

.m-topbar__menu-btn:active,
.m-topbar__action:active {
  background: rgba(0,0,0,.04);
}

.m-topbar__menu-btn svg,
.m-topbar__action svg {
  width: 18px;
  height: 18px;
}

.m-topbar__logo-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-topbar__logo {
  height: 22px;
  width: auto;
}

.m-topbar__logo svg {
  height: 22px;
  width: auto;
}

.m-topbar__spacer {
  width: 32px;
  height: 32px;
}

/* Push the actions cluster to the far right of the card. */
.m-topbar .chat-toolbar__actions {
  margin-left: auto;
}

.m-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

/* ── Slide-out drawer (light theme to match chat panel) ─────────── */
.m-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(82vw, 320px);
  max-width: 320px;
  background: var(--background);
  color: var(--card-fg);
  display: flex;
  flex-direction: column;
  /* Above the overlay (z-index 3) so drawer items remain clickable. */
  z-index: 4;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateX(-100%);
  transition: transform .26s cubic-bezier(.32,.72,.22,1);
  will-change: transform;
  overflow: hidden;
  border-right: 1px solid var(--border);
}

.m-drawer--open {
  transform: translateX(0);
}

.m-drawer-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  pointer-events: none;
  z-index: 3;
}

.m-drawer-overlay--visible {
  pointer-events: auto;
}

.m-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.m-drawer__profile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
  padding: 4px 6px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.m-drawer__profile:hover { background: rgba(0,0,0,.04); }
.m-drawer__profile:active { background: rgba(0,0,0,.06); }

.m-drawer__profile-chevron {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform .18s ease;
}

.m-drawer__profile--open .m-drawer__profile-chevron {
  transform: rotate(180deg);
}

/* Expandable switcher panel below the drawer header. */
.m-drawer__profile-switch {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.m-drawer__profile-switch--open { display: flex; }

.m-drawer__profiles-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.m-drawer__profiles-list form { margin: 0; }

.m-drawer__profile-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  color: var(--card-fg);
  -webkit-tap-highlight-color: transparent;
}

.m-drawer__profile-item:active { background: rgba(0,0,0,.04); }

.m-drawer__profile-item--active {
  border-color: var(--primary);
  background: var(--background);
}

.m-drawer__profile-item-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-drawer__profile-item-role {
  font-size: 11px;
  color: var(--muted);
  text-transform: capitalize;
}

.m-drawer__profile-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-top: 4px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.m-drawer__profile-action:hover { background: rgba(0,0,0,.04); }
.m-drawer__profile-action svg { width: 16px; height: 16px; }

.m-drawer__avatar {
  flex-shrink: 0;
}

.m-drawer__id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.m-drawer__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--card-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-drawer__org {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}

.m-drawer__close:hover { color: var(--primary); }
.m-drawer__close:active { background: rgba(0,0,0,.04); }

.m-drawer__close svg {
  width: 18px;
  height: 18px;
}

.m-drawer__new-chat {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 12px 6px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--card-fg);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.m-drawer__new-chat:active {
  background: rgba(0,0,0,.04);
}

.m-drawer__new-chat svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.m-drawer__search {
  position: relative;
  margin: 6px 12px 8px;
  flex-shrink: 0;
}

.m-drawer__search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
}

.m-drawer__search-input {
  width: 100%;
  padding: 8px 10px 8px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--card-fg);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.m-drawer__search-input:focus {
  border-color: var(--primary);
}

.m-drawer__sessions-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.m-drawer__sessions {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 8px 8px;
}

.m-drawer__section-label {
  display: block;
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

.m-drawer__group-header {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  padding: 10px 8px 4px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.m-drawer__session-item {
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--card-fg);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
}

.m-drawer__session-item:active {
  background: rgba(0,0,0,.04);
}

.m-drawer__empty {
  padding: 16px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.m-drawer__nav {
  flex-shrink: 0;
  padding: 6px 8px 4px;
  border-top: 1px solid var(--border);
}

.m-drawer__nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  color: var(--card-fg);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.m-drawer__nav-item:active {
  background: rgba(0,0,0,.04);
}

.m-drawer__nav-item--active {
  background: rgba(0,0,0,.06);
  color: var(--primary);
}

.m-drawer__nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--muted);
}

.m-drawer__nav-item--active svg { color: var(--primary); }

.m-drawer__signout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: #ef4444;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.m-drawer__signout svg {
  width: 16px;
  height: 16px;
}

.m-drawer__signout:active {
  background: rgba(239,68,68,.08);
}

/* ── Floating hold-to-talk mic ─────────────────────────────────── */
.m-hold-mic-wrap {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 140px);
  transform: translateX(-50%);
  /* Sit above chat-panel internals (max z-index in chat is 30 for the
     skills slide-over); above drawer too so it gets hidden via class
     toggle rather than stacking order. */
  z-index: 40;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.m-hold-mic-wrap--hidden {
  opacity: 0;
  transform: translateX(-50%) scale(.85);
  pointer-events: none;
}

/* Hide the mic while the drawer is open — it's a fixed overlay element
   that wouldn't otherwise be pushed off-screen by .m-shift's translate. */
.m-drawer-locked .m-hold-mic-wrap {
  opacity: 0;
  transform: translateX(-50%) scale(.85);
  pointer-events: none;
}

.m-hold-mic-btn {
  pointer-events: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: background .12s ease, transform .12s ease;
}

.m-hold-mic-btn:active {
  transform: scale(1.06);
}

.m-hold-mic-btn--recording {
  background: #ef4444;
  animation: m-hold-mic-pulse 1.4s ease-out infinite;
}

/* Processing: shown after release while we wait for the transcript to
   come back. Replaces the mic icon with a spinning ring so the user has
   immediate visual feedback. */
.m-hold-mic-btn--processing {
  background: var(--muted);
  pointer-events: none;
  animation: none;
}

.m-hold-mic-btn--processing svg {
  display: none;
}

.m-hold-mic-btn--processing::after {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: m-hold-mic-spin .7s linear infinite;
}

.m-hold-mic-btn svg {
  width: 26px;
  height: 26px;
}

@keyframes m-hold-mic-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(239,68,68,.45), 0 8px 24px rgba(0,0,0,.2); }
  100% { box-shadow: 0 0 0 16px rgba(239,68,68,0),  0 8px 24px rgba(0,0,0,.2); }
}

@keyframes m-hold-mic-spin {
  to { transform: rotate(360deg); }
}

/* Hide the inline composer mic on mobile — the floating
   ``#m-hold-mic-btn`` is the only mic affordance there. We keep the
   ``<voice-input>`` host in the DOM (``m-hold-mic.js`` calls into the
   host element to dispatch synthetic clicks, which works even when
   hidden). */
.m-chat voice-input { display: none !important; }

/* ── Mobile chat (full-screen, embedded in content) ─────────────── */
.m-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ID selector to beat the ≤1280px dashboard rule
   (`#chat-panel { position: fixed; transform: translateX(100%); }`),
   which would otherwise slide the panel off the right edge. */
.m-chat #chat-panel {
  position: static;
  width: 100%;
  max-width: none;
  height: 100%;
  transform: none;
  border: none;
  background: transparent;
}

.m-chat #chat-panel .chat-conversation {
  height: 100%;
}

/* Drop the in-chat toolbar on mobile — the topbar + drawer cover its
   actions (new chat, history, skills). Mute stays accessible later if
   needed; for now the simplest path is to hide the whole toolbar. */
.m-chat .chat-toolbar {
  display: none;
}

/* ── Mobile list pages (farmers, parcels) ──────────────────────── */
.m-list {
  padding: 12px 12px 24px;
  max-width: 720px;
  margin: 0 auto;
  color: var(--card-fg);
}

.m-list__header {
  padding: 4px 4px 12px;
}

.m-list__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--card-fg);
}

.m-list__search {
  position: relative;
  margin: 0 0 12px;
}

.m-list__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}

.m-list__search-input {
  width: 100%;
  padding: 12px 14px 12px 38px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--card-fg);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.m-list__search-input:focus {
  border-color: var(--primary);
}

.m-list__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.m-list__empty {
  padding: 24px 12px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

.m-card {
  display: block;
  padding: 12px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--card-fg);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.m-card:active {
  background: var(--surface);
}

.m-card__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.m-card__avatar {
  flex-shrink: 0;
}

.m-card__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--surface);
  border-radius: 10px;
  color: var(--muted);
}

.m-card__icon svg {
  width: 18px;
  height: 18px;
}

.m-card__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.m-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--card-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-card__sub {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-card__meta {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-card__chevron {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
}

/* ── Mobile settings ────────────────────────────────────────────── */
.m-settings {
  padding: 24px 16px;
  max-width: 600px;
  margin: 0 auto;
  color: var(--card-fg);
}

.m-settings__section {
  margin-bottom: 24px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.m-settings__title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px;
  letter-spacing: -.01em;
  color: var(--card-fg);
}

.m-settings__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 6px;
}

.m-settings__input {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--card-fg);
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 12px;
  outline: none;
  transition: border-color .15s;
}

.m-settings__input:focus {
  border-color: var(--primary);
}

.m-settings__input[readonly] {
  background: var(--surface);
  color: var(--card-fg);
  cursor: default;
}

.m-settings__save {
  width: 100%;
  padding: 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-top: 8px;
}

.m-settings__save:active {
  opacity: .85;
}

.m-settings__logout {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--background);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  margin-top: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.m-settings__logout:active {
  background: rgba(239,68,68,.06);
}

.m-settings__info {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}

.m-settings__success {
  padding: 10px 12px;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: 8px;
  color: #16a34a;
  font-size: 13px;
  margin-bottom: 16px;
}

.m-settings__error {
  padding: 10px 12px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.25);
  border-radius: 8px;
  color: #dc2626;
  font-size: 13px;
  margin-bottom: 16px;
}

.m-settings__textarea {
  resize: vertical;
  min-height: 88px;
  font-family: inherit;
  line-height: 1.4;
}

.m-settings__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.m-settings__link svg { width: 16px; height: 16px; }
.m-settings__link:active { background: rgba(0,0,0,.04); }

/* ── Profile switcher (rows of clickable profile cards) ─────────── */
.m-settings__section--switcher form { margin: 0; }

.m-profile-switch {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  color: var(--card-fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.m-profile-switch:last-child { margin-bottom: 0; }
.m-profile-switch:active { background: rgba(0,0,0,.04); }

.m-profile-switch--active {
  border-color: var(--primary);
  background: var(--background);
}

.m-profile-switch__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.m-profile-switch__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.m-profile-switch__name {
  font-weight: 600;
  color: var(--card-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-profile-switch__role {
  font-size: 12px;
  color: var(--muted);
}

.m-profile-switch__check {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
}

.m-profile-switch__spacer { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Generic back link (used on farmer detail and other sub-pages). */
.m-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-radius: 8px;
  align-self: flex-start;
  -webkit-tap-highlight-color: transparent;
}

.m-back-link:hover { color: var(--primary); }
.m-back-link:active { background: rgba(0,0,0,.04); }
.m-back-link svg { width: 18px; height: 18px; }

/* ── Farmer detail (mobile) ─────────────────────────────────────── */
.m-farmer {
  padding: 12px;
  max-width: 720px;
  margin: 0 auto;
  color: var(--card-fg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.m-farmer__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  min-width: 0;
}

.m-farmer__header > :last-child {
  min-width: 0;
  flex: 1;
}

.m-farmer__name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--card-fg);
  word-break: break-word;
  line-height: 1.25;
}

.m-farmer__sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-farmer__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.m-farmer__stat {
  padding: 12px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  min-width: 0;
  overflow: hidden;
}

.m-farmer__stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-farmer__stat-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--card-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-farmer__section {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.m-farmer__section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0 0 10px;
}

.m-farmer__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}

.m-farmer__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.m-farmer__row:first-of-type { padding-top: 0; }

.m-farmer__row-label {
  color: var(--muted);
  flex-shrink: 0;
  max-width: 40%;
}

.m-farmer__row-value {
  color: var(--card-fg);
  font-weight: 500;
  text-align: right;
  word-break: break-word;
  min-width: 0;
}

.m-farmer__section--map {
  padding-bottom: 0;
  overflow: hidden;
}

.m-farmer__map {
  margin: 4px -16px -16px;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}

.m-farmer__map .parcel-map-container {
  width: 100%;
  border-radius: 0;
}

/* ── Install button on login ────────────────────────────────────── */
.m-install-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: transparent;
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'DM Sans', system-ui, sans-serif;
  cursor: pointer;
  margin-top: 12px;
  transition: background .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}

.m-install-btn:active {
  background: rgba(255,255,255,.05);
}

.m-install-btn i,
.m-install-btn svg {
  width: 18px;
  height: 18px;
}

/* ── iOS install tutorial modal ─────────────────────────────────── */
.m-install-modal__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 10000;
  align-items: flex-end;
  justify-content: center;
}

.m-install-modal__overlay--open {
  display: flex;
}

.m-install-modal {
  width: 100%;
  max-width: 400px;
  background: #1a1a1a;
  border-radius: 20px 20px 0 0;
  padding: 28px 24px;
  padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 16px);
  color: #fff;
  font-family: 'DM Sans', system-ui, sans-serif;
  animation: m-modal-slide-up .3s cubic-bezier(.4,0,.2,1);
}

@keyframes m-modal-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.m-install-modal__title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  letter-spacing: -.01em;
}

.m-install-modal__step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.5;
}

.m-install-modal__step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.m-install-modal__step-text {
  padding-top: 3px;
  color: rgba(255,255,255,.85);
}

.m-install-modal__step-text svg {
  vertical-align: -3px;
  margin: 0 2px;
}

.m-install-modal__close {
  display: block;
  width: 100%;
  padding: 14px;
  background: #fff;
  color: #171717;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-top: 8px;
}

.m-install-modal__close:active {
  opacity: .85;
}

/* ── Generic dropdown menu (used by the farmer-declarations grid
   "+" trigger, et al.) ──────────────────────────────────────────── */
.dropdown-menu {
  position: absolute;
  top: calc(100% + var(--sp-1));
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
  display: none;
  flex-direction: column;
  padding: var(--sp-1);
  z-index: 20;
}

.dropdown-menu--open {
  display: flex;
}

.dropdown-menu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  background: transparent;
  color: var(--secondary-fg);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm, 6px);
}

.dropdown-menu__item:hover {
  background: var(--background);
  color: var(--fg);
}

.dropdown-menu__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.dropdown-menu__label {
  flex: 1;
}

/* The "+" create-menu trigger sits next to the filter button on the
   declarations grid search bar; same visual size as the filter. */
.search-input__create {
  position: relative;
}

/* Target banner inside the activity-create panel — shown when the
   advisor is creating on behalf of a specific farm. */
.detail-panel__target-banner {
  background: var(--warning-light);
  color: var(--secondary-fg);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
  font-size: var(--text-sm);
}

/* ── Permission strip (farmer detail page) ───────────────────────── */
.permission-strip {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  /* The strip sits in #farmer-tab-wrapper, which has no padding of
     its own — without the side margin the banner would stretch
     edge-to-edge and the rounded corners would visually clip against
     the viewport.  Match the .farmer__body side padding (--sp-16) so
     the strip lines up with the page content below. */
  margin: var(--sp-4) var(--sp-16);
}

.permission-strip__title {
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.permission-strip__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.permission-strip__group-label {
  font-size: var(--text-sm);
  color: var(--secondary-fg);
  font-weight: 500;
  margin-right: var(--sp-2);
}

.permission-strip__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--background);
  color: var(--secondary-fg);
  font-size: var(--text-xs);
  border: 1px solid var(--border);
  font-family: inherit;
  line-height: 1.2;
}

.permission-strip__chip--granted {
  background: var(--success-light);
  color: var(--success);
  border-color: var(--success-light);
}

.permission-strip__chip--off {
  cursor: pointer;
  background: transparent;
  color: var(--muted);
}

.permission-strip__chip--off:hover {
  background: var(--surface);
  color: var(--secondary-fg);
}

.permission-strip__chip--pending {
  background: var(--warning-light);
  color: var(--warning);
  border-color: var(--warning-light);
}

.permission-strip__chip-form {
  display: inline-flex;
  margin: 0;
}

.permission-strip__banner {
  font-size: var(--text-sm);
  color: var(--secondary-fg);
  margin: 0;
}

.permission-strip--pending-relation {
  border-color: var(--warning-light);
  background: var(--warning-light);
}

/* Responsive side margin — track the .farmer__body horizontal padding
   so the strip always lines up with the page content below it.       */
@media (max-width: 1024px) {
  .permission-strip {
    margin: var(--sp-4) var(--sp-8);
  }
}

@media (max-width: 768px) {
  .permission-strip {
    margin: var(--sp-4);
  }
}
/* ==========================================================================
   Agent-Eval dashboard (admin) — tab shell, filters, three-level strip,
   sections, cost panels, sessions detail + turn-grouped trace waterfall.
   Class vocabulary: ae-* (layout/sections) and agent-eval-* (sessions/wf).
   ========================================================================== */

/* --- Shell + tab nav ---------------------------------------------------- */
/* padding-top clears the fixed .topbar so the tab pills are not flush against it. */
.ae-shell { display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--sp-6); }
.ae-body { display: flex; flex-direction: column; gap: var(--sp-6); }
/* Underline tab bar: section nav reads as tabs (green active accent, mirroring
   the sidebar) and is clearly distinct from the filled filter control below. */
.ae-tabs {
  display: flex; gap: var(--sp-6); padding: 0 var(--sp-6);
  border-bottom: 1px solid var(--border);
}
.ae-tab {
  font-size: var(--text-sm); font-weight: 500; line-height: var(--lh-sm);
  padding: var(--sp-2) 2px var(--sp-3); margin-bottom: -1px;
  color: var(--muted); background: none; border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ae-tab:hover { color: var(--secondary-fg); border-bottom-color: var(--border); }
.ae-tab--active, .ae-tab--active:hover {
  color: var(--brand); font-weight: 600; border-bottom-color: var(--brand);
}
.ae-tab--disabled, .ae-tab--disabled:hover {
  color: var(--muted-light); cursor: default; border-bottom-color: transparent;
}
.ae-overview, .ae-skills { display: flex; flex-direction: column; gap: var(--sp-6); padding: 0 var(--sp-6) var(--sp-8); }

/* --- Global filter bar (extends .audit-filter-bar) ----------------------- */
.ae-filter-bar { display: flex; gap: var(--sp-6); align-items: flex-end; flex-wrap: wrap; }
.ae-filter__field { display: flex; flex-direction: column; gap: var(--sp-1); }
.ae-filter__label { font-size: var(--text-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ae-filter-group { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.ae-filter-btn {
  font-size: var(--text-2xs); padding: 6px 12px; cursor: pointer;
  background: var(--background); color: var(--secondary-fg); user-select: none;
}
.ae-filter-btn + .ae-filter-btn { border-left: 1px solid var(--border); }
.ae-filter-btn--active { background: var(--primary); color: var(--primary-fg); }

/* --- Sections + cost panels ----------------------------------------------- */
.ae-section { display: flex; flex-direction: column; gap: var(--sp-4); }
.ae-cost-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
.ae-cost-panel { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.ae-cost-panel--trend { grid-column: 1 / -1; }
.ae-empty {
  font-size: var(--text-2xs); color: var(--muted); text-align: center;
  padding: var(--sp-8) var(--sp-4); margin: 0;
}

/* --- Sessions finder / detail --------------------------------------------- */
.ae-errors-toggle-bar { display: flex; align-items: center; gap: var(--sp-2); }
.agent-eval-sessions__body { display: flex; flex-direction: column; gap: var(--sp-6); padding: 0 var(--sp-6) var(--sp-8); }
.agent-eval-sessions__detail { display: flex; flex-direction: column; gap: var(--sp-6); padding: 0 var(--sp-6) var(--sp-8); }
.agent-eval-sessions__header { display: flex; flex-direction: column; gap: var(--sp-1); }
.agent-eval-sessions__meta {
  display: flex; gap: var(--sp-3); align-items: baseline; flex-wrap: wrap;
  font-size: var(--text-2xs); color: var(--muted);
}
.agent-eval-sessions__meta-wf { font-weight: 600; color: var(--secondary-fg); }
.agent-eval-sessions__meta-time { font-variant-numeric: tabular-nums; }
.agent-eval-sessions__legacy { font-size: var(--text-2xs); color: var(--muted); }
.agent-eval-sessions__legacy-link { color: var(--brand); text-decoration: none; }
.agent-eval-sessions__legacy-link:hover { text-decoration: underline; }
.agent-eval-sessions__notfound {
  font-size: var(--text-sm); color: var(--muted); text-align: center;
  padding: var(--sp-8); border: 1px dashed var(--border); border-radius: var(--radius);
}
.agent-eval-sessions__notfound-id {
  font-size: var(--text-xs); background: var(--surface); padding: 1px 5px; border-radius: 4px;
}

/* --- Trace waterfall -------------------------------------------------------
   Bars/points carry inline left/width percentages of the turn-local window and
   rely on position:relative so each span stays on its own row (no top math). */
.agent-eval-wf { display: flex; flex-direction: column; gap: var(--sp-6); }
.agent-eval-wf__turn {
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--background); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp-4) var(--sp-6);
}
.agent-eval-wf__track { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-2) 0; }
/* The wrapper is a full-track-width lane and the positioning context for the
   expanded kv panel; the coloured bar (summary) carries the left/width offset. */
.agent-eval-wf__bar, .agent-eval-wf__point { position: relative; width: 100%; }
.agent-eval-wf__bar > details > summary,
.agent-eval-wf__point > details > summary {
  position: relative; /* honours the inline left/width that positions the bar */
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-1);
  white-space: nowrap; overflow: hidden;
}
.agent-eval-wf__bar > details > summary::-webkit-details-marker,
.agent-eval-wf__point > details > summary::-webkit-details-marker { display: none; }
.agent-eval-wf__bar > details > summary {
  height: 22px; border-radius: var(--radius-sm); padding: 0 var(--sp-1-5);
  color: #ffffff; font-size: 10px; font-weight: 600;
}
.agent-eval-wf__point > details > summary {
  height: 22px; padding-left: 16px; color: var(--muted); font-size: 10px; font-weight: 600;
}
.agent-eval-wf__point > details > summary::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px;
  border-radius: var(--radius-full); background: var(--muted);
}
/* Kind colors — bar background / point dot. */
.agent-eval-wf__bar--llm > details > summary { background: #2563eb; }
.agent-eval-wf__bar--tool > details > summary { background: var(--brand); }
.agent-eval-wf__bar--retry > details > summary { background: #8b5cf6; }
.agent-eval-wf__bar--error > details > summary { background: var(--danger); }
.agent-eval-wf__bar--subagent > details > summary { background: #6366f1; }
.agent-eval-wf__bar--leaf > details > summary { background: var(--muted); }
.agent-eval-wf__point--llm > details > summary::before { background: #2563eb; }
.agent-eval-wf__point--tool > details > summary::before { background: var(--brand); }
.agent-eval-wf__point--retry > details > summary::before { background: #8b5cf6; }
.agent-eval-wf__point--error > details > summary::before { background: var(--danger); }
.agent-eval-wf__point--subagent > details > summary::before { background: #6366f1; }
.agent-eval-wf__point--leaf > details > summary::before { background: var(--muted); }
.agent-eval-wf__summary-head { overflow: hidden; text-overflow: ellipsis; }
.agent-eval-wf__summary-dur { font-weight: 400; opacity: 0.85; }
/* Expanded kv panel escapes the bar's width and spans the full track. */
.agent-eval-wf__bar > details[open], .agent-eval-wf__point > details[open] { z-index: 5; }
.agent-eval-wf__kv-grid {
  position: absolute; left: 0; right: 0; margin-top: var(--sp-1); z-index: 6;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-1) var(--sp-4);
  background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); padding: var(--sp-3) var(--sp-4);
}
.agent-eval-wf__bar > details[open] > summary, .agent-eval-wf__point > details[open] > summary { margin-bottom: 0; }
.agent-eval-wf__bar:has(details[open]), .agent-eval-wf__point:has(details[open]) { margin-bottom: 140px; }
.agent-eval-wf__kv { display: contents; }
.agent-eval-wf__kv-k { font-size: var(--text-xs); color: var(--muted); }
.agent-eval-wf__kv-v {
  font-size: var(--text-xs); color: var(--secondary-fg);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.agent-eval-wf__row--error > .agent-eval-wf__kv-grid { border-color: var(--danger-light); }
.agent-eval-wf__row--llm > .agent-eval-wf__kv-grid { border-color: rgba(37, 99, 235, 0.25); }
.agent-eval-wf__row--tool > .agent-eval-wf__kv-grid { border-color: var(--brand-light); }
.agent-eval-wf__row--retry > .agent-eval-wf__kv-grid { border-color: rgba(139, 92, 246, 0.25); }
.agent-eval-wf__row--subagent > .agent-eval-wf__kv-grid { border-color: rgba(99, 102, 241, 0.25); }
.agent-eval-wf__row--leaf > .agent-eval-wf__kv-grid { border-color: var(--border); }
.agent-eval-wf__empty { font-size: var(--text-2xs); color: var(--muted); text-align: center; padding: var(--sp-8) 0; }

/* --- 2-column session view: waterfall (left, layout anchor) + chat (right) - */
.agent-eval-io { display: flex; flex-direction: column; gap: var(--sp-4); }
.agent-eval-io--empty { padding: var(--sp-8) 0; }
/* Each turn is one row. The waterfall cell sets the height; the content pane is
   clamped to it — its scroll child is absolutely positioned, so it has no
   intrinsic height and never grows the row past the waterfall. */
.agent-eval-io__turn { position: relative; }
.agent-eval-io__wf { width: 44%; }  /* the waterfall — in flow, sets the turn height */
.agent-eval-io__pane {
  position: absolute; top: 0; bottom: 0; left: 47%; right: 0;  /* pinned → inherits height */
  overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-3); padding-right: var(--sp-1);
}
/* chat-style messages */
.agent-eval-io__msg { display: flex; flex-direction: column; gap: 3px; }
.agent-eval-io__who { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.agent-eval-io__msg--user .agent-eval-io__who { color: var(--brand); }
.agent-eval-io__msg--assistant .agent-eval-io__who { color: #2563eb; }
.agent-eval-io__text {
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-2xs);
  color: var(--secondary-fg); line-height: var(--lh-sm); margin: 0;
}
.agent-eval-io__msg--user .agent-eval-io__text {
  background: var(--brand-light); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3);
}
/* tool-call line */
.agent-eval-io__tool { font-size: var(--text-2xs); }
.agent-eval-io__tool-head { display: flex; align-items: baseline; gap: var(--sp-1); }
.agent-eval-io__tool-name { font-weight: 600; color: var(--brand); white-space: nowrap; }
.agent-eval-io__tool-name::before { content: "\01F527  "; }
.agent-eval-io__tool--error .agent-eval-io__tool-name { color: var(--danger); }
.agent-eval-io__tool-sum { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-eval-io__tool-dur { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.agent-eval-io__details { margin-top: 3px; }
.agent-eval-io__details-sum { cursor: pointer; font-size: var(--text-xs); color: var(--muted); }
.agent-eval-io__raw { margin-top: var(--sp-1); }
.agent-eval-io__raw-label { font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
.agent-eval-io__raw-text {
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-xs);
  color: var(--secondary-fg); background: var(--surface); border-radius: var(--radius-sm);
  padding: var(--sp-2); margin: 2px 0 0; max-height: 200px; overflow: auto;
}
/* one-line bookkeeping note */
.agent-eval-io__note { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--text-xs); color: var(--muted); }
.agent-eval-io__note-label::before { content: "· "; }
.agent-eval-io__note-dur { margin-left: auto; font-variant-numeric: tabular-nums; }
.agent-eval-io__empty { font-size: var(--text-xs); color: var(--muted); font-style: italic; }

@media (max-width: 900px) {
  .ae-cost-row { grid-template-columns: 1fr; }
  /* stack on mobile and drop the height clamp so content flows normally */
  .agent-eval-io__wf { width: 100%; }
  .agent-eval-io__pane {
    position: static; left: auto; right: auto; max-height: 380px; margin-top: var(--sp-3);
  }
}


/* ── Document-extraction review drawer ───────────────────────────────── */
/* The #record-drawer slot is a right-side, non-modal slide-over: off-screen
   until htmx loads a .record-drawer__panel into it (:has), then it slides in
   ABOVE the z-index:9999 PWA install banner. Non-modal (no backdrop) so the
   reviewer keeps the records list visible while editing. */
.record-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 100vw);
  z-index: 10000;
  background: var(--background);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.22s ease;
}
.record-drawer:has(.record-drawer__panel) { transform: translateX(0); }

.record-drawer__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
}
.record-drawer__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.record-drawer__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--lh-lg);
  margin: 0;
}
.record-drawer__close {
  margin-left: auto;
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.record-drawer__close:hover { background: var(--surface); color: var(--card-fg); }
.record-drawer__preview {
  align-self: flex-start;
  font-size: var(--text-sm);
  color: var(--brand);
  text-decoration: none;
}
.record-drawer__preview:hover { text-decoration: underline; }

.record-drawer__form { display: flex; flex-direction: column; gap: var(--sp-3); }

.record-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.record-field__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
}
.record-field__input {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  background: var(--background);
  color: var(--card-fg);
  font: inherit;
  font-size: var(--text-sm);
}
.record-field__input[type="checkbox"] { width: auto; }
.record-field__input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}
.record-field__input:disabled { background: var(--surface); color: var(--muted); }
/* confidence highlight — coloured left edge on lower-confidence fields */
.record-field__input--low { border-left: 3px solid var(--danger); }
.record-field__input--mid { border-left: 3px solid var(--warning); }
.record-field__input--high { border-left: 3px solid var(--success); }

/* resolve picker (entity-reference fields) */
.record-field__resolve { display: flex; flex-direction: column; gap: var(--sp-2); }
/* Chosen value on the left, clear (×) button on the right. */
.record-field__resolve-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.record-field__resolve-current { font-size: var(--text-sm); color: var(--card-fg); }
.resolve-picker__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}
.resolve-picker__clear:hover { background: var(--surface); color: var(--danger); }
.resolve-picker__search {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  background: var(--background);
  font: inherit;
  font-size: var(--text-sm);
}
.resolve-picker__options { display: flex; flex-direction: column; gap: var(--sp-1); }
.resolve-option {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
  cursor: pointer;
}
.resolve-option:hover { background: var(--surface); border-color: var(--brand); }
.resolve-option__label { font-size: var(--text-sm); color: var(--card-fg); }
.resolve-option__id {
  font-size: var(--text-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.resolve-option__empty { font-size: var(--text-sm); color: var(--muted); padding: var(--sp-1) 0; }
/* "New parcel" toggle — a clear, full-width affordance (icon + label) so it reads
   as an action that creates something, not a faint link next to the candidates. */
.resolve-picker__create-toggle {
  width: 100%;
  justify-content: center;
  gap: var(--sp-2);
}
.resolve-picker__create-toggle svg { width: 1rem; height: 1rem; }
/* The create form is a visually distinct, grouped card (dashed border + tinted
   background = "you're creating something new") so it can't be mistaken for the
   record's own fields above it. */
.resolve-create {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
/* `display: flex` overrides the UA `[hidden] { display: none }`, so the collapsed
   create-new form (toggled via the `hidden` attribute) leaked into view. Restore
   the hidden default for this class so the toggle actually collapses it. */
.resolve-create[hidden] { display: none; }
.resolve-create__heading {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.resolve-create__submit { width: 100%; justify-content: center; }
.resolve-create__field {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-sm);
}

.record-drawer__actions { display: flex; gap: var(--sp-2); }
.record-drawer__review-actions { display: flex; gap: var(--sp-2); }

/* Blocked-accept message — filled via drawer_message_oob; hidden when empty. */
.record-drawer__message {
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--warning-light);
  color: var(--warning);
  font-size: var(--text-sm);
}
.record-drawer__message:empty { display: none; }

/* The PWA install prompt is a fixed bottom overlay that covers the drawer's
   bottom actions (Accept/Reject). Its JS sets an *inline* `display:block` when the
   prompt is available, so the hide MUST be `!important` to win over that inline
   style — without it the banner stays and intercepts clicks on the buttons. Hide
   it while a review drawer is open (it returns when the drawer closes). */
.app-shell:has(.record-drawer__panel) #android-install-wrap,
.app-shell:has(.record-drawer__panel) #ios-install-wrap {
  display: none !important;
}

/* Keep BOTH the chat and the drawer open (the earlier "fold the chat away" was a
   mistake the reviewer rightly called out). The drawer is trapped in
   `.main-content`'s z-index:0 stacking context, so it would paint UNDER the chat
   panel (z-index:70). While a drawer is open, lift the whole main column above the
   chat so the slide-over sits ON TOP of it — the chat stays visible, just behind
   the drawer where they overlap, and returns fully when the drawer closes. */
.app-shell:has(.record-drawer__panel) .main-content {
  z-index: 80;
}

/* ── Confidence pills (per-field + records-table cell) ───────────────── */
.confidence-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
  white-space: nowrap;
}
.confidence-pill--low { background: var(--danger-light); color: var(--danger); }
.confidence-pill--mid { background: var(--warning-light); color: var(--warning); }
.confidence-pill--high { background: var(--success-light); color: var(--success); }
.confidence-pill--unknown { background: var(--surface); color: var(--muted); }

/* Records body toolbar: select-all on the left, "commit selected" on the right.
   Had no layout rule at all, so the button sat flush against the select-all
   label with mismatched baselines (looked broken). */
.records-table__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.records-table__select-all-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Confidence legend: a help line + colour-tier key above the records table, so
   the pill's % and red/amber/green coding is explained, never bare colour. */
.confidence-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.confidence-legend__help {
  margin: 0;
  flex: 1 1 16rem;
  font-size: var(--text-xs);
  color: var(--muted);
}
.confidence-legend__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.confidence-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.confidence-legend__swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-sm);
}

/* Commit outcome banner shown over the refreshed records table. The error
   variant (atomic rollback — nothing committed) reads as a clear warning. */
.commit-result-banner {
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: 600;
}
.commit-result-banner--error {
  background: var(--danger-light);
  border-color: var(--danger);
  color: var(--danger);
}

/* Per-record cause list under the error banner — names which record + field the
   database rejected and why, so the reviewer fixes the exact value (not a guess). */
.commit-failure-list {
  margin: 0 0 var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4);
  list-style: none;
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--text-sm);
}
.commit-failure__item {
  padding: var(--sp-1) 0;
}
.commit-failure__item + .commit-failure__item {
  border-top: 1px solid var(--border);
}
.commit-failure__field {
  font-weight: 600;
}
.commit-failure__reason {
  color: var(--muted-fg);
}

/* Upload dialog — captures optional extraction instructions after a file is
   picked, before the upload+extract chain runs. */
.upload-dialog {
  width: min(520px, 92vw);
  /* Re-assert the UA modal centering — the global reset zeroes element margins,
     which otherwise pins the dialog to the top-left. */
  margin: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  background: var(--background);
  color: var(--card-fg);
}
.upload-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.upload-dialog__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--text-lg);
}
.upload-dialog__filename {
  margin: 0 0 var(--sp-4);
  font-size: var(--text-sm);
  color: var(--muted);
  word-break: break-all;
}
.upload-dialog__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 600;
}
.upload-dialog__textarea {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-sm);
  resize: vertical;
}
.upload-dialog__hint {
  margin: var(--sp-2) 0 0;
  font-size: var(--text-xs);
  color: var(--muted);
}
.upload-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

/* The review body (toolbar + legend + table) sat flush against the sidebar while
   the page header (.page-header) was indented by the standard gutter. Match the
   header + every other page's content gutter (var(--sp-16), like .landing__body)
   so the table aligns with the title above it. */
.extraction-body {
  padding: var(--sp-4) var(--sp-16);
}
@media (max-width: 768px) {
  .extraction-body {
    padding: var(--sp-4);
  }
}

/* Explicit back-to-list link above the review header (the topbar breadcrumb is
   easy to miss). Sits in the standard content gutter, aligned with the header. */
.documents-review__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-4) var(--sp-16) 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.documents-review__back:hover {
  color: var(--card-fg);
  text-decoration: none;
}
.documents-review__back svg {
  width: 1rem;
  height: 1rem;
}
@media (max-width: 768px) {
  .documents-review__back {
    margin: var(--sp-4) var(--sp-4) 0;
  }
}

/* Field head: name on the left, confidence pill on the right. */
.record-field__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
/* The pill already signals confidence, so soften the input's coloured edge to a
   thin accent (avoids double-encoding the same thing loudly). */
.record-field__input--low,
.record-field__input--mid,
.record-field__input--high { border-left-width: 1px; }

/* Header divider + a non-modal sticky footer (message slot + Accept/Reject)
   so both stay reachable without scrolling. */
.record-drawer__header {
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.record-drawer__panel { min-height: 100%; }
.record-drawer__footer {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  padding: var(--sp-3) 0 var(--sp-1);
  background: var(--background);
  border-top: 1px solid var(--border);
}

/* Sync-options page — entity / millésime / date selection form. */
.sync-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: 640px;
}
.sync-options__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.sync-options__legend {
  margin: 0 0 var(--sp-2) 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sync-options__choice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  font-size: var(--text-sm);
  cursor: pointer;
}
.sync-options__choice--inline {
  flex-wrap: nowrap;
}
.sync-options__hint {
  display: block;
  width: 100%;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--sp-1);
  padding-left: 1.6em;
}
.sync-options__date {
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}

/* Recent-syncs section under the MesParcelles connection card. */
.integration-card__section {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.integration-card__section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-3) 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.integration-runs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.integration-run {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.integration-run__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}
.integration-run__badge--success {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}
.integration-run__badge--error {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}
.integration-run__badge--running {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}
.integration-run__badge--cancelled {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-secondary);
}

.integration-run__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.integration-run__direction {
  font-size: var(--text-sm);
  font-weight: 500;
}
.integration-run__when {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.integration-run__counters {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-align: right;
  white-space: nowrap;
}
.integration-run__error {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
  color: #dc2626;
  padding-top: var(--sp-1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   .chat-card — shared card visual grammar (Tasks 3–14)
   BEM root: .chat-card
   Ported from _card_mockup.html / _card_mockup2.html / _card_mockup3.html
   (weather-card migrated task 6; search-results migrated task 8;
   parcels-card migrated tasks 9–10; declaration-card migrated task 7)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base shell ─────────────────────────────────────────────────────────── */
.chat-card {
  --accent: var(--brand);
  --accent-tint: rgba(101, 163, 13, 0.12);
  position: relative;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  /* Custom elements default to display:inline (the old per-card CSS set block);
     without this, max-width is ignored and the inline host mis-sizes its body. */
  display: block;
  /* The chat message column is far wider than a card wants to be — cap it so
     cards read as cards (not full-width banners) and dense strips don't sprawl. */
  max-width: 560px;
}

@media (prefers-reduced-motion: no-preference) {
  .chat-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }
  .chat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: #dcdcdc;
  }
}

/* Collapsed — the grip/collapse chevron hides the body, leaving only the header
   (the JS toggles .chat-card--collapsed; without these rules it was a no-op). */
.chat-card--collapsed > :not(.chat-card__head) {
  display: none !important;
}
.chat-card--collapsed .chat-card__head {
  margin-bottom: 0;
  padding-bottom: 12px;
}

/* ── Merged header ──────────────────────────────────────────────────────── */
.chat-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 10px 13px;
  /* The whole strip toggles collapse (see _card.js) — the chevron alone is too
     small a target on a card that mounts folded. */
  cursor: pointer;
}

.chat-card__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent);
}

.chat-card__icon  :is(i, svg) {
  width: 19px;
  height: 19px;
}

.chat-card__titles {
  min-width: 0;
  flex: 1;
}

.chat-card__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-card__sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-card__badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  text-transform: uppercase;
}

/* ── Light chrome: grip / collapse — ghost, only wakes on hover ─────────── */
.chat-card__ctl {
  display: flex;
  align-items: center;
  gap: 1px;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .chat-card__ctl {
    transition: opacity 0.15s;
  }
}

.chat-card:hover .chat-card__ctl {
  opacity: 0.5;
}

.chat-card__ctl:hover {
  opacity: 1;
}

.chat-card__ctl button {
  all: unset;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.chat-card__ctl button:hover {
  background: var(--surface);
  color: var(--card-fg);
}

.chat-card__ctl  :is(i, svg) {
  width: 15px;
  height: 15px;
}

.chat-card__ctl button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Close restores a floated card to its anchor — only meaningful while floating. */
.chat-card__ctl .widget-close-btn { display: none; }
.chat-card.widget--floating .chat-card__ctl .widget-close-btn { display: grid; }

/* Collapse chevron: rotate 180° (up → down) when collapsed. Rotating the stable
   icon animates the state change AND avoids the lucide stale-<i> swap bug. */
.chat-card__collapse-btn :is(i, svg) {
  transform-origin: center;
}
.chat-card--collapsed .chat-card__collapse-btn :is(i, svg) {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: no-preference) {
  .chat-card__collapse-btn :is(i, svg) {
    transition: transform 0.2s ease;
  }
}

/* ── Chart toolbar (mockup3: mc__tools) ────────────────────────────────── */
.chat-card__tools {
  display: flex;
  gap: 1px;
}

.chat-card__tools button {
  all: unset;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.chat-card__tools button:hover {
  background: var(--surface);
  color: var(--card-fg);
}

.chat-card__tools  :is(i, svg) {
  width: 15px;
  height: 15px;
}

.chat-card__tools button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ── Hero / metric zone ─────────────────────────────────────────────────── */
.chat-card__hero {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 2px 14px 10px;
}

.chat-card__metric {
  font-family: var(--font-heading), serif;
  font-size: 40px;
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.chat-card__metric small {
  font-size: 18px;
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 500;
}

.chat-card__hero-side {
  margin-left: auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}

.chat-card__hero-tag {
  font-size: 12px;
  color: var(--muted);
}

/* ── Viz slot (generic container for sparkline / ring / other inline viz) ── */
.chat-card__viz {
  padding: 0 14px 10px;
}

/* ── Sparkline (class emitted by _viz.js sparkline()) ───────────────────── */
.chat-card__spark {
  display: block;
}

/* ── Chips row ──────────────────────────────────────────────────────────── */
.chat-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 12px;
}

.chat-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 9px;
  background: var(--surface);
  font-size: 12.5px;
  color: var(--card-fg);
  /* Never let a long value (e.g. free-text notes) push the chip past the card
     or break one-char-per-line — cap to the card width and wrap the token. */
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.chat-card__chip  :is(i, svg) {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.chat-card__chip b {
  font-weight: 600;
}

.chat-card__chip--link {
  background: var(--brand-light);
  color: #4d7c0f;
  cursor: pointer;
}

.chat-card__chip--link  :is(i, svg) {
  color: #4d7c0f;
}

.chat-card__chip--accent {
  background: var(--accent-tint);
  color: var(--accent);
}

.chat-card__chip--accent  :is(i, svg) {
  color: var(--accent);
}

.chat-card__chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Hover-revealed action row ──────────────────────────────────────────── */
.chat-card__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 14px;
  max-height: 0;
  opacity: 0;
  border-top: 1px solid transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .chat-card__actions {
    transition: max-height 0.2s ease, opacity 0.15s ease, padding 0.2s ease;
  }
}

.chat-card:hover .chat-card__actions {
  max-height: 54px;
  opacity: 1;
  padding: 10px 14px;
  border-top-color: var(--border);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.chat-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--background);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--card-fg);
  cursor: pointer;
}

.chat-card__btn:hover {
  background: var(--surface);
}

.chat-card__btn  :is(i, svg) {
  width: 14px;
  height: 14px;
}

.chat-card__btn--primary {
  border-color: transparent;
  background: var(--brand-light);
  color: #4d7c0f;
}

.chat-card__btn--primary:hover {
  background: rgba(101, 163, 13, 0.2);
}

.chat-card__btn--ghost {
  border-color: transparent;
  color: var(--muted);
  margin-left: auto;
}

.chat-card__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Crop-rotation timeline (emitted by _viz.js rotationTimeline()) ─────── */
.chat-card__rota {
  display: flex;
  gap: 4px;
  padding: 0 14px 12px;
}

.chat-card__rota-seg {
  flex: 1;
  text-align: center;
}

.chat-card__rota-bar {
  height: 8px;
  border-radius: 99px;
}

.chat-card__rota-yr {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 4px;
}

.chat-card__rota-cr {
  font-size: 11px;
  font-weight: 600;
}

/* ── Stacked crop-mix bar (emitted by _viz.js stackedBar()) ────────────── */
.chat-card__mix-wrap {
  /* wrapper returned by stackedBar() */
}

.chat-card__mix {
  display: flex;
  height: 12px;
  border-radius: 99px;
  overflow: hidden;
  margin: 0 14px 8px;
}

.chat-card__mix-seg {
  /* width + background set inline by builder */
}

.chat-card__mix-leg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 0 14px 12px;
}

.chat-card__mix-key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--muted);
}

.chat-card__mix-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  /* background set inline by builder */
}

/* ── Per-day forecast rain strip (emitted by _viz.js rainStrip()) ───────── */
.chat-card__rain {
  display: flex;
  gap: 6px;
  padding: 0 14px 12px;
  /* In a narrow chat column 7 days can't all fit — scroll horizontally rather
     than shrinking cells until the dates/temps wrap. */
  overflow-x: auto;
  scrollbar-width: thin;
}

.chat-card__rain-day {
  /* Grow to fill when there's room, but never shrink below a legible width
     (→ the strip scrolls instead of cramping the cell). */
  flex: 1 0 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px;
  border-radius: 10px;
  background: var(--surface);
}

.chat-card__rain-d {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.chat-card__rain-i {
  width: 20px;
  height: 20px;
}

.chat-card__rain-t {
  font-size: 12.5px;
  white-space: nowrap;
}

.chat-card__rain-t b {
  font-weight: 600;
}

.chat-card__rain-t span {
  color: var(--muted);
}

.chat-card__rain-bar {
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background: #e5e7eb;
  overflow: hidden;
}

.chat-card__rain-fill {
  display: block;
  height: 100%;
  background: #3b82f6;
  border-radius: 99px;
  /* width set inline by builder */
}

/* ── Donut ring (emitted by _viz.js ring()) ─────────────────────────────── */
.chat-card__ring {
  display: block;
}

.chat-card__ring-track {
  /* styled via SVG attrs from builder */
}

.chat-card__ring-fill {
  /* styled via SVG attrs from builder */
}

/* ── Segmented control (mockup2: .seg) ──────────────────────────────────── */
.chat-card__seg {
  display: inline-flex;
  gap: 2px;
  margin: 0 14px 10px;
  padding: 3px;
  background: var(--surface);
  border-radius: 11px;
}

.chat-card__seg button {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.chat-card__seg button  :is(i, svg) {
  width: 14px;
  height: 14px;
}

.chat-card__seg button[aria-selected="true"] {
  background: var(--background);
  color: var(--card-fg);
  box-shadow: var(--shadow-xs);
}

.chat-card__seg button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ── Map panel (mockup2: .map*) ─────────────────────────────────────────── */
.chat-card__map {
  position: relative;
  height: 200px;
  margin: 0 14px 12px;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px) 0 0 / 26px 100%,
    radial-gradient(circle at 30% 40%, #eef5e6, #e6efdd);
}

.chat-card__map-attr {
  position: absolute;
  right: 6px;
  bottom: 5px;
  font-size: 9px;
  color: #8a8a8a;
  background: rgba(255, 255, 255, 0.7);
  padding: 0 4px;
  border-radius: 4px;
}

.chat-card__map-zoom {
  position: absolute;
  left: 8px;
  top: 8px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
}

.chat-card__map-zoom button {
  all: unset;
  cursor: pointer;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--card-fg);
}

.chat-card__map-zoom button:first-child {
  border-bottom: 1px solid var(--border);
}

.chat-card__map-pin {
  position: absolute;
  left: 52%;
  top: 44%;
  transform: translate(-50%, -100%);
  color: var(--accent);
}

.chat-card__map-pin  :is(i, svg) {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

/* ── ECharts chart slot (mockup3: mc__chart) ────────────────────────────── */
.chat-card__chart {
  width: 100%;
  height: 240px;
  /* Align the plot's horizontal inset with the header/chips (14px) so the chart
     card's padding matches every other card. */
  padding: 4px 14px 12px;
  box-sizing: border-box;
}

/* Empty slots must not add stray padding or a bordered strip — a chart card,
   for instance, leaves hero/chips/actions empty. */
.chat-card__hero:empty,
.chat-card__viz:empty,
.chat-card__chips:empty,
.chat-card__actions:empty {
  display: none;
}

/* ── Legend strip (mockup3: mc__legend) ─────────────────────────────────── */
.chat-card__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 0 14px 12px;
}

.chat-card__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--muted);
}

.chat-card__legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  /* background set inline */
}

/* ── Dense result tile ──────────────────────────────────────────────────── */
.chat-card__tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}

.chat-card__tile:first-of-type {
  border-top: none;
}

.chat-card__tile-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-tint);
  color: var(--accent);
}

.chat-card__tile-body {
  flex: 1;
  min-width: 0;
}

.chat-card__tile-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-card__tile-sub {
  font-size: 11.5px;
  color: var(--muted);
}

.chat-card__tile-value {
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  flex-shrink: 0;
}

/* Search-result tile head (title + badge on one row) + meta lines. The meta
   uses overflow-wrap so a long unbreakable value (SIRET, n° adhérent) wraps at
   the body width instead of collapsing to one character per line. */
.chat-card__tile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.chat-card__tile-head .chat-card__tile-title {
  min-width: 0; /* let the nowrap title ellipsis-truncate inside the flex row */
}
.chat-card__tile-meta {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ── State modifiers — left accent stripe ───────────────────────────────── */
.chat-card--created {
  --accent: var(--success);
  --accent-tint: var(--success-light);
}

.chat-card--updated {
  --accent: #2563eb;
  --accent-tint: rgba(37, 99, 235, 0.12);
}

.chat-card--deleted {
  --accent: var(--danger);
  --accent-tint: var(--danger-light);
}

.chat-card--created::before,
.chat-card--updated::before,
.chat-card--deleted::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
}

/* ── Per-family accent overrides ────────────────────────────────────────── */
/* Weather / sun */
.chat-card--sun {
  --accent: #e39219;
  --accent-tint: rgba(227, 146, 25, 0.14);
}

/* Parcel / wheat */
.chat-card--wheat {
  --accent: #b45309;
  --accent-tint: rgba(180, 83, 9, 0.12);
}

/* Surface / totals metric */
.chat-card--surface-metric {
  --accent: #0f766e;
  --accent-tint: rgba(15, 118, 110, 0.12);
}

/* Chart / data visualization (teal-blue) */
.chat-card--chart {
  --accent: #0f766e;
  --accent-tint: rgba(15, 118, 110, 0.12);
}

/* Declaration / intervention */
.chat-card--decl {
  --accent: #7c3aed;
  --accent-tint: rgba(124, 58, 237, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   End of .chat-card system
   ═══════════════════════════════════════════════════════════════════════════ */