/* Wires theme for Forgejo 16.
 *
 * The look of https://cdn.wires.sh/runtimes/: Sanzo Wada combination 84
 * (Seashell Pink #ffcfc4 / Deep Slate Green #0f261f), swapped for dark mode,
 * Source Serif for text and Argent Pixel CF italic for display type.
 *
 * Forgejo's own light and dark themes supply every variable. This file only
 * overrides them: each grey is moved onto the pink-to-green axis at the same
 * lightness, and the surfaces, accent and fonts follow the site.
 */
@import "theme-forgejo-light.css";
@import "theme-forgejo-dark.css" (prefers-color-scheme: dark);

@font-face {
  font-family: "Argent Pixel CF";
  src: url("../fonts/wires/ArgentPixelCF-Italic.woff2") format("woff2");
  font-style: italic; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Source Serif";
  src: url("../fonts/wires/source-serif-4-latin-opsz-normal.woff2") format("woff2");
  font-style: normal; font-weight: 200 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif";
  src: url("../fonts/wires/source-serif-4-latin-ext-opsz-normal.woff2") format("woff2");
  font-style: normal; font-weight: 200 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif";
  src: url("../fonts/wires/source-serif-4-latin-opsz-italic.woff2") format("woff2");
  font-style: italic; font-weight: 200 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif";
  src: url("../fonts/wires/source-serif-4-latin-ext-opsz-italic.woff2") format("woff2");
  font-style: italic; font-weight: 200 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* The site's tokens, as on cdn.wires.sh. */
  --wires-bg: #ffcfc4;
  --wires-fg: #0f261f;
  --wires-dim: #0f261fb3;
  --wires-line: #0f261f2e;
  --wires-hover: #0f261f12;
  --wires-logo-blend: multiply;
  --wires-display: "Argent Pixel CF", "Source Serif", Georgia, serif;

  --fonts-proportional: "Source Serif", Georgia, serif;
  --border-radius: 0;
  --border-radius-medium: 0;

  /* Greys: white is seashell, zinc-900 is slate. */
  --zinc-50: #facbc0;
  --zinc-100: #f4c7bc;
  --zinc-150: #ecc2b7;
  --zinc-200: #e4bcb1;
  --zinc-250: #dcb6ac;
  --zinc-300: #d4b0a6;
  --zinc-350: #b99e94;
  --zinc-400: #a08c83;
  --zinc-450: #877a72;
  --zinc-500: #6e6960;
  --zinc-550: #5d5d55;
  --zinc-600: #4e524a;
  --zinc-650: #434a43;
  --zinc-700: #39443c;
  --zinc-750: #2c3a33;
  --zinc-800: #1f312a;
  --zinc-850: #172b24;
  --zinc-900: #0f261f;

  /* The accent is the ink colour itself. */
  --color-primary: #0f261f;
  --color-primary-contrast: #ffcfc4;
  --color-primary-dark-1: #0e221c;
  --color-primary-dark-2: #0c1e19;
  --color-primary-dark-3: #0a1b16;
  --color-primary-dark-4: #091713;
  --color-primary-dark-5: #081310;
  --color-primary-dark-6: #060f0c;
  --color-primary-dark-7: #040b09;
  --color-primary-light-1: #313e36;
  --color-primary-light-2: #52554d;
  --color-primary-light-3: #746d64;
  --color-primary-light-4: #95857b;
  --color-primary-light-5: #b79c92;
  --color-primary-light-6: #d4b1a6;
  --color-primary-light-7: #ecc1b7;
  --color-primary-alpha-10: #0f261f19;
  --color-primary-alpha-20: #0f261f33;
  --color-primary-alpha-30: #0f261f4b;
  --color-primary-alpha-40: #0f261f66;
  --color-primary-alpha-50: #0f261f80;
  --color-primary-alpha-60: #0f261f99;
  --color-primary-alpha-70: #0f261fb3;
  --color-primary-alpha-80: #0f261fcc;
  --color-primary-alpha-90: #0f261fe1;
  --color-primary-hover: #3a443d;
  --color-primary-active: #575950;
  --color-secondary-alpha-10: #d4b0a619;
  --color-secondary-alpha-20: #d4b0a633;
  --color-secondary-alpha-30: #d4b0a64b;
  --color-secondary-alpha-40: #d4b0a666;
  --color-secondary-alpha-50: #d4b0a680;
  --color-secondary-alpha-60: #d4b0a699;
  --color-secondary-alpha-70: #d4b0a6b3;
  --color-secondary-alpha-80: #d4b0a6cc;
  --color-secondary-alpha-90: #d4b0a6e1;

  /* Surfaces. Page chrome is transparent over the background canvas. */
  --color-body: #ffcfc4;
  --color-nav-bg: transparent;
  --color-secondary-nav-bg: transparent;
  --color-header-wrapper: transparent;
  --color-header-wrapper-transparent: #ffcfc400;
  --color-footer: transparent;
  --color-text-dark: #0f261f;
  --color-text-focus: #ffcfc4;
  --color-input-background: #ffcfc4;
  --color-input-toggle-background: #ffcfc4;
  --color-light: #ffcfc4cc;
  --color-light-border: #0f261f1d;
  --color-hover: #0f261f12;
  --color-active: #0f261f1f;
  --color-shadow: #0f261f40;
  --color-markup-table-row: #0f261f06;
  --color-reaction-bg: #0f261f0a;
  --color-tooltip-text: #ffcfc4;
  --color-tooltip-bg: #0f261ff0;
  --color-label-bg: #0f261f1a;
  --color-label-hover-bg: #0f261f2e;
  --color-label-active-bg: #0f261f45;
  --color-label-bg-alt: #d4b0a6;
  --color-overlay-backdrop: #0f261fc0;
  --color-selection-bg: #0f261f;
  --color-selection-fg: #ffcfc4;
  --checkerboard-color-1: #ffcfc4;
  --checkerboard-color-2: #ecc2b7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wires-bg: #0f261f;
    --wires-fg: #ffcfc4;
    --wires-dim: #ffcfc4b3;
    --wires-line: #ffcfc42e;
    --wires-hover: #ffcfc412;
    --wires-logo-blend: screen;

    /* Greys: steel-800 (the page) is slate, steel-100 is seashell. */
    --steel-900: #051f18;
    --steel-850: #0a221b;
    --steel-800: #0f261f;
    --steel-750: #182d26;
    --steel-700: #22332c;
    --steel-650: #2d3b33;
    --steel-600: #3d463f;
    --steel-550: #4f534b;
    --steel-500: #605f57;
    --steel-450: #736c63;
    --steel-400: #857970;
    --steel-350: #98867d;
    --steel-300: #ab948b;
    --steel-250: #c0a399;
    --steel-200: #d5b1a7;
    --steel-150: #eac0b6;
    --steel-100: #ffcfc4;

    --color-primary: #ffcfc4;
    --color-primary-contrast: #0f261f;
    --color-primary-dark-1: #ffd4ca;
    --color-primary-dark-2: #ffd9d0;
    --color-primary-dark-3: #ffddd6;
    --color-primary-dark-4: #ffe2dc;
    --color-primary-dark-5: #ffe7e2;
    --color-primary-dark-6: #ffece7;
    --color-primary-dark-7: #fff1ed;
    --color-primary-light-1: #ddb7ad;
    --color-primary-light-2: #bca096;
    --color-primary-light-3: #9a887f;
    --color-primary-light-4: #797068;
    --color-primary-light-5: #575951;
    --color-primary-light-6: #3a443d;
    --color-primary-light-7: #22342c;
    --color-primary-alpha-10: #ffcfc419;
    --color-primary-alpha-20: #ffcfc433;
    --color-primary-alpha-30: #ffcfc44b;
    --color-primary-alpha-40: #ffcfc466;
    --color-primary-alpha-50: #ffcfc480;
    --color-primary-alpha-60: #ffcfc499;
    --color-primary-alpha-70: #ffcfc4b3;
    --color-primary-alpha-80: #ffcfc4cc;
    --color-primary-alpha-90: #ffcfc4e1;
    --color-primary-hover: #e2bbb0;
    --color-primary-active: #caaaa0;
    --color-secondary-alpha-10: #2d3b3319;
    --color-secondary-alpha-20: #2d3b3333;
    --color-secondary-alpha-30: #2d3b334b;
    --color-secondary-alpha-40: #2d3b3366;
    --color-secondary-alpha-50: #2d3b3380;
    --color-secondary-alpha-60: #2d3b3399;
    --color-secondary-alpha-70: #2d3b33b3;
    --color-secondary-alpha-80: #2d3b33cc;
    --color-secondary-alpha-90: #2d3b33e1;

    --color-body: #0f261f;
    --color-nav-bg: transparent;
    --color-secondary-nav-bg: transparent;
    --color-header-wrapper: transparent;
    --color-header-wrapper-transparent: #0f261f00;
    --color-footer: transparent;
    --color-text-dark: #ffcfc4;
    --color-text-focus: #ffcfc4;
    --color-input-background: var(--steel-650);
    --color-input-toggle-background: var(--steel-650);
    --color-light: #00000028;
    --color-shadow: #00000060;
    --color-light-border: #ffcfc428;
    --color-hover: #ffcfc412;
    --color-active: #ffcfc41f;
    --color-markup-table-row: #ffcfc406;
    --color-reaction-bg: #ffcfc412;
    --color-expand-button: #2d3b33;
    --color-label-text: #ffcfc4;
    --color-label-bg: #ffcfc41f;
    --color-label-hover-bg: #ffcfc42e;
    --color-label-active-bg: #ffcfc445;
    --color-label-bg-alt: var(--steel-550);
    --color-tooltip-text: #0f261f;
    --color-tooltip-bg: #ffcfc4f0;
    --color-overlay-backdrop: #051f18c0;
    --color-selection-bg: #ffcfc4;
    --color-selection-fg: #0f261f;
    --checkerboard-color-1: #0f261f;
    --checkerboard-color-2: #22332c;
  }
}

