/* Field School chrome for self-hosted Cap (cap.fieldschool.ai).
   Second pass: live Field School tokens + Material 3 Expressive restyle.
   Typeset wordmark on a paper bar. Hide Cap marks and Cap Pro / upgrade.
   Do not rewrite Cap copy. Do not restyle the video player, waveform, or
   record controls. Do not invent a logo. Do not rebuild Cap.

   This file supersedes the first-pass sticker (floating body::before word).
   Shime can drop overlay.css only. hide-upgrade.css may stay injected too; duplicate hide is fine.

   Live tokens (verified 26 Aug 2026):
     https://fieldschool.ai/css/site.css :root
     https://fieldschool.ai header (.site-header / .wordmark / .wordmark-mark)
     https://portal.fieldschool.ai :root / .dark
     Local /workspace/field-school/site/css/site.css matches live :root.

     --background / paper:  #f6f3ec
     --foreground / ink:    #1a1916
     --card:                #fff
     --primary:             #1f5eff   (= live /brand/mark-color.svg)
     --muted / secondary:   #efeae1
     --muted-foreground:    #5c5850
     --border:              #d8d2c6
     --radius:              .75rem
     --header-h:            56px
     display:               Fraunces 600, 1.125rem, tracking -0.025em
     body:                  IBM Plex Sans
     mono:                  IBM Plex Mono
     portal .dark paper:    #101218
     portal .dark ink:      #f3f1ec
     portal .dark primary:  #6b93ff

   M3 Expressive: color, shape, size, motion, containment pull the eye
   to the PRIMARY action. 48px tap. AA+. Extra-large card (28px),
   full/pill primary button. No purple gradients, no Inter, no blobs.
*/

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap");

