/* assets/css/mcr-bottom-drawer.css
 * Newspaper pull-up sheet v2. mcr.city mobile. 9 Sep 2026.
 * Graphic style back to the pre 7 Sep drawer (sha 58c9c99a). Structure stays the 4 Sep
 * sheet's. Selectors live under #MCR-SHEET or .mcrns- so the July .mcrd- rules in
 * style.css cannot reach it. Open and closed transforms are class driven, never inline,
 * so a LiteSpeed HTML cache cannot serve a sheet stuck open.
 */

#MCR-SHEET,#MCR-SHEET-BD{display:none}

@media (max-width:900px){

  /* Peek bar reserves its height so nothing shifts when the sheet mounts. */
  html body:not(.wp-admin){padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))!important}
  html body .plan-fab{bottom:calc(104px + env(safe-area-inset-bottom,0px))!important}

  /* Page scroll lock. Class driven, no inline style. */
  html.mcrns-lock,html.mcrns-lock body{overflow:hidden!important}

  html body:not(.wp-admin) #MCR-SHEET-BD{
    display:block!important;position:fixed!important;inset:0!important;
    background:rgba(0,0,0,.45);opacity:0;pointer-events:none;touch-action:none;
    border:0;margin:0;padding:0;z-index:2199!important;
    transition:opacity .2s ease;
  }
  html body:not(.wp-admin) #MCR-SHEET-BD.mcrns-bd-on{opacity:1;pointer-events:auto}

  html body:not(.wp-admin) #MCR-SHEET{
    --mcrns-peek:92px;
    --mcrns-canvas:#050507;--mcrns-card:#111111;--mcrns-field:#0b0c0f;
    --mcrns-hair:rgba(255,255,255,.09);--mcrns-hair-2:rgba(255,255,255,.14);
    --mcrns-ink:#ffffff;--mcrns-ink-2:rgba(255,255,255,.58);--mcrns-ink-3:rgba(255,255,255,.55);
    --mcrns-chip-ink:#ffffff;
    --mcrns-sans:Inter,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --mcrns-ease:cubic-bezier(.22,1,.36,1);
    --mcrns-drag:0px;
    display:flex!important;flex-direction:column;visibility:visible!important;
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;
    width:100%!important;height:min(82dvh,700px)!important;
    min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;
    box-sizing:border-box;overflow:hidden!important;
    border:0!important;border-radius:22px 22px 0 0!important;
    background:var(--mcrns-canvas)!important;color:var(--mcrns-ink);
    box-shadow:0 -12px 32px rgba(0,0,0,.42)!important;
    transform:translate3d(0,calc(100% - var(--mcrns-peek)),0);
    transition:transform .28s var(--mcrns-ease);
    touch-action:none;pointer-events:auto!important;
    font-family:var(--mcrns-sans);line-height:1.3;-webkit-font-smoothing:antialiased;
    z-index:2200!important;
  }
  html body:not(.wp-admin) #MCR-SHEET[data-state="open"]{transform:translate3d(0,0,0)}
  html body:not(.wp-admin) #MCR-SHEET.mcrns-dragging{
    transition:none;will-change:transform;
    transform:translate3d(0,var(--mcrns-drag),0);
  }

  /* The old drawer's rainbow hairline. */
  html body:not(.wp-admin) #MCR-SHEET::before{
    content:"";display:block;position:absolute;
    top:0;left:12px;right:12px;height:11px;box-sizing:border-box;
    border:1px solid transparent;border-bottom:0;border-radius:18px 18px 0 0;
    background:
      linear-gradient(var(--mcrns-canvas),var(--mcrns-canvas)) padding-box,
      linear-gradient(90deg,#a64c4c,#a67a42,#999154,#4f8f68,#4d819b,#665f9b,#89548d,#a64c4c) border-box;
    opacity:.58;z-index:40;pointer-events:none;
  }

  #MCR-SHEET *,#MCR-SHEET *::before,#MCR-SHEET *::after{box-sizing:border-box}
  #MCR-SHEET h2,#MCR-SHEET p,#MCR-SHEET form{margin:0;padding:0}
  #MCR-SHEET a{color:inherit;text-decoration:none!important}
  #MCR-SHEET :focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px;border-radius:6px}

  /* Head: handle, dateline, search, teaser. The drag zone. */
  #MCR-SHEET .mcrns-head{flex:0 0 auto;padding:0 14px 2px;touch-action:none;position:relative;z-index:41}
  /* height forced: the theme's button rules otherwise inflate it to 44px and push the
     teaser out of the 92px peek. */
  html body #MCR-SHEET .mcrns-handle{
    display:flex!important;align-items:flex-start!important;justify-content:center!important;
    width:100%!important;height:14px!important;min-height:0!important;line-height:1!important;
    margin:0!important;padding:4px 0 0!important;border:0!important;background:transparent!important;
    box-shadow:none!important;appearance:none;cursor:grab;touch-action:none;
  }
  #MCR-SHEET .mcrns-pill{display:block;width:38px;height:3px;border-radius:999px;background:rgba(255,255,255,.32)}

  #MCR-SHEET .mcrns-dateline{display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:3px 2px;font:700 .5rem/1 var(--mcrns-sans);letter-spacing:.15em;text-transform:uppercase;
    color:rgba(255,255,255,.46);white-space:nowrap;overflow:hidden}

  #MCR-SHEET .mcrns-search{display:flex;align-items:center;gap:9px;height:38px;margin:5px 0 0;
    padding:0 13px;background:var(--mcrns-field);border:1px solid rgba(255,255,255,.22);border-radius:12px}
  #MCR-SHEET .mcrns-search-ico{flex:none;display:block}
  #MCR-SHEET .mcrns-search-in{
    display:block;flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;
    border:0;border-radius:0;outline:0;background:transparent;box-shadow:none;
    color:#e7e8ec;-webkit-text-fill-color:#e7e8ec;
    font:500 .78rem/1 var(--mcrns-sans);text-align:left;appearance:none;-webkit-appearance:none;
  }
  #MCR-SHEET .mcrns-search-in::placeholder{color:rgba(255,255,255,.46);-webkit-text-fill-color:rgba(255,255,255,.46);opacity:1}
  #MCR-SHEET .mcrns-search-in::-webkit-search-cancel-button{-webkit-appearance:none}
  #MCR-SHEET .mcrns-search:focus-within{border-color:rgba(255,255,255,.4)}

  #MCR-SHEET .mcrns-teaser{
    display:flex;justify-content:center;gap:6px;height:18px;padding:4px 0 0;
    font:700 .56rem/1 var(--mcrns-sans);color:var(--mcrns-ink-2);white-space:nowrap;
  }
  #MCR-SHEET[data-state="open"] .mcrns-teaser{display:none}
  #MCR-SHEET .mcrns-teaser-sep{color:rgba(255,255,255,.32)}

  /* Body: the paper. Scrolls inside itself, only when open. */
  #MCR-SHEET .mcrns-body{
    flex:1 1 auto;min-height:0;position:relative;
    margin:0;padding:0 14px calc(10px + env(safe-area-inset-bottom,0px));
    overflow:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;touch-action:none;
    opacity:0;transition:opacity .15s ease;
  }
  #MCR-SHEET .mcrns-body::-webkit-scrollbar{display:none}
  #MCR-SHEET[data-state="open"] .mcrns-body{opacity:1;overflow-y:auto;touch-action:pan-y}
  #MCR-SHEET.mcrns-dragging .mcrns-body{opacity:1}

  /* Section furniture, old spacing and type */
  #MCR-SHEET .mcrns-sec{margin:0}
  #MCR-SHEET .mcrns-sec + .mcrns-sec{border-top:1px solid var(--mcrns-hair-2);margin-top:6px}
  #MCR-SHEET .mcrns-sec-head{display:flex;align-items:center;gap:8px;padding:11px 2px 8px}
  #MCR-SHEET .mcrns-kicker{
    display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;
    color:var(--mcrns-ink);font:850 .72rem/1 var(--mcrns-sans);
    letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  }
  #MCR-SHEET .mcrns-live-dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:#ef233c;box-shadow:0 0 0 3px rgba(239,35,60,.18)}
  #MCR-SHEET .mcrns-count{
    flex:0 0 auto;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.08);
    color:var(--mcrns-ink-2);font:700 .5rem/1 var(--mcrns-sans);white-space:nowrap;
  }
  #MCR-SHEET .mcrns-seeall{
    margin-left:auto;flex:0 0 auto;padding:4px 0 4px 8px;
    color:var(--mcrns-ink-2);font:700 .56rem/1 var(--mcrns-sans);white-space:nowrap;
  }
  #MCR-SHEET .mcrns-empty{
    padding:2px 2px 10px;color:rgba(255,255,255,.4);font:500 .62rem/1.3 var(--mcrns-sans);
  }

  /* Chips, the old drawer's chip */
  #MCR-SHEET .mcrns-chip{
    display:inline-block;margin:0;padding:2px 5px;border-radius:4px;
    background:var(--c,#333);color:var(--mcrns-chip-ink);
    font:800 .4rem/1 var(--mcrns-sans);letter-spacing:.06em;text-transform:uppercase;
    white-space:nowrap;
  }
  #MCR-SHEET .mcrns-chip-cat{color:#0A0A0A}
  #MCR-SHEET .mcrns-chip-flag{background:#fff;color:#0A0A0A}

  /* Photo slab: real image, else the theme's tinted gradient */
  #MCR-SHEET .mcrns-ph{
    position:relative;display:block;overflow:hidden;
    background:linear-gradient(135deg,#111,#1a1a2e);
  }
  #MCR-SHEET .mcrns-ph::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(90% 90% at 80% 10%,var(--c,#fff),transparent 62%);opacity:.22;
  }
  #MCR-SHEET .mcrns-img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
    margin:0;border:0;border-radius:0;opacity:0;transition:opacity .25s ease;z-index:1;
  }
  #MCR-SHEET .mcrns-img[src]{opacity:1}

  /* The row. One title line, one meta line, a chip. */
  #MCR-SHEET .mcrns-rows{display:block}
  #MCR-SHEET .mcrns-row{
    display:flex;align-items:center;gap:10px;min-width:0;
    padding:7px 2px;border-bottom:1px solid var(--mcrns-hair);
  }
  #MCR-SHEET .mcrns-row:last-child{border-bottom:0}
  #MCR-SHEET .mcrns-thumb{width:44px;height:44px;border-radius:8px;flex:0 0 44px}
  #MCR-SHEET .mcrns-row-tx{flex:1 1 auto;min-width:0;display:block}
  #MCR-SHEET .mcrns-row-h{
    display:block;color:var(--mcrns-ink);font:800 .82rem/1.18 var(--mcrns-sans);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  #MCR-SHEET .mcrns-meta{
    display:block;margin-top:3px;color:var(--mcrns-ink-3);
    font:500 .62rem/1.1 var(--mcrns-sans);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  #MCR-SHEET .mcrns-row > .mcrns-chip{flex:0 0 auto;align-self:center}
  #MCR-SHEET .mcrns-flagcol{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
  #MCR-SHEET .mcrns-disclosure{
    color:rgba(255,255,255,.42);font:600 .4rem/1 var(--mcrns-sans);
    letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  }
  #MCR-SHEET .mcrns-row-feat{background:linear-gradient(90deg,rgba(255,255,255,.05),transparent 62%)}

  /* Tools and Sections: two up, one line each */
  #MCR-SHEET .mcrns-grid2{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
  #MCR-SHEET .mcrns-tile{
    display:flex;align-items:center;gap:9px;height:34px;min-width:0;
    border-bottom:1px solid var(--mcrns-hair);
  }
  #MCR-SHEET .mcrns-tile-ico{
    width:22px;height:22px;border-radius:6px;flex:0 0 22px;
    display:flex;align-items:center;justify-content:center;
  }
  #MCR-SHEET .mcrns-tile-lbl{
    flex:1 1 auto;min-width:0;color:var(--mcrns-ink);
    font:700 .68rem/1 var(--mcrns-sans);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  #MCR-SHEET .mcrns-chev{flex:0 0 auto;color:rgba(255,255,255,.3);font-size:12px;line-height:1}

  /* Stories strip, its own sideways scroller */
  #MCR-SHEET .mcrns-strip{
    display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    touch-action:pan-x;padding:0 0 8px;scroll-snap-type:x proximity;
  }
  #MCR-SHEET .mcrns-strip::-webkit-scrollbar{display:none}
  #MCR-SHEET .mcrns-story{
    flex:0 0 148px;width:148px;background:var(--mcrns-card);
    border:1px solid var(--mcrns-hair);border-radius:13px;overflow:hidden;scroll-snap-align:start;
  }
  #MCR-SHEET .mcrns-story-ph{height:62px}
  #MCR-SHEET .mcrns-story-body{display:block;padding:7px 8px 9px}
  #MCR-SHEET .mcrns-catline{
    display:flex;align-items:center;gap:5px;margin-bottom:4px;
    color:rgba(255,255,255,.5);font:700 .4rem/1 var(--mcrns-sans);
    letter-spacing:.06em;text-transform:uppercase;
  }
  #MCR-SHEET .mcrns-dot{width:5px;height:5px;border-radius:50%;flex:none;background:var(--c,#fff)}
  #MCR-SHEET .mcrns-story-h{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    color:var(--mcrns-ink);font:800 .62rem/1.18 var(--mcrns-sans);
  }

  #MCR-SHEET .mcrns-safe{height:max(env(safe-area-inset-bottom,0px),8px)}

  /* Reduced motion */
  @media (prefers-reduced-motion:reduce){
    html body:not(.wp-admin) #MCR-SHEET,
    html body:not(.wp-admin) #MCR-SHEET-BD,
    #MCR-SHEET .mcrns-body,#MCR-SHEET .mcrns-img{transition:none!important}
  }
}

/* Desktop: hidden, as today. */
@media (min-width:901px){#MCR-SHEET,#MCR-SHEET-BD{display:none!important}}