/* The animated background (custom/footer.tmpl) sits behind a transparent
   body; the root keeps the flat colour for when WebGL is unavailable. */
html { background: var(--color-body); }
body { background: transparent; }
#wires-bg {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* Grid.
 *
 * Vertical: a 4px baseline. Every line-height is a multiple of 4 and every
 * gap comes from the 8px scale, with 4px half-steps inside small parts.
 * Rules are drawn as inset shadows, or taken out of the neighbouring
 * padding, so a 1px line never moves the rhythm.
 *
 * Horizontal: navbar, content and footer share Forgejo's page margin
 * (--page-margin-x: 32, 16 or 8px). Prose stops at 80 characters.
 *
 * Type: Source Serif 14/20 for the interface and 16/24 for reading. Argent
 * Pixel CF is drawn on 20 pixels per em, so it is set only at 20px (1:1) and
 * 40px (2:1), where its pixels land on whole screen pixels. Pixel icons are
 * 16px, a whole fraction of their 32- and 64-unit drawings.
 */

/* Navbar: 48px, the mark and the wordmark. */
#navbar {
  border-bottom: 0;
  box-shadow: inset 0 -1px var(--wires-line);
  padding-inline: max(0px, calc(var(--page-margin-x) - 12px));
}
#navbar .item { min-height: 40px; padding-inline: 12px; font-style: italic; }
#navbar-logo img {
  width: 32px; height: 32px;
  image-rendering: pixelated;
  mix-blend-mode: var(--wires-logo-blend);
}
#navbar-logo::after {
  content: "Wires";
  margin-left: 8px;
  font: italic 400 20px/24px var(--wires-display);
}
.secondary-nav .overflow-menu-items > .item { font-style: italic; }
/* Forgejo's help link points at forgejo.org. */
#navbar a[href^="https://forgejo.org/docs"],
#navbar li:has(> a[href^="https://forgejo.org/docs"]) { display: none !important; }

