/* The Factory — public availability embed widget.
 *
 * All rules are scoped under `.factory-embed-root` so host pages
 * (e.g. bolandsmills.com) can drop the widget in without fear of
 * their own CSS colliding — the widget is always wrapped in a
 * <div class="factory-embed-root">.
 *
 * Spec: public-embed/spec.md — "colour semantics follow /calendar"
 * (free = pale, occupied = red, soft_locked = amber). Total width
 * stretches to the host container; height grows with the time-axis.
 *
 * FAC-28 — Theme override contract.
 *   Every brand-relevant value below reads through a `var(--fe-*)`
 *   with a literal fallback that matches today's neutral palette.
 *   Host pages override the brand by dropping a `<style>` block
 *   AFTER this stylesheet that sets any subset of the custom
 *   properties on `.factory-embed-root`, e.g.:
 *
 *     .factory-embed-root {
 *       --fe-font: "Bolland's Mills Heading", sans-serif;
 *       --fe-primary: #2b3a67;
 *       --fe-occupied: #c0392b;
 *     }
 *
 *   Unsetting all custom properties returns the embed to the
 *   neutral palette unchanged (visual-diff invariant).
 *
 *   Scope note: radius is per-surface. `--fe-radius` governs the
 *   outer container; `--fe-cta-radius`, `--fe-error-radius`,
 *   `--fe-btn-radius`, and `--fe-swatch-radius` cover the inner
 *   elements (CTA button, error box, Prev/Next button, legend
 *   swatches). Each falls back to today's literal so unstyled
 *   hosts render unchanged.
 */
.factory-embed-root {
  box-sizing: border-box;
  font-family: var(
    --fe-font,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif
  );
  font-size: var(--fe-font-size, 13px);
  color: var(--fe-text, #1e293b);
  background: var(--fe-bg, #ffffff);
  border: 1px solid var(--fe-border, #e2e8f0);
  border-radius: var(--fe-radius, 8px);
  padding: 12px;
  max-width: 100%;
  box-sizing: border-box;
}
.factory-embed-root *,
.factory-embed-root *::before,
.factory-embed-root *::after {
  box-sizing: border-box;
}
.factory-embed-root .fe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.factory-embed-root .fe-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fe-title-color, #0f172a);
}
.factory-embed-root .fe-nav {
  display: inline-flex;
  gap: 4px;
}
.factory-embed-root .fe-btn {
  font: inherit;
  border: 1px solid var(--fe-btn-border, #cbd5e1);
  background: var(--fe-btn-bg, #f8fafc);
  color: var(--fe-text, #1e293b);
  padding: 4px 10px;
  border-radius: var(--fe-btn-radius, 4px);
  cursor: pointer;
}
.factory-embed-root .fe-btn:hover {
  background: var(--fe-btn-hover-bg, #e2e8f0);
}
.factory-embed-root .fe-range {
  font-size: 13px;
  color: var(--fe-muted, #475569);
  padding: 0 6px;
}
.factory-embed-root .fe-grid {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  border-top: 1px solid var(--fe-border, #e2e8f0);
  border-left: 1px solid var(--fe-border, #e2e8f0);
}
.factory-embed-root .fe-col-head,
.factory-embed-root .fe-row-head,
.factory-embed-root .fe-cell {
  border-right: 1px solid var(--fe-border, #e2e8f0);
  border-bottom: 1px solid var(--fe-border, #e2e8f0);
  font-size: 11px;
  color: var(--fe-muted-2, #64748b);
  padding: 4px 6px;
}
.factory-embed-root .fe-col-head {
  font-weight: 600;
  color: var(--fe-title-color, #0f172a);
  text-align: center;
  background: var(--fe-col-head-bg, #f8fafc);
  padding: 6px;
}
.factory-embed-root .fe-row-head {
  color: var(--fe-muted, #475569);
  text-align: right;
  padding: 2px 6px 0 0;
  font-variant-numeric: tabular-nums;
}
.factory-embed-root .fe-cell {
  position: relative;
  min-height: 28px;
  background: var(--fe-bg, #ffffff);
}
/* FAC-28 contract: hosts brand the "booked" surface by setting
 * `--fe-occupied` on `.factory-embed-root` from a <style> block
 * that sits AFTER /embed/calendar.css in DOM order. DO NOT assign
 * this custom property on a more-specific selector (e.g. directly
 * on `.fe-cell` or `.factory-embed-root .fe-cell[data-state=...]`);
 * a higher-specificity assignment shadows the host's outer override
 * and the host loses control. The single assignment site for the
 * property is the host's `.factory-embed-root` rule — calendar.css
 * only READS it via `var()`. */
.factory-embed-root .fe-cell[data-state="occupied"] {
  background: var(--fe-occupied, rgba(239, 68, 68, 0.85));
}
/* FAC-31: free cells render as <a class="fe-cell"> deep-linking to
 * the host venue's registration entry point. Neutralise the default
 * anchor underline + colour so they read like the rest of the grid,
 * and add a subtle hover affordance so visitors realise they're
 * interactive. */
.factory-embed-root a.fe-cell {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.factory-embed-root a.fe-cell:hover {
  background: var(--fe-hover-bg, #e0e7ff);
}
.factory-embed-root a.fe-cell:focus-visible {
  outline: 2px solid var(--fe-focus, #2563eb);
  outline-offset: -2px;
}
.factory-embed-root .fe-legend {
  margin-top: 10px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--fe-muted, #475569);
}
.factory-embed-root .fe-legend .fe-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid var(--fe-btn-border, #cbd5e1);
  margin-right: 4px;
  vertical-align: middle;
  border-radius: var(--fe-swatch-radius, 2px);
}
.factory-embed-root .fe-legend .fe-swatch.fe-swatch-free {
  background: var(--fe-bg, #ffffff);
}
.factory-embed-root .fe-legend .fe-swatch.fe-swatch-occupied {
  background: var(--fe-occupied, rgba(239, 68, 68, 0.85));
}
.factory-embed-root .fe-cta {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 14px;
  /* `--fe-primary` is the brand-primary alias the ticket calls out;
   * it falls back to `--fe-cta-bg` so integrators can pick either
   * granularity, and finally to today's literal for unstyled hosts. */
  background: var(--fe-primary, var(--fe-cta-bg, #0f172a));
  color: var(--fe-cta-text, #ffffff);
  border-radius: var(--fe-cta-radius, 6px);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}
.factory-embed-root .fe-cta:hover {
  background: var(--fe-cta-hover-bg, #1e293b);
  color: var(--fe-cta-text, #ffffff);
}
.factory-embed-root .fe-error {
  padding: 16px;
  background: var(--fe-error-bg, #fef2f2);
  border: 1px solid var(--fe-error-border, #fecaca);
  color: var(--fe-error-text, #991b1b);
  border-radius: var(--fe-error-radius, 6px);
  font-size: 13px;
}
.factory-embed-root .fe-loading {
  padding: 16px;
  color: var(--fe-muted-2, #64748b);
  font-size: 13px;
  text-align: center;
}