/* =========================================================================
   QR TOASTER — Components
   -------------------------------------------------------------------------
   Lives on top of colors_and_type.css. Every selector uses tokens only,
   never raw hex. Class prefix: .qrt-*  (qr-toaster)
   ========================================================================= */

/* ------- Reset bits ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* =======================================================================
   APP CHROME
   ======================================================================= */

.qrt-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(31, 28, 22, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-line);
  height: var(--nav-height);
}
.qrt-nav__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.qrt-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-fg-strong);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}
.qrt-nav__brand img {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  filter: drop-shadow(0 0 12px rgba(245,176,74,0.25));
}
.qrt-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}
.qrt-nav__link {
  color: var(--color-fg-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  position: relative;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.qrt-nav__link:hover {
  color: var(--color-fg-strong);
  background: var(--color-bg-hover);
  text-decoration: none;
}
.qrt-nav__link[aria-current="page"] {
  color: var(--color-fg-strong);
  background: var(--color-accent-faint);
}
.qrt-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: -2px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px 2px 0 0;
}

.qrt-nav__burger {
  display: none;
  width: 40px; height: 40px;
  margin-left: auto;
  border-radius: var(--radius-md);
  color: var(--color-fg);
  align-items: center;
  justify-content: center;
}
.qrt-nav__burger:hover { background: var(--color-bg-hover); }

@media (max-width: 760px) {
  .qrt-nav__links { display: none; }
  .qrt-nav__burger { display: inline-flex; }
}

/* ----- Mobile drawer ---------------------------------------------------- */
.qrt-drawer__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out);
  z-index: 40;
}
.qrt-drawer__overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.qrt-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 88vw);
  background: var(--color-bg-panel);
  border-left: 1px solid var(--color-line);
  box-shadow: var(--shadow-pop);
  z-index: 50;
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-out);
  display: flex;
  flex-direction: column;
  visibility: hidden;
}
.qrt-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}
.qrt-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-line);
  min-height: var(--nav-height);
}
.qrt-drawer__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qrt-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  color: var(--color-fg);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  text-decoration: none;
  min-height: 48px;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.qrt-drawer__link:hover {
  background: var(--color-bg-hover);
  text-decoration: none;
  color: var(--color-fg-strong);
}
.qrt-drawer__link[aria-current="page"] {
  background: var(--color-accent-faint);
  color: var(--color-accent);
}
.qrt-drawer__footer {
  border-top: 1px solid var(--color-line);
  padding: var(--space-3) var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-fg-faint);
}
.qrt-drawer__footer a {
  color: var(--color-fg-muted);
}
.qrt-drawer__footer a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

/* =======================================================================
   PANELS — the core layout primitive (Content / Appearance / Output)
   ======================================================================= */

.qrt-panel {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.qrt-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-line);
  background: linear-gradient(180deg,
              rgba(255,255,255,0.02) 0%,
              rgba(255,255,255,0) 100%);
}
.qrt-panel__title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-fg-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.qrt-panel__title::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent-ring);
}
.qrt-panel__body { padding: var(--space-5); }
.qrt-panel__footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-line);
  background: var(--color-bg-sunken);
}

.qrt-grid-3 {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 1100px) {
  .qrt-grid-3 { grid-template-columns: 5fr 3fr 4fr; }
}

/* =======================================================================
   FIELDS — the workhorse. Floating label option for "spice".
   ======================================================================= */

.qrt-field { display: flex; flex-direction: column; gap: var(--space-2); }
/* Spacing between fields is owned by the parent (.qrt-stack for vertical,
   `gap` for grids) — fields themselves stay margin-free so they align
   cleanly in any layout. */

.qrt-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-fg);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.qrt-label__hint {
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  font-weight: var(--weight-regular);
}
.qrt-label__required {
  color: var(--color-accent);
  font-weight: var(--weight-bold);
}
.qrt-help {
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  line-height: var(--leading-normal);
}
.qrt-help--error { color: var(--color-state-danger); }

/* ----- Input core ------------------------------------------------------- */
.qrt-input,
.qrt-textarea,
.qrt-select {
  width: 100%;
  background: var(--color-bg-sunken);
  color: var(--color-fg-strong);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: var(--text-base);  /* >=16px so mobile won't zoom */
  line-height: var(--leading-snug);
  box-shadow: var(--shadow-inset);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
  min-height: 44px;   /* mobile hit target */
}
.qrt-input::placeholder,
.qrt-textarea::placeholder {
  color: var(--color-fg-faint);
}
.qrt-input:hover,
.qrt-textarea:hover,
.qrt-select:hover {
  border-color: var(--color-line-strong);
}
.qrt-input:focus,
.qrt-textarea:focus,
.qrt-select:focus {
  outline: 0;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus), var(--shadow-inset);
  background: var(--color-bg-sunken);
}
.qrt-input:disabled,
.qrt-textarea:disabled,
.qrt-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.qrt-input[aria-invalid="true"],
.qrt-textarea[aria-invalid="true"],
.qrt-select[aria-invalid="true"] {
  border-color: var(--color-state-danger);
  box-shadow: 0 0 0 3px rgba(255,126,107,0.25), var(--shadow-inset);
}
.qrt-textarea { resize: vertical; min-height: 96px; padding: 12px; }

