/* ------------------------------------------------------------------------
   NemarQ Board — Block 21 UI/UX parity + RTL polish (presentation only).

   Purely presentational: it changes no governance behaviour, guard, or access
   rule. Rules use CSS LOGICAL properties (inline-start/end, margin-inline-*) so
   they are correct in BOTH LTR and RTL without physical left/right, plus a few
   explicit [dir="rtl"] guards for the handful of components that need mirroring.
   Loaded globally but every selector is scoped to a board-specific class, so it
   never touches the rest of the portal.
   ------------------------------------------------------------------------ */

/* Accessible keyboard focus — AA-visible ring on the brand accent. Applies to
   interactive board controls; focus-visible keeps it keyboard-only (no mouse
   focus ring), so it is polish, not a behavioural change. */
.pp-soft-card:focus-visible,
.board-tile:focus-visible,
.board-badge:focus-visible {
    outline: 2px solid var(--nemarq-cyan, #19C6E6);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Landing tiles: consistent density + a subtle, reduced-motion-safe hover lift.
   The board landing (index.html) uses .pp-soft-card as tiles; this only refines
   presentation. */
a.pp-soft-card { transition: transform .12s ease, box-shadow .12s ease; }
a.pp-soft-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(10, 22, 40, .08);
}
@media (prefers-reduced-motion: reduce) {
    a.pp-soft-card { transition: none; }
    a.pp-soft-card:hover { transform: none; }
}

/* Standardised posture badges used across the module (advisory AI, derived,
   redacted derivative, legal hold, examiner read-only, LIVE). Institution-neutral
   colours from the brand palette. These are opt-in utility classes; existing
   inline badges keep working, so adopting them is presentation-only. */
.board-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 600;
    padding: .12rem .5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.4;
}
.board-badge--advisory { background: #eef6f8; color: #0A1628; border-color: #19C6E6; }
.board-badge--derived  { background: #f4f6f9; color: #55606e; border-color: #cdd6e0; }
.board-badge--redacted { background: #fff4f4; color: #8a1f1f; border-color: #e3a6a6; }
.board-badge--hold     { background: #fff8e6; color: #7a5b00; border-color: #e5c869; }
.board-badge--examiner { background: #f0f0f5; color: #3a3a52; border-color: #b9b9d0; }
.board-badge--live     { background: #eafaf1; color: #0d6b3f; border-color: #38c07f; }

/* Consistent empty-state block for "nothing here yet" panels. */
.board-empty {
    text-align: center;
    color: #7a828c;
    padding: 1.5rem 1rem;
    border: 1px dashed #d5dbe2;
    border-radius: 10px;
}
.board-empty .bi { font-size: 1.4rem; opacity: .6; }

/* Breadcrumb spacing that follows the writing direction (logical margins). */
.board-breadcrumb { margin-block-end: .75rem; font-size: .85rem; }
.board-breadcrumb .sep { margin-inline: .35rem; opacity: .5; }

/* RTL mirroring for the few directional board components. Timelines, the agenda
   follow-along rail and the decision-trail lead border sit on the INLINE-START
   edge; using a logical border keeps them on the correct side in both directions,
   and the guard flips any leftover physical borders. */
.board-lead-border { border-inline-start: 3px solid var(--nemarq-cyan, #19C6E6); padding-inline-start: .75rem; }
[dir="rtl"] .board-timeline__rail { left: auto; right: 0; }
[dir="rtl"] .board-heatmap__label { text-align: right; }

/* Directional chevrons (next/prev pack navigation, follow-along) must point the
   right way in RTL. Flip only the explicitly-marked directional icons, never all
   icons (status glyphs must not mirror). */
[dir="rtl"] .board-dir-icon { transform: scaleX(-1); }

/* Block E.1 — colour-coded minutes change view (compute_diff blocks). Insertions
   and deletions are board-tinted; deletions are struck through. The gutter and the
   lead accent sit on the INLINE-START edge (logical properties) so the view mirrors
   correctly in RTL. Monospace so line-level changes line up. */
.board-diff {
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    line-height: 1.5;
}
.board-diff__line {
    display: flex;
    gap: .4rem;
    padding: .1rem .6rem;
    border-inline-start: 3px solid transparent;
    white-space: pre-wrap;
    word-break: break-word;
}
.board-diff__line .bi { flex: 0 0 auto; opacity: .8; }
.board-diff__gutter { display: inline-block; inline-size: 1rem; flex: 0 0 auto; }
.board-diff__text { flex: 1 1 auto; }
.board-diff__insert {
    background: #eafaf1;
    color: #0d6b3f;
    border-inline-start-color: #38c07f;
}
.board-diff__delete {
    background: #fff4f4;
    color: #8a1f1f;
    border-inline-start-color: #e3a6a6;
}
.board-diff__delete .board-diff__text { text-decoration: line-through; }
.board-diff__equal { background: #fff; color: #55606e; }