/* =============================================================================
   Workflow Corporation - documentation pages (pages/docs.php only)
   =============================================================================

   Loaded by docs.php after corp.css, and by nothing else, so none of this can
   reach another page. It follows corp.css rather than extending it: the same
   ground, the same ink ramp (var(--ink-*), defined there), the same 1px
   #1C1E24 hairlines as border-paper-300, 8px corners, and the group green
   (#33CFA7) as the only accent (see the top of corp.css).

   Layout lives here rather than in utility classes because tailwind-utilities
   .css is a compiled, purged file with no build in this repo: md:block, lg:grid
   and friends are not in it, and a class that is not compiled silently does
   nothing. Every class below is semantic and prefixed doc-.
   ========================================================================== */

/* ---------- Article layout ----------------------------------------------- */

/* Vertical room between the sticky header and the breadcrumb, and between the
   pager and the footer. Spacing utilities would do this on other pages, but
   pt-10, pb-20 and their sm: forms are not in the compiled utilities file. */
.doc-page {
    padding-top: 2rem;
    padding-bottom: 5rem;
}
@media (min-width: 640px) {
    .doc-page {
        padding-top: 3rem;
        padding-bottom: 6rem;
    }
}

.doc-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--ink-400);
    margin-bottom: 2rem;
}
.doc-breadcrumb a {
    color: var(--ink-500);
    text-decoration: none;
    /* 24px target floor, the same one corp.css holds its links to. */
    padding: 0.25rem 0;
}
.doc-breadcrumb a:hover { color: #FFFFFF; }

.doc-layout { display: block; }

.doc-sidebar { display: none; }

@media (min-width: 1024px) {
    .doc-layout {
        display: grid;
        grid-template-columns: 14rem minmax(0, 1fr);
        gap: 4rem;
        align-items: start;
    }
    .doc-sidebar {
        display: block;
        position: sticky;
        /* Clears the 72px sticky header, the same allowance corp.css makes
           for scroll-padding-top. */
        top: 5.5rem;
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
        padding-bottom: 1rem;
    }
    .doc-mobile-nav { display: none; }
}

/* ---------- Page list (sidebar and the narrow-screen disclosure) --------- */

.doc-nav-heading {
    margin: 1.5rem 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-400);
}
.doc-nav-heading:first-child { margin-top: 0; }

.doc-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.doc-nav-list a {
    display: block;
    padding: 0.375rem 0.75rem;
    border-left: 2px solid #1C1E24;
    color: var(--ink-500);
    font-size: 0.9375rem;
    line-height: 1.4;
    text-decoration: none;
}
.doc-nav-list a:hover { color: #FFFFFF; }
.doc-nav-list a[aria-current="page"] {
    color: #FFFFFF;
    border-left-color: #33CFA7;
}

.doc-mobile-nav {
    margin-bottom: 2.5rem;
    border: 1px solid #1C1E24;
    border-radius: 8px;
    background: #0C0D11;
}
.doc-mobile-nav > summary {
    cursor: pointer;
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink-700);
}
.doc-mobile-nav > nav { padding: 0 1rem 1rem; }

/* ---------- Article body -------------------------------------------------- */

