:root {
  --bg: #f6f7f9;
  --card: #fff;
  --ink: #1c1e22;
  --muted: #6b7280;
  --accent: #1f3a5f;
  --accent-hover: #2a4f80;
  --border: #e4e7ec;
  --ok-bg: #e6f4ea;
  --ok-ink: #1e6b3a;
  --pending-bg: #fff4d6;
  --pending-ink: #7a5a00;
  --danger: #b42318;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, sans-serif;
}

.topbar {
  background: var(--accent);
  color: #fff;
}

.topbar-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  height: 36px;
  width: auto;
  display: block;
}

.brand-text { line-height: 1; }
.brand-tool { color: #888; font-weight: normal; margin-left: 4px; }

nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

nav a, nav .who {
  color: #cfd8e3;
  text-decoration: none;
  font-size: 14px;
}

nav a:hover { color: #fff; }

nav .who { font-weight: 500; color: #fff; }

/* "Tools" dropdown menu in the header (2026-05-05 operator feedback:
   inline nav got too long once we had ≥4 tools; collapsed to a
   single button that drops a panel of grouped + separator-divided
   links). Built on native <details>/<summary> so the open/close
   state is browser-managed; small JS in base.html handles
   click-outside-to-close. */
nav.topbar-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.tools-menu {
  position: relative;
}
.tools-menu-button {
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  list-style: none;          /* hide default marker */
  user-select: none;
  transition: background 0.12s;
}
.tools-menu-button::-webkit-details-marker { display: none; }
.tools-menu-button:hover { background: rgba(255, 255, 255, 0.1); }
.tools-menu[open] .tools-menu-button {
  background: rgba(255, 255, 255, 0.12);
}
.tools-menu .caret {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  vertical-align: middle;
  transition: transform 0.15s;
}
.tools-menu[open] .caret { transform: rotate(180deg); }

/* Drop panel: positioned absolute under the button, white bg, gray
   border, big enough click targets, separator divider between SEC
   group and IR group. */
.tools-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  padding: 4px 0;
  z-index: 1000;
}
.tools-menu-item {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
}
.tools-menu-item:hover {
  background: #f3f6fa;
  color: var(--accent);
}
.tools-menu-separator {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 4px 0;
}

form.inline { display: inline; margin: 0; }

button.linkish {
  background: transparent;
  border: 0;
  color: #cfd8e3;
  cursor: pointer;
  font: inherit;
  padding: 0;
}
button.linkish:hover { color: #fff; }

.container {
  max-width: 1000px;
  margin: 24px auto;
  padding: 0 20px;
}

.flashes {
  background: var(--ok-bg);
  color: var(--ok-ink);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0 0 16px;
  list-style: none;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 22px;
  margin-bottom: 20px;
}

.card.narrow { max-width: 480px; margin-left: auto; margin-right: auto; }

h1 { margin: 0 0 12px; font-size: 22px; }
h2 { margin: 0 0 10px; font-size: 18px; }

.muted { color: var(--muted); }
.small { font-size: 13px; }

.stack > * + * { margin-top: 12px; }

label {
  display: block;
  font-weight: 500;
}

label input[type=text],
label input[type=email],
label input[type=number],
label input[type=date],
label textarea,
label select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

label textarea { resize: vertical; min-height: 44px; }

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

fieldset legend {
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
}

.inline-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 18px;
  font-weight: 400;
}

.checkbox {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-weight: 400;
}

.follow-up {
  margin-top: 8px;
  padding: 10px 12px;
  background: #f9fafb;
  border-left: 3px solid var(--accent);
  border-radius: 4px;
}
.follow-up[hidden] { display: none; }

.form-section { padding: 8px 0 16px; border-bottom: 1px solid var(--border); }
.form-section:last-child { border-bottom: 0; }

.field { margin-top: 14px; }

.actions { margin-top: 20px; }

button.primary,
.btn {
  background: var(--accent);
  color: #fff;
  border: 0;
  padding: 9px 18px;
  border-radius: 6px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button.primary:hover, .btn:hover { background: var(--accent-hover); }

table.grid {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

table.grid th, table.grid td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

table.grid th {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.pill-ok { background: var(--ok-bg); color: var(--ok-ink); }
.pill-pending { background: var(--pending-bg); color: var(--pending-ink); }

/* Dev-email category pills — distinct hues so a glance tells you whether
   you're looking at a quarterly invite, a vendor-yearly invite, an
   employee-feedback email, or a sign-in link. */
.pill-quarterly       { background: #e6effb; color: #1f3a5f; }
.pill-yearly-vendor   { background: #f0e6f8; color: #5a2a82; }
.pill-yearly-employee { background: #e6f5ee; color: #1d6b3a; }
.pill-login           { background: #fef0e7; color: #8a4a17; }
.pill-other           { background: #eef1f5; color: #4b5563; }

/* Filter chips above the dev-email list. Click cycles through categories
   via ?category=…; the active chip gets the accent border + bold count. */
.dev-email-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 16px;
}
.dev-email-filters .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  background: #eef1f5;
  color: #4b5563;
  border: 1px solid transparent;
}
.dev-email-filters .chip:hover { border-color: var(--accent); }
.dev-email-filters .chip.active {
  border-color: var(--accent);
  color: var(--accent);
  background: #fff;
}
.dev-email-filters .chip-count {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
}

dl.answers { margin: 8px 0 0; }
dl.answers dt {
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
}
dl.answers dd { margin: 2px 0 0; white-space: pre-wrap; }

.inline-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  align-items: end;
}

code {
  background: #eef1f5;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 13px;
}

/* Admin module switcher — sits directly under the page H1 on /admin and
   /admin/yearly so it's obvious there are two compliance modules. The
   active tab matches the page's accent color; inactive tabs are quiet. */
.admin-tabs {
  display: flex;
  gap: 4px;
  margin: -4px 0 22px;
  border-bottom: 1px solid var(--border);
}
.admin-tabs a {
  display: inline-block;
  padding: 8px 18px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 500;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.admin-tabs a:hover { color: var(--accent); }
.admin-tabs a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.warning-banner {
  background: #fff8e1;
  border: 1px solid #f5d98a;
  color: #6b4f00;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 16px 0 20px;
  font-size: 14px;
}

.danger-heading {
  color: var(--danger);
}

.close-quarter-box button {
  background: #fff;
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 6px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.close-quarter-box button:hover { background: #f3f4f6; }

/* Admin's own pending-response nudge on /admin. Uses the pending-pill
   palette so it clearly reads as "something you need to do". */
.self-pending-cta {
  background: var(--pending-bg);
  color: var(--pending-ink);
  border: 1px solid var(--pending-ink);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 12px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}
.self-pending-cta .btn { flex: none; }

.review-section {
  border-top: 1px solid var(--border);
  padding: 12px 0 6px;
}
.review-section:first-of-type { border-top: 0; }

.review-field {
  margin: 10px 0 14px;
}
.review-field .q {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 2px;
}
.review-field .a {
  font-weight: 500;
}
.review-field .answer-text {
  white-space: pre-wrap;
  font-weight: 400;
  background: #f9fafb;
  border-left: 3px solid var(--accent);
  padding: 8px 10px;
  border-radius: 4px;
}
.follow-up-answer {
  margin-top: 4px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}

button.secondary {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 9px 18px;
  border-radius: 6px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
button.secondary:hover { background: #f3f4f6; }

.review-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.danger-zone {
  margin-top: 30px;
  border: 1px solid #f5c2c2;
  border-radius: 8px;
  background: #fff8f8;
  padding: 16px 18px;
}
.danger-zone h2 {
  color: var(--danger);
  margin: 0 0 8px;
  font-size: 16px;
}

button.danger {
  background: var(--danger);
  color: #fff;
  border: 0;
  padding: 8px 14px;
  border-radius: 6px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
button.danger:hover { background: #8c160e; }

button.tiny {
  padding: 4px 10px;
  font-size: 12px;
}

.reset-box {
  flex-shrink: 0;
}
.reset-box summary.linkish-btn {
  cursor: pointer;
  font-size: 12px;
  color: var(--danger);
  list-style: none;
  padding: 4px 10px;
  border-radius: 4px;
}
.reset-box summary.linkish-btn:hover { background: #fff1f1; }
.reset-box summary.linkish-btn::-webkit-details-marker { display: none; }
.reset-box[open] > summary { margin-bottom: 10px; }
.reset-box form {
  background: #fff8f8;
  border: 1px solid #f5c2c2;
  border-radius: 6px;
  padding: 12px 14px;
  min-width: 320px;
}

ul.attachment-list {
  margin: 6px 0 10px;
  padding-left: 18px;
  font-size: 14px;
}
ul.attachment-list li { margin: 4px 0; }
ul.attachment-list a { color: var(--accent); text-decoration: none; }
ul.attachment-list a:hover { text-decoration: underline; }

.file-picker {
  margin-top: 4px;
}

.file-picker ul.pending-files {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.file-picker ul.pending-files li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: 4px 0;
  background: #f3f4f6;
  border-radius: 4px;
  font-size: 14px;
}

.file-picker ul.pending-files li span {
  flex: 1;
}

button.remove-file {
  background: transparent;
  border: 0;
  color: var(--danger);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}
button.remove-file:hover {
  background: #fff1f1;
  border-radius: 4px;
}

/* ============================================================
   Applicant Screening
   ============================================================ */

.screening-drop-zone {
  display: block;
  border: 2px dashed #aaa;
  border-radius: 8px;
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  background: #fafafa;
  transition: background-color 0.15s, border-color 0.15s;
}
.screening-drop-zone:hover {
  background: #f0f7ff;
  border-color: #4a90e2;
}
.screening-drop-zone.dragover {
  background: #e3f0ff;
  border-color: #1f3a5f;
  border-style: solid;
}
.screening-drop-zone.uploading {
  opacity: 0.65;
  cursor: wait;
}

/* Full-screen overlay shown after the user drops/picks a file, kept
   visible during the 5-15s pipeline run. Without it the page looks
   frozen because the browser is waiting on Flask's response. */
.screening-processing-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.screening-processing-card {
  background: #fff;
  border-radius: 10px;
  padding: 32px 40px;
  max-width: 480px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.screening-processing-card h2 { margin: 16px 0 6px; font-size: 18px; }
/* Spinner: larger ring with strong contrast top-arc so the rotation
   is obvious even on slow refresh / low-DPI screens. The previous
   44px / 4px ring was technically animating but the operator
   reported it looked static (probably because the contrast against
   the white card was too subtle, and the animation was "smooth
   enough that nothing looked like it was moving"). Bumped to 60px /
   6px with a pure-orange top arc so the motion is unambiguous;
   slowed slightly to 1.0s so it doesn't feel frantic. The
   `will-change: transform` hint encourages the browser to GPU-
   accelerate so the rotation is jank-free during the heavy XHR
   that's running concurrently in the same tab.
*/
.screening-processing-card .spinner {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border: 6px solid #e4e7ec;
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  border-radius: 50%;
  animation: screening-spin 1s linear infinite;
  will-change: transform;
  transform-origin: 50% 50%;
}
@keyframes screening-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Animated dots after "Parsing... LinkedIn... rubric." so even if
   the user's browser is mid-paint and the spinner appears frozen
   for a moment, there's a second motion cue confirming the page
   isn't hung. Three dots fade in sequentially, then loop. */
.screening-processing-card .ellipsis {
  display: inline-block;
  width: 1.2em;
  text-align: left;
}
.screening-processing-card .ellipsis::after {
  content: '';
  animation: screening-ellipsis 1.4s steps(4, end) infinite;
}
@keyframes screening-ellipsis {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}
.screening-drop-zone input[type="file"] {
  display: none;
}

.screening-recent {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}
.screening-recent th, .screening-recent td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}
.screening-recent th {
  font-size: 0.85em;
  color: #666;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.verdict-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.verdict-allowed   { background: #d4edda; color: #155724; }
.verdict-blocked   { background: #f8d7da; color: #721c24; }
.verdict-uncertain { background: #fff3cd; color: #856404; }

.screening-verdict-box {
  border-left: 6px solid #888;
  padding: 16px 20px;
  margin: 24px 0;
  border-radius: 4px;
}
.screening-verdict-box.verdict-allowed   { border-left-color: #28a745; background: #f4faf5; }
.screening-verdict-box.verdict-blocked   { border-left-color: #dc3545; background: #fdf5f5; }
.screening-verdict-box.verdict-uncertain { border-left-color: #ffc107; background: #fffaf0; }
.verdict-headline { font-size: 1.1em; margin-bottom: 8px; }

.reasons {
  margin: 8px 0;
  padding-left: 0;
  list-style: none;
}
.reasons li {
  padding: 6px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.criterion {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 3px;
  background: #eee;
  font-size: 0.8em;
  font-family: monospace;
  margin-right: 6px;
}
/* Pre-rename criteria kept so historical screening rows still pill
   correctly on the detail page (old reasons are stored in
   classifier_reasons_json with the old criterion strings). */
.criterion-competitor_fund        { background: #f8d7da; color: #721c24; }
.criterion-direct_competitor      { background: #f8d7da; color: #721c24; }
/* Current (2026-05-05+) criterion names. */
.criterion-private_placement_fund { background: #f8d7da; color: #721c24; }
.criterion-public_commentator     { background: #f8d7da; color: #721c24; }
.criterion-PIC_competitor         { background: #f8d7da; color: #721c24; }
.criterion-suspicious             { background: #f8d7da; color: #721c24; }
.criterion-allowed                { background: #d4edda; color: #155724; }

.classifier-notes {
  margin-top: 8px;
  color: #555;
}

.decision-recorded {
  background: #f0f7ff;
  border-left: 4px solid #4a90e2;
}

.decision-buttons {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.decision-buttons button {
  flex: 1;
  padding: 10px 16px;
}
button.danger { background: #dc3545; color: white; }
button.secondary {
  background: #f5f5f5; color: #333; border: 1px solid #ccc;
}

.screening-section {
  margin-top: 24px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 12px 16px;
  background: #fcfcfc;
}
.screening-section summary {
  cursor: pointer;
  font-weight: 600;
  padding: 6px 0;
}
.screening-section pre.email-body,
.screening-section pre.linkedin-summary,
.screening-section pre.rubric-text {
  white-space: pre-wrap;
  word-break: break-word;
  background: white;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  max-height: 600px;
  overflow-y: auto;
  font-size: 0.88em;
}

.screening-section dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
}
.screening-section dt { font-weight: 600; color: #555; }
.muted.small { font-size: 0.85em; }

/* ============================================================
   Google OAuth login button
   ============================================================ */

.google-signin {
  display: block;
  text-align: center;
  background: #fff;
  color: #333;
  border: 1px solid var(--border);
  text-decoration: none;
  padding: 11px 18px;
  border-radius: 6px;
  font-weight: 500;
  margin-bottom: 10px;
}
.google-signin:hover {
  background: #f7f9fc;
  border-color: var(--accent);
}

.login-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 18px 0 12px;
}

/* ============================================================
   Home page tool launcher
   ============================================================ */

/* Section wrapper: each tool group (SEC Compliance / Investor
   Relations / future areas) gets its own header + grid so unrelated
   tools don't visually run into each other. (Operator feedback
   2026-05-05.) */
.home-section { margin-top: 28px; }
.home-section-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.home-card {
  display: block;
  padding: 20px 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s, transform 0.1s;
}
.home-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.home-card h2 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--accent);
}
.home-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}