/* Skin "dial": see skins.css for the shared base and the token reference. */

@font-face {
  font-family: "DSEG7";
  src: url("/static/fonts/DSEG7Classic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ------------------------------------------------------------------ Cadran
   "Radio set": the site as the front of a transceiver. A dark chassis (a status strip
   across the top, a rail of band keys down the left) around panels with screws in
   their corners; the figures are seven-segment readouts, the quiz question sits on
   a screen and the answers are four keys, lettered A to D, that press in. Amber on
   charcoal; the chassis stays dark even in the light mode, which only lightens the
   panels. Below 992px the rail becomes a row of keys under the strip. */

html[data-skin="dial"],
html[data-skin="dial"][data-bs-theme="dark"] {
  --sk-bg: 22, 24, 29;
  --sk-surface: 30, 33, 40;
  --sk-surface-2: 40, 44, 54;
  --sk-text: 235, 230, 218;
  --sk-border: #3a3f4b;
  --sk-accent: #ffb000;
  --sk-accent-rgb: 255, 176, 0;
  --sk-accent-hover: #ffc233;
  --sk-on-accent: #1a1200;
  --sk-accent-text: #ffb000;
  --sk-accent-text-rgb: 255, 176, 0;
  --sk-radius: 4px;
  --sk-radius-btn: 4px;
  --sk-radius-input: 3px;
  --sk-shadow: inset 0 0 0 1px rgba(255, 176, 0, 0.05);
  --sk-edge: #1a1200;
  --sk-leaf: #1a1200;
  --sk-plate-radius: 3px;
}

html[data-skin="dial"][data-bs-theme="light"] {
  --sk-bg: 243, 240, 232;
  --sk-surface: 251, 249, 243;
  --sk-surface-2: 232, 228, 217;
  --sk-text: 28, 26, 20;
  --sk-border: #c9c2ae;
  --sk-accent: #b45309;
  --sk-accent-rgb: 180, 83, 9;
  --sk-accent-hover: #92400e;
  --sk-on-accent: #fff;
  --sk-accent-text: #92400e;
  --sk-accent-text-rgb: 146, 64, 14;
  --sk-shadow: none;
  --sk-edge: #451a03;
  --sk-leaf: #fff;
}

html[data-skin="dial"] {
  --mr-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --mr-seg: "DSEG7", var(--mr-mono);
  --dial-chassis: #14161b;
  /* The left rail: a lighter slate than the chassis of the top strip. */
  --dial-rail: #353a46;
  --dial-screen: #0a0b0d;
  --dial-lcd-danger: #ff6b5e;
  --dial-lcd-warning: #ffc400;
  --dial-lcd-success: #4ade80;
}

/* ---------------------------------------------------------------- chassis */

/* The strip and the rail are dark whatever the colour mode: they carry their own
   light-on-dark palette, so everything inside reads from it. */
html[data-skin="dial"] .mr-shell {
  --sk-bg: 20, 22, 27;
  --sk-surface: 30, 33, 40;
  --sk-surface-2: 40, 44, 54;
  --sk-text: 235, 230, 218;
  --sk-border: #3a3f4b;
  --sk-accent: #ffb000;
  --sk-accent-rgb: 255, 176, 0;
  --sk-accent-hover: #ffc233;
  --sk-on-accent: #1a1200;
  --sk-accent-text: #ffb000;
  --sk-leaf: #1a1200;
  --sk-edge: #1a1200;
  --bs-body-color: rgb(235, 230, 218);
  --bs-secondary-color: rgba(235, 230, 218, 0.62);
  --bs-border-color: #3a3f4b;
  --bs-link-color: #ffb000;
  background-color: var(--dial-chassis);
  color: var(--bs-body-color);
}

html[data-skin="dial"] .mr-shell .navbar {
  background-color: transparent !important;
  border: 0 !important;
}

/* The signed-in name and the version are text on the dark chassis, in either mode. */
html[data-skin="dial"] .mr-shell .navbar-text,
html[data-skin="dial"] .mr-shell #current-username {
  color: var(--bs-body-color);
}

html[data-skin="dial"] .mr-shell .mr-version {
  color: var(--bs-secondary-color);
}

/* Still pinned where the base puts it, under the title at the bottom right, but nudged
   down 0.45rem: Dial's title is smaller, so at the base's height the version sat on the
   bottom of the lettering. */
html[data-skin="dial"] .mr-navbar .mr-version {
  bottom: calc((100% - var(--mr-plate-size)) / 2 - 0.45rem);
}

html[data-skin="dial"] .mr-navbar {
  --mr-plate-size: 36px;
  padding: 0.55rem 0;
}

html[data-skin="dial"] .mr-navbar .navbar-brand {
  font-size: 1.7rem;
}

html[data-skin="dial"] .mr-logo {
  width: 29px;
  height: 29px;
}

/* A band key: a bevelled button with an LED that lights for the current page. */
html[data-skin="dial"] .mr-shell .nav-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid #4a505e;
  border-bottom-width: 3px;
  border-radius: 4px;
  background-image: linear-gradient(rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.18));
  background-color: rgb(var(--sk-surface-2));
  color: var(--bs-body-color);
  font-family: var(--mr-mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

html[data-skin="dial"] .mr-shell .nav-link::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #3b3f4a;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

html[data-skin="dial"] .mr-shell .nav-link:hover {
  border-color: #ffb000;
  color: #ffb000;
}

html[data-skin="dial"] .mr-shell .nav-link[aria-current="page"] {
  transform: translateY(2px);
  border-bottom-width: 1px;
  border-color: #ffb000;
  color: #ffb000;
  background-color: #2a2417;
}

html[data-skin="dial"] .mr-shell .nav-link[aria-current="page"]::before {
  background-color: #ffb000;
  box-shadow: 0 0 8px #ffb000;
}

html[data-skin="dial"] .mr-shell .dropdown-item {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: 3px;
  font-family: var(--mr-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: normal;
}

html[data-skin="dial"] .mr-shell .dropdown-item:hover,
html[data-skin="dial"] .mr-shell .dropdown-item:focus {
  background-color: #2a2417;
  color: #ffb000;
}

html[data-skin="dial"] .mr-shell .dropdown-menu {
  --bs-dropdown-bg: #1e2128;
  --bs-dropdown-link-color: #ebe6da;
  --bs-dropdown-border-color: #3a3f4b;
  --bs-dropdown-link-hover-bg: #2a2e38;
}

html[data-skin="dial"] .mr-shell .form-select,
html[data-skin="dial"] .mr-shell .form-control {
  background-color: #0a0b0d;
  color: #ebe6da;
  border-color: #3a3f4b;
}

html[data-skin="dial"] .mr-shell label {
  font-family: var(--mr-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bs-secondary-color) !important;
}

@media (min-width: 992px) {
  html[data-skin="dial"] body {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: 100vh;
  }

  html[data-skin="dial"] .skip-link {
    grid-column: 1 / -1;
  }

  /* Both bars become cells of the page grid: the strip across the top, the rail
     down the left. */
  html[data-skin="dial"] .mr-shell {
    display: contents;
  }

  html[data-skin="dial"] .mr-navbar {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 0.55rem 1.25rem;
    background-color: var(--dial-chassis) !important;
    border-bottom: 2px solid #000 !important;
    box-shadow: 0 1px 0 #3a3f4b;
    --sk-surface: 30, 33, 40;
    --sk-surface-2: 40, 44, 54;
    --sk-text: 235, 230, 218;
    --sk-border: #3a3f4b;
    --sk-accent: #ffb000;
    --sk-accent-rgb: 255, 176, 0;
    --sk-accent-hover: #ffc233;
    --sk-on-accent: #1a1200;
    --sk-accent-text: #ffb000;
    --sk-leaf: #1a1200;
    --sk-edge: #1a1200;
    --bs-body-color: rgb(235, 230, 218);
    --bs-secondary-color: rgba(235, 230, 218, 0.62);
    --bs-border-color: #3a3f4b;
  }

  html[data-skin="dial"] .mr-navbar > .container {
    max-width: none;
    padding: 0;
  }

  html[data-skin="dial"] .mr-shell .navbar:not(.mr-navbar) {
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;
    padding: 1.1rem 0.9rem;
    background-color: var(--dial-rail) !important;
    border-right: 2px solid #000 !important;
    box-shadow: 1px 0 0 #3a3f4b;
    --sk-surface: 30, 33, 40;
    --sk-surface-2: 40, 44, 54;
    --sk-text: 235, 230, 218;
    --sk-border: #3a3f4b;
    --sk-accent: #ffb000;
    --sk-accent-rgb: 255, 176, 0;
    --bs-body-color: rgb(235, 230, 218);
    --bs-secondary-color: rgba(235, 230, 218, 0.62);
    --bs-border-color: #3a3f4b;
    align-items: flex-start;
  }

  html[data-skin="dial"] .mr-shell .navbar:not(.mr-navbar) > .container {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem !important;
    max-width: none;
    padding: 0;
    width: 100%;
  }

  /* The external links open as a popup beside the rail, over the page, rather than
     unfolding inside it. */
  html[data-skin="dial"] .mr-shell .dropdown-menu {
    position: absolute !important;
    inset: 0 auto auto calc(100% + 0.7rem) !important;
    transform: none !important;
    min-width: 15rem;
    padding: 0.4rem;
    border: 1px solid #4a505e;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    z-index: 1050;
  }


  html[data-skin="dial"] .mr-shell .navbar:not(.mr-navbar) .ms-auto {
    margin: 1rem 0 0 !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.35rem !important;
  }

  html[data-skin="dial"] main#content {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    padding: 1.75rem 2rem 2.5rem;
  }
}

/* ------------------------------------------------------------------ panels */

/* Panels: a bevelled frame with a screw in each corner. */
html[data-skin="dial"] .card {
  border: 1px solid var(--sk-border);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(0, 0, 0, 0.18),
    0 2px 0 rgba(0, 0, 0, 0.35) !important;
  background-image:
    radial-gradient(circle at 9px 9px, rgba(127, 127, 127, 0.4) 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 9px) 9px, rgba(127, 127, 127, 0.4) 2px, transparent 3px),
    radial-gradient(circle at 9px calc(100% - 9px), rgba(127, 127, 127, 0.4) 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), rgba(127, 127, 127, 0.4) 2px, transparent 3px);
}

