/* Royale Noir: the dark theme. Loaded after desktop.css on every page and
   active when <html data-theme="noir"> (set by assets/theme.js).
   Chrome follows the 2005 Royale Noir XP theme (black glossy title bars and
   taskbar); window contents are dark too, which the original theme wasn't. */

html[data-theme="noir"] {
  color-scheme: dark;
  --n-bg: #2b2b2b;        /* window body (Luna #ece9d8) */
  --n-panel: #1e1e1e;     /* lists, panes, fieldsets (Luna white) */
  --n-raise: #383838;     /* headers, column heads, toolbars */
  --n-line: #4d4d4d;      /* borders */
  --n-text: #e6e6e6;
  --n-dim: #b4b4b4;       /* hints, secondary text */
  --n-link: #8ab4ff;
  --n-head: #a8c7ff;      /* headings (Luna #1a3d7a) */
  --n-hover: #33415a;     /* hover rows */
  --select: #316ac5;
  --sky-top: #070d1c;
  --sky-bottom: #1b2a4a;
  --hill: #16311c;
  --hill-light: #22462a;
}
html[data-theme="noir"] body.desktop { color: var(--n-text); }
html[data-theme="noir"] ::selection { background: #2267cb; color: #fff; }

/* ---- scrollbars ---------------------------------------------------------- */
html[data-theme="noir"] * { scrollbar-color: #5a5a5a #1a1a1a; }
html[data-theme="noir"] ::-webkit-scrollbar { width: 16px; height: 16px; background: #1a1a1a; }
html[data-theme="noir"] ::-webkit-scrollbar-track, html[data-theme="noir"] ::-webkit-scrollbar-track:vertical, html[data-theme="noir"] ::-webkit-scrollbar-track:horizontal { background: #1a1a1a; background-image: none; }
html[data-theme="noir"] ::-webkit-scrollbar-thumb, html[data-theme="noir"] ::-webkit-scrollbar-thumb:vertical, html[data-theme="noir"] ::-webkit-scrollbar-thumb:horizontal {
  background: linear-gradient(90deg, #5c5c5c, #444); background-image: linear-gradient(90deg, #5c5c5c, #444);
  border: 1px solid #222; border-radius: 2px; box-shadow: inset 1px 1px #777;
}
html[data-theme="noir"] ::-webkit-scrollbar-button { display: none; }
html[data-theme="noir"] ::-webkit-scrollbar-corner { background: #1a1a1a; }

/* ---- windows: Royale Noir chrome ---------------------------------------- */
html[data-theme="noir"] .window {
  color: var(--n-text);
  background: var(--n-bg);
  box-shadow: inset -1px -1px #000, inset 1px 1px #3a3a3a, inset -2px -2px #111, inset 2px 2px #262626, inset -3px -3px #1a1a1a, inset 3px 3px #1a1a1a;
}
html[data-theme="noir"] .title-bar {
  background: linear-gradient(180deg, #6a6a6a, #2a2a2a 9%, #161616 45%, #0c0c0c 88%, #1c1c1c 94%, #000);
  border-color: #000;
}
html[data-theme="noir"] .window.app:not(.active) .title-bar { background: linear-gradient(180deg, #5a5a5a, #3a3a3a 9%, #333 45%, #2c2c2c 90%, #222); }
html[data-theme="noir"] .window.app:not(.active) .title-bar-text { color: #b8b8b8; }
html[data-theme="noir"] .title-bar-controls button { background-color: #1a1a1a; }
html[data-theme="noir"] .title-bar-controls button:not([aria-label=Close]) { filter: grayscale(1) brightness(.62) contrast(1.4); }
html[data-theme="noir"] body.standalone .title-bar-controls .to-desktop { color: #fff; }

/* ---- controls ------------------------------------------------------------ */
html[data-theme="noir"] button, html[data-theme="noir"] a.button {
  color: var(--n-text);
  border-color: #0d0d0d;
  background: linear-gradient(180deg, #5a5a5a, #3d3d3d 86%, #2e2e2e);
}
html[data-theme="noir"] button:not(:disabled):active, html[data-theme="noir"] button:not(:disabled).active { background: linear-gradient(180deg, #252525, #333 8%, #383838 94%, #444); }
html[data-theme="noir"] button:disabled { color: #808080; text-shadow: none; }
html[data-theme="noir"] input[type=text], html[data-theme="noir"] input[type=search], html[data-theme="noir"] input[type=email], html[data-theme="noir"] input[type=password], html[data-theme="noir"] textarea, html[data-theme="noir"] select {
  color: var(--n-text); background-color: #141414; border: 1px solid #666;
}
html[data-theme="noir"] input::placeholder { color: #9a9a9a; }
html[data-theme="noir"] select:focus { background-color: #2267cb; color: #fff; }
html[data-theme="noir"] select option { color: var(--n-text); background: #1e1e1e; }
html[data-theme="noir"] input[type=checkbox] + label::before, html[data-theme="noir"] input[type=radio] + label::before { border-color: #8a8a8a; background: linear-gradient(135deg, #2a2a2a, #101010); }
html[data-theme="noir"] input[type=range]::-webkit-slider-runnable-track { background: #555; border-color: #666; box-shadow: none; }
html[data-theme="noir"] input[type=range]::-moz-range-track { background: #555; border-color: #666; box-shadow: none; }
html[data-theme="noir"] fieldset { background: var(--n-panel); border-color: var(--n-line); }
html[data-theme="noir"] legend { color: #8fb4ff; }
html[data-theme="noir"] menu[role=tablist] button { color: #d8d8d8; border-color: #5a5a5a; background: linear-gradient(180deg, #4a4a4a, #3a3a3a 26%, #333 95%, #2e2e2e); }
html[data-theme="noir"] menu[role=tablist] button[aria-selected=true] { color: #fff; background: #2a2a2a; border-color: #5a5a5a; border-bottom-color: transparent; }
html[data-theme="noir"] [role=tabpanel] { background: linear-gradient(180deg, #2a2a2a, #252525); border-color: #5a5a5a; box-shadow: none; }

/* ---- shared content ------------------------------------------------------- */
html[data-theme="noir"] .window-body a { color: var(--n-link); }
html[data-theme="noir"] .hint { color: var(--n-dim); }
html[data-theme="noir"] .gallery-page h2, html[data-theme="noir"] .potw-post h2 { color: var(--n-head); border-bottom-color: var(--n-line); }
html[data-theme="noir"] .rule-list li::marker { color: #ff6b6b; }

/* prim of the week */
html[data-theme="noir"] .potw-now { background: linear-gradient(180deg, #2f3644, #232833); border-color: #4d5a72; }
html[data-theme="noir"] .potw-now-label { color: var(--n-head); }
html[data-theme="noir"] .potw-archive { background: var(--n-panel); border-color: var(--n-line); }
html[data-theme="noir"] .potw-cols { background: linear-gradient(180deg, #404040, #333); border-bottom-color: var(--n-line); }
html[data-theme="noir"] .potw-archive summary { background: #262c38; border-bottom-color: #3a4250; }
html[data-theme="noir"] .potw-weeks a { color: var(--n-text); }
html[data-theme="noir"] .potw-weeks li:nth-child(even) a { background: #252525; }
html[data-theme="noir"] .potw-weeks li a:hover, html[data-theme="noir"] .potw-weeks li a:focus-visible { background: var(--select); color: #fff; }
html[data-theme="noir"] .potw-weeks .n { color: var(--n-head); }
html[data-theme="noir"] .potw-weeks .d, html[data-theme="noir"] .potw-weeks .w { color: var(--n-dim); }
html[data-theme="noir"] .entrants { background: var(--n-panel); border-color: var(--n-line); }
html[data-theme="noir"] .entrants li.place-1 { background: #4a3e10; }
html[data-theme="noir"] .entrants li.place-2 { background: #3a3f46; }
html[data-theme="noir"] .entrants li.place-3 { background: #4a3322; }
html[data-theme="noir"] .potw-post figure.video figcaption, html[data-theme="noir"] .bul-body figure.video figcaption { color: var(--n-dim); }
html[data-theme="noir"] .potw-post blockquote { border-left-color: #5a6a86; }

/* gallery + viewer */
html[data-theme="noir"] .gallery { background: var(--n-panel); border-color: var(--n-line); }
html[data-theme="noir"] .gallery-section > summary { color: var(--n-head); background: #262c38; border-color: #3a4250; }
html[data-theme="noir"] .gallery a:hover, html[data-theme="noir"] .gallery a:focus-visible { background: var(--n-hover); }
html[data-theme="noir"] .viewer-bar { border-top-color: var(--n-line); }
html[data-theme="noir"] .viewer-count { color: var(--n-dim); }

/* calendar */
html[data-theme="noir"] .cal-grid { background: var(--n-panel); border-color: var(--n-line); }
html[data-theme="noir"] .cal-grid th { background: #262c38; color: var(--n-head); }
html[data-theme="noir"] .cal-grid td button { color: var(--n-text); background: none; }
html[data-theme="noir"] .cal-grid td button:hover { background: var(--n-hover); }
html[data-theme="noir"] .cal-grid td button.has-event { background: #6b5410; color: #fff; }
html[data-theme="noir"] .cal-grid td button.today { border-color: #ff6b6b; }
html[data-theme="noir"] .cal-grid td button.selected { background: var(--select); color: #fff; }
html[data-theme="noir"] .events li { border-bottom-color: var(--n-line); }
html[data-theme="noir"] .events time { color: var(--n-head); }
html[data-theme="noir"] .events span, html[data-theme="noir"] .events .desc { color: #d0d0d0; }

/* doom window status bar */
html[data-theme="noir"] .doom-status { border-top-color: var(--n-line); color: var(--n-dim); }

/* ---- bulletin ------------------------------------------------------------- */
html[data-theme="noir"] .bulletin-page { background: var(--n-bg); }
html[data-theme="noir"] .bul-tool, html[data-theme="noir"] .bul-status { border-color: var(--n-line); }
html[data-theme="noir"] .bul-rss { color: #ff9f45 !important; }
html[data-theme="noir"] .bul-folders { background: var(--n-panel); border-right-color: var(--n-line); }
html[data-theme="noir"] .bul-folders button { color: var(--n-text); background: none; }
html[data-theme="noir"] .bul-folders button:focus-visible { outline-color: #fff; }
html[data-theme="noir"] .bul-folders button.sel { background: var(--select); color: #fff; }
html[data-theme="noir"] .bul-folders button[data-unread]:not([data-unread=""])::after { color: var(--n-link); }
html[data-theme="noir"] .bul-folders button.sel[data-unread]:not([data-unread=""])::after { color: #fff; }
html[data-theme="noir"] .bul-list { background: var(--n-panel); border-bottom-color: var(--n-bg); }
html[data-theme="noir"] .bul-list th { color: var(--n-text); background: linear-gradient(#444, #353535); border-color: var(--n-line); }
html[data-theme="noir"] .bul-list th.sorted::after { color: var(--n-dim); }
html[data-theme="noir"] .bul-list tr[data-pinned] td { background: #3a3519; }
html[data-theme="noir"] .bul-list tr.sel td, html[data-theme="noir"] .bul-list tr[data-pinned].sel td { background: var(--select); color: #fff; }
html[data-theme="noir"] .bul-preview, html[data-theme="noir"] .window-body.bul-post { background: var(--n-panel); }
html[data-theme="noir"] .bul-empty { color: var(--n-dim); }
html[data-theme="noir"] .bul-status { color: #d0d0d0; }
html[data-theme="noir"] .bul-hdr { background: #262626; border-bottom-color: var(--n-line); }
html[data-theme="noir"] .bul-hdr b { color: var(--n-dim); }
html[data-theme="noir"] .bul-body h1, html[data-theme="noir"] .bul-body h2, html[data-theme="noir"] .bul-body h3 { color: var(--n-head); }
html[data-theme="noir"] .bul-body blockquote { color: #d0d0d0; border-left-color: #5a6a86; }
html[data-theme="noir"] .bul-body code { color: #f0f0f0; background: #333; border-color: #555; }
html[data-theme="noir"] .bul-body pre { border-color: #555; }

/* ---- sim messenger -------------------------------------------------------- */
html[data-theme="noir"] .msn-me { background: linear-gradient(180deg, #4a4a4a, #2c2c2c 60%, #1e1e1e); }
html[data-theme="noir"] .messenger-page.offline .msn-me { background: linear-gradient(180deg, #3a3a3a, #262626); }
html[data-theme="noir"] .msn-note { color: #c8c8c8; }
html[data-theme="noir"] .msn-pic { border-color: #000; }
html[data-theme="noir"] .msn-find, html[data-theme="noir"] .msn-foot { background: #262626; border-color: var(--n-line); color: #d0d0d0; }
html[data-theme="noir"] .msn-list { background: var(--n-panel); }
html[data-theme="noir"] .msn-group button { color: var(--n-head); }
html[data-theme="noir"] .msn-group button:focus-visible { outline-color: #fff; }
html[data-theme="noir"] .msn-contact:hover { background: var(--n-hover); }
html[data-theme="noir"] .msn-name { color: var(--n-text); }
html[data-theme="noir"] .msn-user, html[data-theme="noir"] .msn-msg, html[data-theme="noir"] .msn-empty { color: var(--n-dim); }
html[data-theme="noir"] .msn-dot { border-color: rgba(0,0,0,.6); }

/* ---- sim properties ------------------------------------------------------- */
html[data-theme="noir"] .sim-state { color: #5ad65a; }
html[data-theme="noir"] .sim-page.offline .sim-state { color: #9a9a9a; }
html[data-theme="noir"] .sim-dl dt { color: var(--n-dim); }
html[data-theme="noir"] .sim-key i { border-color: #000; }
html[data-theme="noir"] .sim-key .sim-sep { border-top-color: var(--n-line); }

/* ---- taskbar + start menu (Royale Noir) ------------------------------------ */
html[data-theme="noir"] .taskbar { background: linear-gradient(180deg, #5c5c5c, #2a2a2a 6%, #1a1a1a 14%, #121212 88%, #000); }
html[data-theme="noir"] .task { border-color: #000; background: var(--icon, none) 6px 50% / 16px no-repeat, linear-gradient(180deg, #4e4e4e, #343434); }
html[data-theme="noir"] .task.current { background: var(--icon, none) 6px 50% / 16px no-repeat, linear-gradient(180deg, #1c1c1c, #262626); }
html[data-theme="noir"] .tray { border-left-color: #000; background: linear-gradient(180deg, #4a4a4a, #262626 8%, #1c1c1c 88%, #0a0a0a); }
html[data-theme="noir"] .start-menu { background: #232323; border-color: #000; }
html[data-theme="noir"] .start-menu-header, html[data-theme="noir"] .start-menu-footer { background: linear-gradient(180deg, #5a5a5a, #2a2a2a 12%, #151515 88%, #000); }
html[data-theme="noir"] .start-menu-header img { border-color: #888; background: #333; }
html[data-theme="noir"] .start-menu li a, html[data-theme="noir"] .start-menu li button { color: var(--n-text); }
html[data-theme="noir"] .start-menu li.sep { background: #444; }

/* ---- DOOM controls dialog (inside the DOOM frame) --------------------------- */
html[data-theme="noir"] #controls .hint { color: var(--n-dim); }
html[data-theme="noir"] #controls .warn { color: #ff7a7a; }

/* buttons that are styled as plain text in Luna */
html[data-theme="noir"] .msn-group button { background: none; border: 0; }

/* links that look like something else keep that look */
html[data-theme="noir"] .window-body a.button { color: var(--n-text); }
html[data-theme="noir"] .bul-list td a { color: inherit; }
html[data-theme="noir"] .start-button { color: #fff; border: 0; background: linear-gradient(180deg, #3c8f3c, #4fae4f 10%, #3a9a3a 60%, #2f7d2f); }
html[data-theme="noir"] .start-menu li button { background: none; border: 0; }
html[data-theme="noir"] .start-menu li button:hover, html[data-theme="noir"] .start-menu li button:focus-visible { background: var(--select); color: #fff; }
html[data-theme="noir"] .trophy { color: #fff3c4; background: linear-gradient(180deg, #4a3e10, #3a300c); border-color: #8a7320; }
html[data-theme="noir"] .gallery img { background: #141414; }
html[data-theme="noir"] .hist-axis { color: var(--n-dim); }
html[data-theme="noir"] .hist-range button[aria-pressed=true] { background: linear-gradient(180deg, #252525, #333 8%, #383838 94%, #444); }

/* sim fund */
html[data-theme="noir"] .fund-menu, html[data-theme="noir"] .fund-status, html[data-theme="noir"] .fund-period { border-color: var(--n-line); }
html[data-theme="noir"] .fund-tool { background: linear-gradient(#3a3a3a, #2c2c2c); border-color: var(--n-line); }
html[data-theme="noir"] .fund-tool button[aria-pressed=true] { color: #fff; background: linear-gradient(180deg, #252525, #333 8%, #383838 94%, #444); }
html[data-theme="noir"] .fund-acct { background: linear-gradient(180deg, #3a3a3a, #1e1e1e); }
html[data-theme="noir"] .fund-acct small { color: #c8c8c8; }
html[data-theme="noir"] .fund-meter { background: #141414; border-color: #666; }
html[data-theme="noir"] .fund-table { background: var(--n-panel); border-color: var(--n-line); }
html[data-theme="noir"] .fund-table th { color: var(--n-text); background: linear-gradient(#444, #353535); border-color: var(--n-line); }
html[data-theme="noir"] .fund-table td { border-color: #333; }
html[data-theme="noir"] .fund-table tbody tr:nth-child(even) td { background: #2a2817; }
html[data-theme="noir"] .fund-table tbody tr:hover td { background: var(--select); color: #fff; }
html[data-theme="noir"] .fund-table .num, html[data-theme="noir"] .fund-table .memo, html[data-theme="noir"] .fund-empty { color: var(--n-dim); }
html[data-theme="noir"] .fund-chart { background: repeating-linear-gradient(0deg, #1e1e1e 0 26px, #2a2a2a 26px 27px); border-color: #666; }
html[data-theme="noir"] .fund-bar span, html[data-theme="noir"] .fund-cap { color: var(--n-dim); }
html[data-theme="noir"] .fund-top .tb { background: #2a2a2a; border-color: #555; }