/* CitriLime v4 "slick" design pass — v5.0 ("bleh" fix: the muddy soft
 * green/red radial washes in the page background were cheapening everything
 * sitting on them. v5 goes NEUTRAL — deep charcoal with a vignette and one
 * restrained accent bloom per theme — plus a real hairline rule under the
 * header and quieter, ruled section labels. Cards stay; the stage changes.)
 * v4.1 kept: film grain (--grain knob) + edge lighting.
 * Loaded AFTER the shared v1 CSS + shell v2 CSS on every page; this file IS
 * the design iteration, so reviewing/reverting it is one <link> per page.
 *
 * The language (from the credits strips the owner signed off on):
 *   - finishes, not blocks: hairline ///// pattern over slick dark gradients,
 *     accents mixed in at 4–10% via color-mix — never solid colored slabs;
 *   - controls are QUIET: hairline borders, transparent fills, accent-colored
 *     text; hover brightens the hairline, nothing lights up like 2010 Steam;
 *   - gears/settings affordances are glyphs, not buttons;
 *   - identity is SQUARE (no discord-round) and belongs to the RIGHT edge —
 *     the chip is the handle of the right "you" drawer.
 */

/* ── -1. The stage: neutral charcoal, vignette, ONE accent bloom ──────────
 * Overrides the shell's green/red radial soup. The accent shows up as a
 * single faint bloom from the top, desaturated, and the corners fall off
 * into a vignette — content reads brighter against a calmer floor. */
body{
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(161,217,81,.07), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, transparent 40%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, #101110 0%, #0b0c0b 40%, #080908 100%);
}
body.theme-nmrih,
body.nmrih-page{
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(189,23,44,.08), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, transparent 40%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #121011 0%, #0c0a0b 40%, #090808 100%);
}
/* v5.1: hovering the NMRiH card on the landing swaps the WHOLE shell to the
 * red theme — the old v17 :has() rule did this but our v5 background
 * override outranked it. Re-declared here against the v5 stage, vars and
 * wordmark included. */
