/*
 * Table Tribe web shell
 *
 * Page structure, header, navigation, flash messages, and status display for
 * the server-rendered browser surfaces. Uses the tokens in token.css.
 */

body {
  margin: 0;
  background-color: var(--tt-color-canvas);
  color: var(--tt-color-text-primary);
  font-family: var(--tt-text-body-large-family);
  font-size: var(--tt-text-body-large-size);
  line-height: var(--tt-text-body-large-line-height);
}

/* Visible only for keyboard users. */
.tt-skip-link {
  position: absolute;
  inset-inline-start: var(--tt-space-md);
  top: calc(-1 * var(--tt-space-xxl));
  z-index: 10;
  padding: var(--tt-space-sm) var(--tt-space-md);
  background-color: var(--tt-color-primary);
  color: var(--tt-color-on-primary);
  text-decoration: none;
  border-radius: var(--tt-radius-sharp);
}

.tt-skip-link:focus-visible {
  top: var(--tt-space-md);
  outline: var(--tt-border-width-focus) solid var(--tt-color-border-focus);
  outline-offset: 2px;
}

.tt-shell-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-sm) var(--tt-space-lg);
  padding: var(--tt-space-md) var(--tt-space-lg);
  background-color: var(--tt-color-surface);
  border-bottom: var(--tt-border-width-default) solid var(--tt-color-border-subtle);
}

.tt-wordmark {
  font-family: var(--tt-text-headline-small-family);
  font-size: var(--tt-text-headline-small-size);
  line-height: var(--tt-text-headline-small-line-height);
  font-weight: var(--tt-text-headline-small-weight);
  color: var(--tt-color-primary);
}

.tt-shell-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tt-space-sm) var(--tt-space-lg);
}

.tt-nav-link,
.tt-nav-button {
  min-height: var(--tt-size-touch-target-min);
  display: inline-flex;
  align-items: center;
  padding: var(--tt-space-xs) var(--tt-space-sm);
  background: none;
  border: none;
  border-radius: var(--tt-radius-sharp);
  color: var(--tt-color-text-primary);
  font-family: var(--tt-text-body-large-family);
  font-size: var(--tt-text-body-large-size);
  text-decoration: underline;
  text-decoration-color: var(--tt-color-border-subtle);
  text-underline-offset: var(--tt-space-xxs);
  cursor: pointer;
}

.tt-nav-link:hover,
.tt-nav-button:hover {
  text-decoration-color: var(--tt-color-text-accent);
}

.tt-nav-link:focus-visible,
.tt-nav-button:focus-visible,
.tt-link:focus-visible {
  outline: var(--tt-border-width-focus) solid var(--tt-color-border-focus);
  outline-offset: 2px;
}

.tt-nav-form {
  margin: 0;
}

.tt-main {
  max-width: 960px;
  margin-inline: auto;
  padding: var(--tt-space-xl) var(--tt-space-lg) var(--tt-space-xxl);
}

/* Flash messages communicate session and form state. */
.tt-flash {
  max-width: 960px;
  margin: var(--tt-space-md) auto 0;
  padding: var(--tt-space-sm) var(--tt-space-md);
  border: var(--tt-border-width-default) solid;
  border-radius: var(--tt-radius-sharp);
}

.tt-flash--notice {
  background-color: var(--tt-color-success-surface);
  border-color: var(--tt-color-success-accent);
  color: var(--tt-color-primary);
}

.tt-flash--alert {
  background-color: var(--tt-color-danger-surface);
  border-color: var(--tt-color-danger-accent);
  color: var(--tt-color-danger);
}

.tt-flash__message {
  margin: 0;
}

/* Content panels and status display. */
.tt-panel {
  background-color: var(--tt-color-surface);
  border: var(--tt-border-width-default) solid var(--tt-color-border-subtle);
  border-radius: var(--tt-radius-sharp);
  padding: var(--tt-space-xl);
}

.tt-panel__title {
  margin: 0 0 var(--tt-space-sm);
  font-family: var(--tt-text-headline-family);
  font-size: var(--tt-text-headline-size);
  line-height: var(--tt-text-headline-line-height);
  font-weight: var(--tt-text-headline-weight);
}

.tt-panel__lede,
.tt-panel__note {
  margin: 0 0 var(--tt-space-lg);
  color: var(--tt-color-text-secondary);
  max-width: 60ch;
}

.tt-panel__note {
  margin: var(--tt-space-lg) 0 0;
}

.tt-eyebrow {
  margin: 0 0 var(--tt-space-xs);
  font-family: var(--tt-text-eyebrow-family);
  font-size: var(--tt-text-eyebrow-size);
  line-height: var(--tt-text-eyebrow-line-height);
  font-weight: var(--tt-text-eyebrow-weight);
  letter-spacing: var(--tt-text-eyebrow-letter-spacing);
  text-transform: var(--tt-text-eyebrow-transform);
  color: var(--tt-color-text-accent);
}

.tt-status-list {
  margin: 0;
  display: grid;
  gap: var(--tt-space-sm);
}

.tt-status-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-md);
  padding: var(--tt-space-sm) 0;
  border-bottom: var(--tt-divider-width) solid var(--tt-divider-color);
}

.tt-status-list__term {
  font-weight: var(--tt-font-weight-medium);
}

.tt-status-list__value {
  margin: 0;
}

/* Status chips always pair color with text. */
.tt-status {
  display: inline-flex;
  align-items: center;
  min-height: var(--tt-space-xl);
  padding: var(--tt-space-xxs) var(--tt-space-sm);
  border-radius: var(--tt-radius-pill);
  font-size: var(--tt-text-label-medium-size);
  line-height: var(--tt-text-label-medium-line-height);
  font-weight: var(--tt-text-label-medium-weight);
  letter-spacing: var(--tt-text-label-medium-letter-spacing);
  text-transform: var(--tt-text-label-transform);
}

.tt-status--active,
.tt-status--approved {
  background-color: var(--tt-color-success-surface);
  color: var(--tt-color-primary);
  border: var(--tt-border-width-default) solid var(--tt-color-success-accent);
}

.tt-status--pending,
.tt-status--draft,
.tt-status--in_review,
.tt-status--empty {
  background-color: var(--tt-color-info-surface);
  color: var(--tt-color-info);
  border: var(--tt-border-width-default) solid var(--tt-color-info-accent);
}

.tt-status--rejected,
.tt-status--suspended {
  background-color: var(--tt-color-danger-surface);
  color: var(--tt-color-danger);
  border: var(--tt-border-width-default) solid var(--tt-color-danger-accent);
}