/* SaltMatch visual design - ported from templates/newdesing.html (design mockup) into
   real, working Jinja templates. Palette/type/layout match that mockup; anywhere the
   mockup showed data this app can't truthfully produce (per-brand composition in
   suggestions, a fixed 3-step loading checklist, numeric near-match deltas) was
   adapted to what the real backend actually returns rather than faked. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/archivo-variable.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-600.woff2") format("woff2");
}

:root {
  --bg: #F4F2EC;
  --surface: #FFFFFF;
  --surface-alt: #FBFAF6;
  --surface-subtle: #FCFBF7;
  --border: #E3E0D6;
  --border-soft: #F0EDE4;
  --text: #1B1A15;
  --text-muted: #6E6C62;
  --text-faint: #8C897E;
  --text-faintest: #A6A296;
  --accent: #0E6E52;
  --accent-dark: #0A5540;
  --accent-deep: #0A4A38;
  --accent-soft-bg: #EAF3EF;
  --accent-soft-border: #CFE3DA;
  --exact-badge-bg: #DDEEE7;
  --exact-badge-border: #C4E0D6;
  --warn: #9A6614;
  --warn-deep: #7A5312;
  --warn-bg: #FCFAF3;
  --warn-border: #EAE0CC;
  --warn-chip-bg: #F3E7CE;
  --warn-chip-border: #E7D5AE;
  --error: #A93B2E;
  --font-sans: "Archivo", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Media can never force a layout wider than its container, on any screen. */
img, svg, video { max-width: 100%; height: auto; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: #fff; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

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

@keyframes sm-scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
@keyframes sm-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sm-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.results-page { padding-top: 8px; padding-bottom: 72px; }

/* ---------- Header ---------- */
.site-header {
  border-bottom: 1px solid var(--border);
  background: rgba(252, 251, 247, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 40;
}
.header-inner {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text);
}
.brand-mark { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.brand-mark .accent { color: var(--accent); }
.brand-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
}
.sources-live {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.sources-live .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(14, 110, 82, 0.16);
  flex: none;
}

main.page-main { flex: 1; width: 100%; }

/* ---------- Hero / search ---------- */
.mono { font-family: var(--font-mono); }

.search-hero { max-width: 780px; margin: 0 auto; padding: 84px 28px 60px; text-align: left; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 20px;
}
.search-hero h1 {
  /* Fluid between phone and desktop: ~30px at 375px wide, capped at 52px on
     laptops/desktops - no jump at breakpoint edges. */
  font-size: clamp(28px, 6vw + 8px, 52px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 20px;
  text-wrap: balance;
}
.search-hero h1 .accent { color: var(--accent); }
.lede {
  font-size: 18px;
  line-height: 1.55;
  color: #5C5A51;
  max-width: 620px;
  margin: 0 0 36px;
}
.lede strong { color: var(--text); font-weight: 500; }

.search-form { position: relative; margin-bottom: 36px; }
.search-box {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--text);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(27, 26, 21, 0.04);
}
.search-box .q-mark {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-right: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-faintest);
  background: var(--surface-alt);
  flex: none;
}
.search-box input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 18px 16px;
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--text);
  background: transparent;
}
.search-box button {
  border: none;
  background: var(--accent);
  color: #fff;
  padding: 0 26px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease;
}
.search-box button:hover { background: var(--accent-dark); }
.search-box button:disabled { opacity: 0.6; cursor: default; }
.search-box button .arrow { font-family: var(--font-mono); }

.suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  z-index: 20;
  box-shadow: 0 14px 40px -12px rgba(27, 26, 21, 0.24);
  opacity: 0;
  transform: translateY(-6px) scaleY(0.98);
  transform-origin: top;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.suggestions.open { opacity: 1; transform: translateY(0) scaleY(1); pointer-events: auto; }
.suggestion-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 18px;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  animation: sm-rise 0.16s ease both;
  animation-delay: calc(var(--i, 0) * 20ms);
  transition: background 0.1s ease;
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover, .suggestion-item.active { background: #F6F4EE; }
.suggestion-item mark { background: none; color: var(--accent-dark); font-weight: 700; }

.example-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}
.example-row .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faintest);
}
.example-pill {
  border: 1px solid #D8D5CA;
  background: var(--surface-alt);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: #3A382F;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.example-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft-bg); }

.steps-grid {
  display: grid;
  /* min(200px, 100%) keeps a cell from ever demanding more than the viewport
     provides, so the grid can never push the page into sideways scrolling. */
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.step-cell { background: var(--surface-alt); padding: 22px 20px; }
.step-cell .num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 600; margin-bottom: 12px; }
.step-cell .title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 5px; }
.step-cell .body { font-size: 13px; line-height: 1.45; color: var(--text-muted); }

