/* ===========================================================================
 * CONTRAST — charcoal, warm grey and gold. A different SITE, not a repaint.
 *
 * The first attempt at this theme was pure black and white and looked cheap,
 * because two-colour design has nothing left to build hierarchy with: every
 * element shouts at the same volume and the brand disappears. This is the
 * rewrite. It keeps the gold — the gold IS the brand — and builds everything
 * else out of a warm grey ramp, so importance is expressed by TONE (which
 * grey a thing sits on) rather than by borders.
 *
 * The formatting is deliberately not the classic one:
 *
 *   - Sections are RAILED. Each block hangs off a vertical rule down the left
 *     with its label set in the margin, the way a spec sheet or a well-set
 *     table of contents reads. Nothing is a floating rounded box.
 *   - Cards have no border at all. They are a slightly different grey from
 *     the page, which is enough separation and removes ~40 lines of drawn
 *     boxes from a dense screen.
 *   - Numbers are the loudest thing on the page, in gold, at display size.
 *   - Tables use a gold header rule and a hairline grid, sized like a report.
 *   - The active tab is a gold-topped tile, so the current section reads as a
 *     folder tab rather than an underline.
 *
 * Kept from the accessible pass, because those were real wins:
 *   44px hit targets, sticky table headers, a 3px offset focus ring, and
 *   status that is never colour alone.
 *
 * Scoped entirely under html[data-skin="contrast"].
 * ========================================================================= */

/* ------------------------------------------------------- palette: LIGHT --- */
html[data-skin="contrast"] {
  /* A warm grey ramp, not neutral: it sits under gold without going muddy. */
  --p-bg:#EDEBE6;          /* the page: warm paper, clearly not white   */
  --p-sf:#F7F6F3;          /* a block sitting on it                     */
  --p-sf2:#E3E0D9;         /* recessed: table bands, inputs             */
  --p-line:#CFCabf;
  --p-ink:#1A1917; --p-ink2:#4A4741; --p-ink3:#57544D;

  --ct-rail:#C9C3B6;       /* the vertical rule sections hang from      */
  --ct-deep:#1A1917;       /* the inverted slab, used sparingly         */
  --ct-on-deep:#F7F6F3;
  --ct-hush:rgba(26,25,23,.045);
  --ct-gold-wash:color-mix(in srgb, var(--gold) 14%, transparent);

  --ct-ease:cubic-bezier(.2,.8,.3,1);
}

/* -------------------------------------------------------- palette: DARK --- */
html[data-skin="contrast"][data-theme="dark"] {
  --p-bg:#121110;          /* warm charcoal, not black */
  --p-sf:#1C1B19;
  --p-sf2:#26241F;
  --p-line:#3A3730;
  --p-ink:#F5F2EA; --p-ink2:#BDB8AC; --p-ink3:#9C978C;

  --ct-rail:#3A3730;
  --ct-deep:#F5F2EA;
  --ct-on-deep:#121110;
  --ct-hush:rgba(245,242,234,.05);
  --ct-gold-wash:color-mix(in srgb, var(--gold) 18%, transparent);
}

html[data-skin="contrast"] .ambience { display:none }
html[data-skin="contrast"] body { background:var(--p-bg); font-size:14.5px }

/* --------------------------------------------------------------- chrome ---
   A gold hairline under the header instead of a border, and tabs that read as
   folder tabs: the current one is a raised tile capped in gold. */
html[data-skin="contrast"] .apphead {
  background:var(--p-sf);
  border-bottom:0;
  box-shadow:inset 0 -3px 0 var(--gold);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  padding:13px 20px;
}
html[data-skin="contrast"] .tabs {
  background:var(--p-bg);
  border-bottom:1px solid var(--p-line);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  gap:3px; padding:7px 14px 0;
}
html[data-skin="contrast"] .tab {
  border-bottom:0 !important;
  border-radius:3px 3px 0 0;
  padding:11px 15px 10px;
  font-weight:600; font-size:12.5px;
  background:transparent;
  box-shadow:inset 0 0 0 transparent;
  transition:background .16s var(--ct-ease), box-shadow .16s var(--ct-ease), color .16s;
}
html[data-skin="contrast"] .tab.on {
  background:var(--p-sf); color:var(--p-ink);
  box-shadow:inset 0 3px 0 var(--gold);
}
html[data-skin="contrast"] .tab:hover:not(.on) { background:var(--ct-hush); color:var(--p-ink) }

/* ---------------------------------------------------------- the RAILED block
   The signature move. A card is not a box: it is a section hanging off a
   vertical rule, with a gold cap at the top of the rule. Borders come off
   entirely — the tone difference between --p-sf and --p-bg does the
   separating, which is much quieter on a screen holding twelve of them. */
