/* =============================================================================
   SITE.CSS — overrides on top of legacy.css (the waffles theme, copied as is).
   legacy.css styles the Drupal skeleton (#header, #sidebar-first, #preface-wrapper,
   #content-wrapper); this file fixes what looked poor and styles the new parts
   (news, staff, publications, filters). Tokens come from legacy.css :root.
   ========================================================================== */

:root {
  --c-muted: #6b7280;
  --c-accent-bg: #eef6f1;
  --focus: 0 0 0 3px rgba(7, 136, 71, .45);
}

/* Motion. The legacy theme faded #main-wrapper in from opacity 0 for 0.55s — long enough to see
   an empty page. Here: short rise-ins (≤ .35s, staggered by --i), scroll reveals only when JS runs
   (html.js), nothing at all with prefers-reduced-motion. Content never waits on an animation. */
#main-wrapper, #header, #preface-wrapper .column { animation: none !important; opacity: 1 !important; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade-out { to { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  #preface-wrapper .column { animation: rise .32s cubic-bezier(.2, .8, .2, 1) both !important; }
  #preface-wrapper .column:nth-child(2) { animation-delay: .04s !important; }
  #preface-wrapper .column:nth-child(3) { animation-delay: .08s !important; }
  /* Only the content moves. Header and menus are the frame: they never animate, so going from page
     to page (soft navigation in site.js) swaps the content alone. First load: one short rise. */
  html:not(.soft) #content-inner { animation: rise .3s cubic-bezier(.2, .8, .2, 1) both; }
  /* Soft navigation: the old content dims at once on click, the new one fades and rises in. */
  #content-inner { transition: opacity .14s ease-out; }
  #content-inner.is-leaving { opacity: .35; }
  #content-inner.soft-enter { animation: soft-in .28s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes soft-in { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  html.js [data-reveal] > *, html.js .reveal { transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
  html.js .reveal:not(.in) { opacity: 0; transform: translateY(10px); }
  a, #sidebar-first ul.menu a, .chip, .drawer-quick a { transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s; }
}

/* Self-explanatory focus for keyboard users. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 3px; }
.skip-link { position: absolute; left: -999px; top: .5em; z-index: 10; background: #fff; color: var(--c-primary-dark); padding: .5em 1em; border-radius: var(--radius); }
.skip-link:focus { left: .5em; }

/* Language switch: a text button instead of a 16px flag. */

/* Primary menu items are links styled as buttons by legacy.css; keep them. */

/* Sidebar menu: active trail readable, nested levels indented. */
#sidebar-first ul.menu ul { margin-left: .75em; border-left: 2px solid var(--c-border-light); padding-left: .5em; }
#sidebar-first a.active { font-weight: 700; }
#sidebar-first .side-block .content img { max-width: 100%; height: auto; }
#sidebar-first .side-block h2.title { font-size: 1em; text-transform: uppercase; letter-spacing: .04em; }

/* Body text from the old editor: tame images, tables and embedded iframes. */
.node-body img, .news-teaser img { max-width: 100%; height: auto; }
.node-body iframe { max-width: 100%; border: 0; }
.node-body iframe[src*="youtube"], .node-body iframe[src*="vimeo"] { aspect-ratio: 16 / 9; height: auto; }
/* Tables in old content are mostly layout (legacy.css removed their borders): keep them borderless. */
.node-body td, .node-body th { padding: .25em .5em; vertical-align: top; }
.node-body h2 { font-size: 1.4em; margin-top: 1.4em; }
.node-body h3 { font-size: 1.15em; margin-top: 1.2em; }
.node-body ul, .node-body ol { padding-left: 1.4em; margin-bottom: 1em; }
.node-body p, .news-teaser p { color: var(--c-text); }

.eyebrow { font-size: .8em; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); margin-bottom: .25em; }
.eyebrow a { color: inherit; }
.section-title { font-size: 1.3em; margin: 2em 0 .5em; padding-bottom: .25em; border-bottom: 2px solid var(--c-primary-light); }
.more-link { margin-top: 1em; font-weight: 600; }

/* News */
.news-teaser { padding: 1em 0; border-bottom: 1px solid var(--c-border-light); }
.news-teaser:last-of-type { border-bottom: 0; }
.news-teaser h2, .news-teaser h3 { font-size: 1em; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35em; }
.news-teaser h2 a, .news-teaser h3 a { color: var(--c-primary-light); text-decoration: none; }
.news-item h1.title { font-size: 1.6em; }

/* Filters (news year, publications) */
.filters { display: flex; flex-wrap: wrap; gap: .75em 1em; align-items: flex-end; margin-bottom: 1.25em; padding: 1em; background: var(--c-accent-bg); border-radius: var(--radius); }
.filters label { display: flex; flex-direction: column; font-size: .8em; font-weight: 600; color: var(--c-text-light); gap: .25em; }
.filters label.grow { flex: 1 1 16em; }
.filters input, .filters select { font: inherit; font-size: 1.1em; font-weight: 400; padding: .4em .5em; border: 1px solid var(--c-border); border-radius: var(--radius); background: #fff; min-width: 0; }
.filters button[type="submit"], a.button { font: inherit; font-weight: 600; padding: .5em 1.1em; border: 0; border-radius: var(--radius); background: var(--c-primary-light); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; }
.filters button[type="submit"]:hover, a.button:hover { background: var(--c-primary-hover); color: #fff; }
.filters .clear { align-self: center; font-size: .9em; }
.result-count { color: var(--c-muted); font-size: .9em; }

/* Publications */
.year-head { font-size: 1.1em; margin: 1.5em 0 .5em; color: var(--c-primary-dark); }
.pub-list { list-style: none; padding: 0; margin: 0; }
.pub { padding: .6em 0; border-bottom: 1px solid var(--c-border-light); display: flex; flex-direction: column; gap: .1em; }
.pub-authors { font-size: .9em; color: var(--c-text-light); }
.pub-title { font-weight: 600; color: var(--c-text); text-decoration: none; }
.pub-title:hover { color: var(--c-primary-light); text-decoration: underline; }
.pub-venue { font-size: .9em; color: var(--c-muted); }
.pub-doi { font-size: .75em; font-weight: 700; align-self: flex-start; padding: 0 .4em; border: 1px solid var(--c-border); border-radius: 3px; text-decoration: none; }
.pub-meta, .contact { display: grid; grid-template-columns: max-content 1fr; gap: .25em 1em; margin: 1em 0; }
.pub-meta dt, .contact dt { font-weight: 600; color: var(--c-text-light); }
.pub-meta dd, .contact dd { margin: 0; overflow-wrap: anywhere; }
.abstract { text-align: justify; }

/* Staff */
.people-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19em, 1fr)); gap: 1em; }
.person-card { display: flex; gap: 1em; padding: 1em; border: 1px solid var(--c-border-light); border-radius: var(--radius); }
.person-card .person-photo img, .person-card .initials { width: 88px; height: 114px; object-fit: cover; border-radius: var(--radius); display: block; background: var(--c-accent-bg); }
.person-card .initials { display: grid; place-items: center; font-weight: 700; color: var(--c-primary-dark); }
.person-card h2 { font-size: 1.05em; margin-bottom: .1em; }
.person-card h2 a { text-decoration: none; color: var(--c-primary-dark); }
.person-card .contact { font-size: .82em; margin: .4em 0 0; gap: .1em .6em; }
.degree { font-weight: 400; color: var(--c-text-light); font-size: .85em; }
.role { color: var(--c-muted); margin: 0; font-size: .9em; }
.person-head { display: flex; gap: 1.5em; align-items: flex-start; margin-bottom: 1.5em; }
.person-head img.person-photo { width: 140px; height: auto; border-radius: var(--radius); }
#content-wrapper .person-head h1.title { border: 0; padding: 0; margin-bottom: .15em !important; }
.ids { display: flex; gap: 1em; flex-wrap: wrap; font-size: .9em; }
.person-pubs h2 .count { color: var(--c-muted); font-weight: 400; }

