/* ==========================================================================
   Zion Seminary LMS

   The prototype inlined every rule in <style> blocks — signup.html alone
   carried 825 lines, and the same sidebar rules were duplicated across
   several files. The palette and layout below are lifted from that work;
   the difference is that they now live in one cacheable stylesheet.
   ========================================================================== */

/* Colour, shape and type all come from tokens.css. Nothing below may
   contain a raw hex value — change tokens.css and it lands everywhere. */


* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
}

a { text-decoration: none; }

/* --------------------------------------------------------------------------
   Typography

   Serif headings, sans body — the pairing academic institutions use. The
   prototype set one geometric sans for everything, which read as a
   product launch rather than a place of study.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5,
.page-title,
.navbar-brand,
.auth-head h1 {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-darker);
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.15; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

p { margin-top: 0; }

a { color: var(--brand-light); }
a:hover { color: var(--brand); }

::selection { background: var(--brand-tint-2); color: var(--brand-darker); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}


/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.top-navbar {
  height: var(--navbar-h);
  position: sticky;
  top: 0;
  z-index: 1050;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.navbar-brand { font-size: 24px; color: var(--brand) !important; }

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gradient);
  color: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Dashboard shell
   -------------------------------------------------------------------------- */
.dashboard {
  display: flex;
  gap: 20px;
  width: 100%;
  min-height: calc(100vh - var(--navbar-h));
  padding: 20px;
}

.sidebar-col {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  position: sticky;
  top: calc(var(--navbar-h) + 20px);
  height: calc(100vh - var(--navbar-h) - 40px);
}

.main-content { flex: 1; min-width: 0; }

.content-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 25px;
  box-shadow: var(--shadow);
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.lms-sidebar {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 25px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}

.student-card {
  background: var(--gradient);
  color: var(--surface);
  text-align: center;
  border-radius: 20px;
  padding: 25px;
  margin-bottom: 30px;
}

.student-card .avatar {
  width: 90px;
  height: 90px;
  font-size: 32px;
  border: 4px solid rgba(255, 255, 255, .4);
  margin: 0 auto 15px;
  background: rgba(255, 255, 255, .2);
}

.student-card h5 { margin: 0 0 4px; font-weight: 600; }
.student-card p  { margin: 0; opacity: .8; font-size: 14px; }

.sidebar-menu { list-style: none; padding: 0; margin: 0; flex: 1; }
.sidebar-menu li { margin-bottom: 10px; }

.sidebar-menu a {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--text-muted);
  padding: 14px 16px;
  border-radius: var(--radius);
  transition: .3s;
  font-weight: 500;
}

.sidebar-menu a i { width: 22px; text-align: center; font-size: 18px; }

.sidebar-menu a:hover {
  background: var(--brand-tint);
  color: var(--brand);
  transform: translateX(5px);
}

.sidebar-menu a.active {
  background: var(--brand);
  color: var(--surface);
  box-shadow: var(--shadow-brand);
}

.logout-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--danger);
  color: var(--surface);
  border: 0;
  padding: 14px;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: .3s;
}

.logout-btn:hover { background: var(--danger-dark); color: var(--surface); }

.lms-sidebar::-webkit-scrollbar { width: 6px; }
.lms-sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 20px; }

/* --------------------------------------------------------------------------
   Auth pages
   -------------------------------------------------------------------------- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient);
  padding: 24px;
}

/* Card plus the way back out, stacked. This exists so the link's position
   does not ride on .auth-wrap's flex direction — as a sibling of the card
   it lands beside it, halfway down the gradient, the moment anything
   changes that. The card keeps its own width, including the .wide variant
   signup uses, so this only stacks. */
.auth-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.auth-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 48px 52px;
  width: 100%;
  max-width: 460px;
}

/* Sign-in is a full page with one job, not a panel inside a dashboard, so
   its controls are set larger than the shared form styles. Scoped to the
   card: widening the global .form-control would resize every form in the
   LMS. */
.auth-card .field { margin-bottom: 22px; }
.auth-card .field label { font-size: 15px; margin-bottom: 8px; }

.auth-card .form-control,
.auth-card .form-select {
  padding: 14px 16px;
  /* 16px is also the threshold below which iOS Safari zooms the page in
     when a field takes focus. */
  font-size: 16px;
}

.auth-card .btn-brand { padding: 15px 20px; font-size: 16px; }

.auth-card.wide { max-width: 720px; }

