/* share.nicman.it — the nicman.it palette over copyparty's two classic themes.
 *
 * Values come from nicman.it/src/styles/tokens.css. The selectors are html.a
 * (dark) and html.a.y (light). Both outrank copyparty's own :root and html.y
 * whatever the load order, and `themes: 2` leaves only these two themes in
 * the picker. tests/theme.spec.ts measures the rendered contrast with axe; if
 * it flags an element, change the variable that element uses. Never disable
 * the rule.
 */

@font-face {
  font-family: 'Space Grotesk Variable';
  src: url('/.nm/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono Variable';
  src: url('/.nm/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-display: swap;
}

html.a {
  --font-main: 'Space Grotesk Variable', system-ui;
  --font-mono: 'JetBrains Mono Variable', ui-monospace;

  --fg: #e6e6e6;
  --fg-max: #f5f5f5;
  --fg2-max: #f5f5f5;
  --fg-weak: #b3b3b3;

  --bg-max: #000;
  --bg-d3: #0e0e0e;
  --bg-d2: #111111;
  --bg-d1: #141414;
  --bg: #1a1a1a;
  --bg-u1: #1f1f1f;
  --bg-u2: #242424;
  --bg-u3: #141414; /* the browser bar: see "Mobile browser bar" below */
  --bg-u4: #303030;
  --bg-u5: #3a3a3a;
  --bg-u6: #454545;
  --row-alt: #1f1f1f;
  --tree-bg: #1f1f1f;

  --a: #ff5f1f;
  --a-b: #bd4617;
  --a-hil: #ff8a5c;
  --a-dark: #d94a12;
  --a-gray: #6b6b6b;
  --tab-alt: #ff8a5c;
  --scroll: #ff5f1f;

  --btn-h-bg: #4a1e0c;
  --btn-1-fg: #141414;
  --btn-1-bg: #ff5f1f;
  --btn-1h-bg: #ff7a45;

  --sort-1: #ff5f1f;
  --sort-2: #ffb08f;
  --srv-1: #b3b3b3;
  --srv-2: #ff8a5c;
  --srv-3: #ff5f1f;
  --srv-3b: rgba(255, 95, 31, 0.6);

  --g-sel-fg: #ffffff;
  --g-sel-bg: #6b2a0f;
  --g-sel-b1: #ff5f1f;
  --g-sel-sh: #bd4617;
  --g-fsel-bg: #a53d13;
  --g-fsel-b1: #ff8a5c;
  --g-fsel-ts: #4a1e0c;
  --g-play-bg: #5a2410;
  --g-play-b1: #ff5f1f;
  --g-play-b2: #ff8a5c;
  --g-play-sh: #bd4617;
  --f-play-bg: #ff5f1f;
  --f-play-fg: #141414;
  --f-sel-sh: #ff5f1f;
  --fm-off: #949494;
}

html.a.y {
  --fg: #2a2a2a;
  --fg-max: #141414;
  --fg-weak: #525252;

  --bg-max: #ffffff;
  --bg-d3: #ffffff;
  --bg-d2: #ffffff;
  --bg-d1: #ffffff;
  --bg: #f0f0f0;
  --bg-u1: #ffffff;
  --bg-u2: #fafafa;
  --bg-u3: #f0f0f0; /* also the browser bar: light follows its own canvas */
  --bg-u4: #ffffff;
  --bg-u5: #c4c4c4;
  --bg-u6: #e2e2e2;
  --row-alt: #f5f5f5;
  --tree-bg: #ffffff;

  --a: #bd4617;
  --a-b: #a03a12;
  --a-hil: #8f3410;
  --a-dark: #8f3410;
  --a-gray: #bbbbbb;
  --tab-alt: #bd4617;
  --scroll: #bd4617;

  --btn-fg: #525252;
  --btn-h-fg: #2a2a2a;
  --btn-h-bg: #ffd9c9;
  --btn-1-fg: #ffffff;
  --btn-1-bg: #bd4617;
  --btn-1h-bg: #a03a12;

  --sort-1: #bd4617;
  --sort-2: #8f3410;
  --srv-1: #525252;
  --srv-2: #bd4617;
  --srv-3: #bd4617;

  --fm-off: #636363;
}

/* Mobile browser bar. copyparty's bchrome() (util.js) copies --bg-u3 as
 * computed on <html> into <meta name="theme-color"> on every page, which
 * overrides `tcolor`. So <html> carries the bar colour (#141414, the brand
 * canvas, in dark) and body puts the surface value back for everything that
 * is drawn. The only visible side effect is the page scrollbar track, which
 * becomes canvas-coloured. Light keeps #f0f0f0 for both: its own canvas. */
html.a body { --bg-u3: #2a2a2a; }
html.a.y body { --bg-u3: #f0f0f0; }

/* copyparty fades the file-manager buttons that do nothing yet (no
 * selection) to opacity .3, which no colour can lift to 4.5:1. They stay
 * visibly off by using the weakest ink instead (--fm-off above). */
html.a #wfm a:not(.en) { opacity: 1; }

/* The login page (splash.html, <html id="ht_spl">) paints with literal
 * colours, not the variables above, so it gets its own rules. Its <html>
 * class is the stored theme ('az a z' / 'ay a y'); copyparty 1.20.24 sends
 * 'az a z' to a first-time visitor too. Light is :not(.z) rather than .y only
 * as a defensive fallback, should a page ever arrive without the class. */
html#ht_spl.z { background: #141414; color: #e6e6e6; }
html#ht_spl.z h1,
html#ht_spl.z .num { border-color: #454545; }
html#ht_spl.z a { color: #f5f5f5; background: #2a2a2a; border-color: #454545; }
html#ht_spl.z a.g { color: #141414; background: #ff5f1f; border-color: #ff8a5c; }
html#ht_spl.z a.r { color: #ff8a5c; background: #2a2a2a; border-color: #bd4617; }
html#ht_spl.z input { color: #f5f5f5; background: #1f1f1f; border-color: #ff5f1f; }
html#ht_spl.z input::placeholder { color: #949494; }
html#ht_spl.z input[type='submit'] { color: #141414; background: #ff5f1f; }

html#ht_spl:not(.z) { background: #fafafa; color: #2a2a2a; }
html#ht_spl:not(.z) h1,
html#ht_spl:not(.z) .num { border-color: #c4c4c4; }
html#ht_spl:not(.z) a { color: #2a2a2a; background: #ffffff; border-color: #c4c4c4; }
html#ht_spl:not(.z) a.g { color: #ffffff; background: #bd4617; border-color: #a03a12; }
html#ht_spl:not(.z) a.r { color: #bd4617; background: #ffffff; border-color: #bd4617; }
html#ht_spl:not(.z) input { color: #2a2a2a; background: #ffffff; border-color: #bd4617; }
html#ht_spl:not(.z) input::placeholder { color: #636363; }
html#ht_spl:not(.z) input[type='submit'] { color: #ffffff; background: #bd4617; }

/* "powered by" (#pb) and the π link (#repl) are plain text in the corners:
 * copyparty fades #pb with opacity, which the inks below replace, and the
 * button look of the rules above must not reach them. */
html#ht_spl #pb,
html#ht_spl #pb span { opacity: 1; }
html#ht_spl.z #pb { color: #949494; }
html#ht_spl.z #repl,
html#ht_spl.z #pb a { color: #b3b3b3; background: none; border: none; }
html#ht_spl:not(.z) #pb { color: #636363; }
html#ht_spl:not(.z) #repl,
html#ht_spl:not(.z) #pb a { color: #525252; background: none; border: none; }

/* The badge before the server name, top left. */
#srv_info > span:first-child a::before {
  content: '';
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.45em;
  vertical-align: -0.4em;
  background: url('/.nm/badge-64.png') center / contain no-repeat;
}

/* On a phone the badge and the wider font push the server name into the
 * access info on the right (both are absolutely positioned at the top), so
 * narrow screens get the half-em gutters copyparty itself uses elsewhere. */
@media (max-width: 32em) {
  #srv_info { left: 0.5em; }
  #acc_info { right: 0.5em; }
}