/* ==========================================================================
   /docs
   --------------------------------------------------------------------------
   Loaded after base.css and landing.css, and additive to both: the nav, the
   footer, .wrap, .cta, .title and .lede all come from there and are not
   touched here. Everything below is namespaced .docs__* (the shell) or
   .doc__* (things inside a page's prose), so nothing in this file can reach
   the landing page even though the two share a stylesheet chain.

   Light only, like the rest of this site. No dark block here would be an
   omission on a page that had one; on a site where nothing does, adding one
   to a single section is how two halves of one brand drift apart.

   No JavaScript. The contents list is one <nav> placed by grid order — a
   sidebar from 900px, below the article on a phone — rather than a <details>
   that CSS forces open, because a closed <details> hides its children in the
   shadow tree and no `display` on the child reliably brings them back.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.docs__shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
    padding: 2rem 0 3.5rem;
    align-items: start;
}

.docs__main {
    order: 1;
    min-width: 0;
}

.docs__navlink {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0 0.4rem;
}

.docs__navlink:hover,
.docs__navlink:focus-visible {
    color: var(--primary);
}

/* --------------------------------------------------------------------------
   Contents

   Order 2 on a phone, so the answer is the first thing under the heading and
   the full list is what a reader finds when they have finished. Order 1 and
   sticky from 900px, where there is room for it beside the page.
   -------------------------------------------------------------------------- */

.docs__contents {
    order: 2;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1rem 1.15rem 1.15rem;
}

.docs__contents-head {
    margin: 0 0 0.4rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text);
}

.docs__section {
    margin: 1rem 0 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted-light);
}

.docs__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs__link {
    display: block;
    padding: 0.4rem 0.6rem;
    margin-left: -0.6rem;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.45;
    text-decoration: none;
}

.docs__link:hover,
.docs__link:focus-visible {
    background: var(--light);
    color: var(--text);
}

.docs__link.is-here {
    background: var(--accent);
    color: var(--dark);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Page head
   -------------------------------------------------------------------------- */

.docs__head { margin-bottom: 1.6rem; }

.docs__head .title {
    margin: 0.5rem 0 0.6rem;
    font-size: 1.85rem;
    line-height: 1.15;
}

.docs__head .lede {
    margin: 0;
    max-width: 40rem;
    font-size: 1rem;
}

.docs__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-light);
}

.docs__crumbs a {
    color: var(--secondary);
    text-decoration: none;
}

