/* Screen design system. Layer order is declared by styles.css.
   All print rules stay in legacy; do not add !important or print rules here. */
@layer ui {
  @media screen {
    /* 1. Tokens */
    :root {
      --ui-font: "DM Sans", "Noto Sans SC", sans-serif;
      --ui-text: #25283b;
      --ui-secondary: #606577;
      --ui-muted: #6c7182;
      --ui-brand: #5948c6;
      --ui-success: #18794e;
      --ui-danger: #b83c4b;
      --ui-border: #e0e3ec;
      --ui-surface: #fff;
      --ui-subtle: #f7f8fc;
      --ui-body: 14px;
      --ui-support: 12px;
      --ui-title: 18px;
      --ui-space-1: 4px;
      --ui-space-2: 8px;
      --ui-space-3: 12px;
      --ui-space-4: 16px;
      --ui-space-5: 20px;
      --ui-space-6: 24px;
      --ui-radius: 10px;
      --ui-control: 36px;
      --purple: var(--ui-brand);
      --muted: var(--ui-muted);
      --border: var(--ui-border);
    }

    /* 2. Elements. Explicit properties also repair legacy invalid font shorthands. */
    body { font-family: var(--ui-font); color: var(--ui-text); font-size: var(--ui-body); }
    button, input, select, textarea, summary {
      font-family: var(--ui-font);
      font-size: var(--ui-body);
      line-height: 1.5;
    }
    button, summary { white-space: nowrap; }
    button { flex-shrink: 0; }
    input, select, textarea { min-width: 0; max-width: 100%; }
    textarea { line-height: 1.6; }
    input[type="checkbox"], input[type="radio"] { flex: none; accent-color: var(--ui-brand); }
    :is(button, input, select, textarea, summary, a):focus-visible {
      outline: 2px solid var(--ui-brand);
      outline-offset: 3px;
    }
    :is(.app-shell, dialog) :is(small, label, th) {
      font-size: var(--ui-support);
      line-height: 1.5;
    }
    :is(.app-shell, dialog) p { font-size: var(--ui-body); line-height: 1.6; }
    :is(.app-shell, dialog) h2 { font-size: var(--ui-title); line-height: 1.4; }
    :is(.app-shell, dialog) h3 { font-size: 16px; line-height: 1.45; }
    table { font-size: var(--ui-support); font-variant-numeric: tabular-nums; }
    th { color: var(--ui-secondary); font-weight: 600; }
    td { font-size: var(--ui-support); color: var(--ui-text); line-height: 1.6; }
    td :is(b, strong), .metric-card strong { font-variant-numeric: tabular-nums; }
    .app-shell .eyebrow, .app-shell .nav-label { font-size: var(--ui-support); color: var(--ui-muted); }
    .up, .healthy { color: var(--ui-success); }
    .down { color: var(--ui-danger); }

    /* 3. Shared shell and components */
    .app-shell main { min-width: 0; }
    .content { container: workspace / inline-size; }
    .content > *, .panel, .reports-page { min-width: 0; }
    .profile div { min-width: 0; }
    .profile b { overflow-wrap: anywhere; }
    .sync-state small, .profile small { font-size: var(--ui-support); }
    .topbar { min-height: 70px; height: auto; padding-block: var(--ui-space-3); gap: var(--ui-space-3); }
    .top-actions { flex-wrap: wrap; justify-content: flex-end; }
    .top-actions a { font-size: var(--ui-support); }
    .crumb { flex-shrink: 0; }
    :is(.primary-btn, .report-detail-actions button, .project-page-actions button,
      .report-project-actions button, .article-monitor-actions button) {
      min-height: var(--ui-control); height: auto; padding: 7px 12px;
      font-size: var(--ui-support); font-weight: 600;
    }
    :is(.panel-head, .trend-card-head, .seo-data-card > header) {
      gap: var(--ui-space-4);
    }
    :is(.panel-head, .trend-card-head, .seo-data-card > header) > div { min-width: 0; }
    :is(.panel-head, .trend-card-head, .seo-data-card > header) p,
    .metric-card > p, .chart-summary small, .account small,
    .account-card p, .usage-page p, .settings-page p {
      color: var(--ui-muted); font-size: var(--ui-support);
    }
    .metric-head small { color: var(--ui-secondary); }
    :is(.legend, .trend-legend, .traffic-trend-legend) {
      display: flex; flex-wrap: wrap; gap: 8px 12px;
      color: var(--ui-secondary); font-size: var(--ui-support);
    }
    :is(.legend, .trend-legend, .traffic-trend-legend) > span { white-space: nowrap; }
    .dashboard-grid { align-items: start; }
    .account-list { max-height: 420px; overflow-y: auto; scrollbar-gutter: stable; }
    .account { min-height: 66px; height: auto; padding-block: var(--ui-space-3); }
    .account b { font-size: var(--ui-support); }
    .account small { white-space: normal; }
    .dashboard-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

    /* Tables are the only horizontally scrollable part of a page. */
    :is(.table-wrap, .article-monitor-table-wrap, .report-catalog-table-wrap, .seo-table-wrap) {
      max-width: 100%; min-width: 0; overflow-x: auto;
    }
    .projects-page .table-wrap table { min-width: 960px; table-layout: auto; }
    .projects-page :is(td, th):nth-child(5), .projects-page :is(td, th):nth-child(6) { white-space: nowrap; }
    .projects-page td:nth-child(5) { min-width: 100px; }
    .projects-page td:nth-child(6) { min-width: 112px; }
    .projects-page td:last-child { min-width: 166px; }
    .projects-page :is(td, th):last-child {
      position: sticky; right: 0; background: var(--ui-surface);
      box-shadow: -1px 0 var(--ui-border); z-index: 1;
    }
    .date-control span, .table-footer, .report-row-link { font-size: var(--ui-support); }
    .projects-page .connection-cell { max-width: 220px; overflow-wrap: anywhere; }
    .projects-page .data-value small { display: block; max-width: 190px; overflow-wrap: anywhere; color: var(--ui-muted); }
    .project-row-actions { display: flex; align-items: flex-start; gap: var(--ui-space-2); }
    .project-more { min-width: 92px; }
    .project-more summary {
      cursor: pointer; padding: 6px 10px; border: 1px solid var(--ui-border);
      border-radius: 7px; color: var(--ui-brand); font-size: var(--ui-support);
    }
    .project-more-actions { display: grid; gap: var(--ui-space-2); padding-top: var(--ui-space-2); }
    .project-more-actions button { width: 100%; text-align: left; }
    .projects-list-head, .project-filters { flex-wrap: wrap; gap: var(--ui-space-3); min-width: 0; }
    .project-filters .search { flex: 1 1 220px; min-width: 0; }
    .project-filters .search input { min-width: 0; width: 100%; }
    .status-pill, .article-attainment, .article-sync { display: inline-flex; white-space: nowrap; font-size: var(--ui-support); }
    .connection-status, .settings-form label > span, .access-role, .access-status,
    .target-rule-order, .target-rule-enabled, .target-rule-select,
    .report-catalog-count, .report-catalog-latest b, .report-catalog-footer,
    .report-threshold-settings legend, .report-threshold-settings label span,
    .usage-controls label span, .usage-source-tag, .usage-kpi header em,
    .usage-legend, .usage-chart text, .usage-quota-row header,
    .usage-quota-row header b, .usage-table-total, .usage-state,
    .usage-overhead-panel dl div, .usage-table-actions label {
      font-size: var(--ui-support); line-height: 1.5;
    }
    .usage-legend { flex-wrap: wrap; gap: var(--ui-space-2); }
    .usage-legend span { white-space: nowrap; }
    .connection-card :is(h3, p) { overflow-wrap: anywhere; }
    .project-name b, .report-catalog-project { font-size: var(--ui-body); }
    .project-name small, .connection-cell, .source-badge { font-size: var(--ui-support); }
    .report-catalog-table-wrap :is(th, td), .report-catalog-open,
    .report-catalog-filter, .report-catalog-project small { font-size: var(--ui-support); }
    .report-catalog-filter, .report-catalog-open { padding: 6px 8px; white-space: nowrap; }
    .report-catalog-project b { font-size: var(--ui-body); }

    /* Sort controls are header text, so inherit the table typography instead of
       the generic 14px control size in this layer. */
    .article-monitor-sort-button { font: inherit; }

    /* Filter and hero rows use intrinsic wrapping at every width. */
    .article-monitor-toolbar { flex-wrap: wrap; gap: var(--ui-space-3); }
    .article-monitor-toolbar > label { min-width: 0; flex: 1 1 130px; }
    .article-monitor-toolbar .article-monitor-search { flex: 2 1 240px; min-width: min(240px, 100%); }
    .article-monitor-toolbar :is(input, select) { width: 100%; font-size: var(--ui-support); }
    .article-monitor-toolbar > label:has(input[type="checkbox"]) { flex: 0 0 auto; }
    .article-monitor-toolbar input[type="checkbox"] { width: auto; }
    .article-monitor-internal-toolbar > label { flex: 1 1 100px; }
    .article-monitor-internal-toolbar .article-monitor-search { flex: 2 1 200px; min-width: min(200px, 100%); }
    .article-monitor-internal-toolbar select { min-width: 0; }
    .article-monitor-internal-toolbar > .article-monitor-page-size { flex: 0 0 66px; }
    .article-monitor-internal-toolbar > .article-monitor-show-titles {
      flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: space-between;
      gap: 10px; height: 34px; font-size: var(--ui-support); color: var(--ui-secondary); white-space: nowrap;
    }
    .article-monitor-show-titles input[type="checkbox"] {
      appearance: none; position: relative; width: 30px; min-width: 30px; height: 18px;
      margin: 0; padding: 0; border: 1px solid #c9cad5; border-radius: 12px; background: #dddde7;
      cursor: pointer; transition: background .15s;
    }
    .article-monitor-show-titles input[type="checkbox"]::before {
      content: ""; position: absolute; width: 12px; height: 12px; left: 2px; top: 2px;
      border-radius: 50%; background: #fff; transition: transform .15s;
    }
    .article-monitor-show-titles input[type="checkbox"]:checked { background: #7669dc; border-color: #7669dc; }
    .article-monitor-show-titles input[type="checkbox"]:checked::before { transform: translateX(12px); }
    .article-monitor-show-titles input[type="checkbox"]:focus-visible { outline: 2px solid #7669dc; outline-offset: 3px; }
    .article-monitor-top-pager { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; }
    .article-monitor-internal-toolbar > label:not(.article-monitor-search) > span,
    .article-monitor-top-pager > span {
      color: #9294a2; font-size: var(--ui-support); font-weight: 400; line-height: 1.5;
    }
    .article-monitor-top-pager .pagination { min-height: 34px; }
    .article-monitor-top-pager .article-monitor-page-position { min-width: 48px; font-size: var(--ui-support); font-variant-numeric: tabular-nums; white-space: nowrap; }
    /* Both pagers share the footer's existing button appearance. The old rules
       were scoped to .table-footer, so markup reuse alone cannot style the top. */
    .article-monitor-panel .pagination button {
      border: 1px solid var(--border); background: #fff; border-radius: 5px;
      min-width: 25px; height: 25px; margin: 0 2px;
    }
    .article-monitor-panel .pagination button.active { background: #6658d9; color: #fff; border-color: #6658d9; }
    .article-monitor-load-status { flex-basis: 100%; color: var(--ui-secondary); font-size: var(--ui-support); }
    .article-monitor-load-status[hidden] { display: none; }
    .article-monitor-actions { flex-wrap: wrap; }
    .article-monitor-actions > span { white-space: normal; font-size: var(--ui-support); }
    .article-monitor-actions > [hidden] { display: none; }
    .article-monitor-summary small, .article-url-cell small, .article-project-domain,
    .article-inline-input, .article-inline-date { font-size: var(--ui-support); }
    .article-inline-date { max-width: none; width: 142px; }

    /* Dialogs inherit the same typography and keep actions reachable. */
    dialog { max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); }
    dialog :is(button, input, select, textarea) { font-family: var(--ui-font); font-size: var(--ui-body); }
    dialog label small { display: block; margin-bottom: var(--ui-space-1); color: var(--ui-secondary); }
    .target-keyword-rule {
      grid-template-columns: auto 24px minmax(100px, 1fr) 110px minmax(140px, 1.5fr) auto 132px;
      align-items: end; gap: var(--ui-space-3); padding: var(--ui-space-4);
    }
    .target-keyword-rule > label { min-width: 0; }
    .target-rule-actions { display: flex; gap: var(--ui-space-1); }
    .target-rule-actions button { min-width: 32px; min-height: 34px; height: auto; padding: 5px 8px; }
    .target-rule-actions button:last-child { min-width: 56px; }
    .target-keyword-editor-actions { flex-wrap: wrap; gap: var(--ui-space-2); }
    .target-keyword-bulk-options > span, .target-keyword-dialog-head > span {
      font-size: var(--ui-support); color: var(--ui-muted);
    }
    .target-keyword-dialog form > footer {
      position: sticky; bottom: 0; z-index: 1; background: var(--ui-surface);
      padding-block: var(--ui-space-4); border-top: 1px solid var(--ui-border);
    }
    .report-module-item { display: flex; align-items: center; gap: var(--ui-space-3); }
    .report-module-item > span { flex: 1; min-width: 0; font-size: var(--ui-body); color: var(--ui-secondary); }
    .report-module-item > i { flex: none; margin-left: auto; }
    .report-module-intro, .report-module-group small { font-size: var(--ui-support); color: var(--ui-muted); }

    /* 4. Reports: header/body/footer alignment, never shared with A4 printing. */
    .report-document { container: report / inline-size; }
    .report-detail-toolbar, .report-detail-actions { flex-wrap: wrap; gap: var(--ui-space-2); }
    .report-executive-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--ui-space-4); }
    .report-executive-grid[data-visible-modules="1"] { grid-template-columns: minmax(0, 1fr); }
    .report-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-narrative-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-content: start; gap: var(--ui-space-3); }
    .report-executive-edit { grid-column: 2; justify-self: start; font-size: var(--ui-support); }
    .report-executive-form { grid-column: 2; }
    .report-narrative-card h3 { margin-block: 8px; }
    .report-narrative-card p { font-size: var(--ui-body); line-height: 1.7; }
    .report-kpi-grid article > div > small, .report-highlights small,
    .search-quality-grid small, .quality-comparison small { font-size: var(--ui-support); color: var(--ui-secondary); }
    :is(.report-kpi-grid, .search-quality-grid, .quality-comparison) p { font-size: var(--ui-support); }
    .metric-source { font-size: var(--ui-support); }
    .metric-source.ga4 { color: #5344aa; background: #eeeafd; }
    .metric-source.gsc { color: #13736e; background: #e4f9f8; }
    :is(.report-kpi-grid, .search-quality-grid, .quality-comparison) .up { color: var(--ui-success); }
    :is(.report-kpi-grid, .search-quality-grid, .quality-comparison) .down { color: var(--ui-danger); }
    .seo-section-head > small, .seo-section-head p,
    .report-trend-card .trend-card-head p, .seo-data-card > header p { color: var(--ui-muted); }
    .report-trend-card > .trend-card-head, .seo-data-card > header { padding: var(--ui-space-4) var(--ui-space-5); }
    .report-external-metrics {
      margin: var(--ui-space-4) var(--ui-space-5);
      gap: var(--ui-space-4);
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    }
    .report-external-metric-item { padding: var(--ui-space-4); }
    .external-metric-provider, .external-metric-field b {
      font-size: var(--ui-support); line-height: 1.5;
    }
    .report-external-metric-item header { flex-wrap: wrap; }
    .report-external-metric-item header em,
    .report-external-metric-item > strong i,
    .report-external-metric-item > a { font-size: var(--ui-support); }
    .report-external-metrics-empty { grid-column: 1 / -1; }
    .visibility-kpis { margin: var(--ui-space-4) var(--ui-space-5); }
    .visibility-card .mini-trend { margin-inline: var(--ui-space-5); }
    .movement-grid { padding-inline: var(--ui-space-5); gap: var(--ui-space-4); }
    .movement-grid ol { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content; column-gap: 8px; }
    .movement-grid li {
      min-width: 0; display: grid; grid-column: 1 / -1;
      grid-template-columns: subgrid; align-items: center;
    }
    .movement-grid li b { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .movement-grid .report-list-empty { display: block; }
    .keyword-favorite {
      display: inline-grid; place-items: center; padding: 0;
      line-height: 1; text-align: center;
    }
    .leader-tabs { padding: var(--ui-space-3) var(--ui-space-5); flex-wrap: wrap; }
    .traffic-data-matrix { margin-inline: var(--ui-space-5); }
    .movement-grid li > span:first-child {
      white-space: normal; overflow-wrap: anywhere; line-height: 1.5;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    }
    .metric-footnote { margin: 0; padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-4); color: var(--ui-muted); font-size: var(--ui-support); }
    #reportTraffic > .report-trend-card + .report-trend-card { margin-top: var(--ui-space-4); }
    .traffic-structure { margin-inline: var(--ui-space-5); }
    .report-trend-card > .traffic-trend-legend { padding-inline: var(--ui-space-5); }
    .report-analysis-content.is-empty { color: var(--ui-muted); font-size: var(--ui-support); }
    /* Compact only editable empty cards. Read-only and populated content retain their meaning. */
    .report-analysis-card:has(.report-analysis-content.is-empty):has([data-report-analysis-edit]:not([hidden])):not(.is-editing) {
      display: flex; flex-wrap: wrap; align-items: center;
    }
    .report-analysis-card:has(.report-analysis-content.is-empty):has([data-report-analysis-edit]:not([hidden])):not(.is-editing) > header {
      flex: 1; border-bottom: 0; min-height: 0; padding: var(--ui-space-3) var(--ui-space-4);
    }
    .report-analysis-card:has(.report-analysis-content.is-empty):has([data-report-analysis-edit]:not([hidden])):not(.is-editing) > header small { display: none; }
    .report-analysis-card:has([data-report-analysis-edit]:not([hidden])):not(.is-editing) .report-analysis-content.is-empty {
      min-height: 0; padding: var(--ui-space-3) var(--ui-space-4);
    }
    .report-metric-help::after, .metric-help { flex-shrink: 0; }
    .leader-card td:first-child { white-space: nowrap; }
    .leader-card .report-table-primary { max-width: calc(100% - 68px); }

    /* 5. Container layouts: widths exclude the sidebar and page gutters. */
    @container report (max-width: 1180px) {
      .report-table-grid { grid-template-columns: minmax(0, 1fr); }
      .movement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @container report (max-width: 960px) {
      .report-executive-grid { grid-template-columns: minmax(0, 1fr); }
      .report-audience-grid { grid-template-columns: minmax(0, 1fr); }
      .report-audience-grid > * { grid-column: auto; grid-row: auto; }
      .report-visibility-grid { grid-template-columns: minmax(0, 1fr); }
      .quality-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .report-narrative-card { min-height: 0; }
      .seo-report-section { padding-inline: var(--ui-space-6); }
    }
    @container workspace (max-width: 1100px) {
      .article-monitor-hero, .welcome, .projects-hero {
        flex-wrap: wrap; align-items: flex-start; gap: var(--ui-space-4);
      }
      .article-monitor-hero > div:first-child, .projects-hero > div:first-child { flex-basis: 100%; }
      .project-page-actions { flex-wrap: wrap; }
      .article-monitor-actions { max-width: 100%; }
      .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 1180px) {
      .target-keyword-rule { grid-template-columns: auto 24px minmax(100px, 1fr) 110px; }
      .target-keyword-rule .target-rule-expression { grid-column: 1 / 4; }
      .target-rule-actions { grid-column: 3 / -1; justify-content: flex-end; }
    }
    @media (max-width: 700px) {
      .topbar { padding-inline: var(--ui-space-4); }
      .target-keyword-rule { grid-template-columns: auto minmax(0, 1fr); }
      .target-keyword-rule > label:not(.target-rule-select),
      .target-keyword-rule .target-rule-expression, .target-rule-actions { grid-column: 1 / -1; }
      .report-narrative-card { grid-template-columns: minmax(0, 1fr); }
      .report-executive-edit, .report-executive-form { grid-column: 1; }
      .movement-grid { grid-template-columns: minmax(0, 1fr); }
    }
  }
}