/*
 * B3 "Studio" theme (docs/10 §7): the school site's DNA (morganebarret.com: warm brown, orange pill buttons,
 * Bricolage Grotesque + Manrope, DM Serif Display italic accents) with a touch of the contest site
 * (concoursjts.fr: burgundy header band, gold, Josefin Sans eyebrows with a star).
 * Loaded after Bootstrap; the app runs in Bootstrap's dark color mode (<html data-bs-theme="dark">) and this file
 * re-maps Bootstrap's CSS variables to the JTS tokens, so standard Bootstrap markup picks up the theme.
 */

/* ---- Fonts (self-hosted, OFL, lib/fonts) ---- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../lib/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../lib/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../lib/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../lib/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url("../lib/fonts/josefin-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url("../lib/fonts/josefin-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url("../lib/fonts/dm-serif-display-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url("../lib/fonts/dm-serif-display-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens ---- */
:root {
  --jts-bg: #2a1511;
  --jts-bg-header: #1f1411;
  --jts-surface: #3a1f19;
  --jts-surface-muted: #321a15;
  --jts-border: #553229;
  --jts-border-strong: #6a4034;
  --jts-border-stronger: #845244;
  --jts-track: #4a2a22;
  --jts-text: #fff4ea;
  --jts-text-muted: #dcc6b8;
  --jts-text-dim: #b89d8f;
  --jts-gold: #f0d58a;
  --jts-gold-hover: #ffe9a8;
  --jts-gold-line: rgba(240, 213, 138, 0.28);
  --jts-orange: #ee7203;
  --jts-orange-hover: #ff8a24;
  --jts-on-orange: #1f1411;
  --jts-burgundy: #6a0505;
  --jts-red: #b3121b;
  --jts-selected-bg: #4a2a14;
  --jts-warning-text: #ffc46b;
  --jts-done-bg: #45261d;
  --jts-danger: #ff8a80;
  --jts-success: #9fd6a8;
  --jts-font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jts-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jts-font-eyebrow: "Josefin Sans", system-ui, sans-serif;
  --jts-font-accent: "DM Serif Display", Georgia, serif;
  --jts-radius-card: 20px;
  --jts-radius-pill: 9999px;
}

/* ---- Bootstrap dark-mode variables re-mapped to the tokens ---- */
[data-bs-theme="dark"] {
  color-scheme: dark;
  --bs-body-font-family: var(--jts-font-body);
  --bs-body-font-size: 0.9375rem;
  --bs-body-bg: var(--jts-bg);
  --bs-body-bg-rgb: 42, 21, 17;
  --bs-body-color: var(--jts-text);
  --bs-body-color-rgb: 255, 244, 234;
  --bs-emphasis-color: #fff;
  --bs-secondary-color: var(--jts-text-muted);
  --bs-tertiary-color: var(--jts-text-dim);
  --bs-secondary-bg: var(--jts-surface);
  --bs-tertiary-bg: var(--jts-surface-muted);
  --bs-border-color: var(--jts-border);
  --bs-border-color-translucent: rgba(255, 244, 234, 0.12);
  --bs-heading-color: var(--jts-text);
  --bs-link-color: var(--jts-gold);
  --bs-link-color-rgb: 240, 213, 138;
  --bs-link-hover-color: var(--jts-gold-hover);
  --bs-link-hover-color-rgb: 255, 233, 168;
  --bs-primary: var(--jts-orange);
  --bs-primary-rgb: 238, 114, 3;
  --bs-primary-text-emphasis: var(--jts-warning-text);
  --bs-primary-bg-subtle: var(--jts-selected-bg);
  --bs-primary-border-subtle: #8a4210;
  --bs-danger-text-emphasis: var(--jts-danger);
  --bs-success-text-emphasis: var(--jts-success);
  --bs-warning-text-emphasis: var(--jts-warning-text);
  --bs-focus-ring-color: rgba(240, 213, 138, 0.45);
  --bs-form-valid-color: var(--jts-success);
  --bs-form-invalid-color: var(--jts-danger);
  --bs-border-radius: 10px;
  --bs-border-radius-lg: var(--jts-radius-card);
}

body {
  background-color: var(--jts-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .h1, .h2, .h3, .jts-display {
  font-family: var(--jts-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* School-site accent: one word in a heading set in DM Serif Display italic (use sparingly). */
h1 em, h2 em, .jts-wordmark em, .jts-accent {
  font-family: var(--jts-font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--jts-orange);
}

h4, h5, h6, .h4, .h5, .h6 {
  font-weight: 800;
}

.text-gold {
  color: var(--jts-gold) !important;
}

.text-body-secondary {
  color: var(--jts-text-muted) !important;
}

/* ---- Buttons: orange primary with dark text (contrast AA), pill-shaped, >= 44px touch target ---- */
.btn {
  --bs-btn-font-weight: 700;
  --bs-btn-padding-y: 0.55rem;
  --bs-btn-padding-x: 1.1rem;
  min-height: 44px;
}

.btn-primary {
  --bs-btn-color: var(--jts-on-orange);
  --bs-btn-bg: var(--jts-orange);
  --bs-btn-border-color: var(--jts-orange);
  --bs-btn-hover-color: var(--jts-on-orange);
  --bs-btn-hover-bg: var(--jts-orange-hover);
  --bs-btn-hover-border-color: var(--jts-orange-hover);
  --bs-btn-active-color: var(--jts-on-orange);
  --bs-btn-active-bg: #d86502;
  --bs-btn-active-border-color: #d86502;
  --bs-btn-disabled-color: var(--jts-on-orange);
  --bs-btn-disabled-bg: #7a4a2a;
  --bs-btn-disabled-border-color: #7a4a2a;
  --bs-btn-focus-shadow-rgb: 238, 114, 3;
  border-radius: var(--jts-radius-pill);
  font-weight: 800;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-primary:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(238, 114, 3, 0.35);
}

.btn-outline-secondary,
.btn-secondary {
  --bs-btn-color: var(--jts-text);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--jts-border-stronger);
  --bs-btn-hover-color: var(--jts-text);
  --bs-btn-hover-bg: var(--jts-surface);
  --bs-btn-hover-border-color: var(--jts-gold);
  --bs-btn-active-color: var(--jts-text);
  --bs-btn-active-bg: var(--jts-surface);
  --bs-btn-active-border-color: var(--jts-gold);
  border-radius: var(--jts-radius-pill);
}

.btn-outline-primary {
  --bs-btn-color: var(--jts-gold);
  --bs-btn-border-color: var(--jts-gold);
  --bs-btn-hover-color: var(--jts-on-orange);
  --bs-btn-hover-bg: var(--jts-gold);
  --bs-btn-hover-border-color: var(--jts-gold);
  --bs-btn-active-color: var(--jts-on-orange);
  --bs-btn-active-bg: var(--jts-gold-hover);
  --bs-btn-active-border-color: var(--jts-gold-hover);
  border-radius: var(--jts-radius-pill);
}

.btn-link {
  --bs-btn-color: var(--jts-gold);
  --bs-btn-hover-color: var(--jts-gold-hover);
}

/* ---- Cards and surfaces ---- */
.card {
  --bs-card-bg: var(--jts-surface);
  --bs-card-border-color: var(--jts-gold-line);
  --bs-card-border-radius: var(--jts-radius-card);
  --bs-card-inner-border-radius: calc(var(--jts-radius-card) - 1px);
  --bs-card-cap-bg: var(--jts-surface-muted);
  --bs-card-color: var(--jts-text);
}

.list-group {
  --bs-list-group-bg: var(--jts-surface);
  --bs-list-group-border-color: var(--jts-border);
  --bs-list-group-action-hover-bg: var(--jts-done-bg);
  --bs-list-group-action-hover-color: var(--jts-text);
  --bs-list-group-active-bg: var(--jts-selected-bg);
  --bs-list-group-active-border-color: var(--jts-orange);
  --bs-list-group-active-color: var(--jts-text);
}

.modal {
  --bs-modal-bg: var(--jts-surface);
  --bs-modal-border-color: var(--jts-border-strong);
  --bs-modal-header-border-color: var(--jts-border);
  --bs-modal-footer-border-color: var(--jts-border);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--jts-surface);
  --bs-dropdown-border-color: var(--jts-border-strong);
  --bs-dropdown-link-hover-bg: var(--jts-done-bg);
  --bs-dropdown-link-active-bg: var(--jts-selected-bg);
  --bs-dropdown-link-active-color: var(--jts-text);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--jts-border);
  --bs-table-striped-bg: rgba(255, 244, 234, 0.03);
  --bs-table-hover-bg: rgba(240, 213, 138, 0.08);
}

/* ---- Forms ---- */
.form-control,
.form-select {
  background-color: var(--jts-surface-muted);
  border-color: var(--jts-border-strong);
  color: var(--jts-text);
  min-height: 44px;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--jts-surface-muted);
  border-color: var(--jts-gold);
  color: var(--jts-text);
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

.form-control::placeholder {
  color: var(--jts-text-dim);
}

.form-check-input {
  background-color: var(--jts-surface-muted);
  border-color: var(--jts-border-stronger);
}

.form-check-input:checked {
  background-color: var(--jts-orange);
  border-color: var(--jts-orange);
}

.form-label {
  font-weight: 600;
}

/* ---- Alerts and badges ---- */
.alert-success {
  --bs-alert-bg: #1f2a1f;
  --bs-alert-border-color: #3d5a3f;
  --bs-alert-color: var(--jts-success);
}

.alert-danger {
  --bs-alert-bg: #33171a;
  --bs-alert-border-color: #6b2c31;
  --bs-alert-color: var(--jts-danger);
}

.alert-warning,
.alert-info {
  --bs-alert-bg: var(--jts-selected-bg);
  --bs-alert-border-color: #6b4a1e;
  --bs-alert-color: var(--jts-warning-text);
}

.badge-gold {
  background-color: var(--jts-gold);
  color: var(--jts-on-orange);
}

.badge-muted {
  background-color: var(--jts-surface-muted);
  border: 1px solid var(--jts-border-strong);
  color: var(--jts-text-muted);
}

/* ---- Header / navigation ---- */
/* The contest touch: burgundy-to-red band with a gold rule, as on concoursjts.fr. */
.jts-navbar {
  background: linear-gradient(135deg, var(--jts-burgundy) 0%, #8c0b11 55%, var(--jts-red) 100%);
  border-bottom: 1px solid rgba(240, 213, 138, 0.55);
  --bs-navbar-color: rgba(255, 244, 234, 0.85);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: var(--jts-gold);
  --bs-navbar-brand-hover-color: var(--jts-gold-hover);
}

.jts-navbar .navbar-brand,
.jts-wordmark {
  font-family: var(--jts-font-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jts-gold);
}

.jts-navbar .nav-link.active,
.jts-navbar .nav-link[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--jts-gold);
}

.jts-navbar .dropdown-menu {
  --bs-dropdown-link-color: var(--jts-text);
}

/* Login and other public pages: the stage-light backdrop (a radial "spotlight" over the burgundy background). */
.jts-stage {
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(240, 213, 138, 0.18), transparent 70%),
    linear-gradient(180deg, var(--jts-bg-header) 0%, var(--jts-bg) 60%);
}