/* ---------- Alerts ---------- */
.alert {
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 14.5px;
  text-align: left;
  animation: sm-rise 0.2s ease both;
}
.alert-error { background: rgba(169, 59, 46, 0.07); border: 1px solid rgba(169, 59, 46, 0.3); color: #7A2A20; }
.alert-warn { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-deep); }
.alert-success { background: var(--accent-soft-bg); border: 1px solid var(--accent-soft-border); color: var(--accent-deep); }

.manual-toggle, .manual-override {
  margin-top: 20px;
  text-align: left;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.manual-toggle summary {
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
}
.manual-override label, .manual-toggle label {
  font-size: 12.5px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.manual-override textarea, .manual-toggle textarea {
  width: 100%;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--text);
  resize: vertical;
}
.manual-override button, .manual-toggle button {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.manual-override button:hover, .manual-toggle button:hover { background: var(--accent-dark); }

/* ---------- Loading ---------- */
.search-loader {
  max-width: 620px;
  margin: 40px auto 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-subtle);
  overflow: hidden;
  animation: sm-rise 0.2s ease both;
}
.search-loader[hidden] { display: none; }
.scan-track {
  height: 3px;
  background: #EDEAE0;
  position: relative;
  overflow: hidden;
}
.scan-fill {
  position: absolute;
  top: 0; bottom: 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: sm-scan 1.15s ease-in-out infinite;
}
.loader-body { padding: 26px 30px; }
.loader-body .eyebrow { margin-bottom: 8px; }
.loader-query {
  font-family: var(--font-mono);
  font-size: 19px;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 20px;
  word-break: break-word;
}
.loader-stage-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}
.loader-stage-line .marker { flex: none; animation: sm-blink 1.1s ease-in-out infinite; color: var(--accent); }

/* ---------- Bulk search ---------- */
.bulk-form { max-width: 620px; }
.bulk-form textarea {
  width: 100%;
  padding: 16px;
  border: 1.5px solid var(--text);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  resize: vertical;
  box-sizing: border-box;
}
.bulk-form-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 12px; }
.bulk-count { font-size: 12.5px; color: var(--text-faint); }
.bulk-count.bulk-count-over { color: var(--error); font-weight: 600; }
.bulk-form-row button {
  border: none;
  background: var(--accent);
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease;
  flex: none;
}
.bulk-form-row button:hover { background: var(--accent-dark); }
.bulk-form-row button:disabled { opacity: 0.6; cursor: default; }
.bulk-form-row button .arrow { font-family: var(--font-mono); }

.bulk-progress {
  max-width: 620px;
  margin-top: 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-subtle);
  overflow: hidden;
  animation: sm-rise 0.2s ease both;
}
.bulk-progress[hidden] { display: none; }
.bulk-progress .loader-body { padding: 16px 22px; }
.bulk-progress-label { font-size: 13.5px; color: var(--text); margin: 0; }

.bulk-results { margin-top: 36px; max-width: 980px; }
.bulk-results[hidden] { display: none; }
.bulk-results-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.bulk-results-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.bulk-results-head .count { color: var(--accent); }

.bulk-table-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-x: auto;
  background: var(--surface);
}
.bulk-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.bulk-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--surface-alt);
}
.bulk-table td {
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.bulk-table tr:last-child td { border-bottom: none; }
.bulk-price { font-family: var(--font-mono); font-weight: 700; color: var(--accent); }
.bulk-pending-cell { font-family: var(--font-mono); color: var(--text-faint); font-style: italic; font-size: 13px; }
.bulk-error-cell { color: var(--error); font-size: 13px; }
.bulk-warn-cell { color: var(--warn-deep); font-size: 13px; }
.bulk-row-pending td:first-child { color: var(--text-muted); }

/* ---------- Results ---------- */
.back-link {
  display: inline-block;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  margin: 24px 0 8px;
  transition: color 0.15s ease;
}
.back-link:hover { color: var(--accent); }

.resolution-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-subtle);
  padding: 28px 30px;
  margin-bottom: 36px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.resolution-panel .left { flex: 1; min-width: 260px; }
