/*
 * Yaji — Forgejo theme
 *
 * Implements the Yaji web design language for Forgejo 16.
 *
 * One magenta accent, rose-tinted charcoal surfaces, quiet depth, square tabs,
 * 12/16/20px radii, 140ms color transitions, and a soft canvas glow. Forgejo
 * design tokens are mapped onto the --yaji-* palette at the bottom of the first
 * block; components consume the Forgejo roles, never literals.
 */

/* ---------------------------------------------------------------------------
 * 1. Yaji tokens
 * ------------------------------------------------------------------------- */

:root {
  color-scheme: dark;
  accent-color: var(--yaji-accent);

  /* Surfaces */
  --yaji-bg: #0b090b;
  --yaji-card: #151214;
  --yaji-input-bg: #0f0d0f;
  --yaji-surface: #191618;
  --yaji-surface-hover: #201b1f;
  --yaji-surface-raised: #1d191c;
  --yaji-surface-deep: #241f23;
  --yaji-surface-disabled: #100f10;

  /* Type */
  --yaji-text: #f8f1f5;
  --yaji-white: #ffffff;
  --yaji-muted: #bdacb6;
  --yaji-label: #c6b5bf;
  --yaji-placeholder: #9b8794;

  /* Lines */
  --yaji-line: #252024;
  --yaji-line-strong: #352e34;

  /* Accent */
  --yaji-accent: #e95db2;
  --yaji-accent-hover: #f27cc4;
  --yaji-accent-active: #d94aa3;
  --yaji-accent-bright: #f58bc9;
  --yaji-accent-bright-hover: #ffb3dc;
  --yaji-accent-ink: #1a0b14;
  --yaji-accent-ring: rgba(233, 93, 178, 0.24);
  --yaji-accent-10: rgba(233, 93, 178, 0.1);
  --yaji-accent-20: rgba(233, 93, 178, 0.2);
  --yaji-accent-28: rgba(233, 93, 178, 0.28);
  --yaji-accent-30: rgba(233, 93, 178, 0.3);
  --yaji-accent-40: rgba(233, 93, 178, 0.4);
  --yaji-accent-50: rgba(233, 93, 178, 0.5);
  --yaji-accent-60: rgba(233, 93, 178, 0.6);
  --yaji-accent-70: rgba(233, 93, 178, 0.7);
  --yaji-accent-80: rgba(233, 93, 178, 0.8);
  --yaji-accent-90: rgba(233, 93, 178, 0.9);

  /* Status */
  --yaji-error: #ffb4ab;
  --yaji-error-bg: #221214;
  --yaji-error-bg-hover: #2a171a;
  --yaji-error-line: #8a3a32;
  --yaji-error-ring: rgba(255, 180, 171, 0.18);
  --yaji-success: #9be3bd;
  --yaji-success-bg: #122019;
  --yaji-success-line: #2e5e45;
  --yaji-warning: #ffd8a8;
  --yaji-warning-bg: #221c10;
  --yaji-warning-line: #6b5a2e;
  --yaji-info: #a8d4f5;
  --yaji-info-bg: #101a22;
  --yaji-info-line: #2e4a5e;

  /* ANSI bright steps and diff tints */
  --yaji-ansi-bright-green: #c7f0d8;
  --yaji-ansi-bright-yellow: #ffe4bf;
  --yaji-ansi-bright-blue: #c7e5fa;
  --yaji-ansi-bright-cyan: #c0eee9;
  --yaji-diff-removed-word-bg: #4a2327;
  --yaji-diff-added-word-bg: #1d3a2a;
  --yaji-diff-removed-row-bg: #2a1416;
  --yaji-diff-added-row-bg: #122019;
  --yaji-diff-moved-row-bg: #2a2210;

  /* Content palette (labels, charts, syntax). Muted fills; bright variants
     are used when the color is text on a dark surface. */
  --yaji-red: #8a3a32;
  --yaji-red-light: #ffb4ab;
  --yaji-red-dark-1: #75302a;
  --yaji-red-dark-2: #612824;
  --yaji-orange: #7d4a24;
  --yaji-orange-light: #f5b98a;
  --yaji-orange-dark-1: #6b3f1f;
  --yaji-orange-dark-2: #5a351a;
  --yaji-yellow: #6b5a2e;
  --yaji-yellow-light: #ffd8a8;
  --yaji-yellow-dark-1: #5c4d27;
  --yaji-yellow-dark-2: #4e4121;
  --yaji-olive: #4e5528;
  --yaji-olive-light: #c9d68a;
  --yaji-olive-dark-1: #424822;
  --yaji-olive-dark-2: #373c1c;
  --yaji-green: #2e5e45;
  --yaji-green-light: #9be3bd;
  --yaji-green-dark-1: #275039;
  --yaji-green-dark-2: #20422f;
  --yaji-teal: #24575a;
  --yaji-teal-light: #8fd8d2;
  --yaji-teal-dark-1: #1e4a4d;
  --yaji-teal-dark-2: #193d40;
  --yaji-blue: #2e4a5e;
  --yaji-blue-light: #a8d4f5;
  --yaji-blue-dark-1: #273f50;
  --yaji-blue-dark-2: #203442;
  --yaji-violet: #4c3a63;
  --yaji-violet-light: #c9b5e8;
  --yaji-violet-dark-1: #413155;
  --yaji-violet-dark-2: #362947;
  --yaji-purple: #5a3a62;
  --yaji-purple-light: #d8b5e8;
  --yaji-purple-dark-1: #4d3154;
  --yaji-purple-dark-2: #402946;
  --yaji-pink: #7a3a5a;
  --yaji-pink-light: #f5b5d8;
  --yaji-pink-dark-1: #68314d;
  --yaji-pink-dark-2: #572940;
  --yaji-brown: #5a4636;
  --yaji-brown-light: #d8bfa8;
  --yaji-brown-dark-1: #4d3c2e;
  --yaji-brown-dark-2: #403226;
  --yaji-grey: #4a4448;
  --yaji-grey-light: #c6b5bf;
  --yaji-black: #0f0d0f;
  --yaji-black-light: #241f23;
  --yaji-black-dark-1: #0a080a;
  --yaji-black-dark-2: #050405;
  --yaji-gold: #e5c77a;

  /* Ambient and depth */
  --yaji-nav-bg: rgba(11, 9, 11, 0.72);
  --yaji-tooltip-bg: rgba(21, 18, 20, 0.96);
  --yaji-overlay: rgba(0, 0, 0, 0.72);
  --yaji-shadow-color: rgba(0, 0, 0, 0.6);
  --yaji-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45),
    0 28px 70px -30px rgba(0, 0, 0, 0.85);
  --yaji-shadow-menu: 0 1px 2px rgba(0, 0, 0, 0.45),
    0 18px 44px -18px rgba(0, 0, 0, 0.9);
  --yaji-glow-top: rgba(233, 93, 178, 0.18);
  --yaji-glow-bottom: rgba(233, 93, 178, 0.08);
  --yaji-row-stripe: rgba(248, 241, 245, 0.03);
  --yaji-reaction-bg: rgba(248, 241, 245, 0.07);
  --yaji-disabled-overlay: rgba(0, 0, 0, 0.2);
  --yaji-console-hover: rgba(248, 241, 245, 0.06);
}

