/* Keep the work area for forms. Status is shown only when action is needed. */
.context { display: none; }
.connection-bar { padding: 6px 16px; }
#connectionStatus { display: none; }
.connection-bar[data-attention="true"] #connectionStatus { display: block; width: 100%; color: #8b251c; }
#reloadRemote { display: none; }
.connection-bar[data-conflict="true"] #reloadRemote { display: inline-block; }
.eyebrow, .demo, .avatar { display: none; }
header { height: 64px; padding: 12px 24px; }
.flight-heading { position: static; }
.mobile-map-button { display: none; }
@media (max-width: 760px) {
  body.authenticated { display: flex; flex-direction: column; height: 100dvh; min-height: 0; overflow: hidden; padding-top: 42px; }
  .authenticated > aside { flex: none; padding: 4px 8px; }
  .authenticated aside .brand { display: none; }
  .authenticated aside nav { display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .authenticated aside nav::-webkit-scrollbar { display: none; }
  .authenticated nav button { flex: none; padding: 10px; }
  .authenticated > main { flex: 1; min-height: 0; }
  .authenticated main > header { display: none; }
  .authenticated .workspace { display: flex; flex: 1; min-height: 0; overflow: hidden; }
  .authenticated .editor, .authenticated.dashboard-open .editor { height: auto; min-height: 0; flex: 1; width: 100%; }
  .authenticated #pages, .authenticated.dashboard-open #pages { overflow-y: auto; padding: 12px; }
  .authenticated .map { height: auto; min-height: 0; flex: 1; }
  .authenticated .common-actions { padding: 8px 12px; }
  .authenticated .connection-bar { flex: none; padding: 4px 12px; gap: 8px; }
  .authenticated .connection-bar button { padding: 7px 10px; }
  .authenticated .card { padding: 16px; margin-bottom: 12px; }
  .authenticated .section-head { margin-bottom: 12px; }

  .authenticated aside nav { width: 100%; padding-right: 0; }
  .authenticated .mobile-map-button { display: inline-block; }
  .authenticated .authUserText { flex: 1; }
  .authenticated .authTopBar { flex-wrap: nowrap; }
}

/* Shared mobile-first controls and type scale across every application page. */
:root { --ui-body: 14px; --ui-small: 12px; --ui-heading: 18px; --ui-control: 44px; }
#pages { font-size: var(--ui-body); }
#pages h2 { font-size: var(--ui-heading); line-height: 1.5; margin: 0 0 16px; }
#pages h3 { font-size: 16px; line-height: 1.5; }
#pages label, #pages input, #pages select, #pages textarea { font-size: var(--ui-body); }
#pages button, .common-actions button, .connection-bar button, .authLogoutButton, .accessPermissionButton { min-height: var(--ui-control); padding: 10px 14px; font-size: var(--ui-body); border-radius: 8px; }
#pages .muted { font-size: var(--ui-small); line-height: 1.6; }
#pages .section-head { gap: 12px; align-items: center; margin-bottom: 16px; }
#pages .section-head h2, #pages .section-head h3 { margin: 0; }
#pages .preflight-brand h2 { font-size: 24px; margin: 0; }
#pages .preflight-section-head button { font-size: var(--ui-small); }
.common-actions { justify-content: flex-end; gap: 12px; }
.common-actions button { min-width: 104px; }
.common-actions .danger-action, #pages .danger-action { color: #a82c26; background: #fff; border: 1px solid #d6aaa6; }
.common-actions .danger-action { margin-right: auto; }
@media(max-width:760px) { .common-actions { gap: 8px; }.common-actions button { min-width: 0; padding-inline: 10px; } }
@media(max-width:760px) {
 .authenticated #pages { padding: 12px; }
 .authenticated .card, .preflight-section { border-radius: 14px; padding: 16px; }
 .authenticated nav button { min-height: var(--ui-control); font-size: var(--ui-body); }
 .authenticated .connection-bar button { min-height: var(--ui-control); padding: 8px 12px; font-size: var(--ui-small); }
 #pages input, #pages select, #pages textarea { font-size: 16px; }
 .common-actions button { flex: 1; }
 .dashboard-open .preflight { padding-bottom: 20px; }
}

/* Shared control placement and navy palette. */
.authTopBar { height: 52px; min-height: 52px; }
.authenticated { padding-top: 52px; }

#pages .capture-title, #pages .preflight-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#pages .capture-title button, #pages .section-head button { min-width: 104px; }
#pages .preflight-brand h2, .preflight-clock time { color: #15324a; }
.brand-placeholder { background: #15324a; color: #c7e3ff; }
.preflight-environment { background: linear-gradient(145deg,#edf6ff,#fff 65%); border-color: #caddeb; }
.preflight-section { border-color: #dbeafe; }
.preflight a, .preflight-section-head button { color: #294c69; }
.preflight-section-head button { background: #edf3f8; }
@media(max-width:760px) {
 body.authenticated { padding-top: 52px; }

 .authenticated .authTopBar { height: 52px; gap: 6px; padding: 0 8px; }
 .authenticated .authLogoutButton { font-size: 12px; padding: 8px; flex-shrink: 0; }
 .authenticated .authUserText { font-size: 12px; }
}
@media(max-width:480px) { #pages .grid { grid-template-columns: 1fr; } }
#pages .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
#pages input, #pages select, #pages textarea, #pages label { min-width: 0; max-width: 100%; }
/* Native date controls must fit the same form column on mobile Safari too. */
#pages input[type="date"], #pages input[type="datetime-local"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: var(--ui-control);
  -webkit-appearance: none;
  appearance: none;
}
#pages input[type="date"]::-webkit-date-and-time-value,
#pages input[type="datetime-local"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}
#pages input[type="date"]::-webkit-datetime-edit,
#pages input[type="datetime-local"]::-webkit-datetime-edit {
  min-width: 0;
  padding: 0;
}
#pages .section-head, #pages .capture-title { flex-wrap: wrap; }
@media(max-width:1100px) and (min-width:761px), (max-width:480px) { #pages .grid { grid-template-columns: minmax(0,1fr); } }

/* Account controls occupy the top bar; navigation gets its full width. */
.authTopBar .authUserText { flex: 1; min-width: 0; }
.authTopBar .accessPermissionFloating { position: relative; top: auto; right: auto; flex: none; max-width: none; gap: 0; }
.authTopBar .accessPermissionButton { white-space: nowrap; box-shadow: none; }
.authTopBar .accessPermissionPanel { position: absolute; top: calc(100% + 4px); right: 0; max-height: calc(100dvh - 64px); overflow-y: auto; }
.account-email { overflow-wrap: anywhere; font-size: var(--ui-small); margin: 8px 0 12px; }