/* ==========================================================================
   Truend Business inside the truend phone app — html.in-app (js/inapp.js)

   The app draws the tab bar, the You menu and sign-in natively; this page keeps only
   the screens. Nothing here applies on the website or the Windows/Mac apps.
   --app-bar is the room the app's floating tab bar takes at the bottom, measured by the app.
   ========================================================================== */

/* the app's own tab bar and You menu replace these */
html.in-app .mob-tabs,
html.in-app .burger,
html.in-app .sidebar { display: none !important; }
html.in-app body.nav-open::after { display: none; }

/* every screen clears the app's floating bar */
@media (max-width: 900px) {
  html.in-app .view { padding-bottom: calc(var(--app-bar) + 24px); }
  html.in-app .pos { padding-bottom: calc(var(--app-bar) + 72px); }
  html.in-app .paybar { bottom: var(--app-bar); }
  html.in-app #toasts { bottom: calc(var(--app-bar) + 12px); }
}

/* Smoothness: a phone's WebView redraws every blurred layer on each scroll frame, which is
   what made it feel heavy. Solid surfaces scroll at full speed. */
html.in-app * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.in-app .topbar, html.in-app .topbar.scrolled { background: var(--paper); }
html.in-app .modal, html.in-app .results, html.in-app .ntf, html.in-app .gs-drop { background: var(--surface-3); }
html.in-app .scrim { background: rgba(4, 4, 6, .62); }

/* an app, not a page: no tap flash, no rubber-band past the ends, no text-selection callouts
   on controls (fields stay selectable) */
html.in-app, html.in-app body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
html.in-app button, html.in-app .btn, html.in-app [data-act] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---- the screens on the phone (design audit, 28 Oct 2026) ---- */

/* one search per screen: the app's Stock, New bill and Invoices have their own, and a page opened
   over them (a report, buy-in, a device) is a pushed screen with no search bar of its own */
html.in-app .gs { display: none !important; }
/* a section heading's line and its first row's line drew two hairlines a few px apart */
html.in-app .secrow + .pick, html.in-app .pick:first-child { border-top: 0; }

/* the header: "+" repeats the Sell tab, and the language switch lives in the You menu */
html.in-app .topbar [data-act="lang.toggle"],
html.in-app .topbar [data-act="nav.go"][data-to="pos"] { display: none !important; }

/* Today: what a counter does next, first */
html.in-app .app-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
html.in-app .app-acts .btn { flex-direction: column; height: auto; min-height: 68px; padding: 12px 6px; gap: 6px; font-size: 13px; line-height: 1.2; white-space: normal; text-align: center; }
html.in-app .app-acts .btn svg { width: 20px; height: 20px; }

/* sales tiles as a 2 × 2 grid, not a strip that runs off the edge */
@media (max-width: 900px) {
  html.in-app .strip { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; overflow: visible !important; margin-right: 0 !important; padding-right: 0 !important; }
  html.in-app .strip > .kpi { min-width: 0 !important; width: auto !important; }
  html.in-app .strip > .kpi:last-child:nth-child(odd) { grid-column: span 2; }
}

/* New Bill: the camera is the screen; the small camera square next to the field goes */
html.in-app .app-scan { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; min-height: 56px; font-size: 16px; }
html.in-app .app-scan svg { width: 22px; height: 22px; }
html.in-app .view [data-act="pos.camera"].icon { display: none; }

/* Invoices: the CSV export is a computer task */
html.in-app [data-act="bills.export"] { display: none !important; }

/* Settings: a list of sections, each its own screen, with Save always in reach */
html.in-app .app-list { padding: 0; overflow: hidden; }
html.in-app .app-row { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; }
html.in-app .app-row + .app-row { border-top: 1px solid var(--line); }
html.in-app .app-row svg { width: 18px; height: 18px; color: var(--text-faint); flex: none; }
html.in-app .app-row:active { background: rgba(242, 240, 235, .05); }
html.in-app .app-back { margin: -4px 0 6px -8px; }
/* the back arrow on a page from the You menu sits where a device's or an invoice's does, title and all */
html.in-app .app-home { margin: 0 -10px 0 -8px; }
html.in-app .app-h { font-size: 22px; margin: 0 0 14px; }
html.in-app .view .card [data-act="set.save"] { display: none; }
html.in-app .app-save { position: sticky; bottom: calc(var(--app-bar) - 8px); z-index: 20; padding: 12px 0 4px; margin-top: 12px;
  background: linear-gradient(to bottom, transparent, var(--paper) 30%); }

