/*
  Clay Cafe — application styles.

  Every color, radius, space, font size, shadow and duration is a theme token generated by
  claycafe/domain/theme.py and inlined in <head>. This file never hard-codes those values
  (tests/unit/test_forbidden_patterns.py enforces it). Breakpoints are the only literal sizes,
  because custom properties cannot be used in media queries:
    40em  small tablets and up
    56em  desktop layout (sidebar instead of bottom tabs)
    80em  wide desktop
*/

/* ---------------------------------------------------------------- derived tokens */
/* Re-declared on .theme-preview so the editor's preview derives them from its own theme. */
:root,
.theme-preview {
  --icon-xs: 0.875em;
  --icon-sm: 1em;
  --icon-md: 1.25em;
  --icon-lg: 1.75em;
  --hairline: var(--border-w) solid var(--border);
  --tabbar-h: calc(var(--touch) + var(--space-3));
  --appbar-h: calc(var(--control-h) + var(--space-4));
  --rail-w: calc(var(--touch) + var(--space-4) * 2);
  --toast-offset: var(--space-4);
  --dot: calc(var(--space-2) - var(--border-w));
  --avatar-md: calc(var(--control-h) - var(--space-1));
  --avatar-sm: var(--control-h-sm);
  --avatar-lg: calc(var(--control-h) * 1.6);
  --transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  --measure: 68ch;
  --focus: 0 0 0 calc(var(--border-w) * 3) var(--focus-ring);
  --sheet-max: 32rem;
  --dialog-sm: 26rem;
  --dialog-md: 36rem;
  --dialog-lg: 52rem;
  --menu-min: 12rem;
  --card-min: 10rem;
  --item-date-w: calc(var(--control-h) * 1.25);
}

/* ---------------------------------------------------------------- reset & base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--space-8);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--heading-tracking);
  color: var(--text);
}

h1 {
  font-size: var(--text-2xl);
}

h2 {
  font-size: var(--text-lg);
}

h3 {
  font-size: var(--text-base);
}

p {
  margin: 0;
}

a {
  color: var(--accent-text);
  text-decoration-thickness: var(--border-w);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--accent-hover);
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

hr {
  border: 0;
  border-top: var(--hairline);
  margin: var(--space-6) 0;
}

code,
kbd,
pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

[x-cloak],
[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-md);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.num,
.tabular {
  font-variant-numeric: var(--numeric);
}

.muted {
  color: var(--text-muted);
}

.subtle {
  color: var(--text-subtle);
}

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

.mono {
  font-family: var(--font-mono);
}

.nowrap {
  white-space: nowrap;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: var(--space-3);
}

/* layout primitives */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stack--sm {
  gap: var(--space-2);
}

.stack--lg {
  gap: var(--space-8);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.cluster--end {
  justify-content: flex-end;
}

.cluster--between {
  justify-content: space-between;
}

.split {
  display: grid;
  gap: var(--space-8);
}

.form-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 40em) {
  .form-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .form-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid .span-all {
    grid-column: 1 / -1;
  }
}

@media (min-width: 56em) {
  .form-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .split {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* ---------------------------------------------------------------- app shell */
.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 100dvh;
}

.sidebar {
  display: none;
}

.appbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--appbar-h);
  padding: var(--space-2) var(--space-4);
  padding-top: calc(var(--space-2) + env(safe-area-inset-top));
  background: var(--bg);
  border-bottom: var(--hairline);
}

.appbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.main {
  min-width: 0;
  outline: none;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-6));
}

.content {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4);
}

.content--narrow {
  max-width: calc(var(--content-max) * 0.6);
}

.tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-nav);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: var(--hairline);
}

.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--touch);
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: var(--transition);
}

.tabbar__item[aria-current] {
  color: var(--accent-text);
}

.tabbar__item:hover {
  color: var(--text);
}

.tabbar__item--capture .icon {
  width: calc(var(--control-h) * 0.9);
  height: calc(var(--control-h) * 0.9);
  padding: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);
}

.sheet-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.sheet-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--hairline);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: var(--transition);
}

.nav-link:hover {
  background: var(--surface-3);
  color: var(--text);
}

.nav-link[aria-current] {
  background: var(--accent-soft);
  color: var(--accent-text);
}

@media (min-width: 56em) {
  .app {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-rows: 1fr;
  }

  .app[data-sidebar="rail"] {
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
  }

  .appbar,
  .tabbar {
    display: none;
  }

  .main {
    padding-bottom: var(--space-12);
  }

  .content {
    padding: var(--space-8) var(--space-8);
  }

  .sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100dvh;
    padding: var(--space-4) var(--space-3);
    background: var(--surface-2);
    border-right: var(--hairline);
    overflow-y: auto;
  }

  .sidebar__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-1);
  }

  .sidebar__footer {
    margin-top: auto;
    display: grid;
    gap: var(--space-3);
  }

  [data-sidebar="rail"] .sidebar__label,
  [data-sidebar="rail"] .sidebar__name,
  [data-sidebar="rail"] .sidebar__search .kbd,
  [data-sidebar="rail"] .segmented__option span {
    display: none;
  }

  [data-sidebar="rail"] .nav-link,
  [data-sidebar="rail"] .sidebar__search,
  [data-sidebar="rail"] .sidebar__brand {
    justify-content: center;
    padding: 0;
  }

  [data-sidebar="rail"] .segmented {
    flex-direction: column;
  }
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-2);
  color: var(--text);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  text-decoration: none;
}

.sidebar__logo {
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.sidebar__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-md);
  color: var(--text-subtle);
  text-align: left;
  transition: var(--transition);
}

.sidebar__search:hover {
  border-color: var(--border-strong);
  color: var(--text-muted);
}

.sidebar__search .sidebar__label {
  flex: 1;
}

