/* Re-themes the four tools onto the brainai.store palette.
   The tools share one token vocabulary (--s0..--s5 surfaces, --t1..--tmute text,
   --acc accent, --bd borders), so remapping the tokens does most of the work.
   `html:root` outranks the tools' own `:root`, whatever order the sheets load in.
   Hard-coded colours the tokens can't reach are fixed per tool in the tool's
   own app/brand-overrides.css. */

html:root {
  /* surfaces: s0 is the page, higher numbers sit on top */
  --s0: #f2f3ee;
  --s1: #fbfbf8;
  --s2: #ffffff;
  --s3: #eceee7;
  --s4: #e2e5dc;
  --s5: #d3d6cc;
  --s-overlay: rgba(242, 243, 238, 0.9);

  /* text */
  --t1: #15171a;
  --t2: #3a3e45;
  --t3: #545962;
  --tmute: #6a6f77;

  /* accent: the brand's signal blue replaces Floor's orange */
  --acc: #2638d9;
  --acc-bright: #3548e6;
  --acc-dim: #1d2cb0;
  --acc-soft: rgba(38, 56, 217, 0.09);
  --acc-med: rgba(38, 56, 217, 0.16);
  --acc-glow: rgba(38, 56, 217, 0.18);
  --acc-glow-dim: rgba(38, 56, 217, 0.1);
  --acc-text: #ffffff;
  --bd-accent: rgba(38, 56, 217, 0.35);

  /* semantic colours, darkened to read on a light page */
  --info: #2f5bd3;
  --info-soft: rgba(47, 91, 211, 0.1);
  --ok: #0b6b43;
  --ok-soft: rgba(11, 107, 67, 0.1);
  --warn: #8a5a00;
  --warn-soft: rgba(197, 132, 0, 0.12);
  --danger: #b3261e;
  --danger-soft: rgba(179, 38, 30, 0.08);
  --violet: #6b3fc4;
  --violet-soft: rgba(107, 63, 196, 0.1);

  /* borders */
  --bd-soft: rgba(21, 23, 26, 0.06);
  --bd: rgba(21, 23, 26, 0.12);
  --bd-strong: rgba(21, 23, 26, 0.22);

  /* elevation: light shadows */
  --elev1: 0 1px 2px rgba(21, 23, 26, 0.06);
  --elev2: 0 4px 14px rgba(21, 23, 26, 0.07), 0 1px 2px rgba(21, 23, 26, 0.05);
  --elev3: 0 14px 40px rgba(21, 23, 26, 0.1), 0 2px 6px rgba(21, 23, 26, 0.05);
  --elev4: 0 24px 56px rgba(21, 23, 26, 0.12);
  --elev-acc: 0 4px 14px rgba(38, 56, 217, 0.22);

  /* type: the brand face everywhere, the system mono for code-like values */
  --display: var(--b-font);
  --body: var(--b-font);
  --ui: var(--b-font);
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  color-scheme: light;
}

html body {
  background: var(--b-ground);
  color: var(--b-ink);
  font-family: var(--b-font);
}

/* Text set on the accent colour must be white on blue, not the old dark-on-orange. */
html body ::selection { background: rgba(38, 56, 217, 0.18); color: inherit; }

/* Floor painted glows behind every page and gradient-filled headline words.
   On this site the page is plain chalk and headlines are plain ink. */
html body::before { display: none !important; }
html body .grad {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: inherit !important;
}

/* The all-caps eyebrow over each tool's headline repeated the headline in
   9-10px type; the page reads better without it. */
html body .hero .eyebrow { display: none !important; }

/* Nothing on the site is set below 12px. */
html body .drop__or,
html body .trustbar__l,
html body .how__n,
html body .eyebrow { font-size: 12px !important; }

/* ───────── The shared tool shell ─────────
   Every tool's workspace lines up with the header and intro. */
html body .b-main > .wrap,
html body .b-main .wrap {
  max-width: var(--b-wrap) !important;
  margin-left: auto; margin-right: auto;
  padding-left: var(--b-gutter) !important; padding-right: var(--b-gutter) !important;
  padding-top: 0 !important;
}

