/* ==========================================================================
   glint.css — Glint design-system stylesheet
   --------------------------------------------------------------------------
   ASP.NET Core MVC + Razor + Bootstrap 5. These are app/component styles
   layered ON TOP of Bootstrap; Bootstrap's grid/reset are assumed loaded.

   Authoritative source: docs/DESIGN.md (tokens §2/§4, type §3, layout §5,
   component inventory §7, motion §9, quality floor §10). The HTML prototype
   is the visual reference only — this file is the production port, not a copy.

   Token rule: every color/space/radius/shadow/type value is a CSS custom
   property on :root (with a [data-theme="dark"] override). No raw hex lives
   outside the two token blocks below — everything else uses var(--token),
   with color-mix() for hover/tint states so dark mode stays correct.

   Sections:
     0.  Design tokens (light)
     1.  Dark theme overrides
     2.  Base / reset layer
     3.  TopNav (header)
     4.  Layout shell (3-column grid)
     5.  LeftNav
     6.  ModeSwitch
     7.  FeedControls (sorts + view toggle)
     8.  PostCard (+ media, badges, link card, text excerpt, foot, tags)
     9.  WhyPopover
     10. RemovedCard
     11. ContextPanel (right rail)
     12. Composer modal
     13. PostDetail + OC attribution banner + comments
     14. GalleryTile + masonry wall
     15. Viewer (full-screen flip-through)
     16. ModQueueDrawer + mod FAB
     17. Toast
     18. Responsive (≤980 shell collapse, gallery cols)
     19. Accessibility — focus-visible + reduced-motion
   ========================================================================== */


/* ==========================================================================
   0. DESIGN TOKENS — light (DESIGN.md §2 + §4). The ONLY place raw hex lives.
   ========================================================================== */
:root {
  /* --- color (DESIGN §2) --- */
  --bg:            #FBFAF7;   /* app background */
  --surface:       #FFFFFF;   /* cards, panels, drawers */
  --surface-2:     #F3F1EC;   /* insets, vote rail, inputs */
  --ink:           #1A1916;   /* primary text */
  --ink-soft:      #6B6760;   /* meta / secondary text */
  --line:          #E6E2DA;   /* borders, dividers */
  --accent:        #E8553A;   /* brand, primary action, upvote */
  --accent-soft:   #FBE7E1;   /* accent backgrounds, active nav */
  --up:            #E8553A;   /* upvote (warm) */
  --down:          #4A7FB0;   /* downvote (cool) */

  /* Fixed contrast pair for text that sits ON the accent fill (buttons,
     active mode-switch). White in both themes — not theme-swapped. */
  --on-accent:     #FFFFFF;

  /* Non-core accents used only for type/flag chips (gif, auto-flag). Not in
     the DESIGN token table — these are content/category hues, kept here so
     no component hard-codes hex. */
  --violet:        #9A5CC6;   /* gif badge, auto-flag */

  /* --- radius (DESIGN §4) --- */
  --radius:        14px;      /* cards, drawers, modals */
  --radius-sm:     9px;       /* inputs, link cards, tiles, buttons */
  --radius-pill:   999px;

  /* --- elevation (DESIGN §4) — one shared shadow + heavier for overlays --- */
  --shadow:        0 1px 2px rgba(26,25,22,.04), 0 4px 16px rgba(26,25,22,.05);
  --shadow-pop:    0 8px 30px rgba(26,25,22,.16);
  --shadow-modal:  0 20px 60px rgba(26,25,22,.30);
  --shadow-drawer: -12px 0 40px rgba(26,25,22,.18);
  --shadow-fab:    0 6px 24px rgba(26,25,22,.22);
  --scrim:         rgba(20,18,15,.50);   /* modal overlay */
  --scrim-viewer:  rgba(12,11,9,.94);    /* full-screen viewer backdrop */
  --on-media:      rgba(0,0,0,.65);      /* badge pills over imagery */

  /* --- spacing scale (DESIGN §4: 4 8 12 14 16 22) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 14px;
  --sp-5: 16px;
  --sp-6: 22px;

  /* --- type (DESIGN §3) --- */
  --font:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Space Grotesk", system-ui, sans-serif;
  /* scale, 16px base: meta .78 / body .9 / ui .875 / card-title 1.06 /
     detail-title 1.7 / app-h1 1.2 */
  --fs-meta:         .78rem;
  --fs-body:         .9rem;
  --fs-ui:           .875rem;
  --fs-card-title:   1.06rem;
  --fs-detail-title: 1.7rem;
  --fs-h1:           1.2rem;

  /* --- layout --- */
  --maxw: 1180px;
}


