/*
 * SolSEO documentation and news pages (D-35.1).
 *
 * Loaded by layout/public.php ONLY when ContentController asks for it, after
 * marketing.css, so the five marketing pages never pay for a sheet they do not
 * use and every rule here can override marketing.css without !important.
 *
 * Every colour is a token from app.css or from marketing.css. The one value
 * declared here is Signal Blue itself: the design guide names --accent
 * #1C8AE6 as the graphic accent on light grounds, marketing.css carries only
 * its text companion (--mk-accent-ink) and its wash, and the line drawings
 * need the fill.
 *
 * WHAT THE LAYOUT IS. A page is a 248px sticky navigation column and a
 * measure. The navigation is the same markup at every width: sticky beside the
 * article above 1024, a disclosure the reader opens below it. The index is one
 * list per section, and a short page is allowed to be a short line, which is
 * the whole reason the tiles went.
 */

:root{
  --docs-accent:#1C8AE6;          /* design guide, Signal Blue: fills and graphic marks */
  --docs-side:248px;
  --docs-gap:56px;
}

/* ---- The shell ----------------------------------------------------------- */
/*
 * marketing.css centres any child of main without an mk- class at 1120px and
 * pads it. The docs shell is wider because it carries a navigation column
 * beside the measure, so it restates all four values rather than inheriting
 * half of them.
 */
.mk-main>.docs-shell{max-width:1240px;margin:0 auto;padding:40px var(--mk-gutter) 96px}
/*
 * ── THE READING COLUMN, AND WHY IT IS THE CONTAINER THAT CARRIES IT ────────
 *
 * News and a news post have no navigation column: they are prose in a box. The
 * box was 960px and the prose inside it was capped at 34em by .public p, which
 * is about 544px, so a paragraph filled 57% of its own column and broke to a
 * new line with 400px of nothing beside it. That is the orphan column CLAUDE.md
 * forbids, and the cap was never the fix for it: a paragraph cap sets
 * readability and says nothing about placement.
 *
 * So the CONTAINER is the measure now, at 760px and centred, and every cap
 * INSIDE it is cleared below. The two numbers agree with .docs-main and
 * .docs-article, which stop at 760px for the same reason, so a reader moving
 * between /docs and /news reads the same width of line on both.
 *
 * Scoped to body.public--reading, which ContentController already sets on these
 * two pages and only these two. /docs keeps its own two column shell untouched.
 */
.docs-shell--news,.docs-shell--post{max-width:760px}
.mk-main>.docs-shell--news,.mk-main>.docs-shell--post{max-width:760px}

/*
 * ── AND EVERY CAP INSIDE IT GOES ───────────────────────────────────────────
 *
 * The column IS the measure now, so a second measure inside it has nothing
 * left to do except leave a ragged edge in a column that was sized for it.
 * This is the same pair of moves .mk-read makes for /privacy and /terms, which
 * is where the rule came from.
 *
 * EVERY LINE CARRIES A CLASS THAT BEATS THE RULE IT CLEARS. .public p is a
 * class and a type, so a bare .docs-body p would lose to it silently; each
 * selector below is .public--reading plus the component, which outranks it and
 * loads after it. Six components on the marketing pages lost that argument on
 * 2026-09-18 without anybody noticing, which is why this is stated rather than
 * assumed. Guard: "Prose fills the column it is placed in".
 */
.public--reading .docs-shell p,
.public--reading .docs-shell .lede{max-width:none}
.public--reading .docs-intro{max-width:none}
.public--reading .docs-body ul,
.public--reading .docs-body ol,
.public--reading .docs-body blockquote{max-width:none}
.public--reading .docs-news__excerpt{max-width:none}
/*
 * The title gets the whole column. It is a grid item in a one column track, so
 * nothing was capping it, but it sat at 1.25rem in a 960px box and now has a
 * 712px one: at 1.125rem a headline of about seventy characters still sits on
 * one line, which is what the list is scanned by.
 */
.public--reading .docs-news__title{max-width:none;font-size:1.125rem}

/*
 * The index and a doc page are the same two-column shell: a sticky navigation
 * column and a measure. The index's column holds the search box and the
 * categories, a doc page's holds the search box, that page's headings and
 * every other page. One layout, so a reader who searches from a doc page and
 * lands on the index finds the box in the same place.
 */
.docs-shell--page,.docs-shell--index{display:grid;grid-template-columns:var(--docs-side) minmax(0,1fr);
                                     gap:var(--docs-gap);align-items:start}
