/* =========================================================================
   Yellowhat v2 -- "site ops console"
   A full re-layout of CTFd: command rail, case board, side drawer, podium.
   Loaded after core's Bootstrap build and branding/tokens.css (verbatim).

   Rules (branding/README.md): every colour is a var(--yh-*) token -- the only
   raw numbers are Bootstrap *-rgb triplets restating a token. Sharp corners,
   hard offset shadows, 2px borders, hazard tape, caps display type, left-aligned.
   Dark only.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens -> Bootstrap
   ------------------------------------------------------------------------- */
:root,
[data-bs-theme="dark"] {
  --yh2-rail: 264px;
  --yh2-pad: var(--sp-7);
  --yh2-line: var(--yh-slate-700);
  --yh2-shadow: 4px 4px 0 0 var(--yh-amber-shadow);

  /* tokens.css is light-first; point its semantic tokens at the dark ground */
  --fg1: var(--yh-bone);
  --fg2: var(--yh-slate-300);
  --fg3: var(--yh-slate-400);
  --bg-page: var(--yh-slate-900);
  --bg-surface: var(--yh-slate-800);
  --bg-muted: var(--yh-slate-800);
  --border-1: var(--yh-slate-700);
  --border-2: var(--yh-slate-600);
  --border-strong: var(--yh-slate-500);

  --bs-body-font-family: var(--font-body);
  --bs-body-bg: var(--yh-slate-900);
  --bs-body-color: var(--yh-bone);
  --bs-emphasis-color: var(--yh-bone);
  --bs-secondary-color: var(--yh-slate-400);
  --bs-secondary-bg: var(--yh-slate-800);
  --bs-tertiary-bg: var(--yh-slate-800);
  --bs-border-color: var(--yh-slate-700);
  --bs-heading-color: var(--yh-bone);
  --bs-link-color: var(--yh-bone);
  --bs-link-color-rgb: 250, 250, 247;       /* = --yh-bone */
  --bs-link-hover-color: var(--yh-yellow);
  --bs-link-hover-color-rgb: 245, 185, 33;  /* = --yh-yellow */
  --bs-primary: var(--yh-yellow);
  --bs-primary-rgb: 245, 185, 33;           /* = --yh-yellow */
  --bs-success: var(--yh-ok);
  --bs-success-rgb: 47, 182, 115;           /* = --yh-ok */
  --bs-danger: var(--yh-danger);
  --bs-danger-rgb: 224, 49, 49;             /* = --yh-danger */
  --bs-info: var(--yh-info);
  --bs-info-rgb: 59, 130, 246;              /* = --yh-info */
  --bs-warning: var(--yh-warn);
  --bs-warning-rgb: 245, 185, 33;           /* = --yh-warn */
  --bs-dark: var(--yh-ink);
  --bs-dark-rgb: 20, 22, 26;                /* = --yh-ink */
  --bs-border-radius: var(--radius-1);
  --bs-border-radius-sm: var(--radius-1);
  --bs-border-radius-lg: var(--radius-2);
  --bs-border-radius-xl: var(--radius-2);
  --bs-border-radius-xxl: var(--radius-2);
  --bs-focus-ring-color: var(--yh-yellow);
}

html,
body {
  background: var(--yh-slate-900);
  color: var(--yh-bone);
}
code {
  background: var(--yh-slate-700);
  color: var(--yh-bone);
}
[x-cloak] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--yh-yellow) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

.yh2-skip {
  position: absolute;
  left: var(--sp-3);
  top: -60px;
  z-index: 3000;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  color: var(--yh-ink);
  background: var(--yh-yellow);
}
.yh2-skip:focus { top: var(--sp-3); }

/* shared bits */
.yh-tape { height: 10px; background-image: var(--tape-stripes); }
.yh-tape-thin { height: 6px; }
.yh2-eyebrow {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--yh-yellow);
}
.yh2-sub {
  max-width: 44rem;
  margin: 0;
  font-size: var(--fs-md);
  color: var(--yh-slate-300);
}
.yh2-empty {
  padding: var(--sp-6) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--yh-slate-400);
}
.yh2-loading {
  padding: var(--sp-7) 0;
  font-family: var(--font-mono);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--yh-slate-400);
}
.yh-cursor {
  margin-left: var(--sp-1);
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1;
  color: var(--yh-yellow);
  animation: yh-blink 1s steps(1) infinite;
}
@keyframes yh-blink { 50% { opacity: 0; } }

/* -------------------------------------------------------------------------
   2. Command rail (desktop) + top bar (mobile)
   ------------------------------------------------------------------------- */
