/* ═══════════════════════════════════════════════════════════════════════
   Sync IT — Responsive / App-Lite Layer   |  responsive.css  |  v20261023a
   ───────────────────────────────────────────────────────────────────────
   PURPOSE
     One app-wide responsive layer that turns Sync IT into a professional,
     touch-first web app on phones and tablets while leaving the desktop
     experience byte-for-byte unchanged.

   LOAD ORDER — IMPORTANT
     This file MUST be the LAST stylesheet in <head>, i.e. after
     @stack('styles'), so it wins over page-level CSS at equal specificity.

   CONTRACT
     • Every layout rule lives inside a max-width media query.
     • Rules outside a media query only define NEW, inert helper classes
       (.sd-tscroll, .sd-rt, .sd-sheet-*) that desktop never paints.
     • No colour invention — all colour comes from the app.css token set.

   BREAKPOINTS
     ≤1180px  laptop/tablet landscape — two-pane layouts narrow
     ≤1024px  tablet                  — two-pane layouts stack
     ≤768px   phone (app's shell bp)  — full app-lite treatment
     ≤420px   small phone             — density pass
   ═══════════════════════════════════════════════════════════════════════ */


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  0 · TOKENS — mobile-only additions                                 ║
   ╚═════════════════════════════════════════════════════════════════════╝ */
:root {
  /* Safe-area insets (notch / home indicator). 0 on non-mobile browsers. */
  --sa-top:    env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left:   env(safe-area-inset-left, 0px);
  --sa-right:  env(safe-area-inset-right, 0px);

  /* Mobile chrome metrics */
  --m-header-h:   56px;
  --m-nav-h:      60px;
  --m-gutter:     14px;
  --m-gutter-sm:  12px;
  --m-tap:        44px;   /* WCAG 2.5.5 minimum touch target */
  --m-radius:     14px;
  --m-sheet-r:    20px;

  /* Total space the fixed bottom chrome occupies */
  --m-nav-space: calc(var(--m-nav-h) + var(--sa-bottom));
}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  1 · HELPERS — inert on desktop, used by responsive.js              ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* 1a · Horizontal scroll shell that responsive.js wraps around any
        element wider than the viewport (dense grids, code, wide tables). */
.sd-tscroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.sd-tscroll::-webkit-scrollbar { height: 4px; }
.sd-tscroll::-webkit-scrollbar-track { background: transparent; }
.sd-tscroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }

/* 1b · Scroll-affordance: a soft edge fade while more content sits off-screen. */
.sd-tscroll.is-scrollable-right { mask-image: linear-gradient(to right, #000 85%, transparent 100%);
                                  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%); }

