/*
 * Cards
 *
 * BEM classes for the card-shaped components in
 * app/components/ui/cards/. Cards::Text and Cards::Number are flat
 * tiles (no shadow); Cards::StatsWithTrends reuses .panel + .panel
 * --compact for its outer container. .trend-pill is the inline
 * up/down indicator.
 */

/* ------------------------------------------------------------------ */
/* Text card — flat tile.                                             */
/* ------------------------------------------------------------------ */

.text-card {
  background-color: var(--color-surface);
  padding: 1.5rem 1rem;
}

.text-card__title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-card__value {
  margin-block-start: 0.25rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-ink);
}

@media (min-width: 640px) {
  .text-card { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
  .text-card { padding-inline: 2rem; }
}

/* ------------------------------------------------------------------ */
/* Number card — flat title + total.                                  */
/* ------------------------------------------------------------------ */

.number-card {
  background-color: var(--color-surface);
  margin-inline: 0.5rem;
}

.number-card__title {
  padding: 0.75rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
}

.number-card__title--default {
  background-color: var(--color-surface-subtle);
  color: var(--color-ink);
}

.number-card__title--red {
  background-color: rgb(var(--palette-red-100));
  color: rgb(var(--palette-red-800));
}

.number-card__title--green {
  background-color: rgb(var(--palette-green-100));
  color: rgb(var(--palette-green-800));
}

.number-card__title--yellow {
  background-color: rgb(var(--palette-yellow-100));
  color: rgb(var(--palette-yellow-800));
}

.number-card__title--blue {
  background-color: rgb(var(--palette-blue-100));
  color: rgb(var(--palette-blue-800));
}

.number-card__title--indigo {
  background-color: rgb(var(--palette-indigo-100));
  color: rgb(var(--palette-indigo-800));
}

.number-card__title--purple {
  background-color: rgb(var(--palette-purple-100));
  color: rgb(var(--palette-purple-800));
}

.number-card__title--pink {
  background-color: rgb(var(--palette-pink-100));
  color: rgb(var(--palette-pink-800));
}

.number-card__title--lime {
  background-color: rgb(var(--palette-lime-100));
  color: rgb(var(--palette-lime-800));
}

.number-card__title--teal {
  background-color: rgb(var(--palette-teal-100));
  color: rgb(var(--palette-teal-800));
}

.number-card__title--cyan {
  background-color: rgb(var(--palette-cyan-50));
  color: rgb(var(--palette-cyan-800));
}

.number-card__title--gray {
  background-color: var(--color-surface-subtle);
  color: var(--color-ink);
}

.number-card__title--white {
  background-color: var(--color-surface);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.number-card__title--black {
  background-color: oklch(var(--lch-black));
  color: var(--color-surface);
}

.number-card__title--orange {
  background-color: rgb(var(--palette-orange-100));
  color: rgb(var(--palette-orange-800));
}

.number-card__title--amber {
  background-color: rgb(var(--palette-amber-100));
  color: rgb(var(--palette-amber-800));
}

.number-card__title--emerald {
  background-color: rgb(var(--palette-emerald-100));
  color: rgb(var(--palette-emerald-800));
}

.number-card__title--rose {
  background-color: rgb(var(--palette-rose-100));
  color: rgb(var(--palette-rose-800));
}

.number-card__title--sky {
  background-color: rgb(var(--palette-sky-100));
  color: rgb(var(--palette-sky-800));
}

.number-card__title--violet {
  background-color: rgb(var(--palette-violet-100));
  color: rgb(var(--palette-violet-800));
}

.number-card__title--fuchsia {
  background-color: rgb(var(--palette-fuchsia-100));
  color: rgb(var(--palette-fuchsia-900));
}

.number-card__title--stone {
  background-color: var(--color-surface-subtle);
  color: var(--color-ink);
}

.number-card__total {
  padding: 1.25rem 1rem;
  text-align: center;
  font-size: 3rem;
  line-height: 1;
}

@media (min-width: 640px) {
  .number-card__total { padding: 1.5rem; }
}

/* ------------------------------------------------------------------ */
/* Stats card — single tile inside a row.                             */
/* ------------------------------------------------------------------ */

.stats-card {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--gap-md);
}

@media (min-width: 640px) {
  .stats-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .stats-card--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-card--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats-card--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stats-card--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stats-card--cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .stats-card--cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .stats-card--cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}

.stats-card__tile {
  padding: 1.5rem;
  border-inline-end: 1px solid var(--color-border);
}
@media (min-width: 1024px) {
  .stats-card__tile { padding: 3rem; }
}

.stats-card__row {
  display: flex;
  justify-content: space-between;
  column-gap: var(--gap-sm);
}

.stats-card__title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5rem;
  color: rgb(var(--palette-hq-blue-700));
}

.stats-card__hint {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5rem;
  color: rgb(var(--palette-hq-indigo-600));
}

.stats-card__value-row {
  margin-top: 0.5rem;
  display: flex;
  align-items: baseline;
  column-gap: 0.5rem;
}

.stats-card__value {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-ink);
}

/* ------------------------------------------------------------------ */
/* Stats card with trends — wraps an outer .panel.--compact-shaped    */
/* dl. The grid + dividers belong to .stats-card--with-trends.        */
/* ------------------------------------------------------------------ */

.stats-card--with-trends {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  border: 1px solid var(--color-border);
}

.stats-card--with-trends--spaced {
  margin-block-start: 1.25rem;
}

.stats-card--with-trends > * + * {
  border-block-start: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .stats-card--with-trends > * + * {
    border-block-start: 0;
    border-inline-start: 1px solid var(--color-border);
  }
}

