/* App shell for Honey Do Projects. Tokens stay in nps-tokens.css (D-32). */

.nps-stack {
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-4);
}

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

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.app__bar {
  position: sticky;
  top: 0;
  z-index: var(--nps-z-topbar);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--nps-space-3);
  padding: var(--nps-space-2) var(--nps-space-5);
  background: color-mix(in srgb, var(--nps-surface) 92%, transparent);
  border-bottom: 1px solid var(--nps-border);
  backdrop-filter: blur(10px);
}

.app__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--nps-touch-target);
  height: var(--nps-touch-target);
  color: inherit;
  text-decoration: none;
  border-radius: var(--nps-radius-sm);
}

.app__brand:hover { color: inherit; }

.app__brand:focus-visible {
  outline: 2px solid var(--nps-focus-outline);
  outline-offset: 2px;
}

.app__mark {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

.app__stamp {
  font-family: var(--nps-font-mono);
  font-size: var(--nps-fs-micro);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--nps-tracking-wide);
  text-transform: uppercase;
  color: var(--nps-ink-strong);
  padding: 0.2em 0.55em;
  border: 1px solid var(--nps-ink-strong);
  border-radius: var(--nps-radius-xs);
}

.app__main {
  flex: 1;
  width: min(48rem, calc(100% - 2rem));
  margin-inline: auto;
  padding: var(--nps-space-6) 0 var(--nps-space-8);
}

.app__main--wide {
  width: min(76rem, calc(100% - 2rem));
}

.app__bar-end {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--nps-space-2);
  min-width: 0;
  justify-self: end;
}

.app__nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding: 0.435rem;
  background: var(--nps-surface-inset);
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-pill);
  font-family: var(--nps-font-display);
  font-size: var(--nps-fs-caption);
  font-weight: var(--nps-fw-semibold);
  letter-spacing: var(--nps-tracking-tight, 0);
}

.app__nav a {
  flex-shrink: 0;
  color: var(--nps-ink-muted);
  text-decoration: none;
  padding: 0.4em 0.9em;
  border-radius: var(--nps-radius-pill);
  line-height: 1.1;
}

.app__nav a:hover {
  color: var(--nps-ink-strong);
  background: color-mix(in srgb, var(--nps-surface-raised) 70%, transparent);
}

.app__nav a:focus-visible {
  outline: 2px solid var(--nps-focus-outline);
  outline-offset: 2px;
}

.app__nav a[aria-current="page"] {
  color: var(--nps-ink-strong);
  background: var(--nps-surface-raised);
  box-shadow: var(--nps-shadow-xs);
}

.app-convert {
  margin-top: var(--nps-space-4);
  padding-top: var(--nps-space-4);
  border-top: 1px solid var(--nps-divider);
}

.nps-jobs .app-job-link {
  color: inherit;
  text-decoration: none;
}

.nps-jobs:not(.nps-jobs--cards) .app-job-link + .app-job-link .nps-job {
  border-top: 1px solid var(--nps-divider);
}

.app-account {
  position: relative;
  min-width: 12rem;
  flex: 1 1 14rem;
  max-width: 22rem;
}

.app-account__sum {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--nps-space-2);
  width: 100%;
  height: var(--nps-touch-target);
  min-height: var(--nps-touch-target);
  box-sizing: border-box;
  padding: 0 var(--nps-space-3);
  border: 1px solid var(--nps-border-strong);
  border-radius: var(--nps-radius-sm);
  background: var(--nps-surface-raised);
  box-shadow: var(--nps-shadow-inset);
  color: var(--nps-ink-muted);
  cursor: pointer;
}

.app-account__sum::-webkit-details-marker,
.app-account__sum::marker {
  display: none;
  content: none;
}

.app-account__sum:hover {
  color: var(--nps-ink-strong);
}

.app-account__sum:focus,
.app-account__sum:focus-visible {
  outline: none;
  border-color: var(--nps-accent);
}

.app-account[open] .app-account__sum {
  border-color: var(--nps-accent);
  color: var(--nps-ink-strong);
}

.app-account__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--nps-fs-caption);
  font-weight: var(--nps-fw-semibold);
  color: var(--nps-ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-account__caret {
  flex-shrink: 0;
  transition: transform var(--nps-duration-fast) var(--nps-ease-standard);
}

.app-account[open] .app-account__caret {
  transform: rotate(180deg);
}

.app-account__menu {
  position: absolute;
  left: auto;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: var(--nps-z-popover);
  width: max(100%, 20rem);
  max-height: min(18rem, calc(100dvh - 6rem));
  overflow: auto;
  padding: var(--nps-space-1);
  background: var(--nps-surface-raised);
  border: 1px solid var(--nps-border-strong);
  border-radius: var(--nps-radius-lg);
  box-shadow: var(--nps-shadow-md);
}

.app-account__menu form {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.app-account__opt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: var(--nps-space-2);
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: var(--nps-radius-sm);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.app-account__opt:hover,
.app-account__opt:focus-visible {
  background: var(--nps-surface-inset);
  outline: none;
}

.app-account__opt.is-current {
  background: var(--nps-accent-soft);
}

.app-account__opt-name {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--nps-fs-caption);
  font-weight: var(--nps-fw-semibold);
  color: var(--nps-ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-account__opt-meta {
  grid-column: 1;
  font-size: var(--nps-fs-micro);
  color: var(--nps-ink-muted);
}

.app-account__opt-check {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--nps-accent-strong);
}

.app-account-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.app-account-row.is-editing,
.app-account-row.is-editing:hover {
  background: var(--nps-accent-soft);
}

.app-account-row__actions {
  justify-content: flex-end;
}

.app-accounts-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nps-space-3);
}

.app-accounts-head > div:first-child {
  flex: 1 1 20rem;
  min-width: 0;
}

.app-accounts-head .app__lede {
  margin: 0;
}

.app-accounts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: var(--nps-space-4);
}

.app-acct {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-acct.is-current {
  border-color: var(--nps-accent);
}

.app-acct.is-editing {
  border-color: var(--nps-accent);
  box-shadow: var(--nps-shadow-md);
}

.app-acct__header {
  align-items: flex-start;
}

.app-acct__name {
  margin: 0;
  font-family: var(--nps-font-display);
  font-size: var(--nps-fs-title);
  font-weight: var(--nps-fw-semibold);
  color: var(--nps-ink-strong);
}

.app-acct__meta {
  margin: var(--nps-space-1) 0 0;
  font-size: var(--nps-fs-micro);
  color: var(--nps-ink-muted);
}

.app-acct__kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nps-space-3) var(--nps-space-4);
  margin: 0;
}

.app-acct__kpi {
  min-width: 0;
}

.app-acct__kpi dt {
  font-size: var(--nps-fs-micro);
  letter-spacing: var(--nps-tracking-wide);
  text-transform: uppercase;
  color: var(--nps-ink-muted);
}

.app-acct__kpi dd {
  margin: 0.15rem 0 0;
  font-family: var(--nps-font-mono);
  font-size: var(--nps-fs-title);
  font-variant-numeric: tabular-nums;
  color: var(--nps-ink-strong);
  overflow-wrap: anywhere;
}

.app-acct__kpi.is-success dd { color: var(--nps-success-fg); }
.app-acct__kpi.is-warning dd { color: var(--nps-warning-fg); }

