/* ============================================================
   Sortr — only the swipe-/queue-/digest-specific bits.
   Everything else (cards, buttons, page-header, form-group, etc.)
   is inherited from style.css so dark mode and the existing
   visual language carry over for free.
   ============================================================ */

/* -- Settings → AI Training submenu -- */
.sortr-ai-training-list { display: flex; flex-direction: column; gap: 0; max-width: 600px; }
.sortr-ai-training-list .settings-menu-card + .settings-menu-card { margin-top: 0; }
.sortr-ai-list-section-label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--text-muted); text-transform: uppercase;
  margin: 22px 4px 10px;
}
.sortr-ai-card-locked { opacity: .55; pointer-events: none; }
.sortr-ai-card-locked .settings-menu-card-arrow { display: none; }

/* Inline badges (e.g. count of items to review). justify-content + tabular-nums
   keep the count visually centered + consistently-spaced for any digit count
   (1, 12, 1,200, etc.). white-space:nowrap stops big numbers from wrapping. */
.sortr-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--accent); color: var(--card-dark);
}
.sortr-pill-muted { background: var(--bg); color: var(--text-secondary); }
.sortr-pill-blue  { background: #dbeafe; color: #1d4ed8; }
.sortr-pill-amber { background: #fef3c7; color: #92400e; }
.sortr-pill-red   { background: #fee2e2; color: #991b1b; }
.sortr-pill-purple{ background: #ede9fe; color: #6d28d9; }
.sortr-pill-green { background: #dcfce7; color: #166534; }

/* -- Sortr swipe takeover layout -- */
.sortr-takeover-active .mobile-topbar,
.sortr-takeover-active .mobile-nav,
.sortr-takeover-active .sidebar { display: none !important; }
/* The main-content and .view normally pad for the now-hidden top bar +
   bottom nav. During takeover those paddings would push the shell off
   the bottom of the viewport (and waste space at the top). Strip them
   so the 100dvh shell sits flush against the device chrome. */
body.sortr-takeover-active { overflow: hidden; }
body.sortr-takeover-active .main-content { padding: 0 !important; }
body.sortr-takeover-active #view-settings { padding: 0 !important; }

.sortr-shell {
  position: relative; background: var(--bg);
  /* Bound to exact viewport so the card-deck (flex:1) can't grow past it.
     dvh tracks iOS Safari chrome shifts. mobile-nav is hidden during
     Sortr takeover so bottom only clears the home-indicator safe area. */
  height: 100dvh;
  padding: 6px 16px calc(env(safe-area-inset-bottom, 0px) + 8px);
  display: flex; flex-direction: column; gap: 10px;
  max-width: 520px; margin: 0 auto;
  overflow: hidden;
}

.sortr-header {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.sortr-back {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--card-bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.sortr-back:hover { background: var(--bg); }
.sortr-title-block { flex: 1; min-width: 0; }
.sortr-title { font-size: 20px; font-weight: 700; line-height: 1.1; }
.sortr-subtitle { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.sortr-gear,
.sortr-undo {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.sortr-undo:hover,
.sortr-gear:hover { color: var(--text-primary); background: var(--bg); }

/* Queue meter card */
.sortr-meter {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.sortr-meter-count { font-size: 22px; font-weight: 700; min-width: 36px; }
.sortr-meter-text { flex: 1; font-size: 13px; color: var(--text-secondary); }
.sortr-meter-bar {
  flex: 2; height: 6px; background: var(--border-light);
  border-radius: 999px; overflow: hidden;
}
.sortr-meter-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }

/* Email card — grows to fill the remaining viewport instead of using a
   fixed min-height. Floor keeps it sane on tiny screens. */
.sortr-card-deck {
  position: relative;
  flex: 1 1 auto;
  min-height: 360px;
  margin-top: 0;
}
.sortr-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  transition: transform .25s ease, opacity .25s ease;
  will-change: transform;
  touch-action: none;
}
.sortr-card.is-dragging { transition: none; }
.sortr-card.is-flying-out { transition: transform .35s ease, opacity .35s ease; }
.sortr-card-prev { transform: scale(.96) translateY(8px); opacity: .7; pointer-events: none; }

.sortr-agent-strip {
  padding: 12px 14px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-light);
}
.sortr-agent-strip .label-line {
  display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-secondary);
}
.sortr-agent-strip .label-line .dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
}
.sortr-agent-strip .label-line .conf {
  margin-left: auto; color: var(--text-secondary); font-weight: 600;
}
.sortr-agent-guess {
  margin-top: 4px;
  font-size: 18px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: baseline; gap: 8px;
}
.sortr-agent-guess .sub { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.sortr-conf-bar {
  margin-top: 8px; height: 4px; background: var(--border-light);
  border-radius: 999px; overflow: hidden;
}
.sortr-conf-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }

/* Tinted backgrounds per label */
.sortr-tint-lead     .sortr-agent-strip { background: #fef2f0; }
.sortr-tint-lead     .sortr-conf-fill   { background: #c2410c; }
.sortr-tint-lead     .label-line .dot   { background: #c2410c; }
.sortr-tint-finance  .sortr-agent-strip { background: #fef3c7; }
.sortr-tint-finance  .sortr-conf-fill   { background: #b45309; }
.sortr-tint-finance  .label-line .dot   { background: #b45309; }
.sortr-tint-existing .sortr-agent-strip { background: #dbeafe; }
.sortr-tint-existing .sortr-conf-fill   { background: #1d4ed8; }
.sortr-tint-existing .label-line .dot   { background: #1d4ed8; }
.sortr-tint-other    .sortr-agent-strip { background: var(--border-light); }
.sortr-tint-other    .sortr-conf-fill   { background: var(--text-muted); }
.sortr-tint-other    .label-line .dot   { background: var(--text-muted); }

.sortr-unread-pill {
  position: absolute; top: 12px; right: 12px;
  background: #2563eb; color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  z-index: 2;
}
.sortr-unread-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff;
}

.sortr-client-pill {
  position: absolute; top: 12px; left: 12px;
  background: #ecfccb; color: #365314;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px;
  z-index: 2;
}
.sortr-client-pill-inferred {
  background: #fef3c7; color: #92400e;
}
.sortr-conflict-pill {
  position: absolute; top: 38px; left: 12px;
  background: #fee2e2; color: #991b1b;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px;
  z-index: 2;
}

.sortr-email-body {
  padding: 14px 16px 0;
  flex: 1;
  overflow-y: auto;          /* scrollable email content */
  -webkit-overflow-scrolling: touch;
  position: relative;
  font-size: 14px; line-height: 1.5;
  touch-action: pan-y;        /* native vertical scroll wins over card swipe */
  overscroll-behavior: contain;
}
.sortr-email-body .field-label {
  font-size: 12px; color: var(--text-secondary); margin-top: 4px;
}
.sortr-email-body .from-name { font-size: 16px; font-weight: 700; }
.sortr-email-body .from-addr { color: var(--text-secondary); font-size: 12px; }
.sortr-email-body .subject {
  font-size: 16px; font-weight: 700; margin: 14px 0 10px; line-height: 1.3;
}
.sortr-email-body .body-text {
  white-space: pre-wrap;
  /* Full content rendered; parent .sortr-email-body handles the scroll. */
}

/* Direction hints at the bottom of the card — plus-sign layout that
   mirrors the swipe directions: up=existing, left=finance, right=lead,
   down=other. Three rows so OTHER can sit visually below the others. */
.sortr-card-hints {
  padding: 14px 18px 20px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  align-items: center; justify-items: center;
  gap: 4px 0;
  border-top: 1px solid var(--border-light);
}
.sortr-card-hints .hint {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-secondary);
}
.sortr-card-hints .hint-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.sortr-hint-lead .hint-icon     { background: #fee2e2; color: #c2410c; }
.sortr-hint-finance .hint-icon  { background: #fef3c7; color: #b45309; }
.sortr-hint-existing .hint-icon { background: #dbeafe; color: #1d4ed8; }
.sortr-hint-other .hint-icon    { background: var(--border-light); color: var(--text-secondary); }

.sortr-hint-existing { grid-column: 2; grid-row: 1; }
.sortr-hint-finance  { grid-column: 1; grid-row: 2; }
.sortr-hint-lead     { grid-column: 3; grid-row: 2; }
.sortr-hint-other    { grid-column: 2; grid-row: 3; }

/* Mid-swipe stamp */
.sortr-stamp {
  position: absolute; top: 22px;
  font-size: 28px; font-weight: 800; letter-spacing: .04em;
  border: 3px solid currentColor; border-radius: 8px;
  padding: 4px 12px;
  opacity: 0; transform: rotate(-8deg);
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 3;
}
.sortr-stamp-right { right: 22px; transform: rotate(12deg); }
.sortr-stamp-left  { left: 22px;  transform: rotate(-12deg); }
.sortr-stamp.sortr-stamp-confirm { color: #16a34a; }
.sortr-stamp.sortr-stamp-correct { color: #d97706; }

/* Sub-classify bottom sheet (Lead good/bad and Other variants) */
.sortr-sheet-overlay {
  position: fixed; inset: 0; background: rgba(17,19,24,.55);
  z-index: 200; display: flex; align-items: flex-end; justify-content: center;
  animation: sortr-fade-in .22s ease;
}
.sortr-sheet {
  background: var(--card-bg);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  width: 100%; max-width: 520px;
  padding: 22px 22px 28px;
  animation: sortr-slide-up .28s cubic-bezier(.22,.7,.3,1);
}
.sortr-sheet h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.sortr-sheet .sortr-sheet-sub { color: var(--text-secondary); font-size: 13px; margin-bottom: 22px; }

.sortr-sheet-options-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  align-items: start; padding: 12px 0 8px;
}
.sortr-sheet-options-4 {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px 0; padding: 8px 0;
  align-items: start; justify-items: center;
}
.sortr-sheet-options-4 .sortr-sub-opt:nth-child(1) { grid-column: 2; grid-row: 1; } /* client comm */
.sortr-sheet-options-4 .sortr-sub-opt:nth-child(2) { grid-column: 1; grid-row: 2; } /* spam */
.sortr-sheet-options-4 .sortr-sub-opt:nth-child(3) { grid-column: 3; grid-row: 2; } /* scheduling */
.sortr-sheet-options-4 .sortr-sub-opt:nth-child(4) { grid-column: 2; grid-row: 2; } /* personal */

.sortr-sub-opt {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; color: var(--text-primary);
  width: 100%; max-width: 130px; padding: 0;
  text-align: center;
}
.sortr-sub-opt-circle {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.sortr-sub-opt-good   .sortr-sub-opt-circle { background: #dcfce7; }
.sortr-sub-opt-bad    .sortr-sub-opt-circle { background: #fee2e2; }
.sortr-sub-opt-spam   .sortr-sub-opt-circle { background: var(--border-light); }
.sortr-sub-opt-comm   .sortr-sub-opt-circle { background: #dbeafe; }
.sortr-sub-opt-sched  .sortr-sub-opt-circle { background: #fef3c7; }
.sortr-sub-opt-pers   .sortr-sub-opt-circle { background: var(--border-light); }
.sortr-sub-opt-label { font-size: 13px; font-weight: 600; line-height: 1.3; }
.sortr-sub-opt-hint  { font-size: 11px; color: var(--text-secondary); line-height: 1.3; }

/* "Are you sure?" disagreement card */
.sortr-disagree-card {
  border: 1px solid #d97706;
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 0; overflow: hidden;
}
.sortr-disagree-card .banner {
  background: #fef3c7;
  padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.5; color: #78350f;
}
.sortr-disagree-card .banner-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: #d97706; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.sortr-disagree-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 14px 16px; border-top: 1px solid var(--border-light);
}

/* Inbox-zero / empty state */
.sortr-empty {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 40px 20px 8px;
}
.sortr-empty-check {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--accent); color: var(--card-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700;
}
.sortr-empty h2 { font-size: 22px; font-weight: 700; }
.sortr-empty p  { color: var(--text-secondary); text-align: center; max-width: 320px; }
.sortr-empty-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  width: 100%; margin-top: 8px;
}
.sortr-empty-stat {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.sortr-empty-stat .label {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-secondary);
}
.sortr-empty-stat .value {
  font-size: 24px; font-weight: 700; margin-top: 6px;
}
.sortr-empty-stat .delta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.sortr-recent-learned {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; width: 100%;
}
.sortr-recent-learned .label {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px;
}

/* Mark-as-read sheet rows */
.sortr-mar-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border-light);
}
.sortr-mar-row:last-of-type { border-bottom: none; }
.sortr-mar-row .icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.sortr-mar-row.is-default .icon { background: #dcfce7; color: #16a34a; }
.sortr-mar-row.is-leave  .icon { background: #dbeafe; color: #2563eb; }
.sortr-mar-row .body { flex: 1; }
.sortr-mar-row .title { font-weight: 600; }
.sortr-mar-row .desc  { font-size: 12px; color: var(--text-secondary); }
.sortr-mar-row .badge {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  background: var(--accent); color: var(--card-dark);
  padding: 4px 8px; border-radius: 6px;
}

/* Weekly Evals page */
.sortr-evals-stat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 18px;
}
.sortr-evals-stat {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
}
.sortr-evals-stat .label {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-secondary);
}
.sortr-evals-stat .value {
  font-size: 26px; font-weight: 700; margin-top: 6px;
}
.sortr-evals-stat .delta {
  font-size: 11px; color: var(--text-secondary); margin-top: 2px;
}
.sortr-evals-stat .delta-up   { color: #16a34a; }
.sortr-evals-stat .delta-down { color: #b91c1c; }

.sortr-proposal-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
}
.sortr-proposal-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; margin-bottom: 12px;
}
.sortr-proposal-head .counter { margin-left: auto; color: var(--text-muted); font-weight: 600; }
.sortr-proposal-rationale { font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
.sortr-proposal-rationale strong { font-weight: 600; }
.sortr-proposal-email {
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: 10px; padding: 12px; margin-bottom: 14px;
}
.sortr-proposal-email .from { font-size: 13px; font-weight: 600; }
.sortr-proposal-email .subject { font-size: 13px; margin-top: 2px; }
.sortr-proposal-email .preview { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.sortr-proposal-actions {
  display: flex; gap: 8px;
}
.sortr-proposal-actions button { flex: 1; }
.sortr-proposal-actions .more {
  flex: 0 0 auto; width: 44px;
  background: var(--card-bg); color: var(--text-secondary);
  border: 1px solid var(--border);
}

.sortr-evals-context-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
}
.sortr-evals-context-card .header {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; margin-bottom: 8px;
}
.sortr-evals-context-card .header .meta {
  margin-left: auto; font-size: 11px; color: var(--text-muted); font-weight: 500;
}
.sortr-evals-context-card ul { list-style: none; padding: 0; margin: 0; }
.sortr-evals-context-card ul li {
  font-size: 13px; padding: 4px 0; color: var(--text-secondary);
}

/* Animations */
@keyframes sortr-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sortr-slide-up { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Desktop: show "open on phone" notice when entering Sortr swipe */
@media (min-width: 768px) {
  .sortr-mobile-only-notice {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px; max-width: 520px;
    margin: 40px auto; text-align: center;
  }
  .sortr-mobile-only-notice h2 { margin-bottom: 6px; }
  .sortr-mobile-only-notice p  { color: var(--text-secondary); }
}