/* ==========================================================================
   1. DARK THEME — only the values that differ (DESIGN §2 + §4)
   ========================================================================== */
[data-theme="dark"] {
  --bg:          #131210;
  --surface:     #1D1B18;
  --surface-2:   #262320;
  --ink:         #F4F1EA;
  --ink-soft:    #A39E94;
  --line:        #322E29;
  --accent:      #FF6A4D;
  --accent-soft: #3A221C;
  --up:          #FF6A4D;
  --down:        #4A7FB0;   /* down stays cool in both themes (DESIGN §2) */

  --shadow:        0 1px 2px rgba(0,0,0,.3), 0 4px 18px rgba(0,0,0,.35);
  --shadow-pop:    0 8px 30px rgba(0,0,0,.45);
  --shadow-modal:  0 20px 60px rgba(0,0,0,.55);
  --shadow-drawer: -12px 0 40px rgba(0,0,0,.5);
  --shadow-fab:    0 6px 24px rgba(0,0,0,.5);
}


/* ==========================================================================
   2. BASE / RESET LAYER (light touch — Bootstrap owns the real reset)
   ========================================================================== */
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .25s, color .25s;
}
html { scroll-behavior: smooth; }

::selection { background: var(--accent); color: var(--on-accent); }

/* Reusable: bare button used as an interactive control (vote, nav-link, etc.) */
.glint-btn,
.icon-btn, .btn-primary, .ghost-btn, .nav-link, .vbtn, .foot-btn,
.sort, .mode-switch button, .view-toggle button, .type-tab, .mini-btn,
.c-vbtn, .c-act {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* Image default; the prototype relies on `display:block` to kill descender gap */
.media img, .tile img, .detail-media img, .c-img { display: block; max-width: 100%; }

.hidden { display: none !important; }


/* ==========================================================================
   3. TOPNAV (DESIGN §7 TopNav) — sticky, blurred
   ========================================================================== */
.glint-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
  height: 60px; display: flex; align-items: center; gap: 18px;
}
.logo {
  font-family: var(--display); font-weight: 700; font-size: 22px;
  letter-spacing: -.02em; display: flex; align-items: center; gap: var(--sp-2);
}
.logo .dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.search { flex: 1; max-width: 460px; position: relative; }
.search input {
  width: 100%; height: 38px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface-2);
  padding: 0 16px 0 38px; color: var(--ink); font-size: var(--fs-ui);
  transition: border-color .2s, background .2s;
}
.search input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.search svg { position: absolute; left: 13px; top: 11px; opacity: .5; }

.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;   /* ≥40px tap target */
  display: grid; place-items: center; color: var(--ink-soft);
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

.btn-primary {
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: var(--fs-ui);
  min-height: 40px; padding: 0 18px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 6px;
  transition: filter .15s, transform .1s;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: scale(.97); }

.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000));
  display: grid; place-items: center; color: var(--on-accent); font-weight: 600; font-size: 13px;
  flex: none;
}


/* ==========================================================================
   4. LAYOUT SHELL (DESIGN §5) — three-column grid
   ========================================================================== */
.shell {
  max-width: var(--maxw); margin: 0 auto; padding: var(--sp-6) 20px;
  display: grid; grid-template-columns: 210px 1fr 280px; gap: var(--sp-6);
}
.side-l nav, .side-r .panel { position: sticky; top: 82px; }


/* ==========================================================================
   5. LEFTNAV (DESIGN §7 LeftNav)
   ========================================================================== */
