/*
 * appcore web shell styles (spec §13, brief item 13).
 *
 * Scoped under #app-shell, themable via CSS custom properties so each
 * landing page can set its own brand colours before this stylesheet loads
 * (or after — properties are read live):
 *
 *   --app-ink     text colour
 *   --app-accent  primary/brand colour (buttons, links, focus rings)
 *   --app-bg      panel background colour
 *   --app-font    font stack
 *
 * The sign-in/out control renders into `[data-app-shell="auth"]` elements
 * that live OUTSIDE #app-shell (each landing page's own header hosts it), so
 * `.app-shell-auth-btn` is styled by class name with the same custom
 * properties, falling back to sensible defaults when a page sets them only
 * inside #app-shell.
 */

#app-shell {
  --app-ink: #1a1a1a;
  --app-accent: #2454ff;
  --app-bg: #ffffff;
  --app-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  color: var(--app-ink);
  background: var(--app-bg);
  font-family: var(--app-font);
  line-height: 1.5;
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
}

#app-shell *,
#app-shell *::before,
#app-shell *::after {
  box-sizing: inherit;
}

#app-shell a {
  color: var(--app-accent);
}

#app-shell .app-shell__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#app-shell .app-shell__status:not(:empty) {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  white-space: normal;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--app-accent) 12%, var(--app-bg));
  border: 1px solid color-mix(in srgb, var(--app-accent) 35%, transparent);
}

#app-shell .app-shell__main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

#app-shell .app-shell__panel {
  border: 1px solid color-mix(in srgb, var(--app-ink) 15%, transparent);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}

#app-shell .app-shell__panel--danger {
  border-color: color-mix(in srgb, #c0392b 40%, transparent);
}

#app-shell .app-shell__panel h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

#app-shell .app-shell__balance {
  font-size: 1.5rem;
  font-weight: 600;
}

#app-shell .app-shell__notice {
  color: color-mix(in srgb, var(--app-ink) 70%, transparent);
}

#app-shell .app-shell__warning {
  color: #8a5300;
  font-weight: 600;
}

#app-shell .app-shell__packs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

#app-shell .app-shell__unit {
  border-top: 1px solid color-mix(in srgb, var(--app-ink) 10%, transparent);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

#app-shell .app-shell__unit:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

#app-shell .app-shell__field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

#app-shell .app-shell__field--checkbox {
  align-items: flex-start;
}

#app-shell .app-shell__field label {
  font-weight: 600;
  flex-basis: 100%;
}

#app-shell .app-shell__field--checkbox label {
  flex-basis: auto;
  font-weight: 400;
}

#app-shell .app-shell__input {
  width: 100%;
  padding: 0.5rem;
  font: inherit;
  color: inherit;
  background: var(--app-bg);
  border: 1px solid color-mix(in srgb, var(--app-ink) 30%, transparent);
  border-radius: 0.375rem;
}

#app-shell .app-shell__checkbox {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  margin-top: 0.2rem;
}

#app-shell .app-shell__consent-label {
  max-width: 40rem;
}

#app-shell .app-shell__btn,
.app-shell-auth-btn {
  font: inherit;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: 1px solid color-mix(in srgb, var(--app-ink) 30%, transparent);
  background: var(--app-bg);
  color: var(--app-ink);
  cursor: pointer;
}

#app-shell .app-shell__btn:hover:not(:disabled),
.app-shell-auth-btn:hover {
  border-color: var(--app-accent);
}

#app-shell .app-shell__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#app-shell .app-shell__btn--primary,
.app-shell-auth-btn {
  background: var(--app-accent);
  border-color: var(--app-accent);
  color: #fff;
}

#app-shell .app-shell__btn--danger {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}

#app-shell .app-shell__btn:focus-visible,
#app-shell .app-shell__input:focus-visible,
#app-shell .app-shell__checkbox:focus-visible,
#app-shell a:focus-visible,
.app-shell-auth-btn:focus-visible {
  outline: 3px solid var(--app-accent);
  outline-offset: 2px;
}

#app-shell .app-shell__key-reveal:empty {
  display: none;
}

#app-shell .app-shell__key-value {
  display: block;
  padding: 0.5rem;
  margin: 0.5rem 0;
  background: color-mix(in srgb, var(--app-ink) 6%, var(--app-bg));
  border-radius: 0.375rem;
  word-break: break-all;
}

#app-shell .app-shell__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

#app-shell .app-shell__table th,
#app-shell .app-shell__table td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--app-ink) 12%, transparent);
  vertical-align: top;
}

#app-shell .app-shell__download-link {
  margin-right: 0.5rem;
}

#app-shell .app-shell__review-item {
  border-top: 1px solid color-mix(in srgb, var(--app-ink) 12%, transparent);
  padding-top: 1rem;
  margin-top: 1rem;
}

#app-shell .app-shell__review-item:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

#app-shell .app-shell__review-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
}

#app-shell .app-shell__review-fields dt {
  font-weight: 600;
}

#app-shell .app-shell__review-fields dd {
  margin: 0;
}

@media (max-width: 480px) {
  #app-shell {
    padding: 0.75rem;
  }

  #app-shell .app-shell__table,
  #app-shell .app-shell__table thead,
  #app-shell .app-shell__table tbody,
  #app-shell .app-shell__table tr,
  #app-shell .app-shell__table th,
  #app-shell .app-shell__table td {
    display: block;
    width: 100%;
  }

  #app-shell .app-shell__table thead {
    display: none;
  }

  #app-shell .app-shell__table td {
    border-bottom: none;
    padding: 0.15rem 0.5rem;
  }

  #app-shell .app-shell__table tr {
    border-bottom: 1px solid color-mix(in srgb, var(--app-ink) 12%, transparent);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
  }
}

@media (prefers-color-scheme: dark) {
  #app-shell:not([data-theme="light"]) {
    --app-ink: #f2f2f2;
    --app-bg: #16181d;
  }
}

#app-shell[data-theme="dark"] {
  --app-ink: #f2f2f2;
  --app-bg: #16181d;
}