@layer reset, styles, prewind;

@import url("theme.css");
@import url("typography.css");
@import url("forms.css");
@import url("ui.css");
@import url("prewind.css");

@layer styles {
  .flea-logo { display:block; width:166px; height:40px; max-width:100%; }
  @media (max-width:640px) { .flea-logo { width:141px; height:34px; } }
  /* Shared proportions for the small, single-purpose owner screens. */
  .admin-access { max-width:29rem; margin:clamp(0rem,4vh,3rem) auto; padding:var(--space-lg); border:1px solid var(--light); border-radius:var(--rounded-lg); background:var(--white); box-shadow:0 8px 32px rgb(0 0 0 / .035); }
  .admin-access > h1 { letter-spacing:-.035em; }
  .admin-access > p { font-size:var(--text-base); }
  .admin-access > p:last-child { font-size:max(.875rem,var(--text-sm)); }
  .container { min-width:0; max-width:100%; }
  .admin-access form { margin-block:var(--space-lg); }
  .admin-access .form-field { margin-bottom:var(--space-md); font-size:var(--text-sm); }
  .admin-access input { font-size:max(1rem,var(--text-base)); }
  .admin-access .code-input { max-width:none; }
  .admin-access [role="alert"],.admin-access [role="status"] { padding:var(--space-sm); border:1px solid var(--light); border-radius:var(--rounded-lg); background:var(--lighter); }
  main > .container > h1 { max-width:20ch; }
  main > .container > h1:first-child { margin-top:0; }
  main > .container > p { max-width:58ch; }
  .desktop-navigation { display:flex; gap:var(--space-md); }
  .mobile-menu-toggle { display:none; align-items:center; justify-content:center; width:48px; height:48px; padding:8px; border:0; background:transparent; color:var(--black); }
  .mobile-menu-toggle:hover { background:transparent; }
  .mobile-menu-toggle span { display:block; width:30px; height:22px; background:linear-gradient(currentColor,currentColor) top/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) bottom/100% 2px no-repeat; }
  #mobile-navigation { margin:0 0 0 auto; inset:var(--flea-toolbar-height,0px) 0 0; width:min(22rem,100%); height:calc(100dvh - var(--flea-toolbar-height,0px)); overflow:auto; padding:var(--space-md); border:0; background:var(--white); color:var(--black); opacity:0; transform:translateX(24px); }
  #mobile-navigation:popover-open { opacity:1; transform:translateX(0); }
  #mobile-navigation::backdrop { inset:var(--flea-toolbar-height,0px) 0 0; background:#0005; opacity:0; }
  #mobile-navigation:popover-open::backdrop { opacity:1; }
  @media (prefers-reduced-motion:no-preference) {
    #mobile-navigation { transition:opacity 180ms ease,transform 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete; }
    #mobile-navigation::backdrop { transition:opacity 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete; }
    @starting-style {
      #mobile-navigation:popover-open { opacity:0; transform:translateX(24px); }
      #mobile-navigation:popover-open::backdrop { opacity:0; }
    }
  }
  #mobile-navigation nav { display:flex; flex-direction:column; gap:var(--space-md); }
  #mobile-navigation button[popovertargetaction="hide"] { position:relative; width:44px; height:44px; padding:0; border:0; background:transparent; color:inherit; font-size:0; }
  #mobile-navigation button[popovertargetaction="hide"]::before,
  #mobile-navigation button[popovertargetaction="hide"]::after { content:""; position:absolute; top:50%; left:50%; width:24px; height:2px; background:currentColor; transform:translate(-50%,-50%) rotate(45deg); }
  #mobile-navigation button[popovertargetaction="hide"]::after { transform:translate(-50%,-50%) rotate(-45deg); }
  @media (max-width: 767px) {
    .desktop-navigation,header > nav > a[href="/admin"] { display:none; }
    .mobile-menu-toggle { display:inline-flex; margin-left:auto; }
  }
  .contact-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:var(--space-xl); }
  @media (max-width: 760px) { .contact-layout { grid-template-columns:minmax(0,1fr); } }
  .team-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-md); }
  .team-grid article > :last-child > p:last-child { margin-bottom:0; }
  @media (max-width: 900px) { .team-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width: 560px) { .team-grid { grid-template-columns:minmax(0,1fr); } }
  html { scroll-behavior:smooth; scroll-padding-top:6rem; scrollbar-color:var(--light) var(--white); }
  ::selection { background:var(--brand-1); color:var(--white); }
  :is(input,textarea) { caret-color:var(--brand-1); }
  :is(h1,h2,h3,section)[id] { scroll-margin-top:6rem; }
  .site-header { z-index:20; border-bottom:1px solid transparent; }
  .wordmark { font-size:2rem; font-weight:800; letter-spacing:-.04em; line-height:1; }
  .wordmark svg { width:2rem; height:2rem; color:var(--brand-1); }
  .site-header > nav { min-height:5rem; }
  .desktop-navigation { margin-left:auto; }
  .desktop-navigation a { min-height:44px; display:inline-flex; align-items:center; font-weight:550; font-size:.95rem; }
  nav a:hover { color:var(--brand-1); }
  .skip-link { position:fixed; top:1rem; left:1rem; z-index:100; padding:1rem; background:var(--white); transform:translateY(-200%); }
  .skip-link:focus { transform:translateY(0); }
  .hero h1 { font-size:clamp(2.7rem,4.3vw,4.125rem); font-weight:800; line-height:1.02; letter-spacing:-.04em; text-wrap:balance; max-width:none; }
  .hero-intro { font-size:clamp(1.05rem,1.4vw,1.25rem); line-height:1.55; max-width:42ch; }
  .hero > * { min-width:0; }
  .import-line { border:1px solid var(--light); border-radius:var(--rounded); background:var(--lighter); }
  .import-line code { background:none; color:var(--brand-2); padding:var(--space-xs) var(--space-sm); font-size:clamp(.8rem,.94vw,.95rem); white-space:nowrap; overflow-x:auto; }
  .copy-button { flex-shrink:0; border:0; border-radius:var(--rounded); background:transparent; padding:.6rem; min-width:44px; min-height:44px; color:var(--dark); }
  .copy-button svg { width:19px; height:19px; }
  .demo { font-size:clamp(.85rem,1.05vw,1rem); line-height:1.4; border:1px solid var(--light); border-radius:var(--rounded); background:var(--white); }
  .demo pre { font-size:clamp(.85rem,1.04vw,1rem); line-height:1.4; margin-block:.4rem 1rem; padding:.75rem; }
  .demo-result { min-height:5.5rem; border-radius:var(--rounded); overflow:auto; }
  .demo-result > span { min-width:5rem; text-align:center; }
  .demo-note { font-size:.9rem; line-height:1.5; margin-top:.75rem; margin-bottom:0; }
  .feature-row { border-top:1px solid var(--light); }
  .feature-row h2 { font-size:clamp(1.2rem,1.7vw,1.5rem); font-weight:650; letter-spacing:-.025em; }
  .feature-row p { font-size:1rem; line-height:1.6; margin-block:.75rem 0; max-width:44ch; }
  .feature-row pre { font-size:.9rem; margin:0; }
  .feature-row article { min-width:0; }
  .feature-row article + article { border-top:1px solid var(--light); }
  .feature-heading svg { color:var(--brand-1); width:1.5rem; height:1.5rem; flex-shrink:0; }
  .feature-heading h2 { margin:0; }
  .comparison h2 { font-size:clamp(1.7rem,2.5vw,2.45rem); font-weight:750; }
  .section-rule { border-top:1px solid var(--light); }
  .theme-example { --brand-1:#08754b; --brand-1-light:#edf6f0; --brand-2:#075332; border:1px solid var(--light); border-radius:var(--rounded); }
  .theme-example[data-theme="blue"] { --brand-1:#2659b8; --brand-1-light:#eaf0fc; --brand-2:#183d83; }
  .theme-example[data-theme="plum"] { --brand-1:#864177; --brand-1-light:#f7edf4; --brand-2:#622c58; }
  .theme-choices { border:0; padding:0; }
  .theme-choices legend { font-size:.9rem; font-weight:600; margin-bottom:.65rem; }
  .theme-choices label { display:inline-flex; align-items:center; gap:.4rem; min-height:44px; cursor:pointer; font-size:.9rem; }
  .theme-choices input { accent-color:var(--brand-1); width:1.1rem; height:1.1rem; }
  .theme-example code { font-size:.85rem; }
  .theme-preview { color:var(--black); border-radius:var(--rounded); }
  .theme-preview h3 { margin:0; font-size:1.6rem; }
  .theme-preview p { margin-block:.5rem 1.25rem; }
  .step-list { padding:0; list-style:none; counter-reset:setup; }
  .step-list li { counter-increment:setup; position:relative; padding-left:2.5rem; margin-top:1.5rem; }
  .step-list li::before { content:counter(setup); position:absolute; left:0; top:.1rem; width:1.65rem; height:1.65rem; border:1px solid var(--light); border-radius:50%; text-align:center; font-size:.85rem; font-weight:650; }
  .step-list h3 { font-size:1.1rem; margin:0; }
  .step-list p { margin-top:.25rem; }
  details { border-bottom:1px solid var(--light); padding-block:var(--space-sm); }
  summary { cursor:pointer; font-weight:650; min-height:44px; align-content:center; }
  .docs-shell { align-items:flex-start; }
  .docs-index { position:sticky; top:6rem; flex:0 0 12rem; font-size:.9rem; }
  .docs-index summary { display:none; }
  .docs-index nav { display:flex; flex-direction:column; gap:.6rem; }
  .docs-index a { color:var(--dark); text-decoration:none; padding-block:.25rem; }
  .docs-index a:hover { color:var(--brand-1); }
  .docs-content { min-width:0; max-width:76ch; }
  .docs-content > h1 { font-size:clamp(2.4rem,4vw,4rem); font-weight:750; }
  .docs-content :is(h2,h3) { scroll-margin-top:6rem; }
  .docs-content h2 { font-size:2rem; margin-top:3.5rem; }
  .docs-content h3 { font-size:1.35rem; margin-top:2.5rem; }
  .docs-content pre { margin-block:1.5rem; }
  .docs-content table { font-size:.9rem; }
  .docs-content th { white-space:nowrap; }
  .site-footer { font-size:.9rem; }
  .site-footer a { text-decoration:none; }
  .site-footer a:hover { text-decoration:underline; }
  @media (max-width:767px) {
    .docs-index { position:static; width:100%; flex-basis:auto; border-bottom:1px solid var(--light); padding-bottom:1rem; }
    .docs-index summary { display:list-item; }
  }
  @media (max-width:1023px) {
    .hero h1 { max-width:18ch; }
    .hero .demo { margin-top:1rem; }
    .feature-row article { gap:var(--space-sm); }
  }
  @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

  nav > a,.desktop-navigation > a {
    text-decoration: none;
    color: var(--darker);
  }

  /* Full-height shell with independently scrolling navigation and editing. */
  .admin-shell {
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }
  .admin-main { min-height: 0; overflow: auto; }
  .admin-workspace {
    height: 100%;
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
  }
  .admin-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .admin-page-list {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }
  .admin-page-list a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }
  .admin-page-list a[aria-current="page"] {
    background: var(--white);
    color: var(--black);
    font-weight: var(--font-semibold);
  }
  .admin-content { min-width: 0; overflow-y: auto; }
  .admin-panel { max-width: 56rem; }
  @media (max-width: 640px) {
    .admin-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 30dvh) minmax(0, 1fr); }
  }
  .blog-public { max-width: 52rem; }
  .blog-cover { display:block; width:100%; height:auto; margin-block:var(--space-lg); }
  .blog-body { overflow-wrap:anywhere; }
  .blog-post-list { list-style:none; padding:0; }
  .blog-post-list li { display:flex; justify-content:space-between; gap:var(--space-md); padding-block:var(--space-md); border-bottom:1px solid var(--light); }
  .blog-format { display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-block:var(--space-sm); }
  .blog-format button { font-size:var(--text-sm); }
  .blog-rich-editor { min-height:18rem; padding:var(--space-md); background:var(--white); border:1px solid var(--light); border-radius:var(--rounded); overflow-wrap:anywhere; }
  .blog-rich-editor:focus-visible { outline:2px solid var(--brand-1); outline-offset:2px; }
  .blog-cover-field { margin-block:var(--space-lg); padding:var(--space-md); border:1px solid var(--light); }
  .blog-cover-preview { display:block; max-width:100%; width:20rem; max-height:15rem; object-fit:contain; margin-block:var(--space-sm); }
  .blog-cover-preview[hidden] { display:none; }
  .blog-library { width:min(44rem,calc(100vw - 2rem)); max-height:80dvh; overflow:auto; padding:var(--space-lg); border:0; border-radius:var(--rounded); background:var(--white); }
  .blog-library::backdrop { background:#0005; }
  .blog-photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(8rem,1fr)); gap:var(--space-sm); margin-block:var(--space-md); }
  .blog-photo-grid img { display:block; width:100%; height:6rem; object-fit:cover; }
  .blog-photo-grid button { overflow-wrap:anywhere; }

  #blog-editor { max-width:none; }
  #blog-editor [hidden] { display:none; }
  #blog-actions { position:sticky; bottom:0; background:var(--bg-color); border-top:1px solid var(--light); }

}

@layer styles {
  .site-header { border-bottom-color:color-mix(in srgb, var(--light) 65%, transparent); }
  .desktop-navigation a { position:relative; }
  .desktop-navigation a::after { content:""; position:absolute; bottom:.4rem; left:0; right:0; height:1px; background:var(--brand-1); transform:scaleX(0); transform-origin:left; }
  .desktop-navigation a:hover::after,.desktop-navigation a:focus-visible::after { transform:scaleX(1); }
  .import-line:focus-within { border-color:var(--brand-1); }
  .copy-button:hover { color:var(--brand-1); background:var(--brand-1-light); }
  .demo pre { border-radius:var(--rounded-sm); }
  .demo-result > span { font-weight:600; }
  .spacing-controls { font-size:.85rem; }
  .spacing-options { padding:3px; border:1px solid var(--light); border-radius:var(--rounded); background:var(--lighter); }
  .spacing-options button { min-width:44px; min-height:44px; padding:.45rem .7rem; border:0; border-radius:.5rem; font-size:.75rem; letter-spacing:.03em; background:transparent; color:var(--dark); }
  .spacing-options button[aria-pressed="true"] { background:var(--brand-1); color:var(--white); }
  .comparison { margin-top:var(--space-lg); }
  .comparison h2 { max-width:24ch; font-size:clamp(1.9rem,3.3vw,3.2rem); line-height:1.08; }
  .comparison-intro { max-width:62ch; margin-block:var(--space-sm) var(--space-md); color:var(--dark); line-height:1.55; }
  .comparison-scroll { overflow-x:auto; border:1px solid var(--light); border-radius:var(--rounded-lg); }
  .comparison-table { min-width:42rem; margin:0; table-layout:fixed; }
  .comparison-label { width:19%; }
  .comparison-table :is(th,td) { padding:clamp(1rem,1.6vw,1.5rem); vertical-align:top; }
  .comparison-table thead th { font-size:1.3rem; font-weight:750; }
  .comparison-table th { background:transparent; }
  .comparison-table :is(th,td):nth-child(2) { background:var(--brand-1-light); }
  .comparison-table tbody th { font-size:.9rem; font-weight:650; color:var(--dark); }
  .comparison-table td { font-size:.95rem; line-height:1.55; }
  .comparison-table td strong { color:var(--black); font-weight:700; }
  .comparison-table td p { margin:.5rem 0 0; }
  .comparison-table tbody tr:last-child > * { border-bottom:0; }
  .comparison-close > p { max-width:68ch; }
  .comparison-close > a { flex-shrink:0; font-weight:600; white-space:nowrap; }
  .comparison-sources { max-width:90ch; font-size:max(.8rem,var(--text-sm)); line-height:1.6; }
  .comparison-scroll-hint { font-size:.8rem; }
  #theming { margin-top:var(--space-xl); }
  main > section > div > div > h2 { font-weight:700; }
  .theme-choices input { cursor:pointer; }
  .theme-choices label:has(input:checked) { color:var(--brand-1); font-weight:650; }
  .theme-preview { overflow:hidden; }
  .docs-index nav a { border-radius:var(--rounded-sm); text-underline-offset:.25em; }
  .docs-index nav a:hover { text-decoration:underline; }
  @media (prefers-reduced-motion:no-preference) {
    .desktop-navigation a::after { transition:transform var(--motion-fast) var(--ease-out); }
    .ui-button,.copy-button { transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease,filter var(--motion-fast) ease; }
    .ui-button svg { transition:transform var(--motion-change) var(--ease-out); }
    .ui-button:hover svg { transform:translateX(3px); }
    .import-line { transition:border-color var(--motion-fast) ease; }
    .spacing-options button { transition:color var(--motion-fast) ease,background-color var(--motion-fast) ease; }
    .theme-preview,.theme-preview .ui-button { transition:background-color var(--motion-change) ease,color var(--motion-change) ease; }
  }
  @media (max-width:767px) {
    .demo { align-self:stretch; }
    .comparison { margin-top:var(--space-md); }
    .comparison-close > a { min-height:44px; }
    .comparison-table { min-width:38rem; }
    .comparison-label { width:17%; }
  }
}

@layer styles {
  pre code { font-size:inherit; }
  .docs-content pre { font-size:max(.85rem,.9em); }
}

@layer styles {
  pre,.import-line { background:var(--code-bg); color:var(--code-text); color-scheme:dark; scrollbar-color:var(--code-rule) var(--code-bg); }
  pre code { color:inherit; background:none; }
  .import-line { border-color:var(--code-rule); }
  .import-line code { color:var(--code-text); }
  .import-line:focus-within { border-color:var(--code-blue); }
  .import-line .copy-button { color:var(--code-text); }
  .import-line .copy-button:hover { color:var(--code-blue); background:var(--code-highlight); }
  .import-line .copy-button:focus-visible { outline-color:var(--code-blue); outline-offset:-3px; }
  :is(pre,.import-line) ::selection { background:var(--code-highlight); color:var(--code-text); }
  .syntax-tag,.syntax-attribute,.syntax-function { color:var(--code-blue); }
  .syntax-value { color:var(--code-green); }
  .syntax-property { color:var(--code-red); }
  .syntax-keyword { color:var(--code-purple); }
  .syntax-number { color:var(--code-orange); }
  .syntax-selector { color:var(--code-yellow); }
  .syntax-comment { color:var(--code-comment); }
  .syntax-punctuation { color:var(--code-text); }
}

@layer styles {
  .faq-heading h2 { max-width:12ch; font-size:clamp(2rem,3vw,3rem); line-height:1.08; font-weight:750; letter-spacing:-.035em; }
  .faq-list { flex:2; border-top:1px solid var(--light); }
  .faq-item { padding:0; }
  .faq-item > summary { min-height:5rem; padding-block:var(--space-sm); font-size:clamp(1rem,1.3vw,1.25rem); font-weight:600; line-height:1.4; }
  .faq-item > summary::-webkit-details-marker { display:none; }
  .faq-item > summary:hover,.faq-item[open]:not([data-closing]) > summary { color:var(--brand-1); }
  .faq-item > summary:focus-visible { outline-offset:5px; border-radius:var(--rounded-sm); }
  .faq-indicator { position:relative; width:24px; height:24px; flex-shrink:0; color:var(--brand-1); }
  .faq-indicator::before,.faq-indicator::after { content:""; position:absolute; top:11px; left:4px; width:16px; height:2px; background:currentColor; border-radius:1px; }
  .faq-indicator::after { transform:rotate(90deg); }
  .faq-item[open]:not([data-closing]) .faq-indicator::after { transform:rotate(0); }
  .faq-answer { display:flow-root; overflow:hidden; }
  .faq-answer > p { max-width:65ch; margin:0; padding:0 calc(24px + var(--space-md)) var(--space-md) 0; color:var(--dark); font-size:1rem; line-height:1.65; }
  @media (prefers-reduced-motion:no-preference) {
    .faq-item > summary { transition:color var(--motion-fast) ease; }
    .faq-indicator::after { transition:transform var(--motion-change) var(--ease-out); }
  }
  @media (max-width:767px) {
    .faq-heading h2 { max-width:none; margin-bottom:0; }
    .faq > div { gap:var(--space-md); }
    .faq-item > summary { min-height:4.5rem; }
    .faq-answer > p { padding-right:0; }
  }
}