/* Sessions use the same graphite surfaces, with a persistent historical context. */
.view-navigation { display:flex; align-items:stretch; flex-shrink:0; min-height:38px; padding:0 18px; gap:4px; border-bottom:1px solid var(--line); }
.view-navigation button { padding:8px 13px; border-bottom:2px solid transparent; color:var(--muted); font-size:12px; }
.view-navigation button[aria-current=page] { border-bottom-color:var(--accent); color:var(--ink); }
.view-navigation button:hover { background:var(--soft); color:var(--ink); }
#view-context { align-self:center; margin-left:auto; padding-left:12px; color:var(--muted); font-size:11px; }
body[data-view=sessions] .reception-bar,body[data-view=sessions] #workspace { display:none; }
body[data-view=sessions] #environment { display:none; }
body[data-view=sessions] #sources-button { display:none; }
body[data-view=sessions] .app-header { border-bottom-color:var(--accent); }
.sessions-workspace { display:grid; grid-template-columns:290px minmax(0,1fr); flex:1; min-height:0; overflow:hidden; }
.archive-browser { display:flex; flex-direction:column; min-height:0; min-width:0; border-right:1px solid var(--line); background:var(--page); }
.archive-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:20px 16px 12px; }
.archive-heading h2 { font-size:14px; }
.archive-feedback { padding:12px 18px; overflow-wrap:anywhere; color:var(--warning); }
.archive-feedback:empty { display:none; }
.archive-list { overflow:auto; min-height:0; margin:0; padding:0; list-style:none; scrollbar-gutter:stable; }
.archive-list li { border-top:1px solid var(--soft); }
.archive-list button { width:100%; padding:13px 13px 13px 16px; border-left:3px solid transparent; }
.archive-list button:hover { background:var(--soft); }
.archive-list button[aria-pressed=true] { border-left-color:var(--accent); background:var(--surface); }
.archive-list button:disabled { color:var(--muted); }
.archive-item-id { display:block; margin-bottom:4px; font:500 12px/1.5 var(--mono); }
.archive-item-date,.archive-item-state { display:block; font-size:11px; color:var(--muted); }
.archive-item-state { margin-top:4px; }
.archive-list button[data-state=error] .archive-item-state { color:var(--error); }
.archive-bottom { margin-top:auto; padding:14px 16px; border-top:1px solid var(--line); }
.archive-bottom button { margin-top:10px; }
.archive-storage { margin-bottom:10px; font-size:12px; color:var(--muted); }
.archive-storage summary { cursor:pointer; padding:4px 0; }
.archive-storage summary:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.archive-storage p { margin:8px 0; overflow-wrap:anywhere; font:400 12px/1.5 var(--mono); }
.replay-panel { min-height:0; min-width:0; overflow:auto; scrollbar-gutter:stable; }
.archive-empty { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px; min-height:100%; max-width:580px; margin:0 auto; padding:40px; }
.archive-empty h2 { font-size:22px; }
.archive-empty>p { max-width:400px; color:var(--muted); }
.replay-content { max-width:1200px; margin:0 auto; padding:18px 24px 28px; }
.replay-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.replay-heading h2 { margin-top:4px; font:500 16px/1.5 var(--mono); overflow-wrap:anywhere; }
.replay-heading .button { flex-shrink:0; }
.replay-downloads { display:flex; flex-wrap:wrap; gap:8px; }
.flight-replay-note { padding:12px 0; }
.flight-replay-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(190px,1fr); gap:18px; align-items:start; }
.flight-replay-layout>div { min-width:0; }
.flight-replay-camera { position:relative; aspect-ratio:16/9; overflow:hidden; background:#101a20; color:#e7ebe6; border:1px solid var(--line); }
.flight-replay-camera img { display:block; width:100%; height:100%; object-fit:contain; }
#flight-replay-placeholder { position:absolute; inset:0; display:grid; place-items:center; padding:24px; margin:0; text-align:center; font-size:13px; }
#flight-replay-boxes { position:absolute; inset:0; pointer-events:none; }
.flight-replay-box { position:absolute; border:2px solid #b7efc5; }
.flight-replay-box>span { position:absolute; top:0; left:0; max-width:100%; padding:2px 4px; background:#162a21e8; color:#e5ffec; font:500 11px/1.4 var(--mono); white-space:nowrap; }
#flight-replay-frame-status { min-height:18px; margin-top:7px; }
.flight-replay-state { padding:12px 14px; background:var(--surface); border:1px solid var(--line); }
.flight-replay-state h3,.flight-replay-events h3 { font-size:13px; }
.flight-replay-state .detail-list { font-size:12px; }
.flight-replay-events { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
#flight-replay-events { max-height:300px; overflow:auto; margin:10px 0 0; padding:0; list-style:none; }
#flight-replay-events button { display:grid; grid-template-columns:75px 135px minmax(0,1fr); gap:10px; width:100%; min-height:44px; padding:10px 8px; text-align:left; font-size:12px; border-bottom:1px solid var(--soft); }
#flight-replay-events button:hover { background:var(--surface); }
#flight-replay-events button>span { overflow-wrap:anywhere; }
.flight-event-time { color:var(--muted); font:400 11px/1.5 var(--mono); }
.flight-event-name { font-weight:500; }
#flight-replay-events li[data-position=future] { opacity:.65; }
.replay-metadata { display:flex; flex-wrap:wrap; gap:6px 24px; margin:10px 0 6px; color:var(--muted); font-size:12px; }
.replay-metadata>span:last-child { color:var(--ink); }
.replay-source-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; padding:10px 0; }
.replay-source-row label { font-size:12px; }
.replay-source-row select { width:auto; max-width:100%; flex:1; min-width:160px; }
.replay-source-row select,.replay-speed select { font-size:13px; min-height:34px; }
.replay-transport { padding:10px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.replay-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.replay-controls .button { min-width:80px; }
.replay-speed { display:flex; align-items:center; gap:8px; margin-left:auto; font-size:12px; color:var(--muted); }
.replay-speed select { width:75px; }
.replay-cursor-label { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:6px; margin-top:10px; font-size:12px; color:var(--muted); }
#replay-time { font:400 13px/1.5 var(--mono); color:var(--ink); }
#replay-cursor { width:100%; height:26px; min-height:26px; padding:0; margin:4px 0; border:0; accent-color:var(--accent); cursor:pointer; }
.replay-measure-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:12px; border:1px solid var(--line); background:var(--surface); }
.replay-measure { min-width:0; padding:12px 16px; }
.replay-measure:nth-child(odd) { border-right:1px solid var(--line); }
.replay-measure:nth-child(n+3) { border-top:1px solid var(--line); }
.replay-measure>header { display:flex; flex-direction:column; gap:3px; margin-bottom:8px; }
.history-age { font-size:11px; color:var(--muted); }
.replay-measure[data-state=stale] .history-age { color:var(--warning); }
.history-value { font:500 20px/1.4 var(--mono); margin-bottom:4px; overflow-wrap:anywhere; }
.replay-measure .detail-list { margin-top:6px; }
.replay-measure .detail-list>div { padding:4px 0; gap:12px; }
.replay-measure .detail-list+.microcopy { margin-top:8px; }
.replay-age-note { margin-top:14px; }
.replay-diagnostics { margin-top:20px; border-top:1px solid var(--line); padding-top:14px; }
.replay-diagnostics summary { cursor:pointer; font-weight:500; padding-bottom:14px; }
.replay-diagnostics .detail-list { max-width:680px; }
.replay-diagnostics summary:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }

/* Optional protocol inspection shares the journal header, not the replay cursor. */
.recording-view-controls { display:flex; flex-wrap:wrap; gap:4px; margin:8px 0 0; border-bottom:1px solid var(--line); }
.recording-view-controls button { min-height:36px; padding:8px 12px; border-bottom:2px solid transparent; font-size:12px; color:var(--muted); }
.recording-view-controls button[aria-pressed=true] { border-bottom-color:var(--accent); color:var(--ink); }
.recording-view-controls button:hover { background:var(--soft); color:var(--ink); }
.message-scope { padding:14px 0 10px; }
.message-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.message-filters label { display:flex; flex-direction:column; gap:6px; min-width:0; font-size:12px; color:var(--muted); }
.message-filters select { font-size:13px; min-height:34px; }
.message-pagination { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:14px 0; }
.message-pagination>div { display:flex; flex-wrap:wrap; gap:6px; margin-left:auto; }
#messages-count { font-size:12px; color:var(--muted); }
#messages-status { padding:10px 0; }
.message-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.message-list:empty { border:0; }
.message-list>li { border-bottom:1px solid var(--soft); }
.message-list summary { display:grid; grid-template-columns:52px 105px minmax(0,1fr) 80px 68px; gap:10px; align-items:center; min-height:41px; padding:8px 10px; font:400 11px/1.5 var(--mono); cursor:pointer; }
.message-list summary::-webkit-details-marker { display:none; }
.message-list summary:hover,.message-list details[open]>summary { background:var(--soft); }
.message-list summary:focus-visible,.message-body pre:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }
.message-list details[open]>summary { box-shadow:inset 2px 0 var(--accent); }
.message-number::before { content:"› "; color:var(--muted); }
.message-list details[open] .message-number::before { content:"⌄ "; }
.message-name { overflow-wrap:anywhere; font-weight:500; }
.message-origin,.message-sequence { text-align:right; color:var(--muted); }
.message-origin::before { content:"src "; }
.message-time,.message-number { color:var(--muted); overflow-wrap:anywhere; }
.message-body { padding:14px 18px 20px; border-top:1px solid var(--line); background:var(--surface); }
.message-fields { margin:12px 0 18px; font:400 12px/1.6 var(--mono); }
.message-fields>div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:12px; padding:5px 0; border-bottom:1px solid var(--soft); }
.message-fields dt { color:var(--muted); overflow-wrap:anywhere; }
.message-fields dd { white-space:pre-wrap; overflow-wrap:anywhere; }
.message-body h3 { font-size:12px; }
.message-body pre { margin:8px 0 0; padding:10px 12px; overflow:auto; background:var(--page); font:400 12px/1.6 var(--mono); }
.message-format-note { margin-top:14px; }

