/* Public Soft Depth foundation
 *
 * Loaded after refined-theme.css. Every selector is bounded to public product
 * pages or the shared public chrome so authenticated workspaces keep their own
 * design-system contract.
 */

html:not(.dark) body :is(
  .refined-public-tool,
  .public-tool-design,
  [data-public-header],
  footer[data-testid="daylight-site-footer"]
) {
  --public-canvas: #ffffff;
  --public-panel: #f7f8fa;
  --public-control: #ffffff;
  --public-hover: #f1f3f5;
  --public-selected: #eaf1f9;
  --public-menu: #ffffff;
  --public-menu-hover: #f3f5f7;
  --public-hairline: #dfe3e7;
  --public-rim: rgba(23, 29, 35, 0.08);
  --public-ink: #171b1f;
  --public-body: #454c54;
  --public-muted: #6b737c;
  --public-blue: #315f9a;
  --public-blue-hover: #274c7b;
  --public-blue-ink: #315f9a;
  --public-blue-wash: rgba(49, 95, 154, 0.1);
  --public-on-blue: #ffffff;
  --public-shadow-frame: 0 1px 2px rgba(18, 24, 30, 0.04), 0 16px 44px rgba(18, 24, 30, 0.07);
  --public-shadow-menu: 0 18px 48px rgba(18, 24, 30, 0.14);
  --public-content-max: 1120px;
  --public-gutter: clamp(20px, 3.5vw, 32px);
}

html.dark body :is(
  .refined-public-tool,
  .public-tool-design,
  [data-public-header],
  footer[data-testid="daylight-site-footer"]
) {
  --public-canvas: #08090a;
  --public-panel: #101214;
  --public-control: #151719;
  --public-hover: #1b1e21;
  --public-selected: #172231;
  --public-menu: #151719;
  --public-menu-hover: #1d2023;
  --public-hairline: #2b2f34;
  --public-rim: rgba(255, 255, 255, 0.08);
  --public-ink: #f1f2f3;
  --public-body: #c4c9ce;
  --public-muted: #939aa2;
  --public-blue: #406fab;
  --public-blue-hover: #4878b4;
  --public-blue-ink: #98bdf1;
  --public-blue-wash: rgba(71, 125, 189, 0.16);
  --public-on-blue: #ffffff;
  --public-shadow-frame: 0 1px 1px rgba(0, 0, 0, 0.3), 0 20px 54px rgba(0, 0, 0, 0.32);
  --public-shadow-menu: 0 20px 54px rgba(0, 0, 0, 0.42);
  --public-content-max: 1120px;
  --public-gutter: clamp(20px, 3.5vw, 32px);
}

/* Feed the established public aliases from the bounded token set. */
html body :is(.refined-public-tool, .public-tool-design) {
  --site-canvas: var(--public-canvas);
  --site-surface: var(--public-control);
  --site-subtle: var(--public-panel);
  --site-ink: var(--public-ink);
  --site-body: var(--public-body);
  --site-muted: var(--public-muted);
  --site-line: var(--public-hairline);
  --site-primary: var(--public-blue);
  --site-primary-hover: var(--public-blue-hover);
  --site-primarytext: var(--public-on-blue);
  --site-blue: var(--public-blue-ink);
  --site-blue-hover: var(--public-blue-ink);
  --site-bluebg: var(--public-selected);
  background: var(--public-canvas);
  color: var(--public-ink);
  font-family: Inter, Arial, sans-serif;
}

/* Shared public navigation: compact, neutral, and solid when menus open. */
html body [data-public-header] {
  --site-canvas: var(--public-canvas);
  --site-surface: var(--public-control);
  --site-subtle: var(--public-hover);
  --site-ink: var(--public-ink);
  --site-body: var(--public-body);
  --site-muted: var(--public-muted);
  --site-line: var(--public-hairline);
  --site-primary: var(--public-blue);
  --site-primary-hover: var(--public-blue-hover);
  --site-primarytext: var(--public-on-blue);
  --site-blue: var(--public-blue-ink);
  position: sticky;
  background: color-mix(in srgb, var(--public-canvas) 94%, transparent);
  color: var(--public-ink);
  border-color: var(--public-hairline);
  box-shadow: 0 1px 0 var(--public-rim);
  font: 400 14px/20px Inter, Arial, sans-serif;
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}

html body [data-public-header] .cr-header-frame {
  width: 100%;
  max-width: calc(var(--public-content-max) + var(--public-gutter) * 2);
  min-height: 64px;
  padding-inline: var(--public-gutter);
  gap: 16px;
}

html body [data-public-header] .cr-header-logo {
  min-height: 40px;
}

html body [data-public-header] .cr-header-logo img {
  height: 28px;
  max-width: 170px;
}

html body [data-public-header] :is(
  .cr-header-trigger,
  .cr-header-link,
  .cr-header-review,
  .cr-header-mobile-toggle
) {
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 7px;
  font: 500 14px/20px Inter, Arial, sans-serif;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

html body [data-public-header] :is(.cr-header-trigger, .cr-header-link) {
  color: var(--public-body);
}

html body [data-public-header] .cr-header-sign-in {
  margin-left: 6px;
  padding-left: 18px;
  border-color: var(--public-hairline);
}

html body [data-public-header] .cr-header-review {
  background: var(--public-blue);
  color: var(--public-on-blue);
  border-color: var(--public-blue);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

html body [data-public-header] .cr-header-dropdown {
  background: var(--public-menu);
  color: var(--public-ink);
  border-color: var(--public-hairline);
  box-shadow: var(--public-shadow-menu);
}

html body [data-public-header] .cr-header-dropdown {
  width: min(360px, calc(100vw - 40px));
  padding: 8px;
  border-radius: 10px;
}

html body [data-public-header] .cr-header-item {
  padding: 10px 12px;
  border-radius: 7px;
  color: var(--public-ink);
  font: 500 14px/20px Inter, Arial, sans-serif;
  transition: background-color 140ms ease, color 140ms ease;
}

html body [data-public-header] .cr-header-item small {
  margin-top: 2px;
  color: var(--public-muted);
  font: 400 13px/18px Inter, Arial, sans-serif;
}

html body [data-public-header] .cr-header-secondary {
  border-color: var(--public-hairline);
}

html body [data-public-header] .cr-theme-toggle {
  width: 40px;
  height: 40px;
  min-height: 40px;
  border-color: var(--public-hairline);
  border-radius: 7px;
  background: var(--public-control);
  color: var(--public-muted);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

html body [data-public-header] :is(a, summary, button):focus-visible {
  outline: 2px solid var(--public-blue-ink);
  outline-offset: 3px;
}

/* Public sales and tool typography. Inline legacy styles remain underneath. */
html body :is(.refined-public-tool, .public-tool-design) .approved-copy,
html body .refined-public-tool .product-sales-page {
  background: var(--public-canvas);
  color: var(--public-ink);
  font-family: Inter, Arial, sans-serif;
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy .copy-wrap,
html body .refined-public-tool .product-sales-page .ps-wrap {
  width: min(var(--public-content-max), calc(100% - clamp(40px, 7vw, 64px)));
  max-width: var(--public-content-max);
  margin-inline: auto;
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy .copy-hero,
html body .refined-public-tool .product-sales-page .ps-hero {
  padding-block: 56px 48px;
  text-align: left;
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy h1,
html body .refined-public-tool .product-sales-page .ps-hero h1 {
  max-width: 980px;
  margin-inline: 0;
  color: var(--public-ink);
  font: 500 clamp(38px, 5vw, 64px)/1.08 Inter, Arial, sans-serif;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy :is(.copy-lead, .copy-hero > .copy-wrap > p),
html body .refined-public-tool .product-sales-page .ps-hero .ps-lead {
  max-width: 760px;
  margin: 24px 0;
  color: var(--public-body);
  font: 400 20px/1.65 Inter, Arial, sans-serif;
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy :is(.copy-crumbs, .copy-member-badge),
html body .refined-public-tool .product-sales-page :is(.ps-breadcrumb, .ps-note) {
  color: var(--public-muted);
  font: 400 14px/20px Inter, Arial, sans-serif;
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy .copy-crumbs {
  justify-content: flex-start;
  margin-bottom: 30px;
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy .copy-hero[data-tool="resume-raven"] .copy-hero-actions {
  justify-content: flex-start;
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy .copy-member-badge {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 8px 0;
  margin: 8px 0 0;
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy :is(.copy-section, .copy-questions),
html body .refined-public-tool .product-sales-page :is(.ps-section, .ps-start) {
  padding-block: 72px;
  background: var(--public-canvas);
  color: var(--public-body);
  border-color: var(--public-hairline);
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy :is(.copy-benefits, .copy-proof, .copy-closing),
html body .refined-public-tool .product-sales-page :is(.ps-wash, .ps-start) {
  background: var(--public-panel);
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy h2,
html body .refined-public-tool .product-sales-page :is(.ps-section, .ps-start, .ps-faq) h2 {
  color: var(--public-ink);
  font: 500 clamp(28px, 3.5vw, 40px)/1.17 Inter, Arial, sans-serif;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy h3,
html body .refined-public-tool .product-sales-page h3 {
  color: var(--public-ink);
  font: 500 22px/1.35 Inter, Arial, sans-serif;
  letter-spacing: -0.025em;
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy :is(p, li),
html body .refined-public-tool .product-sales-page :is(.ps-section-intro > p, .ps-feature-grid p, .ps-start-description, .ps-faq-answer p) {
  color: var(--public-body);
  font-size: 17px;
  line-height: 1.65;
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy :is(.copy-action),
html body .refined-public-tool .product-sales-page :is(.ps-button, .ts-button) {
  min-height: 48px;
  padding: 11px 20px;
  gap: 12px;
  border: 1px solid var(--public-blue);
  border-radius: 7px;
  background: var(--public-blue);
  color: var(--public-on-blue);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  font: 500 16px/24px Inter, Arial, sans-serif;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy :is(.copy-tabs button, .tool-review-controls button),
html body .refined-public-tool .product-sales-page .ps-text-link {
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--public-hairline);
  border-radius: 7px;
  background: var(--public-control);
  color: var(--public-ink);
  font: 500 14px/20px Inter, Arial, sans-serif;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy .copy-tabs button[aria-selected="true"] {
  background: var(--public-selected);
  color: var(--public-ink);
  border-color: color-mix(in srgb, var(--public-blue) 48%, var(--public-hairline));
  box-shadow: inset 0 0 0 1px var(--public-rim);
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy :is(details, .copy-proof-card),
html body .refined-public-tool .product-sales-page :is(.ps-faq-inner, .ps-faq-items, .ps-faq details) {
  border-color: var(--public-hairline);
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy summary,
html body .refined-public-tool .product-sales-page .ps-faq summary {
  min-height: 56px;
  padding-block: 16px;
  color: var(--public-ink);
  font: 500 17px/1.5 Inter, Arial, sans-serif;
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy :is(a, button, summary):focus-visible,
html body .refined-public-tool .product-sales-page :is(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--public-blue-ink);
  outline-offset: 3px;
}

/* Product demonstrations get the expressive layer; reading sections stay flat. */
html body :is(.refined-public-tool, .public-tool-design) .approved-copy :is(.copy-product-frame, .product-capture),
html body .refined-public-tool .product-sales-page :is(.ps-hero-tool, .public-raven-panel) {
  border: 1px solid var(--public-hairline);
  border-radius: 10px;
  background:
    radial-gradient(circle at 12% 0%, var(--public-blue-wash), transparent 44%),
    var(--public-panel);
  box-shadow: var(--public-shadow-frame);
}

html body :is(.refined-public-tool, .public-tool-design) .approved-copy :is(.copy-product-frame, .product-capture) {
  padding: clamp(8px, 1.5vw, 14px);
}

html body .refined-public-tool .public-raven-panel :is(.public-raven-panel-bar, .public-raven-composer) {
  background: var(--public-control);
  border-color: var(--public-hairline);
}

html body .refined-public-tool .public-raven-composer textarea {
  background: transparent;
  color: var(--public-ink);
}

html body .refined-public-tool .public-raven-consent input {
  accent-color: var(--public-blue);
}

html body .refined-public-tool .ts-calculator-tool :is(input, select, textarea) {
  min-height: 40px;
  border-color: var(--public-hairline);
  border-radius: 7px;
  background: var(--public-control);
  color: var(--public-ink);
  font: 400 15px/20px Inter, Arial, sans-serif;
}

/* Resume Raven has no .resume-public hook; this stable public-only marker is
 * its bounded equivalent inside AppLayout's public-tool-design wrapper. */
html body .public-tool-design .approved-copy[data-testid="resume-raven-public-intro"] {
  background: var(--public-canvas);
  color: var(--public-ink);
}

/* Shared React and SSR footer. Both render the same data-testid. */
html body footer[data-testid="daylight-site-footer"] {
  --site-canvas: var(--public-canvas);
  --site-surface: var(--public-control);
  --site-subtle: var(--public-hover);
  --site-ink: var(--public-ink);
  --site-body: var(--public-body);
  --site-muted: var(--public-muted);
  --site-line: var(--public-hairline);
  --site-blue: var(--public-blue-ink);
  --site-blue-hover: var(--public-blue-ink);
  background: var(--public-canvas) !important;
  color: var(--public-body);
  border-color: var(--public-hairline);
  font: 400 14px/1.65 Inter, Arial, sans-serif;
}

html body footer[data-testid="daylight-site-footer"] > div > div,
html body footer[data-testid="daylight-site-footer"] .footer-inner {
  width: 100%;
  max-width: var(--public-content-max);
  margin-inline: auto;
}

html body footer[data-testid="daylight-site-footer"] .footer-grid {
  gap: 28px clamp(24px, 3vw, 40px);
}

html body footer[data-testid="daylight-site-footer"] .footer-col h3 {
  margin-bottom: 10px;
  color: var(--public-ink);
  font: 500 16px/22px Inter, Arial, sans-serif !important;
  letter-spacing: -0.01em;
}

html body footer[data-testid="daylight-site-footer"] :is(
  .footer-col li,
  .footer-col li a,
  .footer-utilities a,
  .footer-legal nav a
) {
  color: var(--public-muted) !important;
  font: 400 14px/20px Inter, Arial, sans-serif !important;
}

html body footer[data-testid="daylight-site-footer"] .footer-legal-copy p,
html body footer[data-testid="daylight-site-footer"] :is(.footer-disclaimer, .footer-copyright p) {
  color: var(--public-muted);
  font: 400 14px/1.6 Inter, Arial, sans-serif !important;
}

html body footer[data-testid="daylight-site-footer"] :is(.footer-legal, .footer-copyright) {
  border-color: var(--public-hairline);
}

html body footer[data-testid="daylight-site-footer"] :is(.footer-social a, a.rounded-full) {
  width: 40px;
  height: 40px;
  padding: 0;
  border-color: var(--public-hairline);
  background: var(--public-control);
  color: var(--public-muted) !important;
  box-shadow: 0 1px 1px var(--public-rim);
}

html body footer[data-testid="daylight-site-footer"] [data-testid="link-footer-home"] img {
  width: 184px;
  height: auto;
  max-width: 100%;
  filter: none;
}

html.dark body footer[data-testid="daylight-site-footer"] [data-testid="link-footer-home"] img {
  filter: brightness(0) invert(1);
}

html body footer[data-testid="daylight-site-footer"] a:focus-visible {
  outline: 2px solid var(--public-blue-ink);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  html body [data-public-header] :is(.cr-header-trigger, .cr-header-link, .cr-header-item):hover {
    background: var(--public-menu-hover);
    color: var(--public-ink);
  }

  html body [data-public-header] .cr-header-review:hover,
  html body :is(.refined-public-tool, .public-tool-design) .approved-copy .copy-action:hover,
  html body .refined-public-tool .product-sales-page :is(.ps-button, .ts-button):hover {
    background: var(--public-blue-hover);
    border-color: var(--public-blue-hover);
    color: var(--public-on-blue);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--public-blue) 24%, transparent);
    transform: translateY(-1px);
  }

  html body :is(.refined-public-tool, .public-tool-design) .approved-copy :is(.copy-tabs button, .tool-review-controls button):hover:not([aria-selected="true"]),
  html body .refined-public-tool .product-sales-page .ps-text-link:hover {
    background: var(--public-hover);
    border-color: color-mix(in srgb, var(--public-blue) 36%, var(--public-hairline));
    color: var(--public-ink);
  }

  html body footer[data-testid="daylight-site-footer"] a:hover {
    color: var(--public-blue-ink) !important;
  }

  html body footer[data-testid="daylight-site-footer"] :is(.footer-social a, a.rounded-full):hover {
    background: var(--public-hover);
    border-color: color-mix(in srgb, var(--public-blue) 40%, var(--public-hairline));
    color: var(--public-blue-ink) !important;
    transform: translateY(-1px);
  }
}

@media (max-width: 1279px) {
  html body [data-public-header] .cr-header-frame {
    min-height: 64px;
  }

  html body [data-public-header] .cr-header-collapse[open] > .cr-header-navigation {
    padding: 12px var(--public-gutter) 20px;
    background: var(--public-menu);
    color: var(--public-ink);
    border-color: var(--public-hairline);
    box-shadow: var(--public-shadow-menu);
  }

  html body [data-public-header] .cr-header-sign-in {
    margin: 4px 0 0;
    padding-left: 12px;
    border-color: var(--public-hairline);
  }
}

@media (max-width: 640px) {
  html:not(.dark) body :is(
    .refined-public-tool,
    .public-tool-design,
    [data-public-header],
    footer[data-testid="daylight-site-footer"]
  ),
  html.dark body :is(
    .refined-public-tool,
    .public-tool-design,
    [data-public-header],
    footer[data-testid="daylight-site-footer"]
  ) {
    --public-gutter: 20px;
  }

  html body [data-public-header] :is(.cr-header-trigger, .cr-header-link, .cr-header-review, .cr-header-mobile-toggle),
  html body [data-public-header] .cr-theme-toggle {
    min-height: 44px;
  }

  html body [data-public-header] .cr-theme-toggle {
    width: 44px;
    height: 44px;
  }

  html body :is(.refined-public-tool, .public-tool-design) .approved-copy .copy-hero,
  html body .refined-public-tool .product-sales-page .ps-hero {
    padding-block: 36px 40px;
  }

  html body :is(.refined-public-tool, .public-tool-design) .approved-copy h1,
  html body .refined-public-tool .product-sales-page .ps-hero h1 {
    font-size: clamp(38px, 11vw, 48px);
  }

  html body :is(.refined-public-tool, .public-tool-design) .approved-copy :is(.copy-lead, .copy-hero > .copy-wrap > p),
  html body .refined-public-tool .product-sales-page .ps-hero .ps-lead {
    font-size: 18px;
  }

  html body :is(.refined-public-tool, .public-tool-design) .approved-copy :is(.copy-section, .copy-questions),
  html body .refined-public-tool .product-sales-page :is(.ps-section, .ps-start) {
    padding-block: 48px;
  }

  html body :is(.refined-public-tool, .public-tool-design) .approved-copy :is(.copy-tabs button, .tool-review-controls button),
  html body .refined-public-tool .product-sales-page .ps-text-link,
  html body .refined-public-tool .ts-calculator-tool :is(input, select, textarea) {
    min-height: 44px;
  }

  html body footer[data-testid="daylight-site-footer"] > div > div,
  html body footer[data-testid="daylight-site-footer"] .footer-inner {
    padding-block: 32px;
  }
}

@media (max-width: 380px) {
  html body [data-public-header] .cr-header-frame {
    padding-inline: 16px;
    gap: 8px;
  }

  html body [data-public-header] .cr-header-logo img {
    width: 124px;
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body [data-public-header] *,
  html body footer[data-testid="daylight-site-footer"] *,
  html body :is(.refined-public-tool, .public-tool-design) .approved-copy *,
  html body .refined-public-tool .product-sales-page * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}