/* ============================================================================
   Instrument
   ----------------------------------------------------------------------------
   Shown in the settings picker as "Instrument". The file keeps its
   eliteminds.css name because theme_file rows point at it by filename and the
   palette is still the Elite Minds deck's - only the display label changed.

   The platform measures things. A test is time-bound and pauses when the lab
   stops; a box is n flags of m; a report is a ribbon of how long each box
   took; the queue is an ordered position per student. Almost every screen is
   a dense grid of readings and states.

   So this theme is dressed as an instrument rather than as a dashboard. That
   is one decision with three consequences, and everything below follows from
   it:

     colour has roles, not just values.  One colour is reserved for readings -
       values that change - and never spent on anything static. One is the
       mark: where you are, what is live, what is now. Everything else is
       ground and legend. A palette that is merely pretty reads as decoration;
       a palette with rules reads as an instrument.

     type is one family.  IBM Plex Sans for legends and interface, IBM Plex
       Mono for data. The platform already ships the mono, so pairing it with
       its own sans makes the two a designed system instead of a collision -
       matched x-height and proportions, so the jump from a label to a value
       inside a table stops looking accidental. Plex was drawn for technical
       products, which is what this is.

     measurement is drawn as measurement.  Every track that reports a
       quantity - progress, the test clock, the report's time ribbon - carries
       a hairline tick scale, so the reading is legible as a shape before it
       is read as a number. That is the one flourish in the file, and it is
       spent on the thing the product is actually for.

   And one subtraction: no drop shadows. Panels are engraved into the ground
   with a hairline and half a step of value, never floated above it. Elevation
   is a paper metaphor and this is not paper.

   Palette from the Elite Minds Capability Development 2026 deck - the colours
   counted off the slides, since the deck's own theme block is stock Office
   boilerplate. Loaded after v2/css/main.css, so redefining the tokens it
   already falls back to reaches most of the surface; the component rules
   further down exist to unpick effects main.css hard-codes and to draw the
   tick scales.
   ========================================================================= */

/* IBM Plex Sans, declared inline rather than pulled in with @import - an
   @import from a theme stylesheet resolved to nothing here, and it would
   serialise a second round trip behind this file even when it worked. Same
   shape as static/font/IBM-Plex-Mono.css, which is how the mono already
   loads. One face per subset: Plex Sans is variable, so every weight Google
   serves is the same file. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.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;
}

:root {
  /* ── Ground ──────────────────────────────────────────────────────────
     Three steps, each a half-step apart rather than a full one. Panels
     should separate from the ground the way an engraved plate does - just
     enough to catch the edge - not the way a card floats. */
  --color-bg:            #0B1415;   /* ink   */
  --color-surface:       #141D1E;   /* panel */
  --color-header:        #1B2324;   /* rail  */
  --color-bg-bright:     #12211F;

  /* ── Interactive ─────────────────────────────────────────────────────
     Teal at rest. Calm enough to appear hundreds of times on a dense page
     without shouting, legible down to the 11px legends. */
  --text-primary:        #2FA6AD;
  --text-primary-hover:  #268A90;

  /* ── The reading ─────────────────────────────────────────────────────
     Reserved. This brighter teal marks a measured value - a count, a
     remaining time, a filled track - and is spent on nothing static. That
     restriction is the whole point: if it appears everywhere it says
     nothing, and if it appears only on readings then a number in this
     colour can be trusted to be live. */
  --text-primary-bright: #3EC8D0;

  /* main.css carries a second, near-identical cyan for borders and faint
     tints. Left unset it would keep its #00f0ff default and put arcade cyan
     back on a hundred edges. */
  --text-primary-alt:    #2FA6AD;

  /* ── The mark ────────────────────────────────────────────────────────
     Burnt orange, and deliberately not a second interactive colour. It
     answers one question - where am I, what is live, what is now - so it
     appears on the current nav item, the primary action, and running state.
     Nothing else earns it. */
  --text-secondary:      #D7621F;
  --text-secondary-hover:#E8781F;

  /* ── Legend and value ────────────────────────────────────────────────── */
  --text-white:          #E8EEEE;   /* printed value */
  --text-muted:          #879A9C;   /* legend        */

  /* ── Status ──────────────────────────────────────────────────────────
     Pulled toward the palette so they sit in the same world as the slate
     ground rather than reading as pure signal colours borrowed from
     somewhere else. */
  --accent-blue:         #2FA6AD;
  --accent-green:        #4FB286;
  --accent-red:          #D2544B;
  --accent-amber:        #D7621F;

  --border-color:        #22302F;   /* etch */

  --font-primary: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', system-ui, sans-serif;

  /* main.css reaches for --v2-font-mono 188 times, and nearly all of it is
     chrome: sidebar items, form fields, hints, alerts, toasts, table labels.
     Setting navigation and tables in a typewriter face is the loudest "this
     is a hacking game" signal in the interface - louder than the colours -
     so under this theme that token becomes the interface sans, and real
     monospace is re-asserted below on the data that needs it. */
  --v2-font-mono: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', system-ui, sans-serif;
  --em-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo,
             'Courier New', monospace;

  /* main.css defines these as literal neon shadows and applies them by
     variable, so neutralising them here removes the glow everywhere at once. */
  --v2-glow-cyan:    0 0 0 transparent;
  --v2-glow-magenta: 0 0 0 transparent;
  --v2-glow-blue:    0 0 0 transparent;

  /* Local additions used below. */
  --em-etch:     #22302F;
  --em-etch-lit: rgba(255,255,255,.045);  /* the lit top edge of an engraving */
  --em-panel-2:  #1B2626;
  --em-tick:     rgba(135,154,156,.34);
}

