/* ============================================
   LineMind Novelist — Brand CSS
   Purpose: fonts + base color tokens + Bootstrap mappings
   Scope: foundational only (no component redesigns)
   ============================================ */

/* ---------- Brand Tokens ---------- */
:root {
  /* Typography */
  --lmn-font-body: "Segoe UI", -apple-system, system-ui, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --lmn-font-header: "Raleway", "Segoe UI", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;
  --lmn-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Palette (from Branding & Graphic Standards) */
  --lmn-color-ink:    #000000; /* Primary Black - text, core wordmark */
  --lmn-color-crimson: var(--brand-primary, #B32734); /* Editorial Crimson - accent; overridable per-Inkshop via --brand-primary */
  --lmn-color-gray:   #A6A6A6; /* Neutral Gray - secondary, subtle accents */
  --lmn-color-paper:  #FFFFFF; /* White - primary workspace */

  /* Support tones derived for UI affordances (kept subtle) */
  --lmn-color-border: #E6E6E6; /* light border line — for marketing/public chrome */
  --lmn-color-muted:  #666666; /* muted text on white */

  /* Strong-contrast variants for dense admin chrome where the lighter
     tokens above read as nearly invisible on white (filter inputs,
     button outlines, list-row separators, ambient metadata). The
     marketing/public surfaces keep the lighter tokens for editorial
     whitespace; admin views opt into these via component CSS. */
  --lmn-color-gray-strong:   #888888; /* readable ambient gray (was #A6A6A6) */
  --lmn-color-border-strong: #CCCCCC; /* visible UI borders (was #E6E6E6) */
}

/* ---------- Bootstrap Root Variable Overrides ----------
   Keep this minimal so Bootstrap components inherit brand.
   ------------------------------------------------------ */
:root {
  --bs-body-font-family: var(--lmn-font-body);
  --bs-body-color:       var(--lmn-color-ink);
  --bs-body-bg:          var(--lmn-color-paper);

  /* Action/brand color */
  --bs-primary:    var(--lmn-color-crimson);
  --bs-primary-rgb: 179, 39, 52; /* <-- CRIMSON for .link-primary, badges, etc. */

  /* LINKS: switch to brand crimson globally (normal text links) */
  --bs-link-color:           var(--lmn-color-crimson);
  --bs-link-hover-color:     var(--lmn-color-crimson);
  /* RGB fallbacks used by some Bootstrap utilities */
  --bs-link-color-rgb:       179, 39, 52;  /* #B32734 */
  --bs-link-hover-color-rgb: 139, 31, 43;  /* ~darker crimson */

  /* Underline color variables used by Bootstrap 5.3 */
  --bs-link-underline-color-rgb: 179, 39, 52;
  --bs-link-underline-color: rgba(179, 39, 52, .4);

  --bs-border-color: var(--lmn-color-border);
}


/* ---------- Base Elements (light touch) ---------- */
html, body {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Ensure vertical scrolling is always available (fixes intermittent scrollbar issue
   caused by Alpine.js x-cloak timing and Bootstrap modal overflow manipulation) */
html {
  overflow-y: scroll;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lmn-font-header);
  letter-spacing: 0.01em;
}

/* Keep body copy firmly "editorial clean" */
p, li, input, textarea, select, button {
  font-family: var(--lmn-font-body);
  line-height: 1.6;
  color: var(--lmn-color-ink);
}

/* Form labels - inherit body styling */
.form-label {
  color: var(--lmn-color-ink);
}

/* Placeholder text - lighter + italic for clear distinction from help text */
::placeholder {
  color: #AAAAAA;
  font-style: italic;
  opacity: 1; /* Override Firefox default opacity */
}

/* Help text - smaller, muted */
.form-text {
  color: var(--lmn-color-muted);
}

/* Disabled form elements - clearly inactive */
.form-control:disabled,
.form-control[disabled],
.form-select:disabled,
.form-select[disabled],
.form-control:disabled::placeholder,
.form-select:disabled::placeholder {
  color: #999999;
  background-color: #f5f5f5;
  cursor: not-allowed;
}
.form-check-input:disabled ~ .form-check-label {
  color: #999999;
}

/* Mono contexts (useful for code-style snippets in diagnostics, if any) */
code, pre, kbd, samp { font-family: var(--lmn-font-mono); }

/* Links: scarlet by default; on hover only the underline appears (also scarlet) */
a {
  color: var(--bs-link-color);
  text-decoration: none;
  text-decoration-color: currentColor;
}
a:hover,
a:focus {
  color: var(--bs-link-color);
  text-decoration: underline;
  text-decoration-color: currentColor; /* ensure underline matches crimson, not blue */
}

/* Buttons: consistent hover underline (match anchor behavior for visual consistency) */
button.btn:hover,
button.btn:focus {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* Guard for Bootstrap utility class usage on links */
.link-primary:hover,
.link-primary:focus {
  color: var(--lmn-color-crimson) !important;
  text-decoration-color: currentColor !important;
}

/* Borders and muted text */
.hr, hr { border: 0; height: 1px; background: var(--bs-border-color); }
.text-muted { color: var(--lmn-color-muted) !important; }

/* ---------- Bootstrap Button Primary ----------
   Let Bootstrap handle shapes; we just align hues using the brand crimson.
   ------------------------------------------------------ */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  /* Subtle darken on interactive states (keeps within crimson family) */
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 92%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 88%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);

  /* Focus ring harmonized with accent but restrained */
  --bs-btn-focus-shadow-rgb: 179, 39, 52; /* #B32734 as rgb */
}

