/* The missing pages (v2-pages, 13 Oct 2026; designs in local/review/gap-designs): errors, offline, slow start, visitor
   pages behind shared links, the join panel. Kit v1.1 tokens from app.css; dark follows them. */
:root { --gp-ember-ink: var(--ember); --gp-orchid-ink: var(--orchid); --gp-ember-soft: var(--ember-soft); --gp-orchid-soft: var(--orchid-soft); --gp-jade-soft: var(--jade-soft); }
.col:has(> .gp-page), .col:has(> .gp-hero) { max-width: none; padding: 0; }
.gp-page { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 480px; margin: auto; padding: 0 18px 40px; color: var(--ink); overflow-wrap: anywhere; font-family: var(--font-ui); }
.gp-top { display: flex; align-items: center; gap: 8px; min-height: 64px; }
.gp-top .lockup { height: 36px; width: 108px; flex-shrink: 1; min-width: 50px; }
.gp-top .lockup svg { width: 100%; height: 100%; }
.gp-top .pill { flex-shrink: 0; }
.gp-chip, .gp-src { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 10px; background: var(--wash); font-size: 14px; font-weight: 600; }
.gp-chip { height: 32px; white-space: nowrap; }
.gp-chip .ic, .gp-src .ic { width: 16px; height: 16px; }
.gp-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 48px 24px; }
.gp-tile { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0; }
.gp-tile .ic, .gp-tile svg { width: 28px; height: 28px; font-size: 28px; }
.gp-tile.grey { background: #92969F; color: white; }
.gp-tile.plain { background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); }
.gp-tile.ember { background: var(--ember); color: white; }
.gp-tile.jade { background: var(--gp-jade-soft); color: var(--jade); }
.gp-empty h1, .gp-join h2 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.gp-empty p, .gp-join p { font-size: 17px; line-height: 26px; color: var(--text2); max-width: 22em; }
.gp-empty .btn { width: 100%; max-width: 320px; }
.gp-code { font-size: 12.5px; color: var(--text2); }
.gp-email { text-align: center; user-select: text; margin-top: -48px; }
.gp-hero { min-height: 100vh; min-height: 100dvh; background: var(--ember-g); color: var(--cover-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.gp-mark, .gp-mark svg { width: 120px; height: 120px; }
.gp-hero h2 { font-size: 18px; line-height: 26px; font-weight: 700; }
.gp-hero p { font-size: 14px; color: var(--cover-ink); }
.gp-hero button { background: var(--on-cover-2); color: var(--cover-ink); min-height: 54px; }
.gp-offline { position: fixed; top: env(safe-area-inset-top, 0px); left: 50%; transform: translateX(-50%); width: min(480px, 100%); z-index: 39; display: flex; gap: 12px; padding: 10px 16px; border-radius: 0 0 16px 16px; background: #27282C; color: white; }
.gp-offline[hidden] { display: none; }
/* while the bar shows, the page starts below it */
.gp-offline-on #view { padding-top: 64px; }
.gp-offline b, .gp-offline span { display: block; }
.gp-offline span { font-size: 13.5px; color: rgba(255,255,255,.72); }
.gp-join { background: var(--panel); border-radius: 24px; padding: 24px 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; color: var(--ink); }
.gp-join .gp-tile { width: 48px; height: 48px; }
.gp-join .small, .gp-thing .small { font-size: 13px; line-height: 20px; color: var(--text2); }
.gp-link { background: none; border: 0; color: var(--gp-ember-ink); font: inherit; text-decoration: underline; min-height: 44px; padding: 0 4px; }
.gp-article { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.gp-article h1 { font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.gp-article p { font-size: 17px; line-height: 26px; color: var(--text2); }
.gp-by b, .gp-name { color: var(--gp-orchid-ink); font-weight: 700; }
.gp-why { background: var(--gp-ember-soft); border-radius: 16px; padding: 14px; width: 100%; }
.gp-why > b, .gp-detail > b { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.gp-why > b { color: var(--gp-ember-ink); }
.gp-why p { font-size: 15px; line-height: 22px; font-weight: 500; margin-top: 6px; }
.gp-article > .btn { width: 100%; }
.gp-thing { background: var(--panel); border-radius: 24px; overflow: hidden; }
.gp-picture { position: relative; aspect-ratio: 4 / 5; background: var(--wash); }
.gp-picture img { width: 100%; height: 100%; object-fit: cover; }
.gp-foot { position: absolute; inset: auto 0 0; padding: 32px 16px 16px; background: linear-gradient(transparent, rgba(0,0,0,.75)); display: flex; justify-content: space-between; align-items: end; gap: 8px; color: white; font-size: 15px; }
.gp-foot b { font-size: 64px; font-weight: 700; }
.gp-kind { border-radius: 999px; padding: 6px 12px; background: var(--scrim); backdrop-filter: blur(10px); }
.gp-body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.gp-name { font-size: 15px; }
.gp-thing h2 { font-size: 20px; line-height: 26px; font-weight: 700; }
.gp-detail p { font-size: 15px; line-height: 22px; margin-top: 4px; }
.gp-evidence { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-evidence .btn { background: var(--gp-orchid-soft); color: var(--gp-orchid-ink); border-radius: 999px; min-height: 28px; height: auto; padding: 4px 10px; font-size: 13px; font-weight: 600; max-width: 100%; }
.gp-page button, .gp-join button { white-space: normal; }
.gp-page :focus-visible, .gp-hero :focus-visible, .gp-join :focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --gp-ember-ink: #E98C82; --gp-orchid-ink: #BE9FE6; --gp-ember-soft: rgba(180,71,68,.2); --gp-orchid-soft: rgba(112,67,152,.28); --gp-jade-soft: rgba(40,106,90,.28); }
}
:root[data-theme="dark"] { --gp-ember-ink: #E98C82; --gp-orchid-ink: #BE9FE6; --gp-ember-soft: rgba(180,71,68,.2); --gp-orchid-soft: rgba(112,67,152,.28); --gp-jade-soft: rgba(40,106,90,.28); }
@media (max-width: 350px) { .gp-top { gap: 4px; } .gp-chip { padding-inline: 6px; font-size: 12px; } .gp-top .pill { padding-inline: 8px; } }

/* ---------- Ask Tellz (js/ask.js): the sheet, the thread, proposals, limit, paused, earlier questions ---------- */
/* Ask sheet; merged into pages.css with the other kit sheets. */
.sheet:has(> .ask-kit) { padding: 0; gap: 0; height: 88dvh; max-height: 88dvh; max-width: 480px; overflow: hidden; background: var(--panel); color: var(--ink); }
.sheet:has(> .ask-kit) > .handle { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); margin: 0; }
.ask-kit, .ask-current { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1; }
.ask-kit { overflow: hidden; }
.ask-kit [hidden] { display: none !important; }
.ask-kit .chathead { flex: none; border-color: var(--rule); }
.ask-kit .ask-av { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--orchid); color: white; }
.ask-av svg { width: 30px; height: 30px; fill: currentColor; }
.ask-kit .ch-t b { font-size: 20px; line-height: 28px; font-weight: 700; }
.ask-kit .ch-t span { font-size: 13.5px; color: var(--text2); white-space: normal; }
.ask-kit .chathead .circle { width: 40px; height: 40px; flex: none; background: var(--page); color: var(--ink); }
.ask-kit .cq { background: #212121; color: white; border-radius: 18px 18px 4px 18px; font-size: 15px; line-height: 22px; }
.ask-kit .ca { max-width: 94%; }
.ask-kit .ca-body { background: none; padding: 0; min-width: 0; color: var(--ink); }
.ask-kit .ca:has(.ca-cards) { width: 100%; max-width: 100%; }
.ask-kit .ca:has(.ca-cards) .ca-body { width: 100%; }
.ask-stage { margin: 0; padding: 12px 2px; color: var(--text2); font-size: 15px; line-height: 22px; }
.ask-stage > span { display: inline-block; animation: ask-stage-in 240ms var(--ease-out); }
@keyframes ask-stage-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ask-stage > span { animation: none; } }
.ask-bubble { background: var(--wash); padding: 12px 14px; border-radius: 18px 18px 18px 4px; font-size: 15px; line-height: 22px; }
.ask-bubble p, .cq { overflow-wrap: anywhere; }
.ask-bubble p { white-space: pre-wrap; }
.ask-bubble a { color: var(--gp-orchid-ink); text-decoration: underline; }
.ask-kit .ca, .ask-kit .ca-src, .ask-kit .lchip span { min-width: 0; overflow-wrap: anywhere; }
.ask-kit .chatlog > * { flex-shrink: 0; }
.ask-kit .nm { color: var(--gp-orchid-ink); font-weight: 700; }
.ask-kit .ca-src .lchip { background: var(--gp-orchid-soft); color: var(--gp-orchid-ink); height: auto; min-height: 28px; padding: 4px 10px; font-size: 13px; font-weight: 600; white-space: normal; }
.ask-source { font-size: 12.5px; color: var(--text2); margin-top: 6px; }
.ask-intro { text-align: center; padding: 24px 10px 20px; }
.ask-intro h3 { font-size: 18px; line-height: 26px; font-weight: 700; }
.ask-kit .small, .ask-kit .tiny { color: var(--text2); }
.ask-intro .small { margin-top: 8px; }
.ask-topic, .ask-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text2); margin: 16px 0 8px; }
.ask-kit .sugg { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-kit .lchip { white-space: normal; text-align: left; max-width: 100%; background: var(--panel); color: var(--ink); border: 1px solid var(--rule); }
.ask-kit .sugg .lchip { min-height: 36px; height: auto; }
.ask-kit .ca-change { background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--gp-orchid-ink); border-radius: 20px; padding: 14px; }
.ask-kit .ca-change b { font-size: 15px; line-height: 22px; font-weight: 700; }
.ask-kit .ask-eyebrow { display: flex; align-items: center; gap: 6px; color: var(--gp-orchid-ink); margin: 0; }
.ask-kit .ca-change .btn { min-height: 44px; background: var(--page); color: var(--ink); }
.ask-kit .ca-change [data-act="chat-yes"], .ask-kit .ask-paused .btn { background: var(--ember); color: white; }
.ask-kit .ca-change.done { background: var(--wash); box-shadow: none; }
.ask-kit .ca-change.applied { background: var(--gp-jade-soft); color: var(--jade); }
.ask-kit .ca.err .ask-bubble { border-left: 1.5px solid #B42336; }
.ask-kit .ca.err .lchip { margin-top: 10px; }
.ask-limit { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; margin: 12px 14px; background: #FBF3E6; color: #8C5B0E; border-radius: 20px; }
.ask-limit .lchip { color: #8C5B0E; background: transparent; }
.ask-paused { margin: auto; }
.ask-pause { width: 56px; height: 56px; display: grid; place-items: center; background: var(--wash); border-radius: 16px; margin: 0 auto 16px; }
.ask-paused .btn { margin-top: 20px; }
.ask-tabs { display: flex; flex: none; min-width: 0; padding: 4px; margin: 8px 16px; border-radius: 999px; background: var(--wash); }
.ask-tabs button { flex: 1; min-width: 0; height: 40px; border: 0; outline: none; border-radius: 999px; color: var(--text2); text-align: center; font-weight: 500; }
.ask-tabs [aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-float); }
.ask-new { align-self: flex-end; flex: none; min-height: 36px; padding: 4px 16px; color: var(--text2); font-size: 14px; }
#ask-history { overflow-y: auto; padding: 0 16px; }
.ask-history-row { display: flex; flex-direction: column; gap: 5px; padding: 14px 0; border-bottom: 1px solid var(--rule); width: 100%; text-align: left; color: var(--ink); }
.ask-history-row time { font-size: 12.5px; color: var(--text2); }
.ask-history-row b { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.ask-history-row span { font-size: 14px; color: var(--text2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-kit .chatform { flex: none; border-color: var(--rule); }
.ask-kit .askbox { height: 48px; min-height: 48px; background: var(--page); border: 0; }
.ask-kit .askbox:focus-within { box-shadow: inset 0 0 0 2px var(--gp-orchid-ink); }
.ask-kit .askbox input { color: var(--ink); }
.ask-kit .askbox button { width: 40px; height: 40px; background: var(--ember); color: white; }
.ask-kit .chatfoot { color: var(--text2); }
.ask-kit .chatfoot .linkbtn { color: var(--gp-ember-ink); }
/* Ask Tellz in dark (owner, 25 Oct 2026: "on dark screen it needs proper design"; decided under KB 49): one lifted surface with
   a hairline edge, no grey-on-grey. The questions to try are Ask's Orchid tint (rule 4), the tabs and the box quiet washes of
   white, the reader's own questions a lighter bubble than the panel. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #sheet:has(> .ask-kit) { --ask-lift: #161618; --ask-wash: rgba(255, 255, 255, .06); --ask-wash-2: rgba(255, 255, 255, .12); --ask-edge: rgba(255, 255, 255, .09); --ask-chip: color-mix(in srgb, var(--orchid) 20%, transparent); } }
:root[data-theme="dark"] #sheet:has(> .ask-kit) { --ask-lift: #161618; --ask-wash: rgba(255, 255, 255, .06); --ask-wash-2: rgba(255, 255, 255, .12); --ask-edge: rgba(255, 255, 255, .09); --ask-chip: color-mix(in srgb, var(--orchid) 20%, transparent); }
#sheet:has(> .ask-kit) { background: var(--ask-lift, var(--panel)); box-shadow: inset 0 0 0 1px var(--ask-edge, transparent), var(--shadow-float, none); }
#sheet:has(> .ask-kit) .ask-kit .chathead, #sheet:has(> .ask-kit) .ask-kit .chatform { border-color: var(--ask-edge, var(--rule)); }
#sheet:has(> .ask-kit) .ask-tabs { background: var(--ask-wash, var(--wash)); }
#sheet:has(> .ask-kit) .ask-tabs [aria-pressed="true"] { background: var(--ask-wash-2, var(--panel)); }
#sheet:has(> .ask-kit) .ask-kit .sugg .lchip { background: var(--ask-chip, var(--panel)); border-color: var(--ask-chip, var(--rule)); }
#sheet:has(> .ask-kit) .ask-kit .askbox { background: var(--ask-wash, var(--page)); }
#sheet:has(> .ask-kit) .ask-kit .chathead .circle { background: var(--ask-wash-2, var(--page)); }
#sheet:has(> .ask-kit) .ask-kit .cq { background: var(--ask-wash-2, #212121); }
.ask-kit button:focus-visible { outline: 2px solid var(--gp-orchid-ink); outline-offset: 2px; }

/* ---------- Your reports (js/days.js): the week, the reports, the month, the locked day; the search sheet ---------- */
/* Kept separate until the days styles are merged into pages.css. */
#sheet:has(.gp-days), #sheet:has(.gp-search) { left: 50%; width: min(480px, 100%); background: var(--panel); }
#sheet:has(.gp-search) { height: 88vh; height: 88dvh; max-height: 88dvh; }
.gp-days, .gp-search { min-width: 0; color: var(--ink); }
.gp-days button, .gp-search button { font: inherit; color: inherit; cursor: pointer; }
.gp-days button:disabled { opacity: .4; cursor: default; }
.gp-days button:focus-visible, .gp-search button:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.gp-days-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gp-days-head h2 { font-size: 24px; line-height: 32px; font-weight: 600; }
.gp-round { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--wash); border: 0; }
.gp-round::before { content: ''; position: absolute; inset: -4px; }
.gp-close { width: 40px; height: 40px; margin-left: auto; }
.gp-week, .gp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; margin-top: 14px; }
.gp-day { position: relative; display: flex; align-items: center; flex-direction: column; justify-content: center; min-width: 0; min-height: 44px; border: 0; background: transparent; border-radius: 12px; padding: 4px 0; gap: 4px; }
.gp-day::before { content: ''; position: absolute; width: 44px; height: 44px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.gp-week .gp-day > span, .gp-weekday { color: var(--text2); font-size: 12px; }
.gp-day b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 15px; font-weight: 600; }
.gp-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ember); }
.gp-today b { background: var(--ember); color: white; }
.gp-unavailable { color: var(--text3); }
.gp-reports { display: grid; gap: 8px; margin-top: 16px; }
.gp-report { display: grid; grid-template-columns: 64px minmax(0, 1fr) 20px; align-items: center; gap: 12px; border: 0; border-radius: 20px; background: var(--wash); padding: 8px 12px 8px 8px; width: 100%; text-align: left; }
.gp-report.gp-current { background: var(--gp-ember-soft); box-shadow: inset 0 0 0 1.5px var(--ember); }
.gp-thumb { display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 14px; background: linear-gradient(135deg, var(--ember), var(--gp-ember-ink)); color: white; flex-shrink: 0; }
.gp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gp-thumb svg { width: 26px; height: 26px; }
.gp-report small { display: block; font-size: 12.5px; line-height: 18px; color: var(--text2); }
.gp-report b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 21px; font-weight: 600; }
.gp-month-label { background: none; border: 0; min-height: 44px; margin-top: 8px; font-weight: 600; }
.gp-month { padding: 16px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--rule); scroll-margin-top: 12px; }
.gp-month-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gp-month-head h3 { font-size: 17px; font-weight: 600; }
.gp-grid .gp-day { margin-top: 4px; }
.gp-grid .gp-has { background: var(--gp-ember-soft); }
.gp-grid .gp-today { background: var(--ember); color: white; }
.gp-grid .gp-today .gp-dot { background: white; }
.gp-grid .gp-dot { position: absolute; bottom: 3px; }
.gp-caption, .gp-days-note, .gp-small { font-size: 14px; line-height: 21px; color: var(--text2); }
.gp-caption { margin-top: 8px; }
.gp-days-note { text-align: center; margin: 16px 0; }
.gp-owner-rows button, .gp-recent-row { display: flex; align-items: center; gap: 12px; min-height: 48px; width: 100%; background: none; border: 0; text-align: left; }
.gp-owner-rows button > :last-child { margin-left: auto; }
.gp-locked, .gp-search-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 24px 0; }
.gp-locked h2 { font-size: 24px; line-height: 32px; font-weight: 600; }
.gp-locked p { color: var(--text2); font-size: 15px; line-height: 22px; }
.gp-plain-tile { display: grid; place-items: center; width: 56px; height: 56px; background: var(--wash); border-radius: 16px; color: var(--text2); }
.gp-login, .gp-start { display: block; width: 100%; min-height: 48px; border: 0; border-radius: 24px; margin-top: 8px; background: none; }
/* The shared report's locked day (decided under KB 49, 24 Oct 2026): one centred column, the Gradient arrow for Log in
   and an outline button of the same width for Start your own; the words centred under the tile and the heading. */
.gp-locked p[dir] { text-align: center; }
.gp-locked-acts { display: grid; gap: 10px; width: 100%; margin-top: 8px; }
#sheet .gp-locked-acts .ti-primary.gp-login { display: flex; width: 100%; margin: 0; }
.gp-locked-acts .gp-start { margin: 0; border: 1px solid var(--line); background: var(--card, transparent); color: var(--ink); font: 600 16px/22px Manrope, sans-serif; text-align: center; }
.gp-locked-acts .gp-start:active { transform: scale(.98); }
.gp-search-field { display: flex; align-items: center; gap: 8px; min-height: 52px; border-radius: 16px; background: var(--wash); margin: 16px 0; padding: 0 12px; }
.gp-search-field:focus-within { box-shadow: 0 0 0 2px var(--ember); }
.gp-search-field input { min-width: 0; width: 100%; border: 0; background: none; outline: none; color: var(--ink); font: inherit; font-size: 16px; }
.gp-search-field input::-webkit-search-cancel-button { display: none; }
.gp-clear { border: 0; background: none; min-width: 44px; min-height: 44px; }
.gp-clear[hidden] { display: none; }
.gp-search-results h3 { font-size: 15px; font-weight: 600; margin: 16px 0 8px; }
.gp-faces, .gp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-face { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 80px; overflow-wrap: anywhere; background: none; border: 0; font-size: 12px !important; }
.gp-initials { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gp-orchid-soft); color: var(--gp-orchid-ink); font-size: 15px; font-weight: 600; }
.gp-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--rule); background: var(--panel); border-radius: 24px; max-width: 100%; overflow-wrap: anywhere; }
.gp-pill svg { width: 20px; height: 20px; color: var(--gp-ember-ink); }
.gp-reading { display: flex; gap: 8px; align-items: center; color: var(--text2); }
.gp-search-mark, .gp-search-mark svg { width: 24px; height: 24px; }
.gp-count { font-size: 14px; color: var(--text2); }
.gp-result { display: flex; align-items: center; width: 100%; gap: 12px; min-height: 64px; padding: 8px 0; background: none; border: 0; border-bottom: 1px solid var(--rule); text-align: left; overflow-wrap: anywhere; }
.gp-result .gp-thumb { width: 48px; height: 48px; border-radius: 12px; }
.gp-result > span:last-child { flex: 1; min-width: 0; }
.gp-result small { display: block; font-size: 12.5px; line-height: 18px; color: var(--text2); }
.gp-result small b { color: var(--gp-orchid-ink); font-weight: 700; }
.gp-result small + span { display: block; font-size: 15px; line-height: 21px; margin-top: 3px; }
.gp-hit { color: var(--gp-ember-ink); background: var(--gp-ember-soft); }
@media (prefers-reduced-motion: reduce) { .gp-search-mark path { animation: none; } }

