@layer lf-components {
/* Phase 2 visual bridge: help, support and library surfaces. */
:where(body.dashboard-client-flat-theme.help-body > .shell,
body.dashboard-client-flat-theme.support-tickets-body > .shell,
body.dashboard-client-flat-theme.help-agent-body > .shell,
body.dashboard-client-flat-theme > .shell ) {
  background: var(--lf-color-bg);
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .help-toolbar,
  .help-guide,
  .help-topic-card,
  .help-support-card,
  .library-hero,
  .library-card,
  .library-index,
  .library-step,
  .library-note,
  .ticket-stat,
  .ticket-list-panel,
  .ticket-detail-panel,
  .ticket-detail-meta div,
  .ticket-conversation,
  .ticket-note-box,
  .support-card,
  .support-panel,
  .support-side-card,
  .support-trust-strip
) ) {
  min-width: 0;
  border: 1px solid var(--lf-color-border);
  border-radius: var(--lf-radius-lg);
  background: var(--lf-color-surface);
  color: var(--lf-color-text);
  box-shadow: none;
  backdrop-filter: none;
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .help-guide,
  .help-topic-card,
  .help-support-card,
  .library-card,
  .library-index,
  .ticket-detail-panel,
  .support-card,
  .support-panel,
  .support-side-card,
  .support-trust-strip
) ) {
  padding: var(--lf-space-5);
}

:where(body.dashboard-client-flat-theme > .shell :is(.library-hero) ) {
  padding: var(--lf-space-6);
}

:where(body.dashboard-client-flat-theme > .shell .library-hero::after ) {
  display: none !important;
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .help-section-title,
  .help-topic-card h3,
  .help-guide h3,
  .help-support-card h3,
  .library-hero h1,
  .library-card h2,
  .library-index h3,
  .library-step strong,
  .ticket-stat strong,
  .ticket-detail-head h2,
  .ticket-detail-meta strong,
  .ticket-conversation p,
  .support-hero h1,
  .support-card h3,
  .support-panel h2,
  .support-side-card h3,
  .trust-item strong
) ) {
  color: var(--lf-color-text);
  letter-spacing: 0;
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .library-hero h1,
  .support-hero h1
) ) {
  font-size: clamp(30px, 3vw, 42px);
  line-height: var(--lf-line-tight);
  font-weight: var(--lf-font-weight-900);
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .help-guide p,
  .help-topic-card p,
  .help-support-card p,
  .library-hero p,
  .library-card p,
  .library-step p,
  .library-checklist li,
  .ticket-stat span,
  .ticket-detail-meta span,
  .ticket-conversation span,
  .support-hero p,
  .support-card p,
  .support-panel p,
  .support-side-card p,
  .trust-item span
) ) {
  color: var(--lf-color-muted);
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .help-search,
  .support-admin-search,
  .ticket-list-controls select,
  .ticket-status-select,
  .ticket-note-box textarea
) ) {
  min-height: 42px;
  border: 1px solid var(--lf-color-border);
  border-radius: var(--lf-radius-md);
  background: var(--lf-color-surface);
  color: var(--lf-color-text);
  box-shadow: none;
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .help-search input,
  .support-admin-search,
  .ticket-list-controls select,
  .ticket-status-select,
  .ticket-note-box textarea
) ) {
  color: var(--lf-color-text);
  font-size: var(--lf-font-size-sm);
  font-weight: var(--lf-font-weight-800);
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .help-search:focus-within,
  .support-admin-search:focus,
  .ticket-list-controls select:focus,
  .ticket-status-select:focus,
  .ticket-note-box textarea:focus
) ) {
  border-color: var(--lf-color-primary);
  box-shadow: var(--lf-focus-ring);
  outline: none;
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .help-index a,
  .help-button,
  .library-button,
  .ticket-primary-button,
  .ticket-followup-link,
  .support-button,
  .support-link-button,
  .tickets-all-link,
  .ai-send-button
) ) {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lf-space-2);
  border: 1px solid var(--lf-color-border);
  border-radius: var(--lf-radius-md);
  background: var(--lf-color-surface-muted);
  color: var(--lf-color-text);
  box-shadow: none;
  font-size: var(--lf-font-size-sm);
  font-weight: var(--lf-font-weight-900);
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .help-button,
  .library-button.primary,
  .ticket-primary-button,
  .support-button,
  .support-link-button,
  .ai-send-button
) ) {
  border-color: transparent;
  background: var(--lf-color-primary);
  color: var(--lf-color-on-primary);
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .help-index a:hover,
  .library-index a:hover,
  .library-index a.active,
  .ticket-row.is-active,
  .ticket-row:hover
) ) {
  border-color: color-mix(in srgb, var(--lf-color-primary) 22%, transparent);
  background: var(--lf-color-primary-soft);
  color: var(--lf-color-primary);
}

