/*
 * BEAM CSS — generics.css
 * https://beamcss.dev/spec/
 *
 * One of the five required global stylesheets. Import in this order:
 *   reset.css → theme.css → layout.css → utils.css → generics.css
 *
 * BEAM also defines an optional sixth file, fonts.css, holding @font-face and
 * nothing else. It is not part of this download because it would reference
 * font packages you have not installed. Write your own and import it first.
 *
 * theme.css and layout.css contain fluid() calls. Install the build-time
 * plugin, or replace each call with a static value:
 *   npm install --save-dev postcss-beam-fluid
 */

/* ========================================================================== */
/* generics.css
/* Global UI Assets (g_)
/* Nouns and objects that are too ubiquitous to require their own file.
/* They follow standard BEAM rules and may possess state.
/* ========================================================================== */

/* VISUAL DIVIDER */
.g_divider {
  border: 0;
  margin: 0;
  width: 100%;
  height: 1px;
  background-color: var(--border-base);
}

.g_divider[data-variant='transparent'] {
  background-color: transparent;
}

.g_divider[data-orientation='vertical'] {
  width: 1px;
  height: auto;
  align-self: stretch;
}

/* SIMPLE SPINNER */
.g_spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid var(--border-base);
  border-radius: var(--radius-full);
  border-top-color: var(--action-primary);
  animation: spin 0.6s linear infinite;
}

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

/* ICON BOX (Wrapper for consistent external SVG sizing) */
.g_icon_box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25em;
  height: 1.25em;
}

.g_icon_box[data-size='sm'] {
  width: 1em;
  height: 1em;
}

.g_icon_box[data-size='lg'] {
  width: 1.5em;
  height: 1.5em;
}

/* EYEBROW (The uppercase mono label that marks a section or a field) */
.g_eyebrow {
  display: block;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  line-height: var(--leading-none);
  text-transform: uppercase;
}

.g_eyebrow[data-tone='accent'] {
  color: var(--action-primary);
}

/* TAG (Compact metadata pill) */
.g_tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-none);
  white-space: nowrap;
}

.g_tag[data-tone='accent'] {
  border-color: color-mix(in srgb, var(--action-primary), transparent 60%);
  color: var(--action-primary);
}

.g_tag[data-tone='success'] {
  border-color: color-mix(in srgb, var(--intent-success-base), transparent 55%);
  background: var(--intent-success-subtle);
  color: var(--intent-success-strong);
}

.g_tag[data-tone='critical'] {
  border-color: color-mix(in srgb, var(--intent-critical-base), transparent 55%);
  background: var(--intent-critical-subtle);
  color: var(--intent-critical-strong);
}

/* KEYBOARD KEY */
.g_kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--ink-main);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  white-space: nowrap;
}

/* Keystroke runs read as one gesture, so the gap is the generic's job rather
   than a whitespace text node the formatter is free to move. */
.g_kbd + .g_kbd {
  margin-inline-start: var(--space-1);
}

/* INLINE CODE */
.g_code {
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ink-main), transparent 92%);
  color: var(--ink-main);
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-weight: var(--weight-medium);
  overflow-wrap: break-word;
}

.g_code[data-tone='accent'] {
  background: color-mix(in srgb, var(--action-primary), transparent 90%);
  color: var(--action-primary);
}

/* -------------------------------------------------------------------------- */
/* TYPOGRAPHY BLOCK (Prose)
/* An encapsulation zone for unclassed HTML (e.g., Markdown/CMS output).
/* The single sanctioned place for descendant element selectors, because the
/* content is intentionally class-free.
/* -------------------------------------------------------------------------- */
.g_prose {
  color: var(--ink-muted);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

.g_prose > * + * {
  margin-block-start: var(--space-4);
}

.g_prose h2,
.g_prose h3,
.g_prose h4 {
  color: var(--ink-main);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.g_prose h2 {
  font-size: var(--text-2xl);
}

.g_prose h3 {
  font-size: var(--text-xl);
}

.g_prose h4 {
  font-size: var(--text-lg);
}

.g_prose > h2 + *,
.g_prose > h3 + *,
.g_prose > h4 + * {
  margin-block-start: var(--space-3);
}

.g_prose > * + :is(h2, h3, h4) {
  margin-block-start: var(--space-10);
}

.g_prose strong {
  color: var(--ink-main);
  font-weight: var(--weight-semibold);
}

.g_prose a {
  color: var(--action-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: var(--transition-colors);
}

.g_prose a:hover {
  color: var(--action-primary-hover);
}

.g_prose ul,
.g_prose ol {
  padding-inline-start: var(--space-5);
}

.g_prose li + li {
  margin-block-start: var(--space-2);
}

.g_prose li::marker {
  color: var(--ink-faint);
}

.g_prose code {
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ink-main), transparent 92%);
  color: var(--ink-main);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.g_prose blockquote {
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--action-primary);
  color: var(--ink-main);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}