.docs__crumbs a:hover,
.docs__crumbs a:focus-visible { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Prose

   Wider line-height and a hair more size than .legal, because these are read
   one-handed in bad light by somebody who is not at their best.
   -------------------------------------------------------------------------- */

.doc {
    max-width: 40rem;
    line-height: 1.72;
}

.doc > :first-child { margin-top: 0; }

.doc h2 {
    margin: 2.2rem 0 0.7rem;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.doc h3 {
    margin: 1.6rem 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.doc p {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.doc a {
    color: var(--primary);
    text-underline-offset: 2px;
}

.doc b, .doc strong { color: var(--text); font-weight: 700; }

.doc ul, .doc ol {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.doc li { margin-bottom: 0.55rem; }
.doc li b { color: var(--text); }

.doc hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid var(--border);
}

/* The answer, first.

   Every page opens with one of these: the whole answer in a sentence or two,
   so somebody who only reads the first paragraph still leaves with what they
   came for. Everything after it is detail they are free to skip. */
.doc__answer {
    margin: 0 0 1.4rem;
    padding: 0.95rem 1.1rem;
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--light);
}

.doc .doc__answer p {
    margin: 0;
    color: var(--text);
    font-size: 0.97rem;
}

.doc .doc__answer p + p { margin-top: 0.6rem; }

/* Steps. Numbered because these genuinely are a sequence — doing them out of
   order does not work — which is the only thing that earns a number. */
.doc__steps {
    margin: 0 0 1.2rem;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.doc .doc__steps > li {
    position: relative;
    counter-increment: step;
    margin: 0 0 0.9rem;
    padding-left: 2.35rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.doc .doc__steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0.08rem;
    width: 1.65rem;
    height: 1.65rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: var(--dark);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.doc .doc__steps > li b { color: var(--text); }

/* A control, named as it reads on screen. "Show the tap" — a parent matching
   words to a button should be matching the same words. */
.doc__tap {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.86em;
    font-weight: 700;
    white-space: nowrap;
}

.doc__tap--feed  { border-color: var(--feed);  background: var(--feed-tint);  color: var(--feed-dark); }
.doc__tap--sleep { border-color: var(--sleep); background: var(--sleep-tint); color: var(--sleep-dark); }

/* Notes. Three kinds, and the colour is the only difference: something worth
   knowing, something that catches people out, and something that is only true
   on the hosted plan — that last one so a self-hoster reading the same page
   can see at a glance which paragraph is not about them. */
.doc__note {
    margin: 0 0 1.2rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.doc .doc__note p { margin: 0; font-size: 0.9rem; }
.doc .doc__note p + p { margin-top: 0.55rem; }

.doc__note-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.doc__note--know   { border-color: var(--accent); background: var(--light); }
.doc__note--know   .doc__note-label { color: var(--primary-light); }

.doc__note--watch  { border-color: #f0d9a8; background: #fdf7ea; }
.doc__note--watch  .doc__note-label { color: #9a6c12; }

.doc__note--hosted { border-color: var(--sleep); background: var(--sleep-tint); }
.doc__note--hosted .doc__note-label { color: var(--sleep-dark); }

/* Screenshots.

   Real pictures of the real app, taken by bin/shots.py. Two shapes: a crop of
   one control, which sits at text width, and a whole screen, which is a tall
   phone and is held to a narrow column so it cannot swamp the page it is
   illustrating.

   The border and the tint matter more than they look. Every screenshot here
   is of a near-white app on a near-white page, and without an edge the reader
   cannot tell where the picture stops and the document starts. */
.doc__shot {
    margin: 0 0 1.4rem;
}

.doc__shot img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.doc__shot figcaption {
    margin-top: 0.5rem;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* A whole screen. Narrow, and centred so the caption has something to sit
   under rather than trailing off beside a column of white. */
.doc__shot--screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 1.6rem;
}

.doc__shot--screen img {
    width: 100%;
    max-width: 15rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.doc__shot--screen figcaption {
    max-width: 24rem;
    text-align: center;
}

/* A crop sitting straight after the step that describes it reads as part of
   that step rather than as a new thought. */
.doc .doc__steps .doc__shot {
    margin: 0.7rem 0 0;
}

/* --------------------------------------------------------------------------
   Pager
   -------------------------------------------------------------------------- */

.docs__pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.docs__pager-link {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    text-decoration: none;
}

.docs__pager-link:hover,
.docs__pager-link:focus-visible {
    border-color: var(--accent);
    background: var(--light);
}

.docs__pager-link--next { text-align: right; }

.docs__pager-dir {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-light);
}

.docs__pager-title {
    color: var(--text);
    font-size: 0.89rem;
    font-weight: 600;
    line-height: 1.35;
}

/* --------------------------------------------------------------------------
   The one CTA
   -------------------------------------------------------------------------- */

.docs__cta {
    margin-top: 1.6rem;
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--light);
}

.docs__cta-line {
    margin: 0 0 0.9rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.docs__cta-line b { color: var(--text); }

.docs__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* The help line. Separated by a rule because it answers a different question
   from the buttons above it — the reader who needs this one is stuck, not
   shopping. */
.docs__cta-help {
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.87rem;
    line-height: 1.6;
}

.docs__cta-help b { color: var(--text); }

.docs__cta-help a {
    color: var(--primary);
    text-underline-offset: 2px;
}

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

.docs__group { margin-bottom: 2.2rem; }

.docs__group-head {
    margin: 0 0 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted-light);
}

.docs__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

.docs__card {
    display: block;
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    text-decoration: none;
}

.docs__card:hover,
.docs__card:focus-visible {
    border-color: var(--accent);
    background: var(--light);
}

.docs__card-title {
    margin: 0 0 0.25rem;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
}

.docs__card-q {
    margin: 0;
    color: var(--muted);
    font-size: 0.87rem;
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Wider screens
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
    .docs__cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .docs__shell {
        grid-template-columns: 15rem minmax(0, 1fr);
        gap: 3rem;
        padding: 2.6rem 0 4.5rem;
    }

    /* The sidebar. Sticky and its own scroller, so a long contents list
       cannot outgrow the viewport and strand the links at the bottom. */
    .docs__contents {
        order: 1;
        position: sticky;
        top: 5.5rem;
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
        border: 0;
        border-right: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
        padding: 0 1.2rem 0 0;
    }

    .docs__contents-head { display: none; }
    .docs__section:first-of-type { margin-top: 0; }

    .docs__head .title { font-size: 2.1rem; }
}

@media (max-width: 560px) {
    .docs__pager { grid-template-columns: 1fr; }
    .docs__pager-link--next { text-align: left; }
}