.sect-label {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-soft); padding: 0 var(--sp-3); margin-bottom: var(--sp-2);
}
.nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px var(--sp-3); border-radius: var(--radius-sm);
  font-size: var(--fs-ui); font-weight: 500; color: var(--ink-soft); margin-bottom: 2px;
  min-height: 40px;                       /* tap target */
  transition: background .15s, color .15s; width: 100%; text-align: left;
}
.nav-link:hover { background: var(--surface-2); color: var(--ink); }
.nav-link.active { background: var(--accent-soft); color: var(--accent); }
.nav-link .cdot { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.nav-divider { height: 1px; background: var(--line); margin: var(--sp-4) var(--sp-3); }


/* ==========================================================================
   6. MODESWITCH (DESIGN §7 ModeSwitch) — Communities / Gallery / Following
   ========================================================================== */
.mode-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.mode-switch { display: flex; gap: var(--sp-1); background: var(--surface-2); padding: var(--sp-1); border-radius: var(--radius-pill); }
.mode-switch button, .mode-switch a {
  padding: 7px 16px; border-radius: var(--radius-pill); font-size: .84rem; font-weight: 600;
  color: var(--ink-soft); display: flex; align-items: center; gap: 7px; min-height: 40px;
  text-decoration: none;
  transition: all .15s;
}
.mode-switch button.active, .mode-switch a.active { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }
.mode-hint { font-size: var(--fs-body); color: var(--ink-soft); margin: 0 0 var(--sp-5); }


/* ==========================================================================
   7. FEEDCONTROLS (DESIGN §7 FeedControls) — sorts + list/grid toggle
   ========================================================================== */
.feed-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.sorts { display: flex; gap: var(--sp-1); background: var(--surface-2); padding: var(--sp-1); border-radius: var(--radius-pill); }
.sort {
  padding: 6px var(--sp-4); border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; color: var(--ink-soft); min-height: 36px;
  transition: background .15s, color .15s, box-shadow .15s;
}
.sort.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

.view-toggle { margin-left: auto; display: flex; gap: var(--sp-1); background: var(--surface-2); padding: var(--sp-1); border-radius: 10px; }
.view-toggle button, .view-toggle a { width: 40px; height: 32px; border-radius: 7px; display: grid; place-items: center; color: var(--ink-soft); text-decoration: none; }
.view-toggle button.active, .view-toggle a.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }


/* ==========================================================================
   8. POSTCARD (DESIGN §6 + §7 PostCard) — adaptive list/grid card
   ========================================================================== */
.feed { display: flex; flex-direction: column; gap: var(--sp-4); }
.feed.grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

/* Bootstrap 5 also defines .card / .card-body / .card-title. Ours is a different component that
   happens to share those names, so every property Bootstrap sets must be won explicitly here —
   anything we leave to the default leaks in from Bootstrap. It bit us three ways: `flex-direction:
   column` stacked the vote rail ABOVE the body, a 1rem `.card-body` inset broke the full-bleed
   media + full-width foot divider, and a hard-coded `color` made card text unreadable in dark mode.
   Keep the marked declarations. */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s;
  display: flex;
  flex-direction: row;  /* Bootstrap .card forces column */
  color: inherit;       /* Bootstrap .card hard-codes var(--bs-body-color) — breaks dark mode */
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.feed.grid .card { flex-direction: column; }

/* vote rail — vertical in list; reflows to a horizontal bar in grid */
.vote {
  flex: none; width: 48px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-4) 0; background: var(--surface-2);
}
.feed.grid .vote { flex-direction: row; width: 100%; justify-content: flex-start; padding: 10px var(--sp-4); gap: var(--sp-2); order: 3; }
.vbtn { width: 32px; height: 32px; border-radius: var(--sp-2); display: grid; place-items: center; color: var(--ink-soft); transition: background .12s, color .12s; }
.vbtn:hover { background: var(--surface); color: var(--ink); }
/* up & down are warm-vs-cool and never both lit at once (DESIGN §2) */
.vbtn.up.on   { color: var(--up);   background: var(--accent-soft); }
.vbtn.down.on { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }
.score { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* padding:0 is deliberate — each child below pads itself (--sp-5) so .media stays full-bleed and
   .card-foot's border-top spans the whole card. Bootstrap .card-body would inject 1rem. */
.card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0; }
.card-head {
  padding: var(--sp-3) var(--sp-5) var(--sp-2); display: flex; align-items: center; gap: var(--sp-2);
  font-size: .78rem; color: var(--ink-soft); flex-wrap: wrap;
}
.ctag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.cdot-sm { width: 16px; height: 16px; border-radius: 5px; }

/* post-type chip */
.ctype {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 6px; background: var(--surface-2); color: var(--ink-soft);
}
.ctype.gif   { color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, transparent); }
.ctype.album { color: var(--accent); background: var(--accent-soft); }