html[data-skin="dial"] .card-body {
  padding: 1.4rem 1.5rem;
}

/* The two streak figures are each a panel of their own, like the tiles around them
   (bevelled, with a screw in every corner), holding a label, a seven-segment readout
   and the unit. No extra frame inside the panel. */
html[data-skin="dial"] .mr-dash-stat {
  display: flex !important;
  align-items: center;
  gap: 1rem;
  font-size: 0;
  margin: 0 0 0.75rem !important;
  padding: 1.1rem 1.5rem !important;
  background-color: rgb(var(--sk-surface));
  border: 1px solid var(--sk-border) !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(0, 0, 0, 0.18),
    0 2px 0 rgba(0, 0, 0, 0.35);
  background-image:
    radial-gradient(circle at 9px 9px, rgba(127, 127, 127, 0.4) 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 9px) 9px, rgba(127, 127, 127, 0.4) 2px, transparent 3px),
    radial-gradient(circle at 9px calc(100% - 9px), rgba(127, 127, 127, 0.4) 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), rgba(127, 127, 127, 0.4) 2px, transparent 3px);
}

html[data-skin="dial"] .mr-dash-stat > * {
  font-size: 0.82rem;
  margin: 0 !important;
}

html[data-skin="dial"] .mr-dash-stat .fw-semibold {
  font-family: var(--mr-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Seven-segment readouts: the streak and the estimate, in a black window. */
html[data-skin="dial"] .mr-pct,
html[data-skin="dial"] .mr-dash-streak .fs-4 {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border-radius: 3px;
  background-color: var(--dial-screen);
  box-shadow: inset 0 0 0 2px #000, inset 0 4px 12px rgba(0, 0, 0, 0.85), 0 0 0 1px #3a3f4b;
  font-family: var(--mr-seg) !important;
  font-size: 2.3rem !important;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-shadow: 0 0 12px currentColor;
}

html[data-skin="dial"] .mr-dash-streak .fs-4 {
  color: #ffb000;
}

html[data-skin="dial"] .mr-pct-danger { color: var(--dial-lcd-danger); }
html[data-skin="dial"] .mr-pct-warning { color: var(--dial-lcd-warning); }
html[data-skin="dial"] .mr-pct-success { color: var(--dial-lcd-success); }

@media (min-width: 992px) {
  html[data-skin="dial"] main:has(> .mr-dash-summary) {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
  }

  html[data-skin="dial"] main:has(> .mr-dash-summary) > h1 {
    grid-column: 1 / -1;
  }

  html[data-skin="dial"] .mr-dash-summary,
  html[data-skin="dial"] .mr-dash-summary > .card-body,
  html[data-skin="dial"] .mr-dash-estimates {
    display: contents;
  }

  html[data-skin="dial"] .mr-dash-exam,
  html[data-skin="dial"] .mr-dash-mastery .card {
    background-color: rgb(var(--sk-surface));
    border: 1px solid var(--sk-border);
    border-radius: 4px;
    padding: 1.4rem 1.5rem;
    margin: 0 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      inset 0 0 0 1px rgba(0, 0, 0, 0.18),
      0 2px 0 rgba(0, 0, 0, 0.35);
    background-image:
      radial-gradient(circle at 9px 9px, rgba(127, 127, 127, 0.4) 2px, transparent 3px),
      radial-gradient(circle at calc(100% - 9px) 9px, rgba(127, 127, 127, 0.4) 2px, transparent 3px),
      radial-gradient(circle at 9px calc(100% - 9px), rgba(127, 127, 127, 0.4) 2px, transparent 3px),
      radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), rgba(127, 127, 127, 0.4) 2px, transparent 3px);
  }

  /* The two streak panels are a row of their own across the top, one over each of the
     two qualifications below; the paragraph around them has no look of its own. */
  html[data-skin="dial"] .mr-dash-streak {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 !important;
    padding: 0;
    font-size: 0;
  }

  html[data-skin="dial"] .mr-dash-streak .mr-dash-stat {
    margin: 0 !important;
  }

  html[data-skin="dial"] .mr-dash-exam {
    grid-column: span 6;
    flex: none;
    max-width: none;
    width: auto;
  }

  html[data-skin="dial"] .mr-dash-exam .mr-pct {
    display: block;
    width: max-content;
    margin: 0.4rem 0 0.6rem !important;
    font-size: 2.8rem !important;
  }

  html[data-skin="dial"] .mr-dash-mastery {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
  }

  html[data-skin="dial"] .mr-dash-mastery > * {
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
  }
}