.app-acct__note {
  margin: var(--nps-space-3) 0 0;
  font-size: var(--nps-fs-micro);
  color: var(--nps-ink-muted);
}

.app-acct__footer {
  margin-top: auto;
}

.app-prefix-lock {
  display: flex;
  align-items: center;
  min-height: var(--nps-touch-target);
  margin: 0;
  padding: 0.5rem var(--nps-space-3);
  border: 1px dashed var(--nps-border);
  border-radius: var(--nps-radius-sm);
  background: var(--nps-surface-inset);
  color: var(--nps-ink-muted);
}

.app-library {
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-5);
}

.app-library__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--nps-space-3);
}

.app-library__bar .nps-input,
.app-library__bar .nps-select,
.app-library__bar .nps-btn {
  min-height: var(--nps-touch-target);
  height: var(--nps-touch-target);
}

.app-library__bar .nps-btn--icon,
.app-library__bar .app-sort-dir {
  flex: 0 0 var(--nps-touch-target);
  width: var(--nps-touch-target);
  min-width: var(--nps-touch-target);
  padding: 0;
}

.app-library__search {
  flex: 1 1 16rem;
}

.app-library__filter,
.app-library__sort {
  flex: 0 1 10rem;
}

.app-library__sort-cluster {
  display: flex;
  align-items: flex-end;
  gap: var(--nps-space-1);
}

.app-sort-dir[data-library-dir="desc"] .app-sort-dir__up,
.app-sort-dir[data-library-dir="asc"] .app-sort-dir__down {
  display: none;
}

.app-library__actions {
  position: relative;
  flex: 0 0 auto;
}

.app-library__menu {
  position: absolute;
  top: calc(100% + var(--nps-space-2));
  right: 0;
  z-index: var(--nps-z-popover);
  min-width: 20rem;
  max-width: min(24rem, 92vw);
  padding: var(--nps-space-2);
  background: var(--nps-surface-raised);
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-md);
  box-shadow: var(--nps-shadow-lg);
}

.app-library__menu-item {
  display: flex;
  align-items: flex-start;
  gap: var(--nps-space-3);
  width: 100%;
  margin: 0;
  padding: var(--nps-space-3);
  border: 0;
  border-radius: var(--nps-radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.app-library__menu-item:hover,
.app-library__menu-item:focus-visible {
  background: var(--nps-surface-inset);
}

.app-library__menu-item span {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  min-width: 0;
}

.app-library__menu-item strong {
  font-size: var(--nps-fs-caption);
  font-weight: var(--nps-fw-semibold);
}

.app-library__menu-item small {
  color: var(--nps-ink-muted);
  font-size: var(--nps-fs-micro);
  line-height: 1.35;
}

.app-library__menu form {
  margin: 0;
}

.app-library__menu-empty {
  margin: 0;
  padding: var(--nps-space-3);
  color: var(--nps-ink-muted);
  font-size: var(--nps-fs-caption);
}

.app-library__views .nps-btn {
  min-height: var(--nps-touch-target);
}

.app-library__views .nps-btn[aria-checked="true"] {
  background: var(--nps-surface-inset);
  color: var(--nps-ink-strong);
  box-shadow: var(--nps-shadow-inset);
}

.app-library__count {
  margin: 0 0 0.35rem auto;
  font-size: var(--nps-fs-micro);
  color: var(--nps-ink-muted);
  letter-spacing: var(--nps-tracking-wide);
  text-transform: uppercase;
}

.app-copy-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  flex: 0 0 8.75rem;
  width: 8.75rem;
  height: var(--nps-touch-target);
  min-height: var(--nps-touch-target);
  box-sizing: border-box;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--nps-border-strong);
  border-radius: var(--nps-radius-sm);
  background: var(--nps-surface-raised);
  box-shadow: var(--nps-shadow-inset);
  cursor: pointer;
  color: var(--nps-ink-muted);
}

.app-copy-btn:hover {
  border-color: var(--nps-accent);
  color: var(--nps-ink-strong);
}

.app-copy-btn:focus-visible {
  outline: 2px solid var(--nps-focus-outline);
  outline-offset: 2px;
}

.app-copy-btn__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
}

.app-copy-btn__stamp {
  overflow: hidden;
  min-width: 0;
  font-family: var(--nps-font-display);
  font-size: var(--nps-fs-micro);
  font-weight: var(--nps-fw-semibold);
  letter-spacing: var(--nps-tracking-wide);
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-copy-btn__frac {
  flex-shrink: 0;
  font-family: var(--nps-font-mono);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--nps-ink-strong);
}

.app-copy-btn__meter {
  display: block;
  width: 100%;
  height: 0.35rem;
  overflow: hidden;
  background: var(--nps-surface-inset);
  border-radius: var(--nps-radius-pill);
}

.app-copy-btn__meter-fill {
  display: block;
  height: 100%;
  width: var(--nps-progress, 0%);
  background: var(--nps-accent);
  transition: width var(--nps-duration-normal) var(--nps-ease-standard);
}

.app-copy-btn.is-running {
  border-color: var(--nps-accent);
  color: var(--nps-ink-strong);
}

.app-copy-btn.is-error .app-copy-btn__meter-fill { background: var(--nps-danger); }
.app-copy-btn.is-done .app-copy-btn__meter-fill { background: var(--nps-success); }
.app-copy-btn.is-paused .app-copy-btn__meter-fill { background: var(--nps-warning); }

.app-settings {
  position: relative;
  flex-shrink: 0;
}

.app-settings__sum {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nps-touch-target);
  height: var(--nps-touch-target);
  min-height: var(--nps-touch-target);
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--nps-border-strong);
  border-radius: var(--nps-radius-sm);
  background: var(--nps-surface-raised);
  box-shadow: var(--nps-shadow-inset);
  color: var(--nps-ink-muted);
  cursor: pointer;
}

.app-settings__sum::-webkit-details-marker,
.app-settings__sum::marker {
  display: none;
  content: none;
}

.app-settings__sum:hover,
.app-settings[open] .app-settings__sum,
.app-settings.is-current .app-settings__sum {
  border-color: var(--nps-accent);
  color: var(--nps-ink-strong);
}

.app-settings__sum:focus,
.app-settings__sum:focus-visible {
  outline: none;
  border-color: var(--nps-accent);
}

.app-settings__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: var(--nps-z-popover);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: min(18.5rem, calc(100vw - 1.5rem));
  padding: 0;
  overflow: hidden;
  background: var(--nps-surface-raised);
  border: 1px solid var(--nps-border-strong);
  border-radius: var(--nps-radius-xl);
  box-shadow: var(--nps-shadow-lg);
}

.app-settings__who {
  padding: var(--nps-space-4) var(--nps-space-4) var(--nps-space-3);
  background:
    radial-gradient(circle at 12% 0%, var(--nps-accent-soft), transparent 58%),
    var(--nps-page-soft);
  border-bottom: 1px solid var(--nps-divider);
}

.app-settings__host {
  margin: 0 0 var(--nps-space-1);
}

.app-settings__row {
  display: flex;
  align-items: center;
  gap: var(--nps-space-3);
  min-height: var(--nps-touch-target);
  padding: var(--nps-space-3) var(--nps-space-4);
  color: inherit;
  text-decoration: none;
  font-weight: var(--nps-fw-semibold);
}

.app-settings__row:hover {
  background: var(--nps-page-soft);
}

.app-settings__row[aria-current="page"] {
  color: var(--nps-ink-strong);
}

