@font-face { font-family: "Manrope"; src: url("fonts/Manrope.woff2") format("woff2"), url("fonts/Manrope.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
/* Tellz, the working prototype. Layout: one phone-width column (the Paper screens are 390 wide); on wide screens
   the portal adds a left rail and sheets become centred dialogs. The UI register locked 8 Oct 2026 (docs/kb/24-identity.md,
   section 7): an off-white page, white opaque panels, charcoal ink, one marker action a screen, violet mentions, aurora
   pastels as backgrounds only. Amended 11 Oct 2026 (the morning layout): the phone's own face for the
   interface, sentence-case labels, faces instead of coloured dots, sections as a title on an ink rule, nothing stacked. */
:root {
  /* Shared report preview and branded action tokens (KB 33, owner 20 Oct 2026). */
  --report-card-media-ratio: 4 / 5; --report-card-width-desktop: 296px; --for-you-mark-size: 20px;
  --s-brief: #F9E6E2; --s-offers: #DDECE6; --s-ads: #E9E1F5; --s-social: #FAECDB; --s-news: #EEEFF1;
  --g-brief: var(--ember-g); --g-offers: var(--jade-g); --g-ads: var(--orchid-g); --g-social: linear-gradient(in oklab 112deg, #E38B7D 0%, #F0B69C 50%, #F3D4AE 100%); --g-news: var(--charcoal);
  /* The Tellz fixed kit v1.1 (owner, 12 Oct 2026; docs/kb/32-identity-final.md, docs/brand/tellz-kit/tokens.css): Ember
     leads (the one action, the brief), Orchid is competitors, evidence and Ask, Jade is monitoring; Manrope for all text. */
  --white: #FFFFFF; --charcoal: #27282C; --muted: #5C6068; --line: #DCDDE0; --line-strong: #92969F;
  --ember: #B44744; --ember-soft: #FAEFED; --ember-g: linear-gradient(in oklab 112deg, #C65A64 0%, #E38B7D 34%, #F0B69C 70%, #F3D4AE 100%);
  --jade: #286A5A; --jade-soft: #EDF5F0; --jade-g: linear-gradient(in oklab 112deg, #4E9B8A 0%, #8DBFAA 34%, #C1D3B0 70%, #E3D4AC 100%);
  --orchid: #704398; --orchid-soft: #F3EDF8; --orchid-g: linear-gradient(in oklab 112deg, #8468AF 0%, #B69CDC 34%, #D5B8DD 70%, #E8C1C4 100%);
  /* the register, on the kit: the old marker is Ember with white on it, the old violet is Orchid */
  --page: #F1F2F3; --panel: #FFFFFF; --ink: #111214; --text2: #5C6068; --text3: #92969F; --rule: #DCDDE0; --wash: #ECEDEF;
  --marker: var(--ember); --marker-soft: var(--ember-soft); --on-marker: #FFFFFF; --violet: var(--orchid); --pen-swipe: #F3D4AE;
  /* aurora pastels, backgrounds only */
  --p-lavender: #CDB9F7; --p-sky: #BBD6F8; --p-peach: #F8D2BE; --p-pink: #F8C4DC; --p-mint: #CDE9D9; --p-butter: #F6EDB8;
  --dawn: linear-gradient(135deg, var(--p-lavender) 0%, var(--p-sky) 48%, var(--p-peach) 100%);
  --coral-aurora: linear-gradient(135deg, var(--p-pink) 0%, var(--p-peach) 55%, var(--p-butter) 100%);
  --mist-aurora: linear-gradient(135deg, var(--p-sky) 0%, var(--p-mint) 100%);
  --ring-aurora: conic-gradient(from 200deg, var(--p-lavender), var(--p-sky), var(--p-mint), var(--p-peach), var(--p-pink), var(--p-lavender));
  /* the pens: the swipe is the marker, pink is about you, green is done */
  --pen-pink: #FFB1CF; --pen-green: #BFEBC9; --pen-ink: var(--ink); --pen-alpha: 1;
  /* colour at the edges: one pastel per kind, fixed everywhere; the foil band */
  --k-offer: var(--p-butter); --k-story: var(--p-pink); --k-ad: var(--p-sky); --k-press: var(--p-mint); --k-collab: var(--p-lavender);
  --k-mention: var(--p-peach); --k-post: var(--wash); --k-page: var(--wash); --k-top: var(--marker); --k-means: var(--p-lavender);
  --foil: linear-gradient(90deg, var(--p-sky) 0%, var(--p-lavender) 20%, var(--p-pink) 40%, var(--p-mint) 56%, var(--p-butter) 72%, var(--p-butter) 80%, var(--marker) 80%, var(--marker) 100%);
  --foil-pink: linear-gradient(90deg, var(--p-lavender) 0%, var(--p-pink) 45%, var(--p-peach) 80%, var(--p-pink) 100%);
  /* one dark card a screen, for people and roles */
  --dark: #27282C; --dark-2: #323338; --dark-text: #F2F2EC; --dark-text2: #A6A6A0; --role-bg: #2F4A2A; --role-fg: #BFEBC9;
  /* shapes and the one shadow */
  --r-card: 24px; --r-panel: 16px; --r-chip: 8px;
  --shadow: 0 1px 2px rgba(20,20,25,0.04), 0 12px 32px rgba(20,20,25,0.08);
  /* type: Manrope for headlines, body and interface (KB 32 section 3); IBM Plex Mono for code */
  --font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-ui);
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-ar: "IBM Plex Sans Arabic", "Geeza Pro", "Noto Sans Arabic", Tahoma, sans-serif;
  /* states */
  --ok: #1F7A45; --warn: #B26B00; --alert: #C8321E; --off: #8C8C93;
  --done-bg: #202123; --done-fg: #FFFFFF;
  --field: #FFFFFF; --sheet: #FFFFFF; --scrim: rgba(32,33,35,0.45); --dark-glass: rgba(28,28,26,0.50);
  --mail-bg: #FFFFFF; --mail-ink: #202123;
  /* the entries: an 8 px dot and the name in ink; yours is a hollow ring */
  --pink: #FF9CCB; --orange: #FFC070; --blue: #8FCBFF; --green: #8FE3A8; --lilac: #C9B6FF; --teal: #8FD9D2; --coral: #FFB4A2; --sand: #E8D28F; --own: #E2E2DC;
  /* the glass look's names, kept so every part reads the register's tokens */
  --ground: var(--page); --bloom-cool: var(--page); --bloom-warm: var(--page);
  --panel-edge: var(--rule); --glass: var(--panel); --glass-edge: var(--rule); --glass-hi: transparent;
  --graphite: var(--text2); --mist: var(--text3); --hair: var(--rule); --tint-fill: var(--wash);
  --shadow-glass: var(--shadow); --font-brand: var(--font-ui);
  --col: 460px; --rail: 0px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* roles that change with the theme (13 Oct 2026, the dark set): words in a family colour, names, a quiet fill, the cover */
  --ember-ink: #9E3B38; --orchid-ink: var(--orchid); --jade-ink: var(--jade); --name: var(--orchid);
  --fill: #F1F2F3; --share-cover-name: #160D1E; --cover-ink: #111214; --cover-ink-2: rgba(17,18,20,.7); --on-cover: rgba(255,255,255,.62);
  --shadow-float: 0 4px 14px rgba(17,18,20,.16);
  --on-cover-2: rgba(255,255,255,.72); --glass-strong: rgba(255,255,255,.95); --shadow-card: 0 1px 0 var(--line), 0 8px 22px rgba(17,18,20,.06);
  --social-tile: #C65A64; --social-ink: #9E3B38; --news-tile: var(--charcoal); --ring-gap: #F2C6A8; --ask-edge: #FFFFFF;
}
/* The dark set (13 Oct 2026; local/review/dark-desktop/dark-tokens.md): the kit's Ink is the page, its Page the words,
   its Charcoal the sheets; each family has a solid that keeps white words and a lighter colour for words; every pair
   passes WCAG AA (tests/unit/theme-contrast.test.js). One set for the device, a pick and the Night look. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  /* register */
  --page: #0E0E10; --panel: #1C1C1E; --ink: #F5F5F7; --text2: #A1A1A6; --text3: #98989D; --rule: #2C2C2E; --wash: #2C2C2E;
  --marker: #B44744; --marker-soft: #361D1B; --on-marker: #FFFFFF; --violet: #BE9FE6;
  --field: #2C2C2E; --sheet: #232326; --scrim: rgba(0,0,0,0.6); --dark-glass: rgba(0,0,0,0.55);
  --dark: #2A2B2F; --dark-2: #36373C; --dark-text: #F1F2F3; --dark-text2: #A5A9B1;
  --done-bg: #F1F2F3; --done-fg: #111214; --own: #3A3B40; --mail-bg: #1F2023; --mail-ink: #F1F2F3;
  --ok: #6FCB9B; --warn: #E5B567; --alert: #F08A97; --off: #9195A0;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.35);
  --p-lavender: rgba(205,185,247,0.26); --p-sky: rgba(187,214,248,0.26); --p-peach: rgba(248,210,190,0.26); --p-pink: rgba(248,196,220,0.26); --p-mint: rgba(205,233,217,0.26); --p-butter: rgba(246,237,184,0.26);
  --k-post: rgba(255,255,255,0.09); --k-page: rgba(255,255,255,0.09);
  --foil: linear-gradient(90deg, #BBD6F8 0%, #CDB9F7 20%, #F8C4DC 40%, #CDE9D9 56%, #F6EDB8 72%, #F6EDB8 80%, #EAF43E 80%, #EAF43E 100%);
  --foil-pink: linear-gradient(90deg, #CDB9F7 0%, #F8C4DC 45%, #F8D2BE 80%, #F8C4DC 100%);
  --ring-aurora: conic-gradient(from 200deg, #CDB9F7, #BBD6F8, #CDE9D9, #F8D2BE, #F8C4DC, #CDB9F7);
  --pen-alpha: 0.42;
  /* kit */
  --muted: #A1A1A6; --line: #2C2C2E; --line-strong: #6E6E73; --charcoal: #232326;
  --ember: #B44744; --ember-soft: #361D1B; --jade: #2F7865; --jade-soft: #142A23; --orchid: #7F51A9; --orchid-soft: #2A1F37;
  --ember-ink: #E98C82; --orchid-ink: #BE9FE6; --jade-ink: #77C5AC; --name: #FFFFFF; --fill: #2C2C2E;
  --ember-g: linear-gradient(in oklab 112deg, #883136 0%, #682923 50%, #411F16 100%);
  --jade-g: linear-gradient(in oklab 112deg, #126051 0%, #174A3B 50%, #193024 100%);
  --orchid-g: linear-gradient(in oklab 112deg, #5E4185 0%, #4B3264 50%, #33223D 100%);
  --s-brief: #231210; --s-offers: #0B1C17; --s-ads: #1B1324; --s-social: #21160C; --s-news: #151618;
  --g-brief: var(--ember-g); --g-offers: var(--jade-g); --g-ads: var(--orchid-g);
  --g-social: linear-gradient(in oklab 112deg, #7E3C2E 0%, #5D341B 50%, #3A2714 100%); --g-news: #3A3C42;
  /* new */
  --cover-bg: #1E1E21; --share-cover-name: #E8C1C4; --cover-ink: #F1F2F3; --cover-ink-2: rgba(241,242,243,.74); --on-cover: rgba(255,255,255,.12); --on-cover-2: rgba(255,255,255,.18);
  --glass-strong: rgba(22,22,24,.92); --shadow-card: inset 0 1px 0 rgba(255,255,255,.06);
  --social-tile: #B44744; --social-ink: #E98C82; --news-tile: #3A3C42; --ring-gap: var(--cover-bg); --ask-edge: rgba(255,255,255,.14);
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  /* register */
  --page: #0E0E10; --panel: #1C1C1E; --ink: #F5F5F7; --text2: #A1A1A6; --text3: #98989D; --rule: #2C2C2E; --wash: #2C2C2E;
  --marker: #B44744; --marker-soft: #361D1B; --on-marker: #FFFFFF; --violet: #BE9FE6;
  --field: #2C2C2E; --sheet: #232326; --scrim: rgba(0,0,0,0.6); --dark-glass: rgba(0,0,0,0.55);
  --dark: #2A2B2F; --dark-2: #36373C; --dark-text: #F1F2F3; --dark-text2: #A5A9B1;
  --done-bg: #F1F2F3; --done-fg: #111214; --own: #3A3B40; --mail-bg: #1F2023; --mail-ink: #F1F2F3;
  --ok: #6FCB9B; --warn: #E5B567; --alert: #F08A97; --off: #9195A0;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.35);
  --p-lavender: rgba(205,185,247,0.26); --p-sky: rgba(187,214,248,0.26); --p-peach: rgba(248,210,190,0.26); --p-pink: rgba(248,196,220,0.26); --p-mint: rgba(205,233,217,0.26); --p-butter: rgba(246,237,184,0.26);
  --k-post: rgba(255,255,255,0.09); --k-page: rgba(255,255,255,0.09);
  --foil: linear-gradient(90deg, #BBD6F8 0%, #CDB9F7 20%, #F8C4DC 40%, #CDE9D9 56%, #F6EDB8 72%, #F6EDB8 80%, #EAF43E 80%, #EAF43E 100%);
  --foil-pink: linear-gradient(90deg, #CDB9F7 0%, #F8C4DC 45%, #F8D2BE 80%, #F8C4DC 100%);
  --ring-aurora: conic-gradient(from 200deg, #CDB9F7, #BBD6F8, #CDE9D9, #F8D2BE, #F8C4DC, #CDB9F7);
  --pen-alpha: 0.42;
  /* kit */
  --muted: #A1A1A6; --line: #2C2C2E; --line-strong: #6E6E73; --charcoal: #232326;
  --ember: #B44744; --ember-soft: #361D1B; --jade: #2F7865; --jade-soft: #142A23; --orchid: #7F51A9; --orchid-soft: #2A1F37;
  --ember-ink: #E98C82; --orchid-ink: #BE9FE6; --jade-ink: #77C5AC; --name: #FFFFFF; --fill: #2C2C2E;
  --ember-g: linear-gradient(in oklab 112deg, #883136 0%, #682923 50%, #411F16 100%);
  --jade-g: linear-gradient(in oklab 112deg, #126051 0%, #174A3B 50%, #193024 100%);
  --orchid-g: linear-gradient(in oklab 112deg, #5E4185 0%, #4B3264 50%, #33223D 100%);
  --s-brief: #231210; --s-offers: #0B1C17; --s-ads: #1B1324; --s-social: #21160C; --s-news: #151618;
  --g-brief: var(--ember-g); --g-offers: var(--jade-g); --g-ads: var(--orchid-g);
  --g-social: linear-gradient(in oklab 112deg, #7E3C2E 0%, #5D341B 50%, #3A2714 100%); --g-news: #3A3C42;
  /* new */
  --cover-bg: #1E1E21; --share-cover-name: #E8C1C4; --cover-ink: #F1F2F3; --cover-ink-2: rgba(241,242,243,.74); --on-cover: rgba(255,255,255,.12); --on-cover-2: rgba(255,255,255,.18);
  --glass-strong: rgba(22,22,24,.92); --shadow-card: inset 0 1px 0 rgba(255,255,255,.06);
  --social-tile: #B44744; --social-ink: #E98C82; --news-tile: #3A3C42; --ring-gap: var(--cover-bg); --ask-edge: rgba(255,255,255,.14);
  color-scheme: dark;
}
/* The report's own look, picked in Manage, Look and layout: Glass is the register; Night is its night set whatever the
   device theme; Paper is the register on a white page with hairlines and no shadow. */
.look-night {
  /* register */
  --page: #0E0E10; --panel: #1C1C1E; --ink: #F5F5F7; --text2: #A1A1A6; --text3: #98989D; --rule: #2C2C2E; --wash: #2C2C2E;
  --marker: #B44744; --marker-soft: #361D1B; --on-marker: #FFFFFF; --violet: #BE9FE6;
  --field: #2C2C2E; --sheet: #232326; --scrim: rgba(0,0,0,0.6); --dark-glass: rgba(0,0,0,0.55);
  --dark: #2A2B2F; --dark-2: #36373C; --dark-text: #F1F2F3; --dark-text2: #A5A9B1;
  --done-bg: #F1F2F3; --done-fg: #111214; --own: #3A3B40; --mail-bg: #1F2023; --mail-ink: #F1F2F3;
  --ok: #6FCB9B; --warn: #E5B567; --alert: #F08A97; --off: #9195A0;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.35);
  --p-lavender: rgba(205,185,247,0.26); --p-sky: rgba(187,214,248,0.26); --p-peach: rgba(248,210,190,0.26); --p-pink: rgba(248,196,220,0.26); --p-mint: rgba(205,233,217,0.26); --p-butter: rgba(246,237,184,0.26);
  --k-post: rgba(255,255,255,0.09); --k-page: rgba(255,255,255,0.09);
  --foil: linear-gradient(90deg, #BBD6F8 0%, #CDB9F7 20%, #F8C4DC 40%, #CDE9D9 56%, #F6EDB8 72%, #F6EDB8 80%, #EAF43E 80%, #EAF43E 100%);
  --foil-pink: linear-gradient(90deg, #CDB9F7 0%, #F8C4DC 45%, #F8D2BE 80%, #F8C4DC 100%);
  --ring-aurora: conic-gradient(from 200deg, #CDB9F7, #BBD6F8, #CDE9D9, #F8D2BE, #F8C4DC, #CDB9F7);
  --pen-alpha: 0.42;
  /* kit */
  --muted: #A1A1A6; --line: #2C2C2E; --line-strong: #6E6E73; --charcoal: #232326;
  --ember: #B44744; --ember-soft: #361D1B; --jade: #2F7865; --jade-soft: #142A23; --orchid: #7F51A9; --orchid-soft: #2A1F37;
  --ember-ink: #E98C82; --orchid-ink: #BE9FE6; --jade-ink: #77C5AC; --name: #FFFFFF; --fill: #2C2C2E;
  --ember-g: linear-gradient(in oklab 112deg, #883136 0%, #682923 50%, #411F16 100%);
  --jade-g: linear-gradient(in oklab 112deg, #126051 0%, #174A3B 50%, #193024 100%);
  --orchid-g: linear-gradient(in oklab 112deg, #5E4185 0%, #4B3264 50%, #33223D 100%);
  --s-brief: #231210; --s-offers: #0B1C17; --s-ads: #1B1324; --s-social: #21160C; --s-news: #151618;
  --g-brief: var(--ember-g); --g-offers: var(--jade-g); --g-ads: var(--orchid-g);
  --g-social: linear-gradient(in oklab 112deg, #7E3C2E 0%, #5D341B 50%, #3A2714 100%); --g-news: #3A3C42;
  /* new */
  --cover-bg: #1E1E21; --share-cover-name: #E8C1C4; --cover-ink: #F1F2F3; --cover-ink-2: rgba(241,242,243,.74); --on-cover: rgba(255,255,255,.12); --on-cover-2: rgba(255,255,255,.18);
  --glass-strong: rgba(22,22,24,.92); --shadow-card: inset 0 1px 0 rgba(255,255,255,.06);
  --social-tile: #B44744; --social-ink: #E98C82; --news-tile: #3A3C42; --ring-gap: var(--cover-bg); --ask-edge: rgba(255,255,255,.14);
  color-scheme: dark;
  color: var(--ink);
}
.look-paper { --page: #FFFFFF; --wash: #F1F1EE; --shadow: none; }

* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-ui); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.022em; text-wrap: balance; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: not-allowed; }
input, textarea, select { font: inherit; font-size: 16px; color: var(--ink); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Headings take focus only so screen readers start there; they are not controls. */
h1[tabindex="-1"]:focus, h3[tabindex="-1"]:focus { outline: none; }
.ic { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.ic.xs { width: 12px; height: 12px; } .ic.s { width: 14px; height: 14px; } .ic.m { width: 16px; height: 16px; } .ic.l { width: 20px; height: 20px; } .ic.xl { width: 24px; height: 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spacer { flex: 1; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- shell ---------- */
.shell { min-height: 100vh; min-height: 100dvh; background: var(--page); }
.col { position: relative; width: 100%; max-width: var(--col); margin-inline: auto; padding-inline: 16px; padding-block: 0 150px; min-height: 100vh; min-height: 100dvh; }
.col.no-tabs { padding-block-end: 130px; }
.rail { display: none; }
@media (min-width: 980px) {
  .shell.with-rail { --rail: 248px; }
  .shell.with-rail .col { margin-inline-start: calc(var(--rail) + max(0px, (100% - var(--rail) - var(--col)) / 2)); margin-inline-end: auto; }
  .shell.with-rail .rail { display: flex; position: fixed; inset: 0 auto 0 0; width: var(--rail); flex-direction: column; gap: 6px; padding: 22px 16px; border-right: 1px solid var(--hair); background: var(--panel); z-index: 25; }
  .shell.with-rail .tabbar { display: none; }
}
.rail .brandrow { display: flex; align-items: center; padding: 4px 8px 18px; }
.rail button { display: flex; align-items: center; gap: 12px; height: 44px; padding-inline: 12px; border-radius: 14px; font-size: 15px; font-weight: 500; color: var(--graphite); }
.rail button.on { background: var(--tint-fill); color: var(--ink); font-weight: 600; }
.rail button:hover { color: var(--ink); }
.rail .foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }

/* ---------- surfaces ---------- */
.glass { background: var(--panel); border: 1px solid var(--rule); box-shadow: 0 1px 2px rgba(20,20,25,0.04); }
.panel { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-panel); box-shadow: var(--shadow); padding: 4px 16px; min-width: 0; }
.sheet .panel { box-shadow: none; }
.panel.pad { padding: 14px 16px; }
.plabel { display: flex; align-items: center; gap: 7px; padding-top: 12px; padding-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--text2); }
.panel.pad > .plabel { padding-top: 0; }
.plabel .r { margin-left: auto; font-family: var(--font-ui); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--ink); }
.plabel .r.g { color: var(--graphite); font-weight: 500; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack.g12 { gap: 12px; } .stack.g14 { gap: 14px; } .stack.g6 { gap: 6px; }
.press { transition: transform 160ms var(--ease-out); } .press:active { transform: scale(0.97); }

/* ---------- type ---------- */
.eyebrow { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text2); }
.title { display: flex; flex-direction: column; gap: 6px; padding: 10px 4px 2px; }
.title h1 { font-size: 28px; line-height: 1.2; }
.title p { font-size: 14px; line-height: 1.42; color: var(--graphite); }
.small { font-size: 12px; color: var(--graphite); line-height: 1.35; }
.note { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.35; color: var(--graphite); padding-inline: 4px; }
.note .ic { margin-top: 1px; }
.cap { font-size: 12px; font-weight: 500; color: var(--text2); }
/* The lockup (docs/brand/tellz-logo): the outlined word and the iris, in the ink; white on dark through currentColor. */
/* the wordmark: 120 px wide at the least (KB 32), so 40 px tall on its 540 by 180 box */
.lockup { display: inline-flex; align-items: center; height: 40px; color: var(--ink); flex-shrink: 0; }
.lockup svg { height: 100%; width: auto; display: block; }
.lockup.lg { height: 44px; }
.brandslot { display: inline-flex; align-items: center; height: 40px; margin-left: -2px; }
.brand { display: inline-flex; align-items: center; height: 22px; color: var(--ink); }

/* ---------- nav and titles ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 8px; padding-block: 10px 6px; margin-inline: -16px; padding-inline: 16px;
  background: linear-gradient(var(--ground) 70%, transparent); }
.nav .t { flex: 1; text-align: center; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav .slot { width: 38px; flex-shrink: 0; }
.circle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0; }
.circle.sm { width: 30px; height: 30px; }
.circle.sm .ic { width: 14px; height: 14px; }
/* A 30 px circle looks the same and takes a 44 px tap: sheet close, calendar arrows, copy, edit. */
button.circle.sm { position: relative; }
button.circle.sm::after { content: ""; position: absolute; inset: -8px; }
/* Remove sits apart from Edit, so a tap meant for one never lands on the other. */
.circle.sm.ch-del { margin-inline-start: 10px; }
.circle:disabled { opacity: 0.28; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 14px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.pill.sm { height: 32px; padding-inline: 12px; font-size: 12px; }
.pill.ink { background: var(--done-bg); color: var(--done-fg); }
.pill.tint { background: var(--marker); color: var(--on-marker); border-color: transparent; }
.linkbtn { font-size: 13px; font-weight: 600; color: var(--ink); padding: 4px 2px; }
.linkbtn.alert { color: var(--alert); }
.progress { display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 0; }
.progress .segs { display: flex; gap: 4px; }
.progress .segs i { flex: 1; height: 4px; border-radius: 2px; background: var(--hair); }
.progress .segs i.on { background: var(--ink); }
.progress .lab { font-size: 12px; } .progress .lab b { font-weight: 600; } .progress .lab span { color: var(--graphite); }

/* ---------- lists ---------- */
.list > * + * { border-top: 1px solid var(--hair); }
.row { display: flex; align-items: center; gap: 12px; padding-block: 10px; min-width: 0; width: 100%; }
button.row { text-align: left; }
.row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row .t1 { font-size: 15px; font-weight: 500; line-height: 1.33; overflow-wrap: anywhere; }
.row .t2 { font-size: 12px; color: var(--graphite); line-height: 1.33; overflow-wrap: anywhere; }
.row .t3 { font-size: 12px; font-weight: 500; color: var(--graphite); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.row.top { align-items: flex-start; }
.lead { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tint-fill); border: 1px solid var(--hair); flex-shrink: 0; color: var(--ink); }
.lead.s36 { width: 36px; height: 36px; } .lead.s34 { width: 34px; height: 34px; border-radius: 11px; }
.brandtile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; color: #fff; }
.brandtile.s36 { width: 36px; height: 36px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0; color: #fff; font-size: 14px; font-weight: 600; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; display: inline-block; }
.dot.hollow { border: 1.5px solid var(--ink); }
.who { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; min-width: 0; }
.status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--graphite); white-space: nowrap; flex-shrink: 0; }
.status i { width: 7px; height: 7px; border-radius: 999px; background: var(--off); }
.status.ok i { background: var(--ok); } .status.warn i { background: var(--warn); } .status.bad i { background: var(--alert); }
.status.busy i { background: var(--warn); animation: pulse 1.1s ease-in-out infinite; }
/* A change's check on the Agents page: a reason can be long, so it wraps beside its dot. */
.row .tx > span.t3.inreport { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 6px; line-height: 1.33; }
.row .t3.inreport > i { flex: none; width: 7px; height: 7px; margin-top: 4.5px; border-radius: 999px; background: var(--off); }
.row .t3.inreport.ok > i { background: var(--ok); } .row .t3.inreport.warn > i { background: var(--warn); } .row .t3.inreport.bad > i { background: var(--alert); }
.row .t3.inreport > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
@keyframes pulse { 50% { opacity: 0.35; } }
.role { display: inline-flex; align-items: center; height: 24px; padding-inline: 9px; border-radius: 999px; background: var(--tint-fill); font-size: 11px; font-weight: 600; flex-shrink: 0; }
.badge { display: inline-flex; align-items: center; height: 22px; padding-inline: 8px; border-radius: 999px; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.badge.mark { background: var(--marker); color: var(--on-marker); }
.badge.line { border: 1px solid var(--ink); }
.lchip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding-inline: 10px; border-radius: 999px; background: var(--tint-fill); font-size: 12px; font-weight: 500; flex-shrink: 0; }
button.lchip:hover { background: var(--hair); }
.chiprow { display: flex; gap: 6px; flex-wrap: wrap; }
.nets { display: inline-flex; gap: 7px; color: var(--graphite); }

/* ---------- controls ---------- */
.toggle { position: relative; width: 46px; height: 28px; border-radius: 999px; background: var(--hair); flex-shrink: 0; transition: background-color 180ms ease; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 200ms var(--ease-out); }
/* A switch that is on is Jade with a white knob, in both themes (KB 33 1.1; Design bible 4: black is never an action). */
.toggle[aria-checked="true"] { background: var(--jade); }
.toggle[aria-checked="true"]::after { transform: translateX(18px); background: #FFFFFF; }
.toggle:disabled { opacity: 0.45; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 16px; }
.seg button { flex: 1; height: 38px; border-radius: 12px; font-size: 14px; font-weight: 600; text-align: center; transition: background-color 160ms ease, color 160ms ease; }
.seg button[aria-checked="true"] { background: var(--done-bg); color: var(--done-fg); }
.seg.glass { background: var(--wash); border-color: transparent; box-shadow: none; }
.btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 600; width: 100%; overflow: hidden; text-align: center;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out), opacity 160ms ease; }
.btn:active { transform: scale(0.97); }
.btn.tint { background: var(--marker); color: var(--on-marker); border: 0; box-shadow: none; }
.btn.ink { background: var(--done-bg); color: var(--done-fg); border: 0; }
.btn.danger { background: var(--alert); color: #FFFFFF; }
.btn:disabled { opacity: 0.45; transform: none; box-shadow: none; }
.btn.auto { width: auto; }
.btnrow { display: flex; gap: 8px; }
.btnrow > * { flex: 1; min-width: 0; }
.btnrow .btn { padding: 0 12px; font-size: 14px; }
.btn .face { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: opacity 160ms ease, transform 220ms var(--ease-out); }
.btn .done { position: absolute; inset: 0; justify-content: center; opacity: 0; transform: translateY(6px); }
.btn.copied { background: var(--done-bg); color: var(--done-fg); box-shadow: none; border-color: transparent; }
.btn.glass:hover { background: var(--wash); }
.btn.copied .face.copy { opacity: 0; transform: translateY(-6px); }
.btn.copied .done { opacity: 1; transform: translateY(0); }
.check { width: 24px; height: 24px; overflow: visible; }
.check circle { fill: var(--marker); transform-box: fill-box; transform-origin: center; transform: scale(0.3); transition: transform 300ms cubic-bezier(0.34,1.56,0.64,1); }
.check path { fill: none; stroke: #202123; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 280ms var(--ease-out) 140ms; }
.btn.copied .check circle { transform: scale(1); }
.btn.copied .check path { stroke-dashoffset: 0; }

/* ---------- fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field > .cap { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--graphite); }
.inbox { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 12px; background: var(--field); border: 1px solid var(--rule); transition: border-color 160ms ease, box-shadow 160ms ease; }
.inbox:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(32,33,35,0.06); }
.inbox .ic { color: var(--graphite); }
.inbox input, .inbox select, .inbox textarea { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; outline: none; font-size: 16px; padding: 0; }
.inbox textarea { height: auto; min-height: 72px; padding-block: 12px; resize: vertical; line-height: 1.45; }
.inbox select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.inbox .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #0A66C2; white-space: nowrap; }
.inbox .act { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--done-bg); color: var(--done-fg); font-size: 13px; font-weight: 600; margin-right: -8px; flex-shrink: 0; }
.inbox .act:disabled { opacity: 0.4; }
.field .hint { font-size: 12px; color: var(--graphite); line-height: 1.35; }
.field .err { display: none; align-items: flex-start; gap: 6px; font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--alert); }
.field .err .ic { width: 14px; height: 14px; margin-top: 1px; }
.field.bad .inbox { border: 1.5px solid var(--alert); }
.field.bad .err { display: flex; }
.field.warn .inbox { border: 1.5px solid var(--warn); }
.field.warn .err { display: flex; color: var(--warn); }
.code { display: flex; gap: 8px; }
.code input { flex: 1; width: 0; min-width: 0; height: 56px; border-radius: 12px; background: var(--field); border: 1px solid var(--rule); text-align: center; font-size: 22px; font-weight: 600; outline: none; caret-color: var(--ink); }
.code input:focus { border: 1.5px solid var(--ink); }
.field.bad .code input { border-color: var(--alert); }
.formerr { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: var(--r-panel); background: var(--panel); border: 1.5px solid var(--alert); color: var(--alert); font-size: 13px; font-weight: 500; }

/* ---------- watch chips ---------- */
.wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wchip { display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 14px; border-radius: 16px; font-size: 14px; font-weight: 600; min-width: 0; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }
.wchip .lab { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wchip[aria-pressed="true"] { background: var(--done-bg); color: var(--done-fg); border-color: transparent; box-shadow: none; }
.wchip[aria-pressed="false"] .mk { color: var(--graphite); }
.wchip:active { transform: scale(0.97); }

/* ---------- bottom action, tab bar ---------- */
.bottom { position: fixed; z-index: 30; bottom: 0; left: calc(var(--rail) + (100% - var(--rail)) / 2); transform: translateX(-50%); width: min(var(--col), 100% - var(--rail));
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--ground) 32%); }
.bottom .small { text-align: center; }
/* On a tab screen the action sits above the tab bar. */
.col:not(.no-tabs) .bottom { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); padding-bottom: 6px; background: none; }
.col:not(.no-tabs):has(.bottom) { padding-block-end: 230px; }
@media (min-width: 980px) { .shell.with-rail .col:not(.no-tabs) .bottom { bottom: 0; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--ground) 32%); } }
.tabbar { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: min(calc(var(--col) - 32px), calc(100% - 32px)); display: flex; align-items: center; gap: 10px; }
.tabbar .tabs { flex: 1; display: flex; gap: 2px; height: 58px; padding: 0 5px; border-radius: 999px; align-items: center; }
.tabbar .tabs.glass, .tabbar .ask.glass, .bar.glass { box-shadow: var(--shadow); }
.tabbar .tabs button { flex: 1; height: 48px; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: 500; color: var(--graphite); }
.tabbar .tabs button.on { background: var(--wash); color: var(--ink); font-weight: 600; }
.tabbar .ask { width: 58px; height: 58px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fade-under { position: fixed; z-index: 29; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none; background: linear-gradient(transparent, var(--ground) 70%); }

/* ---------- banners and empty states ---------- */
.banner { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-radius: var(--r-panel); background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.banner .bi { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--field); border: 1.5px solid var(--warn); color: var(--warn); flex-shrink: 0; }
.banner.bad .bi { border-color: var(--alert); color: var(--alert); }
.banner.info .bi { border-color: var(--ink); color: var(--ink); }
.banner .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.banner .t1 { font-size: 14px; font-weight: 600; } .banner .t2 { font-size: 12px; color: var(--graphite); }
.hero { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 34px 12px 8px; }
.hero h1 { font-size: 27px; line-height: 1.2; }
.hero p { font-size: 14px; color: var(--graphite); line-height: 1.42; max-width: 34ch; }
/* A customer's page while Tellz answers, or when it cannot be reached (js/live.js): centred, nothing else on it. */
.hero.live-wait { min-height: 70vh; min-height: 70dvh; justify-content: center; }
.bigcheck { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 999px; background: var(--marker); color: var(--on-marker); }
.bigcheck .ic { width: 40px; height: 40px; }
.bigicon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 999px; background: var(--wash); border: 1px solid var(--rule); color: var(--ink); }
.bigicon .ic { width: 30px; height: 30px; }
.empty { display: flex; flex-direction: column; gap: 4px; padding: 14px 2px; font-size: 13px; color: var(--graphite); }
.empty b { font-size: 14px; color: var(--ink); font-weight: 600; }

/* ---------- sheets, toast ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); opacity: 0; transition: opacity 200ms ease; }
.scrim.show { opacity: 1; }
.sheet { position: fixed; z-index: 50; left: calc(var(--rail) + (100% - var(--rail)) / 2); bottom: 0; width: min(var(--col), 100%); max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  transform: translate(-50%, 104%); transition: transform 300ms var(--ease-drawer);
  background: var(--sheet); color: var(--ink); border-radius: var(--r-card) var(--r-card) 0 0; border-top: 1px solid var(--rule); box-shadow: 0 -10px 30px rgba(0,0,0,0.14);
  padding: 10px 16px calc(26px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; }
.sheet.open { transform: translate(-50%, 0); }
.sheet:not(.open) { pointer-events: none; }  /* a closed sheet never catches a click (24 Oct 2026: on a laptop it sat, invisible, mid-screen) */
@media (min-width: 980px) {
  .sheet { bottom: auto; top: 50%; border-radius: var(--r-card); border: 1px solid var(--rule); transform: translate(-50%, -46%) scale(0.98); opacity: 0; transition: transform 240ms var(--ease-out), opacity 200ms ease; max-height: 80vh; width: min(440px, 100% - 32px); }
  .sheet.open { transform: translate(-50%, -50%); opacity: 1; }
  .sheet .handle { display: none; }
}
.handle { width: 40px; height: 5px; border-radius: 3px; background: rgba(127,127,127,0.35); align-self: center; flex-shrink: 0; }
.sheethead { display: flex; align-items: center; gap: 10px; }
.sheethead h3 { font-size: 18px; flex: 1; }
.sheethead .r { font-size: 12px; font-weight: 500; color: var(--graphite); }
.toast { position: fixed; z-index: 70; left: calc(var(--rail) + (100% - var(--rail)) / 2); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px); opacity: 0;
  width: max-content; max-width: min(380px, calc(100% - 32px)); padding: 11px 16px; border-radius: 16px; background: var(--done-bg); color: var(--done-fg); font-size: 13px; font-weight: 500; line-height: 1.35;
  transition: opacity 200ms ease, transform 240ms var(--ease-out); pointer-events: none; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { margin-left: 10px; font-weight: 700; text-decoration: underline; }

/* ---------- share sheet ---------- */
.preview { flex-shrink: 0; border-radius: var(--r-panel); overflow: hidden; background: var(--panel); border: 1px solid var(--rule); }
.preview img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; display: block; }
.preview .pv { padding: 9px 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.preview .pt { font-size: 14px; font-weight: 600; } .preview .pl { font-size: 12px; color: var(--graphite); } .preview .pd { font-size: 11px; color: var(--mist); }
.msg { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--wash); }
.msg label { font-size: 12px; font-weight: 500; color: var(--text2); }
.msg textarea { width: 100%; min-height: 48px; resize: none; border: 0; background: transparent; color: var(--ink); font: 16px/1.45 var(--font-ui); padding: 0; outline: none; }
.msg .lnk { font-size: 13px; color: var(--graphite); overflow-wrap: anywhere; }
.chlabel { font-size: 13px; font-weight: 600; color: var(--graphite); transition: color 200ms ease; }
.chlabel.go { color: var(--ink); }
.channels { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ch { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 500; text-decoration: none; white-space: nowrap; opacity: 0.45; transition: opacity 200ms ease, transform 240ms var(--ease-out); }
.channels.ready .ch { opacity: 1; }
.ch .appic { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; }
.channels.pop .ch { animation: pop 420ms cubic-bezier(0.34,1.56,0.64,1) both; animation-delay: calc(var(--i) * 45ms + 260ms); }
@keyframes pop { 0% { transform: translateY(8px) scale(0.92); } 100% { transform: none; } }
.rowbtn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-panel); background: var(--panel); border: 1px solid var(--rule); width: 100%; text-align: left; }
.rowbtn .t { flex: 1; font-size: 14px; font-weight: 500; }
.rowbtn .v { font-size: 12px; color: var(--graphite); }
.rowbtn .ok { display: none; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
.rowbtn.copied .ok { display: inline-flex; } .rowbtn.copied .v { display: none; }

/* ---------- reader ---------- */
.reader { --stack-top: 60px; --stack-bottom: 100px; display: flex; flex-direction: column; gap: 22px; }
/* One bar (owner, 11 Oct 2026): where you came from, the short day once the large title has scrolled away, share and the
   report's actions. It is clear over the page until the title passes under it, then frosted with a hairline. */
.rtop { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; flex-direction: column; padding-block: 8px; margin-inline: -16px; padding-inline: 16px; background: var(--page); border-bottom: 1px solid transparent; transition: border-color 160ms ease, background-color 160ms ease; }
.rtop.titled { background: color-mix(in srgb, var(--page) 86%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom-color: var(--rule); }
.rtop .toprow { position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; }
.rtop .ct { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%); max-width: 50%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; color: var(--text3); opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.rtop .ct b { font-weight: 600; color: var(--ink); }
.rtop.titled .ct { opacity: 1; transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) { .rtop, .rtop .ct { transition: none; } }
/* The large title: the day's name, a caret that opens the days, then the date, the hour and the read time. */
.ltitle { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 2px; }
.lt-day { display: inline-flex; align-items: center; gap: 6px; margin-left: -2px; padding: 0 2px; border: 0; background: none; color: var(--ink); font: 600 36px/1.05 var(--font-display); letter-spacing: -0.02em; cursor: pointer; }
.lt-day .ic { color: var(--text3); margin-top: 6px; }
.lt-day:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 10px; }
.lt-sub { margin: 0; color: var(--text2); font-size: 15px; }
/* The days sheet: the days around this one as tiles, then the calendar and the month. */
.days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.day { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 62px; border: 0; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); font-size: 12px; color: var(--text2); cursor: pointer; }
.day b { font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.day.on { background: var(--ink); color: var(--page); box-shadow: none; }
.day.on b { color: var(--page); }
.day:disabled { opacity: 0.4; cursor: default; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; height: 32px; padding-inline: 13px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--graphite); transition: background-color 180ms ease, color 180ms ease; }
.chip.on { background: var(--done-bg); color: var(--done-fg); border-color: transparent; box-shadow: none; }
.sec { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: calc(var(--stack-top, 60px) + 8px); }
.sec h1 { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.18; letter-spacing: -0.015em; }
.sec h2 { font-size: 22px; line-height: 1.22; }
.sec .sub { font-size: 13px; color: var(--graphite); }
.thumb { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.tile { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--tint-fill); border: 1px solid var(--hair); color: var(--graphite); flex-shrink: 0; }
.tile.s44 { width: 44px; height: 44px; }
.mini-share { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--graphite); background: var(--tint-fill); flex-shrink: 0; }
.newb { display: inline-flex; align-items: center; height: 22px; padding-inline: 9px; border-radius: 999px; background: var(--marker); color: var(--on-marker); font-size: 12px; font-weight: 600; flex-shrink: 0; }
.move { display: flex; gap: 8px; font-size: 13px; } .move b { font-weight: 600; min-width: 40px; }
.num { width: 22px; height: 22px; border-radius: 999px; background: var(--tint-fill); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; padding-block: 12px 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-block: 12px 14px; }
.card { display: flex; flex-direction: column; gap: 6px; min-width: 0; text-align: left; }
.pic { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--tint-fill); max-width: 100%; width: 100%; }
.pic.sq { aspect-ratio: 1 / 1; }
.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pic .shade { position: absolute; inset: 0 0 auto 0; height: 64px; background: linear-gradient(rgba(0,0,0,0.5), transparent); pointer-events: none; }
.pic .pwho { position: absolute; left: 9px; top: 9px; right: 40px; color: #fff; font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.pic .when { color: rgba(255,255,255,0.82); font-weight: 500; font-size: 11px; }
.onpic { position: absolute; width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: var(--dark-glass); border: 1px solid rgba(255,255,255,0.3); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }
.onpic.src-tr { right: 8px; top: 8px; } .onpic.src-bl { left: 8px; bottom: 8px; } .onpic.share { right: 8px; bottom: 8px; z-index: 2; }
.pic .cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pic .cover:focus-visible { outline-offset: -3px; }
.card .lchip { align-self: flex-start; }
.gist { font-size: 13px; font-weight: 500; line-height: 1.35; }
.adstrip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 12px 4px; }
.adstrip img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; padding-block: 10px 12px; text-align: center; font-variant-numeric: tabular-nums; }
.cal > * { height: 36px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.cal .dow { height: 20px; font-size: 11px; font-weight: 600; color: var(--graphite); }
.cal .fut { color: var(--graphite); }
.cal button.has { font-weight: 600; }
.cal button.has::after { content: ""; position: absolute; }
.cal .today b, .cal .sel b { width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.cal .today b { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cal .sel b { background: var(--done-bg); color: var(--done-fg); box-shadow: none; }
.cal .band { background: var(--marker-soft); color: var(--ink); }
.cal .band.l { border-radius: 12px 0 0 12px; } .cal .band.r { border-radius: 0 12px 12px 0; }
.bar { position: fixed; z-index: 30; left: calc(var(--rail) + (100% - var(--rail)) / 2); transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: min(320px, calc(100% - 32px)); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px; border-radius: 999px; }
/* a shared link has no Ask: three places, never an empty fourth (owner, 7 Oct 2026) */
.bar button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-block: 6px; border-radius: 999px; font-size: 10px; font-weight: 600; }
.bar button:hover { background: var(--tint-fill); }
/* In the app the tab bar is at the bottom, so the report's actions move to the top bar; the link reader keeps the bar. */
.bar.portal { display: none; }
@media (min-width: 980px) { .shell.with-rail .bar.portal { display: grid; } .shell.with-rail .more-acts { display: none; } }
.rtl { direction: rtl; font-family: var(--font-ar); }
/* Tellz in Arabic (24 Oct 2026, KB 33): Latin words stay Manrope, Arabic letters take IBM Plex Sans Arabic. */
html[data-ui-lang="ar"] { --font-ui: "Manrope", "IBM Plex Sans Arabic", "Geeza Pro", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.contents button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 2px; text-align: left; }
.contents button + button { border-top: 1px solid var(--hair); }
.contents .tx { flex: 1; display: flex; flex-direction: column; } .contents .t { font-size: 15px; font-weight: 500; } .contents .c { font-size: 12px; color: var(--graphite); }
.contents .p { font-size: 12px; font-weight: 600; color: var(--graphite); }

/* pop-ups over pictures */
.media { position: relative; border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 16 / 10; background: #000; }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media .lab { position: absolute; left: 12px; top: 12px; }
.darkpill { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--dark-glass); color: #fff; font-size: 12px; font-weight: 600; border: 1px solid rgba(255,255,255,0.25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.media .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.media .play span { width: 58px; height: 58px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--dark-glass); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.frames { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; }
.frames img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.says .r { display: flex; gap: 6px; padding-block: 5px; font-size: 13px; }
.says .r + .r { border-top: 1px solid var(--hair); }
.says .r b { width: 34px; flex-shrink: 0; font-size: 12px; color: var(--graphite); font-weight: 600; }
.story-frame { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 9 / 13; max-height: 48vh; background: #000; margin-inline: auto; width: 100%; }
.story-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ask */
.qbubble { align-self: flex-end; max-width: 82%; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: var(--done-bg); color: var(--done-fg); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.answer p + p { margin-top: 4px; }
.answer .srcs { display: flex; flex-direction: column; padding-top: 6px; }
.answer .srcs > div { display: flex; align-items: center; gap: 6px; padding-block: 7px; font-size: 12px; font-weight: 600; }
.answer .srcs > div + div { border-top: 1px solid var(--hair); }
.answer .srcs span:last-child { margin-left: auto; color: var(--graphite); font-weight: 500; }
.askbox { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 6px 0 16px; border-radius: 999px; background: var(--field); border: 1px solid var(--rule); }
.askbox input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 16px; height: 46px; }
.askbox button { width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--marker); color: var(--on-marker); flex-shrink: 0; }
.askbox button:disabled { opacity: 0.4; }
.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--graphite); animation: blink 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 50% { opacity: 0.25; } }

/* plans */
.plan { display: flex; align-items: flex-start; gap: 12px; padding-block: 12px; width: 100%; text-align: left; }
.plan .radio { width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--mist); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.plan[aria-checked="true"] .radio { border-color: var(--ink); }
.plan[aria-checked="true"] .radio::after { content: ""; width: 12px; height: 12px; border-radius: 999px; background: var(--ink); }
.plan .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan .nm { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.plan .pr { text-align: right; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan .pr small { display: block; font-size: 11px; font-weight: 400; color: var(--graphite); }
.meter { display: flex; flex-direction: column; gap: 6px; padding-block: 6px; }
.meter .mt { display: flex; gap: 8px; font-size: 14px; font-weight: 500; } .meter .mt span:last-child { margin-left: auto; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.meter .bar2 { height: 8px; border-radius: 4px; background: var(--hair); overflow: hidden; }
.meter .bar2 i { display: block; height: 100%; border-radius: 4px; background: var(--ink); }
.meter.full .bar2 i { background: var(--warn); }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; padding-block: 4px; }
.swatches button { width: 30px; height: 30px; border-radius: 999px; }
.swatches button[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--ink); }
.looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-block: 4px 6px; }
.looks button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.looks .lt { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; width: 100%; height: 72px; padding: 10px; border-radius: 14px; border: 1px solid var(--hair); }
.looks .lt i { display: block; height: 8px; border-radius: 4px; background: rgba(32,33,35,0.15); width: 70%; }
.looks .lt i + i { width: 50%; }
.looks button[aria-checked="true"] { font-weight: 600; }
.looks button[aria-checked="true"] .lt { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--ink); }
/* Appearance: what each choice looks like, whatever the current theme */
.looks .lt.th-light { background: #F4F4F2; border-color: rgba(32,33,35,0.08); }
.looks .lt.th-dark { background: #1C1C1F; border-color: rgba(255,255,255,0.08); }
.looks .lt.th-dark i { background: rgba(255,255,255,0.22); }
.looks .lt.th-auto { background: linear-gradient(135deg, #F4F4F2 50%, #1C1C1F 50%); }
.looks .lt.th-auto i { background: rgba(128,128,128,0.45); }
.steps .stp { display: flex; align-items: flex-start; gap: 12px; padding-block: 10px; }
.steps .stp + .stp { border-top: 1px solid var(--hair); }
.steps .mk { width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; background: var(--tint-fill); color: var(--graphite); }
.steps .stp.done .mk { background: var(--done-bg); color: var(--done-fg); }
.steps .stp.now .mk { background: var(--marker); color: var(--on-marker); }
.kv { display: flex; gap: 8px; padding-block: 6px; font-size: 13px; }
.kv + .kv { border-top: 1px solid var(--hair); }
.kv b { width: 64px; flex-shrink: 0; font-weight: 600; }
.kv span { color: var(--graphite); flex: 1; }
.consent-pair { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 18px; }
.agent { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.agent.lg { width: 52px; height: 52px; border-radius: 14px; font-size: 18px; }
/* The service's avatar: the iris on the marker tile (never a letter, never a second colour inside the mark). */
.mark-b { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--marker); color: var(--on-marker); flex-shrink: 0; }
.mark-b svg { width: 62%; height: 62%; display: block; }

/* ---------- outside surfaces: messages and emails ---------- */
.device { display: flex; flex-direction: column; gap: 10px; padding-block: 8px; }
.chathead { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.chathead .nm { font-size: 15px; font-weight: 600; } .chathead .sb { font-size: 12px; color: var(--graphite); }
.tg-wall { border-radius: var(--r-panel); padding: 12px; background: linear-gradient(160deg, #CFE3C3, #E8DDB5 60%, #CFDCC0); display: flex; flex-direction: column; gap: 8px; }
.wa-wall { border-radius: var(--r-panel); padding: 12px; background: #EAE3D9; display: flex; flex-direction: column; gap: 8px; }
.bubble { align-self: flex-start; max-width: 92%; border-radius: 16px; background: #FFFFFF; color: #141413; overflow: hidden; box-shadow: 0 1px 1px rgba(0,0,0,0.08); }
.bubble img { width: 100%; display: block; }
.bubble .bt { padding: 8px 10px 6px; font-size: 13.5px; line-height: 1.42; white-space: pre-line; }
.bubble .bt b { font-weight: 600; }
.bubble .tm { display: block; text-align: right; font-size: 10.5px; color: var(--text2); padding: 0 10px 6px; }
.bubble .kbd { display: grid; gap: 4px; padding: 0 4px 4px; }
.bubble .kbd a, .bubble .kbd button { display: flex; align-items: center; justify-content: center; height: 38px; border-radius: 10px; background: rgba(0,0,0,0.05); font-size: 13.5px; font-weight: 600; color: #1F6AA5; text-decoration: none; }
.mail { border-radius: var(--r-panel); background: var(--mail-bg); color: var(--mail-ink); overflow: hidden; border: 1px solid var(--rule); }
.mail .mh { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--hair); }
.mail .mh h2 { font-size: 19px; line-height: 1.3; }
.mail .from { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--graphite); }
.mail .from b { display: block; font-size: 14px; color: var(--mail-ink); font-weight: 600; }
.mail .mb { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--page); }

/* ---------- demo controls ---------- */
.demo-fab { position: fixed; z-index: 80; left: 0; top: 46%; display: inline-flex; align-items: center; gap: 6px; padding: 12px 7px; border-radius: 12px 0 0 12px; writing-mode: vertical-rl; transform: rotate(180deg) translateY(50%); transform-origin: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--done-bg); color: var(--done-fg); box-shadow: 0 4px 14px rgba(0,0,0,0.18); opacity: 0.86; }
.demo-fab { border-radius: 12px 0 0 12px; padding: 10px 5px; font-size: 9px; }
.demo-fab:hover { opacity: 1; }
.demo-panel .grp { display: flex; flex-direction: column; gap: 6px; }
.demo-panel .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-panel .opts button { height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--tint-fill); }
.demo-panel .opts button[aria-pressed="true"] { background: var(--done-bg); color: var(--done-fg); }
.demo-panel .jump { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.demo-panel .jump button { min-height: 34px; padding: 6px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; text-align: left; background: var(--panel); border: 1px solid var(--hair); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-delay: 0ms !important; scroll-behavior: auto !important; }
}

/* ---------- edit rows (About you, Your company, a competitor's channels) ---------- */
.erow { display: flex; align-items: center; gap: 12px; padding-block: 10px; min-width: 0; }
.erow .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.erow .lab { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--graphite); }
.erow .val { font-size: 15px; font-weight: 500; line-height: 1.33; overflow-wrap: anywhere; }
.erow .val.none { color: var(--mist); font-weight: 400; }
.erow .t3 { font-size: 12px; font-weight: 500; color: var(--graphite); display: block; line-height: 1.4; }
.erow .t3 .ic { vertical-align: -2px; margin-right: 4px; }
.row .tx > .t3:not(:has(.nets)) { display: block; } .row .tx > .t3 .ic { vertical-align: -2px; margin-right: 4px; }
.erow.editing { flex-direction: column; align-items: stretch; gap: 8px; padding-block: 12px; }
.erow .edit-actions { display: flex; gap: 8px; justify-content: flex-end; }
.erow > .rowbtn { width: 100%; }
.panel > .list > .erow > .rowbtn { border: 0; background: none; padding-inline: 0; }
.comp-row > .row { text-align: left; }
.comp-row .t3 .nets { margin-right: 4px; }
.chip .ic { margin-right: 2px; }

/* ---------- searchable picker ---------- */
.combo .inbox { position: relative; }
.combo-list { position: absolute; z-index: 60; left: -1px; right: -1px; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; max-height: 280px; overflow-y: auto;
  background: var(--sheet); border: 1px solid var(--hair); border-radius: 16px; box-shadow: var(--shadow); }
.combo-list li { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 15px; cursor: pointer; }
.combo-list li .nat { margin-left: auto; font-size: 13px; color: var(--graphite); }
.combo-list li[aria-selected="true"] { background: var(--tint-fill); }
.combo-list li.cur span:first-child { font-weight: 600; }
.combo-list li.none { color: var(--graphite); cursor: default; }

/* ---------- tick lists (suggested competitors, area sources) ---------- */
.row.tick { cursor: pointer; }
.row.tick input[type="checkbox"] { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--ink); cursor: pointer; }
.row.tick.off { opacity: 0.5; cursor: not-allowed; }
.row.tick.off input { cursor: not-allowed; }

/* ---------- signed in: Manage (profile card, set-up list), Usage, Share Tellz (3 Oct 2026) ---------- */
.mecard { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.mecard .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mecard .tx b { font-size: 16px; font-weight: 600; line-height: 1.3; }
.mecard .tx span { font-size: 12px; color: var(--graphite); line-height: 1.35; }
.setup-bar { height: 6px; margin: 8px 0 2px; border-radius: 3px; background: var(--hair); overflow: hidden; }
.setup-bar i { display: block; height: 100%; border-radius: 3px; background: var(--ink); transition: width 300ms var(--ease-out); }
.row.setup { text-align: left; }
.row.setup .tick { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; border: 1.5px solid var(--mist); flex-shrink: 0; }
.row.setup.done .tick { background: var(--done-bg); border-color: var(--done-bg); color: var(--done-fg); }
.row.setup.done .t1 { color: var(--graphite); }
.row.setup > .ic { color: var(--graphite); }
.qbars { display: flex; align-items: flex-end; gap: 3px; height: 74px; padding-top: 10px; }
.qbars .b { flex: 1; min-width: 0; border-radius: 3px 3px 1px 1px; background: var(--ink); }
.qbars .b.fut { background: var(--hair); }
.qbars .b.now { background: var(--marker); box-shadow: inset 0 0 0 1px rgba(32,33,35,0.18); }
.qbars-x .key { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; background: var(--marker); box-shadow: inset 0 0 0 1px rgba(32,33,35,0.18); }
.row.setup.done { padding-block: 7px; }
.row.setup.done .t1 { font-size: 14px; }
.qbars-x { display: flex; justify-content: space-between; padding-top: 4px; font-size: 11px; color: var(--graphite); font-variant-numeric: tabular-nums; }
.meter .small { padding-top: 2px; }

/* ---------- the first report, coming together (3 Oct 2026) ---------- */
.ring { position: relative; display: inline-flex; width: 72px; height: 72px; flex-shrink: 0; }
.ring.sm { width: 52px; height: 52px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring .trk { stroke: var(--hair); }
.ring .val { stroke: var(--ink); stroke-linecap: round; transition: stroke-dashoffset 400ms linear; }
.ring .rv { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ring .rv b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ring.sm .rv b { font-size: 16px; }
.ring .rv i { font-style: normal; font-size: 10px; font-weight: 600; color: var(--graphite); padding-top: 2px; }
.ring .rv .ic { width: 22px; height: 22px; }
.frpanel { display: flex; flex-direction: column; gap: 10px; }
.frhead { display: flex; align-items: center; gap: 14px; }
.frhead .tx, .frmini .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.frhead .t1 { font-size: 18px; font-weight: 600; line-height: 1.25; }
.frhead .t2, .frmini .t2 { font-size: 13px; color: var(--graphite); }
.frmini { display: flex; align-items: center; gap: 12px; }
.frmini .t1 { font-size: 15px; font-weight: 600; }
.frsteps { display: flex; flex-direction: column; border-top: 1px solid var(--hair); }
.frstep { display: flex; align-items: center; gap: 12px; padding-block: 8px; }
.frstep + .frstep { border-top: 1px solid var(--hair); }
.frstep .mk { width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--graphite); border: 1.5px solid var(--mist); }
.frstep.done .mk { background: var(--done-bg); border-color: var(--done-bg); color: var(--done-fg); }
.frstep.now .mk { border-color: var(--ink); }
.frstep .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.frstep .t1 { font-size: 14px; font-weight: 600; }
.frstep.next .t1 { color: var(--graphite); font-weight: 500; }
.frstep .t2 { font-size: 12px; color: var(--graphite); font-variant-numeric: tabular-nums; }
.spin { width: 12px; height: 12px; border-radius: 999px; border: 2px solid var(--hair); border-top-color: var(--ink); animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.row.frin { animation: frin 360ms var(--ease-out) both; }
@keyframes frin { from { opacity: 0; transform: translateY(6px); } }
.row.frread .t1 { color: var(--graphite); }
.skel { display: flex; flex-direction: column; gap: 5px; width: 56px; flex-shrink: 0; }
.skel i { display: block; height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--hair), var(--tint-fill), var(--hair)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skel i + i { width: 70%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Today for a leader: at a glance, moves, who moved, coming up ---------- */
.glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.gl { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 4px 6px 0; border-radius: 8px; text-align: left; min-width: 0; }
.gl b { font-family: var(--font-display); font-size: 26px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
.gl span { font-size: 11px; font-weight: 400; color: var(--text2); line-height: 1.25; }
.gl i { display: inline-flex; margin-top: 2px; font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 999px; background: var(--marker); color: var(--on-marker); }
.gl:hover { background: var(--wash); }
.gl.zero b { color: var(--mist); }
.row .mv { display: block; font-size: 12.5px; color: var(--ink); line-height: 1.4; padding-top: 2px; }
.row .mv b { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--graphite); margin-right: 6px; }
.mvrow { display: flex; align-items: center; gap: 10px; padding-block: 6px; }
.mvrow .who { width: 118px; flex-shrink: 0; font-size: 13px; }
.mbar { flex: 1; height: 8px; border-radius: 4px; background: var(--hair); overflow: hidden; }
.mbar i { display: block; height: 100%; border-radius: 4px; background: var(--ink); }  /* the face names the account; the bar is only the count */
.mvrow b { width: 24px; text-align: right; font-size: 13px; font-weight: 600; }
.datechip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; height: 50px; border-radius: 12px; background: var(--tint-fill); border: 1px solid var(--hair); flex-shrink: 0; line-height: 1.05; }
.datechip b { font-size: 17px; font-weight: 700; }
.datechip i { font-style: normal; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--graphite); }
.linkrow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 0 12px; border-top: 1px solid var(--hair); font-size: 13px; font-weight: 600; }
.linkrow .ic:last-child { margin-left: auto; color: var(--graphite); }

/* ---------- swiping between reports ---------- */
.rbody { display: flex; flex-direction: column; gap: 18px; touch-action: pan-y pinch-zoom; }
.rbody.dragging { will-change: transform; user-select: none; -webkit-user-select: none; }
.rbody.slidein-r { animation: slideinR 260ms var(--ease-out) both; }
.rbody.slidein-l { animation: slideinL 260ms var(--ease-out) both; }
@keyframes slideinR { from { transform: translateX(28%); opacity: 0; } }
@keyframes slideinL { from { transform: translateX(-28%); opacity: 0; } }
.swipehint { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: -16px; font-size: 12px; font-weight: 500; color: var(--graphite); }
.swipehint .t-keys { display: none; }
@media (hover: hover) and (pointer: fine) { .swipehint .t-touch { display: none; } .swipehint .t-keys { display: inline; } }

/* ---------- Archive: the calendar ---------- */
.calhead { display: flex; align-items: center; gap: 8px; }
.calhead h2 { flex: 1; text-align: center; font-size: 17px; font-weight: 600; }
.mcal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 2px; padding-block: 8px 4px; font-variant-numeric: tabular-nums; }
.mcal .dow { height: 18px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--graphite); }
.cday { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; height: 50px; padding-top: 5px; border-radius: 12px; font-size: 14px; }
.cday b { width: 28px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 500; }
.cday.has b { font-weight: 700; }
.cday.fut b, .cday.none b { color: var(--graphite); }
.cday.today b { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cday.sel { background: var(--done-bg); color: var(--done-fg); }
.cday.sel b { color: var(--done-fg); box-shadow: none; }
.cday.band { background: var(--marker-soft); color: var(--ink); }
.cday.band.sel { background: var(--done-bg); color: var(--done-fg); }
.cday .mk { height: 14px; display: inline-flex; align-items: center; justify-content: center; }
.cday .mk .n { min-width: 16px; height: 14px; padding-inline: 4px; border-radius: 999px; background: var(--ink); color: var(--done-fg); font-size: 10px; font-weight: 700; font-style: normal; display: inline-flex; align-items: center; justify-content: center; }
.cday.sel .mk .n { background: var(--done-fg); color: var(--done-bg); }
.cday .mk .q { width: 6px; height: 6px; border-radius: 999px; border: 1.5px solid currentColor; opacity: 0.6; }
.cday .mk .s { width: 6px; height: 6px; border-radius: 999px; border: 1.5px dashed currentColor; opacity: 0.5; }
.cday .mk .ev { width: 6px; height: 6px; border-radius: 2px; background: var(--alert); opacity: 0.75; }
.cday .mk .ic { width: 12px; height: 12px; }
.calkey { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 2px 4px; font-size: 11px; color: var(--graphite); }
.calkey span { display: inline-flex; align-items: center; gap: 5px; }
.calkey .n { min-width: 16px; height: 14px; padding-inline: 4px; border-radius: 999px; background: var(--ink); color: var(--done-fg); font-size: 10px; font-weight: 700; font-style: normal; display: inline-flex; align-items: center; justify-content: center; }
.calkey .q, .calkey .s, .calkey .ev { width: 7px; height: 7px; border-radius: 999px; border: 1.5px solid var(--graphite); }
.calkey .s { border-style: dashed; }
.calkey .ev { border: 0; border-radius: 2px; background: var(--alert); opacity: 0.75; }
.calkey .bd { width: 14px; height: 8px; border-radius: 3px; background: var(--marker-soft); border: 1px solid var(--hair); }
.calday { display: flex; flex-direction: column; gap: 6px; }
.calday h3 { font-size: 17px; font-weight: 600; }
.calday .verdict { font-size: 15px; font-weight: 500; line-height: 1.4; }

/* ---------- Day or Month, the month so far (3 Oct 2026) ---------- */
.vseg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; }
.vseg button { height: 32px; padding-inline: 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--graphite); transition: background-color 160ms ease, color 160ms ease; }
.vseg button.on { background: var(--done-bg); color: var(--done-fg); }
.qbars.mono .b { background: var(--graphite); opacity: 0.55; }
.qbars.mono .b.today { background: var(--ink); opacity: 1; }
.qbars.mono .b.fut { background: var(--hair); opacity: 1; }
#m-moved, #m-live, #m-things { scroll-margin-top: 90px; }
#sec-month h1 { font-size: 22px; line-height: 1.28; }

/* Live print: the reader replaces its visible day in place; never print swipe clones. */
@media print {
  html[data-live="true"] .rtop, html[data-live="true"] .bar,
  html[data-live="true"] #tabs, html[data-live="true"] #rail,
  html[data-live="true"] .bottom, html[data-live="true"] .fade-under,
  html[data-live="true"] .nav, html[data-live="true"] .demo-fab, html[data-live="true"] .swipehint,
  html[data-live="true"] .scrim, html[data-live="true"] .sheet,
  html[data-live="true"] .toast, html[data-live="true"] .mini-share,
  html[data-live="true"] .onpic.share,
  html[data-live="true"] .reader[aria-hidden="true"],
  html[data-live="true"] .day-pane[aria-hidden="true"] { display: none !important; }
  html[data-live="true"] .shell, html[data-live="true"] .col { display: block; width: 100%; max-width: none; margin: 0; padding: 0; }
  html[data-live="true"] .rbody { transform: none !important; opacity: 1 !important; animation: none !important; }
  html[data-live="true"] .card, html[data-live="true"] .row { break-inside: avoid; }
}

/* P1/P2: one visual chain, with independent media paging. */
/* the sheet is solid (owner, 7 Oct 2026: the report behind showed through on an iPhone); a caption keeps its line breaks */
.caption-clamped { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-line; }
.visual-title { background:none; border:0; text-align:start; min-height:44px; width:100%; }
.visual-tile .collaborators { font-size:12px; padding-top:8px; }
.collaborators a { min-height:44px; color:inherit; text-decoration:none; }
.ad-thumb { padding:0; min-width:44px; min-height:44px; flex-shrink:0; border:0; background:none; }
.ad-row, .advertiser-row { width:100%; text-align:start; min-height:44px; }
.ad-row .thumb { width:96px; height:110px; object-fit:contain; background:var(--wash); }
.ad-row .t1 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cover:active, .visual-title:active, .ad-row:active, .advertiser-row:active { background:rgba(127,127,127,.18); }
/* A card in a row is as tall as its own content: a text-only news card no longer stretches to its neighbours' pictures. */
.prow { align-items: flex-start; }
.grid3:has(.visual-tile) { grid-template-columns:repeat(2,minmax(0,1fr)); }
.visual-tile { min-width:0; }
.visual-tile .pwho { right:42px; }
.visual-tile .collaborators .tx { overflow-wrap:anywhere; }

/* A still-frame preview uses the same glass as the other image badges. */
.loop-badge{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:20px;font-size:11px;pointer-events:none;background:var(--dark-glass);color:#fff;border:1px solid rgba(255,255,255,.3);box-shadow:none}
.ad-thumb{position:relative}

.your-side-row{display:flex;gap:12px;overflow-x:auto;padding:12px 0}.your-side-row>.stile,.your-side-row>.visual-tile{flex:0 0 168px;min-width:150px}
.ad-thumb { position:relative; }
.ad-thumb .darkpill { position:absolute; bottom:6px; left:6px; font-size:11px; }

/* Focus view (owner, 6 Oct 2026): the read, the Top 3 with their posts in full height, then picture grids. */
.rbody.focus { gap: 18px; }
/* The brief in a nutshell: a message from the bot, on white. */
.nutshell { margin: 4px 0 2px; }
.nut { min-width: 0; padding: 16px 18px 17px; border-radius: var(--r-card); background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.fbody .nut { padding: 2px 0 0; border: 0; box-shadow: none; border-radius: 0; }
.fbody .nutshell { margin: 0; }
.nut-label { display: flex; align-items: center; gap: 8px; color: var(--text2); font-size: 12px; font-weight: 500; }
.nut-day { margin-left: auto; font-weight: 500; }
.nut-text { margin: 10px 0 0; color: var(--ink); font: 500 24px/1.25 var(--font-display); letter-spacing: -0.015em; text-wrap: pretty; }
.nut-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.nut-chip { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--tint-fill); color: var(--ink); font: 600 13px/1 var(--font-ui); cursor: pointer; transition: transform 160ms var(--ease-out); }
.nut-chip:first-child { background: var(--marker); color: var(--on-marker); }
.nut-foot { }
.nut-chip:active { transform: scale(0.97); }

/* The Top 3 as a deck: the post fills the card; cards pin under the header and stack while scrolling (js/stack.js). */
.topstack { position: relative; margin-top: 18px; }
.topcard { position: relative; height: min(560px, 72svh); min-height: 380px; margin-top: 18px; overflow: hidden; border-radius: var(--r-card); background: #1b1c1e; box-shadow: 0 2px 6px rgba(20,20,25,0.08), 0 24px 48px rgba(20,20,25,0.18); transform-origin: 50% 0; will-change: transform; }
.topcard:first-child { margin-top: 0; }
.topcard::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(0,0,0,0.40) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.80) 100%); pointer-events: none; }
/* A story with no picture (a news item, a text post) is a white card of its own height, never an empty photo frame:
   on a phone the frame's words sat under the next card and read as a broken picture (owner, 9 Oct 2026). */
.topcard.nopic { height: auto; min-height: 0; background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.topcard.nopic::after { display: none; }
.topcard.nopic .tc-top, .topcard.nopic .tc-bottom { position: relative; top: auto; left: auto; right: auto; bottom: auto; }
.topcard.nopic .tc-top { padding: 14px 14px 0; }
.topcard.nopic .tc-bottom { padding: 12px 18px 18px; color: var(--ink); }
.topcard.nopic .tc-head { text-shadow: none; }
.topcard.nopic .tc-cap { color: var(--text2); -webkit-line-clamp: 4; }
.topcard.nopic .topn { background: var(--ink); color: var(--panel); box-shadow: none; }
.topcard.nopic .tc-who, .topcard.nopic .tc-post, .topcard.nopic .tc-when { background: var(--wash); color: var(--ink); border-color: var(--rule); -webkit-backdrop-filter: none; backdrop-filter: none; }
.topcard.nopic .tc-who .dot { box-shadow: none; }
.topcard.nopic .tc-move { background: var(--wash); border-color: var(--rule); color: var(--ink); }
.tc-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tc-open { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; background: transparent; cursor: pointer; }
.tc-top { position: absolute; z-index: 3; top: 14px; left: 14px; right: 14px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.topn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.94); color: #202123; font: 600 15px/1 var(--font-ui); box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.tc-who, .tc-post { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: var(--dark-glass); color: #fff; font: 600 13px/1 var(--font-ui); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tc-who .dot { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.9); }
.tc-post { margin-left: auto; padding: 0 11px; font-size: 12px; cursor: pointer; pointer-events: auto; }
.tc-bottom { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 18px; color: #fff; pointer-events: none; }
.tc-head { margin: 0; font: 500 24px/1.16 var(--font-display); letter-spacing: -0.015em; text-shadow: 0 1px 14px rgba(0,0,0,0.35); }
.tc-cap { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 8px 0 0; color: rgba(255,255,255,0.88); font-size: 14px; line-height: 1.42; }
.tc-move { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.14); font-size: 14px; font-weight: 600; line-height: 1.35; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tc-move .ic { flex: none; margin-top: 2px; }
.tc-move span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.tc-dim { position: absolute; inset: 0; z-index: 4; background: #000; opacity: 0; pointer-events: none; }
.topcard .loop-badge { display: none; }
@media (prefers-reduced-motion: reduce) { .topcard { will-change: auto; } }
.focus-pill { display: flex; margin: 16px auto 0; }

.ggrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ggrid.ads, .ggrid.linkedin { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ggrid.ads > .gtile:only-child, .ggrid.linkedin > .gtile:only-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.gtile { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background: var(--tint-fill); cursor: pointer; transition: transform 160ms var(--ease-out); }
.gtile:active { transform: scale(0.97); }
.gtile.tall { aspect-ratio: 9 / 16; }
.ggrid.linkedin .gtile { aspect-ratio: 4 / 3; }
.gtile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gtile::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(transparent, rgba(0,0,0,0.55)); pointer-events: none; }
.gtile .gwho { position: absolute; left: 8px; right: 8px; bottom: 7px; z-index: 1; display: flex; align-items: center; gap: 5px; overflow: hidden; color: #fff; font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,0.45); }
.gtile .gwho .dot { flex: none; box-shadow: 0 0 0 1.5px rgba(255,255,255,0.85); }
.gtile .gicon { position: absolute; top: 7px; right: 7px; z-index: 1; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.gtile .gbadge, .gtile .gnew { position: absolute; top: 7px; z-index: 1; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.2; }
.gtile .gbadge { right: 7px; background: var(--dark-glass); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gtile .gnew { left: 7px; background: var(--marker); color: var(--on-marker); font-size: 12px; }
/* Above the account's usual: a flame and the multiple (pulse/brief/engagement.py). */
.gtile .gtags { position: absolute; top: 7px; left: 7px; z-index: 1; display: flex; gap: 4px; }
.gtile .gtags .gnew { position: static; }
.gtile .ghot { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px 3px 6px; border-radius: 999px; background: var(--marker-soft); color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.gtile .gperf { position: absolute; left: 8px; bottom: 24px; z-index: 1; display: inline-flex; align-items: center; gap: 3px; color: #fff; font-size: 11px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,0.45); }
.gtile .gperf .ic { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }
.hotline { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--ink); font-size: 13px; }
.hotline .ic { color: var(--ink); flex: none; }
.nut-chip.hot { display: inline-flex; align-items: center; gap: 5px; }
.nut-chip.hot .ic { color: inherit; }
.gtile .loop-badge { display: none; }
.gtile.gtext { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 12px; text-align: left; background: var(--panel); border: 1px solid var(--rule); }
.gtile.gtext::after { display: none; }
.gtile.gtext .gwho { position: static; color: var(--graphite); text-shadow: none; }
.ggrid.news { grid-template-columns: 1fr 1fr; }
.ggrid.news > .gtile:only-child { grid-column: 1 / -1; }
.ggrid.news .gtile { aspect-ratio: auto; min-height: 132px; }
.gtile.gtext .gsrc { display: inline-flex; align-items: center; gap: 4px; color: var(--graphite); font-size: 11px; font-weight: 600; }
.gtile.gtext .gtx { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.35; }

.focus-more .small { margin: 12px 6px 0; }
@media (prefers-reduced-motion: reduce) { .gtile { transition: none; } }

/* Full-screen viewers on a wide screen: a centred phone-shaped panel over the dimmed page, not the whole window. */
@media (min-width: 640px) {
  .sheet[data-name="thing-story"], .sheet[data-name="story"], .sheet.open[data-name="thing-story"], .sheet.open[data-name="story"] {
    inset: auto; top: 50%; bottom: auto; left: calc(var(--rail) + (100% - var(--rail)) / 2);
    width: min(440px, calc(100vw - 48px)); height: min(900px, calc(100dvh - 48px)); max-height: none;
    transform: translate(-50%, -50%); border-radius: 28px; box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  }
}

/* ---------- a shared item, for someone who has never seen Tellz ---------- */
.pubtop { display: flex; align-items: center; gap: 8px; padding-top: 10px; }
.pubabout { margin-top: -4px; color: var(--graphite); }
.pubwhat { margin-top: -6px; color: var(--graphite); }
.pubpage h1 { font-size: 24px; line-height: 1.25; }
.pubpage .row .tx .btn { margin-top: 8px; align-self: flex-start; }

/* ---------- the month in the focus layout ---------- */
.tc-when { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: var(--dark-glass); color: #fff; font: 600 12px/1 var(--font-ui); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nut-foot { margin: 10px 0 0; color: var(--graphite); font-size: 12px; }
#reader-month .rtop .chips { margin-top: 10px; }

/* ---------- the portal on a computer: quiet chrome so the brief leads (owner, 6 Oct 2026; Apple's own apps, not its marketing) ---------- */
.rail .acct { display: flex; align-items: center; gap: 10px; width: 100%; height: auto; padding: 8px; border-radius: 12px; text-align: left; }
.rail .acct .av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--page); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.rail .acct .tx { display: flex; flex-direction: column; min-width: 0; }
.rail .acct .t1 { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.rail .acct .t2 { color: var(--graphite); font-size: 12px; font-weight: 500; line-height: 1.3; }
@media (min-width: 980px) {
  .shell.with-rail { --rail: 232px; }
  .shell.with-rail .rail { gap: 2px; padding: 18px 12px 14px; background: var(--panel); }
  .shell.with-rail .rail .brandrow { padding: 6px 10px 18px; }
  .shell.with-rail .rail > button { height: 36px; gap: 10px; padding-inline: 10px; border-radius: 10px; font-size: 14px; font-weight: 500; transition: background-color 150ms ease, color 150ms ease; }
  .shell.with-rail .rail > button:hover { background: var(--tint-fill); }
  .shell.with-rail .rail > button.on { background: var(--tint-fill); color: var(--ink); font-weight: 600; }
  .shell.with-rail .rail .acct:hover { background: var(--tint-fill); }
  /* the toolbar: the brand is in the sidebar already; a native segmented control; plain icon buttons */
  .shell.with-rail .rtop .toprow > .brandslot:first-child, .shell.with-rail .rtop .toprow > .brandslot:first-child + .spacer { display: none; }
  /* every other page: the brand pill too, and a header with nothing left in it */
  .shell.with-rail .nav .navbrand { display: none; }
  .shell.with-rail .col > .nav:not(:has(button)):not(:has(.t)) { display: none; }
  .shell.with-rail .rtop .vseg, .shell.with-rail .pview .vseg { padding: 2px; background: var(--wash); border-color: transparent; box-shadow: none; }
  .shell.with-rail .rtop .vseg button, .shell.with-rail .pview .vseg button { height: 28px; padding-inline: 14px; font-size: 13px; font-weight: 500; }
  .shell.with-rail .rtop .vseg button.on, .shell.with-rail .pview .vseg button.on { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(20,20,19,0.12), 0 0 0 0.5px rgba(20,20,19,0.08); }
  .shell.with-rail .rtop .toprow .circle.glass { width: 34px; height: 34px; background: transparent; border-color: transparent; box-shadow: none; color: var(--text2); transition: background-color 150ms ease, color 150ms ease; }
  .shell.with-rail .rtop .toprow .circle.glass:hover { background: var(--tint-fill); color: var(--ink); }
  /* the days: dates, not tiles */
}
@media (min-width: 1280px) { .shell.with-rail { --col: 560px; } .shell.with-rail .col:has(> .reader) { --col: 720px; } }

/* ---------- settings, live: plain words, coloured tiles, real marks (owner, 7 Oct 2026) ---------- */
.brandtile .ic.l { width: 20px; height: 20px; }
.logotile .logo { width: 20px; height: 20px; color: #fff; }
/* a black mark tile keeps a faint edge on a dark panel */
:root[data-theme="dark"] .logotile { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logotile { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); } }
.brandtile.s56 { width: 56px; height: 56px; border-radius: 16px; }
.brandtile.s56 .logo { width: 30px; height: 30px; }
.setcard { display: flex; align-items: center; gap: 12px; }
.setcard .av { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--page); font-size: 15px; font-weight: 700; }
.setcard .tx { display: flex; flex-direction: column; min-width: 0; }
.setcard b { font-size: 16px; font-weight: 600; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.setcard span span, .setcard .tx > span { font-size: 13px; color: var(--graphite); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pillcta { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--tint-fill); color: var(--ink); font-size: 13px; font-weight: 600; }
.assist-hero { display: flex; align-items: center; gap: 14px; }
.assist-hero p { margin: 0; font-size: 14px; color: var(--graphite); }
.steps { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--ink); }
.steps li::marker { font-weight: 700; }
/* the step-by-step ChatGPT guide: number, the step, why, and what to tap or copy in ChatGPT's own words */
.guide { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; }
.guide li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); }
.guide li:first-child { border-top: 0; }
.guide .gnum { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--marker); color: var(--on-marker); font-size: 13px; font-weight: 700; }
.guide .gtx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.guide .gtx b { font-size: 15px; line-height: 1.3; }
.guide .gtx small { font-size: 13px; color: var(--graphite); line-height: 1.4; }
.guide a { text-decoration: none; }
.guide .gdo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.guide .ui-label { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--tint-fill); border: 1px solid var(--hair); font: 600 12.5px/1 var(--font-ui, inherit); white-space: nowrap; }
.guide .copyval { min-width: 0; max-width: 100%; padding: 5px 9px; border-radius: 8px; background: var(--tint-fill); font: 600 12.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }

/* ---------- below the Top 3: posts to swipe, or the grid (owner, 7 Oct 2026) ---------- */
.pview { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 2px 0; }
.pview-lab { min-width: 0; color: var(--graphite); font-size: 13px; font-weight: 600; }
.pview + .focus-grid { margin-top: 18px; }
/* A row bleeds to the screen's edges and scrolls inside itself; its padding keeps the frame's glow and the shadows whole. */
.prow-wrap { position: relative; margin-inline: -16px; overflow-x: clip; }
.prow { --pc-h: clamp(220px, calc(70svh - 170px), calc((min(100vw, var(--col)) - 32px) * 1.075)); display: flex; gap: 10px; margin-block: -16px -24px; padding: 16px 16px 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
.prow::-webkit-scrollbar { display: none; }
/* Media cards share one picture height, so a row reads level; 4:5 at 86% of the column, never past about 70% of the screen. */
.pcard { position: relative; flex: none; display: flex; flex-direction: column; width: calc(var(--pc-h) * 0.8); padding-bottom: 12px; overflow: hidden; scroll-snap-align: start; border-radius: var(--r-card); border: 1px solid var(--rule); background: var(--panel); box-shadow: var(--shadow); text-align: left; }
.pcard.tall { width: calc(var(--pc-h) * 0.5625); }
.pcard.ptext { width: min(calc((min(100vw, var(--col)) - 32px) * 0.86), 340px); }
.pc-top { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px; }
.pc-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 26px; padding: 0 2px; color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pc-who > span { overflow: hidden; text-overflow: ellipsis; }
/* 25 Oct 2026, decided under KB 49 (KB 33): a mention names its creator, then their handle in the quiet text colour. */
.pc-who .pc-handle { font-size: 12px; font-weight: 400; color: var(--text2); }
.pc-when { flex: none; margin-left: auto; padding-right: 4px; color: var(--text3); font-size: 12px; font-weight: 500; white-space: nowrap; }
.pc-media { position: relative; display: block; flex: none; height: var(--pc-h); background: var(--tint-fill); }
.pc-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pcard.ad .pc-media { overflow: hidden; }
.pcard.ad .pc-media img { position: relative; object-fit: contain; }
.pcard.ad .pc-media .pc-fill { position: absolute; inset: 0; object-fit: cover; opacity: 0.55; filter: blur(16px) saturate(1.2); transform: scale(1.2); }  /* the creative whole, on a blur of itself */
.pc-media .gicon { position: absolute; top: 9px; right: 9px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.pc-nums { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px 0; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pc-n { display: inline-flex; align-items: center; gap: 4px; }
.pc-n .ic { color: var(--graphite); }
.pc-nums .ghot, .pc-nums .gnew { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.2; }
.pc-nums .ghot { padding-left: 6px; background: var(--marker-soft); color: var(--ink); }
.pc-nums .gnew { background: var(--marker); color: var(--on-marker); font-size: 12px; }
.pc-cap { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 6px 12px 0; color: var(--ink); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.pc-src { display: flex; align-items: center; gap: 6px; padding: 0 12px; color: var(--graphite); font-size: 12px; font-weight: 600; }
.pc-head { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; margin: 8px 12px 0; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.38; overflow-wrap: anywhere; }
.pcard.ptext .pc-nums { padding-top: 12px; }
/* High priority (above their usual, or named by a thing past the Top 3): a marker ring with a soft glow, in both themes. */
.pcard.pri, .gtile.pri { box-shadow: 0 0 0 2.5px var(--marker); }
/* The arrows only where a pointer hovers: a phone swipes, a trackpad scrolls, a mouse clicks these. */
.prow-wrap .prow-arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .prow-wrap .prow-arrow.circle { position: absolute; z-index: 2; top: 50%; display: inline-flex; margin-top: -15px; transition: opacity 160ms ease, transform 160ms var(--ease-out); }
  .prow-wrap .prow-arrow.prev { left: 10px; }
  .prow-wrap .prow-arrow.next { right: 10px; }
  .prow-wrap .prow-arrow:disabled { opacity: 0; pointer-events: none; }
}
@media print {
  html[data-live="true"] .prow { flex-wrap: wrap; overflow: visible; margin-block: 0; padding: 0 16px; }
  html[data-live="true"] .prow-arrow, html[data-live="true"] .pview { display: none !important; }
}

/* ---------- Ask about this report: the bubble and the chat (owner, 8 Oct 2026) ---------- */
/* The mark (docs/kb/24-identity.md): the charcoal iris on the marker, the avatar's tile; never a second colour inside. */
.mbmark { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--marker); color: var(--on-marker); }
.mbmark.xs { width: 22px; height: 22px; border-radius: 7px; }
.mbmark svg { width: 64%; height: 64%; display: block; }
.mbmark.sm { width: 28px; height: 28px; border-radius: 9px; }
.mbmark.lg { width: 48px; height: 48px; border-radius: 14px; }
.askfab { position: fixed; z-index: 31; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 6px;
  height: 54px; padding: 0 20px 0 10px; border-radius: 999px; background: var(--marker); color: var(--on-marker);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 12px 28px rgba(60,66,0,0.22), 0 2px 6px rgba(20,20,19,0.14); transition: transform 160ms var(--ease-out); }
.askfab:active { transform: scale(0.96); }
.askfab .mbmark { background: transparent; width: 36px; height: 36px; }
.askfab .mbmark svg { width: 78%; height: 78%; }
.askfab-t { font: 600 15px/1 var(--font-ui); letter-spacing: -0.01em; }
@media (min-width: 980px) { .askfab { right: 28px; bottom: 28px; } }

.sheet[data-name="chat"] { padding: 0; gap: 0; height: 88vh; height: 88dvh; overflow: hidden; }
.sheet[data-name="chat"] .handle { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); margin: 0; }
.chathead { display: flex; align-items: center; gap: 12px; padding: 22px 18px 14px; border-bottom: 1px solid var(--hair); }
.chathead .ch-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chathead .ch-t b { font: 600 17px/1.2 var(--font-ui); letter-spacing: -0.01em; }
.chathead .ch-t span { font-size: 12px; color: var(--graphite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatlog { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 12px; }
.cq { align-self: flex-end; max-width: 84%; padding: 10px 14px; border-radius: 20px 20px 6px 20px; background: var(--done-bg); color: var(--done-fg); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.ca { display: flex; align-items: flex-end; gap: 8px; max-width: 94%; }
.ca-body { padding: 11px 14px; border-radius: 20px 20px 20px 6px; background: var(--tint-fill); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.ca-body .typing { padding: 4px 2px; }
.ca.err .ca-body { color: var(--alert); }
.ca-src { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 9px; }
.ca-src .lchip { background: var(--sheet); }
/* A change the assistant proposed: the owner's Yes applies it (screens-reader.js decide). */
.ca-change { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 11px 12px; border-radius: 14px; background: var(--sheet); }
.ca-change b { font-size: 14px; font-weight: 600; }
.ca-change .btnrow { display: flex; gap: 8px; padding-top: 4px; }
.ca-change .btnrow .btn { flex: 0 0 auto; width: auto; min-height: 40px; padding: 0 14px; font-size: 14px; }
.ca-change.done { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; }
.chatsugg { flex-wrap: wrap; gap: 8px; padding: 0 16px 10px; }
.chatform { padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hair); }
.chatfoot { padding-top: 7px; font-size: 11px; color: var(--graphite); text-align: center; }
.chatfoot .linkbtn { font-size: 11px; }
@media (min-width: 980px) {
  .sheet[data-name="chat"] { left: auto; right: 28px; top: auto; bottom: 96px; width: 400px; height: min(640px, 80vh); border-radius: 26px; transform: translateY(14px) scale(0.98); transform-origin: bottom right; }
  .sheet[data-name="chat"].open { transform: none; opacity: 1; }
}

/* ---------- A shared link: Log in, Sign up, and the days that belong to the team ---------- */
.loginpill { height: 40px; padding-inline: 12px; }
.day.locked { position: relative; opacity: 0.7; }
.day .daylock { position: absolute; top: 5px; right: 6px; color: var(--graphite); line-height: 0; }
.lockday { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 8px 8px 4px; }
.lockday h2 { font-size: 21px; } .lockday p { color: var(--graphite); font-size: 14px; line-height: 1.45; }
.sampleban { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 10px 0 4px; padding: 14px; border-radius: var(--r-card); background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.sampleban .sb-t { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sampleban .sb-t b { font-size: 15px; } .sampleban .sb-t span { font-size: 13px; color: var(--graphite); }
.sample-free { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--graphite); }
.sampleban .btn { flex: 1 1 100%; }
@media (min-width: 720px) { .sampleban .btn { flex: 0 0 auto; width: auto; } }
.pubjoin.sample .btnrow { flex-direction: column; }
.pubjoin { display: flex; flex-direction: column; gap: 12px; margin: 26px 0 84px; padding: 18px; border-radius: var(--r-card); background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.pubjoin .pj-t { display: flex; flex-direction: column; gap: 4px; }
.pubjoin .pj-t b { font: 600 18px/1.25 var(--font-ui); letter-spacing: -0.01em; }
.pubjoin .pj-t span { color: var(--graphite); font-size: 14px; line-height: 1.45; }
.sharepic { display: flex; align-items: center; gap: 6px; margin-top: -4px; }

/* The company and competitor type-ahead (js/places.js): places from our own index, the area and kind under each name. */
.pl-host { position: relative; }
.pl-ac { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; margin: 0; padding: 6px; list-style: none; background: var(--panel, var(--sheet)); border: 1px solid var(--rule, var(--line)); border-radius: 12px; box-shadow: var(--shadow); text-align: left; max-height: 320px; overflow-y: auto; }
.pl-ac li[data-i] { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.pl-ac li[data-i] b { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.pl-ac li[data-i] span { font-size: 12.5px; color: var(--graphite, var(--muted)); }
.pl-ac li[aria-selected="true"] { background: var(--wash, var(--tint-fill)); }
.pl-ac .pl-src { padding: 6px 12px 2px; font-size: 11px; color: var(--graphite, var(--muted)); }

/* ---------- the morning layout (owner, 11 Oct 2026; docs/kb/24-identity.md, section 7 as amended) ----------
   Apple News Today and The Economist's Espresso for the page, Instagram for the row of faces: a large day title, who
   moved, the verdict and the lead story, then sections that are a title on an ink rule. Nothing pins or stacks; the
   folders, their tab row and the binder edge are gone (they read as generated chrome and let old sections show through). */
/* The kind colours: one pastel per kind, fixed everywhere, read by the tab, the tile and the notched chip. */
.k-top { --kc: var(--k-top); } .k-means { --kc: var(--k-means); } .k-offer { --kc: var(--k-offer); } .k-story { --kc: var(--k-story); } .k-ad { --kc: var(--k-ad); }
.k-press { --kc: var(--k-press); } .k-collab { --kc: var(--k-collab); } .k-mention { --kc: var(--k-mention); } .k-post { --kc: var(--k-post); } .k-page { --kc: var(--k-page); } .k-mint { --kc: var(--p-mint); }

.msec { gap: 14px; margin-top: 14px; }
.msec > .sh { display: flex; align-items: baseline; gap: 10px; padding-top: 14px; border-top: 1px solid var(--ink); }
.msec > .sh h2 { margin: 0; font: 700 21px/1.2 var(--font-ui); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.msec > .sh .sh-c { margin-left: auto; color: var(--text2); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.msec > .sbody { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.msec.top { margin-top: 0; gap: 0; }
.msec.more { margin-top: 26px; gap: 10px; }

/* A face (.pfp; .face is a button's label): the account's picture, or initials when there is none. */
.pfp { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: var(--wash); color: var(--text2); font-size: 10px; font-weight: 700; line-height: 1; }
img.pfp { outline: 1px solid rgba(0, 0, 0, 0.06); outline-offset: -1px; }
.pfp.own.init { background: var(--ember-soft); color: var(--ember); font-size: 7px; font-weight: 600; }
.pfp.own.init.m { font-size: 13px; }
.pfp.own.init.l { font-size: 14px; }
.pfp.own.init.xl { font-size: 21px; }
.pfp.m { width: 36px; height: 36px; font-size: 14px; }
.pfp.l { width: 40px; height: 40px; font-size: 16px; }
.pfp.xl { width: 58px; height: 58px; font-size: 22px; }
.who .pfp { width: 18px; height: 18px; font-size: 9px; }

/* Who moved: a row of faces, most items first; a ring while there is something to play, grey once seen. */
.tray { display: flex; gap: 12px; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 4px; scroll-padding-inline: 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
.tray::-webkit-scrollbar { display: none; }
.tr { flex: none; width: 70px; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; color: var(--ink); text-align: center; cursor: pointer; }
.tr-ring { display: inline-flex; padding: 2.5px; border-radius: 50%; background: var(--ring-aurora); }
.tr-ring.seen { background: var(--rule); }
.tr-ring > .pfp { border: 2.5px solid var(--page); outline: 0; }
.tr b { margin-top: 6px; max-width: 70px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 600; }
.tr > span:last-child { font-size: 11.5px; color: var(--text3); }
.tr:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 14px; }
.tr.quiet { opacity: 0.45; cursor: default; }
.tr.quiet .pfp { filter: grayscale(1); }

/* The verdict, then the lead story with the only big picture, then stories 2 and 3 as rows with a picture at the side. */
.verdict { margin: 6px 0 0; font: 500 27px/1.22 var(--font-display); letter-spacing: -0.015em; color: var(--ink); text-wrap: pretty; }
.sec h1.verdict { font-size: 27px; }
.vsub { margin: 10px 0 0; color: var(--text2); font-size: 15px; }
.lstory { display: flex; flex-direction: column; margin-top: 22px; }
.ls-pic { position: relative; display: block; width: 100%; max-width: 100%; aspect-ratio: 3 / 2; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--wash); cursor: pointer; }
.ls-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ls-pic .stile { position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14); }
.ls-pic .stile .ic { width: 14px; height: 14px; }
@media (min-width: 980px) { .ls-pic { aspect-ratio: 16 / 9; } .lt-day { font-size: 44px; } .verdict { font-size: 32px; } .ls-head { font-size: 26px; } }
.ls-line { display: flex; align-items: center; gap: 8px; margin-top: 14px; min-width: 0; }
.ls-line .mini-share { margin-left: auto; flex: none; }
.ts-who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 14px; color: var(--ink); }
.ts-who b { font-weight: 600; white-space: nowrap; }
.ts-meta { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text3); font-size: 13px; }
.ts-n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ls-text { display: block; width: 100%; margin: 8px 0 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.ls-head { margin: 0; font: 650 23px/1.22 var(--font-ui); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.ls-sub { margin: 6px 0 0; color: var(--text2); font-size: 15.5px; line-height: 1.45; }
.ls-sub b, .tsr-sub b { color: var(--ink); }
.ts-thought { margin: 10px 0 0; padding-left: 12px; border-left: 3px solid var(--marker); color: var(--ink); font-size: 14.5px; line-height: 1.42; }
.tsrow { display: flex; flex-direction: column; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.tsr { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.tsr-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tsr-head { margin-top: 4px; color: var(--ink); font-size: 18px; font-weight: 650; line-height: 1.26; letter-spacing: -0.01em; }
.tsr-sub { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--text2); font-size: 14.5px; line-height: 1.42; }
.tsr-pic { flex: none; width: 86px; height: 86px; margin-top: 30px; border-radius: 12px; object-fit: cover; background: var(--wash); }
.msec.top > .focus-pill { margin-top: 18px; }

/* What it means for you: each move with its marker check; then the offers, yours beside theirs. */
.moves { display: flex; flex-direction: column; }
.mvm { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.mvm:first-child { padding-top: 2px; }
.mvm:last-child { padding-bottom: 0; border-bottom: 0; }
.mvm .chk { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--marker); color: var(--on-marker); }
.mvm .tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mvm b { color: var(--ink); font-size: 16px; font-weight: 600; }
.mvm .tx > span { color: var(--text2); font-size: 14.5px; line-height: 1.42; }
.mvm .mvm-th { color: var(--ink); }
.offl { display: flex; flex-direction: column; }
.offr { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; color: inherit; text-align: left; }
button.offr { cursor: pointer; }
.offr:first-child { padding-top: 2px; }
.offr:last-child { border-bottom: 0; }
.offr .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.offr .tx b { color: var(--ink); font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.offr .tx span { color: var(--text2); font-size: 13.5px; }
.offr.ended { opacity: 0.55; }

/* The end of the report: a word that this was all, and what to do with it (owner, 9 Oct 2026), set on the left. */
.reader > .closing { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 34px 0 8px; text-align: left; }
.closing .mbmark { margin-bottom: 4px; }
.closing .cl-title { margin: 0; font: 500 24px/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.closing .cl-line { margin: 0; color: var(--text2); font-size: 15px; }
.closing .cl-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.closing .cl-acts .pill { height: 40px; padding-inline: 16px; }

/* ---------- colour at the edges ---------- */
.ktile { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--kc, var(--wash)); color: var(--ink); flex-shrink: 0; }
.ktile.s40 { width: 40px; height: 40px; border-radius: 12px; } .ktile.s40 .ic { width: 18px; height: 18px; }
.ktile.s34 { width: 34px; height: 34px; border-radius: 10px; } .ktile.s34 .ic { width: 16px; height: 16px; }
.kchip { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; margin-top: 4px; border-radius: 0 6px 6px 6px; background: var(--kc, var(--wash)); color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.kchip::before { content: ""; position: absolute; left: 0; top: -4px; width: 14px; height: 4px; border-radius: 3px 3px 0 0; background: var(--kc, var(--wash)); }
.schip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0; background: var(--wash); color: var(--text2); }
.schip.new { background: var(--marker); color: var(--on-marker); } .schip.live { background: var(--marker-soft); color: var(--ink); } .schip.you { background: var(--pen-pink); color: #202123; }
.schip.done { background: var(--pen-green); color: #202123; } .schip.off { background: transparent; border: 1px solid var(--rule); color: var(--text3); }
/* The source tile and the mention: the network's glyph on a white tile and the name in violet, inline with the words. */
.stile { display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; border-radius: 0.36em; background: var(--panel); border: 1px solid var(--rule); color: var(--ink); vertical-align: -0.3em; flex-shrink: 0; }
.stile .ic { width: 0.8em; height: 0.8em; }
.stile.you { background: var(--marker); border-color: transparent; color: var(--on-marker); }
.stile.you b { color: var(--white); font-size: 0.8em; font-weight: 700; line-height: 1; }
.mention { display: inline; white-space: nowrap; }
.mention .stile { margin-right: 0.28em; }
.mention .mname { color: var(--violet); font-weight: 600; }
/* On a picture: the source tile top left and the badge top right, nothing else. */
.pc-media .stile, .gtile .stile { position: absolute; left: 9px; top: 9px; z-index: 1; width: 24px; height: 24px; border-radius: 7px; box-shadow: 0 1px 2px rgba(0,0,0,0.14); }
.pc-media .stile .ic, .gtile .stile .ic { width: 14px; height: 14px; }
.pc-media .gnew { position: absolute; top: 9px; right: 9px; z-index: 1; display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; background: var(--marker); color: var(--on-marker); font-size: 12px; font-weight: 700; line-height: 1.2; }
.gtile .stile ~ .gtags { left: 40px; }
/* Story rings: 3 px of colour and a 3 px white gap. Aurora for a new story, the marker when it mentions you, grey once seen. */
.ring-new, .ring-you, .ring-seen { --ring: var(--ring-aurora); }
.ring-you { --ring: var(--marker); } .ring-seen { --ring: var(--rule); }
.pcard.ring-new .pc-media, .pcard.ring-you .pc-media, .pcard.ring-seen .pc-media { padding: 3px; background: var(--ring); border-radius: 16px; }
.pcard.ring-new .pc-media img, .pcard.ring-you .pc-media img, .pcard.ring-seen .pc-media img { box-sizing: border-box; border: 3px solid var(--panel); border-radius: 13px; }
.gtile.ring-new, .gtile.ring-you, .gtile.ring-seen { padding: 3px; background: var(--ring); }
.gtile.ring-new img, .gtile.ring-you img, .gtile.ring-seen img { box-sizing: border-box; border: 3px solid var(--panel); border-radius: 11px; }
.gtile.ring-new::after, .gtile.ring-you::after, .gtile.ring-seen::after { inset: auto 6px 6px 6px; border-radius: 0 0 11px 11px; }
.pic.ring-new, .pic.ring-you, .pic.ring-seen { padding: 3px; background: var(--ring); }
.pic.ring-new img, .pic.ring-you img, .pic.ring-seen img { box-sizing: border-box; border: 3px solid var(--panel); border-radius: 13px; }
/* The foil band: 7 px along the top edge of the one card that matters on a screen. */
.foil { position: relative; overflow: hidden; border-top: 0; }
.foil::before { content: ""; display: block; height: 7px; background: var(--foil); }
.foil.foil-pink::before { background: var(--foil-pink); }
.panel.foil::before { margin: 0 -16px 2px; }
.panel.foil.pad::before { margin: 0 -16px 10px; }
.nut.foil { padding-top: 0; }
.nut.foil::before { margin: 0 -18px 14px; }
/* One dark card a screen, for people and roles. */
.panel.dark-card { background: var(--dark); color: var(--dark-text); border-color: transparent; }
.dark-card .plabel, .dark-card .t2, .dark-card .small, .dark-card .status { color: var(--dark-text2); }
.dark-card .plabel .r { color: var(--dark-text); }
.dark-card .list > * + * { border-top-color: rgba(255,255,255,0.09); }
.dark-card .role { background: var(--role-bg); color: var(--role-fg); }
.dark-card .avatar { background: var(--dark-2) !important; color: var(--dark-text); }
.dark-card .circle.glass { background: var(--dark-2); border-color: transparent; color: var(--dark-text); }
.dark-card .status.ok i { background: var(--role-fg); }

/* ---------- the pens (the skim system): filled shapes behind or under the words, never the model's ---------- */
.pen-swipe, .pen-you { color: #202123; padding: 0 0.12em; margin: 0 -0.12em; background-image: var(--pb); background-size: 100% 100%; background-repeat: no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pen-two, .pen-one { position: relative; white-space: nowrap; }
.pen-two::after, .pen-one::after { content: ""; position: absolute; left: -0.04em; right: -0.04em; bottom: -0.3em; height: 0.34em; background: var(--pen-ink); -webkit-mask: var(--pm) 0 0 / 100% 100% no-repeat; mask: var(--pm) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.pen-one::after { height: 0.16em; bottom: -0.2em; }
.pen-bracket { position: relative; padding-left: 18px; }
.pen-bracket::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--marker); -webkit-mask: var(--pm) 0 0 / 100% 100% no-repeat; mask: var(--pm) 0 0 / 100% 100% no-repeat; }
.pen-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: var(--marker); color: var(--on-marker); flex-shrink: 0; vertical-align: -5px; margin-right: 6px; }
.pen-check.done { background: var(--pen-green); }
.row .mv .pen-check { width: 18px; height: 18px; vertical-align: -4px; margin-right: 5px; }

/* A shared news item reads as the article (owner, 9 Oct 2026): the publisher's cover, the publisher and the day, the
   article's own headline and standfirst, and Read the article. */
.pubarticle { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.pubarticle img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--wash); }
.pubarticle .pa-tx { display: flex; flex-direction: column; gap: 6px; padding: 0 2px 4px; }
.pubarticle .pa-tx b { font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.pubarticle .pa-tx span:not(.t2) { font-size: 14.5px; line-height: 1.5; color: var(--text2); }
.pubarticle .btn { margin-top: 6px; }

/* ---------- 10 Oct 2026, the owner's phone review in dark mode ---------- */
.reader > .pubjoin { position: relative; z-index: 21; }
/* Ask in the bar on a shared report: the marker place beside PDF. */
.bar .bar-ask { background: var(--marker); color: var(--on-marker); }
.bar .bar-ask:hover { background: var(--marker); filter: brightness(0.97); }
.bar .bar-ask .mbmark { width: 22px; height: 22px; background: transparent; }
.bar .bar-ask .mbmark svg { width: 100%; height: 100%; }
/* A news or link card with its picture: the cover across the top, then the source and the headline. */
.pcard.plink .pc-media.wide { height: auto; aspect-ratio: 16 / 9; }
.pcard.plink .pc-media.wide img { width: 100%; height: 100%; object-fit: cover; }

/* Who posted (owner, 11 Oct 2026): the accounts that posted first, then the quiet ones in a quieter ink. */
.rollr.quiet b { color: var(--text2); font-weight: 600; }
.rollr.quiet .pfp { opacity: .55; }  /* the account picture's class is pfp; .face is a button's label */
.rollm { margin: 2px 2px 0; color: var(--text2); font-size: 13.5px; line-height: 1.45; }

.iv-pubmore .pubjoin { margin:20px 0 24px; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); box-shadow:none; color:#fff; }
.iv-pubmore .pubjoin .pj-t span { color:rgba(255,255,255,.7); }
.iv-pubmore .pubjoin .btn:not(.tint) { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); color:#fff; box-shadow:none; }
/* ---------- the new sources (KB 29; Paper "New sources, 11 Oct 2026"), in the morning layout (KB 24 section 7, 11 Oct) ---------- */
/* Snapchat's tile is its own yellow, TikTok's its black; a seen chip is grey. */
.stile.snap { background: #FFFC00; border-color: transparent; color: #202123; }
.stile.tok { background: #141414; border-color: transparent; color: #FFFFFF; }
.stile.yt { background: #FF0000; border-color: transparent; color: #FFFFFF; }
.schip.seen { background: var(--wash); color: var(--text2); }
/* A source's glyph in its own colour (js/sources.js tile), small: the network's colour only at a row's end. */
.srctile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; box-sizing: border-box; }
.srctile.line { border: 1px solid var(--rule); }
.srctile.s20 { width: 20px; height: 20px; border-radius: 6px; } .srctile.s28 { width: 28px; height: 28px; border-radius: 8px; } .srctile.s34 { width: 34px; height: 34px; border-radius: 9px; }
.srctile .ic { width: 16px; height: 16px; } .srctile.s20 .ic { width: 12px; height: 12px; } .srctile .logo { width: 16px; height: 16px; } .srctile.s20 .logo { width: 12px; height: 12px; }
.srctile b { font: 700 12px/1 var(--font-ui); } .srctile.s20 b { font-size: 11px; font-weight: 800; } .srctile.s34 b { font-size: 18px; font-weight: 800; }
.srctile .st-dot { width: 14px; height: 14px; border-radius: 999px; border: 3px solid #FFFFFF; box-shadow: 0 0 0 1px var(--rule); box-sizing: border-box; }
.srctile.s20 .st-dot { width: 10px; height: 10px; border-width: 2px; }
/* The notice above the verdict: an ink edge, never red. */
.notice { display: flex; flex-direction: column; gap: 6px; width: 100%; margin: 4px 0 14px; padding: 12px 14px; border: 1px solid var(--rule); border-left: 4px solid var(--ink); border-radius: 14px; background: var(--panel); color: var(--ink); text-align: left; cursor: pointer; }
.notice .nt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.notice .nt-kind { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/18px var(--font-ui); }
.notice .nt-kind .ic { width: 14px; height: 14px; }
.notice .nt-where { color: var(--text3); font: 500 12.5px/16px var(--font-ui); white-space: nowrap; }
.notice .nt-head { font: 600 15.5px/21px var(--font-ui); }
.notice .nt-sub { font: 400 13.5px/18px var(--font-ui); color: var(--text2); }
/* Rows in the offers' own style: the face, the line, then the meta, the reason, the glyph and the chip. */
.offr .tx .ns-meta, .ns-meta { color: var(--text2); font: 400 13.5px/18px var(--font-ui); }
.offr .tx .ns-sub, .ns-sub { color: var(--text3); font: 400 13px/17px var(--font-ui); }
.offr .tx b strong { font-weight: 700; } .offr .tx b i { font-style: normal; font-weight: 500; color: var(--text3); }
.offr > .srctile { margin-left: 2px; }
.offr.ns-quiet .tx b { font-size: 14.5px; font-weight: 600; }
.ns-rows { margin-top: 2px; border-top: 1px solid var(--rule); }
.ns-rows > .offr:first-child { padding-top: 11px; }
.ns-map { position: relative; flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--wash); display: flex; align-items: center; justify-content: center; }
.ns-map .m1 { position: absolute; left: -8px; top: 20px; width: 72px; height: 6px; background: var(--panel); transform: rotate(-24deg); transform-origin: 0 0; }
.ns-map .m2 { position: absolute; left: 16px; top: -6px; width: 5px; height: 80px; background: var(--panel); transform: rotate(12deg); transform-origin: 0 0; }
.ns-map .pin { position: absolute; left: 18px; top: 17px; width: 16px; height: 16px; border-radius: 999px; background: #D9442F; border: 3px solid #FFFFFF; box-sizing: border-box; box-shadow: 0 2px 6px rgba(20,20,25,0.18); }
.ns-map.shut .pin { background: var(--text3); }
.ns-map .m-ic { position: relative; display: inline-flex; width: 26px; height: 26px; border-radius: 999px; background: var(--panel); align-items: center; justify-content: center; }
.ns-note { display: flex; align-items: center; gap: 6px; margin: 0; font: 400 13px/17px var(--font-ui); color: var(--text3); }
.ns-big { margin: 0; font: 600 19px/25px var(--font-ui); color: var(--ink); }
/* The week's ratings as a table: the face and the name, the stars, the computed change, the new reviews. */
.ratings { display: flex; flex-direction: column; }
.offl + .ratings { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--rule); }
.rt-row { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--ink); text-align: left; cursor: pointer; }
.rt-row:last-child { border-bottom: 0; }
.rt-row.rt-head { min-height: 26px; border-bottom: 0; cursor: default; color: var(--text3); font: 500 12.5px/16px var(--font-ui); }
.rt-row > :first-child { flex: 1; min-width: 0; padding-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-row > :nth-child(2) { flex: none; width: 60px; } .rt-row > :nth-child(3) { flex: none; width: 58px; } .rt-row > :nth-child(4) { flex: none; width: 40px; text-align: right; }
.rt-name { display: inline-flex; align-items: center; gap: 8px; font: 600 14.5px/19px var(--font-ui); }
.rt-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-stars { font: 700 14.5px/19px var(--font-ui); font-variant-numeric: tabular-nums; }
.rt-wk.quiet { font: 500 12.5px/16px var(--font-ui); color: var(--text3); }
.rt-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--wash); color: #202123; font: 600 12.5px/16px var(--font-ui); font-variant-numeric: tabular-nums; }
.rt-chip.up { background: var(--marker-soft); }
.rt-new { font: 600 14.5px/19px var(--font-ui); font-variant-numeric: tabular-nums; }
/* A name's newest reviews, quoted and translated. */
.rv-box { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--rule); }  /* sections sit on the page: a card of its own */
.rv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 600 14px/19px var(--font-ui); }
.rv-head .ns-meta { font-size: 12.5px; white-space: nowrap; }
.rv { display: flex; flex-direction: column; gap: 3px; padding-left: 10px; border-left: 2px solid var(--rule); }
.rv-t { margin: 0; font: 400 14.5px/20px var(--font-ui); color: var(--ink); }
.rv .ns-meta { font-size: 12.5px; }
.rv-sheet { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 8px; }
.rv-line { margin: 0; font: 700 16px/21px var(--font-ui); }
/* The weekly AI answer: you in pink only when you are the subject. */
.ns-answer { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--rule); }
.ns-answer p { margin: 0; font: 600 14.5px/20px var(--font-ui); color: var(--ink); }
.ns-you { padding: 0 4px; border-radius: 3px; background: var(--pen-pink); color: #202123; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Setup links and the customer's latest public posts use the report's card surface. */
/* A row that asks for a link is a block: the competitor row's 40 px picture column would squeeze the field to a word a line. */
.ob .ob-added.ob-anchor-row { display: block; }
.ob-anchor .ob-btn2, .ob-anchor .ob-icon { display: inline-flex; vertical-align: middle; }
.ob-anchor { width: 100%; min-width: 0; }
.ob-anchor > p { margin: 0 0 16px; }
.ob-anchor .field { margin-bottom: 12px; }
.ob-latest { margin-top: 24px; }
.ob-latest .ob-rival { gap: 12px; }
.ob-latest .thumb { width: 48px; height: 48px; border-radius: 50%; }
.ob-latest-post { display: block; width: 100%; margin-top: 16px; padding: 16px; }
.ob-latest-post > img { width: 100%; height: auto; border-radius: 8px; }
.ob-latest-post .pc-top { display: flex; justify-content: space-between; margin-top: 12px; }
.ob-latest-post svg, .ob-latest .ob-rival > svg { width: 24px; height: 24px; }
.ob-latest-post a { color: var(--ember, #B44744); }

/* A focused touch field stays in the visual viewport, including on tablet layouts. */
#sheet.sheet-keyboard { top: auto; bottom: var(--sheet-bottom) !important; max-height: var(--sheet-height) !important; transform: translateX(-50%); }
#sheet.sheet-keyboard:has(.ask-kit) { height: min(88dvh, var(--sheet-height)) !important; }
@media (min-width: 980px) { #sheet.sheet-keyboard[data-name="chat"] { transform: none; } }

/* Report the problem on a failure screen (owner, 26 Oct 2026): a quiet button that opens Feedback and help with Report a bug
   chosen (js/ui.js U.reportProblem). */
.report-problem { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 4px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); font: 500 15px/20px Manrope, "IBM Plex Sans Arabic", -apple-system, sans-serif; cursor: pointer; }
.report-problem:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.report-problem-row { padding: 4px 20px 0; }