/* Cross-application readability, accessibility, and responsive safeguards. */

:root {
  --muted: #526a76;
  --quiet: #6b7f88;
}

.topbar {
  width: 100%;
  min-width: 0;
}

.top-grow {
  min-width: 0;
}

.top-user,
.topbar > .logout,
.topbar > .top-export,
.topbar > .top-jinqua {
  flex: 0 0 auto;
}

.top-user .avatar {
  color: #fff;
}

.app small {
  font-size: .875rem;
}

.state.locked {
  color: var(--ink);
}

.side-link.locked,
.phase-section-side-link[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
}

.logout {
  min-height: 40px;
  padding: 8px;
}

.top-export,
.top-jinqua {
  min-height: 40px;
}

input[type="checkbox"],
input[type="radio"] {
  min-width: 20px;
  min-height: 20px;
}

.rich-plan-system > summary,
.task-plan-provenance > summary {
  min-height: 32px;
  display: flex;
  align-items: center;
}

.inventory-layout,
.inventory-primary,
.inventory-side,
.inventory-catalog-card,
.prompt-catalog-card,
.ai-runs-card,
.inventory-table-wrap {
  min-width: 0;
  max-width: 100%;
}

.auth-v2-shell {
  grid-template-columns: minmax(0, 46%) minmax(0, 54%);
}

.page-head p {
  max-width: 80ch;
  font-size: .95rem;
  line-height: 1.6;
}

.panel-head > span:first-child,
.section-heading > div:first-child {
  min-width: 0;
}

.panel-head p,
.section-heading > div > p:last-child {
  max-width: 80ch;
  font-size: .9rem;
  line-height: 1.55;
}

.strategy-section .panel-body > p:not(.strategy-ready):not(.strategy-locked),
.phase1-result > p {
  max-width: 95ch;
  color: #425d69;
  font-size: .95rem;
  line-height: 1.65;
}

.sitemap-page-copy small,
.page-plan-note span {
  max-width: 78ch;
  font-size: .9rem;
  line-height: 1.55;
}

.phase-connection-card {
  container: phase-connection-card / inline-size;
}

.phase-connection-list > article {
  gap: 12px;
  padding: 14px;
}

.phase-connection-list > article > span:first-child {
  min-width: 0;
}

.phase-connection-list strong {
  font-size: .95rem;
}

.phase-connection-list span span {
  max-width: 62ch;
  font-size: .875rem;
  line-height: 1.5;
}

.connection-requirement,
.phase-connection-list > article > .state {
  width: max-content;
  min-width: 0;
  min-height: 38px;
  padding: 6px 10px;
  font-size: .875rem;
}

.phase-connection-list .connection-actions {
  grid-template-columns: minmax(104px, 1fr) minmax(92px, 1fr);
  width: auto;
  min-width: 208px;
  gap: 8px;
}

.phase-page .phase-connection-list > article,
.phase-connection-card .phase-connection-list > article {
  grid-template-columns: minmax(180px, 1fr) max-content max-content minmax(208px, max-content);
  align-items: center;
}

.phase-page .phase-connection-list .connection-actions,
.phase-connection-card .phase-connection-list .connection-actions {
  grid-column: auto;
  justify-self: end;
}

@container phase-connection-card (max-width: 700px) {
  .phase-connection-card .phase-connection-list > article {
    grid-template-columns: minmax(180px, 1fr) max-content max-content;
  }

  .phase-connection-card .phase-connection-list .connection-actions {
    grid-column: 2 / 4;
  }
}

