/* Bern Match: "Swiss Editorial" design. Warm ivory, editorial serif, black text, Swiss-red accents.
   No web fonts are loaded: the serif and sans stacks use fonts already on the viewer's system. */
:root {
  --bg: #f6f3ee; --panel: #fffdfa; --text: #171715; --muted: #64635e; --muted-2: #77746d;
  --line: rgba(25, 25, 22, .10); --line-strong: rgba(25, 25, 22, .18);
  --red: #e30613; --red-hover: #c90511; --red-text: #b3050f; --red-soft: rgba(227, 6, 19, .07);
  --accent: var(--red-text); --accent-2: var(--red); --accent-text: #fff;
  --quote-bg: #f7f4ee; --quote-line: rgba(25, 25, 22, .28);
  --mark: #fbe7b0; --ai-bg: #f5efe4; --ai-line: #dcc9a6; --ai: #7d5413;
  --unibe: #c8102e; --artorg: #0b7a75; --dcb: #b45309; --other: #77746d; --tag-text: #fff;
  --ok: #e3efe2; --warn: #f7ead0; --neutral: #efebe4;
  --shadow: 0 1px 2px rgba(23, 23, 21, .04), 0 10px 30px rgba(23, 23, 21, .06);
  --shadow-hover: 0 2px 4px rgba(23, 23, 21, .05), 0 16px 40px rgba(23, 23, 21, .10);
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --apertus: #e02d24;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141311; --panel: #1c1b18; --text: #f2efe8; --muted: #b0aca3; --muted-2: #9a968d;
    --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .18);
    --red: #e30613; --red-hover: #ff2a36; --red-text: #ff6b6b; --red-soft: rgba(255, 80, 80, .10);
    --quote-bg: #22201c; --quote-line: rgba(255, 255, 255, .28);
    --mark: #5c4a12; --ai-bg: #2a2418; --ai-line: #6b5631; --ai: #e5c48a;
    --ok: #1e3324; --warn: #3d3015; --neutral: #2a2824;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-hover: 0 10px 28px rgba(0, 0, 0, .5);
    --unibe: #ff6b81; --artorg: #4fd1c5; --dcb: #f6ad55; --other: #9a968d; --tag-text: #141311;
  }
}
* { box-sizing: border-box; }
/* hidden always wins: .summary { display: flex } used to keep the summary pill visible when hidden */
[hidden] { display: none !important; }
body { font-family: var(--sans); margin: 0; background: var(--bg); color: var(--text); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--panel); padding: .5rem; z-index: 10; }
.skip:focus { left: .5rem; top: .5rem; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
a { color: var(--red-text); }

/* Header */
.top { display: flex; align-items: center; gap: 1.25rem; max-width: 76rem; margin: 0 auto; padding: 1.4rem 1.5rem 0; }
.brand { color: var(--text); text-decoration: none; font-family: var(--serif); font-size: 1.55rem; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
/* The Swiss cross, drawn in CSS (no image file) */
.logo { position: relative; display: inline-block; width: 1.05rem; height: 1.05rem; background: var(--red); border-radius: 2px; font-size: 0; flex-shrink: 0; }
.logo::before, .logo::after { content: ""; position: absolute; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.logo::before { width: 62%; height: 20%; } .logo::after { width: 20%; height: 62%; }
main { max-width: 76rem; margin: 0 auto; padding: 0 1.5rem 4rem; }
main > :not(.hero) { max-width: 60rem; margin-left: auto; margin-right: auto; }

/* Welcome: a full-width photo of Bern (hero.webp) behind the heading and the search composer.
   The copy sits on the photo's bright, misty left side; a soft ivory fade keeps it readable. */
/* The full-width hero uses 100vw, which includes the scrollbar: clip the few pixels it adds */
html, body { overflow-x: clip; }
/* Welcome -> results: copy and photo fade out before the search box glides to the top (app.js) */
body.leaving .hero-copy > :not(#form) { opacity: 0; transform: translateY(-8px); transition: opacity .26s ease, transform .26s ease; }
body.leaving .hero::before, body.leaving .hero::after { animation: fadeaway .26s ease forwards; }
@keyframes fadeaway { to { opacity: 0; } }
body:not(.searched) .top { position: absolute; left: 0; right: 0; z-index: 2; }
/* Over the photo the language and shortlist controls sit on red glass: give them an ivory pill */
body:not(.searched) .langs, body:not(.searched) #shortlist-toggle { background: rgba(255, 253, 250, .9); border: 1px solid var(--line);
  border-radius: 99px; box-shadow: 0 2px 10px rgba(23, 23, 21, .10); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body:not(.searched) .langs { padding: 0 .3rem; }
@media (prefers-color-scheme: dark) {
  body:not(.searched) .langs, body:not(.searched) #shortlist-toggle { background: rgba(28, 27, 24, .88); }
}
.hero { position: relative; isolation: isolate; display: flex; align-items: center;
  margin: 0 calc(50% - 50vw); padding: 7.5rem max(1.5rem, calc(50vw - 36.5rem)) 4rem;
  min-height: min(56rem, 100vh); overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero::before { background: url("hero.webp") center right / cover no-repeat, var(--bg); animation: settle 1.4s var(--ease) both; }
.hero::after { background: linear-gradient(90deg, rgba(246, 243, 238, .82) 0%, rgba(246, 243, 238, .55) 30%, rgba(246, 243, 238, 0) 52%),
  linear-gradient(0deg, var(--bg) 0, rgba(246, 243, 238, 0) 7rem); }
@media (prefers-color-scheme: dark) {
  .hero::after { background: linear-gradient(90deg, rgba(20, 19, 17, .9) 0%, rgba(20, 19, 17, .7) 34%, rgba(20, 19, 17, .1) 60%),
    linear-gradient(0deg, var(--bg) 0, rgba(20, 19, 17, 0) 7rem); }
}
.hero-copy { position: relative; z-index: 1; width: min(36rem, 100%); animation: rise .7s .15s var(--ease) both; }
.eyebrow { margin: 0 0 1rem; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.eyebrow::after { content: ""; display: block; width: 1.6rem; height: 2px; background: var(--red); margin-top: 1rem; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 5.2vw, 4.3rem); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 1rem; max-width: 14ch; text-wrap: balance; }
.sub { color: var(--muted); margin: 0 0 2rem; max-width: 30rem; font-size: 1.05rem; }
.hero #form { animation: rise .7s .3s var(--ease) both; box-shadow: 0 2px 6px rgba(23, 23, 21, .05), 0 24px 60px rgba(23, 23, 21, .12); }
body.searched .hero { display: block; min-height: 0; margin: 0 auto; padding: 1.5rem 0 .5rem; max-width: 60rem; overflow: visible; }
body.searched .hero::before, body.searched .hero::after { display: none; }
body.searched .hero h1, body.searched .hero .sub, body.searched .eyebrow, body.searched .examples-wrap,
body.searched .howto { display: none; }
body.searched .hero-copy, body.searched .hero #form { animation: none; width: auto; }

/* The floating search composer */
#form { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .75rem .9rem; box-shadow: var(--shadow); }
.searchbox { display: flex; gap: .6rem; align-items: center; padding: .1rem 0 .55rem; border-bottom: 1px solid var(--line); }
.searchbox .icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; margin-left: .45rem; color: var(--muted); }
textarea { width: 100%; padding: .9rem 1rem; font: inherit; font-size: 1.05rem; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.searchbox textarea { border: 0; resize: none; padding: .55rem .25rem; min-height: 3.1rem; font-family: var(--serif); font-size: 1.2rem; line-height: 1.35; background: transparent; }
.searchbox textarea::placeholder { color: var(--muted-2); }
.searchbox textarea:focus-visible { outline: none; }
#form:focus-within { border-color: var(--line-strong); box-shadow: var(--shadow-hover); }
.row { display: flex; gap: .75rem; align-items: center; justify-content: space-between; margin-top: .75rem; flex-wrap: wrap; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-start; }
.chip { border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); border-radius: 99px; padding: .32rem .85rem; font: inherit; font-size: .82rem;
  cursor: pointer; transition: background .18s, border-color .18s, color .18s; min-height: 2rem; }
.chip:hover { border-color: var(--text); }
.chip[aria-checked="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }

.switch { display: inline-flex; align-items: center; gap: .55rem; font-size: .86rem; font-weight: 500; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 2.3rem; height: 1.3rem; border-radius: 99px; background: var(--line-strong); position: relative; transition: background .2s; flex-shrink: 0; }
.switch .track::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease); }
.switch input:checked + .track { background: var(--text); }
.switch input:checked + .track::after { transform: translateX(1rem); }
.switch input:focus-visible + .track { outline: 2px solid var(--red); outline-offset: 2px; }
.ai-tag { font-size: .68rem; font-weight: 600; letter-spacing: .04em; padding: .05rem .45rem; border-radius: 99px; color: var(--ai); background: var(--ai-bg); border: 1px solid var(--ai-line); margin-left: .15rem; }

.examples-wrap { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1.4rem; }
.examples-label { font-size: .68rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; }
.examples { display: flex; gap: .45rem; flex-wrap: wrap; }
.example { border: 1px solid transparent; background: var(--neutral); color: var(--text); border-radius: 99px; padding: .38rem .85rem; font: inherit; font-size: .82rem; cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s var(--ease); min-height: 2rem; }
.example:hover { border-color: var(--line-strong); background: var(--panel); transform: translateY(-1px); }
.example .lang { font-weight: 700; margin-right: .4rem; color: var(--red-text); font-size: .7rem; letter-spacing: .06em; }

.howto { margin: 1.6rem 0 0; max-width: 34rem; font-size: .85rem; color: var(--muted); }
.howto .ap { margin-right: .45rem; }
.eyebrow .ai-tag { margin: 0 .3rem 0 0; }
.also { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .35rem 0 .6rem; }
.also .wording { font-size: .84rem; padding: .25rem .7rem; border-radius: 99px; background: var(--panel); border: 1px solid var(--ai-line); }
button.wording { font: inherit; font-size: .84rem; color: var(--text); cursor: pointer; transition: border-color .18s; }
button.wording:hover { border-color: var(--ai); }
.best-fits .chip { margin: .15rem .3rem .15rem 0; }
.also .wording .lang { font-size: .68rem; font-weight: 700; color: var(--ai); margin-right: .35rem; text-transform: uppercase; }
.needs details.refine { margin-top: .5rem; }
.needs details.refine > summary { cursor: pointer; color: var(--ai); font-weight: 600; font-size: .88rem; width: fit-content; }
.badge.moved-badge { color: var(--ai); font-weight: 600; }

/* Buttons */
button { font: inherit; cursor: pointer; }
button.primary { background: var(--red); color: #fff; border: 0; border-radius: 99px; padding: .7rem 1.2rem .7rem 1.35rem; font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; transition: background .18s, transform .18s var(--ease); }
button.primary::after { content: "\2192"; font-size: 1.05em; line-height: 1; }
button.primary:hover { background: var(--red-hover); transform: translateX(1px); }
button.ghost { background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); border-radius: 99px; padding: .42rem .9rem; transition: border-color .18s; }
button.ghost:hover { border-color: var(--text); }
button.small { padding: .3rem .75rem; font-size: .8rem; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); border-radius: 99px;
  transition: border-color .18s, background .18s, color .18s; min-height: 2rem; }
button.small:hover { border-color: var(--text); }
button.small[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.count { display: inline-block; min-width: 1.3rem; text-align: center; background: var(--neutral); border-radius: 99px; font-size: .72rem; padding: 0 .35rem; }
#shortlist-toggle { display: inline-flex; align-items: center; gap: .45rem; border-color: transparent; background: transparent; font-size: .88rem; font-weight: 500; }
#shortlist-toggle::before { content: ""; width: .7rem; height: .9rem; background: currentColor; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }
#shortlist-toggle:hover { border-color: var(--line-strong); }

/* Status, outcome, limits */
.summary { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem auto; }
.pill, .badge { font-size: .72rem; font-weight: 500; padding: .14rem .6rem; border-radius: 99px; background: var(--neutral); color: var(--text); display: inline-block; }
.pill.latency { background: var(--ok); }
.status { min-height: 1.4rem; color: var(--muted); font-size: .9rem; }
.status.error { color: var(--red-text); }
.status .skip-wait { margin-left: .4rem; }
.outcome .chips .chip, .clarify .chip { text-align: left; }
.ask { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.ask input { flex: 1; min-width: 12rem; padding: .6rem .8rem; font: inherit; background: var(--panel); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 8px; }
.ask input:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.ask button.primary { padding: .5rem 1rem; }
.clarify .chips { justify-content: flex-start; margin: .2rem 0; }
.clarify .ask input { border-color: var(--ai-line); }
.status.warn { color: #9a6410; }
.status.loading::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .5rem; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--red); animation: spin .8s linear infinite; vertical-align: -1px; }
.limitations { color: var(--muted); font-size: .85rem; padding-left: 1.1rem; margin: .4rem 0 0; }
.limits { font-size: .85rem; color: var(--muted); margin: .25rem auto .5rem; }
.limits summary { cursor: pointer; width: fit-content; }
.limits[hidden] { display: none; }

.outcome { background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--red); border-radius: 6px; padding: 1rem 1.25rem; margin: .75rem auto; box-shadow: var(--shadow); animation: rise .32s var(--ease) both; }
.outcome h2 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin: 0 0 .25rem; }
.outcome .chips { justify-content: flex-start; }

/* Contacts first: institutions and general pages fold into one section below the people and teams */
.other-pages { margin: 1.5rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--line-strong); }
.other-pages > summary { cursor: pointer; width: fit-content; font-weight: 600; color: var(--text); }
.other-pages > .meta { margin: .3rem 0 .4rem; }
.other-pages .card { box-shadow: none; }
.card h3 .rank { display: none; } /* ranks are out of order once contacts come first */