.jts-page-title {
  font-family: var(--jts-font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
}

.jts-eyebrow {
  font-family: var(--jts-font-eyebrow);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jts-gold);
}

/* Contest star, kept for a couple of headline eyebrows (login, current contest). */
.jts-eyebrow-star::before,
.jts-eyebrow-star::after {
  content: "\2726";
  content: "\2726" / ""; /* decorative: hidden from screen readers where supported */
  margin: 0 0.6em;
  font-size: 0.9em;
}

/* ---- Public (login/sign-up) pages ---- */
.jts-wordmark-hero {
  /* Josefin caps are wide: tighter tracking and a smaller floor keep "JEUNES TALENTS" inside a 360px phone. */
  font-size: clamp(1.6rem, 1rem + 3vw, 3.6rem);
  letter-spacing: 0.08em;
  line-height: 1.1;
}

.jts-auth-panel {
  max-width: 440px;
}

.jts-intro .lead {
  color: var(--jts-text-muted);
  max-width: 34rem;
}

.jts-steps li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 0;
  font-weight: 600;
}

.jts-step-dot {
  flex: 0 0 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--jts-gold);
  color: var(--jts-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--jts-font-display);
  font-weight: 700;
}

/* ---- Status chips ---- */
.jts-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.jts-chip-open {
  background-color: var(--jts-orange);
  color: var(--jts-on-orange);
}

