/* largen — reference components.
 *
 * OPTIONAL. Import them, copy them, or ignore them entirely. They are worked
 * examples of the authoring pattern, not an API you are meant to inherit from —
 * a project that imports src/largen.css and writes its own dozen components is
 * using largen correctly.
 *
 * Every one of these is shape only. None mentions a colour literal, a raw token,
 * dark mode, or a size variant; all of that arrives from the algebra. Read two
 * of them and you know how to write the rest.
 *
 * Note each is addressable as a class OR a custom element — `.alert` and
 * <l-alert> both work, because paint is universal and nothing needs registering.
 */

@layer largen.components {
  /* --- Feedback --------------------------------------------------------- */
  .alert, l-alert {
    --bg: var(--tone-soft);
    --fg: var(--tone-ink);
    --border-color: var(--tone-line);
    --border-width: var(--hairline);
    --border-style: solid;
    --radius: var(--radius-md);
    --pad: 0.85em 1em;
    --gap: 0.75em;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }

  .badge, l-badge {
    --bg: var(--tone-soft);
    --fg: var(--tone-ink);
    --border-color: var(--tone-line);
    --border-width: var(--hairline);
    --border-style: solid;
    --radius: 2em;
    --pad: 0.15em 0.6em;
    --gap: 0.3em;
    --font-size: calc(0.78rem * var(--scale));
    --weight: var(--weight-medium);
    display: inline-flex;
    align-items: center;
    inline-size: fit-content;
    white-space: nowrap;
  }

  .dot, l-dot {
    --bg: var(--tone);
    --radius: 50%;
    display: inline-block;
    inline-size: calc(0.55em * var(--scale));
    block-size: calc(0.55em * var(--scale));
    vertical-align: middle;
  }

  .spinner, l-spinner {
    --fg: var(--tone);
    display: inline-block;
    inline-size: calc(1.15em * var(--scale));
    block-size: calc(1.15em * var(--scale));
    border: 2px solid currentcolor;
    border-block-start-color: transparent;
    border-radius: 50%;
    animation: largen-spin 0.6s linear infinite;
  }

  .skeleton, l-skeleton {
    --bg: var(--surface);
    --radius: var(--radius-sm);
    display: block;
    min-block-size: 1em;
    background-image: linear-gradient(90deg, transparent,
      color-mix(in oklab, var(--ink) 6%, transparent), transparent);
    background-size: 200% 100%;
    animation: largen-sweep 1.4s linear infinite;
  }

  @keyframes largen-spin { to { rotate: 1turn } }
  @keyframes largen-sweep {
    from { background-position: 200% 0 }
    to   { background-position: -200% 0 }
  }

  @media (prefers-reduced-motion: reduce) {
    .spinner, l-spinner, .skeleton, l-skeleton {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
    }
  }

  /* --- Surfaces --------------------------------------------------------- */
  .card, l-card {
    --bg: var(--surface);
    --fg: var(--ink);
    --border-color: var(--line);
    --border-width: var(--hairline);
    --border-style: solid;
    --radius: var(--radius-md);
    --pad: 1rem;
    --gap: 0.5rem;
    display: flex;
    flex-direction: column;
  }

  .panel, l-panel {
    --bg: var(--surface);
    --radius: var(--radius-md);
    --pad: 1rem;
    --gap: 0.75rem;
    display: flex;
    flex-direction: column;
  }

  .divider, l-divider {
    --fg: var(--ink-muted);
    --gap: 0.75em;
    --font-size: calc(0.8rem * var(--scale));
    display: flex;
    align-items: center;
  }

  .divider::before, .divider::after,
  l-divider::before, l-divider::after {
    content: "";
    flex: 1;
    border-block-start: var(--hairline) solid var(--line);
  }

  /* --- Data ------------------------------------------------------------- */
  .stat, l-stat {
    --gap: 0.15em;
    display: flex;
    flex-direction: column;
  }

  .stat-label, l-stat-label {
    --fg: var(--ink-muted);
    --font-size: calc(0.72rem * var(--scale));
    --letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .stat-value, l-stat-value {
    --fg: var(--tone-ink);
    --font-size: calc(1.75rem * var(--scale));
    --weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }

  .menu, l-menu {
    --gap: 0.1rem;
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    --pad: 0;
  }

  .menu :is(a, button), l-menu :is(a, button) {
    --bg: transparent;
    /* Deliberately does NOT set --fg. `--fg: inherit` on a registered slot
       resolves to the parent's value, which is guaranteed-invalid, so paint
       falls through to revert-layer and links come back UA blue. Letting
       elements.css supply --fg is both simpler and correct. */
    --border-width: 0;
    --radius: var(--radius-sm);
    --pad: 0.4em 0.65em;
    --gap: 0.5em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
  }

  .menu :is(a, button):hover, l-menu :is(a, button):hover,
  .menu :is(a, button)[aria-current], l-menu :is(a, button)[aria-current] {
    --bg: var(--tone-soft);
    --fg: var(--tone-ink);
  }

  .crumbs, l-crumbs {
    --fg: var(--ink-muted);
    --gap: 0.5em;
    --font-size: calc(0.85rem * var(--scale));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    --pad: 0;
  }

  .crumbs > li::after, l-crumbs > li::after {
    content: var(--crumb-sep, "/");
    color: var(--line);
    margin-inline-start: 0.5em;
  }

  .crumbs > li:last-child::after, l-crumbs > li:last-child::after { content: none }

  .steps, l-steps {
    --gap: 0;
    display: flex;
    counter-reset: largen-step;
    list-style: none;
    margin: 0;
    --pad: 0;
  }

  .steps > li, l-steps > li {
    counter-increment: largen-step;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 0.35em;
    font-size: calc(0.82rem * var(--scale));
    text-align: center;
  }

  .steps > li::before, l-steps > li::before {
    content: counter(largen-step);
    display: grid;
    place-items: center;
    inline-size: 1.9em;
    block-size: 1.9em;
    border-radius: 50%;
    background-color: var(--surface);
    color: var(--ink-muted);
  }

  .steps > li:is([aria-current], [data-done])::before,
  l-steps > li:is([aria-current], [data-done])::before {
    background-color: var(--tone);
    color: var(--tone-contrast);
  }

  .bubble, l-bubble {
    --bg: var(--surface);
    --fg: var(--ink);
    --radius: var(--radius-lg);
    --pad: 0.5em 0.8em;
    display: block;
    inline-size: fit-content;
    max-inline-size: 46ch;
  }

  .bubble[data-side="end"], l-bubble[data-side="end"] {
    --bg: var(--tone);
    --fg: var(--tone-contrast);
    margin-inline-start: auto;
  }

  .avatar, l-avatar {
    --bg: var(--surface);
    --fg: var(--ink-muted);
    --radius: 50%;
    --font-size: calc(0.75rem * var(--scale));
    display: inline-grid;
    place-items: center;
    inline-size: calc(2.25rem * var(--scale));
    block-size: calc(2.25rem * var(--scale));
    overflow: hidden;
    vertical-align: middle;
  }

  .avatar > img, l-avatar > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* --- Overlay ---------------------------------------------------------- */
  .tip, l-tip {
    position: relative;
    display: inline-block;
  }

  .tip::after, l-tip::after {
    content: attr(data-tip);
    position: absolute;
    inset-block-end: 100%;
    inset-inline-start: 50%;
    translate: -50% -0.35em;
    padding: 0.35em 0.55em;
    border-radius: var(--radius-sm);
    background-color: var(--ink);
    color: var(--canvas);
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--speed);
  }

  .tip:is(:hover, :focus-visible)::after,
  l-tip:is(:hover, :focus-visible)::after { opacity: 1 }

  /* --- Forms ------------------------------------------------------------
   *
   * The controls themselves are not here. `input`, `select`, `textarea` and
   * `button` are themed in src/elements.css and already answer to tone, variant,
   * size and every real DOM state, so a component class for them would be a
   * worse copy of something the platform provides. What was missing is the
   * grouping: a label, a control, and the hint or error that belongs to it.
   */

  .field, l-field {
    --gap: 0.35em;
    display: flex;
    flex-direction: column;
  }

  .field-label, l-field-label {
    --font-size: calc(0.875rem * var(--scale));
    --weight: var(--weight-medium);
    display: block;
  }

  .field-hint, l-field-hint {
    --fg: var(--ink-muted);
    --font-size: calc(0.8125rem * var(--scale));
    display: block;
  }

  /* Sets --tone rather than reading --danger directly. That is how a component
     chooses the tone its own subtree resolves against; reaching past --tone* to
     a raw semantic token is the thing the contract forbids, and this is not it. */
  .field-error, l-field-error {
    --tone: var(--danger);
    --fg: var(--tone-ink);
    --font-size: calc(0.8125rem * var(--scale));
    display: block;
  }

  /* --- Containers -------------------------------------------------------- */

  /* A themed <table> still overflows a narrow screen. This is the scroll box,
     and it is deliberately not a table component: the table is already themed. */
  .table-wrap, l-table-wrap {
    --border-color: var(--line);
    --border-width: var(--hairline);
    --border-style: solid;
    --radius: var(--radius-md);
    display: block;
    overflow-x: auto;
    max-inline-size: 100%;
  }

  .toolbar, l-toolbar {
    --gap: 0.5em;
    --pad: 0.5em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  /* --- Empty state ------------------------------------------------------- */

  .empty, l-empty {
    --gap: 0.4em;
    --pad: 2.5em 1.5em;
    --fg: var(--ink-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .empty-title, l-empty-title {
    --fg: var(--ink);
    --weight: var(--weight-medium);
    --font-size: calc(1rem * var(--scale));
    display: block;
  }

  .empty-note, l-empty-note {
    --font-size: calc(0.875rem * var(--scale));
    display: block;
    max-inline-size: 40ch;
  }
}