.app-settings__chev {
  margin-left: auto;
  color: var(--nps-ink-muted);
}

.app-settings__tools {
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-3);
  padding: var(--nps-space-3) var(--nps-space-4);
  border-top: 1px solid var(--nps-divider);
}

.app-settings__size {
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-2);
}

.app-settings__tool-label {
  margin: 0;
  font-size: var(--nps-fs-micro);
  letter-spacing: var(--nps-tracking-wide);
  text-transform: uppercase;
  color: var(--nps-ink-muted);
}

.app-settings__out {
  padding: var(--nps-space-2) var(--nps-space-3) var(--nps-space-3);
  border-top: 1px solid var(--nps-divider);
}

.app-settings__out .nps-btn {
  justify-content: flex-start;
  width: 100%;
}

.app-confirm {
  width: min(28rem, calc(100% - 2rem));
  padding: var(--nps-space-5);
  border: 1px solid var(--nps-border-strong);
  border-radius: var(--nps-radius-xl);
  background: var(--nps-surface-raised);
  color: var(--nps-ink);
  box-shadow: var(--nps-shadow-modal);
}

.app-confirm::backdrop {
  background: color-mix(in srgb, var(--nps-ink-strong) 46%, transparent);
}

.app-confirm__form h2 {
  margin: 0 0 var(--nps-space-2);
  font-size: var(--nps-fs-title);
  text-wrap: balance;
}

.app-confirm__body {
  margin: 0 0 var(--nps-space-4);
  color: var(--nps-ink-muted);
  font-size: var(--nps-fs-body);
}

.app-confirm__actions {
  justify-content: flex-end;
}

.app-confirm.is-danger .app-confirm__form h2 {
  color: var(--nps-danger-fg);
}

.app-copy-dialog {
  width: min(60rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: var(--nps-space-5);
  border: 1px solid var(--nps-border-strong);
  border-radius: var(--nps-radius-xl);
  background: var(--nps-surface-raised);
  color: var(--nps-ink);
  box-shadow: var(--nps-shadow-modal);
}

.app-copy-dialog::backdrop {
  background: color-mix(in srgb, var(--nps-ink-strong) 46%, transparent);
}

.app-copy-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nps-space-3);
  margin-bottom: var(--nps-space-3);
}

.app-copy-dialog__head h2 {
  margin: 0;
  font-size: var(--nps-fs-title);
  text-wrap: balance;
}

.app-copy-dialog__lede {
  margin: 0 0 var(--nps-space-3);
  color: var(--nps-ink-muted);
  font-size: var(--nps-fs-caption);
}

.app-copy-dialog__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nps-space-3);
  margin: var(--nps-space-4) 0;
  font-size: var(--nps-fs-caption);
}

.app-copy-dialog__facts div { min-width: 0; }
.app-copy-dialog__facts dt {
  color: var(--nps-ink-muted);
  font-size: var(--nps-fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--nps-tracking-wide);
}
.app-copy-dialog__facts dd {
  margin: 0.15em 0 0;
  color: var(--nps-ink-strong);
  overflow-wrap: anywhere;
}

.app-copy-dialog__kinds {
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-3);
  margin-bottom: var(--nps-space-4);
}

.app-copy-dialog__kinds .nps-progress__label {
  display: flex;
  justify-content: space-between;
  gap: var(--nps-space-2);
}

.app-copy-dialog__kinds .is-current .nps-progress__bar {
  background: var(--nps-accent-press);
}

.app-copy-dialog__actions {
  margin: 0 0 var(--nps-space-4);
}

.app-worker-tabs {
  display: flex;
  gap: var(--nps-space-1);
  margin-block-end: var(--nps-space-4);
  border-bottom: 1px solid var(--nps-border);
}

.app-worker-tabs__tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--nps-ink-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--nps-tracking-wide);
  margin-bottom: -1px;
  padding: var(--nps-space-2) var(--nps-space-3);
  text-transform: uppercase;
}

.app-worker-tabs__tab:hover {
  color: var(--nps-ink);
}

.app-worker-tabs__tab.is-active,
.app-worker-tabs__tab[aria-selected="true"] {
  border-bottom-color: var(--nps-accent);
  color: var(--nps-ink);
}

.app-worker-tabs__tab.is-busy::after {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-inline-start: 0.4em;
  border-radius: 50%;
  background: var(--nps-accent);
  vertical-align: middle;
}

.app-worker-panel[hidden] {
  display: none;
}

.app-worker-errors {
  margin: 0 0 var(--nps-space-4);
  padding: var(--nps-space-3);
  border: 1px solid color-mix(in srgb, var(--nps-danger) 35%, var(--nps-border));
  border-radius: var(--nps-radius-md);
  background: color-mix(in srgb, var(--nps-danger) 10%, var(--nps-surface));
}

.app-worker-errors__title {
  margin: 0 0 var(--nps-space-2);
  font-size: var(--nps-fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--nps-tracking-wide);
  color: var(--nps-danger-fg);
}

.app-worker-errors__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-2);
  max-height: 12rem;
  overflow: auto;
}

.app-worker-errors__list li {
  margin: 0;
  font-family: var(--nps-font-mono);
  font-size: var(--nps-fs-caption);
  color: var(--nps-ink);
  word-break: break-word;
}

.app-copy-queue {
  margin: 0 0 var(--nps-space-4);
}

.app-copy-queue h3 {
  margin: 0 0 var(--nps-space-2);
  font-size: var(--nps-fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--nps-tracking-wide);
  color: var(--nps-ink-muted);
}

.app-copy-queue__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-2);
}

.app-copy-queue__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nps-space-3);
  padding: var(--nps-space-3);
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-md);
  background: var(--nps-surface);
}

.app-copy-queue__item[data-status="running"] {
  border-color: var(--nps-border-strong);
}

.app-copy-queue__main {
  min-width: 0;
}

.app-copy-queue__name {
  display: block;
  color: var(--nps-ink-strong);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.app-copy-queue__name:hover {
  text-decoration: underline;
}

.app-copy-queue__meta {
  margin: 0.2em 0 0;
  color: var(--nps-ink-muted);
  font-size: var(--nps-fs-micro);
}

.app-copy-queue__actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--nps-space-2);
}

.app-job-comments {
  margin-block: var(--nps-space-5);
}

.app-job-comments h2 {
  margin: 0;
  font-size: var(--nps-fs-title);
}

.app-comments {
  list-style: none;
  margin: var(--nps-space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-3);
}

.app-comments__item {
  padding-block: var(--nps-space-2);
  border-top: 1px solid var(--nps-divider);
}

.app-comments__item:first-child {
  border-top: 0;
  padding-block-start: 0;
}

.app-comments__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--nps-space-2);
  margin: 0 0 var(--nps-space-1);
  font-size: var(--nps-fs-caption);
}

.app-comments__meta .nps-mono {
  color: var(--nps-ink-muted);
}

.app-comments__body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.app-job-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
  gap: var(--nps-space-5) var(--nps-space-7);
  align-items: start;
  margin-block-end: var(--nps-space-6);
}

.app-job-hero__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-2);
}

.app-job-hero__copy > h1 {
  text-wrap: balance;
}

.app-job-hero__cover {
  margin: 0;
  justify-self: stretch;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 16.5rem;
  overflow: hidden;
  border-radius: var(--nps-radius-lg);
  border: 1px solid var(--nps-border-strong);
  box-shadow: var(--nps-shadow-md);
  background: var(--nps-surface-inset);
}

