/* Diagnostic workspace: presentation only; existing field keys and notes stay intact.
   Desktop-only. Below 901px app.css compact cells/commands stay as before PRs #17–#25. */
#dash [hidden] { display: none !important; }

@media (min-width: 901px) {
  #dash { max-width: 1760px; overflow: visible; }
  #dash .top { padding: 12px 0 20px; border-bottom: 1px solid var(--line); }
  .workspace-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 22px 0; }
  .field-search { width: min(520px, 100%); font-size: 12px; color: var(--muted); }
  .field-search input { margin-top: 8px; width: 100%; padding: 12px 16px; font-size: 15px; }
  .field-search input { background: #1c2832; color: var(--text); border: 1px solid #425666; border-radius: 10px; }
  .workspace-toolbar > span { padding-bottom: 12px; font-size: 13px; }
  .diagnostic-workspace { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 28px; align-items: start; }
  .system-sidebar { position: sticky; top: calc(var(--live-bar-h, 3rem) + 16px); padding: 14px 0; }
  .sidebar-label { font-size: 10px; letter-spacing: .12em; color: var(--muted); padding: 0 14px 12px; }
  #systemNav { display: grid; gap: 7px; }
  #systemNav button { position: relative; text-align: left; padding: 14px 42px 14px 14px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; }
  #systemNav button span { display: block; font-size: 14px; font-weight: 600; }
  #systemNav small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
  #systemNav b { position: absolute; right: 12px; top: 15px; font-size: 11px; color: var(--muted); }
  #systemNav button[aria-current="true"] { background: #203447; border-color: #3e6789; box-shadow: inset 3px 0 #65b8f4; }
  #systemNav button:hover { background: #23303c; }
  #systemNav button:focus-visible, .field-note summary:focus-visible { outline: 2px solid #80c7ff; outline-offset: 3px; }
  #diagnosticContent { min-width: 0; }
  #diagnosticContent > .card { background: transparent; border: 0; padding: 0; box-shadow: none; }
  #diagnosticContent .block { margin: 22px 0 0; padding: 22px; border: 1px solid #344654; border-radius: 18px; background: #182128; }
  #diagnosticContent .block h3 { margin: 0 0 20px; font-size: 16px; color: #dcebf7; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
  .group-metrics { display: block; margin-top: 8px; color: #94a7b7; font-size: 11px; font-weight: 400; }
  #diagnosticContent .grid { grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 12px; }
  #diagnosticContent .cell { padding: 16px; border: 1px solid #34414c; border-radius: 12px; background: #202b33; gap: 8px; }
  #diagnosticContent .cell dt { font-size: 12px; text-transform: none; line-height: 1.45; }
  #diagnosticContent .cell dd { font-size: 22px; font-weight: 500; line-height: 1.3; margin: 0; color: #f1f6fa; }
  #diagnosticContent .cell.empty dd { color: #91a1af; }
  .field-source { color: #91a3b3; font: 10px/1.5 Consolas, monospace; overflow-wrap: anywhere; margin-top: auto; }
  .field-chart { display: block; width: 100%; text-align: left; padding: 8px; border: 1px solid #384957; border-radius: 8px; background: #19232b; color: #9db0bf; cursor: pointer; }
  .field-chart svg { display: block; width: 100%; }
  .chart-frame { fill: #14202a; }
  .chart-line { stroke: #75c3f7; stroke-width: 1.6; fill: none; }
  .chart-dot { fill: #9cd9ff; }
  .chart-analysis { display: block; font-size: 10px; line-height: 1.5; padding-top: 6px; }
  .chart-empty, .chart-label { fill: #a7bbca; font: 10px sans-serif; }
  .chart-grid-line { stroke: #405767; }
  .field-note { border-top: 1px solid #3a4650; padding-top: 10px; }
  .field-note summary { cursor: pointer; color: #d2bd8e; font-size: 11px; }
  #diagnosticContent .field-note .note-preview { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; margin-top: 10px; font-size: 12px; line-height: 1.6; }
  #diagnosticContent .view-opts { margin-top: 0; }
  #recoveredPanel h2 { font-size: 27px; margin: 14px 0; }
  #recoveredPanel > p { line-height: 1.6; max-width: 800px; }
  .recovered-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: 16px; margin-top: 28px; }
  .recovered-card { padding: 22px; border: 1px solid #3b4b58; border-top: 3px solid #c8a773; border-radius: 14px; background: #202b33; }
  .recovered-card code { color: #ceae78; font-size: 12px; }
  .recovered-card h3 { margin: 16px 0; font-size: 17px; }
  .recovered-card p { font-size: 13px; line-height: 1.6; }
  .recovered-card .recovered-value { font-size: 18px; }
  #commandPanel .cmd-group { padding: 18px; border: 1px solid var(--line); border-radius: 14px; margin: 15px 0; }
}

@media (min-width: 1600px) { body { padding-left: 40px; padding-right: 40px; } }

@media (max-width: 900px) {
  .system-sidebar,
  #recoveredPanel,
  .chart-toolbar,
  .field-chart { display: none !important; }
  .diagnostic-workspace { display: block; }
  .workspace-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 0 6px; }
  .workspace-toolbar > span { padding: 0; font-size: 12px; }
  .field-search { width: 100%; font-size: 12px; color: var(--muted); }
  .field-search input {
    margin-top: 6px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-size: 16px;
    background: #1c2832;
    color: var(--text);
    border: 1px solid #425666;
    border-radius: 10px;
  }
  #diagnosticContent > .card {
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
  }
  #sections,
  #exploreSections {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .source-head,
  #diagnosticContent .block,
  #commandPanel .cmd-group,
  #commandPanel .ac-form,
  details.raw {
    margin: 0 0 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--card) 92%, black);
  }
  #diagnosticContent .block { margin: 0; }
  #diagnosticContent .block h3 {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
    color: #dcebf7;
    text-transform: none;
    letter-spacing: 0;
  }
  .source-head > p:last-of-type { margin-bottom: 0; }
  .source-head h2 { margin: 0 0 8px; font-size: 1rem; }
  #commandPanel .cmd-group { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) { body { transition: none; } }