/* ---------- The archive page as Your reports (js/screens-portal.js) ---------- */
/* Kept separate until the archive styles are merged into pages.css. */
.gp-arch-page { width: 100%; max-width: 640px; margin-inline: auto; color: var(--ink); overflow-wrap: anywhere; }
.gp-arch-head { margin: 16px 0 24px; }
.gp-arch-head h1 { font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -.03em; }
.gp-arch-head p { margin-top: 8px; font-size: 17px; line-height: 26px; color: var(--text2); }
.gp-arch-search { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); color: var(--text2); text-align: left; font-size: 16px; }
.gp-arch-search > .ic { flex-shrink: 0; }
.gp-arch-view { margin-top: 16px; }
.gp-arch-view button { min-height: 44px; }
.gp-arch-month { margin-top: 24px; }
.gp-arch-month-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px; }
.gp-arch-month-head h2 { font-size: 18px; line-height: 26px; font-weight: 700; }
.gp-arch-month-head span { color: var(--text2); font-size: 14px; line-height: 20px; }
.gp-arch-list { display: grid; gap: 8px; }
.gp-arch-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 20px; gap: 12px; align-items: center; width: 100%; padding: 8px 12px 8px 8px; border-radius: 20px; background: var(--wash); color: var(--ink); text-align: left; }
.gp-arch-thumb { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: var(--ember-g); color: white; }
.gp-arch-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gp-arch-thumb svg { width: 28px; height: 28px; }
.gp-arch-copy { min-width: 0; }
.gp-arch-copy small { display: block; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--text2); }
.gp-arch-copy b { display: -webkit-box; margin-top: 2px; font-size: 15px; line-height: 21px; font-weight: 600; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gp-arch-calendar { margin-top: 16px; }
.gp-arch-calendar button { min-height: 44px; }
.gp-arch-page button:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* Authentication */
.col:has(> .gp-au) { padding: 0; max-width: 480px; }
.gp-au { width: 100%; max-width: 480px; margin: auto; color: var(--ink); font-family: var(--font-ui); overflow-wrap: anywhere; }
/* Words on the Ember gradient are solid ink: its darkest stop leaves 70% ink at 3.1:1 (WCAG AA needs 4.5). */
.gp-au-band { background: var(--ember-g); color: var(--cover-ink); border-radius: 0 0 24px 24px; padding: 0 18px 28px; }
.gp-au-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; margin-bottom: 24px; }
.gp-au-top .lockup { width: 120px; height: 40px; color: var(--cover-ink); }
.gp-au-top .lockup svg { width: 100%; height: 100%; }
.gp-au-start { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--on-cover-2); color: var(--cover-ink); font: inherit; font-size: 14px; font-weight: 600; }
.gp-au-tile { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: var(--on-cover-2); color: var(--cover-ink); margin-bottom: 18px; }
.gp-au-tile svg { width: 52px; height: 52px; }
.gp-au h1 { font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -.03em; }
.gp-au-band > p { margin-top: 12px; font-size: 17px; line-height: 26px; color: var(--cover-ink); }
.gp-au-body { display: flex; flex-direction: column; gap: 12px; padding: 24px 18px; }
.gp-au .btn { min-height: 54px; border-radius: 999px; justify-content: center; font-size: 16px; font-weight: 600; white-space: normal; background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.gp-au .btn.tint:not(.ti-primary) { background: var(--ember); color: white; box-shadow: none; }
.gp-au-foot { text-align: center; font-size: 13px; line-height: 20px; color: var(--text2); margin-top: 12px; }
.gp-au-divider { display: flex; align-items: center; gap: 14px; color: var(--text2); font-size: 14px; margin: 6px 0; }
.gp-au-divider::before, .gp-au-divider::after { content: ""; height: 1px; flex: 1; background: var(--rule); }
.gp-au-opening { min-height: 100vh; min-height: 100dvh; background: var(--ember-g); color: var(--cover-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 18px; text-align: center; }
.gp-au-big { width: 120px; height: 120px; flex-shrink: 0; color: var(--cover-ink); }
.gp-au-opening h2 { font-size: 18px; line-height: 26px; font-weight: 700; }
.gp-au-opening p { font-size: 14px; color: var(--cover-ink); }
.gp-au-email { padding: 0 18px 24px; }
.gp-au-email .eyebrow { font-size: 14px; font-weight: 700; color: var(--gp-ember-ink); }
.gp-au-email .title p { color: var(--text2); }
.gp-au-email .note { background: none; padding: 0; font-size: 13px; line-height: 20px; color: var(--text2); }
.gp-au-email .bottom { position: static; transform: none; width: 100%; padding: 12px 0 0; background: none; border: 0; }
.gp-au-field .inbox { min-height: 56px; border-radius: 16px; }
/* Log in by WhatsApp (KB 52): the country's flag and code sit in the field, a select over them (decided under KB 49). */
.gp-au-field .st-cc { position: relative; flex: none; display: flex; align-items: center; padding: 0 22px 0 2px; margin-right: 10px; border-right: 1px solid var(--line); white-space: nowrap; font-size: 16px; }
.gp-au-field .st-cc::after { content: ""; position: absolute; right: 8px; top: 50%; width: 6px; height: 6px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); }
.gp-au-field .st-cc select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
/* One calm ink ring on the field's box while typing; the input inside never draws its own outline, and the error colour
   shows only after Send the code fails, with the message under the field (owner, 16 Oct 2026: no red while typing). */
.gp-au .gp-au-field > .field > .inbox:focus-within { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink) 12%, transparent); }
.gp-au .gp-au-field .inbox :is(input, select):is(:focus, :focus-visible) { outline: 0; box-shadow: none; }
.gp-au .gp-au-field > .field.bad > .inbox { border: 1px solid var(--alert); box-shadow: 0 0 0 3px color-mix(in oklab, var(--alert) 16%, transparent); }
.gp-au-field input { min-width: 0; border-radius: 0; -webkit-appearance: none; appearance: none; }
/* Browser autofill paints the input alone (a box inside the box): keep the field's own colour. */
.gp-au-field input:-webkit-autofill, .gp-au-field input:-webkit-autofill:hover, .gp-au-field input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--field) inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); transition: background-color 9999s 0s; }
.gp-au-field input:autofill { background: transparent; }
.gp-au :focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* ---------- The plan states (js/states.js): the banners on the report, the paused pages ---------- */
/* Merged into pages.css with the other gap pages. */
.gp-st-banner { display:flex; align-items:center; gap:12px; padding:12px 12px 12px 14px; border:0; border-radius:20px; background:var(--panel); color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule); }
.gp-st-tile { display:flex; align-items:center; justify-content:center; flex:0 0 40px; height:40px; border-radius:12px; }
.gp-st-trial .gp-st-tile { background:#FBF3E6; color:#8C5B0E; }
.gp-st-payment .gp-st-tile { background:#FBEDEF; color:#B42336; }
.gp-st-cancel .gp-st-tile { background:var(--gp-ember-soft); color:var(--gp-ember-ink); }
.gp-st-title .gp-st-tile { background:var(--gp-orchid-soft); color:var(--gp-orchid-ink); }
.gp-st-copy { flex:1; min-width:0; overflow-wrap:anywhere; text-align:left; }
.gp-st-copy strong { display:block; font-size:15px; line-height:21px; font-weight:700; }
.gp-st-copy > span { display:block; color:var(--text2); font-size:13.5px; line-height:19px; }
/* the banner's one action is Ember: black is never an action colour (Design bible line 3) */
.gp-st-pill { flex:none; height:38px; padding:0 14px; border:0; border-radius:999px; background:var(--ember); color:white; font:700 14px var(--font-ui); }
.gp-st-payment .gp-st-pill { background:#B42336; }
.gp-st-cancel .gp-st-pill { background:var(--ember); }
.gp-st-title .gp-st-pill { background:var(--orchid); }
.col:has(> .gp-st-page) { width:100%; max-width:640px; padding:0; margin-inline:auto; }
.gp-st-page { width:100%; max-width:640px; margin:auto; background:var(--page); color:var(--ink); overflow-wrap:anywhere; }
.gp-st-cover { background:var(--ember-g); color:var(--cover-ink); border-radius:0 0 24px 24px; padding:0 18px 28px; }
.gp-st-top { display:flex; align-items:center; min-height:72px; }
.gp-st-top .lockup { width:108px; height:36px; color:var(--cover-ink); }
.gp-st-top .lockup svg { width:100%; height:100%; }
.gp-st-greeting { margin:16px 0 4px; font-size:22px; line-height:28px; font-weight:700; }
.gp-st-sub { margin:0; font-size:14px; color:var(--cover-ink); }
.gp-st-cover h1 { margin:24px 0 0; font-size:32px; line-height:38px; font-weight:600; letter-spacing:-.03em; color:var(--cover-ink); }
.gp-st-body { display:grid; gap:18px; padding:18px 18px 32px; }
.gp-st-card { background:var(--panel); border-radius:24px; padding:18px; }
.gp-st-card h3 { margin:0; font-size:17px; line-height:24px; font-weight:700; }
.gp-st-checks { display:grid; gap:12px; list-style:none; padding:0; margin:18px 0; }
.gp-st-checks li { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:21px; }
.gp-st-checks .ic { flex:none; color:var(--jade-ink); }
.gp-st-checks .gp-st-no .ic { color:var(--alert); }
.gp-st-muted { color:var(--text2); font-size:13.5px; line-height:19px; margin:16px 0 0; }
.gp-st-action { display:flex; align-items:center; justify-content:center; text-align:center; width:100%; max-width:360px; min-height:54px; margin:24px auto 0; border:0; border-radius:999px; background:var(--ember); color:white; font:600 16px var(--font-ui); }
.gp-st-archive { display:flex; align-items:center; gap:12px; width:100%; border:0; border-radius:20px; padding:18px; background:var(--panel); color:var(--ink); }
.gp-st-archive > .ic { flex:none; }
.gp-st-pill:focus-visible, .gp-st-action:focus-visible, .gp-st-archive:focus-visible { outline:3px solid var(--orchid-ink); outline-offset:3px; }
:root[data-theme="dark"] .gp-st-trial .gp-st-tile { background:rgba(140,91,14,.22); color:#E0A040; }
:root[data-theme="dark"] .gp-st-payment .gp-st-tile { background:rgba(180,35,54,.22); color:#F0705E; }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .gp-st-trial .gp-st-tile { background:rgba(140,91,14,.22); color:#E0A040; }
  :root:not([data-theme="light"]) .gp-st-payment .gp-st-tile { background:rgba(180,35,54,.22); color:#F0705E; }
}

/* Log in: the pages the listings link to (pulse/web/legal.py), served by the server, not the app. */
.gp-au-legal { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.gp-au-legal a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; color: var(--text2); font-size: 13px; font-weight: 600; text-decoration: none; }
.gp-au-legal a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Arabic content (S9) */
.gp-page, .gp-au, .gp-days, .gp-search, .gp-locked, .gp-arch-page, .gp-st-page, .gp-st-banner, .gp-empty, .gp-join, .gp-article, .gp-thing, .ask-kit, .gp-hero, .gp-au-opening, .gp-offline, .iv-public {
  font-family: "Manrope", "IBM Plex Sans Arabic", var(--font-ui);
}
:is(.gp-page, .gp-au, .gp-days, .gp-search, .gp-locked, .gp-arch-page, .gp-st-page, .gp-st-banner, .gp-empty, .gp-join, .gp-article, .gp-thing, .ask-kit, .gp-hero, .gp-au-opening, .gp-offline, .iv-public) [dir] {
  font-family: "Manrope", "IBM Plex Sans Arabic", var(--font-ui);
  text-align: start;
  overflow-wrap: anywhere;
  min-width: 0;
}
:is(.gp-page, .gp-au, .gp-days, .gp-search, .gp-locked, .gp-arch-page, .gp-st-page, .gp-st-banner, .gp-empty, .gp-join, .gp-article, .gp-thing, .ask-kit, .gp-hero, .gp-au-opening, .gp-offline, .iv-public) [lang="ar"] { font-family: var(--font-ar); }
/* A right-to-left line aligns right only across the full row; the report rows keep their two-line clamp. */
.gp-report b, .gp-arch-copy b { width: 100%; }
.gp-result > span > span, .ask-history-row > [dir] { display: block; width: 100%; }
.gp-text { font-family: "Manrope", "IBM Plex Sans Arabic", var(--font-ui); text-align: start; overflow-wrap: anywhere; }
.gp-text[lang="ar"] { font-family: var(--font-ar); }

/* Report states (S11) */
.gp-rs-page { width:100%; max-width:480px; margin:auto; color:var(--ink); font-family:var(--font-ui); overflow-wrap:anywhere; padding-bottom:32px; }
.col:has(> .gp-rs-page) { width:100%; max-width:480px; padding:0; margin-inline:auto; }
.gp-rs-cover { padding:0 18px 28px; border-radius:0 0 24px 24px; background:var(--ember-g); color:var(--cover-ink); }
.gp-rs-top { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:72px; }
.gp-rs-top .lockup { width:120px; height:40px; color:var(--cover-ink); }
.gp-rs-top .lockup svg { width:100%; height:100%; }
.gp-rs-account { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--panel); color:var(--ink); }
.gp-rs-cover h1 { margin:24px 0 12px; font-size:32px; line-height:38px; font-weight:600; letter-spacing:-.03em; color:var(--cover-ink); }
.gp-rs-cover p { font-size:16px; line-height:24px; color:var(--cover-ink); }
.gp-rs-tile { display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:12px; background:var(--gp-ember-soft); color:var(--gp-ember-ink); }
.gp-rs-tile > svg { width:24px; height:24px; }
.gp-rs-cover > .gp-rs-tile { width:72px; height:72px; margin-top:16px; border-radius:20px; background:color-mix(in srgb, var(--panel) 78%, transparent); color:var(--cover-ink); }
.gp-rs-cover .gp-rs-eyes { width:48px; height:48px; }
.gp-rs-body { padding:18px; }
.gp-rs-earlier { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:8px 0 24px; padding:14px; border-radius:20px; background:color-mix(in srgb, var(--panel) 78%, transparent); color:var(--cover-ink); }
.gp-rs-earlier .gp-rs-copy { flex:1 1 180px; }
.gp-rs-earlier .gp-rs-copy > span { color:var(--cover-ink); }
.gp-rs-copy { flex:1; min-width:0; text-align:start; overflow-wrap:anywhere; }
.gp-rs-copy strong { display:block; font-size:15px; line-height:22px; font-weight:600; }
.gp-rs-copy > span { display:block; font-size:14px; line-height:21px; color:var(--text2); }
.gp-rs-action { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px; border-radius:999px; background:var(--ember); color:#fff; font-size:15px; line-height:22px; font-weight:600; text-align:center; }
.gp-rs-secondary { background:var(--panel); color:var(--ink); box-shadow:inset 0 0 0 1px var(--rule); }
.gp-rs-empty { display:flex; flex-direction:column; align-items:center; gap:16px; padding:48px 24px; text-align:center; }
.gp-rs-empty > .gp-rs-tile { width:64px; height:64px; border-radius:20px; background:var(--panel); color:var(--ink); }
.gp-rs-empty h1 { font-size:24px; line-height:32px; font-weight:600; letter-spacing:-.02em; }
.gp-rs-empty p { margin:0 0 8px; font-size:17px; line-height:26px; color:var(--text2); }
.gp-rs-empty .gp-rs-action { width:100%; max-width:320px; }
.gp-rs-card { margin-top:16px; padding:18px; border-radius:24px; background:var(--panel); color:var(--ink); }
.gp-rs-card h3 { margin:0; font-size:20px; line-height:28px; font-weight:600; }
.gp-rs-card > p { margin:8px 0 16px; color:var(--text2); font-size:15px; line-height:22px; }
.gp-rs-row { display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:12px 0; background:var(--panel); color:var(--ink); text-align:start; font-size:15px; line-height:22px; }
.gp-rs-row + .gp-rs-row { border-top:1px solid var(--rule); }
.gp-rs-row > svg { width:24px; height:24px; flex:none; }
.gp-rs-body > .gp-rs-row { padding:18px; border-radius:20px; }
.gp-rs-row .pfp, .gp-rs-name .pfp { width:32px; height:32px; flex:none; border-radius:50%; }
.gp-rs-row .pfp.own, .gp-rs-name .pfp.own { box-shadow:0 0 0 2px var(--ember); }
.gp-rs-table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:13px; line-height:20px; font-variant-numeric:tabular-nums; }
.gp-rs-table th, .gp-rs-table td { padding:12px 4px; text-align:center; border-bottom:1px solid var(--rule); font-weight:500; }
.gp-rs-table th:first-child { width:48%; text-align:start; }
.gp-rs-table thead th { color:var(--text2); font-size:12px; }
.gp-rs-table tbody tr:last-child > * { border:0; }
.gp-rs-name { display:flex; align-items:center; gap:8px; overflow-wrap:anywhere; }
.gp-rs-action:focus-visible, .gp-rs-row:focus-visible, .gp-rs-account:focus-visible { outline:2px solid var(--ember); outline-offset:2px; }

.gp-rs-page > .nav { margin-inline:0; }
.reader.one:has(.gp-rs-earlier, .gp-rs-card) .rcover :is(.hi p span, .day > span, .quietl) { color:var(--cover-ink); }
.reader.one:has(.gp-rs-earlier, .gp-rs-card) :is(.b-brief, .b-you) .bh .eb { color:color-mix(in srgb, var(--gp-ember-ink) 90%, var(--ink)); }

.gp-rs-spacer { flex:1; }
.gp-rs-top .gp-rs-account { flex:none; }
.gp-rs-top .gp-rs-account svg { width:24px; height:24px; }

/* Full report and Contents (S12) */
.col:has(> .gp-fr-page) { padding-inline: 0; max-width: none; }
.shell.with-rail .col:has(> .gp-fr-page) { --col: 100%; width: calc(100% - var(--rail, 0px)); max-width: none; margin-inline: var(--rail, 0px) 0; }
html.one-page .col:has(> .gp-fr-page) { --col: 100%; max-width: none; }
body:has(.gp-fr-page) .tabbar .ask { display: none; }
.gp-fr-page { gap: 0; width: 100%; max-width: 1240px; margin: auto; padding: 0 18px 120px; color: var(--ink); background: var(--page); overflow-wrap: anywhere; }
.gp-fr-top { display: flex; align-items: center; gap: 8px; padding: 16px 0; }
.gp-fr-top h1 { flex: 1; font-size: 17px; font-weight: 600; line-height: 24px; }
.gp-fr-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel); color: var(--ink); font-size: 14px; font-weight: 500; }
.gp-fr-top .gp-fr-button { font-size: 12px; padding: 8px; white-space: nowrap; }
.gp-fr-round { width: 44px; flex: none; padding: 0; }
.gp-fr-summary, .gp-fr-end p { color: var(--text2); font-size: 14px; line-height: 22px; }
.gp-fr-filters { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; margin: 12px -2px 0; scrollbar-width: thin; }
.gp-fr-filters .gp-fr-button { flex: none; white-space: nowrap; }
.gp-fr-filters [aria-pressed="true"] { background: var(--gp-ember-soft); color: var(--gp-ember-ink); border-color: var(--gp-ember-ink); }
.gp-fr-exports { display: flex; justify-content: flex-end; gap: 8px; margin: 8px 0; }
.gp-fr-section { margin-top: 16px; }
.gp-fr-section[hidden] { display: none; }
.gp-fr-section h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; padding: 12px 0; }
.gp-fr-section h2 > span:last-child { margin-left: auto; color: var(--text2); font-size: 14px; }
.gp-fr-tile { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; color: var(--ink); background: var(--wash); }
.gp-fr-tile svg { width: 24px; height: 24px; }
.gp-fr-brief, .gp-fr-social { background: var(--gp-ember-soft); color: var(--gp-ember-ink); }
.gp-fr-offers, .gp-fr-map { background: var(--gp-jade-soft); }
.gp-fr-ads { background: var(--gp-orchid-soft); color: var(--gp-orchid-ink); }
.gp-fr-card, .gp-ct-card { background: var(--panel); border: 1px solid var(--rule); border-radius: 20px; overflow: hidden; }
.gp-fr-row { display: grid; grid-template-columns: 56px minmax(0,1fr) 16px; align-items: center; gap: 12px; width: 100%; padding: 14px 12px; text-align: left; color: var(--ink); background: var(--panel); }
.gp-fr-row + .gp-fr-row, .gp-ct-row + .gp-ct-row { border-top: 1px solid var(--rule); }
.gp-fr-thumb { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.gp-fr-copy, .gp-ct-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gp-fr-meta, .gp-fr-sub { color: var(--text2); font-size: 12px; line-height: 18px; font-weight: 400; }
.gp-fr-who { color: var(--gp-orchid-ink); font-weight: 500; }
.gp-fr-own { color: var(--gp-ember-ink); }
.gp-fr-head { font-size: 15px; line-height: 22px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gp-fr-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-fr-new { align-self: flex-start; padding: 2px 8px; border-radius: 999px; color: var(--gp-ember-ink); background: var(--gp-ember-soft); font-size: 12px; }
.gp-fr-end { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 28px 0; text-align: center; }
.gp-fr-ask { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
.gp-fr-page :focus-visible, .gp-ct-sheet :focus-visible { outline: 2px solid var(--gp-ember-ink); outline-offset: -2px; }
.gp-ct-sheet { color: var(--ink); }
.gp-ct-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 14px; text-align: left; justify-content: flex-start; background: var(--panel); color: var(--ink); border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
.gp-ct-copy { flex: 1; }
.gp-ct-copy b { font-size: 16px; font-weight: 600; }
.gp-ct-copy > span { font-size: 13px; color: var(--text2); line-height: 20px; }
.gp-ct-label { margin-top: 24px; font-size: 15px; font-weight: 600; }
.gp-ct-faces { margin: 12px 0 24px; }
.gp-ct-faces .faces { display: flex; overflow-x: auto; gap: 12px; padding: 4px; }
.gp-ct-faces .fcw { display: flex; flex: none; width: 62px; flex-direction: column; align-items: center; gap: 6px; color: var(--gp-orchid-ink); }
.gp-ct-faces .ring { position: relative; display: grid; width: 48px; height: 48px; padding: 3px; background: var(--orchid-g); border-radius: 999px; }
.gp-ct-faces .ring.you { background: var(--ember-g); }
.gp-ct-faces .pfp { width: 100%; height: 100%; min-width: 0; border: 2px solid var(--panel); }
.gp-ct-faces .n { position: absolute; bottom: -2px; right: -4px; border-radius: 999px; background: var(--panel); color: var(--ink); padding: 0 5px; font-size: 11px; }
.gp-ct-faces b { max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; word-break: normal; overflow-wrap: normal; text-overflow: clip; font-size: 12px; line-height: 16px; }  /* KB 49 W5: wraps at words, never cut mid-word */
.gp-ct-faces .quiet { color: var(--text2); }
.gp-ct-faces .quiet .ring { background: var(--rule); }
.gp-ct-faces .quiet .pfp { filter: grayscale(1); }
.gp-ct-faces p { color: var(--text2); font-size: 13px; line-height: 20px; margin-top: 10px; }
@media (min-width: 1000px) { .gp-fr-ask { right: max(16px, calc((100% - var(--rail)) / 2 - 224px)); } }

/* Contents: the title on its own line, the day and the count under it, the close button at the right. */
.gp-ct-head { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0 14px; }
.gp-ct-head > div { flex: 1; min-width: 0; }
.gp-ct-head h3 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.gp-ct-head p { margin: 4px 0 0; font-size: 13.5px; line-height: 19px; color: var(--text2); }

/* Secondary sign-in choices share the existing auth surface and theme tokens. */
.gp-au-alternatives { display: grid; gap: 12px; margin-top: 18px; }
.gp-au-alternatives .btn { width: 100%; }
.gp-au-auth-error { color: var(--alert); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.gp-au-auth-error[hidden] { display: none; }
.passkey-offer { display: grid; gap: 16px; padding: 0 18px 24px; }
.passkey-offer > p { line-height: 24px; }
.passkey-offer > .btn { width: 100%; }
.ob-own-photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ob-me:has(.ob-own-photo) { width: 100%; height: 100%; }
.ob-sample .ob-actions > .btn { width: 100%; min-height: 48px; background: var(--panel); color: var(--ink); border: 1px solid var(--rule); white-space: normal; }
/* 25 Oct 2026, owner ("a way to arrange the sections by drag and drop"; decided under KB 49, KB 33): Arrange sections reuses
   the contents sheet's card, tiles and the Jade switch; the handle is the only new control. */
.ar-note { margin: 0 0 12px; color: var(--text2); font-size: 14px; line-height: 20px; }
.ar-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 4px 10px 14px; background: var(--panel); touch-action: none; transition: transform 200ms var(--ease-out); }
.ar-row + .ar-row { border-top: 1px solid var(--rule); }
.ar-row.off .gp-fr-tile { opacity: .45; }
.ar-row.lift { z-index: 2; transition: none; box-shadow: 0 10px 28px rgba(17, 18, 20, .16); border-radius: 14px; }
.ar-grip { display: grid; place-items: center; width: 44px; height: 44px; flex: none; color: var(--text2); background: none; border: 0; cursor: grab; touch-action: none; }
.ar-grip:active { cursor: grabbing; color: var(--ink); }
.ar-sheet .toggle { margin-left: auto; }

/* The full report is pictures first (owner, 5 Nov 2026: "the full report experience is terrible"). The list of small thumbnails
   became the product's 4:5 card in a grid: two across on a phone, up to five wide, every network's logo top right. */
.gp-fr-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gp-fr-page .gp-fr-exports { flex: none; margin: 0; }
.gp-fr-page .gp-fr-filters { position: sticky; top: 0; z-index: 6; margin: 8px -18px 0; padding: 8px 18px; background: var(--page); }
.gp-fr-page .gp-fr-section h2 { padding: 16px 0 12px; }
.gp-fr-page .gp-fr-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; align-items: start; background: none; border: 0; border-radius: 0; overflow: visible; }
.gp-fr-page .gp-fr-row { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; padding: 0; background: var(--panel); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; content-visibility: auto; contain-intrinsic-size: auto 340px; }
.gp-fr-page .gp-fr-row + .gp-fr-row { border-top: 1px solid var(--rule); }
.gp-fr-pic { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--wash); }
.gp-fr-page .gp-fr-pic .gp-fr-thumb { display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
.gp-fr-pic .stile { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; width: 26px; height: 26px; }
.gp-fr-page .gp-fr-new { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; padding: 3px 9px; font-size: 12px; line-height: 16px; font-weight: 600; }
.gp-fr-versions { position: absolute; inset-block-end: 8px; inset-inline-start: 8px; padding: 3px 9px; border-radius: 999px; background: #fff; color: #111214; font-size: 12px; line-height: 16px; font-weight: 600; }
.gp-fr-panel { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; width: 100%; height: 100%; padding: 14px; background: var(--wash); color: var(--ink); }
.gp-fr-panel-mentions, .gp-fr-panel-sell { background: var(--gp-orchid-soft); }
.gp-fr-panel-business, .gp-fr-panel-market { background: var(--gp-jade-soft); }
.gp-fr-panel-head { font-size: 15px; line-height: 21px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.gp-fr-page .gp-fr-copy { gap: 2px; padding: 10px 12px 12px; }
.gp-fr-page .gp-fr-who { display: block; overflow: hidden; font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.gp-fr-page .gp-fr-head { font-size: 14px; line-height: 20px; -webkit-line-clamp: 3; }
.gp-fr-page .gp-fr-meta { font-size: 12px; line-height: 16px; }
.gp-fr-page .gp-fr-sub { font-size: 12px; line-height: 16px; white-space: normal; }
@media (hover: hover) and (pointer: fine) { .gp-fr-page .gp-fr-thumb { transition: transform 240ms cubic-bezier(.23, 1, .32, 1); } .gp-fr-page .gp-fr-row:hover .gp-fr-thumb { transform: scale(1.03); } }
@media (min-width: 620px) { .gp-fr-page .gp-fr-card { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; } }
@media (min-width: 900px) { .gp-fr-page { padding-inline: 32px; } .gp-fr-page .gp-fr-filters { margin-inline: -32px; padding-inline: 32px; } .gp-fr-page .gp-fr-card { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .gp-fr-page .gp-fr-card { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px 16px; } }