/* ============================================================
   Mysterious Matters — depth.css

   The "dull and plain" problem is measurable, not a matter of taste.
   A .panel resolves to roughly #131a2c over a #090c15 background —
   a contrast ratio of 1.13:1. That is effectively invisible as a
   surface, so every card on the page is being held together by a
   15%-opacity hairline border and nothing else. Everything sits on
   one flat plane.

   The fix is a real elevation scale. Three distinct surface levels
   instead of one, so the eye can tell a card from the page it sits
   on without having to find its border first.

   Load after app.css.
   ============================================================ */

:root {
  /* Computed rather than eyeballed. The old .panel resolved to
     ~1.13:1 against the page, which is below the point where an
     edge is perceptible without a border. Each step below is a
     1.28-1.35x lift on the one under it -- a real elevation scale.
     Body text stays at 12.3:1 on surface-1, and even --dim clears
     4:1, so nothing gets harder to read in exchange. */
  --surface-1: #1c263e;   /* cards, panels        - 1.30:1 vs page */
  --surface-2: #29375a;   /* raised area in card  - 1.28:1 vs s-1 */
  --surface-3: #374a79;   /* hover / active       - 1.35:1 vs s-2 */
  --edge:      rgba(150, 165, 200, .22);
  --edge-soft: rgba(150, 165, 200, .12);
}

/* ---- Panels actually read as surfaces now ---- */
.panel,
.glass-module,
.glass-category,
.glass-welcome {
  background: var(--surface-1);
  border-color: var(--edge);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .03) inset,   /* top highlight — the thing that makes a surface look lit */
    0 12px 32px rgba(0, 0, 0, .35);
}

/* Section headers inside a card sit one step up, so a card has
   internal structure instead of being one undifferentiated block. */
.module-head,
.glass-category-head,
.acp-block-head {
  background: var(--surface-2);
  border-bottom: 1px solid var(--edge-soft);
}

/* ---- Forum cards: give the whole row a hover target ---- */
.glass-forum-card {
  transition: background .16s ease, box-shadow .16s ease;
}
.glass-forum-card:hover {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--teal);
}

/* The category strip gets a coloured spine, so scanning the index
   reads as grouped sections rather than a uniform grid of boxes. */
.glass-category {
  overflow: hidden;
  border-left: 3px solid rgba(95, 208, 207, .5);
}

/* ---- Thread rows ---- */
/* In the board view the replies/views block was claiming a large
   share of the row width to display two short numbers, which is
   what makes a board with one thread look mostly empty. */
.thread-row {
  transition: background .16s ease;
}
.thread-row:hover { background: var(--surface-2); }

.thread-row .count,
.thread-row .views {
  min-width: 0;
}

/* ---- Zero values ----
   A brand-new forum was prominently displaying "0 REPLIES",
   "0 KARMA", "0 WATS" in large type. Rendering zeros at full
   strength advertises emptiness; dimming them lets the eye skip
   past to what's actually there. */
.userstats dd.is-zero,
.thread-row .count.is-zero b,
.thread-row .views.is-zero b {
  color: var(--dim);
  font-weight: 400;
  opacity: .55;
}

/* ---- Post cards ---- */
.post {
  background: var(--surface-1);
  border-color: var(--edge);
}
.userbox {
  background: linear-gradient(180deg, var(--surface-2), transparent 65%);
  border-right: 1px solid var(--edge-soft);
}

/* The reaction row was a bare strip with a tiny italic note at one
   end and a lone Reply link at the other, separated by a lot of
   nothing. Give it a surface so it reads as the post's footer. */
.postfoot {
  background: var(--surface-2);
  border-top: 1px solid var(--edge-soft);
}
.reaction-empty { opacity: .7; }

/* ---- Buttons get a little more presence ---- */
.btn {
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary {
  box-shadow: 0 4px 14px rgba(232, 180, 90, .22);
}
.btn.primary:hover {
  box-shadow: 0 6px 20px rgba(232, 180, 90, .3);
}

/* ---- Empty states ----
   Four identical "No discussions yet" strips across one screen read
   as broken rather than new. Softening them and making the action
   the brightest thing in the row turns each into an invitation. */
.empty-latest {
  opacity: .75;
  font-size: 13px;
}
.empty-latest a {
  opacity: 1;
  color: var(--teal2);
}

/* ---- Board header ---- */
/* The hero block on a board page is a large flat rectangle. A soft
   directional wash gives it depth without adding any new colour. */
.glass-welcome,
.board-hero {
  position: relative;
  overflow: hidden;
}
.glass-welcome::after,
.board-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 140% at 100% 0%, rgba(95, 208, 207, .07), transparent 60%);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .glass-forum-card:hover,
  .thread-row:hover { transform: none; }
}