/* ───────── One drop zone for all four tools ─────────
   StripShot/DataPeek use .dropzone (.drag-over / .drag), FormFix/TrueColor use
   .drop (.over). Same frame, same icon, same drag feedback everywhere. */
html body .dropzone,
html body .drop {
  background: var(--b-paper) !important;
  border: 2px dashed color-mix(in srgb, var(--b-ink) 24%, transparent) !important;
  border-radius: 1.25rem !important;
  box-shadow: none !important;
  background-image: none !important;
  transition: border-color var(--b-fast) var(--b-ease), background-color var(--b-fast) var(--b-ease),
              transform var(--b-med) var(--b-ease), box-shadow var(--b-med) var(--b-ease) !important;
}
html body .drop::before, html body .drop::after,
html body .dropzone::before, html body .dropzone::after { display: none !important; }
html body .dropzone:hover,
html body .drop:hover {
  border-color: color-mix(in srgb, var(--b-signal) 55%, transparent) !important;
  background: color-mix(in srgb, var(--b-signal) 3%, var(--b-paper)) !important;
}
html body .dropzone.drag-over,
html body .dropzone.drag,
html body .drop.over {
  border-style: solid !important;
  border-color: var(--b-signal) !important;
  background: color-mix(in srgb, var(--b-signal) 7%, var(--b-paper)) !important;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--b-signal) 12%, transparent) !important;
  transform: scale(1.008);
}

/* The icon: one "file into tray" mark in the signal colour, not four emoji. */
html body .drop-icon,
html body .dropzone__icon,
html body .drop__icon-wrap {
  position: relative;
  display: grid !important; place-items: center;
  width: 3.5rem !important; height: 3.5rem !important; margin: 0 auto 1rem !important;
  font-size: 0 !important; color: transparent !important;
  background: color-mix(in srgb, var(--b-signal) 9%, var(--b-paper)) !important;
  border: 1px solid color-mix(in srgb, var(--b-signal) 20%, transparent) !important;
  border-radius: 1rem !important; box-shadow: none !important;
  transition: transform var(--b-med) var(--b-ease);
}
html body .drop-icon > *, html body .dropzone__icon > *, html body .drop__icon-wrap > * { display: none !important; }
html body .drop-icon::after, html body .dropzone__icon::after, html body .drop__icon-wrap::after {
  content: ''; width: 1.6rem; height: 1.6rem; background: var(--b-signal);
  -webkit-mask: var(--b-tray) center / contain no-repeat; mask: var(--b-tray) center / contain no-repeat;
}
html:root {
  --b-tray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v11'/%3E%3Cpath d='m7.5 9.5 4.5 4.5 4.5-4.5'/%3E%3Cpath d='M4 14v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E");
}
html body .dropzone:hover .drop-icon, html body .dropzone:hover .dropzone__icon, html body .drop:hover .drop__icon-wrap { transform: translateY(-2px); }
html body .dropzone.drag-over .drop-icon, html body .dropzone.drag .dropzone__icon, html body .drop.over .drop__icon-wrap { transform: translateY(3px) scale(1.06); }

/* Drop zone text: same weights and sizes in every tool. */
html body .drop-title, html body .drop__title, html body .dropzone h2 {
  font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -0.015em !important; color: var(--b-ink) !important;
}
html body .drop-sub, html body .drop__sub, html body .dropzone p, html body .dz-hint {
  font-family: var(--b-font) !important; font-size: 0.95rem !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--b-graphite) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .dropzone, html body .drop, html body .drop-icon, html body .dropzone__icon, html body .drop__icon-wrap { transition: none !important; transform: none !important; }
}

/* ───────── In-tool tabs (FormFix: Merge / Split / Sign) ─────────
   A second-level segmented control: same pill shape as the site switcher,
   but the active item is white on paper, so it never competes with it. */
