/* ============================================================
   Mock pages (rendered inside web cards and Side Peek)
   ============================================================ */
.pg { font-family: var(--font-ui); font-size: 12.5px; line-height: 1.5; color: #202124; min-height: 100%; user-select: text; }
.pg a { color: #1a5cc8; text-decoration: none; cursor: pointer; }
.pg a:hover { text-decoration: underline; }
.pg .grow { flex: 1; }
.pg h1, .pg h2, .pg h3 { margin: 0; }

/* Wikipedia */
.wiki { font-family: var(--font-serif); }
.wiki .wiki-top { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid #e5e5e5; font-family: var(--font-ui); font-size: 11.5px; }
.wiki-menu { font-size: 16px; color: #333; }
.wiki-logo { display: flex; align-items: center; gap: 8px; }
.wiki-logo b { font-family: "Hoefler Text", "Georgia", serif; font-weight: 400; font-size: 17px; letter-spacing: 0.01em; display: block; line-height: 1; }
.wiki-logo small { display: block; font-size: 8.5px; color: #555; letter-spacing: 0.02em; }
.wiki-globe { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f6f6f6, #cfcfcf); box-shadow: inset 0 0 0 1px #bbb; }
.wiki-top-right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.wiki-body { padding: 10px 18px 24px; }
.wiki-title-row { display: flex; align-items: center; gap: 10px; }
.wiki-title-row h1 { font-family: "Linux Libertine", "Georgia", serif; font-weight: 400; font-size: 24px; flex: 1; }
.wiki-lang { font-family: var(--font-ui); font-size: 11px; color: #1a5cc8; }
.wiki-toc { color: #555; }
.wiki-tabs { display: flex; gap: 14px; font-family: var(--font-ui); font-size: 11.5px; border-bottom: 1px solid #a2a9b1; padding-bottom: 4px; margin: 4px 0 6px; }
.wiki-tabs span { color: #1a5cc8; } .wiki-tabs .on { color: #202124; border-bottom: 2px solid #202124; padding-bottom: 4px; margin-bottom: -5px; }
.wiki-tabs .r { margin-left: auto; } .wiki-tabs .r + .r { margin-left: 0; }
.wiki-from { font-family: var(--font-ui); font-size: 10.5px; color: #54595d; margin-bottom: 8px; }
.wiki-note { font-style: italic; font-size: 11.5px; color: #54595d; margin: 0 0 8px 20px; }
.wiki-cols { display: flex; gap: 14px; align-items: flex-start; }
.wiki-text { flex: 1; min-width: 0; }
.wiki-text p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; }
.wiki-text h2 { font-family: "Linux Libertine", "Georgia", serif; font-weight: 400; font-size: 18px; border-bottom: 1px solid #a2a9b1; margin: 14px 0 8px; }
.wiki-text h2 small { font-family: var(--font-ui); font-size: 10.5px; color: #1a5cc8; }
.wiki-box { flex: none; width: 190px; border: 1px solid #a2a9b1; background: #f8f9fa; border-collapse: collapse; font-family: var(--font-ui); font-size: 10.5px; }
.wiki-box th { background: #eaecf0; padding: 5px; font-size: 12px; }
.wiki-box td { padding: 4px 6px; vertical-align: top; border-top: 1px solid #eee; }
.wiki-box td.k { font-weight: 700; width: 64px; }
.wiki-img-ph { height: 90px; background: linear-gradient(135deg, #d9d9d9, #f0f0f0); border: 1px solid #ccc; }

/* Google */
.google { background: #fff; display: flex; flex-direction: column; min-height: 100%; }
.g-top { display: flex; justify-content: space-between; padding: 12px 16px; font-size: 11.5px; }
.g-top span { display: flex; gap: 14px; align-items: center; }
.g-top a { color: #202124; }
.g-apps { color: #5f6368; letter-spacing: -1px; }
.g-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #f6b73c, #e8710a); }
.g-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 20px 60px; gap: 18px; }
.g-logo { font-family: "Product Sans", "Google Sans", var(--font-ui); font-size: 64px; font-weight: 500; letter-spacing: -2px; line-height: 1; }
.g-logo.small { font-size: 22px; letter-spacing: -0.5px; }
.g-search { display: flex; align-items: center; gap: 10px; width: min(440px, 90%); height: 40px; padding: 0 14px; border: 1px solid #dfe1e5; border-radius: 24px; box-shadow: 0 1px 6px rgba(32, 33, 36, 0.14); }
.g-search:hover, .g-search:focus-within { box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28); border-color: transparent; }
.g-search input { flex: 1; border: 0; outline: 0; font-size: 14px; background: transparent; }
.g-search.inline { width: 360px; height: 34px; margin: 0; }
.g-lens, .g-mic { font-size: 13px; color: #9aa0a6; }
.g-btns { display: flex; gap: 10px; }
.g-btns button { height: 32px; padding: 0 14px; background: #f8f9fa; border: 1px solid #f8f9fa; border-radius: 4px; color: #3c4043; font-size: 12px; }
.g-btns button:hover { border-color: #dadce0; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
.g-foot { padding: 12px 20px; background: #f2f2f2; color: #70757a; font-size: 11px; }
.g-bar { display: flex; align-items: center; gap: 20px; padding: 14px 18px 8px; }
.g-tabs { display: flex; gap: 18px; padding: 0 22px; border-bottom: 1px solid #ebebeb; font-size: 11.5px; color: #5f6368; }
.g-tabs span { padding: 6px 0 8px; } .g-tabs .on { color: #1a73e8; border-bottom: 3px solid #1a73e8; }
.g-results { padding: 10px 22px 30px; max-width: 560px; }
.g-stats { color: #70757a; font-size: 11px; margin-bottom: 14px; }
.g-res { margin-bottom: 20px; }
.g-res-url { display: flex; align-items: center; gap: 9px; color: #202124; font-size: 11px; }
.g-res-url img { width: 17px; height: 17px; border-radius: 50%; padding: 1px; box-shadow: inset 0 0 0 1px #ecedef; background: #fff; }
.g-res-url span { display: block; line-height: 1.25; }
.g-res-url small { display: block; color: #5f6368; font-size: 10px; line-height: 1.25; }
.g-res-title { display: block; font-size: 15px; color: #1a0dab; margin: 3px 0 3px; line-height: 1.3; }
.g-res-desc { color: #4d5156; font-size: 12px; }
.g-res-desc b { color: #4d5156; font-weight: 700; }
/* Google's featured snippet: a bordered card above the first organic result,
   with the answer in display size and the source credited underneath. */
.g-snip { border: 1px solid #dadce0; border-radius: 8px; padding: 13px 15px 11px; margin-bottom: 22px; }
.g-snip-body b { font-size: 22px; font-weight: 700; color: #202124; display: block; margin-bottom: 5px; }
.g-snip-body p { margin: 0 0 11px; font-size: 12px; color: #4d5156; }
.g-snip-src { display: flex; align-items: center; gap: 9px; }
.g-snip-src img { width: 17px; height: 17px; border-radius: 50%; box-shadow: inset 0 0 0 1px #ecedef; background: #fff; padding: 1px; }
.g-snip-src span { display: block; font-size: 11px; color: #202124; line-height: 1.25; }
.g-snip-src a { display: block; font-size: 12.5px; color: #1a0dab; line-height: 1.25; }
.g-paa { border-top: 1px solid #ebebeb; padding-top: 14px; margin-top: 4px; }
.g-paa b { display: block; font-size: 15px; color: #202124; margin-bottom: 8px; }
.g-paa-q { display: flex; justify-content: space-between; align-items: center; padding: 11px 2px; border-bottom: 1px solid #ebebeb; font-size: 12.5px; color: #202124; cursor: pointer; }
.g-paa-q i { font-style: normal; color: #5f6368; }

/* Canada.ca */
.canada { font-family: "Noto Sans", var(--font-ui); }
/* Canada.ca / IRCC — colours and metrics traced from the live pages:
   body #333 on white, links #284162, H1 with a 6px #AF3C43 rule, MENU strip
   #26374A, green primary #318000, footer bands #33465C / #26374A / #F8F8F8.
   The real page is 16px; the card renders at 12.5px, so every size below is
   the real one scaled by ~0.78 and rounded to a whole pixel. */
.canada { color: #333; background: #fff; font-family: var(--font-ui); }
.canada a { color: #284162; text-decoration: underline; }
.canada p { margin: 0 0 9px; }
.ca-lang { display: flex; justify-content: flex-end; padding: 5px 16px 0; }
.ca-lang a { font-size: 10.5px; }
.ca-sig { display: flex; align-items: center; gap: 8px; padding: 8px 16px 10px; }
.ca-fip { width: 30px; height: 15px; background: #fff; position: relative; display: flex; align-items: center; justify-content: center; }
.ca-fip::before, .ca-fip::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7.5px; background: #ea2d37; }
.ca-fip::before { left: 0; } .ca-fip::after { right: 0; }
.ca-leaf { width: 11px; height: 11px; background: #ea2d37; clip-path: polygon(50% 0%, 61% 32%, 79% 22%, 72% 44%, 100% 40%, 84% 57%, 92% 66%, 62% 68%, 66% 100%, 50% 84%, 34% 100%, 38% 68%, 8% 66%, 16% 57%, 0% 40%, 28% 44%, 21% 22%, 39% 32%); }
.ca-word { font-size: 9.5px; line-height: 1.15; color: #333; }
.ca-word b { font-weight: 700; }
.ca-word.fr b { font-weight: 400; }
.ca-search { margin-left: auto; display: flex; }
.ca-search input { width: 128px; height: 26px; border: 1px solid #e0e0e0; border-radius: 0; padding: 0 8px; font-size: 11px; color: #333; background: #fff; }
.ca-search button { height: 26px; width: 30px; background: #26374a; color: #fff; border-radius: 0; font-size: 14px; line-height: 1; }
.ca-menubar { display: flex; align-items: stretch; border-top: 1px solid #e0e0e0; }
.ca-menu { background: #26374a; color: #fff; padding: 0 14px; height: 30px; font-weight: 700; font-size: 11px; letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; border-radius: 0; }
.ca-menu .ca-caret, .ca-select .ca-caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin-top: 3px; }
.ca-signin { margin-left: auto; align-self: center; margin-right: 16px; background: #26374a; color: #fff !important; text-decoration: none !important; font-size: 10.5px; padding: 5px 10px; }
.ca-crumbs { padding: 9px 16px 2px; font-size: 10.5px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ca-crumbs i { font-style: normal; color: #767676; }
.ca-body { padding: 6px 16px 22px; max-width: 660px; }
.ca-eyebrow { font-size: 12px; color: #333; font-weight: 700; margin-bottom: 2px; }
.ca-body h1 { font-size: 25px; font-weight: 700; line-height: 1.15; color: #333; width: fit-content; max-width: 100%; border-bottom: 5px solid #af3c43; padding-bottom: 4px; margin: 4px 0 14px; }
.ca-body h2 { font-size: 18px; font-weight: 700; color: #333; margin: 20px 0 8px; line-height: 1.2; }
.ca-body h3 { font-size: 14px; font-weight: 700; color: #333; margin: 14px 0 6px; }
.ca-small { font-size: 11px; color: #5c5c5c; }
.ca-ul { margin: 0 0 10px; padding-left: 18px; }
.ca-ul li { margin-bottom: 5px; }
.ca-alert { display: flex; gap: 9px; border-left: 4px solid #af3c43; padding: 2px 0 2px 11px; margin: 12px 0 16px; }
.ca-alert-i { flex: none; width: 15px; height: 15px; border-radius: 50%; background: #af3c43; color: #fff; font-weight: 700; font-size: 11px; line-height: 15px; text-align: center; margin-top: 1px; }
.ca-alert b { display: block; font-size: 13px; line-height: 1.3; margin-bottom: 4px; }
.ca-alert p { margin: 0 0 5px; font-size: 12px; }
.ca-note { background: #f5f5f5; border-left: 4px solid #26374a; padding: 9px 12px; margin: 12px 0; }
.ca-note b { display: block; font-size: 12.5px; margin-bottom: 3px; }
.ca-note p { margin: 0; font-size: 11.5px; color: #4d4d4d; }
.ca-cta { display: inline-block; background: #318000; color: #fff !important; text-decoration: none !important; border-radius: 5px; padding: 8px 13px; font-size: 13px; margin: 6px 0 14px; }
.ca-most { list-style: none; padding: 0; margin: 0 0 12px; }
.ca-most li { padding: 3px 0; }
.ca-most a { font-size: 12.5px; }
.ca-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin: 4px 0 14px; }
.ca-tile a { font-size: 13px; font-weight: 700; }
.ca-tile p { margin: 4px 0 0; font-size: 11.5px; color: #4d4d4d; }
.ca-sections { list-style: none; padding: 0; margin: 0 0 14px; border-top: 1px solid #e3e3e3; }
.ca-sections li { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid #e3e3e3; }
.ca-sections a { font-size: 13px; font-weight: 700; }
.ca-sections span { font-size: 11.5px; color: #4d4d4d; }
.ca-facts { display: flex; gap: 26px; flex-wrap: wrap; background: #f5f5f5; padding: 11px 13px; margin: 12px 0; }
.ca-fact b { display: block; font-size: 11px; text-transform: none; color: #333; }
.ca-fact span { display: block; font-size: 15px; font-weight: 700; margin: 2px 0 3px; }
.ca-fact a { font-size: 11px; }
.ca-otp { margin: 10px 0 16px; }
.ca-otp b { font-size: 12.5px; }
.ca-otp ul { margin: 5px 0 0; padding-left: 18px; }
.ca-otp li { padding: 2px 0; font-size: 12px; }
.ca-field { border: 0; margin: 0 0 14px; padding: 0; }
.ca-field legend, .ca-field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; padding: 0; }
.ca-field i { font-style: normal; color: #af3c43; font-weight: 700; }
.ca-req { color: #af3c43; }
.ca-radio { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; margin-bottom: 6px !important; font-size: 12.5px; }
.ca-dot { flex: none; width: 14px; height: 14px; border: 1px solid #6f6f6f; border-radius: 50%; background: #fff; position: relative; }
.ca-dot.on { border-color: #26374a; }
.ca-dot.on::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #26374a; }
.ca-select { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; padding: 0 9px; border: 1px solid #6f6f6f; background: #fff; font-size: 12px; color: #333; font-weight: 400; }
.ca-result { background: #f5f5f5; margin: 16px -16px -22px; padding: 16px; }
.ca-result h2 { margin: 0 0 10px; font-size: 18px; }
.ca-result-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; align-items: start; }
.ca-result-card { background: #fff; border: 1px solid #e3e3e3; padding: 12px 13px; }
.ca-result-card b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.ca-result-card p { margin: 0; font-size: 12px; color: #4d4d4d; }
.ca-result-card strong { display: block; font-size: 25px; font-weight: 700; line-height: 1.1; margin: 4px 0 6px; }
.ca-result-card small { display: block; font-size: 10.5px; color: #5c5c5c; margin-bottom: 7px; }
.ca-result-card a, .ca-result-side a { font-size: 11.5px; }
.ca-result-side b { font-size: 14px; }
.ca-result-side ul { margin: 6px 0 8px; padding-left: 16px; }
.ca-result-side li { font-size: 11.5px; margin-bottom: 4px; }
.ca-docnav { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid #e3e3e3; margin-top: 18px; padding-top: 10px; font-size: 12.5px; }
.ca-docnav small { display: block; color: #5c5c5c; font-size: 10.5px; font-weight: 400; }
.ca-docnav a { font-weight: 700; text-align: right; }
.ca-details { margin-top: 22px; padding-top: 10px; border-top: 1px solid #e3e3e3; }
.ca-details b { font-size: 12.5px; }
.ca-fb { font-size: 11px; color: #4d4d4d; margin: 5px 0 6px; }
.ca-fb a { margin-left: 6px; }
.ca-date { font-size: 10.5px; color: #5c5c5c; }
.ca-gcfoot { margin-top: 4px; }
.ca-band { padding: 11px 16px; font-size: 11px; }
.ca-band a { color: #fff !important; }
.ca-band.ctx { background: #33465c; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; color: #fff; }
.ca-band.ctx b { flex-basis: 100%; font-size: 12.5px; margin-bottom: 2px; }
.ca-band.main { background: #26374a; color: #fff; }
.ca-band.main b { display: block; font-size: 12.5px; margin-bottom: 7px; }
.ca-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 16px; }
.ca-cols ul { list-style: none; margin: 0; padding: 0; }
.ca-cols li { padding: 2.5px 0; }
.ca-band.sub { background: #f8f8f8; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; }
.ca-band.sub a { color: #284162 !important; }
.ca-wordmark { margin-left: auto; font-family: var(--font-ui); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: #333; position: relative; padding-right: 13px; }
.ca-wordmark::after { content: ""; position: absolute; right: 0; top: 2px; width: 9px; height: 9px; background: #ea2d37; clip-path: polygon(50% 0%, 61% 32%, 79% 22%, 72% 44%, 100% 40%, 84% 57%, 92% 66%, 62% 68%, 66% 100%, 50% 84%, 34% 100%, 38% 68%, 8% 66%, 16% 57%, 0% 40%, 28% 44%, 21% 22%, 39% 32%); }

/* LinkedIn */
.linkedin { background: #f4f2ee; min-height: 100%; }
.li-nav { display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: #fff; border-bottom: 1px solid #e0e0e0; font-size: 14px; color: #666; }
.li-logo { width: 26px; height: 26px; border-radius: 4px; background: #0a66c2; color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 15px; }
.li-me { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #8ab4f8, #3c6bd6); }
.li-learn { width: 26px; height: 22px; border-radius: 4px; border: 1.5px solid #666; display: grid; place-items: center; font-size: 10px; color: #444 !important; }
.li-learn:hover { border-color: #0a66c2; color: #0a66c2 !important; text-decoration: none; }
.li-bell { position: relative; } .li-bell i { position: absolute; top: -6px; right: -8px; background: #cc1016; color: #fff; font-style: normal; font-size: 9px; padding: 1px 4px; border-radius: 8px; }
.li-cols { display: flex; gap: 12px; padding: 12px; align-items: flex-start; }
.li-side { width: 160px; flex: none; display: flex; flex-direction: column; gap: 8px; }
.li-feed { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.li-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px; font-size: 12px; }
.li-card.small { padding: 8px 12px; font-size: 11px; }
.li-card.profile { padding: 0 0 10px; text-align: center; overflow: hidden; }
.li-cover { height: 40px; background: linear-gradient(90deg, #a0b4f0, #e6b98c); }
.li-avatar { width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f0d0b0, #b07a55); margin: -24px auto 6px; border: 2px solid #fff; }
.li-avatar.sm { width: 32px; height: 32px; margin: 0; flex: none; }
.li-avatar.alt { background: radial-gradient(circle at 40% 35%, #8fa1ff, #4557b8); }
.li-card.profile b { display: block; font-size: 13px; }
.li-card.profile small { display: block; color: #666; padding: 2px 10px; font-size: 10.5px; }
.li-stats { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px 0; text-align: left; font-size: 10.5px; color: #666; border-top: 1px solid #eee; margin-top: 8px; }
.li-stats b { float: right; color: #0a66c2; }
.li-card.post-box { display: flex; align-items: center; gap: 10px; }
.li-input { flex: 1; height: 36px; border: 1px solid #888; border-radius: 20px; display: flex; align-items: center; padding: 0 14px; color: #555; font-weight: 600; }
.li-author { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.li-author b { font-size: 12.5px; } .li-author small { display: block; color: #666; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.li-card p { margin: 0 0 6px; }
.li-img { height: 90px; border-radius: 6px; background: linear-gradient(135deg, #e8e4dc, #cfc8ba); margin-top: 8px; }
.li-hero { background: #2f3f4f; color: #fff; padding: 22px 20px; }
.li-hero small { opacity: 0.7; } .li-hero h2 { font-size: 17px; margin: 6px 0 4px; } .li-hero p { margin: 0 0 12px; opacity: 0.85; }
.li-hero button { background: #fff; color: #222; font-weight: 600; padding: 6px 12px; border-radius: 4px; }
.li-card.rec { margin: 16px 14px; } .li-tag { display: inline-block; background: #e8f0fe; color: #0a66c2; padding: 2px 6px; border-radius: 3px; font-size: 10.5px; margin-bottom: 8px; }
.li-card.rec h3 { font-size: 14px; margin-bottom: 4px; }
.li-primary { background: #0a66c2; color: #fff; padding: 7px 14px; border-radius: 16px; font-weight: 600; margin-top: 8px; }
.li-h { padding: 0 14px; font-size: 14px; }
.li-row { display: flex; gap: 10px; padding: 10px 14px 20px; }
.li-course { flex: 1; background: linear-gradient(135deg, #6c3fa0, #a04a8a); color: #fff; padding: 46px 10px 10px; border-radius: 8px; font-weight: 600; font-size: 12px; position: relative; }
.li-course span { position: absolute; top: 8px; left: 8px; background: rgba(255, 255, 255, 0.9); color: #333; font-size: 9px; padding: 2px 5px; border-radius: 3px; }

/* Miro */
.miro { display: flex; min-height: 100%; background: #f7f7f9; }
.mi-side { width: 44px; flex: none; background: #1c1440; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 14px; }
.mi-side span { width: 28px; height: 28px; border-radius: 5px; background: #2d2560; color: #a7a0d9; font-size: 9px; font-weight: 700; display: grid; place-items: center; }
.mi-main { flex: 1; padding: 20px; }
.mi-team { display: inline-block; border: 1px solid #ddd; background: #fff; padding: 8px 12px; border-radius: 6px; font-weight: 600; font-size: 12px; }
.mi-team small { display: block; color: #777; font-weight: 400; }
.mi-main h2 { font-size: 22px; font-weight: 700; color: #050038; margin: 22px 0 14px; }
.mi-boards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mi-new { height: 120px; background: #4262ff; border-radius: 6px; color: #fff; font-size: 34px; display: grid; place-items: center; }
.mi-board { height: 120px; background: #fff; border-radius: 6px; border: 1px solid #e5e5ea; display: flex; align-items: flex-end; padding: 10px; font-weight: 600; font-size: 12px; }
.mi-board a { color: #050038; }

/* Generic */
.generic { background: #fafafa; min-height: 100%; }
.generic.dark { background: #f2f2f4; }
.ge-nav { display: flex; align-items: center; gap: 16px; padding: 12px 18px; font-size: 12.5px; }
.ge-nav a { color: inherit; opacity: 0.85; }
.ge-logo { font-weight: 800; font-size: 15px; text-transform: capitalize; }
.ge-hero { padding: 28px 22px 18px; }
.ge-hero small { color: #777; text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; }
.ge-hero h1 { font-size: 24px; font-weight: 800; margin: 4px 0 8px; text-transform: capitalize; }
.ge-hero p { margin: 0 0 14px; color: #555; max-width: 460px; }
.ge-actions { display: flex; gap: 14px; align-items: center; }
.ge-actions button { padding: 8px 14px; border-radius: 6px; font-weight: 600; }
.ge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 0 22px 24px; }
.ge-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px; background: #fff; border: 1px solid #e6e6ea; border-radius: 8px; color: #222 !important; }
.ge-tile span { color: #888; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ge-tile:hover { border-color: #bbb; text-decoration: none !important; }

/* ---------- Real pages (web.js) ---------- */
/* A framed page is laid out at 1/scale of the surface and shrunk back, so a card
   shows a site's desktop layout at the stand-ins' size. */
.pf { position: absolute; inset: 0; overflow: hidden; background: #fff; animation: fade-in var(--dur-base) var(--ease-out); }
.pf iframe { position: absolute; top: 0; left: 0; border: 0; width: calc(100% / var(--pf-scale, 1)); height: calc(100% / var(--pf-scale, 1)); transform: scale(var(--pf-scale, 1)); transform-origin: 0 0; background: #fff; }
/* Loading. Until the frame's document has loaded (web.js adds .pf-ready) the page shows
   its skeleton — the same bars as a stand-in's — and then the skeleton fades off it.
   The bars only appear once loading has lasted 150ms, so a cached page never flickers
   one; and a site whose load event is held up by slow images gets its page back after
   2.4s regardless, rather than a skeleton over a page that has long since painted. */
.pf-skel { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--surface-page, #fff); animation: pf-give-up 0s linear 2.4s forwards; }
.pf-skel::before { content: ""; position: absolute; inset: 0; animation: fade-in var(--dur-base) var(--ease-out) 150ms both, pf-sweep 1.2s var(--ease-in-out) 2; /* two sweeps: as long as the skeleton can last */
  --sk: var(--skeleton-base, #ececf0); --sh: var(--skeleton-shine, #f6f6f8);
  background:
    linear-gradient(90deg, transparent 25%, color-mix(in oklab, var(--sh) 80%, transparent) 50%, transparent 75%) 0 0 / 200% 100% no-repeat,
    linear-gradient(var(--sk), var(--sk)) 18px 18px / 60% 12px no-repeat,
    linear-gradient(var(--sk), var(--sk)) 18px 42px / calc(85% - 18px) 12px no-repeat,
    linear-gradient(var(--sk), var(--sk)) 18px 66px / calc(100% - 36px) 90px no-repeat,
    linear-gradient(var(--sk), var(--sk)) 18px 168px / 40% 12px no-repeat,
    linear-gradient(var(--sk), var(--sk)) 18px 192px / calc(85% - 18px) 12px no-repeat; }
@keyframes pf-sweep { from { background-position: 200% 0, 18px 18px, 18px 42px, 18px 66px, 18px 168px, 18px 192px; } to { background-position: -100% 0, 18px 18px, 18px 42px, 18px 66px, 18px 168px, 18px 192px; } }
@keyframes pf-give-up { to { visibility: hidden; } }
.pf.pf-ready .pf-skel { opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); }
.pf.pf-ready .pf-skel::before { animation: fade-in var(--dur-base) var(--ease-out) 150ms both; } /* the sweep stops; the bars stay as they were */
/* On the board a page is an object: the frame never takes the pointer until the
   card goes live, and no frame takes it while a press that began outside is held. */
.card.web:not(.interacting) .pf iframe, .viewport.dragging .pf iframe, .app.present .pf iframe, html.ptr-down .pf iframe { pointer-events: none; }

/* A page that will not be framed: what it is, and how to reach it. */
.pv { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--surface-raised); color: var(--text-primary); animation: fade-in var(--dur-base) var(--ease-out); }
.pv-loading { animation: none; }
.pv-cover { flex: 1 1 48%; min-height: 0; overflow: hidden; background: var(--fill-subtle); }
.pv-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-body { flex: 0 1 auto; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; min-height: 0; }
.pv:not(.has-cover) .pv-body { flex: 1; justify-content: center; padding: 24px 28px; }
.pv-site { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); letter-spacing: var(--ls-12); color: var(--text-secondary); min-width: 0; }
.pv-site span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-fav { width: var(--icon-sm); height: var(--icon-sm); border-radius: var(--r-xs); flex: none; }
.pv-title { margin: 0; font-size: var(--fs-xl); letter-spacing: var(--ls-16); line-height: var(--lh-snug); font-weight: var(--fw-semibold); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv:not(.has-cover) .pv-title { font-size: var(--fs-2xl); letter-spacing: var(--ls-20); -webkit-line-clamp: 3; }
.pv-desc { margin: 0; font-size: var(--fs-md); letter-spacing: var(--ls-13); line-height: var(--lh-base); color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pv-foot { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--border-subtle); font-size: var(--fs-xs); letter-spacing: var(--ls-11); color: var(--text-tertiary); }
.pv-open { white-space: nowrap; }
.sub-stage .pv-foot { display: none; }
/* (its 2.4s is a timeout, not choreography: kept when motion is reduced) */
@media (prefers-reduced-motion: reduce) { .pf-skel { animation-delay: 2.4s !important; } }