@media (min-width: 1024px) {
  .stats-card--with-trends--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-card--with-trends--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats-card--with-trends--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats-card--with-trends--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stats-card--with-trends--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.stats-card--with-trends__tile {
  padding: 1.25rem 1rem;
}
@media (min-width: 640px) {
  .stats-card--with-trends__tile { padding: 1.5rem; }
}

.stats-card--with-trends__title {
  font-size: 1rem;
  font-weight: 400;
  color: rgb(var(--palette-hq-blue-700));
}

.stats-card--with-trends__value-row {
  margin-top: 0.25rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .stats-card--with-trends__value-row { display: block; }
}

@media (min-width: 1024px) {
  .stats-card--with-trends__value-row { display: flex; }
}

.stats-card--with-trends__value {
  display: flex;
  align-items: baseline;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
}

.stats-card--with-trends__value--default {
  color: var(--color-ink);
}

.stats-card--with-trends__value--green {
  color: rgb(var(--palette-green-700));
}

.stats-card--with-trends__value--yellow {
  color: rgb(var(--palette-yellow-700));
}

.stats-card--with-trends__value--red {
  color: rgb(var(--palette-red-700));
}

.stats-card--with-trends__hint {
  margin-inline-start: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-subtle);
}

/* ------------------------------------------------------------------ */
/* Trend pill                                                         */
/* ------------------------------------------------------------------ */

.trend-pill {
  display: inline-flex;
  align-items: baseline;
  border-radius: var(--radius-pill);
  padding: 0.125rem 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
}

@media (min-width: 768px) { .trend-pill { margin-block-start: 0.5rem; } }
@media (min-width: 1024px) { .trend-pill { margin-block-start: 0; } }

.trend-pill--up      { background-color: rgb(var(--palette-green-100)); color: rgb(var(--palette-green-800)); }
.trend-pill--warning { background-color: rgb(var(--palette-yellow-100)); color: rgb(var(--palette-yellow-800)); }
.trend-pill--down    { background-color: rgb(var(--palette-red-100)); color: rgb(var(--palette-red-800)); }
.trend-pill--neutral { background-color: var(--color-surface-subtle); color: var(--color-ink); }

/* ------------------------------------------------------------------ */
/* Metric summaries — compact dl grids for leave/overtime balances.   */
/* ------------------------------------------------------------------ */

.metric-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

.metric-summary--spaced {
  margin-block-start: 1.25rem;
}

@media (min-width: 640px) {
  .metric-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .metric-summary--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.metric-summary__tile {
  overflow: hidden;
  padding: 1.25rem 1rem;
}

@media (min-width: 640px) {
  .metric-summary__tile {
    padding: 1.5rem;
  }
}

.metric-summary__label {
  overflow: hidden;
  color: var(--color-subtle);
  font-size: 0.875rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-summary__value {
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 2.25rem;
}

.metric-summary__progress {
  margin-block-start: 1rem;
}

/* ------------------------------------------------------------------ */
/* Standalone stat trend tile.                                        */
/* ------------------------------------------------------------------ */

.stat-trend-tile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 2.5rem 1rem;
  border-block-start: 1px solid oklch(var(--lch-black) / 5%);
}

@media (min-width: 640px) {
  .stat-trend-tile {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .stat-trend-tile {
    border-block-start: 0;
  }
}

@media (min-width: 1280px) {
  .stat-trend-tile {
    padding-inline: 2rem;
  }
}

.stat-trend-tile__title {
  color: var(--color-subtle);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.stat-trend-tile__trend {
  color: var(--color-ink-light);
  font-size: 0.75rem;
  font-weight: 500;
}

.stat-trend-tile__value {
  flex: none;
  inline-size: 100%;
  color: var(--color-ink);
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 2.5rem;
}

/* ------------------------------------------------------------------ */
/* Summary card partial                                                */
/* ------------------------------------------------------------------ */

.summary-card__body {
  padding: 1.25rem 1rem;
}

@media (min-width: 640px) {
  .summary-card__body {
    padding: 1.5rem;
  }
}

.summary-card__row {
  display: flex;
  align-items: center;
}

.summary-card__content {
  flex: 1 1 0;
  inline-size: 0;
  margin-inline-start: 1.25rem;
}

.summary-card__title {
  overflow: hidden;
  color: var(--color-subtle);
  font-size: 1rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary-card__value-row {
  display: flex;
  align-items: baseline;
}


.summary-card__trend {
  display: flex;
  align-items: baseline;
  margin-inline-start: 0.5rem;
  color: var(--color-success-strong);
  font-size: 0.875rem;
  font-weight: 600;
}

.summary-card__trend-icon {
  align-self: center;
  flex-shrink: 0;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--color-success);
}

.summary-card__footer {
  background-color: var(--color-surface-muted);
  padding: 1rem;
}

@media (min-width: 640px) {
  .summary-card__footer {
    padding-inline: 1.5rem;
  }
}

.summary-card__footer-text {
  font-size: 0.875rem;
}

/* ------------------------------------------------------------------ */
/* Employee cards                                                      */
/* ------------------------------------------------------------------ */

.employee-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease;
}

.employee-card:hover {
  box-shadow: var(--shadow-md);
}

.employee-card--onboarding {
  background-color: rgb(var(--palette-blue-50));
}

.employee-card--absence {
  background-color: rgb(var(--palette-pink-50));
}

.employee-card--external {
  background-color: rgb(var(--palette-amber-50));
}

.employee-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1rem;
}

@media (min-width: 640px) {
  .employee-card__body {
    padding: 1.5rem;
  }
}


.employee-card__spacer {
  inline-size: 2rem;
  block-size: 2rem;
}

.employee-card__notice {
  margin-block-end: 0.75rem;
  padding: 0.5rem;
  border: 1px solid rgb(var(--palette-blue-200));
  border-radius: var(--radius-md);
  background-color: rgb(var(--palette-blue-50));
}

.employee-card__notice-text {
  margin: 0;
  color: rgb(var(--palette-blue-800));
  font-size: 0.875rem;
  font-weight: 500;
}

.employee-card__identity {
  margin-block-end: 0.75rem;
  text-align: center;
}

.employee-card__name {
  margin: 0 0 0.25rem;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 600;
}

.employee-card__job {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.125rem 0.625rem;
  background-color: rgb(var(--palette-purple-100));
  color: rgb(var(--palette-purple-800));
  font-size: 0.75rem;
  font-weight: 500;
}


.employee-card__summary {
  color: var(--color-ink-light);
  font-size: 0.875rem;
}

.employee-card__summary-row,
.employee-card__meta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 0;
}

.employee-card__icon {
  flex-shrink: 0;
  inline-size: 1rem;
  block-size: 1rem;
  margin-inline-end: 0.5rem;
  color: var(--color-ink-lighter);
}

.employee-card__icon--small {
  inline-size: 0.75rem;
  block-size: 0.75rem;
}

.employee-card__meta {
  margin-block-start: 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--color-surface-subtle);
}

.employee-card__meta-list {
  color: var(--color-subtle);
  font-size: 0.75rem;
}

@media (min-width: 640px) {
  .employee-card__meta-row {
    justify-content: flex-start;
  }
}

/* ------------------------------------------------------------------ */
/* Project cards                                                       */
/* ------------------------------------------------------------------ */

.project-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.project-card:hover {
  border-color: var(--color-border-medium);
  box-shadow: var(--shadow-md);
}

.project-card--pinned {
  box-shadow: 0 0 0 2px rgb(var(--palette-yellow-200) / 0.5), var(--shadow-sm);
}

.project-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-block-end: 1px solid var(--color-surface-subtle);
  background-color: var(--color-surface-muted);
}

.project-card__header--pinned {
  background-image: linear-gradient(to right, rgb(var(--palette-yellow-50)), rgb(var(--palette-cream-50)));
}

.project-card__heading-row {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 1rem;
  min-inline-size: 0;
}

.project-card__title-wrap {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.project-card__title {
  margin: 0;
  overflow: hidden;
  color: var(--color-ink);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card__link {
  transition: color 150ms ease;
}

.project-card__link:hover {
  color: var(--color-brand-strong);
}

.project-card__status,
.project-card__detail-label {
  color: var(--color-ink-light);
  font-size: 1rem;
  font-weight: 500;
}

.project-card__progress-value {
  color: var(--color-subtle);
  font-size: 1rem;
}

.project-card__progress {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.project-card__progress-meta {
  color: var(--color-subtle);
  font-size: 0.875rem;
}

.project-card__progress-state--behind {
  color: var(--color-danger-strong);
}

.project-card__progress-state--active {
  color: rgb(var(--palette-yellow-600));
}

.project-card__progress-state--healthy {
  color: var(--color-success-strong);
}

.project-card__progress-bar {
  position: relative;
}

.project-card__pinned-details {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--color-surface-subtle);
}


.project-card__icon {
  flex-shrink: 0;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--color-ink-lighter);
}

.project-card__detail-value,
.project-card__pending-count {
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 500;
}

.project-card__pending-count {
  font-weight: 600;
}

.project-card__pending-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem;
  background-color: rgb(var(--palette-red-100));
  color: rgb(var(--palette-red-800));
  font-size: 0.875rem;
  font-weight: 500;
}

/* ------------------------------------------------------------------ */
/* Pin toggle                                                          */
/* ------------------------------------------------------------------ */

.pin-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: inset 0 0 0 1px oklch(var(--lch-black) / 10%);
}

.pin-toggle__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block-start: 0.25rem;
  border: 0;
  background: transparent;
  color: rgb(var(--palette-yellow-400));
  cursor: pointer;
}

.pin-toggle__button:focus-visible {
  outline: 2px solid var(--color-brand-strong);
  outline-offset: 2px;
}

.pin-toggle__icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* Employee role badge                                                 */
/* ------------------------------------------------------------------ */

.employee-role {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
}

.employee-role--admin {
  background-color: rgb(var(--palette-pink-100));
  color: rgb(var(--palette-pink-800));
}

.employee-role--manager {
  background-color: rgb(var(--palette-purple-100));
  color: rgb(var(--palette-purple-800));
}

.employee-role--onboarding {
  background-color: rgb(var(--palette-sky-100));
  color: rgb(var(--palette-sky-800));
}

.employee-role--default {
  background-color: rgb(var(--palette-yellow-100));
  color: rgb(var(--palette-yellow-800));
}

/* ------------------------------------------------------------------ */
/* Project next section                                                */
/* ------------------------------------------------------------------ */

.project-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-block-start: 1.5rem;
  padding-inline: 0.5rem;
}

@media (min-width: 768px) {
  .project-next {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
}

.project-next__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.75rem;
}

.project-next__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: 0.5rem;
}

.project-next__row--between {
  justify-content: space-between;
}

.project-next__empty {
  color: var(--color-subtle);
}

.project-participants {
  margin-block-start: 1.5rem;
  padding-inline: 0.5rem;
}

.project-participants__title {
  margin-block: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.project-comments-tags {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .project-comments-tags {
    flex-direction: row;
    padding-inline: 2rem;
  }
}

/* ------------------------------------------------------------------ */
/* Assignment detail summary                                          */
/* ------------------------------------------------------------------ */

.assignment-summary {
  background-color: var(--color-surface);
}

.assignment-summary__inner {
  margin-inline: auto;
  max-inline-size: 80rem;
}

.assignment-summary__grid,
.ticket-summary__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
  gap: 1px;
  background-color: oklch(var(--lch-white) / 5%);
}

