/* m2v.ru — public site: dark, dense, scene/predb aesthetic.
   Presentation only. Polished pass (stage 7): consistent type scale, AA-contrast
   colours, clear link/focus states, tidy tables, NFO block.

   P2: every colour is a CSS variable. The default (theme 01) lives in :root;
   alternative palettes are [data-theme="NN"] blocks at the end of this file and
   selected via the `site_theme` admin setting (the layout sets <html data-theme>).
   To add a palette: copy a block, bump NN, and register it in
   SettingsController::SELECT_OPTIONS. */
:root {
  /* surfaces */
  --bg: #0d1117;
  --bg-elev: #161b22;
  --bg-hover: rgba(88,166,255,.07);
  --border: #283039;
  --border-soft: #1d242d;
  /* text */
  --fg: #d6dde6;          /* primary body */
  --fg-strong: #f2f6fb;   /* headings / emphasis */
  --dim: #97a2b1;         /* secondary (>= AA on --bg) */
  /* accents */
  --accent: #58a6ff;      /* links / brand */
  --accent-hover: #8cc2ff;
  --accent-fg: #05121f;   /* text on a filled --accent (search button) */
  --visited: #b39ddb;     /* visited links — distinct but calm */
  --group: #e0a45e;       /* scene group */
  --release: var(--fg);   /* release name in tables (retro: orange) */
  --col-header: var(--dim);     /* table column headers (retro: gold) */
  --section-bg: transparent;    /* section-title "plaque" bg (retro: purple) */
  --section-fg: var(--fg-strong);
  --ok: #56d364;
  --warn: #e3b341;
  --danger: #f06a5d;
  --notice-bg: rgba(227,179,65,.1);
  --nfo-bg: #05080c;            /* NFO <pre> background */
  --nfo-fg: #b9c4d1;            /* NFO <pre> text */
  /* type */
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: .76rem;
  --fs-sm: .85rem;
  --fs: .9rem;
  --fs-md: 1rem;
  --fs-lg: 1.18rem;
  --fs-xl: 1.4rem;
  --sp: 1rem;             /* base vertical rhythm */
  --radius: 6px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: var(--fs)/1.55 var(--sans);
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
a:visited { color: var(--visited); }
strong { color: var(--fg-strong); font-weight: 600; }

/* accessible, visible focus on every interactive element */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- header ---- */
.site-head { background: linear-gradient(180deg, var(--bg-elev), var(--bg)); border-bottom: 1px solid var(--border); }
.site-head .bar {
  max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: var(--sp);
  padding: .7rem 1rem; flex-wrap: wrap;
}
.logo { font: 700 var(--fs-xl)/1 var(--mono); color: var(--fg-strong); letter-spacing: .01em; }
.logo:hover { text-decoration: none; }
.logo span { color: var(--accent); }
.search { margin-left: auto; display: flex; gap: .4rem; flex: 1 1 280px; max-width: 460px; }
.search input {
  flex: 1; padding: .5rem .7rem; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius); font: var(--fs) var(--sans);
}
.search input::placeholder { color: var(--dim); }
.search button {
  padding: .5rem 1rem; border: 1px solid transparent; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-fg); cursor: pointer; font: 600 var(--fs) var(--sans);
}
.search button:hover { background: var(--accent-hover); }
.sections {
  max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: .15rem;
  padding: 0 1rem .55rem;
}
.sections a {
  padding: .28rem .7rem; color: var(--dim); border-radius: 5px; font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
.sections a:hover { color: var(--fg-strong); background: var(--bg-elev); text-decoration: none; }
.sections a:visited { color: var(--dim); }

/* ---- layout ---- */
.wrap { max-width: 1100px; margin: 0 auto; padding: calc(var(--sp) * 1.1) 1rem calc(var(--sp) * 2.5); }
h1, .section-title { font-size: var(--fs-xl); color: var(--fg-strong); margin: .1rem 0 var(--sp); font-weight: 600; }
/* section-title "plaque": transparent by default; themed palettes (retro) fill it */
.section-title {
  color: var(--section-fg); background: var(--section-bg);
  padding: .15rem .5rem; border-radius: var(--radius);
}
h2 { font-size: var(--fs-md); color: var(--fg-strong); margin: calc(var(--sp) * 1.4) 0 .5rem; font-weight: 600; }
.empty, .muted { color: var(--dim); }
.notice {
  background: var(--notice-bg); border: 1px solid var(--warn); color: var(--fg);
  padding: .7rem .9rem; border-radius: var(--radius);
}

/* ---- stats ---- */
.stats {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .85rem 1rem; margin-bottom: calc(var(--sp) * 1.4);
  font-family: var(--mono); font-size: var(--fs-sm);
}
.stats p { margin: .22rem 0; }
.stats-totals strong, .stats-periods strong { color: var(--accent); }
.stats-groups { color: var(--dim); }

/* ---- home section blocks ---- */
.block { margin-bottom: calc(var(--sp) * 1.6); }
.block h2 {
  display: flex; align-items: baseline; gap: .8rem;
  border-bottom: 1px solid var(--border); padding: .15rem .5rem .35rem; margin-top: 0;
  background: var(--section-bg); border-radius: var(--radius) var(--radius) 0 0;
}
.block h2 a:first-child { color: var(--section-fg); }
.viewall { margin-left: auto; font-size: var(--fs-sm); color: var(--dim); font-weight: 400; }
.viewall:hover { color: var(--accent); }

/* ---- release tables (fixed layout so columns align everywhere) ---- */
table.releases {
  width: 100%; border-collapse: collapse; margin-bottom: var(--sp);
  font-size: var(--fs); table-layout: fixed;
}
table.releases th {
  text-align: left; color: var(--col-header); font-weight: 600; padding: .4rem .55rem;
  border-bottom: 1px solid var(--border); white-space: nowrap;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
}
table.releases td {
  padding: .35rem .55rem; border-bottom: 1px solid var(--border-soft); vertical-align: top;
}
table.releases tbody tr:hover td { background: var(--bg-hover); }
/* shared fixed widths for home / section / search */
col.c-sec   { width: 9rem; }
col.c-grp   { width: 9rem; }
col.c-size  { width: 6.5rem; }
col.c-files { width: 4rem; }
col.c-date  { width: 6.5rem; }
/* RELEASE column flexes and ellipsises long names (full name in title=) */
.rname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rname a { font-family: var(--mono); color: var(--release); }
.rname a:hover { color: var(--accent-hover); }
.rname a:visited { color: var(--release); }
.rgrp { color: var(--group); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* group names are clickable (P3) but keep the scene-group colour, not link blue */
.rgrp a { color: var(--group); }
.rgrp a:hover { color: var(--accent-hover); }
.rgrp a:visited { color: var(--group); }
.rsize, .rfiles { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--dim); }
/* right-align the SIZE / FILES headers under their right-aligned values */
table.releases th.num { text-align: right; }
.rdate, .rsec { white-space: nowrap; color: var(--dim); font-family: var(--mono); font-size: var(--fs-sm); }
.rsec { overflow: hidden; text-overflow: ellipsis; }
/* sortable headers */
th a.sort { color: var(--dim); }
th a.sort:hover { color: var(--fg-strong); text-decoration: none; }
th a.sort.is-active { color: var(--fg-strong); }
/* the per-release Files table uses the same fixed layout (F2) */
table.releases.files col.c-size { width: 8rem; }

/* ---- date navigation / filters ---- */
.datenav {
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  margin-bottom: .85rem; font-family: var(--mono); font-size: var(--fs-sm);
}
.datenav a, .datenav .cal { padding: .15rem .4rem; border: 1px solid var(--border); border-radius: 4px; color: var(--dim); }
.datenav a:hover, .datenav .cal:hover { color: var(--fg-strong); border-color: var(--accent); text-decoration: none; }
.datenav .cal { background: transparent; cursor: pointer; font: inherit; line-height: 1; }
.datenav .period { color: var(--fg-strong); font-weight: 600; }
/* P1: sits in the normal flex flow (not pushed hard-right) so the count +
   period volume + filter all fit on the row. */
.datenav .count { color: var(--dim); margin-left: auto; }
.count { color: var(--dim); }

/* ---- pager ---- */
.pager { display: flex; gap: var(--sp); align-items: center; color: var(--dim); font-family: var(--mono); font-size: var(--fs-sm); }
.pager a { padding: .2rem .5rem; border: 1px solid var(--border); border-radius: 4px; }
.pager a:hover { border-color: var(--accent); text-decoration: none; }

/* ---- release page ---- */
.crumbs { color: var(--dim); font-size: var(--fs-sm); margin-bottom: .6rem; font-family: var(--mono); }
.crumbs .here { color: var(--fg); }
.rel-name { font-family: var(--mono); overflow-wrap: anywhere; font-size: var(--fs-lg); }
dl.rel-meta {
  display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .9rem 1.1rem; margin: 0 0 var(--sp);
}
dl.rel-meta dt { color: var(--dim); }
dl.rel-meta dd { margin: 0; font-family: var(--mono); color: var(--fg); }
dl.rel-meta dd a { color: var(--accent); }
/* F2: fixed layout — path ellipsises (full path in title=), size fixed + right */
.fpath { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* NFO: monospace, preserve ASCII art, scroll wide art horizontally (no wrap) */
pre.nfo {
  background: var(--nfo-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; overflow-x: auto; white-space: pre;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.25; color: var(--nfo-fg);
}

/* ---- footer ---- */
.site-foot {
  border-top: 1px solid var(--border); margin: calc(var(--sp) * 2) auto 0;
  padding: calc(var(--sp) * 1.2) 1rem calc(var(--sp) * 2);
  max-width: 1100px; color: var(--dim); font-size: var(--fs-sm);
}
.disclaimer { max-width: none; line-height: 1.55; }
.contact { text-align: center; margin-top: .8rem; }

/* ---- 404 ---- */
.notfound { text-align: center; padding: calc(var(--sp) * 3) 1rem; }
.notfound h1 { font-size: 3rem; font-family: var(--mono); color: var(--accent); margin: 0; }

/* ---- responsive ---- */
@media (max-width: 620px) {
  :root { --fs: .85rem; }
  .search { order: 3; margin-left: 0; max-width: none; }
  /* wide tables scroll horizontally instead of hiding/misaligning columns */
  table.releases { display: block; overflow-x: auto; white-space: nowrap; }
  .datenav .count { margin-left: 0; flex-basis: 100%; }
}

/* =====================================================================
   P2 — palettes. Theme 01 is :root above. Each block below overrides only
   the colour (and, where wanted, font) variables; structure is shared.
   Selected by the `site_theme` setting -> <html data-theme="NN">.
   ===================================================================== */

/* 02 — retro m2v: exact old-site palette (templates/01/style.css). Medium-grey
   page, indigo #230044 section plaques with yellow #ffff33 headers, bronze-gold
   #bb8f44 release names/links/text, rows on a dark #222222 backing. Colours map
   onto the shared variables; the few rules below carry the surface fills that
   have no variable (table backing, form controls, no-underline links). Only the
   retro theme is affected; themes 01/03/04 and the layout are untouched. */
[data-theme="02"] {
  --bg: #555555;                 /* page background */
  --bg-elev: #444444;            /* secondary / side panels (stats, rel-meta) */
  --bg-hover: rgba(255,255,255,.06);
  --border: #444444;
  --border-soft: #3a3a3a;
  --fg: #bb8f44;                 /* main table text (bronze-gold) */
  --fg-strong: #999999;          /* H1 / secondary headings */
  --dim: #999999;                /* secondary text */
  --accent: #bb8f44;             /* links — same colour as text */
  --accent-hover: #d4a85a;
  --accent-fg: #ffffff;
  --visited: #bb8f44;
  --group: #bb8f44;
  --release: #bb8f44;
  --col-header: #ffff33;         /* Size / Group / Date column headers */
  --section-bg: #230044;         /* section header plaque (indigo) */
  --section-fg: #ffff33;         /* plaque text + section title (yellow) */
  --notice-bg: rgba(255,255,51,.1);
  --nfo-bg: #222222;
  --nfo-fg: #bb8f44;
  /* old site used the default serif body font, not monospace */
  --sans: Georgia, "Times New Roman", Times, serif;
}
/* release tables sit on a dark #222222 backing (no variable for table fill) */
[data-theme="02"] table.releases { background: #222222; }
/* form controls: mid-grey with white text (old-site select/button) */
[data-theme="02"] .search input,
[data-theme="02"] .search button {
  background: #666666; color: #ffffff; border-color: #666666;
}
[data-theme="02"] .search input::placeholder { color: #cccccc; }
/* retro links: never underlined (old-site look) */
[data-theme="02"] a:hover { text-decoration: none; }

/* 03 — light: easy daytime reading, AA contrast on white. */
[data-theme="03"] {
  --bg: #f6f7f9;
  --bg-elev: #ffffff;
  --bg-hover: rgba(0,0,0,.04);
  --border: #d6dbe1;
  --border-soft: #e7ebf0;
  --fg: #232a31;
  --fg-strong: #0d1117;
  --dim: #5b6672;
  --accent: #0b66d6;
  --accent-hover: #0a4fa6;
  --accent-fg: #ffffff;
  --visited: #6f42c1;
  --group: #b5651d;
  --release: var(--fg);
  --col-header: var(--dim);
  --section-bg: transparent;
  --section-fg: var(--fg-strong);
  --notice-bg: rgba(196,148,18,.12);
  --nfo-bg: #f0f2f5;
  --nfo-fg: #2b3138;
}

/* 04 — amber CRT: monospace amber-on-black terminal look. */
[data-theme="04"] {
  --bg: #0a0700;
  --bg-elev: #140d00;
  --bg-hover: rgba(255,176,0,.06);
  --border: #3a2a00;
  --border-soft: #241a00;
  --fg: #ffb000;
  --fg-strong: #ffd479;
  --dim: #b07d00;
  --accent: #ffcf4d;
  --accent-hover: #ffe08a;
  --accent-fg: #0a0700;
  --visited: #d9a441;
  --group: #ffd479;
  --release: #ffb000;
  --col-header: #ffd479;
  --section-bg: #2a1d00;
  --section-fg: #ffd479;
  --notice-bg: rgba(255,176,0,.08);
  --nfo-bg: #050300;
  --nfo-fg: #ffb000;
  --sans: var(--mono);
}
