/* overflow lives on html only, NOT body -- setting overflow-y on both
   breaks position:sticky for sticky children of body (the docs-nav below)
   since body then becomes its own scroll container instead of just html. */
html{height:auto;overflow-y:auto;overflow-x:hidden;}
body.docs-body{height:auto;overflow:visible;background:var(--bg-0);}

/* ---------- Header ---------- */
.docs-nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg-1) 88%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .2s ease;
}
.docs-nav.is-scrolled{box-shadow:0 6px 24px rgba(0,0,0,.18);}
.docs-nav-inner{
  display:flex;align-items:center;gap:20px;
  max-width:1180px;margin:0 auto;padding:0 32px;height:56px;
}
.home-brand{
  font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px;color:var(--text-0);
  text-decoration:none;flex-shrink:0;
}
.brand-logo{height:24px;width:auto;display:block;flex-shrink:0;}
:root[data-theme="light"] .brand-logo{content:url(logo-full-light.png);}
.docs-back{
  color:var(--text-1);text-decoration:none;font-size:13px;font-weight:500;
  margin-right:auto;transition:color .15s ease;
}
.docs-back:hover{color:var(--text-0);}
.docs-nav-cta{padding:8px 14px;font-size:12.5px;}

/* ---------- Layout ---------- */
.docs-layout{
  max-width:1180px;margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start;
}

.docs-toc{
  position:sticky;top:76px;padding:32px 0 40px;display:flex;flex-direction:column;gap:2px;
  max-height:calc(100vh / var(--page-zoom, 1) - 76px);overflow-y:auto;
}
.docs-toc-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin-bottom:8px;}
.docs-toc a{
  color:var(--text-1);text-decoration:none;font-size:13px;padding:6px 10px;border-radius:7px;
  border-left:2px solid transparent;transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.docs-toc a:hover{color:var(--text-0);background:var(--bg-2);}
.docs-toc a.active{color:var(--accent);border-left-color:var(--accent);background:var(--bg-2);font-weight:600;}

.docs-content{padding:32px 0 80px;min-width:0;}
.docs-title-block{max-width:680px;margin-bottom:44px;}
.docs-title-block h1{font-size:34px;font-weight:700;color:var(--text-0);margin:8px 0 12px;letter-spacing:-.01em;}
.docs-lede{font-size:15.5px;line-height:1.6;color:var(--text-1);margin:0;}

.docs-section{padding:36px 0;border-top:1px solid var(--border);scroll-margin-top:76px;}
.docs-section:first-of-type{border-top:none;}
.docs-section h2{font-size:22px;font-weight:700;color:var(--text-0);margin:0 0 16px;}
.docs-section h3{font-size:15px;font-weight:600;color:var(--text-0);margin:24px 0 10px;}
.docs-section p{font-size:14px;line-height:1.7;color:var(--text-1);margin:0 0 14px;max-width:760px;}
.docs-section p:last-child{margin-bottom:0;}

.docs-steps{margin:0 0 14px;padding-left:22px;color:var(--text-1);font-size:14px;line-height:1.7;max-width:760px;}
.docs-steps li{margin-bottom:4px;}
.docs-steps strong{color:var(--text-0);}

.docs-list{margin:0 0 14px;padding-left:20px;color:var(--text-1);font-size:14px;line-height:1.7;max-width:760px;}
.docs-list li{margin-bottom:10px;}
.docs-list li:last-child{margin-bottom:0;}
.docs-list strong{color:var(--text-0);}

.docs-callout{
  background:var(--bg-1);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:8px;padding:16px 18px;font-size:13.5px;line-height:1.6;color:var(--text-1);
  max-width:760px;margin-top:20px;
}
.docs-callout strong{color:var(--text-0);}

.docs-table{
  width:100%;max-width:820px;border-collapse:collapse;margin:0 0 14px;font-size:13.5px;
}
.docs-table th{
  text-align:left;color:var(--text-2);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:8px 14px;border-bottom:1px solid var(--border);
}
.docs-table td{
  padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text-1);line-height:1.55;vertical-align:top;
}
.docs-table tr:last-child td{border-bottom:none;}
.docs-table td:first-child{color:var(--text-0);font-weight:600;white-space:nowrap;}
/* For tables whose first column holds long literals (storage key names) rather
   than the short labels the nowrap above assumes. Without this the widest key
   props the column open and pushes the whole page into a horizontal scroll --
   measured at 1373px against a 1267px viewport before this existed. */
.docs-table-wrap td:first-child{white-space:normal;}
.docs-table-wrap code{overflow-wrap:anywhere;font-size:12px;}
.docs-context{color:var(--text-2);font-weight:400;}

kbd{
  display:inline-block;background:var(--bg-3);border:1px solid var(--border);border-bottom-width:2px;
  border-radius:5px;padding:2px 7px;font-size:12px;font-family:inherit;color:var(--text-0);
  white-space:nowrap;
}

