/*
 * The docs pages (glad.abloh.dev/docs), from the reviewed mock glad-docs.html.
 * Loaded after styles.css, which gives the tokens, the helmet and the cookie card.
 * Everything here is scoped to .site, so the landing page is untouched.
 */

.site *, .site *::before, .site *::after { box-sizing: border-box; }
/* Docs sit on the home page's dark panel colour, plain, in place of the green. */
.s-docs { --ground: #0A0A0A; }
.site { color: var(--ink); font-family: var(--serif); background: var(--ground); min-height: 100vh; display: flex; flex-direction: column; }
.site a { color: var(--ink); }
.site button { font: inherit; color: inherit; }

/* The header is the home bar (.header in styles.css: logo left, product/docs/blog centred on the screen, sign up and contact right); its links as home.css's .home-nav. */
.s-header { z-index: 3; }
.home-nav { display: flex; gap: 28px; justify-self: end; }
.home-nav-mid { justify-self: center; }
.site .home-nav a { color: #F4F1E8; text-decoration: none; font-family: inherit; font-size: 15px; letter-spacing: 0.02em; opacity: 0.85; }
.site .home-nav a:hover, .site .home-nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* On a phone the five links and the logo don't fit with the middle links centred on the screen, so the bar packs them in a row with tighter gaps and smaller type; no link wraps. */
@media (max-width: 480px) {
  .s-header { grid-template-columns: auto 1fr auto; padding: 0 16px; }
  .home-nav { gap: 12px; }
  .site .home-nav a { font-size: 13px; letter-spacing: 0; white-space: nowrap; }
}
.s-brand { display: flex; align-items: center; gap: 16px; text-decoration: none; }

.s-body { flex: 1; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; padding: 24px var(--gutter) 80px; align-items: start; }
/* With the rail beside it, the two side columns are equal, so the page is the centre of the window: the contents under the wordmark, the rail under "contact". */
@media (min-width: 1200px) {
  .s-body { grid-template-columns: minmax(200px, 1fr) minmax(0, 680px) minmax(200px, 1fr); }
}

/* The contents, beside the page on a desk. */
.s-side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 28px; }
.s-group-label { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); margin: 0 0 8px; }
.s-links { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--hairline); }
.site .s-links a { display: block; width: 100%; text-align: left; text-decoration: none; border-left: 1px solid transparent; margin-left: -1px; padding: 6px 0 6px 14px; font-family: var(--mono); font-size: 13px; letter-spacing: .01em; line-height: 1.4; color: var(--body); }
.site .s-links a:hover { color: var(--ink); }
.site .s-links a[aria-current] { border-left-color: var(--ink); color: var(--ink); font-weight: 500; }
.s-links a:focus-visible, .s-pager a:focus-visible, .m-contents summary:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

/* On this page: the contents' own list, the section being read in ink. */
.s-toc { display: none; }
@media (min-width: 1200px) {
  .s-toc:not([hidden]) { display: block; position: sticky; top: calc(var(--header-h) + 24px); justify-self: end; width: 200px; }
}
.site .s-toc a { color: var(--muted); transition: color .2s ease, border-color .2s ease; }
.site .s-toc a:hover { color: var(--ink); }
.site .s-toc a[aria-current] { border-left-color: var(--ink); color: var(--ink); font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .site .s-toc a { transition: none; } }

