/*
 * Gotoubun — a clean, quiet Forgejo theme with the Nakano sisters
 * ----------------------------------------------------------------
 * Dark, calm and muted, soft pink accent — no glows. A soft ring on every tap. Springy, touch-responsive interactions.
 * For tap ripples, sparkles and a talking peek, also install
 * templates/custom/footer.tmpl (included in the zip).
 *
 * Install (paths are inside your Forgejo custom directory —
 * official Docker image: /data/gitea/):
 *   1. public/assets/css/theme-gotoubun.css   ← this file
 *   2. public/assets/img/quints/*.webp        ← the images folder
 *   3. app.ini:
 *        [ui]
 *        THEMES = forgejo-auto,forgejo-light,forgejo-dark,gotoubun
 *        DEFAULT_THEME = gotoubun     ; optional
 *   4. Restart Forgejo, then pick "gotoubun" in Settings → Appearance.
 *
 * Pictures: peeking sister (bottom-left), the five chibis on the footer,
 * Ichika on READMEs, Miku on your contribution graph, idol cards on your
 * profile, a group banner on the dashboard, manga panels on Explore,
 * Yotsuba in settings, plaid/idol cards on sign-in/register, Itsuki on 404.
 *
 * Who peeks where:
 *   Code & files ......... Yotsuba     Issues ............... Nino
 *   Commits & diffs ...... Itsuki      Dashboard & home ..... Ichika
 *   Everywhere else ...... Miku
 * Swap the image paths in section "Sisters" to change it.
 *
 * Artwork is the user's own collection; the peeking art keeps its
 * artist's signature (HOSHIMI) — please leave it on.
 */

@import "./theme-forgejo-dark.css";
/* Google Fonts import (M PLUS Rounded 1c) removed on purpose: this instance serves
   everything locally. Headings fall back to the system font. */

/* ------------------------------------------------------------------ */
/* Tokens — light                                                      */
/* ------------------------------------------------------------------ */
:root {
  --is-dark-theme: true;

  --mochi-bg: #f6f6f8;
  --mochi-surface: #ffffff;
  --mochi-surface-2: #fafafb;
  --mochi-hover: #f8f5f7;
  --mochi-line: #e7e6eb;
  --mochi-line-2: #d9d8df;
  --mochi-ink: #1e1d24;
  --mochi-ink-2: #56545f;
  --mochi-ink-3: #86848f;
  --mochi-accent: #c93a6e;
  --mochi-accent-ink: #b8336a;
  --mochi-accent-soft: #fdebf1;
  --mochi-folder: #e8789e;
  --mochi-tone: rgba(217, 70, 122, 0.14);
  --mochi-on-accent: #ffffff;
  --mochi-heading: "M PLUS Rounded 1c", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Sisters — colours used for the screentone dots and the tab underline */
  --quint-ichika: #d9b46a;
  --quint-nino: #a993d6;
  --quint-miku: #7fa3d9;
  --quint-yotsuba: #93b87a;
  --quint-itsuki: #d98a8f;
  --quint: #ec98ad;
  --quint-name: "miku";
  --quint-peek: url("../img/quints/peek-miku.webp");
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  --fonts-override: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui;
  --border-radius: 8px;
  --border-radius-medium: 10px;

  --color-primary: #c93a6e;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #b93565; --color-primary-dark-2: #a9315c; --color-primary-dark-3: #992c54; --color-primary-dark-4: #89274b; --color-primary-dark-5: #691e39; --color-primary-dark-6: #481528; --color-primary-dark-7: #280c16;
  --color-primary-light-1: #cd4a7a; --color-primary-light-2: #d25a85; --color-primary-light-3: #d66991; --color-primary-light-4: #da799c; --color-primary-light-5: #e399b4; --color-primary-light-6: #ecb8cb; --color-primary-light-7: #f4d8e2;
  --color-primary-alpha-10: #c93a6e1a; --color-primary-alpha-20: #c93a6e33; --color-primary-alpha-30: #c93a6e4c; --color-primary-alpha-40: #c93a6e66; --color-primary-alpha-50: #c93a6e7f; --color-primary-alpha-60: #c93a6e99; --color-primary-alpha-70: #c93a6eb2; --color-primary-alpha-80: #c93a6ecc; --color-primary-alpha-90: #c93a6ee5;
  --color-primary-hover: #b93565;
  --color-primary-active: #a9315c;
  --color-accent: #c93a6e;
  --color-small-accent: #fdebf1;

  --color-body: var(--mochi-bg);
  --color-box-header: var(--mochi-surface-2);
  --color-box-body: var(--mochi-surface);
  --color-box-body-highlight: var(--mochi-hover);
  --color-card: var(--mochi-surface);
  --color-menu: var(--mochi-surface);
  --color-nav-bg: var(--mochi-surface);
  --color-nav-hover-bg: #f1f0f4;
  --color-secondary-nav-bg: var(--mochi-surface);
  --color-header-wrapper: var(--mochi-surface);
  --color-footer: var(--mochi-surface);
  --color-hover: var(--mochi-hover);
  --color-active: #f1f0f4;
  --color-secondary: var(--mochi-line);
  --color-light-border: var(--mochi-line);
  --color-input-background: var(--mochi-surface);
  --color-input-border: var(--mochi-line-2);
  --color-input-border-hover: #c4c2cc;
  --color-text-dark: #111015;
  --color-text: var(--mochi-ink);
  --color-text-light: var(--mochi-ink-2);
  --color-text-light-1: #6a6873;
  --color-text-light-2: var(--mochi-ink-3);
  --color-text-light-3: #9e9ca6;
  --color-nav-text: var(--mochi-ink-2);
}

