/* Wider reading layouts, using the site's existing palette and chunky cards. */
.doc-page .doc-head .wrap,
.doc-page .doc-layout { max-width:none; }
.doc-page .doc-head { text-align:start; }
.doc-page .doc-translation { max-inline-size:78ch; margin-inline:0; }
.doc-page .doc-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
.doc-page .doc-content { padding-block:32px 40px; padding-inline:32px; }
.doc-page .doc-content > :is(p,ul,ol,h2,h3,.note) { max-inline-size:78ch; }
.doc-page .doc-contents { position:static; border:2px solid var(--sky-200); border-block-end-width:5px; border-radius:var(--radius); background:var(--card); }
.doc-page .doc-contents summary { min-block-size:56px; padding-block:16px; padding-inline:20px; }
.doc-page .toc { padding-block:0 16px; padding-inline:12px; }
.doc-page .toc ol { columns:1; list-style:none; padding-inline-start:0; }
.doc-page .toc li { padding-block:0; }
.doc-page .toc a { display:flex; align-items:center; min-block-size:44px; padding-block:8px; padding-inline:12px; border-radius:12px; line-height:1.4; overflow-wrap:anywhere; }
.doc-page .toc a:hover { background:var(--sky-100); }
.doc-page .toc a[aria-current=location] { background:var(--pink-50); color:var(--pink-ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--pink-300); }
.doc-page .doc-glance { display:none; }
.doc-page .doc-options { display:grid; gap:20px; min-inline-size:0; }
.doc-page .doc-side-card { min-inline-size:0; padding-block:24px; padding-inline:24px; border:2px solid var(--sky-200); border-block-end:5px solid var(--pink-300); border-radius:var(--radius); background:var(--card); overflow-wrap:anywhere; }
.doc-page .doc-glance > h2,
.doc-page .doc-side-card :is(h2,h3) { margin-block:0 12px; padding-block:0; border:0; color:var(--pink-ink); font-size:var(--text-subheading); }
.doc-page .doc-side-card p { margin-block:0 12px; font-size:var(--text-small); color:var(--ink-soft); }
.doc-page .doc-side-card a { display:flex; align-items:center; min-block-size:44px; padding-block:8px; border-radius:8px; font-size:var(--text-small); line-height:1.4; }

@media (min-width:640px) and (max-width:1023px) {
  .doc-page .wrap { max-width:none; padding-inline:32px; }
}
@media (min-width:1024px) {
  .doc-page .doc-layout { grid-template-columns:300px minmax(0,1fr); gap:32px; }
  .doc-page .doc-contents,
  .doc-page .doc-options { position:sticky; top:auto; inset-block-start:calc(var(--topbar-height, 140px) + 22px); max-block-size:calc(100dvh - var(--topbar-height, 140px) - 44px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--pink-300) var(--sky-50); }
  .doc-delete .doc-layout { grid-template-columns:minmax(0,2fr) minmax(280px,1fr); }
  .doc-delete .doc-contents { display:none; }
}
@media (min-width:1281px) {
  .doc-page .wrap { max-width:none; padding-inline:clamp(32px,3vw,64px); }
}
@media (min-width:1600px) {
  .doc-page:not(.doc-delete) .doc-layout { grid-template-columns:300px minmax(0,1fr) 300px; }
  .doc-page .doc-glance { display:grid; align-content:start; gap:20px; min-inline-size:0; }
  .doc-page .doc-glance > h2 { margin-block-end:0; }
}
@media (max-width:639px) {
  .doc-page .wrap { padding-inline:16px; }
  .doc-page .doc { padding-block:28px 48px; }
  .doc-page .doc-content { padding-block:24px 28px; padding-inline:16px; }
  .doc-page .doc-side-card { padding-block:20px; padding-inline:20px; }
  .doc-page .doc-table { table-layout:fixed; inline-size:100%; }
  .doc-page .doc-table :is(th,td) { min-inline-size:0; padding-block:12px; padding-inline:8px; overflow-wrap:anywhere; }
  .doc-page .doc-content .btn { min-inline-size:0; max-inline-size:100%; overflow-wrap:anywhere; }
  .doc-page .doc-content p a { display:inline-block; min-block-size:44px; padding-block:6px; }
  .doc-page .lang-menu a { min-block-size:44px; }
}
@media (max-height:500px) {
  .doc-page .doc-contents,
  .doc-page .doc-options { position:static; max-block-size:none; }
}