/* Gallery */
.gallery { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); gap: .5em; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }

/* Pager */
.pager { display: flex; gap: 1.5em; justify-content: center; align-items: center; margin: 1.5em 0 .5em; font-weight: 600; }
.pager span { color: var(--c-muted); font-weight: 400; }

/* Footer: legacy.css hid it; a department site needs an address at the bottom. */
#footer { display: block !important; }
#legal-notice { display: flex !important; justify-content: space-between; flex-wrap: wrap; gap: .5em 2em; padding: 1.5em; color: var(--c-text-light); font-size: .85em; border-top: 1px solid var(--c-border); }
#legal-notice p { margin: 0; }

/* Mobile: the 40-item sidebar menu used to sit below the content; it becomes a toggle. */
@media (max-width: 768px) {
  #page { margin: 0; border-radius: 0; }
  #header { min-height: 0; padding: 1em 1em 1em; }
  #header-first h1 { font-size: 1.6em; }
  #header-first #slogan { font-size: 1em; }
  #header-middle { top: 1em !important; }
  #header-bottom { position: static !important; display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-top: 1em; padding: 0; }
  #primary-menu ul.menu { justify-content: flex-start !important; }
  #main-wrapper { padding: 0; gap: 0; }
  #sidebar-first .block-wrapper { border-radius: 0; }
  #content-wrapper { padding: 1.25em; border-radius: 0; }
  #preface-wrapper { padding: 1em 1em 0; }
  #preface-wrapper .column { padding: 1.25em; }
  .person-head { flex-direction: column; }
  .pub-meta, .contact { grid-template-columns: 1fr; }
  .pub-meta dt, .contact dt { margin-top: .4em; }
}

@media print {
  #header-bottom, #sidebar-first, .filters, .pager, .skip-link { display: none !important; }
  #page { max-width: none; margin: 0; }
}

/* Home cards: titles link to their section (the old theme did it with jQuery), links readable. */
#preface-wrapper h2.title a { color: inherit; text-decoration: none; }
#preface-wrapper h2.title a:hover { color: var(--c-primary-light); }
#preface-wrapper .column .content p a { color: var(--c-text-light); text-decoration: none; }
#preface-wrapper .column .content li a { color: var(--c-primary-light); }

/* Staff cards: fixed photo column, contact lines without labels so addresses fit. */
.people-grid { grid-template-columns: repeat(auto-fill, minmax(22em, 1fr)); }
.person-card .person-photo { flex: 0 0 88px; }
.person-card .contact { grid-template-columns: 1fr; }
.person-card .contact dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.person-card .contact dd { overflow-wrap: normal; }

/* Announcement boxes and green emphasis — kept from the old editor's inline styles. */
.callout { background: #f0f0f0; border-left: 4px solid var(--c-primary-dark); padding: .9em 1.1em; margin: 0 0 1.2em; }
.callout p:first-child { font-size: 1.1em; }
.accent { color: var(--c-primary-dark); }
span.accent { font-weight: 600; }

/* News dates as headings, as on the old site. */
.news-teaser h2, .news-teaser h3 { font-size: 1.3em; text-transform: uppercase; letter-spacing: 0; font-weight: 600; padding-bottom: .4em; border-bottom: 1px solid var(--c-border-light); margin-bottom: .7em; }
.news-teaser { border-bottom: 0; padding: .6em 0; }
.section-title { font-size: 1.8em; }

/* legacy.css applies border-box only to the tags Drupal used (div, p, ...); the new templates
   also use section/main/aside/header/nav/footer, which then overflowed by their padding. */
*, *::before, *::after { box-sizing: border-box; }

/* Long unbreakable strings (URLs pasted as link text, e-mail addresses) must wrap instead of
   widening the column; on phones they pushed the whole content past the right edge, where
   #page { overflow: hidden } clipped it. */
#content-wrapper, #preface-wrapper .column { min-width: 0; overflow-wrap: break-word; }
#content-wrapper a, .callout a, .pub-meta dd { overflow-wrap: anywhere; }
#content-wrapper h1.title { overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 768px) {
  #content-wrapper h1.title { font-size: 1.7em; }
  .callout { padding: .8em .9em; }
}

/* Old news items were sometimes typed into <pre>: wrap them like normal text. Anything
   embedded with a fixed width in the old editor may not exceed the column. */
.node-body pre, .news-teaser pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: inherit; margin: 0 0 1em; }
.node-body :is(img, video, iframe, object, embed, table), .news-teaser :is(img, video, iframe, table) { max-width: 100%; }
.node-body img, .news-teaser img { height: auto; }
.node-body p, .node-body li, .node-body td, .news-teaser p { overflow-wrap: anywhere; }

/* Sidebar block titles ("O KTI", "NASZE LABORATORIA") as on the old site. */
#sidebar-first .block-wrapper > h2.title { font-size: 1em; text-transform: uppercase; letter-spacing: .04em; padding-bottom: .5em; margin-bottom: .75em; border-bottom: 2px solid var(--c-primary-light); }
.term-list { padding-left: 1.2em; }
.term-list li { margin-bottom: .4em; }