.resolution-panel .right { min-width: 210px; }
.salt-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.salt-chip {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 300px;
  border: 1px solid var(--accent-soft-border);
  background: var(--accent-soft-bg);
  border-radius: 8px;
  padding: 10px 15px;
}
.salt-chip-top { display: flex; align-items: baseline; gap: 10px; }
.salt-chip .name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--accent-deep); }
.salt-chip .strength { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--accent); }
.salt-chip .effect { font-size: 12.5px; line-height: 1.4; color: var(--text-muted); margin: 0; }

.confidence-label-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.confidence-label-row .label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-faintest);
}
.confidence-label-row .value { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.confidence-meter { height: 8px; border-radius: 999px; background: #EDEAE0; overflow: hidden; }
.confidence-meter .fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; }
.confidence-note { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); margin-top: 10px; }

.results-section-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.results-section-header h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.results-section-header .count { font-family: var(--font-mono); font-size: 14px; color: var(--accent); font-weight: 600; }
.near-matches .results-section-header h2 { font-size: 20px; color: var(--warn-deep); }
.near-matches .results-section-header .count { color: var(--warn); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 16px;
  margin-bottom: 44px;
}
.match-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: sm-rise 0.28s ease both;
  animation-delay: calc(var(--i, 0) * 35ms);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.match-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06); }
.match-card .card-top { padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.match-card .card-top-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.match-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 0; line-height: 1.25; }
.badge-exact {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; font-weight: 600;
  color: var(--accent-deep); background: var(--exact-badge-bg); border: 1px solid var(--exact-badge-border);
  border-radius: 5px; padding: 4px 7px; white-space: nowrap; flex: none;
}
.badge-own {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; font-weight: 600;
  color: #FFFFFF; background: var(--accent-dark); border: 1px solid var(--accent-dark);
  border-radius: 5px; padding: 4px 7px; white-space: nowrap; flex: none;
}
.own-product-card { box-shadow: 0 0 0 1px var(--accent-soft-border) inset; }
.note { font-size: 13.5px; color: var(--text-muted); margin: 0 0 18px; max-width: 620px; }
.match-card .manufacturer { font-size: 12.5px; color: var(--text-faint); margin: 0; font-family: var(--font-mono); }

/* Price block: "Best  ₹24.09  ₹32.12  25% off" on one line, the salt/strength
   directly beneath it in muted text - kept as two clearly separate rows
   (not one wrapping flex row) so the layout never reflows unpredictably when
   MRP/discount are present on some cards and absent on others. */
.match-card .best-price-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.match-card .best-price-row .label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faintest);
}
.match-card .best-price-row .value { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--text); }
.match-card .pack { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); margin: 0; }
.mrp-strike { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-faint); text-decoration: line-through; }
.discount-badge {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--accent-deep); background: var(--exact-badge-bg); border: 1px solid var(--exact-badge-border);
  border-radius: 5px; padding: 2px 6px;
}

.listings { border-top: 1px solid var(--border-soft); background: var(--surface-alt); }
.listing-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px 10px;
  padding: 9px 20px; border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.listing-row:last-child { border-bottom: none; }