.yh2-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1030;
  width: var(--yh2-rail);
  overflow: hidden;          /* never scrolls: it carries the tape strip */
  background: var(--yh-ink);
}
.yh2-rail-scroll {
  /* the scrolling layer stops short of the 6px strip, so neither the content
     nor an (overlay) scrollbar can ever cover it */
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-right: 6px;
  padding: var(--sp-5) var(--sp-3) var(--sp-4) var(--sp-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.yh2-rail::after {
  /* hazard tape running down the rail's edge */
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 6px;
  background-image: var(--tape-stripes);
}

.yh2-mark {
  display: block;
  margin: 0 var(--sp-2) var(--sp-5) 0;
  text-decoration: none !important;
}
.yh2-mark-cat {
  display: block;
  width: 64px;
  height: auto;
  margin-bottom: var(--sp-3);
  filter: invert(1) brightness(1.25);
  opacity: .55;
}
.yh2-mark-row {
  display: flex;
  align-items: flex-end;
}
.yh2-mark-word {
  display: block;
  width: 190px;
  max-width: 100%;
  height: auto;
}
.yh2-mark-sub {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--yh-slate-400);
}

.yh2-clock {
  margin: 0 var(--sp-2) var(--sp-5) 0;
  padding: var(--sp-3);
  border: 2px solid var(--yh-slate-700);
  border-left: 6px solid var(--yh-slate-600);
}
.yh2-clock.is-live   { border-left-color: var(--yh-ok); }
.yh2-clock.is-waiting { border-left-color: var(--yh-yellow); }
.yh2-clock.is-closed  { border-left-color: var(--yh-danger); }
.yh2-clock-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--yh-slate-400);
}
.yh2-clock-state {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--yh-bone);
}

.yh2-nav {
  margin: 0 var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
}
.yh2-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-left: 4px solid transparent;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--yh-slate-300);
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.yh2-link:hover {
  color: var(--yh-yellow);
  background: var(--yh-slate-900);
}
.yh2-link.is-active {
  color: var(--yh-yellow);
  background: var(--yh-slate-900);
  border-left-color: var(--yh-yellow);
}
.yh2-link-n {
  min-width: 1.6em;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--yh-slate-500);
}
.yh2-link.is-active .yh2-link-n,
.yh2-link:hover .yh2-link-n {
  color: var(--yh-yellow);
}
.yh2-badge {
  margin-left: auto;
  padding: 0 var(--sp-2);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--yh-ink);
  background: var(--yh-yellow);
  border-radius: var(--radius-pill);
}

.yh2-account {
  margin: auto var(--sp-2) 0 0;
  padding-top: var(--sp-5);
}
.yh2-who {
  margin: 0 0 var(--sp-2);
  padding: var(--sp-3);
  border-top: 2px solid var(--yh-slate-700);
}
.yh2-who-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--yh-slate-400);
}
.yh2-who-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--yh-bone);
}
.yh2-who-team {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--yh-yellow);
}
.yh2-nav-sub .yh2-link {
  padding-top: var(--sp-1);
  padding-bottom: var(--sp-1);
  font-size: var(--fs-sm);
}
.yh2-auth-actions {
  display: grid;
  gap: var(--sp-3);
}

.yh2-topbar {
  display: none;
}
.yh2-scrim {
  display: none;
}

/* -------------------------------------------------------------------------
   3. Content column
   ------------------------------------------------------------------------- */
main.yh2-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 0 0 var(--yh2-rail);
  padding: 0;
}
.yh2-content {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1280px;
  padding: 0 var(--yh2-pad) var(--sp-8);
}
/* core templates wrap everything in .container -- let the column govern width */
.yh2-content .container {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.yh2-head,
.jumbotron {
  position: relative;
  margin: 0 0 var(--sp-6);
  padding: var(--sp-8) 0 var(--sp-5);
  text-align: left;
  color: var(--yh-bone);
  background: none;
  border-bottom: 2px solid var(--yh2-line);
}
.yh2-head::after,
.jumbotron::after {
  /* a short strip of tape on the header rule */
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 120px;
  height: 6px;
  background-image: var(--tape-stripes);
}
.yh2-head h1,
.jumbotron h1 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-4xl);
  color: var(--yh-bone);
}
.jumbotron h1 {
  margin: 0;
}
.jumbotron .container::before {
  content: "Yellowhat 2027 //";
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--yh-yellow);
}

.yh2-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--yh2-pad);
  border-top: 2px solid var(--yh2-line);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}
.yh2-foot-tag { color: var(--yh-yellow); }
.yh2-foot-meta { color: var(--yh-slate-500); }

/* -------------------------------------------------------------------------
   4. Controls: buttons, chips, forms, alerts, tags
   ------------------------------------------------------------------------- */
.btn {
  --bs-btn-border-width: 2px;
  --bs-btn-border-radius: var(--radius-1);
  --bs-btn-font-family: var(--font-display);
  --bs-btn-font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.btn-primary,
.btn-success {
  --bs-btn-color: var(--yh-ink);
  --bs-btn-bg: var(--yh-yellow);
  --bs-btn-border-color: var(--yh-ink);
  --bs-btn-hover-color: var(--yh-ink);
  --bs-btn-hover-bg: var(--yh-yellow-soft);
  --bs-btn-hover-border-color: var(--yh-ink);
  --bs-btn-active-color: var(--yh-ink);
  --bs-btn-active-bg: var(--yh-yellow-deep);
  --bs-btn-active-border-color: var(--yh-ink);
  --bs-btn-disabled-color: var(--yh-ink);
  --bs-btn-disabled-bg: var(--yh-yellow-pale);
  --bs-btn-disabled-border-color: var(--yh-ink);
  box-shadow: var(--yh2-shadow);
}
.btn-primary:hover,
.btn-success:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--yh-amber-shadow);
}
.btn-primary:active,
.btn-success:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}
.btn-secondary,
.btn-dark,
.btn-info {
  --bs-btn-color: var(--yh-bone);
  --bs-btn-bg: var(--yh-slate-700);
  --bs-btn-border-color: var(--yh-slate-600);
  --bs-btn-hover-color: var(--yh-ink);
  --bs-btn-hover-bg: var(--yh-yellow);
  --bs-btn-hover-border-color: var(--yh-ink);
  --bs-btn-active-color: var(--yh-ink);
  --bs-btn-active-bg: var(--yh-yellow-deep);
}
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-success,
.btn-outline-danger {
  --bs-btn-color: var(--yh-bone);
  --bs-btn-border-color: var(--yh-slate-500);
  --bs-btn-hover-color: var(--yh-ink);
  --bs-btn-hover-bg: var(--yh-yellow);
  --bs-btn-hover-border-color: var(--yh-ink);
  --bs-btn-active-color: var(--yh-ink);
  --bs-btn-active-bg: var(--yh-yellow);
  --bs-btn-active-border-color: var(--yh-ink);
}
.btn-danger {
  --bs-btn-bg: var(--yh-danger);
  --bs-btn-border-color: var(--yh-ink);
  --bs-btn-hover-bg: var(--yh-danger);
  --bs-btn-hover-border-color: var(--yh-bone);
}
.btn-close {
  filter: invert(1);
}

