/* Calligence customer docs — shared styles (CAL-450). Every page loads this file;
   Tailwind (CDN) styles the content, this file the chrome and the shared rules. */

body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.font-display { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-weight: 600; }
.prose-step p { margin-bottom: 0.75rem; }

/* CAL-357: a #fragment jump clears the sticky header, and every title carries a
   # self-link (shown on hover; always on touch screens). The link sits beside the
   heading, not inside it, so screen readers still announce the bare title. No
   scroll-behavior: smooth — with it Chrome's jump to a shared URL's #fragment on
   load is unreliable (skipped, or stopped short under the header). */
[id] { scroll-margin-top: 5rem; }
.doc-heading { display: flex; align-items: baseline; gap: 0.4em; }
.doc-anchor { color: #6366f1; font-size: 0.875rem; font-weight: 400; text-decoration: none; opacity: 0; transition: opacity 0.15s; }
.doc-anchor:hover { color: #4f46e5; }
.doc-heading:hover > .doc-anchor, .doc-anchor:focus-visible { opacity: 1; }
@media (hover: none) { .doc-anchor { opacity: 1; } }
.doc-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 60; padding: 0.5rem 1rem; border-radius: 0.75rem; background: #111827; color: #fff; font-size: 0.875rem; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.doc-toast.is-visible { opacity: 1; }
/* overflow-wrap, not word-break: word-break let tables crush a column until identifiers split (CAL-357). */
code { overflow-wrap: break-word; }
/* A schema URL is one unbroken word: without this it pushes a phone's page sideways (CAL-450). */
.docs-main a { overflow-wrap: break-word; }

/* --- accessibility helpers --- */
.docs-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.docs-skip { position: absolute; left: 1rem; top: -3rem; z-index: 70; padding: 0.5rem 1rem; border-radius: 0.5rem; background: #4f46e5; color: #fff; font-size: 0.875rem; font-weight: 600; }
.docs-skip:focus { top: 0.75rem; }

/* --- layout: sidebar · content · «En esta página» --- */
.docs-layout { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.docs-main { min-width: 0; max-width: 48rem; padding: 1.5rem 0 3rem; }
@media (min-width: 640px) { .docs-layout { padding: 0 1.5rem; } }
@media (min-width: 1024px) {
  .docs-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: 3rem; padding: 0 2rem; }
  .docs-main { padding: 3rem 0; }
}
@media (min-width: 1280px) {
  .docs-layout.has-toc { grid-template-columns: 15rem minmax(0, 48rem) 13rem; }
}

/* --- sidebar --- */
.docs-sidebar { padding-top: 1.5rem; }
@media (min-width: 1024px) {
  .docs-sidebar { position: sticky; top: 4rem; align-self: start; max-height: calc(100vh - 4rem); overflow-y: auto; padding: 2.5rem 0.5rem 2rem 0; }
  .docs-menu[open] > .docs-menu-summary { display: none; }
}
.docs-menu-summary { cursor: pointer; padding: 0.625rem 0.875rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 600; color: #111827; background: #fff; }
.docs-menu[open] > .docs-menu-summary { margin-bottom: 0.75rem; }
.docs-nav { font-size: 0.875rem; }
.docs-nav-group { margin: 1.25rem 0 0.375rem; padding: 0 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #4f46e5; }
.docs-nav-list { list-style: none; margin: 0; padding: 0; }
.docs-nav-link { display: block; padding: 0.375rem 0.75rem; border-radius: 0.5rem; color: #4b5563; text-decoration: none; line-height: 1.35; }
.docs-nav-link:hover { color: #111827; background: #f9fafb; }
.docs-nav-link[aria-current="page"] { color: #4f46e5; background: #eef2ff; font-weight: 600; }

/* --- search --- */
.docs-search { position: relative; margin-bottom: 1rem; }
.docs-search[hidden] { display: none; }
.docs-search-input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #e5e7eb; border-radius: 0.75rem; font-size: 0.875rem; color: #111827; background: #fff; }
.docs-search-input:focus { outline: 2px solid #c7d2fe; border-color: #6366f1; }
.docs-search-results:empty { display: none; }
.docs-search-results { position: absolute; left: 0; right: 0; top: calc(100% + 0.375rem); z-index: 40; border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; box-shadow: 0 10px 25px -10px rgba(17, 24, 39, 0.25); max-height: min(28rem, 70vh); overflow-y: auto; }
.docs-search-results ul { list-style: none; margin: 0; padding: 0.25rem; }
.docs-search-hit { display: block; padding: 0.5rem 0.625rem; border-radius: 0.5rem; text-decoration: none; }
.docs-search-hit:hover, .docs-search-hit:focus { background: #eef2ff; outline: none; }
.docs-search-hit-title { display: block; font-size: 0.875rem; font-weight: 600; color: #111827; }
.docs-search-hit-page { display: block; font-size: 0.75rem; color: #4f46e5; }
.docs-search-hit-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 0.125rem; font-size: 0.75rem; color: #6b7280; line-height: 1.4; }
.docs-search-empty { padding: 0.75rem; font-size: 0.8125rem; color: #6b7280; }

/* --- breadcrumb: the separators live here, so screen readers don't read them out --- */
.docs-breadcrumb { margin-bottom: 1.5rem; font-size: 0.875rem; color: #6b7280; }
.docs-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; margin: 0; padding: 0; }
.docs-breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: #d1d5db; }
.docs-breadcrumb a { color: #6b7280; text-decoration: none; }
.docs-breadcrumb a:hover { color: #374151; }
.docs-breadcrumb a[aria-current="page"] { color: #111827; font-weight: 500; }

/* --- «En esta página» --- */
.docs-toc { display: none; }
@media (min-width: 1280px) {
  .docs-toc { display: block; position: sticky; top: 4rem; align-self: start; max-height: calc(100vh - 4rem); overflow-y: auto; padding: 3rem 0 2rem; }
}
.docs-toc-title { margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #6b7280; }
.docs-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid #e5e7eb; }
.docs-toc a { display: block; padding: 0.25rem 0 0.25rem 0.75rem; font-size: 0.8125rem; line-height: 1.35; color: #6b7280; text-decoration: none; }
.docs-toc a:hover { color: #4f46e5; }