@media(min-width:761px) and (max-width:1100px) {
  .sessions-workspace { grid-template-columns:250px minmax(0,1fr); }
  .replay-content { padding:18px; }
  .replay-heading { flex-wrap:wrap; gap:12px; }
  .replay-measure { padding:12px; }
  .replay-controls { gap:6px; }
  .replay-controls .button { min-width:0; }
  .message-list summary { grid-template-columns:48px 90px minmax(0,1fr); gap:6px 10px; }
  .message-origin,.message-sequence { grid-row:2; text-align:left; }
  .message-name { grid-column:3; grid-row:1/3; }
}
@media(max-width:760px) {
  .flight-replay-layout { grid-template-columns:minmax(0,1fr); }
  #flight-replay-events button { grid-template-columns:70px minmax(0,1fr); }
  #flight-replay-events button>span:last-child { grid-column:1/-1; }
  .view-navigation { padding:0 10px; }
  .sessions-workspace { display:flex; flex-direction:column; flex:none; overflow:visible; }
  .archive-browser { border-right:0; border-bottom:1px solid var(--line); }
  .archive-list { max-height:240px; }
  .archive-bottom { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; }
  .archive-bottom>div { flex:1; min-width:150px; }
  .archive-bottom button { margin:0; }
  .replay-panel { overflow:visible; }
  .archive-empty { min-height:280px; padding:28px 18px; }
  .replay-content { padding:22px 16px; }
  .replay-heading { flex-wrap:wrap; gap:12px; }
  .replay-measure { padding:12px; }
  .message-list summary { grid-template-columns:48px 100px minmax(0,1fr); gap:6px 8px; }
  .message-origin,.message-sequence { grid-row:2; text-align:left; }
  .message-name { grid-column:3; grid-row:1/3; }
}
@media(max-width:460px) {
  #view-context { max-width:120px; text-align:right; font-size:10px; }
  .view-navigation button { padding:8px 10px; }
  .replay-heading h2 { font-size:13px; }
  .replay-content { padding:18px 12px; }
  .replay-measure-grid { grid-template-columns:minmax(0,1fr); }
  .replay-measure:nth-child(odd) { border-right:0; }
  .replay-measure:nth-child(n+2) { border-top:1px solid var(--line); }
  .replay-speed { margin:4px 0 0; width:100%; }
  .message-filters { grid-template-columns:minmax(0,1fr); gap:10px; }
  .message-pagination>div { margin-left:0; }
  .message-list summary { grid-template-columns:48px minmax(0,1fr); }
  .message-name { grid-column:1/-1; grid-row:1; }
  .message-number,.message-time { grid-row:2; }
  .message-origin,.message-sequence { grid-row:3; }
  .message-body { padding:12px; }
  .message-fields>div { grid-template-columns:minmax(0,1fr); gap:2px; }
}
@media(min-width:761px) and (max-height:560px) {
  .sessions-workspace { flex:none; min-height:480px; overflow:visible; }
  .archive-list { max-height:340px; }
}
@media(pointer:coarse) {
  .view-navigation button { min-height:44px; }
  #replay-cursor { min-height:44px; }
  .replay-source-row select,.replay-speed select { min-height:44px; }
  .recording-view-controls button,.message-filters select,.message-list summary { min-height:44px; }
}

