/* Reading layout and study navigation. This file owns the shared primitives;
   pipeline-content.css owns only specialised educational content components.
   The 1024px breakpoint matches reading.js. No page-specific selectors. */

.ink-article-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-block: var(--space-6) var(--space-10);
}
.ink-article-layout > * { min-width: 0; width: 100%; }
.ink-article-layout > .ink-article-head { order: -2; }
.ink-article-layout > .ink-article-left { order: -1; }
.ink-article-layout > .ink-article-aside { order: 1; }
.ink-article-head, .ink-article-content {
  width: 100%;
  max-width: var(--reading-width);
  margin-inline: auto;
}
.ink-article-content {
  --box-pad-y: var(--space-4);
  --box-pad-x: var(--space-5);
  --flow-box: var(--space-8);
  font: var(--weight-body) var(--text-body)/var(--leading-body) var(--font);
  color: var(--text);
  overflow-wrap: break-word;
}
.ink-article-content :where(p, ul, ol, blockquote, pre, figure, table) { margin-block: 0 var(--space-6); }
.ink-article-content :where(h2, h3, h4) {
  color: var(--ink);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  margin-block: var(--space-10) var(--space-4);
  scroll-margin-top: 112px;
}
.ink-article-content h2 { font-size: var(--text-h2); }
.ink-article-content h3 { font-size: var(--text-h3); }
.ink-article-content h4 { font-size: var(--text-h4); }
.ink-article-content :where(h2, h3, h4) + :where(h2, h3, h4) { margin-top: var(--space-6); }
.ink-article-content > :first-child { margin-top: 0; }
.ink-article-content :where(p, li) { color: inherit; }
.ink-article-content :where(ul, ol) { padding-inline-start: var(--space-6); }
.ink-article-content li + li { margin-top: var(--space-2); }
.ink-article-content li > :where(ul, ol) { margin-block: var(--space-2) 0; }
.ink-article-content li::marker { color: var(--muted); }
.ink-article-content a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
.ink-article-content a:hover { text-decoration-thickness: 2px; }
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--space-1);
}
.ink-article-content blockquote {
  padding: var(--space-4) var(--space-5);
  border-inline-start: 3px solid var(--line);
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: normal;
}
.ink-article-content blockquote > :last-child { margin-bottom: 0; }
.ink-article-content :where(figure, .ink-featured-inline) { margin-block: var(--space-8); }
.ink-article-content figcaption {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--text-meta);
  line-height: var(--leading-ui);
}
.ink-article-content img { height: auto; max-width: 100%; border-radius: var(--radius-sm); }
.ink-article-content :where(pre, mjx-container[display="true"]) { max-width: 100%; overflow-x: auto; }
.ink-article-content pre { padding: var(--space-4); background: var(--surface); border-radius: var(--radius-sm); }
.ink-article-content code { font-size: .95em; overflow-wrap: anywhere; }
.ink-article-content .lcbse-table-scroll { width: 100%; min-width: 0; max-width: 100%; }
.ink-article-content .lcbse-table-scroll > table { margin: 0; line-height: var(--leading-ui); }
.ink-article-content .lcbse-table-scroll[data-mode="scroll"] > table { min-width: max-content; }
.ink-article-content :where(th, td) { overflow-wrap: break-word; }