.sidebar__hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  color: var(--text-subtle);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

.kbd {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-1);
  border: var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--text-subtle);
  font-size: var(--text-xs);
  line-height: var(--leading);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- icon */
.icon {
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--xs {
  width: var(--icon-xs);
  height: var(--icon-xs);
}

.icon--sm {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.icon--lg {
  width: var(--icon-lg);
  height: var(--icon-lg);
  stroke-width: 1.5;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-4);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: var(--transition);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
}

.btn--primary:hover:not(:disabled) {
  background: var(--accent-hover);
  color: var(--accent-contrast);
}

.btn--primary:active:not(:disabled) {
  background: var(--accent-press);
}

.btn--secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: var(--shadow-1);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--surface-3);
  color: var(--text);
}

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--surface-3);
  color: var(--text);
}

.btn--danger {
  background: var(--danger);
  color: var(--danger-contrast);
}

.btn--danger:hover:not(:disabled) {
  background: var(--danger-text);
  color: var(--danger-soft);
}

.btn--sm {
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  gap: var(--space-1);
}

.btn--lg {
  min-height: calc(var(--control-h) * 1.3);
  padding: 0 var(--space-5);
  font-size: var(--text-lg);
}

.btn--icon {
  width: var(--control-h);
  padding: 0;
}

.btn--sm.btn--icon {
  width: var(--control-h-sm);
}

.btn--block {
  width: 100%;
}

.btn__spinner {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--icon-md);
  height: var(--icon-md);
  border: calc(var(--border-w) * 2) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: spin calc(var(--dur) * 5) linear infinite;
}

.btn.htmx-request,
form.htmx-request .btn[type="submit"] {
  pointer-events: none;
}

.btn.htmx-request > :not(.btn__spinner),
form.htmx-request .btn[type="submit"] > :not(.btn__spinner) {
  opacity: 0;
}

.btn.htmx-request .btn__spinner,
form.htmx-request .btn[type="submit"] .btn__spinner {
  display: block;
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

@media (max-width: 55.99em) {
  .btn {
    min-height: var(--touch);
  }

  .btn--icon {
    width: var(--touch);
  }

  .btn--sm {
    min-height: var(--control-h);
  }

  .btn--sm.btn--icon {
    width: var(--control-h);
  }
}

/* ---------------------------------------------------------------- tones */
.tone-greenware { --tone: var(--status-greenware); --tone-soft: var(--status-greenware-soft); --tone-text: var(--status-greenware-text); }
.tone-bisque { --tone: var(--status-bisque); --tone-soft: var(--status-bisque-soft); --tone-text: var(--status-bisque-text); }
.tone-glazed-unfired { --tone: var(--status-glazed-unfired); --tone-soft: var(--status-glazed-unfired-soft); --tone-text: var(--status-glazed-unfired-text); }
.tone-ready-for-pickup { --tone: var(--status-ready-for-pickup); --tone-soft: var(--status-ready-for-pickup-soft); --tone-text: var(--status-ready-for-pickup-text); }
.tone-picked-up { --tone: var(--status-picked-up); --tone-soft: var(--status-picked-up-soft); --tone-text: var(--status-picked-up-text); }
.tone-abandoned { --tone: var(--status-abandoned); --tone-soft: var(--status-abandoned-soft); --tone-text: var(--status-abandoned-text); }
.tone-self-glaze { --tone: var(--self-glaze); --tone-soft: var(--self-glaze-soft); --tone-text: var(--self-glaze-text); }
.tone-success { --tone: var(--success); --tone-soft: var(--success-soft); --tone-text: var(--success-text); }
.tone-warning { --tone: var(--warning); --tone-soft: var(--warning-soft); --tone-text: var(--warning-text); }
.tone-danger { --tone: var(--danger); --tone-soft: var(--danger-soft); --tone-text: var(--danger-text); }
.tone-info { --tone: var(--info); --tone-soft: var(--info-soft); --tone-text: var(--info-text); }
.tone-accent { --tone: var(--accent); --tone-soft: var(--accent-soft); --tone-text: var(--accent-text); }
.tone-neutral { --tone: var(--text-subtle); --tone-soft: var(--surface-3); --tone-text: var(--text-muted); }

/* ---------------------------------------------------------------- badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  white-space: nowrap;
}

.badge--status {
  color: var(--text-muted);
  gap: var(--space-2);
}

.dot {
  flex: none;
  width: var(--dot);
  height: var(--dot);
  border-radius: var(--radius-pill);
  background: var(--tone, var(--text-subtle));
}

.badge--soft {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--tone-soft, var(--surface-3));
  color: var(--tone-text, var(--text-muted));
  font-size: var(--text-xs);
}

.badge--plain {
  padding: var(--space-1) var(--space-2);
  border: var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-5);
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-variant-numeric: var(--numeric);
}

/* ---------------------------------------------------------------- avatar */
.avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radius-pill);
  background: var(--av-bg);
  color: var(--av-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.avatar--sm {
  width: var(--avatar-sm);
  height: var(--avatar-sm);
  font-size: var(--text-xs);
}

.avatar--lg {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  font-size: var(--text-xl);
}

.avatar--h0 { --av-bg: var(--avatar-0); --av-text: var(--avatar-0-text); }
.avatar--h1 { --av-bg: var(--avatar-1); --av-text: var(--avatar-1-text); }
.avatar--h2 { --av-bg: var(--avatar-2); --av-text: var(--avatar-2-text); }
.avatar--h3 { --av-bg: var(--avatar-3); --av-text: var(--avatar-3-text); }
.avatar--h4 { --av-bg: var(--avatar-4); --av-text: var(--avatar-4-text); }
.avatar--h5 { --av-bg: var(--avatar-5); --av-text: var(--avatar-5-text); }
.avatar--h6 { --av-bg: var(--avatar-6); --av-text: var(--avatar-6-text); }
.avatar--h7 { --av-bg: var(--avatar-7); --av-text: var(--avatar-7-text); }

/* ---------------------------------------------------------------- page header */
.page-header {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.page-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}

.page-header__text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.page-header__title {
  font-size: var(--text-2xl);
  overflow-wrap: anywhere;
}

.page-header__subtitle {
  color: var(--text-muted);
}

.page-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--text-subtle);
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--space-1);
  color: var(--text-subtle);
}

.breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* ---------------------------------------------------------------- sections */
.section {
  display: grid;
  gap: var(--space-4);
}

.section > * {
  min-width: 0; /* let wide tables scroll inside their frame instead of widening the page */
}

.section + .section {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: var(--hairline);
}

.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control-h-sm);
}

.section__title {
  font-size: var(--text-lg);
}

/* ---------------------------------------------------------------- menu */
.menu {
  position: relative;
  display: inline-block;
}

.menu__list {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: var(--z-sticky);
  display: grid;
  min-width: var(--menu-min);
  padding: var(--space-1);
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
}

.menu--start .menu__list {
  right: auto;
  left: 0;
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--control-h-sm);
  padding: var(--space-1) var(--space-3);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.menu__item:hover,
.menu__item:focus-visible {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: none;
}

.menu__item--danger {
  color: var(--danger-text);
}

.menu__sep {
  height: var(--border-w);
  margin: var(--space-1) 0;
  background: var(--border);
}

@media (max-width: 55.99em) {
  .menu__item {
    min-height: var(--touch);
  }
}

/* ---------------------------------------------------------------- segmented control */
.segmented {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-3);
}

.segmented__option {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--control-h-sm);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: var(--transition);
}

.segmented__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented__option:has(input:checked) {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
}

.segmented__option:has(input:focus-visible) {
  box-shadow: var(--focus);
}

/* ---------------------------------------------------------------- fields */
.field {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field__label {
  padding: 0;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.field__req {
  margin-left: var(--space-1);
  color: var(--danger-text);
}

.field__help {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--danger-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.input {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  background: var(--surface);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--text-base);
  transition: var(--transition);
}

.input::placeholder {
  color: var(--text-subtle);
}

.input:hover {
  border-color: var(--text-subtle);
}

.input:focus,
.input:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus);
  outline: none;
}

.input:disabled {
  background: var(--surface-3);
  color: var(--text-muted);
}

.field--invalid .input,
.input[aria-invalid="true"] {
  border-color: var(--danger);
}

.input--area {
  min-height: calc(var(--control-h) * 2);
  padding: var(--space-2) var(--space-3);
  line-height: var(--leading);
  resize: vertical;
}

.input--select {
  appearance: none;
  padding-right: var(--space-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - var(--space-4)) 50%, calc(100% - var(--space-3)) 50%;
  background-size: var(--space-1) var(--space-1), var(--space-1) var(--space-1);
  background-repeat: no-repeat;
}

.input--sm {
  min-height: var(--control-h-sm);
  font-size: var(--text-sm);
}

.input[type="color"] {
  width: var(--control-h);
  padding: var(--space-1);
}

input[type="file"].input {
  padding: var(--space-1);
}

@media (max-width: 55.99em) {
  .input {
    min-height: var(--touch);
    font-size: max(var(--text-base), 1rem);
  }

  .input--sm {
    min-height: var(--control-h);
  }
}

.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .input {
  flex: 1;
  min-width: 0;
}

.input-group__affix {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  background: var(--surface-3);
  border: var(--border-w) solid var(--border-strong);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.input-group__affix:first-child {
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.input-group__affix:last-child {
  border-left: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.input-group__affix:first-child + .input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group .input:has(+ .input-group__affix) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* checkbox & switch */
.check,
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  cursor: pointer;
}

.check input,
.switch input,
.piece-card__select input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.check__box {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  background: var(--surface);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: transparent;
  transition: var(--transition);
}

input:checked + .check__box {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

input:focus-visible + .check__box,
input:focus-visible + .switch__track {
  box-shadow: var(--focus);
}

.switch__track {
  position: relative;
  flex: none;
  width: calc(var(--space-5) * 1.8);
  height: var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  transition: var(--transition);
}

.switch__track::after {
  content: "";
  position: absolute;
  top: calc(var(--border-w) * 2);
  left: calc(var(--border-w) * 2);
  width: calc(var(--space-5) - var(--border-w) * 4);
  height: calc(var(--space-5) - var(--border-w) * 4);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease);
}

input:checked + .switch__track {
  background: var(--accent);
}

input:checked + .switch__track::after {
  transform: translateX(calc(var(--space-5) * 0.8));
}

.check__label {
  font-size: var(--text-base);
}

/* radio cards */
.radio-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
  gap: var(--space-2);
}

.radio-card {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: var(--transition);
}

.radio-card input {
  position: absolute;
  opacity: 0;
}

.radio-card:hover {
  border-color: var(--text-subtle);
}

.radio-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.radio-card:has(input:focus-visible) {
  box-shadow: var(--focus);
}

.radio-card__label {
  font-weight: var(--weight-medium);
}

.radio-card__desc {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.form-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

/* ---------------------------------------------------------------- filter bar */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.filter-bar__search {
  position: relative;
  flex: 1 1 var(--card-min);
  max-width: calc(var(--card-min) * 3);
  color: var(--text-subtle);
}

.filter-bar__search .icon {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  transform: translateY(-50%);
  pointer-events: none;
}

.input--search {
  padding-left: var(--space-8);
}

.filter-bar__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.filter-bar__fields .input--select {
  width: auto;
}

/* ---------------------------------------------------------------- cards */
.card {
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--space-4);
}

.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* piece cards */
.piece-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 56em) {
  .piece-grid {
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-min) * 1.25), 1fr));
    gap: var(--space-4);
  }
}