/* ------------------------------------------------------------------ */
/* Tokens — dark (always on)                                           */
/* ------------------------------------------------------------------ */
:root {
  --is-dark-theme: true;

  --mochi-bg: #111117;
  --mochi-surface: #16161d;
  --mochi-surface-2: #1c1c22;
  --mochi-hover: #202027;
  --mochi-line: #26262f;
  --mochi-line-2: #36363f;
  --mochi-ink: #ecebf1;
  --mochi-ink-2: #aeacb8;
  --mochi-ink-3: #82808c;
  --mochi-accent: #ec98ad;
  --mochi-accent-ink: #f4b4c4;
  --mochi-accent-soft: rgba(236, 152, 173, 0.14);
  --mochi-folder: #ec98ad;
  --mochi-tone: rgba(236, 152, 173, 0.14);
  --mochi-on-accent: #1a1a20;

  --color-primary: #ec98ad;
  --color-primary-contrast: #1a1a20;
  --color-primary-dark-1: #eea0b4; --color-primary-dark-2: #efa8ba; --color-primary-dark-3: #f1b1c1; --color-primary-dark-4: #f2b9c7; --color-primary-dark-5: #f5c9d4; --color-primary-dark-6: #f8dae1; --color-primary-dark-7: #fbeaef;
  --color-primary-light-1: #da8da1; --color-primary-light-2: #c98295; --color-primary-light-3: #b77889; --color-primary-light-4: #a66d7d; --color-primary-light-5: #835765; --color-primary-light-6: #60424d; --color-primary-light-7: #3d2c35;
  --color-primary-alpha-10: #ec98ad1a; --color-primary-alpha-20: #ec98ad33; --color-primary-alpha-30: #ec98ad4c; --color-primary-alpha-40: #ec98ad66; --color-primary-alpha-50: #ec98ad7f; --color-primary-alpha-60: #ec98ad99; --color-primary-alpha-70: #ec98adb2; --color-primary-alpha-80: #ec98adcc; --color-primary-alpha-90: #ec98ade5;
  --color-primary-hover: #eea4b7;
  --color-primary-active: #f1b1c1;
  --color-accent: #ec98ad;
  --color-small-accent: #48333c;

  --color-nav-hover-bg: #22222a;
  --color-active: #26262e;
  --color-input-border-hover: #4a4a55;
  --color-text-dark: #ffffff;
  --color-text-light-1: #9896a2;
  --color-text-light-3: #6c6a76;
}


/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
html { height: 100%; }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.full.height { flex: 1 0 auto; }
.page-footer { margin-top: auto; }
::selection { background: var(--color-primary-alpha-30); }
:focus-visible { outline: 2px solid var(--mochi-accent) !important; outline-offset: 2px; }

h1, h2, h3, .ui.header, .repo-title, .markup h1, .markup h2 {
  font-family: var(--mochi-heading);
}

a { transition: color 0.15s; }

/* ------------------------------------------------------------------ */
/* Navbar                                                              */
/* ------------------------------------------------------------------ */
#navbar {
  border-bottom: 1px solid var(--mochi-line) !important;
  min-height: 56px;
  padding: 0 16px !important;
}
#navbar .item { border-radius: 8px !important; font-weight: 500; }
#navbar .notification_count {
  background: var(--mochi-accent) !important;
  color: var(--mochi-on-accent) !important;
}

/* ------------------------------------------------------------------ */
/* Repository header — faint manga screentone in the corner            */
/* ------------------------------------------------------------------ */
.repository .header-wrapper, .page-content > .secondary-nav {
  position: relative;
  background: var(--mochi-surface) !important;
  border-bottom: 1px solid var(--mochi-line) !important;
}
.repository .header-wrapper::before, .page-content > .secondary-nav::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(520px, 60%);
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--quint) 16%, transparent) 1.3px, transparent 1.5px);
  background-size: 9px 9px;
  -webkit-mask-image: linear-gradient(250deg, #000 0%, transparent 70%);
  mask-image: linear-gradient(250deg, #000 0%, transparent 70%);
}
.repository .header-wrapper > *, .page-content > .secondary-nav > * { position: relative; }
.repo-title { font-size: 22px !important; font-weight: 700; }

/* Tabs: plain, with a sakura underline */
.repository .header-wrapper .ui.tabular.menu, .page-content > .secondary-nav .ui.tabular.menu {
  border-bottom: 0 !important;
}
.ui.tabular.menu .item {
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--mochi-ink-2) !important;
  font-weight: 500;
  margin-bottom: -1px !important;
}
.ui.tabular.menu .item:hover { color: var(--mochi-ink) !important; }
.ui.tabular.menu .active.item {
  color: var(--mochi-ink) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--quint) !important;
}
.ui.secondary.pointing.menu .active.item { border-color: var(--mochi-accent) !important; }

