/* =====================================================================
   АВТОФОР — MOBILE LAYER (standalone, ≤820px)
   ---------------------------------------------------------------------
   This file is intentionally self-contained and ONLY adds a @media block
   for screens ≤820px. It must be linked AFTER style.css in index.html:
     <link rel="stylesheet" href="/css/mobile.css">
   It never edits or duplicates desktop rules destructively; everything
   below lives inside the @media query (except the print note at the end).

   DESIGN PRIORITIES (per touch-reliability brief):
     1. Every interactive control is reliably tappable (≥44px hit area).
     2. No 300ms tap delay (touch-action:manipulation everywhere).
     3. The fixed bottom ribbon NEVER uses backdrop-filter — iOS Safari
        breaks tap delivery to blurred position:fixed bars. Solid --bg2.
     4. Inputs ≥16px to stop accidental pinch-zoom on focus.
     5. Ribbon is a real compositing layer (translateZ(0)) + pointer-events:auto.

   PRINT SAFETY: the ribbon is a navigation affordance, not printable
   content — it is hidden in print below. No desktop rules are altered.
   ===================================================================== */

@media (max-width: 820px) {

  /* ---- mobile-only variables (additive, do not touch desktop vars) ---- */
  :root {
    --tap: 44px;          /* minimum tappable height */
    --ribbon-h: 58px;     /* ribbon visual height (excl. safe area) */
    --ribbon-pad: 8px;    /* bottom safe-area padding */
  }

  /* ---------- shell / layout ---------- */
  .app-shell { display: block; min-height: 100vh; }
  .sidebar { display: none !important; }            /* free the screen for content */

  .main {
    max-width: 100%;
    padding: 16px 14px calc(var(--ribbon-h) + var(--ribbon-pad) + env(safe-area-inset-bottom) + 12px);
  }
  .topbar { flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
  .topbar h2 { font-size: 19px; }
  .user-chip { gap: 8px; flex-wrap: wrap; }
  .top { gap: 10px; }

  /* grid collapses to 1 col, breathes to 2 on wider phones */
  .grid { grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 480px) { .grid { grid-template-columns: 1fr 1fr; } }
  .card { padding: 14px 16px; }
  .card .v { font-size: 26px; }
  .panel { padding: 16px 16px; margin-top: 16px; }
  .row { flex-direction: column; gap: 12px; }
  .row > * { min-width: 0; }                        /* let inputs go full width */

  /* ---------- bottom navigation ribbon ---------- */
  .mobile-ribbon {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    width: 100%;
    background: var(--bg2);                          /* SOLID — no backdrop-filter (iOS tap bug) */
    border-top: 1px solid var(--line);
    padding: 4px 4px calc(var(--ribbon-pad) + env(safe-area-inset-bottom));
    overflow-x: auto;                               /* horizontal scroll if links overflow */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -6px 24px rgba(0,0,0,.45);
    transform: translateZ(0);                       /* stable compositing layer */
    -webkit-transform: translateZ(0);
    pointer-events: auto;                           /* never let taps fall through */
    -webkit-tap-highlight-color: transparent;
  }
  .ribbon-btn {
    flex: 1 0 auto;                                 /* keep natural width, allow scroll */
    min-width: 60px;
    flex-shrink: 0;                                 /* never clip a button's hit area */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    min-height: 52px;                              /* ≥52px hit target */
    border-radius: 10px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;                    /* kill 300ms delay */
    user-select: none;
  }
  .ribbon-btn:active { background: var(--panel2); }
  .ribbon-btn.active,
  .ribbon-btn[aria-current="page"] {
    color: var(--gold);
    background: var(--panel);
    font-weight: 600;
  }
  .ribbon-ico { font-size: 19px; line-height: 1; }
  .ribbon-lbl { white-space: nowrap; }

  /* ---------- buttons: ≥44px tap height + visible active feedback ---------- */
  .btn, .btn-gold, .btn-ghost, .btn-block {
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    font-size: 15px;
    line-height: 1.2;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform .05s ease, background .12s ease;
  }
  .btn-sm { min-height: var(--tap); padding: 9px 12px; font-size: 13px; }
  .btn-block { width: 100%; }
  .btn:active, .btn-gold:active, .btn-ghost:active { transform: scale(.97); filter: brightness(1.08); }
  .btn-ghost:active { background: var(--panel2); }

  /* ---------- forms: full width, comfortable, labels visible ---------- */
  .field { margin-bottom: 14px; }
  .field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
  input, select, textarea {
    width: 100%;
    min-height: var(--tap);
    padding: 11px 12px;
    font-size: 16px;                                /* ≥16px → prevents iOS zoom-on-focus */
    line-height: 1.3;
    border-radius: 9px;
    touch-action: manipulation;                     /* responsive typing, no delay */
    -webkit-appearance: none;
  }
  textarea { min-height: 88px; }
  input[type="checkbox"] { width: 22px; height: 22px; min-height: 22px; flex: 0 0 auto; }
  select { background-image: none; }                /* simplify native arrow on mobile */

  /* ---------- tables: horizontal scroll, readable, tappable actions ---------- */
  .main .panel { overflow: visible !important; }    /* defeat inline overflow:hidden so table can scroll */
  table.list {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table.list th, table.list td {
    font-size: 14px;
    padding: 12px 12px;
    white-space: nowrap;
  }
  table.list td a {                                  /* tappable row/case links */
    display: inline-block;
    min-height: var(--tap);
    line-height: var(--tap);
    padding: 0 4px;
  }
  .mono { font-size: 13px; word-break: break-all; white-space: normal; }

  /* ---------- pills / results / timeline remain readable ---------- */
  .pill { font-size: 12px; padding: 5px 11px; }
  .result { padding: 16px; }
  .result .big { font-size: 20px; flex-wrap: wrap; }
  .triggers { gap: 8px; }
  .trig { font-size: 12px; padding: 5px 9px; }
  .struct-grid { grid-template-columns: 1fr; }
  .alert-bar { font-size: 13px; }

  /* ---------- generic modal / detail sheet (full-screen-ish, easy close) ----------
     Covers every modal surface the app + new view modules (views-vin/views-cases)
     may render: .modal, .dialog, .sheet, .detail-sheet, .panel.sheet, .sheet-mobile.
     Any of these opened on ≤820px becomes a bottom sheet that slides up. */
  .modal, .modal-backdrop, .sheet, .detail-sheet, .dialog, .panel.sheet,
  .sheet-mobile, .sheet-mobile.modal, .sheet-mobile.dialog, .sheet-mobile.sheet {
    position: fixed !important;
    inset: 0;
    z-index: 1100;
    background: rgba(8,8,14,.72);
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
  }
  .modal > .panel, .sheet > .panel, .detail-sheet > .panel,
  .dialog > .panel, .panel.sheet, .sheet-mobile > .panel {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    min-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* JS-independent guarantee: anything tagged .sheet-mobile slides up from the
     bottom (mirrors the inline rule mobile-ux.js injects, so it works even if
     that script fails to load). */
  .sheet-mobile, .sheet-mobile.modal, .sheet-mobile.dialog, .sheet-mobile.sheet {
    inset: auto 0 0 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    background: var(--bg2, #16161f) !important;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -12px 40px rgba(0,0,0,.55);
    animation: autofor-sheet-up .24s ease-out;
  }
  .sheet-mobile > .panel {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .sheet-mobile::before {
    content: "";
    display: block;
    width: 44px; height: 5px;
    margin: 8px auto 2px;
    border-radius: 3px;
    background: rgba(255,255,255,.28);
    flex: 0 0 auto;
  }
  @keyframes autofor-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
  /* close affordance: any .close / [data-close] / .modal-close / .dialog-close is a big tap target */
  .close, [data-close], .modal-close, .sheet-close, .dialog-close, .sheet-mobile [data-close],
  .sheet-mobile .close {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--tap);
    background: var(--panel2);
    color: var(--text);
    border: none;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .close:active, [data-close]:active, .modal-close:active, .sheet-close:active,
  .dialog-close:active { background: var(--panel); filter: brightness(1.12); }

  /* ---------- login screen ---------- */
  .login-wrap { padding: 16px; align-items: flex-start; }
  .login-card { padding: 24px 20px; max-width: 100%; }
  .login-card h1 { font-size: 20px; }

  /* ---------- misc touch polish ----------
     Universal tap-safety net for any element any view (current or the new
     views-vin/views-cases modules) may render: no 300ms delay, no grey flash,
     and an explicit visible :active response. */
  a, button, .ribbon-btn, .btn { -webkit-tap-highlight-color: transparent; }
  a, a:hover, a:focus, button, .btn, input, select, textarea, label, .trig,
  .pill, .nav-link, .ribbon-btn { touch-action: manipulation; }
  button:active, .btn:active, [data-route]:active, .nav-link:active,
  .ribbon-btn:active, .trig:active, .pill:active, a:active { opacity: .82; }
  a { min-height: var(--tap); }
  * { -webkit-text-size-adjust: 100%; }
  /* 44px-min hit height for any interactive inline element a view emits
     (guards buttons/links not already given a height by a more specific rule). */
  .btn, .btn-gold, .btn-ghost, .btn-block, .btn-sm,
  button, a, .trig, .pill { min-height: var(--tap); }
  /* scroll-to-top anchor appended by mobile-ux.js on route change */
  .autofor-scrolltop {
    position: fixed;
    right: 16px;
    bottom: calc(var(--ribbon-h, 58px) + var(--ribbon-pad, 8px) + env(safe-area-inset-bottom, 0px) + 88px);
    z-index: 950;
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid var(--line, rgba(255,255,255,.12));
    background: var(--panel2, rgba(255,255,255,.07));
    color: var(--text, #eee);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .12s ease;
  }
  .autofor-scrolltop.show { opacity: 1; pointer-events: auto; }
  .autofor-scrolltop:active { transform: scale(.94); background: var(--panel, rgba(255,255,255,.12)); }
}

/* =====================================================================
   PRINT SAFETY NOTE
   The mobile ribbon and any full-screen sheets are interactive UI, not
   printable evidence. Hide them on paper so case/PDF exports stay clean.
   This only affects print media and leaves the screen (desktop) untouched.
   ===================================================================== */
@media print {
  .mobile-ribbon,
  .modal,
  .modal-backdrop,
  .sheet,
  .detail-sheet,
  .dialog,
  .panel.sheet,
  .sheet-mobile,
  .autofor-fab-wrap,
  .autofor-fab-scrim,
  .autofor-scrolltop,
  .close,
  [data-close],
  .modal-close,
  .dialog-close { display: none !important; }
  .main { padding: 0 !important; max-width: none !important; }
}