@layer reset, styles, prewind;
@import url("theme.css");
@import url("typography.css");
@import url("forms.css");
@import url("ui.css");
@import url("navigation.css");
@import url("homepage.css");
@import url("docs-code.css");
@import url("https://unpkg.com/prewindcss@1.3.1");

@layer styles {
  html { scroll-padding-top:7rem; }
  body { margin:0; font-size:1rem; }
  .container { min-width:0; max-width:100%; }
  .footer-inner { --container-padding:var(--space-md) var(--space-lg); }
  .docs-shell { --container-padding:60px var(--space-lg) 100px; }
  .skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:12px 20px; background:white; transform:translateY(-160%); }
  .skip-link:focus { transform:translateY(0); }
  .site-header { position:sticky; top:var(--itsy-toolbar-height,0px); z-index:10; background:var(--hero-ink); color:var(--black); border-bottom:1px solid transparent; }
  .site-header.is-scrolled { background:color-mix(in srgb,var(--hero-ink) 94%,transparent); backdrop-filter:blur(12px); border-bottom-color:var(--light); }
  .site-header .site-links > a:not(.ui-button),.site-header > nav > a { color:var(--black); }
  .site-header :focus-visible,.site-footer :focus-visible { outline-color:var(--brand-1); }
  .site-header .ui-button { background:var(--brand-2); color:var(--hero-ink); border-color:var(--brand-2); }
  .site-header > nav { min-height:76px; column-gap:16px; }
  .wordmark { display:inline-flex; align-items:center; text-decoration:none; }
  .itsy-logo { display:block; width:176px; height:auto; max-width:100%; }
  .site-links > a { text-decoration:none; font-size:.85rem; font-weight:600; }
  .site-links { flex-shrink:0; }
  .site-links .ui-button { white-space:nowrap; }
  .ui-brand-1 { background:var(--accent); color:var(--black); border-color:var(--accent); }
  .ui-button { border-radius:var(--rounded); font-size:.88rem; min-height:48px; padding:13px 22px; gap:20px; }
  .eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 var(--space-md); font-size:.68rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
  .status-dot { display:inline-block; width:6px; height:6px; flex-shrink:0; border-radius:50%; background:var(--brand-1); }
  .quiet-link { color:var(--black); font-size:.86rem; font-weight:600; text-decoration:none; display:inline-flex; gap:12px; align-items:center; }
  a:hover { text-decoration:underline; text-underline-offset:4px; }
  a.ui-button:hover { text-decoration:none; }
  .site-footer { background:var(--hero-ink); color:var(--black); border-top:1px solid var(--light); font-size:.78rem; }
  .footer-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-md); }
  .site-footer p { margin:7px 0 0; color:var(--darker); }
  .site-footer nav a { color:var(--dark); text-decoration:none; }
  .site-footer .copyright { width:100%; font-size:.7rem; }
  .docs-shell { display:grid; grid-template-columns:220px minmax(0,1fr); gap:75px; padding-block:60px 100px; }
  .docs-sidebar { align-self:start; position:sticky; top:125px; max-height:calc(100dvh - 145px); overflow:auto; }
  .docs-sidebar > p { margin:0 0 18px; font-size:.7rem; letter-spacing:.1em; font-weight:600; }
  .docs-toc { display:flex; flex-direction:column; gap:9px; }
  .docs-toc a { font-size:.87rem; text-decoration:none; color:var(--dark); padding-block:2px; }
  .docs-toc a:hover { color:var(--brand-1); text-decoration:underline; }
  .docs-mobile { display:none; }
  .docs-content { min-width:0; max-width:790px; }
  .docs-content > header h1 { font-size:clamp(2.8rem,5vw,4.4rem); margin:0 0 20px; letter-spacing:-.055em; }
  .docs-content > header p { font-size:1.2rem; color:var(--dark); }
  .docs-content section { padding-top:45px; margin-top:40px; border-top:1px solid var(--light); scroll-margin-top:1rem; }
  .docs-content h2 { font-size:2rem; margin:0 0 18px; }
  .docs-content h3 { font-size:1.2rem; margin-top:28px; }
  .docs-content pre { border:1px solid #424957; padding:22px; font-size:.91rem; line-height:1.75; white-space:pre; overflow-wrap:normal; }
  .docs-content p,.docs-content li { color:var(--darker); }
  .notice { padding:20px 24px; border:1px solid var(--light); background:var(--brand-1-light); border-radius:var(--rounded); }
  .notice p { margin:0; }
  .file-list { display:grid; grid-template-columns:max-content 1fr; gap:12px 24px; margin-block:24px; font-size:.9rem; }
  .file-list dt { font-family:ui-monospace,monospace; }
  .file-list dd { margin:0; color:var(--dark); }
  .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); }
  .admin-access form { margin-block:var(--space-lg); }
  .admin-access .form-field { margin-bottom:var(--space-md); }
  .admin-access input { font-size:1rem; }

  .copy-code { position:relative; }
  .copy-code pre { padding-right:72px; }
  .copy-button { position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; min-height:0; padding:0; gap:0; border:1px solid var(--light); border-radius:var(--rounded); background:var(--white); color:var(--darker); }
  .copy-button:hover:not(:disabled) { filter:none; color:var(--brand-1); border-color:var(--brand-1); }
  .copy-button svg { width:18px; height:18px; }
  .copy-icon-done { display:none; }
  .copy-button.is-copied { color:var(--brand-1); border-color:var(--brand-1); }
  .copy-button.is-copied .copy-icon-default { display:none; }
  .copy-button.is-copied .copy-icon-done { display:inline-flex; }
  .visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

  @media (max-width:900px) {
    .docs-shell { grid-template-columns:180px minmax(0,1fr); gap:35px; }
  }
  @media (max-width:640px) {
    .site-header > nav { min-height:68px; }
    .itsy-logo { width:141px; height:auto; }
    .site-links { gap:14px; }
    .site-links .ui-button { padding:10px 12px; min-height:42px; font-size:.75rem; gap:8px; }
    .site-links > a { font-size:.78rem; }
    .eyebrow { font-size:.61rem; }
    .docs-shell { --container-padding:25px var(--space-lg) 70px; display:block; }
    .docs-sidebar { display:none; }
    .docs-mobile { display:block; margin-bottom:35px; border:1px solid var(--light); border-radius:6px; padding:14px 18px; background:var(--lighter); }
    .docs-mobile summary { cursor:pointer; font-weight:600; font-size:.9rem; }
    .docs-mobile nav { margin-top:16px; }
    .file-list { grid-template-columns:1fr; gap:5px; }
    .file-list dd { margin-bottom:10px; }
  }
  @media (max-width:640px) {
    .copy-code pre { padding-right:64px; }
    .copy-button { top:8px; right:8px; }
  }
  @media (max-width:360px) {
    .site-header .itsy-logo { width:122px; height:auto; }
    .site-header .container { --container-padding:0 16px; }
    .site-links { gap:10px; }
    .site-links .ui-button { padding-inline:10px; }
  }
  @media (prefers-reduced-motion:no-preference) {
    html { scroll-behavior:smooth; }
    .site-header { transition:background-color 160ms ease,border-color 160ms ease; }
    .ui-button,.quiet-link,.copy-button { transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease; }
  }
}