/* ------------------------------------------------------------------ */
/* Buttons & inputs — flat, hairline                                   */
/* ------------------------------------------------------------------ */
.ui.button, .ui.basic.button { border-radius: 8px !important; font-weight: 500 !important; box-shadow: none !important; transition: background 0.15s, border-color 0.15s, color 0.15s !important; }
.ui.basic.button, .ui.labeled.button > .ui.basic.label {
  background: var(--mochi-surface) !important;
  border: 1px solid var(--mochi-line-2) !important;
  color: var(--mochi-ink) !important;
}
.ui.basic.button:hover { background: var(--mochi-hover) !important; }
.ui.primary.button, .ui.green.button, .ui.positive.button {
  background: var(--mochi-accent) !important;
  color: var(--mochi-on-accent) !important;
  border: 0 !important;
}
.ui.primary.button:hover, .ui.green.button:hover, .ui.positive.button:hover { background: var(--color-primary-hover) !important; }
.ui.labeled.button > .button { border-radius: 8px 0 0 8px !important; }
.ui.labeled.button > .label { border-radius: 0 8px 8px 0 !important; border-left: 0 !important; font-weight: 600; color: var(--mochi-ink-2) !important; }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.search),
textarea, .ui.selection.dropdown { border-radius: 8px !important; }
input:not([type="checkbox"]):not([type="radio"]):not(.search):focus, textarea:focus, .ui.selection.dropdown.active {
  border-color: var(--mochi-accent) !important;
  box-shadow: 0 0 0 3px var(--color-primary-alpha-20) !important;
}

/* ------------------------------------------------------------------ */
/* Boxes                                                               */
/* ------------------------------------------------------------------ */
.ui.segment, .ui.segments, .ui.table, .ui.card, .ui.attached.header, .ui.attached.segment {
  border-color: var(--mochi-line) !important;
  box-shadow: none !important;
}
.ui.segment, .ui.segments, .ui.table, .ui.card { border-radius: 10px; }
.ui.label { border-radius: 6px; }

.ui.dropdown .menu, .ui.menu .dropdown.item .menu, .ui.popup {
  border: 1px solid var(--mochi-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25) !important;
  padding: 4px !important;
}
.ui.dropdown .menu > .item { border-radius: 6px !important; }
.ui.dropdown .menu > .item:hover, .ui.dropdown .menu > .item.selected { background: var(--mochi-accent-soft) !important; }
.ui.modal { border-radius: 14px !important; }
.ui.modal > :first-child { border-top-left-radius: 14px !important; border-top-right-radius: 14px !important; }
.ui.modal > :last-child { border-bottom-left-radius: 14px !important; border-bottom-right-radius: 14px !important; }

/* Tooltips look like little manga speech bubbles */
.tippy-box[data-theme="tooltip"] {
  background: var(--mochi-surface) !important;
  color: var(--mochi-ink) !important;
  border: 1.5px solid var(--mochi-ink);
  border-radius: 12px !important;
  font-weight: 500;
}
.tippy-box[data-theme="tooltip"] .tippy-svg-arrow { fill: var(--mochi-ink); }

/* ------------------------------------------------------------------ */
/* Repo summary strip & language bar                                   */
/* ------------------------------------------------------------------ */
.repository-summary { border-radius: 10px !important; overflow: hidden; }
.repository-summary .segment.sub-menu .item { color: var(--mochi-ink-2) !important; }
.repository-summary .segment.sub-menu .item b { color: var(--mochi-ink); }
.repository-summary .language-stats { height: 4px !important; padding: 0 !important; }

/* ------------------------------------------------------------------ */
/* File list                                                           */
/* ------------------------------------------------------------------ */
#repo-files-table { border-radius: 10px !important; }
#repo-files-table thead th { background: var(--mochi-surface-2) !important; }
#repo-files-table tbody tr { transition: background 0.12s; }
#repo-files-table tbody tr:hover { background: var(--mochi-hover) !important; }
#repo-files-table tbody tr:hover td.name a { color: var(--mochi-accent-ink) !important; }
#repo-files-table .svg.octicon-file-directory-fill,
#repo-files-table .svg.octicon-file-submodule { color: var(--mochi-folder) !important; }
#repo-files-table td.message, #repo-files-table td.message a,
#repo-files-table td.age { color: var(--mochi-ink-3) !important; }