/* ---------- Editorial Accent Utilities ----------
   Small helpers to express brand motifs without redesigning components.
   Use sparingly (per standards).
   ------------------------------------------------------ */

/* Crimson text accent */
.accent { color: var(--lmn-color-crimson) !important; }

/* Underline accent (editorial “red ink” underline) */
.underline-accent {
  text-decoration-line: underline;
  text-decoration-color: var(--lmn-color-crimson);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 3px; /* ~7–8% of cap height at common sizes */
}

/* Sharpening line: faint→bold crimson horizontal rule */
.sharpening-line {
  height: 2px;
  border: 0;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--lmn-color-crimson) 25%, white) 0%,
    var(--lmn-color-crimson) 60%,
    var(--lmn-color-crimson) 100%
  );
}

/* Margin-note feel: controlled left gutter for SRF numbering (optional) */
.srf-margin-left { padding-left: 1.25rem; border-left: 3px solid var(--bs-border-color); }

/* Cards/inputs keep soft borders that respect brand radius from tokens.css */
.card, .form-control, .btn { border-radius: var(--lmn-radius, 12px); }

/* Optional: make <mark> look like editorial highlight without neon */
mark {
  background: color-mix(in srgb, var(--lmn-color-crimson) 12%, white);
  padding: .1em .2em;
}

.brand-hero-logo { max-width: 340px; height: auto; }

/* ============================
   Brand Button Mapping (add-on)
   ============================ */

/* Secondary = Ink (black) for neutral actions */
:root { --bs-secondary: var(--lmn-color-ink); }

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--lmn-color-ink);
  --bs-btn-border-color: var(--lmn-color-ink);

  /* Slight lighten on hover/active since black can't "darken" meaningfully */
  --bs-btn-hover-bg: color-mix(in srgb, var(--lmn-color-ink) 88%, white);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--lmn-color-ink) 88%, white);
  --bs-btn-active-bg: color-mix(in srgb, var(--lmn-color-ink) 82%, white);
  --bs-btn-active-border-color: color-mix(in srgb, var(--lmn-color-ink) 82%, white);

  --bs-btn-focus-shadow-rgb: 0, 0, 0; /* Ink */
}

/* Outline Primary = Crimson outline/text, fills on hover */
.btn-outline-primary {
  --bs-btn-color: var(--lmn-color-crimson);
  --bs-btn-border-color: var(--lmn-color-crimson);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--lmn-color-crimson);
  --bs-btn-hover-border-color: var(--lmn-color-crimson);

  --bs-btn-active-bg: color-mix(in srgb, var(--lmn-color-crimson) 85%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--lmn-color-crimson) 85%, black);

  --bs-btn-focus-shadow-rgb: 179, 39, 52; /* Crimson */
}

