/* ==========================================================================
   components.css - buttons, cards, pills, tables, tabs, dialogs, toasts
   and the student lifecycle rail.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   Primary   solid brand green, white text  (--mk-brand-strong, 5.03:1)
   Secondary deep green outline
   Tertiary  text link in --mk-link
   Danger    solid danger
   -------------------------------------------------------------------------- */

.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mk-space-2);
  min-height: 42px;
  padding: 0 var(--mk-space-4);
  font-family: var(--mk-font-body);
  font-size: var(--mk-text-base);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--mk-radius);
  cursor: pointer;
  transition: background var(--mk-dur) var(--mk-ease),
              border-color var(--mk-dur) var(--mk-ease),
              color var(--mk-dur) var(--mk-ease);
}

.mk-btn:disabled,
.mk-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.mk-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

.mk-btn--primary {
  color: var(--mk-surface);
  background: var(--mk-brand-strong);
  border-color: var(--mk-brand-strong);
}

.mk-btn--primary:hover {
  background: var(--mk-brand-dark);
  border-color: var(--mk-brand-dark);
  border-bottom-color: var(--mk-brand-dark);
}

.mk-btn--secondary {
  color: var(--mk-heading);
  background: var(--mk-surface);
  border-color: var(--mk-heading);
}

.mk-btn--secondary:hover {
  background: var(--mk-brand-deep);
  color: var(--mk-surface);
  border-bottom-color: var(--mk-heading);
}

.mk-btn--ghost {
  color: var(--mk-heading);
  background: var(--mk-surface);
  border-color: var(--mk-line);
}

.mk-btn--ghost:hover { background: var(--mk-highlight); border-bottom-color: var(--mk-line); }

.mk-btn--tertiary {
  min-height: 34px;
  padding: 0 var(--mk-space-2);
  color: var(--mk-link);
  background: transparent;
  border-color: transparent;
}

.mk-btn--tertiary:hover { text-decoration: underline; }

.mk-btn--danger {
  color: var(--mk-surface);
  background: var(--mk-danger);
  border-color: var(--mk-danger);
}

.mk-btn--danger:hover { filter: brightness(0.9); }

.mk-btn--sm { min-height: 34px; padding: 0 var(--mk-space-3); font-size: var(--mk-text-sm); }
.mk-btn--lg { min-height: 48px; padding: 0 var(--mk-space-5); font-size: var(--mk-text-md); }
.mk-btn--block { width: 100%; }

.mk-btngroup { display: flex; flex-wrap: wrap; gap: var(--mk-space-2); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.mk-card {
  background: var(--mk-surface);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius-lg);
  box-shadow: var(--mk-shadow);
}

.mk-card__head {
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  padding: var(--mk-space-4) var(--mk-space-4) var(--mk-space-3);
  border-bottom: 1px solid var(--mk-line-soft);
  flex-wrap: wrap;
}

.mk-card__head h2,
.mk-card__head h3 { font-size: var(--mk-text-md); }

.mk-card__head-actions { margin-left: auto; display: flex; gap: var(--mk-space-2); }

.mk-card__body { padding: var(--mk-space-4); }

.mk-card__foot {
  padding: var(--mk-space-3) var(--mk-space-4);
  background: var(--mk-canvas);
  border-top: 1px solid var(--mk-line-soft);
  border-radius: 0 0 var(--mk-radius-lg) var(--mk-radius-lg);
}

/* Stat tile */
.mk-stat { padding: var(--mk-space-4); }

.mk-stat__label {
  display: block;
  font-size: var(--mk-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mk-slate);
}

.mk-stat__value {
  display: block;
  margin-top: var(--mk-space-2);
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--mk-heading);
}

.mk-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--mk-space-2);
  font-size: var(--mk-text-xs);
  font-weight: 600;
}

.mk-stat__delta[data-dir="up"]   { color: var(--mk-success); }
.mk-stat__delta[data-dir="down"] { color: var(--mk-danger); }
.mk-stat__delta[data-dir="flat"] { color: var(--mk-slate); }

/* --------------------------------------------------------------------------
   Status pills. Status colour at 12 percent behind full-strength text.
   -------------------------------------------------------------------------- */

.mk-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: var(--mk-text-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  border-radius: var(--mk-radius-pill);
  color: var(--mk-neutral);
  background: rgb(var(--mk-neutral-rgb) / 12%);
}

