/* =============================================================================
   ScillintED_utilities.css — Single-purpose utility layer (Phase 3B Block A.3)
   -----------------------------------------------------------------------------
   Tailwind-lite, no build step. Each class does exactly ONE thing.

   Naming (Janardhan locked in Phase 3A): .u-<concern>-<value>
   Examples: .u-flex, .u-gap-3, .u-text-sm-muted, .u-mb-4, .u-hidden.

   Use these to kill the top recurring inline-style patterns from the audit
   (font-size:10px;color:var(--muted) × 48, margin-bottom:14px × 17, etc.).

   When a one-off styling need appears, prefer:
     1. An existing utility (this file)
     2. A new utility added here (if it'll be used ≥3 places)
     3. A new component variant in components.css (if it's a recurring pattern)
     4. Inline style (LAST resort — review-flag worthy)

   Table of contents:
     1. Layout      .u-flex / .u-grid / .u-flex-1 / .u-items / .u-justify
     2. Spacing     .u-gap / .u-mt / .u-mb / .u-mx-auto / .u-p
     3. Typography  .u-text-* size + color combinations / .u-eyebrow / .u-font-*
     4. Decoration  .u-border-bottom / .u-rounded / .u-shadow
     5. Sizing      .u-w-full / .u-h-full
     6. Visibility  .u-hidden / .u-sr-only / .u-desktop-only / .u-mobile-only
     7. Behavior    .u-truncate / .u-disabled / .u-cursor-pointer
============================================================================= */


/* ── 1. LAYOUT ─────────────────────────────────────────────────────────────── */

.u-flex         { display: flex; }
.u-flex-col     { display: flex; flex-direction: column; }
.u-flex-1       { flex: 1; }
.u-flex-1-min   { flex: 1; min-width: 0; }
.u-flex-shrink-0{ flex-shrink: 0; }
.u-flex-wrap    { flex-wrap: wrap; }

.u-items-center   { align-items: center; }
.u-items-start    { align-items: flex-start; }
.u-items-end      { align-items: flex-end; }
.u-items-baseline { align-items: baseline; }

.u-justify-start    { justify-content: flex-start; }
.u-justify-center   { justify-content: center; }
.u-justify-end      { justify-content: flex-end; }
.u-justify-between  { justify-content: space-between; }

.u-grid    { display: grid; }
.u-grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.u-grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.u-grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

@media (max-width: 900px) {
  .u-grid-3, .u-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .u-grid-2, .u-grid-3, .u-grid-4 { grid-template-columns: 1fr; }
}


/* ── 2. SPACING ────────────────────────────────────────────────────────────── */

.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-gap-5 { gap: var(--space-5); }
.u-gap-6 { gap: var(--space-6); }

.u-mt-1 { margin-top: var(--space-1); } .u-mt-2 { margin-top: var(--space-2); } .u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); } .u-mt-5 { margin-top: var(--space-5); } .u-mt-6 { margin-top: var(--space-6); }
.u-mt-8 { margin-top: var(--space-8); }
.u-mt-auto { margin-top: auto; }

.u-mb-1 { margin-bottom: var(--space-1); } .u-mb-2 { margin-bottom: var(--space-2); } .u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); } .u-mb-5 { margin-bottom: var(--space-5); } .u-mb-6 { margin-bottom: var(--space-6); }
.u-mb-8 { margin-bottom: var(--space-8); }

.u-mx-auto { margin-inline: auto; }
.u-my-0    { margin-block: 0; }

.u-p-3 { padding: var(--space-3); }
.u-p-4 { padding: var(--space-4); }
.u-p-5 { padding: var(--space-5); }
.u-p-6 { padding: var(--space-6); }
.u-px-3 { padding-inline: var(--space-3); }
.u-px-4 { padding-inline: var(--space-4); }
.u-py-2 { padding-block: var(--space-2); }
.u-py-3 { padding-block: var(--space-3); }


/* ── 3. TYPOGRAPHY ─────────────────────────────────────────────────────────── */

/* Pure size — for when you need to mix with arbitrary color */
.u-text-xs   { font-size: var(--fs-xs); }
.u-text-sm   { font-size: var(--fs-sm); }
.u-text-base { font-size: var(--fs-base); }
.u-text-md   { font-size: var(--fs-md); }
.u-text-lg   { font-size: var(--fs-lg); }

/* Pure color */
.u-text-primary    { color: var(--color-text-primary); }
.u-text-secondary  { color: var(--color-text-secondary); }
.u-text-tertiary   { color: var(--color-text-tertiary); }
.u-text-muted      { color: var(--color-text-muted); }
.u-text-on-dark    { color: var(--color-text-on-dark); }
.u-text-on-brand   { color: var(--color-text-on-brand); }
.u-text-link       { color: var(--color-text-link); }

.u-text-success { color: var(--color-success); }
.u-text-warning { color: var(--color-warning); }
.u-text-danger  { color: var(--color-danger); }
.u-text-info    { color: var(--color-info); }

/* Composed — the audit's top 5 repeated inline patterns */
.u-text-xs-muted   { font-size: var(--fs-xs); color: var(--color-text-muted); }  /* was 48× inline */
.u-text-sm-muted   { font-size: var(--fs-sm); color: var(--color-text-muted); }  /* was 41× inline */
.u-text-sm-tertiary{ font-size: var(--fs-sm); color: var(--color-text-tertiary); }
.u-text-sm-strong  { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-primary); }

/* Eyebrow — small uppercase label above headings (was 16× inline) */
.u-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--space-1);
}

