:root { --bg:#0b0e14; --card:#151a24; --ink:#dde3ee; --dim:#8a93a6;
        --acc:#e8c268; --ok:#7ec97e; --bad:#c97e7e; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--ink);
       font:15px/1.45 system-ui, sans-serif; }
header { position:sticky; top:0; z-index:10; background:#0b0e14ee;
         backdrop-filter:blur(6px); border-bottom:1px solid #232a38;
         padding:10px 16px; display:flex; gap:14px; align-items:center;
         flex-wrap:wrap; }
header h1 { font-size:17px; margin:0 8px 0 0; color:var(--acc); }
header label { color:var(--dim); font-size:13px; }
header input, header select {
  background:var(--card); color:var(--ink); border:1px solid #2c3547;
  border-radius:6px; padding:4px 8px; width:84px; font-size:14px; }
header select { width:auto; }
header button { background:#2c3547; color:var(--ink); border:0;
  border-radius:6px; padding:5px 10px; cursor:pointer; }
#yearbar { position:sticky; top:53px; z-index:9; background:#0b0e14cc;
  padding:6px 16px; display:flex; gap:8px; border-bottom:1px solid #1a2030; }
#yearbar button { background:none; border:1px solid #2c3547; color:var(--dim);
  border-radius:14px; padding:2px 12px; cursor:pointer; }
#yearbar button.cur { color:var(--acc); border-color:var(--acc); }
main { max-width:860px; margin:0 auto; padding:12px 16px 80px; }
main.loading { min-height:calc(100vh - 120px); }
.loading-skeleton { display:grid; gap:8px; }
.loading-skeleton .skel { min-height:250px; border:1px solid #202839; border-radius:10px;
  background:linear-gradient(90deg,#151a24 25%,#1d2432 45%,#151a24 65%);
  background-size:300% 100%; animation:shimmer 1.6s ease-in-out infinite; }
.loading-skeleton .skel-event { display:grid; grid-template-columns:118px minmax(0,1fr) 230px;
  gap:14px; padding:10px 14px; }
.loading-skeleton .skel-date, .loading-skeleton .skel-copy,
.loading-skeleton .skel-image { background:#252d3b; border-radius:6px; }
.loading-skeleton .skel-date { height:62px; }
.loading-skeleton .skel-copy { height:58px; margin-top:2px; }
.loading-skeleton .skel-image { width:230px; aspect-ratio:1; }
@media(max-width:600px) {
  .loading-skeleton .skel-event { grid-template-columns:118px minmax(0,1fr); }
  .loading-skeleton .skel-image { grid-column:1/-1; width:100%; }
}
@keyframes shimmer { from { background-position:100% 0; } to { background-position:-100% 0; } }
h2.month { position:sticky; top:96px; font-size:14px; color:var(--dim);
  text-transform:uppercase; letter-spacing:.12em; margin:26px 0 8px;
  background:var(--bg); padding:4px 0; }
.ev { background:var(--card); border:1px solid #202839; border-radius:10px;
  padding:10px 14px; margin:8px 0; display:flex; gap:14px;
  align-items:flex-start; }
.ev.hidden-ev { opacity:.38; }
.when { min-width:118px; }
.when .d { font-weight:600; }
.when .t { color:var(--acc); font-size:18px; }
.what { flex:1; }
.what .name { font-weight:600; }
.what .meta { color:var(--dim); font-size:13px; margin-top:2px; }
.what a { color:#7aa2d6; }
.badge { font-size:12px; border-radius:5px; padding:1px 7px; }
.fix { background:#2b2438; color:#b9a0e0; cursor:help; }
.src { background:#26303a; color:#9fbad4; cursor:help; text-decoration:none; }
.vis  { background:#1d3320; color:var(--ok); }
.nvis { background:#331d1d; color:var(--bad); }
.thumb { max-width:230px; border-radius:8px; cursor:pointer;
  aspect-ratio:1; object-fit:cover; }   /* stills are square; the box keeps its height before the image loads */
.raythumb { position:relative; display:inline-block; line-height:0; max-width:230px; }
.raythumb .raymask { position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  opacity:0; transition:opacity .15s ease; }
.raythumb:hover .raymask, .raythumb:focus-within .raymask { opacity:1; }
dialog { background:var(--card); color:var(--ink); border:1px solid #2c3547;
  border-radius:12px; max-width:92vw; }
dialog img { max-width:86vw; max-height:80vh; }
::backdrop { background:#000a; }
.note { color:var(--dim); font-size:13px; }
footer { max-width:860px; margin:0 auto; padding:0 16px 40px;
  color:var(--dim); font-size:12.5px; line-height:1.6; }
details.about { max-width:860px; margin:12px auto; padding:0 16px; color:var(--dim); font-size:12.5px; }
details.about summary { cursor:pointer; color:var(--acc); font-size:13px; }
details.about footer { margin:8px 0 0; padding:0 0 24px; }
footer .key { color:var(--acc); }
#tabs { display:flex; gap:6px; margin-left:auto; }
#tabs button { background:none; border:1px solid #2c3547; color:var(--dim);
  border-radius:14px; padding:3px 12px; cursor:pointer; }
#tabs select { font-size:13px; padding:3px 6px; }
#newcount, #correctioncount { color:var(--acc); margin-left:4px; }
.votes { display:inline-flex; gap:4px; margin-left:8px; vertical-align:middle; }
.votes button { background:#1b2130; border:1px solid #2c3547; color:var(--dim);
  border-radius:12px; padding:0 8px; font-size:12px; line-height:20px; cursor:pointer; }
.votes button.mine { border-color:var(--acc); color:var(--acc); }
#tabs button.cur { color:var(--acc); border-color:var(--acc); }
#gallery { max-width:1100px; margin:0 auto; padding:12px 16px 80px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:14px; }
.card { background:var(--card); border:1px solid #202839; border-radius:10px;
  padding:10px; }
.card img.thumb { width:100%; max-width:none; display:block; }
.card .name { font-weight:600; margin-top:8px; }
.card .meta { color:var(--dim); font-size:13px; }
.card .next { color:var(--acc); font-size:13px; margin-top:4px; }
#corrections { max-width:1220px; margin:0 auto; padding:18px 16px 80px; }
#corrections > p { color:var(--dim); max-width:880px; }
.correction { border-top:1px solid #354056; padding:18px 0 28px; }
.correction h2 { font-size:19px; margin:0 0 6px; }
.correction a { color:#7aa2d6; }
.correction .pair { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.correction .pair.triple { grid-template-columns:1fr 1fr 1fr; }
.correction figure { margin:0; }
.correction figcaption { font-weight:700; margin:.5em 0; }
.correction figure img { display:block; width:100%; height:auto;
  background:#000; border-radius:8px; }
.correction figure p, .correction .review { color:var(--dim); line-height:1.5; }
.correction .reported { background:#18202b; border-left:3px solid #7aa2d6;
  padding:10px 12px; line-height:1.5; }
.status { font-size:12px; padding:2px 7px; border-radius:5px; }
.status.pending { background:#775b10; }
.status.approved { background:#176b37; }
.status.rejected { background:#8c2525; }
.commentbox { margin-top:12px; padding:10px 12px; background:#121923; border:1px solid #263247; border-radius:8px; }
.commentbox form { display:flex; gap:8px; flex-wrap:wrap; margin-top:7px; }
.commentbox input, .commentbox textarea { background:var(--card); color:var(--ink); border:1px solid #2c3547; border-radius:5px; padding:5px 7px; font:inherit; }
.commentbox textarea { flex:1 1 360px; min-height:44px; resize:vertical; }
.commentbox input { width:130px; }
.commentbox button, #exportcomments { background:#2c3547; color:var(--ink); border:0; border-radius:6px; padding:5px 10px; cursor:pointer; }
.comment { border-top:1px solid #263247; padding:7px 0 0; margin-top:7px; color:var(--ink); }
.comment small { color:var(--dim); }
.assessment { font-size:12px; padding:2px 7px; border-radius:5px; margin-left:6px; }
.assessment.seems-correct { background:#1d3320; color:var(--ok); }
.assessment.suspect { background:#775b10; color:#f0d58a; }
.assessment.mislabeled { background:#8c2525; color:#ffd0d0; }
@media(max-width:600px) {
  .ev { display:grid; grid-template-columns:118px minmax(0,1fr); }
  .what { min-width:0; }
  .thumb { grid-column:1/-1; width:100%; max-width:none; }
}
@media(max-width:760px) { .correction .pair { grid-template-columns:1fr; } }
dialog .views { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start;
  justify-content:center; }
dialog .views > div { position:relative; }
dialog .views img { max-width:min(560px, 86vw); max-height:70vh; border-radius:8px; }
dialog .views .small img { max-width:min(220px, 42vw); max-height:30vh; }
dialog .col { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; justify-items:center; }
dialog .cap { color:var(--dim); font-size:12.5px; text-align:center; margin-top:4px; }
#marker { position:absolute; width:22px; height:22px; border:2px solid var(--acc);
  border-radius:50%; transform:translate(-50%,-50%); pointer-events:none;
  box-shadow:0 0 0 2px #0008; }
#marker::after { content:""; position:absolute; left:50%; top:50%; width:4px;
  height:4px; background:var(--acc); border-radius:50%; transform:translate(-50%,-50%); }
footer .ray { color:#e06a5c; }
header input.narrow { width:56px; }
.raythumb.outline .raymask { opacity:1; }
.markwrap { position:relative; display:inline-block; line-height:0; }
#more { height:1px; }