@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-inline-size: 100%;
  }

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

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  body {
    min-block-size: 100dvh;
    -webkit-font-smoothing: antialiased;
  }
}

@layer tokens {
  :root {
    /* Color palette — oklch */
    --color-earth-900: oklch(0.25 0.02 70);
    --color-earth-700: oklch(0.40 0.02 70);
    --color-earth-200: oklch(0.88 0.01 70);
    --color-earth-100: oklch(0.94 0.01 70);
    --color-earth-50:  oklch(0.97 0.005 70);

    --color-forest-700: oklch(0.40 0.08 155);
    --color-forest-500: oklch(0.55 0.10 155);
    --color-forest-100: oklch(0.92 0.03 155);

    --color-water-600: oklch(0.50 0.08 230);
    --color-water-100: oklch(0.92 0.03 230);

    --color-sun-500: oklch(0.70 0.12 85);

    --color-berry-600: oklch(0.50 0.12 10);

    /* Semantic aliases */
    --text-primary:   var(--color-earth-900);
    --text-secondary: var(--color-earth-700);
    --surface:        var(--color-earth-50);
    --surface-raised: white;
    --border:         var(--color-earth-200);
    --accent:         var(--color-forest-500);
    --accent-surface: var(--color-forest-100);
    --link:           var(--color-forest-500);
    --error:          var(--color-berry-600);
    --warning:        var(--color-sun-500);
    --info:           var(--color-water-600);

    /* Typography */
    --font-body:    system-ui, -apple-system, sans-serif;
    --font-heading: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    --font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;

    --text-sm:   clamp(0.833rem, 0.816rem + 0.08vw, 0.889rem);
    --text-base: clamp(1rem, 0.964rem + 0.18vw, 1.125rem);
    --text-lg:   clamp(1.2rem, 1.132rem + 0.34vw, 1.406rem);
    --text-xl:   clamp(1.44rem, 1.318rem + 0.61vw, 1.758rem);
    --text-2xl:  clamp(1.728rem, 1.525rem + 1.01vw, 2.197rem);
    --text-3xl:  clamp(2.074rem, 1.753rem + 1.6vw, 2.747rem);

    --leading-tight:  1.2;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    --tracking-tight:  -0.01em;
    --tracking-normal: 0;
    --tracking-wide:   0.02em;

    /* Spacing — fluid 1.5 ratio */
    --baseline: 0.25rem;

    --space-3xs: clamp(0.25rem, 0.23rem + 0.11vw, 0.313rem);
    --space-2xs: clamp(0.5rem, 0.46rem + 0.23vw, 0.625rem);
    --space-xs:  clamp(0.75rem, 0.68rem + 0.34vw, 0.938rem);
    --space-sm:  clamp(1rem, 0.91rem + 0.45vw, 1.25rem);
    --space-md:  clamp(1.5rem, 1.36rem + 0.68vw, 1.875rem);
    --space-lg:  clamp(2rem, 1.82rem + 0.91vw, 2.5rem);
    --space-xl:  clamp(3rem, 2.73rem + 1.36vw, 3.75rem);
    --space-2xl: clamp(4rem, 3.64rem + 1.82vw, 5rem);

    --gutter: var(--space-sm);

    /* Widths */
    --width-prose:   65ch;
    --width-content: 80rem;
    --width-narrow:  40rem;
    --width-card:    25rem;

    /* Radii */
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   1rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px oklch(0.25 0.02 70 / 0.06);
    --shadow-md: 0 2px 4px oklch(0.25 0.02 70 / 0.08), 0 4px 12px oklch(0.25 0.02 70 / 0.04);
    --shadow-lg: 0 4px 8px oklch(0.25 0.02 70 / 0.08), 0 8px 24px oklch(0.25 0.02 70 / 0.06);
  }
}

