/*
 * BEAM CSS – generics.css
 * https://beamcss.org/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 a sixth file, fonts.css, holding @font-face and
 * nothing else. Skip it on system fonts, or when faces already load in the
 * document head. It is not part of this download because the files it
 * would reference are yours. 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 @beam-css/postcss-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;
}

/*
 * reset.css sets svg { max-width: 100% } for illustrations. Inside a flex box
 * with no width/height on the svg itself, iOS Safari resolves that percentage
 * as 0 and the glyph vanishes while the button remains.
 */
.g_icon_box svg {
  width: 100%;
  height: 100%;
  max-width: none;
}

.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
 *
 * Running prose, not a chip. `nowrap` turns the tag into an atomic box, so the
 * next character – usually a period or comma – wraps onto its own line. Let
 * the token wrap at spaces or overflow-wrap; clone the padding if it splits.
 * Word Joiner after the element glues following punctuation without an  
 * the formatter is free to shove onto the next line. */
.g_code,
.g_prose :not(pre) > 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;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

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

.g_code::after,
.g_prose :is(a, em, strong)::after,
.g_prose :not(pre) > code::after {
  content: '\2060';
}

/* -------------------------------------------------------------------------- */
/* 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 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);
}