@media (min-width: 640px) {
  .assignment-summary__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .assignment-summary__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.assignment-detail {
  margin-block-start: 1.5rem;
}

.assignment-detail__description {
  color: var(--color-ink);
  line-height: 1.625;
}

.assignment-side {
  padding: 1rem;
}

.assignment-side__label,
.ticket-side__label {
  margin: 0;
  color: var(--color-subtle);
  font-size: 0.875rem;
  font-weight: 500;
}

.assignment-side__label--spaced {
  margin-block-start: 1.5rem;
}

.assignment-side__value,
.ticket-side__value {
  margin: 0;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 500;
}

.assignment-form__description {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.assignment-search {
  margin-block-start: 0.5rem;
  margin-inline-start: 1rem;
}

.assignment-search__controller {
  display: flex;
  flex: 1 1 auto;
}

.assignment-search__form,
.assignment-search__query-row,
.assignment-search__query-wrap {
  inline-size: 100%;
}

.assignment-search__query-row {
  display: flex;
}

.assignment-search__query-wrap {
  position: relative;
  color: var(--color-ink-lighter);
}

.assignment-search__query-wrap:focus-within {
  color: var(--color-ink-light);
}

.assignment-search__query-prefix button {
  pointer-events: auto;
}

.assignment-search__query-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.assignment-search__filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  inline-size: 100%;
  margin-block-start: 2rem;
}

.assignment-search__all {
  margin-block: auto;
}

.assignment-search__toggle {
  display: flex;
  align-items: center;
}

.assignment-search__checkbox {
  border-radius: var(--radius-pill);
}

.assignment-search__label {
  margin-inline-start: 0.75rem;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 500;
}

@media (min-width: 1024px) {
  .assignment-search__filters {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ */
/* Ticket detail summary                                              */
/* ------------------------------------------------------------------ */

.ticket-summary {
  background-color: var(--color-surface);
}

.ticket-summary__inner {
  margin-inline: auto;
  max-inline-size: 80rem;
}

@media (min-width: 640px) {
  .ticket-summary__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ticket-summary__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ticket-summary__value-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.ticket-summary__metric {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;
  letter-spacing: 0;
}

.ticket-detail__description {
  color: var(--color-ink);
  line-height: 1.625;
}

.ticket-side {
  padding: 1rem;
}

.ticket-side__label--spaced {
  margin-block-start: 1.5rem;
}

.ticket-comments-layout {
  display: flex;
  flex-direction: column;
}

.ticket-comments-layout__main,
.ticket-comments-layout__side {
  inline-size: 100%;
}

.ticket-comments-layout__title {
  margin-block: 1rem;
  color: var(--color-ink);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.ticket-filter-form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}

.ticket-filter-form__control {
  margin-block-start: 0.25rem;
}

.ticket-filter-form__submit {
  margin-block-start: 1.5rem;
}

@media (min-width: 640px) {
  .ticket-filter-form {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .ticket-comments-layout {
    flex-direction: row;
  }

  .ticket-comments-layout__main {
    inline-size: 75%;
  }

  .ticket-comments-layout__side {
    inline-size: 25%;
  }
}

/* ------------------------------------------------------------------ */
/* Admin document card                                                */
/* ------------------------------------------------------------------ */

.document-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease;
}

.document-card:hover {
  box-shadow: var(--shadow-md);
}

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

.document-card__preview {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-surface-subtle);
}

.document-card__categories {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.document-card__body {
  padding: 1rem;
}

.document-card__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-ink);
}

.document-card__meta {
  margin-block-start: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-subtle);
}

.document-card__meta-item {
  display: flex;
  min-inline-size: 0;
  align-items: center;
}

.document-card__icon {
  inline-size: 1rem;
  block-size: 1rem;
  flex: 0 0 auto;
  margin-inline-end: 0.25rem;
}

/* ------------------------------------------------------------------ */
/* Admin settings cards                                               */
/* ------------------------------------------------------------------ */

.settings-top-menu {
  margin-inline-end: 1rem;
}

.settings-page-title {
  margin-block-end: 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-ink);
}

@media (min-width: 640px) {
  .settings-account-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .settings-category-layout,
  .settings-link-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .settings-account-layout,
  .settings-link-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


.settings-category-card__header {
  padding: 1rem;
}

.settings-category-card__header--indigo {
  background-image: linear-gradient(to right, rgb(var(--palette-hq-blue-700)), rgb(var(--palette-boost)));
}

.settings-category-card__header--teal {
  background-image: linear-gradient(to right, rgb(var(--palette-hq-teal-700)), rgb(var(--palette-boost-teal)));
}

.settings-category-card__header--amber {
  background-image: linear-gradient(to right, rgb(var(--palette-hq-gold-700)), rgb(var(--palette-boost-gold)));
}

.settings-category-card__header--rose {
  background-image: linear-gradient(to right, rgb(var(--palette-hq-rose-700)), rgb(var(--palette-boost-rose)));
}

.settings-category-card__heading {
  display: flex;
  align-items: center;
}

.settings-category-card__icon {
  flex-shrink: 0;
  border-radius: var(--radius-md);
  padding: 0.5rem;
}

.settings-category-card__icon-svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: var(--color-surface);
}

.settings-category-card__icon--indigo {
  background-color: rgb(var(--palette-boost));
}

.settings-category-card__icon--teal {
  background-color: rgb(var(--palette-boost-teal));
}

.settings-category-card__icon--amber {
  background-color: rgb(var(--palette-boost-gold));
}

.settings-category-card__icon--rose {
  background-color: rgb(var(--palette-boost-rose));
}

.settings-category-card__title {
  margin-inline-start: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-surface);
}

.settings-category-card__body {
  padding: 1rem;
}

