/* Screen layout only: the A4 report keeps its dedicated print styles. */
@media screen {
  .topbar { display:grid; grid-template-areas:"brand network about status language"; grid-template-columns:auto auto minmax(44px,1fr) minmax(0,auto) 32px; gap:12px; height:auto; min-height:58px; padding-block:8px; }
  .topbar .brand { grid-area:brand; }
  .topbar .net-switch { grid-area:network; margin:0; min-width:0; }
  .topbar .top-link { grid-area:about; justify-self:end; margin:0; }
  .topbar .status { grid-area:status; margin:0; min-width:0; max-width:100%; }
  .topbar .status > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar .traceon-languages { grid-area:language; justify-self:end; margin:0 0 0 -8px; }
  .topbar .traceon-languages summary { width:32px; height:40px; }
  .traceon-language-options { max-width:calc(100vw - 24px); }
  .result,.bottom,.command,.workspace,.tr-work,.tr-main,.tr-side,.sum-main,.sum-id,.table-wrap { min-width:0; }
  .command { grid-template-columns:minmax(0,560px) minmax(0,1fr); }
  .search,.examples,.tr-tx-tools { max-width:100%; min-width:0; }
  .search .btn { flex-shrink:0; }
  .tr-work { grid-template-columns:minmax(0,1fr) minmax(320px,360px); }
  .tr-side { max-height:calc(100dvh - var(--tr-top,12px) - 12px); }
  .tr-side .tr-ask-form { flex-wrap:wrap; }
  .tr-side .tr-ask-form input { flex:1 1 160px; }
  .tr-side .tr-decision #tr-dec,.tr-side .tr-decision #tr-dec-save { grid-column:1 / -1; grid-row:auto; width:100%; }
  .tr-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tr-addr { min-width:0; font-size:clamp(13px,1.2vw,17px); }
  #tr-addr { min-width:0; overflow-wrap:anywhere; }
  .level { white-space:normal; overflow-wrap:anywhere; }
  .badges,.badge,.conclusion,.tr-ask-msg,.tr-f-label,.tr-f-val { overflow-wrap:anywhere; }
  .tr-ask-msg { min-width:0; }
  .tr-tx-tools { flex:1 1 400px; justify-content:flex-end; }
  .tr-search { flex:1 1 180px; min-width:0; max-width:320px; }
  .tr-seg { max-width:100%; overflow-x:auto; }
  .tr-seg button { flex-shrink:0; white-space:nowrap; }
  .table-wrap { max-width:100%; overscroll-behavior-x:contain; }
  .tr-sections,.tabs,.chips,.ticker { overscroll-behavior-x:contain; }
  .tabs .tab { flex-shrink:0; }
  .panel-head > * { min-width:0; }
  .pattern-list { grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); }
}
@media screen and (min-width:1600px) {
  .tr-work { grid-template-columns:minmax(0,1fr) 400px; }
  .tr-tiles { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media screen and (max-width:1199px) {
  .topbar { grid-template-areas:"brand about status language" "network network network network"; grid-template-columns:auto minmax(44px,1fr) minmax(0,auto) 32px; }
  .topbar .net-switch { justify-self:start; width:auto; }
  .topbar .net-switch button { flex:initial; }
  .command { grid-template-columns:minmax(0,1fr); }
  .tr-work { grid-template-columns:minmax(0,1fr); }
  .tr-main { order:0; }
  .tr-side { order:1; position:static; max-height:none; overflow:visible; }
  .tr-side-concl { max-height:none; overflow:visible; }
  .tr-side .tr-ask { min-height:0; }
  .tr-side .tr-ask-log { max-height:360px; }
  .tr-side .tr-decision { grid-template-columns:minmax(0,1fr) auto; }
}
@media screen and (max-width:760px) {
  .panel { padding:14px; }
  .summary { padding:16px; gap:16px; }
  .sum-head .actions { width:100%; }
  .sum-head .actions .btn { flex:1 1 auto; }
  .tr-pair { grid-template-columns:minmax(0,1fr); }
  .factor-list .tr-f { grid-template-columns:minmax(0,1fr); gap:10px; }
  .tr-pct { max-width:280px; }
  .tr-tiles > div { padding:12px; }
  .tr-tx-tools { justify-content:flex-start; flex-basis:100%; }
  .tr-search { max-width:none; width:100%; flex-basis:100%; }
  .tr-table { max-height:440px; }
  .tr-cp { grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; }
  .tr-cp-bar { grid-row:2; grid-column:1 / -1; }
  .tr-cp-v { grid-column:2; grid-row:1; }
  .tr-sections button { min-height:44px; padding:10px 12px; }
  .tr-graph { height:320px; }
}
@media screen and (max-width:600px) {
  .topbar { grid-template-areas:"brand language" "status status" "network network"; grid-template-columns:minmax(0,1fr) 40px; gap:8px 12px; }
  .topbar .brand-sub,.topbar .top-link { display:none; }
  .topbar .status { justify-self:stretch; width:100%; max-width:none; padding:6px 10px; font-size:12px; }
  .topbar .status > span:last-child { white-space:normal; overflow-wrap:anywhere; }
  .topbar .net-switch { width:100%; justify-self:stretch; }
  .topbar .net-switch button { flex:1 1 0; justify-content:center; gap:5px; padding:8px 6px; min-width:0; }
  .topbar .net-switch button span { font-size:10px; }
  .topbar .traceon-languages { margin:0; }
  .topbar .traceon-languages summary { width:40px; height:40px; }
  .command { position:static; padding-block:10px; }
  .search { gap:6px; padding-left:10px; }
  .search input,.tr-ask-form input,.tr-decision input,.tr-decision select { font-size:16px; }
  .search .btn { padding-inline:12px; min-height:40px; }
  .search kbd,.tr-paste { display:none; }
  .examples { align-items:flex-start; flex-direction:column; gap:5px; }
  .examples .chips { width:100%; }
  .empty { margin:28px auto; }
  .empty h1 { font-size:20px; }
  .empty-grid { grid-template-columns:minmax(0,1fr); gap:8px; }
  .summary { grid-template-columns:80px minmax(0,1fr); align-items:start; justify-items:stretch; text-align:left; gap:12px; padding:14px; }
  .score { width:80px; height:94px; }
  .score-num { font-size:34px; }
  .score-of { font-size:10px; }
  .sum-main { width:100%; }
  .sum-head { gap:8px; }
  .tr-addr { font-size:13px; gap:6px; }
  .meta { font-size:10.5px; }
  .sum-head .actions { gap:6px; }
  .sum-head .actions .btn { padding:7px 9px; font-size:12px; }
  .sum-level { grid-template-columns:minmax(0,1fr); gap:8px; }
  .level { font-size:16px; }
  .badge { max-width:100%; }
  .tr-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tr-side .tr-decision { grid-template-columns:minmax(0,1fr); }
  .tr-side .tr-decision #tr-dec,.tr-side .tr-decision #tr-dec-save { grid-column:1; grid-row:auto; }
  .tr-side .tr-decision #tr-dec-save { width:100%; }
  .tr-side .tr-decision select,.tr-side .tr-decision input { font-size:16px; min-height:42px; width:100%; }
  .tr-side .tr-ask-form input { flex-basis:100%; width:100%; min-height:44px; }
  .tr-ask-form .btn { min-height:42px; margin-left:auto; }
  .tr-ask-chips .chip { white-space:normal; text-align:left; }
  .tr-status-tabs .chip,.sig-actions .btn { min-height:40px; }
  .panel-head .legend { gap:8px 12px; }
  .tabs { gap:16px; }
  .tab { min-height:44px; }
  .sig-actions { flex-wrap:wrap; }
  .tr-tip { max-width:calc(100vw - 24px); }
}
@media screen and (max-width:360px) {
  .net-switch button span { display:none; }
  .summary { grid-template-columns:68px minmax(0,1fr); padding:12px; gap:10px; }
  .score { width:68px; height:80px; }
  .score-num { font-size:30px; }
  .tr-tiles > div { padding:10px; }
  .panel { padding:12px; }
}

/* One page scroll, one message scroll. The form stays in normal panel flow. */
@media screen {
  .tr-side { position:static; max-height:none; overflow:visible; }
  .tr-side .tr-ask { flex:0 0 auto; height:auto; min-height:0; max-width:100%; overflow:hidden; }
  .tr-side .tr-ask > * { min-width:0; }
  .tr-side .tr-ask .tr-ask-log { display:flex; flex:0 0 auto; height:clamp(200px,38dvh,360px); min-height:0; max-height:none; width:100%; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; overflow-anchor:none; scrollbar-gutter:stable; }
  .tr-side .tr-ask .tr-ask-msg { flex-shrink:0; min-width:0; max-width:94%; overflow-wrap:anywhere; }
  .tr-ask-msg p,.tr-ask-msg small { min-width:0; max-width:100%; overflow-wrap:anywhere; }
  .tr-side .tr-ask .tr-ask-form { flex:0 0 auto; width:100%; min-width:0; align-items:center; }
  .tr-side .tr-ask .tr-ask-form input { min-width:0; }
  .tr-side .tr-ask-chips { max-height:108px; overflow-y:auto; overscroll-behavior:contain; }
  .tr-ask-focus { max-height:160px; overflow-y:auto; overscroll-behavior:contain; }
}