/* ---------------------------------------------------------------------------
 * 2. Forgejo role mapping
 * ------------------------------------------------------------------------- */

:root {
  --is-dark-theme: true;

  /* Primary: --color-primary is the fill, --color-accent is the text/border
     step. The split keeps dark ink on the fill and bright magenta on surfaces. */
  --color-primary: var(--yaji-accent);
  --color-primary-contrast: var(--yaji-accent-ink);
  --color-primary-hover: var(--yaji-accent-hover);
  --color-primary-active: var(--yaji-accent-active);
  --color-primary-dark-1: var(--yaji-accent-bright);
  --color-primary-dark-2: var(--yaji-accent-bright);
  --color-primary-dark-3: var(--yaji-accent-bright-hover);
  --color-primary-dark-4: var(--yaji-accent-bright-hover);
  --color-primary-dark-5: var(--yaji-accent-bright-hover);
  --color-primary-dark-6: var(--yaji-accent-bright-hover);
  --color-primary-dark-7: var(--yaji-accent-bright-hover);
  --color-primary-light-1: var(--yaji-accent-hover);
  --color-primary-light-2: var(--yaji-accent-bright-hover);
  --color-primary-light-3: var(--yaji-accent-bright);
  --color-primary-light-4: var(--yaji-accent);
  --color-primary-light-5: var(--yaji-accent-hover);
  --color-primary-light-6: var(--yaji-input-bg);
  --color-primary-light-7: var(--yaji-line-strong);
  --color-primary-alpha-10: var(--yaji-accent-10);
  --color-primary-alpha-20: var(--yaji-accent-20);
  --color-primary-alpha-30: var(--yaji-accent-30);
  --color-primary-alpha-40: var(--yaji-accent-40);
  --color-primary-alpha-50: var(--yaji-accent-50);
  --color-primary-alpha-60: var(--yaji-accent-60);
  --color-primary-alpha-70: var(--yaji-accent-70);
  --color-primary-alpha-80: var(--yaji-accent-80);
  --color-primary-alpha-90: var(--yaji-accent-90);

  /* Secondary is the structural neutral: borders, dividers, quiet fills. */
  --color-secondary: var(--yaji-line);
  --color-secondary-dark-1: var(--yaji-line-strong);
  --color-secondary-dark-2: var(--yaji-line-strong);
  --color-secondary-dark-3: var(--yaji-muted);
  --color-secondary-dark-4: var(--yaji-muted);
  --color-secondary-dark-5: var(--yaji-label);
  --color-secondary-dark-6: var(--yaji-label);
  --color-secondary-dark-7: var(--yaji-text);
  --color-secondary-dark-8: var(--yaji-text);
  --color-secondary-dark-9: var(--yaji-text);
  --color-secondary-dark-10: var(--yaji-text);
  --color-secondary-dark-11: var(--yaji-text);
  --color-secondary-dark-12: var(--yaji-text);
  --color-secondary-dark-13: var(--yaji-text);
  --color-secondary-light-1: var(--yaji-surface-hover);
  --color-secondary-light-2: var(--yaji-surface-deep);
  --color-secondary-light-3: var(--yaji-bg);
  --color-secondary-light-4: var(--yaji-bg);
  --color-secondary-alpha-10: rgba(53, 46, 52, 0.1);
  --color-secondary-alpha-20: rgba(53, 46, 52, 0.2);
  --color-secondary-alpha-30: rgba(53, 46, 52, 0.3);
  --color-secondary-alpha-40: rgba(53, 46, 52, 0.4);
  --color-secondary-alpha-50: rgba(53, 46, 52, 0.5);
  --color-secondary-alpha-60: rgba(53, 46, 52, 0.6);
  --color-secondary-alpha-70: rgba(53, 46, 52, 0.7);
  --color-secondary-alpha-80: rgba(53, 46, 52, 0.8);
  --color-secondary-alpha-90: rgba(53, 46, 52, 0.9);
  --color-secondary-hover: var(--yaji-surface-hover);
  --color-secondary-active: var(--yaji-surface-deep);

  /* Console and terminal */
  --color-console-fg: var(--yaji-text);
  --color-console-fg-subtle: var(--yaji-muted);
  --color-console-bg: var(--yaji-input-bg);
  --color-console-border: var(--yaji-line);
  --color-console-hover-bg: var(--yaji-console-hover);
  --color-console-active-bg: var(--yaji-surface-deep);
  --color-console-menu-bg: var(--yaji-card);
  --color-console-menu-border: var(--yaji-line-strong);

  /* Content palette */
  --color-red: var(--yaji-red);
  --color-orange: var(--yaji-orange);
  --color-yellow: var(--yaji-yellow);
  --color-olive: var(--yaji-olive);
  --color-green: var(--yaji-green);
  --color-teal: var(--yaji-teal);
  --color-blue: var(--yaji-blue);
  --color-violet: var(--yaji-violet);
  --color-purple: var(--yaji-purple);
  --color-pink: var(--yaji-pink);
  --color-brown: var(--yaji-brown);
  --color-grey: var(--yaji-grey);
  --color-black: var(--yaji-black);
  --color-red-light: var(--yaji-red-light);
  --color-orange-light: var(--yaji-orange-light);
  --color-yellow-light: var(--yaji-yellow-light);
  --color-olive-light: var(--yaji-olive-light);
  --color-green-light: var(--yaji-green-light);
  --color-teal-light: var(--yaji-teal-light);
  --color-blue-light: var(--yaji-blue-light);
  --color-violet-light: var(--yaji-violet-light);
  --color-purple-light: var(--yaji-purple-light);
  --color-pink-light: var(--yaji-pink-light);
  --color-brown-light: var(--yaji-brown-light);
  --color-grey-light: var(--yaji-grey-light);
  --color-black-light: var(--yaji-black-light);
  --color-red-dark-1: var(--yaji-red-dark-1);
  --color-orange-dark-1: var(--yaji-orange-dark-1);
  --color-yellow-dark-1: var(--yaji-yellow-dark-1);
  --color-olive-dark-1: var(--yaji-olive-dark-1);
  --color-green-dark-1: var(--yaji-green-dark-1);
  --color-teal-dark-1: var(--yaji-teal-dark-1);
  --color-blue-dark-1: var(--yaji-blue-dark-1);
  --color-violet-dark-1: var(--yaji-violet-dark-1);
  --color-purple-dark-1: var(--yaji-purple-dark-1);
  --color-pink-dark-1: var(--yaji-pink-dark-1);
  --color-brown-dark-1: var(--yaji-brown-dark-1);
  --color-black-dark-1: var(--yaji-black-dark-1);
  --color-red-dark-2: var(--yaji-red-dark-2);
  --color-orange-dark-2: var(--yaji-orange-dark-2);
  --color-yellow-dark-2: var(--yaji-yellow-dark-2);
  --color-olive-dark-2: var(--yaji-olive-dark-2);
  --color-green-dark-2: var(--yaji-green-dark-2);
  --color-teal-dark-2: var(--yaji-teal-dark-2);
  --color-blue-dark-2: var(--yaji-blue-dark-2);
  --color-violet-dark-2: var(--yaji-violet-dark-2);
  --color-purple-dark-2: var(--yaji-purple-dark-2);
  --color-pink-dark-2: var(--yaji-pink-dark-2);
  --color-brown-dark-2: var(--yaji-brown-dark-2);
  --color-black-dark-2: var(--yaji-black-dark-2);
  --color-gold: var(--yaji-gold);

  /* Pure white is allowed for text and icons on any dark surface, but never
     on the accent fill (the primary button keeps --yaji-accent-ink). */
  --color-white: var(--yaji-white);
  --color-pure-black: #000000;

  /* ANSI */
  --color-ansi-black: var(--yaji-surface-disabled);
  --color-ansi-red: var(--yaji-red-light);
  --color-ansi-green: var(--yaji-green-light);
  --color-ansi-yellow: var(--yaji-warning);
  --color-ansi-blue: var(--yaji-blue-light);
  --color-ansi-magenta: var(--yaji-accent-bright);
  --color-ansi-cyan: var(--yaji-teal-light);
  --color-ansi-white: var(--yaji-label);
  --color-ansi-bright-black: var(--yaji-line-strong);
  --color-ansi-bright-red: var(--yaji-error);
  --color-ansi-bright-green: var(--yaji-ansi-bright-green);
  --color-ansi-bright-yellow: var(--yaji-ansi-bright-yellow);
  --color-ansi-bright-blue: var(--yaji-ansi-bright-blue);
  --color-ansi-bright-magenta: var(--yaji-accent-bright-hover);
  --color-ansi-bright-cyan: var(--yaji-ansi-bright-cyan);
  --color-ansi-bright-white: var(--yaji-text);

  /* Diff */
  --color-diff-removed-word-bg: var(--yaji-diff-removed-word-bg);
  --color-diff-added-word-bg: var(--yaji-diff-added-word-bg);
  --color-diff-removed-row-bg: var(--yaji-diff-removed-row-bg);
  --color-diff-added-row-bg: var(--yaji-diff-added-row-bg);
  --color-diff-moved-row-bg: var(--yaji-diff-moved-row-bg);
  --color-diff-removed-row-border: var(--yaji-error-line);
  --color-diff-moved-row-border: var(--yaji-warning-line);
  --color-diff-added-row-border: var(--yaji-success-line);
  --color-diff-inactive: var(--yaji-surface);

  /* Status */
  --color-error-border: var(--yaji-error-line);
  --color-error-bg: var(--yaji-error-bg);
  --color-error-bg-active: var(--yaji-error-bg-hover);
  --color-error-bg-hover: var(--yaji-error-bg-hover);
  --color-error-text: var(--yaji-error);
  --color-success-border: var(--yaji-success-line);
  --color-success-bg: var(--yaji-success-bg);
  --color-success-text: var(--yaji-success);
  --color-warning-border: var(--yaji-warning-line);
  --color-warning-bg: var(--yaji-warning-bg);
  --color-warning-text: var(--yaji-warning);
  --color-info-border: var(--yaji-info-line);
  --color-info-bg: var(--yaji-info-bg);
  --color-info-text: var(--yaji-info);
  --color-danger-bg: var(--yaji-error-bg);
  --color-red-badge: var(--yaji-error);
  --color-red-badge-bg: rgba(255, 180, 171, 0.12);
  --color-red-badge-hover-bg: rgba(255, 180, 171, 0.24);
  --color-green-badge: var(--yaji-success);
  --color-green-badge-bg: rgba(155, 227, 189, 0.12);
  --color-green-badge-hover-bg: rgba(155, 227, 189, 0.24);
  --color-yellow-badge: var(--yaji-warning);
  --color-yellow-badge-bg: rgba(255, 216, 168, 0.12);
  --color-yellow-badge-hover-bg: rgba(255, 216, 168, 0.24);
  --color-orange-badge: var(--yaji-orange-light);
  --color-orange-badge-bg: rgba(245, 185, 138, 0.12);
  --color-orange-badge-hover-bg: rgba(245, 185, 138, 0.24);

  /* Thin label colors */
  --color-thin-green: var(--yaji-success);
  --color-thin-red: var(--yaji-error);
  --color-thin-purple: var(--yaji-accent-bright);
  --color-thin-orange: var(--yaji-warning);
  --color-thin-red-highlight: var(--yaji-error);

  /* Base surfaces and type */
  --color-body: var(--yaji-bg);
  --color-box-header: var(--yaji-surface);
  --color-box-body: var(--yaji-card);
  --color-box-body-highlight: var(--yaji-surface-hover);
  --color-text-dark: var(--yaji-text);
  --color-text: var(--yaji-text);
  --color-text-light: var(--yaji-label);
  --color-text-light-1: var(--yaji-label);
  --color-text-light-2: var(--yaji-muted);
  --color-text-light-3: var(--yaji-placeholder);
  --color-footer: transparent;
  --color-timeline: var(--yaji-line-strong);
  --color-input-text: var(--yaji-text);
  --color-input-background: var(--yaji-input-bg);
  --color-input-toggle-background: var(--yaji-surface);
  --color-input-border: var(--yaji-line-strong);
  --color-input-border-hover: var(--yaji-line-strong);
  --color-header-wrapper: var(--yaji-nav-bg);
  --color-header-wrapper-transparent: transparent;
  --color-light: var(--yaji-disabled-overlay);
  --color-light-mimic-enabled: var(--yaji-disabled-overlay);
  --color-light-border: var(--yaji-line-strong);
  --color-hover: var(--yaji-surface-hover);
  --color-active: var(--yaji-surface-deep);
  --color-menu: var(--yaji-card);
  --color-card: var(--yaji-card);
  --fancy-card-bg: var(--yaji-surface-raised);
  --fancy-card-border: var(--yaji-line);
  --color-markup-table-row: var(--yaji-row-stripe);
  --color-markup-code-block: var(--yaji-input-bg);
  --color-markup-code-inline: var(--yaji-surface);
  --color-button: var(--yaji-surface);
  --color-code-bg: var(--yaji-input-bg);
  --color-shadow: var(--yaji-shadow-color);
  --color-secondary-bg: var(--yaji-surface);
  --color-text-focus: var(--yaji-text);
  --color-expand-button: var(--yaji-surface-raised);
  --color-placeholder-text: var(--yaji-placeholder);
  --color-editor-line-highlight: var(--yaji-surface-hover);
  --color-project-board-bg: var(--yaji-surface);
  --color-project-column-bg: var(--yaji-card);
  --color-project-board-dark-label: var(--yaji-muted);
  --color-caret: var(--yaji-accent-bright);
  --color-reaction-bg: var(--yaji-reaction-bg);
  --color-reaction-active-bg: var(--yaji-accent-30);
  --color-reaction-hover-bg: var(--yaji-accent-40);
  --color-tooltip-text: var(--yaji-text);
  --color-tooltip-bg: var(--yaji-tooltip-bg);
  --color-nav-bg: var(--yaji-nav-bg);
  --color-nav-hover-bg: var(--yaji-surface-hover);
  --color-secondary-nav-bg: transparent;
  --color-label-text: var(--yaji-text);
  --color-label-bg: var(--yaji-surface);
  --color-label-hover-bg: var(--yaji-surface-hover);
  --color-label-active-bg: var(--yaji-surface-deep);
  --color-label-bg-alt: var(--yaji-surface-raised);
  --color-accent: var(--yaji-accent-bright);
  --color-small-accent: var(--yaji-accent-bright);
  --color-highlight-fg: var(--yaji-text);
  --color-highlight-bg: var(--yaji-accent-20);
  --color-overlay-backdrop: var(--yaji-overlay);
  --color-selection-bg: var(--yaji-accent-28);
  --color-selection-fg: var(--yaji-text);
  --checkerboard-color-1: var(--yaji-surface-deep);
  --checkerboard-color-2: var(--yaji-input-bg);
  --color-indicator-offline: var(--yaji-muted);
  --color-indicator-offline-20: rgba(189, 172, 182, 0.1);
  --color-indicator-idle: var(--yaji-success);
  --color-indicator-idle-20: rgba(155, 227, 189, 0.1);
  --color-indicator-active: var(--yaji-accent-bright);
  --color-indicator-active-20: var(--yaji-accent-20);

  /* Type and shape */
  --fonts-proportional: "Inter", "Segoe UI", system-ui, -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  --font-weight-semibold: 650;
  --font-weight-bold: 700;
  --border-radius: 12px;
  --border-radius-medium: 12px;
  --border-radius-large: 16px;
  --border-radius-full: 99999px;
  --button-min-height: 36px;
  --button-padding-inline: 1.1rem;
  --button-spacing: 0.33rem;
  --dropdown-box-shadow: var(--yaji-shadow-menu);
  --dropdown-item-min-height: 34px;
  --dropdown-padding-inline: 0.75rem;
  --checkbox-size: 15px;
  --page-spacing: 16px;
}