.piece-card {
  position: relative;
  min-width: 0;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur) var(--ease);
}

.piece-card:hover {
  border-color: var(--border-strong);
}

.piece-card:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 var(--border-w) var(--accent);
}

.piece-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.piece-card__link:focus-visible {
  box-shadow: inset var(--focus);
}

.piece-card__media {
  display: block;
  aspect-ratio: 1;
  background: var(--surface-3);
}

.piece-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.piece-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-subtle);
}

.piece-card__body {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3) var(--space-3);
}

.piece-card__title {
  overflow: hidden;
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.piece-card__desc {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.piece-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
}

.piece-card__select {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  cursor: pointer;
}

.piece-card__select .check__box {
  box-shadow: var(--shadow-2);
}

/* person rows */
.list {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.list > li + li {
  border-top: var(--hairline);
}

.person-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch);
  padding: var(--space-3) var(--space-1);
}

.person-row:hover {
  background: var(--surface-2);
}

.person-row--muted .person-row__name {
  color: var(--text-muted);
}

.person-row__main {
  display: grid;
  flex: 1;
  min-width: 0;
}

.person-row__name {
  overflow: hidden;
  color: var(--text);
  font-weight: var(--weight-medium);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-row__meta {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-row__aside {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* event / workshop cards */
.item-list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.item-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease);
}

.item-card:hover {
  border-color: var(--border-strong);
}

.item-card--muted {
  background: var(--surface-2);
}

.item-card__date {
  flex: none;
  display: grid;
  justify-items: center;
  width: var(--item-date-w);
  padding: var(--space-1) 0;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent-text);
  line-height: var(--leading-tight);
}

.item-card--workshop .item-card__date {
  background: var(--info-soft);
  color: var(--info-text);
}

.item-card__month {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.item-card__day {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: var(--numeric);
}

.item-card__main {
  display: grid;
  flex: 1;
  gap: var(--space-1);
  min-width: 0;
}

.item-card__title {
  color: var(--text);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.item-card__meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.item-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.item-card__stats {
  flex: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: var(--numeric);
  text-align: right;
}

/* ---------------------------------------------------------------- data table */
.table-wrap {
  position: relative; /* contain .sr-only and other absolute children inside the scroller */
  overflow-x: auto;
  border: var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.data-table {
  width: 100%;
  font-size: var(--text-sm);
  font-variant-numeric: var(--numeric);
}

.data-table th,
.data-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--hairline);
  text-align: left;
  vertical-align: middle;
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.data-table tbody tr {
  position: relative;
}

.data-table tbody tr:hover {
  background: var(--surface-2);
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table .num {
  text-align: right;
}

.data-table .cell-link {
  color: var(--text);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.data-table .cell-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.data-table .cell-action {
  position: relative;
  z-index: 1;
}

.sort-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  text-decoration: none;
}

.sort-link:hover {
  color: var(--text);
}

/* ---------------------------------------------------------------- pagination & tabs */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.pagination__status {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: var(--numeric);
}

.pagination__spacer {
  min-width: var(--control-h);
}

.tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
  border-bottom: var(--hairline);
  overflow-x: auto;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  border-bottom: calc(var(--border-w) * 2) solid transparent;
  margin-bottom: calc(var(--border-w) * -1);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition);
}

.tab:hover {
  color: var(--text);
}

.tab[aria-current] {
  border-bottom-color: var(--accent);
  color: var(--text);
}

.tab__count {
  color: var(--text-subtle);
  font-size: var(--text-sm);
  font-variant-numeric: var(--numeric);
}

/* ---------------------------------------------------------------- disclosure */
.disclosure {
  border-bottom: var(--hairline);
}

.disclosure__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  cursor: pointer;
  font-weight: var(--weight-medium);
  list-style: none;
}

.disclosure__summary::-webkit-details-marker {
  display: none;
}

.disclosure__summary .icon {
  color: var(--text-subtle);
  transition: transform var(--dur) var(--ease);
}

.disclosure[open] > .disclosure__summary .icon {
  transform: rotate(90deg);
}

.disclosure__meta {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

.disclosure__body {
  padding: 0 0 var(--space-4) calc(var(--icon-sm) + var(--space-2));
}

/* ---------------------------------------------------------------- dialog */
.dialog {
  width: calc(100% - var(--space-8));
  max-width: var(--dialog-md);
  max-height: calc(100dvh - var(--space-8));
  padding: 0;
  border: var(--hairline);
  border-radius: var(--radius-xl);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-3);
}

.dialog::backdrop {
  background: var(--overlay);
}

.dialog--sm {
  max-width: var(--dialog-sm);
}

.dialog--lg {
  max-width: var(--dialog-lg);
}

.dialog__panel {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0;
}

.dialog__title {
  font-size: var(--text-lg);
}

.dialog__description {
  color: var(--text-muted);
}

.dialog__body {
  display: grid;
  gap: var(--space-4);
}

.dialog--sheet {
  width: 100%;
  max-width: var(--sheet-max);
  margin: auto auto 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.dialog--palette {
  max-width: var(--dialog-md);
  margin-top: 12vh;
}

.dialog--palette .dialog__panel {
  gap: 0;
  padding: 0;
}

.palette__search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--hairline);
  color: var(--text-subtle);
}

.palette__input {
  flex: 1;
  min-height: var(--control-h);
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--text-lg);
  outline: none;
}

.palette__input:focus-visible {
  box-shadow: none;
}

.palette__results {
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-2);
}

.palette__results:empty {
  display: none;
}

