/* Threshold — mobile app layer.
 *
 * Loaded after app.css on every page (injected by src/server.js). Everything
 * here is scoped to coarse-pointer / narrow viewports, so the desktop site is
 * byte-for-byte unchanged; a phone gets an app instead of a shrunken website.
 *
 * Three tiers:
 *   1. TOUCH        — any touch device, any width. Hit sizes, no focus-zoom,
 *                     press feedback, safe areas.
 *   2. PHONE        — <=760px. App bar, menu sheet, tables as cards.
 *   3. TOOL PAGES   — <=760px on a page with a map (body.m-app, set by
 *                     mobile.js). Full-bleed map + a draggable bottom sheet.
 */

:root{
  --m-bar-h:56px;          /* app bar */
  --m-tab-h:56px;          /* bottom tab bar */
  --m-search-h:60px;       /* the collapsed search row on tool pages */
  --m-radius:18px;
  --m-safe-t:env(safe-area-inset-top,0px);
  --m-safe-b:env(safe-area-inset-bottom,0px);
  --m-safe-l:env(safe-area-inset-left,0px);
  --m-safe-r:env(safe-area-inset-right,0px);
  --m-sheet-shadow:0 -10px 40px -18px rgba(22,24,28,.34);
  --m-ease:cubic-bezier(.32,.72,0,1);   /* iOS-ish sheet easing */
}

/* ==========================================================================
   1. TOUCH — any touch device
   ========================================================================== */