.app-job-hero__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.app-job-hero__cover--mark {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, var(--nps-accent-soft), transparent 60%),
    var(--nps-surface-inset);
}

.app-job-hero__cover--mark img {
  width: 42%;
  height: 42%;
  object-fit: contain;
}

.app-job-hero__aside {
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-3);
  min-width: 0;
}

.app-job-hero__counts {
  margin: 0;
}

.app-job-record {
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-3);
  margin-block: var(--nps-space-3) var(--nps-space-1);
  padding: var(--nps-space-4);
  border: 1px dashed var(--nps-border-strong);
  border-radius: var(--nps-radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--nps-accent-soft) 55%, transparent), transparent 70%),
    var(--nps-surface);
}

.app-job-record__pills {
  margin: 0;
}

.app-job-record__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--nps-space-2) var(--nps-space-4);
  margin: 0;
}

.app-job-record__facts dt {
  font-size: var(--nps-fs-micro);
  letter-spacing: var(--nps-tracking-wide);
  text-transform: uppercase;
  color: var(--nps-ink-muted);
}

.app-job-record__facts dd {
  margin: 0.15em 0 0;
  color: var(--nps-ink-strong);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.app-job-record__facts--more,
.app-job-record__facts--modal {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-top: var(--nps-space-3);
}

.app-job-record__facts a {
  color: var(--nps-accent-strong);
}

.app-job-record__tools {
  align-items: center;
}

.app-job-record__more,
.app-job-record__raw {
  min-width: 0;
}

.app-job-record__more summary,
.app-job-record__raw summary {
  cursor: pointer;
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  font-size: var(--nps-fs-caption);
  font-weight: var(--nps-fw-semibold);
  color: var(--nps-ink-strong);
}

.app-job-record__more summary:focus-visible,
.app-job-record__raw summary:focus-visible,
.app-job-record-dialog [data-job-record-close]:focus-visible {
  outline: 2px solid var(--nps-accent);
  outline-offset: 2px;
}

.app-job-record__more-body {
  margin-top: var(--nps-space-3);
}

.app-job-record__note {
  margin: 0 0 var(--nps-space-3);
  max-height: 12rem;
  overflow: auto;
  padding: var(--nps-space-3);
  border-left: 3px solid var(--nps-accent);
  background: var(--nps-surface-inset);
  color: var(--nps-ink-strong);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.app-job-record-dialog .app-job-record__note {
  max-height: none;
}

.app-job-record-dialog {
  width: min(42rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--nps-border-strong);
  border-radius: var(--nps-radius-xl);
  background: var(--nps-surface-raised);
  color: var(--nps-ink);
  box-shadow: var(--nps-shadow-modal);
}

.app-job-record-dialog::backdrop {
  background: color-mix(in srgb, var(--nps-ink-strong) 46%, transparent);
}

.app-job-record-dialog__sheet {
  padding: var(--nps-space-5);
}

.app-job-record-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--nps-space-3);
  margin-bottom: var(--nps-space-3);
}

.app-job-record-dialog__head h2 {
  margin: 0;
  font-size: var(--nps-fs-title);
  text-wrap: balance;
}

.app-job-record__json {
  margin: var(--nps-space-3) 0 0;
  max-height: 22rem;
  overflow: auto;
  padding: var(--nps-space-3);
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-md);
  background: var(--nps-surface-inset);
  font-size: var(--nps-fs-micro);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .app-job-record,
  .app-job-record-dialog {
    transition: none;
  }
}

.app-job-actions {
  margin: 0;
  align-items: center;
}

.app-job-actions form {
  margin: 0;
}

.app-roster-samples {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--nps-ink-strong);
  font-size: var(--nps-fs-caption);
}

.app-roster-samples li {
  overflow-wrap: anywhere;
}

.nps-progress__bar {
  transition: width var(--nps-duration-normal) var(--nps-ease-standard);
}

.app-gallery__toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--nps-space-4);
  align-items: end;
}

.app-gallery__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin: 0;
  padding: 0.2rem;
  border: 1px solid var(--nps-border-strong);
  border-radius: var(--nps-radius-md);
  background: var(--nps-surface-inset);
  box-shadow: var(--nps-shadow-inset);
}
.app-gallery__filters label {
  text-transform: capitalize;
}

.app-gallery__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.3em 0.85em;
  margin: 0;
  border: 0;
  border-radius: var(--nps-radius-sm);
  background: transparent;
  color: var(--nps-ink-muted);
  font-size: var(--nps-fs-micro);
  font-weight: var(--nps-fw-semibold);
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.app-gallery__chip:hover {
  color: var(--nps-ink-strong);
  background: var(--nps-surface);
}

.app-gallery__chip:has(:checked) {
  background: var(--nps-accent);
  color: var(--nps-ink-onAccent);
}

.app-gallery__chip:has(:focus-visible) {
  box-shadow: var(--nps-shadow-ring-accent);
}

.app-gallery__sorts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nps-space-3);
  align-items: end;
}

.app-gallery__sorts .nps-field { width: auto; }
.app-gallery__sorts .nps-select { min-height: 2.5rem; width: auto; }

.app-gallery__size input[type="range"] {
  width: 10rem;
  min-height: var(--nps-touch-target);
}

.app-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--app-thumb, 8rem), 1fr));
  gap: var(--nps-space-3);
}

.app-gallery__cell {
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-1);
  min-width: 0;
}

.app-gallery__retry .nps-btn {
  width: 100%;
}

.app-gallery__item {
  container: gallery-item / inline-size;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.app-gallery__face {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--nps-border-strong);
  border-radius: var(--nps-radius-sm);
  background:
    repeating-linear-gradient(
      -45deg,
      var(--nps-surface-inset),
      var(--nps-surface-inset) 0.5rem,
      var(--nps-surface-strong) 0.5rem,
      var(--nps-surface-strong) 1rem
    );
  color: var(--nps-ink-muted);
  font-size: var(--nps-fs-micro);
}

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

.app-gallery__face[data-kind="failed"] {
  background: color-mix(in srgb, var(--nps-danger) 14%, var(--nps-surface-inset));
  color: var(--nps-danger-fg);
  text-align: center;
  padding: var(--nps-space-2);
}

.app-gallery__face[data-kind="videos"] {
  background: var(--nps-surface-inset);
}

.app-gallery__face[data-kind="videos"]::after {
  content: "";
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--nps-radius-pill);
  background: color-mix(in srgb, var(--nps-ink-strong) 72%, transparent);
  box-shadow: var(--nps-shadow-sm);
  clip-path: polygon(38% 28%, 78% 50%, 38% 72%);
}

.app-gallery__cap {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 1.1em 0.4em 0.35em;
  background: linear-gradient(transparent, color-mix(in srgb, var(--nps-ink-onAccent) 82%, transparent) 70%);
  color: var(--nps-ink-inverse);
  font-size: var(--nps-fs-nano);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

@container gallery-item (max-width: 7.25rem) {
  .app-gallery__cap {
    display: none;
  }
}

.app-gallery__comments {
  position: absolute;
  inset-inline-end: 0.35rem;
  inset-block-start: 0.35rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--nps-radius-pill);
  background: color-mix(in srgb, var(--nps-ink-onAccent) 78%, transparent);
  color: var(--nps-ink-inverse);
  font-size: var(--nps-fs-nano);
  letter-spacing: 0.01em;
  pointer-events: none;
}