.palette__group {
  padding: var(--space-2) var(--space-3) var(--space-1);
  color: var(--text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.palette__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
}

.palette__item:hover,
.palette__item[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--text);
}

.palette__meta {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.palette__empty {
  padding: var(--space-4);
  color: var(--text-muted);
  text-align: center;
}

/* ---------------------------------------------------------------- toast */
.toast-region {
  position: fixed;
  top: calc(var(--toast-offset) + env(safe-area-inset-top));
  left: 50%;
  z-index: var(--z-toast);
  display: grid;
  gap: var(--space-2);
  width: calc(100% - var(--space-8));
  max-width: var(--dialog-sm);
  transform: translateX(-50%);
  pointer-events: none;
}

@media (min-width: 56em) {
  .toast-region {
    top: auto;
    bottom: var(--toast-offset);
    right: var(--toast-offset);
    left: auto;
    transform: none;
  }
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
  background: var(--gray-12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  color: var(--gray-0);
  font-size: var(--text-sm);
  pointer-events: auto;
  transition: opacity var(--dur) var(--ease);
}

.toast--success .icon {
  color: var(--status-ready-for-pickup-soft);
}

.toast--error {
  background: var(--danger-soft);
  border: var(--border-w) solid var(--danger);
  color: var(--danger-text);
}

.toast--warning {
  background: var(--warning-soft);
  border: var(--border-w) solid var(--warning);
  color: var(--warning-text);
}

.toast__message {
  flex: 1;
}

.toast__link {
  color: inherit;
  font-weight: var(--weight-bold);
}

.toast__link:hover {
  color: inherit;
}

.toast__close {
  color: inherit;
}

.toast__close:hover:not(:disabled) {
  background: transparent;
  color: inherit;
  opacity: 0.7;
}

.toast[data-leaving] {
  opacity: 0;
}

/* ---------------------------------------------------------------- stat, meter, empty, alert */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-8);
  margin-bottom: var(--space-6);
  padding: var(--space-4) 0;
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}

.stat {
  display: grid;
  gap: 0;
  color: inherit;
  text-decoration: none;
}

.stat__value {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: var(--numeric);
  line-height: var(--leading-tight);
}

.stat__label {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

a.stat:hover .stat__label {
  color: var(--accent-text);
  text-decoration: underline;
}

.stat--warning .stat__value {
  color: var(--warning-text);
}

.stat--danger .stat__value {
  color: var(--danger-text);
}

.meter {
  display: grid;
  gap: var(--space-1);
}

.meter__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.meter__label {
  color: var(--text-muted);
}

.meter__value {
  font-weight: var(--weight-medium);
  font-variant-numeric: var(--numeric);
}

.meter__over {
  color: var(--danger-text);
}

.meter__bar {
  appearance: none;
  width: 100%;
  height: var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.meter__bar::-webkit-progress-bar {
  background: var(--surface-3);
  border-radius: var(--radius-pill);
}

.meter__bar::-webkit-progress-value {
  background: var(--accent);
  border-radius: var(--radius-pill);
}

.meter__bar::-moz-progress-bar {
  background: var(--accent);
  border-radius: var(--radius-pill);
}

.meter--over .meter__bar::-webkit-progress-value {
  background: var(--danger);
}

.meter--over .meter__bar::-moz-progress-bar {
  background: var(--danger);
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-4);
  color: var(--text-muted);
  text-align: center;
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--tone-soft);
  color: var(--tone-text);
  font-size: var(--text-sm);
}

.alert .icon {
  margin-top: var(--border-w);
}

.alert__body {
  flex: 1;
  display: grid;
  gap: var(--space-1);
}

.alert a {
  color: inherit;
  font-weight: var(--weight-medium);
}

/* ---------------------------------------------------------------- definition lists */
.details {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: var(--space-2) var(--space-6);
  margin: 0;
  font-size: var(--text-sm);
}

.details dt {
  color: var(--text-muted);
}

.details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- sticky action bar */
.action-bar {
  position: sticky;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-2));
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}

.action-bar__count {
  margin-right: auto;
  font-weight: var(--weight-medium);
}

@media (min-width: 56em) {
  .action-bar {
    bottom: var(--space-4);
  }
}

/* ---------------------------------------------------------------- error page */
.error-page {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  max-width: var(--measure);
  padding: var(--space-12) 0;
}

.error-page__code {
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.error-page__message {
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- styleguide (debug only) */
.sg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-min) * 1.6), 1fr));
  gap: var(--space-4);
}

.sg-swatch {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-xs);
}

.sg-swatch svg {
  width: 100%;
  height: var(--control-h);
  border: var(--hairline);
  border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------- print
   (reduced motion is handled in the generated theme CSS by zeroing --dur) */
@media print {
  .sidebar,
  .appbar,
  .tabbar,
  .toast-region,
  .page-header__actions,
  .filter-bar,
  .action-bar {
    display: none;
  }

  .app {
    display: block;
  }

  .content {
    max-width: none;
    padding: 0;
  }
}

/* ---------------------------------------------------------------- login */
.app--bare {
  grid-template-columns: minmax(0, 1fr);
}

.login {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  max-width: var(--dialog-sm);
  margin: var(--space-12) auto 0;
}

.login .form-card {
  width: 100%;
}

.login__logo {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  object-fit: contain;
}

/* ---------------------------------------------------------------- thumbnails */
.thumb {
  flex: none;
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--surface-3);
}

.thumb--lg {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
}

.photo-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(var(--card-min) * 0.8);
  gap: var(--space-2);
  margin: 0;
  padding: 0 0 var(--space-2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.photo-strip li {
  scroll-snap-align: start;
}

.photo-strip a {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-3);
}

.photo-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------- picker */
.picker {
  position: relative;
}