/* [ui] THEMES lists only wires, so Settings > Appearance has no picker. */
.user-setting-content > h4:has(+ .segment form[action$="/appearance/theme"]),
.user-setting-content > .segment:has(form[action$="/appearance/theme"]) { display: none; }

/* Rendered Markdown: headings on the baseline, prose at a readable measure. */
.markup a { text-decoration: underline; text-underline-offset: 2px; }
.markup > :is(p, ul, ol, dl, blockquote) { max-width: 80ch; }
.markup h1 { line-height: 40px; padding-bottom: 7px; } /* + 1px rule = 48px */
.markup h2 { line-height: 32px; padding-bottom: 7px; } /* + 1px rule = 40px */
.markup h3 { line-height: 28px; }
.markup h4 { line-height: 24px; }
.markup h5 { line-height: 20px; }
.markup h6 { font-size: 12px; line-height: 16px; }
.markup pre { font-size: 14px; line-height: 20px; }
.markup table :is(th, td) { padding: 7px 12px 8px !important; } /* + 1px rule = 40px */

/* Footer, as on the site, on the page margin. */
.page-footer.wires-footer {
  border-top: 0;
  padding: 16px var(--page-margin-x);
  color: var(--wires-dim);
  font-size: 14px; line-height: 20px;
}
.page-footer.wires-footer .right-links { min-width: 0; gap: 8px; }
.page-footer.wires-footer .right-links > a { border: 0; padding: 0; margin: 0; }
.wires-footer a { color: inherit; text-decoration: none; }
.wires-footer a:hover { text-decoration: underline; }

