/* SEF Studio: reset, body, typography defaults.
 *
 * This is the entry CSS file linked from templates/studio/base.html. It is
 * deliberately small. Surface-level styles live in chrome.css, components.css,
 * and surfaces.css, all linked separately from the base template. Tokens are
 * loaded first via tokens.css.
 */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  /* Flex column so the footer parks at the viewport bottom on short
     pages (e.g. an empty Approval queue). main.container takes flex: 1
     to absorb the spare height. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main.container { flex: 1; }

::selection {
  background: var(--color-oxblood);
  color: var(--color-bg);
}

/* Headings: Fraunces, weight 500, slightly tightened tracking. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--color-text);
  margin: 0 0 0.6em;
  line-height: 1.2;
}
h1 { font-size: var(--type-h2); line-height: 1.15; }
h2 { font-size: 1.35rem; line-height: 1.2; }
h3 { font-size: var(--type-h3); line-height: 1.3; }
h4 { font-size: 1.05rem; line-height: 1.35; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-oxblood);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-oxblood-hover); }

strong { font-weight: 600; }
em { font-style: italic; }
small { font-size: var(--type-small); }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--color-bg-tint);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}
pre {
  background: var(--color-bg-tint);
  border: 1px solid var(--color-rule);
  padding: 0.75rem 1rem;
  overflow-x: auto;
  font-size: var(--type-small);
  line-height: 1.45;
}
pre code { background: transparent; padding: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin: 1.5rem 0;
}

img, svg { max-width: 100%; }

/* Editorial accents */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  margin: 0 0 1rem;
  display: inline-block;
}
.eyebrow-muted { color: var(--color-muted); }

.lead {
  font-family: var(--font-serif);
  font-size: var(--type-lead);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-muted);
  max-width: 60ch;
}

.muted { color: var(--color-muted); }
a.muted { color: var(--color-muted); }
a.muted:hover { color: var(--color-text); }

.small { font-size: var(--type-small); }

/* Inline anchors inside body copy keep the oxblood underline already given by `a`,
 * but anchors that are themselves muted (source URL list items) stay quiet.
 */
.muted > a:not(.muted) { color: var(--color-oxblood); }
.muted > a:not(.muted):hover { color: var(--color-oxblood-hover); }

/* ============================================================ FORM HYGIENE (D.4) === */

/*
 * Defaults for the studio's form controls. Pages that already set
 * their own font-size on inputs (Phase B/C surfaces) keep their
 * specifics; this rule sets a sane floor so any *new* form authored
 * without explicit input styling still meets the iOS-no-zoom and
 * 44px-tap-target requirements.
 */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  font-size: 16px;
  min-height: 44px;
  font-family: inherit;
}
textarea {
  /* Textareas grow vertically; min-height sets the floor for the
   * default rows. Per-page rules can lift this. */
  min-height: 5rem;
}

/* Focus rings consistent across every interactive control. The
 * existing `.btn:focus-visible` rule lives in components.css; this
 * adds one for raw <a> links and inputs that don't go through .btn. */
:where(a:not(.brand):not(.tenant-pill):not(.btn)):focus-visible,
:where(input, textarea, select):focus-visible {
  outline: 2px solid var(--color-oxblood);
  outline-offset: 2px;
  border-radius: 2px;
}

/* HTMX in-flight indicator. Add an `hx-indicator=".htmx-spinner"` to
 * any HTMX-bound form / button; the spinner near it will fade in
 * during the request. We render the spinner inline so it doesn't
 * shift layout. */
.htmx-indicator {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-rule);
  border-top-color: var(--color-oxblood);
  vertical-align: middle;
  margin-left: 0.4rem;
  opacity: 0;
  transition: opacity 0.18s ease;
  animation: htmx-spin 0.7s linear infinite;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

@keyframes htmx-spin {
  to { transform: rotate(360deg); }
}

/* Reduced-motion: drop the spinner animation and the swipe
 * transitions. Honours OS-level prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .htmx-indicator { animation: none; opacity: 1; }
  .card { transition: none !important; }
  .bottom-tabs { transition: none !important; }
}