/*
 * App register components (dashboard, account, auth). Built on the Fizzy
 * primitives (.panel, .btn, .input, .popup) and the brand tokens in
 * _global.css. Public layouts don't load this register.
 */
@layer components {
  /* Wordmark: Bricolage 800, tight tracking, same as the public register */
  .wordmark {
    color: var(--color-ink);
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
    text-decoration: none;
  }

  .wordmark--small {
    font-size: var(--text-small);
    min-block-size: 0;
  }

  /* Nav trigger: wordmark + current restaurant, no logo image */
  .nav__trigger {
    --input-padding: 0.4em 2em 0.4em 0.6em;

    strong {
      font-weight: 700;
    }
  }

  .nav__wordmark {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    font-weight: 800;
    letter-spacing: -0.04em;
  }

  /* Page heads inside panels */
  .page-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: start;
  }

  .page-head--centered {
    align-items: center;
    text-align: center;
  }

  .page-head__kicker {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .page-head__title {
    font-size: var(--text-x-large);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin: 0;
  }

  .page-head__lead {
    color: var(--color-ink-dark);
    margin: 0;
  }

  /* Section heading with a dashed rule (settings, dish groups) */
  .divider {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    font-size: var(--text-large);
    font-weight: 800;
    letter-spacing: -0.035em;
    text-align: start;

    &::after {
      content: "";
      flex: 1;
      block-size: 0;
      border-block-start: 1px dashed var(--color-ink-medium);
      translate: 0 -0.35em;
    }
  }

  .separator--horizontal {
    border: 0;
    border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter));
    margin: 0;
  }

  /* Tiles: a bordered block on the panel surface */
  .tile {
    background-color: var(--tile-bg, var(--color-surface));
    border: 1px solid var(--tile-border, var(--color-ink-lighter));
    border-radius: var(--radius-card);
    padding: 16px;
    text-align: start;
  }

  .tile--shade {
    --tile-bg: var(--color-ink-lightest);
    --tile-border: transparent;
  }

  .tile--accent {
    --tile-bg: var(--color-accent-soft);
    --tile-border: transparent;
  }

  .tile__label {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
  }

  .tile__value {
    font-size: var(--text-xx-large);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 4px 0 0;
    font-variant-numeric: tabular-nums;
  }

  .tile__url {
    font-size: var(--text-medium);
    font-weight: 700;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
    margin: 4px 0 0;
  }

  /* Setup steps on the overview */
  .setup {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    counter-reset: setup;
  }

  .setup__step {
    counter-increment: setup;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    padding-block: 12px;
    text-align: start;

    & + & {
      border-block-start: 1px dashed var(--color-ink-lighter);
    }

    &::before {
      content: counter(setup);
      display: grid;
      place-items: center;
      inline-size: 28px;
      block-size: 28px;
      border: 1px solid var(--color-ink-medium);
      border-radius: 50%;
      font-size: var(--text-x-small);
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
  }

  .setup__step--done {
    color: var(--color-ink-dark);

    &::before {
      content: "✓";
      background-color: var(--color-positive);
      border-color: var(--color-positive);
      color: var(--color-canvas);
    }
  }

  .setup__step--next::before {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-ink);
  }

  .setup__title {
    display: block;
    font-weight: 700;
  }

  .setup__body {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    margin: 2px 0 0;
  }

  /* Badges: 3px radius, short caps */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 2px 7px;
    border: 1px solid currentColor;
    border-radius: var(--radius-badge);
    color: var(--color-ink-dark);
    font-size: var(--text-xx-small);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .badge--positive {
    background-color: var(--color-positive-soft);
    color: var(--color-positive);
  }

  .badge--negative {
    background-color: var(--color-negative-soft);
    color: var(--color-negative);
  }

  .badge--accent {
    background-color: var(--color-accent-soft);
    color: var(--color-link);
  }

  .badge--ink {
    background-color: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-canvas);
  }

  /* Orders list */
  .order-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: start;
  }

  .order-list__item {
    display: grid;
    gap: 4px;
    padding-block: 12px;

    & + & {
      border-block-start: 1px dashed var(--color-ink-medium);
    }
  }

  .order-list__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }

  .order-list__reference {
    font-size: var(--text-medium);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  .order-list__meta {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
  }

  .order-list__items {
    font-size: var(--text-small);
  }

  /* Forms */
  .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: start;
  }

  .field__label {
    font-size: var(--text-small);
    font-weight: 700;
  }

  .field__hint {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    font-weight: 400;
  }

  .form-errors {
    background-color: var(--color-negative-soft);
    border-inline-start: 3px solid var(--color-negative);
    color: var(--color-negative);
    font-size: var(--text-small);
    padding: 12px;
    text-align: start;

    p, ul {
      margin: 0;
    }

    ul {
      padding-inline-start: 1.2em;
    }
  }

  .form-note {
    background-color: var(--color-accent-soft);
    border-radius: var(--radius-control);
    color: var(--color-ink);
    font-size: var(--text-small);
    padding: 12px;
    text-align: start;
  }

  .choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
    cursor: pointer;

    input {
      accent-color: var(--color-link);
      inline-size: 18px;
      block-size: 18px;
      margin: 0;
    }
  }

  /* One-time code entry */
  .code-input {
    --input-padding: 0.5em 0;

    font-family: var(--font-sans);
    font-size: var(--text-x-large);
    font-weight: 800;
    letter-spacing: 0.3em;
    text-align: center;
    text-indent: 0.3em;
    text-transform: uppercase;
  }

  .dev-code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 16px auto 0;
    max-inline-size: 42ch;
    padding: 12px 16px;
    border: 1px dashed var(--color-ink-medium);
    border-radius: var(--radius-card);
    font-size: var(--text-small);

    code {
      font-family: var(--font-sans);
      font-size: var(--text-large);
      font-weight: 800;
      letter-spacing: 0.2em;
    }
  }

  .kbd {
    border: 1px solid var(--color-ink-lighter);
    border-radius: var(--radius-badge);
    font-family: var(--font-sans);
    font-size: var(--text-xx-small);
    font-weight: 700;
    padding: 0 0.4em;
  }

  /* Entry register (auth pages): everything centered on paper */
  body.entry #main {
    display: grid;
    place-items: start center;
    padding-block: 16px 48px;
  }

  body.entry .panel {
    --panel-padding: 24px;
    inline-size: min(100%, 30rem);
    text-align: start;

    @media (min-width: 640px) {
      --panel-padding: 32px;
    }
  }

  body.entry .header nav {
    padding-block: 8px;
  }

  /* Restaurant picker (session menu) */
  .picker {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
  }

  .picker__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-block-size: 56px;
    padding: 12px 16px;
    border: 1px solid var(--color-ink-medium);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-weight: 700;
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-accent-soft);
        border-color: var(--color-ink);
      }
    }
  }

  /* Footer theme toggle: light is the default, this switches html[data-theme] */
  .theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
    padding: 0 12px;
    border: 1px solid var(--color-ink-medium);
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--color-ink-dark);
    font: inherit;
    font-size: var(--text-x-small);
    font-weight: 600;
    cursor: pointer;

    &[aria-pressed="true"] {
      background: var(--color-ink-lightest);
      color: var(--color-ink);
    }
  }

  .theme-toggle__icon {
    inline-size: 14px;
    block-size: 14px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  }

  .kitchen__badge.theme-toggle {
    min-block-size: 44px;
    font-size: var(--text-small);
  }

  /* Legal links in the app footer */
  #footer nav[aria-label="Rechtliches"] a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
  }

  /* Profile avatar */
  .avatar--profile {
    --avatar-size: 7rem;
    --btn-size: 7rem;
    border: 1px solid var(--color-ink-lighter);
  }

  .user-edit-link {
    --btn-min-size: 2.75rem;
  }
}