/* BRIEFED desktop layout — panel design from the approved mock-ups.
   Everything is under html.dc, a class js/desktop.js sets only on wide windows with a mouse. */
html.dc {
  --dc-panel: rgba(23,32,56,.96); --dc-line: #2a3556; --dc-line2: #222d4b; --dc-raised: #1f2a47; --dc-raised-b: #2c3960;
  --dc-sub: #93a2c2; --dc-gold: #e0b84a; --dc-btn-b: #3a4a78; --dc-g: #4ade80; --dc-y: #fbbf24; --dc-r: #f87171;
}
html.dc [hidden] { display: none !important; }
html.dc .desk-map { top: 0; }

/* ---------- floating top bar ---------- */
html.dc .app-bar {
  position: fixed; left: 20px; right: 20px; top: 16px; height: 56px; z-index: 30; padding: 0 16px; gap: 14px;
  background: rgba(14,21,48,.92); border: 1px solid var(--dc-line); border-radius: 14px; box-sizing: border-box;
}
html.dc .brand { display: flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: 1px; color: #e5e7eb; font-weight: 800; }
html.dc .brand::before { content: 'B'; width: 28px; height: 28px; border-radius: 8px; background: var(--dc-gold); color: #1a1405; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 15px; }
html.dc .header-title-btn { min-height: 32px; height: 32px; padding: 0 12px; border-radius: 10px; background: var(--dc-raised); border: 1px solid var(--dc-raised-b); }
html.dc .header-nnumber { font-size: 14px; }
html.dc .app-bar .mob-nav { margin-left: 8px; gap: 4px; }
html.dc .stage-num { display: none !important; }
html.dc .stage-item, html.dc .desk-tab { height: 34px; padding: 0 12px; border-radius: 8px; color: #e5e7eb; font-size: 12.5px; }
html.dc .stage-label { font-size: 12.5px; font-weight: 700; color: #e5e7eb; }
html.dc .desk-tab { font-size: 12.5px; margin-right: 0; }
html.dc .desk-tab::after { display: none; }
html.dc .stage-item.active, html.dc .desk-tab.active { background: rgba(224,184,74,.14); }
html.dc .stage-item.active .stage-label, html.dc .desk-tab.active { color: var(--dc-gold); }
html.dc .mob-nav-submit { height: 34px; margin-left: 0; border-radius: 8px; padding: 0 14px; font-size: 12.5px; background: var(--dc-gold); border: 1px solid var(--dc-gold); color: #1a1405; font-weight: 700; text-transform: none; letter-spacing: 0; }
html.dc #dc-wx-chip { margin-left: auto; margin-right: 0; }
html.dc .header-username { display: none; }
html.dc .app-bar-right { gap: 10px; align-items: center; }
html.dc .avatar-circle { width: 30px; height: 30px; font-size: 11px; background: var(--dc-raised-b); color: #e5e7eb; }

.dc-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .3px; white-space: nowrap; }
.dc-chip.go { background: rgba(74,222,128,.14); color: var(--dc-g); }
.dc-chip.ca { background: rgba(251,191,36,.14); color: var(--dc-y); }
.dc-chip.ng { background: rgba(248,113,113,.14); color: var(--dc-r); }
.dc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 8px; background: #3a4a78; }
.dc-dot.g { background: var(--dc-g); } .dc-dot.y { background: var(--dc-y); } .dc-dot.r { background: var(--dc-r); } .dc-dot.n { background: #3a4a78; }
.tg { color: var(--dc-g); } .ty { color: var(--dc-y); } .tr { color: var(--dc-r); }
.dc-btn { height: 34px; border-radius: 8px; border: 1px solid var(--dc-btn-b); background: transparent; color: #e5e7eb; font-weight: 700; font-size: 12.5px; padding: 0 14px; cursor: pointer; white-space: nowrap; font-family: inherit; }
.dc-btn:hover { border-color: var(--dc-gold); }
.dc-btn.pri { background: var(--dc-gold); border-color: var(--dc-gold); color: #1a1405; }
.dc-btn.gold, .dc-btn.on { border-color: var(--dc-gold); color: var(--dc-gold); }
.dc-sub { font-size: 12px; color: var(--dc-sub); font-weight: 400; }

/* ---------- screen area ---------- */
html.dc .screen { position: fixed; top: 88px; left: 20px; right: 20px; bottom: 20px; overflow: visible; flex: none; width: auto; height: auto; }
html.dc.desktop .screen > .scroll {
  flex: 1; min-height: 0; height: 100%; overflow: visible; padding: 0; display: flex; flex-direction: row;
  align-items: flex-start; justify-content: space-between; gap: 20px; column-count: auto; max-width: none; margin: 0; width: 100%; box-sizing: border-box;
}
html.dc.desktop .screen > .scroll > * { float: none; clear: none; }
html.dc.desktop .screen > .scroll::after { display: none; }

/* ---------- panels ---------- */
html.dc .dc-panel {
  background: var(--dc-panel); border: 1px solid var(--dc-line); border-radius: 14px; padding: 20px; box-sizing: border-box;
  max-height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; display: flex; flex-direction: column; gap: 14px;
  pointer-events: auto; flex: none; color: #e5e7eb; font-size: 14px;
}
html.dc .dc-full { align-self: stretch; }
html.dc .dc-w340 { width: 340px; } html.dc .dc-w380 { width: 380px; }
html.dc .dc-grow { flex: 1 1 auto; min-width: 0; }
html.dc .dc-tight { padding: 16px; gap: 10px; }
html.dc .dc-flush { padding: 0; gap: 0; }
.dc-eyebrow, html.dc .dc-panel h2.dc-eyebrow { font-size: 11px; letter-spacing: .9px; text-transform: uppercase; color: var(--dc-sub); font-weight: 800; margin: 0; }
.dc-eyebrow.dc-sm { font-size: 10px; }
.dc-mt { margin-top: 8px !important; }
.dc-title { font-size: 22px; font-weight: 800; margin-top: 4px; line-height: 1.15; }
.dc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.dc-rule { height: 1px; background: var(--dc-line); }
.dc-raised { background: var(--dc-raised); border: 1px solid var(--dc-raised-b); border-radius: 10px; padding: 12px; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.dc-route { font-weight: 700; margin-top: 2px; }
.dc-empty { padding: 24px 16px; color: var(--dc-sub); font-size: 13px; }
.dc-pad { padding: 12px 16px; }
html.dc .dc-cta { height: 40px; margin-top: auto; width: 100%; }

/* cards that live inside a panel become flat sections */
html.dc .dc-panel .card { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; break-inside: auto; }
html.dc .dc-panel .card > h2, html.dc .dc-panel .card-head-row h2 { font-size: 11px; letter-spacing: .9px; text-transform: uppercase; color: var(--dc-sub); font-weight: 800; margin: 0 0 10px; }
html.dc .dc-panel .card-footer { font-size: 11.5px; color: var(--dc-sub); text-align: right; margin-top: 6px; }
html.dc .dc-panel label { font-size: 11.5px; color: var(--dc-sub); margin: 0 0 4px; display: block; text-transform: none; letter-spacing: 0; font-weight: 400; }
html.dc .dc-panel .field { margin: 0 !important; }
html.dc .dc-panel input:not([type=checkbox]):not([type=radio]):not([type=file]), html.dc .dc-panel select {
  background: var(--dc-raised); border: 1px solid var(--dc-raised-b); border-radius: 8px; color: #e5e7eb; font-size: 13.5px; min-height: 34px; height: 34px; padding: 0 11px; box-sizing: border-box; width: 100%;
}
html.dc .dc-panel textarea { background: var(--dc-raised); border: 1px solid var(--dc-raised-b); border-radius: 8px; color: #e5e7eb; font-size: 13.5px; padding: 8px 11px; min-height: 54px; height: 54px; resize: none; width: 100%; box-sizing: border-box; }
html.dc .dc-panel .ghost-btn, html.dc .dc-panel .small-action-btn { height: 34px; min-height: 34px; border-radius: 8px; border: 1px solid var(--dc-btn-b); background: transparent; color: #e5e7eb; font-weight: 700; font-size: 12.5px; padding: 0 14px; text-transform: none; letter-spacing: 0; width: auto; }
html.dc .dc-panel .ghost-btn:hover, html.dc .dc-panel .small-action-btn:hover { border-color: var(--dc-gold); }
html.dc .dc-panel .primary-btn { height: 40px; min-height: 40px; border-radius: 8px; background: var(--dc-gold); border: 1px solid var(--dc-gold); color: #1a1405; font-weight: 700; font-size: 12.5px; text-transform: none; letter-spacing: 0; }
html.dc .dc-panel .row { gap: 12px; }

/* ---------- Overview ---------- */
html.dc #dc-ov-left { width: 440px; }
html.dc #dc-ov-left > .card { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
html.dc #dc-ov-left > .card > h2 { grid-column: 1 / -1; margin: 0 0 -2px; }
html.dc #dc-ov-left > .card .row { display: contents; }
html.dc #dc-ov-left > .card + .card { border-top: 1px solid var(--dc-line); padding-top: 14px; }
html.dc #dc-ov-left #flightinfo-refresh-btn { grid-column: 2; grid-row: 3; width: auto !important; margin: 0 !important; justify-self: end; }
html.dc #dc-ov-left #flightinfo-clock { grid-column: 1; grid-row: 3; text-align: left !important; margin: 0 !important; align-self: center; font-size: 12px; color: var(--dc-sub); }
html.dc #dc-ov-right .dc-ringrow { margin: 4px 0 6px; }
.dc-ringrow { display: flex; align-items: center; gap: 16px; }
.dc-ring { position: relative; flex: none; display: flex; align-items: center; justify-content: center; }
.dc-ring b { position: absolute; font-size: 24px; line-height: 1; }
.dc-ring b.sm { font-size: 20px; }
.dc-prow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--dc-line2); }
.dc-prow b { flex: 1; font-size: 13px; }

/* ---------- Aircraft ---------- */
html.dc #dc-ac-left { flex: 0 1 560px; min-width: 440px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 12px; align-content: start; }
html.dc #dc-ac-left > .dc-head { grid-column: 1 / -1; order: -10; }
html.dc #dc-ac-left > .card { display: contents; }
html.dc #dc-ac-left .row { display: contents; }
html.dc #dc-ac-left .dc-c1 > h2 { grid-column: 1; order: -5; align-self: center; margin: 0; }
html.dc #dc-ac-left #ramco-group { grid-column: 2 / 5; order: -4; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
html.dc #dc-ac-left #ramco-notes { grid-column: 1 / -1; order: -3; margin: 0 !important; }
html.dc #dc-ac-left #ramco-meta { display: none; }
html.dc #dc-ac-left .dc-c2 > h2, html.dc #dc-ac-left .dc-c3 > h2 { display: none; }
html.dc #dc-ac-left #mx-gauges { grid-column: 1 / -1; order: -2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
html.dc #dc-ac-left .mx-cap, html.dc #dc-ac-left .mx-actions, html.dc #dc-ac-left .mx-divider { display: none; }
html.dc #dc-ac-left .field:has(#f-mx-remarks) { grid-column: 1 / -1; }
html.dc #dc-ac-left #acinfo-meta { grid-column: 1 / -1; order: 20; }
html.dc .gyr-group .gyr-btn, html.dc .dc-panel .gyr-btn { height: 34px; min-height: 34px; border-radius: 8px; border: 1px solid var(--dc-btn-b); background: transparent; color: #e5e7eb; font-weight: 700; font-size: 12.5px; text-transform: none; letter-spacing: 0; padding: 0; }
html.dc .gyr-btn.on[data-val="G"] { background: rgba(74,222,128,.12); border-color: var(--dc-g); color: var(--dc-g); }
html.dc .gyr-btn.on[data-val="Y"] { background: rgba(251,191,36,.12); border-color: var(--dc-y); color: var(--dc-y); }
html.dc .gyr-btn.on[data-val="R"] { background: rgba(248,113,113,.12); border-color: var(--dc-r); color: var(--dc-r); }
html.dc #dc-ac-left .mx-gauge { display: grid; grid-template-columns: 84px 1fr; grid-template-areas: "ring tl" "ring nm" "ring sb"; column-gap: 12px; row-gap: 2px; align-items: center; text-align: left; padding: 12px; background: var(--dc-raised); border: 1px solid var(--dc-raised-b); border-radius: 10px; min-height: 0; }
html.dc #dc-ac-left .mx-ring { grid-area: ring; width: 84px; height: 84px; }
html.dc #dc-ac-left .mx-ring-c .n { font-size: 24px; }
html.dc #dc-ac-left .mx-gauge .tl { grid-area: tl; align-self: end; font-size: 10px; }
html.dc #dc-ac-left .mx-gauge .nm { grid-area: nm; font-size: 13px; }
html.dc #dc-ac-left .mx-gauge .sb { grid-area: sb; align-self: start; }

html.dc #dc-mx { flex: 1 1 380px; min-width: 300px; max-width: 460px; padding: 0; gap: 0; }
.dc-mx-head { padding: 16px 16px 12px; display: flex; justify-content: space-between; align-items: center; }
.dc-seg { display: flex; border: 1px solid var(--dc-btn-b); border-radius: 8px; overflow: hidden; }
.dc-seg button { border: 0; background: none; color: #e5e7eb; height: 28px; padding: 0 14px; font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.dc-seg button.on { background: var(--dc-raised-b); }
.dc-mx-body { flex: 1; overflow-y: auto; min-height: 0; }
.dc-mxrow { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--dc-line2); }
.dc-mxrow > div { flex: 1; min-width: 0; }
.dc-mxrow b { font-size: 13px; }
.dc-mx-foot { margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--dc-line); display: flex; gap: 8px; }
.dc-mx-foot .dc-btn { flex: 1; }
.dc-fleet-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: var(--dc-raised); border: 1px solid var(--dc-raised-b); border-radius: 8px; color: #e5e7eb; cursor: pointer; font-family: inherit; font-size: 13px; }
.dc-fleet-row b { flex: 1; text-align: left; }
.dc-fleet-row.on { border-color: var(--dc-gold); }
html.dc #dc-fleet { gap: 10px; }

/* ---------- Weather ---------- */
.dc-wx-top { display: flex; justify-content: space-between; align-items: center; }
.dc-wx-sum { font-size: 12.5px; line-height: 1.5; color: #cbd5e1; }
html.dc #dc-wx-left > .dc-w1 > h2 { display: none; }
html.dc #dc-wx-left > .dc-w1 { padding: 2px 0 4px; }
html.dc #dc-wx-left #weather-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
html.dc #dc-wx-left > .dc-w2 { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow-y: auto; }
html.dc #dc-wx-left .card-head-row { display: none; }
html.dc #dc-wx-left #view-map-btn { display: none; }
html.dc #dc-wx-left .station-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
html.dc #dc-wx-left .station-table th { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--dc-sub); font-weight: 800; padding: 6px 4px; border-bottom: 1px solid var(--dc-line); }
html.dc #dc-wx-left .station-table th:first-child, html.dc #dc-wx-left .station-table td:first-child { text-align: left; width: 52%; }
html.dc #dc-wx-left .station-table td { padding: 10px 4px; border-bottom: 1px solid var(--dc-line2); vertical-align: middle; }
html.dc #dc-wx-left .station-table td:nth-child(2), html.dc #dc-wx-left .station-table th:nth-child(2) { text-align: center; width: 18%; }
html.dc #dc-wx-left .station-table td:nth-child(3), html.dc #dc-wx-left .station-table th:nth-child(3) { text-align: center; }
.dc-st-l1 { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.dc-st-nm { font-weight: 600; }
.dc-st-home { font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--dc-gold); border: 1px solid var(--dc-gold); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.dc-st-l2 { font-size: 12px; color: var(--dc-sub); margin-top: 3px; font-weight: 400; }
html.dc #dc-wx-left #station-see-all-btn { margin-top: 10px; align-self: flex-start; }
.dc-notice { border-radius: 10px; padding: 9px 12px; font-size: 12.5px; border: 1px solid; }
.dc-notice.y { background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.45); color: var(--dc-y); }
.dc-notice.r { background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.5); color: var(--dc-r); }
.dc-quick { margin-top: auto; display: flex; gap: 6px; }
.dc-quick .dc-btn { flex: 1; padding: 0 6px; }
html.dc #dc-wx-right > .card { padding: 16px; }
html.dc #dc-wx-right > .card + .card { padding-top: 0; flex: 1; overflow-y: auto; }
html.dc #dc-wx-right .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html.dc #dc-wx-right .stat { background: var(--dc-raised); border: 1px solid var(--dc-raised-b); border-radius: 10px; padding: 10px; }
html.dc #dc-wx-right .stat .k { font-size: 12px; color: var(--dc-sub); }
html.dc #dc-wx-right .stat .v { font-size: 14px; font-weight: 700; }
html.dc #dc-wx-right .haz-tabs { border-bottom: 1px solid var(--dc-line); margin-bottom: 10px; }
/* the station card floats on the map (matches the mock-up) */
html.dc.map-card #station-modal { align-items: center; justify-content: center; padding: 20px; }
html.dc.map-card #station-modal .modal-panel { position: relative; left: auto; top: auto; width: 400px; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); overflow-y: auto; border-color: var(--dc-y); background: var(--dc-panel); border-radius: 14px; }

/* ---------- Med crew ---------- */
html.dc #dc-med-left { gap: 14px; }
html.dc #dc-med-right { padding: 22px; }
html.dc #dc-med-right > .card { display: flex; flex-direction: column; gap: 14px; }
html.dc #dc-med-right > .card > .field { border: 1px solid var(--dc-gold); border-radius: 10px; background: var(--dc-raised); padding: 14px 18px; }
html.dc #dc-med-right > .card > .field label { color: var(--dc-gold); font-size: 11px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; }
html.dc #dc-med-right #med-safety-topic { background: none !important; border: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; font-size: 20px; font-weight: 800; }
html.dc #dc-med-right > .card > .field { min-height: 0; height: auto; }
html.dc #dc-med-right .card-head-row { display: flex; justify-content: space-between; align-items: center; }
html.dc #dc-med-right .card-head-row h2 { font-size: 0; margin: 0; }
html.dc #dc-med-right .card-head-row h2::after { content: 'Checklist'; font-size: 11px; letter-spacing: .9px; text-transform: uppercase; color: var(--dc-sub); font-weight: 800; }
html.dc #dc-med-right .med-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html.dc #dc-med-right .med-check-row { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; margin: 0; background: var(--dc-raised); border: 1px solid var(--dc-raised-b); border-radius: 8px; cursor: pointer; }
html.dc #dc-med-right .med-check-row label { margin: 0; flex: 1; font-size: 13.5px; color: #e5e7eb; cursor: pointer; }
html.dc #dc-med-right .med-check-row input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 18px !important; height: 18px !important; min-height: 0 !important; min-width: 18px; border-radius: 5px; border: 1.5px solid var(--dc-btn-b); background: transparent !important; padding: 0; margin: 0; position: relative; flex: none; }
html.dc #dc-med-right .med-check-row input[type=checkbox]:checked { background: var(--dc-g) !important; border-color: var(--dc-g); }
html.dc #dc-med-right .med-check-row input[type=checkbox]:checked::after { content: '\2713'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #052e16; font-size: 12px; font-weight: 900; }
.dc-person { display: flex; align-items: center; gap: 10px; }
.dc-av { width: 30px; height: 30px; border-radius: 50%; background: var(--dc-raised-b); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex: none; }

/* ---------- Review / settings / history / admin ---------- */
html.dc .dc-review { width: 960px; margin: 0 auto !important; }
html.dc .dc-set { width: 1040px; }
html.dc .dc-set .desk-subnav { display: flex; flex-direction: row; gap: 22px; padding: 0; border: 0; border-bottom: 1px solid var(--dc-line); background: none; flex: none; width: auto; overflow: visible; margin-top: -4px; }
html.dc .dc-set .desk-subnav .desk-subnav-title, html.dc .dc-set .desk-subnav .desk-subnav-sep { display: none; }
html.dc .dc-set .desk-subnav button { height: auto; padding: 8px 0; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--dc-sub); font-weight: 700; font-size: 12.5px; }
html.dc .dc-set .desk-subnav button.on { color: var(--dc-gold); border-bottom-color: var(--dc-gold); background: none; }
html.dc .dc-set-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; overflow-y: auto; min-height: 0; }
html.dc .dc-set-body > .card { background: var(--dc-raised); border: 1px solid var(--dc-raised-b); border-radius: 12px; padding: 16px; margin: 0; }
html.dc #dc-set-settings-account .dc-set-body { grid-template-columns: minmax(0, 560px); }
html.dc #dc-set-history .dc-set-body { grid-template-columns: minmax(0, 1fr); }

/* ---------- Dashboard ---------- */
html.dc #screen-dashboard > .scroll { display: block; }
html.dc #dash-root { height: 100%; }
html.dc .dash { height: 100%; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 380px; grid-template-rows: auto minmax(0,1fr); align-items: stretch; }
html.dc .dash .card { background: var(--dc-panel); border: 1px solid var(--dc-line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; overflow-y: auto; }
html.dc .dash-hero { border-color: var(--dc-gold) !important; display: block !important; }
html.dc .dash-side { grid-row: 1 / span 2; min-height: 0; }
html.dc .dash-side .card:last-child { flex: 1; }
html.dc .dash .dash-btns { margin-top: auto; padding-top: 14px; }

html.dc.on-weather .desk-map .leaflet-bottom.leaflet-right { right: 400px; }

html.dc .mob-nav-submit { font-size: 0 !important; }
html.dc .mob-nav-submit::after { content: 'Submit brief'; font-size: 12.5px; }
html.dc #review-content { display: flex; flex-direction: column; gap: 22px; }
html.dc .dc-review .card + .card, html.dc .dc-review .card { margin: 0; }

html.dc #dc-fleet { flex: 0 1 340px; min-width: 230px; width: auto; }
html.dc.desktop .screen > .scroll { flex-wrap: nowrap; }
html.dc.desktop #stage-aircraft-scroll { justify-content: flex-start; }
html.dc #dc-wx-chip[hidden] + .mob-nav-submit { margin-left: auto; }

.dc-stn-head { display: flex; align-items: center; justify-content: space-between; }
.dc-gear { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--dc-line, #2a3556); background: transparent; color: var(--dc-sub); cursor: pointer; padding: 0; }
.dc-gear:hover { color: var(--dc-y); border-color: var(--dc-y); }
.dc-modal-bg { position: fixed; inset: 0; z-index: 3000; background: rgba(5,9,20,.6); display: flex; align-items: center; justify-content: center; padding: 20px; }
.dc-modal-box { width: 480px; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); overflow-y: auto; background: rgba(23,32,56,.99); border: 1px solid var(--dc-y); border-radius: 14px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.dc-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dc-modal-head h2 { margin: 0; font-size: 18px; }
.dc-modal-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #2a3556; background: transparent; color: inherit; font-size: 20px; cursor: pointer; }
.dc-modal-box #stations-collapse-body { display: block !important; }