/* Meaning kept from the old editor's inline styles (tools/clean_html.py). */
.float-left { float: left; margin: .2em 1.2em .8em 0; max-width: 45%; }
.float-right { float: right; margin: .2em 0 .8em 1.2em; max-width: 45%; }
.node-body::after, .news-teaser .content::after { content: ""; display: table; clear: both; }
.node-body h2, .node-body h3, .node-body hr, .callout { clear: both; }
.accent-red { color: #b73534; }
.muted { color: var(--c-muted); }
.callout.notice { background: #f9ecec; border-left-color: #b73534; color: #8f2524; }
table.callout { background: #eef6f6; }
@media (max-width: 480px) { .float-left, .float-right { float: none; display: block; margin: .5em 0 1em; max-width: 100%; } }

.person-card .ids { font-size: .78em; gap: .75em; margin: .35em 0 0; }

/* Alignment kept from the old editor (text-align / align=). */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.node-body details { margin: .3em 0; }
.node-body summary { cursor: pointer; }
.node-body summary::marker { color: var(--c-primary-light); }
.term-teasers .teaser { margin-bottom: 1.5em; }


/* ===== Icons, chips, buttons ===== */
.icon { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.18em; }
.chip { display: inline-flex; align-items: center; gap: .35em; padding: .2em .7em; border: 1px solid var(--c-border); border-radius: 999px; font-size: .82em; font-weight: 600; color: var(--c-primary-dark); text-decoration: none; background: #fff; }
.chip:hover { border-color: var(--c-primary-light); color: var(--c-primary-light); text-decoration: none; }
a.button.ghost { background: transparent; color: var(--c-primary-dark); border: 1px solid var(--c-border); }
a.button.ghost:hover { border-color: var(--c-primary-light); color: var(--c-primary-light); background: var(--c-accent-bg); }

/* File links: the legacy iconizer module put a PDF icon after every link to a PDF. */
.node-body a[href$=".pdf" i]::after, .news-teaser a[href$=".pdf" i]::after {
  content: "PDF"; display: inline-block; margin-left: .35em; padding: 0 .3em; border-radius: 3px; font-size: .65em; font-weight: 700;
  letter-spacing: .03em; line-height: 1.5; color: #fff; background: #c0392b; vertical-align: .15em; }

/* ===== Staff profile (shared by every person and every profile subpage) ===== */
.profile { display: grid; grid-template-columns: 150px 1fr; gap: 1.6em; align-items: start; margin-bottom: 1.4em; }
.profile-photo img, .profile-photo .initials { width: 150px; height: 190px; object-fit: cover; border-radius: 6px; display: grid; place-items: center;
  background: var(--c-accent-bg); color: var(--c-primary-dark); font-size: 2.4em; font-weight: 700; box-shadow: 0 6px 18px rgba(2, 83, 42, .12); }
.profile-name { font-size: 1.9em; line-height: 1.2; margin: .1em 0 .15em; color: var(--c-primary-dark); font-weight: 600; }
.profile-name .degree, .profile-name .post { font-size: .55em; font-weight: 400; color: var(--c-text-light); }
.profile .role { font-size: 1em; color: var(--c-text-light); margin-bottom: .8em; }
.profile-contact { list-style: none; padding: 0; margin: 0 0 .8em; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: .4em 2em; }
.profile-contact li { display: flex; gap: .5em; align-items: flex-start; color: var(--c-text); }
.profile-contact li.wide { grid-column: 1 / -1; }
.profile-contact .icon { color: var(--c-primary-light); margin-top: .15em; }
.profile-ids { display: flex; flex-wrap: wrap; gap: .5em; margin: 0; }
.profile-tabs { border-bottom: 1px solid var(--c-border); margin: 0 0 1.5em; }
.profile-tabs ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25em; overflow-x: auto; scrollbar-width: thin; }
.profile-tabs a { display: block; padding: .6em .9em; white-space: nowrap; font-weight: 600; font-size: .9em; color: var(--c-text-light); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.profile-tabs a:hover { color: var(--c-primary-dark); background: var(--c-accent-bg); }
.profile-tabs a[aria-current] { color: var(--c-primary-dark); border-bottom-color: var(--c-primary-light); }
.subpage-title { font-size: 1.5em; margin: 0 0 .8em; }
.profile-bio h2, .profile-bio h3 { scroll-margin-top: 1em; }
.person-pubs { margin-top: 2em; padding-top: 1.2em; border-top: 1px solid var(--c-border); }
.person-pubs h2 { display: flex; align-items: center; gap: .5em; }
.person-pubs h2 .count { font-size: .55em; padding: .1em .6em; border-radius: 999px; background: var(--c-accent-bg); color: var(--c-primary-dark); }

/* Staff list cards: same photo crop for everybody, contact lines with icons. */
.person-card { transition: border-color .15s, box-shadow .15s, transform .15s; }
.person-card:hover { border-color: #cfe5d8; box-shadow: 0 6px 18px rgba(2, 83, 42, .08); }
.person-card .person-photo img, .person-card .initials { width: 88px; height: 112px; }

/* ===== Office hours ===== */
.oh-table { width: 100%; border-collapse: collapse; }
.oh-table th, .oh-table td { text-align: left; padding: .7em .6em; border-bottom: 1px solid var(--c-border-light); vertical-align: middle; }
.oh-table thead th { font-size: .75em; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); border-bottom: 2px solid var(--c-border); }
.oh-table tbody tr:hover { background: #fafbfa; }
.oh-person { display: flex; align-items: center; gap: .75em; text-decoration: none; color: var(--c-primary-dark); font-weight: 600; }
.oh-person img, .oh-person .initials { width: 40px; height: 50px; object-fit: cover; border-radius: 4px; display: grid; place-items: center; background: var(--c-accent-bg); font-size: .8em; flex: none; }
.oh-person .degree { font-weight: 400; color: var(--c-text-light); font-size: .85em; }
.slots { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4em; }
.slots li { display: inline-flex; align-items: center; border: 1px solid #cfe5d8; border-radius: 6px; overflow: hidden; font-size: .88em; }
.slot-day { background: var(--c-primary-dark); color: #fff; padding: .2em .55em; font-weight: 600; text-transform: capitalize; }
.slot-time { padding: .2em .55em; font-weight: 600; color: var(--c-primary-dark); background: #fff; }
.slot-note { padding: .2em .55em; color: var(--c-muted); font-size: .9em; background: var(--c-accent-bg); }

/* ===== Header: site name (not an h1 — each page has its own), language switch ===== */
#header-first .site-name { color: #fff; font-size: 2.75em; font-weight: 600; line-height: 1.2; margin: .2em 0 0; }
#header-first .site-name a { color: #fff; text-decoration: none; }
.lang-switch { display: inline-flex; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; overflow: hidden; }
.lang-switch a { padding: .3em .85em; font-size: .78em; font-weight: 700; letter-spacing: .08em; color: rgba(255, 255, 255, .85); text-decoration: none; }
.lang-switch a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.lang-switch a[aria-current] { background: #fff; color: var(--c-primary-dark); }
#header-middle { top: 92px; }
.nav-toggle, .drawer, .drawer-scrim { display: none; }

/* ===== Phone: compact header + off-canvas drawer (left) ===== */
@media (max-width: 768px) {
  #page { margin: 0; }
  #header { position: sticky; top: 0; z-index: 30; min-height: 0 !important; padding: 10px 12px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
  #header-wrapper { display: flex; align-items: center; gap: 10px; }
  #header-first { margin: 0 !important; flex: 1; min-width: 0; }
  #header-first #slogan { font-size: .68em !important; margin: 0 !important; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  #header-first .site-name { font-size: 1.02em; line-height: 1.25; margin: 1px 0 0; }
  #header-middle { position: static !important; }
  #header-bottom { display: none !important; }
  .nav-toggle { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; }
  .nav-toggle .icon { width: 24px; height: 24px; }
  .lang-switch a { padding: .35em .6em; }

  .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 49; background: rgba(5, 20, 12, .45); opacity: 0; transition: opacity .25s; }
  .drawer-scrim.show { opacity: 1; }
  .drawer { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: min(88vw, 360px);
    background: #fff; box-shadow: 12px 0 40px rgba(0, 0, 0, .2); transform: translateX(-102%); transition: transform .3s cubic-bezier(.2, .9, .2, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px); }
  .drawer.show { transform: none; }
  .drawer[hidden], .drawer-scrim[hidden] { display: none; }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 14px 18px; background: var(--c-primary-dark); color: #fff; }
  .drawer-brand { font-weight: 600; line-height: 1.25; }
  .drawer-close { border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; }
  .drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 8px; }
  .drawer-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
  .drawer-quick a { display: flex; align-items: center; gap: .55em; padding: .7em .75em; border-radius: 10px; background: var(--c-accent-bg); color: var(--c-primary-dark); font-weight: 600; font-size: .85em; text-decoration: none; line-height: 1.2; }
  .drawer-quick .icon { color: var(--c-primary-light); width: 19px; height: 19px; }
  .drawer-title { font-size: .72em; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); margin: 8px 4px 2px; }
  .drawer-menu ul { list-style: none; margin: 0; padding: 0; }
  .drawer-menu ul ul { padding-left: 12px; border-left: 2px solid var(--c-border-light); margin: 0 0 6px 8px; }
  .drawer-menu li > a, .drawer-menu summary { display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: .68em .4em; color: var(--c-text); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--c-border-light); }
  .drawer-menu ul ul a { font-weight: 400; }
  .drawer-menu summary { list-style: none; cursor: pointer; }
  .drawer-menu summary::-webkit-details-marker { display: none; }
  .drawer-menu summary a { color: inherit; text-decoration: none; flex: 1; }
  .drawer-menu .chev { color: var(--c-muted); transition: transform .2s; }
  .drawer-menu details[open] > summary .chev { transform: rotate(90deg); }
  .drawer-menu a[aria-current] { color: var(--c-primary-light); }
  .drawer-menu li.trail > a, .drawer-menu li.trail > details > summary { color: var(--c-primary-dark); }
  .drawer-foot { padding: 12px 14px; border-top: 1px solid var(--c-border-light); }
  .lang-switch--drawer { border-color: var(--c-border); }
  .lang-switch--drawer a { color: var(--c-text-light); font-size: .85em; letter-spacing: 0; padding: .45em 1em; }
  .lang-switch--drawer a[aria-current] { background: var(--c-primary-dark); color: #fff; }
  html.drawer-open { overflow: hidden; }
  /* Sidebar menus live in the drawer on phones; content boxes (laboratories, partners) follow the content. */
  #sidebar-first { display: flex !important; order: 2 !important; padding: 1em; gap: 1em; }
  #sidebar-first .menu-block { display: none; }
  #sidebar-first:not(:has(.side-block)) { display: none !important; }
  .profile { grid-template-columns: 96px 1fr; gap: 1em; }
  .profile-photo img, .profile-photo .initials { width: 96px; height: 122px; font-size: 1.6em; }
  .profile-name { font-size: 1.35em; }
  .profile-contact { grid-template-columns: 1fr; }
  .profile-contact, .profile-ids { grid-column: 1 / -1; }
  .oh-table thead { display: none; }
  .oh-table, .oh-table tbody, .oh-table tr, .oh-table th, .oh-table td { display: block; width: 100%; }
  .oh-table tr { padding: .8em 0; border-bottom: 1px solid var(--c-border-light); }
  .oh-table th, .oh-table td { border: 0; padding: .2em 0; }
  .oh-table td::before { content: attr(data-label); display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); margin: .4em 0 .15em; }
}

/* ===== Publications ===== */
.pub-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6em; margin-bottom: .4em; }
.pub-summary .result-count { margin: 0; }
.year-chips { display: flex; flex-wrap: wrap; gap: .35em; }
.pub-meta-row { display: flex; gap: .4em; align-items: center; margin-top: .15em; }
.pub-type { font-size: .7em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); }
.pub-type.t-article { color: #1f6f8b; } .pub-type.t-inproceedings { color: var(--c-primary-light); } .pub-type.t-book, .pub-type.t-inbook { color: #8a5a00; }
.pub-meta-row .pub-doi { align-self: center; }

/* Teaser lists from the old PHP pages: same heading size as the old theme's node titles. */
.term-teasers .teaser h2.title { font-size: 1.8em; margin-top: 1em; border-bottom: 1px solid var(--c-border); padding-bottom: .5em; }
.term-teasers .readmore { margin: .3em 0 0; font-size: .9em; }

/* The old theme's right-hand region rendered above the content (e.g. "Partnerzy TZI"). */
/* Right-hand blocks (old #sidebar-last): a narrow column next to the content, below it on phones. */
.sidebar-last { margin-top: 2em; }
.sidebar-last .side-block { border: 1px solid var(--c-border-light); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; background: #fff; }
.sidebar-last h2.title { font-size: 1.05em; margin: 0 0 .6em; }
.sidebar-last img { max-width: 100%; height: auto; }
.sidebar-last table, .sidebar-last tbody, .sidebar-last tr, .sidebar-last td { display: block; width: auto !important; }
.sidebar-last td { text-align: center; padding: 6px 0; }
@media (min-width: 900px) {
  #content-inner.has-last { display: grid; grid-template-columns: minmax(0, 1fr) 210px; column-gap: 28px; align-items: start; }
  #content-inner.has-last > * { grid-column: 1; }
  #content-inner.has-last > .sidebar-last { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}

/* Phone: the three home cards become a swipeable row (the old theme stacked them, three
   screens of text before the welcome). The edge of the next card shows there is more. */
@media (max-width: 768px) {
  #preface-wrapper { display: flex; flex-direction: row !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 1em 1em .5em; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #preface-wrapper::-webkit-scrollbar { display: none; }
  #preface-wrapper .column { flex: 0 0 84%; scroll-snap-align: center; margin: 0 !important; padding: 1.1em 1.2em; }
  #preface-wrapper h2.title { font-size: 1.35em; margin-bottom: .4em; padding-bottom: .4em; }
  #preface-wrapper .column .content p a { font-size: 14px; }
}

/* Staff cards: the same contact lines (icons) as the profile header. */
.card-contact { list-style: none; margin: .45em 0 0; padding: 0; font-size: .82em; display: grid; gap: .2em; }
.card-contact li { display: flex; gap: .45em; align-items: flex-start; }
.card-contact .icon { color: var(--c-primary-light); margin-top: .2em; width: 1em; height: 1em; }
.person-card .ids { margin-top: .5em; }

/* News: years as a light strip of chips instead of a form. */
.year-strip { display: flex; gap: .35em; overflow-x: auto; padding: .2em 0 .8em; margin-bottom: .4em; scrollbar-width: thin; }
.year-strip .chip { flex: none; }
.chip.on { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: #fff; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(8, 14, 11, .92); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 92vw; max-height: 86vh; text-align: center; }
.lightbox img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lightbox figcaption { color: #dfe7e2; font-size: .9em; margin-top: .6em; }
.lightbox button { position: absolute; border: 0; background: rgba(255, 255, 255, .1); color: #fff; font-size: 2em; line-height: 1; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; }
.lightbox button:hover { background: rgba(255, 255, 255, .2); }
.lb-close { top: 16px; right: 16px; } .lb-prev { left: 16px; } .lb-next { right: 16px; }
.lightbox.single .lb-prev, .lightbox.single .lb-next { display: none; }
@media (prefers-reduced-motion: no-preference) { .lightbox:not([hidden]) img { animation: rise .25s ease both; } }

/* Floated boxes from the old editor (sponsor columns, info panels): sized by content. */
div.float-left, div.float-right, aside.float-left, aside.float-right { max-width: 40%; }
div.float-right img, div.float-left img { max-width: 100%; height: auto; }

/* Attachments (old "Załącznik | Wielkość" table) */
.attachments { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--c-border); clear: both; }
.attachments-title { font-size: 1em; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); margin-bottom: .6em; }
.attachments ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4em; }
.attachments a { display: flex; align-items: center; gap: .6em; padding: .55em .8em; border: 1px solid var(--c-border-light); border-radius: 6px; text-decoration: none; color: var(--c-primary-dark); }
.attachments a:hover { border-color: var(--c-primary-light); background: var(--c-accent-bg); }
.attachments a::after { display: none !important; }
.att-name { flex: 1; font-weight: 600; overflow-wrap: anywhere; }
.att-meta { font-size: .78em; color: var(--c-muted); white-space: nowrap; }
.pub-actions { display: flex; flex-wrap: wrap; gap: .5em; margin-top: 1.2em; }
.pub-file { color: #c0392b; border-color: #e7c3bf; }

/* Content tables: layout tables side by side on desktop, stacked on phones; data tables scroll. */
/* Layout tables become wrapping rows: columns sit side by side while they fit, and wrap
   instead of squeezing text into slivers. Image-only cells keep their natural width. */
.node-body table.layout, .node-body table.layout tbody { display: block; width: auto !important; }
.node-body table.layout tr { display: flex; flex-wrap: wrap; gap: 1em 1.5em; align-items: flex-start; margin-bottom: 1em; }
.node-body table.layout td { display: block; flex: 1 1 240px; min-width: 0; width: auto !important; padding: 0; vertical-align: top; }
.node-body table.layout td:has(> img:only-child), .node-body table.layout td:has(> a:only-child > img:only-child),
.node-body table.layout td:has(> p:only-child > img:only-child) { flex: 0 0 auto; max-width: 100%; }
.node-body table.layout td:empty { display: none; }
.node-body table.data { border-collapse: collapse; display: block; max-width: 100%; overflow-x: auto; }
.node-body table.data th, .node-body table.data td { border: 1px solid var(--c-border); padding: .35em .6em; }
.node-body table.data th { background: var(--c-accent-bg); text-align: left; }
@media (max-width: 768px) {
  .node-body table.layout td { flex-basis: 100%; }
  .node-body table.layout td:has(> img:only-child), .node-body table.layout td:has(> a:only-child > img:only-child) { flex-basis: auto; }
}

/* Phone: horizontally scrolling strips (years, profile tabs) must not widen the column. */
@media (max-width: 768px) {
  #main-wrapper > * { min-width: 0; max-width: 100%; }
  #content-wrapper { width: 100%; }
  #content, #content-inner, #content-content, .person, .profile-main { min-width: 0; max-width: 100%; }
  .profile-tabs, .year-strip { max-width: 100%; }
}

.person-card h2 .post, .oh-person .post { font-weight: 400; color: var(--c-text-light); font-size: .85em; }
.text-left { text-align: left; }

/* Accessibility: links and buttons a shade darker than the legacy green so text keeps 4.5:1
   on the grey boxes too (#078847 had 3.99:1 on #f0f0f0); visually the same colour. */
:root { --c-primary-light: #067a3f; }
a { color: var(--c-primary-light); }
/* Links inside running text are underlined subtly, not told apart by colour alone. */
.node-body p a, .node-body li a, .news-teaser .content a, .callout a {
  text-decoration: underline; text-decoration-color: rgba(6, 122, 63, .35); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.node-body p a:hover, .node-body li a:hover, .news-teaser .content a:hover { text-decoration-color: currentColor; }
/* Headings inside bodies were promoted (h3 -> h2): keep the old visual sizes. */
.node-body h2 { font-size: 1.4em; } .node-body h3 { font-size: 1.15em; } .node-body h4 { font-size: 1em; }
.profile-bio h2 { font-size: 1.15em; margin-top: 1.4em; }
/* Tap targets on phones: lists of links get a little air. */
@media (max-width: 768px) { .node-body li { margin: .25em 0; } }

/* Lighthouse pass: no text under 12px on phones, comfortable tap targets, readable muted text. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root { --c-muted: #5b6370; }
.slot-note { color: #4b5563; font-size: 12px; }
.slots li { font-size: 13px; }
.pub-type { font-size: 12px; letter-spacing: .03em; }
.pub-doi { font-size: 12px; padding: .1em .45em; }
.card-contact { font-size: 13px; }
.chip { font-size: 12.5px; padding: .3em .8em; min-height: 28px; }
.person-card .ids { gap: .5em; }
.pub-authors a { text-decoration: underline; text-decoration-color: rgba(6, 122, 63, .3); text-underline-offset: .15em; }
.node-body li, .term-list li { margin: .3em 0; }
/* Links in lists stay inline: an inline-block link made the list number sit by its last line. */

/* Readability: body text 15px instead of the legacy 14px. */
#content-wrapper { font-size: 15px; }

/* Breadcrumbs */
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .2em; margin: 0 0 .6em; padding: 0; font-size: 13px; color: var(--c-muted); }
.breadcrumbs li + li::before { content: "›"; margin: 0 .45em 0 .25em; color: #9aa1ab; }
.breadcrumbs a { color: var(--c-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-primary-light); text-decoration: underline; }
.breadcrumbs li:last-child a { color: var(--c-text-light); }

/* Footer: address, secretariat, quick links (the legacy theme hid its footer). */
#legal-notice { display: none !important; }
.site-footer { display: block !important; margin-top: 1.5em; padding: 2em 1.5em 1.2em; background: var(--c-primary-dark); color: rgba(255, 255, 255, .85); border-radius: var(--radius) var(--radius) 0 0; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 1.5em 5em; }
.site-footer p { color: inherit; margin: 0 0 .7em; line-height: 1.6; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35em; }
.footer-name { font-weight: 600; color: #fff !important; font-size: 1.05em; }
.footer-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .72) !important; }
.footer-legal { margin: 1.5em 0 0 !important; padding-top: 1em; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 12.5px; color: rgba(255, 255, 255, .72) !important; }
.site-footer .email span { color: rgba(255, 255, 255, .72); }
@media (max-width: 900px) { .footer-grid { gap: 1.5em 3em; } }
@media (max-width: 768px) { .site-footer { border-radius: 0; margin-top: 0; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* Click-to-load embeds: a poster (video) or a quiet map card, the iframe loads on click. */
.embed { position: relative; max-width: 640px; margin: 1em 0; border-radius: 10px; overflow: hidden; background: #0f1a14; }
.embed-video, .embed-video.is-live { aspect-ratio: 16 / 9; }
.embed-map { aspect-ratio: 4 / 3; max-width: 600px; background: linear-gradient(135deg, #e8f1ec, #f5f7f6); border: 1px solid var(--c-border-light); }
.embed-map.is-live { aspect-ratio: auto; background: none; border: 0; }
.embed-map.is-live iframe { aspect-ratio: 4 / 3; height: auto; }
.embed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s; }
.embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.embed-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em;
  width: 100%; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; text-decoration: none; color: #fff; }
.embed-video .embed-play span:last-child { text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.embed-video:hover img { opacity: 1; }
.embed-icon { width: 68px; height: 48px; border-radius: 12px; background: rgba(0,0,0,.72); position: relative; transition: background .2s, transform .2s; }
.embed-icon::after { content: ""; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.embed-video:hover .embed-icon, .embed-play:focus-visible .embed-icon { background: #c4302b; transform: scale(1.05); }
.embed-map .embed-play { color: var(--c-primary-dark); }
.embed-pin { width: 44px; height: 44px; border-radius: 50%; background: var(--c-primary-light); position: relative; box-shadow: 0 4px 14px rgba(6,122,63,.3); transition: transform .2s; }
.embed-pin::after { content: ""; position: absolute; left: 15px; top: 12px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #fff; box-sizing: border-box; }
.embed-map:hover .embed-pin { transform: translateY(-2px); }
.embed figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .55em .8em; font-size: .82em; color: var(--c-muted); background: rgba(255,255,255,.85); }
.embed.is-live figcaption { position: static; background: none; padding: .4em 0 0; }

/* Footer at the bottom of the window on short pages. */
#page { display: flex; flex-direction: column; min-height: calc(100vh - 4em); }
#page > #main { flex: 1 0 auto; }
@media (max-width: 768px) { #page { min-height: 100vh; min-height: 100dvh; } }

/* Phones: justified text leaves rivers of spaces in a narrow column. */
@media (max-width: 768px) {
  .text-justify, .node-body [style*="justify"], .node-body p[align="justify"] { text-align: left; }
  .profile-tabs { border-bottom: 0; }
  .profile-tabs ul { flex-wrap: wrap; overflow: visible; gap: .4em; }
  .profile-tabs a { border: 1px solid var(--c-border); border-radius: 999px; padding: .35em .8em; margin: 0; white-space: normal; }
  .profile-tabs a[aria-current] { background: var(--c-accent-bg); border-color: var(--c-primary-light); }
}
/* Large standalone portraits and photos in old bodies: cap them so one picture is not a whole screen. */
.node-body > p > img:only-child, .node-body > img { max-height: 460px; width: auto; }
.person-bio img, .profile-bio img { max-width: min(100%, 420px); height: auto; }
.nowrap, .post, time { white-space: nowrap; }
.term-list time { margin-left: .4em; font-size: .85em; }
a.email { overflow-wrap: normal; word-break: normal; hyphens: none; }
.node-body img[src$="arrow_red.gif"] { display: inline; vertical-align: middle; margin-right: .2em; }
.text-center > .embed { margin-left: auto; margin-right: auto; }
.strip-dots { display: none; }
@media (max-width: 768px) {
  .strip-dots { display: flex; justify-content: center; gap: 6px; margin: 8px 0 4px; }
  .strip-dots span { width: 6px; height: 6px; border-radius: 3px; background: var(--c-border); transition: width .2s, background .2s; }
  .strip-dots span.on { width: 18px; background: var(--c-primary-light); }
}

/* Soft navigation: a thin bar at the top while a slow page loads (shown only after 120 ms). */
.nav-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 1000; background: var(--c-primary-light); opacity: 0; pointer-events: none; }
.nav-progress.on { opacity: 1; width: 85%; transition: width 4s cubic-bezier(.1, .7, .2, 1), opacity .2s; }

/* ======================================================================================
   Interface components, one look everywhere: profile tabs, staff cards, office-hour slots
   with notes behind an "i", drawer tiles, form controls (fields, selects, buttons), pager.
   ====================================================================================== */

/* Profile tabs: the same pill bar on every profile, its subpages and its publication list. */
.profile-tabs { border: 0; margin: 0 0 1.6em; max-width: 100%; }
.profile-tabs ul { display: flex; flex-wrap: wrap; gap: .45em; overflow: visible; margin: 0; padding: 0; list-style: none; }
.profile-tabs a { display: inline-flex; align-items: center; gap: .45em; padding: .4em .95em; margin: 0; border: 1px solid var(--c-border); border-radius: 999px;
  font-size: .88em; font-weight: 600; line-height: 1.35; white-space: normal; color: var(--c-text-light); background: #fff; text-decoration: none; }
.profile-tabs a:hover { border-color: var(--c-primary-light); color: var(--c-primary-dark); background: var(--c-accent-bg); }
.profile-tabs a[aria-current] { border-color: var(--c-primary-dark); background: var(--c-primary-dark); color: #fff; }
.tab-count { min-width: 1.6em; padding: 0 .45em; border-radius: 999px; background: var(--c-accent-bg); color: var(--c-primary-dark); font-size: .82em; text-align: center; }
.profile-tabs a[aria-current] .tab-count { background: rgba(255, 255, 255, .18); color: #fff; }

/* Staff cards: fixed rows, equal heights, the whole card opens the profile (stretched link);
   e-mail, phone, ORCID and notes stay separately clickable above it. */
.people-grid { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22em), 1fr)); }
@media (min-width: 769px) { .people-grid { grid-auto-rows: 1fr; } }
.person-card { position: relative; display: flex; gap: 16px; padding: 16px; border: 1px solid var(--c-border-light); border-radius: 10px; background: #fff; cursor: pointer;
  transition: border-color .15s, box-shadow .15s; }
.person-card:hover { border-color: #cfe5d8; box-shadow: 0 6px 18px rgba(2, 83, 42, .08); }
.person-card:has(.pc-link:focus-visible) { box-shadow: var(--focus); }
.person-card .person-photo { flex: 0 0 88px; }
.person-card .person-photo img, .person-card .initials { width: 88px; height: 112px; object-fit: cover; border-radius: 8px; display: grid; place-items: center; background: var(--c-accent-bg); }
.person-card .initials { font-weight: 700; font-size: 1.15em; color: var(--c-primary-dark); letter-spacing: .02em; }
.person-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pc-title { margin: 0; font-size: .78em; line-height: 1.35; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-card h2 { margin: .1em 0 0; font-size: 1.08em; line-height: 1.25; }
.pc-link { color: var(--c-primary-dark); text-decoration: none; }
.pc-link:focus-visible { outline: none; }
.pc-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.person-card .role { margin: .15em 0 0; font-size: .86em; color: var(--c-text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-contact { list-style: none; margin: .65em 0 0; padding: 0; display: grid; gap: .3em; font-size: 13px; line-height: 1.45; }
.card-contact li { display: flex; gap: .5em; align-items: flex-start; min-width: 0; }
.card-contact .icon { flex: none; width: 14px; height: 14px; margin-top: .2em; color: var(--c-primary-light); }
.card-contact a, .person-card .ids a, .person-card .tip { position: relative; z-index: 2; }
.pc-external { display: flex; gap: .5em; align-items: flex-start; margin: .65em 0 0; font-size: 13px; color: var(--c-text-light); }
.pc-external .icon { flex: none; width: 14px; height: 14px; margin-top: .2em; color: var(--c-primary-light); }
.person-card .ids { display: flex; align-items: center; gap: .9em; margin: auto 0 0; padding-top: .7em; font-size: .8em; }
.pc-more { margin-left: auto; display: inline-flex; align-items: center; gap: .15em; color: var(--c-primary-light); font-weight: 600;
  opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.pc-more .icon { width: 14px; height: 14px; }
.person-card:hover .pc-more { opacity: 1; transform: none; }
@media (hover: none) { .pc-more { opacity: 1; transform: none; } }
.oh-none { color: var(--c-muted); }

/* Office hours: one chip per slot; a note sits behind an "i". */
.oh-slots { display: inline-flex; flex-wrap: wrap; gap: .3em; vertical-align: top; }
.oh-slot { display: inline-flex; align-items: center; gap: .3em; padding: 0 .5em; border-radius: 6px; background: var(--c-accent-bg); white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.6; }
.oh-day { font-weight: 600; color: var(--c-primary-dark); }
.oh-rest { color: var(--c-text-light); }
.tip { position: relative; display: inline-grid; place-items: center; flex: none; width: 15px; height: 15px; margin-left: .1em; border-radius: 50%;
  background: var(--c-primary-light); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; cursor: help; vertical-align: middle; }
.tip:focus-visible { outline: none; box-shadow: var(--focus); }
.tip-text { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 20; width: max-content; max-width: 220px; padding: .45em .7em; border-radius: 6px;
  background: #1d2a23; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.35; white-space: normal; text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18); display: none; pointer-events: none; transform: translate(calc(-50% + var(--dx, 0px)), 0); }
.tip-text::after { content: ""; position: absolute; top: 100%; left: calc(50% - var(--dx, 0px)); margin-left: -5px; border: 5px solid transparent; border-top-color: #1d2a23; }
/* Hidden notes take no room (display: none), so they never widen a phone screen. */
.tip:hover .tip-text, .tip:focus-visible .tip-text, .tip.is-open .tip-text { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .tip:hover .tip-text, .tip:focus-visible .tip-text, .tip.is-open .tip-text { animation: fade-in .15s ease-out both; }
}
@keyframes fade-in { from { opacity: 0; } }

/* Drawer tiles: icon above the label, labels on one line, all four tiles alike. */
.drawer-quick a { flex-direction: column; align-items: flex-start; justify-content: center; gap: .4em; padding: .8em .85em; min-height: 4.4em;
  white-space: nowrap; font-size: 13.5px; line-height: 1.2; }
.drawer-quick .icon { width: 20px; height: 20px; }

/* Form controls: fields, selects and buttons of one height, radius and focus ring. */
.filters { gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--c-border-light); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 40, 25, .04); }
.filters label { flex: 1 1 10em; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--c-text-light); }
.filters label.grow { flex: 2 1 16em; }
.filters input[type="search"], .filters input[type="text"], .filters select, .cselect-button {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 0 12px;
  border: 1px solid var(--c-border); border-radius: 8px; background-color: #fff; color: var(--c-text);
  font: inherit; font-size: 14px; font-weight: 400; transition: border-color .15s, box-shadow .15s; }
.filters input[type="search"] { padding-left: 36px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23067a3f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") no-repeat 11px center / 16px; }
.filters input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.filters input::placeholder { color: #8a929c; }
.filters select { padding-right: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23067a3f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; cursor: pointer; }
.filters input:hover, .filters select:hover, .cselect-button:hover { border-color: #b9c9bf; }
.filters input:focus, .filters select:focus, .cselect-button:focus-visible, .cselect.is-open .cselect-button {
  outline: none; border-color: var(--c-primary-light); box-shadow: 0 0 0 3px rgba(6, 122, 63, .15); }
.filters button[type="submit"], a.button { display: inline-flex; align-items: center; justify-content: center; gap: .4em; height: 40px; padding: 0 18px; border: 0; border-radius: 8px;
  background: var(--c-primary-light); color: #fff; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .15s, box-shadow .15s, transform .1s; }
.filters button[type="submit"]:hover, a.button:hover { background: var(--c-primary-hover); color: #fff; }
.filters button[type="submit"]:active, a.button:active { transform: translateY(1px); }
.filters button[type="submit"]:focus-visible, a.button:focus-visible { outline: none; box-shadow: var(--focus); }
a.button.ghost { height: auto; min-height: 38px; background: #fff; color: var(--c-primary-dark); border: 1px solid var(--c-border); }
a.button.ghost:hover { border-color: var(--c-primary-light); background: var(--c-accent-bg); color: var(--c-primary-dark); }
.filters .clear { align-self: flex-end; display: inline-flex; align-items: center; height: 40px; padding: 0 6px; font-size: 13px; color: var(--c-text-light); }
.filters .clear:hover { color: var(--c-primary-dark); }

/* Custom select (site.js, pointer devices): a button and a listbox over the hidden native select. */
.cselect { position: relative; }
.cselect-button { display: flex; align-items: center; justify-content: space-between; gap: .5em; text-align: left; cursor: pointer; }
.cselect-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect-button.is-empty span { color: var(--c-text-light); }
.cselect-button::after { content: ""; flex: none; width: 7px; height: 7px; margin: -3px 2px 0 0; border: solid var(--c-primary-light); border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform .15s; }
.cselect.is-open .cselect-button::after { transform: translateY(3px) rotate(-135deg); }
.cselect-list { font-weight: 400; letter-spacing: normal; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 100%; width: max-content; max-width: min(24em, 90vw); max-height: 300px;
  overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--c-border-light); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 40, 25, .14), 0 2px 6px rgba(15, 40, 25, .06); outline: none; scrollbar-width: thin; }
.cselect.drop-up .cselect-list { top: auto; bottom: calc(100% + 6px); }
@media (prefers-reduced-motion: no-preference) {
  .cselect.is-open .cselect-list { animation: pop .14s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.985); } }
.cselect-list li { display: flex; align-items: center; gap: 1em; padding: 7px 10px; border-radius: 6px; font-size: 14px; color: var(--c-text); cursor: pointer; white-space: nowrap; }
.cselect-list li.is-active { background: var(--c-accent-bg); }
.cselect-list li.is-empty { color: var(--c-text-light); }
.cselect-list li[aria-selected="true"] { font-weight: 600; color: var(--c-primary-dark); }
.cselect-list li[aria-selected="true"]::before { content: ""; flex: none; width: 4px; height: 8px; margin: -2px -.5em 0 0; border: solid var(--c-primary-light); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cs-count { margin-left: auto; padding-left: 1em; font-size: 12px; font-weight: 400; color: var(--c-muted); font-variant-numeric: tabular-nums; }

/* Pager: round buttons around the page number. */
.pager a { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--c-border); border-radius: 50%; color: var(--c-primary-dark); text-decoration: none; background: #fff; }
.pager a:hover { border-color: var(--c-primary-light); background: var(--c-accent-bg); }
/* Desktop footer: the two addresses side by side under the department name. */
@media (min-width: 769px) { .footer-addresses { display: flex; gap: 3em; } }

/* ======================================================================================
   Type scale. One set of sizes for the whole site (the legacy theme sized things in em on top
   of em, so headings drifted from page to page and grew far too big on phones). Pixel values,
   two steps: desktop and phone. Headings never hyphenate and wrap into balanced lines.
   ====================================================================================== */
:root {
  --fs-body: 15px;   --lh-body: 1.65;
  --fs-small: 13px;  --fs-meta: 12.5px;
  --fs-h1: 30px;     --fs-h2: 21px;  --fs-h3: 17px;  --fs-h4: 15px;
  --fs-card-title: 19px; --fs-card: 14.5px;
}
@media (max-width: 768px) {
  :root {
    --fs-body: 15px;  --lh-body: 1.6;
    --fs-h1: 23px;    --fs-h2: 19px;  --fs-h3: 16.5px;  --fs-h4: 15px;
    --fs-card-title: 18px; --fs-card: 14.5px;
  }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#content-wrapper { font-size: var(--fs-body); line-height: var(--lh-body); }
h1, h2, h3, h4, .profile-name, .subpage-title { hyphens: manual; text-wrap: balance; letter-spacing: -.005em; }
#content-wrapper h1.title, .news-item h1.title { font-size: var(--fs-h1); line-height: 1.2; }
.node-body h2, .section-title, .person-pubs h2, .term-teasers .teaser h2.title { font-size: var(--fs-h2); line-height: 1.3; }
.node-body h3, .profile-bio h2 { font-size: var(--fs-h3); line-height: 1.35; }
.node-body h4 { font-size: var(--fs-h4); line-height: 1.4; }
.subpage-title { font-size: var(--fs-h2); line-height: 1.3; }
.profile-name { font-size: calc(var(--fs-h1) - 2px); line-height: 1.2; }
.profile-name .degree, .profile-name .post { font-size: .55em; }
.news-teaser h2, .news-teaser h3 { font-size: 15px; letter-spacing: .02em; }
.year-head { font-size: var(--fs-h3); }
.callout p:first-child { font-size: 1em; }
.callout strong, .callout b { font-weight: 600; }
.breadcrumbs ol, .result-count, .pub-authors, .pub-venue { font-size: var(--fs-small); }
.pub-title { font-size: 15px; line-height: 1.4; }
/* Home cards */
#preface-wrapper h2.title { font-size: var(--fs-card-title); line-height: 1.3; margin-bottom: .5em; padding-bottom: .45em; }
#preface-wrapper .column .content, #preface-wrapper .column .content a, #preface-wrapper .column .content p a { font-size: var(--fs-card); line-height: 1.6; }
#preface-wrapper .column .content li { margin-bottom: .15em; }
/* Left menu */
#sidebar-first ul.menu a { font-size: 14px; line-height: 1.4; }
#sidebar-first .block-wrapper > h2.title { font-size: 12.5px; letter-spacing: .06em; }
@media (max-width: 768px) {
  #preface-wrapper .column { padding: 1em 1.1em; }
  .callout { padding: .75em .9em; }
  .node-body h2 { margin-top: 1.2em; }
}
/* Justified text left rivers of spaces next to floated pictures and in narrow columns: the
   site reads left-aligned everywhere (the old editor's "justify" is kept as a class only). */
.text-justify, .node-body [style*="justify"], .node-body p[align="justify"] { text-align: left; }
/* Phones: no text flowing around pictures — the picture takes the width, the text follows it
   (a float's bottom edge cut through lists and split their numbering from the text). */
@media (max-width: 768px) {
  .node-body .float-left, .node-body .float-right, .node-body img[align], .node-body table[align] {
    float: none !important; display: block; margin: 0 auto 1em !important; max-width: 100%; height: auto; }
  .node-body img { float: none !important; }
}

/* Phones: the area behind the status bar / notch and the overscroll at both ends is the header
   green, never the grey page background (iOS Safari tints the bar from what is at the top). */
@media (max-width: 768px) {
  html, body { background-color: var(--c-primary-dark); }
  #page { background-color: var(--c-background); }
}

/* Breadcrumbs: quiet navigation pinned to the top of the content, not a line of the page itself.
   The section name is said here only once (no repeated "Pracownicy" label over the profile). */
.breadcrumbs ol { margin: -.35em 0 .9em; font-size: 12.5px; line-height: 1.4; }
.breadcrumbs li:last-child a { color: var(--c-muted); }
@media (max-width: 768px) { .breadcrumbs ol { margin: -.5em 0 .8em; font-size: 12px; } }
.profile-main .profile-name { margin-top: 0; }
/* Contact rows (profile header, staff cards): the icon box is exactly one line of text tall and
   the glyph sits in its middle, so icons line up with the first line whatever the font size. */
.profile-contact li, .card-contact li, .pc-external { line-height: 1.5; align-items: flex-start; }
.profile-contact .icon, .card-contact .icon, .pc-external .icon { flex: none; width: 1.15em; height: 1.5em; margin: 0; }
.card-contact .icon, .pc-external .icon { width: 14px; }
.profile-contact .oh-slot, .card-contact .oh-slot { line-height: 1.5; }
.profile-contact .oh-slots, .card-contact .oh-slots { vertical-align: top; }
/* ORCID chip: the iD mark, the label and the identifier, the number quieter than the label. */
.chip-orcid { gap: .45em; }
.orcid-id { display: inline-grid; place-items: center; width: 1.85em; height: 1.85em; border-radius: 50%; background: #a6ce39; color: #fff;
  font-size: .72em; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.orcid-num { font-weight: 400; color: var(--c-text-light); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.chip-orcid:hover .orcid-num { color: inherit; }
/* Drawer tiles: a larger icon with the label beside it, centred vertically; the label is sized to
   the screen so "Dla kandydatów" stays on one line from 360 px phones up. */
@media (max-width: 768px) {
  .drawer { width: min(92vw, 380px); }
  .drawer-body { padding-left: 12px; padding-right: 12px; }
  .drawer-quick { gap: 8px; }
  .drawer-quick a { flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; min-height: 58px; padding: 10px 11px;
    font-size: clamp(12.5px, 3.5vw, 14.5px); white-space: nowrap; }
  .drawer-quick a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .drawer-quick .icon { width: 24px; height: 24px; flex: none; }
}
/* Drawer tiles, final: labels may wrap (decided: "Dla kandydatów" on two lines is fine), one fixed
   text size, a bigger icon; tiles in a row keep equal height. */
@media (max-width: 768px) {
  .drawer-quick a { white-space: normal; font-size: 14.5px; line-height: 1.25; gap: 10px; min-height: 62px; }
  .drawer-quick a span { overflow: visible; text-overflow: clip; }
  .drawer-quick .icon { width: 28px; height: 28px; }
}
/* Head of the department: the same card, a quiet gold edge and a warmer white. */
.person-card.is-head { border-color: #dcc58f; background: linear-gradient(180deg, #fffaf0, #fff 55%); box-shadow: 0 0 0 1px rgba(220, 197, 143, .35); }
.person-card.is-head:hover { border-color: #cfb170; box-shadow: 0 0 0 1px rgba(207, 177, 112, .45), 0 6px 18px rgba(120, 92, 20, .08); }
.person-card.is-head .role { color: #8a6a1c; font-weight: 600; }
/* Profile header on phones: photo beside the name and role; contact lines and the ORCID / Scholar
   chips below at full width (inside the narrow column the ORCID chip broke mid-word). */
.chip { white-space: nowrap; }
@media (max-width: 768px) {
  .profile { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 0; }
  .profile-main { display: contents; }
  .profile-photo { grid-column: 1; grid-row: 1 / span 2; }
  .profile-main > .profile-name, .profile-main > .role { grid-column: 2; }
  .profile-main > .profile-name { align-self: end; margin: 0; }
  .profile-main > .role { align-self: start; margin: .2em 0 0; }
  .profile-main > :not(.profile-name):not(.role) { grid-column: 1 / -1; }
  .profile-contact { margin-top: 1em; }
}
/* Profile photo a little lower, away from the breadcrumbs; a relative offset moves only the
   photo, nothing around it reflows. */
.profile-photo { position: relative; top: 6px; }
@media (max-width: 768px) { .profile-photo { top: 5px; } }

/* Office hours page. Desktop: the table (icons hidden, columns have headers). Phones: a compact
   list - small photo, title and name beside it, then one line with a clock (hours) and one with a
   pin (room), aligned under the name; no repeated labels. */
.oh-ico, .oh-room-word { display: none; }
@media (max-width: 768px) {
  .oh-table tr { padding: 14px 0; border-bottom: 1px solid var(--c-border-light); }
  .oh-table tbody tr:hover { background: none; }
  .oh-table th, .oh-table td { padding: 0; }
  .oh-table td::before { content: none; }
  .oh-person { gap: 12px; align-items: center; }
  .oh-person img, .oh-person .initials { width: 44px; height: 56px; border-radius: 6px; }
  .oh-person > span:last-child { display: block; line-height: 1.3; }
  .oh-person .degree { display: block; font-size: 12.5px; color: var(--c-muted); margin-bottom: 1px; }
  .oh-person .post { font-size: 12.5px; }
  .oh-table td { display: flex !important; align-items: flex-start; gap: 8px; padding-left: 56px !important; margin-top: 6px; font-size: 14px; line-height: 1.5; }
  .oh-ico { display: block; flex: none; width: 15px; height: 1.5em; color: var(--c-primary-light); }
  .oh-room-word { display: inline; }
  .oh-table .oh-slots { gap: 4px; }
  .oh-table .oh-slot { line-height: 1.5; }
}

/* Office hours: the photo has its own cell. Desktop: a narrow first column. Phones: the photo on
   the left, top-aligned, and title, name, hours and room in one column beside it. */
.oh-table .oh-photo { width: 52px; padding-right: 0; }
.oh-photo a { display: block; }
.oh-photo img, .oh-photo .initials { width: 40px; height: 50px; object-fit: cover; border-radius: 4px; display: grid; place-items: center;
  background: var(--c-accent-bg); color: var(--c-primary-dark); font-weight: 700; font-size: .8em; }
@media (max-width: 768px) {
  .oh-table tbody tr { display: grid !important; grid-template-columns: 60px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; }
  .oh-table tbody .oh-photo { grid-column: 1; grid-row: 1 / span 3; width: auto; }
  .oh-table tbody th, .oh-table tbody td:not(.oh-photo) { grid-column: 2; padding-left: 0 !important; margin: 0; }
  .oh-table tbody td.oh-hours { margin-top: 6px; }
  .oh-photo img, .oh-photo .initials { width: 60px; height: 76px; border-radius: 8px; font-size: 1em; }
  .oh-person > span:last-child { display: block; }
}
@media (max-width: 768px) { .oh-table tbody td.oh-photo { display: block !important; padding: 0 !important; margin: 0; } }
/* Profile: the academic title on its own small line above the name (inside the heading, so the
   heading still reads "prof. dr hab. inż. Krzysztof Walczak"). */
.profile-title { display: block; margin-bottom: .2em; font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--c-text-light); letter-spacing: 0; }
@media (max-width: 768px) { .profile-title { font-size: 13px; } }
/* Profile contact: one item per line on every screen (desktop put e-mail and phone side by side
   and the rest below, so the rows were never alike). */
.profile-contact { grid-template-columns: minmax(0, 1fr); gap: .35em; }
/* Desktop: a fixed two-column grid, the same on every profile (e-mail | phone, room | office hours);
   phones keep one item per line. */
@media (min-width: 769px) {
  .profile-contact { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 2.5em; row-gap: .35em; }
  .profile-contact li.wide { grid-column: auto; }
}
/* Office hours on their own line below the contact grid (decided after trying them beside the room). */
@media (min-width: 769px) { .profile-contact li.wide { grid-column: 1 / -1; } }
/* Phone header: readable text (the university line was ~9.5px, the department name ~14px). */
@media (max-width: 768px) {
  #header { padding: 12px 14px !important; }
  #header-wrapper { gap: 12px; }
  #header-first #slogan { font-size: 12px !important; letter-spacing: .01em; }
  #header-first .site-name { font-size: 17.5px; line-height: 1.22; margin-top: 2px; font-weight: 600; }
  .nav-toggle { width: 44px; height: 44px; }
  .lang-switch a { font-size: 12.5px; padding: .4em .7em; }
}
/* After soft navigation focus moves to the content (for screen readers); the container itself is
   not an interactive control, so it shows no focus ring. Links and buttons keep theirs. */
#content:focus, #content:focus-visible, [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }