/* ============================================================================ FLIGHT DECK — the IC web redesign (Direction A + Direction C's weather panel) Plan: docs/redesign-flight-deck-plan.md Renderings: see the plan's artifact link. PRIME DIRECTIVE: this file changes how screens LOOK, never what they DO. No id, handler, route or query is touched by anything in here. Everything is gated on `body.fd`, so removing one class on restores the previous look exactly — that is the rollback, and it is why every rule below is scoped rather than editing the base stylesheet in place. COLOR RULE: only existing custom properties, never a hex literal. That is what makes both themes work without a second set of rules — light mode redefines the same tokens. If a shade is missing, add a token for BOTH themes rather than hardcoding here. ========================================================================== */ /* ── Primitives ────────────────────────────────────────────────────────────── Four shapes carry the whole redesign: a bounded panel, a row inside it, an instrument strip, and a caps label. Lifted from the approved mockup. */ body.fd .fd-panel { border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-surface); overflow: hidden; } body.fd .fd-panel + .fd-panel { margin-top: 12px; } body.fd .fd-panel-head { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--border-subtle); } body.fd .fd-panel-head .fd-spacer { flex: 1; } /* A link out of a panel header. Small, uppercase, accent — the same affordance in every panel so "there is more of this elsewhere" reads consistently. */ body.fd .fd-panel-link { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; color: var(--accent-primary); cursor: pointer; text-decoration: none; white-space: nowrap; } body.fd .fd-panel-link:hover { text-decoration: underline; } body.fd .fd-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border-subtle); font-size: 13px; color: var(--text-primary); } body.fd .fd-panel-head + .fd-row, body.fd .fd-row:first-child { border-top: 0; } body.fd .fd-row .fd-spacer { flex: 1; } body.fd .fd-row-meta { font-size: 12.5px; color: var(--text-secondary); } body.fd .fd-cap { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); } /* Numbers are instruments: one weight, tabular so columns align, Space Grotesk because that is already the app's numeral face. */ body.fd .fd-num { font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; font-weight: 700; } /* ── Move 5: kill dead weight ────────────────────────────────────────────── */ /* The paper-plane watermark. It sat behind every screen and read as decoration on the screens that had least content — exactly where it hurt most. */ body.fd .app-backdrop { display: none; } /* Page headers: the topbar already names the screen, then a Back row, then a 22px title repeating the same words, then a subtitle — ~120px before any data. Compressed to one line; the title stays for orientation, the subtitle rides beside it instead of under it. */ body.fd .page-header { padding: 12px 28px; background: transparent; border-bottom: 1px solid var(--border-subtle); } body.fd .page-title { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 0; } body.fd .page-sub { font-size: 12px; color: var(--text-muted); } body.fd .back-header { padding: 6px 20px 0; } body.fd .back-header button { padding: 4px 8px; font-size: 12.5px; } /* Section labels stop shouting into empty space; panels carry their own titles. */ body.fd .section-label { margin-top: 18px; } /* ── Move 3: stat cards → one instrument strip ───────────────────────────── */ body.fd .stats-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-surface); overflow: hidden; margin-bottom: 0; } body.fd .stats-grid-4 > .stat-card { display: flex; align-items: baseline; gap: 9px; padding: 11px 16px; background: transparent; border: 0; border-left: 1px solid var(--border-subtle); border-radius: 0; min-height: 0; text-align: left; } body.fd .stats-grid-4 > .stat-card:first-child { border-left: 0; } body.fd .stats-grid-4 > .stat-card:hover { background: var(--bg-elevated); } body.fd .stats-grid-4 .stat-num { font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; font-size: 21px; font-weight: 700; line-height: 1.1; margin: 0; } body.fd .stats-grid-4 .stat-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); margin: 0; } /* The skeletons load into the same strip, so they must not reintroduce cards. */ body.fd .stats-grid-4 > .skel { height: 44px !important; border-radius: 0 !important; border-left: 1px solid var(--border-subtle); } body.fd .stats-grid-4 > .skel:first-child { border-left: 0; } /* ── Move 1: the two-region work surface ─────────────────────────────────── */ body.fd .fd-grid { display: grid; grid-template-columns: 1fr 336px; gap: 14px 16px; align-items: start; margin-top: 14px; } body.fd .fd-main > * + * { margin-top: 12px; } body.fd .fd-rail > * + * { margin-top: 12px; } /* Under 1100px the rail has no room to be a rail: one column, reference below the decision stream, which is the same reading order the page already had. */ @media (max-width: 1100px) { body.fd .fd-grid { grid-template-columns: 1fr; } } /* The dashboard greeting becomes a working header: who you are, what is waiting, and the actions — on one line instead of a 20px title over a 12px subtitle. */ body.fd .fd-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 28px; background: transparent; border-bottom: 1px solid var(--border-subtle); } body.fd .fd-head-title { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; color: var(--text-primary); } body.fd .fd-head-status { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); } body.fd .fd-head .fd-spacer { flex: 1; } /* Quick actions: from three 88px icon-over-label tiles to a toolbar. The tiles were the single most template-looking element on the screen. */ body.fd .fd-head .actions-row { display: flex; gap: 8px; grid-template-columns: none; } body.fd .fd-head .action-btn { flex-direction: row; gap: 7px; min-height: 0; padding: 7px 13px; font-size: 12.5px; border-radius: 8px; white-space: nowrap; } body.fd .fd-head .action-btn .btn-icon { margin: 0; } body.fd .fd-head .action-btn .btn-icon i, body.fd .fd-head .action-btn .btn-icon svg { width: 14px !important; height: 14px !important; } /* Move 5: indigo is navigation identity + exactly one primary action per screen. */ body.fd .fd-head .action-btn.orange { background: var(--accent-nav); border-color: var(--accent-nav); color: #fff; } body.fd .fd-head .action-btn.orange .btn-icon i, body.fd .fd-head .action-btn.orange .btn-icon svg { color: #fff !important; stroke: #fff !important; } /* ── Move 2: banners → rows ──────────────────────────────────────────────── */ /* The "needs a decision" panel. Its rows come from three different renderers (hold banner, confirm-flights, sign-off alert), so the panel styles whatever lands inside it rather than requiring one shape. */ body.fd .fd-decisions > .fd-row:empty { display: none; } body.fd .fd-decisions .fd-avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; background: var(--accent-primary-subtle); color: var(--accent-primary-text); } body.fd .fd-decisions .fd-avatar.warn { background: var(--color-warning-subtle); color: var(--color-warning-text); } /* Compact buttons for inside a row. */ body.fd .fd-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; font-family: inherit; border-radius: 8px; padding: 6px 12px; cursor: pointer; border: 1px solid var(--border-default); background: var(--bg-elevated); color: var(--text-primary); white-space: nowrap; } body.fd .fd-btn:hover { border-color: var(--border-strong); } body.fd .fd-btn.primary { background: var(--accent-nav); border-color: var(--accent-nav); color: #fff; } /* ── Move 4: the weather panel (Direction C) ─────────────────────────────── */ body.fd .fd-wx { margin-top: 0; } body.fd .fd-wx-cat { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: 0.01em; line-height: 1; } body.fd .fd-wx-top { display: flex; align-items: center; gap: 14px; padding: 13px 14px; } body.fd .fd-wx-name { font-size: 13.5px; font-weight: 650; color: var(--text-primary); } body.fd .fd-wx-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; } body.fd .fd-wx-grid { display: grid; grid-template-columns: 1fr 1fr; } body.fd .fd-wx-grid > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; font-size: 12.5px; border-top: 1px solid var(--border-subtle); white-space: nowrap; } body.fd .fd-wx-grid > div:nth-child(2n) { border-left: 1px solid var(--border-subtle); } body.fd .fd-wx-grid .k { color: var(--text-muted); } body.fd .fd-wx-grid .v { font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--text-primary); } /* Raw METAR, shown not hidden — a pilot reads it faster than the decode. */ body.fd .fd-wx-raw { padding: 8px 14px; border-top: 1px solid var(--border-subtle); background: var(--bg-elevated); font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 10.5px; line-height: 1.5; color: var(--text-secondary); word-break: break-all; } /* Category colors come from the status tokens, so they carry meaning and flip with the theme. UNKN stays neutral — a report we could not read must not wear a color that claims anything about the weather. */ body.fd .fd-wx-cat.VFR { color: var(--color-success); } body.fd .fd-wx-cat.MVFR { color: var(--accent-primary); } body.fd .fd-wx-cat.IFR { color: var(--color-danger); } body.fd .fd-wx-cat.LIFR { color: var(--risk-high); } body.fd .fd-wx-cat.UNKN { color: var(--text-muted); } body.fd .fd-pill { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; border-radius: 5px; padding: 2px 7px; white-space: nowrap; } body.fd .fd-pill.ok { background: var(--color-success-subtle); color: var(--color-success-text); } body.fd .fd-pill.warn { background: var(--color-warning-subtle); color: var(--color-warning-text); } body.fd .fd-pill.info { background: var(--accent-primary-subtle); color: var(--accent-primary-text); } /* ── Rail contents ───────────────────────────────────────────────────────── */ /* The student mini-cards in the rail: one per row, not a 2-up grid of tiles. */ body.fd .fd-rail #cfi-students-grid { display: block; } body.fd .fd-rail #cfi-students-grid > * + * { margin-top: 6px; } /* Resources: a 2-up grid inside a 336px rail wraps every label onto two lines. One column in the rail, and the tiles become rows to match everything else. */ body.fd .fd-rail #cfi-home-resources > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 6px !important; } /* Sections in the main column that render their own cards (upcoming flights, pending assessments, activity) keep their renderers — they only need the section label to sit tighter now that panels carry their own titles. */ body.fd .fd-main > div > .section-label:first-child { margin-top: 0; } body.fd .fd-main > .section-label:first-of-type { margin-top: 4px; } /* ── Step 2: the weather panel, everywhere weather appears ───────────────── */ /* My Base hero. The category is the one loud element — it means something. Everything around it is neutral surface, so this reads as the same instrument as the dashboard's weather panel rather than a differently-styled card that happens to show weather. */ body.fd .fd-mb-hero-body { display: flex; align-items: center; gap: 22px; padding: 16px 18px; flex-wrap: wrap; } body.fd .fd-mb-hero-body .fd-spacer { flex: 1; } body.fd .fd-mb-icao { font-family: 'Space Grotesk', sans-serif; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text-primary); } body.fd .fd-mb-name { font-size: 13.5px; color: var(--text-secondary); margin-top: 5px; } body.fd .fd-mb-city { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; } body.fd .fd-mb-cat .fd-wx-cat { font-size: 40px; } body.fd .fd-mb-catsub { font-size: 12px; color: var(--text-muted); margin-top: 5px; } body.fd .fd-mb-compass { flex-shrink: 0; } /* Four readouts across, not two, now that the panel spans the content width. */ body.fd .fd-mb-grid { grid-template-columns: repeat(4, 1fr); } body.fd .fd-mb-grid > div { border-top: 1px solid var(--border-subtle); } body.fd .fd-mb-grid > div + div { border-left: 1px solid var(--border-subtle); } /* My Base is a reference screen, not a reading column: let it use the desktop width it already has, the same way the dashboards do. Finding 02 on this screen. */ @media (min-width: 1024px) { body.fd #my-base .scroll-content, body.fd #my-base .sub-content { max-width: none; } } /* The student dashboard's weather card is the same component in a narrower column; nothing extra is needed beyond letting it sit flush like the other cards. */ body.fd #student-wx-card-wrap .fd-wx { margin-bottom: 4px; } /* ── Step 3: list screens ──────────────────────────────────────────────────── A list with one row in it should look early, not broken. Column headers, real rows and a count footer give the list a shape that holds at any length — which is the whole fix for finding 04. */ body.fd .fd-list { overflow: hidden; } body.fd .fd-lrow { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 1.6fr) 110px 160px 150px; align-items: center; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--border-subtle); font-size: 13px; cursor: pointer; min-height: 44px; } body.fd .fd-lrow:hover { background: var(--bg-elevated); } body.fd .fd-lhead { border-top: 0; cursor: default; padding-top: 8px; padding-bottom: 8px; background: var(--bg-elevated); } body.fd .fd-lhead:hover { background: var(--bg-elevated); } body.fd .fd-lhead .fd-lcell { font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); } body.fd .fd-lcell { display: flex; align-items: center; gap: 9px; min-width: 0; } body.fd .fd-lname { font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.fd .fd-lcell-syl { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 44px; } body.fd .fd-lmuted { color: var(--text-muted); } body.fd .fd-lnum { font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; color: var(--text-secondary); } body.fd .fd-lcell-act { justify-content: flex-end; } body.fd .fd-lbar { flex: 1; height: 4px; border-radius: 2px; background: var(--bg-elevated); overflow: hidden; min-width: 60px; } body.fd .fd-lbar i { display: block; height: 100%; background: var(--accent-primary); border-radius: 2px; } body.fd .fd-lpct { font-size: 12px; flex-shrink: 0; } /* The footer states the count, so an early roster reads as "1 of 1", not as a gap. */ body.fd .fd-lfoot { padding: 9px 16px; border-top: 1px solid var(--border-subtle); background: var(--bg-elevated); font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--text-muted); } /* Narrow screens drop the middle columns rather than squeezing all five. */ @media (max-width: 900px) { body.fd .fd-lrow { grid-template-columns: 1.4fr 110px 120px; } body.fd .fd-lcell-syl, body.fd .fd-lcell-prog { display: none; } } /* These list screens are reference surfaces too — give them the desktop width. Note these screens use .sub-content, not .scroll-content; the base 900px cap is set on both, so overriding only one silently leaves the column narrow. */ @media (min-width: 1024px) { body.fd #cfi-students .scroll-content, body.fd #cfi-students .sub-content, body.fd #cfi-assessments .scroll-content, body.fd #cfi-assessments .sub-content, body.fd #cfi-assessment-history .scroll-content, body.fd #cfi-assessment-history .sub-content { max-width: none; } } /* Sign-off queue: the collapsed header is a row. The card still expands in place — only its resting height changed, from ~88px of mostly padding to a 44px row. */ body.fd .fd-qcard { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-left: 3px solid var(--border-default); border-radius: 8px; margin-bottom: 6px; overflow: hidden; } body.fd .fd-qrow { display: grid; grid-template-columns: 26px minmax(130px, 0.9fr) minmax(180px, 2.4fr) 90px 62px 14px; align-items: center; gap: 12px; padding: 8px 14px; cursor: pointer; min-height: 44px; font-size: 12.5px; } body.fd .fd-qrow:hover { background: var(--bg-elevated); } body.fd .fd-qname { font-size: 13px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.fd .fd-qdetail, body.fd .fd-qwhen { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.fd .fd-qdetail b { color: var(--accent-primary-text); font-weight: 500; } body.fd .fd-qwhen { font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; } body.fd .fd-qscore { justify-self: end; font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; } body.fd .fd-qchev { color: var(--text-muted); text-align: right; } @media (max-width: 1100px) { body.fd .fd-qrow { grid-template-columns: 26px minmax(110px, 1fr) minmax(120px, 1.6fr) 62px 14px; } body.fd .fd-qwhen { display: none; } } /* ── Step 4: student dashboard ─────────────────────────────────────────────── The student's quick actions had the same problem as the instructor's — four 88px icon tiles, the fourth wrapping onto a row of its own. A toolbar instead, sitting above the work rather than occupying a third of the first screen. */ body.fd .fd-actionbar { margin: 4px 0 4px; } body.fd .fd-actionbar .actions-row { display: flex; gap: 8px; grid-template-columns: none; flex-wrap: wrap; } body.fd .fd-actionbar .action-btn { flex-direction: row; gap: 7px; min-height: 0; padding: 8px 14px; font-size: 12.5px; border-radius: 8px; white-space: nowrap; } body.fd .fd-actionbar .action-btn .btn-icon { margin: 0; } body.fd .fd-actionbar .action-btn .btn-icon i, body.fd .fd-actionbar .action-btn .btn-icon svg { width: 14px !important; height: 14px !important; } body.fd .fd-actionbar .action-btn.orange { background: var(--accent-nav); border-color: var(--accent-nav); color: #fff; } body.fd .fd-actionbar .action-btn.orange .btn-icon i, body.fd .fd-actionbar .action-btn.orange .btn-icon svg { color: #fff !important; stroke: #fff !important; } /* The student's own dashboard gets the desktop width too. */ @media (min-width: 1024px) { body.fd #home-student .scroll-content, body.fd #home-student .sub-content { max-width: none; } } /* In a 336px rail the weather readouts stack two-up as designed; the section labels inside the main column no longer need their big top margin now that the column is a stack of bounded blocks. */ body.fd .fd-main > .section-label:first-child { margin-top: 0; } /* ── Step 5: detail screens ────────────────────────────────────────────────── A three-up variant of the instrument strip, for screens that summarise with three numbers instead of four. Same shape, same rules. */ body.fd .fd-strip3 { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-surface); overflow: hidden; margin-bottom: 4px; } body.fd .fd-strip-cell { display: flex; align-items: baseline; gap: 9px; padding: 11px 16px; border-left: 1px solid var(--border-subtle); } body.fd .fd-strip-cell:first-child { border-left: 0; } body.fd .fd-strip-num { font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; font-size: 21px; font-weight: 700; line-height: 1.1; color: var(--text-primary); } body.fd .fd-strip-cap { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); } /* The remaining IC detail screens are working surfaces, not reading columns. Both .scroll-content and .sub-content carry the 900px cap, so both are named. */ @media (min-width: 1024px) { body.fd #cfi-log .scroll-content, body.fd #cfi-log .sub-content, body.fd #schedule-main .scroll-content, body.fd #schedule-main .sub-content, body.fd #lesson-plans .scroll-content, body.fd #lesson-plans .sub-content, body.fd #cfi-endorsements .scroll-content, body.fd #cfi-endorsements .sub-content, body.fd #student-progress .scroll-content, body.fd #student-progress .sub-content, body.fd #cfi-student-detail .scroll-content, body.fd #cfi-student-detail .sub-content { max-width: none; } } /* ── Step 6: sweep ─────────────────────────────────────────────────────────── Every screen not individually handled above still sat in a 900px column on a 1440px monitor. Rather than enumerate the rest, widen the default column and keep the fully-uncapped treatment for the data screens named earlier. 1200px rather than none: these remaining screens are forms and prose (invite codes, reports, resources, billing, W&B), and a text field or a paragraph run edge-to-edge on a wide monitor is worse than one that is slightly narrow. Data tables want the width; sentences do not. */ @media (min-width: 1024px) { body.fd .scroll-content, body.fd .sub-content { max-width: 1200px; } }