/* journals.com.br — academic index, after Sol LeWitt.
   Flat primaries on paper, hairline grids, square corners. No gradients, no soft shadows.
   Line directions carry meaning: vertical = yellow, horizontal = black, diagonal (/) = red, anti-diagonal (\) = blue. */

:root {
  --paper: #fbfaf6;
  --panel: #f3f1ea;
  --ink: #141414;
  --ink-2: #3b3a37;
  --ink-3: #6d6a63;
  --hair: #d5d1c6;
  --rule: #141414;
  --blue: #1f4b99;
  --red: #c42f25;
  --yellow: #e3b21c;
  --link: #1f4b99;

  --serif: 'STIX Two Text', 'STIX Two', 'Times New Roman', Times, serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --col: 42.5rem;    /* one reading column (680px): body text, leads, hero, search and prose all end at the same edge */
  --ctl: 2.5rem;      /* one height for inputs, selects and buttons */
  --ctl-lg: 3.1rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121211; --panel: #1b1b19; --ink: #ecebe5; --ink-2: #c9c7bf; --ink-3: #94918a; --hair: #34332f; --rule: #ecebe5;
    --blue: #7ea3e6; --red: #ec6a5f; --yellow: #e9c34d; --link: #8fb0ea;
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
form { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.5 var(--serif); font-variant-numeric: lining-nums; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; letter-spacing: 0; }
h1 { font-size: 2rem; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
code, .mono { font-family: var(--mono); font-size: .86em; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--ink-3); }
.hint { color: var(--ink-3); font-size: .85rem; }
.lead { font-size: 1.05rem; color: var(--ink-2); max-width: var(--col); }
/* Rows of items split by hairlines. Every item carries a separator on its left, and the row is shifted left and
   clipped so the separator that starts each line falls outside it: a wrapped line never starts with a stray rule. */
.hero-stats, .j-links, .page-links { display: flex; flex-wrap: wrap; gap: 4px 0; overflow: hidden; margin-left: -13px; padding: 2px 0; }
.hero-stats > *, .j-links > *, .page-links > * { margin-left: -1px; padding: 0 12px 0 13px; border-left: 1px solid var(--hair); }
/* no lone word on a paragraph's last line */
.lead, .hero-sub, .prose p, .prose li { text-wrap: pretty; }
.note { font-size: .9rem; border-left: 3px solid var(--blue); padding: 2px 0 2px 10px; color: var(--ink-2); }
.note-warn { border-left-color: var(--red); }
::selection { background: var(--yellow); color: #141414; }

/* small caps labels used everywhere */
.crumbs, .flag-sev, .stats dt, th, .filters > span:first-child, .header-nav a, .footer-nav a, .rule-badge, .verdict-q {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500;
}

/* ---------- masthead ---------- */
.masthead { border-bottom: 3px solid var(--rule); box-shadow: 0 2px 0 var(--paper), 0 3px 0 var(--rule); margin-bottom: 3px; }
.header-inner { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-name { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; letter-spacing: -.005em; }
.brand-name span { font-family: var(--mono); font-size: .62em; font-weight: 400; color: var(--ink-3); margin-left: 1px; }
.header-search { flex: 1; min-width: 220px; max-width: 480px; margin-left: auto; }
/* Search boxes: the form draws the border and fixes the height; input and button fill it exactly. */
.header-search, .search { display: flex; align-items: stretch; height: var(--ctl); border: 1px solid var(--ink); background: var(--paper); }
.header-search:focus-within, .search:focus-within { outline: 2px solid var(--blue); outline-offset: 0; }
/* (selectors carry the element + attribute so they outrank the generic control rules further down) */
form.header-search input[type=search], form.search input[type=search] { flex: 1; height: auto; border: 0; outline: 0; background: transparent; }
form.header-search button, form.search button { height: auto; border: 0; }
form.header-search input[type=search]:focus, form.search input[type=search]:focus { outline: 0; }
.header-nav { display: flex; align-items: center; height: var(--ctl); }
.header-nav a { display: inline-flex; align-items: center; height: var(--ctl); color: var(--ink); text-decoration: none; padding: 0 2px; line-height: 1; }
.header-nav a:hover { color: var(--blue); }
/* menu toggle: phones only, and only with JS (without it search and nav stay visible) */
button.menu-toggle { display: none; align-items: center; justify-content: center; width: var(--ctl); height: var(--ctl); padding: 0; margin-left: auto;
  border: 0; background: none; color: var(--ink); }
button.menu-toggle:hover, button.menu-toggle[aria-expanded=true] { background: none; color: var(--blue); }
button.menu-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
button.menu-toggle[aria-expanded=true] .i-menu, button.menu-toggle:not([aria-expanded=true]) .i-close { display: none; }

/* ---------- mark & line drawings ---------- */
.mark { display: block; flex: 0 0 auto; }
.mark-frame { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.mark-title, .l-h { fill: var(--ink); }
.l-v { fill: var(--yellow); }
.l-d { fill: var(--red); }
.l-a { fill: var(--blue); }
/* The big home-page mark, on a 5.4s loop: the page is typeset line by line and the bars rise, it holds for ~2s
   while the diagonal figure drifts, then wipes off (lines out to the right, bars up) and starts over.
   Every element runs the same cycle, so the per-element delays stagger both the build and the wipe. */
@media (prefers-reduced-motion: no-preference) {
  .mark-anim { --cycle: 5.4s; }
  .mark-anim .mark-title, .mark-anim .l-h, .mark-anim .l-v { transform-box: fill-box; animation: mark-set var(--cycle) cubic-bezier(.2, .7, .2, 1) infinite both; }
  .mark-anim .mark-title, .mark-anim .l-h { transform-origin: left center; }
  .mark-anim .l-h { animation-delay: calc(.3s + var(--i) * .09s); }
  .mark-anim .l-v { transform-origin: center bottom; animation-name: mark-rise; animation-delay: calc(.75s + var(--i) * .08s); }
  .mark-anim .mark-march { animation: mark-fade var(--cycle) 1.1s ease infinite both, mark-march 4s 1.1s linear infinite; }
}
@keyframes mark-set { 0% { transform: scaleX(0); } 9.3%, 66.7% { transform: none; } 75%, 100% { transform: translateX(100%) scaleX(0); } }
@keyframes mark-rise { 0% { transform: scaleY(0); } 9.3%, 66.7% { transform: none; } 75%, 100% { transform: translateY(-100%) scaleY(0); } }
@keyframes mark-fade { 0% { opacity: 0; } 9.3%, 66.7% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes mark-march { to { transform: translateX(var(--march)); } }

/* ---------- forms ---------- */
input[type=search], select {
  font: 1rem var(--serif); color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink); border-radius: 0; padding: 0 10px; height: var(--ctl); line-height: 1; min-width: 0; margin: 0;
  -webkit-appearance: none; appearance: none;
}
select {
  padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236d6a63'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
input[type=search]:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; }
button, .button {
  font: 500 .78rem var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  border: 1px solid var(--ink); border-radius: 0; padding: 0 16px; height: var(--ctl); line-height: 1; margin: 0;
  background: var(--ink); color: var(--paper); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s, border-color .15s;
}
button:hover, .button:hover { background: var(--blue); border-color: var(--blue); }

main.wrap { padding-top: 28px; padding-bottom: 56px; min-height: 60vh; }

/* ---------- home ---------- */
.hero { padding: 12px 0 8px; display: grid; grid-template-columns: minmax(0, var(--col)) minmax(0, 1fr); gap: 0 48px; align-items: center; }
.hero-art { justify-self: end; width: 100%; max-width: 240px; }
.hero-art .mark { width: 100%; height: auto; }
.hero h1 { font-size: clamp(2rem, 4.6vw, 2.9rem); line-height: 1.1; margin: 0 0 14px; max-width: 22ch; }
.hero-sub { font-size: 1.12rem; color: var(--ink-2); max-width: var(--col); margin: 0 0 24px; }
.hero-stats { max-width: calc(var(--col) + 13px); margin-top: 14px; margin-bottom: 0; font-family: var(--mono); font-size: .75rem; color: var(--ink-3); }

.search { position: relative; max-width: var(--col); margin: 0 0 12px; }
.search-big { height: var(--ctl-lg); }
.search-big input { font-size: 1.15rem; padding: 0 14px; }
.search-big button { padding: 0 24px; }
.suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; background: var(--paper); border: 1px solid var(--ink); border-top: 0; text-align: left; }
.suggest a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; color: var(--ink); text-decoration: none; border-top: 1px solid var(--hair); }
.suggest a:first-child { border-top: 0; }
.suggest a:hover, .suggest a.active { background: var(--panel); }
.suggest small { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }
.suggest .pill, .hit-tags .pill { font-size: .62rem; padding: 2px 6px; }

.block { margin: 36px 0; }
/* the page's first block sits right under the masthead, like the journal page's header */
main > .block:first-child { margin-top: 0; }
.block > h2 { padding-top: 10px; border-top: 1px solid var(--rule); }
.area-grid { list-style: none; padding: 0; margin: 0; columns: 3 240px; column-gap: 32px; column-rule: 1px solid var(--hair); }
.area-grid li { break-inside: avoid; padding: 4px 0; border-bottom: 1px solid var(--hair); }
.area-grid a { text-decoration: none; }
.area-grid a:hover { text-decoration: underline; }

.page-title { font-size: clamp(1.7rem, 4vw, 2.25rem); margin: 0 0 .6rem; }
.crumbs { color: var(--ink-3); margin: 0 0 8px; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--blue); }

/* ---------- result lists (PubMed-style) ---------- */
.hits { list-style: none; padding: 0; margin: 14px 0; counter-reset: hit; border-top: 1px solid var(--rule); }
.hits li { counter-increment: hit; border-bottom: 1px solid var(--hair); }
.hit { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 11px 0; text-decoration: none; color: var(--ink); }
.hit::before { content: counter(hit) "."; font: .78rem var(--mono); color: var(--ink-3); text-align: right; }
.hit-main { display: flex; flex-direction: column; min-width: 0; }
.hit-title { color: var(--link); font-size: 1.06rem; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; transition: text-decoration-color .15s; }
.hit:hover .hit-title { text-decoration-color: currentColor; }
.hit-meta { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.hit-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.tag { font: 500 .66rem var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--hair); padding: 1px 5px; white-space: nowrap; display: inline-block; margin: 2px 3px 2px 0; }
.hit-count { font: .74rem var(--mono); color: var(--ink-2); white-space: nowrap; margin-right: 4px; }
.est { font: 500 .74rem var(--mono); color: var(--blue); border: 1px solid var(--blue); padding: 1px 6px; white-space: nowrap; }
.risk { font: 500 .66rem var(--mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; padding: 1px 5px; }
.risk-high { background: var(--red); color: #fff; }
.risk-medium { color: var(--red); border: 1px solid var(--red); }

/* Qualis strata: A = blue, B = yellow, C = red. Flat squares. */
.q { display: inline-block; min-width: 2.5em; text-align: center; font: 500 .74rem/1.5 var(--mono); padding: 1px 4px; color: #fff; }
.q-a1, .q-a2, .q-a3, .q-a4 { background: var(--blue); }
.q-b1, .q-b2, .q-b3, .q-b4, .q-b5 { background: var(--yellow); color: #141414; }
.q-c { background: var(--red); }
.q-none { color: var(--ink-3); border: 1px dotted var(--ink-3); background: transparent; padding: 0 3px; }
@media (prefers-color-scheme: dark) { .q-a1, .q-a2, .q-a3, .q-a4, .q-c { color: #121211; } }

/* ---------- journal page ---------- */
.j-head { padding-bottom: 16px; border-bottom: 1px solid var(--rule); margin-bottom: 20px; }
.j-head h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); margin: 0 0 8px; max-width: 30ch; }
.j-country { display: inline-flex; align-items: center; gap: 6px; }
.flag-img { display: block; width: 16px; height: 12px; box-shadow: 0 0 0 1px var(--hair); }
button.copy-btn { height: auto; padding: 2px; margin: 0 0 0 2px; border: 0; background: none; color: var(--ink-3); display: inline-flex; }
button.copy-btn:hover { background: none; color: var(--blue); }
button.copy-btn svg { fill: none; stroke: currentColor; stroke-width: 1.2; }
button.copy-btn.copied { color: var(--blue); }
button.copy-btn.copied svg rect { fill: currentColor; }
.j-links { align-items: center; font-family: var(--mono); font-size: .76rem; margin-top: 0; margin-bottom: 0; color: var(--ink-2); }
.j-links + .j-links, .j-more .j-links { margin-top: 4px; }
/* rows 2-3 of the journal header fold behind a toggle when JS runs */
.j-more-btn { display: none; }
.js .j-more-btn { display: inline-flex; align-items: center; gap: 5px; height: auto; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: none; line-height: inherit; color: var(--link); cursor: pointer; transition: none; }
.js .j-more-btn:hover { background: none; text-decoration: underline; text-underline-offset: 2px; }
.j-more-btn svg { fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .15s; }
.j-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.js .j-more:not(.open) { display: none; }
.j-issn { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }

.j-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; align-items: start; }
.j-main { counter-reset: sec; min-width: 0; }
.j-side { position: sticky; top: 16px; }

/* area view: way back to the journal summary */
/* area view: way back to the journal summary */
.view-back { margin: 0 0 14px; }
.view-back a { font: 500 .76rem var(--mono); text-decoration: none; }
.view-back a:hover { text-decoration: underline; }
.closest-table .num { text-align: right; white-space: nowrap; }
.closest-table td:first-child a { text-decoration: none; }
.closest-table td:first-child a:hover { text-decoration: underline; }
.est-cell { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: .82rem; }
.ac-dot { flex: 0 0 auto; display: inline-block; width: 8px; height: 8px; }
.ac-good { background: var(--blue); }
.ac-ok { background: var(--yellow); }
.ac-weak { background: var(--red); }

.q-cell { display: flex; flex-wrap: wrap; gap: 6px; }
.q-count { display: inline-flex; align-items: baseline; gap: 3px; }
.q-count small { font: .7rem var(--mono); color: var(--ink-3); }
.q-detail { margin-top: 10px; }
.q-detail > summary { cursor: pointer; font: 500 .76rem var(--mono); color: var(--link); list-style: none; padding: 4px 0; }
.q-detail > summary::-webkit-details-marker { display: none; }
.q-detail > summary::before { content: '+ '; }
.q-detail[open] > summary::before { content: '− '; }
.q-detail table { margin-top: 6px; }
td.mono { font-family: var(--mono); font-size: .82rem; }

/* verdict: a ruled box with a band of lines whose direction and colour encode the level */
.verdict { position: relative; border: 1px solid var(--ink); padding: 16px 20px 14px 40px; margin-bottom: 26px; background: var(--paper); }
.verdict::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 22px; border-right: 1px solid var(--ink);
  background-color: var(--band, var(--ink-3));
  -webkit-mask: var(--pattern) repeat; mask: var(--pattern) repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .verdict::before { animation: band .7s cubic-bezier(.3, 0, .2, 1) both .1s; }
  @keyframes band { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
}
.verdict-good { --band: var(--blue);   --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1 -1L7 7M5 -1L7 1M-1 5L1 7' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E"); }
.verdict-ok   { --band: var(--yellow); --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Cpath d='M2.5 0v5' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E"); }
.verdict-weak { --band: var(--red);    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1 7L7 -1M-1 1L1 -1M5 7L7 5' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E"); }
.verdict-avoid { --band: var(--red);   --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4'/%3E%3C/svg%3E"); }
.verdict-unknown { --band: var(--ink-3); --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Cpath d='M0 2.5h5' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E"); }
.verdict-avoid { border-color: var(--red); }
.verdict-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.verdict-q { color: var(--ink-3); }
/* area view: the area named at the top of the verdict */
.verdict-area { font: 600 1.35rem/1.2 var(--serif); }
.verdict-headline strong { font-weight: 600; }
.verdict-general { margin: 2px 0 0; font: 500 .76rem var(--mono); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.verdict-headline { font-size: 1.1rem; line-height: 1.35; margin: 6px 0 4px; }
/* verdict lines: a square bullet, the criterion, and its value right-aligned so values scan as a column */
.vr-list { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--hair); }
.vr { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px;
  padding: 7px 0 7px 18px; border-bottom: 1px solid var(--hair); color: var(--ink-2); }
.vr::before { content: ''; position: absolute; left: 0; top: calc(7px + .55em); width: 7px; height: 7px; background: var(--ink); }
.vr-label { min-width: 0; flex: 1 1 14em; }
.vr-label small { display: block; font-size: .78rem; color: var(--ink-3); }
.vr-val { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vr-prev { display: inline-flex; align-items: center; gap: 5px; font: .7rem var(--mono); color: var(--ink-3); }
.vr-prev .q { opacity: .55; }
.vr-group { font: 500 .66rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 12px 0 4px; border-bottom: 1px solid var(--hair); }
.vr-est.vr-good::before { background: var(--blue); }
.vr-est.vr-ok::before { background: var(--yellow); }
.vr-est.vr-weak::before { background: var(--red); }
.vr-est.vr-unknown::before, .vr-est.vr-none::before, .vr-text::before { background: transparent; border: 1px solid var(--ink-3); }
.vr-flag::before { background: var(--red); }
.vr-flag, .vr-text { display: block; }
/* 2025-2028 estimates: a flat chip outlined in the level's colour */
.vchip { display: inline-block; font: 500 .76rem/1.35 var(--mono); padding: 2px 8px; border: 1px solid var(--ink-3); color: var(--ink); background: var(--paper); }
.vchip-good { border-color: var(--blue); box-shadow: inset 3px 0 0 var(--blue); }
.vchip-ok { border-color: var(--yellow); box-shadow: inset 3px 0 0 var(--yellow); }
.vchip-weak { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.vchip-none { border-style: dotted; color: var(--ink-3); font-weight: 400; }
.verdict-note { font-size: .8rem; color: var(--ink-3); margin: 12px 0 0; padding-top: 8px; border-top: 1px solid var(--hair); }

.pill { font: 500 .72rem var(--mono); letter-spacing: .07em; text-transform: uppercase; padding: 3px 9px; white-space: nowrap; border: 1px solid; }
.pill-good { background: var(--blue); border-color: var(--blue); color: #fff; }
.pill-ok { background: var(--yellow); border-color: var(--yellow); color: #141414; }
.pill-weak { color: var(--red); border-color: var(--red); }
.pill-avoid { background: var(--red); border-color: var(--red); color: #fff; }
.pill-unknown { color: var(--ink-3); border-color: var(--ink-3); }
@media (prefers-color-scheme: dark) { .pill-good, .pill-avoid { color: #121211; } }

/* numbered sections, like a paper */
.card { padding: 12px 0 4px; margin-bottom: 26px; border-top: 1px solid var(--rule); }
.card > :last-child { margin-bottom: 0; }
.j-main > .card > h2::before { counter-increment: sec; content: counter(sec) "."; font: 500 .8rem var(--mono); color: var(--ink-3); margin-right: 10px; vertical-align: 1px; }
details.card summary { cursor: pointer; list-style: none; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary::before { content: '+'; font-family: var(--mono); display: inline-block; width: 1.2em; color: var(--ink-3); }
details.card[open] summary::before { content: '−'; }
.procs { padding-left: 1.2rem; color: var(--ink-2); font-size: .95rem; }
.procs li::marker { content: '§ '; font-family: var(--mono); color: var(--ink-3); }

.rules { list-style: none; padding: 0; margin: 8px 0 0; border-top: 1px solid var(--hair); }
.rule { padding: 9px 0 9px 12px; border-bottom: 1px solid var(--hair); border-left: 3px solid transparent; }
.rule-unmet .rule-head strong, .rule-unmet .conds { color: var(--ink-3); }
.rule-match { border-left-color: var(--blue); background: var(--panel); }
.rule-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rule-head strong { font-family: var(--mono); font-weight: 500; font-size: .9rem; }
.rule-badge { color: var(--blue); }
.rule-badge::before { content: '← '; }
.rule-badge-unknown { color: var(--ink-3); }
.rule-badge-unknown::before { content: ''; }
.rules.plain { list-style: none; padding: 0; border-top: 1px solid var(--hair); counter-reset: r; }
.rules.plain > li { padding: 8px 0; border-bottom: 1px solid var(--hair); }
.conds { list-style: none; padding: 0; margin: 4px 0 0; font-size: .93rem; }
.rules.plain .conds { padding-left: 1.2rem; color: var(--ink-2); list-style: '– '; }
.cond { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: 6px; margin: 3px 0; }
.cond-icon { font: 500 .85rem var(--mono); text-align: center; }
.cond-met .cond-icon { color: var(--blue); }
.cond-unmet .cond-icon { color: var(--red); }
.cond-unknown .cond-icon, .cond-article .cond-icon { color: var(--ink-3); }
.cond-val { font-family: var(--mono); font-size: .82rem; }
.cond-proxy { display: block; font-size: .78rem; color: var(--ink-3); }
.excl { padding-left: 1.2rem; font-size: .92rem; color: var(--ink-2); }
.extra-rules { padding-left: 1.2rem; font-size: .92rem; color: var(--ink-2); max-width: var(--col); }
.extra-rules li { margin: 4px 0; }
.extra-rules strong { color: var(--ink); font-weight: 600; }
.sources-line { font-size: .82rem; color: var(--ink-3); }
.more { margin: 12px 0 0; font-family: var(--mono); font-size: .78rem; }

.flags ul { list-style: none; padding: 0; margin: 0; }
.flag { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: .95rem; }
.flag:last-child { border-bottom: 0; }
.flag-sev { padding-top: 3px; }
.flag-sev::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 0; border: 1px solid currentColor; }
.flag-high .flag-sev { color: var(--red); }
.flag-high .flag-sev::before { background: var(--red); }
.flag-medium .flag-sev { color: var(--red); }
.flag-info .flag-sev { color: var(--ink-3); }

.est-list { list-style: none; padding: 0; margin: 0; columns: 2 260px; column-gap: 28px; column-rule: 1px solid var(--hair); }
.est-list li { padding: 4px 0; display: flex; justify-content: space-between; gap: 8px; break-inside: avoid; border-bottom: 1px solid var(--hair); }

/* tables: three rules, as in a paper */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); }
thead th { border-bottom: 1px solid var(--rule); }
th, td { text-align: left; padding: 6px 10px; vertical-align: baseline; }
th:first-child, td:first-child { padding-left: 0; }
th { color: var(--ink-2); }
tbody tr + tr td { border-top: 1px solid var(--hair); }
.qualis-table td:not(:first-child), .qualis-table th:not(:first-child) { text-align: center; width: 6.5em; }
.qualis-summary th:nth-child(2), .qualis-summary td:nth-child(2) { width: auto; text-align: left; }
.qualis-table td a { text-decoration: none; color: var(--ink); }
.qualis-table td a:hover { color: var(--blue); text-decoration: underline; }
tr.sel td { background: var(--panel); }
tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--blue); padding-left: 8px; }

/* sidebar: indicators on a LeWitt grid of hairlines */
.side-card { border-top: 3px solid var(--rule); }
.side-card h2 { font-size: 1rem; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin: 0 0 12px; }
.stats > div { background: var(--paper); padding: 8px 10px 9px; min-width: 0; }
.stats dt { color: var(--ink-3); font-size: .62rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.dt-btns { display: inline-flex; gap: 3px; flex: 0 0 auto; margin: -2px -4px 0 0; }
/* small square buttons: "?" explains the indicator, "↗" opens its source */
.src-btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font: 500 .66rem/1 var(--mono);
  color: var(--ink-3); border: 1px solid var(--hair); text-decoration: none; letter-spacing: 0; text-transform: none; }
.src-btn:hover { color: var(--paper); background: var(--blue); border-color: var(--blue); }
.stats dd { margin: 3px 0 0; font: 500 1.15rem/1.2 var(--mono); }
.stats small { color: var(--ink-3); font-size: .72rem; display: block; margin-top: 2px; line-height: 1.3; overflow-wrap: anywhere; }
.stats > div:last-child:nth-child(odd) { grid-column: span 2; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.legend b { font-weight: 500; margin-right: 3px; }

/* collapsible sidebar groups (lists, fields) */
.side-more { border-top: 1px solid var(--hair); }
.side-more:last-of-type { border-bottom: 1px solid var(--hair); }
.side-more > summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; padding: 8px 0;
  font: 500 .66rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.side-more > summary::-webkit-details-marker { display: none; }
.side-more > summary::before { content: '+'; width: .9em; color: var(--ink-3); }
.side-more[open] > summary::before { content: '−'; }
.side-more > summary:hover { color: var(--blue); }
.side-count { margin-left: auto; border: 1px solid var(--hair); padding: 0 5px; color: var(--ink-3); }
.side-inline { margin-left: auto; text-transform: none; letter-spacing: 0; color: var(--ink-3); font-weight: 400; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.side-more .hint { margin: 0 0 6px; font-size: .78rem; }
.list-rows, .field-rows { list-style: none; padding: 0; margin: 0 0 10px; font-size: .85rem; }
.list-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; border-top: 1px dotted var(--hair); }
.list-name { min-width: 0; }
.list-name small { display: block; font-size: .7rem; color: var(--ink-3); line-height: 1.3; }
.list-level { flex: 0 0 auto; font: 500 .68rem var(--mono); border: 1px solid var(--ink-3); padding: 0 5px; white-space: nowrap; }
.field-rows li { display: grid; grid-template-columns: minmax(0, 1fr) 64px 3.2em; align-items: center; gap: 8px; padding: 3px 0; }
.field-rows .mono { text-align: right; color: var(--ink-3); font-size: .74rem; }
.field-bar { height: 6px; background: var(--panel); }
.field-bar i { display: block; height: 100%; background: var(--ink); }

/* sources, at the foot of the journal page */
.j-sources { margin-top: 10px; }
.src-rows { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.src-rows li { display: grid; grid-template-columns: 11em minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--hair); }
.src-name { font: 500 .74rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.src-what { color: var(--ink-2); }
.src-rows a { font: .76rem var(--mono); text-align: right; overflow-wrap: anywhere; }
.fineprint { font-size: .74rem; color: var(--ink-3); margin: 10px 0 0; max-width: var(--col); }

/* indicators page */
.ind, .prose h2[id] { scroll-margin-top: 16px; }
.ind:target h2 { box-shadow: inset 0 -.45em 0 color-mix(in srgb, var(--yellow) 45%, transparent); }

.chart { margin: 14px 0 8px; border-bottom: 1px solid var(--ink); }
.chart svg { width: 100%; height: 72px; display: block; }
.chart .bar { fill: var(--ink); }
.chart .bar-partial { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart figcaption { display: flex; justify-content: space-between; gap: 8px; font: .66rem var(--mono); color: var(--ink-3); padding-top: 4px; }

/* ---------- area pages ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; margin: 8px 0; font-size: .9rem; }
.filters > span:first-child { color: var(--ink-3); margin-right: 8px; min-width: 15em; }
.filters a { text-decoration: none; color: var(--ink-2); padding: 3px 7px; border: 1px solid transparent; display: inline-flex; gap: 6px; align-items: center; font-family: var(--mono); font-size: .76rem; }
.filters a:hover { border-color: var(--hair); }
.filters a.on { border-color: var(--ink); color: var(--ink); }
.pager { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 14px 0; font-family: var(--mono); font-size: .8rem; }
.pager span { color: var(--ink-3); }
.pager .pager-pos { color: var(--ink-2); margin: 0 auto; }
.rules-table { margin-top: 10px; }
.rules-table td { font-size: .92rem; color: var(--ink-2); }
.rt-label { white-space: nowrap; width: 1%; padding-right: 18px; }
.rt-label a { font-family: var(--mono); font-size: .85rem; }
.rt-label small { display: block; font-size: .72rem; color: var(--ink-3); white-space: normal; max-width: 12em; }
.rt-join { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; color: var(--ink-3); }
.areas-table td:nth-child(2), .areas-table td:nth-child(3) { font-family: var(--mono); font-size: .8rem; }
.page-links { font: .78rem var(--mono); margin-top: 0; margin-bottom: 28px; row-gap: 20px; }
.areas-best { text-align: right; white-space: nowrap; font: .76rem var(--mono); }

/* best-of lists */
.best-table { margin-top: 10px; }
.best-table td { vertical-align: middle; }
.best-table .num { text-align: right; white-space: nowrap; }
.best-pos { color: var(--ink-3); width: 2.4em; }
.best-title { display: block; text-decoration: none; font-size: 1rem; }
.best-title:hover { text-decoration: underline; }
.best-meta { display: block; font: .72rem var(--mono); color: var(--ink-3); margin-top: 1px; }
.best-area { font-size: .86rem; color: var(--ink-2); }
.best-table .pill { font-size: .62rem; padding: 2px 6px; }

.prose { max-width: var(--col); }
/* long pages: the text column plus a sticky "Nesta página" index in the space to its right */
.doc { display: grid; grid-template-columns: minmax(0, var(--col)) 13rem; gap: 0 64px; align-items: start; }
.doc-head { grid-column: 1 / -1; max-width: var(--col); }
.doc-toc { position: sticky; top: 20px; padding-top: 10px; border-top: 1px solid var(--rule); margin-top: 2rem; }
.doc-toc-h { font: 500 .66rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.doc-toc nav { display: flex; flex-direction: column; font: .76rem/1.4 var(--mono); }
.doc-toc nav + .doc-toc-h { margin-top: 18px; }
.doc-toc a { padding: 4px 0; border-bottom: 1px solid var(--hair); text-decoration: none; color: var(--ink-2); }
.doc-toc a:hover { color: var(--blue); }
.prose h2 { margin-top: 2rem; padding-top: 10px; border-top: 1px solid var(--rule); }
.prose li { margin: 6px 0; }
.ojs { max-width: var(--col); }
.link-notice { background: color-mix(in srgb, var(--red) 9%, var(--paper)); border-left: 4px solid var(--red); padding: 16px 20px; margin: 0 0 24px; color: var(--ink); }
.link-notice p { margin: 0 0 14px; }
.link-notice p:last-child { margin: 0; }
@media (prefers-color-scheme: dark) { .link-notice { background: color-mix(in srgb, var(--red) 16%, var(--paper)); } }

/* ---------- footer ---------- */
.site-footer { border-top: 3px solid var(--rule); padding: 18px 0 40px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.brand-small .brand-name { font-size: 1.05rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 0; }
.footer-nav a { color: var(--ink-2); text-decoration: none; padding: 0 14px; border-left: 1px solid var(--hair); line-height: 1.6; }
.footer-nav a:first-child { border-left: 0; }
.footer-nav a:last-child { padding-right: 0; }
.footer-nav a:hover { color: var(--blue); }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .hero { display: block; }
  .hero-art { display: none; }
  .j-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* index moves above the text, as a wrapped row */
  .doc { grid-template-columns: minmax(0, 1fr); }
  .doc > .prose { grid-row: 3; }
  .doc-toc { position: static; order: -1; grid-row: 2; margin: 0; }
  .doc-toc nav { flex-direction: row; flex-wrap: wrap; gap: 2px 16px; }
  .doc-toc a { border-bottom: 0; padding: 2px 0; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
  .j-side { position: static; }
  /* footer: one link per row */
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-nav { flex-direction: column; gap: 0; }
  .footer-nav a { font-size: .66rem; padding: 4px 0; border-left: 0; line-height: 1.5; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .header-search { max-width: none; order: 3; width: 100%; margin-left: 0; }
  .header-nav { order: 4; width: 100%; }
  .js button.menu-toggle { display: inline-flex; }
  .js .masthead:not(.menu-open) :is(.header-search, .header-nav) { display: none; }
  .hit { grid-template-columns: 2.2em minmax(0, 1fr); }
  .hit-tags { grid-column: 2; justify-content: flex-start; }
  .verdict { padding: 14px 14px 12px 32px; }
  .verdict::before { width: 16px; }
  .flag { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .src-rows li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .src-rows a { text-align: left; }
  .filters > span:first-child { min-width: 0; width: 100%; }
  .search-big input { font-size: 1.05rem; }
}