/* titles use --ink, not accent (DESIGN §3) */
.card-title {
  font-family: var(--display); font-weight: 600; font-size: var(--fs-card-title); line-height: 1.3;
  padding: 0 var(--sp-5) 10px; letter-spacing: -.01em;
  margin: 0;  /* Bootstrap .card-title adds margin-bottom; our spacing is the padding above */
}
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: var(--accent); }

/* media (a post is an ordered container of MediaItems — single image == album of one) */
.media { position: relative; background: var(--surface-2); }
.media img { width: 100%; object-fit: cover; max-height: 480px; }
.feed.grid .media img { max-height: 300px; }
.album-badge {
  position: absolute; top: 10px; right: 10px; background: var(--on-media); color: #fff;
  font-size: 12px; font-weight: 600; padding: var(--sp-1) 9px; border-radius: var(--sp-2);
  display: flex; align-items: center; gap: 5px; backdrop-filter: blur(4px);
}

.linkcard {
  margin: 0 var(--sp-5) var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: 13px; color: var(--ink-soft); display: flex; gap: 10px; align-items: center;
}
.linkcard b { color: var(--ink); font-weight: 600; }

.text-excerpt { padding: 0 var(--sp-5) var(--sp-3); color: var(--ink-soft); font-size: .9rem; }

.card-foot {
  padding: 10px var(--sp-5); display: flex; align-items: center; gap: 6px;
  border-top: 1px solid var(--line); flex-wrap: wrap;
}
.foot-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--sp-2);
  font-size: 13px; font-weight: 500; color: var(--ink-soft); min-height: 36px;
  transition: background .15s, color .15s;
}
.foot-btn:hover { background: var(--surface-2); color: var(--ink); }

.tags { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.tag {
  font-size: 11.5px; font-weight: 500; color: var(--ink-soft); background: var(--surface-2);
  padding: 3px 9px; border-radius: var(--radius-pill); transition: color .15s;
}
.tag:hover { color: var(--accent); }


/* ==========================================================================
   9. WHYPOPOVER (DESIGN §7 WhyPopover) — "Why am I seeing this?"
   ========================================================================== */
.why { position: relative; }
.why-pop {
  position: absolute; z-index: 30; top: 26px; right: 0; width: 270px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop); padding: var(--sp-4); font-size: 12.5px; display: none;
}
.why-pop.open { display: block; animation: glint-pop .15s ease; }
.why-pop h4 { font-family: var(--display); font-size: 12.5px; margin-bottom: 9px; display: flex; align-items: center; gap: 6px; }
.why-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.why-row .lbl { width: 56px; color: var(--ink-soft); flex: none; }
.why-bar { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.why-bar span { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.why-foot { color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: var(--sp-2); margin-top: 2px; line-height: 1.45; }


/* ==========================================================================
   10. REMOVEDCARD (DESIGN §7 RemovedCard) — no silent removals
   ========================================================================== */
.removed-card {
  border: 1px dashed color-mix(in srgb, var(--down) 50%, var(--line));
  background: color-mix(in srgb, var(--down) 6%, var(--surface));
  border-radius: var(--radius); padding: var(--sp-5) 18px; box-shadow: var(--shadow);
}
.removed-card .rc-head { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: var(--fs-ui); margin-bottom: 6px; }
.removed-card .rc-head svg { color: var(--down); }
.removed-card .rc-reason { font-size: 13.5px; color: var(--ink-soft); margin-bottom: var(--sp-1); }
.removed-card .rc-reason b { color: var(--ink); }
.removed-card .rc-actions { display: flex; gap: var(--sp-2); margin-top: 10px; }

.mini-btn {
  font-size: 12.5px; font-weight: 600; padding: 6px var(--sp-3); border-radius: var(--sp-2);
  border: 1px solid var(--line); color: var(--ink-soft); background: var(--surface); min-height: 36px;
  transition: border-color .15s, color .15s;
}
.mini-btn:hover { border-color: var(--accent); color: var(--accent); }
.mini-btn.solid { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }


/* ==========================================================================
   11. CONTEXTPANEL (DESIGN §7 ContextPanel) — right rail
   ========================================================================== */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-5); box-shadow: var(--shadow); margin-bottom: var(--sp-5);
}
.panel h3 { font-family: var(--display); font-size: var(--fs-ui); margin-bottom: var(--sp-3); }
.panel-text { font-size: 13px; color: var(--ink-soft); margin-bottom: var(--sp-3); }