/* ---- dark, like the truend app Business lives in (phone only) ----
   The app around it is Obsidian & Ember, so switching accounts changes the content, not the
   lights. The same tokens app.css is built on, in truend's dark materials; documents stay paper. */
html.in-app {
  --paper: #0B0B0D; --surface: #141416; --surface-2: #18181B; --surface-3: #1C1C1F; --surface-4: #232327;
  --line: rgba(242, 240, 235, .08); --line-2: rgba(242, 240, 235, .14); --line-3: rgba(242, 240, 235, .24);
  --ink: #F2F0EB; --text: #F2F0EB; --text-dim: rgba(242, 240, 235, .62); --text-faint: rgba(242, 240, 235, .42); --on-ink: #0C0C0E;
  --brass-deep: #E3C98F; --brass-fill: rgba(201, 165, 106, .14);
  --good: #4ADE80; --good-fill: rgba(74, 222, 128, .12); --danger: #F87171; --danger-fill: rgba(248, 113, 113, .12);
  --warn: #FBBF24; --warn-fill: rgba(251, 191, 36, .12); --info: #93C5FD; --info-fill: rgba(147, 197, 253, .12);
  --glass: #141416; --glass-hi: #1C1C1F; --rim: transparent;
  --e1: none; --e2: none; --e-card: none;
  --e3: 0 20px 44px -20px rgba(0, 0, 0, .7); --e4: 0 28px 64px -24px rgba(0, 0, 0, .8);
  color-scheme: dark;
}
html.in-app body { background: var(--paper) !important; color: var(--text); }
/* the action is bone with ink text, as in truend */
html.in-app .btn.primary, html.in-app .btn.dark { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
html.in-app .btn.primary:hover, html.in-app .btn.dark:hover { background: #FFFFFF; }
/* what prints is paper (Print and PDF draw from #print-root). On the phone's screen an invoice, voucher
   or receipt is shown in the app's own dark, like everything around it: only the print copy is light */
html.in-app #print-root, html.in-app #print-root .doc {
  --paper: #F6F5F2; --surface: #FFFFFF; --surface-2: #FBFAF8; --surface-3: #F0EEE9; --surface-4: #E8E5DE;
  --line: rgba(12, 12, 14, .09); --line-2: rgba(12, 12, 14, .16); --line-3: rgba(12, 12, 14, .26);
  --ink: #0C0C0E; --text: #0C0C0E; --text-dim: rgba(12, 12, 14, .60); --text-faint: rgba(12, 12, 14, .42); --on-ink: #F2F0EB;
  --brass-deep: #9A7838; color-scheme: light; color: var(--text);
}
/* the light or ink colours app.css sets directly instead of through tokens (found by a sweep of
   every background/colour/border literal); QR codes, barcode labels and sample bills stay paper */
html.in-app .chip.on, html.in-app .step.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); box-shadow: none; }
html.in-app .chip.on b { color: rgba(12, 12, 14, .62) !important; }
html.in-app .btn.primary, html.in-app .btn.dark { box-shadow: none; }
html.in-app .btn.primary .kbd, html.in-app .btn.dark .kbd, html.in-app .chip.on .kbd { background: rgba(12, 12, 14, .12); color: rgba(12, 12, 14, .7); }
html.in-app .rc-sum, html.in-app .tbl th { background: var(--surface-2); }
html.in-app .paybar { background: var(--surface) !important; box-shadow: 0 -1px 0 var(--line); }
html.in-app .su-choice.on, html.in-app .grade-c.on { background: var(--surface-3); }
html.in-app .su-choice:hover { border-color: var(--line-3); }
html.in-app .switch.on::after { background: var(--paper); }
html.in-app :focus-visible { outline-color: rgba(242, 240, 235, .5); }
/* fields read as fields on a dark card */
html.in-app .input, html.in-app .select, html.in-app textarea.input { background: var(--surface-3); border-color: var(--line-2); color: var(--text); }
html.in-app .input::placeholder { color: var(--text-faint); }
/* the receipt on screen: a graphite sheet on the dark page, not a white slip in a grey frame */
html.in-app #view .preview-wrap { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0; }
/* app.css draws the paper's rules in #000 and its small print in #333–#555: on the dark sheet, in bone */
html.in-app #view .doc, html.in-app #view .doc * { border-color: rgba(242, 240, 235, .55) !important; }
html.in-app #view .doc .t80-cut span, html.in-app #view .doc .a4-cut span { background: var(--surface) !important; }
/* on screen an A4 invoice is as long as what's on it: the sheet's full height (and the gap that pushes the terms to its foot) is for paper */
html.in-app #view .doc.a4 { min-height: 0 !important; }
html.in-app #view .doc.a4 .a4-terms { margin-top: 18px !important; }
html.in-app #view .doc .cap, html.in-app #view .doc .a4-addr, html.in-app #view .doc .a4-when, html.in-app #view .doc .a4-facts span,
html.in-app #view .doc .a4-n, html.in-app #view .doc .a4-sub, html.in-app #view .doc .a4-plate span, html.in-app #view .doc .a4-hsn th,
html.in-app #view .doc .a4-tt, html.in-app #view .doc .a4-sign, html.in-app #view .doc .a4-cut span, html.in-app #view .doc .a4-slip-t { color: var(--text-dim) !important; }
html.in-app #view .doc { background: var(--surface) !important; color: var(--text); border: .5px solid var(--line-2); box-shadow: none !important; border-radius: 18px; }

