/* ============================================================================
   /stack in the sub page system (9 Oct 2026). No live instrument: the page header holds the
   page's one figure (StackPage.StackFigure), drawn in HTML: nine app windows over one bar of
   memory, each column tied down to it. The rest is the system's own parts (chapters, cards,
   callouts, the form). Linked in PageStyles, after sub.css. Tokens only (no hex).
   ============================================================================ */
.sp h1 .ln { display: block; }
/* German: "Anwendungsschicht." is one word of eighteen letters, wider than a phone (and than the
   header's six columns at the system size); headless and some browsers do not hyphenate it, so
   the title steps down instead of breaking the word or orphaning its full stop. */
html[lang^="de"] .sp .stk-head h1 { font-size: clamp(22px, 7.4vw, 48px); }
@media (min-width: 1180px) { html[lang^="de"] .sp .stk-head h1 { font-size: clamp(40px, 3.6vw, 56px); } }

/* ---- the figure: many windows, one memory ---- */
.sp .stk-fig .fig-top { margin-bottom: 10px; }
.sp .stk-one { color: var(--lp-ink); text-align: end; }
.sp .stk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sp .stk-tiles li { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 80px; padding: 10px; border: 1px solid var(--lp-rule-2); background: var(--lp-paper); font: 600 14px/1.25 var(--tos-font-body); letter-spacing: -.01em; color: var(--lp-ink); overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
/* each window carries a small mark at its head, so the tiles read as windows, not buttons */
.sp .stk-tiles li::before { content: ""; width: 7px; height: 7px; background: var(--lp-ink); flex: none; }
.sp .stk-tiles li.is-more { border-style: dashed; color: var(--lp-muted); }
.sp .stk-tiles li.is-more::before { background: var(--lp-rule-2); }
.sp .stk-ties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; height: 28px; }
.sp .stk-ties span { justify-self: center; width: 1px; background: var(--lp-ink); }
.sp .stk-base { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 16px; background: var(--lp-ink); color: var(--lp-paper); font: 600 15px/1.3 var(--tos-font-body); letter-spacing: -.01em; }
.sp .stk-base::before { content: ""; width: 8px; height: 8px; background: var(--lp-accent); flex: none; }
/* a 320px phone: two windows to a line, so every name stays whole */
@media (max-width: 359px) {
  .sp .stk-tiles, .sp .stk-ties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp .stk-ties span:nth-child(3) { display: none; }
}
@media (min-width: 600px) {
  .sp .stk-tiles li { min-height: 104px; padding: 12px 14px; font-size: 16px; }
  .sp .stk-ties { height: 36px; }
  .sp .stk-base { min-height: 60px; font-size: 17px; padding: 14px 18px; }
}

/* ---- 02 four categories: two to a line from 760px (sub.css), four from 1180px ---- */
.sp .stk-cats .card p { font-size: 17px; color: var(--lp-ink-2); }
@media (min-width: 1180px) {
  .sp .stk-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
}

/* ---- callouts: the link inside one ---- */
.sp .callout p.more { margin-top: 12px; }

/* ---- 04 the request: the words and the Stem aside on the left, the form on the right ---- */
.sp .stk-req .ch-h .body { margin-top: 20px; }
.sp .stk-req .ch-h .body > p { font-size: 17px; }
.sp .stk-req .stk-stem { margin-top: 28px; }
.sp .stk-stem b { font-weight: 600; color: var(--lp-ink); }
@media (min-width: 1180px) {
  .sp .stk-req .ch-h .body > p { font-size: 18px; }
}