/* Contact page: the address is the point of each section, so it gets a
   panel of its own rather than sitting in a paragraph. */
.contact-email{
  margin:0 0 16px;padding:14px 18px;border-radius:10px;
  background:color-mix(in srgb, var(--accent) 10%, var(--bg-2));
  border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
}
.contact-email a{
  color:var(--accent);text-decoration:none;font-weight:600;font-size:15px;
  word-break:break-word;
}
.contact-email a:hover{text-decoration:underline;}

/* Release notes. Each release is a .docs-section, so the version/date line
   sits in place of the usual <h2> and the change lists follow underneath.
   The date is a <time> so it stays machine-readable. */
.release-head{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 6px;
}
.release-head h2{margin:0;}
.release-date{
  font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size:12.5px;color:var(--text-2);
}
.release-latest{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.release-summary{margin-bottom:18px !important;}
/* The change-type label is a block so a long list under it stays visually
   attached to its own heading rather than to the list above. */
.release-kind{
  display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-2);margin:18px 0 8px;
}
.release-kind:first-of-type{margin-top:0;}
.release-kind.is-new{color:#4ea672;}
.release-kind.is-improved{color:var(--accent);}
.release-kind.is-fixed{color:#c9922f;}

.docs-footer-cta{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:44px;padding:32px;border-radius:14px;
  background:linear-gradient(135deg, rgba(91,141,239,.14), rgba(224,169,76,.08));
  border:1px solid var(--border);
}
.docs-footer-cta span{font-size:15px;font-weight:600;color:var(--text-0);}

@media (max-width: 900px){
  .docs-layout{grid-template-columns:1fr;padding:0 20px;}
  .docs-toc{
    position:static;max-height:none;padding:20px 0;
    flex-direction:row;flex-wrap:wrap;gap:6px;
  }
  .docs-toc-title{display:none;}
  .docs-toc a{border-left:none;border:1px solid var(--border);}
  .docs-toc a.active{border-color:var(--accent);}
  .docs-content{padding:20px 0 60px;}
}

/* On a phone, the nowrap on the first column (fine on a desktop, where it
   keeps "Create Sketch" on one line) sets a minimum width the table cannot go
   below, so the table pushed the whole PAGE sideways -- measured at 373px
   against a 362px viewport. Letting that column wrap removes the floor.
   `table-layout:fixed` stops one long cell from re-inflating it, and the
   overflow rule is a backstop: anything still too wide scrolls inside its own
   box rather than dragging the page with it. */
@media (max-width: 640px){
  .docs-table{table-layout:fixed;width:100%;display:block;overflow-x:auto;}
  .docs-table td:first-child{white-space:normal;}
  .docs-table td, .docs-table th{word-break:break-word;}
}

/* Very small phones (320px and similar). The header is a fixed-height row of
   three items -- brand, back link, CTA -- and below about 340px they cannot
   fit side by side, so the header itself pushed the page sideways on every
   page using this layout. Applied only this far down so the 375px+ layout,
   which does fit, is left exactly as it was. */
@media (max-width: 480px){
  .docs-nav-inner{padding:0 16px;gap:12px;}
  .docs-layout{padding:0 16px;}
  .docs-back{font-size:12.5px;}
  .docs-nav-cta{padding:7px 12px;font-size:12px;}
}
/* Wrapping is the last resort, not the first: it doubles the height of a
   sticky header, which is expensive on a phone. The tighter spacing above is
   enough down to about 360px, so only below that is the header allowed to
   take a second line. */
@media (max-width: 360px){
  .docs-nav-inner{flex-wrap:wrap;height:auto;min-height:56px;padding:10px 14px;gap:8px 10px;}
}

/* ---------- Body-text links ----------
   These pages had no link colour at all, so every link in the legal and
   documentation text rendered in the browser's own defaults: #0000EE before
   you click it and #551A8B afterwards. On this dark background that is
   1.78:1 contrast -- effectively unreadable, and worse once visited.

   :visited is styled explicitly for that second reason. Leaving it out is
   what makes a link people have actually followed disappear.

   Scoped to prose containers so it cannot touch the nav CTA, the footer
   button, or anything else that is a link styled as a control. */
.docs-content a,
.docs-lede a,
.docs-list a,
.docs-callout a,
.docs-table a{
  color:var(--link);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.docs-content a:visited,
.docs-lede a:visited,
.docs-list a:visited,
.docs-callout a:visited,
.docs-table a:visited{color:var(--link);}
.docs-content a:hover,
.docs-lede a:hover,
.docs-list a:hover,
.docs-callout a:hover,
.docs-table a:hover{color:var(--link-hover);}
/* The footer call-to-action is a button that happens to be an <a>. */
.docs-footer-cta a{text-decoration:none;}