/*
 * 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 {
    font-family: var(--font-display);
    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 {
    font-family: var(--font-display);
    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;
    max-inline-size: 65ch;
  }

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

  /* Google-Unternehmensprofil guide: three illustrated steps, no real screenshots */
  .gbp-guide {
    margin-block-start: 8px;
  }

  .gbp-guide summary {
    cursor: pointer;
    font-size: var(--text-small);
  }

  .gbp-guide__steps {
    display: grid;
    gap: 12px;
    padding: 0;
    margin: 12px 0 0;
    list-style: none;
    counter-reset: gbp;
  }

  .gbp-guide__step {
    counter-increment: gbp;
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px;
    align-items: center;
    font-size: var(--text-small);
  }

  .gbp-guide__step p {
    margin: 0;
  }

  .gbp-guide__step p::before {
    content: counter(gbp) ". ";
    font-weight: 700;
  }

  .gbp-guide__shot {
    display: grid;
    gap: 4px;
    padding: 8px;
    background-color: var(--color-ink-lightest);
    border: 1px solid var(--color-ink-lighter);
    border-radius: var(--radius-card);
    font-size: 12px;
    line-height: 1.2;
    color: var(--color-ink-dark);
  }

  .gbp-guide__shot-bar,
  .gbp-guide__shot-row,
  .gbp-guide__shot-input,
  .gbp-guide__shot-btn {
    display: block;
    padding: 3px 6px;
    border-radius: 3px;
    background-color: var(--color-surface);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .gbp-guide__shot-btn {
    text-align: center;
    font-weight: 700;
  }

  /* The element to tap: outlined, not filled — it is Google's control, not ours */
  .gbp-guide__shot-btn--hot,
  .gbp-guide__shot-row--hot {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
    font-weight: 700;
  }

  .gbp-guide__shot-input {
    border: 1px solid var(--color-ink-medium);
    white-space: normal;
    word-break: break-all;
  }

  /* A tile between the steps (the starter kit): no counter, no marker */
  .setup__tile {
    padding-block: 12px;
    border-block-start: 1px dashed var(--color-ink-lighter);

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

  .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);
  }

  /* Sizes and extras of a dish: groups on the dish page, options on the group page */
  .option-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: start;
  }

  .option-list__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-block: 12px;
  }

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

  .option-list__item--inactive .input {
    color: var(--color-ink-medium);
  }

  .option-list__form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;

    .input {
      flex: 2 1 10rem;
    }

    .option-list__price {
      flex: 1 1 6rem;
    }
  }


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

  .choice input { flex-shrink: 0; }

  /* AGB and AV-Vertrag: the band on every dashboard page until someone agreed */
  .terms-band {
    background-color: var(--color-accent-soft);
    border-block-end: 1px solid var(--color-ink-lighter);
    color: var(--color-ink);
    padding: 16px;
  }

  .terms-band__inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-inline: auto;
    max-inline-size: 72ch;
  }

  .terms-band__text {
    font-size: var(--text-small);
    margin: 0;
  }

  .terms-band__form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
  }

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

/* Success moment after a directory claim (Design-Review 10A): the menu is
   being imported, a skeleton stands in for it. No spinner. */
.skeleton-menu {
  display: grid;
  gap: 10px;
  padding-block: 12px;
}

.skeleton-menu__row {
  display: block;
  block-size: 16px;
  border-radius: 4px;
  background-color: var(--color-ink-lighter);
  animation: skeleton-pulse 1s ease-in-out infinite alternate;
}

.skeleton-menu__row--title {
  block-size: 22px;
  inline-size: 45%;
}

.skeleton-menu__row--short {
  inline-size: 70%;
}

@keyframes skeleton-pulse {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-menu__row {
    animation: none;
  }
}