.app-gallery__pager {
  display: flex;
  justify-content: center;
  margin-top: var(--nps-space-4);
}

.app-lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--nps-space-4);
  border: 0;
  background: transparent;
  color: var(--nps-ink);
}

.app-lightbox:focus {
  outline: none;
}

.app-lightbox::backdrop {
  background: color-mix(in srgb, var(--nps-ink) 62%, transparent);
}

.app-lightbox__sheet {
  display: flex;
  flex-direction: column;
  width: min(72rem, 100%);
  max-height: calc(100dvh - 2rem);
  margin-inline: auto;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--nps-surface-strong) 88%, var(--nps-accent-soft)),
      var(--nps-surface) 7rem
    );
  border: 1px solid var(--nps-border-strong);
  border-radius: var(--nps-radius-lg);
  box-shadow: var(--nps-shadow-md);
}

.app-lightbox__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--nps-space-3);
  padding: var(--nps-space-3) var(--nps-space-4);
  border-bottom: 1px solid var(--nps-divider);
}

.app-lightbox__view {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: var(--nps-space-1);
}

.app-lightbox__view[hidden] {
  display: none;
}

.app-comments-catchup {
  margin-block: var(--nps-space-5);
}

.app-comments-catchup__form {
  margin-top: var(--nps-space-3);
}

.app-comments-catchup__fields {
  align-items: end;
}

.app-lightbox__title {
  margin: 0;
  min-width: 0;
  font-family: var(--nps-font-display);
  font-size: var(--nps-fs-title);
  font-weight: var(--nps-fw-semibold);
  color: var(--nps-ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-lightbox__pos {
  margin: 0;
  font-size: var(--nps-fs-micro);
  letter-spacing: var(--nps-tracking-wide);
  text-transform: uppercase;
  color: var(--nps-ink-muted);
}

.app-lightbox__nav {
  flex-wrap: nowrap;
}

.app-lightbox__body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 22rem);
  min-height: 0;
  flex: 1;
}

.app-lightbox__stage {
  display: grid;
  place-items: center;
  min-height: 16rem;
  padding: var(--nps-space-4);
  background:
    repeating-linear-gradient(
      -45deg,
      var(--nps-surface-inset),
      var(--nps-surface-inset) 0.7rem,
      color-mix(in srgb, var(--nps-surface-strong) 70%, var(--nps-ink) 6%) 0.7rem,
      color-mix(in srgb, var(--nps-surface-strong) 70%, var(--nps-ink) 6%) 1.4rem
    );
  overflow: auto;
}

.app-lightbox__stage img,
.app-lightbox__stage video,
.app-lightbox__stage iframe {
  max-width: 100%;
  max-height: min(68dvh, 40rem);
  background: var(--nps-surface);
  box-shadow: var(--nps-shadow-sm);
}

.app-lightbox__stage iframe {
  width: 100%;
  min-height: 22rem;
  border: 0;
}

.app-lightbox__panel {
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-4);
  min-width: 0;
  padding: var(--nps-space-4);
  border-left: 1px solid var(--nps-divider);
  background: color-mix(in srgb, var(--nps-surface) 92%, var(--nps-surface-inset));
  overflow: auto;
}

.app-lightbox__hint {
  margin: var(--nps-space-3) 0 0;
}

.app-lightbox__comments {
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-2);
  padding-top: var(--nps-space-3);
  border-top: 1px dashed var(--nps-border);
}

.app-lightbox__comments-title {
  margin: 0;
  font-size: var(--nps-fs-caption);
  font-weight: var(--nps-fw-semibold);
  letter-spacing: var(--nps-tracking-wide);
  text-transform: uppercase;
  color: var(--nps-ink-muted);
}

.app-lightbox__facts {
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-3);
}

.app-lightbox__ticket {
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-2);
  padding-bottom: var(--nps-space-3);
  border-bottom: 1px dashed var(--nps-border);
}

.app-lightbox__file {
  margin: 0;
  font-weight: var(--nps-fw-semibold);
  color: var(--nps-ink-strong);
  overflow-wrap: anywhere;
}

.app-lightbox__when {
  margin: 0;
  font-size: var(--nps-fs-micro);
  color: var(--nps-ink-muted);
}

.app-lightbox__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nps-space-2);
}

.app-lightbox__facts-list,
.app-lightbox__meta {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--nps-space-2) var(--nps-space-3);
  margin: 0;
  font-size: var(--nps-fs-caption);
}

.app-lightbox__facts-list dt,
.app-lightbox__meta dt {
  color: var(--nps-ink-muted);
  font-size: var(--nps-fs-micro);
  letter-spacing: var(--nps-tracking-wide);
  text-transform: uppercase;
}

.app-lightbox__facts-list dd,
.app-lightbox__meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.app-lightbox__facts-list a,
.app-lightbox__meta a,
.app-lightbox__uris a {
  color: var(--nps-accent-strong);
}

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

.app-lightbox__uris li {
  display: flex;
  align-items: center;
  gap: var(--nps-space-1);
}

.app-lightbox__uris a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 0.6em;
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-pill);
  background: var(--nps-surface);
  text-decoration: none;
}

.app-lightbox__uris a:hover {
  border-color: var(--nps-accent);
}

.app-lightbox__ann {
  font-size: var(--nps-fs-micro);
}

.app-lightbox__more {
  border-top: 1px solid var(--nps-divider);
  padding-top: var(--nps-space-3);
}

.app-lightbox__more summary {
  cursor: pointer;
  font-size: var(--nps-fs-caption);
  font-weight: var(--nps-fw-semibold);
  color: var(--nps-ink-strong);
}

.app-lightbox__more-body {
  margin-top: var(--nps-space-3);
}

.app-lightbox__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nps-space-1);
}

@media (max-width: 52rem) {
  .app-lightbox {
    padding: var(--nps-space-2);
  }

  .app-lightbox__sheet {
    max-height: calc(100dvh - 1rem);
  }

  .app-lightbox__toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .app-lightbox__pos {
    display: none;
  }

  .app-lightbox__view {
    grid-column: 1 / -1;
  }

  .app-lightbox__body {
    grid-template-columns: 1fr;
  }

  .app-lightbox__panel {
    border-left: 0;
    border-top: 1px solid var(--nps-divider);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nps-progress__bar,
  .app-copy-btn__meter-fill,
  .app-account__caret { transition: none; }
  .app__bar { backdrop-filter: none; }
  .nps-jobs--cards .nps-job:hover { transform: none; }
}

@container layout-root (max-width: 56rem) {
  .app__bar {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand tools"
      "nav nav";
    padding-inline: var(--nps-space-3);
  }

  .app__brand { grid-area: brand; }
  .app__nav { grid-area: nav; width: 100%; }
  .app__bar-end {
    grid-area: tools;
    width: 100%;
    justify-self: stretch;
  }

  .app-account { max-width: none; }
}

@container layout-root (max-width: 32rem) {
  .app__bar-end {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "account account"
      "copy settings";
    gap: var(--nps-space-2);
  }

  .app-account { grid-area: account; flex: none; max-width: none; width: 100%; }
  .app-account__menu { left: 0; width: auto; }

  .app-copy-btn {
    grid-area: copy;
    flex: none;
    width: auto;
    min-width: 0;
    justify-self: stretch;
  }

  .app-settings { grid-area: settings; }
}

.app__skip {
  position: absolute;
  left: var(--nps-space-3);
  top: var(--nps-space-3);
  z-index: 20;
  transform: translateY(-200%);
}

.app__skip:focus {
  transform: none;
}

.app__card-pad {
  padding: var(--nps-space-5);
  width: 100%;
}

.app-lookup__form {
  flex-direction: row;
  flex-wrap: wrap;
}

.app__lede {
  color: var(--nps-ink-muted);
  max-width: 40rem;
}

.app__main--auth {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100dvh - 6rem);
}