/* Weight */
.u-font-normal   { font-weight: 400; }
.u-font-medium   { font-weight: 500; }
.u-font-semibold { font-weight: 600; }
.u-font-bold     { font-weight: 700; }

/* Family */
.u-font-sans     { font-family: var(--font-sans); }
.u-font-display  { font-family: var(--font-display); }
.u-font-mono     { font-family: var(--font-mono); }

/* Alignment */
.u-text-left   { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }

/* Italics for editorial moments (Newsreader italic) */
.u-italic { font-style: italic; }

/* Line height */
.u-leading-tight   { line-height: var(--lh-tight); }
.u-leading-normal  { line-height: var(--lh-normal); }
.u-leading-relaxed { line-height: var(--lh-relaxed); }


/* ── 4. DECORATION ────────────────────────────────────────────────────────── */

.u-border-bottom { border-bottom: 1px solid var(--color-border-subtle); }  /* was 20× inline */
.u-border-top    { border-top:    1px solid var(--color-border-subtle); }
.u-border        { border: 1px solid var(--color-border-default); }
.u-border-none   { border: 0; }

.u-rounded-sm  { border-radius: var(--radius-sm); }
.u-rounded-md  { border-radius: var(--radius-md); }
.u-rounded-lg  { border-radius: var(--radius-lg); }
.u-rounded-pill{ border-radius: var(--radius-pill); }
.u-rounded-full{ border-radius: var(--radius-full); }

.u-shadow-xs { box-shadow: var(--shadow-xs); }
.u-shadow-sm { box-shadow: var(--shadow-sm); }
.u-shadow-md { box-shadow: var(--shadow-md); }
.u-shadow-lg { box-shadow: var(--shadow-lg); }

.u-bg-page       { background: var(--color-bg-page); }
.u-bg-surface    { background: var(--color-bg-surface); }
.u-bg-surface-2  { background: var(--color-bg-surface-2); }
.u-bg-navy       { background: var(--brand-navy); }
.u-bg-coral      { background: var(--brand-coral); }


/* ── 5. SIZING ─────────────────────────────────────────────────────────────── */

.u-w-full { width: 100%; }
.u-h-full { height: 100%; }
.u-min-h-screen { min-height: 100vh; }
.u-max-w-prose  { max-width: 65ch; }


/* ── 6. VISIBILITY ─────────────────────────────────────────────────────────── */

.u-hidden { display: none !important; }

/* Screen-reader only — content readable by assistive tech but visually hidden.
   Use for off-screen labels. WCAG 1.3.1. */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Show only at desktop sizes (≥md, where the sidebar appears) */
.u-desktop-only { display: revert; }
@media (max-width: 899px) { .u-desktop-only { display: none !important; } }

/* Show only at mobile sizes (<md, where bnav is active) */
.u-mobile-only { display: none !important; }
@media (max-width: 899px) { .u-mobile-only { display: revert !important; } }


/* ── 7. BEHAVIOR ───────────────────────────────────────────────────────────── */

.u-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u-disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.u-cursor-pointer { cursor: pointer; }
.u-cursor-default { cursor: default; }

.u-relative { position: relative; }

/* Shared "incomplete indicator → tap to complete" affordance (d552, tester
   feedback: profile % complete pill looked tappable but wasn't). Apply to any
   chip/card/ring that surfaces an incomplete state alongside role="button"
   tabindex="0" onclick + onkeydown="_kbActivate(event)" (config.js). Pair with
   <i class="ph-bold ph-caret-right is-completable__chevron"> where a chevron
   fits the layout; not required when the surface already ends in an arrow/CTA.
   Host components may override the hover treatment (e.g. .gs-hero.is-completable
   in student.html) when the generic tint doesn't fit a bordered card. */
.is-completable {
  cursor: pointer;
  border-radius: var(--radius-md, 10px);
  transition: background-color .15s ease-out, box-shadow .15s ease-out, transform .08s ease-out, border-color .15s ease-out;
}
.is-completable:hover {
  background-color: var(--color-bg-surface-2, rgba(15,24,42,0.03));
}
.is-completable:active {
  transform: translateY(1px);
}
.is-completable:focus-visible {
  outline: 2px solid var(--brand-navy, #1B2A8C);
  outline-offset: 2px;
}
.is-completable__chevron {
  color: var(--color-text-tertiary, var(--muted));
  flex-shrink: 0;
}

/* =============================================================================
   d190 Phase C polish — BEM grid utilities.
   These were referenced by renderPractice() (Phase 3C #3) and assumed to exist
   in Phase 3B foundation, but were never actually defined. Without them the
   Practice hub's KPI hero (3-col), section cards (4-up), and zone wrappers
   render as `display: block` — full-width vertical stacks. Add them now so
   the Phase B layout matches the design intent.

   Naming convention follows the existing BEM canonical pattern from
   components.css (.btn / .btn--primary etc.).
   ----------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-3, 12px); }
.grid--cols-1 { grid-template-columns: 1fr; }
.grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid--cols-5 { grid-template-columns: repeat(5, 1fr); }

/* Phase 3B breakpoint ladder per D6.1: sm 640 / md 900 / lg 1200 / xl 1600.
   At md (≤900): cols-4 → 2x2, cols-3 stays 3 (squeezed).
   At sm (≤640): everything collapses to 1-col. */
@media (max-width: 900px) {
  .grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--cols-2,
  .grid--cols-3,
  .grid--cols-4,
  .grid--cols-5 { grid-template-columns: 1fr; }
}

/* =============================================================================
   END utilities.css
   Next deliverable: component_library.html — visual Storybook reference
============================================================================= */