/* 1c · Marker classes set by responsive.js (no styling on desktop). */
.sd-rt { /* table tagged with per-cell data-label, card mode applies ≤768px */ }
.sd-no-tap-zoom { touch-action: manipulation; }


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  2 · ≤1180px — two-pane layouts give up their luxury width          ║
   ╚═════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 1180px) {

  .hd-cols        { grid-template-columns: 1fr 300px !important; }
  .md-grid,
  .doc-layout,
  .dlvd-layout,
  .qard-body      { grid-template-columns: 1fr 272px !important; }
  .qtp-layout     { grid-template-columns: 1fr 300px !important; }
  .qex-layout     { grid-template-columns: 1fr 340px !important; }
  .rev-layout     { grid-template-columns: 1fr 330px !important; }
  .feat-layout    { grid-template-columns: 264px 1fr !important; }
  .qatc-layout    { grid-template-columns: 244px 1fr !important; }
  .kb2-shell      { grid-template-columns: 212px 1fr !important; }

  .td-layout      { max-width: 100% !important; }
  .td-sidebar     { width: 240px !important; }
}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  3 · ≤1024px — tablet: every two-pane layout stacks                 ║
   ╚═════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 1024px) {

  /* 3a · Content-plus-rail layouts: rail drops under the content. */
  .hd-cols,
  .md-grid,
  .doc-layout,
  .qtp-layout,
  .dlvd-layout,
  .qard-body,
  .qex-layout,
  .rev-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  .hd-cols > *, .md-grid > *, .doc-layout > *, .qtp-layout > *,
  .dlvd-layout > *, .qard-body > *, .qex-layout > *, .rev-layout > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* A full-height review shell must not trap scroll once stacked. */
  .rev-layout { height: auto !important; min-height: 100dvh !important; }

  /* 3b · Master–detail layouts: the master list becomes a strip on top. */
  .feat-layout,
  .qatc-layout,
  .kb2-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
  }

  /* 3c · Card grids: four and three across is too tight on a tablet. */
  .sd-grid-4, .sd-ws-grid, .qa-coverage-summary { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .sd-grid-3, .sd-goal-3col, .sd-goal-grid-3    { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* 3d · Task detail: sidebar under the thread, no sticky rail. */
  .td-layout  { flex-direction: column !important; }
  .td-sidebar { width: 100% !important; position: static !important; max-height: none !important; }
}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  4 · ≤768px — PHONE. The app-lite treatment.                        ║
   ╚═════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 768px) {

  /* ── 4.1 Foundations ─────────────────────────────────────────────── */

  html {
    -webkit-text-size-adjust: 100%;     /* no surprise reflow on rotate */
    text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
    overscroll-behavior-y: none;         /* kill rubber-band on the shell */
    -webkit-tap-highlight-color: transparent;
  }

  /* Nothing may push the page sideways. */
  .sd-layout, .sd-content, .sd-main, .sd-page,
  .sd-proj-content, .sd-proj-main, .sd-proj-main-inner {
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  /* Media and embeds stay inside their box. */
  img, svg, video, canvas, iframe, embed, object {
    max-width: 100% !important;
    height: auto;
  }
  iframe, video { width: 100% !important; }

  /* Long unbroken strings (URLs, ids, hashes) wrap instead of overflowing. */
  p, li, td, th, dd, dt, blockquote,
  .sd-card-body, .sd-notif-title, .sd-notif-body,
  [class*="-desc"], [class*="-note"], [class*="-body"] {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  code, pre, .font-mono, [class*="-code"] { overflow-wrap: anywhere; }
  pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }


  /* ── 4.2 Page frame ──────────────────────────────────────────────── */

  .sd-main {
    padding-bottom: calc(var(--m-nav-space) + 8px) !important;
  }

  .sd-page, .sd-page-wrap, .sd-proj-main-inner {
    padding-left:  var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
    padding-top: 14px !important;
    width: 100% !important;
  }

  /* Page header: title block over actions, actions full-width and even. */
  .sd-page-header, .sd-heading-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
  }
  .sd-page-header-left, .sd-page-header-right { width: 100% !important; min-width: 0 !important; }
  .sd-page-header-right {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .sd-page-header-right > .sd-btn,
  .sd-page-header-right > .sd-btn-primary,
  .sd-page-header-right > .sd-btn-secondary { flex: 1 1 auto !important; justify-content: center !important; }

  .sd-page-title  { font-size: 20px !important; line-height: 1.25 !important; }
  .sd-page-sub,
  .sd-page-subtitle { font-size: 12.5px !important; line-height: 1.45 !important; }
  .sd-section-heading { font-size: 13px !important; }

  /* Breadcrumbs scroll rather than wrap into a ragged block. */
  .sd-breadcrumb {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    font-size: 11.5px !important;
  }
  .sd-breadcrumb::-webkit-scrollbar { display: none; }


  /* ── 4.3 Top bar — compact brand bar ─────────────────────────────── */

  .sd-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 450 !important;
    height: auto !important;
    min-height: var(--m-header-h) !important;
    padding: calc(var(--sa-top)) 10px 0 10px !important;
    padding-left:  calc(10px + var(--sa-left)) !important;
    padding-right: calc(10px + var(--sa-right)) !important;
  }
  .sd-header-lead    { min-width: 0 !important; gap: 8px !important; }
  .sd-header-actions { gap: 2px !important; flex-shrink: 0 !important; }
  .sd-header-context,
  .sd-header-divider,
  .sd-header-sep,
  .sd-header-shortcut { display: none !important; }

  /* Header icon buttons get real touch targets. */
  .sd-header .sd-icon-btn,
  .sd-header #notifBtn,
  .sd-header #accountBtn {
    min-width: 38px !important;
    min-height: 38px !important;
  }

  /* The project context strip sits directly under the bar. */
  .sd-proj-mobile-header {
    padding-left:  calc(12px + var(--sa-left)) !important;
    padding-right: calc(12px + var(--sa-right)) !important;
  }


  /* ── 4.4 Bottom nav — frosted, safe-area aware, 44px targets ─────── */

  .sd-mobile-nav,
  .sd-proj-mobile-nav {
    height: calc(var(--m-nav-h) + var(--sa-bottom)) !important;
    padding-bottom: var(--sa-bottom) !important;
    padding-left:   var(--sa-left) !important;
    padding-right:  var(--sa-right) !important;
    background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    box-shadow: 0 -1px 0 var(--border-subtle), 0 -8px 24px -18px rgb(16 24 40 / .35) !important;
  }
  @supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .sd-mobile-nav, .sd-proj-mobile-nav { background: var(--surface) !important; }
  }

  .sd-mobile-nav-item,
  .sd-proj-mobile-nav-item {
    min-height: var(--m-tap) !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .sd-mobile-nav-item i { font-size: 21px !important; }
  .sd-mobile-nav-item span { font-size: 10px !important; letter-spacing: .01em !important; }

  /* Active state: tinted glyph plus a short indicator above the label. */
  .sd-mobile-nav-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--brand);
  }
  .sd-mobile-nav-item:active { transform: scale(.94); transition: transform .08s; }

  /* Any floating widget must clear the nav bar. */
  #sd-toasts {
    left: var(--m-gutter) !important;
    right: var(--m-gutter) !important;
    bottom: calc(var(--m-nav-space) + 10px) !important;
    align-items: stretch !important;
  }
  .sd-toast { width: 100% !important; max-width: 100% !important; }

  .va-fab,
  [class*="fab"][class*="voice"],
  #arobit-ai-launcher,
  .arobitai-launcher {
    bottom: calc(var(--m-nav-space) + 12px) !important;
  }


  /* ── 4.5 Cards & panels ──────────────────────────────────────────── */

  .sd-card, .sd-stat-card, .sd-kpi-card, .sd-goal-card,
  .sd-pcard, .sd-ws-card, .sd-stub-card, .sd-type-card, .sd-radio-card {
    border-radius: var(--m-radius) !important;
  }
  .sd-card-header, .sd-card-footer { padding: 12px 14px !important; }
  .sd-card-body { padding: 14px !important; }
  .sd-card-title { font-size: 14px !important; }

  /* Stat tiles: two across, values stay legible. */
  .sd-grid-2, .sd-grid-3, .sd-grid-4,
  .sd-goal-3col, .sd-goal-grid-3, .sd-ws-grid,
  .sd-planning-board, .sd-radio-group,
  .kb2-modal-grid-2, .kb2-picker-grid,
  .mtg-form-row, .mtg-form-row-3, .mtg-kv,
  .md-kv, .doc-create-form-row, .pub-field-group,
  .qex-two-col, .qr-row-two, .tc-grid-2,
  .td-handoff-review, .ea-grid, .su-submitted-grid,
  .td-att-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  /* Metric tiles read better two-up than stacked. */
  .hd-kpi-grid,
  .qa-coverage-summary,
  .qatc-v2-stats,
  [class*="-stats-grid"],
  [class*="-kpi-grid"],
  [class*="-metrics"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* Label/value pairs keep their two columns — they are the pattern. */
  .sd-dmeta-row, .sd-drawer-meta-row, .sd-kr-row {
    gap: 8px !important;
  }

  /* Image thumbnail grids stay multi-column. */
  .att-img-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }

  .sd-stat-val { font-size: 20px !important; }
  .sd-stat-label { font-size: 10.5px !important; }


  /* ── 4.6 Buttons & touch targets ─────────────────────────────────── */

  .sd-btn, .sd-btn-primary, .sd-btn-secondary, .sd-btn-ghost,
  .sd-btn-danger, .sd-btn-create, button:not([class*="icon"]):not([class*="close"]) {
    min-height: var(--m-tap) !important;
    touch-action: manipulation;
  }
  .sd-btn-sm { min-height: 36px !important; }
  .sd-icon-btn, .sd-btn-icon, .sd-modal-close {
    min-width: 38px !important;
    min-height: 38px !important;
    touch-action: manipulation;
  }

  /* Honest press feedback in place of hover. */
  .sd-btn:active, .sd-btn-primary:active, .sd-btn-secondary:active,
  .sd-btn-ghost:active, .sd-btn-danger:active,
  .sd-card:active, .sd-nav-link:active, .sd-dropdown-item:active {
    transform: scale(.985);
    transition: transform .08s var(--ease-standard);
  }

  /* Hover-reveal affordances are always visible on touch. */
  .sd-task-more-btn, .tsk-drag-handle, [class*="-row-actions"] { opacity: 1 !important; }


  /* ── 4.7 Forms — no iOS zoom, full width, thumb-friendly ─────────── */

  .sd-input, .sd-textarea, .sd-search-input, .sd-header-search-input,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"], input[type="tel"],
  input[type="url"], input[type="date"], input[type="time"],
  input[type="datetime-local"], select, textarea {
    font-size: 16px !important;          /* <16px makes iOS zoom the page */
    min-height: 46px !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px !important;
  }
  textarea, .sd-textarea { min-height: 110px !important; line-height: 1.5 !important; }
  select { -webkit-appearance: none; appearance: none; padding-right: 34px !important; }

  .sd-input-sm { min-height: 40px !important; }

  .sd-field, .sd-form-group { margin-bottom: 14px !important; }
  .sd-label, .sd-field-label-sm { font-size: 12px !important; margin-bottom: 6px !important; }
  .sd-hint, .sd-error-msg { font-size: 11.5px !important; }

  .sd-input-prefix-wrap { flex-wrap: nowrap !important; }

  /* Form action rows become a sticky bar docked above the bottom nav. */
  .sd-form-actions {
    position: sticky !important;
    bottom: var(--m-nav-space) !important;
    z-index: 60 !important;
    display: flex !important;
    gap: 8px !important;
    margin: 18px calc(var(--m-gutter) * -1) 0 !important;
    padding: 10px var(--m-gutter) calc(10px + var(--sa-bottom)) !important;
    background: var(--surface) !important;
    border-top: 1px solid var(--border-subtle) !important;
    box-shadow: 0 -8px 20px -16px rgb(16 24 40 / .4) !important;
  }
  .sd-form-actions > * { flex: 1 1 0 !important; justify-content: center !important; }
  .sd-form-actions > a[class*="ghost"],
  .sd-form-actions > button[class*="ghost"] { flex: 0 1 38% !important; }

  .sd-form-page { padding: 0 !important; }


  /* ── 4.8 Tabs, filter strips & segmented controls → scroll rails ──── */

  .sd-tabs, .sd-sprint-tabs, .sd-filter-chips, .sd-filter-bar,
  .sd-view-toggle, .sd-editor-modes, .sd-wizard-steps, .sd-steps,
  .td-tabs, .tsk-filterbar, .qa-tabs, .kb2-tabs,
  [class*="-tabs"]:not([class*="-tab-"]),
  [class*="-filterbar"], [class*="-chips"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-left:  calc(var(--m-gutter) * -1) !important;
    margin-right: calc(var(--m-gutter) * -1) !important;
    padding-left:  var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
  }
  .sd-tabs::-webkit-scrollbar, .sd-sprint-tabs::-webkit-scrollbar,
  .sd-filter-chips::-webkit-scrollbar, .sd-filter-bar::-webkit-scrollbar,
  .td-tabs::-webkit-scrollbar, .tsk-filterbar::-webkit-scrollbar,
  [class*="-tabs"]::-webkit-scrollbar, [class*="-chips"]::-webkit-scrollbar { display: none; }

  .sd-tab, .sd-sprint-tab, .sd-filter-chip, .sd-filter-pill, .sd-chip,
  .td-tab, .sd-view-btn, .sd-editor-mode {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    white-space: nowrap !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Wizard/step rails read as a compact progress strip. */
  .sd-wizard-step, .sd-step { flex: 0 0 auto !important; }
  .sd-wizard-step-connector, .sd-step-line { min-width: 24px !important; }


  /* ── 4.9 Real <table> → label/value cards (via responsive.js) ─────── */

  /* Fallback for any table responsive.js has not labelled: scroll it. */
  table { max-width: 100% !important; }
  .sd-table:not(.sd-rt) { min-width: 560px; }

  /* Card mode. Each row becomes a card; each cell carries its header. */
  table.sd-rt,
  table.sd-rt thead,
  table.sd-rt tbody,
  table.sd-rt tr,
  table.sd-rt td,
  table.sd-rt th {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
  }
  table.sd-rt { border: 0 !important; background: transparent !important; }
  table.sd-rt thead { display: none !important; }

  table.sd-rt tbody tr {
    position: relative;
    background: var(--surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--shadow-1);
    padding: 4px 2px !important;
    margin-bottom: 10px !important;
  }
  table.sd-rt tbody tr:active { background: var(--surface-sunken) !important; }

  table.sd-rt tbody td {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 9px 13px !important;
    font-size: 13px !important;
    text-align: right !important;
    min-height: 0 !important;
  }
  table.sd-rt tbody td:last-child { border-bottom: 0 !important; }

  table.sd-rt tbody td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    padding-top: 1px;
  }
  table.sd-rt tbody td[data-label=""]::before,
  table.sd-rt tbody td:not([data-label])::before { content: none; }

  /* The first cell is the row's identity — promote it to a card title. */
  table.sd-rt tbody td.sd-rt-lead {
    display: block !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    padding: 12px 13px 9px !important;
  }
  table.sd-rt tbody td.sd-rt-lead::before { content: none; }

  /* Action cells: buttons spread across the card foot. */
  table.sd-rt tbody td.sd-rt-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    text-align: left !important;
    background: var(--gray-50) !important;
    border-radius: 0 0 var(--m-radius) var(--m-radius) !important;
  }
  table.sd-rt tbody td.sd-rt-actions::before { content: none; }
  table.sd-rt tbody td.sd-rt-actions > * { flex: 0 1 auto !important; }

  /* An empty-state row must not pretend to be a card. */
  table.sd-rt tbody tr.sd-rt-empty {
    border-style: dashed !important;
    box-shadow: none !important;
    background: var(--gray-50) !important;
  }
  table.sd-rt tbody tr.sd-rt-empty td {
    display: block !important;
    text-align: center !important;
    padding: 22px 14px !important;
  }
  table.sd-rt tbody tr.sd-rt-empty td::before { content: none; }


  /* ── 4.11 On-screen keyboard: fixed bottom chrome steps aside ────── */

  body.sd-osk-open .sd-mobile-nav,
  body.sd-osk-open .sd-proj-mobile-nav { transform: translateY(100%); }

  body.sd-osk-open .sd-main { padding-bottom: 12px !important; }

  body.sd-osk-open .sd-form-actions { bottom: 0 !important; }

  .sd-mobile-nav, .sd-proj-mobile-nav {
    transition: transform .18s var(--ease-standard);
    will-change: transform;
  }

  /* ── 4.10 Empty states (G2) keep their weight on small screens ────── */

  .sd-empty-state { padding: 28px 18px !important; }
  .sd-empty-state-title { font-size: 15px !important; }
  .sd-empty-state-sub   { font-size: 12.5px !important; max-width: 100% !important; }
  .sd-empty-state .sd-btn,
  .sd-empty-state .sd-btn-primary { width: 100% !important; justify-content: center !important; }

}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  5 · ≤768px — OVERLAYS: modals, drawers and menus become sheets     ║
   ╚═════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 768px) {

  /* ── 5.1 Modals → bottom sheets ──────────────────────────────────── */

  .sd-modal-backdrop, .sd-modal-overlay, .sd-task-drawer-overlay,
  .sd-goal-panel-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .sd-modal, .sd-modal-sm, .sd-modal-md, .sd-modal-lg {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh !important;
    margin: 0 !important;
    border-radius: var(--m-sheet-r) var(--m-sheet-r) 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 -10px 40px -8px rgb(16 24 40 / .32) !important;
  }

  /* A grab handle so the sheet reads as draggable (responsive.js honours it). */
  .sd-modal::before, .sd-modal-sm::before, .sd-modal-md::before, .sd-modal-lg::before {
    content: "";
    flex: 0 0 auto;
    width: 38px;
    height: 4px;
    border-radius: 99px;
    background: var(--border-strong);
    margin: 8px auto 2px;
  }

  .sd-modal-head, .sd-modal-header {
    padding: 10px 16px 12px !important;
    flex: 0 0 auto !important;
  }
  .sd-modal-title { font-size: 15px !important; }

  .sd-modal-body {
    padding: 14px 16px !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .sd-modal-foot, .sd-modal-footer {
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 8px !important;
    padding: 12px 16px calc(12px + var(--sa-bottom)) !important;
    border-top: 1px solid var(--border-subtle) !important;
    background: var(--surface) !important;
  }
  .sd-modal-foot > *, .sd-modal-footer > * { flex: 1 1 0 !important; justify-content: center !important; }

  /* A sheet owns the whole screen — the bottom nav must not sit on top. */
  .sd-modal-backdrop.open ~ .sd-mobile-nav,
  body.sd-sheet-open .sd-mobile-nav,
  body.sd-sheet-open .sd-proj-mobile-nav { display: none !important; }


  /* ── 5.2 Side drawers → full-screen panels ───────────────────────── */

  .sd-task-drawer, .sd-goal-panel,
  [class*="-drawer"]:not([class*="-drawer-"]),
  [class*="-sidepanel"], [class*="-side-panel"] {
    width: 100vw !important;
    max-width: 100vw !important;
    inset: 0 !important;
    border-radius: 0 !important;
    padding-top: var(--sa-top) !important;
  }
  .sd-task-drawer-body, .sd-goal-panel-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(16px + var(--sa-bottom)) !important;
  }
  .sd-task-drawer-footer, .sd-goal-panel-footer {
    padding-bottom: calc(12px + var(--sa-bottom)) !important;
  }

  /* The drawer's own two-pane split stacks. */
  .sd-task-drawer-main    { flex-direction: column !important; }
  .sd-task-drawer-sidebar { width: 100% !important; border-left: 0 !important;
                            border-top: 1px solid var(--border-subtle) !important; }
  .sd-task-drawer-props   { grid-template-columns: minmax(0,1fr) !important; }
  .sd-task-drawer-tabs    { overflow-x: auto !important; scrollbar-width: none; }


  /* ── 5.3 Dropdowns & popovers → anchored sheets ──────────────────── */

  .sd-dropdown-menu, .sd-create-dropdown, .sd-ws-dropdown {
    position: fixed !important;
    top: auto !important;
    bottom: var(--m-nav-space) !important;
    left: var(--m-gutter) !important;
    right: var(--m-gutter) !important;
    width: auto !important;
    max-width: none !important;
    max-height: 70dvh !important;
    overflow-y: auto !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--shadow-4) !important;
    -webkit-overflow-scrolling: touch;
  }
  .sd-dropdown-item { min-height: var(--m-tap) !important; font-size: 14px !important; }

  /* Notification / account panels fill the width under the bar. */
  .sd-notif-panel {
    position: fixed !important;
    top: calc(var(--m-header-h) + var(--sa-top)) !important;
    left: var(--m-gutter-sm) !important;
    right: var(--m-gutter-sm) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - var(--m-header-h) - var(--sa-top) - var(--m-nav-space) - 16px) !important;
    overflow-y: auto !important;
    border-radius: var(--m-radius) !important;
    -webkit-overflow-scrolling: touch;
  }
  .sd-notif-item { padding: 12px 14px !important; }

  /* The desktop sidebar never shows here — the drawer replaces it. */
  .sd-sidebar, .sd-proj-sidebar, .sd-sidebar-collapse-btn { display: none !important; }
  .sd-content, .sd-proj-content, .sd-sidebar-collapsed-margin { margin-left: 0 !important; }


  /* ── 5.4 The slide-up menu drawer, polished ──────────────────────── */

  .sd-mobile-menu, .sd-proj-mobile-more {
    bottom: var(--m-nav-space) !important;
    max-height: calc(100dvh - var(--m-header-h) - var(--sa-top) - var(--m-nav-space)) !important;
    border-radius: var(--m-sheet-r) var(--m-sheet-r) 0 0 !important;
    padding-bottom: 10px !important;
    overscroll-behavior: contain;
  }
  .sd-mm-item { min-height: var(--m-tap) !important; }

}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  6 · ≤768px — DENSE GRID ROWS → cards or scroll rails               ║
   ╚═════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 768px) {

  /* 6.1 · Column headers of a pseudo-table are meaningless once the row
          wraps, so they go. The row keeps its data in reading order. */
  .qa-tc-table-head, .qa-runs-head, .qa-suite-health-head,
  .qa-sessions-list-head, .qa-coverage-table-head,
  .qa-rounds-run-table-head, .qa-tc-run-table-head,
  .feat-tc-table-head, .feat-qarun-table-head,
  .tsk-col-head,
  [class*="-table-head"], [class*="-col-head"], [class*="-list-head"] {
    display: none !important;
  }

  /* 6.2 · The rows themselves: grid → wrapping flex card. */
  .qa-tc-row, .qa-runs-row, .qa-suite-health-row, .qa-sessions-row,
  .qa-coverage-row, .qa-rounds-run-row, .qa-tc-run-table-row,
  .feat-tc-row, .feat-qarun-table-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 10px !important;
    grid-template-columns: none !important;
    padding: 11px 13px !important;
    min-height: 0 !important;
    height: auto !important;
    font-size: 12.5px !important;
  }

  /* The title-ish cell takes the full first line. */
  .qa-tc-row > [class*="-title"], .qa-tc-row > [class*="-name"],
  .qa-runs-row > [class*="-title"], .qa-runs-row > [class*="-name"],
  .qa-suite-health-row > [class*="-title"], .qa-suite-health-row > [class*="-name"],
  .qa-sessions-row > [class*="-title"], .qa-sessions-row > [class*="-name"],
  .qa-coverage-row > [class*="-title"], .qa-coverage-row > [class*="-name"],
  .qa-rounds-run-row > [class*="-title"], .qa-rounds-run-row > [class*="-name"],
  .qa-tc-run-table-row > [class*="-title"], .qa-tc-run-table-row > [class*="-name"],
  .feat-tc-row > [class*="-title"], .feat-tc-row > [class*="-name"],
  .feat-qarun-table-row > [class*="-title"], .feat-qarun-table-row > [class*="-name"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }

  /* Everything else becomes a compact meta chip line. */
  .qa-tc-row > *, .qa-runs-row > *, .qa-suite-health-row > *,
  .qa-sessions-row > *, .qa-coverage-row > *, .qa-rounds-run-row > *,
  .qa-tc-run-table-row > *, .feat-tc-row > *, .feat-qarun-table-row > * {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Decorative leading rails (the 10px colour strip) are not needed. */
  .qa-tc-row > [class*="-rail"], .qa-tc-row > [class*="-accent"] { display: none !important; }

  /* 6.3 · Kanban / swimlane boards scroll sideways with snap. */
  .sd-planning-board, .brd-board, [class*="-board"]:not([class*="-board-"]) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 10px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-left:  calc(var(--m-gutter) * -1) !important;
    margin-right: calc(var(--m-gutter) * -1) !important;
    padding: 0 var(--m-gutter) 8px !important;
  }
  .sd-planning-col, .brd-col, [class*="-board"] > [class*="-col"] {
    flex: 0 0 82vw !important;
    max-width: 82vw !important;
    scroll-snap-align: center;
  }

  /* 6.4 · Status column groups (task detail) scroll instead of squashing. */
  .sd-status-cols {
    grid-template-columns: none !important;
    display: flex !important;
    overflow-x: auto !important;
    gap: 10px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sd-status-cols::-webkit-scrollbar { display: none; }
  .sd-status-group { flex: 0 0 78vw !important; }

}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  7 · ≤768px — MASTER–DETAIL screens (Features, QA cases, KB)        ║
   ╚═════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 768px) {

  /* The master list collapses to a scrollable rail above the detail pane,
     so a phone shows one thing at a time without losing navigation. */
  .feat-layout, .qatc-layout, .kb2-shell {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 0 !important;
  }

  .feat-sidebar, .qatc-sidebar, .kb2-sidebar,
  .feat-layout > [class*="-sidebar"],
  .qatc-layout > [class*="-sidebar"],
  .kb2-shell > [class*="-sidebar"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 46dvh !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .feat-detail, .qatc-main, .kb2-main,
  .feat-layout > [class*="-detail"],
  .feat-layout > [class*="-main"],
  .qatc-layout > [class*="-main"],
  .kb2-shell > [class*="-main"] {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* KB tree indentation gets costly on a narrow screen. */
  .kb2-tree-item, [class*="kb2-tree"] [class*="-child"] { padding-left: 10px !important; }

}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  8 · ≤420px — small-phone density pass                              ║
   ╚═════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 420px) {

  :root { --m-gutter: 12px; }

  .sd-page-title { font-size: 18.5px !important; }
  .sd-card-body  { padding: 12px !important; }

  /* One tile per row once two no longer fit without truncating numbers. */
  .hd-kpi-grid, .qa-coverage-summary, .qatc-v2-stats,
  [class*="-stats-grid"], [class*="-kpi-grid"] {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 7px !important;
  }
  .sd-stat-val { font-size: 18px !important; }

  /* Stacked action buttons beat two cramped ones. */
  .sd-page-header-right > .sd-btn,
  .sd-page-header-right > .sd-btn-primary,
  .sd-page-header-right > .sd-btn-secondary { flex: 1 1 100% !important; }

  .sd-mobile-nav-item span { font-size: 9.5px !important; }
  .att-img-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  table.sd-rt tbody td::before { flex-basis: 42%; }
}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║  9 · INSTALLED APP (standalone) — chrome-less, native-feeling       ║
   ╚═════════════════════════════════════════════════════════════════════╝ */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {

  /* No browser bar to absorb the notch, so the app bar pads itself. */
  .sd-header { padding-top: calc(var(--sa-top) + 4px) !important; }

  /* Text selection off on chrome, on where content is read. */
  .sd-header, .sd-mobile-nav, .sd-proj-mobile-nav, .sd-mm-item {
    -webkit-user-select: none;
    user-select: none;
  }

  /* An installed app should never bounce the whole document. */
  html, body { overscroll-behavior: none; }
}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║ 10 · Touch & motion preferences                                     ║
   ╚═════════════════════════════════════════════════════════════════════╝ */

/* Coarse pointers: hover styling is noise, pressed styling is signal. */
@media (hover: none) and (pointer: coarse) {
  .sd-card:hover, .sd-btn:hover, .sd-nav-link:hover,
  .sd-dropdown-item:hover, .sd-table-row-link:hover { box-shadow: none; }
  .sd-tscroll { scrollbar-width: none; }
  .sd-tscroll::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-mobile-menu, .sd-proj-mobile-more, .sd-modal, .sd-task-drawer {
    transition-duration: .01ms !important;
  }
  .sd-btn:active, .sd-card:active, .sd-mobile-nav-item:active { transform: none !important; }
}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║ 11 · Legacy fallback — browsers without overflow:clip               ║
   ╚═════════════════════════════════════════════════════════════════════╝ */
@supports not (overflow: clip) {
  @media (max-width: 768px) {
    .sd-layout, .sd-content, .sd-main, .sd-page,
    .sd-proj-content, .sd-proj-main, .sd-proj-main-inner {
      overflow-x: hidden !important;
    }
  }
}


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║ 12 · Print — the mobile chrome is not part of a document            ║
   ╚═════════════════════════════════════════════════════════════════════╝ */
@media print {
  .sd-mobile-nav, .sd-proj-mobile-nav, .sd-mobile-menu,
  .sd-mobile-menu-backdrop, .sd-proj-mobile-more, #sd-toasts { display: none !important; }
}

/* ═══════════════════════ end responsive.css ═══════════════════════════ */