/* Public publications browser - Institute of Theoretical Physics, MFF UK.
 *
 * This tree's only stylesheet. Deliberately NOT a copy of the crud tree's
 * crud-style.css: this page has no data table, no toolbar, no modal, no toast
 * and no admin navigation, and shipping 24 kB to use a fifth of it would be
 * worse than the 300 lines below. The custom properties and the .check-*
 * rules ARE lifted from it verbatim, so the two pickers look and behave
 * exactly as they do in librtfy's edit form. */

:root {
  --color-bg:           #f4f5f7;
  --color-surface:      #ffffff;
  --color-surface-alt:  #f9fafb;
  --color-border:       #dce0e5;
  --color-border-focus: #5b8def;
  --color-text:         #1e2a3a;
  --color-text-muted:   #6b7a8d;
  --color-primary:      #3a6fe8;
  --color-primary-hover:#2d5bc4;
  --color-badge-bg:     #e8edf4;

  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', monospace;

  --sp-1: 0.125rem; --sp-2: 0.25rem; --sp-3: 0.4rem; --sp-4: 0.6rem;
  --sp-5: 0.75rem;  --sp-6: 1rem;    --sp-8: 1.25rem; --sp-12: 2rem;

  --radius-md: 4px; --radius-lg: 6px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --transition: 150ms ease;

  /* This module is meant for a large screen, so the page is generous. One
     knob - everything below sizes off it. */
  --page-max: 92rem;

  /* How tall a picker's scrolling list stands. Worth the room: the whole point
     of the two-box picker is being able to see what you are choosing from. */
  --list-height: 20rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
}

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

/* ---------- masthead ---------- */

.masthead {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--sp-6) var(--sp-8);
}
.masthead h1 { margin: 0; font-size: 1.35rem; }
.masthead p  { margin: var(--sp-2) 0 0; color: var(--color-text-muted); font-size: 0.85rem; }
.masthead a  { text-decoration: none; }

.wrapper { max-width: var(--page-max); margin: 0 auto; padding: var(--sp-8); }

/* ---------- the filter card ---------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
  margin-bottom: var(--sp-8);
}

/* The six filters sit in three rows of two.
 *
 * The pairing follows the order the connectors combine in - year|type,
 * author|title, institute author|grant - so reading left-to-right and then down
 * is still exactly the order the AND/OR rule walks. Layout and semantics stay in
 * step; a pairing that broke that would make the echo line look wrong to a
 * reader even when it was right. */
.filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-12);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--color-border);
}
.filter-grid:first-of-type { border-top: none; }

/* minmax(0, 1fr) above and min-width: 0 here are both needed: without them a
   long grant name inside a picker pushes its column past its share and the two
   halves stop lining up. */
.filter-cell { min-width: 0; }

.filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.filter-label { font-weight: 600; }
.filter-body  { min-width: 0; }

/* Fill the column. The year range is the exception - two small numbers rather
   than one wide box - and sets its own widths just below. */
.filter-body > input[type="text"],
.filter-body > input[type="search"],
.filter-body > select,
.filter-body > .picker-filter { width: 100%; }

.year-range { display: flex; align-items: center; gap: var(--sp-3); }
.year-range input { width: 8rem; }

/* The AND/OR control: two radios drawn as one segmented button. Radios, not a
   <select>, so the current state is legible without opening anything. */
.connector { flex: 0 0 5.5rem; display: flex; }
.connector input { position: absolute; opacity: 0; pointer-events: none; }
.connector label {
  flex: 1 1 0;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: var(--sp-2) 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition);
}
.connector label:first-of-type { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.connector label:last-of-type  { border-radius: 0 var(--radius-md) var(--radius-md) 0; border-left: none; }
.connector input:checked + label { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.connector input:focus-visible + label { outline: 2px solid var(--color-border-focus); outline-offset: 1px; }

/* Applied by publications.js to whichever filter is currently first-active:
   its connector joins it to nothing. The server ignores it regardless. */
.connector.is-inert { opacity: .35; }

input[type="text"], input[type="search"], input[type="number"], select {
  font: inherit;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: inherit;
  max-width: 100%;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(91,141,239,.15);
}

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
}
.btn:hover { background: var(--color-primary-hover); color: #fff; }
.btn-outline { background: transparent; color: var(--color-primary); }
.btn-outline:hover { background: var(--color-badge-bg); color: var(--color-primary-hover); }

.actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); }

/* ---------- pickers: lifted from crud-style.css ---------- */

.form-check {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.8rem;
  cursor: pointer;
}
.form-check input[type="checkbox"] {
  width: 0.85rem; height: 0.85rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.picker-filter { margin-bottom: var(--sp-3); }

.check-selected {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-surface);
}
.check-group .check-list { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.check-list {
  max-height: var(--list-height);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

[hidden] { display: none !important; }

/* ---------- results ---------- */

.interpreted {
  background: var(--color-badge-bg);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
  font-size: 0.85rem;
}
.interpreted strong { font-weight: 700; }

.year-heading {
  margin: var(--sp-12) 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--color-border);
  font-size: 1.05rem;
}
.year-heading:first-of-type { margin-top: var(--sp-4); }

.citation {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--color-border);
}
.citation-authors { color: var(--color-text-muted); }
.citation-title   { font-weight: 600; }
.citation-title a { text-decoration: none; color: inherit; }
.citation-title a:hover { color: var(--color-primary); text-decoration: underline; }
.citation-source  { font-style: italic; }
.citation-meta    { margin-top: var(--sp-2); font-size: 0.78rem; }
.citation-meta a  { margin-right: var(--sp-4); }

.badge {
  display: inline-block;
  padding: 0 var(--sp-3);
  border-radius: 999px;
  background: var(--color-badge-bg);
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  margin-right: var(--sp-4);
}

.text-mono  { font-family: var(--font-mono); }
.text-muted { color: var(--color-text-muted); }
.text-sm    { font-size: 0.8rem; }
.empty      { padding: var(--sp-12); text-align: center; color: var(--color-text-muted); }

/* ---------- detail ---------- */

.detail-field { margin-bottom: var(--sp-6); }
.detail-field h3 { margin: 0 0 var(--sp-2); font-size: 0.78rem; text-transform: uppercase;
                   letter-spacing: .05em; color: var(--color-text-muted); }
pre.bibtex {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

/* ---------- print ---------- */

@media print {
  body { background: #fff; font-size: 10pt; }
  .no-print, .masthead, .card, .actions { display: none !important; }
  .wrapper { max-width: none; padding: 0; }
  .citation { break-inside: avoid; border-bottom: none; padding: 0.15cm 0; }
  .year-heading { break-after: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* Below this the two pickers side by side stop being usable - each column is
   narrower than a grant name - so the pairs unstack into one column. The
   combining order is unaffected: it was always KEYS order, never the geometry. */
@media (max-width: 900px) {
  .filter-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}

@media (max-width: 700px) {
  .wrapper { padding: var(--sp-5); }
  .filter-head { flex-wrap: wrap; }
  .year-range input { width: 6rem; }
}