/* ==========================================================================
   truend's design language on Business's phone screens (Obsidian & Ember, as in the
   truend app's theme.ts and components/ui.tsx): warm ink ground with a faint brass lamp-light
   at the top, graphite cards washed top-to-bottom with a hairline edge and 22 px corners,
   pill buttons and chips (bone = the action), Outfit for titles and money, the system face
   for everything else, status words as plain text, never in coloured capsules.
   ========================================================================== */
html.in-app {
  --t-card: linear-gradient(180deg, #17171A, #101012);
  --t-high: #1C1C1F; --t-top: #232327;
  --t-hair: rgba(255, 255, 255, .07); --t-hair-2: rgba(255, 255, 255, .14);
  --t-r: 22px; --t-r-sm: 14px;
  --t-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Malayalam", sans-serif;
  --t-display: "Outfit", system-ui, sans-serif;
}
html.in-app body {
  font-family: var(--t-body); font-size: 15px; letter-spacing: 0;
  background: linear-gradient(180deg, rgba(201, 165, 106, .07), rgba(201, 165, 106, 0) 320px), var(--paper) !important;
  background-attachment: fixed !important;
}
html.in-app .input, html.in-app .select, html.in-app button, html.in-app textarea { font-family: var(--t-body); }
html.in-app .view { padding-left: 16px; padding-right: 16px; }
html.in-app .main, html.in-app .topbar, html.in-app .topbar.scrolled, html.in-app .subnav { background: transparent !important; box-shadow: none !important; border: 0 !important; }

/* header: a title in Outfit, the date or count under it */
html.in-app .topbar h1 { font-family: var(--t-display); font-weight: 800; font-size: 26px; letter-spacing: -.6px; line-height: 1.15; }
html.in-app .topbar .sub { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
html.in-app .app-h { font-family: var(--t-display); font-weight: 800; font-size: 24px; letter-spacing: -.5px; }

/* cards */
html.in-app .card, html.in-app .kpi, html.in-app .empty, html.in-app .last {
  background: var(--t-card) !important; border: .5px solid var(--t-hair) !important; border-radius: var(--t-r) !important; box-shadow: none !important; }
html.in-app .card .empty { background: transparent !important; border: 0 !important; }
html.in-app .card-h { border-bottom: 0 !important; padding: 16px 18px 6px; }
html.in-app .card-h h3, html.in-app .card h3 { font-family: var(--t-display); font-weight: 600; font-size: 16px; letter-spacing: -.2px; }
html.in-app .card-b { padding: 10px 18px 16px; }
html.in-app .card-b.flush { padding: 0; }

/* numbers: Outfit, tight, tabular */
html.in-app .kpi { padding: 16px 16px 14px !important; }
html.in-app .kpi .lbl { font-size: 13px; font-weight: 500; color: var(--text-dim); text-transform: none; letter-spacing: 0; }
html.in-app .kpi .val { font-family: var(--t-display); font-weight: 800; font-size: 26px; letter-spacing: -.6px; font-variant-numeric: tabular-nums; margin-top: 6px; }
html.in-app .kpi .foot { font-size: 12px; color: var(--text-faint); margin-top: 4px; line-height: 1.35; }
html.in-app .strip { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html.in-app .strip .kpi::before { display: none; }
html.in-app .amount-xl, html.in-app .amount-lg, html.in-app .amount-md, html.in-app .last-pr, html.in-app .wk-tot { font-family: var(--t-display); font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }

/* buttons: pills; bone is the action, graphite the rest */
html.in-app .btn { border-radius: 999px !important; min-height: 44px; padding: 0 18px; font-size: 15px; font-weight: 600; letter-spacing: .1px;
  background: var(--t-high); border: .5px solid var(--t-hair-2); color: var(--text); box-shadow: none !important; }
/* under the status bar: room for it at the top, and a scrim over it once the page scrolls (truend's Home does the same) */
html.in-app body { padding-top: var(--app-top, 0px); }
/* nothing may make the page wider than the phone: one long line used to widen the layout viewport,
   which then slid the whole page (and the status-bar scrim) out of place */
html.in-app, html.in-app body { overflow-x: clip; }
html.in-app .btn { max-width: 100%; }
html.in-app .btn.ghost.sm { white-space: normal; text-align: left; height: auto; line-height: 1.35; padding-top: 8px; padding-bottom: 8px; }
html.in-app .shell, html.in-app .main { min-height: calc(100vh - var(--app-top, 0px)); }
html.in-app body::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: var(--app-top, 0px); background: var(--paper);
  opacity: 0; transition: opacity .2s; z-index: 200; pointer-events: none; }
html.in-app.app-scrolled body::before { opacity: 1; }
html.in-app .modal { max-height: calc(100vh - var(--app-top, 0px) - 16px) !important; }
html.in-app .ntf { top: calc(var(--app-top, 0px) + 64px); }
/* a sheet's buttons stay clear of the phone's gesture bar */
html.in-app .modal-f { padding-bottom: calc(15px + var(--app-bottom, 0px)); }
/* the +91 field is one box: the number inside it draws no box of its own */
html.in-app .ph-in { border-radius: 14px; background: var(--t-high); }
html.in-app .ph-in .input { border: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
/* a device's action list stays a list: flat rows on hairlines, not pills (the pill above would bend their top lines) */
html.in-app .unit-acts .btn.block:not(.primary) { border-radius: 0 !important; min-height: 52px; padding: 0 2px; }
html.in-app .btn.sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
html.in-app .btn.lg { min-height: 54px; padding: 0 24px; font-size: 16px; }
html.in-app .btn.ghost { background: transparent; border-color: transparent; }
html.in-app .btn.primary, html.in-app .btn.dark { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--on-ink) !important; }
html.in-app .btn.danger { color: var(--danger); background: var(--t-high); }
html.in-app .btn.icon { width: 44px; padding: 0; }
html.in-app .btn:disabled, html.in-app .btn[disabled] { opacity: .38; }
html.in-app .btn.applied { border-color: var(--brass-line); color: var(--text); }

/* chips: pills, bone when on */
html.in-app .chip { border-radius: 999px !important; padding: 9px 16px; font-size: 13.5px; font-weight: 500; color: var(--text-dim);
  background: var(--t-high) !important; border: .5px solid var(--t-hair) !important; box-shadow: none !important; }
html.in-app .chip.on { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--on-ink) !important; font-weight: 600; }

/* fields: graphite, rounded, 16 px text so the phone never zooms */
html.in-app .input, html.in-app .select, html.in-app textarea.input {
  background: var(--t-high) !important; border: .5px solid var(--t-hair-2) !important; border-radius: var(--t-r-sm) !important;
  min-height: 50px; font-size: 16px; color: var(--text); box-shadow: none !important; }
html.in-app .input:focus, html.in-app .select:focus { border-color: rgba(242, 240, 235, .4) !important; }
html.in-app .field label { font-size: 13px; font-weight: 500; color: var(--text-dim); text-transform: none; letter-spacing: 0; }
/* fields in a sheet get air between them, so a field's hint reads as its own and not as the next one's label */
html.in-app .modal-b > .field, html.in-app .modal-b > .grid { margin-bottom: 14px; }
/* a sheet's title on its own line, the close button beside it, what it's about underneath */
html.in-app .modal-h { flex-wrap: wrap; row-gap: 2px; }
html.in-app .modal-h h2 { order: 1; }
html.in-app .modal-h .x { order: 2; }
html.in-app .modal-h > .small { order: 3; flex-basis: 100%; }
/* a sheet opened over one of the app's own screens (Stock, Today…): the app's screen shows behind it,
   not this page's version of it (the app makes the WebView see-through for these) */
html.in-app[data-route="dashboard"].sheet-up, html.in-app[data-route="inventory"].sheet-up,
html.in-app[data-route="bills"].sheet-up, html.in-app[data-route="pos"].sheet-up { background: transparent !important; }
html.in-app[data-route="dashboard"].sheet-up body, html.in-app[data-route="inventory"].sheet-up body,
html.in-app[data-route="bills"].sheet-up body, html.in-app[data-route="pos"].sheet-up body { background: transparent !important; }
html.in-app[data-route="dashboard"].sheet-up .shell, html.in-app[data-route="inventory"].sheet-up .shell,
html.in-app[data-route="bills"].sheet-up .shell, html.in-app[data-route="pos"].sheet-up .shell { visibility: hidden; }
/* searches: the truend search pill */
html.in-app .gs-in, html.in-app .searchbox, html.in-app .scan {
  background: var(--t-high) !important; border: .5px solid var(--t-hair) !important; border-radius: 999px !important; box-shadow: none !important; }
html.in-app .gs-in input, html.in-app .searchbox .input, html.in-app .scan .input { background: transparent !important; border: 0 !important; min-height: 48px; }

/* tabs inside a screen: truend's segmented pill (For sale · Sold) */
html.in-app .tabs { display: flex; gap: 4px; padding: 4px; border: 0 !important; border-radius: 999px; background: var(--t-high); margin: 14px 0; overflow-x: auto; }
html.in-app .tabs .tab { flex: 1 0 auto; text-align: center; border: 0 !important; border-radius: 999px; padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--text-dim); margin: 0; }
html.in-app .tabs .tab.on { background: var(--ink); color: var(--on-ink); font-weight: 600; }
html.in-app .tabs .tab.on .muted { color: rgba(12, 12, 14, .55); }
html.in-app .tabs .tab::after { display: none !important; }
html.in-app .seg { background: var(--t-high) !important; border: 0 !important; border-radius: 999px !important; padding: 4px; }
html.in-app .seg button { border-radius: 999px !important; }
html.in-app .seg button.on { background: var(--ink) !important; color: var(--on-ink) !important; }