/* People to contact: a short row of person cards above the results */
.people { margin: 1rem auto .25rem; }
.people h2 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; margin: 0; }
.people > .meta { margin: .15rem 0 .7rem; }
.people-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; }
.person-card { background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--red); border-radius: 6px; padding: .9rem 1rem .8rem;
  box-shadow: var(--shadow); display: flex; flex-direction: column; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.person-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.person-card.appear { animation: rise .34s var(--ease) both; }
.person-card h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.2; }
.person-line { margin: .3rem 0 .7rem; font-size: .86rem; color: var(--muted); flex: 1; }
.person-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.person-actions .src { font-size: .82rem; font-weight: 600; color: var(--red-text); text-decoration: none; }
.person-actions .src:hover { text-decoration: underline; }

/* Result cards: type label, serif title, affiliation, fields, quotes, divider, actions */
.card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 1.25rem 1.4rem 1.1rem; margin: 1rem 0; box-shadow: var(--shadow);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.kicker { margin: 0 0 .3rem; font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.more-quotes { margin-top: .6rem; font-size: .86rem; }
.more-quotes > summary { cursor: pointer; color: var(--red-text); width: fit-content; font-weight: 500; }
.more-values > summary { cursor: pointer; color: var(--red-text); width: fit-content; font-size: .86rem; }
.evidence .src { font-weight: 600; text-decoration: none; color: var(--red-text); }
.evidence .src:hover { text-decoration: underline; }
.card.appear { animation: rise .34s var(--ease) both; }
.card.flash { animation: flash 1.6s ease; }
.card.excluded { opacity: .5; }
.card-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.card h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.01em; }
.card h3 .rank { color: var(--muted-2); font-family: var(--sans); font-size: .8rem; font-weight: 500; margin-right: .5rem; vertical-align: .25em; }
.tags { display: flex; gap: .35rem; flex-wrap: wrap; margin: .55rem 0 .45rem; }
/* Source and type badges stay quiet: a coloured dot, not a coloured block */
.tag-unibe, .tag-artorg, .tag-dcb { background: transparent; border: 1px solid var(--line-strong); color: var(--text); }
.tag-unibe::before, .tag-artorg::before, .tag-dcb::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; margin-right: .35rem; vertical-align: .05em; }
.tag-unibe::before { background: var(--unibe); } .tag-artorg::before { background: var(--artorg); } .tag-dcb::before { background: var(--dcb); }
.fresh-stale { background: var(--warn); } .fresh-fresh { background: var(--ok); }
.actions { display: flex; gap: .35rem; flex-shrink: 0; }
.act-select::before { content: ""; display: inline-block; width: .55rem; height: .72rem; margin-right: .4rem; vertical-align: -.05em;
  background: currentColor; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }
button.small.act-select[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.reason { margin: .35rem 0 .6rem; }
.fields { display: grid; grid-template-columns: 9rem 1fr; gap: .3rem .9rem; margin: .2rem 0 .7rem; font-size: .93rem; }
.fields dt { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; padding-top: .15rem; }
.fields dd { margin: 0; }
.notstated { color: var(--muted); font-size: .8rem; font-style: italic; margin: 0 0 .6rem; }
/* Source quotes: serif, a thin rule, never tinted like AI text */
.evidence { margin: .6rem 0 0; padding: .55rem .9rem; border-left: 2px solid var(--quote-line); background: var(--quote-bg); border-radius: 0 4px 4px 0; }
.evidence p { margin: .2rem 0; }
.evidence .quote { font-family: var(--serif); font-size: 1.02rem; line-height: 1.45; }
mark { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 .1rem; }
.meta { font-size: .76rem; color: var(--muted); word-break: break-word; }
.meta a { color: var(--red-text); }
.inline { font-size: .85rem; color: var(--muted); }
.drawer > label.inline { display: flex; gap: .4rem; align-items: flex-start; margin: .35rem 0; } /* one option per line */

/* Static placeholders while retrieval runs: same rough shape as a card, a slow gentle pulse */
.skeleton { height: 10rem; border-radius: 6px; margin: 1rem 0; background: var(--panel); border: 1px solid var(--line); position: relative; overflow: hidden; animation: breathe 1.6s ease-in-out infinite; }
.skeleton::before, .skeleton::after { content: ""; position: absolute; left: 1.4rem; height: .7rem; border-radius: 3px; background: var(--neutral); }
.skeleton::before { top: 1.4rem; width: 5rem; height: .5rem; }
.skeleton::after { top: 2.4rem; width: 45%; height: 1.2rem; box-shadow: 0 2.4rem 0 -.2rem var(--neutral), 0 3.6rem 0 -.2rem var(--neutral); }

/* Apertus (AI) blocks: warm sand, clearly apart from source quotes */
.needs { background: var(--ai-bg); border: 1px solid var(--ai-line); border-radius: 6px; padding: 1rem 1.2rem; margin: .9rem auto; animation: rise .32s var(--ease) both; }
.needs .ai-head { display: flex; align-items: center; gap: .5rem; margin: 0 0 .25rem; font-weight: 600; }
.needs .busy-line { display: flex; align-items: center; gap: .5rem; margin: 0; }
.needs h3 { font-size: .92rem; margin: .75rem 0 .25rem; }
.needs .busy::before { content: "\25CF"; color: var(--ai-line); margin-right: .4rem; animation: pulse 1.2s ease-in-out infinite; }
.needlist { list-style: none; padding: 0; margin: 0; }
.needlist li { display: flex; gap: .5rem; align-items: center; margin: .25rem 0; flex-wrap: wrap; }
.needlist input[type=text], .needs input[type=text] { flex: 1; padding: .4rem .5rem; font: inherit; background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); border-radius: 6px; }
.needlist.suggested li { color: var(--muted); font-style: italic; }
.synthetic { background: var(--warn); padding: .3rem .6rem; border-radius: 6px; font-size: .8rem; }
.assessment { margin: .7rem 0 .5rem; padding: .6rem .9rem; border-left: 2px solid var(--ai-line); background: var(--ai-bg); border-radius: 0 4px 4px 0; animation: unfold .3s var(--ease) both; }
.badge.cat-direct_match { background: var(--ok); } .badge.cat-related_capability { background: var(--warn); }
.badge.cat-insufficient_evidence { background: var(--neutral); color: var(--muted); }
.privacy { color: var(--muted); font-size: .76rem; margin: .65rem .25rem 0; }
.cited { margin: .35rem 0 .35rem .5rem; padding: .35rem .7rem; border-left: 2px solid var(--quote-line); background: var(--quote-bg); }
.cited .quote { margin: 0 0 .2rem; font-family: var(--serif); }
.pv-ai { border: 1px solid var(--ai-line); background: var(--ai-bg); padding: .4rem .7rem; margin: .5rem 0; }
.pv-ai h3 { font-size: .85rem; margin: 0 0 .2rem; }