/* Outline Secondary = Charcoal outline/text, fills on hover */
.btn-outline-secondary {
  --bs-btn-color: #555555;
  --bs-btn-border-color: #555555;

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #555555;
  --bs-btn-hover-border-color: #555555;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #444444;
  --bs-btn-active-border-color: #444444;

  --bs-btn-disabled-color: #999999;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #999999;

  --bs-btn-focus-shadow-rgb: 85, 85, 85; /* #555555 */
}

/* Link button: keep it quiet and brand-consistent (Ink) */
.btn-link {
  color: var(--lmn-color-ink);               /* explicitly Ink, not crimson */
  text-decoration: none;
}

.btn-link:hover,
.btn-link:focus { text-decoration: underline; }

/* Optional: make “Light” & “Dark” obey brand neutrals a bit more */
.btn-light {
  --bs-btn-color: var(--lmn-color-ink);
  --bs-btn-bg: #f7f7f7;
  --bs-btn-border-color: var(--lmn-color-border);
}
.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--lmn-color-ink);
  --bs-btn-border-color: var(--lmn-color-ink);
}

/* Accessibility nudge: ensure contrast on disabled states */
.btn:disabled, .btn.disabled {
  opacity: .55; /* Bootstrap default; acceptable with our palette */
}


/* -- Force crimson as "primary" on the elements themselves -- */
.btn-primary,
.btn-outline-primary {
  /* If any container redefines --bs-primary, the element-level var wins */
  --bs-primary: var(--lmn-color-crimson) !important;
}

/* -- Fully specify disabled states so they don't fall back to defaults -- */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);

  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 92%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 88%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
  --bs-btn-focus-shadow-rgb: 179, 39, 52; /* #B32734 */
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  /* Disabled outline stays outline (no surprise fills) */
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-focus-shadow-rgb: 179, 39, 52;
}


/* ---------- Form Checkbox Styling ----------
   Default: Charcoal (neutral, softer than ink but clearly active)
   Accent: Crimson for emphasis (use sparingly)
   -------------------------------------------- */

/* Default checkboxes - unchecked state (visible gray border) */
.form-check-input {
  border-color: #888888;
}

/* Default checkboxes - checked state (charcoal fill) */
.form-check-input:checked {
  background-color: #444444;
  border-color: #444444;
}
.form-check-input:focus {
  border-color: #444444;
  box-shadow: 0 0 0 0.25rem rgba(68, 68, 68, 0.2);
}
.form-check-input:checked:focus {
  box-shadow: 0 0 0 0.25rem rgba(68, 68, 68, 0.2);
}

/* Accent checkboxes - crimson for emphasis (use sparingly) */
.form-check-input.form-check-accent:checked {
  background-color: var(--lmn-color-crimson);
  border-color: var(--lmn-color-crimson);
}
.form-check-input.form-check-accent:focus {
  border-color: var(--lmn-color-crimson);
  box-shadow: 0 0 0 0.25rem rgba(179, 39, 52, 0.25);
}
.form-check-input.form-check-accent:checked:focus {
  box-shadow: 0 0 0 0.25rem rgba(179, 39, 52, 0.25);
}


/* ---------- Form Validation States ----------
   Use brand crimson for errors instead of Bootstrap red
   ---------------------------------------------- */
.is-invalid,
.was-validated :invalid {
  border-color: var(--lmn-color-crimson) !important;
}
.invalid-feedback,
.was-validated .invalid-feedback {
  color: var(--lmn-color-crimson);
}
.form-control:focus.is-invalid,
.form-select:focus.is-invalid {
  border-color: var(--lmn-color-crimson);
  box-shadow: 0 0 0 0.25rem rgba(179, 39, 52, 0.25);
}


/* =========================================================
   Ensure brand variables apply even under Bootstrap themes.
   (Bootstrap 5.3+ uses [data-bs-theme] to scope variables.)
   ========================================================= */
