/* =========================================================================== Marine Surveyors Pro — APP LAYOUT Loaded AFTER styles.css and overrides only arrangement. Kept as its own file rather than folded into styles.css so the whole layout can be taken back out by deleting one — see the git history for the commit that added it. This file changes where things sit. It does not change what anything says, what any control does, or which sections exist. Every id and class the app binds to is untouched — the section buttons, the save button, the editor panes are all the originals, moved. Deliberate constraints, each one guarding a bug already documented in the main stylesheet or found while assessing this change: · No overflow-x on — it turns body into a scroll container and freezes every position:sticky element (see styles.css:36-56). · The only transformed element is the rail itself. A transform on an ancestor of a fixed element becomes its containing block, which would silently relocate modals, toasts and the report overlay. · The whole shell lives inside #app-root, which the print stylesheet already hides, so nothing new can print over a report. =========================================================================== */ :root { --ms-rail-w: 288px; --ms-foot-h: 64px; --ms-rail-bg: #0D1B2A; /* the app's own --navy */ --ms-rail-bg-2: #08213b; --ms-rail-line: rgba(255,255,255,.10); --ms-rail-ink: #DCE7F1; --ms-rail-ink-dim: #93A9BE; --ms-ok: #35A853; } /* ---- shell ------------------------------------------------------------- */ .ms-shell { height: 100dvh; display: grid; grid-template-columns: var(--ms-rail-w) minmax(0, 1fr); } .ms-rail { height: 100dvh; min-height: 0; z-index: 45; background: linear-gradient(180deg, var(--ms-rail-bg), var(--ms-rail-bg-2)); color: var(--ms-rail-ink); display: flex; flex-direction: column; border-right: 1px solid var(--ms-rail-line); } .ms-rail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .ms-brand { flex: 0 0 auto; height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--ms-rail-line); } .ms-brand-logo { width: 30px; height: 30px; border-radius: 6px; } .ms-brand-copy { display: flex; flex-direction: column; line-height: 1.1; letter-spacing: .04em; } .ms-brand-copy strong { font-size: 13px; color: #fff; } .ms-brand-copy span { font-size: 10.5px; color: var(--ms-rail-ink-dim); } .ms-menu { display: none; background: none; border: 0; color: #fff; font-size: 20px; padding: 4px 6px; cursor: pointer; } .ms-sync { flex: 0 0 auto; height: 38px; padding: 0 16px; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ms-rail-ink-dim); border-bottom: 1px solid var(--ms-rail-line); } .ms-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ms-ok); box-shadow: 0 0 0 3px rgba(53,168,83,.16); flex: 0 0 auto; } /* Amber while there is unsaved work — the dot should never say "saved" when the line beside it says otherwise. */ .ms-dot.is-dirty { background: var(--fair); box-shadow: 0 0 0 3px rgba(230,160,40,.16); } /* ---- vessel card ------------------------------------------------------- */ .ms-vcard { margin: 12px 12px 6px; background: #fff; color: var(--ink); border-radius: 8px; overflow: hidden; box-shadow: 0 3px 12px rgba(0,0,0,.22); } .ms-vhero { height: 104px; background: var(--steel-pale) center/cover no-repeat; display: flex; align-items: center; justify-content: center; } .ms-vhero span { font-size: 11px; color: var(--ink-soft); } .ms-vbody { padding: 10px 12px 12px; } .ms-vtitle { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--navy); } .ms-vtype { font-size: 11px; color: var(--ink-soft); margin: 3px 0 9px; } .ms-vbar { height: 5px; border-radius: 4px; background: #E6E9ED; overflow: hidden; } .ms-vbar > span { display: block; height: 100%; background: var(--ms-ok); border-radius: 4px; } .ms-vprog { display: flex; justify-content: space-between; font-size: 11px; margin-top: 6px; color: var(--ink-soft); } .ms-vprog b { color: var(--navy); } /* ---- section list ------------------------------------------------------ */ .ms-rail-head { padding: 12px 16px 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ms-rail-ink-dim); } /* The strip is a vertical rail here. Overrides the sticky horizontal bar in styles.css — same buttons, same handlers. */ .ms-rail .section-tabs { position: static; display: block; overflow: visible; background: none; border: 0; padding: 0 8px 4px; margin: 0; box-shadow: none; white-space: normal; } .ms-rail .section-tabs button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 14px; align-items: center; gap: 8px; width: 100%; text-align: left; margin: 0 0 2px; padding: 9px 8px; background: none; border: 0; border-radius: 7px; color: var(--ms-rail-ink); font-size: 12.5px; font-weight: 500; cursor: pointer; min-height: 38px; } .ms-rail .section-tabs button:hover { background: rgba(255,255,255,.06); } .ms-rail .section-tabs button.active { background: var(--steel); color: #fff; } .ms-rail .section-tabs button.flagged { border: 0; box-shadow: inset 2px 0 0 var(--fair); } .ms-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.12); font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 10.5px; color: #fff; } .ms-rail .section-tabs button.active .ms-num { background: rgba(255,255,255,.26); } .ms-num-x { background: none; font-size: 14px; } .ms-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-rail .section-tabs .count { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: 10.5px; color: var(--ms-rail-ink-dim); background: none; padding: 0; } .ms-rail .section-tabs button.active .count { color: rgba(255,255,255,.85); } .ms-state { width: 12px; height: 12px; border-radius: 50%; } .ms-state.part { box-shadow: inset 0 0 0 1.5px var(--ms-rail-ink-dim); } .ms-state.done { background: var(--ms-ok); box-shadow: none; position: relative; } .ms-state.done::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 9px; display: flex; align-items: center; justify-content: center; } /* ---- rail nav + footer ------------------------------------------------- */ .ms-rail-nav { padding: 10px 8px; margin-top: 6px; border-top: 1px solid var(--ms-rail-line); } .ms-rail-nav button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 7px; padding: 9px 10px; color: var(--ms-rail-ink); font-size: 12.5px; cursor: pointer; } .ms-rail-nav button:hover { background: rgba(255,255,255,.06); } .ms-rail-nav button.active { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; } .ms-rail-foot { flex: 0 0 auto; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ms-rail-line); font-size: 11.5px; color: var(--ms-rail-ink-dim); } .ms-rail-foot .who { display: block; } .ms-rail-foot .who b { color: #fff; display: block; font-size: 12.5px; } /* Sign out. styles.css only styles .linklike under .app-header, which this shell hides — unstyled, the button fell back to default browser chrome: a white boxed button sitting on the navy rail. One complete rule instead of patches. */ .ms-rail-foot .linklike { background: none; border: 0; padding: 0; margin: 0; color: #7FB3DC; font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; } .ms-rail-foot .linklike:hover { color: #fff; } .ms-legal { margin-top: 6px; display: flex; gap: 12px; } .ms-legal a { color: var(--ms-rail-ink-dim); font-size: 11px; text-decoration: none; } .ms-legal a:hover { color: #fff; } /* ---- workspace --------------------------------------------------------- */ .ms-workspace { min-width: 0; height: 100dvh; display: flex; flex-direction: column; } .ms-workspace > .main { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-width: none; margin: 0; padding: 18px 22px 28px; -webkit-overflow-scrolling: touch; } /* The editor's own toolbar becomes the workspace header — same buttons, pinned. The background must be a REAL color: var(--card) here was an undefined token, which computes to transparent, and a transparent sticky header lets the page scroll visibly through it. --bg is the app's actual page ground. */ .ms-shell.is-editor .editor-top { position: sticky; top: -18px; z-index: 20; margin: -18px -22px 16px; padding: 12px 22px 10px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 4px 10px -6px rgba(15, 31, 52, .18); } /* Sections moved to the rail, so the body is one column with the reference panes on the right. */ .ms-shell.is-editor .editor-layout { grid-template-columns: minmax(0, 1fr) 300px; } .ms-foot { flex: 0 0 auto; height: var(--ms-foot-h); display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; align-items: center; padding: 0 22px calc(0px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); } .ms-foot .btn { height: 42px; justify-content: center; } /* The app header is replaced by the rail. */ .ms-shell .app-header, .ms-shell .app-footer-legal { display: none; } .ms-backdrop { display: none; } .ms-menu-float { display: none; } /* The section list moved to the rail, so the progress and known-issues panes no longer need to jump above the checklist on narrow screens — they read better after the work, which is what the reference layout does. */ .ms-shell.is-editor .sidebar { order: 0; } /* ---- tablet portrait and phones: rail slides over ---------------------- */ @media (max-width: 900px) { .ms-shell { display: block; height: auto; } .ms-rail { position: fixed; left: 0; top: 0; bottom: 0; width: min(86vw, var(--ms-rail-w)); transform: translateX(-104%); transition: transform .22s ease; box-shadow: 18px 0 45px rgba(0,0,0,.28); } .ms-rail.open { transform: translateX(0); } .ms-menu { display: block; } .ms-backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(4,16,28,.45); opacity: 0; pointer-events: none; transition: opacity .2s ease; } body.ms-nav-open .ms-backdrop { opacity: 1; pointer-events: auto; } /* No overflow on — that freezes every sticky element (styles.css:36-56). */ body.ms-nav-open .ms-workspace { overflow: hidden; } .ms-workspace { height: auto; display: block; } .ms-workspace > .main { overflow: visible; padding: 14px 14px 24px; } .ms-shell.is-editor .editor-top { top: 0; margin: -14px -14px 14px; padding: 10px 14px; } .ms-shell.is-editor .editor-layout { grid-template-columns: 1fr; } /* The rail's own opener is off-screen with the rail, so the workspace carries one. Sticky rather than fixed: a fixed element would need adding to the print hide-list, and this one is inside #app-root either way. */ .ms-menu-float { display: inline-flex; align-items: center; gap: 7px; position: sticky; top: 0; z-index: 25; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: var(--ms-rail-bg); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 11px 14px calc(11px + env(safe-area-inset-top, 0px)); cursor: pointer; } .ms-foot { position: sticky; bottom: 0; z-index: 30; height: auto; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); } .ms-foot .btn { height: 46px; min-height: 46px; line-height: 1.1; white-space: nowrap; } } @media (max-width: 620px) { .ms-foot { grid-template-columns: .8fr .8fr 1.4fr; gap: 6px; padding: 0 10px; } .ms-foot .btn { height: 44px; font-size: 11px; padding: 0 8px; } } /* ---- print: the shell is inside #app-root, which styles.css already hides. Belt and braces so a new sticky element can never reach paper. ---------- */ @media print { .ms-shell, .ms-rail, .ms-foot, .ms-backdrop { display: none !important; } }