/* Shortlist drawer */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(24rem, 100%); background: var(--panel); border-left: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0,0,0,.12);
  padding: 1.25rem; overflow-y: auto; z-index: 5; animation: slidein .26s var(--ease) both; }
.drawer[hidden] { display: none; }
.drawer h2 { margin-top: 0; font-family: var(--serif); font-weight: 400; font-size: 1.6rem; }
.drawer h3 { font-size: .9rem; }
.sl { list-style: none; padding: 0; margin: 0 0 1rem; }
.sl li { display: flex; justify-content: space-between; gap: .5rem; align-items: center; padding: .3rem 0; border-bottom: 1px solid var(--line); }
.sl li.none { color: var(--muted); border: 0; font-size: .85rem; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { opacity: .6; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: none; } }
@keyframes unfold { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes slidein { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes flash { from { box-shadow: 0 0 0 2px var(--ai-line); } to { box-shadow: var(--shadow); } }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card:hover, .example:hover, button.primary:hover { transform: none; }
}

/* Apertus credit: their own red mark, used only for Apertus */
.powered { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--muted); text-decoration: none; transition: color .18s; }
.powered b { color: var(--text); font-weight: 600; }
.powered:hover { color: var(--text); }
.langs { margin-left: auto; }
/* The Apertus mark: a red "Λ" drawn with a clip-path (no image file) */
.ap, .ai-tag::before, .badge.moved-badge::before, .status.by-apertus::before {
  content: ""; display: inline-block; width: .74em; height: .9em; background: var(--apertus); flex-shrink: 0;
  clip-path: polygon(50% 0, 100% 100%, 81% 100%, 50% 27%, 19% 100%, 0 100%); vertical-align: -.08em; }
