/* Enhanced WHS – Light Theme with improved visual hierarchy */
    :root {
      --whs-bg: #ffffff;
      --whs-panel: #ffffff;
      --whs-panel-alt: #f9fafb;
      --whs-text: #111827;
      --whs-muted: #6b7280;
      --whs-border: #e5e7eb;
      --whs-border-strong: #d1d5db;
      --whs-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 6px rgba(0,0,0,.05);
      --whs-shadow-hover: 0 2px 10px rgba(0,0,0,.08);
      --whs-accent: #0ea5a4;
      --whs-accent-hover: #0c8d8d;
      --whs-heading: #B34100;
      --whs-success: #059669;
      --whs-warning: #d97706;
      --whs-error: #dc2626;
      --whs-filter-active: #0ea5a4;
      --whs-filter-active-bg: rgba(14,165,164,.1);
    }

    .article-body, .book-view { color: var(--whs-text); }

    .whs-label {
      display: block;
      font-size: 0.9rem;
      color: var(--whs-muted);
      margin: 0 0 .3rem 0;
      font-weight: 500;
    }

    .whs-input {
      width: 100%;
      padding: .6rem .75rem;
      border: 1px solid var(--whs-border);
      border-radius: 8px;
      background: #fff;
      color: var(--whs-text);
      font-size: 1rem;
      transition: border-color 0.2s ease;
    }

    .whs-input:focus {
      outline: 0;
      border-color: var(--whs-accent);
      box-shadow: 0 0 0 3px rgba(14,165,164,.15);
    }

    /* Enhanced card styling */
    .card {
      background: var(--whs-panel);
      border: 1px solid var(--whs-border);
      border-radius: 12px;
      box-shadow: var(--whs-shadow);
      padding: 1rem;
      transition: box-shadow 0.2s ease;
    }
    .card:hover { box-shadow: var(--whs-shadow-hover); }

    /* Streamlined controls */
    .whs-controls .row {
      display: flex;
      gap: 0.75rem;
      align-items: end;
      flex-wrap: wrap;
    }
    .whs-controls .col-md-3 { flex: 2.5; min-width: 200px; }
    .whs-controls .col-md-2:nth-child(2) { flex: 2; min-width: 150px; }
    .whs-controls .col-md-1 { flex: 0.8; min-width: 80px; }
    .whs-controls .more-filters-col { flex: 0; min-width: 120px; }

    /* More filters button */
    .more-filters-btn {
      background: #fff;
      color: var(--whs-text);
      border: 1px solid var(--whs-border);
      border-radius: 8px;
      padding: .6rem .75rem;
      font-size: 0.9rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
      width: 100%;
      text-align: center;
      box-shadow: var(--whs-shadow);
    }
    .more-filters-btn:hover {
      border-color: var(--whs-accent);
      background: rgba(14,165,164,.05);
      color: var(--whs-accent);
    }
    .more-filters-btn.has-filters {
      background: var(--whs-filter-active-bg);
      border-color: var(--whs-accent);
      color: var(--whs-accent);
    }
    .more-filters-btn .filter-count {
      background: rgba(255,255,255,0.2);
      border-radius: 10px;
      padding: 0.1rem 0.4rem;
      margin-left: 0.3rem;
      font-size: 0.75rem;
      font-weight: 600;
    }
    
    /* Comprehensive jitter fix - rev8 change [claude] *
    .card {
      transform: translateZ(0);
      backface-visibility: hidden;
      transition: box-shadow 0.15s ease-out;
    }
    
    .card:hover {
      box-shadow: var(--whs-shadow-hover);
    }
    
    #controlsCard.whs-controls {
      transform: translateZ(0);
      backface-visibility: hidden;
    }
    /* end jitter patch */

    /* Modal styles (unchanged core) */
    .modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(5px); }
    .modal-content { background:#fff; margin:5% auto; padding:0; border-radius:15px; width:90%; max-width:600px; max-height:80vh; overflow:hidden; position:relative; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
    .modal-header { background: linear-gradient(135deg, var(--whs-accent), var(--whs-accent-hover)); color:#fff; padding:1.5rem; position:relative; }
    .modal-title { font-size:1.5rem; font-weight:700; margin:0; }
    .close { position:absolute; right:1.5rem; top:50%; transform:translateY(-50%); color:#fff; font-size:28px; font-weight:bold; cursor:pointer; line-height:1; opacity:.8; transition:opacity .2s ease; }
    .close:hover { opacity:1; }
    .modal-body { padding:1.5rem; max-height:60vh; overflow-y:auto; }
    .filter-section { margin-bottom:2rem; }
    .filter-section:last-child { margin-bottom:1rem; }
    .filter-section h3 { margin:0 0 1rem 0; color:var(--whs-text); font-size:1.1rem; font-weight:600; }

    .category-filters { display:grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap:.5rem; }
    .filter-btn { background:#fff; border:2px solid var(--whs-border); border-radius:8px; padding:.75rem 1rem; font-size:.9rem; font-weight:600; cursor:pointer; transition:all .2s ease; color:var(--whs-text); text-align:center; }
    .filter-btn:hover { border-color: var(--whs-accent); background: var(--whs-filter-active-bg); }
    .filter-btn.active { background: var(--whs-accent); border-color: var(--whs-accent); color:#fff; }

    .year-range { display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:center; }
    .year-input { padding:.75rem; border:2px solid var(--whs-border); border-radius:8px; font-size:.9rem; text-align:center; transition:border-color .2s ease; }
    .year-input:focus { outline:0; border-color: var(--whs-accent); box-shadow:0 0 0 3px rgba(14,165,164,.15); }
    .year-separator { color:var(--whs-muted); font-weight:600; }

    .sort-options { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:.5rem; }
    .sort-btn { background:#fff; border:2px solid var(--whs-border); border-radius:8px; padding:.75rem 1rem; font-size:.9rem; font-weight:500; cursor:pointer; transition:all .2s ease; color:var(--whs-text); text-align:left; }
    .sort-btn:hover { border-color: var(--whs-accent); background: var(--whs-filter-active-bg); }
    .sort-btn.active { background: var(--whs-accent); border-color: var(--whs-accent); color:#fff; }

    .modal-actions { background:var(--whs-panel-alt); padding:1.5rem; display:flex; justify-content:space-between; gap:1rem; border-top:1px solid var(--whs-border); }
    .btn { appearance:none; border:none; border-radius:8px; padding:.75rem 1.5rem; cursor:pointer; font-weight:600; font-size:.9rem; transition:all .2s ease; }
    .btn-primary { background: var(--whs-accent); color:#fff; }
    .btn-primary:hover { background: var(--whs-accent-hover); transform: translateY(-1px); }
    .btn-secondary { background:#f3f4f6; color:var(--whs-text); border:1px solid var(--whs-border); }
    .btn-secondary:hover { background:#e5e7eb; }

    /* Enhanced results styling (unchanged) */
    .whs-muted { color: var(--whs-muted); }
    .card-row { display:block; margin:1rem 0; }
    .card-row .card { display:block; width:100%; margin:0 0 1rem; break-inside:avoid; page-break-inside:avoid; -webkit-column-break-inside:avoid; }
    #results .result-title, #results .card h3.result-title, #results .card h3 { margin:0 0 .5rem 0; font-size:1.2rem; line-height:1.4; color:var(--whs-heading); font-weight:600; }
    #results .meta { display:flex; gap:.5rem; flex-wrap:wrap; font-size:.9rem; color:var(--whs-text); margin-bottom:.75rem; }
    #results .badge { display:inline-block; border:1px solid var(--whs-border); background:var(--whs-panel-alt); color:var(--whs-text); border-radius:20px; padding:3px 10px; font-size:.8rem; font-weight:500; }
    #results .badge.emph { border-color: var(--whs-accent); background: rgba(14,165,164,.1); color: var(--whs-accent); }
    #results .site-list { list-style:disc !important; list-style-position:outside !important; padding-left:1.25rem !important; margin:.5rem 0 0 !important; }
    #results .site-list li { display:list-item !important; list-style-type:disc !important; margin:.3rem 0; line-height:1.5; }
    #results .site-list li::marker { color: var(--whs-accent); }

    /* Enhanced pagination */
    .center-flex { display:flex; justify-content:center; align-items:center; gap:1rem; }
    .btn-outline-primary { appearance:none; background:#fff; color:var(--whs-text); border:1px solid var(--whs-border); border-radius:8px; padding:.6rem 1rem; cursor:pointer; box-shadow:var(--whs-shadow); font-weight:500; transition:all .2s ease; }
    .btn-outline-primary:hover:not(:disabled) { border-color: var(--whs-accent); background: rgba(14,165,164,.05); }
    .btn-outline-primary:focus { outline:0; border-color: var(--whs-accent); box-shadow:0 0 0 3px rgba(14,165,164,.15); }
    .btn-outline-primary:disabled { opacity:.5; cursor:not-allowed; }

    /* Sticky controls */
    #controlsCard.whs-controls {
      position: sticky; top: 0; z-index: 100;
      border: 1px solid #e0e0e0; background: #f8f9fa;
      border-bottom: 1px solid var(--whs-border);
      box-shadow: 0 2px 10px rgba(0,0,0,.08);
    }

    /* Results header */
    #resultsHeader { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; flex-wrap:wrap; gap:.5rem; }
    #resultsCount { font-weight:600; color:var(--whs-text); }

    /* Responsive */
    @media (max-width: 768px) {
      .filter-toggle { display:block; background: var(--whs-accent); color:#fff; border:none; border-radius:8px; padding:.6rem 1rem; font-size:.9rem; font-weight:500; cursor:pointer; margin-bottom:1rem; width:100%; }
      .filter-toggle:hover { background: var(--whs-accent-hover); }
      .filters-collapsible { display:none; }
      .filters-collapsible.show { display:block; }
      .whs-controls .row { flex-direction:column; gap:.75rem; }
      .whs-controls .col-md-3, .whs-controls .col-md-2, .whs-controls .col-md-1, .whs-controls .more-filters-col { width:100%; }
      .whs-input, .year-input { font-size:16px; }
      .card { padding:.875rem; }
      .category-filters { grid-template-columns: repeat(2, 1fr); gap:.3rem; }
      .filter-btn { padding:.6rem .8rem; font-size:.85rem; }
      .year-range { grid-template-columns:1fr; gap:.5rem; }
      .year-separator { text-align:center; }
      .sort-options { grid-template-columns:1fr; }
      #resultsHeader { font-size:.9rem; }
      .center-flex { gap:.5rem; }
      .btn-outline-primary { padding:.5rem .8rem; font-size:.9rem; }
      .modal-content { width:95%; margin:10% auto; }
      .modal-actions { flex-direction:column; }
    }
    @media (max-width: 480px) {
      .card { padding:.75rem; }
      #results .result-title { font-size:1.1rem; }
      .whs-controls .row { gap:.5rem; }
      .category-filters { grid-template-columns:1fr; }
    }

    /* iOS smooth scrolling */
    html, body { -webkit-overflow-scrolling: touch; }

    /* Clear list styling inside results */
    #results, #results * { list-style: none !important; }
    #results::before, #results::after, #results *::before, #results *::after { content: none !important; }

    /* === Patch: Controls layout + More Filters button (desktop keep one line) === */
    @media (min-width: 992px) {
      .whs-controls .row { flex-wrap: nowrap; }

      /* Search: largest, but not greedy */
      .whs-controls .col-md-3 {
        flex: 1 1 42%;
        min-width: 260px;
      }

      /* Country: medium */
      .whs-controls .col-md-2:nth-child(2) {
        flex: 0 1 26%;
        min-width: 200px;
      }

      /* Per page: fixed-ish so it won’t wrap */
      .whs-controls .col-md-1 {
        flex: 0 0 140px;
        min-width: 140px;
      }

      /* More Filters + pills: make this actually wide enough */
      .whs-controls .more-filters-col {
        flex: 0 0 280px;   /* was 140px */
        min-width: 280px;
      }
    }


    /* === Compact one-line pill bar (no wrapping) === */
    .pillbar{
      display:none; align-items:center; gap:.35rem;
      margin:0 0 .35rem; white-space:nowrap;
      overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    }
    .pillbar.show{ display:flex; }
    .pillbar .pill{
      display:inline-block; border:1px solid var(--whs-accent);
      background:var(--whs-filter-active-bg); color:var(--whs-accent);
      border-radius:999px; padding:.15rem .45rem;
      font-size:.82rem; font-weight:500; line-height:1.2; vertical-align:middle;
    }
    /* Close (×) icon inside filter pills */
    .pillbar .pill .x {
      margin-left: .35rem;
      font-weight: 800;
      cursor: pointer;
      line-height: 1;
      user-select: none;
    }

    /* === Layout refinements for controls card ===
       - Tighten gutters (spacing between input columns) at all breakpoints
       - Ensure inputs/buttons don't overflow the card
       - Adjust desktop flex-basis so columns fit neatly on one line
       - Give "More Filters" column more room for pills
    ================================================= */

    /* Works everywhere */
    .whs-controls .row {
      margin-left: -6px;
      margin-right: -6px;
    }
    .whs-controls .row > [class*="col-"] {
      padding-left: 6px;
      padding-right: 6px;
    }
    .whs-controls input,
    .whs-controls select,
    .whs-controls .more-filters-btn {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    /* Desktop-only refinements */
    @media (min-width: 992px) {
      .whs-controls .col-md-3 { flex: 1 1 36%; min-width: 220px; }
      .whs-controls .col-md-2:nth-child(2) { flex: 0 1 22%; min-width: 180px; }
      .whs-controls .col-md-1 { flex: 0 0 120px; min-width: 120px; }
      .whs-controls .more-filters-col { flex: 0 0 240px; min-width: 240px; }
    }
    /* Results link color override */
    :root{
      --whs-link: #1d4ed8;        /* pick your color */
      --whs-link-hover: #622F97; /*#1e40af;  /* hover color */
    }

    #results .site-list a:link,
    #results .site-list a:visited {  /* force visited not to go purple/green */
      color: var(--whs-link);
    }

    #results .site-list a:hover,
    #results .site-list a:focus {
      color: var(--whs-link-hover);
      text-decoration: underline;
    }

    /* Make the ↗ icon match the link color */
    #results .ext-link { color: currentColor; }

    /* --- Jitter fix: prevent edge-hover flicker on results cards - rev8 change [gpt] --- */
    #results .card{
      /* keep base shadow but don't animate it */
      box-shadow: var(--whs-shadow);
      transition: transform .12s ease;   /* GPU-friendly */
      will-change: transform;
    }
    #results .card:hover{
      transform: translateY(-2px);       /* subtle lift */
      box-shadow: var(--whs-shadow);     /* no shadow change = no repaint jitter */
      /* Optional: crisp outline instead of a heavier shadow */
      outline: 1px solid rgba(0,0,0,.06);
      outline-offset: 0;
    }
    
    /* Underline that doesn't shift text metrics */
    #results .site-list a{
      text-decoration: none;
      text-underline-offset: .12em;
      text-decoration-thickness: from-font;
    }
    #results .site-list a:hover{
      box-shadow: inset 0 -1px currentColor;
    }
    
    /* Stabilize the sticky controls card a bit too */
    #controlsCard.whs-controls{
      will-change: transform;
      transform: translateZ(0);
      backface-visibility: hidden;
      contain: layout paint;
    }
    
    /* add a hover “pop”, with shadow via filter */
    #results .card:hover{ filter: drop-shadow(0 2px 10px rgba(0,0,0,.08)); }
  
  /* end of jitter patch */
  
  /* Site-name links: accent border + glow on hover/focus - rev8 change*/
  #results .site-list a.site-link{
    display: inline-block;                 /* so the ring wraps the link box */
    border: 1px solid transparent;         /* reserve space so no jump on hover */
    border-radius: 6px;
    text-decoration: none;
    transition: border-color .12s ease, box-shadow .12s ease;
  }

  #results .site-list a.site-link:hover,
  #results .site-list a.site-link:focus-visible{
    border-color: var(--whs-accent);                 /* #0EA5A4 */
    box-shadow: 0 0 0 3px rgba(14,165,164,.15);      /* same glow as inputs */
    outline: 0;
    /* optional: keep your underline without shifting line height */
    //box-shadow: 0 0 0 3px rgba(14,165,164,.15), inset 0 -1px currentColor;
  }
  /* end hiver change */