/* Home page (templates/home.tmpl): the runtimes page layout. */
body:has(.wires-home) #navbar-logo { display: none; }
.page-content.wires-home {
  width: 100%; max-width: 896px;
  margin: 0 auto; padding: 32px 16px; /* + Forgejo's 16px page spacing = 48px */
  font-size: 16px; line-height: 24px;
}
.wires-lockup { display: flex; align-items: flex-end; min-height: 128px; margin-bottom: 40px; }
.wires-lockup img {
  width: 48px; height: 125px; /* half of 96 x 250 */
  image-rendering: pixelated;
  mix-blend-mode: var(--wires-logo-blend);
}
.wires-lockup .word { display: flex; flex-direction: column; margin-left: 4px; font-style: italic; }
.wires-lockup .name { font: italic 400 40px/48px var(--wires-display); }
.wires-lockup .tag { font-size: 14px; line-height: 20px; color: var(--wires-dim); }
.wires-tabs {
  display: flex; align-items: flex-end;
  margin-bottom: -1px; position: relative; z-index: 1;
}
.wires-tab {
  display: inline-flex; gap: 8px; align-items: center;
  padding: 7px 12px 8px; /* 1 + 7 + 24 + 8 + 1, less the 1px overlap = 40px */
  border: 1px solid var(--wires-line);
  text-decoration: none; color: var(--wires-dim);
  font: italic 400 20px/24px var(--wires-display);
}
.wires-tab + .wires-tab { margin-left: -1px; }
.wires-tab:hover { background: var(--wires-hover); color: var(--wires-dim); text-decoration: none; }
.wires-tab--active, .wires-tab--active:hover {
  color: var(--wires-fg); border-bottom-color: var(--wires-bg); background: var(--wires-bg);
}
.wires-tab svg { width: 16px; height: 16px; display: block; }
.wires-row, .wires-empty {
  padding: 12px 8px; /* 12 + 24 + 12 = 48px */
  box-shadow: inset 0 1px var(--wires-line);
}
.wires-row {
  display: flex; gap: 16px; align-items: baseline;
  color: var(--wires-fg); text-decoration: none;
}
.wires-row:hover { background: var(--wires-hover); color: var(--wires-fg); text-decoration: none; }
.wires-row .name { flex: none; max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wires-row .desc {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wires-row .desc, .wires-row .date { color: var(--wires-dim); font-size: 14px; line-height: 20px; }
.wires-row .date { white-space: nowrap; }
.wires-row .go { display: inline-flex; align-self: center; color: var(--wires-dim); }
.wires-row:hover .go { color: var(--wires-fg); }
.wires-row .go svg { width: 16px; height: 16px; display: block; }
.wires-empty { display: block; color: var(--wires-dim); }
@media (max-width: 640px) {
  .wires-tab svg { display: none; } /* three 20px tabs fit in 320px without icons */
  .wires-row .desc { display: none; }
  .wires-row .name { flex: 1; max-width: none; }
}
@media (max-width: 360px) {
  .wires-tab { padding-inline: 8px; }
}