/* Application-specific compositions of the shared UX components. */
@layer base {
  a { color: var(--accent); text-underline-offset: 3px; }
  h2 { font-size: var(--text-lg); }
  h3 { font-size: var(--text-md); }
  small { font-size: var(--text-xs); color: var(--on-surface-muted); }
  input, select, textarea { min-width: 0; max-width: 100%; }
  input[type='checkbox'], input[type='radio'] { accent-color: var(--selection); }
  input:disabled, select:disabled, textarea:disabled { opacity: 0.6; cursor: not-allowed; }
  :is(p, dd, h1, h2, h3, a) { overflow-wrap: anywhere; }
}

@layer components {
  .skip-link { position: fixed; z-index: 100; top: var(--space-2); left: var(--space-2); transform: translateY(-200%); padding: var(--space-2); background: var(--surface-raised); }
  .skip-link:focus { transform: none; }
  .main > .page { max-width: 90rem; margin-inline: auto; }
  .layout-preference { display: grid; gap: var(--space-1); padding-inline: var(--space-2); }
  .layout-preference .toolbar { gap: var(--space-1); }
  .page-head .btn { align-self: flex-start; }
  .page-head .toolbar { margin-top: var(--space-2); }
  .muted { color: var(--on-surface-muted); }
  .flash { margin-bottom: var(--space-3); }
  .data-note { display: flex; align-items: flex-start; gap: var(--space-2); }
  .data-note > span:first-child { flex-shrink: 0; }
  .data-note > :last-child { min-width: 0; }
  .form-errors ul, .readiness-requirements { list-style: disc; padding-inline-start: var(--space-3); }
  .form-errors li + li, .readiness-requirements li + li { margin-top: var(--space-1); }
  :root[data-register] .notice--error { color: var(--error); background: var(--error-subtle); border-color: var(--error); }
  .notice--error strong { color: inherit; }
  .empty-state { align-items: flex-start; justify-content: center; min-height: 12rem; }
  .empty-state p { max-width: 55ch; }
  .btn { border: 1px solid transparent; white-space: normal; text-align: center; padding-block: var(--space-1); }
  .btn--secondary { border-color: var(--line-strong); }
  .status { max-width: 100%; white-space: normal; }
  .status::before { flex-shrink: 0; }
  .status--approved, .status--completed { color: var(--signal-positive); }
  .status--queued, .status--generating, .status--running { color: var(--signal-activity); }
  .status--needs-review { color: var(--signal-review); }
  .status--needs-attention, .status--failed { color: var(--signal-negative); }
  .status--draft { color: var(--on-surface-faint); }
  .status--draft::before, .status--needs-review::before, .status--needs-attention::before { background: currentColor; }
  .status--generating::before { background: currentColor; animation: status-pulse 1.6s var(--ease-standard) infinite; }
  .library-filter .field { flex: 1 1 16rem; max-width: 25rem; }
  .library-filter { align-items: flex-end; }
  .card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .card-source { position: relative; z-index: 1; }
  :root[data-register] .persona-library .persona-card .item__foot { gap: var(--space-2); }
  :root[data-register] .persona-library .persona-card .item__link { display: inline-flex; align-items: center; min-width: 2.75rem; min-height: 2.75rem; }
  :root[data-register] .persona-card--draft { border-style: dashed; }
  .readiness-requirements { font-size: var(--text-sm); color: var(--on-surface-muted); }
  .readiness-panel .status { margin-inline-start: auto; }
  .status-card__mark { display: block; inline-size: 1.75rem; block-size: 1.75rem; border: 3px solid var(--line); border-top-color: var(--signal-activity); border-radius: var(--radius-pill); animation: spin 1.5s linear infinite; }
  @keyframes spin { to { transform: rotate(1turn); } }
  .context-note p, .attribute-value dd, .profile-sections dd, .synthesis-card__content { white-space: pre-wrap; }
  .profile-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .profile-sections h3 { margin-bottom: var(--space-2); }
  .profile-sections dt, .attribute-value dt { color: var(--on-surface-muted); font-size: var(--text-sm); }
  .profile-sections dd { margin-block: 4px var(--space-2); font-size: var(--text-sm); }
  .attribute-group { min-width: 0; border-top: 1px solid var(--line); }
  .attribute-group summary { cursor: pointer; padding: var(--space-2) 0; font-size: var(--text-md); font-weight: 700; }
  .attribute-group summary small { float: right; margin-inline-start: var(--space-1); font-weight: 400; }
  .attribute-group summary span { margin-inline-start: var(--space-1); }
  .attribute-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding-block: var(--space-2); }
  .attribute-grid > * { min-width: 0; }
  .attribute-value { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .attribute-value dt .field__source { display: block; margin-top: var(--space-1); }
  .industry-options, .enum-options, .persona-options { border: 0; min-width: 0; }
  .industry-options > legend, .enum-options > legend, .persona-options > legend { margin-bottom: var(--space-2); }
  .industry-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .industry-options > small { flex-basis: 100%; }
  .enum-options { display: grid; gap: var(--space-1); }
  .persona-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .persona-option { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-md); font-size: var(--text-sm); cursor: pointer; }
  .persona-option input { margin-top: 4px; flex-shrink: 0; }
  .persona-option small { display: block; }
  .persona-option:has(input:checked) { border-color: var(--selection); background: var(--selection-subtle); }
  .variant-actions p { color: var(--on-surface-muted); font-size: var(--text-sm); }
  .variant-actions .button_to, .run-actions .button_to { margin-top: var(--space-2); }
  .run-actions > div { display: grid; gap: var(--space-2); }
  .run-history { display: flex; flex-direction: column; gap: var(--space-2); }
  .run-history > article { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-2); border-bottom: 1px solid var(--line); }
  .run-history > article > span { color: var(--on-surface-muted); font-size: var(--text-sm); }
  .turn-references { display: flex; flex-wrap: wrap; gap: var(--space-1); font-size: var(--text-sm); color: var(--on-surface-muted); }
  .synthesis-card--consensus { border-inline-start: 3px solid var(--accent); }
  .transcript-turn { scroll-margin-top: var(--space-3); }
  .provider-metadata { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-sm); }
  .provider-metadata dt { color: var(--on-surface-muted); }
  .provider-metadata dd { overflow-wrap: anywhere; }
  .provider-metadata > div { min-width: 0; }
  .conversation-history .collection { gap: 0; }
  .history-item { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); text-decoration: none; }
  .history-item span { color: var(--on-surface-muted); font-size: var(--text-xs); }
  .history-item[aria-current='page'] { font-weight: 700; color: var(--selection); }
  .chat-messages { min-height: 16rem; }
  .msg__body { white-space: pre-wrap; overflow-wrap: anywhere; }
  .chat-welcome { padding-block: var(--space-4); max-width: 42ch; }
  .chat-welcome > * + * { margin-top: var(--space-2); }
  .persona-update-marker { border-block: 1px solid var(--line); padding-block: var(--space-2); font-size: var(--text-xs); color: var(--on-surface-muted); }
  .reply-status { display: grid; justify-items: start; gap: var(--space-2); }
  .chat-composer { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .chat-composer .toolbar { justify-content: space-between; flex-wrap: wrap; }
  .chat-composer .composer__hint { flex: 1 1 16rem; max-width: 55ch; }
  .analysis-tabs { display: flex; flex-wrap: wrap; gap: var(--space-3); border-bottom: 1px solid var(--line); padding-block: var(--space-2); }
  .analysis-tabs .tab { padding-block: var(--space-1); text-decoration: none; }
  .analysis-tabs [aria-current='page'] { color: var(--on-surface); border-bottom: 2px solid var(--selection); font-weight: 700; }
  .analysis-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-block: var(--space-2); }
  .analysis-filter-grid fieldset { border: 0; min-width: 0; display: grid; gap: var(--space-1); align-content: start; }
  .analysis-filter-grid legend { font-weight: 600; margin-bottom: var(--space-1); }
  .analysis-filter-grid label { display: flex; align-items: baseline; gap: var(--space-1); overflow-wrap: anywhere; }
  .analysis-filter-grid input { flex-shrink: 0; }
  turbo-frame { min-width: 0; }

  :root[data-register='card'] .attribute-group { padding-inline: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-card); }
  :root[data-register='card'] .attribute-group[open] summary { border-bottom: 1px solid var(--line); }
  :root[data-register='card'] .attribute-grid { padding-block: var(--space-3); }
  :root[data-register='type'] .card-top .avatar { display: none; }
  :root[data-register='type'] .attribute-group summary { font-size: var(--text-sm); }
  :root[data-register='type'] .form__actions { padding-top: var(--space-2); border-top: 1px solid var(--line); }
}

@media (max-width: 40rem) {
  .analysis-filter-grid { grid-template-columns: minmax(0, 1fr); }
  .attribute-grid, .profile-sections, .persona-options { grid-template-columns: minmax(0, 1fr); }
  .main { padding-inline: var(--space-2); }
  .nav-primary { gap: var(--space-2); }
  .layout-preference { width: 100%; }
  .layout-preference .toolbar { display: inline-flex; }
  .attribute-group summary small { float: none; display: block; padding-inline-start: var(--space-3); }
  :root[data-register] .persona-library.page { gap: var(--space-3); }
  :root[data-register] .persona-library .page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-2); align-items: center; }
  :root[data-register] .persona-library .page-head__kicker { grid-column: 1 / -1; }
  :root[data-register] .persona-library .page-head__title { grid-column: 1; grid-row: 2; margin: 0; font-size: var(--text-2xl); }
  :root[data-register] .persona-library .page-head__actions { grid-column: 2; grid-row: 2; margin: 0; }
  :root[data-register] .persona-library .page-head__actions .btn { padding-inline: var(--space-2); }
  :root[data-register] .persona-library .page-head__sub { grid-column: 1 / -1; grid-row: 3; margin: 0; font-size: var(--text-md); line-height: 1.5; }
  .persona-library .library-filter { flex-wrap: nowrap; }
  .persona-library .library-filter .field { min-width: 0; flex: 1 1 0; }
  .persona-library .library-filter .btn { flex-shrink: 0; padding-inline: var(--space-2); }
}