.auth-head { text-align: center; margin-bottom: 28px; }
.auth-head i { font-size: 44px; color: var(--brand); }
.auth-head h1 { font-size: 30px; font-weight: 700; margin: 14px 0 6px; }
.auth-head p  { color: var(--text-muted); margin: 0; }

/* The way back to the marketing site, sitting on the gradient rather than
   on a card.

   It has to opt out of the global link colour entirely. That is
   --brand-light, #007396, which is the exact colour of the light end of
   this gradient — an unstyled link here is invisible, not merely faint.

   Solid white, not a translucent one: measured on the light end of the
   gradient, white is 5.4:1 and 85% white only 4.3:1, which misses AA for
   text this size. */
.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--surface);
  font-size: 15px;
  font-weight: 600;
  /* Underlined at rest. There is no fill, border or card behind it, so the
     underline is the only thing marking it as a link rather than a caption
     — hover is not an affordance a touch visitor ever sees. */
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .55);
  text-underline-offset: 4px;
  /* Roomy enough to be a comfortable tap target on a phone. */
  padding: 10px 16px;
  border-radius: var(--radius);
}

.auth-back:hover {
  color: var(--surface);
  text-decoration-color: var(--surface);
  background: rgba(255, 255, 255, .12);
}

/* The global focus ring is --accent, another blue, and is nearly as lost on
   this gradient as the link colour was. */
.auth-back:focus-visible {
  color: var(--surface);
  outline: 3px solid var(--surface);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 14px;
}

/* The Tamil under each English label (apps/core/bilingual.py). Its own
   line so a long Tamil phrase never shares a row with the English and
   the required-field star. Source Sans has no Tamil glyphs, so the
   Noto face is named here rather than left to whatever the device has. */
.field label .label-ta {
  display: block;
  margin-top: 1px;
  font-family: "Noto Sans Tamil", var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}
/* Beside a checkbox the label runs on one line, so the Tamil follows
   it in the same line instead. */
.field label.label-inline .label-ta { display: inline; margin-left: 4px; }
.field label.label-inline .label-ta::before { content: "/ "; }

.field .helptext {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 4px;
}

.form-control,
.form-select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}

.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--brand);
  /* Was rgba(79, 70, 229, …) — indigo, from the prototype's palette, on a
     page where nothing else is indigo. */
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15);
}

.form-control.is-invalid { border-color: var(--danger); }

.invalid-feedback {
  display: block;
  color: var(--danger);
  font-size: 13px;
  margin-top: 4px;
}

.btn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--brand);
  color: var(--surface);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: .25s;
  font-family: inherit;
}

.btn-brand:hover { background: var(--brand-dark); box-shadow: var(--shadow-brand); }
.btn-brand:disabled { opacity: .6; cursor: not-allowed; }

.auth-links { text-align: center; margin-top: 22px; font-size: 15px; }

/* Inline text links measured 20px tall, under the 24px minimum target
   size. The padding is what makes them comfortably tappable; the negative
   margin keeps it from opening the spacing back up. */
.auth-links a {
  display: inline-block;
  color: var(--brand);
  font-weight: 500;
  padding: 6px 8px;
  margin: -6px -8px;
}

.auth-links a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */
.messages { list-style: none; padding: 0; margin: 0 0 18px; }

.messages li {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  font-size: 14px;
  border-left: 4px solid transparent;
}

.messages .success { background: var(--success-tint); color: var(--success); border-color: var(--success); }
.messages .error   { background: var(--danger-tint); color: var(--danger-dark); border-color: var(--danger); }
.messages .warning { background: var(--warning-tint); color: var(--warning); border-color: var(--warning); }
.messages .info    { background: var(--brand-tint); color: var(--brand-darker); border-color: var(--brand); }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.muted { color: var(--text-muted); }
.page-title { font-size: 22px; font-weight: 600; margin: 0 0 20px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.stat {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat .icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--brand-tint);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.stat .value { font-size: 24px; font-weight: 700; line-height: 1.1; }
.stat .label { color: var(--text-muted); font-size: 13px; }

.banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--warning-tint);
  border-left: 4px solid var(--warning);
  color: var(--warning);
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 22px;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .dashboard   { display: block; padding: 15px; }
  .sidebar-col { display: none; }
  .content-card { padding: 18px; }
  .auth-card   { padding: 28px; }
}

/* --------------------------------------------------------------------------
   Public catalogue
   -------------------------------------------------------------------------- */