.jts-chip-upcoming {
  border-color: var(--jts-gold);
  color: var(--jts-gold);
}

.jts-chip-closed {
  background-color: var(--jts-surface-muted);
  border-color: var(--jts-border-strong);
  color: var(--jts-text-muted);
}

.jts-chip-booked {
  background-color: var(--jts-done-bg);
  border-color: var(--jts-gold);
  color: var(--jts-gold);
}

/* ---- Contest cards ---- */
.jts-contest-card {
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, rgba(240, 213, 138, 0.10), transparent 60%),
    var(--jts-surface);
}

.jts-contest-card.is-booked {
  border-color: var(--jts-gold);
}

/* ---- Preparation checklist ---- */
.jts-progress {
  display: block;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 4px;
  background-color: var(--jts-track);
  overflow: hidden;
  appearance: none;
}

.jts-progress::-webkit-progress-bar {
  background-color: var(--jts-track);
}

.jts-progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--jts-gold), var(--jts-orange));
}

.jts-progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--jts-gold), var(--jts-orange));
}

.jts-checklist li + li {
  border-top: 1px solid var(--jts-border);
}

.jts-checklist-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 0.25rem;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
}

a.jts-checklist-row:hover {
  background-color: var(--jts-surface-muted);
  color: inherit;
}

.jts-checklist-icon {
  flex: 0 0 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  border: 2px solid var(--jts-border-stronger);
  color: var(--jts-text-muted);
}

.jts-checklist .is-done .jts-checklist-icon {
  background-color: var(--jts-gold);
  border-color: var(--jts-gold);
  color: var(--jts-on-orange);
}

.jts-checklist .is-todo .jts-checklist-icon {
  border-color: var(--jts-orange);
  color: var(--jts-orange);
}

.jts-checklist .is-locked {
  color: var(--jts-text-dim);
}

.jts-grid-2 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
}

@media (min-width: 992px) {
  .jts-sticky {
    position: sticky;
    top: 1.5rem;
  }
}

/* ---- People pages (teachers, students) ---- */
.jts-search {
  min-width: min(100%, 18rem);
}

.jts-table > :not(caption) > * > * {
  padding: 0.85rem 1rem;
}

.jts-table thead th {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jts-text-muted);
  background-color: var(--jts-surface-muted);
}

.jts-docs .list-inline-item:not(:last-child) {
  margin-right: 0.35rem;
}

