/* ============================================================
   base.css — global defaults
   ------------------------------------------------------------
   Owns rules that apply to top-level elements (body, html, etc.)
   and project-wide Bootstrap component baselines (such as the
   default .card border-radius).

   Load order: this file is loaded AFTER tokens.css and BEFORE
   every other stylesheet, so its rules act as the foundation
   that more specific files build on top of.

   See markdown/design/DESIGN_DECISIONS_CSS_REFACTOR.md for the
   full file map and refactor plan.
   ============================================================ */

/* ============================================================
   Base — page background, card defaults
   ============================================================ */

body {
    background-color: var(--color-bg-page);
    font-family: var(--font-sans);
    /* Kill any page-level horizontal scroll caused by overflowing children
       (e.g. the nav expandable row at narrow widths). `clip` over `hidden`
       so we don't establish a scroll container that would break the
       sticky-top navbar. */
    overflow-x: clip;
}

.card {
    border-radius: var(--radius-lg);
}


/* ============================================================
   Folded in from style.css during css-refactor commit 8.
   ============================================================ */

/* ============================================================
   Layout helpers — utility classes for inline-style replacements
   ============================================================ */

.nav-icon {
    vertical-align: -3px;
}

.inline-icon {
    vertical-align: -2px;
}



/* === Inline-style hygiene (se9-cleanup) ==========================
   New utility classes introduced during the CSP hardening pass to
   replace inline style="..." attributes in templates. Each was added
   because the template using it couldn't reuse an existing content-
   named class without semantic drift.

   Token discipline preserved throughout — every value here is a
   var() reference.

   Templates that consume these:
     - messaging/new_conversation.html       .form-label-md
     - messaging/thread.html                 .text-sm, .text-md, .body-base-prewrap
     - account/profile.html                  .avatar-cropper-container, .avatar-cropper-image
     - profile/view.html                     .freespace-media-placeholder-poster
   ================================================================ */


/* Generic font-size utilities — token-driven equivalents of inline
   font-size declarations. Used in messaging/thread.html for shared-
   post-card chrome and link-preview override. Cascade-safe: both
   override .link-preview-title's default 14px when used as a later
   class on the same element. */
.text-sm {
    font-size: var(--font-size-sm);
}

.text-md {
    font-size: var(--font-size-md);
}

/* Body text with preserved whitespace — 13px + pre-wrap. Used for
   shared-post body text inside thread.html. Distinct from .comment-
   body (which is 14px) and .post-body (which has no size declaration). */
.body-base-prewrap {
    font-size: var(--font-size-base);
    white-space: pre-wrap;
}

/* Avatar cropper container + image — used by account/profile.html
   to constrain the CropperJS canvas before initialization. Separate
   from .media-editor-canvas because the avatar flow is a different
   feature with its own sizing expectations (square crop, 400px cap). */
.avatar-cropper-container {
    max-height: 400px;
    overflow: hidden;
}

.avatar-cropper-image {
    max-width: 100%;
    display: block;
}

/* Free-space transcode placeholder poster image (se9 refactor).
   Replaces the inline style="background-image: url('...')" pattern
   with a positioned <img> behind the overlay. The overlay
   (.freespace-media-placeholder-overlay) is absolute-positioned with
   inset: 0 so it sits cleanly on top of this image. Used by
   profile/view.html's pending and failed video transcode states. */
.freespace-media-placeholder-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}