/* The professors' guide to umfclujresearch.org.
   One page, two languages, no framework and no build step. The visual
   language is the platform's own: the circles section's teal, Newsreader for
   display, a system stack for reading. Somebody who has seen the site should
   recognise this as part of it. */

:root {
  --bg: #fbfbf9;
  --panel: #ffffff;
  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-faint: #64748b;
  --line: #e2e8f0;
  --line-soft: #eef2f6;
  --brand: #0f766e;
  --brand-ink: #ffffff;
  --brand-wash: #ecfdf5;
  --brand-edge: #99f6e4;
  --warn-wash: #fffbeb;
  --warn-edge: #fcd34d;
  --warn-ink: #92400e;
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #071310;
    --panel: #0c1c18;
    --ink: #e6f2ee;
    --ink-soft: #a8c4bc;
    --ink-faint: #7d9b93;
    --line: #17322b;
    --line-soft: #112620;
    --brand: #5eead4;
    --brand-ink: #04211b;
    --brand-wash: #0d2620;
    --brand-edge: #1c4b41;
    --warn-wash: #241c07;
    --warn-edge: #6b5310;
    --warn-ink: #fcd34d;
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Chapter tops must clear the fixed bar. */
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  /* No element may push the page sideways. On a phone a single overflowing
     table or heading turns every vertical swipe into a fight. */
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .display {
  font-family: Newsreader, ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* --- language switching ---------------------------------------------------
   Both languages are in the document. No JavaScript means English, which is
   the honest default for a page that has to work when it is opened from a
   chat app on a phone with a bad connection. */
html[data-lang="en"] [lang="ro"] { display: none; }
html[data-lang="ro"] [lang="en"] { display: none; }

/* --- the bar -------------------------------------------------------------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.wordmark {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark span { color: var(--ink-faint); font-weight: 500; }

.langs { display: flex; gap: 0.25rem; }
.langs button {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  /* 44px of touch target, which is the smallest thing a thumb hits
     reliably. The visual size is unchanged; the padding does the work. */
  min-height: 2.5rem;
  min-width: 2.75rem;
  padding: 0.4rem 0.7rem;
  border-radius: 0.4rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
}
.langs button:hover { color: var(--ink); }
.langs button[aria-pressed="true"] {
  background: var(--brand);
  color: var(--brand-ink);
}

/* The read-so-far line. Decorative, so it is hidden from assistive tech. */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--brand);
  z-index: 50;
  transition: width 0.1s linear;
}
@media (prefers-reduced-motion: reduce) { .progress { transition: none; } }

/* --- the hero, which is the circle masthead in another costume ------------ */
.hero {
  background: var(--brand);
  color: var(--brand-ink);
  padding: clamp(4.5rem, 12vw, 8rem) clamp(1.1rem, 4vw, 2.5rem) clamp(2.5rem, 7vw, 4.5rem);
}
.hero-inner { max-width: 62rem; margin: 0 auto; }
/* EVERY COLOUR IN THE BAND IS STATED, none inherited.
   `p { color: var(--ink-soft) }` further down is a type selector on the
   element, so it beats the `color` the .hero block sets on the ancestor:
   inheritance loses to any declaration that matches the element itself,
   whatever its specificity. The standfirst rendered as body grey on bright
   teal, which in dark mode is very nearly invisible. Mixing toward the band
   rather than using opacity keeps that honest if either token moves. */
.hero p { color: var(--brand-ink); }
.hero .eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-ink) 72%, var(--brand));
  margin: 0 0 1.1rem;
}
.hero h1 {
  margin: 0;
  /* "umfclujresearch.org" is one 19 character word in a display serif. At
     2.4rem it is wider than a 320px screen, and a heading that overflows
     takes the horizontal scrollbar with it. */
  font-size: clamp(1.85rem, 7vw, 4.4rem);
  overflow-wrap: break-word;
}
.hero .standfirst {
  margin: 1.4rem 0 0;
  max-width: 40rem;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: color-mix(in srgb, var(--brand-ink) 88%, var(--brand));
}
.hero .meta {
  margin: 2.2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--brand-ink) 68%, var(--brand));
}

/* --- the shell ------------------------------------------------------------ */
.shell {
  display: grid;
  gap: 0;
  max-width: 82rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}
@media (min-width: 68rem) {
  .shell {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 4rem;
  }
}