@container phase-connection-card (max-width: 480px) {
  .phase-connection-card .phase-connection-list > article {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .phase-connection-card .phase-connection-list > article > .state,
  .phase-connection-card .phase-connection-list .connection-actions {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.strategy-notice .button {
  display: inline-flex;
  white-space: nowrap;
}

.missing-keyword-feedback > .button {
  grid-column: 1 / -1;
  justify-self: start;
}

.missing-keyword-feedback .keyword-research-warning {
  color: var(--amber);
  font-weight: 700;
}

.keyword-research-run-status {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #a8ccd9;
  border-radius: 8px;
  background: #edf7fa;
  color: #123d50;
  font-size: .9rem;
}
.keyword-research-run-status .global-workflow-spinner { flex: none; width: 20px; height: 20px; }
.keyword-research-run-status.failed { border-color: #d6a49c; background: #fff3f0; color: #7c251c; }
.keyword-research-run-status.complete { border-color: #abd1ba; background: #edf8f0; color: #145b35; }

.section-heading h3 {
  margin: 0;
  color: var(--ink2);
  font-size: 1.22rem;
  letter-spacing: -.025em;
}

.rich-repeatable h3,
.phase3-draft-editor h3,
.task-plan-complete h3 {
  margin: 0 0 8px;
  color: var(--ink2);
  font-size: .875rem;
}

@media (max-width: 1150px) {
  .strategy-page .rich-repeatable-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .strategy-page .rich-repeatable-row .button {
    grid-column: auto;
    justify-self: start;
  }
}

@media (max-width: 1100px) {
  .page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .head-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .phase-page .phase-connection-list > article {
    grid-template-columns: minmax(0, 1fr) max-content max-content;
  }

  .phase-page .phase-connection-list .connection-actions {
    grid-column: 2 / 4;
  }
}

@media (max-width: 1024px) {
  .app {
    display: block;
  }

  .sidebar {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  .sidebar-brand,
  .side-bottom,
  .side-label,
  .phase-section-side-links {
    display: none;
  }

  .side-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 12px;
    scrollbar-width: thin;
    white-space: nowrap;
  }

  .side-nav > .side-link,
  .side-nav > #phase-side-links > .side-link {
    flex: 0 0 auto;
    min-height: 40px;
    border: 1px solid #ffffff1f;
  }

  #phase-side-links {
    display: contents;
  }

  .inventory-main,
  .flow-main {
    padding: 20px 13px 44px;
  }

  .phase-inventory-body {
    grid-template-columns: 1fr;
  }

  .phase-inventory-body > section {
    border-right: 0;
    border-top: 1px solid var(--line);
  }

  .inventory-filters {
    width: 100%;
    flex-direction: column;
  }

  .inventory-filters select {
    width: 100%;
  }

  .strategy-page .keyword-review-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .strategy-page .keyword-review-toolbar > * {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    height: auto;
  }

  .strategy-page .keyword-category-legend button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .inventory-catalog-card > .panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .prompt-catalog-item > summary,
  .ai-run-item > summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .prompt-trigger,
  .prompt-version,
  .ai-run-summary-meta,
  .ai-run-item > summary > .state {
    grid-column: 2;
  }

  .strategy-page .rich-repeatable-row {
    grid-template-columns: 1fr;
  }

  .strategy-page .rich-repeatable-row .button {
    grid-column: auto;
    justify-self: start;
  }

  .phase-page .phase-connection-list > article {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .phase-page .phase-connection-list > article > .state,
  .phase-page .phase-connection-list .connection-actions {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 600px) {
  .topbar {
    flex-wrap: wrap;
    gap: 6px;
    padding-inline: 10px;
  }

  .top-user {
    display: none;
  }

  .logout {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .top-export {
    width: 58px;
    flex: 0 0 58px;
    padding-inline: 8px;
    font-size: 0;
    white-space: nowrap;
  }

  .top-export::after {
    content: "Export";
    font-size: .875rem;
  }

  .site-chip,
  .site-switcher {
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .head-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .head-actions .button {
    width: 100%;
    text-align: center;
  }

  .panel-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .strategy-page .keyword-review-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Client rows can be wider than the adjacent creation form allows. Keep their actions reachable. */
.clients-list {
  min-width: 0;
  overflow-x: auto;
}

.operations-stage {
  min-width: 0;
  grid-template-columns: 21px minmax(0, 1fr);
}

.operations-stage span,
.operations-error {
  min-width: 0;
  overflow-wrap: anywhere;
}