/* ============ AUTH GATE ============ The sign-in screen, and the two small status strips the signed-in app carries. The gate is part of the app shell rather than a separate page, so the service worker caches one document and an offline launch reaches a working screen — a login page on its own URL would be a second thing to cache and a second thing to get wrong. VISIBILITY IS DRIVEN BY A CLASS ON , set by the inline boot script before any stylesheet-dependent paint. Three states: .auth-booting — deciding who this is; splash only .auth-locked — nobody signed in; gate only (neither) — signed in; the planner The app is hidden with display:none rather than left underneath the overlay. A pilot's duty log must not be readable, printable or reachable by keyboard behind a translucent panel while the account it belongs to is signed out. */ html.auth-booting .topbar, html.auth-booting .view, html.auth-locked .topbar, html.auth-locked .view, html.auth-booting .modal-backdrop, html.auth-locked .modal-backdrop { display: none !important; } /* And with the bar hidden there is nothing to stand clear of. syncTopbarHeight in js/app.js measures 0 and arrives at the same answer; this is what holds for the frame before it runs, so the sign-in card is never pushed down the screen by a band of headroom for a bar that is not there. */ html.auth-booting body, html.auth-locked body { padding-top: 0; } #authGate { display: none; } html.auth-booting #authGate, html.auth-locked #authGate { display: flex; } #authGate { position: fixed; inset: 0; z-index: 200; align-items: flex-start; justify-content: center; overflow-y: auto; padding: max(24px, env(safe-area-inset-top)) 16px 40px; background: var(--bg); } .auth-card { width: 100%; max-width: 400px; margin: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); /* A little more room at the top than before: the brand is now a 60px mark with a wordmark under it rather than a single 19px line, and the old 26px left it crowded against the card's edge. */ padding: 30px 24px 22px; } /* The brand is a centred lockup — mark above wordmark — rather than a row. Centred while the form below it stays left-aligned, which is deliberate and is the usual arrangement for a sign-in card: the masthead is a single object to be looked at, so it sits on the card's axis, whereas fields and their labels are read in sequence down a left edge and centring them would make every row start in a different place. The footer links are centred for the same reason the brand is. Standing on its own line rather than beside 19px text, the mark can be much larger — at 32px it was sized to sit next to the wordmark, and a stacked lockup with a small mark reads as an accident rather than a decision. */ .auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.2px; text-align: center; margin-bottom: 8px; } /* Height is the only dimension set; width follows from the file's own proportions, because the logo is wider than it is tall and pinning both would squash it. The mark is stored with a transparent background (see tools/make-icons.js) so it sits on the card rather than on a black tile of its own. */ .auth-logo { height: 68px; width: auto; display: block; } /* IN LIGHT THEME THE MARK GETS ITS DARK GROUND BACK, and it is not decoration. The logo is white artwork — a white helicopter, white mountains — drawn on black, and the mark is that artwork with the black lifted off into transparency. On the dark card that is exactly right. On a light card, where --panel is #ffffff, white-on-white leaves nothing visible but the blue river: the logo does not look wrong, it looks absent. The theme follows the operating system unless someone has chosen otherwise, so this is what any pilot whose iPad is in light mode would see, and there is no theme control on the gate for them to escape it with. Restoring the ground rather than recolouring the artwork is the honest fix — a logo shown on the background it was designed for, in a tile that reads as deliberate. */ html[data-theme="light"] .auth-logo { /* A literal, deliberately, where the rest of this file uses tokens. Every token in tokens.css flips with the theme — that is what they are for — and this colour must not: it belongs to the artwork, which is white-on-dark in both themes. Using --bg or --metatheme here would resolve to near-white in light mode and hide the logo all over again, which is the bug this rule exists to fix. */ background: #0f1320; border-radius: 14px; padding: 10px 14px; /* content-box so the padding is added around the 68px of artwork rather than eaten out of it — with border-box the logo would shrink to 48px in light mode and to 68px in dark. */ box-sizing: content-box; } /* Centred to match the lockup above it. `text-wrap: balance` evens the two lines out instead of leaving a long first line over a short orphan — ignored by browsers that do not have it, which simply get the ordinary ragged wrap. */ .auth-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; text-align: center; text-wrap: balance; margin-bottom: 22px; } /* Only one pane is ever in the DOM flow; the rest are display:none. Panes rather than separate cards so the gate never changes size abruptly under the cursor as someone moves between "sign in" and "forgot password". */ .auth-pane { display: none; } .auth-pane.active { display: block; } .auth-pane h2 { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 14px; letter-spacing: .2px; } .auth-field { margin-bottom: 13px; } .auth-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 5px; } .auth-field input { width: 100%; padding: 10px 11px; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font-size: 15px; /* 16px or larger stops iOS Safari zooming the viewport on focus; 15 is the practical floor with the -webkit rule below. */ font-family: inherit; } .auth-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, .18); } .auth-field .auth-hint { font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; } /* The invited address. Shown, not editable — it belongs to the invitation rather than to whoever is at the keyboard, and the server takes it from the token whatever this form posts. Styled to look settled rather than broken: an ordinary field that refuses to type reads as a bug, so this one is visibly a statement of fact instead. */ .auth-field input[readonly] { background: var(--ro); color: var(--rotext); cursor: default; } /* ---- PASSWORD REVEAL ---- The wrapper and button are built by enhancePasswordFields() in auth.js, around every password input on the page. Two shapes have to work: the roomy fields in the gate, and the smaller ones in the account modal's two-column grid — so nothing here assumes a padding or a corner radius, and the button simply fills the height it is given. */ .auth-pw { position: relative; } /* Keeps typed text from running under the button — it scrolls out of view instead of disappearing behind the icon. */ .auth-pw input { padding-right: 36px; } /* Edge ships its own reveal control; two side by side is one too many. */ .auth-pw input::-ms-reveal { display: none; } .auth-pw-toggle { position: absolute; top: 0; bottom: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 36px; padding: 0; background: none; border: none; color: var(--muted); cursor: pointer; } .auth-pw-toggle:hover { color: var(--ink); } /* Inset a little and rounded on all four corners, so one rule looks right against both an 8px and a 6px field without having to match either. */ .auth-pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 6px; color: var(--ink); } /* One icon at a time: the eye means "show", the struck-through eye means "hide". */ .auth-pw-toggle .pw-eye-off, .auth-pw-toggle[aria-pressed="true"] .pw-eye { display: none; } .auth-pw-toggle[aria-pressed="true"] .pw-eye-off { display: block; } .auth-btn { width: 100%; padding: 11px 14px; margin-top: 6px; background: var(--accent2); color: #fff; border: 1px solid var(--accent2); border-radius: 8px; font-size: 14.5px; font-weight: 600; font-family: inherit; cursor: pointer; } .auth-btn:hover { background: var(--accent); } /* The button reports the request rather than the page doing it elsewhere: the pointer is already here, and a form that looks idle after a tap gets tapped again. */ .auth-btn[disabled] { opacity: .6; cursor: default; } .auth-alt { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.7; } .auth-link { background: none; border: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; } .auth-link:hover { color: var(--ink); } /* "Heli-Planner is invite only." Sits under the sign-in form where the "create an account" link used to be, and is styled as a quiet statement rather than an error — nothing has gone wrong, this is simply how accounts are made now. Without it, someone told about the app is left looking for a button that was removed on purpose. */ .auth-note { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.6; } /* "You have been invited to Northern Air." The one line on the invite pane that tells the reader this is a real invitation from someone they know, rather than a link asking a stranger for a password — so it is given the app's foreground colour and a little room, not the muted treatment of a hint. */ .auth-invite-intro { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: var(--ink); } /* Feedback line. One element per pane, recoloured by class, so a pane can never show a success and an error at once. */ .auth-msg { display: none; margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.5; border: 1px solid transparent; } .auth-msg.show { display: block; } .auth-msg.err { background: var(--badbg); border-color: var(--bad); color: var(--negtext); } .auth-msg.ok { background: var(--goodbg); border-color: var(--good); color: var(--ink); } .auth-msg.info { background: var(--panel2); border-color: var(--line); color: var(--muted); } .auth-splash { text-align: center; color: var(--muted); font-size: 13px; padding: 30px 0; } /* ============ SIGNED-IN CHROME ============ */ /* Account button in the toolbar. Shows initials rather than a full address: the toolbar is tight on a phone, and the address is one tap away in the account panel. */ #acctBtn { font-weight: 600; letter-spacing: .3px; } /* Sync status next to the save indicator. Deliberately quiet — it is reassurance, not an alert, and the one state that genuinely needs attention (a conflict was resolved against this device) is the only one that gets a colour. */ #syncState { font-size: 11px; color: var(--muted); white-space: nowrap; } #syncState.warn { color: var(--warn); } #syncState.bad { color: var(--bad); } /* Offline banner. Fixed to the bottom rather than the top: the top is where the tabs and the save state live, and pushing them down mid-flight would move the controls under a pilot's thumb. */ #offlineBar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); background: var(--warnbg); border-top: 1px solid var(--warn); color: var(--ink); font-size: 12px; text-align: center; } html.is-offline #offlineBar { display: block; } @media print { #offlineBar, #authGate { display: none !important; } } /* The account panel reuses .modal / .modal-backdrop from modals.css; only the parts with no equivalent there are defined here. */ .acct-identity { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; margin-bottom: 16px; } .acct-identity .acct-email { font-size: 14px; color: var(--ink); font-weight: 600; word-break: break-all; } .acct-identity .acct-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; } .acct-section { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; } .acct-section h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 0 0 11px; font-weight: 600; }