.listing-row .source { font-family: var(--font-mono); font-size: 13px; color: #3A382F; flex: none; }
/* flex:1 + min-width:0 is what actually lets this shrink/wrap instead of forcing
   the row wider than the card - a flex item's default min-width is "auto" (its
   content's intrinsic width), which silently defeats flex-wrap for exactly the
   case that matters here: a long price string like "₹1,486.55 (pack of 20)". */
.listing-row .right {
  display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; justify-content: flex-end;
  flex: 1 1 auto; min-width: 0; max-width: 100%;
}
.listing-row .price {
  font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; color: #3A382F;
  overflow-wrap: anywhere;
}
.listing-row .price.is-best { color: var(--accent); }
.listing-row .view-link { font-family: var(--font-mono); font-size: 12px; flex: none; }
.discount-badge-sm {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; white-space: nowrap; flex: none;
  color: var(--accent-deep); background: var(--exact-badge-bg); border: 1px solid var(--exact-badge-border);
  border-radius: 4px; padding: 1px 6px;
}

/* Marks an activity-log row that came from a bulk (pasted-list) search rather
   than a hand-typed single search - used on /account and the admin tables. */
.via-tag {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; font-weight: 600;
  text-transform: uppercase; white-space: nowrap; vertical-align: middle;
  color: var(--text-faint); background: var(--surface-alt); border: 1px solid var(--border-soft);
  border-radius: 4px; padding: 1px 5px; margin-left: 6px;
}

.empty-state {
  border: 1px dashed #CFCBBE;
  border-radius: 12px;
  background: var(--surface-alt);
  padding: 40px 34px;
  text-align: center;
  margin-bottom: 44px;
}
.empty-state .glyph { font-size: 30px; margin-bottom: 12px; color: var(--text-faint); }
.empty-state p { font-size: 15px; line-height: 1.5; color: #5C5A51; max-width: 440px; margin: 0 auto; }

.near-matches { border-top: 1px solid var(--border); padding-top: 32px; }
.near-matches .note { font-size: 13.5px; color: var(--text-muted); margin: 0 0 18px; max-width: 620px; }
.near-matches .card-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); margin-bottom: 0; }
.near-card {
  border: 1px solid var(--warn-border);
  border-radius: 12px;
  background: var(--warn-bg);
  padding: 16px 20px;
  animation: sm-rise 0.28s ease both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.near-card .card-top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 3px; }
.near-card h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.badge-near {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--warn);
  background: var(--warn-chip-bg); border: 1px solid var(--warn-chip-border);
  border-radius: 5px; padding: 4px 7px; white-space: nowrap;
}
.near-card .manufacturer { font-size: 13px; color: var(--text-faint); margin: 0 0 8px; font-family: var(--font-mono); }
.near-card .strength-line { font-family: var(--font-mono); font-size: 13.5px; color: var(--warn-deep); margin: 0; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--surface-alt); }
.footer-inner {
  padding: 22px 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--text-faint);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Responsive rules live at the very end of this file (see "Responsive / mobile"
   near the bottom) - .login-section, .account-chip, .credit-pill etc. are all
   defined further down in the "Account, login & credits" section below, and a
   media query placed here would lose the cascade to those later, unconditional
   base rules for the same properties. */

/* ============ Nav, auth & account (subscription model) ============ */

.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.main-nav { display: flex; align-items: center; gap: 22px; margin: 0 auto; }
.nav-link {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  padding: 6px 0;
  position: relative;
}
.nav-link:hover { color: var(--text); }
.nav-link.active { color: var(--accent); }
.nav-link.admin-link { color: var(--warn-deep); }
.nav-link.admin-link.active { color: var(--warn); }

.auth-links { display: flex; align-items: center; gap: 14px; }
.auth-link { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }
.auth-link:hover { color: var(--text); }
.auth-link-primary {
  color: #fff;
  background: var(--accent);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
}
.auth-link-primary:hover { background: var(--accent-dark); color: #fff; }

.account-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  border-left: 1px solid var(--border);
  padding-left: 18px;
}

.plan-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 1px solid #D8D5CA;
  background: var(--surface-alt);
  border-radius: 999px;
  padding: 6px 13px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}
.plan-pill.plan-active { color: var(--accent); border-color: var(--accent-soft-border); background: var(--accent-soft-bg); }
.plan-pill.plan-none { color: var(--error); border-color: #EAC9C0; background: #FBEDE9; }

.logout-form { display: contents; }
.logout-btn {
  border: none;
  background: none;
  padding: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  cursor: pointer;
}
.logout-btn:hover { color: var(--accent); }

/* ---------- Logged-out / no-plan hero states on index.html ---------- */
.gate-hero { padding-top: 96px; }
.gate-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.cta-btn {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  padding: 13px 24px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cta-primary { background: var(--accent); color: #fff; }
.cta-primary:hover { background: var(--accent-dark); color: #fff; }
.cta-secondary { background: transparent; border-color: var(--text); color: var(--text); }
.cta-secondary:hover { border-color: var(--accent); color: var(--accent); }
.gate-note { font-size: 13.5px; color: var(--text-muted); }

/* ---------- Auth pages (register / login) ---------- */
.auth-section {
  max-width: 440px;
  margin: 0 auto;
  padding: 90px 28px;
}
.auth-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-subtle);
  padding: 36px 34px;
}
.auth-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
.auth-lede { font-size: 14px; line-height: 1.5; color: var(--text-muted); margin: 0 0 26px; }
.auth-form { display: flex; flex-direction: column; }
.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faintest);
  margin: 14px 0 6px;
}
.field-label:first-child { margin-top: 0; }
.auth-input {
  width: 100%;
  border: 1.5px solid var(--text);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
  background: var(--surface);
  box-sizing: border-box;
}
.remember-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.remember-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.auth-submit {
  width: 100%;
  border: none;
  background: var(--accent);
  color: #fff;
  padding: 13px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 22px;
}
.auth-submit:hover { background: var(--accent-dark); }
.auth-switch { font-size: 13.5px; color: var(--text-muted); margin: 20px 0 0; text-align: center; }