@media (hover:none) and (pointer:coarse){

  /* iOS zooms the whole page when a focused control's text is under 16px, and
     never zooms back out. That single behaviour is the loudest "this is a
     website" tell there is, so every control goes to 16px. The visual size is
     held down with padding instead. */
  input,select,textarea{font-size:16px !important}
  /* Number spinners eat width on a phone and are unusable at thumb size. */
  input[type=number]{-moz-appearance:textfield}
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

  /* Grey flash on tap is an artefact of the web; real apps animate the press. */
  *{-webkit-tap-highlight-color:transparent}
  a,button,summary,label,.btn,input[type=checkbox]{touch-action:manipulation}
  .btn,button,.dd>summary,.us-chip,.sector,.tier{
    transition:transform .1s var(--m-ease),background-color .1s,border-color .1s}
  .btn:active,button:active,.dd>summary:active{transform:scale(.97)}
  .us-chip:active,.sector.on:active,.tier:active{transform:scale(.985)}
  /* Hover styling on a touch device sticks after the tap ends — drop it. */
  .btn:hover{background:var(--ink)}
  .btn.ghost:hover{background:transparent;color:var(--ink)}
  .us-chip:hover,.sector.on:hover,.tier:hover{transform:none}
  tr:hover td{background:transparent}

  /* Chrome should not look selectable; content still is. */
  .th-nav,.m-bar,.m-tabs,.m-sheet-grab,.m-menu,.btn,button,th{
    -webkit-user-select:none;user-select:none}

  /* Native-sized targets. Apple asks 44px, Android 48dp. */
  .btn,button:not(.m-plain),.dd>summary{min-height:44px;display:inline-flex;
    align-items:center;justify-content:center}
  .th-foot a,.dd-menu a{display:inline-block;padding:7px 0}
  .dd-menu a{padding:12px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px;accent-color:var(--accent)}

  /* Rubber-band the sheet/panel, not the document behind it. */
  body{overscroll-behavior-y:contain}
  .table-scroll,.two-col>div{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
}

/* ==========================================================================
   2. PHONE — <=760px
   ========================================================================== */
@media (max-width:760px){

  /* ---- app bar: one fixed 56px row, never a wrapping three-line block ---- */
  .th-nav{
    padding:0 6px 0 14px;
    padding-left:calc(14px + var(--m-safe-l));
    padding-right:calc(6px + var(--m-safe-r));
    padding-top:var(--m-safe-t);
    height:calc(var(--m-bar-h) + var(--m-safe-t));
    gap:10px;flex-wrap:nowrap;align-items:center;
    background:rgba(251,251,249,.82);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid rgba(230,229,223,.9);
  }
  .th-nav .brand{font-size:19px;gap:8px;flex:none;min-height:44px;align-items:center}
  /* Everything the desktop nav puts on the right is mirrored into the menu
     sheet, so the bar keeps only the brand, the region pill and the button.
     (The originals stay in the DOM — nav.js and the page scripts keep writing
     to them — they are just not shown.) */
  .th-nav .m-navctl{display:none !important}
  .th-nav .region-switch{margin-left:auto;flex:none}
  .th-nav .region-switch a{padding:0 13px;min-height:36px;display:inline-flex;align-items:center}

  /* menu button — 44px, right-aligned, three rules */
  .m-menu-btn{margin-left:auto;flex:none;width:44px;height:44px;display:grid;
    place-items:center;background:none;border:none;padding:0;cursor:pointer;color:var(--ink)}
  .m-menu-btn .bars{width:19px;height:13px;position:relative;display:block}
  .m-menu-btn .bars i{position:absolute;left:0;right:0;height:1.8px;border-radius:2px;
    background:currentColor;transition:transform .22s var(--m-ease),opacity .16s}
  .m-menu-btn .bars i:nth-child(1){top:0}
  .m-menu-btn .bars i:nth-child(2){top:5.6px}
  .m-menu-btn .bars i:nth-child(3){top:11.2px}
  body.m-menu-open .m-menu-btn .bars i:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
  body.m-menu-open .m-menu-btn .bars i:nth-child(2){opacity:0}
  body.m-menu-open .m-menu-btn .bars i:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

  /* ---- menu: a real sheet that slides in from the right ---- */
  .m-scrim{position:fixed;inset:0;z-index:1400;background:rgba(22,24,28,.34);
    opacity:0;pointer-events:none;transition:opacity .24s var(--m-ease);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  body.m-menu-open .m-scrim{opacity:1;pointer-events:auto}
  .m-menu{position:fixed;top:0;bottom:0;right:0;z-index:1500;
    width:min(320px,86vw);background:var(--card);
    border-left:1px solid var(--line);box-shadow:-18px 0 48px -28px rgba(22,24,28,.5);
    transform:translateX(100%);transition:transform .3s var(--m-ease);
    display:flex;flex-direction:column;
    padding:calc(14px + var(--m-safe-t)) 0 calc(14px + var(--m-safe-b));
    overscroll-behavior:contain;overflow-y:auto}
  body.m-menu-open .m-menu{transform:none}
  .m-menu-head{display:flex;align-items:center;justify-content:space-between;
    padding:4px 18px 14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
  .m-menu-head .t{font-family:'Newsreader',serif;font-size:19px;font-weight:600}
  .m-menu-close{width:40px;height:40px;border:none;background:none;font-size:23px;
    line-height:1;color:var(--muted);cursor:pointer;padding:0}
  .m-menu-sec{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);padding:16px 18px 6px}
  .m-menu a,.m-menu button.m-menu-item{
    display:flex;align-items:center;gap:12px;padding:14px 18px;min-height:50px;
    font-size:15.5px;font-weight:500;color:var(--ink);text-decoration:none;
    background:none;border:none;width:100%;text-align:left;font-family:inherit;cursor:pointer}
  .m-menu a:active,.m-menu button.m-menu-item:active{background:var(--bg)}
  .m-menu a .d{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:1px}
  .m-menu a.m-cta{margin:10px 18px;padding:14px 18px;border-radius:11px;justify-content:center;
    background:var(--ink);color:#fff;width:auto}
  .m-menu a.m-cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
  .m-menu a.now{color:var(--accent)}
  .m-menu .m-sep{height:1px;background:var(--line);margin:8px 18px}
  .m-menu .m-menu-foot{margin-top:auto;padding:16px 18px 0;border-top:1px solid var(--line);
    font-size:11.5px;color:var(--muted);line-height:1.6}
  /* Inline legal links stay inline (they are inside a sentence); vertical
     padding grows the hit area without disturbing the line. */
  .m-menu .m-menu-foot a{display:inline;padding:7px 2px;font-size:11.5px;font-weight:400;
    color:var(--muted);text-decoration:underline;min-height:0}

  /* Also stated here, not only in the touch tier above: some Android browsers
     and desktop-mode phones report a fine pointer while still zooming a
     sub-16px focused field. At this width 16px is the right size anyway. */
  input,select,textarea{font-size:16px !important}

  /* ---- typography + rhythm: a phone reads better with fewer, larger words --- */
  body{font-size:16px}
  main{padding:18px 16px;gap:18px}
  .panel{padding:18px 16px;border-radius:14px}
  .panel h2{font-size:19px}
  .th-head{padding:14px 16px}
  .th-foot{padding:18px 16px;margin-bottom:calc(24px + var(--m-safe-b))}

  /* ---- tables become cards: an 11-column table is not usable at 375px ----
     Each row becomes a detail card — the first cell is the heading, the rest
     are label-over-value pairs in two columns, which keeps every field visible
     without the 370px-tall stack a one-pair-per-line layout produces. */
  table.m-cards,table.m-cards thead,table.m-cards tbody,table.m-cards tr{display:block;width:100%}
  table.m-cards thead{display:none}
  table.m-cards tr{background:var(--bg);border:1px solid var(--line);border-radius:12px;
    padding:13px 15px;margin-bottom:10px;
    display:grid;grid-template-columns:1fr 1fr;gap:11px 16px;align-items:start}
  table.m-cards td{border:none;padding:0;display:block;min-width:0;
    font-size:15px;font-weight:500;line-height:1.35;overflow-wrap:anywhere}
  table.m-cards td::before{content:attr(data-label);display:block;color:var(--muted);
    font-size:9.5px;font-weight:400;font-family:'IBM Plex Mono',monospace;
    letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
  /* the first cell heads the card and spans both columns */
  table.m-cards td.m-title{grid-column:1/-1;font-family:'Newsreader',serif;font-size:16.5px;
    font-weight:600;padding-bottom:10px;border-bottom:1px solid var(--line)}
  table.m-cards td.m-title::before{display:none}
  table.m-cards td.m-title .hint{font-size:11.5px;font-weight:400}
  table.m-cards td[data-empty]{display:none}
  table.m-cards td[data-label=""]::before{display:none}
  /* editable schedules: the field is the cell, at thumb size */
  table.m-cards td.m-wide{grid-column:1/-1}
  table.m-cards td.m-field input,table.m-cards td.m-field select{
    width:100%;height:44px;padding:0 12px;border-radius:9px;
    border:1px solid var(--line-strong);background:var(--card);box-sizing:border-box}
  table.m-cards td.m-field button{width:100%;min-height:44px}
  /* The card list is its own scroll region; the wrapper's 480px cap and
     x-scroll are moot — and actively harmful, since a clipped card list leaves
     the document exactly viewport-height and the page stops scrolling. The
     class is set by mobile.js next to table.m-cards; it must NOT be folded into
     one selector list with a :has() variant, because a browser that cannot
     parse :has() (iOS <15.4, Chrome <105, Samsung <20) drops the whole rule. */
  .table-scroll.m-cards-wrap{overflow:visible;max-height:none}

  /* charts need height, not width, on a phone */
  .chart-wrap{height:240px}

  /* ---- install / A2HS card ---- */
  .m-install{position:fixed;left:12px;right:12px;z-index:1350;
    bottom:calc(12px + var(--m-safe-b));
    background:var(--card);border:1px solid var(--line);border-radius:16px;
    box-shadow:0 22px 48px -22px rgba(22,24,28,.45);padding:16px;
    display:flex;gap:14px;align-items:flex-start;
    transform:translateY(140%);transition:transform .34s var(--m-ease)}
  body.m-app .m-install{bottom:calc(12px + var(--m-tab-h) + var(--m-safe-b))}
  .m-install.in{transform:none}
  .m-install img{width:42px;height:42px;border-radius:10px;flex:none}
  .m-install .tx{flex:1;min-width:0}
  .m-install .tx b{display:block;font-size:15px;margin-bottom:3px}
  .m-install .tx p{font-size:12.5px;color:var(--muted);line-height:1.5}
  .m-install .ax{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
  .m-install .ax button{font-size:14px;padding:9px 16px;border-radius:9px;min-height:40px}
  .m-install .m-dismiss{background:none;border:none;color:var(--muted);padding:9px 6px}
  .m-install .m-ios-step{font-size:12.5px;color:var(--ink-soft);line-height:1.7;margin-top:9px}
  .m-install .m-ios-step i{font-style:normal;color:var(--accent)}

  /* ---- toast: brief, non-blocking status (native pattern, not alert()) ---- */
  .m-toast{position:fixed;left:50%;z-index:1600;bottom:calc(22px + var(--m-safe-b));
    transform:translate(-50%,140%);background:rgba(22,24,28,.94);color:#fff;
    font-size:14px;padding:12px 20px;border-radius:24px;max-width:88vw;text-align:center;
    transition:transform .3s var(--m-ease);pointer-events:none;
    box-shadow:0 14px 34px -14px rgba(0,0,0,.5)}
  body.m-app .m-toast{bottom:calc(22px + var(--m-tab-h) + var(--m-safe-b))}
  .m-toast.in{transform:translate(-50%,0)}
}

/* ==========================================================================
   3. TOOL PAGES — <=760px, map present (body.m-app)
   The appraisal tools become a map app: the map is the page, the numbers live
   in a sheet you drag up over it. Same DOM, same IDs — pure layout.
   ========================================================================== */
@media (max-width:760px){
  /* vh first, dvh second: a browser without dvh keeps the vh line, rather
     than dropping height entirely and collapsing to auto. inset is written
     longhand for the same reason (no `inset` shorthand before Safari 14.1). */
  body.m-app{overflow:hidden;height:100vh;height:100dvh;position:fixed;
    top:0;right:0;bottom:0;left:0;width:100%}

  /* The map fills everything under the bars. It has to live OUTSIDE <main>:
     main carries the sheet's transform, and a transformed ancestor becomes the
     containing block for position:fixed, which would drag the map up and down
     with the sheet. mobile.js re-homes .map-panel into this stage. */
  .m-map-stage{
    position:fixed;left:0;right:0;
    top:calc(var(--m-bar-h) + var(--m-safe-t) + var(--m-search-h));
    bottom:0;z-index:1;background:var(--bg)}
  body.m-app .m-map-stage>.map-panel{
    height:100%;margin:0;padding:0;border:none;border-radius:0;overflow:hidden}
  body.m-app .map-panel>[id$="map"]{height:100% !important;min-height:0 !important;
    width:100%;border-radius:0}
  /* map chrome that only makes sense on a wide screen */
  body.m-app .map-toolbar,body.m-app .legend-care{display:none}
  /* Leaflet's own controls must clear the search bar and the sheet lip */
  body.m-app .leaflet-top{top:8px}
  body.m-app .leaflet-bottom{bottom:calc(var(--m-sheet-peek,132px) + 6px)}
  body.m-app .leaflet-control-zoom{display:none}   /* pinch is the gesture here */
  body.m-app .leaflet-control-attribution{font-size:9.5px;padding:1px 5px;
    background:rgba(251,251,249,.78)}

  /* ---- the search bar: one row under the app bar, always reachable ---- */
  body.m-app .th-head{
    position:fixed;left:0;right:0;top:calc(var(--m-bar-h) + var(--m-safe-t));z-index:1100;
    height:var(--m-search-h);padding:0 10px;
    padding-left:calc(10px + var(--m-safe-l));padding-right:calc(10px + var(--m-safe-r));
    display:flex;align-items:center;
    background:rgba(251,251,249,.82);
    -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid rgba(230,229,223,.9);overflow:visible}
  body.m-app .th-head .controls{
    display:flex;flex-wrap:nowrap;gap:8px;align-items:center;width:100%}
  /* Only the location field, the filter chip and Run survive in the bar;
     mobile.js moves the rest into the filter sheet. */
  body.m-app .th-head .controls>*:not(.m-keep){display:none}
  body.m-app .th-head .controls label.m-keep{
    flex:1 1 auto;min-width:0;position:relative;width:auto;
    flex-direction:row;align-items:center;gap:0;font-size:0}
  body.m-app .th-head .controls label.m-keep input{
    width:100%;height:42px;padding:0 14px 0 38px;border-radius:11px;
    border:1px solid var(--line-strong);background:var(--card);
    font-size:16px !important;box-sizing:border-box}
  body.m-app .th-head .controls label.m-keep::before{
    content:"";position:absolute;left:13px;top:50%;width:13px;height:13px;
    margin-top:-8px;border:1.7px solid var(--muted);border-radius:50%;pointer-events:none}
  body.m-app .th-head .controls label.m-keep::after{
    content:"";position:absolute;left:23px;top:50%;width:6px;height:1.7px;
    margin-top:4px;background:var(--muted);transform:rotate(45deg);
    transform-origin:left center;pointer-events:none}
  body.m-app .th-head .controls .m-keep.btn{flex:none;padding:0 16px;height:42px;
    min-height:42px;border-radius:11px;font-size:14.5px}
  /* filter chip, with a dot when filters are off their defaults */
  .m-filter-btn{flex:none;width:42px;height:42px;min-height:42px;border-radius:11px;
    border:1px solid var(--line-strong);background:var(--card);color:var(--ink);
    display:grid;place-items:center;padding:0;position:relative;cursor:pointer}
  .m-filter-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;
    stroke-linecap:round}
  .m-filter-btn[data-on="1"]::after{content:"";position:absolute;top:7px;right:7px;
    width:7px;height:7px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 0 2px var(--card)}

  /* ---- the bottom sheet: main itself, lifted over the map ---- */
  body.m-app main{
    position:fixed;left:0;right:0;top:0;height:100vh;height:100dvh;z-index:1200;
    margin:0;padding:0;gap:0;display:block;
    background:var(--card);border-radius:var(--m-radius) var(--m-radius) 0 0;
    box-shadow:var(--m-sheet-shadow);
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    transform:translate3d(0,var(--m-sheet-y,60%),0);
    will-change:transform;touch-action:pan-y}
  body.m-app.m-sheet-anim main{transition:transform .34s var(--m-ease)}
  /* At rest the sheet is a lip over the map, so it must not swallow scrolls
     meant for the map; only the grab handle stays live. */
  body.m-app.m-sheet-peek main{overflow-y:hidden}

  .m-sheet-grab{position:sticky;top:0;z-index:2;background:var(--card);
    border-radius:var(--m-radius) var(--m-radius) 0 0;
    padding:9px 16px 8px;cursor:grab;touch-action:none}
  .m-sheet-grab::before{content:"";display:block;width:38px;height:4.5px;border-radius:3px;
    background:var(--line-strong);opacity:.5;margin:0 auto 8px}
  .m-sheet-title{display:flex;align-items:baseline;gap:9px;justify-content:space-between}
  .m-sheet-title .t{font-family:'Newsreader',serif;font-size:17px;font-weight:600}
  .m-sheet-title .s{font-size:12px;color:var(--muted);text-align:right;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-sheet-grab::after{content:"";display:block;height:1px;background:var(--line);
    margin:9px -16px 0}

  body.m-app main>section,body.m-app main>div{
    border:none;border-radius:0;border-bottom:1px solid var(--line);
    padding:20px 16px;margin:0;background:transparent}
  body.m-app main>section:last-child{border-bottom:none;
    padding-bottom:calc(28px + var(--m-tab-h) + var(--m-safe-b))}

  /* ---- bottom tab bar ---- */
  .m-tabs{position:fixed;left:0;right:0;bottom:0;z-index:1300;
    height:calc(var(--m-tab-h) + var(--m-safe-b));
    padding-bottom:var(--m-safe-b);
    display:none;align-items:stretch;
    background:rgba(251,251,249,.9);
    -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
    border-top:1px solid rgba(230,229,223,.9)}
  body.m-app .m-tabs{display:flex}
  .m-tabs button,.m-tabs a{flex:1;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;background:none;border:none;padding:0;
    font-family:inherit;font-size:10px;letter-spacing:.02em;color:var(--muted);
    text-decoration:none;cursor:pointer;min-height:0;transition:color .14s}
  .m-tabs svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round}
  .m-tabs .on{color:var(--accent)}
  .m-tabs button:active{transform:none;opacity:.55}

  /* ---- filter sheet (the controls that left the search bar) ---- */
  .m-filters{position:fixed;left:0;right:0;bottom:0;z-index:1450;
    background:var(--card);border-radius:var(--m-radius) var(--m-radius) 0 0;
    box-shadow:var(--m-sheet-shadow);
    padding:0 16px calc(18px + var(--m-safe-b));
    max-height:82vh;max-height:82dvh;overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(101%);transition:transform .3s var(--m-ease)}
  body.m-filters-open .m-filters{transform:none}
  .m-filters .m-sheet-grab{margin:0 -16px;padding-left:16px;padding-right:16px}
  .m-filters .controls,.m-filters .res-inputs{display:flex;flex-direction:column;
    gap:16px;align-items:stretch;padding-top:16px}
  .m-filters label{display:flex !important;flex-direction:column;gap:7px;width:100%;
    font-size:13px;color:var(--muted)}
  .m-filters label.heat-tog{flex-direction:row !important;align-items:center;gap:10px;
    font-size:15px;color:var(--ink);padding:4px 0}
  .m-filters input,.m-filters select{width:100% !important;flex:none !important;
    height:48px;padding:0 14px;border-radius:11px;border:1px solid var(--line-strong);
    background:var(--card);box-sizing:border-box}
  .m-filters select{-webkit-appearance:none;appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
      linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  .m-filters .btn{width:100%;height:50px;border-radius:12px;font-size:16px}
  .m-filters .hint{font-size:12.5px}
  .m-filters-done{position:sticky;bottom:0;background:var(--card);padding:14px 0 4px;
    margin-top:6px;box-shadow:0 -12px 18px -12px rgba(22,24,28,.25)}

  /* Chrome must not sit under the tab bar / sheet on tool pages. */
  body.m-app .th-foot,body.m-app .daypass-wrap{display:none}
}

/* Tablets: the sheet layout is a phone idea. Give a tablet the desktop page,
   but keep the touch tier above. */
@media (min-width:761px){
  .m-tabs,.m-menu,.m-scrim,.m-filters,.m-menu-btn,.m-install{display:none !important}
}

@media print{
  .m-tabs,.m-menu,.m-scrim,.m-filters,.m-menu-btn,.m-install,.m-sheet-grab,.m-toast{
    display:none !important}
  body.m-app{position:static;overflow:visible;height:auto}
  body.m-app main{position:static;transform:none;height:auto;overflow:visible;box-shadow:none}
  body.m-app .map-panel,body.m-app .th-head{position:static}
}

/* Someone who asked for less motion gets no sheet animation, only jumps. */
@media (prefers-reduced-motion:reduce){
  .m-menu,.m-scrim,.m-filters,.m-install,.m-toast,body.m-app.m-sheet-anim main{
    transition-duration:.001ms !important}
}