.settings-category-card__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* space-y-2 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.settings-category-card__link {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: var(--color-ink-light);
  text-decoration: none;
}

.settings-category-card__link:hover,
.settings-category-card__link:focus {
  color: var(--color-brand-strong);
}

.settings-category-card__link-icon {
  inline-size: 1rem;
  block-size: 1rem;
  margin-inline-end: 0.5rem;
  color: var(--color-ink-lighter);
}

.settings-category-card__link:hover .settings-category-card__link-icon,
.settings-category-card__link:focus .settings-category-card__link-icon {
  color: var(--color-brand);
}

.settings-item-card {
  position: relative;
}

.settings-item-card__body {
  margin-block-start: 1rem;
}

.settings-item-card__icon {
  display: inline-flex;
  border-radius: var(--radius-lg);
  padding: 0.75rem;
  box-shadow: 0 0 0 4px var(--color-surface);
}

.settings-item-card__icon--teal {
  background-color: rgb(var(--palette-teal-50));
  color: rgb(var(--palette-teal-700));
}

.settings-item-card__icon-svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.settings-item-card__title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-ink);
}

.settings-item-card__link {
  color: inherit;
  text-decoration: none;
}

.settings-item-card__link:focus {
  outline: none;
}

.settings-item-card__link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 0.25rem;
}

.settings-item-card__hit-area {
  position: absolute;
  inset: 0;
}

.settings-item-card__description {
  margin-block-start: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-subtle);
}

.settings-item-card__arrow {
  pointer-events: none;
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  color: var(--color-border-medium);
}

.settings-item-card:hover .settings-item-card__arrow {
  color: rgb(var(--palette-indigo-400));
}

.settings-item-card__arrow-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.settings-section-intro {
  margin-block-end: 1.5rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  padding: 1.5rem;
  box-shadow: var(--shadow-panel);
}

.settings-section-intro__title {
  margin-block-end: 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-ink);
}

.settings-section-intro__description {
  color: var(--color-ink-light);
}

.settings-link-card {
  display: block;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  padding: 1.5rem;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-panel);
  transition: box-shadow 150ms ease;
}

.settings-link-card:hover,
.settings-link-card:focus {
  box-shadow: var(--shadow-lg);
}

.settings-link-card:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 0.25rem;
}

.settings-link-card__header {
  display: flex;
  align-items: center;
  margin-block-end: 1rem;
}

.settings-link-card__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-lg);
  color: var(--color-surface);
}

.settings-link-card__icon--amber { background-color: rgb(var(--palette-amber-500)); }
.settings-link-card__icon--blue { background-color: var(--color-info); }
.settings-link-card__icon--cyan { background-color: rgb(var(--palette-cyan-500)); }
.settings-link-card__icon--gray { background-color: var(--color-subtle); }
.settings-link-card__icon--green { background-color: var(--color-success); }
.settings-link-card__icon--indigo { background-color: var(--color-brand); }
.settings-link-card__icon--orange { background-color: rgb(var(--palette-orange-500)); }
.settings-link-card__icon--purple { background-color: var(--color-accent); }
.settings-link-card__icon--red { background-color: var(--color-danger); }
.settings-link-card__icon--rose { background-color: rgb(var(--palette-rose-500)); }
.settings-link-card__icon--teal { background-color: rgb(var(--palette-teal-500)); }
.settings-link-card__icon--yellow { background-color: var(--color-warning); }

.settings-link-card__icon-svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.settings-link-card__title {
  margin-inline-start: 1rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-ink);
}

.settings-link-card__description {
  font-size: 0.875rem;
  color: var(--color-subtle);
}

/* ------------------------------------------------------------------ */
/* News, articles, and changelog cards.                               */
/* ------------------------------------------------------------------ */

.news-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.news-card__media,
.news-card__avatar {
  flex-shrink: 0;
}

.news-card__image {
  display: block;
  inline-size: 100%;
  object-fit: cover;
}

.news-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--color-surface);
  padding: 1.5rem;
}

.news-card__content {
  flex: 1 1 auto;
}

.news-card__link {
  display: block;
  margin-block-start: 0.5rem;
  text-decoration: none;
}

.news-card__title {
  color: var(--color-ink);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.news-card__summary {
  margin-block-start: 0.75rem;
  color: var(--color-subtle);
  font-size: 1rem;
  line-height: 1.5rem;
}

.news-card__author {
  display: flex;
  align-items: center;
  min-inline-size: 0;
}

.news-card__byline,
.news-card__tags {
  margin-inline-start: 1rem;
}

.news-card__date {
  display: flex;
  column-gap: 0.25rem;
  color: var(--color-subtle);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.content-card {
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  padding: 1.5rem;
}

.content-card--spacious {
  padding: 2.5rem;
}

.content-card__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
}

.content-article__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.5rem;
}

.content-article__cover-image {
  border-radius: var(--radius-lg);
  object-fit: cover;
  object-position: center;
}

.content-article__layout {
  display: flex;
  flex-direction: column;
}

.content-article__body {
  inline-size: 100%;
  padding-block-end: 1rem;
  padding-inline: 1rem;
}

.content-article__prose {
  color: var(--color-ink-light);
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.content-article__prose > * + * {
  margin-block-start: 1.25rem;
}


.content-article__prose a {
  color: var(--color-brand-strong);
  text-decoration: underline;
}

.content-article__prose ul,
.content-article__prose ol {
  padding-inline-start: 1.5rem;
}

.content-article__prose ul {
  list-style: disc;
}

.content-article__prose ol {
  list-style: decimal;
}

.content-article__title {
  margin-block-start: 2.5rem;
  color: var(--color-ink);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 2.25rem;
}

.content-article__meta {
  inline-size: 100%;
  padding-inline: 1rem;
}

.content-article__meta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 2rem;
}