.picker__search {
  position: relative;
  color: var(--text-subtle);
}

.picker__search .icon {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  transform: translateY(-50%);
  pointer-events: none;
}

.picker__chosen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-1) 0 var(--space-3);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  font-weight: var(--weight-medium);
}

.picker__results {
  display: grid;
  max-height: calc(var(--touch) * 6);
  overflow-y: auto;
}

.picker__results:not(:empty) {
  border: var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.picker__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  padding: 0 var(--space-3);
  border: 0;
  background: none;
  text-align: left;
}

.picker__option:hover,
.picker__option[aria-selected="true"] {
  background: var(--accent-soft);
}

.picker__name {
  font-weight: var(--weight-medium);
}

.picker__meta {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.picker__empty {
  padding: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ---------------------------------------------------------------- chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  border: 0;
}

.chip {
  position: relative;
  display: inline-flex;
}

.chip input {
  position: absolute;
  opacity: 0;
}

.chip > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: var(--transition);
}

.chip input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.chip input:focus-visible + span {
  box-shadow: var(--focus);
}

.chip__count {
  color: var(--text-subtle);
  font-variant-numeric: var(--numeric);
}

/* ---------------------------------------------------------------- board */
.board {
  position: relative; /* contain .sr-only column headings inside the scroller */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(calc(var(--card-min) * 1.3), 1fr);
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  scroll-snap-type: x mandatory;
}

.board__column {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
  scroll-snap-align: start;
}

.board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--hairline);
}

.board__items {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.view-switch {
  display: inline-flex;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.group-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-3);
}

.filter-bar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  flex-basis: 100%;
}

.filter-bar__row > .picker {
  flex: 1 1 var(--card-min);
  max-width: calc(var(--card-min) * 2);
}

.filter-bar__fields input[type="date"] {
  width: auto;
}

.badge__clear {
  display: inline-flex;
  color: inherit;
}

/* ---------------------------------------------------------------- piece detail */
.status-card {
  padding: var(--space-5);
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.subhead {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.stepper {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stepper__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-subtle);
  font-size: var(--text-sm);
}

.stepper__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
}

.stepper__step--done {
  color: var(--text-muted);
}

.stepper__step--done .stepper__dot {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.stepper__step--current {
  color: var(--text);
  font-weight: var(--weight-medium);
}

.stepper__step--current .stepper__dot {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 calc(var(--border-w) * 3) var(--surface), inset 0 0 0 var(--space-5) var(--accent);
}

.gallery {
  display: grid;
  gap: var(--space-2);
}

.gallery__main {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.gallery__main img {
  width: 100%;
  max-height: 70vh;
  border-radius: var(--radius-lg);
  object-fit: contain;
  background: var(--surface-3);
}

.gallery__empty {
  justify-items: center;
  padding: var(--space-12) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-3);
  color: var(--text-muted);
}

.gallery__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.gallery__actions form {
  display: contents;
}

.gallery__thumbs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
}

.gallery__thumb {
  flex: none;
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  padding: 0;
  border: calc(var(--border-w) * 2) solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-3);
}

.gallery__thumb[aria-selected="true"] {
  border-color: var(--accent);
}

.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.msg-row {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}

.msg-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.msg-row__time {
  margin-left: auto;
  color: var(--text-subtle);
}

.msg-row__error {
  color: var(--danger-text);
}

.board__more {
  list-style: none;
}

.msg-row__text {
  color: var(--text-muted);
  white-space: pre-line;
}

@media (max-width: 39.99em) {
  .hide-sm {
    display: none;
  }
}

/* ---------------------------------------------------------------- member rows */
.member-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-1);
}

.member-row__main {
  display: grid;
  min-width: 0;
}

.member-row__meters {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (min-width: 56em) {
  .member-row {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 2fr) auto;
  }

  .member-row__meters {
    grid-column: auto;
  }

}

.member-row__action {
  grid-column: 3;
  grid-row: 1;
}

.meter__head {
  flex-wrap: wrap;
}

.page-header__meta a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

@media (min-width: 56em) {
  .member-row__action {
    grid-column: 4;
  }
}

/* ---------------------------------------------------------------- schedule */
.calendar {
  display: grid;
  gap: var(--space-3);
}

.calendar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.calendar__title {
  min-width: calc(var(--card-min) * 1.2);
  text-align: center;
}

.calendar__grid {
  display: grid;
  border: var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}

.calendar__row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar__row + .calendar__row {
  border-top: var(--hairline);
}

.calendar__dow {
  padding: var(--space-2);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
}

.calendar__day {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  min-height: calc(var(--touch) * 2);
  padding: var(--space-1);
  font-size: var(--text-xs);
}

.calendar__day + .calendar__day {
  border-left: var(--hairline);
}

.calendar__day--out {
  background: var(--surface-2);
  color: var(--text-subtle);
}

.calendar__num {
  font-variant-numeric: var(--numeric);
}

.calendar__day--today .calendar__num {
  width: fit-content;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);
}

.calendar__item {
  display: block;
  overflow: hidden;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-text);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar__item--workshop {
  background: var(--info-soft);
  color: var(--info-text);
}

.calendar__time {
  font-variant-numeric: var(--numeric);
}

.event-counts {
  display: inline-flex;
  gap: var(--space-1);
}

.pick-list {
  display: grid;
  max-height: calc(var(--touch) * 7);
  overflow-y: auto;
  border: var(--hairline);
  border-radius: var(--radius-md);
}

.pick-list:empty {
  display: none;
}

.pick-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  padding: 0 var(--space-3);
  cursor: pointer;
}

.pick-row + .pick-row {
  border-top: var(--hairline);
}

.pick-row input {
  position: absolute;
  opacity: 0;
}