/* ---------------------------------------------------------------------------
 * 3. Canvas and typography
 * ------------------------------------------------------------------------- */

html {
  font-size: 15px;
}

body {
  font-size: 15px;
  line-height: 21px;
  color: var(--yaji-text);
  background-color: var(--yaji-bg);
  background-image: radial-gradient(
      60rem 40rem at 50% -20%,
      var(--yaji-glow-top),
      transparent 62%
    ),
    radial-gradient(
      42rem 32rem at 100% 100%,
      var(--yaji-glow-bottom),
      transparent 62%
    );
  background-attachment: fixed;
}

::selection,
relative-time::part(relative-time)::selection,
absolute-date::part(absolute-date)::selection {
  background: var(--yaji-accent-28);
  color: var(--yaji-text);
}

* {
  scrollbar-color: var(--yaji-line-strong) transparent;
  scrollbar-width: thin;
}

h1,
h2,
h3,
h4,
h5,
h6,
.ui.header {
  font-weight: 650;
  letter-spacing: -0.02em;
}

a {
  color: var(--yaji-accent-bright);
  transition: color 140ms ease;
}

a:hover {
  color: var(--yaji-accent-bright-hover);
}

a.muted,
a.muted:hover,
.muted-links a,
.muted-links a:hover {
  color: var(--yaji-muted);
}