.trend { display: flex; gap: 10px; padding: var(--sp-2) 0; font-size: 13px; align-items: center; }
.trend .rank { font-family: var(--display); font-weight: 700; color: var(--ink-soft); width: 16px; }
.trend .t-meta { color: var(--ink-soft); font-size: 11.5px; }
.trend b { font-weight: 600; }

.rule-list { font-size: 12.5px; color: var(--ink-soft); list-style: none; padding: 0; margin: 0; }
.rule-list li { padding: 7px 0; border-bottom: 1px solid var(--line); display: flex; gap: var(--sp-2); }
.rule-list li:last-child { border: none; }
.rule-list .n { color: var(--accent); font-weight: 700; }


/* ==========================================================================
   12. COMPOSER MODAL (DESIGN §7 Composer)
   ========================================================================== */
.overlay {
  position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(4px);
  z-index: 100; display: none; align-items: flex-start; justify-content: center;
  padding: 40px var(--sp-5); overflow-y: auto;
}
.overlay.open { display: flex; }
.modal {
  background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 600px;
  box-shadow: var(--shadow-modal); border: 1px solid var(--line); animation: glint-pop .2s ease;
}
.modal-head { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.modal-head h2 { font-family: var(--display); font-size: 18px; }
.modal-body { padding: 20px; }

.type-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.type-tab {
  padding: 9px var(--sp-4); border-radius: 10px; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); background: var(--surface-2); display: flex; align-items: center; gap: 7px;
  min-height: 40px; transition: background .15s, color .15s;
}
.type-tab.active { background: var(--accent); color: var(--on-accent); }

.field { margin-bottom: var(--sp-4); }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=url], .field input[type=search], .field textarea, .field select {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
  padding: 11px 13px; font-size: var(--fs-ui); color: var(--ink); font-family: inherit;
  transition: border-color .15s, background .15s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.field textarea { resize: vertical; min-height: 80px; }

.dropzone {
  border: 2px dashed var(--line); border-radius: var(--radius); padding: 34px; text-align: center;
  color: var(--ink-soft); font-size: var(--fs-ui); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }
.dropzone svg { margin-bottom: var(--sp-2); opacity: .6; }
.dropzone b { color: var(--ink); }

.chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--sp-2); }
.chip { font-size: 12px; padding: var(--sp-1) 10px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.modal-foot { padding: var(--sp-5) 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.oc-check { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 7px; cursor: pointer; }
.ghost-btn { color: var(--ink-soft); font-weight: 600; font-size: var(--fs-ui); padding: 9px var(--sp-4); border-radius: var(--radius-sm); min-height: 40px; }
.ghost-btn:hover { background: var(--surface-2); }


/* ==========================================================================
   13. POSTDETAIL + OC ATTRIBUTION BANNER + COMMENTS (DESIGN §7 + §8)
   ========================================================================== */
.detail-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 90; display: none; overflow-y: auto; }
.detail-overlay.open { display: block; }
.detail-bar {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); padding: var(--sp-3) 20px;
  display: flex; align-items: center; gap: var(--sp-3);
}
.detail-wrap { max-width: 760px; margin: 0 auto; padding: 24px 20px 80px; }
.detail-meta { font-size: 12.5px; color: var(--ink-soft); }
.detail-meta b { color: var(--ink); }
.detail-title { font-family: var(--display); font-size: var(--fs-detail-title); line-height: 1.2; letter-spacing: -.02em; margin: 10px 0 var(--sp-5); }
.detail-media img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
.gallery-strip { display: flex; flex-direction: column; gap: 10px; }
.gallery-cap { font-size: 13px; color: var(--ink-soft); padding: 2px 2px var(--sp-2); }

.detail-actions {
  display: flex; gap: var(--sp-2); align-items: center; margin: 18px 0; padding: var(--sp-3) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.pill-vote { display: flex; align-items: center; gap: var(--sp-1); background: var(--surface-2); border-radius: var(--radius-pill); padding: var(--sp-1); }

/* --- §8 signature element: OC attribution banner (also used as .mod-note) --- */
.oc-banner, .mod-note {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4);
  font-size: 13px; color: var(--ink); display: flex; gap: 10px; margin-bottom: var(--sp-5);
}
.oc-banner svg, .mod-note svg { flex: none; color: var(--accent); margin-top: 1px; }
.oc-banner b, .mod-note b { font-weight: 600; }

