/* Every page under /docs/: the article column, its prose and the
   previous/next pair /chrome.py writes into each page (the chrome:docs-pager
   block). The tokens and the header and footer come from /site.css. */
.docs-page { max-width: 48rem; margin: 0 auto; padding: 1rem 1.25rem 4.5rem; }
.hero { padding: 2.9rem 0 0; }
.eyebrow { margin: 0 0 .35rem; font-size: .85rem; font-weight: 600; letter-spacing: .04em;
           text-transform: uppercase; color: var(--muted); }
.eyebrow a { color: inherit; text-decoration: none; }
h1 { margin: 0 0 .55rem; font-size: clamp(2rem, 1.4rem + 2.4vw, 2.6rem);
     line-height: 1.05; letter-spacing: -.036em; font-weight: 700; }
.lead { margin: 0; font-size: 1.1rem; line-height: 1.5; color: var(--muted); max-width: 56ch; }
h2.section { margin: 2.8rem 0 .9rem; font-size: 1.3rem; letter-spacing: -.024em; }
h3 { margin: 1.8rem 0 .6rem; font-size: 1.05rem; letter-spacing: -.012em; }
h2[id], h3[id], li[id] { scroll-margin-top: 1rem; }
.prose p, .prose li { line-height: 1.6; }
.prose li + li { margin-top: .35rem; }
.prose code { font: .9rem ui-monospace, SFMono-Regular, Menlo, monospace;
              padding: .05rem .3rem; border-radius: 5px;
              background: color-mix(in srgb, var(--accent) 9%, transparent); overflow-wrap: anywhere; }
pre { margin: .8rem 0 1.2rem; padding: .9rem 1rem; overflow-x: auto; border-radius: 10px;
      border: 1px solid var(--line); background: var(--surface);
      font: .84rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
pre code, .prose pre code { padding: 0; background: none; font: inherit; }
.note { margin: 1.2rem 0; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px;
        background: var(--surface); }
.note p { margin: 0; }
.note p + p { margin-top: .6rem; }
.muted { color: var(--muted); }
table { width: 100%; border-collapse: collapse; margin: .8rem 0 1.2rem; font-size: .95rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top;
         overflow-wrap: anywhere; }
th { font-weight: 600; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }

/* The contents box a long page opens with. */
.toc { margin: 1.8rem 0 0; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 14px;
       background: var(--surface); }
.toc-title { margin: 0 0 .4rem; font-size: .85rem; font-weight: 600; letter-spacing: .03em;
             text-transform: uppercase; color: var(--muted); }
.toc ol { margin: 0; padding-left: 1.2rem; }
.toc ol ol { margin: .2rem 0 .3rem; list-style: none; padding-left: .9rem; font-size: .95rem; }
.prose .toc li + li { margin-top: .2rem; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* The floating Contents button: the same list, always in the corner, so a
   reader can jump to another section from anywhere (/docs/docs.js). */
.toc-float { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 10; max-width: min(22rem, calc(100vw - 2.5rem));
              pointer-events: none; }
.toc-float summary, .toc-float nav { pointer-events: auto; }
.toc-float summary { list-style: none; cursor: pointer; margin-left: auto; width: max-content;
                     padding: .55rem .95rem; border-radius: 999px; background: var(--accent); color: #fff;
                     font-weight: 600; font-size: .92rem; box-shadow: var(--shadow); }
.toc-float summary::-webkit-details-marker { display: none; }
.toc-float summary::before { content: "\2630\00a0\00a0"; }
.toc-float[open] summary { background: color-mix(in srgb, var(--accent) 86%, #000); }
.toc-float nav { position: absolute; right: 0; bottom: calc(100% + .5rem); width: min(22rem, calc(100vw - 2.5rem));
                 max-height: min(70vh, 32rem); overflow-y: auto; padding: .9rem 1.1rem;
                 border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.toc-float ol { margin: 0; padding-left: 1.2rem; }
.toc-float ol ol { margin: .2rem 0 .3rem; list-style: none; padding-left: .9rem; font-size: .95rem; }
.prose .toc-float li + li { margin-top: .2rem; }
.toc-float a { text-decoration: none; }
.toc-float a:hover { text-decoration: underline; }
/* On a phone the bottom edge belongs to the browser's own toolbar (Safari on
   iOS floats it over the page) and the header's links fill the top, so the
   button sits in the page under the contents box and sticks to the top of
   the screen once scrolled there; its list opens downward. */
@media (max-width: 560px) {
  .toc-float { position: sticky; top: calc(.5rem + env(safe-area-inset-top, 0px)); bottom: auto; right: auto;
               max-width: none; margin: .8rem 0 0; }
  .toc-float nav { width: 100%; top: calc(100% + .5rem); bottom: auto; max-height: min(65vh, 30rem); }
  /* A section reached by a jump lands below the button, not under it. */
  h2[id], h3[id], li[id] { scroll-margin-top: 4rem; }
}
@media print { .toc-float { display: none; } }

/* The index's cards. */
.doc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem;
             margin: .8rem 0 0; padding: 0; list-style: none; }
.prose .doc-cards li + li { margin-top: 0; }
.doc-cards a { display: block; height: 100%; padding: .9rem 1.05rem; border: 1px solid var(--line);
               border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; }
.doc-cards a:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.doc-cards strong { display: block; font-size: 1rem; }
.doc-cards span { display: block; margin-top: .2rem; font-size: .92rem; color: var(--muted); line-height: 1.45; }
/* Shown only in the Markdown mirror, where it parts a card's title from its line. */
.doc-cards .sep { display: none; }

/* Steps that hold for one DSM generation (the Synology page): the root's
   data-dsm, set before the steps paint, hides the other generation's. */
html[data-dsm="7"] [data-for-dsm="6"], html[data-dsm="6"] [data-for-dsm="7"] { display: none; }
.dsm-switch { display: inline-flex; gap: .3rem; margin: 1rem 0 0; padding: .25rem; border: 1px solid var(--line);
              border-radius: 10px; background: var(--surface); }
.dsm-switch button { font: inherit; font-size: .92rem; padding: .35rem .8rem; border: 0; border-radius: 8px;
                     background: none; color: var(--muted); cursor: pointer; }
.dsm-switch button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent);
                                          color: var(--ink); font-weight: 600; }

/* The previous/next pair at the foot of a page. */
.docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 3rem 0 0; }
.docs-pager a { display: block; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 14px;
                background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; }
.docs-pager a:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.docs-pager span { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); }
.docs-pager .next { grid-column: 2; text-align: right; }
@media (max-width: 560px) {
  .docs-pager { grid-template-columns: 1fr; }
  .docs-pager .next { grid-column: 1; }
}