/* =========================================================================
   GSS Experts Corner — dark-Codex restyle of the DWQA questions LIST + instant
   Finder (ledger list). Scoped to body.gss-experts (list surface only).
   Tokens defined locally + aliased to gss-interactions.css. Full-width to match
   /concepts-ideas/ & /greenstories/. Ledger Table signature per /var/www/DESIGN.md.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

body.gss-experts{
  --gsd-bg:#0A0D0B; --gsd-surface:#10140F; --gsd-surface-2:#161A14; --gsd-surface-3:#1C211A;
  --gsd-fg:#E8E5D9; --gsd-fg-soft:#B5B3A8; --gsd-fg-muted:#9A988C; --gsd-fg-faint:#85847A;
  --gsd-line:rgba(232,230,223,0.08); --gsd-line-strong:rgba(232,230,223,0.16); --gsd-line-faint:rgba(232,230,223,0.04);
  --gsd-green:#5DC97B; --gsd-green-wash:rgba(93,201,123,0.10); --gsd-green-wash-hi:rgba(93,201,123,0.18);
  --gsd-teal:#4FB0BD; --gsd-amber:#E0A03A;
  --gsd-brand:#047122; --gsd-brand-hover:var(--gss-cta-hover,#059130);
  --gsd-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gsd-ease:var(--gss-ease,cubic-bezier(0.22,0.61,0.36,1)); --gsd-dur:var(--gss-dur,200ms); --gsd-radius:2px;
  --gss-accent:var(--gsd-green); --gss-accent-wash:var(--gsd-green-wash);
}

/* =========================================================================
   1 · FINDER  (JS-only view; full-width)
   ========================================================================= */
.gss-experts-finder{ display:none; }
.gss-js body.gss-experts--list .gss-experts-finder{ display:block; }

/* When the Finder is live, hide the native DWQA browse chrome (served as the no-JS /
   native-query fallback). Keep the Ask button. The native filter bar stays for
   logged-in users so My-questions / My-subscribes remain reachable. */
.gss-js body.gss-experts--list .dwqa-breadcrumbs,
.gss-js body.gss-experts--list #dwqa-search,
.gss-js body.gss-experts--list .dwqa-questions-list,
.gss-js body.gss-experts--list .dwqa-questions-footer .dwqa-pagination{ display:none !important; }
.gss-js body.gss-experts--list:not(.logged-in) .dwqa-question-filter{ display:none !important; }

/* Full width: page 4925 is a -full-w template; the only caps were ours. Negate the
   Elementor top-section side padding so the list runs edge-to-edge (~16px gutter),
   matching /concepts-ideas/. */
body.gss-experts--list .elementor-top-section{ padding-left:0 !important; padding-right:0 !important; }
.gss-experts-finder{
  box-sizing:border-box; width:100%; max-width:none; margin:0; padding:8px clamp(16px,3vw,32px) 0;
  font-family:inherit;
}
.gss-experts-finder *,.gss-experts-finder *::before,.gss-experts-finder *::after{ box-sizing:border-box; }

.gss-finder-eyebrow{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-family:var(--gsd-mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gsd-fg-faint); margin-bottom:12px;
}
.gss-finder-count{ color:var(--gss-accent); }