.public-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.course-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}

.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* `overflow: hidden` is doing real work here, not tidying.
   `aspect-ratio` sets a box's *preferred* height; it is not a maximum,
   and a replaced element taller than it still stretches the box. A
   portrait book cover in a 16/9 slot therefore grew the card to the
   full height of the image and broke the row. The placeholder div
   never showed it, because a div with height:100% cannot push out. */
.course-thumb {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.course-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.course-thumb-placeholder {
  width: 100%;
  height: 100%;
  background: var(--gradient);
  color: rgba(255, 255, 255, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
}

.course-level {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, .92);
  color: var(--brand-darker);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

.course-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.course-body h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.course-body h3 a { color: var(--text); }
.course-body h3 a:hover { color: var(--brand); }

.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--text-muted);
  font-size: 13px;
  margin: 10px 0;
}

.course-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.course-price strong { font-size: 18px; color: var(--brand); }
.course-price s { font-size: 14px; margin-right: 6px; }
.course-price .free { color: var(--success); }
.course-price.big strong { font-size: 28px; }

.btn-view {
  background: var(--brand-tint);
  color: var(--brand);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
}

.btn-view:hover { background: var(--brand); color: var(--surface); }

/* --- course detail --- */
.course-hero {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 26px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 30px;
  margin-bottom: 22px;
}

.course-hero h1 { font-size: 30px; font-weight: 700; margin: 12px 0 8px; }
.course-hero .lead { color: var(--text-muted); font-size: 17px; }
.course-hero .course-level { position: static; display: inline-block; background: var(--brand-tint); }

.course-buy {
  background: var(--page);
  border-radius: var(--radius-lg);
  overflow: hidden;
  align-self: start;
}

.course-buy img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.course-buy-body { padding: 20px; }
.course-buy-body .course-price { margin-bottom: 16px; }

/* --- syllabus --- */
.module { border-bottom: 1px solid var(--border); padding: 18px 0; }
.module:last-child { border-bottom: 0; }

.module-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
}

.module-index {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.lesson-list { list-style: none; padding: 0; margin: 10px 0 0; }

.lesson-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
}

.lesson-list li:hover { background: var(--page); }
.lesson-icon { color: var(--brand); width: 20px; text-align: center; }
.lesson-title { flex: 1; }

.badge-preview {
  background: var(--success-tint);
  color: var(--success);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}

.small { font-size: 13px; }

@media (max-width: 860px) {
  .course-hero { grid-template-columns: 1fr; padding: 20px; }
  .course-hero h1 { font-size: 24px; }
}

/* --------------------------------------------------------------------------
   Lesson preview (audio + documents)
   -------------------------------------------------------------------------- */
.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 16px;
  color: var(--text-muted);
}

.crumbs a { color: var(--brand); }
.crumbs i { font-size: 10px; opacity: .6; }

.lesson-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 22px;
  align-items: start;
}

.audio-player {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--gradient);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-top: 18px;
}

.audio-art {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  color: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}

.audio-player audio { flex: 1; width: 100%; min-width: 0; }

.media-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--page);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  margin-top: 18px;
  gap: 4px;
}

.media-empty i { font-size: 40px; color: var(--text-faint); margin-bottom: 10px; }
.media-empty p { margin: 0; }

.lesson-text { line-height: 1.75; margin-top: 18px; }

.resource-list { list-style: none; padding: 0; margin: 0; }

.resource-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: 8px;
}

.resource-list li span:nth-child(2) { flex: 1; }

a.badge-preview { display: inline-flex; align-items: center; gap: 6px; }
a.badge-preview:hover { background: var(--success); color: var(--surface); }

.lesson-list a.lesson-title { color: var(--text); }
.lesson-list a.lesson-title:hover { color: var(--brand); }

@media (max-width: 860px) {
  .lesson-layout { grid-template-columns: 1fr; }
  .audio-player { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   Checkout
   -------------------------------------------------------------------------- */
.checkout-wrap { max-width: 560px; margin: 0 auto; }

.order-table { width: 100%; border-collapse: collapse; margin-top: 18px; }

.order-table th,
.order-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-weight: 400;
}

.order-table th { color: var(--text-muted); width: 40%; font-size: 14px; }
.order-table td { text-align: right; }
.order-table .discount { color: var(--success); }

.order-table .total-row th,
.order-table .total-row td {
  border-bottom: 0;
  padding-top: 16px;
  font-size: 18px;
}

.order-table .total-row td strong { color: var(--brand); }

.order-table code {
  background: var(--page);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 13px;
}

.result-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto 18px;
  color: var(--surface);
}

.result-icon.success { background: var(--success); }
.result-icon.failed  { background: var(--danger); }

.text-center { text-align: center; }
.text-start  { text-align: left; }

.notice {
  background: var(--brand-tint);
  color: var(--brand-darker);
  border-left: 4px solid var(--brand);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin: 0;
}

.failure-reason {
  background: var(--danger-tint);
  color: var(--danger-dark);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 14px;
}

/* ==========================================================================
   Moody-style treatments

   Taken from the Moody Online programmes page: a gold rule beneath each
   section heading, flat light-grey cards with no border radius to speak
   of and no drop shadow, and "learn more" links that carry an arrow
   rather than sitting inside a button. The warm rust and gold are what
   stop the blues reading as cold.
   ========================================================================== */

/* --- section heading with the gold rule under it --------------------- */
.section-head {
  margin-bottom: 28px;
}

.section-head h1,
.section-head h2 {
  margin: 0 0 8px;
}

.section-head p {
  color: var(--text-muted);
  margin: 0 0 16px;
  max-width: 68ch;
}

.section-head::after {
  content: "";
  display: block;
  height: var(--rule-w);
  background: var(--gold);
  width: 100%;
}

/* --- programme cards ------------------------------------------------- */
.course-card {
  background: var(--surface-alt);
  border-radius: 0;
  box-shadow: none;
  border: 0;
  transition: background .2s;
}

.course-card:hover {
  transform: none;
  box-shadow: none;
  background: var(--brand-tint);
}

.course-thumb { border-radius: 0; }

.course-card .course-body { padding: 20px; }

.course-card h3 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: 10px;
}

.course-card h3 a { color: var(--brand); }
.course-card h3 a:hover { color: var(--secondary); }

.course-level {
  background: var(--brand);
  color: var(--surface);
  border-radius: 0;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
}

/* --- the arrow link Moody uses instead of a button ------------------- */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--secondary);
  font-weight: 500;
  margin-top: auto;
  padding-top: 14px;
}

.arrow-link i,
.arrow-link .arrow {
  transition: transform .2s;
}

.arrow-link:hover {
  color: var(--brand);
}

.arrow-link:hover i,
.arrow-link:hover .arrow {
  transform: translateX(5px);
}

/* --- rust call-to-action bar ----------------------------------------- */
.cta-bar {
  background: var(--rust);
  color: var(--surface);
  padding: 14px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.cta-bar a {
  color: var(--surface);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 500;
}

.cta-bar a:hover { text-decoration: underline; }

.cta-bar .cta-strong {
  background: var(--brand);
  padding: 9px 18px;
  border-radius: var(--radius-sm);
}

.cta-bar .cta-strong:hover {
  background: var(--brand-dark);
  text-decoration: none;
}

/* --- buttons, squared off to match ----------------------------------- */
.btn-brand {
  border-radius: var(--radius-sm);
  letter-spacing: .01em;
}

.btn-view {
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--secondary);
  padding: 8px 0;
}

.btn-view:hover { background: transparent; color: var(--brand); }

/* ==========================================================================
   Bootstrap bridge

   Bootstrap ships its own palette and its components read Bootstrap's
   custom properties, not ours. Left alone, a .btn-primary renders in
   Bootstrap blue (#0d6efd) and quietly ignores the brand — which is how
   a bright blue Dashboard button ended up beside a navy page.

   Remapping Bootstrap's variables onto our tokens keeps the promise that
   colour is defined in one place, whichever class someone reaches for.
   ========================================================================== */

:root {
  --bs-primary:            var(--brand);
  --bs-primary-rgb:        var(--brand-rgb);
  --bs-secondary:          var(--secondary);
  --bs-success:            var(--success);
  --bs-danger:             var(--danger);
  --bs-warning:            var(--warning);
  --bs-info:               var(--info);
  --bs-body-color:         var(--text);
  --bs-body-bg:            var(--page);
  --bs-border-color:       var(--border);
  --bs-link-color:         var(--secondary);
  --bs-link-hover-color:   var(--brand);
  --bs-font-sans-serif:    var(--font-body);
  --bs-border-radius:      var(--radius-sm);
}

.btn-primary {
  --bs-btn-bg:               var(--brand);
  --bs-btn-border-color:     var(--brand);
  --bs-btn-hover-bg:         var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg:        var(--brand-darker);
  --bs-btn-active-border-color: var(--brand-darker);
  --bs-btn-color:            var(--surface);
  --bs-btn-hover-color:      var(--surface);
}

.btn-outline-primary {
  --bs-btn-color:            var(--brand);
  --bs-btn-border-color:     var(--brand);
  --bs-btn-hover-bg:         var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-hover-color:      var(--surface);
  --bs-btn-active-bg:        var(--brand-dark);
}

.btn-danger {
  --bs-btn-bg:               var(--danger);
  --bs-btn-border-color:     var(--danger);
  --bs-btn-hover-bg:         var(--danger-dark);
  --bs-btn-hover-border-color: var(--danger-dark);
}

.btn-link { --bs-btn-color: var(--secondary); --bs-btn-hover-color: var(--brand); }

.text-muted { color: var(--text-muted) !important; }
.bg-white   { background: var(--surface) !important; }

.badge.bg-warning { background: var(--gold) !important; color: var(--brand-darker) !important; }
.badge.bg-light   { background: var(--surface-alt) !important; color: var(--text-muted) !important; }
.badge.bg-primary { background: var(--brand) !important; }
.badge.bg-danger  { background: var(--danger) !important; }

/* --- warm button, for the primary action against the blues ----------- */
.btn-warm {
  --bs-btn-bg:               var(--rust);
  --bs-btn-border-color:     var(--rust);
  --bs-btn-hover-bg:         var(--rust-dark);
  --bs-btn-hover-border-color: var(--rust-dark);
  --bs-btn-active-bg:        var(--rust-dark);
  --bs-btn-color:            var(--surface);
  --bs-btn-hover-color:      var(--surface);

  background: var(--rust);
  border: 1px solid var(--rust);
  color: var(--surface);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background .2s;
}

.btn-warm:hover,
.btn-warm:focus {
  background: var(--rust-dark);
  border-color: var(--rust-dark);
  color: var(--surface);
}

/* --------------------------------------------------------------------------
   Learning: progress and the player
   -------------------------------------------------------------------------- */
.progress-line { margin: 14px 0; }

.progress-track {
  height: 8px;
  background: var(--surface-alt);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--gradient-soft);
  border-radius: 999px;
  transition: width .4s ease;
}

.progress-label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 7px;
}

.lesson-actions {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.lesson-nav {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
}

.lesson-list li.is-current {
  background: var(--brand-tint);
  border-left: var(--rule-w) solid var(--gold);
}

.lesson-list li.is-current .lesson-title { font-weight: 600; color: var(--brand); }

/* ---------------------------------------------------------------
   Locked syllabus topics (issue #5)

   The blur is presentation, not protection. A locked topic is meant
   to be visible — seeing how much more there is is what persuades
   someone to enrol. Topics the college wants genuinely private are
   filtered out server-side and never reach the page, so there is
   nothing here for select-all-and-copy to reveal that the college
   did not intend to show.
   --------------------------------------------------------------- */

.lesson-list li.is-locked { opacity: .85; }

.lesson-title.is-blurred {
  filter: blur(4px);
  user-select: none;
  /* Blur alone still leaves the text selectable and readable by a
     screen reader, which is right: the title is public, just teased. */
  cursor: default;
}

.lesson-list li.is-locked:hover .lesson-title.is-blurred {
  filter: blur(2px);
  transition: filter .15s ease;
}

.locked-prompt {
  margin-top: 24px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: 6px;
  background: var(--page);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.locked-prompt p { margin: 0; }
.locked-prompt form { margin: 0; }

.contact-options {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.contact-options p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .lesson-list li.is-locked:hover .lesson-title.is-blurred { transition: none; }
}

/* ---------------------------------------------------------------
   Assisted enrolment (issue #8)

   Shown wherever enrolment is attempted or fails. It started as a
   muted one-line link on a single page, which nobody found — a
   student staring at a declined payment does not go hunting for
   small grey text. It is a callout now, on every enrolment surface.
   --------------------------------------------------------------- */

.assisted-enrolment {
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: 6px;
  background: var(--page);
  text-align: left;
}

.assisted-enrolment .assisted-heading {
  margin: 0 0 4px;
  font-weight: 600;
  color: var(--text);
}

.assisted-enrolment p { margin: 0 0 10px; }

.assisted-enrolment .assisted-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding-inline: 22px;
}

.assisted-enrolment .contact-options { margin-top: 12px; }

/* ---------------------------------------------------------------
   Quizzes (#14)
   --------------------------------------------------------------- */

.quiz-question {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 18px;
  margin: 0 0 14px;
}
.quiz-question legend { font-weight: 600; padding: 0 6px; }
.quiz-number {
  display: inline-block;
  min-width: 22px; height: 22px; line-height: 22px;
  text-align: center; border-radius: 50%;
  background: var(--brand); color: var(--surface);
  font-size: 12px; margin-right: 6px;
}
.quiz-choice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 4px; cursor: pointer;
}
.quiz-choice:hover { background: var(--page); }
.quiz-choice input { margin-top: 3px; }

.quiz-result { text-align: center; padding: 20px; border-radius: 8px; margin: 16px 0; }
.quiz-result.is-pass { background: var(--page); border: 1px solid var(--success); }
.quiz-result.is-fail { background: var(--page); border: 1px solid var(--border); }
.quiz-score { font-size: 32px; font-weight: 700; margin: 0; }
.quiz-percent { font-size: 18px; margin: 0 0 6px; }
.quiz-outcome { margin: 0; font-weight: 600; }

.quiz-review { padding-left: 18px; }
.quiz-review li { margin-bottom: 14px; }
.quiz-review-q { margin: 0 0 2px; font-weight: 600; }
.quiz-review li.is-wrong .quiz-review-q { color: var(--text); }
.quiz-tick { color: var(--success); font-weight: 600; }
.quiz-cross { color: var(--warning); font-weight: 600; }
.quiz-answer { font-style: italic; }

.quiz-facts { list-style: none; padding: 0; margin: 12px 0; }
.quiz-facts li { padding: 4px 0; }

.badge-quiz {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
  background: var(--brand-tint); color: var(--brand-dark);
  white-space: nowrap;
}
.badge-quiz:hover { background: var(--brand); color: var(--surface); }
.lesson-quiz .btn-brand { width: auto; padding-inline: 22px; }

/* ---------------------------------------------------------------
   Results chart and table (#17)

   The chart is server-rendered SVG, no JavaScript. CSP allows very few
   script sources and drops un-nonced inline blocks, so a page that
   needs no script cannot be broken by a policy change.

   The SVG keeps its aspect ratio deliberately: stretching it to the
   card would distort the axis text along with the bars.
   --------------------------------------------------------------- */

.chart-wrap { overflow-x: auto; }

.results-chart {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
}

.chart-bar { fill: var(--text-muted); }
.chart-bar.is-pass { fill: var(--success); }

.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-axis { stroke: var(--border-strong); stroke-width: 1; }

.chart-pass-line {
  stroke: var(--danger);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.chart-axis-label,
.chart-bar-label,
.chart-pass-label {
  font-family: var(--font-body);
  font-size: 10px;
  fill: var(--text-muted);
}

.chart-pass-label { fill: var(--danger); }

.chart-legend {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.chart-legend li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
}

.chart-legend .legend-number {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--page);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
  line-height: 16px;
}

.chart-legend .legend-value {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--text);
  min-width: 52px;
}

/* The results table is its own thing. `.order-table` is an invoice
   layout — a 40% first column with right-aligned cells under
   left-aligned headers — which is why reusing it here misaligned. */

/* A long quiz title must scroll inside its own box, not widen the
   whole page — the cards were being pushed past the viewport edge. */
.table-wrap { overflow-x: auto; margin-top: 14px; }

.results-table { width: 100%; border-collapse: collapse; min-width: 460px; }

.results-table th,
.results-table td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.results-table th {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}

.results-table tbody tr:last-child th,
.results-table tbody tr:last-child td { border-bottom: 0; }

.results-table .num { text-align: right; }
.results-table .nowrap { white-space: nowrap; }
.results-table td:last-child { padding-right: 0; text-align: right; }

.notice-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.notice-item:last-child { border-bottom: 0; padding-bottom: 0; }
.notice-title { margin: 0; font-weight: 600; color: var(--text); }
.notice-item p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   Mark sheet (#21)

   A document rather than a screen. The print rules matter as much as
   the screen ones: "Download" here means the browser's own print-to-PDF,
   so what prints has to be the sheet alone — no sidebar, no buttons,
   no navigation.
   --------------------------------------------------------------- */

.marksheet-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.marksheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 32px;
}

.marksheet-head { border-bottom: 2px solid var(--brand); padding-bottom: 18px; }

/* Logo, title, photograph: three columns, the middle one centred. The
   photo box is passport proportion (35 x 45 mm, 7:9) on screen and
   exactly that in print. */
.marksheet-masthead {
  display: grid;
  grid-template-columns: 96px 1fr 105px;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.marksheet-logo { width: 96px; height: 96px; object-fit: contain; }
.marksheet-titles { text-align: center; }

.marksheet-photo {
  width: 105px;
  height: 135px;
  border: 1px solid var(--border-strong);
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  justify-self: end;
}

.marksheet-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 560px) {
  .marksheet-masthead { grid-template-columns: 64px 1fr 70px; gap: 10px; }
  .marksheet-logo { width: 64px; height: 64px; }
  .marksheet-photo { width: 70px; height: 90px; }
}

.marksheet-college {
  margin: 0;
  font-family: var(--font-display, var(--font-body));
  font-size: 20px;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.02em;
}

.marksheet-title {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.marksheet-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 0;
  text-align: left;
}

.marksheet-meta div { display: flex; flex-direction: column; gap: 2px; }
.marksheet-meta dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.marksheet-meta dd { margin: 0; font-weight: 600; color: var(--text); }

.marksheet-table { width: 100%; border-collapse: collapse; margin-top: 20px; min-width: 520px; }

.marksheet-table th,
.marksheet-table td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.marksheet-table thead th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-strong);
}

.marksheet-table .num { text-align: right; }
.marksheet-table tbody tr.is-pending td { color: var(--text-muted); }

.marksheet-table tfoot th,
.marksheet-table tfoot td {
  border-top: 2px solid var(--border-strong);
  border-bottom: 0;
  padding-top: 12px;
  font-weight: 700;
  color: var(--text);
}

.marksheet-verdict { margin-top: 16px; font-size: 15px; }