.app-auth {
  width: min(24rem, 100%);
  margin-inline: auto;
}

.app-auth h1 {
  margin-block: 0 var(--nps-space-2);
}

.app-users {
  display: grid;
  gap: var(--nps-space-3);
}

.app-user__name {
  margin: 0;
  font-size: var(--nps-fs-body);
}

.app-user__meta {
  margin: var(--nps-space-1) 0 0;
  color: var(--nps-ink-muted);
}

.app-page-head h1 {
  margin-block: 0 var(--nps-space-2);
}

.app-page-head .app__lede {
  margin-top: 0;
}

.app-trash {
  display: grid;
  gap: var(--nps-space-3);
}

.app-trash__toolbar {
  justify-content: space-between;
  align-items: center;
}

.app-comments-archive {
  display: grid;
  gap: var(--nps-space-4);
}

.app-page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nps-space-2);
  margin: var(--nps-space-5) 0 var(--nps-space-3);
  border-bottom: 1px solid var(--nps-border);
}

.app-page-tabs__tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--nps-space-2) var(--nps-space-3);
  margin-bottom: -1px;
  font: inherit;
  color: var(--nps-ink-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.app-page-tabs__tab:hover {
  color: var(--nps-ink);
}

.app-page-tabs__tab.is-active,
.app-page-tabs__tab[aria-selected="true"] {
  color: var(--nps-ink);
  border-bottom-color: var(--nps-accent);
  font-weight: 600;
}

.app-comments-photos {
  display: grid;
  gap: var(--nps-space-4);
}

.app-comments-photos__job {
  padding: var(--nps-space-5);
}

.app-comments-photos__gallery {
  margin: var(--nps-space-3) 0 0;
}

.app-comments-archive__toolbar {
  justify-content: space-between;
  align-items: center;
}

.app-comments-archive__job {
  padding: var(--nps-space-5);
}

.app-comments-archive__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--nps-space-3);
}

.app-comments-archive__name {
  margin: 0;
  font-size: var(--nps-fs-title);
}

.app-comments-archive__name a {
  color: inherit;
  text-decoration: none;
}

.app-comments-archive__name a:hover {
  color: var(--nps-accent-strong);
}

.app-comments-archive__meta,
.app-comments-archive__addr {
  margin: var(--nps-space-1) 0 0;
  color: var(--nps-ink-muted);
  font-size: var(--nps-fs-caption);
}

.app-comments-archive__go {
  margin: var(--nps-space-3) 0 0;
}

.app-comments-archive__go a {
  color: var(--nps-accent-strong);
}

.app-trash-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.app-trash-card__body {
  padding: var(--nps-space-4);
}

.app-trash-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--nps-space-3);
}

.app-trash-card__name {
  margin: 0;
  font-size: var(--nps-fs-title);
}

.app-trash-card__meta {
  margin: var(--nps-space-1) 0 0;
  color: var(--nps-ink-muted);
  word-break: break-all;
}

.app-trash-card__addr {
  margin: var(--nps-space-1) 0 0;
}

.app-trash-card__hint {
  margin: var(--nps-space-3) 0 0;
  color: var(--nps-ink-muted);
  font-size: var(--nps-fs-caption);
}

.app-trash-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--nps-space-2);
  padding: var(--nps-space-3) var(--nps-space-4);
  border-top: 1px solid var(--nps-divider);
  background: var(--nps-page-soft);
}

.app-settings__user {
  margin: 0;
  font-family: var(--nps-font-mono);
  font-size: var(--nps-fs-micro);
  color: var(--nps-ink-strong);
}

.app-switch {
  display: flex;
  align-items: center;
  gap: var(--nps-space-3);
  width: 100%;
  margin: 0;
  padding: var(--nps-space-3);
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-lg);
  background: var(--nps-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.app-switch:hover {
  border-color: var(--nps-accent);
}

.app-switch__icons {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--nps-radius-sm);
  background: var(--nps-surface-inset);
  color: var(--nps-ink-strong);
}

.app-switch[aria-checked="true"] .app-switch__sun,
.app-switch[aria-checked="false"] .app-switch__moon {
  display: none;
}

.app-switch__copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.app-switch__kicker {
  font-size: var(--nps-fs-micro);
  letter-spacing: var(--nps-tracking-wide);
  text-transform: uppercase;
  color: var(--nps-ink-muted);
}

.app-switch__value {
  font-weight: var(--nps-fw-semibold);
}

.app-switch__track {
  position: relative;
  flex: 0 0 2.6rem;
  width: 2.6rem;
  height: 1.45rem;
  border-radius: 999px;
  background: var(--nps-surface-inset);
  box-shadow: var(--nps-shadow-inset);
}

.app-switch[aria-checked="true"] .app-switch__track {
  background: var(--nps-accent);
}

.app-switch__thumb {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--nps-surface-raised);
  box-shadow: var(--nps-shadow-xs);
  transition: transform var(--nps-duration-fast) var(--nps-ease-standard);
}

.app-switch[aria-checked="true"] .app-switch__thumb {
  transform: translateX(1.15rem);
}

.app-size-chooser {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-pill);
  background: var(--nps-surface-inset);
}

.app-size-chooser__opt {
  min-height: 2.25rem;
  padding: 0 var(--nps-space-2);
  border: 0;
  border-radius: var(--nps-radius-pill);
  background: transparent;
  color: var(--nps-ink-muted);
  font: inherit;
  font-size: var(--nps-fs-caption);
  font-weight: var(--nps-fw-semibold);
  cursor: pointer;
}

.app-size-chooser__opt:hover {
  color: var(--nps-ink);
}

.app-size-chooser__opt[aria-checked="true"] {
  background: var(--nps-surface-raised);
  color: var(--nps-ink-strong);
  box-shadow: var(--nps-shadow-xs);
}

.app-size-chooser--compact .app-size-chooser__opt {
  min-height: 2rem;
  font-size: var(--nps-fs-micro);
}

@media (prefers-reduced-motion: reduce) {
  .app-switch__thumb {
    transition: none;
  }
}

.app__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nps-space-3);
  margin-top: var(--nps-space-4);
}

.app__files {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-lg);
  overflow: hidden;
  background: var(--nps-surface);
}

.app__file {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: var(--nps-space-3);
  align-items: center;
  padding: var(--nps-space-3);
}

.app__file + .app__file { border-top: 1px solid var(--nps-divider); }

.app__file img,
.app__file video {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: var(--nps-radius-sm);
  border: 1px solid var(--nps-border);
  background: var(--nps-surface-inset);
}

.app__file-meta {
  min-width: 0;
}

.app__file-name {
  font-weight: var(--nps-fw-semibold);
  color: var(--nps-ink-strong);
}