.gss-finder-search{
  display:flex; align-items:center; gap:10px;
  background:var(--gsd-surface); border:1px solid var(--gsd-line-strong);
  border-radius:var(--gsd-radius); padding:6px 6px 6px 16px;
  transition:border-color var(--gsd-dur) var(--gsd-ease), box-shadow var(--gsd-dur) var(--gsd-ease);
}
.gss-finder-search:focus-within{ border-color:var(--gss-accent); box-shadow:0 0 0 3px var(--gss-accent-wash); }
.gss-finder-ico{ display:inline-flex; color:var(--gsd-fg-faint); flex:0 0 auto; }
.gss-finder-search:focus-within .gss-finder-ico{ color:var(--gss-accent); }
.gss-finder-input{
  flex:1 1 auto; min-width:0; background:transparent; border:0; outline:0;
  color:var(--gsd-fg); font-size:15.5px; font-family:inherit; padding:11px 0; letter-spacing:0.01em;
}
.gss-finder-input::placeholder{ color:var(--gsd-fg-faint); }
.gss-finder-input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.gss-finder-submit{
  flex:0 0 auto; cursor:pointer; border:0; border-radius:var(--gsd-radius);
  background:var(--gsd-brand); color:#fff; font-family:var(--gsd-mono); font-weight:600;
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase; padding:11px 20px;
  transition:background var(--gsd-dur) var(--gsd-ease);
}
.gss-finder-submit:hover{ background:var(--gsd-brand-hover); }
.gss-js .gss-finder-submit{ display:none; }

.gss-finder-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.gss-fchip{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap; text-decoration:none;
  font-family:var(--gsd-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gsd-fg-soft); background:transparent;
  border:1px solid var(--gsd-line); border-radius:var(--gsd-radius); padding:7px 13px;
  transition:background var(--gsd-dur) var(--gsd-ease),border-color var(--gsd-dur) var(--gsd-ease),color var(--gsd-dur) var(--gsd-ease);
}
.gss-fchip:hover{ border-color:var(--gsd-line-strong); color:var(--gsd-fg); }
.gss-fchip b{ font-weight:600; color:var(--gsd-teal); }
.gss-fchip.is-active{ background:var(--gss-accent-wash); border-color:var(--gss-accent); color:var(--gsd-fg); }
.gss-fchip.is-active b{ color:var(--gss-accent); }

.gss-experts-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:18px; padding-bottom:10px; border-bottom:1px solid var(--gsd-line-strong);
}
.gss-finder-status{
  min-height:1em; font-family:var(--gsd-mono); font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--gsd-fg-faint);
}
.gss-finder-status mark{ background:none; color:var(--gss-accent); }
.gss-experts-sortwrap{
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  font-family:var(--gsd-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gsd-fg-faint);
}
.gss-experts-sort{
  cursor:pointer; background:var(--gsd-surface); color:var(--gsd-fg-soft);
  border:1px solid var(--gsd-line); border-radius:var(--gsd-radius);
  font-family:var(--gsd-mono); font-size:11px; letter-spacing:0.04em; padding:8px 30px 8px 12px;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gsd-fg-faint) 50%),linear-gradient(135deg,var(--gsd-fg-faint) 50%,transparent 50%);
  background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  transition:border-color var(--gsd-dur) var(--gsd-ease);
}
.gss-experts-sort:hover,.gss-experts-sort:focus{ border-color:var(--gss-accent); outline:0; }

/* =========================================================================
   2 · LEDGER ROWS  (rendered by gss-experts-finder.js)
   ========================================================================= */
.gss-experts-list{ display:flex; flex-direction:column; }
.gss-qrow{
  display:grid; grid-template-columns:150px minmax(0,1fr) auto 18px; gap:20px; align-items:center;
  padding:18px 6px 18px 12px; text-decoration:none; color:inherit; position:relative;
  border-bottom:1px solid var(--gsd-line); border-left:2px solid transparent;
  background-image:none;  /* guard against the Ohio a:hover gradient balloon */
  transition:border-color var(--gsd-dur) var(--gsd-ease);
}
.gss-qrow:first-child{ border-top:1px solid var(--gsd-line); }
/* No background fill on hover (avoids a "boxed" look and the Ohio green-gradient balloon,
   which is also removed via the killswitch in gss-recipes.css). NEVER use the `background`
   shorthand here — it resets background-size and lets the theme gradient fill the row. */
.gss-qrow:hover{ background-image:none !important; border-left-color:var(--gss-accent); text-decoration:none; }

.gss-qrow-thumb{
  display:block; width:150px; height:94px; flex:0 0 auto; position:relative; overflow:hidden;
  border-radius:var(--gsd-radius); background:var(--gsd-surface-2);
}
.gss-qrow-thumb img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.95); display:block; transition:transform 420ms var(--gsd-ease); }
.gss-qrow:hover .gss-qrow-thumb img{ transform:scale(1.05); }
.gss-qrow-thumb--empty{ display:grid; place-items:center; }
.gss-qrow-thumb--empty::after{ content:""; width:32px; height:32px; border:1px solid var(--gsd-line-strong); border-radius:50%; opacity:0.5; }

.gss-qrow-main{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.gss-qrow-cat{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--gsd-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gsd-fg-faint);
}
.gss-qrow-exp{ display:inline-flex; align-items:center; gap:4px; color:var(--gss-accent); }
.gss-qrow-exp::before{ content:"\2713"; font-weight:700; }
.gss-qrow-ans{ display:inline-flex; align-items:center; gap:4px; color:var(--gsd-fg-muted); }
.gss-qrow-ans::before{ content:"\2713"; font-weight:700; opacity:0.7; }
.gss-qrow-title{
  font-family:inherit; font-weight:600; font-size:17px; line-height:1.3; letter-spacing:-0.005em; color:var(--gsd-fg); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color var(--gsd-dur) var(--gsd-ease);
}
.gss-qrow:hover .gss-qrow-title{ color:var(--gss-accent); }
.gss-qrow-title mark{ background:var(--gss-accent-wash); color:var(--gsd-fg); padding:0 2px; border-radius:2px; }
.gss-qrow-ask{ font-family:var(--gsd-mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gsd-fg-muted); }

.gss-qrow-views{ font-family:var(--gsd-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gsd-fg-faint); white-space:nowrap; }
.gss-qrow-views b{ font-weight:600; font-size:14px; color:var(--gsd-fg-soft); margin-right:5px; }

.gss-qrow-go{ color:var(--gsd-fg-faint); font-size:18px; line-height:1; opacity:0; transform:translateX(-4px); transition:opacity var(--gsd-dur) var(--gsd-ease),transform var(--gsd-dur) var(--gsd-ease),color var(--gsd-dur) var(--gsd-ease); }
.gss-qrow:hover .gss-qrow-go{ opacity:1; transform:translateX(0); color:var(--gss-accent); }