.jts-doc {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.jts-doc.is-present {
  border: 1px solid var(--jts-gold);
  color: var(--jts-gold);
}

.jts-doc.is-present:hover {
  background-color: var(--jts-done-bg);
  color: var(--jts-gold-hover);
}

.jts-doc.is-missing {
  border: 1px dashed var(--jts-border-stronger);
  color: var(--jts-text-dim);
}

/* File slots: a large tap target on phones, a drop zone on laptops. */
.file-slot-add {
  display: block;
  width: 100%;
  padding: 1rem 0.75rem;
  text-align: center;
  border: 1px dashed var(--jts-border-stronger);
  border-radius: 12px;
  background-color: var(--jts-surface-muted);
  cursor: pointer;
}

.file-slot-add:hover,
.file-slot.is-dragover .file-slot-add {
  border-color: var(--jts-gold);
  background-color: var(--jts-done-bg);
}

.file-slot-current {
  padding: 0.75rem;
  border: 1px solid var(--jts-border-strong);
  border-radius: 12px;
  background-color: var(--jts-surface-muted);
}

.file-slot-preview {
  display: block;
  width: 100%;
  max-height: 9rem;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

.file-slot-add:focus-within {
  outline: 2px solid var(--jts-gold);
  outline-offset: 2px;
}

.modal-content {
  background-color: var(--jts-surface);
}

/* ---- Pills used as tabs ---- */
.jts-tabs {
  --bs-nav-pills-link-active-bg: var(--jts-selected-bg);
  --bs-nav-pills-link-active-color: var(--jts-text);
  --bs-nav-link-color: var(--jts-text-muted);
  --bs-nav-link-hover-color: var(--jts-text);
  gap: 0.5rem;
}

.jts-tabs .nav-link {
  border: 1px solid var(--jts-border-strong);
  border-radius: 999px;
  font-weight: 700;
}

.jts-tabs .nav-link.active {
  border-color: var(--jts-orange);
}

/* ---- Toggle chips (offering, passage stepper) ---- */
.jts-toggle {
  --bs-btn-color: var(--jts-text-muted);
  --bs-btn-border-color: var(--jts-border-stronger);
  --bs-btn-hover-color: var(--jts-text);
  --bs-btn-hover-bg: var(--jts-surface-muted);
  --bs-btn-hover-border-color: var(--jts-gold);
  --bs-btn-active-color: var(--jts-text);
  --bs-btn-active-bg: var(--jts-selected-bg);
  --bs-btn-active-border-color: var(--jts-gold);
  border-radius: 999px;
  font-weight: 700;
}

.btn-check:checked + .jts-toggle {
  color: var(--jts-text);
  background-color: var(--jts-selected-bg);
  border-color: var(--jts-gold);
}

.btn-check:focus-visible + .jts-toggle {
  outline: 2px solid var(--jts-gold);
  outline-offset: 2px;
}

.jts-toggle small {
  display: block;
  font-weight: 600;
  color: var(--jts-text-dim);
}

.jts-card-active {
  border-color: var(--jts-border-stronger);
}

.jts-form-narrow {
  max-width: 48rem;
}

/* ---- Passages page ---- */
.jts-chip-issue {
  border-color: var(--jts-warning-text);
  color: var(--jts-warning-text);
  font-weight: 700;
}

.jts-passage.is-complete {
  border-color: var(--jts-gold);
}

.jts-toggle.is-full {
  border-style: dashed;
}

.jts-person,
.jts-pick {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--jts-border);
  border-radius: 10px;
  background-color: var(--jts-surface-muted);
}

.jts-pick label {
  cursor: pointer;
}

.jts-music {
  padding: 1rem;
  border: 1px solid var(--jts-border);
  border-radius: 12px;
  background-color: var(--jts-surface-muted);
}

.jts-audio {
  width: 100%;
  min-width: 0;
  height: 2.5rem;
  color-scheme: dark;
}

.jts-total {
  font-family: var(--jts-font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--jts-gold);
}

.jts-prewrap {
  white-space: pre-line;
}

/* ---- Google / Microsoft sign-in ---- */
.jts-external {
  --bs-btn-color: var(--jts-text);
  --bs-btn-border-color: var(--jts-border-stronger);
  --bs-btn-hover-color: var(--jts-text);
  --bs-btn-hover-bg: var(--jts-surface-muted);
  --bs-btn-hover-border-color: var(--jts-gold);
  font-weight: 700;
}

.jts-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--jts-text-dim);
  font-size: 0.85rem;
}

.jts-divider::before,
.jts-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--jts-border);
}

/* ---- Admin acting for a school ---- */
.jts-acting {
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--jts-gold);
  border-radius: var(--jts-radius-card);
  background-color: var(--jts-selected-bg);
}

/* ---- Admin dashboard (DB-01/DB-06) ---- */
.jts-dash-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.jts-dash-title {
  font-family: var(--jts-font-body);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jts-text-muted);
  margin-bottom: 1rem;
}

.jts-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.75rem;
}

.jts-kpi {
  padding: 1rem 1.1rem;
  border: 1px solid var(--jts-border);
  border-radius: var(--jts-radius-card);
  background:
    radial-gradient(ellipse 80% 100% at 100% 0%, rgba(240, 213, 138, 0.08), transparent 65%),
    var(--jts-surface);
}

.jts-kpi:first-child {
  border-color: var(--jts-gold);
}

