/* ============================================================
   Exports (desk/staff CSV export) page.
   Structure in @layer layout, paint in @layer design. Content-named
   classes only — no legacy/appearance names, no hardcoded color.
   Reuses .app-screen and .btn/.btn--outline from elements.css.

   DESK page: renders under the default light .app-screen palette. This
   stylesheet only references --t-* semantic tokens, which app/theme.css
   rebinds per theme, so the same markup reskins without any role-specific
   color rules here. See docs/FRONTEND-ARCHITECTURE.md.
   ============================================================ */

@layer layout {
  .exports__intro { display: grid; gap: var(--mea-space-1); }
  .exports__title, .exports__subtitle { margin: 0; }

  /* Export options: a responsive grid of action cards. */
  .export-options { display: grid; gap: var(--mea-space-4); }
  .export-option-list { display: grid; gap: var(--mea-space-4); margin: 0; padding: 0; list-style: none;
                        grid-template-columns: 1fr; }
  @container (min-width: 36rem) { .export-option-list { grid-template-columns: repeat(2, 1fr); } }
  @container (min-width: 56rem) { .export-option-list { grid-template-columns: repeat(3, 1fr); } }

  .export-option { display: grid; gap: var(--mea-space-2); align-content: start;
                   padding: var(--mea-space-4); border-radius: var(--mea-radius-xl); cursor: pointer; }
  .export-option__name, .export-option__desc, .export-option__action { margin: 0; }
  .export-option__cta { text-decoration: none; }

  /* Two panels side by side, stacking when cramped. */
  .exports__columns { display: grid; gap: var(--mea-space-6); grid-template-columns: 1fr; align-items: start; }
  @container (min-width: 48rem) { .exports__columns { grid-template-columns: repeat(2, 1fr); } }

  .export-panel { display: grid; grid-template-rows: auto 1fr; border-radius: var(--mea-radius-xl);
                  overflow: hidden; }
  .export-panel__header { padding: var(--mea-space-4) var(--mea-space-5); }
  .export-panel__title { margin: 0; }
  .export-panel__body { padding: var(--mea-space-5); }
  .export-panel__body--flush { padding: 0; }

  /* Configurations: a list of saved export configs. */
  .export-config-list { display: grid; gap: var(--mea-space-3); margin: 0; padding: 0; list-style: none; }
  .export-config { display: grid; grid-template-columns: 1fr auto; align-items: center;
                   gap: var(--mea-space-3); padding: var(--mea-space-4); border-radius: var(--mea-radius-lg); }
  .export-config__body { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .export-config__name, .export-config__meta { margin: 0; }

  /* Empty configurations state. */
  .export-empty { display: grid; gap: var(--mea-space-2); justify-items: center; text-align: center;
                  padding: var(--mea-space-8) var(--mea-space-4); }
  .export-empty__icon, .export-empty__title, .export-empty__desc { margin: 0; }

  /* Recent runs table. */
  .runs-table { inline-size: 100%; border-collapse: collapse; }
  .runs-table__head { text-align: start; padding: var(--mea-space-3) var(--mea-space-5); white-space: nowrap; }
  .runs-table__cell { padding: var(--mea-space-3) var(--mea-space-5); vertical-align: middle; }
}

@layer design {
  .exports__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-2xl);
                    font-weight: var(--mea-w-bold); color: var(--t-text); }
  .exports__subtitle { font-size: var(--mea-text-md); color: var(--t-text-secondary); }

  /* Export options. */
  .export-option { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                   box-shadow: var(--mea-shadow-sm); transition: box-shadow var(--mea-dur-fast); }
  .export-option:hover { box-shadow: var(--mea-shadow-md); }
  .export-option__name { font-family: var(--mea-font-citizen); font-size: var(--mea-text-md);
                         font-weight: var(--mea-w-bold); color: var(--t-text); }
  .export-option__desc { font-size: var(--mea-text-sm); color: var(--t-text-secondary);
                         line-height: var(--mea-lh-snug); }

  /* Panels. */
  .export-panel { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                  box-shadow: var(--mea-shadow-sm); }
  .export-panel__header { border-block-end: 1px solid var(--t-border); }
  .export-panel__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                         font-weight: var(--mea-w-bold); color: var(--t-text); }

  /* Configurations. */
  .export-config { background: var(--t-bg-recessed); border: 1px solid var(--t-border); }
  .export-config__name { font-size: var(--mea-text-md); font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .export-config__meta { font-size: var(--mea-text-sm); color: var(--t-text-muted); }

  /* Empty configurations state. */
  .export-empty__icon { font-size: var(--mea-text-3xl); line-height: 1; color: var(--t-text-muted); }
  .export-empty__title { font-size: var(--mea-text-lg); font-weight: var(--mea-w-semibold);
                         color: var(--t-text-secondary); }
  .export-empty__desc { font-size: var(--mea-text-md); color: var(--t-text-muted); }

  /* Recent runs table. */
  .runs-table__head { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                      text-transform: uppercase; letter-spacing: var(--mea-ls-wide);
                      color: var(--t-text-muted); background: var(--t-table-header-bg);
                      border-block-end: 1px solid var(--t-border); }
  .runs-table__cell { font-size: var(--mea-text-sm); color: var(--t-text-secondary);
                      border-block-end: 1px solid var(--t-border); }
  .runs-table__cell--name { font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .runs-table__row:hover .runs-table__cell { background: var(--t-table-hover); }
  .runs-table__row:last-child .runs-table__cell { border-block-end: 0; }
}