.markup a,
.comment .content a,
.ui.message a {
  color: var(--yaji-accent-bright);
}

.markup a:hover,
.comment .content a:hover,
.ui.message a:hover {
  color: var(--yaji-accent-bright-hover);
}

code,
kbd,
pre,
samp,
.mono {
  font-family: var(--fonts-monospace);
}

/* ---------------------------------------------------------------------------
 * 4. Application shell
 * ------------------------------------------------------------------------- */

#navbar {
  position: relative;
  z-index: 100;
  background: var(--yaji-nav-bg);
  border-bottom: 1px solid var(--yaji-line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

#navbar .ui.menu {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#navbar .item {
  border-radius: 9px;
  color: var(--yaji-muted);
  transition: color 140ms ease, background-color 140ms ease;
}

#navbar a.item:hover,
#navbar a.item:focus,
#navbar details.dropdown > summary:is(:hover, :focus),
#navbar details.dropdown[open] > summary,
#navbar button.item:hover,
#navbar button.item:focus {
  color: var(--yaji-text);
  background: var(--yaji-surface-hover);
}

#navbar a.item.active,
#navbar .item.active {
  color: var(--yaji-text);
  background: var(--yaji-surface);
}

#navbar a.item .notification_count,
#navbar a.item .header-stopwatch-dot {
  color: var(--yaji-accent-ink);
  border-color: var(--yaji-nav-bg);
}

#navbar a.item .notification_count,
#navbar a.item .header-stopwatch-dot {
  background: var(--yaji-accent);
}

#navbar details.dropdown > .content,
#navbar details.dropdown .menu,
#navbar .ui.dropdown .menu {
  background: var(--yaji-card);
  border: 1px solid var(--yaji-line);
  border-radius: 12px;
  box-shadow: var(--yaji-shadow-menu);
}

.secondary-nav {
  background: transparent !important;
}

.repository .secondary-nav {
  padding-top: 16px;
}