.ui.sha.label, a.ui.label.sha {
  background: var(--mochi-accent-soft) !important;
  color: var(--mochi-accent-ink) !important;
  border: 0 !important;
  font-family: var(--fonts-monospace) !important;
}

/* ------------------------------------------------------------------ */
/* Footer — the five sisters sit on its top edge                      */
/* ------------------------------------------------------------------ */
.page-footer {
  position: relative;
  margin-top: 96px !important;
  padding: 26px 24px 18px 150px !important;
  border-top: 1px solid var(--mochi-line) !important;
  background: var(--mochi-surface) !important;
  align-items: center;
}
.page-footer::after {
  content: "";
  position: absolute;
  right: 48px;
  bottom: 100%;
  width: 254px;
  height: 66px;
  pointer-events: none;
  background:
    url("../img/quints/chibi-ichika.webp") 0 100% / 45px 66px no-repeat,
    url("../img/quints/chibi-nino.webp") 47px 100% / 52px 66px no-repeat,
    url("../img/quints/chibi-miku.webp") 101px 100% / 46px 66px no-repeat,
    url("../img/quints/chibi-yotsuba.webp") 149px 100% / 50px 66px no-repeat,
    url("../img/quints/chibi-itsuki.webp") 201px 100% / 53px 66px no-repeat;
}
.page-footer .left-links { position: relative; padding-left: 32px; row-gap: 2px; }
.page-footer .left-links::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 22px; height: 22px;
  margin-top: -11px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='6' r='4.2' fill='%23d9b46a'/%3E%3Ccircle cx='21.6' cy='11.5' r='4.2' fill='%23a993d6'/%3E%3Ccircle cx='18.7' cy='20.5' r='4.2' fill='%237fa3d9'/%3E%3Ccircle cx='9.3' cy='20.5' r='4.2' fill='%2393b87a'/%3E%3Ccircle cx='6.4' cy='11.5' r='4.2' fill='%23d98a8f'/%3E%3C/svg%3E");
}
.page-footer .left-links::after {
  content: "ごとうぶん · 五等分の花嫁";
  flex-basis: 100%;
  font-family: var(--mochi-heading);
  font-size: 11px;
  color: var(--mochi-ink-3);
}
.page-footer a { color: var(--mochi-ink-2) !important; transition: color 0.2s; }
.page-footer a:hover { color: var(--mochi-accent-ink) !important; }
.page-footer .left-links > a:first-child { color: var(--mochi-ink) !important; font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Pictures around the site                                            */
/* ------------------------------------------------------------------ */
/* Ichika reads along on top of every README / file */
.repository.file.list .non-diff-file-content { margin-top: 64px; }
.repository.file.list .non-diff-file-content > .file-header { position: relative; overflow: visible !important; }
.repository.file.list .non-diff-file-content > .file-header::after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: 100%;
  margin-bottom: -10px;
  width: 54px; height: 78px;
  pointer-events: none;
  background: no-repeat center bottom / contain url("../img/quints/chibi-ichika.webp");
  animation: quint-bob 3.6s ease-in-out infinite;
}

/* Miku and her tea on top of the contribution graph */
#user-heatmap { position: relative; margin-top: 56px; }
#user-heatmap::before {
  content: "";
  position: absolute;
  right: 22px;
  bottom: 100%;
  margin-bottom: -12px;
  width: 52px; height: 74px;
  z-index: 1;
  pointer-events: none;
  background: no-repeat center bottom / contain url("../img/quints/chibi-miku.webp");
  animation: quint-bob 3.4s ease-in-out infinite;
}

/* "Today's pick" — idol cards cycle under your profile card */
.page-content.user.profile .ui.card::after {
  content: "";
  display: block;
  margin: 12px;
  aspect-ratio: 469 / 720;
  border-radius: 10px;
  background: var(--mochi-surface-2) no-repeat center / cover url("../img/quints/idol-ichika.webp");
  animation: quint-idols 25s infinite;
}

/* Dashboard: the five of them as a banner */
.page-content.dashboard > .ui.container::before,
.page-content.dashboard > .flex-container::before {
  content: "";
  display: block;
  height: 160px;
  margin: 0 0 16px;
  border-radius: 14px;
  border: 1px solid var(--mochi-line);
  background: var(--mochi-surface-2) no-repeat center 22% / cover url("../img/quints/group.webp");
}

/* Explore: a strip of manga panels */
.page-content.explore > .ui.container::before {
  content: "";
  display: block;
  height: 110px;
  margin: 0 0 16px;
  border-radius: 14px;
  border: 1px solid var(--mochi-line);
  background:
    url("../img/quints/panel-1.webp") 0% 30% / 19.6% auto no-repeat,
    url("../img/quints/panel-2.webp") 25% 30% / 19.6% auto no-repeat,
    url("../img/quints/panel-3.webp") 50% 30% / 19.6% auto no-repeat,
    url("../img/quints/panel-4.webp") 75% 30% / 19.6% auto no-repeat,
    url("../img/quints/panel-5.webp") 100% 30% / 19.6% auto no-repeat,
    var(--mochi-surface-2);
}

/* Settings: Yotsuba cheers you on under the menu */
.flex-container-nav .ui.vertical.menu::after {
  content: "";
  display: block;
  height: 110px;
  margin: 12px auto 8px;
  background: no-repeat center bottom / contain url("../img/quints/chibi-yotsuba.webp");
}

/* ------------------------------------------------------------------ */
/* Sisters — who peeks on which page                                   */
/* ------------------------------------------------------------------ */
body:has(.page-content.repository.file.list),
body:has(.page-content.repository.view.file) {
  --quint-name: "yotsuba"; --quint-peek: url("../img/quints/peek-yotsuba.webp");
}
body:has(.page-content.repository.issue-list),
body:has(.page-content.repository.view.issue),
body:has(.page-content.repository.new.issue),
body:has(.page-content.repository.milestones) {
  --quint-name: "nino"; --quint-peek: url("../img/quints/peek-nino.webp");
}
body:has(.page-content.repository.commits),
body:has(.page-content.repository.diff),
body:has(.page-content.repository.compare),
body:has(.page-content.repository.view.issue.pull.files) {
  --quint-name: "itsuki"; --quint-peek: url("../img/quints/peek-itsuki.webp");
}
body:has(.page-content.dashboard),
body:has(.page-content.home),
body:has(.page-content.user.notification) {
  --quint-name: "ichika"; --quint-peek: url("../img/quints/peek-ichika.webp");
}

/* The peek itself: bottom-left corner of the window, never blocks clicks */
body::after {
  content: "";
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 50;
  width: 128px;
  height: 128px;
  pointer-events: none;
  background: no-repeat left bottom / contain var(--quint-peek);
  animation: quint-peek 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both, quint-bob 3.2s ease-in-out 1s infinite;
}
@keyframes quint-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes quint-panels {
  0%, 18%   { background-image: url("../img/quints/panel-1.webp"); }
  20%, 38%  { background-image: url("../img/quints/panel-2.webp"); }
  40%, 58%  { background-image: url("../img/quints/panel-3.webp"); }
  60%, 78%  { background-image: url("../img/quints/panel-4.webp"); }
  80%, 98%  { background-image: url("../img/quints/panel-5.webp"); }
  100%      { background-image: url("../img/quints/panel-1.webp"); }
}
@keyframes quint-cards {
  0%, 18%   { background-image: url("../img/quints/card-ichika.webp"); }
  20%, 38%  { background-image: url("../img/quints/card-nino.webp"); }
  40%, 58%  { background-image: url("../img/quints/card-miku.webp"); }
  60%, 78%  { background-image: url("../img/quints/card-yotsuba.webp"); }
  80%, 98%  { background-image: url("../img/quints/card-itsuki.webp"); }
  100%      { background-image: url("../img/quints/card-ichika.webp"); }
}
@keyframes quint-idols {
  0%, 18%   { background-image: url("../img/quints/idol-ichika.webp"); }
  20%, 38%  { background-image: url("../img/quints/idol-nino.webp"); }
  40%, 58%  { background-image: url("../img/quints/idol-miku.webp"); }
  60%, 78%  { background-image: url("../img/quints/idol-yotsuba.webp"); }
  80%, 98%  { background-image: url("../img/quints/idol-itsuki.webp"); }
  100%      { background-image: url("../img/quints/idol-ichika.webp"); }
}
@keyframes quint-peek { from { transform: translate(-30%, 40%); opacity: 0; } to { transform: none; opacity: 1; } }
@media print { body::after { display: none; } }

/* ------------------------------------------------------------------ */
/* Empty states, 404 and sign-in                                       */
/* ------------------------------------------------------------------ */
.empty-placeholder::before,
.ui.placeholder.segment::before,
.repository .empty-repo-guide::before {
  content: "";
  display: block;
  width: 120px;
  height: 150px;
  margin: 8px auto 12px;
  background: no-repeat center / contain url("../img/quints/chibi-ichika.webp");
}

/* 404: Itsuki replaces the default picture */
.page-content > .ui.container.center > img[src$="/img/404.png"],
.page-content > .ui.container.center > img[src$="/img/500.png"] { display: none; }
.page-content > .ui.container.center:has(> img[src$="/img/404.png"])::before,
.page-content > .ui.container.center:has(> img[src$="/img/500.png"])::before {
  content: "";
  display: block;
  width: 200px;
  height: 260px;
  margin: 48px auto 16px;
  background: no-repeat center / contain url("../img/quints/chibi-itsuki.webp");
}

/* Sign-in: a manga panel beside the form on wide screens */
@media (min-width: 960px) {
  .page-content.user.signin > .ui.page.grid > .ui.container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 0;
    max-width: 900px !important;
    margin: 0 auto;
  }
  .page-content.user.signin > .ui.page.grid > .ui.container > * { grid-column: 1; }
  .page-content.user.signin > .ui.page.grid > .ui.container::after {
    content: "";
    grid-column: 2;
    grid-row: 1 / span 20;
    min-height: 460px;
    border: 1px solid var(--mochi-line);
    border-left: 0;
    border-radius: 0 10px 10px 0;
    background: var(--mochi-surface-2) no-repeat center / cover url("../img/quints/panel-1.webp");
    animation: quint-panels 25s infinite;
  }
  /* Register page shows the idol cards instead */
  .page-content.user.signin:has(form[action*="sign_up"]) > .ui.page.grid > .ui.container::after,
  .page-content.user.signup > .ui.page.grid > .ui.container::after {
    background-image: url("../img/quints/idol-ichika.webp");
    animation-name: quint-idols;
  }
  .page-content.user.signin .ui.top.attached.header { border-top-right-radius: 0 !important; }
  .page-content.user.signin .ui.attached.segment:last-of-type { border-bottom-right-radius: 0 !important; }
}

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  #navbar { padding: 0 8px 0 14px !important; }
  #navbar .item { min-height: 44px; min-width: 44px; }
  #navbar.navbar-menu-open {
    border-radius: 0 0 16px 16px;
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.35);
  }
  #navbar.navbar-menu-open .item { min-height: 50px; font-size: 16px; animation: mochi-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  #navbar.navbar-menu-open::after {
    content: "おかえり — welcome back";
    display: block;
    padding: 6px 12px 2px;
    font-family: var(--mochi-heading);
    font-size: 12px;
    color: var(--mochi-ink-3);
  }

  .ui.button, .ui.basic.button { min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]):not(.search), .ui.selection.dropdown { min-height: 44px; font-size: 16px !important; } /* 16px avoids iOS zoom-on-focus */

  .repo-header { flex-direction: column; align-items: flex-start !important; gap: 12px; }
  .repo-buttons { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .repo-buttons .ui.labeled.button { display: flex; width: 100%; }
  .repo-buttons .ui.labeled.button > .button { flex: 1; justify-content: center; }

  .ui.tabular.menu { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .ui.tabular.menu::-webkit-scrollbar { display: none; }
  .ui.tabular.menu .item { min-height: 44px; white-space: nowrap; }

  .repo-button-row { flex-wrap: wrap; gap: 8px; }
  #clone-panel { width: 100%; }

  /* File rows: name + age on one line, last commit message underneath */
  body::after { width: 84px; height: 84px; }
  .page-footer { padding: 22px 16px 90px !important; margin-top: 76px !important; }
  .page-footer::after {
    right: 12px; width: 188px; height: 48px;
    background:
      url("../img/quints/chibi-ichika.webp") 0 100% / 33px 48px no-repeat,
      url("../img/quints/chibi-nino.webp") 35px 100% / 38px 48px no-repeat,
      url("../img/quints/chibi-miku.webp") 75px 100% / 34px 48px no-repeat,
      url("../img/quints/chibi-yotsuba.webp") 111px 100% / 36px 48px no-repeat,
      url("../img/quints/chibi-itsuki.webp") 149px 100% / 39px 48px no-repeat;
  }
  .page-content.dashboard > .ui.container::before { height: 110px; }
  .page-content.explore > .ui.container::before { height: 72px; }
  #repo-files-table tbody tr.entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name age" "msg msg";
    padding: 10px 14px;
    border-top: 1px solid var(--mochi-line);
  }
  #repo-files-table tbody tr.entry td { display: block !important; border: 0 !important; padding: 0 !important; width: auto !important; }
  #repo-files-table tbody tr.entry td.name { grid-area: name; }
  #repo-files-table tbody tr.entry td.age { grid-area: age; font-size: 12px; padding-left: 10px !important; }
  #repo-files-table tbody tr.entry td.message { grid-area: msg; font-size: 12px; margin-top: 2px; padding-left: 26px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}


/* ================================================================== */
/* Lively — everything answers your touch                              */
/* ================================================================== */

/* Header glow in the page's sister colour */
/* (no header glow — kept calm on purpose) */

/* Buttons: lift on hover, springy squish on press */
.ui.button, .ui.basic.button, .ui.labeled.button > .label, .ui.dropdown.button,
#navbar .item, .repository-summary .segment.sub-menu .item, a.ui.label, .ui.label.sha {
  transition: transform 0.45s var(--spring), background-color 0.2s, border-color 0.2s, box-shadow 0.25s, color 0.2s, filter 0.2s !important;
}
.ui.button:hover, .ui.basic.button:hover { transform: translateY(-1px); border-color: #4a4a56 !important; }
.ui.button:active, .ui.basic.button:active, .ui.labeled.button > .label:active,
#navbar .item:active, a.ui.label:active, .ui.label.sha:active,
.repository-summary .segment.sub-menu .item:active {
  transform: scale(0.93) !important;
  transition-duration: 0.08s !important;
}
.ui.primary.button, .ui.green.button, .ui.positive.button {
  background: var(--mochi-accent) !important;
  color: var(--mochi-on-accent) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.ui.primary.button:hover, .ui.green.button:hover, .ui.positive.button:hover { filter: brightness(1.08); }
.ui.button, .ui.basic.button, .ui.labeled.button > .label { border-radius: 10px !important; }
.ui.labeled.button > .button { border-radius: 10px 0 0 10px !important; }
.ui.labeled.button > .label { border-radius: 0 10px 10px 0 !important; }

/* Ripple from the centre of any button you press (works without the script too) */
.ui.button:not(.dropdown):not(.labeled) { position: relative; overflow: hidden; isolation: isolate; }
.ui.button:not(.dropdown):not(.labeled)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 10%, transparent 10.5%) center / 1200% no-repeat;
  opacity: 0;
  transition: background-size 0.6s var(--ease-out), opacity 0.8s;
}
.ui.button:not(.dropdown):not(.labeled):active::after { background-size: 0%; opacity: 1; transition: 0s; }