/* ── Body ───────────────────────────────────────────────────────────── */
body {
  background: var(--color-bg);
  color: var(--text-white);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── The CRT ──────────────────────────────────────────────────────────
   main.css lays a scanline grid over the whole viewport (body::before, at
   z-index 9999) and stripes the main area and the login page with a 5.5px
   repeating gradient. It is the most recognisable thing about the arcade
   look and the first thing that reads as a toy on a demo screen. All three
   off; the ground is flat. */
body::before { display: none !important; }

.main-area,
.auth-body {
  background-image: none !important;
  background: var(--color-bg) !important;
}

/* Nothing emits light. Neutralising the --v2-glow-* tokens covers most of
   it, but a dozen component rules also set a glow as a literal value, and
   CSS cannot select a declaration by what it contains - so this clears
   text-shadow outright and puts back the one instance that exists for
   legibility rather than effect (a label printed over a coloured bar). */
* { text-shadow: none !important; }
.lm-bar-lbl { text-shadow: 0 0 4px rgba(0,0,0,.7) !important; }

/* ── Data ─────────────────────────────────────────────────────────────
   Monospace is for what you read character by character, compare against
   something else, or copy: tokens, addresses, IDs, timestamps, elapsed
   time, code. Tabular figures wherever digits stack into a column, so a
   count of 9 and a count of 11 line up and the column can be scanned
   instead of read. */
code, pre, kbd, samp,
.font-mono,
.bx-token-input,
.bx-ip-addr, .bx-ip-meta,
.lm-info-token,
.ev-detail, .ev-time,
.tb-hud-time, .ts-clock-time {
  font-family: var(--em-mono) !important;
}

td, th,
.stat-value, .lm-stat-val, .usr-stat-val,
.ev-time, .ev-detail,
.tb-hud-time, .ts-clock-time,
.bx-hero-prog-label, .ex-prog-lbl, .ex-prog-mini,
.mx-seg-num, .hw-seg-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── The reading ──────────────────────────────────────────────────────
   Every measured value, and only measured values. */
.stat-value,
.lm-stat-val,
.usr-stat-val,
.bx-hero-prog-label,
.ts-clock-time,
.tb-hud-time {
  color: var(--text-primary-bright) !important;
  letter-spacing: -0.01em;
}

/* ── Signature: the calibration rule ──────────────────────────────────
   A tick every tenth of the track, drawn into the empty part of the
   measure. It gives a bar an axis, so a fill reads as a quantity against a
   scale rather than as a coloured stripe of unknown size - the difference
   between a gauge and a decoration. Deliberately confined to tracks that
   report a quantity; putting it anywhere else would make it a texture. */
.bx-hero-prog-bg,
.ex-prog-bar-bg,
.hw-progress-bar,
.ts-prog-bar,
.ts-box-prog-bar,
.lp-track,
.lpd-track,
.progress {
  background-color: var(--color-bg) !important;
  background-image: repeating-linear-gradient(
    to right,
    var(--em-tick) 0, var(--em-tick) 1px,
    transparent 1px, transparent 10%
  ) !important;
  border: 1px solid var(--em-etch);
  border-radius: 2px;
  overflow: hidden;
}

/* The fill is a reading, so it takes the reading colour and sits square -
   a rounded cap on a measure reads as a pill, not as a level. */
.bx-hero-prog-fill,
.ex-prog-bar,
.hw-progress-fill,
.ts-prog-fill,
.ts-box-prog-fill,
.lp-track-fill,
.lpd-track-fill,
.progress-bar {
  background: var(--text-primary-bright) !important;
  border-radius: 0 !important;
}
.bx-hero-prog-fill.bx-complete,
.ex-prog-bar-done,
.lp-track-fill.is-done,
.lpd-track-fill.is-done,
.progress-bar-green { background: var(--accent-green) !important; }

/* The test clock is the instrument the student actually watches. Its dial
   track becomes a calibrated scale rather than a plain ring; the arc that
   runs against it is the reading. */
.ts-clock-track {
  stroke: var(--em-tick) !important;
  stroke-dasharray: 1.5 5.5;
  stroke-linecap: butt;
}
.ts-clock-arc { filter: none !important; stroke-linecap: butt; }

/* The report's time ribbon is already a measurement - per-box time drawn to
   scale - so it gets the scale drawn under it. The ribbon itself is a row of
   coloured segments with no room for ticks inside, so the rule sits beneath,
   the way an axis sits under a plot. */
.tr-ribbon-bar {
  border-radius: 2px !important;
  border: 1px solid var(--em-etch);
  position: relative;
  overflow: visible !important;
  margin-bottom: 8px;
}
.tr-ribbon-bar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: calc(100% + 3px);
  height: 4px;
  background-image: repeating-linear-gradient(
    to right,
    var(--em-tick) 0, var(--em-tick) 1px,
    transparent 1px, transparent 10%
  );
}
.tr-ribbon-seg { border-radius: 0 !important; }