/* --- contents ------------------------------------------------------------- */
.rail { display: none; }
@media (min-width: 68rem) {
  .rail {
    display: block;
    position: sticky;
    top: 5rem;
    align-self: start;
    padding: 3.5rem 0;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
  }
}
.rail p {
  margin: 0 0 0.9rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail li { margin: 0 0 0.15rem; }
.rail a {
  display: flex;
  gap: 0.6rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--ink-soft);
  text-decoration: none;
}
.rail a:hover { background: var(--line-soft); color: var(--ink); }
.rail a .n { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.rail a[aria-current="true"] { background: var(--brand-wash); color: var(--brand); font-weight: 600; }
.rail a[aria-current="true"] .n { color: var(--brand); }

/* --- contents, on a phone -------------------------------------------------
   The rail is a sticky column and there is nowhere to put one below 68rem, so
   under that width the same list is a closed disclosure at the top. Closed,
   because somebody who opened this from a chat app wants the first chapter,
   not a menu. */
.mobile-contents { display: block; margin: 2.5rem 0 0; }
@media (min-width: 68rem) { .mobile-contents { display: none; } }
.mobile-contents summary {
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.6rem 0;
}
.mobile-contents ol { margin: 0.4rem 0 0; }
.mobile-contents a {
  display: flex;
  gap: 0.7rem;
  padding: 0.55rem 0.2rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-contents a .n { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* --- chapters ------------------------------------------------------------- */
main { padding: 3.5rem 0 6rem; min-width: 0; }

.chapter { padding: 2.5rem 0 3rem; border-top: 1px solid var(--line); }
.chapter:first-of-type { border-top: 0; padding-top: 1rem; }
.chapter > .num {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--brand);
  margin-bottom: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.chapter h2 {
  margin: 0 0 1.2rem;
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  max-width: 22ch;
}
.chapter h3 {
  margin: 2rem 0 0.6rem;
  font-size: 1.1rem;
}
p, li { max-width: var(--measure); }
p { margin: 0 0 1rem; color: var(--ink-soft); }
.chapter > p:first-of-type { color: var(--ink); }
strong { color: var(--ink); font-weight: 600; }

ul, ol.steps { padding-left: 0; margin: 0 0 1.2rem; list-style: none; }
ul li, ol.steps li {
  position: relative;
  padding-left: 1.5rem;
  margin: 0 0 0.5rem;
  color: var(--ink-soft);
}
ul li::before {
  content: "";
  position: absolute;
  left: 0.35rem; top: 0.7rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand);
}
ol.steps { counter-reset: step; }
ol.steps li { padding-left: 2.1rem; margin-bottom: 0.8rem; }
ol.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: 0.15rem;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--brand-wash);
  border: 1px solid var(--brand-edge);
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

a { color: var(--brand); }

/* A tab or button name, so a sentence can point at the real thing. */
.ui {
  display: inline-block;
  padding: 0.05em 0.45em;
  border-radius: 0.35rem;
  background: var(--brand-wash);
  border: 1px solid var(--brand-edge);
  color: var(--brand);
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
}

/* --- callouts ------------------------------------------------------------- */
.note, .warn {
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  border-radius: 0.7rem;
  border: 1px solid var(--brand-edge);
  background: var(--brand-wash);
  max-width: calc(var(--measure) + 2.4rem);
}
.warn { border-color: var(--warn-edge); background: var(--warn-wash); }
.note p, .warn p { margin: 0; color: var(--ink); font-size: 0.95rem; }
.note p + p, .warn p + p { margin-top: 0.6rem; }
.note .label, .warn .label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.4rem;
}
.warn .label { color: var(--warn-ink); }

/* --- the tab strip mock --------------------------------------------------- */
.screen {
  margin: 1.8rem 0;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  overflow: hidden;
  background: var(--panel);
}
.screen .band {
  background: var(--brand);
  color: var(--brand-ink);
  padding: 1.1rem 1.2rem 0.7rem;
}
.screen .band .name {
  font-family: Newsreader, ui-serif, Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
}
.screen .band .sub {
  font-size: 0.78rem;
  margin-top: 0.15rem;
  color: color-mix(in srgb, var(--brand-ink) 72%, var(--brand));
}
.screen .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.9rem;
  padding-top: 0.6rem;
  border-top: 1px solid color-mix(in srgb, var(--brand-ink) 25%, transparent);
}
.screen .tabs span {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.2rem 0.5rem;
  border-radius: 0.35rem;
  opacity: 0.82;
}
.screen .tabs span.on {
  background: color-mix(in srgb, var(--brand-ink) 22%, transparent);
  opacity: 1;
  font-weight: 600;
}
.screen .body { padding: 1rem 1.2rem; font-size: 0.85rem; color: var(--ink-faint); }

/* --- the table ------------------------------------------------------------ */
.tablewrap { overflow-x: auto; margin: 1.5rem 0 2rem; }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.88rem; }
th, td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--line-soft); }
thead th {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}
tbody th { font-weight: 500; color: var(--ink-soft); }
td { text-align: center; color: var(--ink-soft); }
td.yes { color: var(--brand); font-weight: 700; }
td.no { opacity: 0.35; }

/* THE TABLE STOPS BEING A TABLE below 46rem. A 34rem wide grid inside a
   horizontal scroller is a row of numbers you cannot line up with the label
   they belong to, on the one chapter where the whole point is the alignment.
   Each row becomes its own small block with the three answers labelled. */
@media (max-width: 46rem) {
  .tablewrap { overflow-x: visible; }
  table { min-width: 0; display: block; }
  thead { display: none; }
  tbody, tr, th, td { display: block; }
  tbody tr {
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.7rem;
  }
  tbody th {
    border: 0;
    padding: 0 0 0.5rem;
    color: var(--ink);
    font-weight: 600;
  }
  tbody td {
    border: 0;
    padding: 0.2rem 0;
    text-align: left;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
  }
  tbody td::before {
    content: attr(data-label);
    color: var(--ink-faint);
    font-weight: 500;
  }
}

/* --- close ---------------------------------------------------------------- */
.close {
  margin-top: 3rem;
  padding: 2rem;
  border-radius: 0.9rem;
  background: var(--panel);
  border: 1px solid var(--line);
}
.close h2 { margin-top: 0; }
footer {
  border-top: 1px solid var(--line);
  padding: 2rem clamp(1rem, 4vw, 2.5rem);
  font-size: 0.8rem;
  color: var(--ink-faint);
}
footer .inner { max-width: 82rem; margin: 0 auto; }

/* --- print ---------------------------------------------------------------- */
@media print {
  .topbar, .rail, .progress, .mobile-contents { display: none !important; }
  body { font-size: 11pt; background: #fff; color: #000; }
  .hero { background: #fff; color: #000; padding: 0 0 1.5rem; }
  .shell { display: block; max-width: none; padding: 0; }
  .chapter { break-inside: avoid; padding: 1rem 0; }
  a { color: #000; text-decoration: underline; }
  .note, .warn, .screen, .close { border: 1px solid #999; background: #fff; }
}