:where(body.dashboard-client-flat-theme > .shell :is(
  .help-kicker,
  .library-eyebrow,
  .ticket-pill,
  .library-step span,
  .help-steps span
) ) {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lf-space-1);
  width: fit-content;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--lf-color-primary) 18%, transparent);
  border-radius: var(--lf-radius-pill);
  background: var(--lf-color-primary-soft);
  color: var(--lf-color-primary);
  font-size: var(--lf-font-size-xs);
  font-weight: var(--lf-font-weight-900);
  letter-spacing: 0;
  text-transform: none;
}

:where(body.dashboard-client-flat-theme > .shell :is(.ticket-pill--open) ) {
  border-color: color-mix(in srgb, var(--lf-color-success) 22%, transparent);
  background: color-mix(in srgb, var(--lf-color-success) 10%, transparent);
  color: var(--lf-color-success);
}

:where(body.dashboard-client-flat-theme > .shell :is(.ticket-pill--waiting) ) {
  border-color: color-mix(in srgb, var(--lf-color-warning) 26%, transparent);
  background: color-mix(in srgb, var(--lf-color-warning) 12%, transparent);
  color: var(--lf-color-warning);
}

:where(body.dashboard-client-flat-theme > .shell :is(.ticket-pill--done) ) {
  border-color: color-mix(in srgb, var(--lf-color-muted) 22%, transparent);
  background: var(--lf-color-surface-muted);
  color: var(--lf-color-muted);
}

:where(body.dashboard-client-flat-theme > .shell :is(.help-topic-icon, .support-card-icon) ) {
  width: 46px;
  min-width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--lf-color-primary) 18%, transparent);
  border-radius: var(--lf-radius-md);
  background: var(--lf-color-primary-soft);
  color: var(--lf-color-primary);
  box-shadow: none;
}

:where(body.dashboard-client-flat-theme > .shell :is(.help-steps li, .library-step, .library-note) ) {
  border: 1px solid var(--lf-color-border);
  border-radius: var(--lf-radius-md);
  background: var(--lf-color-surface-muted);
}

:where(body.dashboard-client-flat-theme > .shell :is(.ticket-admin-table, .ticket-table) ) {
  width: 100%;
  border-collapse: collapse;
}

:where(body.dashboard-client-flat-theme > .shell :is(.ticket-admin-table th, .ticket-admin-table td, .ticket-table th, .ticket-table td) ) {
  padding: var(--lf-space-3) var(--lf-space-4);
  border-bottom: 1px solid var(--lf-color-border);
  color: var(--lf-color-text);
}

:where(body.dashboard-client-flat-theme > .shell :is(.ticket-admin-table th, .ticket-table th) ) {
  color: var(--lf-color-muted);
  font-size: var(--lf-font-size-xs);
  font-weight: var(--lf-font-weight-900);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

:where(body.dashboard-client-flat-theme > .shell :is(.support-admin-grid, .help-agent-layout, .library-shell) ) {
  min-width: 0;
}

@media (max-width: 980px) {
  :where(body.dashboard-client-flat-theme > .shell :is(.support-admin-page, .help-page, .help-agent-page) ) {
    padding-inline: var(--lf-space-4);
  }

  :where(body.dashboard-client-flat-theme > .shell :is(.help-support-card, .ticket-detail-head, .support-hero) ) {
    display: grid;
    grid-template-columns: 1fr;
  }

  :where(body.dashboard-client-flat-theme > .shell :is(.ticket-list-controls, .ticket-detail-meta) ) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  :where(body.dashboard-client-flat-theme > .shell :is(.panel, .lf-panel) ) {
    padding: var(--lf-space-4);
  }
}
}