/* empty state + load more */
.gss-finder-empty{ text-align:center; padding:56px 20px; border:1px dashed var(--gsd-line-strong); border-radius:var(--gsd-radius); background:var(--gsd-surface); }
.gss-finder-empty h3{ margin:0 0 8px; font-size:18px; color:var(--gsd-fg); }
.gss-finder-empty p{ margin:0 0 18px; color:var(--gsd-fg-muted); font-size:14px; }
.gss-finder-empty button{ cursor:pointer; background:transparent; color:var(--gss-accent); border:1px solid var(--gss-accent); border-radius:var(--gsd-radius); font-family:var(--gsd-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; padding:10px 18px; transition:background var(--gsd-dur) var(--gsd-ease); }
.gss-finder-empty button:hover{ background:var(--gss-accent-wash); }
.gss-finder-more{ display:block; margin:26px auto 0; cursor:pointer; background:transparent; color:var(--gsd-fg); border:1px solid var(--gsd-line-strong); border-radius:var(--gsd-radius); font-family:var(--gsd-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; padding:12px 26px; transition:border-color var(--gsd-dur) var(--gsd-ease),color var(--gsd-dur) var(--gsd-ease); }
.gss-finder-more:hover{ border-color:var(--gss-accent); color:var(--gss-accent); }
.gss-finder-more[hidden]{ display:none; }

.gss-experts-finder a:focus-visible,
.gss-experts-finder button:focus-visible,
.gss-experts-finder select:focus-visible,
.gss-finder-input:focus-visible,
.gss-qrow:focus-visible{ outline:2px solid var(--gss-accent); outline-offset:3px; border-radius:var(--gsd-radius); }

/* =========================================================================
   3 · NATIVE DWQA LIST  (dark-styled fallback: no-JS + ?filter/?sort/?qs/paged)
   ========================================================================= */
body.gss-experts--list .dwqa-container{ max-width:none; margin:0; padding:0; color:var(--gsd-fg); }
body.gss-experts .dwqa-breadcrumbs{ font-family:var(--gsd-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gsd-fg-faint); margin:8px 0 18px; }
body.gss-experts .dwqa-breadcrumbs a{ color:var(--gsd-fg-muted); text-decoration:none; }
body.gss-experts .dwqa-breadcrumbs a:hover{ color:var(--gss-accent); }

body.gss-experts--list #dwqa-search{ display:flex; align-items:center; gap:10px; background:var(--gsd-surface); border:1px solid var(--gsd-line-strong); border-radius:var(--gsd-radius); padding:6px 6px 6px 16px; margin-bottom:16px; }
body.gss-experts--list #dwqa-search input{ flex:1 1 auto; background:transparent; border:0; outline:0; color:var(--gsd-fg); font-size:15px; padding:10px 0; }
body.gss-experts--list #dwqa-search input::placeholder{ color:var(--gsd-fg-faint); }

body.gss-experts--list .dwqa-question-filter{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-family:var(--gsd-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gsd-fg-faint);
  padding:4px 0 12px; border-bottom:1px solid var(--gsd-line-strong); margin-bottom:6px;
}
body.gss-experts--list .dwqa-question-filter > span{ margin-right:4px; }
body.gss-experts--list .dwqa-question-filter a{ color:var(--gsd-fg-soft); text-decoration:none; border:1px solid var(--gsd-line); border-radius:var(--gsd-radius); padding:6px 12px; transition:border-color var(--gsd-dur) var(--gsd-ease),color var(--gsd-dur) var(--gsd-ease); }
body.gss-experts--list .dwqa-question-filter a:hover{ color:var(--gsd-fg); border-color:var(--gsd-line-strong); }
body.gss-experts--list .dwqa-question-filter a.active{ color:var(--gsd-fg); background:var(--gss-accent-wash); border-color:var(--gss-accent); }
body.gss-experts--list .dwqa-sort-by{ margin-left:auto; cursor:pointer; background:var(--gsd-surface); color:var(--gsd-fg-soft); border:1px solid var(--gsd-line); border-radius:var(--gsd-radius); font-family:var(--gsd-mono); font-size:11px; padding:8px 12px; }

body.gss-experts--list .dwqa-questions-list{ margin-top:4px; }
body.gss-experts--list .dwqa-question-item{
  position:static; padding:18px 6px; margin:0; border-bottom:1px solid var(--gsd-line);
  border-left:2px solid transparent; background-image:none;
  transition:border-color var(--gsd-dur) var(--gsd-ease);
}
body.gss-experts--list .dwqa-question-item:hover{ border-left-color:var(--gss-accent); }
body.gss-experts--list .dwqa-question-item.dwqa-sticky{ background:var(--gsd-surface-2); }
body.gss-experts--list .dwqa-question-title{ font-size:17px; line-height:1.3; font-weight:600; margin:0 0 6px; }
body.gss-experts--list .dwqa-question-title a{ color:var(--gsd-fg); text-decoration:none; border:0 !important; }
body.gss-experts--list .dwqa-question-item:hover .dwqa-question-title a{ color:var(--gss-accent); }
body.gss-experts--list .dwqa-question-meta{ font-family:var(--gsd-mono); font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--gsd-fg-muted); margin:0 0 8px; }
body.gss-experts--list .dwqa-question-meta a{ color:var(--gsd-fg-soft); text-decoration:none; }
body.gss-experts .dwqa-question-item .avatar,
body.gss-experts .dwqa-question-meta .avatar{ position:static; float:none; width:26px; height:26px; border-radius:50%; vertical-align:middle; margin:0 8px 0 0; }
body.gss-experts--list .dwqa-question-category{ color:var(--gsd-fg-faint); }
body.gss-experts--list .dwqa-question-stats{ display:flex; gap:20px; font-family:var(--gsd-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gsd-fg-faint); }
body.gss-experts--list .dwqa-question-stats strong{ color:var(--gsd-fg-soft); font-weight:600; }

body.gss-experts--list .dwqa-questions-footer{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:22px; }
body.gss-experts .dwqa-pagination{ display:flex; gap:6px; flex-wrap:wrap; }
body.gss-experts .dwqa-pagination a,
body.gss-experts .dwqa-pagination span{ display:inline-block; border:1px solid var(--gsd-line); border-radius:var(--gsd-radius); padding:7px 12px; margin:0; color:var(--gsd-fg-soft); text-decoration:none; font-family:var(--gsd-mono); font-size:12px; }
body.gss-experts .dwqa-pagination a:hover{ border-color:var(--gss-accent); color:var(--gss-accent); }
body.gss-experts .dwqa-pagination .dwqa-current,
body.gss-experts .dwqa-pagination span.current{ background:var(--gss-accent-wash); border-color:var(--gss-accent); color:var(--gsd-fg); }

/* Ask button -> brand CTA (kept visible under the Finder too) */
body.gss-experts .dwqa-ask-question a,
body.gss-experts a.dwqa-ask-question{
  display:inline-flex; align-items:center; gap:8px; background:var(--gsd-brand); color:#fff !important; text-decoration:none;
  font-family:var(--gsd-mono); font-weight:600; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  padding:13px 22px; border-radius:var(--gsd-radius); border:0; transition:background var(--gsd-dur) var(--gsd-ease);
}
body.gss-experts .dwqa-ask-question a:hover{ background:var(--gsd-brand-hover); color:#fff !important; }
.gss-js body.gss-experts--list .dwqa-questions-footer{ justify-content:center; margin-top:8px; }

/* =========================================================================
   4 · RESPONSIVE
   ========================================================================= */
@media (max-width:640px){
  .gss-experts-finder{ padding:8px 16px 0; }
  .gss-finder-eyebrow{ font-size:9.5px; letter-spacing:0.14em; margin-bottom:10px; }
  .gss-experts-toolbar{ gap:10px; margin-top:14px; }
  /* Thumbnail spans both rows (col1); text on row1, views tucked on row2 in the SAME
     column as the text (grid-aligned, no manual indent). */
  .gss-qrow{
    grid-template-columns:92px minmax(0,1fr);
    grid-template-areas:"thumb main" "thumb views";
    grid-template-rows:auto auto;
    align-items:start; column-gap:14px; row-gap:8px; padding:15px 2px 16px 4px;
  }
  .gss-qrow-thumb{ grid-area:thumb; width:92px; height:70px; align-self:start; }
  .gss-qrow-main{ grid-area:main; gap:6px; }
  .gss-qrow-cat{ font-size:9.5px; letter-spacing:0.1em; gap:8px; }
  .gss-qrow-title{ font-size:15px; line-height:1.36; -webkit-line-clamp:3; }
  .gss-qrow-ask{ font-size:10px; letter-spacing:0.04em; }
  .gss-qrow-views{ grid-area:views; align-self:start; }
  .gss-qrow-go{ display:none; }
  .gss-finder-chips{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding-bottom:6px; margin-right:-16px; padding-right:16px; }
  .gss-fchip{ flex:0 0 auto; scroll-snap-align:start; }
  .gss-finder-input[type="search"]{ font-size:16px; }
}

/* =========================================================================
   5 · REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .gss-qrow,.gss-qrow-thumb img,.gss-qrow-go,.gss-qrow-title,.gss-fchip,.gss-finder-search,.gss-finder-more{ transition:none; }
  .gss-qrow:hover .gss-qrow-thumb img{ transform:none; }
}