/* ── Engraved surfaces ────────────────────────────────────────────────
   A hairline, a half-step of value, and a lit top edge - the way a plate
   set into a panel catches the light. No drop shadow anywhere: elevation
   is a paper metaphor, and nothing here is paper. */
.card,
.modal-box,
.panel,
.lm-stat-card,
.st-section {
  background: var(--color-surface);
  border: 1px solid var(--em-etch);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 var(--em-etch-lit);
}

.sidebar,
.topbar {
  border-color: var(--em-etch);
  box-shadow: none;
}

/* main.css finishes every card with a glowing 32px cyan tab in its top-left
   corner (.card::after) and lights the whole card on hover. The tab appears
   on every card, so it distinguishes nothing - it is decoration wearing the
   costume of a marker. This theme already spends its one flourish on the
   calibration rules, where the mark actually reports something, so both go. */
.card::after { display: none; }
.card:hover {
  box-shadow: inset 0 1px 0 var(--em-etch-lit);
  border-color: var(--text-primary);
}

.modal-box { border-radius: 8px; }

/* ── Legends ──────────────────────────────────────────────────────────
   Small, spaced, and quiet - the way a control is labelled on equipment.
   Uppercase stays, because these are signposts rather than content, but
   the tracking comes down from arcade-wide to something skimmable. */
.sidebar-section-label,
.bx-section-label,
.form-label,
.st-subsection-label,
.lm-stat-lbl,
.usr-stat-lbl {
  font-size: .66rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

h1, h2, h3, h4,
.modal-title,
.sidebar-brand-name {
  font-family: var(--font-primary);
  letter-spacing: -0.011em;
  font-weight: 600;
}

/* ── Sidebar ──────────────────────────────────────────────────────────
   The mark, doing the one job it exists for: where you are. */
.sidebar { background: var(--color-surface); }

.sidebar-item {
  border-radius: 4px;
  margin: 1px .5rem;
  transition: background .12s ease, color .12s ease;
}
.sidebar-item:hover {
  background: var(--em-panel-2);
  color: var(--text-white);
}
.sidebar-item.active {
  background: var(--em-panel-2);
  color: var(--text-white);
  box-shadow: inset 2px 0 0 var(--text-secondary);
}
.sidebar-item.active .sidebar-icon { color: var(--text-secondary); }

/* ── Controls ─────────────────────────────────────────────────────────
   Every page in this app grew its own button class - .st-btn-cy,
   .rpt-add-btn, .hw-view-btn, a dozen more - and each sets UPPERCASE with
   wide tracking independently. Naming them one by one would go stale the
   first time someone adds a page, so the shape is matched instead. This is
   the only place in the file that reaches by attribute rather than class,
   and it buys sentence case everywhere at once. */
button,
.btn,
[class*="btn"] {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-primary);
}
button, .btn, [class*="-btn"] { border-radius: 4px; }

