/* lab.css: minimal, accessible stylesheet for scalablecomputinglab.org. */

:root {
  color-scheme: light dark;
  --bg: #fff;
  --fg: #1a1a1a;
  --muted: #555;
  --link: #0b5cad;
  --line: #d0d0d0;
  --panel: #f4f4f4;
  --focus: #b35c00;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --fg: #e8e8e8;
    --muted: #b0b0b0;
    --link: #8ab4f8;
    --line: #3a3a3a;
    --panel: #1e1e1e;
    --focus: #ffb454;
  }
}

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

html {
  font: 100%/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0 auto;
  max-width: 42rem;
  padding: 1rem;
  background: var(--bg);
  color: var(--fg);
  overflow-wrap: break-word;   /* long URLs (e.g. printed link targets) wrap instead of overflowing */
}

h1, h2, h3 { line-height: 1.25; margin: 1.5rem 0 .5rem; }
h1 { font-size: 2rem; font-weight: 400; }
h2 { font-size: 1.4rem; font-weight: 500; }
h3 { font-size: 1.1rem; font-weight: 600; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }   /* avoids one-word last lines; ignored where unsupported */
p, ul { margin: 0 0 1rem; }
img { max-width: 100%; height: auto; }

/* Links stay underlined so they don't rely on color alone (WCAG 1.4.1). */
a { color: var(--link); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }

/* A clearly visible keyboard focus ring (WCAG 2.4.7 / 2.4.11). */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip link: hidden until it receives focus. */
.skip {
  position: absolute;
  left: 1rem;
  top: -3rem;
  padding: .5rem .75rem;
  background: var(--bg);
  color: var(--link);
}
.skip:focus { position: static; display: inline-block; margin-bottom: .5rem; }

/* Site header and nav: a wrapping row, so no hamburger is needed
   at any width (6 items fit on two lines even at 320px). */
header { border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.site { font-size: 1.25rem; font-weight: 600; color: var(--fg); text-decoration: none; }
nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
}
nav a { display: inline-block; padding: .35rem 0; }   /* target ≥ 24px tall (WCAG 2.5.8) */
nav a[aria-current="page"] {
  color: var(--fg);
  font-weight: 600;
  text-decoration-thickness: 3px;
}

/* Ruled lists (research areas, publications, software): no bullets, flush with
   the left margin, thin rules between items.
   role="list" in the HTML keeps list semantics in Safari/VoiceOver. */
.ruled { list-style: none; padding: 0; margin: 0 0 1rem; }
.ruled li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.ruled li:first-child { border-top: 1px solid var(--line); }

/* Publications: titles stand out; authors and venue recede. */
.pubs li { color: var(--muted); }
.pubs cite { font-style: normal; font-weight: 600; color: var(--fg); }

/* People cards */
.people {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
  /* Cards ~15rem wide, side by side; one full-width column on phones. */
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}
.person {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .75rem 1rem;
  background: var(--panel);
}
.person h2, .person h3 { margin: 0; font-size: 1.1rem; }
.person p { margin: .25rem 0 0; color: var(--muted); }
.person .links { color: var(--fg); }
.person .links a { display: inline-block; padding: .25rem 0; }   /* taller touch targets */

@media print {
  :root { color-scheme: light; --bg: #fff; --fg: #000; --link: #000; --muted: #333; --panel: #fff; --line: #bbb; }
  nav, .skip { display: none; }
  body { max-width: none; padding: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}