/* house-style 1.0.4
   The "violet" design language shared by rijdho's public tools (fair-repo-audit, coara-action-planner,
   orcid-finder, chilean-altoutputs), ported from the cris-eilein house style. This file is the ORIGINAL:
   projects keep an exact copy (synced by their `sync-house` script) and a test fails if the copy drifts.
   Edit here, bump the version, sync into each project, redeploy it.

   Layers, top to bottom:
     1. fonts          self-hosted Inter Variable (./fonts): never a font CDN
     2. tokens         palette (light, dark, and the OS preference before JS runs)
     3. interface      stable names components and charts read (--bg, --text, --accent...)
     4. base           body, headings, links, focus, scrollbars
     5. shell          rail + command bar + content, with a drawer below 880px
     6. components     eyebrow, lede, card, buttons, language switch, site footer
   Data colours (the FAIR categorical and level palettes) live in the tokens, kept apart from the
   chrome and validated for colour-vision deficiency against each mode's card surface. */

/* ── 1. Fonts ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("./fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("./fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 2. Tokens ────────────────────────────────────────────────────────────── */
:root {
  --paper: #f7f6fb;
  --surface: #ffffff;
  --surface-2: #f1f0f7;
  --surface-3: #eae8f3;
  --ink: #17151f;
  --ink-2: #52505e;
  --hairline: #e5e3ef;
  --hair: #edecf5;
  --brand: #6d4aff;
  --brand-soft: #eeebff;
  --accent-ink: #ffffff;
  --shadow: 0 1px 2px rgba(23, 21, 31, 0.06), 0 8px 24px rgba(23, 21, 31, 0.05);
  --r: 14px;
  --r-sm: 9px;
  --disp: "Inter Variable", "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --body-f: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* data palette: FAIR categorical + levels */
  --f-F: #2f7bd0; --f-A: #b56c1f; --f-I: #1f9670; --f-R: #b3559a;
  --lvl-hi: #1f9670; --lvl-mid: #c08519; --lvl-lo: #c0463d;
  --lvl-hi-ink: #1f9670; --lvl-mid-ink: #c08519; --lvl-lo-ink: #c0463d;
}
:root[data-theme="dark"] {
  --paper: #121118;
  --surface: #1b1a22;
  --surface-2: #232230;
  --surface-3: #2c2a3a;
  --ink: #eceaf3;
  --ink-2: #a9a7b5;
  --hairline: #2c2a38;
  --hair: #262432;
  --brand: #8b7bff;
  --brand-soft: #221f35;
  --accent-ink: #121118;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
  --f-F: #3f8fe0; --f-A: #c67d30; --f-I: #2aa87a; --f-R: #c46bad;
  /* fills darkened into the dark lightness band; inks kept lighter for text */
  --lvl-hi: #2aa87a; --lvl-mid: #c08519; --lvl-lo: #bd4740;
  --lvl-hi-ink: #2aa87a; --lvl-mid-ink: #d99a2b; --lvl-lo-ink: #d1544b;
}
/* Before JS stamps data-theme, follow the OS preference. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121118;
    --surface: #1b1a22;
    --surface-2: #232230;
    --surface-3: #2c2a3a;
    --ink: #eceaf3;
    --ink-2: #a9a7b5;
    --hairline: #2c2a38;
    --hair: #262432;
    --brand: #8b7bff;
    --brand-soft: #221f35;
    --accent-ink: #121118;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
    --f-F: #3f8fe0; --f-A: #c67d30; --f-I: #2aa87a; --f-R: #c46bad;
    --lvl-hi: #2aa87a; --lvl-mid: #c08519; --lvl-lo: #bd4740;
    --lvl-hi-ink: #2aa87a; --lvl-mid-ink: #d99a2b; --lvl-lo-ink: #d1544b;
  }
}

/* ── 3. Interface (stable names; map a project's own names onto these) ────── */
:root {
  --bg: var(--paper);
  --surface-alt: var(--surface-2);
  --border: var(--hairline);
  --text: var(--ink);
  --muted: var(--ink-2);
  --accent: var(--brand);
  --track: var(--surface-3);
  --sans: var(--body-f);
}

/* ── 4. Base ──────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); background: var(--bg); color: var(--text);
  line-height: 1.5; font-size: 15px; -webkit-font-smoothing: antialiased;
  transition: background 0.2s, color 0.2s; }
a { color: var(--accent); text-underline-offset: 2px; }
code { font-family: var(--mono); font-size: .9em; }
.mono { font-family: var(--mono); }
h1, h2, h3 { font-family: var(--disp); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-2); }
::-webkit-scrollbar-track { background: transparent; }

/* ── 5. Shell: rail + command bar ─────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }

.rail { background: var(--surface); border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 14px; position: sticky; top: 0; height: 100vh; }
.brand-mark { display: flex; align-items: center; gap: 10px; padding: 6px 8px 20px; text-decoration: none; }
/* The glyph's letters come from the project: style="--glyph: 'F'" on the element. */
.brand-glyph { width: 32px; height: 32px; border-radius: 9px; flex: none; position: relative;
  background: linear-gradient(135deg, var(--brand), color-mix(in oklab, var(--brand), #db2777 55%)); }
.brand-glyph::after { content: var(--glyph, ""); position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.92); }
.brand-name { font-family: var(--disp); font-weight: 800; letter-spacing: -0.02em; font-size: 14.5px;
  line-height: 1.05; color: var(--ink); margin: 0; }
.brand-sub { font-family: var(--mono); font-size: 9.5px; color: var(--ink-2); letter-spacing: .04em; margin-top: 2px; }
/* The site line under the name links to rijdho.github.io in every tool (1.0.2). */
a.brand-sub { display: block; text-decoration: none; }
a.brand-sub:hover { color: var(--brand); text-decoration: underline; }
/* The icon and the name link to the tool's own start page (1.0.3). */
a.brand-glyph { display: block; }
.brand-name a { color: inherit; text-decoration: none; }
.brand-name a:hover { color: var(--brand); }
/* The family line under the site line: "Part of Metaudits" (1.0.4). */
.brand-family { font-family: var(--mono); font-size: 9.5px; color: var(--ink-2); letter-spacing: .04em; margin: 2px 0 0; }
.brand-family a { color: inherit; text-decoration: none; }
.brand-family a:hover { color: var(--brand); text-decoration: underline; }

.nav-label { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); padding: 10px 8px 6px; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--r-sm);
  color: var(--ink-2); border: none; background: none; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--body-f); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nav-step { width: 26px; height: 22px; border-radius: 7px; flex: none; display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  background: var(--surface-2); color: var(--ink-2); }