/* The page. */
.s-article { max-width: 680px; min-width: 0; }
.s-label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.s-article h1 { margin: 12px 0 16px; font-weight: 300; font-size: 48px; line-height: 1.05; letter-spacing: -.02em; }
.s-lede { margin: 0 0 40px; font-size: 21px; line-height: 1.55; color: var(--body); font-weight: 300; text-wrap: pretty; }
.s-article h2 { margin: 48px 0 16px; padding-top: 24px; border-top: 1px solid var(--hairline); font-weight: 300; font-size: 30px; line-height: 1.15; letter-spacing: -.01em; display: flex; gap: 14px; align-items: baseline; scroll-margin-top: 96px; }
.s-article h2 .n { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.s-article h3 { margin: 32px 0 8px; font-family: var(--mono); font-weight: 500; font-size: 15px; letter-spacing: .01em; }
.s-article p, .s-article li { font-size: 18px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.s-article p { margin: 0 0 16px; }
.s-article ul { margin: 0 0 16px; padding-left: 20px; }
.s-article li { margin-bottom: 4px; }
.s-article b { font-weight: 600; color: var(--ink); }
.s-article code { font-family: var(--mono); font-size: .8em; color: var(--ink); background: rgb(244 241 232 / 0.1); padding: 1px 5px; white-space: nowrap; }
.s-article a { text-underline-offset: 4px; }

/* A terminal, quiet: hairline box, a mono caption, the command in ink and what it prints in muted. */
.term { margin: 0 0 20px; border: 1px solid var(--hairline); background: rgb(244 241 232 / 0.05); }
.term-cap { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--hairline); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.term-cap button { background: none; border: 0; padding: 4px 0; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.term-cap button:hover { color: var(--ink); }
.term pre { margin: 0; padding: 14px 16px 16px; font-family: var(--mono); font-size: 13px; line-height: 1.7; overflow-x: auto; color: var(--muted); }
.term pre b { font-weight: 400; color: var(--ink); }
.term pre i { font-style: normal; color: var(--rule); user-select: none; }

/* Two ways in, side by side on a desk. */
.fork { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 8px; }
.fork > * { display: grid; gap: 6px; padding: 18px 0 0; border-top: 1px solid var(--hairline); text-align: left; text-decoration: none; }
.fork > [aria-current] { border-top-color: var(--ink); }
.fork .k { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.fork .t { font-size: 22px; font-weight: 300; line-height: 1.2; }
.fork > a:hover .t { color: var(--muted); }

.needs { list-style: none; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.needs li { padding: 10px 0; border-bottom: 1px solid var(--hairline); margin: 0 !important; font-size: 17px !important; }

.note { margin: 0 0 20px; padding: 4px 0 4px 18px; border-left: 1px solid var(--ink); }
.note .s-label { display: block; margin-bottom: 4px; }
.note p { margin: 0 0 8px; font-size: 17px; }
.note p:last-child { margin-bottom: 0; }

.demo { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; margin: 0 0 8px; padding: 24px; border: 1px solid var(--ink); }
.demo .t { font-size: 22px; font-weight: 300; line-height: 1.25; }
.demo .d { margin-top: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.site .demo-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; background: var(--ink); color: var(--ground); font-family: var(--mono); font-size: 14px; letter-spacing: .06em; text-decoration: none; }
.site .demo-btn:hover { background: #DCE3DD; }
.demo-btn:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.s-article .demo-btn { height: auto; min-height: 48px; padding: 12px 24px; line-height: 1.4; text-align: center; }

.deploy { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 24px; }
.deploy section { padding: 20px; border: 1px solid var(--hairline); }
.deploy h3 { margin: 8px 0 14px; font-family: var(--serif); font-weight: 300; font-size: 24px; letter-spacing: -.01em; }
.deploy dl { margin: 0; display: grid; gap: 4px; }
.deploy dt { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.deploy dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--body); }
.s-article h3.h3-serif { font-family: var(--serif); font-weight: 400; font-size: 21px; letter-spacing: 0; margin: 28px 0 8px; }

/* One rhythm for every page: 20px between blocks, 48px before a section, 32px before a sub-heading, 12px under it. */
.s-article p, .s-article ul, .s-article .term, .s-article .note, .s-article .demo, .s-article .deploy,
.s-article .fork, .s-article .flags, .s-article .syn { margin: 0 0 20px; }
.s-article h2 { margin: 48px 0 20px; }
.s-article h3, .s-article h3.h3-serif { margin: 32px 0 12px; }
.s-article h1 + .s-lede, .s-article .s-lede, .s-article h1.alone { margin-bottom: 48px; }
.s-article h2 + h3 { margin-top: 0; }
.s-article .note p { margin: 0 0 8px; }
.s-article .note p:last-child { margin-bottom: 0; }
.s-article .deploy section, .s-article .demo { padding: 24px; }
.s-article .deploy h3 { margin: 8px 0 12px; }
.s-article .fork > * { padding-top: 20px; }
.s-pager { margin-top: 48px !important; }
.s-article .demo { margin-top: 48px; }

/* Reference: a command, its line, what it does, its flags. */
.syn { margin: 0 0 12px; padding: 10px 14px; font-family: var(--mono); font-size: 13px; line-height: 1.6; background: rgb(244 241 232 / 0.05); border: 1px solid var(--hairline); overflow-x: auto; white-space: pre-wrap; color: var(--ink); }
.syn span { color: var(--muted); }
.syn .nw { white-space: nowrap; }
.flags { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.flags td { padding: 8px 0; border-top: 1px solid var(--hairline); vertical-align: top; font-size: 16px; line-height: 1.5; color: var(--body); }
.flags .need { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: lowercase; color: var(--muted); margin-bottom: 2px; }
.flags .need.req { color: var(--ink); }
.harness { width: 100%; border-collapse: collapse; margin: 0 0 12px; table-layout: fixed; }
.harness th { text-align: left; padding: 0 16px 8px 0; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; font-weight: 400; color: var(--muted); }
.harness td { padding: 8px 16px 8px 0; border-top: 1px solid var(--hairline); vertical-align: top; font-size: 16px; line-height: 1.5; color: var(--body); overflow-wrap: anywhere; }
.harness td:not(:first-child) { font-family: var(--mono); font-size: 12.5px; line-height: 24px; color: var(--ink); }
.harness th:first-child, .harness td:first-child { width: 120px; }
.flags td:first-child { width: 210px; padding-right: 16px; font-family: var(--mono); font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.admin td:first-child { width: auto; white-space: normal; }

.s-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; }
.s-pager a { display: grid; gap: 6px; padding: 18px 0 0; border-top: 1px solid var(--hairline); text-align: left; text-decoration: none; }
.s-pager a:last-child { text-align: right; }
.s-pager a:hover .t { color: var(--muted); }
.s-pager .k { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.s-pager .t { font-size: 22px; font-weight: 300; }
.s-pager .empty { border-top: 1px solid var(--hairline); }

.s-footer { margin: 0 var(--gutter); min-height: 104px; border-top: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.s-footer nav { display: flex; gap: 24px; }
.site .s-footer a { text-decoration: none; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* The contents on a phone: one bar under the header, opening in place. */
.m-contents { display: none; }

@media (max-width: 760px) {
  .s-brand { gap: 12px; }
  .s-body { display: block; padding: 0 var(--gutter) 64px; }
  .s-side { display: none; }
  .m-contents { display: block; position: sticky; top: var(--header-h); z-index: 2; background: var(--ground); margin: 0 calc(-1 * var(--gutter)) 24px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
  .m-contents summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 var(--gutter); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; cursor: pointer; }
  .m-contents summary::-webkit-details-marker { display: none; }
  .m-contents summary .cur { color: var(--ink); }
  .m-contents summary .lbl { color: var(--muted); }
  .m-contents summary .sign { font-size: 16px; color: var(--ink); }
  .m-contents[open] summary .sign::before { content: '−'; }
  .m-contents:not([open]) summary .sign::before { content: '+'; }
  .m-contents[open] { position: static; }
  .m-list { padding: 4px var(--gutter) 20px; display: grid; gap: 20px; }
  .site .s-links a { padding: 13px 0 13px 14px; }
  .s-article h1 { font-size: 36px; }
  .s-lede { font-size: 19px; margin-bottom: 32px; }
  .s-article h2 { font-size: 26px; margin-top: 40px; scroll-margin-top: 128px; }
  .s-article p, .s-article li { font-size: 17px; }
  .fork, .needs, .deploy { grid-template-columns: 1fr; }
  /* A terminal's long lines wrap on a phone, so nothing sits past the edge out of sight. */
  .s-docs .term pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  /* Tables stay tables on a phone: the same rows and columns, tighter cells and type, a long name or path
     wrapping inside its own cell; a table wider than the screen scrolls inside itself, never the page. */
  .s-docs .s-article :is(.flags, .harness) { display: block; overflow-x: auto; table-layout: auto; }
  .s-docs .flags td, .s-docs .harness :is(th, td) { padding: 10px 12px 10px 0; font-size: 15px; line-height: 1.45; }
  .s-docs .flags td:last-child, .s-docs .harness :is(th, td):last-child { padding-right: 0; }
  .s-docs .flags td:first-child { width: 38%; font-size: 12.5px; white-space: normal; }
  .s-docs .flags td, .s-docs .harness td { overflow-wrap: break-word; }
  .s-docs .harness th { padding-top: 0; padding-bottom: 8px; font-size: 11px; }
  .s-docs .harness th:first-child, .s-docs .harness td:first-child { width: auto; }
  /* a path is read whole: its columns cannot fit a phone, so they keep each path on one line and the table scrolls */
  .s-docs .harness td:not(:first-child) { font-size: 11.5px; line-height: 20px; white-space: nowrap; }
  .s-docs .harness :is(th, td):not(:last-child) { padding-right: 10px; }
  .s-pager { grid-template-columns: 1fr; }
  .s-pager a:last-child { text-align: left; }
  .s-footer { min-height: 88px; }
  .s-footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .s-article h1 + .s-lede, .s-article .s-lede, .s-article h1.alone { margin-bottom: 40px; }
  .s-pager { margin-top: 40px !important; }
}

/* The free week's offer: a card in the centre of the window, the whole page blurred behind it. */
.offer { width: min(440px, calc(100% - 2 * var(--gutter))); max-width: none; max-height: calc(100% - 2 * var(--gutter)); padding: 40px; border: 1px solid var(--ink); background: var(--ground); color: var(--ink); }
.offer:focus { outline: none; }
.offer::backdrop { background: rgb(0 0 0 / .3); backdrop-filter: blur(2px); }
.offer .offer-title { margin: 0 0 12px; padding-right: 32px; font-weight: 300; font-size: 30px; line-height: 1.15; letter-spacing: -.01em; }
.offer p { margin: 0 0 28px; font-size: 18px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.site .offer-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.site .offer-x:hover { color: var(--ink); }
.offer-x:focus-visible { outline: 1px solid var(--ink); outline-offset: -4px; }

@media (max-width: 760px) {
  .offer { padding: 32px 24px 24px; }
  .offer .offer-title { font-size: 26px; }
  .offer p { font-size: 17px; margin-bottom: 24px; }
  .offer .demo-btn { width: 100%; }
  /* On a phone the offer is a sheet along the bottom of the window, its button under the thumb. */
  .offer { width: 100%; max-height: calc(100% - var(--header-h)); margin: auto 0 0; border-width: 1px 0 0; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}