:root {
    --color-bg: #f4f6f8;
    --color-surface: #ffffff;
    --color-border: #e1e4e8;
    --color-text: #1f2937;
    --color-text-muted: #6b7280;
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-danger: #dc2626;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.5;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- App layout: left sidebar + content ---- */
.app-layout {
    min-height: 100vh;
}
/* The offline/conflict banners sit above .app-layout in the document and
   are hidden by default on most pages (JS toggles them live based on
   navigator.onLine/pending conflicts) - offline.html shows the offline one
   unconditionally as its whole purpose. Either way, when actually visible
   they push .app-layout down by their own height, which the plain 100vh
   above doesn't know about - same class of overflow bug as the mobile
   topbar fix below, just for a banner that can appear on any page rather
   than only at a fixed viewport width. :has() lets this stay a single
   general rule instead of a per-page special case. Doesn't perfectly
   stack if both banners were ever visible at once (rare - would need
   actually being offline and having a queued conflict simultaneously) but
   handles the common single-banner case correctly. */
body:has(#offline-banner:not([hidden])) .app-layout,
body:has(#conflict-banner:not([hidden])) .app-layout {
    min-height: calc(100vh - 36px);
}
body:has(#offline-banner:not([hidden])) .page,
body:has(#conflict-banner:not([hidden])) .page {
    height: calc(100vh - 36px);
}
/* Fixed to the viewport (not just the flex row) so "Add new" stays pinned to
   the bottom of the screen even when the content column scrolls far past it. */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 220px;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.main-content {
    margin-left: 220px;
}
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-nav a {
    padding: 10px 24px;
    color: var(--color-text-muted);
    font-weight: 500;
}
.sidebar-nav a:hover { background: var(--color-bg); text-decoration: none; }
.sidebar-nav a.active {
    color: var(--color-primary);
    background: #eff4ff;
    border-right: 3px solid var(--color-primary);
}

/* Pinned to the bottom of the sidebar regardless of how many nav items are above it */
.sidebar-addnew {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-addnew-label {
    padding: 8px 24px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    font-weight: 600;
}
.sidebar-addnew a {
    padding: 8px 24px 8px 32px;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 500;
}
.sidebar-addnew a:hover { background: var(--color-bg); text-decoration: none; }
.sidebar-addnew a.active {
    color: var(--color-primary);
    background: #eff4ff;
    border-right: 3px solid var(--color-primary);
}

.sidebar-user {
    padding: 12px 24px;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sidebar-user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-user-links {
    display: flex;
    gap: 12px;
}
.sidebar-user-links a {
    font-size: 13px;
    color: var(--color-primary);
}

.sidebar-update-btn {
    margin-top: 12px;
    padding: 10px 24px;
    border-radius: 0;
    background: none;
    color: var(--color-text-muted);
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
}
.sidebar-update-btn:hover { background: var(--color-bg); }

/* ---- Login page ---- */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--color-bg);
}
.login-box {
    width: 100%;
    max-width: 340px;
    padding: 32px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.login-box h1 {
    margin: 0 0 20px;
    font-size: 20px;
    text-align: center;
}
.login-box .form-field { margin-bottom: 14px; }
.login-box .btn { width: 100%; }
.login-error {
    margin-bottom: 14px;
    padding: 8px 12px;
    border-radius: 4px;
    background: #fef2f2;
    color: var(--color-danger);
    font-size: 13px;
}

.form-success {
    color: #16a34a;
}


/* ---- Page layout ----
   .page is exactly one viewport tall and never scrolls itself - instead
   it's a flex column where page-header/list-search/browser-nav (fixed,
   natural height) bracket a single flexible middle region that consumes
   whatever's actually left and scrolls internally if its content doesn't
   fit. This replaces the old approach of individually guessing a fixed
   "chrome height" constant per page (e.g. calc(100vh - 130px)) and
   subtracting it from a vh value - that broke every time the chrome above
   it changed size (adding the search bar silently made every list page's
   old constant wrong), and never accounted for .browser-nav's own height
   at the bottom at all, which is why Back/Forward kept falling off-screen
   on ordinary pages too. Flex growth needs no constant and can't drift out
   of sync with the actual page content around it. */
.page {
    max-width: 1200px;
    height: 100vh;
    padding: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.page-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.page-header h1 { margin: 0; font-size: 22px; }
.page-actions { display: flex; gap: 8px; align-items: center; }

/* The one "main content" block on a page (a list page's .data-table-wrap,
   a detail page's .detail-layout, a form's .card, etc.) - whatever sits
   between the fixed-height header/search and the fixed-height browser-nav
   footer, fills exactly the space actually left and scrolls internally if
   its content doesn't fit, instead of pushing the page itself taller than
   the viewport. Dashboard is excluded - it has two stacked content blocks
   instead of one, handled by its own more specific rules below. */
.page > *:not(.page-header):not(.list-search):not(.browser-nav):not(script):not(.dashboard-todo):not(.dashboard-bottom) {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

/* ---- View toggle ---- */
.view-toggle {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.view-toggle a {
    padding: 6px 14px;
    color: var(--color-text-muted);
    background: var(--color-surface);
    font-weight: 500;
}
.view-toggle a:hover { text-decoration: none; background: var(--color-bg); }
.view-toggle a.active { background: var(--color-primary); color: #fff; }

/* ---- Buttons ---- */
.btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--radius);
    background: var(--color-primary);
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.btn:hover { background: var(--color-primary-hover); text-decoration: none; }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); }
.btn-secondary:hover { background: var(--color-bg); }
.btn-danger { background: var(--color-surface); color: var(--color-danger); border: 1px solid var(--color-danger); }
.btn-danger:hover { background: #fef2f2; }
.btn-danger:disabled { opacity: 0.6; cursor: default; }

.btn-icon-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    border-radius: 3px;
    vertical-align: middle;
}
.btn-icon-delete:hover,
.btn-icon-delete:focus-visible { background: transparent; color: var(--color-danger); }

/* ---- Card / surface ---- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card + .card { margin-top: 16px; }
.card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    font-size: 15px;
}
.card-body { padding: 20px; }

/* ---- List search bar ---- */
.list-search {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.list-search input[type="text"] {
    flex: 1;
    max-width: 320px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    background: var(--color-surface);
    color: var(--color-text);
}

/* ---- Data table (overview / line view) ---- */
.data-table-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow-x: auto;
    max-height: 50vh;
    overflow-y: auto;
}
/* Standalone list pages (Contacts, Deals, Notes) have just one table and
   nothing else below it - as a direct child of the .page flex column (see
   "Page layout" above), it already gets flex:1/min-height:0/overflow-y:auto
   from the generic rule there, so the flat 50vh cap above would only fight
   that. Just remove the cap and let flex size it exactly to the real
   remaining space, however much that is. */
.data-table-wrap-fill {
    max-height: none;
}
table.data-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}
table.data-table th {
    text-align: left;
    padding: 10px 16px;
    background: #fafbfc;
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    position: sticky;
    top: 0;
}
table.data-table th a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
}
table.data-table th a:hover { color: var(--color-text); text-decoration: underline; }
table.data-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border);
}
table.data-table tbody tr:hover { background: #f8fafc; }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr[data-href] { cursor: pointer; }

/* ---- Detail view ---- */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px 24px;
}
.field-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    margin-bottom: 2px;
}
.field-value { font-size: 14px; }
.field-value.empty { color: var(--color-text-muted); font-style: italic; }

/* ---- Click-to-edit fields (contact_detail.php / deal_detail.php) ---- */
.field-editable [data-inline-display] {
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
}
.field-editable [data-inline-display]:hover,
.field-editable [data-inline-display]:focus-visible {
    background: var(--color-bg);
    outline: none;
}
.field-editable input[data-inline-input],
.field-editable select[data-inline-input] {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    background: var(--color-surface);
    color: var(--color-text);
}
.field-editable.field-saving { opacity: 0.55; pointer-events: none; }

/* ---- Record navigation (first/prev/next/last) - lives inline inside
   .browser-nav (below) so Back/[record nav]/Forward render as one row. ---- */
.record-nav-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}
.icon-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--color-primary);
    font-size: 13px;
    background: transparent;
}
.icon-nav-btn:hover { background: #eff4ff; text-decoration: none; }
.icon-nav-disabled { color: var(--color-border); cursor: default; }
.icon-nav-disabled:hover { background: transparent; }
.record-nav-position {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0 10px;
    min-width: 90px;
    text-align: center;
}

/* ---- Browser back/forward (shown on every page). Back sits at the far
   left, Forward at the far right; when a page also has record navigation
   (contact/deal detail), it renders in the middle of this same row via
   $recordNavHtml (see includes/footer.php) rather than as a separate row. ---- */
.browser-nav {
    flex-shrink: 0;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.btn-outline-blue {
    background: #fff;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    padding: 7px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.btn-outline-blue:hover { background: #eff4ff; }

/* ---- Copy-to-clipboard icon (next to emails/phone numbers) ---- */
.copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 4px;
    vertical-align: middle;
}
.copy-btn:hover { background: var(--color-bg); color: var(--color-primary); }
.copy-btn-done { color: #16a34a !important; }

/* ---- Detail page two-column layout: main content + right-side notes panel ---- */
.detail-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.detail-main {
    flex: 1 1 0%;
    min-width: 0;
}
.detail-notes-panel {
    /* Literal 30% of the browser viewport, not 30% of the content area next
       to the sidebar (which flex-basis as a % of the flex container would
       give - a smaller number since the sidebar already ate some width). */
    flex: 0 0 30vw;
    max-width: 30vw;
    min-width: 280px;
    min-height: 0;
    /* Capped to the row's available height (not stretched to always fill
       it - that made a single short note balloon to fill the whole
       screen) - .detail-layout is itself flex:1 inside .page's definite
       100vh column, so it resolves to a real pixel height here, not "none".
       With just a few short notes, .detail-notes-panel renders at its
       natural (smaller) content height same as .detail-main; a long note
       history hits this cap instead and .note-list below takes over with
       its own internal scroll. */
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* The notes card grows to fill whatever height .detail-notes-panel actually
   ends up at (natural size for a short note list, capped size for a long
   one - see above) - card-header stays fixed, .note-list is the part that
   scrolls internally once notes overflow it, so a long note history never
   pushes the whole page taller than the viewport - only the most recent
   notes show without scrolling, exactly like a normal chat/comment list. */
.notes-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}
.note-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.note-add-row {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}
.btn-icon-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 50%;
}
.btn-icon-add:hover,
.btn-icon-add:focus-visible,
.btn-icon-add:disabled {
    background: transparent;
    color: var(--color-primary);
}
.btn-icon-add:disabled { opacity: 0.5; cursor: default; }
.note-quick-add-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    background: var(--color-surface);
    color: var(--color-text);
    resize: vertical;
}
.note-quick-add-deal {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.note-quick-add-deal label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.note-quick-add-deal select {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    background: var(--color-surface);
    color: var(--color-text);
}

@media (max-width: 900px) {
    .detail-layout { flex-direction: column; }
    .detail-notes-panel { max-width: 100%; width: 100%; }
}

/* ---- Badges ---- */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #eef2f7;
    color: var(--color-text-muted);
}
.badge-Customer { background: #dcfce7; color: #166534; }
.badge-Prospect { background: #fef9c3; color: #854d0e; }
.badge-Divecenter { background: #dbeafe; color: #1e40af; }
.badge-Other { background: #eef2f7; color: #6b7280; }

.badge-stage-win { background: #dcfce7; color: #166534; }
.badge-stage-in-progress { background: #fef9c3; color: #854d0e; }
.badge-stage-lost { background: #fee2e2; color: #991b1b; }

/* ---- Offline banner ---- */
.offline-banner {
    background: #fef3c7;
    color: #92400e;
    text-align: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
}

.conflict-banner {
    background: #fee2e2;
    color: #991b1b;
    text-align: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
}
.conflict-banner a { color: #991b1b; text-decoration: underline; font-weight: 600; }

/* ---- Autosave status ---- */
.autosave-status {
    min-height: 18px;
    font-size: 13px;
    margin-bottom: 12px;
    color: var(--color-text-muted);
}
.autosave-status[data-kind="saving"] { color: var(--color-text-muted); }
.autosave-status[data-kind="saved"] { color: #166534; }
.autosave-status[data-kind="offline"] { color: #92400e; }
.autosave-status[data-kind="error"] { color: var(--color-danger); }

/* ---- Forms ---- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px 20px;
}
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field label { font-size: 13px; font-weight: 600; }
.form-field input,
.form-field select,
.form-field textarea {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    background: var(--color-surface);
    color: var(--color-text);
}
.form-field textarea { resize: vertical; }
.form-actions { margin-top: 20px; display: flex; gap: 10px; }

.section-divider {
    margin: 28px 0 16px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}
.section-divider h2 { margin: 0; font-size: 16px; font-weight: 600; }
.section-hint { margin: 4px 0 0; font-size: 13px; color: var(--color-text-muted); }

/* ---- Notes list ---- */
.note-item {
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border);
}
.note-item:last-child { border-bottom: none; }
.note-meta { font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; }
.note-text { white-space: pre-wrap; }

.empty-state {
    padding: 32px 20px;
    text-align: center;
    color: var(--color-text-muted);
}

.section-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 24px 0 8px;
}

/* ---- Dashboard ----
   Two stacked rows share whatever's left in the .page flex column after
   page-header/browser-nav (todo on top with a smaller natural share,
   forecast+notes below getting the rest) - each row's own .card becomes a
   flex column itself so its card-header stays fixed while .dashboard-scroll-box
   is the part that actually scrolls, sized by flex growth rather than a
   fixed vh-minus-constant guess (the old approach needed re-measuring by
   hand any time the surrounding chrome changed size, and still drifted out
   of sync - see "Page layout" above for the same fix applied everywhere else). */
.dashboard-todo {
    flex: 0 1 40%;
    min-height: 0;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
}
.dashboard-bottom {
    flex: 1 1 60%;
    min-height: 0;
    display: flex;
    gap: 16px;
    align-items: stretch;
}
.dashboard-bottom > .card { flex: 1 1 50%; min-width: 0; }
.dashboard-todo > .card,
.dashboard-bottom > .card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.dashboard-scroll-box {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.cell-overdue { background-color: #ffa5ab; }

.forecast-tile {
    display: block;
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 8px;
    color: inherit;
}
.forecast-tile:last-child { margin-bottom: 0; }
.forecast-tile:hover { filter: brightness(0.96); text-decoration: none; }
.forecast-tile-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.forecast-tile-title { font-weight: 600; font-size: 14px; }
.forecast-tile-date { font-size: 13px; opacity: 0.85; white-space: nowrap; }
.forecast-tile-stats { font-size: 13px; margin-top: 4px; display: flex; gap: 14px; opacity: 0.9; }
.forecast-tile-low { background: #dcfce7; color: #166534; }
.forecast-tile-mid { background: #86efac; color: #14532d; }
.forecast-tile-high { background: #22c55e; color: #052e16; }

.dashboard-note-item {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    color: inherit;
}
.dashboard-note-item:last-child { border-bottom: none; }
.dashboard-note-item:hover { background: var(--color-bg); text-decoration: none; }

@media (max-width: 900px) {
    .dashboard-bottom { flex-direction: column; }
    .dashboard-bottom > .card { width: 100%; }
}
.section-title:first-child { margin-top: 0; }

/* ---- Mobile (phone-width) layout ---- */
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 768px) {
    /* The fixed 220px sidebar used to just sit there and squeeze all page
       content into whatever was left (as little as ~150px on a phone) -
       everything below turns it into a slide-in drawer instead, opened via
       the hamburger button in the new top bar. */
    .mobile-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        position: sticky;
        top: 0;
        z-index: 60;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        padding: 12px 16px;
    }
    .mobile-menu-btn {
        background: none;
        border: none;
        font-size: 22px;
        line-height: 1;
        padding: 4px 8px;
        margin: -4px -8px;
        color: var(--color-text);
        cursor: pointer;
    }
    .mobile-topbar-title {
        font-weight: 600;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar {
        width: 260px;
        max-width: 80vw;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 100;
    }
    .sidebar.open { transform: translateX(0); }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 90;
    }
    .sidebar-backdrop.open { display: block; }

    .main-content { margin-left: 0; }
    /* .app-layout's min-height:100vh and .page's height:100vh (see "Page
       layout" above) don't know about .mobile-topbar sitting above them in
       the document (it's outside .app-layout entirely, only shown at this
       width) - without this, both still claim a full 100vh on top of that,
       overflowing the viewport by exactly the topbar's height. Unlike the
       old per-page constants this replaced, this one constant is safe to
       hardcode: the topbar's height is fixed and identical on every page
       (just an icon button + title), never drifts per-page content like
       the old bug did. */
    .app-layout { min-height: calc(100vh - 48px); }
    .page { padding: 16px; max-width: 100%; height: calc(100vh - 48px); }

    /* Two-column detail layout (deal/contact info + notes panel) doesn't
       have room to sit side by side on a phone - stack instead, and let the
       notes panel take the full width it'd otherwise get by being 30vw. */
    .detail-layout { flex-direction: column; }
    .detail-notes-panel { flex: none; width: 100%; max-width: 100%; }

    /* record-nav + back/forward can overflow a narrow screen as one row -
       let it wrap rather than clip or force horizontal scroll on the page. */
    .browser-nav { flex-wrap: wrap; row-gap: 8px; }
}