body:has(.server-card.nmrih:hover){
  --shell-accent:#bd172c;--shell-accent-soft:#ff4056;--shell-accent-rgb:189,23,44;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(189,23,44,.08), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, transparent 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, #121011 0%, #0c0a0b 40%, #090808 100%);
}
body:has(.server-card.nmrih:hover) .wordmark .wm-accent{color:#bd172c}
body:has(.server-card.nmrih:hover) .wordmark .wm-white{
  background:linear-gradient(180deg, #eceae4 0%, #cfccc4 46%, #a8a49b 52%, #dedbd3 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 3px 0 rgba(0,0,0,.58));
}

/* v5.1 typography: the big type read BLAND because it was flat single-color
 * fills. Ivory "ink" gradient clipped into the letters (subtler cousin of
 * the NMRiH metal) + a hard drop gives it print weight everywhere. */
.wordmark .wm-white,
body.theme-nmrih .wordmark .wm-white,
body.nmrih-page .wordmark .wm-white,
.server-card .title{
  /* v5.2: clipped-gradient text can't paint outside its box — tight-tracked
   * glyph tips were getting shaved. Pad the paint box, pull margins back. */
  padding-inline:.08em;margin-inline:-.08em;
}
/* v5.3: the glyph padding widened the wordmark past its container — cap it
 * and forbid the wrap. */
.brand h1.wordmark{font-size:clamp(42px,6.2vw,74px);white-space:nowrap}
.wordmark .wm-white{
  background:linear-gradient(180deg, #fbf9f2 0%, #ece8dd 55%, #cfc9ba 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 3px 0 rgba(0,0,0,.58));
}
.server-card .title{
  background:linear-gradient(180deg, #fdfbf4 0%, #ece7da 58%, #c9c2b1 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.62));
}
/* v5.2: accent letter transitions in step with the card's .42s open, and a
 * touch of underglow beneath the accent word (per theme color). */
.wordmark .wm-accent{
  transition:color .42s ease,text-shadow .42s ease;
  text-shadow:0 3px 0 rgba(0,0,0,.58), 0 10px 26px rgba(161,217,81,.38);
}
body.theme-nmrih .wordmark .wm-accent,
body.nmrih-page .wordmark .wm-accent,
body:has(.server-card.nmrih:hover) .wordmark .wm-accent{
  text-shadow:0 3px 0 rgba(0,0,0,.58), 0 10px 26px rgba(189,23,44,.42);
}
/* v5.2: the Coming Soon slots preview THEIR shell themes on hover too —
 * gold (TF2 slot) and blue (future slot). Pages do nothing yet by design. */
body:has(.future-server.gold:hover){
  --shell-accent:#f0c85a;--shell-accent-soft:#ffe28a;--shell-accent-rgb:240,200,90;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(240,200,90,.07), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, transparent 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, #121110 0%, #0c0b0a 40%, #090808 100%);
}
body:has(.future-server.gold:hover) .wordmark .wm-accent{
  color:#f0c85a;text-shadow:0 3px 0 rgba(0,0,0,.58), 0 10px 26px rgba(240,200,90,.42);
}
body:has(.future-server.blue:hover){
  --shell-accent:#5ab7ff;--shell-accent-soft:#a8dcff;--shell-accent-rgb:90,183,255;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(90,183,255,.07), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, transparent 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, #101112 0%, #0b0c0d 40%, #080809 100%);
}
body:has(.future-server.blue:hover) .wordmark .wm-accent{
  color:#5ab7ff;text-shadow:0 3px 0 rgba(0,0,0,.58), 0 10px 26px rgba(90,183,255,.42);
}

/* Hairline rule under the whole header, accent fading out to the right —
 * gives the topbar a shelf to sit on instead of floating. */
.citrilime-shell .topbar{
  padding-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.07);
  position:relative;
}
.citrilime-shell .topbar::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:38%;
  background:linear-gradient(90deg, rgba(var(--shell-accent-rgb),.55), transparent);
}
/* Section labels get flanking rule lines — quieter than floating caps. */
.section-label{display:flex;align-items:center;gap:12px;color:#8b9482}
body.theme-nmrih .section-label,body.nmrih-page .section-label{color:#a39289}
.section-label::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.10), transparent);
}
.ql-bar .section-label::after{max-width:140px}

/* ── 0. Film grain over the whole page ────────────────────────────────────
 * Fixed full-viewport noise (SVG turbulence, tiled), sitting above all UI at
 * very low opacity — the classic de-plastic trick. THE knob: --grain.
 * Kill it entirely with --grain:0. */
:root{--grain:.05}
body::after{
  content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
/* A hair more edge light on the strip surfaces so they stop reading flat —
 * brighter top bevel + a faint cool sheen swept across the finish. */
.server-card,.v4-panel,.lb-board{
  box-shadow:0 18px 40px rgba(0,0,0,.36),
             inset 0 1px 0 rgba(255,255,255,.08),
             inset 0 -1px 0 rgba(0,0,0,.45);
}

/* ── 1. Quiet controls: kill the blocky green/red slabs ──────────────────── */
.top-action, .hub-link, .btn, button.btn{
  border:1px solid rgba(255,255,255,.14);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(23,23,25,.92), rgba(10,10,11,.94));
  color:#c5f079;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  text-shadow:none;
  border-radius:3px;
  transition:border-color .14s ease,color .14s ease;
}
.top-action:hover, .hub-link:hover, .btn:hover{
  border-color:rgba(161,217,81,.55);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, color-mix(in srgb, #a1d951 6%, rgba(23,23,25,.94)), rgba(10,10,11,.96));
  color:#e4f7c5;
  filter:none;
}
.btn.red{
  border-color:rgba(255,255,255,.14);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(23,23,25,.92), rgba(10,10,11,.94));
  color:#e8848f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.btn.red:hover{
  border-color:rgba(189,23,44,.6);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, color-mix(in srgb, #bd172c 8%, rgba(23,23,25,.94)), rgba(10,10,11,.96));
  color:#f2aab2;
}
.top-icon{
  border:1px solid rgba(255,255,255,.14);border-radius:3px;
  background:linear-gradient(180deg, rgba(23,23,25,.9), rgba(10,10,11,.92));
  box-shadow:none;color:#9fae90;
}
.top-icon:hover,.top-icon:focus-visible{
  transform:none;border-color:rgba(var(--shell-accent-rgb),.55);
  background:linear-gradient(180deg, rgba(23,23,25,.94), rgba(10,10,11,.96));
  color:#e4f7c5;box-shadow:none;
}
.lb-tab{border-radius:3px}
.lb-tab.active{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, color-mix(in srgb, #bd172c 14%, rgba(23,23,25,.94)), rgba(10,10,11,.96));
}

/* ── 2. Landing server cards join the strip language ─────────────────────── */
.server-card{
  border:1px solid rgba(255,255,255,.105);
  border-left:3px solid var(--server-accent, rgba(143,0,24,.9));
  border-radius:4px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 42%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 1px, transparent 1px 7px),
    linear-gradient(180deg,
      color-mix(in srgb, var(--server-accent,#bd172c) 6%, rgba(23,23,25,.97)),
      color-mix(in srgb, var(--server-accent,#bd172c) 3%, rgba(10,10,11,.98)));
  box-shadow:0 18px 40px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.045);
}
.server-card:hover{
  border-color:rgba(255,255,255,.2);
  border-left-color:var(--server-accent,#bd172c);
  box-shadow:0 18px 52px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.05);
}
.future-server{
  background:
    linear-gradient(90deg, rgba(255,255,255,.02), transparent 42%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.010) 0 1px, transparent 1px 7px),
    linear-gradient(180deg,
      color-mix(in srgb, var(--server-accent,#f0c85a) 4%, rgba(23,23,25,.95)),
      color-mix(in srgb, var(--server-accent,#f0c85a) 2%, rgba(10,10,11,.97)));
}
.title{text-shadow:0 2px 0 rgba(0,0,0,.6)}

/* ── 3. SQUARE identity, tied to the right drawer ─────────────────────────
 * The chip is the drawer's handle: same finish, square avatar, and when the
 * drawer is open (body.rd-open) the chip's accent hairline "connects" to it. */
.identity-chip{
  border-radius:0;
  border:1px solid rgba(255,255,255,.16);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(23,23,25,.94), rgba(10,10,11,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .14s ease,color .14s ease;
}
.identity-chip:hover{transform:none;border-color:rgba(var(--shell-accent-rgb),.6);color:#fff}
.cl-logged-in .identity-chip{border-color:rgba(255,255,255,.2)}
.chip-avatar{border-radius:0;width:28px;height:28px;border-color:rgba(255,255,255,.2)}
body.rd-open .identity-chip{
  border-color:rgba(var(--shell-accent-rgb),.7);
  box-shadow:6px 0 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
/* Right drawer head = your identity, square avatar, same strip finish. */
.right-drawer .drawer-head{
  align-items:center;gap:10px;
  padding:10px 10px 12px;margin:-6px -6px 14px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(23,23,25,.6), transparent);
}
.rd-head-avatar{
  width:36px;height:36px;flex:none;border:1px solid rgba(255,255,255,.22);
  background-color:rgba(0,0,0,.4);background-size:cover;background-position:center;
  display:grid;place-items:center;color:#c5f079;font:900 12px var(--font-ui);
}
.right-drawer .drawer-head strong{margin-right:auto}

/* ── 4. Gears are glyphs, not buttons ─────────────────────────────────────
 * Settings affordances read as quiet marks in the corner: gray at rest,
 * accent on hover, never boxed. */
.row-gear{
  border:0;background:transparent;box-shadow:none;
  width:auto;height:auto;padding:4px;font-size:17px;
  color:rgba(255,255,255,.34);
  transition:color .14s ease,transform .3s ease;
}
.row-gear:hover{border:0;background:transparent;color:var(--cs-accent,#a1d951);transform:rotate(30deg)}
/* v5.2: Customize is JUST the gear — no word. Gray at rest; active = green
 * and turned a notch. Never persistent across pages (page state only). */
.pp-customize{
  border:0!important;background:transparent!important;box-shadow:none!important;
  padding:4px 6px;color:rgba(255,255,255,.38);cursor:pointer;
  font:400 20px/1 var(--font-ui);
  transition:color .15s ease,transform .3s ease;
}
.pp-customize::before{content:"⚙"}
.pp-customize:hover{color:rgba(255,255,255,.7)!important}
body.pp-edit .pp-customize{color:#a1d951!important;transform:rotate(45deg)}

/* ── 5. Shared panel finish for new pages ─────────────────────────────────── */
.v4-panel{
  border:1px solid rgba(255,255,255,.105);border-radius:4px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 42%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(23,23,25,.96), rgba(10,10,11,.98));
  box-shadow:0 18px 40px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.045);
}
.v4-input{
  border:1px solid rgba(255,255,255,.16);border-radius:3px;
  background:rgba(0,0,0,.4);color:#f2f6ea;
  padding:9px 12px;font:700 13px var(--font-ui);outline:none;
}
.v4-input:focus{border-color:rgba(var(--shell-accent-rgb),.55)}