/* First-use guidance and readable operational pages. */
.skip-to-workspace { position: fixed; z-index: 11000; top: 8px; left: 16px; padding: 12px 18px; color: #041312; background: #8cf3e4; border-radius: 6px; transform: translateY(-160%); }
.skip-to-workspace:focus { transform: none; }
body[data-route] .app-header .primary-nav.icon-nav .nav-button { color: #cbdcdf; height: 50px; border-radius: 8px; }
body[data-route] .app-header .primary-nav.icon-nav .nav-button .nav-tip { display: block; opacity: 1; text-transform: none; font-size: 12px; font-weight: 500; }
body[data-route] .app-header .primary-nav.icon-nav .nav-button.is-active { color: #b6fff3; background: #173f3b; box-shadow: inset 0 -3px 0 #64e3cd; }
body[data-route] .app-header .primary-nav.icon-nav .nav-button:hover { transform: none; background: #21343b; }
body[data-route] .app-header .primary-nav.icon-nav .nav-button .nav-glyph,
body[data-route] .app-header .primary-nav.icon-nav .nav-button .nav-glyph * { animation: none !important; transition: none; transform: none; }
body[data-route] .app-header .shell-utility-button { width: auto; min-width: 58px; height: 40px; min-height: 40px; flex: 0 0 auto; padding: 6px 10px; border: 1px solid #38515c; border-radius: 7px; background: #12262f; color: #dfedf2; font: inherit; font-size: 13px; cursor: pointer; }
body[data-route] .app-header :is(button,a,select):focus-visible,
.research-workflow-nav a:focus-visible,
.hotkey-cheat-card button:focus-visible { outline: 3px solid #94e0ed; outline-offset: 3px; }
.research-workflow-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; flex: 0 0 auto; grid-column: 1 / -1; min-width: 0; padding: 0 0 12px; border-bottom: 1px solid #304550; background: none; }
.research-workflow-nav a { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 10px; border: 1px solid transparent; border-radius: 6px; color: #afc9d1; font-size: 13px; line-height: 1.4; }
.research-workflow-nav a:hover { color: #edf8f8; text-decoration: underline; }
.research-workflow-nav a[aria-current] { color: #b6fff3; border-color: #35615e; background: #143431; font-weight: 600; }
.research-workflow-purpose { margin-left: auto; color: #afc0c9; font-size: 13px; line-height: 1.5; }
.hotkey-cheat-card { max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; }
.hotkey-cheat-card .hotkey-cheat-close { min-width: 40px; min-height: 40px; color: #dfedf2; }
.shortcut-help-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.hotkey-cheat-section h4 { color: #b5cbd1; font-size: 13px; letter-spacing: 0; text-transform: none; }
.hotkey-cheat-section ul { gap: 9px; }
.hotkey-cheat-card > .muted { line-height: 1.55; font-size: 13px; }
@media (max-width: 760px) {
  .research-workflow-purpose { flex-basis: 100%; margin-left: 10px; }
  body[data-route] .app-header .primary-nav.icon-nav .nav-button { min-width: 70px; flex-basis: 70px; }
  body[data-route] .app-header .shell-utility-button { min-width: 52px; padding-inline: 7px; }
}
@media (max-width: 480px) {
  .hotkey-cheat-grid { grid-template-columns: 1fr; }
  .hotkey-cheat-card { padding: 14px; }
  .research-workflow-nav { gap: 3px; }
  .research-workflow-nav a { padding-inline: 7px; font-size: 12px; }
}
body:not([data-page="map"]):not([data-page="graphs"]) .app-header .header-metrics,
body:not([data-page="map"]):not([data-page="graphs"]) .app-header #omega-focus-bar { display: none !important; }
body[data-route] .app-header .primary-nav.icon-nav .nav-button .nav-tip { font-size: 12px; letter-spacing: 0; }
body[data-route] .app-header .primary-nav.icon-nav .nav-button { min-width: 66px; }
body[data-page="command"] #command-page > .page-head > p.muted,
body[data-page="hardware"] #hardware-page > .page-head > p.muted,
body[data-page="settings"] #settings-page > .page-head > p.muted { display: block; flex: 1 1 100%; line-height: 1.55; max-width: 85ch; margin: 0; }
.page-start-note { padding: 12px; border-bottom: 1px solid #2b424e; color: #d8e5eb; font-size: 13px; }
.page-start-note p { margin: 6px 0 10px; line-height: 1.55; color: #adbfca; }
.page-start-note .button, [data-honu-page-tour] { min-height: 36px; white-space: normal; }
#restore-working-panels { display: none; }
body:is([data-page="control"], [data-page="comms"]) #restore-working-panels { display: inline-flex; width: auto; min-width: 112px; align-items: center; justify-content: center; padding: 6px 10px; font-size: 12px; border: 1px solid #385461; border-radius: 8px; background: #152a35; color: #dfedf2; }
#command-page .panel-outcomes,
.cockpit-deck-panel .panel-outcomes,
.mesh-rail .panel-outcomes { display: flex; flex-wrap: wrap; overflow: visible; gap: 7px; }
#command-page .panel-outcomes,
.cockpit-deck-panel .panel-outcomes,
.mesh-rail .panel-outcomes { height: auto; max-height: none; min-height: 0; flex: 0 0 auto; }
/* Scroll the rail's complete content instead of compressing wrapped rows. */
#comms-page .mesh-rail-body { grid-auto-rows: max-content; }
#comms-page .mesh-rail-body > .panel-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  min-height: min-content;
  align-items: stretch;
}
#comms-page .mesh-rail-body > .panel-outcomes .outcome-chip { min-width: 0; width: 100%; height: auto; }
#command-page .command-layout { grid-auto-rows: max-content; flex: 0 0 auto; }
.cockpit-deck-panel:not([hidden]) { display: flex; flex-direction: column; align-items: stretch; }
.cockpit-deck-panel > * { flex: 0 0 auto; }
#command-page .outcome-chip,
.cockpit-deck-panel .outcome-chip,
.mesh-rail .outcome-chip { min-height: 34px; white-space: normal; }
.cockpit-roster { grid-template-rows: auto auto auto minmax(0, 1fr); }
body[data-page="control"] .cockpit-roster { overflow-y: auto; }
.cockpit-live-pill { font-size: 11px; }

/* The old card-grid also split the role sections and each fragment of a
   status sentence into separate columns, making hardware difficult to scan. */
#hardware-page .hw-group { margin-top: 0; }
#hardware-page #firmware-library-cards { display: flex; flex-direction: column; gap: 24px; }
#hardware-page .hw-fw-family-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#hardware-page .hw-fw-role-section { min-width: 0; }
#hardware-page .hw-fw-role-title { font-size: 1rem; margin: 0 0 12px; }
#hardware-page #firmware-library-status { display: block; line-height: 1.6; padding: 12px 0; }
#hardware-page .firmware-library-panel > .section-row { display: block; }
#hardware-page .firmware-library-panel > .section-row p { max-width: 90ch; line-height: 1.6; }
#hardware-page .hw-fw-family-card { min-width: 0; padding: 18px; }
#hardware-page .hw-fw-family-summary { line-height: 1.55; }
#hardware-page .hw-fw-variant-meta { grid-template-columns: 80px minmax(0, 1fr); }
#hardware-page .hw-fw-variant-meta dd { margin: 0; overflow-wrap: anywhere; }
#hardware-page .firmware-source-details { margin: 12px 0; color: #adbfca; }
#hardware-page .firmware-source-details summary { cursor: pointer; padding: 8px 0; }
#hardware-page .firmware-source-details dl { margin: 8px 0; }
#hardware-page .firmware-readme-excerpt { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; max-height: 280px; overflow-y: auto; }
#hardware-page .hw-flash-mode-tabs { flex-wrap: wrap; gap: 6px; }
#hardware-page .hw-flash-mode-tab { min-height: 40px; white-space: normal; }
.usability-page-tour { margin-left: auto; }
body[data-page="blog"] #map-plane { visibility: hidden; opacity: 0; pointer-events: none !important; }
body[data-page="blog"] #blog-page.is-active { position: fixed; inset: calc(var(--app-header-bottom, 76px) + 8px) 16px 16px !important; width: auto; max-height: none; padding: 20px; overflow: auto; background: #0c1820; backdrop-filter: none; }
body[data-page="blog"] #blog-page > .page-head { display: flex !important; position: static; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 0; }
body[data-page="blog"] #blog-page > .page-head > p { display: block; max-width: 75ch; }
#blog-page > * { flex: 0 0 auto; }
#blog-page .blog-main-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); grid-template-rows: auto; align-items: start; gap: 16px; height: auto; min-height: 0; overflow: visible; }
#blog-page .blog-main-col { display: block; min-width: 0; background: #11212b; padding: 18px; }
#blog-page .blog-main-col > * { flex: 0 0 auto; height: auto; }
#blog-page #blog-briefing-list, #blog-page #blog-post-list, #blog-page .blog-layout { max-height: none; overflow: visible; }
#blog-page .blog-layout { display: flex; flex-direction: column; flex: 0 0 auto; height: auto; }
#blog-page .blog-layout > * { flex: 0 0 auto; }
#blog-page .blog-featured { block-size: auto; overflow: visible; }
#blog-page .briefing-item { display: block; padding: 16px 0; border-bottom: 1px solid #304650; }
#blog-page .briefing-item h3 { line-height: 1.45; }
#blog-page .briefing-source-preview { margin: 12px 0; line-height: 1.55; }
#blog-page .briefing-source-preview summary { color: #9dd7da; cursor: pointer; }
#blog-page .blog-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
#blog-page .blog-toolbar .control { flex: 1 1 220px; }
#blog-page .blog-toolbar .button { min-height: 40px; }
@media (max-width: 850px) {
  #blog-page .blog-main-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page="blog"] #blog-page.is-active { inset-inline: 8px !important; padding: 16px; }
}
/* Planning needs a clickable map even on a phone. Its actual map viewport
   occupies the exposed space so fitting a route does not center under a form. */
.route-endpoint-summary { display: grid; gap: 10px; margin: 0 0 12px; }
.route-endpoint-summary > div { padding: 10px 12px; background: #152832; border: 1px solid #334e5b; border-radius: 7px; }
.route-endpoint-summary dt { color: #9eb5c1; font-size: 12px; margin-bottom: 4px; }
.route-endpoint-summary dd { margin: 0; line-height: 1.5; overflow-wrap: anywhere; color: #e2edf0; }
.route-assumptions { font-size: 13px; line-height: 1.6; color: #b4c7d0; margin: 0; }
.route-assumptions strong { display: block; color: #d9e6eb; }
.route-plan-state { padding: 12px; border-left: 3px solid #6b98a8; background: #152832; font-size: 13px; line-height: 1.55; margin: 0; }
.route-plan-state[data-state="calculated"] { border-color: #64e3cd; }
.route-plan-state[data-state="stale"] { border-color: #efba75; }
#route-result[data-route-state="stale"] { border: 1px dashed #987348; }
body[data-page="command"] { --planning-drawer-width: min(460px, 44vw); }
body[data-page="command"] #command-page.page-panel.is-active { width: var(--planning-drawer-width); right: 16px; left: auto; }
body[data-page="command"] #map-plane { position: fixed !important; inset: calc(var(--app-header-bottom, 76px) + 8px) calc(var(--planning-drawer-width) + 32px) 8px 8px !important; width: auto !important; height: auto !important; overflow: hidden; }
body[data-page="command"] #map-stage,
body[data-page="command"] #map { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; }
@media (max-width: 760px) {
  body[data-page="command"] { --planning-sheet-height: min(51dvh, calc(100dvh - var(--app-header-bottom, 120px) - 160px)); }
  body[data-page="command"] #map-plane { right: 8px !important; bottom: calc(var(--planning-sheet-height) + 16px) !important; }
  body[data-page="command"] #command-page.page-panel.is-active { top: auto !important; inset-inline: 8px !important; bottom: 8px; width: auto; height: var(--planning-sheet-height); max-height: var(--planning-sheet-height); }
}
@media (max-width: 700px) {
  #hardware-page .hw-fw-family-grid { grid-template-columns: minmax(0, 1fr); }
  #hardware-page .hw-group-summary, #hardware-page .hw-group-header { flex-wrap: wrap; }
  #hardware-page .hw-group-sub { flex: 1 1 100%; line-height: 1.5; }
  #hardware-page .hw-fw-variant-meta { grid-template-columns: 64px minmax(0, 1fr); }
  body[data-route] .app-header .primary-nav.icon-nav .nav-button { flex-basis: 66px; }
}
/* Phone chrome uses one utility row plus the scrolling page navigation.
   Data-ingest and space-weather status remain available on their pages. */
@media (max-width: 600px) {
  body[data-route] .app-header { column-gap: 4px; }
  body[data-route] .app-header .brand-block { flex: 0 0 26px; min-width: 26px; gap: 0; }
  body[data-route] .app-header .brand-logo { width: 26px; height: 26px; flex-basis: 26px; }
  body[data-route] .app-header .brand-wordmark { display: none; }
  body[data-route] .app-header #auto-ingest-indicator,
  body[data-route] .app-header #space-weather-indicator { display: none !important; }
  body[data-route] .app-header :is(#alerts-badge, #notifications-bell, #user-display) {
    flex: 0 0 32px; width: 32px; min-width: 32px; height: 36px; min-height: 36px; padding: 3px;
  }
  body[data-route] .app-header #copilot-launcher { flex: 0 0 98px; width: 98px !important; min-width: 98px !important; padding-inline: 6px; }
  body[data-route] .app-header #tool-finder-button { flex: 0 0 52px; width: 52px; min-width: 52px; padding-inline: 5px; font-size: 12px; }
  body[data-route] .app-header #portal-help-button { flex: 0 0 44px; width: 44px; min-width: 44px; padding-inline: 5px; font-size: 12px; }
}
/* The access queue keeps review and already-issued links in separate views. */
body[data-page="settings"] .access-review-toolbar { display: grid; grid-template-columns: minmax(160px, .65fr) minmax(180px, 1fr); gap: 14px; margin: 18px 0 8px; }
body[data-page="settings"] .access-review-toolbar input, body[data-page="settings"] .access-review-toolbar select { width: 100%; min-width: 0; }
body[data-page="settings"] .access-invite-tools { margin-top: 20px; border-top: 1px solid var(--line, #35515b); padding-top: 14px; }
body[data-page="settings"] .access-invite-tools > summary { cursor: pointer; font-size: 14px; font-weight: 650; padding: 6px 0; }
@media (max-width: 600px) { body[data-page="settings"] .access-review-toolbar { grid-template-columns: minmax(0, 1fr); } }