/* ==========================================================================
   bivens.dev — Global Document Reset, Font Stability & Layout Guards (Layer 0)
   Loaded via render-blocking <link rel="stylesheet"> in <head> alongside
   /m3-theme.css to guarantee zero Flash of Unstyled Content (FOUC) and 0 CLS.
   ========================================================================== */

@layer bivens.base;

@layer bivens.base {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  :root {
    --md-icon-font: "Material Symbols Outlined";
  }

  html {
    background-color: light-dark(var(--md-sys-color-surface-container), var(--md-sys-color-surface));
    color: var(--md-sys-color-on-surface);
    font-variant-numeric: lining-nums tabular-nums;
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    min-block-size: 100dvh;
    background-color: light-dark(var(--md-sys-color-surface-container), var(--md-sys-color-surface));
    color: var(--md-sys-color-on-surface);
    font-family: var(--md-ref-typeface-plain, "Open Sans", system-ui, sans-serif);
    font-size-adjust: from-font;
    font-weight: 400;
    font-variant-numeric: lining-nums tabular-nums;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  h1,
  h2,
  h3,
  h4 {
    font-size-adjust: from-font;
  }

  code,
  pre,
  .mono {
    font-family: var(--md-ref-typeface-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, monospace);
    font-size-adjust: from-font;
  }

  /* Prevent icon ligature text ("dark_mode", "print") from expanding layout before font load */
  .material-symbol {
    font-family: var(--md-icon-font, "Material Symbols Outlined");
    font-size: 1.125rem;
    inline-size: 1em;
    block-size: 1em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
  }

  /* Intrinsic layout reservation for custom elements to prevent CLS on upgrade */
  bivens-app-shell,
  bivens-home-page,
  bivens-writing-page,
  bivens-article-page,
  bivens-dossier-page {
    display: block;
  }

  bivens-contact-dialog {
    display: contents;
  }

  micro-lighter {
    display: grid;
    position: relative;
  }

  print-page {
    display: block;
    inline-size: 210mm;
    block-size: 297mm;
  }

  md-filled-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.5rem;
    min-inline-size: 7.25rem;
    vertical-align: middle;
  }

  /* Fail-open upgrade guard for custom elements (modern-web-guidance: custom-elements) */
  bivens-app-shell:not(:defined),
  bivens-home-page:not(:defined),
  bivens-writing-page:not(:defined),
  bivens-article-page:not(:defined),
  bivens-dossier-page:not(:defined),
  bivens-contact-dialog:not(:defined),
  print-page:not(:defined) {
    opacity: 0;
    animation: bivens-defined-fallback 0.2s 2s forwards;
  }

  @keyframes bivens-defined-fallback {
    to {
      opacity: 1;
    }
  }

  /* Admin Dashboard (/admin) Layout Rules */
  .admin-shell {
    max-inline-size: 72rem;
    margin-inline: auto;
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .admin-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .admin-kicker {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--md-sys-color-primary);
    margin: 0;
  }

  .admin-title {
    font-family: var(--md-ref-typeface-brand, "Playfair Display", Georgia, serif);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin: 0;
  }

  .admin-subtitle,
  .admin-desc {
    color: var(--md-sys-color-on-surface-variant);
    margin: 0;
  }

  .admin-card {
    background-color: var(--md-sys-color-surface-container-low);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 0.75rem;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .admin-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .admin-section-title {
    font-size: 1.25rem;
    margin: 0 0 0.25rem 0;
  }

  .admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .admin-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-inline-size: 26rem;
  }

  .admin-field-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface);
  }

  .admin-field-input {
    font: inherit;
    font-size: 0.9375rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--md-sys-color-outline);
    background-color: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
  }

  .admin-btn {
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    border: 1px solid var(--md-sys-color-outline);
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
  }

  .admin-btn-primary {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-color: var(--md-sys-color-primary);
  }

  .admin-status {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--md-sys-color-primary);
    margin: 0;
  }

  .admin-table-wrap {
    overflow-x: auto;
  }

  .admin-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.90625rem;
  }

  .admin-table th,
  .admin-table td {
    text-align: start;
    padding: 0.75rem 1rem;
    border-block-end: 1px solid var(--md-sys-color-outline-variant);
  }

  .admin-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--md-sys-color-on-surface-variant);
  }
}