.ai-tag::before, .badge.moved-badge::before, .status.by-apertus::before { margin-right: .35em; }
.powered .ap { font-size: .9rem; }
.credit { max-width: 60rem; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.credit p { margin: .3rem 0; }
.credit .ap { margin-right: .45rem; }
.credit a { color: var(--text); }
@media print { .credit, .powered { display: none; } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }

/* Tablet and phone: the illustration becomes a short band under the composer, then disappears */
@media (max-width: 60rem) {
  /* Tablet: the fade covers more of the photo so the copy stays readable */
  .hero { padding-top: 6.5rem; min-height: 0; }
  .hero::after { background: linear-gradient(90deg, rgba(246, 243, 238, .9) 0%, rgba(246, 243, 238, .7) 55%, rgba(246, 243, 238, .25) 100%),
    linear-gradient(0deg, var(--bg) 0, rgba(246, 243, 238, 0) 6rem); }
}
@media (max-width: 36rem) {
  .top { padding: 1rem 1rem 0; gap: .4rem; }
  .brand { font-size: 1.3rem; }
  /* Shortlist keeps its icon and count on phones; the word stays for screen readers */
  #shortlist-toggle { padding: .42rem .5rem; }
  #shortlist-toggle [data-i18n="top.shortlist"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .langs button { padding: .45rem .4rem; }
  .powered { display: none; }
  main { padding: 0 1rem 3rem; }
  /* Phone: a simpler background, the photo stays as a faint wash behind the copy */
  .hero { padding: 5.5rem 1rem 2rem; }
  .hero::before { background-position: 72% center; }
  .hero::after { background: rgba(246, 243, 238, .84); }
  .hero h1 { font-size: 2.05rem; }
  #form { padding: .5rem .6rem .8rem; }
  .searchbox { flex-wrap: wrap; }
  .searchbox .icon { display: none; }
  .searchbox textarea { font-size: 1.08rem; }
  .searchbox button.primary { width: 100%; justify-content: center; }
  .fields { grid-template-columns: 1fr; gap: .1rem; }
  .fields dt { margin-top: .4rem; }
  .card { padding: 1rem 1rem .9rem; }
  .card h3 { font-size: 1.3rem; }
  .card-head { flex-direction: column; gap: .6rem; }
  .credit { padding: 1.5rem 1rem 2.5rem; }
}

/* T29: "Why this result?" panel, language path, reranked markers */
.why { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--line); font-size: .86rem; }
.why summary { cursor: pointer; color: var(--red-text); font-weight: 500; width: fit-content; }
.why-list { margin: .5rem 0 .3rem; padding-left: 1.1rem; }
.why-list li { margin: .2rem 0; }
.why-list .badge { margin: 0 .1rem; }
.why .fields { margin: .4rem 0 .2rem; }
.why .terms { display: flex; gap: .3rem; flex-wrap: wrap; }
.badge.lang { background: transparent; border: 1px solid var(--line-strong); }
.card.moved { border-color: var(--ai-line); }
.badge.moved-badge { background: var(--ai-bg); border: 1px solid var(--ai-line); }
@media print { .why { display: none; } }