html body .tabs {
  background: color-mix(in srgb, var(--b-ink) 5%, var(--b-ground)) !important;
  border: 1px solid var(--b-rule) !important; border-radius: 999px !important;
  padding: 4px !important; box-shadow: none !important;
}
html body .tab {
  border-radius: 999px !important; padding: 0 1.1rem !important; min-height: 44px;
  font-weight: 600 !important; color: var(--b-graphite) !important;
  transition: background-color var(--b-fast) var(--b-ease), color var(--b-fast) var(--b-ease), box-shadow var(--b-fast) var(--b-ease) !important;
}
html body .tab:hover { color: var(--b-ink) !important; }
html body .tab.active {
  background: #fff !important; color: var(--b-ink) !important; border-color: var(--b-rule) !important;
  box-shadow: 0 1px 2px rgba(21, 23, 26, 0.08), 0 2px 8px rgba(21, 23, 26, 0.05) !important;
}
html body .tab .tab-ico { color: currentColor; }
html body .tab.active .tab-ico { color: var(--b-signal); }

/* ───────── Buttons: one primary, one quiet, everywhere ───────── */
html body .btn--demo {
  background: var(--b-paper) !important; background-image: none !important;
  border: 1.5px solid var(--b-rule) !important; color: var(--b-ink) !important;
  box-shadow: none !important;
}
html body .btn--demo:hover { border-color: var(--b-ink) !important; }
html body button, html body .btn { transition-timing-function: var(--b-ease); }
html body .btn:active:not(:disabled), html body button:active:not(:disabled) { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
  html body .btn:active, html body button:active { transform: none !important; }
}

/* ───────── Type: one family ─────────
   The tools set labels, notes and numbers in a monospace face, which made them
   read like terminals. Everything uses the brand face now; real code blocks
   keep a monospace. */
html:root { --mono: var(--b-font); }
/* No tabular figures anywhere: in this face the feature also gives "." and ","
   a fixed width, which showed up as spaces inside numbers and sentences. */
html body, html body * { font-variant-numeric: normal !important; font-feature-settings: normal !important; }
html body pre, html body code, html body kbd, html body .code, html body .code-block, html body textarea.code {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace !important;
}

/* Regions focused by script to announce results aren't controls: no ring. */
html body [tabindex="-1"]:focus { outline: none; }

/* ───────── StripShot's section tabs: the same segmented control ───────── */
html body .tab-btn {
  border-radius: 999px !important; min-height: 44px; padding: 0 1rem !important;
  font-size: 0.925rem !important; color: var(--b-graphite) !important; background: transparent !important;
  border: 1px solid transparent !important;
  transition: background-color var(--b-fast) var(--b-ease), color var(--b-fast) var(--b-ease), box-shadow var(--b-fast) var(--b-ease) !important;
}
html body .tab-btn:hover { color: var(--b-ink) !important; background: color-mix(in srgb, var(--b-ink) 5%, transparent) !important; }
html body .tab-btn.active {
  background: #fff !important; color: var(--b-ink) !important; border-color: var(--b-rule) !important;
  box-shadow: 0 1px 2px rgba(21, 23, 26, 0.08), 0 2px 8px rgba(21, 23, 26, 0.05) !important;
}

/* ───────── Contrast results: pass green, large-only amber, fail red ───────── */
html body .badge { font-size: 0.75rem !important; padding: 0.15rem 0.5rem !important; background-image: none !important; }
html body .badge--aaa { background: var(--ok-soft) !important; color: var(--ok) !important; border-color: color-mix(in srgb, var(--ok) 30%, transparent) !important; }
html body .badge--aa { background: color-mix(in srgb, var(--ok) 6%, transparent) !important; color: var(--ok) !important; border-color: color-mix(in srgb, var(--ok) 22%, transparent) !important; }
html body .badge--aa-large { background: var(--warn-soft) !important; color: var(--warn) !important; border-color: color-mix(in srgb, var(--warn) 30%, transparent) !important; }
html body .badge--fail { background: var(--danger-soft) !important; color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 25%, transparent) !important; }