.pick-row:has(input:checked) {
  background: var(--accent-soft);
}

.pay-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.input-group--sm .input {
  width: calc(var(--control-h) * 2);
  min-height: var(--control-h-sm);
  font-size: var(--text-sm);
}

.input-group--sm .input-group__affix {
  padding: 0 var(--space-2);
}

.cell-actions {
  white-space: nowrap;
  text-align: right;
}

/* On phones the roster is name, check-in and Add piece; tighter cells keep it on screen. */
@media (max-width: 39.99em) {
  .roster-table th,
  .roster-table td {
    padding-inline: var(--space-2);
  }
}

.cell-link-plain {
  color: var(--text);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.cell-link-plain:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------- workshops */
@media (min-width: 56em) {
  .split--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.input--code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.chip-btn {
  min-height: var(--control-h-sm);
  padding: 0 var(--space-2);
  border: var(--border-w) dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  transition: var(--transition);
}

.chip-btn:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

.email-preview {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.email-preview__subject {
  padding-bottom: var(--space-2);
  border-bottom: var(--hairline);
  font-weight: var(--weight-medium);
}

.email-preview__body {
  white-space: pre-line;
}

.add-row {
  align-items: end;
  margin-top: var(--space-2);
}

.page-header__meta > * {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.content > .alert,
.content > .prose {
  margin-bottom: var(--space-4);
}

/* Messages (contact log) */
.log-row__summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
  list-style: none;
}

.log-row__summary::-webkit-details-marker {
  display: none;
}

.log-row__who {
  font-weight: var(--weight-medium);
}

.log-row__kind {
  grid-column: 2;
  grid-row: 2;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.log-row__time {
  grid-column: 3;
  grid-row: 1;
  color: var(--text-subtle);
  font-size: var(--text-sm);
}

.log-row__body {
  display: grid;
  gap: var(--space-2);
  padding: 0 0 var(--space-3) var(--space-6);
}

/* Glaze calculator */
.calc-result {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  text-align: center;
}

.calc-result__value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
}

.inline-form .field {
  flex: 1 1 calc(var(--card-min) * 0.8);
}

/* Settings */
.settings {
  display: grid;
  gap: var(--space-4);
}

.settings__body {
  display: grid;
  gap: var(--space-6);
  max-width: calc(var(--card-min) * 4);
}

.settings__body .section__title {
  margin-top: var(--space-2);
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-min) * 0.8), 1fr));
  gap: var(--space-3);
}

.preset-grid {
  margin: 0;
  padding: 0;
  border: 0;
}

.preset-grid legend {
  margin-bottom: var(--space-3);
  padding: 0;
}

.settings__body .segmented {
  width: fit-content;
}

.preset-tile {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
}

.preset-tile input {
  position: absolute;
  opacity: 0;
}

.preset-tile:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 var(--border-w) var(--accent);
}

.preset-tile:has(input:focus-visible) {
  box-shadow: var(--focus);
}

.preset-tile svg {
  width: 100%;
  height: var(--control-h);
  border-radius: var(--radius-md);
}

.preset-tile__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.tier-row {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  border: 0;
}

.tier-row__title {
  margin-bottom: var(--space-2);
  font-weight: var(--weight-semibold);
}

.template-block {
  display: grid;
  gap: var(--space-3);
}

.template-preview {
  padding: var(--space-3);
  border: var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  white-space: pre-line;
}

.log-detail {
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: pre;
}

.secret-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.form-card + .section {
  margin-top: var(--space-6);
}

/* ---------------------------------------------------------------- capture (§7) */
.capture {
  display: grid;
  gap: var(--space-4);
  padding-bottom: calc(var(--control-h) * 2);
}

.capture-step {
  display: grid;
  gap: var(--space-3);
}

.capture-owner {
  position: sticky;
  top: var(--space-2);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.capture-owner__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capture-owner__count {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.owner-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.owner-chip {
  display: grid;
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-3);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.owner-chip:hover {
  background: var(--surface-2);
}

.owner-chip--in {
  border-color: var(--accent);
}

.owner-chip__name {
  font-weight: var(--weight-medium);
}

.owner-chip__detail {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.capture-details {
  padding: var(--space-4);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.capture-bar {
  position: sticky;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-2));
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.capture-bar .field__error {
  flex-basis: 100%;
}

@media (max-width: 39.99em) {
  .capture-bar .btn {
    flex: 1 1 0;
    padding: 0 var(--space-2);
    font-size: var(--text-base);
  }
}

.uploader {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-w) dashed var(--border-strong);
  border-radius: var(--radius-lg);
  transition: background-color var(--dur) var(--ease);
}

.uploader--drop {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.uploader__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--card-min) * 1.4), 1fr));
  gap: var(--space-2);
}

.uploader__shoot {
  min-height: calc(var(--control-h) * 1.8);
}

.uploader__strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-min) * 0.55), 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.uploader__item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-3);
  cursor: grab;
}

.uploader__item.is-dragging {
  opacity: 0.5;
}

.uploader__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uploader__item--busy {
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.uploader__item--busy .icon {
  animation: spin calc(var(--dur) * 5) linear infinite;
}

.uploader__cover {
  position: absolute;
  left: var(--space-1);
  bottom: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.uploader__btn {
  position: absolute;
  top: var(--space-1);
  display: grid;
  place-items: center;
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
  cursor: pointer;
}

.uploader__btn--remove {
  right: var(--space-1);
}

.uploader__btn--cover {
  left: var(--space-1);
}

/* Upload queue pill + sheet */
.queue-pill {
  position: fixed;
  top: calc(env(safe-area-inset-top) + (var(--appbar-h) - var(--control-h-sm)) / 2);
  right: calc(var(--control-h) + var(--space-4));
  z-index: calc(var(--z-nav) + 1);
}

@media (min-width: 64em) {
  .queue-pill {
    top: var(--space-3);
    right: var(--space-4);
  }
}

.queue-pill__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-sm);
  padding: 0 var(--space-3);
  border: var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-2);
  cursor: pointer;
}