.mk-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.mk-pill--success { color: var(--mk-success); background: rgb(var(--mk-success-rgb) / 12%); }
.mk-pill--warning { color: var(--mk-warning); background: rgb(var(--mk-warning-rgb) / 12%); }
.mk-pill--danger  { color: var(--mk-danger);  background: rgb(var(--mk-danger-rgb)  / 12%); }
.mk-pill--info    { color: var(--mk-info);    background: rgb(var(--mk-info-rgb)    / 12%); }
.mk-pill--brand   { color: var(--mk-brand-dark); background: rgb(var(--mk-brand-rgb)   / 12%); }
.mk-pill--deep    { color: var(--mk-brand-deep); background: rgb(var(--mk-brand-deep-rgb) / 12%); }
.mk-pill--plain::before { display: none; }

/* --------------------------------------------------------------------------
   Student lifecycle rail
   The signature element. Present on every student and application record.
   Applied, Screened, Verified, Funded, Active, Graduated, Alumni.
   Completed nodes deep green, current node brand green, future nodes line grey.
   Scrolls horizontally rather than wrapping, so it survives 360px.
   -------------------------------------------------------------------------- */

.mk-rail-wrap {
  position: relative;
  padding: var(--mk-space-4) 0 var(--mk-space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.mk-rail {
  display: flex;
  align-items: flex-start;
  min-width: 620px;
  margin: 0;
  padding: 0 var(--mk-space-2);
  list-style: none;
  counter-reset: rail;
}

.mk-rail__node {
  position: relative;
  flex: 1 1 0;
  min-width: 78px;
  padding-top: 26px;
  text-align: center;
}

/* Connector segment sits behind the dot and is drawn from the node to its left. */
.mk-rail__node::before {
  content: "";
  position: absolute;
  top: 9px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--mk-line);
}

.mk-rail__node:first-child::before { display: none; }

.mk-rail__node::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 16px;
  height: 16px;
  background: var(--mk-surface);
  border: 2px solid var(--mk-line);
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.mk-rail__label {
  display: block;
  font-size: var(--mk-text-xs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--mk-slate);
}

.mk-rail__meta {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--mk-slate);
  opacity: 0.85;
}

/* Completed */
.mk-rail__node[data-state="done"]::before { background: var(--mk-brand-deep); }
.mk-rail__node[data-state="done"]::after {
  background: var(--mk-brand-deep);
  border-color: var(--mk-heading);
}
.mk-rail__node[data-state="done"] .mk-rail__label { color: var(--mk-heading); }

/* Current.
   The node carries meaning, so its fill is --mk-brand-strong, which clears
   3:1 against the canvas. The lighter --mk-brand is the halo around it: the
   brand green at full strength is the accent, and putting it in the ring
   rather than the fill is what lets it stay an accent and still be seen. */
.mk-rail__node[data-state="current"]::before { background: var(--mk-brand-deep); }
.mk-rail__node[data-state="current"]::after {
  background: var(--mk-brand-strong);
  border-color: var(--mk-brand-strong);
  box-shadow: 0 0 0 4px rgb(var(--mk-brand-rgb) / 30%);
}
.mk-rail__node[data-state="current"] .mk-rail__label {
  color: var(--mk-brand-dark);
  font-weight: 700;
}

/* Halted, for withdrawn or terminated records */
.mk-rail__node[data-state="halted"]::after {
  background: var(--mk-danger);
  border-color: var(--mk-danger);
}
.mk-rail__node[data-state="halted"] .mk-rail__label { color: var(--mk-danger); }

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

.mk-tabs {
  display: flex;
  gap: var(--mk-space-1);
  border-bottom: 1px solid var(--mk-line);
  overflow-x: auto;
  scrollbar-width: none;
}

.mk-tabs::-webkit-scrollbar { display: none; }

.mk-tab {
  position: relative;
  padding: 10px var(--mk-space-3);
  font-size: var(--mk-text-base);
  font-weight: 500;
  white-space: nowrap;
  color: var(--mk-slate);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.mk-tab:hover { color: var(--mk-heading); }

.mk-tab[aria-selected="true"] {
  color: var(--mk-heading);
  font-weight: 600;
  border-bottom-color: var(--mk-brand-strong);
}

.mk-tabpanel { padding-top: var(--mk-space-4); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.mk-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius-lg);
  background: var(--mk-surface);
}

.mk-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--mk-text-sm);
}