@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background-color: var(--surface);
  }

  h1, h2, h3, h4 {
    font-family: var(--font-heading);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
  h4 { font-size: var(--text-lg); }

  a {
    color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;

    &:hover {
      text-decoration-thickness: 2px;
    }
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  code {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }
}

@layer layout {
  .site {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-block-size: 100dvh;
  }

  .site-header {
    padding-block: var(--space-xs);
    padding-inline: var(--gutter);
    border-block-end: 1px solid var(--border);
  }

  .site-header__inner {
    max-inline-size: var(--width-content);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }

  .site-name {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: var(--tracking-tight);
  }

  .site-nav {
    display: flex;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
  }

  .site-nav a {
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: var(--text-sm);
    color: var(--text-secondary);

    &:hover {
      color: var(--text-primary);
      background-color: var(--accent-surface);
    }

    &[aria-current="page"] {
      color: var(--accent);
      background-color: var(--accent-surface);
    }
  }

  .site-main {
    padding-block: var(--space-lg);
    padding-inline: var(--gutter);
  }

  .site-main__inner {
    max-inline-size: var(--width-content);
    margin-inline: auto;
  }

  .site-footer {
    padding-block: var(--space-md);
    padding-inline: var(--gutter);
    border-block-start: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: var(--text-sm);
  }

  .site-footer__inner {
    max-inline-size: var(--width-content);
    margin-inline: auto;
  }

  /* Mobile nav toggle — hidden above bp-md */
  .nav-toggle {
    display: none;
  }

  @media (max-width: 60em) {
    .site-nav {
      display: none;

      &.is-open {
        display: flex;
        flex-direction: column;
        position: absolute;
        inset-block-start: 100%;
        inset-inline: 0;
        background-color: var(--surface-raised);
        padding: var(--space-sm);
        border-block-end: 1px solid var(--border);
        box-shadow: var(--shadow-md);
      }
    }

    .nav-toggle {
      display: block;
      background: none;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: var(--space-3xs) var(--space-2xs);
      cursor: pointer;
      font-size: var(--text-sm);
      color: var(--text-secondary);
    }

    .site-header__inner {
      position: relative;
    }
  }
}

@layer components {
  .card {
    container-type: inline-size;
    background-color: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    box-shadow: var(--shadow-sm);
    max-inline-size: var(--width-card);
  }

  .card__title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
  }

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

  .card__body {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
  }

  .card__tag {
    display: inline-block;
    font-size: var(--text-sm);
    padding: var(--space-3xs) var(--space-2xs);
    background-color: var(--accent-surface);
    color: var(--color-forest-700);
    border-radius: var(--radius-full);
  }

  .card > * + * {
    margin-block-start: var(--space-2xs);
  }

  @container (min-width: 20rem) {
    .card {
      padding: var(--space-md);
    }
  }

  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--width-card)), 1fr));
    gap: var(--space-md);
  }

  .card__badge {
    display: inline-block;
    font-size: var(--text-sm);
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: var(--radius-full);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: capitalize;
  }

  .card__badge--event {
    background-color: var(--color-water-100);
    color: var(--color-water-600);
  }

  .card__badge--group {
    background-color: var(--accent-surface);
    color: var(--color-forest-700);
  }

  .card__badge--teaching {
    background-color: var(--color-earth-200);
    color: var(--color-earth-700);
  }

  .card__badge--language {
    background-color: var(--color-forest-100);
    color: var(--color-forest-500);
  }

  .card__badge--person {
    background: oklch(0.95 0.02 160);
    color: oklch(0.35 0.06 160);
  }

  .card__date {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  /* Person photo */
  .person-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    overflow: hidden;
    background-color: var(--accent-surface);
    color: var(--color-forest-700);
    font-weight: 600;
    flex-shrink: 0;
  }

  .person-photo--card {
    inline-size: 3rem;
    block-size: 3rem;
    font-size: var(--text-sm);
  }

  .person-photo--detail {
    inline-size: 6rem;
    block-size: 6rem;
    font-size: var(--text-xl);
  }

  .person-photo__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .person-photo__initials {
    line-height: 1;
    letter-spacing: var(--tracking-wide);
  }

  /* Person card layout */
  .card--person .card__header-row {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .card--person .card__header-text {
    min-inline-size: 0;
  }

  .card--person .card__title {
    font-size: var(--text-lg);
  }

  .card__business {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-style: italic;
  }

  .card__tags--compact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs);
  }

  .card__tags--compact .card__tag {
    font-size: calc(var(--text-sm) * 0.9);
    padding: 0.125rem var(--space-2xs);
  }

  /* People search */
  .people-search {
    max-inline-size: 24rem;
  }

  .people-search__input {
    inline-size: 100%;
  }

  /* People filters */
  .people-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-xs);
  }

  .people-filters__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .people-filters__label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
  }

  .people-filters__select {
    min-inline-size: 12rem;
  }

  .people-filters__clear {
    padding: var(--space-2xs) var(--space-xs);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
  }

  .people-filters__clear:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
  }

  .people-filters__empty {
    color: var(--text-secondary);
    font-style: italic;
  }

  /* Detail business name */
  .detail__business {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    font-style: italic;
  }

  /* Detail website link */
  .detail__website::before {
    content: "\1F310\00a0";
  }

  .detail {
    max-inline-size: var(--width-prose);
  }

  .detail__back {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-decoration: none;

    &:hover {
      color: var(--text-primary);
    }

    &::before {
      content: "\2190\00a0";
    }
  }

  .detail__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
  }

  .detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  .detail__body {
    line-height: var(--leading-loose);
  }

  .detail__contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  /* Search form */
  .search-form {
    display: flex;
    gap: var(--space-2xs);
    max-inline-size: var(--width-prose);
  }

  .search-form__input {
    flex: 1;
    padding: var(--space-2xs) var(--space-xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    background-color: var(--surface-raised);
    color: var(--text-primary);

    &:focus {
      outline: 2px solid var(--accent);
      outline-offset: -1px;
      border-color: var(--accent);
    }
  }

  .search-form__button {
    padding: var(--space-2xs) var(--space-sm);
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;

    &:hover {
      opacity: 0.9;
    }
  }

  /* Search layout */
  .search-layout {
    display: grid;
    gap: var(--space-lg);
  }

  @media (min-width: 60em) {
    .search-layout {
      grid-template-columns: 16rem 1fr;
    }
  }

  /* Active filters */
  .search-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
  }

  .search-active-filters__label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  .filter-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    font-size: var(--text-sm);
    padding: var(--space-3xs) var(--space-2xs);
    background-color: var(--accent-surface);
    color: var(--color-forest-700);
    border-radius: var(--radius-full);
    text-decoration: none;

    &:hover {
      background-color: var(--color-forest-100);
      text-decoration: none;
    }
  }

  /* Search filters sidebar */
  .search-filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .search-filters__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .search-filters__heading {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 600;
  }

  .search-filters__list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);

    a {
      display: flex;
      justify-content: space-between;
      padding: var(--space-3xs) var(--space-2xs);
      border-radius: var(--radius-sm);
      text-decoration: none;
      font-size: var(--text-sm);
      color: var(--text-secondary);

      &:hover {
        color: var(--text-primary);
        background-color: var(--accent-surface);
      }
    }
  }

  .search-filters__active {
    color: var(--accent);
    background-color: var(--accent-surface);
    font-weight: 600;
  }

  .search-filters__count {
    color: var(--text-secondary);
    font-weight: 400;
  }

  /* Search results */
  .search-results__scope {
    font-size: var(--text-sm);
    color: var(--color-forest-700);
    background-color: var(--accent-surface);
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: var(--radius-sm);
    display: inline-block;
  }

  .search-results__summary {
    font-size: var(--text-sm);
    color: var(--text-secondary);
  }

  .search-results__timing {
    color: var(--text-secondary);
    opacity: 0.7;
  }

  /* Search result card */
  .search-result-card {
    max-inline-size: unset;
  }

  .search-result-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs);
  }

  /* Pagination */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3xs);
    margin-block-start: var(--space-md);
  }

  .pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.5rem;
    padding: var(--space-3xs) var(--space-2xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: var(--text-sm);
    color: var(--text-secondary);

    &:hover {
      color: var(--text-primary);
      background-color: var(--accent-surface);
      border-color: var(--accent);
    }
  }

  .pagination__link--current {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
  }

  .pagination__ellipsis {
    padding: var(--space-3xs);
    color: var(--text-secondary);
  }

  /* ── Forms ──────────────────────────────────────── */
  .form {
    display: grid;
    gap: var(--space-sm);
    max-inline-size: 40rem;
  }

  .form__field {
    display: grid;
    gap: var(--space-3xs);
  }

  .form__fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-xs);
    display: grid;
    gap: var(--space-2xs);
  }

  .form__label {
    font-weight: 500;
    color: var(--text-primary);
    font-size: var(--text-sm);
  }

  .form__label-optional {
    font-weight: 400;
    color: var(--text-muted);
  }

  .form__input,
  .form__select,
  .form__textarea {
    inline-size: 100%;
    padding-block: var(--space-2xs);
    padding-inline: var(--space-xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-family: inherit;

    &:focus {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
      border-color: var(--accent);
    }
  }

  .form__input--error,
  .form__select--error {
    border-color: oklch(55% 0.2 25);
  }

  .form__textarea {
    resize: vertical;
    min-block-size: 6rem;
  }

  .form__error {
    color: oklch(55% 0.2 25);
    font-size: var(--text-sm);
    margin-block: 0;
  }

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

  .form__checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    cursor: pointer;
  }

  .form__actions {
    margin-block-start: var(--space-2xs);
  }

  .form__submit {
    display: inline-flex;
    align-items: center;
    padding-block: var(--space-xs);
    padding-inline: var(--space-md);
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;

    &:hover {
      background-color: oklch(from var(--accent) calc(l - 0.05) c h);
    }

    &:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
  }

  .card__badge--elder {
    background-color: oklch(90% 0.08 145);
    color: oklch(35% 0.12 145);
  }

  .card--detail {
    padding: var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--surface-raised);
  }

  .detail__fields {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
  }

  .detail__field {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: var(--space-xs);

    dt {
      font-weight: 500;
      color: var(--text-secondary);
    }

    dd {
      margin: 0;
      color: var(--text-primary);
    }
  }

  /* -- Dashboards ---------------------------------------- */
  .dashboard__cards {
    display: grid;
    gap: var(--space-sm);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--width-card)), 1fr));
    margin-block-end: var(--space-lg);
  }

  .dashboard__empty {
    color: var(--text-secondary);
    padding-block: var(--space-sm);
  }

  .dashboard__assign-form {
    display: flex;
    gap: var(--space-2xs);
    align-items: end;
    margin-block-start: var(--space-2xs);
  }

  .card--dashboard {
    container-type: inline-size;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    box-shadow: var(--shadow-sm);
    display: grid;
    gap: var(--space-2xs);
  }

  .card__badge--open {
    background-color: var(--color-sun-500);
    color: var(--color-earth-900);
  }

  .card__badge--assigned {
    background-color: var(--color-water-600);
    color: white;
  }

  .card__badge--in-progress {
    background-color: var(--accent);
    color: white;
  }

  .card__badge--completed {
    background-color: var(--color-forest-700);
    color: white;
  }

  .card__badge--confirmed {
    background-color: var(--color-earth-700);
    color: white;
  }

  .card__note {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-style: italic;
  }

  .form__link {
    margin-block-start: var(--space-sm);
    font-size: var(--text-sm);
  }
}

@layer utilities {
  .flow > * + * {
    margin-block-start: var(--space-sm);
  }

  .flow-lg > * + * {
    margin-block-start: var(--space-md);
  }

  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  .compact {
    --space-3xs: calc(clamp(0.25rem, 0.23rem + 0.11vw, 0.313rem) * 0.6);
    --space-2xs: calc(clamp(0.5rem, 0.46rem + 0.23vw, 0.625rem) * 0.6);
    --space-xs:  calc(clamp(0.75rem, 0.68rem + 0.34vw, 0.938rem) * 0.6);
    --space-sm:  calc(clamp(1rem, 0.91rem + 0.45vw, 1.25rem) * 0.6);
    --space-md:  calc(clamp(1.5rem, 1.36rem + 0.68vw, 1.875rem) * 0.6);
  }

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