/**
 * FBoard board-only CSS (tasks 004.03/004.04, shrunk task 014).
 *
 * DaisyUI-native layout (cards, avatars, badges) is the default everywhere —
 * this file holds ONLY the board-specific bits DaisyUI + Tailwind utility
 * classes cannot express inline in the partials:
 * - thread indent guides + nesting (`fboard-children`);
 * - system-row styling (`fboard-row-system`);
 * - guest / internal badge tints (`fboard-badge-*`);
 * - the row-meta / reply-summary 44px touch floors that wrap compact
 *   DaisyUI controls (`fboard-row-meta`, `fboard-reply-summary`) and the
 *   shared `fboard-touch-target` floor itself;
 * - the plain-text pre-wrap body rule (`fboard-row-body`) and the edit-form
 *   disclosure layout (`fboard-edit-form`), the reply disclosure spacing
 *   (`fboard-reply`);
 * - narrow-panel fit (task 036): the author-name wrap (`fboard-author`) and
 *   the open edit disclosure spanning the row header (`fboard-row-actions` /
 *   `fboard-action-edit`, open state only);
 * - attachment container/chip layout DaisyUI's `card` doesn't cover
 *   (`fboard-attachments`, `fboard-attachment-chip`, `fboard-attachment-link`
 *   overflow-wrap, `fboard-composer-file-label`);
 * - the empty-state auto-hide trick (see below);
 * - the permalink target highlight (`fboard-highlight`, task 034.02).
 *
 * Scope convention: every class defined here MUST use the `fboard-` prefix
 * to avoid colliding with host-app or DaisyUI class names. DaisyUI classes
 * (`card`, `avatar`, `badge`, `btn`, `textarea`, `input`, …) and Tailwind
 * utility classes (`flex`, `gap-*`, `space-y-*`, `border-base-300`, …) are
 * used natively in the partials, never re-styled here. Theme-agnostic: tints
 * derive from `currentColor`/DaisyUI theme variables — no hardcoded palette.
 */

/* ---------------------------------------------------------------------------
 * Row meta line — 44px touch floor for the action buttons it wraps
 * ------------------------------------------------------------------------- */

/* Layout itself is Tailwind (`flex flex-wrap items-start gap-3`, inline in
   board-message.hbs) — this rule only supplies the touch-target floor
   Tailwind has no utility for. */
.fboard-row-meta {
  min-height: 44px; /* touch-target floor for the action buttons inside */
}

/* Author name (task 036): a long unbroken name/email wraps anywhere instead of
   overflowing the card in a narrow host panel - same precedent as
   `fboard-attachment-link`. */
.fboard-author {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Row body — plain-text pre-wrap
 * ------------------------------------------------------------------------- */

/* Plain-text body: preserve newlines, wrap long unbroken strings anywhere
   (stronger than Tailwind's `break-words`, which only breaks at word
   boundaries). Duplicated inline as `whitespace-pre-wrap break-words` for a
   same-effect fallback if this file fails to load; this rule is authoritative. */
.fboard-row-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * Children container + indent guides (threaded/tree nesting)
 * ------------------------------------------------------------------------- */

/* One level of nesting = one container; the left border + padding are the
   visual indent guides, tied to the DaisyUI `base-300` theme color. v1: NO
   visual indent cap (parent 004 decision #2) — the tree nests as deep as
   Core's depth cap allows. Mobile-first: a tighter indent below the `sm`
   breakpoint, matching Tailwind's `ml-2 pl-3 sm:ml-4 sm:pl-4`. */
.fboard-children {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-base-300, color-mix(in oklab, currentColor 15%, transparent));
}

@media (min-width: 640px) {
  .fboard-children {
    margin-left: 1rem;
    padding-left: 1rem;
  }
}

/* ---------------------------------------------------------------------------
 * Badges (DaisyUI badge base + fboard- tint)
 * ------------------------------------------------------------------------- */