/* Navbar links: underline grows in */
#navbar .navbar-left > a.item { position: relative; }
#navbar .navbar-left > a.item:not(#navbar-logo)::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.35s var(--spring);
}
#navbar .navbar-left > a.item:hover::after, #navbar .navbar-left > a.item.active::after { transform: scaleX(1); }
#navbar-logo img { transition: transform 0.5s var(--spring); }
#navbar-logo:hover img { transform: rotate(-10deg) scale(1.1); }
#navbar-logo:active img { transform: scale(0.85); }


/* Tabs: a glowing sister-coloured underline that springs in */
.ui.tabular.menu .item { position: relative; border-bottom: 0 !important; transition: color 0.2s, transform 0.3s var(--spring) !important; }
.ui.tabular.menu .item::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--quint);
  transform: scaleX(0);
  transition: transform 0.45s var(--spring);
}
.ui.tabular.menu .active.item::after { transform: scaleX(1); }
.ui.tabular.menu .item:hover::after { transform: scaleX(0.35); }
.ui.tabular.menu .item:active { transform: scale(0.92); }

/* Stats strip: lift on hover */
.repository-summary .segment.sub-menu .item:hover { transform: translateY(-2px); }
.repository-summary .segment.sub-menu .item .svg { color: var(--quint); transition: transform 0.45s var(--spring); }
.repository-summary .segment.sub-menu .item:hover .svg { transform: rotate(-10deg) scale(1.15); }

/* Language bar grows in */
.repository-summary .language-stats { display: flex; gap: 3px; height: 6px !important; background: transparent !important; }
.repository-summary .language-stats .bar { border-radius: 6px; transform-origin: left; animation: quint-grow 0.9s var(--ease-out) both; }
.repository-summary .language-stats .bar:nth-child(2) { animation-delay: 0.08s; }
.repository-summary .language-stats .bar:nth-child(3) { animation-delay: 0.16s; }
.repository-summary .language-stats .bar:nth-child(n+4) { animation-delay: 0.24s; }
@keyframes quint-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* File rows: sister bar slides in, name nudges over, icon wiggles */
#repo-files-table tbody tr { animation: quint-rise 0.5s var(--ease-out) both; }
#repo-files-table tbody tr:nth-child(1) { animation-delay: 0.04s } #repo-files-table tbody tr:nth-child(2) { animation-delay: 0.07s }
#repo-files-table tbody tr:nth-child(3) { animation-delay: 0.10s } #repo-files-table tbody tr:nth-child(4) { animation-delay: 0.13s }
#repo-files-table tbody tr:nth-child(5) { animation-delay: 0.16s } #repo-files-table tbody tr:nth-child(6) { animation-delay: 0.19s }
#repo-files-table tbody tr:nth-child(7) { animation-delay: 0.22s } #repo-files-table tbody tr:nth-child(8) { animation-delay: 0.25s }
#repo-files-table tbody tr:nth-child(9) { animation-delay: 0.28s } #repo-files-table tbody tr:nth-child(n+10) { animation-delay: 0.31s }
#repo-files-table tbody td.name { transition: box-shadow 0.3s var(--spring); }
#repo-files-table tbody tr:hover td.name { box-shadow: inset 3px 0 0 var(--quint); }
#repo-files-table tbody td.name a, #repo-files-table tbody td.name .svg { display: inline-block; transition: transform 0.3s var(--spring), color 0.2s; }
#repo-files-table tbody tr:hover td.name a { transform: translateX(4px); color: #fff !important; }
#repo-files-table tbody tr:hover td.name .svg { transform: scale(1.15) rotate(-6deg); }
#repo-files-table tbody tr:active { background: #23232b !important; }
#repo-files-table .svg.octicon-file-directory-fill, #repo-files-table .svg.octicon-file-submodule { color: var(--quint) !important; }

