/* base.css — hand-written layer, committed, never generated.
 *
 * Three jobs Tailwind cannot do for this template:
 *   1. Accessibility primitives that must exist even if app.css never built
 *      (skip link, focus ring, screen-reader-only text).
 *   2. The visual siren for unfilled template slots (.glm-placeholder).
 *   3. A legible unstyled fallback, so a deploy that lost app.css is ugly
 *      but readable rather than an unformatted wall of text.
 *
 * Contrast: every colour pair below is >= 4.5:1 against its background (WCAG
 * 2.1 AA for body text). See README section "Accessibilite".
 */

:root {
  --glm-ink-900: #0f172a; /* 17.85:1 on white */
  --glm-ink-700: #334155; /* 10.36:1 on white */
  --glm-ink-600: #475569; /*  7.46:1 on white */
  --glm-ink-500: #64748b; /*  4.76:1 on white */
  --glm-brand-700: #b3161e; /* white on it: 6.88:1 */
  --glm-brand-800: #8f1017; /* white on it: 8.70:1 */
  --glm-warn-700: #b45309; /* on #fffbeb: 5.92:1 */
  --glm-focus: #b3161e;
}

/* --- 1. accessibility primitives ------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: #ffffff;
  color: var(--glm-brand-800);
  font-weight: 600;
  border: 2px solid var(--glm-brand-700);
  border-radius: 0 0 0.375rem 0;
}
.skip-link:focus {
  left: 0;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--glm-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Honeypot field: hidden from people, reachable by bots. Never display:none —
 * some bots skip those. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- 2. the unfilled-slot siren --------------------------------------- */

/* Marker text is [[GLM_PLACEHOLDER:<slot_id>]]. The quality gate rejects any
 * draft still containing it; this style makes it impossible to miss in a
 * staging review. */
.glm-placeholder {
  display: inline-block;
  padding: 0.35rem 0.6rem;
  border: 2px dashed var(--glm-warn-700);
  border-radius: 0.375rem;
  background: #fffbeb;
  color: var(--glm-warn-700);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* The same slot, once `scripts/build.mjs` has run in GLM_PLACEHOLDER_GATE=report
 * and substituted the raw `[[GLM_PLACEHOLDER:<id>]]` token for the words
 * "A completer" (accented in the page itself). A preview is meant to be looked at while it is incomplete, so
 * this reads as "not yet provided" rather than as a defect: muted, quiet, and
 * still obviously a gap. The loud siren above stays for anything that reaches a
 * page WITHOUT going through that substitution.
 *
 * 4.62:1 on white, which clears WCAG 2.1 AA for the 13px text it carries.
 * The slot id is on data-glm-slot and in the title attribute, so a reviewer can
 * name the missing field without reading the build log. */
.glm-placeholder--pending {
  border: 1px dashed #cbd5e1;
  background: transparent;
  color: var(--glm-ink-500);
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0.2rem 0.5rem;
}
.glm-placeholder--pending::before {
  content: "\2022\00a0";
  opacity: 0.7;
}

/* --- 3. readable fallback --------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  color: var(--glm-ink-700);
  background: #ffffff;
}
img,
svg,
video {
  max-width: 100%;
  height: auto;
}
a {
  color: var(--glm-brand-700);
}
main :where(h1, h2, h3) {
  color: var(--glm-ink-900);
  line-height: 1.2;
}

/* Long-form copy coming out of a single plan `body` string. */
.prose-glm {
  max-width: 68ch;
  color: var(--glm-ink-700);
  white-space: pre-line; /* the plan sends paragraphs as newlines, not <p> */
}
.prose-glm > * + * {
  margin-top: 1em;
}

details > summary::-webkit-details-marker {
  display: none;
}
details > summary::before {
  content: "+ ";
  color: var(--glm-brand-700);
  font-weight: 700;
}
details[open] > summary::before {
  content: "\2212\00a0";
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .skip-link,
  header nav,
  footer nav {
    display: none;
  }
  body {
    color: #000;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
}