.jts-kpi-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jts-text-muted);
}

.jts-kpi-value {
  font-family: var(--jts-font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--jts-text);
  font-variant-numeric: tabular-nums;
}

.jts-kpi:first-child .jts-kpi-value {
  color: var(--jts-gold);
}

.jts-kpi-unit {
  font-size: 1.1rem;
  color: var(--jts-text-muted);
}

.jts-kpi-today {
  font-size: 0.8rem;
  color: var(--jts-text-dim);
}

.jts-kpi-today.is-up {
  color: var(--jts-success);
  font-weight: 700;
}

.jts-count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.jts-count.is-bumped {
  animation: jts-bump 1.2s ease-out;
}

.jts-kpi.is-bumped {
  animation: jts-glow 1.6s ease-out;
}

@keyframes jts-bump {
  0% { transform: scale(1); }
  20% { transform: scale(1.25); color: var(--jts-orange); }
  100% { transform: scale(1); }
}

@keyframes jts-glow {
  0% { box-shadow: 0 0 0 0 rgba(238, 114, 3, 0.55); border-color: var(--jts-orange); }
  100% { box-shadow: 0 0 0 14px rgba(238, 114, 3, 0); }
}

/* Bars are <progress> elements: accessible, and no inline style (the CSP forbids them). */
.jts-bar {
  display: block;
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: 5px;
  background-color: var(--jts-track);
  overflow: hidden;
  appearance: none;
}

.jts-bar-thin {
  height: 6px;
}

.jts-bar::-webkit-progress-bar {
  background-color: var(--jts-track);
}

.jts-bar::-webkit-progress-value {
  background: linear-gradient(90deg, var(--jts-gold), var(--jts-orange));
  border-radius: 5px;
}

.jts-bar::-moz-progress-bar {
  background: linear-gradient(90deg, var(--jts-gold), var(--jts-orange));
  border-radius: 5px;
}

.jts-bar.is-warn::-webkit-progress-value {
  background: var(--jts-orange);
}

.jts-bar.is-warn::-moz-progress-bar {
  background: var(--jts-orange);
}

.jts-bar.is-full::-webkit-progress-value {
  background: var(--jts-danger);
}

.jts-bar.is-full::-moz-progress-bar {
  background: var(--jts-danger);
}

.jts-gauges > li + li {
  margin-top: 1.1rem;
}

.jts-gauge-head,
.jts-bars-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.3rem;
}

.jts-gauge-name {
  font-weight: 700;
}

.jts-gauge-figure {
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.jts-gauge-pct {
  margin-left: 0.4rem;
  font-size: 0.8rem;
  color: var(--jts-text-dim);
}

.jts-gauge.is-warn > .jts-gauge-head .jts-gauge-pct {
  color: var(--jts-warning-text);
}

.jts-gauge.is-full > .jts-gauge-head .jts-gauge-pct,
.jts-gauge.is-full > .jts-gauge-meta {
  color: var(--jts-danger);
}

.jts-gauge-meta,
.jts-bars-detail {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--jts-text-dim);
}

.jts-gauge-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0.75rem 1.25rem;
  margin: 0.75rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--jts-border);
  font-size: 0.875rem;
}

.jts-bars > li + li {
  margin-top: 0.8rem;
}

.jts-bars-value {
  font-weight: 800;
}

.jts-todo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0.75rem;
}

.jts-todo-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--jts-border-strong);
  border-radius: 12px;
  background-color: var(--jts-surface-muted);
  color: var(--jts-text);
  text-align: left;
}

.jts-todo-item:not(:disabled):hover,
.jts-todo-item:focus-visible {
  border-color: var(--jts-gold);
}

.jts-todo-item:disabled {
  opacity: 0.55;
}

.jts-todo-item.is-issue {
  border-color: var(--jts-warning-text);
}

.jts-todo-value {
  font-family: var(--jts-font-display);
  font-size: 1.5rem;
  font-weight: 700;
}

.jts-details summary {
  cursor: pointer;
  font-weight: 700;
}

.jts-legend-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  vertical-align: -0.05rem;
}

.jts-curve {
  display: block;
  width: 100%;
  height: 10rem;
  overflow: visible;
}

