/* Design tokens. Contrast targets (WCAG AA): text >= 4.5:1, UI/borders >= 3:1. */
:root {
  color-scheme: light dark;
  /* palette */
  --bg:#fff; --surface:#f4f4f6; --fg:#1a1a1f; --muted:#5c5c66;
  --primary:#2955b8; --on-primary:#fff; --primary-hover:#1f4496;
  --border:#8a8a96; --border-subtle:#d8d8de; --focus:#1a56db;
  /* status */
  --success:#1e6b2e; --error:#b3261e; --warning:#8a5a00; --info:#1f5fa8;
  --success-bg:#e7f4ea; --error-bg:#fceceb; --warning-bg:#fdf3dc; --info-bg:#e8f0fb;
  --danger:#b3261e; --on-danger:#fff;
  /* spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2.5rem;
  --gutter:clamp(.75rem,4vw,1.5rem);
  /* radii */
  --radius-sm:4px; --radius:6px; --radius-lg:8px; --radius-pill:99px;
  /* typography */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text-sm:.85rem; --text-base:1rem; --text-lg:1.25rem; --text-xl:1.6rem;
  --weight-normal:400; --weight-bold:700; --leading:1.5; --leading-tight:1.25;
  /* shadows */
  --shadow-sm:0 1px 2px rgb(0 0 0 / .12); --shadow:0 2px 8px rgb(0 0 0 / .15);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#16171a; --surface:#202226; --fg:#e8e8ea; --muted:#a8a8b2;
    --primary:#8aaef5; --on-primary:#0b1530; --primary-hover:#a7c1f8;
    --border:#6f727b; --border-subtle:#34363c; --focus:#9ec0ff;
    --success:#6fd08a; --error:#ff8a80; --warning:#f0b44c; --info:#7db4f0;
    --success-bg:#16301d; --error-bg:#3a1b19; --warning-bg:#33270f; --info-bg:#172a42;
    --danger:#ff8a80; --on-danger:#2a0907;
    --shadow-sm:0 1px 2px rgb(0 0 0 / .5); --shadow:0 2px 8px rgb(0 0 0 / .6);
  }
}

/* base */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:var(--text-base)/var(--leading) var(--font); background:var(--bg); color:var(--fg); overflow-wrap:break-word; }
h1, h2, h3 { line-height:var(--leading-tight); margin:var(--space-5) 0 var(--space-3); }
h1 { font-size:var(--text-xl); margin-top:var(--space-4); }
h2 { font-size:var(--text-lg); }
h3 { font-size:var(--text-base); }
a { color:var(--primary); }
code, pre { font-family:var(--font-mono); font-size:.9em; }
img, video, audio { max-width:100%; }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:var(--space-2); top:-4rem; z-index:10; background:var(--bg); color:var(--fg); padding:var(--space-2) var(--space-4); border:2px solid var(--focus); border-radius:var(--radius); }
.skip-link:focus { top:var(--space-2); }

/* layout + header */
main { padding:var(--space-4) var(--gutter); max-width:1400px; margin:0 auto; }
header.top { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-4); padding:var(--space-3) var(--gutter); background:var(--surface); border-bottom:1px solid var(--border-subtle); }
header.top .brand { font-weight:var(--weight-bold); text-decoration:none; color:var(--fg); }
header.top nav { display:flex; gap:var(--space-4); }
header.top form { margin-left:auto; }

/* forms */
label { font-weight:var(--weight-bold); font-size:var(--text-sm); }
input, select, textarea { font:inherit; padding:.4rem .7rem; min-height:2.5rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); color:var(--fg); max-width:100%; }
input[type=checkbox] { min-height:0; width:1.1rem; height:1.1rem; vertical-align:middle; accent-color:var(--primary); }
label:has(> input[type=checkbox]) { display:inline-flex; align-items:center; gap:var(--space-2); }
.stack, .login { display:flex; flex-direction:column; gap:var(--space-3); }
.stack { max-width:26rem; }
.stack label, .login label { display:flex; flex-direction:column; gap:var(--space-1); }
.login { max-width:22rem; margin:var(--space-6) auto; }
.narrow { max-width:36rem; margin:var(--space-6) auto; }
.filters { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-4); align-items:center; }
.filters input[type=search] { flex:1 1 14rem; }
.filters .field { display:flex; flex-direction:column; gap:var(--space-1); }
form.inline { display:flex; flex-wrap:wrap; gap:.4rem; margin:0; }
form.upload { display:flex; gap:.6rem; align-items:center; margin-bottom:var(--space-4); flex-wrap:wrap; }