.coupon-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--accent-soft-border);
  background: var(--accent-soft-bg);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 18px 0 22px;
}
.coupon-summary-plan { font-size: 14px; font-weight: 700; color: var(--accent-deep); }
.coupon-summary-price { display: flex; align-items: baseline; gap: 8px; }
.coupon-summary-amount { font-size: 19px; font-weight: 800; color: var(--accent-deep); }
.coupon-summary-normal { font-size: 13px; color: var(--text-faint); text-decoration: line-through; }

/* ---------- Pricing page ---------- */
.pricing-hero { max-width: 720px; margin: 0 auto; padding: 76px 28px 48px; text-align: center; }
.pricing-hero h1 { font-size: clamp(28px, 4.5vw + 12px, 42px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 16px; }
.pricing-hero .lede { max-width: 560px; margin: 0 auto; }

.coupon-apply-section { max-width: 460px; margin: 0 auto 36px; text-align: left; }
.coupon-apply-form .field-label { text-align: center; }
.coupon-apply-row { display: flex; gap: 10px; }
.coupon-apply-row .auth-input { flex: 1; }
.coupon-apply-row .cta-btn { flex: none; padding: 12px 18px; }
.coupon-apply-status { font-size: 13px; color: var(--accent-deep); margin: 10px 0 0; text-align: center; }
.coupon-apply-status.coupon-apply-status-error { color: var(--warn-deep); }

.pricing-grid {
  display: grid;
  /* auto-fit + a fluid minimum: 3-up on desktop/laptop, 2-up on tablets where
     three would crush the cards, single column on phones - no breakpoint
     tuning needed, the cards themselves decide what fits. */
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 20px;
  padding-bottom: 64px;
}
.plan-card {
  position: relative;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.plan-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(27, 26, 21, 0.08); }
.plan-card.plan-popular { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-bg); }
.plan-card.coupon-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-bg); }
.coupon-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-deep);
  background: var(--accent-soft-bg);
  border: 1px solid var(--accent-soft-border);
  border-radius: 6px;
  padding: 4px 9px;
  margin-top: 4px;
}
.plan-ribbon {
  position: absolute;
  top: -13px;
  left: 26px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}
.plan-card-head { margin-bottom: 20px; }
.plan-name { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; }
.plan-price { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); display: flex; align-items: baseline; gap: 4px; margin-bottom: 12px; }
.plan-price .currency { font-size: 22px; font-weight: 700; color: var(--text-faint); }
.plan-price .per { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text-faint); margin-left: 4px; }
.plan-blurb { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); margin: 0; min-height: 40px; }
.plan-features { list-style: none; margin: 0 0 26px; padding: 0; flex: 1; }
.plan-features li {
  font-size: 13.5px;
  color: var(--text);
  padding: 9px 0 9px 24px;
  border-top: 1px solid var(--border-soft);
  position: relative;
}
.plan-features li:first-child { border-top: none; }
.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.plan-cta {
  width: 100%;
  border: 1.5px solid var(--text);
  background: transparent;
  color: var(--text);
  padding: 13px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.plan-cta:hover { border-color: var(--accent); color: var(--accent); }
.plan-cta:disabled { opacity: 0.6; cursor: default; }
.plan-cta-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.plan-cta-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

.pricing-faq { padding-bottom: 56px; }
.pricing-faq h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 20px; }
/* 300px minimum caps this at 3 columns in the 1120px container (there are only
   3 FAQ items) while still folding to 2 on tablets and 1 on phones. */
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.faq-item h3 { font-size: 14.5px; font-weight: 700; margin: 0 0 8px; }
.faq-item p { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); margin: 0; }