.marksheet-foot {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.marksheet-sign { display: flex; flex-direction: column; gap: 6px; }
.marksheet-sign .sign-line { display: block; width: 190px; border-bottom: 1px solid var(--text-muted); height: 28px; }

@media print {
  /* Everything that is chrome rather than document. These are the real
     class names on the signed-in shell — the first version of this rule
     named ones that did not exist, and the navbar, sidebar and Logout
     button printed on every mark sheet. */
  .top-navbar,
  .sidebar-col,
  .banner,
  .messages,
  .marksheet-actions,
  .certificate-actions,
  .site-footer { display: none !important; }

  /* The dashboard is a sidebar + content grid. Collapse it to one column
     so the sheet does not print with an empty gutter where the sidebar was. */
  .dashboard { display: block; }
  .main-content { width: 100%; max-width: none; }

  body, .dashboard, .main-content {
    background: var(--surface);
    margin: 0;
    padding: 0;
  }

  .marksheet {
    border: 0;
    border-radius: 0;
    padding: 0;
    /* Avoid splitting the table across pages where the browser allows it. */
    break-inside: avoid;
  }

  .marksheet-table { min-width: 0; }
  .table-wrap { overflow: visible; }
  a[href]::after { content: ""; }

  /* Real passport size on paper. */
  .marksheet-masthead { grid-template-columns: 28mm 1fr 35mm; }
  .marksheet-logo { width: 28mm; height: 28mm; }
  .marksheet-photo { width: 35mm; height: 45mm; }
}

/* ---------------------------------------------------------------
   Phone verification (#22)
   --------------------------------------------------------------- */

.verify-phone .field { max-width: 420px; }

.btn-send-code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.btn-send-code:disabled { opacity: .55; cursor: not-allowed; }

.verify-divider { margin: 24px 0; border-color: var(--border); }

.code-input {
  max-width: 220px;
  font-size: 22px;
  letter-spacing: .35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.phone-row { display: flex; gap: 8px; }
.phone-row .country-code { flex: 0 0 auto; width: auto; min-width: 150px; }
.phone-row .form-control { flex: 1 1 auto; min-width: 0; }

/* Student photo, where one has been uploaded. */
.avatar-photo { overflow: hidden; padding: 0; }
.avatar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photo-preview { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.photo-preview img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}

/* A textarea in an auth card stretches down, never sideways — a wider
   box would escape the card on a phone. */
.auth-card textarea.form-control { resize: vertical; min-height: 110px; }

/* ---------------------------------------------------------------
   The Zion mark
   --------------------------------------------------------------- */

.brand-mark { display: inline-flex; align-items: center; gap: 10px; }
.brand-logo { width: 36px; height: 36px; object-fit: contain; }

.auth-logo { width: 84px; height: 84px; object-fit: contain; display: block; margin: 0 auto; }

/* An informational banner: the same shape as the warning one, in the
   info colour, for a locked feature rather than a problem. */
.banner-info {
  background: var(--info-tint, var(--surface-alt));
  border-left-color: var(--info);
  color: var(--info);
}

/* An attempt that is submitted but still with a marker. Neither a pass
   nor a fail, so neither colour. */
.quiz-result.is-review { background: var(--info-tint); border-color: var(--info); }
.quiz-result.is-review .quiz-outcome { color: var(--info); }
.quiz-review-badge { color: var(--info); font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------
   Course completion certificate

   Landscape, A4-proportioned. Two blue waves frame the page, the
   student's name is set in a script face, a gold seal sits between the
   two signatures. Nothing here needs a script; everything prints as it
   shows. Colours are tokens, like everything else.
   --------------------------------------------------------------- */

.certificate-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.certificate {
  position: relative;
  overflow: hidden;
  aspect-ratio: 297 / 210;
  max-width: 1000px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
  color: var(--text);
}

.cert-wave { position: absolute; left: 0; width: 100%; height: 30%; }
.cert-wave-top { top: 0; }
.cert-wave-bottom { bottom: 0; }
.cert-wave-light { fill: var(--brand-light); opacity: .18; }
.cert-wave-dark { fill: var(--brand); opacity: .9; }
.cert-wave-top .cert-wave-dark { opacity: .12; }

.cert-body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5% 9% 6%;
}

.cert-college {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: clamp(11px, 1.3vw, 15px);
  color: var(--brand);
}
.cert-logo { width: clamp(34px, 4.5vw, 56px); height: auto; }

.cert-title {
  margin: 3% 0 0;
  font-family: var(--font-display, var(--font-body));
  font-weight: 800;
  font-size: clamp(30px, 6vw, 68px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
  line-height: 1;
}

.cert-subtitle {
  margin: 4px 0 0;
  font-size: clamp(13px, 2vw, 22px);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--brand-light);
}

.cert-lead { margin: 4% 0 0; font-size: clamp(12px, 1.5vw, 17px); color: var(--text-muted); }

.cert-name {
  margin: 1% 0 0;
  font-family: "Great Vibes", "Source Serif 4", cursive;
  font-size: clamp(30px, 6vw, 64px);
  line-height: 1.15;
  color: var(--brand);
  padding: 0 24px 4px;
  border-bottom: 1px solid var(--border-strong);
  min-width: 45%;
}

.cert-for {
  margin: 2.5% auto 0;
  max-width: 70%;
  font-size: clamp(12px, 1.5vw, 17px);
  line-height: 1.5;
  color: var(--text-muted);
}
.cert-for strong { color: var(--text); }

.cert-signatures {
  margin-top: auto;
  padding-top: 4%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
}

.cert-sign { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cert-sign-line { width: 60%; max-width: 220px; border-bottom: 1px solid var(--text); height: 28px; }
.cert-sign-name { font-weight: 600; font-size: clamp(11px, 1.3vw, 15px); }
.cert-sign-role { font-size: clamp(9px, 1vw, 12px); color: var(--text-muted); }

.cert-seal { position: relative; width: clamp(48px, 7vw, 84px); height: clamp(64px, 9vw, 108px); }
.cert-seal-ribbon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 46%;
  height: 55%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--brand) 0 42%, var(--surface) 42% 58%, var(--brand) 58%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}
.cert-seal-disc {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-tint), var(--gold) 60%, var(--gold-dark));
  border: 3px solid var(--gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--surface);
  font-size: clamp(18px, 3vw, 36px);
}

.cert-number {
  margin: 3% 0 0;
  font-size: clamp(8px, 0.95vw, 11px);
  color: var(--text-muted);
  letter-spacing: .04em;
}

.cert-ready { color: var(--gold-dark); }

@media print {
  @page { size: A4 landscape; margin: 8mm; }
  .certificate {
    max-width: none;
    width: 100%;
    height: calc(100vh - 16mm);
    aspect-ratio: auto;
    border: 0;
    box-shadow: none;
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}