/* ═══════════════════════════════════════════════════════════════════════════
   ft-ui.css — the Free Taleem handoff's components (design_handoff_free_taleem).

   The handoff builds its screens from the design system's React components —
   Card, Button, Badge, Select, ProgressBar, Field. This app has no React, so
   those components are restated here as classes, value for value from the
   handoff's _ds_bundle.js, reading ONLY the design system's tokens
   (wwwroot/ds/tokens). No raw hex except where the DS component itself fixes
   one (the primary button's hover text).

   ── Why ft- and not the DS's own .btn / .card ───────────────────────────────
   fe-ds.css already owns .btn, .bar, .status, .board-card … on every FreeEdu
   page, at higher specificity than the DS. Reusing those names would inherit
   the previous design's rules; the ft- prefix keeps the two systems from
   touching while screens move across one at a time.

   ── One token that must NOT be used here: --rule ────────────────────────────
   In the DS --rule is a border SHORTHAND ("1px solid var(--border-default)").
   fe-ds.css redefines it on html[data-fe-site] as a bare COLOUR for its ruled-
   paper backgrounds, so `border-top: var(--rule)` on a FreeEdu page is an
   invalid declaration and draws nothing. Every hairline below is spelled out.

   Fenced on [data-fe-site] like fe-ds.css, so none of it reaches the portal.
   Loaded after fe-ds.css and before the scoped bundle: page .razor.css rules
   still win for layout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sticky top block — the reminder bar + the header (FeLayout #fe-top) ───────
   The block sticks; the header inside it stops sticking on its own (fe-ds.css
   makes .nav sticky at top:0, which inside a sticky parent would only fight it).
   --fe-top-h is the block's measured height, written by fe-interop.js; 114px is
   the desktop height with the bar open, for the moment before the script runs. */
html[data-fe-site] { --fe-top-h: 114px; }
[data-fe-site] .fe-top { position: sticky; top: 0; z-index: 40; }
[data-fe-site] .fe-top .nav { position: relative; top: auto; }

/* ── Page shell ───────────────────────────────────────────────────────────────
   The handoff's <main>: container-max wide, 36px top / 64px bottom. FeLayout's
   .fe-main already pads 22px / 56px, so this adds only the difference. */
[data-fe-site] .ft-page {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 28px) 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font: var(--type-body);
  color: var(--text-primary);
}

/* ── Type roles ──────────────────────────────────────────────────────────── */
[data-fe-site] .ft-eyebrow {
  margin: 0;
  font: var(--type-label);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* Landing-page H1. Every heading states its own letter-spacing (L58). */
[data-fe-site] .ft-display {
  margin: 0;
  font: var(--fw-medium) clamp(28px, 4.5vw, 36px)/1.15 var(--font-display);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
  text-wrap: balance;
}

[data-fe-site] .ft-lead {
  margin: 0;
  font: var(--type-lead);
  color: var(--text-secondary);
  text-wrap: pretty;
}

[data-fe-site] .ft-h3 { margin: 0; font: var(--type-h3); letter-spacing: var(--ls-display); color: var(--text-primary); }
[data-fe-site] .ft-h4 { margin: 0; font: var(--type-h4); letter-spacing: var(--ls-display); color: var(--text-primary); }
[data-fe-site] .ft-h5 { margin: 0; font: var(--type-h5); letter-spacing: var(--ls-display); color: var(--text-primary); }
[data-fe-site] .ft-body-sm { margin: 0; font: var(--type-body-sm); color: var(--text-secondary); }

/* ── Card ─────────────────────────────────────────────────────────────────── */
[data-fe-site] .ft-card {
  min-width: 0;
  box-sizing: border-box;
  padding: var(--card-pad);
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
[data-fe-site] .ft-card--lg { padding: var(--space-7); }
[data-fe-site] .ft-card--tight { padding: var(--card-pad-tight); }
/* :where() keeps this at the fence's own specificity, so a page's layout rule on the same
   element (display:flex on a tile) wins without having to out-specify it. */
[data-fe-site] :where(a.ft-card--interactive) { display: block; text-decoration: none; color: var(--text-primary); }
[data-fe-site] .ft-card--interactive:hover { box-shadow: var(--shadow-elevated); border-color: var(--border-default); }

/* ── Button ───────────────────────────────────────────────────────────────── */
[data-fe-site] .ft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font: 500 13px/1 var(--font-sans);
  letter-spacing: var(--tracking-normal);
  border-radius: var(--radius-md);
  border: var(--border-w) solid transparent;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-control);
}
[data-fe-site] .ft-btn--lg { padding: 11px 18px; font: 500 14px/1 var(--font-sans); gap: 8px; }
[data-fe-site] .ft-btn--sm { padding: 5px 10px; font: 500 12px/1 var(--font-sans); }
[data-fe-site] .ft-btn--block { width: 100%; box-sizing: border-box; }