.yh2-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-6);
}
.yh2-chip {
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--yh-slate-300);
  background: transparent;
  border: 2px solid var(--yh-slate-600);
  border-radius: var(--radius-1);
  cursor: pointer;
}
.yh2-chip:hover {
  color: var(--yh-yellow);
  border-color: var(--yh-yellow);
}
.yh2-chip.is-active {
  color: var(--yh-ink);
  background: var(--yh-yellow);
  border-color: var(--yh-yellow);
}

.form-control,
.form-select {
  border: 2px solid var(--yh-slate-600);
  border-radius: var(--radius-1);
  background-color: var(--yh-ink);
  color: var(--yh-bone);
  font-family: var(--font-mono);
}
.form-control::placeholder {
  color: var(--yh-slate-500);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--yh-yellow);
  background-color: var(--yh-ink);
  color: var(--yh-bone);
  box-shadow: none;
}
.form-label,
label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--yh-slate-300);
}
.form-check-label {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  letter-spacing: normal;
  text-transform: none;
}
.form-check-input:checked {
  background-color: var(--yh-yellow);
  border-color: var(--yh-yellow);
}
.form-text,
small.form-text,
.text-muted {
  color: var(--yh-slate-400) !important;
}

.alert {
  --bs-alert-border-radius: var(--radius-1);
  --bs-alert-color: var(--yh-bone);
  --bs-alert-bg: var(--yh-slate-800);
  border-width: 0 0 0 6px;
  text-align: left !important;
  font-weight: 600;
}
.alert-success { --bs-alert-border-color: var(--yh-ok); }
.alert-danger  { --bs-alert-border-color: var(--yh-danger); }
.alert-info    { --bs-alert-border-color: var(--yh-info); }
.alert-warning { --bs-alert-border-color: var(--yh-warn); }

.badge,
.yh2-tag {
  display: inline-block;
  padding: 2px var(--sp-2);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--yh-yellow);
  background: transparent;
  border: 1px solid var(--yh-yellow);
  border-radius: var(--radius-1);
}
.badge.bg-danger {
  color: var(--yh-ink);
  background: var(--yh-yellow) !important;
}

.card {
  --bs-card-bg: var(--yh-slate-800);
  --bs-card-border-color: var(--yh-slate-700);
  --bs-card-border-radius: var(--radius-1);
  border-width: 2px;
}
.nav-pills {
  --bs-nav-pills-border-radius: var(--radius-1);
  --bs-nav-pills-link-active-bg: var(--yh-yellow);
  --bs-nav-pills-link-active-color: var(--yh-ink);
}
.nav-link {
  font-family: var(--font-display);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.page-link {
  font-family: var(--font-mono);
  color: var(--yh-bone);
  background: transparent;
  border-color: var(--yh-slate-600);
  border-radius: 0 !important;
}
.page-item.active .page-link {
  color: var(--yh-ink);
  background: var(--yh-yellow);
  border-color: var(--yh-yellow);
}
.dropdown-menu {
  --bs-dropdown-bg: var(--yh-ink);
  --bs-dropdown-border-color: var(--yh-slate-600);
  --bs-dropdown-border-radius: var(--radius-1);
  --bs-dropdown-link-color: var(--yh-bone);
  --bs-dropdown-link-hover-bg: var(--yh-slate-800);
  --bs-dropdown-link-active-bg: var(--yh-yellow);
  --bs-dropdown-link-active-color: var(--yh-ink);
  border-width: 2px;
}
.modal-content {
  --bs-modal-bg: var(--yh-slate-900);
  --bs-modal-border-radius: 0;
  --bs-modal-inner-border-radius: 0;
  border: 2px solid var(--yh-slate-600);
}
.modal-backdrop.show { opacity: .8; }

/* tables everywhere (teams, users, submissions, solves) */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--yh-bone);
  --bs-table-border-color: var(--yh-slate-700);
  --bs-table-striped-bg: var(--yh-slate-800);
  --bs-table-striped-color: var(--yh-bone);
  --bs-table-hover-bg: var(--yh-slate-800);
}
.table thead th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--yh-slate-400);
  border-bottom: 2px solid var(--yh-yellow);
}

