/* Magic Box — mobile & tablet layer.
   Everything here is scoped to max-width: 1024px (tablet) / 900px (phone)
   so the desktop experience in style.css is completely untouched.

   The phone ceiling is 900px, not 820px, to match style.css's own
   `@media (max-width: 900px)` sidebar collapse (`.sidebar { position:
   relative; height: auto }`, `.app { grid-template-columns: 1fr }`) —
   that rule stacks the full desktop sidebar inline above the main content
   starting at 900px, whether or not this file's phone chrome is active.
   When the two thresholds disagreed (this file cut off at 820px), an
   821–899px window got the stacked-inline sidebar from style.css but NONE
   of this file's phone treatment: no off-canvas drawer, no top/bottom
   bars, and — critically — the documents table never collapsed into
   cards, so its full un-collapsed <table> (still sized for a desktop
   column) overflowed a phone-width viewport with no scrollbar to reach
   the cut-off columns. Landscape phones (~844×390) land squarely in that
   gap. Matching both thresholds at 900px closes it. */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/*
 * `clip`, not `hidden` — and the difference is the whole bug.
 *
 * `overflow-x: hidden` makes the element a scroll container: the overflow is
 * still scrollable, just without a visible bar. In a right-to-left document
 * the browser then parks that scroll at the far end, and `body.scrollLeft`
 * settled at −25. Every box on the page was drawn 25px to the side of where
 * it was laid out, so the right edge of each figure and each tile was cut off
 * the screen — while `documentElement.scrollWidth` still read exactly the
 * viewport width and every overflow check said the page was fine.
 *
 * `clip` clips without creating a scroll container, so no scroll position can
 * exist to shift anything. `hidden` stays first as the fallback for a browser
 * that does not know `clip` (Safari before 16).
 */
html { overflow-x: hidden; overflow-x: clip; }
body { overflow-x: hidden; overflow-x: clip; }

/* The glow blobs are intentionally larger than the viewport and offset so
   their blurred edge fades off-screen. That is fine on desktop (nothing
   scrolls), but on a touch device ANY element extending past [0, innerWidth]
   — fixed, hidden, or clipped makes no difference — makes iOS Safari widen
   the layout viewport itself, and then the whole page can be dragged
   sideways. A real overflow-hidden box around them contains that, instead of
   relying on `clip` further up the tree. */
.bg-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

/* ==================================================================
   Phone layout
   ================================================================== */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }

  body { font-size: 16px; line-height: 1.6; touch-action: pan-y; }

  /* Belt-and-braces: even inside the .bg-layer container, keep the blobs
     from ever measuring wider than the viewport on the phone breakpoint. */
  .bg-glow-1, .bg-glow-2 { max-width: 100vw; }

  /* ---------------------------------------------------------- top bar */
  .mb-topbar {
    position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 70;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 10px 0;
    background: rgba(10, 8, 20, 0.92); backdrop-filter: blur(14px);
    border-block-end: 1px solid var(--line-2);
  }
  /* Brand is centred on the bar as its own unit (bird + wordmark), not
     squeezed into whatever space is left between the hamburger and the sync
     dot — those two have very different widths, so a flex `1fr` slot
     between them would not sit in the visual middle of the screen. Centring
     is direction-symmetric (not a "left/right" concern), so a plain
     left/translateX pair is correct here even in an RTL document. */
  .mb-topbar .mb-brand {
    position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 28px);
    transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: 8px;
    max-width: calc(100% - 130px); overflow: hidden; pointer-events: none;
  }
  .mb-topbar .mb-logo { width: 30px; height: 30px; object-fit: contain; flex: none; filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.55)); }
  .mb-topbar .mb-title { font-weight: 900; font-size: 16px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; }
  .mb-topbar .mb-title span { background: linear-gradient(90deg, #c084fc, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .mb-topbar .mb-syncdot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted-2); box-shadow: 0 0 8px currentColor; }
  .mb-topbar .mb-syncdot.on { background: var(--cyan); animation: mb-pulse 1.4s ease-in-out infinite; }
  .mb-topbar .mb-syncdot.err { background: var(--red); }
  @keyframes mb-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
  .mb-hamburger {
    flex: none; width: 44px; height: 44px; display: grid; place-items: center;
    background: transparent; border: 0; border-radius: 10px; color: var(--ink);
  }
  .mb-hamburger:active { background: rgba(255, 255, 255, 0.08); }
  .mb-hamburger .bars { position: relative; width: 20px; height: 14px; }
  .mb-hamburger .bars span { position: absolute; inset-inline: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
  .mb-hamburger .bars span:nth-child(1) { top: 0; }
  .mb-hamburger .bars span:nth-child(2) { top: 6px; }
  .mb-hamburger .bars span:nth-child(3) { top: 12px; }
  body.drawer-open .mb-hamburger .bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.drawer-open .mb-hamburger .bars span:nth-child(2) { opacity: 0; }
  body.drawer-open .mb-hamburger .bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  body { padding-block-start: calc(56px + env(safe-area-inset-top, 0px)); }

  /* ------------------------------------------------------- app layout */
  .app { display: block; min-height: 0; }
  .main { padding: 12px 12px calc(88px + env(safe-area-inset-bottom, 0px)); gap: 12px; max-width: 100vw; }

  /* ---------------------------------------------------- sidebar drawer */
  .sidebar {
    /* Docked on the same edge as the desktop sidebar: inline-start, which
       resolves to the right in this app's RTL document. */
    position: fixed; inset-block: 0; inset-inline-start: 0; inset-inline-end: auto;
    width: min(84vw, 320px); height: 100%; z-index: 90;
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
    padding-block-start: calc(16px + env(safe-area-inset-top, 0px));
    padding-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  /* transform is physical, not logical (it never auto-flips with
     direction), so closed state must slide out toward the same physical
     edge the panel is docked on: right in RTL, left in LTR. */
  :dir(rtl) .sidebar { transform: translateX(100%); }
  :dir(ltr) .sidebar { transform: translateX(-100%); box-shadow: 20px 0 60px rgba(0, 0, 0, 0.6); }
  body.drawer-open .sidebar { transform: translateX(0); }

  .mb-overlay {
    position: fixed; inset: 0; z-index: 80; background: rgba(4, 3, 10, 0.62);
    backdrop-filter: blur(2px); opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
  }
  body.drawer-open .mb-overlay { opacity: 1; pointer-events: auto; }
  body.drawer-open { overflow: hidden; }

  /* ------------------------------------------------------------ topbar */
  .topbar { flex-wrap: wrap; gap: 8px; }
  .search-wrap { flex: 1 1 100%; order: 1; }
  .seg#direction-tabs { order: 2; flex: 1; }
  .seg#direction-tabs button { flex: 1; padding: 8px 6px; font-size: 12.5px; min-height: 44px; }
  .view-toggle { order: 3; }
  .view-toggle button { min-width: 44px; min-height: 44px; }
  .search { padding-block: 12px; font-size: 16px; }

  /* -------------------------------------------------------------- panel */
  .panel { padding: 14px 12px; border-radius: 14px; }
  .panel-title { font-size: 17px; }

  /* --------------------------------------------------- period strip/card */
  .report-controls { flex-wrap: wrap; gap: 8px; width: 100%; }
  .panel-head { flex-wrap: wrap; }
  #cycle-seg button { font-size: 12.5px; padding: 7px 10px; }

  .period-strip-wrap { gap: 2px; }
  .period-strip { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 8px; }
  .pchip { scroll-snap-align: start; min-width: 132px; }
  /* Swipe is the interaction on touch; the arrow buttons just add clutter. */
  .strip-arrow { display: none; }

  .period { padding: 14px 12px; }
  .period-top { flex-wrap: wrap; gap: 6px; }
  .period-label { font-size: 13.5px; }
  .period-dates { font-size: clamp(15px, 5.5vw, 20px); }
  .period-nav .icon-btn, .icon-btn:not(.strip-arrow) { min-width: 44px; min-height: 44px; font-size: 22px; display: inline-flex; align-items: center; justify-content: center; }

  .rep-cells { gap: 8px; }
  .rep-line { grid-template-columns: 1fr; gap: 6px; }
  .rep-label { font-size: 10px; }
  .cur-cell { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .cur-cell.all { flex-basis: 100%; }

  .vf-cells { gap: 8px; }
  .vf-cell { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 9px 11px; }

  .rep-controls-row { gap: 8px; }
  .chk-chip { font-size: 11.5px; padding: 7px 11px; flex: 1 1 auto; text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; }

  /* ------------------------------------------------ money figures & totals
     Big mono numbers must shrink to fit rather than clip or truncate. */
  .sum-row { margin: 14px 0 12px; }
  .sum-cell { min-width: 0; }
  .sum-val, .sum-other {
    font-size: clamp(20px, 7vw, 30px); font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere; white-space: normal; min-width: 0;
  }
  .sum-other { font-size: clamp(11px, 3.4vw, 12px); }

  .big-box { min-width: 0; padding: 14px 14px; }
  .bb-tiles {
    display: grid; grid-template-columns: 1fr; gap: 6px; margin: 10px 0 8px;
  }
  .bb-tile { min-width: 0; width: 100%; }
  .bb-tile .tl-val {
    font-size: clamp(15px, 5vw, 19px); white-space: normal; overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums; min-width: 0;
  }
  .bb-tile.res .tl-val { font-size: clamp(19px, 6.5vw, 26px); }
  .bb-op { padding: 0; text-align: center; }

  .rate-in { min-height: 44px; }

  .period-actions { flex-direction: column; }
  .period-actions .btn, .period-actions a.btn { width: 100%; min-width: 0; text-align: center; min-height: 46px; display: flex; align-items: center; justify-content: center; }
  .outside-expenses-card { grid-template-columns:1fr; }
  .outside-expenses-card strong { grid-row:auto; grid-column:auto; font-size:20px; }
  .outside-expenses-card small { grid-column:auto; }
  .period-hint { margin-inline-end: 0; order: 99; text-align: center; }

  /* ------------------------------------------------------------- filters */
  .filters-panel .filters { gap: 8px; }
  /* `max-width: none` let a select grow to its widest option: the vendor list
     holds names like "קרמבו אטרקציות לאירועים בע״מ", so the control measured
     419px inside a 375px screen and its far end was cut off by the body's
     clip — unreachable, and invisible to a page-scroll check. A form control
     must fit the screen; the long name belongs to the option, which truncates
     inside the opened list. */
  .filters select, .filters input[type="date"] {
    font-size: 16px; padding: 10px; flex: 1 1 calc(50% - 4px);
    min-width: 0; max-width: 100%; text-overflow: ellipsis;
  }
  .presets { flex-wrap: wrap; width: 100%; overflow-x: auto; }
  .presets button { min-height: 44px; }
  /* iOS Safari gives <input type=date> an intrinsic min width that ignores
     a plain `width: 100%` on a flex child — the control measured 364px wide
     starting at -14px on a 375px screen, which is exactly the widening
     `documentElement.scrollWidth` misses (see the file banner above). Force
     it to negotiate like any other flex item with min-width: 0, and drop
     `-webkit-appearance` so Safari stops sizing it off its native chrome. */
  .range {
    display: flex; flex-wrap: wrap; width: 100%; min-width: 0; flex: 1 1 100%; gap: 8px;
  }
  .range label {
    flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: 6px;
  }
  .range input[type="date"] {
    flex: 1 1 auto; min-width: 0; max-width: 100%; width: auto;
    -webkit-appearance: none; appearance: none;
  }

  /* --------------------------------------------------------------- stats */
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat.chart, .stat.excluded-box { grid-column: span 2; }
  .stat { min-width: 0; }
  .stat .val {
    font-size: clamp(15px, 5.2vw, 22px); overflow-wrap: anywhere;
    white-space: normal; font-variant-numeric: tabular-nums; min-width: 0;
  }

  /* --------------------------------------------------------------- cards */
  .grid { grid-template-columns: 1fr; gap: 10px; }
  .card { flex-direction: row-reverse; }
  .card .stripe { position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; height: auto; }
  .card .thumb { width: 96px; aspect-ratio: auto; flex: none; border-inline-start: 1px solid var(--line); border-block-end: 0; }
  .card .body { flex: 1; min-width: 0; padding: 10px 12px; justify-content: center; }
  .card .sel { opacity: 1; }

  /* ---------------------------------------------------------- list->cards */
  .documents-panel .table,
  .documents-panel .table thead,
  .documents-panel .table tbody,
  .documents-panel .table tr { display: block; width: 100%; }
  .documents-panel .table thead { display: none; }
  .documents-panel .table tr {
    display: grid; grid-template-columns: auto 52px 1fr; gap: 4px 10px; align-items: center;
    border: 1px solid var(--line-2); border-radius: 12px; padding: 10px; margin-block-end: 10px;
    background: var(--panel);
  }
  .documents-panel .table td { display: block; border: 0; padding: 2px 0; }
  .documents-panel .table td:nth-child(1) { grid-row: 1 / 4; grid-column: 1; }
  .documents-panel .table td:nth-child(2) { grid-row: 1 / 4; grid-column: 2; }
  .documents-panel .table td:nth-child(2) .mini { width: 52px; height: 66px; }
  .documents-panel .table td:nth-child(3) { grid-column: 3; grid-row: 1; font-size: 12px; color: var(--muted); }
  .documents-panel .table td:nth-child(4) { grid-column: 3; grid-row: 2; }
  .documents-panel .table td:nth-child(5),
  .documents-panel .table td:nth-child(6) { display: none; }
  .documents-panel .table td:nth-child(7) { grid-column: 3; grid-row: 3; font-size: 15px; }
  .documents-panel .table td:nth-child(8) { display: none; }
  .documents-panel .table td:nth-child(9) { display: none; }
  .documents-panel .table td:nth-child(10) { grid-column: 3; grid-row: 4; font-size: 12px; }

  .row-actions { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .panel-head.compact { flex-wrap: wrap; gap: 8px; }

  .more-details > summary { min-height: 44px; display: flex; align-items: center; }
  .how > summary { min-height: 44px; display: flex; align-items: center; }

  /* --------------------------------------------------------------- drawer */
  .drawer { width: 100vw; }
  /* `overflow-y: auto` alone makes the browser compute overflow-x as `auto`
     too (CSS Overflow §3's "the other axis becomes auto" rule) — the same
     unintended-scroll-container trap as the html/body comment at the top of
     this file, just triggered by the Y axis instead of an explicit
     `overflow-x`. Once that happens, the grid's `1fr` track sized itself off
     a vendor select's long option text (e.g. "קרמבו אטרקציות לאירועים בע״מ")
     instead of the visible width, so every row in the form measured ~386px
     inside a 364px drawer. min-width: 0 lets the grid items — and the
     select/input inside them — shrink to the real column width instead of
     their content's min-content size; overflow-x: clip is belt-and-braces
     so a future wide child can't reopen the scroll-parking bug either. */
  .drawer-body {
    grid-template-columns: 1fr; padding: 14px 14px calc(30px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden; overflow-x: clip;
  }
  .drawer-body > * { min-width: 0; }
  .doc-form .row { min-width: 0; }
  .doc-form .row > * { min-width: 0; }
  .doc-form select, .doc-form input, .doc-form textarea { max-width: 100%; min-width: 0; }

  /* ---------------------------------------------------------------- modal */
  .modal { align-items: flex-end; padding: 0; }
  .modal-card {
    width: 100%; max-width: 100%; max-height: 88vh; border-radius: 20px 20px 0 0;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    animation: mb-sheet-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  .manual-modal-head { top:-16px; margin:-16px -14px 12px; padding:12px 14px 9px; }
  .manual-modal-head .btn { min-height:44px; }
  @keyframes mb-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .modal-card .form input, .modal-card .form select, .modal-card input, .modal-card select, .doc-form input, .doc-form select, .doc-form textarea {
    font-size: 16px; padding: 11px 12px;
  }
  .modal-card .actions .btn, .modal-card .actions a.btn { min-height: 46px; flex: 1; }
  .modal-card .tabs { flex-wrap: wrap; }
  .modal-card .tabs button { min-height: 44px; }

  /* Settings modal → accounts tab: color swatch + name field + "active"
     checkbox + three action buttons in one row (six items) is too much for
     a phone-width sheet with `overflow-x: visible` (the desktop default) —
     the last two buttons measured off the row entirely, past the left edge,
     with no scrollbar to reach them. Let the row wrap instead of overflow. */
  .acct-item { flex-wrap: wrap; row-gap: 8px; }
  .acct-item input[type="text"] { flex: 1 1 100%; min-width: 0; }
  .acct-item .btn.sm { min-height: 40px; }

  /* Background stays put while a modal is open — the sheet has its own
     internal scroll (max-height + overflow-y on .modal-card above). */
  body.mb-modal-open { overflow: hidden; }

  /* -------------------------------------------------------------- bulkbar */
  .bulkbar { flex-wrap: wrap; top: calc(56px + env(safe-area-inset-top, 0px) + 6px); }
  .bulk-actions { width: 100%; margin-inline-end: 0; overflow-x: auto; flex-wrap: nowrap; }

  /* ---------------------------------------------------------- sync dock */
  .sync-dock {
    inset-inline: 12px; inset-block-end: calc(84px + env(safe-area-inset-bottom, 0px));
    width: auto; min-width: 0;
  }
  body.mb-modal-open .sync-dock { display: none; }

  /* ------------------------------------------------------ bottom action bar */
  .mb-bottombar {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60;
    display: flex; gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 8, 20, 0.94); backdrop-filter: blur(14px);
    border-block-start: 1px solid var(--line-2);
  }
  .mb-bottombar button {
    flex: 1; min-height: 48px; border-radius: 12px; font-weight: 700; font-size: 13px;
    border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  }
  .mb-bottombar button .ic { font-size: 17px; }
  .mb-bottombar button[data-act="smartbee"], .mb-bottombar button[data-act="voice"] { font-size: 11px; }
  /* Six actions on one row: a little less gap and padding so every label
     still fits a 360px phone (measured in scripts/test-voice-invoice-ui). */
  .mb-bottombar { gap: 6px; padding-inline: 8px; }
  .mb-bottombar button { min-width: 0; padding-inline: 2px; line-height: 1.15; }
  .mb-bottombar button.mb-primary { background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff; border-color: transparent; box-shadow: 0 0 18px rgba(168, 85, 247, 0.45); }
  body.mb-modal-open .mb-bottombar { display: none; }

  /* -------------------------------------------------------------- toasts */
  .toasts { inset-inline-start: 12px; inset-inline-end: 12px; inset-block-end: calc(84px + env(safe-area-inset-bottom, 0px)); left: auto; }
  .toast { max-width: none; }

  /* ---------------------------------------------------------- tap-toast */
  .mb-tap-toast {
    position: fixed; inset-inline: 12px; inset-block-end: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 110; background: #000; color: #fff; border: 1px solid var(--line-2);
    border-radius: 12px; padding: 10px 14px; font-size: 13px; text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none;
  }
  .mb-tap-toast.show { opacity: 1; transform: none; }
}

@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 900px) {
    .mb-bottombar { padding-block-end: calc(8px + env(safe-area-inset-bottom)); }
  }
}

/* ==================================================================
   Tablet: two-column where it helps. The phone treatment above now goes
   all the way to 900px (matching style.css's own sidebar-collapse
   threshold — see the file banner), so this block only covers genuine
   tablet widths, 901–1024px, where style.css keeps its fixed desktop
   sidebar and there's enough room for a slightly richer grid.
   ================================================================== */
@media (min-width: 901px) and (max-width: 1024px) {
  .main { padding: 18px 20px 24px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .cur-cell, .vf-cell { flex: 1 1 calc(33.33% - 8px); }
}

@media (min-width: 481px) and (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==================================================================
   Manual capture: the "not legible, retake" banner and its button need
   the same 44px touch target as "שמור תיקונים" already gets in style.css.
   ================================================================== */
@media (max-width: 900px) {
  .manual-file-blurry { font-size: 13px; padding: 10px 12px; }
  .manual-file-blurry button[data-retake] { min-height: 44px; padding: 10px 16px; }
  .manual-file-readstatus { font-size: 12.5px; }
}

/* ==================================================================
   Login page
   ================================================================== */
@media (max-width: 900px) {
  .login { padding: 16px; align-items: center; }
  .login-card { margin: 0 16px; padding: 28px 20px 22px; width: auto; max-width: none; }
  .login-card .logo { width: 190px; }
  .login-card h1 { font-size: 25px; }
  .login-form input { font-size: 16px; padding: 13px 14px; }
  .google-btn { padding: 16px; font-size: 16px; }
  .steps { grid-template-columns: 1fr; gap: 6px; }
}

/* ------------------------------------------------- כרטיס הקובץ בהעלאה ידנית
 * שתי עמודות של שדות נכנסות בטאבלט ולא בטלפון: ברוחב 390 כל שדה מקבל 131
 * פיקסלים, והפקד עצמו רוצה 202. `min-width: 0` ב-style.css מונע את החריגה,
 * אבל שדה דחוס ל-131 פיקסלים עדיין אינו שדה שאפשר להקליד בו. מתחת ל-520
 * שדה אחד בשורה.
 */
@media (max-width: 520px) {
  .manual-file-fields .row, .doc-form .row { grid-template-columns: 1fr; }
  .manual-file { padding: 12px; }
  .manual-file-thumb { width: 46px; height: 46px; }
}