/* Lists (issues, PRs, repos): gentle lift */
.flex-list > .flex-item, #issue-list > .flex-item { transition: background 0.2s, transform 0.3s var(--spring); border-radius: 10px; }
.flex-list > .flex-item:hover { background: #1c1c22; }
.flex-list > .flex-item:active { transform: scale(0.99); }

/* Inputs glow in the sister colour */
input:not([type="checkbox"]):not([type="radio"]):not(.search):focus, textarea:focus, .ui.selection.dropdown.active {
  border-color: var(--quint) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--quint) 25%, transparent) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--quint); transition: transform 0.35s var(--spring); }
input[type="checkbox"]:active, input[type="radio"]:active { transform: scale(0.8); }

/* Dropdowns and modals pop in */
.ui.dropdown .menu.visible, .ui.dropdown.active > .menu, .ui.popup.visible { animation: quint-pop 0.28s var(--spring) both; transform-origin: top center; }
.ui.modal.visible { animation: quint-pop 0.4s var(--spring) both; }
.ui.dropdown .menu > .item { transition: background 0.15s, padding-left 0.25s var(--spring) !important; }
.ui.dropdown .menu > .item:hover { padding-left: 1.4em !important; }

/* Cards & segments: soft depth */
.ui.segment, .ui.segments, .ui.table, .ui.card { border-radius: 14px; }
.ui.card { transition: transform 0.4s var(--spring), border-color 0.25s; }
.ui.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--quint) 50%, var(--mochi-line)) !important; }

/* Page content rises in */
.page-content > .ui.container, .page-content > .ui.grid { animation: quint-rise 0.5s var(--ease-out) both; }

@keyframes quint-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes quint-pop  { from { opacity: 0; transform: scale(0.94) translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Pieces added by footer.tmpl (the optional script) ---------- */
html.gtb-js body::after { display: none; }
.gtb-tap {
  position: fixed;
  z-index: 9999;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 2px solid var(--mochi-accent);
  pointer-events: none;
  animation: gtb-ring 0.6s var(--ease-out) forwards;
}
@keyframes gtb-ring { from { opacity: 0.9; transform: scale(0.4); } to { opacity: 0; transform: scale(5); } }

.gtb-peek {
  position: fixed;
  left: 0; bottom: 0;
  z-index: 50;
  width: 128px; height: 128px;
  padding: 0; border: 0;
  background: no-repeat left bottom / contain var(--quint-peek);
  cursor: pointer;
  translate: 0 14px;
  transition: translate 0.5s var(--spring);
  animation: quint-peek 0.7s var(--spring) 0.3s both, quint-bob 3.2s ease-in-out 1s infinite;
  -webkit-tap-highlight-color: transparent;
}
.gtb-peek:hover { translate: 0 4px; }
.gtb-peek.hop { animation: gtb-hop 0.6s var(--spring); }
@keyframes gtb-hop { 0% { transform: none; } 35% { transform: translateY(-16px) rotate(-4deg); } 70% { transform: translateY(5px); } 100% { transform: none; } }
.gtb-bubble {
  position: fixed;
  left: 118px; bottom: 100px;
  z-index: 51;
  padding: 7px 13px;
  border-radius: 16px 16px 16px 4px;
  background: #f0eff4;
  color: #17171c;
  font-family: var(--mochi-heading);
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  border: 1.5px solid var(--quint);
  animation: quint-pop 0.4s var(--spring) both;
  transform-origin: bottom left;
  pointer-events: none;
}
.gtb-spark {
  position: fixed;
  z-index: 9999;
  width: 6px; height: 6px;
  margin: -3px;
  border-radius: 50%;
  pointer-events: none;
  animation: gtb-spark 0.65s ease-out forwards;
}
@keyframes gtb-spark { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); } }
html.gtb-js .page-footer::after { display: none; }
.gtb-shelf { position: absolute; right: 48px; bottom: 100%; display: flex; align-items: flex-end; gap: 2px; }
.gtb-chibi {
  position: relative;
  height: 66px; padding: 0; border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  transform-origin: bottom center;
  transition: transform 0.45s var(--spring);
  -webkit-tap-highlight-color: transparent;
}
.gtb-chibi img { height: 100%; width: auto; display: block; }
.gtb-chibi:hover { transform: translateY(-4px) rotate(-3deg); }
.gtb-chibi.hop { animation: gtb-hop 0.6s var(--spring); }
.gtb-chibi .gtb-tag {
  position: absolute; left: 50%; bottom: 100%;
  translate: -50% 0; margin-bottom: 4px;
  padding: 3px 8px; border-radius: 999px;
  background: #f0eff4; color: #16161d;
  font: 800 11px/1.4 var(--mochi-heading);
  white-space: nowrap;
  animation: quint-pop 0.35s var(--spring) both;
}
@media (max-width: 767.98px) {
  .gtb-shelf { right: 12px; }
  .gtb-chibi { height: 48px; }
  .gtb-peek { width: 84px; height: 84px; translate: 0 8px; }
  .gtb-bubble { left: 76px; bottom: 66px; font-size: 12px; }
}

@keyframes mochi-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}