.content-article__author {
  display: flex;
  align-items: center;
}

.content-article__author-body {
  margin-inline-start: 1rem;
  padding-block: 1rem;
}

.content-article__author-name {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.content-article__date {
  margin-block-start: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
}

.content-article__tags {
  margin-block-start: 1.5rem;
}

.content-card-list {
  display: grid;
  max-inline-size: 32rem;
  margin-inline: auto;
  gap: 1.25rem;
}

.content-empty {
  margin-block-start: 1.5rem;
}

.content-empty__actions {
  margin-block-start: 1rem;
}

.content-form-panel {
  margin-block-start: 1.5rem;
}


.content-form-sidebar__description {
  margin-block-start: 0.5rem;
}

.content-form {
  min-inline-size: 0;
}

.content-form__action {
  display: flex;
  justify-content: center;
  margin-block: 1rem 1.5rem;
}

.content-form__section {
  margin-block-start: 1rem;
}

.content-form__cover {
  display: flex;
  align-items: center;
  margin-inline-end: 1.5rem;
}

.content-form__cover-image {
  inline-size: 12rem;
}

.content-form__cover-actions {
  margin-block-start: 1rem;
  margin-inline-start: 1rem;
}

.content-form__remove-icon {
  inline-size: 1rem;
  block-size: 1rem;
  margin-inline: -0.25rem 0.5rem;
}

.content-form__dropzone {
  margin-block-start: 0.5rem;
}


.content-form__dropzone-title {
  color: var(--color-ink-light);
}

.content-form__dropzone-description {
  font-size: 0.875rem;
}

.content-form__toggle {
  margin-block-start: 1rem;
}

.content-form__toggle-options {
  display: flex;
  flex-direction: column;
}

.content-form__toggle-option {
  margin-block-start: 1rem;
}

.content-modal-form {
  padding-block: 1rem;
  padding-inline: 2.5rem;
}

.content-form__actions {
  margin-block-start: 2rem;
  border-block-start: 1px solid var(--color-border);
  padding-block-start: 1.25rem;
}

.content-editor-status {
  inline-size: 100%;
  color: var(--color-subtle);
  font-size: 0.75rem;
  line-height: 1rem;
  text-align: end;
}

.content-editor-title {
  inline-size: 100%;
  border: 0;
  font-size: 1.5rem;
  line-height: 2rem;
}

.content-editor-body {
  inline-size: 100%;
  border: 0;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.content-editor-section {
  margin-block-start: 2.5rem;
}

.content-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 2rem;
  border-block-start: 1px solid var(--color-border);
  padding-block-start: 1.25rem;
}

.content-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1rem;
}

.content-pagination {
  margin-block-start: 1rem;
}

.changelog-page {
  background-color: var(--color-surface);
  padding-block-start: 2.5rem;
}

.changelog-page__container {
  max-inline-size: 80rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.changelog-page__content {
  max-inline-size: 42rem;
  margin-inline: auto;
}

.changelog-page__description {
  margin-block-start: 0.5rem;
  color: var(--color-ink-light);
  font-size: 1.125rem;
  line-height: 2rem;
}

.changelog-page__list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  border-block-start: 1px solid var(--color-border);
  padding-block: 2.5rem;
}