/* -------------------------------------------------------------------- quiz */

html[data-skin="dial"] .progress {
  height: 0.9rem;
  padding: 2px;
  border-radius: 2px;
  background-color: var(--dial-screen);
  box-shadow: inset 0 0 0 1px #3a3f4b;
}

html[data-skin="dial"] #q-progress {
  border-radius: 1px;
  background-color: transparent !important;
  background-image: repeating-linear-gradient(90deg, #ffb000 0 10px, transparent 10px 13px);
  box-shadow: 0 0 10px rgba(255, 176, 0, 0.4);
}

/* The question is plain text on the page, with no screen behind it: black on the
   light theme, and the light cream on the dark one, where black would vanish. */
html[data-skin="dial"] #q-text {
  margin: 1.1rem 0 1.4rem;
  padding: 0;
  background: none;
  color: #000;
  font-size: 1.25rem !important;
  font-weight: 500;
  line-height: 1.55;
}

html[data-skin="dial"][data-bs-theme="dark"] #q-text {
  color: #f2ecdc;
}

/* The answers are flat keys, lettered, one to a line. The verdict icon sits left of the letter. */
html[data-skin="dial"] #q-options {
  counter-reset: key;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  border-radius: 0;
}

html[data-skin="dial"] #q-options .list-group-item {
  counter-increment: key;
  position: relative;
  min-height: 3.6rem;
  padding: 0.8rem 1rem 0.8rem 4.9rem;
  border: 1px solid #4a505e;
  border-radius: 6px !important;
  align-items: center !important;
}