.jts-curve-grid {
  stroke: var(--jts-border);
  stroke-dasharray: 4 6;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.jts-curve-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.jts-curve-area {
  stroke: none;
  opacity: 0.12;
}

.jts-curve-line.is-passages { stroke: var(--jts-orange); }
.jts-curve-area.is-passages { fill: var(--jts-orange); }
.jts-legend-dot.is-passages { background-color: var(--jts-orange); }
.jts-curve-line.is-bookings { stroke: var(--jts-gold); }
.jts-curve-area.is-bookings { fill: var(--jts-gold); }
.jts-legend-dot.is-bookings { background-color: var(--jts-gold); }
.jts-curve-line.is-accounts { stroke: var(--jts-text-muted); }
.jts-curve-area.is-accounts { fill: var(--jts-text-muted); }
.jts-legend-dot.is-accounts { background-color: var(--jts-text-muted); }

.jts-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 0.6rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background-color: var(--jts-orange);
  color: var(--jts-on-orange);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.jts-live-badge[hidden] {
  display: none;
}

.jts-live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--jts-on-orange);
  animation: jts-pulse 1.4s ease-in-out infinite;
}

@keyframes jts-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

#dashboard-live-toggle[aria-pressed="true"] {
  --bs-btn-color: var(--jts-on-orange);
  --bs-btn-bg: var(--jts-orange);
  --bs-btn-hover-color: var(--jts-on-orange);
  --bs-btn-hover-bg: var(--jts-orange-hover);
}

@media (min-width: 1200px) {
  .jts-feed-card {
    position: sticky;
    top: 1rem;
  }
}

.jts-feed {
  max-height: 70vh;
  overflow-y: auto;
}

.jts-feed > li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.75rem;
  padding: 0.65rem 0.25rem;
  border-top: 1px solid var(--jts-border);
}

.jts-feed > li:first-child {
  border-top: 0;
}

.jts-feed-icon {
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background-color: var(--jts-surface-muted);
  border: 1px solid var(--jts-border-strong);
  color: var(--jts-gold);
}

.jts-feed .is-passage .jts-feed-icon {
  color: var(--jts-orange);
}

.jts-feed-school {
  font-weight: 800;
}

.jts-feed-meta {
  font-size: 0.8rem;
  color: var(--jts-text-muted);
}

.jts-feed-time {
  font-variant-numeric: tabular-nums;
  color: var(--jts-text-dim);
}

.jts-feed > li.is-new {
  animation: jts-arrive 2.4s ease-out;
}

@keyframes jts-arrive {
  0% { opacity: 0; transform: translateX(1.5rem); background-color: rgba(238, 114, 3, 0.35); }
  15% { opacity: 1; transform: none; }
  100% { background-color: transparent; }
}

/* Projector mode: the whole stage, bigger type, no page chrome. */
.jts-dash:fullscreen {
  overflow-y: auto;
  margin: 0 !important;
  padding: 2rem 2.5rem;
  background:
    radial-gradient(ellipse 45% 60% at 25% 35%, rgba(240, 213, 138, 0.12), transparent 70%),
    var(--jts-bg);
  font-size: 1.15rem;
}

.jts-dash:fullscreen .jts-kpi-value {
  font-size: 3rem;
}

.jts-dash:fullscreen .jts-feed {
  max-height: calc(100vh - 12rem);
}

/* ---- Laptops and desktops: roomier type and spacing (most schools on MacBooks/PCs, not only phones) ---- */
@media (min-width: 992px) {
  [data-bs-theme="dark"] {
    --bs-body-font-size: 1rem;
  }

  .jts-stage {
    background:
      radial-gradient(ellipse 45% 60% at 25% 35%, rgba(240, 213, 138, 0.16), transparent 70%),
      radial-gradient(ellipse 35% 50% at 80% 10%, rgba(238, 114, 3, 0.08), transparent 70%),
      linear-gradient(180deg, var(--jts-bg-header) 0%, var(--jts-bg) 70%);
  }

  .jts-auth-panel .card-body {
    padding: 2.5rem !important;
  }
}

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