/* ============================================================
   THREDLY — Brand component layer  (Established May 2026)
   Component-level brand treatments ONLY — all design tokens
   (palette, type, geometry, elevation) live in tokens.css.
   Load order: tokens.css → theme-dark.css → brand.css.
     · Solid thread-orange eyebrow pills
     · Serif display metrics fixes
     · Mono "system/data" voice for codes & metadata
     · Shared empty-state surface
   ============================================================ */

/* ============================================================
   Eyebrow pill — the consistent brand device.
   Solid thread pill, IBM Plex Mono, uppercase, white text.
   Applied to the product's page/section eyebrows. !important so
   it wins over the runtime-injected component <style> tags.
   ============================================================ */
.au-kicker, .au-eyebrow, .bl-sum-eyebrow, .tp-eyebrow,
.greet-eyebrow, .ws-crumb, .ob-side-eyebrow {
  display: inline-block !important;
  font-family: var(--mono) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: var(--plum) !important;
  border-radius: 999px !important;
  padding: 5px 13px !important;
  line-height: 1.25 !important;
  opacity: 1 !important;
  width: auto !important;
}
.tp-eyebrow svg, .au-kicker svg, .greet-eyebrow svg { color: #fff !important; vertical-align: middle !important; position: relative !important; top: -1px !important; }

/* Course-code / data eyebrows stay mono thread TEXT (not a pill) */
.sv-eyebrow { font-family: var(--mono) !important; letter-spacing: 0.1em !important; }

/* ============================================================
   Warm up the hardcoded purple text that sits on the (now warm
   ink) dark brand panels.
   ============================================================ */
.au-side-sub, .ob-side-sub { color: #CABAA6 !important; }
.au-side-foot, .ob-side-foot { color: #9C8D7B !important; }
.bl-next-lbl { color: #DAC4AB !important; }
.bl-next-due { color: #C9B9A4 !important; }
.ob-side-title, .au-side-title { color: #fff !important; }

/* Playfair Display has taller metrics than the previous grotesk — relax the
   tight heading line-heights so multi-line titles don't collide with copy. */
.au-title, .au-side-title, .ob-side-title, .ob-h1, .ob-done-h,
.ws-title, .greet, .bl-sum-plan, .panel-title, .modal-title,
.ci-title, .sv-title, .set-title, .nc-title {
  line-height: 1.18 !important;
}
/* Playfair wraps wider than the old grotesk — let these headlines use their
   full column width instead of the grotesk-tuned ch caps, and give following
   copy clearance so descenders never collide. */
.au-side-title { max-width: none !important; line-height: 1.2 !important; }
.au-side-sub { margin-top: 16px !important; }
.ob-side-title { max-width: none !important; }

/* Page titles that sit in a width-constrained flex header (a right-side action
   button steals width) wrap to 2 lines; the serif's metrics then overflow the
   box onto the description. Size them to sit comfortably and wrap cleanly. */
.ci-title, .et-title, .page-title { font-size: 26px !important; line-height: 1.2 !important; }

/* ============================================================
   Follow-up brand passes (1, 3, 6)
   ============================================================ */
/* 1 · "Thredly" the proper noun renders in thread orange in copy */
.tw { color: var(--plum); }

/* ============================================================
   Standard empty-state panel — the shared "nothing here yet" surface.
   Soft top-to-bottom paper→parchment gradient, hairline border, soft
   shadow. Add class .empty-surface to any empty-state panel so the look
   stays consistent app-wide (radius/padding stay with the element).
   !important so it holds over runtime-injected component <style> tags.
   ============================================================ */
.empty-surface {
  background: linear-gradient(180deg, var(--paper), var(--surface)) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ============================================================
   Buttons — the canonical app-wide trio. Previously re-declared in
   five style modules with drifting metrics; this is now the single
   definition. Size variants (.lg / .sm) and scoped tweaks stay with
   their pages.
   ============================================================ */
.btn-primary { display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: #fff; border: none; border-radius: var(--r-sm); padding: 10px 16px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background .15s, transform .12s; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { background: var(--border-2); color: #fff; box-shadow: none; cursor: not-allowed; }
a.btn-primary { text-decoration: none; }
.btn-soft { display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--border); color: var(--text); border-radius: var(--r-sm); padding: 10px 15px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s; }
.btn-soft:hover { background: var(--surface-2); border-color: var(--border-2); }
.btn-soft.sm { padding: 7px 12px; font-size: 13px; }
.btn-ghost { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid transparent; color: var(--muted); border-radius: var(--r-sm); padding: 10px 15px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background .14s, color .14s; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-ghost.danger:hover { background: #fbecec; color: #9e2a2b; }

/* ============================================================
   Standard ERROR surface — the shared "something went wrong" panel.
   Same paper→parchment construction as .empty-surface but with an
   error-tinted hairline + a soft red wash. Pair with: an --error-bg
   icon disc, one plain-language line of copy, and a single Retry
   action. Calm, never alarmist — errors are recoverable here.
   ============================================================ */
.error-surface {
  background: linear-gradient(180deg, var(--paper), var(--error-bg)) !important;
  border: 1px solid color-mix(in srgb, var(--error) 32%, var(--border)) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ============================================================
   Standard LOADING skeletons — shimmer placeholders while a
   section resolves. Build the section's silhouette from .skel
   primitives (set width/height per use); they read as quiet
   cream bars on paper. Static under reduced-motion.
   · .skel        — base bar (give it width/height)
   · .skel-text   — a line of copy (0.85em tall)
   · .skel-disc   — avatar / icon circle
   ============================================================ */
.skel, .skel-text, .skel-disc {
  position: relative; overflow: hidden;
  background: var(--surface-2);
  border-radius: 7px;
  color: transparent !important; user-select: none; pointer-events: none;
}
.skel-text { height: 0.85em; }
.skel-disc { border-radius: 50%; }
.skel::after, .skel-text::after, .skel-disc::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 32%, color-mix(in srgb, var(--paper) 65%, transparent) 50%, transparent 68%);
  background-size: 220% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .skel::after, .skel-text::after, .skel-disc::after { animation: skel-sheen 1.5s ease-in-out infinite; }
}
@keyframes skel-sheen { from { background-position: 130% 0; } to { background-position: -90% 0; } }

/* 3 · Course codes + metadata → IBM Plex Mono (the "system/data" voice) */
.ccode, .mc-code, .au-fc-code, .ob-preview-code, .pv-cb-code, .wsm-slug,
.et-embed-code, .citem-meta, .crow-meta, .wsm-row-meta, .inv-meta, .cmeta,
.ob-tpl-meta, .bl-ustat-meta, .au-fc-meta, .crow-code, .mc-meta {
  font-family: var(--mono) !important;
}

/* 6 · Larger, more readable body copy (brand: DM Sans, ~1.0625rem, loose leading) */
.au-sub, .au-side-sub, .ws-desc, .greet-sub, .ob-lead, .ob-done-sub,
.ci-desc, .page-sub, .et-sub, .sv-lead, .bl-usage-sub, .modal-sub, .ac-side-sub {
  font-size: 1.0625rem !important;
  line-height: 1.65 !important;
}