.mk-table caption {
  padding: var(--mk-space-3) var(--mk-space-4);
  font-size: var(--mk-text-xs);
  color: var(--mk-slate);
  text-align: left;
}

.mk-table th {
  padding: var(--mk-space-3) var(--mk-space-4);
  font-size: var(--mk-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--mk-slate);
  background: var(--mk-canvas);
  border-bottom: 1px solid var(--mk-line);
  white-space: nowrap;
}

.mk-table td {
  padding: var(--mk-space-3) var(--mk-space-4);
  border-bottom: 1px solid var(--mk-line-soft);
  vertical-align: middle;
}

.mk-table tbody tr:last-child td { border-bottom: 0; }
/* The ISFAP highlight colour. Reserved for interactive highlight states, so
   a hovered or selected row reads as brand rather than as neutral chrome. */
.mk-table tbody tr:hover { background: var(--mk-highlight); }
.mk-table tbody tr[data-selected="true"] { background: var(--mk-highlight); }
.mk-table td.mk-num, .mk-table th.mk-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Masked identifiers with an audited reveal action. */
.mk-masked {
  display: inline-flex;
  align-items: center;
  gap: var(--mk-space-2);
  font-family: var(--mk-font-mono);
  font-size: var(--mk-text-xs);
  color: var(--mk-ink);
}

.mk-masked__btn {
  padding: 1px 6px;
  font-family: var(--mk-font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--mk-info);
  background: rgb(var(--mk-info-rgb) / 10%);
  border: 0;
  border-radius: var(--mk-radius-sm);
  cursor: pointer;
}

.mk-masked__btn:hover { background: rgb(var(--mk-info-rgb) / 18%); }

/* --------------------------------------------------------------------------
   Alerts and empty states
   -------------------------------------------------------------------------- */

.mk-alert {
  display: flex;
  gap: var(--mk-space-3);
  padding: var(--mk-space-3) var(--mk-space-4);
  font-size: var(--mk-text-sm);
  border: 1px solid;
  border-radius: var(--mk-radius);
  color: var(--mk-info);
  background: rgb(var(--mk-info-rgb) / 8%);
  border-color: rgb(var(--mk-info-rgb) / 26%);
}

.mk-alert strong { display: block; margin-bottom: 2px; }
.mk-alert svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }

.mk-alert--success { color: var(--mk-success); background: rgb(var(--mk-success-rgb) / 8%); border-color: rgb(var(--mk-success-rgb) / 26%); }
.mk-alert--warning { color: var(--mk-warning); background: rgb(var(--mk-warning-rgb) / 8%); border-color: rgb(var(--mk-warning-rgb) / 26%); }
.mk-alert--danger  { color: var(--mk-danger);  background: rgb(var(--mk-danger-rgb)  / 8%); border-color: rgb(var(--mk-danger-rgb)  / 26%); }

.mk-empty {
  padding: var(--mk-space-7) var(--mk-space-4);
  text-align: center;
  color: var(--mk-slate);
}

.mk-empty h3 { margin-bottom: var(--mk-space-2); color: var(--mk-heading); }

/* --------------------------------------------------------------------------
   Progress
   -------------------------------------------------------------------------- */

.mk-progress {
  height: 8px;
  overflow: hidden;
  background: var(--mk-line-soft);
  border-radius: var(--mk-radius-pill);
}

.mk-progress__bar {
  height: 100%;
  background: var(--mk-brand);
  border-radius: var(--mk-radius-pill);
  transition: width var(--mk-dur) var(--mk-ease);
}

.mk-progress__bar[data-tone="brand"]   { background: var(--mk-brand); }
.mk-progress__bar[data-tone="success"] { background: var(--mk-success); }
.mk-progress__bar[data-tone="warning"] { background: var(--mk-warning); }
.mk-progress__bar[data-tone="danger"]  { background: var(--mk-danger); }

/* --------------------------------------------------------------------------
   Dialog and toast
   -------------------------------------------------------------------------- */

.mk-dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  color: var(--mk-ink);
  background: var(--mk-surface);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius-lg);
  box-shadow: var(--mk-shadow-lg);
}

.mk-dialog::backdrop { background: var(--mk-overlay); }
.mk-dialog__head { padding: var(--mk-space-4); border-bottom: 1px solid var(--mk-line-soft); }
.mk-dialog__body { padding: var(--mk-space-4); max-height: 60dvh; overflow-y: auto; }

