@font-face {
  font-family: "Noto Sans";
  src: url("/static/fonts/NotoSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/static/fonts/NotoSans-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/static/fonts/NotoSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("/static/fonts/NotoSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hack";
  src: url("/static/fonts/Hack-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hack";
  src: url("/static/fonts/Hack-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light dark;
  --bulma-family-primary: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bulma-family-code: "Hack", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* GTR primary — #002944 dark navy */
  --bulma-primary-h: 204deg;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 13%;
  /* GTR link/info — #0099D0 bright blue */
  --bulma-link-h: 196deg;
  --bulma-link-s: 100%;
  --bulma-link-l: 41%;
  --bulma-info-h: 196deg;
  --bulma-info-s: 100%;
  --bulma-info-l: 41%;
  /* Success — #56A300 (GTR semantic, brand-harmonious green) */
  --bulma-success-h: 88deg;
  --bulma-success-s: 100%;
  --bulma-success-l: 32%;
  /* Warning — #E8A900 */
  --bulma-warning-h: 43deg;
  --bulma-warning-s: 100%;
  --bulma-warning-l: 45%;
  /* Danger — #C0392B */
  --bulma-danger-h: 6deg;
  --bulma-danger-s: 64%;
  --bulma-danger-l: 46%;
}

html[data-theme="light"] {
  color-scheme: light;
  --bulma-scheme-brightness: light;
  --bulma-primary-invert-l: 100%;
  --bulma-link-invert-l: 100%;
  --bulma-info-invert-l: 100%;
  --bulma-success-invert-l: 100%;
  --bulma-warning-invert-l: 20%;
  --bulma-danger-invert-l: 100%;
  --bulma-scheme-main-l: 100%;
  --bulma-scheme-main-bis-l: 98%;
  --bulma-scheme-main-ter-l: 96%;
  --bulma-background-l: 96%;
  --bulma-border-weak-l: 93%;
  --bulma-border-l: 86%;
  --bulma-text-weak-l: 48%;
  --bulma-text-l: 29%;
  --bulma-text-strong-l: 21%;
  --bulma-text-title-l: 14%;
  --bulma-soft-l: 90%;
  --bulma-bold-l: 20%;
  --bulma-soft-invert-l: 20%;
  --bulma-bold-invert-l: 90%;
  --bulma-light-l: 90%;
  --bulma-hover-background-l-delta: -5%;
  --bulma-active-background-l-delta: -10%;
  --bulma-hover-border-l-delta: -10%;
  --bulma-active-border-l-delta: -20%;
  --bulma-hover-color-l-delta: -5%;
  --bulma-active-color-l-delta: -10%;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bulma-scheme-brightness: dark;
  --bulma-scheme-main-l: 9%;
  --bulma-scheme-main-bis-l: 11%;
  --bulma-scheme-main-ter-l: 13%;
  --bulma-background-l: 14%;
  --bulma-border-weak-l: 21%;
  --bulma-border-l: 24%;
  --bulma-text-weak-l: 53%;
  --bulma-text-l: 71%;
  --bulma-text-strong-l: 93%;
  --bulma-text-title-l: 100%;
  --bulma-soft-l: 20%;
  --bulma-bold-l: 90%;
  --bulma-soft-invert-l: 90%;
  --bulma-bold-invert-l: 20%;
  --bulma-hover-background-l-delta: 5%;
  --bulma-active-background-l-delta: 10%;
  --bulma-hover-border-l-delta: 10%;
  --bulma-active-border-l-delta: 20%;
  --bulma-hover-color-l-delta: 5%;
  --bulma-active-color-l-delta: 10%;
}

html[data-theme="dark"] {
  /* In dark theme the primary interactive shifts to GTR secondary
     so it stays readable against the dark navy surface. */
  --bulma-primary-h: 196deg;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 41%;
  --bulma-link-h: 196deg;
  --bulma-link-s: 78%;
  --bulma-link-l: 65%;
  /* Surface scheme — derived from GTR dark-theme tokens
     (bg #0B1A24, bg-alt #0E1820, surface #132838) */
  --bulma-scheme-main: hsl(206deg, 53%, 9%);
  --bulma-scheme-main-bis: hsl(207deg, 39%, 9%);
  --bulma-scheme-main-ter: hsl(207deg, 50%, 15%);
  --bulma-background: hsl(207deg, 50%, 15%);
  --bulma-text: hsl(210deg, 25%, 93%);
  --bulma-text-strong: hsl(210deg, 25%, 98%);
  --bulma-text-weak: hsl(210deg, 15%, 73%);
  --bulma-border: hsl(208deg, 32%, 24%);
  --bulma-border-weak: hsl(207deg, 32%, 18%);
}

.chunk-line { margin: 0; padding: 0 .25rem; white-space: pre-wrap;
              font-family: var(--bulma-family-code); font-size: 12px; }
.chunk-line mark { background: #fef08a; padding: 0 2px; border-radius: 2px; }
.box h2.subtitle { margin-top: 0; }

#custom-chips { min-height: 2.25rem; }
#custom-chips .sluice-chip input[type="hidden"] { display: none; }

.sluice-selection-popup {
  position: absolute;
  z-index: 50;
  background: #2b2b2b;
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
}
.sluice-selection-popup:hover { background: #444; }

.sluice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--bulma-background, var(--bulma-scheme-main));
  border-bottom: 1px solid var(--bulma-border-weak, hsl(0, 0%, 90%));
}
.sluice-header-brand .sluice-logo {
  height: 2rem; width: auto; display: block;
}
.sluice-header-brand .sluice-logo-dark { display: none; }
[data-theme="dark"] .sluice-header-brand .sluice-logo-light { display: none; }
[data-theme="dark"] .sluice-header-brand .sluice-logo-dark  { display: block; }
.sluice-header-controls {
  display: flex; align-items: center; gap: .75rem;
}
.sluice-theme-toggle {
  background: transparent;
  border: 1px solid var(--bulma-border-weak, hsl(0, 0%, 86%));
  color: var(--bulma-text);
}
.sluice-theme-toggle:hover {
  background: var(--bulma-background);
}

.sluice-lang-switch.buttons { margin-bottom: 0; }
.sluice-lang-switch .button { font-weight: 600; min-width: 2.5rem; }

.chunk-summary {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .5rem; padding: .25rem .5rem;
  background: var(--bulma-background); border-radius: var(--bulma-radius);
  font-size: .875rem;
}
.chunk-line.is-modified {
  border-left: 3px solid hsl(var(--bulma-warning-h), var(--bulma-warning-s), 50%);
  background: hsla(var(--bulma-warning-h), var(--bulma-warning-s), 50%, 0.06);
  padding-left: calc(.25rem - 3px);
}
.chunk-line.is-modified::before {
  content: "●";
  color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 50%);
  margin-right: .35rem;
  font-size: .7em;
}
.chunk-line-toggle {
  margin-left: .5rem;
  background: transparent; border: 0; color: var(--bulma-text-weak, hsl(0,0%,50%));
  cursor: pointer; font-family: inherit; font-size: .9em;
  padding: 0 .25rem;
}
.chunk-line-toggle:hover { color: var(--bulma-text); }
.chunk-line-original {
  margin: 0 0 .25rem 0; padding: 0 .25rem;
  background: hsla(var(--bulma-danger-h), var(--bulma-danger-s), 50%, 0.06);
  border-left: 3px solid hsl(var(--bulma-danger-h), var(--bulma-danger-s), 50%);
  white-space: pre-wrap;
  font-family: var(--bulma-family-code); font-size: 12px;
}

.title { font-weight: 700; letter-spacing: -0.01em; }
.subtitle { font-weight: 600; }
.box { border: 1px solid var(--bulma-border-weak, hsl(0, 0%, 90%)); }
.notification { border-radius: var(--bulma-radius); }
.button { font-weight: 600; }
.help { color: var(--bulma-text-weak, hsl(0, 0%, 40%)); }
[data-theme="dark"] .box { border-color: var(--bulma-border-weak); }

.sluice-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--bulma-border-weak, hsl(0, 0%, 90%));
  color: var(--bulma-text-weak, hsl(0, 0%, 40%));
  text-align: center;
}
.sluice-footer a { color: inherit; text-decoration: underline; }
.sluice-footer a:hover { color: var(--bulma-text); }