/* ════════════════════════════════════════════════════════════════════════
   CloseFlow Design System - APP styles  (DS Step 2: extracted from base.html)
   ────────────────────────────────────────────────────────────────────────
   Layout + component CSS for Group A pages (everything that extends base.html).
   Design tokens live in tokens.css; this file consumes them via var().
   Per-page overrides remain in each template's {% block extra_style %}.
   ════════════════════════════════════════════════════════════════════════ */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
      line-height: 1.5;
      min-height: 100vh;
    }

    /* ── Global accent: native form controls + in-content links (backlog #1) ──
       :where() keeps specificity 0 so class-scoped rules still win, notably
       .ds-check-box (green) in ds-checklist.css, which loads AFTER this file.
       A plain input[type=...] selector (0,1,1) would beat .ds-check-box (0,1,0)
       and repaint the txn checklist cognac, so :where() is load-bearing here.
       Links are scoped to <main class="page-content"> so sidebar/nav/footer
       (all outside main, and classed) stay untouched. */
    :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); }
    .page-content a:not([class]) { color: var(--accent); }
    .page-content a:not([class]):hover { color: var(--accent-hover); }

    /* ── Skip-to-main link (Phase 4-7, ARIA landmark a11y) ── */
    .skip-link {
      position: absolute; top: -40px; left: 8px; z-index: 9999;
      background: var(--accent); color: var(--cf-on-accent);
      padding: 8px 16px; border-radius: var(--radius-md);
      font-size: 14px; font-weight: 600; text-decoration: none;
      transition: top .12s;
    }
    .skip-link:focus-visible {
      top: 8px; outline: 2px solid var(--accent); outline-offset: 2px;
    }

    /* ── Layout ── */
    .app-shell { display: flex; min-height: 100vh; }

    .sidebar {
      width: 240px;
      background: var(--card);
      border-right: 1px solid var(--border);
      color: var(--text);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      position: fixed;
      top: 0; left: 0; bottom: 0;
      z-index: 100;
      padding: 4px 4px 0;
    }

    .sidebar-logo {
      padding: 16px 12px 20px;
    }
    .sidebar-logo a {
      color: var(--navy);
      text-decoration: none;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -.3px;
    }
    .sidebar-logo .logo-dot { color: var(--accent); }

    .sidebar-nav { flex: 1; padding: 0 6px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }

    .nav-section { padding: 8px 16px 4px; font-size: 10px; font-weight: 600;
      text-transform: uppercase; letter-spacing: .8px; color: var(--gray-400); }

    .nav-item a {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 11px;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 13.5px;
      font-weight: 600;
      border-radius: var(--radius-md);
      transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    }
    .nav-item a:hover { background: var(--accent-tint); color: var(--accent); }
    .nav-item a.active { background: var(--accent-tint); color: var(--accent); }
    .nav-item a .icon { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .nav-item a .icon svg { width: 18px; height: 18px; }

    .nav-divider {
      height: 1px;
      background: var(--border);
      margin: 8px 16px;
    }

    .sidebar-footer {
      padding: 8px 10px;
      border-top: 1px solid var(--border);
    }
    .sidebar-agent-card {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px; border-radius: 8px; cursor: pointer;
      text-decoration: none; transition: background .15s;
      margin-bottom: 2px;
    }
    .sidebar-agent-card:hover { background: var(--accent-bg); }
    .sidebar-avatar {
      position: relative; flex-shrink: 0;
      width: 36px; height: 36px;
    }
    .sidebar-avatar img,
    .sidebar-avatar-initials {
      width: 36px; height: 36px; border-radius: 50%;
      object-fit: cover; border: 2px solid var(--border);
    }
    .sidebar-avatar-initials {
      background: var(--accent); display: flex;
      align-items: center; justify-content: center;
      color: var(--cf-on-accent); font-size: 14px; font-weight: 700;
      border: 2px solid var(--border);
    }
    .sidebar-verified-dot {
      position: absolute; bottom: -1px; right: -1px;
      width: 14px; height: 14px; border-radius: 50%;
      border: 2px solid var(--card);
      display: flex; align-items: center; justify-content: center;
    }
    .sidebar-verified-dot.dot-verified  { background: var(--success); }
    .sidebar-verified-dot.dot-pending   { background: var(--warning); }
    .sidebar-agent-name {
      font-size: 13px; font-weight: 600; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .sidebar-agent-sub {
      font-size: 11px; margin-top: 1px;
    }
    .sidebar-signout {
      display: block; padding: 5px 10px;
      font-size: 11.5px; color: var(--gray-400);
      text-decoration: none; transition: color .15s;
    }
    .sidebar-signout:hover { color: var(--accent); }

    /* Sidebar profile card (atlas: identity anchor at the rail foot) */
    .sidebar-profile {
      display: flex; align-items: center; gap: 11px;
      margin: 0 6px;
      padding: 11px 9px;
      border-top: 1px solid var(--border-subtle);
      text-decoration: none;
      border-radius: var(--radius-md);
      transition: background var(--dur-fast) var(--ease);
    }
    .sidebar-profile:hover { background: var(--accent-tint); }
    .sidebar-profile .sp-av {
      width: 34px; height: 34px; border-radius: 50%; flex: none;
      background: var(--accent); color: var(--cf-on-accent);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 600; overflow: hidden;
    }
    .sidebar-profile .sp-av img { width: 100%; height: 100%; object-fit: cover; }
    .sidebar-profile .sp-meta { min-width: 0; }
    .sidebar-profile .sp-nm {
      display: block; font-size: 13px; font-weight: 600; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .sidebar-profile .sp-sub {
      display: block; font-size: 11.5px; color: var(--muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    .main-content {
      margin-left: 240px;
      flex: 1;
      min-width: 0;        /* flex-item overflow guard: let descendants' overflow:hidden truncate
                              instead of a nowrap child forcing the column past the viewport */
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .topbar {
      background: var(--card);
      border-bottom: 1px solid var(--border);
      /* Reserve the iOS status-bar strip (viewport-fit=cover + black-translucent lets content paint
         under the clock in a standalone PWA). env() is 0 in normal browsers/desktop, so no-op there.
         Height grows by the inset AND the top padding is added (box-sizing:border-box). */
      padding: env(safe-area-inset-top) 24px 0;
      height: calc(62px + env(safe-area-inset-top));
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 50;
    }
    .topbar-title { font-size: 18px; font-weight: 600; color: var(--navy); letter-spacing: -.01em; }
    .topbar-actions { display: flex; align-items: center; gap: 12px; }
    /* Topbar text-action (Inbox "New message", studio "Exit"): accent pill, not a bare link. */
    .ib-newmsg { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
      border-radius: 8px; font-size: 13.5px; font-weight: 500;
      color: var(--accent); text-decoration: none; white-space: nowrap;
      transition: background var(--dur-fast, .12s) var(--ease, ease); }
    .ib-newmsg:hover { background: var(--accent-tint); color: var(--accent-hover); text-decoration: none; }
    /* Right cluster: page action(s) + notifications + avatar, grouped on the right (atlas). */
    .topbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }

    .page-content { padding: 24px; flex: 1; }

    /* K layout rule (W3.1): every HUB/LIST/WORKSPACE page is FULL-BLEED - content
       fills the .page-content width (24px desktop / 16px mobile padding), no
       per-page width cap. Do not reintroduce one.
       K layout standard (W9.3): FLOW pages are the one exception - wizard steps,
       editors and choosers CENTER their content column (max-width + margin:0 auto)
       so narrow step content never sits pinned-left in a wide window. Hubs full,
       flows centered - same frame on every step of a flow. */

    /* ── Components ── */
    /* .card system → DS Card primitive (static/css/ds-card.css). Variants: default/elevated/interactive/flat.
       Specialized .stat-card / .tpl-card / .bcard etc. stay here pending Card migration sub-phase. */

    /* .btn system → DS Button primitive (static/css/ds-button.css). btn-navy retired. */

    /* .badge system → DS Badge primitive (static/css/ds-badge.css).
       11 domain variants preserved verbatim + 5 semantic (success/warning/error/info/neutral)
       + 3 sizes + solid/count/dot modifiers. Class names unchanged → app-wide upgrade. */

    /* Form */
    /* .form-* system → DS Input primitive (static/css/ds-input.css).
       Sizes (sm/md/lg), :focus-visible ring (fixes outline:none a11y violation),
       error/success states, input-group (prefix/suffix), .form-hint + --error,
       .form-label--required. Class names unchanged → app-wide upgrade. */

    /* ── Typography scale ── */
    .page-h1 { font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -.3px; line-height: 1.25; }
    .page-h2 { font-size: 17px; font-weight: 700; color: var(--navy); letter-spacing: -.2px; }
    .page-h3 { font-size: 14px; font-weight: 600; color: var(--navy); }
    .section-label {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .8px; color: var(--muted); margin-bottom: 8px;
    }
    .text-muted { color: var(--muted); }
    .text-xs    { font-size: 11.5px; }
    .text-sm    { font-size: 13px; }
    .text-base  { font-size: 14px; }

    /* Table */
    .table { width: 100%; border-collapse: collapse; }
    .table th {
      text-align: left; padding: 10px 14px;
      font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .5px;
      color: var(--muted);
      border-bottom: 2px solid var(--border);
    }
    .table td {
      padding: 12px 14px;
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
    }
    .table tbody tr:last-child td { border-bottom: none; }
    .table tbody tr:hover { background: var(--gray-50); }

    /* Flash messages */
    .alert {
      padding: 12px 16px; border-radius: var(--radius-lg);
      margin-bottom: 16px; font-size: 13px;
    }
    .alert-success { background: var(--success-bg); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
    .alert-error   { background: var(--error-bg);   color: var(--error);   border: 1px solid color-mix(in srgb, var(--error) 30%, transparent); }

    /* Stat tile classes (.stat-card/.stat-label/.stat-value/.stat-sub + urgency variants)
       → DS Card primitive (.card.card--stat + .card--accent-{red,amber,green,grey,brand}).
       .stats-grid stays as layout helper. */
    .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }

    /* ── Hamburger ── */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 44px; height: 44px;             /* 44×44 tap target (was 36×36) - mobile-only via @media gate below */
      border: none; background: none;
      cursor: pointer; padding: 4px;
      border-radius: 6px;
      flex-shrink: 0;
    }
    .hamburger:hover { background: var(--gray-100); }
    .hamburger span {
      display: block; height: 2px;
      background: var(--navy); border-radius: 2px;
      transition: transform .22s ease, opacity .22s ease, width .22s ease;
      transform-origin: center;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── Sidebar overlay (mobile) ── */
    .sidebar-overlay {
      display: none;
      position: fixed; inset: 0;
      background: var(--cf-scrim);
      z-index: 90;
      backdrop-filter: blur(1px);
    }

    /* ── Demo banner ── */
    .demo-banner {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 150;
      background: var(--accent-bg);
      color: var(--accent);
      font-size: 12px;
      /* Grow into the status-bar strip so the banner text isn't under the iOS clock (PWA). */
      height: calc(40px + env(safe-area-inset-top));
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: env(safe-area-inset-top) 16px 0;
      text-align: center;
      border-bottom: 1px solid var(--border);
    }
    .demo-banner.active { display: flex; }
    .demo-banner a {
      color: var(--accent);
      font-weight: 700;
      text-decoration: none;
      white-space: nowrap;
    }
    .demo-banner a:hover { text-decoration: underline; }
    .demo-banner-countdown { color: var(--accent-soft); }

    /* Shell offsets for the 40px top banner (demo OR trial). has-topbanner is set
       on <body> for both; demo-mode stays for the demo-only JS/content only. */
    body.has-topbanner .sidebar { top: calc(40px + env(safe-area-inset-top)); }
    body.has-topbanner .main-content { padding-top: calc(40px + env(safe-area-inset-top)); }
    /* With a fixed top banner present, the banner reserves the status-bar inset - so the topbar
       sits below it and must NOT add the inset again (else double gap). */
    body.has-topbanner .topbar { top: calc(40px + env(safe-area-inset-top)); padding-top: 0; height: 62px; }

    /* ── Mobile layout ── */
    @media (max-width: 767px) {
      .sidebar {
        transform: translateX(-100%);
        transition: transform .25s cubic-bezier(.4,0,.2,1);
        z-index: 200;
      }
      .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(31,31,31,.16);
      }
      .sidebar-overlay.open { display: block; }

      body.has-topbanner .sidebar { top: calc(40px + env(safe-area-inset-top)); }
      /* Keep the 40px reserved for the fixed top banner (demo or trial): the sticky
         .topbar is still offset to top:40px below, so zeroing this padding let the
         topbar overlap the first content row (greeting / inbox tab strip) at <=768. */
      body.has-topbanner .main-content { padding-top: calc(40px + env(safe-area-inset-top)); }

      .main-content { margin-left: 0; }

      .topbar { padding: env(safe-area-inset-top) 12px 0; gap: 8px; }
      .topbar-title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
      /* Right cluster must be allowed to shrink: wide action sets scroll in a
         rail (settings tab-strip idiom) instead of widening the document. */
      .topbar-right { gap: 8px; min-width: 0; }
      .topbar-actions { gap: 6px; flex-shrink: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
      .topbar-actions::-webkit-scrollbar { display: none; }
      .topbar-actions .btn { flex-shrink: 0; white-space: nowrap; }
      .topbar-actions .btn-sm { padding: 5px 10px; font-size: 11px; }

      /* M1: the hamburger + slide-in sidebar are replaced by the bottom tab bar. */
      .hamburger { display: none; }
      .sidebar { display: none; }

      /* Room for the fixed bottom tab bar (58px) + iOS home-indicator safe area. */
      .page-content { padding: 16px 16px calc(16px + 58px + env(safe-area-inset-bottom)); }

      /* Tables: horizontal scroll inside cards (safe default) */
      .card { overflow-x: auto; }
      .table { min-width: 480px; }

      /* Comfortable touch rows: height acts as a min-height on table cells */
      .table td { height: 44px; }

      /* Scroll affordance: edge fades that only appear when more columns are
         off-screen (two --card "cover" layers scroll WITH the content and hide
         the two fixed shade layers whenever the matching edge is fully scrolled).
         Scoped to cards that actually hold a .table so card variants keep their
         own backgrounds. Tokens only: shade = 12% warm ink over transparent. */
      .card:has(.table),
      .hub-card:has(.table) {
        background-color: var(--card);
        background-image:
          linear-gradient(to right, var(--card), transparent),
          linear-gradient(to left,  var(--card), transparent),
          linear-gradient(to right, color-mix(in srgb, var(--cf-text) 12%, transparent), transparent),
          linear-gradient(to left,  color-mix(in srgb, var(--cf-text) 12%, transparent), transparent);
        background-position: left center, right center, left center, right center;
        background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
        background-repeat: no-repeat;
        background-attachment: local, local, scroll, scroll;
      }

      /* Opt-in sticky first column (.table--sticky-first on the <table>): pins
         the identity column while the rest scrolls. Cell backgrounds go opaque
         so scrolled columns pass underneath; the inset seam keeps the row
         borders readable (collapsed cell borders do not travel with sticky
         cells in some engines). */
      .table--sticky-first th:first-child,
      .table--sticky-first td:first-child {
        position: sticky; left: 0; z-index: 2;
        background: var(--card);
        /* cap the pinned column so the scrollable columns keep a visible
           stage (a wide identity cell, e.g. a subject line, would otherwise
           cover the whole card and hide that there is anything to scroll).
           width+max-width together keep auto layout from re-expanding the
           column when it distributes the table's 480px floor. */
        width: 45vw;
        max-width: 45vw;
      }
      .table--sticky-first td:first-child {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      }
      .table--sticky-first th:first-child {
        box-shadow: inset -1px 0 0 var(--border), inset 0 -2px 0 var(--border);
      }
      .table--sticky-first td:first-child {
        box-shadow: inset -1px 0 0 var(--border), inset 0 -1px 0 var(--border);
      }
      .table--sticky-first tbody tr:last-child td:first-child {
        box-shadow: inset -1px 0 0 var(--border);
      }
      .table--sticky-first tbody tr:hover td:first-child { background: var(--gray-50); }

      /* Stat tiles: 2 columns on mobile */
      .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
      /* Scoped under .stats-grid so it outranks ds-card.css's equal-specificity
         .card--stat .stat-value (loads after app.css) — mobile shrink actually applies. */
      .stats-grid .card--stat .stat-value { font-size: 22px; }

      /* Form grids: single column */
      .field-grid-2 { grid-template-columns: 1fr !important; }
    }

    @media (max-width: 400px) {
      .stats-grid { grid-template-columns: 1fr; }
      /* Hide button labels on very small screens, keep icon only */
      .topbar-actions .btn-sm { font-size: 11px; padding: 5px 8px; }
    }

    /* .empty-state* system → DS EmptyState primitive (static/css/ds-empty.css).
       Default + .empty-state--compact variant (inline narrow). Class names unchanged. */

    /* .skeleton-* system → DS Skeleton primitive (static/css/ds-skeleton.css).
       Shimmer animation, line + avatar + block shapes. Class names unchanged. */

    /* ── Page footer ── */
    .page-footer {
      border-top: 1px solid var(--border);
      padding: 14px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      font-size: 11.5px;
      color: var(--muted);
      background: var(--bg);
    }
    .page-footer a {
      color: var(--muted);
      text-decoration: none;
    }
    .page-footer a:hover { color: var(--navy); }
    .page-footer-links { display: flex; gap: 16px; flex-shrink: 0; }
    .page-footer-sep { color: var(--border); }
    @media (max-width: 640px) {
      .page-footer { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 16px; }
    }

    /* ── Lead Card Drawer ── */
    /* .lc-overlay + .lc-drawer frame → DS Drawer primitive (static/css/ds-drawer.css).
       Migrated to ds_drawer('lead-card', size='md', backdrop='dismiss') in MB5.
       Inner .lc-header / .lc-body / .lc-actions / .lc-section / .lc-* domain
       styling kept below (drawer body content, not primitive concern). */
    .lc-header {
      display:flex; align-items:center; gap:12px;
      padding:18px 20px; border-bottom:1px solid var(--gray-100); flex-shrink:0;
    }
    .lc-avatar {
      width:42px; height:42px; border-radius:50%; background:var(--accent);
      color:var(--cf-on-accent); display:flex; align-items:center; justify-content:center;
      font-size:14px; font-weight:700; flex-shrink:0;
    }
    .lc-header-meta { flex:1; min-width:0; }
    .lc-name { font-size:16px; font-weight:700; color:var(--text); }
    .lc-stage {
      display:inline-block; margin-top:3px;
      padding:2px 9px; border-radius:99px;
      font-size:11px; font-weight:600;
    }
    .lc-close {
      width:44px; height:44px; margin:-6px -6px -6px 0; border-radius:8px;
      border:1px solid var(--gray-200); background:var(--card);
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; color:var(--gray-500); flex-shrink:0; transition:all .12s;
    }
    .lc-close:hover { background:var(--gray-100); color:var(--text); }
    .lc-body { flex:1; overflow-y:auto; }
    .lc-section { padding:14px 20px; border-bottom:1px solid var(--gray-50); }
    .lc-section-label {
      font-size:10px; font-weight:700; text-transform:uppercase;
      letter-spacing:.6px; color:var(--gray-400); margin-bottom:8px;
    }
    .lc-actions {
      display:flex; gap:8px; padding:14px 20px;
      border-top:1px solid var(--gray-100); flex-shrink:0; flex-wrap:wrap;
    }
    .lc-action-btn {
      display:inline-flex; align-items:center; gap:5px;
      padding:8px 14px; border-radius:8px;
      font-size:12px; font-weight:600; cursor:pointer;
      border:1px solid var(--gray-200); background:var(--card); color:var(--gray-700);
      text-decoration:none; transition:all .12s;
    }
    .lc-action-btn:hover { background:var(--gray-100); border-color:var(--gray-300); }
    .lc-action-call  { color:var(--success); border-color:color-mix(in srgb, var(--success) 30%, transparent); background:var(--success-bg); }
    .lc-action-call:hover  { background:color-mix(in srgb, var(--success) 16%, var(--card)); }
    .lc-action-email { color:var(--info); border-color:color-mix(in srgb, var(--info) 30%, transparent); background:var(--info-bg); }
    .lc-action-email:hover { background:color-mix(in srgb, var(--info) 16%, var(--card)); }
    .lc-action-full  { margin-left:auto; color:var(--gray-500); font-weight:500; border-color:transparent; background:transparent; }
    .lc-action-full:hover { color:var(--text); background:var(--gray-100); border-color:var(--gray-200); }
    .lc-note-text { font-size:13px; color:var(--gray-700); line-height:1.55; white-space:pre-wrap; }
    .lc-contact-row {
      display:flex; align-items:center; gap:8px;
      font-size:13px; color:var(--gray-700); margin-bottom:4px;
    }
    .lc-contact-link {
      color:inherit; text-decoration:none;
      flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .lc-contact-link:hover { text-decoration:underline; color:var(--text); }
    /* heat bars (shared across pages) */
    .heat-wrap { display:flex; align-items:flex-end; gap:2px; flex-shrink:0; }
    .hb { width:3px; border-radius:1px 1px 0 0; background:var(--gray-200); }


/* ═══════════════════════════════════════════════════════════════════════
   M1 - Mobile bottom tab bar + More sheet (backlog: mobile redesign).
   Desktop keeps the sidebar; at <=768px the sidebar/hamburger are hidden
   (see the @media block above) and this fixed 5-item bar takes over.
   Tokens only (--accent / --card / --border / --muted / --text). No em-dash.
   ═══════════════════════════════════════════════════════════════════════ */
.mtab { display: none; }
.mmore, .mmore-overlay { display: none; }
.topbar-logo-m { display: none; }  /* desktop: the sidebar carries the logo */

@media (max-width: 767px) {
  .mtab {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 130;
    background: var(--card);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -1px 0 var(--border), 0 -8px 24px -18px rgba(31,31,31,.22);
  }
  .mtab-i {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 58px; padding: 6px 2px 0;
    border: 0; background: none; cursor: pointer;
    color: var(--muted); text-decoration: none;
    font: 600 10.5px/1 Inter, sans-serif; letter-spacing: .01em;
    position: relative; -webkit-tap-highlight-color: transparent;
  }
  .mtab-i svg { width: 22px; height: 22px; stroke-width: 1.9; }
  .mtab-i span { white-space: nowrap; }
  .mtab-i.on { color: var(--accent); }
  .mtab-i:active { background: var(--accent-tint); }
  .mtab-badge {
    position: absolute; top: 6px; left: 50%; margin-left: 6px;
    min-width: 8px; height: 8px; border-radius: 999px; background: var(--accent);
    box-shadow: 0 0 0 2px var(--card);
  }

  /* Hide the fixed bottom tab bar while the soft keyboard is up (base.html sets body.cf-kb-open on
     input focus). iOS keeps position:fixed;bottom:0 pinned to the LAYOUT viewport, so when the keyboard
     opens the bar floats ABOVE it, leaving a stray tab strip + grey gap over the content and a "jump"
     on focus (K: "klavye açılan her yerde ekranlar sıçıyor"). Hiding it docks the input cleanly to the
     keyboard, like a native messenger. Higher specificity than the .mtab rule above, so no !important. */
  body.cf-kb-open .mtab { display: none; }
  /* The blog editor's publish bottom sheet (mkt-blog.css) is a descendant of the
     sticky .topbar (z-index:50 stacking context), so it CANNOT stack above the
     z-130 tab bar - hide the bar while the sheet is open instead (same :has()
     idiom as the topbar lift in base.html). */
  body:has(.publish-menu.is-open) .mtab { display: none; }

  /* More: a bottom sheet, matching the avmenu/notif idiom already in base.html. */
  .mmore-overlay { display: block; position: fixed; inset: 0; background: var(--cf-scrim); z-index: 135; }
  .mmore-overlay[hidden] { display: none; }
  .mmore {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
    background: var(--card);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -10px 34px -12px rgba(31,31,31,.28);
    padding: 8px 10px calc(14px + env(safe-area-inset-bottom));
    max-height: 76vh; overflow-y: auto;
  }
  .mmore[hidden] { display: none; }
  .mmore-grip { width: 38px; height: 4px; border-radius: 999px; background: var(--border-strong); margin: 6px auto 8px; }
  .mmore-title { font: 600 11px/1 Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--text-disabled); padding: 4px 10px 10px; }
  .mmore-i {
    display: flex; align-items: center; gap: 13px;
    width: 100%; padding: 14px 12px; border: 0; background: none; cursor: pointer;
    color: var(--text); text-decoration: none; text-align: left;
    font: 600 15px/1 Inter, sans-serif; border-radius: var(--radius-md);
  }
  .mmore-i svg { width: 20px; height: 20px; flex: none; stroke-width: 1.9; color: var(--muted); }
  .mmore-i.on { color: var(--accent); }
  .mmore-i.on svg { color: var(--accent); }
  .mmore-i:active { background: var(--accent-tint); }
  .mmore-i.danger { color: var(--danger); }
  .mmore-i.danger svg { color: var(--danger); }

  /* Mobile topbar: on mockup-covered CORE surfaces (.tb-core: Home/Leads/
     Calendar/Inbox/Insights) show the wordmark and drop the page title (the
     bottom-bar active state already orients the user). On every OTHER surface
     (Reports/Campaigns/Settings/Voice-Brand/Assets/Billing/Blog) the page title
     STAYS so context is never lost. K flag #2. */
  .tb-core .topbar-logo-m { display: flex; align-items: center; }
  .tb-core .topbar-title { display: none; }
  .page-footer { display: none; }  /* footer links live under More on mobile */
}