@media(max-width:760px) {
  .view-navigation { gap:0; }
  .view-navigation button { flex:1; min-width:0; padding:8px 6px; text-align:center; }
  #view-context { display:none; }
}

/* The report is part of a recorded flight; its cursor only seeks that archive. */
.framing-report { margin-top:18px; border:1px solid var(--line); background:var(--surface); }
.framing-report>summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; padding:14px; cursor:pointer; font-weight:500; }
.framing-report>summary:before { content:"›"; }
.framing-report[open]>summary:before { content:"⌄"; }
.framing-report>summary::-webkit-details-marker { display:none; }
.framing-report>summary .microcopy { font-weight:400; }
.framing-report summary:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }
#framing-report-root { padding:0 14px 14px; min-width:0; }
.framing-report-status { color:var(--warning); font-size:12px; }
.framing-report-status:empty { display:none; }
.framing-report-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px 12px; padding:10px 0 16px; }
.framing-report-summary>div { border-left:3px solid var(--framing-state,var(--line)); padding-left:8px; min-width:0; }
.framing-report-summary dt { font-size:11px; color:var(--muted); }
.framing-report-summary dd { font:500 16px/1.5 var(--mono); }
.framing-report [data-state=full] { --framing-state:#729dc5; }
.framing-report [data-state=pilot_throttle] { --framing-state:#85b998; }
.framing-report [data-state=manual] { --framing-state:#a7afbb; }
.framing-report [data-state=paused] { --framing-state:#d8b674; }
.framing-report [data-state=takeover] { --framing-state:#c9827c; }
.framing-report [data-state=unknown_profile] { --framing-state:#ad92c4; }
.framing-report [data-state=inactive] { --framing-state:#65717d; }
.framing-report [data-state=unknown] { --framing-state:#454a51; }
.framing-report-results>h3 { margin-top:18px; font-size:13px; }
.framing-report-results>.microcopy { margin:6px 0; }
.framing-report svg { display:block; width:100%; overflow:visible; cursor:crosshair; }
.framing-report svg text { fill:var(--muted); font:11px var(--mono); }
.framing-report-timeline { margin:8px 0; }
.framing-report-timeline rect { fill:var(--framing-state); }
.framing-report-plots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:18px; }
.framing-report-plot { min-width:0; margin:0; }
.framing-report-plot figcaption { margin-bottom:8px; font-size:13px; font-weight:500; }
.framing-report-plot .microcopy { margin:4px 0; }
.framing-report-line { fill:none; stroke:#85b998; stroke-width:2; vector-effect:non-scaling-stroke; }
.framing-report-plot:nth-child(2) .framing-report-line { stroke:#729dc5; }
.framing-report-plot circle.framing-report-line { fill:#85b998; stroke:none; }
.framing-report-grid { stroke:var(--line); stroke-width:1; }
.framing-report-zero { stroke:var(--muted); stroke-width:1; stroke-dasharray:4 4; }
.framing-report-inspect-line { stroke:var(--ink); stroke-width:1; stroke-dasharray:2 3; pointer-events:none; }
.framing-report-inspector { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.framing-report-inspector label { font-size:12px; }
#framing-report-time { grid-column:1/-1; width:100%; height:32px; padding:0; border:0; accent-color:var(--accent); }
.framing-report-readout { font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.framing-report-inspector button { align-self:start; }
.framing-report-intervals,.framing-report-event-details { margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
.framing-report-intervals>summary,.framing-report-event-details>summary { padding:4px 0; font-size:12px; cursor:pointer; }
.framing-report-list { list-style:none; padding:0; margin:8px 0; max-height:310px; overflow:auto; }
.framing-report-list button { display:grid; grid-template-columns:95px minmax(0,1fr); gap:4px 12px; width:100%; min-height:44px; padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; font-size:12px; }
.framing-report-list button:hover { background:var(--soft); }
.framing-report-list button>span { overflow-wrap:anywhere; }
.framing-report-list button>span:nth-child(n+3) { grid-column:2; }
.framing-report-list-time { grid-row:1/4; color:var(--muted); font:11px/1.6 var(--mono); }
@media(max-width:1100px) { .framing-report-plots { grid-template-columns:minmax(0,1fr); } }
@media(max-width:600px) {
  .framing-report-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .framing-report-inspector { grid-template-columns:minmax(0,1fr); }
  .framing-report>summary { gap:4px 8px; }
  .framing-report>summary .microcopy { flex-basis:100%; }
  .framing-report-list button { grid-template-columns:80px minmax(0,1fr); gap:4px 8px; }
}
@media(pointer:coarse) { #framing-report-time { min-height:44px; } }