/* Colours: Gender Medicine Compass (frontend/app/globals.css).
   Geometry: EvoNEST "edge" theme (square corners, ink borders, hard offset shadows). */

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('fonts/atkinson-hyperlegible-next-latin-ext-wght-italic.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
  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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BBB Poppins TN';
  src: url('fonts/BBBPoppinsTN-DisplaySemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BBB Poppins TN';
  src: url('fonts/BBBPoppinsTN-DisplayBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --background: oklch(0.985 0.002 247.839);   /* gray-50 */
  --foreground: oklch(0.13 0.028 261.692);    /* gray-900 */
  --card: oklch(1 0 0);
  --muted: oklch(0.968 0.007 247.896);        /* gray-100 */
  --muted-foreground: oklch(0.446 0.03 256.802); /* gray-600 */
  --primary: oklch(0.546 0.245 262.881);      /* blue-600 */
  --primary-foreground: oklch(1 0 0);
  --term: var(--primary);
  --ink: var(--foreground);
  --mauve: #8839ef;                           /* Catppuccin Latte, as on daniele.liprandi.com */
  --pink: #ea76cb;
  --ring: oklch(0.546 0.245 262.881);

  --ok: oklch(0.925 0.084 155.995);           /* green-100 */
  --ok-foreground: oklch(0.527 0.154 150.069); /* green-700 */
  --part: oklch(0.936 0.075 85.813);          /* amber-100 */
  --part-foreground: oklch(0.446 0.148 47.57); /* amber-800 */
  --no: oklch(0.936 0.032 17.717);            /* red-100 */
  --no-foreground: oklch(0.505 0.213 27.518); /* red-700 */
  --na: var(--muted);
  --na-foreground: var(--muted-foreground);

  --shadow-sm: 3px 3px 0 0 var(--ink);
  --shadow-md: 4px 4px 0 0 var(--ink);
  --shadow-lg: 5px 5px 0 0 var(--ink);
  --shadow-tt: 5px 5px 0 0 color-mix(in oklch, var(--ink) 20%, transparent);

  --font-sans: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-heading: 'BBB Poppins TN', 'Atkinson Hyperlegible Next', system-ui, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: oklch(0.129 0.042 264.695);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(0.208 0.042 265.755);
  --muted: oklch(0.279 0.041 260.031);
  --muted-foreground: oklch(0.704 0.04 256.788);
  --primary: oklch(0.707 0.165 254.624);      /* blue-400: the Compass dark primary is near white */
  --primary-foreground: oklch(0.129 0.042 264.695);
  --term: oklch(0.707 0.165 254.624);
  --ink: oklch(0.704 0.04 256.788);
  --mauve: #cba6f7;                           /* Catppuccin Mocha */
  --pink: #f5c2e7;
  --shadow-tt: 5px 5px 0 0 color-mix(in oklch, var(--ink) 35%, transparent); /* 20% vanishes on the dark background */
  --ring: oklch(0.707 0.165 254.624);

  --ok: oklch(0.262 0.051 152.239);
  --ok-foreground: oklch(0.723 0.191 149.579);
  --part: oklch(0.279 0.077 45.635);
  --part-foreground: oklch(0.788 0.184 80.254);
  --no: oklch(0.258 0.092 26.042);
  --no-foreground: oklch(0.704 0.191 22.216);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

a { color: var(--primary); text-underline-offset: 3px; text-decoration-thickness: 1px; }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.page {
  max-width: 54rem;
  margin: 0 auto;
  padding: 2rem 16px 4rem;
}

/* ── Site header (as on daniele.liprandi.com) ───────────── */

.site-header {
  background: var(--muted);
  border-bottom: 1.5px solid var(--ink);
}
.site-header-inner {
  max-width: 54rem;
  margin: 0 auto;
  padding: 0.55rem 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--foreground);
  text-decoration: none;
}
.brand:hover { color: var(--mauve); }

/* ── Page header ────────────────────────────────────────── */

.top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.top h1 { flex: 1; font-size: clamp(1.25rem, 3.4vw, 1.75rem); }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.btn {
  font: inherit;
  font-weight: 600;
  color: var(--foreground);
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: var(--shadow-md); }
.btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
.btn:disabled { cursor: progress; opacity: 0.75; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: 3px 3px 0 0 var(--mauve); }
.btn-primary:hover:not(:disabled) { box-shadow: 4px 4px 0 0 var(--mauve); }

.btn-icon {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  flex: none;
}
.btn-icon svg { width: 1.15rem; height: 1.15rem; }

.summary { margin: 0; }

.drop-target { outline: 2px dashed var(--primary); outline-offset: 6px; }

/* ── Guidance ───────────────────────────────────────────── */

details.guidance {
  margin-bottom: 1.75rem;
  border: 1.5px solid var(--ink);
  background: var(--card);
  box-shadow: 3px 3px 0 0 var(--pink);
}
details.guidance summary {
  cursor: pointer;
  padding: 0.6rem 0.9rem;
  font-weight: 600;
}
details.guidance ul { margin: 0; padding: 0 1.2rem 0.9rem 2.2rem; }
details.guidance li + li { margin-top: 0.4rem; }

/* ── Sections and items ─────────────────────────────────── */

.section {
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--mauve);
  margin-bottom: 1.75rem;
}
.section > h2 {
  font-size: 1.1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1.5px solid var(--ink);
  background: color-mix(in oklch, var(--pink) 16%, var(--card));
}

.item {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.25rem 0.9rem;
  padding: 0.9rem 1rem;
}
.item + .item { border-top: 1px solid color-mix(in oklch, var(--ink) 30%, transparent); }

.item-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding-top: 0.1rem;
}
.item-id { font-weight: 700; font-size: 0.95rem; color: var(--mauve); }