.queue-pill__btn--failed {
  border-color: var(--danger);
  color: var(--danger-text);
}

.queue-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.queue-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
}

.queue-item img {
  width: var(--avatar-lg);
  height: var(--avatar-lg);
  border-radius: var(--radius-md);
  object-fit: cover;
}

.queue-item__state {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.queue-item__state--failed {
  color: var(--danger-text);
}

/* Lightbox */
.lightbox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--overlay);
}

.lightbox::backdrop {
  background: var(--overlay);
}

.lightbox__stage {
  background: var(--overlay);
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lightbox__btn {
  position: absolute;
}

.lightbox__btn--close {
  top: var(--space-3);
  right: var(--space-3);
}

.lightbox__btn--prev {
  left: var(--space-3);
}

.lightbox__btn--next {
  right: var(--space-3);
}

/* Kiln mode: tap cards to select on the board */
.is-selecting .piece-card__select {
  inset: 0;
  width: auto;
  height: auto;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--space-2);
}

.is-selecting .piece-card__select .check__box {
  width: var(--control-h-sm);
  height: var(--control-h-sm);
}

.is-selecting .piece-card:has(input:checked) {
  outline: calc(var(--border-w) * 3) solid var(--accent);
  outline-offset: calc(var(--border-w) * -1);
}

.gallery__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

/* ---------------------------------------------------------------- imports wizard */
.stepper--row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.import-review__bar {
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.import-review__counts {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.import-review__counts strong {
  color: var(--text);
}

.import-review__action {
  display: grid;
  gap: var(--space-1);
  min-width: calc(var(--space-6) * 5);
}

.import-review tr.is-invalid td {
  background: var(--surface-2);
}

.import-review .field__error,
.import-review .field__help {
  margin: var(--space-1) 0 0;
}

.import-event {
  margin: 0;
  padding: 0;
  border: 0;
}

.import-event legend {
  margin-bottom: var(--space-2);
  padding: 0;
}

.import-review__bar .cluster {
  flex-wrap: nowrap;
}

/* ---------------------------------------------------------------- theme editor */
.settings__body:has(.theme-editor) {
  max-width: none;
}

.theme-editor {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

.theme-editor__controls {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.theme-controls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-min) * 0.75), 1fr));
  gap: var(--space-4) var(--space-5);
}

.theme-control {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  min-width: 0;
}

.theme-control__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.theme-control__head .field__label {
  flex: 1;
}

.theme-control__value,
.theme-control__unit {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.theme-control__input {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.theme-control__swatch {
  flex: none;
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  padding: 0;
  border: var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
}

.theme-control__hex {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.theme-control__range {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
}

.theme-control__choice {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.theme-control__choice .field__label {
  margin-bottom: var(--space-1);
  padding: 0;
}

.theme-control__reset {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: inherit;
  font-size: var(--text-xs);
  text-decoration: underline;
  cursor: pointer;
}

.font-select {
  flex: 1;
  min-width: 0;
}

.font-select--inter,
.font-opt--inter {
  font-family: var(--font-inter);
}

.font-select--system,
.font-opt--system {
  font-family: var(--font-system);
}

.font-select--dm-sans,
.font-opt--dm-sans {
  font-family: var(--font-dm-sans);
}

.font-select--source-serif,
.font-opt--source-serif {
  font-family: var(--font-source-serif);
}

.font-select--atkinson,
.font-opt--atkinson {
  font-family: var(--font-atkinson);
}

.font-select--ibm-plex-sans,
.font-opt--ibm-plex-sans {
  font-family: var(--font-ibm-plex-sans);
}

.font-select--system-mono,
.font-opt--system-mono {
  font-family: var(--font-system-mono);
}

.font-select--ibm-plex-mono,
.font-opt--ibm-plex-mono {
  font-family: var(--font-ibm-plex-mono);
}

.theme-editor__custom {
  align-items: end;
}

.theme-editor__custom .field {
  flex: 1;
  min-width: calc(var(--card-min) * 0.75);
}

.theme-editor__preview {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.theme-preview {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--hairline);
  border-radius: var(--radius-xl);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  transition: opacity var(--dur) var(--ease);
}

.theme-preview.is-loading {
  opacity: 0.85;
}

.theme-preview__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  letter-spacing: var(--heading-tracking);
}

.theme-preview__header p {
  margin: 0;
}

.theme-preview__pieces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--card-min) * 0.55), 1fr));
  gap: var(--space-2);
}

.theme-preview__toast {
  justify-self: start;
}

.theme-preview__dialog {
  border: var(--hairline);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-3);
}

.theme-import {
  align-items: end;
}

.plain-list {
  margin: var(--space-1) 0 0;
  padding-left: var(--space-4);
}

@media (min-width: 64em) {
  .theme-editor {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .theme-editor__preview {
    position: sticky;
    top: var(--space-4);
    order: 2;
  }
}

/* Selects inside scrolling tables keep a readable width; the table scrolls instead. */
.data-table .input--select {
  min-width: calc(var(--card-min) * 0.9);
}

/* ---------------------------------------------------------------- member portal */
.app--portal {
  grid-template-columns: minmax(0, 1fr);
}

.app--portal .tabbar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app--portal .tabbar--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-nav {
  display: none;
  gap: var(--space-1);
}

@media (min-width: 56em) {
  .app--portal .appbar {
    display: flex;
  }

  .app--portal .portal-nav {
    display: flex;
  }

  .app--portal .content {
    padding: var(--space-8) var(--space-4);
  }
}