.mk-dialog__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--mk-space-2);
  padding: var(--mk-space-3) var(--mk-space-4);
  background: var(--mk-canvas);
  border-top: 1px solid var(--mk-line-soft);
  border-radius: 0 0 var(--mk-radius-lg) var(--mk-radius-lg);
  flex-wrap: wrap;
}

.mk-toasts {
  position: fixed;
  right: var(--mk-space-4);
  bottom: var(--mk-space-4);
  left: var(--mk-space-4);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: var(--mk-space-2);
  pointer-events: none;
}

.mk-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--mk-space-3);
  padding: var(--mk-space-3) var(--mk-space-4);
  font-size: var(--mk-text-sm);
  color: var(--mk-surface);
  background: var(--mk-brand-deep);
  border-left: 3px solid var(--mk-gold);
  border-radius: var(--mk-radius);
  box-shadow: var(--mk-shadow-lg);
  pointer-events: auto;
}

.mk-toast[data-tone="success"] { border-left-color: var(--mk-success); }
.mk-toast[data-tone="danger"]  { border-left-color: var(--mk-danger); }
.mk-toast[data-tone="warning"] { border-left-color: var(--mk-warning); }
.mk-toast__close { margin-left: auto; color: inherit; background: none; border: 0; cursor: pointer; opacity: 0.7; }
.mk-toast__close:hover { opacity: 1; }

@media (min-width: 600px) {
  .mk-toasts { left: auto; width: 360px; }
}

/* --------------------------------------------------------------------------
   Step rail, used by the multi step application form
   -------------------------------------------------------------------------- */

