/* ============================================================
   beedle dataroom + forecaster — mobile & compact layouts
   Loaded LAST by both HTML entries. Two tiers:
     compact (≤920px) — hamburger + slide-in drawer (the sidebar
                        is display:none there in layout.css)
     mobile  (≤640px) — phone treatment: cards, tabs, "…" menus,
                        density overrides
   Rules outside media queries only style elements that are
   conditionally rendered on compact/mobile, so desktop markup
   and pixels are untouched by construction.
   ============================================================ */

/* ===================== hamburger & drawer ===================== */
.hamburger{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:.13s}
.hamburger:hover{border-color:var(--ink-4);color:var(--ink)}
.drawer-scrim{position:fixed;inset:0;z-index:120;background:rgba(20,36,46,.42);backdrop-filter:blur(2px);animation:fadeIn .18s ease both}
.drawer{position:absolute;left:0;top:0;bottom:0;width:min(310px,85vw);background:var(--surface);
  box-shadow:var(--shadow-lg);animation:drawerIn .22s cubic-bezier(.2,.7,.2,1) both;display:flex}
@keyframes drawerIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
/* the drawer hosts the regular Sidebar — undo its desktop stickiness and the
   ≤920px display:none from layout.css (equal specificity, this file loads later) */
@media (max-width:920px){
  .drawer .sidebar{display:flex;position:static;height:100%;width:100%;border-right:0}
}

/* Dropdown menus never wider than the viewport. Applies at every width (this
   file loads last on both pages) so OverflowMenu's on-open edge-clamp
   (overflow-menu.jsx) can always pull a right-anchored menu back on-screen with
   a single shift — it can't if the menu is wider than the viewport itself. */
.menu{max-width:calc(100vw - 24px)}

/* ===================== overflow "…" menu ===================== */
.om .menu{min-width:230px}
.om .om-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:var(--paper-2);color:var(--ink-2)}
.om .om-divider{height:1px;background:var(--line);margin:6px 4px}
.om .menu-item.om-danger .nm,.om .menu-item.om-danger .om-ico{color:var(--red-ink)}

/* ===================== doc cards (mobile folder & search) ===================== */
.dcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:12px;margin-top:8px}
.dcard{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);cursor:pointer;position:relative;transition:.15s;animation:fadeUp .3s ease both}
.dcard:active{border-color:var(--blue-line)}
.dcard .dc-main{min-width:0}
.dcard .dc-main .t{font-weight:600;font-size:13.5px;line-height:1.3;word-break:break-word;padding-right:26px}
.dcard .dc-main .s{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.dcard .dc-menu{position:absolute;top:8px;right:8px}
.dcard.locked{opacity:.75}

/* ===================== pdf.js page renderer (uploaded PDFs on phones) ===================== */
.pdf-doc{position:relative;width:100%;padding:10px 10px 46px;display:flex;flex-direction:column;gap:10px}
.pdf-page{position:relative;width:100%;flex:none;background:#fff;border-radius:3px;box-shadow:var(--shadow-sm);overflow:hidden}
.pdf-page canvas{display:block;width:100%;height:auto}
.pdf-loading{padding:48px 0;text-align:center;font-size:13px;color:var(--ink-3)}
.pdf-pageno{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:310;background:var(--ink);color:#fff;
  padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:600;box-shadow:var(--shadow-lg);pointer-events:none}

/* ===================== forecaster: Inputs / Results tabs ===================== */
.fc-body.mobile{display:flex;flex-direction:column}
.fc-tabs{display:flex;flex:none;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
.fc-tabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line);background:var(--paper-2);border-radius:999px;padding:8px;
  font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink-3);cursor:pointer;transition:.13s}
.fc-tabs button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);border-color:var(--blue-line)}
.fc-body.mobile .fc-inputs{flex:1;border-right:0;min-height:0}
.fc-body.mobile .fc-output{flex:1;min-height:0}

/* ===================== viewer phone chrome =====================
   Mirrors PHONE_MQ in responsive.js (useIsPhone): portrait phones OR a
   phone rotated to landscape (short + coarse pointer). Kept on its own
   query — separate from the width-only density block below — so the
   viewer's mobile layout (folded toolbar, full-screen info overlay,
   tighter stage) follows useIsPhone exactly and a landscape phone gets
   it even though its width exceeds 640px. */
@media (max-width:640px), (max-height:640px) and (pointer:coarse){
  .vtop{padding:10px 12px;gap:8px}
  .vtop .pill{display:none}
  .vstage{padding:14px}
  .vmeta-panel.mobile{position:fixed;inset:0;width:auto;z-index:330;border-left:0;padding:20px 18px;animation:fadeUp .22s ease both}
  .vmeta-panel.mobile .vclose{position:absolute;top:14px;right:14px}
}

/* ===================== phone density (≤640px) ===================== */
@media (max-width:640px){
  /* ---- login: stack, drop the brand panel ---- */
  .login{flex-direction:column}
  .login-brand{display:none}
  .login-form-wrap{padding:28px 20px}

  /* ---- dataroom chrome ---- */
  .topbar{padding:10px 14px;gap:10px}
  .crumbs{display:none}                 /* navigation lives in the drawer on phones */
  .search{max-width:none}
  .viewas-btn .t,.viewas-btn .r{display:none}
  .page{padding:22px 16px 64px}
  .page-title{font-size:27px}
  .page-head{flex-direction:column;align-items:stretch;gap:14px}
  .page-head .actions{justify-content:flex-end}
  .stat-row{gap:18px;margin-top:14px}
  .stat .v{font-size:19px}
  .section-rule{margin:26px 0 14px}
  .toolbar{margin:16px 0 12px}

  /* ---- modals ---- */
  .scrim{padding:12px}
  .modal{max-height:94vh}
  .cmp-modal{height:94vh}

  /* ---- comparison grid: denser cells, narrower sticky label column ---- */
  .cmp-toolbar{padding:0 14px 10px}
  .cmp-table thead th,.cmp-cell{padding:5px 8px;font-size:11px;min-width:120px}
  .cmp-table thead th.cmp-lab,.cmp-lab{min-width:108px;max-width:140px;white-space:normal}
  .cmp-summary,.cmp-review,.cmp-results{padding-left:14px;padding-right:14px}

  /* ---- forecaster top bar ---- */
  .fc-top{padding:9px 10px;gap:8px;flex-wrap:wrap}
  .fc-back{padding:7px 9px}
  .fc-back .bk-lab{display:none}        /* icon-only back link */
  .fc-title{min-width:0}
  .fc-title .t{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fc-title .s{display:none}
  .fc-top .status{display:none}
  .scn-btn{padding:5px 8px}
  .scn-btn .lab{display:none}
  .scn-btn .nm{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

  /* ---- forecaster inputs accordion: keep the subtitle on its own line ---- */
  .acc-head .ttl .h{display:block}
  .acc-head .ttl .sub{display:block}

  /* ---- forecaster output density ---- */
  .fc-out-pad{padding:12px 10px 48px}
  .kpis{grid-template-columns:repeat(2,1fr);gap:8px}
  .kpi .kv{font-size:20px}
  .charts{grid-template-columns:1fr}
  .pnl .lbl{min-width:124px;max-width:150px;white-space:normal;font-size:11.5px}
  .pnl th,.pnl td{padding:5px 8px;font-size:11px}
}

/* Touch devices have no hover — keep the per-cell Set/Edit/Undo actions visible. */
@media (hover:none){
  .cmp-acts{opacity:1}
}