/* T38: editable shortlist and print export */
.sl li.sl-entry { display: block; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.sl-head { cursor: grab; }
.sl li.sl-entry.dragging { opacity: .5; }
.sl-head { display: flex; gap: .3rem; align-items: center; }
.sl-name { flex: 1; font-weight: 600; }
.sl-fields { display: flex; gap: .4rem; flex-wrap: wrap; margin: .3rem 0; font-size: .8rem; }
.sl-note-label { display: block; font-size: .76rem; color: var(--muted); margin-top: .35rem; }
.sl-note { width: 100%; font: inherit; font-size: .85rem; padding: .4rem; margin-top: .2rem; background: var(--panel); color: var(--text); border: 1px dashed var(--ai-line); border-radius: 6px; }
.sl-actions { display: flex; gap: .5rem; margin: .75rem 0 1rem; flex-wrap: wrap; }
.sl-actions button:disabled { opacity: .5; cursor: not-allowed; }
#print-view { display: none; }
@media print {
  body { background: #fff; color: #000; }
  body > *:not(#print-view) { display: none !important; }
  #print-view { display: block; font-size: 11pt; }
  #print-view h1 { font-size: 18pt; margin: 0 0 .2rem; }
  #print-view h2 { font-size: 13pt; margin: 1rem 0 .2rem; }
  #print-view h3 { font-size: 10pt; margin: .4rem 0 .1rem; }
  #print-view .meta { color: #444; font-size: 8.5pt; }
  #print-view .evidence { border-left: 2px solid #888; background: none; margin: .3rem 0; padding: .1rem .5rem; }
  #print-view .pv-note { border: 1px dashed #888; padding: .2rem .5rem; margin: .4rem 0; }
  #print-view .pv-entry { break-inside: avoid; }
  #print-view .pv-footer { margin-top: 1.2rem; border-top: 1px solid #888; padding-top: .3rem; }
}

/* T13 operator page */
.table-wrap { overflow-x: auto; }
#sources { border-collapse: collapse; width: 100%; font-size: .85rem; background: var(--panel); }
#sources th, #sources td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
#sources td:nth-child(n+2):nth-child(-n+6), #sources th:nth-child(n+2):nth-child(-n+6) { text-align: right; }
#token { flex: 1; padding: .45rem; font: inherit; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; }

/* T28: interface language switcher (EN / DE / FR): plain letters, the current one underlined */
.langs { display: inline-flex; gap: .15rem; }
.langs button { border: 0; background: transparent; color: var(--muted); font-size: .74rem; font-weight: 600; letter-spacing: .06em;
  padding: .45rem .5rem; position: relative; min-height: 2rem; }
.langs button:hover { color: var(--text); }
.langs button[aria-pressed="true"] { color: var(--text); }
.langs button[aria-pressed="true"]::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .2rem; height: 1.5px; background: var(--text); }
@media print { .langs { display: none; } }

/* T23/T24/T28: brief and e-mail draft in the shortlist */
.sl-ai-out { margin-top: .75rem; }
.br-entry { border-top: 1px solid var(--line); padding: .5rem 0; }
.ai-text .badge.ai, .badge.ai { font-size: .7rem; padding: 0 .35rem; border-radius: .3rem; background: var(--ai-bg); color: var(--ai); border: 1px solid var(--ai-line); }
.mt { font-style: italic; opacity: .85; }
.analyst { border-left: 3px solid var(--line-strong); padding-left: .5rem; }

/* Dark mode on tablets and phones: the fade over the hero photo stays dark under light text */
@media (prefers-color-scheme: dark) and (max-width: 60rem) {
  .hero::after { background: linear-gradient(90deg, rgba(20, 19, 17, .9) 0%, rgba(20, 19, 17, .78) 60%, rgba(20, 19, 17, .45) 100%),
    linear-gradient(0deg, var(--bg) 0, rgba(20, 19, 17, 0) 6rem); }
}
@media (prefers-color-scheme: dark) and (max-width: 36rem) { .hero::after { background: rgba(20, 19, 17, .86); } }

/* 19 Oct UI freeze: search-engine style results, shortlist as the final page */
body.searched .top { position: sticky; top: 0; z-index: 4; background: var(--bg); padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
#shortlist-toggle { border: 1px solid var(--red); color: var(--red-text); font-weight: 600; }
#shortlist-toggle .count { background: transparent; padding: 0; min-width: 0; font-size: inherit; }
.howitworks { font-size: .8rem; color: var(--text); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.switch-hint { display: block; font-size: .72rem; font-weight: 400; color: var(--muted); }
.summary .found-line { flex-basis: 100%; margin: 0 0 .2rem; font-family: var(--serif); font-size: 1.25rem; }
.card { padding: 1rem 1.2rem .8rem; margin: .7rem 0; }
.card h3 { font-size: 1.3rem; }
.card .quote-line { margin: .45rem 0 .1rem; font-family: var(--serif); font-size: 1rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .link-line { margin: 0; font-size: .82rem; }
.card .link-line .src { color: var(--red-text); text-decoration: none; font-weight: 600; }
.card .link-line .src:hover { text-decoration: underline; }
.card-details { margin-top: .4rem; font-size: .9rem; }
.card-details > summary { cursor: pointer; width: fit-content; color: var(--muted); font-size: .82rem; }
.card-details > .act-exclude { margin-top: .6rem; }
.kicker .badge.moved-badge { margin-left: .5rem; text-transform: none; letter-spacing: 0; }
button.primary.add-sl { padding: .6rem 1.1rem; font-size: .92rem; }
button.primary.add-sl::after { content: none; }
button.primary.add-sl::before { content: none; }
button.primary.add-sl[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.more-results { margin: 1.5rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--line-strong); }
.more-results > summary { cursor: pointer; width: fit-content; font-weight: 600; }
.more-results .card { box-shadow: none; }
/* The shortlist is a full page, not a side drawer */
.drawer.sl-page { left: 0; width: 100%; border-left: 0; box-shadow: none; background: var(--bg); padding: 1.5rem 1rem 4rem; }
.sl-page .sl-inner { max-width: 50rem; margin: 0 auto; }
.sl-page > .sl-inner > label.inline { display: flex; gap: .4rem; align-items: flex-start; margin: .35rem 0; }
.sl-page h2 { font-size: 2rem; }
.sl li.sl-entry { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1.2rem; margin: .8rem 0; }
.sl-entry .sl-head { display: flex; align-items: center; gap: .4rem; }
.sl-entry .sl-name { flex: 1; font-family: var(--serif); font-size: 1.3rem; }
.sl-contact { margin: .2rem 0 .5rem; }
.sl-ai { margin: .6rem 0; padding: .4rem .8rem; border-left: 2px solid var(--ai-line); background: var(--ai-bg); }
.sl-ai > summary { cursor: pointer; font-size: .85rem; }
.sl-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
@media (max-width: 36rem) {
  .howitworks { font-size: .72rem; }
  .card-head { flex-direction: row; align-items: flex-start; }
  button.primary.add-sl { padding: .5rem .8rem; font-size: .82rem; }
}
@media print { .top, .howitworks { display: none; } }
body.sl-open main, body.sl-open .credit { display: none; }
body.sl-open .drawer.sl-page { position: static; animation: none; overflow: visible; }
body.sl-open .top { position: sticky; top: 0; z-index: 4; background: var(--bg); }
/* Traffic-light outcome: green clear match, yellow uncertain, red nothing found */
.outcome .light { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .55rem; vertical-align: .05em; }
.outcome.sig-green { border-top-color: #1f8f3a; } .sig-green .light { background: #1f8f3a; box-shadow: 0 0 0 3px rgba(31, 143, 58, .18); }
.outcome.sig-yellow { border-top-color: #d9a400; } .sig-yellow .light { background: #e0ac00; box-shadow: 0 0 0 3px rgba(224, 172, 0, .22); }
.outcome.sig-red { border-top-color: var(--red); } .sig-red .light { background: var(--red); box-shadow: 0 0 0 3px rgba(227, 6, 19, .18); }
.outcome.sig-green { padding: .7rem 1.25rem; } .outcome.sig-green h2 { font-size: 1.1rem; } .outcome.sig-green p { margin: .1rem 0 0; font-size: .9rem; color: var(--muted); }
/* Per-card confidence label: green strong, yellow possible, red weak */
.badge.conf { text-transform: none; letter-spacing: 0; font-weight: 600; margin-right: .5rem; border: 1px solid transparent; }
.badge.conf::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .35rem; vertical-align: .05em; }
.conf-3 { background: rgba(31, 143, 58, .12); color: #17692b; } .conf-3::before { background: #1f8f3a; }
.conf-2 { background: rgba(224, 172, 0, .16); color: #7a5d00; } .conf-2::before { background: #e0ac00; }
.conf-1 { background: rgba(227, 6, 19, .09); color: var(--red-text); } .conf-1::before { background: var(--red); }
@media (prefers-color-scheme: dark) { .conf-3 { color: #7fd99a; } .conf-2 { color: #f0cc5c; } }
.status.refining-strong { font-weight: 600; color: var(--ai); }
/* "How we read your request": one closed line until the analyst opens it */
.needs { padding: .55rem 1rem; }
.needs-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.needs-fold > summary::-webkit-details-marker { display: none; }
.needs-fold > summary::after { content: "Show \25BE"; margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--ai); }
.needs-fold[open] > summary::after { content: "Hide \25B4"; }
.needs-fold[open] > summary { margin-bottom: .4rem; }
.needs .ai-head { margin: 0; }
.needs-hint { font-size: .8rem; font-weight: 400; color: var(--muted); }
.needs-hint.busy::before { content: "\25CF"; color: var(--ai-line); margin-right: .4rem; animation: pulse 1.2s ease-in-out infinite; }

/* Phones under ~416 px: the header (brand, How it works, EN/DE/FR, shortlist) did not fit and
   scrolled sideways by 6 px at 390 px. "How it works" stays on wider screens and in the README. */
@media (max-width: 26rem) { .howitworks { display: none; } }