/* status words are plain text, as in truend (never a tinted capsule); only a warning keeps its colour */
html.in-app .badge { background: none !important; border: 0 !important; padding: 0 !important; font-size: 12.5px; font-weight: 500; color: var(--text-dim); }
html.in-app .badge.red { color: var(--danger); }
html.in-app .upper, html.in-app .last-k { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px; font-weight: 600; color: var(--text-dim); }

/* lists and rows */
html.in-app .qrow, html.in-app .team-row, html.in-app .app-row { padding: 14px 18px; border-color: var(--t-hair) !important; }
/* inside a card's body the card already gives the side room: a person's row lines up with the card's other text */
html.in-app .card-b .team-row { padding-left: 0; padding-right: 0; }
html.in-app .qrow + .qrow, html.in-app .team-row + .team-row { border-top: .5px solid var(--t-hair); }
html.in-app .tbl td, html.in-app .tbl th { border-color: var(--t-hair) !important; }
html.in-app .tbl th { background: transparent !important; color: var(--text-faint); font-weight: 500; text-transform: none; letter-spacing: 0; }
/* a report wider than the phone scrolls sideways under its first column, which stays put so each row keeps its name */
html.in-app .tbl th, html.in-app .tbl td { padding-left: 8px; padding-right: 8px; white-space: nowrap; }
html.in-app .tbl th:first-child, html.in-app .tbl td:first-child { position: sticky; left: 0; z-index: 1; padding-left: 16px; background: #141416 !important; white-space: normal; min-width: 96px; max-width: 150px; }

/* empty states: a quiet graphite disc, an Outfit line, one sentence */
html.in-app .empty { padding: 36px 22px !important; }
html.in-app .empty .ic { width: 52px; height: 52px; border-radius: 50%; background: var(--t-top) !important; border: 0 !important; color: var(--text-dim); }
html.in-app .empty b { font-family: var(--t-display); font-weight: 600; font-size: 18px; letter-spacing: -.2px; }
html.in-app .empty .sub { color: var(--text-dim); font-size: 14px; line-height: 1.5; }

/* sheets and toasts */
html.in-app .modal { background: #141416 !important; border: .5px solid var(--t-hair-2) !important; border-radius: 28px 28px 0 0 !important; box-shadow: none !important; }
html.in-app .modal h2 { font-family: var(--t-display); font-weight: 600; font-size: 19px; letter-spacing: -.3px; }
html.in-app .toast { background: var(--ink) !important; color: var(--on-ink) !important; border-radius: 999px !important; box-shadow: none !important; }

/* Today's three actions: truend's quick-action tiles */
html.in-app .app-acts .btn { min-height: 88px; border-radius: 20px !important; align-items: flex-start; justify-content: space-between;
  padding: 14px !important; background: var(--t-card) !important; border: .5px solid var(--t-hair) !important; color: var(--text) !important; text-align: left; }
html.in-app .app-acts .btn.primary { background: var(--ink) !important; color: var(--on-ink) !important; }
html.in-app .app-acts .btn span { font-size: 14px; font-weight: 600; }

/* New Bill */
html.in-app .app-scan { border-radius: 999px !important; min-height: 56px; }
html.in-app .pos-right { background: transparent !important; border: 0 !important; }
html.in-app .rc-lines, html.in-app .rc-sum, html.in-app .rc-foot { border-color: var(--t-hair) !important; }
html.in-app .rc-sum .sumrow.big b, html.in-app .rc-sum .sumrow.big span:last-child { font-family: var(--t-display); font-weight: 800; letter-spacing: -.5px; }
html.in-app .paybar { background: rgba(11, 11, 13, .96) !important; border-top: .5px solid var(--t-hair) !important; box-shadow: none !important; }
html.in-app .paybar .btn.primary { min-height: 52px; }
html.in-app .cart-line { border-color: var(--t-hair) !important; }

/* the header scrolls away with the page, as on truend Home (pinned and see-through, the
   scrolled tiles showed behind the greeting) */
html.in-app .topbar { position: relative !important; top: auto !important; }
html.in-app .chrome { position: relative !important; top: auto !important; background: transparent !important; box-shadow: none !important; }

/* reCAPTCHA's picture check (inapp.js InApp.captcha): a truend screen with Google's puzzle as its card.
   Google's own backdrop is dropped, so only Cancel or Verify end it; its badge is replaced by the
   attribution line at the foot. */
html.in-app .grecaptcha-badge { visibility: hidden !important; }
#rc-frame { display: none; }
html.rc-up #rc-frame { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 1999999999; background: var(--paper);
  padding: calc(var(--app-top, 0px) + 20px) 20px calc(var(--app-bottom, 0px) + 16px); }
#rc-frame h2 { margin: 0; font-family: var(--t-display); font-weight: 800; font-size: 26px; letter-spacing: -.6px; color: var(--text); }
#rc-frame p { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: var(--text-dim); }
#rc-frame .rc-foot { margin-top: auto; text-align: center; border: 0 !important; }
#rc-frame .btn { width: 100%; }
#rc-frame small { display: block; margin-top: 10px; font-size: 11px; color: var(--text-faint); }
#rc-frame small a { color: inherit; }
html.rc-up .rc-box { position: fixed !important; top: calc(var(--app-top, 0px) + 132px) !important; left: 50% !important; transform: translateX(-50%); z-index: 2000000000 !important; }
html.rc-up .rc-box > div:first-child { display: none !important; }
html.rc-up .rc-box > div:last-child { border: 0 !important; border-radius: 16px; overflow: hidden; box-shadow: none !important; }