@container layout-root (max-width: 40rem) {
  .app-job-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-job-hero__cover {
    max-height: 14rem;
    aspect-ratio: 16 / 9;
  }

  .app-job-record {
    padding: var(--nps-space-3);
  }

  .app-job-record-dialog {
    width: calc(100% - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  .app__file {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }

  .app-copy-dialog__facts {
    grid-template-columns: 1fr;
  }
}

.app-lookup {
  max-width: 100%;
}

.app-lookup__actions {
  margin-top: var(--nps-space-2);
}

.app-roster-upload {
  overflow: hidden;
}

.app-roster-upload__sum {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  min-height: var(--nps-touch-target);
  padding: var(--nps-space-3) var(--nps-space-4);
  font-family: var(--nps-font-display);
  font-weight: var(--nps-fw-semibold);
}

.app-roster-upload__sum::-webkit-details-marker {
  display: none;
}

.app-roster-upload__sum:focus-visible {
  outline: 2px solid var(--nps-focus-outline);
  outline-offset: -2px;
}

.app-roster-upload[open] .app-roster-upload__sum {
  border-bottom: 1px solid var(--nps-divider);
}

.app-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--nps-space-2);
  min-height: 11rem;
  padding: var(--nps-space-6) var(--nps-space-5);
  text-align: center;
  cursor: pointer;
  color: var(--nps-ink-muted);
  background: var(--nps-surface-inset);
  border: 1px dashed var(--nps-border-strong);
  border-radius: var(--nps-radius-lg);
  box-shadow: var(--nps-shadow-inset);
  transition:
    border-color var(--nps-duration-fast) var(--nps-ease-out),
    background-color var(--nps-duration-fast) var(--nps-ease-out),
    box-shadow var(--nps-duration-fast) var(--nps-ease-out);
}

.app-drop__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.app-drop__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--nps-accent-strong);
  background: var(--nps-surface);
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-lg);
  box-shadow: var(--nps-shadow-xs);
}

.app-drop__title {
  font-family: var(--nps-font-display);
  font-weight: var(--nps-fw-semibold);
  color: var(--nps-ink-strong);
}

.app-drop__hint {
  max-width: 22rem;
  font-size: var(--nps-fs-caption);
  color: var(--nps-ink-muted);
}

.app-drop:hover,
.app-drop.is-drag {
  color: var(--nps-ink);
  background: var(--nps-accent-soft);
  border-color: var(--nps-accent);
  box-shadow: var(--nps-shadow-inset), var(--nps-shadow-ring-accent);
}

.app-drop.is-ready {
  border-style: solid;
  border-color: var(--nps-accent);
  background: var(--nps-surface);
}

.app-drop.is-ready .app-drop__title {
  font-family: var(--nps-font-mono);
  font-weight: var(--nps-fw-medium);
}

.app-drop.is-reject {
  border-color: var(--nps-danger);
  background: var(--nps-danger-soft);
}

.app-drop:focus-within {
  outline: 2px solid var(--nps-focus-outline);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .app-drop {
    transition: none;
  }
}

.app-roster-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--nps-space-3);
}

.app-roster-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--nps-space-3);
  padding-top: var(--nps-space-2);
}

.app-roster-pager__pos {
  margin: 0;
  font-size: var(--nps-fs-caption);
  color: var(--nps-ink-muted);
}

.app-lookup-result {
  min-width: 0;
}

.app-lookup-result__pills {
  margin-top: var(--nps-space-2);
}

.app-lookup-result__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--nps-space-2) var(--nps-space-4);
  margin: var(--nps-space-3) 0 0;
}

.app-lookup-result__facts dt {
  font-size: var(--nps-fs-micro);
  letter-spacing: var(--nps-tracking-wide);
  text-transform: uppercase;
  color: var(--nps-ink-muted);
}

.app-lookup-result__facts dd {
  margin: 0.15em 0 0;
}

.app-lookup-result__counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nps-space-3);
  margin-top: var(--nps-space-3);
  font-size: var(--nps-fs-caption);
  color: var(--nps-ink-muted);
}

.app-lookup-result__counts .nps-icon {
  vertical-align: -0.15em;
}

.app-settings-hero {
  max-width: 40rem;
}

.app-settings-hero__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nps-space-3);
  margin: var(--nps-space-3) 0 0;
  color: var(--nps-ink-muted);
}

.app-settings-panel {
  max-width: 40rem;
  padding: 0;
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-xl);
  background: var(--nps-surface);
  overflow: hidden;
}

.app-settings-panel + .app-settings-panel {
  margin-top: var(--nps-space-4);
}

.app-settings-panel__head {
  padding: var(--nps-space-5) var(--nps-space-5) var(--nps-space-3);
}

.app-settings-panel__head h2 {
  margin: 0;
  font-size: var(--nps-fs-title);
}

.app-settings-panel__head p {
  margin: var(--nps-space-2) 0 0;
  color: var(--nps-ink-muted);
  font-size: var(--nps-fs-caption);
}

.app-settings-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-4);
  padding: 0 var(--nps-space-5) var(--nps-space-5);
}

.app-settings-control {
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-2);
}

.app-settings-control__hint {
  margin: 0;
  color: var(--nps-ink-muted);
  font-size: var(--nps-fs-caption);
}

.app-settings-dests {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--nps-divider);
}

.app-settings-dest {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--nps-space-3);
  min-height: 4.25rem;
  padding: var(--nps-space-4) var(--nps-space-5);
  color: inherit;
  text-decoration: none;
}

.app-settings-dest + .app-settings-dest,
.app-settings-fleet + .app-settings-fleet {
  border-top: 1px solid var(--nps-divider);
}

.app-settings-fleet {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--nps-space-3);
  margin: 0;
  min-height: 4.25rem;
  padding: var(--nps-space-4) var(--nps-space-5);
}

.app-settings-fleet .nps-btn {
  justify-self: end;
}

@media (max-width: 40rem) {
  .app-settings-fleet {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .app-settings-fleet .nps-btn {
    grid-column: 2 / -1;
    justify-self: start;
  }
}

.app-settings-dest:hover {
  background: var(--nps-page-soft);
}

.app-settings-dest--static {
  cursor: default;
}

.app-settings-dest--static:hover {
  background: transparent;
}

.app-settings-dest__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--nps-radius-sm);
  background: var(--nps-surface-inset);
  color: var(--nps-ink-strong);
}

.app-settings-dest__copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.app-settings-dest__copy strong {
  font-size: var(--nps-fs-body);
}

.app-settings-dest__copy small {
  color: var(--nps-ink-muted);
  font-size: var(--nps-fs-caption);
}

.app-settings-dest__chev {
  color: var(--nps-ink-muted);
}

.app-settings-panel--quiet {
  background: transparent;
  border-style: dashed;
}

.app-settings-panel--quiet form {
  padding: 0 var(--nps-space-5) var(--nps-space-5);
}

.app-discover-views {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--nps-space-3);
}

.app-discover-views a {
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-1);
  padding: var(--nps-space-3) var(--nps-space-4);
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-lg);
  background: var(--nps-surface);
  color: inherit;
  text-decoration: none;
}

.app-discover-views a:hover {
  border-color: var(--nps-accent);
}

.app-discover-views a[aria-current="page"] {
  border-color: var(--nps-accent);
  box-shadow: var(--nps-shadow-sm);
}

.app-discover-views__n {
  font-size: var(--nps-fs-title);
  color: var(--nps-ink-strong);
}