[data-fe-site] .ft-btn--primary { background: var(--brand-primary); color: var(--brand-dark); font-weight: 600; }
[data-fe-site] .ft-btn--primary:hover,
[data-fe-site] .ft-btn--primary:active { background: var(--brand-primary-strong); color: #fff; }

[data-fe-site] .ft-btn--secondary { background: transparent; color: var(--text-secondary); border-color: var(--border-default); }
[data-fe-site] .ft-btn--secondary:hover { border-color: var(--brand-primary); color: var(--text-primary); }

[data-fe-site] .ft-btn--ghost { background: transparent; color: var(--text-secondary); }
[data-fe-site] .ft-btn--ghost:hover { background: var(--surface-tertiary); color: var(--text-primary); }

/* ── Badge ────────────────────────────────────────────────────────────────── */
[data-fe-site] .ft-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  box-sizing: border-box;
  font: var(--weight-medium) var(--text-2xs)/1 var(--font-sans);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-pill);
  border: var(--border-w) solid var(--tint-neutral-border);
  background: var(--tint-neutral-bg);
  color: var(--tint-neutral-fg);
  white-space: nowrap;
}
[data-fe-site] .ft-badge--dot::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: var(--radius-pill);
  background: currentColor;
}
[data-fe-site] .ft-badge--success { background: var(--tint-success-bg); color: var(--tint-success-fg); border-color: var(--tint-success-border); }
[data-fe-site] .ft-badge--warning { background: var(--tint-warning-bg); color: var(--tint-warning-fg); border-color: var(--tint-warning-border); }
[data-fe-site] .ft-badge--accent { background: var(--tint-accent-bg); color: var(--tint-accent-fg); border-color: var(--tint-accent-border); }

/* ── Progress bar ─────────────────────────────────────────────────────────────
   The fill's width is the one runtime-bound length: markup sets --pct and
   nothing else (the form InlineStyleGuardrailTests permits). */
[data-fe-site] .ft-progress {
  display: flex;
  height: 4px;
  min-width: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-tertiary);
  border: var(--border-w) solid var(--border-default);
  overflow: hidden;
}
[data-fe-site] .ft-progress > i { display: block; width: var(--pct, 0%); background: var(--status-warning); }

/* ── Numbered step marker — the 22px mint disc ────────────────────────────── */
[data-fe-site] .ft-stepnum {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  color: var(--brand-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 11px/1 var(--font-mono);
}

/* ── Board card — Home's "Start with your board" and Notes' step 1 ────────── */
[data-fe-site] .ft-boards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
[data-fe-site] .ft-board {
  appearance: none;
  cursor: pointer;
  text-align: start;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  min-height: 64px;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  border: var(--border-w) solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-primary);
  font: inherit;
  text-decoration: none;
  transition: var(--transition-control);
}
[data-fe-site] .ft-board:hover { border-color: var(--brand-primary); color: var(--text-primary); }
[data-fe-site] .ft-board[aria-pressed="true"] { background: var(--surface-selected); border-color: var(--brand-primary); }
[data-fe-site] .ft-board-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-fe-site] .ft-board-name { font: var(--weight-semibold) 14px/1.3 var(--font-sans); }
[data-fe-site] .ft-board-covers { font: var(--type-caption); line-height: 1.45; color: var(--text-muted); }
[data-fe-site] .ft-board-mark { display: flex; flex: none; color: var(--text-subtle); }
[data-fe-site] .ft-board[aria-pressed="true"] .ft-board-mark { color: var(--brand-on-soft); }

/* ── Field + Select ───────────────────────────────────────────────────────── */
[data-fe-site] .ft-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
[data-fe-site] .ft-label { font: 600 12.5px/1.2 var(--font-sans); color: var(--text-primary); }
[data-fe-site] .ft-select { position: relative; display: block; min-width: 0; }
[data-fe-site] .ft-select select {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 32px 0 12px;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  font: 400 13.5px/1.3 var(--font-sans);
  color: var(--text-primary);
  background: var(--surface-primary);
  border: var(--border-w) solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-control);
}
[data-fe-site] .ft-select select:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--shadow-focus); }
[data-fe-site] .ft-select .ft-icon {
  position: absolute;
  inset-inline-end: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-subtle);
  pointer-events: none;
}

/* ── Logo mark — the handoff's 28px mint tile with the graduation cap ───────
   Ink on mint in BOTH themes: the tile is the brand, not a surface, so its
   colours are the brand tokens rather than anything that flips with the theme. */
[data-fe-site] .ft-logo {
  width: 28px;
  height: 28px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--brand-primary);
  color: var(--brand-dark);
}

/* ── Icon ─────────────────────────────────────────────────────────────────── */
[data-fe-site] .ft-icon { display: block; flex: none; }