/* F5 · navigation, lifecycle and banner styles. Namespaced; loaded after mac.css.
   Proposed canonical changes are marked "PROPOSED" and listed in INTEGRATION.md. */

/* ── lifecycle: individual transform properties, owned by lifecycle.mjs ── */
.mac-window[data-lifecycle]{transform-origin:50% 50%;will-change:translate,scale,opacity}
.mac-window[data-lifecycle="closed"],.mac-window[data-lifecycle="minimized"]{pointer-events:none}
.mac-window.lc-ghost{pointer-events:none}
/* PROPOSED: a whole-window focus ring is not a Mac. Keep focus visible on the title bar instead. */
.mac-window:focus-visible,.mac-window.motion-sheet:focus{outline:none}
.mac-window:focus-visible>.mac-titlebar,.mac-window.motion-sheet>.mac-titlebar:focus-visible{box-shadow:inset 0 0 0 2px #0a84ff;outline:none}

/* ── compact Dock ─────────────────────────────────────────────────── */
/* sized from the container, not vw: CSS zoom (200% text) scales the container, not the viewport unit */
.mac-dock.f5-compact{overflow:visible;width:calc(100% - 12px);max-width:280px;gap:0;padding:4px 6px;justify-content:space-around}
.mac-dock.f5-compact button{flex:1 1 0;min-width:0;width:auto;height:52px}
.mac-dock.f5-compact img,.mac-dock.f5-compact .f5-more-glyph{width:min(40px,100%);height:auto;aspect-ratio:1}
.mac-dock.f5-compact .f5-more-glyph{padding:20%}
.mac-dock [data-app].f5-active i{width:6px;height:6px}
.f5-more-button{position:relative}
/* a <b>, not a <span>: mac.css hides every direct span child of a Dock button as a tooltip */
.f5-more-glyph{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:40px;height:40px;padding:8px;border-radius:11px;background:linear-gradient(180deg,#f2f3f6,#d9dce3);box-shadow:0 6px 10px rgba(0,0,0,.22),inset 0 1px 0 #fff;filter:drop-shadow(0 4px 4px rgba(0,0,0,.18))}
.f5-more-glyph em{display:block;border-radius:3px;background:linear-gradient(180deg,#6a7ba3,#3f4d6e)}
.f5-more-count{position:absolute;top:2px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#e5484d;color:#fff;font-size:10px;line-height:16px;font-weight:700;text-align:center}

/* ── More sheet ───────────────────────────────────────────────────── */
.f5-more{position:absolute;inset:0;z-index:950;display:flex;align-items:flex-end;justify-content:center;background:rgba(10,14,22,0);transition:background 160ms ease-out}
.f5-more.on{background:rgba(10,14,22,.28)}
.f5-more-sheet{width:100%;max-height:calc(100% - 60px);overflow:auto;border-radius:18px 18px 0 0;padding:6px 14px 92px;
  background:rgba(246,248,252,.94);backdrop-filter:blur(30px) saturate(180%);box-shadow:0 -18px 50px rgba(0,0,0,.35),inset 0 1px 0 #fff;
  translate:0 24px;opacity:0;transition:translate 180ms cubic-bezier(.2,.7,.2,1),opacity 160ms ease-out}
.f5-more.on .f5-more-sheet{translate:0 0;opacity:1}
.f5-more-sheet header{display:flex;align-items:center;justify-content:space-between;padding:12px 2px 6px}
.f5-more-sheet header strong{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#6e6e73}
.f5-more-sheet header button{font:inherit;font-size:13px;font-weight:600;color:#0066cc;background:none;border:0;padding:6px 2px}
.f5-more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 6px}
.f5-more-grid button,.f5-more-grid a{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:6px 2px;border-radius:12px;color:#1d1d1f;text-decoration:none;font:inherit;font-size:11px;line-height:1.2;text-align:center;min-height:44px}
.f5-more-grid img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.f5-more-grid img[src*="hermes.png"]{border-radius:22%;background:#161616}
.f5-more-grid button[aria-current="true"]{background:rgba(0,113,227,.12)}
.f5-more-grid button.is-minimized img{opacity:.55}
.f5-more-grid small{font-size:10px;color:#6e6e73}
.f5-more-grid button:focus-visible,.f5-more-grid a:focus-visible,.f5-more-sheet header button:focus-visible{outline:3px solid #0a84ff;outline-offset:2px}
.f5-more-empty{grid-column:1/-1;margin:4px 0;color:#6e6e73;font-size:13px}
@media (prefers-reduced-motion:reduce){.f5-more,.f5-more-sheet{transition:opacity 120ms linear}.f5-more-sheet{translate:0 0}}

/* ── phone menu bar: long app names wrapped onto two lines. PROPOSED. ── */
@media(max-width:650px){
  .mac-active{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%;flex:0 1 auto}
  .mac-menu .mac-leave{white-space:nowrap}
  .mac-menu .mac-leave span{margin-left:2px}
  .mac-toasts{bottom:calc(98px + env(safe-area-inset-bottom))}   /* clears the Dock, which sits higher on a phone to leave room for the home bar */
}

/* ── banners ──────────────────────────────────────────────────────── */
.f5-banner{position:relative;opacity:0;translate:0 -6px;transition:opacity 160ms ease-out,translate 160ms cubic-bezier(.2,.7,.2,1);padding-right:34px}
.f5-banner.on{opacity:1;translate:0 0}
.f5-banner.leaving{opacity:0;transition:opacity 120ms linear}
.banner-dismiss{position:absolute;top:6px;right:6px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(0,0,0,.06);color:#3a3a3c;font-size:14px;line-height:24px;display:grid;place-items:center;cursor:default}
.banner-dismiss:hover{background:rgba(0,0,0,.12)}
.banner-dismiss:focus-visible{outline:2px solid #0a84ff;outline-offset:1px}
.banner-dismiss::after{content:'';position:absolute;inset:-8px}
@media (prefers-reduced-motion:reduce){.f5-banner{translate:0 0;transition:opacity 120ms linear}}
@media(max-width:650px){.f5-banner{translate:0 6px}.f5-banner.on{translate:0 0}}

/* ── C6: documents travel ─────────────────────────────────────────── */
.record-item[draggable="true"]>summary,.record-item[draggable="true"]>header{cursor:grab}
.dragging-document .record-item[draggable="true"]>summary{cursor:grabbing}
.doc-drop-over{outline:2px solid #0a84ff;outline-offset:-2px;border-radius:10px;background-color:rgba(10,132,255,.08)}
.dragging-document .zoom-comp-select-group,.dragging-document .window-messages .imsg-pane{box-shadow:inset 0 0 0 1.5px rgba(10,132,255,.45);border-radius:10px}
.dragging-document .mac-dock [data-app="messages"] img{transform:translateY(-6px) scale(1.12)}
.mac-dock [data-app="messages"].doc-drop-over{outline:none;background:rgba(10,132,255,.18)}

/* ── C8: Workdays rows open in Time Machine ───────────────────────── */
.tm-day-open{font:inherit;font-size:12px;margin:6px 0 0;padding:3px 9px;border-radius:8px;border:1px solid rgba(0,0,0,.14);background:#f6f6f7;color:#1d1d1f}
.tm-day-open:hover{background:#ececee}
.tm-day-open:focus-visible{outline:3px solid #0a84ff;outline-offset:2px}