/* ============================================================
   SeedSage Portal — mobile-first, iPhone Safari optimized
   Palette: seed-green #2E7D32 / #6FBF44 · harvest-gold #C9952A / #F0C24B
            soil #14281D · field off-white #F7FBF2
   ============================================================ */

:root {
  --seed-green: #2E7D32;
  --leaf-green: #6FBF44;
  --green-deep: #1F5D24;
  --gold:       #C9952A;
  --gold-light: #F0C24B;
  --soil:       #14281D;
  --field:      #F7FBF2;
  --field-2:    #ECF4E4;

  --ink:        #14281D;
  --ink-soft:   #4C5E50;
  --ink-faint:  #7F9184;
  --line:       #DDE7D2;
  --card-bg:    #FFFFFF;

  --shadow-sm: 0 1px 3px rgba(20,40,29,.08), 0 1px 2px rgba(20,40,29,.06);
  --shadow-md: 0 4px 16px rgba(20,40,29,.10);
  --shadow-lg: 0 10px 30px rgba(20,40,29,.16);

  --radius:    16px;
  --radius-sm: 12px;
  --radius-lg: 22px;

  --tabbar-h: 60px;
  --header-h: 58px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--field);
  background-image:
    radial-gradient(1100px 460px at 50% -8%, rgba(111,191,68,.14), transparent 60%),
    radial-gradient(900px 380px at 100% 110%, rgba(201,149,42,.10), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

/* keep text from auto-resizing on rotate in iOS */
html { -webkit-text-size-adjust: 100%; }

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

button { font-family: inherit; cursor: pointer; }

/* ===================== HEADER ===================== */
.app-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: calc(var(--sat) + 8px) calc(16px + var(--sar)) 8px calc(16px + var(--sal));
  min-height: calc(var(--header-h) + var(--sat));
  background: rgba(247,251,242,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand-logo { height: 38px; width: auto; }
.header-user { text-align: right; line-height: 1.15; min-width: 0; }
.user-greeting { display: block; font-weight: 700; font-size: 14px; color: var(--seed-green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48vw; }
.user-org { display: block; font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48vw; }

/* ===================== SCREENS (gate / boot) ===================== */
.screen {
  min-height: calc(100vh - var(--header-h) - var(--sat));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px calc(22px + var(--sar)) 24px calc(22px + var(--sal));
}

/* boot */
.boot-mark-wrap { width: 96px; height: 96px; margin-bottom: 18px; }
.boot-mark { width: 96px; height: 96px; animation: sprout 1.8s ease-in-out infinite; }
.boot-text { color: var(--ink-soft); font-size: 15px; margin: 0; letter-spacing: .2px; }
@keyframes sprout {
  0%,100% { transform: translateY(0) scale(1); opacity: .9; }
  50%     { transform: translateY(-6px) scale(1.04); opacity: 1; }
}

/* gate */
.gate-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 34px 26px 30px;
  max-width: 420px; width: 100%;
  text-align: center;
}
.gate-mark { width: 82px; height: 82px; margin: 0 auto 16px; }
.gate-title { font-size: 22px; font-weight: 800; margin: 0 0 12px; color: var(--soil); letter-spacing: -.3px; }
.gate-text { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 18px; }
.gate-tagline { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin: 0; }
.gate-card.is-error { border-color: #E5B9B0; }

/* ===================== MAIN / PANELS ===================== */
.app-main { display: block; }
.tab-panel { animation: fadeUp .26s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.panel-inner {
  padding: 18px calc(16px + var(--sar)) 8px calc(16px + var(--sal));
  max-width: 640px; margin: 0 auto;
}
.panel-h1 { font-size: 25px; font-weight: 800; letter-spacing: -.4px; color: var(--soil); margin: 4px 0 6px; }
.panel-h2 { font-size: 17px; font-weight: 700; color: var(--soil); margin: 26px 0 12px; }
.panel-sub { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 20px; }
.panel-head-row { display: flex; align-items: center; justify-content: space-between; }

.tabbar-spacer { height: calc(var(--tabbar-h) + var(--sab) + 14px); }

/* ===================== FORM (ASK) ===================== */
.ask-form { display: flex; flex-direction: column; }
.field-label { font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 16px 0 7px; }
.field-label:first-child { margin-top: 0; }
.field-optional { font-weight: 500; color: var(--ink-faint); }

.field-textarea, .field-input, .field-select {
  width: 100%;
  font-family: inherit; font-size: 16px; /* >=16px stops iOS zoom-on-focus */
  color: var(--ink);
  background: var(--card-bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 14px;
  appearance: none; -webkit-appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field-textarea { resize: vertical; min-height: 116px; line-height: 1.45; }
.field-textarea:focus, .field-input:focus, .field-select:focus {
  outline: none;
  border-color: var(--leaf-green);
  box-shadow: 0 0 0 3px rgba(111,191,68,.22);
}
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--seed-green);
  border-bottom: 2px solid var(--seed-green);
  transform: rotate(45deg); pointer-events: none;
}
.field-select { padding-right: 40px; }

.btn-send { margin-top: 24px; }

/* ===================== BUTTONS ===================== */
.btn-primary {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 0 20px;
  font-size: 17px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--leaf-green), var(--seed-green));
  border: none; border-radius: var(--radius);
  box-shadow: 0 6px 16px rgba(46,125,50,.30);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn-primary:active { transform: translateY(1px) scale(.99); box-shadow: 0 3px 10px rgba(46,125,50,.28); }
.btn-primary:disabled { opacity: .6; box-shadow: none; }
.btn-primary.is-busy .btn-label { opacity: .5; }

.btn-spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.45); border-top-color: #fff;
  animation: spin .7s linear infinite;
  position: absolute; right: 22px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-secondary {
  display: inline-block; margin-top: 18px;
  min-height: 48px; padding: 0 26px; line-height: 48px;
  font-size: 15px; font-weight: 700; color: var(--seed-green);
  background: var(--field-2); border: 1.5px solid var(--line);
  border-radius: var(--radius);
}
.btn-secondary:active { background: #E2EDD6; }

.btn-ghost {
  border: 1.5px solid var(--line); background: var(--card-bg);
  color: var(--seed-green); border-radius: 12px;
  width: 42px; height: 42px; font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-ghost:active { background: var(--field-2); }
.btn-refresh.is-spinning span { display: inline-block; animation: spin .8s linear infinite; }

/* ===================== SAGE CHAT (primary) ===================== */
/* When the Sage tab is active the page itself doesn't scroll —
   the chat thread is its own scroll container so the composer can
   stay pinned above the tab bar. */
body.chat-active { overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.chat-panel {
  position: fixed;
  top: calc(var(--header-h) + var(--sat));
  left: 0; right: 0;
  /* stop above the fixed bottom tab bar (which owns the safe-area inset) */
  bottom: calc(var(--tabbar-h) + var(--sab));
  display: flex; flex-direction: column;
  animation: fadeUp .26s ease both;
}

/* sub-header strip inside the chat panel */
.chat-head {
  flex: none;
  background: rgba(247,251,242,.9);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.chat-head-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  max-width: 720px; margin: 0 auto;
  padding: 9px calc(14px + var(--sar)) 9px calc(14px + var(--sal));
}
.chat-head-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-head-mark { width: 32px; height: 32px; flex: none; filter: drop-shadow(0 1px 2px rgba(20,40,29,.15)); }
.chat-head-meta { line-height: 1.15; min-width: 0; }
.chat-head-name { display: block; font-size: 15.5px; font-weight: 800; color: var(--soil); letter-spacing: -.2px; }
.chat-head-sub { display: block; font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-new-btn {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 13px 0 11px;
  font-size: 13px; font-weight: 700; color: var(--seed-green);
  background: var(--card-bg); border: 1.5px solid var(--line);
  border-radius: 999px; transition: background .14s ease, border-color .14s ease;
}
.chat-new-btn:active { background: var(--field-2); border-color: var(--leaf-green); }
.chat-new-btn svg { color: var(--seed-green); }

/* chat header actions (History + New) */
.chat-head-actions { display: flex; align-items: center; gap: 7px; flex: none; }
.chat-head-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px 0 10px;
  font-size: 13px; font-weight: 700; color: var(--ink-soft);
  background: var(--card-bg); border: 1.5px solid var(--line);
  border-radius: 999px; transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.chat-head-btn:active { background: var(--field-2); border-color: var(--leaf-green); color: var(--seed-green); }
.chat-head-btn svg { color: var(--ink-faint); }
/* hide text labels on the narrowest phones so the header never crowds */
@media (max-width: 360px) {
  .chat-head-btn-label, .chat-new-label { display: none; }
  .chat-head-btn, .chat-new-btn { padding: 0 11px; }
}

/* back link on the tab-less History panel */
.panel-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 10px; padding: 7px 13px 7px 9px;
  font-size: 13px; font-weight: 700; color: var(--seed-green);
  background: var(--field-2); border: 1.5px solid var(--line);
  border-radius: 999px; transition: background .14s ease, border-color .14s ease;
}
.panel-back:active { background: #E2EDD6; border-color: var(--leaf-green); }
.panel-back svg { color: var(--seed-green); }

/* scroll region holds the thread + empty-state intro */
.chat-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px calc(14px + var(--sar)) 8px calc(14px + var(--sal));
}
.chat-thread {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 720px; margin: 0 auto;
}

/* message rows */
.msg { display: flex; max-width: 100%; animation: msgIn .24s ease both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.msg-user { justify-content: flex-end; }
.msg-col-user { align-items: flex-end; max-width: 84%; }
.msg-user .msg-bubble {
  max-width: 100%;
  background: linear-gradient(135deg, var(--seed-green), var(--green-deep));
  color: #fff;
  border-radius: 20px; border-bottom-right-radius: 7px;
  padding: 11px 15px 12px;
  box-shadow: 0 3px 12px rgba(46,125,50,.22);
}

.msg-sage { justify-content: flex-start; gap: 9px; align-items: flex-end; }
.msg-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--card-bg); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 2px;
}
.msg-avatar img { width: 26px; height: 26px; }
.msg-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: calc(100% - 40px); }
.msg-sage .msg-bubble {
  background: var(--card-bg); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 20px; border-bottom-left-radius: 7px;
  padding: 12px 15px;
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}

.msg-text { font-size: 15.5px; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; }
.msg-user .msg-text { white-space: pre-wrap; }

/* markdown inside Sage bubbles */
.msg-text.md p { margin: 0 0 9px; }
.msg-text.md p:last-child { margin-bottom: 0; }
.msg-text.md p.md-h { font-weight: 800; color: var(--soil); margin-top: 4px; }
.msg-text.md ul, .msg-text.md ol { margin: 4px 0 9px; padding-left: 22px; }
.msg-text.md ul:last-child, .msg-text.md ol:last-child { margin-bottom: 0; }
.msg-text.md li { margin: 3px 0; line-height: 1.45; }
.msg-text.md ul li::marker { color: var(--leaf-green); }
.msg-text.md ol li::marker { color: var(--seed-green); font-weight: 700; }
.msg-text.md strong { font-weight: 800; color: var(--soil); }
.msg-text.md em { font-style: italic; }
.msg-text.md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  background: var(--field-2); color: var(--green-deep);
  padding: 1px 6px; border-radius: 6px;
  word-break: break-word;
}

/* meta line under a Sage reply */
.msg-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 7px; padding-left: 2px;
}
.msg-meta-user { justify-content: flex-end; }
.backend-ind { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--ink-faint); }
.backend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.backend-ind.is-live .backend-dot { background: var(--leaf-green); box-shadow: 0 0 0 3px rgba(111,191,68,.18); }
.backend-ind.is-live .backend-txt { color: var(--seed-green); }
.backend-ind.is-captured .backend-dot { background: var(--gold); box-shadow: 0 0 0 3px rgba(201,149,42,.16); }
.backend-ind.is-captured .backend-txt { color: var(--gold); }

/* failed-send retry under a user bubble */
.msg-retry {
  background: rgba(192,73,44,.08); border: 1px solid rgba(192,73,44,.3);
  color: #B4502E; font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px;
}
.msg-retry:active { background: rgba(192,73,44,.16); }

/* thinking indicator */
.msg-bubble.is-thinking { padding: 13px 16px; }
.thinking { display: flex; align-items: center; gap: 10px; }
.thinking-dots { display: inline-flex; gap: 5px; }
.thinking-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--leaf-green);
  animation: thinkPulse 1.25s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: .18s; }
.thinking-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes thinkPulse {
  0%, 80%, 100% { transform: scale(.7); opacity: .45; }
  40% { transform: scale(1); opacity: 1; }
}
.thinking-label { font-size: 13.5px; color: var(--ink-soft); font-weight: 600; }

/* empty-state intro + starter chips */
.chat-intro {
  max-width: 560px; margin: 8px auto 0;
  padding: 22px 6px 8px; text-align: center;
  animation: fadeUp .3s ease both;
}
.chat-intro-mark-wrap { width: 76px; height: 76px; margin: 0 auto 16px; }
.chat-intro-mark { width: 76px; height: 76px; animation: sprout 2.4s ease-in-out infinite; }
.chat-intro-title { font-size: 24px; font-weight: 800; color: var(--soil); letter-spacing: -.4px; margin: 0 0 10px; }
.chat-intro-text { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 22px; }
.starter-chips { display: flex; flex-direction: column; gap: 10px; }
.starter-chip {
  width: 100%; text-align: left;
  background: var(--card-bg); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
  font-size: 15px; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 10px;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.starter-chip::before {
  content: "🌱"; font-size: 15px; flex: none;
}
.starter-chip:active { transform: scale(.985); border-color: var(--leaf-green); box-shadow: var(--shadow-md); }
.starter-chip:disabled { opacity: .55; }

/* composer pinned at the bottom of the chat panel */
.composer {
  flex: none;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
  padding: 10px calc(12px + var(--sar)) 10px calc(12px + var(--sal));
  box-shadow: 0 -3px 18px rgba(20,40,29,.06);
}
.composer-inner {
  display: flex; align-items: flex-end; gap: 9px;
  max-width: 720px; margin: 0 auto;
}
.composer-input {
  flex: 1 1 auto;
  font-family: inherit;
  font-size: 16px;               /* >=16px: stops iOS zoom-on-focus */
  line-height: 1.4;
  color: var(--ink);
  background: var(--field);
  border: 1.5px solid var(--line);
  border-radius: 22px;
  padding: 11px 16px;
  resize: none;
  max-height: 140px; min-height: 46px;
  appearance: none; -webkit-appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.composer-input:focus {
  outline: none;
  border-color: var(--leaf-green);
  box-shadow: 0 0 0 3px rgba(111,191,68,.2);
  background: var(--card-bg);
}
.composer-send {
  flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--leaf-green), var(--seed-green));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(46,125,50,.3);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.composer-send:active { transform: scale(.92); }
.composer-send:disabled { opacity: .4; box-shadow: none; }
.composer-send-ico { width: 22px; height: 22px; transform: translateX(1px); }
.composer-hint {
  max-width: 720px; margin: 7px auto 0;
  font-size: 11px; color: var(--ink-faint); text-align: center;
  line-height: 1.3;
}

/* ===================== CHAT (HISTORY) ===================== */
.filter-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(135deg, rgba(240,194,75,.18), rgba(201,149,42,.12));
  border: 1px solid rgba(201,149,42,.35);
  border-radius: 12px; padding: 9px 12px; margin: 4px 0 14px;
}
.filter-banner-text { font-size: 13.5px; color: var(--soil); }
.filter-clear { background: none; border: none; color: var(--gold); font-weight: 700; font-size: 13px; padding: 4px; }

.chat-list { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 4px; }

.bubble-row { display: flex; flex-direction: column; max-width: 86%; }
.bubble-row.side-them { align-self: flex-start; align-items: flex-start; }
.bubble-row.side-us   { align-self: flex-end;   align-items: flex-end; }

.bubble {
  position: relative;
  padding: 11px 14px 12px;
  border-radius: 18px;
  font-size: 15px; line-height: 1.46;
  box-shadow: var(--shadow-sm);
  word-wrap: break-word; overflow-wrap: anywhere;
}
.side-them .bubble {
  background: var(--card-bg); color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
}
.side-us .bubble {
  background: linear-gradient(135deg, var(--seed-green), var(--green-deep));
  color: #fff;
  border-bottom-right-radius: 6px;
}
.side-us .bubble.kind-ack {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--soil);
}
.bubble-subject { font-weight: 800; font-size: 13.5px; margin-bottom: 4px; display: block; opacity: .95; }
.bubble-text { white-space: pre-wrap; }

.bubble-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 5px; padding: 0 4px;
  font-size: 11.5px; color: var(--ink-faint);
}
.side-us .bubble-meta { justify-content: flex-end; }
.dept-chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px;
  background: var(--field-2); color: var(--green-deep);
  border: 1px solid var(--line);
}
.chip-time { color: var(--ink-faint); }

/* ===================== DEPARTMENTS ===================== */
.dept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dept-card {
  text-align: left;
  background: var(--card-bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 14px 13px;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 118px;
}
.dept-card:active { transform: scale(.98); border-color: var(--leaf-green); box-shadow: var(--shadow-md); }
.dept-card .dc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dc-label { font-size: 13.5px; font-weight: 700; color: var(--soil); line-height: 1.25; }
.dc-count {
  flex: none;
  font-size: 18px; font-weight: 800; color: var(--seed-green);
  background: var(--field-2); border-radius: 10px;
  min-width: 38px; height: 34px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dc-bar { height: 7px; border-radius: 999px; background: var(--field-2); overflow: hidden; }
.dc-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--leaf-green), var(--seed-green)); border-radius: 999px; }
.dc-stats { display: flex; gap: 12px; font-size: 11.5px; }
.dc-stats .s-open { color: var(--gold); font-weight: 700; }
.dc-stats .s-res { color: var(--ink-faint); font-weight: 600; }

.proj-list { display: flex; flex-direction: column; gap: 9px; }
.proj-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--card-bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-sm);
}
.proj-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.proj-badges { display: flex; gap: 8px; flex: none; }
.pb { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pb-count { background: var(--field-2); color: var(--green-deep); }
.pb-open { background: rgba(240,194,75,.22); color: var(--gold); }

/* ===================== RESULTS ===================== */
.totals-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 18px; }
.total-card {
  background: var(--card-bg); border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 6px 11px;
  text-align: center; box-shadow: var(--shadow-sm);
}
.total-num { display: block; font-size: 26px; font-weight: 800; color: var(--seed-green); line-height: 1; }
.total-card:nth-child(2) .total-num { color: var(--gold); }
.total-lbl { display: block; font-size: 11px; font-weight: 600; color: var(--ink-faint); margin-top: 6px; text-transform: uppercase; letter-spacing: .4px; }

.chart-card {
  background: var(--card-bg); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 16px 14px 14px;
  box-shadow: var(--shadow-sm); margin-bottom: 14px;
}
.chart-title { font-size: 15px; font-weight: 700; color: var(--soil); margin: 0 0 12px; }
.chart-host { position: relative; width: 100%; min-height: 200px; }
.chart-host-donut { max-width: 320px; margin: 0 auto; }
.chart-empty { display: flex; align-items: center; justify-content: center; min-height: 180px; color: var(--ink-faint); font-size: 14px; text-align: center; }

/* ===================== STATES (loading/empty/error) ===================== */
.state-block {
  text-align: center; padding: 46px 20px; color: var(--ink-soft);
}
.state-block .state-mark { width: 56px; height: 56px; margin: 0 auto 14px; opacity: .85; }
.state-block .state-title { font-size: 16px; font-weight: 700; color: var(--soil); margin: 0 0 6px; }
.state-block .state-text { font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.state-block.is-error .state-title { color: #B4502E; }

.skel { background: linear-gradient(90deg, #EEF3E7 25%, #F6FAF0 37%, #EEF3E7 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: 14px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skel-bubble { height: 58px; width: 70%; margin-bottom: 14px; }
.skel-bubble.alt { width: 60%; margin-left: auto; }
.skel-card { height: 118px; }

/* ===================== MY AIBS — CONTROL COCKPIT ===================== */
.cockpit-hero { margin: 2px 0 18px; }
.cockpit-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gold);
  background: linear-gradient(135deg, rgba(240,194,75,.18), rgba(201,149,42,.12));
  border: 1px solid rgba(201,149,42,.3);
  padding: 4px 11px; border-radius: 999px; margin-bottom: 10px;
}
.cockpit-h1 { margin: 2px 0 6px; }
.cockpit-sub { margin-bottom: 4px; }

.cockpit-card {
  background: var(--card-bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px 16px 18px;
  margin-top: 16px;
  animation: fadeUp .26s ease both;
}
.cockpit-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cockpit-card-title { font-size: 18px; font-weight: 800; color: var(--soil); letter-spacing: -.3px; margin: 0; }
.cockpit-card-sub { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin: 6px 0 16px; }
.cockpit-refresh {
  flex: none; border: 1.5px solid var(--line); background: var(--card-bg);
  color: var(--seed-green); border-radius: 10px;
  width: 36px; height: 36px; font-size: 17px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.cockpit-refresh:active { background: var(--field-2); }
.cockpit-refresh.is-spinning { animation: spin .8s linear infinite; }

/* ---- Section 1: Journey timeline / stepper ---- */
.journey { display: flex; flex-direction: column; }
.journey-step {
  position: relative;
  display: flex; gap: 14px;
  padding-bottom: 20px;
}
.journey-step:last-child { padding-bottom: 2px; }
/* the rail */
.journey-rail { position: relative; flex: none; width: 26px; display: flex; flex-direction: column; align-items: center; }
.journey-node {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
  border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line);
  z-index: 1; flex: none;
}
.journey-step:not(:last-child) .journey-line {
  flex: 1 1 auto; width: 2.5px; background: var(--line); margin: 3px 0 -1px; border-radius: 2px;
}
/* node states */
.js-live   .journey-node { background: linear-gradient(135deg, var(--leaf-green), var(--seed-green)); box-shadow: 0 0 0 1.5px var(--seed-green), 0 2px 6px rgba(46,125,50,.3); }
.js-live   .journey-line { background: linear-gradient(var(--leaf-green), var(--line)); }
.js-progress .journey-node { background: linear-gradient(135deg, var(--gold-light), var(--gold)); box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 6px rgba(201,149,42,.16); animation: nodePulse 2s ease-in-out infinite; }
.js-next   .journey-node { background: var(--card-bg); color: var(--seed-green); box-shadow: 0 0 0 2px var(--seed-green); }
.js-planned .journey-node { background: var(--field-2); color: var(--ink-faint); box-shadow: 0 0 0 1.5px var(--line); }
@keyframes nodePulse {
  0%,100% { box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 5px rgba(201,149,42,.18); }
  50%     { box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 9px rgba(201,149,42,.04); }
}

.journey-body { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.journey-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.journey-title { font-size: 15px; font-weight: 800; color: var(--soil); letter-spacing: -.2px; }
.journey-detail { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin: 5px 0 0; }
/* aspirational hardware steps get a subtle glow */
.journey-step.is-aspirational .journey-title::after { content: " ✦"; color: var(--gold); }
.journey-step.is-aspirational .journey-body {
  background: linear-gradient(135deg, rgba(240,194,75,.07), rgba(111,191,68,.05));
  border: 1px dashed rgba(201,149,42,.35);
  border-radius: 14px; padding: 10px 12px; margin-top: -2px;
}
.journey-step.is-aspirational .journey-detail { margin-top: 4px; }

.journey-badge {
  flex: none; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}
.jb-live    { background: rgba(46,125,50,.12); color: var(--seed-green); border: 1px solid rgba(46,125,50,.25); }
.jb-progress{ background: rgba(201,149,42,.16); color: var(--gold); border: 1px solid rgba(201,149,42,.3); }
.jb-next    { background: var(--card-bg); color: var(--seed-green); border: 1.5px solid var(--seed-green); }
.jb-planned { background: var(--field-2); color: var(--ink-faint); border: 1px solid var(--line); }

.journey-want {
  margin-top: 11px;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 16px;
  font-size: 13.5px; font-weight: 700; color: var(--seed-green);
  background: var(--field-2); border: 1.5px solid var(--line);
  border-radius: 999px;
  transition: transform .12s ease, background .14s ease, border-color .14s ease;
}
.journey-want:active { transform: scale(.97); }
.journey-want:hover { border-color: var(--leaf-green); }
.journey-want.is-requested {
  background: linear-gradient(135deg, rgba(111,191,68,.16), rgba(46,125,50,.1));
  border-color: var(--leaf-green); color: var(--green-deep);
  cursor: default;
}
.journey-want.is-busy { opacity: .6; }
.journey-want .jw-star { font-size: 14px; }

/* ---- Section 2: Needs ---- */
.needs-filter { display: flex; gap: 7px; margin-bottom: 14px; flex-wrap: wrap; }
.needs-filter-btn {
  font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
  background: var(--field-2); border: 1.5px solid transparent;
  padding: 7px 13px; border-radius: 999px;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.needs-filter-btn.is-active { background: var(--card-bg); color: var(--seed-green); border-color: var(--seed-green); }
.needs-filter-btn:active { transform: scale(.97); }

.needs-list { display: flex; flex-direction: column; gap: 12px; }
.need-item {
  border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 13px 13px 12px; background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  border-left-width: 4px;
}
.need-item.pri-high   { border-left-color: #C0492C; }
.need-item.pri-normal { border-left-color: var(--leaf-green); }
.need-item.pri-low    { border-left-color: var(--ink-faint); }
.need-text { font-size: 14.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.need-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.need-source {
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  color: var(--ink-faint); padding: 2px 8px; border-radius: 999px; background: var(--field-2);
}
.need-saved {
  font-size: 11.5px; font-weight: 700; color: var(--seed-green);
  display: inline-flex; align-items: center; gap: 4px;
  opacity: 0; transition: opacity .2s ease; margin-left: auto;
}
.need-saved.show { opacity: 1; }
.need-saved.is-error { color: #C0492C; }

.need-controls {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
  margin-top: 12px;
}
.need-controls .ctl-full { grid-column: 1 / -1; }
.ctl-label { display: block; font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 5px; }
.ctl-select {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--card-bg); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 32px 10px 12px;
  appearance: none; -webkit-appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ctl-select:focus { outline: none; border-color: var(--leaf-green); box-shadow: 0 0 0 3px rgba(111,191,68,.2); }
.ctl-wrap { position: relative; }
.ctl-wrap::after {
  content: ""; position: absolute; right: 13px; top: 50%;
  width: 8px; height: 8px; margin-top: -2px;
  border-right: 2px solid var(--seed-green); border-bottom: 2px solid var(--seed-green);
  transform: rotate(45deg); pointer-events: none;
}
.ctl-select.sel-high   { color: #C0492C; font-weight: 700; }
.ctl-select.sel-resolved { color: var(--seed-green); font-weight: 700; }

/* ---- Section 3: Projects ---- */
.projects-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.project-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--field); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
}
.project-main { min-width: 0; }
.project-name { font-size: 14.5px; font-weight: 700; color: var(--soil); }
.project-desc { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-pri {
  flex: none; font-size: 11px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}
.project-pri.pri-high   { background: rgba(192,73,44,.12); color: #C0492C; }
.project-pri.pri-normal { background: var(--field-2); color: var(--green-deep); }
.project-pri.pri-low    { background: var(--field-2); color: var(--ink-faint); }
.project-form { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; }
.project-form .btn-send,
.settings-form .btn-send,
.invite-form .btn-send { margin-top: 18px; }

/* ---- Section 4: Settings ---- */
.settings-form { display: flex; flex-direction: column; }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 18px; cursor: pointer;
}
.toggle-copy { min-width: 0; }
.toggle-title { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.toggle-desc { display: block; font-size: 12.5px; color: var(--ink-faint); line-height: 1.4; margin-top: 2px; }
.toggle-switch { flex: none; position: relative; }
.toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-track {
  display: block; width: 50px; height: 30px; border-radius: 999px;
  background: var(--line); transition: background .2s ease; position: relative;
}
.toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(20,40,29,.25); transition: transform .2s ease;
}
.toggle-input:checked + .toggle-track { background: linear-gradient(135deg, var(--leaf-green), var(--seed-green)); }
.toggle-input:checked + .toggle-track .toggle-thumb { transform: translateX(20px); }
.toggle-input:focus-visible + .toggle-track { box-shadow: 0 0 0 3px rgba(111,191,68,.3); }

/* ---- Section 5: Invite ---- */
.invite-form { display: flex; flex-direction: column; }
.invite-result {
  margin-top: 16px;
  background: linear-gradient(135deg, rgba(111,191,68,.1), rgba(46,125,50,.06));
  border: 1.5px solid rgba(46,125,50,.25);
  border-radius: var(--radius); padding: 14px;
  animation: fadeUp .26s ease both;
}
.invite-result-msg { font-size: 14px; font-weight: 700; color: var(--green-deep); margin: 0 0 10px; }
.invite-link-row { display: flex; gap: 8px; align-items: stretch; }
.invite-link {
  flex: 1 1 auto; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--ink);
  background: var(--card-bg); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.invite-copy {
  flex: none; min-height: 0;
  font-size: 13.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--leaf-green), var(--seed-green));
  border: none; border-radius: var(--radius-sm); padding: 0 16px;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 3px 10px rgba(46,125,50,.25);
  transition: transform .12s ease;
}
.invite-copy:active { transform: scale(.95); }
.invite-copy.is-copied { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--soil); }

/* cockpit skeletons */
.skel-journey { height: 64px; margin-bottom: 14px; }
.skel-row { height: 52px; margin-bottom: 10px; }

/* small empty/inline notes inside cockpit cards */
.cockpit-empty {
  text-align: center; padding: 22px 14px; color: var(--ink-soft);
  font-size: 14px; line-height: 1.5;
}
.cockpit-empty .ce-mark { width: 44px; height: 44px; margin: 0 auto 10px; opacity: .8; }
.cockpit-inline-error {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(192,73,44,.06); border: 1px solid rgba(192,73,44,.25);
  border-radius: 12px; padding: 11px 13px; font-size: 13.5px; color: #B4502E;
}
.cockpit-retry {
  flex: none; font-size: 12.5px; font-weight: 700; color: #B4502E;
  background: rgba(192,73,44,.1); border: 1px solid rgba(192,73,44,.3);
  border-radius: 999px; padding: 6px 13px;
}

/* ===================== DAILY HUDDLE ===================== */
.huddle-hero { position: relative; margin: 2px 0 16px; }
.huddle-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--seed-green);
  background: linear-gradient(135deg, rgba(111,191,68,.16), rgba(46,125,50,.1));
  border: 1px solid rgba(46,125,50,.22);
  padding: 4px 11px; border-radius: 999px; margin-bottom: 10px;
}
.huddle-h1 { margin: 2px 0 6px; }
.huddle-sub { margin-bottom: 4px; padding-right: 46px; }
.huddle-refresh { position: absolute; top: 0; right: 0; }

/* summary stat strip */
.huddle-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 6px; }
.huddle-stat {
  background: var(--card-bg); border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 6px 11px;
  text-align: center; box-shadow: var(--shadow-sm);
}
.huddle-stat-num { display: block; font-size: 26px; font-weight: 800; color: var(--seed-green); line-height: 1; }
.huddle-stat-lbl { display: block; font-size: 10.5px; font-weight: 600; color: var(--ink-faint); margin-top: 6px; text-transform: uppercase; letter-spacing: .3px; }
.huddle-stat.is-alert { border-color: rgba(192,73,44,.5); background: linear-gradient(135deg, rgba(240,194,75,.14), rgba(192,73,44,.06)); }
.huddle-stat.is-alert .huddle-stat-num { color: #C0492C; }
.skel-stat { height: 74px; }

/* huddle cards (lighter than cockpit cards) */
.huddle-card {
  background: var(--card-bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px 15px 16px;
  margin-top: 14px;
  animation: fadeUp .26s ease both;
}
.huddle-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.huddle-card-title { font-size: 17px; font-weight: 800; color: var(--soil); letter-spacing: -.3px; margin: 0; }
.huddle-card-sub { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: -6px 0 14px; }
.huddle-todo-count { font-size: 12px; font-weight: 700; color: var(--ink-faint); flex: none; }

/* all-clear / quiet empty state inside a huddle card */
.huddle-clear { text-align: center; padding: 18px 12px 14px; }
.huddle-clear .ce-mark { width: 42px; height: 42px; margin: 0 auto 10px; opacity: .8; }
.huddle-clear-title { font-size: 15px; font-weight: 800; color: var(--seed-green); margin: 0 0 4px; }
.huddle-clear-text { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0; }

/* needs attention rows */
.huddle-attn { display: flex; flex-direction: column; gap: 10px; }
.attn-row {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1.5px solid var(--line); border-left-width: 4px;
  border-radius: var(--radius-sm); padding: 11px 12px; background: var(--card-bg);
}
.attn-row.attn-overdue { border-left-color: #C0492C; background: linear-gradient(135deg, rgba(240,194,75,.1), rgba(192,73,44,.05)); }
.attn-row.attn-need.pri-high   { border-left-color: #C0492C; }
.attn-row.attn-need.pri-normal { border-left-color: var(--leaf-green); }
.attn-row.attn-need.pri-low    { border-left-color: var(--ink-faint); }
.attn-ico { flex: none; font-size: 15px; line-height: 1.4; color: var(--gold); width: 18px; text-align: center; }
.attn-row.attn-overdue .attn-ico { color: #C0492C; }
.attn-row.attn-need .attn-ico { color: var(--leaf-green); font-size: 20px; }
.attn-body { min-width: 0; flex: 1 1 auto; }
.attn-text { font-size: 14.5px; line-height: 1.45; color: var(--ink); font-weight: 600; word-wrap: break-word; overflow-wrap: anywhere; }
.attn-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 7px; }
.attn-tag {
  font-size: 11px; font-weight: 700; color: var(--green-deep);
  background: var(--field-2); border: 1px solid var(--line);
  padding: 2px 9px; border-radius: 999px;
}
.attn-flag, .attn-pri {
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(192,73,44,.12); color: #C0492C; border: 1px solid rgba(192,73,44,.25);
}

/* what's next chips */
.huddle-next { display: flex; flex-wrap: wrap; gap: 9px; }
.next-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, rgba(240,194,75,.12), rgba(201,149,42,.08));
  border: 1.5px solid rgba(201,149,42,.3);
  color: var(--soil); border-radius: 999px;
  padding: 9px 14px; font-size: 13px; font-weight: 700; text-align: left;
  transition: transform .12s ease, border-color .14s ease;
}
.next-chip:active { transform: scale(.97); }
.next-chip:hover { border-color: var(--gold); }
.next-chip-arrow { color: var(--gold); font-weight: 800; flex: none; }
.next-chip-label { min-width: 0; }

/* recent activity */
.huddle-recent { display: flex; flex-direction: column; gap: 12px; }
.recent-row { display: flex; gap: 10px; align-items: flex-start; }
.recent-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: var(--ink-faint); }
.recent-dot.recent-sage   { background: var(--leaf-green); box-shadow: 0 0 0 3px rgba(111,191,68,.16); }
.recent-dot.recent-email  { background: var(--gold); box-shadow: 0 0 0 3px rgba(201,149,42,.16); }
.recent-dot.recent-portal { background: var(--seed-green); box-shadow: 0 0 0 3px rgba(46,125,50,.14); }
.recent-body { min-width: 0; flex: 1 1 auto; }
.recent-text { font-size: 14px; line-height: 1.45; color: var(--ink); word-wrap: break-word; overflow-wrap: anywhere; }
.recent-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; color: var(--ink-faint); }
.recent-src { font-weight: 700; color: var(--ink-soft); }
.recent-sep { opacity: .6; }

/* ---- to-do list (interactive) ---- */
.todo-form { margin-bottom: 14px; }
.todo-add-row { display: flex; align-items: stretch; gap: 9px; }
.todo-add-input {
  flex: 1 1 auto; min-width: 0;
  font-family: inherit; font-size: 16px; /* >=16px stops iOS zoom-on-focus */
  color: var(--ink);
  background: var(--field);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px;
  appearance: none; -webkit-appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.todo-add-input:focus { outline: none; border-color: var(--leaf-green); box-shadow: 0 0 0 3px rgba(111,191,68,.2); background: var(--card-bg); }
.todo-add-btn {
  flex: none; width: 48px; border-radius: var(--radius-sm);
  border: none; color: #fff;
  background: linear-gradient(135deg, var(--leaf-green), var(--seed-green));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(46,125,50,.28);
  transition: transform .12s ease, opacity .12s ease;
}
.todo-add-btn:active { transform: scale(.94); }
.todo-add-btn.is-busy { opacity: .55; }
.todo-add-opts { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.todo-opt-pri { flex: none; width: 116px; }
.todo-mini-select, .todo-mini-input {
  font-family: inherit; font-size: 14px; color: var(--ink-soft);
  background: var(--card-bg); border: 1.5px solid var(--line); border-radius: 10px;
  padding: 9px 11px;
  appearance: none; -webkit-appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.todo-mini-select { width: 100%; padding-right: 30px; }
.todo-opt-pri::after { right: 12px; }
.todo-mini-input { flex: 1 1 auto; min-width: 90px; }
.todo-opt-due { flex: none; }
.todo-mini-select:focus, .todo-mini-input:focus { outline: none; border-color: var(--leaf-green); box-shadow: 0 0 0 3px rgba(111,191,68,.18); }

.todo-list { display: flex; flex-direction: column; gap: 10px; }
.todo-item {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1.5px solid var(--line); border-left-width: 4px;
  border-radius: var(--radius-sm); padding: 12px 12px;
  background: var(--card-bg); box-shadow: var(--shadow-sm);
  transition: opacity .25s ease, background .2s ease;
}
.todo-item.pri-high   { border-left-color: #C0492C; }
.todo-item.pri-normal { border-left-color: var(--leaf-green); }
.todo-item.pri-low    { border-left-color: var(--ink-faint); }
.todo-item.is-done { opacity: .62; background: var(--field); }
.todo-check {
  flex: none; width: 26px; height: 26px; margin-top: 1px;
  border: 2px solid var(--line); border-radius: 8px;
  background: var(--card-bg); color: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}
.todo-check:active { transform: scale(.9); }
.todo-check.is-checked {
  background: linear-gradient(135deg, var(--leaf-green), var(--seed-green));
  border-color: var(--seed-green); color: #fff;
}
.todo-body { min-width: 0; flex: 1 1 auto; }
.todo-text { font-size: 14.5px; line-height: 1.45; color: var(--ink); word-wrap: break-word; overflow-wrap: anywhere; }
.todo-item.is-done .todo-text { text-decoration: line-through; text-decoration-color: var(--ink-faint); color: var(--ink-soft); }
.todo-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.todo-pri {
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; border: 1px solid transparent;
  transition: transform .12s ease;
}
.todo-pri:active { transform: scale(.94); }
.todo-pri.pri-high   { background: rgba(192,73,44,.12); color: #C0492C; border-color: rgba(192,73,44,.28); }
.todo-pri.pri-normal { background: var(--field-2); color: var(--green-deep); border-color: var(--line); }
.todo-pri.pri-low    { background: var(--field-2); color: var(--ink-faint); border-color: var(--line); }
.todo-meta-chip {
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
  background: var(--field-2); border: 1px solid var(--line);
  padding: 2px 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px;
}
.todo-due.is-overdue { background: rgba(192,73,44,.12); color: #C0492C; border-color: rgba(192,73,44,.25); }
.todo-saved {
  font-size: 11px; font-weight: 700; color: var(--seed-green);
  display: inline-flex; align-items: center; gap: 4px;
  opacity: 0; transition: opacity .2s ease; margin-left: auto;
}
.todo-saved.show { opacity: 1; }

/* ===================== PLANT (lots · QC · recipes) ===================== */
.plant-hero { position: relative; margin: 2px 0 14px; }
.plant-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--green-deep);
  background: linear-gradient(135deg, rgba(111,191,68,.18), rgba(46,125,50,.1));
  border: 1px solid rgba(46,125,50,.22);
  padding: 4px 11px; border-radius: 999px; margin-bottom: 10px;
}
.plant-h1 { margin: 2px 0 6px; }
.plant-sub { margin-bottom: 4px; padding-right: 46px; }
.plant-refresh { position: absolute; top: 0; right: 0; }

/* sub-tab pills */
.plant-subnav {
  display: flex; gap: 7px; margin: 4px 0 16px;
  background: var(--field-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px;
}
.plant-subtab {
  flex: 1 1 0; min-width: 0;
  font-size: 13px; font-weight: 700; color: var(--ink-soft);
  background: none; border: none; border-radius: 999px;
  padding: 9px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.plant-subtab.is-active { background: var(--card-bg); color: var(--seed-green); box-shadow: var(--shadow-sm); }
.plant-subtab:active { transform: scale(.98); }

.plant-section { animation: fadeUp .22s ease both; }

/* dashboard stat strip (6 cards) */
.plant-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 16px; }
.plant-stat.is-good .huddle-stat-num, .plant-stat.is-good.huddle-stat .huddle-stat-num { color: var(--seed-green); }
.plant-stat.is-good { border-color: rgba(46,125,50,.3); }

/* mini charts side by side on wider phones, stacked on small */
.plant-charts { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 4px; }
.plant-chart-card { margin-bottom: 0; }
.plant-chart-card .chart-host { min-height: 180px; }
@media (min-width: 560px) {
  .plant-charts { grid-template-columns: 1fr 1fr; }
}

/* generic plant card (matches huddle card weight) */
.plant-card {
  background: var(--card-bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px 15px;
  margin-top: 14px;
  animation: fadeUp .26s ease both;
}
.plant-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.plant-card-title { font-size: 17px; font-weight: 800; color: var(--soil); letter-spacing: -.3px; margin: 0; }
.plant-card-title.is-flag { color: #C0492C; }
.plant-card-sub { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 14px; }

/* below-85% germ flag list */
.plant-flag-card { border-color: rgba(192,73,44,.4); background: linear-gradient(135deg, rgba(240,194,75,.08), rgba(192,73,44,.04)); }
.plant-flag-count {
  flex: none; font-size: 12px; font-weight: 800; color: #fff;
  background: #C0492C; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
}
.lowgerm-list { display: flex; flex-direction: column; gap: 8px; }
.lowgerm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left;
  background: var(--card-bg); border: 1.5px solid rgba(192,73,44,.3); border-left-width: 4px; border-left-color: #C0492C;
  border-radius: var(--radius-sm); padding: 11px 13px;
  transition: transform .12s ease, border-color .14s ease;
}
.lowgerm-row:active { transform: scale(.985); }
.lowgerm-main { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.lowgerm-lot { font-size: 14.5px; font-weight: 800; color: var(--soil); }
.lowgerm-crop { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lowgerm-pct { flex: none; font-size: 15px; font-weight: 800; color: #C0492C; }

/* add-lot / add-recipe collapsible toggle */
.plant-add-toggle {
  display: flex; align-items: center; gap: 9px; width: 100%;
  font-size: 15px; font-weight: 800; color: var(--soil); letter-spacing: -.2px;
  background: none; border: none; padding: 2px 0; text-align: left;
}
.plant-add-toggle-ico {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 400; line-height: 1; color: #fff;
  background: linear-gradient(135deg, var(--leaf-green), var(--seed-green));
  box-shadow: 0 3px 8px rgba(46,125,50,.25);
  transition: transform .18s ease;
}
.plant-add-toggle.is-open .plant-add-toggle-ico { transform: rotate(45deg); }

/* plant forms */
.plant-form { display: flex; flex-direction: column; margin-top: 14px; }
.plant-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plant-form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.plant-form-grid > div { min-width: 0; }
.plant-notes { min-height: 84px; }
.plant-toggle { margin-top: 0; align-self: end; padding-bottom: 4px; }
@media (max-width: 360px) {
  .plant-form-grid-3 { grid-template-columns: 1fr 1fr; }
}

/* ---- lots list ---- */
.lots-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.lot-card {
  border: 1.5px solid var(--line); border-left-width: 5px;
  border-radius: var(--radius); background: var(--card-bg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
/* status accent on the left rail */
.lot-card.status-intake    { border-left-color: #9CCB6A; }
.lot-card.status-cleaning  { border-left-color: var(--leaf-green); }
.lot-card.status-testing   { border-left-color: var(--gold); }
.lot-card.status-certified { border-left-color: var(--seed-green); }
.lot-card.status-released  { border-left-color: var(--green-deep); }
.lot-card.status-hold      { border-left-color: #C0492C; }

.lot-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; text-align: left;
  padding: 13px 13px 11px;
}
.lot-id-col { flex: 1 1 auto; min-width: 0; }
.lot-title-row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.lot-no { font-size: 16px; font-weight: 800; color: var(--soil); letter-spacing: -.2px; }
.lot-crop-chip {
  font-size: 11.5px; font-weight: 700; color: var(--green-deep);
  background: var(--field-2); border: 1px solid var(--line);
  padding: 2px 9px; border-radius: 999px;
  max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lot-metrics { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.lot-metric {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 11.5px; background: var(--field-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 3px 8px;
}
.lot-metric-lbl { color: var(--ink-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; font-size: 10px; }
.lot-metric-val { color: var(--ink); font-weight: 800; font-size: 12.5px; }
.lot-metric.is-low { background: rgba(192,73,44,.1); border-color: rgba(192,73,44,.3); }
.lot-metric.is-low .lot-metric-val { color: #C0492C; }
.lot-chev { flex: none; color: var(--ink-faint); transition: transform .2s ease; }
.lot-chev.is-open { transform: rotate(180deg); color: var(--seed-green); }

.lot-status-row {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 0 13px 12px;
}
.lot-status-wrap { flex: none; width: 150px; }
.lot-status-select { font-weight: 700; }
.lot-status-select.status-certified, .lot-status-select.status-released { color: var(--seed-green); }
.lot-status-select.status-hold { color: #C0492C; }
.lot-status-select.status-testing { color: var(--gold); }
.lot-bits { display: flex; gap: 6px; flex-wrap: wrap; }
.lot-bit {
  font-size: 10.5px; font-weight: 700; color: var(--ink-soft);
  background: var(--field-2); border: 1px solid var(--line);
  padding: 3px 8px; border-radius: 999px;
}
.lot-saved {
  font-size: 11.5px; font-weight: 700; color: var(--seed-green);
  display: inline-flex; align-items: center; gap: 4px;
  opacity: 0; transition: opacity .2s ease; margin-left: auto;
}
.lot-saved.show { opacity: 1; }

/* expanded per-lot QC region */
.lot-qc-region {
  border-top: 1px solid var(--line);
  background: var(--field);
  padding: 13px 13px 14px;
  animation: fadeUp .2s ease both;
}
.lot-qc-head { margin-bottom: 10px; }
.lot-qc-title { font-size: 13px; font-weight: 800; color: var(--soil); text-transform: uppercase; letter-spacing: .4px; }
.lot-qc-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 13px; }
.lot-qc-empty { font-size: 13px; color: var(--ink-faint); margin: 2px 0 4px; }

/* QC row (used in expanded region + flat feed) */
.qc-row {
  background: var(--card-bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px; box-shadow: var(--shadow-sm);
}
.qc-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qc-type { font-size: 13.5px; font-weight: 800; color: var(--soil); }
.qc-value { font-size: 13px; font-weight: 700; color: var(--green-deep); background: var(--field-2); border-radius: 7px; padding: 2px 8px; }
.qc-pill {
  margin-left: auto; flex: none;
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px; border: 1px solid transparent;
}
.qc-pill.qc-pass    { background: rgba(46,125,50,.12); color: var(--seed-green); border-color: rgba(46,125,50,.28); }
.qc-pill.qc-fail    { background: rgba(192,73,44,.12); color: #C0492C; border-color: rgba(192,73,44,.28); }
.qc-pill.qc-pending { background: rgba(201,149,42,.14); color: var(--gold); border-color: rgba(201,149,42,.3); }
.qc-row-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 6px; font-size: 11.5px; color: var(--ink-faint); }
.qc-lot-link { font-size: 11.5px; font-weight: 700; color: var(--seed-green); background: none; border: none; padding: 0; text-decoration: underline; }
.qc-sep { opacity: .6; }
.qc-by { font-weight: 600; }
.qc-notes { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; margin-top: 6px; word-wrap: break-word; overflow-wrap: anywhere; }

/* inline add-test form (compact) */
.lot-qc-form { display: flex; flex-direction: column; gap: 10px; border-top: 1px dashed var(--line); padding-top: 13px; }
.qc-inline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.qc-inline-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.qc-field { display: flex; flex-direction: column; min-width: 0; }
.qc-field-lbl { font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px; }
.qc-mini { font-size: 16px; padding: 9px 11px; border-radius: 10px; }
.qc-field .select-wrap .field-select.qc-mini { padding-right: 32px; }
.qc-add-btn { margin-top: 2px; min-height: 46px; }
@media (max-width: 360px) {
  .qc-inline-grid-3 { grid-template-columns: 1fr 1fr; }
}

/* ---- QC sub-tab feed ---- */
.qc-feed { display: flex; flex-direction: column; gap: 10px; }

/* ---- recipe memory ---- */
.recipe-search-row { margin: 4px 0 14px; }
.recipe-search {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--card-bg); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; appearance: none; -webkit-appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.recipe-search:focus { outline: none; border-color: var(--leaf-green); box-shadow: 0 0 0 3px rgba(111,191,68,.2); }

.recipes-list { display: flex; flex-direction: column; gap: 12px; }
.recipe-card {
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--card-bg); box-shadow: var(--shadow-sm);
  padding: 14px 14px 13px;
}
.recipe-card.is-golden {
  border-color: rgba(201,149,42,.5);
  background: linear-gradient(135deg, rgba(240,194,75,.1), rgba(201,149,42,.04));
  box-shadow: 0 4px 16px rgba(201,149,42,.14);
}
.recipe-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.recipe-head-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.recipe-machine { font-size: 16px; font-weight: 800; color: var(--soil); letter-spacing: -.2px; word-wrap: break-word; overflow-wrap: anywhere; }
.recipe-crop { font-size: 12.5px; font-weight: 600; color: var(--ink-faint); }
.recipe-star {
  flex: none; font-size: 24px; line-height: 1; color: var(--ink-faint);
  background: none; border: none; padding: 0 2px;
  transition: transform .12s ease, color .14s ease;
}
.recipe-star:active { transform: scale(.86); }
.recipe-star.is-on { color: var(--gold); text-shadow: 0 1px 4px rgba(201,149,42,.4); }
.recipe-settings {
  font-size: 13.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap;
  word-wrap: break-word; overflow-wrap: anywhere;
  background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; margin: 11px 0 0;
}
.recipe-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.recipe-row { display: flex; gap: 8px; font-size: 13px; line-height: 1.45; }
.recipe-row-lbl { flex: none; width: 76px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .3px; font-size: 11px; padding-top: 1px; }
.recipe-row-val { color: var(--ink-soft); word-wrap: break-word; overflow-wrap: anywhere; }
.recipe-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.recipe-rating { display: inline-flex; gap: 2px; }
.rating-star {
  font-size: 19px; line-height: 1; color: var(--line);
  background: none; border: none; padding: 1px 2px;
  transition: transform .12s ease, color .12s ease;
}
.rating-star.is-filled { color: var(--gold); }
.rating-star:active { transform: scale(.85); }
.recipe-meta { font-size: 11.5px; color: var(--ink-faint); margin-left: auto; }

/* plant empty state */
.plant-empty { text-align: center; padding: 30px 18px; color: var(--ink-soft); }
.plant-empty .ce-mark { width: 52px; height: 52px; margin: 0 auto 12px; opacity: .82; }
.plant-empty-title { font-size: 16px; font-weight: 800; color: var(--soil); margin: 0 0 6px; }
.plant-empty-text { font-size: 13.5px; line-height: 1.55; margin: 0 0 4px; }

/* ---- facility map link (Plant tab → facility builder page) ---- */
.plant-facility-link {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(111,191,68,.12), rgba(46,125,50,.06));
  border: 1.5px solid rgba(46,125,50,.22);
  border-radius: var(--radius); padding: 12px 14px; margin: 0 0 14px;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, border-color .14s ease, box-shadow .14s ease;
}
.plant-facility-link:active { transform: scale(.99); border-color: var(--leaf-green); box-shadow: var(--shadow-md); }
.plant-facility-ico {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--card-bg); border: 1px solid var(--line);
}
.plant-facility-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plant-facility-title { font-size: 15px; font-weight: 800; color: var(--soil); letter-spacing: -.2px; }
.plant-facility-sub { font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plant-facility-arrow { flex: none; font-size: 22px; font-weight: 700; color: var(--seed-green); line-height: 1; }

/* ===================== SORTER ===================== */
.sorter-scope { margin: 4px 0 14px; }
.sorter-scope .field-label { margin-bottom: 7px; }
.sorter-stats { grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
.sorter-analysis { animation: fadeUp .22s ease both; }
.sorter-skel-card { height: 120px; margin-top: 4px; }

/* drift banner */
.sorter-drift {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: var(--radius); padding: 13px 14px; margin: 0 0 14px;
}
.sorter-drift.is-warn {
  border: 1.5px solid rgba(201,149,42,.55);
  background: linear-gradient(135deg, rgba(240,194,75,.18), rgba(201,149,42,.08));
}
.sorter-drift.is-stable {
  align-items: center;
  border: 1.5px solid rgba(46,125,50,.3);
  background: linear-gradient(135deg, rgba(111,191,68,.12), rgba(46,125,50,.05));
}
.sorter-drift-ico { flex: none; font-size: 18px; line-height: 1.3; }
.sorter-drift.is-warn .sorter-drift-ico { color: #B07A12; }
.sorter-drift.is-stable .sorter-drift-ico { color: var(--seed-green); }
.sorter-drift-body { min-width: 0; }
.sorter-drift-text { font-size: 13.5px; line-height: 1.5; font-weight: 700; color: var(--soil); }
.sorter-drift.is-stable .sorter-drift-text { font-weight: 700; color: var(--green-deep); }
.sorter-drift-cta { font-size: 12.5px; color: #8A6410; font-weight: 600; margin-top: 3px; }

/* golden recipe summary */
.sorter-golden {
  border: 1.5px solid rgba(201,149,42,.5); border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(240,194,75,.1), rgba(201,149,42,.04));
  box-shadow: 0 4px 16px rgba(201,149,42,.12);
  padding: 13px 14px; margin: 0 0 14px;
}
.sorter-golden.is-empty {
  display: flex; align-items: center; gap: 9px;
  border: 1.5px dashed var(--line); background: var(--field-2);
  box-shadow: none;
}
.sorter-golden-star { flex: none; font-size: 18px; color: var(--gold); line-height: 1; }
.sorter-golden.is-empty .sorter-golden-star { color: var(--ink-faint); }
.sorter-golden-empty-text { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.sorter-golden-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sorter-golden-title { font-size: 14.5px; font-weight: 800; color: var(--soil); }
.sorter-golden-machine { font-size: 12px; font-weight: 600; color: var(--ink-faint); }
.sorter-golden-settings { margin-top: 10px; }

/* recent runs */
.sorter-runs-card { margin-top: 14px; }
.sorter-run-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.sorter-run {
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card-bg); padding: 11px 12px;
}
.sorter-run-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.sorter-run-reject { font-size: 14.5px; font-weight: 800; color: var(--soil); }
.sorter-run-variety { font-size: 12.5px; color: var(--ink-soft); }
.sorter-run-time { font-size: 11.5px; color: var(--ink-faint); margin-left: auto; }
.sorter-run-bits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sorter-run-bit {
  font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--field-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 9px;
}
.sorter-run-settings {
  font-size: 12.5px; line-height: 1.45; color: var(--ink); white-space: pre-wrap;
  word-wrap: break-word; overflow-wrap: anywhere;
  background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 10px; margin-top: 9px;
}
.sorter-run-notes { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); margin-top: 7px; }

/* Ask Sage to read the calibration */
.sorter-brief-card { margin-top: 14px; }
.sorter-brief-btn { margin-top: 4px; }
.sorter-brief-out { margin-top: 4px; }
.sorter-brief-thinking {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin-top: 14px; padding: 13px 14px;
  background: var(--field-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.sorter-brief-result {
  margin-top: 14px; padding: 14px 15px;
  background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.sorter-brief-foot { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.sorter-brief-msg {
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px; padding: 13px 14px;
  font-size: 13.5px; line-height: 1.45; color: var(--ink-soft);
  background: var(--field-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.sorter-brief-msg-ico { flex: none; font-size: 16px; }

/* ===================== TAB BAR ===================== */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--line);
  padding-bottom: var(--sab);
  box-shadow: 0 -2px 18px rgba(20,40,29,.06);
}
.tabbar.tabbar-4 { grid-template-columns: repeat(4, 1fr); }
.tab-btn {
  border: none; background: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--tabbar-h); min-width: 0; padding: 0 2px;
  color: var(--ink-faint);
  font-size: 11px; font-weight: 600;
  transition: color .14s ease;
}
.tab-ico { width: 24px; height: 24px; fill: none; stroke: currentColor; flex: none; }
.tab-btn .tab-text { letter-spacing: .2px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-btn.is-active { color: var(--seed-green); }
.tab-btn.is-active .tab-ico { stroke: var(--seed-green); }
.tab-btn:active { color: var(--green-deep); }
/* keep all 5 labels legible on the narrowest phones */
@media (max-width: 360px) {
  .tab-btn { font-size: 10px; }
  .tab-ico { width: 22px; height: 22px; }
}

/* ===================== TOAST ===================== */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(20px);
  bottom: calc(var(--tabbar-h) + var(--sab) + 16px); z-index: 70;
  max-width: 90vw;
  background: var(--soil); color: #fff;
  padding: 13px 20px; border-radius: 14px;
  font-size: 14.5px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  display: flex; align-items: center; gap: 9px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.is-success { background: linear-gradient(135deg, var(--seed-green), var(--green-deep)); }
.toast.is-error { background: linear-gradient(135deg, #C0492C, #963419); }
.toast::before { content: "🌱"; font-size: 16px; }
.toast.is-error::before { content: "⚠️"; }

/* ===================== misc ===================== */
[hidden] { display: none !important; }

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

/* slightly larger layout on bigger phones / landscape */
@media (min-width: 430px) {
  .panel-h1 { font-size: 27px; }
  .total-num { font-size: 28px; }
}