/*
 * ONE LAYOUT MEANS ONE MEASURE, and .docs-article was missing from this rule.
 * The index is .docs-main and stopped at 760px; a doc page is .docs-article and
 * ran to 888px, where the paragraphs inside it kept their 34em cap and left
 * 344px of empty column beside every one of them. The two now stop in the same
 * place, which is what the paragraph above this says they do.
 */
.docs-main,.docs-article{min-width:0;max-width:760px}

/* ---- The index header ---------------------------------------------------- */
.docs-intro{max-width:34em;margin-bottom:48px}
.docs-intro h1{margin-bottom:12px}
.docs-intro .lede{margin:0 0 28px}
/*
 * The search box lives in the sidebar on both pages, so it is sized to that
 * column rather than to a measure: full width of whatever holds it, and
 * shorter than the old 48px header field because it now sits above a list.
 */
.docs-search{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;background:var(--card);
             border:1px solid var(--ink-line);border-radius:var(--mk-r-control);color:var(--ink-muted);
             transition:border-color var(--t) ease-out,box-shadow var(--t) ease-out;width:100%}
.docs-search:focus-within{border-color:var(--mk-accent-ink);box-shadow:0 0 0 3px var(--mk-accent-wash)}
.docs-search svg{flex:none}
.docs-search input{flex:1;min-width:0;border:0;background:none;font:400 15px var(--body);color:var(--ink);outline:none}
.docs-search input::-webkit-search-cancel-button{cursor:pointer}
.docs-search input{font-size:14px}
.docs-side__count{margin:10px 0 24px;font-size:.8125rem;color:var(--ink-muted)}
/* The search box owns the space under it, whatever comes next: the match
   count, a label, or the wrapped "on this page" list when the count is
   hidden. Without this the first label sits on the box. */
.docs-search+.docs-side__label,.docs-search+.docs-side__count{margin-top:18px}
.docs-search+div{margin-top:24px}

/* ---- The index list ------------------------------------------------------ */
.docs-index{display:grid;gap:44px}
/* The sticky header is 64px, so a section jumped to from the sidebar stops
   clear of it rather than under it. */
.docs-group{scroll-margin-top:96px}
.docs-group__head{display:flex;align-items:center;gap:20px;padding-bottom:14px;border-bottom:1px solid var(--ink-line);margin-bottom:4px}
.docs-group__head h2{font:700 1.375rem/1.25 var(--display);margin:0 0 4px}
.docs-group__blurb{margin:0;color:var(--ink-muted);font-size:.9375rem}
/*
 * app.css caps every list on a public page at 64ch, which is right for a list
 * of sentences and wrong for a navigation list whose dividers have to reach
 * the edge of the section. Each of these carries its own measure on the text
 * inside it instead.
 */
.public .docs-list,.public .docs-news,.public .docs-side__toc,.public .docs-side__list{max-width:none}
.docs-list{list-style:none;margin:0;padding:0}
.docs-list li{border-bottom:1px solid var(--ink-line)}
.docs-list li:last-child{border-bottom:0}
.docs-list a{display:grid;gap:4px;padding:16px 16px 16px 0;margin-left:-16px;padding-left:16px;
             border-radius:var(--mk-r-control);transition:background-color var(--t) ease-out}
.docs-list a:hover{background:var(--mk-accent-wash)}
.docs-list__title{font:700 1.0625rem/1.35 var(--display);color:var(--ink)}
.docs-list a:hover .docs-list__title{color:var(--mk-accent-ink)}
.docs-list__excerpt{color:var(--ink-muted);font-size:.9375rem;line-height:1.5;max-width:68ch}
.docs-nothing{color:var(--ink-muted)}
.docs-nothing b{color:var(--ink)}

/* ---- The line-drawn marks ------------------------------------------------ */
/*
 * One hand across the whole set: 1.5px strokes in the strong line colour,
 * exactly one accent fill per drawing, and no drawing is an icon from the nav
 * at a larger size.
 */
.docs-mark{display:block;flex:none;width:88px;color:var(--mk-line-strong)}
.docs-mark svg{display:block;width:100%;height:auto}
.docs-mark__fill{fill:var(--docs-accent)}
.docs-mark--hero{width:104px}

/* ---- The sidebar --------------------------------------------------------- */
.docs-side{position:sticky;top:88px;max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain;
           padding-right:8px;font-size:.9375rem}
.docs-side__toggle{display:none}
.docs-side__label{font:700 .72rem var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);
                  margin:0 0 12px}
.docs-side__label+.docs-side__label,.docs-side__toc+.docs-side__label{margin-top:32px}
/* The lists are wrapped in a div each so a heading can be hidden with its own
   list while the filter is running, which is what this restates the gap for. */
.docs-side__in>div+.docs-side__label{margin-top:32px}
.docs-side__in>div+div{margin-top:8px}
.docs-side__group{font:700 .8125rem var(--display);color:var(--ink);margin:20px 0 6px}
.docs-side__toc,.docs-side__list{list-style:none;margin:0;padding:0;border-left:1px solid var(--ink-line)}
.docs-side__toc a,.docs-side__list a{display:block;padding:6px 12px;margin-left:-1px;border-left:2px solid transparent;
                                     color:var(--ink-muted);line-height:1.4;
                                     transition:color var(--t) ease-out,border-color var(--t) ease-out}
.docs-side__toc a:hover,.docs-side__list a:hover{color:var(--ink);border-left-color:var(--ink-line)}
.docs-side__list a.is-here{color:var(--mk-accent-ink);font-weight:700;border-left-color:var(--gold-text)}

/* ---- The article --------------------------------------------------------- */
.docs-crumbs{font-size:.8125rem;color:var(--ink-muted);margin:0 0 20px;display:flex;gap:8px;flex-wrap:wrap}
.docs-crumbs a{color:var(--link)}
.docs-crumbs a:hover{color:var(--link-hover);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.docs-head{display:flex;align-items:flex-start;gap:28px;padding-bottom:28px;border-bottom:1px solid var(--ink-line);margin-bottom:8px}
.docs-head h1{font:800 clamp(1.875rem,4vw,2.75rem)/1.08 var(--display);letter-spacing:-.02em;margin:0 0 12px}
.docs-head .lede{margin:0}
.docs-head--post{display:block}
.docs-byline{color:var(--ink-muted);font-size:.8125rem;margin:0}
.docs-hero{width:100%;height:auto;border-radius:var(--mk-r);margin:24px 0}

/*
 * Typographic rhythm. A heading owns the space above it, never below, so the
 * gap between a paragraph and the next heading is one value rather than two
 * margins that happen to collapse.
 */
.docs-body{padding-top:8px}
.docs-body>*:first-child{margin-top:0}
.docs-body h2{font:800 1.5rem/1.2 var(--display);letter-spacing:-.01em;margin:56px 0 16px;padding-top:24px;
              border-top:1px solid var(--ink-line);scroll-margin-top:96px}
.docs-body h3{font:700 1.1875rem/1.3 var(--display);margin:36px 0 10px;scroll-margin-top:96px}
.docs-body p{margin:0 0 18px;line-height:1.7}
.docs-body ul,.docs-body ol{max-width:34em;margin:0 0 18px;padding-left:22px}
.docs-body li{margin-bottom:8px;line-height:1.65}
.docs-body li::marker{color:var(--mk-line-strong)}
.docs-body a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.docs-body a:hover{color:var(--link-hover);text-decoration-thickness:2px}
.docs-body strong{font-weight:700}
.docs-body code{font-family:ui-monospace,"Cascadia Mono","SFMono-Regular",Menlo,monospace;font-size:.875em;
                background:var(--paper);border:1px solid var(--ink-line);border-radius:4px;padding:1px 5px}
.docs-body pre{background:var(--ink);color:var(--card);border-radius:var(--mk-r);padding:18px 20px;overflow-x:auto;
               margin:0 0 24px;font-size:.8125rem;line-height:1.6}
.docs-body pre code{background:none;border:0;padding:0;color:inherit;font-size:1em}
.docs-body blockquote{margin:0 0 24px;padding:4px 0 4px 20px;border-left:3px solid var(--gold);color:var(--ink-muted);max-width:34em}
.docs-body blockquote p:last-child{margin-bottom:0}
.docs-body hr{border:0;border-top:1px solid var(--ink-line);margin:40px 0}
.docs-body table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.9375rem;
                 font-variant-numeric:tabular-nums;display:block;overflow-x:auto}
.docs-body th{font:600 .75rem var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);
              text-align:left;padding:10px 14px 10px 0;border-bottom:1px solid var(--mk-line-strong);white-space:nowrap}
.docs-body td{padding:10px 14px 10px 0;border-bottom:1px solid var(--ink-line);vertical-align:top}
/* A mock table inside a figure keeps the mock's own type and rhythm: the three
   rules above are for a documentation table, and they load after marketing.css. */
.docs-body .mk-rank{margin:0;font-size:11.5px}
.docs-body .mk-rank th{font:600 10px var(--display);letter-spacing:0;text-transform:none;padding:7px 6px}
.docs-body .mk-rank td{padding:0 6px;vertical-align:middle}
.docs-body img{max-width:100%;height:auto;border-radius:var(--mk-r)}

/* ---- A product mock used as a figure ------------------------------------- */
.docs-figure{margin:32px 0 36px;max-width:none}
.docs-figure figcaption{margin-top:12px;font-size:.8125rem;line-height:1.5;color:var(--ink-muted);max-width:44em}

/* ---- The findings rule catalogue ----------------------------------------- */
.docs-rules h2{font:800 1.5rem/1.2 var(--display);margin:56px 0 20px;padding-top:24px;
               border-top:1px solid var(--ink-line);scroll-margin-top:96px}
.docs-rule{padding:16px 0;border-bottom:1px solid var(--ink-line)}
.docs-rule h3{font:700 1.0625rem/1.3 var(--display);margin:0 0 6px}
.docs-rule p{margin:0 0 4px;font-size:.9375rem;line-height:1.6}
.docs-rule__fix b{font:700 .72rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);
                  margin-right:8px}

/* ---- Previous and next --------------------------------------------------- */
.docs-updown{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px}
.docs-updown__link{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--ink-line);border-radius:var(--mk-r);
                   background:var(--card);transition:border-color var(--t) ease-out,box-shadow var(--t) ease-out}
.docs-updown__link:hover{border-color:var(--mk-line-strong);box-shadow:var(--mk-shadow)}
.docs-updown__link--next{text-align:right}
.docs-updown__label{font:700 .72rem var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted)}
.docs-updown__title{font:700 1rem/1.35 var(--display);color:var(--ink)}

/* ---- News ---------------------------------------------------------------- */
.docs-news{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink-line)}
.docs-news li{border-bottom:1px solid var(--ink-line)}
.docs-news a{display:grid;gap:6px;padding:24px 16px 24px 0;margin-left:-16px;padding-left:16px;
             border-radius:var(--mk-r-control);transition:background-color var(--t) ease-out}
.docs-news a:hover{background:var(--mk-accent-wash)}
.docs-news__date{font-size:.8125rem;color:var(--ink-muted)}
.docs-news__title{font:700 1.25rem/1.3 var(--display);color:var(--ink)}
.docs-news a:hover .docs-news__title{color:var(--mk-accent-ink)}
.docs-news__excerpt{color:var(--ink-muted);line-height:1.6;max-width:62ch}
.docs-news__by{font-size:.8125rem;color:var(--ink-muted)}
.docs-feed{margin-top:40px;font-size:.875rem}

/* ---- Below 1024: the navigation becomes a disclosure ---------------------- */
@media (max-width:1023px){
  .docs-shell--page,.docs-shell--index{grid-template-columns:minmax(0,1fr);gap:24px}
  .mk-main>.docs-shell{max-width:760px}
  .docs-main,.docs-article{max-width:none}
  .docs-intro{margin-bottom:40px}
  .docs-side{position:static;max-height:none;overflow:visible;padding:0;
             border:1px solid var(--ink-line);border-radius:var(--mk-r);background:var(--card)}
  .docs-side__toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
                     padding:14px 16px;font:700 14px var(--display);color:var(--ink);background:none;
                     border:0;cursor:pointer;text-align:left}
  .docs-side__toggle svg{transition:transform var(--t) ease-out}
  .docs-side.is-shut .docs-side__toggle svg{transform:rotate(-90deg)}
  .docs-side.is-shut .docs-side__in{display:none}
  .docs-side__in{padding:4px 16px 20px;border-top:1px solid var(--ink-line)}
  .docs-head{gap:20px}
  .docs-mark--hero{width:72px}
}

@media (max-width:640px){
  .mk-main>.docs-shell{padding:28px 16px 64px}
  .docs-index{gap:44px}
  .docs-group__head{gap:14px}
  .docs-mark{width:52px}
  .docs-mark--hero{width:56px}
  .docs-head{display:block}
  .docs-head .docs-mark{margin-bottom:16px}
  .docs-updown{grid-template-columns:minmax(0,1fr)}
  .docs-updown__link--next{text-align:left}
  .docs-body h2{margin-top:44px}
  .docs-figure{margin-left:-4px;margin-right:-4px}
}

@media (prefers-reduced-motion:reduce){
  .docs-list a,.docs-news a,.docs-updown__link,.docs-search,.docs-side__toggle svg{transition-duration:.01ms}
}

/* The on-this-page list on a comparison or a guide (D-208.1).
   The docs sidebar's own list, used inline because these pages have no
   sidebar. Bounded and floated clear of the prose above the reading measure,
   so it reads as navigation rather than as the first paragraph. */
.docs-post__toc{margin:0 0 32px;max-width:36em}
.docs-post__toc .docs-side__label{margin-top:0}
.public--reading .docs-post__toc .docs-side__toc{max-width:none}