:root,
[data-bs-theme],
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  /* Typography */
  --bs-body-font-family: var(--lmn-font-body);
  --bs-body-color:       var(--lmn-color-ink);
  --bs-body-bg:          var(--lmn-color-paper);

  /* Brand hues */
  --bs-primary:              var(--lmn-color-crimson); /* Editorial Crimson */
  --bs-primary-rgb:          179, 39, 52;  /* <-- ensures .link-primary is crimson under data-bs-theme */

  /* LINKS: ensure crimson in any theme scope */
  --bs-link-color:           var(--lmn-color-crimson);
  --bs-link-hover-color:     var(--lmn-color-crimson);
  --bs-link-color-rgb:       179, 39, 52;
  --bs-link-hover-color-rgb: 139, 31, 43;

  /* Underline color variables (Bootstrap 5.3) */
  --bs-link-underline-color-rgb: 179, 39, 52;
  --bs-link-underline-color: rgba(179, 39, 52, .4);

  --bs-border-color:         var(--lmn-color-border);
}


/* Keep our .btn-primary mapping intact under any theme */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 92%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 88%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
  --bs-btn-focus-shadow-rgb: 179, 39, 52; /* #B32734 */
}


/* Hide [x-cloak] elements until Alpine initializes */
[x-cloak] { display: none !important; }


/* Pro-tier accent bar (subtle celebratory line) */
.pro-accent {
  height: 3px;
  background: var(--lmn-color-crimson);
  border-radius: 999px;
}


/* ---------- Nav Pills (Bootstrap 5.3 component-scoped variables) ----------
   Bootstrap's nav-pills component declares its own --bs-nav-pills-link-active-bg
   default of #0d6efd which does NOT inherit from --bs-primary. Override here so
   the active pill matches Editorial Crimson on every surface (including the
   per-Inkshop --brand-primary cascade).
   ----------------------------------------------------------------- */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bs-primary);
  --bs-nav-pills-link-active-color: #fff;
}


/* Editorial query mark (circled "?") — inherits text color */
.qmark {
  /* Tunables */
  --q-size: 1.50em;          /* circle diameter */
  --q-stroke: 1px;           /* ring thickness */
  --q-glyph-scale: 0.50;     /* question-mark size relative to circle */
  --q-pad: 0.18em;           /* inner padding between "?" and ring */

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Make padding reduce the content box (keeps outer size stable) */
  box-sizing: border-box;
  width: var(--q-size);
  height: var(--q-size);
  padding: var(--q-pad);

  border-radius: 50%;
  border: var(--q-stroke) solid currentColor; /* inherits surrounding text color */
  color: currentColor;

  font-family: var(--lmn-font-header);
  font-weight: 700;
  font-size: calc(var(--q-size) * var(--q-glyph-scale));
  line-height: 1;
  margin-right: .15rem;
  flex: 0 0 auto;
  transform: translateY(-0.05em); /* tiny optical nudge */
}
.qmark::before { content: "?"; }

/* Optional size shortcuts */
.qmark.sm { --q-size: 1.3em; --q-stroke: 1px; }
.qmark.lg { --q-size: 1.8em;  --q-stroke: 1px;   }


/* tagline */
.tagline {
  font-family: var(--lmn-font-header);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: .25rem 0 0;
  text-transform: none; /* never auto-cap */
  color: var(--lmn-color-ink);
}


/* Social links in nav */
.navbar .text-muted:hover { color: var(--lmn-color-ink) !important; }

/* Footer polish */
.site-footer { background: var(--bs-body-bg); }
.site-footer .footer-title { color: var(--lmn-color-ink); }
.site-footer .link-secondary { color: var(--lmn-color-muted); }
.site-footer .link-secondary:hover { color: var(--lmn-color-ink); text-decoration: underline; }
.site-footer ul li + li { margin-top: .25rem; }
.site-footer a.footer-rf-link:hover { text-decoration: underline !important; }


/* Gentle rhythm for legal/help prose */
.prose {
  max-width: 800px;
  margin-inline: auto;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}
.prose p, .prose ul, .prose ol { max-width: 70ch; }
.prose ul, .prose ol { padding-left: 1.1rem; }
.prose li + li { margin-top: .25rem; }