/* Colors come from the shared tokens of the research server
   (/assets/v1/tokens.css, linked in index.html before this file).
   No literal color and no physical direction (left, right) in this file. */
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--ink); }
a { color: var(--accent); }
header { background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.bar { display:flex; align-items:center; gap:1rem; padding:.8rem 1.5rem; }
.up { text-decoration:none; font-size:1.2rem; }
.brand { font-size:1.4rem; font-weight:700; color:var(--ink); text-decoration:none; letter-spacing:.02em; }
.brand span { color:var(--accent); }
#who { margin-inline-start:auto; font-size:.85rem; color:var(--muted); }
nav { display:flex; gap:.2rem; padding:0 1.2rem; flex-wrap:wrap; }
nav a { padding:.55rem .8rem; text-decoration:none; color:var(--ink); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; border-bottom:3px solid transparent; }
nav a.active { border-bottom-color:var(--accent); color:var(--accent); }
main { max-width:900px; margin:0 auto; padding:1.5rem 1.5rem 5rem; }
h1 { font-size:2rem; margin:.2rem 0 .4rem; }
h2 { font-size:1.1rem; margin:1.6rem 0 .6rem; }
.muted { color:var(--muted); font-size:.85rem; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:1rem 1.2rem; }
input, select, textarea { font:inherit; padding:.45rem .55rem; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); width:100%; }
textarea { min-height:5rem; resize:vertical; }
.search { font-size:1.2rem; padding:.7rem .9rem; }
button { font:inherit; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; background:var(--accent); color:var(--on-accent); border:0; border-radius:6px; padding:.5rem .9rem; cursor:pointer; }
button.secondary { background:var(--surface); color:var(--ink); border:1px solid var(--line); }
button.danger { background:var(--bad); color:var(--on-bad); }
button:disabled { opacity:.5; cursor:default; }
.row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.row > * { flex:1; }
.row > button, .row > .fixed { flex:0 0 auto; }
.results { list-style:none; padding:0; margin:1rem 0; display:grid; gap:.5rem; }
.results a { display:block; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:.7rem 1rem; text-decoration:none; color:var(--ink); }
.results a:hover { border-color:var(--accent); }
.results .w { font-weight:700; font-size:1.05rem; }
.results .t { color:var(--muted); font-size:.9rem; margin-top:.2rem; }
.badge { display:inline-block; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; border:1px solid var(--line); border-radius:999px; padding:.05rem .5rem; color:var(--muted); margin-inline-start:.4rem; vertical-align:middle; }
.letters { display:flex; flex-wrap:wrap; gap:.25rem; margin:.8rem 0; }
.letters button { background:var(--surface); color:var(--ink); border:1px solid var(--line); text-transform:none; padding:.3rem .55rem; min-width:2rem; }
.letters button.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.pager { display:flex; gap:.6rem; align-items:center; justify-content:center; margin-top:1rem; }
dl.fields { display:grid; grid-template-columns:max-content 1fr; gap:.35rem 1.2rem; margin:0; }
dl.fields dt { color:var(--muted); font-size:.85rem; }
dl.fields dd { margin:0; }
ul.plain { margin:.2rem 0; padding-inline-start:1.2rem; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:.8rem 1rem; }
label { display:block; font-size:.8rem; color:var(--muted); margin-bottom:.25rem; }
.tr-row { display:grid; grid-template-columns:160px 1fr 1fr auto; gap:.5rem; margin-bottom:.5rem; }
@media (max-width: 640px) { .tr-row { grid-template-columns:1fr; } }
.actions { display:flex; gap:.6rem; margin-top:1.2rem; flex-wrap:wrap; }
details.history { margin-top:1.5rem; }
details.history summary { cursor:pointer; font-weight:600; }
.hist { border-inline-start:3px solid var(--line); padding:.4rem .8rem; margin:.6rem 0; }
.hist .changes { font-size:.85rem; color:var(--muted); }
table { width:100%; border-collapse:collapse; background:var(--surface); }
th, td { text-align:start; padding:.5rem .6rem; border-bottom:1px solid var(--line); font-size:.9rem; }
.stat { font-size:2rem; font-weight:700; }
#toast { position:fixed; inset-block-end:1.2rem; inset-inline:0; margin-inline:auto; width:fit-content; max-width:90vw; background:var(--ink); color:var(--bg); padding:.6rem 1rem; border-radius:8px; font-size:.9rem; opacity:0; transition:opacity .2s; pointer-events:none; }
#toast.show { opacity:1; }
#toast.bad { background:var(--bad); color:var(--on-bad); }