/* Requests, Events, and the People page's away and leaving parts. Built on the tokens in styles.css:
   keylines, slabs and chip faces, so the pages pick up light and dark themes without colours of their own. */

/* ---------- shared */

.chip-now { --chip-face: var(--face-gold); }
.chip-away { --chip-face: var(--face-sky); }
.panel-ok { box-shadow: inset 0 6px 0 var(--face-green), var(--slab); padding-top: 18px; }
.local-time { display: inline-block; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.local-late { color: var(--warn-ink); }
.field-check label { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.field-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.span-all { grid-column: 1 / -1; }
details.disclosure-inline { margin-top: 10px; }
details.disclosure-inline > summary { cursor: pointer; font-weight: 700; color: var(--accent); }
details.disclosure-inline[open] > summary { margin-bottom: 8px; }

/* ---------- requests */

.rq-forms { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.rq-form-card { display: block; height: 100%; color: inherit; text-decoration: none; }
.rq-form-card h2 { font-size: 16px; margin: 0 0 6px; }
.rq-form-card p { margin: 0 0 6px; }
.rq-form-card:hover { box-shadow: var(--shadow-lift); }
.rq-form-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rq-fields { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.rq-form { margin-bottom: 18px; }
.rq-after:empty { display: none; }

/* ---------- events */

.ev-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.ev-tabs a { padding: 6px 14px; border: 2px solid var(--keyline); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: var(--slab-s); }
.ev-tabs a[aria-current="page"] { background: var(--gold); color: var(--navy); }
.ev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.ev-card { display: block; color: inherit; text-decoration: none; height: 100%; }
.ev-card:hover { box-shadow: var(--shadow-lift); }
.ev-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ev-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.ev-card-head h2 { font-size: 17px; margin: 0; }
.ev-when { margin: 6px 0 10px; }
.ev-ready { margin: 8px 0; }
.ev-ready-track { height: 12px; border: 2px solid var(--keyline); border-radius: 999px; background: var(--sunk); overflow: hidden; }
.ev-ready-fill { display: block; height: 100%; background: var(--face-blue); border-right: 2px solid var(--keyline); }
.ev-card.is-ready .ev-ready-fill, .ev-summary.panel-ok .ev-ready-fill { background: var(--face-green); }
.ev-ready p { margin: 4px 0 0; }
.ev-summary { margin-bottom: 18px; }
.ev-items .is-late .task-title { color: var(--blocked-ink); }
.ev-template { border: 2px solid var(--line); border-radius: var(--radius-s); padding: 8px 12px 10px; margin: 6px 0 12px; }
.ev-template legend { font-weight: 800; padding: 0 6px; }
.ev-template-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ev-template-list label { display: flex; gap: 8px; align-items: baseline; }

/* ---------- people: away and leaving */

.away-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.away-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.lv-list { margin: 0 0 12px; padding-left: 18px; }