/* buttons */
button, .button { font:inherit; font-weight:var(--weight-bold); padding:.4rem .9rem; min-height:2.5rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--fg); text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
button:hover, .button:hover { border-color:var(--fg); }
button.primary, .button.primary { background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
button.primary:hover, .button.primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); }
button.danger, .button.danger { background:transparent; color:var(--danger); border-color:var(--danger); }
button.danger:hover, .button.danger:hover { background:var(--danger); color:var(--on-danger); }
button:disabled, .button[aria-disabled=true] { opacity:.6; cursor:not-allowed; }
.actions { display:flex; gap:var(--space-2); flex-wrap:wrap; margin:.8rem 0; }

/* gallery + media cards */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr)); gap:.7rem; }
.card { background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:var(--fg); display:block; border:1px solid var(--border-subtle); box-shadow:var(--shadow-sm); min-width:0; }
.card:hover { border-color:var(--border); box-shadow:var(--shadow); }
.card img, .card .noimg { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:var(--border-subtle); }
.card .noimg { display:flex; align-items:center; justify-content:center; color:var(--muted); }
.card .cap { padding:.3rem .5rem; font-size:var(--text-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.more { grid-column:1/-1; text-align:center; padding:var(--space-4); }
.media-view { display:grid; gap:var(--space-4); grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
@media (max-width:800px) { .media-view { grid-template-columns:1fr; } }
.media-view .preview img, .media-view .preview video { max-width:100%; max-height:75vh; }
.media-view .preview audio { width:100%; }
dl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.2rem .8rem; }
dt { color:var(--muted); }
dd { margin:0; }
pre.prompt { white-space:pre-wrap; background:var(--surface); padding:.6rem; border-radius:var(--radius); border:1px solid var(--border-subtle); overflow-x:auto; }
pre.source { font-family:var(--font-mono, ui-monospace, monospace); font-size:var(--text-sm); }
.tag { display:inline-block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill); padding:0 .6rem; margin:0 .3rem .2rem 0; font-size:var(--text-sm); text-decoration:none; }

/* tables */
.table-wrap { overflow-x:auto; margin-bottom:var(--space-4); border:1px solid var(--border-subtle); border-radius:var(--radius); }
table { border-collapse:collapse; width:100%; min-width:36rem; }
th, td { text-align:left; padding:.4rem .6rem; border-bottom:1px solid var(--border-subtle); vertical-align:middle; }
th { font-size:var(--text-sm); color:var(--muted); white-space:nowrap; }
tbody tr:last-child td { border-bottom:0; }

/* status: notices, badges */
.empty, .muted { color:var(--muted); }
.error, .notice, .warning, .info { font-weight:var(--weight-bold); }
.error { color:var(--error); }
.notice { color:var(--success); }
.warning { color:var(--warning); }
.info { color:var(--info); }
p.error, p.notice, p.warning, p.info { padding:var(--space-2) var(--space-3); border-radius:var(--radius); border-left:4px solid currentcolor; }
p.error { background:var(--error-bg); }
p.notice { background:var(--success-bg); }
p.warning { background:var(--warning-bg); }
p.info { background:var(--info-bg); }
.badge { display:inline-block; padding:0 .6rem; border-radius:var(--radius-pill); border:1px solid currentcolor; font-size:var(--text-sm); font-weight:var(--weight-bold); }
.secret { background:var(--surface); border:2px solid var(--primary); border-radius:var(--radius-lg); padding:.6rem var(--space-4); margin:var(--space-4) 0; }
code.wrap { word-break:break-all; }

/* htmx loading indicators (htmx's built-in styles are disabled in base.html) */
.htmx-indicator { opacity:0; visibility:hidden; transition:opacity .15s ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity:1; visibility:visible; }
#gallery.htmx-request, .htmx-request #gallery { opacity:.6; }
@media (prefers-reduced-motion: reduce) { .htmx-indicator { transition:none; } }