.repo-header .flex-item-title {
  flex-wrap: nowrap;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.repo-header .flex-item-title a.muted:hover {
  color: var(--yaji-text);
}

.page-footer {
  background: transparent;
  border-top: 1px solid var(--yaji-line);
  color: var(--yaji-muted);
}

.page-footer .right-links > a {
  border-inline-start-color: var(--yaji-line);
}

/* ---------------------------------------------------------------------------
 * 5. Tabs — square corners, straight active rule, never pills
 * ------------------------------------------------------------------------- */

.ui.tabular.menu,
.ui.secondary.pointing.tabular.menu {
  border: 0;
  border-bottom: 1px solid var(--yaji-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ui.tabular.menu .item,
.ui.secondary.pointing.tabular.menu .item {
  border: 0 solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
  background: transparent;
  color: var(--yaji-muted);
  margin-bottom: -1px;
  transition: color 140ms ease, border-color 140ms ease;
}

.ui.tabular.menu .item:hover,
.ui.secondary.pointing.tabular.menu .item:hover {
  background: transparent;
  color: var(--yaji-label);
  border-bottom-color: transparent;
}

.ui.tabular.menu .active.item,
.ui.tabular.menu .active.item:hover,
.ui.secondary.pointing.tabular.menu .active.item,
.ui.secondary.pointing.tabular.menu .active.item:hover,
.ui.secondary.pointing.tabular.menu .active.item:focus {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--yaji-accent) !important;
  border-radius: 0 !important;
  box-shadow: none;
  color: var(--yaji-text) !important;
  font-weight: 650;
}

.ui.tabular.menu .active.item > .svg,
.ui.secondary.pointing.tabular.menu .active.item > .svg {
  color: var(--yaji-accent-bright);
}

/* ---------------------------------------------------------------------------
 * 6. Surfaces — cards, segments, menus, modals
 * ------------------------------------------------------------------------- */

.ui.card,
.ui.cards > .card {
  background: var(--yaji-card);
  border: 1px solid var(--yaji-line);
  border-radius: 16px;
  box-shadow: var(--yaji-shadow-card);
}

.ui.card > .content,
.ui.cards > .card > .content {
  border-top-color: var(--yaji-line);
}

.ui.card > .extra,
.ui.cards > .card > .extra {
  border-block-start-color: var(--yaji-line) !important;
}

.ui.card > .content:first-child,
.ui.cards > .card > .content:first-child {
  border-radius: 16px 16px 0 0;
}

.ui.card > :last-child,
.ui.cards > .card > :last-child {
  border-radius: 0 0 16px 16px;
}

.ui.card > :only-child,
.ui.cards > .card > :only-child {
  border-radius: 16px !important;
}

.ui.card a:hover,
.ui.cards a.card:hover,
a.ui.card:hover {
  border-color: var(--yaji-line-strong);
  background: var(--yaji-card);
}

.ui.segment {
  background: var(--yaji-card);
  border: 1px solid var(--yaji-line);
  border-radius: 16px;
}

.ui.segments {
  background: var(--yaji-card);
  border: 1px solid var(--yaji-line);
  border-radius: 16px;
}

.ui.attached.segment,
.ui.top.attached.segment:only-child,
.ui.bottom.attached.segment:only-child {
  background: var(--yaji-card);
  border-color: var(--yaji-line);
}

.ui.attached.header {
  background: var(--yaji-surface);
  border-color: var(--yaji-line);
}

.ui.top.attached.header {
  border-radius: 16px 16px 0 0;
}

.ui.bottom.attached.header {
  border-radius: 0 0 16px 16px;
}

.ui.attached.header:not(.top):not(.bottom) {
  border-radius: 16px;
}

.ui.attached.segment:only-child {
  border-radius: 16px;
}

.ui.attached.segment:first-child {
  border-start-start-radius: 16px;
  border-start-end-radius: 16px;
}

.ui.attached.segment:last-child {
  border-end-start-radius: 16px;
  border-end-end-radius: 16px;
}

.ui.message {
  border-radius: 12px;
  border-width: 1px;
}

.ui.menu:not(.secondary):not(.tabular):not(.pointing):not(.text):not(
    .borderless
  ),
.ui.vertical.menu,
details.dropdown > .content,
details.dropdown > .menu {
  background: var(--yaji-card);
  border: 1px solid var(--yaji-line);
  border-radius: 12px;
  box-shadow: var(--yaji-shadow-menu);
}

.ui.dropdown .menu,
.ui.selection.dropdown .menu {
  background: var(--yaji-card);
  border: 1px solid var(--yaji-line);
  border-radius: 12px;
  box-shadow: var(--yaji-shadow-menu);
}

.ui.menu .item,
.ui.dropdown .menu > .item {
  color: var(--yaji-text);
}

.ui.menu .item:before,
.ui.vertical.menu .item:before {
  background: var(--yaji-line);
}

.ui.menu a.item:hover,
.ui.menu .dropdown.item:hover,
.ui.menu details.item summary:hover,
.ui.dropdown .menu > .item:hover {
  color: var(--yaji-text);
  background: var(--yaji-surface-hover);
}

.ui.menu .active.item,
.ui.menu .active.item:hover,
.ui.vertical.menu .active.item,
.ui.vertical.menu .active.item:hover,
.ui.dropdown .menu > .active.item {
  color: var(--yaji-text);
  background: var(--yaji-surface);
}

.ui.vertical.menu > .item,
.ui.secondary.vertical.menu > .item {
  border-radius: 9px !important;
}

.ui.vertical.menu .header.item {
  background: var(--yaji-surface);
  border-radius: 9px;
}

.ui.modal,
dialog {
  background: var(--yaji-card);
  border: 1px solid var(--yaji-line);
  border-radius: 16px;
  box-shadow: var(--yaji-shadow-menu);
}

.ui.modal > .header,
.ui.modal > .content,
.ui.modal form > .content,
dialog header,
dialog .content {
  background: var(--yaji-card);
  border-color: var(--yaji-line);
  color: var(--yaji-text);
}

.ui.modal > .header,
dialog header {
  border-radius: 16px 16px 0 0;
}

.ui.modal > .actions,
dialog footer {
  background: var(--yaji-surface);
  border-color: var(--yaji-line);
  border-radius: 0 0 16px 16px;
}

.ui.modal > .close.icon {
  color: var(--yaji-muted);
}

.ui.modal > .close.icon:hover {
  color: var(--yaji-text);
}

.ui.search > .results {
  background: var(--yaji-card);
  border: 1px solid var(--yaji-line);
  border-radius: 12px;
  box-shadow: var(--yaji-shadow-menu);
}

.ui.search > .results .result {
  background: transparent;
  border-color: var(--yaji-line);
  color: var(--yaji-text);
}

.ui.search > .results .result:hover {
  background: var(--yaji-surface-hover);
}

.ui.table {
  background: var(--yaji-card);
  border-color: var(--yaji-line);
  border-radius: 12px;
}

.ui.table > thead > tr > th {
  background: var(--yaji-surface);
  border-bottom-color: var(--yaji-line);
  color: var(--yaji-label);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ui.table > tbody > tr > td,
.ui.table > tfoot > tr > td {
  border-top-color: var(--yaji-line);
}

.ui.table.striped > tbody > tr:nth-child(2n) {
  background: var(--yaji-row-stripe);
}

/* ---------------------------------------------------------------------------
 * 7. Controls — buttons, fields, checks
 * ------------------------------------------------------------------------- */

.ui.button {
  min-height: var(--button-min-height);
  border: 1px solid var(--yaji-line-strong);
  border-radius: 12px;
  background: var(--yaji-surface);
  color: var(--yaji-text);
  font-size: 14px;
  font-weight: 650;
  box-shadow: none;
  transition: color 140ms ease, background-color 140ms ease,
    border-color 140ms ease, transform 140ms ease;
}

.ui.button:hover,
.ui.button:focus {
  border-color: var(--yaji-line-strong);
  background: var(--yaji-surface-hover);
  color: var(--yaji-text);
}

.ui.button:active,
.ui.active.button,
.ui.active.button:hover,
.ui.active.button:focus {
  background: var(--yaji-surface-deep);
  color: var(--yaji-text);
}

.ui.primary.button,
.ui.primary.buttons .button {
  border-color: var(--yaji-accent);
  background: var(--yaji-accent);
  color: var(--yaji-accent-ink);
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover,
.ui.primary.button:focus,
.ui.primary.buttons .button:focus {
  border-color: var(--yaji-accent-hover);
  background: var(--yaji-accent-hover);
  color: var(--yaji-accent-ink);
  transform: translateY(-1px);
}

.ui.primary.button:active,
.ui.primary.buttons .button:active {
  border-color: var(--yaji-accent-active);
  background: var(--yaji-accent-active);
  color: var(--yaji-accent-ink);
  transform: none;
}

.ui.primary.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--yaji-accent-ring);
}

.ui.button:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--yaji-accent-bright);
  outline-offset: 2px;
}