/* The filled mark is the answer to "what now?" - one per screen. */
.btn-primary,
.bx-submit-btn {
  background: var(--text-secondary);
  border: 1px solid var(--text-secondary);
  color: #0B1415;
  font-weight: 600;
  box-shadow: none;
}
.btn-primary:hover,
.bx-submit-btn:hover {
  background: var(--text-secondary-hover);
  border-color: var(--text-secondary-hover);
  color: #0B1415;
}
.btn-primary:disabled,
.bx-submit-btn:disabled { opacity: .45; }

.btn-ghost {
  color: var(--text-muted);
  border-color: var(--em-etch);
  background: transparent;
}
.btn-ghost:hover {
  color: var(--text-white);
  border-color: var(--text-primary);
  background: var(--em-panel-2);
}

:focus-visible {
  outline: 2px solid var(--text-primary-bright);
  outline-offset: 2px;
}

/* ── Inputs ───────────────────────────────────────────────────────────
   Recessed rather than raised: a field is a slot cut into the panel. */
.form-input,
.form-textarea,
.st-input,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="email"],
select,
textarea {
  /* background-color, never the `background` shorthand: main.css draws the
     select chevron as a background-image, and the shorthand silently wipes
     it - leaving a dropdown with no affordance that it opens. */
  background-color: var(--color-bg) !important;
  border: 1px solid var(--em-etch) !important;
  border-radius: 4px;
  color: var(--text-white) !important;
  font-family: var(--font-primary);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.form-input:focus,
.form-textarea:focus,
.st-input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--text-primary) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35),
              0 0 0 3px rgba(47,166,173,.16) !important;
  outline: none;
}
::placeholder { color: var(--text-muted) !important; opacity: .7; }

/* ── Tables ───────────────────────────────────────────────────────────
   Dense numeric data reads better on a quiet header and hairline rows than
   inside the boxed, high-contrast grid the arcade theme draws. */
th {
  background: var(--color-header) !important;
  color: var(--text-muted) !important;
  font-size: .66rem;
  letter-spacing: .1em;
  font-weight: 600;
}
td { border-bottom-color: rgba(255,255,255,.045) !important; }
tbody tr:hover td { background: rgba(255,255,255,.022) !important; }

/* ── Selected state ───────────────────────────────────────────────────
   A filter that is switched on was marked with a white tint, which made the
   least important control on the page the brightest thing in the toolbar.
   Selected is a state of a control, so it takes the interactive teal; the
   mark stays reserved for the primary action and for where you are. */
.usr-pill-on,
.mx-opt-on,
.ev-seg-on {
  background: rgba(47,166,173,.13) !important;
  border-color: rgba(47,166,173,.42) !important;
  color: var(--text-primary) !important;
}

/* The one badge still wearing a colour from outside the palette. Admin is a
   role, not a severity, so it reads as a plain legend rather than borrowing
   a purple that appears nowhere else. */
.usr-role-admin.usr-role-on,
.usr-badge-admin {
  color: var(--text-secondary) !important;
  border-color: rgba(215,98,31,.45) !important;
  background: rgba(215,98,31,.13) !important;
}

/* ── Chips ────────────────────────────────────────────────────────────── */
.badge,
.tl-chip,
.mx-type-badge,
.ev-tag {
  border-radius: 3px;
  letter-spacing: .01em;
  text-transform: none;
  font-weight: 500;
}
.badge-cyan { color: var(--text-primary-bright); background: rgba(62,200,208,.12); }
.badge-green { color: var(--accent-green); background: rgba(79,178,134,.13); }

/* ── Legacy v1 surfaces ───────────────────────────────────────────────
   Only one theme file loads at a time, so v1 pages no longer receive the
   Bootstrap-era rules the old theme carried. They are near-unused on this
   install, but leaving them unreadable would be sloppy - give them the
   palette at least. */
.navbar, .well, .panel-default > .panel-heading {
  background: var(--color-surface);
  border-color: var(--em-etch);
  color: var(--text-white);
}
a { color: var(--text-primary); }
a:hover { color: var(--text-primary-bright); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}