.nav-item.active .nav-step { background: var(--brand); color: #fff; }
.rail-foot { margin-top: auto; font-family: var(--mono); font-size: 10.5px; color: var(--ink-2);
  padding: 8px; line-height: 1.7; }
.rail-foot a { color: var(--ink-2); }
.rail-foot a:hover { color: var(--brand); }

.main-col { min-width: 0; display: flex; flex-direction: column; }
/* Content column anchored to the rail: one shared left gutter with the command bar. */
.content { padding: 28px 44px 40px; flex: 1; }
.content-inner { max-width: 980px; margin: 0; }

.cmdbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: 11px 44px; background: color-mix(in oklab, var(--paper), transparent 8%);
  backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--hairline); }
.cmd-title { font-family: var(--disp); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; color: var(--ink); }
.cmd-spacer { flex: 1; }

.menu-btn { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none;
  border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); cursor: pointer; }
.menu-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.rail-backdrop { display: none; }

@media (max-width: 880px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: fixed; top: 0; left: -280px; width: 260px; height: 100vh; overflow-y: auto; z-index: 60; transition: left 0.2s ease; }
  .app.rail-open .rail { left: 0; box-shadow: 0 0 40px rgba(0, 0, 0, 0.25); }
  .app.rail-open .rail-backdrop { display: block; position: fixed; inset: 0; z-index: 55; border: none; background: rgba(0, 0, 0, 0.35); }
  .menu-btn { display: inline-flex; }
  .content { padding: 20px 16px 32px; }
  .cmdbar { padding: 11px 14px; }
  .site-foot { padding: 18px 16px 28px; }
}
/* Phones: the command bar keeps menu, title, languages and theme; the source link, always repeated in
   the house footer, steps out so nothing is pushed past the edge. Buttons never shrink. */
.menu-btn, .icon-btn, .ghost-btn, .langs { flex: none; }
.cmd-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
  .cmdbar { gap: 8px; }
  .cmdbar .ghost-btn { display: none; }
}

/* ── 6. Components ────────────────────────────────────────────────────────── */
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); }
.lede { color: var(--muted); font-size: .95rem; max-width: 62ch; margin-top: 6px; }
.lede b, .lede strong { color: var(--text); font-weight: 600; }
.muted { color: var(--muted); font-size: .84rem; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 22px;
  box-shadow: var(--shadow); }
.card h3 { margin: 0 0 15px; font-size: .8rem; font-family: var(--mono); letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; }

.icon-btn { width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--hairline);
  background: var(--surface); display: grid; place-items: center; color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { color: var(--ink); border-color: var(--ink-2); }
.icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.ghost-btn { font-family: var(--mono); font-size: 11px; color: var(--ink-2);
  border: 1px solid var(--hairline); background: var(--surface); white-space: nowrap;
  border-radius: 8px; padding: 6px 10px; cursor: pointer; text-decoration: none; }
.ghost-btn:hover { color: var(--brand); border-color: var(--ink-2); }
.btn { font-family: var(--mono); background: var(--brand); color: var(--accent-ink); border: none;
  border-radius: var(--r-sm); padding: 10px 18px; font-weight: 700; cursor: pointer; }
.btn:hover { filter: brightness(1.07); }
.btn.ghost { background: none; border: 1px solid var(--border); color: var(--text); }
.btn.ghost:hover { border-color: var(--brand); color: var(--brand); filter: none; }

/* Filter chips (pill toggles); the pressed one carries aria-pressed="true". */
.chip { font-family: var(--mono); font-size: .76rem; border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); font-weight: 600; }

.langs { display: flex; gap: 1px; font-family: var(--mono); font-size: 11.5px; }
.langs button { border: none; background: none; color: var(--ink-2); padding: 5px 7px; border-radius: 6px;
  cursor: pointer; font-family: var(--mono); font-size: 11.5px; }
.langs button[aria-current="true"] { color: var(--ink); background: var(--surface-2); font-weight: 600; }

/* The house footer, the same on every tool:
     By <author> (ORCID <id>) · <licences> · Source on GitHub[ · DOI <doi>]
   The DOI item appears once the project is archived on Zenodo (concept DOI). */
.site-foot { border-top: 1px solid var(--hairline); padding: 18px 44px 28px; font-size: 12.5px;
  color: var(--muted); line-height: 1.7; }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--brand); }
.site-foot .sep { margin: 0 .45em; opacity: .6; }

/* Tables inside cards */
.card table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.card th { text-align: left; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 6px 8px; }
.card td { border-top: 1px solid var(--hair); padding: 6px 8px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }