/* =====================================================================
   LMS — Licensing Management System
   Governu Timor-Leste · IGEADI National OHS Licensing System

   Design direction: official, institutional, trustworthy — not a startup.
   The palette pulls from the Timor-Leste flag (red, yellow, black) but is
   muted into a governmental, document-grade register: deep ink, a single
   restrained state-red accent, and warm paper neutrals.

   Tailwind (CDN) handles layout and spacing. This file owns the design
   tokens and the recurring components — pills, cards, tables, the licence
   card — so a theme change is one edit, not a sweep through every view.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---------------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------------- */
:root {
  --ink:      #141b24;   /* near-black — primary text, masthead */
  --ink-2:    #3a4551;   /* secondary text */
  --ink-3:    #6b7784;   /* muted, captions */
  --paper:    #f7f6f2;   /* warm document paper */
  --paper-2:  #ffffff;   /* card surface */
  --line:     #dfe0d9;   /* hairline rules */
  --line-2:   #eceae3;

  --state:    #b5121b;   /* Timor state red — the single accent */
  --state-dk: #8c0d15;
  --gold:     #c79a1e;   /* muted flag gold, used sparingly */

  --ok:       #1f7a4d;  --ok-bg:   #e6f2ea;
  --warn:     #a6600a;  --warn-bg: #fbf0dd;
  --bad:      #b5121b;  --bad-bg:  #fbe7e7;
  --info:     #1f5f8b;  --info-bg: #e6eef5;

  /* CARD IMAGERY — the shape of every picture box on the site.
     These were fixed pixel heights (150px on a course card, 170px on a
     sector tile). Card WIDTH changes with the viewport — every grid here
     is sm:grid-cols-2 xl:grid-cols-3 — so one pixel height produces a
     different shape at every breakpoint, and on a wide desktop it made a
     600x150 letterbox that object-fit:cover cropped to a strip.

     A ratio holds its shape at every width. The cap exists because the
     shell is max-w-shell:100%, so cards keep widening with the monitor;
     without it one row would eventually fill the screen. 420px is
     measured, not guessed: at a 1900px viewport a three-column card is
     ~602px wide and 4/3 of that is 451px, so a lower cap would clamp the
     picture back towards the wide strip it replaced.

     Change the ratio here and the course cards, the sector tiles and the
     home page all move together. Raise the cap with it — a 1/1 at a
     420px cap is not a square on a large screen, it is a 4/3. */
  --card-ratio: 4 / 3;
  --card-cap:   420px;

  --radius:   6px;
  --radius-lg: 12px;
  --shadow:   0 1px 2px rgba(20,27,36,.06), 0 4px 14px rgba(20,27,36,.05);
  --shadow-lg: 0 10px 26px rgba(20,27,36,.12);

  --font-d: "Barlow Semi Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-b: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-m: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-b);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-display { font-family: var(--font-d); }
.font-mono, .mono { font-family: var(--font-m); }

/* Visible focus ring for keyboard users, suppressed for mouse clicks. */
:focus-visible {
  outline: 2px solid var(--state);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Skip link for screen-reader and keyboard navigation. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px;
  border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------------
   Masthead
   --------------------------------------------------------------------- */
.lms-mast {
  background: var(--ink);
  color: #fff;
  border-bottom: 3px solid var(--state);
}
.lms-mast__logo { height: 38px; width: auto; display: block; max-width: 60vw; }
.lms-mast__rule { width: 1px; height: 34px; background: rgba(255,255,255,.28); }
.lms-mast h1 {
  font-family: var(--font-d); font-weight: 700; font-size: 16px;
  letter-spacing: .3px; line-height: 1.1;
}
.lms-mast__sub {
  font-size: 11px; color: #b9c0c8; letter-spacing: .4px;
  text-transform: uppercase; font-weight: 500;
}

.lms-lang { display: flex; border: 1px solid rgba(255,255,255,.25); border-radius: 20px; overflow: hidden; }
.lms-lang button {
  background: transparent; color: #c4cbd2; border: 0;
  padding: 4px 10px; font-weight: 600; font-size: 11px; cursor: pointer;
  transition: background .15s, color .15s;
}
.lms-lang button:hover { color: #fff; }
.lms-lang button.is-on { background: var(--state); color: #fff; }

.lms-avatar {
  display: inline-grid; place-items: center; border-radius: 50%;
  color: #fff; font-weight: 700; flex: 0 0 auto; line-height: 1;
}

/* ---------------------------------------------------------------------
   Portal switcher
   --------------------------------------------------------------------- */
.lms-portalbar { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.lms-portal-tab {
  background: transparent; border: 0; border-bottom: 3px solid transparent;
  padding: 12px 16px; font-weight: 600; font-size: 13px; color: var(--ink-3);
  white-space: nowrap; display: flex; align-items: center; gap: 7px;
  cursor: pointer; transition: color .15s, border-color .15s;
}
.lms-portal-tab:hover { color: var(--ink); }
.lms-portal-tab.is-on { color: var(--state); border-bottom-color: var(--state); }

/* ---------------------------------------------------------------------
   Sidebar navigation
   --------------------------------------------------------------------- */
.lms-side { border-right: 1px solid var(--line); background: var(--paper); }
.lms-side__label {
  font-size: 10px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; color: var(--ink-3); padding: 10px 10px 6px;
}
.lms-nav {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius); color: var(--ink-2);
  font-weight: 500; font-size: 13px; margin-bottom: 1px;
  transition: background .12s, color .12s;
}
.lms-nav:hover { background: var(--line-2); }
.lms-nav.is-active { background: var(--ink); color: #fff; }
.lms-nav.is-active .lms-modid { color: #aeb9c4; }
.lms-nav.is-active .lms-badge { background: rgba(255,255,255,.2); color: #fff; }
.lms-nav svg { flex: 0 0 16px; opacity: .85; }
.lms-modid { font-family: var(--font-m); font-size: 10px; color: var(--ink-3); margin-left: auto; }
.lms-badge {
  margin-left: auto; background: var(--state); color: #fff; font-size: 10px;
  font-weight: 700; border-radius: 20px; padding: 1px 7px; min-width: 18px; text-align: center;
}

/* ---------------------------------------------------------------------
   Page header
   --------------------------------------------------------------------- */
.lms-ph {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.lms-ph__eyebrow {
  font-family: var(--font-m); font-size: 11px; color: var(--state);
  font-weight: 500; letter-spacing: .5px; margin-bottom: 3px;
}
.lms-ph h2 { font-family: var(--font-d); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: .2px; }
.lms-ph p { color: var(--ink-3); font-size: 13px; margin-top: 5px; max-width: 640px; }

.lms-sec-title {
  font-family: var(--font-d); font-weight: 600; font-size: 17px;
  margin: 22px 0 10px; display: flex; align-items: center; gap: 8px;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.lms-btn {
  background: var(--paper-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--radius); padding: 8px 14px; font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
  text-decoration: none; line-height: 1.2;
}
.lms-btn:hover { border-color: var(--ink-3); }
.lms-btn:disabled, .lms-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.lms-btn svg { flex: 0 0 auto; }

.lms-btn--primary { background: var(--state); border-color: var(--state); color: #fff; }
.lms-btn--primary:hover { background: var(--state-dk); border-color: var(--state-dk); }
.lms-btn--ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.lms-btn--ink:hover { background: #000; border-color: #000; }
.lms-btn--ghost { background: transparent; border-color: transparent; }
.lms-btn--ghost:hover { background: var(--line-2); border-color: transparent; }
.lms-btn--sm { padding: 5px 10px; font-size: 12px; }
.lms-btn--block { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------------
   Stat tiles
   --------------------------------------------------------------------- */
.lms-tile {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; position: relative; overflow: hidden;
}
.lms-tile::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--state);
}
.lms-tile--gold::before { background: var(--gold); }
.lms-tile--info::before { background: var(--info); }
.lms-tile--ink::before  { background: var(--ink); }
.lms-tile__k {
  font-size: 11px; color: var(--ink-3); font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
}
.lms-tile__v { font-family: var(--font-d); font-weight: 700; font-size: 30px; line-height: 1.05; margin-top: 6px; }
.lms-tile__d { font-size: 11px; margin-top: 4px; color: var(--ink-3); }
.lms-tile__d b     { color: var(--ok); }
.lms-tile__d b.dn  { color: var(--bad); }

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */
.lms-card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.lms-card__h {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-2);
}
.lms-card__h h3 { font-family: var(--font-d); font-weight: 600; font-size: 16px; }
.lms-card__more { margin-left: auto; font-size: 12px; color: var(--state); font-weight: 600; }
.lms-card__b { padding: 16px; }
.lms-card__b--flush { padding: 0; }

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */
.lms-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lms-table th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ink-3); font-weight: 700; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: var(--paper);
  position: sticky; top: 0; z-index: 1;
}
.lms-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.lms-table tbody tr:last-child td { border-bottom: 0; }
.lms-table tbody tr.is-clickable:hover { background: #fafaf7; cursor: pointer; }
.lms-table .nm  { font-weight: 600; }
.lms-table .mut { color: var(--ink-3); }
.mut { color: var(--ink-3); }
.nm  { font-weight: 600; }

.lms-table__empty { text-align: center; padding: 34px 16px; color: var(--ink-3); }

/* ---------------------------------------------------------------------
   Pills, tags and chips
   --------------------------------------------------------------------- */
.lms-pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap;
}
.lms-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lms-pill--ok   { background: var(--ok-bg);   color: var(--ok); }
.lms-pill--warn { background: var(--warn-bg); color: var(--warn); }
.lms-pill--bad  { background: var(--bad-bg);  color: var(--bad); }
.lms-pill--info { background: var(--info-bg); color: var(--info); }
.lms-pill--mut  { background: var(--line-2);  color: var(--ink-3); }

.lms-pri { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; font-family: var(--font-m); }
.lms-pri--h { background: var(--bad-bg);  color: var(--bad); }
.lms-pri--m { background: var(--warn-bg); color: var(--warn); }
.lms-pri--l { background: var(--line-2);  color: var(--ink-3); }

.lms-chip {
  display: inline-block; font-size: 11px; background: var(--line-2); color: var(--ink-2);
  padding: 3px 9px; border-radius: 20px; font-weight: 600; margin: 2px 3px 2px 0;
}
.lms-sector-chip {
  display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 20px; cursor: pointer; border: 1px solid;
  white-space: nowrap; text-decoration: none; transition: filter .15s;
}
.lms-sector-chip:hover { filter: brightness(.96); }

.lms-modref {
  font-family: var(--font-m); font-size: 10px; background: var(--line-2);
  color: var(--ink-2); padding: 2px 7px; border-radius: 3px; font-weight: 500;
}

/* ---------------------------------------------------------------------
   Form fields
   --------------------------------------------------------------------- */
.lms-field { position: relative; }
.lms-field > svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--ink-3); pointer-events: none;
}
.lms-input, .lms-select, .lms-textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 9px 12px; font-family: inherit; font-size: 13px;
  background: var(--paper-2); color: var(--ink);
  transition: border-color .12s, box-shadow .12s;
}
.lms-input--padded { padding-left: 34px; }
.lms-input:focus, .lms-select:focus, .lms-textarea:focus {
  outline: none; border-color: var(--state);
  box-shadow: 0 0 0 3px rgba(181,18,27,.12);
}
.lms-input:disabled, .lms-input[readonly] { background: var(--paper); color: var(--ink-2); }
.lms-label {
  font-size: 11px; font-weight: 600; color: var(--ink-2); display: block;
  margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px;
}
.lms-error { color: var(--bad); font-size: 12px; margin-top: 4px; }

/* Radio-card used by the enrolment pathway picker. */
.lms-radio-card {
  display: flex; gap: 12px; align-items: center; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 8px; cursor: pointer; transition: border-color .12s, background .12s;
}
.lms-radio-card:hover { background: var(--paper); }
.lms-radio-card__dot {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink-3);
  display: grid; place-items: center; flex: 0 0 18px; transition: border-color .12s;
}
.lms-radio-card__dot::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--state); transform: scale(0); transition: transform .12s;
}
.lms-radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.lms-radio-card:has(input:checked) { border-color: var(--state); }
.lms-radio-card:has(input:checked) .lms-radio-card__dot { border-color: var(--state); }
.lms-radio-card:has(input:checked) .lms-radio-card__dot::after { transform: scale(1); }

/* ---------------------------------------------------------------------
   Timeline (audit trail)
   --------------------------------------------------------------------- */
.lms-timeline { position: relative; padding-left: 22px; }
.lms-timeline::before {
  content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px;
  width: 2px; background: var(--line);
}
.lms-timeline__i { position: relative; padding: 0 0 16px; }
.lms-timeline__i::before {
  content: ""; position: absolute; left: -19px; top: 3px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--paper-2); border: 2px solid var(--state);
}
.lms-timeline__i:last-child { padding-bottom: 0; }
.lms-timeline__t { font-weight: 600; font-size: 13px; }
.lms-timeline__m { font-size: 11px; color: var(--ink-3); font-family: var(--font-m); margin-top: 1px; }