.ui.button:disabled,
.ui.button.disabled,
.ui.button[disabled],
.ui.primary.button:disabled,
.ui.primary.button.disabled,
.ui.primary.button[disabled] {
  border-color: var(--yaji-line);
  background: var(--yaji-surface-disabled);
  color: var(--yaji-muted);
  opacity: 1;
  cursor: not-allowed;
  transform: none;
}

.ui.button:disabled:hover,
.ui.button.disabled:hover,
.ui.button[disabled]:hover,
.ui.primary.button:disabled:hover,
.ui.primary.button.disabled:hover,
.ui.primary.button[disabled]:hover {
  border-color: var(--yaji-line);
  background: var(--yaji-surface-disabled);
  color: var(--yaji-muted);
  transform: none;
}

.ui.basic.button,
.ui.basic.buttons .button {
  border: 1px solid var(--yaji-line-strong);
  background: transparent;
  color: var(--yaji-label);
  box-shadow: none;
}

.ui.basic.button:hover,
.ui.basic.buttons .button:hover,
.ui.basic.button:focus,
.ui.basic.buttons .button:focus {
  border-color: var(--yaji-line-strong);
  background: var(--yaji-surface-hover);
  color: var(--yaji-text);
}

.ui.basic.primary.button,
.ui.basic.primary.buttons .button {
  border-color: var(--yaji-accent);
  background: transparent;
  color: var(--yaji-accent-bright);
}

.ui.basic.primary.button:hover,
.ui.basic.primary.buttons .button:hover,
.ui.basic.primary.button:focus,
.ui.basic.primary.buttons .button:focus {
  border-color: var(--yaji-accent-bright);
  background: var(--yaji-accent-10);
  color: var(--yaji-accent-bright-hover);
}

.ui.input > input,
.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="file"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"],
.ui.form textarea,
.ui.form select,
.ui.selection.dropdown,
.ui.search > .prompt {
  border: 1px solid var(--yaji-line-strong);
  border-radius: 12px;
  background: var(--yaji-input-bg);
  color: var(--yaji-text);
  transition: color 140ms ease, background-color 140ms ease,
    border-color 140ms ease;
}

.ui.input.focus > input,
.ui.input > input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.form select:focus,
.ui.selection.dropdown:focus,
.ui.selection.active.dropdown,
.ui.selection.active.dropdown:hover,
.ui.search > .prompt:focus {
  border-color: var(--yaji-accent-bright);
  box-shadow: 0 0 0 3px var(--yaji-accent-ring);
  outline: none;
}

.ui.form input:not([type]):focus,
.ui.form input[type="date"]:focus,
.ui.form input[type="datetime-local"]:focus,
.ui.form input[type="email"]:focus,
.ui.form input[type="file"]:focus,
.ui.form input[type="number"]:focus,
.ui.form input[type="password"]:focus,
.ui.form input[type="search"]:focus,
.ui.form input[type="tel"]:focus,
.ui.form input[type="text"]:focus,
.ui.form input[type="time"]:focus,
.ui.form input[type="url"]:focus,
.ui.form textarea:focus {
  border-color: var(--yaji-accent-bright);
  border-radius: 12px;
  background: var(--yaji-input-bg);
  color: var(--yaji-text);
  box-shadow: 0 0 0 3px var(--yaji-accent-ring);
  outline: none;
}

::placeholder {
  color: var(--yaji-placeholder);
  opacity: 1;
}

.ui.form .field > label,
.ui.form .fields > .field > label {
  margin-bottom: 7px;
  color: var(--yaji-label);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ui.form .field .help,
.ui.form .field .prompt,
.ui.form .field .ui.pointing.label {
  color: var(--yaji-muted);
  font-size: 12.5px;
}

.ui.form .field.error > label {
  color: var(--yaji-error);
}

.ui.form .field.error input,
.ui.form .field.error textarea,
.ui.form .field.error select,
.ui.form .field.error .ui.selection.dropdown {
  border-color: var(--yaji-error-line);
  background: var(--yaji-error-bg);
  color: var(--yaji-error);
}

.ui.form .field.error input:focus,
.ui.form .field.error textarea:focus,
.ui.form .field.error select:focus {
  box-shadow: 0 0 0 3px var(--yaji-error-ring);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--yaji-error-line);
  background-color: var(--yaji-error-bg);
}

input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--yaji-error-ring);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--yaji-text);
  -webkit-box-shadow: 0 0 0 100px var(--yaji-input-bg) inset !important;
  border-color: var(--yaji-line-strong) !important;
  caret-color: var(--yaji-accent-bright);
}

:is(form, .markup) input[type="checkbox"] {
  border-color: var(--yaji-line-strong);
  border-radius: 4px;
  background: var(--yaji-input-bg);
}

:is(form, .markup) input[type="checkbox"]:hover,
:is(form, .markup) input[type="checkbox"]:active {
  border-color: var(--yaji-accent-bright);
}

:is(form, .markup) input[type="checkbox"]:checked {
  border-color: var(--yaji-accent);
  background: var(--yaji-accent);
}

:is(form, .markup) input[type="checkbox"]:checked::after {
  background: var(--yaji-accent-ink);
}

input[type="radio"] {
  accent-color: var(--yaji-accent);
}

.ui.checkbox input[type="checkbox"]:focus-visible + label::before,
.ui.checkbox input[type="radio"]:focus-visible + label::before {
  box-shadow: 0 0 0 3px var(--yaji-accent-ring);
}

