inputs.css

/*
 * Tailwind v3 input sheet for the teaching catalog.
 *
 * Everything component-like the page uses (cards, chips, buttons, dropdown
 * disclosures, skip link) is hand-rolled here in @layer components on top of
 * the default Tailwind palette — daisyUI was dropped in v5: its
 * pre-built full.min.css cannot be purged (≈300 KB of every theme), its
 * .card{display:flex} broke utility-based visibility toggling, and its CDN
 * delivery was the blocklist/FOUC risk this change removes.
 *
 * Purged by: npx tailwindcss@3 -c tailwind.config.js -i inputs.css
 *               -o public/app.css --minify   (content = catalog.py)
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Visible keyboard focus everywhere (AA non-text contrast). */
  :focus-visible {
    outline: 2px solid #4338ca; /* indigo-700 */
    outline-offset: 2px;
  }

  /* Native <details> summaries act as our disclosure buttons: suppress the
     UA marker (the CSS caret below replaces it). */
  summary {
    cursor: pointer;
    list-style: none;
  }
  summary::-webkit-details-marker {
    display: none;
  }
}

@layer components {
  /* Card surface. `relative` anchors the Branches disclosure; the z bump on
     an open disclosure keeps the list above the following cards (grid items
     are all positioned, so DOM order alone would clip it). */
  .card {
    @apply relative bg-white;
  }
  .card:has(.dd[open]) {
    @apply z-10;
  }

  /* Page-chrome action links (contact): min-height 44px tap target, sober
     outline. The card action grid uses the v8 .btn / .btn-primary pair. */
  .lnk {
    @apply inline-flex min-h-11 items-center justify-center rounded-md
      border border-slate-300 bg-white px-3 text-sm font-medium
      text-slate-700 transition-colors
      hover:border-indigo-700 hover:text-indigo-700;
  }
  /* v8 card action-grid buttons: same 44px min-height as .lnk (ruling 2 —
     tap targets retained), .btn = secondary outline, .btn-primary = solid
     single accent (Stable, BEFORE Latest); used in the 1fr/1fr footer
     grid. v8.2: .btn-disabled is the honest Stable placeholder (v* tag
     exists, releases/ render not confirmed live, develop present) — grey,
     no href, inert. No v* tag (or a dead render with no develop) -> no
     Stable slot at all; a lone button spans the full width. */
  .btn {
    @apply inline-flex min-h-11 items-center justify-center rounded-md
      border border-slate-300 bg-white px-3 text-sm font-medium
      text-slate-700 transition-colors
      hover:border-indigo-700 hover:text-indigo-700;
  }
  .btn-primary {
    @apply border-indigo-700 bg-indigo-700 text-white
      hover:border-indigo-800 hover:bg-indigo-800 hover:text-white;
  }
  /* v8.2 disabled action placeholder (unpublished Stable): deliberately
     recessive (disabled controls are exempt from the text-contrast bar);
     the message lives in the title tooltip. */
  .btn-disabled {
    @apply cursor-default border-slate-200 bg-slate-100 text-slate-500;
  }
  .btn-disabled:hover {
    @apply border-slate-200 bg-slate-100 text-slate-500;
  }

  /* Category segmented control (aria-pressed marks the active one — the JS
     reads state from the attribute, never from class sniffing). */
  .f-btn {
    @apply inline-flex min-h-11 items-center justify-center rounded-md
      border border-slate-300 bg-white px-3 text-sm font-medium
      text-slate-700 transition-colors
      hover:border-indigo-700 hover:text-indigo-700;
  }
  .f-btn[aria-pressed="true"] {
    @apply border-indigo-700 bg-indigo-700 text-white
      hover:border-indigo-800 hover:bg-indigo-800 hover:text-white;
  }
  /* v6.3: the base focus ring is #4338ca — exactly indigo-700, i.e. the
     pressed ground — so it vanishes on the active category button. A
     white ring drawn INSIDE the button (negative offset) keeps AA
     non-text contrast against both indigo-700 and indigo-800 (hover)
     and is independent of the surrounding panel colour. */
  .f-btn[aria-pressed="true"]:focus-visible {
    outline-color: #fff;
    outline-offset: -2px;
  }

  /* Sober status chips: dark text on light tinted ground (AA). */
  .chip {
    @apply inline-flex items-center rounded-full border px-2 py-0.5
      text-[13px] font-medium;
  }
  .chip-active {
    @apply border-emerald-200 bg-emerald-50 text-emerald-800;
  }
  .chip-partial {
    @apply border-amber-200 bg-amber-50 text-amber-800;
  }
  .chip-stub {
    @apply border-sky-200 bg-sky-50 text-sky-800;
  }
  .chip-neutral {
    @apply border-slate-300 bg-slate-100 text-slate-600;
  }
  /* Muted-status pastille (frozen/duplicate): the local de-emphasis that
     replaces the old card-level opacity-60 (which failed AA on the card
     text). slate-600 on slate-100 stays AA. */
  .chip-muted {
    @apply border-slate-300 bg-slate-100 text-slate-600;
  }
  .chip-topic {
    @apply border-slate-200 bg-slate-50 font-mono text-slate-600;
  }
  /* v8 outline variant: status chips with no tonal mapping (the meta row
     keeps the tonal pastille when one exists, outline otherwise). */
  .chip-outline {
    @apply border-slate-300 bg-white text-slate-600;
  }
  /* v8 conditional footer chips: zero noise — rendered only when their
     condition holds. Later in the layer, so they override the .chip base
     padding/size at equal specificity. */
  .chip-new {
    @apply border-indigo-200 bg-white px-1.5 py-0 text-[11px]
      text-indigo-700;
  }
  .chip-pending {
    @apply border-amber-200 bg-white px-1.5 py-0 text-[11px]
      text-amber-800;
  }
  /* Topic pills are filter toggles (spec v6): hover affordance on the
     unpressed ones only (the pressed look must not flicker on hover).
     Without JS the buttons do nothing but they still read as labels —
     progressive enhancement, see the catalog.py docstring. */
  button.chip-topic {
    cursor: pointer;
    @apply min-h-6; /* v8.2: 24px minimum target (pills row gap >= 6px) */
  }
  button.chip-topic:not(.chip-pill-active):hover {
    @apply border-indigo-700 text-indigo-700;
  }
  /* Pressed pill (v6.2 item 3): explicit visible background on the
     toggle's active state — strengthened from indigo-50/200 to
     indigo-100/300 because the cards are now pastel-tinted (item 7) and
     a 50-tint pressed pill blended into 50-tint card grounds.
     indigo-800 on indigo-100 stays AA (>=7:1). Same-specificity rule
     placed AFTER .chip-topic so the tint wins on the shared properties.
     (Name note: .chip-active is already taken by the emerald STATUS
     chip — the pressed pill gets its own class, no collision.) */
  .chip-pill-active {
    @apply border-indigo-300 bg-indigo-100 font-mono text-indigo-800;
  }
  /* Removable "Filtres actifs" × chips and the "Tout effacer" action:
     same chip geometry, button affordance. */
  .chip-filter-x {
    @apply cursor-pointer border-slate-300 bg-white font-mono text-slate-700
      hover:border-indigo-700 hover:text-indigo-700;
  }
  /* Grouping headers (spec v7 item 4): sober band above the first visible
     card of each group, inserted by the JS (which also adds the
     col-span-full utility so the band spans the grid). slate-900 on
     slate-50 with a slate-200 border — AA+, no accent competition with
     the category chips. */
  .group-h {
    @apply mt-2 rounded-md border border-slate-200 bg-slate-50 px-3
      py-2 text-sm font-semibold uppercase tracking-wide text-slate-900;
  }

  /* <details>-based dropdown (card Branches, filter Thèmes): native
     disclosure, works with JS blocked. Width is content-driven (fluid,
     no fixed w-56/w-64). */
  .dd {
    @apply relative inline-block;
  }
  .dd-list {
    @apply absolute left-0 top-full z-30 mt-1 min-w-full rounded-md
      border border-slate-200 bg-white shadow-lg;
  }
  /* v8 Branches disclosure: full-width in the footer card column (after
     .dd so it wins on equal specificity) with a subdued text-link +
     trailing chevron summary (.chev keeps its fixed reserved track). */
  .dd-full {
    @apply block w-full;
  }
  .dd-link {
    @apply flex min-h-11 w-full items-center justify-between bg-transparent
      px-0 text-left text-sm font-medium text-slate-600
      transition-colors hover:text-indigo-700;
  }

  /* Caret on disclosure summaries (CSS-drawn, no icon font/emoji).
     v6.2 item 4 — FIXED RESERVED TRACK: the 8px glyph carries symmetric
     3px horizontal margins, so it occupies a constant 14px (w-3.5
     class) slot; the rotated glyph's bounding box (~11.3px diagonal)
     stays inside the track in BOTH rotation states. The summary's
     rendered width is therefore rotation-invariant — opening Branches
     never changes the footer row width and never re-wraps the line. */
  .chev::after {
    content: "";
    @apply inline-block h-2 w-2 border-b-2 border-r-2 border-slate-500;
    margin: 0 3px 0 0.5rem; /* 3px right / 8px left, constant in all states */
    transform: rotate(45deg);
  }
  details[open] > .chev::after {
    transform: rotate(-135deg);
  }

  /* Skip link: off-canvas until focused. */
  .skip-link {
    @apply absolute left-3 top-3 z-50 rounded-md bg-indigo-700 px-3 py-2
      text-sm font-medium text-white;
    transform: translateY(-250%);
  }
  .skip-link:focus {
    transform: translateY(0);
  }
}

/* Respect reduced-motion preferences (carets, hover transitions). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}