@media (min-width: 640px) {
  .content-article__cover {
    padding-inline: 1rem;
  }

  .content-article__layout {
    flex-direction: row-reverse;
  }

  .content-article__title {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .changelog-page {
    padding-block-start: 3rem;
  }
}

@media (min-width: 768px) {
  .content-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 1024px) {
  .content-article__body {
    inline-size: 75%;
  }

  .content-article__meta {
    inline-size: 25%;
  }

  .changelog-page__container {
    padding-inline: 2rem;
  }
}

@media (min-width: 1280px) {
  .content-card-list {
    max-inline-size: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.article-row__title {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  padding: 0.125rem 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.article-row__status {
  padding-block: 0.125rem;
  padding-inline: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.changelog-item {
  display: flex;
  max-inline-size: 36rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding-block-start: 1.5rem;
}

.changelog-item__title {
  color: var(--color-ink);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.group:hover .changelog-item__title {
  color: var(--color-ink-light);
}

.changelog-item__meta {
  display: flex;
  align-items: center;
  column-gap: 1rem;
  margin-block-start: 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

.changelog-item__date {
  color: var(--color-subtle);
}

.changelog-item__content {
  margin-block-start: 1rem;
}

.contact-detail-row {
  margin-block-end: 0.5rem;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border-block-end: 2px solid var(--color-border);
  padding-inline: 0.5rem;
  font-size: 0.875rem;
}

.contact-detail-row__label,
.contact-detail-row__value {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-detail-row__label {
  font-weight: 500;
  color: var(--color-ink);
}

.contact-detail-row__value--muted {
  color: var(--color-subtle);
}

.contact-detail-row__actions {
  margin-inline-start: 1rem;
  flex-shrink: 0;
}

/* Main notes                                                          */

.main-notes-page {
  padding-block: 1.5rem;
}

.main-notes-page__header {
  max-inline-size: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.main-notes-page__title-wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.main-notes-page__title {
  margin: 0;
  color: rgb(var(--palette-purple-900));
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
}

.main-notes-page__actions {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: stretch;
  gap: 1rem;
  margin-block-start: 1.5rem;
}

.main-notes-page__content {
  inline-size: 100%;
  margin-block-start: 2rem;
  padding-inline: 1.5rem;
}

.main-notes-page__stack > * + * {
  margin-block-start: 1.5rem;
}


.main-notes-panel__sections > * + * {
  border-block-start: 1px solid var(--color-border);
}

.main-notes-panel__form {
  padding: 1.5rem 1rem;
  background-color: var(--color-surface-muted);
}

.main-notes-panel__list-wrap {
  padding: 1.5rem 1rem;
}

.main-notes-list > * + * {
  margin-block-start: 1rem;
}

.main-note {
  padding-block-end: 0.25rem;
  border-block-end: 1px solid var(--color-surface-subtle);
  border-radius: var(--radius-sm);
}

.main-note--done {
  background-color: rgb(var(--palette-pink-50));
}

.main-note__row,
.main-note__meta-row {
  display: flex;
}

.main-note__row {
  gap: 0.75rem;
}

.main-note__body {
  inline-size: 100%;
  padding: 0.5rem;
}

.main-note__meta-row {
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block-start: 0.25rem;
  font-size: 0.875rem;
}

.main-note__time {
  margin: 0;
  color: var(--color-subtle);
}

.main-note__action {
  display: inline-flex;
  padding: 0.125rem 0.625rem;
}

.main-note__description {
  margin-block-start: 0.25rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
}

.main-note-form__title {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 2.25rem;
}

.main-note-form__actions {
  display: flex;
  justify-content: flex-end;
}

.main-note-form__button-wrap,
.main-note-filter {
  display: inline-flex;
}

/* Main high five and feedback                                         */

.main-high5-add,
.main-high5-search {
  background-color: var(--color-surface);
  padding: 1rem;
}

.main-high5-add {
  margin-block-start: 1.5rem;
}

.main-high5-add__copy {
  margin-block-start: 0.5rem;
  color: rgb(var(--palette-blue-700));
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.main-high5-status,
.main-high5-form,
.main-feedback-list,
.main-feedback-pagination {
  margin-block-start: 1.5rem;
}

.main-high5-compose {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-inline: 1rem;
}

.main-high5-compose__title {
  overflow: hidden;
  margin: 0;
  color: rgb(var(--palette-purple-900));
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.75rem;
  text-overflow: ellipsis;
}

@media (min-width: 640px) {
  .main-high5-compose__title {
    font-size: 1.5rem;
    line-height: 2.25rem;
    white-space: nowrap;
  }
}

.main-high5-form__body {
  margin-block-start: 2rem;
}

.main-high5-form__form {
  position: relative;
}

.main-high5-form__help {
  color: var(--color-subtle);
  font-size: 0.875rem;
}

.main-high5-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-block-start: 1rem;
}

.main-high5-search {
  inline-size: 40%;
}

.main-high5-search__controller,
.main-high5-search__filters,
.main-high5-search__choice,
.main-high5-search__query-row,
.main-high5-search__icon-wrap,
.main-high5-employee__row {
  display: flex;
}

.main-high5-search__controller,
.main-high5-search__form,
.main-high5-search__query-row,
.main-high5-search__query,
.main-high5-search__input {
  inline-size: 100%;
}

.main-high5-search__filters {
  align-items: center;
  justify-content: space-between;
  margin-block-end: 1rem;
}

.main-high5-search__choice,
.main-high5-employee__row {
  align-items: center;
}

.main-high5-search__label {
  display: block;
  margin-inline-start: 0.75rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 500;
}

.main-high5-search__query {
  position: relative;
  color: var(--color-ink-lighter);
}

.main-high5-search__query:focus-within {
  color: var(--color-ink-light);
}

.main-high5-search__icon-wrap {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0.5rem;
  align-items: center;
  pointer-events: none;
}

.main-high5-search__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.main-high5-search__input {
  display: block;
  block-size: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2rem;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-size: 0.875rem;
}

.main-high5-search__input::placeholder {
  color: var(--color-subtle);
}

.main-high5-search__input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.main-high5-search__results {
  margin-block-start: 1.5rem;
}

.main-high5-search__results > * + * {
  border-block-start: 1px solid var(--color-border);
}

.main-high5-employee {
  padding-block: 0.75rem;
}

.main-high5-employee__name {
  margin-inline-start: 1rem;
  color: var(--color-ink);
  font-weight: 500;
}

.main-feedback-list > * + * {
  margin-block-start: 1rem;
}

.main-feedback-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background-color: var(--color-surface);
  box-shadow:
    var(--shadow-sm),
    0 0 0 1px color-mix(in srgb, var(--color-border) 80%, transparent);
  transition: box-shadow 150ms ease;
}

.main-feedback-card:hover {
  box-shadow:
    var(--shadow-md),
    0 0 0 1px var(--color-border-medium);
}

.main-feedback-card__band {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 0.25rem;
}

.main-feedback-card__band--positive { background-color: rgb(var(--palette-emerald-400)); }
.main-feedback-card__band--neutral { background-color: rgb(var(--palette-blue-400)); }
.main-feedback-card__band--negative { background-color: rgb(var(--palette-rose-400)); }
.main-feedback-card__band--muted { background-color: var(--color-border-medium); }

.main-feedback-card__body {
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
}


.main-feedback-card__header,
.main-feedback-card__reply-header {
  justify-content: space-between;
}

.main-feedback-card__meta {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.main-feedback-card__separator,
.main-feedback-card__date,
.main-feedback-card__reply-date {
  color: var(--color-ink-lighter);
  font-size: 0.75rem;
}

.main-feedback-card__question {
  color: var(--color-subtle);
  font-size: 0.75rem;
  font-weight: 500;
}

.main-feedback-card__date {
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.main-feedback-card__description {
  margin-block-start: 1rem;
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1.625;
  white-space: pre-line;
}

.main-feedback-card__replies {
  margin-block-start: 1.25rem;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--color-surface-subtle);
}

.main-feedback-card__replies > * + * {
  margin-block-start: 0.75rem;
}

.main-feedback-card__reply-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.main-feedback-card__reply-title--positive { color: rgb(var(--palette-emerald-700)); }
.main-feedback-card__reply-title--neutral { color: rgb(var(--palette-blue-700)); }
.main-feedback-card__reply-title--negative { color: rgb(var(--palette-rose-700)); }
.main-feedback-card__reply-title--muted { color: var(--color-ink-light); }

.main-feedback-card__reply {
  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, var(--color-surface-muted) 80%, transparent);
  padding: 0.75rem 1rem;
}

.main-feedback-card__reply-body {
  margin-block-start: 0.25rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  line-height: 1.625;
}

.main-employee-tasks__scroll {
  overflow-x: auto;
  margin-block: -0.5rem;
  padding-block: 0.5rem;
}

.main-employee-tasks__table-wrap {
  display: inline-block;
  min-inline-size: 100%;
  overflow: hidden;
  border-block-end: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  vertical-align: middle;
}

.main-employee-tasks__table {
  min-inline-size: 100%;
}

.main-employee-task__avatars {
  display: flex;
  justify-content: flex-end;
}

.main-task-list-form__option {
  margin-block-start: 1.5rem;
}

.main-todo-item-form__fields,
.main-todo-list-item-form__row,
.main-todo-item,
.main-todo-item__actions-inner,
.signature-modal__actions,
.signature-page__top-actions,
.signature-page__signatures,
.signature-page__pending-actions,
.main-boarding-action__actions {
  display: flex;
}

.main-todo-item-form__fields {
  align-items: center;
  gap: 1.5rem;
}

.main-todo-item-form__name {
  flex: 4 1 0;
}

.main-todo-item-form__date {
  flex: 1 1 0;
}

.main-todo-item {
  position: relative;
  align-items: center;
  margin: 0.5rem;
}

.main-todo-item__drag-icon {
  inline-size: 1rem;
  block-size: 0.75rem;
  margin-inline-end: 0.5rem;
  color: var(--color-border-medium);
}

.main-todo-item__label--completed {
  color: var(--color-subtle) !important;
  font-style: italic;
}

.main-todo-item__date,
.main-todo-item__actions {
  color: var(--color-ink-light);
  font-size: 0.75rem;
}

.main-todo-item__date {
  margin-inline-start: 0.5rem;
}

.main-todo-item__actions {
  display: none;
  margin-inline-start: 1rem;
}

.main-todo-item:hover .main-todo-item__actions,
.main-todo-item:focus-within .main-todo-item__actions {
  display: block;
}

.main-todo-item__actions-inner {
  align-items: center;
  gap: 0.5rem;
}

.main-todo-item__icon {
  inline-size: 0.75rem;
  block-size: 0.75rem;
}

.main-todo-item__icon--edit {
  color: rgb(var(--palette-teal-600));
}

.main-todo-item__icon--delete {
  color: var(--color-danger-strong);
}

.main-todo-list-item-form__row {
  align-items: flex-end;
  justify-content: space-between;
}

.main-todo-list-item-form__name {
  flex: 1 1 auto;
}

.main-todo-list-item-form__date,
.main-todo-list-item-form__actions {
  margin-inline-start: 0.5rem;
}


.main-ranking-trend {
  margin-block-start: 1.5rem;
}

.main-ranking-header__title-wrap {
  min-inline-size: 0;
  flex: 1 1 auto;
}

.main-ranking-header__title {
  margin: 0;
  color: rgb(var(--palette-purple-900));
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.75rem;
}

.main-ranking-header__actions {
  display: flex;
}

.main-ranking-header__action {
  margin-inline-end: 1rem;
}

.signature-modal {
  padding-block-start: 1.5rem;
}

.signature-modal__content {
  max-inline-size: none;
  margin-block-end: 1.5rem;
}

.signature-modal__canvas-wrap {
  overflow: hidden;
  margin-block-end: 1rem;
  border: 2px solid var(--color-border-medium);
  border-radius: var(--radius-lg);
}

.signature-modal__canvas {
  inline-size: 100%;
  background-color: var(--color-surface);
  cursor: crosshair;
}

.signature-modal__actions {
  align-items: center;
  justify-content: space-between;
}

.signature-page__top-actions {
  gap: 0.5rem;
}

.signature-page__content {
  margin-block-start: 1rem;
}

.signature-page__signatures,
.signature-page__pending-actions {
  align-items: center;
  gap: 0.75rem;
  margin-block-start: 2rem;
}

.signature-page__signature-slot {
  flex: 1 1 50%;
}

.signature-page__image {
  inline-size: 100%;
  block-size: 100%;
}

.main-onboarding-empty,
.main-onboarding-edit {
  margin-block-start: 1.5rem;
}

.main-onboarding-template-form {
  padding: 1rem 2.5rem;
}

.main-onboarding-edit__layout,
.main-onboarding-search__fields {
  display: grid;
  gap: 1.5rem;
}

.main-onboarding-edit__copy {
  margin-block-start: 0.5rem;
  color: var(--color-subtle);
  font-size: 0.875rem;
}


.main-onboarding-search {
  padding: 1rem 2.5rem;
}

.main-onboarding-search__actions {
  align-self: end;
}

.main-boarding-action__actions {
  justify-content: flex-end;
}

.main-boarding-action__action-form {
  padding-inline: 0.5rem;
}

.main-boarding-action__description {
  padding: 1rem 2rem;
}

.main-boarding-action__signature {
  margin-block: 1rem;
}

@media (min-width: 640px) {
  .main-notes-page__header {
    padding-inline: 1.5rem;
  }

  .main-notes-panel__form,
  .main-notes-panel__list-wrap {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 768px) {
  .main-notes-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .main-notes-page__actions {
    flex-direction: row;
    margin-block-start: 0;
  }

  .main-onboarding-edit__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .main-onboarding-search__fields {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .main-notes-page__content {
    margin-inline-end: 1.5rem;
  }
}