.pricing-support { padding-bottom: 80px; }
.support-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-alt);
  padding: 26px 30px;
  flex-wrap: wrap;
}
.support-card h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 6px; }
.support-card p { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); margin: 0; max-width: 480px; }
.support-card .cta-btn { flex: none; }

/* ---------- Account page ---------- */
.account-page { padding-top: 56px; padding-bottom: 72px; }
.account-plan-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-subtle);
  padding: 28px 30px;
}
.account-plan-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.account-plan-status .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.account-plan-status.status-active { color: var(--accent); }
.account-plan-status.status-active .dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-bg); }
.account-plan-status.status-none { color: var(--error); }
.account-plan-status.status-none .dot { background: var(--error); box-shadow: 0 0 0 3px rgba(169, 59, 46, 0.14); }
.account-plan-detail { font-size: 14px; color: var(--text-muted); margin: 0 0 18px; }

/* Profile details card on /account - label/value rows that wrap on phones
   (long emails drop the value onto its own line instead of overflowing). */
.profile-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 6px 24px;
}
.profile-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.profile-row:last-child { border-bottom: none; }
.profile-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faintest);
  flex: none;
}
.profile-value { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; text-align: right; }

/* Change-password form on /account - same input styling as the auth pages,
   kept narrow on wide screens (a full-width password field looks broken). */
.password-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-subtle);
  padding: 22px 24px;
  max-width: 440px;
  margin-top: 14px;
}
.password-card .field-label { margin-top: 14px; }
.password-card .field-label:first-child { margin-top: 0; }
.password-submit { margin-top: 20px; width: 100%; justify-content: center; }

/* overflow-x auto (not hidden): a long pasted query or composition string can
   exceed a phone's width - the table then scrolls inside its own rounded box
   instead of stretching the whole page sideways. */
.activity-table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; overflow-y: hidden; margin-bottom: 44px; }
.activity-table { width: 100%; border-collapse: collapse; }
.activity-table td { overflow-wrap: anywhere; }
.activity-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--surface-alt);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.activity-table td {
  padding: 11px 16px;
  font-size: 13.5px;
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
}
.activity-table tr:last-child td { border-bottom: none; }

#search-submit.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* The hidden attribute must always win, even over display:flex rules above */
[hidden] { display: none !important; }

/* Corner button that copies the trycloudflare.com public link for this run (see
   /api/tunnel-url) - fully invisible (no fill, no border, near-zero opacity) at rest
   so ordinary visitors never notice it; only reveals itself on hover/focus for
   whoever already knows it's there. app.js keeps it out of the DOM flow entirely
   (hidden attribute) when no tunnel is active for this run. */
.tunnel-link-btn {
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: transparent;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.02;
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  z-index: 500;
}
.tunnel-link-btn:hover,
.tunnel-link-btn:focus-visible {
  opacity: 1;
  transform: scale(1.08);
  border-color: var(--accent-soft-border);
  background: var(--surface);
  color: var(--accent);
}

.tunnel-link-toast {
  position: fixed;
  right: 14px;
  bottom: 46px;
  background: var(--text);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 6px;
  z-index: 500;
  opacity: 0.92;
}

/* ============================================================================
   Responsive / mobile
   Kept at the very end of the file (not up near the desktop rules they override)
   on purpose: .login-section, .account-chip, .credit-pill etc. are defined in the
   "Account, login & credits" section above, which itself comes after the original
   .search-hero/.header-inner responsive tier - placing overrides for those classes
   any earlier means the later, unconditional base rule wins the cascade instead.
   ========================================================================= */