.mk-steps {
  display: flex;
  gap: var(--mk-space-2);
  margin: 0 0 var(--mk-space-5);
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.mk-step {
  flex: 1 1 0;
  min-width: 108px;
  padding: var(--mk-space-3);
  font-size: var(--mk-text-xs);
  text-align: left;
  color: var(--mk-slate);
  background: var(--mk-surface);
  border: 1px solid var(--mk-line);
  border-top: 3px solid var(--mk-line);
  border-radius: var(--mk-radius);
  cursor: pointer;
}

.mk-step:hover { border-color: var(--mk-brand-strong); }
.mk-step__index { display: block; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.mk-step__label { display: block; margin-top: 2px; font-weight: 600; color: var(--mk-heading); line-height: 1.3; }
.mk-step__state { display: block; margin-top: 4px; font-size: 11px; }

.mk-step[data-state="current"] { border-top-color: var(--mk-brand); background: var(--mk-surface); }
.mk-step[data-state="current"] .mk-step__index { color: var(--mk-brand-dark); }
.mk-step[data-state="done"] { border-top-color: var(--mk-heading); }
.mk-step[data-state="done"] .mk-step__state { color: var(--mk-success); }
.mk-step[data-state="error"] { border-top-color: var(--mk-danger); }
.mk-step[data-state="error"] .mk-step__state { color: var(--mk-danger); }

/* --------------------------------------------------------------------------
   Derived value confirmation, used by identity verification
   -------------------------------------------------------------------------- */

.mk-derived {
  display: grid;
  gap: var(--mk-space-3);
  padding: var(--mk-space-4);
  background: rgb(var(--mk-info-rgb) / 6%);
  border: 1px solid rgb(var(--mk-info-rgb) / 24%);
  border-radius: var(--mk-radius);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.mk-derived__item dt {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--mk-slate);
}
.mk-derived__item dd { margin: 2px 0 0; font-size: var(--mk-text-base); font-weight: 600; color: var(--mk-heading); }

/* --------------------------------------------------------------------------
   Eligibility breakdown
   -------------------------------------------------------------------------- */

.mk-assess {
  padding: var(--mk-space-4);
  border: 1px solid var(--mk-line);
  border-left: 3px solid var(--mk-line);
  border-radius: var(--mk-radius);
  background: var(--mk-surface);
}

.mk-assess + .mk-assess { margin-top: var(--mk-space-3); }
.mk-assess[data-outcome="pass"]  { border-left-color: var(--mk-success); }
.mk-assess[data-outcome="refer"] { border-left-color: var(--mk-warning); }
.mk-assess[data-outcome="fail"]  { border-left-color: var(--mk-danger); }

.mk-assess__head { display: flex; align-items: center; gap: var(--mk-space-3); flex-wrap: wrap; }
.mk-assess__title { font-size: var(--mk-text-base); font-weight: 600; color: var(--mk-heading); }
.mk-assess__points { margin-left: auto; font-size: var(--mk-text-xs); font-variant-numeric: tabular-nums; color: var(--mk-slate); }
.mk-assess__detail { margin: var(--mk-space-2) 0 0; font-size: var(--mk-text-sm); }
.mk-assess__evidence { margin: var(--mk-space-2) 0 0; padding-left: var(--mk-space-5); font-size: var(--mk-text-xs); color: var(--mk-slate); }
.mk-assess__evidence li { margin-bottom: 2px; }

/* Score dial */
.mk-score {
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--mk-font-display); font-weight: 700; color: var(--mk-heading);
}
.mk-score__value { font-size: var(--mk-text-2xl); line-height: 1; font-variant-numeric: tabular-nums; }
.mk-score__max { font-size: var(--mk-text-base); color: var(--mk-slate); }

/* --------------------------------------------------------------------------
   Upload dropzone
   -------------------------------------------------------------------------- */

.mk-drop {
  display: block;
  padding: var(--mk-space-5);
  text-align: center;
  background: var(--mk-canvas);
  border: 2px dashed var(--mk-line);
  border-radius: var(--mk-radius-lg);
  cursor: pointer;
  transition: border-color var(--mk-dur) var(--mk-ease), background var(--mk-dur) var(--mk-ease);
}

.mk-drop:hover,
.mk-drop[data-dragging="true"] { border-color: var(--mk-brand-strong); background: rgb(var(--mk-info-rgb) / 6%); }
.mk-drop svg { width: 28px; height: 28px; color: var(--mk-info); }
.mk-drop__title { display: block; margin-top: var(--mk-space-2); font-weight: 600; color: var(--mk-heading); }
.mk-drop__hint { display: block; margin-top: 2px; font-size: var(--mk-text-xs); color: var(--mk-slate); }

/* --------------------------------------------------------------------------
   Assistant dock (RFI 3.1.5)
   A panel docked to the corner for students and applicants. On a phone it
   takes the full width, because a floating panel on a 360px screen is a panel
   nobody can read.
   -------------------------------------------------------------------------- */

.mk-assist-launch {
  position: fixed;
  right: var(--mk-space-4);
  bottom: var(--mk-space-4);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: var(--mk-space-2);
  min-height: 48px;
  padding: 0 var(--mk-space-4);
  font-family: var(--mk-font-body);
  font-size: var(--mk-text-sm);
  font-weight: 600;
  color: var(--mk-surface);
  background: var(--mk-brand-deep);
  border: 0;
  border-radius: var(--mk-radius-pill);
  box-shadow: var(--mk-shadow-lg);
  cursor: pointer;
}

.mk-assist-launch:hover { background: var(--mk-brand-mid); }
.mk-assist-launch svg { width: 20px; height: 20px; }
.mk-assist-launch[hidden] { display: none; }

.mk-assist {
  position: fixed;
  inset: auto var(--mk-space-4) var(--mk-space-4) var(--mk-space-4);
  z-index: 95;
  display: flex;
  flex-direction: column;
  max-height: min(600px, calc(100dvh - 32px));
  background: var(--mk-surface);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius-lg);
  box-shadow: var(--mk-shadow-lg);
  overflow: hidden;
}

.mk-assist[hidden] { display: none; }

.mk-assist__head {
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  padding: var(--mk-space-3) var(--mk-space-4);
  background: var(--mk-brand-deep);
  color: var(--mk-surface);
  flex: 0 0 auto;
}

.mk-assist__title { font-family: var(--mk-font-display); font-size: var(--mk-text-sm); font-weight: 600; }
.mk-assist__sub { font-size: 11px; opacity: 0.75; display: block; }

.mk-assist__close {
  margin-left: auto;
  display: inline-flex;
  padding: 4px;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--mk-radius-sm);
  cursor: pointer;
  opacity: 0.8;
}

.mk-assist__close:hover { opacity: 1; background: rgb(255 255 255 / 12%); }

.mk-assist__log {
  flex: 1 1 auto;
  padding: var(--mk-space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--mk-canvas);
}

.mk-assist__msg { max-width: 88%; margin-bottom: var(--mk-space-3); }
.mk-assist__msg--me { margin-left: auto; }

.mk-assist__bubble {
  padding: var(--mk-space-3);
  font-size: var(--mk-text-sm);
  line-height: 1.55;
  background: var(--mk-surface);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
}

.mk-assist__msg--me .mk-assist__bubble {
  color: var(--mk-surface);
  background: var(--mk-brand-mid);
  border-color: var(--mk-brand-mid);
}