/* -------------------------------------------------------------------------
   5. Hunt board
   ------------------------------------------------------------------------- */
.yh2-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0 0 var(--sp-6);
}
.yh2-stat {
  padding: var(--sp-4);
  background: var(--yh-slate-800);
  border: 2px solid var(--yh-slate-700);
  border-top: 6px solid var(--yh-yellow);
}
.yh2-stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--yh-slate-400);
}
.yh2-stat-num {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--yh-bone);
}
.yh2-stat-num small {
  font-size: var(--fs-lg);
  color: var(--yh-slate-500);
}

.yh2-cat {
  margin: 0 0 var(--sp-7);
}
.yh2-cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-2xl);
  letter-spacing: var(--ls-wide);
}
.yh2-cat-head::before {
  content: "\25AA";
  margin-right: var(--sp-2);
  color: var(--yh-yellow);
}
.yh2-cat-head > span:first-child {
  margin-right: auto;
}
.yh2-cat-count {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  color: var(--yh-slate-400);
}

.yh2-cases {
  border: 2px solid var(--yh-slate-700);
}
.yh2-case-legend,
.yh2-case {
  display: grid;
  grid-template-columns: 88px 64px minmax(0, 1fr) 110px 96px;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
}
.yh2-case-legend {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--yh-slate-500);
  background: var(--yh-ink);
}
.yh2-case-legend span:last-child { text-align: right; }

.yh2-case {
  width: 100%;
  text-align: left;
  color: var(--yh-bone);
  background: var(--yh-slate-900);
  border: 0;
  border-top: 2px solid var(--yh-slate-700);
  border-left: 6px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.yh2-case:hover {
  background: var(--yh-slate-800);
  border-left-color: var(--yh-yellow);
}
.yh2-case-status {
  justify-self: start;
  padding: 2px var(--sp-2);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--yh-slate-300);
  border: 2px solid var(--yh-slate-600);
}
.yh2-case-id {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--yh-slate-500);
}
.yh2-case-name {
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yh2-case-solves {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--yh-slate-400);
}
.yh2-case-pts {
  justify-self: end;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--yh-yellow);
}
.yh2-case-pts::after {
  content: " pts";
  font-weight: 500;
  font-size: var(--fs-xs);
  color: var(--yh-slate-400);
}
/* solved: the status block, the bar AND the word change -- never colour alone */
.yh2-case.is-solved {
  border-left-color: var(--yh-ok);
}
.yh2-case.is-solved .yh2-case-status {
  color: var(--yh-ink);
  background: var(--yh-ok);
  border-color: var(--yh-ok);
}
.yh2-case.is-solved .yh2-case-status::before {
  content: "\2713  ";
}
.yh2-case.is-solved .yh2-case-name {
  color: var(--yh-slate-300);
}

/* -------------------------------------------------------------------------
   6. Challenge drawer (Bootstrap modal, re-laid as a right-hand panel)
   ------------------------------------------------------------------------- */
.yh2-drawer .modal-dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(680px, 100vw);
  max-width: none;
  height: 100%;
  margin: 0;
}
.yh2-drawer.fade .modal-dialog {
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.yh2-drawer.show .modal-dialog {
  transform: none;
}
.yh2-drawer .modal-content {
  height: 100%;
  overflow-y: auto;
  border: 0;
  border-left: 2px solid var(--yh-yellow);
  box-shadow: -8px 0 0 0 var(--yh-ink);
}
.yh2-drawer-head {
  padding: var(--sp-5) var(--sp-6) 0;
  background: var(--yh-ink);
}
.yh2-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.yh2-drawer-top .yh2-eyebrow {
  margin: 0;
}
.yh2-drawer-close {
  padding: var(--sp-1) var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--yh-slate-300);
  background: transparent;
  border: 2px solid var(--yh-slate-600);
  border-radius: var(--radius-1);
  cursor: pointer;
}
.yh2-drawer-close:hover {
  color: var(--yh-ink);
  background: var(--yh-yellow);
  border-color: var(--yh-yellow);
}
.yh2-drawer .challenge-name {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  color: var(--yh-bone);
  text-align: left;
}
.yh2-drawer-meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.yh2-pts {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--yh-yellow);
}
.yh2-pts small {
  font-size: var(--fs-sm);
  color: var(--yh-slate-400);
}
.yh2-drawer-solves {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--yh-slate-400);
}
.yh2-drawer .challenge-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.yh2-tabs {
  --bs-nav-tabs-border-width: 0;
  --bs-nav-tabs-border-color: transparent;
  --bs-nav-tabs-border-radius: 0;
  --bs-nav-tabs-link-active-color: var(--yh-yellow);
  --bs-nav-tabs-link-active-bg: transparent;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  border: 0;
}
.yh2-tabs .nav-link {
  padding: var(--sp-2) 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  color: var(--yh-slate-400);
  border: 0;
  border-bottom: 4px solid transparent;
}
.yh2-tabs .nav-link:hover {
  color: var(--yh-bone);
}
.yh2-tabs .nav-link.active {
  color: var(--yh-yellow);
  border-bottom-color: var(--yh-yellow);
}

.yh2-drawer-body {
  padding: var(--sp-5) var(--sp-6) var(--sp-7);
}
.yh2-drawer .challenge-desc {
  display: block;
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--yh-slate-300);
}
.yh2-drawer .challenge-desc a {
  text-decoration: underline !important;
  text-decoration-color: var(--yh-yellow) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px;
}
.yh2-block-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--yh-yellow);
}
.yh2-block,
.yh2-drawer .challenge-hints,
.yh2-files {
  margin: 0 0 var(--sp-5);
}
.yh2-hint details {
  margin-bottom: var(--sp-2);
  padding: var(--sp-3);
  background: var(--yh-slate-800);
  border-left: 4px solid var(--yh-slate-600);
}
.yh2-hint details[open] {
  border-left-color: var(--yh-yellow);
}
.yh2-hint summary {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: pointer;
}
.yh2-file {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 var(--sp-2) var(--sp-2) 0;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--yh-bone);
  background: var(--yh-slate-800);
  border: 2px solid var(--yh-slate-600);
  text-decoration: none !important;
}
.yh2-file:hover {
  color: var(--yh-ink);
  background: var(--yh-yellow);
  border-color: var(--yh-yellow);
}
.yh2-submit {
  padding: var(--sp-4);
  background: var(--yh-ink);
  border: 2px solid var(--yh-slate-700);
}
.yh2-submit-row {
  display: flex;
  gap: var(--sp-3);
}
.yh2-submit-row .challenge-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--sp-3) !important;
  font-size: var(--fs-md);
}
.yh2-submit-row .key-submit .btn {
  height: 100%;
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}
.yh2-attempts {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--yh-slate-400);
}
.yh2-rating {
  padding-top: var(--sp-3);
  border-top: 2px solid var(--yh-slate-700);
}

/* -------------------------------------------------------------------------
   7. Leaderboard
   ------------------------------------------------------------------------- */
.yh2-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-6);
}
.yh2-podium-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 170px;
  padding: var(--sp-4);
  color: var(--yh-bone);
  background: var(--yh-slate-800);
  border: 2px solid var(--yh-slate-600);
  text-decoration: none !important;
  box-shadow: var(--yh2-shadow);
  transition: transform var(--dur-fast) var(--ease-out);
}
.yh2-podium-card:hover {
  transform: translate(-2px, -2px);
  color: var(--yh-bone);
}
.yh2-podium-card.is-p1 {
  min-height: 230px;
  color: var(--yh-ink);
  background: var(--yh-yellow);
  border-color: var(--yh-ink);
  box-shadow: 6px 6px 0 0 var(--yh-amber-shadow);
}
.yh2-podium-card.is-p1:hover { color: var(--yh-ink); }
.yh2-podium-rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: 1;
  color: var(--yh-yellow);
}
.yh2-podium-card.is-p1 .yh2-podium-rank { color: var(--yh-ink); }
.yh2-podium-name {
  margin-top: auto;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yh2-podium-score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-md);
}

.yh2-ledger {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 2px solid var(--yh-slate-700);
}
.yh2-ledger-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 2fr) 96px;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-top: 2px solid var(--yh-slate-700);
}
.yh2-ledger-row:first-child { border-top: 0; }
.yh2-ledger-row:hover { background: var(--yh-slate-800); }
.yh2-ledger-rank {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--yh-slate-400);
}
.yh2-ledger-name {
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yh2-ledger-name a { text-decoration: none !important; }
.yh2-ledger-name .yh2-tag { margin-left: var(--sp-2); }
.yh2-ledger-bar {
  display: block;
  height: 10px;
  background: var(--yh-slate-800);
}
.yh2-ledger-bar span {
  display: block;
  height: 100%;
  background-image: var(--tape-stripes);
}
.yh2-ledger-score {
  justify-self: end;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--yh-yellow);
}

/* -------------------------------------------------------------------------
   8. Auth split screens
   ------------------------------------------------------------------------- */
.yh2-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: calc(100vh - 120px);
  margin: 0 calc(-1 * var(--yh2-pad));
}
.yh2-auth-art {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-7) var(--yh2-pad);
  background-color: var(--yh-ink);
  background-repeat: no-repeat;
  background-size: cover, cover;
  background-position: center, center;
  border-right: 6px solid;
  border-image-source: var(--tape-stripes);
  border-image-slice: 1;
}
.yh2-auth-art-login {
  background-image: linear-gradient(0deg, var(--yh-ink) 10%, transparent 70%), url("../img/ai.jpg");
}
.yh2-auth-art-register {
  background-image: linear-gradient(0deg, var(--yh-ink) 10%, transparent 70%), url("../img/data.jpg");
}
.yh2-auth-line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--yh-bone);
}
.yh2-auth-line em {
  font-style: normal;
  color: var(--yh-yellow);
}
.yh2-auth-panel {
  align-self: center;
  width: 100%;
  max-width: 480px;
  padding: var(--sp-7) var(--yh2-pad);
}
.yh2-auth-panel h1 {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-3xl);
  color: var(--yh-bone);
}
.yh2-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.yh2-auth-row a,
.yh2-auth-alt a {
  text-decoration: underline !important;
  text-decoration-color: var(--yh-yellow) !important;
  text-underline-offset: 3px;
}
.yh2-auth-alt {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--yh-slate-400);
}

/* -------------------------------------------------------------------------
   9. Pages + landing (the index page body seeded by poc/bootstrap.py)
   ------------------------------------------------------------------------- */
.yh2-page {
  padding-top: var(--sp-6);
}
.yh2-page .yh-landing {
  margin: calc(-1 * var(--sp-6)) calc(-1 * var(--yh2-pad)) 0;
}
.yh-hero {
  padding: var(--sp-9) var(--yh2-pad) var(--sp-8);
  color: var(--yh-bone);
  background-color: var(--yh-slate-900);
  background-image:
    linear-gradient(90deg, var(--yh-slate-900) 35%, transparent 85%),
    url("../img/hero.jpg");
  background-repeat: no-repeat;
  background-position: center, right center;
  background-size: cover, auto 100%;
}
.yh-hero .container,
.yh-stats .container,
.yh-steps .container {
  padding: 0;
}
.yh-eyebrow {
  margin-bottom: var(--sp-4);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--yh-yellow);
}
.yh-hero-wordmark {
  display: block;
  width: min(520px, 100%);
  height: auto;
  margin-bottom: var(--sp-6);
}
.yh-hero h1 {
  max-width: 14ch;
  font-size: var(--fs-4xl);
  color: var(--yh-bone);
}
.yh-hero h1 em {
  font-style: normal;
  color: var(--yh-yellow);
}
.yh-hero .yh-lead {
  max-width: 36rem;
  margin-bottom: var(--sp-6);
  color: var(--yh-slate-300);
}
.yh-hero .btn {
  margin: 0 var(--sp-3) var(--sp-3) 0;
}
.yh-stats {
  padding: 0 var(--yh2-pad);
  color: var(--yh-ink);
  background: var(--yh-yellow);
}
.yh-stats .row > div {
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
}
.yh-stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: 1;
}
.yh-stat-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
}
.yh-steps {
  padding: var(--sp-8) var(--yh2-pad);
}
.yh-step {
  height: 100%;
  padding: var(--sp-5);
  background: var(--yh-slate-800);
  border: 2px solid var(--yh-slate-600);
  box-shadow: var(--yh2-shadow);
}
.yh-step h3 { font-size: var(--fs-xl); color: var(--yh-bone); }
.yh-step p { color: var(--yh-slate-300); }
.yh-step-n {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--yh-yellow);
}

/* -------------------------------------------------------------------------
   10. Error pages
   ------------------------------------------------------------------------- */
.yh2-error {
  margin: var(--sp-8) 0 0;
  border: 2px solid var(--yh-slate-700);
}
.yh2-error-body {
  padding: var(--sp-7) var(--sp-6);
}
.yh2-error-code {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 1;
  color: var(--yh-yellow);
  text-shadow: 6px 6px 0 var(--yh-amber-shadow);
}
.yh2-error h1 {
  margin: var(--sp-3) 0;
  font-size: var(--fs-3xl);
  color: var(--yh-bone);
}
.yh2-error .btn {
  margin-top: var(--sp-5);
}

/* -------------------------------------------------------------------------
   11. Easter eggs (static/js/konami.js)
   ------------------------------------------------------------------------- */
/* Hard-hat mode: the tape rolls. The stripes (18px + 18px bands at -45deg, from
   --tape-stripes) repeat every P = 36px * sqrt(2) along both axes. Nothing is
   tiled: each tape paints ONE continuous stripe image, one period longer than
   the tape, and slides it by exactly P -- so the loop is seamless and there are
   no tile edges to mis-round at fractional display scaling (125%, 150%, ...). */
.yh-hardhat-mode {
  --yh-tape-p: calc(36px * 1.41421356);
}
.yh-hardhat-mode .yh-tape,
.yh-hardhat-mode .yh2-ledger-bar span {
  background-repeat: no-repeat;
  background-size: calc(100% + var(--yh-tape-p)) 100%;
  animation: yh-tape-roll .6s linear infinite;
}
.yh-hardhat-mode .yh2-rail::after {
  background-repeat: no-repeat;
  background-size: 100% calc(100% + var(--yh-tape-p));
  animation: yh-tape-fall .6s linear infinite;   /* the rail's strip runs downwards */
}
@keyframes yh-tape-roll {
  from { background-position: calc(-1 * var(--yh-tape-p)) 0; }
  to   { background-position: 0 0; }
}
@keyframes yh-tape-fall {
  from { background-position: 0 calc(-1 * var(--yh-tape-p)); }
  to   { background-position: 0 0; }
}
.yh-konami {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  animation: yh-konami-in .24s steps(4) forwards;
}
.yh-konami.is-closing { animation: yh-konami-out .2s steps(4) forwards; }
@keyframes yh-konami-in  { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes yh-konami-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.7); } }
.yh-konami-backdrop { position: absolute; inset: 0; background: var(--yh-ink); opacity: .85; }
.yh-konami-box {
  position: relative;
  width: 90%;
  max-width: 460px;
  background: var(--yh-slate-900);
  border: 2px solid var(--yh-yellow);
  box-shadow: 8px 8px 0 0 var(--yh-amber-shadow);
}
.yh-konami-header {
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  text-align: center;
  color: var(--yh-ink);
  background: var(--yh-yellow);
  animation: yh-konami-flash 1.2s steps(2) infinite;
}
@keyframes yh-konami-flash { 50% { background: var(--yh-yellow-soft); } }
.yh-konami-body { padding: var(--sp-5) var(--sp-5) var(--sp-4); text-align: center; color: var(--yh-bone); }
.yh-konami-cat {
  display: block;
  width: 96px;
  height: auto;
  margin: 0 auto var(--sp-3);
  filter: invert(1) brightness(1.25);
  opacity: .55;
}
.yh-konami-title {
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--yh-yellow);
  text-shadow: 3px 3px 0 var(--yh-amber-shadow);
}
.yh-konami-code {
  display: inline-block;
  margin: 0 auto var(--sp-4);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--yh-slate-300);
}
.yh-konami-intel {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  text-align: left;
  border: 2px solid var(--yh-yellow);
  border-left-width: 6px;
  background: var(--yh-slate-800);
}
.yh-konami-intel-label {
  margin-bottom: var(--sp-1);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--yh-yellow);
}
.yh-konami-intel-msg { font-weight: 600; color: var(--yh-bone); }
.yh-konami-continue {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--yh-slate-400);
}
.yh-konami-cursor {
  margin-left: var(--sp-1);
  color: var(--yh-yellow);
  animation: yh-blink .8s steps(1) infinite;
}

/* -------------------------------------------------------------------------
   12. Responsive + motion
   ------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .yh2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  :root, [data-bs-theme="dark"] { --yh2-pad: var(--sp-4); }

  .yh2-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    background: var(--yh-ink);
    border-bottom: 6px solid;
    border-image-source: var(--tape-stripes);
    border-image-slice: 1;
  }
  .yh2-topbar-brand img { display: block; height: 18px; width: auto; }
  .yh2-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--yh-bone);
    background: transparent;
    border: 2px solid var(--yh-slate-600);
    border-radius: var(--radius-1);
  }
  .yh2-menu-icon,
  .yh2-menu-icon::before,
  .yh2-menu-icon::after {
    display: block;
    width: 16px;
    height: 2px;
    background: var(--yh-yellow);
  }
  .yh2-menu-icon { position: relative; }
  .yh2-menu-icon::before,
  .yh2-menu-icon::after { content: ""; position: absolute; left: 0; }
  .yh2-menu-icon::before { top: -5px; }
  .yh2-menu-icon::after { top: 5px; }

  .yh2-rail {
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .yh2-rail-open .yh2-rail { transform: none; }
  .yh2-rail-open .yh2-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1025;
    background: var(--yh-ink);
    opacity: .7;
  }
  main.yh2-main { margin-left: 0; min-height: calc(100vh - 60px); }

  .yh2-head, .jumbotron { padding-top: var(--sp-6); }
  .yh2-head h1, .jumbotron h1 { font-size: var(--fs-3xl); }

  .yh2-auth { grid-template-columns: 1fr; }
  .yh2-auth-art { min-height: 220px; border-right: 0; border-bottom: 6px solid; }
  .yh2-auth-line { font-size: var(--fs-2xl); }

  .yh-hero h1 { font-size: var(--fs-2xl); }
}

@media (max-width: 767.98px) {
  .yh2-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
  .yh2-stat-num { font-size: var(--fs-2xl); }
  .yh2-case-legend { display: none; }
  .yh2-case {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "status name pts" "id solves solves";
    gap: var(--sp-1) var(--sp-3);
  }
  .yh2-case-status { grid-area: status; }
  .yh2-case-name { grid-area: name; white-space: normal; }
  .yh2-case-pts { grid-area: pts; }
  .yh2-case-id { grid-area: id; }
  .yh2-case-solves { grid-area: solves; }
  .yh2-podium { grid-template-columns: 1fr; }
  .yh2-podium-card, .yh2-podium-card.is-p1 { min-height: 0; }
  .yh2-ledger-row { grid-template-columns: 48px minmax(0, 1fr) 72px; }
  .yh2-ledger-bar { display: none; }
  .yh2-drawer-head, .yh2-drawer-body { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .yh2-submit-row { flex-direction: column; }
  .yh2-error-code { font-size: var(--fs-5xl); }
}

@media (prefers-reduced-motion: reduce) {
  .yh-cursor,
  .yh-konami-cursor,
  .yh-konami-header,
  .yh-hardhat-mode .yh-tape,
  .yh-hardhat-mode .yh2-rail::after,
  .yh-hardhat-mode .yh2-ledger-bar span,
  .yh-konami,
  .yh-konami.is-closing {
    animation: none;
  }
  .yh2-drawer.fade .modal-dialog,
  .yh2-rail {
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   13. Fixes from the first screenshot pass
   ------------------------------------------------------------------------- */
/* the Submit label never wraps */
.yh2-submit-row .key-submit .btn { white-space: nowrap; }

/* podium keeps its 2-1-3 shape even with fewer than three teams */
.yh2-podium-card { grid-row: 1; }
.yh2-podium-card.is-p1 { grid-column: 2; }
.yh2-podium-card.is-p2 { grid-column: 1; }
.yh2-podium-card.is-p3 { grid-column: 3; }
@media (max-width: 767.98px) {
  .yh2-podium-card,
  .yh2-podium-card.is-p1,
  .yh2-podium-card.is-p2,
  .yh2-podium-card.is-p3 { grid-row: auto; grid-column: 1; }
  .yh2-podium-card.is-p1 { order: -1; }
}

/* the rail scrolls on short screens -- keep its scrollbar dark and thin */
.yh2-rail-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--yh-slate-600) var(--yh-ink);
}

/* -------------------------------------------------------------------------
   14. Team + player profiles (core markup, restyled)
   ------------------------------------------------------------------------- */
/* badges CTFd fills with a colour: readable text on the fill, square-ish */
.badge.bg-primary,
.badge.text-bg-primary {
  color: var(--yh-ink);
  background: var(--yh-yellow) !important;
  border-color: var(--yh-yellow);
}
.badge.bg-secondary,
.badge.text-bg-secondary,
.badge.text-bg-light {
  color: var(--yh-bone) !important;
  background: var(--yh-slate-700) !important;
  border-color: var(--yh-slate-600);
}
.badge.rounded-pill {
  border-radius: var(--radius-1) !important;
}

/* place + points read left-aligned, like every other headline */
#team-place, #team-score,
.jumbotron h2.text-center {       /* player pages: same headings, no ids */
  text-align: left !important;
  font-size: var(--fs-3xl);
  color: var(--yh-bone);
}
#team-place small, #team-score small,
.jumbotron h2.text-center small {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  color: var(--yh-slate-400);
}

/* solve / fail and category bars: CTFd sets colours inline -- map them to tokens */
[x-data$="Graphs"] .progress {
  height: 12px;
  background: var(--yh-slate-800);
  border-radius: 0;
}
[x-data$="Graphs"] .progress-bar[style*="rgb(0, 209, 64)"]   { background-color: var(--yh-ok) !important; }
[x-data$="Graphs"] .progress-bar[style*="rgb(207, 38, 0)"]   { background-color: var(--yh-danger) !important; }
[x-data$="Graphs"] circle[fill="rgb(0, 209, 64)"]            { fill: var(--yh-ok); }
[x-data$="Graphs"] circle[fill="rgb(207, 38, 0)"]            { fill: var(--yh-danger); }
/* category colours are hashed per name -- replace with a fixed brand sequence */
[x-data$="Graphs"] > div:nth-child(2) .progress-bar:nth-of-type(6n+1) { background-color: var(--yh-yellow) !important; }
[x-data$="Graphs"] > div:nth-child(2) .progress-bar:nth-of-type(6n+2) { background-color: var(--yh-slate-400) !important; }
[x-data$="Graphs"] > div:nth-child(2) .progress-bar:nth-of-type(6n+3) { background-color: var(--yh-yellow-deep) !important; }
[x-data$="Graphs"] > div:nth-child(2) .progress-bar:nth-of-type(6n+4) { background-color: var(--yh-bone) !important; }
[x-data$="Graphs"] > div:nth-child(2) .progress-bar:nth-of-type(6n+5) { background-color: var(--yh-info) !important; }
[x-data$="Graphs"] > div:nth-child(2) .progress-bar:nth-of-type(6n+6) { background-color: var(--yh-slate-600) !important; }
/* legend dots follow the same sequence (the first div in the column is the bar itself) */
[x-data$="Graphs"] > div:nth-child(2) > div.ps-2:nth-of-type(6n+2) circle { fill: var(--yh-yellow); }
[x-data$="Graphs"] > div:nth-child(2) > div.ps-2:nth-of-type(6n+3) circle { fill: var(--yh-slate-400); }
[x-data$="Graphs"] > div:nth-child(2) > div.ps-2:nth-of-type(6n+4) circle { fill: var(--yh-yellow-deep); }
[x-data$="Graphs"] > div:nth-child(2) > div.ps-2:nth-of-type(6n+5) circle { fill: var(--yh-bone); }
[x-data$="Graphs"] > div:nth-child(2) > div.ps-2:nth-of-type(6n+6) circle { fill: var(--yh-info); }
[x-data$="Graphs"] > div:nth-child(2) > div.ps-2:nth-of-type(6n+1) circle { fill: var(--yh-slate-600); }
[x-data$="Graphs"] small {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--yh-slate-400);
}

/* -------------------------------------------------------------------------
   16. Rail: Remote Desktop item (Workstation)
   ------------------------------------------------------------------------- */
.yh2-rdp-tag {
  margin-left: auto;
  padding: 0 var(--sp-1);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--yh-ink);
  background: var(--yh-yellow);
  border-radius: var(--radius-1);
}

/* Workstation logon card on /team, and the rules note on /teams/new (static/js/yh.js) */
.yh2-ws-card {
  max-width: 560px;
  margin: 0 0 var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--yh-slate-800);
  border: 2px solid var(--yh-slate-700);
  border-left: 6px solid var(--yh-yellow);
}
.yh2-ws-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-3) 0 var(--sp-4);
}
.yh2-ws-list dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--yh-slate-400);
}
.yh2-ws-list dd { margin: 0; color: var(--yh-bone); }
.yh2-ws-note {
  max-width: 72ch;
  padding: var(--sp-3) var(--sp-4);
  color: var(--yh-slate-300);
  background: var(--yh-slate-800);
  border-left: 6px solid var(--yh-yellow);
}

/* -------------------------------------------------------------------------
   17. Embedded: inside the Workstation's Internet Explorer (templates/base.html
       adds .yh2-embed when framed). The window's Links bar replaces the rail.
   ------------------------------------------------------------------------- */
.yh2-embed .yh2-rail,
.yh2-embed .yh2-topbar,
.yh2-embed .yh2-scrim { display: none; }
.yh2-embed main.yh2-main { margin-left: 0; min-height: 100vh; }