.box {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1.5px solid var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
}
.box svg { width: 1.05rem; height: 1.05rem; }
.box[data-status="reported"] { background: var(--ok); color: var(--ok-foreground); }
.box[data-status="partly"] { background: var(--part); color: var(--part-foreground); }
.box[data-status="not_reported"] { background: var(--no); color: var(--no-foreground); }
.box[data-status="not_applicable"] { background: var(--na); color: var(--na-foreground); }

.item-title { font-weight: 600; margin: 0 0 0.3rem; }
.item-desc { margin: 0; }

.result {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1.5px dashed color-mix(in oklch, var(--ink) 45%, transparent);
}
.result p { margin: 0.2rem 0 0; }
.result-status { font-weight: 700; }
.result-status[data-status="reported"] { color: var(--ok-foreground); }
.result-status[data-status="partly"] { color: var(--part-foreground); }
.result-status[data-status="not_reported"] { color: var(--no-foreground); }
.result-status[data-status="not_applicable"] { color: var(--foreground); }
.result-quote { font-style: italic; }

/* ── Terms and tooltips ─────────────────────────────────── */

.term {
  color: var(--term);
  cursor: help;
  text-decoration: underline dotted 1px;
  text-decoration-color: color-mix(in oklch, var(--term) 50%, transparent);
  text-underline-offset: 3px;
}
.term:hover, .term.is-open { text-decoration-style: solid; text-decoration-color: var(--term); }

.tt {
  position: fixed;
  z-index: 100;
  max-width: min(26rem, calc(100vw - 32px));
  background: var(--card);
  color: var(--foreground);
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow-tt);
  padding: 0.75rem 0.9rem 0.7rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
.tt:focus { outline: none; }
.tt-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--mauve);
  margin: 0 0 0.35rem;
}
.tt.pinned .tt-title { padding-right: 2rem; }
.tt-title { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.tt.dragging .tt-title { cursor: grabbing; }
.tt.dragging { user-select: none; }
.tt-body p { margin: 0 0 0.45rem; }
.tt-source { margin: 0.5rem 0 0; font-size: 0.85rem; }
.tt-source a { overflow-wrap: anywhere; }
.tt-hint { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--muted-foreground); }
.tt.pinned .tt-hint { display: none; }

.tt-close {
  display: none;
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--foreground);
  background: var(--card);
  border: 1.5px solid var(--ink);
  cursor: pointer;
}
.tt.pinned .tt-close { display: grid; place-items: center; }
.tt-close:hover { background: var(--muted); }

/* ── Login ──────────────────────────────────────────────── */

.login {
  min-height: calc(100vh - 3.5rem);
  padding-bottom: 2rem;
  display: grid;
  place-items: center;
  padding: 16px;
}
.login form {
  width: min(22rem, 100%);
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: var(--shadow-lg);
  padding: 1.25rem;
  display: grid;
  gap: 0.9rem;
}
.login h1 { font-size: 1.2rem; }
.login label { display: grid; gap: 0.3rem; font-weight: 600; }
.login input {
  font: inherit;
  font-weight: 400;
  color: var(--foreground);
  background: var(--background);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  padding: 0.45rem 0.6rem;
}
.login .error { margin: 0; color: var(--no-foreground); font-weight: 600; }

/* ── Site footer ────────────────────────────────────────── */

.site-footer {
  background: var(--muted);
  border-top: 1.5px solid var(--ink);
  font-size: 0.85rem;
  line-height: 1.5;
}
.site-footer-inner {
  max-width: 54rem;
  margin: 0 auto;
  padding: 1rem 16px 1.5rem;
}
.site-footer p { margin: 0 0 0.6rem; }
.site-footer p:last-child { margin-bottom: 0; }

/* ── Small screens and print ────────────────────────────── */

@media (max-width: 560px) {
  .page { padding-top: 1.25rem; }
  .item { grid-template-columns: 2.1rem 1fr; gap: 0.25rem 0.7rem; padding: 0.8rem 0.75rem; }
  .section > h2 { padding: 0.7rem 0.75rem; }
}

@media print {
  .toolbar .btn, .site-header, .site-footer, .tt { display: none !important; }
  .section, details.guidance { box-shadow: none; break-inside: auto; }
  .item { break-inside: avoid; }
  .term { color: inherit; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}