/* Polish overrides for tidal-form — owned by one agent per pass; scope every rule. Loaded last. */
/* Every selector starts with [data-theme="tidal-form"] (set on <body> by app.js renderSite), so
   nothing here can reach another concept, the gallery, or the Signature Sky UX lab. */

/* ---------- Tokens ---------- */
/* #6d819a measured 3.8:1 on #f6fafb and 4.0:1 on white. #54687f keeps the cool slate tone:
   5.5:1 page, 5.7:1 white, 4.75:1 on the mint CTA band, 5.0:1 on the shipping card. */
[data-theme="tidal-form"] { --muted: #54687f; --tf-field-line: #7a8fa3; }

/* ---------- Motion-off / reduced motion: entrance animations must not freeze at frame 0 ----------
   base.css pauses every animation under body.motion-off (set for prefers-reduced-motion and the footer's
   "Pause animations"). Entrance keyframes start at opacity 0, so dialogs, the phone menu, FAQ answers, the
   shipping steps and (after a reload with Motion off) the hero copy and vials stayed invisible. */
[data-theme="tidal-form"].motion-off :is(.dialog, .mobile-links, .vt-faq-answer, .vt-steps li, .hero .hero-copy > *, .hero .hero-vial-holder),
[data-theme="tidal-form"].motion-off .vt-quality-proof::before { animation: none !important; }

/* ---------- Header ---------- */
/* Logo link was 153x30: give it a 44px hit area without moving the official logo. */
[data-theme="tidal-form"] .nav-inner > a:first-child { display: flex; align-items: center; min-height: 44px; flex-shrink: 0; }
[data-theme="tidal-form"] .desktop-nav { font-size: 13px; }
[data-theme="tidal-form"] .nav-access { font-size: 12px; min-height: 44px; }
/* 9px count badge -> 11px, with a white ring so it no longer touches the circle's border. */
[data-theme="tidal-form"] .cart-count { top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; font-size: 12px; font-weight: 600; line-height: 1; box-shadow: 0 0 0 2px #f8fcfd; }
@media (max-width: 760px) {
  [data-theme="tidal-form"] .mobile-links .button { min-height: 50px; font-size: 14px; }
}

/* ---------- Page gutters: one left edge per width ----------
   1440: logo 72, hero 75, story sections 60, collection/footer 102 -> everything at 72 (5vw). */
@media (min-width: 1101px) {
  [data-theme="tidal-form"] .wrap { max-width: 1500px; }
  [data-theme="tidal-form"] .hero { --hero-pad: 5vw; }
  [data-theme="tidal-form"] .vt-section { width: min(90%, 1420px); }
}
@media (min-width: 1600px) {
  [data-theme="tidal-form"] .hero { --hero-pad: 40px; }
  [data-theme="tidal-form"] .hero .hero-inner { max-width: 1500px; }
}
/* Tablets: hero 32, sections 36, shipping 52 and carousel 20 vs logo 5vw -> all on 5vw. */
@media (min-width: 761px) and (max-width: 1100px) {
  [data-theme="tidal-form"] .hero { --hero-pad: 5vw; }
  [data-theme="tidal-form"] .vt-section { width: 90%; }
}
@media (min-width: 761px) {
  [data-theme="tidal-form"] .vt-shipping-main { width: min(90vw, 1420px); }
}
/* 1500-1599: .wrap and the header cap at 1500 with 5% padding while the hero and sections don't, which split the edges by up to 50px. */
@media (min-width: 1500px) and (max-width: 1599px) {
  [data-theme="tidal-form"] .wrap, [data-theme="tidal-form"] .nav-inner { max-width: none; }
  [data-theme="tidal-form"] .vt-section { width: 90%; }
  [data-theme="tidal-form"] .vt-shipping-main { width: 90vw; }
}
/* Phones: hero 23px and sections 20px vs wrap 21.45px -> all on --mobile-gutter. */
@media (max-width: 760px) {
  [data-theme="tidal-form"] .hero { --hero-pad: var(--mobile-gutter); }
  [data-theme="tidal-form"] .vt-section { width: calc(100% - 2 * var(--mobile-gutter)); }
}

/* ---------- Hero ---------- */
/* The title was 68px at 700 and 43px at 701: tablets no longer read smaller than phones. */
@media (min-width: 701px) and (max-width: 1100px) {
  [data-theme="tidal-form"] .hero .hero-title { font-size: clamp(50px, 6.4vw, 65px); }
  /* The bigger title would run into the first vial; the second keeps its place. */
  [data-theme="tidal-form"] .hero .hero-vial--tidal-first { left: 15%; width: 33%; }
}
@media (max-width: 700px) {
  /* Breathing room between the buttons and the first vial cap (was ~13px). */
  [data-theme="tidal-form"] .hero .hero-scene--tidal { margin-top: 20px; }
}
@media (max-width: 380px) {
  /* "High standards." wrapped to "High / standards." at 39px; keep the two-line headline. */
  [data-theme="tidal-form"] .hero .hero-title { font-size: clamp(34px, 11.2vw, 40px); }
  /* Buttons wrapped at 156px and 112px: stack them at one shared width. */
  [data-theme="tidal-form"] .hero .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  [data-theme="tidal-form"] .hero .hero-button { width: 100%; padding-inline: 20px; font-size: 13px; }
}

/* ---------- Benefit strip ---------- */
[data-theme="tidal-form"] .benefit { font-size: 15px; }
@media (max-width: 760px) {
  /* Each label stays on one line ("Ships same day" is the longest) down to 320px. */
  [data-theme="tidal-form"] .benefit { justify-content: flex-start; padding: 4px 2px; font-size: 12px; line-height: 1.35; white-space: nowrap; }
}
@media (max-width: 360px) {
  [data-theme="tidal-form"] .benefit { padding-inline: 0; font-size: 11px; }
}

/* ---------- Collection & catalog ---------- */
[data-theme="tidal-form"] .eyebrow { font-size: 12px; line-height: 1.6; }
@media (max-width: 760px) { [data-theme="tidal-form"] .eyebrow { letter-spacing: .16em; } }
[data-theme="tidal-form"] .section-heading p { max-width: 400px; font-size: 14px; line-height: 1.75; }
@media (max-width: 760px) { [data-theme="tidal-form"] .section-heading p { font-size: 15px; } }

[data-theme="tidal-form"] .search-box input { min-height: 44px; font-size: 13px; border-color: var(--tf-field-line); }
[data-theme="tidal-form"] .search-box .icon { top: 50%; transform: translateY(-50%); }
/* Branded clear button instead of Chromium's blue cross. */
[data-theme="tidal-form"] .search-box input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-right: 2px; cursor: pointer;
  background: center / 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102044' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m7 7 10 10M17 7 7 17'/%3E%3C/svg%3E");
}
@media (max-width: 760px) {
  [data-theme="tidal-form"] .search-box input { font-size: 16px; }
}

[data-theme="tidal-form"] .pricing-note { font-size: 12px; line-height: 1.7; }

/* ---------- Story sections ---------- */
[data-theme="tidal-form"] .vt-eyebrow { font-size: 12px; }
[data-theme="tidal-form"] .vt-chapter { width: 30px; height: 30px; font-size: 11px; }
[data-theme="tidal-form"] .vt-sections[data-section-theme] .vt-quality-stage .vt-art-kicker { font-size: 11px; }
/* 74px headings overflowed their half-width columns at 1440 ("A higher / standard.", "More" alone). */
@media (min-width: 761px) {
  [data-theme="tidal-form"] :is(.vt-quality, .vt-shipping, .vt-value) h2 { font-size: clamp(42px, 4.4vw, 64px); }
}
/* Collection -> first story section was 128px on phones (56 + 72) and 219px at 1440; match the ~72/130 rhythm. */
[data-theme="tidal-form"] .collection + .vt-sections .vt-quality { padding-top: 36px; }
@media (max-width: 760px) {
  [data-theme="tidal-form"] .vt-eyebrow { font-size: 12px; letter-spacing: .18em; }
  [data-theme="tidal-form"] .vt-chapter { width: 30px; height: 30px; font-size: 12px; }
  [data-theme="tidal-form"] .collection + .vt-sections .vt-quality { padding-top: 16px; }
  [data-theme="tidal-form"] .vt-sections[data-section-theme] .vt-quality-stage .vt-art-kicker { font-size: 12px; }
}
@media (max-width: 360px) {
  /* 38px left orphans at 320: "More / momentum.", "A higher / standard.", CTA "next" alone. */
  [data-theme="tidal-form"] .vt-sections h2 { font-size: 30px; }
  [data-theme="tidal-form"] .vt-sections .vt-cta-band h2 { font-size: 36px; }
}
/* The caption panel (#f8fcff) had no visible edge on the #f6fafb page; one hairline frames image + caption. */
[data-theme="tidal-form"] .vt-sections[data-section-theme] .vt-quality-art { border: 1px solid #d3e3ea; }
[data-theme="tidal-form"] .vt-value-intro h2 > span { color: #6d819a; } /* large text: 3.8:1 passes 3:1, keeps the two-tone */
[data-theme="tidal-form"] .vt-principle-aside { font-size: 13px; }
@media (max-width: 760px) { [data-theme="tidal-form"] .vt-principle-aside { font-size: 14px; } }

/* Shipping card: darker greens on the mint gradient (#527976 / #668d80 were 4.2:1 / 3.2:1). */
[data-theme="tidal-form"] .vt-shipping { --vt-muted: #456a66; }
[data-theme="tidal-form"] .vt-steps p { color: #43675b; font-size: 14px; }
[data-theme="tidal-form"] .vt-step-number { color: #4a6f63; font-size: 12px; }
@media (max-width: 760px) { [data-theme="tidal-form"] .vt-steps p { font-size: 15px; } }
/* The kit photo is a dark studio shot: frame it as a still photograph instead of a tilting black box
   that left mint bands above and below it and peeking orbit rings. */
[data-theme="tidal-form"] .vt-shipping-art.has-kit .vt-shipping-stage { height: auto; aspect-ratio: 3 / 2; border-radius: 22px 8px 22px 8px; background: #0b0f14; box-shadow: 0 18px 40px #0f3a3224; }
[data-theme="tidal-form"] .vt-shipping-art.has-kit .vt-shipping-stage .vt-shipping-kit { inset: 0; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; animation: none; transform: none; filter: none; }
[data-theme="tidal-form"] .vt-shipping-art.has-kit .vt-ship-orbit { display: none; }
@media (max-width: 760px) {
  [data-theme="tidal-form"] .vt-shipping-art.has-kit .vt-shipping-stage { border-radius: 18px 6px 18px 6px; }
}

/* CTA band (mint gradient): eyebrow 3.1:1, paragraph 3.2:1, fine print 2.7:1 -> all >= 4.6:1. */
[data-theme="tidal-form"] .vt-cta-band > .vt-eyebrow { color: #4d6d79; font-size: 12px; }
[data-theme="tidal-form"] .vt-cta-band > p:not(.vt-eyebrow) { color: #506a7c; }
[data-theme="tidal-form"] .vt-cta-fine { color: #4e6a70; font-size: 12px; letter-spacing: .04em; }
/* The shared focus ring is currentColor, which is white on this dark pill. */
[data-theme="tidal-form"] .vt-sections .vt-primary-link:focus-visible { outline-color: #102044; }
[data-theme="tidal-form"] .vt-sections .vt-primary-link { font-size: 14px; font-weight: 500; }

/* ---------- Footer ---------- */
[data-theme="tidal-form"] .footer p { font-size: 13px; line-height: 1.8; }
[data-theme="tidal-form"] .footer h4 { font-size: 13px; }
[data-theme="tidal-form"] .footer ul { font-size: 13px; }
[data-theme="tidal-form"] .footer .button.small { min-height: 44px; font-size: 14px; }
[data-theme="tidal-form"] .footer-bottom { font-size: 12px; line-height: 1.7; }
[data-theme="tidal-form"] .footer-bottom a { min-height: 44px; }

/* ---------- Small print and text buttons ---------- */
[data-theme="tidal-form"] .micro,
[data-theme="tidal-form"] .dialog .micro { font-size: 12px !important; line-height: 1.65 !important; }
[data-theme="tidal-form"] .quantity output { font-size: 15px; }
[data-theme="tidal-form"] .text-button { display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; color: var(--muted); text-underline-offset: 3px; }
@media (max-width: 760px) {
  [data-theme="tidal-form"] .text-button { min-height: 44px; }
}

/* ---------- Resources ---------- */
[data-theme="tidal-form"] .resource-page > p.micro { max-width: 560px; margin-bottom: 0; font-size: 16px !important; line-height: 1.7 !important; }
[data-theme="tidal-form"] .resource-page h1 { margin-bottom: 18px; }
[data-theme="tidal-form"] .resource-card { display: flex; flex-direction: column; align-items: flex-start; }
[data-theme="tidal-form"] .resource-card > .icon { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: #e3f3fc; color: var(--ink); }
[data-theme="tidal-form"] .resource-card:nth-child(2) > .icon { background: #dffaf0; }
[data-theme="tidal-form"] .resource-card h2 { margin: 24px 0 12px; line-height: 1.25; }
[data-theme="tidal-form"] .resource-card p { margin-bottom: 24px; font-size: 14px; line-height: 1.75; }
[data-theme="tidal-form"] .resource-card .button { margin-top: auto; min-height: 46px; font-size: 14px; white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1099px) {
  /* Three columns squeezed the buttons onto two and three lines. */
  [data-theme="tidal-form"] .resource-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  [data-theme="tidal-form"] .resource-page h1 { margin-bottom: 14px; }
  [data-theme="tidal-form"] .resource-page > p.micro { font-size: 16px !important; }
  [data-theme="tidal-form"] .resource-card h2 { margin-top: 20px; }
  [data-theme="tidal-form"] .resource-card p { font-size: 15px; }
}

/* ---------- Dialogs: basket, request/contact form, quality, usage, success ---------- */
[data-theme="tidal-form"] .dialog p { font-size: 14px; line-height: 1.8; }
[data-theme="tidal-form"] .dialog .eyebrow { font-size: 12px; }
[data-theme="tidal-form"] .cart-name small { font-size: 13px; line-height: 1.5; }
[data-theme="tidal-form"] .cart-empty p { font-size: 15px; }
[data-theme="tidal-form"] .field { gap: 8px; font-size: 13px; }
[data-theme="tidal-form"] .field input,
[data-theme="tidal-form"] .field textarea { border-color: var(--tf-field-line); background: #fbfdfe; font-size: 14px; }
[data-theme="tidal-form"] .field input:focus,
[data-theme="tidal-form"] .field textarea:focus { border-color: #2f8f7a; outline: 2px solid #0f7a68; outline-offset: 1px; }
/* The privacy note sat 4px under the textarea with ~60px empty below it. */
[data-theme="tidal-form"] #contact-form > .micro { margin: 14px 0 0; }
[data-theme="tidal-form"] #contact-form .form-status { min-height: 20px; margin: 8px 0 14px; font-size: 13px; }
/* Success: check mark leads, then the heading. */
[data-theme="tidal-form"] .dialog:has(> .success-mark) { display: flex; flex-direction: column; align-items: flex-start; }
[data-theme="tidal-form"] .dialog:has(> .success-mark) > .success-mark { order: -1; margin: 0 0 22px; }
[data-theme="tidal-form"] .quality-list div { font-size: 13px; }
@media (max-width: 760px) {
  [data-theme="tidal-form"] .dialog p { font-size: 14px; }
  [data-theme="tidal-form"] .dialog input,
  [data-theme="tidal-form"] .dialog textarea { font-size: 16px; }
  /* One full-width primary action per phone dialog. */
  [data-theme="tidal-form"] .dialog > .button.primary,
  [data-theme="tidal-form"] .dialog .cart-empty .button.primary,
  [data-theme="tidal-form"] #contact-form > .button.primary { width: 100%; }
  [data-theme="tidal-form"] .dialog:has(> .success-mark) > .button.primary { align-self: stretch; }
  /* Basket rows: at 320 the stepper squeezed the price into "$29.00 /" + "concept price".
     Name + Remove share the top line, price under it, stepper below. */
  [data-theme="tidal-form"] .cart-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img name remove" "img price price" "img deal deal" "img qty qty"; column-gap: 16px; row-gap: 2px; align-items: center; padding: 18px 0; }
  [data-theme="tidal-form"] .cart-row > img { grid-area: img; align-self: start; width: 56px; height: 80px; }
  [data-theme="tidal-form"] .cart-row .cart-name { display: contents; }
  [data-theme="tidal-form"] .cart-name strong { grid-area: name; font-size: 16px; }
  [data-theme="tidal-form"] .cart-name small { grid-area: price; margin: 0 0 10px; font-size: 13px; }
  [data-theme="tidal-form"] .cart-name small.cart-deal { grid-area: deal; margin: -6px 0 10px; }
  [data-theme="tidal-form"] .cart-name .text-button { grid-area: remove; justify-self: end; padding: 0 2px; }
  [data-theme="tidal-form"] .cart-row .quantity { grid-area: qty; justify-self: start; }
}

/* ---------- Researcher gate ---------- */
/* Disabled: pale and flat with dark text (4.8:1), not white text at 45% opacity. */
[data-theme="tidal-form"] .gate-enter:disabled { opacity: 1; background: #e3eaef; border-color: #e3eaef; color: #546879; transform: none; }
[data-theme="tidal-form"] .gate-fine { font-size: 12px !important; line-height: 1.7 !important; }
[data-theme="tidal-form"] .gate-check input { width: 22px; height: 22px; margin-top: 1px; }
[data-theme="tidal-form"] .gate-exit { width: fit-content; margin-inline: auto; padding: 10px 14px; font-size: 13px; color: #4d5f6d; text-align: center; }
/* Top-right vial: kept clear of the card corner at 1440, and fully in view now that the bottles keep their shape. */
[data-theme="tidal-form"] .gate-vials img:nth-child(3) { right: 11%; top: 2%; }
@media (max-width: 760px) {
  /* On phones the card fills the screen and the faded vials sat behind the logo, the exit link and the
     caption with no backing; a quiet tide gradient replaces them. */
  [data-theme="tidal-form"] .gate-vials { display: none; }
  [data-theme="tidal-form"] .verification { background: radial-gradient(ellipse at 20% 0%, #ffffff 0, #eef8fd 45%, #dcf0f6 100%); }
  [data-theme="tidal-form"] .gate-exit { display: flex; min-height: 44px; }
}