/* One sidebar group, using native disclosure on mobile and tablet. */
.ink-aside-sticky { position: static; }
.ink-rail-panel, .ink-rail-panel__body, .ink-rail-stack, .ink-rail-card { min-width: 0; }
.ink-rail-panel, .ink-rail-stack {
  --rail-tint: color-mix(in srgb, var(--primary-l) 55%, white);
  --rail-border: color-mix(in srgb, var(--primary-d) 20%, white);
}
.ink-rail-panel { border: 0; padding: 0; margin: 0; }
.ink-rail-panel__toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rail-border);
  border-radius: var(--radius-sm);
  background: var(--rail-tint);
  color: var(--ink);
  font: var(--weight-heading) var(--text-nav)/var(--leading-ui) var(--font);
  cursor: pointer;
  list-style: none;
}
.ink-rail-panel__toggle::-webkit-details-marker { display: none; }
.ink-rail-panel__chev { width: 8px; height: 8px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.ink-rail-panel[open] .ink-rail-panel__chev { transform: rotate(225deg); }
.ink-rail-panel__body, .ink-rail-stack { display: grid; gap: var(--space-4); }
.ink-rail-panel[open] > .ink-rail-panel__body { margin-top: var(--space-4); }
.ink-rail-card {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--rail-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary-l) 18%, var(--paper-card));
  box-shadow: 0 2px 8px rgb(41 30 77 / 3%);
}
.ink-rail-title {
  margin: 0 0 var(--space-3);
  color: var(--ink);
  font: var(--weight-heading) var(--text-small)/var(--leading-ui) var(--font);
}
.ink-study-kicker { margin: 0 0 var(--space-1); color: var(--muted); font-size: var(--text-meta); }
.ink-study-context { border-top: 2px solid var(--primary-d); background: var(--rail-tint); }
.ink-study-context:has(+ .ink-study-adjacent) { border-bottom: 0; border-end-start-radius: 0; border-end-end-radius: 0; padding-bottom: var(--space-2); }
.ink-study-context + .ink-study-adjacent { margin-top: calc(-1 * var(--space-4)); border-top: 0; border-start-start-radius: 0; border-start-end-radius: 0; background: var(--rail-tint); }
.ink-study-context .ink-rail-title { margin-bottom: var(--space-2); font-size: var(--text-context); }
.ink-study-parent { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--link); font-size: var(--text-nav); }
.ink-silo-list, .ink-rail-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ink-silo-link, .ink-rail-list a, .ink-tool-links a, .ink-tool-links .is-current {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: var(--weight-body) var(--text-nav)/var(--leading-ui) var(--font);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ink-silo-link[href]:hover, .ink-rail-list a:hover, .ink-tool-links a:hover { background: var(--rail-tint); color: var(--link); }
.ink-silo-link[aria-current], .ink-tool-links .is-current {
  background: var(--primary-l);
  box-shadow: inset 3px 0 var(--primary-d);
  font-weight: var(--weight-heading);
  color: var(--ink);
}
.ink-silo-num { flex: 0 0 1.5em; font-size: var(--text-meta); text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.ink-silo-body { display: grid; gap: var(--space-1); min-width: 0; }
.ink-silo-meta, .ink-silo-count { color: var(--muted); font-size: var(--text-meta); font-weight: var(--weight-body); }
.ink-silo-link[aria-current] :is(.ink-silo-num, .ink-silo-meta) { color: var(--text); }
.ink-silo-count { margin: 0 0 var(--space-3); }

.ink-silo-book { margin-top: var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--rail-tint); color: var(--primary-d); font-size: var(--text-meta); font-weight: var(--weight-heading); }
.ink-tool-links { display: grid; gap: var(--space-1); }
.ink-tool-links .ink-arr { width: 16px; height: 16px; flex: none; }
.ink-study-adjacent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding-block: var(--space-2); }
.ink-study-adjacent:has(a:only-child) { grid-template-columns: 1fr; }
.ink-study-adjacent a { display: grid; gap: var(--space-1); padding-block: var(--space-3); font-size: var(--text-nav); color: var(--text); }
.ink-study-adjacent a + a { border-inline-start: 1px solid var(--line); padding-inline-start: var(--space-3); }
.ink-study-adjacent a:hover { color: var(--link); }
.ink-study-direction { font-size: var(--text-meta); color: var(--muted); }

/* Current location is readable before a long list; filtering never changes URLs. */
.ink-study-reading { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line); display: grid; gap: var(--space-1); }
.ink-study-reading span { font-size: var(--text-meta); color: var(--muted); }
.ink-study-reading strong { color: var(--primary-d); font-size: var(--text-nav); font-weight: var(--weight-heading); }
.ink-chapter-filter { margin: 0 0 var(--space-3); }
.ink-chapter-filter label { display: block; margin-bottom: var(--space-2); color: var(--text); font-size: var(--text-meta); }
.ink-chapter-filter input { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); color: var(--text); background: var(--bg); font: var(--text-small)/var(--leading-ui) var(--font); }
.ink-chapter-filter p { margin: var(--space-2) 0 0; font-size: var(--text-meta); color: var(--muted); }

/* Desktop measure stays bounded. Tall navigation uses document scrolling;
   JS only enables sticky when the entire group fits below the header. */
@media (min-width: 1024px) {
  .ink-article-layout { display: grid; grid-template-columns: minmax(0, var(--reading-width)); justify-content: center; row-gap: var(--space-6); column-gap: var(--reading-gap); padding-block: var(--space-8); }
  .ink-article-layout.has-left { grid-template-columns: var(--sidebar-width) minmax(0, var(--reading-width)); }
  .ink-article-layout.has-right { grid-template-columns: minmax(0, var(--reading-width)) var(--sidebar-width); }
  .ink-article-layout > .ink-article-head { grid-row: 1; }
  .ink-article-layout > .ink-article-content { grid-row: 2; }
  .ink-article-layout.has-left > :is(.ink-article-head, .ink-article-content) { grid-column: 2; }
  .ink-article-layout > :is(.ink-article-left, .ink-article-aside) { grid-row: 1 / span 2; align-self: stretch; }
  .ink-article-layout > .ink-article-left { grid-column: 1; }
  .ink-article-layout > .ink-article-aside { grid-column: 2; }
  .ink-article-layout.has-left.has-right > .ink-article-aside { grid-column: 2; grid-row: 3; }
  .ink-article-layout > * { order: initial; }
  .ink-rail-panel__toggle { display: none; }
  .ink-rail-panel:not([open]) > .ink-rail-panel__body { display: grid; }
  .ink-rail-panel::details-content { content-visibility: visible; }
  .ink-rail-panel[open] > .ink-rail-panel__body { margin-top: 0; }
  .ink-aside-sticky.is-sticky { position: sticky; top: var(--sticky-top, 112px); }
}
@media (max-width: 1023px) {
  .ink-article-layout { max-width: calc(var(--reading-width) + var(--space-10)); }
  .ink-article-content { --box-pad-x: var(--space-4); }
}
@media print {
  .ink-article-layout { display: block; }
  .ink-article-left, .ink-article-aside { display: none; }
}