/* Forbes article modal — slide-up on mobile, slide-in-from-right on desktop */

.fm-overlay{
  position:fixed;inset:0;z-index:9998;
  background:rgba(0,0,0,0);
  pointer-events:none;
  transition:background .3s ease;
}
.fm-overlay.is-open{
  background:rgba(0,0,0,.5);
  pointer-events:auto;
}

.fm-panel{
  position:fixed;
  background:#fff;
  z-index:9999;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 -8px 40px rgba(0,0,0,.18);
  transition:transform .38s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}

/* Mobile: bottom sheet */
@media (max-width:768px){
  .fm-panel{
    left:0;right:0;bottom:0;
    top:24px;
    border-radius:18px 18px 0 0;
    transform:translateY(100%);
  }
  .fm-overlay.is-open .fm-panel{
    transform:translateY(0);
  }
}

/* Desktop: right drawer */
@media (min-width:769px){
  .fm-panel{
    top:0;right:0;bottom:0;
    width:min(780px,85vw);
    border-radius:0;
    transform:translateX(100%);
    box-shadow:-8px 0 40px rgba(0,0,0,.18);
  }
  .fm-overlay.is-open .fm-panel{
    transform:translateX(0);
  }
}

/* Browser chrome (fake) — unified Apple-style for both mobile and desktop */
.fm-chrome{
  flex-shrink:0;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 16px 14px;
  position:relative;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  touch-action:none;
}

/* Mobile drag handle (only visible on mobile) */
.fm-handle{
  display:none;
}
@media (max-width:768px){
  .fm-handle{
    display:block;
    position:absolute;
    top:6px;left:50%;
    transform:translateX(-50%);
    width:40px;height:4px;
    border-radius:2px;
    background:rgba(0,0,0,.2);
    pointer-events:none;
  }
}

/* Hidden macOS traffic lights (kept in DOM for historical reasons but not shown) */
.fm-lights{display:none}

/* Greyed-out, non-editable URL bar */
.fm-urlbar{
  flex:1;
  min-width:0;
  background:#ececec;
  border:none;
  border-radius:100px;
  height:38px;
  padding:0 16px 0 38px;
  font-size:14px;
  color:#8a8a8a;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  position:relative;
  display:flex;
  align-items:center;
  user-select:none;
  -webkit-user-select:none;
  cursor:default;
  pointer-events:none;
}
.fm-urlbar::before{
  content:"";
  position:absolute;
  left:12px;top:50%;
  transform:translateY(-50%);
  width:18px;height:18px;
  border-radius:3px;
  background:url("/logos/forbes-favicon.png") center/contain no-repeat;
}
.fm-url-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:100%;
}
.fm-url-domain{color:#6a6a6a;font-weight:500}
.fm-url-path{color:#a0a0a0}

/* Loading bar */
.fm-loadbar{
  position:absolute;
  left:0;bottom:-1px;
  height:2px;
  background:linear-gradient(to right,#1a73e8,#34a853);
  width:0;
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
}
.fm-panel.is-loading .fm-loadbar{
  opacity:1;
  animation:fm-load 1.2s ease-out forwards;
}
@keyframes fm-load{
  0%{width:0}
  25%{width:35%}
  60%{width:72%}
  100%{width:100%}
}

/* Big round Apple-style close button */
.fm-close{
  flex-shrink:0;
  width:36px;height:36px;
  border:none;
  background:#f0f0f0;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#555;
  transition:background .15s,color .15s;
  padding:0;
}
.fm-close:hover,.fm-close:active{background:#e5e5e5;color:#000}
.fm-close svg{width:18px;height:18px;stroke-width:2.5}

/* Iframe */
.fm-iframe{
  flex:1;
  width:100%;
  border:none;
  background:#fff;
  opacity:0;
  transition:opacity .3s ease .15s;
}
.fm-iframe.is-ready{opacity:1}

/* Body lock when modal open */
body.fm-locked{overflow:hidden}