:root {
  --fs-paper: #f6f3ec;
  --fs-ink: #1a1916;
  --fs-primary: #1f5eff;
  --fs-card: #fff;
  --fs-muted: #5c5850;
  --fs-border: #d8d2c6;
  --fs-hairline: color-mix(in srgb, #1a1916 12%, transparent);
  --fs-shadow: 0 12px 24px -16px rgba(26, 25, 22, 0.35);
  --fs-display: Fraunces, ui-serif, Georgia, "Times New Roman", serif;
  --fs-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --fs-bar-h: 56px;
  --fs-radius-card: 1.75rem;
  --fs-radius-input: 0.75rem;
  --fs-radius-btn: 999px;
  --fs-touch: 48px;
}

/* --------------------------------------------------------------------------
   1. Page paper + body type. Not Cap #f9f9f9 / #f2f2f2 / gray-2.
   -------------------------------------------------------------------------- */

html,
body {
  background: var(--fs-paper) !important;
  color: var(--fs-ink);
  font-family: var(--fs-sans);
}

body {
  /* bar is fixed; do not pad body (Home + h-screen stay predictable) */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Login viewport is Cap h-screen. Body already has the 56px pad. */
div.flex.relative.justify-center.items-center.w-full.h-screen.bg-gray-2,
div.h-screen.bg-gray-2 {
  background: var(--fs-paper) !important;
  /* keep Cap h-screen so the card stays centered */

  box-sizing: border-box;
}

/* App shell is 100dvh. Shrink so the paper bar does not overflow it. */
.dashboard-grid {
  background: var(--fs-paper) !important;
  margin-top: var(--fs-bar-h);
  height: calc(100dvh - var(--fs-bar-h)) !important;
  min-height: calc(100dvh - var(--fs-bar-h)) !important;
  /* keep Cap h-screen so the card stays centered */

}

.bg-gray-2,
[class*="bg-gray-2"]:not([class*="bg-gray-12"]) {
  background: var(--fs-paper) !important;
}

/* --------------------------------------------------------------------------
   2. Top chrome — paper bar + existing mark + "Field School"
      Replaces the floating sticker. Same language as fieldschool.ai
      .site-header (56px, paper, hairline, Fraunces 600 1.125rem).
      Live header pairs /brand/mark-color.svg; we pair that EXISTING svg
      (copied to existing/, inlined so a CSS-only drop still paints).
   -------------------------------------------------------------------------- */

body::before {
  content: "Field School";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 52;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: var(--fs-bar-h);
  padding: 0 1rem 0 calc(1rem + 1.55rem + 0.55rem);
  border-bottom: 1px solid var(--fs-border);
  background-color: color-mix(in srgb, var(--fs-paper) 88%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32' fill='none'%3E%3Crect width='40' height='32' rx='8' fill='%231f5eff'/%3E%3Crect x='7' y='8' width='26' height='5' rx='2.5' fill='%23ffffff'/%3E%3Crect x='7' y='18' width='16' height='3.5' rx='1.75' fill='%23d7e3ff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 1.55rem 1.24rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--fs-display);
  font-optical-sizing: auto;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--fs-ink);
  pointer-events: none;
  white-space: nowrap;
}

/* If Google Fonts is blocked, uncomment and comment `content` above.
body::before {
  content: "";
  background-image:
    url("/fs-brand/existing/mark-color.svg"),
    url("/fs-brand/field-school-wordmark.svg");
  background-position: 1rem center, calc(1rem + 1.55rem + 0.55rem) center;
  background-size: 1.55rem 1.24rem, 8.75rem 1.25rem;
  background-repeat: no-repeat;
}
*/

/* --------------------------------------------------------------------------
   3. Hide Cap marks. Do not hide Home, search, nav labels, player, forms.
   -------------------------------------------------------------------------- */

a.flex.mx-auto.size-fit,
a.flex.mx-auto.size-fit > svg[viewBox="0 0 40 40"] {
  display: none !important;
}

svg[viewBox="0 0 40 40"]:has(path[fill="#4785FF"]) {
  display: none !important;
}

svg[aria-label="Cap Logo"] {
  display: none !important;
}

a:has(> svg[aria-label="Cap Logo"]),
div.group.relative.inline-flex:has(svg[aria-label="Cap Logo"]) {
  display: none !important;
}

div.flex.min-w-0.items-center.gap-3 > div.h-7.w-px.shrink-0.bg-gray-6 {
  display: none !important;
}

/* --------------------------------------------------------------------------
   4. Keep ← Home. Body already has 56px pad, so sit it just under the bar
      inside the login wrapper (do not add another 3–4rem).
   -------------------------------------------------------------------------- */

div.flex.absolute.top-10.left-10 {
  top: calc(var(--fs-bar-h) + 0.6rem) !important;
  left: 1rem !important;
  z-index: 53;
  min-height: var(--fs-touch);
  align-items: center;
  color: var(--fs-ink);
  font-family: var(--fs-sans);
}

/* App mobile header fuses with the paper bar. */
@media (max-width: 1023px) {
  div.flex.fixed[class*="z-[51]"].h-16 {
    top: 0;
    height: var(--fs-bar-h);
    padding-left: 11.25rem;
    background: transparent !important;
    border-color: transparent !important;
  }

  div.flex.fixed[class*="z-[51]"].h-16 a.block.flex-shrink-0 {
    width: 0 !important;
    height: 0 !important;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (min-width: 1024px) {
  aside.bg-gray-1[class*="[grid-area:sidebar]"],
  [class*="[grid-area:sidebar]"] {
    background: var(--fs-paper) !important;
  }
}

/* --------------------------------------------------------------------------
   5. Hide Cap Pro / upgrade / Stripe (also in hide-upgrade.css).
   -------------------------------------------------------------------------- */

a[href="/dashboard/refer"],
a[href="/pricing"],
a[href^="/pricing?"],
a[href*="cap.so/pricing"],
a[href*="checkout.stripe.com"],
a[href*="billing.stripe.com"],
a[href="/dashboard/settings/organization/security"] { display: none !important; }

[cmdk-item]:has([class*="text-amber-400"]),
[cmdk-item]:has(.text-amber-400) { display: none !important; }

[class*="sm:max-w-[1100px]"].custom-scroll,
[class*="sm:max-w-[1100px]"][class*="custom-scroll"] { display: none !important; }

body:has([class*="sm:max-w-[1100px]"].custom-scroll) [data-radix-dialog-overlay],
body:has([class*="sm:max-w-[1100px]"][class*="custom-scroll"]) [data-radix-dialog-overlay] { display: none !important; }

/* UsageButton — Upgrade to Pro / Cap Pro / shareable-links meter.
   Source: apps/web/components/UsageButton.tsx
   Expanded card is uniquely p-3 w-full rounded-xl bg-gray-3 (org switcher is p-2.5). */
div.p-3.w-full.rounded-xl.bg-gray-3,
div.p-3.w-full.rounded-xl.bg-gray-3:has(a[href="/dashboard/settings/workspace"]),
div.p-3.w-full.rounded-xl.bg-gray-3:has(p.text-white),
button[aria-label="Upgrade to Pro"],
a[href="/dashboard/settings/workspace"] {
  display: none !important;
}

button.mt-2.w-full.text-center.text-gray-10,
button[class*="text-[11px]"][class*="text-gray-10"] {
  display: none !important;
}

/* ShareHeader free-plan strip + custom-domain upsell.
   Source: apps/web/app/s/[videoId]/_components/ShareHeader.tsx */
div.flex.sticky.inset-x-0.top-0.z-10.max-w-fit.rounded-b-xl.bg-gray-4,
div.sticky.rounded-b-xl.border.bg-gray-4.border-gray-6 {
  display: none !important;
}

button.flex.items-center.mt-2.mb-3.text-sm.text-gray-400 {
  display: none !important;
}

/* Signed-out share marketing. Keep Log in, Blog, Download. Do not hide /signup on /login. */
nav[aria-label="Cap"] a[href*="/pricing"],
nav[aria-label="Cap"] a[href^="/signup"],
a[href*="/signup?ref=video_"] {
  display: none !important;
}

/* "No custom domain set" under workspace selector. Keep Organization Settings nav. */
a.self-start[href="/dashboard/settings/organization"],
a.self-start[class*="gap-1.5"] {
  display: none !important;
}

a[href*="/api/settings/billing"],
a[href*="billing/subscribe"],
iframe[src*="stripe.com"],
form[action*="stripe"] {
  display: none !important;
}

div.p-3.w-full.rounded-xl.bg-gray-3 { display: none !important; }
button[aria-label="Upgrade to Pro"] { display: none !important; }

div.flex.sticky.inset-x-0.top-0.z-10.max-w-fit.rounded-b-xl.bg-gray-4,
div.sticky.rounded-b-xl.border.bg-gray-4.border-gray-6 { display: none !important; }

button.flex.items-center.mt-2.mb-3.text-sm.text-gray-400 { display: none !important; }

[role="dialog"][class*="max-w-[1100px]"],
[role="dialog"][class*="sm:max-w-[1100px]"],
[data-radix-dialog-content][class*="max-w-[1100px]"] { display: none !important; }

nav[aria-label="Cap"] a[href*="/pricing"],
nav[aria-label="Cap"] a[href^="/signup"],
a[href*="/signup?ref=video_"],
a[href*="/pricing?ref="] { display: none !important; }

a[href*="stripe.com"],
a[href*="/api/settings/billing"],
a[href*="/settings/billing"],
a[href*="billing/subscribe"],
iframe[src*="stripe.com"],
form[action*="stripe"] { display: none !important; }

a[href*="/referral"],
a[href*="referrals"] { display: none !important; }

/* --------------------------------------------------------------------------
   6. Display headings. Words unchanged.
   -------------------------------------------------------------------------- */

h1,
.text-2xl.font-semibold,
h1.text-2xl,
[class*="text-2xl"][class*="font-semibold"] {
  font-family: var(--fs-display);
  font-optical-sizing: auto;
  font-weight: 600;
  color: var(--fs-ink);
  letter-spacing: -0.025em;
}

/* --------------------------------------------------------------------------
   7. Login / signup card — one contained surface, M3 extra-large corner.
   -------------------------------------------------------------------------- */

div.max-w-\[432px\].bg-gray-3.rounded-2xl,
div.w-\[calc\(100\%-5\%\)\].max-w-\[432px\],
[class*="bg-gray-3"][class*="rounded-2xl"][class*="max-w-[432px]"] {
  background: var(--fs-card) !important;
  border: 1px solid var(--fs-border) !important;
  border-radius: var(--fs-radius-card) !important;
  box-shadow: var(--fs-shadow);
  color: var(--fs-ink);
}

div.max-w-\[432px\] p.text-gray-10,
div.max-w-\[432px\] p.text-\[16px\],
div.h-screen.bg-gray-2 p.text-gray-10,
div.h-screen.bg-gray-2 p.text-gray-9 {
  color: var(--fs-muted) !important;
  font-family: var(--fs-sans);
}

/* --------------------------------------------------------------------------
   8. PRIMARY action — the one thing a stranger sees in two seconds.
      Scoped to the login/signup card so player / record buttons stay Cap.
   -------------------------------------------------------------------------- */

[class*="max-w-[432px]"] button[class*="bg-gray-12"],
[class*="max-w-[432px]"] button.bg-gray-12,
div.max-w-\[432px\] button[type="submit"],
div.h-screen.bg-gray-2 form button[type="submit"] {
  background: var(--fs-primary) !important;
  color: #fff !important;
  border: 1px solid var(--fs-primary) !important;
  min-height: var(--fs-touch);
  height: var(--fs-touch);
  border-radius: var(--fs-radius-btn) !important;
  width: 100%;
  font-family: var(--fs-sans);
  font-weight: 500;
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--fs-primary) 70%, transparent);
  transition: filter 120ms ease, box-shadow 120ms ease;
}

[class*="max-w-[432px]"] button[class*="bg-gray-12"]:hover,
div.max-w-\[432px\] button[type="submit"]:hover,
div.h-screen.bg-gray-2 form button[type="submit"]:hover {
  filter: brightness(1.05);
}

[class*="max-w-[432px]"] button[class*="bg-gray-12"]:focus-visible,
div.max-w-\[432px\] button[type="submit"]:focus-visible,
div.h-screen.bg-gray-2 form button[type="submit"]:focus-visible {
  outline: 2px solid var(--fs-primary);
  outline-offset: 3px;
}

div.max-w-\[432px\] button[type="button"],
div.h-screen.bg-gray-2 form button[type="button"] {
  min-height: var(--fs-touch);
  font-family: var(--fs-sans);
}

/* --------------------------------------------------------------------------
   9. Inputs — 48px, Plex, paper fill, primary focus.
      Skip range / hidden / checkbox (player + waveform sliders).
   -------------------------------------------------------------------------- */

div.max-w-\[432px\] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
div.h-screen.bg-gray-2 input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]) {
  min-height: var(--fs-touch);
  height: var(--fs-touch);
  border-radius: var(--fs-radius-input) !important;
  font-family: var(--fs-sans);
  font-weight: 400;
  font-size: 1rem;
  color: var(--fs-ink);
  background: var(--fs-card) !important;
  border-color: var(--fs-border) !important;
}

