/* Client portal pages. Builds on assets/site.css tokens. */
.chip-status { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: lowercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--rule); color: var(--fg-3); vertical-align: middle; }
.chip-status.live { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--rule); }

/* coming soon */
.soon-page { padding-block: 150px 96px; display: grid; gap: clamp(48px, 7vw, 88px); }
.soon-hero { position: relative; max-width: 760px; }
.soon-hero h1 { font-size: clamp(3.4rem, 10vw, 8rem); margin-top: 14px; }
.soon-hero .lede { margin-top: 22px; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--fg-2); max-width: 44ch; }
.soon-hero .frame { position: absolute; right: -10px; top: -20px; width: 120px; height: 120px; }
.soon-hero .frame b { position: absolute; width: 34px; height: 34px; border: 0 solid var(--cyan); }
.soon-hero .frame .f1 { left: 0; top: 0; border-left-width: 5px; border-top-width: 5px; }
.soon-hero .frame .f2 { right: 0; top: 0; border-right-width: 5px; border-top-width: 5px; }
.soon-hero .frame .f3 { left: 0; bottom: 0; border-left-width: 5px; border-bottom-width: 5px; }
.soon-hero .frame .f4 { right: 0; bottom: 0; width: 16px; height: 16px; background: var(--coral); border: 0; animation: tp-blink 2.4s ease-in-out infinite; }
@keyframes tp-blink { 50% { transform: translate(-6px, -6px); } }
@media (max-width: 700px) { .soon-hero .frame { display: none; } }

.whats-coming { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.whats-coming li { padding: 26px 26px 30px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: grid; gap: 10px; align-content: start; }
.whats-coming h2 { font-size: 1.45rem; font-weight: 750; font-variation-settings: "wdth" 84; line-height: 1.1; }
.whats-coming p { color: var(--fg-2); font-size: 15.5px; }
@media (max-width: 860px) { .whats-coming { grid-template-columns: 1fr; } }

.beta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding: 28px 30px; border-radius: 20px; background: var(--night); color: var(--snow); }
.beta h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; font-variation-settings: "wdth" 76; text-transform: lowercase; }
.beta p { color: var(--snow-2); margin-top: 4px; }
.beta .btn { background: var(--cyan); color: var(--ink); }

/* signed-in app */
.app-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); }
.app-bar .wrap { display: flex; align-items: center; gap: 18px; padding-block: 14px; }
.app-bar .logo { width: 104px; }
.app-name { font-family: var(--mono); font-size: 13px; color: var(--fg-2); display: inline-flex; align-items: center; gap: 8px; }
.who { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 14px; min-width: 0; }
.who-email { color: var(--fg-3); font-family: var(--mono); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-out { color: var(--fg); text-decoration: none; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 12px; flex: none; }
@media (max-width: 640px) { .who-email, .app-name { display: none; } }

.app-main { padding-block: clamp(36px, 5vw, 64px) 80px; display: grid; gap: 28px; }
.app-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.app-head h1 { font-size: clamp(2.8rem, 7vw, 5.4rem); margin-top: 8px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab { font: 500 15px var(--body); color: var(--fg-2); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 9px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.report { display: grid; gap: 16px; }
.report-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; }
.report-top h2 { font-size: 1.6rem; font-weight: 750; font-variation-settings: "wdth" 84; }
.report-top p { color: var(--fg-2); font-size: 15px; }
.report-frame { position: relative; border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; background: var(--card); height: min(82vh, 1100px); min-height: 560px; }
.report-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.report-empty { border: 1px dashed var(--rule); border-radius: 18px; padding: clamp(28px, 5vw, 56px); display: grid; gap: 10px; background: var(--card); }
.report-empty h2 { font-size: 1.6rem; font-weight: 750; font-variation-settings: "wdth" 84; }
.report-empty p { color: var(--fg-2); max-width: 56ch; }

.help { border-top: 1px solid var(--rule); padding-top: 22px; max-width: 72ch; }
.help h2 { font-size: 1.05rem; font-weight: 700; font-family: var(--body); margin-bottom: 6px; }
.help p { color: var(--fg-2); font-size: 15px; }
.whats-coming .chip-status { justify-self: start; }