.ui.toggle.checkbox input:checked ~ label::before,
.ui.toggle.checkbox input:focus:checked ~ label::before {
  background: var(--yaji-accent) !important;
}

.ui.toggle.checkbox input:focus ~ label::before {
  box-shadow: 0 0 0 3px var(--yaji-accent-ring);
}

/* ---------------------------------------------------------------------------
 * 8. Status, code, and feedback
 * ------------------------------------------------------------------------- */

.ui.error.message .header,
.ui.negative.message .header,
.ui.red.message .header {
  color: var(--yaji-error);
}

.ui.success.message .header,
.ui.positive.message .header,
.ui.green.message .header {
  color: var(--yaji-success);
}

.ui.warning.message .header,
.ui.yellow.message .header {
  color: var(--yaji-warning);
}

.ui.info.message .header,
.ui.blue.message .header {
  color: var(--yaji-info);
}

.delete-button,
.delete-button:hover,
.delete-button:focus {
  color: var(--yaji-error);
}

.ui.basic.red.button,
.ui.basic.negative.button {
  border-color: var(--yaji-error-line);
  color: var(--yaji-error);
}

.ui.basic.green.button,
.ui.basic.positive.button {
  border-color: var(--yaji-success-line);
  color: var(--yaji-success);
}

.markup pre,
.markup .highlight,
.markup .file-preview-box,
.file-view,
.repository .diff-file-box {
  border-radius: 12px;
}

.markup pre,
.markup .highlight {
  border: 1px solid var(--yaji-line);
  background: var(--yaji-input-bg);
}

.markup code {
  border-radius: 4px;
  background: var(--yaji-surface);
  color: var(--yaji-text);
}

.markup blockquote {
  border-inline-start: 3px solid var(--yaji-accent);
  color: var(--yaji-muted);
}

.markup table {
  border-color: var(--yaji-line);
}

.markup table th {
  background: var(--yaji-surface);
  color: var(--yaji-label);
}

.markup table th,
.markup table td {
  border-color: var(--yaji-line);
}

.comment .content,
.comment-container,
.repository .comment-list .comment .content {
  border-color: var(--yaji-line);
}

.comment-header {
  background: var(--yaji-surface);
  border-bottom: 1px solid var(--yaji-line) !important;
}

.CodeMirror-selected {
  background: var(--yaji-accent-28) !important;
  color: var(--yaji-text) !important;
}

.CodeMirror-focused {
  border-color: var(--yaji-accent-bright) !important;
  box-shadow: 0 0 0 3px var(--yaji-accent-ring);
}

.tippy-box {
  border: 1px solid var(--yaji-line);
  border-radius: 12px;
  background: var(--yaji-card);
  box-shadow: var(--yaji-shadow-menu);
  color: var(--yaji-text);
}

.tippy-box[data-theme="menu"] .tippy-content,
.tippy-box[data-theme="box-with-header"] .tippy-content {
  border-radius: 12px;
  background: var(--yaji-card);
}

/* ---------------------------------------------------------------------------
 * 9. Focus, motion, responsive
 * ------------------------------------------------------------------------- */

a:focus-visible {
  outline: 2px solid var(--yaji-accent-bright);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .ui.primary.button:hover {
    transform: none;
  }
}

@media (max-width: 480px) {
  .user.signin .ui.middle.page.grid > .column {
    max-width: 100% !important;
  }

  .user.signin .ui.container.fluid:first-child {
    border-radius: 16px;
    padding: 24px;
  }

  .ui.card,
  .ui.cards > .card,
  .ui.segment {
    border-radius: 16px;
  }
}

/* ---------------------------------------------------------------------------
 * 10. Focal single-column card (sign in, setup, empty states)
 * ------------------------------------------------------------------------- */

.user.signin .ui.middle.page.grid > .column {
  max-width: 420px !important;
  margin-inline: auto;
}

.user.signin .ui.container.fluid:first-child {
  padding: clamp(28px, 4vw, 40px);
  border: 1px solid var(--yaji-line);
  border-radius: 20px;
  background: var(--yaji-card);
  box-shadow: var(--yaji-shadow-card);
}

.user.signin .ui.container.fluid:first-child .ui.top.attached.header {
  padding: 0 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--yaji-text);
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.02em;
  box-shadow: none;
}

.user.signin .ui.container.fluid:first-child .ui.attached.segment {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.user.signin .ui.form .field {
  margin-bottom: 16px;
}

.user.signin .ui.form .field:last-child {
  margin-top: 22px;
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * 11. Syntax highlighting — functional hues only, no decorative palette
 * ------------------------------------------------------------------------- */

.chroma .bp,
.chroma .na,
.chroma .nb,
.chroma .nf,
.chroma .ni {
  color: var(--yaji-warning);
}

.chroma .c,
.chroma .c1,
.chroma .ch,
.chroma .cm,
.chroma .go {
  color: var(--yaji-muted);
  font-style: italic;
}

.chroma .cp,
.chroma .cpf,
.chroma .cs {
  color: var(--yaji-info);
}

.chroma .dl,
.chroma .il,
.chroma .kc,
.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .mo,
.chroma .no {
  color: var(--yaji-info);
}

.chroma .gd {
  color: var(--yaji-error);
  background-color: var(--yaji-error-bg);
}

.chroma .ge {
  color: var(--yaji-warning);
  font-style: italic;
}

.chroma .gh {
  color: var(--yaji-accent-bright);
  font-weight: 650;
}

.chroma .gi {
  color: var(--yaji-success);
  background-color: var(--yaji-success-bg);
}

.chroma .gp {
  color: var(--yaji-label);
}

.chroma .gr,
.chroma .gt {
  color: var(--yaji-error);
}

.chroma .gs {
  color: var(--yaji-text);
  font-weight: 650;
}

.chroma .gu {
  color: var(--yaji-success);
}

.chroma .k,
.chroma .kd,
.chroma .kn,
.chroma .kr,
.chroma .kt,
.chroma .nl,
.chroma .nt,
.chroma .o,
.chroma .ow {
  color: var(--yaji-accent-bright);
}

.chroma .kp {
  color: var(--yaji-accent-bright-hover);
}

.chroma .n,
.chroma .nn,
.chroma .nv,
.chroma .nx,
.chroma .p,
.chroma .w {
  color: var(--yaji-text);
}

.chroma .nc {
  color: var(--yaji-warning);
  font-weight: 650;
}

.chroma .nd {
  color: var(--yaji-success);
}

.chroma .ne {
  color: var(--yaji-error);
}

.chroma .s,
.chroma .s1,
.chroma .s2,
.chroma .sa,
.chroma .sb,
.chroma .sc,
.chroma .sd,
.chroma .sh,
.chroma .si,
.chroma .sx {
  color: var(--yaji-success);
}

.chroma .se,
.chroma .ss {
  color: var(--yaji-accent-bright-hover);
}

.chroma .sr {
  color: var(--yaji-info);
}

.chroma .vc,
.chroma .vg,
.chroma .vi {
  color: var(--yaji-info);
}

/* ---------------------------------------------------------------------------
 * 12. Joined controls — one radius, one border
 * ------------------------------------------------------------------------- */

.ui.action.input:not([class*="left action"]) > input {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.ui.action.input:not([class*="left action"]) > .button,
.ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.ui.action.input[class*="left action"] > input {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.ui.action.input[class*="left action"] > .button,
.ui.action.input[class*="left action"] > .ui.dropdown.selection {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

#user-heatmap .vch__day__square {
  stroke: var(--yaji-line);
  stroke-width: 0.5px;
}

/* ---------------------------------------------------------------------------
 * 13. Page titles
 * ------------------------------------------------------------------------- */

.repository.view.issue .issue-title h1 {
  font-size: 28px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
 * 14. Native form controls that are not wrapped by .ui.form/.ui.input
 * ------------------------------------------------------------------------- */

:is(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="tel"],
    textarea
  ):not(.search) {
  border: 1px solid var(--yaji-line-strong);
  border-radius: 12px;
  background-color: var(--yaji-input-bg);
  color: var(--yaji-text);
  transition: color 140ms ease, background-color 140ms ease,
    border-color 140ms ease;
}

:is(
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="tel"],
    textarea
  ):not(.search):focus {
  border-color: var(--yaji-accent-bright);
  box-shadow: 0 0 0 3px var(--yaji-accent-ring);
  outline: none;
}

.ui .dropzone,
.ui.form .field .dropzone,
.dropzone {
  border-radius: 12px !important;
  border-color: var(--yaji-line-strong);
}

/* ---------------------------------------------------------------------------
 * 15. Signed-out home — restrained hero, no decorative accent
 * ------------------------------------------------------------------------- */

.home .logo {
  width: 96px;
  height: 96px;
  max-width: 96px;
}

.home .hero .title {
  margin: 16px 0 8px;
  color: var(--yaji-text);
  font-size: 28px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.home .hero h2 {
  margin: 0;
  color: var(--yaji-muted);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* The Yaji home is one focal hero; Forgejo's feature grids are not shown. */
.home > .ui.stackable.middle.very.relaxed.page.grid {
  display: none;
}

/* ---------------------------------------------------------------------------
 * 16. Comment cards — Forgejo pins 4px corners on comment header/body
 * ------------------------------------------------------------------------- */

.repository.view.issue .comment-list .comment .comment-container {
  border-radius: 16px;
}

.repository.view.issue .comment-list .comment > .content > div:first-child {
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
}

.repository.view.issue .comment-list .comment > .content > div:last-child {
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}

/* ---------------------------------------------------------------------------
 * 17. Repository summary and attached tables
 * ------------------------------------------------------------------------- */

.ui.segments:not(.horizontal) > .segment:only-child {
  border-radius: 16px;
}

.ui.segments:not(.horizontal) > .segment:first-child {
  border-radius: 16px 16px 0 0;
}

.ui.segments:not(.horizontal) > .segment:last-child {
  border-radius: 0 0 16px 16px;
}

.ui.attached.table:last-child,
.ui.attached.table:only-child {
  border-end-start-radius: 16px;
  border-end-end-radius: 16px;
}

.ui.attached.table:first-child {
  border-start-start-radius: 16px;
  border-start-end-radius: 16px;
}

/* Keep a single-segment group rounded on every corner. This must follow the
   first/last-child rules above so it wins the cascade. */
.ui.segments:not(.horizontal) > .segment:only-child {
  border-radius: 16px;
}

.repository.file.list .ui.table {
  border-end-start-radius: 16px;
  border-end-end-radius: 16px;
}

/* Normalize all interactive transitions to the Yaji 140ms step. */
a,
.ui.button,
.ui.menu .item,
.ui.dropdown .menu > .item,
.ui.input > input,
.ui.form input,
.ui.form textarea,
.ui.form select,
.ui.selection.dropdown {
  transition-duration: 140ms;
  transition-timing-function: ease;
}

/* Markdown headings follow the Yaji heading scale. */
.markup h1 {
  font-size: 28px;
  line-height: 1.25;
}

.markup h2 {
  font-size: 24px;
  line-height: 1.3;
}

.markup h3 {
  font-size: 20px;
  line-height: 1.35;
}

.markup h4 {
  font-size: 18px;
  line-height: 1.4;
}

.markup h5,
.markup h6 {
  font-size: 16px;
  line-height: 1.5;
}

/* Forgejo's inline commit-description expander is a 16px micro-button. The
   generic .ui.button min-height and 12px radius make it far too tall. */
.ui.button.ellipsis-button {
  min-height: 14px;
  height: 16px;
  border-radius: 4px;
  background: var(--yaji-surface);
  border-color: var(--yaji-line-strong);
  color: var(--yaji-muted);
  font-weight: 600 !important;
}

.ui.button.ellipsis-button:hover,
.ui.button.ellipsis-button:focus {
  background: var(--yaji-surface-hover);
  border-color: var(--yaji-line-strong);
  color: var(--yaji-text);
  transform: none;
}

/* Align every control in the repository file toolbar to the compact height. */
.repo-button-row .button,
.repo-button-row .ui.button,
.repo-button-row details.dropdown > summary {
  min-height: 34px;
  height: 34px;
}

/* Clip the last file row's hover surface to the table's rounded corners. */
.repository.file.list #repo-files-table tbody tr:hover {
  background-color: transparent;
}

.repository.file.list #repo-files-table tbody tr:hover > td {
  background-color: var(--yaji-surface-hover);
}

.repository.file.list #repo-files-table tbody tr:last-child > td:first-child {
  border-bottom-left-radius: 16px;
}

.repository.file.list #repo-files-table tbody tr:last-child > td:last-child {
  border-bottom-right-radius: 16px;
}

/* The file browser is one panel: its search bar top and table bottom share
   the 16px panel radius instead of mixing 12px and 16px outer corners. */
.repository.file.list .code-search {
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
}

/* Center the focal home hero (logo + slogan) between the masthead and footer. */
.full.height:has(> .page-content.home) {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.full.height:has(> .page-content.home) > #navbar {
  flex: none;
}

.full.height:has(> .page-content.home) > .page-content.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* The clone URL must match the protocol/copy buttons' height in the joined
   clone control; Forgejo's .tiny input otherwise leaves a 4px vertical step. */
.repository .clone-panel #repo-clone-url {
  height: 34px;
  padding-block: 0;
}

/* The Actions job rail is rendered as a pane. Forgejo paints it with the page
   canvas, which reads as a black cut-out next to the log panel. */
#repo-action-view .action-view-left {
  padding: 8px;
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
  background: var(--color-box-body);
}