html[data-skin="contrast"] .card {
  background:var(--p-sf);
  border:0;
  border-left:2px solid var(--ct-rail);
  border-radius:0 3px 3px 0;
  box-shadow:none;
  padding:16px 18px 17px;
  position:relative;
  transition:background .16s var(--ct-ease), border-color .16s var(--ct-ease);
}
html[data-skin="contrast"] .card::before {
  content:''; position:absolute; left:-2px; top:0; width:2px; height:26px;
  background:var(--gold);
}
html[data-skin="contrast"] button.card:hover,
html[data-skin="contrast"] .card.click:hover {
  background:color-mix(in srgb, var(--gold) 9%, var(--p-sf));
  border-left-color:var(--gold);
  transform:none;
}
html[data-skin="contrast"] .grid { gap:11px }

/* -------------------------------------------------------------- controls ---
   44px targets kept from the accessible pass. Gold is the primary; secondary
   is a tone step, not an outline, so a row of buttons has one obvious action
   instead of five equal boxes. */
html[data-skin="contrast"] .btn {
  min-height:44px;
  border-radius:3px;
  border:1px solid transparent;
  background:var(--p-sf2);
  color:var(--p-ink);
  font-weight:600;
  padding:10px 17px;
  transition:background .15s var(--ct-ease), color .15s var(--ct-ease);
}
html[data-skin="contrast"] .btn:hover:not(:disabled) {
  background:var(--ct-deep); color:var(--ct-on-deep);
}
html[data-skin="contrast"] .btn.pri {
  background:var(--gold); color:#1A1508 !important; border-color:var(--gold);
}
html[data-skin="contrast"] .btn.pri:hover:not(:disabled) {
  background:var(--gold2); color:#1A1508 !important;
}
html[data-skin="contrast"] .btn.sm { min-height:36px; padding:7px 12px }
html[data-skin="contrast"] .btn:disabled { opacity:.42 }
html[data-skin="contrast"] .btn.danger { background:transparent; border-color:var(--rose); color:var(--rose) }
html[data-skin="contrast"] .btn.danger:hover:not(:disabled) { background:var(--rose); color:#fff }
html[data-skin="contrast"] .iconbtn {
  width:40px; height:40px; border-radius:3px;
  border:1px solid var(--p-line); background:var(--p-sf2);
}
html[data-skin="contrast"] .iconbtn:hover { background:var(--gold); color:#1A1508; border-color:var(--gold) }

html[data-skin="contrast"] :focus-visible {
  outline:3px solid var(--gold) !important;
  outline-offset:2px !important;
}

/* Fields are recessed wells with a gold underline on focus. */
html[data-skin="contrast"] .input,
html[data-skin="contrast"] input,
html[data-skin="contrast"] select,
html[data-skin="contrast"] textarea {
  min-height:44px;
  border-radius:3px;
  background:var(--p-sf2);
  border:1px solid transparent;
  border-bottom:2px solid var(--p-line);
  color:var(--p-ink);
  padding:11px 12px;
  transition:border-color .15s var(--ct-ease), background .15s;
}
html[data-skin="contrast"] .input:focus,
html[data-skin="contrast"] input:focus,
html[data-skin="contrast"] select:focus,
html[data-skin="contrast"] textarea:focus {
  border-bottom-color:var(--gold); background:var(--p-sf); box-shadow:none;
}
html[data-skin="contrast"] ::placeholder { color:var(--p-ink3); opacity:1 }

/* ----------------------------------------------------------------- pills --- */
html[data-skin="contrast"] .pill {
  border-radius:2px; font-weight:700; letter-spacing:.09em;
  background:var(--ct-hush); border:1px solid var(--p-line); color:var(--p-ink2);
}
/* Status keeps its colour AND gains weight + a fill, so it survives colour
   blindness and a monochrome printout. */
html[data-skin="contrast"] .pill.ok   { background:var(--ok);    color:#fff; border-color:var(--ok) }
html[data-skin="contrast"] .pill.warn { background:var(--amber); color:#1A1508; border-color:var(--amber) }
html[data-skin="contrast"] .pill.bad  { background:var(--rose);  color:#fff; border-color:var(--rose) }
html[data-skin="contrast"] .pill.gold { background:var(--gold);  color:#1A1508; border-color:var(--gold) }

/* ---------------------------------------------------------------- tables ---
   Set like a report: a gold rule under the header, a hairline grid, banded
   rows. The header still sticks — that was the best thing about the previous
   version of this theme and the most useful change in the product. */
html[data-skin="contrast"] table.tbl th {
  position:sticky; top:0; z-index:2;
  background:var(--p-sf);
  color:var(--p-ink2);
  border-bottom:2px solid var(--gold);
  padding:11px 12px;
  font-weight:700; letter-spacing:.12em;
}
html[data-skin="contrast"] table.tbl td {
  border-bottom:1px solid var(--p-line);
  padding:12px;
}
html[data-skin="contrast"] table.tbl tbody tr:nth-child(even) td { background:var(--ct-hush) }
html[data-skin="contrast"] table.tbl tbody tr:hover td {
  background:var(--ct-gold-wash);
}
html[data-skin="contrast"] table.tbl tbody tr.click:hover td:first-child {
  box-shadow:inset 3px 0 0 var(--gold);
}

/* ------------------------------------------------------------ hierarchy ---
   The numbers carry the page. Gold, display size, tabular — you should be
   able to read a dashboard from across a desk. */
html[data-skin="contrast"] .num {
  color:var(--gold); background:none; -webkit-text-fill-color:currentColor;
  letter-spacing:-.04em;
}
html[data-skin="contrast"] .hero {
  margin-bottom:22px; padding:0 0 16px 16px;
  border-left:2px solid var(--gold); border-bottom:1px solid var(--p-line);
}
html[data-skin="contrast"] .hero-title {
  font-size:clamp(25px,3.4vw,36px); font-weight:700; letter-spacing:-.035em; line-height:1.07;
}
html[data-skin="contrast"] .hero-eyebrow { color:var(--gold-ink); font-weight:700; letter-spacing:.22em }
html[data-skin="contrast"] .hero-sub { color:var(--p-ink2) }

/* Section labels sit in the margin against the rail. */
html[data-skin="contrast"] .sect { padding-left:16px; border-left:2px solid var(--ct-rail); margin-top:30px }
html[data-skin="contrast"] .sect-head {
  border-bottom:1px solid var(--p-line); padding-bottom:8px; margin-bottom:12px;
  position:relative;
}
html[data-skin="contrast"] .sect-head::before {
  content:''; position:absolute; left:-18px; top:2px; width:8px; height:2px; background:var(--gold);
}
html[data-skin="contrast"] .sect-title { font-weight:700; letter-spacing:.02em }
html[data-skin="contrast"] .plbl { color:var(--p-ink3); font-weight:700 }

/* --------------------------------------------------------------- dialogs --- */
html[data-skin="contrast"] .ak-scrim {
  background:color-mix(in srgb, var(--p-bg) 80%, transparent) !important;
  backdrop-filter:blur(3px) !important; -webkit-backdrop-filter:blur(3px) !important;
}
html[data-skin="contrast"] .ak-modal {
  border:0; border-top:4px solid var(--gold); border-radius:0 0 4px 4px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.5);
  background:var(--p-sf);
}
html[data-skin="contrast"] .ak-modal-head {
  background:var(--p-sf); border-bottom:1px solid var(--p-line); padding:15px 18px;
}
html[data-skin="contrast"] .ak-modal-foot { border-top:1px solid var(--p-line); background:var(--p-sf2) }

/* --------------------------------------------------------------- sign-in --- */
html[data-skin="contrast"] .authcard {
  border:0; border-top:4px solid var(--gold); border-radius:0 0 4px 4px;
  background:var(--p-sf); box-shadow:0 30px 60px -26px rgba(0,0,0,.45);
}
html[data-skin="contrast"] .seg { background:var(--p-sf2); border-radius:3px; padding:3px }
html[data-skin="contrast"] .seg button { border-radius:2px; min-height:40px; font-weight:600 }
html[data-skin="contrast"] .seg button.on { background:var(--gold); color:#1A1508 }

/* ------------------------------------------------------------------ misc --- */
html[data-skin="contrast"] .empty { border:1px dashed var(--p-line); border-radius:3px; background:var(--p-sf) }
html[data-skin="contrast"] .person-card,
html[data-skin="contrast"] .course-card { border-radius:0 3px 3px 0 }
html[data-skin="contrast"] .err {
  border:0; border-left:3px solid var(--rose); background:var(--ct-hush);
  color:var(--rose); border-radius:0 3px 3px 0; padding:10px 12px; font-weight:600;
}
html[data-skin="contrast"] .crumbs a:hover { color:var(--gold-ink) }

/* Motion: the rail draws itself in, which is a cheap way to make a dense page
   feel assembled rather than dumped. transform only — no layout cost. */
@keyframes ct-rail-in {
  from { transform:scaleY(0) } to { transform:scaleY(1) }
}
@keyframes ct-fade-up {
  from { opacity:0; transform:translate3d(0,7px,0) } to { opacity:1; transform:none }
}
html[data-skin="contrast"] .card { animation:ct-fade-up .34s var(--ct-ease) both }
html[data-skin="contrast"] .card::before { transform-origin:top; animation:ct-rail-in .4s var(--ct-ease) both .1s }
html[data-skin="contrast"] .grid > *:nth-child(2) { animation-delay:.05s }
html[data-skin="contrast"] .grid > *:nth-child(3) { animation-delay:.1s }
html[data-skin="contrast"] .grid > *:nth-child(n+4) { animation-delay:.14s }

@media (prefers-reduced-motion: reduce) {
  html[data-skin="contrast"] *,
  html[data-skin="contrast"] *::before,
  html[data-skin="contrast"] *::after {
    animation-duration:.001ms !important; transition-duration:.001ms !important;
  }
}