html[data-skin="dial"] #q-options .list-group-item::before {
  content: counter(key, upper-alpha);
  position: absolute;
  left: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--sk-accent);
  border-radius: 50%;
  color: var(--sk-accent-text);
  font-family: var(--mr-mono);
  font-size: 0.85rem;
  font-weight: 700;
}

html[data-skin="dial"] #q-options .mr-verdict-slot {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

html[data-skin="dial"] #q-options .form-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

html[data-skin="dial"] #q-options .list-group-item:has(input:checked):not(.list-group-item-success):not(.list-group-item-danger) {
  border-color: var(--sk-accent);
  box-shadow: 0 0 0 1px var(--sk-accent);
  background-color: rgba(var(--sk-accent-rgb), 0.14);
}

html[data-skin="dial"] #q-options .list-group-item:has(input:focus-visible) {
  outline: 2px solid var(--sk-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ below 992px */

@media (max-width: 991.98px) {
  /* The rail becomes a row of keys that scrolls sideways. */
  html[data-skin="dial"] .mr-shell .navbar:not(.mr-navbar) {
    padding: 0.5rem 0.75rem;
    background-color: var(--dial-rail) !important;
    border-bottom: 2px solid #000 !important;
  }

  html[data-skin="dial"] .mr-shell .navbar:not(.mr-navbar) > .container {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 0.4rem !important;
    padding: 0.15rem 0 0.3rem;
    align-items: center;
  }

  html[data-skin="dial"] .mr-shell .nav-link {
    padding: 0.45rem 0.7rem;
    font-size: 0.7rem;
  }

  /* On a phone the popup is a panel under the strip, as wide as the screen allows. */
  html[data-skin="dial"] .mr-shell .dropdown-menu {
    position: fixed !important;
    inset: 10.9rem 0.75rem auto 0.75rem !important;
    transform: none !important;
    z-index: 1050;
  }

  html[data-skin="dial"] .mr-shell .navbar:not(.mr-navbar) .ms-auto {
    margin-left: 0.5rem !important;
  }

  html[data-skin="dial"] #skin-select {
    font-size: 0.72rem;
    width: 6rem !important;
  }
}