* { box-sizing: border-box; }

/* Show the blinking text caret ONLY in real text-entry fields. caret-color is
   purely cosmetic (colors the insertion caret, no layout/interaction effect),
   so suppressing it globally and restoring it on text inputs/textareas is
   risk-free — it just stops stray carets on focusable non-text controls (e.g.
   the visually-hidden toggle checkboxes). */
* { caret-color: transparent; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea,
[contenteditable]:not([contenteditable="false"]) {
  caret-color: auto;
}

/* Single canonical font stack — system UI per platform, no web-font load. */
:root {
  --jf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
}

body {
  font-family: var(--jf-font);
  background: #f7f7f8 url("/static/leaves-bg.svg") center/cover no-repeat fixed;
  color: #1f2328;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

button, input, select, textarea, label {
  font-family: inherit;
}

header {
  background: #1a3d2e url("/static/leaves-nav.svg") left center/cover no-repeat;
  color: #fff;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  row-gap: 8px;
}
header .brand-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  background: transparent;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
header .brand-title:hover { background: #2b5443; }
header .brand-title.active { background: #37475a; }
header nav { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }

/* Blog sits apart from the core app tabs (Search/Lists/About): pushed to the
   far right on desktop, divided off in the mobile dropdown. */
.nav-blog { margin-left: auto; }

/* Hamburger toggle — hidden on desktop, revealed in the mobile media query. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
}
.nav-toggle:hover { background: #2b5443; }
.nav-toggle[aria-expanded="true"] { background: #37475a; }
.nav-toggle svg { display: block; }

/* --- Mobile / small-screen layout ---------------------------------------- */
@media (max-width: 600px) {
  /* Header: hamburger + title cluster on one row; the nav collapses into a
     full-width dropdown that only renders when toggled open. Pinned to the top
     so the nav stays reachable while content scrolls underneath. */
  header {
    padding: 10px 16px;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  }
  .nav-toggle { display: inline-flex; }
  header .brand-title { flex: 0 1 auto; font-size: 1.1rem; }
  header nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    gap: 6px;
  }
  header nav.open { display: flex; }
  header nav .tab { width: 100%; text-align: center; min-height: 40px; }
  header nav .nav-blog {
    margin-left: 0;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  /* Search: stack the input above a full-width submit button instead of
     squeezing them onto one row. */
  #search-form { flex-direction: column; gap: 10px; }
  .search-submit-row { width: 100%; }
  .search-submit-row button[type="submit"] { flex: 1; min-height: 44px; }
}

@media (max-width: 480px) {
  header .brand-title { font-size: 1.05rem; padding: 4px 8px; }
  .brand-btn { min-height: 36px; font-size: 0.82rem; padding: 7px 10px; }
  #pagination { gap: 8px; flex-wrap: wrap; }

  /* Your-list rows: stack the brand label above its action button so a long
     brand name doesn't crush the Approve/Approved control. */
  .your-list-preview .brand-row-main { flex-direction: column; align-items: stretch; gap: 8px; }
}
.tab {
  background: transparent;
  color: #d3d8df;
  border: 1px solid transparent;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.tab:hover { background: #2b5443; color: #fff; }
.tab.active { background: #37475a; color: #fff; border-color: #5a6c80; }
.tab.active:hover { background: #45596f; }

main {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  flex: 1 0 auto;
}

footer {
  background: #f6f8fa;
  border-top: 1px solid #d0d7de;
  margin-top: 48px;
  padding: 32px 24px 20px;
  color: #57606a;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.footer-grid {
  max-width: 1200px;
  margin: 0 auto 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.footer-grid strong {
  display: block;
  color: #1f2328;
  font-size: 0.9rem;
  margin-bottom: 6px;
}
.footer-grid p { margin: 0; line-height: 1.5; }
.footer-grid a { color: #0969da; text-decoration: none; }
.footer-grid a:hover { text-decoration: underline; }
.footer-tab-link.active { font-weight: 700; text-decoration: underline; }
.footer-legal {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 16px;
  border-top: 1px solid #d0d7de;
  font-size: 0.75rem;
  color: #8b949e;
  line-height: 1.5;
}
.footer-copyright {
  text-align: center;
  margin-top: 16px;
}

/* Mobile overrides that must follow the base `main`/`footer`/`.footer-grid`
   rules: media queries don't raise specificity, so anything overriding a
   property those base rules also set has to win on source order. Keeping them
   here (rather than in the header/search media block higher up) is what makes
   the tightened footer spacing actually take effect. The footer stacks (the
   base auto-fit grid collapses to one column) but stays compact so it doesn't
   eat the short viewport. */
@media (max-width: 600px) {
  main { padding: 16px; }
  footer { margin-top: 24px; padding: 20px 16px 14px; }
  .footer-grid { gap: 14px; margin-bottom: 12px; }
  .footer-grid p { line-height: 1.4; }
  .footer-legal { padding-top: 12px; }
  .footer-copyright { margin-top: 12px; }
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

#search-form {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
#search-form .search-input-wrap {
  flex: 1;
}
#search-form input {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  box-sizing: border-box;
}

/* Inline spinner shown in the status line while we resolve categories and
   redirect to Amazon. It persists through the redirect navigation, so it reads
   as "working… → Amazon". */
.search-spinner {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 6px;
  vertical-align: -0.12em;
  border: 2px solid rgba(26, 61, 46, 0.25);   /* brand green, faded */
  border-top-color: #1a3d2e;                   /* brand green */
  border-radius: 50%;
  animation: mtj-spin 0.7s linear infinite;
}
@keyframes mtj-spin {
  to { transform: rotate(360deg); }
}
/* Don't freeze it (a static ring reads as broken) — just slow it down. */
@media (prefers-reduced-motion: reduce) {
  .search-spinner { animation-duration: 1.6s; }
}
.search-status {
  font-size: 0.85rem;
  color: #57606a;
  margin: -4px 0 12px;
}
.search-status:empty { margin: 0; }
.search-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 12px;
}
.affiliate-note {
  font-size: 0.8rem;
  color: #57606a;
  line-height: 1.5;
  margin: 0;
}
.search-meta-row .affiliate-note {
  text-align: right;
  white-space: nowrap;
  flex: none;
}
.search-meta-row #amazon-only-toggle { white-space: nowrap; flex: none; }
/* Medium: the ~650px one-line note no longer fits beside the toggle. Keep it on
   the same row, pinned to the right (space-between), but let it wrap into a
   left-aligned paragraph block — capped so it stays a tidy block, and allowed to
   shrink if the row gets tight so it never overflows the toggle. */
@media (max-width: 940px) {
  .search-meta-row { gap: 48px; }
  .search-meta-row .affiliate-note {
    white-space: normal;
    text-align: left;
    flex: 0 1 auto;
    max-width: 50%;
  }
}
/* Mobile: the search bar spans the screen; stack the toggle above a full-width
   note. */
@media (max-width: 600px) {
  .search-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .search-meta-row .affiliate-note { max-width: none; }
}
.blog-disclaimer {
  font-size: 0.85rem;
  color: #8b949e;
  border-left: 3px solid #d0d7de;
  padding-left: 12px;
  margin: -6px 0 16px;
}
button {
  padding: 10px 18px;
  font-size: 1rem;
  background: #ff9900;
  color: #1f2328;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
button:hover { background: #e68a00; }

#amazon-only-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #57606a;
  cursor: pointer;
  margin: 0;
  padding: 4px 0;
  user-select: none;
}
#amazon-only-toggle:hover { color: #1a3d2e; }

/* The real checkbox is visually hidden but kept (JS reads .checked and persists
   it to localStorage); the .switch span is the painted track, its ::after the
   thumb. Sibling selectors drive the on/off state off the native :checked. */
#amazon-only-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
#amazon-only-toggle .switch {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #d0d7de;
  transition: background 0.15s ease;
}
#amazon-only-toggle .switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
#amazon-only:checked + .switch { background: #1a3d2e; }
#amazon-only:checked + .switch::after { transform: translateX(14px); }
#amazon-only:focus-visible + .switch {
  outline: 2px solid #1a3d2e;
  outline-offset: 2px;
}

.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  outline: none;
}
.info-tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d0d7de;
  color: #57606a;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  line-height: 1;
  user-select: none;
  transition: background 0.15s, color 0.15s;
}
.info-tip:hover .info-tip-icon,
.info-tip:focus .info-tip-icon { background: #0969da; color: #fff; }

.info-tip-body {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: max-content;
  max-width: 320px;
  background: #ffffff;
  color: #1f2328;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.8rem;
  line-height: 1.45;
  font-weight: 400;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  cursor: default;
}
.info-tip-body em { color: #0969da; font-style: normal; font-weight: 600; }
.info-tip-body a { color: #0969da; }
.info-tip-body::before,
.info-tip-body::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
}
.info-tip-body::before {
  bottom: 100%;
  border-bottom-color: #d0d7de;
}
.info-tip-body::after {
  bottom: calc(100% - 1px);
  border-bottom-color: #ffffff;
}
.info-tip:hover .info-tip-body,
.info-tip:focus .info-tip-body,
.info-tip:focus-within .info-tip-body { display: block; }

#status {
  font-size: 0.9rem;
  color: #57606a;
  margin-bottom: 12px;
  min-height: 1.2em;
}
.search-hero {
  text-align: center;
  background: #1a3d2e url("/static/leaves-nav.svg") center/cover no-repeat;
  color: #fff;
  border-radius: 12px;
  padding: 34px 24px;
  margin: 0 0 24px;
  box-shadow: 0 6px 20px rgba(26, 61, 46, 0.18);
}
.search-heading {
  margin: 0 0 10px;
  font-size: 1.9rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}
.hero-accent { color: #ff9900; white-space: nowrap; }
.search-subheading {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 500;
  color: #cfe3d6;
}
@media (max-width: 600px) {
  .search-hero { padding: 24px 18px; border-radius: 10px; margin-bottom: 18px; }
  .search-heading { font-size: 1.5rem; }
  .search-subheading { font-size: 1rem; }
}

.about {
  max-width: 720px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #1f2328;
}
.about h2 { margin: 8px 0 12px; font-size: 1.4rem; }
.about h3 { margin: 28px 0 8px; font-size: 1.05rem; color: #1f2328; }
.about p  { margin: 0 0 14px; }
.about ul { margin: 0 0 14px 0; padding-left: 22px; }
.about li { margin-bottom: 6px; }
.about a  { color: #0969da; text-decoration: none; }
.about a:hover { text-decoration: underline; }
.about .legal-meta {
  color: #8b949e;
  font-size: 0.82rem;
  font-style: italic;
  margin-top: -8px;
  margin-bottom: 18px;
}

/* --- Blog layout (sidebar + selected article) --------------------------- */
.blog-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
  max-width: 1000px;
}
.blog-sidebar {
  position: sticky;
  top: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid #eaeef2;
  border-radius: 10px;
}
.blog-sidebar-title {
  margin: 0 0 12px;
  font-size: 1.1rem;
  color: #1f2328;
  letter-spacing: 0.01em;
}
.blog-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.blog-nav-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #1f2328;
  border: 1px solid transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.blog-nav-item:hover { background: #f5f7fa; }
.blog-nav-item.active {
  background: #eef5ee;
  border-color: #cfe0d2;
}
.blog-nav-title {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
}
.blog-nav-date {
  font-size: 0.75rem;
  color: #8b949e;
}
.blog-content {
  min-width: 0;
}
.blog-entry { display: none; }
.blog-entry.active { display: block; }
.blog-entry h3 { margin: 4px 0 12px; font-size: 1.35rem; }
.blog-entry h4 { margin: 22px 0 8px; font-size: 1rem; color: #1f2328; }
.blog-author {
  color: #2b5443;
  font-style: normal;
  font-weight: 600;
}

@media (max-width: 720px) {
  .blog-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .blog-sidebar {
    position: static;
    padding: 12px;
  }
  .blog-nav-item { padding: 8px 10px; }
}

.tier { margin: 24px 0; }
.tier.hidden { display: none; }

#pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 32px 0 16px;
  padding: 12px;
}
#pagination.hidden { display: none; }
#pagination button {
  font-size: 0.9rem;
  padding: 8px 16px;
  background: #fff;
  color: #1f2328;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}
#pagination button:hover:not(:disabled) { border-color: #0969da; color: #0969da; }
#pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
#page-indicator { font-size: 0.9rem; color: #57606a; font-weight: 600; }
.tier h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.tier-sub {
  color: #57606a;
  font-size: 0.85rem;
  font-weight: 400;
}
.tier-count {
  color: #57606a;
  font-size: 0.85rem;
  font-weight: 500;
}
.tier-count:empty { display: none; }
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge.trusted  { background: #d1f4e0; color: #0f5132; }
.badge.ok       { background: #fff3cd; color: #664d03; }
.badge.filtered { background: #f8d7da; color: #842029; }
.toggle-tier {
  background: transparent;
  color: #57606a;
  border: 1px solid #d0d7de;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 400;
  cursor: pointer;
}
.toggle-tier:hover { border-color: #0969da; color: #0969da; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.grid.hidden { display: none; }
.card {
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card.trusted  { border-left: 4px solid #1a7f37; }
.card.ok       { border-left: 4px solid #bf8700; }
.card.filtered { border-left: 4px solid #cf222e; opacity: 0.85; }

.card img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  background: #f7f7f8;
  border-radius: 4px;
}
.card .title {
  font-size: 0.92rem;
  line-height: 1.35;
  font-weight: 500;
  color: #1f2328;
  text-decoration: none;
}
.card .title:hover { color: #0969da; text-decoration: underline; }
.card .brand-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 2px;
  background: transparent;
  border: none;
  padding: 0;
}
.card .brand-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f2328;
  letter-spacing: -0.005em;
}
.card .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #57606a;
}
.card .meta .price {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2328;
}

/* Per-card brand controls — visitor's verify/hide toggle for the card's brand. */
.card .brand-controls {
  border-top: 1px solid #eaeef2;
  padding-top: 8px;
  margin-top: 4px;
}

.brand-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.brand-btn {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #d0d7de;
  color: #57606a;
  cursor: pointer;
  white-space: normal;
  line-height: 1.2;
  word-break: break-word;
  min-height: 28px;
}
.brand-btn:hover:not(:disabled) { background: #f6f8fa; border-color: #8b949e; }
.brand-btn.trust:hover:not(:disabled) { background: #eafaf0; color: #1a7f37; border-color: #1a7f37; }
.brand-btn.block:hover:not(:disabled) { background: #fdeff0; color: #cf222e; border-color: #cf222e; }
.brand-btn.trust.active {
  background: #d1f4e0;
  color: #0f5132;
  border-color: #1a7f37;
}
.brand-btn.block.active {
  background: #f8d7da;
  color: #842029;
  border-color: #cf222e;
}
.brand-btn:disabled { opacity: 0.6; cursor: wait; }
.brand-btn.readonly { cursor: default; }
.brand-btn.readonly:hover { background: #fff; border-color: #d0d7de; color: #57606a; }
.brand-btn.trust.active.readonly:hover { border-color: #1a7f37; color: #0f5132; }
.brand-btn.block.active.readonly:hover { border-color: #cf222e; color: #842029; }

.brand-name-missing {
  font-weight: 500;
  color: #8b949e;
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0;
}

/* --- Lists tab --------------------------------------------------------------- */
.brands-help {
  color: #57606a;
  font-size: 0.85rem;
  margin: -4px 0 14px;
}
#brand-counts { font-weight: 600; color: #1f2328; }

.your-list { margin-bottom: 32px; }

.your-list-title-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  padding: 2px 4px 2px 0;
  border-radius: 6px;
  cursor: text;
  max-width: 100%;
}
.your-list-title-row:hover { background: rgba(9, 105, 218, 0.06); }
.your-list-title-row:focus-within { background: rgba(9, 105, 218, 0.08); }

.your-list-title {
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  color: #1f2328;
  letter-spacing: -0.01em;
  background: transparent;
  border: none;
  outline: none;
  padding: 2px 4px;
  margin: 0;
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  border-radius: 4px;
}
.your-list-title::placeholder {
  color: #1f2328;
  font-weight: 700;
  opacity: 1;
}
.your-list-title:focus::placeholder {
  color: #8b949e;
  font-weight: 500;
}
.your-list-title:focus { background: #fff; box-shadow: inset 0 0 0 1px #0969da; }

.title-edit-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8b949e;
  flex-shrink: 0;
  transition: color 0.15s;
}
.your-list-title-row:hover .title-edit-hint,
.your-list-title-row:focus-within .title-edit-hint,
.your-list-desc-row:hover .title-edit-hint,
.your-list-desc-row:focus-within .title-edit-hint { color: #0969da; }

.your-list-desc-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 6px;
  padding: 2px 4px 2px 0;
  border-radius: 6px;
  cursor: text;
  max-width: 100%;
}
.your-list-desc-row:hover { background: rgba(9, 105, 218, 0.06); }
.your-list-desc-row:focus-within { background: rgba(9, 105, 218, 0.08); }
.your-list-desc {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  color: #57606a;
  line-height: 1.4;
  background: transparent;
  border: none;
  outline: none;
  padding: 2px 4px;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 1.7em;
  resize: none;
  overflow: hidden;
  border-radius: 4px;
}
.your-list-desc::placeholder { color: #8b949e; opacity: 1; }
.your-list-desc:focus { background: #fff; box-shadow: inset 0 0 0 1px #0969da; color: #1f2328; }
.your-list-desc-row .title-edit-hint { margin-top: 3px; }

#brand-search,
#popular-list-search {
  width: 100%;
  padding: 10px 12px 10px 36px;
  font-size: 1rem;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  margin-bottom: 12px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23656d76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 10px center;
  background-size: 18px 18px;
}
#brand-search:focus,
#popular-list-search:focus { outline: 2px solid #0969da; outline-offset: -1px; }

#brand-results {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#brand-results.hidden { display: none; }
#brand-results .empty {
  color: #8b949e;
  font-size: 0.88rem;
  padding: 8px 12px;
  text-align: center;
}

.your-list-preview {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  max-height: 270px;
  overflow-y: auto;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  background: #fff;
}
.your-list-preview.hidden { display: none; }
.your-list-preview .brand-row {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #eaeef2;
  padding: 8px 12px;
}
.your-list-preview .brand-row:last-child { border-bottom: none; }
.your-list-preview .empty {
  color: #8b949e;
  font-size: 0.88rem;
  padding: 14px 12px;
  text-align: center;
}

.brand-row {
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 8px 12px;
}
.brand-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand-row-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.brand-row-name { font-weight: 500; }
.brand-row-name em { color: #57606a; font-size: 0.82rem; font-weight: 400; }
.brand-row-source {
  font-size: 0.75rem;
  color: #8b949e;
}

/* --- Lists tab: Your List toolbar ------------------------------------------ */
.your-list-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: #57606a;
  margin: 4px 0 12px;
}
.your-list-field input,
.your-list-field textarea {
  padding: 8px 10px;
  font-size: 0.9rem;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  font-family: inherit;
  resize: vertical;
}
.your-list-field input:focus,
.your-list-field textarea:focus {
  outline: 2px solid #0969da;
  outline-offset: -1px;
}
.your-list-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.your-list-actions .actions-left {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.your-list-status {
  display: block;
  font-size: 0.82rem;
  color: #57606a;
  min-height: 1.1em;
  margin-top: 8px;
}
.your-list-status[data-kind="ok"] { color: #0f5132; }
.your-list-status[data-kind="error"] { color: #842029; }

/* --- toast notifications --------------------------------------------------- */
/* Transient top-of-screen confirmations for list edits (add/remove/rename).
   Fixed + centered, stacked newest-on-top, pointer-events only on the pills so
   they never block clicks underneath. */
.toast-container {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 24px);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(420px, calc(100vw - 24px));
  padding: 9px 14px;
  background: #fff;
  color: #1f2328;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid #d0d7de;
  border-left: 4px solid #1a7f37;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(31, 35, 40, 0.18);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-left-color: #cf222e; }
.toast.info { border-left-color: #1a3d2e; }
.toast::before {
  content: "✓";
  flex: none;
  font-weight: 700;
  color: #1a7f37;
}
.toast.error::before { content: "!"; color: #cf222e; }
.toast.info::before { content: ""; display: none; }
.toast-text { line-height: 1.35; word-break: break-word; }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 0.18s ease; transform: none; }
  .toast.show { transform: none; }
}

/* Generic button variants used across the lists UI. */
.ghost-btn,
.brand-io-import.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  padding: 6px 14px;
  background: #fff;
  color: #1f2328;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  font-family: inherit;
}
.ghost-btn:hover { background: #f0f6fc; border-color: #0969da; color: #0969da; }
.ghost-btn:disabled { opacity: 0.5; cursor: wait; }
.primary-btn {
  font-size: 0.85rem;
  padding: 6px 14px;
  background: #1a3d2e;
  color: #fff;
  border: 1px solid #1a3d2e;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}
.primary-btn:hover { background: #2b5443; border-color: #2b5443; }
.primary-btn:disabled { opacity: 0.6; cursor: wait; }
.danger-btn {
  font-size: 0.85rem;
  padding: 6px 14px;
  background: #fff;
  color: #842029;
  border: 1px solid #cf222e;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}
.danger-btn:hover { background: #f8d7da; }

/* --- Lists tab: Popular Lists table --------------------------------------- */
.lists-section-heading {
  font-size: 1.05rem;
  color: #1f2328;
  margin: 28px 0 4px;
  padding-top: 16px;
  border-top: 1px solid #d0d7de;
}
.popular-lists-section { margin-bottom: 24px; }

.popular-lists {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.9rem;
}
.popular-lists thead {
  background: #f6f8fa;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #57606a;
}
.popular-lists th,
.popular-lists td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #eaeef2;
  vertical-align: top;
}
.popular-lists tbody tr:last-child td { border-bottom: none; }
.popular-lists tbody tr:hover { background: #fafbfc; }
.col-pop { width: 110px; }
/* Holds Export + the add/remove button. Wide enough for the common "Export +
   Add to My Lists" pair side by side; the longer subscribed label
   ("✓ In My Lists — Remove") wraps to a second line via .list-actions rather
   than overflowing — table-layout:fixed + overflow:hidden would otherwise clip
   it at the cell edge. */
.col-actions { width: 232px; }
.list-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.list-actions > button { white-space: nowrap; }
.col-title { width: 22%; }
.col-desc { color: #57606a; overflow: hidden; }
.col-title strong {
  color: #1f2328;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popular-list-desc {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.popular-list-meta {
  font-size: 0.75rem;
  color: #8b949e;
  margin-top: 2px;
}
.popular-list-pubdate {
  font-size: 0.75rem;
  color: #8b949e;
  margin-top: 6px;
}
/* Built-in/default list, pinned to the top of the table */
.popular-list-row.is-builtin td { background: #f5f9ff; }
.popular-list-row.is-builtin .col-pop { box-shadow: inset 3px 0 0 #1c3d5a; }
.popular-list-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.builtin-default-tag[disabled] {
  cursor: default;
  opacity: 1;
  color: #1c3d5a;
  border-color: #d7e3f5;
  background: #eef4fc;
}
.popular-list-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 16px 0;
}
.popular-list-pagination.hidden { display: none; }
.popular-list-pagination .ghost-btn { font-size: 0.82rem; padding: 5px 12px; }
#popular-page-indicator {
  font-size: 0.85rem;
  color: #57606a;
  font-weight: 500;
}
/* "Uses" cell: a usage bar (scaled to the most-used list in view) over the
   this-month count. */
.uses-cell { display: flex; flex-direction: column; gap: 1px; }
.popularity {
  height: 6px;
  background: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 5px;
}
.popularity-fill {
  height: 100%;
  background: linear-gradient(90deg, #2b5443, #5b9277);
  transition: width 0.2s ease;
}
/* The most-used list in view runs hot. */
.popularity.hot .popularity-fill {
  background: linear-gradient(90deg, #b54708, #ff9900);
}
.uses-month { font-size: 0.74rem; color: #8b949e; }
.uses-flame { font-size: 0.95rem; line-height: 1; vertical-align: -0.05em; }

/* Community-lists search + sort controls */
.popular-lists-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.popular-lists-controls #popular-list-search { flex: 1; width: auto; min-width: 160px; margin: 0; }
.popular-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #57606a;
  white-space: nowrap;
}
#popular-sort {
  font-size: 0.82rem;
  padding: 5px 8px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  background: #fff;
  color: #1f2328;
  cursor: pointer;
}
.col-actions .ghost-btn,
.col-actions .primary-btn {
  padding: 4px 10px;
  font-size: 0.8rem;
}
.empty-row td {
  text-align: center;
  color: #8b949e;
  font-size: 0.88rem;
  padding: 16px;
  background: #fff;
}
.muted { color: #8b949e; font-style: italic; }

@media (max-width: 720px) {
  .popular-lists thead { display: none; }
  .popular-lists,
  .popular-lists tbody,
  .popular-lists tr,
  .popular-lists td { display: block; width: 100%; }
  .popular-lists tr {
    border-bottom: 1px solid #eaeef2;
    padding: 8px 4px;
  }
  .popular-lists td { border: none; padding: 4px 12px; }
  .col-pop, .col-actions { width: auto; }
  .col-actions { text-align: left; }
  .list-actions { justify-content: flex-start; }
}

/* --- Modal -------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal.hidden { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 22, 33, 0.55);
}
.modal-card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 22px 22px 18px;
  max-width: 440px;
  width: calc(100% - 32px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
}
.modal-card h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  color: #1f2328;
}
.modal-card p {
  margin: 0 0 16px;
  font-size: 0.92rem;
  color: #57606a;
  line-height: 1.5;
}
.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* --- Lists tab: active-list toggles --------------------------------------- */
.lists-section-heading.first { border-top: none; padding-top: 0; margin-top: 4px; }

/* --- /search scope selector ----------------------------------------------- */
/* The scope caret rides beside the Search button and matches its height.
   Wrapping the two keeps them inline on desktop and lets the button flex to
   full width (caret pinned to its right) when the form stacks on mobile. */
.search-submit-row { display: flex; gap: 8px; align-items: stretch; }
.scope-picker { position: relative; display: flex; }
.scope-picker.hidden { display: none; }

/* Compact disclosure: a caret button that opens a popover list of scopes,
   instead of a full-width <select> showing the current value inline. Height
   comes from stretching to the submit row, so it tracks the Search button. */
.scope-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: 0;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  background: #fff;
  color: #57606a;
  cursor: pointer;
}
.scope-toggle:hover { background: #f6f8fa; border-color: #1a3d2e; color: #1a3d2e; }
.scope-toggle:focus-visible {
  outline: none;
  border-color: #1a3d2e;
  box-shadow: 0 0 0 1px #1a3d2e;
}
.scope-toggle[aria-expanded="true"] {
  background: #f6f8fa;
  border-color: #1a3d2e;
  color: #1a3d2e;
}
.scope-caret { transition: transform 0.15s ease; }
.scope-toggle[aria-expanded="true"] .scope-caret { transform: rotate(180deg); }

.scope-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 180px;
  max-width: 280px;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(31, 35, 40, 0.15);
}
.scope-menu.hidden { display: none; }
.scope-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  color: #1f2328;
  cursor: pointer;
}
.scope-option:hover { background: #f3f4f6; }
.scope-option.active { font-weight: 600; }
.scope-option-check { flex: none; width: 14px; color: #1a3d2e; }
.scope-option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- My Lists selector ----------------------------------------------------- */
.my-lists-section { margin-bottom: 28px; }
#new-list-btn { flex: none; margin-top: 4px; width: 28%; justify-content: center; }
@media (max-width: 600px) { #new-list-btn { width: 100%; } }

/* --- brand detail link + modal -------------------------------------------- */
.brand-detail-link {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 500;
  color: #1f2328;
  text-align: left;
  cursor: pointer;
}
.brand-detail-link:hover { color: #0f5132; text-decoration: underline; }
.brand-detail-link:focus-visible { outline: 2px solid #0969da; outline-offset: 2px; border-radius: 3px; }

.confirm-modal-card { max-width: 360px; }
.brand-detail-card { max-width: 460px; }
.brand-detail-source { font-size: 0.82rem; color: #57606a; margin: 2px 0 16px; }
.brand-detail-body { display: flex; flex-direction: column; gap: 16px; }
.brand-detail-section h4 {
  margin: 0 0 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #57606a;
}
.brand-detail-hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: #8b949e; }
.recog-row { display: flex; align-items: center; gap: 10px; }
.recog-bar { flex: 1; height: 8px; border-radius: 999px; background: #eaecef; overflow: hidden; }
.recog-fill { height: 100%; background: #1a3d2e; border-radius: 999px; }
.recog-value { flex: none; font-size: 0.82rem; color: #57606a; font-variant-numeric: tabular-nums; }
.brand-detail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.brand-chip { font-size: 0.8rem; padding: 3px 9px; border-radius: 999px; background: #def7e6; color: #0f5132; }
.brand-detail-body .muted { color: #8b949e; font-size: 0.88rem; margin: 0; }

/* --- community-list title link + detail modal ----------------------------- */
.popular-list-title-link {
  display: block;
  max-width: 100%;
  background: none;
  border: none;
  padding: 2px 6px;
  margin: -2px -6px;
  font: inherit;
  font-weight: 700;
  color: #1f2328;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popular-list-title-link:hover { color: #0f5132; text-decoration: underline; }
.popular-list-title-link:focus-visible { outline: 2px solid #0969da; outline-offset: 2px; border-radius: 3px; }

.list-detail-card { max-width: 480px; }
.list-detail-meta { font-size: 0.82rem; color: #57606a; margin: 2px 0 8px; }
.list-detail-desc { font-size: 0.9rem; color: #1f2328; margin: 0 0 12px; }
.list-detail-desc.muted { color: #8b949e; }
.list-detail-brands {
  list-style: none;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.88rem;
  color: #1f2328;
}
.list-detail-brands .muted { color: #8b949e; }
.list-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modal-actions-spacer { flex: 1; }
.list-detail-report { color: #842029; }
.list-detail-status { font-size: 0.82rem; min-height: 1.1em; margin: 8px 0 0; color: #57606a; }
.list-detail-status[data-kind="ok"] { color: #0f5132; }
.my-lists-help {
  font-size: 0.82rem;
  color: #57606a;
  margin: 0 0 12px;
}
.my-lists { list-style: none; margin: 0; padding: 0; }
.my-list-item { display: flex; align-items: stretch; gap: 8px; margin: 0 0 8px; }
.my-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  padding: 11px 13px;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.my-list-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.my-list-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  align-self: stretch;
  padding: 0;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  background: #fff;
  color: #57606a;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.my-list-action:hover { background: #f6f8fa; color: #1f2328; }
.my-list-action-delete:hover { background: #fbeaec; border-color: #f1b0b7; color: #842029; }
.my-list-row:hover { background: #f6f8fa; }
.my-list-row.selected {
  border-color: #1a3d2e;
  box-shadow: inset 0 0 0 1px #1a3d2e;
  background: #f3f7f4;
}
.my-list-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.my-list-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2328;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-list-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.my-list-count {
  flex: none;
  font-size: 0.8rem;
  color: #57606a;
}

/* List badges (kind + provenance) */
.list-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.4;
}
.badge-smart { background: #def7e6; color: #0f5132; }
.badge-simple { background: #eaecef; color: #57606a; }
.badge-builtin { background: #e7eef9; color: #1c3d5a; }
.badge-public { background: #fde7d3; color: #8a5a00; }
.badge-custom { background: #f3e8fb; color: #5a2d82; }

/* --- selected-list editor chrome ------------------------------------------ */
.selected-list-note {
  font-size: 0.82rem;
  color: #57606a;
  margin: 0 0 10px;
  min-height: 1.1em;
}
/* Read-only lists (built-in smart, subscribed public): hide the edit/publish
   controls and the rename/description pencils; the brand table stays for
   browsing + "is this brand on the list?" searches. */
.your-list.list-readonly .your-list-actions,
.your-list.list-readonly .title-edit-hint { display: none; }
.your-list.list-readonly .your-list-title,
.your-list.list-readonly .your-list-desc {
  background: transparent;
  cursor: default;
}