.doc-prose {
    max-width: 46rem;
    min-width: 0;
    color: var(--ink-700);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.doc-prose h1,
.doc-prose h2,
.doc-prose h3,
.doc-prose h4 {
    color: #FFFFFF;
    font-weight: 600;
    letter-spacing: -0.015em;
    /* Fragment jumps land below the sticky header rather than under it. */
    scroll-margin-top: 6rem;
}
.doc-prose h1 {
    margin: 0 0 1.25rem;
    font-size: clamp(2.1rem, 4.4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
}
/* The paragraph under the title is the article's summary: set it as a lede. */
.doc-prose h1 + p {
    font-size: 1.1875rem;
    color: var(--ink-700);
    margin-bottom: 2rem;
}
.doc-prose h2 {
    margin: 3.25rem 0 1rem;
    padding-top: 2rem;
    border-top: 1px solid #1C1E24;
    font-size: 1.5rem;
    line-height: 1.25;
}
.doc-prose h3 {
    margin: 2.25rem 0 0.75rem;
    font-size: 1.1875rem;
    line-height: 1.35;
}

.doc-prose p { margin: 0 0 1.125rem; }

.doc-prose strong { color: #FFFFFF; font-weight: 600; }

.doc-prose a {
    color: #FFFFFF;
    text-decoration: underline;
    text-decoration-color: rgba(51, 207, 167, 0.55);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}
.doc-prose a:hover { text-decoration-color: #33CFA7; }

.doc-prose ul,
.doc-prose ol {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
}
/* tailwind-base.css resets list-style to none on every list, so article lists
   would lose their bullets and numbers without these. */
.doc-prose ul { list-style: disc; }
.doc-prose ol { list-style: decimal; }
.doc-prose li { margin: 0.5rem 0; padding-left: 0.25rem; }
.doc-prose li::marker { color: var(--ink-400); }
.doc-prose li > p { margin: 0; }

.doc-prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875em;
    padding: 0.1em 0.35em;
    border: 1px solid #1C1E24;
    border-radius: 4px;
    background: #101116;
    color: #FFFFFF;
}
.doc-prose pre {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    border: 1px solid #1C1E24;
    border-radius: 8px;
    background: #0C0D11;
    line-height: 1.55;
}
.doc-prose pre code {
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.875rem;
}

.doc-prose blockquote {
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 2px solid #33CFA7;
    color: var(--ink-500);
}

.doc-prose hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid #1C1E24;
}

/* Tables scroll inside the column, never the page, on a narrow screen. */
.doc-table-wrap {
    margin: 1.5rem 0 1.75rem;
    overflow-x: auto;
    border: 1px solid #1C1E24;
    border-radius: 8px;
}
.doc-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.55;
}
.doc-prose th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #FFFFFF;
    background: #0C0D11;
    border-bottom: 1px solid #1C1E24;
    white-space: nowrap;
}
.doc-prose td {
    padding: 0.75rem 1rem;
    vertical-align: top;
    border-top: 1px solid #1C1E24;
    min-width: 8rem;
}
.doc-prose tbody tr:first-child td { border-top: 0; }

/* Key-value tables: the "| | |" summary at the top of each product page. docs.php
   strips the empty header row and turns each row's label into a row header. */
.doc-table-wrap.is-keyed th[scope="row"] {
    width: 6.5rem;
    vertical-align: top;
    white-space: normal;
    border-bottom: 0;
    border-top: 1px solid #1C1E24;
}
.doc-table-wrap.is-keyed tbody tr:first-child th[scope="row"] { border-top: 0; }
@media (min-width: 640px) {
    .doc-table-wrap.is-keyed th[scope="row"] { width: 8.5rem; }
}

/* Shown only when Parsedown cannot be found: the article as escaped text. */
.doc-plain {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink-700);
}

/* ---------- Previous / next ---------------------------------------------- */

.doc-pager {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #1C1E24;
}
@media (min-width: 640px) {
    .doc-pager { grid-template-columns: 1fr 1fr; }
    .doc-pager-next { grid-column: 2; text-align: right; }
}
.doc-prose .doc-pager a {
    display: block;
    padding: 1rem 1.25rem;
    border: 1px solid #1C1E24;
    border-radius: 8px;
    text-decoration: none;
}
.doc-prose .doc-pager a:hover { border-color: #33CFA7; }
.doc-pager-label {
    display: block;
    font-size: 0.8125rem;
    color: var(--ink-400);
}
.doc-pager-title {
    display: block;
    margin-top: 0.125rem;
    color: #FFFFFF;
    font-weight: 500;
}

/* ---------- Index ---------------------------------------------------------- */

.doc-notice {
    margin-top: 2rem;
    max-width: 40rem;
    padding: 0.875rem 1rem;
    border-left: 2px solid #33CFA7;
    background: #0C0D11;
    color: var(--ink-700);
}

.doc-cards {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .doc-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
    .doc-cards { grid-template-columns: 1fr 1fr 1fr; }
}
.doc-card {
    display: block;
    height: 100%;
    padding: 1.25rem 1.5rem;
    border: 1px solid #1C1E24;
    border-radius: 8px;
    background: #0C0D11;
    text-decoration: none;
    transition: border-color 0.2s ease;
}
.doc-card:hover { border-color: #33CFA7; }
.doc-card-title {
    display: block;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 1.0625rem;
}
.doc-card-text {
    display: block;
    margin-top: 0.5rem;
    color: var(--ink-500);
    font-size: 0.9375rem;
    line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
    .doc-card { transition: none; }
}