/* Find / Mint & Lime. Shared visual contract for every page and dialog. */
:root {
  color-scheme: light;
  --find-ink: #0b0f0a;
  --find-bg: #f2ffe9;
  --find-lime: #b4ff39;
  --find-mint: #39ff88;
  --find-muted: #56614f;
  --find-border: #dce7d5;
  --find-surface: #fff;
  --find-soft: #eaf4e3;
  --find-accent-ink: #244719;
  --find-radius: 20px;
  --find-shadow: 0 12px 36px -24px rgb(11 15 10 / .22);
  --find-ease: cubic-bezier(.2,.8,.2,1);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  color: var(--find-ink);
  background: var(--find-bg);
}
body {
  color: var(--find-ink);
  background: radial-gradient(ellipse at 88% 8%, rgb(57 255 136 / .12), transparent 620px), radial-gradient(ellipse at 10% 68%, rgb(180 255 57 / .14), transparent 520px), var(--find-bg);
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
}
/* Stationary vector decoration: no parallax, animation or interception of clicks. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url('/assets/find-contours.svg') center top / cover no-repeat;
}
.conversation-pane {
  background-image: linear-gradient(135deg, rgb(255 255 255 / .7), rgb(242 255 233 / .85)), url('/assets/find-contours.svg');
  background-size: cover;
}
.chat-placeholder { border: 1px solid rgb(255 255 255 / .9); border-radius: 28px; background: rgb(255 255 255 / .65); box-shadow: 0 18px 55px -35px rgb(36 71 25 / .24); }
@media(max-width:600px) { body::before { opacity: .55; background-size: auto 1050px; } }
@media(forced-colors:active) { body::before { display: none; } }
::selection { color: var(--find-ink); background: var(--find-lime); }
:where(button, input, select, textarea) { font: inherit; }
:where(button, a, input, select, textarea, summary) { -webkit-tap-highlight-color: transparent; }
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--find-ink);
  outline-offset: 3px;
}
:where(input, select, textarea) { accent-color: var(--find-accent-ink); }
:where(input, textarea)::placeholder { color: #68735f; opacity: 1; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(dialog) { color: var(--find-ink); background: var(--find-surface); border-radius: 24px; }
:where(dialog)::backdrop { background: rgb(11 15 10 / .45); backdrop-filter: blur(6px); }
:where(.button, .action-button) { border-radius: 14px; }
.button.primary, .action-button:not(.secondary,.quiet) {
  color: var(--find-ink);
  background: var(--find-lime);
  border-color: transparent;
  box-shadow: 0 4px 12px rgb(11 15 10 / .06);
  font-weight: 700;
}
.button.primary:disabled, .action-button:not(.secondary,.quiet):disabled {
  color: #68735f;
  background: var(--find-soft);
  border-color: var(--find-border);
  box-shadow: none;
}
.button.primary:focus-visible, .action-button:focus-visible, .action-button:not(.secondary,.quiet):focus-visible {
  outline: 2px solid var(--find-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgb(180 255 57 / .45);
}
@media (hover:hover) and (pointer:fine) {
  .button.primary:hover:not(:disabled), .action-button:not(.secondary,.quiet):hover:not(:disabled) {
    color: var(--find-ink);
    background: #a8f22f;
    border-color: transparent;
    box-shadow: 0 6px 18px rgb(11 15 10 / .11);
  }
}
.button.primary:hover:focus-visible, .action-button:not(.secondary,.quiet):hover:focus-visible {
  box-shadow: 0 0 0 6px rgb(180 255 57 / .45);
}
.auth-heading { position: relative; padding-right: 105px; min-height: 112px; }
.auth-mascot { position: absolute; right: -8px; top: -10px; width: 105px; height: 125px; object-fit: contain; }
.auth-card .auth-heading h1 { font-size: clamp(26px,3vw,32px); font-weight: 750; letter-spacing: -.04em; }
.auth-card .auth-heading .eyebrow { color: var(--find-accent-ink); font-size: 10px; letter-spacing: .07em; margin-bottom: 7px; }
.auth-card .auth-tabs [aria-selected="true"] { color: var(--find-ink); background: var(--find-lime); border-color: transparent; box-shadow: none; }
.auth-card .role-options input:checked + span { color: var(--find-ink); background: #f2ffe1; border-color: var(--find-accent-ink); }
.auth-card .role-options input:checked + span strong::after { content: ' ✓'; }
.auth-card .role-options input:focus-visible + span { outline: 2px solid var(--find-ink); outline-offset: 3px; }
:is(#videos-empty, #responses-empty, #search-empty, #discovery-empty)::before {
  content: ''; display: block; width: 96px; height: 112px; margin: 0 auto 14px;
  background: url('/assets/find-mascot-simple.png') center / contain no-repeat;
}
#videos-empty > .empty-icon, #responses-empty > span[aria-hidden="true"] { display: none; }
/* The error colour remains semantic. Brand accents never disguise invalid input. */
:is(input,textarea,select)[aria-invalid="true"]:focus-visible { outline-color: #a92724; }
@media (max-width:480px) {
  .auth-heading { padding-right: 80px; min-height: 100px; }
  .auth-mascot { width: 84px; height: 100px; right: -5px; top: 0; }
  .auth-card .auth-heading h1 { font-size: 26px; }
  :is(#videos-empty, #responses-empty, #search-empty, #discovery-empty)::before { width: 76px; height: 90px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}