:root {
  --ink: #171917;
  --ink-soft: #262a27;
  --paper: #f2f0e8;
  --surface: #ffffff;
  --surface-soft: #f7f6f0;
  --mint: #67d4b2;
  --mint-soft: #d8f3e9;
  --pink: #ee99ee;
  --lime: #cce967;
  --orange: #f3a45d;
  --muted: #6b716c;
  --line: #dedfd8;
  --danger: #ba3d48;
  --shadow: 0 24px 70px rgba(20, 28, 22, 0.12);
  --radius-lg: 24px;
  --radius-md: 15px;
  --radius-sm: 10px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

/* GrainSense: scoped layout, no source credentials or supplier requests in the browser. */
#grain-root { display: grid; gap: 18px; min-width: 0; }
.grain-filters { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(180px, 1.4fr) repeat(2, minmax(140px, 1fr)); align-items: end; gap: 15px; padding: 23px; }
.grain-filters .field { min-width: 0; margin: 0; }
.grain-filters .grain-search { grid-column: span 2; }
.grain-filters input, .grain-filters select { min-width: 0; max-width: 100%; }
.grain-status, .grain-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.grain-status > span:first-child { display: flex; align-items: center; gap: 12px; }
.grain-summary { margin-bottom: 18px; font-size: 14px; }
.grain-summary strong { font-size: 24px; color: var(--ink); }
#grain-results { min-width: 0; }
.grain-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grain-metric { display: grid; gap: 10px; min-width: 0; padding: 23px; text-align: left; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .15s, box-shadow .15s; font: inherit; }
.grain-metric > span:first-child { font-size: 13px; font-weight: 750; }
.grain-metric > strong { font-size: clamp(24px, 2.5vw, 36px); letter-spacing: -.04em; white-space: nowrap; }
.grain-metric > small { font-size: 11px; color: var(--muted); }
.grain-metric-range, .grain-comparison { font-size: 11px; line-height: 1.6; color: var(--muted); }
.grain-metric.selected { border-color: #147d69; box-shadow: inset 0 3px #147d69; background: #f4faf7; }
.grain-metric:hover { border-color: #147d69; }
.grain-metric:focus-visible, .grain-session-link:focus-visible { outline: 3px solid #147d69; outline-offset: 3px; }
.grain-chart-heading { margin: 30px 0 16px; }
.grain-chart-heading h2 { margin: 0 0 8px; font-size: 20px; }
.grain-chart-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.grain-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grain-charts .grain-wide { grid-column: 1 / -1; }
.grain-charts .chart, .grain-detail .chart { width: 100%; height: 300px; min-width: 0; }
.grain-sessions, .grain-detail { margin-top: 22px; min-width: 0; }
.grain-session-link { border: 0; background: transparent; text-align: left; color: #0d6857; text-decoration: underline; text-underline-offset: 3px; font: inherit; font-weight: 700; padding: 6px 0; cursor: pointer; max-width: 290px; overflow-wrap: anywhere; }
.grain-sessions .table-wrap { max-width: 100%; overflow-x: auto; }
.grain-sessions table { min-width: 780px; width: 100%; border-collapse: collapse; }
.grain-sessions th, .grain-sessions td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: right; font-size: 12px; }
.grain-sessions th:first-child, .grain-sessions td:first-child { text-align: left; min-width: 180px; }
.grain-sessions tr.selected { background: #ecf6f0; }
.grain-pagination { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; font-size: 12px; }
.grain-detail { scroll-margin-top: 28px; }
.grain-detail-heading { display: flex; justify-content: space-between; align-items: start; gap: 24px; margin-bottom: 22px; }
.grain-detail-heading > div { min-width: 0; }
.grain-detail-heading h2 { margin: 0 0 10px; overflow-wrap: anywhere; }
.grain-detail-heading p { font-size: 12px; color: var(--muted); }
.grain-detail-heading .field { flex: 0 1 380px; }
.grain-detail-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 25px; }
.grain-detail-stats > div { background: #f3f5ef; border-radius: 13px; padding: 16px; display: grid; gap: 9px; min-width: 0; }
.grain-detail-stats span { color: var(--muted); font-size: 12px; }
.grain-detail-stats strong { font-size: 23px; white-space: nowrap; }
.grain-detail-stats small { color: var(--muted); font-size: 10px; line-height: 1.7; }
.grain-method { margin: 22px 0; padding: 20px; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.grain-method summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.grain-empty { padding: 35px; }
@media (max-width: 1200px) { .grain-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grain-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) {
  .grain-filters { padding: 18px; gap: 12px; } .grain-filters > .field:first-child, .grain-filters > .field:nth-child(2) { grid-column: 1 / -1; }
  .grain-charts { grid-template-columns: minmax(0, 1fr); } .grain-metric { padding: 17px; gap: 8px; }
  .grain-detail-heading { flex-direction: column; } .grain-detail-heading .field { width: 100%; flex: auto; }
  .grain-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grain-summary > div span { display: block; margin-top: 7px; }
  .grain-sessions, .grain-detail { padding: 18px; } .grain-detail-stats strong { font-size: 21px; }
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; margin: 0; }
html { overflow-x: clip; }
body { min-width: 320px; overflow-x: clip; background: var(--paper); }
img, svg, canvas { max-width: 100%; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(480px, 1.05fr);
  background: var(--paper);
}

.auth-brand {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: clamp(34px, 5vw, 72px);
  color: white;
  background:
    linear-gradient(130deg, rgba(103, 212, 178, 0.18), transparent 45%),
    radial-gradient(circle at 80% 18%, rgba(238, 153, 238, 0.18), transparent 31%),
    var(--ink);
}

.auth-brand::before,
.auth-brand::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
}
.auth-brand::before { width: 520px; height: 520px; right: -260px; bottom: -140px; }
.auth-brand::after { width: 330px; height: 330px; right: -155px; bottom: -45px; }

.brand-logo { width: 108px; height: auto; filter: drop-shadow(0 12px 22px rgba(0,0,0,.24)); }
.brand-copy { position: relative; z-index: 1; max-width: 590px; margin-top: clamp(110px, 20vh, 220px); }
.eyebrow { margin: 0 0 14px; color: var(--mint); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.brand-copy h1 { margin: 0; max-width: 650px; font-size: clamp(43px, 5.3vw, 76px); line-height: .98; letter-spacing: -.055em; }
.brand-copy p { max-width: 520px; margin: 26px 0 0; color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.65; }
.brand-pulse { display: flex; gap: 10px; align-items: center; margin-top: 46px; color: rgba(255,255,255,.75); font-size: 13px; }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 7px rgba(103,212,178,.12); }

.auth-panel { display: grid; place-items: center; min-width: 0; min-height: 100vh; padding: 40px; }
.auth-card { width: min(100%, 480px); min-width: 0; }
.auth-card h2 { margin: 0; font-size: clamp(34px, 4vw, 48px); letter-spacing: -.045em; }
.auth-intro { margin: 14px 0 34px; color: var(--muted); line-height: 1.6; }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label { font-size: 13px; font-weight: 750; }
.field input, .field select {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  border: 1px solid #cfd2ca;
  border-radius: 12px;
  color: var(--ink);
  background: white;
  outline: none;
  transition: border-color .16s, box-shadow .16s;
}
.field input:focus, .field select:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(103,212,178,.25); }
.password-policy { margin: -7px 0 20px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.password-policy > strong { display: block; margin-bottom: 9px; font-size: 11px; }
.password-policy ul { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; margin: 0; padding: 0; list-style: none; }
.password-policy li { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.password-policy li::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border: 1px solid #a8aba5; border-radius: 50%; background: white; }
.password-policy li.met { color: #176f57; }
.password-policy li.met::before { border-color: #176f57; background: #67d4b2; box-shadow: 0 0 0 2px rgba(103,212,178,.2); }
.btn {
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 11px;
  font-weight: 800;
  transition: transform .16s, opacity .16s, background .16s;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { cursor: wait; opacity: .55; transform: none; }
.btn-primary { color: white; background: var(--ink); }
.btn-primary:hover { background: #2b302c; }
.btn-mint { color: var(--ink); background: var(--mint); }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); background: transparent; }
.btn-danger { color: var(--danger); background: #fff0f1; }
.btn-wide { width: 100%; }
.form-error { min-height: 22px; margin: 8px 0 12px; color: var(--danger); font-size: 13px; font-weight: 650; }
.security-note { display: flex; gap: 11px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; }
.security-note svg { flex: 0 0 auto; }
.security-note span { min-width: 0; overflow-wrap: anywhere; }

.app-shell { display: grid; grid-template-columns: 258px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 26px 18px 20px; color: white; background: var(--ink); }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 28px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar-brand img { width: 57px; }
.sidebar-brand strong { display: block; font-size: 14px; letter-spacing: .02em; }
.sidebar-brand span { display: block; margin-top: 3px; color: rgba(255,255,255,.48); font-size: 11px; }
.nav { display: grid; gap: 6px; margin-top: 25px; overflow-y: auto; scrollbar-width: thin; }
.nav-label { padding: 0 12px 8px; color: rgba(255,255,255,.38); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.nav-button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 13px; border: 0; border-radius: 11px; color: rgba(255,255,255,.68); background: transparent; text-align: left; font-weight: 650; }
.nav-button:hover { color: white; background: rgba(255,255,255,.07); }
.nav-button.active { color: var(--ink); background: var(--mint); }
.nav-button svg { width: 19px; height: 19px; }
.sidebar-bottom { margin-top: auto; padding: 18px 8px 0; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-bottom p { margin: 0 0 3px; color: rgba(255,255,255,.45); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.sidebar-bottom strong { font-size: 12px; }
.sidebar-user { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 17px 4px 0; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-user > span { min-width: 0; flex: 1; overflow: hidden; color: rgba(255,255,255,.72); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-logout { display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; color: rgba(255,255,255,.72); background: transparent; }
.sidebar-logout:hover { color: var(--ink); background: var(--mint); }
.mobile-menu, .sidebar-close, .sidebar-backdrop { display: none; }

.workspace { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 4; display: flex; justify-content: space-between; align-items: center; min-height: 82px; padding: 0 clamp(22px, 4vw, 54px); border-bottom: 1px solid var(--line); background: rgba(242,240,232,.94); backdrop-filter: blur(12px); }
.topbar-main { display: flex; min-width: 0; align-items: center; gap: 12px; }
.breadcrumb { color: var(--muted); font-size: 13px; }
.breadcrumb strong { color: var(--ink); }
.data-freshness { color: var(--muted); font-size: 11px; }
.profile { display: flex; align-items: center; gap: 12px; }
.profile-text { text-align: right; }
.profile-text strong { display: block; font-size: 13px; }
.profile-text span { color: var(--muted); font-size: 11px; }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pink); font-weight: 850; }
.logout-button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: transparent; }

.content { padding: clamp(28px, 4vw, 54px); }
.page-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 30px; }
.page-heading > div { min-width: 0; }
.page-heading h1 { max-width: 100%; margin: 0; overflow-wrap: anywhere; font-size: clamp(32px, 4vw, 48px); letter-spacing: -.045em; }
.page-heading p { max-width: 850px; margin: 10px 0 0; color: var(--muted); line-height: 1.5; }
.status-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 31px; padding: 0 11px; border-radius: 999px; background: var(--mint-soft); font-size: 11px; font-weight: 800; }
.status-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1b956f; }

.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.metric-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card { position: relative; overflow: hidden; min-height: 174px; padding: 23px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.metric-card.accent { color: white; border-color: var(--ink); background: var(--ink); }
.metric-label { color: var(--muted); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.accent .metric-label { color: rgba(255,255,255,.52); }
.metric-value { position: relative; z-index: 1; margin-top: 25px; overflow-wrap: anywhere; font-size: clamp(25px, 2vw, 32px); font-weight: 820; line-height: 1.08; letter-spacing: -.04em; }
.metric-description { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.accent .metric-description { color: rgba(255,255,255,.58); }
.metric-card .orb { position: absolute; width: 100px; height: 100px; right: -30px; bottom: -34px; border-radius: 50%; background: var(--mint); opacity: .2; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 17px; margin-top: 17px; }
.analytics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; margin-top: 17px; }
.overview-grid { grid-template-columns: minmax(0, 1.7fr) minmax(290px, .7fr); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: 1 / -1; }
.panel { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.panel h2 { margin: 0; font-size: 18px; letter-spacing: -.025em; }
.panel-subtitle { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.empty-chart { position: relative; display: grid; place-items: center; min-height: 285px; margin-top: 24px; overflow: hidden; border-radius: 12px; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 44px 44px; }
.empty-chart::before { content: ""; position: absolute; inset: 30% 7% auto; height: 3px; transform: rotate(-3deg); background: linear-gradient(90deg, transparent, var(--mint), var(--pink), transparent); opacity: .5; }
.empty-chart-copy { position: relative; max-width: 320px; padding: 22px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.94); text-align: center; box-shadow: 0 14px 30px rgba(0,0,0,.07); }
.empty-chart-copy strong { display: block; margin-bottom: 7px; }
.empty-chart-copy span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.chart-panel { min-width: 0; overflow: hidden; }
.chart { width: 100%; height: 320px; margin-top: 14px; }
.chart-tall { height: 390px; }
.chart-xl { height: 520px; }
.map-chart { height: 680px; }
.map-side-chart { height: 680px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 20px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.filter-field { display: grid; flex: 1 1 155px; gap: 7px; min-width: 145px; }
.filter-field.grow { flex: 2 1 230px; }
.filter-field label { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.filter-field input, .filter-field select { width: 100%; min-width: 0; height: 43px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; }
.filter-submit, .export-button { flex: 0 1 auto; min-height: 43px; white-space: nowrap; }
.export-button { display: inline-flex; align-items: center; gap: 8px; }
.export-button.busy::before { content: ""; width: 15px; height: 15px; border: 2px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: spin .7s linear infinite; }
.export-button.busy svg { display: none; }
.is-busy button[type="submit"]::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 9px; vertical-align: -3px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-panel, .error-panel { display: grid; min-height: 280px; place-items: center; margin-top: 17px; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--muted); background: var(--surface); }
.loading-panel { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 32px; color: var(--ink); font-size: 14px; font-weight: 700; text-align: center; background: linear-gradient(115deg, #fff 20%, #f5faf8 45%, #fff 70%); background-size: 220% 100%; animation: loading-sheen 2.6s ease-in-out infinite; }
.loading-panel::before { content: ""; width: 38px; height: 38px; border: 4px solid #d8f5ec; border-top-color: #168e73; border-radius: 50%; animation: spin .8s linear infinite; }
#app:empty::before { content: ""; position: fixed; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px; border: 4px solid #d8f5ec; border-top-color: #168e73; border-radius: 50%; animation: spin .8s linear infinite; }
.table-loading { min-height: 180px; margin: 0; border: 0; }
@keyframes loading-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .loading-panel, .loading-panel::before, #app:empty::before { animation: none; } }
.error-panel { color: var(--danger); }
.insight-note, .auth-notice { margin: 17px 0 0; padding: 13px 16px; border: 1px solid #bee6d8; border-radius: 11px; color: #276552; background: var(--mint-soft); font-size: 12px; line-height: 1.5; }
.sales-layout > .insight-note, .geography-layout > .insight-note { margin: 0 0 24px; }
.auth-notice { margin: -14px 0 22px; }
.period-warning { margin: 0 0 17px; padding: 12px 15px; border: 1px solid #f0d28c; border-radius: 11px; color: #76550d; background: #fff6d8; font-size: 12px; }
.chart-tooltip-title { margin-bottom: 8px; color: rgba(255,255,255,.7); font-size: 11px; font-weight: 750; }
.chart-tooltip-title:empty { display: none; }
.chart-tooltip-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; min-width: 170px; max-width: min(360px, calc(100vw - 54px)); margin-top: 5px; }
.chart-tooltip-row span { display: flex; min-width: 0; align-items: center; gap: 7px; white-space: normal; }
.chart-tooltip-row i { width: 8px; height: 8px; border-radius: 50%; }
.chart-tooltip-row strong { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.row-count { color: var(--muted); font-size: 12px; font-weight: 750; }
.table-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
.timeline { display: grid; gap: 18px; margin-top: 24px; }
.timeline-item { display: grid; grid-template-columns: 12px 1fr; gap: 13px; }
.timeline-dot { width: 10px; height: 10px; margin-top: 4px; border: 2px solid white; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 2px var(--line); }
.timeline-dot.ready { background: #299c74; box-shadow: 0 0 0 2px var(--mint-soft); }
.timeline-item strong { display: block; font-size: 13px; }
.timeline-item p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }

.table-panel { overflow: hidden; padding: 0; }
.table-tools { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 15px 20px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
.data-table th { color: var(--muted); background: var(--surface-soft); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.data-table tr:last-child td { border-bottom: 0; }
.role-badge, .state-badge { display: inline-flex; min-height: 25px; align-items: center; padding: 0 9px; border-radius: 999px; background: var(--surface-soft); font-size: 10px; font-weight: 800; }
.role-select { min-height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: white; font-size: 11px; font-weight: 750; }
.state-badge.active { color: #157657; background: var(--mint-soft); }
.state-badge.invited { color: #785914; background: #fff0b9; }
.state-badge.disabled { color: var(--danger); background: #ffe7e9; }
.table-actions { display: flex; gap: 7px; }
.icon-btn { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: white; font-size: 11px; font-weight: 750; }
.icon-btn.danger { color: var(--danger); }
.permission-badges { display: flex; flex-wrap: wrap; gap: 5px; min-width: 220px; }
.permission-badges span { padding: 4px 7px; border-radius: 6px; color: #315c4e; background: var(--mint-soft); font-size: 9px; font-weight: 750; }
.permission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 18px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; }
.permission-grid legend { padding: 0 7px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.permission-grid label { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 7px 9px; border-radius: 8px; background: var(--surface-soft); font-size: 12px; font-weight: 650; }
.permission-grid input { accent-color: var(--ink); }
.permission-grid > p { grid-column: 1 / -1; margin: 0 0 3px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.ai-permission-grid { border-color: #a8dcca; background: #f7fcfa; transition: opacity .15s ease; }
.ai-permission-grid.is-disabled { opacity: .55; }
.ai-access-summary { max-width: 330px; margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.ai-access-summary strong { color: var(--ink); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal-wide { width: min(100%, 680px); max-height: calc(100vh - 48px); overflow-y: auto; }
.user-modal-identity { display: grid; gap: 4px; margin-bottom: 20px; padding: 14px; border-radius: 10px; background: var(--surface-soft); }
.user-modal-identity span { color: var(--muted); font-size: 12px; }
.geo-grid { grid-template-columns: minmax(0, 1.5fr) minmax(330px, .75fr); }

.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 24px; background: rgba(15,17,15,.58); backdrop-filter: blur(7px); }
.modal { width: min(100%, 520px); padding: 27px; border-radius: 20px; background: white; box-shadow: var(--shadow); }
.modal h2 { margin: 0 0 8px; font-size: 24px; }
.modal > p { margin: 0 0 24px; color: var(--muted); line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.link-box { padding: 13px; border: 1px dashed #a9ada5; border-radius: 10px; background: var(--surface-soft); word-break: break-all; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; line-height: 1.5; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 390px; padding: 14px 17px; border-radius: 11px; color: white; background: var(--ink); box-shadow: var(--shadow); font-size: 13px; }
.hidden { display: none !important; }

@media (max-width: 1440px) {
  .metric-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { min-height: 330px; }
  .brand-copy { margin-top: 65px; }
  .auth-panel { min-height: auto; }
  .app-shell { grid-template-columns: 84px minmax(0,1fr); }
  .sidebar-brand strong, .sidebar-brand span, .nav-button span, .nav-label, .sidebar-bottom { display: none; }
  .sidebar-brand { justify-content: center; padding-inline: 0; }
  .nav-button { justify-content: center; padding: 0; }
  .sidebar-user { justify-content: center; padding-inline: 0; }
  .sidebar-user > span { display: none; }
  .content { padding: 34px clamp(22px, 3vw, 38px); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .sales-layout .analytics-grid > :nth-child(5) { grid-column: 1 / -1; }
  .overview-grid, .geo-grid { grid-template-columns: 1fr; }
  .overview-grid .span-2, .geo-grid .span-2, .geo-grid .span-3 { grid-column: auto; }
  .filter-field, .filter-field.grow { flex-basis: 190px; }
  .map-chart, .map-side-chart { height: 560px; }
}

@media (max-width: 760px) {
  body.nav-open { overflow: hidden; }
  .auth-brand { min-height: 285px; padding: 28px; }
  .brand-logo { width: 76px; }
  .brand-copy { margin-top: 48px; }
  .brand-copy h1 { font-size: 39px; }
  .brand-copy p, .brand-pulse { display: none; }
  .auth-panel { padding: 32px 22px 50px; }
  .password-policy ul { grid-template-columns: 1fr; }
  .app-shell { display: block; }
  .sidebar {
    position: fixed; z-index: 51; inset: 0 auto 0 0; width: min(86vw, 320px); height: 100dvh;
    padding: 22px 16px max(18px, env(safe-area-inset-bottom)); transform: translateX(-104%);
    box-shadow: 20px 0 55px rgba(0,0,0,.28); transition: transform .2s ease;
  }
  .app-shell.nav-open .sidebar { transform: translateX(0); }
  .sidebar-brand { justify-content: flex-start; padding: 0 4px 22px; }
  .sidebar-brand strong, .sidebar-brand span, .nav-button span, .nav-label { display: block; }
  .sidebar-brand img { width: 52px; }
  .sidebar-close { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; margin-left: auto; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; color: white; background: transparent; }
  .sidebar-close svg { width: 19px; height: 19px; }
  .nav { display: grid; grid-auto-flow: row; grid-auto-columns: auto; width: auto; margin-top: 20px; }
  .nav-button { justify-content: flex-start; min-height: 48px; padding: 0 13px; }
  .sidebar-user { justify-content: flex-start; margin-top: auto; padding: 16px 4px 0; }
  .sidebar-user > span { display: block; }
  .sidebar-backdrop { position: fixed; z-index: 50; inset: 0; display: block; border: 0; background: rgba(15,17,15,.54); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .app-shell.nav-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .topbar { min-height: 66px; padding: 0 16px; }
  .mobile-menu { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: white; }
  .mobile-menu svg { width: 20px; height: 20px; }
  .breadcrumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .breadcrumb > span { display: none; }
  .data-freshness { display: none; }
  .content { padding: 24px 16px max(90px, calc(70px + env(safe-area-inset-bottom))); }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 23px; }
  .page-heading h1 { font-size: clamp(29px, 9vw, 38px); }
  .page-heading .btn, .page-heading .status-chip { align-self: stretch; justify-content: center; }
  .metric-grid, .metric-grid-four, .analytics-grid, .overview-grid, .geo-grid { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: auto; }
  .metric-card { min-height: 150px; padding: 20px; }
  .metric-value { margin-top: 20px; font-size: clamp(26px, 9vw, 34px); }
  .panel { padding: 20px 16px; }
  .panel-header { flex-direction: column; }
  .chart { height: 300px; }
  .chart-tall { height: 350px; }
  .chart-xl { height: 470px; }
  .map-chart { height: 560px; }
  .map-side-chart { height: 440px; }
  .filter-bar { display: grid; grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .filter-field, .filter-field.grow { width: 100%; min-width: 0; }
  .filter-submit, .export-button { width: 100%; justify-content: center; }
  .table-tools { align-items: flex-start; flex-direction: column; gap: 10px; padding: 19px 16px; }
  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
  .responsive-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .responsive-table tr { padding: 9px 16px; border-bottom: 1px solid var(--line); }
  .responsive-table tr:last-child { border-bottom: 0; }
  .responsive-table td { display: grid; grid-template-columns: minmax(90px, .42fr) minmax(0, 1fr); gap: 12px; padding: 9px 0; border: 0; text-align: right; overflow-wrap: anywhere; }
  .responsive-table td::before { content: attr(data-label); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
  .responsive-table td:first-child { padding-top: 13px; font-size: 14px; }
  .responsive-table .permission-badges, .responsive-table .table-actions { grid-column: 2; justify-content: flex-end; min-width: 0; }
  .responsive-table .table-actions { flex-wrap: wrap; }
  .responsive-table .icon-btn { flex: 1 1 auto; white-space: nowrap; }
  .responsive-table .ai-access-summary { grid-column: 2; max-width: none; }
  .permission-grid, .form-row { grid-template-columns: 1fr; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal { width: 100%; max-height: min(92dvh, 780px); overflow-y: auto; padding: 23px 18px max(20px, env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; }
  .modal-wide { max-height: 92dvh; }
  .modal-actions { display: grid; grid-template-columns: 1fr; }
  .modal-actions .btn { width: 100%; }
  .toast { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); left: 14px; max-width: none; }
}

@media (max-width: 390px) {
  .content { padding-inline: 12px; }
  .panel { padding-inline: 13px; }
  .chart-tooltip-row { min-width: 0; gap: 12px; }
}

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

/* AI Controller */
.ai-launcher {
  position: fixed; right: 24px; bottom: 24px; z-index: 30; display: flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 0 19px; border: 0; border-radius: 999px; color: white; background: var(--ink);
  box-shadow: 0 16px 42px rgba(20,28,22,.28); font-size: 13px; font-weight: 850; transition: transform .18s, opacity .18s;
}
.ai-launcher:hover { transform: translateY(-2px); }
.ai-launcher.is-open { opacity: 0; pointer-events: none; }
.ai-launcher svg { width: 22px; height: 22px; color: var(--mint); }
.ai-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 31; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto;
  width: min(440px, calc(100vw - 44px)); height: min(730px, calc(100vh - 44px)); overflow: hidden;
  border: 1px solid rgba(23,25,23,.12); border-radius: 22px; background: #fff; box-shadow: 0 30px 90px rgba(20,28,22,.24);
  opacity: 0; pointer-events: none; transform: translateY(18px) scale(.98); transform-origin: bottom right; transition: opacity .18s, transform .18s;
}
.ai-panel.is-open { opacity: 1; pointer-events: auto; transform: none; }
.ai-header { display: flex; align-items: center; gap: 12px; padding: 18px 19px; color: white; background: var(--ink); }
.ai-mark, .ai-avatar { display: grid; flex: 0 0 auto; place-items: center; border-radius: 11px; color: var(--ink); background: var(--mint); }
.ai-mark { width: 42px; height: 42px; }
.ai-mark svg { width: 23px; height: 23px; }
.ai-header h2 { margin: 0; font-size: 17px; letter-spacing: -.015em; }
.ai-header p { margin: 3px 0 0; color: rgba(255,255,255,.58); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.ai-close { display: grid; place-items: center; width: 38px; height: 38px; margin-left: auto; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; color: white; background: transparent; }
.ai-close:hover { background: rgba(255,255,255,.1); }
.ai-close svg { width: 19px; height: 19px; }
.ai-scope { display: grid; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.ai-scope > div:first-child { display: grid; gap: 3px; }
.ai-scope span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.ai-scope strong { font-size: 11px; }
.ai-budget > span { display: flex; justify-content: space-between; }
.ai-budget > div { height: 5px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: #e1e2dc; }
.ai-budget i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--lime)); transition: width .3s; }
.ai-budget.is-low i { background: linear-gradient(90deg, #f3a45d, #bd5363); }
.ai-thread { overflow-y: auto; padding: 18px; scroll-behavior: smooth; }
.ai-welcome { display: grid; justify-items: center; padding: 15px 0 5px; text-align: center; }
.ai-welcome-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: var(--ink); background: var(--mint-soft); }
.ai-welcome-icon svg { width: 27px; height: 27px; }
.ai-welcome h3 { margin: 16px 0 8px; font-size: 20px; letter-spacing: -.025em; }
.ai-welcome > p { max-width: 350px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.ai-suggestions { display: grid; width: 100%; gap: 8px; margin-top: 20px; }
.ai-suggestions button { padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: white; font-size: 11px; font-weight: 650; line-height: 1.4; text-align: left; }
.ai-suggestions button:hover { border-color: #92cbb9; background: var(--mint-soft); }
.ai-message { display: flex; gap: 9px; margin-bottom: 16px; }
.ai-message.user { justify-content: flex-end; }
.ai-message > div { max-width: 86%; padding: 11px 13px; border-radius: 13px; background: var(--surface-soft); font-size: 12px; line-height: 1.55; }
.ai-message.user > div { border-bottom-right-radius: 4px; color: white; background: var(--ink); }
.ai-message.assistant > div { border-bottom-left-radius: 4px; }
.ai-message p { margin: 0 0 8px; }
.ai-message p:last-child { margin-bottom: 0; }
.ai-avatar { width: 28px; height: 28px; margin-top: 2px; border-radius: 8px; }
.ai-avatar svg { width: 16px; height: 16px; }
.ai-message footer { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.ai-message footer span { padding: 3px 6px; border-radius: 5px; color: #315c4e; background: var(--mint-soft); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ai-thinking { display: flex; align-items: center; gap: 4px; }
.ai-thinking i { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); animation: ai-pulse 1s infinite alternate; }
.ai-thinking i:nth-child(2) { animation-delay: .18s; }.ai-thinking i:nth-child(3) { animation-delay: .36s; }
.ai-thinking span { margin-left: 5px; color: var(--muted); font-size: 10px; }
@keyframes ai-pulse { to { opacity: .25; transform: translateY(-2px); } }
.ai-composer { padding: 13px 16px 15px; border-top: 1px solid var(--line); background: #fff; }
.ai-composer > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ai-composer > div { display: flex; align-items: flex-end; gap: 8px; padding: 7px 7px 7px 12px; border: 1px solid #cfd2ca; border-radius: 13px; background: white; }
.ai-composer > div:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(103,212,178,.2); }
.ai-composer textarea { flex: 1; max-height: 105px; padding: 8px 0; border: 0; outline: 0; resize: none; color: var(--ink); background: transparent; font: inherit; font-size: 12px; line-height: 1.45; }
.ai-composer button { display: grid; flex: 0 0 auto; place-items: center; width: 39px; height: 39px; border: 0; border-radius: 10px; color: white; background: var(--ink); }
.ai-composer button:disabled { opacity: .35; cursor: wait; }
.ai-composer button svg { width: 18px; height: 18px; }
.ai-composer > p { margin: 7px 2px 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.ai-composer > p.ai-limit-note { color: var(--danger); font-weight: 700; }

@media (max-width: 760px) {
  .ai-launcher { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); min-width: 52px; min-height: 52px; padding: 0; justify-content: center; }
  .ai-launcher span { display: none; }
  .ai-panel { inset: 0; width: 100vw; height: 100dvh; border: 0; border-radius: 0; transform: translateY(20px); }
  .ai-panel.is-open { transform: none; }
  .ai-header { padding: max(14px, env(safe-area-inset-top)) 15px 14px; }
  .ai-scope { padding-inline: 15px; }
  .ai-thread { padding: 15px; }
  .ai-composer { padding: 12px 12px max(12px, env(safe-area-inset-bottom)); }
}

/* Daily production intelligence */
.production-heading { align-items: flex-end; }
.production-heading .status-chip { flex-shrink: 0; max-width: 100%; white-space: normal; text-align: center; }
.production-hero { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 0 0 28px; padding: 29px 34px; border: 1px solid #b5d9ce; border-radius: 18px; background: linear-gradient(110deg, #e5f5ef, #f8fbf6 68%, #eaf3db); }
.production-hero.has-critical { border-color: #ebc0bd; background: linear-gradient(110deg, #fff0ea, #f9f7ef 75%); }
.production-hero h2 { max-width: 900px; margin: 7px 0; font-size: clamp(20px, 2.1vw, 31px); line-height: 1.18; letter-spacing: -.035em; }
.production-hero p:not(.eyebrow) { max-width: 850px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.production-hero-count { display: grid; min-width: 110px; text-align: center; font-size: 51px; font-weight: 850; line-height: 1; letter-spacing: -.05em; }
.production-hero-count small { margin-top: 5px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.production-stale { margin-bottom: 18px; border-color: #e8bd78; background: #fff7e8; }
.production-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.production-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 18px; min-width: 0; padding: 13px 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.production-section strong { overflow-wrap: anywhere; font-size: 12px; }
.production-section span { grid-column: 1; color: var(--muted); font-size: 10px; }
.production-section b { grid-column: 2; grid-row: 1 / 3; align-self: center; color: #347b62; font-size: 10px; white-space: nowrap; }
.production-section b.is-alert { color: #af5b2d; }
.production-preview { margin-top: 30px; }
.production-preview .panel-header { margin-bottom: 16px; }
.finding-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.finding-card { min-width: 0; padding: 19px 21px; border: 1px solid #e8e4d9; border-left: 4px solid #e6ab6a; border-radius: 13px; background: white; box-shadow: 0 6px 22px rgba(18, 31, 25, .035); }
.finding-card.priority-high { border-left-color: #c75a69; background: #fffaf9; }
.finding-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 720; }
.finding-grade { padding: 4px 7px; border-radius: 5px; color: #97552c; background: #fff0dc; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.priority-high .finding-grade { color: #a94254; background: #fce5e7; }
.finding-card h3 { margin: 11px 0 7px; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.finding-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.finding-evidence { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: #4d6059; font-size: 10px; font-weight: 700; }
.finding-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 13px; margin: 28px 0 14px; }
.finding-toolbar strong { font-size: 19px; letter-spacing: -.03em; }
.finding-toolbar > div { display: flex; flex-wrap: wrap; gap: 7px; }
.finding-filter { padding: 9px 13px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); font-size: 10px; font-weight: 750; }
.finding-filter.active { border-color: var(--ink); color: white; background: var(--ink); }
.production-quality { margin-top: 26px; }
.production-quality-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.production-quality-grid > div { display: grid; gap: 5px; padding: 14px; border-radius: 10px; background: var(--surface-soft); }
.production-quality-grid span { color: var(--muted); font-size: 10px; }
.production-quality-grid strong { font-size: 16px; }
.gap-list { margin-top: 15px; border-top: 1px solid var(--line); }
.gap-list > div { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.gap-list span { color: var(--muted); overflow-wrap: anywhere; }
.production-empty { padding: 35px; }
.production-empty h2 { margin: 0 0 7px; font-size: 20px; }
.production-empty p { margin: 0; color: var(--muted); }
.production-empty-inline { grid-column: 1 / -1; padding: 24px; border: 1px dashed #ccd6cd; border-radius: 12px; color: var(--muted); background: #f8faf6; font-size: 12px; }
.production-intelligence { min-width: 0; }
.production-operations-panel { margin: 22px 0; }
.production-operations-panel, .production-signal-detail { scroll-margin-top: 100px; }
.production-operations-panel .eyebrow { margin: 0 0 7px; }
.production-timeline { margin: 24px 0 28px; }
.production-timeline-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; height: 30px; overflow: hidden; border-radius: 6px; background: #fff; }
.production-timeline-track span { position: relative; min-width: 0; }
.production-timeline-track .state-running { background: #128467; }
.production-timeline-track .state-stopped { background: #c3cec7; }
.production-timeline-track .state-unknown { background: repeating-linear-gradient(135deg, #f5f6f3 0 3px, #e6e8e2 3px 5px); }
.production-timeline-track .anomalous { border-top: 6px solid #ca6675; }
.production-timeline-labels { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: 10px; }
.production-timeline-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 14px; color: #53675b; font-size: 10px; }
.production-timeline-legend span { display: inline-flex; align-items: center; gap: 6px; }
.production-timeline-legend span::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: #c3cec7; }
.production-timeline-legend .running::before { background: #128467; }
.production-timeline-legend .unknown::before { background: #edeede; }
.production-timeline-legend .anomalous::before { background: #ca6675; }
.production-operations-columns { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 30px; }
.production-operations-columns h3 { margin: 0 0 18px; font-size: 15px; }
.production-moments { display: grid; gap: 18px; padding: 0; margin: 0; list-style: none; }
.production-moments li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 15px; }
.production-moments time { padding-top: 2px; color: #18785b; font-size: 12px; font-weight: 850; font-variant-numeric: tabular-nums; }
.production-moments li > div { padding-left: 15px; border-left: 2px solid #d7e9df; }
.production-moments strong { display: block; margin-bottom: 7px; font-size: 12px; }
.production-moments button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: 100%; padding: 5px 0; border: 0; background: transparent; color: #53675b; text-align: left; font-size: 10px; cursor: pointer; }
.production-moments button span { overflow-wrap: anywhere; }
.production-moments button b { color: #213d2f; font-variant-numeric: tabular-nums; }
.production-moments button:hover span, .production-movement-list button:hover strong { text-decoration: underline; }
.production-moments small { color: var(--muted); font-size: 10px; }
.production-movement-list { display: grid; gap: 9px; }
.production-movement-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 13px; border: 1px solid #dce8df; border-radius: 9px; color: #1a3628; background: #f8fbf8; text-align: left; cursor: pointer; }
.production-movement-list span { min-width: 0; }
.production-movement-list strong { display: block; overflow-wrap: anywhere; font-size: 11px; }
.production-movement-list small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.production-movement-list b { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; }
.production-stability { display: grid; gap: 7px; padding: 18px; margin-top: 16px; border-radius: 10px; background: #eaf5ed; }
.production-stability span { color: #416c50; font-size: 11px; }
.production-stability strong { font-size: 25px; }
.production-stability small { color: #5b7662; font-size: 10px; }
.production-measurement-insight, .production-week-operation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.production-measurement-insight > div, .production-week-operation-grid > div { display: grid; align-content: start; gap: 8px; padding: 16px; border: 1px solid #cfe3d7; border-radius: 10px; background: #f3faf5; }
.production-measurement-insight span, .production-week-operation-grid span { color: #4c765b; font-size: 10px; font-weight: 750; }
.production-measurement-insight strong { overflow-wrap: anywhere; font-size: 17px; }
.production-measurement-insight p, .production-week-operation-grid small { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.production-week-operation-grid strong { font-size: 28px; }
.production-level-panel { margin-top: 22px; }
.production-level-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; margin-top: 20px; }
.production-level-grid button { display: grid; align-content: start; gap: 9px; min-width: 0; padding: 18px; border: 1px solid #d0e3d7; border-radius: 10px; color: #203c2b; background: #f5faf6; text-align: left; cursor: pointer; }
.production-level-grid span { font-size: 11px; font-weight: 750; overflow-wrap: anywhere; }
.production-level-grid strong { font-size: 24px; overflow-wrap: anywhere; }
.production-level-grid strong.quiet-comparison { font-size: 15px; line-height: 1.4; }
.production-level-grid b { font-size: 11px; font-weight: 650; }
.production-level-grid small { color: var(--muted); font-size: 10px; }
.production-level-grid button:hover { border-color: #278565; background: #edf8f0; }
@media (max-width: 1000px) { .production-operations-columns { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .production-measurement-insight { grid-template-columns: 1fr; } .production-moments li { gap: 8px; grid-template-columns: 42px minmax(0, 1fr); } .production-moments li > div { padding-left: 10px; } .production-moments button { grid-template-columns: 1fr; gap: 3px; } .production-movement-list button { flex-wrap: wrap; } }
.production-tabs { display: inline-flex; gap: 4px; margin: 0 0 22px; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.production-coverage-warning { margin: 0 0 18px; padding: 11px 15px; border: 1px solid #efd2a0; border-radius: 10px; color: #715525; background: #fff8e9; font-size: 11px; line-height: 1.5; }
.production-tabs button { min-height: 38px; padding: 8px 16px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 780; cursor: pointer; }
.production-tabs button[aria-selected="true"] { color: #fff; background: var(--ink); }
.production-lead { margin-bottom: 22px; }
.production-story-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); gap: 13px; margin: -4px 0 22px; }
.production-story-card { display: grid; align-content: start; gap: 11px; min-width: 0; min-height: 150px; padding: 20px; border: 1px solid #dce6de; border-radius: 14px; background: #fff; box-shadow: 0 12px 24px rgba(29, 44, 33, .035); }
.production-story-card.accent { border-color: #13382b; color: #fff; background: radial-gradient(circle at 90% 10%, #296b52 0, #153b2d 36%, #17211b 100%); }
.production-story-card > span { color: #617b6b; font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.production-story-card.accent > span { color: #9ee9c3; }
.production-story-card strong { font-size: clamp(18px, 1.6vw, 25px); line-height: 1.2; letter-spacing: -.035em; overflow-wrap: anywhere; }
.production-story-card p { margin: 0; color: #5f7064; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.production-story-card.accent p { color: #d3e9dc; }
.production-day-metrics { margin-bottom: 22px; }
.production-intel-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, .8fr); gap: 18px; }
.production-intel-main, .production-intel-side { min-width: 0; }
.production-insight-list { display: grid; gap: 12px; margin-top: 18px; }
.production-insight-card { padding: 18px; border: 1px solid #c7e2d7; border-left: 4px solid #278e72; border-radius: 12px; background: #f6fbf8; }
.production-insight-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 750; }
.production-insight-card h3 { margin: 9px 0 8px; font-size: 17px; }
.production-insight-card p { margin: 0 0 10px; color: #384b43; font-size: 12px; line-height: 1.55; }
.production-driver-list { display: flex; flex-wrap: wrap; gap: 7px; }
.production-driver-list span { max-width: 100%; padding: 6px 9px; border: 1px solid #d5e8de; border-radius: 7px; color: #25664f; background: #fff; font-size: 11px; font-weight: 700; overflow-wrap: anywhere; }
.production-insight-card small { color: var(--muted); font-size: 10px; }
.production-insight-tag { color: #1e775f; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.production-calm { padding: 25px; border: 1px dashed #cadbd1; border-radius: 12px; background: #f8fbf8; }
.production-calm strong { font-size: 15px; }
.production-calm p, .production-calm-text { color: var(--muted); font-size: 12px; line-height: 1.6; }
.production-mini-findings { display: grid; gap: 13px; margin-top: 19px; }
.production-mini-findings > div { display: grid; justify-items: start; gap: 7px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.production-mini-findings strong { font-size: 12px; }
.production-mini-findings p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.production-details { margin-top: 26px; }
.production-signal-explorer { margin-top: 26px; padding: 26px; min-width: 0; }
.production-signal-explorer .panel-header { align-items: flex-start; gap: 18px; }
.production-signal-explorer .eyebrow { margin: 0 0 7px; }
.production-signal-explorer h2 { margin: 0 0 5px; }
.production-signal-count { flex: none; padding: 8px 11px; border-radius: 999px; color: #216b54; background: #e8f6ee; font-size: 11px; font-weight: 800; }
.production-signal-toolbar { display: grid; grid-template-columns: minmax(200px, 1.7fr) repeat(2, minmax(160px, 1fr)); gap: 12px; margin: 21px 0 16px; }
.production-signal-toolbar label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.production-signal-toolbar input, .production-signal-toolbar select { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; font: inherit; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.production-signal-toolbar input:focus-visible, .production-signal-toolbar select:focus-visible, .production-signal-name:focus-visible { outline: 2px solid #0e8f74; outline-offset: 2px; }
.production-signal-table-wrap { max-height: 565px; overflow: auto; border: 1px solid var(--line); border-radius: 11px; }
.production-signal-table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 11px; }
.production-signal-table th { position: sticky; top: 0; z-index: 1; padding: 13px 12px; color: #607068; background: #f5f8f5; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.production-signal-table td { padding: 11px 12px; border-top: 1px solid #edf0ec; vertical-align: middle; white-space: nowrap; }
.production-signal-table tbody tr.selected { background: #eef8f2; }
.production-signal-table tbody tr:hover { background: #f6fbf8; }
.production-signal-table tbody tr.signal-missing { color: #7b8580; }
.production-signal-name { display: grid; gap: 4px; width: 100%; max-width: 310px; padding: 0; border: 0; color: #1a2520; background: transparent; text-align: left; cursor: pointer; }
.production-signal-name strong { overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.production-signal-name small { overflow: hidden; color: #76847b; text-overflow: ellipsis; font-size: 9px; }
.production-signal-delta { font-weight: 760; }
.production-signal-delta.up, .production-signal-delta.down { color: #315c67; }
.production-signal-detail { margin-top: 20px; padding: 21px; border: 1px solid #cde4d8; border-radius: 12px; background: linear-gradient(135deg, #f7fbf8 0%, #fff 80%); }
.production-signal-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.production-signal-detail-head h3 { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.production-signal-detail-head p:not(.eyebrow) { margin: 5px 0 0; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.production-signal-detail-head > span { padding: 7px 10px; border-radius: 7px; color: #1f7659; background: #e9f6ed; font-size: 10px; font-weight: 800; white-space: nowrap; }
.production-signal-picker { display: grid; gap: 7px; width: min(340px, 44%); color: #5b6c61; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.production-signal-picker select { width: 100%; min-width: 0; height: 43px; padding: 0 11px; border: 1px solid #bed9c9; border-radius: 8px; color: #17231b; background: #fff; font-size: 12px; font-weight: 650; text-transform: none; letter-spacing: 0; }
.production-signal-picker select:focus-visible { outline: 2px solid #0e8f74; outline-offset: 2px; }
.production-signal-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin-top: 20px; }
.production-signal-stats > div { display: grid; gap: 7px; min-width: 0; padding: 13px; border: 1px solid #e5eee8; border-radius: 9px; background: #fff; }
.production-signal-stats span { color: var(--muted); font-size: 10px; }
.production-signal-stats strong { overflow-wrap: anywhere; font-size: 13px; }
.production-signal-no-data { color: var(--muted); font-size: 12px; }
.production-signal-trend-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 23px; font-size: 12px; }
.production-signal-trend-head span { color: var(--muted); font-size: 10px; }
.production-signal-chart { height: 255px; margin-top: 7px; }
.production-details summary { cursor: pointer; font-size: 15px; font-weight: 800; }
.production-details-body { padding-top: 17px; }
.production-details-body > p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.production-method { margin: 24px 0 0; padding: 18px 20px; border: 1px solid #bee6d8; border-radius: 11px; color: #276552; background: var(--mint-soft); }
.production-method strong { display: block; margin-bottom: 8px; font-size: 12px; }
.production-method p { margin: 0; font-size: 11px; line-height: 1.6; }
.metric-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.production-week-metrics { margin-bottom: 22px; }
.production-week-panel { margin-top: 22px; }
.production-week-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.production-week-days article { display: grid; gap: 7px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.production-week-days span, .production-week-days small { color: var(--muted); font-size: 11px; }
.production-week-days strong { font-size: 12px; }
@media (max-width: 900px) { .production-sections, .finding-list { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .production-intel-grid { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .production-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .production-story-card:first-child { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .production-story-grid { grid-template-columns: 1fr; }
  .production-story-card:first-child { grid-column: auto; }
  .production-story-card { min-height: 0; }
  .production-signal-toolbar { grid-template-columns: 1fr 1fr; }
  .production-signal-toolbar label:first-child { grid-column: 1 / -1; }
  .production-signal-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .production-signal-table-wrap { max-height: none; overflow: visible; border: 0; }
  .production-signal-table, .production-signal-table tbody { display: block; }
  .production-signal-table thead { display: none; }
  .production-signal-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; margin-bottom: 9px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; }
  .production-signal-table td { display: grid; gap: 4px; min-width: 0; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .production-signal-table td:first-child { grid-column: 1 / -1; padding-bottom: 6px; }
  .production-signal-table td::before { content: attr(data-label); color: var(--muted); font-size: 9px; font-weight: 780; text-transform: uppercase; }
  .production-signal-table td:first-child::before { content: none; }
  .production-signal-name { max-width: none; }
  .production-signal-name strong, .production-signal-name small { white-space: normal; }
  .production-heading { align-items: flex-start; }
  .production-hero { align-items: flex-start; padding: 21px; gap: 16px; }
  .production-hero-count { min-width: 64px; font-size: 36px; }
  .production-quality-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-grid-three { grid-template-columns: 1fr; }
}
.executive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; }
.executive-source { min-width: 0; padding: 26px; border: 1px solid #dedfd7; border-radius: 22px; background: #fff; }
.executive-source .panel-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; margin-bottom: 18px; }
.executive-source .panel-header > div { display: contents; }
.executive-source .panel-header h2 { grid-column: 1 / -1; grid-row: 2; margin: 0; padding: 0; line-height: 1.25; }
.executive-source .panel-subtitle { grid-column: 1 / -1; grid-row: 3; min-height: 0; margin: 0; line-height: 1.5; }
.executive-source .eyebrow { grid-column: 1; grid-row: 1; align-self: center; margin: 0; color: #17785e; }
.executive-source .overview-action { grid-column: 2; grid-row: 1; justify-self: end; }
.executive-source h2 { font-size: 22px; }
.executive-source .btn { white-space: nowrap; flex-shrink: 0; }
.executive-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.executive-metric { min-width: 0; padding: 22px 18px; border-radius: 16px; background: #f3f5ef; }
.executive-label { display: block; font-size: 13px; color: #616b64; font-weight: 700; }
.executive-value { display: block; margin: 14px 0; font-size: clamp(23px, 2.4vw, 34px); letter-spacing: -.05em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.executive-comparison { display: flex; align-items: flex-start; flex-direction: column; gap: 7px; font-size: 12px; color: #626c65; }
.executive-change { font-size: 15px; font-weight: 750; }
.executive-change.positive { color: #0b7758; }
.executive-change.negative { color: #b13e4e; }
.executive-metric p { color: #67716b; font-size: 12px; line-height: 1.5; margin: 13px 0 0; }
.executive-metric .executive-prior-range { margin-top: 5px; font-size: 11px; }
.executive-updated { font-size: 12px; color: #737b74; margin: 16px 0 0; }
.overview-production, .overview-data-status { margin-bottom: 24px; }
.overview-production .panel-header, .overview-data-status .panel-header { margin-bottom: 18px; }
.overview-action { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; flex-shrink: 0; min-height: 44px; padding: 7px 8px 7px 16px; border: 1px solid #a34421; border-radius: 12px; background: #a94722; color: #fff; text-decoration: none; font-size: 13px; font-weight: 750; box-shadow: 0 3px 9px rgba(116,51,26,.13); transition: background .18s, border-color .18s; }
.overview-action:hover { background: #85371c; border-color: #85371c; }
.overview-action:focus-visible { outline: 3px solid #a94722; outline-offset: 4px; }
.overview-action-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fff; background: rgba(255,255,255,.16); }
.overview-production .overview-action { margin-left: auto; }
.overview-action-icon svg { width: 18px; height: 18px; }
.overview-refresh-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -8px 0 20px; color: #52695b; font-size: 13px; }
.overview-refresh-status.is-error { padding: 14px 18px; border: 1px solid #e5cba0; border-radius: 12px; background: #fff9ed; color: #795928; }
.geo-grid > article { grid-column: 1 / -1; }
#s-location-drilldown, #k-location-drilldown { scroll-margin-top: 100px; }
#s-location-drilldown:focus, #k-location-drilldown:focus { outline: 2px solid #77b99c; outline-offset: 4px; }
.overview-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.overview-highlight { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 20px; background: #f1f7f2; border-radius: 14px; }
.overview-highlight > span { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; background: #18765d; color: #fff; font-weight: 750; }
.overview-highlight h3 { font-size: 15px; margin: 3px 0 10px; }
.overview-highlight p { font-size: 13px; color: #626d65; margin: 0; line-height: 1.65; overflow-wrap: anywhere; }
.overview-highlight.is-alert { background: #fff2ed; }
.overview-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.location-drilldown-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.location-drilldown-controls label { display: grid; gap: 6px; color: #637168; font-size: 12px; font-weight: 700; }
.location-drilldown-controls select { max-width: 240px; min-height: 42px; border: 1px solid #d9dfd7; border-radius: 9px; padding: 8px 12px; background: #fff; }
.drilldown-more { margin: 18px 0 0; }
.production-live { display: grid; gap: 22px; }
.production-live-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.production-live-heading > div { flex: 1 1 250px; }
.production-live-heading h2 { margin: 4px 0 10px; font-size: 30px; }
.production-live-heading p { color: #69736c; font-size: 13px; }
.production-live-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.production-live-states article { background: #f3f6f0; border-radius: 13px; padding: 18px; min-width: 0; }
.production-live-states article > span { font-size: 12px; color: #5f6a62; }
.production-live-states strong { display: block; margin: 12px 0; font-size: 20px; }
.production-live-states p { margin: 0; font-size: 12px; color: #68766c; }
.production-live-states .is-alert { background: #fff0ec; color: #a13b46; }
.live-fresh { color: #0d6e52; background: #dff6e9; }
@media (max-width: 1200px) {
  .executive-grid { grid-template-columns: minmax(0, 1fr); }
  .overview-highlights { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 650px) {
  .executive-source { padding: 20px; }
  .executive-source .panel-header, .overview-production .panel-header { flex-direction: column; }
  .executive-value { font-size: 26px; }
  .executive-metrics, .overview-status-grid, .production-live-states { grid-template-columns: minmax(0, 1fr); }
  .location-drilldown-controls { width: 100%; }
  .overview-refresh-status { flex-wrap: wrap; }
  .location-drilldown-controls label { width: 100%; }
  .location-drilldown-controls select { width: 100%; max-width: none; }
  .production-tabs { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .production-signal-explorer { padding: 18px; }
  .production-signal-explorer .panel-header { display: grid; }
  .production-signal-toolbar { grid-template-columns: 1fr; }
  .production-signal-toolbar label:first-child { grid-column: auto; }
  .production-signal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .production-signal-detail { padding: 15px; }
  .production-signal-detail-head { flex-direction: column; gap: 9px; }
  .production-signal-picker { width: 100%; }
  .production-hero { flex-direction: column; }
  .production-hero-count { display: flex; gap: 8px; align-items: baseline; }
  .production-section { grid-template-columns: 1fr; }
  .production-section b { grid-column: 1; grid-row: auto; }
  .finding-card { padding: 16px; }
  .gap-list > div { display: grid; }
}