@media (max-width: 700px) {
  .search-hero { padding: 56px 20px 40px; }
  /* h1 sizes fluidly via clamp() in the base rule - no fixed override needed */
  .lede { font-size: 16px; }
  .steps-grid { grid-template-columns: 1fr; }
  .container { padding: 0 18px; }
  .resolution-panel { padding: 22px 20px; }
  .auth-section { padding: 56px 20px; }

  /* Fixed 66px header height only accounts for one line of text - on narrow
     screens "BLS TRADELINK" and "N SOURCES · LIVE" wrap and get clipped unless
     the header is allowed to size to its content instead. */
  .header-inner { height: auto; min-height: 56px; padding-top: 10px; padding-bottom: 10px; gap: 8px; flex-wrap: wrap; }
  .brand-sub { display: none; }
  .sources-live { font-size: 10px; white-space: nowrap; }
  .main-nav { order: 3; width: 100%; gap: 16px; }
  .pricing-grid, .faq-grid { grid-template-columns: 1fr; }

  /* Bulk search results: a data table forces a phone to scroll sideways to read
     it, which is a desktop layout squeezed to fit rather than an actually
     mobile-first one - below tablet width this collapses into stacked cards
     instead, one per medicine, using each <td>'s data-label as its heading. */
  .bulk-table-wrap { overflow-x: visible; border: none; background: none; }
  .bulk-table { min-width: 0; }
  .bulk-table thead { display: none; }
  .bulk-table, .bulk-table tbody, .bulk-table tr, .bulk-table td { display: block; width: 100%; }
  .bulk-table tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 0 14px;
    margin-bottom: 10px;
  }
  .bulk-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
    text-align: right;
  }
  .bulk-table td:last-child { border-bottom: none; }
  .bulk-table td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
    text-align: left;
    flex: none;
  }
  /* The medicine name reads as the card's title, not a labeled field - no label
     prefix, bold, left-aligned, with a stronger rule underneath to set it apart
     from the details below it. */
  .bulk-table td[data-label="Medicine"] {
    font-weight: 700;
    font-size: 14.5px;
    justify-content: flex-start;
    border-bottom-color: var(--border);
    padding-top: 12px;
  }
  .bulk-table td[data-label="Medicine"]::before { content: none; }
  .bulk-table td[data-label=""] { justify-content: flex-end; padding-bottom: 12px; }
}

@media (max-width: 360px) {
  .header-inner { flex-wrap: wrap; }
}

/* ---------- Phone tuning ----------
   The 700px tier above is shared with tablets, so it under-shrinks actual phone
   widths (320-480px) - a 36px h1 and 110px-derived login padding still read as
   "desktop, just narrower" rather than a proper mobile layout. This tier tightens
   type scale, spacing, and card density specifically for phones. */
@media (max-width: 480px) {
  /* Longhand, not shorthand: .header-inner also carries the .container class and
     sets its own padding-top/bottom - a shorthand `padding` here would zero those
     back out since this rule comes later in the cascade at equal specificity. */
  .container { padding-left: 16px; padding-right: 16px; }

  .search-hero { padding: 36px 16px 28px; }
  .eyebrow { font-size: 10px; margin-bottom: 14px; }
  .search-hero h1 { margin-bottom: 14px; }
  .lede { font-size: 14.5px; margin-bottom: 26px; }
  .search-box input { font-size: 15px; padding: 14px 12px; }
  .search-box button { padding: 0 18px; font-size: 14px; }
  .example-row { gap: 8px; margin-bottom: 40px; }
  .example-pill { padding: 7px 14px; font-size: 12px; }
  .step-cell { padding: 16px 16px; }

  .auth-section { padding: 32px 16px; }
  .auth-card { padding: 26px 20px; }
  .auth-title { font-size: 21px; }
  .auth-lede { font-size: 13px; }

  .resolution-panel { padding: 18px 16px; gap: 18px; }
  .resolution-panel .left, .resolution-panel .right { min-width: 0; width: 100%; }
  .salt-chip { max-width: 100%; }
  .results-section-header h2 { font-size: 19px; }
  .card-grid, .near-matches .card-grid { grid-template-columns: 1fr; }
  .match-card h3 { font-size: 17px; }
  .match-card .best-price-row .value { font-size: 19px; }
  .empty-state { padding: 28px 20px; }

  /* Header right side gets tight fast: brand mark + live dot + nav + plan pill all
     competing for ~280px. Shrink the pieces instead of letting them wrap/clip. */
  .header-inner { gap: 6px; }
  .brand-mark { font-size: 18px; }
  .sources-live { display: none; }
  .main-nav { gap: 12px; }
  .account-chip { padding-left: 10px; gap: 6px; }
  .plan-pill { padding: 5px 10px; }
  .logout-btn { font-size: 11px; }
  .plan-card { padding: 24px 20px; }
  .plan-price { font-size: 32px; }

  .footer-inner { padding: 16px 16px; font-size: 11px; }
}