.app-import-tabs {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  gap: 0.15rem;
  padding: 0.3rem;
  background: var(--nps-surface-inset);
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-pill);
  font-family: var(--nps-font-display);
  font-size: var(--nps-fs-caption);
  font-weight: var(--nps-fw-semibold);
}

.app-import-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--nps-ink-muted);
  text-decoration: none;
  padding: 0.45em 0.95em;
  border-radius: var(--nps-radius-pill);
  min-height: var(--nps-touch-target);
}

.app-import-tabs a:hover {
  color: var(--nps-ink-strong);
  background: color-mix(in srgb, var(--nps-surface-raised) 70%, transparent);
}

.app-import-tabs a:focus-visible {
  outline: 2px solid var(--nps-focus-outline);
  outline-offset: 2px;
}

.app-import-tabs a[aria-current="page"] {
  color: var(--nps-ink-strong);
  background: var(--nps-surface-raised);
  box-shadow: var(--nps-shadow-xs);
}

.app-discover-toolbar {
  container-type: inline-size;
}

.app-discover-toolbar .app__card-pad {
  justify-content: space-between;
}

.app-discover-toolbar__meta {
  margin: 0;
  color: var(--nps-ink-muted);
  font-size: var(--nps-fs-caption);
}

.app-catchup-toolbar .app__card-pad {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--nps-space-3);
}

.app-catchup-toolbar__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--nps-space-3);
}

.app-catchup-since {
  margin: 0;
}

.app-catchup-since .nps-input {
  min-width: 12rem;
}

.app-catchup-kpis {
  margin-bottom: var(--nps-space-4);
}

.app-catchup-card--new {
  box-shadow: inset 3px 0 0 var(--nps-accent);
}

.app-catchup-delta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nps-space-3);
  margin-top: var(--nps-space-3);
  padding: var(--nps-space-3);
  background: var(--nps-surface-inset);
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-md);
  box-shadow: var(--nps-shadow-inset);
}

.app-catchup-delta > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.app-catchup-delta__k {
  font-size: var(--nps-fs-micro);
  font-weight: var(--nps-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nps-ink-faint);
}

.app-catchup-delta strong {
  font-family: var(--nps-font-display);
  color: var(--nps-ink-strong);
}

.app-catchup-delta .nps-mono {
  font-size: var(--nps-fs-micro);
  color: var(--nps-ink-muted);
}

.app-discover-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nps-space-3);
}

.app-discover-kpi {
  padding: var(--nps-space-3) var(--nps-space-4);
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-lg);
  background: var(--nps-surface);
}

.app-discover-kpi__n {
  margin: 0;
  font-size: var(--nps-fs-title);
  font-weight: var(--nps-fw-bold);
  color: var(--nps-ink-strong);
}

.app-discover-kpi__l {
  margin: 0.15rem 0 0;
  font-size: var(--nps-fs-micro);
  color: var(--nps-ink-muted);
}

.app-discover-kpi--info .app-discover-kpi__n { color: var(--nps-info-fg, var(--nps-ink-strong)); }
.app-discover-kpi--warning .app-discover-kpi__n { color: var(--nps-warning-fg); }

.app-discover__bar {
  justify-content: space-between;
}

.app-discover__all {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: var(--nps-touch-target);
  font-size: var(--nps-fs-caption);
  font-weight: var(--nps-fw-semibold);
}

.app-discover__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: var(--nps-space-4);
}

.app-discover-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-lg);
  background: var(--nps-surface);
  overflow: hidden;
  transition:
    box-shadow var(--nps-duration-fast) var(--nps-ease-standard),
    transform var(--nps-duration-fast) var(--nps-ease-standard);
}

.app-discover-card:hover {
  box-shadow: var(--nps-shadow-md);
  transform: translateY(-1px);
}

.app-discover-card__pick {
  position: absolute;
  top: var(--nps-space-2);
  left: var(--nps-space-2);
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--nps-touch-target);
  height: var(--nps-touch-target);
  border-radius: var(--nps-radius-sm);
  background: color-mix(in srgb, var(--nps-surface) 88%, transparent);
  backdrop-filter: blur(6px);
}

.app-discover-card__pick input {
  width: 1.15rem;
  height: 1.15rem;
}

.app-discover-card__cover {
  height: 10.5rem;
  border-bottom: 1px solid var(--nps-border);
  background: var(--nps-surface-inset);
}

.app-discover-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-discover-card__cover--mark {
  display: grid;
  place-items: center;
  color: var(--nps-ink-muted);
  background:
    radial-gradient(circle at 30% 20%, var(--nps-accent-soft), transparent 60%),
    var(--nps-surface-inset);
}

.app-discover-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--nps-space-2);
  padding: var(--nps-space-4);
  flex: 1;
}

.app-discover-card__name {
  margin: 0;
  font-size: var(--nps-fs-body);
  font-weight: var(--nps-fw-semibold);
  color: var(--nps-ink-strong);
}

.app-discover-card__addr,
.app-discover-card__id,
.app-discover-card__note {
  margin: 0;
  font-size: var(--nps-fs-caption);
  color: var(--nps-ink-muted);
}

.app-discover-card__note {
  font-style: italic;
}

.app-discover-card__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nps-space-2);
  margin: 0;
}

.app-discover-card__facts div {
  min-width: 0;
}

.app-discover-card__facts dt {
  font-size: var(--nps-fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--nps-tracking-wide);
  color: var(--nps-ink-muted);
}

.app-discover-card__facts dd {
  margin: 0;
  font-size: var(--nps-fs-caption);
  color: var(--nps-ink-strong);
}

.app-discover-card__counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nps-space-3);
  font-size: var(--nps-fs-caption);
  color: var(--nps-ink-strong);
}

.app-discover-card__counts span {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.app-discover-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nps-space-2);
  padding: 0 var(--nps-space-4) var(--nps-space-4);
}

.app-discover-ignored {
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-lg);
  background: var(--nps-surface);
  padding: var(--nps-space-3) var(--nps-space-4);
}

.app-discover-ignored summary {
  cursor: pointer;
  font-weight: var(--nps-fw-semibold);
  min-height: var(--nps-touch-target);
  display: flex;
  align-items: center;
}

.app-discover-ignored summary:focus-visible {
  outline: 2px solid var(--nps-focus-outline);
  outline-offset: 2px;
}

.app-discover-ignored__list {
  list-style: none;
  margin: var(--nps-space-3) 0 0;
  padding: 0;
}

.app-discover-ignored__list--page {
  margin: 0;
  padding: 0 var(--nps-space-4);
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-lg);
  background: var(--nps-surface);
}

.app-discover-ignored__list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--nps-space-2);
  padding: var(--nps-space-2) 0;
}

.app-discover-ignored__list li + li {
  border-top: 1px solid var(--nps-divider);
}

.app-discover-ignored__list p {
  margin: 0.15rem 0 0;
  font-size: var(--nps-fs-micro);
  color: var(--nps-ink-muted);
}

@media (prefers-reduced-motion: reduce) {
  .app-discover-card,
  .app-discover-card:hover {
    transition: none;
    transform: none;
  }
}

@container layout-root (max-width: 48rem) {
  .app-discover-views {
    grid-template-columns: 1fr;
  }

  .app-discover-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-discover__list {
    grid-template-columns: 1fr;
  }

  .app-discover-card__facts,
  .app-catchup-delta {
    grid-template-columns: 1fr 1fr;
  }
}