div.max-w-\[432px\] input:focus,
div.max-w-\[432px\] input:focus-visible,
div.h-screen.bg-gray-2 input:focus,
div.h-screen.bg-gray-2 input:focus-visible {
  outline: 2px solid var(--fs-primary);
  outline-offset: 3px;
  border-color: var(--fs-primary) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--fs-primary);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   10. Links — Sign up here. House primary, not Cap blue-9.
   -------------------------------------------------------------------------- */

div.max-w-\[432px\] a.text-blue-9,
div.max-w-\[432px\] a[href="/signup"],
div.max-w-\[432px\] a[href="/login"],
div.h-screen.bg-gray-2 a[href="/signup"],
div.h-screen.bg-gray-2 a[href="/login"] {
  color: var(--fs-primary) !important;
  font-family: var(--fs-sans);
}

div.max-w-\[432px\] a[href="/terms"],
div.max-w-\[432px\] a[href="/privacy"],
div.h-screen.bg-gray-2 a[href="/terms"],
div.h-screen.bg-gray-2 a[href="/privacy"] {
  color: var(--fs-ink) !important;
}

@media (prefers-reduced-motion: reduce) {
  [class*="max-w-[432px]"] button[class*="bg-gray-12"],
  div.max-w-\[432px\] button[type="submit"] {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   11. Do not restyle video player, waveform, or record controls.
   -------------------------------------------------------------------------- */

[data-player] button,
[class*="waveform"] button,
[class*="Waveform"] button,
[class*="VideoPlayer"] button,
[class*="cap-player"] button,
[class*="record-control"] button,
[class*="Recorder"] button {
  background: revert !important;
  color: revert !important;
  min-height: revert !important;
  border-radius: revert !important;
  width: revert !important;
  outline: revert !important;
}

[data-player] input,
[class*="waveform"] input,
[class*="Waveform"] input,
[class*="VideoPlayer"] input,
[class*="cap-player"] input,
[class*="record-control"] input {
  min-height: revert !important;
  border-radius: revert !important;
  outline: revert !important;
}

/* --------------------------------------------------------------------------
   12. Dark — portal .dark tokens. Cap sets body.dark from the theme cookie.
   -------------------------------------------------------------------------- */

body.dark,
html.dark body,
.dark body,
.dark-theme body {
  --fs-paper: #101218;
  --fs-ink: #f3f1ec;
  --fs-card: #181b22;
  --fs-primary: #6b93ff;
  --fs-muted: #a8a399;
  --fs-border: #343844;
  --fs-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.45);
  background: var(--fs-paper) !important;
  color: var(--fs-ink);
}

body.dark::before,
html.dark body::before,
.dark body::before,
.dark-theme body::before {
  color: #f3f1ec;
  border-bottom-color: #343844;
  background-color: color-mix(in srgb, #101218 88%, transparent);
}

/* --------------------------------------------------------------------------
   13. Adaptive — wordmark + 48px taps hold. Do not crush the card.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  body::before {
    font-size: 1.0625rem;
    padding-left: calc(0.85rem + 1.4rem + 0.4rem);
    background-position: 0.85rem center;
    background-size: 1.4rem 1.12rem;
  }

  div.flex.absolute.top-10.left-10 {
    left: 0.85rem !important;
  }
}

/* --------------------------------------------------------------------------
   10. Dashboard search — fuse Cap Top into the 56px paper bar.
       Source: Navbar/Top.tsx + Navbar/DashboardSearch.tsx
       Trigger: button[aria-label="Search dashboard"]
                flex gap-2.5 items-center px-3.5 w-full max-w-[720px]
                h-10 rounded-xl bg-gray-3 border-gray-4
       Last pass yanked the button to position:fixed + left:12.75rem.
       That cannot align. The Top row itself sits in the paper bar.
       Search stays in-flow so height, radius, type, and contrast lock
       to the Field School + M3 header (56px, Plex, 12px house radius
       on a 36px chip so 10px air matches the bell).
   -------------------------------------------------------------------------- */

/* Top row: the flex that holds title + search + bell + user. */
div.flex:has(> button[aria-label="Search dashboard"]),
div.flex.items-center:has(button[aria-label="Search dashboard"]):has(button[aria-label^="Notifications"]) {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 53;
  box-sizing: border-box;
  height: var(--fs-bar-h) !important;
  min-height: var(--fs-bar-h) !important;
  max-height: var(--fs-bar-h);
  margin: 0 !important;
  padding: 0 1rem 0 12.25rem !important;
  align-items: center !important;
  gap: 0.75rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Page already has its own heading. Hide the duplicate "Caps" in Top. */
div.flex:has(> button[aria-label="Search dashboard"]) > h1,
div.flex:has(> button[aria-label="Search dashboard"]) > [class*="text-2xl"],
div.flex.items-center:has(button[aria-label="Search dashboard"]):has(button[aria-label^="Notifications"]) > h1,
div.flex.items-center:has(button[aria-label="Search dashboard"]):has(button[aria-label^="Notifications"]) > p,
div.flex.items-center:has(button[aria-label="Search dashboard"]):has(button[aria-label^="Notifications"]) > span:not([class*="truncate"]) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

[class*="[grid-area:header]"] {
  background: transparent !important;
  border-color: transparent !important;
}

button[aria-label="Search dashboard"] {
  position: static !important;
  top: auto;
  left: auto;
  z-index: auto;
  box-sizing: border-box;
  flex: 1 1 auto;
  width: min(28rem, 100%) !important;
  max-width: 28rem !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 0.85rem !important;
  border-radius: 0.75rem !important;
  background: var(--fs-card) !important;
  border: 1px solid color-mix(in srgb, var(--fs-ink) 18%, var(--fs-border)) !important;
  color: #3d3a35 !important;
  font-family: var(--fs-sans) !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  gap: 0.55rem !important;
}

button[aria-label="Search dashboard"]:hover {
  background: var(--fs-card) !important;
  border-color: color-mix(in srgb, var(--fs-ink) 28%, var(--fs-border)) !important;
  color: var(--fs-ink) !important;
}

button[aria-label="Search dashboard"]:focus,
button[aria-label="Search dashboard"]:focus-visible {
  outline: 2px solid var(--fs-primary);
  outline-offset: 2px;
  border-color: var(--fs-primary) !important;
}

button[aria-label="Search dashboard"] svg {
  width: 0.9375rem;
  height: 0.9375rem;
  color: #3d3a35;
  flex: 0 0 auto;
}

button[aria-label="Search dashboard"] kbd,
button[aria-label="Search dashboard"] span.font-medium,
button[aria-label="Search dashboard"] [class*="text-[11px]"] {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
  font-size: 0.625rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  line-height: 1 !important;
  color: var(--fs-muted) !important;
  background: #efeae1 !important;
  border: 1px solid var(--fs-border) !important;
  border-radius: 0.375rem !important;
  padding: 0.12rem 0.32rem !important;
}

/* Bell sits at 36px so it shares the search chip height. */
button[aria-label^="Notifications"] {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  background: var(--fs-card) !important;
  border: 1px solid var(--fs-border) !important;
}

body.dark button[aria-label="Search dashboard"],
html.dark button[aria-label="Search dashboard"],
.dark button[aria-label="Search dashboard"] {
  background: #1a1d26 !important;
  border-color: #343844 !important;
  color: #c8c4bb !important;
}

body.dark button[aria-label="Search dashboard"] kbd,
html.dark button[aria-label="Search dashboard"] kbd,
.dark button[aria-label="Search dashboard"] kbd,
body.dark button[aria-label="Search dashboard"] [class*="text-[11px]"],
.dark button[aria-label="Search dashboard"] [class*="text-[11px]"] {
  background: #101218 !important;
  border-color: #343844 !important;
  color: #c8c4bb !important;
}

@media (max-width: 1023px) {
  div.flex:has(> button[aria-label="Search dashboard"]),
  div.flex.items-center:has(button[aria-label="Search dashboard"]):has(button[aria-label^="Notifications"]) {
    position: static !important;
    height: auto !important;
    max-height: none;
    padding: 0.5rem 0.85rem !important;
  }

  button[aria-label="Search dashboard"] {
    width: 100% !important;
    max-width: none !important;
    height: 36px !important;
  }
}

/* Open command dialog input */
[cmdk-input],
input[placeholder*="Search the dashboard"] {
  font-family: var(--fs-sans);
  font-size: 0.9375rem;
  min-height: 48px;
  color: var(--fs-ink);
}

/* --------------------------------------------------------------------------
   11. Hide “Add to Chrome” / Chrome extension leftover.
       Cloud Cap talks to cap.so + the Chrome Web Store. Self-host does not.
       Source: ChromeRecorderButton.tsx / CAP_CHROME_EXTENSION_URL
       Also hide “Record with Chrome” (installed-state of the same control).
   -------------------------------------------------------------------------- */

a[href*="chromewebstore.google.com"],
a[href*="fefjaffcodfiogbbngmjkcjpbpclbdcp"] {
  display: none !important;
}

[data-cap-chrome-extension-installed] {
  display: none !important;
}