/* comments */
.comment-composer { display: flex; gap: 10px; margin: var(--sp-6) 0; }
.comment-composer textarea {
  flex: 1; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
  padding: 11px 13px; font-family: inherit; font-size: var(--fs-ui); color: var(--ink); resize: vertical; min-height: 44px;
}
.comment-composer textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }

.comments h3 { font-family: var(--display); font-size: var(--fs-h1); margin-bottom: var(--sp-1); }
.thread { margin-top: 18px; }
.comment { display: flex; gap: 10px; margin-bottom: var(--sp-4); }
.comment .col { display: flex; flex-direction: column; align-items: center; flex: none; }
.comment .line { width: 2px; flex: 1; background: var(--line); margin-top: 6px; border-radius: 2px; }
.c-body { flex: 1; min-width: 0; }
.c-meta { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 3px; }
.c-meta b { color: var(--ink); font-weight: 600; }
.c-meta .op { color: var(--accent); font-weight: 700; font-size: 10px; border: 1px solid var(--accent); padding: 0 5px; border-radius: 5px; margin-left: var(--sp-1); }
.c-text { font-size: .9rem; margin-bottom: 6px; }
.c-actions { display: flex; gap: var(--sp-1); align-items: center; font-size: 12.5px; color: var(--ink-soft); }
.c-vbtn { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 3px 7px; border-radius: 7px; font-weight: 600; }
.c-vbtn:hover { background: var(--surface-2); color: var(--ink); }
.c-act { padding: 3px var(--sp-2); border-radius: 7px; font-weight: 500; }
.c-act:hover { background: var(--surface-2); color: var(--ink); }
.nested { margin-left: 30px; }
.c-img { border-radius: var(--radius-sm); border: 1px solid var(--line); margin: var(--sp-1) 0 var(--sp-2); max-width: 220px; }


/* ==========================================================================
   14. GALLERYTILE + MASONRY WALL (DESIGN §6 Gallery + §7 GalleryTile)
   ========================================================================== */
.gallery-wall { columns: 3; column-gap: var(--sp-3); }
.tile {
  break-inside: avoid; margin-bottom: var(--sp-3); position: relative;
  border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); display: block;
}
.tile img { width: 100%; display: block; transition: transform .3s ease; }
.tile:hover img { transform: scale(1.04); }
.tile .tile-over {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,18,15,.78) 0%, rgba(20,18,15,0) 45%);
  opacity: 0; transition: opacity .2s;
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-3);
}
.tile:hover .tile-over, .tile:focus-visible .tile-over { opacity: 1; }
.tile .tile-title { color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.tile .tile-meta { color: rgba(255,255,255,.8); font-size: 11.5px; display: flex; gap: 10px; margin-top: var(--sp-1); }
.tile .tile-badge {
  position: absolute; top: 9px; right: 9px; background: rgba(0,0,0,.6); color: #fff;
  font-size: 11px; font-weight: 600; padding: 3px var(--sp-2); border-radius: 7px;
  display: flex; align-items: center; gap: var(--sp-1); backdrop-filter: blur(4px);
}


/* ==========================================================================
   15. VIEWER (DESIGN §6 + §7 Viewer) — full-screen flip-through
   ========================================================================== */
.viewer { position: fixed; inset: 0; z-index: 120; background: var(--scrim-viewer); display: none; }
.viewer.open { display: grid; grid-template-columns: 1fr 360px; }
.v-stage { position: relative; display: grid; place-items: center; padding: 30px; min-width: 0; }
.v-stage img { max-width: 100%; max-height: calc(100vh - 60px); border-radius: var(--sp-2); object-fit: contain; box-shadow: 0 10px 50px rgba(0,0,0,.5); }

.v-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center;
  backdrop-filter: blur(6px); transition: background .15s;
}
.v-nav:hover { background: rgba(255,255,255,.24); }
.v-prev { left: 18px; } .v-next { right: 18px; }
.v-close {
  position: absolute; top: 16px; left: 18px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center;
  backdrop-filter: blur(6px); z-index: 3;
}
.v-close:hover { background: rgba(255,255,255,.24); }
.v-counter { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.v-side { background: var(--surface); border-left: 1px solid var(--line); overflow-y: auto; padding: var(--sp-6); }
.v-side .v-comm { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
.v-side h2 { font-family: var(--display); font-size: 19px; line-height: 1.25; margin-bottom: var(--sp-4); }
.v-vote { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.v-vote .pill-vote { background: var(--surface-2); }
.v-side .v-comments-head { font-family: var(--display); font-size: var(--fs-ui); margin: 6px 0 var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.v-hint { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.55); font-size: 12px; display: flex; gap: var(--sp-4); }
.v-hint kbd { background: rgba(255,255,255,.14); border-radius: 5px; padding: 1px 7px; font-family: var(--font); font-size: 11px; }


/* ==========================================================================
   16. MODQUEUEDRAWER + MOD FAB (DESIGN §7 ModQueueDrawer)
   ========================================================================== */
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: 420px; max-width: 92vw;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-drawer);
  z-index: 110; transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer-head { padding: var(--sp-5) 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.drawer-head h2 { font-family: var(--display); font-size: 17px; }
.badge-count { background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; padding: 1px var(--sp-2); border-radius: var(--radius-pill); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--sp-4) 18px; }

.queue-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-3); margin-bottom: var(--sp-3); }
.qi-meta { font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.qi-flag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 6px; }
.qi-flag.auto { color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, transparent); }
.qi-flag.user { color: var(--accent); background: var(--accent-soft); }
.qi-text { font-size: 13.5px; margin-bottom: 10px; }
.qi-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.reason-select { width: 100%; margin-bottom: var(--sp-2); border: 1px solid var(--line); border-radius: var(--sp-2); background: var(--surface-2); padding: var(--sp-2) 10px; font-size: 13px; color: var(--ink); font-family: inherit; }
.queue-note { font-size: 12px; color: var(--ink-soft); text-align: center; padding: var(--sp-2) 0; }

.mod-fab {
  position: fixed; bottom: 22px; right: 22px; z-index: 60;
  background: var(--ink); color: var(--bg); border-radius: var(--radius-pill);
  padding: var(--sp-3) 18px; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: var(--sp-2); box-shadow: var(--shadow-fab);
}
.mod-fab .badge-count { background: var(--accent); }


/* ==========================================================================
   17. TOAST (DESIGN §7 Toast) — transient confirmation pill, bottom-center
   ========================================================================== */
.float-note {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 500;
  padding: 10px 18px; border-radius: var(--radius-pill); z-index: 200;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
}
.float-note.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }


/* ==========================================================================
   SHARED ANIMATION
   ========================================================================== */
@keyframes glint-pop { from { transform: translateY(12px) scale(.98); opacity: 0; } }


/* ==========================================================================
   18. RESPONSIVE (DESIGN §5 breakpoint + §6 gallery cols + §10 quality floor)
   ========================================================================== */
/* ≤980px: collapse 3-col shell to single column, hide both side rails,
   drop gallery 3→2 columns. No horizontal scroll. */
@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }
  .side-l, .side-r { display: none; }
  .gallery-wall { columns: 2; }
}
/* viewer side rail hidden on narrow screens (image-first) */
@media (max-width: 820px) {
  .viewer.open { grid-template-columns: 1fr; }
  .viewer .v-side { display: none; }
}
/* feed grid back to one column on phones */
@media (max-width: 620px) {
  .feed.grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gallery-wall { columns: 2; column-gap: var(--sp-2); }
}


/* ==========================================================================
   19. ACCESSIBILITY (DESIGN §9 motion + §10 quality floor)
   ========================================================================== */
/* Visible keyboard focus on every interactive element, using the accent.
   :focus-visible only — pointer clicks stay clean. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.nav-link:focus-visible,
.vbtn:focus-visible,
.foot-btn:focus-visible,
.tag:focus-visible,
.tile:focus-visible,
.sort:focus-visible,
.mode-switch button:focus-visible,
.view-toggle button:focus-visible,
.type-tab:focus-visible,
.mini-btn:focus-visible,
.icon-btn:focus-visible,
.v-nav:focus-visible,
.v-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  /* Bootstrap's .nav-link:focus-visible adds a blue box-shadow glow; our ring is the outline. */
  box-shadow: none;
  border-radius: var(--radius-sm);
}
/* On dark image overlays the offset outline reads better tight to the control */
.tile:focus-visible, .v-nav:focus-visible, .v-close:focus-visible { outline-offset: -2px; }

/* Reduced motion — disable transforms/transitions/animations (DESIGN §9/§10) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .tile:hover img,
  .btn-primary:active,
  .float-note.show { transform: none !important; }
  .float-note.show { transform: translateX(-50%) !important; }
}