/* ============================================================ Vita 365 — in-place document sheet Reads a first-party static document (/faq.html, /legal/*.html) and shows its article inside the portal instead of handing the URL to a new tab — in the app, to the system browser, which is a full context switch out of Vita for a page the member only wants to read. The documents are marketing pages: site header, breadcrumb, footer, cookie banner, TOC rail. None of that survives — doc-sheet.js lifts `.legal article` out and drops the rest, so what the sheet renders is the document body and nothing else. That means the marketing type scale (styles.css `.legal article`) does not reach it either, and the rules below are the sheet's own: portal tokens, portal sizes. Appended to , so it sits OUTSIDE `.mp-app.v2` and cannot use the `.v2`-scoped component layer. Every token here is a --v2-* read from :root (vita-tokens.css), which is unscoped. ============================================================ */ .doc-sheet-back { position: fixed; inset: 0; z-index: 1500; background: rgba(20, 28, 24, .45); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .18s ease; } .doc-sheet-back[hidden] { display: none; } .doc-sheet-back.open { opacity: 1; } .doc-sheet { background: var(--v2-surface, #fff); color: var(--v2-ink, #1A211E); font-family: var(--v2-font); width: 100%; max-width: 720px; /* Tall on purpose: these are long documents, and a short sheet turns a 3,000-word policy into a 6-line porthole. */ height: 92dvh; max-height: 92dvh; border-radius: var(--v2-r-xl, 28px) var(--v2-r-xl, 28px) 0 0; display: flex; flex-direction: column; overflow: hidden; transform: translateY(24px); transition: transform .22s ease; box-shadow: 0 -8px 40px rgba(20, 35, 30, .18); } .doc-sheet-back.open .doc-sheet { transform: translateY(0); } @media (min-width: 640px) { .doc-sheet-back { align-items: center; padding: 24px; } .doc-sheet { border-radius: var(--v2-r-xl, 28px); height: 88dvh; max-height: 88dvh; } } /* ─── Head ──────────────────────────────────────────────────── */ /* Sticky by structure, not by `position` — the head is a flex sibling of the scroller, so it stays put while the body scrolls under it. */ .doc-sheet-head { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--v2-line, #EAEDEB); /* The sheet's top edge is a rounded corner on mobile, well clear of the notch, so the head needs no safe-area inset of its own. */ } .doc-sheet-title { flex: 1; min-width: 0; margin: 0; font-size: var(--v2-fs-section, 17px); font-weight: 700; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doc-sheet-nav { width: 36px; height: 36px; flex-shrink: 0; border: none; padding: 0; border-radius: var(--v2-r-pill, 999px); background: var(--v2-surface-2, #F4F6F5); color: var(--v2-ink-2, #4A544E); display: grid; place-items: center; cursor: pointer; font-size: var(--v2-ic-md, 18px); } .doc-sheet-nav:active { background: var(--v2-line, #EAEDEB); } .doc-sheet-nav[hidden] { display: none; } /* The back button only exists once a link inside a document has opened a second document in the same sheet. */ .doc-sheet-nav.is-back { margin-right: 2px; } /* ─── Scroller ──────────────────────────────────────────────── */ .doc-sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 20px 20px calc(32px + var(--v2-safe-bot, env(safe-area-inset-bottom, 0px))); } /* The scroller takes focus when a document finishes loading, so the sheet reads from the top and the arrow keys scroll it. That is a programmatic focus on a container, not a keyboard landing on a control — the ring `.v2 [tabindex]:focus` draws around it would be a green box around the whole document. !important because that rule carries one too; the sheet's controls keep their ring. */ .doc-sheet-body:focus { outline: none !important; } /* ─── Document type ─────────────────────────────────────────── */ .doc-sheet-doc { font-size: var(--v2-fs-body, 15px); line-height: var(--v2-lh-loose, 1.7); } .doc-sheet-doc .meta { font-size: var(--v2-fs-caption, 13px); color: var(--v2-ink-3, #68706C); margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--v2-line, #EAEDEB); } .doc-sheet-doc h3 { font-size: var(--v2-fs-section, 17px); font-weight: 700; color: var(--v2-brand-ink, #2C6650); letter-spacing: -0.02em; margin: 28px 0 10px; } .doc-sheet-doc h3:first-child { margin-top: 0; } /* The FAQ asks its questions in h4 — the legal documents have none, so this size exists for that one document. */ .doc-sheet-doc h4 { font-size: var(--v2-fs-body, 15px); font-weight: 700; color: var(--v2-ink, #1A211E); margin: 18px 0 6px; } .doc-sheet-doc h5 { font-size: var(--v2-fs-caption, 13px); font-weight: 700; margin: 16px 0 6px; } .doc-sheet-doc p { color: var(--v2-ink-2, #4A544E); margin: 0 0 12px; } .doc-sheet-doc ul, .doc-sheet-doc ol { color: var(--v2-ink-2, #4A544E); margin: 0 0 14px; padding-left: 20px; } .doc-sheet-doc li { margin-bottom: 6px; } .doc-sheet-doc strong { color: var(--v2-ink, #1A211E); font-weight: 700; } .doc-sheet-doc a { color: var(--v2-brand-ink, #2C6650); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; /* Long addresses and URLs inside a 320px-wide sheet: break rather than push the whole document sideways. */ overflow-wrap: anywhere; } .doc-sheet-doc table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: var(--v2-fs-caption, 13px); } .doc-sheet-doc th, .doc-sheet-doc td { text-align: left; padding: 8px 10px; border: 1px solid var(--v2-line, #EAEDEB); color: var(--v2-ink-2, #4A544E); } .doc-sheet-doc th { background: var(--v2-surface-2, #F4F6F5); color: var(--v2-ink, #1A211E); font-weight: 700; } /* ─── Load / error ──────────────────────────────────────────── */ .doc-sheet-state { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 20px; text-align: center; font-size: var(--v2-fs-caption, 13px); color: var(--v2-ink-3, #68706C); } .doc-sheet-spin { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--v2-line, #EAEDEB); border-top-color: var(--v2-brand-ink, #2C6650); animation: doc-sheet-spin .7s linear infinite; } @keyframes doc-sheet-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .doc-sheet-spin { animation-duration: 2.4s; } .doc-sheet, .doc-sheet-back { transition: none; } } /* The escape hatch: whatever went wrong locally, the document is still on the web, and the link that opened the sheet still knows its URL. */ .doc-sheet-state a { color: var(--v2-brand-ink, #2C6650); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }