/* A docs page as documentation (#1157, the mockup Svet approved on
   2026-10-22). Linked by the docs layout only (page/docs/layout.templ),
   after kit.css. Every rule sits under .mk-docs, so the sheet changes
   nothing on a page without it, legal pages and the docs index included.

   Three columns at 1440: the sidebar, the article and On this page. At
   56.25em and under one column: the Docs menu over the article opens
   the sidebar as a sheet, On this page is not drawn and a table's rows
   become cards. Every data face turns its ligatures off, so a code or a
   figure reads as typed. */

.mk-docs { max-width: var(--page); margin: 0 auto; padding: calc(4.5rem + var(--s-7)) var(--gutter) var(--s-9); display: grid; grid-template-columns: 15rem minmax(0, 46rem) 12rem; gap: var(--s-7); align-items: start; justify-content: space-between; }
.mk-docs__menu { display: none; }

/* The sidebar: the search, then the groups, the current page on white. */
.mk-docs__side { position: sticky; top: 6rem; display: grid; gap: var(--s-5); font-size: var(--t-small); }
.mk-docs__side form { margin: 0; }
.mk-docs__search { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 0 0.875rem; min-height: 2.75rem; color: var(--text-3); background: var(--white); }
.mk-docs__search:focus-within { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(31, 63, 229, .15); }
.mk-docs__search .mk-icon { width: 1rem; height: 1rem; flex: none; }
.mk-docs__search input { flex: 1; min-width: 0; border: 0; background: none; padding: 0; font: inherit; color: var(--text); outline: none; }
.mk-docs__search input::placeholder { color: var(--text-3); opacity: 1; }
.mk-docs__search input::-webkit-search-cancel-button { display: none; }
.mk-docs__search kbd { font-family: var(--font-mono); font-size: 0.6875rem; border: 1px solid var(--line-strong); border-radius: 0.25rem; padding: 0 0.3rem; font-variant-ligatures: none; }
.mk-docs__group { display: grid; }
.mk-docs__group[hidden] { display: none; }
.mk-docs__group b { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: var(--ls-kicker); color: var(--text-3); font-weight: 500; padding: 0 0 var(--s-2) 0.75rem; font-variant-ligatures: none; }
.mk-docs__group a { color: var(--text-2); text-decoration: none; padding: 0.375rem 0.75rem; border-radius: var(--r-code); }
.mk-docs__group a[hidden] { display: none; }
.mk-docs__group a:hover { color: var(--text); }
.mk-docs__group a[aria-current="page"] { color: var(--text); background: var(--white); font-weight: 500; box-shadow: 0 0 0 1px var(--line); }
.mk-docs__none { margin: 0; padding: 0 0.75rem; color: var(--text-2); }

/* The article: the crumb, the title, the lead and the meta row over a
   rule, then the body. The body keeps the reading rules it shares with
   the legal pages (.mk-read__body); these set its measure and sizes. */
.mk-docs__art { min-width: 0; }
.mk-docs .mk-docs__crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; margin-bottom: var(--s-3); }
.mk-docs__crumb > span:not(.mk-crumb__sep) { color: var(--text-2); }
.mk-docs__crumb > [aria-current="page"] { color: var(--text); }
.mk-docs__h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 3vw, 2.75rem); line-height: var(--lh-tight); letter-spacing: var(--ls-display); margin: 0 0 var(--s-3); text-wrap: balance; }
.mk-docs .mk-docs__lede { font-size: var(--t-lead); line-height: var(--lh-text); color: var(--text-2); margin: 0 0 var(--s-4); max-width: none; text-wrap: pretty; }
.mk-docs__meta { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; font-family: var(--font-mono); font-size: var(--t-mono-s); line-height: 1.25rem; color: var(--text-3); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); margin-bottom: var(--s-6); font-variant-ligatures: none; }
.mk-docs__meta span { display: inline-flex; align-items: center; gap: 0.375rem; }
.mk-docs__meta .mk-icon { width: 0.875rem; height: 0.875rem; flex: none; }
.mk-docs .mk-docs__art h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; letter-spacing: var(--ls-tight); margin: var(--s-7) 0 var(--s-3); scroll-margin-top: 6rem; }
.mk-docs .mk-docs__meta + h2 { margin-top: 0; }
.mk-docs .mk-docs__art h3 { scroll-margin-top: 6rem; }
.mk-docs .mk-docs__art p { max-width: 42rem; }
.mk-docs__art code, .mk-docs__art .mk-code, .mk-docs__art .mk-mono { font-variant-ligatures: none; }
.mk-docs__art code { background: var(--white); border: 1px solid var(--line); }
.mk-docs__art .mk-code code { background: none; border: 0; }

/* A table: a white box that scrolls inside itself if it must, headers
   left in small mono capitals, cells top aligned on ruled rows, the
   first column the row's header. */
.mk-docs__table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); margin: 0 0 var(--s-4); }
.mk-docs__table table { width: 100%; border-collapse: collapse; font-size: var(--t-body-s); line-height: var(--lh-text); }
.mk-docs__table thead th { text-align: left; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-kicker); color: var(--text-3); background: var(--cream-2); padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); white-space: nowrap; font-variant-ligatures: none; }
.mk-docs__table td, .mk-docs__table tbody th { text-align: left; vertical-align: top; padding: 0.875rem 1rem; border-bottom: 1px solid var(--line); }
.mk-docs__table tbody tr:last-child > * { border-bottom: 0; }
.mk-docs__table tbody th { font-weight: 500; }
.mk-docs__table code { white-space: nowrap; }

/* A note such as the import limits: a hairline on every side and a
   small mono label, never a coloured stripe. */
.mk-docs__note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); background: var(--white); border-radius: var(--r-card); margin: 0 0 var(--s-4); font-size: var(--t-body-s); line-height: var(--lh-text); }
.mk-docs__note b { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-kicker); color: var(--text-3); padding-top: 0.2rem; font-variant-ligatures: none; }
.mk-docs .mk-docs__note p { margin: 0; }

/* The preview's states: each tag beside what it means, in one box. */
.mk-docs__states { margin: 0 0 var(--s-4); display: grid; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.mk-docs__states > div { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-4); padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); align-items: baseline; }
.mk-docs__states > div:last-child { border-bottom: 0; }
.mk-docs__states dt { margin: 0; }
.mk-docs__states dd { margin: 0; font-size: var(--t-body-s); line-height: var(--lh-text); }
.mk-docs__tag { font-family: var(--font-mono); font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: var(--r-chip); background: var(--cream-2); color: var(--text-2); white-space: nowrap; font-variant-ligatures: none; }
.mk-docs__tag--up { background: var(--up-ground); color: var(--up); }
.mk-docs__tag--warn { background: var(--degraded-ground); color: var(--degraded); }
.mk-docs__tag--down { background: var(--down-ground); color: var(--down-text); }

/* The other guides at the foot of a page, as links in one row. */
.mk-docs .mk-others { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mk-docs .mk-others a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--white); color: var(--text); text-decoration: none; font-size: var(--t-small); }
.mk-docs .mk-others a:hover { border-color: var(--text); }

/* Previous and Next, from the sidebar's order. */
.mk-docs__pn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin: var(--s-7) 0 var(--s-4); }
.mk-docs__pn a { display: grid; gap: 0.25rem; padding: var(--s-3) var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-card); text-decoration: none; color: var(--text); }
.mk-docs__pn a:hover { background: var(--white); }
.mk-docs__pn small { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--font-mono); font-size: var(--t-mono-s); color: var(--text-3); font-variant-ligatures: none; }
.mk-docs__pn .mk-icon { width: 0.875rem; height: 0.875rem; }
.mk-docs__pn .mk-docs__back { transform: scaleX(-1); }
.mk-docs__next { grid-column: 2; text-align: right; justify-items: end; }

/* The guides (#1197, D-514) are drawn on this layout. Their index is a
   ruled list: each guide its title as a link, its one line and the date
   it was last updated in the meta row's small mono. A guide's meta row
   carries that date beside the read time, which needs nothing new. */
.mk-docs .mk-docs__entries { list-style: none; margin: 0; padding: 0; gap: 0; border-top: 1px solid var(--line); }
.mk-docs .mk-docs__entry { max-width: none; padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.mk-docs .mk-docs__art .mk-docs__entry h2 { margin: 0 0 var(--s-2); font-size: 1.375rem; text-wrap: balance; }
.mk-docs .mk-docs__entry h2 a { color: var(--text); text-decoration: none; }
.mk-docs .mk-docs__entry h2 a:hover { color: var(--cobalt); }
.mk-docs .mk-docs__entry p { margin: 0 0 var(--s-2); color: var(--text-2); }
.mk-docs__date { font-family: var(--font-mono); font-size: var(--t-mono-s); color: var(--text-3); font-variant-ligatures: none; }

/* On this page: the sections, the current one marked by docs.js. */
.mk-docs__toc { position: sticky; top: 6rem; display: grid; gap: 0.125rem; font-size: var(--t-small); border-left: 1px solid var(--line-strong); }
.mk-docs__toc b { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--text-3); font-weight: 500; padding: 0 0 var(--s-2) var(--s-3); font-variant-ligatures: none; }
.mk-docs__toc a { color: var(--text-2); text-decoration: none; padding: 0.3125rem 0 0.3125rem var(--s-3); margin-left: -1px; border-left: 2px solid transparent; }
.mk-docs__toc a:hover { color: var(--text); }
.mk-docs__toc a[aria-current="location"] { color: var(--text); border-left-color: var(--cobalt); }

@media (max-width: 56.25em) {
  .mk-docs { grid-template-columns: minmax(0, 1fr); padding: calc(4rem + var(--s-4)) var(--gutter-phone) var(--s-8); gap: 0; }
  .mk-docs__toc { display: none; }
  /* The Docs menu: a details element whose summary is the button. Open,
     the sidebar after it is drawn as a sheet under it. */
  .mk-docs__menu { display: block; margin-bottom: var(--s-5); }
  .mk-docs__menu summary { list-style: none; display: flex; align-items: center; gap: 0.625rem; min-height: 3rem; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--white); color: var(--text); cursor: pointer; }
  .mk-docs__menu summary::-webkit-details-marker { display: none; }
  .mk-docs__menu summary .mk-icon { width: 1.125rem; height: 1.125rem; flex: none; }
  .mk-docs__menu summary em { font-style: normal; margin-left: auto; color: var(--text-3); font-size: var(--t-small); text-align: right; }
  .mk-docs__menu[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .mk-docs__side { display: none; position: static; margin: calc(-1 * var(--s-5)) 0 var(--s-5); padding: var(--s-4); border: 1px solid var(--line-strong); border-top: 0; border-radius: 0 0 var(--r-card) var(--r-card); background: var(--white); }
  .mk-docs:has(> .mk-docs__menu[open]) > .mk-docs__side { display: grid; }
  .mk-docs__group a { display: flex; align-items: center; min-height: 2.75rem; }
  .mk-docs__group a[aria-current="page"] { background: var(--cream); }
  /* A table's rows become cards, each cell under its column's name. */
  .mk-docs__table { border: 0; background: none; overflow: visible; }
  .mk-docs__table thead { display: none; }
  .mk-docs__table table, .mk-docs__table tbody, .mk-docs__table tr, .mk-docs__table td, .mk-docs__table tbody th { display: block; }
  .mk-docs__table tr { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); margin-bottom: var(--s-3); padding: 0.25rem 0; }
  .mk-docs__table tbody tr:last-child > *, .mk-docs__table td, .mk-docs__table tbody th { border: 0; }
  .mk-docs__table tbody th { padding: 0.75rem 1rem 0.25rem; font-family: var(--font-display); font-size: var(--t-body); white-space: normal; overflow-wrap: anywhere; }
  .mk-docs__table td { padding: 0.375rem 1rem; overflow-wrap: anywhere; }
  .mk-docs__table code { white-space: normal; }
  .mk-docs__table td::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: var(--ls-kicker); color: var(--text-3); margin-bottom: 0.125rem; font-variant-ligatures: none; }
  .mk-docs__states > div { grid-template-columns: minmax(0, 1fr); gap: 0.375rem; }
  .mk-docs__tag { white-space: normal; }
  .mk-docs__pn { grid-template-columns: minmax(0, 1fr); }
  .mk-docs__next { grid-column: auto; text-align: left; justify-items: start; }
}