.mk-assist__meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--mk-slate);
}

.mk-assist__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--mk-space-2); }

.mk-assist__chip {
  padding: 5px 10px;
  font-family: var(--mk-font-body);
  font-size: var(--mk-text-xs);
  font-weight: 500;
  text-align: left;
  color: var(--mk-info);
  background: rgb(var(--mk-info-rgb) / 8%);
  border: 1px solid rgb(var(--mk-info-rgb) / 24%);
  border-radius: var(--mk-radius-pill);
  cursor: pointer;
}

.mk-assist__chip:hover { background: rgb(var(--mk-info-rgb) / 16%); }

.mk-assist__foot {
  flex: 0 0 auto;
  display: flex;
  gap: var(--mk-space-2);
  padding: var(--mk-space-3);
  border-top: 1px solid var(--mk-line);
  background: var(--mk-surface);
}

.mk-assist__foot input { min-height: 40px; }
.mk-assist__foot .mk-btn { min-height: 40px; }

@media (min-width: 600px) {
  .mk-assist { inset: auto var(--mk-space-4) var(--mk-space-4) auto; width: 400px; }
}

/* --------------------------------------------------------------------------
   Popover menu, used by the account button in the topbar
   -------------------------------------------------------------------------- */

.mk-menu {
  position: absolute;
  top: calc(var(--mk-topbar-h) - 8px);
  right: var(--mk-space-4);
  z-index: 70;
  min-width: 220px;
  padding: var(--mk-space-2);
  background: var(--mk-surface);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  box-shadow: var(--mk-shadow-lg);
}

.mk-menu[hidden] { display: none; }

.mk-menu__header {
  padding: var(--mk-space-2) var(--mk-space-3) var(--mk-space-3);
  border-bottom: 1px solid var(--mk-line-soft);
  margin-bottom: var(--mk-space-2);
}

.mk-menu__name { font-size: var(--mk-text-sm); font-weight: 600; color: var(--mk-heading); }
.mk-menu__meta { font-size: var(--mk-text-xs); color: var(--mk-slate); word-break: break-all; }

.mk-menu__item {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  width: 100%;
  padding: 9px var(--mk-space-3);
  font-family: inherit;
  font-size: var(--mk-text-sm);
  font-weight: 500;
  text-align: left;
  color: var(--mk-ink);
  background: transparent;
  border: 0;
  border-radius: var(--mk-radius-sm);
  cursor: pointer;
}

.mk-menu__item:hover { background: var(--mk-highlight); border-bottom-color: transparent; }
.mk-menu__item svg { width: 16px; height: 16px; color: var(--mk-slate); }
.mk-menu__item--danger { color: var(--mk-danger); }
.mk-menu__item--danger svg { color: currentColor; }

/* --------------------------------------------------------------------------
   Timeline, used by application status and audit trails
   -------------------------------------------------------------------------- */

.mk-timeline { margin: 0; padding: 0 0 0 var(--mk-space-5); list-style: none; }

.mk-timeline__item {
  position: relative;
  padding: 0 0 var(--mk-space-5);
  border-left: 2px solid var(--mk-line);
  margin-left: 5px;
  padding-left: var(--mk-space-4);
}

.mk-timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }

.mk-timeline__item::before {
  content: "";
  position: absolute;
  top: 4px;
  left: -7px;
  width: 12px;
  height: 12px;
  background: var(--mk-surface);
  border: 2px solid var(--mk-brand-deep);
  border-radius: 50%;
}

.mk-timeline__item[data-current="true"]::before { background: var(--mk-brand); border-color: var(--mk-brand); }
.mk-timeline__title { font-size: var(--mk-text-sm); font-weight: 600; color: var(--mk-heading); }
.mk-timeline__meta { font-size: var(--mk-text-xs); color: var(--mk-slate); }

/* --------------------------------------------------------------------------
   Definition list, used across the Student 360 tabs
   -------------------------------------------------------------------------- */

.mk-dl { display: grid; gap: var(--mk-space-3); grid-template-columns: 1fr; margin: 0; }

.mk-dl__row { display: grid; gap: 2px; }
.mk-dl dt { font-size: var(--mk-text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-slate); }
.mk-dl dd { margin: 0; font-size: var(--mk-text-base); color: var(--mk-ink); }

@media (min-width: 600px) {
  .mk-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-space-4); }
}