/* Shared application chrome. Slide/report canvases and replay instruments keep
   their own typography, geometry and export colors. */
@media screen {
  :root {
    --ui-heading-size: 18px;
    --ui-label-size: 13px;
    --ui-radius: 8px;
    --ui-focus: #176b87;
  }

  .status-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }
  .status-actions[hidden], .mobile-log-filter-controls:empty { display: none; }
  .active-log-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
  .active-log-filters[hidden] { display: none; }
  .active-log-filters button {
    min-height: 30px; max-width: 100%; padding: 4px 9px;
    border-radius: 6px; border-color: var(--line); background: var(--accent-soft);
    color: var(--accent-strong); font-size: 12px; text-align: left;
    overflow-wrap: anywhere; white-space: normal;
  }
  :is(.compact-options-disclosure, .flight-summary-details, .debrief-chart-source-group) > summary {
    display: flex; align-items: center; gap: 8px; list-style: none;
    min-height: 32px; border-radius: 6px; font-weight: 650;
  }
  :is(.flight-summary-details, .debrief-chart-source-group) > summary::-webkit-details-marker { display: none; }
  :is(.compact-options-disclosure, .flight-summary-details, .debrief-chart-source-group) > summary::after {
    content: "▾"; margin-left: auto; color: var(--muted); font-size: 11px;
  }
  :is(.compact-options-disclosure, .flight-summary-details, .debrief-chart-source-group)[open] > summary::after { content: "▴"; }
  :is(.flight-summary-details, .debrief-chart-source-group)[open] > summary { color: var(--accent-strong); }
  .flight-summary-details > summary { padding: 3px 6px; }
  .flight-summary-details > summary:hover { background: var(--surface-2); }
  .status-actions button { min-height: 32px; font-size: 12px; }
  .mobile-log-filter-controls { display: grid; gap: 8px; }
  .flight-summary-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding-top: 6px;
    font-size: 12px;
    line-height: 1.45;
  }
  .flight-summary-compact p {
    flex-basis: 100%; margin: 0; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .summary-flight-facts { position: relative; padding-right: 38px; }
  .flight-summary-details { flex: 0 0 0; min-width: 0; margin: 0; }
  .flight-summary-details > summary {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    min-height: 26px;
    margin: 0;
    padding: 2px 5px;
    color: var(--accent-strong);
    font-size: 12px;
    line-height: 1.5;
    cursor: pointer;
  }
  .flight-summary-details[open] { flex-basis: 100%; }
  .flight-summary-details[open] > summary { margin: 0; }

  .app-nav {
    gap: 10px;
    background: #fff;
    box-shadow: 0 2px 6px rgb(24 49 63 / 5%);
  }

  .app-nav button {
    padding-inline: 10px;
    border-radius: 6px 6px 0 0;
  }

  .app-nav button:hover:not(.is-active) { background: var(--surface-soft); }
  .app-nav button.is-active,
  .analysis-tabs button.is-active {
    background: var(--accent-soft);
    color: var(--accent-strong);
  }

  .app-nav button.is-active::after,
  .analysis-tabs button.is-active::after { height: 3px; }

  .analysis-tabs { gap: 8px; }
  .analysis-tabs button { padding-inline: 12px; }

  :is(.data-head, .debrief-page-head, .replay-page-head, .control-response-head,
      .trim-analysis-head, .planned-page-head) h2,
  [data-app-view-panel="reports"] > .panel > .panel-head h2 {
    font-size: var(--ui-heading-size);
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
  }

  :is(.debrief-page-head, .control-response-head, .trim-analysis-head, .planned-page-head) p {
    font-size: var(--ui-label-size);
    line-height: 1.5;
    color: var(--muted);
  }

  :is(.control-response-head, .trim-analysis-head) {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--ui-radius);
    background: var(--surface-soft);
  }

  :is(.toolbar, .control-response-toolbar, .trim-analysis-toolbar) {
    border-color: var(--line);
    border-radius: var(--ui-radius);
    background-color: var(--surface-soft);
  }

  :is(.panel-actions, .toolbar, .control-response-toolbar, .trim-analysis-toolbar,
      .debrief-page-actions, .report-page-actions) :is(button, select),
  .compact-options-disclosure > summary {
    border-radius: var(--ui-radius);
    font-size: var(--ui-label-size);
  }

  :is(.panel-actions, .toolbar, .debrief-page-actions, .report-page-actions)
    button:not(.primary-button):not(.is-active):not(:disabled):hover {
    background-color: var(--surface-2);
  }

  :is(.debrief-page-actions, .control-response-run-actions, .trim-analysis-run-actions,
      .report-page-actions) .primary-button,
  #uploadSubmitButton {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    box-shadow: none;
  }

  :is(.debrief-page-actions, .control-response-run-actions, .trim-analysis-run-actions,
      .report-page-actions) .primary-button:hover:not(:disabled),
  #uploadSubmitButton:hover:not(:disabled) {
    border-color: var(--accent-strong);
    background: var(--accent-strong);
  }

  :is(.debrief-page-actions, .control-response-run-actions, .trim-analysis-run-actions,
      .report-page-actions) .primary-button:disabled,
  #uploadSubmitButton:disabled {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--muted);
    box-shadow: none;
    opacity: 1;
  }

  .app-shell :is(input, select, textarea):not(:disabled):not([type="checkbox"]):not([type="radio"]):focus-visible {
    border-color: var(--ui-focus);
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
  }

  .app-shell input:is([type="checkbox"], [type="radio"]) { accent-color: var(--accent); }
  .app-shell textarea { font-family: inherit; }

  .compact-options-disclosure[open] > summary {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
  }

  .chart-head h2,
  .control-response-chart-card > header h3,
  .trim-analysis-preview-card > header h3 {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
  }

  .log-table tbody tr.is-selected:hover { background: #dceff4; }
  .log-table tbody tr.is-active.is-selected:hover { background: var(--row-active); }
  .log-table tbody tr.is-active td:first-child { box-shadow: inset 4px 0 0 var(--accent); }

  .app-shell .empty-state {
    background: var(--surface-soft);
    border-color: var(--line);
    color: var(--muted);
    line-height: 1.6;
  }


  .log-mobile-identity { display: none; }
  .topbar .auth-team-count { display: none; }
  .topbar { --header-control-height: 32px; --header-control-radius: 6px; }
  .topbar :is(.auth-token, .auth-rank) { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 100px; height: var(--header-control-height); min-height: var(--header-control-height); padding: 0 9px; border-radius: var(--header-control-radius); font-size: 12px; line-height: 1; }
  .topbar :is(.auth-token, .auth-rank) strong { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
  .topbar .auth-rank svg { width: 15px; height: 15px; flex: 0 0 15px; }
  .topbar [data-auth-logout] { background: rgb(255 255 255 / 5%); border-color: rgb(255 255 255 / 14%); color: #edf5fa; }
  .topbar :is(.auth-rank, [data-auth-logout]):hover { background: rgb(255 255 255 / 12%); border-color: rgb(255 255 255 / 28%); color: #fff; }
  .topbar .auth-user { min-height: var(--header-control-height); padding-block: 0; }
  .topbar .admin-test-user-control { min-height: var(--header-control-height); padding-block: 0; border-radius: var(--header-control-radius); }
  .topbar .auth-token { background: rgb(255 255 255 / 5%); border-color: rgb(255 255 255 / 14%); color: #edf5fa; }
  .topbar .auth-token strong { color: inherit; }
  .topbar .auth-token.is-low { background: rgb(255 180 70 / 12%); border-color: rgb(255 180 70 / 35%); color: #ffd48a; }
  .topbar .auth-token.is-critical { background: rgb(255 100 90 / 12%); border-color: rgb(255 100 90 / 40%); color: #ffb4ab; }
  .topbar .topbar-utility-group { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; max-width: 100%; padding: 0; background: transparent; }
  .topbar .topbar-utility-group > :is(button, select) { min-height: 32px; margin: 0; font-size: 12px; border-radius: 6px; }
  .topbar .topbar-utility-group > button { border-color: transparent; background: transparent; padding-inline: 8px; }
  .topbar .auth-box { gap: 8px 12px; }
  .topbar :is(.auth-rank, [data-auth-logout], [data-team-management-header], [data-user-admin-toggle]) { min-height: 32px; border-radius: 6px; font-size: 12px; }
  .topbar .auth-rank { padding-inline: 8px; background: rgb(255 255 255 / 5%); border-color: rgb(255 255 255 / 14%); color: #edf5fa; }
  @media (max-width: 880px) {
    .topbar { --header-control-height: 36px; }
    .topbar .topbar-utility-group > :is(button, select),
    .topbar :is(.auth-rank, [data-auth-logout], [data-team-management-header], [data-user-admin-toggle]) { min-height: 36px; }
    .topbar .auth-box { gap: 8px; }
  }
  .topbar .auth-identity-wallet { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
  .topbar .auth-identity-wallet .auth-user { min-width: 0; flex: 0 1 auto; }
  .topbar .auth-identity-wallet .auth-wallet { flex: 0 0 auto; white-space: nowrap; }
  #selectionInfo { display: none; }
  #summaryStrip { grid-template-columns: var(--summary-chart-label-width, 220px) repeat(var(--sortie-count, 1), minmax(0, 1fr)); }
  #summaryStrip > .summary-metric-cell { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 6px; min-width: 0; }
  #summaryStrip > .summary-metric-cell + .summary-card { grid-column: 2; }
  #summaryStrip > .summary-metric-cell .summary-meta { margin: 0; }
  @media (max-width: 1120px) {
    #summaryStrip { grid-template-columns: 1fr; }
    #summaryStrip > .summary-metric-cell { grid-column: auto; grid-row: auto; }
    #summaryStrip > .summary-metric-cell + .summary-card { grid-column: auto; }
  }
  .log-table tbody tr.is-active td:first-child { box-shadow: none; }
  .log-table tbody tr.is-active td[data-log-column="label"] { box-shadow: inset 3px 0 0 var(--accent); }
  .log-table tbody tr.is-selected:not(.is-active) { background: var(--accent-soft); }
  .analysis-empty-state { display: grid; justify-items: center; align-content: center; gap: 12px; min-height: 140px; padding: 24px 16px; text-align: center; }
  .analysis-empty-state p { margin: 0; max-width: 52ch; }
  .analysis-empty-state button { min-height: 40px; }
  .analysis-empty-state[data-busy="true"]::before { content: ""; width: 20px; height: 20px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: ui-loading-spin 1s linear infinite; }
  @keyframes ui-loading-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .analysis-empty-state[data-busy="true"]::before { animation: none; } }
  .topbar #statusText { block-size: 2.8em; line-height: 1.4; overflow: auto; overflow-wrap: anywhere; scrollbar-width: thin; }
  .topbar #statusText:empty { display: none; }
  :is(.info-dialog-head, .login-required-head, .feedback-dialog-head, .replay-export-head) > div { min-width: 0; }
  :is(.info-dialog-head, .login-required-head, .feedback-dialog-head, .replay-export-head) h2 { font-size: var(--ui-heading-size); line-height: 1.35; overflow-wrap: anywhere; }
  :is(.info-dialog-head, .login-required-head, .feedback-dialog-head) > button { flex-shrink: 0; min-width: 36px; min-height: 36px; }
  .info-dialog > .info-dialog-head { position: sticky; top: -18px; z-index: 3; background: var(--surface); padding-block: 8px; }
  :is(.vehicle-model-dialog-actions, .login-required-actions, .feedback-dialog-actions) { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
  .diagnostic-pill.is-error { color: #992c34; background: #fff0f1; border-color: #e8adb3; }
  .diagnostic-pill.is-warning { color: #805000; background: #fff6df; border-color: #e5c77e; }
  .diagnostic-pill.is-info { color: #245b86; background: #edf5fc; border-color: #b2cce1; }
  .diagnostic-pill.is-muted { color: #526171; background: #f0f3f6; border-color: #c6cfd8; opacity: 1; }
  .diagnostic-display-guide { margin: 8px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
  @media (max-width: 560px) {
    .log-table[data-view] tbody td:is([data-log-column="airframe"], [data-log-column="date"]) { display: none; }
    .log-table[data-view] tbody td[data-log-column="label"] { width: auto; }
    .log-desktop-title { display: none; }
    .log-table .log-mobile-identity { display: grid; gap: 3px; white-space: normal; overflow-wrap: anywhere; text-align: left; }
    .log-mobile-identity strong { font-size: 15px; color: var(--text); }
    .log-mobile-identity > span { font-size: 12px; font-weight: 500; color: var(--text); }
    .log-mobile-identity small { font-size: 11px; font-weight: 400; color: var(--muted); }
    .log-table .log-title-line, .log-table .log-title-line > button { min-width: 0; max-width: 100%; white-space: normal; }
  }
  @media (max-width: 880px) {
    #summaryStrip { grid-template-columns: minmax(0, 1fr); }
    .app-nav.has-hidden-right { mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); }
    .app-nav.has-hidden-left { mask-image: linear-gradient(to right, transparent, #000 18px); }
    .app-nav.has-hidden-left.has-hidden-right { mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent); }

    [data-analysis-panel="charts"] > .toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
    [data-analysis-panel="charts"] > .toolbar > :is(.analysis-preset-control, .toolbar-button-group, #fullFlightButton) { grid-column: 1 / -1; }
    [data-analysis-panel="charts"] > .toolbar > * { min-width: 0; max-width: 100%; }
    [data-analysis-panel="charts"] > .toolbar .analysis-preset-picker { width: 100%; max-width: none; }
    [data-analysis-panel="charts"] > .toolbar #presetMenuButton { width: 100%; }
    [data-analysis-panel="charts"] > .toolbar #selectionInfo { grid-column: 1 / -1; }
    [data-analysis-panel="charts"] > .toolbar .analysis-quick-control { display: grid; gap: 4px; }
    [data-analysis-panel="charts"] > .toolbar .analysis-quick-control :is(input, select) { width: 100%; min-width: 0; min-height: 36px; }
    [data-analysis-panel="charts"] > .toolbar .toolbar-button-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-analysis-panel="charts"] > .toolbar .analysis-options[open] { grid-column: 1 / -1; }
    .info-dialog { max-height: calc(100dvh - 16px); }
    :is(.vehicle-model-dialog-actions, .login-required-actions, .feedback-dialog-actions) > button { min-height: 40px; white-space: normal; }
    .topbar #versionButton { display: none; }
    .topbar .topbar-account-row,
    .topbar .auth-box:not([hidden]) {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      overflow: visible;
      max-height: none;
      width: 100%;
    }
    .topbar .auth-box > button {
      max-width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .active-log-filters button { min-height: 36px; }
    :is(.compact-options-disclosure, .flight-summary-details, .debrief-chart-source-group) > summary { min-height: 36px; }
    .log-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .log-filters #logSearchInput { order: 0; grid-column: 1 / -1 !important; max-width: none; }
    .log-filters #selectionClearButton { order: 1; }
    .log-filters .log-filter-more { order: 2; min-width: 0; }
    .log-filters .log-column-options { order: 3; min-width: 0; }
    .log-filters .log-column-options[open] { grid-column: 1 / -1 !important; }
    .log-filters .log-filter-more[open] { grid-column: 1 / -1 !important; }
    .log-filter-more-panel { position: static; width: 100%; margin-top: 6px; box-shadow: none; }
    .mobile-log-filter-controls { grid-column: 1 / -1; }
    .mobile-log-filter-controls select { min-height: 36px; }
    .mobile-log-filter-controls .log-filter-select-field {
      display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px;
    }
    .status-actions { justify-content: flex-start; }
    .status-actions button { min-height: 36px; }
    .app-nav { gap: 4px; padding-inline: 8px; }
    .app-nav button { padding-inline: 9px; min-height: 44px; }
    :is(.control-response-head, .trim-analysis-head) { padding: 12px; gap: 10px; }
    :is(.control-response-head, .trim-analysis-head) > div { min-width: 0; }
    :is(.toolbar, .control-response-toolbar, .trim-analysis-toolbar) { gap: 8px; }
  }
  @media (max-width: 560px) {
    .topbar > div:first-child > p { display: none; }
  }
}
/* Quiet application chrome: preserve data colors and instrument rendering. */
@media screen {
  /* Reserve the complete toolbar, not just its unit labels, on desktop. */
  @media (min-width: 1121px) {
    #chartGrid { --chart-label-width: 220px; }
    #chartGrid:has(.chart-unit-button:nth-child(2)) { --chart-label-width: 280px; }
    #chartGrid:has(.chart-unit-button:nth-child(3)) { --chart-label-width: 340px; }
    body:has(#chartGrid .chart-unit-button:nth-child(2)) #summaryStrip { --summary-chart-label-width: 280px; }
    body:has(#chartGrid .chart-unit-button:nth-child(3)) #summaryStrip { --summary-chart-label-width: 340px; }
    #chartGrid .chart-panel:not(.is-collapsed) .chart-row-grid { grid-template-columns: var(--chart-label-width) minmax(0, 1fr); }
    #chartGrid .chart-view-actions, #chartGrid .chart-unit-controls { flex-wrap: nowrap; }
    #chartGrid .chart-view-actions > button { flex-shrink: 0; }
  }
  /* Reserve the longest unit label before switching units, so tools stay put. */
  .chart-unit-controls { flex-shrink: 0; }
  .chart-unit-controls .chart-unit-button {
    box-sizing: border-box; width: 56px; min-width: 56px; max-width: 56px;
    flex: 0 0 56px; padding-inline: 4px; white-space: nowrap;
  }
  .topbar { column-gap: 24px; row-gap: 12px; }
  .topbar .topbar-account-row { gap: 8px; }
  .topbar :is(.topbar-utility-button, .secondary-auth-button, .support-open-button) {
    background: rgb(255 255 255 / 4%); border-color: rgb(255 255 255 / 14%); box-shadow: none;
  }
  .topbar :is(.topbar-utility-button, .secondary-auth-button, .support-open-button):hover {
    background: rgb(255 255 255 / 12%); border-color: rgb(255 255 255 / 28%);
  }
  .topbar .secondary-auth-button.is-active { background: #356074; border-color: #8dd9e8; }
  .topbar > div > p { line-height: 1.5; }
  :is(.control-response-head, .trim-analysis-head) {
    background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none;
  }
  :is(.toolbar, .control-response-toolbar, .trim-analysis-toolbar) {
    background: #f6f8f9; border-color: #e3e8eb; box-shadow: none;
  }
  #summaryStrip > .summary-metric-cell {
    background: var(--surface); border: 1px solid var(--line); border-top: 4px solid color-mix(in srgb, var(--accent) 52%, var(--line)); border-radius: 8px; padding: 9px 10px;
  }
  [data-analysis-panel="charts"] > .toolbar { margin-bottom: 10px; }
  [data-analysis-panel="charts"] > .toolbar {
    --analysis-toolbar-control-height: 36px;
    align-items: end;
    column-gap: 8px;
    row-gap: 10px;
  }
  [data-analysis-panel="charts"] > .toolbar #presetMenuButton,
  [data-analysis-panel="charts"] > .toolbar > #fullFlightButton,
  [data-analysis-panel="charts"] > .toolbar .toolbar-button-group > button,
  [data-analysis-panel="charts"] > .toolbar .analysis-quick-control :is(input, select),
  [data-analysis-panel="charts"] > .toolbar .analysis-options > summary,
  [data-analysis-panel="charts"] > .toolbar #analysisShareButton {
    box-sizing: border-box;
    height: var(--analysis-toolbar-control-height);
    min-height: var(--analysis-toolbar-control-height);
  }
  [data-analysis-panel="charts"] > .toolbar .analysis-options > summary {
    padding-block: 0;
  }
  [data-analysis-panel="charts"] > .toolbar #analysisShareButton {
    width: var(--analysis-toolbar-control-height);
    min-width: var(--analysis-toolbar-control-height);
  }
  [data-analysis-panel="charts"] > .toolbar .toolbar-button-group { gap: 0; }
  [data-analysis-panel="charts"] > .toolbar .toolbar-button-group > button { border-radius: 0; }
  [data-analysis-panel="charts"] > .toolbar .toolbar-button-group > button + button { margin-left: -1px; }
  [data-analysis-panel="charts"] > .toolbar .toolbar-button-group > button:first-child { border-radius: var(--ui-radius) 0 0 var(--ui-radius); }
  [data-analysis-panel="charts"] > .toolbar .toolbar-button-group > button:last-child { border-radius: 0 var(--ui-radius) var(--ui-radius) 0; }
  #summaryStrip { align-items: stretch; margin-bottom: 10px; }
  #summaryStrip > :is(.summary-metric-cell, .summary-card) { min-height: 100%; }
  #summaryStrip > .summary-metric-cell .summary-title { color: var(--text); }
  #summaryStrip > .summary-metric-cell .summary-meta { color: #647180; line-height: 1.55; white-space: normal; }
  #chartGrid { gap: 10px; }
  #chartGrid .chart-panel { border-color: #dfe5e9; border-radius: 10px; }
  #chartGrid .chart-label-cell { padding: 6px 10px 6px 4px; }
  #chartGrid .chart-panel:not(.is-collapsed) .chart-title-row { padding-bottom: 2px; }
  #chartGrid .chart-section-divider { margin-block: 18px 6px; color: #526171; }
  :is(.summary-card, .chart-panel, .overview-summary-grid) { box-shadow: none; }
  .summary-title, .chart-title-text { font-weight: 650; line-height: 1.4; }
  .summary-meta, .summary-flight-fact > small { font-size: 12px; line-height: 1.5; }
  .active-log-filters button { background: #f2f5f7; color: var(--text); border-color: #dce3e8; }
  .app-nav button:not(.is-active), .analysis-tabs button:not(.is-active) { color: #526171; }
  .chart-panel .path-tools { gap: 8px; }
  .chart-panel .path-tool-group { background: transparent; border: 0; padding: 0; gap: 4px; }
  .chart-panel .path-tool-actions { border-top: 1px solid var(--line); padding-top: 8px; }
  .chart-panel .path-tool-caption { font-size: 12px; font-weight: 600; line-height: 1.4; }
  .chart-panel .path-tool { border-color: transparent; background: #f3f5f7; color: #526171; min-height: 28px; white-space: normal; }
  .chart-panel .path-tool:hover:not(:disabled) { background: #e9eef2; }
  .chart-panel .path-tool.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
  .chart-panel .chart-label-actions { gap: 6px; padding-top: 8px; }
  .chart-panel .chart-view-actions { order: 0; gap: 3px; }
  .chart-panel .chart-order-controls { order: 1; gap: 3px; }
  .chart-panel :is(.chart-view-actions, .chart-order-controls) {
    padding: 3px; background: #f3f5f7; border-radius: 8px;
  }
  .chart-panel :is(.chart-view-actions, .chart-order-controls) > button {
    background: transparent; border-color: transparent; box-shadow: none; color: #526171;
  }
  .chart-panel :is(.chart-view-actions, .chart-order-controls) > button:hover:not(:disabled) {
    background: #e1e8ed; color: var(--text);
  }
  .chart-panel .chart-view-actions > button.is-active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
  .chart-panel :is(.chart-view-actions, .chart-order-controls) > button.is-danger { color: #a32f3b; }
  .chart-panel :is(.chart-view-actions, .chart-order-controls) > button:focus-visible,
  .chart-panel .path-tool:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
  @media (max-width: 880px) {
    [data-analysis-panel="charts"] > .toolbar { margin-bottom: 8px; }
    #summaryStrip { margin-bottom: 8px; }
    #summaryStrip > .summary-metric-cell { min-height: auto; }
    #chartGrid { gap: 8px; }
    [data-analysis-panel="charts"] > .toolbar .toolbar-button-group > button { width: 100%; }
    .chart-panel .path-tool-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chart-panel .path-tool-caption { grid-column: 1 / -1; }
    .chart-panel .path-tool { min-height: 36px; text-align: center; padding: 6px; }
    .chart-panel .chart-label-actions { flex-wrap: wrap; overflow: visible; }
    .chart-panel .chart-view-actions { flex: 1 1 auto; flex-wrap: wrap; }
    .chart-panel .chart-order-controls { flex: 0 0 auto; }
    .chart-panel :is(.chart-view-actions, .chart-order-controls) > button { min-width: 34px; min-height: 36px; }
  }
}
@media screen {
  .compare-tray { box-shadow: none; gap: 8px 12px; }
  .path-tools-disclosure { margin-block: 8px; border-block: 1px solid var(--line); padding-block: 6px; }
  .path-tools-disclosure > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text); padding-block: 6px; }
  .path-tools-disclosure[open] > summary { margin-bottom: 8px; }
  .path-tools-disclosure > summary:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
  .chart-panel .legend { margin-block: 8px; }
  :is(.debrief-page-head, .report-page-head, .control-response-head, .trim-analysis-head) { gap: 12px; margin-bottom: 12px; }
  :is(.control-response-toolbar, .trim-analysis-toolbar, .debrief-page-actions) { gap: 8px; }
  .chart-panel .chart-view-actions > button.is-complete { background: #e8f5ec; color: #24623c; }
  .chart-panel :is(.chart-view-actions, .chart-order-controls) > button:disabled,
  .chart-panel .path-tool:disabled { color: #647180; background: transparent; opacity: .5; cursor: default; }
  .compare-tray button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
  @media (max-width: 880px) {
    .compare-tray { grid-template-columns: minmax(0, 1fr) auto; }
    .compare-tray-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; overflow: visible; max-width: 100%; width: 100%; grid-column: 1 / -1; grid-row: 2; }
    .compare-chip { width: 100%; min-width: 0; max-width: none; padding: 2px 4px 2px 8px; }
    .compare-chip-text { display: flex; align-items: baseline; gap: 8px; flex: 1; }
    .compare-chip strong { flex: 1; min-width: 0; }
    .compare-chip small { flex: 0 0 auto; font-size: 11px; }
    .compare-chip button { flex: 0 0 32px; width: 32px; min-height: 32px; }
    .compare-open-button { grid-column: 2; grid-row: 1; }
    .compare-tray-heading { flex-wrap: wrap; white-space: normal; gap: 4px; }
    .compare-tray-heading strong { font-size: 12px; }
    .path-tools-disclosure > summary { min-height: 36px; display: list-item; }
  }
}
/* One visual rule for every control in the header account row. */
@media screen {
  .topbar { --header-control-border: rgb(255 255 255 / 18%); --header-control-bg: rgb(255 255 255 / 5%); --header-control-text: #edf5fa; }
  .topbar :is(.topbar-account-row, .auth-box) :is(button, select, .auth-token, .admin-test-user-control) {
    box-sizing: border-box;
    min-height: var(--header-control-height);
    border: 1px solid var(--header-control-border);
    border-radius: var(--header-control-radius);
    background-color: var(--header-control-bg);
    color: var(--header-control-text);
    box-shadow: none;
    font-size: 12px;
    line-height: 1.25;
    margin: 0;
  }
  .topbar :is(.topbar-account-row, .auth-box) button { padding: 5px 9px; }
  .topbar :is(.topbar-account-row, .auth-box) :is(button, select):hover:not(:disabled) {
    background-color: rgb(255 255 255 / 11%); border-color: rgb(255 255 255 / 32%); color: #fff;
  }
  .topbar :is(.topbar-account-row, .auth-box) :is(button, select):focus-visible {
    outline: 2px solid #8dd9e8; outline-offset: 2px;
  }
  .topbar :is(.topbar-account-row, .auth-box) :is(button, select):disabled { opacity: .5; cursor: default; }
  .topbar :is(.topbar-account-row, .auth-box) .is-active {
    border-color: #8dd9e8; background-color: #294f60; color: #fff;
  }
  .topbar :is(.topbar-account-row, .auth-box) .auth-token.is-low {
    border-color: rgb(255 180 70 / 35%); background-color: rgb(255 180 70 / 12%); color: #ffd48a;
  }
  .topbar :is(.topbar-account-row, .auth-box) .auth-token.is-critical {
    border-color: rgb(255 100 90 / 40%); background-color: rgb(255 100 90 / 12%); color: #ffb4ab;
  }
  .topbar :is(.topbar-account-row, .auth-box) .admin-test-user-control select {
    border: 0; background: transparent; min-height: calc(var(--header-control-height) - 2px);
    color: #edf5fa; color-scheme: dark;
  }
  .topbar :is(.topbar-account-row, .auth-box) .admin-test-user-control select option {
    background-color: #29434f; color: #edf5fa;
  }
  .topbar .topbar-utility-group { gap: 6px; }
  /* Selectors change context; signing out ends the session. */
  .topbar :is(.topbar-account-row, .auth-box) :is(.language-select, .admin-test-user-control) {
    background-color: rgb(255 255 255 / 11%); border-color: rgb(255 255 255 / 32%);
  }
  .topbar :is(.topbar-account-row, .auth-box) [data-auth-logout] {
    background-color: transparent; border-color: rgb(255 255 255 / 36%); color: #d4e0e7; font-weight: 500;
  }
  .topbar :is(.topbar-account-row, .auth-box) [data-auth-logout]:hover:not(:disabled) {
    background-color: rgb(255 255 255 / 9%); border-color: #b8c8d2; color: #fff;
  }
  .topbar :is(.topbar-account-row, .auth-box) .admin-test-user-control.is-active {
    border-color: #8dd9e8; background-color: #294f60;
  }
  .topbar :is(.topbar-account-row, .auth-box) .auth-rank:is(.is-top-1, .is-top-2, .is-top-3) {
    border-color: var(--rank-border); background-color: var(--rank-background);
    color: var(--rank-color); font-weight: 700;
  }
  .topbar .auth-rank.is-top-1 { --rank-border: #edbd57; --rank-background: #684a18; --rank-color: #ffe6a3; }
  .topbar .auth-rank.is-top-2 { --rank-border: #b9cfdd; --rank-background: #3c5667; --rank-color: #f0f8ff; }
  .topbar .auth-rank.is-top-3 { --rank-border: #dca477; --rank-background: #654438; --rank-color: #ffe1ca; }
  .topbar .auth-rank:is(.is-top-1, .is-top-2, .is-top-3) svg {
    width: 18px; height: 18px; flex-basis: 18px;
    fill: var(--rank-color); stroke: var(--rank-color);
    filter: drop-shadow(0 0 3px var(--rank-border));
  }
  .topbar .auth-rank:is(.is-top-1, .is-top-2, .is-top-3) strong { font-weight: 800; color: inherit; }
  .topbar :is(.topbar-account-row, .auth-box) .auth-rank:is(.is-top-1, .is-top-2, .is-top-3):hover {
    border-color: var(--rank-color); background-color: var(--rank-background); color: #fff;
  }
}
/* Let the account controls use the space beside the brand on wide desktops. */
@media (min-width: 1800px) {
  .topbar .topbar-status {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }
  .topbar .topbar-account-row,
  .topbar .auth-box,
  .topbar .topbar-utility-group {
    flex-wrap: nowrap;
  }
  .topbar .auth-box { flex: 0 1 auto; }
}