/* Guest badge: self-declared identity, visually marked as untrusted. */
.fboard-badge-guest {
  color: color-mix(in oklab, currentColor 80%, var(--color-warning, #d97706));
  border-color: color-mix(in oklab, currentColor 60%, var(--color-warning, #d97706));
}

/* Internal badge styling comes from DaisyUI's `badge-warning` (applied in the
   partial); the `fboard-badge-internal` class remains only as a scoped hook
   hosts may target — no rule needed here.

   ---------------------------------------------------------------------------
 * System rows
 * ------------------------------------------------------------------------- */

/* System rows render the body only (no card, no avatar) with distinct,
   announcement-like styling. */
.fboard-row-system {
  font-style: italic;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: color-mix(in oklab, currentColor 5%, transparent);
  border: 1px dashed color-mix(in oklab, currentColor 20%, transparent);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * Touch targets
 * ------------------------------------------------------------------------- */

/* Touch-target floor (44px, UI/UX rules): DaisyUI's compact `btn-xs`/`btn-sm`
   (and even the default `btn`, 40px) sit below the 44x44px minimum. Applied
   alongside the DaisyUI classes on every compact board control (composer
   submit, edit summary + save, delete, attachment remove, back-link) — see
   board-composer.hbs / board-message.hbs / board-thread.hbs / board-attachment.hbs. */
.fboard-touch-target {
  min-height: 2.75rem; /* 44px @ 16px root */
  min-width: 2.75rem;
}

/* The reply disclosure summary doesn't carry the shared `fboard-touch-target`
   class (it needs `inline-flex` + a small icon-label gap too) — its own floor. */
.fboard-reply-summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* ---------------------------------------------------------------------------
 * Reply + edit disclosures
 * ------------------------------------------------------------------------- */

/* Reply disclosure: native <details>, keyboard-navigable, no JS. */
.fboard-reply {
  margin-top: 0.5rem;
}

/* Open edit disclosure (task 036): the actions group sits in an `inline-flex`
   span, which leaves the edit textarea at its intrinsic ~20ch width. While the
   edit <details> is OPEN, the actions group takes the full header row and the
   disclosure grows, so the form gets the card-body width. The closed state is
   untouched (both rules match `[open]` only); the pencil summary and delete
   button keep their `fboard-touch-target` floors. */
.fboard-row-actions:has(.fboard-action-edit[open]) {
  flex-basis: 100%;
  align-items: flex-start;
}

.fboard-row-actions .fboard-action-edit[open] {
  flex: 1 1 auto;
  min-width: 0;
}

/* Edit form inside its <details> disclosure. */
.fboard-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem;
}

/* ---------------------------------------------------------------------------
 * Attachments (task 005.04) — chips + composer file input
 * ------------------------------------------------------------------------- */

/* The chip container inside a message row: stacked chips, each full-width. */
.fboard-attachments {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* One attachment chip: download link + muted size + remove control. Border/
   corner radius are Tailwind utilities inline (`border border-base-300
   rounded-box`, task 014) — this rule only supplies the flex layout +
   padding + touch-target floor DaisyUI/Tailwind utilities don't replace. */
.fboard-attachment-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  min-height: 44px; /* touch-target floor for the compact remove button */
}

/* The download link — filename is the chip's primary content. Font weight is
   the inline `font-medium` utility (task 014); overflow-wrap:anywhere has no
   Tailwind equivalent, so it stays here. */
.fboard-attachment-link {
  overflow-wrap: anywhere;
}

/* Composer file input: DaisyUI file-input + a visible label above it. */
.fboard-composer-file-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
  opacity: 0.9;
}

/* ---------------------------------------------------------------------------
 * Empty state
 * ------------------------------------------------------------------------- */

/* The empty-state card is rendered inside #fboard-thread next to the
   composer. The FIRST post's OOB row insert (`beforeend:#fboard-thread`)
   lands after it, making it stale — it auto-hides as soon as ANY message
   row (an <article>) follows it, and re-appears if the last row is deleted
   (pure CSS, no JS, no handler support). A following composer/locked notice
   is NOT a row, so the message stays visible on a genuinely empty thread. */
.fboard-empty-state:has(~ article) {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Permalink highlight (task 034.02)
 * ------------------------------------------------------------------------- */

/* The row a message permalink points to (board-message.hbs sets the class and
   `data-fboard-highlight`; permalink.js scrolls to and focuses it). A theme
   outline, no layout change. */
.fboard-highlight {
  outline: 2px solid var(--color-primary, currentColor);
  outline-offset: 2px;
}