/* ───────── TrueColor: the drop zone as a compact file row ───────── */
html body .drop.drop--compact { padding: 0.75rem 1rem !important; min-height: 0 !important; border-style: solid !important; border-width: 1px !important; }
.drop-file { display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; }
.drop-file__thumb { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 0.75rem; border: 1px solid var(--b-rule); flex: none; }
.drop-file__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.drop-file__name { font-weight: 700; color: var(--b-ink); overflow-wrap: anywhere; }
.drop-file__sub { color: var(--b-graphite); font-size: 0.925rem; }
.drop-file__again { color: var(--b-signal); font-weight: 600; font-size: 0.925rem; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }
@media (max-width: 30rem) { .drop-file { flex-wrap: wrap; } .drop-file__again { width: 100%; } }

/* ───────── FormFix "New file" isn't destructive: a quiet button ───────── */
html body .btn--danger {
  background: #fff !important; background-image: none !important; color: var(--b-ink) !important;
  border-color: var(--b-rule) !important; box-shadow: none !important;
}
html body .btn--danger:not(:disabled):hover { border-color: var(--b-ink) !important; background: #fff !important; }

/* StripShot's section tabs stay on one row on phones and scroll sideways if needed. */
html body .tab-btn { white-space: nowrap; flex: none; }
html body .tab-btn:has(+ .tab-btn), html body .tab-btn + .tab-btn { flex: none; }
html body .tab-bar {
  display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 0.25rem;
}
/* Status chips wrap instead of cutting their text off. */
html body .strip-footer { flex-wrap: wrap; }
html body .strip-footer > * { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: 100%; }

/* Keyboard focus on the drop zones (the unified style removed each tool's own). */
html body .dropzone:focus-visible, html body .drop:focus-visible {
  outline: 3px solid var(--b-signal) !important; outline-offset: 3px !important;
}
/* On narrow phones the three StripShot tabs wrap rather than hiding one off-screen. */
@media (max-width: 30rem) {
  html body .tab-bar { flex-wrap: wrap !important; overflow: visible; }
  html body .tab-btn { padding: 0 0.8rem !important; }
}
/* Keyboard-shortcut buttons are for keyboards: hidden on phone-width screens. */
@media (max-width: 47.99rem) { html body .shortcuts-trigger, html body .kbd-trigger, html body .sc-trigger { display: none !important; } }
/* "Try a sample" buttons: full 44px tap height like every other control. */
html body .sample-area .btn, html body .drop__sample, html body .btn--demo { min-height: 44px !important; display: inline-flex; align-items: center; justify-content: center; }

/* ───────── Results arriving (see /assets/reveal.js) ─────────
   The results block rises in, its sections one after another; rows added to
   an existing list rise in on their own. */
html body .b-reveal { animation: b-reveal-in 420ms var(--b-ease) both; }
html body .b-reveal > * { animation: b-reveal-in 480ms var(--b-ease) both; }
html body .b-reveal > :nth-child(2) { animation-delay: 70ms; }
html body .b-reveal > :nth-child(3) { animation-delay: 140ms; }
html body .b-reveal > :nth-child(4) { animation-delay: 210ms; }
html body .b-reveal > :nth-child(n+5) { animation-delay: 260ms; }
html body .b-reveal-item { animation: b-reveal-in 400ms var(--b-ease) both; }

/* FormFix: once PDFs are in, the drop zone becomes a slim "add more" bar. */
html body .drop.drop--compact {
  display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: 0 0.9rem;
  padding: 0.9rem 1.1rem !important; margin-top: 0.75rem; text-align: left; min-height: 0 !important;
}
html body .drop.drop--compact .drop__icon-wrap { width: 2.5rem !important; height: 2.5rem !important; margin: 0 !important; grid-row: span 2; border-radius: 0.75rem !important; }
html body .drop.drop--compact .drop__icon-wrap::after { width: 1.2rem; height: 1.2rem; }
html body .drop.drop--compact .drop__title { font-size: 1rem !important; margin: 0 !important; }
html body .drop.drop--compact .drop__sub { font-size: 0.9rem !important; margin: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  html body .b-reveal, html body .b-reveal > *, html body .b-reveal-item { animation: none !important; }
}
@keyframes b-reveal-in { from { opacity: 0; transform: translateY(16px) scale(0.99); } }

/* The tools set overflow-x: hidden on BOTH html and body. That turns body
   into its own scroll container, so the sticky header scrolled away with
   the page. `clip` still stops sideways scrolling without that side effect. */
html:root, html body { overflow-x: clip !important; }

/* FormFix file rows on phones: the name gets its own full line instead of
   being squeezed to "sample…" by the meta and three buttons. */
@media (max-width: 30rem) {
  html body .frow { display: grid !important; grid-template-columns: auto auto 1fr; grid-template-areas: "idx icon name" "ctrls ctrls meta"; row-gap: 0.4rem; }
  html body .frow__idx { grid-area: idx; }
  html body .frow__icon { grid-area: icon; }
  html body .frow__name { grid-area: name; white-space: normal !important; overflow-wrap: anywhere; }
  html body .frow__meta { grid-area: meta; justify-self: end; align-self: center; }
  html body .frow__ctrls { grid-area: ctrls; }
}

/* "Picked up where you left off" note (handoff.js) */
.b-restored {
  position: fixed; left: 50%; bottom: 1.25rem; z-index: 60; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.9rem; max-width: calc(100vw - 2rem);
  padding: 0.5rem 0.5rem 0.5rem 1rem; border-radius: 999px;
  background: var(--b-ink); color: #fff; font-family: var(--b-font); font-size: 0.95rem;
  box-shadow: 0 10px 30px rgba(21, 23, 26, 0.25);
  animation: b-reveal-in 320ms var(--b-ease) both;
}
.b-restored button {
  min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 0; cursor: pointer;
  background: #fff; color: var(--b-ink); font: inherit; font-weight: 600;
}
.b-restored.is-leaving { opacity: 0; transform: translate(-50%, 8px); transition: opacity 400ms, transform 400ms; }
@media (prefers-reduced-motion: reduce) { .b-restored { animation: none; } .b-restored.is-leaving { transition: none; } }

/* ───────── Phone tap targets inside the tools ─────────
   The tools were designed for a mouse: row buttons, filter chips, format
   switches and page arrows were 21–36px tall. On touch screens every control
   in a tool is at least 44px tall. */
@media (max-width: 47.99rem), (pointer: coarse) {
  html body .b-main button:not(.b-restored button),
  html body .b-main [role="button"]:not(.drop):not(.dropzone):not(.stagewrap):not(.thumb),
  html body .b-main [role="tab"],
  html body .b-main select {
    min-height: 44px !important;
  }
  html body .b-main button, html body .b-main [role="tab"] { display: inline-flex; align-items: center; justify-content: center; }
  html body .b-main .frow__ctrls button, html body .b-main .frow__ctrls [role="button"] { min-width: 44px !important; }
  html body .b-main input[type="range"] { min-height: 44px; }
}

/* ───────── Hierarchy: once a tool has something to show, its intro steps back ─────────
   The big title and description are for arriving; after a file is open the
   results lead. The intro shrinks to one line (animated where supported). */
html body .b-main:has(.results, .toolbar, .flist, .thumbgrid, .editor, [aria-label="Palette results"] > *) .b-intro {
  padding-top: 1.25rem; padding-bottom: 0.75rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
}
html body .b-main:has(.results, .toolbar, .flist, .thumbgrid, .editor, [aria-label="Palette results"] > *) .b-intro__title {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
}
html body .b-main:has(.results, .toolbar, .flist, .thumbgrid, .editor, [aria-label="Palette results"] > *) .b-intro__lede,
html body .b-main:has(.results, .toolbar, .flist, .thumbgrid, .editor, [aria-label="Palette results"] > *) .b-intro__peek { display: none; }
html body .b-main:has(.results, .toolbar, .flist, .thumbgrid, .editor, [aria-label="Palette results"] > *) .b-intro__text { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
html body .b-main:has(.results, .toolbar, .flist, .thumbgrid, .editor, [aria-label="Palette results"] > *) .b-intro__local { margin: 0; font-size: 0.85rem; }
@media (prefers-reduced-motion: no-preference) {
  html body .b-intro__title { transition: font-size 300ms var(--b-ease); }
}