/* ----- Input affordances (icon + suffix) -------------------------------- */
.qrt-input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.qrt-input-wrap--icon .qrt-input { padding-left: 38px; }
.qrt-input-wrap__icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--color-fg-muted);
  pointer-events: none;
  display: inline-flex;
}
.qrt-input-wrap--suffix .qrt-input { padding-right: 44px; }
.qrt-input-wrap__suffix {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  color: var(--color-fg-muted);
  background: transparent;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.qrt-input-wrap__suffix:hover {
  background: var(--color-bg-hover);
  color: var(--color-fg-strong);
}

/* ----- Custom select ---------------------------------------------------- */
.qrt-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-fg-muted) 50%),
    linear-gradient(135deg, var(--color-fg-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* ----- Color input ------------------------------------------------------ */
.qrt-color {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg-sunken);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 6px 10px 6px 6px;
  cursor: pointer;
  min-height: 44px;
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.qrt-color:hover { border-color: var(--color-line-strong); }
.qrt-color:focus-within {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}
.qrt-color__swatch {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.08);
  background-image:
    linear-gradient(45deg, #444 25%, transparent 25%),
    linear-gradient(-45deg, #444 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #444 75%),
    linear-gradient(-45deg, transparent 75%, #444 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.qrt-color__swatch::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--swatch, #000);
}
.qrt-color__value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-fg);
  letter-spacing: var(--tracking-wide);
}
.qrt-color input[type="color"] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px; height: 1px;
}

/* ----- Checkbox & Radio (custom) ---------------------------------------- */
.qrt-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
  padding: 6px 0;
  min-height: 32px;
}
.qrt-check input[type="checkbox"],
.qrt-check input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--color-bg-sunken);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.qrt-check input[type="radio"] { border-radius: 50%; }
.qrt-check:hover input { border-color: var(--color-fg-muted); }
.qrt-check input:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.qrt-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid var(--color-accent-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.qrt-check input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--color-accent-ink);
}
.qrt-check__label {
  font-size: var(--text-sm);
  color: var(--color-fg);
  line-height: 1.4;
}
.qrt-check__hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  margin-top: 2px;
}

/* ----- Toggle (switch) -------------------------------------------------- */
.qrt-toggle { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; min-height: 32px; }
.qrt-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.qrt-toggle__track {
  width: 40px; height: 24px;
  background: var(--color-line-strong);
  border-radius: var(--radius-pill);
  position: relative;
  transition: background var(--duration-normal) var(--ease-out);
  flex-shrink: 0;
}
.qrt-toggle__track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: var(--color-fg-strong);
  border-radius: 50%;
  transition: transform var(--duration-normal) var(--ease-out);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.qrt-toggle input:checked + .qrt-toggle__track { background: var(--color-accent); }
.qrt-toggle input:checked + .qrt-toggle__track::after {
  transform: translateX(16px);
  background: var(--color-accent-ink);
}
.qrt-toggle input:focus-visible + .qrt-toggle__track {
  box-shadow: var(--shadow-focus);
}

/* ----- Segmented control (radio group) ---------------------------------- */
.qrt-segmented {
  display: inline-flex;
  background: var(--color-bg-sunken);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
  width: 100%;
}
.qrt-segmented__opt {
  flex: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-fg-muted);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
  min-height: 36px;
}
.qrt-segmented__opt input { position: absolute; opacity: 0; pointer-events: none; }
.qrt-segmented__opt:hover { color: var(--color-fg); }
.qrt-segmented__opt:has(input:checked) {
  background: var(--color-bg-raised);
  color: var(--color-fg-strong);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--color-line-strong);
}

/* ----- Range slider ----------------------------------------------------- */
.qrt-range {
  width: 100%;
  height: 28px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.qrt-range::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(to right,
              var(--color-accent) 0% var(--qrt-range-fill, 50%),
              var(--color-line-strong) var(--qrt-range-fill, 50%) 100%);
  border-radius: var(--radius-pill);
}
.qrt-range::-moz-range-track {
  height: 6px;
  background: var(--color-line-strong);
  border-radius: var(--radius-pill);
}
.qrt-range::-moz-range-progress {
  height: 6px;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}
.qrt-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-fg-strong);
  border: 4px solid var(--color-accent);
  margin-top: -7px;
  cursor: grab;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: transform var(--duration-fast) var(--ease-out);
}
.qrt-range::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-fg-strong);
  border: 4px solid var(--color-accent);
  cursor: grab;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.qrt-range:active::-webkit-slider-thumb { transform: scale(1.1); cursor: grabbing; }
.qrt-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px var(--color-accent-ring);
}

/* =======================================================================
   BUTTONS
   ======================================================================= */

.qrt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  background: var(--color-bg-raised);
  color: var(--color-fg-strong);
  min-height: 40px;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-instant) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.qrt-btn:hover { background: var(--color-bg-hover); }
.qrt-btn:active { transform: translateY(1px); }
.qrt-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Primary — toast amber */
.qrt-btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset,
              0 -1px 0 rgba(0,0,0,0.15) inset,
              0 6px 16px rgba(245,176,74,0.25);
}
.qrt-btn--primary:hover { background: var(--color-accent-hover); }
.qrt-btn--primary:active { background: var(--color-accent-press); }

/* Secondary — outline */
.qrt-btn--secondary {
  background: transparent;
  border-color: var(--color-line-strong);
  color: var(--color-fg-strong);
}
.qrt-btn--secondary:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-fg-muted);
}

/* Ghost — bare */
.qrt-btn--ghost {
  background: transparent;
  color: var(--color-fg-muted);
}
.qrt-btn--ghost:hover { background: var(--color-bg-hover); color: var(--color-fg-strong); }

/* Danger */
.qrt-btn--danger {
  background: var(--color-state-danger-bg);
  color: var(--color-state-danger);
  border-color: rgba(255,126,107,0.3);
}
.qrt-btn--danger:hover { background: rgba(255,126,107,0.2); }

/* Sizes */
.qrt-btn--sm { padding: 6px 10px; min-height: 32px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.qrt-btn--lg { padding: 14px 20px; min-height: 48px; font-size: var(--text-base); }
.qrt-btn--block { width: 100%; }

.qrt-btn--icon { padding: 8px; width: 36px; height: 36px; min-height: 36px; }

/* =======================================================================
   DISCLOSURE — <details>
   ======================================================================= */

.qrt-disclosure {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg-sunken);
  overflow: hidden;
}
.qrt-disclosure > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-fg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 40px;
  transition: background var(--duration-fast) var(--ease-out);
}
.qrt-disclosure > summary:hover { background: var(--color-bg-hover); }
.qrt-disclosure > summary::-webkit-details-marker { display: none; }
.qrt-disclosure > summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--color-fg-muted);
  border-bottom: 1.5px solid var(--color-fg-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--duration-fast) var(--ease-out);
}
.qrt-disclosure[open] > summary::after { transform: rotate(-135deg) translateY(0); }
.qrt-disclosure__body {
  padding: var(--space-4);
  border-top: 1px solid var(--color-line);
  background: var(--color-bg-panel);
}

/* =======================================================================
   BADGE / KBD / TAG
   ======================================================================= */

.qrt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-pill);
  background: var(--color-accent-faint);
  color: var(--color-accent);
  border: 1px solid rgba(245,176,74,0.25);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.qrt-badge--info   { background: var(--color-state-info-bg); color: var(--color-state-info); border-color: rgba(111,182,255,0.25); }
.qrt-badge--ok     { background: var(--color-state-ok-bg); color: var(--color-state-ok); border-color: rgba(138,217,122,0.25); }
.qrt-badge--warn   { background: var(--color-state-warn-bg); color: var(--color-state-warn); border-color: rgba(245,176,74,0.25); }
.qrt-badge--danger { background: var(--color-state-danger-bg); color: var(--color-state-danger); border-color: rgba(255,126,107,0.25); }
.qrt-badge--muted  { background: var(--color-bg-raised); color: var(--color-fg-muted); border-color: var(--color-line); }

.qrt-kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px 6px;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-line-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  color: var(--color-fg);
  line-height: 1.2;
}

/* =======================================================================
   PROSE — long-form article styles for the educational sections
   ======================================================================= */

.qrt-prose {
  max-width: var(--container-prose);
  color: var(--color-fg);
  line-height: var(--leading-loose);
}
.qrt-prose > * + * { margin-top: var(--space-4); }
.qrt-prose h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-10);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line-faint);
}
.qrt-prose h3 { font-size: var(--text-lg); margin-top: var(--space-8); }
.qrt-prose ul, .qrt-prose ol {
  padding-left: var(--space-6);
  margin: 0;
}
.qrt-prose li + li { margin-top: 6px; }
.qrt-prose li::marker { color: var(--color-toast-300); }
.qrt-prose strong { color: var(--color-fg-strong); font-weight: var(--weight-semibold); }
.qrt-prose pre { margin: var(--space-2) 0; }

/* =======================================================================
   UTILITIES
   ======================================================================= */

.qrt-stack > * + * { margin-top: var(--qrt-stack-gap, var(--space-4)); }
.qrt-row { display: flex; gap: var(--space-3); align-items: center; }
.qrt-row--between { justify-content: space-between; }
.qrt-row--wrap { flex-wrap: wrap; }
.qrt-cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.qrt-muted { color: var(--color-fg-muted); }
.qrt-strong { color: var(--color-fg-strong); }
.qrt-mono { font-family: var(--font-mono); }
.qrt-caps {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-fg-muted);
}

.qrt-divider {
  height: 1px;
  background: var(--color-line);
  margin: var(--space-4) 0;
}

/* "Toasted" highlight band — sparingly used decorative gradient */
.qrt-toast-glow {
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(245,176,74,0.18), transparent 70%),
    var(--color-bg-panel);
}