/* Ethical Stack — a readable, evidence-led consumer guide. */
:root {
  --paper:#f8f7f1; --paper-2:#efeee6; --ink:#25332b; --forest:#173e31;
  --muted:#59655e; --line:#d4d8cc; --line-strong:#aab5a4;
  --green:#285d32; --green-bg:#e5efde; --green-line:#bccfb0;
  --yellow:#765318; --yellow-bg:#f8efd5; --yellow-line:#ddc98e;
  --red:#963f35; --red-bg:#f9e4de; --red-line:#e2b7ac;
  --serif:Georgia,'Iowan Old Style',serif; --sans:system-ui,-apple-system,'Segoe UI',sans-serif;
  --max:1440px;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 var(--sans); }
img,svg { max-width:100%; }
a { color:var(--forest); text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:2px solid var(--forest); outline-offset:4px; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip { position:absolute; top:8px; left:16px; transform:translateY(-160%); padding:8px 16px; background:var(--forest); color:var(--paper); z-index:10; }
.skip:focus { transform:none; }
.site-header { border-bottom:1px solid var(--line); }
.header-inner,main,.crumbs,.footer-inner { width:calc(100% - 64px); max-width:var(--max); margin-inline:auto; }
.header-inner { display:flex; flex-wrap:wrap; align-items:center; gap:8px 28px; padding-block:20px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; flex:none; min-height:44px; }
.mark { width:28px; height:28px; flex:none; }
.wordmark { font:30px/1 var(--serif); letter-spacing:-1px; }
.site-nav { display:flex; flex-wrap:wrap; gap:4px 22px; margin-left:auto; }
.site-nav a { min-height:44px; display:flex; align-items:center; color:var(--ink); text-decoration:none; font-size:16px; }
.site-nav a:hover,.site-nav a[aria-current=page] { text-decoration:underline; text-underline-offset:6px; }
main { padding-block:48px 80px; min-width:0; }
.crumbs { padding-top:20px; }
.crumbs ol { display:flex; flex-wrap:wrap; gap:6px 10px; margin:0; padding:0; list-style:none; font-size:16px; color:var(--muted); }
.crumbs li+li::before { content:'/'; margin-right:10px; color:var(--line-strong); }
h1,h2 { font-family:var(--serif); font-weight:400; color:var(--forest); letter-spacing:-.035em; }
h1 { font-size:clamp(38px,4.7vw,66px); line-height:1.08; margin:0 0 20px; max-width:17ch; }
h2 { font-size:clamp(28px,3vw,38px); line-height:1.16; margin:0 0 16px; }
h3 { font-size:17px; line-height:1.4; margin:26px 0 10px; }
p { margin:0 0 16px; }
.deck,.answer { max-width:65ch; font-size:19px; line-height:1.6; color:#46574b; margin-bottom:24px; }
.fine,.source-note,.meta-line,.scope-label,.assessment-kind { font-size:16px; color:var(--muted); }
.directory-hero { padding-block:8px 0; }
.directory-hero h1 { max-width:20ch; }
.jump-links { display:flex; flex-wrap:wrap; gap:8px 28px; margin:28px 0 20px; }
.jump-links a { display:flex; align-items:center; gap:16px; min-height:44px; border-bottom:1px solid var(--forest); text-decoration:none; font-size:16px; font-weight:600; }
.jump-links span { font-weight:400; color:var(--muted); }
.rating-legend { display:flex; flex-wrap:wrap; gap:10px 24px; font-size:16px; align-items:center; margin:0 0 14px; color:var(--muted); }
.legend-item { display:inline-flex; align-items:center; gap:7px; }
.legend-dot { width:10px; height:10px; border-radius:50%; flex:none; }
.green { background:var(--green); }.yellow { background:var(--yellow); }.red { background:var(--red); }
.unrated-key { color:var(--muted); }
.bds-key { font-size:16px; max-width:110ch; color:var(--muted); margin-bottom:0; }
.directory-section { margin-top:52px; min-width:0; scroll-margin-top:24px; }
.section-title { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:12px; }
.section-title h2 { margin:0; }
.text-link { font-size:16px; display:inline-flex; align-items:center; min-height:44px; }
.table-toolbar { display:flex; flex-wrap:wrap; gap:14px 16px; align-items:flex-end; padding:20px; background:var(--paper-2); border:1px solid var(--line); }
.table-toolbar>div { flex:1 1 225px; min-width:0; }
.table-toolbar>.search-control { flex:2 1 300px; }
label { display:block; font-size:16px; font-weight:600; margin-bottom:6px; }
input[type=search],select { width:100%; min-height:44px; border:1px solid var(--line-strong); border-radius:4px; background:var(--paper); color:var(--ink); padding:10px 12px; font:16px/1.4 var(--sans); }
input[type=search]::placeholder { color:#69736c; }
.table-options { flex:0 1 auto; }
.table-options summary { min-height:44px; cursor:pointer; display:list-item; list-style-position:inside; padding:10px 12px; font-size:16px; border:1px solid var(--line-strong); border-radius:4px; }
.table-options[open] { flex-basis:100%; order:4; }
.table-options[open] summary { width:max-content; margin-bottom:14px; }
.advanced-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:680px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; border:1px solid var(--forest); border-radius:4px; background:var(--forest); color:var(--paper); font:16px/1.4 var(--sans); cursor:pointer; text-decoration:none; }
.button:hover { background:#244d3c; color:var(--paper); }
.button-quiet { color:var(--forest); background:transparent; border-color:var(--line-strong); }
.button-quiet:hover { background:#e3e9dc; color:var(--forest); }
.button:disabled { color:#69736c; border-color:var(--line); background:transparent; cursor:default; }
.results-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px 20px; margin:14px 0; font-size:16px; }
.results-bar p { margin:0; }
.compare-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.compare-actions>[data-role=selection] { margin-right:8px; color:var(--muted); }
.compare-actions [data-role=copy-note]:empty { display:none; }
.table-scroll { width:100%; max-width:100%; overflow:auto; border:1px solid var(--line); -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.compare-table { border-spacing:0; border-collapse:separate; table-layout:fixed; width:1332px; min-width:100%; font-size:16px; line-height:1.4; }
.logo-col { width:52px; }.item-col { width:240px; }.overall-col { width:144px; }.dimension-col { width:120px; }.bds-col { width:176px; }
.compare-table caption:not(.sr-only) { caption-side:bottom; text-align:left; padding:16px; color:var(--muted); font-size:16px; border-top:1px solid var(--line); background:var(--paper); }
.compare-table th,.compare-table td { position:static; padding:16px 12px; text-align:left; vertical-align:middle; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); overflow-wrap:anywhere; }
.compare-table th:last-child,.compare-table td:last-child { border-right:0; }
.compare-table tbody tr:last-child>* { border-bottom:0; }
.compare-table tbody tr:nth-child(even)>* { background:#f2f3ec; }
.compare-table thead th { background:#e8ecdf; font-weight:600; color:var(--forest); padding:8px 12px; }
.compare-table .logo-cell { padding:12px 10px; text-align:center; }
.logo-cell>a { display:flex; align-items:center; justify-content:center; }
.product-logo { width:30px; height:30px; display:block; object-fit:contain; flex:none; }
.item-name { display:flex; align-items:center; gap:2px; font-weight:400; min-width:0; }
.rank-number { font-size:16px; color:var(--muted); width:20px; flex:none; text-align:center; font-variant-numeric:tabular-nums; }
.row-selector { display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; flex:none; margin:0; cursor:pointer; }
.row-select { width:17px; height:17px; margin:0; accent-color:var(--forest); cursor:pointer; }
.name-link { display:inline-block; padding-block:5px; font-size:16px; font-weight:650; line-height:1.4; text-decoration:none; }
.name-link:hover { text-decoration:underline; }
.column-sort { font:inherit; line-height:1.35; color:inherit; text-align:left; display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; gap:8px; background:none; border:0; padding:0; cursor:pointer; }
.column-sort span { color:var(--muted); font-weight:400; }
.score-link { display:block; text-decoration:none; min-height:44px; }
.score-link:hover .rating,.score-link:hover .bds-badge { border-color:var(--forest); }
.rating { display:inline-flex; align-items:center; justify-content:center; flex-direction:column; gap:3px; min-width:64px; padding:8px 12px; border:1px solid var(--line); border-radius:4px; color:var(--ink); font-size:16px; line-height:1.4; }
.rating strong { font-size:22px; line-height:1.1; font-weight:650; font-variant-numeric:tabular-nums; }
.rating small { font-size:16px; font-weight:400; margin-left:2px; }
.rating>span:empty { display:none; }
.rating-green { color:var(--green); background:var(--green-bg); border-color:var(--green-line); }
.rating-yellow { color:var(--yellow); background:var(--yellow-bg); border-color:var(--yellow-line); }
.rating-red { color:var(--red); background:var(--red-bg); border-color:var(--red-line); }
.rating-unrated { color:var(--muted); background:#efefe7; border-color:#d7dacd; min-width:0; width:100%; padding:8px; text-align:center; font-size:16px; }
.rating-unrated strong { font-weight:400; }
.bds-badge { display:flex; flex-direction:column; gap:4px; padding:10px; border:1px solid var(--line); border-radius:4px; font-size:16px; line-height:1.4; }
.bds-badge>span { font-size:16px; }
.bds-neutral { background:#ecefec; color:#4a5750; border-color:#cdd4cd; }
.bds-red { background:var(--red-bg); color:var(--red); border-color:var(--red-line); }
.bds-yellow { background:var(--yellow-bg); color:var(--yellow); border-color:var(--yellow-line); }
.upstream-label { display:block; font-size:16px; color:var(--yellow); margin-top:8px; }
.compare-table .is-focus { background:#eaf0e2; }
.compare-table thead .is-focus { background:#d9e4cf; }
.empty { padding:24px; border:1px solid var(--line); }
.empty h3 { margin-top:0; }
.directory-ending { max-width:68ch; margin-top:64px; padding-top:32px; border-top:1px solid var(--line); }
.page-intro { margin-bottom:32px; }
.tabs { display:flex; flex-wrap:wrap; gap:8px 24px; border-bottom:1px solid var(--line); margin:0 0 28px; }
.tabs a { display:flex; align-items:center; min-height:44px; font-size:16px; text-decoration:none; border-bottom:2px solid transparent; }
.tabs a[aria-current=page] { border-bottom-color:var(--forest); }
.profile,.doc { max-width:960px; }
.profile-title { display:flex; align-items:center; gap:18px; margin-bottom:18px; }
.profile-title .product-logo { width:48px; height:48px; }
.profile-title h1 { margin:0; }
.profile-intro { margin-bottom:20px; }
.profile-summary { max-width:70ch; font-size:17px; line-height:1.55; margin:0 0 12px; }
.profile-actions { display:flex; flex-wrap:wrap; gap:4px 24px; }
.profile-actions a { display:inline-flex; align-items:center; min-height:44px; font-size:16px; }
.profile-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 20px; scroll-margin-top:24px; }
.profile-metric { display:grid; grid-template-rows:20px 60px 20px; gap:4px; min-width:0; padding:12px 16px; text-decoration:none; border:1px solid var(--line); border-radius:4px; color:var(--forest); background:var(--paper-2); }
.profile-metric:hover { border-color:var(--forest); }
.metric-label { font-size:16px; line-height:20px; }
.metric-value { display:flex; align-items:center; gap:3px; font:600 40px/1 var(--sans); letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.metric-unit { font-size:16px; font-weight:400; letter-spacing:0; align-self:center; }
.metric-coverage { font-size:16px; line-height:20px; }
.metric-green { color:var(--green); background:var(--green-bg); border-color:var(--green-line); }
.metric-yellow { color:var(--yellow); background:var(--yellow-bg); border-color:var(--yellow-line); }
.metric-red { color:var(--red); background:var(--red-bg); border-color:var(--red-line); }
.metric-neutral { color:var(--muted); background:var(--paper-2); }
.metric-status .metric-value { font-size:20px; line-height:1.25; letter-spacing:0; }
.profile-extras { display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin-bottom:20px; }
.profile-extra { min-width:0; }
.profile-extra summary,.finding-details summary,.profile-sources>summary { cursor:pointer; width:fit-content; padding-block:10px; min-height:44px; text-decoration:underline; text-underline-offset:4px; }
.profile-extra>div { padding:12px 0 8px; max-width:70ch; }
.score-formula { font-variant-numeric:tabular-nums; font-weight:600; }
.profile-finding { padding:24px 0; border-top:1px solid var(--line); scroll-margin-top:20px; }
.finding-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:8px; }
.finding-heading h2 { font-size:28px; margin:0; }
.back-to-scores { display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; text-decoration:none; color:var(--muted); }
.profile-finding>p { max-width:75ch; margin:0 0 4px; }
.finding-details .assessment-note { padding:12px 0 0; max-width:75ch; }
.finding-sources,.sources { padding-left:22px; font-size:16px; }
.finding-sources li,.sources li { margin:8px 0; overflow-wrap:anywhere; }
.profile-sources { border-top:1px solid var(--line); padding-top:16px; margin-top:8px; scroll-margin-top:20px; }
.profile-sources>summary { font-size:22px; font-family:var(--serif); }
.profile-ending { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding-top:28px; margin-top:20px; border-top:1px solid var(--line); }
.profile-ending a { display:inline-flex; align-items:center; min-height:44px; }
.prose { max-width:72ch; }
.prose h2 { margin-top:40px; font-size:30px; }
.prose h3 { margin-top:28px; }
.prose li { margin-block:10px; }
.faq { border-top:1px solid var(--line); padding:24px 0; max-width:72ch; }
.faq h2 { font-size:24px; }
.site-footer { border-top:1px solid var(--line); }
.footer-inner { padding-block:36px 48px; color:var(--muted); font-size:16px; }
.footer-inner>p { max-width:70ch; }
.footer-brand { display:flex; align-items:center; gap:10px; font:26px var(--serif); color:var(--forest); }
.footer-owner { display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; }
.footer-owner a { display:inline-flex; min-height:44px; align-items:center; }
.footer-links { display:flex; flex-wrap:wrap; gap:4px 24px; margin:12px 0 0; padding:0; list-style:none; }
.footer-links a { display:inline-flex; min-height:44px; align-items:center; }
dialog { width:min(1100px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:0; color:var(--ink); background:var(--paper); border:1px solid var(--line-strong); border-radius:6px; }
dialog::backdrop { background:rgb(23 62 49 / .45); }
.dialog-head { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px; border-bottom:1px solid var(--line); }
.dialog-head h2 { margin:0; font-size:28px; }
.dialog-grid { display:grid; grid-template-columns:repeat(var(--dialog-cols,2),minmax(0,1fr)); }
.dialog-col { min-width:0; padding:24px; border-right:1px solid var(--line); }
.dialog-col:last-child { border:0; }
.dialog-col h3 { font:26px var(--serif); margin:0 0 16px; }
.dialog-col>p { font-size:16px; }
.dialog-dims { list-style:none; margin:0; padding:0; }
.dialog-dims li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:16px 0; border-top:1px solid var(--line); font-size:16px; }
.dialog-dims li>a { max-width:55%; }
.dialog-dims .rating { min-width:56px; }
@media(max-width:1100px) {
  .table-toolbar>.search-control { flex-basis:280px; }
}
@media(max-width:700px) {
  .header-inner,main,.crumbs,.footer-inner { width:calc(100% - 32px); }
  .header-inner { padding-block:14px 10px; gap:4px; }
  .wordmark { font-size:28px; }
  .site-nav { margin:0; width:100%; gap:4px 16px; }
  .site-nav a:nth-last-child(-n+2) { display:none; }
  .site-nav a { font-size:16px; }
  main { padding-block:32px 56px; }
  h1 { font-size:40px; max-width:18ch; }
  .deck,.answer { font-size:17px; line-height:1.6; }
  .directory-hero { padding-top:0; }
  .jump-links { display:grid; gap:8px; margin-top:20px; }
  .jump-links a { justify-content:space-between; }
  .rating-legend { gap:10px 16px; }
  .directory-section { margin-top:36px; }
  .section-title { gap:0; }
  .section-title h2 { font-size:30px; }
  .table-toolbar { padding:14px; gap:12px; }
  .table-toolbar>.search-control { flex-basis:100%; }
  .table-toolbar>div { flex:1 1 calc(100% - 70px); }
  .table-options { flex:1 1 auto; }
  .table-options[open] { order:0; }
  .table-options summary { font-size:16px; }
  .advanced-filters { grid-template-columns:1fr; }
  .results-bar { gap:8px; }
  .compare-actions { width:100%; }
  .compare-actions .button { font-size:16px; padding-inline:12px; }
  .compare-actions>[data-role=selection] { margin-right:auto; }
  .compare-table { width:1264px; }
  .logo-col { width:44px; }.item-col { width:172px; }.overall-col { width:104px; }.dimension-col { width:128px; }.bds-col { width:176px; }
  .compare-table th,.compare-table td { padding:12px 8px; }
  .compare-table .logo-cell { padding-inline:7px; }
  .product-logo { width:28px; height:28px; }
  .rank-number { width:20px; font-size:16px; }
  .name-link { font-size:16px; }
  .rating { padding:8px 10px; }
  .overall-score strong { font-size:22px; }
  .profile-title { gap:12px; }
  .profile-title .product-logo { width:36px; height:36px; }
  .profile-title h1 { font-size:36px; }
  .profile-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .profile-metric { padding-inline:12px; }
  .metric-value { font-size:36px; }
  .metric-status .metric-value { font-size:18px; }
  .profile-actions { gap:4px 20px; }
  .profile-extras { grid-template-columns:1fr; gap:0; margin-bottom:16px; }
  .profile-finding { padding-block:20px; }
  .finding-heading h2 { font-size:26px; }
  .dialog-grid { grid-template-columns:1fr; }
  .dialog-col { border-right:0; border-bottom:1px solid var(--line); padding:20px; }
  .dialog-head { padding:16px 20px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
