/* ============================================================
   Ferro — responsive.css  (tablet + mobile)  &  compact density
   ============================================================ */

/* ---------- compact density ---------- */
.compact .msg{padding:9px 20px}
.compact .msg .subj{margin-bottom:1px}
.compact .msg .prev{-webkit-line-clamp:1}
.compact .msg .tags{margin-top:4px}
.compact .row{padding:6px 12px}
.compact .acct{padding:6px 12px}
.compact .ct-row{padding:6px 20px}
.compact .thread-list{gap:8px}

/* ============================================================
   TABLET & MOBILE  (<= 1080px) : master-detail navigation
   ============================================================ */
@media (max-width:1080px){
  .m-only{display:flex !important}

  /* ----- MAIL ----- */
  .app-mail{grid-template-columns:1fr;position:relative}
  .app-mail .sidebar{
    position:absolute;left:0;top:0;bottom:0;width:280px;z-index:30;
    transform:translateX(-100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);
    box-shadow:var(--shadow-lg);
  }
  .app-mail.drawer-open .sidebar{transform:none}
  .m-backdrop{position:absolute;inset:0;background:rgba(20,16,12,.4);z-index:20;animation:fadein .2s ease both}
  .list{border-right:none}
  [data-route="mail"][data-mobile="list"] .reader{display:none}
  [data-route="mail"][data-mobile="reader"] .list{display:none}
  [data-route="mail"][data-mobile="reader"] .reader{display:flex}

  /* ----- CONTACTS ----- */
  .app-contacts{grid-template-columns:1fr;position:relative}
  .ct-detail .ct-back{position:absolute;top:14px;left:14px;z-index:5;background:var(--card);border:1px solid var(--line)}
  [data-route="contacts"][data-mobile="list"] .ct-detail{display:none}
  [data-route="contacts"][data-mobile="reader"] .ct-list{display:none}
  [data-route="contacts"][data-mobile="reader"] .ct-detail{display:flex}

  /* ----- CALENDAR ----- */
  .app-cal{grid-template-columns:1fr}
  .cal-side{display:none}
  .cal-toolbar h1{font-size:20px;min-width:0;flex:1}

  /* ----- SETTINGS ----- */
  .app-settings{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .set-nav{flex-direction:row;align-items:center;overflow-x:auto;overflow-y:hidden;border-right:none;border-bottom:1px solid var(--line);padding:8px 10px;gap:4px}
  .set-nav .sh,.set-nav .gh{display:none}
  .set-nav .grp{display:flex;gap:4px;padding:0}
  .set-nav .si{white-space:nowrap;padding:8px 12px}
  .set-nav .si.active::before{display:none}
  .set-body{padding:22px 16px 48px}
}

/* ============================================================
   PHONE  (<= 720px) : rail -> bottom bar, full-bleed window
   ============================================================ */
@media (max-width:720px){
  body{padding:0;overflow:auto}
  .window{width:100vw;height:100dvh;border-radius:0;border:none}
  .window::after{display:none}

  .titlebar .tbtitle{display:none}
  .tbright span:last-child{display:none}

  /* stage stacks: content on top, rail as bottom bar */
  .stage{flex-direction:column}
  .rail{
    flex-direction:row;width:auto;height:58px;flex:0 0 58px;order:2;
    padding:0 6px;border-right:none;border-top:1px solid var(--line);
    justify-content:space-around;gap:2px;
  }
  .rail-logo,.rail-av,.rail-spacer{display:none}
  .rail-btn{width:54px;height:46px;border-radius:12px}
  .rail-btn.active{box-shadow:none}
  .rail-btn.active::before{display:none}
  .rail-btn.active::after{content:"";position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:16px;height:3px;border-radius:3px;background:var(--accent)}
  .rail-badge{box-shadow:0 0 0 2px var(--paper)}

  /* compose & lightbox full screen */
  .compose-modal,.compose-modal.maximized{right:0;left:0;bottom:0;top:0;width:100%;height:100%;border-radius:0;transform:none}
  .lightbox-wrap{padding:16px}
  .palette-wrap{padding-top:60px}
  .palette{width:calc(100% - 28px)}

  /* roomier touch targets */
  .msg{padding:15px 16px}
  .list-head{padding:14px 16px 10px}
  .reader-scroll{padding:20px 18px 32px}
  .ct-hero{padding:48px 20px 24px}
  .cal-toolbar{flex-wrap:wrap;padding:12px 16px}
}

/* very small height (landscape phones): let it scroll */
@media (max-height:560px){
  body{overflow:auto;align-items:flex-start}
}