/* ---------------------------------------------------------------------
   Stepper
   --------------------------------------------------------------------- */
.lms-steps {
  display: flex; margin-bottom: 22px; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; background: var(--paper-2);
}
.lms-step {
  flex: 1; padding: 12px 14px; border-right: 1px solid var(--line-2);
  display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--ink-3);
}
.lms-step:last-child { border-right: 0; }
.lms-step__n {
  width: 22px; height: 22px; border-radius: 50%; background: var(--line-2);
  color: var(--ink-3); display: grid; place-items: center;
  font-weight: 700; font-size: 11px; flex: 0 0 22px;
}
.lms-step.is-on   { color: var(--ink); background: var(--paper); }
.lms-step.is-on   .lms-step__n { background: var(--state); color: #fff; }
.lms-step.is-done .lms-step__n { background: var(--ok); color: #fff; }
.lms-step b { font-weight: 600; display: block; }
.lms-step span { font-size: 10px; color: var(--ink-3); }

/* ---------------------------------------------------------------------
   Digital licence card
   --------------------------------------------------------------------- */
.lms-dlc {
  background: linear-gradient(135deg, #1a2530 0%, #2b3a49 55%, #141b24 100%);
  color: #fff; border-radius: var(--radius-lg); padding: 20px;
  position: relative; overflow: hidden;
  box-shadow: 0 8px 24px rgba(20,27,36,.25); max-width: 400px;
}
.lms-dlc::before {
  content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px;
  border-radius: 50%; background: radial-gradient(circle, var(--state) 0 40%, transparent 42%); opacity: .35;
}
.lms-dlc::after { content: "★"; position: absolute; right: 22px; top: 16px; color: var(--gold); font-size: 20px; }
.lms-dlc__hdr { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: #aeb9c4; font-weight: 600; }
.lms-dlc__cls { font-family: var(--font-d); font-size: 34px; font-weight: 700; line-height: 1; margin: 4px 0 12px; }
.lms-dlc__k { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: #8b96a1; }
.lms-dlc__v { font-size: 14px; font-weight: 600; margin-top: 2px; }
.lms-dlc__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12);
}

/* Generated QR placeholder — swap for a real QR image in production. */
.lms-qr {
  width: 56px; height: 56px; background: #fff; border-radius: 6px;
  background-image:
    linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%),
    linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%);
  background-size: 11px 11px;
  background-position: 0 0, 5.5px 5.5px;
}

/* ---------------------------------------------------------------------
   Notices
   --------------------------------------------------------------------- */
.lms-notice {
  background: var(--info-bg); border: 1px solid #cfe0ee; border-left: 3px solid var(--info);
  border-radius: var(--radius); padding: 11px 14px; font-size: 12.5px;
  color: var(--ink-2); display: flex; gap: 10px; margin-bottom: 16px;
}
.lms-notice svg { width: 17px; height: 17px; color: var(--info); flex: 0 0 17px; margin-top: 1px; }
.lms-notice b { color: var(--ink); }
.lms-notice--bad  { background: var(--bad-bg);  border-color: #e9c1c1; border-left-color: var(--bad); }
.lms-notice--bad svg  { color: var(--bad); }
.lms-notice--warn { background: var(--warn-bg); border-color: #ecd9b4; border-left-color: var(--warn); }
.lms-notice--warn svg { color: var(--warn); }
.lms-notice--ok   { background: var(--ok-bg);   border-color: #bfdccd; border-left-color: var(--ok); }
.lms-notice--ok svg   { color: var(--ok); }

/* ---------------------------------------------------------------------
   Key/value list & progress bar
   --------------------------------------------------------------------- */
.lms-kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 13px; }
.lms-kv dt { color: var(--ink-3); font-weight: 500; }
.lms-kv dd { font-weight: 600; }

.lms-bar { height: 7px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.lms-bar i { display: block; height: 100%; background: var(--state); border-radius: 4px; transition: width .4s ease; }

.lms-hr { height: 1px; background: var(--line); margin: 18px 0; }

/* ---------------------------------------------------------------------
   Charts
   --------------------------------------------------------------------- */
.lms-spark { display: flex; align-items: flex-end; gap: 5px; height: 110px; }
.lms-spark__b {
  flex: 1; background: linear-gradient(var(--state), #d94a52); border-radius: 3px 3px 0 0;
  position: relative; min-height: 4px; transition: background .25s, transform .25s;
}
.lms-spark__b:hover { background: var(--ink); }
.lms-spark__b span {
  position: absolute; bottom: -18px; left: 0; right: 0; text-align: center;
  font-size: 9px; color: var(--ink-3);
}
.lms-legend { display: flex; gap: 16px; font-size: 11px; color: var(--ink-3); flex-wrap: wrap; }
.lms-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* ---------------------------------------------------------------------
   Course & sector cards
   --------------------------------------------------------------------- */
.lms-vcard {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow); cursor: pointer;
  transition: transform .16s, box-shadow .16s; display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.lms-vcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.lms-vcard__img {
  position: relative; overflow: hidden; background: #2a3542;
  height: auto;
  aspect-ratio: var(--card-ratio);
  max-height: var(--card-cap);
  /* width:100% is load-bearing. When max-height clamps a box that has an
     aspect-ratio, the browser re-solves the WIDTH to preserve the ratio
     rather than keeping the box full-width — so the tile shrank inside
     its grid cell and left a gap. Pinning the width makes the cap
     flatten the ratio instead, which is the intended trade. */
  width: 100%;
}
.lms-vcard__img svg, .lms-vcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lms-vcard__tag {
  position: absolute; top: 10px; left: 10px; background: var(--state); color: #fff;
  font-family: var(--font-d); font-weight: 600; font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; padding: 4px 10px; border-radius: 3px;
}
.lms-vcard__cls {
  position: absolute; bottom: 10px; right: 10px; width: 38px; height: 38px;
  background: rgba(20,27,36,.82); color: #fff; border-radius: 8px;
  display: grid; place-items: center; font-family: var(--font-d); font-weight: 700;
  font-size: 15px; backdrop-filter: blur(2px);
}
.lms-vcard__body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; }
.lms-vcard__body h3 { font-family: var(--font-d); font-weight: 600; font-size: 16px; line-height: 1.15; margin-bottom: 3px; }
.lms-vcard__unit { font-family: var(--font-m); font-size: 10.5px; color: var(--ink-3); margin-bottom: 8px; }
.lms-vcard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; }
.lms-vcard__fee { font-family: var(--font-d); font-weight: 700; font-size: 17px; }

.lms-stile {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
  display: flex; align-items: flex-end; box-shadow: var(--shadow);
  /* min-height stays as a floor: the title and blurb sit inside this box,
     and on a narrow phone the ratio alone could squeeze them. */
  min-height: 170px;
  aspect-ratio: var(--card-ratio);
  max-height: var(--card-cap);
  /* width:100% is load-bearing. When max-height clamps a box that has an
     aspect-ratio, the browser re-solves the WIDTH to preserve the ratio
     rather than keeping the box full-width — so the tile shrank inside
     its grid cell and left a gap. Pinning the width makes the cap
     flatten the ratio instead, which is the intended trade. */
  width: 100%;
  transition: transform .16s, box-shadow .16s; text-decoration: none;
}
.lms-stile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.lms-stile > svg.bg, .lms-stile > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lms-stile__ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,27,36,.94) 0%, rgba(20,27,36,.6) 45%, rgba(20,27,36,.4) 75%, rgba(20,27,36,.35) 100%);
}
.lms-stile__c { position: relative; padding: 16px; color: #fff; width: 100%; }
.lms-stile__c h3 { font-family: var(--font-d); font-weight: 700; font-size: 20px; line-height: 1; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.lms-stile__c p  { font-size: 12px; color: #e4e9ee; margin: 4px 0 8px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.lms-stile__n {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,.16); padding: 3px 10px; border-radius: 20px;
}
.lms-stile__tag { position: absolute; top: 12px; left: 12px; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #fff; }

/* ---------------------------------------------------------------------
   Course hero
   --------------------------------------------------------------------- */
.lms-chero {
  position: relative; background: var(--ink); border-radius: 14px; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 20px;
}
.lms-chero__l { padding: 32px 30px; color: #fff; display: flex; flex-direction: column; justify-content: center; }
.lms-chero__back {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #8b96a1;
  font-weight: 600; margin-bottom: 16px; cursor: pointer; display: inline-flex;
  align-items: center; gap: 8px; width: fit-content; text-decoration: none;
}
.lms-chero__back:hover { color: #fff; }
.lms-chero__tag {
  background: var(--state); color: #fff; font-family: var(--font-d); font-weight: 600;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 3px; width: fit-content; margin-bottom: 16px;
}
.lms-chero h1 { font-family: var(--font-d); font-weight: 700; font-size: 44px; line-height: .95; letter-spacing: -.5px; margin-bottom: 12px; }
.lms-chero h1 .red { color: var(--state); }
.lms-chero__code { font-family: var(--font-m); font-size: 13px; letter-spacing: 2px; color: var(--state); font-weight: 500; margin-bottom: 6px; }
.lms-chero__by   { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #8b96a1; font-weight: 600; margin-bottom: 16px; }
.lms-chero__desc { font-size: 15px; line-height: 1.6; color: #c4cbd2; margin-bottom: 22px; }
.lms-chero__r { position: relative; min-height: 340px; }
.lms-chero__r svg, .lms-chero__r img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lms-chero__cta {
  background: var(--state); color: #fff; border: 0; border-radius: 8px; padding: 14px 26px;
  font-family: var(--font-d); font-weight: 600; font-size: 15px; letter-spacing: 1px;
  text-transform: uppercase; cursor: pointer; width: fit-content;
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  transition: background .15s;
}
.lms-chero__cta:hover { background: var(--state-dk); }

/* ---------------------------------------------------------------------
   Co-brand lockup (ISAustralia | licensing.tl)
   --------------------------------------------------------------------- */
.lms-cobrand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-d); letter-spacing: .3px; }
.lms-cobrand__isa { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: .5px; }
.lms-cobrand__isa b { color: var(--state); font-weight: 700; }
.lms-cobrand__sep { width: 1px; height: 20px; background: var(--line); }
.lms-cobrand__tl { font-size: 16px; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.lms-cobrand__box {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border: 2px solid var(--ink); border-radius: 3px; font-size: 11px;
  font-weight: 700; color: var(--ink); text-transform: lowercase;
}
.lms-cobrand__dot { color: var(--state); }
.lms-brandbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-2); margin-bottom: 16px;
}
.lms-brandbar__tag {
  background: var(--state); color: #fff; font-family: var(--font-d); font-weight: 600;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 3px;
}

/* ---------------------------------------------------------------------
   Toast
   --------------------------------------------------------------------- */
.lms-toast-host {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 99; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.lms-toast {
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 8px;
  font-size: 13px; font-weight: 500; box-shadow: 0 8px 30px rgba(0,0,0,.3);
  display: flex; gap: 10px; align-items: center;
  opacity: 0; transform: translateY(20px); transition: opacity .28s, transform .28s;
  pointer-events: auto; max-width: 92vw;
}
.lms-toast.is-visible { opacity: 1; transform: translateY(0); }
.lms-toast svg { width: 17px; height: 17px; color: var(--gold); flex: 0 0 17px; }
.lms-toast--bad  svg { color: #ff8a8a; }
.lms-toast--ok   svg { color: #7fe3a8; }

/* ---------------------------------------------------------------------
   Login
   --------------------------------------------------------------------- */
.lms-login-shell {
  min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr;
  background: var(--ink);
}
.lms-login-aside { position: relative; overflow: hidden; display: none; }
.lms-login-aside svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lms-login-aside__ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,27,36,.96) 0%, rgba(20,27,36,.55) 60%, rgba(20,27,36,.4) 100%);
}
.lms-login-panel {
  background: var(--paper); display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}
@media (min-width: 900px) { .lms-login-aside { display: block; } }
@media (max-width: 899px) { .lms-login-shell { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   Print — only the course guide prints, cleanly
   --------------------------------------------------------------------- */
@media print {
  .lms-mast, .lms-portalbar, .lms-side, .lms-ph__actions, .no-print, .lms-toast-host { display: none !important; }
  .lms-shell { display: block !important; max-width: 100%; }
  .lms-main { padding: 0 !important; }
  body { background: #fff; font-size: 11pt; }
  .lms-card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  a[href]::after { content: ""; }
  @page { margin: 16mm; }
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 960px) {
  .lms-chero { grid-template-columns: 1fr; }
  .lms-chero__r { min-height: 200px; order: -1; }
  .lms-chero h1 { font-size: 34px; }
  .lms-steps { flex-wrap: wrap; }
  .lms-step { flex: 1 1 45%; }
  .lms-mast__logo { height: 30px; max-width: 70vw; }
  .lms-kv { grid-template-columns: 110px 1fr; }
}

/* Respect the user's motion preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}